/* ============================================================
   Ånäs Hårdesign — DYNAMIC VARIANT (Version B)
   Structure & scale : "Creative Giants" reference
   Palette & rules   : Ånäs_Hårdesign_Brand_Guide_v3.docx

   Deliberately NOT taken from the reference:
   - 1440px pill radius (guide: "avoid playful pill styling everywhere")
   - teal / powder blue / candy pink / magenta / signal yellow
     (owner's stated disliked colours: green, blue, red)
   ============================================================ */

/* Self-hosted (no request to Google — avoids sending visitor IPs to a US
   third party, a GDPR concern in the EU). Latin subset covers å ä ö. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:200 500; font-display:swap;
  src:url(../fonts/inter-var-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;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/jetbrains-mono-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;
}

:root{
  --c-paper:   #FAF7F1;
  --c-surface: #E8DDCF;
  --c-ink:     #171717;
  --c-accent:  #B79A63;    /* decorative only — never text under 20px */
  --c-muted:   #77736E;    /* brand token, non-text use */
  --c-muted-text: #635F5B; /* AA-safe secondary text */
  --c-hair:    rgba(183,154,99,.45);

  --f-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --s-8:8px; --s-16:16px; --s-24:24px; --s-32:32px;
  --s-48:48px; --s-64:64px; --s-80:80px; --s-112:112px;

  --pad: 20px;                 /* full-bleed page inset */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-line: cubic-bezier(.22,1,.36,1);
}
@media (min-width:900px){ :root{ --pad:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:light;
}
[id]{ scroll-margin-top:96px; }

body{
  margin:0;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--f-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-.018em;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
ul,ol{ list-style:none; margin:0; padding:0; }
figure,dl,dd{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a,button{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(23,23,23,.08); }

/* Sharp corners, no elevation — carried over from the brand system */
*{ border-radius:0 !important; box-shadow:none !important; }
.arrow{ border-radius:50% !important; }   /* the one exception: circular arrow control */

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--c-ink);
  outline-offset:3px;
}
.contact :where(a,button):focus-visible{ outline-color:var(--c-accent); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-ink); color:var(--c-paper);
  padding:12px 20px; font-family:var(--f-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.03em;
}
.skip-link:focus{ left:0; }

/* ---------- type primitives ---------- */
.mono{
  font-family:var(--f-mono); font-weight:400;
  font-size:12px; text-transform:uppercase; letter-spacing:.03em;
  line-height:1.35;
}
.eyebrow{ color:var(--c-muted-text); margin:0 0 var(--s-24); }
.eyebrow--light{ color:rgba(250,247,241,.72); }

/* The poster headline — the reference's signature move, at brand scale */
.display{
  font-weight:200;
  font-size:clamp(2.75rem, 11vw, 7.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  margin:0;
  max-width:14ch;
}
.display--light{ color:var(--c-paper); }

.heading{
  font-weight:200;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.02;
  letter-spacing:-.023em;
  margin:0;
  max-width:20ch;
}

.lede{
  font-weight:300;
  font-size:clamp(1rem,.95rem + .3vw,1.25rem);
  line-height:1.45;
  margin:0;
  max-width:38ch;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:14px 32px;
  font-family:var(--f-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.03em;
  text-decoration:none; border:1px solid transparent;
  transition:background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}
.btn--solid{ background:var(--c-ink); color:var(--c-paper); border-color:var(--c-ink); }
.btn--solid:hover{ background:transparent; color:var(--c-ink); }
.btn--ghost{ padding:14px 0; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.btn--ghost:hover{ text-decoration-color:var(--c-accent); }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-32); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:60;
  isolation:isolate;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:var(--s-16);
  padding:var(--s-16) var(--pad);
  background:transparent;
  color:var(--c-paper);
  border-bottom:1px solid transparent;
  transition:background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}
/* Legibility guard: the header floats over the hero video, where a bright frame
   would otherwise wash out the white nav. */
.hdr::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:190px;
  background:linear-gradient(to bottom, rgba(23,23,23,.62), rgba(23,23,23,0));
  pointer-events:none; z-index:-1;
  transition:opacity 320ms var(--ease);
}
.hdr.is-solid{
  background:var(--c-paper);
  color:var(--c-ink);
  border-bottom-color:var(--c-hair);
}
.hdr.is-solid::before{ opacity:0; }

.hdr__mark{
  grid-column:2;
  font-weight:300; font-size:clamp(1rem,.9rem + .5vw,1.375rem);
  letter-spacing:-.02em; text-decoration:none; white-space:nowrap;
}
.hdr__right{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:var(--s-24); }

.burger{ display:grid; gap:4px; width:16px; }
.burger i{ display:block; height:1px; background:currentColor; }

.hdr__call{
  min-height:44px; display:inline-flex; align-items:center;
  text-decoration:underline; text-underline-offset:4px;
}
@media (max-width:599px){ .hdr__call{ display:none; } }
.langswitch{ display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:12px; }
.langswitch span{ opacity:.4; }
.langswitch__btn{
  min-height:44px; padding:0 2px;
  font-family:var(--f-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.03em;
  opacity:.55; transition:opacity 320ms var(--ease);
}
.langswitch__btn.is-active{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.hdr__menu{
  grid-column:1; justify-self:start;
  min-height:44px; padding:0 2px;
  display:inline-flex; align-items:center; gap:var(--s-12,12px);
}
.hdr__progress{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  overflow:hidden; pointer-events:none;
}
.hdr__progress i{
  display:block; height:100%; background:var(--c-accent);
  transform:scaleX(0); transform-origin:left;
}

/* ============================================================
   NAV OVERLAY
   ============================================================ */
.navoverlay{
  position:fixed; inset:0; z-index:100;
  background:var(--c-paper);
  overscroll-behavior:contain;
  display:flex; flex-direction:column;
  padding-bottom:var(--s-32);
}
.navoverlay[hidden]{ display:none; }
.navoverlay__bar{ padding:var(--s-16) var(--pad); border-bottom:1px solid var(--c-hair); }
.navoverlay__close{ min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.navoverlay__nav{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:var(--s-8); padding:var(--s-48) var(--pad);
}
.navoverlay__nav a{
  position:relative;
  font-weight:200;
  font-size:clamp(2rem,7vw,4.5rem);
  line-height:1.02; letter-spacing:-.04em;
  text-decoration:none; padding:6px 0;
  width:max-content; max-width:100%;
  transition:opacity 320ms var(--ease-line), transform 320ms var(--ease-line);
}
.navoverlay__nav a::after{
  content:''; position:absolute; left:0; bottom:.08em; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 320ms var(--ease-line);
}
.navoverlay__nav a:hover::after{ transform:scaleX(1); }
.navoverlay__foot{
  display:flex; flex-wrap:wrap; gap:var(--s-24);
  padding:var(--s-24) var(--pad) 0;
  border-top:1px solid var(--c-hair);
  color:var(--c-muted-text);
}

/* ============================================================
   1. HERO — full-bleed video with the poster headline overlaid
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--c-paper);
  /* pull up under the transparent header */
  margin-top:calc(-1 * (44px + 32px));
  padding-top:calc(44px + 32px);
}
.hero__media{ position:absolute; inset:0; background:var(--c-ink); }
.hero__video{ width:100%; height:100%; object-fit:cover; }
/* Two-axis scrim: vertical protects the bottom-anchored caption, horizontal
   darkens the left column where the oversized headline actually sits. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(23,23,23,.74) 0%, rgba(23,23,23,.44) 36%, rgba(23,23,23,.08) 66%, rgba(23,23,23,0) 100%),
    linear-gradient(to top,   rgba(23,23,23,.76) 0%, rgba(23,23,23,.46) 34%, rgba(23,23,23,.10) 66%, rgba(23,23,23,.30) 100%);
}
.hero__caption{
  position:relative;
  width:100%;
  padding:var(--s-64) var(--pad);
  display:flex; flex-direction:column; gap:var(--s-24);
}
.hero__meta{ margin:0; color:rgba(250,247,241,.82); }
/* 15ch (not 13) so "lasts." doesn't orphan onto its own third line in the
   EN headline — measured directly (letter-spacing included): the column
   needs to be 1050–1165px at the 120px clamp max for "with quality that
   lasts." to sit together on line two without also pulling "with" up onto
   line one. 15ch lands at ~1087px, comfortably inside that window and
   scales with it at any viewport since ch tracks the clamp'd font-size.
   The Swedish headline's own safe window for a matching fix barely
   doesn't overlap this one (its lower bound is ~2px above this one's
   upper bound) — not something to chase without risking the English fix
   on minor rendering variance, so SV keeps its existing 3-line wrap. */
.hero__caption .display{ color:var(--c-paper); max-width:min(100%,15ch); }
.hero__caption .lede{ color:rgba(250,247,241,.9); }
@media (min-width:900px){
  .hero__caption{ padding-block:var(--s-80); }
}
/* The fixed Ring/SMS bar covers the bottom below 900px — lift the CTAs clear. */
@media (max-width:899px){
  .hero__caption{ padding-bottom:calc(var(--s-64) + 52px); }
}

/* Hero sound toggle — opt-in only, browsers block audio with no gesture
   anyway. Bottom-right: top-right collided with the header's own SV/EN +
   CALL cluster (both absolute-positioned in the same corner over the
   transparent header). Bottom-right sits clear of the caption, which is
   bottom-LEFT. Its own scrim-dark backdrop keeps it legible over any
   footage regardless of what's behind it. */
.hero__sound{
  /* Phones: under the header, because the bottom corner is occupied by the
     CTA row there (two buttons span nearly the full width and overlapped it).
     900px+: bottom-right, below. */
  position:absolute; z-index:2; top:calc(44px + 32px + var(--s-16)); right:var(--pad);
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  background:rgba(23,23,23,.44); border:1px solid rgba(250,247,241,.4);
  color:var(--c-paper); cursor:pointer;
}
.hero__sound:hover{ background:rgba(23,23,23,.6); }
.hero__sound-icon{ width:20px; height:20px; }
.hero__sound-icon--on{ display:none; }
.hero__sound[aria-pressed="true"] .hero__sound-icon--off{ display:none; }
.hero__sound[aria-pressed="true"] .hero__sound-icon--on{ display:block; }
/* Below 900px the fixed Ring/SMS bar covers the bottom — the extra 52px
   above clears it, same offset .hero__caption already uses for the same
   reason. At 900px+ there is no sticky bar, so drop back to a plain gap. */
@media (min-width:900px){
  .hero__sound{ top:auto; bottom:var(--s-32); }
}

/* ============================================================
   3. MARQUEE
   ============================================================ */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--c-hair);
  padding-block:var(--s-16);
  background:var(--c-paper);
}
.marquee__track{ display:flex; width:max-content; }
.marquee__set{
  white-space:nowrap;
  font-size:13px;
  color:var(--c-muted-text);
}
.js-motion .marquee__track{ animation:marquee 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:var(--s-112) 0; }
.sechead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-32);
  padding:0 var(--pad) var(--s-48);
}
.section__note{
  margin:var(--s-32) 0 0; padding:0 var(--pad);
  color:var(--c-muted-text); max-width:70ch;
}

.arrows{ display:flex; gap:var(--s-8); flex:none; }
.arrow{
  width:48px; height:48px;
  display:grid; place-items:center;
  border:1px solid var(--c-muted);
  color:var(--c-ink);
  transition:border-color 320ms var(--ease), opacity 320ms var(--ease);
}
.arrow:hover{ border-color:var(--c-ink); }
.arrow[disabled]{ opacity:.3; cursor:default; }
.arrow svg{ width:20px; height:20px; }
@media (max-width:699px){ .arrows{ display:none; } }

/* ============================================================
   4. HORIZONTAL GALLERY
   ============================================================ */
.gallery{
  display:flex;
  gap:var(--s-32);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--pad);
  padding:0 var(--pad) var(--s-16);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.gallery:focus-visible{ outline:2px solid var(--c-ink); outline-offset:4px; }
.card{
  flex:0 0 auto;
  width:min(78vw,340px);
  scroll-snap-align:start;
}
.card__fig{ overflow:hidden; margin-bottom:var(--s-16); }
.card__fig img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  transition:transform 420ms var(--ease-line);
}
@media (hover:hover){ .card:hover .card__fig img{ transform:scale(1.04); } }
/* Priority index — informational, not decoration, so it must pass AA.
   Soft Gold is 2.51:1 on Warm White and fails at every size, so gold stays
   on hairlines only. */
.card__no{ margin:0 0 var(--s-8); color:var(--c-muted-text); font-size:13px; }
.card__name{
  margin:0 0 var(--s-8);
  font-weight:300; font-size:clamp(1.125rem,1rem + .4vw,1.375rem);
  letter-spacing:-.02em; line-height:1.2;
}
.card__body{
  margin:0; font-size:14px; line-height:1.45;
  color:var(--c-muted-text);
}

/* Drag affordance — mouse only; touch keeps native scrolling */
@media (hover:hover) and (pointer:fine){
  .gallery{ cursor:grab; }
  .gallery.is-dragging{ cursor:grabbing; user-select:none; scroll-snap-type:none; }
  .gallery.is-dragging img{ pointer-events:none; }
}

/* Progress track + counter */
.galleryfoot{
  display:flex; align-items:center; gap:var(--s-24);
  padding:var(--s-24) var(--pad) 0;
}
.galleryprog{
  flex:1; height:1px; background:var(--c-hair); overflow:hidden;
}
.galleryprog i{
  display:block; height:100%; background:var(--c-accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 220ms var(--ease);
}
.gallerycount{ margin:0; flex:none; color:var(--c-muted-text); font-variant-numeric:tabular-nums; }

/* ============================================================
   LOCATION
   ============================================================ */
.location{ padding-inline:var(--pad); }
.location .heading{ margin-bottom:var(--s-32); }
.location__meta{ display:grid; gap:var(--s-8); margin-bottom:var(--s-32); max-width:40ch; }
.location__meta dt{ color:var(--c-muted-text); margin-top:var(--s-16); }
.location__meta dt:first-child{ margin-top:0; }
.location__meta dd{ font-weight:300; font-size:17px; }
.location__meta a{ text-decoration:underline; text-underline-offset:4px; }

/* ============================================================
   5. PINNED METHOD SEQUENCE
   ============================================================ */
.pinned{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-32);
  padding:var(--s-64) var(--pad) var(--s-112);
}
/* 3:4 matches both the Midjourney start frames and the video model's output,
   so nothing gets cropped anywhere in the chain. */
.pinned__media{ position:relative; aspect-ratio:3/4; background:var(--c-ink); }
.pinned__frame{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 420ms var(--ease);
}
.pinned__frame.is-active{ opacity:1; }
.step{ padding-block:var(--s-32); }
.step__no{ margin:0 0 var(--s-8); color:var(--c-muted-text); font-size:13px; }
.step__title{
  margin:0 0 var(--s-16);
  font-weight:200; font-size:clamp(1.75rem,4.5vw,3rem);
  line-height:1.02; letter-spacing:-.027em;
}
.step__body{ margin:0; font-weight:300; max-width:44ch; color:var(--c-ink); }

@media (min-width:900px){
  .pinned{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--s-80);
    align-items:start;
  }
  .pinned__media{
    position:sticky; top:96px;
    max-height:calc(100svh - 140px);
  }
  .step{ min-height:82svh; display:flex; flex-direction:column; justify-content:center; padding-block:0; }
}

/* ============================================================
   6. ABOUT
   ============================================================ */
.about{
  display:grid; grid-template-columns:1fr; gap:var(--s-32);
  padding-inline:var(--pad);
}
.about__text p{ font-weight:300; margin:var(--s-24) 0 0; max-width:46ch; }
.about__fig{ overflow:hidden; background:var(--c-ink); }
/* 16:9 matches both the source frame and the video model's output exactly,
   so nothing gets cropped in the chain from Midjourney frame to clip. */
.about__fig img,
.about__fig video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
@media (min-width:900px){
  .about{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--s-80); align-items:center; }
}

/* ============================================================
   7. CONTACT
   ============================================================ */
.contact{
  background:var(--c-ink); color:var(--c-paper);
  padding:var(--s-112) var(--pad);
}
.contact__phone{
  display:inline-block;
  font-weight:200;
  font-size:clamp(2rem,7vw,4.5rem);
  letter-spacing:-.04em; line-height:1;
  text-decoration:none;
  border-bottom:1px solid var(--c-hair);
  padding-bottom:var(--s-16);
  transition:border-color 320ms var(--ease);
}
.contact__phone:hover{ border-bottom-color:var(--c-paper); }

/* Two stylists, two numbers — replaces the old single .contact__phone
   anchor with a pair of person blocks. Same visual language (the number
   is still the oversized anchor per block), scaled down a step since two
   now sit together instead of one alone. */
.contact__people{
  display:grid; grid-template-columns:1fr; gap:var(--s-64);
  margin:var(--s-48) 0 var(--s-64);
}
@media (min-width:700px){
  .contact__people{ grid-template-columns:1fr 1fr; gap:var(--s-80); }
}
.contact__person-name{ color:rgba(250,247,241,.62); margin:0 0 var(--s-16); }
.contact__people .contact__phone{
  font-size:clamp(1.75rem,5.5vw,3.25rem);
  margin:0 0 var(--s-24);
}
.contact__links{ display:flex; flex-wrap:wrap; gap:var(--s-16) var(--s-24); }
.contact__links a{
  font-weight:300; font-size:17px;
  text-decoration:underline; text-underline-offset:4px;
}

.contact__grid{
  display:grid; grid-template-columns:1fr; gap:var(--s-48);
  border-top:1px solid rgba(250,247,241,.2);
  padding-top:var(--s-48);
}
.contact__grid dt{ color:rgba(250,247,241,.62); margin-top:var(--s-24); }
.contact__grid dt:first-child{ margin-top:0; }
.contact__grid dd{ font-weight:300; font-size:17px; margin-top:var(--s-8); }
.contact__grid a{ text-decoration:underline; text-underline-offset:4px; }
/* Only one dl remains here (email) since booking moved into .contact__people
   above — auto-fit rather than a hard two-column split so a single child
   doesn't leave a blank column. */
@media (min-width:700px){ .contact__grid{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--s-80); } }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{ background:var(--c-surface); padding:var(--s-64) var(--pad); }
.ftr__top{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-32); }
.ftr__logo{ width:100%; max-width:240px; height:auto; background:var(--c-ink); padding:var(--s-16); }
.ftr__tag{ margin:0; font-weight:300; color:var(--c-muted-text); max-width:32ch; }
.ftr__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-16);
  margin-top:var(--s-48); padding-top:var(--s-24);
  border-top:1px solid var(--c-hair);
  color:var(--c-muted-text);
}
.ftr__bottom p{ margin:0; }

/* ============================================================
   STICKY MOBILE ACTIONS
   ============================================================ */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; border-top:1px solid var(--c-hair);
  background:var(--c-paper);
  padding-bottom:env(safe-area-inset-bottom);
}
.stickybar__btn{
  flex:1; min-height:52px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; text-decoration:none;
}
.stickybar__btn--solid{ background:var(--c-ink); color:var(--c-paper); }
@media (max-width:899px){
  .stickybar{ display:flex; }
  body{ padding-bottom:52px; }
}

/* ============================================================
   MOTION — strictly opt-in behind .js-motion (see dynamic.js)
   ============================================================ */
.line{ display:block; }
.line__in{
  display:block;
  transition:opacity 420ms var(--ease-line), transform 420ms var(--ease-line);
}
.js-motion .line__in{ opacity:0; transform:translateY(.34em); }
.js-motion .is-in .line__in{ opacity:1; transform:none; }

.reveal{ transition:opacity 420ms var(--ease); }
.js-motion .reveal{ opacity:0; }
.js-motion .reveal.is-in{ opacity:1; }

/* Ambient scroll scale on full-bleed media — a settle, not parallax:
   no differential offset, so it cannot fight reading. */
@supports (animation-timeline: view()){
  .js-motion [data-scale] .about__fig img,
  .js-motion [data-scale] .about__fig video{
    animation:ambient-scale linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  /* The hero is deliberately excluded: it fills the viewport at load, so a
     view() range is already exhausted before the user scrolls — and it is
     playing video, which supplies its own motion. */
}
@keyframes ambient-scale{
  from{ transform:scale(1.06); }
  to  { transform:scale(1.00); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .reveal{ opacity:1 !important; }
  .line__in{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none !important; transform:none !important; }
  .pinned__frame{ position:relative; opacity:1 !important; }
  .pinned__media{ aspect-ratio:auto !important; position:static !important; display:grid; gap:var(--s-16); }
  .hdr__progress{ display:none; }
}