/* ============================================================================
   FLMWERK — Editorial Light (Vantage-inspired, cream + navy)
   6-section onepager · DM Serif Display · massive whitespace
   ============================================================================ */

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root {
  /* Surfaces — warm cream paper */
  --bg:           #F2EFE7;
  --bg-2:         #EAE5DA;
  --bg-3:         #FBFAF5;
  --paper:        #F8F5EC;

  /* Ink */
  --ink:          #14130F;
  --ink-2:        #4A463F;
  --ink-muted:    #82786C;
  --ink-quiet:    #B3AB9D;

  /* Accent — deep editorial forest green (saturated enough to read as green) */
  --accent:       #1B4D33;
  --accent-deep:  #0F2E1F;
  --accent-soft:  #6FA88B;

  /* Lines */
  --rule:         #DCD5C7;
  --rule-soft:    #E8E2D5;
  --rule-strong:  #14130F;

  /* Dark contrast (used in showreel frame + CTA) */
  --dark:         #1A1814;

  /* Type */
  --font-display: "DM Serif Display", "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, system-ui, sans-serif;

  /* Layout */
  --container:    1280px;
  --gutter:       clamp(24px, 5vw, 64px);
  --section-y:    clamp(120px, 18vw, 240px);

  /* Motion */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
}

/* ─────────────────────────── RESET ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
/* scroll-behavior is auto (instant) so programmatic scroll restores (e.g. closing a
   modal) never animate. Smooth scrolling for in-page nav links is handled in JS. */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--paper); }

/* ─────────────────────────── i18n (DE default, EN toggle) ─────────────────────────── */
html[lang="de"] .t-en { display: none; }
html[lang="en"] .t-de { display: none; }
/* The two language spans should flow as the original text would */
.t-de, .t-en { display: inline; }
/* When wrapping block-level markup (e.g. <p> tags inside), allow block flow */
.t-de:has(p), .t-en:has(p),
.t-de:has(br), .t-en:has(br) { display: contents; }

.skip-link {
  position: absolute; left: -9999px; top: 12px;
  background: var(--ink); color: var(--paper); padding: 8px 14px;
  z-index: 9999; font-weight: 500;
}
.skip-link:focus { left: 12px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

/* Editorial micro-label */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-muted);
  font-weight: 500;
}
.eyebrow--center { display: block; text-align: center; margin-bottom: clamp(60px, 8vw, 120px); }

/* ─────────────────────────── NAV ─────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(242,239,231,.78);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--rule);
}
/* When the mobile menu is open, drop the nav's backdrop-filter/background. Otherwise the
   backdrop-filter turns .nav into the containing block for the fixed .m-menu, so inset:0 only
   covers the nav bar and the page shows through below. Transparent nav → menu fills the screen. */
.nav--menu-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.nav__brand {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: auto;
}
.nav__links {
  display: flex; gap: 36px;
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-2);
  font-weight: 500;
}
.nav__links a {
  padding: 4px 0;
  position: relative;
  transition: color .25s var(--ease);
}
.nav__links a:hover { color: var(--accent); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__lang {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 4px 0;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.nav__lang [data-lang] {
  transition: color .25s var(--ease), font-weight .25s var(--ease);
}
.nav__lang [data-lang].is-active {
  color: var(--ink);
  font-weight: 600;
}
.nav__lang-sep { color: var(--ink-quiet); }
.nav__lang:hover { color: var(--ink); }
.nav__lang--mobile { font-size: 12px; }

.nav__toggle {
  display: none; width: 38px; height: 38px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav__toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); transition: transform .35s var(--ease);
}
.nav--menu-open .nav__toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav--menu-open .nav__toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.m-menu {
  position: fixed; inset: 0;
  background: var(--bg);              /* fully opaque cream — keine Transparenz */
  padding: 120px var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.m-menu[hidden] { display: none; }
.nav--menu-open .m-menu { opacity: 1; pointer-events: auto; }
.m-menu nav {
  display: flex; flex-direction: column; gap: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 10vw, 64px);
  font-weight: 400;
  color: var(--ink);
}
.m-menu nav a {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.m-menu__foot {
  display: flex; justify-content: space-between;
  font-size: 13px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .18em;
}

/* ─────────────────────────── BUTTONS ─────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 0; /* sharp corners — editorial */
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 20px 36px; font-size: 13px; }
.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover { background: var(--accent); transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* ─────────────────────────── 1. HERO (text only, light, compact) ─────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 100px 0 60px;
  background: var(--bg);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 96px);
  line-height: 1.1;            /* +breathing room so descenders (g, p, y) stay visible */
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: clamp(28px, 3.5vw, 44px);
  max-width: 18ch;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;       /* room for the descender of "Videografie" g */
}
.hero__title .line > span {
  display: inline-block;
  padding-bottom: .04em;       /* safety margin against optical clip */
  transform: translateY(110%);
  animation: lineRise 1.1s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) > span { animation-delay: .2s; }
.hero__title .line:nth-child(2) > span { animation-delay: .4s; }

.hero__subtag {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: var(--ink-muted);
  margin-bottom: 36px;
  font-weight: 500;
  opacity: 0;
  animation: fadeIn 1.4s var(--ease-out) .75s forwards;
}

.hero__cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 1.2s var(--ease-out) .95s forwards;
}

.hero__scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: var(--ink-muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0;
  animation: fadeIn 1.4s var(--ease-out) 1.3s forwards;
}
.hero__scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--ink-muted), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; top: -24px; left: 0;
  width: 100%; height: 24px;
  background: linear-gradient(to bottom, transparent, var(--ink));
  animation: scrollDown 2.4s ease-in-out infinite;
}
@keyframes scrollDown { 0% { top: -24px; } 100% { top: 100%; } }
@keyframes lineRise   { to { transform: translateY(0); } }
@keyframes fadeUp     { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn     { to { opacity: 1; } }
@keyframes pulse      { 50% { opacity: .35; } }

/* ─────────────────────────── 2. SHOWREEL (Pin-Scroll) ─────────────────────────── */
.reel {
  padding: 0;
  background: var(--bg);
  position: relative;
  margin-bottom: clamp(24px, 3vw, 48px);   /* a little breathing room before the services */
}
.reel__pin {
  position: relative;       /* plain wrapper — no pin, the reel scrolls in normal flow */
}
.reel__sticky {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  box-sizing: border-box;
  gap: clamp(24px, 3vw, 40px);
  /* JS sets --m-zoom (0 = entering from below → 1 = centred); children inherit. */
}
.reel__frame {
  /* Native cinemascope cut on EVERY device. Rests at 80% scale on its first-frame
     still, grows to 100% as it scrolls toward the viewport centre (--m-zoom).
     Square corners; width capped so it always fits the viewport height on desktop. */
  width: min(100%, 1400px, calc((100vh - 290px) * 1920 / 804));
  max-width: 1400px;
  aspect-ratio: 1920 / 804;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--rule);

  transform: scale(calc(0.8 + 0.2 * var(--m-zoom, 1)));
  box-shadow:
    0 calc(14px + 26px * var(--m-zoom, 1))
    calc(30px + 50px * var(--m-zoom, 1))
    -20px
    rgba(20, 19, 15, calc(.18 + .22 * var(--m-zoom, 1)));
  transform-origin: center;
  will-change: transform, box-shadow;
}
.reel__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* iOS: force own GPU layer so video doesn't render black inside transformed parent */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.reel__caption {
  position: absolute; bottom: 22px; left: 26px; right: 26px;
  display: flex; justify-content: space-between;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: rgba(248,245,236,.75);
  z-index: 2; pointer-events: none;
}
.reel__caption i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF5050;
  margin-right: 8px;
  vertical-align: 1px;
  animation: pulse 1.8s ease-in-out infinite;
}

.reel__text {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3;
  color: var(--ink);
  /* Caption rises in with the zoom (--m-zoom). Defaults to fully visible for no-JS. */
  opacity: calc(.05 + .95 * var(--m-zoom, 1));
  transform: translateY(calc((1 - var(--m-zoom, 1)) * 16px));
  will-change: opacity, transform;
}
.reel__text em {
  font-style: italic;
  color: var(--accent);
}
.reel__text-line { margin: 0; }

/* ─── Trust strip — client logo marquee inside the showreel pin ─── */
.reel__trust {
  width: 100%;
  max-width: 1400px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: calc(.15 + .85 * var(--p, 0));      /* fades in with scroll progress */
  transition: opacity .2s linear;
}
.reel__trust-label {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .32em;
  color: var(--ink-muted);
  font-weight: 500;
}

/* Static logo strip — single row, all 6 logos visible, evenly distributed */
.reel__trust-viewport {
  width: 100%;
}

.reel__trust-track {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.reel__trust-track li {
  position: relative;          /* anchors the absolute overlay span */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
}

.reel__trust-track img {
  display: block;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: invert(1);          /* white-on-transparent → black on cream */
  opacity: .6;
  transition: opacity .3s var(--ease);
}

/* JS appends this <span>; its mask-image is set inline to the same logo file.
   Absolute positioning fills the li exactly, so the mask renders the silhouette
   over the img position with the accent color showing through. */
.reel__trust-track li > span {
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.reel__trust-track li:hover img   { opacity: 0; }
.reel__trust-track li:hover > span { opacity: 1; }

@media (max-width: 720px) {
  .reel__trust-track { gap: 12px; }
  .reel__trust-track li { height: 32px; }
}

/* ─────────────────────────── 3. SERVICES ─────────────────────────── */
.srv {
  padding: var(--section-y) 0;
  background: var(--bg);
  scroll-margin-top: 48px;   /* nav link #services lands with the head fully below the fixed nav */
}
/* Shared section head for Services + Ablauf — same editorial pattern as .work__head */
.srv__head,
.process__head {
  margin-bottom: clamp(40px, 6vw, 88px);
  max-width: 800px;
}
.srv__head .eyebrow,
.process__head .eyebrow { display: block; margin-bottom: 24px; }
.srv__title,
.process__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
}
.srv__title em,
.process__title em {
  font-style: italic;
  color: var(--accent);
}
.srv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Same rhythm as the work grid: a real gap between the two cards (no hairline) */
  gap: clamp(12px, 1.5vw, 20px);
  /* Inset from the screen edges like every other section — aligned with .container content */
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--container) - 2 * var(--gutter));
  margin: 0 auto;
}
.srv-card {
  position: relative;
  min-height: 80vh;
  display: flex; align-items: flex-start;
  padding: clamp(80px, 9vw, 130px) clamp(48px, 6vw, 88px) clamp(48px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background: var(--paper);
  transition: background .5s var(--ease);
}
.srv-card__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, var(--paper) 0%, var(--bg-2) 100%);
  z-index: -2;
  transition: opacity .8s var(--ease);
}
.srv-card__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
/* On hover: video fades in, scrim darkens for legibility */
.srv-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,15,.0) 0%, rgba(20,19,15,.0) 100%);
  z-index: -1;
  transition: background .5s var(--ease);
  pointer-events: none;
}
.srv-card:hover .srv-card__video { opacity: .9; }
.srv-card:hover::after {
  background: linear-gradient(180deg, rgba(20,19,15,.25) 0%, rgba(20,19,15,.78) 100%);
}
.srv-card:hover {
  color: var(--paper);
}
.srv-card:hover .srv-card__label,
.srv-card:hover .srv-card__list,
.srv-card:hover .srv-card__copy {
  color: rgba(248,245,236,.8);
}
.srv-card:hover .srv-card__title,
.srv-card:hover .srv-card__title em {
  color: var(--paper);
}
.srv-card:hover .srv-card__link {
  color: var(--paper);
  border-top-color: rgba(248,245,236,.4);
}

.srv-card__inner {
  display: flex; flex-direction: column;
  gap: 28px;
  max-width: 50ch;            /* wider so big title lines like "und gestalten." don't re-wrap */
  transform: translateY(0);
  transition: transform .55s var(--ease-out), color .5s var(--ease);
}
.srv-card:hover .srv-card__inner { transform: translateY(-8px); }

/* Body copy + list keep their narrower editorial wrap independent of the new inner width */
.srv-card__copy { max-width: 34ch; }
.srv-card__list { max-width: 34ch; }

.srv-card__label {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--ink-muted);
  font-weight: 500;
  transition: color .5s var(--ease);
}
.srv-card--exclusive .srv-card__label { color: var(--accent); }

.srv-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
  transition: color .5s var(--ease);
}
.srv-card__title em {
  font-style: italic;
  color: var(--accent);
  transition: color .5s var(--ease);
}

.srv-card__list {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
  color: var(--ink-2);
  transition: color .5s var(--ease);
}

.srv-card__copy {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 32ch;
  transition: color .5s var(--ease);
}

.srv-card__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink);
  font-weight: 500;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  align-self: flex-start;
  transition: gap .35s var(--ease), color .25s var(--ease), border-color .5s var(--ease);
}
.srv-card:hover .srv-card__link { gap: 18px; }

/* Service cards reveal their video ONLY on hover — see the .srv-card:hover rules above
   (video fades in, scrim darkens, type turns light). No video by default. */

/* ─────────────────────────── 4. SELECTED WORK ─────────────────────────── */
.work {
  padding: var(--section-y) 0;
  background: var(--bg);
}
.work__head {
  margin-bottom: clamp(60px, 8vw, 120px);
  max-width: 800px;
}
.work__head .eyebrow { display: block; margin-bottom: 24px; }
.work__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
}
.work__title em {
  font-style: italic;
  color: var(--accent);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
  align-items: start;   /* tiles keep their own aspect-ratio height — no stretching, no cropping */
}
.tile {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  isolation: isolate;
  display: flex; align-items: flex-end;
  padding: clamp(20px, 2vw, 28px);
  color: var(--paper);
}
/* Default tile = 1:1 square at 4 cols */
.tile           { grid-column: span 4; aspect-ratio: 1 / 1; }
/* Modifiers — each owns its aspect-ratio so the grid stays predictable */
.tile--feature  { grid-column: span 8; aspect-ratio: 16 / 9; }   /* big feature */
.tile--banner   { grid-column: span 12; aspect-ratio: 16 / 9; }  /* full-width 16:9 banner */
.tile--square   { grid-column: span 4; aspect-ratio: 1 / 1; }    /* explicit 1:1 */
.tile--portrait { grid-column: span 4; aspect-ratio: 4 / 5; }    /* portrait */
.tile--wide     { grid-column: span 8; aspect-ratio: 2 / 1; }    /* matches 1:1 tile height when next to it */
/* Real-project orientations — tile matches the video's native aspect so nothing is cropped */
.tile--16       { grid-column: span 6; aspect-ratio: 16 / 9; }   /* landscape project, 2 per row */
.tile--vert     { grid-column: span 4; aspect-ratio: 9 / 16; }   /* vertical project (9:16), 3 per row */

.tile__media {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c1, #2A2A2A) 0%, var(--c2, #1A1A1A) 100%);
  transition: transform 1.2s var(--ease-out), filter .8s var(--ease), opacity .6s var(--ease);
  z-index: -2;
  /* idle = subtly out-of-focus, like a film still through frosted glass */
  filter: blur(2px) saturate(.85);
}
.tile__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 50%);
}

/* Hover-triggered video — fades in & sharpens; JS plays/pauses */
.tile__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0;
  filter: blur(14px) saturate(.7);
  transform: scale(1.04);
  transition:
    opacity .7s var(--ease),
    filter .9s var(--ease),
    transform 1.4s var(--ease-out);
  pointer-events: none;
}
/* Default cover-fit for all tile videos — fills the box, crops what doesn't fit. */

.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,15,0) 28%, rgba(20,19,15,.5) 64%, rgba(20,19,15,.92) 100%);
  z-index: -1;
  transition: opacity .4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__media {
    transform: scale(1.04);
    filter: blur(0) saturate(1);
    opacity: .3;                  /* gradient fades back so video reads clean */
  }
  .tile:hover .tile__video {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
  }
}

/* Touch / no-hover devices: a "focus" model that mirrors the desktop hover.
   JS adds .is-focused to the tile centred in the viewport. Non-focused tiles keep
   their dimmed, blurred gradient (grayed out, like the desktop idle state); only the
   in-focus tile reveals & plays its video. */
@media (hover: none) {
  .tile.is-focused .tile__media {
    opacity: .25;
    filter: blur(0) saturate(1);
  }
  .tile.is-focused .tile__video {
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* Service cards (01/02): the centred card reveals its video and inverts to the cream
     editorial-on-dark look (mirrors the desktop :hover); all others stay beige/idle. */
  .srv-card.is-focused .srv-card__video { opacity: .9; }
  .srv-card.is-focused::after {
    background: linear-gradient(180deg, rgba(20,19,15,.25) 0%, rgba(20,19,15,.78) 100%);
  }
  .srv-card.is-focused { color: var(--paper); }
  .srv-card.is-focused .srv-card__label,
  .srv-card.is-focused .srv-card__list,
  .srv-card.is-focused .srv-card__copy { color: rgba(248,245,236,.8); }
  .srv-card.is-focused .srv-card__title,
  .srv-card.is-focused .srv-card__title em { color: var(--paper); }
  .srv-card.is-focused .srv-card__link {
    color: var(--paper);
    border-top-color: rgba(248,245,236,.4);
  }
  .srv-card.is-focused .srv-card__inner { transform: translateY(-8px); }
}

.tile__meta { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tile__cat {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: rgba(248,245,236,.75);
  font-weight: 500;
}
.tile__meta h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--paper);
}
.tile__meta h3 em {
  font-style: italic;
  color: var(--accent-soft);
}
.tile--soon { opacity: .85; }
.tile--soon .tile__media { filter: grayscale(.4); }

/* ─── "Mehr Infos" button on tile — sits inside .tile__meta, reveals on hover,
       pushing the title up because meta is bottom-anchored via tile's flex-end ─── */
.tile__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  color: var(--paper);
  background: rgba(248, 245, 236, .14);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-style: solid;
  border-color: rgba(248, 245, 236, .3);
  border-radius: 0;
  cursor: pointer;
  z-index: 3;

  /* Collapsed (default): zero height + opacity + no margin/padding/border */
  opacity: 0;
  max-height: 0;
  padding: 0 16px;
  margin-top: 0;
  border-width: 0;
  overflow: hidden;

  transition:
    opacity .3s var(--ease),
    max-height .4s var(--ease),
    padding-top .4s var(--ease),
    padding-bottom .4s var(--ease),
    margin-top .4s var(--ease),
    border-width .25s var(--ease),
    background .25s var(--ease),
    border-color .25s var(--ease),
    color .25s var(--ease);
}
.tile__more svg { transition: transform .35s var(--ease); }

/* Hover: expand button, title shifts up since .tile__meta is bottom-anchored */
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__more {
    opacity: 1;
    max-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-width: 1px;
    margin-top: 14px;
  }
}
.tile__more:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.tile__more:hover svg { transform: translateX(3px); }

/* Touch / no-hover devices: always visible (subtly) */
@media (hover: none) {
  .tile__more {
    opacity: .95;
    max-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-width: 1px;
    margin-top: 12px;
  }
}

/* ─────────────────────────── 5. PROCESS ─────────────────────────── */
.process {
  padding: var(--section-y) 0;
  background: var(--bg-2);
}
.steps {
  max-width: 880px;
  margin: 0 auto;
}
.step {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(72px, 10vw, 140px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.04em;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.step p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 48ch;
}

/* ─────────────────────────── 6. STATEMENT + CTA (light, text-only) ─────────────────────────── */
.end {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: var(--section-y) 0;
  background: var(--bg);
  overflow: hidden;
}
/* Subtle radial halo so the cream section has visual depth */
.end::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 40%, var(--paper) 0%, transparent 70%);
  z-index: 0; pointer-events: none;
}
.end__content {
  position: relative; z-index: 2;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 32px;
}
.end__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1.18;            /* descender-safe (g, p) */
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 26ch;
  padding-bottom: .1em;
}
.end__title em {
  font-style: italic;
  color: var(--accent);
}
.end__cta-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--ink-2);
  margin-top: 16px;
}
.end__social {
  display: flex; gap: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-muted);
  margin-top: 16px;
  font-weight: 500;
}
.end__social a { transition: color .25s var(--ease); }
.end__social a:hover { color: var(--accent); }
.end__social span { color: var(--ink-quiet); }

/* ─────────────────────────── FOOTER ─────────────────────────── */
.footer {
  padding: 60px 0 32px;
  background: var(--bg);
  border-top: 1px solid var(--rule);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.footer__brand p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-muted);
  margin-top: 12px;
  max-width: 28ch;
}
.footer__logo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--ink);
}
.footer__links {
  display: flex; flex-direction: column; gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
}
.footer__links a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; flex-direction: column; gap: 16px;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-quiet);
  text-align: right;
}

/* ─────────────────────────── SCROLL REVEAL ─────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */
@media (max-width: 1024px) {
  /* Stacked cards keep real breathing room between them */
  .srv__grid { grid-template-columns: 1fr; gap: 20px; }
  .srv-card { min-height: 70vh; }
  /* Tablet: default tiles half-width, banner/feature/wide full-width */
  .tile, .tile--square { grid-column: span 6; }
  .tile--feature,
  .tile--banner,
  .tile--wide      { grid-column: span 12; }
  .tile--portrait  { grid-column: span 6; }
  .tile--16        { grid-column: span 6; }
  .tile--vert      { grid-column: span 6; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__bottom { grid-column: span 2; flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (max-width: 720px) {
  /* Tighter vertical rhythm on phones — much less empty space between sections */
  :root { --section-y: clamp(48px, 11vw, 80px); }
  .work__head { margin-bottom: 32px; }
  .eyebrow--center { margin-bottom: 32px; }

  .nav__links, .nav__meta { display: none; }
  .nav__toggle { display: inline-flex; }

  .hero__top { flex-wrap: wrap; gap: 8px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }

  /* Mobile: drop the pin-scroll — show the showreel full-bleed & full-size right away */
  .reel__pin { height: auto; }
  /* Phones: same zoom-in reel as desktop (native cinemascope, square corners) —
     just tighter spacing and a smaller caption. */
  .reel__sticky { gap: 22px; padding: 32px var(--gutter) 40px; }
  .reel__text { font-size: 19px; }

  .srv-card { min-height: 62vh; padding: 40px 24px; }
  .srv-card__title { font-size: 36px; }

  /* Phone: every tile takes full width — aspect-ratios stay per class */
  .tile,
  .tile--feature,
  .tile--banner,
  .tile--square,
  .tile--portrait,
  .tile--16,
  .tile--vert,
  .tile--wide { grid-column: span 12; }

  /* Smaller overlay text on phones — title/category/button eat too much space otherwise */
  .tile { padding: 16px; }
  .tile__meta { gap: 4px; }
  .tile__cat { font-size: 9px; letter-spacing: .2em; }
  .tile__meta h3 { font-size: 16px; }
  .tile__more {
    font-size: 10px; letter-spacing: .14em; gap: 6px;
    max-height: 32px; padding-top: 7px; padding-bottom: 7px; margin-top: 8px;
  }
  .tile__more svg { width: 10px; height: 10px; }

  .step { grid-template-columns: 1fr; gap: 12px; padding: 40px 0; }
  .step__num { font-size: 64px; }

  .end__title { font-size: 44px; }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { grid-column: span 1; flex-direction: column; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }
  .reel__pin { height: auto; }
  .reel__sticky { position: relative; height: auto; }
  .reel__frame { transform: none; }
  .reel__text-line--2 { opacity: 1; transform: none; }
  .reel__trust { opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ─────────────────────────── PROJECT MODAL ─────────────────────────── */
.modal {
  border: none;
  padding: 0;
  margin: auto;
  max-width: 720px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  background: var(--bg-3);
  color: var(--ink);
  box-shadow:
    0 30px 80px -20px rgba(20, 19, 15, .35),
    0 0 0 1px var(--rule);
  overflow: auto;
  /* Animate when opened */
  opacity: 0;
  transform: translateY(20px) scale(.985);
  transition: opacity .3s var(--ease), transform .35s var(--ease-out);
}
.modal[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.modal::backdrop {
  background: rgba(20, 19, 15, .55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.modal__close {
  position: absolute;
  top: clamp(16px, 1.6vw, 20px);
  right: clamp(16px, 1.6vw, 20px);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  z-index: 2;
}
.modal__close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: rotate(90deg);
}

.modal__content {
  padding: clamp(36px, 5vw, 64px);
  position: relative;
}
.modal__cat {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 18ch;
}
/* Service modal: title is followed by a lead paragraph → tighter gap + intro text */
.modal__title--service { margin-bottom: 16px; }
.modal__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: 26px;
}

.modal__section {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  margin-bottom: 28px;
}
.modal__section--cta {
  border-top: 1px solid var(--rule-strong, var(--ink));
  padding-top: 32px;
  margin-bottom: 0;
}
.modal__label {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.modal__list {
  display: flex; flex-direction: column;
  gap: 13px;
}
.modal__list li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 28px;
  position: relative;
}
.modal__list li::before {
  content: "";
  position: absolute;
  top: 11px; left: 0;
  width: 16px; height: 1px;
  background: var(--accent);
}
.modal__cost {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--accent);
  letter-spacing: -.01em;
  line-height: 1.1;
}

.modal__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  transition: background .3s var(--ease), color .3s var(--ease), transform .35s var(--ease);
  border-radius: 0;
}
.modal__link svg { transition: transform .35s var(--ease); }
.modal__link:hover {
  background: var(--accent);
  color: var(--paper);
  transform: translateY(-2px);
}
.modal__link:hover svg { transform: translate(3px, -3px); }
/* CTA states: reliably hide the button when there is no link, show a subtle note instead. */
.modal__link[hidden] { display: none; }
.modal__nolink {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--ink-quiet);
}

/* Note: body scroll is locked via JS using position:fixed (preserves scroll
   position on close). No CSS overflow:hidden trick — that one resets scrollTop. */

@media (max-width: 720px) {
  .modal { max-height: calc(100dvh - 24px); }
  .modal__close { width: 36px; height: 36px; }
}

/* ─────────────────────────── CONTACT MODAL ─────────────────────────── */
.cmodal {
  border: none;
  padding: 0;
  margin: auto;
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(20, 19, 15, .35), 0 0 0 1px var(--rule);
  overflow: auto;
  opacity: 0;
  transform: translateY(20px) scale(.985);
  transition: opacity .3s var(--ease), transform .35s var(--ease-out);
}
.cmodal[open] { opacity: 1; transform: translateY(0) scale(1); }
.cmodal::backdrop {
  background: rgba(20, 19, 15, .55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.cmodal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  z-index: 2;
}
.cmodal__close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: rotate(90deg);
}

.cmodal__view { padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px); }
.cmodal__header { margin-bottom: 32px; }
.cmodal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 14px 0 14px;
  max-width: 14ch;
}
.cmodal__title em { font-style: italic; color: var(--accent); }
.cmodal__lead {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 42ch;
}

.cmodal__form { display: flex; flex-direction: column; gap: 18px; }
.cmodal__field { display: flex; flex-direction: column; gap: 6px; }
.cmodal__field label {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-muted);
  font-weight: 500;
}
.cmodal__req { color: var(--accent); margin-left: 2px; }

.cmodal__field input,
.cmodal__field select,
.cmodal__field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 10px 0;
  width: 100%;
  outline: none;
  transition: border-color .25s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.cmodal__field textarea {
  border: 1px solid var(--rule);
  padding: 12px 14px;
  resize: vertical;
  min-height: 110px;
}
.cmodal__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382786C' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 18px;
  padding-right: 28px;
  cursor: pointer;
}
.cmodal__field input::placeholder,
.cmodal__field textarea::placeholder { color: var(--ink-quiet); }
.cmodal__field input:focus,
.cmodal__field select:focus,
.cmodal__field textarea:focus { border-color: var(--accent); }
.cmodal__field input:invalid:not(:placeholder-shown),
.cmodal__field textarea:invalid:not(:placeholder-shown) { border-color: #B85948; }

.cmodal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 480px) { .cmodal__row { grid-template-columns: 1fr; } }

.cmodal__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.cmodal__check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 4px;
}
.cmodal__check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  margin-top: 2px;
  position: relative;
  transition: background .2s var(--ease);
}
.cmodal__check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.cmodal__check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px; left: 5px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(45deg);
}
.cmodal__check label {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.cmodal__error {
  font-family: var(--font-body);
  font-size: 13px;
  color: #B85948;
  padding: 10px 14px;
  border: 1px solid #B85948;
  background: rgba(184, 89, 72, .06);
}

.cmodal__submit { align-self: flex-start; margin-top: 8px; }
.cmodal__note {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 16px;
  max-width: 48ch;
}

.cmodal__success {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 0;
}
.cmodal__success .cmodal__title { margin: 8px 0 0; }

@media (max-width: 560px) {
  .cmodal {
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }
  .cmodal__view { padding: 80px 24px 32px; }
  .cmodal__close { top: 24px; right: 20px; }
}

/* ─────────────────────────── LEGAL PAGES (Impressum / Datenschutz) ─────────────────────────── */
.legal { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.legal__bar { border-bottom: 1px solid var(--rule); background: var(--bg-3); }
.legal__bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; padding-bottom: 20px;
}
.legal__logo {
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: .12em; font-size: 17px; color: var(--ink);
}
.legal__back {
  font-family: var(--font-body); font-size: 11px;
  text-transform: uppercase; letter-spacing: .2em; color: var(--ink-muted);
  transition: color .25s var(--ease);
}
.legal__back:hover { color: var(--accent); }
/* Horizontal padding must stay var(--gutter) — a bare 0 here would override .container's
   gutter (same specificity, later in file) and pin the text to the screen edge on phones. */
.legal__main { flex: 1; padding: clamp(54px, 9vw, 104px) var(--gutter) clamp(64px, 9vw, 120px); }
.legal__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 6vw, 64px); line-height: 1.05; letter-spacing: -.025em;
  color: var(--ink); margin-bottom: clamp(32px, 5vw, 52px); max-width: 22ch;
}
.legal__content { max-width: 680px; }
.legal__content h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 27px); line-height: 1.2; color: var(--ink);
  margin: 36px 0 12px;
}
.legal__content h2:first-child { margin-top: 0; }
.legal__content p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.75;
  color: var(--ink-2); margin-bottom: 16px; max-width: 64ch;
}
.legal__content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal__content a:hover { color: var(--accent-deep); }
.legal .footer { margin-top: auto; }