/* Brand-first hero. Actual Tide field above a pre-rendered ordered-dither plate.
   Two visual directions share geometry; no changing filters or heavy grain loop. */
:root[data-theme] .hero.tide-hero {
  --hero-ink:#F3F0EC; --hero-soft:#C7C1D1; --hero-surface:#0B0A10; --hero-line:#514859;
  position:relative; isolation:isolate; overflow:hidden; max-width:none; margin:0;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center;
  gap:clamp(20px,3vw,56px); padding:38px max(var(--gutter),calc((100vw - 1280px)/2)) 52px;
  min-height:590px; background:var(--hero-surface); color:var(--hero-ink); text-align:left;
  border-bottom:1px solid var(--hero-line);
}
:root[data-theme='booklet'] .hero.tide-hero {
  --hero-ink:#1B1024; --hero-soft:#4A3F52; --hero-surface:#F6F2EA; --hero-line:#BFB3C4;
}
:root[data-theme] .hero.tide-hero::before { display:none; }
.hero.tide-hero .hero-atmosphere { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-atmosphere img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-atmosphere .atmosphere-brand { display:none; }
:root[data-theme='booklet'] .hero-atmosphere .atmosphere-dark { display:none; }
:root[data-theme='booklet'] .hero-atmosphere .atmosphere-brand { display:block; }
:root[data-theme] .hero.tide-hero .hero-copy {
  background:none; padding:0; display:block; align-self:center; min-width:0; max-width:none;
}
:root[data-theme] .hero.tide-hero .eyebrow {
  margin:0; max-width:48ch; color:var(--hero-soft); font:400 11px/1.7 var(--mono); letter-spacing:.095em;
}
:root[data-theme] .hero.tide-hero h1 {
  margin:25px 0 0; color:var(--hero-ink); font:400 clamp(42px,4.7vw,68px)/1.09 var(--mono);
  letter-spacing:-.065em; max-width:none; text-transform:none;
}
:root[data-theme='booklet'] .hero.tide-hero h1 { text-transform:uppercase; font-size:clamp(40px,4.45vw,64px); letter-spacing:-.045em; }
:root[data-theme] .hero.tide-hero .hero-sub {
  max-width:37ch; margin:26px 0 0; color:var(--hero-soft); font:400 clamp(20px,1.75vw,25px)/1.42 var(--serif);
}
:root[data-theme] .hero.tide-hero .hero-ctas { margin-top:32px; gap:12px; justify-content:flex-start; }
:root[data-theme] .hero.tide-hero .btn.primary { color:var(--hero-surface); background:var(--hero-ink); border-color:var(--hero-ink); min-height:50px; }
:root[data-theme] .hero.tide-hero .btn.ghost { color:var(--hero-ink); background:var(--hero-surface); border-color:var(--hero-line); min-height:50px; }
:root[data-theme] .hero.tide-hero .btn.primary:hover { color:#171020; background:#FBB665; border-color:#FBB665; }
:root[data-theme] .hero.tide-hero .btn.ghost:hover { border-color:var(--hero-ink); }
:root[data-theme] .hero.tide-hero .hero-mark { margin:0; min-width:0; width:100%; max-width:590px; justify-self:center; background:none; padding:0; }
.tide-stage { position:relative; width:100%; aspect-ratio:1; isolation:isolate; }
.tide-stage iframe,.tide-poster { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; background:transparent; }
.tide-stage iframe { opacity:0; }
.tide-stage[data-state='live'] iframe { opacity:1; }
.tide-stage[data-state='loading'] .tide-poster { opacity:0; }
.tide-poster[hidden] { display:none; }
.tide-stage[data-state='static'] iframe,.tide-stage[data-state='paused'] iframe { visibility:hidden; }
.tide-loading { position:absolute; inset:48% 10% auto; text-align:center; font:400 11px/1.6 var(--mono); color:var(--hero-soft); pointer-events:none; }
.tide-loading:empty { display:none; }
.tide-caption { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:-9px 7% 0; color:var(--hero-soft); font:400 11px/1.5 var(--mono); }
.tide-controls { display:flex; gap:8px; flex:none; }
.tide-controls button { min-height:40px; padding:8px 12px; border:1px solid var(--hero-line); border-radius:5px; background:var(--hero-surface); color:var(--hero-ink); font:400 10px/1.4 var(--mono); }
.tide-controls button:hover { border-color:var(--hero-ink); }
.tide-controls button:disabled { opacity:.5; cursor:default; }
.hero.tide-hero a:focus-visible,.hero.tide-hero button:focus-visible { outline:3px solid #FBB665; outline-offset:4px; }
:root[data-theme='booklet'] .hero.tide-hero a:focus-visible,:root[data-theme='booklet'] .hero.tide-hero button:focus-visible { outline-color:#5C08FD; }
@media(min-width:1000px) and (max-height:780px) {
  :root[data-theme] .hero.tide-hero { min-height:500px; padding-top:22px; padding-bottom:36px; }
  :root[data-theme] .hero.tide-hero .hero-mark { max-width:480px; }
  :root[data-theme] .hero.tide-hero h1 { font-size:56px; }
}
@media(max-width:1000px) {
  :root[data-theme] .hero.tide-hero { min-height:0; grid-template-columns:1fr 1fr; padding-top:36px; padding-bottom:42px; gap:20px; }
  :root[data-theme] .hero.tide-hero h1 { font-size:clamp(35px,4.9vw,48px); }
  :root[data-theme] .hero.tide-hero .hero-sub { font-size:20px; }
  .tide-caption { margin:0; flex-direction:column; gap:10px; text-align:center; }
}
@media(max-width:700px) {
  :root[data-theme] .hero.tide-hero { grid-template-columns:1fr; gap:18px; padding:34px 24px 32px; }
  :root[data-theme] .hero.tide-hero h1 { font-size:clamp(37px,8.5vw,52px); letter-spacing:-.06em; margin-top:20px; }
  :root[data-theme] .hero.tide-hero .hero-sub { font-size:20px; margin-top:20px; max-width:34ch; }
  :root[data-theme] .hero.tide-hero .hero-ctas { margin-top:24px; }
  :root[data-theme] .hero.tide-hero .eyebrow { font-size:10px; max-width:44ch; }
  :root[data-theme] .hero.tide-hero .hero-mark { max-width:430px; }
  .tide-caption { margin:-7px 0 0; flex-direction:row; text-align:left; font-size:10px; gap:10px; }
  .tide-controls { gap:6px; }
  .tide-controls button { padding:8px 9px; }
  .hero-atmosphere img { object-position:70% bottom; }
}
@media(prefers-reduced-motion:no-preference) {
  .tide-stage iframe { transition:opacity .35s ease; }
  .tide-controls button { transition:border-color .2s ease; }
}

/* ---------- Hero entrance (Scott 1789766243: "animate and fade in with the tide version") ----------
   Copy settles first (eyebrow → title → sub → CTAs, 90 ms apart); the mark fades and scales up over 1.1 s
   once the field reports ready, so the first motion the reader sees is the Tide filling in, not a pop.
   Reduced motion: everything is visible immediately. */
@media (prefers-reduced-motion: no-preference) {
  .hero.tide-hero[data-hero-entrance='pending'] .eyebrow,
  .hero.tide-hero[data-hero-entrance='pending'] h1,
  .hero.tide-hero[data-hero-entrance='pending'] .hero-sub,
  .hero.tide-hero[data-hero-entrance='pending'] .hero-ctas,
  .hero.tide-hero[data-hero-entrance='pending'] .tide-caption { opacity:0; transform:translateY(10px); }
  .hero.tide-hero .eyebrow, .hero.tide-hero h1, .hero.tide-hero .hero-sub, .hero.tide-hero .hero-ctas, .hero.tide-hero .tide-caption {
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .hero.tide-hero h1 { transition-delay:.09s; }
  .hero.tide-hero .hero-sub { transition-delay:.18s; }
  .hero.tide-hero .hero-ctas { transition-delay:.27s; }
  .hero.tide-hero .tide-caption { transition-delay:.9s; }
  .tide-stage { opacity:0; transform:scale(.94); transition:opacity 1.1s cubic-bezier(.22,1,.36,1) .25s, transform 1.4s cubic-bezier(.22,1,.36,1) .25s; }
  .hero.tide-hero[data-hero-entrance='live'] .tide-stage,
  .hero.tide-hero[data-hero-entrance='static'] .tide-stage { opacity:1; transform:none; }
  .hero-atmosphere { opacity:0; transition:opacity 1.6s ease .1s; }
  .hero.tide-hero[data-hero-entrance='live'] .hero-atmosphere,
  .hero.tide-hero[data-hero-entrance='static'] .hero-atmosphere,
  .hero.tide-hero[data-hero-entrance='copy'] .hero-atmosphere { opacity:1; }
}
/* Under reduced motion the hero is fully visible from first paint regardless of entrance state. */
@media (prefers-reduced-motion: reduce) {
  .hero.tide-hero[data-hero-entrance] .eyebrow, .hero.tide-hero[data-hero-entrance] h1, .hero.tide-hero[data-hero-entrance] .hero-sub,
  .hero.tide-hero[data-hero-entrance] .hero-ctas, .hero.tide-hero[data-hero-entrance] .tide-caption, .tide-stage, .hero-atmosphere { opacity:1; transform:none; transition:none; }
}
/* The iframe canvas should receive the pointer: nothing above it in the stage while live. */
.tide-stage[data-state='live'] .tide-poster { pointer-events:none; }
.tide-stage[data-state='live'] .tide-loading { display:none; }

/* ---------- Statement band (below the fold, before the product) ---------- */
.statement { position:relative; border-bottom:1px solid var(--line); background:var(--bg); }
:root[data-theme='booklet'] .statement { background:#F6F2EA; border-color:#BFB3C4; }
.statement-inner { max-width:var(--max); margin:0 auto; padding:clamp(72px,9vw,132px) var(--gutter) clamp(64px,8vw,116px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:clamp(28px,4vw,72px); align-items:end; }
.statement-eyebrow { grid-column:1 / -1; margin:0; }
.statement-title { margin:0; max-width:12ch; font:400 clamp(44px,6.2vw,96px)/.98 var(--mono); letter-spacing:-.06em; color:var(--ink); text-wrap:balance; }
:root[data-theme='booklet'] .statement-title { text-transform:uppercase; letter-spacing:-.04em; font-size:clamp(40px,5.6vw,86px); color:#1B1024; }
.statement-title .w { display:inline-block; opacity:0; transform:translateY(.35em); transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.statement-title .w.on { opacity:1; transform:none; }
.statement-body { display:grid; gap:26px; align-content:end; }
.statement-lede { margin:0; max-width:40ch; font:400 clamp(18px,1.5vw,22px)/1.45 var(--serif); color:var(--ink-2); }
:root[data-theme='booklet'] .statement-lede { color:#4A3F52; }
.statement-proof { margin:0; display:grid; gap:14px; padding-top:18px; border-top:1px solid var(--line-2); }
:root[data-theme='booklet'] .statement-proof { border-color:#BFB3C4; }
.statement-proof div { display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; align-items:baseline; }
.statement-proof dt { font:400 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.statement-proof dd { margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); }
:root[data-theme='booklet'] .statement-proof dd { color:#4A3F52; }
.statement-cue { justify-self:start; font:400 12px/1 var(--mono); color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:6px; }
:root[data-theme='booklet'] .statement-cue { color:#1B1024; border-color:#BFB3C4; }
.reveal-line { opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-line.on { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .statement-title .w, .reveal-line { opacity:1; transform:none; transition:none; }
}
@media (max-width:900px) {
  .statement-inner { grid-template-columns:1fr; align-items:start; }
  .statement-title { max-width:none; }
}