@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* tokens */
:root {

  --void: #17130E;
  --carbon: #211B15;
  --pitch: #0C0906;
  --chalk: #EDE5D6;
  --ash: #A9A093;
  --ash-dim: #6F675C;
  --edge: #332C24;
  --edge-pitch: #453C31;

  --paper: #AC9F84;
  --paper-hi: #E9E1D2;
  --paper-lo: #CFC3AD;
  --ink: #17130E;
  --ink-body: #241E16;
  --ink-muted: #3A3227;
  --ink-fade: #4E4536;
  --stone: #8E8269;

  /* saturation kept low, the facts-row index needs 4.5:1 against --pitch */
  --on-air: #C4675C;
  --on-air-hot: #DD8A80;
  --on-air-ink: #8C2E27;
  --link-ink: #3A2A14;

  --f-display: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --f-text: "Inter", "Inter Fallback", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  
  /* hero + h2 caps raised 2026-09-04: the fluid term already wanted ~78px at 1440 but the old
     2.5rem/2.125rem ceilings choked it to 40/34px — the single biggest reason the hero didn't
     command and the beige sections read empty. mobile floor barely moves (clamp min), desktop
     gains real presence. verified: 0 overflow at 320/390/768/1440 after the raise. */
  --t-hero: clamp(2rem, 1.35rem + 3.2vw, 3.75rem);

  --t-h2:   clamp(1.6rem, 1.15rem + 1.70vw, 2.75rem);
  --t-h3:   clamp(1.125rem, 0.95rem + 0.62vw, 1.4375rem);
  --t-lead: clamp(1rem, 0.88rem + 0.52vw, 1.1875rem);
  --t-body: clamp(0.9375rem, 0.86rem + 0.28vw, 1rem);
  --t-meta: clamp(0.75rem, 0.73rem + 0.06vw, 0.8125rem);
  --t-code: clamp(0.6875rem, 0.67rem + 0.06vw, 0.71875rem);

  --t-stamp: clamp(0.625rem, 0.60rem + 0.08vw, 0.6875rem);

  /* Raised 2026-08-25 — his note on the legal page: "the text is too near the
     edge". At 1906px the old 3.3vw resolved to 63px, which is not a margin on a
     screen that wide, it is a coincidence. The left/right asymmetry is deliberate
     and is kept; both sides just get more room. Mobile is untouched: the 18px
     floor still wins below ~390px. */
  --inset-l: clamp(18px, 4.6vw, 108px);
  --inset-r: clamp(18px, 3.1vw, 64px);
  --inset: var(--inset-l);
  --gap: clamp(10px, 0.72vw, 15px);

  --pad-paper: clamp(18px, 1.8vh + 0.52vw, 33px);
  --pad-dark:  clamp(22px, 2.4vh + 0.68vw, 43px);
  --space-section: clamp(15px, 2.1vh, 33px);

  --edge-min: 16px;

  --rail-gut: 18px;
  --perf-h: 13px;

  
  --dur-tap: 96ms;
  --dur-ui: 192ms;
  --dur-enter: 336ms;
  --dur-long: 560ms;
  --dur-epic: 960ms;
  /* MOTION.md measured this: past ~80ms per item a stagger reads as a queue, and past
     ~320ms total the last item feels forgotten. The hero paragraph is 20 words, so an
     unclamped per-word delay ran 874ms before the last word even started moving. */
  --stagger-cap: 320ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.83, 0, .17, 1);
  --spring: linear(0, .0056, .0223, .0902 4.5%, .3557 9%, .7811 14%, .9629 16.5%,
            1.0932 19.4%, 1.1305 21.6%, 1.1213 23.6%, 1.0574 27.6%, .9946 31.6%,
            .9757 34.5%, .9739 39%, 1.0043 46.6%, 1.0088 51.7%, .9977 63.4%, 1);

  color-scheme: dark;
}

/* The spring overshoots by ~8% — that bounce is the thing reduced-motion is asking us not
   to do. Most transitions are switched off outright further down, but anything that stays
   (a colour, a focus ring) should settle flat rather than wobble, so the curve is
   neutralised at the token rather than hunted down rule by rule. */
@media (prefers-reduced-motion: reduce) {
  :root { --spring: var(--ease-out); }
}

.gc-1-10 { grid-column: 1 / 10; }
.gc-1-13 { grid-column: 1 / 13; }
.gc-1-3 { grid-column: 1 / 3; }
.gc-6-13 { grid-column: 6 / 13; }
.gc-1-4 { grid-column: 1 / 4; }
.gc-1-5 { grid-column: 1 / 5; }
.gc-5-10 { grid-column: 5 / 10; }
.gc-4-13 { grid-column: 4 / 13; }
.gc-5-13 { grid-column: 5 / 13; }
.gc-3-7 { grid-column: 3 / 7; }
.gc-7-10 { grid-column: 7 / 10; }
.gc-10-13 { grid-column: 10 / 13; }
.gc-1-6 { grid-column: 1 / 6; }
.gc-1-7 { grid-column: 1 / 7; }
.gc-1-8 { grid-column: 1 / 8; }
.gc-1-9 { grid-column: 1 / 9; }
.gc-6-11 { grid-column: 6 / 11; }
.gc-7-12 { grid-column: 7 / 12; }
.gc-7-13 { grid-column: 7 / 13; }
.gc-8-13 { grid-column: 8 / 13; }
.gc-9-13 { grid-column: 9 / 13; }
/* the why lead, keep it defined or grid-column falls through to auto and collapses the track */
.gc-3-8 { grid-column: 3 / 8; }

html { overflow-x: clip; scrollbar-gutter: stable; scroll-behavior: auto; }
body {
  background: var(--void);
  color: var(--chalk);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

section[data-theme="paper"] {
  --bg: var(--paper); --bg-hi: var(--paper-hi);
  --fg: var(--ink); --fg-body: var(--ink-body); --fg-muted: var(--ink-muted);
  --fg-small-muted: var(--ink-muted);
  --fg-fade: var(--ink-fade); --link: var(--link-ink); --rule: var(--stone);
  --accent-ink: var(--on-air-ink); --accent: var(--on-air); --border: var(--ink-muted);
  --btn-fill: var(--ink); --btn-text: var(--paper-hi);
  --focus: var(--ink);
  background: var(--bg); color: var(--fg-body);
}
section[data-theme="dark"] {
  --bg: var(--void); --bg-hi: var(--carbon);
  --fg: var(--chalk); --fg-body: var(--ash); --fg-muted: var(--ash-dim);

  --fg-small-muted: var(--ash);
  --fg-fade: var(--ash); --link: var(--chalk); --rule: var(--edge);
  --accent-ink: var(--on-air); --accent: var(--on-air); --border: var(--ash-dim);

  --btn-fill: var(--on-air-hot); --btn-text: var(--void);
  --focus: var(--chalk);
  background: var(--bg); color: var(--fg-body);
}
section[data-theme] h1, section[data-theme] h2, section[data-theme] h3 { color: var(--fg); }
section[data-theme] { position: relative; z-index: 1; }

h1 {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-hero);
  letter-spacing: -0.020em; word-spacing: 0.05em; line-height: 1.02; max-width: 19ch;
}
h2 {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-h2);
  letter-spacing: -0.016em; word-spacing: 0.04em; line-height: 1.08; max-width: 20ch;
}
h3 {
  font-family: var(--f-display); font-weight: 650; font-size: var(--t-h3);
  letter-spacing: -0.010em; line-height: 1.24; max-width: 26ch;
}

h1, h2 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: pretty; }
.lead { font-size: var(--t-lead); letter-spacing: -0.005em; line-height: 1.4; max-width: 40ch; }
.body-text { font-size: var(--t-body); line-height: 1.62; max-width: 62ch; }
.list-item { font-weight: 450; line-height: 1.45; max-width: 46ch; }
.mono {
  font-family: var(--f-mono); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; line-height: 1.4; font-size: var(--t-meta); max-width: 40ch;
}

html[lang="sl"] h1, html[lang="hr"] h1,
html[lang="sl"] h2, html[lang="hr"] h2 { font-stretch: 92%; }
html[lang="en"] h1, html[lang="en"] h2 { font-stretch: 100%; }
@media (max-width: 420px) {
  h1, h2 { font-stretch: 86%; }
}

.two-tone { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .two-tone {
    clip-path: inset(-0.18em 0 100% 0);
    transform: translateY(0.10em);
    transition: clip-path 980ms var(--ease-io), transform 980ms var(--ease-out);
    will-change: clip-path;
  }
  .two-tone.in-view { clip-path: inset(-0.18em 0 -0.18em 0); transform: none; will-change: auto; }
}

/* grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
  padding-inline: var(--inset-l) var(--inset-r);
  position: relative;
}
.grid > * { min-width: 0; }
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); position: relative; }

.section { padding-block: var(--pad-paper); position: relative; overflow: clip; }
section[data-theme="dark"].section { padding-block: var(--pad-dark); }
@media (min-width: 900px) {
}

.tilt { transform: none; }

.oy-72 { --oy: 72px; }

.stamp {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--f-mono); font-size: var(--t-stamp);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-small-muted);
  margin-bottom: 14px;
}
.stamp b { font-weight: 700; color: var(--fg); }
.stamp i { font-style: normal; opacity: .72; }
.stamp::after {
  content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .28;
  transform: translateY(-3px);
}
@media (min-width: 1100px) { .stamp { display: none; } }

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;

  background: var(--void); color: var(--chalk); border-left: 3px solid var(--on-air);
  padding: 12px 20px; border-radius: 8px; font-family: var(--f-mono);
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: 0.08em;
  transition: top var(--dur-ui) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* nav */
.nav-pill {
  position: fixed; top: 20px; left: var(--inset); right: var(--inset); z-index: 100;
  display: flex; align-items: center; justify-content: space-between;

  height: 56px; max-width: calc(980px + var(--gap));
  border-radius: 999px; padding-inline: 8px 8px;

  background: var(--paper-hi);
  background: color-mix(in srgb, var(--paper-hi) 92%, transparent);
  backdrop-filter: blur(14px);
  transition: background-color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
  border: 1px solid transparent;
}
.nav-pill { color: var(--ink); }
.nav-pill[data-theme="dark"] {
  background: var(--carbon);
  background: color-mix(in srgb, var(--carbon) 88%, transparent);
  border-color: var(--ash-dim);
  color: var(--chalk);
}
.nav-pill.hide { transform: translateY(-140%); }
.nav-pill__word {
  display: flex; align-items: center; gap: 8px; font-family: var(--f-display);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em; padding-inline: 12px;
  text-decoration: none; white-space: nowrap; flex: 0 0 auto;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.nav-pill__word:hover { opacity: .78; }

.nav-pill__bars span {
  transform-origin: 50% 100%;
  transform: scaleY(var(--bar, .42));
  transition: transform 90ms linear;
}
.nav-pill__bars span:nth-child(1) { --bar: calc(.34 + var(--lvl, 0) * .62); }
.nav-pill__bars span:nth-child(2) { --bar: calc(.30 + var(--lvl, 0) * .78); }
.nav-pill__bars span:nth-child(3) { --bar: calc(.38 + var(--lvl, 0) * .54); }
.nav-pill__bars span:nth-child(4) { --bar: calc(.26 + var(--lvl, 0) * .88); }

.nav-pill__bars span:nth-child(4) {
  background: color-mix(in srgb, var(--on-air-hot) calc(var(--lvl, 0) * 100%), var(--on-air));
}
@media (prefers-reduced-motion: reduce) {
  .nav-pill__bars span { transition: none; --bar: .55; }
}
.nav-pill__bars { display: flex; align-items: flex-end; gap: 2px; height: 17px; }
.nav-pill__bars span { display: block; width: 3px; background: var(--on-air); border-radius: 1px; }
.nav-pill__links { display: flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; }
.nav-pill__links a {
  font-family: var(--f-text); font-weight: 550; font-size: 13.5px; text-decoration: none;
  padding: 10px 11px; border-radius: 999px; opacity: 0.82; white-space: nowrap;
  transition: opacity var(--dur-ui) var(--ease-out);
}

@media (min-width: 861px) and (max-width: 1160px) {
  .nav-pill__links a { font-size: 12.5px; padding: 10px 8px; letter-spacing: -0.01em; }
}
.nav-pill__links a:hover, .nav-pill__links a[aria-current="page"] { opacity: 1; }

.menu-toggle {
  display: none; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding-inline: 10px; white-space: nowrap;
  border: 0; background: transparent; border-radius: 999px;
  font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
}

@media (max-width: 860px) {
  .nav-pill { left: 12px; right: 12px; padding-inline: 6px; }
  .nav-pill__links { display: none; }
  .nav-pill__word .nav-pill__bars { display: none; }
  .nav-pill__word { padding-inline: 8px; }
  .nav-pill .lang-fader { margin-inline: 0; }
  .menu-toggle { display: flex; }
}

.lang-fader {
  position: relative; width: 132px; height: 44px; border-radius: 999px;
  background: var(--paper-lo);
  background: color-mix(in srgb, var(--ink) 8%, transparent); margin-inline: 6px;
  display: flex; align-items: center;
}
.nav-pill[data-theme="dark"] .lang-fader { background: var(--carbon); }

.lang-fader__cap::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 5px; height: 2px;
  background: var(--on-air); border-radius: 2px;
}

.lang-fader__radio[aria-checked="true"] { opacity: 1; color: var(--ink); font-weight: 700; }

.mobile-sheet {
  position: fixed; inset: 0; z-index: 150; background: var(--void); color: var(--chalk);
  display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: var(--inset);
  transform: translateY(-100%); transition: transform var(--dur-enter) var(--ease-out);
}
.mobile-sheet.open { transform: translateY(0); }
.mobile-sheet[hidden] { display: none; }
.mobile-sheet__close {

  position: absolute; top: 20px; right: var(--inset);
  min-width: 56px; height: 56px; padding-inline: 18px; border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--ash-dim); background: transparent; color: var(--chalk);
  font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
}
.mobile-sheet nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-sheet nav a {
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-h2); text-decoration: none; color: var(--chalk);
}

@property --seam-mid {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

/* section transitions */
.seam {
  position: relative; z-index: 0; pointer-events: none;

  height: clamp(64px, 9vh, 118px);

  overflow: clip;
  --seam-mid: 50%;
}
.seam--short { height: clamp(48px, 6.5vh, 82px); }
.seam__wash {
  position: absolute; inset: -1px 0;
  background: linear-gradient(to bottom,
    var(--from) 0%,
    color-mix(in srgb, var(--to)  8%, var(--from)) calc(var(--seam-mid, 50%) - 26%),
    color-mix(in srgb, var(--to) 26%, var(--from)) calc(var(--seam-mid, 50%) - 13%),
    color-mix(in srgb, var(--to) 50%, var(--from)) var(--seam-mid, 50%),
    color-mix(in srgb, var(--to) 74%, var(--from)) calc(var(--seam-mid, 50%) + 13%),
    color-mix(in srgb, var(--to) 92%, var(--from)) calc(var(--seam-mid, 50%) + 26%),
    var(--to) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .seam { view-timeline: --seam block; }
    .seam__wash {
      animation: seam-develop linear both;
      animation-timeline: --seam;
      animation-range: cover 0% cover 100%;
    }

    .seam::after {
      animation: seam-rule linear both;
      animation-timeline: --seam;
      animation-range: cover 10% cover 90%;
      transform-origin: 50% 50%;
    }
  }

  @supports not (animation-timeline: view()) {
    .seam { --seam-mid: calc(74% - var(--vp, 0.5) * 48%); }
  }
}
@keyframes seam-develop {
  from { --seam-mid: 74%; }
  to   { --seam-mid: 26%; }
}
@keyframes seam-rule {
  0%   { opacity: 0;   transform: translateY(-50%) scaleX(.24); }
  46%  { opacity: .62; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0;   transform: translateY(-50%) scaleX(.24); }
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .seam__wash { background: linear-gradient(to bottom, var(--from) 0%, var(--from) 14%, var(--to) 94%); }
}

.seam::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb, var(--to) 34%, transparent) 26%,
    color-mix(in srgb, var(--to) 34%, transparent) 74%,
    transparent 100%);
  opacity: .5;
}
@supports not (background: radial-gradient(circle at 50% 50%, #000 0 2px, transparent 3px)) {
  .seam::after { display: none; }
}

main > section:first-child,
main > div:first-child { padding-block-start: max(var(--pad-dark), 112px); }
/* needs the class and pseudo-class to beat (0,1,2) above, drop either and the hero gets its 112px padding back */
main > section.hero-home:first-child,
main > section.social-hero:first-child { padding-block-start: 0; }
main > section.social-hero:first-child { padding-block-start: max(var(--pad-dark), 112px); }

.waveform-contact { width: 100%; max-width: none; aspect-ratio: 1440/220; touch-action: none; }
.waveform-contact .wf-bar { fill: var(--stone); transition: fill var(--dur-tap) linear; }
section[data-theme="dark"] .waveform-contact .wf-bar { fill: var(--edge); }
.waveform-contact .wf-bar.hot { fill: var(--on-air); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--f-text); font-weight: 550; letter-spacing: 0.01em; text-decoration: none;
  background: var(--btn-fill); color: var(--btn-text);
  transition: transform var(--dur-tap) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
  box-shadow: 0 4px 0 rgba(0,0,0,0);
}
.btn:hover { box-shadow: 0 10px 22px rgba(0,0,0,.18); filter: brightness(1.06); }
section[data-theme="dark"] .btn:hover { background: var(--on-air-hot); box-shadow: 0 0 0 1px var(--chalk) inset; }
.btn:active { transform: scale(.965); transition-duration: var(--dur-tap); }
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transition-timing-function: var(--spring); }
}

a.link {
  color: var(--link); text-underline-offset: 0.14em; text-decoration-line: underline;
  text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-ui) var(--ease-out);
}
a.link:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus, var(--chalk)); outline-offset: 3px; border-radius: inherit;
}

.bg-blueprint {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 64px);

  opacity: 0.075;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}
section[data-theme="dark"] .bg-blueprint { opacity: 0.10; }

.bg-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
section[data-theme="dark"] .bg-grain { opacity: 0.05; }

/* the halftone crowd, used at five sizes across the site */
.crowd-plate {
  position: relative; width: 100%; overflow: hidden;
  background: transparent;
  /* clamped to 1, old name let a cap below cover through and left bare edges on phones */
  --crowd-zoom: 1;
  --crowd-anchor: 68%;
}
.crowd-plate::before {
  content: ""; position: absolute; inset: 0;
  background-image: image-set(
    url("assets/crowd/crowd-halftone-invert.webp") type("image/webp"),
    url("assets/crowd/crowd-halftone-invert.png") type("image/png"));
  background-size: cover;
  background-position: 50% var(--crowd-anchor);
  background-repeat: no-repeat;

  transform: translate3d(0, var(--crowd-y, 0), 0) scale(1.02);
  will-change: transform;
}
@media (max-width: 900px) {
  .crowd-plate { --crowd-zoom: 1; --crowd-anchor: 72%; }
  
}
section[data-theme="paper"] .crowd-plate::before {
  background-image: image-set(
    url("assets/crowd/crowd-halftone.webp") type("image/webp"),
    url("assets/crowd/crowd-halftone.png") type("image/png"));
}

.crowd-plate {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
}
@media (prefers-reduced-motion: reduce) {
  .crowd-plate::before { transform: none; }
}
.crowd-plate .accent-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--on-air);
  box-shadow: 0 0 8px var(--on-air);
}

.studio-plate {
  position: relative; width: 100%; height: 100%;
  background-image:
    linear-gradient(160deg, rgba(12,10,8,.94) 0%, rgba(5,5,5,.94) 60%),
    radial-gradient(220px 140px at 70% 30%, rgba(178,58,49,.10), transparent 70%),
    url("assets/crowd/crowd-halftone-invert.webp");
  background-size: auto, auto, 220%;
  background-position: 0 0, 0 0, var(--crop, 40% 46%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(237,229,214,.12);
}

.studio-plate::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  transform: translate(-50%, -50%); z-index: 2; opacity: .5;
  background-image:
    linear-gradient(var(--ash), var(--ash)),
    linear-gradient(var(--ash), var(--ash));
  background-size: 1px 100%, 100% 1px;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.work-rail > .work-tile:nth-child(1) .studio-plate { --crop: 12% 40%; }
.work-rail > .work-tile:nth-child(2) .studio-plate { --crop: 34% 58%; }
.work-rail > .work-tile:nth-child(3) .studio-plate { --crop: 55% 36%; }
.work-rail > .work-tile:nth-child(4) .studio-plate { --crop: 72% 62%; }
.work-rail > .work-tile:nth-child(5) .studio-plate { --crop: 88% 44%; }
.studio-plate::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle, var(--ash) 1px, transparent 1.4px);
  background-size: 5.5px 5.5px;
  mix-blend-mode: soft-light;
}

.object-plate { position: relative; display: flex; align-items: center; justify-content: center; }
.object-plate svg { width: 100%; height: 100%; }
.object-plate .oa-lamp { fill: var(--on-air); filter: drop-shadow(0 0 10px var(--on-air)); }

.record-spin { animation: spin 1.8s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .record-spin { animation: none; } }

.example-frame {
  border: 1px solid var(--border); position: relative; aspect-ratio: 16/10;
  background: var(--bg-hi);
  background:
    linear-gradient(0deg, var(--bg-hi), var(--bg-hi)),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--border) 45%, transparent) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--border) 45%, transparent) 23px 24px);
  background-blend-mode: normal;
  overflow: hidden;
  transition: border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--spring);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .example-frame {
    background:
      linear-gradient(0deg,
        color-mix(in srgb, var(--bg-hi) 94%, transparent),
        color-mix(in srgb, var(--bg-hi) 94%, transparent)),
      repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--border) 45%, transparent) 23px 24px),
      repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--border) 45%, transparent) 23px 24px),
      url("assets/crowd/crowd-halftone.webp");
    background-size: auto, auto, auto, 260%;
    background-position: 0 0, 0 0, 0 0, var(--crop, 46% 42%);
    background-repeat: no-repeat, repeat, repeat, no-repeat;
  }
  section[data-theme="dark"] .example-frame {
    background-image:
      linear-gradient(0deg,
        color-mix(in srgb, var(--bg-hi) 94%, transparent),
        color-mix(in srgb, var(--bg-hi) 94%, transparent)),
      repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--border) 45%, transparent) 23px 24px),
      repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--border) 45%, transparent) 23px 24px),
      url("assets/crowd/crowd-halftone-invert.webp");
  }
}
.examples-grid .example-frame:nth-child(1) { --crop: 10% 40%; }
.examples-grid .example-frame:nth-child(2) { --crop: 36% 56%; }
.examples-grid .example-frame:nth-child(3) { --crop: 62% 38%; }
.examples-grid .example-frame:nth-child(4) { --crop: 86% 50%; }

.example-frame::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat,
    linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat;
  opacity: .8;
}
.example-frame::after {
  content: attr(data-mark);
  position: absolute; right: 10px; bottom: 8px;
  font-family: var(--f-mono); font-size: var(--t-code); letter-spacing: .08em;
  color: var(--fg-small-muted);
}
.example-frame:hover { border-color: var(--fg-small-muted); transform: translateY(-3px); }
.example-frame--vert { aspect-ratio: 9/16; }

.frame-box { aspect-ratio: var(--ar, 4/3); overflow: clip; position: relative; }

@supports not (aspect-ratio: 1 / 1) {
  .frame-box, .example-frame, .laptop-seq, .waveform-contact { height: 0; }
  .frame-box::after, .example-frame::after { content: none; }
  .frame-box { padding-top: 75%; }
  .services .service-media { padding-top: 80%; }
  .services .service-media.object-3d { padding-top: 75%; }
  .services .service-media.shot-frame { padding-top: 56.25%; }
  .services .service-media.object-plate { padding-top: 125%; }
  .web-hero .hero-browser { padding-top: 62.5%; }
  .web-existing .slab-wrap .frame-box { padding-top: 56.25%; }
  .laptop-stage .plate-wrap .frame-box { padding-top: 56.25%; }
  .example-frame { padding-top: 62.5%; }
  .laptop-seq { padding-top: 75%; }
  .waveform-contact { padding-top: 15.28%; }
  .work-rail > .work-tile:nth-child(1) .frame-box { padding-top: 133.33%; }
  .work-rail > .work-tile:nth-child(2) .frame-box { padding-top: 100%; }
  .work-rail > .work-tile:nth-child(3) .frame-box { padding-top: 125%; }
  .work-rail > .work-tile:nth-child(4) .frame-box { padding-top: 100%; }
  .work-rail > .work-tile:nth-child(5) .frame-box { padding-top: 56.25%; }
  .social-feel .fan .frame-plate-box { height: auto; padding-top: 177.78%; }
}
/* shot-frame excluded: it is a DARK media frame (#0A0A0B at .shot-frame) and must keep that as
   its placeholder — the old --bg-hi override out-specified it and left a grey box before the
   (lazy) screenshot loaded, which reads as broken. now it's a designed near-black frame always. */
.frame-box:not([class*="-plate"]):not(.browser-plate):not(.shot-frame) { background: var(--bg-hi); }

/* the section itself is the sticky element, not a box inside it, so it never translates */
/* matched at (0,2,1) to beat section[data-theme] above, a bare .hero-home loses and it scrolls again */
section.hero-home[data-theme] {
  position: sticky; top: 0; z-index: 0;
  height: 100svh; min-height: 100svh;
  overflow: clip;
  /* don't scale this, it's full-bleed and scaling exposes the body colour down the edges */
  background: var(--void);
}
.hero-home.is-parked { visibility: hidden; }
/* painted overlay instead of a filter, one composited quad instead of a per-frame blur */
/* recedes into shadow instead of flat black so the plate stays legible the whole way down */
.hero-home::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10, 8, 6, .72) 0%, rgba(10, 8, 6, .86) 46%, rgba(10, 8, 6, 1) 100%);
  opacity: calc(var(--cover, 0) * 0.60);
}
.hero-home + .seam { z-index: 1; }
/* The seam after the hero must START TRANSPARENT. Every other seam sits between
   two opaque sections, so beginning at full --from is right for them. This one
   slides OVER a sticky hero, and beginning opaque meant its top edge covered the
   halftone in a single row — measured as a 0.26 luminance cliff, and the thing he
   kept calling "sharp and not soft and clean". Letting the dots dissolve into it
   instead costs nothing and is the actual fix; masking the plate underneath never
   could be, because the plate was not what was cutting it. */
.hero-home + .seam { height: clamp(120px, 17vh, 240px); }
.hero-home + .seam .seam__wash {
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--from) 45%, transparent) 16%,
    var(--from) 38%,
    color-mix(in srgb, var(--to) 30%, var(--from)) 62%,
    color-mix(in srgb, var(--to) 72%, var(--from)) 82%,
    var(--to) 100%);
}
@supports not (position: sticky) {
  section.hero-home[data-theme] { position: relative; height: auto; min-height: min(88svh, 680px); transform: none; }
  .hero-home::after { content: none; }
}

.hero-stage {
  position: sticky; top: 0; height: 78svh;
  --stage-h: 78svh; display: flex; flex-direction: column;
  justify-content: flex-end; padding-top: clamp(48px, 6vh, 68px);
  overflow: hidden;
}
/* no transform here on purpose, a 7.5% scale recede left a visible seam down the edges */
.hero-home .hero-stage {
  position: static; height: 100%;
  padding-top: clamp(96px, 12vh, 132px);
}
/* wipe is timed to clear the headline before the covering section eats it from the bottom */
/* --hero-foot is the single source of truth, the legibility scrim stops 54px short of it */
@media (min-width: 900px) {
  .hero-home .hero-content { --hero-foot: clamp(96px, 34vh, 340px); padding-bottom: var(--hero-foot); }
}
/* short laptop screens can't pay 34vh, it overflows the stage and clips the mono line */
@media (min-width: 900px) and (max-height: 780px) {
  .hero-home .hero-content { --hero-foot: clamp(72px, 24vh, 190px); }
}
/* phones stack lead and button under the h1, so the pill is lowest and clips first */
@media (max-width: 899px) {
  .hero-home .hero-content { --hero-foot: clamp(56px, 26vh, 240px); padding-bottom: var(--hero-foot); }
}

/* opacity only, nothing moves. reduced motion skips the listener and this just stays 1 */
.hero-home .hero-content { opacity: 1; }
@supports (opacity: clamp(0, calc(1 - 0.5), 1)) {
  .hero-home .hero-content {
    opacity: clamp(0, calc(1.06 - var(--handover, 0) * 1.30), 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-home::after { opacity: 0; }
}

.hero-canvas-wrap { position: absolute; inset: 0; z-index: 0; opacity: .16; mix-blend-mode: screen; }
.hero-canvas-wrap canvas, .hero-canvas-wrap img { width: 100%; height: 100%; object-fit: cover; }
.hero-content {
  position: relative; z-index: 3; padding-inline: var(--inset-l) var(--inset-r);
  padding-bottom: clamp(20px, 4vh, 48px);
}

.hero-content::before {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0; top: calc(-1 * clamp(56px, 9vh, 120px));
  bottom: calc(var(--hero-foot, 0px) - 54px);
  background: linear-gradient(to bottom,
    rgba(23, 19, 14, 0) 0%,
    rgba(23, 19, 14, .40) 26%,
    rgba(23, 19, 14, .70) 58%,
    rgba(23, 19, 14, .62) 84%,
    rgba(23, 19, 14, 0) 100%);
  pointer-events: none;
}

.hero-content::after { content: none; }
.hero-mono { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-air); box-shadow: 0 0 8px var(--on-air); }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: tally 2.4s steps(2, jump-none) infinite; } }
@keyframes tally { 0%, 49% { opacity: .55; } 50%, 100% { opacity: 1; } }

.hero-home h1 { text-shadow: none; }
.hero-home .lead { color: var(--chalk); text-shadow: none; }

/* desktop keeps its existing ramp, this branch only lets the phone values move independently */
@media (min-width: 900px) {
  /* desktop hero driver (base h1 uses var(--t-hero)). raised 2026-09-04: the old ceiling
     computed to ~44px at 1440 — the hero never commanded. now ~68px at 1440, 76px cap. */
  :root { --t-hero: clamp(2.75rem, 0.9rem + 3.7vw, 4.75rem); }
}
/* the home hero carries the page, so it gets more than the shared ramp on phones */
@media (max-width: 899px) {
  .hero-home h1 { font-size: clamp(2.75rem, 0.9rem + 3.7vw, 4.75rem); max-width: 15ch; letter-spacing: -0.026em; line-height: 1.0; }
  .hero-home .lead { max-width: 34ch; }
}

.hero-stage::after {

  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* tuned against a plate whose top third had no dots at all, don't push this back up */
  background:
    linear-gradient(104deg,
      rgba(10,8,6,.54) 0%, rgba(10,8,6,.30) 26%, rgba(10,8,6,.07) 52%, rgba(10,8,6,0) 72%),
    linear-gradient(to bottom,
      rgba(23,19,14,.34) 0%, rgba(23,19,14,0) 24%, rgba(23,19,14,0) 66%, rgba(23,19,14,.26) 100%);
}

@media (min-width: 900px) {
  /* one coherent left-column editorial stack in reading order (eyebrow -> headline ->
     lead -> cta), the crowd halftone carrying the right. was three scattered corners
     that broke the reading order and read as empty-and-cluttered at once. this also
     makes the desktop composition correlate with the mobile stack. */
  .hero-home .hero-mono      { grid-column: 1 / 7;  grid-row: 1; }
  .hero-home h1              { grid-column: 1 / 10; grid-row: 2; margin-top: clamp(12px, 1.8vh, 22px); }
  .hero-home .lead           { grid-column: 1 / 7;  grid-row: 3; margin-top: clamp(18px, 2.4vh, 30px); max-width: 44ch; }
  .hero-home .btn            { grid-column: 1 / 5;  grid-row: 4; margin-top: clamp(20px, 2.6vh, 30px); justify-self: start; }
}
@media (max-width: 899px) {

  .hero-home .hero-mono,
  .hero-home h1,
  .hero-home .lead,
  .hero-home .btn { grid-column: 1 / -1; }
  .hero-home .btn { justify-self: start; }
  .hero-home .lead { margin-top: 22px; }
  .hero-home .btn { margin-top: 28px; }
}

.hero-crowd-bleed {
  position: absolute; inset: 0; height: auto; z-index: 1; opacity: 1;
}

/* source has a dead sky band across the top third, cropped off before the cover fit */
.hero-crowd-bleed.crowd-plate { --crowd-anchor: 34%; --dot-crop-top: 0.05; --dot-black-top: 0.045; }
@media (max-width: 900px) {
  /* phones already crop hard on width, so they pay for the fill in black point only */
  .hero-crowd-bleed.crowd-plate { --crowd-anchor: 74%; --dot-crop-top: 0; --dot-black-top: 0.04; }
}

.hero-crowd-bleed.crowd-plate::before { filter: contrast(1.12) brightness(1.18); }

/* Top fade was already here; the BOTTOM half is new (2026-08-25). The plate ran
   fully opaque to its own bottom edge, which sits exactly on the hero's bottom
   edge, so the halftone ended on a hard horizontal line — measured as a 0.30
   luminance drop across a single row. His note: "the transformation between the
   hero animation and the rest of the site is sharp and not soft and clean".
   Extending this mask rather than adding a second one: an earlier attempt added
   `.hero-home .crowd-plate` at the same specificity and simply lost to this rule,
   which is further down the file. One mask, one place. */
.hero-crowd-bleed.crowd-plate {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 10%, #000 26%, #000 64%, rgba(0,0,0,.62) 82%, rgba(0,0,0,.18) 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 10%, #000 26%, #000 64%, rgba(0,0,0,.62) 82%, rgba(0,0,0,.18) 94%, transparent 100%);
}

.crop-marks { display: none; }
.crop-marks::before, .crop-marks::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 1px solid var(--fg-small-muted); opacity: .55;
}
.crop-marks::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.crop-marks::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
@media (max-width: 640px) { .crop-marks { inset: 12px; } .crop-marks::before, .crop-marks::after { width: 12px; height: 12px; } }

.work { padding-top: var(--pad-paper); }
.work h2 { grid-column: 1 / 6; margin-bottom: 28px; }

.work-rail-wrap { position: relative; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.work-rail-wrap::before, .work-rail-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--perf-h);
  z-index: 3; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, var(--bg) 0 2.4px, transparent 2.6px)
      0 0 / 15px var(--perf-h) repeat-x,
    linear-gradient(var(--edge), var(--edge));
  opacity: .8;
}
.work-rail-wrap::before { top: 0; }
.work-rail-wrap::after { bottom: 0; }
@supports not (background: radial-gradient(circle at 50% 50%, #000 0 2px, transparent 3px)) {
  .work-rail-wrap::before, .work-rail-wrap::after { background: var(--edge); opacity: .4; }
}

.work-rail::-webkit-scrollbar { height: 8px; }
.work-rail::-webkit-scrollbar-track { background: transparent; }
.work-rail::-webkit-scrollbar-thumb {
  background: var(--ash-dim); border-radius: 0;
  border-block: 3px solid transparent; background-clip: padding-box;
}
.work-rail::-webkit-scrollbar-thumb:hover { background: var(--ash); background-clip: padding-box; }
.work-rail {

  display: flex; gap: 44px; align-items: flex-end;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-left: var(--inset-l); padding-right: 18vw;

  padding-top: calc(var(--perf-h) + 14px);
  padding-bottom: calc(var(--perf-h) + 66px);
  scrollbar-width: thin; scrollbar-color: var(--ash-dim) transparent;
  cursor: grab;
}
.work-rail:active { cursor: grabbing; }
.work-tile {
  flex: 0 0 auto; position: relative; scroll-snap-align: start;
  transform: none; transition: transform var(--dur-ui) var(--spring), box-shadow var(--dur-ui) var(--ease-out);
  box-shadow: 0 12px 24px rgba(0,0,0,.28);

  outline: 1px solid var(--ash-dim); outline-offset: 6px;
}

.work-rail > .work-tile:nth-child(1) { width: min(255px, 46vw);  --ar: 3/4;  }
.work-rail > .work-tile:nth-child(2) { width: min(158px, 34vw);  --ar: 1/1;  }
.work-rail > .work-tile:nth-child(3) { width: min(201px, 40vw);  --ar: 4/5;  }
.work-rail > .work-tile:nth-child(4) { width: min(147px, 30vw);  --ar: 1/1;  }
.work-rail > .work-tile:nth-child(5) { width: min(315px, 52vw);  --ar: 16/9; }
.work-tile:hover, .work-tile:focus-within { transform: translateY(-4px); box-shadow: 0 22px 34px rgba(0,0,0,.32); }
.work-tile:active { transform: translateY(-1px) scale(.994); transition-duration: var(--dur-tap); transition-timing-function: var(--ease-out); }

.work-slate {
  position: absolute; left: 0; right: 0; top: calc(100% + 15px);
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px;
  padding-top: 7px; border-top: 1px solid var(--edge);
}
.work-tile .frame-num {
  grid-row: 1 / 3; align-self: start;
  color: var(--on-air-hot); font-family: var(--f-mono);
  font-size: var(--t-meta); letter-spacing: .06em; line-height: 1.3;
}
.work-slate__kind {
  font-family: var(--f-display); font-weight: 650; font-size: var(--t-h3);
  line-height: 1.1; color: var(--fg); letter-spacing: -0.01em;
}
.work-slate__spec {
  font-family: var(--f-mono); font-size: var(--t-code); letter-spacing: .05em;
  color: var(--fg-small-muted); line-height: 1.3;
}
.work-note { grid-column: 6 / 11; align-self: end; margin-bottom: 28px; color: var(--fg-body); }
@media (max-width: 900px) { .work-note { grid-column: 1 / -1; margin: 0 0 22px; } }
.drag-hint { grid-column: 1/6; margin-top: 8px; color: var(--fg-small-muted); }

.intro { position: relative; }

.intro .intro-inner { grid-column: 1 / 10; position: relative; z-index: 2; margin-top: 0; align-self: center; }
.intro .intro-inner .body-text { font-size: var(--t-h2); line-height: 1.18; color: var(--fg); max-width: 34ch; padding-left: 26px; position: relative; }

.fader {
  position: absolute; left: 0; top: 0; bottom: 0; width: 22px;
  /* --fader-p is the cap's travel, 0 to 1. default .72 so the still page reads as set, not bottomed-out */
  --fader-p: .72;
}
/* theme-aware tokens only, --ash on this beige section measured 1.19:1 and was invisible */
.fader-line {
  position: absolute; left: 10px; top: 0; bottom: 0; width: 2px;
  background: var(--fg-muted);
}
/* six ticks from the repeating gradient plus one pinned at the bottom, 7 marks total */
.fader-scale {
  position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background-image:
    repeating-linear-gradient(to bottom, var(--fg-muted) 0 1px, transparent 1px calc(100% / 6)),
    linear-gradient(var(--fg-muted), var(--fg-muted));
  background-repeat: repeat, no-repeat;
  background-size: 9px 100%, 9px 1px;
  background-position: 0 0, 0 100%;
  opacity: .45;   /* blends to 1.92:1, quieter than the track on purpose */
}
.fader-cap {
  position: absolute; left: 3px; bottom: 0;   /* static fallback: parked low */
  width: 16px; height: 8px; background: var(--on-air);
  /* --on-air is only 2.27:1 on beige, the outline gives the cap its own 4.83:1 silhouette */
  box-shadow: 0 0 0 1px var(--fg-muted);
}
/* guarded, the cap position depends on this calc. unsupported browsers just keep bottom: 0 */
@supports (top: calc(1 * (100% - 8px))) {
  .fader-cap { top: calc(var(--fader-p) * (100% - 8px)); bottom: auto; }
}
/* no keyframes, animating --fader-p needs @property or it jumps instead of riding.
   driven from the shared rAF ticker instead so every device gets one code path */
@media (max-width: 900px) { .intro .intro-inner { grid-column: 1 / -1; margin-top: 0; } }

.contact-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(80px, 13vh, 168px);
  z-index: 0; pointer-events: none; opacity: .13;
  background-image: url("assets/crowd/crowd-halftone.webp");
  background-size: cover; background-position: 50% 62%; background-repeat: no-repeat;
  /* crowd has to fade to nothing before the section edge or the seam below inherits leftover texture */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 56%, transparent 84%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 56%, transparent 84%);
}
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .contact-foot { opacity: .10; }
}
.contact .grid { position: relative; z-index: 1; }

.services .grid { row-gap: clamp(32px, 4.6vh, 62px); }
.services .service {
  position: relative; grid-column: 1 / -1; margin-bottom: 0;
  display: grid; grid-template-columns: subgrid;
  align-items: start;
}
@supports not (grid-template-columns: subgrid) {
  .services .service { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
}
.services .service__text { grid-column: 1 / 6; }
.services .service .service-media { grid-column: 7 / 13; margin-top: 0; }

.services .service:nth-of-type(even) .service__text { grid-column: 8 / 13; }
.services .service:nth-of-type(even) .service-media { grid-column: 1 / 7; grid-row: 1; }

@media (min-width: 900px) {
  .services .service__text { align-self: center; }
}
@media (max-width: 899px) {
  .services .service,
  .services .service:nth-of-type(even) { display: block; }
  .services .service__text,
  .services .service:nth-of-type(even) .service__text,
  .services .service .service-media,
  .services .service:nth-of-type(even) .service-media { grid-column: 1 / -1; }
  .services .service .service-media { margin-top: 18px; }
  .services .service + .service { margin-top: clamp(40px, 6vh, 64px); }
}
.services .service--link { display: block; color: inherit; text-decoration: none; }

.services .service > .svc-num {
  position: static; display: block; z-index: 0;
  font-family: var(--f-mono); font-weight: 500;
  font-size: var(--t-meta); line-height: 1;
  color: var(--accent-ink); opacity: 1;
  letter-spacing: .12em; margin-bottom: 8px;
  pointer-events: none; user-select: none;
}
.services .service > .service--link,
.services .service > .service-detail { position: relative; z-index: 1; }

.service-detail { margin-top: 4px; }
.service-detail__item {
  position: relative; padding-left: 18px; margin-top: 7px;
  font-size: var(--t-body); line-height: 1.5; color: var(--fg-body); max-width: 40ch;
}
.service-detail__item::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 1px; background: var(--accent);
}

.services .service h3 {
  margin-bottom: 14px;
  /* raised 2026-09-04: was ~28px cap, read modest in the wide beige void. now anchors each
     service with real presence (~34px desktop) without competing with the hero. */
  font-size: clamp(1.125rem, 0.9rem + 1.7vw, 2.125rem);
  line-height: 1.05; letter-spacing: -0.02em;
}
/* below 900px the vw term goes inert and h3 collapsed to its ~18px floor — only ~3px over body
   text, so the service titles read flat. give phones a real title size to anchor each card. */
@media (max-width: 899px) {
  .services .service h3 { font-size: clamp(1.375rem, 1.1rem + 2vw, 1.6rem); }
}

.services .service + .service { border-top: 1px solid var(--rule); padding-top: clamp(24px, 3.6vh, 46px); }
.services .service .body-text { color: var(--fg-body); font-size: var(--t-lead); line-height: 1.5; max-width: 42ch; }
.services .service .service-media { margin-top: 16px; }

.services .service-media { --ar: 5/4; }

.services .service-media.object-3d { --ar: 648/417; max-width: none; }

.browser-plate { --chrome: 56px; }
/* keep the specificity above the --ar rule further down or the plate sizes off its flex children */
.web-hero .hero-browser.browser-plate { --ar: 16/10; }

.services .service-media.shot-frame { --ar: 16/9; }

.services .service-media.object-plate {
  --ar: 5/4; max-width: none;
  background:
    linear-gradient(180deg, rgba(23,19,14,.30) 0%, rgba(23,19,14,.80) 100%),
    url("assets/crowd/crowd-halftone.webp");
  background-size: auto, cover;
  background-position: 0 0, 48% 44%;
  background-repeat: no-repeat;
}
.services .service-media.tilt { transform: none; transition: transform var(--dur-ui) var(--spring); }
.service--link:hover .service-media.tilt, .service--link:focus-within .service-media.tilt { transform: scale(1.015); }
.service--link h3 { transition: transform var(--dur-ui) var(--spring); }
.service--link:hover h3, .service--link:focus-within h3 { transform: translateX(8px); }

.services .closer { grid-column: 1 / 9; margin-top: 12px; color: var(--fg-muted); }
@media (min-width: 900px) {
  .services .closer {
    grid-column: 1 / 8; margin-top: clamp(24px, 3.6vh, 48px);

    align-self: start;
  }
}
@media (max-width: 899px) { .services .closer { grid-column: 1 / -1; } }

.facts { position: relative; }

.facts h2 { grid-column: 1 / 13; margin-bottom: clamp(18px, 2.6vh, 34px); }
.facts-rows { grid-column: 1 / 13; }
/* solid bar has no internal pattern to squash, plain scaleX is correct here and composites on the GPU */
.facts-row {
  display: grid; grid-template-columns: clamp(46px, 4.5vw, 72px) 1fr;
  align-items: baseline; gap: clamp(16px, 2vw, 32px);
  padding-block: clamp(9px, 1.4vh, 17px); position: relative;
  border-bottom: 1px solid var(--edge-pitch);
}
.facts-row .idx {
  /* --ash (7.7:1 on pitch), NOT --ash-dim (3.57:1 — fails WCAG AA at this 19px normal weight).
     still clearly secondary to the chalk text at 15.87:1, so the hierarchy holds and AA passes. */
  font-family: var(--f-mono); color: var(--ash);
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem); letter-spacing: .02em;
  align-self: center; font-variant-numeric: tabular-nums;
}
.facts-row .txt {
  font-family: var(--f-display); font-weight: 600; color: var(--chalk);
  font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.01em;
}

/* --i (0..8) drives ONLY the reveal stagger below. the old --lit lightness ramp and the
   per-row size/opacity climb are gone — they read as broken scaling and left the top rows
   barely legible. every row is now equally readable; 09 alone steps up, as the payoff. */
.facts-row:nth-child(1) { --i: 0; }
.facts-row:nth-child(2) { --i: 1; }
.facts-row:nth-child(3) { --i: 2; }
.facts-row:nth-child(4) { --i: 3; }
.facts-row:nth-child(5) { --i: 4; }
.facts-row:nth-child(6) { --i: 5; }
.facts-row:nth-child(7) { --i: 6; }
.facts-row:nth-child(8) { --i: 7; }
.facts-row:nth-child(9) { --i: 8; }

/* 09 is the payoff row — the only one that breaks the pitch */
.facts-row:last-child {
  min-height: 64px; border-bottom-width: 2px; border-bottom-color: var(--on-air);
}
.facts-row:last-child .idx { color: var(--on-air); }
.facts-row:last-child .txt { font-size: var(--t-h2); letter-spacing: -0.02em; }

/* reveal on the row, never on .txt: that already owns transform for hover */
/* reveal: a single calm fade with a light stagger. no translate, no per-row size change —
   that combination was the "weird scaling / bad animation". reduced-motion stays static. */
@media (prefers-reduced-motion: no-preference) {
  .facts-row {
    opacity: 0;
    transition: opacity 440ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 30ms);
  }
  .facts-row.in-view { opacity: 1; }
}

@media (max-width: 899px) {
  /* mobile was cluttered: tiny index, cramped rows, the size ramp. now — readable lead-size
     type, real breathing room, a clear index column, the payoff a step up. */
  .facts-row {
    grid-template-columns: 30px 1fr; gap: 12px;
    align-items: baseline; min-height: 0; padding-block: 15px;
  }
  .facts-row .idx { font-size: var(--t-meta); align-self: baseline; }
  .facts-row .txt { font-size: var(--t-lead); line-height: 1.3; }
  .facts-row:last-child { min-height: 0; padding-block: 18px; }
  .facts-row:last-child .txt { font-size: var(--t-h3); }
}

.why { position: relative; }
.why-h2 { margin-bottom: clamp(22px, 3vh, 40px); }
.why-item {
  position: relative; padding-top: 16px; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 900px) {
  .why-h2 { align-self: start; margin-bottom: 0; }
  .why-item--lead p {
    font-size: var(--t-h2); line-height: 1.14; max-width: 16ch;
    letter-spacing: -0.02em;
  }
}

.why-item { padding-top: 34px; }
.why-item .why-num {
  position: absolute; top: 14px; left: 0;
  font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .1em;
  color: var(--accent-ink); line-height: 1;
  transform: translateY(var(--why-y, 0px));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .why-item .why-num { transform: none; will-change: auto; }
}
.why-item p { position: relative; z-index: 1; font-size: var(--t-h3); font-family: var(--f-display); font-weight: 600; max-width: 24ch; line-height: 1.3; }
@media (max-width: 900px) {

  .why-h2, .why-item { grid-column: 1 / -1; }
  .why-item { margin-bottom: 22px; }
}

.contact .contact-grid { align-items: start; }
.contact h2 { grid-column: 1 / 8; }
.contact .body-text { grid-column: 1 / 6; margin-top: 16px; }
.contact .btn { margin-top: 22px; }
.contact .contact-panel { grid-column: 7 / 13; }
.contact address { font-family: var(--f-mono); font-style: normal; font-size: var(--t-meta); margin-top: 20px; line-height: 1.9; }
.contact address a { text-decoration: none; }
@media (max-width: 900px) {
  .contact h2, .contact .body-text, .contact .contact-panel { grid-column: 1 / -1; }
}

/* footer */
.site-footer { position: relative; overflow-x: clip; overflow-y: visible; }
@supports not (overflow: clip) {

  .site-footer { overflow: visible; }
}

.site-footer .grid { position: relative; z-index: 2; align-items: start; }
.site-footer .tagline { grid-column: 1 / 6; grid-row: 1; font-size: var(--t-h2); margin: 0; }

.site-footer .contact-col { grid-column: 8 / 11; grid-row: 1; }
.site-footer .follow-col { grid-column: 11 / 13; grid-row: 1; }
.site-footer .foot-col { margin: 0; }

.site-footer .gc-9-13 {
  grid-column: 8 / 13; grid-row: 2;
  display: flex; align-items: center; justify-content: flex-start; gap: 18px;
  margin-top: 30px;
}
.site-footer .foot-col h3.mono { color: var(--ash); margin-bottom: 12px; }
.site-footer .foot-col a { display: block; font-family: var(--f-text); text-decoration: none; margin-bottom: 6px; }
.site-footer .rights { grid-column: 1 / 6; grid-row: 2; margin-top: 30px; color: var(--ash); }
.site-footer .lang-fader { margin-top: 20px; }

.site-footer { padding-bottom: clamp(154px, 14vh, 184px); }
@media (max-width: 900px) { .site-footer { padding-bottom: clamp(112px, 14vh, 140px); } }

.footer-dial {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 4px; width: min(430px, 58vw);
  max-width: none; opacity: .30; z-index: 0; pointer-events: none; color: var(--ash);
  overflow: hidden;
}
.footer-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.dial-needle { transform: translateX(var(--dial-x, 300px)); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .dial-needle { transform: translateX(520px); } }
@media (max-width: 900px) { .footer-dial { bottom: 2px; width: min(300px, 74vw); opacity: .26; } }
@media (max-width: 900px) {

  .site-footer .tagline, .site-footer .contact-col, .site-footer .follow-col,
  .site-footer .rights, .site-footer .gc-9-13 {
    grid-column: 1 / -1; grid-row: auto;
  }
  .site-footer .tagline, .site-footer .contact-col, .site-footer .follow-col { margin-bottom: 28px; }
  .site-footer .rights { margin-top: 8px; }
  .site-footer .gc-9-13 { justify-content: flex-start; margin-top: 22px; }

  .site-footer .gc-9-13 { grid-column: 1 / -1; }
}

.web-hero { position: relative; }

.web-hero h1 { grid-column: 1 / 10; }
@media (min-width: 1100px) { .web-hero h1 { max-width: 24ch; } }

.web-hero .lead {
  grid-column: 1 / 6; margin-top: clamp(20px, 3vh, 38px);
  font-size: var(--t-h2); line-height: 1.2; max-width: 22ch;
  color: var(--fg); letter-spacing: -0.012em;
  padding-left: 22px; position: relative;
}
.web-hero .lead::before {
  content: ""; position: absolute; left: 0; top: .16em; bottom: .16em; width: 3px;
  background: var(--accent);
}
.web-hero .body-text { grid-column: 1 / 6; margin-top: clamp(16px, 2.4vh, 28px); }

/* --tx/--ty/--gx come from initBrowserSkeleton on pointer move */
.web-hero .hero-browser {
  justify-self: end; align-self: start; width: 100%;

  max-width: clamp(300px, 42vw, 560px);
  --ar: 16/10; margin-top: clamp(18px, 2.6vh, 34px);
  --tx: 0deg; --ty: 0deg; --gx: 50%; --lift: 0;
  transform:
    perspective(1100px)
    rotate(calc(1.5deg * (1 - var(--lift))))
    rotateX(var(--tx)) rotateY(var(--ty))
    translateZ(calc(var(--lift) * 16px));
  transform-style: preserve-3d;
  transition: transform 180ms var(--spring), box-shadow 180ms var(--ease-out);
  box-shadow:
    0 calc(14px + var(--lift) * 22px) calc(28px + var(--lift) * 40px) rgba(10, 8, 6, calc(.26 + var(--lift) * .22)),
    0 1px 0 rgba(237, 229, 214, .10) inset;
  outline-offset: 6px;
}
.web-hero .hero-browser:hover,
.web-hero .hero-browser:focus-visible { --lift: 1; }
.web-hero .hero-browser:active { transform: perspective(1100px) scale(.99); transition-duration: 90ms; }

/* specular sweep, a narrow band of light that follows the cursor across the glass */
.web-hero .hero-browser::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg,
    transparent calc(var(--gx) - 19%),
    rgba(237, 229, 214, .085) var(--gx),
    transparent calc(var(--gx) + 19%));
  opacity: var(--lift);
  transition: opacity 180ms var(--ease-out);
}
/* nth-child(-n+3) only, the 4th child is the photo strip and scaling it left it half width */
.web-hero .hero-browser .browser-plate__rows span:nth-child(-n+3) {
  transform-origin: left center;
  transform: scaleX(var(--row-s, 1));
  transition: transform 420ms var(--spring), opacity 180ms var(--ease-out);
}
.web-hero .hero-browser .browser-plate__rows span:nth-child(1) { --row-s: .62; transition-delay: 0ms; }
.web-hero .hero-browser .browser-plate__rows span:nth-child(2) { --row-s: .48; transition-delay: 60ms; }
.web-hero .hero-browser .browser-plate__rows span:nth-child(3) { --row-s: .70; transition-delay: 120ms; }
.web-hero .hero-browser:hover .browser-plate__rows span:nth-child(-n+3),
.web-hero .hero-browser:focus-visible .browser-plate__rows span:nth-child(-n+3) { --row-s: 1; opacity: .85; }
/* the photo comes up out of the dark as the page "loads" */
.web-hero .hero-browser .browser-plate__rows span:nth-child(4) {
  transition: filter 520ms var(--ease-io) 150ms;
  filter: brightness(.52) contrast(1.06);
}
.web-hero .hero-browser:hover .browser-plate__rows span:nth-child(4),
.web-hero .hero-browser:focus-visible .browser-plate__rows span:nth-child(4) {
  filter: brightness(1) contrast(1.12);
}
/* the address bar takes a caret and fills */
.web-hero .hero-browser .browser-plate__bar { position: relative; overflow: hidden; }
.web-hero .hero-browser .browser-plate__bar::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: var(--on-air); opacity: .34;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 620ms var(--ease-io);
}
.web-hero .hero-browser:hover .browser-plate__bar::after,
.web-hero .hero-browser:focus-visible .browser-plate__bar::after { transform: scaleX(1); }
/* the live dot goes green-for-go the moment it loads */
.web-hero .hero-browser:hover .browser-plate__dots span:nth-child(1),
.web-hero .hero-browser:focus-visible .browser-plate__dots span:nth-child(1) {
  box-shadow: 0 0 0 3px rgba(214, 92, 82, .22);
}

/* scoped to this page only, oglasi and aplikacije reuse .web-hero and must not inherit these spans */
@media (min-width: 900px) {
  body[data-page="websites"] .web-hero .grid { align-items: start; }
  body[data-page="websites"] .web-hero h1         { grid-column: 1 / 8;  grid-row: 1; }
  body[data-page="websites"] .web-hero .lead      { grid-column: 1 / 6;  grid-row: 2; }
  body[data-page="websites"] .web-hero .body-text { grid-column: 1 / 5;  grid-row: 3; }
  body[data-page="websites"] .web-hero .hero-browser {
    grid-column: 8 / -1; grid-row: 1 / span 3;
    align-self: center; justify-self: stretch;
    max-width: none; margin-top: 0;
    margin-right: calc(-1 * var(--inset-r));
  }
}
@media (max-width: 900px) {
  .web-hero h1, .web-hero .lead, .web-hero .body-text,
  .web-hero .hero-browser{ grid-column: 1 / -1; margin: 24px 0 0; }
  /* reset the min-width spans here or the children collapse to a ~26px track */
  body[data-page="websites"] .web-hero h1,
  body[data-page="websites"] .web-hero .lead,
  body[data-page="websites"] .web-hero .body-text,
  body[data-page="websites"] .web-hero .hero-browser { grid-column: 1 / -1; grid-row: auto; margin-right: 0; }

  .web-hero .hero-browser { max-width: none; transform: none; --ar: 16/10; }
  .web-hero .hero-browser:active { transform: scale(.99); }
}
@media (prefers-reduced-motion: reduce) {
  .web-hero .hero-browser,
  .web-hero .hero-browser:active { transform: rotate(1.5deg); transition: none; }
  .web-hero .hero-browser::before { content: none; }
  .web-hero .hero-browser .browser-plate__rows span { transform: none; transition: none; filter: none; }
  .web-hero .hero-browser .browser-plate__bar::after { content: none; }
}
@supports not (transform-style: preserve-3d) {
  .web-hero .hero-browser { transform: rotate(1.5deg); }
}

.laptop-stage {
  position: sticky; top: 0; height: 100svh; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--gap); padding-inline: var(--inset-l) var(--inset-r);
  padding-block: clamp(64px, 11vh, 118px) clamp(18px, 3vh, 32px);
  align-items: center;

  overflow: clip;
}
.laptop-stage .offer-pin { grid-column: 1 / 5; grid-row: 1; z-index: 2; align-self: center; }
.offer-pin h2 { margin-bottom: clamp(20px, 3.4vh, 38px); }

.offer-pin ul { display: block; counter-reset: offer; }
.offer-pin li {
  counter-increment: offer;
  position: relative; padding: clamp(9px, 1.3vh, 15px) 0 clamp(9px, 1.3vh, 15px) 42px;
  color: var(--ash); line-height: 1.35;
  opacity: 0; transform: translateX(-14px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), color var(--dur-enter) linear;
}
.offer-pin li::before {
  content: "0" counter(offer);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .1em;
  color: var(--ash);
}

.offer-pin li + li::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--edge);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 420ms var(--ease-out);
}
.offer-pin li.shown { opacity: 1; transform: translateX(0); color: var(--chalk); }
.offer-pin li.shown::before { color: var(--on-air-hot); }
.offer-pin li.shown + li::after,
.offer-pin li.shown::after { transform: scaleX(1); }

.laptop-stage .plate-wrap {
  grid-column: 5 / 13; grid-row: 1; position: relative;
  height: 100%; min-height: 0; display: grid; place-items: center;
}

.laptop-stage .plate-wrap .laptop-seq {
  --fit-h: calc(100svh - clamp(64px, 11vh, 118px) - clamp(18px, 3vh, 32px) - 40px);
  width: min(100%, calc(var(--fit-h) * 683 / 624));
}

.laptop-stage .stage-cap {
  grid-column: 5 / 13; grid-row: 2; align-self: end; text-align: right;
  font-family: var(--f-mono); font-size: var(--t-stamp); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ash-dim);
}

.web-existing h2 { grid-column: 1 / 6; grid-row: 2; }

.web-existing .body-text:not(.closer) { grid-column: 1 / 6; grid-row: 3; margin-top: 20px; color: var(--ash); align-self: start; }
.web-existing__closer {
  grid-column: 1 / 9; grid-row: 1; margin-bottom: clamp(24px, 4vh, 52px);
  color: var(--ash); border-bottom: 1px solid var(--edge); padding-bottom: 18px;
}
.web-existing .slab-wrap { grid-column: 6 / 13; grid-row: 2 / 5; align-self: start; }

.web-existing .slab-wrap .frame-box {
  --ar: 2400/1600;
  box-shadow: -30px 30px 60px rgba(0,0,0,.4);
  transition: transform var(--dur-ui) var(--spring);
}
.web-existing .slab-wrap:hover .frame-box { transform: scale(1.012); }

.web-existing .fork {
  grid-column: 1 / 6; grid-row: 4; align-self: start;
  display: flex; flex-direction: column; gap: 14px; margin-top: 30px;
}
.web-existing .fork > div { padding: 20px; background: var(--bg-hi); border-radius: 4px; position: relative; }
.web-existing .fork .fork__b { margin-top: 0; }
.fork__num {
  display: block; margin-bottom: 10px; color: var(--accent);
  font-size: var(--t-stamp); letter-spacing: .18em;
}
@media (max-width: 900px) {
  .web-existing h2, .web-existing .body-text, .web-existing .slab-wrap,
  .web-existing__closer, .web-existing .fork { grid-column: 1 / -1; grid-row: auto; margin-top: 24px; }
  .web-existing .fork { grid-template-columns: 1fr; }
  .web-existing .fork .fork__a, .web-existing .fork .fork__b { grid-column: 1 / -1; margin-top: 0; }
}

.examples-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }

.examples-grid .example-frame { grid-column: span 6; margin-top: 0; }
@media (min-width: 1100px) { .examples-grid .example-frame { grid-column: span 4; } }
@media (max-width: 900px) {
  .examples-grid .example-frame { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .examples-grid { gap: 24px; }
}

.social-hero { position: relative; min-height: min(84svh, 675px); display: flex; flex-direction: column; justify-content: flex-start; }

.social-hero .crowd-plate {
  position: absolute; inset: 0; z-index: 0;
  --dot-crop-top: 0.34;
}
.social-hero .crowd-plate { --crowd-anchor: 88%; }
.social-hero .crowd-plate {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 82%, transparent 100%);
}

.social-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(10,8,6,.92) 0%, rgba(10,8,6,.74) 34%, rgba(10,8,6,.18) 62%, rgba(10,8,6,0) 84%);
}

.social-hero .body-text {
  position: relative; padding: 12px 16px 14px 18px;
}

.social-hero .body-text::before {
  content: ""; position: absolute; inset: -6px -10px -8px -12px; z-index: -1;
  border-radius: 2px;
  background: radial-gradient(120% 140% at 30% 50%,
    rgba(23, 19, 14, .90) 0%, rgba(23, 19, 14, .82) 55%, rgba(23, 19, 14, .34) 100%);
  pointer-events: none;
}
.social-hero h1 { text-shadow: none; }
.social-hero .lead { color: var(--chalk); text-shadow: none; }
.social-hero .body-text { text-shadow: none; }
.social-hero .hero-mono { justify-content: flex-start; grid-column: 1 / 4; }

.social-hero .grid { position: relative; z-index: 2; padding-top: clamp(120px, 18vh, 220px); }
.social-hero h1 { grid-column: 1 / 9; }
.social-hero .lead { grid-column: 1 / 6; margin-top: 24px; }
.social-hero .body-text { grid-column: 7 / 12; margin-top: 28px; }
@media (max-width: 900px) { .social-hero h1, .social-hero .lead, .social-hero .body-text, .social-hero .hero-mono { grid-column: 1 / -1; margin-top: 20px; } }

.social-offer .col-a { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 20px; }
.social-offer .col-a li { font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 0.8rem + 0.9vw, 1.5rem); line-height: 1.14; }
.social-offer .col-b { grid-column: 6 / 10; margin-top: 6px; display: flex; flex-direction: column; gap: 14px; }

.social-offer .col-a, .social-offer .col-b { grid-row: 1; }
.social-offer .phone-wrap { grid-row: 1 / 3; align-self: center; }
.social-offer .closer { grid-row: 2; align-self: start; }
.social-offer .phone-wrap {
  grid-column: 10 / 13; justify-self: center; align-self: start;
  line-height: 0; perspective: 1100px;
}

.social-offer .phone-render {

  display: block; width: min(19vw, 176px); height: auto;
  filter: drop-shadow(0 8px 12px rgba(23,19,14,.26));
  transform-origin: 50% 60%;
  will-change: transform;
}

/* kept small on purpose, bigger values read as a spin instead of weight */
@keyframes phone-turn {
  from { transform: rotateX(7deg)  rotateY(-15deg) rotateZ(-2.6deg) translateY(16px)  scale(.982); }
  50%  { transform: rotateX(1deg)  rotateY(-1deg)  rotateZ(.2deg)   translateY(0)     scale(1.004); }
  to   { transform: rotateX(-5deg) rotateY(13deg)  rotateZ(2.9deg)  translateY(-18px) scale(1.016); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .social-offer .phone-3d {
      animation: phone-turn linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .social-offer .phone-3d {
      transform:
        rotateX(calc(7deg - var(--vp, .5) * 12deg))
        rotateY(calc(-15deg + var(--vp, .5) * 28deg))
        rotateZ(calc(-2.6deg + var(--vp, .5) * 5.5deg))
        translateY(calc(16px - var(--vp, .5) * 34px))
        scale(calc(.982 + var(--vp, .5) * .034));
    }
  }
}
@media (max-width: 900px) {
  .social-offer .col-a, .social-offer .col-b, .social-offer .phone-wrap { grid-column: 1 / -1; margin: 20px 0 0; }

  .social-offer .col-a, .social-offer .col-b, .social-offer .closer, .social-offer .phone-wrap {
    grid-row: auto; align-self: auto;
  }
  .social-offer .phone-wrap { justify-self: center; margin-top: 34px; }
  .social-offer .phone-render { width: min(52vw, 240px); }
  .social-offer .phone-wrap { overflow: visible; }
}

.social-feel { position: relative; }

.social-offer .closer { margin-top: 28px; }

.social-feel h2 { grid-column: 1 / 7; grid-row: 1; }
.social-feel .body-text { grid-column: 1 / 7; grid-row: 2; margin-top: 20px; color: var(--ash); align-self: start; }

.social-feel .grid { grid-template-rows: auto auto 1fr; }

.social-feel .fan { grid-column: 7 / 13; grid-row: 1 / 4; position: relative; aspect-ratio: 100 / 86; margin-top: 0; align-self: center; }
.social-feel .fan .frame-plate-box {
  position: absolute; top: 3%; width: 40%; aspect-ratio: 9/16;
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--edge);
  box-shadow: 0 22px 44px rgba(0,0,0,.5);
  background-image: image-set(
    url("assets/crowd/crowd-halftone-invert.webp") type("image/webp"),
    url("assets/crowd/crowd-halftone-invert.png")  type("image/png"));

  background-size: auto 104%;
  background-repeat: no-repeat;
  transition: transform var(--dur-ui) var(--spring);
}

.social-feel .fan .fp1 { left: 0;   background-image: url("assets/crowd/story-a.webp"); transform: rotate(-4.5deg) translateY(6px); z-index: 1; }
.social-feel .fan .fp2 { left: 30%; background-image: url("assets/crowd/story-b.webp"); transform: rotate(0.5deg);                  z-index: 2; }
.social-feel .fan .fp3 { left: 58%; background-image: url("assets/crowd/story-c.webp"); transform: rotate(5deg) translateY(9px);    z-index: 3; }
.social-feel .fan:hover .fp1 { transform: rotate(-7deg) translateY(4px); }
.social-feel .fan:hover .fp3 { transform: rotate(7.5deg) translateY(8px); }
@media (prefers-reduced-motion: reduce) { .social-feel .fan .frame-plate-box { transition: none; } }
@media (max-width: 900px) {
  .social-feel h2, .social-feel .body-text, .social-feel .fan { grid-column: 1 / -1; grid-row: auto; margin-top: 20px; }
  .social-feel .fan { aspect-ratio: 100 / 62; }
}

.social-existing h2 { grid-column: 1 / 8; text-align: left; margin-left: 0; }
.social-existing .body-text { grid-column: 1 / 7; margin-top: 20px; margin-left: 0; }
.social-existing .fork { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: 36px; }
.social-existing .fork > div { padding: 20px; background: var(--bg-hi); border-radius: 4px; }

.social-existing.flush-top { padding-top: 0; }
@media (max-width: 900px) {
  .social-existing h2, .social-existing .body-text { grid-column: 1 / -1; }
  .social-existing .fork { grid-template-columns: 1fr; }
}

.examples-rail {
  display: flex; gap: 26px; overflow-x: auto;
  padding-inline: var(--inset); padding-right: 20vw; padding-bottom: 22px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.examples-rail .example-frame { flex: 0 0 auto; width: min(220px, 50vw); scroll-snap-align: start; }

.confirm { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.confirm[hidden] { display: none; }
.confirm__scrim {
  position: absolute; inset: 0; background: rgba(10, 8, 6, .74);
  opacity: 0; transition: opacity 260ms var(--ease-out);
}
.confirm.is-open .confirm__scrim { opacity: 1; }
.confirm__panel {
  position: relative; width: min(520px, 100%);
  background: var(--carbon); color: var(--chalk);
  border: 1px solid var(--ash-dim); border-radius: 4px;
  padding: clamp(22px, 3.4vw, 36px);
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity 300ms var(--ease-out), transform 420ms var(--spring);
}
.confirm.is-open .confirm__panel { opacity: 1; transform: none; }
.confirm__lamp {
  display: block; width: 34px; height: 5px; border-radius: 3px;
  background: var(--on-air); box-shadow: 0 0 14px var(--on-air); margin-bottom: 18px;
}
.confirm__title {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-h2);
  letter-spacing: -0.016em; line-height: 1.08; color: var(--chalk); max-width: 18ch;
}
.confirm__body { margin-top: 12px; font-size: var(--t-body); line-height: 1.6; color: var(--ash); max-width: 46ch; }
.confirm__fallback { margin-top: 16px; color: var(--ash); font-size: var(--t-meta); }
.confirm__mail { color: var(--chalk); text-underline-offset: 3px; }
.confirm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.confirm__copy {
  background: none; border: 1px solid var(--ash-dim); color: var(--ash);
  border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer;
  font-family: var(--f-mono); font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .08em;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform var(--dur-tap) var(--ease-out);
}
.confirm__copy:hover { color: var(--chalk); border-color: var(--chalk); }
.confirm__copy:active { transform: scale(.97); }
.confirm__copy.is-done { color: var(--on-air-hot); border-color: var(--on-air-hot); }
@media (prefers-reduced-motion: reduce) {
  .confirm__scrim, .confirm__panel { transition: none; opacity: 1; transform: none; }
}

.disclosure__panel {
  max-height: var(--collapsed, 4.5em); overflow: hidden; position: relative;
  transition: max-height 420ms var(--ease-io);
}
.disclosure__panel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.1em;
  background: linear-gradient(to bottom, transparent, var(--bg) 92%);
  opacity: 1; transition: opacity 260ms var(--ease-out); pointer-events: none;
}
.disclosure__panel.is-open { max-height: var(--expanded, 240em); }
.disclosure__panel.is-open::after { opacity: 0; }

.disclosure__panel--shut:not(.is-open)::after { opacity: 0; }
.disclosure__toggle {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 12px; min-height: 44px; padding: 8px 2px;
  background: none; border: 0; cursor: pointer; color: var(--fg-small-muted);
  font-family: var(--f-mono); font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .09em;
  transition: color var(--dur-ui) var(--ease-out);
}
.disclosure__toggle:hover { color: var(--fg); }
.disclosure__chev {
  width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 300ms var(--spring);
}
.disclosure__toggle[aria-expanded="true"] .disclosure__chev { transform: rotate(-135deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .disclosure__panel, .disclosure__chev { transition: none; }
}

:root { --vel: 0; }
h1, .stamp b {
  transform: skewY(calc(var(--vel) * -1.4deg)) scaleY(calc(1 + var(--vel) * 0.015));
  transform-origin: left center;
  will-change: transform;
}

h1.two-tone { transform: none; }
h1.two-tone > * { display: block; transform: skewY(calc(var(--vel) * -1.4deg)); transform-origin: left center; }

.btn, .disclosure__toggle {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 420ms var(--spring);
}

.btn:hover, .disclosure__toggle:hover { transition: none; }

@supports not (transform: skewY(1deg)) {
  h1, .stamp b, h1.two-tone > * { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  h1, .stamp b, h1.two-tone > *, .btn, .disclosure__toggle { transform: none; }
}

.services .service-media:not(.browser-plate):not(.shot-frame):not(.phone-object) {
  max-height: 19rem;
}
@media (max-width: 900px) {

  .services .service-media:not(.shot-frame):not(.phone-object) { max-height: 15rem; }
}

.web-existing .slab-wrap .frame-box { overflow: hidden; }

.slab-wrap { margin: 0; }
.slab-cap {
  margin-top: 10px; font-family: var(--f-mono); font-size: var(--t-code);
  letter-spacing: .06em; color: var(--fg-small-muted); max-width: 42ch;
}

/* the service + why numbers are the site's red accent (set at ~1011 / ~1151). the grey overrides
   that used to sit here were a same-specificity cascade bug that quietly greyed them out — removed
   so the intended red wins. .fork__num (other pages) stays ash. */
.fork__num { color: var(--ash); }

.nav-pill__links a, .nav-pill__word {
  min-height: 44px; display: inline-flex; align-items: center;
}

.site-footer .gc-9-13 { flex-wrap: wrap; }

.mailto-fallback span { color: var(--fg-small-muted); }

.browser-plate { overflow: hidden; }
.browser-plate { display: flex; flex-direction: column; }

.hero-home .lead, .hero-home .hero-mono {
  position: relative;
  padding: 14px 22px 16px 18px;

  margin-left: 0;
  border-radius: 3px;

  background: radial-gradient(140% 180% at 42% 50%,
    rgba(23,19,14,.95) 0%, rgba(23,19,14,.93) 72%, rgba(23,19,14,.78) 92%, rgba(23,19,14,0) 100%);
}
.hero-home .hero-mono { display: inline-flex; }
@media (min-width: 900px) {
  .hero-home .lead, .hero-home .hero-mono { margin-left: -18px; }
}
.hero-home h1 { text-shadow: 0 2px 26px rgba(10,8,6,.85), 0 0 60px rgba(10,8,6,.6); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .two-tone .ln { transform: none; }
  .nav-pill.hide { transform: none; }
  .work-tile { transform: none !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sound-toggle {
  display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--border);
  border-radius: 999px; min-height: 44px; padding: 0 16px; font-family: var(--f-mono); font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-small-muted); cursor: pointer;
}

.object-plate {
  position: relative; overflow: hidden;
  min-height: clamp(120px, 16vh, 210px);
  background:
    repeating-linear-gradient(0deg,  var(--edge) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--edge) 0 1px, transparent 1px 48px),
    var(--pitch);
}
.object-plate > svg { display: none; }
.object-plate::after {
  content: attr(data-slug);
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ash);
}

.object-plate::before {
  content: ""; position: absolute; right: 14px; top: 14px; width: 18px; height: 18px;
  border-top: 1px solid var(--on-air); border-right: 1px solid var(--on-air); opacity: .8;
}
.service-media.frame-box { min-height: clamp(160px, 22vh, 280px); }
.service-media > svg { display: none; }

.object-3d { position: relative; display: grid; place-items: center; background: none; }
.object-3d > svg { display: none; }

.cam-still__body {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
}

.laptop-seq { position: relative; width: 100%; aspect-ratio: 4 / 3; }

/* no scroll-entrance below 900px, the section is sticky-scrubbed and a view-timeline entry would fight the overflow:hidden wrap */
.laptop-seq__body {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 30px 46px rgba(0,0,0,.62));
  transform: scale(var(--push, 1)); transform-origin: 50% 62%;
}

.laptop-seq__screen {

  position: absolute; left: 17.86%; top: 6.41%; width: 56.22%; height: 49.68%;
  z-index: 2; overflow: hidden; pointer-events: none;
  clip-path: polygon(0% 1.29%, 100% 0%, 98.18% 97.74%, 1.82% 100%);
  border-radius: 2px;

  transform: scale(var(--push, 1));

  transform-origin: 57.16% 111.90%;

  background: linear-gradient(168deg, #23262b 0%, #14171b 46%, #0d0f12 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 7px rgba(0,0,0,.42);
}

.laptop-seq__glass {

  position: absolute; inset: -4% -3%; z-index: 0; display: block;
  backface-visibility: hidden;
  background-image: image-set(
    url("assets/examples/lukasz-home.webp") type("image/webp"),
    url("assets/examples/lukasz-home.png")  type("image/png"));

  background-size: cover; background-position: 50% 0;
  background-repeat: no-repeat;
  background-color: #0d0f12;

  filter: contrast(1.02) brightness(1.04) saturate(0.94);

  transform:
    perspective(900px)
    rotateX(-5.03deg)
    rotate(-0.84deg)
    scaleY(clamp(0.012, var(--crt, 0), 1));
  transform-origin: 50% 50%;
  opacity: clamp(0, var(--crt, 0) * 2.6, 1);
}

.laptop-seq__screen::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,252,246,.16) 0 1px, rgba(255,255,255,0) 1px),
    linear-gradient(148deg,
      rgba(255,252,246,.15) 0%, rgba(255,252,246,.06) 28%,
      rgba(255,255,255,0) 56%);
}

.laptop-seq__scan {
  position: absolute; inset: 0; z-index: 1; display: block; mix-blend-mode: screen;
  background: linear-gradient(180deg,
    rgba(255,246,228,0) 44%, rgba(255,246,228,var(--flare, 0)) 50%, rgba(255,246,228,0) 56%);
  opacity: clamp(0, var(--crt, 0), 1);
}

.laptop-seq__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(120% 126% at 50% 44%, rgba(0,0,0,0) 48%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.54) 100%);
  opacity: clamp(0, var(--crt, 0), 1);
}

@supports not (opacity: clamp(0, (var(--crt, 0) - 0.5) / 0.3, 1)) {
  .laptop-seq__glass { transform: none; opacity: 1; }
  .laptop-seq__scan  { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .laptop-seq__glass  { transform: none; opacity: 1; }
  .laptop-seq__scan   { opacity: 1; }
  .laptop-seq__body   { transform: none; }
  .laptop-seq__screen { transform: none; }
}

.crowd-dissolve {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
  color: var(--chalk);
  caret-color: var(--on-air-hot);
  transform: translate3d(0, var(--crowd-y, 0), 0) scale(1.02);
}
section[data-theme="paper"] .crowd-dissolve {
  color: var(--ink);
  caret-color: var(--on-air-ink);
}

.crowd-plate.has-dissolve::before {
  opacity: 0; visibility: hidden;
  transition: opacity 260ms linear, visibility 0s linear 260ms;
}

.flash-pop {
  position: absolute; inset: -12%; z-index: 3; pointer-events: none;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 50% 45%,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 22%, rgba(255,255,255,0) 62%);
}
.flash-pop.go { animation: flashPop 620ms cubic-bezier(.16,1,.3,1) 1; }
@keyframes flashPop {
  0%   { opacity: 0;   transform: scale(.72); }
  7%   { opacity: 1;   transform: scale(1.02); }
  22%  { opacity: .55; transform: scale(1.06); }
  100% { opacity: 0;   transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {

  .crowd-dissolve { transform: none; }
}

/* contact */
.contact-form {
  grid-column: 1 / 7; display: grid; gap: clamp(12px, 1vw, 18px);
  grid-template-columns: 1fr 1fr; margin-top: clamp(20px, 1.7vw, 30px);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.contact-form label {
  font-family: var(--f-mono); font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted);
}
.contact-form input, .contact-form textarea {
  background: rgba(0,0,0,.045); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .8em .9em; font-size: var(--t-body); min-height: 48px;
  /* recessed well — the field reads as a machined slot, not a flat outline */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
  transition: border-color var(--dur-ui) var(--ease-out),
              box-shadow var(--dur-ui) var(--ease-out),
              background-color var(--dur-ui) var(--ease-out);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:hover, .contact-form textarea:hover { border-color: var(--fg-muted); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus);
  /* accent halo answers the focus with the brand colour, not just a system outline */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.07),
              0 0 0 4px color-mix(in srgb, var(--accent, var(--focus)) 20%, transparent);
}
.form-note { grid-column: 1 / -1; color: var(--fg-muted); margin: 0; }
.form-actions {
  grid-column: 1 / -1; display: flex; align-items: center;
  gap: clamp(20px, 1.7vw, 30px); flex-wrap: wrap; margin-top: 10px;
}
.mailto-fallback { color: var(--fg-body); }

/* form goes single-column at 900 — the same point the contact section grid collapses — so it is
   never a cramped 2-column form in the 700-899 tablet band. */
@media (max-width: 900px) {
  .contact-form { grid-template-columns: 1fr; grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .section .grid > *, .contact-grid > * { grid-column: 1 / -1 !important; }
  .section .grid > * { --oy: 0px !important; }
}

section[data-theme="pitch"] {
  --bg: var(--pitch); --bg-hi: var(--void);
  --fg: var(--chalk); --fg-body: var(--ash); --fg-muted: var(--ash-dim);
  --fg-small-muted: var(--ash);
  --fg-fade: var(--ash); --link: var(--chalk); --rule: var(--edge-pitch);
  --accent-ink: var(--on-air); --accent: var(--on-air); --border: var(--ash-dim);
  --btn-fill: var(--on-air-hot); --btn-text: var(--void);
  --focus: var(--chalk);
  background: var(--bg); color: var(--fg-body);
  padding-block: var(--pad-dark);
}
section[data-theme="pitch"] h1, section[data-theme="pitch"] h2, section[data-theme="pitch"] h3 { color: var(--fg); }

.bar {
  height: 1px; background: var(--rule); width: 100vw;
  margin-inline: calc(50% - 50vw); pointer-events: none;
}
section[data-theme="dark"] .bar { background: var(--edge); }
section[data-theme="pitch"] .bar { background: var(--edge-pitch); }

.ticker--removed, .ticker {
  position: relative; overflow: hidden; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); padding-block: 10px;
}
.ticker__track {
  display: flex; gap: 0; width: max-content;
  font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-small-muted);
}
.ticker__track > span { display: inline-flex; align-items: center; gap: 12px; padding-right: 12px; white-space: nowrap; }
.ticker__track > span::after { content: "●"; color: var(--on-air); font-size: .72em; padding-left: 12px; }
.ticker__track > span:last-child::after { content: none; }
.ticker__track.repeat {
  animation: ticker-slide var(--ticker-dur, 42s) linear infinite;
}
@keyframes ticker-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {

  .ticker__track.repeat { animation: none; }
  .ticker { overflow-x: auto; }
}
@media (max-width: 640px) { .ticker { padding-block: 8px; } }

section[data-theme="dark"] .btn:hover,
section[data-theme="pitch"] .btn:hover {
  background: var(--on-air-hot); filter: brightness(1.1);
  box-shadow: 0 0 0 1px var(--chalk) inset, 0 10px 22px rgba(0,0,0,.28);
}

.object-3d {
  position: relative; overflow: hidden;
  background-color: var(--pitch);
  background-image: radial-gradient(120% 92% at 50% 108%,
    color-mix(in srgb, var(--chalk) 9%, transparent) 0%,
    color-mix(in srgb, var(--chalk) 3%, transparent) 44%,
    transparent 72%);
}

.service-media.object-3d { --cam-lit: 0; }
.service-media.object-3d::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--on-air), inset 0 0 26px -6px var(--on-air);
  opacity: calc(var(--cam-lit, 0) * 0.85);
}
.service-media.object-3d .cam-lamp {
  position: absolute; right: 12px; top: 12px; z-index: 4;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--on-air); box-shadow: 0 0 12px var(--on-air);
  opacity: calc(var(--cam-lit, 0) * 1);
}
@media (prefers-reduced-motion: reduce) {
  .service-media.object-3d::before, .service-media.object-3d .cam-lamp { opacity: 0; }
}

.object-3d::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 2px;
  transform-origin: left; transform: scaleX(var(--ready, 0));
  background: var(--on-air); transition: transform 120ms linear;
}
.object-3d[data-ready="1"]::after, .object-3d[data-tier="low"]::after { content: none; }
@media (prefers-reduced-motion: reduce) { }

/* 168svh gives the lid and the seven lines enough runway to land without racing */
.laptop-stage-section { min-height: min(232svh, 1980px); }
.laptop-stage-section[data-theme="dark"] { background: var(--pitch); }

@supports not (position: sticky) {
  .laptop-stage-section { min-height: auto; }
  .laptop-stage { position: static; height: auto; padding-block: var(--pad-dark); }
}
/* svh not vh, mobile browser chrome resizes vh mid-scroll which would jump the frame */
@media (max-width: 900px) {

  .laptop-stage-section { min-height: min(185svh, 1300px); }
  .laptop-stage {
    position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    grid-template-columns: none; grid-template-rows: none;
    /* extra top clearance, the nav pill is fixed and this section stays pinned under it the whole scroll */
    padding-block: clamp(78px, 11svh, 96px) clamp(14px, 2.4svh, 24px);
    gap: clamp(8px, 1.6svh, 16px);
  }

  .laptop-stage .offer-pin,
  .laptop-stage .plate-wrap,
  .laptop-stage .stage-cap { grid-column: unset; grid-row: unset; }

  .laptop-stage .offer-pin { flex: 0 0 auto; }
  .laptop-stage .offer-pin h2 { margin-bottom: clamp(8px, 1.6svh, 18px); }
  .laptop-stage .offer-pin li {
    padding-block: clamp(4px, 0.8svh, 9px);
  }

  /* letterboxed to whatever height the list leaves, sized off the list not the plate */
  .laptop-stage .plate-wrap {
    grid-column: unset; grid-row: unset;
    flex: 1 1 auto; height: auto; min-height: 0; margin-top: 0;
    display: grid; place-items: center; overflow: hidden;
  }
  /* Width-driven, never height-driven. `height:100%` with aspect-ratio 4/3 makes
     the browser back-compute the width, and on a 390px phone that came out 562px:
     the laptop was laid out mostly off-screen to the right. `html{overflow-x:clip}`
     then hid it from scrollWidth, so an overflow check said the page was fine while
     the thing was invisible. Sizing from width cannot do that; the svh term is only
     a cap so a tall list cannot push it out of the sticky viewport. */
  /* explicit width, or the percentage below has nothing to resolve against: the
     grid column sizes to its item and the item sized to the column, which is
     circular and collapses both to zero */
  .laptop-stage .plate-wrap { width: 100%; min-width: 0; }
  .laptop-stage .plate-wrap .laptop-seq {
    width: min(100%, calc(48svh * 4 / 3));
    height: auto;
    max-width: 100%;
  }
  .laptop-stage .stage-cap { text-align: left; margin-top: 12px; }
}

.laptop-seq .lamp {
  position: absolute; right: 18.89%; top: 9.29%; z-index: 3; width: 8px; height: 8px; border-radius: 50%;
  background: var(--on-air); opacity: .12; transition: opacity 140ms var(--ease-out);
}
.laptop-seq[data-lit="1"] .lamp { opacity: 1; box-shadow: 0 0 12px var(--on-air); }

.examples-grid .example-frame { height: auto; aspect-ratio: 16 / 9; }

@media (max-width: 480px) {
  .services .service,
  .services .service--link.asym { grid-column: 1 / -1 !important; }
  .service-media { width: 100%; max-width: 100%; }
  .laptop-stage .plate-wrap { height: auto; }

  .work-tile .frame-num { bottom: -20px; font-size: 10px; }
}

.glow-surface > .glow, .service-media > .glow, .reel-plate > .glow, .btn > .glow,
.rek-wave > .glow, .frame-plate-box > .glow,
.frame-box > .glow, .laptop-seq > .glow, .example-frame > .glow {
  position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  background:
    radial-gradient(220px 220px at var(--gx, 50%) var(--gy, 50%),
      var(--glow-tint, rgba(214, 92, 82, .95)) 0%,
      color-mix(in srgb, var(--glow-tint, var(--on-air-hot)) 38%, transparent) 42%,
      transparent 74%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--go, 0);
  transition: opacity 260ms var(--ease-out);
  will-change: opacity;
}

.glow-surface > .glow::after, .service-media > .glow::after, .reel-plate > .glow::after, .btn > .glow::after,
.rek-wave > .glow::after, .frame-plate-box > .glow::after,
.frame-box > .glow::after, .laptop-seq > .glow::after, .example-frame > .glow::after {
  content: ""; position: absolute; inset: -26px; border-radius: inherit;
  background: radial-gradient(300px 300px at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--glow-tint, var(--on-air-hot)) 16%, transparent) 0%, transparent 68%);
}
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .glow-surface > .glow,
  .frame-box > .glow, .laptop-seq > .glow, .example-frame > .glow {
    background: none; padding: 0;
    box-shadow: inset 0 0 0 1px var(--glow-tint, var(--on-air-hot));
  }
  .glow-surface > .glow::after { display: none; }
}
:root { --glow-tint: rgba(214, 92, 82, .95); }
section[data-theme="paper"] { --glow-tint: rgba(120, 58, 40, .9); }
@media (prefers-reduced-motion: reduce) { .glow-surface > .glow, .frame-box > .glow, .laptop-seq > .glow, .example-frame > .glow { display: none; } }

html { scrollbar-width: thin; scrollbar-color: var(--ash-dim) transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--ash-dim) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ash-dim) 78%, transparent);
  border: 3px solid transparent; background-clip: content-box; border-radius: 99px;
  transition: background-color var(--dur-ui) var(--ease-out);
}
::-webkit-scrollbar-thumb:hover { background: var(--ash); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--on-air-hot); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
[data-theme="paper"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--stone) 85%, transparent); background-clip: content-box; }
[data-theme="paper"] ::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); background-clip: content-box; }

html.cursor-custom, html.cursor-custom * { cursor: none; }

/* custom cursor, --cx/--cy rewritten from JS every frame.
   @property types them as lengths so the transform resolves numerically instead of re-parsing a string */
@property --cx       { syntax: "<length>"; inherits: false; initial-value: -100px; }
@property --cy       { syntax: "<length>"; inherits: false; initial-value: -100px; }
@property --cs       { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --cstretch { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --csquash  { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --ca       { syntax: "<angle>";  inherits: false; initial-value: 0deg; }

.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; opacity: 0;
  transform: translate3d(var(--cx), var(--cy), 0) scale(var(--cs));
}
.cursor-dot {
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--on-air-hot); box-shadow: 0 0 8px var(--on-air);
  /* width/height not transitioned on purpose, animating them fights the element's own motion */
  transition: opacity 160ms linear;
}
.cursor-ring {
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 1.5px solid #fff;
  /* difference blend measured against a dual-tone ring, no real frame time difference, keeping it */
  mix-blend-mode: difference;

  transform:
    translate3d(var(--cx), var(--cy), 0)
    rotate(var(--ca))
    scale(var(--cs))
    scale(var(--cstretch), var(--csquash))
    rotate(calc(-1 * var(--ca)));
  transition: opacity 160ms linear, border-width 220ms var(--ease-out),
              border-radius 260ms var(--ease-out);
}

.cursor-ring::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px;
  transform: translate(-50%, -50%) scale(calc(1 / var(--cs)));
  background:
    linear-gradient(#fff, #fff) center / 1px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 1px no-repeat;
  opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--spring);
}
.cursor-ring[data-state="hot"]::after,
.cursor-ring[data-state="drag"]::after { opacity: .85; }
html.cursor-on .cursor-dot, html.cursor-on .cursor-ring { opacity: 1; }

.cursor-ring[data-state="hot"]  { --cs: 1.9;  border-width: 1px; border-radius: 7px; }
.cursor-ring[data-state="drag"] { --cs: 2.2;  border-width: 1px; border-radius: 7px; border-style: dashed; }
.cursor-ring[data-state="text"] { --cs: 0.42; }
.cursor-ring[data-state="down"] { --cs: 0.82; border-width: 2px; }
.cursor-dot[data-state="text"]  { width: 2px; height: 21px; margin: -10.5px 0 0 -1px; border-radius: 1px; }
.cursor-dot[data-state="down"]  { --cs: 1.9; }
@media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { display: none; } }

.browser-plate {
  position: relative; overflow: hidden;
  background: var(--pitch);
  display: flex; flex-direction: column; gap: 0;
  padding: 14px 14px 0;
}
.browser-plate__dots { display: flex; gap: 6px; padding-bottom: 10px; }
.browser-plate__dots span { width: 8px; height: 8px; border-radius: 50%; }
.browser-plate__dots span:nth-child(1) { background: var(--on-air); }
.browser-plate__dots span:nth-child(2) { background: var(--ash-dim); }
.browser-plate__dots span:nth-child(3) { background: var(--ash-dim); }
.browser-plate__bar {
  height: 22px; margin-bottom: 12px; border-radius: 999px;
  background: var(--carbon); border: 1px solid var(--edge);
}

.browser-plate__rows { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; flex: 1 1 auto; min-height: 0; }
.browser-plate__rows span { height: 9px; border-radius: 2px; background: var(--ash-dim); opacity: .55; flex: 0 0 auto; }
.browser-plate__rows span:nth-child(1) { width: 82%; }
.browser-plate__rows span:nth-child(2) { width: 94%; }
.browser-plate__rows span:nth-child(3) { width: 66%; }

.browser-plate__rows span:nth-child(4) {
  width: 100%; min-height: 48px; margin-top: 8px; flex: 1 1 auto; opacity: 1;
  background:
    linear-gradient(0deg, rgba(23,19,14,.62), rgba(23,19,14,.62)),
    url("assets/crowd/crowd-halftone-invert.webp");
  background-size: auto, cover;
  background-position: 0 0, 42% 46%;
}

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  transform-origin: left; transform: scaleX(var(--p, 0));
  background: var(--on-air);
  pointer-events: none;
  will-change: transform;
}
.scroll-progress[data-theme="paper"] { background: var(--ink); }

/* off on phones, a pinned hairline reads as a rendering fault there and the scrollbar already shows progress */
@media (max-width: 899px) {
  .scroll-progress { display: none; }
}
.scroll-progress::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--p, 0) * 100%);
  width: 8px; height: 8px; transform: translate(-50%, -50%);
  background: inherit;
}

.notfound .hero-mono { margin-top: 4vh; }
.notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 32px; }

.rek-offer .offer-pin { margin-top: clamp(14px, 2.2vh, 26px); }

.rek-offer .offer-pin li { opacity: 1; transform: none; color: var(--chalk); }
.rek-offer .offer-pin li::before { color: var(--on-air-hot); }
.rek-offer .offer-pin li + li::after { transform: scaleX(1); }
.rek-offer__closer { align-self: end; color: var(--ash); }

.rek-voice h2 { margin-bottom: clamp(14px, 2.2vh, 24px); }
.rek-voice .body-text { color: var(--fg-body); }
.rek-voice__note {
  margin-top: 18px; color: var(--fg-small-muted);
  border-left: 2px solid var(--accent); padding-left: 14px;

  align-self: start;
}
.rek-voice .waveform-contact {
  align-self: center; min-height: clamp(140px, 22vh, 230px);
  grid-row: 1 / 4;
}

.rek-how h2 { margin-bottom: clamp(18px, 2.8vh, 34px); }
.rek-steps { list-style: none; margin: 0; padding: 0; }
.rek-step {
  display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(12px, 1.6vw, 28px); align-items: baseline;
  padding: clamp(16px, 2.4vh, 26px) 0;
}
.rek-step + .rek-step { border-top: 1px solid var(--edge); }
.rek-step__n { color: var(--on-air-hot); font-size: var(--t-meta); letter-spacing: .12em; }
.rek-step h3 {
  font-size: clamp(1rem, 0.82rem + 0.72vw, 1.375rem);
  line-height: 1.1; letter-spacing: -0.012em; color: var(--chalk);
}
.rek-step .body-text { color: var(--ash); margin: 0; }
@media (max-width: 760px) {
  .rek-step { grid-template-columns: 42px minmax(0, 1fr); row-gap: 6px; }
  .rek-step .body-text { grid-column: 2; }
}

.rek-wave { align-self: center; justify-self: stretch; }

.rek-wave__svg {
  display: block; width: 100%; aspect-ratio: 1440 / 520;
  color: var(--ink-muted); opacity: .85;
}
.rek-wave__svg rect { transition: opacity var(--dur-ui) var(--ease-out); }
.rek-wave__cap {
  margin-top: 14px; text-align: right; color: var(--fg-small-muted);
  font-size: var(--t-stamp); letter-spacing: .24em; text-transform: uppercase;
}

.rek-plate { display: none; }
@media (max-width: 900px) {
  .rek-wave { grid-column: 1 / -1; margin-top: 22px; }
  .rek-offer__closer { grid-column: 1 / -1; margin-top: 22px; }
}

body[data-page="oglasi"] .web-hero .lead {
  font-size: clamp(1.0625rem, 0.8rem + 1.05vw, 1.75rem);
  max-width: 20ch;

  align-self: start;
}
body[data-page="oglasi"] .web-hero .body-text { max-width: 46ch; }

body[data-page="oglasi"] .web-hero h1 { grid-row: 1; }
body[data-page="oglasi"] .web-hero .lead { grid-row: 2; }
body[data-page="oglasi"] .web-hero .body-text { grid-row: 3; align-self: start; }
body[data-page="oglasi"] .rek-wave { grid-row: 2 / 4; }
@media (max-width: 900px) {
  body[data-page="oglasi"] .web-hero h1,
  body[data-page="oglasi"] .web-hero .lead,
  body[data-page="oglasi"] .web-hero .body-text,
  body[data-page="oglasi"] .rek-wave { grid-row: auto; }
}

.work-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }

.work-rail { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

.services .service-media.reel-plate {
  --ar: 16/9; max-width: none; position: relative; overflow: hidden;
  background-color: var(--bg-hi);
  background-image:
    linear-gradient(0deg, rgba(23,19,14,.10), rgba(23,19,14,.10)),
    image-set(url("assets/crowd/crowd-halftone.webp") type("image/webp"),
              url("assets/crowd/crowd-halftone.png")  type("image/png"));

  background-size: auto, cover;
  background-position: 0 0, 22% 42%;
  background-repeat: no-repeat;
  filter: contrast(1.04) brightness(1.06);
}

.services .service { transition: transform 420ms var(--spring); }
.services .service:hover { transform: translateY(-3px); }
.services .service:hover .svc-num { color: var(--on-air-hot); }
.services .service > .svc-num { transition: color 260ms var(--ease-out); }
.services .service--link h3 { position: relative; display: inline-block; }
.services .service--link h3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 460ms var(--ease-io);
}
.services .service:hover .service--link h3::after,
.services .service--link:focus-visible h3::after { transform: scaleX(1); }

/* will-change scoped to the pending reveal only and released once it lands, not left standing */
.w-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  [data-words]:not(.in-view) .w-word { will-change: transform, opacity; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-words] .w-word {
    opacity: 0; transform: translateY(0.42em) rotate(0.4deg);
    --w-delay: min(calc(var(--wi, 0) * 26ms), var(--stagger-cap));
    transition: opacity var(--dur-enter) var(--ease-out) var(--w-delay),
                transform var(--dur-enter) var(--ease-io) var(--w-delay);
  }
  [data-words].in-view .w-word { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .rek-step, .offer-pin li, .facts-row {
    --r-delay: min(calc(var(--ri, 0) * 30ms), var(--stagger-cap));
    transition: opacity var(--dur-enter) var(--ease-out) var(--r-delay),
                transform var(--dur-long) var(--ease-io) var(--r-delay);
  }
  .rek-step:not(.in-view) { opacity: 0; transform: translateY(14px); }
  .rek-step.in-view { opacity: 1; transform: none; }
}

.nav-pill__links a { position: relative; }
.nav-pill__links a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 7px; height: 1.5px;
  background: currentColor; opacity: .9;
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 340ms var(--ease-io);
}
.nav-pill__links a:hover::after { transform: scaleX(1); }
.nav-pill__links a[aria-current="page"]::after { transform: scaleX(1); background: var(--on-air); }

.social-feel .fan .frame-plate-box { transition: transform 520ms var(--spring), filter 380ms linear; }
.social-feel .fan .frame-plate-box:hover { filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
  .services .service, .services .service--link h3::after,
  .nav-pill__links a::after, .social-feel .fan .frame-plate-box,
  .w-word, .rek-step { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* language menu */
.lang-picker { position: relative; flex: 0 0 auto; }
.lang-picker__btn {
  display: flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 10px 0 9px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: inherit; cursor: pointer;
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: .08em; text-transform: uppercase;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.nav-pill[data-theme="dark"] .lang-picker__btn,
.mobile-sheet .lang-picker__btn,
.site-footer .lang-picker__btn { background: var(--carbon); }
.lang-picker__btn:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.nav-pill[data-theme="dark"] .lang-picker__btn:hover,
.mobile-sheet .lang-picker__btn:hover,
.site-footer .lang-picker__btn:hover { background: color-mix(in srgb, var(--chalk) 16%, transparent); }
.lang-picker__icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: .82; }
.lang-picker__code { font-weight: 700; }
.lang-picker__chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); opacity: .6;
  transition: transform var(--dur-ui) var(--ease-out);
}
.lang-picker__btn[aria-expanded="true"] .lang-picker__chev { transform: rotate(-135deg) translate(-2px, -2px); }

.lang-picker__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  margin: 0; padding: 6px; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  width: max-content; max-width: min(340px, calc(100vw - 20px));
  border-radius: 12px; border: 1px solid var(--ink-muted);
  background: var(--paper-hi);
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(23,19,14,.28);

  max-height: calc(100vh - 20px); overflow-y: auto; overscroll-behavior: contain;

  transform: translateY(var(--lang-rise, -8px)) scale(.96);
  transform-origin: top right;
  opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 340ms var(--spring);
}
.lang-picker__menu.is-open { opacity: 1; transform: translateY(0) scale(1); }

.lang-picker__menu:not(.is-open) { pointer-events: none; }

.lang-picker .lang-picker__menu.is-measuring {
  transform: none; transition: none; opacity: 0;
}

.lang-picker__menu[data-place="up"] {
  top: auto; bottom: calc(100% + 10px);
  --lang-rise: 8px; transform-origin: bottom right;
}
@media (max-width: 360px) {

  .lang-picker__menu { max-width: calc(100vw - 12px); }
  .lang-picker__menu [role="option"] { padding: 9px 6px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-picker__menu { transition: none; transform: none; }
}
.nav-pill[data-theme="dark"] .lang-picker__menu,
.mobile-sheet .lang-picker__menu,
.site-footer .lang-picker__menu {
  background: var(--carbon); border-color: var(--ash-dim); color: var(--chalk);
  --badge-on: #D76157;
}

.mobile-sheet .lang-picker__menu { left: 0; right: auto; transform-origin: top left; }
.mobile-sheet .lang-picker__menu[data-place="up"] { transform-origin: bottom left; }
.lang-picker__menu[hidden] { display: none; }
.lang-picker__menu [role="option"] {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  color: inherit; cursor: pointer; text-align: left;
  text-decoration: none;
  font-family: var(--f-text); font-size: 14px;
  transition: background-color 140ms linear;
}
.lang-picker__menu [role="option"] span {
  font-family: var(--f-mono); font-size: var(--t-stamp); letter-spacing: .1em;
  opacity: .68; min-width: 30px;
}
.lang-picker__menu [role="option"]:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.nav-pill[data-theme="dark"] .lang-picker__menu [role="option"]:hover,
.mobile-sheet .lang-picker__menu [role="option"]:hover,
.site-footer .lang-picker__menu [role="option"]:hover { background: color-mix(in srgb, var(--chalk) 12%, transparent); }
.lang-picker__menu [role="option"][aria-selected="true"] { font-weight: 700; }

.lang-picker__menu { --badge-on: #B03931; }
.lang-picker__menu [role="option"][aria-selected="true"] span { color: var(--badge-on); opacity: 1; }

@media (max-width: 860px) {
  .nav-pill .lang-picker { display: none; }
}

.shot-frame {
  --ar: 16/9; overflow: hidden; position: relative;
  border: 1px solid var(--border); border-radius: 3px;
  background: #0A0A0B;
  box-shadow: 0 26px 52px rgba(23,19,14,.24);
  align-self: center;
}
.shot-frame picture, .shot-frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  opacity: .96;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.shot-frame:hover img { opacity: 1; }

.shot-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(237,229,214,.30) .7px, transparent 1.1px);
  background-size: 4px 4px; mix-blend-mode: overlay; opacity: .22;
}
@media (prefers-reduced-motion: reduce) { .shot-frame img { transition: none; } }

@keyframes print-develop {
  from { filter: contrast(.55) brightness(1.22) saturate(.6); }
  60%  { filter: contrast(1) brightness(1) saturate(1); }
  to   { filter: contrast(1) brightness(1) saturate(1); }
}
@keyframes print-wash {
  from { transform: translateX(-120%); opacity: .5; }
  70%  { opacity: .28; }
  to   { transform: translateX(160%); opacity: 0; }
}
.shot-frame::before {
  content: ""; position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%, rgba(237,229,214,.05) 38%, rgba(237,229,214,.16) 50%,
    rgba(237,229,214,.05) 62%, transparent 100%);
  opacity: 0;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .shot-frame {
      animation: print-develop linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }
    .shot-frame::before {
      animation: print-wash linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 46%;
    }
  }
}
.web-hero .shot-frame { margin-top: clamp(18px, 2.6vh, 34px); }
body[data-page="aplikacije"] .web-hero h1 { grid-row: 1; }
body[data-page="aplikacije"] .web-hero .lead { grid-row: 2; align-self: start; }
body[data-page="aplikacije"] .web-hero .body-text { grid-row: 3; align-self: start; }
body[data-page="aplikacije"] .web-hero .shot-frame { grid-row: 2 / 5; }

body[data-page="aplikacije"] .web-hero .grid { grid-template-rows: auto auto auto 1fr; }

.app-proof__fig { margin: 0; align-self: center; }
.app-proof__cap {
  margin-top: 10px; text-align: right; color: var(--fg-small-muted);
  font-size: var(--t-stamp); letter-spacing: .12em;
}
.app-proof h2 { margin-bottom: clamp(14px, 2.2vh, 24px); }
.app-proof .body-text { color: var(--fg-body); }

@media (max-width: 900px) {
  body[data-page="aplikacije"] .web-hero h1,
  body[data-page="aplikacije"] .web-hero .lead,
  body[data-page="aplikacije"] .web-hero .body-text,
  body[data-page="aplikacije"] .web-hero .shot-frame { grid-row: auto; }
  .web-hero .shot-frame, .app-proof__fig { grid-column: 1 / -1; margin-top: 22px; }
}

.rek-radio h2 { align-self: start; }
.rek-radio .body-text { color: var(--ash); align-self: start; }
/* The paragraph above this list sits in an 876px grid area but carries the
   ~626px readability measure every .body-text has, so it stops 250px short of
   its own column edge while the list ran the full width — two elements in the
   same column with different right edges, which is what he saw as "put weirdly
   and not cleanly". Capping the list at the same measure gives them one shared
   right edge. `rek-tv` was already the only section on the page where those two
   edges agreed, which is why it reads clean and this one did not. */
.rek-radio__list { margin-top: clamp(22px, 3.4vh, 44px); max-width: 62ch; }
.rek-radio__list ul { columns: 2; column-gap: clamp(28px, 4vw, 72px); }
.rek-radio__list li { break-inside: avoid; opacity: 1; transform: none; color: var(--chalk); }
.rek-radio__list li::before { color: var(--on-air-hot); }
.rek-radio__list li + li::after { transform: scaleX(1); }
@media (max-width: 760px) {
  .rek-radio__list ul { columns: 1; }
  .rek-radio h2, .rek-radio .body-text { grid-column: 1 / -1; }
}

/* The last legal paragraph sat 102px above the footer — the section's own bottom
   padding was 58px, barely more than the 44px gap between blocks, so the closing
   text read as crowded against the dark block rather than finished. His note
   2026-08-25: "the text on the bottom of pravne informacije was not moved down
   from the edge of the bottom block." A closing edge needs more room than an
   internal one, not the same. */
section.legal { padding-bottom: clamp(96px, 12vh, 190px); }
.legal h1 { margin-bottom: 6px; }
.legal .lead { margin-bottom: 40px; }
.legal-block { margin-bottom: 44px; }
.legal-block h2 {
  font-size: var(--t-h3); margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.legal-block .body-text + .body-text { margin-top: 12px; }

.legal-block .legal-list + .body-text { margin-top: 16px; }
.legal-dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 10px 22px; margin: 0; }
.legal-dl dt {
  font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-small-muted);
}
.legal-dl dd { margin: 0; color: var(--fg); overflow-wrap: break-word; }

.legal-dl dd.is-pending { color: var(--fg-small-muted); font-style: italic; }
.legal-list { margin: 14px 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 10px; }
.legal-list li { color: var(--fg); }
.site-footer .legal-link { display: inline-block; margin-top: 10px; }
@media (max-width: 900px) {
  .legal-block { grid-column: 1 / -1; }
  .legal-dl { grid-template-columns: 1fr; gap: 4px 0; }
  .legal-dl dd { margin-bottom: 12px; }
}

.services .service-media.phone-object {
  aspect-ratio: auto; --ar: auto; max-height: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; overflow: visible;
  perspective: 1100px;
}

.phone-render--flip {
  display: block; width: min(15vw, 172px); height: auto;

  filter: drop-shadow(0 8px 12px rgba(23,19,14,.26));
  transform-origin: 50% 60%;
}
@keyframes phone-turn-flip {
  from { transform: rotateY(16deg) rotateZ(1.4deg) translateY(16px); }
  to   { transform: rotateY(-6deg) rotateZ(-1.1deg) translateY(-14px); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .phone-3d--alt {
      animation: phone-turn-flip linear both;
      animation-timeline: view();

      animation-range: entry 0% exit 100%;
    }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .phone-3d--alt {
      transform:
        rotateY(calc(16deg - var(--vp, .5) * 22deg))
        rotateZ(calc(1.4deg - var(--vp, .5) * 2.5deg))
        translateY(calc(16px - var(--vp, .5) * 30px));
    }
  }
}
@media (max-width: 900px) {
  .phone-render--flip { width: min(42vw, 190px); }
  .services .service-media.phone-object { min-height: 0; padding-block: 8px; }
}

/* phone screen, content goes inside the glass, reflection sits on top */
.phone-glass {
  position: absolute; left: 0; top: 0;
  width: 407px; height: 940px;
  transform-origin: 0 0;
  transform: scale(var(--phone-scale, 0.288)) matrix3d(1.15239308,-0.05893212,0.00000000,-0.00014141,0.00615472,1.30719486,0.00000000,0.00002090,0.00000000,0.00000000,1.00000000,0.00000000,28.93932905,87.51748751,0.00000000,1.00000000);
  border-radius: 34px;
  overflow: hidden;
  pointer-events: none;

  background: #0B0907;
}

.phone-glass::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: 30px;
  background:
    radial-gradient(125% 82% at 50% 50%,
      rgba(0,0,0,0) 58%, rgba(0,0,0,.5) 90%, rgba(0,0,0,.78) 100%),
    linear-gradient(148deg,
      rgba(237,229,214,.10) 0%, rgba(237,229,214,.03) 24%,
      rgba(0,0,0,0) 52%, rgba(0,0,0,.26) 100%),
    radial-gradient(120% 78% at 22% 8%, rgba(237,229,214,.09) 0%, transparent 56%);
}

.phone-glass::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity: .5; mix-blend-mode: multiply;
}

.phone-screen {
  position: absolute; inset: 0;
  display: block; overflow: hidden;
  border-radius: 30px;
  padding: 34px 34px 44px;
}

.phone-plate {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/crowd/crowd-halftone-invert.webp");
  background-size: 150% auto;
  background-position: 50% 46%;
  background-repeat: no-repeat;
  opacity: .82;
  filter: contrast(1.06) brightness(1.04);
  transform-origin: 50% 50%;
}

.phone-prog {
  position: absolute; left: 34px; right: 34px; top: 34px; z-index: 3;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 7px;
}
.phone-prog i {
  position: relative; display: block; border-radius: 4px; overflow: hidden;
  background: rgba(237, 229, 214, .26);
}
.phone-prog i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--chalk); transform-origin: 0 50%; transform: scaleX(0);
}

.phone-mark {
  position: absolute; left: 34px; top: 58px; z-index: 3;
  font-family: var(--f-mono); font-size: 20px; letter-spacing: .34em;
  color: rgba(237, 229, 214, .74);
}

.phone-slug {
  position: absolute; left: 34px; right: 34px; bottom: 44px; z-index: 3;
  display: grid;
}
.phone-slug__row {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  opacity: 0;
}
.phone-slug__row b {
  font-family: var(--f-display); font-weight: 800;
  font-size: 62px; line-height: .98; letter-spacing: -0.02em;
  color: var(--chalk); text-transform: lowercase;
}
.phone-slug__row em {
  font-family: var(--f-mono); font-style: normal;
  font-size: 22px; letter-spacing: .12em;
  color: var(--on-air);
}

.phone-slug__row:nth-child(2) em::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 9px;
  border-radius: 50%; background: var(--on-air); vertical-align: baseline;
}

@media (prefers-reduced-motion: reduce) {

  .phone-slug__row:first-child { opacity: 1; }
  .phone-prog i:first-child::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .phone-plate  { animation: phone-drift 12s linear infinite; }
  .phone-slug__row { animation: phone-slug 12s steps(1, end) infinite; }
  .phone-slug__row:nth-child(2) { animation-delay: 4s; }
  .phone-slug__row:nth-child(3) { animation-delay: 8s; }
  .phone-prog i::after { animation: phone-fill 12s linear infinite; }
  .phone-prog i:nth-child(2)::after { animation-delay: 4s; }
  .phone-prog i:nth-child(3)::after { animation-delay: 8s; }

  .phone-3d:not(.in-view) .phone-plate,
  .phone-3d:not(.in-view) .phone-slug__row,
  .phone-3d:not(.in-view) .phone-prog i::after { animation-play-state: paused; }
}
@keyframes phone-fill {
  0%, 0.01% { transform: scaleX(0); }
  33.33%    { transform: scaleX(1); }
  100%      { transform: scaleX(1); }
}
@keyframes phone-slug {
  0%, 33.33% { opacity: 1; }
  33.34%, 100% { opacity: 0; }
}

@keyframes phone-drift {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  33%  { transform: scale(1.07) translate3d(-2.2%, -1.4%, 0); }
  66%  { transform: scale(1.03) translate3d(1.8%, -2.6%, 0); }
  100% { transform: scale(1.00) translate3d(0, 0, 0); }
}

@property --crt   { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --flare { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --push  { syntax: "<number>"; inherits: true; initial-value: 1; }

@supports (animation-timeline: view()) and (animation-range: contain 0%) {
  @media (prefers-reduced-motion: no-preference) {

    .laptop-stage-section { view-timeline: --laptop block; }

    @keyframes laptop-wake {
      0%    { --crt: 0;    --flare: 0;    --push: 1; }
      12%   { --crt: 0;    --flare: 0;    --push: 1.004; }
      34%   { --crt: 0.5;  --flare: 0.55; --push: 1.012; }
      65%   { --crt: 1;    --flare: 0;    --push: 1.024; }
      100%  { --crt: 1;    --flare: 0;    --push: 1.04; }
    }
    .laptop-stage .laptop-seq {
      animation: laptop-wake linear both;
      animation-timeline: --laptop;
      animation-range: contain 0% contain 100%;
    }


    @keyframes laptop-wake-phone {
      0%    { --crt: 0;    --flare: 0;    --push: 0.955; }
      12%   { --crt: 0.05; --flare: 0.18; --push: 0.972; }
      34%   { --crt: 0.62; --flare: 0.78; --push: 1.008; }
      65%   { --crt: 1;    --flare: 0.14; --push: 1.058; }
      100%  { --crt: 1;    --flare: 0;    --push: 1.092; }
    }
    /* contain's range collapses when the section is taller than the viewport, measured ~33px of scroll here on phone.
       entry/exit spans the whole pass instead and can't collapse the same way */
    @media (max-width: 899px) {
      .laptop-stage .laptop-seq {
        animation-name: laptop-wake-phone;
        animation-range: entry 0% exit 100%;
      }
      /* cascade re-spread over the real range, same 18%-wide bands stepping 7% */
      .laptop-stage .offer-pin li:nth-child(1) { animation-range: cover 18% cover 36%; }
      .laptop-stage .offer-pin li:nth-child(2) { animation-range: cover 25% cover 43%; }
      .laptop-stage .offer-pin li:nth-child(3) { animation-range: cover 32% cover 50%; }
      .laptop-stage .offer-pin li:nth-child(4) { animation-range: cover 39% cover 57%; }
      .laptop-stage .offer-pin li:nth-child(5) { animation-range: cover 46% cover 64%; }
      .laptop-stage .offer-pin li:nth-child(6) { animation-range: cover 53% cover 71%; }
      .laptop-stage .offer-pin li:nth-child(7) { animation-range: cover 60% cover 78%; }
    }

    .laptop-seq .lamp {
      opacity: clamp(0, (var(--crt) - 0.55) * 24, 1);
      box-shadow: 0 0 12px color-mix(in srgb, var(--on-air) calc(clamp(0, (var(--crt) - 0.55) * 24, 1) * 100%), transparent);
      transition: none;
    }

    @keyframes pin-reveal {
      from { opacity: 0; transform: translateX(-14px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .laptop-stage .offer-pin li {
      animation: pin-reveal cubic-bezier(.22,1,.36,1) both;
      animation-timeline: --laptop;
    }
    /* 18% bands stepping 7% apart so each line is still moving when the next starts */
    .laptop-stage .offer-pin li:nth-child(1) { animation-range: contain 20% contain 38%; }
    .laptop-stage .offer-pin li:nth-child(2) { animation-range: contain 27% contain 45%; }
    .laptop-stage .offer-pin li:nth-child(3) { animation-range: contain 34% contain 52%; }
    .laptop-stage .offer-pin li:nth-child(4) { animation-range: contain 41% contain 59%; }
    .laptop-stage .offer-pin li:nth-child(5) { animation-range: contain 48% contain 66%; }
    .laptop-stage .offer-pin li:nth-child(6) { animation-range: contain 55% contain 73%; }
    .laptop-stage .offer-pin li:nth-child(7) { animation-range: contain 62% contain 80%; }
  }
}

.social-feel .fan .frame-plate-box { display: block; }
.fan-rail {
  position: absolute; left: 5.5%; right: 5.5%; top: 3.2%;
  display: flex; gap: 3.5%; pointer-events: none;
}
.fan-rail i {
  flex: 1 1 0; height: 3px; border-radius: 2px;
  background: rgba(237,229,214,.28);
}
.fan-rail i:first-child { background: var(--chalk); }

.fan-rail i:nth-child(2) {
  background: linear-gradient(to right, var(--chalk) 0 var(--fan-progress, 45%),
                                        rgba(237,229,214,.28) var(--fan-progress, 45%) 100%);
}
.fp1 { --fan-progress: 12%; }
.fp2 { --fan-progress: 46%; }
.fp3 { --fan-progress: 78%; }

.fan-kind {
  position: absolute; left: 5.5%; top: 8.5%;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(237,229,214,.92);
}
.fan-kind b {
  width: 7px; height: 7px; border-radius: 50%; background: var(--on-air-hot);
  flex: 0 0 auto;
}
.fan-cap {
  position: absolute; left: 5.5%; right: 5.5%; bottom: 12.5%;
  padding-left: 11px; border-left: 3px solid var(--on-air-hot);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(15px, 1.5vw, 22px); line-height: 1.05;
  color: var(--chalk);

  overflow-wrap: anywhere; hyphens: auto;
}
.fan-mark {
  position: absolute; left: 5.5%; bottom: 6%;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em;
  color: rgba(237,229,214,.62);
}
@media (max-width: 900px) {
  .fan-kind { font-size: 9px; }
  .fan-mark { font-size: 8.5px; }
}

.seam--rule { height: clamp(38px, 5vh, 64px); display: grid; place-items: center; }
.seam--rule::after {
  content: ""; width: min(100%, calc(1180px + var(--gap))); height: 1px;
  background: linear-gradient(to right,
    transparent 0%, var(--edge) 18%, var(--edge) 82%, transparent 100%);
  opacity: .55;
}

body.sheet-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

          /* tips through a slant like the desktop version, kept smaller since the element is bigger in frame here */
    @keyframes phone-turn-mobile {
      from { transform: rotateX(6deg)  rotateY(-12deg) rotateZ(-2.1deg) translateY(12px)  scale(.986); }
      50%  { transform: rotateX(1deg)  rotateY(-1deg)  rotateZ(.2deg)   translateY(0)     scale(1.004); }
      to   { transform: rotateX(-4deg) rotateY(11deg)  rotateZ(2.4deg)  translateY(-14px) scale(1.014); }
    }
    @keyframes phone-turn-flip-mobile {
      from { transform: rotateX(-5deg) rotateY(11deg)  rotateZ(2.2deg)  translateY(13px)  scale(.988); }
      50%  { transform: rotateX(0deg)  rotateY(2deg)   rotateZ(0deg)    translateY(0)     scale(1.004); }
      to   { transform: rotateX(6deg)  rotateY(-8deg)  rotateZ(-2.0deg) translateY(-12px) scale(1.012); }
    }
    .social-offer .phone-3d {
      animation-name: phone-turn-mobile;
      animation-range: entry 0% exit 100%;
    }
    .phone-3d--alt {
      animation-name: phone-turn-flip-mobile;
      animation-range: entry 0% exit 100%;
    }

    .shot-frame {
      animation-range: entry 0% cover 70%;
    }
    .shot-frame::before {
      animation-range: entry 0% cover 78%;
    }

    .fader-line { animation-range: entry 0% cover 90%; }

    @keyframes laptop-arrive-mobile {
      from { transform: translateY(14px) scale(.985); opacity: .7; }
      to   { transform: translateY(0)    scale(1);    opacity: 1; }
    }
    .laptop-seq {
      animation-name: laptop-arrive-mobile;
      animation-range: entry 0% cover 55%;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {

  @keyframes plate-drift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.035) translate3d(-0.6%, -0.8%, 0); }
  }
  .hero-crowd-bleed,
  .social-hero .crowd-plate {
    animation: plate-drift 24s cubic-bezier(.45,0,.55,1) infinite alternate;
    will-change: transform;
  }

  @keyframes line-set {
    from { opacity: 0; transform: translate3d(0, 14px, 0); clip-path: inset(0 0 100% 0); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translate3d(0, 0, 0);    clip-path: inset(0 0 -10% 0); }
  }
  .hero-content .hero-mono,
  .hero-content h1,
  .hero-content .lead,
  .hero-content .btn,
  .web-hero h1,
  .web-hero .lead,
  .social-hero h1,
  .social-hero .lead {
    animation: line-set 900ms cubic-bezier(.22,1,.36,1) both;
  }

      /* stagger runs under the splash and finishes before it lifts, timed off the measured splash duration not JS */
  .hero-content .hero-mono { animation-delay: 0.10s; }
  .hero-content h1         { animation-delay: 0.18s; }
  .hero-content .lead      { animation-delay: 0.26s; }
  .hero-content .btn       { animation-delay: 0.34s; }
  .web-hero h1, .social-hero h1       { animation-delay: 0.12s; }
  .web-hero .lead, .social-hero .lead { animation-delay: 0.24s; }

  @keyframes pill-drop {
    from { opacity: 0; transform: translate3d(0, -14px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  /* backwards, not both. `both` keeps the last keyframe's transform applied for
     the life of the page, which silently outranks .nav-pill.hide and stopped the
     pill ever hiding on scroll. backwards still covers the 0.04s delay. */
  .nav-pill { animation: pill-drop 620ms cubic-bezier(.22,1,.36,1) backwards 0.04s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content .hero-mono, .hero-content h1, .hero-content .lead, .hero-content .btn,
  .web-hero h1, .web-hero .lead, .social-hero h1, .social-hero .lead,
  .nav-pill { animation: none; opacity: 1; clip-path: none; transform: none; }
}

.onair {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 10px 0 0; font-family: var(--f-mono); font-size: var(--t-stamp);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-small-muted);
}
.onair__lamp {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ash-dim);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.onair[data-live="1"] .onair__lamp {
  background: var(--on-air-hot);
  box-shadow: 0 0 9px var(--on-air-hot), inset 0 0 0 1px rgba(0,0,0,.25);
}
.onair[data-live="1"] .onair__state { color: var(--fg-body); }
.onair__time { opacity: .72; letter-spacing: .08em; }
.onair__time b { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .onair[data-live="1"] .onair__lamp { animation: tally 3.2s steps(2, jump-none) infinite; }
}

.site-footer .foot-col a,
.mobile-sheet nav a {
  position: relative;

  width: fit-content; max-width: 100%;
  transition: color var(--dur-ui) var(--ease-out);
}
.site-footer .foot-col a::after,
.mobile-sheet nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--on-air-hot);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.site-footer .foot-col a:hover,
.site-footer .foot-col a:focus-visible,
.mobile-sheet nav a:hover,
.mobile-sheet nav a:focus-visible { color: var(--fg); }
.site-footer .foot-col a:hover::after,
.site-footer .foot-col a:focus-visible::after,
.mobile-sheet nav a:hover::after,
.mobile-sheet nav a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .site-footer .foot-col a::after,
  .mobile-sheet nav a::after { transition: none; }
}

@media print {

  :root,
  section[data-theme="dark"], section[data-theme="paper"], section[data-theme="pitch"],
  .site-footer, body {
    --void: #fff; --carbon: #fff; --pitch: #fff; --paper: #fff; --paper-hi: #fff;
    --bg: #fff; --bg-hi: #fff;
    --chalk: #000; --ink: #000;
    --fg: #000; --fg-body: #1a1a1a; --fg-muted: #444; --fg-small-muted: #333;
    --ash: #333; --ash-dim: #666; --edge: #bbb; --border: #bbb; --rule: #bbb;
    --on-air: #000; --on-air-hot: #000; --accent: #000; --accent-ink: #000;
    background: #fff !important;
    color: #000 !important;
  }
  body { font-size: 11pt; line-height: 1.45; }

  .nav-pill, .mobile-sheet, .boot-screen, .scroll-progress, .skip-link,
  .footer-dial, .lang-picker, .sound-toggle, .menu-toggle, .cursor-ring,
  .hero-canvas-wrap, .hero-crowd-bleed, .crowd-plate, .crop-marks,
  .seam, .work-rail-wrap, .fan, .phone-wrap, .phone-object, .laptop-stage,
  .object-plate, .onair { display: none !important; }

  .shot-frame { break-inside: avoid; border: 1px solid #bbb; }
  img { max-width: 100% !important; height: auto !important; filter: none !important; }

  a[href^="http"]::after  { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="mailto:"]::after { content: " (" attr(data-print-mail) ")"; }

  a[href^="tel:"]::after    { content: " (" attr(data-print-tel) ")"; font-size: 9pt; color: #555; }
  a[href^="#"]::after, a[href$=".html"]::after { content: ""; }

  h1, h2, h3 { break-after: avoid; color: #000 !important; }
  p, li, dd, dt { orphans: 3; widows: 3; }
  .legal-block, .legal-dl { break-inside: avoid; }
  section, .section { padding-block: 12pt !important; overflow: visible !important; }

  *, *::before, *::after {
    animation: none !important; transition: none !important;
    transform: none !important; box-shadow: none !important;
  }
  @page { margin: 16mm 14mm; }
}

@media (forced-colors: active) {
  .onair__lamp, .live-dot, .nav-pill__bars span { forced-color-adjust: none; }
  .shot-frame, .frame-box { border: 1px solid CanvasText; }
  .btn, .lang-picker__btn, .menu-toggle { border: 1px solid ButtonText; }
}

/* television, a section of the commercials page, not a page of its own */
.rek-tv .rek-tv__lead { margin-top: 0; align-self: end; }
.rek-tv__set { margin-top: clamp(28px, 4vh, 56px); align-self: start; }
.rek-tv__body { margin-top: clamp(28px, 4vh, 56px); }
.rek-tv__list { margin-top: 22px; }
.rek-tv__note { margin-top: 18px; color: var(--fg-small-muted); }
@media (max-width: 900px) {
  .rek-tv h2, .rek-tv .rek-tv__lead, .rek-tv__set,
  .rek-tv__body, .rek-tv__list, .rek-tv__note { grid-column: 1 / -1; }
  .rek-tv__set { margin-top: 24px; }
}

.tv-3d { position: relative; display: block; width: 100%; }
.tv-render { display: block; width: 100%; height: auto; }

/* the glass, taken off the rendered pixels, the whole front of the set */
.tv-screen {
  position: absolute;
  left: 0; top: 0;
  width: 99.93%; height: 89.61%;
  overflow: hidden;
  background: #060605;
  container-type: inline-size;
}
.tv-screen > * { position: absolute; inset: 0; }

/* 1. the test card, a grey step wedge with one on-air bar, not rainbow bars */
.tv-bars { display: grid; grid-template-columns: repeat(7, 1fr); }
.tv-bars i { display: block; }
.tv-bars i:nth-child(1) { background: #C9C2B4; }
.tv-bars i:nth-child(2) { background: #A9A296; }
.tv-bars i:nth-child(3) { background: #8A8478; }
.tv-bars i:nth-child(4) { background: #6B665C; }
.tv-bars i:nth-child(5) { background: #4C4841; }
.tv-bars i:nth-child(6) { background: #2E2B26; }
.tv-bars i:nth-child(7) { background: var(--on-air); }

/* 2. academy leader */
.tv-count { display: grid; place-items: center; opacity: 0; }
.tv-count b {
  grid-area: 1 / 1; opacity: 0;
  font-family: var(--f-mono); font-weight: 400;
  font-size: 46cqw; line-height: 1; color: var(--chalk);
}
.tv-count::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  width: 29cqw; height: 29cqw; margin: -14.5cqw 0 0 -14.5cqw;
  border: 1px solid rgba(237,229,214,.42); border-radius: 50%;
}
/* the sweep hand, the half of a leader everyone recognises */
.tv-count::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1px; height: 29px; height: 14.5cqw;
  background: rgba(237,229,214,.42);
  transform-origin: 50% 100%; transform: translate(-50%, -100%);
}

/* 3. the spot itself: title-safe marks, the slug, then the end card */
.tv-spot { opacity: 0; display: grid; place-items: center; }
.tv-safe {
  position: absolute; inset: 5%;
  border: 1px solid rgba(237,229,214,.14);
}
.tv-safe::after {
  content: ""; position: absolute; inset: 5.55%;
  border: 1px dashed rgba(237,229,214,.10);
}
.tv-slug, .tv-end {
  grid-area: 1 / 1; opacity: 0;
  font-family: var(--f-display); font-weight: 800;
  font-size: 13cqw; line-height: 1; letter-spacing: -0.02em;
  color: var(--chalk); text-transform: lowercase;
}
.tv-end { font-family: var(--f-mono); font-weight: 400; font-size: 9cqw; letter-spacing: .3em; text-transform: none; }

/* 4. running timecode, bottom left, with the on-air lamp */
.tv-tc {
  inset: auto auto 6% 6%; display: flex; align-items: center; gap: 1.6cqw;
  font-family: var(--f-mono); font-size: 4.2cqw; color: rgba(237,229,214,.8);
}
.tv-lamp { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--on-air); flex: 0 0 auto; }
.tv-tc__reel { display: block; height: 1em; overflow: hidden; }
.tv-tc__reel i { display: block; height: 1em; font-style: normal; }

/* the glass: reflection and vignette over the picture, same as the phone */
.tv-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 56%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.76) 100%),
    linear-gradient(158deg, rgba(237,229,214,.09) 0%, rgba(237,229,214,.02) 22%,
      rgba(0,0,0,0) 50%, rgba(0,0,0,.24) 100%);
}
.tv-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
  opacity: .55; mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .tv-bars { opacity: 0; }
  .tv-spot, .tv-slug { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .tv-bars  { animation: tv-bars 14s linear infinite; }
  .tv-count { animation: tv-count 14s linear infinite; }
  .tv-count b:nth-child(1) { animation: tv-digit 14s steps(1, end) infinite; animation-delay: 3.5s; }
  .tv-count b:nth-child(2) { animation: tv-digit 14s steps(1, end) infinite; animation-delay: 4.4s; }
  .tv-count b:nth-child(3) { animation: tv-digit 14s steps(1, end) infinite; animation-delay: 5.3s; }
  .tv-spot  { animation: tv-spot 14s linear infinite; }
  .tv-slug  { animation: tv-slug 14s linear infinite; }
  .tv-end   { animation: tv-end 14s linear infinite; }
  .tv-lamp  { animation: tally 2.4s steps(2, jump-none) infinite; }
  .tv-tc__reel i:first-child { animation: tv-tc 10s steps(10, end) infinite; }
  .tv-3d:not(.in-view) .tv-bars, .tv-3d:not(.in-view) .tv-count,
  .tv-3d:not(.in-view) .tv-count b, .tv-3d:not(.in-view) .tv-spot,
  .tv-3d:not(.in-view) .tv-slug, .tv-3d:not(.in-view) .tv-end,
  .tv-3d:not(.in-view) .tv-tc__reel i:first-child { animation-play-state: paused; }
}
@keyframes tv-bars  { 0%, 22% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes tv-count { 0%, 23% { opacity: 0; } 25%, 44% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes tv-digit { 0% { opacity: 1; } 6.4% { opacity: 0; } 100% { opacity: 0; } }
@keyframes tv-spot  { 0%, 45% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes tv-slug  { 0%, 50% { opacity: 0; } 54%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes tv-end   { 0%, 86% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes tv-tc    { to { transform: translateY(-10em); } }

/* a 3.48:1 plate in a phone-shaped frame wants a shorter stage, not more zoom */
@media (max-width: 900px) {
  .hero-stage { height: 64svh; }
  .social-hero { min-height: min(58svh, 500px); }
  .social-hero .crowd-plate { --crowd-zoom: 1; --crowd-anchor: 68%; }
  .social-hero .grid { padding-top: clamp(84px, 12vh, 132px); }
}

/* was sizing off the image alone, a slow decode let the grid stretch it and spilled the timecode reel */
.tv-3d { aspect-ratio: 1356 / 847; }
/* picture has no intrinsic height, height:100% on the img inside it is indefinite.
   wrapper is the block, aspect-ratio does the shaping */
.tv-3d picture { display: block; }
.tv-render { display: block; width: 100%; height: auto; }
.rek-tv__set { align-self: start; min-width: 0; }

/* plain fallback first, cq unit second, so a browser without container queries still gets a readable screen */
.tv-screen { font-size: 15px; font-size: 4.4cqw; }
.tv-count b { font-size: 92px; font-size: 46cqw; }
.tv-slug { font-size: 26px; font-size: 13cqw; }
.tv-end { font-size: 18px; font-size: 9cqw; }
.tv-tc { font-size: 9px; font-size: 4.2cqw; }
.tv-lamp { width: 5px; height: 5px; width: 2.2cqw; height: 2.2cqw; }
.tv-tc { gap: 4px; gap: 1.6cqw; }
.tv-count::after {
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  width: 42cqw; height: 42cqw; margin: -21cqw 0 0 -21cqw;
}
/* one row, always, the reel is the thing that spilled */
.tv-tc__reel { height: 1em; line-height: 1; overflow: hidden; }
.tv-tc__reel i { height: 1em; line-height: 1; }

@media (max-width: 900px) {
  /* the TV leads on a phone: full width, above the words that describe it */
  .rek-tv__set { margin-top: 20px; }
  .tv-screen { font-size: 4.6cqw; }
}

/* placed on the title-safe rectangle, sized off the frame height not its width */
.tv-count b { font-size: 34px; font-size: 17cqw; }
.tv-slug, .tv-end {
  grid-area: unset; position: absolute;
  left: 10%; right: 10%; bottom: 16%;
  text-align: left;
}
.tv-slug { font-size: 15px; font-size: 6.6cqw; line-height: .98; }
.tv-end {
  bottom: auto; top: 50%; transform: translateY(-50%);
  text-align: center;
  font-size: 11px; font-size: 5.2cqw; letter-spacing: .34em;
}
.tv-spot { display: block; }
/* station ident, top right on the title-safe line */
.tv-spot::after {
  content: "AUDIO 1";
  position: absolute; right: 10%; top: 9%;
  font-family: var(--f-mono); font-size: 8px; font-size: 3.4cqw;
  letter-spacing: .26em; color: rgba(237,229,214,.55);
}
/* timecode sits on the title-safe line too */
.tv-tc { inset: auto auto 9% 10%; }

@media (prefers-reduced-motion: no-preference) {
  .tv-count::before { animation: tv-sweep 3s linear infinite; }
  .tv-3d:not(.in-view) .tv-count::before { animation-play-state: paused; }
}
@keyframes tv-sweep { to { transform: translate(-50%, -100%) rotate(360deg); } }

/* explicit rows so the three blocks stack against each other, not against the TV */
@media (min-width: 901px) {
  .rek-tv .grid { align-items: start; }
  .rek-tv h2            { grid-row: 1; }
  .rek-tv .rek-tv__lead { grid-row: 1; align-self: end; }
  .rek-tv__set          { grid-row: 2 / span 3; }
  .rek-tv__body         { grid-row: 2; margin-top: 0; }
  .rek-tv__list         { grid-row: 3; }
  .rek-tv__note         { grid-row: 4; align-self: start; }
}

@media (min-width: 901px) {
  .rek-tv h2            { grid-column: 1 / 5; }
  .rek-tv .rek-tv__lead { max-width: 34ch; margin-top: 0; }
  .rek-tv__list         { margin-top: 14px; }
  .rek-tv__note         { margin-top: 26px; }
}

/* was 4.2cqw, bigger than the slug on a broadcast monitor, and the reel scrolled the last item off */
.tv-tc { font-size: 7px; font-size: 2.2cqw; gap: 3px; gap: 1.1cqw; }
.tv-lamp { width: 4px; height: 4px; width: 1.4cqw; height: 1.4cqw; }
@keyframes tv-tc { to { transform: translateY(-9em); } }

/* one AUDIO 1 on the screen, not two */
.tv-spot::after { content: none; }

/* a sentence, not a stamp */
.rek-tv__note { text-transform: none; letter-spacing: .01em; }

/* asset re-cropped to the object, the image box is the television now so there's no margin to compensate for */
@media (min-width: 901px) {
  .rek-tv .grid { align-items: start; }
  .rek-tv h2            { grid-column: 1 / 5;  grid-row: 1; }
  .rek-tv .rek-tv__lead { grid-column: 5 / 10; grid-row: 1; align-self: end; max-width: 34ch; margin: 0; }
  .rek-tv__set          { grid-column: 1 / 8;  grid-row: 2; }
  .rek-tv__col          { grid-column: 8 / 13; grid-row: 2; align-self: stretch; }
  .rek-tv__col {
    display: flex; flex-direction: column; justify-content: space-between;
    gap: clamp(24px, 3vh, 44px);
  }
  .rek-tv__col > * { margin: 0; }
  .rek-tv__col .rek-tv__list { margin: 0; }
}

/* radio reads down one column beside its heading instead of jumping back to column 1 */
.rek-radio__list { margin-top: clamp(22px, 3vh, 38px); }

@media (max-width: 900px) {
  .rek-tv__col { display: block; }
  .rek-tv__col > * + * { margin-top: 22px; }
}

@media (min-width: 901px) {
  /* the set carried a top margin that pushed the row 36px above the television */
  .rek-tv__set { margin-top: 0; }
  /* the lead drops below the heading's baseline instead of sharing its line */
  .rek-tv .rek-tv__lead { align-self: start; margin-top: clamp(46px, 5.4vh, 78px); }
}

/* 89.61% of the set is the bottom of the glass, not the feet of the stand */
@media (min-width: 901px) {
  .rek-tv__col { align-self: start; height: 89.61%; }
  /* the heading drops to meet the line beside it */
  .rek-tv h2 { margin-top: clamp(46px, 5.4vh, 78px); }
}

/* type sits at the foot of the stage, so the stage sets the gap, not padding */
.hero-stage { height: 63svh; }
.social-hero .grid { padding-top: clamp(64px, 8vh, 116px); }
@media (max-width: 900px) {
  .hero-stage { height: 56svh; }
  .social-hero .grid { padding-top: clamp(48px, 6vh, 76px); }
}

/* stage now reaches near the fold instead of leaving a third of the screen empty under the type.
   hero runs its own CSS timeline so it starts instantly instead of waiting on site.js to split the words */

.hero-home .hero-stage { height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .hero-home .hero-content [data-words] .w-word {
    opacity: 1; transform: none; transition: none; will-change: auto;
    animation: hero-word-rise 440ms var(--ease-out) both;
    animation-delay: calc(var(--wi, 0) * 18ms);
  }
  .hero-home .hero-content .two-tone {
    transition: none; will-change: auto;
    animation: hero-line-rise var(--dur-long) var(--ease-io) both 40ms;
  }
  @keyframes hero-word-rise {
    from { opacity: 0; transform: translateY(0.34em); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes hero-line-rise {
    from { clip-path: inset(-0.18em 0 100% 0); transform: translateY(0.10em); }
    to   { clip-path: inset(-0.18em 0 -0.18em 0); transform: none; }
  }
}

/* canvas only swaps once a frame is fully decoded, so a half-loaded sequence never blanks the laptop */
.laptop-seq__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 30px 46px rgba(0,0,0,.62));
  transform: scale(var(--push, 1)); transform-origin: 50% 62%;
}
.laptop-seq[data-seq="canvas"] .laptop-seq__body { visibility: hidden; }

/* wash lives on a pseudo-element inset past the text so the falloff lands in mid-air, not on a visible edge.
   legibility comes mostly from the text-shadow, this just kills the sparkle on the halftone underneath */
.hero-home .lead, .hero-home .hero-mono {
  position: relative; border-radius: 0; padding: 0; background: none;
  /* two tight layers instead of one wide one, a single 30px blur band read as a solid slab */
  text-shadow: 0 0 2px rgba(10,8,6,.92), 0 2px 13px rgba(10,8,6,.86);
}
/* pure black only, never --void, it's lighter than the plate's dark areas and shows up as a grey box */
.hero-home .lead::before, .hero-home .hero-mono::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -44px -140px -48px -120px;
  background: radial-gradient(50% 50% at 46% 50%,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.78) 42%,
    rgba(0,0,0,.54) 66%,
    rgba(0,0,0,.19) 86%,
    rgba(0,0,0,0)   100%);
}
@media (min-width: 900px) {
  .hero-home .lead, .hero-home .hero-mono { margin-left: 0; }
}
@supports not (inset: -44px) {
  .hero-home .lead::before, .hero-home .hero-mono::before {
    top: -44px; right: -140px; bottom: -48px; left: -120px;
  }
}
/* backwards fill-mode drops the clip once the entry wipe finishes, forwards would leave the wash clipped forever */
@media (prefers-reduced-motion: no-preference) {
  .hero-home .hero-content .hero-mono,
  .hero-home .hero-content .lead { animation-fill-mode: backwards; }
  .hero-home .lead::before,
  .hero-home .hero-mono::before { animation: hero-wash-in 620ms var(--ease-out) 880ms both; }
  @keyframes hero-wash-in { from { opacity: 0; } to { opacity: 1; } }
}

/* three padding steps, assigned by what a section is for, not by which theme it carries */
:root {
  --rhythm-tight: clamp(26px, 2.2vh + 0.6vw, 46px);
  --rhythm-open:  clamp(88px, 9.4vh + 2.6vw, 190px);
}
/* raising the tokens is the only way to move both, .section and the dark override compete on specificity */
:root {
  --pad-paper: clamp(44px, 4.6vh + 1.2vw, 92px);
  --pad-dark:  clamp(52px, 5.4vh + 1.4vw, 108px);
}

/* selectors at (0,2,1) to clear section[data-theme="dark"].section */
section.intro[data-theme]        { padding-block: var(--rhythm-open) var(--rhythm-tight); }
/* let the seam own the open space. a boundary that already has a .seam divider gets tight+tight
   (open+seam+open was stacking into the big "empty" voids); the one seamless boundary — facts->why,
   dark->dark with no divider — carries the open on ONE side only. open+open doubled to ~202px and
   read as a void; a single open (~127px here) still separates the two darks and stays in-band with
   the ~90-146px seam-divider gaps everywhere else on the page. */
section.services[data-theme]     { padding-block: var(--rhythm-tight) var(--rhythm-tight); }
section.facts[data-theme]        { padding-block: var(--rhythm-tight) var(--rhythm-open); }
section.why[data-theme]          { padding-block: var(--rhythm-tight) var(--rhythm-tight); }
section.contact[data-theme]      { padding-block: var(--rhythm-tight) var(--pad-paper); }
section.web-existing[data-theme] { padding-block: var(--rhythm-open) var(--rhythm-open); }

/* phones: the desktop rhythm (open floors at 88px) plus seam heights were stacking ~240px of
   near-empty band between stacked sections — biksy's "empty" on mobile. scale both down. the
   hero+seam keeps its own taller rule (higher specificity), so this only trims the section seams. */
@media (max-width: 899px) {
  :root { --rhythm-open: clamp(44px, 7vh, 84px); --rhythm-tight: clamp(20px, 3vh, 34px); }
  .seam { height: clamp(40px, 6vh, 72px); }
}

/* touch targets on phones. the contact + footer affordances — the email, phone, facebook and
   legal links, and the language button — sat at 16-40px, under the 44px floor the buttons and
   nav already meet. give them the minimum height on touch widths. block links keep stacking
   (a flex box is still block-level); the inline ones use inline-flex so they don't seize a whole
   row. same inline-flex/min-height/centre pattern already used elsewhere in this file. */
@media (max-width: 899px) {
  .contact address a,
  .site-footer .rights a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .site-footer .contact-col a,
  .site-footer .follow-col a {
    display: flex; align-items: center; min-height: 44px;
  }
  .lang-picker > button { min-height: 44px; }

  /* --t-body clamps to 15px at phone widths — one px under the 16px floor iOS
     Safari uses to decide whether to zoom the viewport on focus. Pin form
     fields to 16px here so tapping the contact form doesn't jump-zoom. */
  .field input, .field textarea, .field select { font-size: 16px; }
}


.intro .intro-inner { grid-column: 1 / 10; }
.intro .intro-inner .body-text {
  /* 38px sits between --t-h2 and the hero on purpose, second-loudest without competing with the h1 */
  font-size: clamp(1.625rem, 1.0rem + 2.1vw, 2.375rem);
  max-width: 40ch; line-height: 1.1; letter-spacing: -0.02em;
  padding-left: clamp(38px, 2.8vw, 56px);   /* clears the 22px fader assembly */
}
@media (max-width: 900px) {
  .intro .intro-inner { grid-column: 1 / -1; }
  .intro .intro-inner .body-text { max-width: 24ch; padding-left: 30px; }
}

/* (0,3,0) on purpose, needs to beat .why-item p which comes later at the same specificity or it silently wins */

.why-item--lead { border-top-width: 2px; border-top-color: var(--on-air); }
.why .why-item--lead p { font-size: var(--t-h2); }

@media (min-width: 900px) {
  .why .why-item--lead p {
    max-width: 20ch; line-height: 1.08; letter-spacing: -0.022em;
  }
  .why-item--lead { align-self: start; }

  /* offsets are uneven on purpose, don't round them to a clean +3 each step */
  .why .grid { row-gap: 0; align-items: start; }
  .why-h2       { grid-column: 1 / 4;  grid-row: 1; }
  .why-item--s1 { grid-column: 1 / 8;  grid-row: 2; }
  .why-item--s2 { grid-column: 4 / 12; grid-row: 3; }
  .why-item--s3 { grid-column: 6 / 13; grid-row: 4; }
  .why-item { margin-bottom: 0; }
  /* the two sends are support, not headline, let them run wider and quieter */
  .why .why-item--s2 p, .why .why-item--s3 p { max-width: 34ch; }
}

/* radial anchored bottom-left, reuses the halftone the hero already preloads so it's free */
.why__plate { display: none; }

/* both masks needed, a lone radial stays opaque at the bottom and cuts a hard edge.
   gated on mask-composite, without it multiple masks add instead of intersect and the edge comes back */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .why__plate {
    display: block;
    position: absolute; left: 0; bottom: 0;
    width: min(46%, 620px); height: clamp(120px, 22vh, 260px);
    z-index: 0; pointer-events: none; opacity: .11;
    background-image: url("assets/crowd/crowd-halftone-invert.webp");
    background-size: cover; background-position: 18% 42%;
    -webkit-mask-image:
      radial-gradient(115% 105% at 0% 92%, #000 0%, #000 30%, transparent 74%),
      linear-gradient(to top, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(115% 105% at 0% 92%, #000 0%, #000 30%, transparent 74%),
      linear-gradient(to top, transparent 0%, #000 22%);
    mask-composite: intersect;
  }
}
.why .grid { position: relative; z-index: 1; }
@media (max-width: 899px) { .why__plate { display: none; } }

/* each step draws its own rule as it arrives. no js, same view-timeline the
   seams use, and it works stacked on mobile too */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .why-item { view-timeline: --step block; }
    .why-item::after {
      content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
      background: var(--chalk); opacity: .55;
      transform-origin: left; transform: scaleX(0);
      animation: why-draw linear both;
      animation-timeline: --step;
      animation-range: cover 12% cover 48%;
    }
    /* lead keeps its red bar but NOT the scroll-draw reaction (biksy's note): drawn full
       immediately, no scaleX-on-scroll. the static 2px red border-top sits underneath regardless. */
    .why-item--lead::after { background: var(--on-air); height: 2px; opacity: 1; transform: scaleX(1); animation: none; }
  }
}
@keyframes why-draw { to { transform: scaleX(1); } }
.why-item { padding-top: clamp(34px, 4vh, 52px); }

/* every press settles inside --dur-tap, same as the rest of the site */
/* :active fires on touch too, gating it to (pointer: fine) meant phones got no press feedback at all */
.services .service--link { transition: transform var(--dur-tap) var(--ease-out); }
.services .service--link:active { transform: scale(.994); }
.example-frame:active { transform: translateY(-1px) scale(.995); transition-duration: var(--dur-tap); }
.why-item { transition: border-top-color var(--dur-ui) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  /* label colour never changes on hover, only the meter and nudge, keeps the 15.87:1 contrast intact */
  .facts-row .txt { transition: transform var(--dur-tap) var(--ease-out); }
  .facts-row:hover .txt { transform: translateX(6px); }
  /* multiply keeps the ramp monotonic, scaleX(1) on hover would flatten every row to the same level */
}
@supports (clip-path: inset(0 50% 0 0)) {

  .why-item:hover { border-top-color: var(--on-air); }
}

/* touch equivalent of .why-item:hover, set by initTouchReactivity, absent under reduced motion */
@media (hover: none), (pointer: coarse) {
  .why-item.at-read { border-top-color: var(--on-air); }
}

/* WCAG 2.2 2.5.8 wants 24px minimum, only the standalone links grow, the inline email is exempt */
@media (pointer: coarse) {
  .foot-col > a {
    min-height: 44px;
    display: flex; align-items: center;
  }
  .legal-link {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
}


/* ============================================================================
   FRONT PAGE — rebuilt 2026-09-04 (fp-*). Evidence-first: the page opens with
   the advert AUDIO 1 actually made, then shows the real sites/dashboards/phone
   work behind each service door. Nothing here is stock and nothing is a claim
   without the thing itself next to it. Hero above is unchanged.
   ========================================================================= */

/* --- THE SPOT: their own 18s advert, full-bleed ---------------------------- */
/* sized down 2026-09-04 (his note: "takes up alot of space"). full-bleed 16:9 meant a 900px-tall
   band on a 1600px screen — a whole viewport of video before the work. now it sits as a framed
   film inside the page insets, capped so it never dominates. still 16:9: the compositions are
   shot for it and cropping them cut the AUDIO 1 wordmark when tried. */
.fp-spot { padding-block: clamp(34px, 6vh, 84px); overflow-x: clip; }
/* the film and the words sit side by side — the space beside a 62%-wide video was reading as a
   hole. 7/5-ish split, text aligned to the bottom of the frame so the two blocks share a baseline. */
.fp-spot__inner {
  padding-inline: var(--inset-l) var(--inset-r);
  display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vh, 34px);
}
@media (min-width: 900px) {
  .fp-spot__inner {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 60px); align-items: end;
  }
}
.fp-spot__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  border-radius: 3px; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}

.fp-spot__aside { display: flex; flex-direction: column; align-items: flex-start; }
.fp-spot__kicker {
  /* --fg-body, not --fg-muted: muted on the pitch ground measures 3.57:1 at this 12.5px size */
  display: flex; gap: 10px; color: var(--fg-body);
  font-size: var(--t-meta); letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.fp-spot__kicker b { color: var(--on-air); font-weight: 400; }
.fp-spot__lead {
  font-family: var(--f-display); font-weight: 600; color: var(--fg);
  font-size: clamp(1.15rem, .82rem + 1.35vw, 1.75rem); line-height: 1.28;
  letter-spacing: -.014em; max-width: 26ch;
}
.fp-spot__more {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  margin-top: clamp(14px, 2.2vh, 26px); color: var(--fg); text-decoration: none;
  font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--dur-ui) var(--ease-out);
}
.fp-spot__more-go {
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--rule); position: relative;
  transition: border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--spring);
}
.fp-spot__more-go::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translate(-70%, -50%) rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  .fp-spot__more:hover { color: var(--on-air); }
  .fp-spot__more:hover .fp-spot__more-go { border-color: var(--on-air); transform: translateX(4px); }
}

/* on phones the in-frame label wrapped to three lines and the bar ate a quarter of a 199px-tall
   video — and it says exactly what the kicker directly beneath the frame already says. drop it
   there and let the bar carry only the audio controls. */
/* (0,2,0) on purpose — these rules sit ABOVE the base .fp-spot__label/.fp-spot__bar in this
   file, so at equal specificity the base would win on source order. */
@media (max-width: 699px) {
  .fp-spot__bar .fp-spot__label { display: none; }
  .fp-spot .fp-spot__bar { justify-content: flex-end; padding: 8px 10px; gap: 10px; }
}

/* volume: a real slider, not a guess. thumb is 16px on a 4px rail, 44px tall hit area. */
.fp-spot__audio { display: flex; align-items: center; gap: 12px; }
.fp-spot__vol {
  -webkit-appearance: none; appearance: none; background: transparent;
  width: clamp(64px, 9vw, 108px); height: 44px; cursor: pointer; flex: none;
}
.fp-spot__vol::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: rgba(237,229,214,.28);
}
.fp-spot__vol::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(237,229,214,.28); }
.fp-spot__vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: 999px; background: var(--chalk); border: none;
  transition: transform var(--dur-tap) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.fp-spot__vol::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 999px; background: var(--chalk); border: none;
}
.fp-spot__vol:hover::-webkit-slider-thumb { background: var(--on-air-hot); transform: scale(1.12); }
.fp-spot__vol:hover::-moz-range-thumb { background: var(--on-air-hot); }
.fp-spot__vol:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; border-radius: 999px; }
.fp-spot__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the same dot veil the crowd plates carry, so the film sits in one material world */
.fp-spot__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: radial-gradient(circle, rgba(237,229,214,.22) .6px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: overlay; opacity: .16;
}
.fp-spot__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(8px, 1.6vw, 16px) clamp(12px, 2.2vw, 24px);
  background: linear-gradient(to top, rgba(6,5,4,.88), rgba(6,5,4,0));
}
.fp-spot__label {
  color: var(--chalk); font-family: var(--f-mono); font-size: var(--t-meta);
  letter-spacing: .14em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  transition: color var(--dur-ui) var(--ease-out);
}
.fp-spot__label b { color: var(--on-air); font-weight: 400; }
.fp-spot__label:hover { color: var(--on-air); }
.fp-spot__sound {
  appearance: none; background: rgba(237,229,214,.10); color: var(--chalk);
  border: 1px solid rgba(237,229,214,.30); border-radius: 999px;
  font-family: var(--f-mono); font-size: var(--t-stamp); letter-spacing: .12em;
  padding: 0 16px; min-height: 44px; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              transform var(--dur-tap) var(--ease-out);
}
.fp-spot__sound:hover { background: rgba(237,229,214,.18); border-color: var(--on-air); }
.fp-spot__sound:active { transform: scale(.97); }

/* --- WORK: four doors, each carrying the real thing ------------------------ */
.fp-work { padding-block: clamp(48px, 8vh, 112px); overflow-x: clip; }
.fp-work__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-inline: var(--inset-l) var(--inset-r); margin-bottom: clamp(22px, 4vh, 54px);
}
.fp-work__head h2 {
  font-family: var(--f-display); font-weight: 800; color: var(--fg);
  font-size: clamp(1.4rem, .95rem + 1.7vw, 2.4rem); letter-spacing: -.02em;
}
.fp-work__idx { font-family: var(--f-mono); font-size: var(--t-meta); letter-spacing: .16em; color: var(--fg-muted); }

.fp-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 46px) clamp(16px, 2.4vw, 38px);
  padding-inline: var(--inset-l) var(--inset-r);
}
.fp-card { grid-column: 1 / -1; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
/* reworked 2026-09-04 (his note: sit better together + slightly smaller). the old 7/5–5/7 with a
   tall 4:5 portrait left one card hanging far below its neighbour and the row bottoms unrelated.
   now 6/5 then 5/6 with a deliberate EMPTY gutter column between each pair (col 7, then col 6),
   every media on one shared aspect so heights differ only by width. the stagger is halved so the
   four read as one block instead of four drifting pieces. */
@media (min-width: 900px) {
  .fp-card--1 { grid-column: 1 / 7;  }
  .fp-card--2 { grid-column: 8 / 13; margin-top: clamp(24px, 4vh, 56px); }
  .fp-card--3 { grid-column: 1 / 6;  }
  .fp-card--4 { grid-column: 7 / 13; margin-top: clamp(16px, 2.6vh, 38px); }
}
.fp-card__media {
  position: relative; aspect-ratio: var(--ar, 4/3); overflow: hidden;
  border-radius: 3px; border: 1px solid var(--rule); background: var(--pitch);
}
.fp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 620ms var(--ease-out); }
.fp-card__row { display: flex; align-items: baseline; gap: 12px; margin-top: clamp(12px, 1.8vh, 20px); }
/* theme-aware, NOT --on-air: the accent red on paper measures 1.48:1 and even --on-air-ink
   only reaches 3.17:1. red does not survive on this beige at label size — the project has
   hit this before. --fg-muted resolves to the dark ink here (4.83:1) and stays light on dark. */
.fp-card__num { font-family: var(--f-mono); font-size: var(--t-meta); color: var(--fg-muted); flex: none; }
.fp-card__name {
  font-family: var(--f-display); font-weight: 800; color: var(--fg);
  font-size: clamp(1.3rem, .9rem + 1.4vw, 2rem); line-height: 1.06; letter-spacing: -.022em;
  transition: transform var(--dur-ui) var(--spring);
}
.fp-card__go {
  margin-left: auto; flex: none; align-self: center; position: relative;
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--rule);
  transition: border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--spring);
}
.fp-card__go::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px; border-top: 1.5px solid var(--fg); border-right: 1.5px solid var(--fg);
  transform: translate(-70%, -50%) rotate(45deg);
}
.fp-card__desc { margin-top: 8px; color: var(--fg-body); font-size: var(--t-body); line-height: 1.5; max-width: 46ch; }

/* These four were the last clickable things on the site still reading as loose pictures.
   A 1px hairline around a dark still on beige is invisible, so nothing said "press me" —
   and unlike .work-tile / .example-frame / .service--link they had no press state at all.
   Same physical language as .work-tile (mounted print, lifts, answers the press), with a
   warm ink shadow instead of the black one because these sit on paper, not on the dark. */
.fp-card__media {
  box-shadow: 0 2px 4px rgba(23,19,14,.10), 0 10px 22px rgba(23,19,14,.15);
  transition: transform var(--dur-ui) var(--spring), box-shadow var(--dur-ui) var(--ease-out);
}
.fp-card { transition: transform var(--dur-tap) var(--ease-out); }
.fp-card:active { transform: translateY(-1px) scale(.994); }
.fp-card__go { background: color-mix(in srgb, var(--fg) 5%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .fp-card:hover .fp-card__media img, .fp-card:focus-visible .fp-card__media img { transform: scale(1.035); }
  .fp-card:hover .fp-card__name, .fp-card:focus-visible .fp-card__name { transform: translateX(6px); }
  .fp-card:hover .fp-card__go, .fp-card:focus-visible .fp-card__go {
    border-color: var(--on-air); background: var(--on-air); transform: translateX(5px);
  }
  .fp-card:hover .fp-card__go::after, .fp-card:focus-visible .fp-card__go::after {
    border-top-color: var(--chalk); border-right-color: var(--chalk);
  }
  .fp-card:hover .fp-card__media, .fp-card:focus-visible .fp-card__media {
    transform: translateY(-4px);
    box-shadow: 0 4px 9px rgba(23,19,14,.13), 0 20px 34px rgba(23,19,14,.20);
  }
}

/* --- CAPABILITIES: the facts as a studio sheet, dense, not a ladder -------- */
.fp-caps { padding-block: clamp(52px, 9vh, 124px); overflow-x: clip; }
.fp-caps__inner { padding-inline: var(--inset-l) var(--inset-r); }
.fp-caps__lead {
  font-family: var(--f-display); font-weight: 800; color: var(--fg);
  font-size: clamp(1.9rem, 1rem + 3.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.026em;
  max-width: 18ch; margin-bottom: clamp(26px, 5vh, 60px);
}
/* explicit columns, never repeat(auto-fit,minmax()) — that pattern is the template tell */
.fp-caps__list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 760px)  { .fp-caps__list { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); } }
@media (min-width: 1200px) { .fp-caps__list { grid-template-columns: 1fr 1fr 1fr; } }
.fp-caps__item {
  display: flex; gap: 14px; align-items: baseline;
  padding-block: clamp(11px, 1.6vh, 17px); border-bottom: 1px solid var(--rule);
  color: var(--fg-body); font-size: var(--t-body); line-height: 1.35;
}
.fp-caps__item i { font-style: normal; font-family: var(--f-mono); font-size: var(--t-stamp); color: var(--ash); flex: none; min-width: 2ch; }

/* --- CONTACT -------------------------------------------------------------- */
.fp-talk { padding-block: clamp(60px, 12vh, 158px); overflow-x: clip; }
.fp-talk__inner { padding-inline: var(--inset-l) var(--inset-r); }
.fp-talk__h {
  font-family: var(--f-display); font-weight: 800; color: var(--fg);
  font-size: clamp(2.2rem, 1rem + 5vw, 4.75rem); line-height: 1.0; letter-spacing: -.03em; max-width: 15ch;
}
.fp-talk__sub { color: var(--fg-body); font-size: var(--t-lead); margin-top: clamp(14px, 2.2vh, 26px); max-width: 40ch; }
.fp-talk__mail {
  display: inline-block; margin-top: clamp(26px, 4.2vh, 52px);
  font-family: var(--f-display); font-weight: 700; color: var(--fg); text-decoration: none;
  font-size: clamp(1.35rem, .85rem + 2.4vw, 2.75rem); letter-spacing: -.02em;
  padding-bottom: 6px; border-bottom: 2px solid var(--on-air);
  transition: color var(--dur-ui) var(--ease-out);
}
.fp-talk__mail:hover { color: var(--on-air); }
/* --fg-body, not --fg-muted: muted on the dark ground is 3.32:1 and this is 12.6px text */
.fp-talk__meta { color: var(--fg-body); font-size: var(--t-meta); margin-top: clamp(20px, 3.2vh, 36px); letter-spacing: .06em; }
.fp-talk__meta a { color: inherit; text-decoration: none; }
.fp-talk__meta a:hover { color: var(--fg-body); }

@media (prefers-reduced-motion: reduce) {
  .fp-card, .fp-card__media, .fp-card__media img, .fp-card__name, .fp-card__go,
  .fp-spot__sound, .fp-spot__label, .fp-talk__mail { transition: none; }
  /* the shadow stays — it is depth, not motion — but nothing moves */
  .fp-card:active, .fp-card:hover .fp-card__media, .fp-card:focus-visible .fp-card__media { transform: none; }
}

/* --- scroll reveal for the rebuilt front page ------------------------------------------
   the old sections all had entrance motion (initStepReveal / initTwoTone / initFactsRows);
   the new fp-* ones arrived static, which is what "missing animations" was. same contract as
   the rest of the site: transform+opacity only, staggered by --ri, and completely absent under
   reduced motion (the JS adds .in-view immediately in that case, it is not a degraded variant). */
@media (prefers-reduced-motion: no-preference) {
  .fp-rise {
    opacity: 0; transform: translateY(18px);
    --f-delay: min(calc(var(--ri, 0) * 38ms), var(--stagger-cap));
    transition: opacity var(--dur-enter) var(--ease-out) var(--f-delay),
                transform var(--dur-long) var(--ease-out) var(--f-delay);
  }
  .fp-rise.in-view { opacity: 1; transform: none; }
  /* the card's picture settles a beat after its frame — reads as material, not a slide-in */
  .fp-card.fp-rise .fp-card__media img { transform: scale(1.06); transition: transform var(--dur-epic) var(--ease-out) var(--f-delay); }
  .fp-card.fp-rise.in-view .fp-card__media img { transform: none; }
}

/* --- CLOSER: the waveform band that ends the page -------------------------------------- */
.fp-close { overflow-x: clip; padding-block: clamp(30px, 5vh, 64px) clamp(16px, 2.4vh, 30px); }
.fp-close__inner { padding-inline: var(--inset-l) var(--inset-r); }
.fp-close__mark {
  display: block; color: var(--fg-muted); font-size: var(--t-stamp);
  letter-spacing: .34em; margin-bottom: clamp(10px, 1.6vh, 18px);
}
/* buildBarsSVG injects an svg with a 1:1 viewBox and no width/height, so left alone it takes its
   intrinsic square and forces the host to 1762x1762 with the bars smeared flat. make it fill the
   host, which is the aspect-ratio box — preserveAspectRatio="none" means the bars stretch to it. */
.waveform-contact > svg { display: block; width: 100%; height: 100%; }
/* the rects are `.wf-bar`, NOT `.bar`: the site already has an unrelated
   `.bar { width:100vw; height:1px }` (site.css:1994) and CSS geometry properties beat SVG
   presentation attributes, so every bar rendered 1920x1px. That collision is why this whole
   component was dead code and had never rendered. Renamed at the builder call instead of
   fighting it with overrides — `width:auto` resolves to 0 on a rect in Chrome, not the attribute. */
.fp-close .waveform-contact { cursor: crosshair; height: clamp(88px, 13vh, 168px); aspect-ratio: auto; }

/* caps rows answer the pointer — the sheet was the one block with no reactivity at all */
@media (hover: hover) and (pointer: fine) {
  .fp-caps__item { transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
  .fp-caps__item:hover { color: var(--fg); border-bottom-color: var(--on-air); }
  .fp-caps__item:hover i { color: var(--on-air); }
  .fp-spot__frame { transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
  .fp-spot__frame:hover { transform: translateY(-3px); box-shadow: 0 38px 84px rgba(0,0,0,.6); }
}

/* the band above the film was dead space — the section's heading was there all along but
   visually-hidden. surfaced it: eyebrow + title sit over the film like a slate. */
.fp-spot__head { padding-inline: var(--inset-l) var(--inset-r); margin-bottom: clamp(16px, 2.6vh, 34px); }
.fp-spot__eyebrow {
  display: flex; gap: 10px; color: var(--fg-body); font-size: var(--t-meta);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: clamp(8px, 1.2vh, 14px);
}
.fp-spot__eyebrow b { color: var(--on-air); font-weight: 400; }
.fp-spot__title {
  font-family: var(--f-display); font-weight: 800; color: var(--fg);
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); line-height: 1.02; letter-spacing: -.026em;
}

/* --- light-version offer -----------------------------------------------------------
   Only ever inserted by initSlowWatch(), and only when a SMALL file has actually taken
   more than four seconds for this visitor. Deliberately not a full-width banner across
   the bottom: that shape reads as a cookie bar and gets dismissed without being read.
   It sits in the corner, over the page, and leaves on the first answer either way. */
.lite-offer {
  /* --btn-fill and friends only exist on section[data-theme], and this panel is appended
     to <body>, outside every section. Without them .btn resolved to an invalid background
     and the primary action rendered as bare text. Same values as the dark sections. */
  --btn-fill: var(--on-air-hot); --btn-text: var(--void); --focus: var(--chalk);
  position: fixed; z-index: 260; left: var(--inset); bottom: var(--inset);
  width: min(370px, calc(100vw - var(--inset) * 2));
  display: grid; grid-template-columns: 1fr auto; gap: 10px 12px;
  padding: 16px 16px 14px;
  background: var(--carbon); color: var(--chalk);
  border: 1px solid var(--edge-pitch); border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--spring);
}
.lite-offer.is-in { opacity: 1; transform: none; }
.lite-offer__text {
  grid-column: 1 / -1; margin: 0;
  font-size: var(--t-body); line-height: 1.45; color: var(--chalk);
}
.lite-offer__yes { justify-self: start; }
.lite-offer__no {
  justify-self: start; align-self: center; border: 0; background: none; cursor: pointer;
  color: var(--ash); font-family: var(--f-mono); font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .08em; padding: 10px 4px; min-height: 44px;
  transition: color var(--dur-ui) var(--ease-out);
}
.lite-offer__no:hover { color: var(--chalk); }
.lite-offer__no:active { transform: scale(.97); }

/* the way back out of the light version, in the footer where it can always be found */
.lite-restore {
  border: 1px solid currentColor; background: none; cursor: pointer; color: inherit;
  font-family: var(--f-mono); font-size: var(--t-meta); text-transform: uppercase;
  letter-spacing: .08em; padding: 9px 12px; min-height: 44px; border-radius: 999px;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.lite-restore:hover { color: var(--on-air-hot); border-color: var(--on-air-hot); }
.lite-restore:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .lite-offer { transition: none; opacity: 1; transform: none; }
  .lite-offer__no:active, .lite-restore:active { transform: none; }
}