/* ============================================================
   SMART DIGITAL — one dark room
   A single stylesheet. Tokens first, then the sections in page order.

   Launch type is self-hosted Inter (SIL OFL), one system:
     display (≈48px+)      Inter 300, -0.035em, line-height 1.02–1.06
     medium headings       Inter 400 (≈24–47px)
     body                  Inter 400, 16–18px
     labels                Inter 500, 11–12px, +0.08em, uppercase
   Visuelt Pro stays out of the stack until a licensed copy exists (otherwise a
   machine with it installed would render a different site). To switch later:
   drop the licensed files into assets/fonts, uncomment the @font-face block
   below and put 'Visuelt Pro' first in --font.
   ============================================================ */

/* Inter 4 variable (wght 100–900, opsz 14–32), subset to latin + latin-ext (Czech) and the
   arrows/maths the page uses → 205 KB WOFF2. The full 856 KB TTF stays as the fallback source. */
@font-face{
  font-family:Inter;
  src:url('assets/fonts/inter-variable.woff2') format('woff2'),url('assets/fonts/inter-variable.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* Licensed Visuelt Pro drop-in — uncomment once the files exist.
@font-face{font-family:'Visuelt Pro';src:url('assets/fonts/visuelt-pro-light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Visuelt Pro';src:url('assets/fonts/visuelt-pro-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Visuelt Pro';src:url('assets/fonts/visuelt-pro-medium.woff2') format('woff2');font-weight:500;font-display:swap}
*/

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- tokens ---------- */
:root{
  /* surface — the page is one room; nothing here lightens the canvas */
  --void:#000;               /* true black: matches the blacks inside the footage */
  --surface:#111111;
  --hairline:#242424;
  --paper:#f2f1ed;
  --smoke:#8f8f8b;
  --accent:#cce446;          /* sampled from the approved Phase 1 board */

  /* rhythm */
  --gutter:clamp(20px,4vw,72px);
  --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  --space-32:128px; --space-40:160px;
  --section:clamp(96px,12vw,180px);

  /* type */
  --font:Inter,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --display-1:clamp(40px,6.3vw,104px);
  --display-2:clamp(32px,4.6vw,76px);
  --display-3:clamp(26px,2.7vw,44px);
  --stat:clamp(104px,15.5vw,248px);
  --body:clamp(16px,1.15vw,18px);
  --label:clamp(11px,0.82vw,12px);

  /* motion — one physics, different choreography */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-ui:cubic-bezier(.22,1,.36,1);  /* the one hover curve: fast out, long settle */
  --t-ui:280ms;
  --t-hover:300ms;
  --t-hover-media:420ms;

  /* nav + hero inset and chrome, proportioned from the approved board */
  --edge:clamp(20px,4.6vw,84px);
  --nav-clear:clamp(76px,6vw,96px);      /* nav bottom + air */
  --ui-ink:rgb(242 241 237 / .83);       /* persistent UI: softened warm white */
  --t-reveal:600ms;
  --t-state:1000ms;
  --stagger:52ms;
}

*,*::before,*::after{box-sizing:border-box}
/* anchors land clear of the floating nav (no bar behind it to hide under) */
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-clear);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--paper);
  font-family:var(--font);font-weight:400;font-size:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.locked{overflow:hidden}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a,button{touch-action:manipulation}
::selection{background:var(--accent);color:#070707}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:fixed;top:-100px;left:var(--gutter);z-index:60;background:var(--paper);color:#070707;padding:10px 16px;font-size:13px;font-weight:500}
.skip:focus{top:14px}

/* small caps metadata — the only tracked type on the page */
.label{
  font-size:var(--label);font-weight:500;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);
}
.label--paper{color:var(--paper)}

.bleed{position:relative;width:100%}
.frame{position:relative;overflow:hidden;background:#0b0b0b}
.frame>img,.frame>video{width:100%;height:100%;object-fit:cover}

/* readability scrim — never text straight onto raw footage */
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim--bottom{background:linear-gradient(180deg,#0000 42%,#00000073 74%,#000000c4 100%)}
.scrim--top{background:linear-gradient(180deg,#00000085,#0000 30%)}

/* ---------- navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:40;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:clamp(18px,2.2vw,34px) var(--edge) 0;
  pointer-events:none;
  /* No bar, no blur, no border: only the type floats. A soft shadow keeps it
     legible when a bright frame scrolls underneath. */
  text-shadow:0 1px 14px rgb(0 0 0 / .42),0 0 2px rgb(0 0 0 / .28);
  transition:transform 320ms var(--ease-ui),opacity 320ms var(--ease-ui);
}
/* past the opening viewport the nav steps aside on the way down (240 ms) and returns on the
   way up (320 ms), so it never lies across a heading; keyboard focus always brings it back */
.nav.is-hidden{transform:translateY(-110%);opacity:0;transition-duration:240ms}
.nav:focus-within{transform:none;opacity:1}
.nav>*{pointer-events:auto}
/* Wordmark stays plain type; the only addition is one short, thin lime rule. */
.nav__brand{
  position:relative;display:inline-block;line-height:1;color:var(--ui-ink);
  font-size:clamp(13px,1.02vw,15px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:calc(.8em + var(--rule));
  --rule:2px;
}
/* the lime rule belongs to the opening scene: it folds away to the left once
   the hero is behind the visitor and unfolds again on the way back */
.nav__brand::after{
  content:'';position:absolute;left:0;bottom:0;width:43%;height:var(--rule);background:var(--accent);
  box-shadow:0 1px 8px rgb(0 0 0 / .35);transform-origin:0 50%;
  transition:transform 250ms var(--ease-ui);
}
.nav.is-past-hero .nav__brand::after{transform:scaleX(0)}
.nav__links{display:flex;gap:clamp(20px,2.8vw,44px);font-size:clamp(13px,1.02vw,15px);font-weight:400;line-height:1;letter-spacing:.02em}
.nav__links a{display:inline-block;color:var(--ui-ink);transform-origin:50% 55%;transition:transform var(--t-hover) var(--ease-ui),color var(--t-hover) var(--ease-ui)}
.nav__links .arrow{margin-left:.45em}
.nav__menu{display:none}
.menu{display:none}

/* ---------- text reveal ---------- */
/* the mask clears accents above the caps (KOLÍN), descenders, and glyphs that overhang a tightly tracked
   word; equal negative margins keep every line box and word position unchanged */
.mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.14em .05em;margin:-.14em -.05em}
.mask>span{display:inline-block;transform:translateY(105%);opacity:0}
.is-in .mask>span{
  transform:none;opacity:1;
  transition:transform var(--t-reveal) var(--ease),opacity calc(var(--t-reveal) * .7) var(--ease-soft);
  transition-delay:calc(var(--d,0ms) + var(--i,0) * var(--stagger));
}
[data-rise]{opacity:0;transform:translateY(14px);transition:opacity 620ms var(--ease-soft),transform var(--t-reveal) var(--ease)}
[data-rise].is-in{opacity:1;transform:none}
[data-rise][style*="--d"]{transition-delay:var(--d)}


/* ============================================================
   INTERACTION SYSTEM — one hover language for the whole site
   300 ms, one decelerating curve, no bounce. Hover only exists for a
   fine pointer; keyboard focus shows the same state and touch gets a
   pressed state instead of a simulated hover.
   ============================================================ */
a,button{-webkit-tap-highlight-color:transparent}

/* Arrows carry the motion; the label never moves on its own. */
.arrow{display:inline-block;transition:transform var(--t-hover) var(--ease-ui),color var(--t-hover) var(--ease-ui)}
.arrowlink{--shift:translate(0,3px)}
.arrowlink--up{--shift:translate(0,-3px)}
.arrowlink--ne{--shift:translate(2.5px,-2.5px)}
.arrowlink--right{--shift:translate(3px,0)}

/* Media: the frame clips, the picture inside becomes active.
   .hover-media                 image frame, whole frame is the control
   .hover-media--video          video preview, whole frame is the control
   .hover-media--play           film frame: its play button covers the whole frame; only the
                                preview toggle in the corner is a separate control */
.hover-media{overflow:hidden}
.hover-media__item{transition:scale var(--t-hover-media) var(--ease-ui),filter var(--t-hover-media) var(--ease-ui)}

@media (hover:hover) and (pointer:fine){
  .arrowlink:hover .arrow{color:var(--accent);transform:var(--shift)}
  .nav__links a:hover{transform:scale(1.02);color:var(--paper)}

  .hover-media:hover .hover-media__item{scale:1.02;filter:brightness(1.05) contrast(1.03)}
  .hover-media--video:hover .hover-media__item{scale:1.02;filter:brightness(1.06)}
  .hover-media--play:hover .hover-media__item{scale:1;filter:none}
  .hover-media--play:has(.play:hover) .hover-media__item{scale:1.02;filter:brightness(1.06)}

  .hover-media:hover .play__disc{background-color:var(--accent);border-color:var(--accent);color:#0b0b0b}
  .hover-media--play:hover .play__disc{background-color:rgb(204 228 70 / 0);border-color:rgb(255 255 255 / .92);color:#fff}
  .play:hover .play__disc{background-color:var(--accent);border-color:var(--accent);color:#0b0b0b}
}

/* keyboard: identical to hover */
.arrowlink:focus-visible .arrow{color:var(--accent);transform:var(--shift)}
.reel:focus-visible .hover-media__item{scale:1.02;filter:brightness(1.06)}
.reel:focus-visible .play__disc,.play:focus-visible .play__disc{background-color:var(--accent);border-color:var(--accent);color:#0b0b0b}

/* touch: a short pressed state, never a sticky hover */
@media (hover:none),(pointer:coarse){
  .arrowlink:active .arrow{color:var(--accent);transform:var(--shift);transition-duration:90ms}
  .reel:active .play__disc,.play:active .play__disc{background-color:var(--accent);border-color:var(--accent);color:#0b0b0b;transition-duration:90ms}
  .reel:active .hover-media__item,.hover-media--play:has(.play:active) .hover-media__item{scale:.985;transition-duration:120ms}
  .cue--toggle:active,.nav__menu:active{opacity:.6}
}

/* ============================================================
   00  INTRO — the first viewport getting ready, nothing more
       The nav wordmark on black with its lime rule as a progress line. site.js holds it
       until the font, the poster and enough of the right hero film are in, completes the
       line, holds, fades, and removes it. Without JS it steps aside on its own after 10 s.
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--void);
  transition:opacity 320ms var(--ease-ui);
  animation:intro-failsafe 1ms linear 10s forwards;
}
.intro.is-out{opacity:0;pointer-events:none}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden}}
.intro__mark{display:inline-grid;justify-items:stretch;gap:.94em;font-size:clamp(13px,1.02vw,15px)}   /* nav brand size */
.intro__word{display:block;height:.7275em;width:auto;fill:var(--ui-ink)}   /* cap height of Inter; baseline → line as in the nav */
.intro__line{display:block;height:2px;overflow:hidden;background:rgb(242 241 237 / .14)}
.intro__fill{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.intro.is-static .intro__fill{transform:none}

/* ============================================================
   01  HERO — the film is the page; the interface stays out of it
   ============================================================ */
.hero-hold{height:100svh}
.hero{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--void)}
.hero__media{position:absolute;inset:0;transform:scale(var(--hero-scale,1));will-change:transform}
.hero__media picture,.results__media picture{display:block;position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__media video{position:absolute;inset:0;opacity:0;transition:opacity 520ms var(--ease-soft)}
.hero__media video.is-ready{opacity:1;transition-duration:160ms}   /* revealed on the poster's own frame: a short blend is enough */
.hero__inner{position:absolute;inset:0;opacity:var(--hero-fade,1)}
/* Readability only: a soft band under the nav and a low corner of depth
   behind the headline. Invisible on the dark shots, it keeps white type
   readable when the edit cuts to a bright ceiling or a white dash. */
.hero__scrim{background:
  linear-gradient(180deg,rgb(0 0 0 / .42) 0%,rgb(0 0 0 / .14) 11%,rgb(0 0 0 / 0) 22%),
  radial-gradient(ellipse 75% 65% at 0% 100%,rgb(0 0 0 / .38),rgb(0 0 0 / 0) 72%),
  linear-gradient(180deg,rgb(0 0 0 / 0) 36%,rgb(0 0 0 / .34) 64%,rgb(0 0 0 / .72) 100%)}
.hero__title{
  position:absolute;left:var(--edge);right:var(--edge);bottom:var(--title-bottom);
  font-size:var(--title-size);font-weight:300;line-height:1.05;letter-spacing:var(--title-track);
  color:var(--paper);
  --title-size:clamp(40px,5.74vw,112px);
  --title-track:-.035em;
  --title-bottom:17.4svh;
}
.hero__title .line{display:block;white-space:nowrap}
.hero__title .line--soft{color:rgb(242 241 237 / .8)}
/* "grow" carries the lime and the faintest lift of light — depth, not neon. */
.hero__title .line--grow{color:var(--accent)}
/* LOCAL DEVELOPMENT ONLY: ABC Diatype, approved Variant A (README, "Hero typography"). site.js sets
   html.has-diatype on localhost once the trial files have loaded; in production the class never appears
   and the headline stays Inter as above. Same size, position, colours and line breaks:
   Light for "We help", Regular for "automotive brands" and "grow". */
html.has-diatype .hero__title{font-family:'ABC Diatype Trial',var(--font);line-height:.96}
html.has-diatype .hero__title .line{font-weight:400;letter-spacing:-.03em}
html.has-diatype .hero__title .line--soft{font-weight:300;letter-spacing:-.02em}
html.has-diatype .hero__title .line--grow{letter-spacing:-.02em}
/* DISPLAY TYPE — the same development-only Diatype, carried from the hero to every display line made of
   WORDS: level 2 = chapter and project titles (IAMWORK, POD KAPOTOU, ADWRAP / SPECTRA, Let's talk.),
   level 3 = statements (MCar, the Pod Kapotou line). Regular 400 throughout — Light stays the hero's soft
   first line. Figures (498K, the metrics), labels, body, nav, CTAs and the contact links stay Inter. In
   production html.has-diatype never appears and all of this is inert: the same sizes in Inter. */
html.has-diatype :is(.results__statement,.iam-hero__copy h2,.series__title,.series__lead,.project__head h2,.contact h2){
  font-family:'ABC Diatype Trial',var(--font);font-weight:400
}
html.has-diatype .iam-hero__copy h2,html.has-diatype .contact h2{letter-spacing:-.03em;line-height:1}
html.has-diatype .series__title{letter-spacing:-.005em;line-height:.92}
html.has-diatype .project__head h2{letter-spacing:.005em;line-height:1}
html.has-diatype .results__statement{letter-spacing:-.02em;line-height:1.1}
html.has-diatype .series__lead{letter-spacing:-.02em}
/* Diatype sets ~6 % wider: POD KAPOTOU stays on one line inside its half of the grid */
@media (min-width:901px){ html.has-diatype .series__title{font-size:clamp(44px,6.2vw,112px)} }
.hero__bar{
  position:absolute;left:var(--edge);right:var(--edge);bottom:var(--bar-bottom);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  --bar-bottom:5.5svh;
}
.cue{
  display:inline-flex;align-items:center;gap:.9em;line-height:1;color:rgb(242 241 237 / .78);
  font-size:clamp(11px,.82vw,12px);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.cue__icon{width:1.05em;height:1.05em;overflow:visible}
.cue__icon path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.cue__icon .i-play{fill:currentColor;stroke:none}
.cue--toggle .i-play,.cue--toggle.is-paused .i-pause{display:none}
.cue--toggle.is-paused .i-play{display:inline}

/* ============================================================
   02  MCAR RESULTS — one photograph, one number
   ============================================================ */
/* The hero is sticky, so this anchor must land on its own top edge, not
   --nav-clear into the handoff. */
.results{position:relative;z-index:1;height:100svh;min-height:660px;overflow:hidden;background:var(--void);scroll-margin-top:calc(-1 * var(--nav-clear))}
.results__media{position:absolute;inset:0}
/* leaving the scene, the photograph (and the light overlays registered to it) trails the page: --drift
   is 0 while the scene is in view and only grows once its top edge has passed (site.js, desktop) */
.results__media,.power{translate:0 var(--drift,0px)}
.results__media img{width:100%;height:100%;object-fit:cover;object-position:50% 47%}
.results__scrim{position:absolute;inset:0;background:linear-gradient(180deg,#00000073,#0000 24%,#0000 38%,#000000ab 70%,#000 100%)}
.results__copy{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(44px,6vh,72px);
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:end;gap:clamp(28px,4.8vw,80px);
}
.stat{display:block}
.stat__value{
  display:block;font-size:var(--stat);font-weight:300;line-height:.82;
  letter-spacing:-.058em;color:var(--accent);margin-left:-.04em;
}
.stat__unit{display:block;margin-top:clamp(12px,1.6vh,22px)}
/* Studio lights: overlays share the photograph's exact fit and position, so the
   LED mask sits on the real ceiling at any viewport. The dim layer is black with
   the car's light bar cut out, so the room darkens but the car's lights never do.
   Armed only on desktop with motion allowed; removed once the lights are on. */
.power{position:absolute;inset:0;pointer-events:none;display:none}
.power>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 47%}
.power__dim,.power__led{opacity:0}
.results.is-armed .power{display:block}
.results.is-armed.is-ready .power__dim{opacity:.17}   /* ≈83% of the lit photograph */
.results.is-armed.is-ready .power__led{opacity:1}
.results.is-powered .power{display:none}

/* Odometer: the real "498K" keeps the layout box the whole time; the rolling
   digits are drawn over it and removed when they land. */
.stat__value[data-odometer]{position:relative}
html.js-odometer .stat__value[data-odometer]:not(.is-rolling):not(.is-done){opacity:0}
.stat__value.is-rolling{color:transparent}
.odo{position:absolute;inset:0;pointer-events:none;color:var(--accent)}
.odo__col{position:absolute;top:0;height:100%;clip-path:inset(4% -45% 3% -45%)}
.odo__strip{display:block;will-change:transform,filter}
.odo__strip>span{display:block;white-space:pre}
.results__statement{font-size:var(--display-3);font-weight:400;letter-spacing:-.025em;line-height:1.13;max-width:19ch;margin-top:14px}
.results__support{display:flex;flex-wrap:wrap;gap:clamp(24px,3.2vw,52px);margin-top:clamp(20px,3vh,34px)}
.results__support div{display:block}
.results__support b{display:block;font-size:clamp(22px,2vw,32px);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.results__support .label{margin-top:7px}
/* the baseline behind a figure: same label, one step quieter */
.label__note{display:block;margin-top:3px;color:rgb(143 143 139 / .66)}

/* ============================================================
   03  MCAR SELECTED REELS — five equal frames, one coherent row
   ============================================================ */
.reels{position:relative;z-index:1;background:var(--void);padding-top:clamp(64px,8vw,116px)}
.reels__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-inline:var(--gutter)}
/* ~22% above the label size: easier to find, still a label — the five films stay dominant */
.reels__head h2{font-size:calc(var(--label) * 1.22);font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.6}
.reels__head h2 span{display:block;color:var(--smoke)}
.reels__grid{
  --gap:clamp(12px,1.5vw,22px);
  --beat:clamp(10px,1.4vw,20px);          /* rhythm: 0 / +beat / −beat/2 / +beat / 0 */
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:var(--gap);
  padding:clamp(40px,5vw,72px) var(--gutter) 0;
  /* never taller than ~70% of the screen on very wide displays */
  max-width:calc(197svh + 4 * var(--gap) + 2 * var(--gutter));margin-inline:auto;
}
.reel{position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;background:var(--void)}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .play__disc{position:absolute;left:50%;top:50%;z-index:1;translate:-50% -50%}
.r1,.r5{margin-top:calc(var(--beat) / 2)}
.r2,.r4{margin-top:calc(var(--beat) * 1.5)}
.r3{margin-top:0}

/* ============================================================
   04  IAMWORK — the film is the composition (approved mockup)
   Poster first; the showreel only loads when someone asks for it.
   ============================================================ */
.iamwork{position:relative;z-index:1;background:var(--void);padding-top:clamp(56px,6vw,96px)}
.iam-hero{position:relative;overflow:hidden;background:var(--void);aspect-ratio:16/9;max-height:100svh;width:100%}
.iam-hero__poster,.iam-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.iam-hero__poster{
  object-position:50% 50%;
  /* the wide poster arrives already graded (its centre sits where the old poster did after a
     −13 % CSS grade), so it is shown as supplied; --grade stays as the hover's neutral base */
  --grade:brightness(1);filter:var(--grade);
  /* ceiling and floor dissolve into the page; the sides keep their edges */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgb(0 0 0 / .55) 6%,#000 17%,#000 76%,rgb(0 0 0 / .5) 91%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,rgb(0 0 0 / .55) 6%,#000 17%,#000 76%,rgb(0 0 0 / .5) 91%,transparent 100%);
  transition:scale 600ms var(--ease-ui),filter var(--t-hover-media) var(--ease-ui),opacity 500ms var(--ease-soft)
}
.iam-hero__video{opacity:0;background:var(--void);transition:opacity 500ms var(--ease-soft)}
.iam-hero__scrim{position:absolute;inset:0;pointer-events:none;transition:opacity 500ms var(--ease-soft);
  background:linear-gradient(90deg,rgb(0 0 0 / .62) 0%,rgb(0 0 0 / .34) 32%,rgb(0 0 0 / 0) 58%),
             radial-gradient(ellipse 80% 75% at 58% 50%,rgb(0 0 0 / 0) 55%,rgb(0 0 0 / .32) 100%)}
.iam-hero__copy{position:absolute;left:var(--edge);top:27%;right:40%;z-index:2}
.iam-hero__copy h2{
  margin-top:clamp(28px,8.6vw,132px);font-size:clamp(34px,4.55vw,80px);font-weight:300;
  line-height:1.06;letter-spacing:-.035em;color:var(--paper);max-width:14ch
}
.hw{transition:color var(--t-hover) var(--ease-ui)}
.nobr{white-space:nowrap}
@media (hover:hover) and (pointer:fine){ .hw:hover{color:var(--accent)} }
.iam-cta{
  display:inline-flex;align-items:center;gap:clamp(16px,1.7vw,26px);margin-top:clamp(20px,2.2vw,34px);
  font-size:clamp(11px,.9vw,13px);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);
  text-shadow:0 1px 10px rgb(0 0 0 / .4)
}
/* the whole poster is the play target (site.js); the headline sits above it so its words stay hoverable */
.iam-cta::after{content:'';position:absolute;inset:0;z-index:-1}
.iam-hero:not(.is-playing){cursor:pointer}
.iam-hero__copy .label,.iam-hero__copy h2{position:relative;z-index:1}
.iam-cta .play__disc{width:clamp(56px,5.7vw,88px)}
@media (hover:hover) and (pointer:fine){
  .iam-hero:hover .iam-hero__poster{scale:1.012;filter:var(--grade) brightness(1.07)}
  .iam-hero:has(.iam-cta:hover) .play__disc,.iam-cta:focus-visible .play__disc{background-color:var(--accent);border-color:var(--accent);color:#0b0b0b}
}
.iam-cta:focus-visible .play__disc{background-color:var(--accent);border-color:var(--accent);color:#0b0b0b}
/* playing: the poster and its words step back, the film and its controls take over */
.iam-hero.is-playing .iam-hero__video{opacity:1}
.iam-hero.is-playing .iam-hero__poster,.iam-hero.is-playing .iam-hero__scrim{opacity:0}
.iam-hero.is-playing .iam-hero__copy{
  opacity:0;transform:translateY(-8px);pointer-events:none}
.iam-hero__copy{transition:opacity 400ms var(--ease-soft),transform 500ms var(--ease-ui)}

/* ---- Pod Kapotou: a series, shown through its trailer and one episode ---- */
/* one chapter: Pod Kapotou rises ~8vh into the dissolving IAMWORK floor. While the showreel plays
   in place the series steps back below the frame, so the film is never covered */
.series{
  position:relative;z-index:2;padding:0 var(--gutter);margin-top:calc(-1 * clamp(56px,8vh,96px));
  transition:margin-top 500ms var(--ease-soft)
}
.iam-hero.is-playing + .series{margin-top:clamp(48px,4.4vw,72px)}
.series__head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.9vw,28px);align-items:end}   /* the films' own columns */
.series__title{
  margin-top:0;font-size:clamp(44px,6.6vw,112px);font-weight:300;
  line-height:.95;letter-spacing:-.01em;text-transform:uppercase
}
/* the series' facts are metadata under the title — the same label as the project services */
.series__sub{margin-top:clamp(14px,1.3vw,20px)}
.series__intro{padding-bottom:.3em;max-width:46ch}
/* one short line with a little editorial scale, one quieter sentence of fact under it */
.series__lead{font-size:clamp(20px,1.75vw,28px);line-height:1.2;letter-spacing:-.015em;color:var(--paper)}
.series__text{margin-top:clamp(10px,.9vw,14px);max-width:42ch;font-size:clamp(15px,1.05vw,16px);line-height:1.6;color:var(--smoke);text-wrap:pretty}
.series__films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.9vw,28px);margin-top:clamp(36px,3.6vw,56px)}
.episode{margin:0}
.episode figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:clamp(12px,1.1vw,16px)}
.episode figcaption .label:last-child{color:rgb(242 241 237 / .7)}
.frame--cine{aspect-ratio:12/5}

/* ---- shared film frame furniture ---- */
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;flex-direction:column;align-items:center;gap:14px;
  font-size:var(--label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  text-shadow:0 2px 14px #000c;transition:opacity var(--t-ui)
}
.play__disc{
  display:grid;place-items:center;width:clamp(52px,4.5vw,70px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgb(255 255 255 / .92);background-color:rgb(204 228 70 / 0);color:#fff;
  box-shadow:0 0 24px rgb(0 0 0 / .16);
  transition:background-color var(--t-hover) var(--ease-ui),border-color var(--t-hover) var(--ease-ui),color var(--t-hover) var(--ease-ui);
}
.play__disc svg{width:38%;height:38%;fill:currentColor;translate:6% 0}
/* in a film frame the play button is the frame itself — the whole picture opens the film, as reels and
   the IAMWORK poster do; disc and label stay centred where they were. The focus ring sits inside the
   frame (the frame clips anything outside it). */
.hover-media--play .play{inset:0;left:0;top:0;transform:none;justify-content:center}
.hover-media--play .play:focus-visible{outline-offset:-4px}
.frame__duration{position:absolute;right:14px;bottom:12px;z-index:2;color:rgb(242 241 237 / .85);text-shadow:0 1px 8px rgb(0 0 0 / .6);pointer-events:none}
/* previews loop silently; this small control stops them (hover/focus on desktop, always on touch) */
.preview-toggle{
  position:absolute;right:8px;top:8px;z-index:3;width:36px;height:36px;display:grid;place-items:center;
  color:rgb(242 241 237 / .85);opacity:0;transition:opacity var(--t-hover) var(--ease-ui)
}
.preview-toggle svg{width:14px;height:14px;overflow:visible}
/* invisible thumb-sized hit areas (~44px) around the small text controls; nothing grows visually */
.preview-toggle::before{content:'';position:absolute;inset:-4px}
.cue,#reels-toggle,.contact__foot a,.nav__brand{position:relative}
.cue::before,#reels-toggle::before,.contact__foot a::before{content:'';position:absolute;inset:-17px -8px}
.nav__brand::before{content:'';position:absolute;inset:-10px -8px -8px}
.preview-toggle path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.preview-toggle .i-play{fill:currentColor;stroke:none;display:none}
.preview-toggle.is-paused .i-pause{display:none}
.preview-toggle.is-paused .i-play{display:inline}
[data-player]:hover .preview-toggle,.preview-toggle:focus-visible,.preview-toggle.is-paused{opacity:1}
@media (hover:none),(pointer:coarse){ .preview-toggle{opacity:.8} }

/* ============================================================
   05 + 06  ADWRAP CENTER KOLÍN / SPECTRA WASH — one showcase
   Two columns sharing one media row (subgrid): Adwrap's still + film
   stack sets the height; Spectra's mosaic (website proof over the photo pair,
   the BMW film beside both) fills exactly it.
   ============================================================ */
.showcase{
  position:relative;z-index:1;background:var(--void);
  display:grid;grid-template-columns:minmax(0,664fr) minmax(0,705fr);grid-template-rows:auto auto;
  column-gap:clamp(16px,1.5vw,24px);row-gap:clamp(20px,1.8vw,28px);
  padding:var(--section) var(--gutter) 0;
}
.project{display:grid;grid-row:span 2;grid-template-rows:subgrid}
.project__head{align-self:end}
.project__head h2{
  margin-top:0;font-size:clamp(26px,3.05vw,50px);font-weight:400;
  line-height:1.05;letter-spacing:.01em;text-transform:uppercase
}
.project__service{margin-top:clamp(10px,1vw,16px)}
.project__media{display:grid;gap:clamp(12px,1.3vw,20px);align-content:start}
.frame{position:relative;margin:0;overflow:hidden;background:var(--void)}
.frame>img,.frame>video{width:100%;height:100%;object-fit:cover}
.frame--duo{aspect-ratio:2/1}
.frame--duo>img,.frame__open>img{object-position:50% 52%}
/* the Adwrap still opens full screen; the link fills the frame */
.frame__open{position:absolute;inset:0;display:block;cursor:zoom-in}
.frame__open>img{width:100%;height:100%;object-fit:cover}
/* the whole system shares the height: the website proof leads (≈1.31:1), the photo pair stays secondary
   (≈0.7:1 each), the film is one tall vertical frame over both rows */
.mosaic{
  display:grid;gap:clamp(6px,.55vw,9px);align-self:start;align-content:start;
  grid-template-columns:430fr 430fr 450fr;grid-template-rows:334fr 309fr;
}
.tile{position:relative;margin:0;overflow:hidden;background:var(--void);min-height:0;min-width:0}
.tile>img:first-child,.tile>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile--web{grid-column:1/3;grid-row:1}
.tile--web>img:first-child{object-position:0 50%}
/* the real iPhone screenshot at its own proportions; the frame is a hairline and the screen's corner radius */
.tile__phone{
  position:absolute;right:4.5%;bottom:7%;height:84%;width:auto;aspect-ratio:1206/2622;object-fit:contain;
  border-radius:13.5% / 6.2%;outline:1.5px solid rgb(242 241 237 / .16);outline-offset:0;
  box-shadow:0 0 0 3px #0b0b0b,0 14px 34px rgb(0 0 0 / .6);z-index:1
}
/* two equal frames: the Bentley under the Spectra sign with little pavement; the BMW's headlight, blue bonnet and intake */
.tile--bentley,.tile--headlight{grid-row:2}
.tile--bentley{grid-column:1}
.tile--bentley img{object-position:50% 33%}
.tile--headlight{grid-column:2}
.tile--headlight img{object-position:50% 44%}
.tile--film{grid-column:3;grid-row:1/3}
/* desktop only (phones keep their own frames below): the mosaic stretches to the Adwrap stack; the phone keeps its former size (≈210px at 1440) while
   the desktop screenshot behind it grows, so the headline stays clear; the taller photo frames start higher;
   WATCH THE FILM stays on one line in the slimmer film frame */
@media (min-width:901px){
  .mosaic{align-self:stretch;align-content:stretch}
  .tile__phone{height:64%}
  .tile--bentley img{object-position:50% 4%}
  .tile--headlight img{object-position:50% 40%}
  .tile--film .play{white-space:nowrap}
}
.tile--film .play__disc{width:clamp(48px,3.8vw,60px)}
.tile__poster{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the showreel's ring carries the lime at rest (approved mockup) */
.iam-cta .play__disc--accent{border-color:var(--accent)}

/* 07  PEOPLE — postponed to Phase 2 (see README); the last implementation lives in commit 8be4c63 */

/* ============================================================
   08  CONTACT — resolve, don't perform
   ============================================================ */
/* the portfolio ends on the last project; the black before Contact is the only transition —
   ≈150px on desktop, ≈100px on a phone: a pause, not an empty viewport */
.contact{position:relative;z-index:1;background:var(--void);padding:clamp(100px,10.4vw,164px) var(--gutter) clamp(32px,4vw,56px)}
/* the final line, a step above the other display headings (≈+8 % on desktop; phones keep their size) */
.contact h2{font-size:clamp(44px,6.8vw,112px);letter-spacing:-.035em;margin-top:clamp(20px,2.4vw,32px)}
.contact h2 a{display:inline-flex;align-items:flex-start;gap:.22em}
.contact h2 sup{font-size:.28em;font-weight:400;transform:translateY(.55em);transition:transform var(--t-ui) var(--ease)}
.contact h2 a:hover sup{transform:translate(.14em,.34em)}
/* the ending is an action: the e-mail is the one large line, the phone sits quietly under it */
.contact__links{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.6vw,24px);margin-top:clamp(28px,3.4vw,48px);list-style:none;padding:0}
/* the quiet hairline stays; on hover a lime line draws over it from the left and, on the way out,
   carries on and leaves to the right — the text itself never moves */
.contact__link{
  position:relative;display:inline-block;font-size:clamp(15px,1.25vw,19px);
  color:var(--smoke);box-shadow:inset 0 -1px 0 #ffffff26;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat 100% 100% / 0 1px;
  transition:color var(--t-ui) var(--ease-ui),background-size 520ms var(--ease-ui)
}
.contact__link::before{content:'';position:absolute;inset:-12px -4px}   /* a thumb-sized target, same quiet line */
.contact__link:hover,.contact__link:focus-visible{color:var(--paper);background-position:0 100%;background-size:100% 1px}
@media (hover:none),(pointer:coarse){ .contact__link:active{color:var(--paper);background-position:0 100%;background-size:100% 1px;transition-duration:90ms,160ms} }
.contact__link--primary{
  font-size:clamp(26px,3.4vw,52px);font-weight:300;letter-spacing:-.025em;line-height:1.2;
  color:var(--paper);box-shadow:inset 0 -1px 0 #ffffff33
}
.contact__foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(64px,9vw,140px);padding-top:20px;border-top:1px solid var(--hairline);
}

/* ---------- full-screen film player ---------- */
.player{
  width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;
  background:#000000f2;color:var(--paper)
}
.player::backdrop{background:#000000e6}
/* the player and the viewer dim in and out (240 / 200 ms) instead of cutting; browsers without
   @starting-style simply open and close as before */
.player,.viewer,.player::backdrop,.viewer::backdrop{
  opacity:0;transition:opacity 200ms var(--ease-soft),overlay 200ms allow-discrete,display 200ms allow-discrete
}
.player[open],.viewer[open],.player[open]::backdrop,.viewer[open]::backdrop{opacity:1;transition-duration:240ms}
@starting-style{
  .player[open],.viewer[open],.player[open]::backdrop,.viewer[open]::backdrop{opacity:0}
}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player__close{
  position:absolute;top:18px;right:18px;z-index:2;min-height:44px;display:inline-flex;align-items:center;gap:10px;
  font-size:var(--label);font-weight:500;letter-spacing:.08em;text-transform:uppercase
}
.player__error{position:absolute;left:0;right:0;bottom:28px;text-align:center;font-size:13px;color:var(--smoke)}

/* ---------- photo viewer: the photograph, and almost nothing else ---------- */
.viewer{
  width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;
  background:#000000f2;color:var(--paper);overflow:hidden;touch-action:pinch-zoom
}
.viewer::backdrop{background:#000000e6}
.viewer[open]{display:grid;place-items:center}
.viewer__img{
  max-width:calc(100vw - 2 * clamp(56px,7vw,112px));max-height:calc(100svh - clamp(112px,14vh,150px));
  width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;
  transition:opacity 220ms var(--ease-soft)
}
.viewer__img.is-swapping{opacity:0}
.viewer__img:focus{outline:none}   /* opening focuses the photo, so no ring lands on Close */
.viewer .player__close{opacity:.7;transition:opacity var(--t-hover) var(--ease-ui)}
.viewer__nav{
  position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;display:grid;place-items:center;
  font-size:18px;color:var(--paper);opacity:.55;transition:opacity var(--t-hover) var(--ease-ui),translate var(--t-hover) var(--ease-ui)
}
.viewer__nav--prev{left:clamp(8px,2vw,28px)}
.viewer__nav--next{right:clamp(8px,2vw,28px)}
.viewer__count{position:absolute;left:50%;bottom:clamp(18px,3vh,30px);translate:-50% 0;color:rgb(242 241 237 / .5)}
.viewer.is-single .viewer__nav,.viewer.is-single .viewer__count{display:none}
@media (hover:hover) and (pointer:fine){
  .viewer .player__close:hover,.viewer__nav:hover{opacity:1}
  .viewer__nav--prev:hover{translate:-3px -50%}
  .viewer__nav--next:hover{translate:3px -50%}
}
.viewer .player__close:focus-visible,.viewer__nav:focus-visible{opacity:1}

/* ============================================================
   MOBILE — same design language, its own choreography
   ============================================================ */
@media(max-width:900px){
  :root{--section:clamp(72px,14vw,104px)}
  :root{--edge:clamp(18px,8.4vw,40px);--nav-clear:80px}
  .nav{padding:clamp(16px,8.4vw,38px) var(--edge) 0;align-items:flex-start}
  .nav__brand{font-size:13px;letter-spacing:.18em;padding-bottom:calc(.95em + var(--rule));--rule:2px}
  .nav__brand::after{width:53%}
  .nav__links{display:none}

  /* menu button: three thin rules that fold into a cross */
  .nav__menu{
    display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:2;
    width:20px;height:12px;margin-top:0;
    transition:opacity var(--t-hover) var(--ease-ui);
  }
  .nav__menu::before{content:'';position:absolute;inset:-16px -12px}
  .nav__menu span{display:block;height:1.5px;background:var(--ui-ink);border-radius:1px;transform-origin:50% 50%;box-shadow:0 1px 6px rgb(0 0 0 / .4);
    transition:transform var(--t-hover) var(--ease-ui),opacity var(--t-hover) var(--ease-ui)}
  .nav__menu[aria-expanded='true'] span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
  .nav__menu[aria-expanded='true'] span:nth-child(2){opacity:0}
  .nav__menu[aria-expanded='true'] span:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

  .menu{
    display:block;position:fixed;inset:0;z-index:35;background:rgb(0 0 0 / .95);backdrop-filter:blur(14px);
    opacity:0;visibility:hidden;transition:opacity var(--t-hover) var(--ease-ui),visibility 0s linear var(--t-hover);
  }
  .menu.is-open{opacity:1;visibility:visible;transition:opacity var(--t-hover) var(--ease-ui),visibility 0s}
  .menu__links{
    position:absolute;left:var(--edge);right:var(--edge);bottom:calc(4.9svh + 4.5em);
    display:flex;flex-direction:column;align-items:flex-start;gap:.28em;
    font-size:clamp(34px,10vw,56px);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:#fff;
  }
  .menu__links .arrow{margin-left:.3em;font-size:.62em;vertical-align:.18em}

  .hero__title{--title-size:clamp(30px,9.9vw,56px);--title-track:-.03em;--title-bottom:16.5svh;line-height:1.06}
  .hero__bar{--bar-bottom:4.4svh}
  .cue{font-size:11px;letter-spacing:.08em}
  /* the pause control stays for accessibility but keeps to an icon */
  .cue--toggle .cue__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cue--toggle{position:relative}
  .cue--toggle::before{content:'';position:absolute;inset:-16px}

  .results{height:100svh;min-height:620px}
  .results__media img{object-position:50% 40%}
  .results__scrim{background:linear-gradient(180deg,#00000059,#0000 20%,#0000 34%,#000000b8 66%,#000 100%)}
  .results__copy{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vh,28px);bottom:clamp(30px,4.5vh,48px)}
  .stat__value{font-size:clamp(88px,30vw,168px)}
  .results__statement{font-size:clamp(23px,6.2vw,34px);max-width:none;margin-top:10px}
  /* two figures side by side: the left keeps its width, the right takes the rest and lets its
     label wrap (FOLLOWERS DURING / COLLABORATION), mirroring the two label lines on the left */
  .results__support{gap:22px;flex-wrap:nowrap}
  .results__support div:first-child{flex:none}
  .results__support div:last-child{flex:1 1 auto;min-width:0}
  .results__support div:last-child .label{display:block;line-height:1.9;margin-top:4px}

  /* reels become a touch strip: one dominant reel (76% of the usable width), the next one clearly peeking */
  .reels__grid{
    display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;
    padding:28px var(--gutter) 6px;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .reels__grid::-webkit-scrollbar{display:none}
  .reels__grid{max-width:none}
  .reel{scroll-snap-align:start;flex:0 0 auto;width:min(calc((100vw - 2 * var(--gutter)) * .76),calc(66svh * 9 / 16))}
  .r1,.r2,.r3,.r4,.r5{margin:0}

  /* IAMWORK on a phone: a taller poster, words at the bottom; the reel opens full screen */
  .iamwork{padding-top:clamp(40px,11vw,64px)}
  .iam-hero{aspect-ratio:4/5;max-height:82svh}
  .iam-hero__poster{
    object-position:70% 50%;   /* 4:5 window: the IAMWORK wall sign whole, the SUV, the Porsche's front */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgb(0 0 0 / .32) 12%,rgb(0 0 0 / .8) 24%,#000 32%,#000 72%,rgb(0 0 0 / .55) 88%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,rgb(0 0 0 / .32) 12%,rgb(0 0 0 / .8) 24%,#000 32%,#000 72%,rgb(0 0 0 / .55) 88%,transparent 100%)
  }
  .iam-hero__scrim{background:linear-gradient(180deg,rgb(0 0 0 / .25) 0%,rgb(0 0 0 / 0) 30%,rgb(0 0 0 / .35) 55%,rgb(0 0 0 / .8) 100%)}
  .iam-hero__copy{top:auto;bottom:clamp(24px,7vw,40px);right:var(--edge)}
  .iam-hero__copy h2{margin-top:14px;font-size:clamp(30px,8.4vw,44px);letter-spacing:-.03em}
  .iam-cta{margin-top:20px}
  /* on a phone the IAMWORK copy lives in that floor, so the handoff is a short gap, not an overlap */
  .series{margin-top:0;padding-top:clamp(22px,6vw,32px)}
  .series__head{grid-template-columns:minmax(0,1fr);gap:20px}
  .series__title{font-size:clamp(40px,12vw,64px)}
  .series__films{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
  /* posters at 16:9 across the content width; the player keeps the films' own 2.39:1 */
  .frame--cine{aspect-ratio:16/9}
  .play__disc{width:52px}
  .reel .play__disc{width:48px}
  .play{gap:11px}

  /* the shared showcase becomes two projects, one after the other */
  .showcase{display:block}
  .project{display:block}
  .project+.project{margin-top:clamp(64px,16vw,96px)}
  .project__head{margin-bottom:clamp(18px,5vw,26px)}
  .project__head h2{font-size:clamp(26px,7vw,36px)}
  .frame--duo{aspect-ratio:16/9}
  /* Spectra on a phone: website proof, the photo pair side by side as one short strip, then the film
     as one more 16:9 tile of the mosaic (same width, same gap); a tap opens the real 9:16 film full screen */
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:10px}
  .tile--web{grid-column:1/-1;grid-row:auto;aspect-ratio:1.58}
  .tile--bentley,.tile--headlight{grid-row:auto;aspect-ratio:1}
  .tile--film{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}
  .tile--film>video,.tile--film .preview-toggle{display:none}
  .tile--film .tile__poster{display:block}
  .tile--film .play{inset:0;left:0;top:0;transform:none;justify-content:center}   /* the whole poster is the tap target */

  .contact h2{font-size:clamp(38px,10.4vw,62px)}
  .contact__links{gap:18px}
  .contact__link--primary{font-size:clamp(21px,6.2vw,25px);font-weight:400;letter-spacing:-.015em}
  /* viewer on a phone: the photo takes the width, the arrows sit under it beside the count */
  .viewer__img{max-width:100vw;max-height:calc(100svh - 150px)}
  .viewer__nav{top:auto;bottom:4px;translate:none}
  .viewer__nav--prev{left:calc(50% - 104px)}
  .viewer__nav--next{right:calc(50% - 104px)}
  .viewer__count{bottom:21px}
  .contact__foot{margin-top:clamp(56px,14vw,96px)}
}

@media(max-width:560px){
  .stat__value{font-size:33vw}
  .contact h2{font-size:12.2vw}
}
/* the smallest phones: the two MCar figures stay side by side */
@media(max-width:374px){
  .results__support{gap:14px}
  .results__support .label{letter-spacing:.05em}
}


/* ============================================================
   REDUCED MOTION — nothing essential lives inside an animation
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .mask>span,[data-rise]{transform:none!important;opacity:1!important}
  .iam-hero__poster{scale:1!important}
  .hover-media__item{scale:1!important}
  .arrow{transform:none!important}
  .nav__links a{transform:none!important}
  .hero{position:relative}
  .hero__media{transform:none}
  .hero__inner{opacity:1}
  .intro{transition-duration:160ms!important}
  .intro__fill{transform:none}
}
html[data-motion='off'] .mask>span,html[data-motion='off'] [data-rise]{transform:none!important;opacity:1!important}