/* ==========================================================================
   NUMU MEDIA 2.0 — design system
   One family (Satoshi), one dark canvas, hairlines instead of cards,
   photography brings the colour. Tokens first, components after.
   ========================================================================== */

/* ---------- 1. Fonts ---------- */
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* metric-compatible fallback so the swap does not reflow the hero */
@font-face { font-family: "Satoshi Fallback"; src: local("Arial"), local("Helvetica Neue"); size-adjust: 98%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }

/* ---------- 2. Tokens ---------- */
:root {
  color-scheme: dark;

  /* canvas + surface depth stack (never pure black, never pure white) */
  --bg: #08080a;
  --surface-1: #0f0f12;
  --surface-2: #151519;
  --surface-3: #1c1c21;
  --line: rgba(244, 244, 242, 0.10);
  --line-strong: rgba(244, 244, 242, 0.18);
  --text: #f2f2ef;
  --text-2: rgba(242, 242, 239, 0.72);
  --text-3: rgba(242, 242, 239, 0.58);
  --text-inverse: #0b0b0d;
  --accent: #b9a8ff;            /* the only chromatic signal: focus, selection, live underline */
  --accent-soft: rgba(185, 168, 255, 0.22);
  --project: #2f4a35;           /* overridden per case: project-coloured surfaces */

  /* type */
  --font: "Satoshi", "Satoshi Fallback", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-xl: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);       /* 44 → 96 */
  --fs-l:  clamp(2.125rem, 1.1rem + 3.9vw, 4rem);      /* 34 → 64 */
  --fs-m:  clamp(1.5rem, 1.05rem + 1.6vw, 2.25rem);    /* 24 → 36 */
  --fs-title: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);  /* 20 → 24 */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem); /* 18 → 21 */
  --fs-body: 1.0625rem;                                 /* 17 */
  --fs-small: 0.9375rem;                                /* 15 */
  --fs-meta: 0.8125rem;                                 /* 13 */
  --lh-tight: 0.98;
  --lh-snug: 1.08;
  --lh-body: 1.6;
  --track-display: -0.03em;
  --track-l: -0.025em;
  --track-m: -0.015em;

  /* space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(5rem, 4rem + 6vw, 9.5rem);
  --section-tight: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  --container: 1440px;
  --gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);

  /* shape: three radii, one rule. Media 6px, controls pill, surfaces 12px. */
  --r-media: 6px;
  --r-surface: 12px;
  --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 160ms;
  --d-base: 320ms;
  --d-slow: 700ms;
  --d-reveal: 900ms;

  --header-h: 72px;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100svh;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
strong { font-weight: 500; }
em { font-style: italic; }

/* browser surfaces belong to the design */
::selection { background: var(--accent-soft); color: var(--text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--bg); }
html { scrollbar-color: var(--surface-3) var(--bg); scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
a:focus-visible, button:focus-visible { border-radius: var(--r-pill); }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 0.75rem 1.25rem; background: var(--text); color: var(--text-inverse); border-radius: var(--r-pill); font-weight: 500; }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* cross-document page transition: one quiet fade (progressive) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- 4. Typography roles ---------- */
.display-xl { font-size: var(--fs-xl); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--track-display); text-wrap: balance; }
.display-l  { font-size: var(--fs-l);  font-weight: 400; line-height: 1.02; letter-spacing: var(--track-l); text-wrap: balance; }
.display-m  { font-size: var(--fs-m);  font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--track-m); text-wrap: balance; }
.title      { font-size: var(--fs-title); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.lead       { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; max-width: 58ch; }
.body       { font-size: var(--fs-body); color: var(--text-2); max-width: 66ch; text-wrap: pretty; }
.body p + p, .prose p + p { margin-top: 1.1em; }
.small      { font-size: var(--fs-small); color: var(--text-2); }
.meta       { font-size: var(--fs-meta); color: var(--text-3); letter-spacing: 0.01em; }
.num        { font-variant-numeric: tabular-nums; }
.muted      { color: var(--text-3); }
.text-2     { color: var(--text-2); }

/* ---------- 5. Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); }
.full-bleed { width: 100%; }
section, .section { padding-block: var(--section); }
.section-tight { padding-block: var(--section-tight); }
.hairline-top { border-top: 1px solid var(--line); }
.hairline-bottom { border-bottom: 1px solid var(--line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head .lead { margin-top: var(--s-4); }
.frame { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--surface-2); isolation: isolate; }
/* the project window, one language everywhere: the case cover by default, the real homepage on hover or keyboard focus.
   A 300-500 ms crossfade with a touch of scale; no flips, no blur. Touch devices keep the cover. */
.pv { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--surface-2); isolation: isolate; }
.pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv .pv-cover { object-position: 50% 40%; transition: transform 1.1s var(--ease-out); }
.pv .pv-site { object-position: 50% 0; opacity: 0; transform: scale(1.04); z-index: 1; transition: opacity 420ms var(--ease-out), transform 900ms var(--ease-out); }
.pv .pv-site.is-fallback { object-position: 50% 0; }
:is(a, .chapter, .work-item):is(:hover, :focus-visible, :focus-within) .pv .pv-site { opacity: 1; transform: none; }
:is(a, .chapter, .work-item):is(:hover, :focus-visible, :focus-within) .pv .pv-cover { transform: scale(1.03); }
@media (hover: none) { .pv .pv-site { display: none; } }
/* the mobile capture stands in for a missing desktop capture only in small windows; blown up in a wide window it is not the site */
.arc-item.span-7 .pv-site.is-fallback, .arc-item.span-12 .pv-site.is-fallback, .ch-window .pv-site.is-fallback { display: none; }
@media (prefers-reduced-motion: reduce) { .pv .pv-site, .pv .pv-cover { transition: opacity 200ms linear; transform: none !important; } }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 6. Controls ---------- */
.btn {
  --btn-bg: var(--text); --btn-fg: var(--text-inverse); --btn-line: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0 1.5rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.005em; white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:hover { --btn-bg: #ffffff; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-secondary { --btn-bg: transparent; --btn-fg: var(--text); --btn-line: var(--line-strong); }
.btn-secondary:hover { --btn-bg: rgba(242, 242, 239, 0.07); --btn-line: rgba(242, 242, 239, 0.35); }
.btn-small { min-height: 2.5rem; padding: 0 1.125rem; font-size: 0.875rem; }
.btn .arrow { width: 1em; height: 1em; transition: transform var(--d-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: var(--fs-small); color: var(--text); position: relative; padding: 0.6rem 0; min-height: 44px; white-space: nowrap; flex: none; }
.link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0.45rem; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--ease-out); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--d-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-inline { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--text-3); transition: text-decoration-color var(--d-fast); }
.link-inline:hover { text-decoration-color: var(--accent); }

/* ---------- 7. Header / navigation ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; transition: background-color var(--d-base) var(--ease-out), border-color var(--d-base), backdrop-filter var(--d-base); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(8, 8, 10, 0.72); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border-bottom-color: var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); }
.logo { display: inline-flex; align-items: center; color: var(--text); padding-block: 0.7rem; }
.logo svg { height: 22px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); }
.nav a { font-size: var(--fs-small); color: var(--text-2); position: relative; padding: 0.4rem 0; transition: color var(--d-fast); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--ease-out); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: var(--s-4); }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-pill); }
.menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text); position: relative; transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast); }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--text); transition: transform var(--d-base) var(--ease-out), top var(--d-base) var(--ease-out); }
.menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
body.menu-open .menu-toggle span { background: transparent; }
body.menu-open .menu-toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: none; flex-direction: column; padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-7); overflow: auto; }
.menu[data-open="true"] { display: flex; }
.menu-links { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.menu-links a { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; border-bottom: 1px solid var(--line); font-size: clamp(1.75rem, 6vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.1; }
.menu-links a svg { width: 1.25rem; height: 1.25rem; color: var(--text-3); }
.menu-foot { margin-top: auto; padding-top: var(--s-7); display: grid; gap: var(--s-4); }
.menu-foot .social { display: flex; gap: var(--s-5); }
.menu-links a, .menu-foot > * { opacity: 0; transform: translateY(12px); }
.menu[data-open="true"] .menu-links a, .menu[data-open="true"] .menu-foot > * { animation: menu-in 520ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes menu-in { to { opacity: 1; transform: none; } }
body.menu-open { overflow: hidden; }

@media (max-width: 1023px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 639px) { .header-actions .btn { display: none; } }
@media (max-width: 480px) { :root { --header-h: 64px; } }

/* ---------- 8. Hero ---------- */
.hero { position: relative; min-height: max(640px, 100svh); display: grid; align-items: end; padding: calc(var(--header-h) + var(--s-8)) 0 clamp(3.5rem, 3rem + 4vw, 6.5rem); overflow: hidden; isolation: isolate; }
.smoke { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.smoke canvas { width: 100%; height: 100%; }
.smoke::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to bottom, rgba(8, 8, 10, 0) 0%, var(--bg) 100%); }
.smoke-fallback { position: absolute; inset: 0; background: radial-gradient(60% 60% at 70% 45%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 45%, rgba(8,8,10,0) 75%); }
.hero .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-6); }
.hero-copy { grid-column: 1 / span 9; }
.hero-title { max-width: 13ch; }
/* word masks: the mask box is padded past the em box so ascenders (Å, É) and descenders (g, j, p, q, y)
   are never clipped by overflow:hidden at display leading; negative margins keep the leading unchanged */
.hero-title .word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0 0.18em; margin: -0.1em 0 -0.18em; }
.hero-title .word > span { display: inline-block; }
.hero-lead { margin-top: var(--s-5); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* founder card: one small raised surface in the hero's last three columns, sitting on the buttons' baseline.
   Translucent like the scrolled header, hairline edge, no glow. The whole card is the link. */
.hero-founder {
  grid-column: 10 / -1; justify-self: end; align-self: end;
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 0.5rem 0.9rem 0.5rem 0.5rem; max-width: 100%;
  border-radius: var(--r-surface); border: 1px solid var(--line-strong);
  background: rgba(15, 15, 18, 0.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  color: var(--text); text-decoration: none;
  transition: border-color var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.hero-founder-photo { flex: none; width: 44px; height: 44px; border-radius: var(--r-media); overflow: hidden; background: var(--surface-2); }
.hero-founder-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
.hero-founder-text { display: grid; gap: 0.1rem; line-height: 1.25; white-space: nowrap; }
.hero-founder-cta { font-size: var(--fs-small); font-weight: 500; }
.hero-founder-role { font-size: var(--fs-meta); color: var(--text-3); transition: color var(--d-base) var(--ease-out); }
.hero-founder-arrow { width: 16px; height: 16px; margin-left: var(--s-2); color: var(--text-2); transition: transform var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); }
.hero-founder:hover, .hero-founder:focus-visible { border-color: rgba(242, 242, 239, 0.32); background: rgba(21, 21, 25, 0.7); transform: translateY(-1px); }
.hero-founder:hover .hero-founder-photo img { transform: scale(1.06); }
.hero-founder:hover .hero-founder-role { color: var(--text-2); }
.hero-founder:hover .hero-founder-arrow { transform: translate(2px, -2px); color: var(--text); }
.hero-founder:active { transform: translateY(0); }
.hero-founder:focus-visible { border-radius: var(--r-surface); }
@media (prefers-reduced-transparency: reduce) { .hero-founder { background: var(--surface-1); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* entrance: one authored moment (only when JS runs, so a failed script never hides the page) */
.js .hero [data-enter] { opacity: 0; transform: translateY(18px); }
.js .hero-title .word > span { transform: translateY(135%); }
.hero.is-ready [data-enter] { animation: enter 900ms var(--ease-out) forwards; animation-delay: var(--delay, 0ms); }
.hero.is-ready .hero-title .word > span { animation: rise 1000ms var(--ease-out) forwards; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
@keyframes enter { to { opacity: 1; transform: none; } }
@keyframes rise { to { transform: none; } }

@media (max-width: 1279px) { .hero-copy { grid-column: 1 / span 8; } .hero-founder { grid-column: 9 / -1; } }
@media (max-width: 1023px) {
  .hero-copy { grid-column: 1 / -1; }
  /* below the copy, in flow, so it never covers the headline or the buttons */
  .hero-founder { grid-column: 1 / -1; justify-self: start; margin-top: var(--s-2); }
}
@media (max-width: 640px) {
  .hero { min-height: max(560px, 92svh); padding-bottom: var(--s-8); }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-founder { margin-top: 0; }
}

/* ---------- 9. Clients marquee ---------- */
/* Logos sit on the page grid (label cols 1–3, belt cols 4–12) and share one optical axis: every logo is
   trimmed to its ink bounds and gets its own height (--logo-h, computed at build time from aspect ratio
   and ink density), so a wide wordmark and a square badge carry the same visual weight. Original artwork,
   no colour filters: the O's Barbershop engraving keeps its black stripes. Logos added in runde 12 are prepared
   as white-out PNGs (ink -> white with alpha, trimmed) so they sit on the dark ground without CSS filters.
   The track is duplicated once and travels -50 % per loop, so the duration scales with the number of logos
   (about 3 s per logo) to keep the speed constant. */
.clients { padding-block: var(--s-7); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); --logo-scale: 1; }
.clients .grid { align-items: center; }
.clients .meta { grid-column: 1 / span 3; }
.marquee { grid-column: 4 / -1; min-width: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: clamp(2.75rem, 4.5vw, 5rem); width: max-content; height: calc(64px * var(--logo-scale)); animation: marquee 76s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { flex: none; height: calc(var(--logo-h, 40px) * var(--logo-scale)); width: auto; max-width: calc(164px * var(--logo-scale)); object-fit: contain; opacity: 0.8; transition: opacity var(--d-base); }
.marquee-track img:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(calc(-50% - clamp(2.75rem, 4.5vw, 5rem) / 2)); } }
@media (max-width: 1023px) { .clients .meta { grid-column: 1 / span 2; } .marquee { grid-column: 3 / -1; } }
@media (max-width: 767px) { .clients { padding-block: var(--s-6); --logo-scale: 0.86; } .clients .meta, .marquee { grid-column: 1 / -1; } .marquee { margin-top: var(--s-4); } }
@media (max-width: 480px) { .clients { --logo-scale: 0.78; } }

/* ---------- 10. Selected cases: project chapters ----------
   Four compact rows on the 12-column grid, typography first. Dossier column (number, platform, service, industry),
   copy column (client, story, a second line that appears on hover, the affordance), visual column (one small
   window or two, plus the proof). The first chapter is featured: a taller window. The window format per case comes
   from cases.json → home_visual: wide | portrait (pushed inward, proof beside it) | duo (phone + detail) | strip.
   One hover language: the row lifts a shade, the number and name come forward, the window nudges, the arrow moves. */
.section-label { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.section-label::before { content: ""; width: 1.25rem; height: 1px; background: var(--text-3); }
.chapters-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.chapters-head .display-l { max-width: 16ch; }
.chapters-head .link-arrow { margin-bottom: 0.35rem; }
.chapters { border-top: 1px solid var(--line); }
.chapter { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.chapter::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--s-5)); border-radius: var(--r-media); background: rgba(242, 242, 239, 0.03); opacity: 0; transition: opacity var(--d-base) var(--ease-out); pointer-events: none; }
.chapter::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform var(--d-slow) var(--ease-out); }
.chapter:hover::before, .chapter:focus-within::before { opacity: 1; }
.chapter:hover::after, .chapter:focus-within::after { transform: scaleX(1); }
.ch-link { position: absolute; inset: 0; z-index: 3; }
.ch-link:focus-visible { outline-offset: 6px; border-radius: var(--r-media); }

/* dossier column */
.ch-meta { grid-column: 1 / span 2; grid-row: 1 / span 2; display: grid; gap: var(--s-4); align-content: start; padding-top: 0.35rem; }
.ch-n { font-size: var(--fs-body); font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; transition: color var(--d-base) var(--ease-out); }
.ch-meta-list { display: grid; gap: 0.15rem; font-size: var(--fs-meta); color: var(--text-3); }
.ch-meta-list span:first-child { color: var(--text-2); }
.ch-meta-list span:empty { display: none; }
.chapter:hover .ch-n, .chapter:focus-within .ch-n { color: var(--text); }

/* copy column */
.ch-copy { grid-column: 3 / span 5; grid-row: 1; display: grid; gap: var(--s-4); align-content: start; max-width: 50ch; }
.ch-name { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; transition: transform var(--d-base) var(--ease-out); }
.chapter:hover .ch-name, .chapter:focus-within .ch-name { transform: translateX(4px); }
.ch-story { font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.ch-extra { font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
.ch-extra-label { color: var(--text-2); margin-right: 0.5rem; }
.ch-extra-label::after { content: ":"; }
.chapter:hover .ch-extra, .chapter:focus-within .ch-extra { opacity: 1; transform: none; }
@media (hover: none) { .ch-extra { opacity: 1; transform: none; } }
.ch-more { grid-column: 3 / span 5; grid-row: 2; align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); margin-top: var(--s-4); transition: color var(--d-base) var(--ease-out); }
.ch-more svg { width: 0.85em; height: 0.85em; transition: transform var(--d-base) var(--ease-out); }
.chapter:hover .ch-more, .chapter:focus-within .ch-more { color: var(--text); }
.chapter:hover .ch-more svg, .chapter:focus-within .ch-more svg { transform: translate(2px, -2px); }

/* proof: small, a label and one or two numbers */
.ch-proof { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ch-proof-label { font-size: var(--fs-meta); color: var(--text-3); }
.ch-metric { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--s-3); }
.ch-metric .value { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.ch-metric .label { font-size: var(--fs-meta); color: var(--text-3); }
.ch-copy .ch-proof { max-width: 36ch; }

/* visual column: small windows, hairline framed, project colour behind the picture */
.ch-visual { grid-column: 9 / span 4; grid-row: 1 / span 2; display: grid; gap: var(--gap); align-content: start; transition: transform var(--d-slow) var(--ease-out); }
.chapter.is-wide .ch-visual { grid-column: 8 / span 5; }
.chapter:hover .ch-visual, .chapter:focus-within .ch-visual { transform: translateX(-4px); }
.ch-window { position: relative; overflow: hidden; border-radius: var(--r-media); border: 1px solid var(--line); background: color-mix(in oklab, var(--project) 40%, var(--bg)); }
.ch-window img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ch-window.pv .pv-cover { object-position: 50% 30%; }
.ch-window-wide { aspect-ratio: 16 / 10; }
.ch-window-portrait { aspect-ratio: 4 / 5; }
.ch-window-phone { aspect-ratio: 3 / 4; }
.ch-window-phone img { object-position: 50% 0; }
.ch-window-detail { aspect-ratio: 5 / 4; }
.ch-window-detail img { object-position: 60% 45%; }
.ch-window-strip { aspect-ratio: 16 / 7; }
.ch-window-strip img { object-position: 50% 42%; }
/* formats */
.chapter.is-portrait .ch-visual { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: end; }
.chapter.is-portrait .ch-visual .ch-proof { border-top: 0; padding-top: 0; }
.chapter.is-duo .ch-visual { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: end; }
.chapter.is-strip .ch-visual .ch-proof { grid-template-columns: auto 1fr 1fr; align-items: baseline; gap: var(--s-5); }
.chapter.is-strip .ch-visual .ch-proof .ch-metric { grid-template-columns: 1fr; gap: var(--s-1); }
.chapter.is-strip .ch-visual .ch-proof-label { grid-row: 1; align-self: start; padding-top: 0.3rem; }

/* staggered entrance: dossier, then copy, then the window; nothing hides without JS or with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .js .chapter[data-reveal] { opacity: 1; transform: none; }
  .js .chapter[data-reveal] > .ch-meta, .js .chapter[data-reveal] > .ch-copy, .js .chapter[data-reveal] > .ch-visual { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
  .js .chapter[data-reveal] > .ch-copy { transition-delay: 70ms; }
  .js .chapter[data-reveal] > .ch-visual { transition-delay: 140ms, 140ms; }
  .js .chapter[data-reveal].is-in > .ch-meta, .js .chapter[data-reveal].is-in > .ch-copy, .js .chapter[data-reveal].is-in > .ch-visual { opacity: 1; transform: none; }
  .js .chapter[data-reveal].is-in > .ch-visual { transition: opacity 0.9s var(--ease-out) 140ms, transform var(--d-slow) var(--ease-out); }
}

@media (max-width: 1279px) {
  .ch-copy { grid-column: 3 / span 5; }
  .ch-visual, .chapter.is-wide .ch-visual { grid-column: 8 / span 5; }
}
@media (max-width: 1023px) {
  /* tablet: dossier and copy on top, the visual and the proof below, the affordance last; no three-column squeeze */
  .chapter { row-gap: var(--s-5); }
  .ch-meta { grid-column: 1 / span 3; grid-row: 1; }
  .ch-copy { grid-column: 4 / span 9; grid-row: 1; max-width: 52ch; }
  .ch-visual, .chapter.is-wide .ch-visual { grid-column: 4 / span 9; grid-row: 2; }
  .ch-more { grid-column: 4 / span 9; grid-row: 3; margin-top: 0; }
  .chapter.is-wide .ch-window-wide { aspect-ratio: 2 / 1; }
  .chapter.is-strip .ch-window-strip { aspect-ratio: 2 / 1; }
}
@media (max-width: 767px) {
  /* compact chapters: number + client, meta line, story, one window, proof, the affordance */
  .chapters-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .chapter { display: grid; grid-template-columns: 1fr; row-gap: var(--s-4); padding: var(--s-6) 0; }
  .chapter::before { inset: 0 calc(-1 * var(--s-4)); }
  .ch-meta { grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); padding-top: 0; }
  .ch-meta-list { display: flex; gap: var(--s-3); }
  .ch-meta-list span + span::before { content: "\00B7"; margin-right: var(--s-3); color: var(--text-3); }
  /* the two columns dissolve into one ordered stack: name, story, window, proof, affordance */
  .ch-copy, .ch-visual { display: contents; }
  .ch-meta { grid-row: auto; order: 0; }
  .ch-name { order: 1; font-size: 1.625rem; }
  .ch-story { order: 2; }
  .ch-extra { display: none; }
  .ch-window { order: 3; aspect-ratio: 16 / 9; }
  .ch-window-phone { display: none; }
  .ch-proof, .ch-copy .ch-proof { order: 4; display: grid; grid-template-columns: 1fr; border-top: 0; padding-top: 0; max-width: none; }
  .ch-more { order: 5; grid-column: 1; grid-row: auto; margin-top: 0; }
  .chapter.is-strip .ch-visual .ch-proof { grid-template-columns: 1fr; }
}

/* ---------- 10b. "Se alle cases": the transition out of the portfolio chapter ----------
   One link, the width of the page: a large typographic line, the count beneath it, four small crops that
   surface on hover, and the arrow. Hairlines above and below draw in as it enters; the words arrive from
   opposite sides. It closes the chapter before the page turns to the person behind numu. */
.work { padding-bottom: 0; }   /* the last chapter's hairline is the band's top edge */
.cases-cta-section { padding: 0; overflow: clip; }   /* the words arrive from outside the container */
.cases-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--gap); align-items: center; padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.25rem); color: inherit; -webkit-tap-highlight-color: transparent; }
.cases-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform-origin: right; }
.cases-cta:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: var(--r-media); }
.cases-cta-title { grid-column: 1; grid-row: 1; font-size: clamp(2.75rem, 1.25rem + 6.5vw, 6.75rem); line-height: 0.95; letter-spacing: -0.035em; font-weight: 400; display: flex; flex-wrap: wrap; gap: 0 0.28em; }
.cases-cta-title .w { display: inline-block; transition: transform var(--d-slow) var(--ease-out); }
.cases-cta-meta { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5); color: var(--text-3); font-size: var(--fs-small); }
.cases-cta-thumbs { display: flex; gap: 6px; }
.cases-cta-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.cases-cta-arrow { grid-column: 2; grid-row: 1 / span 2; width: clamp(3rem, 1.5rem + 5vw, 6.25rem); height: auto; color: var(--text); transition: transform var(--d-slow) var(--ease-out); }
.cases-cta:hover .cases-cta-title .w, .cases-cta:focus-visible .cases-cta-title .w { transform: translateX(0.08em); }
.cases-cta:hover .cases-cta-thumbs img, .cases-cta:focus-visible .cases-cta-thumbs img { opacity: 1; transform: none; }
.cases-cta:hover .cases-cta-arrow, .cases-cta:focus-visible .cases-cta-arrow { transform: translate(0.12em, -0.12em); }
@media (hover: none), (max-width: 640px) { .cases-cta-thumbs img { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .cases-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .cases-cta-title { font-size: clamp(2.5rem, 1rem + 11vw, 4rem); flex-direction: column; gap: 0; }
  .cases-cta-meta { grid-column: 1 / -1; flex-wrap: wrap; gap: var(--s-4); }
  .cases-cta-arrow { grid-row: 1; width: 2.75rem; align-self: end; margin-bottom: 0.15em; }
}
.about { padding-top: clamp(4rem, 3rem + 4vw, 7rem); }

/* ---------- 11. About / Bag numu ---------- */
.about .grid { align-items: start; }
.about-portrait { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.about-portrait img { filter: saturate(0.9); }
.about-body { grid-column: 7 / span 6; display: grid; gap: var(--s-6); }
.about-body .lead { max-width: 52ch; }
.cv { border-top: 1px solid var(--line); }
.cv li { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: var(--s-4); padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.cv li span:nth-child(2) { color: var(--text-2); }
.cv li span:nth-child(3) { color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Platforme vi arbejder med: the footer's marquee, scaled down so it reads as a line of the story rather than a
   band of its own. Same optical heights (--h per logo), a slower loop, and the shared reduced-motion fallback. */
.about-platforms { min-width: 0; display: grid; gap: var(--s-3); }
.about-platforms .pf-track { height: 40px; animation-name: pf-scroll-quarter; animation-duration: 68s; }
/* four copies stepped by a quarter: the strip is wider than one set of logos, so a half-step would reach the end of the track */
@keyframes pf-scroll-quarter { to { transform: translateX(-25%); } }
.about-platforms .pf-logo { height: calc(var(--h, 32px) * 0.88); max-width: 150px; }
.about-platforms .pf-track li { padding-right: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.about-platforms .pf-marquee { mask-image: linear-gradient(to right, transparent, #000 5%, #000 93%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 93%, transparent); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding-top: var(--s-5); }
.stats li { display: grid; gap: var(--s-2); align-content: start; }
.stats .value { display: block; font-size: var(--fs-m); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats .label { display: block; font-size: var(--fs-small); color: var(--text-3); }
@media (max-width: 1023px) { .about-portrait { grid-column: 1 / span 6; } .about-body { grid-column: 7 / span 6; } }
@media (max-width: 767px) { .about-portrait { grid-column: 1 / -1; max-width: 420px; } .about-body { grid-column: 1 / -1; margin-top: var(--s-5); } .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } .stats .value { font-size: 1.5rem; } }

/* ---------- 12. Services: a list, not cards. Every row is a link to its service page. ----------
   The row keeps its two-column shape (name | text); a third column holds the affordance. Hover and focus share
   the chapters' language: the row lifts a shade, the name comes forward, the arrow moves, the divider brightens. */
.services .grid { align-items: start; }
.services-intro { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-6)); display: grid; gap: var(--s-5); }
.services-list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.services-list li { position: relative; border-bottom: 1px solid var(--line); }
.services-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform var(--d-slow) var(--ease-out); }
.services-list li:hover::after, .services-list li:focus-within::after { transform: scaleX(1); }
.service-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; column-gap: var(--gap); align-items: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.service-row::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--s-5)); border-radius: var(--r-media); background: rgba(242, 242, 239, 0.03); opacity: 0; transition: opacity var(--d-base) var(--ease-out); pointer-events: none; }
.service-row:hover::before, .service-row:focus-visible::before { opacity: 1; }
.service-row:focus-visible { outline-offset: 6px; border-radius: var(--r-media); }
.services-list .display-m { font-weight: 400; font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem); hyphens: manual; overflow-wrap: anywhere; transition: transform var(--d-base) var(--ease-out); }
.service-row:hover .display-m, .service-row:focus-visible .display-m { transform: translateX(4px); }
.service-row .body { transition: color var(--d-base) var(--ease-out); }
.service-row:hover .body, .service-row:focus-visible .body { color: var(--text); }
.service-go { display: inline-flex; align-items: center; gap: var(--s-3); align-self: start; margin-top: 0.15rem; width: 44px; height: 44px; justify-content: center; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-2); transition: border-color var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); }
.service-go-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.service-go svg { width: 18px; height: 18px; transition: transform var(--d-base) var(--ease-out); }
.service-row:hover .service-go, .service-row:focus-visible .service-go { border-color: var(--line-strong); background: rgba(242, 242, 239, 0.06); color: var(--text); }
.service-row:hover .service-go svg, .service-row:focus-visible .service-go svg { transform: translateX(3px); }
.services-also { grid-column: 6 / span 7; margin-top: var(--s-6); max-width: 60ch; }
.services-also span { color: var(--text); }
@media (max-width: 1023px) { .services-intro { grid-column: 1 / -1; position: static; } .services-list, .services-also { grid-column: 1 / -1; } }
@media (max-width: 640px) { .service-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "text text"; gap: var(--s-3) var(--s-4); } .service-row .display-m { grid-area: name; } .service-row .body { grid-area: text; } .service-go { grid-area: go; width: 40px; height: 40px; } .service-row::before { inset: 0 calc(-1 * var(--s-4)); } }

/* a small monochrome platform mark beside the name (WordPress, Shopify, Figma): secondary, never a badge */
.service-mark { display: inline-block; vertical-align: -0.08em; height: 0.72em; width: auto; margin-left: 0.35em; opacity: 0.5; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
.service-row:hover .service-mark, .service-row:focus-visible .service-mark { opacity: 0.85; }

/* ---------- 13. Process: photo left (sticky), stages right, one composition ---------- */
.process .grid { align-items: start; }
.process-media { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.process-media .frame { aspect-ratio: 4 / 5; }
.process-media img { object-position: 50% 42%; }
.process-body { grid-column: 7 / span 6; display: grid; gap: var(--s-5); }
.process-label { display: flex; align-items: center; gap: var(--s-3); }
.process-label::before { content: ""; width: 1.25rem; height: 1px; background: var(--text-3); }
.process-label + .display-l { margin-top: calc(var(--s-3) - var(--s-5)); }
.process-body .lead { max-width: 44ch; }
.process-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.process-steps { margin-top: var(--s-5); border-top: 1px solid var(--line); }
.process-steps li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-4); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem) 0; border-bottom: 1px solid var(--line); }
.process-steps .step-n { font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; padding-top: 0.35em; transition: color var(--d-slow) var(--ease-out); }
.process-steps .step-copy { display: grid; gap: var(--s-3); }
.process-steps .title { font-weight: 500; color: var(--text-2); transition: color var(--d-slow) var(--ease-out); }
.process-steps .body { color: var(--text-3); max-width: 52ch; transition: color var(--d-slow) var(--ease-out); }
/* the stage in the reading zone is emphasised: numeral and title come forward, the others rest */
.process-steps li.is-active .step-n, .process-steps li.is-active .title { color: var(--text); }
.process-steps li.is-active .body { color: var(--text-2); }
@media (hover: hover) { .process-steps li:hover .title { color: var(--text); } .process-steps li:hover .body { color: var(--text-2); } }
@media (max-width: 1279px) { .process-body { grid-column: 6 / span 7; } }
@media (max-width: 1023px) { .process-media { grid-column: 1 / span 5; } .process-body { grid-column: 6 / span 7; } .process-steps li { grid-template-columns: 2.75rem minmax(0, 1fr); } }
@media (max-width: 767px) {
  .process-media { grid-column: 1 / -1; position: static; }
  .process-media .frame { aspect-ratio: 3 / 2; }
  .process-media img { object-position: 50% 45%; }
  .process-body { grid-column: 1 / -1; margin-top: var(--s-4); }
  .process-steps li .title, .process-steps li .body { color: var(--text); }
  .process-steps li .body { color: var(--text-2); }
}

/* ---------- 13b. Seneste cases: four small windows after Process, the same hover as everywhere ---------- */
.latest { padding-block: var(--section-tight); }
.latest-head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.latest-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.latest-item { display: grid; gap: var(--s-3); color: inherit; border-radius: var(--r-media); -webkit-tap-highlight-color: transparent; }
.latest-item:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
.latest-window { aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.latest-caption { display: grid; gap: 0.2rem; padding-top: var(--s-2); }
.latest-client { font-size: var(--fs-body); }
.latest-go { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-3); transition: color var(--d-fast); }
.latest-go svg { transition: transform var(--d-base) var(--ease-out); }
.latest-item:hover .latest-go, .latest-item:focus-visible .latest-go { color: var(--text); }
.latest-item:hover .latest-go svg { transform: translate(3px, -3px); }
@media (max-width: 1023px) { .latest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); } }
@media (max-width: 640px) { .latest-list { grid-template-columns: 1fr; } .latest-head { flex-direction: column; align-items: flex-start; gap: var(--s-3); } }

/* ---------- 14. Testimonials: featured review + review summary, one carousel underneath ----------
   Left (cols 1–7): the active review, given room. Right (cols 9–12): the facts we have (5,0 · 61+ · all five
   stars) and the controls, bottom-aligned with the customer line so the two halves share a baseline.
   The carousel is a transform track: 4.4 cards per view on desktop (the partial fifth card is faded, so it
   reads as "more"), clones on both sides for a seamless loop, drag, wheel and keyboard in main.js. */
.t-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-7); align-items: end; }
.t-featured { grid-column: 1 / span 7; display: grid; gap: var(--s-6); align-content: end; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
.t-featured.is-switching { opacity: 0; transform: translateY(10px); transition-duration: 180ms; }
.t-quote { font-size: clamp(1.375rem, 1rem + 1.5vw, 2.125rem); line-height: 1.25; letter-spacing: -0.015em; font-weight: 400; text-wrap: pretty; max-width: 34ch; min-height: 3.75em; }
.t-quote::before { content: "“"; color: var(--text-3); }
.t-quote::after { content: "”"; color: var(--text-3); }
.t-person { display: flex; align-items: center; gap: var(--s-4); }
.t-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.t-person .name { display: block; font-weight: 500; font-size: var(--fs-small); }
.t-person .role { display: block; font-size: var(--fs-meta); color: var(--text-3); }
.stars { display: inline-flex; gap: 2px; color: var(--text); }
.stars svg { width: 12px; height: 12px; }

/* summary */
.t-summary { grid-column: 9 / span 4; display: grid; gap: var(--s-2); align-content: end; justify-items: start; padding-left: var(--s-6); border-left: 1px solid var(--line); }
.t-summary-label { margin-bottom: var(--s-3); }
.t-score { display: flex; align-items: baseline; gap: var(--s-4); }
.t-score-value { font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-score-stars svg { width: 16px; height: 16px; }
.t-count { font-size: var(--fs-title); font-weight: 500; margin-top: var(--s-3); }
.t-all { margin-top: -0.25rem; }
.t-controls { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.t-controls button { width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--ease-out); }
.t-controls button:hover { background: rgba(242,242,239,0.07); border-color: rgba(242,242,239,0.35); }
.t-controls button:active { transform: scale(0.96); }
.t-controls svg { width: 18px; height: 18px; }

/* carousel */
.t-carousel { grid-column: 1 / -1; --per-view: 4.4; --gaps: 4; overflow: hidden; touch-action: pan-y; cursor: grab; outline-offset: 8px; mask-image: linear-gradient(to right, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.t-carousel.is-dragging { cursor: grabbing; }
.t-track { display: flex; gap: var(--gap); will-change: transform; user-select: none; -webkit-user-select: none; }
.t-track img { -webkit-user-drag: none; pointer-events: none; }
.t-card { flex: 0 0 calc((100% - var(--gaps) * var(--gap)) / var(--per-view)); min-width: 0; }
.t-card-btn { display: grid; gap: var(--s-4); align-content: start; width: 100%; height: 100%; min-height: 240px; text-align: left; padding: 0 var(--s-5); border-left: 1px solid var(--line); border-radius: 0; transition: border-color var(--d-base) var(--ease-out); -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.t-card-btn:focus-visible { outline-offset: 4px; border-radius: var(--r-media); }
.t-card-btn .t-person img { transition: box-shadow var(--d-base) var(--ease-out); }
.t-card-quote { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; transition: color var(--d-base) var(--ease-out); }
.t-card-btn .stars { opacity: 0.7; transition: opacity var(--d-base) var(--ease-out); }
.t-card-btn:hover .t-card-quote { color: var(--text); }
.t-card.is-active .t-card-btn { border-left-color: var(--text); }
.t-card.is-active .t-card-quote, .t-card.is-active .stars { color: var(--text); opacity: 1; }
.t-card.is-active .t-person img { box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--text-2); }
.t-card.is-clone .t-card-btn { pointer-events: auto; }
@media (max-width: 1279px) { .t-carousel { --per-view: 3.4; --gaps: 3; } }
@media (max-width: 1023px) {
  .t-featured { grid-column: 1 / span 8; }
  .t-summary { grid-column: 9 / span 4; padding-left: var(--s-5); }
  .t-carousel { --per-view: 2.4; --gaps: 2; }
}
@media (max-width: 767px) {
  /* one stack: featured review, customer, the summary as a compact row with the controls, then the carousel */
  .t-top { row-gap: var(--s-6); }
  .t-featured, .t-summary { grid-column: 1 / -1; }
  .t-quote { max-width: none; min-height: 0; }
  .t-summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "score controls" "count controls" "all controls"; align-items: end; gap: var(--s-1) var(--s-4); padding-left: 0; border-left: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .t-summary-label { grid-area: label; }
  .t-score { grid-area: score; }
  .t-count { grid-area: count; margin-top: var(--s-2); }
  .t-all { grid-area: all; }
  .t-controls { grid-area: controls; margin-top: 0; }
  .t-score-value { font-size: 2.75rem; }
  .t-carousel { --per-view: 1.15; --gaps: 1; mask-image: linear-gradient(to right, #000 82%, transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%); }
  .t-card-btn { min-height: 0; }
}

/* ---------- 15. FAQ: intro column with the keyboard photo (sticky) beside the accordion, same grid as Process ---------- */
.faq .grid { align-items: start; }
.faq-intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); display: grid; gap: var(--s-5); }
.faq-intro .lead { max-width: 30ch; }
.faq-media { aspect-ratio: 4 / 3; margin-top: var(--s-3); }
.faq-media img { object-position: 50% 55%; filter: saturate(0.85); }
.faq-contact { color: var(--text-3); }
.faq-contact a { color: var(--text-2); display: inline-block; padding-block: 0.8rem; margin-block: -0.8rem; }
.faq-contact-after { display: none; grid-column: 1 / -1; }
.faq-list { grid-column: 7 / span 6; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-5); padding: 1.35rem 0; font-size: var(--fs-title); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-2); transition: color var(--d-base) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover, .faq-list details[open] summary { color: var(--text); }
.faq-list summary:focus-visible { outline-offset: 0; border-radius: var(--r-media); }
/* +/− sits on the first line's optical centre, whatever the question's length */
.faq-list summary .plus { width: 32px; height: 32px; margin-top: calc(0.65 * var(--fs-title) - 16px); position: relative; border-radius: var(--r-pill); border: 1px solid var(--line); transition: border-color var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out); }
.faq-list summary:hover .plus { border-color: var(--line-strong); background: rgba(242, 242, 239, 0.05); }
.faq-list summary .plus::before, .faq-list summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--d-base) var(--ease-out); }
.faq-list summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-list details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list .answer { overflow: hidden; }
.faq-list .answer p { padding: 0 3.5rem 1.6rem 0; color: var(--text-2); max-width: 58ch; }
@media (max-width: 1279px) { .faq-list { grid-column: 6 / span 7; } }
@media (max-width: 1023px) { .faq-intro { grid-column: 1 / span 5; } .faq-list { grid-column: 6 / span 7; } .faq-media { aspect-ratio: 4 / 5; } }
@media (max-width: 767px) {
  .faq-intro { grid-column: 1 / -1; position: static; }
  .faq-media { aspect-ratio: 16 / 10; }
  .faq-intro .faq-contact { display: none; }
  .faq-list { grid-column: 1 / -1; margin-top: var(--s-5); }
  .faq-list .answer p { padding-right: 0; }
  .faq-contact-after { display: block; margin-top: var(--s-2); }
}

/* ---------- 16. Closing CTA (bookend) ---------- */
.closing { position: relative; min-height: 70svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; padding-block: var(--section); }
.closing .smoke::after { height: 55%; }
.closing-inner { display: grid; gap: var(--s-6); justify-items: center; max-width: 32ch; }
.closing-inner .display-l .kicker { display: block; color: var(--text-3); font-size: var(--fs-m); font-weight: 400; letter-spacing: -0.01em; margin-bottom: 0.5em; }
.closing-actions { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.closing-actions .link-inline { padding-block: 0.6rem; }

/* ---------- 17. Footer ----------
   Left: the brand line and, under it, the platforms we build on as a slow loop (the six monochrome marks,
   each at its own height so they read as one family). Right: the link columns, spanning both rows. */
.site-footer { border-top: 1px solid var(--line); padding: var(--s-8) 0 var(--s-6); }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--gap); }
.footer-brand { grid-column: 1 / span 4; grid-row: 1; display: grid; gap: var(--s-4); align-content: start; }
.footer-brand .logo svg { height: 20px; }
.footer-brand p { color: var(--text-3); font-size: var(--fs-small); max-width: 34ch; }
.footer-platforms { grid-column: 1 / span 5; grid-row: 2; align-self: end; margin-top: var(--s-6); min-width: 0; }
.footer-platforms .meta { margin-bottom: var(--s-3); }
.pf-marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 10%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 88%, transparent); }
.pf-track { display: flex; align-items: center; width: max-content; height: 48px; list-style: none; margin: 0; padding: 0; animation: pf-scroll 44s linear infinite; }
.pf-track li { flex: none; display: flex; align-items: center; padding-right: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.pf-marquee:hover .pf-track { animation-play-state: paused; }
@keyframes pf-scroll { to { transform: translateX(-50%); } }
/* one monochrome family: white marks, level by optical height, a shade brighter on hover */
.pf-logo { display: block; height: var(--h, 32px); width: auto; max-width: 180px; object-fit: contain; opacity: 0.78; transition: opacity var(--d-base) var(--ease-out); }
.pf-track li:hover .pf-logo { opacity: 1; }
.footer-col { display: grid; gap: 0; align-content: start; justify-items: start; grid-row: 1 / span 2; }
.footer-col h2 { font-size: var(--fs-meta); color: var(--text-3); font-weight: 500; margin-bottom: var(--s-2); letter-spacing: 0.01em; }
.footer-col a { font-size: var(--fs-small); color: var(--text-2); transition: color var(--d-fast); padding-block: 0.6rem; }
.footer-col a:hover { color: var(--text); }
.footer-services { grid-column: 6 / span 2; }
.footer-nav { grid-column: 8 / span 2; }
.footer-social { grid-column: 10 / span 1; }
.footer-contact { grid-column: 11 / span 2; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--text-3); }
@media (max-width: 1023px) {
  .footer-grid { grid-template-rows: auto auto auto; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-platforms { grid-column: 1 / span 8; grid-row: 2; margin-top: var(--s-4); }
  .footer-col { grid-row: auto; }
  .footer-services { grid-column: 1 / span 3; } .footer-nav { grid-column: 4 / span 3; } .footer-social { grid-column: 7 / span 3; } .footer-contact { grid-column: 10 / span 3; }
}
@media (max-width: 640px) {
  .footer-platforms { grid-column: 1 / -1; }
  .pf-track { height: 44px; }
  .footer-services, .footer-nav { grid-column: span 6; } .footer-social, .footer-contact { grid-column: span 6; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-track { animation: none; width: auto; flex-wrap: wrap; height: auto; row-gap: var(--s-3); }
  .pf-track li[aria-hidden="true"] { display: none; }
  .pf-marquee { mask-image: none; -webkit-mask-image: none; }
  .about-platforms .pf-track { animation: none; height: auto; }
}

/* ---------- 18. Page headers (archive, contact) ---------- */
.page-head { padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 7rem)); padding-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }
.page-head .lead { margin-top: var(--s-5); }

/* ---------- 19. Cases archive (cases.html) ----------
   The homepage shows a curated few; this page shows everything. Density first: three tiles across (4/4/4) alternating
   with an unequal pair (7/5), so a row of three sits next to a row of two and the eye never reads a template.
   One tile = one link: a window with two states (the client's world ↔ the site itself) and a hairline caption
   (client, platform, kind · branche, one line, one verified number, "Se casen"). Nothing essential lives on hover. */
.arc-head { padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 2vw, 2.75rem)); padding-bottom: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
.arc-head-grid { display: grid; gap: var(--s-4); }
.arc-head-grid .lead { max-width: 62ch; }
.js .archive-page [data-enter] { opacity: 0; transform: translateY(18px); animation: enter 900ms var(--ease-out) forwards; animation-delay: var(--delay, 0ms); }
.archive { padding-top: 0; }
.arc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.filters { display: flex; gap: clamp(0.75rem, 0.25rem + 1.5vw, 2rem); min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -0.5rem; padding-left: 0.5rem; }
.filters::-webkit-scrollbar { display: none; }
.filters button { position: relative; display: inline-flex; align-items: baseline; gap: 0.4rem; font-size: var(--fs-small); color: var(--text-3); padding: 0.85rem 0.5rem; min-height: 48px; white-space: nowrap; flex: none; transition: color var(--d-fast); }
.filters button .num { font-size: var(--fs-meta); opacity: 0.75; }
.filters button::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--ease-out); }
.filters button:hover { color: var(--text); }
.filters button[aria-pressed="true"] { color: var(--text); }
.filters button[aria-pressed="true"]::after { transform: scaleX(1); }
.arc-count { flex: none; }
.arc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2rem, 1.25rem + 2vw, 3.25rem); list-style: none; padding: 0; margin: 0; }
.arc-item { min-width: 0; --delay: calc(var(--col, 0) * 90ms); }
.arc-item[hidden] { display: none; }
.arc-item.span-4 { grid-column: span 4; --ratio: 16 / 10; }
.arc-item.span-5 { grid-column: span 5; --ratio: 7 / 5; }
.arc-item.span-7 { grid-column: span 7; --ratio: 2 / 1; }
.arc-item.span-6 { grid-column: span 6; --ratio: 4 / 3; }
.arc-item.span-12 { grid-column: 1 / -1; --ratio: 2 / 1; }
.arc-link { display: grid; gap: var(--s-4); align-content: start; color: inherit; border-radius: var(--r-media); -webkit-tap-highlight-color: transparent; }
.arc-link:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
.arc-window { aspect-ratio: var(--ratio, 4 / 3); }
/* the caption: a hairline that draws white on hover, then the facts */
.arc-caption { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); row-gap: 0.3rem; align-items: baseline; padding-top: var(--s-4); }
.arc-caption::before, .arc-caption::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.arc-caption::before { background: var(--line); }
.arc-caption::after { background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform var(--d-slow) var(--ease-out); }
.arc-link:hover .arc-caption::after, .arc-link:focus-visible .arc-caption::after { transform: scaleX(1); }
.arc-client { grid-column: 1; }
.arc-platform { grid-column: 2; text-align: right; color: var(--text-2); }
.arc-kind { grid-column: 1 / -1; }
.arc-text { grid-column: 1 / -1; color: var(--text-2); max-width: 44ch; margin-top: 0.4rem; text-wrap: pretty; }
.arc-proof { grid-column: 1; display: flex; align-items: baseline; gap: 0.5rem; margin-top: var(--s-3); }
.arc-proof .value { font-size: var(--fs-title); line-height: 1; letter-spacing: -0.02em; color: var(--text); }
.arc-proof .label { font-size: var(--fs-meta); color: var(--text-3); }
/* a case without verified numbers: one short qualitative line in the number's place */
.arc-proof.is-text .label { font-size: var(--fs-small); color: var(--text-2); }
.arc-go { grid-column: 2; justify-self: end; display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-meta); color: var(--text-3); margin-top: var(--s-3); white-space: nowrap; transition: color var(--d-fast); }
.arc-go svg { width: 0.85em; height: 0.85em; transition: transform var(--d-base) var(--ease-out); }
.arc-link:hover .arc-go, .arc-link:focus-visible .arc-go { color: var(--text); }
.arc-link:hover .arc-go svg, .arc-link:focus-visible .arc-go svg { transform: translate(3px, -3px); }
/* the wide tile gets a two-column caption: story left, proof right */
.arc-item.span-7 .arc-caption { grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.8fr); column-gap: var(--s-5); }
.arc-item.span-7 .arc-client { grid-column: 1; grid-row: 1; }
.arc-item.span-7 .arc-platform { grid-column: 2; grid-row: 1; text-align: left; }
.arc-item.span-7 .arc-kind { grid-column: 1 / span 2; grid-row: 2; }
.arc-item.span-7 .arc-text { grid-column: 1 / span 2; grid-row: 3; }
.arc-item.span-7 .arc-proof { grid-column: 3; grid-row: 1 / span 3; align-self: center; justify-self: center; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; margin-top: 0; }
.arc-item.span-7 .arc-proof .value { font-size: var(--fs-m); }
.arc-item.span-7 .arc-go { grid-column: 3; grid-row: 4; justify-self: center; }
/* filtering: the tiles glide to their new places (view transitions), the rest is instant */
:root.is-filtering::view-transition-group(*) { animation-duration: 480ms; animation-timing-function: var(--ease-out); }
:root.is-filtering::view-transition-old(root), :root.is-filtering::view-transition-new(root) { animation: none; }
.archive-empty { padding: var(--s-8) 0; color: var(--text-3); }
@media (max-width: 1023px) {
  .arc-item.span-4, .arc-item.span-5, .arc-item.span-7, .arc-item.span-6, .arc-item.span-12 { grid-column: span 6; --ratio: 4 / 3; }
  .arc-item.span-7 .arc-caption { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); }
  .arc-item.span-7 .arc-client, .arc-item.span-7 .arc-kind, .arc-item.span-7 .arc-text, .arc-item.span-7 .arc-platform, .arc-item.span-7 .arc-proof, .arc-item.span-7 .arc-go { grid-row: auto; }
  .arc-item.span-7 .arc-platform { grid-column: 2; text-align: right; }
  .arc-item.span-7 .arc-kind, .arc-item.span-7 .arc-text { grid-column: 1 / -1; }
  .arc-item.span-7 .arc-client { grid-column: 1; }
  .arc-item.span-7 .arc-proof { grid-column: 1; flex-direction: row; align-items: baseline; justify-self: start; text-align: left; gap: 0.5rem; margin-top: var(--s-3); }
  .arc-item.span-7 .arc-proof .value { font-size: var(--fs-title); }
  .arc-item.span-7 .arc-go { grid-column: 2; justify-self: end; }
}
@media (max-width: 640px) {
  .arc-head { padding-top: calc(var(--header-h) + 2rem); }
  .arc-bar { flex-direction: column; align-items: stretch; gap: 0; }
  .filters { mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); padding-right: 2.5rem; }
  .arc-count { padding: 0.6rem 0 0.75rem; border-top: 1px solid var(--line); }
  .arc-grid { row-gap: 2.5rem; }
  .arc-item.span-4, .arc-item.span-5, .arc-item.span-7, .arc-item.span-6, .arc-item.span-12 { grid-column: 1 / -1; --ratio: 4 / 3; }
}

/* ---------- 19b. Case teaser (archive): image frame, caption, overlay link ---------- */
.work-item { display: grid; gap: var(--s-4); align-content: start; position: relative; }
.work-item .frame { aspect-ratio: var(--ratio, 4 / 5); }
.work-item .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,10,0.35), rgba(8,8,10,0) 40%); opacity: 0; transition: opacity var(--d-slow) var(--ease-out); }
.work-item:hover .frame::after { opacity: 1; }
.work-caption { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-5); align-items: start; }
.work-caption .title { display: inline-flex; align-items: center; gap: 0.5rem; }
.work-caption .title svg { width: 0.9em; height: 0.9em; opacity: 0; transform: translate(-6px, 6px); transition: opacity var(--d-base), transform var(--d-base) var(--ease-out); }
.work-item:hover .work-caption .title svg { opacity: 1; transform: none; }
.work-caption .meta { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-small); }
.work-caption .statement { grid-column: 1 / -1; max-width: 48ch; }
.work-item > a { position: absolute; inset: 0; z-index: 2; border-radius: var(--r-media); }

/* ---------- 20. Contact ---------- */
.contact .grid { align-items: start; }
.contact-form { grid-column: 1 / span 7; display: grid; gap: var(--s-5); }
.contact-aside { grid-column: 9 / span 4; display: grid; gap: 0; border-top: 1px solid var(--line); position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.contact-aside div { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-2); }
.contact-aside h2 { font-size: var(--fs-meta); color: var(--text-3); font-weight: 500; }
.contact-aside p { color: var(--text-2); font-size: var(--fs-small); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-small); color: var(--text-2); }
.field .hint { font-size: var(--fs-meta); color: var(--text-3); }
.field input, .field textarea { width: 100%; min-height: 3.25rem; padding: 0.85rem 1rem; background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--r-media); color: var(--text); transition: border-color var(--d-fast), background-color var(--d-fast); }
.field textarea { min-height: 9rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field textarea:hover { border-color: rgba(242,242,239,0.3); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; border-radius: var(--r-media); }
.field .error { display: none; font-size: var(--fs-meta); color: #ffb4b4; }
.field[data-invalid="true"] .error { display: block; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: #ff8f8f; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.form-foot { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.form-note { font-size: var(--fs-meta); color: var(--text-3); max-width: 40ch; }
.form-success { display: none; padding: var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-surface); }
.form-success[data-show="true"] { display: grid; gap: var(--s-3); }
@media (max-width: 1023px) { .contact-form { grid-column: 1 / -1; } .contact-aside { grid-column: 1 / -1; position: static; } }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- 21. Case study: one modular system, one story per case ----------
   The frame is NUMU (grid, hairlines, Satoshi, dark canvas); the client brings the colour through photography,
   the site itself and a project tone (--project) used only on the stage. Chapters: hero → snapshot → kort fortalt
   → kunden → udfordringen → full photo → sådan tænkte vi → løsningen (+ details in the interface) → designet
   → kundens ord → resultatet → leverancen → næste case. Modules without content are not rendered. */
.case { --project: #2f4a35; }
.cs-label { color: var(--text-3); }
.cs-chapter { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.cs-chapter .grid { align-items: start; }
.cs-chapter .cs-label { grid-column: 1 / span 2; padding-top: 0.35em; }
.prose { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.prose p { max-width: 58ch; }
.prose .lead { color: var(--text); }

/* 01 hero: three compositions from one system */
.cs-hero { position: relative; overflow: hidden; isolation: isolate; padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem)); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.cs-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.cs-hero-copy { grid-column: 1 / span 8; display: grid; gap: var(--s-4); align-content: end; }
.cs-back { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; color: var(--text-3); padding: 0.5rem 0; min-height: 44px; transition: color var(--d-fast); margin-bottom: var(--s-4); }
.cs-back:hover { color: var(--text); }
.cs-back svg { transition: transform var(--d-base) var(--ease-out); }
.cs-back:hover svg { transform: translateX(-3px); }
.cs-client { font-size: var(--fs-small); color: var(--text-2); }
.cs-hero .display-xl { font-size: clamp(2.375rem, 1rem + 4.6vw, 4.75rem); max-width: 16ch; }
.cs-kind { margin-top: var(--s-2); }
.cs-hero.is-photo-full { min-height: max(600px, 88svh); display: grid; align-items: end; }
.cs-hero.is-photo-full .cs-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cs-hero.is-photo-full .cs-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.06); animation: settle 1.6s var(--ease-out) forwards; }
.cs-hero.is-photo-full .cs-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,10,0.94) 0%, rgba(8,8,10,0.6) 38%, rgba(8,8,10,0.18) 70%, rgba(8,8,10,0.3) 100%); }
@keyframes settle { to { transform: scale(1); } }
.cs-hero.is-photo-split .cs-hero-copy { grid-column: 1 / span 7; }
.cs-hero-photo { grid-column: 8 / span 5; aspect-ratio: 4 / 5; }
.cs-hero-photo img { transform: scale(1.06); animation: settle 1.6s var(--ease-out) forwards; }
.cs-hero.is-screen-split { background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 40%, color-mix(in oklab, var(--project) 22%, var(--bg)) 100%); }
.cs-hero.is-screen-split .cs-hero-copy { grid-column: 1 / span 7; }
.cs-hero-screen { grid-column: 9 / span 4; align-self: end; margin-bottom: calc(-1 * clamp(2.5rem, 1.5rem + 3vw, 4.5rem)); }
/* a clean screen: hairline, small radius, no device */
.cs-screen { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid rgba(242, 242, 239, 0.14); background: var(--surface-2); aspect-ratio: 9 / 16; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.cs-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cs-hero-screen .cs-screen { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.js .case-page .cs-hero [data-enter], .js .case-page .cs-snap[data-enter] { opacity: 0; transform: translateY(18px); animation: enter 900ms var(--ease-out) forwards; animation-delay: var(--delay, 0ms); }

/* 02 snapshot: one hairline row */
.cs-snapshot { border-top: 1px solid var(--line); padding: 0; }
.cs-hero.is-screen-split + .cs-snapshot { border-top-color: rgba(242,242,239,0.16); }
.cs-snap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-4); padding-block: var(--s-5); margin: 0; }
.cs-snap > div { grid-column: span 2; display: grid; gap: 0.35rem; min-width: 0; }
.cs-snap .cs-snap-wide { grid-column: span 4; }
.cs-snap dt { font-size: var(--fs-meta); color: var(--text-3); }
.cs-snap dd { font-size: var(--fs-small); color: var(--text); margin: 0; overflow-wrap: anywhere; }
.cs-snap dd .link-inline { white-space: nowrap; }
.cs-snap dd a, .cs-delivery-list dd a { padding-block: 0.7rem; }   /* inline padding: a 44px hit area without moving the line */
.cs-snap dd .link-inline svg, .cs-delivery-list dd .link-inline svg { display: inline-block; }
.cs-snap dd .link-inline svg { width: 0.8em; height: 0.8em; vertical-align: -0.05em; }

/* chapter nav: sticky, desktop only, progress by scroll */
.cs-nav { position: sticky; top: var(--header-h); z-index: 30; background: rgba(8,8,10,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-nav::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--text); transform-origin: left; transform: scaleX(var(--p, 0)); }
.cs-nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 48px; }
.cs-nav ol { display: flex; gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); list-style: none; margin: 0; padding: 0; }
.cs-nav a { font-size: var(--fs-meta); color: var(--text-3); transition: color var(--d-fast); padding: 0.75rem 0; }
.cs-nav a:hover, .cs-nav a.is-active { color: var(--text); }
.cs-nav-live { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-2); white-space: nowrap; }
.cs-nav-live:hover { color: var(--text); }
@supports (animation-timeline: scroll()) {
  .cs-nav::before { animation: cs-progress linear both; animation-timeline: scroll(root); }
  @keyframes cs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (max-width: 1023px) { .cs-nav { display: none; } }

/* 03 kort fortalt (+ kunden): the client's image left, the summary and the client context right */
.cs-open .grid { align-items: center; }
.cs-open-photo { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.cs-open-body { grid-column: 7 / span 6; display: grid; gap: var(--s-4); }
.cs-open-body.is-text { grid-column: 3 / span 8; }
/* a landscape client photo (a facade, a room) keeps its 3:2 across six columns instead of being cut to 4:5 */
.cs-open.is-landscape .cs-open-photo { grid-column: 1 / span 6; aspect-ratio: 3 / 2; }
.cs-open.is-landscape .cs-open-body { grid-column: 8 / span 5; }
.cs-open-body .cs-label { grid-column: auto; padding-top: 0; }
.cs-summary-text { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); line-height: 1.32; letter-spacing: -0.015em; color: var(--text); text-wrap: pretty; }
.cs-open-client { display: grid; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.cs-open-client .prose { font-size: var(--fs-body); }

/* 05 udfordringen: one statement across the grid, the copy offset */
.cs-statement { grid-column: 3 / span 9; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.12; letter-spacing: -0.025em; max-width: 22ch; }
.cs-challenge-copy { grid-column: 3 / span 7; margin-top: var(--s-6); font-size: var(--fs-body); }

/* 06 full photo: a breathing point */
.cs-full { padding-block: 0 clamp(1rem, 0.5rem + 1vw, 2rem); }
.cs-full .frame { border-radius: 0; aspect-ratio: 21 / 9; }
.cs-full .frame img { object-position: 50% 40%; }

/* 07 sådan tænkte vi */
.cs-approach-intro { grid-column: 1 / span 4; display: grid; gap: var(--s-3); position: sticky; top: calc(var(--header-h) + 48px + var(--s-6)); }
.cs-approach-list { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cs-approach-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.cs-approach-list .step-n { color: var(--text-3); font-size: var(--fs-small); padding-top: 0.3em; }
.cs-approach-list .body { margin-top: var(--s-2); max-width: 52ch; }

/* 08 løsningen + details in the interface */
.cs-solution-copy { grid-column: 3 / span 8; }
.cs-solution-copy .lead { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem); line-height: 1.4; }
.cs-features { list-style: none; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; padding: 0; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
.cs-feature { align-items: center; }
.cs-feature-visual { grid-column: 2 / span 6; }
.cs-feature-copy { grid-column: 9 / span 4; display: grid; gap: var(--s-3); }
.cs-feature.is-flipped .cs-feature-visual { grid-column: 6 / span 6; grid-row: 1; }
.cs-feature.is-flipped .cs-feature-copy { grid-column: 1 / span 4; grid-row: 1; }
.cs-feature-copy .step-n { color: var(--text-3); font-size: var(--fs-small); }
.cs-chapter .cs-feature-copy .cs-label { grid-column: auto; padding-top: 0; margin-bottom: 0; }
.cs-feature-copy .body { max-width: 34ch; }
/* a crop of the real mobile screen: one upload, three windows */
.cs-crop { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--surface-2); aspect-ratio: 5 / 4; border: 1px solid var(--line); }
.cs-crop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-crop picture { display: block; height: 100%; }
.cs-crop.is-top img { object-position: 50% 0; }
.cs-crop.is-middle img { object-position: 50% 50%; }
.cs-crop.is-bottom img { object-position: 50% 100%; }
/* feature frames for a feature's own image: the whole image at its own ratio, a 3:2 desktop window, or a phone window aligned to the bottom of a mobile capture */
/* natural: the whole image at its own ratio; its height is capped (about 33 rem), so a tall mobile list stays a detail and a wide order detail keeps its width */
.cs-crop.is-natural { aspect-ratio: auto; width: min(100%, calc(33rem * var(--ar, 1))); margin-inline: auto; }
.cs-crop.is-natural img { height: auto; }
.cs-crop.is-wide { aspect-ratio: 3 / 2; }
.cs-crop.is-wide img { object-position: 50% 0; }
.cs-feature-visual.is-phone { display: grid; justify-items: center; }
.cs-crop.is-phone { width: min(100%, 21rem); aspect-ratio: 9 / 16; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.cs-crop.is-phone img { object-position: 50% 100%; }
/* screen: a desktop window (same frame as Designet) at the capture's own proportion, nothing cropped */
.cs-crop.is-screen { aspect-ratio: auto; border-radius: 10px; border-color: rgba(242, 242, 239, 0.14); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.cs-crop.is-screen img { height: auto; }
/* metric: one verified number as the visual, on the project's surface (same surface as Designet); label top, number and its plain reading bottom */
.cs-crop.is-metric { aspect-ratio: 5 / 4; border: 0; border-radius: 12px; background: color-mix(in oklab, var(--project) 28%, var(--bg)); display: grid; grid-template-rows: auto 1fr auto auto; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.cs-metric-label { color: var(--text-2); }
.cs-metric-value { grid-row: 3; font-size: clamp(5.5rem, 2rem + 12vw, 12rem); line-height: 0.9; letter-spacing: -0.04em; font-weight: 400; color: var(--text); white-space: nowrap; margin-top: auto; margin-left: -0.04em; }
.cs-metric-note { grid-row: 4; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid rgba(242, 242, 239, 0.14); font-size: var(--fs-small); color: var(--text-2); }
.cs-metric-note > span { display: block; max-width: 26ch; text-wrap: balance; }
/* duo: two screen frames side by side (a product page and its cart), each at its own ratio, top-aligned; widths follow the ratios */
.cs-crop-duo { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--gap); align-items: start; }
/* layouts: stacked = copy above, visual across the grid (a large desktop presentation); wide = four columns of copy, eight of visual */
.cs-feature.is-stacked .cs-feature-copy { grid-column: 1 / span 5; grid-row: 1; }
.cs-feature.is-stacked .cs-feature-copy .body { max-width: 44ch; }
.cs-feature.is-stacked .cs-feature-visual { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-4); }
.cs-feature.is-wide .cs-feature-copy { grid-column: 1 / span 4; grid-row: 1; }
.cs-feature.is-wide .cs-feature-visual { grid-column: 5 / span 8; grid-row: 1; }

/* 09 designet: the desktop homepage behind, the mobile homepage in front, on the project's surface.
   The desktop stays readable (the phone sits over its right edge); without a desktop capture the phone stands alone. */
.cs-stage { padding-block: clamp(1rem, 0.5rem + 1vw, 2rem) 0; }
.cs-stage-surface { background: color-mix(in oklab, var(--project) 28%, var(--bg)); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0; overflow: clip; }
.cs-stage-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.cs-stage-copy { grid-column: 1 / span 4; display: grid; gap: var(--s-4); align-self: center; padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.cs-stage-copy .body { max-width: 30ch; }
/* a clean desktop frame: hairline, small radius, no chrome; open at the bottom, the page continues */
.cs-stage-desktop { grid-column: 5 / span 8; grid-row: 1; align-self: end; }
.cs-desktop { position: relative; overflow: hidden; border: 1px solid rgba(242,242,239,0.14); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface-2); aspect-ratio: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.4); }
/* the window takes the capture's own proportion (the standard capture is 16:10): nothing is cut at the sides or the bottom */
.cs-desktop img { width: 100%; height: auto; display: block; }
/* The phone is a foreground detail, not a second hero: the whole mobile capture (the frame takes the image's own
   proportion, nothing is cropped), about three quarters of the desktop's height, tucked into the desktop's lower right
   corner and standing on the floor of the section: open at the bottom, like the desktop, so the page continues. */
.cs-stage-phone { grid-column: 10 / span 3; grid-row: 1; align-self: end; justify-self: end; z-index: 1; width: min(100%, clamp(10rem, 13.5vw, 13rem)); margin-right: calc(-1 * var(--gap)); }
.cs-stage-phone .cs-screen { aspect-ratio: auto; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: -20px 0 60px rgba(0,0,0,0.45); }
.cs-stage-phone .cs-screen img { height: auto; display: block; }
.cs-stage.is-phone-only .cs-stage-phone { grid-column: 5 / span 8; width: min(100%, 16rem); justify-self: center; margin-right: 0; }
.cs-stage.is-phone-only .cs-stage-phone .cs-screen { box-shadow: 0 -20px 80px rgba(0,0,0,0.35); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the phone rises out of the floor as the stage scrolls in and settles flush with it; the surface clips the part still below */
    .cs-stage-phone { animation: cs-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    @keyframes cs-drift { from { transform: translateY(2rem); } to { transform: translateY(0); } }
  }
}

/* 10 kundens ord */
.cs-quote { grid-column: 3 / span 9; margin: 0; display: grid; gap: var(--s-6); }
.cs-quote-text { font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem); line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; margin: 0; text-wrap: pretty; }
/* a long review under its pull quote: reading size, secondary tone, the same measure as the quote */
.cs-quote-full { max-width: 58ch; color: var(--text-2); font-size: var(--fs-body); }
.cs-quote-full p + p { margin-top: 0.8em; }
.cs-quote.has-excerpt { font-size: clamp(1.25rem, 1.02rem + 0.85vw, 1.75rem); max-width: 46ch; gap: var(--s-5); }
.cs-quote-excerpt { margin: 0; font-size: inherit; line-height: 1.4; letter-spacing: -0.012em; color: var(--text-2); text-wrap: pretty; }
.cs-quote.has-excerpt .cs-quote-person { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.cs-quote-excerpt p { margin: 0; }
.cs-quote-excerpt p + p { margin-top: 0.85em; }
.cs-quote-key { color: var(--text); }
.cs-quote-proof { display: inline-flex; align-items: center; gap: var(--s-3); }
.cs-quote-date { font-size: var(--fs-meta); color: var(--text-3); }
.cs-quote-person { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.cs-quote-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.cs-quote-who { display: grid; }
.cs-quote-who .name { font-size: var(--fs-small); font-weight: 500; }
.cs-quote-who .role { font-size: var(--fs-meta); color: var(--text-3); }
.cs-quote-person .stars { display: inline-flex; gap: 2px; color: var(--text); margin-left: var(--s-3); }

/* 11 resultatet: each verified number is one centred column (value, label, a short rule, the outcome it stands for);
   outcomes without a number of their own follow as a centred row in the same treatment. The section ends soon after. */
.cs-results { padding-block-end: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cs-results-intro { grid-column: 3 / span 7; }
.cs-metrics, .cs-outcomes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 var(--gap); }
.cs-metrics { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; border-top: 1px solid var(--line); }
/* value, label and outcome sit on shared rows across the columns (subgrid), so the short rules line up even when one label wraps */
.cs-metrics li { padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) var(--s-3) 0; display: grid; grid-template-rows: subgrid; grid-row: span 3; justify-items: center; align-content: start; text-align: center; }
.cs-metric { display: contents; }
.cs-metric .value { font-size: clamp(2.75rem, 1.2rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.035em; font-weight: 400; color: var(--text); white-space: nowrap; margin-bottom: var(--s-3); }
.cs-metric .label { font-size: var(--fs-small); color: var(--text-2); max-width: 20ch; text-wrap: balance; align-self: start; }
.cs-result-note { align-self: start; }
.cs-result-note { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); max-width: 24ch; text-wrap: balance; }
.cs-result-rule { display: block; width: 2rem; height: 1px; margin: var(--s-5) auto var(--s-4); background: var(--text-3); }
.cs-outcomes { margin: var(--s-6) 0 0; justify-items: center; text-align: center; }
.cs-results-note { max-width: 58ch; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: 1px solid var(--line); text-align: center; font-size: var(--fs-lead); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.cs-outcomes .cs-result-rule { margin-top: 0; }
/* a case with outcomes but no verified numbers: the outcomes carry the chapter, as statements two to a row */
.cs-outcomes.is-only { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--line); }
.cs-outcomes.is-only .cs-result-note { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--text); max-width: 24ch; }

/* 12 leverancen */
.cs-delivery-list { grid-column: 3 / span 7; margin: 0; border-top: 1px solid var(--line); }
.cs-delivery-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.cs-delivery-list dt { font-size: var(--fs-small); color: var(--text-3); }
.cs-delivery-list dd { margin: 0; font-size: var(--fs-small); color: var(--text); }
.cs-delivery-list dd .link-inline { white-space: nowrap; }
.cs-delivery-list dd .link-inline svg { width: 0.8em; height: 0.8em; vertical-align: -0.05em; }
.cs-delivery-links { grid-column: 3 / span 9; display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-6); }

/* 13 næste case: the last chapter, one link */
.cs-next { position: relative; display: block; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); color: inherit; }
.cs-next-media { position: absolute; inset: 0; z-index: -1; }
.cs-next-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.04); transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out); filter: brightness(0.5); }
.cs-next:hover .cs-next-media img, .cs-next:focus-visible .cs-next-media img { transform: scale(1); filter: brightness(0.62); }
.cs-next .container { display: grid; gap: var(--s-4); padding-block: clamp(4rem, 3rem + 6vw, 9rem); }
/* the client name may wrap (a two-word client on a 360px phone); the arrow stays on the last line */
.cs-next-title { display: inline; max-width: 14ch; }
.cs-next-title svg { display: inline-block; vertical-align: middle; margin-left: 0.2em; }
.cs-next-title svg { width: 0.55em; height: 0.55em; flex: none; transition: transform var(--d-slow) var(--ease-out); }
.cs-next:hover .cs-next-title svg { transform: translateX(0.25em); }
.cs-next .small { color: var(--text-2); }
.cs-next:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }

@media (max-width: 1279px) {
  .cs-snap > div { grid-column: span 3; } .cs-snap .cs-snap-wide { grid-column: span 6; }
  .cs-hero.is-screen-split .cs-hero-copy { grid-column: 1 / span 7; }
  .cs-hero-screen { grid-column: 9 / span 4; }
  .cs-stage-phone { grid-column: 9 / span 4; width: min(100%, clamp(9rem, 14vw, 12rem)); }
}
@media (max-width: 1023px) {
  .cs-hero-copy, .cs-hero.is-photo-split .cs-hero-copy, .cs-hero.is-screen-split .cs-hero-copy { grid-column: 1 / -1; }
  .cs-hero-photo { grid-column: 1 / span 8; margin-top: var(--s-6); }
  .cs-hero-screen { grid-column: 1 / span 5; margin-top: var(--s-6); }
  .cs-snap > div { grid-column: span 4; } .cs-snap .cs-snap-wide { grid-column: span 8; }
  .cs-chapter .cs-label { grid-column: 1 / -1; padding-top: 0; margin-bottom: var(--s-4); }
  .cs-statement, .cs-challenge-copy, .cs-solution-copy, .cs-results-intro, .cs-quote, .cs-delivery-list, .cs-delivery-links { grid-column: 1 / -1; }
  .cs-open-photo { grid-column: 1 / span 5; }
  .cs-open-body, .cs-open-body.is-text { grid-column: 6 / span 7; align-self: start; }
  .cs-open.is-landscape .cs-open-photo { grid-column: 1 / -1; }
  .cs-open.is-landscape .cs-open-body { grid-column: 1 / span 10; margin-top: var(--s-4); }
  .cs-approach-intro { grid-column: 1 / -1; position: static; margin-bottom: var(--s-5); }
  .cs-approach-list { grid-column: 1 / -1; }
  .cs-feature-visual, .cs-feature.is-flipped .cs-feature-visual { grid-column: 1 / span 7; grid-row: auto; }
  .cs-feature-copy, .cs-feature.is-flipped .cs-feature-copy { grid-column: 8 / span 5; grid-row: auto; }
  /* the large layouts stack: copy first, the visual across the grid under it */
  .cs-feature.is-stacked .cs-feature-copy, .cs-feature.is-wide .cs-feature-copy { grid-column: 1 / span 9; grid-row: 1; }
  .cs-feature.is-stacked .cs-feature-copy .body, .cs-feature.is-wide .cs-feature-copy .body { max-width: 52ch; }
  .cs-feature.is-stacked .cs-feature-visual, .cs-feature.is-wide .cs-feature-visual { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-3); }
  /* tablet and below: the desktop first, the phone follows over its lower right corner */
  .cs-stage-copy { grid-column: 1 / -1; padding-bottom: var(--s-6); }
  .cs-stage-desktop { grid-column: 1 / -1; grid-row: auto; }
  .cs-desktop { border-bottom: 1px solid rgba(242,242,239,0.14); border-radius: 10px; }
  .cs-stage-phone { grid-column: 9 / span 4; grid-row: auto; width: min(100%, clamp(9rem, 22vw, 11.5rem)); justify-self: end; margin-right: calc(-0.5 * var(--gutter, 1.25rem)); margin-top: calc(-1 * clamp(8rem, 5rem + 14vw, 16rem)); }
  .cs-stage.is-phone-only .cs-stage-phone { grid-column: 1 / -1; width: min(100%, 15rem); justify-self: center; margin-top: 0; margin-right: 0; }
  .cs-full .frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .cs-hero { padding-top: calc(var(--header-h) + 2rem); }
  .cs-hero.is-photo-full { min-height: max(520px, 78svh); }
  .cs-hero-photo { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .cs-hero-screen { grid-column: 2 / span 10; margin-bottom: calc(-1 * clamp(2.5rem, 1.5rem + 3vw, 4.5rem)); }
  .cs-hero-screen .cs-screen { aspect-ratio: 9 / 11; }
  .cs-snap > div { grid-column: span 6; } .cs-snap .cs-snap-wide { grid-column: 1 / -1; }
  /* a long domain (co2-laserbehandling.dk) gets the full row on a phone instead of forcing the grid wider */
  .cs-snap > div:has(.link-inline[rel="noopener"]) { grid-column: 1 / -1; }
  .cs-open-photo { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .cs-open.is-landscape .cs-open-photo { aspect-ratio: 3 / 2; }
  .cs-open.is-landscape .cs-open-body { grid-column: 1 / -1; }
  .cs-open-body, .cs-open-body.is-text { grid-column: 1 / -1; margin-top: var(--s-5); }
  .cs-statement { max-width: none; }
  .cs-feature-visual, .cs-feature.is-flipped .cs-feature-visual, .cs-feature-copy, .cs-feature.is-flipped .cs-feature-copy { grid-column: 1 / -1; }
  /* on a phone every detail reads the same way: number, title, text, then the visual under it, all across the grid */
  .cs-feature-copy, .cs-feature.is-flipped .cs-feature-copy, .cs-feature.is-stacked .cs-feature-copy, .cs-feature.is-wide .cs-feature-copy { grid-column: 1 / -1; margin-top: 0; grid-row: 1; }
  .cs-feature-visual, .cs-feature.is-flipped .cs-feature-visual, .cs-feature.is-stacked .cs-feature-visual, .cs-feature.is-wide .cs-feature-visual { grid-column: 1 / -1; margin-top: var(--s-4); grid-row: 2; }
  .cs-crop.is-metric { aspect-ratio: 4 / 3; }
  .cs-crop-duo { grid-template-columns: 1fr; gap: var(--s-4); }
  .cs-stage-desktop { grid-column: 1 / -1; }
  .cs-stage-phone { grid-column: 6 / span 7; width: min(100%, clamp(9rem, 44vw, 11rem)); margin-top: calc(-1 * clamp(5rem, 2rem + 16vw, 9rem)); margin-right: calc(-1 * var(--gutter, 1.25rem)); }
  .cs-stage.is-phone-only .cs-stage-phone { grid-column: 1 / -1; width: min(100%, 13rem); margin-top: 0; margin-right: 0; }
  .cs-full .frame { aspect-ratio: 4 / 3; }
  .cs-metrics, .cs-outcomes { grid-template-columns: 1fr; gap: 0; }
  .cs-metrics li { padding: var(--s-6) 0; }
  .cs-metrics li + li { border-top: 1px solid var(--line); }
  .cs-result-rule { margin: var(--s-4) auto var(--s-3); }
  .cs-outcomes li { padding: var(--s-5) 0; }
  .cs-outcomes.is-only { grid-template-columns: 1fr; row-gap: 0; }
  .cs-outcomes.is-only li { padding: var(--s-5) 0; }
  .cs-outcomes li + li { border-top: 1px solid var(--line); }
  .cs-results-note { margin-top: 0; padding-top: var(--s-6); text-align: left; }
  .cs-crop.is-phone { width: min(100%, 18rem); }
  .cs-delivery-list > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .cs-next-title { font-size: clamp(2.25rem, 1rem + 8vw, 3.5rem); }
}

/* ---------- 22. Scroll reveals (images clip, text rises) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: var(--delay, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* clip reveal: a curtain (::before) retracts downward so IntersectionObserver still sees the box */
  .js [data-reveal="clip"] { opacity: 1; transform: none; position: relative; overflow: hidden; }
  .js [data-reveal="clip"]::before { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--bg); transform-origin: bottom; transition: transform 1.1s var(--ease-out); transition-delay: var(--delay, 0ms); pointer-events: none; }
  .js [data-reveal="clip"].is-in::before { transform: scaleY(0); }
  .js [data-reveal="clip"] img { transform: scale(1.08); transition: transform 1.5s var(--ease-out); transition-delay: var(--delay, 0ms); }
  .js [data-reveal="clip"].is-in img { transform: none; }
  .js .work-item[data-reveal="clip"] { overflow: visible; }
  .js .work-item[data-reveal="clip"]::before { inset: 0 0 auto 0; aspect-ratio: var(--ratio, 4 / 5); border-radius: var(--r-media); }
  .js [data-reveal="line"] { opacity: 1; transform: none; }
  /* line masks are padded past the em box (ascenders and descenders stay visible at tight leading);
     the negative margins cancel the padding so the block keeps its leading */
  .js [data-reveal="line"] > .line { display: block; overflow: hidden; padding: 0.1em 0 0.2em; margin: -0.1em 0 -0.2em; }
  .js [data-reveal="line"] > .line > span { display: block; transform: translateY(135%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 80ms); }
  .js [data-reveal="line"].is-in > .line > span { transform: none; }
  .stagger > * { --delay: calc(var(--i, 0) * 70ms); }
  /* "Se alle cases": hairlines draw, words arrive from opposite sides, the count and the arrow follow */
  .js [data-reveal="cta"] { opacity: 1; transform: none; }
  .js .cases-cta::after { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
  .js .cases-cta.is-in::after { transform: scaleX(1); }
  .js .cases-cta .w { opacity: 0; transition: transform 1s var(--ease-out), opacity 0.8s var(--ease-out); }
  .js .cases-cta .w:first-child { transform: translateX(-0.4em); }
  .js .cases-cta .w:last-child { transform: translateX(0.4em); transition-delay: 90ms; }
  .js .cases-cta.is-in .w { opacity: 1; transform: none; }
  .js .cases-cta.is-in:hover .w, .js .cases-cta.is-in:focus-visible .w { transform: translateX(0.08em); }
  .js .cases-cta .cases-cta-meta, .js .cases-cta .cases-cta-arrow { opacity: 0; transition: opacity 0.8s var(--ease-out) 350ms, transform var(--d-slow) var(--ease-out); }
  .js .cases-cta .cases-cta-arrow { transform: translate(-0.3em, 0.3em); }
  .js .cases-cta.is-in .cases-cta-meta, .js .cases-cta.is-in .cases-cta-arrow { opacity: 1; transform: none; }
  .js .cases-cta.is-in:hover .cases-cta-arrow, .js .cases-cta.is-in:focus-visible .cases-cta-arrow { transform: translate(0.12em, -0.12em); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .marquee-track { animation: none; }
  .hero [data-enter], .hero-title .word > span { opacity: 1; transform: none; }
  
}

/* ---------- 23. Service pages (ydelser/) ----------
   Same system as the rest of the site: split hero with one photo window, an offset statement, hairline lists,
   three numbered columns, two case teasers, a hairline grid of reasons, the home FAQ accordion, the closing CTA. */
.svc-hero { padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 7rem)); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.svc-hero .grid { align-items: end; }
.svc-hero-copy { grid-column: 1 / span 7; display: grid; gap: var(--s-5); align-content: end; }
.svc-crumb { display: flex; align-items: center; gap: var(--s-3); }
.svc-crumb a { color: var(--text-3); transition: color var(--d-fast); padding: 0.75rem 0.5rem; margin-left: -0.5rem; }
.svc-crumb a:hover { color: var(--text); }
.svc-crumb span:last-child { color: var(--text-2); }
.svc-hero-copy .display-l { max-width: 19ch; }
.svc-hero-copy .lead { max-width: 46ch; }
.svc-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.svc-hero-media { grid-column: 8 / span 5; aspect-ratio: 4 / 5; }
.svc-hero-media img { transform: scale(1.06); animation: settle 1.6s var(--ease-out) forwards; }
.js .svc-hero [data-enter] { opacity: 0; transform: translateY(18px); animation: enter 900ms var(--ease-out) forwards; animation-delay: var(--delay, 0ms); }
.svc-intro-body { grid-column: 3 / span 8; display: grid; gap: var(--s-5); }
.svc-intro-body .display-m { max-width: 20ch; }
.svc-intro-body .lead { max-width: 62ch; }
.svc-deliver-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 4vw, 5rem); border-top: 1px solid var(--line); }
.svc-deliver-list li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr); gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.svc-deliver-list .title { font-weight: 500; }
.svc-deliver-list .body { font-size: var(--fs-small); }
.svc-approach-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-approach-list li { padding: var(--s-5) var(--s-6) var(--s-5) var(--s-5); border-left: 1px solid var(--line); display: grid; gap: var(--s-4); align-content: start; }
.svc-approach-list .step-n { font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.svc-approach-list .title { font-weight: 500; }
.svc-cases-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-8); }
.svc-cases-grid .work-item { grid-column: span 6; --ratio: 16 / 10; }
.svc-why .grid { align-items: start; }
.svc-why-intro { grid-column: 1 / span 4; display: grid; gap: var(--s-5); justify-items: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.svc-why-intro .body { max-width: 34ch; }
.svc-why-list { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.svc-why-list li { padding: var(--s-6) var(--s-5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: var(--s-3); align-content: start; }
.svc-why-list .title { font-weight: 500; }
.svc-why-list .small { color: var(--text-2); }
.svc-faq-intro { gap: var(--s-4); }
@media (max-width: 1279px) {
  .svc-deliver-list { grid-template-columns: 1fr; }   /* one wide row per deliverable: long names such as "Produktpræsentation" keep their column */
}
/* platforms: copy left, the marks right on one hairline, each with a short note where a bare mark needs one */
.svc-platforms { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.svc-platforms .grid { align-items: start; }
.svc-pf-copy { grid-column: 1 / span 4; display: grid; gap: var(--s-3); }
.svc-pf-copy .small { color: var(--text-2); max-width: 40ch; }
.svc-pf-list { grid-column: 6 / span 7; display: flex; flex-wrap: wrap; gap: var(--s-6) clamp(2rem, 1rem + 3vw, 4rem); list-style: none; margin: 0; padding: 0; align-items: start; }
.svc-pf-list li { display: grid; gap: var(--s-3); justify-items: start; }
.svc-pf-list .pf-box { display: flex; align-items: center; height: 52px; }   /* marks of different heights share one baseline for their notes */
.svc-pf-list .pf-logo { height: calc(var(--h, 32px) * 1.15); max-width: 220px; opacity: 0.9; }
.svc-pf-list .meta { color: var(--text-3); }
@media (max-width: 1023px) {
  .svc-pf-copy { grid-column: 1 / -1; }
  .svc-pf-list { grid-column: 1 / -1; margin-top: var(--s-5); }
  .svc-hero-copy { grid-column: 1 / -1; }
  .svc-hero-media { grid-column: 1 / span 8; aspect-ratio: 16 / 10; margin-top: var(--s-6); }
  .svc-intro-body { grid-column: 1 / -1; }
  .svc-deliver-list { grid-template-columns: 1fr; }
  .svc-approach-list { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .svc-approach-list li { border-left: 0; border-bottom: 1px solid var(--line); padding: var(--s-5) 0; grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "n title" "n body"; }
  .svc-approach-list .step-n { grid-area: n; padding-top: 0.35em; }
  .svc-approach-list .title { grid-area: title; }
  .svc-approach-list .body { grid-area: body; }
  .svc-why-intro { grid-column: 1 / -1; position: static; }
  .svc-why-list { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .service-page .section-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }   /* long Danish compounds: the link goes under the heading */
  .svc-hero-media { grid-column: 1 / -1; }
  .svc-deliver-list li { grid-template-columns: 1fr; gap: var(--s-2); }
  .svc-cases-grid .work-item { grid-column: 1 / -1; --ratio: 16 / 10; }
  .svc-why-list { grid-template-columns: 1fr; }
}