/* =====================================================================
   Imagine That · homepage
   Built from the approved "Homepage v2" design (desktop 1440 / mobile 390)
   on the Threshold design system. Plain CSS, no build step.

   Layout model
   - Below 1280px: the phone layout (designed at 390px) as real document
     flow; the content column grows to 560px on tablets. Fixed-coordinate
     illustrations scale with --km / --kc.
   - From 1280px: the desktop artboard (designed at 1440px). Every section
     keeps the artboard's coordinates inside a centred 1440px .stage that is
     scaled by --k (1 at 1440 and wider, down to ~0.89 at 1280). Section
     backgrounds and atmosphere are full-bleed and anchored to the centre.
   ===================================================================== */

/* ---------- Threshold tokens (light theme: what the design shows) ---------- */
:root {
  --it-paper: #faf7ed;
  --it-ink: #102d3b;
  --it-muted: #4e6876;
  --it-coral: #ec7257;
  --it-teal: #297577;
  --it-surface: #efeee5;
  --it-line: #d5ddd7;
  --it-focus: #297577;
  --it-accent-text: var(--it-teal);
  --it-on-ink: var(--it-paper);
  --it-on-ink-muted: #abc0c8;
  --it-on-coral: var(--it-ink);
  --it-strip: var(--it-ink);
  --it-on-strip: var(--it-paper);
  --it-on-strip-muted: #abc0c8;
  --it-veil: #faf7edb8;
  --it-danger: #a83320;

  --it-space-1: .5rem;
  --it-space-2: 1rem;
  --it-space-3: 1.5rem;
  --it-space-4: 2rem;
  --it-space-5: 3rem;
  --it-space-6: 4rem;
  --it-space-7: 6rem;
  --it-space-8: 9rem;

  --it-radius-control: .25rem;
  --it-radius-badge: .125rem;
  --it-radius-none: 0;

  --it-shadow-veil: 0 8px 30px #0c2d3b0a;
  --it-shadow-menu: 0 24px 48px #0c2d3b1f;

  --it-content-max: 75rem;
  --it-gutter: 1.5rem;
  --it-margin-desktop: 4rem;
  --it-margin-mobile: 1.25rem;
  --it-cut-w: 6rem;
  --it-target-min: 44px;

  --it-duration-control: 180ms;
  --it-duration-entrance: 400ms;
  --it-ease: cubic-bezier(.22, .61, .36, 1);

  --font-sans: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Homepage palette (literal values from the design, beyond the core tokens) */
  --c-mint: #78cdc6;
  --c-pale-mint: #cbe7e1;
  --c-gold: #e5af52;
  --c-cream: #eedfc3;
  --c-ember: #f77958;
  --c-rust: #b24a33;
  --c-sand: #f5eddd;
  --c-deep: #0f2f3a;
  --c-mist: #cfdcdf;
  --c-on-deep: #f5f1e6;
  --emit-core: 255 247 228;
  --emit-warm: 255 238 205;

  /* Design "Tweaks" (defaults): light on the veil, arrival and party */
  --veil: 1;
  --arrival: 1;
  --party: 1;
}

/* ---------- Scale factors ----------
   --u : one artboard pixel on desktop (1px at >=1440, smaller below)
   --k : the same, unitless, for transform: scale()
   --km: phone illustrations (designed 390 wide), 0.72 .. 1.25
   --kc: discovery lens (designed 350 wide), 0.69 .. 1.3                     */
body {
  --u: min(1px, 100cqw / 1440);
  --k: tan(atan2(min(1px, 100cqw / 1440), 1px));
  --km: tan(atan2(clamp(280px, 100cqw, 488px), 390px));
  --kc: tan(atan2(clamp(240px, 100cqw - 40px, 455px), 350px));
  --padx: max(20px, calc((100% - 560px) / 2));
}
@supports not (width: calc(tan(atan2(1px, 1px)) * 1px)) {
  body { --k: 1; --km: 1; --kc: 1; }
}

/* ---------- Base ---------- */
/* The design is authored in the default content-box model; keep it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--it-paper);
  color: var(--it-ink);
  font-family: var(--font-sans);
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.page { position: relative; overflow-x: clip; }
img { border: 0; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }

.page a { color: var(--it-ink); transition: color var(--it-duration-control) var(--it-ease); }
.page a:hover { color: var(--it-teal); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--it-focus); outline-offset: 3px; }
.ft :focus-visible { outline-color: #ff8065; }

.skip {
  position: absolute; left: 12px; top: -200px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--it-ink); color: var(--it-paper); border-radius: var(--it-radius-control);
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.skip:focus { top: 12px; }

/* desktop-only / phone-only copy variants (the two artboards differ slightly) */
.dt { display: none; }

/* ---------- Shared components ---------- */
.kick { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--it-muted); }
.kick-row { display: flex; align-items: center; gap: 12px; }
.kick-row__line { width: 18px; height: 2px; background: var(--it-coral); flex-shrink: 0; }

.btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 20px; border-radius: 4px;
  background: #102d3b; color: #faf7ed !important;
  font-size: 16px; font-weight: 500; text-decoration: none;
  transition: filter var(--it-duration-control) var(--it-ease);
}
.btn:hover { filter: brightness(1.08); }
.ghost {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 4px; border: 1px solid #102d3b; color: #102d3b;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.tl {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--it-coral); text-underline-offset: 6px;
}
.navl {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 500; color: #102d3b; text-decoration: none;
}
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 10px; border: 1px solid currentColor; border-radius: 2px;
  font-size: 13px; font-weight: 500;
}
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.h2 { margin: 0; font-size: 44px; line-height: 1.06; font-weight: 400; letter-spacing: -.01em; }
.lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--it-muted); }

/* glass ribbon: a faint preview of the party at the end */
.ribbon {
  position: relative; isolation: isolate; overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgb(255 255 255/.6);
}
.ribbon::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgb(255 140 200/.2), rgb(255 210 120/.16) 25%, rgb(140 230 170/.14) 50%, rgb(110 200 255/.18) 75%, rgb(180 150 255/.2)) 0 0/300% 100%;
  animation: ribbonsheen 16s ease-in-out infinite alternate;
}
.ribbon::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(255 255 255/0) 40%, rgb(255 255 255/.75) 50%, rgb(255 255 255/0) 60%) 0 0/250% 100% no-repeat;
  animation: ribbonglint 9s ease-in-out infinite;
}
@keyframes ribbonsheen { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes ribbonglint { 0%, 72% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* parallel worlds: how machines see it, how people see it, bridged */
.pw {
  --gap: 30px; --mfs: 11.5px; --hfs: 13px; --ics: 18px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--gap) minmax(0, 1fr);
  align-items: center; row-gap: 16px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.pw::before {
  content: ""; position: absolute; left: 50%; top: 6px; bottom: -6px; width: 14px; margin-left: -7px;
  background: linear-gradient(180deg, transparent, var(--seam) 18%, var(--seam) 82%, transparent);
  filter: blur(6px); opacity: .9;
}
.pw .pw__lab { font-size: 11px; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--lab); }
.pw .pw__lab.pw__m { text-align: right; justify-content: flex-end; font-family: var(--font-mono); letter-spacing: .12em; font-size: 11px; color: var(--lab); line-height: 1.2; }
.pw__eq { position: relative; text-align: center; font-size: 16px; color: var(--eq); line-height: 1; }
.pw__m, .pw__h { display: flex; align-items: center; gap: 10px; }
.pw__m { justify-content: flex-end; text-align: right; font-family: var(--font-mono); font-size: var(--mfs); line-height: 1.45; letter-spacing: -.01em; color: var(--mt); }
.pw__h { font-size: var(--hfs); line-height: 1.45; color: var(--ht); }
.pw .ic { flex-shrink: 0; width: var(--ics); height: var(--ics); fill: none; stroke: currentColor; stroke-width: 1.6; }
.pw__m .ic { color: var(--mi); stroke-linecap: square; stroke-linejoin: miter; }
.pw__h .ic { color: var(--hi); stroke-linecap: round; stroke-linejoin: round; }
.pw__bridge { position: relative; height: 20px; display: flex; align-items: center; }
.pw__bridge::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1.5px dotted var(--seam); }
.pw__bridge i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 8px var(--dot); animation: cross 3.3s ease-in-out infinite alternate; }
@keyframes cross { from { transform: translateX(2px); } to { transform: translateX(calc(var(--gap) - 9px)); } }

/* =====================================================================
   PHONE + TABLET (< 1280px) — the 390 artboard, in document flow
   ===================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: calc(1000px * var(--km)); }
.hero__fog {
  position: absolute; inset: -30px; z-index: -9;
  background: url(../assets/img/fog-mobile.webp) center/cover no-repeat, linear-gradient(rgb(17 39 53/.64), rgb(17 39 53/.64));
  animation: fogdrift-m 34s ease-in-out infinite alternate;
}
@keyframes fogdrift-m { from { transform: translate3d(-14px, 0, 0) scale(1.02); } to { transform: translate3d(14px, -8px, 0) scale(1.06); } }
.hero__haze {
  position: absolute; inset: 0; z-index: -8;
  background: linear-gradient(180deg,
    rgb(250 247 237/.98) 0%,
    rgb(250 247 237/.95) calc(100% - 480px * var(--km)),
    rgb(250 247 237/.4) calc(100% - 360px * var(--km)),
    rgb(250 247 237/0) calc(100% - 280px * var(--km)));
}
.hero__floor {
  position: absolute; inset: 0; z-index: -7;
  clip-path: polygon(0 calc(100% - 90px * var(--km)), 100% calc(100% - 120px * var(--km)), 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgb(214 214 204/.4), rgb(240 236 226/.6));
}
.hero__seam { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: -1; background: linear-gradient(rgb(250 247 237/0), #faf7ed); }
.hero__stage { flex: 1 0 auto; display: flex; flex-direction: column; }
.hero__spacer { flex: 1 0 calc(440px * var(--km)); }

/* phone scene: the artboard's 390x1000 coordinates, anchored to the hero's bottom centre */
.hero__scene {
  position: absolute; left: 50%; bottom: 0; width: 390px; height: 1000px; margin-left: -195px; z-index: -5;
  transform: scale(var(--km)); transform-origin: 50% 100%; pointer-events: none;
}
.hero__spill, .veil__back { display: none; }
.veil { position: absolute; left: 214px; top: 666px; width: 118px; height: 224px; }
.veil__glow {
  position: absolute; left: -150px; right: -150px; top: -90px; bottom: -60px;
  background: radial-gradient(ellipse 46% 50% at 50% 56%, rgb(var(--emit-warm)/.75), rgb(var(--emit-warm)/0) 78%);
  filter: blur(16px); opacity: calc(.35 + .65 * var(--veil)); animation: breathe-m 7s ease-in-out infinite;
}
@keyframes breathe-m { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.veil__body { position: absolute; inset: 0; filter: blur(6px); opacity: calc(.5 + .5 * var(--veil)); transform-origin: 50% 0; animation: sway 8s ease-in-out infinite; }
.veil__body::before { content: ""; position: absolute; inset: 0; border-radius: 44% 56% 3% 3% / 17% 24% 0 0; transform: skewY(-6deg); background: linear-gradient(180deg, #fff6e2 0%, #fffbf2 45%, #fff7e6 78%, #ffefd2 100%); }
@keyframes sway { 0%, 100% { transform: skewX(0); } 35% { transform: skewX(1.6deg); } 70% { transform: skewX(-1.2deg); } }
.veil__folds { position: absolute; inset: 0; filter: blur(3px); mix-blend-mode: multiply; opacity: calc(.35 + .5 * var(--veil)); overflow: hidden; transform-origin: 50% 0; animation: sway 8s ease-in-out infinite; }
.veil__folds::before {
  content: ""; position: absolute; inset: 6% -30% 0; border-radius: 44% 56% 3% 3% / 17% 24% 0 0; transform: skewY(-6deg);
  background: repeating-linear-gradient(90deg, rgb(255 255 255/0) 0 8px, rgb(214 180 128/.3) 12px, rgb(255 255 255/0) 17px);
  animation: folds-m 11s ease-in-out infinite alternate;
}
@keyframes folds-m { from { transform: skewY(-6deg) translateX(-10px); } to { transform: skewY(-6deg) translateX(10px); } }
.veil__hem { position: absolute; left: -50px; right: -50px; bottom: -22px; height: 44px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(255 250 238/.95), rgb(var(--emit-warm)/0)); filter: blur(6px); }

.hero__guide, .hero__rim, .hero__glint { position: absolute; left: 116px; top: 780px; width: 86px; height: 120px; z-index: 2; display: block; }
.hero__guide { filter: drop-shadow(6px -2px 10px rgb(var(--emit-warm)/.8)); }
.hero__rim, .hero__glint {
  -webkit-mask: url(../assets/img/guide-taken-aback.webp) center/100% 100% no-repeat;
  mask: url(../assets/img/guide-taken-aback.webp) center/100% 100% no-repeat;
  mix-blend-mode: screen; pointer-events: none;
}
.hero__rim { background: linear-gradient(270deg, rgb(255 238 205/1) 0%, rgb(255 236 200/.75) 26%, rgb(255 236 200/.2) 48%, rgb(255 236 200/0) 62%); opacity: var(--veil); animation: rim 7s ease-in-out infinite; }
@keyframes rim { 0%, 100% { filter: brightness(.85); } 50% { filter: brightness(1.15); } }
.hero__glint { background: linear-gradient(105deg, rgb(255 255 255/0) 42%, rgb(255 250 236/.95) 50%, rgb(255 255 255/0) 58%) 0 0/320% 100% no-repeat; animation: glint 6.5s ease-in-out infinite; }
@keyframes glint { 0%, 40% { background-position: 120% 0; } 70%, 100% { background-position: -20% 0; } }

/* header */
.site-header { position: relative; z-index: 4; height: 68px; padding: 0 var(--padx); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.brand picture { display: block; }
.brand__img { display: block; width: 38px; height: 34px; }
.header__actions { display: flex; align-items: center; gap: 8px; }
.header__talk { font-size: 15px; padding: 0 8px; }
.menu-btn {
  min-height: 44px; min-width: 76px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border: 1px solid #102d3b; background: rgb(250 247 237/.5); border-radius: 4px;
  font-size: 15px; font-weight: 500; color: #102d3b;
}
.menu-btn__icon { display: flex; flex-direction: column; gap: 5px; }
.menu-btn__icon span { width: 16px; height: 2px; background: #102d3b; transition: transform var(--it-duration-control) var(--it-ease); }
[data-open] .menu-btn__icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
[data-open] .menu-btn__icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* phone menu panel (the design shows the closed state only) */
.primary-nav {
  position: absolute; top: 64px; right: var(--padx); z-index: 10;
  flex-direction: column; align-items: stretch; min-width: 228px; padding: 8px;
  background: var(--it-paper); border-radius: var(--it-radius-control); box-shadow: var(--it-shadow-menu);
  border: 1px solid var(--it-line); display: none;
}
.primary-nav::before, .primary-nav::after { display: none; }
.primary-nav .navl { width: 100%; }
.primary-nav__sep { display: block; height: 1px; background: #d5ddd7; margin: 6px 12px; }
.primary-nav .ghost { justify-content: center; margin-top: 8px; }
[data-open] .primary-nav { display: flex; }
html:not(.js) .menu-btn { display: none; }
html:not(.js) .primary-nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; box-shadow: none; border: 0; background: none; min-width: 0; padding: 0; }
html:not(.js) .site-header { flex-wrap: wrap; height: auto; min-height: 68px; }

/* hero copy */
.hero__copy { padding: 28px var(--padx) 0; display: flex; flex-direction: column; gap: 18px; }
.hero__title { margin: 0; font-size: 44px; line-height: 1.04; font-weight: 400; letter-spacing: -.01em; }
.hero__actions { display: flex; flex-direction: column; gap: 18px; }
.hero__actions .tl { align-self: flex-start; }
.hero__tagline { font-size: 13px; color: var(--it-muted); font-style: italic; }

/* ---------- Cast ---------- */
.cast { position: relative; overflow: hidden; background: linear-gradient(180deg, #faf7ed, #f3ecdc); }
.cast__floor { display: none; }
.cast__stage { padding: 56px var(--padx) 64px; display: flex; flex-direction: column; gap: 22px; }
.cast__intro { display: flex; flex-direction: column; gap: 10px; }
.cast__title { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 400; }
.cast__lede { font-size: 16px; line-height: 1.6; color: var(--it-muted); }
.cast__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; margin-top: 64px; }
.page .role { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: #102d3b; min-height: 44px; }
.spot {
  position: absolute; left: 50%; top: -70px; width: 150px; height: 220px; margin-left: -75px;
  background: linear-gradient(180deg, rgb(255 243 214/0), rgb(255 243 214/.8));
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(8px); z-index: 0;
  animation: spot 5s ease-in-out infinite;
}
@keyframes spot { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.role__img { position: relative; z-index: 1; display: block; height: 89px; animation: bob-m 4.6s ease-in-out infinite; }
.role__img--explore { width: 100px; }
.role__img--celebrate { width: 82px; }
.role__img--build { width: 87px; }
@keyframes bob-m { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.role:hover .role__img, .role:focus-visible .role__img { animation-duration: 1.4s; }
.role__name { position: relative; z-index: 1; font-size: 17px; font-weight: 500; }
.role__line { position: relative; z-index: 1; font-size: 13px; color: #4e6876; text-align: center; line-height: 1.4; min-height: 36px; }
.role__go { display: none; }
.role--achieve { grid-column: 1 / -1; justify-self: center; flex-direction: row !important; gap: 18px !important; margin-top: 22px; }
.role--achieve .spot { display: none; }
.role__text { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.role--achieve .role__line {
  min-height: 0; line-height: normal; text-align: left; font-size: 14px; font-weight: 400; color: #4e6876;
  text-decoration: underline; text-decoration-color: var(--it-coral); text-underline-offset: 6px;
}

/* the encore tease: a veiled, iridescent silhouette */
.encore { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; width: 62px; height: 80px; flex-shrink: 0; }
.encore__aura {
  position: absolute; left: 50%; top: 50%; width: 170%; height: 150%; transform: translate(-50%, -50%); border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(255 140 200/.55), rgb(255 210 120/.5), rgb(140 230 170/.45), rgb(110 200 255/.5), rgb(180 150 255/.55), rgb(255 140 200/.55));
  filter: blur(22px); opacity: .55; animation: aura 12s linear infinite;
}
@keyframes aura { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.encore__fog {
  position: absolute; inset: -20% -40%; background: url(../assets/img/fog-desktop.webp) center/cover;
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 20%, transparent 70%);
  mask: radial-gradient(ellipse 50% 50% at 50% 55%, #000 20%, transparent 70%);
  opacity: .35; mix-blend-mode: screen; animation: encorefog 10s ease-in-out infinite alternate;
}
@keyframes encorefog { from { transform: translateX(-12px) scale(1); } to { transform: translateX(12px) scale(1.08); } }
.encore__ghost { position: relative; display: block; width: 50px; height: 65px; filter: brightness(0) invert(1) blur(4px) drop-shadow(0 0 14px rgb(255 255 255/.9)); opacity: .9; animation: ghost 4.6s ease-in-out infinite; }
@keyframes ghost { 0%, 100% { opacity: .75; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }
.encore__sheen {
  position: absolute; bottom: 0; left: 50%; display: block; width: 50px; height: 65px; margin-left: -25px;
  -webkit-mask: url(../assets/img/guide-welcome.webp) center/100% 100% no-repeat;
  mask: url(../assets/img/guide-welcome.webp) center/100% 100% no-repeat;
  background: linear-gradient(135deg, #ffb3dc, #ffe29a, #a9f0c4, #9fdcff, #cdb6ff, #ffb3dc) 0 0/300% 300%;
  filter: blur(2.5px); opacity: .65; animation: encoresheen 6s ease-in-out infinite alternate, ghost 4.6s ease-in-out infinite;
}
@keyframes encoresheen { from { background-position: 0 0; } to { background-position: 100% 100%; } }

/* ---------- Content sections (discovery / acquisition / follow-through) ---------- */
.disc, .acq, .ft { position: relative; overflow: hidden; }
.col { position: relative; padding: 64px var(--padx) 56px; display: flex; flex-direction: column; gap: 20px; }
.col > .tl { align-self: flex-start; }

/* 01 discovery */
.disc { background: linear-gradient(180deg, #faf7ed, #f1f6f2); }
.disc__visual { position: relative; height: calc(500px * var(--kc)); margin-top: 8px; }
.disc__fig { position: absolute; left: 50%; top: 0; width: 350px; height: 500px; margin-left: -175px; transform: scale(var(--kc)); transform-origin: 50% 0; }
.buried { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px 10px; filter: blur(1.4px); opacity: .55; animation: noise 14s ease-in-out infinite alternate; }
.buried--d { display: none; }
@keyframes noise { 0% { transform: translateX(-10px) skewX(0); } 30% { transform: translateX(8px) skewX(-2.5deg); } 55% { transform: translateX(-2px) skewX(1deg); } 80% { transform: translateX(12px) skewX(-3deg); } 100% { transform: translateX(-6px) skewX(0); } }
.buried span { font-size: 12px; color: #4e6876; padding: 5px 8px; border: 1px solid #c9d6d2; border-radius: 2px; background: rgb(255 255 255/.5); }
.lens {
  position: absolute; left: 20px; top: 20px; width: 330px; height: 330px; border-radius: 50%;
  box-sizing: border-box; background: #f4fbf8; border: 6px solid #e5af52;
  box-shadow: 0 0 0 10px rgb(120 205 198/.28), 0 20px 40px rgb(16 45 59/.14);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 40px; overflow: hidden;
  animation: zoomin-m 1.5s cubic-bezier(.2, .9, .25, 1.15) .2s both;
}
@keyframes zoomin-m { from { transform: translate(-60px, 60px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.lens > *:not(.lens__weather), .lens .ans > * { position: relative; z-index: 1; }
.lens__weather { position: absolute; inset: 0; z-index: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.lens__bar { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: #297577; }
.lens__bar i { width: 7px; height: 7px; border-radius: 50%; background: #297577; display: block; animation: pulse-m 1.6s ease-in-out infinite; }
@keyframes pulse-m { 0%, 100% { box-shadow: 0 0 0 0 rgb(41 117 119/.45); } 50% { box-shadow: 0 0 0 5px rgb(41 117 119/0); } }
.q { margin: 0; font-size: 17px; line-height: 1.3; display: flex; flex-direction: column; }
.q span { display: block; white-space: nowrap; }
.q1 { animation: type1 11s steps(28, end) 1.7s infinite both; }
.q2 { animation: type2 11s steps(22, end) 1.7s infinite both; }
@keyframes type1 { 0%, 6% { clip-path: inset(0 100% 0 0); } 20%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 98%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes type2 { 0%, 20% { clip-path: inset(0 100% 0 0); } 31%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 98%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.resolving { display: none; }
.ans { display: contents; }
.ans__t { margin: 0; font-size: 12px; font-weight: 600; color: #297577; animation: ans 11s ease 1.7s infinite both; }
@keyframes ans { 0%, 43% { opacity: 0; transform: translateY(6px); } 47%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.lens__row { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.35; }
.lens__row em { font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: #297577; }
.r1 { animation: r1 11s ease 1.7s infinite both; }
.r2 { animation: r2 11s ease 1.7s infinite both; }
.r3 { animation: r3 11s ease 1.7s infinite both; }
@keyframes r1 { 0%, 48% { opacity: 0; transform: translateY(8px); } 53%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes r2 { 0%, 54% { opacity: 0; transform: translateY(8px); } 59%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes r3 { 0%, 60% { opacity: 0; transform: translateY(8px); } 65%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
/* weather inside the lens: the subject matter, felt */
.rain {
  position: absolute; left: -60%; top: -60%; width: 220%; height: 220%;
  background: repeating-linear-gradient(90deg, rgb(41 117 119/0) 0 26px, rgb(41 117 119/.26) 26px 28px);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 47px);
  mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 47px);
  filter: blur(.35px); animation: rainfall .85s linear infinite;
}
.rain--b {
  background: repeating-linear-gradient(90deg, rgb(41 117 119/0) 0 39px, rgb(41 117 119/.16) 39px 40.5px);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 22px, transparent 22px 61px);
  mask: repeating-linear-gradient(180deg, #000 0 22px, transparent 22px 61px);
  animation: rainfall2 .62s linear infinite; left: -30%;
}
@keyframes rainfall { from { transform: rotate(18deg) translateY(-47px); } to { transform: rotate(18deg) translateY(0); } }
@keyframes rainfall2 { from { transform: rotate(19deg) translateY(-61px); } to { transform: rotate(19deg) translateY(0); } }
.gust { position: absolute; left: -60%; top: 20%; width: 120%; height: 60%; background: radial-gradient(ellipse 50% 35% at 50% 50%, rgb(203 231 225/.75), rgb(203 231 225/0) 70%); filter: blur(10px); animation: gust 6s ease-in-out infinite; }
@keyframes gust { 0% { transform: translateX(0) translateY(10px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(110%) translateY(-20px); opacity: 0; } }
.explorer { position: absolute; left: 0; top: 340px; width: 160px; height: 143px; display: block; }
@keyframes peer { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg) translateY(-4px); } }

/* 02 acquisition */
.acq { background: #f5eddd; }
.acq__visual { position: relative; height: calc(400px * var(--km)); }
.fig { position: absolute; }
.fig-d { display: none; }
.fig-m { left: 50%; top: 0; width: 390px; height: 400px; margin-left: -195px; transform: scale(var(--km)); transform-origin: 50% 0; }
.halo { position: absolute; }
.orbit { position: absolute; left: 50%; border: 1.5px solid rgb(214 150 60/.6); border-radius: 50%; transform: translate(-50%, -50%) rotate(-14deg); }
.orb { position: absolute; left: 0; top: 0; border-radius: 50%; offset-rotate: 0deg; offset-anchor: center; }
@keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.amb { display: flex; align-items: center; justify-content: center; }
.amb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(236 114 87/.7); animation: ripple 2.6s ease-out infinite; }
.amb::after { content: ""; border-radius: 50%; background: #ec7257; }
@keyframes ripple { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.well { position: absolute; left: 50%; border: 1px solid rgb(178 74 51/.16); border-radius: 50%; transform: translate(-50%, -50%) rotate(-14deg); }
.mass {
  position: absolute; left: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(255 250 238/1) 0, rgb(255 214 170/.95) 18%, rgb(247 121 88/.55) 38%, rgb(247 121 88/.12) 58%, rgb(16 45 59/.08) 66%, rgb(16 45 59/0) 74%);
  animation: mass 5s ease-in-out infinite;
}
@keyframes mass { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.07); } }
.einstein {
  position: absolute; left: 50%; border-radius: 50%; transform: translate(-50%, -50%) scaleY(.5) rotate(-14deg);
  background: conic-gradient(rgb(255 140 200/.9), rgb(255 210 120/.9), rgb(140 230 170/.85), rgb(110 200 255/.9), rgb(180 150 255/.9), rgb(255 140 200/.9));
  -webkit-mask: radial-gradient(closest-side, transparent 0 88%, #000 92% 95%, transparent 99%);
  mask: radial-gradient(closest-side, transparent 0 88%, #000 92% 95%, transparent 99%);
  filter: blur(1.5px); opacity: .75; animation: einstein 14s linear infinite;
}
@keyframes einstein { from { transform: translate(-50%, -50%) scaleY(.5) rotate(-14deg); } to { transform: translate(-50%, -50%) scaleY(.5) rotate(346deg); } }
.dust { position: absolute; left: 0; top: 0; border-radius: 50%; background: #fff6e4; box-shadow: 0 0 8px 2px rgb(255 214 170/.9); offset-rotate: 0deg; offset-anchor: center; opacity: 0; animation: accrete 7.5s cubic-bezier(.55, 0, .85, .6) infinite; }
@keyframes accrete { 0% { offset-distance: 0%; opacity: 0; transform: scale(1.2); } 12% { opacity: .95; } 85% { opacity: .9; transform: scale(.7); } 100% { offset-distance: 100%; opacity: 0; transform: scale(.2); } }
.d2 { animation-delay: -1.25s; } .d3 { animation-delay: -2.5s; } .d4 { animation-delay: -3.75s; } .d5 { animation-delay: -5s; } .d6 { animation-delay: -6.25s; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 6px rgb(255 214 170/.9); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
/* the center of gravity: glass, not a box */
.offer {
  position: absolute; display: flex; flex-direction: column; z-index: 2;
  background: rgb(255 253 247/.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgb(255 255 255/.65); border-top: 1px solid rgb(255 255 255/.9); border-radius: 24px;
  animation: glassfloat 6s ease-in-out infinite;
  box-shadow: inset 0 1px 0 rgb(255 255 255/.85), inset 0 0 28px rgb(255 255 255/.4), 0 0 90px 30px rgb(247 121 88/.2), 0 18px 40px rgb(16 45 59/.08);
}
.offer::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 210deg, rgb(255 140 200/.9), rgb(255 210 120/.85), rgb(140 230 170/.8), rgb(110 200 255/.85), rgb(180 150 255/.9), rgb(255 140 200/.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75; animation: hue 10s linear infinite; pointer-events: none;
}
.offer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgb(255 255 255/0) 35%, rgb(255 255 255/.55) 48%, rgb(255 255 255/0) 60%) 0 0/260% 100% no-repeat; animation: ribbonglint 7s ease-in-out infinite; pointer-events: none; }
.offer > span { position: relative; z-index: 1; }
.offer__k { text-transform: uppercase; font-weight: 500; color: #4e6876; }
.offer__t { font-weight: 500; line-height: 1.35; }
@keyframes glassfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.celebrant { position: absolute; display: block; z-index: 3; }
.lbl { position: absolute; display: flex; align-items: center; text-transform: uppercase; font-weight: 500; color: #4e6876; z-index: 2; }
.lbl::before { content: ""; height: 1px; background: #4e6876; }

/* phone diagram values */
.fig-m .well, .fig-m .mass, .fig-m .einstein { top: 224px; }
.fig-m .mass { width: 132px; height: 132px; }
.fig-m .einstein { width: 172px; height: 172px; }
.fig-m .orbit { top: 56%; animation: oglow-m 5s ease-in-out infinite; }
@keyframes oglow-m { 0%, 100% { box-shadow: 0 0 8px rgb(229 175 82/.25), inset 0 0 8px rgb(229 175 82/.18); } 50% { box-shadow: 0 0 16px rgb(229 175 82/.55), inset 0 0 12px rgb(229 175 82/.35); } }
.fig-m .o1 { offset-path: path("M 374.5 179.2 A 185 75 -14 1 1 15.5 268.8 A 185 75 -14 1 1 374.5 179.2 Z"); animation: orbit 24s linear infinite; }
.fig-m .o2 { offset-path: path("M 330.8 190.1 A 140 56 -14 1 1 59.2 257.9 A 140 56 -14 1 1 330.8 190.1 Z"); animation: orbit 17s linear infinite; }
.fig-m .o3 { offset-path: path("M 287.2 201.0 A 95 38 -14 1 1 102.8 247.0 A 95 38 -14 1 1 287.2 201.0 Z"); animation: orbit 11s linear infinite; }
.fig-m .dot { width: 10px; height: 10px; box-shadow: 0 0 8px currentColor; }
.fig-m .amb { width: 24px; height: 24px; }
.fig-m .amb::after { width: 8px; height: 8px; box-shadow: 0 0 8px #ec7257; }
.fig-m .dust { width: 5px; height: 5px; }
.fig-m .d1 { offset-path: path("M 379.1 178.1 L 378.9 189.6 L 374.0 201.9 L 365.0 214.5 L 352.0 227.2 L 335.6 239.5 L 316.1 251.3 L 294.3 262.1 L 270.5 271.9 L 245.6 280.2 L 220.0 287.1 L 194.6 292.3 L 169.8 295.8 L 146.3 297.5 L 124.6 297.4 L 105.1 295.6 L 88.4 292.2 L 74.7 287.3 L 64.3 281.0 L 57.3 273.7 L 53.8 265.4 L 53.7 256.5 L 57.0 247.1 L 63.4 237.6 L 72.6 228.1 L 84.4 218.9 L 98.2 210.2 L 113.8 202.2 L 130.6 195.1 L 148.1 189.0 L 165.9 184.1 L 183.5 180.4 L 200.4 177.9 L 216.3 176.7 L 230.8 176.6 L 243.6 177.8 L 254.4 180.0 L 263.1 183.1 L 269.5 187.0 L 273.6 191.6 L 275.5 196.7 L 275.1 202.1 L 272.8 207.6 L 268.6 213.1 L 262.9 218.4 L 255.9 223.4 L 247.9 227.9 L 239.3 231.9 L 230.4 235.2 L 221.4 237.8 L 212.7 239.7 L 204.7 240.9 L 197.4 241.3 L 191.1 241.1 L 186.0 240.3 L 182.2 239.1 L 179.7 237.4 L 178.4 235.5 L 178.4 233.4 L 179.6 231.2 L 181.6 229.2"); }
.fig-m .d2 { offset-path: path("M 302.6 263.2 L 278.2 274.0 L 252.0 283.4 L 224.8 291.2 L 197.4 297.3 L 170.4 301.6 L 144.5 304.0 L 120.3 304.4 L 98.4 302.9 L 79.3 299.6 L 63.3 294.6 L 50.9 288.1 L 42.1 280.3 L 37.2 271.4 L 36.1 261.6 L 38.7 251.2 L 44.9 240.5 L 54.5 229.7 L 67.0 219.2 L 82.2 209.1 L 99.4 199.8 L 118.3 191.3 L 138.2 183.9 L 158.8 177.8 L 179.3 173.0 L 199.4 169.6 L 218.6 167.6 L 236.3 167.1 L 252.2 167.9 L 266.0 170.1 L 277.5 173.4 L 286.4 177.8 L 292.6 183.0 L 296.2 189.0 L 297.0 195.4 L 295.4 202.2 L 291.4 209.1 L 285.3 216.0 L 277.3 222.5 L 267.9 228.7 L 257.3 234.3 L 245.9 239.3 L 234.1 243.4 L 222.2 246.7 L 210.7 249.2 L 199.8 250.7 L 189.8 251.4 L 180.9 251.3 L 173.4 250.4 L 167.4 248.8 L 162.9 246.7 L 160.0 244.2 L 158.6 241.4 L 158.6 238.4 L 160.0 235.4 L 162.4 232.5 L 165.8 229.8 L 169.8 227.4 L 174.3 225.4 L 178.8 223.9 L 183.3 222.9"); }
.fig-m .d3 { offset-path: path("M 118.4 309.1 L 94.3 308.4 L 73.0 305.5 L 54.8 300.7 L 40.4 294.1 L 29.8 286.1 L 23.3 276.7 L 21.0 266.2 L 22.9 255.1 L 28.7 243.4 L 38.3 231.6 L 51.3 219.8 L 67.3 208.5 L 85.9 197.9 L 106.5 188.2 L 128.6 179.6 L 151.5 172.3 L 174.8 166.5 L 197.7 162.1 L 219.8 159.4 L 240.6 158.3 L 259.5 158.8 L 276.2 160.8 L 290.4 164.3 L 301.7 168.9 L 310.1 174.7 L 315.3 181.5 L 317.5 188.9 L 316.6 196.8 L 312.9 205.0 L 306.6 213.3 L 297.9 221.4 L 287.2 229.1 L 274.8 236.3 L 261.2 242.8 L 246.8 248.5 L 232.0 253.2 L 217.2 256.9 L 202.8 259.5 L 189.3 261.1 L 176.8 261.6 L 165.7 261.2 L 156.3 259.8 L 148.6 257.6 L 142.8 254.7 L 138.9 251.3 L 136.9 247.5 L 136.6 243.4 L 138.1 239.2 L 141.0 235.0 L 145.2 231.0 L 150.3 227.3 L 156.2 224.1 L 162.5 221.3 L 168.9 219.0 L 175.2 217.4 L 181.1 216.4 L 186.4 215.9 L 190.8 216.0 L 194.3 216.7 L 196.6 217.7"); }
.fig-m .d4 { offset-path: path("M 10.9 269.9 L 11.1 258.4 L 16.0 246.1 L 25.0 233.5 L 38.0 220.8 L 54.4 208.5 L 73.9 196.7 L 95.7 185.9 L 119.5 176.1 L 144.4 167.8 L 170.0 160.9 L 195.4 155.7 L 220.2 152.2 L 243.7 150.5 L 265.4 150.6 L 284.9 152.4 L 301.6 155.8 L 315.3 160.7 L 325.7 167.0 L 332.7 174.3 L 336.2 182.6 L 336.3 191.5 L 333.0 200.9 L 326.6 210.4 L 317.4 219.9 L 305.6 229.1 L 291.8 237.8 L 276.2 245.8 L 259.4 252.9 L 241.9 259.0 L 224.1 263.9 L 206.5 267.6 L 189.6 270.1 L 173.7 271.3 L 159.2 271.4 L 146.4 270.2 L 135.6 268.0 L 126.9 264.9 L 120.5 261.0 L 116.4 256.4 L 114.5 251.3 L 114.9 245.9 L 117.2 240.4 L 121.4 234.9 L 127.1 229.6 L 134.1 224.6 L 142.1 220.1 L 150.7 216.1 L 159.6 212.8 L 168.6 210.2 L 177.3 208.3 L 185.3 207.1 L 192.6 206.7 L 198.9 206.9 L 204.0 207.7 L 207.8 208.9 L 210.3 210.6 L 211.6 212.5 L 211.6 214.6 L 210.4 216.8 L 208.4 218.8"); }
.fig-m .d5 { offset-path: path("M 87.4 184.8 L 111.8 174.0 L 138.0 164.6 L 165.2 156.8 L 192.6 150.7 L 219.6 146.4 L 245.5 144.0 L 269.7 143.6 L 291.6 145.1 L 310.7 148.4 L 326.7 153.4 L 339.1 159.9 L 347.9 167.7 L 352.8 176.6 L 353.9 186.4 L 351.3 196.8 L 345.1 207.5 L 335.5 218.3 L 323.0 228.8 L 307.8 238.9 L 290.6 248.2 L 271.7 256.7 L 251.8 264.1 L 231.2 270.2 L 210.7 275.0 L 190.6 278.4 L 171.4 280.4 L 153.7 280.9 L 137.8 280.1 L 124.0 277.9 L 112.5 274.6 L 103.6 270.2 L 97.4 265.0 L 93.8 259.0 L 93.0 252.6 L 94.6 245.8 L 98.6 238.9 L 104.7 232.0 L 112.7 225.5 L 122.1 219.3 L 132.7 213.7 L 144.1 208.7 L 155.9 204.6 L 167.8 201.3 L 179.3 198.8 L 190.2 197.3 L 200.2 196.6 L 209.1 196.7 L 216.6 197.6 L 222.6 199.2 L 227.1 201.3 L 230.0 203.8 L 231.4 206.6 L 231.4 209.6 L 230.0 212.6 L 227.6 215.5 L 224.2 218.2 L 220.2 220.6 L 215.7 222.6 L 211.2 224.1 L 206.7 225.1"); }
.fig-m .d6 { offset-path: path("M 271.6 138.9 L 295.7 139.6 L 317.0 142.5 L 335.2 147.3 L 349.6 153.9 L 360.2 161.9 L 366.7 171.3 L 369.0 181.8 L 367.1 192.9 L 361.3 204.6 L 351.7 216.4 L 338.7 228.2 L 322.7 239.5 L 304.1 250.1 L 283.5 259.8 L 261.4 268.4 L 238.5 275.7 L 215.2 281.5 L 192.3 285.9 L 170.2 288.6 L 149.4 289.7 L 130.5 289.2 L 113.8 287.2 L 99.6 283.7 L 88.3 279.1 L 79.9 273.3 L 74.7 266.5 L 72.5 259.1 L 73.4 251.2 L 77.1 243.0 L 83.4 234.7 L 92.1 226.6 L 102.8 218.9 L 115.2 211.7 L 128.8 205.2 L 143.2 199.5 L 158.0 194.8 L 172.8 191.1 L 187.2 188.5 L 200.7 186.9 L 213.2 186.4 L 224.3 186.8 L 233.7 188.2 L 241.4 190.4 L 247.2 193.3 L 251.1 196.7 L 253.1 200.5 L 253.4 204.6 L 251.9 208.8 L 249.0 213.0 L 244.8 217.0 L 239.7 220.7 L 233.8 223.9 L 227.5 226.7 L 221.1 229.0 L 214.8 230.6 L 208.9 231.6 L 203.6 232.1 L 199.2 232.0 L 195.7 231.3 L 193.4 230.3"); }
.fig-m .offer { left: 132px; top: 192px; width: 126px; padding: 10px 12px; gap: 4px; }
.fig-m .offer__k { font-size: 10px; letter-spacing: .14em; }
.fig-m .offer__t { font-size: 13px; }
.fig-m .celebrant { left: 14px; top: 8px; width: 138px; height: 150px; animation: pull-m 5s ease-in-out infinite; }
@keyframes pull-m { 0%, 100% { transform: none; } 50% { transform: translate(8px, 5px) rotate(2deg); } }
.fig-m .lbl { gap: 6px; font-size: 10px; letter-spacing: .14em; }
.fig-m .lbl::before { width: 14px; }

/* 03 follow-through */
.ft { background: #0f2f3a; color: #f5f1e6; }
.page .ft a { color: #f5f1e6; }
.page .ft a:hover { color: #78cdc6; }
.ft .lede { color: #cfdcdf; }
.ft__body { font-size: 15px; line-height: 1.6; color: #abc0c8; }
.ft__quote { padding-left: 14px; border-left: 2px solid #ec7257; font-size: 20px; line-height: 1.35; color: #f5f1e6; }
.wb { position: relative; display: flex; flex-direction: column; gap: 5px; padding-top: 150px; margin-top: 8px; overflow: hidden; }
.wb__glow { display: none; }
.wb__builder { position: absolute; left: 0; top: 0; width: 144px; height: 147px; display: block; z-index: 1; }
.wb__stack { display: flex; flex-direction: column; gap: 5px; }
.wb__shelf--top { height: 18px; background: #efeee5; border-radius: 2px; margin-top: 2px; }
.wb__shelf--base { height: 16px; background: #c9cfc8; margin-top: -5px; }
.blk {
  display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 12px; border-radius: 2px;
  color: #102d3b; font-size: 14px; font-weight: 500; box-shadow: inset 0 -3px 0 rgb(16 45 59/.18);
  animation: slidein-m 12s cubic-bezier(.2, .9, .3, 1.2) infinite both;
}
@keyframes slidein-m { 0% { transform: translateX(140%); opacity: 0; } 7% { transform: translateX(-5px); opacity: 1; } 8.5% { transform: translateX(0); } 90% { transform: translateX(0); opacity: 1; } 97%, 100% { transform: translateX(0); opacity: 0; } }
.b1 { animation-delay: .2s; } .b2 { animation-delay: .55s; } .b3 { animation-delay: .9s; } .b4 { animation-delay: 1.25s; } .b5 { animation-delay: 1.6s; } .b6 { animation-delay: 1.95s; }
.auto { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid rgb(16 45 59/.5); border-radius: 2px; font-size: 10px; font-weight: 600; }
.approve { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; background: #102d3b; color: #faf7ed; border-radius: 2px; font-size: 10px; font-weight: 600; }
.chips--3 .chip, .chips .chip { justify-content: center; }

/* ---------- 04 Closer: the party (phone kernel) ----------
   Vertical positions are the artboard's percentages of 776px, written in px so
   the light stays put when copy wraps; x is anchored to the centre.          */
.closer {
  --fx: calc(50% - 78px); --fy: 132px; --feet: 194px;
  --a: var(--arrival); --dark-base: rgb(78 102 118/.38);
  position: relative; overflow: hidden; isolation: isolate; min-height: 776px; color: var(--it-ink);
}
.closer__field { position: absolute; inset: 0; z-index: -9; background: radial-gradient(ellipse 62% 80% at var(--fx) var(--fy), #fff8ea 0%, #f8f1e3 24%, #e9ebe6 56%, #cfd8d7 100%); }
.closer__floor { position: absolute; inset: 0; z-index: -8; clip-path: polygon(0 190px, 100% 209.5px, 100% 100%, 0 100%); background: linear-gradient(180deg, rgb(244 240 230/.7), rgb(226 229 224/.6)); }
.closer__dark {
  --rx: calc(190px + 140px * var(--a)); --ry: calc(290px + 270px * var(--a));
  position: absolute; inset: -40px; z-index: -7;
  background: url(../assets/img/fog-mobile.webp) center/cover no-repeat, linear-gradient(var(--dark-base), var(--dark-base));
  -webkit-mask-image: radial-gradient(ellipse var(--rx) var(--ry) at calc(50% - 37.6px) 428px, transparent 0, transparent 64%, #000 100%);
  mask-image: radial-gradient(ellipse var(--rx) var(--ry) at calc(50% - 37.6px) 428px, transparent 0, transparent 64%, #000 100%);
  animation: fogrecede-m 16s ease-in-out infinite alternate;
}
@keyframes fogrecede-m { from { transform: scale(1); } to { transform: scale(1.07) translateY(-20px); } }
.closer__swirl { position: absolute; inset: 0; z-index: -6; transform-origin: var(--fx) var(--fy); animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.closer__sheen { position: absolute; inset: -10%; filter: blur(30px) saturate(1.25); opacity: calc((.25 + .6 * var(--a)) * var(--party)); animation: sheen 22s ease-in-out infinite alternate; }
.closer__sheen::before, .closer__sheen::after { content: ""; position: absolute; inset: 0; }
.closer__sheen::before {
  background: radial-gradient(ellipse 34% 12% at 20% 12%, rgb(255 140 200/.75), transparent 70%), radial-gradient(ellipse 30% 10% at 80% 32%, rgb(110 200 255/.7), transparent 70%), radial-gradient(ellipse 34% 12% at 30% 62%, rgb(180 150 255/.6), transparent 70%), radial-gradient(ellipse 28% 10% at 86% 82%, rgb(140 235 170/.6), transparent 70%), radial-gradient(ellipse 26% 10% at 10% 40%, rgb(255 205 110/.75), transparent 70%);
  animation: hue 18s linear infinite;
}
.closer__sheen::after { display: none; }
@keyframes sheen { from { transform: translate(-2%, 1%) rotate(-2deg); } to { transform: translate(2%, -2%) rotate(3deg); } }
.closer__path { position: absolute; inset: 0; z-index: -5; filter: blur(10px); mix-blend-mode: screen; opacity: calc(.3 + .7 * var(--a)); }
.closer__path::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(calc(50% - 97.5px) 194px, calc(50% - 58.5px) 195.6px, 100% 326px, 100% 100%, 0 100%, 0 310.4px);
  background: radial-gradient(ellipse 95% 75% at var(--fx) var(--feet), rgb(var(--emit-core)/.95) 0%, rgb(var(--emit-warm)/.55) 35%, rgb(var(--emit-warm)/.2) 100%);
}
.closer__prism { position: absolute; inset: 0; z-index: -4; filter: blur(10px) saturate(1.3); mix-blend-mode: multiply; opacity: calc((.25 + .55 * var(--a)) * var(--party)); }
.closer__prism::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(var(--fx) 132px, 100% 310.4px, 100% 100%, calc(50% - 39px) 100%);
  -webkit-mask: linear-gradient(180deg, transparent 124px, #000 264px, #000 543px, transparent 776px);
  mask: linear-gradient(180deg, transparent 124px, #000 264px, #000 543px, transparent 776px);
  background: linear-gradient(60deg, rgb(255 120 160/0) 18%, rgb(255 120 160/.5) 26%, rgb(255 170 90/.5) 34%, rgb(255 220 100/.45) 42%, rgb(130 220 140/.42) 50%, rgb(90 190 240/.45) 58%, rgb(160 130 255/.5) 66%, rgb(160 130 255/0) 74%) 0 0/200% 100%;
  animation: refract-m 9s ease-in-out infinite alternate;
}
@keyframes refract-m { from { background-position: 0 0; } to { background-position: 100% 0; } }
.closer__beam { position: absolute; inset: 0; z-index: -3; filter: blur(30px); mix-blend-mode: screen; opacity: calc(.15 + .45 * var(--a)); }
.closer__beam::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(var(--fx) 132px, 100% 481px, 100% 100%, calc(50% - 117px) 100%);
  background: linear-gradient(90deg, rgb(var(--emit-warm)/.85), rgb(var(--emit-warm)/.35) 100%);
}
.closer__bloom {
  --bs: calc(.5 + .5 * var(--a));
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse calc(170px * var(--bs)) calc(30px * var(--bs)) at var(--fx) var(--feet), rgb(255 252 244/1), rgb(var(--emit-core)/0)),
    radial-gradient(circle at var(--fx) var(--fy), rgb(255 252 244/1) 0, rgb(var(--emit-core)/.85) calc(70px * var(--bs)), rgb(var(--emit-warm)/.45) calc(170px * var(--bs)), rgb(var(--emit-warm)/0) calc(360px * var(--bs)));
  animation: bloom 6s ease-in-out infinite;
}
@keyframes bloom { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .9; } }
.closer__seam { position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: -1; background: linear-gradient(#0f2f3a, rgb(15 47 58/0)); }
.closer__seam--foot { top: auto; bottom: 0; height: 100px; background: linear-gradient(rgb(250 247 237/0), #faf7ed); }
/* mass and magnetism: light bends around his presence */
.lensing { position: absolute; left: var(--fx); top: var(--fy); width: 0; height: 0; z-index: -1; transform: rotate(-8deg) scaleY(.6); pointer-events: none; }
.bend { position: absolute; left: 0; top: 0; border-radius: 50%; animation: bendspin var(--d, 40s) linear infinite; }
@keyframes bendspin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.bend--w { width: 190px; height: 190px; border: 2px solid rgb(255 250 236/.95); -webkit-mask: conic-gradient(#000 0 16%, transparent 28% 46%, #000 58% 70%, transparent 84%); mask: conic-gradient(#000 0 16%, transparent 28% 46%, #000 58% 70%, transparent 84%); filter: drop-shadow(0 0 6px rgb(255 238 205/.9)); --d: 26s; }
.bend--r { width: 300px; height: 300px; background: conic-gradient(rgb(255 140 200/.85), rgb(255 210 120/.8), rgb(140 230 170/.75), rgb(110 200 255/.8), rgb(180 150 255/.85), rgb(255 140 200/.85)); -webkit-mask: radial-gradient(closest-side, transparent 0 94%, #000 96% 98%, transparent 100%); mask: radial-gradient(closest-side, transparent 0 94%, #000 96% 98%, transparent 100%); filter: blur(1.5px); opacity: .55; animation-direction: reverse; --d: 48s; }
.bend--x { width: 430px; height: 430px; border: 1px solid rgb(255 250 236/.7); -webkit-mask: conic-gradient(transparent 0 10%, #000 22% 40%, transparent 52% 64%, #000 76% 90%, transparent 100%); mask: conic-gradient(transparent 0 10%, #000 22% 40%, transparent 52% 64%, #000 76% 90%, transparent 100%); opacity: .7; --d: 64s; }
.closer__motes { position: absolute; top: 0; left: 50%; width: 390px; height: 776px; margin-left: -195px; pointer-events: none; }
.mote {
  position: absolute; left: 0; top: 0; z-index: 0; width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 12px rgb(255 255 255/.9);
  background: radial-gradient(circle at 35% 35%, #fff, rgb(255 255 255/0) 70%), conic-gradient(#ff9ad5, #ffd27a, #9ff0b5, #8fd8ff, #c3a8ff, #ff9ad5);
  offset-rotate: 0deg; offset-anchor: center; animation: orbit var(--d, 14s) linear infinite;
}
.mp1 { offset-path: path("M 186.3 122.3 A 70 30 -8 1 1 47.7 141.7 A 70 30 -8 1 1 186.3 122.3 Z"); }
.mp2 { offset-path: path("M 225.9 116.7 A 110 46 -8 1 1 8.1 147.3 A 110 46 -8 1 1 225.9 116.7 Z"); }
.mp3 { offset-path: path("M 275.4 109.7 A 160 66 -8 1 1 -41.4 154.3 A 160 66 -8 1 1 275.4 109.7 Z"); }
.mp4 { offset-path: path("M 211.1 118.8 A 95 40 -8 1 1 22.9 145.2 A 95 40 -8 1 1 211.1 118.8 Z"); }
.mp5 { offset-path: path("M 255.6 112.5 A 140 58 -8 1 1 -21.6 151.5 A 140 58 -8 1 1 255.6 112.5 Z"); }
.mp6 { display: none; }
.closer__guide {
  position: absolute; z-index: 1; display: block; width: 118px; height: 154px;
  left: calc(var(--fx) - 59px); top: calc(var(--feet) - 152px);
  filter: drop-shadow(0 0 calc(22px * var(--a)) rgb(var(--emit-core)/.95));
  animation: float-m 5s ease-in-out infinite;
}
@keyframes float-m { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.closer__stage { position: relative; z-index: 2; padding: 310px var(--padx) 48px; }
.closer__copy { display: flex; flex-direction: column; gap: 18px; }
.closer__title { margin: 0; font-size: 42px; line-height: 1.06; font-weight: 400; }
.closer__knock { margin: 6px 0 0; font-size: 22px; line-height: 1.3; font-weight: 500; }
.closer__actions { display: flex; flex-direction: column; gap: 18px; }
.closer__actions .tl { align-self: flex-start; }
.closer__note { font-size: 14px; line-height: 1.5; color: #4e6876; }

/* ---------- Footer ---------- */
.site-footer { padding: 20px var(--padx) 28px; display: flex; flex-direction: column; gap: 12px; background: #faf7ed; }
.foot__brand { display: contents; }
.foot__logo { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; order: 1; }
.foot__logo img { display: block; width: 140px; height: 28px; }
.foot__nav { order: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
.page .foot__nav a { display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; }
.foot__legal { order: 3; font-size: 12px; line-height: 1.5; color: #4e6876; }

/* ---------- Tablet (768–1279): same phone composition, roomier type ---------- */
@media (min-width: 768px) {
  /* copy is shorter on a wider column: let the doorway follow it instead of a fixed 1000px frame */
  .hero { min-height: 0; }
  .hero__spacer { flex-basis: calc(440px * var(--km)); }
  .hero__haze {
    background: linear-gradient(180deg,
      rgb(250 247 237/.98) 0%,
      rgb(250 247 237/.95) calc(100% - 440px * var(--km)),
      rgb(250 247 237/.4) calc(100% - 330px * var(--km)),
      rgb(250 247 237/0) calc(100% - 250px * var(--km)));
  }
  .hero__title { font-size: 56px; }
  .h2 { font-size: 52px; }
  .lede { font-size: 18px; }
  .cast__title { font-size: 36px; }
  .closer__title { font-size: 52px; }
  .ft__body { font-size: 16px; }
}

/* =====================================================================
   DESKTOP (>= 1280px) — the 1440 artboard
   ===================================================================== */
@media (min-width: 1280px) {
  .dt { display: inline; }

  /* stage: artboard coordinates, centred, scaled by --k */
  .hero, .cast, .disc, .acq, .ft, .closer { height: calc(var(--H) * var(--u)); min-height: 0; }
  .stage {
    box-sizing: border-box;
    position: absolute; top: 0; left: 50%; width: 1440px; height: calc(var(--H) * 1px);
    transform: translateX(-50%) scale(var(--k)); transform-origin: 50% 0;
  }

  .h2 { font-size: 64px; line-height: 1.04; letter-spacing: -.01em; }
  .lede { font-size: 19px; line-height: 1.6; }
  .kick-row { gap: 14px; }
  .kick-row__line { width: 22px; }
  .btn { display: inline-flex; padding: 0 26px; }
  .chip { height: 28px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chips--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw { --gap: 48px; --mfs: 13px; --hfs: 15px; --ics: 22px; }

  /* ---------- Hero (860) ---------- */
  .hero { --H: 860; display: block; }
  .hero__fog {
    inset: -40px;
    background: url(../assets/img/fog-desktop.webp) center/cover no-repeat, linear-gradient(rgb(17 39 53/.64), rgb(17 39 53/.64));
    animation: fogdrift-d 38s ease-in-out infinite alternate;
  }
  @keyframes fogdrift-d { from { transform: translate3d(-24px, 0, 0) scale(1.02); } to { transform: translate3d(24px, -10px, 0) scale(1.06); } }
  .hero__haze {
    background: linear-gradient(90deg,
      rgb(250 247 237/.97) calc(50% - 720 * var(--u)),
      rgb(250 247 237/.93) calc(50% - 288 * var(--u)),
      rgb(250 247 237/.55) calc(50% - 43.2 * var(--u)),
      rgb(250 247 237/.08) calc(50% + 172.8 * var(--u)),
      rgb(250 247 237/0) calc(50% + 288 * var(--u)));
  }
  .hero__floor { clip-path: polygon(0 82%, 100% 73.5%, 100% 100%, 0 100%); background: linear-gradient(180deg, rgb(214 214 204/.35), rgb(240 236 226/.55)); }
  .hero__seam { height: calc(90 * var(--u)); }
  .hero__stage { display: block; }
  .hero__spacer { display: none; }
  .hero__scene { display: contents; }

  .hero__spill { display: block; position: absolute; inset: 0; z-index: -6; filter: blur(14px); opacity: calc(.3 + .7 * var(--veil)); }
  .hero__spill::before { content: ""; position: absolute; inset: 0; clip-path: polygon(73% 73%, 91% 73%, 70% 100%, 24% 100%); background: radial-gradient(ellipse 55% 60% at 82% 74%, rgb(var(--emit-core)/.95), rgb(var(--emit-warm)/.4) 55%, rgb(var(--emit-warm)/.08) 100%); }
  .veil { left: 1072px; top: 136px; width: 226px; height: 504px; z-index: -5; }
  .veil__glow {
    left: -300px; right: -300px; top: -170px; bottom: -130px;
    background: radial-gradient(ellipse 46% 50% at 50% 56%, rgb(var(--emit-warm)/.7), rgb(var(--emit-warm)/.22) 52%, rgb(var(--emit-warm)/0) 78%);
    filter: blur(24px); animation: breathe-d 7s ease-in-out infinite;
  }
  @keyframes breathe-d { 0%, 100% { transform: scale(1); filter: blur(24px) brightness(1); } 50% { transform: scale(1.06); filter: blur(24px) brightness(1.08); } }
  .veil__back { display: block; position: absolute; inset: -10px -26px 0 -18px; filter: blur(22px); opacity: calc(.3 + .4 * var(--veil)); animation: billow 9s ease-in-out infinite; }
  .veil__back::before { content: ""; position: absolute; inset: 0; border-radius: 46% 54% 6% 6% / 20% 26% 0 0; transform: skewY(-6deg) translateX(18px); background: linear-gradient(180deg, #fff1d6, #fff8ea 60%, #ffeccb); }
  @keyframes billow { 0%, 100% { transform: skewX(0) translateX(0); } 50% { transform: skewX(4deg) translateX(10px); } }
  .veil__body { filter: blur(9px); }
  .veil__folds { filter: blur(5px); }
  .veil__folds::before {
    transform: skewY(-6deg) skewX(-2deg);
    background: repeating-linear-gradient(90deg, rgb(255 255 255/0) 0 14px, rgb(214 180 128/.3) 21px, rgb(255 255 255/0) 29px, rgb(255 255 255/0) 41px, rgb(214 180 128/.2) 47px, rgb(255 255 255/0) 55px);
    animation: folds-d 11s ease-in-out infinite alternate;
  }
  @keyframes folds-d { from { transform: skewY(-6deg) translateX(-18px); } to { transform: skewY(-6deg) translateX(18px); } }
  .veil__hem { left: -90px; right: -90px; bottom: -34px; height: 76px; filter: blur(10px); }
  .hero__guide, .hero__rim, .hero__glint { left: 868px; top: 454px; width: 144px; height: 200px; }
  .hero__guide { filter: drop-shadow(10px -2px 16px rgb(var(--emit-warm)/.75)); }

  .site-header { position: absolute; left: 0; right: 0; top: 0; height: 104px; padding: 0 120px; }
  .brand { min-width: 0; }
  .brand__img { width: 164px; height: 33px; }
  .header__actions { display: none; }
  html.js .primary-nav, .primary-nav, html:not(.js) .primary-nav {
    position: relative; top: auto; right: auto; display: flex; flex-direction: row; align-items: center; gap: 2px;
    min-width: 0; padding: 6px 6px 6px 10px; background: rgb(250 247 237/.5); border-radius: 4px;
    border: 1px solid rgb(255 255 255/.6); box-shadow: 0 8px 24px rgb(16 45 59/.1);
  }
  .primary-nav::before, .primary-nav::after { display: block; }
  .primary-nav .navl { width: auto; }
  .primary-nav__sep { width: 1px; height: 20px; margin: 0 6px; }
  .primary-nav .ghost { margin: 0 0 0 8px; background: rgb(250 247 237/.55); }

  .hero__copy { position: absolute; left: 120px; top: 184px; width: 680px; padding: 0; gap: 24px; z-index: 3; }
  .hero__title { font-size: 76px; line-height: 1.02; letter-spacing: -.015em; }
  .hero__lede { max-width: 31em; }
  .hero__actions { flex-direction: row; align-items: center; gap: 32px; margin-top: 6px; }
  .hero__actions .tl { align-self: auto; }
  .hero__tagline { margin: 6px 0 0; font-size: 14px; }

  /* ---------- Cast (440) ---------- */
  .cast { --H: 440; background: linear-gradient(180deg, #faf7ed 0%, #f6f1e4 100%); }
  .cast__floor { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: calc(120 * var(--u)); background: linear-gradient(180deg, #efe8d6, #f6f1e4); clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); }
  .cast__stage { padding: 0; display: block; }
  .cast__intro { position: absolute; left: 120px; top: 92px; width: 300px; gap: 14px; }
  .cast__title { font-size: 40px; }
  .cast__lede { font-size: 17px; }
  .cast__grid { position: absolute; left: 470px; right: 80px; top: 70px; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .page .role { gap: 10px; min-height: 0; }
  .spot {
    top: -110px; width: 260px; height: 340px; margin-left: -130px;
    background: linear-gradient(180deg, rgb(255 243 214/0), rgb(255 243 214/.75));
    clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); filter: blur(12px); opacity: .85;
  }
  .role__img { height: 134px; animation-name: bob-d; }
  .role__img--explore { width: 150px; }
  .role__img--celebrate { width: 124px; }
  .role__img--build { width: 131px; }
  @keyframes bob-d { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .role__name { font-size: 22px; }
  .role__line { font-size: 15px; max-width: 15em; line-height: 1.45; min-height: 44px; }
  .role__go { display: block; position: relative; z-index: 1; font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: #ec7257; text-underline-offset: 5px; }
  .role--achieve { grid-column: auto; justify-self: stretch; flex-direction: column !important; gap: 10px !important; margin-top: 0; }
  .role--achieve .spot { display: block; animation-delay: -4s; opacity: .45; }
  .role__text { display: contents; }
  .role--achieve .role__line { min-height: 44px; line-height: 1.45; text-align: center; font-size: 15px; text-decoration: none; }
  .encore { width: 134px; height: 134px; }
  /* the design's ".role img" rule also reaches the ghost on desktop: it sits above the sheen and bobs */
  .encore__ghost { width: 103px; height: 134px; z-index: 1; animation: bob-d 4.6s ease-in-out infinite; }
  .encore__sheen { width: 103px; height: 134px; margin-left: -51.5px; }

  /* ---------- content columns ---------- */
  .col { position: absolute; padding: 116px 0 0 120px; gap: 22px; }
  .col > * { width: 500px; }
  .col > .tl { align-self: stretch; }
  .col > .pw { margin-top: 8px; }

  /* 01 discovery (880) */
  .disc { --H: 880; }
  .col > .disc__visual { position: absolute; left: 700px; top: 104px; width: 640px; height: 680px; margin: 0; }
  .disc__fig { left: 0; width: 640px; height: 680px; margin: 0; transform: none; }
  .buried--m { display: none; }
  .buried--d { display: flex; }
  .buried { gap: 20px 16px; padding: 6px 0; filter: blur(1.6px); }
  .buried span { font-size: 14px; padding: 6px 10px; }
  .lens {
    left: 176px; top: 58px; width: 440px; height: 440px; border-width: 8px;
    box-shadow: 0 0 0 14px rgb(120 205 198/.28), 0 30px 60px rgb(16 45 59/.16);
    gap: 12px; padding: 0 62px; animation-name: zoomin-d;
  }
  @keyframes zoomin-d { from { transform: translate(-120px, 90px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
  .lens__bar { gap: 8px; font-size: 11px; }
  .lens__bar i { width: 8px; height: 8px; animation-name: pulse-d; }
  @keyframes pulse-d { 0%, 100% { box-shadow: 0 0 0 0 rgb(41 117 119/.45); } 50% { box-shadow: 0 0 0 6px rgb(41 117 119/0); } }
  .q { font-size: 22px; }
  .resolving { display: flex; flex-direction: column; gap: 6px; height: 0; overflow: visible; }
  .resolving b { display: block; height: 8px; border-radius: 2px; background: linear-gradient(90deg, #d8e9e4 0%, #bfe2db 40%, #d8e9e4 80%) 0 0/200% 100%; opacity: 0; animation: resolve 11s linear 1.7s infinite; }
  .resolving b:nth-child(2) { width: 80%; }
  .resolving b:nth-child(3) { width: 60%; }
  @keyframes resolve { 0%, 32% { opacity: 0; background-position: 100% 0; } 34% { opacity: 1; } 36% { background-position: 0 0; } 38% { background-position: 100% 0; } 40% { background-position: 0 0; opacity: 1; } 43%, 100% { opacity: 0; } }
  .ans { display: flex; flex-direction: column; gap: 9px; }
  .ans__t { font-size: 13px; }
  .lens__row { grid-template-columns: 96px 1fr; gap: 10px; font-size: 15px; line-height: 1.4; }
  .lens__row em { font-size: 11px; letter-spacing: .12em; }
  .explorer { left: 0; top: 432px; width: 240px; height: 214px; animation: peer 6s ease-in-out infinite; }

  /* 02 acquisition (880) */
  .acq { --H: 880; }
  .acq .col { padding-left: 820px; }
  .col > .acq__visual { position: absolute; left: 120px; top: 110px; width: 680px; height: 680px; }
  .fig-m { display: none; }
  .fig-d { display: block; inset: 0; }
  .fig-d .well, .fig-d .mass, .fig-d .einstein { top: 340px; }
  .fig-d .mass { width: 230px; height: 230px; }
  .fig-d .einstein { width: 300px; height: 300px; }
  .fig-d .orbit { top: 50%; animation: oglow-d 5s ease-in-out infinite; }
  @keyframes oglow-d { 0%, 100% { box-shadow: 0 0 10px rgb(229 175 82/.25), inset 0 0 10px rgb(229 175 82/.18); } 50% { box-shadow: 0 0 22px rgb(229 175 82/.55), inset 0 0 18px rgb(229 175 82/.35); } }
  .fig-d .o1 { offset-path: path("M 650.5 262.6 A 320 125 -14 1 1 29.5 417.4 A 320 125 -14 1 1 650.5 262.6 Z"); animation: orbit 28s linear infinite; }
  .fig-d .o2 { offset-path: path("M 572.9 281.9 A 240 93 -14 1 1 107.1 398.1 A 240 93 -14 1 1 572.9 281.9 Z"); animation: orbit 20s linear infinite; }
  .fig-d .o3 { offset-path: path("M 500.1 300.1 A 165 64 -14 1 1 179.9 379.9 A 165 64 -14 1 1 500.1 300.1 Z"); animation: orbit 13s linear infinite; }
  .fig-d .dot { width: 12px; height: 12px; box-shadow: 0 0 10px currentColor; }
  .fig-d .amb { width: 30px; height: 30px; }
  .fig-d .amb::after { width: 10px; height: 10px; box-shadow: 0 0 10px #ec7257; }
  .fig-d .dust { width: 6px; height: 6px; }
  .fig-d .d1 { offset-path: path("M 660.2 260.2 L 659.8 280.2 L 651.4 301.6 L 635.6 323.6 L 613.0 345.6 L 584.5 367.0 L 550.7 387.4 L 512.6 406.3 L 471.3 423.2 L 428.0 437.8 L 383.6 449.7 L 339.3 458.8 L 296.2 464.8 L 255.2 467.7 L 217.5 467.6 L 183.7 464.5 L 154.6 458.6 L 130.8 450.0 L 112.7 439.2 L 100.5 426.4 L 94.4 412.0 L 94.3 396.5 L 100.0 380.2 L 111.1 363.6 L 127.2 347.1 L 147.6 331.1 L 171.7 316.0 L 198.8 302.1 L 228.0 289.8 L 258.5 279.2 L 289.4 270.6 L 320.0 264.1 L 349.5 259.8 L 377.1 257.7 L 402.3 257.6 L 424.5 259.6 L 443.3 263.4 L 458.4 268.9 L 469.5 275.7 L 476.7 283.7 L 479.9 292.5 L 479.4 301.9 L 475.3 311.5 L 468.1 321.1 L 458.1 330.3 L 445.9 339.0 L 432.1 346.8 L 417.1 353.7 L 401.5 359.5 L 385.9 364.0 L 370.9 367.3 L 356.8 369.3 L 344.2 370.1 L 333.3 369.8 L 324.4 368.4 L 317.8 366.2 L 313.4 363.3 L 311.2 359.9 L 311.2 356.3 L 313.1 352.6 L 316.8 349.0"); }
  .fig-d .d2 { offset-path: path("M 527.1 408.2 L 484.7 427.0 L 439.1 443.3 L 391.9 456.9 L 344.1 467.5 L 297.1 475.0 L 252.1 479.1 L 210.1 479.8 L 172.0 477.2 L 138.7 471.5 L 111.0 462.9 L 89.3 451.5 L 74.1 437.9 L 65.5 422.4 L 63.6 405.3 L 68.2 387.3 L 79.0 368.7 L 95.7 350.0 L 117.5 331.6 L 143.7 314.1 L 173.7 297.8 L 206.5 283.1 L 241.3 270.3 L 277.0 259.7 L 312.8 251.3 L 347.7 245.4 L 381.0 242.0 L 411.8 241.0 L 439.5 242.5 L 463.6 246.2 L 483.5 252.0 L 498.9 259.6 L 509.8 268.7 L 515.9 279.1 L 517.5 290.3 L 514.6 302.1 L 507.7 314.1 L 497.0 326.0 L 483.2 337.5 L 466.7 348.2 L 448.3 358.0 L 428.5 366.5 L 408.0 373.8 L 387.4 379.5 L 367.3 383.8 L 348.3 386.5 L 330.9 387.7 L 315.5 387.4 L 302.5 385.9 L 292.0 383.2 L 284.2 379.5 L 279.1 375.2 L 276.7 370.2 L 276.7 365.1 L 279.1 359.8 L 283.4 354.7 L 289.3 350.0 L 296.3 345.9 L 304.0 342.4 L 311.9 339.8 L 319.6 338.1"); }
  .fig-d .d3 { offset-path: path("M 206.9 488.1 L 164.9 486.7 L 127.8 481.7 L 96.3 473.4 L 71.1 462.0 L 52.7 447.9 L 41.4 431.6 L 37.4 413.5 L 40.6 394.0 L 50.8 373.7 L 67.4 353.1 L 90.0 332.8 L 117.9 313.1 L 150.2 294.6 L 186.1 277.7 L 224.5 262.8 L 264.4 250.1 L 304.8 239.9 L 344.7 232.4 L 383.2 227.7 L 419.3 225.8 L 452.2 226.7 L 481.3 230.1 L 505.9 236.1 L 525.6 244.2 L 540.1 254.3 L 549.2 266.0 L 553.0 278.9 L 551.5 292.7 L 545.1 307.0 L 534.1 321.4 L 518.9 335.4 L 500.3 348.9 L 478.8 361.4 L 455.2 372.7 L 430.1 382.5 L 404.3 390.7 L 378.6 397.2 L 353.6 401.8 L 330.0 404.5 L 308.4 405.4 L 289.1 404.6 L 272.7 402.3 L 259.3 398.5 L 249.2 393.5 L 242.4 387.5 L 238.9 380.8 L 238.5 373.7 L 241.0 366.4 L 246.1 359.2 L 253.3 352.2 L 262.3 345.8 L 272.5 340.1 L 283.5 335.3 L 294.7 331.4 L 305.6 328.5 L 315.9 326.7 L 325.0 325.9 L 332.8 326.2 L 338.8 327.2 L 342.8 329.1"); }
  .fig-d .d4 { offset-path: path("M 19.8 419.8 L 20.2 399.8 L 28.6 378.4 L 44.4 356.4 L 67.0 334.4 L 95.5 313.0 L 129.3 292.6 L 167.4 273.7 L 208.7 256.8 L 252.0 242.2 L 296.4 230.3 L 340.7 221.2 L 383.8 215.2 L 424.8 212.3 L 462.5 212.4 L 496.3 215.5 L 525.4 221.4 L 549.2 230.0 L 567.3 240.8 L 579.5 253.6 L 585.6 268.0 L 585.7 283.5 L 580.0 299.8 L 568.9 316.4 L 552.8 332.9 L 532.4 348.9 L 508.3 364.0 L 481.2 377.9 L 452.0 390.2 L 421.5 400.8 L 390.6 409.4 L 360.0 415.9 L 330.5 420.2 L 302.9 422.3 L 277.7 422.4 L 255.5 420.4 L 236.7 416.6 L 221.6 411.1 L 210.5 404.3 L 203.3 396.3 L 200.1 387.5 L 200.6 378.1 L 204.7 368.5 L 211.9 358.9 L 221.9 349.7 L 234.1 341.0 L 247.9 333.2 L 262.9 326.3 L 278.5 320.5 L 294.1 316.0 L 309.1 312.7 L 323.2 310.7 L 335.8 309.9 L 346.7 310.2 L 355.6 311.6 L 362.2 313.8 L 366.6 316.7 L 368.8 320.1 L 368.8 323.7 L 366.9 327.4 L 363.2 331.0"); }
  .fig-d .d5 { offset-path: path("M 152.9 271.8 L 195.3 253.0 L 240.9 236.7 L 288.1 223.1 L 335.9 212.5 L 382.9 205.0 L 427.9 200.9 L 469.9 200.2 L 508.0 202.8 L 541.3 208.5 L 569.0 217.1 L 590.7 228.5 L 605.9 242.1 L 614.5 257.6 L 616.4 274.7 L 611.8 292.7 L 601.0 311.3 L 584.3 330.0 L 562.5 348.4 L 536.3 365.9 L 506.3 382.2 L 473.5 396.9 L 438.7 409.7 L 403.0 420.3 L 367.2 428.7 L 332.3 434.6 L 299.0 438.0 L 268.2 439.0 L 240.5 437.5 L 216.4 433.8 L 196.5 428.0 L 181.1 420.4 L 170.2 411.3 L 164.1 400.9 L 162.5 389.7 L 165.4 377.9 L 172.3 365.9 L 183.0 354.0 L 196.8 342.5 L 213.3 331.8 L 231.7 322.0 L 251.5 313.5 L 272.0 306.2 L 292.6 300.5 L 312.7 296.2 L 331.7 293.5 L 349.1 292.3 L 364.5 292.6 L 377.5 294.1 L 388.0 296.8 L 395.8 300.5 L 400.9 304.8 L 403.3 309.8 L 403.3 314.9 L 400.9 320.2 L 396.6 325.3 L 390.7 330.0 L 383.7 334.1 L 376.0 337.6 L 368.1 340.2 L 360.4 341.9"); }
  .fig-d .d6 { offset-path: path("M 473.1 191.9 L 515.1 193.3 L 552.2 198.3 L 583.7 206.6 L 608.9 218.0 L 627.3 232.1 L 638.6 248.4 L 642.6 266.5 L 639.4 286.0 L 629.2 306.3 L 612.6 326.9 L 590.0 347.2 L 562.1 366.9 L 529.8 385.4 L 493.9 402.3 L 455.5 417.2 L 415.6 429.9 L 375.2 440.1 L 335.3 447.6 L 296.8 452.3 L 260.7 454.2 L 227.8 453.3 L 198.7 449.9 L 174.1 443.9 L 154.4 435.8 L 139.9 425.7 L 130.8 414.0 L 127.0 401.1 L 128.5 387.3 L 134.9 373.0 L 145.9 358.6 L 161.1 344.6 L 179.7 331.1 L 201.2 318.6 L 224.8 307.3 L 249.9 297.5 L 275.7 289.3 L 301.4 282.8 L 326.4 278.2 L 350.0 275.5 L 371.6 274.6 L 390.9 275.4 L 407.3 277.7 L 420.7 281.5 L 430.8 286.5 L 437.6 292.5 L 441.1 299.2 L 441.5 306.3 L 439.0 313.6 L 433.9 320.8 L 426.7 327.8 L 417.7 334.2 L 407.5 339.9 L 396.5 344.7 L 385.3 348.6 L 374.4 351.5 L 364.1 353.3 L 355.0 354.1 L 347.2 353.8 L 341.2 352.8 L 337.2 350.9"); }
  .fig-d .offer { left: 250px; top: 268px; width: 178px; padding: 16px 18px; gap: 6px; }
  .fig-d .offer__k { font-size: 11px; letter-spacing: .16em; }
  .fig-d .offer__t { font-size: 16px; }
  .fig-d .celebrant { left: 10px; top: 60px; width: 196px; height: 212px; animation: pull-d 5s ease-in-out infinite; }
  @keyframes pull-d { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(10px, 6px) rotate(2deg); } }
  .fig-d .lbl { gap: 8px; font-size: 11px; letter-spacing: .16em; }
  .fig-d .lbl::before { width: 22px; }

  /* 03 follow-through (960) */
  .ft { --H: 960; }
  .ft .col > * { width: 520px; }
  .ft__body { font-size: 16px; line-height: 1.65; }
  .ft__quote { margin: 4px 0 0; padding-left: 18px; font-size: 22px; }
  .col > .wb { position: absolute; left: 700px; top: 70px; width: 640px; height: 760px; display: block; padding: 0; margin: 0; overflow: visible; }
  .wb__glow { display: block; position: absolute; left: 60px; right: 0; top: 40px; bottom: 60px; background: radial-gradient(ellipse 60% 55% at 55% 60%, rgb(120 205 198/.16), rgb(120 205 198/0)); }
  .wb__stack { position: absolute; right: 0; bottom: 110px; width: 400px; gap: 6px; }
  .wb__shelf { position: absolute; left: 20px; right: 0; height: 24px; margin: 0; }
  .wb__shelf--top { bottom: 86px; border-radius: 2px; }
  .wb__shelf--base { bottom: 62px; border-radius: 0 0 2px 2px; }
  .wb__builder { left: 20px; top: auto; bottom: 108px; width: 216px; height: 221px; animation: nudge 12s ease-in-out .2s infinite; }
  @keyframes nudge { 0%, 22% { transform: none; } 26% { transform: translateX(6px) rotate(1.5deg); } 30%, 100% { transform: none; } }
  .blk { height: 52px; padding: 0 16px; font-size: 15px; animation-name: slidein-d; }
  @keyframes slidein-d { 0% { transform: translateX(140%); opacity: 0; } 7% { transform: translateX(-6px); opacity: 1; } 8.5% { transform: translateX(0); } 90% { transform: translateX(0); opacity: 1; } 97%, 100% { transform: translateX(0); opacity: 0; } }
  .auto { height: 24px; padding: 0 8px; font-size: 11px; }
  .approve { gap: 6px; height: 24px; padding: 0 8px; font-size: 11px; letter-spacing: .04em; }

  /* ---------- 04 Closer (960): light anchored to the artboard centre ---------- */
  .closer {
    --H: 960;
    --fx: calc(50% - 388.8 * var(--u));
    --fy: 57%; --feet: 71%;
  }
  .closer__field { background: radial-gradient(ellipse 62% 80% at var(--fx) var(--fy), #fff8ea 0%, #f8f1e3 24%, #e9ebe6 56%, #cfd8d7 100%); }
  .closer__floor { clip-path: polygon(0 68%, 100% 82%, 100% 100%, 0 100%); }
  .closer__dark {
    --rx: calc((520 + 480 * var(--a)) * var(--u)); --ry: calc((300 + 260 * var(--a)) * var(--u));
    inset: -60px;
    background: url(../assets/img/fog-desktop.webp) center/cover no-repeat, linear-gradient(var(--dark-base), var(--dark-base));
    -webkit-mask-image: radial-gradient(ellipse var(--rx) var(--ry) at calc(50% - 144 * var(--u) - 12px) 55%, transparent 0, transparent 64%, #000 100%);
    mask-image: radial-gradient(ellipse var(--rx) var(--ry) at calc(50% - 144 * var(--u) - 12px) 55%, transparent 0, transparent 64%, #000 100%);
    animation: fogrecede-d 16s ease-in-out infinite alternate;
  }
  @keyframes fogrecede-d { from { transform: scale(1) translateX(0); } to { transform: scale(1.07) translateX(30px); } }
  .closer__sheen { filter: blur(38px) saturate(1.25); }
  .closer__sheen::before {
    background: radial-gradient(ellipse 24% 18% at 16% 32%, rgb(255 140 200/.75), transparent 70%), radial-gradient(ellipse 22% 16% at 34% 84%, rgb(110 200 255/.7), transparent 70%), radial-gradient(ellipse 22% 16% at 60% 16%, rgb(180 150 255/.6), transparent 70%), radial-gradient(ellipse 18% 14% at 90% 76%, rgb(140 235 170/.6), transparent 70%), radial-gradient(ellipse 16% 14% at 6% 68%, rgb(255 205 110/.75), transparent 70%), radial-gradient(ellipse 14% 12% at 46% 60%, rgb(255 170 120/.5), transparent 70%);
  }
  .closer__sheen::after {
    display: block;
    background: conic-gradient(from 0deg at 26% 58%, rgb(255 120 160/0), rgb(255 120 160/.28), rgb(255 200 110/.28), rgb(140 230 160/.26), rgb(110 200 255/.28), rgb(180 150 255/.28), rgb(255 120 160/0));
    -webkit-mask: radial-gradient(ellipse 34% 40% at 26% 58%, transparent 30%, #000 55%, transparent 80%);
    mask: radial-gradient(ellipse 34% 40% at 26% 58%, transparent 30%, #000 55%, transparent 80%);
    mix-blend-mode: multiply; animation: spin 40s linear infinite; transform-origin: 26% 58%;
  }
  .closer__path::before {
    clip-path: polygon(calc(50% - 420.48 * var(--u)) 71.2%, calc(50% - 357.12 * var(--u)) 71.2%, 100% 84%, 100% 100%, calc(50% - 590.4 * var(--u)) 100%);
  }
  .closer__prism::before {
    clip-path: polygon(calc(50% - 374.4 * var(--u)) 56%, 100% 6%, 100% 92%);
    -webkit-mask: linear-gradient(90deg, transparent calc(50% - 403.2 * var(--u)), #000 calc(50% - 144 * var(--u)), #000 calc(50% + 288 * var(--u)), transparent calc(50% + 720 * var(--u)));
    mask: linear-gradient(90deg, transparent calc(50% - 403.2 * var(--u)), #000 calc(50% - 144 * var(--u)), #000 calc(50% + 288 * var(--u)), transparent calc(50% + 720 * var(--u)));
    background: linear-gradient(168deg, rgb(255 120 160/0) 18%, rgb(255 120 160/.5) 26%, rgb(255 170 90/.5) 34%, rgb(255 220 100/.45) 42%, rgb(130 220 140/.42) 50%, rgb(90 190 240/.45) 58%, rgb(160 130 255/.5) 66%, rgb(160 130 255/0) 74%) 0 0/100% 200%;
    animation: refract-d 9s ease-in-out infinite alternate;
  }
  @keyframes refract-d { from { background-position: 0 0; } to { background-position: 0 100%; } }
  .closer__beam { filter: blur(36px); }
  .closer__beam::before { clip-path: polygon(calc(50% - 388.8 * var(--u)) 55%, 100% 30%, 100% 68%); background: linear-gradient(90deg, rgb(var(--emit-warm)/.85), rgb(var(--emit-warm)/.25) 100%); }
  .closer__bloom { --bs: calc((.5 + .5 * var(--a)) * var(--k)); }
  .closer__seam { height: calc(90 * var(--u)); }
  .closer__seam--foot { height: calc(110 * var(--u)); }
  .lensing { transform: rotate(-8deg) scaleY(.6) scale(var(--k)); }
  .bend--w { width: 380px; height: 380px; }
  .bend--r { width: 600px; height: 600px; }
  .bend--x { width: 860px; height: 860px; }
  .closer__motes { width: 1440px; height: 960px; margin-left: 0; transform: translateX(-50%) scale(var(--k)); transform-origin: 50% 0; }
  .mp1 { offset-path: path("M 499.3 523.3 A 170 70 -8 1 1 162.7 570.7 A 170 70 -8 1 1 499.3 523.3 Z"); }
  .mp2 { offset-path: path("M 568.7 513.6 A 240 100 -8 1 1 93.3 580.4 A 240 100 -8 1 1 568.7 513.6 Z"); }
  .mp3 { offset-path: path("M 647.9 502.5 A 320 134 -8 1 1 14.1 591.5 A 320 134 -8 1 1 647.9 502.5 Z"); }
  .mp4 { offset-path: path("M 534.0 518.5 A 205 86 -8 1 1 128.0 575.5 A 205 86 -8 1 1 534.0 518.5 Z"); }
  .mp5 { offset-path: path("M 608.3 508.0 A 280 118 -8 1 1 53.7 586.0 A 280 118 -8 1 1 608.3 508.0 Z"); }
  .mp6 { display: block; offset-path: path("M 687.5 496.9 A 360 150 -8 1 1 -25.5 597.1 A 360 150 -8 1 1 687.5 496.9 Z"); }
  .closer__guide {
    width: calc(176 * var(--u)); height: calc(229 * var(--u));
    left: calc(var(--fx) - 88 * var(--u)); top: calc(var(--feet) - 226 * var(--u));
    animation: float-d 5s ease-in-out infinite;
  }
  @keyframes float-d { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .closer__stage { position: absolute; z-index: 2; padding: 0; }
  .closer__copy { position: absolute; left: 760px; top: 200px; width: 540px; gap: 22px; }
  .closer__title { font-size: 68px; line-height: 1.04; letter-spacing: -.01em; }
  .closer__lede { max-width: 30em; }
  .closer__knock { margin: 10px 0 0; font-size: 26px; }
  .closer__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 32px; }
  .closer__actions .tl { align-self: auto; }

  /* ---------- Footer ---------- */
  .site-footer {
    padding: 40px calc(50% - 600 * var(--u)) 48px;
    flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px;
    background: radial-gradient(ellipse 52% 150px at 60% 0, rgb(var(--emit-warm)/.5), transparent), var(--it-paper);
  }
  .foot__brand { display: flex; flex-direction: column; gap: 14px; }
  .foot__logo { min-height: 33px; }
  .foot__logo img { width: 164px; height: 33px; }
  .foot__legal { font-size: 13px; line-height: normal; }
  .foot__nav { display: flex; gap: 4px; flex-wrap: wrap; }
  .page .foot__nav a { display: inline-flex; padding: 0 12px; font-size: 15px; }
}

/* ---------- Reduced motion: every loop stops; the still frame is the arrived state ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
  .orb, .mote { offset-distance: var(--od, 0%); }
}

/* ---------- Legibility halo (deviation, see README) ----------
   Where the design's muted text crosses the fog or the party light it drops
   below 4.5:1. A paper-coloured halo keeps the exact colours and layout and is
   invisible where the ground is already paper.                               */
.hero__lede, .hero__tagline, .closer__copy .kick, .closer__lede, .closer__note {
  text-shadow: 0 0 2px #faf7ed, 0 0 5px #faf7ed, 0 0 10px rgb(250 247 237/.95), 0 0 18px rgb(250 247 237/.9), 0 0 30px rgb(250 247 237/.75);
}
.lens .ans__t, .lens__row { text-shadow: 0 0 3px #f4fbf8, 0 0 6px #f4fbf8, 0 0 10px #f4fbf8; }