/* ==========================================================================
   Page components.

   Carried over from the approved design mockup, with every directional
   property rewritten as a logical one so Arabic is a dir="rtl" flip rather
   than a stylesheet fork.

   The mockup is _untracked/design-options/home-a2-dossier-interlock.html --
   kept on disk as the visual reference but out of the repo, because it
   carries 8MB of duplicated logo masters.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(30px, 3.6vw, 50px) clamp(28px, 3.4vw, 44px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}
.hero__eyebrow { margin-block-end: 16px; }

/* The single most important sentence on the site. One canonical pain line,
   never four: four stacked read as a brochure, one reads as recognition. */
.pain {
  /* Capped below --step-4. At 55px this ran to five lines and pushed both
     buttons under the fold at 1440x900, so the page opened with a statement
     of the problem and no way to act on it. 44px keeps it the loudest thing
     on the screen and brings the CTAs back above the fold. */
  font-size: clamp(29px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.036em;
  line-height: 1.06;
  max-width: 23ch;
}
/* 3.42:1 on --paper. Was #8A9199, which is 2.95:1 -- under the 3:1 floor
   for large text, on the largest words on the site. */
.pain em { font-style: normal; color: #7A828B; }
html[lang="ar"] .pain { letter-spacing: 0; line-height: 1.3; max-width: 24ch; }

/* The category line. Quieter than the pain statement above it and louder than
   the positioning paragraph below, because it is the one sentence a reader
   needs before they decide whether to read either. */
.hero__what {
  margin-block-start: clamp(14px, 1.6vw, 20px);
  /* --step-2, not --step-1. At caption size this sentence was a third the
     height of the pain statement above it, and it is the one line that
     answers what the company sells -- so the only element on the screen
     that settled the question read as a footnote to the one that did not. */
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: -.018em;
  max-width: 34ch;
}
html[lang="ar"] .hero__what { letter-spacing: 0; max-width: 44ch; }

.hero__rule {
  width: 64px;
  height: 3px;
  background: var(--teal);
  margin-block: clamp(16px, 1.8vw, 22px) clamp(13px, 1.5vw, 17px);
}

.position {
  font-size: clamp(15.5px, 1.35vw, 19px);
  font-weight: 500;
  color: var(--navy);
  max-width: 46ch;
  line-height: 1.45;
  letter-spacing: -.014em;
}
.expand {
  margin-block-start: 15px;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.62;
}
.expand b { font-weight: 600; color: var(--charcoal); }
html[lang="ar"] :is(.position, .expand) { letter-spacing: 0; max-width: 62ch; }

/* --------------------------------------------------------------------------
   Figures in the hero: the mark drawn as a construction diagram
   -------------------------------------------------------------------------- */

.fig__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-block-end: 12px;
}
.fig__legend {
  margin: 14px 0 0;
  padding-block-start: 11px;
  border-top: 1px solid var(--rule);
}
.fig__legend div {
  display: flex;
  gap: 12px;
  padding-block: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.fig__legend dt { font-weight: 700; color: var(--navy); flex: none; width: 19px; }
.fig__legend div:last-child dt { color: var(--teal); }
.fig__legend dd { margin: 0; }
.fig figcaption {
  margin-block-start: 11px;
  padding-block-start: 11px;
  border-top: 1px solid var(--rule-soft);
  font-size: 12px;
  color: var(--gray);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Provenance strip. The credibility anchor, above the fold: a business with
   real operating history in industrial engineering services is the one claim
   here that a software consultancy structurally cannot make.
   -------------------------------------------------------------------------- */

.prov {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  margin-block-start: clamp(28px, 3.4vw, 42px);
  display: flex;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: center;
  flex-wrap: wrap;
  padding: 18px 22px;
}
.prov .lbl { flex: none; }
.prov__yr {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--navy);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.prov p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; max-width: 72ch; }
.prov p b { color: var(--charcoal); font-weight: 600; }

/* --------------------------------------------------------------------------
   The document vocabulary index.

   Naming the documents is the whole differentiator and it costs nothing --
   not one of the 79 firms surveyed names a single one of these.
   -------------------------------------------------------------------------- */

.vocab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
  margin-block-start: 26px;
}
.vocab div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-soft);
  padding-block: 9px;
  font-size: 14px;
}
.vocab div:hover { border-bottom-color: var(--teal); }
.vocab span {
  font-size: var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
  flex: none;
}
html[lang="ar"] .vocab span { letter-spacing: .02em; text-transform: none; }

.sys {
  margin-block-start: 26px;
  padding-block-start: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.sys b { font-size: 13.5px; font-weight: 600; margin-inline-end: 4px; }
.sys code {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--navy);
  border: 1px solid var(--rule);
  padding: 4px 9px;
  background: var(--card);
  /* Product names stay left-to-right inside an Arabic paragraph. */
  unicode-bidi: isolate;
  direction: ltr;
}

/* --------------------------------------------------------------------------
   Breadth: what the same practice ships that is not paper.

   Deliberately quieter than the document vocabulary above it. It answers a
   misreading -- that this is a document-processing shop -- and a block that
   shouted would turn a correction into a second pitch, which is the
   horizontal drift the positioning rules out. Rule above, no card, no fill.
   -------------------------------------------------------------------------- */

.breadth {
  margin-block-start: 30px;
  padding-block-start: 20px;
  border-top: 1px solid var(--rule);
}
.breadth__lead {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-block-start: 8px;
  max-width: 62ch;
}
.breadth__list {
  margin-block-start: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.breadth__list > div { background: var(--card); padding: 15px 16px 16px; }
.breadth__list dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
/* The figure, not the label, is what the eye should land on. Teal is reserved
   for exactly this across the whole site. */
.breadth__list dt span {
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.breadth__list dd {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (max-width: 620px) {
  .breadth__list { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   The stage table. Duration, never price.
   -------------------------------------------------------------------------- */

.tbl { width: 100%; border-collapse: collapse; margin-block-start: 8px; }
.tbl caption {
  text-align: start;
  font-size: 12.5px;
  color: var(--gray);
  padding-block-end: 14px;
  line-height: 1.5;
}
.tbl th {
  text-align: start;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 0 14px 10px 0;
  padding-inline: 0 14px;
  border-bottom: 1px solid var(--navy);
}
html[lang="ar"] .tbl th { letter-spacing: .03em; text-transform: none; }
.tbl :is(th, td):last-child { padding-inline-end: 0; text-align: end; white-space: nowrap; }
.tbl td {
  padding-block: 16px;
  padding-inline: 0 14px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  font-size: 14.5px;
  line-height: 1.5;
}
.tbl tr:hover td { background: rgba(14, 124, 123, .035); }
.tbl .st { font-weight: 650; letter-spacing: -.018em; font-size: 15px; min-width: 15ch; }
.tbl .st small {
  display: block;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--teal);
  margin-block-end: 5px;
}
html[lang="ar"] .tbl .st { letter-spacing: 0; }
html[lang="ar"] .tbl .st small { letter-spacing: .02em; text-transform: none; }
.tbl .q { color: var(--ink-soft); max-width: 56ch; }
.tbl .dur { font-weight: 600; color: var(--navy); }

/* --------------------------------------------------------------------------
   The results motif, in its full boxed form. Identical on the site, the
   proposal PDF, the case-study PDF and the deck.
   -------------------------------------------------------------------------- */

.results { border: 1px solid var(--navy); background: var(--card); }
.results__hd {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 13px 18px;
  background: var(--navy);
  color: #fff;
}
.results__hd .lbl { color: rgba(255, 255, 255, .72); }
.results__hd strong { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.results table { width: 100%; border-collapse: collapse; }
.results th {
  text-align: start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
}
html[lang="ar"] .results th { letter-spacing: .03em; text-transform: none; }
.results td { padding: 14px 18px; border-bottom: 1px solid var(--rule-soft); font-size: 14.5px; }
.results tr:last-child td { border-bottom: 0; }
.results .m { color: var(--ink-mid); line-height: 1.45; }
.results .b { color: var(--gray); white-space: nowrap; text-align: end; width: 1%; }
.results .a {
  color: var(--teal);
  font-weight: 700;
  white-space: nowrap;
  text-align: end;
  width: 1%;
  font-size: 16px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.results__ft {
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--gray);
  line-height: 1.5;
  background: var(--paper-2);
}
.results th:nth-child(n+2) { text-align: end; }

.aside-note {
  font-size: 13px;
  color: var(--gray);
  margin-block-start: 20px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  max-width: 66ch;
  line-height: 1.55;
}
.aside-note svg { flex: none; margin-block-start: 4px; }

/* --------------------------------------------------------------------------
   Method strip
   -------------------------------------------------------------------------- */

.method {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-block-start: 26px;
}
.method div { background: var(--paper); padding: 18px 16px 20px; }
.method b {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.02em;
  margin-block: 9px 6px;
}
.method p { font-size: 12.5px; color: var(--gray); line-height: 1.5; }
.method .k { font-size: 11px; font-weight: 700; color: var(--teal); letter-spacing: .1em; }
html[lang="ar"] .method b { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   The delivery record
   -------------------------------------------------------------------------- */

.plot {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  margin-block-start: 26px;
}
.plot__box { border: 1px solid var(--rule); background: var(--card); padding: 12px; }
/* The map's key. A reading list rather than a table: there is no longer a
   second column to align, because the per-country counts came off -- they
   read as a concentration rather than a footprint, and three of the seven
   rows had no case-file figure to print. The library/founder split is now
   carried by the two headings instead of by a blank cell. */
.ckey .lbl { color: var(--gray); }
.ckey .lbl + ol { margin: 9px 0 20px; }
.ckey ol:last-child { margin-block-end: 0; }
.ckey ol { list-style: none; padding: 0; }
.ckey li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  padding-block: 7px;
  border-bottom: 1px solid var(--rule-soft);
}
.ckey li:last-child { border-bottom: 0; }
.ckey li span {
  color: var(--teal);
  font-weight: 700;
  font-size: 11px;
  flex: none;
  width: 1.1em;
  font-variant-numeric: tabular-nums;
}

.plot__cap { font-size: 12.5px; color: var(--gray); line-height: 1.6; margin-block-start: 14px; }
.plot__cap b { color: var(--charcoal); font-weight: 600; }

/* --------------------------------------------------------------------------
   Who this is not for
   -------------------------------------------------------------------------- */

.notfor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-block-start: 22px;
  border-top: 1px solid var(--navy);
}
.notfor div {
  padding-block: 16px;
  padding-inline: 0 18px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  border-bottom: 1px solid var(--rule-soft);
}
.notfor b { display: block; color: var(--charcoal); font-weight: 650; margin-block-end: 4px; }

/* --------------------------------------------------------------------------
   The product page.

   Two components, both added because the page had argued its case well and
   described nothing. A visitor could read it end to end without learning
   that it was a product rather than a service, or one thing it does.

   .orient is the home page's three routes: the engagement model, the service
   lines and the product. It sits directly under the hero, where a first-time
   visitor is being introduced to the practice. All three cards carry the
   same ground -- one of them shaded would read as the recommendation, and
   which route is right depends on the reader, not on us.

   .feat answers the second: four groups of concrete capabilities in the
   buyer's own words. Modelled on .breadth__list, but the emphasis is on the
   name rather than on a figure, so no teal number.
   -------------------------------------------------------------------------- */

.orient {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-block-start: 24px;
}
/* Column, so the link and the "you are here" marker can be pushed to the
   foot of every card and line up across the row whatever the text runs to. */
.orient > div { background: var(--card); padding: 16px 18px 18px; display: flex; flex-direction: column; }
.orient b {
  display: block;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.016em;
  color: var(--charcoal);
  margin-block: 0 6px;
}
.orient p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
/* Pushed to the foot of the card, so the three links sit on one line
   whatever each card's text runs to. */
.orient a { margin-block-start: auto; padding-block-start: 12px; font-size: 12.5px; font-weight: 600; }
html[lang="ar"] .orient b { letter-spacing: 0; }

.featgrp { margin-block-start: 34px; padding-block-start: 24px; border-top: 1px solid var(--rule); }
.featgrp:first-of-type { margin-block-start: 26px; padding-block-start: 0; border-top: 0; }
.featgrp__ttl {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.022em;
  color: var(--navy);
  line-height: 1.35;
  max-width: 46ch;
}
.featgrp__lead {
  margin-block-start: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 64ch;
}
.feat {
  margin-block-start: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.feat > div { background: var(--card); padding: 15px 16px 16px; }
.feat dt { font-size: 13px; font-weight: 650; color: var(--navy); line-height: 1.4; }
.feat dd { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }

/* Four delivery steps, not the five the method strip is built for. The
   narrower breakpoints below still catch it, because they target .method. */
.method--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 620px) {
  .feat { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Prose blocks used across the interior pages
   -------------------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose p { font-size: 15px; line-height: 1.66; color: var(--ink-soft); }
.prose p + p { margin-block-start: 16px; }
.prose p b { color: var(--charcoal); font-weight: 600; }
.prose h2 {
  font-size: 19px;
  letter-spacing: -.022em;
  line-height: 1.25;
  margin-block: 28px 9px;
}
.prose h2:first-child { margin-block-start: 0; }
html[lang="ar"] .prose h2 { letter-spacing: 0; }
.prose h3 {
  font-size: var(--step-1);
  letter-spacing: -.024em;
  margin-block: 30px 12px;
  line-height: 1.25;
}
.prose h4 {
  font-size: 14.5px;
  letter-spacing: -.014em;
  margin-block: 24px 8px;
}
.prose ul, .prose ol { margin: 14px 0 0; padding-inline-start: 20px; }
.prose li { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.prose li + li { margin-block-start: 8px; }
html[lang="ar"] .prose :is(h3, h4) { letter-spacing: 0; }

/* A theme heading with the teal rule beneath it, per the brand's section
   header convention. */
.theme { margin-block-start: clamp(30px, 3.4vw, 44px); }
.theme:first-child { margin-block-start: 0; }
/* The claim sentence and the prose under it had no space between them, so the
   two ran together as one paragraph set in two sizes. Every other block on
   the site puts air after a lead; this one only ever styled `.theme > p`,
   and the prose sits inside a wrapper of its own. */
.theme > :is(.prose, .fig, .deflist) { margin-block-start: 18px; }
.theme > h3 {
  font-size: var(--step-2);
  letter-spacing: -.028em;
  line-height: 1.2;
  padding-block-end: 12px;
  border-bottom: 2px solid var(--teal);
  display: inline-block;
  margin: 0;
}
html[lang="ar"] .theme > h3 { letter-spacing: 0; }
.theme > p { margin-block-start: 16px; }

/* A short definition list, used for scope, deliverables and glossary rows */
.deflist { margin: 20px 0 0; }
.deflist div {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 26px);
  padding-block: 13px;
  border-bottom: 1px solid var(--rule-soft);
}
.deflist dt { font-size: 13.5px; font-weight: 600; color: var(--charcoal); line-height: 1.4; }
.deflist dd { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Service line cards
   -------------------------------------------------------------------------- */

.group { margin-block-start: clamp(28px, 3.2vw, 40px); }
.group:first-child { margin-block-start: 0; }
.group > h3 {
  font-size: 15px;
  letter-spacing: .01em;
  padding-block-end: 10px;
  border-bottom: 1px solid var(--navy);
  color: var(--navy);
}
.lines { display: grid; gap: 0; }
.line { padding-block: 20px; border-bottom: 1px solid var(--rule-soft); }
.line__hd { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.line__n { font-size: 11px; font-weight: 700; color: var(--teal); letter-spacing: .1em; }
.line h4 { font-size: 15.5px; letter-spacing: -.02em; }
html[lang="ar"] .line h4 { letter-spacing: 0; }
.line__depth {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid var(--teal);
  padding: 2px 7px;
}
html[lang="ar"] .line__depth { letter-spacing: .02em; text-transform: none; }
.line__says {
  margin-block-start: 12px;
  border-inline-start: 3px solid var(--before);
  padding-inline-start: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
  max-width: 62ch;
}
.line__promise { margin-block-start: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); max-width: 68ch; }
.line__docs { margin-block-start: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.line__docs span {
  font-size: 11.5px;
  color: var(--gray);
  border: 1px solid var(--rule-soft);
  padding: 3px 8px;
  background: var(--card);
}
.line__proof {
  margin-block-start: 13px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--teal);
  max-width: 74ch;
}
.line__honest {
  margin-block-start: 10px;
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.55;
  max-width: 74ch;
}
.line__honest b { color: var(--ink-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   The contact form
   -------------------------------------------------------------------------- */

.form { max-width: 620px; margin-block-start: 8px; }
.form__req { font-size: 12.5px; color: var(--gray); margin-block-end: 18px; }
.field { margin-block-end: 20px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin-block-end: 7px;
}
.field :is(input, textarea, select) {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--charcoal);
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 11px 13px;
  line-height: 1.5;
}
.field :is(input, textarea, select):focus-visible { border-color: var(--teal); }
.field textarea { resize: vertical; min-height: 132px; }
.field__help { font-size: 12px; color: var(--gray); margin-block-start: 7px; line-height: 1.5; }
.field__err { font-size: 12.5px; color: #9E2A2B; margin-block-start: 7px; font-weight: 500; }
.field--bad :is(input, textarea, select) { border-color: #9E2A2B; }
.formerr {
  border: 1px solid #9E2A2B;
  background: rgba(158, 42, 43, .05);
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  margin-block-end: 22px;
  max-width: 620px;
}
.formerr ul { margin: 8px 0 0; padding-inline-start: 18px; }
.formerr li + li { margin-block-start: 4px; }
.formerr a { color: #9E2A2B; text-decoration: underline; }
.sent {
  border: 1px solid var(--teal);
  background: rgba(14, 124, 123, .06);
  padding: 18px 20px;
  max-width: 620px;
}
.sent h3 { font-size: var(--step-1); letter-spacing: -.02em; margin-block-end: 10px; }
.sent p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
html[lang="ar"] .sent h3 { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Calculators
   -------------------------------------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
  margin-block-start: 26px;
}
.calc__in { border: 1px solid var(--rule); background: var(--card); padding: clamp(16px, 2vw, 22px); }
.calc__out { border: 1px solid var(--navy); background: var(--card); }
.calc__outhd { background: var(--navy); color: #fff; padding: 12px 18px; }
.calc__outhd strong { font-size: 13.5px; font-weight: 600; }
.calc__body { padding: clamp(14px, 1.8vw, 20px); }
.calc__row { margin-block-end: 16px; }
.calc__row:last-child { margin-block-end: 0; }
.calc__row label { display: block; font-size: 13px; font-weight: 600; margin-block-end: 6px; }
.calc__row input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--rule);
  padding: 10px 12px;
  background: var(--paper);
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}
.calc__row input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--teal); }
.calc__note { font-size: 11.5px; color: var(--gray); margin-block-start: 5px; line-height: 1.45; }
.calc__big {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--teal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc__biglbl { font-size: 12px; color: var(--gray); margin-block-start: 8px; line-height: 1.45; }
html[lang="ar"] .calc__big { letter-spacing: 0; }
.calc__basis {
  margin-block-start: 20px;
  padding-block-start: 16px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--gray);
  line-height: 1.55;
}
.calc__basis b { color: var(--ink-soft); font-weight: 600; }

/* Explicitly two columns, not auto-fit. There are four instruments and there
   will be four for a while, so the column count is a design decision rather
   than something to leave to the viewport. auto-fit resolved to three at the
   shell width, which put one card alone on a second row beside two empty
   grid cells showing through as rule colour -- reading as two tools we failed
   to think of. Four in a square reads as four on purpose. */
.toolcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-block-start: 26px;
}
.toolcard { background: var(--card); padding: 20px 20px 22px; display: flex; flex-direction: column; }
/* min-height reserves the label's line so the titles below it stay on one
   line across the row. Without it, a label that wraps in one card -- a longer
   Arabic translation, a narrower column -- drops that card's title alone and
   the row reads as misaligned. Same guard as .tile__lbl in viz.css. */
.toolcard .lbl { color: var(--teal); min-height: 1.4em; }
.toolcard h3 { font-size: 17px; letter-spacing: -.024em; margin-block: 10px 0; }
.toolcard p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-block-start: 10px; flex: 1; }
.toolcard a { font-size: 13.5px; font-weight: 600; margin-block-start: 16px; display: inline-flex; gap: 8px; align-items: center; }
html[lang="ar"] .toolcard h3 { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Proof entries
   -------------------------------------------------------------------------- */

.study { padding-block: clamp(22px, 2.6vw, 32px); border-bottom: 1px solid var(--rule); }
.study:last-child { border-bottom: 0; }
.study__hd { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.study h3 { font-size: var(--step-1); letter-spacing: -.024em; line-height: 1.3; }
.study h3 a { color: var(--charcoal); }
.study h3 a:hover { color: var(--teal); }
.study__meta { font-size: 11.5px; color: var(--gray); letter-spacing: .01em; }
/* One column. This was a two-up grid, prose beside figure-and-table, which
   gave the results table half the shell to fit a three-column table with a
   sentence in the first column: measures wrapped to eight lines and long
   after-values pushed the table into a sideways scroll. The prose keeps a
   readable measure; the table takes the full column and now fits. */
.study__body { margin-block-start: 14px; display: grid; gap: 16px; }
.study__p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 74ch; }
.study__bridge {
  margin: 0;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mid);
  border-inline-start: 3px solid var(--teal);
  padding-inline-start: 14px;
}
.study__bridge b { color: var(--charcoal); font-weight: 600; }
.study__more { margin: 0; font-size: 13.5px; font-weight: 600; }

/* The rest of a shape's records. One row each: what it is, the sector it was
   built in, and its strongest figure -- enough to decide whether to open it,
   and no more. The full table is on the record's own page. */
.rest__h {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray);
  margin-block-start: clamp(26px, 3vw, 38px);
  padding-block-end: 10px;
  border-bottom: 1px solid var(--rule);
}
html[lang="ar"] .rest__h { letter-spacing: .03em; text-transform: none; }
.rest { margin: 0; padding: 0; list-style: none; }
.rest li {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 4px clamp(14px, 2vw, 28px);
  align-items: baseline;
  padding-block: 13px;
  border-bottom: 1px solid var(--rule-soft);
}
/* The title is the link, and it looks like one at rest. Styled as body text
   with the colour only appearing on hover, these 31 rows read as inert on a
   desktop and were invisible as links on a touch screen, where there is no
   hover -- so the largest part of the evidence library had nothing inviting
   a reader into it. */
.rest__t {
  grid-column: 1;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal-deep);
  line-height: 1.35;
  border-bottom: 1px solid var(--rule);
  padding-block-end: 1px;
}
.rest__t:hover { color: var(--teal); border-bottom-color: var(--teal); }
.rest li { position: relative; }
/* The whole row is the target, not just the words. */
.rest__t::after { content: ""; position: absolute; inset: 0; }
.rest__m {
  grid-column: 1;
  grid-row: 2;
  font-size: 11.5px;
  color: var(--gray);
  line-height: 1.4;
}
.rest__v {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.rest__v b { color: var(--teal); font-weight: 650; }
.rest__v small { display: block; font-size: 11.5px; color: var(--gray); margin-block-start: 3px; }

@media (max-width: 620px) {
  .rest li { grid-template-columns: minmax(0, 1fr); }
  .rest__v { grid-column: 1; grid-row: auto; margin-block-start: 6px; }
}
html[lang="ar"] .study h3 { letter-spacing: 0; }

.asset-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid var(--rule);
  color: var(--gray);
  white-space: nowrap;
}
.asset-tag--own { border-color: var(--teal); color: var(--teal); }
html[lang="ar"] .asset-tag { letter-spacing: .02em; text-transform: none; }

/* --------------------------------------------------------------------------
   Glossary
   -------------------------------------------------------------------------- */

/* The gridlines are borders on the cells, not a background showing through
   1px gaps. With the background trick, 20 terms in a three-column grid left
   one cell unfilled and the rule colour painted through it as a 325x172
   block, which read as a card that had failed to load. Borders draw nothing
   where there is no cell. */
.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: 1px solid var(--rule);
  border-width: 1px 0 0 1px;
  margin-block-start: 24px;
  background: var(--card);
}
.term {
  background: var(--card);
  padding: 17px 18px 19px;
  border: 1px solid var(--rule);
  border-width: 0 1px 1px 0;
}
.term h3 { font-size: 15px; letter-spacing: -.02em; line-height: 1.3; }
.term h3 a { color: var(--charcoal); }
.term h3 a:hover { color: var(--teal); }
.term p { font-size: 12.5px; color: var(--gray); line-height: 1.55; margin-block-start: 9px; }
html[lang="ar"] .term h3 { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Comparison blocks
   -------------------------------------------------------------------------- */

.cmp { border: 1px solid var(--rule); background: var(--card); margin-block-start: 22px; }
.cmp__hd { background: var(--paper-2); border-bottom: 1px solid var(--rule); padding: 13px 18px; }
.cmp__hd h3 { font-size: 16px; letter-spacing: -.022em; }
.cmp__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cmp__cell { padding: 15px 18px 18px; }
.cmp__cell + .cmp__cell { border-inline-start: 1px solid var(--rule-soft); }
.cmp__cell h4 {
  font-size: var(--label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
  margin-block-end: 9px;
}
html[lang="ar"] .cmp__cell h4 { letter-spacing: .02em; text-transform: none; }
.cmp__cell p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.cmp__ours { background: rgba(14, 124, 123, .05); }
.cmp__ours p { color: var(--charcoal); }
.cmp__when {
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.55;
}
html[lang="ar"] .cmp__hd h3 { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Mobile navigation.

   The desktop nav collapses below 1060px. Without this it would simply
   disappear, which would leave a keyboard or phone reader with the CTA and
   nothing else -- so the same links come back as a disclosure. <details> is
   used deliberately: it needs no JavaScript and is keyboard-operable for
   free.
   -------------------------------------------------------------------------- */

.navmob { display: none; }
.navmob > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--charcoal);
  border: 1px solid var(--rule);
  padding: 8px 12px;
}
.navmob > summary::-webkit-details-marker { display: none; }
.navmob[open] > summary { border-color: var(--teal); color: var(--teal); }
.navmob__panel {
  position: absolute;
  inset-inline: 0;
  background: var(--paper);
  border-block: 1px solid var(--rule);
  padding: 6px var(--pad) 14px;
  display: grid;
  gap: 2px;
  z-index: 45;
}
.navmob__panel a {
  color: var(--charcoal);
  font-size: 14.5px;
  padding-block: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.navmob__panel a[aria-current="page"] { color: var(--teal); font-weight: 600; }
/* The language switch, which leaves the header row below 620px. It sits under
   the links rather than among them because it changes the page you are on
   rather than navigating to a new one. */
/* --------------------------------------------------------------------------
   The shape rail on /proof/. A 27-screen page needs somewhere to stand.
   -------------------------------------------------------------------------- */

.shapenav {
  position: sticky;
  /* Under the site header, which is itself sticky at top: 0. The token is
     pinned to the header's min-height, so this cannot drift out of register
     the way a hard-coded 53px did. */
  top: var(--header-h);
  z-index: 30;
  background: rgba(247, 246, 243, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.shapenav__in {
  display: flex;
  align-items: baseline;
  gap: 10px clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
  padding-block: 10px;
}
.shapenav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(12px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.shapenav a {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-block: 5px;
  display: inline-block;
}
.shapenav a:hover { color: var(--navy); border-bottom-color: var(--teal); }
/* Below the desktop nav breakpoint the label goes and the four links become
   one horizontally scrollable row. Wrapping instead cost 160px of an 844px
   phone screen, permanently, on the site's longest page. */
@media (max-width: 760px) {
  .shapenav .lbl { display: none; }
  .shapenav__in { padding-block: 4px; }
  .shapenav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    /* Room for the scroll affordance, and the row keeps its own edge padding
       when it scrolls. */
    padding-inline-end: 18px;
    scrollbar-width: none;
  }
  .shapenav ul::-webkit-scrollbar { display: none; }
  .shapenav a { font-size: 12.5px; white-space: nowrap; min-height: 40px; }
}

/* The function index at the head of the capabilities catalogue. Same job as
   the shape rail on /proof/, not sticky: these are the page's own sections
   rather than a filter over a long list. */
.grouplist {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(14px, 2vw, 24px);
  padding-block: 14px;
  border-block: 1px solid var(--rule);
  margin-block-end: clamp(22px, 2.6vw, 32px);
}
.grouplist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(12px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.grouplist a {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-block: 6px;
  display: inline-block;
}
.grouplist a:hover { color: var(--navy); border-bottom-color: var(--teal); }

.navmob__panel .lang-form { margin-block-start: 12px; }
.navmob__panel .lang { min-height: 44px; }
html[lang="ar"] .navmob > summary { letter-spacing: .02em; text-transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* The lead figure above a study's results table on the Proof page. Flat --
   no card, no border -- because it sits inside the study block, which
   already has its own frame, and a box inside a box reads as a mistake. */
.study__fig { margin: 0; }


@media (max-width: 1060px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero .fig { max-width: 430px; }
  .plot, .calc { grid-template-columns: 1fr; }
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navmob { display: block; margin-inline-start: auto; }
  .nav { margin-inline-start: 0; }
}

@media (max-width: 720px) {
  .deflist div { grid-template-columns: 1fr; gap: 4px; }
  .cmp__cell + .cmp__cell { border-inline-start: 0; border-top: 1px solid var(--rule-soft); }
}

@media (max-width: 560px) {
  .method { grid-template-columns: 1fr; }
  /* Two columns of a four-card grid is right down to tablet width; on a
     phone the cards are narrower than their own titles. */
  .toolcards { grid-template-columns: minmax(0, 1fr); }
  .prov { padding: 16px 18px; }
  .tbl :is(th, td):last-child { text-align: start; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { border-bottom: 1px solid var(--rule); padding-block: 14px; }
  .tbl td { border: 0; padding-block: 2px; padding-inline: 0; }
  .pain { font-size: clamp(27px, 8.4vw, 34px); }
}