/* sr.nixfred.com — the film. Warm, light, cinematic. Never dark. */

/* ---------- fonts ---------- */
@font-face { font-family: Fraunces; src: url(/fonts/fraunces-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Fraunces; src: url(/fonts/fraunces-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Fraunces; src: url(/fonts/fraunces-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --bloom: #FFFCF5;
  --paper: #FBF6EC;
  --ink: #2B2620;
  --ink-soft: #5E564A;
  --gold: #D49A3E;
  --red: #A53727;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --p: 0; /* film progress 0..1, set by JS */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: none; }
::selection { background: #E8D3A8; }

/* ---------- grain ---------- */
#grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .045; mix-blend-mode: multiply;
  animation: grain 1.6s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 25% { transform: translate(-1.2%, .8%); }
  50% { transform: translate(.9%, -1.1%); } 75% { transform: translate(-.7%, -.6%); } 100% { transform: translate(0,0); }
}

/* ---------- HUD: contrail + altimeter ---------- */
#hud { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .3s; }
#hud.on { opacity: 1; }
#trail { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; height: 30px; }
#trail-line {
  position: absolute; top: 9px; left: 0; height: 2px; width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, transparent, rgba(212,154,62,.25) 30%, rgba(212,154,62,.85));
  border-radius: 2px;
}
#trail-plane {
  position: absolute; top: 10px; left: calc(var(--p) * 100%);
  width: 22px; height: 22px; transform: translate(-4px, -50%);
  color: #8A6A2E;
}
#trail-plane svg { width: 100%; height: 100%; transform: rotate(90deg); fill: currentColor; }
#trail-ticks { position: absolute; top: 4px; left: 0; right: 0; height: 22px; }
#trail-ticks .tick {
  position: absolute; top: 2px; width: 1px; height: 7px; background: rgba(90,74,50,.4);
}
#trail-ticks .tick i {
  position: absolute; top: 8px; left: 2px; font: 500 10px/1 var(--sans);
  font-style: normal; letter-spacing: .14em; color: rgba(90,74,50,.65); white-space: nowrap;
}
#trail-ticks .tick.row2 { height: 16px; }
#trail-ticks .tick.row2 i { top: 17px; }
#trail-ticks .tick.mute i { display: none; }
#altimeter {
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  width: 96px; text-align: center; color: #6B5B41;
}
#altimeter svg { width: 62px; height: 62px; display: block; margin: 0 auto; }
#altimeter .alt-num {
  font: 600 13px/1.25 var(--sans); letter-spacing: .1em; color: #6B5B41;
  background: rgba(255,252,245,.72); border-radius: 3px; padding: 2px 4px 1px; display: inline-block; margin-top: 3px;
}
#altimeter .alt-wpt { font: 500 10px/1.4 var(--sans); letter-spacing: .16em; color: rgba(107,91,65,.8); }
@media (max-width: 700px) {
  #trail-ticks .tick i { display: none; }
  #altimeter { width: 72px; }
  #altimeter svg { width: 44px; height: 44px; }
}

/* ---------- autopilot chip ---------- */
#ap-chip {
  position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(6px);
  font: 600 11px/1 var(--sans); letter-spacing: .24em; color: #6B5B41;
  background: rgba(255,252,245,.88); border: 1px solid rgba(90,74,50,.25);
  border-radius: 3px; padding: 6px 10px 5px; white-space: nowrap;
  opacity: 0; transition: opacity .4s ease, transform .4s ease;
}
#ap-chip.show { opacity: 1; transform: translateX(-50%); }

/* ---------- boot veil ---------- */
#boot {
  position: fixed; inset: 0; z-index: 90; background: var(--bloom);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1s ease; pointer-events: none;
}
#boot .boot-mark { font: 600 13px/1 var(--sans); letter-spacing: .34em; color: #B9A986; animation: bootpulse 1.6s ease-in-out infinite; }
@keyframes bootpulse { 50% { opacity: .35; } }
#boot.off { opacity: 0; }

/* ---------- white bloom veil (service loop + transitions) ---------- */
#veil { position: fixed; inset: 0; z-index: 80; background: var(--bloom); opacity: 0; pointer-events: none; }

/* ---------- scenes: shared ---------- */
.sc {
  position: relative; min-height: 100svh; overflow: clip;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, var(--bg, var(--paper)), var(--bg2, var(--bloom)));
}
.sc::before, .sc::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2.5svh; z-index: 6; pointer-events: none;
}
.sc::before { top: 0; background: linear-gradient(180deg, rgba(255,252,245,.9), rgba(255,252,245,0)); }
.sc::after { bottom: 0; background: linear-gradient(0deg, rgba(255,252,245,.9), rgba(255,252,245,0)); }
/* No white feather over the photos themselves — pictures stay clean edge to edge. */
.sc.hero-sc::before, .sc.hero-sc::after,
.sc.support-sc::before, .sc.support-sc::after { content: none; }

.kicker {
  font: 600 clamp(.72rem, 1.5vw, .95rem)/1.3 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent, var(--gold));
}
.corner {
  position: absolute; top: max(46px, 6svh); left: var(--pad); z-index: 7;
  font: 500 11px/1 var(--sans); letter-spacing: .2em; color: rgba(90,74,50,.55);
}
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
.in .reveal { opacity: 1; transform: none; }
.in .reveal.d1 { transition-delay: .15s; } .in .reveal.d2 { transition-delay: .3s; } .in .reveal.d3 { transition-delay: .45s; }

/* ---------- opener ---------- */
.opener { background: linear-gradient(180deg, #F3E4C8 0%, #FBF3E2 34%, #FDF9F0 55%, #EFE6D4 100%); }
.op-sun {
  position: absolute; top: 8%; left: 50%; width: 46vmin; height: 46vmin; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,240,205,.95), rgba(244,214,150,.35) 55%, transparent 70%);
  border-radius: 50%;
}
.op-runway {
  position: absolute; left: 50%; bottom: -4%; width: 120vmax; height: 74svh;
  transform: translateX(-50%); perspective: 300px; overflow: hidden;
}
.op-runway .strip {
  position: absolute; inset: 0; transform-origin: 50% 100%;
  transform: rotateX(64deg); background: linear-gradient(180deg, #EFE7D6, #E4D9C2);
}
.op-runway .center {
  position: absolute; left: calc(50% - 1.2vmax); width: 2.4vmax; top: 0; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(212,154,62,.55) 0 8vmax, transparent 8vmax 16vmax);
  /* --run is the opener's takeoff scrub (site.js); dashes stream past on the roll. */
  background-position-y: calc(var(--run, 0) * -140vmax);
}
.op-runway .edge { position: absolute; top: 0; bottom: 0; width: 1.1vmax; background: rgba(150,128,92,.35); }
.op-runway .edge.l { left: 7%; } .op-runway .edge.r { right: 7%; }
.op-inner { position: relative; z-index: 5; text-align: center; padding: 0 var(--pad); max-width: 68rem; }
.op-inner h1 {
  font: 600 clamp(2.6rem, 8.4vw, 7.2rem)/1.02 var(--serif);
  letter-spacing: -.015em; color: var(--ink); margin: .35em 0 .3em;
  text-wrap: balance;
}
.op-inner .sub { font: 600 clamp(.85rem, 2vw, 1.15rem)/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #8A6A2E; }
.op-inner .line { font: 300 clamp(1.05rem, 2.4vw, 1.4rem)/1.6 var(--serif); color: var(--ink-soft); max-width: 44ch; margin: 1.4em auto 0; }
.cue {
  position: absolute; bottom: max(20px, 4svh); left: 50%; transform: translateX(-50%); z-index: 5;
  font: 600 clamp(22px, 2.4vw, 33px)/1 var(--sans); letter-spacing: .34em; color: #8A6A2E; text-align: center;
}
.cue .cue-line { width: 2px; height: 96px; margin: 16px auto 0; background: linear-gradient(180deg, #8A6A2E, transparent); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(16px); opacity: .4; } }
.service .cue { display: none; }

/* ---------- chart scenes ---------- */
.sc.chart-sc .chart-bg {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover;
}
.sc.chart-sc .card {
  position: relative; z-index: 5; margin: 0 var(--pad);
  max-width: 34rem; padding: clamp(1.4rem, 3vw, 2.4rem);
  background: rgba(255,252,245,.9); backdrop-filter: blur(3px);
  border: 1px solid rgba(90,74,50,.14); border-radius: 4px;
  box-shadow: 0 24px 70px rgba(58,46,34,.16);
  align-self: center; justify-self: start;
}
.sc.chart-sc { justify-content: flex-start; }
.sc.chart-sc .card h2 { font: 600 clamp(1.7rem, 4vw, 2.7rem)/1.12 var(--serif); margin: .5em 0 .45em; }
.sc.chart-sc .card p { font: 300 clamp(1rem, 2vw, 1.13rem)/1.62 var(--serif); color: var(--ink-soft); }
.chip {
  display: inline-block; margin-top: 1.1em; padding: .45em .7em .35em;
  border: 1px solid rgba(90,74,50,.3); border-radius: 3px;
  font: 600 11px/1 var(--sans); letter-spacing: .18em; color: #6B5B41;
  background: rgba(255,252,245,.75);
}
.card .logo { display: block; height: 34px; margin-top: 1.2em; }

/* ---------- text scenes ---------- */
/* Interstitial beats don't need a full viewport each. */
.sc.text-sc, .sc.stat-sc, .sc.quote-sc { min-height: 0; padding: 9svh 0; }
.sc.text-sc .t-inner { position: relative; z-index: 5; max-width: 42rem; padding: 0 var(--pad); text-align: center; }
.sc.text-sc h2 { font: 600 clamp(1.9rem, 4.6vw, 3.4rem)/1.1 var(--serif); margin: .5em 0 .4em; }
.sc.text-sc p { font: 300 clamp(1.1rem, 2.4vw, 1.4rem)/1.68 var(--serif); color: var(--ink-soft); }
.sc.text-sc .ghost {
  position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background: url(/img/charts/corridor.jpg) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
  mask-image: linear-gradient(90deg, transparent 30%, #000);
}

/* ---------- stat scenes ---------- */
.sc.stat-sc { text-align: center; }
.sc.stat-sc .s-inner { position: relative; z-index: 5; padding: 0 var(--pad); width: 100%; }
.sc.stat-sc .s-line {
  font: 700 clamp(2.6rem, 11vw, 9.5rem)/1 var(--sans);
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
}
.sc.stat-sc .s-line + .s-line { margin-top: .08em; color: var(--accent, var(--gold)); }
.sc.stat-sc .note { font: 300 clamp(.98rem, 2vw, 1.15rem)/1.6 var(--serif); color: var(--ink-soft); max-width: 52ch; margin: 2em auto 0; }
.sc.stat-sc .rule {
  width: min(52vw, 420px); height: 10px; margin: 1.6em auto 0; position: relative; opacity: .55;
  background: repeating-linear-gradient(90deg, #8A6A2E 0 1px, transparent 1px 12px);
}
.sc.stat-sc .rule::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1px; background: rgba(138,106,46,.5); }

/* ---------- quote scenes ---------- */
.sc.quote-sc .q-inner { position: relative; z-index: 5; max-width: 60rem; padding: 0 var(--pad); text-align: center; }
.sc.quote-sc .kicker { display: block; margin-bottom: 2em; }
.sc.quote-sc .q-mark { font: 600 clamp(4rem, 10vw, 8rem)/0.6 var(--serif); color: var(--accent, var(--gold)); opacity: .55; display: block; margin-bottom: .15em; }
.sc.quote-sc blockquote { font: 300 italic clamp(1.9rem, 5.6vw, 4.6rem)/1.22 var(--serif); color: var(--ink); }
.sc.quote-sc .note { font: 300 clamp(.98rem, 2vw, 1.15rem)/1.6 var(--serif); color: var(--ink-soft); max-width: 46ch; margin: 2.2em auto 0; }

/* ---------- photo scenes: hero (full-bleed) ---------- */
.sc.hero-sc figure { position: absolute; inset: 0; overflow: hidden; }
.sc.hero-sc figure img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
}
.sc.hero-sc .ptext {
  position: absolute; z-index: 5; left: var(--pad); right: var(--pad); bottom: max(4.5svh, 2.2rem);
  max-width: 46rem;
  text-shadow: 0 1px 3px rgba(255,252,245,.9), 0 0 22px rgba(255,252,245,.95), 0 0 44px rgba(255,252,245,.8);
}
.sc.hero-sc .ptext .cap { font: 400 clamp(1.08rem, 2.5vw, 1.5rem)/1.5 var(--serif); color: var(--ink); margin-top: .6em; text-wrap: balance; }
.sc.hero-sc .big {
  position: absolute; z-index: 5; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font: 700 clamp(3.4rem, 14vw, 12rem)/1 var(--sans); text-transform: uppercase;
  color: #FFFCF5; text-shadow: 0 4px 60px rgba(58,46,34,.55), 0 1px 8px rgba(58,46,34,.4);
  letter-spacing: .02em; white-space: nowrap;
}

/* ---------- photo scenes: support (composed) ---------- */
/* Height comes from the photo, not the viewport — keeps scenes close together. */
.sc.support-sc { min-height: 0; flex-direction: column; gap: clamp(.7rem, 1.4svh, 1.1rem); padding: 2svh var(--pad); }
.sc.support-sc figure {
  position: relative; z-index: 5;
  /* Width chosen so the photo's height (width / --ar) never exceeds its cap,
     computed from the aspect ratio alone — the box exists before the image loads. */
  width: min(92vw, 66rem, calc(82svh * var(--ar, 1.5)));
  box-shadow: 0 34px 90px rgba(58,46,34,.22), 0 6px 22px rgba(58,46,34,.12);
  border-radius: 3px; overflow: hidden;
}
.sc.support-sc figure img { display: block; width: 100%; height: auto; }
.sc.support-sc.longcap figure { width: min(92vw, 66rem, calc(66svh * var(--ar, 1.5))); }
.sc.support-sc .stext { position: relative; z-index: 5; max-width: 44rem; text-align: center; padding: 0 var(--pad); }
.sc.support-sc .stext .cap { font: 400 clamp(1.02rem, 2.2vw, 1.3rem)/1.55 var(--serif); color: var(--ink); margin-top: .5em; text-wrap: balance; }
.sc.support-sc.archival figure {
  padding: clamp(10px, 1.6vw, 18px); background: #FFFDF8;
  border: 1px solid rgba(90,74,50,.18); border-radius: 2px;
  box-shadow: 0 20px 60px rgba(58,46,34,.2);
}
.sc.support-sc.archival figure img { filter: sepia(.14) contrast(.98); }

/* ---------- flight (pinned horizontal) ---------- */
.sc.flight-sc { display: block; }
.sc.flight-sc .fl-chart {
  position: absolute; inset: -12% 0; width: 100%; height: 124%;
  object-fit: cover; opacity: .9;
}
.sc.flight-sc .fl-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,252,245,.86), rgba(255,252,245,.55) 40%, rgba(255,252,245,.86)); }
.sc.flight-sc .fl-head { position: absolute; z-index: 5; top: 12svh; left: var(--pad); right: var(--pad); max-width: 44rem; }
.sc.flight-sc .fl-head h2 { font: 600 clamp(1.5rem, 3.6vw, 2.6rem)/1.15 var(--serif); margin-top: .5em; }
.sc.flight-sc .fl-track {
  position: absolute; z-index: 5; top: 46svh; left: 0;
  display: flex; gap: clamp(1.2rem, 4vw, 3rem); padding: 0 12vw;
  will-change: transform; width: max-content;
}
.sc.flight-sc .wp {
  flex: 0 0 auto; width: clamp(15rem, 40vw, 22rem);
  background: rgba(255,252,245,.92); border: 1px solid rgba(90,74,50,.16); border-radius: 4px;
  padding: 1.3rem 1.4rem 1.2rem; box-shadow: 0 18px 50px rgba(58,46,34,.15);
}
.sc.flight-sc .wp .wl { font: 700 clamp(1.05rem, 2.4vw, 1.5rem)/1.15 var(--sans); letter-spacing: .06em; }
.sc.flight-sc .wp .ws { font: 300 italic 1rem/1.4 var(--serif); color: var(--ink-soft); margin-top: .4em; }
.sc.flight-sc .wp .wn { font: 600 10px/1 var(--sans); letter-spacing: .22em; color: #8A6A2E; margin-bottom: .6em; }
.sc.flight-sc .fl-plane { position: absolute; z-index: 6; top: calc(46svh - 44px); left: 12vw; width: 30px; height: 30px; color: #6B5B41; }
.sc.flight-sc .fl-plane svg { width: 100%; height: 100%; fill: currentColor; transform: rotate(90deg); }
.sc.flight-sc .fl-contrail { position: absolute; z-index: 5; top: calc(46svh - 30px); left: 0; height: 2px; width: 12vw; background: linear-gradient(90deg, transparent, rgba(107,91,65,.6)); }
.sc.flight-sc .note { position: absolute; z-index: 5; bottom: 8svh; left: var(--pad); font: 300 italic .95rem/1.5 var(--serif); color: var(--ink-soft); }

/* ---------- closer + outro ---------- */
.sc.outro-sc { flex-direction: column; text-align: center; gap: .6rem; background: linear-gradient(180deg, var(--paper), #FDF6E8 45%, #F3E4C8 100%); }
.sc.outro-sc .o-name { font: 600 clamp(2rem, 6vw, 4.4rem)/1.05 var(--serif); }
.sc.outro-sc .o-sub { font: 600 clamp(.8rem, 1.8vw, 1rem)/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #8A6A2E; margin-top: .8em; }
.sc.outro-sc .o-line { font: 300 clamp(1.05rem, 2.3vw, 1.35rem)/1.6 var(--serif); color: var(--ink-soft); max-width: 44ch; margin: 1.6em auto 0; }
.sc.outro-sc .o-logo { display: block; height: 44px; margin: 2.6em auto 0; mix-blend-mode: multiply; opacity: .92; }
.sc.outro-sc .grid-link {
  display: inline-block; margin-top: 2.4em; padding: .9em 1.6em .8em;
  border: 1px solid rgba(90,74,50,.35); border-radius: 3px; text-decoration: none;
  font: 600 13px/1 var(--sans); letter-spacing: .24em; color: #6B5B41; background: rgba(255,252,245,.7);
  transition: background .3s ease, transform .3s ease;
}
.sc.outro-sc .grid-link:hover { background: var(--bloom); transform: translateY(-2px); }
.sc.outro-sc .o-ask { font: 300 clamp(.98rem, 2vw, 1.15rem)/1.6 var(--serif); color: var(--ink-soft); max-width: 46ch; margin: 2.4em auto 0; }
.sc.outro-sc .o-ask a { color: #8A6A2E; }
.sc.outro-sc .ig-embed {
  margin: 3em auto 0; max-width: 440px;
  padding: 1.7rem 1.5rem 1.3rem; background: #FFFDF8;
  border: 1px solid rgba(90,74,50,.18); border-radius: 6px;
  box-shadow: 0 26px 80px rgba(58,46,34,.18), 0 4px 16px rgba(58,46,34,.08);
}
.sc.outro-sc .ig-kicker {
  font: 600 clamp(.72rem, 1.5vw, .82rem)/1.3 var(--sans);
  letter-spacing: .32em; text-transform: uppercase; color: #A53727;
}
.sc.outro-sc .ig-head { font: 600 clamp(1.5rem, 3.4vw, 2.1rem)/1.15 var(--serif); margin-top: .45em; }
.sc.outro-sc .ig-rule {
  width: 120px; height: 2px; margin: .9em auto;
  background: linear-gradient(90deg, transparent, rgba(212,154,62,.85), transparent);
}
.sc.outro-sc .ig-line {
  font: 300 italic clamp(1rem, 2vw, 1.15rem)/1.55 var(--serif);
  color: var(--ink-soft); max-width: 36ch; margin: 0 auto 1.2em;
}
.sc.outro-sc .ig-embed iframe {
  display: block; width: 100%; height: 600px; border: 1px solid rgba(90,74,50,.18);
  border-radius: 4px; background: var(--bloom);
}
.service .grid-link, .service .o-ask, .service .ig-embed { display: none; }

/* ---------- service (kiosk) ---------- */
.service { cursor: none; }
.service .sc.hero-sc figure img { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.05) translateY(-1.2%); } to { transform: scale(1.12) translateY(1.6%); } }

/* ---------- phones ---------- */
/* Heroes stop being full-bleed crops: the whole photo shows, upright and
   centered, like a support scene. The grain layer is a large blended
   composited surface that pressures iOS Safari into blank tiles: off. */
@media (max-width: 700px) {
  #grain { display: none; }
  .sc.hero-sc { min-height: 0; padding: 2svh var(--pad); }
  .sc.hero-sc figure {
    position: relative; inset: auto; overflow: hidden;
    width: min(100%, calc(86svh * var(--ar, 1.4)));
    border-radius: 3px;
    box-shadow: 0 20px 60px rgba(58,46,34,.2);
  }
  .sc.hero-sc figure img {
    display: block; width: 100%; height: auto;
    object-fit: unset; transform: none;
  }
  .sc.hero-sc .ptext {
    position: static; margin-top: .9rem; max-width: none;
    text-align: center; text-shadow: none;
  }
  .sc.hero-sc .big { top: 50%; font-size: clamp(2.6rem, 13vw, 5rem); }
  .service .sc.hero-sc figure img { animation: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #grain, .cue .cue-line { animation: none; }
  .service .sc.hero-sc figure img { animation: none; }
  .reveal { transition: opacity .6s ease; transform: none; }
}