/* CLEOWebsites.ca — page-scoped composition for the "home" page.
 * Lifted verbatim from the approved J2 prototype (home.html), which kept each
 * page's own composition in a page <style> block. Kept per-page rather than
 * merged into system.css on purpose: #open and #close are each used by three
 * different pages with different rules, and merging would silently cross them.
 * Everything shared lives in system.css. */

/* Home-only composition. Everything shared lives in system.css. */
  #hero .scene__body{align-items:flex-end;padding-bottom:clamp(56px,8vh,104px)}
  .hero__card{max-width:min(700px,60vw)}
  .hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
  .hero__actions{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap}
  .hero__rail{position:absolute;right:var(--gutter);bottom:clamp(56px,8vh,104px);z-index:4;
    text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
  .hero__scrollcue{width:1px;height:56px;background:linear-gradient(to bottom,transparent,rgba(240,220,166,.8))}

  #work-enters .scene__body{align-items:center;gap:clamp(28px,4vw,72px)}
  .pane-wrap{flex:1 1 56%;perspective:1800px;display:flex;justify-content:center}
  .pane-wrap .pane{width:min(660px,100%)}
  .work-enters__text{flex:1 1 34%;max-width:380px}

  #live{background:#0E0B09}
  #live .scene__body{flex-direction:column;justify-content:center;gap:20px;padding-top:92px;padding-bottom:48px}
  .live__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .live__frame{position:relative;width:100%;height:min(66vh,580px);border-radius:6px;overflow:hidden;
    background:#0d0b09;outline:1px solid rgba(255,255,255,.2);outline-offset:-1px;
    box-shadow:0 2px 4px rgba(0,0,0,.3),0 40px 90px -20px rgba(0,0,0,.75)}
  /* The crop is set by app.js, which measures where the drag handle actually
     is inside the embedded page and frames it. It cannot be hard-coded: the
     embed reflows with width, so the handle sits at y573 on a phone, y653 at
     500px and y700 on desktop. A single offset kept it just below the fold —
     the signature interaction was present but invisible.
     Without JS this default shows the top of the client's real page, which is
     an honest fallback rather than a broken one. */
  /* Taller than the window on purpose: the client's own floating chat launcher
     is fixed to the bottom of the embedded viewport, so a tall iframe parks it
     safely below the visible crop instead of letting a second gold circle
     compete with CLEO's mark. app.js re-measures after any height change. */
  .live__frame iframe{position:absolute;left:0;top:0;
    width:100%;height:1180px;border:0;display:block;
    transition:top .25s ease}
  .live__flicker{position:absolute;right:18px;top:16px;z-index:5;display:flex;align-items:center;gap:9px;
    font-family:var(--f-meta);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:#F4EFE7;
    background:rgba(18,14,10,.82);border:1px solid rgba(240,220,166,.35);padding:7px 12px;border-radius:999px;
    opacity:0;transition:opacity .5s ease}
  .live__flicker.is-on{opacity:1}

  #bridge .scene__body,#lead .scene__body,#matchcut .scene__body,#portal .scene__body{
    align-items:center;justify-content:center;flex-direction:column;gap:22px;text-align:center}
  #portal .scene__body{padding-top:100px;padding-bottom:64px}

  /* The intelligence scene is the page's one scroll-driven sequence. */
  #intelligence{min-height:210vh;display:block}
  /* The room stays put while the chain builds — pinned with `sticky`
     (bounded by this section), never `fixed` (which is not). The pinning
     itself lives in system.css under `.scene--pins`. */

  /* Two columns: the chain on the left, its two framing lines in the right
     half the stage was not using. The chain's own column keeps its width, so
     the mechanism renders exactly where it did before. */
  /* The framing lines sit over the brightest part of this frame (the shoulder),
     so the right of the stage gets its own graded fall — measured, not guessed:
     without it the closing line read at roughly 2:1. The chain's own column is
     untouched, and the fall starts past it. */
  /* One graded fall across the whole stage now that type occupies both
     columns, rather than the right-edge fall the old two-zone layout needed. */
  #intelligence .stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      linear-gradient(to right, rgba(8,12,18,.82) 0%, rgba(8,12,18,.62) 42%,
        rgba(8,12,18,.44) 64%, rgba(8,12,18,.60) 100%),
      linear-gradient(to top, rgba(8,12,18,.42) 0%, rgba(8,12,18,0) 42%)}
  /* ── The intelligence sequence: a rail, and one beat at a time ──────
     It used to render as one accumulating column — six steps all on screen,
     growing to 880px. That never fitted a real laptop (159px over at
     1440x813; 494px over at 1000x625). The rail now carries the whole shape
     so the visitor always knows where they are, and the stage shows a single
     beat, so height is bounded by the TALLEST beat rather than their sum.

     Padding is viewport-aware on purpose: a fixed 96/56 ate a quarter of a
     short screen. */
  .stage{position:sticky;top:0;height:100vh;display:grid;isolation:isolate;
    grid-template-columns:minmax(0,300px) minmax(0,620px);
    column-gap:clamp(36px,5vw,88px);align-content:center;justify-content:center;
    padding:clamp(72px,12vh,112px) var(--gutter) clamp(48px,8vh,72px);z-index:3}

  /* The brass hairline is the same material and the same spine the chain
     always had — the mechanism relocated, not replaced. Not five cards. */
  .beats{display:contents}
  .beats__rail{grid-column:1;list-style:none;margin:0;padding:0 0 0 26px;
    position:relative;align-self:center;
    display:flex;flex-direction:column;gap:clamp(14px,2.4vh,26px)}
  .beats__rail::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
    background:linear-gradient(to bottom,rgba(192,143,60,.15),rgba(192,143,60,.65),rgba(192,143,60,.15))}
  .beat{position:relative;display:flex;flex-direction:column;gap:3px;
    opacity:.3;transition:opacity .45s ease}
  .beat::before{content:"";position:absolute;left:-26px;top:.55em;width:9px;height:9px;
    border-radius:50%;border:1px solid rgba(192,143,60,.55);background:#0E1520;
    transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
  .beat.is-active{opacity:1}
  .beat.is-past{opacity:.42}
  .beat.is-active::before{background:var(--brass-hi);border-color:var(--brass-hi);
    box-shadow:0 0 0 4px rgba(192,143,60,.14)}
  .beat.is-past::before{background:rgba(192,143,60,.5);border-color:rgba(192,143,60,.5)}
  .beat__n{font-family:var(--f-meta);font-size:12px;letter-spacing:.14em;color:var(--brass-hi)}
  .beat__n i{font-style:normal;color:rgba(240,220,166,.45)}
  .beat__label{font-family:var(--f-display);font-weight:500;
    font-size:clamp(16px,1.35vw,20px);line-height:1.25;letter-spacing:-.01em;color:#EAF1FA}

  /* Every beat sits in the same grid cell, so the column never grows to the
     sum of its parts. */
  .beats__stage{grid-column:2;display:grid;align-self:center;min-width:0}
  .beatp{grid-area:1 / 1;min-width:0;
    opacity:0;visibility:hidden;transform:translateY(14px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1),visibility .5s}
  .beatp.is-active{opacity:1;visibility:visible;transform:none}
  .beatp__statement{margin:0;max-width:26ch;font-family:var(--f-display);font-weight:500;
    font-size:clamp(24px,2.5vw,38px);line-height:1.2;letter-spacing:-.018em;color:#EAF1FA}
  .beatp__statement em{font-style:normal;color:var(--brass-hi)}
  .beatp__text{margin:0;max-width:44ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6;
    color:rgba(234,241,250,.9)}
  .beatp .chain__src{margin-top:18px}
  .beatp .msg--stacked{margin-top:10px}
  .beatp .cleo{margin:0}
  .chain__step--bare{padding-left:0}
  .chain__step--bare::before,.chain__step--bare::after{display:none}

  #founder .scene__body{align-items:flex-end;padding-bottom:clamp(56px,9vh,110px)}
  .founder__quote{font-size:clamp(23px,2.4vw,36px);line-height:1.32;max-width:20ch;margin:0;color:#F7F1E6}

  #quiet .scene__body{align-items:center;justify-content:center}

  #end .scene__body{align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:20px}
  #end .h-title{max-width:16ch;text-align:center}

  @media (max-width:820px){
    .hero__card{max-width:100%}
    .hero__rail{display:none}
    #hero .scene__body{padding-bottom:44px}
    #work-enters .scene__body{flex-direction:column;justify-content:flex-end;gap:20px;
      padding-bottom:52px;padding-top:96px}
    .pane-wrap{flex:none;width:100%;perspective:1200px}
    .work-enters__text{flex:none;max-width:100%}
    #live .scene__body{padding-top:88px;gap:18px}
    .live__frame{height:min(56vh,440px)}
    .live__frame iframe{height:1040px}
    /* the chain is at its most natural as a single vertical thread */
    /* the CLEO OS moment stacks: statement, then the capabilities */
    .begin{flex-direction:column;align-items:flex-start;justify-content:center;
      gap:26px;padding-top:92px;padding-bottom:44px;height:100vh;overflow-y:auto}
    .begin__l,.begin__r{flex:none;width:100%;max-width:100%}
    .seq__item{font-size:18px}
    .begin__lead{max-width:100%}
    .begin__body{max-width:100%}
    #intelligence{min-height:260vh}
    /* flex-start, not center: the framing lines made this column taller than
       the stage, and a CENTRED flex column that overflows is clipped at BOTH
       ends with the top unreachable — the lead-in simply could not be read.
       Starting at the top keeps every line scrollable into view. */
    /* Mobile: the rail becomes a row of numbers with only the active label
       spelled out, and the beat content sits beneath it. */
    .stage{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:20px;
      padding-top:74px;padding-bottom:34px;height:100vh;overflow:hidden}
    .beats__rail{padding-left:0;gap:10px;flex-direction:row;flex-wrap:wrap;align-items:center}
    .beats__rail::before{display:none}
    .beat{flex:none;flex-direction:row;align-items:baseline;gap:8px}
    .beat::before{display:none}
    .beat__label{display:none}
    .beat.is-active .beat__label{display:block;font-size:18px}
    .stage__l,.stage__r{flex:none;width:100%;max-width:100%;justify-content:flex-start}
  }

  /* ── "Your website is only the beginning" ──────────────────────────
     The CLEO OS moment. Statement left, capabilities resolving right,
     while the room holds — the same shape the CLEO OS page already uses,
     so this belongs to the world rather than arriving as a features
     section. Pinned like the intelligence scene; the pinning itself lives
     in system.css under `.scene--pins`. */
  /* ── The three-beat bridge ─────────────────────────────────────────
     This moment used to be J2's quiet bridge: one sentence, one screen, the
     room simply there. Carrying the CLEO OS explanation cost that breath —
     and worse, making type legible on both sides meant grading the room down
     to near-black, which is the very thing that made the beat beautiful.

     So the moment is staged instead of stated. `--b` is the beat clock
     app.js writes (0 -> 1 across the pin, then past 1 as the stage releases);
     every ramp below is derived from it, so the choreography is legible here
     rather than scattered through JS.

       0    -> --b1   BREATH       the sentence alone, room open and lit
       --b1 -> --b2   EXPLANATION  light falls; lede, body, capabilities arrive
       --b2 -> 1      INVITATION   closing line and CTA settle, and hold
       1    -> 1.45   RELEASE      the light comes back up as the stage leaves,
                                   so the inquiry arrives into an open room

     Desktop and mobile differ only in these two numbers and the travel. */
  /* Four beats: idea -> what CLEO is -> what it can help with -> the
     invitation. One focal point at each, the rest receding rather than
     disappearing, so the information is all still on the page. */
  #bridge{--b:0;--k1:.20;--k2:.44;--k3:.72;--b1:.20;--b2:.72;min-height:240vh;display:block}

  /* The room's own grade, ramped in over the explanation and lifted again on
     release. Two falls from the edges, never a flat wash — the subject stays
     present as a silhouette between them. */
  #bridge .begin::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    /* The grade LEADS the copy: it starts .08 before the breath ends and is
       most of the way in by the time the text is readable. Ramped the other
       way round, the supporting line reached full opacity over a still-bright
       room and measured 3.7:1. Light first, then words. */
    opacity:min(
      clamp(0, (var(--b) - (var(--k1) - .08)) / .24, 1),
      clamp(0, (1.45 - var(--b)) / .30, 1));
    background:
      linear-gradient(to right,
        rgba(10,8,6,.92) 0%, rgba(10,8,6,.86) 26%, rgba(10,8,6,.55) 41%,
        rgba(10,8,6,.30) 50%,
        rgba(10,8,6,.62) 58%, rgba(10,8,6,.90) 72%, rgba(10,8,6,.94) 100%),
      linear-gradient(to top, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 34%)}

  /* BEAT 1 is the headline alone. It never leaves, but it steps back once it
     has been read so it stops competing with what follows. */
  #bridge .begin__l h2{opacity:clamp(.55, 1 - (var(--b) - var(--k2)) / .10, 1)}

  /* BEAT 2 — what CLEO is. It steps back TWICE: once when the capabilities
     become the focal point, again at the invitation. Receding only at the end
     left beat 3 with two things at full weight and no obvious focus. */
  #bridge .begin__lead,
  #bridge .begin__body{opacity:min(
    clamp(0, (var(--b) - var(--k1)) / .10, 1),
    clamp(.50, 1 - (var(--b) - var(--k2)) / .10, 1),
    clamp(.30, 1 - (var(--b) - var(--k3)) / .10, 1))}

  /* BEAT 3 — what CLEO can help with. The column holds no space until its own
     beat, so beat 1 is genuinely a sentence in a room, not a sentence beside
     an empty gap. */
  #bridge .begin__r{opacity:min(
    clamp(0, (var(--b) - var(--k2)) / .08, 1),
    clamp(.42, 1 - (var(--b) - var(--k3)) / .10, 1))}

  /* BEAT 4 — the invitation, with the quiet around it that makes it read as
     deliberate rather than as the end of a list. */
  #bridge .begin__close,
  #bridge .begin__cta{opacity:clamp(0, (var(--b) - var(--k3)) / .08, 1)}
  #bridge .seq__status{opacity:clamp(0, (var(--b) - var(--k3)) / .10, 1)}
  .begin{position:sticky;top:0;height:100vh;display:flex;align-items:center;isolation:isolate;
    gap:clamp(36px,5vw,96px);
    padding:clamp(74px,12vh,112px) var(--gutter) clamp(48px,8vh,72px);z-index:3}
  .begin__l{flex:1 1 52%;max-width:620px}
  .begin__r{flex:1 1 40%;max-width:520px}

  .begin__lead{font-family:var(--f-display);font-weight:500;
    font-size:clamp(19px,1.75vw,25px);line-height:1.32;letter-spacing:-.012em;
    color:var(--brass-hi);margin:18px 0 0;max-width:30ch}
  .begin__body{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.62;
    color:rgba(244,239,231,.84);margin:16px 0 0;max-width:46ch}
  .begin__close{font-family:var(--f-display);font-weight:500;
    font-size:clamp(17px,1.4vw,21px);line-height:1.3;letter-spacing:-.01em;
    color:var(--ivory);margin:24px 0 0;max-width:26ch}
  .begin__cta{margin-top:26px}

  /* The capabilities: lines of type that light one after another. No card,
     no tile, no icon — the only ornament is a hairline that draws in. */
  .seq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
    gap:clamp(10px,1.4vh,18px)}
  .seq__item{display:flex;align-items:baseline;gap:16px;
    font-family:var(--f-display);font-weight:500;
    font-size:clamp(18px,1.65vw,24px);line-height:1.24;letter-spacing:-.012em;
    color:rgba(238,244,251,.30);
    transform:translateY(6px);
    transition:color .5s ease,opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
  .seq__tick{flex:none;width:0;height:1px;margin-top:.62em;
    background:linear-gradient(to right,rgba(192,143,60,.25),var(--brass-hi));
    transition:width .5s cubic-bezier(.22,.61,.36,1)}
  .seq__item.is-on{color:#F2F6FB;transform:none}
  .seq__item.is-on .seq__tick{width:26px}

  .seq__status{display:flex;align-items:center;gap:9px;margin:clamp(22px,3vh,34px) 0 0;
    font-family:var(--f-meta);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(226,235,247,.72)}
  .seq__dot{width:6px;height:6px;border-radius:50%;background:var(--brass-hi);opacity:.85}

  @media (prefers-reduced-motion:reduce){
    .seq__item{transition:none;transform:none}
    .seq__tick{transition:none}
  }

/* ── Mobile timing for the three-beat bridge ───────────────────────────
   Deliberately placed AFTER the desktop rule rather than inside the earlier
   media block. The previous attempt lived at the top of that block, where the
   later desktop `#bridge{min-height:...}` matched with equal specificity and
   silently won — so mobile ran the desktop travel with more stacked content,
   and the override was dead code. Same specificity means source order decides;
   this is the source order that works.

   Mobile is not the desktop values scaled down. The statement and the seven
   capabilities stack into one column, so the explanation beat needs a much
   larger share of the travel (60% against desktop's 48%), and the whole scene
   needs more of it. */
@media (max-width: 820px) {
  #bridge{--k1:.14;--k2:.40;--k3:.74;--b1:.14;--b2:.74;min-height:280vh}
  /* Stacked, the column runs 33px past the pinned stage at 500px and further
     at 375 — which would leave the status line unreachable without an
     internal scroll gesture nobody discovers. Rather than shrink the type we
     just enlarged for readability, the SPACING gives the room back: every
     value below is a gap, never a font size. */
  .begin{justify-content:flex-start;padding-top:70px;padding-bottom:30px;gap:14px}
  #bridge .begin__lead{margin-top:12px}
  #bridge .begin__body{margin-top:12px}
  #bridge .begin__close{margin-top:16px}
  #bridge .begin__cta{margin-top:16px}
  #bridge .seq{gap:9px}
  #bridge .seq__status{margin-top:14px}
  /* Gentler grade: mobile type sits over the lower, already-darker part of
     the frame, and the desktop curve crushes it. */
  #bridge .begin::before{
    opacity:min(
      clamp(0, (var(--b) - (var(--k1) - .06)) / .22, .88),
      clamp(0, (1.45 - var(--b)) / .26, .88))}
}

/* ── Reduced motion: no beats, nothing hidden ──────────────────────────
   The beat stage stacks every panel in one grid cell and hides the inactive
   ones. Without scroll choreography that would leave four of the five beats
   permanently invisible — so with reduced motion the sequence un-pins and
   becomes an ordinary readable column, label above content, in order. */
@media (prefers-reduced-motion: reduce) {
  #intelligence{min-height:0}
  #intelligence .stage{position:static;height:auto;display:block;
    padding:clamp(72px,10vh,104px) var(--gutter)}
  #intelligence .stage::before{opacity:.8}
  .beats{display:block;max-width:820px;margin:0 auto}
  .beats__rail{display:none}
  .beats__stage{display:block}
  .beatp{grid-area:auto;opacity:1;visibility:visible;transform:none;
    padding-bottom:clamp(30px,5vh,54px)}
  .beatp::before{content:attr(data-label);display:block;margin-bottom:12px;
    font-family:var(--f-meta);font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--brass-hi)}
  #bridge{min-height:0}
  #bridge .begin{position:static;height:auto;display:block;
    padding:clamp(72px,10vh,104px) var(--gutter)}
  #bridge .begin__l,#bridge .begin__r{max-width:820px;margin:0 auto}
  #bridge .begin__r{margin-top:34px}
}

/* ── A glimpse: the Talking to CLEO film ────────────────────────────
   Full-bleed. The panels around her are the argument — what CLEO organises
   across a business — so the film runs uncropped and near its own brightness.
   Their pseudo-text is softened in the ENCODE, scale-selectively: 8-14px
   lettering goes, a 30-50px chart, avatar or icon stays. She is masked out of
   it entirely, gestures included.

   Still not `scene--pins`: no scrubbing, no parallax, no new mechanism. */
#glimpse{display:block;padding:0;background-color:var(--ink)}
.glimf{position:relative;width:100%;min-height:100vh;display:block}
.glimf__stage{position:absolute;inset:0;margin:0}
.glimf__film{position:absolute;inset:0;overflow:hidden;transition:opacity .5s ease}
/* The picture dips just before the loop wraps and returns after it, so the
   cut lands while the frame is dark rather than snapping from the closing
   statement straight back to the opening shot. */
.glimf.is-resetting .glimf__film{opacity:.05}
.glimf.is-resetting .fin{opacity:.28;transition:opacity .5s ease}
.glimf__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  /* A light warm pass so it belongs in the room — never a darkening grade. */
  filter:saturate(.92) contrast(1.03) brightness(1.03) sepia(.16) hue-rotate(-7deg)}
.glimf__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Two scrims, both kept OFF the panels: a shallow one at the very top so the
   nav and the info control stay legible over bright glass, and one in the
   bottom band — the empty desk, where no panel lives. */
.glimf__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(23,19,16,.62) 0%, rgba(23,19,16,.20) 10%, transparent 19%),
    linear-gradient(0deg, rgba(23,19,16,.92) 0%, rgba(23,19,16,.74) 12%, rgba(23,19,16,.30) 24%, transparent 34%)}

/* ── The info control ──────────────────────────────────────────
   A disclosure in the visitor's own terms, not a legal notice. Small, brass,
   top-left; it never competes with her, and it closes again. */
.vinfo{position:absolute;top:clamp(76px,10vh,104px);left:var(--gutter);z-index:5;max-width:min(38ch,44vw)}
.vinfo__btn{display:inline-flex;align-items:center;gap:9px;background:rgba(23,19,16,.62);
  border:1px solid rgba(192,143,60,.5);border-radius:999px;padding:11px 17px 11px 10px;min-height:44px;
  color:rgba(244,239,231,.92);font-family:var(--f-ui);font-size:14px;line-height:1;
  cursor:pointer;backdrop-filter:blur(6px);transition:border-color .25s ease,background .25s ease}
.vinfo__btn:hover,.vinfo__btn:focus-visible{border-color:var(--brass-hi);background:rgba(23,19,16,.78)}
.vinfo__i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(192,143,60,.72);color:var(--brass-hi);
  font-family:var(--f-voice);font-style:italic;font-size:13px;line-height:1}
.vinfo__panel{margin-top:10px;padding:18px 20px 16px;border-radius:3px;
  background:rgba(18,15,13,.93);border:1px solid rgba(192,143,60,.34);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);backdrop-filter:blur(10px)}
.vinfo__h{margin:0 0 8px;font-family:var(--f-display);font-weight:500;font-size:16.5px;
  line-height:1.32;color:var(--ivory)}
.vinfo__b{margin:0 0 14px;font-size:15px;line-height:1.6;color:rgba(244,239,231,.82)}
.vinfo__x{background:none;border:0;padding:0;cursor:pointer;color:rgba(244,239,231,.62);
  font-family:var(--f-meta);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.vinfo__x:hover,.vinfo__x:focus-visible{color:var(--brass-hi)}

/* ── The conversation ──────────────────────────────────────────
   Two voices, told apart by material rather than by tail direction: CLEO is
   brass on ink, the owner is cream. No tails, no avatars, no typing dots —
   this is the site's own language, not a messenger's. */
.convo{position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:clamp(30px,5vh,52px);z-index:4;pointer-events:none}
/* The conversation keeps to its own column so the owner's replies can sit
   opposite CLEO without ever reaching the copy on the other side. */
.convo__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;max-width:min(54ch,46%)}
.bub{display:grid;grid-template-columns:auto;gap:5px;max-width:100%;
  padding:13px 19px;border-radius:2px;
  opacity:0;transform:translateY(7px);
  transition:opacity .7s ease,transform .74s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform}
.bub.is-on{opacity:1;transform:none}
.bub__who{font-family:var(--f-meta);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.bub__say{font-size:clamp(16px,1.35vw,19px);line-height:1.45}
.bub--cleo{background:linear-gradient(180deg, rgba(74,53,20,.90), rgba(46,33,13,.92));
  border:1px solid rgba(192,143,60,.62);box-shadow:0 18px 44px -22px rgba(0,0,0,.9)}
.bub--cleo .bub__who{color:var(--brass-hi)}
.bub--cleo .bub__say{color:#F7EEDA}
.bub--owner{align-self:flex-end;background:rgba(244,239,231,.94);
  border:1px solid rgba(244,239,231,.7);box-shadow:0 18px 44px -22px rgba(0,0,0,.85)}
.bub--owner .bub__who{color:rgba(23,19,16,.56)}
.bub--owner .bub__say{color:#171310}

/* The payoff: it resolves rather than arrives — each line settling a beat
   after the one before, and the cues receding as it does. */
.fin{position:absolute;left:0;right:0;bottom:2px;margin:0;display:flex;
  flex-direction:column;align-items:center;gap:4px;text-align:center;
  opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s linear 1s}
.fin__l{font-family:var(--f-display);font-weight:400;
  font-size:clamp(23px,2.7vw,40px);line-height:1.22;letter-spacing:-.012em;color:var(--ivory);
  text-shadow:0 2px 26px rgba(0,0,0,.82);
  opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity 1.1s ease,transform 1.25s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i) * .36s)}
.fin__l:first-child{color:var(--brass-hi)}
.convo.is-final .fin{opacity:1;visibility:visible;transition-delay:0s}
.convo.is-final .fin__l{opacity:1;transform:none}
/* When the payoff resolves it is the only thing on screen: the cues recede
   and the section's own copy steps back with them. One focal point. */
.convo.is-final .convo__list{opacity:0;transform:translateY(-6px);
  transition:opacity .78s ease,transform .78s ease}
.glimf.is-final .glimf__copy{opacity:0;transform:translateY(6px);
  transition:opacity .85s ease,transform .85s ease}
.glimf__copy{transition:opacity .85s ease,transform .85s ease}
.convo__list{transition:opacity .78s ease,transform .78s ease}

.glimf__copy{position:absolute;left:var(--gutter);bottom:clamp(30px,5vh,48px);z-index:3;
  max-width:min(42ch,46vw)}
.glimf__label{font-family:var(--f-meta);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(244,239,231,.78);margin:0 0 14px}
.glimf__label span{color:var(--brass-hi);margin-right:8px}
.glimf__h{margin:0 0 14px;max-width:20ch;text-shadow:0 2px 22px rgba(0,0,0,.72)}
.glimf__note{font-size:15px;line-height:1.6;color:rgba(244,239,231,.76);margin:0;max-width:40ch;
  text-shadow:0 1px 12px rgba(0,0,0,.8)}

/* The browser draws no cues — the conversation is the visible treatment — but
   the <track> stays for caption settings and assistive technology. */
.glimf__v::cue{opacity:0}
.glimf__v::-webkit-media-text-track-container{display:none}

.glimf__tx{margin-top:14px;max-width:100%}
/* The label is monospace and letter-spaced; it must be allowed to wrap or it
   runs past a right-aligned column and gets clipped by the scene's overflow. */
.glimf__tx summary{font-family:var(--f-meta);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(244,239,231,.7);cursor:pointer;padding:8px 0;
  border-top:1px solid var(--rule);white-space:normal;overflow-wrap:break-word}
.glimf__tx summary:hover,.glimf__tx summary:focus-visible{color:var(--brass-hi)}
.glimf__tx ul{list-style:none;margin:6px 0 0;padding:0}
.glimf__tx li{display:flex;gap:14px;padding:6px 0;font-size:15px;line-height:1.55;
  color:rgba(244,239,231,.9);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.glimf__t{font-family:var(--f-meta);font-size:11.5px;color:rgba(244,239,231,.6);
  padding-top:4px;flex:0 0 38px}
.glimf__q{flex:1 1 auto}

/* The copy block sits opposite the conversation so neither reads as a caption
   for the other, and takes only as much scrim as its own words need. */
/* Clear of the chat launcher's corner — it sits over the bottom right, and
   the transcript label was landing underneath it. */
.glimf__copy{left:auto;right:calc(var(--gutter) + 78px);text-align:right;max-width:min(34ch,32vw)}
.glimf__copy::before{content:"";position:absolute;z-index:-1;
  left:-5vw;right:-6vw;top:-28px;bottom:-8vh;
  background:radial-gradient(120% 100% at 74% 74%, rgba(23,19,16,.86) 0%, rgba(23,19,16,.58) 48%, transparent 80%)}
.glimf__tx{margin-left:auto}
.glimf__tx li{text-align:left}

/* ── What CLEO actually does ───────────────────────────────────
   One spacious paragraph, then a disclosure. The visitor has just watched a
   concept film; the next thing they need is what it is FOR, not a list. */
#second-brain{display:flex;align-items:center;background-color:var(--ink);
  background-image:radial-gradient(110% 80% at 30% 28%, rgba(192,143,60,.13), transparent 62%)}
.expl{width:100%;padding:clamp(84px,13vh,132px) var(--gutter) clamp(72px,11vh,112px)}
.expl__in{max-width:none;margin:0 auto;max-width:min(70ch,100%)}
.expl__h{margin:0 0 26px;max-width:22ch;font-size:clamp(28px,3.2vw,44px);line-height:1.14}
.expl__b{margin:0;font-size:clamp(17.5px,1.45vw,21px);line-height:1.66;
  color:rgba(244,239,231,.88);max-width:62ch}
.expl__status{margin:30px 0 0;font-family:var(--f-meta);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(244,239,231,.5);display:flex;align-items:center;gap:9px}

/* The deeper explanation: prose with the job names lifted out. Not cards, not
   icons, not five equal boxes — a grid of tiles would answer a different
   question than the one the visitor is asking. */
.deep{margin-top:34px}
.deep__more{display:inline-flex;align-items:baseline;gap:12px;cursor:pointer;padding:12px 0;
  font-family:var(--f-ui);font-size:clamp(16px,1.25vw,18px);color:var(--brass-hi);
  border-bottom:1px solid rgba(192,143,60,.34);transition:border-color .3s ease}
.deep__more::-webkit-details-marker{display:none}
.deep__more::marker{content:""}
.deep__more:hover,.deep__more:focus-visible{border-color:var(--brass-hi)}
.deep__arrow{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.deep__more:hover .deep__arrow{transform:translateX(5px)}
.deep[open] .deep__arrow{transform:rotate(90deg)}
.deep__body{padding-top:30px;max-width:64ch}
.deep__h{margin:0 0 14px;font-family:var(--f-display);font-weight:500;
  font-size:clamp(21px,2vw,28px);line-height:1.2;color:var(--ivory)}
.deep__lead{margin:0 0 26px;font-size:clamp(16.5px,1.3vw,19px);line-height:1.62;
  color:rgba(244,239,231,.84)}
.deep__roles{list-style:none;margin:0 0 26px;padding:0;
  border-top:1px solid var(--rule)}
.deep__role{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:8px 26px;
  padding:15px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.deep__job{font-family:var(--f-voice);font-style:italic;font-size:clamp(17px,1.4vw,20px);
  color:var(--brass-hi);line-height:1.3}
.deep__when{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.56;color:rgba(244,239,231,.82)}
.deep__close{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.62;
  color:rgba(244,239,231,.86)}

/* ── Mobile art direction ──────────────────────────────────────
   Not scaled-down desktop. A portrait phone covering a 16:9 frame shows about
   the middle quarter and hides most of the panels — the whole reason for the
   scene — so the frame is FITTED, the conversation sits under it in the ink
   rather than over her, and the copy follows. */
@media (max-width:820px), (max-aspect-ratio:4/5){
  .glimf{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
    gap:clamp(16px,2.6vh,26px);padding:clamp(52px,8vh,78px) 0 clamp(34px,5vh,56px)}
  .glimf__stage{position:relative;inset:auto;width:100%;display:flex;flex-direction:column;
    gap:clamp(14px,2.4vh,22px);flex:0 0 auto}
  .glimf__film{position:relative;inset:auto;width:100%;aspect-ratio:16/9;flex:0 0 auto}
  .glimf__v,.glimf__film img{position:absolute;inset:0}
  .glimf__scrim{background:linear-gradient(180deg, rgba(23,19,16,.58) 0%, transparent 22%)}
  .vinfo{top:10px;left:12px;right:12px;max-width:none}
  /* A real touch target, not a scaled-down desktop chip. */
  .vinfo__btn{font-size:13.5px;padding:11px 15px 11px 9px;min-height:46px}
  .vinfo__x{min-height:44px;display:inline-flex;align-items:center}
  /* Under the frame, never over her face. */
  .convo{position:static;padding:0 var(--gutter);margin:0}
  .convo__list{gap:8px;max-width:100%}
  .bub{max-width:min(30ch,86%);padding:11px 15px}
  .bub__say{font-size:15.5px}
  .fin{position:static;align-items:flex-start;text-align:left;gap:2px;
    height:0;overflow:hidden;opacity:0;visibility:hidden}
  .convo.is-final .fin{height:auto;overflow:visible;opacity:1;visibility:visible}
  .convo.is-final .convo__list{display:none}
  .fin__l{font-size:clamp(21px,6vw,28px);line-height:1.2}
  .glimf__copy{position:static;max-width:none;padding:0 var(--gutter);text-align:left;
    margin-top:clamp(14px,2.4vh,22px)}
  /* Stacked, the copy sits BELOW the payoff instead of competing with it, so
     stepping it back would only leave a hole. */
  .glimf.is-final .glimf__copy{opacity:1;transform:none}
  .glimf__copy::before{display:none}
  .glimf__tx{margin-left:0}
  .glimf__cue{font-size:15px}
  .glimf__h{max-width:none;font-size:clamp(23px,6.2vw,30px);line-height:1.16}
  .expl{padding:clamp(64px,9vh,92px) var(--gutter) clamp(56px,8vh,80px)}
  .expl__b{font-size:17px}
  .deep__more{padding:14px 0;font-size:16.5px}
  .deep__role{grid-template-columns:minmax(0,1fr);gap:3px;padding:13px 0}
}

/* Reduced motion: the whole conversation and the closing statement are
   present at once, understandable without any playback. */
@media (prefers-reduced-motion: reduce){
  .bub{opacity:1;transform:none;transition:none}
  .convo__list{opacity:1;transform:none;transition:none}
  .fin{position:static;opacity:1;visibility:visible;transition:none;
    align-items:flex-start;text-align:left;margin-top:16px;height:auto;overflow:visible}
  .fin__l{opacity:1;transform:none;transition:none}
  .convo.is-final .convo__list{display:flex;opacity:1;transform:none}
  .convo{position:static;padding:0 var(--gutter);margin-top:18px}
  .convo__list{max-width:100%}
}