/* Home hero "The Threshold" — the hero IS the first scene, not an overlay.
   It opens on the courtroom, a directed camera settles the frame, the title card
   composes, and then it STAYS PUT and scrolls away like any real section. There is
   no overlay and no wipe hand-off, so nothing can "swap" underneath it.
   Robustness: all copy is VISIBLE by default. The runtime (home-cinematic.js) sets
   the animation's from-states via GSAP, so if JS never runs — or motion is reduced —
   the hero simply renders composed, with a real <h1>.
   Type: Newsreader (display) · Manrope (UI) · Noto Naskh Arabic (Arabic display).
   Animated properties: transform / opacity only. */

/* Loading curtain — a brief brand hold while the courtroom still decodes, which then
   lifts to reveal the hero. It is a pure curtain: it carries only the mark, never a
   copy of the hero's content, so there is nothing it can "swap". Safety: it lifts by
   CSS animation on its own, so a failed or blocked script can never leave it covering
   the site. The runtime cancels that and drives the lift itself when it boots. */
.hc-curtain {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: #050607;
  animation: hc-curtain-lift .7s ease 2.4s forwards;
}
.hc-curtain--js { animation: none; }
@keyframes hc-curtain-lift { to { opacity: 0; visibility: hidden; } }
.hc-curtain__mark { width: clamp(52px, 5.5vw, 74px); }
.hc-curtain__mark img { display: block; width: 100%; height: auto; }
.hc-curtain__word {
  display: flex;
  direction: ltr; /* the Latin brand word must never mirror under RTL */
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-weight: 460;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: .4em;
  text-indent: .4em;
  color: #fbf9f4;
}
.hc-curtain__word span { display: inline-block; }
/* Door-opening video intro: the clip fills the curtain, the HAQ lockup sits over it. */
.hc-curtain--video { padding: 0; }
.hc-curtain__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hc-curtain--video .hc-curtain__lockup {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
@media (prefers-reduced-motion: reduce) {
  .hc-curtain { display: none; }
}

.record-scene--hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

/* Stage — the courtroom still the directed camera moves, plus its readability scrim. */
.hc-hero__stage { position: absolute; inset: 0; z-index: 0; }
.hc-hero__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hc-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(125% 95% at 76% 28%, rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, .34) 58%, rgba(5, 7, 10, .68) 100%),
    linear-gradient(101deg, rgba(3, 6, 10, .90) 0%, rgba(3, 6, 10, .54) 34%, rgba(3, 6, 10, .06) 66%),
    linear-gradient(0deg, rgba(3, 6, 10, .86) 0%, rgba(3, 6, 10, 0) 42%);
}
[dir="rtl"] .hc-hero__scrim { transform: scaleX(-1); }

/* Title card — lower third, editorial left-aligned (mirrored under RTL). */
.hc-hero__copy {
  position: relative;
  z-index: 2;
  margin-inline-start: clamp(28px, 7vw, 120px);
  margin-inline-end: clamp(28px, 7vw, 120px);
  margin-block-end: clamp(104px, 20vh, 230px);
  max-width: min(46rem, 88vw);
  text-align: start;
}
.hc-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1.35rem;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #f2a83f;
}
.hc-hero__rule {
  display: block;
  flex: none;
  width: clamp(30px, 4vw, 54px);
  height: 1px;
  background: var(--record-mark, #7fada2);
  transform-origin: left center;
}
[dir="rtl"] .hc-hero__rule { transform-origin: right center; }
/* On a phone this row is a flex box with no wrap rule, so the anonymous text
   item shrank and broke "Haq Legal / Consultancy" across two lines while
   "Egypt" stayed up on the first, with the tick stranded between them. The
   phrases are kept whole and allowed to wrap as units, and the hairline is
   dropped to buy the forty pixels that let it hold one line. Nothing else in
   the hero is touched. */
@media (max-width: 760px) {
  .hc-hero__eyebrow {
    flex-wrap: wrap;
    white-space: nowrap;
    gap: .5rem;
    font-size: .7rem;
    letter-spacing: .2em;
  }
  .hc-hero__rule { display: none; }
}
/* Arabic is cursive — letter-spacing breaks the joins, so it must never be tracked. */
[dir="rtl"] .hc-hero__eyebrow { letter-spacing: normal; }

/* Scoped to .record-scene--hero so these win on specificity (0,2,0) over the
   generic `.record-scene h1` (0,1,1) in cinematic.css. Unscoped (0,1,0) they
   lose, and load order cannot save them. `max-width: none` releases the 16ch
   measure that rule imposes; the copy container governs the line length. */
.record-scene--hero .hc-hero__title {
  margin: 0;
  max-width: none;
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 7.1vw, 6.4rem);
  line-height: 1.0;
  letter-spacing: -.028em;
  color: #fbf9f4;
}
.record-scene--hero .hc-hero__title i { font-style: italic; font-weight: 440; color: #ecbe86; }
/* Naskh needs its own size and real leading: at the Latin `line-height: .94`
   the diacritics of one line collide with the next. */
[dir="rtl"] .record-scene--hero .hc-hero__title {
  font-family: "Noto Naskh Arabic", serif;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
  line-height: 1.32;
  letter-spacing: 0;
}
[dir="rtl"] .record-scene--hero .hc-hero__title i { font-style: normal; color: #ecbe86; }
.hc-line { display: block; overflow: hidden; padding-block: .06em; }
.hc-line > span { display: block; will-change: transform, opacity; }

/* The hero headline is a metaphor: "Every matter leaves a record / and Haq turns it
   into a decision". A visitor could read the whole hero without learning whether this
   firm takes people like them. One literal line says who it is for. Sits between the
   headline and the button, quieter than both. */
.hc-hero__subtitle {
  max-width: 48ch;
  margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
  color: rgba(251, 249, 244, .78);
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: .002em;
}

[dir="rtl"] .hc-hero__subtitle {
  max-width: 46ch;
  font-family: var(--record-arabic-sans, "Noto Sans Arabic", system-ui, sans-serif);
  font-size: clamp(1.02rem, 1.4vw, 1.24rem);
  line-height: 1.75;
  letter-spacing: 0;
}

.hc-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  /* The owner asked for the button to sit lower - about a fifth further from the
     copy above it, so the headline block and the action read as two beats. */
  margin-top: clamp(2.9rem, 6vh, 4.4rem);
  padding: .8rem 1rem .8rem 1.55rem;
  border-radius: 999px;
  background: var(--record-amber, #ee8618);
  color: #1c1305;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), filter .22s ease, box-shadow .22s ease;
}
[dir="rtl"] .hc-hero__cta { padding: .8rem 1.55rem .8rem 1rem; }
.hc-hero__cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 22px 48px rgba(0, 0, 0, .44); }
.hc-hero__cta:focus-visible { outline: 2px solid #fbf9f4; outline-offset: 3px; }
.hc-hero__orb {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .17);
  font-size: 1rem;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
[dir="rtl"] .hc-hero__orb { transform: scaleX(-1); }
.hc-hero__cta:hover .hc-hero__orb,
.hc-hero__cta:focus-visible .hc-hero__orb { transform: translate(3px, -3px); }
[dir="rtl"] .hc-hero__cta:hover .hc-hero__orb,
[dir="rtl"] .hc-hero__cta:focus-visible .hc-hero__orb { transform: translate(-3px, -3px) scaleX(-1); }

/* Drawn-line scroll cue — an amber pulse travels down a hairline. */
.hc-hero__scroll {
  position: absolute;
  z-index: 2;
  inset-block-end: clamp(26px, 4vh, 42px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(241, 234, 220, .6);
}
[dir="rtl"] .hc-hero__scroll { letter-spacing: normal; }
.hc-hero__chev {
  position: relative;
  width: 1px;
  height: 36px;
  overflow: hidden;
  background: linear-gradient(rgba(241, 234, 220, .55), rgba(241, 234, 220, 0));
}
.hc-hero__chev::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 42%;
  background: var(--record-mark, #7fada2);
  animation: hc-scroll-pulse 1.9s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes hc-scroll-pulse {
  0% { transform: translateY(-110%); }
  60%, 100% { transform: translateY(285%); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-hero__chev::after { animation: none; }
}

/* ============================================================================
   MOBILE HOME — "see the room, then read the record" (phones only, homepage only)
   Owner direction: no panel. The photograph shows CLEARLY first, with the section
   named in a distinctive display face and one line of context on the image; the
   detail then arrives as you scroll down over the darkening lower frame. Desktop is
   untouched — there the ivory ledger sits beside the photo, which the owner keeps.
   Scoped to body[data-story-page="home"] + max-width:760px.
   ========================================================================== */

/* Ink follows paint, at every width.

   The shared content-mode rules in cinematic.css declare dark ink and a cream ground
   in the same block, which is correct where the panel really is cream. Home keeps
   five of those scenes on the navy stage and overrides only the ground, so the ink
   stayed behind: labels at 2.43:1, a next-step link in near-black on navy. The fix
   existed already but lived inside @media (max-width: 760px), so it never reached
   the desktop page at all.

   article-folio (the reading room) and enquiry-file do carry a cream panel here, so
   they keep their dark ink and are excluded. */
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__heading,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__details {
  color: var(--record-paper);
  background: transparent;
}

/* The decision-ledger counter is a ::before, not a text node, so the contrast sweep
   that reads text never saw it: 01 02 03 04 on the home page were painted in the ink
   of the cream panels, 2.43:1 on navy, in both languages. Found by photographing the
   sections and then measuring what the photograph showed. Same rule as everything
   else here - ink follows paint. */
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-detail::before,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__details > div::before,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__details dt,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__details > div > :first-child,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__kicker,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__heading .record-scene__kicker {
  color: var(--record-mark);
}

body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__details dd,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__details > div > :last-child,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__heading .record-scene__lead {
  color: rgba(241, 234, 220, .82);
}

body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__heading h1,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-scene__heading h2,
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-action {
  color: var(--record-paper);
}

/* The rule under a next-step link is drawn from --panel-label, which home does not
   declare, so name it here rather than leave it on the cream-panel fallback. */
body[data-story-page="home"] .record-scene:not(.record-scene--hero):not([data-content-mode="article-folio"]):not([data-content-mode="enquiry-file"]) .record-action {
  --record-action-rule: var(--record-mark);
}

@media (max-width: 760px) {
  /* Tall scene: the title sits over the clear top of the photo, the list over the
     dark bottom, and the clear middle is the "where am I" beat you scroll through. */
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) {
    min-height: 172svh;
  }
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150svh;
    gap: 2rem;
  }

  /* Clear at the top (image reads), a soft floor at the bottom so the list stays
     legible. No flat wash across the whole frame. */
  body[data-story-page="home"] .record-scene:not(.record-scene--hero):not(:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"])) .record-scene__plate::after {
    background: linear-gradient(to bottom,
      rgba(6, 9, 12, .18) 0%,
      rgba(6, 9, 12, .06) 22%,
      rgba(6, 9, 12, .12) 52%,
      rgba(6, 9, 12, .55) 78%,
      rgba(6, 9, 12, .9) 100%);
  }

  /* The section name — the distinctive display face the owner asked for. */
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__heading h2 {
    font-family: "Instrument Serif", Newsreader, Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 9.5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.01em;
    color: #f7f2e7;
    text-shadow: 0 2px 30px rgba(4, 7, 10, .6);
  }
  [dir="rtl"] body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__heading h2 {
    font-family: "Noto Naskh Arabic", serif;
    letter-spacing: 0;
    line-height: 1.3;
  }
  /* One line of context on the image, small and quiet. */
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__lead {
    color: rgba(244, 239, 228, .9);
    text-shadow: 0 1px 16px rgba(6, 9, 12, .6);
  }

  /* The detail — NO panel. Text sits directly on the darkened lower frame. */
  body[data-story-page="home"] .record-scene[data-content-mode="chronology"] .record-scene__details,
  body[data-story-page="home"] .record-scene[data-content-mode="decision-ledger"] .record-scene__details,
  body[data-story-page="home"] .record-scene[data-content-mode="scope-record"] .record-scene__details,
  body[data-story-page="home"] .record-scene[data-content-mode="authority-map"] .record-scene__details {
    color: #f4efe4;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  /* Faint light row dividers, light definitions, gold labels + numbers. */
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-detail {
    border-color: rgba(244, 239, 228, .16) !important;
  }
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-detail dt,
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__details > div > :first-child {
    color: var(--record-mark, #7fada2);
  }
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-detail dd,
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__details > div > :last-child {
    color: rgba(244, 239, 228, .88);
    text-shadow: 0 1px 14px rgba(6, 9, 12, .5);
  }
  /* Counter numbers stay bare gold text; chronology dot reads on the photo. */
  body[data-story-page="home"] .record-scene[data-content-mode="chronology"] .record-scene__details > div::before {
    background: var(--record-mark, #7fada2);
    border-color: rgba(244, 239, 228, .5);
  }
  body[data-story-page="home"] .record-scene[data-content-mode="decision-ledger"] .record-detail::before,
  body[data-story-page="home"] .record-scene[data-content-mode="decision-ledger"] .record-scene__details > div::before,
  body[data-story-page="home"] .record-scene[data-content-mode="authority-map"] .record-detail::before {
    background: transparent;
    color: var(--record-mark, #7fada2);
  }
}

/* Light-overlay scenes (article-folio "reading room", chronology-light) carry an ivory
   frame, so the forced light text above made them unreadable. Here they keep dark ink
   and no card — readable, still panel-free. A later block, so it wins on equal weight. */
@media (max-width: 760px) {
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-scene__heading h2,
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-scene__lead,
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-detail dt,
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-detail dd,
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-scene__details > div > :first-child,
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-scene__details > div > :last-child {
    color: #1b2733;
    text-shadow: none;
  }
  /* Labels inside the ivory panel take the deep mark. */
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-detail dt,
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-scene__details > div > :first-child {
    color: var(--record-mark-on-light);
  }

  /* The kicker is not inside that panel - it sits above it, on the dark stage. It had
     the panel's ink anyway, and measured on rendered pixels that is 2.41:1 for "07 How
     to prepare" and 2.28:1 for "08 Initial enquiry". Computed styles could not see it:
     the panel behind is a translucent cream, so walking the ancestors finds a cream
     background that never fully covers the stage. It takes the dark-ground mark. */
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-scene__kicker {
    color: var(--record-mark);
  }
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-scene__heading h2 {
    font-family: "Instrument Serif", Newsreader, Georgia, serif;
  }
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-detail {
    border-color: rgba(20, 32, 44, .16);
  }
}

/* Kill the "phased" dark card. data-motion-profile="phased" wrapped the heading,
   details and content in rgba(7,19,27,.965) with a 3px amber top-border and a shadow —
   the dark box + orange line behind the title the owner asked to delete entirely. On
   mobile home the content sits directly on the photo, so none of that belongs. */
@media (max-width: 760px) {
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__heading,
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__details,
  body[data-story-page="home"] .record-scene:not(.record-scene--hero) .record-scene__content:not(:has(> .record-scene__heading)) {
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding: 0;
  }
}

/* ============================================================================
   MOBILE HOME — a distinct treatment per section (phones only, homepage only)
   The baseline above makes every beat readable and panel-free; this layer gives
   each content type its OWN visual signature so no section repeats the last one.
   ========================================================================== */
@media (max-width: 760px) {
  /* DECISION-LEDGER (Establish the record / Working discipline): oversized serif
     numerals lead each row — the number IS the graphic. */
  body[data-story-page="home"] .record-scene[data-content-mode="decision-ledger"] .record-detail::before,
  body[data-story-page="home"] .record-scene[data-content-mode="decision-ledger"] .record-scene__details > div::before {
    font-family: "Instrument Serif", Newsreader, serif !important;
    font-size: 2.9rem !important;
    line-height: .9 !important;
    font-weight: 400 !important;
    opacity: .92;
  }
  body[data-story-page="home"] .record-scene[data-content-mode="decision-ledger"] .record-detail {
    padding-block: .55rem;
  }

  /* AUTHORITY-MAP (Business decisions) + CHRONOLOGY (Private decisions): a drawn
     vertical thread with ringed nodes — a map/timeline you read top to bottom.
     The owner liked this; here it's sharpened and given breathing room. */
  body[data-story-page="home"] .record-scene[data-content-mode="authority-map"] .record-scene__details,
  body[data-story-page="home"] .record-scene[data-content-mode="chronology"] .record-scene__details {
    position: relative;
    padding-inline-start: 2.1rem;
  }
  body[data-story-page="home"] .record-scene[data-content-mode="authority-map"] .record-scene__details::before,
  body[data-story-page="home"] .record-scene[data-content-mode="chronology"] .record-scene__details::before {
    content: "";
    position: absolute;
    inset-block: .6rem;
    inset-inline-start: 7px;
    width: 2px;
    background: linear-gradient(var(--record-mark, #7fada2), rgba(127, 173, 162,.15));
  }
  body[data-story-page="home"] .record-scene[data-content-mode="authority-map"] .record-detail::before,
  body[data-story-page="home"] .record-scene[data-content-mode="authority-map"] .record-scene__details > div::before,
  body[data-story-page="home"] .record-scene[data-content-mode="chronology"] .record-detail::before,
  body[data-story-page="home"] .record-scene[data-content-mode="chronology"] .record-scene__details > div::before {
    content: "" !important;
    position: absolute;
    inset-inline-start: -2.1rem;
    width: 16px; height: 16px;
    margin: .3rem 0 0;
    border-radius: 50%;
    background: #0c1116;
    border: 2px solid var(--record-mark, #7fada2) !important;
    box-shadow: 0 0 0 4px rgba(12,17,22,.6);
  }
  body[data-story-page="home"] .record-scene[data-content-mode="authority-map"] .record-detail,
  body[data-story-page="home"] .record-scene[data-content-mode="chronology"] .record-detail {
    position: relative;
    padding-block: .7rem;
  }

  /* PROFILE (the founder): the portrait leads. The name drops large to the lower
     third over a deep gradient, the face stays clear above, the disclosure is small
     and out of the title's way — a person, not a ledger. */
  body[data-story-page="home"] .record-scene[data-content-mode="profile"] .record-scene__content {
    justify-content: flex-end;
    min-height: 128svh;
  }
  body[data-story-page="home"] .record-scene[data-content-mode="profile"] .record-scene__plate::after {
    background: linear-gradient(to bottom,
      rgba(6,9,12,.05) 0%, rgba(6,9,12,.05) 42%, rgba(6,9,12,.55) 74%, rgba(6,9,12,.94) 100%);
  }
  body[data-story-page="home"] .record-scene[data-content-mode="profile"] .record-scene__heading h2 {
    font-family: "Instrument Serif", Newsreader, serif;
    font-size: clamp(2.9rem, 12vw, 4.2rem);
    line-height: .98;
  }
  body[data-story-page="home"] .record-scene[data-content-mode="profile"] .record-scene__description {
    font-size: .66rem;
    opacity: .62;
  }

  /* ARTICLE-FOLIO (Legal thinking): the light "reading room" reads as a printed
     contents page — a hairline rule under each entry, ink on ivory. */
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-detail {
    border-block-end: 1px solid rgba(20,32,44,.18);
    padding-block: .85rem;
  }
  body[data-story-page="home"] .record-scene:is([data-content-mode="article-folio"],[data-content-mode="enquiry-file"]) .record-scene__details > div::before {
    font-family: "Instrument Serif", Newsreader, serif !important;
    font-size: 1.5rem !important;
  }
}

/* ============================================================================
   PER-SECTION CONCEPTS (mobile home) — one distinct idea per section, targeted by
   scene-id so sections that share a content-mode still diverge. Not restyled lists.
   ========================================================================== */
@media (max-width: 760px) {
  /* 05 · WORKING DISCIPLINE — typographic word-stamps, not a list.
     "Facts. Question. Scope. Action." land as four large words you scroll through. */
  body[data-story-page="home"] .record-scene[data-scene-id="discipline"] .record-scene__details {
    display: block;
    padding-inline-start: 0;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="discipline"] .record-scene__details::before,
  body[data-story-page="home"] .record-scene[data-scene-id="discipline"] .record-detail::before {
    content: none !important;
    display: none !important;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="discipline"] .record-detail {
    display: block;
    border: none !important;
    padding-block: 1.1rem;
    grid-template-columns: none;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="discipline"] .record-detail dt {
    display: block;
    font-family: "Instrument Serif", Newsreader, Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.9rem, 15vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.01em;
    color: #f6f1e6;
    text-shadow: 0 2px 26px rgba(4, 7, 10, .6);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="discipline"] .record-detail dt::after {
    content: ".";
    color: var(--record-mark, #7fada2);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="discipline"] .record-detail dd {
    display: block;
    margin-top: .35rem;
    max-width: 30ch;
    font-size: .92rem;
    line-height: 1.5;
    color: rgba(244, 239, 228, .72);
  }
}

@media (max-width: 760px) {
  /* 04 · PRIVATE DECISIONS — a descending TIME sequence, and a readability fix: the
     photo is bright at the top (a window) where the title was washing out, so the scene
     darkens harder up top and the steps read as a solid gold progression, not open rings
     (which distinguishes it from the business-door map that shares the thread idea). */
  /* The photo has a bright window behind the title. Darken the top third hard so the
     light title reads, clear the middle for her face, darken the base for the steps. */
  body[data-story-page="home"] .record-scene[data-scene-id="private-door"]:not(.record-scene--hero):not([data-content-mode="article-folio"]) .record-scene__plate::after {
    background: linear-gradient(to bottom,
      rgba(6, 9, 12, .92) 0%, rgba(6, 9, 12, .84) 42%, rgba(6, 9, 12, .34) 58%,
      rgba(6, 9, 12, .36) 68%, rgba(6, 9, 12, .78) 85%, rgba(6, 9, 12, .95) 100%);
  }
  /* The route link was near-invisible dark ink on the photo, so it reads gold here. */
  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-action {
    color: var(--record-amber, #f49f2e);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-scene__details::before {
    background: var(--record-mark, #7fada2); /* a solid time-line, not a fading thread */
    width: 3px;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-detail::before,
  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-scene__details > div::before {
    background: var(--record-mark, #7fada2) !important; /* filled stage nodes */
    border-color: var(--record-mark, #7fada2) !important;
    box-shadow: 0 0 0 4px rgba(12, 17, 22, .75);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-detail dt {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .12em;
  }
  [dir="rtl"] body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-detail dt {
    letter-spacing: normal;
  }
}

@media (max-width: 760px) {
  /* 02 · ISOLATE THE QUESTION — expand-on-tap tiles. Number + headline only; tap to
     open the rest. Native <details>, so it works with no JS and closed by default. */
  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tiles {
    display: flex;
    flex-direction: column;
    gap: .7rem;
  }
  body[data-story-page="home"] .record-tile {
    border: 1px solid rgba(236, 190, 134, .28);
    border-radius: 14px;
    background: rgba(10, 14, 19, .42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
  }
  body[data-story-page="home"] .record-tile > summary {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1.05rem;
    cursor: pointer;
    list-style: none;
  }
  body[data-story-page="home"] .record-tile > summary::-webkit-details-marker { display: none; }
  .record-tile__n {
    font-family: "Instrument Serif", Newsreader, serif;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--record-mark, #7fada2);
  }
  .record-tile__label {
    flex: 1;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #f4efe4;
  }
  .record-tile__chev {
    width: 10px; height: 10px;
    border-right: 2px solid rgba(244, 239, 228, .6);
    border-bottom: 2px solid rgba(244, 239, 228, .6);
    transform: rotate(45deg);
    transition: transform .25s ease;
  }
  .record-tile[open] .record-tile__chev { transform: rotate(-135deg); }
  .record-tile__body {
    margin: 0;
    padding: 0 1.05rem 1.05rem calc(1.7rem + 1.95rem);
    color: rgba(244, 239, 228, .82);
    font-size: .95rem;
    line-height: 1.55;
  }
}

@media (max-width: 760px) {
  /* 03 · BUSINESS DECISIONS — a 2×2 decision matrix, not a vertical thread. The four
     forces (objective / authority / obligation / timing) sit as quadrants you read at
     a glance. Kills the shared authority-map thread + node dots for this scene. */
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-scene__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    padding-inline-start: 0;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-scene__details::before {
    content: none;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail {
    display: block;
    position: relative;
    padding: .85rem .9rem;
    border-top: 2px solid var(--record-mark, #7fada2);
    background: linear-gradient(rgba(10, 14, 19, .5), rgba(10, 14, 19, .34));
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail::before {
    content: "" !important;
    position: static !important;
    width: auto !important; height: auto !important;
    margin: 0 !important; border: 0 !important; box-shadow: none !important;
    background: none !important;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail dt {
    display: block;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--record-mark, #7fada2);
  }
  [dir="rtl"] body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail dt { letter-spacing: normal; }
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail dd {
    display: block;
    margin-top: .4rem;
    font-size: .84rem;
    line-height: 1.45;
    color: rgba(244, 239, 228, .86);
  }
}

@media (max-width: 760px) {
  /* 01 · ESTABLISH THE RECORD — a case-sheet being filled in: each field is a labelled
     line with the entry written on it, like an intake form. Not a numbered list. */
  body[data-story-page="home"] .record-scene[data-scene-id="counsel-table"] .record-detail::before {
    content: none !important;
    display: none !important;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="counsel-table"] .record-detail {
    display: block;
    border: 0;
    border-bottom: 1px solid rgba(244, 239, 228, .26);
    padding-block: .85rem;
    grid-template-columns: none;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="counsel-table"] .record-detail dt {
    display: block;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--record-mark, #7fada2);
  }
  [dir="rtl"] body[data-story-page="home"] .record-scene[data-scene-id="counsel-table"] .record-detail dt { letter-spacing: normal; }
  body[data-story-page="home"] .record-scene[data-scene-id="counsel-table"] .record-detail dd {
    display: block;
    margin-top: .3rem;
    font-family: "Instrument Serif", Newsreader, Georgia, serif;
    font-size: 1.45rem;
    line-height: 1.2;
    color: #f4efe4;
  }
}

/* ============================================================================
   MOBILE HOME ENDING — three different outputs, not three differently styled lists.
   07 is a linked knowledge constellation; 08 is a two-door enquiry gateway; the
   page then closes with a route compass followed by the real site footer.
   ========================================================================== */
.thinking-map,
.enquiry-gateway,
.enquiry-ready,
.enquiry-trust,
.enquiry-primary,
.enquiry-process,
.record-scene__title-mobile,
.record-scene__body-mobile,
.home-footer-compass {
  display: none;
}

@media (max-width: 760px) {
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"]:not(.record-scene--hero),
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"]:not(.record-scene--hero) {
    min-height: 100svh;
    padding: 7rem 20px 4.5rem;
    align-items: stretch;
    overflow: hidden;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"]:not(.record-scene--hero) .record-scene__content,
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"]:not(.record-scene--hero) .record-scene__content {
    min-height: 0;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"] .record-scene__details--desktop,
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__details--desktop,
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"] .record-action,
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-action,
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"] .record-scene__heading > p:has(> .button),
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__heading > p:has(> .button) {
    display: none;
  }

  /* 07 · LEGAL THINKING — a spatial map of four real library destinations. */
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"]:not(.record-scene--hero) {
    background: #030711;
    color: #f4efe4;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"]:not(.record-scene--hero) .record-scene__plate::after {
    background:
      linear-gradient(to bottom, rgba(3, 7, 17, .86) 0%, rgba(3, 7, 17, .34) 27%, rgba(3, 7, 17, .14) 58%, rgba(3, 7, 17, .72) 100%),
      radial-gradient(circle at 50% 50%, rgba(127, 173, 162, .04), rgba(3, 7, 17, .3) 72%);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"] .record-scene__heading h2,
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"] .record-scene__lead {
    color: #f4efe4;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .72);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"] .record-scene__heading h2 {
    max-width: 10ch;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"] .record-scene__lead {
    max-width: 35ch;
    color: rgba(244, 239, 228, .78);
  }
  .thinking-map {
    position: relative;
    display: block;
    width: 100%;
    align-self: stretch;
    min-height: 590px;
    margin: 0;
    isolation: isolate;
  }
  .thinking-map__routes {
    position: absolute;
    inset: 4% 2%;
    width: 96%;
    height: 92%;
    overflow: visible;
    fill: none;
    stroke: rgba(244, 239, 228, .32);
    stroke-width: .45;
    stroke-dasharray: 1.4 2.2;
    vector-effect: non-scaling-stroke;
  }
  .thinking-map__routes circle {
    fill: rgba(3, 7, 17, .9);
    stroke: #7fada2;
    stroke-width: .8;
  }
  .thinking-node {
    position: absolute;
    z-index: 2;
    width: 43%;
    min-height: 122px;
    padding-block: .75rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: .3rem .55rem;
    align-content: start;
    color: #f4efe4;
    border-block-start: 1px solid rgba(127, 173, 162, .78);
    text-decoration: none;
  }
  .thinking-node--1 { inset-block-start: 3%; inset-inline-start: 0; }
  .thinking-node--2 { inset-block-start: 3%; inset-inline-end: 0; }
  .thinking-node--3 { inset-block-end: 3%; inset-inline-start: 0; }
  .thinking-node--4 { inset-block-end: 3%; inset-inline-end: 0; }
  .thinking-node__index {
    grid-column: 1;
    grid-row: 1;
    color: #7fada2;
    font: 400 1.75rem/1 "Instrument Serif", Newsreader, serif;
  }
  .thinking-node__label {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    color: #f4efe4;
    font: 700 .72rem/1.35 Manrope, system-ui, sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .thinking-node__question {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    color: rgba(244, 239, 228, .72);
    font: 500 .82rem/1.45 Manrope, system-ui, sans-serif;
    overflow-wrap: anywhere;
  }
  .thinking-map__core {
    position: absolute;
    z-index: 3;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 128px;
    height: 128px;
    transform: translate(-50%, -50%);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .25rem;
    padding: 1rem;
    border: 1px solid #7fada2;
    border-radius: 50%;
    color: #f4efe4;
    background: rgba(3, 7, 17, .82);
    box-shadow: 0 0 0 10px rgba(3, 7, 17, .38), 0 20px 42px rgba(0, 0, 0, .35);
    font: 700 .78rem/1.35 Manrope, system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
    backdrop-filter: blur(8px);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="legal-thinking"] .thinking-map__core {
    color: #f4efe4;
  }
  [dir="rtl"] .thinking-map__core { transform: translate(50%, -50%); }
  [dir="rtl"] .thinking-node__label {
    font-family: "Noto Sans Arabic", Manrope, sans-serif;
    font-size: .82rem;
    letter-spacing: 0;
    text-transform: none;
  }
  [dir="rtl"] .thinking-node__question,
  [dir="rtl"] .thinking-map__core {
    font-family: "Noto Sans Arabic", Manrope, sans-serif;
  }

  /* 08 · INITIAL ENQUIRY — image-led intake panel from the approved reference:
     concise copy, a real route fork, one dominant form action, then three next steps. */
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"]:not(.record-scene--hero) {
    min-height: auto;
    padding-bottom: 5.5rem;
    background: #02070c;
    color: #f4efe4;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__content {
    gap: 1.6rem;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__plate img {
    object-position: 62% 50%;
    filter: saturate(.86) contrast(1.05);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"]:not(.record-scene--hero) .record-scene__plate::after {
    background:
      linear-gradient(90deg, rgba(2, 7, 12, .98) 0%, rgba(2, 7, 12, .92) 43%, rgba(2, 7, 12, .46) 72%, rgba(2, 7, 12, .22) 100%),
      linear-gradient(180deg, rgba(2, 7, 12, .42), rgba(2, 7, 12, .12) 46%, rgba(2, 7, 12, .92) 100%);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__heading {
    width: min(100%, 42rem);
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__title-desktop,
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__body-desktop {
    display: none;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__title-mobile {
    display: grid;
    gap: .05em;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__body-mobile {
    display: inline;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__heading h2 {
    max-width: 9ch;
    color: #f4efe4;
    font-size: clamp(3.3rem, 10vw, 5.4rem);
    line-height: .94;
    letter-spacing: -.025em;
    text-shadow: 0 3px 30px rgba(0, 0, 0, .72);
    text-wrap: balance;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__title-mobile em {
    color: #7fada2;
    font-style: normal;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .record-scene__lead {
    max-width: 32ch;
    color: rgba(244, 239, 228, .78);
    font-size: clamp(.96rem, 2.4vw, 1.12rem);
    line-height: 1.7;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .82);
  }
  .enquiry-gateway {
    display: grid;
    width: min(100%, 42rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: .35rem;
    border-block: 1px solid rgba(127, 173, 162, .66);
    background: rgba(2, 7, 12, .5);
    backdrop-filter: blur(5px);
  }
  .enquiry-route {
    position: relative;
    min-height: 164px;
    padding: 1rem .9rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #f4efe4;
    text-decoration: none;
  }
  .enquiry-route + .enquiry-route { border-inline-start: 1px solid rgba(127, 173, 162, .42); }
  .enquiry-route__index {
    color: #7fada2;
    font: 400 1.7rem/1 "Instrument Serif", Newsreader, serif;
    font-variant-numeric: tabular-nums;
  }
  .enquiry-route strong {
    max-width: 10ch;
    margin-top: 1rem;
    color: #f4efe4;
    font: 400 clamp(1.35rem, 4vw, 1.75rem)/1.05 "Instrument Serif", Newsreader, serif;
  }
  .enquiry-route > span:not(.enquiry-route__index) {
    max-width: 22ch;
    margin-top: .55rem;
    color: rgba(244, 239, 228, .68);
    font: 500 .78rem/1.45 Manrope, system-ui, sans-serif;
  }
  .enquiry-ready {
    display: flex;
    width: min(100%, 42rem);
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: -.2rem 0 0;
    color: rgba(244, 239, 228, .7);
    font: 600 .72rem/1.35 Manrope, system-ui, sans-serif;
  }
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .enquiry-ready,
  body[data-story-page="home"] .record-scene[data-scene-id="initial-enquiry"] .enquiry-ready span {
    color: rgba(244, 239, 228, .7);
  }
  .enquiry-ready strong {
    color: #7fada2;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .enquiry-ready span {
    padding-inline-end: .5rem;
    border-inline-end: 1px solid rgba(244, 239, 228, .26);
  }
  .enquiry-ready span:last-child { border-inline-end: 0; }
  /* Bug 7. This was a two-column grid whose first column, 48px wide, held
     .enquiry-trust__icon. The icon went when the decorative icons went; the column
     stayed. So the one remaining child sat in a 48px slot and every line broke after
     two words, with two thirds of the row empty. One column, full width. */
  .enquiry-trust {
    display: grid;
    width: min(100%, 42rem);
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
    margin: .15rem 0 0;
    padding: .95rem 0;
    border-block: 1px solid rgba(244, 239, 228, .18);
    color: #f4efe4;
  }
  .enquiry-trust > span { display: grid; gap: .25rem; }
  .enquiry-trust strong {
    font: 700 .86rem/1.35 Manrope, system-ui, sans-serif;
  }
  .enquiry-trust small {
    color: rgba(244, 239, 228, .68);
    font: 500 .76rem/1.5 Manrope, system-ui, sans-serif;
  }
  .enquiry-primary {
    display: flex;
    width: min(100%, 42rem);
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .65rem .65rem 1.35rem;
    color: #02070c;
    border: 1px solid rgba(255, 201, 123, .72);
    border-radius: 20px;
    background: linear-gradient(110deg, #f3a43b, #ee8618);
    box-shadow: 0 18px 42px rgba(238, 134, 24, .18);
    font: 700 clamp(1.05rem, 3vw, 1.25rem)/1.2 Manrope, system-ui, sans-serif;
    text-decoration: none;
  }
  .enquiry-primary i {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #f4efe4;
    border-radius: 50%;
    background: #04101a;
    font: 400 1.45rem/1 Manrope, system-ui, sans-serif;
  }
  .enquiry-process {
    display: block;
    width: min(100%, 42rem);
    margin-top: 1.1rem;
  }
  .enquiry-process__label {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin: 0 0 .65rem;
    color: #7fada2;
    font: 700 .67rem/1 Manrope, system-ui, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .enquiry-process__label::before,
  .enquiry-process__label::after {
    content: "";
    height: 1px;
    background: rgba(127, 173, 162, .5);
  }
  .enquiry-process ol {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .enquiry-process li {
    color: #f4efe4;
    border: 1px solid rgba(244, 239, 228, .18);
    border-radius: 17px;
    background: rgba(4, 14, 24, .72);
  }
  .enquiry-step__index {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #7fada2;
    border: 1px solid rgba(127, 173, 162, .6);
    border-radius: 50%;
    font: 600 .72rem/1 Manrope, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
  }
  .enquiry-step__copy { display: grid; gap: .22rem; min-width: 0; }

  /* Bug 8. The steps were <li> elements wearing an arrow, which promised a click that
     did not exist. They are disclosures now: the summary keeps the number and the
     one-line version, and opening it gives the plain answer to "what actually
     happens". Native <details>, so it works with no JavaScript - the same pattern the
     legal-question tiles already use further up this page. */
  .enquiry-process li { padding: 0; }
  .enquiry-step { width: 100%; }
  .enquiry-step > summary {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: .85rem;
    align-items: center;
    min-height: 88px;
    padding: .8rem .9rem;
    cursor: pointer;
    list-style: none;
  }
  .enquiry-step > summary::-webkit-details-marker { display: none; }
  .enquiry-step__chev {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid rgba(244, 239, 228, .62);
    border-bottom: 1.5px solid rgba(244, 239, 228, .62);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .24s ease;
  }
  .enquiry-step[open] .enquiry-step__chev { transform: rotate(-135deg) translate(-2px, -2px); }
  .enquiry-step__more {
    margin: 0;
    padding: 0 .9rem 1rem calc(46px + 1.75rem);
    color: rgba(244, 239, 228, .8);
    font: 500 .82rem/1.6 Manrope, system-ui, sans-serif;
  }
  [dir="rtl"] .enquiry-step__more {
    padding: 0 calc(46px + 1.75rem) 1rem .9rem;
    font-family: "Noto Sans Arabic", Manrope, sans-serif;
  }
  [dir="rtl"] .enquiry-step__chev { transform: rotate(135deg) translate(-2px, -2px); }
  [dir="rtl"] .enquiry-step[open] .enquiry-step__chev { transform: rotate(-135deg) translate(-2px, -2px); }
  @media (prefers-reduced-motion: reduce) { .enquiry-step__chev { transition: none; } }

  .enquiry-step__copy strong {
    color: #f4efe4;
    font: 700 .9rem/1.3 Manrope, system-ui, sans-serif;
  }
  .enquiry-step__copy small {
    color: rgba(244, 239, 228, .65);
    font: 500 .75rem/1.45 Manrope, system-ui, sans-serif;
  }
  [dir="rtl"] .enquiry-route strong {
    font-family: "Noto Naskh Arabic", serif;
    font-size: clamp(1.55rem, 4.4vw, 1.95rem);
    line-height: 1.2;
  }
  [dir="rtl"] .enquiry-route > span:not(.enquiry-route__index),
  [dir="rtl"] .enquiry-ready,
  [dir="rtl"] .enquiry-trust strong,
  [dir="rtl"] .enquiry-trust small,
  [dir="rtl"] .enquiry-primary,
  [dir="rtl"] .enquiry-process__label,
  [dir="rtl"] .enquiry-step__copy strong,
  [dir="rtl"] .enquiry-step__copy small {
    font-family: "Noto Sans Arabic", Manrope, sans-serif;
  }
  [dir="rtl"] .enquiry-ready strong,
  [dir="rtl"] .enquiry-process__label { letter-spacing: 0; text-transform: none; }
  [dir="rtl"] .enquiry-primary { padding: .65rem 1.35rem .65rem .65rem; }
  [dir="rtl"] .enquiry-primary i { transform: scaleX(-1); }

  /* END · ROUTE COMPASS — a compact pre-footer navigator, not the footer itself. */
  body[data-story-page="home"] .home-footer-compass {
    position: relative;
    z-index: 1;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 5.25rem 20px 4rem;
    justify-items: center;
    text-align: center;
    overflow: hidden;
    border-block: 1px solid rgba(127, 173, 162, .42);
    background:
      radial-gradient(circle at 50% 70%, rgba(127, 173, 162, .11), transparent 37%),
      linear-gradient(180deg, #030a11, #02070c);
  }
  body[data-story-page="home"] .site-footer {
    min-height: auto;
    padding: 4.5rem 20px max(2.5rem, env(safe-area-inset-bottom));
    align-content: start;
    overflow: visible;
    background: #020609;
    border-top: 0;
  }
  .home-footer-compass__kicker {
    margin: 0 0 .8rem;
    color: #7fada2;
    font: 700 .7rem/1 Manrope, system-ui, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .home-footer-compass h2 {
    max-width: 9ch;
    margin: 0;
    color: #f4efe4;
    font: 400 clamp(2.4rem, 9vw, 3.35rem)/1 "Instrument Serif", Newsreader, serif;
    text-wrap: balance;
  }
  .home-footer-compass__lead {
    margin: .9rem 0 0;
    color: rgba(244, 239, 228, .64);
    font: 500 .85rem/1.5 Manrope, system-ui, sans-serif;
  }
  .home-footer-orbit {
    position: relative;
    width: min(76vw, 286px);
    aspect-ratio: 1;
    margin: 2.25rem auto 1rem;
  }
  .home-footer-orbit__ring {
    position: absolute;
    inset: 11%;
    border: 1px solid rgba(127, 173, 162, .58);
    border-radius: 50%;
  }
  .home-footer-orbit__ring::before,
  .home-footer-orbit__ring::after {
    content: "";
    position: absolute;
    background: rgba(127, 173, 162, .36);
  }
  .home-footer-orbit__ring::before { inset: 50% -14%; height: 1px; }
  .home-footer-orbit__ring::after { inset: -14% 50%; width: 1px; }
  .home-footer-orbit__link {
    position: absolute;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: .15rem;
    min-width: 68px;
    color: #f4efe4;
    text-decoration: none;
  }
  .home-footer-orbit__link small {
    color: #7fada2;
    font: 600 .62rem/1 Manrope, system-ui, sans-serif;
  }
  .home-footer-orbit__link strong {
    font: 600 .82rem/1.2 Manrope, system-ui, sans-serif;
  }
  .home-footer-orbit__link--north { inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); }
  .home-footer-orbit__link--east { inset-block-start: 50%; inset-inline-end: -5px; transform: translateY(-50%); }
  .home-footer-orbit__link--south { inset-block-end: 0; inset-inline-start: 50%; transform: translateX(-50%); }
  .home-footer-orbit__link--west { inset-block-start: 50%; inset-inline-start: -5px; transform: translateY(-50%); }
  [dir="rtl"] .home-footer-orbit__link--north,
  [dir="rtl"] .home-footer-orbit__link--south { transform: translateX(50%); }
  .home-footer-orbit__core {
    position: absolute;
    z-index: 3;
    inset: 50% auto auto 50%;
    width: 88px;
    height: 88px;
    transform: translate(-50%, -50%);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .15rem;
    border-radius: 50%;
    color: #f4efe4;
    background: #07131b;
    box-shadow: 0 0 0 1px rgba(244, 239, 228, .2), 0 0 0 10px rgba(7, 19, 27, .72);
    text-decoration: none;
  }
  .home-footer-orbit__core img { width: 36px; height: 28px; object-fit: contain; }
  .home-footer-orbit__core span { font: 600 .8rem/1 "Instrument Serif", Newsreader, serif; letter-spacing: .12em; }
  [dir="rtl"] .home-footer-compass__kicker,
  [dir="rtl"] .home-footer-compass__lead,
  [dir="rtl"] .home-footer-orbit__link strong {
    font-family: "Noto Sans Arabic", Manrope, sans-serif;
    letter-spacing: 0;
    text-transform: none;
  }
  [dir="rtl"] .home-footer-compass h2 {
    font-family: "Noto Naskh Arabic", serif;
    line-height: 1.2;
  }

  body.home-ending-active haq-contact-dock {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  body[data-story-page="home"] haq-contact-dock { transition: opacity .28s ease; }
  .thinking-node,
  .enquiry-route,
  .home-footer-orbit__link { transition: color .2s ease, border-color .2s ease, transform .2s ease; }
  .thinking-node:focus-visible,
  .enquiry-route:focus-visible,
  .home-footer-orbit__link:focus-visible { outline: 2px solid #ee8618; outline-offset: 4px; }
}

/* ========================================================================
   HOME CHAPTER REDESIGN 2026
   Chapters 01–06 are now compact editorial spreads. The previous 172svh
   photo chapters and frosted/card treatments made the page feel like a
   sequence of unrelated ads. Images and outputs now occupy separate planes.
   Chapters 07–08 keep their purpose-built map and enquiry-gateway designs.
   ======================================================================== */

body[data-story-page="home"] {
  --home-chapter-gutter: clamp(24px, 5vw, 78px);
  background: #03090d;
}

body[data-story-page="home"].record-static-ready .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) {
  min-height: 0;
}

@media (min-width: 761px) {
  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) {
    min-height: clamp(680px, 84svh, 900px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
    padding: 0;
    overflow: clip;
    background: #07131b;
    border-top: 1px solid rgba(241,234,220,.08);
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__plate {
    position: relative;
    inset: auto;
    grid-column: 1 / 7;
    grid-row: 1;
    min-height: 100%;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__plate::after {
    background: linear-gradient(90deg, transparent 62%, #07131b 100%);
  }

  body[data-story-page="home"] .record-story > .record-scene:nth-child(even):not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__plate {
    grid-column: 7 / 13;
  }

  body[data-story-page="home"] .record-story > .record-scene:nth-child(even):not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__plate::after {
    background: linear-gradient(270deg, transparent 62%, #07131b 100%);
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__content,
  body[data-story-page="home"].record-static-ready .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__content {
    position: relative;
    inset: auto;
    grid-column: 7 / 13;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: clamp(4rem, 6vw, 7.5rem) var(--home-chapter-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: #07131b;
  }

  body[data-story-page="home"] .record-story > .record-scene:nth-child(even):not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__content,
  body[data-story-page="home"].record-static-ready .record-story > .record-scene:nth-child(even):not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__content {
    grid-column: 1 / 7;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__heading,
  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__details,
  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-tiles {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #f1eadc;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__heading h2 {
    max-width: 12ch;
    color: #f1eadc;
    font: 400 clamp(3rem, 4.4vw, 5.5rem)/.96 "Instrument Serif", Newsreader, Georgia, serif;
    letter-spacing: -.025em;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__lead {
    max-width: 49ch;
    margin-top: 1.25rem;
    color: rgba(241,234,220,.7);
    font-size: 1rem;
    line-height: 1.65;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__details,
  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-tiles {
    margin-top: clamp(1.75rem, 3vw, 3rem);
    border-top: 1px solid rgba(241,234,220,.22);
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-detail {
    border-color: rgba(241,234,220,.16);
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-detail dd {
    color: rgba(241,234,220,.72);
  }

  body[data-story-page="home"] .record-story > .record-scene[data-scene-id="legal-question"] > .record-scene__content {
    color: #102534;
    background: #f1eadc;
  }

  body[data-story-page="home"] .record-story > .record-scene[data-scene-id="legal-question"] > .record-scene__plate::after {
    background: linear-gradient(270deg, transparent 62%, #f1eadc 100%);
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-scene__heading h2 {
    color: #102534;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-scene__lead {
    color: #585248;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-color: rgba(16,37,52,.25);
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile {
    margin: 0;
    color: #102534;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(16,37,52,.2);
    border-inline-end: 1px solid rgba(16,37,52,.2);
    border-radius: 0;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile > summary {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: .75rem;
    padding: 1rem;
    color: #102534;
    cursor: pointer;
    list-style: none;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile__label {
    color: #102534;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile__body {
    padding: 0 1rem 1rem 2.75rem;
    color: #5b554c;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-scene__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(241,234,220,.24);
  }

  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail {
    display: block;
    padding: 1rem;
    border: 0;
    border-bottom: 1px solid rgba(241,234,220,.15);
    border-inline-end: 1px solid rgba(241,234,220,.15);
    background: transparent;
  }

  /* The base authority-map design is a chain: a vertical rule with a dot beside each
     link. On desktop this scene is a 2x2 decision matrix instead, so the chain has
     nothing to connect - and the dot was not merely redundant, it was broken. Its
     parent is display:block here, so the ::before never became a grid item, stayed an
     inline box, and width and height do not apply to an inline box. An 11px dot laid
     itself out at line-height and rendered as a tall cream ellipse ringed in green,
     on a navy panel, wearing the ink of the cream panels it was designed for.
     Mobile already switched it off. Desktop should have too. */
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-scene__details::before,
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail::before,
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-scene__details > div::before {
    content: none;
    display: none;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-scene__details {
    position: relative;
    border-top: 0;
    padding-inline-start: 2rem;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-scene__details::before {
    content: "";
    position: absolute;
    inset-block: 1.25rem;
    inset-inline-start: 8px;
    width: 1px;
    background: linear-gradient(#7fada2, rgba(127, 173, 162,.12));
  }

  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-detail {
    grid-template-columns: minmax(120px,.32fr) minmax(0,1fr);
    padding: .85rem 0;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-detail::before {
    content: "";
    position: absolute;
    inset-inline-start: -2rem;
    width: 11px;
    height: 11px;
    margin-top: .2rem;
    background: #7fada2;
    border-radius: 50%;
  }
}

@media (max-width: 760px) {
  body[data-story-page="home"] {
    --home-chapter-gutter: 20px;
  }

  body[data-story-page="home"].record-static-ready .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]),
  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: clip;
    background: #07131b;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__plate {
    position: relative;
    inset: auto;
    order: 0;
    width: 100%;
    height: clamp(290px, 43svh, 390px);
    min-height: 0;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__plate::after {
    background: linear-gradient(0deg, #07131b, transparent 52%);
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__content,
  body[data-story-page="home"].record-static-ready .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) > .record-scene__content {
    position: relative;
    inset: auto;
    top: auto;
    order: 1;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 2.4rem var(--home-chapter-gutter) 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: #07131b;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__heading,
  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__details,
  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-tiles {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__heading h2 {
    max-width: 13ch;
    color: #f1eadc;
    font: 400 clamp(2.65rem, 12vw, 4rem)/.98 "Instrument Serif", Newsreader, Georgia, serif;
    letter-spacing: -.02em;
    text-shadow: none;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__lead {
    margin-top: 1rem;
    color: rgba(241,234,220,.72);
    font-size: 1rem;
    line-height: 1.62;
    text-shadow: none;
  }

  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-scene__details,
  body[data-story-page="home"] .record-story > .record-scene:not(.record-scene--hero):not([data-scene-id="legal-thinking"]):not([data-scene-id="initial-enquiry"]) .record-tiles {
    margin-top: 1.75rem;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] > .record-scene__content {
    color: #102534;
    background: #f1eadc;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] > .record-scene__plate::after {
    background: linear-gradient(0deg, #f1eadc, transparent 52%);
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-scene__heading h2,
  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile__label {
    color: #102534;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-scene__lead {
    color: #5d574e;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tiles {
    border-top: 1px solid rgba(16,37,52,.28);
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile {
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(16,37,52,.22);
    border-radius: 0;
    backdrop-filter: none;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile > summary {
    padding: 1rem 0;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile__body {
    padding: 0 0 1rem 2.6rem;
    color: #5d574e;
  }

  [dir="rtl"] body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile__body {
    padding: 0 2.6rem 1rem 0;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-scene__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(241,234,220,.22);
  }

  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-scene__details::before,
  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail::before {
    display: none !important;
    content: none !important;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="business-door"] .record-detail {
    display: block;
    padding: 1rem .75rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(241,234,220,.15) !important;
    border-inline-end: 1px solid rgba(241,234,220,.15) !important;
    backdrop-filter: none;
  }

  body[data-story-page="home"] .record-scene[data-scene-id="private-door"] .record-scene__plate::after {
    background: linear-gradient(0deg, #07131b, transparent 52%);
  }

  body[data-story-page="home"] .record-scene[data-scene-id="discipline"] .record-detail dt {
    text-shadow: none;
  }

  body[data-story-page="home"] .record-scene[data-content-mode="profile"] > .record-scene__plate {
    height: clamp(440px, 64svh, 590px);
  }

  body[data-story-page="home"] .record-scene[data-content-mode="profile"] > .record-scene__content,
  body[data-story-page="home"].record-static-ready .record-scene[data-content-mode="profile"] > .record-scene__content {
    min-height: 0;
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   The legal-question tiles: ink follows the paint

   This scene was written for a cream panel - two separate rules still set
   background #f1eadc on it - but a later rule paints .record-scene__content
   navy and wins, while the dark ink written for the cream version stays. The
   result was measured on rendered pixels, not computed styles:

     .record-tile__label  "Known facts"   1.10:1 desktop, 1.11:1 phone
     .record-tile__body                   1.01:1 desktop, 1.03:1 phone
     .enquiry-trust strong                2.25:1 phone

   1.01:1 is not "low contrast". It is text that is present in the DOM, indexed
   by a crawler, read aloud by a screen reader, and invisible to a person - on
   the home page, at every width, in both languages. The same defect as the
   enquiry form and the cream inner panels: ink and paint set by different rules,
   and one of them lost.

   Stated last and scoped to the scene so it cannot lose again. If this panel is
   ever genuinely repainted cream, these four lines are what has to change with it.
   --------------------------------------------------------------------------- */
body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile > summary,
body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile__label,
body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-scene__heading h2 {
  color: #f4efe4;
}

body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile__body,
body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-scene__lead {
  color: rgba(244, 239, 228, .78);
}

body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tiles,
body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile {
  border-color: rgba(244, 239, 228, .22);
}

body[data-story-page="home"] .record-scene[data-scene-id="legal-question"] .record-tile__chev {
  border-right-color: rgba(244, 239, 228, .6);
  border-bottom-color: rgba(244, 239, 228, .6);
}

/* Same scene family, same cause: no colour of its own, so it inherited ink meant
   for a panel that is not there. */
body[data-story-page="home"] .enquiry-trust strong {
  color: #f4efe4;
}

/* ---------------------------------------------------------------------------
   Bug 9 — the compass ring ran straight through its own labels

   The ring is a 1px circle with two crosshair rules across it, and the four
   labels sit on top at 12 and 6 and 3 and 9 o'clock. Nothing broke the line
   behind them, so "01" and "03" were bisected by the circle and "Prepare" and
   "Begin" had a rule running through the words.

   Each label now carries the page ground behind it, so the ring and the
   crosshairs stop cleanly at the text the way a dimension line stops at its
   number. The ground colour is the one the home page actually paints.
   --------------------------------------------------------------------------- */
body[data-story-page="home"] .home-footer-orbit__link {
  padding: .3rem .55rem;
  background: #03090d;
  border-radius: 2px;
}

body[data-story-page="home"] .home-footer-orbit__link small {
  padding-bottom: .1rem;
  font-variant-numeric: tabular-nums;
}

/* The core already sits on its own disc; without this the new label grounds
   would read as four chips and the middle as a hole. */
body[data-story-page="home"] .home-footer-orbit__core {
  background: #03090d;
}