/* Jore Olbrechts — websites voor vakmensen
   Direction: "The sentence is the layout" (taste-skill seed 702777333). One sentence at poster scale,
   with the thing itself (a real site, moving) in the place of the word "websites".
   Type: Bebas Neue / EB Garamond (self-hosted) · Colour: navy on white, opening on near-black, tangerine on the action. */

@font-face { font-family: "Bebas Neue"; src: url("../assets/fonts/bebasneue-normal-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../assets/fonts/ebgaramond-normal-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../assets/fonts/ebgaramond-italic-latin.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
/* only inside the phone fragment: the demo's own face */
@font-face { font-family: "Anton"; src: url("../assets/fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #ffffff;
  --surface: #f4f4f2;
  --stone: #e3e1dc;
  --ink: #1f2b4d;
  --muted: #5a6175;      /* 6.2:1 on white */
  --accent: #f7941d;     /* tangerine: the action, and the one emphasis */
  --accent-hover: #ffa53a;
  --accent-ink: #1f2b4d;
  --night: #05070a;
  --night-ink: #f4f4f2;
  --night-muted: #a9adb8;

  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --text: "EB Garamond", Georgia, serif;

  --s-small: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --s-body: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);
  --s-lead: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --s-head: clamp(2.75rem, 1.4rem + 5.4vw, 7rem);
  --s-mega: clamp(3.5rem, 0.5rem + 16.6vw, 17rem);

  --margin: clamp(20px, 2.4vw, 36px);
  --gap: 16px;
  --section: clamp(120px, 14vw, 220px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; -webkit-tap-highlight-color: transparent; }
a, button, input, select { touch-action: manipulation; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--s-body)/1.45 var(--text);
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 90; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; }
.skip:focus { top: 8px; }
/* WCAG 2.2.2: anything that moves on its own longer than five seconds can be stopped */
.still { min-height: 44px; padding: 0; border: 0; background: none; color: var(--night-muted); font: 400 var(--s-small)/1 var(--text);
  text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; cursor: pointer; }
.still:hover { color: var(--night-ink); }
/* comfortable tap targets for the small text links (WCAG 2.5.8) */
.foot__meta a, .mail__corners a, .doc__foot a { display: inline-block; padding: 12px 0; }
.is-still .band__track, .is-still .old__marquee span { animation-play-state: paused; }
.doc__body ul { list-style: disc; padding-left: 1.2em; max-width: 60ch; display: grid; gap: 6px; }
.doc__body h3 { font: 600 var(--s-body)/1.3 var(--text); margin-top: 8px; }

.h-display, .doc__body h1, .hero__title, .swap__title, .zoom__title, .stair__line, .offer__line, .faq__q, .mail__address, .foot__phone, .portrait, .bar__btn, .btn, .band {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.88;
}
.h-display { font-size: var(--s-head); text-wrap: balance; }

/* ---------- buttons and links: one shape, square ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0.3em 1.1em 0.18em; font-size: 1.5rem; line-height: 1; letter-spacing: 0.02em;
  text-decoration: none; overflow: hidden; isolation: isolate;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--ink { background: var(--night-ink); color: var(--ink); }
.btn::before { /* a fill that wipes in from the left on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--night-ink);
  transform: scaleX(0); transform-origin: right; transition: transform 380ms var(--ease-out);
}
.btn--ink::before { background: var(--accent); }
.btn:active { scale: 0.97; }
.link { text-decoration: underline; text-decoration-color: currentColor; transition: text-decoration-color 200ms ease; padding: 10px 0; display: inline-block; }

/* ---------- the bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px);
  padding: 14px var(--margin);
  color: var(--bar-ink, var(--night-ink)); background: var(--bar-bg, var(--night));
  transition: transform 450ms var(--ease-out), background-color 300ms ease, color 300ms ease;
}
.bar.is-dark { --bar-ink: var(--ink); --bar-bg: var(--bg); }
.bar.is-away { transform: translateY(-100%); }
.wordmark { font-family: var(--display); font-size: 1.75rem; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; padding-top: 4px; }
.bar__nav { display: flex; gap: clamp(16px, 2.2vw, 36px); margin-left: auto; font-size: 1.125rem; }
.bar__nav a { position: relative; text-decoration: none; padding: 10px 0; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out); }
.bar__call { display: none; padding: 10px 4px; }
.bar__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.32em 0.8em 0.2em; font-size: 1.25rem; line-height: 1; letter-spacing: 0.02em;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; transition: background-color 200ms ease;
}

/* ---------- 1 · the sentence ---------- */
.hero {
  position: relative; min-height: 100svh; background: var(--night); color: var(--night-ink);
  display: grid; grid-template-rows: 1fr auto auto; padding: 120px var(--margin) 28px;
}
.hero__title { align-self: center; font-size: var(--s-mega); line-height: 0.86; letter-spacing: -0.01em; }
.line { display: block; overflow: clip; overflow-clip-margin: 0.08em; white-space: nowrap; padding-top: 0.04em; }
.line__in { display: inline-block; }
/* the slot: one cap-height tall, where the word "websites" would be */
.slot { position: relative; display: inline-block; width: 2.5em; height: 0.71em; margin-left: 0.08em; vertical-align: baseline; }
.slot__box { position: absolute; inset: 0; overflow: hidden; background: #0b1530; }
.slot__video { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); align-items: end; margin-top: 48px; }
.hero__lead { grid-column: 1 / 8; font-size: var(--s-lead); line-height: 1.3; max-width: 46ch; }
.hero__voor { display: block; margin-top: 14px; font-style: italic; color: var(--accent); }
.hero__actions { grid-column: 8 / 13; justify-self: end; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.hero__place { margin-top: 28px; font-size: var(--s-small); color: var(--night-muted); letter-spacing: 0.02em; }

/* the opening: present only while html.intro is set by the head script, never without JS */
.opening { display: none; }
.js.intro .opening {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 61;
  background: #000; mix-blend-mode: multiply; pointer-events: none;
}
.opening__word { font-family: var(--display); text-transform: uppercase; color: #fff; font-size: 30vw; line-height: 0.8; letter-spacing: -0.02em; padding-top: 0.06em; }
.js.intro .slot__box.is-flying { position: fixed; z-index: 60; }
/* the opening's from-states, armed by the head script before first paint (a timeout there disarms them if the motion layer never runs) */
.js.intro .opening__word { opacity: 0; }
.js.intro .hero .line__in { transform: translateY(40%); }
.js.intro [data-hero-part] { opacity: 0; }
.js.intro .bar { transform: translateY(-100%); }

/* ---------- the trades band ---------- */
.band { background: var(--stone); color: var(--ink); overflow: hidden; padding: 22px 0 14px; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.band__track { display: flex; width: max-content; animation: band 48s linear infinite; }
.band__track span { padding: 0 0.35em; }
.band__track span::after { content: "·"; padding-left: 0.7em; color: var(--accent); }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- 2 · before / after ---------- */
.swap { background: var(--bg); }
.swap__stage { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 28px; padding: 110px var(--margin) 36px; }
.swap__title { font-size: var(--s-head); display: flex; justify-content: space-between; gap: 0.4em; }
.swap__to { color: var(--muted); transition: color 300ms ease; }
.swap.is-after .swap__from { color: var(--muted); }
.swap.is-after .swap__to { color: var(--ink); }
.browser {
  justify-self: center; align-self: center; width: min(1180px, 100%); max-height: 72svh; aspect-ratio: 16 / 10;
  display: grid; grid-template-rows: auto 1fr; background: #dfe2ea; border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(31, 43, 77, 0.45); /* taste-skill-ignore: the browser window is an interface fragment (data-ui) */
}
.browser__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #cfd3de; font: 13px/1 system-ui, sans-serif; color: #4a5168; }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #aab0c2; }
.browser__bar span { margin-left: 14px; background: #eef0f5; padding: 5px 12px; border-radius: 6px; }
.browser__view { position: relative; overflow: hidden; container-type: inline-size; }
.new { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.new img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.new__phone { display: none; }
.swap__edge { position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; margin-left: -3px; background: var(--accent); }
.swap__note { font-size: var(--s-body); max-width: 52ch; }

/* the outdated site, drawn (data-ui): 2011 in every detail */
.old { position: absolute; inset: 0; background: #c0c0c0; font-family: var(--text); color: #000; font-size: 1.75cqw; }
.old__head { background: #000080; color: #ffff00; font: 600 1.9cqw/1.4 var(--text); text-align: center; padding: 1.6cqw; letter-spacing: 0.25em; }
.old__marquee { background: #ffff99; overflow: hidden; white-space: nowrap; font-style: italic; font-weight: 600; color: #cc0000; padding: 0.5cqw 0; }
.old__marquee span { display: inline-block; padding-left: 100%; animation: old-marquee 14s linear infinite; }
@keyframes old-marquee { to { transform: translateX(-100%); } }
.old__body { display: grid; grid-template-columns: 22% 1fr; gap: 2cqw; padding: 2cqw; }
.old__nav { background: #e0e0e0; padding: 1.4cqw; display: grid; gap: 1cqw; color: #0000ee; align-content: start; }
.old__main { display: grid; gap: 1.4cqw; align-content: start; }
.old__photo { background: #ffffff; color: #777; width: 40%; aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 1.5cqw; }
.old__small { font-size: 1.3cqw; color: #333; }

/* ---------- 3 · one frame, three distances ---------- */
.zoom { background: var(--bg); }
.zoom__stage {
  min-height: 100svh; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto;
  align-items: center; justify-items: center; column-gap: 48px; padding: 100px var(--margin) 48px; position: relative;
}
.zoom__title { display: contents; }
.zoom__a, .zoom__b { grid-column: 1 / -1; font-size: var(--s-head); line-height: 0.9; position: relative; z-index: 2; }
.zoom__a { grid-row: 1; margin-bottom: 0.15em; }
.zoom__b { grid-row: 3; margin-top: -0.3em; background: var(--bg); padding: 0.06em 0.2em 0; }
.zoom__frame { grid-column: 2; grid-row: 2; height: min(68svh, 640px); aspect-ratio: 1170 / 2532; overflow: hidden; background: #e6dbc7; border-radius: 0; }
.zoom__frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.zoom__notes { grid-column: 3; grid-row: 2; justify-self: start; align-self: center; display: grid; gap: 20px; max-width: 28ch; font-size: var(--s-lead); line-height: 1.3; }
.motion .zoom__notes { grid-template-areas: "n"; }
.motion .zoom__notes li { grid-area: n; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 400ms ease, transform 500ms var(--ease-out), visibility 0s linear 400ms; }
.motion .zoom__notes li.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms ease, transform 500ms var(--ease-out), visibility 0s; }

/* ---------- 4 · your site, now ---------- */
.live {
  background: var(--surface); padding: var(--section) var(--margin) 120px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--gap); align-items: center;
}
.live__text { grid-column: 1 / 7; display: grid; gap: 28px; align-content: center; }
.live__text > p { font-size: var(--s-lead); line-height: 1.3; max-width: 30ch; }
.voor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); gap: 8px 16px; max-width: 640px; }
.voor__label { font-size: var(--s-small); color: var(--muted); grid-row: 1; letter-spacing: 0.02em; }
.voor__input, .voor__vak {
  grid-row: 2; height: 64px; padding: 0 18px; border: 0; background: var(--bg); color: var(--ink);
  font-family: var(--display); font-size: 1.75rem; letter-spacing: 0.01em; text-transform: uppercase; min-width: 0;
  border-bottom: 3px solid var(--ink); transition: border-color 250ms ease;
}
.voor__input:focus-visible, .voor__vak:focus-visible { outline: none; border-bottom-color: var(--accent); }
.voor__input::placeholder { color: #6b7183; }
.voor__note { grid-column: 1 / -1; font-size: var(--s-small); color: var(--muted); margin-top: 4px; }
.voor__vak {
  appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231f2b4d' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}

.phone { grid-column: 8 / 13; justify-self: center; display: grid; justify-items: center; gap: 18px; }
.phone__screen {
  position: relative; container-type: inline-size;
  width: clamp(240px, 23vw, 330px); aspect-ratio: 600 / 1298;
  border: 11px solid #0c0d10; border-radius: 44px; background: #e6dbc7; overflow: hidden;
  box-shadow: 0 50px 90px -40px rgba(5, 7, 10, 0.55); /* taste-skill-ignore: a device held up, part of the data-ui fragment */
}
/* the outgoing screen lets go quickly, the incoming one fades in over it */
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.slide.is-on { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.4s ease, visibility 0s; }
.phone__label { font-size: var(--s-small); color: var(--muted); }

/* the phone fragment keeps the demo's own look, sized in container units (base 280px) */
.mini { height: 100%; padding: 6.5cqw 5cqw; color: #062b8a; display: flex; flex-direction: column; gap: 4.3cqw; font-family: system-ui, sans-serif; }
.mini__nav { display: flex; justify-content: space-between; gap: 3cqw; font-family: "Anton", var(--display); font-size: 5cqw; white-space: nowrap; }
.mini__nav span:first-child { overflow: hidden; text-overflow: ellipsis; }
.mini__nav span:last-child { font-family: system-ui, sans-serif; font-weight: 600; font-size: 4.6cqw; }
.mini__name { font-family: "Anton", var(--display); text-transform: uppercase; line-height: 0.9; font-size: 17cqw; overflow-wrap: anywhere; margin-top: 4cqw; }
.mini__sub { font-size: 4.6cqw; line-height: 1.45; }
.mini__btn { align-self: flex-start; background: #062b8a; color: #e6dbc7; font-weight: 600; font-size: 4.6cqw; padding: 3.6cqw 5cqw; }
.mini__work { flex: 1; min-height: 12cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw; }
.mini__work span { background: #ddd0b9; display: grid; place-items: end start; padding: 2.8cqw; font-size: 3.9cqw; font-weight: 600; line-height: 1.2; }
.mini__work span:first-child { grid-row: span 2; background: #cdbd9f; }
.mini__list { display: grid; gap: 2.2cqw; }
.mini__list li { background: #ddd0b9; padding: 3.6cqw 4.3cqw; font-family: "Anton", var(--display); text-transform: uppercase; font-size: 5.3cqw; }
.mini__name.is-typed { animation: ink 300ms var(--ease-out); }
@keyframes ink { from { opacity: 0.35; transform: translateY(6px); } }

/* ---------- 5 · the staircase ---------- */
.steps { background: var(--bg); padding: 140px var(--margin) 120px; }
.stair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 64px; }
.stair li { grid-column: 1 / -1; }
.stair li:nth-child(1) { grid-column: 1 / 11; }
.stair li:nth-child(2) { grid-column: 3 / 13; }
.stair li:nth-child(3) { grid-column: 5 / 13; }
.stair li:nth-child(4) { grid-column: 7 / 13; }
.stair__line { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.5rem); line-height: 0.92; text-wrap: balance; }
.stair__line--last { color: var(--ink); }
.stair__line--last::after { content: ""; display: block; width: 2.2em; height: 0.14em; margin-top: 0.18em; background: var(--accent); transform-origin: left; }
.stair li p:last-child { margin-top: 14px; max-width: 36ch; }

/* ---------- 6 · the offer ---------- */
.offer {
  min-height: 72svh; background: var(--ink); color: var(--night-ink);
  display: grid; align-content: center; gap: 64px; padding: 120px var(--margin);
}
.offer__line { font-size: clamp(3.5rem, 0.8rem + 12vw, 13rem); line-height: 0.9; }
.offer__block { position: relative; display: inline-block; padding: 0.04em 0.12em 0; color: var(--accent-ink); isolation: isolate; }
.offer__block::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform-origin: left; }
.motion .offer__block { color: var(--night-ink); transition: color 300ms ease 450ms; }
.motion .offer__block::before { transform: scaleX(0); transition: transform 900ms var(--ease-in-out); }
.motion .offer__block.is-laid { color: var(--accent-ink); }
.motion .offer__block.is-laid::before { transform: none; }
.offer__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); align-items: end; }
.offer__foot p { grid-column: 1 / 7; font-size: var(--s-lead); line-height: 1.32; max-width: 38ch; }
.offer__foot .btn { grid-column: 10 / 13; justify-self: end; }

/* ---------- 7 · about ---------- */
.about {
  background: var(--bg); padding: 160px var(--margin) 140px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); align-items: start;
}
.about__facts { grid-column: 1 / 3; display: grid; gap: 10px; font-size: var(--s-small); color: var(--muted); padding-top: 0.5em; }
.about__facts a { color: var(--ink); }
.about__text { grid-column: 3 / 12; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.3; }
.portrait { /* stand-in until there is a photograph: three text lines tall, like a drop capital */
  float: left; font-size: 1.6em; width: 2.25em; height: 2.25em; margin: 0.08em 0.32em 0 0; padding-top: 0.08em;
  display: grid; place-items: center; background: var(--ink); color: var(--accent); line-height: 1;
}
.about__name { display: inline; font: inherit; color: var(--ink); }
.about__p { display: inline; }
.about__p--soft { display: block; margin-top: 1.2em; }
.about__p--soft a { color: var(--ink); }

/* ---------- 8 · questions ---------- */
.faq { background: var(--bg); padding: 40px var(--margin) var(--section); }
.faq__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px var(--gap); align-items: baseline; padding-bottom: 80px; }
.faq__q { grid-column: 1 / 7; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 0.95; text-wrap: balance; }
.faq__q--soft { color: var(--muted); }
.faq__a { grid-column: 8 / 13; max-width: 40ch; line-height: 1.5; }

/* ---------- 9 · contact and footer ---------- */
.mail {
  overflow: clip; min-height: 86svh; background: var(--night); color: var(--night-ink);
  display: grid; grid-template-rows: auto 1fr auto; padding: 120px var(--margin) 32px; gap: 40px;
}
.mail__top { display: grid; gap: 12px; }
.mail__intro { font: 400 var(--s-lead)/1.3 var(--text); }
.mail__sub { color: var(--night-muted); max-width: 40ch; }
.mail__address {
  align-self: end; display: grid; text-decoration: none; font-size: clamp(3rem, 0.4rem + 11.4vw, 11.5rem); line-height: 0.88; letter-spacing: -0.01em;
  transition: color 250ms ease; overflow-wrap: anywhere;
}
.mail__address span { display: block; }
.mail__corners { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--s-small); color: var(--night-muted); }
.mail__corners a { color: var(--night-ink); }
.foot { min-height: 72svh; background: var(--stone); color: var(--ink); display: grid; grid-template-rows: auto 1fr auto auto; padding: 36px var(--margin) 28px; }
.foot__top { display: flex; justify-content: space-between; gap: 16px; font-size: var(--s-small); }
.foot__phone { align-self: end; font-size: clamp(4rem, 0.8rem + 14vw, 15rem); line-height: 0.85; text-decoration: none; white-space: nowrap; padding-top: 0.06em; }
.foot__meta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 28px; font-size: var(--s-small); color: var(--muted); }
.foot__meta p:nth-child(2) { text-align: center; }
.foot__meta p:last-child { text-align: right; }
.foot__meta a { color: var(--ink); }

/* ---------- privacy and 404 ---------- */
.doc { min-height: 100svh; padding: 140px var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.doc__body { grid-column: 3 / 11; display: grid; gap: 16px; justify-items: start; }
.doc__body h1 { font-size: var(--s-head); }
.doc__body h2 { font: 400 var(--s-lead)/1.2 var(--text); margin-top: 24px; }
.doc__body p { max-width: 60ch; }
.doc__lead { font-size: var(--s-lead); line-height: 1.3; }
.doc__date { color: var(--muted); font-size: var(--s-small); margin: 16px 0; }
.doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.doc__foot { padding: 0 var(--margin) 32px; font-size: var(--s-small); color: var(--muted); }
.page-doc .bar { --bar-ink: var(--ink); --bar-bg: var(--bg); }
.page-doc .bar__btn { margin-left: auto; }
@media (max-width: 760px) { .page-doc .bar__btn { margin-left: 0; } }

/* ---------- hover, only where a pointer hovers ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); transform-origin: left; }
  .btn--accent:hover { color: var(--ink); }
  .bar__btn:hover { background: var(--accent-hover); }
  .bar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .link:hover { text-decoration-color: var(--accent); }
  .mail__address:hover { color: var(--accent); }
  .foot__phone:hover { color: var(--accent-ink); -webkit-text-stroke: 0; }
  .phone__screen { transition: transform 500ms var(--ease-out); }
  .phone:hover .phone__screen { transform: translateY(-8px) rotate(-1deg); }
}

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .zoom__stage { grid-template-columns: 1fr; column-gap: 0; }
  .zoom__frame { grid-column: 1; height: min(56svh, 560px); }
  .zoom__notes { grid-column: 1; grid-row: 4; justify-self: center; text-align: center; margin-top: 20px; font-size: var(--s-body); }
  .live__text { grid-column: 1 / -1; }
  .phone { grid-column: 1 / -1; }
  .offer__foot p { grid-column: 1 / -1; }
  .faq__a { grid-column: 7 / 13; }
  .about__text { grid-column: 1 / -1; }
  .about__facts { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .offer__foot .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .bar__nav { display: none; }
  .bar__call { display: inline-block; margin-left: auto; }
  .wordmark { font-size: 1.5rem; }
  .hero { padding-top: 96px; }
  .hero__title { font-size: 17vw; }
  .hero__foot { grid-template-columns: 1fr; margin-top: 36px; }
  .hero__lead, .hero__actions { grid-column: 1; justify-self: start; }
  .hero__actions .btn { width: 100%; }
  .swap__stage { padding-top: 96px; gap: 20px; }
  .swap__title { font-size: clamp(2.5rem, 13vw, 4.5rem); }
  .browser { width: min(78vw, 360px); aspect-ratio: 9 / 16; max-height: 64svh; border-radius: 26px; }
  .browser__bar { display: none; }
  .browser { grid-template-rows: 1fr; }
  .new__desk { display: none; }
  .new .new__phone { display: block; }
  .old { font-size: 3.6cqw; }
  .old__head { font-size: 6cqw; }
  .old__body { grid-template-columns: 1fr; }
  .old__nav { grid-auto-flow: column; overflow: hidden; font-size: 3.4cqw; }
  .old__photo { width: 70%; font-size: 3.2cqw; }
  .old__small { font-size: 2.8cqw; }
  .zoom__stage { padding-top: 90px; }
  .zoom__a, .zoom__b { font-size: 15vw; }
  .live { row-gap: 56px; }
  .voor { grid-template-columns: 1fr; }
  .voor__label, .voor__input, .voor__vak { grid-row: auto; }
  .stair { row-gap: 44px; }
  .stair li:nth-child(n) { grid-column: 1 / -1; }
  .stair li:nth-child(2) { padding-left: 6vw; }
  .stair li:nth-child(3) { padding-left: 12vw; }
  .stair li:nth-child(4) { padding-left: 18vw; }
  .stair__line { font-size: 11vw; }
  .offer__line { font-size: 13.4vw; }
  .about { padding-top: 110px; }
  .about__facts { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .about__text { grid-column: 1 / -1; font-size: 1.375rem; line-height: 1.25; }
  .portrait { width: 2.9em; height: 2.9em; }
  .faq__row { padding-bottom: 56px; }
  .faq__q, .faq__a { grid-column: 1 / -1; }
  .faq__q { font-size: 2.25rem; }
  .mail__address { font-size: 11.6vw; align-self: center; }
  .foot { min-height: 0; row-gap: 40px; }
  .mail { min-height: 70svh; }
  .foot__phone { font-size: 19vw; }
  .foot__meta { grid-template-columns: 1fr; }
  .foot__meta p:nth-child(n) { text-align: left; }
  .doc__body { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .band__track, .old__marquee span { animation: none; }
  .slide { transition: none; }
  .btn::before, .bar, .phone__screen { transition: none; }
}

/* ---------- 3b · demos, one per trade ---------- */
.demos { background: var(--bg); padding: var(--section) var(--margin) 0; }
.demos__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); align-items: end; }
.demos__head h2 { grid-column: 1 / 8; }
.demos__lead { grid-column: 8 / 13; font-size: var(--s-lead); line-height: 1.3; max-width: 30ch; }
.demos__list { margin: 96px 0 0; padding: 0; list-style: none; display: grid; gap: 120px; }
.demo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); align-items: center; }
.demo__shot { grid-column: 1 / 8; position: relative; display: block; padding-bottom: 6%; }
.demo__desk { display: block; width: 88%; height: auto; background: var(--surface); transition: transform 600ms var(--ease-out); }
.demo__phone { position: absolute; right: 0; bottom: 0; width: 22%; height: auto; border: 6px solid var(--night); background: var(--night); transition: transform 600ms var(--ease-out); }
.demo__shot:hover .demo__desk { transform: translateY(-6px); }
.demo__shot:hover .demo__phone { transform: translateY(-14px); }
.demo__text { grid-column: 9 / 13; display: grid; gap: 16px; align-content: center; }
.demo__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.5rem, 1.2rem + 3.4vw, 5rem); line-height: 0.9; letter-spacing: -0.005em; margin: 0; }
.demo__text p { margin: 0; max-width: 34ch; }
.demo--flip .demo__shot { grid-column: 6 / 13; grid-row: 1; }
.demo--flip .demo__text { grid-column: 1 / 5; grid-row: 1; }
.demos__note { margin: 72px 0 0; color: var(--muted); font-size: var(--s-small); }
@media (max-width: 760px) {
  .demos__head { display: block; }
  .demos__lead { margin-top: 20px; }
  .demos__list { margin-top: 56px; gap: 72px; }
  .demo, .demo--flip { display: block; }
  .demo__text { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo__desk, .demo__phone { transition: none; }
  .demo__shot:hover .demo__desk, .demo__shot:hover .demo__phone { transform: none; }
}