@charset "UTF-8";

/* ==========================================================================
   Advokatfirmaet Müller
   Design system + components. Light architectural direction:
   warm stone ground, ink type, burgundy accent drawn from the
   Advokatsamfundet mark. Dark bands are used sparingly as punctuation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ground — warm off-white pulled from the Højesteret stonework */
  --stone-50:  #FAF8F5;
  --stone-100: #F4F1EB;
  --stone-150: #EDE9E1;
  --stone-200: #E2DDD2;
  --stone-300: #CFC8BA;

  /* Ink */
  --ink-900: #14161A;
  --ink-800: #1E2126;
  --ink-700: #2B2F36;
  --ink-600: #4A4F57;
  --ink-500: #656A72;   /* 5.1:1 on stone-50 — safe for small caps labels */
  --ink-400: #8B9098;   /* decorative only, never body copy */

  /* Accent */
  --wine-700: #5A1428;
  --wine-600: #6E1A32;
  --wine-500: #8B2340;

  --white: #FFFFFF;

  /* Semantic */
  --bg:            var(--stone-50);
  --bg-alt:        var(--stone-100);
  --bg-inverse:    var(--ink-900);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-600);
  --text-subtle:   var(--ink-500);
  --text-inverse:  var(--stone-50);
  --rule:          var(--stone-200);
  --rule-strong:   var(--stone-300);
  --accent:        var(--wine-600);

  /* Type */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step-hero: clamp(2.9rem, 1.6rem + 5.4vw, 6.25rem);
  --step-h1:   clamp(2.3rem, 1.5rem + 3.2vw, 4rem);
  --step-h2:   clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  --step-h3:   clamp(1.3rem, 1.1rem + 0.75vw, 1.6rem);
  --step-h4:   clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  --step-body: 1.0625rem;
  --step-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.3rem);
  --step-small: 0.9375rem;
  --step-label: 0.75rem;

  /* Space — 4px base */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section:  clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* Layout — full-width: sections span the viewport and only the gutter holds
     content off the edge. Long-form copy is still held to --measure so line
     length stays readable no matter how wide the screen gets. */
  --measure: 68ch;
  --container: 100%;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.9rem + 3.4vw, 5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  --header-h: 5.25rem;
}

@media (max-width: 48rem) {
  :root { --header-h: 4.25rem; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* Without this, mobile WebKit/Chrome paint their own grey highlight box
     over whatever's tapped — visible as a stray grey box on dark elements
     like the strip items, and it masks the site's own :active feedback
     below instead of the two combining cleanly. */
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); line-height: 1.2; }
h4 { font-size: var(--step-h4); line-height: 1.3; }

p { text-wrap: pretty; }

a { color: inherit; }

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

::selection { background: var(--wine-600); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--container-narrow); }

/* Edge-to-edge: escapes the gutter entirely so media can meet the viewport. */
.bleed { width: 100%; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--alt { background: var(--bg-alt); }

.section--ink {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}

.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--ink-900);
  color: var(--white);
  padding: 0.7rem 1.4rem;
  font-size: var(--step-small);
  border-radius: 0 0 3px 3px;
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-subtle);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: var(--space-6);
}

.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--rule-strong);
  flex: none;
}

.section--ink .eyebrow { color: var(--stone-300); }
.section--ink .eyebrow::before { background: rgba(255, 255, 255, 0.32); }

.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--step-lead);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 54ch;
}

.section--ink .lead { color: rgba(250, 248, 245, 0.82); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose > * + h2 { margin-top: 2.4em; }
.prose > * + h3 { margin-top: 2em; }
.prose > h2 + *, .prose > h3 + * { margin-top: 0.85em; }
.prose p { color: var(--text-muted); }
.prose strong { color: var(--text); font-weight: 600; }

.prose h2 { font-size: var(--step-h2); }
.prose h3 { font-size: var(--step-h3); }
.prose h4 {
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.prose ul, .prose ol { padding-left: 1.1rem; color: var(--text-muted); }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--rule-strong); }
.prose ul { list-style: none; padding-left: 0; }

.prose ul > li {
  position: relative;
  padding-left: 1.6rem;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

.prose a {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out), background-size var(--dur) var(--ease-out);
}

.prose a:hover { color: var(--accent); background-size: 100% 2px; }

.prose--inverse p, .prose--inverse li { color: rgba(250, 248, 245, 0.76); }
.prose--inverse strong { color: var(--white); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: var(--white);
  --btn-bd: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.85rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 1px;
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

/* wipe fill on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--white); border-color: var(--accent); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--rule-strong);
}

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.42);
}

.btn--solid-light {
  --btn-bg: var(--white);
  --btn-fg: var(--ink-900);
  --btn-bd: var(--white);
}

.btn .btn__icon { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* Quiet text link with animated rule */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding-bottom: 0.35rem;
  position: relative;
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover { color: var(--accent); }
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--white);
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

.header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--rule);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

/* While the header floats over the hero it carries its own scrim. The nav sits
   on the right, where the hero's diagonal gradient has already run out and the
   stonework is pale — without this, white nav links land at ~3.3:1. Tied to the
   header rather than the hero so it holds whatever image sits behind it. */
.header:not(.is-solid):not(.header--static)::before {
  content: "";
  position: absolute;
  inset: 0 0 -3rem 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(16, 18, 21, 0.72) 0%,
    rgba(16, 18, 21, 0.50) 55%,
    transparent 100%);
  transition: opacity var(--dur) var(--ease-out);
}

/* Solid state: scrolled, or any page without a hero behind it.
   backdrop-filter cannot sit directly on .header: like `filter` and
   `transform`, it makes the element a new containing block for its own
   position:fixed descendants — and .nav (the mobile menu overlay) is exactly
   that. With the filter on .header itself, the open mobile menu collapsed to
   .header's own ~5rem height instead of covering the screen, on every page
   that uses .header--static (every interior page) and on the homepage after
   scrolling. Moving the blur to a ::before layer keeps the visual effect
   without turning .header into a containing block. */
.header.is-solid,
.header--static {
  color: var(--text);
}

.header.is-solid::before,
.header--static::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 248, 245, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

.header.is-solid::after, .header--static::after { opacity: 1; }

.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.brand {
  position: relative;
  z-index: 1; /* .nav becomes position:fixed when open on mobile, which makes
    it a positioned stacking item that paints above non-positioned siblings
    like this one regardless of DOM order — without its own stacking
    position, the open menu's solid background would cover the logo. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18rem;
  text-decoration: none;
  line-height: 1;
  flex: none;
  min-height: 44px; /* tap target — the wordmark itself is only ~28px tall */
}

.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.32rem);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.brand__sub {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.62;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 0.3rem + 1.5vw, 2.1rem); }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.5vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { font-weight: 600; }

.nav__cta {
  min-height: 2.6rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.6875rem;
}

.header:not(.is-solid):not(.header--static) .nav__cta {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.45);
}

/* Mobile toggle */
.nav-toggle {
  position: relative;
  z-index: 1; /* same reason as .brand above — keeps the close control above
    the open .nav overlay's own stacking position. */
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.nav-toggle__bars { display: block; width: 22px; height: 12px; position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}

.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }

[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5.25px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0;
    display: block;
    padding: calc(var(--header-h) + var(--space-10)) var(--gutter) var(--space-12);
    background: var(--stone-50);
    color: var(--text);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li { border-bottom: 1px solid var(--rule); }

  .nav__link {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0;
    padding: 1.05rem 0;
    opacity: 0;
    transform: translateY(0.6rem);
  }

  .nav.is-open .nav__link {
    opacity: 1;
    transform: none;
    transition: opacity 420ms var(--ease-out) calc(var(--i, 0) * 45ms + 90ms),
                transform 420ms var(--ease-out) calc(var(--i, 0) * 45ms + 90ms);
  }

  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--accent); }

  .nav__cta {
    margin-top: var(--space-8);
    width: 100%;
    min-height: 3.25rem;
    --btn-bg: var(--ink-900) !important;
    --btn-fg: var(--white) !important;
    --btn-bd: var(--ink-900) !important;
  }

  body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh; /* fallback for browsers without dvh */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--space-10));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  isolation: isolate;
  background: var(--ink-800);
}

/* The clip lives here, not on .hero — .hero__strip's scroll-parallax now
   deliberately drifts past .hero's own box into the next section, and an
   overflow:hidden on .hero would cut that off. This wrapper is sized
   identically to .hero (inset:0), so the zoom-in image animation is clipped
   exactly as before; only the strip is now free to extend past it. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* picture has no intrinsic height of its own (it just shrinks to the img's
   rendered size), so without this the img's height:100% below has nothing
   definite to resolve against and falls back to its raw intrinsic aspect
   ratio instead of covering .hero__media — same bug as .page-banner. */
.hero__media picture {
  display: block;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.06);
  animation: heroSettle 1900ms var(--ease-out) 120ms forwards;
}

@keyframes heroSettle { to { transform: scale(1); } }

/* Left-weighted scrim: protects the headline, leaves the architecture bright.
   The first layer is a full-width band behind the header — the nav sits on the
   right, where the diagonal scrim has already faded out and the stonework and
   sky are pale, so white nav links need their own ground to sit on. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(16, 18, 21, 0.86) 0%,
      rgba(16, 18, 21, 0.70) 26%,
      rgba(16, 18, 21, 0.34) 52%,
      rgba(16, 18, 21, 0.06) 74%,
      transparent 88%),
    linear-gradient(to top, rgba(16, 18, 21, 0.55) 0%, transparent 30%);
}

.hero__inner { position: relative; width: 100%; }

/* No max-width here: the title and lead need very different widths (the
   serif headline is 2-3x the font-size of the body-font lead), so each sets
   its own cap below instead of sharing one "ch" value off the wrong font. */
.hero__content { color: var(--white); }

.hero .eyebrow { color: rgba(255, 255, 255, 0.72); }
.hero .eyebrow::before { background: rgba(255, 255, 255, 0.45); }

.hero__title {
  font-size: var(--step-hero);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--white);
}

.hero__title em {
  font-style: italic;
  font-weight: 300;
}

.hero__lead {
  margin-top: var(--space-6);
  font-size: var(--step-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  max-width: 44ch;
}

/* Positioned against .hero__strip (its own parent, first child), anchored
   above the strip's top edge via bottom:100% — not against .hero's own
   bottom edge. Previously it sat over the strip and could intercept clicks
   and hovers meant for the strip items underneath; this keeps it entirely
   above the panel, never overlapping it. */
.hero__scroll {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.hero__scroll span {
  display: block;
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll span::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--white);
  animation: scrollHint 2.4s var(--ease-in-out) infinite;
}

@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

@media (max-width: 48rem) {
  /* No bottom padding: the strip panel is the last thing in the section, and
     its own background should reach the section's bottom edge exactly —
     nothing sits in a padding gap after it. Background matches the strip
     panel's own ink-900 (not the site-wide ink-800 hero fallback) — on
     shorter phones the panel can start a little after the capped photo
     ends, and whatever colour fills that gap needs to be identical to the
     panel's own colour or the seam between them reads as a visible line. */
  .hero { padding-block: calc(var(--header-h) + 4.5rem) 0; background: var(--ink-900); }
  .hero__scroll { display: none; }

  /* The hero box itself still grows with content (unchanged) so the
     headline/lead/CTAs/strip keep their current position. The photo and its
     scrim are capped rather than stretched to match — otherwise they'd grow
     with the content, well past one screen tall — but capped a little over
     100svh instead of exactly at it, so the photo still reaches into the
     gap above the panel on most phones instead of stopping short. svh (not
     dvh) deliberately: dvh recalculates live as the mobile browser's
     address bar collapses/expands during scroll, which made the image
     visibly grow and shrink while scrolling — svh is fixed to the smallest
     viewport state, so the image stays put. */
  .hero__media, .hero__scrim { height: calc(100svh + 3rem); }

  .hero__scrim {
    background:
      linear-gradient(175deg, rgba(16,18,21,0.72) 0%, rgba(16,18,21,0.58) 45%, rgba(16,18,21,0.78) 100%);
  }
}

/* --------------------------------------------------------------------------
   8. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 6vw, 7rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
}

.page-head__title { max-width: 22ch; }

.page-head .lead { margin-top: var(--space-6); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  font-size: 0.8125rem;
  color: var(--text-subtle);
}

.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--rule-strong); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* Photo variant — the cover image sits behind the title band itself instead
   of below it as a separate strip, mirroring .hero's own media+scrim
   layering so it reads as the same visual language. The section's height is
   untouched (it's still whatever the padding above computes); only the
   surface changes, so text needs the hero's light-on-dark treatment to stay
   readable over the photo. */
.page-head--photo {
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-800);
  border-bottom: none;
}

.page-head__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-head__media picture {
  display: block;
  height: 100%;
}

.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.page-head__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(16, 18, 21, 0.86) 0%,
    rgba(16, 18, 21, 0.5) 55%,
    rgba(16, 18, 21, 0.24) 100%);
}

.page-head--photo .page-head__title,
.page-head--photo .breadcrumb [aria-current="page"] { color: var(--white); }
.page-head--photo .breadcrumb a { color: rgba(255, 255, 255, 0.75); }
.page-head--photo .breadcrumb a:hover { color: var(--white); }
.page-head--photo .breadcrumb li:not(:last-child)::after { color: rgba(255, 255, 255, 0.4); }
.page-head--photo .lead { color: rgba(255, 255, 255, 0.84); }

/* --------------------------------------------------------------------------
   9. Practice strip — lives inside the hero's own content flow (see
   .hero__inner in the markup), directly below the CTAs, rather than as a
   separate section pulled up over the hero's bottom edge. That way it moves
   as one unit with the headline/lead/CTAs under .hero's align-items.
   -------------------------------------------------------------------------- */

.hero__strip {
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  color: var(--text-inverse);
  transition: transform 120ms linear;
  will-change: transform;
}

.strip__panel {
  background: var(--ink-900);
  overflow: hidden;
}

.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.strip__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(2rem, 1.2rem + 2.2vw, 3.25rem) clamp(1.25rem, 0.6rem + 1.4vw, 2.25rem);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease-out);
}

.strip__item + .strip__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
  bottom: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.strip__item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.strip__item:hover, .strip__item:active { background: rgba(255, 255, 255, 0.04); }
.strip__item:hover::after, .strip__item:focus-visible::after, .strip__item:active::after { transform: scaleX(1); }

.strip__icon { color: var(--stone-300); }
.strip__icon svg { width: 26px; height: 26px; }

.strip__title {
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
}

.strip__text {
  font-size: var(--step-small);
  line-height: 1.6;
  color: rgba(250, 248, 245, 0.66);
}

@media (max-width: 62rem) {
  .strip__grid { grid-template-columns: repeat(2, 1fr); }
  .strip__item:nth-child(odd)::before { display: none; }
  .strip__item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.15); }
}

/* Compact list on phones: the strip now lives inside the hero (see 9. above),
   and the hero must still fit within a sane multiple of one screen height.
   At full size, 4 items of icon+title+description run to ~900px alone on a
   360px-wide phone — enough on its own to double the hero's height. Icon and
   title move to one row and the description drops, matching how this strip
   already behaves as a quick-links list rather than a place for detail (the
   full description lives on the Sagsområder page one tap away). */
@media (max-width: 34rem) {
  .strip__grid { grid-template-columns: 1fr; }
  .strip__item {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    /* Inline padding zeroed (not just omitted — the base rule's own clamp()
       would otherwise leak through) since .strip__panel supplies it below
       via --gutter, so item content lines up with the rest of the page's
       content instead of stacking two insets. */
    padding: 1rem 0;
  }
  .strip__text { display: none; }
  .strip__icon svg { width: 22px; height: 22px; }
  .strip__item::before { display: none; }
  .strip__item + .strip__item { border-top: 1px solid rgba(255, 255, 255, 0.15); }
}

/* Below 48rem the strip stays the same dark ink-900 card as desktop and
   drops only two things: the parallax drift (built for a spacious desktop
   hero, it reads as noise at this size) and its own inline padding. The
   panel's background bleeds edge to edge, but padding on the panel itself
   pulls the actual icons/titles back in by exactly --gutter, so the content
   lines up with the hero headline and CTAs above rather than the screen
   edge. Its own margin-top (set on .hero__strip, section 9 above) is left
   alone here — that's the real gap between the CTAs and the panel; only
   .hero's own trailing padding-bottom is removed (see the mobile hero
   block), so the panel still sits flush against the section's own bottom
   edge with no dead space after it. padding-block adds real breathing room
   above the first item and below the last, on top of (not instead of) each
   item's own padding — that's what keeps items apart from each other, this
   is what keeps the panel itself from feeling flush-cramped at its own
   edges. Placed after every other strip rule above (including the 34rem
   compact block) so it wins on source order without needing higher
   specificity. */
@media (max-width: 48rem) {
  .hero__strip {
    margin-inline: calc(-1 * var(--gutter));
    transform: none !important;
  }

  .strip__panel { padding-inline: var(--gutter); padding-block: 0.75rem; }
}

/* --------------------------------------------------------------------------
   9b. Intro — a single left-aligned column, capped short of full width so
   text doesn't stretch edge-to-edge on wide screens.
   -------------------------------------------------------------------------- */

/* Wider than before on purpose: longer lines mean fewer wraps, so the
   section reads shorter top-to-bottom without shrinking the type. */
.intro { max-width: 62rem; }
.intro .prose { margin-top: var(--space-8); max-width: 58rem; }

/* --------------------------------------------------------------------------
   10. Split (text + image)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 1rem + 6vw, 7rem);
  align-items: center;
}

.split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
.split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
.split--top { align-items: start; }
.split__media--first { order: -1; }

/* Small portrait, not a full column — the image column is capped to match
   the image's own max-width (18rem) instead of the usual 50/50 split, so the
   text column expands into the freed space rather than leaving a gap next to
   an undersized photo. The cap applies at every breakpoint, including the
   stacked mobile layout, where it's centered rather than left-aligned.
   The portrait also sticks while scrolling past the long detail list beside
   it — same pattern as .area__aside on Sagsområder — since .split--top
   already gives this grid align-items:start, which sticky positioning needs. */
.split--portrait { grid-template-columns: minmax(0, 18rem) 1fr; }

.split--portrait .split__figure {
  max-width: 18rem;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

@media (max-width: 56rem) {
  .split--portrait .split__figure { position: static; justify-self: center; }
}

/* Same pattern again on Priser og vilkår: the right-hand info column follows
   down the page past the long prose column beside it, rather than scrolling
   away early — matches .area__aside on Sagsområder and the portrait above. */
.split__aside {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

@media (max-width: 56rem) {
  .split__aside { position: static; }
}

.split__figure { position: relative; }

.split__figure img { width: 100%; }

.split__figure--framed img {
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.05), 0 24px 60px -28px rgba(20, 22, 26, 0.35);
}

@media (max-width: 56rem) {
  .split, .split--wide-text, .split--wide-media { grid-template-columns: 1fr; gap: var(--space-12); }
  .split__media--first { order: 0; }
}

/* --------------------------------------------------------------------------
   11. Facts list (verified credentials)
   -------------------------------------------------------------------------- */

.facts { display: grid; gap: 0; margin-top: var(--space-8); }

.fact {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule);
}

.fact:last-child { border-bottom: 1px solid var(--rule); }

.fact__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch;
}

.fact__label {
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--text-muted);
}

.fact__label strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.3rem;
}

/* --------------------------------------------------------------------------
   11b. About band — full-bleed portrait, copy, and a ruled stats column
   -------------------------------------------------------------------------- */

.about {
  background: var(--bg-alt);
  border-block: 1px solid var(--rule);
}

/* Image gets the largest share (was 0.92fr — under half of text+stats
   combined; now the widest column) and the whole band is capped to an
   explicit, shorter height instead of stretching to fit the copy. */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: stretch;
  min-height: clamp(19rem, 13rem + 16vw, 28rem);
}

/* Portrait runs to the viewport edge and fills the band's full height. */
.about__media { position: relative; margin: 0; min-height: 100%; }

.about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.about__body {
  padding: clamp(1.75rem, 1rem + 2.6vw, 3.25rem) clamp(1.5rem, 0.9rem + 2vw, 2.75rem);
  align-self: center;
}

.about__body .prose { margin-top: var(--space-5, 1.25rem); max-width: 40ch; }

/* Inset divider (not full-height border-left) — same pattern as the item
   dividers in .hero__strip: inset top/bottom by the block's own padding,
   so it reads as a short rule between two blocks, not an edge-to-edge line. */
.about__stats {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.1rem);
  padding: clamp(1.75rem, 1rem + 2.6vw, 3.25rem) clamp(1.25rem, 0.7rem + 2vw, 2.5rem)
           clamp(1.75rem, 1rem + 2.6vw, 3.25rem) clamp(1.25rem, 0.7rem + 2vw, 2.25rem);
}

.about__stats::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  bottom: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  width: 1px;
  background: var(--rule-strong);
}

.stat { display: grid; gap: 0.4rem; }

/* Icon sits beside the number, both on one baseline — not stacked. */
.stat__top { display: flex; align-items: center; gap: 0.55rem; }

.stat__icon { color: var(--ink-500); flex: none; }
.stat__icon svg { width: 21px; height: 21px; }

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.35rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
  line-height: 1.45;
}

@media (max-width: 68rem) {
  .about__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: auto; }
  .about__stats {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid var(--rule-strong);
    padding-inline: var(--gutter);
  }
  /* The inset side-divider only makes sense in the 3-column desktop layout;
     this breakpoint uses a full-width border-top instead. */
  .about__stats::before { display: none; }
}

@media (max-width: 46rem) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { min-height: 62vw; max-height: 22rem; }
  .about__stats {
    grid-auto-flow: row;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   12. Cards / practice areas
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background var(--dur) var(--ease-out);
}

.card:hover { background: var(--bg-alt); }

.card__icon { color: var(--accent); }
.card__icon svg { width: 28px; height: 28px; }

.card__title { font-size: var(--step-h3); }

.card__text {
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--text-muted);
}

.card__more {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.card__more svg { transition: transform var(--dur) var(--ease-out); }
.card:hover .card__more svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   13. Practice area detail blocks
   -------------------------------------------------------------------------- */

.area {
  scroll-margin-top: calc(var(--header-h) + 2rem);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  border-top: 1px solid var(--rule);
}

.area:first-of-type { border-top: 0; padding-top: 0; }

.area__grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.area__aside { position: sticky; top: calc(var(--header-h) + 2rem); }

.area__num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-3);
}

.area__title { font-size: var(--step-h2); }

@media (max-width: 56rem) {
  .area__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .area__aside { position: static; }
}

/* --------------------------------------------------------------------------
   14. Article list
   -------------------------------------------------------------------------- */

.articles { border-top: 1px solid var(--rule); }

.article {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-6);
  padding-block: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background var(--dur) var(--ease-out);
}

/* The hover ground bleeds into the gutter, but never past it — at 375px the
   gutter is ~19px, so a flat 24px bleed pushed the page into horizontal scroll. */
.article::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * min(var(--space-6), var(--gutter)));
  background: var(--bg-alt);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--dur) var(--ease-out);
}

.article:hover::before { opacity: 1; }

.article__meta {
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.article__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease-out);
}

.article:hover .article__title { color: var(--accent); }

.article__source {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: 0.45rem;
}

.article__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.article__action svg { transition: transform var(--dur) var(--ease-out); }
.article:hover .article__action svg { transform: translateY(2px); }

@media (max-width: 48rem) {
  .article { grid-template-columns: 1fr; gap: var(--space-3); }
  .article__action { justify-self: start; }
}

/* --------------------------------------------------------------------------
   15. Logo strip
   -------------------------------------------------------------------------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* bottom-align the three marks, not centered */
  justify-content: center;
  gap: clamp(2.5rem, 1rem + 7vw, 6.5rem);
}

.logos__item {
  display: flex;
  align-items: flex-end;
  min-height: 44px; /* tap target floor; the wide marks render shorter than this */
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}

.logos__item:hover, .logos__item:focus-visible { filter: grayscale(0); opacity: 1; }

/* Advokatsamfundet and Danske Advokater share a height, so the two wordmarks
   read as the same size despite their different aspect ratios. Danske
   INKASSOadvokater (the middle, featured mark) gets its own taller height —
   deliberately bigger, not just incidentally so. */
.logos__item img { height: clamp(2.1rem, 1.5rem + 2vw, 3rem); width: auto; }
.logos__item--feature img { height: clamp(3.1rem, 2.3rem + 3vw, 4.6rem); }

/* --------------------------------------------------------------------------
   16. Quote
   -------------------------------------------------------------------------- */

.quote { max-width: 34ch; }

.quote__mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-4);
}

.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.012em;
}

.quote__cite {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */

.detail-list { display: grid; gap: 0; }

.detail {
  padding-block: var(--space-5, 1.25rem);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule);
}

.detail:last-child { border-bottom: 1px solid var(--rule); }

.detail__label {
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.5rem;
}

.detail__value { font-size: var(--step-lead); line-height: 1.45; }
.detail__value a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: border-color var(--dur-fast), color var(--dur-fast); }
.detail__value a:hover { color: var(--accent); border-color: var(--accent); }

.form__note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-subtle);
  padding-left: var(--space-4);
  border-left: 2px solid var(--rule-strong);
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink-900);
  color: rgba(250, 248, 245, 0.7);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--space-10);
  font-size: var(--step-small);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 56rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .footer__grid { grid-template-columns: 1fr; gap: var(--space-10); } }

.footer__brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.055em; text-transform: uppercase; color: var(--white); }
.footer__brand-sub { font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(250,248,245,0.5); margin-top: 0.3rem; }
.footer__blurb { margin-top: var(--space-6); max-width: 34ch; line-height: 1.7; }

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-5, 1.25rem);
  margin-bottom: var(--space-6);
}

.footer__list { list-style: none; margin: 0; padding: 0; display: grid; }
.footer__list a {
  display: inline-block;
  padding-block: 0.62rem; /* 19px text + padding clears the 44px tap target */
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__list a:hover { color: var(--white); }

.footer address { font-style: normal; line-height: 1.8; }
.footer address a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); }
.footer address a:hover { color: var(--white); border-color: var(--white); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-8);
  font-size: 0.8125rem;
  color: rgba(250, 248, 245, 0.5);
}

.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-block: -0.72rem; }
.footer__bottom a { display: inline-block; padding-block: 0.72rem; text-decoration: none; }
.footer__bottom a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   20. Reveal animation
   -------------------------------------------------------------------------- */

/* Content is visible by default. Only once the inline head script confirms JS
   is running do we hide it to animate in — so a blocked script, a dead font CDN
   or a missing IntersectionObserver can never leave the page blank. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
  will-change: opacity, transform;
}

.js [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }

.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="right"] { transform: translateX(-24px); }
.js [data-reveal="scale"] { transform: scale(0.97); }

/* The hero uses the same class-driven reveal as everything else (JS adds
   .is-revealed on load) rather than an animation fill, so the headline can
   never be left invisible if animations are suppressed.
   Scoped to .hero__content specifically (not .hero) — .hero also contains
   .hero__strip now, and this rule's specificity ties with the .is-revealed
   reset above, so a broader `.hero [data-reveal]` selector would win by
   source order alone and permanently offset every strip item by 26px,
   clipped by .strip__panel's overflow:hidden.
   The :not(.is-revealed) guard on the transform (but not the duration) is
   the same tie broken a different way: without it, this still ties with the
   reset for .hero__content's own elements too, and — cascade order being
   what it is — wins, so the headline/lead/buttons would never actually
   settle at their resting position after revealing, just less visibly since
   nothing clips them. */
.js .hero__content [data-reveal] { transition-duration: 1000ms; }
.js .hero__content [data-reveal]:not(.is-revealed) { transform: translateY(26px); }

/* --------------------------------------------------------------------------
   21. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__media img { transform: none !important; animation: none !important; }
  .hero__scroll span::after { animation: none !important; }
  [data-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .nav, .hero__scroll, .hero__strip, .footer__bottom, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .page-head { padding-top: 0; }
}