/* Veldon, variant C "Devět světů" (2026-09-23). Veldon builds every client its own world; the site
   proves the range: a light hero where the nine worlds land on a pile, and a references section that
   takes each client's colours as it passes. Schibsted Grotesk (the wordmark's own family) throughout. */

@font-face { font-family: 'Schibsted'; font-weight: 400; font-display: swap; src: url('fonts/schibsted-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted'; font-weight: 400; font-display: swap; src: url('fonts/schibsted-400-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted'; font-weight: 500; font-display: swap; src: url('fonts/schibsted-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted'; font-weight: 500; font-display: swap; src: url('fonts/schibsted-500-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted'; font-weight: 800; font-display: swap; src: url('fonts/schibsted-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted'; font-weight: 800; font-display: swap; src: url('fonts/schibsted-800-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --base: #F4F1EA;
  --paper: #FFFFFF;
  --ink: #141414;
  --ink-2: #4A4741;
  --line: rgba(20, 20, 20, .12);
  --font: 'Schibsted', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gut: clamp(20px, 4.4vw, 88px);
  --header-h: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--base); color: var(--ink);
  font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 12px 16px; background: var(--ink); color: var(--base); border-radius: 999px; font-weight: 500; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 999px;
  font: 500 16px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--base); background: var(--ink); border: 1.5px solid var(--ink);
  transition: transform .35s var(--spring);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-ghost, .btn-line {
  color: var(--ink); background: transparent; border-color: transparent; padding-inline: 4px;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
}
.btn-ghost:hover, .btn-line:hover { transform: none; text-decoration-thickness: 3px; }

/* ---------- header ---------- */
.topbar { position: sticky; top: 0; z-index: 40; height: var(--header-h); background: var(--base); transition: box-shadow .3s var(--ease); }
.scrolled .topbar { box-shadow: 0 1px 0 var(--line); }
.bar { height: 100%; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 24px; padding: 0 var(--gut); }
.brand-link { display: inline-flex; color: var(--ink); padding: 8px 0; }
.bwm svg { height: 26px; width: auto; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2vw, 34px); }
.site-nav { display: flex; gap: clamp(16px, 2vw, 34px); }
.site-nav a { font: 500 15px/1 var(--font); text-decoration: none; padding: 10px 0; color: var(--ink-2); transition: color .2s var(--ease); }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current] { color: var(--ink); }
.top-mail {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px;
  font: 500 15px/1 var(--font); text-decoration: none; color: var(--base); background: var(--ink);
  transition: transform .35s var(--spring);
}
.top-mail:hover { transform: translateY(-2px); }
.menu { display: none; }
.nav-open { overflow: hidden; }
.menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px;
  border-radius: 999px; font: 500 15px/1 var(--font); border: 1.5px solid var(--ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--ink); color: var(--base); }
.menu-panel {
  position: fixed; left: 0; right: 0; top: var(--header-h);
  height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
  background: var(--base); display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px var(--gut) calc(28px + env(safe-area-inset-bottom)); overflow-y: auto;
}
.menu-panel nav { display: flex; flex-direction: column; }
.menu-panel nav a { font: 800 clamp(38px, 11vw, 60px)/1.08 var(--font); letter-spacing: -.04em; text-decoration: none; padding: 4px 0; }
.panel-foot { display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.panel-foot .dim { color: var(--ink-2); }

/* ---------- hero: the headline over the pile of nine worlds ---------- */
.hero {
  position: relative; overflow: clip;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: clamp(24px, 6vh, 84px) var(--gut) clamp(28px, 6vh, 80px);
  display: grid; align-content: start;
}
.hero-copy { position: relative; z-index: 3; max-width: min(100%, 1500px); pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.h1 {
  font: 800 clamp(46px, min(7.3vw, 12.6vh), 176px)/.93 var(--font);
  letter-spacing: -.045em; margin-left: -.04em;
}
.h1 .ln { display: block; }
:where(html:lang(en)) .h1 { font-size: clamp(44px, min(6.8vw, 10.2vh), 168px); } /* four lines in EN; :where keeps the phone rule in charge */
.cred {
  margin-top: clamp(18px, 3.6vh, 40px); max-width: 40ch;
  font: 400 clamp(18px, min(1.45vw, 2.6vh), 26px)/1.4 var(--font); color: var(--ink-2);
}
.cred span { display: block; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.4vh, 38px); }

.pile {
  position: absolute; z-index: 1;
  right: var(--gut); bottom: clamp(40px, 6vh, 64px);
  width: min(58vw, 1180px);
  display: grid; grid-template-columns: minmax(0, 1fr); /* every card in one cell: the pile is one card high */
  container-type: inline-size;
  touch-action: pan-y;
}
/* a stack: the project in front at the left, the others receding to the right in the owner's order.
   --x is a share of the pile's width; scaling from the top-left corner keeps the tops on one line */
.card {
  --x: 0cqi; --s: 1; --b: 1;
  grid-area: 1 / 1; width: 46%; aspect-ratio: 16 / 10;
  border-radius: clamp(8px, .8vw, 14px); overflow: hidden; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 30px 64px -28px rgba(20, 16, 10, .55);
  transform: translate(var(--x)) scale(var(--s));
  transform-origin: 0 0;
  filter: brightness(var(--b));
  transition: transform .55s var(--ease), filter .5s var(--ease), box-shadow .5s var(--ease), opacity .4s var(--ease);
  cursor: pointer;
}
.card img, .screen img, .phone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.card[data-slot="0"] { z-index: 5; box-shadow: 0 0 0 1px rgba(0, 0, 0, .16), 0 2px 4px rgba(0, 0, 0, .06), 0 40px 80px -30px rgba(20, 16, 10, .6); }
.card[data-slot="1"] { --x: 16cqi; --s: .93; --b: .96; z-index: 4; }
.card[data-slot="2"] { --x: 31cqi; --s: .86; --b: .92; z-index: 3; }
.card[data-slot="3"] { --x: 45cqi; --s: .79; --b: .88; z-index: 2; }
.card[data-slot="4"] { --x: 58cqi; --s: .72; --b: .84; z-index: 1; }
.card:not([data-slot="0"]):hover { --b: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 30px 64px -28px rgba(20, 16, 10, .55); }
.deck-cap {
  position: absolute; left: 0; top: calc(100% + 10px);
  font: 500 15px/1 var(--font); color: var(--ink-2); pointer-events: none;
}
.deck-cap:not(:empty)::after { content: ' \2192'; }

/* ---------- references: the page takes each client's world ---------- */
.works-head { padding: clamp(64px, 12vh, 150px) var(--gut) 0; }
.works-head + .world { padding-top: clamp(32px, 6vh, 72px); }
.works-head h2, .sect-head h2 {
  font: 800 clamp(44px, min(7vw, 11vh), 150px)/.95 var(--font); letter-spacing: -.045em;
}
.world {
  --w-bg: var(--base); --w-fg: var(--ink); --w-ac: var(--ink);
  background: var(--w-bg); color: var(--w-fg);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text media";
  align-items: center; gap: clamp(28px, 5vw, 110px);
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  padding: clamp(64px, 11vh, 150px) var(--gut);
  overflow: clip; /* the phone overhang never widens the page */
}
.world.w-r { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "media text"; }
.w-media { grid-area: media; position: relative; }
.w-text { grid-area: text; display: grid; justify-items: start; gap: 16px; }
.screen {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: clamp(10px, 1vw, 16px); background: rgba(0, 0, 0, .08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 40px 90px -30px rgba(0, 0, 0, .5);
}
.phone {
  position: absolute; width: 23%; aspect-ratio: 390 / 844; bottom: -9%; right: -5%;
  overflow: hidden; border-radius: clamp(14px, 1.6vw, 26px); background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 30px 70px -20px rgba(0, 0, 0, .55);
}
.w-text h3 { font: 800 clamp(40px, min(5.2vw, 9vh), 112px)/.95 var(--font); letter-spacing: -.045em; }
.cat { font: 500 16px/1.4 var(--font); opacity: .78; }
.status {
  display: inline-block; padding: 7px 14px 8px; border-radius: 999px;
  font: 500 14px/1 var(--font); box-shadow: inset 0 0 0 1.5px currentColor;
}
.desc { font-size: clamp(18px, 1.3vw, 21px); line-height: 1.5; max-width: 40ch; }
.proof { display: grid; gap: 10px; max-width: 46ch; padding-left: 18px; border-left: 3px solid var(--w-ac); }
.pquote { font-size: clamp(17px, 1.15vw, 19px); line-height: 1.5; }
.pwho { font: 500 14px/1.3 var(--font); opacity: .75; }
.visit {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; margin-top: 6px; border-radius: 999px;
  font: 500 15px/1 var(--font); text-decoration: none; box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .35s var(--spring);
}
.visit:hover, .visit:focus-visible { background: var(--w-fg); color: var(--w-bg); transform: translateY(-2px); }

/* one background that becomes each client's colour as its world passes (site.js adds .cham) */
.works.cham {
  background: color-mix(in oklab, var(--cbg, var(--base)) 88%, var(--base)); color: var(--cfg, var(--ink));
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.works.cham .world { background: transparent; color: inherit; }
.works.cham .visit:hover, .works.cham .visit:focus-visible { background: var(--cfg, var(--ink)); color: var(--cbg, var(--base)); }

/* ---------- services + team ---------- */
.sheet-inner {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px clamp(28px, 5vw, 110px);
  padding: clamp(80px, 14vh, 170px) var(--gut);
}
.team .sheet-inner { padding-top: 0; }
.sheet .sect-head h2 { position: sticky; top: calc(var(--header-h) + 24px); }
.svc, .rate { border-top: 1.5px solid var(--ink); }
.svc:last-child, .rate:last-child { border-bottom: 1.5px solid var(--ink); }
.svc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 22px 0; }
.s-t { font: 800 clamp(26px, min(2.9vw, 5vh), 54px)/1.02 var(--font); letter-spacing: -.035em; }
.s-x { display: none; }
.s-body { max-width: 60ch; padding: 0 0 26px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.people { display: grid; gap: clamp(26px, 4vh, 42px); }
.person { display: grid; grid-template-columns: 88px minmax(0, 13rem) minmax(0, 1fr) 46px; grid-template-areas: "photo name bio li" "photo role bio li"; column-gap: clamp(16px, 2.4vw, 40px); align-items: start; }
.photo { grid-area: photo; width: 88px; height: 88px; overflow: hidden; border-radius: 50%; background: #ddd; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.name { grid-area: name; font: 800 24px/1.1 var(--font); letter-spacing: -.02em; padding-top: 6px; }
.role { grid-area: role; margin-top: 6px; font: 500 15px/1.35 var(--font); color: var(--ink-2); }
.person p { grid-area: bio; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; padding-top: 6px; }
.li-link { grid-area: li; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color .25s, color .25s; }
.li-link svg { width: 18px; height: 18px; }
.li-link:hover, .li-link:focus-visible { background: var(--ink); color: var(--base); }

/* ---------- price anchor, contact, footer ---------- */
.anchor-band { background: var(--ink); color: var(--base); }
.anchor-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding: clamp(44px, 7vh, 80px) var(--gut); }
.anchor-inner h2, .kicker, .fit-mail { font: 800 clamp(26px, min(2.6vw, 4.4vh), 44px)/1.05 var(--font); letter-spacing: -.03em; }
.anchor-inner h2 { max-width: 20ch; }
.btn-paper { color: var(--ink); background: var(--base); border-color: var(--base); }
.contact { background: var(--ink); color: var(--base); padding: clamp(40px, 6vh, 64px) var(--gut) clamp(36px, 5vh, 56px); }
.contact, .site-footer { box-shadow: 0 -1px 0 color-mix(in oklab, var(--base) 14%, transparent); }
.contact-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; }
.kicker { color: var(--base); }
.fit-mail {
  color: var(--base); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em;
  text-decoration-color: color-mix(in oklab, var(--base) 40%, transparent); transition: text-decoration-color .3s var(--ease);
}
.fit-mail:hover, .fit-mail:focus-visible { text-decoration-color: var(--base); }
.site-footer { background: var(--ink); color: color-mix(in oklab, var(--base) 70%, transparent); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; padding: 28px var(--gut) calc(30px + env(safe-area-inset-bottom)); font: 400 15px/1.4 var(--font); }
.foot nav, .foot .legal { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot a { text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--base); }

/* ---------- dialog ---------- */
.contact-dialog {
  margin: auto; padding: 0; border: 0; border-radius: 22px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  background: var(--paper); color: var(--ink); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .5);
}
.contact-dialog::backdrop { background: rgba(20, 20, 20, .45); backdrop-filter: blur(6px); }
.cd-form { position: relative; padding: clamp(26px, 5vw, 44px); }
.cd-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--base); color: var(--ink); font: 400 26px/1 var(--font); cursor: pointer; }
.cd-progress { font: 500 14px/1 var(--font); color: var(--ink-2); margin-bottom: 14px; }
.cd-choices { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.cd-choices legend, .cd-step h2 { font: 800 clamp(26px, 5vw, 34px)/1.08 var(--font); letter-spacing: -.03em; margin-bottom: 18px; padding: 0; }
.cd-choice { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; border-radius: 14px; background: var(--base); cursor: pointer; font: 500 16px/1.2 var(--font); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s var(--ease); }
.cd-choice:hover { box-shadow: inset 0 0 0 1.5px var(--line); }
.cd-choice input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.cd-choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.cd-step-error, .cd-status { min-height: 1.4em; margin-top: 10px; font: 500 15px/1.4 var(--font); color: #A1241F; }
.cd-status:not(.err) { color: var(--ink-2); }
.cd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.cd-field { display: grid; gap: 6px; margin-bottom: 14px; font: 500 15px/1.3 var(--font); }
.cd-field input, .cd-field textarea { width: 100%; border: 0; border-radius: 12px; background: var(--base); color: var(--ink); padding: 14px 16px; font: 400 16px/1.4 var(--font); box-shadow: inset 0 0 0 1.5px transparent; }
.cd-field input:focus, .cd-field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.cd-field textarea { resize: vertical; min-height: 120px; }
.contact-dialog .cd-mail { font: 500 15px/1 var(--font); }
.cd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- inner pages ---------- */
.page-sheet { background: var(--base); }
.page-head { padding: clamp(56px, 11vh, 140px) var(--gut) clamp(28px, 5vh, 56px); }
.page-head h1 { font: 800 clamp(56px, min(9vw, 14vh), 180px)/.92 var(--font); letter-spacing: -.05em; }
.lede { margin-top: clamp(16px, 3vh, 28px); max-width: 50ch; font: 400 clamp(18px, 1.5vw, 22px)/1.5 var(--font); color: var(--ink-2); }
.rates-wrap, .legal-wrap { padding: 0 var(--gut) clamp(72px, 13vh, 160px); }
.rate { display: grid; grid-template-columns: minmax(0, 3fr) minmax(max-content, 4fr) minmax(0, 5fr); /* the price never wraps; a longer one widens its column instead of running into the description */ gap: 10px clamp(20px, 3vw, 56px); align-items: baseline; padding: clamp(24px, 3.8vh, 40px) 0; }
.rate h2 { font: 500 clamp(19px, 1.5vw, 24px)/1.25 var(--font); }
.price { font: 800 clamp(28px, min(2.7vw, 4.4vh), 52px)/1 var(--font); letter-spacing: -.035em; white-space: nowrap; }
.rate .desc { font-size: 17px; color: var(--ink-2); max-width: 56ch; }
.tariff-stamp { margin-top: clamp(28px, 5vh, 48px); font: 400 14px/1.4 var(--font); color: var(--ink-2); }
.legal-prose { max-width: 70ch; }
.legal-prose h2 { font: 800 clamp(24px, 2vw, 32px)/1.15 var(--font); letter-spacing: -.02em; margin: clamp(32px, 5vh, 52px) 0 12px; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.error-main { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; justify-items: start; gap: 18px; padding: 40px var(--gut); }
.error-title { font: 800 clamp(52px, min(9vw, 14vh), 170px)/.92 var(--font); letter-spacing: -.05em; }
.lnk { font: 500 16px/1 var(--font); text-decoration: underline; text-underline-offset: 6px; padding: 8px 0; display: inline-block; }

/* ---------- motion (enhancement; the static page above is complete) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .h1 .ln { animation: rise-in .9s var(--ease) both; }
  .h1 .ln:nth-child(2) { animation-delay: .08s; }
  .h1 .ln:nth-child(3) { animation-delay: .16s; }
  .h1 .ln:nth-child(4) { animation-delay: .24s; }
  .cred, .hero-ctas { animation: fade-up .8s var(--ease) .45s both; }
  .card { animation: land .85s var(--spring) backwards; animation-delay: calc(.35s + var(--i) * .08s); }
  .contact-dialog[open] { animation: pop .45s var(--spring); }
}
@keyframes rise-in { from { clip-path: inset(0 0 100% 0); transform: translateY(.35em); } to { clip-path: inset(0 0 -20% 0); transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes land {
  from { opacity: 0; transform: translate(var(--x), 30%) scale(calc(var(--s) * .96)); }
  to { opacity: 1; transform: translate(var(--x)) scale(var(--s)); }
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card, .btn, .visit { transition: none; } }

/* ---------- viewport overrides (last, so they win) ---------- */
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .menu { display: block; }
  .sheet-inner { grid-template-columns: minmax(0, 1fr); }
  .sheet .sect-head h2 { position: static; }
  .rate { grid-template-columns: minmax(0, 1fr) auto; }
  .rate .desc { grid-column: 1 / -1; }
  .world, .world.w-r { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "text"; }
  .w-media { max-width: 720px; }
}
@media (max-width: 759px) {
  :root { --header-h: 64px; }
  body { font-size: 16px; }
  .bwm svg { height: 22px; }
  .top-mail { display: none; }
  .hero { padding-bottom: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
  .h1 { font-size: clamp(32px, min(10.5vw, 6.2svh), 60px); letter-spacing: -.05em; }
  .hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-ctas .btn { width: 100%; min-height: 50px; }
  /* the stack is the first screen's floor: the work sits on the fold */
  .pile { position: relative; right: auto; bottom: auto; width: 100%; }
  .card { width: 72%; }
  .card[data-slot="1"] { --x: 14cqi; --s: .92; }
  .card[data-slot="2"], .card[data-slot="3"], .card[data-slot="4"] { --x: 27cqi; --s: .84; }
  .card[data-slot="3"], .card[data-slot="4"] { opacity: 0; pointer-events: none; }
  .contact-inner { flex-direction: column; align-items: flex-start; }
  .world, .world.w-r { padding: 64px var(--gut) 76px; gap: 44px; }
  .phone { width: 28%; bottom: -12%; right: -2%; }
  .person { grid-template-columns: 64px minmax(0, 1fr) 46px; grid-template-areas: "photo name li" "photo role li" "bio bio bio"; row-gap: 4px; }
  .photo { width: 64px; height: 64px; }
  .person p { margin-top: 12px; }
  .anchor-inner { flex-direction: column; align-items: flex-start; }
  .rate { grid-template-columns: minmax(0, 1fr); }
  .price { white-space: normal; }
}
@media (max-width: 359px) { .price { font-size: 26px; } }
@media (min-width: 760px) and (max-height: 820px) {
  .pile { width: min(56vw, 1200px); }
}
@media (forced-colors: active) {
  .card, .screen, .phone, .cd-choice, .cd-field input, .cd-field textarea, .btn, .status, .visit, .li-link { border: 1px solid CanvasText; }
}

@media (max-width: 759px) and (max-height: 700px) { .pile { display: none; } } /* short phones: headline + actions, the first world peeks instead */