/* =========================================================================
   AMEBA — Timber Craft & Conservation
   Design system: "The Drafting Table"
   Danish mid-century modern × architect's technical drawing
   ========================================================================= */

/* ----------------------------------------------------------------- Tokens */
:root {
  /* Palette — warm paper & timber */
  --paper:       #F4EEE3;
  --paper-warm:  #F8F3EA;
  --paper-deep:  #ECE4D4;
  --paper-edge:  #E4DAC7;
  --ink:         #211B12;
  --ink-2:       #3A3123;
  --ink-soft:    #6A5D49;
  --ink-faint:   #95897A;
  --rule:        #CCBFA6;
  --rule-soft:   #DACFB9;
  --ochre:       #B07A30;
  --ochre-deep:  #8F5F20;
  --ochre-soft:  #C79A57;
  --clay:        #A8542B;

  /* Type — editorial serif display / humanist body / technical mono */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Spacing & layout */
  --maxw: 1280px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(125% 90% at 72% -12%, var(--paper-warm), transparent 46%),
    radial-gradient(120% 80% at 8% 108%, var(--paper-deep), transparent 50%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea { font: inherit; color: inherit; }

::selection { background: var(--ochre); color: var(--paper-warm); }

:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--ink); color: var(--paper-warm);
  padding: 0.8em 1.3em;
  transform: translateY(-250%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* --------------------------------------------------- Atmosphere overlays */
.grain {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Drafting-sheet crop marks */
.sheet { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.sheet .mark { position: absolute; width: 14px; height: 14px; opacity: 0.55; }
.sheet .tl { top: 18px; left: 18px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.sheet .tr { top: 18px; right: 18px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.sheet .bl { bottom: 18px; left: 18px; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.sheet .br { bottom: 18px; right: 18px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }
@media (max-width: 680px) { .sheet { display: none; } }

/* ------------------------------------------------------------- Typography */
h1, h2 {
  font-family: var(--display); font-weight: 400;
  line-height: 1.08; letter-spacing: -0.018em;
  font-optical-sizing: auto; text-wrap: balance;
}
h3, h4 {
  font-family: var(--display); font-weight: 480;
  line-height: 1.2; letter-spacing: -0.01em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.75em;
}
.eyebrow .tick { width: 1.7rem; height: 1px; background: var(--ochre); display: inline-block; }

.fig {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre-deep);
}

.lead {
  font-size: clamp(1.15rem, 1.02rem + 0.7vw, 1.5rem);
  line-height: 1.5; color: var(--ink-2);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.muted { color: var(--ink-soft); }

p + p { margin-top: 1.15em; }

em { font-style: italic; }

/* ----------------------------------------------------------------- Layout */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.container.narrow { max-width: 760px; }

main { position: relative; z-index: 1; }

.section { padding-block: var(--section-y); border-top: 1px solid var(--rule); position: relative; }
/* --plain continues the page-head above it: no rule, tighter top */
.section--plain { border-top: none; padding-top: clamp(1rem, 2.5vw, 2rem); }

.section-head {
  display: flex; align-items: baseline; gap: 1.4rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  flex-wrap: wrap;
}

.section-title {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  max-width: 18ch;
}
.section-intro { margin-top: 1.4rem; max-width: 48ch; }

/* ------------------------------------------------------------ Reveal anim */
.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal-list] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal-list].is-in > * { opacity: 1; transform: none; }
.js [data-reveal-list].is-in > *:nth-child(1) { transition-delay: 0.04s; }
.js [data-reveal-list].is-in > *:nth-child(2) { transition-delay: 0.12s; }
.js [data-reveal-list].is-in > *:nth-child(3) { transition-delay: 0.20s; }
.js [data-reveal-list].is-in > *:nth-child(4) { transition-delay: 0.28s; }
.js [data-reveal-list].is-in > *:nth-child(5) { transition-delay: 0.36s; }
.js [data-reveal-list].is-in > *:nth-child(6) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-list] > * { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ Rings */
.rings { width: 100%; height: 100%; overflow: visible; }
.rings ellipse, .rings circle, .rings path { transition: opacity 0.6s var(--ease); }

@keyframes ring-rotate { to { transform: rotate(360deg); } }
.rings--spin { animation: ring-rotate 140s linear infinite; transform-origin: 56% 44%; }
@media (prefers-reduced-motion: reduce) { .rings--spin { animation: none; } }

/* ------------------------------------------------------------------ Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease-io), background 0.4s var(--ease-io);
}
.site-header.scrolled { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--paper) 90%, transparent); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand-logo {
  height: clamp(38px, 4.6vw, 50px); width: auto; display: block;
  transition: opacity 0.3s var(--ease-io);
}
.brand:hover .brand-logo, .brand:focus-visible .brand-logo { opacity: 0.72; }
.footer-brand .brand-logo--footer { height: 58px; width: auto; align-self: flex-start; }

.primary-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.primary-nav a {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-2);
  position: relative; padding-block: 0.4rem;
  transition: color 0.3s var(--ease-io);
}
/* Underline draws in from the left and retracts to the right */
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--ochre); transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.primary-nav a.is-active { color: var(--ink); }

.nav-locale {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-left: clamp(0.6rem, 2vw, 1.6rem); border-left: 1px solid var(--rule);
}

/* Language switch — a small drafting stamp */
.primary-nav .nav-lang {
  border: 1px solid var(--rule);
  padding: 0.5em 0.85em;
  color: var(--ink-2);
  transition: border-color 0.3s var(--ease-io), color 0.3s var(--ease-io), background 0.3s var(--ease-io);
}
.primary-nav .nav-lang::after { display: none; }
.primary-nav .nav-lang:hover, .primary-nav .nav-lang:focus-visible {
  border-color: var(--ink); color: var(--paper-warm); background: var(--ink);
}

/* Mobile nav toggle */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after {
  content: ""; position: absolute; left: 50%; width: 22px; height: 1.5px;
  background: var(--ink); transform: translateX(-50%);
  transition: transform 0.3s var(--ease), opacity 0.2s, background-color 0.2s var(--ease-io);
}
.nav-toggle .bar { top: 50%; margin-top: -0.75px; }
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before { transform: translateX(-50%) translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after { transform: translateX(-50%) translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 1.05em 1.65em; border: 1px solid var(--ink);
  transition: background 0.4s var(--ease-io), color 0.4s var(--ease-io), border-color 0.4s var(--ease-io), transform 0.15s var(--ease-io);
}
.btn:active { transform: translateY(1px); }
.btn-arrow { transition: transform 0.35s var(--ease); }
.btn-primary { background: var(--ink); color: var(--paper-warm); }
.btn-primary:hover { background: var(--ochre-deep); border-color: var(--ochre-deep); }
.btn-primary:hover .btn-arrow { transform: translateX(5px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper-warm); }
.btn-ghost:hover .btn-arrow { transform: translateX(5px); }

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(640px, 100vh, 920px);
  min-height: clamp(640px, 100svh, 920px);
  display: flex; align-items: center; justify-content: center;
  padding-top: clamp(6rem, 12vw, 10rem); padding-bottom: clamp(6rem, 12vw, 10rem);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.42;
  filter: saturate(0.92) contrast(1.02); z-index: 0;
}
/* Paper scrim over the hero footage — the documentary footage is darker than
   the old hero clip, so the ink headline needs the video faded toward paper
   (same treatment as the service bands), strongest where the text sits. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(244, 238, 227, 0.88) 0%, rgba(244, 238, 227, 0.55) 44%, rgba(244, 238, 227, 0.12) 100%);
}
/* Hero content sits inside the same 1280px container as every other
   section, so the left edge of the headline lines up with the page grid. */
.hero-centered {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 var(--pad);
}
.hero-content {
  text-align: left; max-width: 760px; width: 100%;
}
.hero-eyebrow { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.hero-title {
  font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5.6rem);
  line-height: 1.05; letter-spacing: -0.022em;
  margin-bottom: 1.8rem; font-weight: 360;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.65; color: var(--ink-2);
  margin-bottom: 2.6rem; max-width: 54ch;
}
.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  justify-content: flex-start; align-items: center;
}

/* Scroll cue — a drafting rule that draws itself downward.
   Pinned to the container's left edge, not the viewport's. */
.hero-scroll {
  position: absolute; bottom: 0; z-index: 2;
  left: max(var(--pad), calc(50vw - var(--maxw) / 2 + var(--pad)));
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
.hero-scroll .word {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-soft);
  writing-mode: vertical-rl;
}
.hero-scroll .line {
  width: 1px; height: 62px; background: var(--rule);
  position: relative; overflow: hidden;
}
.hero-scroll .line::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--ochre); transform: translateY(-100%);
  animation: scroll-cue 3.2s var(--ease) infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(-100%); }
  45% { transform: translateY(0); }
  75%, 100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll .line::after { animation: none; } }
@media (max-width: 680px) { .hero-scroll { display: none; } }

/* Small phones: trim the hero's vertical padding so the headline, intro
   and both CTAs fit the first viewport; strengthen the scrim for contrast. */
@media (max-width: 680px) {
  .hero {
    min-height: auto;
    padding-top: 4.5rem; padding-bottom: 4rem;
  }
  .hero-sub { margin-bottom: 2rem; }
}

/* --------------------------------------------------------- Philosophy */
.philosophy-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
}
.philosophy-body p:not(.lead) { margin-top: 1.4rem; color: var(--ink-2); }
/* Closing note sits in the grid's second column, under the lead */
.philosophy-note { grid-column: 2; color: var(--ink-2); }
@media (max-width: 980px) { .philosophy-note { grid-column: auto; } }
.pull-quote {
  font-family: var(--display); font-style: italic; font-weight: 340;
  font-size: clamp(2.6rem, 1.6rem + 4.5vw, 5.5rem); line-height: 1.02;
  letter-spacing: -0.02em; color: var(--ink);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  text-indent: -0.42em; /* hang the opening quotation mark */
}
.pull-quote .by {
  display: block; font-family: var(--mono); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 1.4rem; text-indent: 0;
}

/* ---------------------------------------------------------- Spec table
   Drafting-style credentials list: mono label left, value right,
   ruled rows — same language as the contact details block. */
.meta-list { max-width: 30rem; }
.meta-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; padding-block: 0.7rem;
  border-top: 1px solid var(--rule);
}
.meta-list li:last-child { border-bottom: 1px solid var(--rule); }
.meta-list li span {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); flex: none;
}
.meta-list li strong { font-weight: 600; font-size: 0.98rem; text-align: right; }

/* -------------------------------------------------------------- Page head */
.page-head { padding-top: clamp(3.5rem, 8vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-title {
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem); line-height: 1.0;
  letter-spacing: -0.025em; max-width: 18ch; margin-top: 1.3rem;
}
.page-title em { color: var(--ochre); font-style: italic; }
.page-intro { margin-top: 1.8rem; max-width: 52ch; }

/* ---------------------------------------------------------------- Services */
/* Full-width service bands — faded footage with the text laid over it */
.service-band {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(400px, 56vh, 620px);
  background: var(--paper); border-top: 1px solid var(--rule);
}
.service-band:last-child { border-bottom: 1px solid var(--rule); }
.service-band > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.5;
  filter: saturate(0.9) contrast(1.02); z-index: 0;
  transition: opacity 0.7s var(--ease);
}
/* paper veil: left near-opaque (video barely visible — text sits here),
   right almost clear (video most visible). Two stacked gradients that
   cross-fade by opacity — background-image itself cannot animate. */
.service-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(244, 238, 227, 0.93) 26%, rgba(244, 238, 227, 0.45) 66%, rgba(244, 238, 227, 0.06) 100%);
  opacity: 1; transition: opacity 0.7s var(--ease);
}
.service-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 238, 227, 0.9) 0%, rgba(244, 238, 227, 0.6) 36%, rgba(244, 238, 227, 0.14) 70%, transparent 100%);
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.service-band .container { position: relative; z-index: 2; }
.service-text { max-width: 42ch; }
.service-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); letter-spacing: -0.02em; }
.service-desc {
  color: var(--ink-2); max-width: 40ch;
  margin-top: 0; max-height: 0; opacity: 0; transform: translateY(8px);
  overflow: hidden; pointer-events: none;
  transition: opacity 0.5s var(--ease), max-height 0.65s var(--ease-io),
    transform 0.5s var(--ease), margin-top 0.5s var(--ease);
}
/* hover or keyboard focus — reveal the description and lift the video */
.service-band:hover > video,
.service-band:focus-within > video,
.service-band:focus-visible > video { opacity: 0.92; }
.service-band:hover::after,
.service-band:focus-within::after,
.service-band:focus-visible::after { opacity: 0; }
.service-band:hover::before,
.service-band:focus-within::before,
.service-band:focus-visible::before { opacity: 1; }
.service-band:hover .service-desc,
.service-band:focus-within .service-desc,
.service-band:focus-visible .service-desc {
  opacity: 1; max-height: 14rem; transform: none; margin-top: 1.1rem;
}
/* touch devices: no hover, so always show the description */
@media (hover: none) {
  .service-band > video { opacity: 0.72; }
  .service-desc { opacity: 1; max-height: none; transform: none; margin-top: 1.1rem; overflow: visible; }
}

/* --------------------------------------------------- Ambient footage
   Pure, chrome-less craft footage used as atmosphere — no captions,
   no labels. The work simply happens in the background. */

/* Fade each clip in once its first frame is decoded — no black flash */
video[data-ambient] { transition: opacity 0.7s var(--ease); }
.js video[data-ambient]:not(.is-loaded) { opacity: 0; }

/* Chrome-less footage tile (mosaic + services) */
.clip {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--paper-deep);
}
.clip video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(0.94) contrast(1.02);
  transition: transform 1.2s var(--ease);
}
.clip:hover video { transform: scale(1.045); }
.clip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(33, 27, 18, 0.07);
  background: linear-gradient(0deg, rgba(33, 27, 18, 0.05), transparent 45%);
}

/* Workshop mosaic — video + three before/after comparisons, one row */
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1.1rem); margin-top: clamp(2rem, 4vw, 3.2rem);
}
@media (max-width: 980px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------- Before / after slider
   Two aligned photographs; the drafting rule between them follows the
   pointer (or arrow keys — the invisible range input carries focus). */
.ba { cursor: ew-resize; }
.ba .ba-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ba .ba-img--top { clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0); }
.ba:hover img { transform: none; } /* no zoom — the wipe is the interaction */
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 1px;
  background: var(--ink); opacity: 0.75; z-index: 2; pointer-events: none;
  transform: translateX(-0.5px);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid var(--ink);
  display: grid; place-items: center;
}
.ba-knob::before {
  content: "\2194"; /* ↔ */
  font-family: var(--mono); font-size: 0.85rem; color: var(--ink); line-height: 1;
}
.ba-range {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0; opacity: 0;
  cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.ba:focus-within { outline: 2px solid var(--ochre); outline-offset: 3px; }

/* ------------------------------------------------------------------- About */
.about-grid {
  display: block;
}
.about-intro .meta-list { margin-top: clamp(2rem, 4vw, 3rem); }
.about-portrait { margin: 0; }

/* Fixed atmospheric background video for the About page — most visible at the
   top, faded out toward the bottom; sits behind the (transparent) content and
   is released/hidden at the closing CTA via JS. */
.about-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; transition: opacity 0.6s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 26%, rgba(0, 0, 0, 0.4) 62%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 26%, rgba(0, 0, 0, 0.4) 62%, transparent 88%);
}
.about-bg video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.02); }
.about-bg.is-hidden { opacity: 0; }

/* Homepage fixed background video — same clip as About, shown only across the
   Philosophy + About range (toggled by JS), released before Services. */
.home-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.7s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 26%, rgba(0, 0, 0, 0.4) 62%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 26%, rgba(0, 0, 0, 0.4) 62%, transparent 88%);
}
.home-bg video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.02); }
.home-bg.is-on { opacity: 0.5; }

/* Still images inside .clip frames (e.g. Selected Work) */
.clip img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.clip:hover img { transform: scale(1.045); }

/* The about body continues the page-head above it — no dividing rule,
   and a modest gap instead of a full section break. */
.about-body-section { border-top: none; padding-top: clamp(1rem, 2.5vw, 2rem); }
.about-body-section .lead { margin-bottom: 1.6rem; }
.about-body-section p:not(.lead) { margin-top: 1.35rem; color: var(--ink-2); }

.approach { margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--rule); padding-top: clamp(2rem, 4vw, 3rem); }
.approach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; }
.approach-item { border-top: 2px solid var(--ink); padding-top: 1rem; }
.approach-item .n { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--ochre-deep); text-transform: uppercase; }
.approach-item h3 { font-size: 1.25rem; margin-top: 0.6rem; }
.approach-item p { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.5rem; }

/* ----------------------------------------------------------------- Contact */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.contact-h { font-size: 1.5rem; margin-bottom: 1.8rem; }
.contact-details dl > div { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.contact-details dl > div:last-of-type { border-bottom: 1px solid var(--rule); }
.contact-details dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.contact-details dd { font-size: 1.1rem; margin-top: 0.45rem; }
.contact-details dd a { border-bottom: 1px solid var(--rule); transition: border-color 0.3s, color 0.3s; }
.contact-details dd a:hover { color: var(--ochre-deep); border-color: var(--ochre-deep); }
.contact-rings { width: clamp(150px, 18vw, 230px); aspect-ratio: 1; margin-top: 3rem; opacity: 0.9; }

.contact-form { display: flex; flex-direction: column; gap: 1.6rem; }
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  transition: color 0.3s var(--ease-io);
}
.field:focus-within label { color: var(--ink); }
.field input, .field textarea {
  background: color-mix(in srgb, var(--paper-warm) 60%, transparent);
  border: 1px solid var(--rule); padding: 0.85rem 1rem;
  font-size: 1rem; color: var(--ink); border-radius: 0;
  transition: border-color 0.3s var(--ease-io), background 0.3s, box-shadow 0.3s var(--ease-io);
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); background: var(--paper-warm);
  box-shadow: 0 0 0 1px var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 0.55; }
.contact-form .btn { align-self: flex-start; margin-top: 0.3rem; }
.form-note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.form-success {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--ink); padding: 1rem 1.2rem; border: 1px solid var(--ochre);
  background: color-mix(in srgb, var(--ochre-soft) 18%, transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.form-success.is-in { opacity: 1; transform: none; }
.field-error { border-color: var(--clay) !important; }
.field-msg {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--clay);
}
.field-msg[hidden] { display: none; }

/* ---------------------------------------------------------------- CTA strip */
.cta-strip { position: relative; overflow: hidden; border-top: 1px solid var(--rule); background: var(--paper-deep); }
.cta-inner { padding-block: clamp(4rem, 8vw, 7rem); position: relative; z-index: 1; text-align: center; }
.cta-inner h2 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); max-width: 20ch; margin: 1.2rem auto 0; }
.cta-sub { max-width: 52ch; margin: 1.4rem auto 2.4rem; color: var(--ink-2); }
.cta-inner .btn { margin-inline: auto; }
.cta-rings {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, 120%); aspect-ratio: 1; opacity: 0.16; z-index: 0; pointer-events: none;
}

/* ------------------------------------------------------------------ Footer */
.site-footer { border-top: 1px solid var(--ink); background: var(--paper-edge); position: relative; z-index: 1; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.footer-brand { display: flex; flex-direction: column; gap: 1.2rem; max-width: 34ch; }
.footer-tag { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.site-footer h4 { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.1rem; }
.footer-col a, .footer-col p, .footer-col li { font-size: 0.92rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { transition: color 0.3s; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--ochre-deep); }
.footer-col .stack { display: flex; flex-direction: column; gap: 0.7rem; }

.footer-base {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.6rem; border-top: 1px solid var(--rule);
  padding-right: 9rem; /* keep clear of the fixed motion toggle */
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}

/* ------------------------------------------------ Grouped Collaborations
   Four groups — a balanced 2×2 on desktop rather than a 3+1 orphan row. */
.collab-groups {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 620px) { .collab-groups { grid-template-columns: 1fr; } }

.collab-group-title {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); font-weight: 430;
  color: var(--ink);
  padding-top: 1.1rem; margin-bottom: 1.4rem;
  border-top: 1px solid var(--rule);
}

/* Client names — a quiet ruled register, no imagery */
.collab-names li {
  font-size: 0.98rem; color: var(--ink-2);
  padding-block: 0.6rem;
  border-top: 1px solid var(--rule-soft);
  transition: color 0.3s var(--ease-io), padding-left 0.3s var(--ease);
}
.collab-names li:hover { color: var(--ink); padding-left: 0.4rem; }

/* ------------------------------------------------------------- Responsive */
/* iOS/Android: fixed background-attachment is unsupported — fall back */
@media (max-width: 1024px) {
  body { background-attachment: scroll; }
}

@media (max-width: 980px) {
  .philosophy-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; align-items: start; }
  .about-portrait { margin-top: 1.5rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .header-inner { min-height: 62px; }
  html { scroll-padding-top: 5rem; }
  .service-band { min-height: clamp(360px, 72vh, 520px); }
  .service-band::after { background: linear-gradient(90deg, rgba(244, 238, 227, 0.74) 0%, rgba(244, 238, 227, 0.55) 72%, rgba(244, 238, 227, 0.38) 100%); }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper-warm); border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--pad) 1.5rem;
    clip-path: inset(0 0 100% 0); opacity: 0;
    visibility: hidden; /* keep closed-menu links out of the tab order */
    transition: clip-path 0.45s var(--ease), opacity 0.3s, visibility 0s 0.45s;
  }
  .primary-nav.open { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition-delay: 0s; }
  .primary-nav a { width: 100%; padding: 0.9rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.95rem; }
  .primary-nav a::after { display: none; }
  .primary-nav .nav-lang {
    width: auto; margin-top: 1.1rem; font-size: 0.8rem;
    border: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    padding: 0.5em 0.9em;
  }
  .nav-locale { border-left: none; padding-left: 0; padding-top: 1rem; }
}

@media (max-width: 620px) {
  .gallery { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------- Motion toggle
   WCAG 2.2.2 — a discreet drafting-style control that halts all ambient
   footage. Fixed above the bottom-left crop mark. */
.motion-toggle {
  position: fixed; bottom: 16px; right: 44px; z-index: 30;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 0.5em 0.8em;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  transition: color 0.3s var(--ease-io), border-color 0.3s var(--ease-io);
}
.motion-toggle:hover, .motion-toggle:focus-visible { color: var(--ink); border-color: var(--ink-soft); }
.motion-toggle .state::before { content: "on"; }
.motion-toggle[aria-pressed="true"] .state::before { content: "off"; }
:lang(da) .motion-toggle .state::before { content: "til"; }
:lang(da) .motion-toggle[aria-pressed="true"] .state::before { content: "fra"; }
@media (max-width: 680px) { .motion-toggle { right: 16px; bottom: 12px; } }

/* ============ HERO FILM CARD ============
   Full-opacity duplicate of the hero documentary, framed beside the headline,
   with a sound on/off toggle. The faded backdrop copy stays behind the text.
   Below 1100px the card stacks under the hero content. */
.hero-centered { flex-direction: column; align-items: flex-start; }
.hero-film { margin-top: clamp(2.2rem, 5vw, 3.2rem); max-width: 540px; width: 100%; }
.hero-film-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(33, 27, 18, 0.3);
  box-shadow: 0 22px 55px -20px rgba(33, 27, 18, 0.45);
}
.hero-film-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-sound {
  position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink); background: rgba(244, 238, 227, 0.92);
  border: 1px solid rgba(33, 27, 18, 0.45);
  padding: 0.55rem 0.95rem; cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.hero-sound:hover, .hero-sound:focus-visible { background: var(--ink); color: var(--paper); }
.hero-sound .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ochre); flex: none; }
.hero-sound.is-on .sdot { animation: sound-pulse 1.4s ease-in-out infinite; }
@keyframes sound-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.55; } }
.hero-film-cap {
  margin-top: 0.75rem; display: flex; align-items: baseline; gap: 0.8rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hero-film-cap .fig { color: var(--ochre); font-weight: 500; }
@media (min-width: 1100px) {
  .hero-centered {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 34vw, 470px);
    gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
  }
  .hero-content { max-width: 640px; }
  .hero-film { margin-top: 0; max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hero-sound.is-on .sdot { animation: none; } }