/* ==========================================================================
   CogMero · page styles. Tokens first, then the ten acts in order.
   Engine mechanism (.sc-stage, .sc-copy, [data-sc-*]) is never restyled here.
   ========================================================================== */

:root {
  /* brand floor */
  --paper:  #FAF7F2;
  --cream:  #FCF3E5;
  --sand:   #E9E3D8;
  --ink:    #1A1D21;
  --slate:  #596D72;
  --teal:   #0F4C5C;
  --abyss:  #072A34;
  --night:  #0B1A20;
  --dawn:   #0E2A35;
  --sky:    #5AAFC4;
  --pale:   #A9D8E3;
  --coral:  #FF5C42;
  --amber:  #F2B27A;

  /* scrollcraft roles: dark ground is the root default */
  --sc-canvas:      var(--dawn);
  --sc-surface:     #143846;
  --sc-ink:         var(--paper);
  --sc-ink-soft:    #A9C4CC;
  --sc-accent:      var(--coral);
  --sc-accent-ink:  var(--ink);
  --sc-font-display: "Bitter", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Figtree", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Figtree", system-ui, sans-serif;
  --sc-shadow-color: 196 60% 4%;
  --sc-r-sm: 6px; --sc-r-md: 10px; --sc-r-lg: 18px;
  --sc-maxw: 80rem;

  --bar-h: 4rem;
}

html.no-copy main, html.no-copy .bar { display: none; }
/* pre-sized so the engine's own height write on mount shifts nothing */
#hero { height: 240vh; } #problem { height: 260vh; } #day { height: 460vh; }
@media (min-width: 861px) { #parts { height: 320vh; } }
#film { height: 260vh; } #office { height: 220vh; } #capabilities { height: 300vh; } #contact { height: 130vh; }
@media (min-width: 861px) { #start { height: 240vh; } #trust { height: 240vh; } }
html { background: var(--sc-canvas); overflow-x: clip; }
body { overflow-x: clip; }

/* Light grounds restate ink AND color: color is inherited as a computed value. */
[data-ground="light"] {
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--slate);
  --sc-surface: var(--cream);
  color: var(--sc-ink);
}

/* ------------------------------------------------------------ typography */
.display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}
[data-ground="dark"] .display, .bar .display { font-weight: 500; letter-spacing: -0.022em; line-height: 1.1; }
.display-xl { font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.6rem); }
.display-lg { font-size: clamp(1.85rem, 1rem + 2.15vw, 3.05rem); }
.display-md { font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2rem); }
.display em, .display i { font-style: italic; font-weight: inherit; }

.t-lg { font-family: var(--sc-font-text); font-weight: 600; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.3; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.body { font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; margin: 0; }
.lede { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--sc-ink-soft); max-width: 50ch; text-wrap: pretty; margin: 0; }
.eyebrow { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #D3E3E8; margin: 0; font-weight: 500; }

.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.section { padding-block: clamp(5rem, 10vw, 9rem); position: relative; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.85rem 1.35rem; border-radius: var(--sc-r-sm);
  font: 500 0.98rem/1 var(--sc-font-text); letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary { background: var(--coral); color: var(--ink); box-shadow: var(--sc-e1); }
.btn-primary:hover { background: #FF6B53; }
.btn-ghost { background: transparent; color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 28%, transparent); }
.btn-ghost:hover { border-color: color-mix(in oklab, var(--sc-ink) 60%, transparent); }
.btn-sm { padding: 0.6rem 1rem; font-size: 0.9rem; }

/* ------------------------------------------------------------- wordmark */
.wm { display: inline-flex; align-items: center; line-height: 0; }
.wm-img { height: 1.45rem; width: auto; max-width: none; display: none; }
.bar[data-ground="light"] .wm-img-light { display: block; }
.bar[data-ground="dark"] .wm-img-dark { display: block; }

/* ------------------------------------------------------------------ bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  padding-inline: var(--sc-gutter);
  --sc-ink: var(--paper); --sc-ink-soft: #A9C4CC; color: var(--sc-ink);
  transition: color 300ms var(--sc-ease-out), background-color 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out);
  background: transparent;
}
/* Once the page has scrolled, the bar takes a translucent ground so content
   passing beneath it never collides with the lockup or the buttons. */
.bar.is-scrolled { background: color-mix(in oklab, #08151A 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 color-mix(in oklab, var(--paper) 8%, transparent); }
.bar[data-ground="light"] { --sc-ink: var(--ink); --sc-ink-soft: var(--slate); color: var(--ink); }
.bar[data-ground="light"].is-scrolled { background: color-mix(in oklab, var(--paper) 82%, transparent); box-shadow: 0 1px 0 color-mix(in oklab, var(--ink) 8%, transparent); }
.bar-nav { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; }
.bar-links { display: flex; justify-content: center; align-items: center; gap: clamp(0.9rem, 2vw, 1.75rem); }
.bar-link { position: relative; font-size: 0.9rem; font-weight: 500; color: var(--sc-ink); text-decoration: none; opacity: 0.82; padding: 0.35rem 0; white-space: nowrap; transition: opacity 140ms; }
.bar-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--coral); transform: scaleX(0); transform-origin: 0 50%; transition: transform 200ms var(--sc-ease-out); }
.bar-link:hover { opacity: 1; }
.bar-link.is-active { opacity: 1; }
.bar-link.is-active::after { transform: scaleX(1); }
.lang { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; margin-right: 0.35rem; }
.lang-opt { color: var(--sc-ink); text-decoration: none; opacity: 0.55; padding: 0.4rem 0.2rem; transition: opacity 140ms; }
.lang-opt:hover, .lang-opt.is-active { opacity: 1; }
.lang-opt.is-active { font-weight: 600; }
.lang-sep { opacity: 0.35; }
/* the phone menu button: a hamburger that turns into a cross while the menu is
   open (owner decision 2026-09-16). The "Menu" / "Close" strings from the copy
   file stay in the button, visually hidden, as its accessible name. */
.menu-btn { display: none; position: relative; width: 2.6rem; min-height: 2.6rem; padding: 0; place-items: center; background: none; border: 1px solid color-mix(in oklab, var(--sc-ink) 28%, transparent); border-radius: var(--sc-r-sm); color: var(--sc-ink); cursor: pointer; }
.menu-icon { position: relative; display: block; width: 1.15rem; height: 0.85rem; }
.menu-icon span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: currentColor; transition: transform 200ms var(--sc-ease-out), opacity 160ms; }
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: calc(50% - 1px); }
.menu-icon span:nth-child(3) { bottom: 0; }
.bar.is-open .menu-icon span:nth-child(1) { transform: translateY(calc(0.425rem - 1px)) rotate(45deg); }
.bar.is-open .menu-icon span:nth-child(2) { opacity: 0; }
.bar.is-open .menu-icon span:nth-child(3) { transform: translateY(calc(-0.425rem + 1px)) rotate(-45deg); }
.menu-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu-btn .menu-close, .bar.is-open .menu-btn .menu-open { display: none; }
.bar.is-open .menu-btn .menu-close { display: inline; }

/* the day ruler */
.ruler { position: absolute; z-index: 3; top: calc(var(--bar-h) + 1rem); right: var(--sc-gutter); display: flex; align-items: center; gap: 0.9rem; }
.day.is-night .ruler { --sc-ink: var(--paper); --sc-ink-soft: var(--pale); color: var(--paper); }
.ruler-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
.ruler-track { position: relative; width: clamp(14rem, 22vw, 20rem); height: 1.6rem; }
.ruler-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in oklab, var(--sc-ink) 28%, transparent); }
.ruler-sun {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); translate: -50% -50%; box-shadow: 0 0 0 3px color-mix(in oklab, var(--coral) 22%, transparent);
  will-change: left;
}
.ruler-stamp {
  position: absolute; top: 50%; translate: -50% -50%;
  background: none; border: 0; padding: 0.6rem 0.2rem; margin: 0; cursor: pointer; color: inherit; min-width: 2.5rem; min-height: 2.6rem;
  display: grid; justify-items: center; gap: 0.15rem;
}
.ruler-tick { display: block; width: 1px; height: 7px; background: color-mix(in oklab, var(--sc-ink) 34%, transparent); transition: background-color 200ms, height 200ms; }
.ruler-text { position: absolute; top: 100%; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--sc-ink-soft); opacity: 0; translate: 0 -0.15rem; white-space: nowrap; transition: opacity 240ms var(--sc-ease-out), color 240ms; }
.ruler-stamp.is-set .ruler-tick { background: var(--coral); height: 9px; }
.ruler-stamp.is-set .ruler-text, .ruler-stamp:hover .ruler-text, .ruler-stamp:focus-visible .ruler-text { opacity: 1; }
.ruler-stamp.is-set .ruler-text { color: var(--sc-ink); }

/* ================================================================ 1 HERO */
.hero { isolation: isolate; --mx: 0; --my: 0; }
.hero-plate-wrap { position: absolute; inset: -4% -3%; z-index: 0; display: block; }
.hero-plate { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none; translate: calc(var(--mx) * -14px) calc(var(--my) * -8px); transition: translate 120ms linear; transform-origin: 50% 55%; }
.hero .sc-scrim { z-index: 1; }
/* a column of density under the copy: the sunrise sits right behind the headline */
.hero-col { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in oklab, #08151A 90%, transparent) 0%, color-mix(in oklab, #08151A 82%, transparent) 34%, color-mix(in oklab, #08151A 58%, transparent) 52%, transparent 68%); }
@keyframes tide-drift { from { -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; } to { -webkit-mask-position: var(--wave-w) 0, 0 100%; mask-position: var(--wave-w) 0, 0 100%; } }
.hero-grid {
  position: relative; z-index: 3; height: 100%;
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--bar-h) + 2vh) var(--sc-gutter) 16vh;
  display: grid; grid-template-columns: 1fr; align-items: center;
}
.hero-copy { display: grid; gap: 1.7rem; max-width: 46rem; }
.hero-copy .display-xl { max-width: 14em; }
.hero-sub { max-width: 58ch; font-size: clamp(1.12rem, 1rem + 0.5vw, 1.38rem); line-height: 1.6; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.hero-copy .cta-row { margin-top: 0.7rem; }

/* The hero's load sequence. Keyframes outrank the engine's inline writes and
   hand back to them when they end, so scroll takes over seamlessly. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .eyebrow { opacity: 0; }
  .enter .eyebrow { animation: track-in 900ms var(--sc-ease-out) 120ms both; }
  @keyframes track-in {
    from { opacity: 0; letter-spacing: 0.26em; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; letter-spacing: 0.08em; transform: none; }
  }
  .enter .sc-split__i { animation: line-in 1100ms var(--sc-ease-out) both; animation-delay: calc(var(--i, 0) * 140ms + 320ms); }
  @keyframes line-in {
    from { transform: translate3d(0, 108%, 0) skewY(2deg); opacity: 0; filter: blur(8px); }
    60%  { filter: blur(0); }
    to   { transform: none; opacity: 1; filter: blur(0); }
  }
  .hero-copy .hero-sub, .hero-copy .cta-row { opacity: 0; }
  .enter .hero-sub { animation: soft-in 900ms var(--sc-ease-out) 1050ms both; }
  .enter .cta-row { animation: soft-in 800ms var(--sc-ease-out) 1250ms both; }
  .enter .cta-row .btn { animation: soft-in 700ms var(--sc-ease-out) both; }
  .enter .cta-row .btn:nth-child(1) { animation-delay: 1300ms; }
  .enter .cta-row .btn:nth-child(2) { animation-delay: 1420ms; }
  @keyframes soft-in {
    from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  .hero .hero-plate { transform: scale(1.12); filter: brightness(0.25) saturate(0.7); }
  .enter-stage .hero-plate { animation: plate-in 2800ms var(--sc-ease-out) 100ms both; }
  @keyframes plate-in { from { transform: scale(1.12); filter: brightness(0.25) saturate(0.7); } 55% { filter: brightness(1) saturate(1); } to { transform: none; filter: none; } }
}

.phone {
  width: clamp(15rem, 19vw, 19.5rem); aspect-ratio: 9 / 18.6;
  border-radius: 2.4rem; padding: 0.6rem;
  background: #0A1418; border: 1px solid color-mix(in oklab, var(--paper) 14%, transparent);
  box-shadow: var(--sc-e3), inset 0 1px 0 color-mix(in oklab, var(--paper) 10%, transparent);
  display: flex; flex-direction: column; overflow: hidden;
  translate: calc(var(--mx) * 4px) calc(var(--my) * 3px);
}
.phone::before { content: ""; position: absolute; top: 0.6rem; left: 50%; translate: -50%; width: 30%; height: 1.3rem; border-radius: 1rem; background: #0A1418; z-index: 2; }
.phone { position: relative; }
.phone-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; padding: 2rem 0.9rem 0.7rem; border-bottom: 1px solid color-mix(in oklab, var(--paper) 10%, transparent); font-size: 0.78rem; }
.phone-avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--teal); color: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.phone-who { display: grid; line-height: 1.2; }
.phone-who b { font-weight: 600; color: var(--paper); }
.phone-who small { font-size: 0.75rem; color: var(--pale); white-space: nowrap; }
.phone-app { font-size: 0.75rem; color: var(--sky); letter-spacing: 0.04em; }
.phone-chat { display: grid; gap: 0.45rem; padding: 0.9rem 0.8rem; align-content: start; }
.bubble {
  margin: 0; padding: 0.55rem 0.7rem; border-radius: 0.9rem 0.9rem 0.9rem 0.25rem;
  background: #16262C; color: var(--paper); font-size: 0.78rem; line-height: 1.4;
  display: grid; gap: 0.1rem;
}
.bubble b { font-weight: 600; color: var(--pale); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.bubble-greet { background: var(--teal); font-size: 0.82rem; }
.phone-note { margin: 0.2rem 0 0; font-size: 0.75rem; color: #9DBAC3; line-height: 1.35; }

/* ============================================================= 2 PROBLEM */
/* The problem opens over the hero as a page. It starts one viewport early, so
   it slides up while the hero is still pinned; its stage is opaque so it covers;
   and its top edge is a drifting wave. The stage is one wave taller than the
   viewport and sticks one wave above it, so once pinned the crest is out of view
   and no gap ever shows through. */
.problem {
  margin-top: -100vh; position: relative; z-index: 2;
  --wave-w: clamp(52rem, 90vw, 90rem); --wave-h: clamp(3.5rem, 9vh, 7rem);
  --wave: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1200 120%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 60C200 0 400 0 600 60S1000 120 1200 60V120H0Z%27/%3E%3C/svg%3E");
}
#problem .problem-stage {
  display: grid; align-items: center; box-sizing: border-box;
  background: #0B1F27;
  top: calc(-1 * var(--wave-h)); height: calc(100svh + var(--wave-h)); padding-top: var(--wave-h);
  -webkit-mask-image: var(--wave), linear-gradient(#000, #000); mask-image: var(--wave), linear-gradient(#000, #000);
  -webkit-mask-size: var(--wave-w) var(--wave-h), 100% calc(100% - var(--wave-h) + 1px); mask-size: var(--wave-w) var(--wave-h), 100% calc(100% - var(--wave-h) + 1px);
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  animation: tide-drift 24s linear infinite;
}
@media (prefers-reduced-motion: reduce) { #problem .problem-stage { animation: none; } }
.problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; padding-top: var(--bar-h); }
.problem-h { max-width: 12em; }
.problem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.problem-item { padding: 1.6rem 0; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent); display: grid; gap: 0.55rem; }
.problem-item:last-child { border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent); }

/* the sunrise ground is shared with the "how you start" act */
.sunrise { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 30%, var(--paper) 100%); }
.sunrise::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; background: linear-gradient(180deg, color-mix(in oklab, var(--amber) 26%, transparent), transparent); }

/* =============================================================== 4 PARTS */
/* One signal through four stations. Timing lives in three places that page.js
   keeps in step: the pulse window (--p2-t0..--p2-t1 on the act), each
   station's arrival (--at, set from the node's measured position on the rail)
   and the letters' convergence (--p2-c, the last tenth of the act). */
.parts {
  padding: 0; position: relative;
  --p2-letter: clamp(2.4rem, 1.8rem + 2.4vw, 4.2rem);   /* size at the station */
  --p2-mark: clamp(4rem, 2.6rem + 6vw, 8.5rem);          /* size in the name */
  --p2-t0: 0.10; --p2-t1: 0.82;
  --p2-k: clamp(0, calc((var(--sc-p, 0) - var(--p2-t0)) / (var(--p2-t1) - var(--p2-t0))), 1);
  --p2-c: clamp(0, calc((var(--sc-p, 0) - 0.86) / 0.1), 1);
}
.parts-stage { display: grid; align-items: center; }
.parts-ground { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 26%, var(--paper) 100%); }
.parts-inner { position: relative; z-index: 1; padding-top: var(--bar-h); }
.parts-head { display: grid; grid-template-columns: minmax(0, 24em) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: clamp(4rem, 7vw, 6.5rem); }
.parts-intro { margin: 0; color: var(--ink); }
.parts-lede { justify-self: end; text-align: right; color: var(--slate); max-width: 26em; }

/* the board: rail on top, stations under it, the name forms over both */
.p2-board { position: relative; }
.p2-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; opacity: calc(1 - var(--p2-c)); }
.p2-track { position: absolute; inset: 0; background: color-mix(in oklab, var(--ink) 16%, transparent); }
.p2-fill { position: absolute; inset: 0; background: var(--teal); transform-origin: left center; transform: scaleX(var(--p2-k)); }
.p2-pulse {
  position: absolute; top: 50%; left: 0; width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem;
  border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 0.4rem color-mix(in oklab, var(--coral) 18%, transparent), 0 2px 8px color-mix(in oklab, var(--coral) 35%, transparent);
  transform: translate3d(calc(var(--p2-k) * var(--p2-w, 0px)), 0, 0);
  will-change: transform;
}
/* the signal that enters on the left and leaves on the right, sitting on the rail */
.p2-signal {
  position: absolute; bottom: calc(100% + 1.5rem); margin: 0; z-index: 2;
  font-size: 0.92rem; line-height: 1.4; color: var(--ink); max-width: 32em;
  padding-left: 1.1rem;
}
.p2-signal::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.p2-signal-in { left: 0; }
.p2-signal-in::before { background: var(--coral); }
.p2-signal-out { right: 0; text-align: right; padding-left: 0; padding-right: 1.1rem; }
.p2-signal-out::before { left: auto; right: 0; background: var(--teal); }

.p2-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; gap: 0.6rem clamp(1.5rem, 3vw, 3rem); }
.p2-station {
  position: relative; padding-top: 1.7rem;
  /* rows come from the grid, so every card starts on the same line */
  display: grid; grid-template-rows: subgrid; grid-row: span 5; gap: inherit;
  /* lit once the pulse has reached this station's node */
  --lit: clamp(0, calc((var(--sc-p, 1) - var(--at, 0) + 0.015) / 0.035), 1);
}
.p2-node { position: absolute; left: 0; top: 0; width: 0.7rem; height: 0.7rem; margin: -0.35rem 0 0 -0.35rem; border-radius: 50%; background: var(--paper); border: 1px solid color-mix(in oklab, var(--ink) 32%, transparent); z-index: 2; opacity: calc(1 - var(--p2-c)); }
.p2-node::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--teal); transform: scale(var(--lit)); }
.p2-station-in { display: contents; }
.p2-h { margin: 0 0 0.3rem; position: relative; font-size: var(--p2-letter); padding-top: calc(0.95em + 0.15rem); }
.p2-letters {
  /* laid out at the final size and scaled DOWN to the station (--s0), so the glyphs
     are rasterised once at full size: scaling a small raster up is what pixelates */
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  font-family: var(--sc-font-display); font-size: var(--p2-mark); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500;
  color: color-mix(in oklab, var(--teal) calc(28% + 72% * var(--lit)), var(--paper));
  transform: translate3d(calc(var(--dx, 0px) * var(--p2-c)), calc(var(--dy, 0px) * var(--p2-c)), 0) scale(calc(var(--s0, 0.5) + (1 - var(--s0, 0.5)) * var(--p2-c)));
  will-change: transform; z-index: 3;
}
/* the last letter takes the lockup's coral o as the name settles */
.p2-station:last-of-type .p2-letters { color: color-mix(in oklab, var(--coral) calc(var(--p2-c) * 100%), color-mix(in oklab, var(--teal) calc(28% + 72% * var(--lit)), var(--paper))); }
.p2-word { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); font-weight: 500; opacity: calc((0.45 + 0.55 * var(--lit)) * (1 - var(--p2-c))); }
.p2-does { font-size: 0.98rem; color: var(--ink); font-weight: 500; }
.p2-is { font-size: 0.95rem; color: var(--slate); }
.p2-card { grid-row: 5; margin-top: 0.3rem; padding: 0.85rem 1rem 0.95rem; background: var(--cream); border: 1px solid var(--sand); border-radius: var(--sc-r-sm); box-shadow: var(--sc-e1); }
.p2-live { font-size: 0.95rem; color: var(--ink); }

/* the name the letters travel into: measured by page.js, never shown itself */
.p2-mark { position: absolute; left: 50%; top: 42%; translate: -50% -50%; visibility: hidden; pointer-events: none; white-space: nowrap; display: flex; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--p2-mark); line-height: 0.95; letter-spacing: -0.03em; }
.p2-mark-l { display: inline-block; line-height: inherit; }
.p2-closing { position: absolute; left: 50%; top: 42%; translate: -50% 0; margin: 6.2rem 0 0; text-align: center; color: var(--ink); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .parts { --p2-c: 0; }
  .p2-station { --lit: 1; }
  .p2-fill, .p2-pulse { display: none; }
  .p2-closing { position: static; translate: none; margin-top: 3rem; text-align: left; white-space: normal; }
}

/* ================================================================= 3 DAY */
.day { isolation: isolate; color: var(--ink); --horizon: 76%; }
.sky { position: absolute; left: 0; right: 0; top: 0; height: var(--horizon); z-index: 0; }
.sky-morning { background: linear-gradient(180deg, #F6EEE2 0%, var(--cream) 58%, #F5D9B6 92%, #EFC59A 100%); }
.sky-noon    { background: linear-gradient(180deg, #E6EEF0 0%, #F3F1EA 56%, var(--paper) 92%, var(--paper) 100%); opacity: clamp(0, calc((var(--sc-p, 0) - 0.3) / 0.14), 1); }
.sky-dusk    { background: linear-gradient(180deg, #0F2E3A 0%, #1C4552 48%, #6B5A55 80%, #E2925C 95%, #C86E4A 100%); opacity: clamp(0, calc((var(--sc-p, 0) - 0.6) / 0.08), 1); }
.sky-night   { background: linear-gradient(180deg, #07141A 0%, #0B1A20 64%, #0E2A35 96%, #0F3540 100%); opacity: clamp(0, calc((var(--sc-p, 0) - 0.74) / 0.12), 1); }
.day-land { position: absolute; left: 0; right: 0; top: var(--horizon); bottom: 0; z-index: 2; background: #F4EFE7; }
.day-land::after {
  content: ""; position: absolute; inset: 0; background: #061115;
  /* night falls from the horizon down as a quick, narrow wipe: it lands after the
     daytime stop has faded (0.62) and before the 17:00 stop is readable (0.685),
     so no frame ever shows text on a mid-grey blend */
  --k: clamp(0, calc((var(--sc-p, 0) - 0.615) / 0.05), 1);
  mask-image: linear-gradient(to bottom, #000 calc(var(--k) * 112% - 12%), transparent calc(var(--k) * 112%));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--k) * 112% - 12%), transparent calc(var(--k) * 112%));
}
.day-arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; max-width: none; }
.arc-path { stroke: color-mix(in oklab, var(--ink) 18%, transparent); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.arc-horizon { stroke: color-mix(in oklab, var(--ink) 22%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.day.is-night .arc-path, .day.is-night .arc-horizon { stroke: color-mix(in oklab, var(--paper) 22%, transparent); }

.sun {
  position: absolute; z-index: 1; width: 4.6rem; height: 4.6rem; translate: -50% -50%;
  display: grid; place-items: center; cursor: grab; touch-action: none; border-radius: 50%;
  left: 6%; top: 76%; will-change: left, top;
}
.sun:active { cursor: grabbing; }
.sun-disc {
  width: clamp(2.6rem, 3.6vw, 3.6rem); height: clamp(2.6rem, 3.6vw, 3.6rem); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #FFD7A8, var(--coral) 62%, #E04A32 100%);
  box-shadow: 0 8px 30px -6px color-mix(in oklab, var(--coral) 55%, transparent), 0 0 0 10px color-mix(in oklab, var(--coral) 10%, transparent);
  transition: transform 160ms var(--sc-ease-out);
}
.sun:hover .sun-disc, .sun:focus-visible .sun-disc { transform: scale(1.06); }
.moon {
  position: absolute; z-index: 1; left: 80%; top: 30%; translate: -50% -50%; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #FFF6E6, #D9CFC0 70%, #B9AE9E 100%);
  box-shadow: 0 0 0 12px color-mix(in oklab, var(--paper) 6%, transparent), 0 0 60px -10px color-mix(in oklab, var(--paper) 40%, transparent);
  opacity: 0; pointer-events: none; will-change: opacity, transform;
}

.day-head { position: absolute; z-index: 3; left: var(--sc-gutter); top: calc(var(--bar-h) + 6vh); max-width: min(40rem, 70vw); }
.day-head .display-lg { max-width: 12em; }
.stops { position: absolute; z-index: 3; left: var(--sc-gutter); right: var(--sc-gutter); top: var(--horizon); height: 0; }
/* the horizon is the rule: the hour sits above it, the words hang below it */
.stop { position: absolute; left: 0; top: 0; max-width: 34rem; opacity: 0; will-change: opacity, transform; }
.stop-time { position: absolute; left: 0; bottom: calc(100% + 0.6rem); white-space: nowrap; }
.stop-text { padding-top: 1.1rem; display: grid; gap: 0.5rem; }
.stop-time { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 4.4rem); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; margin: 0; }
.stop-title { font: 600 clamp(1.1rem, 1rem + 0.4vw, 1.35rem)/1.3 var(--sc-font-text); margin: 0; letter-spacing: -0.01em; }
.stop-body { font-size: var(--sc-t-base); line-height: 1.55; margin: 0; max-width: 54ch; color: var(--slate); }
.stop-quote { margin: 0.35rem 0 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: 1.05rem; line-height: 1.45; color: var(--teal); max-width: 40ch; }
.stop.is-night { color: var(--paper); }
.stop.is-night .stop-body { color: #B7CCD2; }
.stop.is-night .stop-quote { color: var(--pale); }
.day.is-night .day-head { color: var(--paper); }
.monday {
  position: absolute; z-index: 3; right: var(--sc-gutter); bottom: 8vh; max-width: 20rem;
  padding: 1.1rem 1.25rem; border-radius: var(--sc-r-md);
  background: color-mix(in oklab, var(--paper) 7%, transparent); border: 1px solid color-mix(in oklab, var(--paper) 16%, transparent);
  color: var(--paper); box-shadow: var(--sc-edge);
}
.monday-label { margin: 0 0 0.35rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pale); }
.monday-body { margin: 0; font-size: 0.92rem; line-height: 1.5; color: #D7E2E6; }

/* =========================================================== 3b FILM */
.film { isolation: isolate; }
.film-poster-wrap, .film-poster, .film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; z-index: 0; }
.film-video { opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.film-copy { position: absolute; z-index: 3; left: var(--sc-gutter); bottom: clamp(3rem, 10vh, 7rem); max-width: min(38rem, 60vw); display: grid; gap: 0.8rem; color: var(--paper); }
.film-time { font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--pale); font-weight: 500; }
.film-copy .display-lg { max-width: 12em; }
.film-copy .lede { color: #D3E3E8; max-width: 40ch; }
/* the morning brief, parked on the right; the engine cues the wrap, the
   clip's progress cues each line (--i is the line index) */
.film-phone-wrap {
  position: absolute; z-index: 3; right: clamp(1.5rem, 8vw, 9rem); top: 50%; translate: 0 -50%; width: clamp(14rem, 16vw, 17rem); container-type: inline-size;
  --w: clamp(0, calc((var(--sc-p, 0) - 0.12) / 0.08), 1);
  opacity: var(--w); transform: translate3d(0, calc((1 - var(--w)) * 24px), 0);
}
.film-phone { width: 100%; aspect-ratio: 9 / 19.2; font-size: max(0.78rem, 5.1cqw); padding: 0.55em; border-radius: 2.2em; }
.film-phone::before { top: 0.55em; height: 1.2em; }
.film-phone .phone-top { padding: 1.9em 0.85em 0.65em; gap: 0.55em; font-size: 1em; grid-template-columns: auto 1fr auto; }
.film-phone .phone-avatar { width: 1.9em; height: 1.9em; font-size: 0.85em; }
.film-phone .phone-who small { font-size: max(0.75rem, 0.86em); white-space: nowrap; }
.film-phone .phone-app { font-size: max(0.75rem, 0.86em); display: inline; }
.film-phone .phone-chat { gap: 0.42em; padding: 0.85em 0.75em; }
.film-phone .bubble { font-size: 1em; padding: 0.55em 0.7em; border-radius: 0.9em 0.9em 0.9em 0.25em; gap: 0.1em; }
.film-phone .bubble b { font-size: max(0.75rem, 0.9em); }
.film-phone .bubble-greet { font-size: 1.05em; }
.film-phone .phone-note { font-size: max(0.75rem, 0.86em); margin-top: 0.2em; }
.film-item {
  --t: clamp(0, calc((var(--sc-p, 0) - 0.22 - (var(--i, 0) + var(--o, 0)) * 0.07) / 0.06), 1);
  opacity: var(--t); transform: translate3d(0, calc((1 - var(--t)) * 10px), 0);
}
.film-line { --o: 1; }
@media (prefers-reduced-motion: reduce) {
  .film-phone-wrap, .film-item { opacity: 1; transform: none; }
}

/* ========================================================= 3c OFFICE */
.office { isolation: isolate; --mx: 0; --my: 0; }
/* a 16:9 plate that covers the stage, so percentages inside it stay locked
   to the photograph and the panels sit exactly on the monitor */
.plate { position: absolute; z-index: 0; top: 50%; left: 50%; translate: -50% -50%; aspect-ratio: 16 / 9; height: 100%; min-width: 100%; overflow: hidden; container-type: inline-size; transform: scale(calc(1 + var(--sc-p, 0) * 0.05)); transform-origin: 50% 45%; }
.plate-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.plate-b { opacity: clamp(0, calc((var(--sc-p, 0) - 0.5) / 0.1), 1); }
.monitor { position: absolute; z-index: 2; background: #0B1418; border: 1px solid color-mix(in oklab, var(--paper) 10%, transparent); border-radius: 6px; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--paper) 8%, transparent); color: #D6E3E8; font-size: max(0.78rem, 1.02cqw); line-height: 1.35; display: grid; align-content: start; gap: 0.6em; padding: 0.7em 0.9em; overflow: hidden; }
/* rectangles measured on the photographs, in plate percentages */
.monitor-a { left: 37.9%; top: 30.2%; width: 34%; height: 36%; }
.monitor-b { left: 53.1%; top: 30%; width: 19.9%; height: 24.4%; font-size: max(0.78rem, 0.8cqw); gap: 0.4em; }
.mon-bar { display: flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--paper); padding-bottom: 0.45em; border-bottom: 1px solid color-mix(in oklab, var(--paper) 9%, transparent); }
.mon-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0.3em color-mix(in oklab, var(--sky) 20%, transparent); }
.mon-sample { margin-left: auto; font-weight: 400; font-size: max(0.75rem, 0.78em); letter-spacing: 0.06em; text-transform: uppercase; color: #8FB0BA; }
.mon-rows { margin: 0; display: grid; gap: 0.35em; }
.mon-row { display: grid; grid-template-columns: 6.5em 1fr; gap: 0.6em; }
.mon-row dt { color: var(--pale); font-weight: 600; }
.mon-row dd { margin: 0; }
.mon-sub { margin: 0.2em 0 0; font-size: max(0.75rem, 0.8em); letter-spacing: 0.06em; text-transform: uppercase; color: #8FB0BA; }
.mon-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3em; }
.mon-list li { padding-left: 1em; position: relative; }
.mon-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--coral); }
.kpis { display: grid; gap: 0.3em; }
.kpi { display: grid; gap: 0.1em; }
.kpi-label { color: #9DBAC3; font-size: max(0.75rem, 0.85em); }
.kpi-value { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.55em; line-height: 1; color: var(--paper); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-cur { font-size: 0.7em; margin-right: 0.15em; color: var(--pale); }
.kpi-delta { color: var(--pale); font-size: max(0.75rem, 0.8em); }
.office .sc-scrim { z-index: 1; }
.office-copy { position: absolute; z-index: 3; left: var(--sc-gutter); bottom: clamp(3rem, 10vh, 7rem); width: min(30rem, 36vw); color: var(--paper); }
.office-block { position: absolute; left: 0; bottom: 0; display: grid; gap: 0.8rem; width: 100%; }
.office-block .display-lg { max-width: 12em; }
.office-block .lede { color: #D3E3E8; max-width: 40ch; }

/* ======================================================== 5 CAPABILITIES */
.caps { display: flex; align-items: center; background: #0C1518; }
.rail { display: flex; align-items: stretch; gap: clamp(1.25rem, 2.2vw, 2.25rem); padding-inline: var(--sc-gutter); padding-top: calc(var(--bar-h) + 2vh); }
.rail-lead { flex: 0 0 auto; width: clamp(18rem, 26vw, 24rem); display: grid; gap: 1.2rem; align-content: center; padding-right: clamp(1rem, 3vw, 3rem); }
.group { flex: 0 0 auto; width: clamp(17rem, 21vw, 21rem); display: grid; align-content: start; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in oklab, var(--paper) 16%, transparent); }
.group-ic { flex: 0 0 auto; width: 30px; height: 30px; margin-top: 0.05em; color: var(--paper); opacity: 0.92; }
.group-ic .ac { color: var(--coral); }
.group-h { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 0.65rem; row-gap: 0.3rem; align-items: start; font: 500 clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem)/1.15 var(--sc-font-display); letter-spacing: -0.02em; color: var(--paper); }
.group-h small { grid-column: 1 / -1; font: 500 0.9rem/1.35 var(--sc-font-text); color: var(--coral); letter-spacing: 0; }
.cards { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; }
.card { display: grid; gap: 0.3rem; padding: 1rem 0; border-top: 1px solid color-mix(in oklab, var(--paper) 14%, transparent); }
.card b { font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--paper); letter-spacing: -0.005em; }
.card span { font-size: 0.94rem; line-height: 1.5; color: #C3D6DC; }
.also { list-style: none; margin: 0; padding: 0.85rem 0 0; border-top: 1px solid color-mix(in oklab, var(--paper) 14%, transparent); font-size: 0.85rem; line-height: 1.5; color: #9DBAC3; }
.also:not(:has(li)) { display: none; }
.also::before { content: attr(data-label) ": "; color: #BFE0E8; }
.also li { display: inline; }
.also li + li::before { content: " · "; color: #6F8F98; }
/* staggered settle driven from the act's progress */
@media (prefers-reduced-motion: no-preference) {
  .group { opacity: calc(0.72 + 0.28 * clamp(0, calc((var(--sc-p, 1) - var(--i, 0) * 0.11) / 0.16), 1)); transform: translate3d(0, calc((1 - clamp(0, calc((var(--sc-p, 1) - var(--i, 0) * 0.11) / 0.16), 1)) * 14px), 0); }
  /* one-line cards settle one after another inside their group: the group's
     index is carried down as --g, the card's own --i adds a short beat */
  .group { --g: var(--i, 0); }
  .cards .card { opacity: calc(0.55 + 0.45 * clamp(0, calc((var(--sc-p, 1) - var(--g, 0) * 0.11 - var(--i, 0) * 0.035) / 0.14), 1)); transform: translate3d(0, calc((1 - clamp(0, calc((var(--sc-p, 1) - var(--g, 0) * 0.11 - var(--i, 0) * 0.035) / 0.14), 1)) * 10px), 0); }
}

/* =============================================================== 6 TRUST */
/* Pinned like the problem: the green stage is opaque so it covers the rail
   act as it slides up; the headline sits on it from the first frame. */
.trust { position: relative; }
#trust .trust-stage { display: grid; align-items: center; background: #0F4C5C; }
.trust-inner { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); padding-top: var(--bar-h); }
.trust .display-lg { max-width: 12em; }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.trust-item { padding: 1.6rem 0; border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); display: grid; gap: 0.6rem; align-content: start; }
.trust-item .body { color: #C8D9DE; }

/* =============================================================== 7 START */
.start { position: relative; }
#start .start-stage { display: grid; align-items: center; background: var(--paper); }
.sunrise-2 { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%); }
.sunrise-2::before { height: 30%; background: linear-gradient(180deg, color-mix(in oklab, var(--amber) 12%, transparent), transparent); }
.start-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; padding-top: var(--bar-h); }
.start-inner .display-lg { max-width: 10em; grid-row: 1 / span 2; align-self: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); }
.step > div { display: grid; gap: 0.5rem; }
.step-n { font-size: clamp(2.2rem, 1.8rem + 1.3vw, 3.1rem); line-height: 0.9; color: var(--teal); font-style: italic; font-weight: 400; }
.start-foot { grid-column: 2; display: grid; gap: 1.1rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); justify-items: start; }

/* ============================================================ 8 CONTACT */
#contact .sc-stage { height: auto; min-height: 100svh; overflow: visible; }
.close { isolation: isolate; display: grid; align-items: center; }
.close-sky { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(70% 40% at 20% 100%, color-mix(in oklab, var(--coral) 16%, transparent), transparent 70%),
  linear-gradient(180deg, #072A34 0%, #0A2F3B 50%, #061A21 100%); }
.close-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "copy form" "foot foot"; column-gap: clamp(2rem, 6vw, 7rem); row-gap: 2.5rem; padding-block: calc(var(--bar-h) + 4vh) 4vh; align-items: start; min-height: 100svh; }
.close-copy { grid-area: copy; display: grid; gap: 1.2rem; align-content: start; }
.form { grid-area: form; }
.close-copy .display-lg { max-width: 11em; }
.globe { width: min(100%, 27rem); aspect-ratio: 1; max-width: none; justify-self: start; margin-top: 0.5rem; }
.globe text { fill: #D6E3E8; font: 500 13px var(--sc-font-text); letter-spacing: 0.02em; }
.foot { grid-area: foot; grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 1.5rem 3rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklab, var(--paper) 12%, transparent); }
.foot-left { display: grid; gap: 0.9rem; justify-items: start; }
.foot-mark { display: block; line-height: 0; }
.foot-mark img { height: 1.7rem; width: auto; max-width: none; }
.powered { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; color: var(--pale); text-decoration: none; line-height: 1; white-space: nowrap; }
.powered:hover { color: var(--paper); }
.powered-logo { height: 0.95rem; width: auto; max-width: none; display: block; }
.powered-sep { opacity: 0.7; }
.foot-links { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0.5rem 1.5rem; font-size: 0.86rem; line-height: 1; }
.foot-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; line-height: inherit; color: #C8D9DE; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color 140ms; }
.foot-link:hover { color: var(--paper); }
.foot-mail { margin-left: 0.5rem; color: var(--pale); }

/* legal dialogs */
.legal { border: 0; padding: 0; background: transparent; outline: none; max-width: min(46rem, calc(100vw - 2rem)); width: 100%; margin: auto; color: var(--ink); }
.legal::backdrop { background: color-mix(in oklab, var(--abyss) 72%, transparent); backdrop-filter: blur(2px); }
.legal-inner { position: relative; background: var(--paper); color: var(--ink); border-radius: var(--sc-r-lg); padding: clamp(1.5rem, 4vw, 3rem); max-height: min(84vh, 60rem); overflow: auto; box-shadow: var(--sc-e3); }
.legal-close { position: absolute; top: 1rem; right: 1rem; background: color-mix(in oklab, var(--ink) 6%, transparent); border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); border-radius: var(--sc-r-sm); padding: 0.45rem 0.8rem; font: 500 0.82rem/1 var(--sc-font-text); color: var(--ink); cursor: pointer; }
.legal-close:hover { background: color-mix(in oklab, var(--ink) 10%, transparent); }
.legal-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.legal-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); color: var(--teal); margin: 0 3.5rem 0.6rem 0; }
.legal-updated { margin: -1.1rem 0 1.6rem; font-size: 0.8rem; color: var(--slate); opacity: 0.75; }
.legal-intro { margin: 0 0 1.6rem; color: var(--slate); font-size: 1rem; line-height: 1.55; max-width: 58ch; }
.legal-sec { padding: 1rem 0; border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); display: grid; gap: 0.35rem; }
.legal-sec h3 { margin: 0; font: 600 0.98rem/1.35 var(--sc-font-text); color: var(--ink); }
.legal-sec p { margin: 0; font-size: 0.94rem; line-height: 1.58; color: var(--slate); max-width: 62ch; }
html.has-dialog { overflow: hidden; }

.form { display: grid; gap: 1rem; align-content: start; padding: 1.5rem; border-radius: var(--sc-r-lg); background: color-mix(in oklab, var(--paper) 5%, transparent); border: 1px solid color-mix(in oklab, var(--paper) 12%, transparent); box-shadow: var(--sc-e2), var(--sc-edge); }
.field { display: grid; gap: 0.4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-size: 0.8rem; font-weight: 500; color: var(--pale); letter-spacing: 0.02em; padding: 0; }
.field input[type="text"], .field input[type="email"] {
  width: 100%; padding: 0.75rem 0.85rem; border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, var(--night) 60%, transparent); border: 1px solid color-mix(in oklab, var(--paper) 16%, transparent);
  color: var(--paper); transition: border-color 140ms;
}
.field input::placeholder { color: #6E8B94; }
.field input:hover { border-color: color-mix(in oklab, var(--paper) 30%, transparent); }
.field input:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-color: transparent; }
.field input.is-invalid { border-color: var(--coral); }
.form-honeypot { position: fixed; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-msg { margin: 0; font-size: 0.86rem; color: var(--pale); min-height: 1.2em; }
.form-msg.is-error { color: var(--coral); }
.form.is-sent .field, .form.is-sent .form-row .btn, .form.is-sent .small-print { display: none; }
.form.is-sent .form-msg { font-size: 1.05rem; color: var(--paper); }
.small-print { margin: 0; font-size: 0.8rem; color: #9DBAC3; }
.small-print-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.small-print-link:hover, .small-print-link:focus-visible { color: var(--paper); }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-plate, .phone { translate: none !important; transition: none; }
  .sun { cursor: default; }
  .stop { transform: none !important; }
}

/* --------------------------------------------------------------- tablet */

/* --------------------------------------------------------------- phone */
@media (max-width: 860px) {
  :root { --bar-h: 3.5rem; }
  .bar { grid-template-columns: auto 1fr auto; gap: 0.75rem; }
  .bar-links { display: none; position: absolute; top: var(--bar-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--sc-gutter) 1rem; background: var(--night); border-bottom: 1px solid color-mix(in oklab, var(--paper) 12%, transparent); box-shadow: var(--sc-e2); }
  .bar[data-ground="light"] .bar-links { background: var(--paper); border-bottom-color: color-mix(in oklab, var(--ink) 12%, transparent); }
  .bar.is-open .bar-links { display: flex; }
  .bar-links .bar-link { padding: 0.8rem 0; font-size: 1rem; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent); }
  .bar-nav .lang { display: none; }
  .bar-links .lang { display: inline-flex; padding: 0.9rem 0 0.2rem; font-size: 0.95rem; gap: 0.6rem; }
  .bar-links .lang-opt { padding: 0.5rem 0.3rem; min-height: 2.6rem; display: inline-flex; align-items: center; }
  .bar-link::after { display: none; }
  .menu-btn { display: grid; }
  .bar .btn-sm { min-height: 2.6rem; padding-inline: 0.9rem; }
  .ruler { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--bar-h) + 0.6rem); gap: 0.5rem; }
  .ruler-label { display: none; }
  .ruler-track { width: 100%; }
  .ruler-text { display: none; }
  .wm-img { height: 1.2rem; }

  .display-xl { font-size: clamp(1.8rem, 1.3rem + 2.8vw, 2.3rem); }
  .hero-grid { padding-top: calc(var(--bar-h) + 1.5vh); padding-bottom: 14vh; }
  .hero-copy { gap: 1.1rem; }
  .hero-sub { font-size: 1.02rem; line-height: 1.55; max-width: 44ch; }
  .phone { width: min(13.5rem, 56vw); aspect-ratio: 9 / 10.2; }
  .phone-top { padding-top: 1.7rem; grid-template-columns: auto 1fr; }
  .phone-app { display: none; }
  .phone-who small { white-space: nowrap; }
  .phone-chat { gap: 0.35rem; padding: 0.7rem 0.65rem; }
  .phone .bubble:nth-child(n+3), .phone-note { display: none; }
  .hero-col { background: linear-gradient(180deg, color-mix(in oklab, #08151A 70%, transparent) 0%, color-mix(in oklab, #08151A 72%, transparent) 58%, color-mix(in oklab, #08151A 30%, transparent) 78%, transparent 100%); }
  .hero-plate { object-position: 52% 50%; }

  /* the problem flows on phones (page.js): the stage is a normal block that
     still opens over the hero with its wave edge and opaque ground */
  #problem { height: auto; }
  #problem .problem-stage { position: relative; top: auto; height: auto; min-height: 100svh; padding-bottom: 4rem; }
  .problem-grid { grid-template-columns: 1fr; gap: 1.6rem; align-content: center; padding-top: calc(var(--bar-h) + 1rem); }
  .problem-item { padding: 1.1rem 0; }
  /* parts flows on phones: a vertical rail down the left, stations stacked */
  .parts { padding-block: clamp(5rem, 10vw, 9rem); --p2-c: 0; }
  .parts-stage { position: static; height: auto; min-height: 0; overflow: visible; }
  .parts-inner { padding-top: 0; }
  .parts-head { grid-template-columns: 1fr; gap: 0.8rem; margin-bottom: 2.6rem; }
  .parts-lede { justify-self: start; text-align: left; }
  .p2-board { padding-left: 1.4rem; display: flex; flex-direction: column; }
  .p2-grid { order: 1; }
  .p2-signal-out { order: 2; }
  .p2-closing { order: 3; }
  .p2-line { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .p2-fill { transform-origin: center top; transform: scaleY(var(--p2-k)); }
  .p2-pulse { top: 0; left: 50%; transform: translate3d(0, calc(var(--p2-k) * var(--p2-w, 0px)), 0); }
  .p2-signal { position: static; margin: 0 0 1.6rem; max-width: none; }
  .p2-signal-out { text-align: left; padding: 0 0 0 1.1rem; margin: 1.6rem 0 0; }
  .p2-signal-out::before { left: 0; right: auto; }
  .p2-grid { grid-template-columns: 1fr; gap: 2rem; }
  .p2-station { padding-top: 0; padding-left: 0; display: block; }
  .p2-station-in { display: grid; gap: 0.6rem; }
  .p2-card { grid-row: auto; }
  .p2-node { left: -1.4rem; top: 0.9rem; }
  .p2-h { padding-top: 0; font-size: 2.4rem; }
  .p2-letters { position: static; font-size: 2.4rem; transform: none; }
  .p2-mark { display: none; }
  .p2-closing { position: static; translate: none; margin: 2.4rem 0 0; text-align: left; white-space: normal; }

  .day-head { top: calc(var(--bar-h) + 3.2rem); max-width: none; right: var(--sc-gutter); }
  .day-arc { top: 8%; height: 60%; left: 7%; width: 86%; }
  .sun { width: 3.6rem; height: 3.6rem; }
  .sun-disc { width: 2.4rem; height: 2.4rem; }
  .stop { max-width: none; }
  .stop-text { padding-top: 0.8rem; gap: 0.35rem; }
  .stop-time { font-size: 2.4rem; }
  .stop-body { font-size: 0.95rem; }
  .stop-quote { font-size: 1.02rem; }
  .monday { display: none; }
  .day { --horizon: 53.5%; }

  .film-copy { max-width: none; right: var(--sc-gutter); bottom: 4vh; gap: 0.5rem; }
  .film-time { font-size: 1.8rem; }
  .film-copy .lede { font-size: 0.95rem; }
  /* width from the viewport, but never taller than ~62% of the screen */
  .film-phone-wrap { right: var(--sc-gutter); left: auto; top: calc(var(--bar-h) + 1.5vh); translate: none; width: max(52vw, min(64vw, 24rem, calc(62svh * 9 / 18.8))); }
  .film .film-phone { aspect-ratio: 9 / 18.8; font-size: 4.7cqw; }
  .film-phone .phone-note { display: none; }
  .office .plate { top: 0; left: 0; translate: none; width: 100%; min-width: 0; height: 58%; aspect-ratio: auto; transform-origin: 50% 30%; mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
  .office .plate-img { object-position: 58% 50%; }
  .monitor-a { left: 8%; right: 8%; width: auto; top: 22%; height: auto; max-height: 62%; }
  .monitor-b { left: 8%; right: 8%; width: auto; top: 22%; height: auto; font-size: 0.78rem; }
  .monitor-a { font-size: 0.78rem; }
  .mon-sample { display: none; }
  .kpis { grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
  .office-copy { width: auto; right: var(--sc-gutter); bottom: 4vh; }
  .office .sc-scrim { background: linear-gradient(to top, color-mix(in oklab, var(--night) 96%, transparent) 0%, color-mix(in oklab, var(--night) 80%, transparent) 30%, transparent 50%); }
  .rail { padding-top: calc(var(--bar-h) + 1vh); gap: 1rem; }
  .rail-lead { width: min(78vw, 20rem); }
  .group { width: min(78vw, 19rem); }
  .group-ic { width: 26px; height: 26px; }
  .card { padding: 0.65rem 0; }


  /* the trust flows on phones (page.js): the stage is a normal block */
  #trust { height: auto; }
  #trust .trust-stage { position: relative; top: auto; height: auto; min-height: 0; padding-block: clamp(5rem, 10vw, 9rem); }
  .trust-inner { padding-top: 0; }
  .trust-grid { grid-template-columns: 1fr; }
  /* the start flows on phones (page.js): the stage is a normal block */
  #start { height: auto; }
  #start .start-stage { position: relative; top: auto; height: auto; min-height: 100svh; padding-bottom: 4rem; }
  .start-inner { grid-template-columns: 1fr; gap: 1.5rem; padding-top: calc(var(--bar-h) + 1rem); }
  .start-inner .display-lg { grid-row: auto; align-self: start; }
  .start-foot { grid-column: 1; }
  .step { grid-template-columns: 3rem 1fr; }

  /* the contact act on phones (owner decision 2026-09-16): the headline and the
     form share one screen, and the knowledge map sits behind the form, softened.
     .close-copy gives up its box so the headline and the globe become grid items:
     the headline keeps the copy row, the globe shares the form's cell. */
  .close-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "copy" "form" "foot"; row-gap: 1.25rem; padding-top: calc(var(--bar-h) + 2vh); }
  .close-copy { display: contents; }
  .close-copy .display-lg { grid-area: copy; }
  .form { position: relative; z-index: 1; }
  .foot { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; margin-top: 0.75rem; }
  .powered { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 0.45rem; row-gap: 0.35rem; white-space: normal; line-height: 1.3; }
  .powered-sep { display: none; }
  .powered-tag { grid-column: 1 / -1; }
  .foot-links { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .foot-link { padding: 0.75rem 0; min-height: 2.75rem; display: flex; align-items: center; border-top: 1px solid color-mix(in oklab, var(--paper) 10%, transparent); font-size: 0.92rem; }
  .foot-mail { grid-column: 1 / -1; margin-left: 0; border-bottom: 1px solid color-mix(in oklab, var(--paper) 10%, transparent); }
  .form { padding: 1.1rem; }
  .globe { grid-area: form; place-self: center; width: min(100%, 24rem); margin: 0; z-index: 0; opacity: 0.55; filter: blur(1.5px); pointer-events: none; }
}

@media (max-width: 860px) and (max-height: 800px) {
  .phone { aspect-ratio: 9 / 8.4; }
  .film .film-phone { aspect-ratio: 9 / 18.8; }
  .film-copy { gap: 0.3rem; z-index: 4; }
  .film-time { font-size: 1.4rem; }
  .film-copy .display-lg { font-size: 1.35rem; }
  .film-copy .lede { font-size: 0.85rem; }
  .phone .bubble:nth-child(n+2) { display: none; }
}

/* Very short desktop viewports: keep the hero inside the fold. */
@media (min-width: 861px) and (max-height: 760px) {
  .display-xl { font-size: clamp(1.9rem, 1rem + 2.2vw, 2.7rem); }
  .phone { width: 15rem; }
}

/* the film phone always shows its whole brief, whatever the hero phone hides on small screens */
.film-phone .phone-chat .bubble.film-item { display: grid; }

/* very short phone viewports: the phone wraps its brief instead of holding the full device height */
@media (max-width: 860px) and (max-height: 600px) {
  .film .film-phone { aspect-ratio: auto; }
}