/* 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), background-color .25s var(--ease), color .25s var(--ease);
}
.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, .hero-copy .btn { 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; }
html:lang(en) .h1 { font-size: clamp(44px, min(6.8vw, 10.2vh), 168px); } /* four lines in EN */
.cred {
  margin-top: clamp(18px, 3.6vh, 40px); max-width: 30ch;
  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: 4vh;
  width: min(66vw, 1320px); aspect-ratio: 10 / 3.1;
}
.card {
  --x: 0%; --y: 0%; --r: 0deg; --fx: 0px; --fy: 0px; --fr: 0deg; --lift: 0px;
  position: absolute; left: 0; top: 0; width: 33%; 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 28px 60px -26px rgba(20, 16, 10, .5);
  transform: translate(calc(var(--x) + var(--fx)), calc(var(--y) + var(--fy) - var(--lift))) rotate(calc(var(--r) + var(--fr)));
  transform-origin: 50% 100%;
  transition: transform .6s var(--spring), box-shadow .4s var(--ease);
  cursor: pointer; will-change: transform;
}
.card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* a hand of five: one arc, rotation monotonic -6..6deg, the photographic sites in front */
.card:nth-child(1) { --x: 0%;   --y: 32%; --r: -6deg; z-index: 1; }
.card:nth-child(2) { --x: 52%;  --y: 12%; --r: -3deg; z-index: 3; }
.card:nth-child(3) { --x: 104%; --y: 2%;  --r: 0deg;  z-index: 5; }
.card:nth-child(4) { --x: 156%; --y: 12%; --r: 3deg;  z-index: 3; }
.card:nth-child(5) { --x: 208%; --y: 32%; --r: 6deg;  z-index: 1; }
.card.lift { --lift: 18px; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 40px 80px -24px rgba(20, 16, 10, .55); z-index: 9; }

/* ---------- references: the page takes each client's world ---------- */
.works { background: var(--base); }
.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);
  scroll-margin-top: var(--header-h);
  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);
}
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.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);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.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 { background: var(--base); }
.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 { border-top: 1.5px solid var(--ink); }
.svc:last-child { border-bottom: 1.5px solid var(--ink); }
.svc summary { list-style: none; cursor: default; pointer-events: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 22px 0; }
.svc summary::-webkit-details-marker { display: none; }
.s-t { font: 800 clamp(26px, min(2.9vw, 5vh), 54px)/1.02 var(--font); letter-spacing: -.035em; }
.s-x { display: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 400 28px/1 var(--font); box-shadow: inset 0 0 0 1.5px var(--ink); transition: transform .45s var(--spring), background-color .25s, color .25s; }
.svc[open] .s-x { transform: rotate(45deg); background: var(--ink); color: var(--base); }
.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; display: block; font: 800 24px/1.1 var(--font); letter-spacing: -.02em; padding-top: 6px; }
.role { grid-area: role; display: block; 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(64px, 12vh, 140px) var(--gut); }
.anchor-inner h2 { font: 800 clamp(34px, min(4.4vw, 7vh), 88px)/1 var(--font); letter-spacing: -.04em; max-width: 20ch; }
.btn-paper { color: var(--ink); background: var(--base); border-color: var(--base); }
.contact { padding: clamp(90px, 16vh, 200px) var(--gut) clamp(70px, 12vh, 150px); }
.kicker { font: 500 clamp(18px, 1.5vw, 24px)/1.3 var(--font); color: var(--ink-2); margin-bottom: 14px; }
.fit-mail {
  display: inline-block; font: 800 clamp(32px, min(10.6vw, 19vh), 230px)/.95 var(--font); letter-spacing: -.055em; margin-left: -.04em;
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 .06em no-repeat; padding-bottom: .05em;
  transition: background-size .6s var(--ease);
}
.fit-mail:hover, .fit-mail:focus-visible { background-size: 100% .06em; }
.site-footer { border-top: 1px solid var(--line); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; padding: 30px var(--gut) calc(30px + env(safe-area-inset-bottom)); font: 400 15px/1.4 var(--font); color: var(--ink-2); }
.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(--ink); }

/* ---------- 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-step[hidden] { display: none; }
.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); color: var(--ink); }
.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, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: 10px clamp(20px, 3vw, 56px); align-items: baseline; padding: clamp(24px, 3.8vh, 40px) 0; border-top: 1.5px solid var(--ink); }
.rate:last-child { border-bottom: 1.5px solid var(--ink); }
.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; font-variant-numeric: tabular-nums; 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) both; animation-delay: calc(.35s + var(--i) * .09s); }
  .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(calc(var(--x) + 6%), calc(var(--y) - 60%)) rotate(calc(var(--r) * -2)) scale(1.08); }
  to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card, .btn, .visit, .s-x { 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; }
}
@media (max-width: 1080px) and (min-width: 760px) {
  .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: 20px; 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 pile is the first screen's floor: it bleeds off the bottom edge, so the work is on the fold */
  .pile { position: relative; left: auto; right: auto; bottom: auto; width: 100%; aspect-ratio: 16 / 7.4; }
  .card { width: 52%; }
  .card:nth-child(1), .card:nth-child(5) { display: none; }
  .card:nth-child(2) { --x: 0%;  --y: 16%; }
  .card:nth-child(3) { --x: 46%; --y: 4%; }
  .card:nth-child(4) { --x: 92%; --y: 16%; }
  .fit-mail { font-size: clamp(40px, 13.5vw, 64px); }
  .world, .world.w-r { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "text"; padding: 64px var(--gut) 76px; gap: 44px; }
  .phone { width: 28%; bottom: -12%; left: auto; 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); bottom: 3vh; }
}
@media (forced-colors: active) {
  .card, .screen, .phone, .cd-choice, .cd-field input, .cd-field textarea, .btn, .status, .visit, .li-link, .s-x { border: 1px solid CanvasText; }
  .fit-mail { background: none; text-decoration: underline; }
}

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