/* ===========================================================================
   HOMALABS — direction, built to the reference
   Measured from the reference capture (1510 x 941 CSS px) and expressed in
   viewport units so it holds at every width.

   ONE family throughout, as the reference does: headline, body, labels and
   rail are the same neo-grotesque. Archivo is variable in width, so the
   normal-width semibold matches the reference's headline face while the
   wide/heavy axis carries the wordmark and the giant background words.
   =========================================================================== */

:root {
  --paper: #EFEEE8;  --paper-lift: #F7F6F1;  --board: #E1E0D7;
  --ink:   #14140F;  --mute: #6F7266;
  --indigo:#6E71E8;  --violet: #A97FC4;  --coral: #FB8B73;
  --indigo-deep: #4F52DA;   /* the palette's indigo darkened for text (--link) */
  --grad: linear-gradient(165deg, var(--indigo) 0%, var(--violet) 48%, var(--coral) 100%);

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --m:  clamp(20px, 4.57vw, 96px);           /* side margin: 69px @ 1510 */

  --h:  clamp(2.4rem, 5.76vw, 6.2rem);       /* headline: 87px @ 1510 */
  --b:  clamp(15px, 1.13vw, 19px);           /* body: 17px */
  --l:  clamp(11px, .86vw, 14px);            /* label: 13px */
  --c:  clamp(11px, .9vw, 14px);             /* cue: 13.5px */
  --col: clamp(260px, 19.9vw, 360px);        /* body column: 300px */

  --ease: cubic-bezier(.16,.84,.28,1);
  --snap: cubic-bezier(.2,.9,.24,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body.dr {
  margin: 0; background: var(--ink); color: var(--paper);
  font-family: var(--f); font-variation-settings: "wdth" 100;
  font-size: var(--b); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, ol { margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =================================== CHROME ============================== */
/* The chrome takes an explicit colour per scene. Difference blending looked
   like a shortcut but it returns the COMPLEMENT of the ground — on indigo
   that is olive-yellow — where the reference keeps its chrome plain white on
   dark and blue scenes and ink on the light ones. */
.dr { --chrome: var(--paper); }
.dr[data-on="3"], .dr[data-on="4"], .dr[data-on="8"] { --chrome: var(--ink); }
.dr[data-on="8"][data-tone6="ink"], .dr[data-on="8"][data-tone6="indigo"] { --chrome: var(--paper); }
/* Scenes 00 and 07 put a paper-coloured giant word under the rail, so a paper
   label vanishes where it crosses a letter. On black and cream only,
   difference blending is exactly right — it flips to ink over the letter and
   back to paper over the ground. (On coloured grounds it returns the
   complement, which is why it is not used anywhere else.) */
.dr[data-on="0"] .dr-rail, .dr[data-on="9"] .dr-rail { color: #fff; mix-blend-mode: difference; }
.dr-mark {
  position: fixed; z-index: 80; left: var(--m); top: clamp(20px, 3.2vh, 34px);
  display: flex; align-items: center; gap: .42em;
  font-weight: 800; font-variation-settings: "wdth" 125;
  font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -0.02em; line-height: 1;
  color: var(--chrome);
  transition: color .5s var(--ease);
}

.dr-mark img { width: 1.25em; height: 1.25em; border-radius: 24%; }
.dr-links { position: fixed; z-index: 80; right: var(--m); top: clamp(16px, 2.9vh, 30px);
  display: flex; align-items: center; gap: clamp(18px, 1.8vw, 30px);
  font-weight: 600; font-size: clamp(13px, .92vw, 15px); letter-spacing: -0.005em; color: var(--chrome);
  transition: color .5s var(--ease); }
.dr-links a { position: relative; padding: 6px 0; }
.dr-links a:not(.dr-go)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px;
  background: currentColor; scale: 0 1; transform-origin: left; transition: scale .35s var(--ease); }
.dr-links a:not(.dr-go):hover::after { scale: 1 1; }
.dr-go { padding: 7px 16px !important; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; transition: background .25s var(--ease); }
.dr-go:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
/* scrolling down tucks the chrome away; any scroll up brings it back */
.dr-mark, .dr-links, .dr-menu { transition: color .5s var(--ease), translate .45s var(--ease), opacity .3s var(--ease); }
.dr.is-tucked .dr-mark, .dr.is-tucked .dr-links, .dr.is-tucked .dr-menu { translate: 0 -180%; opacity: 0; }
.dr-menu { display: none !important; }
@media (max-width: 860px) { .dr-links { display: none; } .dr-menu { display: flex !important; } }

/* The reference's top-right glyph is four bars. Here it opens the nav —
   the reference has none, and a studio site needs one. */
.dr-menu {
  position: fixed; z-index: 80; right: var(--m); top: clamp(22px, 3.4vh, 36px);
  display: flex; align-items: flex-end; gap: 3px; height: 14px; padding: 4px 0;
  color: var(--chrome);
  transition: color .5s var(--ease);
}
.dr-menu i { width: 2.5px; background: currentColor; border-radius: 1px; transition: height .35s var(--snap); }
.dr-menu i:nth-child(1) { height: 7px; }  .dr-menu i:nth-child(2) { height: 14px; }
.dr-menu i:nth-child(3) { height: 10px; } .dr-menu i:nth-child(4) { height: 14px; }
.dr-menu:hover i:nth-child(odd) { height: 14px; }
.dr-menu[aria-expanded="true"] i { height: 14px; }

.dr-nav {
  position: fixed; z-index: 79; top: clamp(52px, 7vh, 72px); right: var(--m);
  display: grid; gap: 4px; text-align: right;
}
.dr-nav[hidden] { display: none; }
.dr-nav a {
  font-weight: 600; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.02em; line-height: 1.15;
  color: var(--chrome);
  transition: color .5s var(--ease);
}

/* Eight ticks flush to the right edge, 24px long, 33.5px apart; the live one
   becomes a 50px line with its label 14px to the left. */
.dr-rail {
  position: fixed; z-index: 80; right: 0; top: 50%; translate: 0 -50%;
  list-style: none; padding: 0; display: grid; gap: clamp(26px, 3.56vh, 38px);
  color: var(--chrome); transition: color .5s var(--ease); pointer-events: none;
}
.dr-rail li { position: relative; height: 1.5px; display: flex; justify-content: flex-end; }
.dr-rail li::after {
  content: ""; width: 24px; height: 1.5px; background: currentColor; opacity: .5;
  transition: width .45s var(--snap), opacity .3s var(--ease);
}
.dr-rail li span {
  position: absolute; right: 64px; top: 50%; translate: 0 -50%;
  font-weight: 600; font-size: clamp(10px, .73vw, 12px);
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity .3s var(--ease);
}
.dr-rail li.is-on::after { width: 50px; opacity: 1; }
.dr-rail li.is-on span { opacity: 1; }

/* ============================ THE HELD SUBJECT =========================== */
/* A real iPhone 16 Pro frame (natural titanium, 629x1304). The screen sits in
   the frame's measured cutout — x 25, y 23, w 579, h 1259, corner 69 — and the
   frame paints on top, so the Dynamic Island and bezel are the frame's own.
   Height-led: the reference's bottle stands about 74% of the viewport tall. */
.ph {
  position: fixed; z-index: 3; pointer-events: none;
  left: var(--sx, 50%); top: var(--sy, 47%);
  height: var(--sh, 72vh); aspect-ratio: 629 / 1304;
  translate: -50% -50%; rotate: var(--sr, 0deg);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.32)) drop-shadow(0 6px 14px rgba(0,0,0,.18));
  transition: left .9s var(--ease), top .9s var(--ease), height .9s var(--ease), rotate .9s var(--ease);
}
.ph-in {
  position: absolute; left: 3.975%; top: 1.764%; width: 92.05%; height: 96.55%;
  border-radius: 11.92% / 5.48%; overflow: hidden; background: #fff;
}
.ph-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ph-scr {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter .6s var(--ease), opacity .6s var(--ease), clip-path .2s linear;
}

/* --- AUDIT: numbered pins on real interface elements -------------------- */
.ph-pins { position: absolute; inset: 0; }
.ph-pins .f {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  width: 8.5%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coral); color: var(--ink);
  font-weight: 700; font-size: clamp(9px, .8vh, 12px); line-height: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 30%, transparent), 0 4px 10px rgba(0,0,0,.2);
  scale: 0; transition: scale .45s var(--snap);
}
.ph-pins .f.is-on, .ph.is-audit .ph-pins .f { scale: 1; }

/* --- TEST: tap rings where testers hesitated (scene 05) ---------------- */
/* Not bubbles. These are touch markers — what a usability session actually
   produces. Each one carries what happened there; tap it to resolve it. */


/* scene 04 holds a laptop: the phone steps out */
.ph { transition-property: left, top, height, rotate, opacity, scale; }
.ph.is-away { opacity: 0; scale: .9; }

/* where the phone stands in each scene */
.dr[data-on="0"] .ph { --sx: 50%; --sy: 47%; --sh: 72vh; }
.dr[data-on="1"] .ph { --sx: 64%; --sy: 50%; --sh: 70vh; --sr: -3deg; }
.dr[data-on="2"] .ph { --sx: 62%; --sy: 55%; --sh: 66vh; --sr: 4deg; }
.dr[data-on="3"] .ph { --sx: 59%; --sy: 47%; --sh: 66vh; }
.dr[data-on="5"] .ph { --sx: 67%; --sy: 50%; --sh: 68vh; --sr: -2deg; }
.dr[data-on="4"] .ph { --sx: 59%; --sy: 50%; --sh: 66vh; --sr: -4deg; }
.dr[data-on="6"] .ph { --sx: 77%; --sy: 63%; --sh: 58vh; --sr: -2deg; }   /* low, so the guest's face stays clear above it */
.dr[data-on="7"] .ph { --sx: 74%; --sy: 52%; --sh: 60vh; --sr: 3deg; }
.dr[data-on="8"] .ph { --sx: 71%; --sy: 48%; --sh: 68vh; --sr: 3deg; }
.dr[data-on="9"] .ph { --sx: 50%; --sy: 34%; --sh: 44vh; }
/* the closing line has to read in full, so on short laptops the phone gives way */
@media (min-width: 861px) and (max-height: 820px) { .dr[data-on="9"] .ph { --sy: 33%; --sh: 39vh; } }

/* ================================= SCENES ================================ */
.s { position: relative; isolation: isolate; overflow: clip; min-height: 100svh; }   /* clip, not hidden: hidden breaks the sticky pin in 01 */
.s-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }

.col { position: absolute; z-index: 4; left: var(--m); display: grid; justify-items: start; }

/* — 03 — THE LID: a 34px rule, the number, an em dash, the title */
/* The reference's label is a rule, the number, a separator, the title. The
   separator is DRAWN here, not typed: it matches the reference exactly, but
   there is no dash character in the copy and a screen reader does not read
   one out. */
.lab {
  display: flex; align-items: center; gap: 14px;
  font-weight: 600; font-size: var(--l); letter-spacing: .22em; text-transform: uppercase; line-height: 1;
}
.lab::before { content: ""; width: clamp(24px, 2.25vw, 40px); height: 1.5px; background: currentColor; }
.lab b { font-weight: 600; display: inline-flex; align-items: center; gap: 14px; }
.lab b::after { content: ""; width: .9em; height: 1.5px; background: currentColor; }
.lab-sub { margin-top: clamp(22px, 3.4vh, 34px); }
.lab-sub::before { display: none; }

/* the full sentence behind the picked stage, in her words */
.picked { margin-top: 14px; font-weight: 500; min-height: 1.55em; }

.head {
  margin-top: clamp(14px, 2.2vh, 24px);
  font-weight: 600; font-variation-settings: "wdth" 100;
  font-size: var(--h); line-height: .95; letter-spacing: -0.03em;
}
/* dim, but still readable: 3:1 is the floor for large text */
.dim { opacity: .66; }

.body { margin-top: clamp(16px, 2.6vh, 28px); max-width: var(--col); font-weight: 400; }
.pull { margin-top: clamp(16px, 2.6vh, 28px); font-weight: 500; opacity: .62; }

.cue {
  margin-top: clamp(16px, 2.3vh, 24px);
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase; line-height: 1;
}
.cue-bar::before { content: ""; width: 1.5px; height: 1.6em; background: currentColor; opacity: .6; }
.cue-link i { font-style: normal; transition: translate .35s var(--snap); }
.cue-link:hover i { translate: 5px 0; }

/* the giant background element — behind everything, cropped by the scene */
.giant {
  position: absolute; z-index: 1; pointer-events: none; user-select: none;
  font-weight: 800; line-height: .8; letter-spacing: -0.04em; white-space: nowrap;
}

/* ---- 00 · intro --------------------------------------------------------- */
/* Reference: HOLD across the full width, cropped both edges, from 21% to 64%
   of the height; "everything." large at the bottom right. */
.s0 { height: 240svh; background: var(--ink); color: var(--paper); }
.g0 {
  left: 50%; top: 42%; translate: -50% -50%;
  font-variation-settings: "wdth" 112; font-size: 33vw; color: var(--paper);
  transition: opacity .25s var(--ease);
}
.g0.is-swap { opacity: 0; }
.g0-tail {
  position: absolute; z-index: 5; right: var(--m); bottom: 6vh;
  font-weight: 600; font-size: clamp(2.6rem, 7.6vw, 8.4rem); line-height: .9; letter-spacing: -0.04em;
}
.s0 .col-bl { bottom: 6.5vh; }

/* ---- 01 · design: text block sits on the vertical middle ---------------- */
.s1 { height: 240svh; background: var(--ink); color: var(--paper); }
.col-mid { top: 31vh; }   /* three-line headline: lifted so the cue lands at the reference's 93% */
.s1 .body { opacity: .82; }

/* ---- 02 · build: text top-left, giant glyph bottom-left ----------------- */
/* The deep indigo, not the mid one: paper on #6E71E8 is only 3.48:1, below
   the 4.5 body text needs. The reference's blue scene is deep for the same reason. */
.s2 { background: var(--indigo-deep); color: var(--paper); }
.col-tl { top: 13.4vh; }
.s2 .head { font-size: calc(var(--h) * .82); }
.aside {
  position: absolute; z-index: 4;
  font-weight: 600; font-size: clamp(1.4rem, 2.7vw, 3rem); line-height: .98; letter-spacing: -0.03em;
}
.aside-tr { right: calc(var(--m) + 2vw); top: 13vh; text-align: right; }
/* code characters rise, the way the reference's bubbles do */
/* ---- 03 · audit: giant count top-left, text bottom-left ----------------- */
.s3 { background: var(--paper); color: var(--ink); }
.s3 .col-bl { bottom: 8.5vh; }

/* The scan. A coral dot on a rail across the held screen; drag it and the
   line sweeps the screen, flagging every finding it crosses. */
.scan { position: absolute; z-index: 6; left: 48.5%; right: 30.5%; top: 86vh; height: 40px; touch-action: none; }
.scan::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px;
  background: color-mix(in srgb, var(--ink) 22%, transparent); }
.scan-line { position: absolute; left: var(--sxp, 0%); bottom: 50%; width: 1.5px; height: 70vh;
  background: var(--coral); opacity: .55; }
.scan-dot { position: absolute; left: var(--sxp, 0%); top: 50%; translate: -50% -50%;
  width: 26px; height: 26px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--coral) 24%, transparent); cursor: grab; }
.scan-dot:active { cursor: grabbing; }
.scan-dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
/* ---- 04 · test: a usability session on the real screen ------------------ */
.ph-test { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
.ph.is-test .ph-test { opacity: 1; }
.pt-rec { position: absolute; left: 50%; top: 9.6%; translate: -50% 0; margin: 0; display: flex; align-items: center; gap: 1.6cqw;
  padding: 1.4cqw 3.2cqw; border-radius: 999px; background: rgba(20,20,15,.82); color: #fff; font-size: 3.2cqw; font-weight: 600; white-space: nowrap; }
.pt-rec i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #FF453A; animation: rec 1.2s steps(1) infinite; }
@keyframes rec { 50% { opacity: .25; } }
.pt-task { position: absolute; left: 6%; right: 6%; bottom: 2.4%; margin: 0; padding: 2.6cqw 3.4cqw; border-radius: 3cqw;
  background: var(--ink); color: var(--paper); font-size: 3.4cqw; font-weight: 600; text-align: center; }
/* the finger: where the tester is, and a ring when they tap */
.pt-finger { position: absolute; left: 64%; top: 110%; width: 10cqw; height: 10cqw; translate: -50% -50%; border-radius: 50%;
  background: rgba(20,20,15,.22); box-shadow: 0 0 0 .6cqw rgba(255,255,255,.9), 0 2cqw 5cqw rgba(0,0,0,.25);
  transition: left 1s var(--ease), top 1s var(--ease); }
.pt-finger::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; border: .6cqw solid var(--coral); opacity: 0; }
.ph-test.is-tap .pt-finger::after { animation: tapring .6s var(--ease); }
@keyframes tapring { from { opacity: 1; scale: .4; } to { opacity: 0; scale: 1.1; } }
/* the pins: what happened there, in her words */
.pt-pin { position: absolute; left: var(--x); top: var(--y); width: 4cqw; height: 4cqw; translate: -50% -50%; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 .8cqw rgba(251,139,115,.35); animation: pinIn .4s var(--snap); }
.pt-pin span { position: absolute; left: 50%; bottom: calc(100% + 1.6cqw); translate: -50% 0; white-space: nowrap;
  padding: 1.2cqw 2.4cqw; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 3cqw; font-weight: 600; }
@keyframes pinIn { from { scale: 0; } }
.pt-pin.is-left span { left: -1cqw; translate: 0 0; }
/* the saved state, drawn over the real bookmark and its count */
.pt-count { position: absolute; left: 23.4%; top: 71.3%; width: 8%; height: 2.7%; padding-left: .6%; background: #fff;
  font-size: 3.26cqw; font-weight: 600; line-height: 1.3; color: #15151A; opacity: 0; }
.pt-bm { position: absolute; left: 19%; top: 71.6%; width: 3.2%; fill: #15151A; opacity: 0; }
.ph-test.is-saved .pt-count, .ph-test.is-saved .pt-bm { opacity: 1; }
/* round 2: the change we made, a label on the bookmark */
.pt-change { position: absolute; left: 20.4%; top: 67.6%; translate: -50% 0; padding: .9cqw 2.4cqw; border-radius: 999px;
  background: var(--indigo); color: #fff; font-size: 3cqw; font-weight: 700; opacity: 0; scale: .8; transition: opacity .4s var(--ease), scale .4s var(--snap); }
.ph-test.is-changed .pt-change { opacity: 1; scale: 1; }
/* take it yourself: the bookmark is a real button while the scene is up */
.pt-try { position: absolute; z-index: 6; left: 16.5%; top: 70.2%; width: 8%; height: 5%; border-radius: 30%;
  pointer-events: none; cursor: pointer; }
.ph.is-test .pt-try { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .pt-rec i, .pt-pin { animation: none; } .pt-finger { transition: none; } }

/* ---- 05 · work: the held object becomes a laptop ------------------------ */
/* Work is web, so the phone steps out and a MacBook takes the stage. The lid
   is drawn and the screens are real, with nothing laid over them. */
.s5 { height: 220svh; background: var(--ink); color: var(--paper); }
.col-ml { top: 33.5vh; }
.segs { display: flex; gap: 8px; margin-top: 14px; }
.seg { width: 26px; height: 3px; border-radius: 2px; background: currentColor; opacity: .35;
  transition: width .4s var(--snap), opacity .3s var(--ease); }
.seg.is-on { width: 44px; opacity: 1; }
.s5 .head { font-size: calc(var(--h) * .74); }
.p-name { margin: 18px 0 -4px; font-weight: 600; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.p-links { display: flex; gap: 28px; margin: 0; }

.mac { position: absolute; z-index: 2; margin: 0; right: 12vw; top: 50%; width: 38vw; translate: 0 -50%; }
/* 05 scrolls through the projects: the laptop turns and rises a little as it goes */
#mac { transform: perspective(1600px) rotateY(calc((var(--mp, .5) - .5) * -18deg)) translateY(calc((var(--mp, .5) - .5) * -5vh)); }
.mac-lid { position: relative; padding: 2.3% 2.3% 3.1%; background: #0c0c0e; border-radius: 3.6% / 5.4%;
  box-shadow: inset 0 0 0 1px #2c2c30, 0 0 0 1.5px #9fa1a6, 0 30px 60px rgba(0,0,0,.45); }
.mac-scr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .5%; background: #000; }
.mac-scr::after { content: ""; position: absolute; z-index: 3; left: 50%; top: 0; width: 9.5%; height: 2.6%;
  translate: -50% 0; background: #0c0c0e; border-radius: 0 0 9px 9px; }
.mac-base { position: relative; width: 116%; margin-left: -8%; aspect-ratio: 116 / 2.7;
  background: linear-gradient(#e4e5e8 0%, #c3c5c9 45%, #8d8f94 100%); border-radius: 0 0 14% 14% / 0 0 100% 100%;
  box-shadow: 0 18px 30px rgba(0,0,0,.45); }
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 13%; height: 48%; translate: -50% 0;
  background: linear-gradient(#a7a9ad, #c9cbcf); border-radius: 0 0 10px 10px; }
/* the next project wipes across the screen from the right */
.mac-shot { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path .9s var(--ease); }
.mac-shot.is-on { z-index: 1; clip-path: inset(0 0 0 0); }
.mac-lid { transform-origin: 50% 100%; }
.mac.is-nod .mac-lid { animation: nod .9s var(--ease); }
@keyframes nod { 35% { transform: perspective(1400px) rotateX(9deg); } }
.s5 .col > .p-name, .s5 .col > .head, .s5 .col > .body { transition: opacity .3s var(--ease), translate .5s var(--ease); }
.s5 .col > .head { transition-delay: .05s; } .s5 .col > .body { transition-delay: .1s; }
.s5 .col.is-swap > .p-name, .s5 .col.is-swap > .head, .s5 .col.is-swap > .body { opacity: 0; translate: 0 18px; transition-delay: 0s; }
.mac-tags span { animation: tagIn .5s var(--snap) both; animation-delay: calc(var(--k, 0) * 70ms + .25s); }
@keyframes tagIn { from { opacity: 0; translate: 0 10px; } }
.mac-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.mac-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 5.5%; }
.mac-tags span { padding: 6px 13px; border-radius: 999px; font-size: clamp(11px, .8vw, 13px); font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 32%, transparent); color: color-mix(in srgb, var(--paper) 78%, transparent); }
.mac-tags span.is-on { background: var(--paper); color: var(--ink); box-shadow: none; }

/* the bars fill while a project is up, then the next one comes in */
.seg { position: relative; overflow: hidden; opacity: 1 !important; background: color-mix(in srgb, currentColor 32%, transparent); }
.seg::after { content: ""; position: absolute; inset: 0; background: currentColor; scale: 0 1; transform-origin: left; }
.seg.is-on::after { scale: 1 1; }
.seg.is-run::after { animation: segfill 7s linear both; }
@keyframes segfill { from { scale: 0 1; } to { scale: 1 1; } }


/* intake: the button takes the scene's own two colours, so it reads on every tone */
.intake-go { margin-top: clamp(16px, 2.6vh, 26px); background: var(--fg); color: var(--bg); }
.intake-go:hover { background: var(--grad); color: var(--ink); }

/* ---- 06 · Homa Pod: the room, the shorts, the episodes ------------------- */
.s6 { height: 240svh; background: var(--ink); color: var(--paper); }
.room { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.room video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block;
  scale: calc(1.06 - var(--pz, 0) * .06); transform-origin: 50% 20%; }
.room::after { content: ""; position: absolute; inset: 0;
  /* faces stay clear up top; the copy sits on the dark floor of the frame */
  background: linear-gradient(0deg, rgba(20,20,15,.94) 0%, rgba(20,20,15,.78) 30%, rgba(20,20,15,.2) 58%, rgba(20,20,15,.28) 100%); }
.s6 .col-bl { bottom: 6vh; }
.s6 .head { font-size: calc(var(--h) * .8); }
.ph-vid { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000;
  opacity: 0; transition: opacity .5s var(--ease); }
.ph.is-video .ph-vid { opacity: 1; }
.eps { display: flex; gap: 10px; margin: clamp(14px, 2.4vh, 24px) 0 clamp(10px, 1.6vh, 16px); }
.ep { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; width: clamp(110px, 8.6vw, 150px);
  padding: 6px; border-radius: 12px; text-align: left; color: var(--paper);
  background: color-mix(in srgb, var(--paper) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 22%, transparent);
  transition: background .3s var(--ease), box-shadow .3s var(--ease); cursor: pointer; }
.ep img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 7px;
  filter: saturate(.7) brightness(.8); transition: filter .3s var(--ease); }
.ep b { font-size: 11px; letter-spacing: .1em; opacity: .7; }
.ep span { font-size: 12px; font-weight: 600; line-height: 1.2; }
.ep.is-on { background: var(--paper); color: var(--ink); box-shadow: none; }
.ep.is-on img, .ep:hover img { filter: none; }

/* ---- 07 · Initiatives: the roadmap slides past ---------------------------- */
.s7 { height: 260svh; background: var(--indigo-deep); color: var(--paper); }
.s7 .col-bl { bottom: 7vh; }
.s7 .head { font-size: calc(var(--h) * .8); }
.s7 .body + .body { margin-top: .2em; }
.track { position: absolute; left: 0; right: 0; top: 11vh; overflow: hidden; pointer-events: none; }
.tk-run { display: flex; gap: 7vw; width: max-content; padding: 0 var(--m);
  translate: calc(var(--tk, 0) * -1 * (100% - 100vw)) 0; border-top: 1.5px solid color-mix(in srgb, var(--paper) 40%, transparent); }
.tk-stop { position: relative; padding-top: 2.6vh; }
.tk-stop::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; translate: -1px -50%;
  border-radius: 50%; background: var(--indigo-deep); box-shadow: inset 0 0 0 1.5px var(--paper); }
.tk-stop.is-now::before { background: var(--coral); box-shadow: 0 0 0 6px color-mix(in srgb, var(--coral) 30%, transparent); }
.tk-tag { margin: 0 0 1.2vh; font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase; }
.tk-tag span { margin-left: 1em; font-weight: 500; letter-spacing: .06em; opacity: .7; }
.tk-word { margin: 0; font-weight: 800; font-variation-settings: "wdth" 125; font-size: 12vw; line-height: .86;
  letter-spacing: -0.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--paper) 70%, transparent); }
.tk-stop.is-now .tk-word { color: var(--paper); -webkit-text-stroke: 0; }

/* ---- 09 · start: the phone ends on Homalabs, the button on its screen ---- */
.ph-end { position: absolute; z-index: 5; inset: 0; display: grid; justify-items: center; align-content: center;
  padding: 0 10cqw; background: var(--paper-lift); color: var(--ink); text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.pe-mark { width: 30cqw; height: auto; border-radius: 22%; box-shadow: 0 4cqw 9cqw rgba(110,113,232,.35); }
.pe-word { margin: 6cqw 0 0; font-weight: 800; font-variation-settings: "wdth" 125; font-size: 13cqw; letter-spacing: -0.05em; line-height: 1; }
.pe-kick { margin: 3cqw 0 0; font-size: 3.6cqw; font-weight: 500; color: var(--mute); }
.pe-go { position: absolute; left: 8cqw; right: 8cqw; bottom: 9cqw; display: flex; align-items: center; justify-content: center; gap: 2.4cqw;
  padding: 4.6cqw 0; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 4.6cqw; letter-spacing: -0.01em; pointer-events: auto; transition: background .25s var(--ease); }
.pe-go i { font-style: normal; transition: translate .35s var(--snap); }
.pe-go:hover { background: var(--indigo-deep); }
.pe-go:hover i { translate: 1.4cqw 0; }
.pe-go:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.ph.is-end .ph-end { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }

/* the cascade in 07: --cg runs 0 to 4, one generation of marks at a time,
   each preceded by the lines that lead to it */
.cascade7 { position: absolute; z-index: 2; right: 13vw; top: 42vh; width: 44vw; pointer-events: none; }
.cascade7 svg { display: block; width: 100%; height: auto; overflow: visible; }
.cascade7 .seed-link { fill: none; stroke: var(--paper); stroke-width: 1.5; opacity: .4; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; }
.cascade7 .sl1 { stroke-dashoffset: calc(1 - clamp(0, (var(--cg, 4) - .6) * 2.5, 1)); }
.cascade7 .sl2 { stroke-dashoffset: calc(1 - clamp(0, (var(--cg, 4) - 1.6) * 2.5, 1)); }
.cascade7 .sl3 { stroke-dashoffset: calc(1 - clamp(0, (var(--cg, 4) - 2.6) * 2.5, 1)); }
.cascade7 .sg0 { opacity: calc(var(--o) * clamp(0, var(--cg, 4) * 2, 1)); }
.cascade7 .sg1 { opacity: calc(var(--o) * clamp(0, (var(--cg, 4) - 1) * 2, 1)); }
.cascade7 .sg2 { opacity: calc(var(--o) * clamp(0, (var(--cg, 4) - 2) * 2, 1)); }
.cascade7 .sg3 { opacity: calc(var(--o) * clamp(0, (var(--cg, 4) - 3) * 2, 1)); }

/* ---- 08 · intake: the phone becomes a message to the studio -------------- */
.ph-mail { position: absolute; z-index: 4; inset: 0; padding: 26cqw 6cqw 0; background: #F2F2F7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #111;
  font-size: 4.4cqw; opacity: 0; transition: opacity .45s var(--ease); }
.ph-mail::before { content: ""; position: absolute; inset: 20cqw 0 0; background: #fff; border-radius: 6cqw 6cqw 0 0;
  box-shadow: 0 -1px 0 rgba(0,0,0,.06); }
.ph-mail p { position: relative; margin: 0; }
.pm-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 5cqw; }
.pm-bar span { color: #0A84FF; }
.pm-bar b { font-weight: 600; font-size: 4.8cqw; }
.pm-bar i { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--indigo); }
.pm-bar i::after { content: ""; display: block; width: 2.4cqw; height: 2.4cqw; margin: 3.2cqw auto 0;
  border-left: .7cqw solid #fff; border-top: .7cqw solid #fff; rotate: 45deg; }
.pm-row { padding: 3.4cqw 0; border-bottom: 1px solid #E3E3E8; }
.pm-row span { color: #8A8A8E; margin-right: 1.5cqw; }
.pm-row em { font-style: normal; }
.pm-body { padding-top: 5cqw; line-height: 1.45; }
.pm-caret { display: inline-block; width: .5cqw; height: 5cqw; margin-left: 1px; vertical-align: -1cqw; background: #0A84FF;
  animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ph.is-mail .ph-mail { opacity: 1; }


/* ---- 05 · test: ribbons, bubbles to pop, a running score --------------- */
.s4 { background: var(--coral); color: var(--ink); }
.ribbon { position: absolute; z-index: 2; left: -10vw; width: 120vw; overflow: hidden; pointer-events: none; }
.rb1 { top: 24vh; rotate: -7deg;   /* low enough that its high end clears the header */ background: var(--ink); color: var(--coral); padding: .5vh 0; }
.rb-run { display: flex; width: max-content; animation: run 34s linear infinite; }
.ribbon span { font-weight: 800; font-variation-settings: "wdth" 100; letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.6vw, 5rem); line-height: 1.05; white-space: nowrap; }
@keyframes run { to { translate: -50% 0; } }
.s4 .col-bl { bottom: 5vh; }
.s4 .head { font-size: calc(var(--h) * .86); }

/* ---- 06 · you: dots, a toggle, a giant outlined word -------------------- */
/* Each tone names its ground AND its ink. No currentColor anywhere — it
   resolves against the element's own colour, which made the outlined word
   stroke in transparent and the selected control match its own background. */
.s8 { --bg: var(--violet); --fg: var(--ink); background: var(--bg); color: var(--fg);
  transition: background .55s var(--ease), color .55s var(--ease); }
.s8[data-tone="indigo"] { --bg: var(--indigo); --fg: var(--paper); }
.s8[data-tone="violet"] { --bg: var(--violet); --fg: var(--ink); }
.s8[data-tone="coral"]  { --bg: var(--coral);  --fg: var(--ink); }
.s8[data-tone="ink"]    { --bg: var(--ink);    --fg: var(--paper); }
.s8[data-tone="paper"]  { --bg: var(--paper);  --fg: var(--ink); }
.s8[data-tone="board"]  { --bg: var(--board);  --fg: var(--ink); }
.s8 .col-ml { top: 24vh; }   /* twelve controls, not seven: lifted to keep clear air above the giant word */
.s8 .head { font-size: calc(var(--h) * .82); }
.dots { display: flex; gap: clamp(14px, 1.3vw, 22px); margin-top: clamp(20px, 3.2vh, 32px); }
.dot { display: grid; justify-items: center; gap: 10px; }
.dot i { width: clamp(40px, 3.6vw, 60px); aspect-ratio: 1; border-radius: 50%; display: block;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.14), inset 0 4px 8px rgba(255,255,255,.35);
  outline: 1.5px solid transparent; outline-offset: 4px; transition: outline-color .25s var(--ease), scale .3s var(--snap); }
.dot[data-tone="indigo"] i { background: var(--indigo); }
.dot[data-tone="violet"] i { background: var(--violet); }
.dot[data-tone="coral"]  i { background: var(--coral); }
.dot[data-tone="ink"]    i { background: var(--ink); }
.dot[data-tone="paper"]  i { background: var(--paper-lift); }
.dot[data-tone="board"]  i { background: var(--board); }
.dot:hover i { scale: 1.06; }
.dot[aria-pressed="true"] i { outline-color: var(--fg); }
.dot span { font-weight: 600; font-size: clamp(10px, .76vw, 12px); letter-spacing: .14em; text-transform: uppercase; }
.tog { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-width: 34rem; }
.tog button { padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: clamp(13px, .92vw, 15px);
  box-shadow: inset 0 0 0 1.5px var(--fg);
  transition: background .25s var(--ease), color .25s var(--ease); }
.tog button.is-on { background: var(--fg); color: var(--bg); }
.g6 { left: 50%; bottom: -11vh; translate: -50% 0; font-variation-settings: "wdth" 110;
  font-size: 22vw; color: transparent; -webkit-text-stroke: 1.5px var(--fg); opacity: .9; }

/* ---- 07 · start: the giant wordmark, the line, two buttons -------------- */
.s9 { background: var(--ink); color: var(--paper); }
.s9 .pe-bar { position: absolute; left: var(--m); right: var(--m); bottom: 0; margin: 0; z-index: 3; }
.s9 .col-c { bottom: calc(clamp(22px, 3.5vh, 36px) + 18px + 1px + clamp(28px, 4vh, 44px)); }
/* the whole name on screen, sized to leave room for the phone's gap */
.g7 { --gap: 27vh; left: 0; right: 0; top: calc(34vh - .42em); display: grid; grid-template-columns: 1fr 1fr; column-gap: 0;
  font-variation-settings: "wdth" 125; letter-spacing: -0.05em; color: var(--paper);
  /* the gap is centred on the phone, so "homa" (3.2em) sets the size */
  font-size: min(12vw, calc((46vw - var(--gap) / 2) / 3.2));
  transition: column-gap 1.1s var(--ease); }
.g7 span:first-child { justify-self: end; }
.g7 span:last-child { justify-self: start; }
.dr[data-on="9"] .g7 { column-gap: var(--gap); }
@media (min-width: 861px) and (max-height: 820px) { .g7 { --gap: 22vh; top: calc(33vh - .42em); } }
.mail-c { margin: .2em 0 0; font-size: var(--b); }
.mail-c a { font-weight: 600; border-bottom: 1.5px solid color-mix(in srgb, var(--paper) 40%, transparent); padding-bottom: 2px;
  transition: border-color .25s var(--ease); }
.mail-c a:hover { border-color: var(--coral); }
.col-c { left: 0; right: 0; bottom: 6vh; justify-items: center; text-align: center; }
.head-c { margin-top: 0; font-size: calc(var(--h) * .84); }
.body-c { max-width: 46ch; text-align: center; }
.ctas { display: flex; gap: 12px; margin-top: clamp(18px, 2.8vh, 28px); }
.cta { display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; border-radius: 999px;
  font-weight: 600; font-size: clamp(15px, 1.1vw, 18px); letter-spacing: -0.01em;
  transition: background .25s var(--ease), color .25s var(--ease); }
.cta i { font-style: normal; transition: translate .35s var(--snap); }
.cta:hover i { translate: 5px 0; }
.cta-fill { background: var(--paper); color: var(--ink); }
.cta-fill:hover { background: var(--grad); }
.cta-line { box-shadow: inset 0 0 0 1.5px currentColor; }
.cta-line:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }

/* =============================== smaller screens ========================= */
/* =============================== phones ==================================
   Stacked, not side by side: the phone stands smaller at the top and every
   scene's copy takes the lower half. The audit callouts would land off the
   right edge here, so the latest finding prints under the scan instead. */
.find-now { display: none; }
@media (max-width: 860px) {
  :root { --h: clamp(2rem, 9vw, 3rem); --b: 15px; }
  .dr-rail { display: none; }
  .ph { --sh: 35vh !important; --sx: 50% !important; --sy: 25% !important; --sr: 0deg !important; }
  .cmp-names, .ph-steps,   .ph-calls, .ph-leads { display: none; }

  .col, .col-mid, .col-tl, .col-ml, .col-bl { top: 49vh !important; bottom: auto !important; right: var(--m); }
  .head { margin-top: 10px; }
  .body { margin-top: 12px; }
  .cue { margin-top: 14px; }

  /* 00 */
  .g0 { top: 25%; }
  .g0-tail { top: 46vh; bottom: auto; left: var(--m); right: auto; font-size: 12.5vw; }
  .s0 .col-bl { top: auto !important; bottom: 6vh !important; }

  /* 02: her thesis line stays, under the copy */
  .aside-tr { right: auto; left: var(--m); top: auto; bottom: 5vh; text-align: left; font-size: 1.15rem; }

  /* 03: the scan spans the phone, the giant count steps aside */
    .scan { left: calc(50% - 8.6vh); right: calc(50% - 8.6vh); top: 44.5vh; }
  .scan-line { height: 35vh; }
  .s3 .col-bl { top: 50vh !important; }
  .s3 .pull { display: none; }
  .find-now { display: block; margin-top: 12px; font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--ink); min-height: 2.8em; }

  /* 05: the score joins the copy */
      .ribbon span { font-size: 1.6rem; }

  /* 06: twelve controls in the lower half */
  .s8 .col-ml { top: 12vh !important; }   /* the picks and the button need the whole screen here */
  .dots { flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; }
  .dot i { width: 34px; }
  .dot span { font-size: 9px; }
  .picked { margin-top: 8px; font-size: 13px; }
  .lab-sub { margin-top: 12px; }
  .tog { gap: 5px; }
  .tog button { padding: 7px 12px; font-size: 12px; }
  .g6 { font-size: 26vw; bottom: -4vh; }

  /* 07 */
  .g7 { top: 44vh; font-size: 15vw; display: flex; justify-content: center; }
  .dr[data-on="9"] .g7 { column-gap: 0; }   /* phones: the name sits whole under the phone */
  .col-c { bottom: 5vh; }
  .ctas { flex-wrap: wrap; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-run { animation: none !important; }
}

/* --- scene 02: the build stays connected to the design -------------------
   Left of the line is the design file, right of it is the built screen, and
   they line up box for box because the wireframe is measured off the real
   screen. Dragging the line is the proof: nothing jumps as it crosses.
   Region tops and heights are percentages of the measured screen. */
.ph-wire {
  position: absolute; inset: 0; z-index: 2; background: #fff;
  clip-path: inset(0 calc(100% - var(--cut, 50%)) 0 0);
  opacity: 0; transition: opacity .45s var(--ease);
}
.ph.is-compare .ph-wire, .ph.is-compare .cmp-line, .ph.is-compare .cmp-knob { opacity: 1; }
.ph.is-compare .cmp-knob { pointer-events: auto; }

.wf { position: absolute; left: 0; right: 0; }
/* the real words name every region now, so the region labels stay hidden */
.wf b { display: none; }
.wf b {
  position: absolute; left: 4%; top: 6px; z-index: 1;
  font-weight: 600; font-size: clamp(7px, .72vh, 10px); letter-spacing: .06em; text-transform: uppercase;
  color: var(--indigo);
}
.wf::after { content: ""; position: absolute; inset: 3px 2%;
  outline: 1.5px dashed color-mix(in srgb, var(--indigo) 55%, transparent); outline-offset: -1px;
  border-radius: 6px; pointer-events: none; }
.wf i { position: absolute; display: block; background: #E7E7EC; border-radius: 4px; }

.wf-band    { top: 0;      height: 15.37%; background: #EFEFF2; }
.wf-band::after { display: none; }
.wf-head    { top: 15.37%; height: 7.38%; }
.wf-panel   { top: 22.75%; height: 46.15%; }
.wf-actions { top: 70.5%;  height: 4.25%; }
.wf-text    { top: 75.25%; height: 8.75%; }
.wf-similar { top: 87.5%;  height: 12.5%; }

.wf-icon  { left: 3.5%; top: 22%; width: 6.7%; aspect-ratio: 1; border-radius: 8px !important; }
.wf-panel::before { content: ""; position: absolute; inset: 3px 1%; background: #F4F4F7; border-radius: 14px; }
.wf-chip  { top: 4.3%; height: 8.1%; width: 11.7%; border-radius: 10px !important; background: #fff !important; box-shadow: inset 0 0 0 1.5px #DCDCE2; }
.wf-tl    { left: 3.8%; }  .wf-tr { right: 3.3%; width: 16.8%; }
.wf-phone { left: 30.8%; right: 30.4%; top: 11.7%; bottom: 6.8%; border-radius: 22px !important;
  background: #fff !important; box-shadow: inset 0 0 0 1.5px #D2D2DA; }
.wf-arrows{ left: 3.8%; bottom: 6.1%; width: 9%; height: 19.4%; border-radius: 30px !important; background: #fff !important;
  box-shadow: inset 0 0 0 1.5px #DCDCE2; }
.wf-dot   { top: 31%; width: 3.5%; height: 38%; }
.wf-dot:nth-of-type(1) { left: 5.1%; } .wf-dot:nth-of-type(2) { left: 19.1%; }
.wf-dot:nth-of-type(3) { left: 34%; } .wf-dot:nth-of-type(4) { left: 42.7%; }
.wf-pill  { right: 6.6%; top: 7%; width: 19.4%; height: 88%; border-radius: 20px !important; background: #CFCFD6 !important; }
.wf-thumb { top: 42%; height: 58%; width: 27.2%; border-radius: 14px !important; background: #fff !important; box-shadow: inset 0 0 0 1.5px #DCDCE2; }
.wf-thumb:nth-of-type(1) { left: 3.8%; } .wf-thumb:nth-of-type(2) { left: 36.2%; } .wf-thumb:nth-of-type(3) { left: 68.5%; }

.cmp-line { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; translate: -50% 0;
  background: var(--indigo); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.cmp-knob {
  position: absolute; z-index: 4; left: var(--cut, 50%); top: 50%; translate: -50% -50%;
  width: 15%; aspect-ratio: 1; border-radius: 50%; background: var(--indigo);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--indigo) 25%, transparent), 0 6px 16px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; cursor: ew-resize; touch-action: none;
  transition: opacity .45s var(--ease);
}
.cmp-knob::before, .cmp-knob::after { content: ""; position: absolute; top: 50%; width: 22%; aspect-ratio: 1;
  border-top: 2px solid #fff; border-left: 2px solid #fff; }
.cmp-knob::before { left: 20%; translate: 0 -50%; rotate: -45deg; }
.cmp-knob::after  { right: 20%; translate: 0 -50%; rotate: 135deg; }
.cmp-knob:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* the two sides, named under the phone */
.cmp-names { position: absolute; left: 4%; right: 4%; top: calc(100% + 16px); margin: 0;
  display: flex; justify-content: space-between;
  font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); opacity: 0; transition: opacity .45s var(--ease); }
.ph.is-compare .cmp-names { opacity: 1; }

/* ===========================================================================
   THE PHONE TELLS EACH SCENE'S STORY
   One real screen, transformed scene by scene — the reference holds one
   bottle the whole way through. The design layer (.ph-wire) is measured off
   the real screen, so every state lines up with it.
   =========================================================================== */
@property --cut { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

/* the design file on its own: the wire layer uncut */
.ph.is-file .ph-wire { opacity: 1; --cut: 100%; }

/* BUILD in the opening scene: the built screen wipes across the design file,
   over and over — design, then build, in one gesture */
.ph.is-wipe .ph-wire, .ph.is-wipe .cmp-line { opacity: 1; }
.ph.is-wipe { animation: wipe 3.4s var(--ease) infinite; }
@keyframes wipe { 0%, 18% { --cut: 100%; } 72%, 100% { --cut: 0%; } }

/* --- scene 01: content, then structure, then interface ------------------
   Inside out, literally. Content is the words and pictures alone; structure
   adds the boxes, outlines and controls around them; interface is the real
   screen. */
.ph.is-content .ph-wire, .ph.is-structure .ph-wire { opacity: 1; --cut: 100%; }
.ph.is-content .wf::after, .ph.is-content .wf b,
.ph.is-content .wf-panel::before, .ph.is-content .wf-chip, .ph.is-content .wf-arrows,
.ph.is-content .wf-pill, .ph.is-content .wf-dot { opacity: 0; }
.wf::after, .wf b, .wf-panel::before, .wf-chip, .wf-arrows, .wf-pill, .wf-dot { transition: opacity .45s var(--ease); }

/* the words: real copy from the screen, placed in 920 x 2000 screen units
   (left = x/9.2 %, top = y/20 %, size = px/9.2 cqw) */
.ph-in { container-type: size; }
.ph-words { position: absolute; inset: 0; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #15151A; }
.w { position: absolute; left: var(--x); top: var(--y); font-size: var(--s); line-height: 1.15;
  font-weight: 400; letter-spacing: -0.01em; white-space: nowrap;
  transition-delay: calc(var(--i) * 40ms); }
/* only scene 01 animates the words; elsewhere they follow the phone's size at once */
.ph.is-stepping .w { transition-property: left, top, font-size, width;
  transition-duration: .9s; transition-timing-function: var(--ease); }
.w.b { font-weight: 600; }
.w.g { color: #8A8A92; }
.w1  { --x: 12.93%; --y: 17.95%; --s: 3.26cqw; --i: 0; }
.w2  { --x: 5.65%;  --y: 25.75%; --s: 3.26cqw; --i: 1; }
.w3  { --x: 88.4%;  --y: 25.5%;  --s: 3.26cqw; --i: 2; }
.w4  { --x: 33.5%;  --y: 32.6%;  --s: 1.85cqw; --i: 3; }
.w5  { --x: 42.4%;  --y: 38.55%; --s: 1.52cqw; --i: 4; }
.w6  { --x: 9.78%;  --y: 71.7%;  --s: 3.26cqw; --i: 5; }
.w7  { --x: 24.1%;  --y: 71.7%;  --s: 3.26cqw; --i: 6; }
.w8  { --x: 83.4%;  --y: 71.7%;  --s: 3.26cqw; --i: 7; }
.w9  { --x: 2.7%;   --y: 75.2%;  --s: 3.6cqw;  --i: 8; width: 95%; white-space: nowrap; line-height: 1.87; }
.w9 em { font-style: normal; padding: 0 .36em; margin: 0 .04em; }
.w10 { --x: 2.7%;   --y: 82.1%;  --s: 2.83cqw; --i: 9; }
.w11 { --x: 4.78%;  --y: 88.8%;  --s: 2.17cqw; --i: 10; }
/* content: the same words with no layout yet, one plain list */
.ph.is-content .w { left: 8%; font-size: 4.4cqw; font-weight: 500; color: #15151A; }
.ph.is-content .w1 { top: 17%; }   .ph.is-content .w2 { top: 22.6%; } .ph.is-content .w3 { top: 28.2%; }
.ph.is-content .w4 { top: 33.8%; } .ph.is-content .w5 { top: 39.4%; } .ph.is-content .w6 { top: 45%; }
.ph.is-content .w7 { top: 50.6%; } .ph.is-content .w8 { top: 56.2%; }
.ph.is-content .w9 { top: 61.8%; width: 84%; line-height: 1.3; white-space: normal; }
.ph.is-content .w9 em { padding: 0; margin: 0; }
.ph.is-content .w9 br { display: none; }
.ph.is-content .w10 { top: 73%; } .ph.is-content .w11 { top: 78.6%; }
.ph.is-content .wf-band { background: #fff; }
.wf-band { transition: background .45s var(--ease); }
/* content is words only: the pictures and boxes come with structure */
.ph.is-content .wf-phone, .ph.is-content .wf-thumb, .ph.is-content .wf-icon { opacity: 0; }
.wf-phone, .wf-thumb, .wf-icon { transition: opacity .45s var(--ease); }

.ph-steps { position: absolute; left: 0; right: 0; top: calc(100% + 16px); margin: 0;
  display: flex; justify-content: center; gap: 18px;
  font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); opacity: 0; transition: opacity .45s var(--ease); }
.ph-steps span { opacity: .3; transition: opacity .3s var(--ease); }
.ph-steps span.is-on { opacity: 1; }
.ph.is-stepping .ph-steps { opacity: 1; }

/* --- scene 03: findings drawn out from their elements ------------------- */
.ph-leads { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ph-leads polyline { fill: none; stroke: var(--coral); stroke-width: 2.4; vector-effect: non-scaling-stroke;
  stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset .7s var(--ease); }
.ph-leads polyline.is-on { stroke-dashoffset: 0; }
.ph-calls { position: absolute; left: calc(100% + 30px); top: 0; height: 100%; width: clamp(150px, 13vw, 230px);
  list-style: none; margin: 0; padding: 0; pointer-events: none; }
.ph-calls li { position: absolute; left: 0; top: var(--y); translate: 0 -50%;
  font-weight: 500; font-size: clamp(11px, .82vw, 13px); line-height: 1.35; color: var(--ink);
  opacity: 0; transition: opacity .4s var(--ease) .25s; }
.ph-calls li b { display: inline-block; min-width: 1.6em; color: var(--coral); font-weight: 700; }
.ph-calls li.is-on { opacity: 1; }

/* --- scene 05: rounds, because there is no finish line ------------------ */
@keyframes roundIn { from { scale: .8; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ph.is-wipe { animation: none; --cut: 50%; }
}

/* --- squarer laptop screens (861-1180px) ---------------------------------
   The phone is sized by height and the type by width, so on a 4:3-ish
   screen the phone takes a bigger share of the row. Cap it by width, give
   the long-headline scenes more room, and move scene 02's aside under the
   copy instead of squeezing it beside the phone. */
@media (max-width: 1180px) and (min-width: 861px) {
  .ph { height: min(var(--sh, 72vh), 46vw); }
  .dr[data-on="5"] .ph { --sx: 74%; }
  .dr[data-on="4"] .ph { --sx: 62%; }
  .s4 .head { font-size: calc(var(--h) * .84); }
  .aside-tr { right: auto; left: var(--m); top: auto; bottom: 7vh; text-align: left;
    font-size: clamp(1.2rem, 2.2vw, 1.8rem); }
  .dr[data-on="8"] .ph { --sx: 77%; }
  .s8 .tog { max-width: 27rem; }
}

/* short phones (iPhone SE height): less phone, more room for the copy */
@media (max-width: 860px) and (max-height: 700px) {
  .ph { --sh: 29vh !important; --sy: 21% !important; }
  .col, .col-mid, .col-tl, .col-ml, .col-bl { top: 40vh !important; }
  .s8 .col-ml { top: 10vh !important; }
  .scan { top: 36vh; left: calc(50% - 7vh); right: calc(50% - 7vh); }
  .s3 .col-bl { top: 44.5vh !important; }
  .g0-tail { top: 38vh; }
}

/* motion the earlier reduced-motion rules missed */
@media (prefers-reduced-motion: reduce) {
  .ph, .ph-scr, .ph-wire, .wf::after, .ph-leads polyline, .ph.is-stepping .w { transition: none !important; }
  .ph-leads polyline { stroke-dashoffset: 0; }
}

/* every control shows where keyboard focus is */
.seg:focus-visible, .dot:focus-visible i, .tog button:focus-visible, .pt-try:focus-visible,
.cta:focus-visible, .cue-link:focus-visible, .dr-menu:focus-visible, .dr-nav a:focus-visible, .dr-links a:focus-visible, .dr-mark:focus-visible {
  outline: 2px solid currentColor; outline-offset: 4px;
}
.dot:focus-visible { outline: none; }

/* the film: once scrolling drives it, the ground belongs to the page (it
   blends between scenes) and the phone follows the scroll frame by frame,
   so neither is left to a CSS transition */
.dr.is-flow .s { background: transparent; }
.dr.is-flow .ph { transition: opacity .45s var(--ease), scale .45s var(--ease); }
.dr.is-flow .col, .dr.is-flow .aside, .dr.is-flow .g0-tail { will-change: opacity; }

/* scene 04's laptop on smaller screens */
@media (max-width: 860px) {
  .mac { left: 6vw; right: 6vw; width: auto; top: 10vh; translate: none; }
  .mac-tags { display: none; }
  .p-links { gap: 20px; }
}
@media (max-width: 860px) and (max-height: 700px) { .mac { left: 14vw; right: 14vw; top: 8vh; } }
@media (prefers-reduced-motion: reduce) { .mac-tags span, .mac.is-nod .mac-lid { animation: none; } .mac-shot { transition: none !important; } .pm-caret { animation: none; } }
/* phones: the intake needs every line for the picks and the button, so the phone sits this one out */
@media (max-width: 860px) { .dr[data-on="8"] .ph { opacity: 0; } }
/* phones: the room is a band across the top, both faces either side of the phone */
@media (max-width: 860px) {
  .room { bottom: 52vh; }
  .room video { object-position: 50% 25%; scale: 1; }
  .room::after { background: linear-gradient(0deg, var(--ink) 0%, rgba(20,20,15,.2) 40%, rgba(20,20,15,.15) 100%); }
  .ep { width: auto; flex: 1; }
}
/* phones: the cascade sits under the roadmap, above the copy, running off the edge */
@media (max-width: 860px) { .cascade7 { left: 4vw; right: auto; width: 120vw; top: 25vh; } }
/* narrow laptops: clear of the rail label */
@media (min-width: 861px) and (max-width: 1180px) { .cascade7 { right: 21vw; width: 36vw; top: 48vh; } }
/* short phones: a smaller laptop so the copy keeps its place */
@media (max-width: 860px) and (max-height: 700px) { .cascade7 { width: 92vw; top: 23vh; } }

/* the studio's channels, under the footer's way in */
/* the bar: hairline, year left, channels right */
.pe-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; margin: clamp(28px, 5vh, 56px) var(--m) 0;
  padding: 18px 0 clamp(22px, 3.5vh, 36px); border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); }
.pe-fine { margin: 0; font-size: var(--l); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .55; white-space: nowrap; }
.pe-social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; margin: 0; font-size: var(--l); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pe-social a { color: inherit; text-decoration: none; opacity: .7; border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: opacity .25s, border-color .25s; }
.pe-social a:hover, .pe-social a:focus-visible { opacity: 1; border-color: var(--coral); outline: none; }
@media (max-width: 860px) {
  .pe-bar { flex-direction: column; align-items: center; text-align: center; padding-top: 16px; }
  .pe-social { justify-content: center; gap: 4px 14px; font-size: 10px; letter-spacing: .12em; }
}
@media (max-width: 860px) {
  .s9 .col-c { padding-left: 12px; padding-right: 12px; }
  .s9 .ctas { margin-top: 12px; }
  .s9 .pe-social { gap: 4px 10px; }
}
@media (max-width: 860px) {
  .s9 .col-c { top: 51vh !important; }
  .s9 .head-c { font-size: calc(var(--h) * .72); }
  .s9 .body-c { font-size: 15px; }
}