/* ═══════════════════════════════════════════════════════════════
   THE SAME ROOM — J2 visual system
   Shared across all six concept pages, deliberately: one world, one
   set of materials, six different experiences inside it.

   Refined from J (v3-round4-media-prototype/J-the-same-room/) against
   Danielle's 2026-08-23 review. Approved architecture unchanged.

   The three materials:
     1. filmed reality        — real footage/photography, always the ground
     2. the lens              — a soft-edged optical defocus, never a box
     3. glass                 — CLEO's interface, an object in the room
   The one constant across warm and cool light: the brass mark.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#171310;
  --ivory:#F4EFE7;
  --paper:#FBF8F3;
  --brass:#C08F3C;
  --brass-hi:#F0DCA6;

  --cool-line:rgba(126,152,186,.55);
  --rule:rgba(244,239,231,.22);

  --f-display:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --f-ui:'Inter','Helvetica Neue',Arial,sans-serif;
  --f-voice:'Newsreader',Georgia,'Times New Roman',serif;
  --f-meta:'JetBrains Mono','SF Mono',Menlo,monospace;

  --gutter:clamp(24px,5vw,88px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--ivory);
  font-family:var(--f-ui);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--paper);color:var(--ink);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ── Slate: the recurring precise label ─────────────────────── */
.slate{font-family:var(--f-meta);font-size:13px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em}
.slate::before{content:"";width:16px;height:1px;background:currentColor;opacity:.7}

/* ── CLEO's mark ────────────────────────────────────────────── */
.mark{width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, #100D0A 0 54%, transparent 55%),
    conic-gradient(from 200deg,#7A5A22,#F0DCA6 18%,#B98C36 34%,#FFF0C9 52%,#9A742C 70%,#E5CC93 86%,#7A5A22);
  box-shadow:0 1px 6px rgba(0,0,0,.45)}
.mark--sm{width:18px;height:18px;
  background:
    radial-gradient(circle at 50% 50%, #100D0A 0 36%, transparent 37%),
    conic-gradient(from 200deg,#8A6626,#F6E4B4 18%,#C1922F 34%,#FFF4D2 52%,#A87F2E 70%,#EDD69B 86%,#8A6626)}
.mark--lg{width:34px;height:34px}

/* ── Nav ────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  gap:clamp(18px,3vw,40px);padding:22px var(--gutter);color:var(--ivory);
  transition:color .5s ease}
.nav__brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);
  font-weight:600;letter-spacing:.02em;font-size:17px;text-decoration:none}
.nav__links{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;font-size:15.5px;opacity:.94}
.nav__links a{text-decoration:none;padding-bottom:2px}
.nav__links a:hover{color:var(--brass-hi)}
.nav__links a[aria-current="page"]{border-bottom:1px solid currentColor}
.nav__cta{font-size:15px;font-weight:500;text-decoration:none;border:1px solid currentColor;
  border-radius:999px;padding:9px 18px;transition:background-color .3s ease,color .3s ease}
.nav__cta:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.nav[data-mark="absent"] .mark{opacity:0;transition:opacity .6s ease}
.nav[data-tone="light"]{color:var(--ink)}
.nav[data-tone="light"] .nav__links a:hover{color:#8A6A25}

/* ── Scene scaffolding ──────────────────────────────────────── */
.scene{position:relative;min-height:100vh;display:flex;overflow:hidden}
.scene--auto{min-height:0}

/* ── A scene that PINS its stage ──────────────────────────────
   `overflow:hidden` on an ancestor silently turns `position:sticky`
   into `position:relative` for everything inside it — the ancestor
   becomes the sticky element's scroll container, and it never scrolls.
   `.scene` sets `overflow:hidden` for every scene, so a scene that
   wants to pin has to opt out of it, and clip at the media layer
   instead (the media is the only thing that actually overflows,
   because the crossing scales it).

   Without this the intelligence section did not pin at all: its stage
   and its room both scrolled away, leaving roughly 1,700px of empty
   ink-coloured section before the founder — the visible break right
   after "the part that isn't a spectacle". */
.scene--pins{overflow:visible}
.scene--pins .scene__media--pinned{
  position:sticky;top:0;height:100vh;overflow:hidden;
  /* pinned, but contributing no flow space — otherwise it pushes the
     stage a full viewport down the section */
  margin-bottom:-100vh}
.scene__media{position:absolute;inset:0;z-index:0}
.scene__media img,.scene__media video{width:100%;height:100%;object-fit:cover}
/* A clip's own first frame is not a design decision — several of these open on
   a rack-focus. The art-directed still is a real <img> layer underneath, and
   the film only fades in once it is genuinely playing, so no visitor (and no
   screenshot) ever sees an arbitrary decode frame. Found by rendering. */
.scene__media .media-still{position:absolute;inset:0;z-index:0}
.scene__media .media-film{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .8s ease}
.scene__media .media-film.is-playing{opacity:1}
.scene__body{position:relative;z-index:3;width:100%;display:flex;padding:0 var(--gutter)}

/* Scrims — graded light, never a flat wash */
.scrim-b::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(12,9,7,.84) 0%,rgba(12,9,7,.4) 30%,rgba(12,9,7,.02) 58%,rgba(12,9,7,.26) 100%)}
.scrim-l::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(96deg,rgba(14,10,7,.72) 0%,rgba(16,11,8,.34) 32%,rgba(16,11,8,0) 60%,rgba(16,11,8,.12) 100%),
    linear-gradient(to top,rgba(14,10,7,.5) 0%,rgba(14,10,7,0) 44%)}
.scrim-soft::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,9,7,.28)}

/* ── THE LENS ────────────────────────────────────────────────
   Review point 1: readability over moving media, solved as light rather
   than as an opaque rectangle. Each lens is a *composed light fall* — a
   soft elliptical grade seated exactly where the text lands, shaped like
   a lamp falling off across the frame, so the photograph keeps its own
   focus and colour everywhere else.

   This is the second implementation. The first was a real masked defocus
   (a pre-blurred copy of the same media, clipped with `mask-image`). It
   is the better idea and it computes correctly — but it does not clip
   reliably when rendered: the blur escaped the mask and flattened the
   whole frame, verified by cropping the identical region out of a J and
   a J2 capture and comparing them. Recorded here rather than quietly
   dropped, because it is worth re-attempting in a real build where the
   render path can be tested properly.

   Alpha compositing has no such problem, costs nothing per frame, and
   needs no narrow-viewport exception — so mobile keeps the same
   technique, only bottom-weighted for a phone's text zone.          */
.lens{position:absolute;inset:0;z-index:2;pointer-events:none}
.lens--bl{background:
  radial-gradient(78% 68% at 10% 86%, rgba(10,7,5,.93) 0%, rgba(10,7,5,.78) 30%, rgba(10,7,5,.44) 56%, rgba(10,7,5,.12) 78%, rgba(10,7,5,0) 94%),
  linear-gradient(to top, rgba(10,7,5,.42) 0%, rgba(10,7,5,0) 34%)}
.lens--c{background:
  radial-gradient(56% 46% at 50% 52%, rgba(10,7,5,.80) 0%, rgba(10,7,5,.54) 40%, rgba(10,7,5,.16) 72%, rgba(10,7,5,0) 92%)}
.lens--l{background:
  radial-gradient(66% 70% at 10% 82%, rgba(10,7,5,.88) 0%, rgba(10,7,5,.62) 40%, rgba(10,7,5,.2) 70%, rgba(10,7,5,0) 90%),
  linear-gradient(to top, rgba(10,7,5,.38) 0%, rgba(10,7,5,0) 40%)}
.lens--r{background:
  radial-gradient(62% 78% at 92% 50%, rgba(10,7,5,.86) 0%, rgba(10,7,5,.58) 38%, rgba(10,7,5,.18) 70%, rgba(10,7,5,0) 92%)}

/* Hairline inset frame — the seed of CLEO's layer */
.frameline{position:absolute;z-index:4;inset:18px;border:1px solid var(--rule);pointer-events:none}
.frameline::before,.frameline::after{content:"";position:absolute;width:9px;height:9px;border:1px solid rgba(240,220,166,.5)}
.frameline::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.frameline::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ── Typography ─────────────────────────────────────────────── */
.h-title{font-family:var(--f-display);font-weight:500;font-size:clamp(30px,3.6vw,54px);
  line-height:1.08;letter-spacing:-.022em;margin:0;max-width:15ch}
.h-sec{font-family:var(--f-display);font-weight:500;font-size:clamp(26px,2.9vw,42px);
  line-height:1.12;letter-spacing:-.02em;margin:0;max-width:19ch}
.h-sm{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,1.9vw,26px);
  line-height:1.2;letter-spacing:-.015em;margin:0}
.lede{font-size:clamp(15.5px,1.15vw,18px);line-height:1.6;max-width:46ch;
  color:rgba(244,239,231,.86);margin:14px 0 0}
.meta{font-family:var(--f-meta);font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(244,239,231,.86)}
.voice{font-family:var(--f-voice);font-style:italic;font-weight:300;letter-spacing:-.005em}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-ui);font-size:15.5px;
  font-weight:500;text-decoration:none;padding:13px 24px;border-radius:999px;
  background:var(--ivory);color:var(--ink);border:1px solid var(--ivory);
  transition:transform .25s ease}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ivory);border-color:rgba(244,239,231,.55)}
.btn--ghost:hover{border-color:var(--ivory)}
.btn--ink{background:var(--ink);color:var(--ivory);border-color:var(--ink)}

/* ── Glass: CLEO's interface as an object in the room ───────── */
.pane{position:relative;border-radius:6px;overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.28),0 26px 60px -12px rgba(0,0,0,.62),0 60px 130px -30px rgba(0,0,0,.7);
  outline:1px solid rgba(255,255,255,.18);outline-offset:-1px}
.pane img,.pane iframe{display:block;width:100%;border:0}
.pane::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(114deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 13%,
    rgba(255,255,255,0) 30%,rgba(255,255,255,0) 78%,rgba(255,244,214,.10) 92%,rgba(255,255,255,.22) 100%)}
.pane--tilt{transform:rotateY(-13deg) rotateX(2.5deg)}
.pane--crop{aspect-ratio:16/10}
.pane--crop img{height:100%;object-fit:cover;object-position:top center}

/* ── The message object ─────────────────────────────────────── */
.msg{width:min(560px,100%);background:var(--paper);color:var(--ink);border-radius:5px;
  padding:24px 26px 22px;position:relative;
  box-shadow:0 2px 3px rgba(0,0,0,.3),0 26px 44px -14px rgba(0,0,0,.55),0 60px 120px -30px rgba(0,0,0,.75)}
.msg__meta{font-family:var(--f-meta);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8A7B68;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.msg__body{font-family:var(--f-display);font-weight:500;font-size:clamp(21px,2.1vw,30px);
  line-height:1.2;letter-spacing:-.018em;margin:12px 0 0}
.msg__from{margin-top:12px;font-size:15px;color:#5F5446}
.msg__tag{display:inline-block;font-family:var(--f-meta);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border:1px solid #D7C9AF;border-radius:3px;color:#8A7B68}
.msg--echo{width:min(430px,100%);padding:14px 17px;opacity:.62;transform:scale(.965);
  box-shadow:0 1px 2px rgba(0,0,0,.22),0 14px 30px -12px rgba(0,0,0,.5)}
.msg--echo .msg__body{font-size:clamp(16px,1.4vw,19px);margin-top:8px}

/* ── The crossing ───────────────────────────────────────────── */
.crossing{--p:0}
.crossing .scene__media video,.crossing .scene__media img{
  filter:blur(calc(var(--p) * 12px)) saturate(calc(1 - var(--p) * .42))
    brightness(calc(1 + var(--p) * .5)) contrast(calc(1 + var(--p) * .04))
    hue-rotate(calc(var(--p) * -12deg));
  transform:scale(calc(1 + var(--p) * .07));
  transition:filter .45s linear,transform .45s linear}
.crossing::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(105% 82% at 46% 44%,rgba(58,92,142,.06) 0%,rgba(16,30,56,.62) 100%),
    linear-gradient(180deg,rgba(38,66,110,.24),rgba(12,22,42,.34));
  opacity:var(--p);transition:opacity .45s linear}

/* ── Portal: ordinary software, on purpose ──────────────────── */
.portal{width:min(860px,100%);background:#F7F8FA;color:#1B2430;border-radius:5px;overflow:hidden;
  box-shadow:0 2px 3px rgba(0,0,0,.2),0 34px 80px -20px rgba(0,0,0,.62);font-family:var(--f-ui)}
.portal__bar{display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-bottom:1px solid #E2E7EE;font-size:14.5px;color:#5A6675}
.portal__bar strong{color:#1B2430;font-weight:600}
.portal__row{display:flex;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid #EDF0F4;font-size:15.5px}
.portal__row:last-child{border-bottom:0}
.portal__row .when{font-family:var(--f-meta);font-size:12.5px;color:#6E7C8D;min-width:80px}
.portal__row .who{color:#5A6675;min-width:120px}
.portal__row.is-new{background:#fff;font-weight:500}
.portal__row .badge{margin-left:auto;font-family:var(--f-meta);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#8391A2}
.portal__note{padding:12px 18px;font-size:14px;color:#7C8899;background:#F1F3F7}

/* ── The intelligence layer ─────────────────────────────────── */
.cleo{width:min(720px,100%);border-radius:6px;overflow:hidden;color:#141A24;
  background:linear-gradient(180deg,rgba(252,253,255,.97),rgba(238,243,250,.95));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 3px rgba(10,20,40,.22),0 40px 90px -22px rgba(6,14,30,.7),
    inset 0 1px 0 rgba(255,255,255,.9)}
.cleo__head{display:flex;align-items:center;gap:11px;padding:14px 22px;
  border-bottom:1px solid rgba(126,152,186,.28)}
.cleo__head .name{font-family:var(--f-display);font-weight:600;font-size:15.5px}
.cleo__state{margin-left:auto;font-family:var(--f-meta);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:#5E7085}
.cleo__turn{padding:18px 22px;border-bottom:1px solid rgba(126,152,186,.18)}
.cleo__turn:last-of-type{border-bottom:0}
.cleo__who{font-family:var(--f-meta);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#7A8CA1;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.cleo__says{font-size:16.5px;line-height:1.5;margin:0;color:#141A24}
.cleo__says em{font-style:normal;background:linear-gradient(to bottom,transparent 62%,rgba(192,143,60,.28) 62%)}
.cleo__ask{font-family:var(--f-display);font-weight:500;font-size:19px;letter-spacing:-.01em;margin:0}
.cleo__prov{padding:12px 22px;background:rgba(126,152,186,.1);font-family:var(--f-meta);
  font-size:12.5px;letter-spacing:.05em;color:#5E7085;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cleo__prov a{color:#2F4E78}
.cleo__acts{display:flex;gap:10px;padding:16px 22px;flex-wrap:wrap;border-top:1px solid rgba(126,152,186,.22)}
.act{font-family:var(--f-ui);font-size:15px;font-weight:500;padding:9px 15px;border-radius:5px;
  border:1px solid rgba(126,152,186,.5);background:rgba(255,255,255,.7);color:#1B2A3E;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.act:hover,.act:focus-visible{background:#fff;border-color:#5E7EA8;transform:translateY(-1px)}
.act--primary{background:#141A24;color:#F2F5FA;border-color:#141A24}
.act--primary:hover,.act--primary:focus-visible{background:#26313F}

/* ── THE CHAIN ───────────────────────────────────────────────
   Review point 3: CLEO reveals itself progressively — this
   inquiry → where it came from → similar recent inquiries →
   the pattern → the action. The connective device is a drawn
   brass hairline, the same material as the mark. No sparkle,
   no code, no HUD, no neural imagery: the intelligence reads
   as intelligent because of what it notices, not how it glows. */
.chain{position:relative;width:min(660px,100%);display:flex;flex-direction:column;gap:0}
.chain__step{position:relative;padding-left:34px;opacity:0;transform:translateY(10px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.chain__step.is-on{opacity:1;transform:none}
.chain__step + .chain__step{margin-top:22px}
/* the hairline thread: a real line drawn down the left edge, growing with the chain */
.chain__step::before{content:"";position:absolute;left:8px;top:6px;bottom:-16px;width:1px;
  background:linear-gradient(to bottom,rgba(192,143,60,.85),rgba(192,143,60,.28));
  transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.2,.6,.2,1) .15s}
.chain__step.is-on::before{transform:scaleY(1)}
.chain__step:last-child::before{display:none}
.chain__step::after{content:"";position:absolute;left:4px;top:5px;width:9px;height:9px;
  border-radius:50%;border:1px solid rgba(192,143,60,.9);background:rgba(20,26,36,.5)}
.chain__step--node::after{background:var(--brass)}
.chain__src{font-family:var(--f-meta);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(214,228,246,.85);display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.chain__note{font-family:var(--f-display);font-weight:500;font-size:clamp(17px,1.6vw,21px);
  line-height:1.32;letter-spacing:-.012em;color:#EAF1FA;margin:0;max-width:34ch}
.chain__note em{font-style:normal;color:var(--brass-hi)}
.chain__field{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:5px;
  border:1px solid rgba(126,152,186,.45);background:rgba(18,26,40,.5);color:#EAF1FA;
  font-family:var(--f-display);font-weight:500;font-size:17px;letter-spacing:-.01em}
.chain__field .caret{width:1px;height:19px;background:var(--brass-hi);opacity:.9}

/* ── Structured plain lists (Plans, CLEO OS, Contact) ───────── */
.rows{border-top:1px solid rgba(23,19,16,.14)}
.row{display:grid;grid-template-columns:minmax(150px,1fr) 2fr auto;gap:26px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid rgba(23,19,16,.14)}
.row__name{font-family:var(--f-display);font-weight:500;font-size:19px;letter-spacing:-.01em}
.row__what{font-size:15px;color:#5C5245;max-width:54ch}
.row__side{font-family:var(--f-meta);font-size:14px;letter-spacing:.07em;color:#6E6152;white-space:nowrap}
.rows--dark{border-top-color:rgba(244,239,231,.18)}
.rows--dark .row{border-bottom-color:rgba(244,239,231,.18)}
.rows--dark .row__what{color:rgba(244,239,231,.76)}
.rows--dark .row__side{color:rgba(244,239,231,.6)}

/* ── Reveal ─────────────────────────────────────────────────── */
[data-reveal]{opacity:1}
html.motion-ok [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
html.motion-ok [data-reveal].is-in{opacity:1;transform:none}

/* ── Foot ───────────────────────────────────────────────────── */
.foot{background:#0C0A08;padding:44px var(--gutter);border-top:1px solid rgba(244,239,231,.12)}
.foot p{margin:0 0 10px;font-size:14px;color:rgba(244,239,231,.74);max-width:88ch;line-height:1.65}
.foot a{color:rgba(240,220,166,.85)}
.foot__nav{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:18px;font-size:15px}
.foot__nav a{text-decoration:none;color:rgba(244,239,231,.82)}

/* ── Capture mode ───────────────────────────────────────────── */
/* `!important` deliberately: a page-level `#id{display:block}` rule outranks a
   two-class selector, which let a hidden scene keep rendering during capture —
   and that scene's fixed, blurred media layer then covered every other scene.
   Capture isolation has to be unconditional. */
body.capture .scene:not(.is-capture){display:none!important}
body.capture .foot{display:none}
body.capture .scene.is-capture{display:flex;min-height:100vh}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.motion-ok [data-reveal]{opacity:1;transform:none;transition:none}
  .crossing .scene__media video,.crossing .scene__media img{transition:none}
  .chain__step{opacity:1;transform:none;transition:none}
  .chain__step::before{transform:scaleY(1);transition:none}
}

/* ═══ MOBILE — art-directed for the phone, not stacked ═══════
   Review point 6. Three deliberate changes, not a reflow:
   (a) the lens becomes a graded scrim — the blur cost isn't paid
       on a phone (docs/QUALITY-STANDARDS.md);
   (b) media crops reposition so the subject never sits under type;
   (c) the chain becomes a true vertical thread, which is its most
       natural form — mobile gets the better version of it.        */
@media (max-width:820px){
  body{font-size:16px}
  .nav{padding:16px 20px;gap:12px}
  .nav__links{display:none}
  .nav__cta{margin-left:auto;padding:9px 15px;font-size:14px}
  .frameline{inset:10px}
  .h-title{font-size:clamp(27px,7.4vw,34px);max-width:14ch}
  .h-sec{font-size:clamp(23px,6.4vw,30px);max-width:15ch}

  /* On a phone the text zone is the whole lower half, so the light
     falls from the bottom rather than from one corner. */
  .lens--bl,.lens--c,.lens--l,.lens--r{background:
    linear-gradient(to top, rgba(10,7,5,.90) 0%, rgba(10,7,5,.74) 24%, rgba(10,7,5,.34) 54%, rgba(10,7,5,0) 84%)}

  .pane--tilt{transform:rotateY(-6deg) rotateX(1.5deg)}
  .msg{padding:19px}
  .msg--echo{width:100%;transform:none}
  .cleo__says{font-size:16.5px}
  .cleo__ask{font-size:17px}
  .cleo__turn{padding:15px 18px}
  .cleo__head,.cleo__ctx,.cleo__prov,.cleo__acts{padding-left:18px;padding-right:18px}
  .cleo__acts{flex-direction:column;align-items:stretch}
  .act{width:100%;text-align:left}
  .portal__row{flex-wrap:wrap;gap:6px 14px}
  .portal__row .who{min-width:0}
  .portal__row .badge{margin-left:0}
  .row{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .chain{width:100%}
  .chain__note{font-size:17px;max-width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   Secondary-page materials. Same three materials as the homepage —
   filmed reality, composed light, glass — used for different jobs.
   Nothing here is a new visual language.
   ═══════════════════════════════════════════════════════════════ */

/* A form is glass standing in the room, not a white page with fields. */
.form{width:min(560px,100%);border-radius:6px;overflow:hidden;color:#141A24;
  background:linear-gradient(180deg,rgba(252,251,248,.97),rgba(244,240,232,.95));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 3px rgba(30,18,8,.22),0 40px 90px -22px rgba(20,12,6,.7),
    inset 0 1px 0 rgba(255,255,255,.9)}
.form__head{display:flex;align-items:center;gap:11px;padding:16px 24px;
  border-bottom:1px solid rgba(120,96,64,.22)}
.form__head .name{font-family:var(--f-display);font-weight:600;font-size:15.5px}
.form__body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--f-meta);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#8A7B68}
.field input,.field textarea,.field select{font-family:var(--f-ui);font-size:15.5px;color:#141A24;
  background:rgba(255,255,255,.75);border:1px solid rgba(120,96,64,.3);border-radius:4px;
  padding:11px 13px;width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.form__note{padding:12px 24px;background:rgba(120,96,64,.09);font-family:var(--f-meta);
  font-size:12.5px;letter-spacing:.05em;color:#7A6A55}

/* "Where this goes" — three plain beats, threaded like the chain */
.beats{display:flex;flex-direction:column;gap:20px;max-width:420px}
.beat{position:relative;padding-left:32px}
.beat::after{content:"";position:absolute;left:3px;top:5px;width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(192,143,60,.9);background:rgba(20,14,8,.5)}
.beat + .beat::before{content:"";position:absolute;left:7px;top:-20px;height:20px;width:1px;
  background:linear-gradient(to bottom,rgba(192,143,60,.28),rgba(192,143,60,.85))}
.beat b{display:block;font-family:var(--f-display);font-weight:500;font-size:16px;margin-bottom:3px}
.beat span{font-size:15.5px;color:rgba(244,239,231,.76)}

/* Direct lines — a phone number is not a form field */
.direct{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-top:26px}
.direct a{text-decoration:none;display:flex;flex-direction:column;gap:3px}
.direct .k{font-family:var(--f-meta);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(244,239,231,.6)}
.direct .v{font-family:var(--f-display);font-weight:500;font-size:18px;letter-spacing:-.01em}
.direct a:hover .v{color:var(--brass-hi)}

/* About: one column of real writing, at a real measure */
.read{max-width:34em;font-size:clamp(17px,1.3vw,19.5px);line-height:1.68;color:rgba(244,239,231,.9)}
.read p{margin:0 0 1.15em}
.read p:first-of-type::first-letter{font-family:var(--f-voice);font-style:italic;font-size:3.1em;
  line-height:.85;float:left;padding:.06em .12em 0 0;color:var(--brass-hi)}
.read--ink{color:#3B322A}
.read--ink p:first-of-type::first-letter{color:var(--brass)}

/* CLEO OS: one exchange, shown as glass over the room */
.xchg{width:min(600px,100%);border-radius:6px;overflow:hidden;color:#141A24;
  background:linear-gradient(180deg,rgba(252,253,255,.97),rgba(238,243,250,.95));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 3px rgba(10,20,40,.2),0 30px 70px -20px rgba(6,14,30,.62)}
.xchg__q{padding:16px 20px;font-family:var(--f-display);font-weight:500;font-size:17px;
  letter-spacing:-.01em;border-bottom:1px solid rgba(126,152,186,.22)}
.xchg__a{padding:16px 20px;font-size:15.5px;line-height:1.52;display:flex;gap:11px}
.xchg__a em{font-style:normal;background:linear-gradient(to bottom,transparent 62%,rgba(192,143,60,.28) 62%)}
.xchg__src{padding:10px 20px;background:rgba(126,152,186,.1);font-family:var(--f-meta);
  font-size:12px;letter-spacing:.07em;color:#5E7085}

@media (max-width:820px){
  .form,.xchg{width:100%}
  .beats{max-width:100%}
  .direct{gap:18px}
  .read p:first-of-type::first-letter{font-size:2.6em}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — art direction, not a reflow.

   The phone is a different frame, not a narrow desktop. Four decisions
   are made here on purpose, and each changes the composition rather
   than just the column count:

   1. RECOMPOSE THE SHOT. A 16:9 frame cropped to 9:19.5 loses the
      subject or buries the type under it. Each full-bleed scene gets an
      explicit `object-position` so the subject sits in the upper third
      and the lower half stays quiet for text — the same decision a
      photographer makes reframing for a vertical crop.
   2. MOVE THE LIGHT. On desktop the light falls from one corner; on a
      phone the text zone is the entire lower half, so it falls from the
      bottom (see the .lens mobile rule above).
   3. LET THE CHAIN BE ITSELF. The intelligence chain is a vertical
      thread. Mobile gets the better version of it, not a compromise.
   4. PUT THE USEFUL THING FIRST. On Contact, a phone number outranks a
      form on a device that makes calls, so the direct lines lead.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /* 1 — recomposed crops */
  #hero .scene__media img,#hero .scene__media video,
  #talk .scene__media img,#talk .scene__media video{object-position:64% 22%}
  #bridge .scene__media img,#bridge .scene__media video,
  #lead .scene__media img,#matchcut .scene__media img,
  #portal .scene__media img,#intelligence .scene__media img,
  #ask .scene__media img,#knows .scene__media img,#after .scene__media img{object-position:62% 26%}
  #founder .scene__media img,#open .scene__media img{object-position:58% 40%}
  #end .scene__media img,#end .scene__media video,
  #close .scene__media img,#close .scene__media video{object-position:56% 30%}

  /* the hairline frame is a desktop conceit; at this size it just crowds */
  .frameline{display:none}

  /* type reads at arm's length, not at desk distance */
  .lede{font-size:16.5px;max-width:100%}
  .slate{font-size:12.5px}
  .h-title{letter-spacing:-.02em}

  /* 4 — Contact: the phone number leads */
  #talk .talk__l{display:flex;flex-direction:column}
  #talk .direct{order:-1;margin:0 0 22px;gap:22px;
    padding-bottom:20px;border-bottom:1px solid rgba(244,239,231,.2)}
  #talk .direct .v{font-size:20px}

  /* the founder's stop stays a stop — nothing gains a caption on mobile */
  #founder .founder__quote{font-size:clamp(20px,5.6vw,25px)}
}

/* Very narrow phones: hold the composition rather than letting it crush */
@media (max-width:400px){
  :root{--gutter:20px}
  .h-title{font-size:25px}
  .h-sec{font-size:22px}
  .btn{padding:12px 18px;font-size:14.5px}
  .chain__step{padding-left:28px}
  .chain__note{font-size:16px}
}

/* The Factory's chatbot component styles itself from `--cleo-*` design
   tokens that core/theme.php normally emits. These concept pages don't run
   through the Provisioner, so those tokens were simply absent and the panel
   rendered with no surface at all — transparent text sitting on the video.
   Supplying the tokens (rather than rewriting the component's CSS) is the
   honest reuse: the same stylesheet now works here exactly as it will in a
   real generated build, mapped to this direction's own palette. */
:root{
  --cleo-bg:#171310;
  --cleo-surface:#FBF8F3;
  --cleo-text:#171310;
  --cleo-border:rgba(120,96,64,.28);
  --cleo-primary:#171310;
  --cleo-accent:#C08F3C;
  --cleo-radius:6px;
  --cleo-radius-sm:4px;
  --cleo-radius-lg:10px;
  --cleo-shadow:0 2px 3px rgba(30,18,8,.22),0 40px 90px -22px rgba(20,12,6,.62);
  --cleo-font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --cleo-font-heading:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
}

/* ── CLEO's conversational presence ──────────────────────────────
   The launcher and panel themselves come from the Factory's own
   assets/css/chatbot.css — the metallic gold ring there is already
   CLEO's recurring identity mark, and is already this direction's
   brass. Only two things are added here.

   1. Availability. On the homepage the launcher fades in after CLEO's
      reveal (app.js), because the approved architecture keeps the mark
      absent through the middle of the journey. Secondary pages set no
      gate and it is present from load.
   2. Surface. The panel is nudged toward the same glass the rest of
      this direction is built from, so it reads as part of the room
      rather than a widget parked on top of it. */
.cleo-chatbot{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.cleo-chatbot.is-available{opacity:1;visibility:visible}
.cleo-chatbot .cleo-chatbot-panel{
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 3px rgba(10,20,40,.2),0 40px 90px -22px rgba(6,14,30,.6),
    inset 0 1px 0 rgba(255,255,255,.85)}
@media (prefers-reduced-motion:reduce){
  .cleo-chatbot{transition:none}
}

/* Contact details in every footer — a phone number and an email address are
   the two things a small-business owner actually looks for, and until now
   they appeared on one page out of six. Real tel:/mailto: links so a tap
   dials and a tap composes. */
.foot__contact{display:flex;gap:clamp(16px,3vw,32px);flex-wrap:wrap;align-items:baseline;
  margin:0 0 18px;font-size:15px}
.foot__contact a{font-family:var(--f-display);font-weight:500;font-size:17px;
  letter-spacing:-.01em;color:var(--ivory);text-decoration:none}
.foot__contact a:hover{color:var(--brass-hi)}
.foot__contact a span{font-family:var(--f-ui);font-weight:400;font-size:15px;
  color:rgba(244,239,231,.6)}
.foot__place{font-family:var(--f-meta);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(244,239,231,.55)}
@media (max-width:820px){
  .foot__contact{flex-direction:column;gap:10px}
  .foot__contact a{font-size:19px}
}

/* The launcher is CLEO's mark, not a badge. The shared component draws a
   filled metallic disc, which reads as a coin at this size and competes with
   the restraint the rest of the direction is built on. Same gold, same
   identity — drawn as the thin ring with the dark centre used everywhere
   else on the page, and sized to sit quietly. */
.cleo-chatbot .cleo-chatbot-launcher{
  width:56px;height:56px;padding:0;border:0;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #100D0A 0 58%, transparent 59%),
    conic-gradient(from 200deg,#7A5A22,#F0DCA6 18%,#B98C36 34%,#FFF0C9 52%,#9A742C 70%,#E5CC93 86%,#7A5A22);
  box-shadow:0 2px 10px rgba(0,0,0,.45),0 14px 30px -10px rgba(0,0,0,.55)}
.cleo-chatbot .cleo-chatbot-launcher::before, .cleo-chatbot .cleo-chatbot-launcher::after{display:none}
.cleo-chatbot .cleo-chatbot-launcher-avatar{
  font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--brass-hi)}
.cleo-chatbot .cleo-chatbot-launcher:hover{transform:translateY(-1px)}

.cleo-chatbot .cleo-chatbot-panel{width:min(380px,calc(100vw - 32px))}
.cleo-chatbot .cleo-chatbot-panel-header strong{font-family:var(--f-display)}
.cleo-chatbot .cleo-chatbot-prompt{font-family:var(--f-ui)}
@media (max-width:820px){
  .cleo-chatbot .cleo-chatbot-launcher{width:52px;height:52px}
}


/* NOTE (production): each selector below is scoped under `.cleo-chatbot` so
   this skin wins on SPECIFICITY, not on source order. The prototype relied on
   loading after assets/css/chatbot.css; in production the shared chatbot mount
   re-links that stylesheet near the end of <body>, which silently reverted the
   brass ring to the shared metallic disc. Same rendering as J2, reached in a
   way that cannot be undone by load order. */

/* CLEO's interface is light glass everywhere else in this direction, so the
   assistant's panel is too — the same surface as the intelligence panel on
   the homepage, not a dark tooltip. */
.cleo-chatbot .cleo-chatbot-panel{
  background:linear-gradient(180deg,rgba(252,253,255,.97),rgba(238,243,250,.95));
  color:#141A24}
.cleo-chatbot .cleo-chatbot-panel-header{background:transparent;
  border-bottom:1px solid rgba(126,152,186,.28)}
.cleo-chatbot .cleo-chatbot-panel-header strong{color:#141A24}
.cleo-chatbot .cleo-chatbot-panel-header p{color:#4A5A6E}
.cleo-chatbot .cleo-chatbot-panel-avatar{background:#141A24;color:var(--brass-hi)}
.cleo-chatbot .cleo-chatbot-close{color:#5E7085}
.cleo-chatbot .cleo-chatbot-prompt{
  background:rgba(255,255,255,.75);border:1px solid rgba(126,152,186,.45);color:#1B2A3E}
.cleo-chatbot .cleo-chatbot-prompt:hover{background:#fff;border-color:#5E7EA8}
.cleo-chatbot .cleo-chatbot-messages{color:#141A24}
.cleo-chatbot .cleo-chatbot-message-bot{background:rgba(126,152,186,.12);color:#141A24}
.cleo-chatbot .cleo-chatbot-message-visitor{background:#141A24;color:#F2F5FA}
.cleo-chatbot .cleo-chatbot-form{border-top:1px solid rgba(126,152,186,.28)}
.cleo-chatbot .cleo-chatbot-form input{
  background:rgba(255,255,255,.8);border:1px solid rgba(126,152,186,.45);color:#141A24}
.cleo-chatbot .cleo-chatbot-form .button{background:#141A24;color:#F2F5FA;border:0}

/* ═══════════════════════════════════════════════════════════════
   THE REVIEW CARD ROOM — "the card, and what it opens"

   Three honest layers, no fabrication anywhere:

   1. A real photograph — real hands, a real phone, a real table.
      Sourced through the approved pipeline and left untouched.
   2. A CLEO SAMPLE CARD, designed here for this page. It carries
      CLEO's own mark, because a real client's card carries theirs;
      it is labelled a sample on the page so it can never read as a
      client artifact.
   3. What a tap opens: Google's *write a review* screen, which is
      genuinely blank before you write one. Empty outline stars and
      an empty field — no rating, no review text, no author, no
      count, nothing invented.

   The destination is shown as a pane of light rising from the phone
   rather than composited onto its screen. A perspective match on a
   photographed device is fragile (the geometry shifts with every
   crop), and a slightly-wrong fake screen would undercut the very
   honesty this section is about. Glass over the room is already this
   direction's language for "CLEO's layer".
   ═══════════════════════════════════════════════════════════════ */
.rcard{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:6px}
.rcard__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* The sample card itself — a designed object lying on the real table */
.rcard__card{position:absolute;left:7%;top:23%;width:31%;aspect-ratio:1.61/1;
  border-radius:9px;padding:7% 7% 6%;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(145deg,#1E1811 0%,#141009 55%,#221A11 100%);
  border:1px solid rgba(240,220,166,.28);
  box-shadow:0 2px 3px rgba(0,0,0,.4),0 26px 46px -14px rgba(0,0,0,.72);
  transform:rotate(-7deg)}
.rcard__brand{display:flex;align-items:center;gap:8px}
.rcard__brand .mark{width:19px;height:19px}
.rcard__wordmark{font-family:var(--f-display);font-weight:600;letter-spacing:.06em;
  font-size:clamp(13px,1.1vw,16px);color:var(--ivory)}
.rcard__cta{font-family:var(--f-ui);font-size:clamp(10.5px,.85vw,12.5px);line-height:1.35;
  color:rgba(244,239,231,.82)}
.rcard__nfc{position:absolute;right:9%;bottom:14%;width:clamp(14px,1.5vw,22px);height:auto;
  color:var(--brass-hi);opacity:.85}
.rcard__sample{position:absolute;left:5%;bottom:5%;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-meta);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(244,239,231,.92);background:rgba(18,14,10,.72);
  border:1px solid rgba(240,220,166,.32);border-radius:999px;padding:6px 12px}

/* What the tap opens — a pane of light, tethered to the phone */
.rcard__open{position:absolute;right:4.5%;top:8%;width:29%;
  border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(252,253,255,.98),rgba(240,244,250,.96));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 2px 3px rgba(10,20,40,.24),0 30px 64px -18px rgba(6,14,30,.66)}
.rcard__open-head{padding:9% 9% 6%;border-bottom:1px solid rgba(126,152,186,.24)}
.rcard__biz{font-family:var(--f-display);font-weight:600;font-size:clamp(12px,1vw,15px);
  color:#141A24;margin:0}
.rcard__ask{font-family:var(--f-ui);font-size:clamp(10.5px,.88vw,13px);color:#5E7085;margin:3px 0 0}
.rcard__stars{display:flex;gap:5%;padding:7% 9%}
.rcard__stars svg{width:100%;height:auto;color:#C3CCD8}
/* The review destination is shown in its BLANK, pre-review state — which is
   also the state a customer actually sees on tap. These stars must never
   render filled: a filled row reads as a rating CLEO has not earned and has
   not published. Stated here as well as in the markup so neither alone is a
   single point of failure. */
.rcard__stars svg{fill:none;stroke:currentColor}
.rcard__stars svg path{fill:none}
.rcard__field{margin:0 9% 9%;height:clamp(26px,3.4vw,44px);border-radius:5px;
  border:1px solid rgba(126,152,186,.4);background:rgba(255,255,255,.75);
  display:flex;align-items:center;padding:0 8px}
.rcard__field span{font-family:var(--f-ui);font-size:clamp(9.5px,.78vw,12px);color:#8FA0B2}
/* the tether: the same brass hairline the intelligence chain uses */
.rcard__tether{display:none}

@media (max-width:820px){
  .rcard{aspect-ratio:4/3}
  .rcard__card{width:46%;left:5%;top:20%}
  .rcard__open{width:38%;right:3.5%;top:6%}
  .rcard__tether{display:none}
  .rcard__sample{font-size:12px}
}

/* ─────────────────────────────────────────────────────────────────────
   PRODUCTION UTILITIES

   The approved J2 prototype carried a handful of one-off measures and
   colours as inline `style` attributes on individual elements. In
   production that content comes from the Manifest, and a Manifest must
   never carry CSS — so each of those inline rules becomes a named class
   here, one-for-one. These are translations, not new design decisions:
   every value below is the value J2 rendered at.
   ───────────────────────────────────────────────────────────────────── */

/* measures (J2: style="max-width:NNch") */
.u-max-22{max-width:22ch}
.u-max-24{max-width:24ch}
.u-max-30{max-width:30ch}
.u-max-34{max-width:34ch}
.u-max-40{max-width:40ch}
.u-max-44{max-width:44ch}
.u-max-46{max-width:46ch}

/* spacing (J2: style="margin:0" / "margin-top:14px" / "margin-top:22px|26px") */
.u-flush{margin:0}
.u-gap{margin-top:14px}
.u-gap-lg{margin-top:24px}
.lede--flush{margin:0}
.msg--stacked{margin-top:10px}

/* the slate's two tones across the crossing: warm at the start of the
   journey, cool once the room has cooled into CLEO's layer. (J2:
   style="color:rgba(244,239,231,.85)" and rgba(214,228,246,.85|.88)) */
.slate--warm{color:rgba(244,239,231,.85)}
.slate--cool{color:rgba(214,228,246,.87)}

/* the "pieces around your website" note — a meta element set in the UI
   face at reading size rather than as a small-caps label (J2: a long
   inline override on that one paragraph) */
.note-ui{margin-top:20px;max-width:44ch;text-transform:none;letter-spacing:.01em;
  font-family:var(--f-ui);font-size:16px;line-height:1.6;color:rgba(244,239,231,.8)}

/* the closing conversion's centred stack (J2: inline flex + text-align) */
.lede--center{text-align:center;max-width:40ch}
.close__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* Portal's and CLEO's sample-data tags, pushed to the end of their row
   (J2: style="margin-left:auto" plus the meta face inline) */
.portal__sample{margin-left:auto;font-family:var(--f-meta);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase}
.cleo__sample{margin-left:auto}

/* the defocused ground behind the live-embed room — J2 blurred the
   workshop poster rather than shipping a second file for it */
.scene__media-blur{filter:blur(26px) brightness(.34) saturate(.7);transform:scale(1.12)}

/* About's one light surface (J2: style="background:var(--paper);color:var(--ink)") */
.scene--paper{background:var(--paper);color:var(--ink)}
.scene--paper .h-sec{color:var(--ink)}
.scene--paper .rows{margin-top:40px}

/* Contact: the success state closes the loop the homepage opened, rather
   than replacing an art-directed form with a generic confirmation. Same
   glass, same room; the form's own surface simply says where the message
   went. Rendered by app.js on a successful post. */
.form__done{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,34px)}
.form__done-head{display:flex;align-items:center;gap:10px}
.form__done-title{font-family:var(--f-display);font-weight:500;font-size:22px;
  letter-spacing:-.01em;color:var(--ink)}
.form__done-body{font-family:var(--f-ui);font-size:15px;line-height:1.6;
  color:rgba(20,26,36,.72);max-width:40ch}
.form__done-link{font-family:var(--f-meta);font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(20,26,36,.55);text-decoration:none;margin-top:4px}
.form__done-link:hover{color:var(--ink)}
.form__error{font-family:var(--f-ui);font-size:15px;line-height:1.55;color:#8C2F2F;
  margin:0 clamp(22px,3vw,34px) clamp(18px,2vw,24px)}

/* project grounds, dimmed so the glass pane reads first (J2: inline filters) */
.u-ground-dim{filter:brightness(.7) saturate(.9)}
.u-ground-dimmer{filter:brightness(.62) saturate(.85)}

/* centred closing headings (J2: inline text-align) */
.u-center{text-align:center}

/* the two photographed grounds, framed as J2 framed them (inline in the
   prototype: object-position plus a light grade) */
.u-ground-plans{object-position:center 38%;filter:saturate(.9) contrast(1.06)}
.u-ground-story{object-position:center 40%}
.u-note-mark{margin-top:3px}
/* the light surfaces' own slate and lede tones (J2: inline colours) */
.scene--paper .slate{color:#7A6D5C}
.scene--paper .lede{color:#5C5245}
.rows--gap{margin-top:40px}
.rows--gap-lg{margin-top:44px}
.u-gap-xl{margin-top:76px}
.u-max-20{max-width:20ch}

/* CLEO OS's closing status column — centred, at a reading measure
   (J2: inline max-width and auto margins on that one block) */
.status__inner{max-width:52ch;margin-left:auto;margin-right:auto;text-align:center}
.status__inner .h-sec{margin:14px auto 0;max-width:24ch}
.status__inner .lede{margin-left:auto;margin-right:auto}
.status__inner .close__actions{margin-top:28px}

/* The chain's answer step: no top margin (it is not another beat on the
   hairline, it is the reply), and the panel 26px below it. Written at
   `.chain .chain__step--bare` specificity because `.chain__step +
   .chain__step` would otherwise win — J2 could use an inline style here and
   production cannot. */
.chain .chain__step--bare{margin-top:0}
.chain__answer{margin-top:26px}
.u-offscreen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Footer honesty notes and the copyright line. J2's footer set these as plain
   <p> inside .foot; production names them so the standing disclosures are
   addressable (and so a future edit cannot quietly restyle them into
   invisibility — they are meant to be read). */
.foot__note{max-width:78ch}
.foot__legal{margin-top:18px}
.u-max-64{max-width:64ch}

/* ── "About this demo" ─────────────────────────────────────────────────
   Plain-language reassurance where the invented names first appear. Quiet
   by construction — a rule, a small head, and body copy at reading size.
   Not a badge, not a legal box, and never a modal. */
.demo{position:relative;isolation:isolate;margin-top:clamp(20px,2.6vh,30px);
  padding-top:16px;max-width:52ch;border-top:1px solid rgba(226,235,247,.28)}
/* It lands on the brightest part of the frame, where it measured 2.0:1. A
   seated light fall — the direction's own answer for type over media — rather
   than a panel, which would make this a box in a site that has none. */
.demo::before{content:"";position:absolute;left:50%;top:-40px;transform:translateX(-50%);
  width:min(220%,1180px);height:calc(100% + 120px);z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 58% at 50% 50%, rgba(8,10,14,.86) 0%, rgba(8,10,14,.62) 46%,
      rgba(8,10,14,.22) 70%, rgba(8,10,14,0) 88%),
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(8,10,14,.42) 0%, rgba(8,10,14,.12) 55%,
      rgba(8,10,14,0) 84%)}
.demo__head{margin:0;font-family:var(--f-meta);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass-hi)}
.demo__body{margin:8px 0 0;font-size:15px;line-height:1.6;color:rgba(232,240,250,.92)}

/* The chain's two framing lines. They explain what the visitor is watching;
   the mechanism above them is untouched. */
.chain__leadin{margin:0 0 clamp(14px,2vh,22px);max-width:34ch;
  font-family:var(--f-display);font-weight:500;font-size:clamp(17px,1.5vw,21px);
  line-height:1.3;letter-spacing:-.012em;color:#EAF1FA}
.chain__aside{margin:9px 0 0;max-width:38ch;font-size:14.5px;line-height:1.55;
  color:rgba(226,235,247,.78)}
.chain__closing{margin:clamp(16px,2.2vh,24px) 0 0;max-width:40ch;font-size:15px;
  line-height:1.6;color:rgba(226,235,247,.86)}