/* ═══════════════════════════════════════════════════════════════════
 * cO. by NDAI — private operating membership
 * Monochrome. Black, white and luminance only. No accent colour.
 * Palette lifted verbatim from the shipped cO. macOS client (CoTheme).
 *
 * 2026-09-23 — "Get your time back." Same bones, finer joinery, and
 * everything that moves now moves for a reason.
 * ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"cO Manrope";
  src:url("fonts/manrope-variable-latin.woff2") format("woff2-variations");
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

/* page-to-page: a quiet crossfade where the browser supports it */
@view-transition{ navigation:auto; }

@property --spot{ syntax:'<number>'; inherits:true; initial-value:0; }

:root{
  /* cO. client palette */
  --co-black:  #050505;
  --co-ink:    #131312;
  --co-paper:  #F4F2EE;
  --co-warm:   #FBFAF8;
  --co-silver: #ADADA8;
  --co-rule:   #D1CFC7;

  /* live ground — interpolated by co.js every frame */
  --page-bg:   #F4F2EE;
  --page-fg:   #131312;
  --page-fg-2: #4C4942;
  --page-fg-3: #5C5952;
  --page-rule: #D9D6CE;
  --mark-hi:   #131312;
  --mark-mid:  #4A4840;
  --mark-lo:   #A8A59B;

  --font-display: "Avenir Next", "Avenir", "cO Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
  --spring: cubic-bezier(.2,.9,.3,1);
  --gut: clamp(22px, 5vw, 92px);
  --maxw: 1320px;

  /* hero choreography: when the first word may begin */
  --d0: .18s;
}
.intro-on{ --d0: 1.42s; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection{ background: var(--page-fg); color: var(--page-bg); }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--page-fg); outline-offset:3px; border-radius:1px;
}
h1, h2, h3{ text-wrap:balance; }
p, li{ text-wrap:pretty; }

/* ── legal / carrier-compliance pages ─────────────────────────── */
.legal-page{ background:var(--co-paper); color:var(--co-ink); }
.legal-page .nav{ color:var(--co-ink); }
.legal-page .nav::before{ background:rgba(244,242,238,.96); opacity:1; border-bottom:1px solid var(--co-rule); }
.legal-wordmark{ display:flex; align-items:baseline; gap:12px; font-size:30px; font-weight:300; letter-spacing:-.06em; }
.legal-wordmark small{ font-family:var(--font-mono); font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#65625b; }
.legal-main{ padding:clamp(132px,16vh,196px) var(--gut) clamp(72px,10vh,128px); }
.legal-doc{ width:min(100%,860px); margin:0 auto; }
.legal-doc h1{ font-size:clamp(52px,8vw,112px); font-weight:300; line-height:.92; letter-spacing:-.045em; margin:26px 0 18px; }
.legal-effective{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#65625b; }
.legal-lede{ font-size:clamp(19px,2vw,28px); line-height:1.42; letter-spacing:-.018em; margin:clamp(44px,7vh,80px) 0; max-width:34ch; }
.legal-doc section{ display:grid; grid-template-columns:minmax(180px,250px) 1fr; column-gap:clamp(32px,6vw,92px); row-gap:14px; padding:clamp(32px,5vh,56px) 0; border-top:1px solid var(--co-rule); }
.legal-doc section h2{ grid-row:1 / span 3; font-family:var(--font-mono); font-size:11px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:#65625b; font-weight:500; }
.legal-doc section p{ grid-column:2; font-size:16px; line-height:1.72; color:#34322e; }
.legal-doc a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.legal-doc strong{ color:var(--co-ink); }
.legal-links{ border-top:1px solid var(--co-rule); padding-top:30px; display:flex; flex-wrap:wrap; gap:22px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.legal-foot{ border-top:1px solid var(--co-rule); padding-top:42px; }
@media (max-width:720px){
  .legal-doc section{ grid-template-columns:1fr; }
  .legal-doc section h2{ grid-row:auto; }
  .legal-doc section p{ grid-column:1; }
}

/* ── intro: the mark draws itself once per visit ───────────────── */
.intro{ display:none; }
.intro-on .intro{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--co-paper); pointer-events:none;
  clip-path: inset(0 0 0 0);
  animation: introLift 1.05s var(--ease-io) 1.15s forwards;
}
@keyframes introLift{ to{ clip-path: inset(0 0 100% 0); visibility:hidden; } }
.intro-mark{
  width: clamp(132px, 15vw, 210px); height:auto; overflow:visible;
  animation: introMarkOut 1.05s var(--ease-io) 1.15s forwards;
}
@keyframes introMarkOut{ to{ transform: translateY(-46px); opacity:0; } }
.im-c, .im-o{ fill:none; stroke:url(#coChrome); stroke-dasharray:1 1.2; stroke-dashoffset:1; }
.im-o{ stroke-width:5.3; animation: imDraw 1s cubic-bezier(.65,0,.35,1) .08s forwards; }
.im-c{ stroke-width:4.8; animation: imDraw .72s cubic-bezier(.65,0,.35,1) .38s forwards; }
.im-dot{
  fill:url(#coChrome); transform-box:fill-box; transform-origin:center; transform:scale(0);
  animation: imPop .5s cubic-bezier(.34,1.56,.64,1) .88s forwards, imFall .42s cubic-bezier(.55,0,1,.45) 1.16s forwards;
}
@keyframes imDraw{ to{ stroke-dashoffset:0; } }
@keyframes imPop{ to{ transform:scale(1); } }
@keyframes imFall{ from{ transform:scale(1); } to{ transform: translateY(150px) scale(.55); opacity:0; } }

/* ── the field ─────────────────────────────────────────────────── */
#field, #field-fallback{
  position: fixed; inset: 0; width:100%; height:100%;
  z-index: 0; display:block; pointer-events:none;
}
#field-fallback{
  background:
    radial-gradient(120% 90% at 68% 34%, rgba(255,255,255,.55) 0%, transparent 55%),
    radial-gradient(90% 70% at 20% 80%, rgba(0,0,0,.18) 0%, transparent 60%);
  opacity:0; transition: opacity .6s linear;
}
body.no-webgl #field{ display:none; }
body.no-webgl #field-fallback{ opacity:1; }

.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

main, .foot{ position:relative; z-index:2; }

/* ── chrome: nav + rail ────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(16px,2.2vw,28px) var(--gut);
  color: var(--page-fg);
  transition: transform .7s var(--ease), padding .5s var(--ease);
}
.nav.away{ transform: translateY(-110%); }
/* Transparent over the hero, then a solid bar so copy never runs through
   the wordmark. The bar is exactly --page-bg, which is also the shader's
   fog colour, so over the field it reads as sky rather than as chrome. */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: var(--page-bg);
  border-bottom:1px solid color-mix(in srgb, var(--page-rule) 70%, transparent);
  opacity:0; transition: opacity .45s var(--ease);
}
.nav.stuck{ padding-top:14px; padding-bottom:14px; }
.nav.stuck::before{ opacity:1; }
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .nav::before{ border-bottom-color: var(--page-rule); }
}
.nav-mark{ display:flex; align-items:baseline; gap:12px; }
.nav-endorse{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--page-fg-3);
}
.mark{ display:block; overflow:visible; }
.mark-sm{ width:52px; height:29px; }
.mark-md{ width:84px; height:47px; }
.mark-lg{ width:clamp(96px,11vw,164px); height:auto; aspect-ratio:400/224; }
/* hover the mark: the dot takes one lap around the O */
.mk-orbit{ transform-box:view-box; transform-origin:249px 110px; }
.nav-mark:hover .mk-orbit{ animation: orbit 1.25s var(--ease); }
@keyframes orbit{ to{ transform: rotate(360deg); } }

.nav-right{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); }
.nav-status{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--page-fg-3);
  display:flex; align-items:center; gap:8px;
}
.nav-status i{
  width:5px; height:5px; border-radius:50%; background:currentColor; position:relative;
  animation: pulse 3.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{opacity:.25} 50%{opacity:1} }
.nav-apply{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--page-fg);
  border:1px solid var(--page-rule); border-radius:999px;
  min-height:44px; padding:10px 18px; display:inline-flex; align-items:center;
  transition: transform .55s var(--spring), background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.nav-apply > span{ display:inline-block; transition: transform .55s var(--spring); }
.nav-apply:hover{ background:var(--page-fg); color:var(--page-bg); border-color:var(--page-fg); }
@media (max-width:720px){
  .nav-status{ display:none; }
  .nav-endorse{ font-size:9px; }
}

/* lives in the right gutter, outside the measure — never over the copy */
.rail{
  position:fixed; top:50%; transform:translateY(-50%);
  right: max(14px, calc((100vw - var(--maxw)) / 2 - 52px));
  z-index:20; display:flex; gap:14px; align-items:stretch;
}
@media (max-width:1600px){ .rail-acts em{ display:none; } }
@media (max-width:1180px){ .rail{ display:none; } }
.rail-line{ width:1px; background:var(--page-rule); position:relative; }
.rail-fill{ position:absolute; top:0; left:0; width:1px; height:0; background:var(--page-fg); }
.rail-acts{ list-style:none; display:flex; flex-direction:column; justify-content:space-between; height:220px; }
.rail-acts li{ display:flex; align-items:baseline; gap:10px; opacity:.32; transition:opacity .6s var(--ease); }
.rail-acts li.on{ opacity:1; }
.rail-acts span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; }
.rail-acts em{ font-style:normal; font-size:11px; letter-spacing:.02em; color:var(--page-fg-2); }

/* ── layout ────────────────────────────────────────────────────── */
.s{ padding: clamp(80px,12vh,150px) var(--gut); position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }
/* taller than the viewport on purpose: the ground inversion happens
   entirely inside this band, with no copy on screen to catch it */
.brk{ height:36vh; min-height:224px; padding:0; }

/* ── type ──────────────────────────────────────────────────────── */
.eyebrow, .index, .k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--page-fg-3);
}
.index{ margin-bottom: clamp(20px,3vh,36px); display:flex; align-items:center; gap:14px; }
/* the chapter mark: a hairline that draws in ahead of the words */
.index::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; flex:none; transform-origin:left center; }
.k{ letter-spacing:.18em; }
.k-sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--page-fg-3); margin-top:2px; }

.display{
  font-size: clamp(56px, 11.5vw, 176px);
  font-weight:300; line-height:.9; letter-spacing:-.035em;
  margin:.24em 0 .28em;
}
.h2{
  font-size: clamp(32px, 4.8vw, 76px);
  font-weight:300; line-height:1.02; letter-spacing:-.032em;
}
.h2 b{ font-weight:500; }

.lede{
  font-size: clamp(17px, 1.6vw, 24px); font-weight:300; line-height:1.42;
  letter-spacing:-.012em; max-width:34ch; color:var(--page-fg);
}
.lede-tight{ max-width:56ch; margin-top:clamp(20px,3vh,34px); color:var(--page-fg-2); }
.note{
  font-size: clamp(15px,1.05vw,18px); color:var(--page-fg-2); line-height:1.58;
  margin-top:clamp(16px,2vh,24px); max-width:58ch; font-weight:400;
}
.body{ font-size:16px; line-height:1.62; color:var(--page-fg-2); font-weight:400; max-width:40ch; margin-top:16px; }
.fine{
  font-size:13.5px; line-height:1.65; color:var(--page-fg-3); max-width:68ch;
  margin-top:clamp(24px,3vh,38px); font-weight:400;
}

/* words that rise out of their own line */
.sw{
  display:inline-block; vertical-align:top; overflow:hidden;
  padding:0 .06em .16em 0; margin:0 -.06em -.16em 0;
}
.swi{ display:inline-block; }

/* ══ HERO ═════════════════════════════════════════════════════════ */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top: 120px; padding-bottom: clamp(40px,6.5vh,80px);
}
.hero-wrap{ max-width:var(--maxw); will-change:transform, opacity; position:relative; z-index:1; }
/* a breath of paper under the lower copy, so the lede reads over the brightest chrome */
.hero::before{
  /* runs past the fold so the paper fades out rather than stopping at an edge */
  content:""; position:absolute; inset:0 0 -22vh 0; pointer-events:none;
  background: linear-gradient(to top, transparent 0, color-mix(in srgb, var(--page-bg) 72%, transparent) 22vh, color-mix(in srgb, var(--page-bg) 30%, transparent) 48vh, transparent 68vh);
}
.hero-title{
  font-size: clamp(58px, 11.6vw, 204px);
  font-weight:300; line-height:.9; letter-spacing:-.052em;
  margin:.14em 0 .32em -.04em; text-wrap:initial;
}
.hero-title .ln{ display:block; white-space:nowrap; }
.hero-title .w{ display:inline-block; }
/* the wordmark carries the chrome — and a slow sheen, like a turned coin */
.hero-title .wm{
  background: linear-gradient(100deg, var(--mark-hi) 0%, var(--mark-mid) 36%, var(--mark-lo) 49%, var(--mark-mid) 62%, var(--mark-hi) 100%);
  background-size: 280% 100%; background-position: 100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.03em; margin-right:.02em;
}
.js .hero-title .w{
  animation: blurIn 1.5s var(--ease) backwards;
  animation-delay: calc(var(--d0) + var(--wi) * 95ms);
}
.js .hero-title .wm{
  animation: blurIn 1.5s var(--ease) backwards, sheen 9s ease-in-out infinite;
  animation-delay: var(--d0), calc(var(--d0) + 1.6s);
}
@keyframes blurIn{
  from{ opacity:0; filter:blur(22px); transform: translate3d(0,.32em,0) scale(.985); }
  55%{ opacity:1; }
  to{ opacity:1; filter:blur(0); transform:none; }
}
@keyframes sheen{ 0%,100%{ background-position:100% 0; } 50%{ background-position:0% 0; } }

.js .hero-in{
  animation: heroIn 1.3s var(--ease) backwards;
  animation-delay: calc(var(--d0) + .55s + var(--hi, 0) * .1s);
}
@keyframes heroIn{ from{ opacity:0; transform: translate3d(0,16px,0); } }

.hero-foot{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; gap:26px clamp(28px,5vw,80px);
  padding-top: clamp(22px,3vh,34px);
}
.hero-foot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background: var(--page-rule); transform-origin:left center;
}
.js .hero-foot::before{ animation: lineIn 1.8s var(--ease) backwards calc(var(--d0) + .38s); }
@keyframes lineIn{ from{ transform:scaleX(0); } }
.hero-foot .lede{ max-width:36ch; }

.hero-actions{ display:flex; align-items:center; gap:clamp(18px,2.4vw,32px); flex-wrap:wrap; }
.hero-actions .cta{ margin-top:0; }
.text-link{
  font-size:14px; color:var(--page-fg-2); padding:12px 0 8px; position:relative;
  transition: color .4s var(--ease);
}
.text-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--page-rule);
}
.text-link::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--page-fg);
  transform:scaleX(0); transform-origin:right center; transition: transform .6s var(--ease); z-index:1;
}
.text-link:hover{ color:var(--page-fg); }
.text-link:hover::before{ transform:scaleX(1); transform-origin:left center; }

.hero-meta{
  list-style:none; display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,30px);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--page-fg-3); margin-top:clamp(22px,3.2vh,36px);
}
.hero-meta li{ position:relative; padding-left:16px; }
.hero-meta li::before{
  content:""; position:absolute; left:0; top:.45em; width:6px; height:1px; background:currentColor;
}
.clock em{ font-style:normal; color:var(--page-fg); margin-left:.7em; }
.clock b{ font-weight:inherit; animation: blink 2s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.2; } }

.scroll-cue{
  position:absolute; right:var(--gut); bottom:clamp(56px,9vh,110px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--page-fg-3);
}
.scroll-cue i{ width:1px; height:54px; background:linear-gradient(var(--page-fg-3), transparent);
  animation: drop 2.6s var(--ease) infinite; transform-origin:top; }
@keyframes drop{ 0%{transform:scaleY(0);opacity:0} 40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);opacity:0} }
.scroll-cue{ display:none; }

/* ══ 01 · THE HOURS ═══════════════════════════════════════════════ */
.hours{ padding:0; }
.hours .h2{ font-size: clamp(30px, 3.5vw, 58px); }

.dial{ display:block; overflow:visible; }
.dial .tk{ stroke:var(--page-rule); stroke-width:1; vector-effect:non-scaling-stroke; transition: stroke .6s var(--ease); }
.dial .tk-major{ stroke-width:1.7; }
.dial .tk.on{ stroke:var(--page-fg-3); }
.dial-base{ fill:none; stroke:var(--page-rule); stroke-width:1; vector-effect:non-scaling-stroke; }
.dial-arc{ fill:none; stroke:url(#dialChrome); stroke-width:5.3; }
.dial-c{ fill:none; stroke:url(#dialChrome); stroke-width:4.8; }
.dial-dot{ fill:url(#dialChrome); }

.hours-legend{ list-style:none; counter-reset:hl; }
.hours-legend li{ counter-increment:hl; }
.hours-legend b{ font-weight:400; }

/* static: no script, or reduced motion — the whole story at once */
.hours:not(.hours-live){ padding: clamp(80px,12vh,150px) var(--gut); }
.hours:not(.hours-live) .hours-stage{
  max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px);
  grid-template-areas: "head dial" "legend dial" "legend lock";
}
.hours:not(.hours-live) .hours-head{ grid-area:head; }
.hours:not(.hours-live) .hours-legend{ grid-area:legend; border-top:1px solid var(--page-rule); }
.hours:not(.hours-live) .hours-legend li{ padding:16px 0; border-bottom:1px solid var(--page-rule); display:grid; grid-template-columns:40px 1fr; row-gap:4px; }
.hours:not(.hours-live) .hours-legend li::before{ content:counter(hl, decimal-leading-zero); grid-row:span 2; font:500 11px/1.9 var(--font-mono); letter-spacing:.12em; color:var(--page-fg-3); }
.hours:not(.hours-live) .hours-legend b{ font-size:18px; letter-spacing:-.015em; }
.hours:not(.hours-live) .hours-legend span{ font-size:14.5px; color:var(--page-fg-2); }
.hours:not(.hours-live) .dial-wrap{ grid-area:dial; align-self:center; }
.hours:not(.hours-live) .dial{ width:100%; height:auto; aspect-ratio:400/256; }
.hours:not(.hours-live) .dial-base, .hours:not(.hours-live) .dial-core, .hours:not(.hours-live) .hours-count{ display:none; }
.hours:not(.hours-live) .hours-lockup{ grid-area:lock; position:static; transform:none; width:auto; max-width:none; text-align:center; align-self:start; }
.hours:not(.hours-live) .hours-lockup .k{ margin-top:14px; }
@media (max-width:820px){
  .hours:not(.hours-live) .hours-stage{ grid-template-columns:1fr; grid-template-areas:"head" "dial" "lock" "legend"; }
}

/* live: a pinned stage scrubbed by the scroll */
.hours-live .hours-track{ height:540vh; position:relative; }
.hours-live .hours-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  padding:0 var(--gut);
}
.hours-live .hours-head{
  position:absolute; z-index:2; left:var(--gut); top:clamp(92px,14vh,150px);
  width:min(40%, 560px);
}
.hours-count{
  position:absolute; z-index:2; right:var(--gut); top:clamp(92px,14vh,150px);
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--page-fg-3);
}
.hours-count b{
  font-family:var(--font-display); font-size:clamp(44px,5vw,84px); font-weight:300;
  letter-spacing:-.04em; line-height:.9; color:var(--page-fg); font-variant-numeric:tabular-nums;
}
.hours-live .hours-legend{
  position:absolute; z-index:2; left:var(--gut); bottom:clamp(40px,8vh,84px);
  width:min(30%, 360px); border-top:1px solid var(--page-rule);
}
.hours-live .hours-legend li{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--page-rule);
  font-size:14.5px; color:var(--page-fg-3);
  transition: color .5s var(--ease);
}
.hours-live .hours-legend li::before{
  content:counter(hl, decimal-leading-zero); font:500 10px/1 var(--font-mono); letter-spacing:.12em; width:22px;
}
.hours-live .hours-legend li::after{
  content:""; margin-left:auto; width:14px; height:14px; border-radius:50%;
  border:1px solid var(--page-rule); transition: background .5s var(--ease), border-color .5s var(--ease), transform .6s var(--spring);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.8 7.2l2.1 2.1 4.4-4.6' fill='none' stroke='%23F4F2EE' stroke-width='1.3'/></svg>");
  background-size:0 0; background-repeat:no-repeat; background-position:center;
}
.hours-live .hours-legend span{ display:none; }
.hours-live .hours-legend li.now{ color:var(--page-fg); }
.hours-live .hours-legend li.now::after{ border-color:var(--page-fg); transform:scale(1.15); }
.hours-live .hours-legend li.done{ color:var(--page-fg-2); }
.hours-live .hours-legend li.done::after{ background-color:var(--page-fg); border-color:var(--page-fg); background-size:14px 14px; }

.hours-live .dial-wrap{ position:absolute; inset:0; pointer-events:none; }
.hours-live .dial{ position:absolute; inset:0; width:100%; height:100%; }
.dial-core{ position:absolute; left:0; top:0; text-align:center; will-change:transform; }
.dial-item{
  position:absolute; left:0; right:0; top:0;
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform: translateY(-50%) translateY(18px); filter:blur(8px);
  transition: opacity .55s var(--ease), transform .9s var(--ease), filter .6s var(--ease);
}
.dial-item.on{ opacity:1; transform: translateY(-50%); filter:none; }
.dial-n{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--page-fg-3); }
.dial-item h3{
  font-size: calc(var(--D, 500px) * .092); font-weight:300; letter-spacing:-.035em; line-height:1;
  margin-top: calc(var(--D, 500px) * .03); white-space:nowrap;
}
.dial-item p{
  font-size: clamp(13px, calc(var(--D, 500px) * .03), 17px); line-height:1.5; color:var(--page-fg-2);
  max-width:26ch; margin-top: calc(var(--D, 500px) * .026);
}
.dial-tag{
  margin-top: calc(var(--D, 500px) * .042);
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--page-rule); border-radius:999px; padding:7px 12px 7px 10px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--page-fg-2);
}
.dial-tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--page-fg); animation:pulse 2.4s var(--ease) infinite; }

.hours-lockup{
  position:absolute; left:50%; z-index:2; text-align:center; width:max-content;
  max-width:calc(100% - 2 * var(--gut));
}
.hours-live .hours-lockup{ opacity:0; }
.hours-lockup-line{
  font-size:clamp(30px,4.2vw,70px); font-weight:300; letter-spacing:-.04em; line-height:1;
}
.hours-lockup .k{ margin-top:18px; letter-spacing:.16em; font-size:10px; }

@media (max-width:820px){
  .hours-live .hours-track{ height:480vh; }
  .hours-live .hours-head{ width:auto; right:var(--gut); top:84px; }
  .hours .h2{ font-size:clamp(28px,8vw,40px); }
  .hours-count{ top:auto; bottom:28px; right:auto; left:50%; transform:translateX(-50%); flex-direction:row; align-items:baseline; gap:10px; }
  .hours-count b{ font-size:34px; }
  .hours-live .hours-legend{ display:none; }
  .dial-item p{ max-width:22ch; }
  .dial-tag{ font-size:8px; padding:0; border:0; letter-spacing:.1em; }
  .dial-n{ font-size:9px; }
  .hours-lockup .k{ max-width:30ch; margin-left:auto; margin-right:auto; line-height:1.7; }
}

/* ── thesis: the hybrid is the product ─────────────────────────── */
.thesis-title{ max-width:none; }
.thesis-grid{
  display:grid; grid-template-columns:minmax(260px,.42fr) minmax(520px,1fr);
  gap:1px; margin-top:clamp(42px,6vh,76px); border:1px solid var(--page-rule);
  background-color:var(--page-rule);
}
.commodity-card{
  min-height:clamp(560px,66vh,700px); padding:clamp(28px,3.2vw,46px);
  display:flex; flex-direction:column; background:var(--page-bg);
}
.commodity-card .k{ margin-bottom:clamp(54px,8vh,96px); }
.commodity-word{ font-size:clamp(42px,4.5vw,68px); font-weight:300; letter-spacing:-.04em; line-height:.94; }
.commodity-card .k-sub{ margin-top:10px; }
.commodity-copy{
  max-width:29ch; margin-top:clamp(28px,4vh,48px); font-size:15px;
  line-height:1.66; color:var(--page-fg-2);
}
.commodity-tags{
  margin-top:auto; padding-top:28px; border-top:1px solid var(--page-rule);
  display:flex; flex-wrap:wrap; gap:9px;
}
.commodity-tags span{
  border:1px solid var(--page-rule); border-radius:999px; padding:8px 12px;
  font-family:var(--font-mono); font-size:8px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--page-fg-3);
}

.human-card{
  min-height:clamp(560px,66vh,700px); padding:clamp(30px,4vw,58px);
  display:flex; flex-direction:column; color:var(--co-paper); background:var(--co-ink);
}
.human-card-head{ display:flex; justify-content:space-between; align-items:center; gap:24px; }
.human-card .k{ color:var(--co-paper); opacity:.58; }
.human-status{
  display:flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:8px; letter-spacing:.14em; text-transform:uppercase; opacity:.7;
}
.human-status i{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 3.4s var(--ease) infinite; }
.human-claim{
  margin-top:clamp(38px,5vh,66px); font-size:clamp(54px,7vw,112px);
  font-weight:300; line-height:.88; letter-spacing:-.045em;
}
.human-copy{
  max-width:48ch; margin-top:clamp(30px,4vh,48px); font-size:clamp(15px,1.25vw,19px);
  line-height:1.6; color:rgba(244,242,238,.78);
}
.human-foundations{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin-top:clamp(26px,3.5vh,42px);
}
.human-foundations li{
  border:1px solid rgba(244,242,238,.2); border-radius:999px; padding:8px 12px;
  font-family:var(--font-mono); font-size:8px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(244,242,238,.72);
}
.human-foundations li:last-child{ background:var(--co-paper); color:var(--co-ink); border-color:var(--co-paper); }
.principal-line{
  margin-top:auto; padding-top:26px; border-top:1px solid rgba(244,242,238,.2);
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
}
.principal-avatar{
  width:48px; height:48px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(244,242,238,.35); font-size:16px; font-weight:300; letter-spacing:-.05em;
  position:relative;
}
.principal-avatar::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(244,242,238,.3);
  animation: ring 3.2s var(--ease) infinite;
}
@keyframes ring{ 0%{ transform:scale(.9); opacity:0; } 30%{ opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
.principal-line > span:nth-child(2){ display:flex; flex-direction:column; gap:2px; }
.principal-line b{ font-size:14px; font-weight:500; }
.principal-line small{ font-family:var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; opacity:.52; }
.principal-line strong{
  border:1px solid rgba(244,242,238,.32); border-radius:999px; padding:12px 16px;
  font-family:var(--font-mono); font-size:9px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
}
.principal-line strong i{ font-style:normal; margin-right:8px; }
.hybrid-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:22px; flex-wrap:wrap;
  padding:clamp(20px,2.4vw,30px) clamp(24px,3vw,42px); background:var(--page-fg); color:var(--page-bg);
  font-size:clamp(16px,1.5vw,22px); font-weight:300;
}
.hybrid-line span{ opacity:.68; }
.hybrid-line b{ font-weight:500; }

@media (max-width:900px){
  .thesis-grid{ grid-template-columns:1fr; }
  .commodity-card{ min-height:390px; }
  .commodity-card .k{ margin-bottom:46px; }
  .commodity-copy{ max-width:38ch; }
  .human-card{ min-height:680px; }
}
@media (max-width:560px){
  .thesis-title{ font-size:clamp(34px,10vw,52px); }
  .commodity-card{ min-height:360px; padding:24px 22px; }
  .commodity-word{ font-size:54px; }
  .human-card{ min-height:720px; padding:28px 22px; }
  .human-card-head{ align-items:flex-start; flex-direction:column; gap:12px; }
  .human-claim{ font-size:clamp(58px,18vw,76px); }
  .principal-line{ grid-template-columns:auto 1fr; }
  .principal-line strong{ grid-column:1 / -1; text-align:center; }
  .hybrid-line{ align-items:flex-start; flex-direction:column; }
}

/* ── the direct line ───────────────────────────────────────────── */
.comms-heading{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);
  gap:clamp(32px,6vw,96px); align-items:end;
}
.comms-lede{
  max-width:34ch; font-size:clamp(19px,2vw,30px); font-weight:300;
  line-height:1.38; letter-spacing:-.018em; color:var(--page-fg);
}
.comms-stage{
  display:grid; grid-template-columns:minmax(230px,.7fr) clamp(96px,11vw,168px) minmax(360px,1fr);
  gap:1px; margin-top:clamp(42px,6vh,76px); border:1px solid var(--page-rule);
  background-color:var(--page-rule); overflow:hidden;
}
.signal-stack, .signal-focus, .phone-line{ background:var(--page-bg); }
.signal-stack{ padding:clamp(28px,3.2vw,46px); }
.signal-list{ list-style:none; margin-top:clamp(28px,4vh,48px); }
.signal-list li{
  min-height:84px; padding:18px 0; border-top:1px solid var(--page-rule);
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.signal-list li:last-child{ border-bottom:1px solid var(--page-rule); }
.signal-list span{
  padding-left:16px; position:relative; font-size:clamp(17px,1.45vw,22px);
  font-weight:400; letter-spacing:-.015em;
}
.signal-list span::before{
  content:""; position:absolute; left:0; top:.68em; width:6px; height:6px;
  border:1px solid currentColor; border-radius:50%;
}
.signal-list em{
  padding-left:16px; font-family:var(--font-mono); font-size:9px; font-style:normal;
  letter-spacing:.13em; text-transform:uppercase; color:var(--page-fg-3);
}
.signal-focus{ position:relative; min-height:620px; overflow:hidden; }
.signal-focus > i{
  position:absolute; right:0; top:50%; width:150%; height:1px;
  background:linear-gradient(90deg,transparent,var(--page-rule) 32%,var(--page-fg-3));
  transform-origin:right center; opacity:.8;
}
.signal-focus > i::after{
  content:""; position:absolute; top:-2px; left:14%; width:5px; height:5px;
  border-radius:50%; background:var(--page-fg);
  animation:signalTravel 4.8s var(--ease) infinite;
}
.signal-focus > i:nth-child(1){ transform:rotate(20deg); }
.signal-focus > i:nth-child(2){ transform:rotate(10deg); }
.signal-focus > i:nth-child(3){ transform:rotate(0); }
.signal-focus > i:nth-child(4){ transform:rotate(-10deg); }
.signal-focus > i:nth-child(5){ transform:rotate(-20deg); }
.signal-focus > i:nth-child(2)::after{ animation-delay:-.9s; }
.signal-focus > i:nth-child(3)::after{ animation-delay:-1.8s; }
.signal-focus > i:nth-child(4)::after{ animation-delay:-2.7s; }
.signal-focus > i:nth-child(5)::after{ animation-delay:-3.6s; }
@keyframes signalTravel{ from{ transform:translateX(0); opacity:0; } 18%{opacity:1} to{ transform:translateX(120px); opacity:0; } }
.focus-point{
  position:absolute; left:50%; bottom:clamp(28px,4vh,48px); transform:translateX(-50%);
  width:max-content; text-align:center; display:flex; flex-direction:column; gap:5px;
  font-family:var(--font-mono); text-transform:uppercase;
}
.focus-point span{ font-size:8px; letter-spacing:.14em; color:var(--page-fg-3); }
.focus-point b{ font-size:10px; letter-spacing:.18em; font-weight:500; }

.phone-line{
  min-height:620px; padding:clamp(26px,3.2vw,44px);
  display:flex; flex-direction:column; color:var(--co-paper); background:var(--co-ink);
}
.phone-head{ display:flex; align-items:center; gap:14px; padding-bottom:22px; border-bottom:1px solid rgba(244,242,238,.2); }
.phone-avatar{
  width:48px; height:48px; border:1px solid rgba(244,242,238,.35); border-radius:50%;
  display:grid; place-items:center; font-size:17px; font-weight:300; letter-spacing:-.05em;
}
.phone-identity{ display:flex; flex-direction:column; gap:2px; }
.phone-identity b{ font-size:16px; font-weight:500; }
.phone-identity small{ font-family:var(--font-mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase; opacity:.58; }
.phone-head > i{ margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--co-paper); opacity:.7; animation:pulse 2.8s var(--ease) infinite; }
.thread{ position:relative; display:flex; flex-direction:column; gap:13px; padding:clamp(24px,3vh,38px) 0; }
.bubble{ max-width:88%; padding:14px 16px 15px; border:1px solid rgba(244,242,238,.17); border-radius:3px; }
.bubble span{ display:block; margin-bottom:5px; font-family:var(--font-mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; }
.bubble p{ font-size:14px; line-height:1.48; }
.bubble-owner{ align-self:flex-end; background:var(--co-paper); color:var(--co-ink); border-color:var(--co-paper); }
.bubble-agent{ align-self:flex-start; background:rgba(244,242,238,.055); }
.focus-list{ list-style:none; margin-top:14px; border-top:1px solid rgba(244,242,238,.16); }
.focus-list li{ padding:8px 0 8px 13px; position:relative; border-bottom:1px solid rgba(244,242,238,.11); font-size:12px; opacity:.78; }
.focus-list li::before{ content:""; position:absolute; left:0; top:1.18em; width:5px; height:1px; background:currentColor; }

/* the conversation plays itself the first time it is seen */
.thread.armed > .bubble{
  opacity:0; transform: translateY(14px) scale(.96); transform-origin:left bottom;
  transition: opacity .5s var(--ease), transform .8s var(--spring);
}
.thread.armed > .bubble-owner{ transform-origin:right bottom; }
.thread.armed > .bubble.in{ opacity:1; transform:none; }
.typing{
  position:absolute; left:0; display:flex; gap:5px; align-items:center;
  padding:15px 16px; border:1px solid rgba(244,242,238,.17); border-radius:3px;
  background:rgba(244,242,238,.055);
  opacity:0; transform: translateY(8px) scale(.94); transform-origin:left bottom;
  transition: opacity .3s var(--ease), transform .5s var(--spring);
}
.typing.in{ opacity:1; transform:none; }
.typing i{ width:5px; height:5px; border-radius:50%; background:var(--co-paper); opacity:.3; animation: typing 1.05s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.14s; }
.typing i:nth-child(3){ animation-delay:.28s; }
@keyframes typing{ 0%,60%,100%{ opacity:.25; transform:none; } 30%{ opacity:.95; transform:translateY(-3px); } }

.text-composer{
  margin-top:auto; min-height:48px; border:1px solid rgba(244,242,238,.28); border-radius:999px;
  padding:9px 9px 9px 18px; display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:rgba(244,242,238,.55); transition: border-color .4s var(--ease);
}
.text-composer input{
  min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--co-paper);
  font:400 13px/1.4 var(--font-display);
}
.text-composer input::placeholder{ color:rgba(244,242,238,.55); opacity:1; }
.text-composer button{
  appearance:none; border:0; cursor:pointer; padding:0;
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--co-paper); color:var(--co-ink); font-size:16px; font-weight:400;
  transition: transform .5s var(--spring);
}
.text-composer button:hover{ transform:translateY(-2px); }
.text-composer:focus-within{ border-color:rgba(244,242,238,.72); }
.signal-reply{
  align-self:flex-start; max-width:88%; margin-top:12px; padding:12px 15px;
  border:1px solid rgba(244,242,238,.17); background:rgba(244,242,238,.055); border-radius:3px;
  color:rgba(244,242,238,.82); font-size:12.5px; line-height:1.5;
}
.signal-reply.in{ animation: replyIn .7s var(--spring); }
@keyframes replyIn{ from{ opacity:0; transform: translateY(10px) scale(.97); } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.comms-rule{
  display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:1px;
  margin-top:1px; background-color:var(--page-rule); border:1px solid var(--page-rule);
  font-size:clamp(14px,1.25vw,18px); font-weight:300;
}
.comms-rule > *{ background:var(--page-bg); padding:clamp(18px,2vw,26px); }
.comms-rule span{ color:var(--page-fg-2); }
.comms-rule b{ background:var(--page-fg); color:var(--page-bg); font-weight:500; }

@media (max-width:900px){
  .comms-heading{ grid-template-columns:1fr; }
  .comms-lede{ max-width:38ch; }
  .comms-stage{ grid-template-columns:1fr; }
  .signal-focus{ min-height:126px; }
  .signal-focus > i{ width:70%; right:15%; }
  .focus-point{ left:50%; bottom:18px; }
  .phone-line{ min-height:600px; }
}
@media (max-width:560px){
  .comms-stage{ margin-top:34px; }
  .signal-stack{ padding:24px 22px; }
  .signal-list{ margin-top:22px; }
  .signal-list li{ min-height:68px; padding:13px 0; }
  .signal-list li:nth-child(n+4){ display:none; }
  .phone-line{ min-height:570px; padding:24px 20px; }
  .bubble{ max-width:92%; }
  .comms-rule{ grid-template-columns:1fr; }
}

/* ── steps / ladder ────────────────────────────────────────────── */
.steps, .ladder{
  list-style:none; display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background-color:var(--page-rule);
  border:1px solid var(--page-rule); margin-top:clamp(34px,5vh,62px);
}
.ladder-6{ grid-template-columns:repeat(6,1fr); }
@media (max-width:1000px){ .steps, .ladder{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){
  .steps, .ladder{ grid-template-columns:repeat(2,1fr); }
  .steps li:last-child, .ladder li:last-child{ grid-column:span 2; }
}
.steps li, .ladder li{
  background:var(--page-bg); padding:clamp(22px,2.6vw,34px);
  min-height:clamp(148px,17vh,190px); display:flex; flex-direction:column;
  transition: background .6s var(--ease), color .6s var(--ease);
}
.step-n{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--page-fg-3); }
.steps h3, .ladder h3{
  font-size:clamp(17px,1.5vw,22px); font-weight:400; letter-spacing:-.015em;
  margin-top:auto; padding-top:24px;
}
.steps p, .ladder p{ font-size:14px; line-height:1.5; color:var(--page-fg-2); margin-top:8px; font-weight:400; }
@media (min-width:1001px){ .ladder-6 p{ min-height:4.5em; } }

/* the emphasised rung inverts */
.steps li.on, .ladder li.last{ background:var(--page-fg); }
.steps li.on h3, .ladder li.last h3{ color:var(--page-bg); }
.steps li.on p, .ladder li.last p,
.steps li.on .step-n, .ladder li.last .step-n{ color:var(--page-bg); opacity:.72; }

/* ── bands ─────────────────────────────────────────────────────── */
.band{
  margin-top:clamp(30px,4vh,52px); padding:clamp(18px,2vw,26px) clamp(22px,2.8vw,38px);
  background:var(--page-fg); color:var(--page-bg);
  display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap;
  font-size:clamp(14px,1.35vw,20px); font-weight:300; letter-spacing:-.012em;
}
.band span{ opacity:.78; }
.band b{ font-weight:600; }
.excl{
  margin-top:clamp(30px,4vh,52px); padding:clamp(18px,2.2vw,26px) clamp(22px,2.8vw,38px);
  background:var(--page-fg); color:var(--page-bg);
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
}
.excl .k{ color:var(--page-bg); opacity:.78; }
.excl b{ font-weight:500; font-size:clamp(13px,1.25vw,19px); letter-spacing:-.008em; }
/* the approval-gated row: quiet, bordered — sits above the hard-exclude bar */
.excl-open{ background:transparent; border:1px solid var(--page-rule); color:var(--page-fg); }
.excl-open .k{ color:var(--page-fg-3); opacity:1; }
.excl-open + .excl{ margin-top:12px; }
.g-dark .band, .g-dark .excl{ letter-spacing:-.005em; }

/* ── cards ─────────────────────────────────────────────────────── */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,30px); margin-top:clamp(34px,5vh,62px); }
@media (max-width:820px){ .duo{ grid-template-columns:1fr; } }
.card{ padding:clamp(26px,3vw,44px); min-height:clamp(220px,25vh,290px); display:flex; flex-direction:column; }
.card-quiet{ border:1px solid var(--page-rule); transition: border-color .5s var(--ease); }
.card-quiet:hover{ border-color:var(--page-fg-3); }
.card-loud{ background:var(--page-fg); color:var(--page-bg); }
.card-loud .k{ color:var(--page-bg); opacity:.78; }
.card-title{ font-size:clamp(26px,3.2vw,46px); font-weight:300; letter-spacing:-.03em; margin-top:clamp(24px,4vh,48px); }
.card-body{ font-size:15.5px; line-height:1.6; color:var(--page-fg-2); margin-top:14px; font-weight:400; max-width:34ch; }
.card-loud .card-body{ color:var(--page-bg); opacity:.9; }
.card-foot{
  margin-top:auto; padding-top:32px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--page-fg-3);
}
.card-loud .card-foot{ color:var(--page-bg); opacity:.78; }
.band-split span{ opacity:.78; }

/* 06 — the claim lights word by word as it is read */
.h2-xl{ font-size:clamp(40px,6.8vw,118px); line-height:.98; letter-spacing:-.045em; max-width:15ch; }
.scrub-live .sc{ opacity:.14; transition: opacity .3s linear; }

/* ── real product proof ────────────────────────────────────────── */
.proof-heading{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:clamp(28px,6vw,90px); align-items:end; }
.proof-heading .note{ margin:0; max-width:48ch; }
.shot-tabs{ display:flex; gap:2px; margin-top:clamp(34px,5vh,62px); border-bottom:1px solid var(--page-rule); position:relative; z-index:1; }
.shot-tab{
  appearance:none; border:0; background:transparent; position:relative;
  color:var(--page-fg-3); font:500 12px/1 var(--font-mono); letter-spacing:.14em;
  text-transform:uppercase; padding:15px 18px 17px; cursor:pointer; transition:color .35s var(--ease);
}
.shot-tab:hover{ color:var(--page-fg); }
.shot-tab.on{ color:var(--page-fg); }
.shot-tab::after{
  content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px;
  background:var(--page-fg); transform:scaleX(0); transform-origin:left center;
  transition: transform .5s var(--ease);
}
.shot-tab.on::after{ transform:scaleX(1); }
/* while the tour plays itself, the underline is its clock */
.shot-tab.timing::after{ animation: tabTime var(--dwell, 6500ms) linear both; }
.shot-tab.timing.paused::after{ animation-play-state:paused; }
@keyframes tabTime{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.shot-stage{ margin-top:-1px; }
.product-shot{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.34fr);
  border:1px solid var(--page-rule); background:var(--page-bg);
  transform-origin:50% 100%;
  box-shadow: 0 50px 120px -60px rgba(0,0,0,.35);
}
.product-shot > a{ display:block; background:#050505; overflow:hidden; position:relative; }
.shot-chrome{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  background:#0c0c0c; border-bottom:1px solid rgba(255,255,255,.07);
}
.shot-chrome i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.14); }
.shot-chrome em{
  margin-left:auto; margin-right:auto; font-style:normal; font-family:var(--font-mono);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38);
  transform:translateX(-24px);
}
.shot-frame{ display:block; overflow:hidden; position:relative; }
.shot-frame::after{
  /* a sheet of glass over the screen: one soft reflection */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%);
}
.product-shot img{
  display:block; width:100%; height:auto; aspect-ratio:1512/831; object-fit:cover; object-position:top;
  transition: opacity .45s var(--ease), filter .6s var(--ease), transform 1.1s var(--ease);
}
.product-shot img.swapping{ opacity:0; filter:blur(14px); transform:scale(1.02); }
.product-shot > a:hover img{ transform:scale(1.012); }
.product-shot figcaption{
  padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; justify-content:flex-end;
  border-left:1px solid var(--page-rule);
}
.product-shot figcaption p{ font-size:clamp(16px,1.35vw,20px); line-height:1.5; color:var(--page-fg-2); margin-top:18px; transition: opacity .35s var(--ease), filter .35s var(--ease); }
.product-shot figcaption .k{ transition: opacity .35s var(--ease); }
.product-shot figcaption.swapping p{ opacity:0; filter:blur(4px); }
.product-shot figcaption.swapping .k{ opacity:.25; }
.product-shot figcaption small{ font:400 11px/1.6 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--page-fg-3); margin-top:clamp(28px,5vh,56px); }

.proof-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background-color:var(--page-rule); border:1px solid var(--page-rule); border-top:0;
}
.proof-strip span{ padding:clamp(18px,2vw,28px); color:var(--page-fg-2); font-size:13px; background:var(--page-bg); }
.proof-strip b{ display:block; color:var(--page-fg); font-size:14px; margin-bottom:6px; }

.commercial-proof{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background-color:var(--page-rule); border:1px solid var(--page-rule); margin-top:clamp(18px,2.5vh,32px); }
.commercial-note{ background:var(--page-bg); padding:clamp(24px,3vw,42px); }
.commercial-note h3{ font-size:clamp(23px,2.4vw,36px); font-weight:400; letter-spacing:-.025em; line-height:1.12; margin-top:clamp(20px,3vh,30px); }
.commercial-note > p:last-child{ font-size:15px; line-height:1.6; color:var(--page-fg-2); margin-top:18px; }

/* ── 05 · limbs ────────────────────────────────────────────────── */
.limbs{
  list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  margin-top:clamp(34px,5vh,62px); background-color:var(--page-rule); border:1px solid var(--page-rule);
}
.limb{
  grid-column:span 3; background:var(--page-bg); padding:clamp(24px,2.8vw,40px);
  min-height:clamp(230px,26vh,300px); display:flex; flex-direction:column;
}
.limb-wide{ grid-column:span 2; }
.limb svg{
  width:48px; height:32px; fill:none; stroke:var(--page-fg); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:clamp(22px,3.4vh,40px); opacity:.85;
  transition: transform .7s var(--spring);
}
.limb:hover svg{ transform: translateY(-3px); }
.limb .k{ margin-bottom:12px; }
.limb h3{ font-size:clamp(21px,2vw,30px); font-weight:400; letter-spacing:-.025em; line-height:1.1; }
.limb h3 + p{ font-size:14.5px; line-height:1.6; color:var(--page-fg-2); margin-top:12px; max-width:38ch; }
@media (max-width:1000px){
  .limbs{ grid-template-columns:repeat(2,1fr); }
  .limb, .limb-wide{ grid-column:span 1; min-height:0; }
  .limb:nth-child(3){ grid-column:span 2; }
}
@media (max-width:560px){
  .limbs{ grid-template-columns:1fr; }
  .limb, .limb:nth-child(3){ grid-column:span 1; padding:22px; }
  .limb svg{ margin-bottom:18px; }
}

/* ── 07 · the send discipline ──────────────────────────────────── */
.disc{
  list-style:none; display:flex; align-items:stretch; margin-top:12px;
  border:1px solid var(--page-rule); font-size:clamp(13px,1.15vw,17px); font-weight:400;
}
.disc li{
  display:flex; align-items:center; gap:14px; padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,26px);
  border-right:1px solid var(--page-rule); flex:1; position:relative;
  color:var(--page-fg-2); transition: color .45s var(--ease), background-color .45s var(--ease);
}
.disc li:first-child{ flex:0 0 auto; background:var(--page-fg); color:var(--page-bg); }
.disc li:first-child .k{ color:var(--page-bg); opacity:.78; }
.disc li:last-child{ border-right:0; }
.disc li:not(:first-child):not(:last-child)::after{
  content:"→"; position:absolute; right:-9px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:grid; place-items:center; font-size:11px;
  background:var(--page-bg); color:var(--page-fg-3); z-index:1;
}
.disc li:not(:first-child)::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--page-fg);
  transform:scaleX(0); transform-origin:left center; transition: transform .9s var(--ease);
}
.disc li.on{ color:var(--page-fg); background-color: color-mix(in srgb, var(--page-fg) 5%, transparent); }
.disc li.on::before{ transform:scaleX(1); }
@media (max-width:820px){
  .disc{ flex-wrap:wrap; }
  .disc li:first-child{ flex:0 0 100%; border-right:0; border-bottom:1px solid var(--page-rule); }
  .disc li{ flex:1 1 33%; }
  .disc li:nth-child(4){ border-right:0; }
  .disc li:nth-child(n+2):nth-child(-n+4){ border-bottom:1px solid var(--page-rule); }
  .disc li:not(:first-child):not(:last-child)::after{ display:none; }
}

/* ── 08 · the four parts ───────────────────────────────────────── */
.parts{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:clamp(34px,5vh,62px); background-color:var(--page-rule); border:1px solid var(--page-rule);
}
.part{
  background:var(--page-bg); padding:clamp(24px,2.8vw,40px); min-height:clamp(300px,36vh,400px);
  display:flex; flex-direction:column; position:relative;
}
.part-n{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--page-fg-3);
}
.part .k{ margin-top:clamp(40px,7vh,84px); }
.part h3{ font-size:clamp(22px,2.1vw,32px); font-weight:400; letter-spacing:-.025em; line-height:1.1; margin-top:12px; }
.part h3 + p{ font-size:14.5px; line-height:1.6; color:var(--page-fg-2); margin-top:auto; padding-top:clamp(22px,3vh,36px); max-width:32ch; }
.part-lead{ background:var(--page-fg); color:var(--page-bg); }
.part-lead .part-n, .part-lead .k{ color:var(--page-bg); opacity:.72; }
.part-lead h3 + p{ color:var(--page-bg); opacity:.88; }
@media (max-width:1000px){ .parts{ grid-template-columns:repeat(2,1fr); } .part{ min-height:260px; } }
@media (max-width:560px){
  .parts{ grid-template-columns:1fr; }
  .part{ min-height:0; padding:22px; }
  .part .k{ margin-top:28px; }
  .part h3 + p{ padding-top:18px; }
}

/* ── not-list ──────────────────────────────────────────────────── */
.nots{ list-style:none; margin-top:clamp(32px,4.5vh,56px); border-top:1px solid var(--page-rule); }
.nots li{
  padding:clamp(20px,2.6vh,30px) 0 clamp(20px,2.6vh,30px) clamp(34px,4vw,66px);
  font-size:clamp(16px,1.35vw,19px); font-weight:400; line-height:1.48; letter-spacing:-.01em;
  color:var(--page-fg-2); position:relative; max-width:74ch;
  transition: color .4s var(--ease);
}
.nots li:hover{ color:var(--page-fg); }
.nots li::before{
  content:"—"; position:absolute; left:0; top:clamp(20px,2.6vh,30px); color:var(--page-fg-3);
  font-size:.8em;
}
.nots li::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--page-rule);
  transform-origin:left center;
}

/* ── apply ─────────────────────────────────────────────────────── */
.apply{ padding-bottom:clamp(96px,14vh,170px); }
.apply-title{ font-size:clamp(56px,9.4vw,160px); line-height:.9; letter-spacing:-.05em; margin:.06em 0 .12em; }
.apply-title b{ font-weight:300; }
.apply-title b .swi{
  background: linear-gradient(100deg, var(--mark-hi) 0%, var(--mark-mid) 36%, var(--mark-lo) 49%, var(--mark-mid) 62%, var(--mark-hi) 100%);
  background-size:280% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.03em;
  animation: sheen 9s ease-in-out infinite;
}
.qs{ margin-top:clamp(32px,4.5vh,56px); border-top:1px solid var(--page-rule); padding-top:clamp(24px,3vh,34px); }
.qs .k{ display:block; margin-bottom:clamp(20px,3vh,32px); }
.qs ol{ list-style:none; counter-reset:q; display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vh,22px) clamp(28px,4vw,68px); }
@media (max-width:820px){ .qs ol{ grid-template-columns:1fr; } }
.qs li{
  counter-increment:q; position:relative; padding-left:clamp(30px,3vw,44px);
  font-size:clamp(15px,1.25vw,18px); font-weight:400; line-height:1.45; color:var(--page-fg);
}
.qs li::before{
  content:counter(q,decimal-leading-zero); position:absolute; left:0; top:.32em;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--page-fg-3);
}
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:16px;
  margin-top:clamp(44px,6vh,80px); padding:clamp(16px,1.8vw,22px) clamp(24px,2.6vw,36px);
  background:var(--page-fg); color:var(--page-bg);
  font-size:clamp(14px,1.25vw,18px); font-weight:400; letter-spacing:-.01em;
  transition: transform .55s var(--spring), opacity .4s var(--ease);
}
.cta > span{ display:inline-block; transition: transform .55s var(--spring); }
.cta::after{
  /* one pass of light across the button on hover */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--page-bg) 22%, transparent) 50%, transparent 70%);
  transform: translateX(-110%); transition: transform 1s var(--ease);
}
.cta:hover::after{ transform: translateX(110%); }
.cta svg{ width:20px; height:20px; transition: transform .6s var(--spring); flex:none; }
.cta:hover svg{ transform:translateX(5px); }
.hero-actions .cta:hover svg{ transform:translateY(4px); }
.cta-lg{ font-size:clamp(16px,1.5vw,21px); padding:clamp(20px,2.2vw,28px) clamp(30px,3.2vw,46px); }

/* ── footer ────────────────────────────────────────────────────── */
.foot{
  padding:clamp(64px,10vh,120px) var(--gut) clamp(24px,4vh,40px);
  border-top:1px solid var(--page-rule); overflow:hidden;
}
.foot-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.foot-line{
  font-size:clamp(28px,3.6vw,56px); font-weight:300; letter-spacing:-.035em; line-height:1.02; color:var(--page-fg);
}
.foot-line span{ display:block; font-size:clamp(14px,1.2vw,18px); letter-spacing:-.01em; color:var(--page-fg-3); margin-top:14px; }
.foot-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--page-fg-3); }
.foot-meta a{ transition: color .35s var(--ease); }
.foot-meta a:hover{ color:var(--page-fg); }
.foot-giant{ margin:clamp(48px,8vh,110px) auto 0; max-width:1500px; }
.foot-giant svg{ display:block; width:100%; height:auto; overflow:visible; }
.foot-base{
  display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap;
  margin-top:clamp(28px,4vh,48px); padding-top:18px; border-top:1px solid var(--page-rule);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--page-fg-3);
}
/* legacy footer (apply page) */
.foot-wrap{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.foot-mark{ display:flex; align-items:baseline; gap:14px; }
.foot-wrap .foot-line{ font-size:clamp(15px,1.5vw,22px); color:var(--page-fg-2); letter-spacing:-.015em; }
.foot-wrap .foot-meta{ flex-direction:column; gap:6px; align-items:flex-end; }
@media (min-width:1100px){ .foot-wrap .foot-meta{ flex-direction:row; gap:22px; align-items:baseline; } }
@media (max-width:700px){ .foot-wrap .foot-meta{ align-items:flex-start; } }

/* ══ MOTION ═══════════════════════════════════════════════════════ */

/* reveal: content remains visible if script or observation fails */
.rise{ opacity:1; transform:none; }
body.motion-ready .rise{ opacity:0; transform:translateY(22px); will-change:opacity, transform; }
body.motion-ready .rise.seen{ opacity:1; transform:none;
  transition: opacity 1s var(--ease), transform 1.15s var(--ease); }
.d1.seen{ transition-delay:.07s } .d2.seen{ transition-delay:.14s }
.d3.seen{ transition-delay:.21s } .d4.seen{ transition-delay:.28s }
.steps li.seen, .ladder li.seen, .fact.seen, .nots li.seen, .tier.seen,
.limb.seen, .part.seen, .proof-strip span.seen{ transition-delay:calc(var(--i,0) * .06s); }
body.motion-ready .rise.seen{ will-change:auto; }

/* split headings: the words come up out of their own lines */
body.motion-ready .rise.split{ opacity:1; transform:none; }
body.motion-ready .split .swi{ transform: translate3d(0,112%,0); }
body.motion-ready .split.seen .swi{
  transform:none; transition: transform 1.2s var(--ease) calc(var(--wi) * 45ms + .04s);
}

/* chapter hairlines and list rules draw in */
body.motion-ready .index::before{ transform:scaleX(0); transition: transform 1s var(--ease) .12s; }
body.motion-ready .index.seen::before{ transform:none; }
body.motion-ready .nots li::after{ transform:scaleX(0); transition: transform 1.3s var(--ease) calc(var(--i,0) * .06s + .1s); }
body.motion-ready .nots li.seen::after{ transform:none; }

/* the footer mark draws itself, the dot lands last */
body.motion-ready .foot-giant .fg-o,
body.motion-ready .foot-giant .fg-c{ stroke-dasharray:1 1.2; stroke-dashoffset:1; transition: stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1); }
body.motion-ready .foot-giant .fg-c{ transition-delay:.45s; transition-duration:1.8s; }
body.motion-ready .foot-giant .fg-dot{ transform-box:fill-box; transform-origin:center; transform:scale(0); transition: transform 1s cubic-bezier(.34,1.56,.64,1) 1.7s; }
body.motion-ready .foot-giant.seen .fg-o,
body.motion-ready .foot-giant.seen .fg-c{ stroke-dashoffset:0; }
body.motion-ready .foot-giant.seen .fg-dot{ transform:none; }
/* once drawn, drop the dash so the ring has no seam where it began */
body.motion-ready .foot-giant.drawn .fg-o, body.motion-ready .foot-giant.drawn .fg-c{ stroke-dasharray:none; transition:none; }

/* ── spotlight: hairline grids catch the light under the cursor ─── */
.spot{
  --mx:-999px; --my:-999px;
  background-image: radial-gradient(440px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--page-fg) calc(var(--spot) * 46%), transparent), transparent 72%);
  transition: --spot .7s var(--ease);
}
.spot.lit{ --spot:1; }
.spot > *{ position:relative; isolation:isolate; }
.spot > *::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(380px circle at var(--cx, 50%) var(--cy, 50%),
    color-mix(in srgb, currentColor 7%, transparent), transparent 72%);
  opacity:0; transition: opacity .5s var(--ease);
}
.spot > .lit::after{ opacity:1; }

/* ── application form (apply.html) ─────────────────────────────── */
.apply-page main{ padding:clamp(112px,14vh,160px) var(--gut) 0; }
.form-sec{ border-top:1px solid var(--page-rule); padding-top:clamp(26px,3.6vh,44px);
  margin-top:clamp(44px,6vh,72px); }
.form-sec .k{ display:block; margin-bottom:clamp(22px,3vh,34px); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vh,30px) clamp(24px,3vw,48px); }
@media (max-width:760px){ .fgrid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.wide{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--page-fg-3);
}
.field label em{ font-style:normal; opacity:.6; text-transform:none; letter-spacing:.06em; }
.field input, .field select, .field textarea{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:1px solid var(--page-rule); border-radius:0;
  color:var(--page-fg); font-family:var(--font-display); font-weight:300;
  font-size:16px; line-height:1.45; padding:13px 14px;
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--page-fg-3); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--page-fg); background-color:rgba(255,255,255,.35); }
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236E6B64'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:36px;
}
.form-actions{ margin-top:clamp(44px,6vh,72px); display:flex; align-items:center;
  gap:clamp(20px,3vw,40px); flex-wrap:wrap; }
button.cta{ border:0; cursor:pointer; font-family:var(--font-display); }
.form-actions .cta{ margin-top:0; }
.form-alt{ font-size:14px; color:var(--page-fg-2); font-weight:400; padding:12px 15px; border:1px solid var(--page-rule); }
.form-alt strong{ color:var(--page-fg); font-weight:600; }
.form-alt a{ border-bottom:1px solid var(--page-rule); }
.form-alt a:hover{ border-color:var(--page-fg); }
.email-copy{ margin-left:10px; appearance:none; border:0; border-bottom:1px solid var(--page-rule);
  background:transparent; color:var(--page-fg); font:500 12px/1.4 var(--font-display); cursor:pointer; }
.form-note{ font-size:13.5px; line-height:1.65; color:var(--page-fg-3);
  max-width:60ch; margin-top:clamp(24px,3.6vh,40px); font-weight:400; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width:820px){
  .s{ padding-top:84px; padding-bottom:84px; }
  .hero{ min-height:94svh; padding-bottom:44px; }
  .brk{ height:28vh; min-height:170px; }
  .proof-heading, .product-shot{ grid-template-columns:1fr; }
  .proof-heading .note{ margin-top:18px; }
  .product-shot figcaption{ min-height:210px; border-left:0; border-top:1px solid var(--page-rule); }
  .proof-strip{ grid-template-columns:repeat(2,1fr); }
  .commercial-proof{ grid-template-columns:1fr; }
  .hero-foot{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  :root{ --gut:22px; }
  .display{ font-size:clamp(54px,15vw,68px); }
  .hero-title{ font-size:clamp(46px,16.2vw,72px); letter-spacing:-.05em; }
  /* on a phone the copy covers most of the field: give it more paper */
  .hero::before{ background: linear-gradient(to top, transparent 0, color-mix(in srgb, var(--page-bg) 86%, transparent) 22vh, color-mix(in srgb, var(--page-bg) 70%, transparent) 62vh, color-mix(in srgb, var(--page-bg) 22%, transparent) 82vh, transparent 96vh); }
  .hero-actions{ align-items:stretch; flex-direction:column; gap:8px; width:100%; }
  .hero-actions .cta{ width:100%; justify-content:center; }
  .hero-actions .text-link{ align-self:flex-start; }
  .hero-meta{ display:grid; grid-template-columns:1fr 1fr; row-gap:9px; }
  .steps li, .ladder li{ min-height:146px; padding:18px; }
  .steps h3, .ladder h3{ padding-top:18px; }
  .steps p, .ladder p{ font-size:13px; }
  .shot-tabs{ flex-wrap:wrap; gap:0; }
  .shot-tab{ flex:1 0 auto; min-height:44px; padding:14px 12px 15px; font-size:11px; letter-spacing:.12em; }
  .shot-tab::after{ left:12px; right:12px; }
  .product-shot figcaption{ padding:22px; min-height:186px; }
  .product-shot figcaption small{ margin-top:24px; }
  .nots li{ padding-left:28px; }
  .qs ol{ gap:14px; }
  .apply-page main{ padding-top:112px; }
  .apply-title{ font-size:clamp(50px,15vw,72px); }
  .foot-top{ flex-direction:column; align-items:flex-start; }
  .foot-base{ flex-direction:column; }
}

/* motion: honour the preference */
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; }
  .nav-status i, .scroll-cue i, .signal-focus > i::after, .human-status i,
  .principal-avatar::after, .phone-head > i, .dial-tag::before, .clock b{ animation:none; }
  .product-shot img, .shot-tab::after{ transition:none; }
  .nav{ transition:none; }
  .js .hero-title .w, .js .hero-title .wm, .js .hero-in, .js .hero-foot::before, .apply-title b .swi{ animation:none; }
}
