/* ============================================================
   OHA — Petrol direction
   Palette, type and layout recreated from the Claude Design
   handoff (OHA - Petrol.dc.html + OHA - Brands Scroll.dc.html).
   ============================================================ */

:root {
  --bg:      #06302B;   /* deep petrol            */
  --accent:  #C2F24D;   /* lime                   */
  --accent2: #FF6B4A;   /* coral                  */
  --text:    #EFEFE6;   /* off-white              */

  /* common text tints */
  --line:    rgba(239, 239, 230, .13);
  --line-2:  rgba(239, 239, 230, .35);
  --dim:     rgba(239, 239, 230, .72);

  --pad: clamp(22px, 6vw, 64px);   /* fluid horizontal gutter */

  --f-display: 'Bricolage Grotesque', sans-serif;
  --f-body:    'Hanken Grotesk', sans-serif;
  --f-mono:    'Space Grotesk', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Robust scroll lock (also holds on iOS Safari, where overflow:hidden alone leaks) */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  font: 700 14px var(--f-body);
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--bg); outline-offset: -6px; }

main:focus { outline: none; }

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--bg); }

/* ---------- keyframes ---------- */
@keyframes ohaRiseIn  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ohaNudge   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes ohaBob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes ohaFloat   { 0%, 100% { transform: translate(0, 0); }   50% { transform: translate(0, -22px); } }
@keyframes ohaFloat2  { 0%, 100% { transform: translate(0, 0); }   50% { transform: translate(14px, 18px); } }
@keyframes ohaGrad    { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes ohaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ohaPulse   { 0% { transform: scale(.82); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- shared atoms ---------- */
.accent { color: var(--accent); }

.eyebrow {
  margin: 0;
  font: 600 13px var(--f-body);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--mono { font: 700 13px var(--f-mono); }
.brands-intro .eyebrow { letter-spacing: .24em; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 12px var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}

.mono {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 15px var(--f-mono);
  flex: none;
}
.mono--lg { width: 54px; height: 54px; font-size: 16px; }

.arrow { display: inline-block; animation: ohaNudge 1.6s ease-in-out infinite; }
.bob   { display: inline-block; animation: ohaBob 1.8s ease-in-out infinite; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border-radius: 100px;
  font: 700 16px var(--f-body);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
/* Primary button: empty outline + white text; on hover a wavy green fill wells
   up from the bottom-left corner and the text darkens in lockstep with it, so
   it stays legible throughout. Applies to every .btn--solid (hero CTA,
   "Læs mere", case, etc.). */
.btn--solid {
  position: relative;
  overflow: hidden;
  isolation: isolate;                 /* keep the ::before fill behind the label */
  background: transparent;
  color: var(--text);
  padding: 16px 28px;
  /* outline + a glow layer that stays transparent until the fill finishes */
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 42%, transparent),
              0 12px 30px rgba(194, 242, 77, 0);
  /* text colour changes in step with the fill; glow fades out quickly on leave */
  transition: color .75s cubic-bezier(.65, 0, .35, 1), box-shadow .3s ease, transform .25s ease;
}
.btn--solid::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 340%;
  aspect-ratio: 1;                    /* big square → becomes a blob via radius */
  margin-left: -170%;                 /* centre the blob on the bottom-left corner */
  margin-bottom: -170%;
  z-index: -1;
  background: var(--accent);
  border-radius: 42% 58% 47% 53% / 55% 45% 52% 48%;   /* organic, wavy edge */
  transform: scale(0);                /* grows from the bottom-left corner it sits on */
  transition: transform .75s cubic-bezier(.65, 0, .35, 1);
}
.btn--solid:hover::before {
  transform: scale(1);                /* large enough to fully cover the button */
  animation: ctaWave 3.2s ease-in-out infinite;       /* undulate the wavy edge */
}
@keyframes ctaWave {
  0%, 100% { border-radius: 42% 58% 47% 53% / 55% 45% 52% 48%; }
  50%      { border-radius: 57% 43% 52% 48% / 45% 55% 48% 52%; }
}
.btn--solid:hover {
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 42%, transparent),
              0 12px 30px rgba(194, 242, 77, .25);
  /* glow only appears once the fill has finished (~0.75s) */
  transition: color .75s cubic-bezier(.65, 0, .35, 1), transform .25s ease,
              box-shadow .45s ease .75s;
}

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 16px var(--f-body);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 4px;
  transition: border-color .25s ease, color .25s ease;
}
.link-underline:hover { border-color: var(--accent); }

/* reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* typewriter — manifest statement.
   Hidden until JS arms it (consistent with .reveal); chars then reveal one by
   one. The space is reserved up front (chars keep layout at opacity 0) so the
   text never reflows while typing. */
[data-typewriter] { opacity: 0; }
[data-typewriter].tw-ready,
[data-typewriter].is-typed { opacity: 1; }
[data-typewriter] .tw-char { opacity: 0; }
[data-typewriter] .tw-char--on { opacity: 1; }
[data-typewriter] .tw-cursor {
  border-right: 2px solid var(--accent);
  margin-right: -2px; /* cancels the caret width so nothing nudges */
}
@keyframes twBlink { 0%, 45% { border-color: var(--accent); } 55%, 100% { border-color: transparent; } }
[data-typewriter].tw-typing .tw-cursor { animation: twBlink .75s step-end infinite; }

/* the green (accent) words get the same per-letter scatter on hover — reusing
   the typewriter's own per-character spans (seeded in script.js) */
[data-typewriter] .accent .tw-char {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1) var(--d, 0s);
}
[data-typewriter] .accent .tw-char:not(.tw-space) { display: inline-block; }
/* keep an accent word's inline-block letters on one line (no mid-word break) */
[data-typewriter] .tw-word { white-space: nowrap; }
[data-typewriter].tw-done .accent:hover .tw-char {
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg));
}

/* rise-in on load (hero) */
.rise { animation: ohaRiseIn .8s var(--d, 0s) both; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  background-image: linear-gradient(135deg, transparent, color-mix(in srgb, var(--bg), #fff 16%) 50%, transparent);
  background-size: 220% 220%;
  animation: ohaGrad 16s ease-in-out infinite alternate;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__glow--lime {
  top: -60px; right: 12vw;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  opacity: .4;
  filter: blur(8px);
  /* position is driven by the cursor (see script.js heroGlow); falls back to
     a gentle float when the pointer is coarse or motion is reduced */
  animation: ohaFloat 9s ease-in-out infinite;
  will-change: transform;
}
/* once JS takes over, the float is removed so it doesn't fight the follow */
.hero.glow-interactive .hero__glow--lime,
.hero.glow-interactive .hero__glow--coral,
.hero.glow-interactive .hero__ring { animation: none; }
.hero__glow--coral {
  bottom: -50px; right: -40px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 45%, transparent), transparent 70%);
  filter: blur(14px);
  animation: ohaFloat2 11s ease-in-out infinite;
  will-change: transform;
}
.hero__ring {
  position: absolute;
  top: 26vh; left: 46%;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  pointer-events: none;
  animation: ohaFloat 7s ease-in-out infinite;
  will-change: transform;
}
.hero__dots {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
.hero__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  will-change: transform;
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;                 /* above page content, below the full-screen menu (100) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px var(--pad);
  transition: padding .45s cubic-bezier(.22, 1, .36, 1);
  /* the fixed nav spans the full width but is mostly empty — let clicks fall
     through its blank area to the content beneath (e.g. the back link), while the
     logo + menu button stay interactive */
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
/* once you scroll down: bar condenses (no background), the logo glides to the
   centre and the menu button tucks minimally to the edge — purely smooth */
.nav.is-stuck {
  padding-top: 14px;
  padding-bottom: 14px;
  padding-right: clamp(14px, 3.4vw, 30px);
}
.nav__logo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  font: 800 26px var(--f-display);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  padding: 6px 14px;
  margin: -6px -14px;                 /* keep "OHA" in its original spot */
  border-radius: 10px;
  transition: color .75s cubic-bezier(.65, 0, .35, 1), background-color .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
  will-change: transform;
}
/* at the footer scene, fade the header "OHA" out so it doesn't sit over the footer
   (class toggled by footerScene() in script.js) */
.nav-hide .nav__logo { opacity: 0; pointer-events: none; }
/* same green fill as the buttons: on hover, and automatically (.is-onlight, set
   by JS) when the logo sits on a light background where white "OHA" is hard to read */
.nav__logo::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 300%;
  aspect-ratio: 1;
  margin-left: -150%;                 /* centre the blob on the bottom-left corner */
  margin-bottom: -150%;
  z-index: -1;
  background: var(--accent);
  border-radius: 42% 58% 47% 53% / 55% 45% 52% 48%;
  transform: scale(0);
  transition: transform .75s cubic-bezier(.65, 0, .35, 1);
}
.nav__logo:hover { color: var(--bg); }
.nav__logo:hover::before { transform: scale(1); animation: ctaWave 3.2s ease-in-out infinite; }
/* illegible (.is-onlight, set by JS): a solid WHITE pill so the dark "OHA" reads
   on any background; on hover the green wavy fill wells up over the white */
.nav__logo.is-onlight { background: var(--text); color: var(--bg); }
.nav__logo.is-onlight:hover::before { transform: scale(1); animation: ctaWave 3.2s ease-in-out infinite; }
/* centre the logo horizontally regardless of its width (50% = half the logo;
   +14px compensates the logo's padding-left so centring stays true) */
.nav.is-stuck .nav__logo {
  transform: translateX(calc(50vw - var(--pad) - 50% + 14px));
}
/* Subpages start (and stay) in the condensed "stuck" nav variant — the logo sits
   centred, away from the back link beneath it (class added by stickyNav in JS). */

.menu-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;                 /* keep the ::before fill behind the label */
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--text) 32%, transparent);  /* same weight as the bars */
  color: var(--text);
  padding: 11px 21px;
  border-radius: 10px;   /* square (rounded) outline */
  font: 600 14px var(--f-mono);
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .75s cubic-bezier(.65, 0, .35, 1), border-color .75s cubic-bezier(.65, 0, .35, 1),
              background-color .4s ease,
              padding .45s cubic-bezier(.22, 1, .36, 1),
              gap .45s cubic-bezier(.22, 1, .36, 1);
}
/* same wavy fill as the hero CTA: a green blob wells up from the bottom-left */
.menu-btn::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 400%;
  aspect-ratio: 1;
  margin-left: -200%;                 /* centre the blob on the bottom-left corner */
  margin-bottom: -200%;
  z-index: -1;
  background: var(--accent);
  border-radius: 42% 58% 47% 53% / 55% 45% 52% 48%;
  transform: scale(0);
  transition: transform .75s cubic-bezier(.65, 0, .35, 1);
}
.menu-btn:hover::before {
  transform: scale(1);
  animation: ctaWave 3.2s ease-in-out infinite;
}
.menu-btn:hover {
  color: var(--bg);
  border-color: var(--accent);   /* match the green fill — no dark outline ring */
}
/* auto solid state (set by JS) — when the button overlaps an image, light area or
   big text where its outline is hard to read: a solid WHITE base with a dark icon,
   so it stays legible on anything. On hover the usual green wavy fill wells up. */
.menu-btn.is-solid {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.menu-btn.is-solid::before { transform: scale(0); }          /* green hidden until hover */
.menu-btn.is-solid:hover { border-color: var(--accent); color: var(--bg); }
.menu-btn.is-solid:hover::before { transform: scale(1); animation: ctaWave 3.2s ease-in-out infinite; }
.menu-btn__label {
  display: inline-block;
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
/* scrolled: drop the word, collapse to a minimal square icon button */
.nav.is-stuck .menu-btn {
  gap: 0;
  padding: 12px;
  border-radius: 10px;
}
.nav.is-stuck .menu-btn__label {
  max-width: 0;
  opacity: 0;
}
.menu-btn__bars { display: flex; flex-direction: column; gap: 4px; }
.menu-btn__bars span { width: 20px; height: 2px; background: currentColor; }
.menu-btn__x { position: relative; width: 16px; height: 16px; }
.menu-btn__x span {
  position: absolute; top: 7px; left: 0;
  width: 16px; height: 2px; background: currentColor;
}
.menu-btn__x span:first-child { transform: rotate(45deg); }
.menu-btn__x span:last-child  { transform: rotate(-45deg); }

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
}
.hero__content { max-width: 920px; }
.hero__title {
  margin: 24px 0 0;
  font: 800 clamp(2.75rem, 8vw, 5.5rem)/0.98 var(--f-display);
  letter-spacing: -0.02em;
}
.hero__title span { display: block; }
.hero__lead {
  margin: 30px 0 0;
  max-width: 560px;
  font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.5 var(--f-body);
  opacity: .72;
}
.hero__content .btn { margin-top: 38px; }

.hero__foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 26px var(--pad);
}

/* ============================================================
   BRAND TICKER
   ============================================================ */
.ticker {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 34px 0;
  overflow: clip;
}
.ticker__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(48px, 10vw, 140px);
  z-index: 2;
  pointer-events: none;
}
.ticker__fade--l { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.ticker__fade--r { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.ticker__row {
  display: flex;
  width: max-content;
  will-change: transform;
  /* motion is JS-driven (ticker() in script.js) so hovering can ease the speed
     DOWN smoothly rather than jump; this CSS marquee is just the no-JS fallback */
  animation: ohaMarquee 34s linear infinite;
}
.ticker__group { display: flex; align-items: center; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-right: 58px;
  text-decoration: none;
  color: var(--text);
}
.ticker__name {
  font: 700 clamp(19px, 2vw, 28px) var(--f-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .25s ease;
}
/* each brand is clickable; its name turns green on hover, like our other links */
.ticker__item:hover .ticker__name,
.ticker__item:focus-visible .ticker__name { color: var(--accent); }
.ticker__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;   /* every logo normalised to the same 48px box */
  flex: none;
}

/* ============================================================
   MANIFEST
   ============================================================ */
.manifest {
  border-top: 1px solid var(--line);
  padding: clamp(64px, 12vw, 120px) var(--pad);
}
.manifest .eyebrow { margin-bottom: 36px; }
.manifest__statement {
  margin: 0;
  max-width: 1060px;
  font: 600 clamp(1.85rem, 4.6vw, 3.375rem)/1.16 var(--f-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.manifest .link-underline { margin-top: 50px; }

/* ============================================================
   BRANDS — STICKY SECTION
   ============================================================ */
.brands { border-top: 1px solid var(--line); }

.brands-intro {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 14vh, 160px) var(--pad);
  position: relative;
}
.brands-intro__title {
  margin: 28px 0 0;
  font: 800 clamp(3rem, 8.5vw, 8rem)/0.98 var(--f-display);
  letter-spacing: -0.03em;
  max-width: 14ch;
  text-wrap: balance;
}
.brands-intro__lead {
  margin: 30px 0 0;
  max-width: 560px;
  font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.55 var(--f-body);
  opacity: .72;
}
.brands-intro__hint {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 600 12px var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
}

/* the tall scroll track — its height drives the pin duration.
   ~112vh of scroll per chapter transition; scale with the chapter count
   (7 chapters → 6 transitions). */
.brands-track {
  height: 784vh;
  height: 784dvh;
  position: relative;
}
.brands-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
}
.brands-stage__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(80px, 11vh, 110px) var(--pad) 0;
  font: 700 12px var(--f-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.brands-stage__label { color: var(--text); }
.brands-stage__counter { display: inline-flex; align-items: baseline; color: var(--accent); }
.brands-stage__counter-total { color: var(--text); opacity: .55; }

.brands-progress {
  position: absolute;
  left: var(--pad); right: var(--pad);
  top: clamp(112px, 14vh, 150px);
  z-index: 6;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.brands-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(.2);
  transform-origin: left;
  transition: transform .15s linear;
}

.brands-chapters { position: absolute; inset: 0; }

.chapter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* top clearance keeps centered content clear of the pinned label + progress bar */
  padding: clamp(110px, 16vh, 150px) var(--pad) clamp(40px, 8vh, 72px);
  background: var(--bg);
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .22);
  transform: translateY(100%);
  will-change: transform;
}
.chapter[data-index="0"] { transform: translateY(0); box-shadow: none; }

.chapter__bg {
  position: absolute;
  right: 4vw; bottom: -4vh;
  font: 800 34vw/0.7 var(--f-display);
  color: var(--accent);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}
/* brand-relevant visual on the right of each chapter — a 3D model with an
   SVG fallback. The container glides with the cursor; the model sways in 3D
   (see script.js). */
.chapter__visual {
  position: absolute;
  top: 0; bottom: 0;
  right: clamp(20px, 4vw, 80px);
  width: clamp(180px, 26vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  pointer-events: none;
  will-change: transform;
}
.chapter__visual svg { width: 100%; height: auto; opacity: .8; }
.chapter__model {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}
.chapter__visual.is-3d svg { opacity: 0; } /* hide fallback once the model loads */
@media (max-width: 900px) {
  .chapter__visual { display: none; }
}
.chapter__body { position: relative; max-width: 1100px; }
.chapter__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
.chapter__tag {
  font: 700 13px var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.chapter__name {
  margin: 0;
  font: 800 clamp(3rem, 7vw, 6.75rem)/0.96 var(--f-display);
  letter-spacing: -0.03em;
}
.chapter__line {
  margin: 26px 0 0;
  max-width: 620px;
  font: 400 clamp(1.05rem, 1.6vw, 1.3125rem)/1.5 var(--f-body);
  opacity: .74;
}
.chapter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}
.chapter__actions .btn--solid { padding: 13px 24px; font-size: 15px; }
.chapter__actions .link-underline { font-size: 15px; }

/* ============================================================
   CASE
   ============================================================ */
.case {
  border-top: 1px solid var(--line);
  padding: clamp(64px, 12vw, 120px) var(--pad);
}
.case .eyebrow { margin-bottom: 30px; }
.case__title {
  margin: 0;
  max-width: 16ch;
  font: 800 clamp(1.95rem, 5vw, 3.75rem)/1.02 var(--f-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.case__player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-top: clamp(24px, 4vw, 54px);
  border-radius: 8px;
  overflow: clip;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg) 70%, #000), var(--bg));
}
.case__bg {
  position: absolute;
  right: -2vw; bottom: -6vh;
  font: 800 clamp(150px, 24vw, 340px)/0.8 var(--f-display);
  color: var(--accent);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.case__veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 30% 25%, transparent, rgba(0, 0, 0, .4));
  pointer-events: none;
}
.case__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.case__play > * { position: relative; }
.case__pulse {
  position: absolute;
  width: clamp(64px, 9vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: ohaPulse 2.4s ease-out infinite;
}
.case__disc {
  width: clamp(56px, 8vw, 90px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
.case__player:hover .case__disc { transform: scale(1.06); }
/* temporary "coming soon" state for the case panel */
.case__player--soon { cursor: default; }
.case__soon {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; text-align: center; padding: 28px;
}
.case__soon-badge {
  font: 700 12px var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; padding: 8px 16px;
}
.case__soon-title {
  max-width: 22ch;
  font: 700 clamp(1.35rem, 3.4vw, 2.3rem)/1.18 var(--f-display);
  letter-spacing: -0.01em;
}

/* ============================================================
   CLOSING CTA — soft invitation to build custom software
   ============================================================ */
.cta {
  padding: clamp(80px, 15vw, 160px) var(--pad);
  border-top: 1px solid var(--line);
  text-align: center;
}
.cta__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cta .eyebrow { margin: 0; }
.cta__title {
  margin: 0;
  font: 800 clamp(2rem, 5.5vw, 4rem)/1.02 var(--f-display);
  letter-spacing: -0.03em;
}
.cta__lead {
  margin: 0;
  max-width: 560px;
  font: 400 clamp(1.05rem, 1.7vw, 1.35rem)/1.55 var(--f-body);
  opacity: .74;
}
.cta__inner > div { margin-top: 8px; }
.case__tri {
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--bg);
  margin-left: 5px;
}
.case__meta {
  position: absolute;
  left: clamp(16px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 26px);
  display: flex;
  align-items: center;
  gap: 13px;
}
.case__meta .mono { width: 42px; height: 42px; font-size: 13px; border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.case__meta-title { display: block; font: 700 16px var(--f-body); }
.case__meta-sub {
  display: block;
  margin-top: 3px;
  font: 600 12px var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .62;
}
.case__time {
  position: absolute;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 30px);
  font: 700 13px var(--f-mono);
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  padding: 7px 12px;
  border-radius: 6px;
}
.case__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 46px;
  flex-wrap: wrap;
}
.stats { display: flex; gap: clamp(28px, 5vw, 54px); }
.stat__num {
  display: block;
  font: 800 clamp(1.85rem, 3.4vw, 2.875rem)/1 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--accent);
}
.stat__label {
  display: block;
  margin-top: 6px;
  font: 600 12px var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

/* ============================================================
   REVEAL FOOTER
   .page sits above the footer with an opaque background; the
   footer is fixed to the viewport bottom behind it. A bottom
   margin on .page equal to the footer height lets the page slide
   up at the end of the scroll to uncover the footer. Enabled by
   JS only when the footer fits the viewport (see script.js).
   ============================================================ */
.page {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
/* ============================================================
   FOOTER SCENE — the footer is a full-screen scene you scroll
   INTO: an inset, rounded card that expands to fill the viewport
   while the footer content fades in on top. Progress is driven
   by footerScene() in script.js via the --fs-* / --fc custom
   props. Small screens / reduced motion get .footer-static.
   ============================================================ */
.footer-track {
  position: relative;
  height: 210vh;
  height: 210svh;
  background: var(--bg);
}
.footer-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  background: var(--bg);
}
/* the expanding card: starts inset + rounded, clip-path grows to full-bleed.
   Defaults are the EXPANDED state so the footer is fine without JS. */
.footer-scene {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(42% 52% at 78% 22%, rgba(194, 242, 77, .10), transparent 70%),
    radial-gradient(38% 48% at 14% 80%, rgba(255, 122, 89, .07), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg), #fff 7%), var(--bg) 52%, color-mix(in srgb, var(--bg), #000 26%));
  clip-path: inset(var(--fs-y, 0px) var(--fs-x, 0px) var(--fs-y, 0px) round var(--fs-r, 0px));
}
.footer-scene__mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  font: 800 clamp(180px, 34vw, 640px)/0.72 var(--f-display);
  letter-spacing: -0.04em;
  opacity: .07;
  user-select: none;
  white-space: nowrap;
}
/* static fallback: normal in-flow footer with the scene as a full backdrop */
.footer-track.footer-static { height: auto; }
.footer-static .footer-stage { position: relative; height: auto; overflow: visible; }
.footer-static .footer-scene { clip-path: none !important; }
.footer-static .footer-scene__mark {
  top: auto; bottom: 4vh;
  transform: translateX(-50%);
  font-size: clamp(140px, 40vw, 680px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  isolation: isolate; /* contain the footer's grid layer (z-index:-1) behind its content */
  border-top: 1px solid var(--line);
  padding: clamp(104px, 12vw, 160px) var(--pad) 0;
  overflow: clip;
  background: var(--bg);
}
/* inside the scene: content lives ON TOP of the expanding card and fades in
   near the end of the scroll (opacity/translate via --fc) */
.footer-stage .footer {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-top: 0;
  background: transparent;
  overflow: visible;
  opacity: var(--fc, 1);
  transform: translateY(calc((1 - var(--fc, 1)) * 44px));
}
.footer-static .footer-stage .footer {
  position: relative;
  opacity: 1;
  transform: none;
}
.footer__cols {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 64px 0 70px;
  flex-wrap: wrap;
}
.footer__brand { max-width: 380px; }
.footer__blurb { margin: 0; font: 400 16px/1.55 var(--f-body); opacity: .66; }
.footer__email {
  display: inline-block;
  margin-top: 22px;
  font: 600 17px var(--f-body);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 18px;
  font: 500 15px/1.5 var(--f-body);
  font-style: normal;
  opacity: .62;
}
.footer__contact a { color: inherit; text-decoration: none; transition: opacity .2s ease, color .2s ease; }
.footer__contact a:hover { opacity: 1; color: var(--accent); }
.footer__links { display: flex; gap: clamp(34px, 6vw, 70px); flex-wrap: wrap; }
.footer__group { display: flex; flex-direction: column; gap: 12px; }
.footer__group-title {
  margin: 0 0 8px;
  font: 700 12px var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer__group a {
  font: 500 16px var(--f-body);
  text-decoration: none;
  opacity: .8;
  transition: opacity .2s ease, color .2s ease;
}
.footer__group a:hover { opacity: 1; color: var(--accent); }

.footer__watermark {
  position: absolute;
  left: var(--pad);
  bottom: clamp(40px, 6vh, 80px);
  z-index: 0;
  margin: 0;
  font: 800 clamp(140px, 40vw, 680px)/0.72 var(--f-display);
  letter-spacing: -0.04em;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.footer__legal {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  font: 600 13px var(--f-mono);
  letter-spacing: .04em;
  opacity: .55;
}
.footer__legal-links { display: flex; gap: 26px; }
.footer__legal a { text-decoration: none; }

/* ============================================================
   FULL-SCREEN MENU
   ============================================================ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  overflow: clip;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; pointer-events: auto; }

.menu__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.menu__glow--lime {
  top: -130px; right: -90px;
  width: 540px; height: 540px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  opacity: .16; filter: blur(34px);
}
.menu__glow--coral {
  bottom: -150px; left: -70px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 28%, transparent), transparent 70%);
  filter: blur(34px);
}

.menu__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px var(--pad);
}
.menu__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  padding: 0 var(--pad);
  height: calc(100% - 96px);
}
.menu__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 22px;
  text-decoration: none;
  color: var(--text);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s ease, transform .45s ease, color .4s ease;
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:hover,
.menu__nav a:focus-visible { color: var(--accent); }   /* the number hints green; the letters fill via text-clip below */
.menu__num { font: 600 14px var(--f-mono); opacity: .6; min-width: 34px; }
.menu__word { font: 700 clamp(2.5rem, 6vw, 4.125rem)/1.04 var(--f-display); letter-spacing: -0.02em; }
/* "spacy" hover: letters drift apart, up/down and slightly skewed */
.menu__char {
  display: inline-block;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);   /* eases back to rest when hover ends */
}
/* Menu items share ONE principle: on hover the letters turn green and gently
   drift in low gravity — very subtle, mostly vertical with only a tiny bit of
   horizontal so letters never overlap; each loops at its own speed + phase. */
.menu__scatter { transition: color .35s ease; }
.menu__scatter:hover,
.menu__scatter:focus-visible { color: var(--accent); }
/* float runs while .menu-float-on is set (toggled by JS so the return can be
   handed to the transition above instead of snapping when the animation stops) */
.menu-float-on .menu__char {
  animation: menuFloat var(--dur, 4s) ease-in-out var(--d, 0s) infinite;
}
@keyframes menuFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)); }
  66%  { transform: translate(calc(var(--tx, 0px) * -0.8), calc(var(--ty, 0px) * -0.7)) rotate(calc(var(--rot, 0deg) * -0.7)); }
}

.menu__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  border-left: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  padding-left: 44px;
}
.menu__brands {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font: 600 19px var(--f-body);
}
.menu__brands a { color: inherit; text-decoration: none; }
.menu__email { display: block; font: 500 18px var(--f-body); text-decoration: none; }
.menu__tel { display: block; margin-top: 8px; font: 500 18px var(--f-body); text-decoration: none; }
.menu__addr { margin: 12px 0 0; font: 400 14px/1.6 var(--f-body); font-style: normal; opacity: .58; }
.menu__social { display: flex; gap: 18px; margin-top: 14px; font: 500 14px var(--f-body); opacity: .7; }
.menu__social a { color: inherit; text-decoration: none; }
.menu__contact { display: flex; flex-direction: column; gap: 22px; }
.menu__contact-main { display: flex; flex-direction: column; }

/* ============================================================
   GRID SPOTLIGHT
   A faint grid texture revealed only in a circle around the
   cursor. Fixed overlay above content (below the menu), masked
   to the pointer position (--mx/--my driven by script.js).
   ============================================================ */
.grid-spotlight {
  position: fixed;
  top: 0; left: 0;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  z-index: -1;            /* behind all page content (text, images), above the page background */
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  --mx: 0px;
  --my: 0px;
  --r: 240px;
  background-image:
    linear-gradient(to right, rgba(239, 239, 230, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(239, 239, 230, .09) 1px, transparent 1px);
  background-size: 56px 56px;
  /* counter the lens translation so the grid stays anchored to the viewport */
  background-position: calc(var(--r) - var(--mx)) calc(var(--r) - var(--my));
  /* static soft-circle mask, centred in the small lens box */
  -webkit-mask: radial-gradient(circle var(--r) at center, #000 0%, #000 30%, transparent 72%);
          mask: radial-gradient(circle var(--r) at center, #000 0%, #000 30%, transparent 72%);
  /* move the small lens with a composited transform — avoids repainting the whole viewport */
  transform: translate3d(calc(var(--mx) - var(--r)), calc(var(--my) - var(--r)), 0);
  will-change: transform;
}
.grid-spotlight.is-active { opacity: 1; }
/* touch / reduced-motion: a quiet static grid covering the page (not the footer), no follow */
.grid-spotlight.grid-static {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  background-position: 0 0;
  will-change: auto;
  opacity: .4;
  -webkit-mask: none;
          mask: none;
}

/* ============================================================
   PROJECT SUBPAGE (projekt.html)
   ============================================================ */
.proj-hero {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: 78vh;
  min-height: 78svh;
  background-image: linear-gradient(135deg, transparent, color-mix(in srgb, var(--bg), #fff 14%) 50%, transparent);
  background-size: 220% 220%;
  animation: ohaGrad 16s ease-in-out infinite alternate;
}
.proj-hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1100px;
  padding: clamp(32px, 6vh, 70px) var(--pad) clamp(48px, 9vh, 100px);
}
.proj-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(24px, 4vh, 44px);
  font: 600 13px var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .7;
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}
.proj-back:hover { opacity: 1; color: var(--accent); }
.proj-hero .eyebrow { margin-bottom: 22px; }
.proj-title {
  margin: 0;
  font: 800 clamp(3rem, 9vw, 8rem)/0.95 var(--f-display);
  letter-spacing: -0.03em;
  overflow-wrap: break-word;   /* never overflow the clipped hero */
}
/* compact hero for text-heavy pages (legal) — no tall viewport hero */
.proj-hero--compact { min-height: auto; }
.proj-hero--compact .proj-title { font-size: clamp(2.6rem, 7vw, 5rem); }

/* readable legal / long-form prose */
.legal-prose { max-width: 760px; }
.legal-prose > h2 { margin: 42px 0 12px; font: 800 clamp(1.3rem, 2.6vw, 1.8rem)/1.15 var(--f-display); letter-spacing: -0.01em; }
.legal-prose > h2:first-child { margin-top: 0; }
.legal-prose p { margin: 0 0 16px; font: 400 clamp(1rem, 1.5vw, 1.125rem)/1.65 var(--f-body); opacity: .82; }
.legal-prose ul { margin: 0 0 18px; padding-left: 20px; }
.legal-prose li { margin: 0 0 8px; font: 400 clamp(1rem, 1.5vw, 1.125rem)/1.6 var(--f-body); opacity: .82; }
.legal-prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.legal-prose strong { color: var(--text); font-weight: 700; }
.proj-lead {
  margin: 28px 0 0;
  max-width: 620px;
  font: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.5 var(--f-body);
  opacity: .74;
  overflow-wrap: break-word;
}
.proj-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}
.proj-tags {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 13px var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .7;
}
.proj-tags .mono { width: 34px; height: 34px; font-size: 12px; }

/* section rhythm */
.proj-section {
  padding: clamp(48px, 8vw, 96px) var(--pad);
  border-top: 1px solid var(--line);
}
.proj-section--tight {
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(28px, 4vw, 52px);
  border-top: 0;
}

/* placeholder media boxes */
.proj-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: clip;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg) 62%, #000), var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj-media--hero { aspect-ratio: 21 / 9; }
/* a real image fills the frame at its own ratio (no placeholder gradient/crop) */
.proj-media--filled { aspect-ratio: auto; background: none; }
.proj-media__img { width: 100%; height: auto; display: block; }
/* a transparent mockup floats freely — no frame/bg, centred with a sane max size */
.proj-media--bare { aspect-ratio: auto; background: none; border: 0; overflow: visible; }
.proj-media--bare .proj-media__img { width: auto; max-width: min(100%, 820px); margin-inline: auto; }
.proj-media__mono {
  position: absolute;
  right: 3%; bottom: -10%;
  font: 800 clamp(140px, 30vw, 460px)/0.7 var(--f-display);
  color: var(--accent);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}
.proj-media__label {
  position: relative;
  font: 600 12px var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .4;
}

.proj-facts { gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; }

/* overview — two columns */
.proj-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.proj-overview__head .eyebrow { margin-bottom: 22px; }
.proj-h2 {
  margin: 0;
  font: 700 clamp(1.65rem, 3.2vw, 2.6rem)/1.12 var(--f-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.proj-overview__body p {
  margin: 0 0 18px;
  font: 400 clamp(1rem, 1.3vw, 1.15rem)/1.65 var(--f-body);
  opacity: .74;
}
.proj-overview__body p:last-child { margin-bottom: 0; }

/* gallery */
.proj-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}

/* approach steps */
.proj-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));  /* adapts to 3 or 4 steps */
  gap: clamp(24px, 4vw, 48px);
  margin-top: 40px;
}
.proj-step__num {
  display: block;
  margin-bottom: 16px;
  font: 700 13px var(--f-mono);
  letter-spacing: .2em;
  color: var(--accent);
}
.proj-step__title {
  margin: 0 0 10px;
  font: 800 clamp(1.2rem, 1.8vw, 1.6rem) var(--f-display);
  letter-spacing: -0.01em;
}
.proj-step p { margin: 0; font: 400 16px/1.6 var(--f-body); opacity: .72; }

/* selected-clients row (studio pages) */
.proj-clients {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 30px;
}
.proj-clients span,
.proj-clients a {
  font: 700 clamp(1.15rem, 2.4vw, 1.7rem) var(--f-display);
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  opacity: .5;
  transition: opacity .2s ease, color .2s ease;
}
.proj-clients span:hover,
.proj-clients a:hover,
.proj-clients a:focus-visible { opacity: 1; color: var(--accent); }

/* pull quote */
.proj-quote { margin: 0; max-width: 1000px; }
.proj-quote p {
  margin: 0;
  font: 600 clamp(1.6rem, 3.6vw, 3rem)/1.2 var(--f-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.proj-quote__by {
  margin-top: 26px;
  font: 600 13px var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

/* quote empty-state — looks like a comment is loading, with an invite beside it */
.proj-quote-empty {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.quote-skeleton { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.quote-skeleton__mark {
  font: 800 clamp(56px, 7vw, 88px)/0.5 var(--f-display);
  color: color-mix(in srgb, var(--accent) 45%, transparent);
  margin-bottom: 6px;
}
.sk-line, .sk-by {
  border-radius: 7px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--text) 8%, transparent) 25%,
      color-mix(in srgb, var(--text) 20%, transparent) 37%,
      color-mix(in srgb, var(--text) 8%, transparent) 63%);
  background-size: 400% 100%;
  animation: skShimmer 1.5s ease-in-out infinite;
}
.sk-line { height: clamp(24px, 3.2vw, 34px); }
.sk-line--short { width: 52%; }
.sk-by { width: 38%; height: 14px; margin-top: 12px; opacity: .75; }
@keyframes skShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.quote-invite__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font: 600 12px var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.quote-invite__label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: skPulse 1.5s ease-in-out infinite;
}
@keyframes skPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.quote-invite__title {
  margin: 0 0 22px;
  font: 700 clamp(1.7rem, 3.4vw, 2.6rem)/1.08 var(--f-display);
  letter-spacing: -0.02em;
}

/* next project */
.proj-next {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.proj-next__label {
  font: 700 12px var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.proj-next__name {
  font: 800 clamp(2.2rem, 6vw, 5rem)/1 var(--f-display);
  letter-spacing: -0.03em;
  transition: color .2s ease;
}
.proj-next:hover .proj-next__name { color: var(--accent); }

@media (max-width: 820px) {
  .proj-overview,
  .proj-gallery,
  .proj-quote-empty,
  .proj-steps { grid-template-columns: 1fr; }
}

/* Hyphenate long single-word project titles (fx "Autocamperparkering") on
   narrow screens so they break with a hyphen instead of a hard cut — on wide
   screens the lines are long enough that hyphenation just looks broken. */
@media (max-width: 900px) {
  .proj-title { -webkit-hyphens: auto; hyphens: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .menu__grid {
    grid-template-columns: 1fr;
    gap: 0;
    align-content: stretch;
  }
  .menu__nav { justify-content: flex-start; padding-top: 8px; gap: 8px; }
  /* bigger, bolder nav words on phones so they fill the space (still balanced) */
  .menu__word { font-size: clamp(3.5rem, 15vw, 4.75rem); }
  .menu__num { font-size: 15px; }
  .menu__aside {
    border-left: 0;
    padding-left: 0;
    margin-top: auto;
    padding-bottom: 28px;
    gap: 22px;
  }
  .menu__brands { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; opacity: .85; }
  /* phone: drop the projects list, and place contact + address side by side */
  .menu__aside-brands { display: none; }
  .menu__contact { flex-direction: row; gap: 28px; align-items: flex-start; }
  .menu__contact-main, .menu__contact-addr { flex: 1; min-width: 0; }
}

@media (max-width: 720px) {
  .nav { padding: 24px var(--pad); }
  .menu-btn { padding: 10px 16px; }
  /* keep the back link ("← Alle projekter") clear of the fixed nav on phones */
  .proj-hero__inner { padding-top: 108px; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .chapter__meta { flex-wrap: wrap; gap: 12px; }
  .chapter__bg { font-size: 46vw; right: -2vw; }
  .stats { gap: 24px; width: 100%; }
  .stat { flex: 1; }
  .case__foot { gap: 24px; }
  .case__foot .btn { width: 100%; justify-content: center; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* On short / touch screens give the pinned track a touch more room per card */
@media (max-width: 720px) {
  .brands-track { height: 840vh; height: 840dvh; }
  .chapter__name { font-size: clamp(2.5rem, 12vw, 3.5rem); }
}

/* Short / landscape viewports: top-align chapter content so it can't collide
   with the pinned label + progress bar */
@media (max-height: 720px) {
  .chapter { align-items: flex-start; }
}

/* ============================================================
   TOUCH DEVICES — no real hover
   A tap on a touch screen fires :hover and leaves it "stuck" until you
   tap elsewhere, which would freeze the wavy fills mid-animation. So on
   hoverless devices we hold every hover effect at its resting state and
   move the feedback to a quick :active press instead (the touch
   equivalent of the fill welling up).
   ============================================================ */
@media (hover: none) {
  /* --- hold hover effects at rest (don't let a tap stick them) --- */
  .btn--solid:hover::before { transform: scale(0); animation: none; }
  .btn--solid:hover {
    color: var(--text);
    transform: none;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 42%, transparent),
                0 12px 30px rgba(194, 242, 77, 0);
  }
  .menu-btn:hover::before { transform: scale(0); animation: none; }
  .menu-btn:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 32%, transparent);
  }
  .menu-btn.is-solid:hover::before { transform: scale(0); }          /* touch: keep the white base, don't stick a green fill */
  .menu-btn.is-solid:hover { color: var(--bg); border-color: var(--text); }
  .nav__logo:hover::before { transform: scale(0); animation: none; }
  .nav__logo:hover { color: var(--text); }
  .nav__logo.is-onlight:hover { color: var(--bg); }                 /* keep the white pill's dark "OHA" on tap */
  .case__player:hover .case__disc { transform: none; }
  .link-underline:hover { border-color: var(--line-2); }
  .menu__nav a:hover,
  .menu__scatter:hover,
  .proj-clients a:hover,
  .proj-clients span:hover,
  .proj-next:hover .proj-next__name { color: inherit; }
  .footer__group a:hover,
  .footer__contact a:hover,
  .proj-back:hover { color: inherit; opacity: .8; }

  /* --- tap feedback (:active) — the touch stand-in for hover --- */
  .btn--solid:active::before { transform: scale(1); transition: transform .25s ease; }
  .btn--solid:active { color: var(--bg); transform: scale(.98); }
  .menu-btn:active::before { transform: scale(1); transition: transform .25s ease; }
  .menu-btn:active { color: var(--bg); border-color: var(--accent); transform: scale(.96); }
  .menu-btn.is-solid:active::before { transform: scale(1); }         /* tap → green wells up over the white base */
  .menu-btn.is-solid:active { color: var(--bg); border-color: var(--accent); }
  .case__player:active .case__disc { transform: scale(1.06); }
  .proj-next:active .proj-next__name,
  .menu__nav a:active,
  .footer__group a:active,
  .proj-clients a:active,
  .proj-back:active,
  .link-underline:active { color: var(--accent); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  .arrow, .bob,
  .hero, .hero__glow, .hero__ring,
  .ticker__row, .case__pulse {
    animation: none !important;
  }
  .rise { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-typewriter], [data-typewriter] .tw-char { opacity: 1 !important; }
  .brands-progress span { transition: none !important; }
  .menu__char { transition: none !important; }
  .menu__nav a:hover .menu__char,
  .menu__nav a:focus-visible .menu__char,
  .menu__scatter:hover .menu__char,
  .menu__scatter:focus-visible .menu__char,
  [data-typewriter].tw-done .accent:hover .tw-char { transform: none !important; }
  [data-typewriter] .accent .tw-char { transition: none !important; }
  .nav, .nav__logo, .menu-btn, .menu-btn__label,
  .btn--solid::before, .menu-btn::before, .nav__logo::before, .menu__nav a::before { transition: none !important; }
  .hero, .proj-hero { background-position: 50% 50%; }
}