/* ==========================================================================
   The document system.

   Every directional property here is logical (inline-start / inline-end),
   never left / right, so switching to Arabic is a dir="rtl" flip rather than
   a second stylesheet. rtl.css holds only what must mirror explicitly.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  letter-spacing: -.006em;
  font-feature-settings: "tnum" 1;   /* tabular figures, so columns of numbers align */
  -webkit-font-smoothing: antialiased;
}

/* Arabic needs more leading and must never be tracked tighter than normal. */
html[lang="ar"] body {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  line-height: 1.75;
}

img, svg { display: block; max-width: 100%; }

/* Arrow links. `svg { display: block }` above made the arrow a block, so it
   dropped onto a line of its own and "All 14 service lines" rendered as two
   lines at every viewport. `.btn` was never affected because it is already
   inline-flex; these are the plain prose links, and they get the same
   treatment rather than a different one. The label stays a single flex item,
   so it still wraps internally at narrow widths while the arrow holds its
   place beside it. */
a:has(> .arrow):not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
a > .arrow { flex: none; }

/* These inline link-CTAs are the only route into the four calculators and
   into a case record, and they measured 21px tall -- under the 24px WCAG
   2.5.8 floor, never mind the 44px a thumb wants. The site's real buttons
   were sized correctly and these were not, so they get the same minimum at
   touch widths. Padding, not leading, so the type is unchanged. */
@media (max-width: 1060px) {
  a:has(> .arrow):not(.btn) {
    min-height: 44px;
    padding-block: 4px;
  }
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-deep); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -.028em;
  line-height: 1.06;
}
html[lang="ar"] :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.35; }

p { margin: 0; }

/* The browser gives <figure> a 40px side margin and a 1em top and bottom.
   Nothing in this stylesheet was resetting it, so every framed figure on the
   site sat 40px inside the column its own text occupied -- on the home page
   that put the results figure 40px narrower than the table directly above
   it, which reads as two unrelated blocks rather than a table and its
   illustration. Blocks that want air above use .fig--gap, which says so. */
figure { margin: 0; }

/* Consecutive paragraphs get air. The reset above is deliberate -- almost
   every block on this site positions its own children -- but nothing then
   handled the plain case, so a `.lead` followed by an unclassed <p> rendered
   as one block set in two sizes, with the leading changing mid-flow. Only
   adjacent siblings are affected, so no block that already spaces its own
   paragraphs is touched. */
p + p { margin-block-start: .9em; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  font-size: var(--step--1);
  font-weight: 600;
}
.skip-link:focus { inset-inline-start: 0; color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Shell: the page carries visible document margins
   -------------------------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  border-inline: 1px solid var(--rule-soft);
}
.pad { padding-inline: var(--pad); }

/* --------------------------------------------------------------------------
   The micro-label. This is how the document speaks about itself.
   -------------------------------------------------------------------------- */

.lbl {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gray);
  line-height: 1.4;
}
/* --teal is 4.62:1 on --paper and 4.36:1 on --paper-2, so this label
   passes on the page ground and fails inside a recessed panel. The
   deeper teal clears both, and at this size the two are
   indistinguishable. */
.lbl--teal { color: var(--teal); }
:is(.fig--paper, .band-paper, .prov, .results__ft) .lbl--teal { color: var(--teal-deep); }
/* Arabic has no uppercase, and heavy tracking damages joined letterforms. */
html[lang="ar"] .lbl { letter-spacing: .04em; text-transform: none; }

/* --------------------------------------------------------------------------
   Meta bar and header
   -------------------------------------------------------------------------- */

.metabar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.metabar__in {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding-block: 9px;
  flex-wrap: wrap;
}
.metabar .dot {
  width: 5px; height: 5px;
  background: var(--teal);
  display: inline-block;
  margin-inline-end: 8px;
  vertical-align: 1px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 246, 243, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 34px);
  padding-block: 14px;
  /* Pinned, so --header-h is a fact rather than an estimate. Anything that
     sticks below the header or scrolls to an anchor underneath it reads the
     same token, and the shape rail on /proof/ no longer sits 14px behind the
     header because a padding value changed somewhere else. */
  min-height: calc(var(--header-h) - 2px);
  box-sizing: border-box;
}

/* Crops the supplied raster lockup to its ink, so it sits on the baseline
   like type instead of floating in a box of built-in padding.
   The masters carry about 5.3% of dead margin either side and 24.4% top and
   bottom, so without this the lockup renders small in a mostly empty box.

   Every number below is derived from the ink bounding box measured out of the
   PNG, not estimated: lockup-light is 639x213 with ink at x 34-605, y 52-160,
   giving an ink aspect of 5.2477; lockup-dark has ink at x 35-604, y 52-156,
   aspect 5.4286. Re-measure if a lockup is ever regenerated -- an earlier
   version of this rule had the two variants' figures crossed, which clipped
   1.8px off the top of the ink and left 15px of empty box trailing right.

   max-width is mandatory. The global `img, svg { max-width: 100% }` rule
   above is not contested by `width`, so without this the scale-up is silently
   clamped back to 100% and the crop lands in the wrong place. */
.wordmark {
  display: block;
  height: 24px;
  aspect-ratio: 5.2477;
  position: relative;
  overflow: hidden;
  flex: none;
}
.wordmark img {
  position: absolute;
  max-width: none;
  /* height:auto is load-bearing. The <img> carries width/height attributes so
     the box is reserved before the raster loads; those attributes also act as
     presentational hints, and the height hint is not contested by the `width`
     below -- so without this the image rendered at its full 213px natural
     height inside a 24px crop window, and the header showed an empty slice. */
  height: auto;
  width: 111.71%;          /* 639 / 572 */
  inset-inline-start: -5.944%;  /* -34 / 572 */
  top: -47.72%;            /* -(52/213) * (639/572) * 5.2477 */
}
.wordmark--dark { aspect-ratio: 5.4286; }
.wordmark--dark img { width: 112.11%; inset-inline-start: -6.14%; top: -49.52%; }

.nav {
  margin-inline-start: auto;
  display: flex;
  gap: clamp(10px, 1.6vw, 22px);
  align-items: center;
}
.nav a {
  color: var(--charcoal);
  font-size: var(--step--1);
  font-weight: 500;
  padding-block: 3px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--teal); }
.nav a[aria-current="page"] { border-bottom-color: var(--teal); color: var(--navy); }

/* The `a` is load-bearing, not decoration. This element sits inside .nav, so
   it also matches `.nav a` above -- which is one class plus one type and
   therefore beats a bare `.nav__cta`. Written the short way, `color: #fff`
   lost to `.nav a { color: var(--charcoal) }` and the site's primary header
   CTA rendered charcoal on navy at a contrast ratio of about 1.1:1. The
   background never showed the fault because nothing else declares one. */
.nav a.nav__cta {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  padding: 9px 15px;
  border-bottom: 0;
}
.nav a.nav__cta:hover,
.nav a.nav__cta:focus-visible {
  background: var(--teal);
  color: #fff;
  border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   Language switcher
   -------------------------------------------------------------------------- */

.lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rule);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--charcoal);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  flex: none;
}
.lang:hover { border-color: var(--teal); color: var(--teal); }
.lang svg { flex: none; }

/* `align-items: center` centres each flex item's box, not the ink inside it.
   The globe is a 15px block and centres exactly; the glyph inherits
   line-height 1.55 from body, so its line box is 18.6px and centring that box
   pushes the baseline down. Collapsing the leading to 1 makes the two boxes
   the same height, which is the only way the two optical centres coincide. */
.lang,
.lang__code { line-height: 1; }

/* The glyph is Arabic and the UI font has no Arabic coverage, so it falls
   back to whatever the platform offers -- with different vertical metrics,
   which is what made the misalignment obvious rather than subtle. Every other
   Arabic rule in this stylesheet keys on the document language, so none of
   them fire here: on an English page the document is lang="en" while this one
   element is lang="ar". Hence the attribute selector. */
.lang[lang="ar"] .lang__code {
  font-family: var(--font-arabic);
  font-size: 14px;
}
.lang[lang="en"] .lang__code { letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  padding: 13px 20px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  transition: background .16s, border-color .16s, color .16s;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn svg { flex: none; }
html[lang="ar"] .btn { letter-spacing: 0; }

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block-start: clamp(20px, 2.2vw, 26px);
}

/* The response promise. Sits beside every CTA on the site. */
.promise {
  font-size: var(--step--1);
  color: var(--gray);
  margin-block-start: 16px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  max-width: 58ch;
}
.promise b { color: var(--charcoal); font-weight: 600; }
.promise svg { flex: none; margin-block-start: 3px; }

/* --------------------------------------------------------------------------
   Numbered sections. The spine of every page.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Page header. Every page but Home opens with one, which is where its <h1>
   lives. Kept deliberately quiet: it states which page this is and then gets
   out of the way of section 01, which is where the argument starts.
   -------------------------------------------------------------------------- */

.phead {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(26px, 3.2vw, 46px) clamp(20px, 2.4vw, 30px);
}
.phead__t {
  font-size: var(--step-3);
  letter-spacing: -.032em;
  line-height: 1.1;
  max-width: 20ch;
}
.phead__d {
  margin-block-start: 12px;
  font-size: clamp(14.5px, 1.2vw, 17px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 58ch;
}
html[lang="ar"] .phead__t { letter-spacing: 0; line-height: 1.35; max-width: 26ch; }
html[lang="ar"] .phead__d { max-width: 62ch; }

.sec {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sec-y);
}
.sec__grid {
  display: grid;
  grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr);
  gap: var(--gap-rail);
}
.sec__no {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--teal);
  display: block;
  margin-block-end: 9px;
}
.sec__ttl {
  font-size: var(--step-2);
  letter-spacing: -.03em;
  line-height: 1.18;
  max-width: 14ch;
}
.sec__note {
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.5;
  margin-block-start: 12px;
  max-width: 24ch;
}
html[lang="ar"] :is(.sec__ttl, .sec__note) { max-width: none; }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  letter-spacing: -.016em;
  max-width: 62ch;
  color: var(--ink-mid);
}
.lead b { font-weight: 600; color: var(--charcoal); }
html[lang="ar"] .lead { letter-spacing: 0; }
/* A lead sitting directly on the prose that follows it had no gap at all,
   while the paragraphs inside that prose were 16px apart -- so the seam
   between two different kinds of sentence read tighter than the seam
   between two of the same kind. Affects the product page and each
   capability theme. */
.lead + .prose { margin-block-start: 18px; }

/* One canonical pain sentence, set as a recognition line. */
.recognise {
  border-inline-start: 3px solid var(--teal);
  padding-inline-start: 18px;
  padding-block: 4px;
  margin-block-end: 26px;
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--charcoal);
  font-weight: 500;
  max-width: 52ch;
}
.recognise em { font-style: normal; color: var(--gray); }
html[lang="ar"] .recognise { letter-spacing: 0; max-width: none; }

/* An unsoftened statement of fact. Carries the stop-recommendation. */
.stopnote {
  margin-block-start: 22px;
  border-inline-start: 3px solid var(--teal);
  padding-inline-start: 16px;
  padding-block: 2px;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 66ch;
}
.stopnote b { font-weight: 650; }

/* Client quotes are the one place a serif appears in this system. */
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0;
  max-width: 54ch;
}
/* Was `.quote footer`. A <footer> inside a <blockquote> is still announced as
   a page-level contentinfo landmark, and /proof/ carries six quotes -- so the
   site's longest page offered six "footer" landmarks and the rotor was
   useless on it. <cite> is what this actually is. */
.quote__by {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12.5px;
  color: var(--gray);
  margin-block-start: 12px;
  letter-spacing: .02em;
}
.quote__by cite { font-style: normal; }
/* A plain hyphen, not an em-dash: the house rule is that no dash other than a
   hyphen reaches a visitor, and generated content is still text a visitor
   reads. */
.quote__by::before { content: "-\00a0"; }
html[lang="ar"] .quote { font-family: var(--font-arabic); font-style: normal; }

/* --------------------------------------------------------------------------
   Dark bands and the closing CTA
   -------------------------------------------------------------------------- */

.band-navy { background: var(--navy); color: #fff; }
.band-navy .shell { border-inline-color: rgba(255, 255, 255, .12); }
.band-navy .lbl { color: rgba(255, 255, 255, .5); }
.band-navy h2 { color: #fff; }
.band-navy .btn { background: var(--teal); border-color: var(--teal); }
.band-navy .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }
.band-navy .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.band-navy .btn--ghost:hover { border-color: #fff; color: #fff; }
.band-navy .promise { color: rgba(255, 255, 255, .6); }
.band-navy .promise b { color: rgba(255, 255, 255, .9); }

.close { padding-block: clamp(40px, 5vw, 64px); }
.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 900px) {
  .close__grid { grid-template-columns: minmax(0, 1fr); }
}
.close h2 { font-size: var(--step-3); letter-spacing: -.032em; max-width: 24ch; }
.close__grid p:not(.promise) {
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  max-width: 56ch;
  margin-block-start: 16px;
  line-height: 1.6;
}
/* The CTAs already carry their own top margin for the stacked case; in the
   two-column case they head their own column and the margin is dead space. */
@media (min-width: 901px) {
  .close__act .ctas { margin-block-start: 4px; }
}
html[lang="ar"] .close h2 { letter-spacing: 0; max-width: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--charcoal);
  color: rgba(247, 246, 243, .62);
  padding-block: 44px 34px;
  font-size: var(--step--1);
}
.site-footer .shell { border-inline-color: rgba(247, 246, 243, .1); }
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.foot h2 {
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247, 246, 243, .42);
  margin-block-end: 14px;
  font-weight: 600;
}
html[lang="ar"] .foot h2 { letter-spacing: .04em; text-transform: none; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: rgba(247, 246, 243, .78); }
.foot a:hover { color: var(--teal-lit); }
.foot .wordmark { margin-block-end: 16px; height: 22px; }
.foot p { line-height: 1.6; max-width: 42ch; font-size: 12.5px; }
.legal {
  margin-block-start: 34px;
  padding-block-start: 18px;
  border-top: 1px solid rgba(247, 246, 243, .13);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(247, 246, 243, .45);
}

/* --------------------------------------------------------------------------
   Responsive. The page body must never scroll sideways: wide tables and
   diagrams get their own .scroll-x wrapper instead.
   -------------------------------------------------------------------------- */

/* A table wider than its column scrolls sideways inside this. On a touch
   device the scrollbar is an overlay that appears only mid-gesture, so a
   clipped column reads as broken text rather than as more table -- hence a
   persistent thin bar rather than the platform default. The real answer for
   the widest table is to stop it needing a scroll at all, which .rt--stack
   does below. */
.scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  /* Anchors the scroll position to a column edge rather than mid-cell. */
  scroll-snap-type: inline proximity;
}

/* A grid item's default min-width is auto, which is its content's max-content
   width -- so a wide table inside a one-column .sec__grid pushed its own
   track wider than the viewport, and .scroll-x never got a constrained parent
   to scroll inside. /frameworks/ rendered its body 712px wide at 390px and
   ran its sentences off the screen mid-word. This is the rule that lets
   .scroll-x do its job, and it has to sit outside the media query because the
   two-column layout has the same exposure. */
.sec__grid > * { min-width: 0; }

/* Anchor targets clear the sticky header, and on /proof/ the sticky shape
   rail under it too. Without this a jump link lands with its heading hidden
   behind the header, which reads as the link having gone to the wrong
   place. */
:target { scroll-margin-top: calc(var(--header-h) + 56px); }

@media (max-width: 1060px) {
  /* The header grows here: the touch-size rules below give its controls a
     44px minimum. */
  :root { --header-h: 74px; }
  .sec__grid { grid-template-columns: 1fr; gap: 22px; }
  .sec__ttl, .sec__note { max-width: none; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav a:not(.nav__cta) { display: none; }

  /* Touch widths. The header's three surviving controls were 38, 37 and 29px
     tall, which is under the 44px a thumb needs and under even the 24px WCAG
     2.5.8 floor in one case. Height is added around the ink rather than to
     it, so nothing about the type changes. */
  .nav a.nav__cta,
  .navmob > summary,
  .lang {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 620px) {
  /* The header row does not wrap, and below about 620px wordmark + Menu +
     language + CTA no longer fit: the CTA was pushed past the right edge, so
     the site's primary conversion control was half off-screen and every page
     carried a horizontal scrollbar. The language switch is the item to drop,
     because it is duplicated inside the Menu disclosure and a reader who
     wants Arabic will find it there. */
  .nav .lang-form { display: none; }
  .head { gap: 10px; }
}

@media (max-width: 560px) {
  .foot { grid-template-columns: 1fr; }
  .metabar__in .lbl:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .site-header, .metabar, .lang, .skip-link { display: none; }
  body { background: #fff; }
}