/* ==========================================================
   RECROC v3
   Narrow measure. Wide margins. Colour where the work goes.
   ========================================================== */

:root {
  --bg: #FFFFFF;
  --ink: #131211;
  --ink-2: #3B3833;
  --muted: #5C5852;
  --faint: #6E6A63;
  --line: #E8E5E0;
  --line-2: #D2CEC7;
  --red: #D6301D;
  --red-deep: #AE2313;
  --wash: #F6F4F1;

  /* image fields — a real palette, not pastel filler */
  --f-ink: #171614;
  --f-red: #D6301D;
  --f-slate: #24313C;
  --f-moss: #2A3A31;

  --display: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --t-xl: clamp(34px, 5.2vw, 56px);
  --t-lg: clamp(25px, 3vw, 34px);
  --t-md: clamp(20px, 2.1vw, 26px);
  --t-sm: 21px;
  --t-lede: 18px;
  --t-base: 16px;
  --t-read: 17px;
  --t-note: 14px;
  --t-tiny: 12.5px;

  /* 8pt grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* narrow measure, wide margins */
  --page: 820px;
  --r: 12px;
  --pad: clamp(22px, 4vw, 40px);
  --nav-h: 60px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
.on-dark :focus-visible { outline-color: #fff; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 11px 18px;
  border-radius: 999px; font-size: var(--t-note);
  transition: top .24s var(--ease);
}
.skip:focus { top: 14px; }

/* ---------- measure ---------- */

.col {
  width: min(100%, var(--page));
  margin-inline: auto;
  padding-inline: var(--pad);
}
/* Frames, rules and lists span the column. Only running prose is capped, by
   character count, so every left edge on the page is the same one. */
.prose, .form { max-width: 62ch; }

/* deliberate rhythm variation — not one uniform section padding */
.s-lg { padding-block: clamp(56px, 6.4vw, 88px); }
.s-md { padding-block: clamp(48px, 5.4vw, 72px); }
.s-sm { padding-block: clamp(38px, 4.2vw, 56px); }
.s-xs { padding-block: clamp(24px, 2.8vw, 36px); }
.t-0 { padding-top: 0; }
.b-0 { padding-bottom: 0; }

hr.line { border: 0; height: 1px; background: var(--line); margin: 0; }

/* ---------- type ---------- */

.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.033em;
  line-height: 1.02;
  text-wrap: balance;
}
.d1 { font-size: var(--t-xl); letter-spacing: -.042em; }
.d2 { font-size: var(--t-lg); }
.d3 { font-size: var(--t-md); line-height: 1.14; letter-spacing: -.026em; }
.d4 { font-size: 20px; line-height: 1.24; letter-spacing: -.022em; }

.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); letter-spacing: -.016em; }
.soft { color: var(--ink-2); }
.note { font-size: var(--t-note); color: var(--muted); line-height: 1.5; }
.p + .p { margin-top: var(--s4); }

/* section label — sentence case, normal tracking, no dot, no mono */
.label {
  font-size: var(--t-note);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -.008em;
  margin-bottom: var(--s4);
}
.label sup {
  font-size: .68em;
  font-weight: 400;
  color: var(--faint);
  margin-left: 2px;
  top: -.5em;
}

.head { margin-bottom: var(--s7); }
.head .d2, .head .d3 { max-width: 20ch; }
.head p { margin-top: var(--s4); max-width: 58ch; }

/* Solid geometric marks. Filled, not outlined, so they read as index marks
   rather than icons, and they carry the red through as a system. */
.mk { width: 18px; height: 18px; flex: none; color: var(--red); }
.item-name, .group-h h2 { display: inline-flex; align-items: center; gap: 11px; }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; line-height: 1;
  letter-spacing: -.015em;
  padding: 13px 20px; border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform .34s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); }
.btn-soft { background: var(--wash); color: var(--ink); }
.btn-soft:hover { background: var(--line); }

/* nav CTA is a link, not a second button competing with the red one */
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-note); font-weight: 500;
  color: var(--red);
  letter-spacing: -.01em;
}
.nav-cta svg { width: 14px; height: 14px; transition: transform .32s var(--ease); }
.nav-cta:hover svg { transform: translateX(3px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--red); color: #fff; }

.lnk {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 500; letter-spacing: -.015em;
  color: var(--ink);
  transition: color .26s var(--ease);
}
.lnk svg { width: 14px; height: 14px; transition: transform .32s var(--ease); }
.lnk:hover { color: var(--red); }
.lnk:hover svg { transform: translateX(3px); }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* pill filters */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill {
  font-size: var(--t-note); font-weight: 500; letter-spacing: -.01em;
  padding: 8px 15px; border-radius: 999px;
  background: var(--wash); color: var(--ink-2);
  transition: background .26s var(--ease), color .26s var(--ease);
}
.pill:hover { background: var(--line); }
.pill[aria-pressed="true"] { background: var(--red); color: #fff; }
.pill span { color: var(--faint); margin-left: 5px; font-weight: 400; }
.pill[aria-pressed="true"] span { color: rgba(255,255,255,.5); }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 90;
  background: transparent;
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease);
}
/* No rule under the nav. The frosted panel is the separation. */
.nav.is-scrolled {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
}

.nav-in { height: var(--nav-h); display: flex; align-items: center; gap: var(--s5); }
.brand {
  font-family: var(--display); font-weight: 700;
  font-size: 17px; letter-spacing: -.04em;
  margin-right: auto;
}
.nav-links { display: flex; align-items: center; gap: var(--s5); }
.nav-links a {
  font-size: var(--t-note); color: var(--muted);
  letter-spacing: -.008em;
  transition: color .26s var(--ease);
}
.nav-links a:hover, .nav-links a.here { color: var(--ink); }
.nav-cta { font-size: var(--t-note); padding: 9px 16px; }

.burger { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; margin-left: auto; }
.burger svg { width: 20px; height: 20px; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .m { display: none; }
.burger[aria-expanded="true"] .x { display: block; }

/* Full-screen red panel. The services page has its own filters, so the menu
   does not need to list 23 links. */
.sheet {
  position: fixed; inset: 0; z-index: 95;
  background: var(--red); color: #fff;
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.sheet.open { opacity: 1; visibility: visible; }
.sheet-top {
  height: var(--nav-h); flex: none;
  display: flex; align-items: center; justify-content: space-between;
}
.sheet-top .brand { color: #fff; margin: 0; }
.sheet-x {
  width: 40px; height: 40px; margin-right: -10px;
  display: grid; place-items: center; color: #fff;
}
.sheet-x svg { width: 22px; height: 22px; }
.sheet-nav {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s2);
}
.sheet-nav a {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 9vw, 42px);
  letter-spacing: -.04em; line-height: 1.1;
  color: #fff;
  padding: 8px 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sheet.open .sheet-nav a { opacity: 1; transform: none; }
.sheet.open .sheet-nav a:nth-child(1) { transition-delay: 60ms; }
.sheet.open .sheet-nav a:nth-child(2) { transition-delay: 110ms; }
.sheet.open .sheet-nav a:nth-child(3) { transition-delay: 160ms; }
.sheet.open .sheet-nav a:nth-child(4) { transition-delay: 210ms; }
.sheet-foot {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding-bottom: var(--s7);
  font-size: var(--t-note);
  /* white on red is only 4.88:1, so any transparency drops below AA */
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.28);
  padding-top: var(--s5);
}
.sheet-foot a { color: #fff; }
.sheet-foot span { opacity: .85; }

/* ---------- image fields ---------- */

.field {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--fc, var(--f-mist));
  display: flex;
  align-items: flex-end;
}
.field img { width: 100%; height: 100%; object-fit: cover; }
.field figcaption {
  position: absolute; left: 0; bottom: 0;
  padding: var(--s4);
  font-size: var(--t-tiny);
  color: rgba(255,255,255,.9);
  letter-spacing: -.005em;
}
.field.on-light figcaption { color: rgba(19,18,17,.55); }

.r-cine { aspect-ratio: 2 / 1; }
.r-wide { aspect-ratio: 16 / 10; }
.r-box  { aspect-ratio: 5 / 4; }
.r-sq   { aspect-ratio: 1 / 1; }
.r-tall { aspect-ratio: 4 / 5; }

.f-ink { --fc: var(--f-ink); }
.f-red { --fc: var(--f-red); }
.f-slate { --fc: var(--f-slate); }
.f-moss { --fc: var(--f-moss); }

/* illustration frames */
.art-field { display: grid; place-items: center; color: rgba(255,255,255,.9); }
.art { width: min(72%, 300px); height: auto; overflow: visible; }
.art-field figcaption { color: rgba(255,255,255,.62); }

/* process chips */
.chip {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 14px;
  background: var(--fc, var(--f-ink));
  color: rgba(255,255,255,.92);
  margin-bottom: var(--s4);
  transform: scale(.94);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .55s var(--ease);
}
.chip svg { width: 32px; height: 32px; }
.step.in .chip { transform: none; opacity: 1; }
html:not(.js) .chip { transform: none; opacity: 1; }

/* horizontal strip that runs off the right edge */
.strip {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: var(--s2);
}
.strip::-webkit-scrollbar { display: none; }
.strip > * {
  flex: 0 0 clamp(150px, 21vw, 200px);
  scroll-snap-align: start;
}
.shot { display: block; }
.shot-cap {
  font-size: var(--t-tiny);
  color: var(--muted);
  margin-bottom: var(--s3);
  transition: color .26s var(--ease);
}
.shot:hover .shot-cap { color: var(--ink); }
.shot .field { transition: opacity .4s var(--ease); }
.shot:hover .field { opacity: .88; }

/* work / moodboard grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.grid-2 > *, .grid-3 > * { transition: transform .5s var(--ease); }
.grid-2 > a:hover, .grid-3 > a:hover { transform: translateY(-4px); }

/* ---------- hero ---------- */

.hero { padding-top: clamp(46px, 6vw, 76px); padding-bottom: clamp(30px, 4vw, 44px); }
.hero .d1 { max-width: 19ch; font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -.034em; line-height: 1.06; }
.hero .lede { margin-top: var(--s5); max-width: 62ch; font-size: var(--t-read); line-height: 1.62; }
.hero .row-actions { margin-top: var(--s6); }

.facts {
  display: flex; flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.facts span { font-size: var(--t-note); color: var(--muted); }
.facts b { font-weight: 500; color: var(--ink); }

/* word reveal, kept subtle */
.wl { display: block; }
.wc { display: inline-block; overflow: hidden; vertical-align: bottom; }
.w { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
html:not(.js) .w, .in .w { transform: none; }

/* ---------- list ---------- */

.list { border-top: 1px solid var(--line); }
.item {
  display: block;
  padding: var(--s5) 0 calc(var(--s5) + 2px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.item-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.item-name {
  font-family: var(--display); font-weight: 500;
  font-size: 19px; letter-spacing: -.024em; line-height: 1.2;
  transition: color .26s var(--ease);
}
.item:hover .item-name { color: var(--red); }
.item-note { font-size: var(--t-note); color: var(--muted); margin-top: 6px; max-width: 58ch; line-height: 1.55; }
.item-go { color: var(--line-2); flex: none; transition: transform .34s var(--ease), color .26s var(--ease); }
.item-go svg { width: 15px; height: 15px; }
.item:hover .item-go { color: var(--red); transform: translateX(4px); }
.item[hidden] { display: none; }

.group-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s7) 0 var(--s3);
}
.group-h h2 { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.026em; }
.group-h span { font-size: var(--t-tiny); color: var(--faint); }
.sub-h { font-size: var(--t-tiny); color: var(--faint); padding: var(--s5) 0 var(--s2); }

/* Read straight down. A side column left the eye jumping across a dead gap,
   so the index and label sit on one line above the heading instead. */
.points { display: grid; gap: clamp(34px, 4vw, 48px); }
.pt-meta { margin-bottom: 10px; }
.pt-k { font-size: var(--t-note); font-weight: 500; color: var(--red); }
.pt h3:empty { display: none; }
.pt h3 {
  font-family: var(--display); font-weight: 500;
  font-size: 21px; letter-spacing: -.024em; line-height: 1.18;
  margin-bottom: var(--s3);
}
.pt p { font-size: var(--t-read); line-height: 1.66; color: var(--ink-2); max-width: 62ch; }

/* ---------- notes / prose ---------- */

.prose { max-width: 60ch; }
.prose p { font-size: var(--t-read); line-height: 1.66; }
.prose p + p { margin-top: var(--s5); }
.prose .lede + p { margin-top: var(--s5); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s6); }


.defs { border-top: 1px solid var(--line); }
.def { padding: var(--s5) 0 calc(var(--s5) + 4px); border-bottom: 1px solid var(--line); }
.def b { display: block; font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: -.02em; margin-bottom: 7px; }
.def span { font-size: var(--t-base); color: var(--ink-2); line-height: 1.62; max-width: 62ch; display: block; }

.pull {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-md); line-height: 1.18; letter-spacing: -.028em;
  max-width: 26ch;
}
.pull b { color: var(--red); font-weight: 500; }

/* ---------- accordion ---------- */

.acc { border-top: 1px solid var(--line); }
.acc-i { border-bottom: 1px solid var(--line); }
.acc-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%; text-align: left;
  padding: var(--s5) 0 calc(var(--s5) + 2px);
  font-family: var(--display); font-weight: 500;
  font-size: 17px; letter-spacing: -.022em; line-height: 1.3;
  transition: color .26s var(--ease);
}
.acc-h:hover { color: var(--red); }
.sign { position: relative; width: 13px; height: 13px; flex: none; }
.sign::before, .sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .4s var(--ease), opacity .28s var(--ease);
}
.sign::before { top: 6px; left: 0; width: 13px; height: 1.4px; }
.sign::after { left: 6px; top: 0; width: 1.4px; height: 13px; }
.acc-h[aria-expanded="true"] .sign { color: var(--red); }
.acc-h[aria-expanded="true"] .sign::after { transform: rotate(90deg); opacity: 0; }
.acc-p { overflow: hidden; height: 0; }
.acc-b { padding-bottom: var(--s6); max-width: 62ch; color: var(--ink-2); font-size: var(--t-base); line-height: 1.66; }

/* ---------- process ---------- */

/* A hairline rail runs beside the steps and fills as you scroll. Minimal,
   and it gives the sequence something to track without striping the page. */
.steps { display: grid; gap: clamp(40px, 4.8vw, 64px); }
.step { position: relative; }

.step-n {
  font-size: var(--t-note); font-weight: 500;
  color: var(--faint);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  margin-bottom: 6px;
}
.step h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(23px, 2.4vw, 28px);
  letter-spacing: -.028em; line-height: 1.14;
  margin-bottom: var(--s3);
}
.step p { font-size: var(--t-read); line-height: 1.66; color: var(--ink-2); max-width: 62ch; }

.svc-lead {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(21px, 2.1vw, 26px);
  letter-spacing: -.028em; line-height: 1.16;
  margin-top: var(--s5);
  max-width: 24ch;
}
.svc-sub { font-size: var(--t-read); line-height: 1.66; color: var(--ink-2); max-width: 62ch; margin-top: var(--s4); }
.svc-hero .lede { margin-top: var(--s4); }

/* FAQ groups: a small divider when a service has more than one run */
.acc-group-h {
  font-size: var(--t-note); font-weight: 500;
  color: var(--muted);
  padding: var(--s6) 0 var(--s3);
}

.tag-line {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-md); letter-spacing: -.03em;
  color: var(--red);
}

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.flow span { font-size: 15px; color: var(--ink-2); }
.flow i { color: var(--line-2); font-style: normal; }

/* ---------- contact form ---------- */

.form { display: grid; gap: var(--s5); max-width: 480px; }
.f { display: grid; gap: 6px; }
.f label { font-size: var(--t-note); color: var(--muted); }
.f input, .f select, .f textarea {
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--wash); border: 0; border-radius: 10px;
  padding: 13px 14px; width: 100%;
  transition: box-shadow .24s var(--ease), background .24s var(--ease);
  appearance: none;
}
.f textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.f input::placeholder, .f textarea::placeholder { color: var(--faint); }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.sel { position: relative; }
.sel svg { position: absolute; right: 14px; top: 17px; width: 14px; height: 14px; pointer-events: none; color: var(--muted); }
.hp { position: absolute; left: -9999px; }

/* ---------- one footer, CTA folded in ---------- */

.foot { background: var(--ink); color: #EFEDE9; padding-top: clamp(52px, 6.4vw, 80px); padding-bottom: var(--s5); }
.foot-c a, .foot-base a, .foot-mail {
  color: rgba(239,237,233,.62);
  transition: color .24s var(--ease);
}
.foot-c a:hover, .foot-base a:hover, .foot-mail:hover { color: #fff; }
.foot-mail { font-size: 15px; }

.foot-cta { padding-bottom: clamp(44px, 5.5vw, 68px); border-bottom: 1px solid rgba(239,237,233,.14); }
.foot-cta h2 {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-lg); letter-spacing: -.034em; line-height: 1.05;
  max-width: 16ch; color: #fff;
}
.foot-cta p { margin-top: var(--s4); max-width: 44ch; color: rgba(239,237,233,.62); font-size: 15px; }
.foot-cta .row-actions { margin-top: var(--s6); }

.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s7); padding-block: var(--s6); }
.foot-c { display: grid; gap: 9px; align-content: start; min-width: 130px; }
.foot-c p { font-size: var(--t-tiny); color: rgba(239,237,233,.4); margin-bottom: 2px; }
.foot-c a { font-size: var(--t-note); }

.foot-base {
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
  padding-top: var(--s5);
  border-top: 1px solid rgba(239,237,233,.14);
  font-size: var(--t-tiny);
  color: rgba(239,237,233,.42);
}

/* ---------- motion ---------- */

[data-rv] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .82s var(--ease), transform .82s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
[data-rv].in { opacity: 1; transform: none; }
html:not(.js) [data-rv] { opacity: 1; transform: none; }

[data-rvf] { clip-path: inset(0 0 12% 0); opacity: .001; transition: clip-path 1s var(--ease), opacity .5s var(--ease); }
[data-rvf].in { clip-path: inset(0 0 0 0); opacity: 1; }
html:not(.js) [data-rvf] { clip-path: none; opacity: 1; }

/* scroll-driven settle on image frames, replacing a JS parallax */
@supports (animation-timeline: view()) {
  .field img, .field figcaption { will-change: transform; }
  .field img {
    animation: settle linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 46%;
  }
  @keyframes settle { from { transform: scale(1.07); } to { transform: scale(1); } }
  .strip .field img { animation: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  :root { --pad: 22px; --nav-h: 56px; }
  .nav-links, .nav-cta { display: none; }
  .burger { display: inline-flex; }
  .two, .grid-3 { grid-template-columns: 1fr; }

  .foot-nav { gap: var(--s6) var(--s7); }
  .steps { padding-left: 28px; }
  .dot { left: -28px; }
}

@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .r-cine { aspect-ratio: 3 / 2; }
  .facts { gap: var(--s2) var(--s4); }
  .item-top { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv], [data-rvf] { opacity: 1; transform: none; clip-path: none; }
  .w { transform: none; }
  .step { opacity: 1; }
  .field img { animation: none !important; transform: none !important; }
}