/* Carving Mountains — rebuild prototype
   Art direction D16 "Warm Paper, Deep Forest" (Jev score 2.57 @ conf 0.57) is the default.
   Art direction D15 "Signal Dark" (2.36 @ 0.36) is [data-theme="dark"] — same markup, token swap.
   Every colour is declared twice: rgb() fallback first, then oklch(). The site being replaced
   had 352 rgb() declarations and zero oklch().                                        PLAN.md §6 */

/* Self-hosted Anuphan, Thai + Latin variable subsets: 2 files, 53 KB total. This replaces a
   Google Fonts CDN <link> that pulled 4 woff2 files (thai, vietnamese, latin-ext, latin) behind
   a render-blocking third-party stylesheet, against a budget of 2 files and a plan that says
   self-host and preload one. The wght axis is 100-700, so a single file per script covers every
   weight the site uses; Vietnamese and Latin-ext are not needed for a TH/EN site and are dropped.
   The Thai subset is preloaded in index.html because Thai is the default language (D11).
   Anuphan is SIL Open Font License 1.1 - see fonts/OFL.txt.          PLAN.md §6, §9 (<=2 files) */
@font-face{
  font-family:"Anuphan";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("fonts/anuphan-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Anuphan";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("fonts/anuphan-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Two contrast tokens were added after measuring the palette as it actually renders (the oklch
   declarations win in every current browser, so they are what gets measured, not the hex above):
     --focus      focus rings and form outlines. --gold measures 2.15:1 on --paper, under the 3:1
                  WCAG 1.4.11 minimum for a non-text control, so focus uses --forest on light
                  ground (14.30:1) and --gold on dark ground (14.69:1).
     --gold-line  gold used as a border or state indicator on a light ground (#9A7B2C, 3.75:1).
                  --gold itself stays for large fills, text on --forest (6.65:1) and decoration.
   --clay as rendered is 2.98:1 on --paper: do not use it for text or borders on a light ground
   without darkening it. It is currently unused.                                     PLAN.md §9 */
/* BRAND PALETTE, taken from the original live site's own stylesheet on 2026-09-29 at the
   owner's instruction ("same colours as original"): ground #0A0A0F (their bg-brand-950),
   surfaces #121218, gold #C9A84C and champagne #C8A97E (rgb(200 169 126)), deep green
   #0F2318, sage #7C9A7C/#A8C5A8, clay #C47D5E, tan #D4A574/#B8956A, emerald #059669,
   cyan #0891B2, text #1A1A1A on light / #F5F4F2 on dark. Hex only, like the original —
   the earlier oklch restatements are kept for the light theme where they were measured.
   The logo lockup is white-and-gold on black, so dark is the default ground; the paper
   look survives as [data-theme="light"] for anyone who prefers it.                */
:root,[data-theme="dark"]{
  --paper:#0A0A0F; --ink:#F5F4F2; --forest:#0F2318; --gold:#C9A84C; --champagne:#C8A97E;
  --clay:#C47D5E; --rescue:#059669; --line:rgba(245,244,242,.14); --mute:rgba(245,244,242,.66);
  --card:#121218; --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 40px -22px rgba(0,0,0,.85);
  --focus:#C9A84C; --gold-line:#C9A84C;
  --r:.75rem; --maxw:1180px; --gutter:clamp(1.1rem,4vw,2.5rem);
}
[data-theme="light"]{
  --paper:#FAF7F2; --ink:#14201A; --forest:#0F2318; --gold:#C9A84C; --champagne:#B8956A;
  --clay:#C47D5E; --rescue:#2F6B4F; --line:rgba(20,32,26,.14); --mute:rgba(20,32,26,.64);
  --card:#FFFFFF; --shadow:0 1px 2px rgba(15,35,24,.05),0 12px 32px -18px rgba(15,35,24,.28);
  --focus:#0F2318; --gold-line:#9A7B2C;
  --paper:oklch(97.6% .008 88); --ink:oklch(24% .02 155); --forest:oklch(26% .035 152);
  --gold:oklch(74% .09 88); --clay:oklch(66% .075 45); --rescue:oklch(48% .07 158);
  --line:oklch(24% .02 155 / .14); --mute:oklch(24% .02 155 / .64); --card:oklch(99.5% .004 88);
  --focus:oklch(26% .035 152); --gold-line:oklch(59.8% .103 87);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Anuphan","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);line-height:1.65;font-weight:400;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
/* Thai gets more leading than Latin: no inter-word spaces, taller vowel and tone marks.
   English is the DEFAULT language since 2026-09-29 (owner: "english first thai second"),
   overriding D11's Thai-default; Thai remains fully supported, not an afterthought.
   Design choice, not a cited requirement — the W3C Thai doc 404'd (PLAN.md §2). */
html[lang="th"] body{line-height:1.95}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{line-height:1.55;letter-spacing:0}

img,video,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.12;color:var(--forest)}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{color:var(--ink)}
p{margin:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:44rem}

/* language switching: both texts live in the DOM, CSS picks one — works with JS disabled */
html[lang="th"] .en{display:none}
html[lang="en"] .th{display:none}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
/* inside the dark --forest bands the light-ground focus colour would vanish, so those keep
   --gold, which measures 6.65:1 against --forest */
.rescue :focus-visible,.site-foot :focus-visible{outline-color:var(--gold)}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--paper);padding:.7rem 1rem;z-index:99}
/* without this the dark-theme skip link is --forest on --paper: 1.06:1, effectively invisible
   to the first keyboard user who tabs into the page */
[data-theme="dark"] .skip{background:var(--gold);color:#0B0F0E}
.skip:focus{left:.5rem;top:.5rem}

code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em}
.fine{font-size:.8rem;color:var(--mute);margin-top:.8rem}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rescue);margin-bottom:1rem}
[data-theme="dark"] .eyebrow{color:var(--gold)}
.sec-title{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);max-width:22ch}
.lede{color:var(--mute);font-size:1.06rem;margin-top:1rem;max-width:56ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:var(--r);
  border:1px solid transparent;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn-lg{padding:.95rem 1.5rem;font-size:1.02rem}
.btn-primary{background:var(--forest);color:var(--paper)}
[data-theme="dark"] .btn-primary{background:var(--gold);color:#0B0F0E}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--gold-line);color:var(--forest)}
[data-theme="dark"] .btn-ghost:hover{color:var(--gold)}
/* LINE's own green with white text measures 2.26:1, under the 4.5:1 body-text minimum, and the
   green fill against --paper measures 2.11:1, under the 3:1 a UI component boundary needs. This
   is the single primary CTA (D2 @ conf 0.99), so both are fixed rather than left to the dark
   theme: a near-black label (8.39:1) and a dark border that separates the button from the page
   (4.13:1). Both themes now share one rule.                                    PLAN.md §9 */
.btn-line{background:#06C755;color:#04140A;border-color:rgba(4,20,10,.55);
  padding:.5rem .85rem;font-size:.88rem;border-radius:.6rem}
.btn-line:hover{filter:brightness(1.06)}

/* ---------- header ---------- */
.proto-note{background:var(--forest);color:var(--paper);font-size:.78rem;text-align:center;padding:.4rem 1rem}
[data-theme="dark"] .proto-note{background:var(--gold);color:#0B0F0E}
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:1.2rem;padding-block:.7rem}
.mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:600;letter-spacing:-.02em;
  color:var(--forest);font-size:1.02rem}
[data-theme="dark"] .mark{color:var(--ink)}
.mark svg{color:var(--gold)}
.mark b{font-weight:400;opacity:.62}
.nav{display:flex;gap:1.15rem;margin-left:auto;font-size:.93rem;font-weight:500}
.nav a{text-decoration:none;color:var(--mute);padding-block:.3rem;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--ink);border-color:var(--gold-line)}
.head-act{display:flex;align-items:center;gap:.5rem}
.lang,.theme{background:transparent;border:1px solid var(--line);border-radius:.55rem;padding:.32rem .55rem;
  font:inherit;font-size:.78rem;font-weight:600;color:var(--mute);cursor:pointer;line-height:1}
.lang:hover,.theme:hover{color:var(--ink);border-color:var(--gold-line)}
.theme{display:flex;align-items:center;gap:.4rem}
.theme .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--gold);border:1px solid var(--line)}
html[lang="th"] .lang .on-en,html[lang="en"] .lang .on-th{opacity:.45}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.4rem,6vw,4.6rem) clamp(2rem,5vw,3.6rem);border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
h1{font-size:clamp(1.95rem,1.2rem + 3.2vw,3.5rem);max-width:19ch}
h1 em{font-style:normal;color:var(--rescue);box-shadow:inset 0 -.14em 0 color-mix(in srgb,var(--gold) 45%,transparent)}
[data-theme="dark"] h1 em{color:var(--gold);box-shadow:none}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:1.6rem;margin:2.2rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--line)}
.proof li{display:flex;flex-direction:column;gap:.15rem;max-width:16ch;font-size:.86rem;color:var(--mute);line-height:1.45}
.proof b{font-size:1.5rem;font-weight:600;color:var(--forest);letter-spacing:-.02em}
[data-theme="dark"] .proof b{color:var(--gold)}

/* ---------- agent demo panel ---------- */
.hero-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);
  font-size:.8rem;font-weight:600;color:var(--mute);background:color-mix(in srgb,var(--forest) 4%,transparent)}
[data-theme="dark"] .panel-head{background:color-mix(in srgb,var(--gold) 6%,transparent)}
.dotline{width:.55rem;height:.55rem;border-radius:50%;background:#06C755;box-shadow:0 0 0 3px color-mix(in srgb,#06C755 22%,transparent)}
.chat{padding:1rem;display:flex;flex-direction:column;gap:.6rem;min-height:15rem}
.msg{margin:0;padding:.65rem .85rem;border-radius:.85rem;font-size:.9rem;line-height:1.5;max-width:88%;
  opacity:0;transform:translateY(6px);animation:rise .45s ease forwards}
.msg.them{align-self:flex-start;background:color-mix(in srgb,var(--forest) 7%,transparent);border:1px solid var(--line);border-bottom-left-radius:.2rem}
.msg.me{align-self:flex-end;background:var(--forest);color:var(--paper);border-bottom-right-radius:.2rem}
[data-theme="dark"] .msg.me{background:var(--gold);color:#0B0F0E}
.msg:nth-of-type(1){animation-delay:.15s}.msg:nth-of-type(2){animation-delay:1.05s}
.msg:nth-of-type(3){animation-delay:2.05s}.msg:nth-of-type(4){animation-delay:2.95s}
@keyframes rise{to{opacity:1;transform:none}}
.panel-note{padding:0 1rem 1rem;font-size:.78rem;color:var(--mute)}
.replay{margin:0 1rem .6rem;background:transparent;border:1px solid var(--line);border-radius:.5rem;
  padding:.3rem .6rem;font:inherit;font-size:.76rem;color:var(--mute);cursor:pointer}
.replay:hover{color:var(--ink);border-color:var(--gold-line)}

/* ---------- bands ---------- */
.band{padding-block:clamp(2.6rem,6vw,4.6rem);border-bottom:1px solid var(--line)}
.band-alt{background:color-mix(in srgb,var(--forest) 3.5%,transparent)}
[data-theme="dark"] .band-alt{background:color-mix(in srgb,var(--gold) 4%,transparent)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.card .num{display:block;font-family:ui-monospace,Menlo,monospace;font-size:.74rem;color:var(--rescue);margin-bottom:.9rem}
[data-theme="dark"] .card .num{color:var(--gold)}
.card h3{font-size:1.12rem;margin-bottom:.5rem}
.card p{font-size:.93rem;color:var(--mute)}

/* work tiles */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.tiles a{display:flex;flex-direction:column;gap:.2rem;padding:1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);text-decoration:none;font-size:.82rem;color:var(--mute);transition:border-color .18s,transform .18s}
.tiles b{font-size:.98rem;font-weight:600;color:var(--ink)}
.tiles a:hover{border-color:var(--gold-line);transform:translateY(-2px)}

/* ---------- rescue ---------- */
.rescue{background:var(--forest);color:#F2EDE4;border-bottom:none}
[data-theme="dark"] .rescue{background:#08110C}
.rescue .sec-title,.rescue h2,.rescue h3{color:#FBF8F2}
.rescue .lede,.rescue .fine{color:rgba(250,247,242,.72)}
.rescue .eyebrow{color:var(--gold)}
.rescue .btn-ghost{border-color:rgba(250,247,242,.28);color:#FBF8F2}
.rescue .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.rescue a{color:var(--gold)}
.receipts{display:flex;gap:1.6rem;flex-wrap:wrap;margin:1.8rem 0 0;padding:0}
.receipts>div{border-left:2px solid var(--gold);padding-left:.9rem}
.receipts dt{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(250,247,242,.62);max-width:16ch}
.receipts dd{margin:.35rem 0 0;font-size:1.5rem;font-weight:600;color:#FBF8F2}
.video{margin:0}
.vplay{position:relative;display:block;width:100%;padding:0;border:1px solid rgba(250,247,242,.2);
  border-radius:var(--r);overflow:hidden;background:#0A1610;cursor:pointer;line-height:0}
.vplay img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;opacity:.9}
.vbtn{position:absolute;inset:0;margin:auto;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--gold);
  color:#0F2318;display:grid;place-items:center;font-size:1.1rem;line-height:1;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.vplay:hover .vbtn{transform:scale(1.06)}
.vcap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .6rem;font-size:.76rem;line-height:1.4;
  color:#FBF8F2;background:linear-gradient(transparent,rgba(6,14,10,.85));text-align:left}
.video figcaption{font-size:.78rem;color:rgba(250,247,242,.62);margin-top:.6rem}
.video video{width:100%;display:block;border-radius:var(--r);background:#000}

/* ---------- tiers ---------- */
.tiers{align-items:stretch}
.tier{display:flex;flex-direction:column;position:relative}
.tier.featured{border-color:var(--gold-line);box-shadow:var(--shadow)}
.tier .flag{position:absolute;top:-.7rem;left:1.2rem;background:var(--gold);color:#0F2318;font-size:.68rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .55rem;border-radius:.4rem;margin:0}
.price{font-size:1.9rem;font-weight:600;color:var(--forest);letter-spacing:-.02em;margin:.6rem 0 1rem;
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
[data-theme="dark"] .price{color:var(--gold)}
.price span{font-size:.78rem;font-weight:500;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.tier ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:var(--mute)}
.tier li{padding-left:1.1rem;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--gold)}

/* ---------- contact ---------- */
.band-cta{text-align:center}
.band-cta .sec-title,.band-cta .lede{margin-inline:auto}
.band-cta .or{margin:1.1rem 0;font-size:.8rem;color:var(--mute)}
.enq{margin:1.4rem auto 0;max-width:30rem;text-align:left;display:flex;flex-direction:column;gap:.9rem}
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld label{font-size:.8rem;font-weight:600;color:var(--mute)}
.fld input,.fld textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:.5rem;padding:.65rem .8rem;width:100%}
.fld input:focus,.fld textarea:focus{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:1px}

/* ---------- footer ---------- */
.site-foot{background:var(--forest);color:rgba(250,247,242,.78);padding-block:2.6rem}
[data-theme="dark"] .site-foot{background:#050807}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr;gap:1.6rem}
.mark-sm{font-weight:600;color:#FBF8F2;font-size:1.05rem;margin-bottom:.7rem}
.mark-sm b{font-weight:400;opacity:.6}
.site-foot address{font-style:normal;font-size:.88rem;line-height:1.7}
.site-foot a{color:var(--gold);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-in nav{display:flex;flex-direction:column;gap:.45rem;font-size:.9rem;align-self:start}
.give{grid-column:1/-1;border-top:1px solid rgba(250,247,242,.18);padding-top:1.1rem;margin-top:.6rem;font-size:.9rem}
.site-foot .fine{color:rgba(250,247,242,.5)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-in,.split,.foot-in{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .nav{display:none}
  .head-in{gap:.6rem}
  .mark{margin-right:auto}
  .btn-line span{display:none}
}
@media (max-width:520px){
  .tiles{grid-template-columns:1fr}
  .proof{gap:1rem}
  .head-act .theme{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .msg{opacity:1;transform:none}
}
/* =============================================================================
   IMAGERY + MOTION — added 2026-09-27 after the owner's review: "The site has no
   images no motion".

   What kind of motion, and why this kind: research §1 says what reads as current in
   September 2026 is scroll-driven reveals and an editorial long-scroll — not glow,
   glass, orbs or particles. Jev points the same way from the other side: D17 scored
   the 2024-25 gradient/glass look 1.76 ("dated") and D8 scored a hero background
   video 0.02. So every effect here is transform/opacity only (composited, never
   layout), driven by IntersectionObserver rather than a scroll handler, and the one
   scroll-linked element — the progress bar — is passive and rAF-throttled.

   Guardrails from §9: every <img> carries explicit width/height inside an
   aspect-ratio box so CLS stays <=0.1; below-the-fold images are lazy; the hero
   image is fetchpriority="high" and never lazy because it is the likely LCP
   element; and all of it is switched off under prefers-reduced-motion below.
   ============================================================================= */

/* --- scroll progress: 2px, gold, transform-only --- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;z-index:40;pointer-events:none}

/* --- reveals. The hidden state exists only under .js, set by an inline script in
       <head>, so a visitor without JS never loses content and one with JS never
       sees a flash of hidden-then-shown. --- */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.16,.84,.28,1);
  transition-delay:var(--rd,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* --- hero: photograph with the live agent panel overlapping it --- */
.hero-visual{position:relative}
.hero-shot{display:block;margin:0;border-radius:calc(var(--r) * 1.5);overflow:hidden;
  box-shadow:var(--shadow);background:var(--forest)}
.hero-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  animation:drift 30s ease-in-out infinite alternate}
/* Slow push-in — the "cinematic full-bleed" signal research §1 lists as current, done
   as a single transform so it never touches layout. */
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.11) translate3d(-1.5%,-1.2%,0)}}
.hero-visual .hero-panel{position:relative;z-index:2;
  margin:-3.5rem clamp(.5rem,2.5vw,1.6rem) 0;
  box-shadow:0 2px 4px rgba(15,35,24,.06),0 28px 60px -28px rgba(15,35,24,.5)}

/* --- work tiles: image above the label, zoom on hover and on keyboard focus --- */
.tiles a{padding:0 0 .9rem;overflow:hidden}
.tile-shot{display:block;aspect-ratio:4/3;overflow:hidden;
  background:color-mix(in srgb,var(--forest) 8%,transparent)}
.tile-shot img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,.84,.28,1)}
.tiles a:hover .tile-shot img,.tiles a:focus-visible .tile-shot img{transform:scale(1.06)}
.tiles a b{padding:.85rem .9rem 0}
.tiles a>span:not(.tile-shot){padding-inline:.9rem}

/* --- rescue: the figure stays pinned while the story scrolls past --- */
@media (min-width:961px){
  .rescue .split{align-items:start}
  .rescue .video{position:sticky;top:5.5rem}
}
.vplay picture{display:block}
.vplay img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

/* --- progressive enhancement: real scroll-driven parallax where it is supported,
       no fallback needed because the static framing already works --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hero-shot img{animation:drift-view linear both;animation-timeline:view();
      animation-range:entry 55% exit 45%}
    @keyframes drift-view{from{transform:scale(1.05) translateY(1%)}to{transform:scale(1.13) translateY(-3%)}}
  }
}

/* These two blocks come last on purpose: they must win over everything above. */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-shot img{animation:none}
  .tiles a:hover .tile-shot img,.tiles a:focus-visible .tile-shot img{transform:none}
  .progress{display:none}
}

/* Brand-default (dark) fixes for the few rules written against a light ground. */
.mark img{height:2.7rem;width:auto;display:block}
.mark-sm img{height:2.1rem;width:auto;display:block}
[data-theme="dark"] .skip{background:var(--gold);color:#0A0A0F}
[data-theme="dark"] .hero-shot{background:#000}
@media print{
  .site-head,.proto-note,.replay,.video,.progress{display:none}
  .js .reveal{opacity:1;transform:none}
}