/* ==========================================================================
   AD Financy — Design System
   Brand: deep burgundy (#8B1114, from the logo mark) + warm ink neutrals.
   Type:  Outfit (display) / Inter (UI + body).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand:            #8B1114;
  --brand-deep:       #710F10;
  --brand-bright:     #A8181C;
  --brand-tint:       #FBF1F1;
  --brand-ring:       rgba(139, 17, 20, 0.28);
  /* Brand accent for dark surfaces — the burgundy is too dark to read on
     --dark / the hero photo, so on-dark accents use this lifted rosé. */
  --brand-on-dark:    #E8B4B6;

  /* Neutrals (warm) */
  --ink:              #14100F;
  --ink-soft:         #2A2321;
  --body:            #4B4340;
  --muted:            #6E6561;
  --line:             #E7E1DB;
  --line-strong:      #D6CEC7;
  --surface:          #FFFFFF;
  --surface-raise:    #FDFCFA;
  --bg:               #FBFAF8;
  --bg-warm:          #F5F2ED;

  /* Dark section */
  --dark:             #14100F;
  --dark-line:        rgba(255, 255, 255, 0.11);
  --dark-text:        #F2EEE9;
  --dark-muted:       #A79E98;

  /* Feedback */
  --ok:               #146C43;
  --ok-tint:          #E8F4ED;
  --err:              #B3261E;
  --err-tint:         #FDECEA;

  /* Type */
  --font-display: "Outfit", "Avenir Next", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-xs:    0.8125rem;
  --fs-sm:    0.9375rem;
  --fs-base:  1.0625rem;
  --fs-md:    clamp(1.0625rem, 0.2vw + 1rem, 1.1875rem);
  --fs-lg:    clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem);
  --fs-xl:    clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --fs-h3:    clamp(1.25rem, 0.7vw + 1.1rem, 1.5rem);
  --fs-h2:    clamp(1.875rem, 2.4vw + 1.15rem, 3rem);
  --fs-h1:    clamp(2.25rem, 4.2vw + 1.1rem, 4.25rem);
  --fs-eyebrow: 0.75rem;

  /* Spacing (density 4/10 — standard, marketing-page rhythm) */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --section-y: clamp(3.5rem, 7vw, 7rem);

  /* Layout */
  --wrap:      1200px;
  --wrap-wide: 1360px;
  --wrap-prose: 74ch;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  /* Matches .header__inner's min-height — the fixed header floats over the
     hero, so every hero/page-hero reserves this much top clearance. */
  --header-h:  4.75rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(20, 16, 15, 0.05), 0 1px 3px rgba(20, 16, 15, 0.04);
  --sh-2: 0 2px 4px rgba(20, 16, 15, 0.04), 0 6px 16px rgba(20, 16, 15, 0.06);
  --sh-3: 0 8px 20px rgba(20, 16, 15, 0.07), 0 18px 44px rgba(20, 16, 15, 0.09);
  --sh-brand: 0 6px 18px rgba(139, 17, 20, 0.22);

  /* Motion (6/10 — standard) */
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 420ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-scale */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 100;
  --z-drawer: 200;
  --z-toast: 300;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--brand-bright); }

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

/* Visible, consistent focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible,
.section--dark :focus-visible { outline-color: var(--brand-on-dark); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: calc(var(--z-header) + 10);
  background: var(--ink); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--prose { max-width: var(--wrap-prose); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--warm { background: var(--bg-warm); }
.section--surface { background: var(--surface); }

.section--dark {
  background: var(--dark);
  color: var(--dark-muted);
  position: relative;
  overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--dark-text); }
.section--dark a { color: var(--brand-on-dark); }

/* Soft brand glow behind dark sections */
.section--dark::before {
  content: "";
  position: absolute; inset: auto -10% -55% -10%;
  height: 70%;
  background: radial-gradient(ellipse at 50% 100%, rgba(139, 17, 20, 0.26), transparent 68%);
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: glowBreathe 17s var(--ease) infinite alternate;
}
.section--dark > * { position: relative; z-index: 1; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
/* Both .grid--4 instances hold exactly four items, so explicit counts beat
   auto-fit: its 3-across band (~850–1110px) stranded a lone fourth card on its
   own row. 1 / 2 / 4 always divides evenly. The 4-up step waits for 1200px so
   the cards don't get squeezed under ~260px. */
.grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1.display { font-size: var(--fs-h1); }
h2.display { font-size: var(--fs-h2); line-height: 1.08; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--space-4);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 1px;
  background: currentColor; opacity: 0.55; flex: none;
}
.section--dark .eyebrow { color: var(--brand-on-dark); }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--body);
  max-width: 60ch;
}
.section--dark .lede { color: var(--dark-muted); }

.section-head { max-width: 62ch; margin-bottom: var(--space-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head .lede { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--sh-brand); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { --btn-bg: var(--brand-bright); --btn-bd: var(--brand-bright); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink);
  box-shadow: var(--sh-2);
}

.btn--on-dark {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.4);
}
.btn--on-dark:hover {
  --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}

.btn--lg { min-height: 3.4rem; padding: 0.95rem 2rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn .ic { width: 1.15em; height: 1.15em; flex: none; }

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

/* Text link with animated arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand); text-decoration: none;
}
.link-arrow .ic {
  width: 1.05em; height: 1.05em;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover .ic { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
/* Header floats OVER the hero photo rather than sitting above it in normal
   flow — that's why this is `position: fixed`, not `sticky`. A sticky
   header still occupies its own space in the document and pushes the hero
   down beneath it; a transparent sticky header then just reveals the plain
   page background at the top (not the photo), which is illegible white
   text on a near-white background. `.hero` / `.page-hero` reserve extra
   top padding below to clear this fixed bar.
   A faint dark gradient (not literal 0-alpha transparency) keeps the white
   logo/nav readable over lighter parts of whatever photo is behind it, the
   same way the reference design keeps a subtle dark band across the top
   independent of the image. */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  /* Floating state is fully transparent: both .hero__scrim and .page-hero
     already darken the area behind the nav, so a scrim here only added a
     visible band whose bottom edge read as a border. */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(20, 16, 15, 0.05);
  background: rgba(251, 250, 248, 0.94);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}

/* The logo accent stays full brand red in every context, light or dark — it
   deliberately opts out of --brand-on-dark. */
.brand { --logo-accent: var(--brand); }

/* Floating (transparent) state: white logo/text over the dark hero photo */
.header:not(.is-stuck) .brand { color: #fff; }
.header:not(.is-stuck) .nav__link { color: rgba(255, 255, 255, 0.92); }
.header:not(.is-stuck) .nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.header:not(.is-stuck) .nav__link[aria-current="page"] { color: #fff; }

.header:not(.is-stuck) .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

/* Stuck (solid) state: explicit so it doesn't rely on inheriting the
   default — the floating rules above win on specificity otherwise. */
.header.is-stuck .brand { color: var(--ink); }
.header.is-stuck .nav__link { color: var(--ink-soft); }
.header.is-stuck .nav__link:hover { color: var(--brand); background: var(--brand-tint); }
.header.is-stuck .nav__link[aria-current="page"] { color: var(--brand); }
.header.is-stuck .nav-toggle { color: var(--ink); border-color: var(--line-strong); }

.header__inner {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 4.75rem;
  transition: min-height var(--dur) var(--ease);
}
.header.is-stuck .header__inner { min-height: 4.1rem; }

.brand {
  display: inline-flex; align-items: center; flex: none; text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.brand svg, .brand img { height: 2.1rem; width: auto; transition: height var(--dur) var(--ease); }
.header.is-stuck .brand svg, .header.is-stuck .brand img { height: 1.85rem; }

.nav { margin-left: auto; }
.nav__list {
  display: flex; align-items: center; gap: 0.25rem;
  list-style: none;
}
.nav__link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--brand); background: var(--brand-tint); }
.nav__link[aria-current="page"] { color: var(--brand); font-weight: 600; }

/* Dropdown */
.nav__item--has-menu { position: relative; }
.nav__caret { width: 0.7rem; height: 0.7rem; transition: transform var(--dur) var(--ease); }
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret { transform: rotate(180deg); }

.nav__menu {
  /* top sits flush at 100% (no gap) so there is no dead zone between the
     trigger and the menu while the mouse travels down to it — a gap here
     briefly hovers over neither element, :hover clears, and the menu
     starts closing before the pointer arrives. The animated entrance
     still reads fine since it slides from just above this line. */
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 17rem;
  padding: 0.5rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__menu a {
  display: block; padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__menu a:hover { background: var(--brand-tint); color: var(--brand); }
.nav__menu a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.nav__menu-sep {
  height: 1px; margin: 0.4rem 0.8rem;
  background: var(--line);
}

.header__cta { display: flex; align-items: center; gap: var(--space-3); flex: none; }

/* Language switcher. The active language is a <span>, not a link — there is
   nowhere for it to go, and a self-link is noise for screen readers. */
.lang {
  display: inline-flex; align-items: center; gap: 0.1rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
}
.lang__opt {
  padding: 0.35rem 0.4rem; border-radius: var(--r-sm);
  text-decoration: none; line-height: 1;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* On touch the switcher sits next to a 44px burger; 24px of type next to it is
   technically above the WCAG minimum but awkward to hit. Grow the padding
   rather than the type, so the label keeps its weight in the layout. */
@media (hover: none) {
  .lang__opt { padding: 0.7rem 0.55rem; }
}
.lang__sep { opacity: 0.35; }
/* Floating header over the dark hero photo */
.header:not(.is-stuck) .lang { color: rgba(255, 255, 255, 0.6); }
.header:not(.is-stuck) .lang__opt { color: rgba(255, 255, 255, 0.72); }
.header:not(.is-stuck) .lang__opt:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.header:not(.is-stuck) .lang__opt.is-current { color: #fff; }
/* Stuck (solid white) header */
.header.is-stuck .lang { color: var(--muted); }
.header.is-stuck .lang__opt { color: var(--ink-soft); }
.header.is-stuck .lang__opt:hover { color: var(--brand); background: var(--brand-tint); }
.header.is-stuck .lang__opt.is-current { color: var(--brand); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  flex: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle .ic { width: 1.4rem; height: 1.4rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  display: none;
}
.drawer.is-open { display: block; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(20, 16, 15, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(24rem, 88vw);
  background: var(--surface);
  padding: var(--space-5) var(--space-5) var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
/* The logo is an <a>, so without this it inherits the global link colour and
   the wordmark renders in brand red. The two rules that set it properly are
   both scoped to .header, which the drawer sits outside of. */
.drawer__head .brand { color: var(--ink); }
.drawer__list { list-style: none; display: flex; flex-direction: column; gap: 0.15rem; }
.drawer__list a {
  display: block; padding: 0.8rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.drawer__list a:hover { background: var(--brand-tint); color: var(--brand); }
.drawer__list a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.drawer__sub { list-style: none; padding-left: 0.75rem; margin: 0.15rem 0 0.4rem; border-left: 2px solid var(--line); }
.drawer__sub a { font-size: var(--fs-sm); color: var(--body); padding-block: 0.6rem; }
.drawer__group-label {
  padding: 0.8rem 0.75rem 0.35rem;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.drawer__foot { margin-top: auto; display: grid; gap: var(--space-3); padding-top: var(--space-5); }

@media (max-width: 1023px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* The whole group hugs the right gutter, so the burger lands on the same
     margin as the page content regardless of what sits beside it (the language
     switcher today, anything else later). Putting the auto margin on the
     toggle instead only works while it is the sole child. */
  .header__cta { margin-left: auto; }
  .header__cta .btn { display: none; }
}
@media (min-width: 1024px) {
  .drawer { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  /* svh (small viewport height) ignores mobile browser chrome, so the hero
     doesn't get cropped behind a URL bar or jump when it retracts. */
  min-height: min(88vh, 46rem);
  min-height: min(88svh, 46rem);
  display: flex; align-items: center;
  padding-block: clamp(4rem, 10vw, 8rem);
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4rem));
  overflow: hidden;
  background: var(--dark);
}

/* Full viewport height on large screens.
   The 48rem height guard is measured, not guessed: the hero copy runs ~580px,
   and the padding below adds 156px, so anything shorter than ~736px would make
   the hero overflow the viewport it is supposed to fill. Short laptops and
   landscape phones keep the content-sized hero above instead.
   Padding is trimmed here because flex centering — not padding — does the
   vertical placement once the box is a full viewport tall; padding-top still
   clears the fixed header. */
@media (min-width: 1024px) and (min-height: 48rem) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + var(--space-6)) var(--space-8);
  }
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
/* <picture> is an ordinary box between .hero__media and the <img>, and it sizes
   to its content by default. Without a height here the img's height:100%
   resolves against an auto-height parent, silently falls back to auto, and the
   photo renders at its own aspect ratio — 211px tall in a 650px box — instead
   of filling it. object-fit: cover then has nothing to crop. */
.hero__media picture {
  display: block;
  width: 100%; height: 100%;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  transform: scale(1.08);
  animation: heroDrift 22s var(--ease-out) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

/* Slow breathing for the ambient brand glows. Scale only, so it stays on the
   compositor and never touches layout. Durations are deliberately unequal so
   glows visible at the same time don't pulse in lockstep. */
@keyframes glowBreathe { from { transform: scale(0.92); } to { transform: scale(1.10); } }
@keyframes cardGlowBreathe {
  from { transform: translate(-50%, -50%) scale(0.96); }
  to   { transform: translate(-50%, -50%) scale(1.12); }
}

/* Scrim: dark on the left where the copy sits, transparent over the faces */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(12, 9, 9, 0.95) 0%,
      rgba(12, 9, 9, 0.88) 26%,
      rgba(12, 9, 9, 0.62) 48%,
      rgba(12, 9, 9, 0.28) 68%,
      rgba(12, 9, 9, 0.18) 100%),
    linear-gradient(180deg, rgba(12, 9, 9, 0.55) 0%, transparent 30%, rgba(12, 9, 9, 0.35) 100%);
}
.hero__glow {
  position: absolute; z-index: -1;
  left: -14%; bottom: -38%;
  width: 62%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(139, 17, 20, 0.21), transparent 66%);
  pointer-events: none;
  transform-origin: center;
  animation: glowBreathe 21s var(--ease) infinite alternate;
}

.hero__inner { position: relative; width: 100%; }
.hero__copy { max-width: 40rem; color: #fff; }
.hero h1 { color: #fff; margin-bottom: var(--space-5); }
.hero .lede { color: rgba(255, 255, 255, 0.86); font-size: var(--fs-lg); }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.95rem 0.45rem 0.6rem;
  margin-bottom: var(--space-6);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(6px);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.hero__eyebrow .ic { width: 1rem; height: 1rem; color: var(--brand-on-dark); }

.hero .btn--primary { --btn-bg: var(--brand); --btn-bd: var(--brand); }

/* Trust strip pinned under the hero copy */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.hero__trust li {
  display: flex; align-items: center; gap: 0.5rem;
  list-style: none;
  font-size: var(--fs-sm); color: rgba(255,255,255,0.82);
}
.hero__trust .ic { width: 1.1rem; height: 1.1rem; color: var(--brand-on-dark); flex: none; }

/* Dinero partner seal. Its own line rather than a fourth trust item:
   .hero__trust--row is nowrap above 640px and has no room left. The badge is a
   self-contained seal, so it sits bare — no pill or border competing with it. */
.hero__partner { margin-top: var(--space-5); }
.hero__partner img { width: 126px; height: auto; }
@media (max-width: 767px) {
  .hero__partner img { width: 104px; }
}

/* Keep the three trust items on a single row once there's room for them.
   Below that width they stack — three short lines reads better than a
   cramped, wrapped row. hero__copy is capped at 40rem at every viewport
   ≥640px (not just tablet widths), so this sizing has to fit that same
   640px column everywhere, not just in a mid-size band. */
@media (min-width: 640px) {
  .hero__trust--row {
    flex-wrap: nowrap;
    gap: var(--space-3);
  }
  .hero__trust--row li {
    white-space: nowrap;
    font-size: var(--fs-xs);
    gap: 0.4rem;
  }
  .hero__trust--row .ic { width: 1rem; height: 1rem; }
}

@media (max-width: 767px) {
  /* Full-screen hero: the section fills the viewport and the photo fills the
     section (.hero__media keeps its inset:0 from the base rule).
     min-height rather than height, so a long headline pushes the section
     taller instead of being clipped by .hero's own overflow:hidden.
     svh is the retracted-URL-bar height, so the hero does not jump as mobile
     browser chrome slides away; plain vh is the fallback for older engines. */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero__media img { object-position: 68% 35%; }
  /* Lighter than it was, so the photo reads as a photo behind the copy rather
     than fading to flat dark. Verified against the actual pixels under the
     headline and lede — the white text still clears 4.5:1. */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(12,9,9,0.70) 0%, rgba(12,9,9,0.58) 46%, rgba(12,9,9,0.72) 100%);
  }
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.card h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
.card p { font-size: var(--fs-sm); color: var(--body); }
.card .link-arrow { margin-top: auto; padding-top: var(--space-3); }

/* Icon holder — no container box; the icon carries itself and runs larger
   than it did inside the old 3rem tile. */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  /* Without the old fixed width, a column flex parent would stretch the chip
     full-width and centre the icon in it. Shrink to the icon and sit left. */
  align-self: flex-start;
  margin-bottom: var(--space-3);
  color: var(--brand);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip .ic { width: 2rem; height: 2rem; }
/* Without the tile behind it, the old white-on-hover would erase the icon
   on a white card — deepen the brand colour instead. */
.card:hover .chip { color: var(--brand-bright); transform: scale(1.08) rotate(-3deg); }

.chip--dark { color: var(--brand-on-dark); }

/* Services grid: two-up from tablet, so each card has room for its 3D figure. */
.grid--services { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 3D figure bleeding off the card's bottom-right corner. The card's existing
   overflow:hidden does the clipping. Only the figure moves on hover — the card
   itself deliberately stays put. */
/* Mobile: the figure flows in the card where the icon chip used to sit. A
   corner-bleed figure and full-width copy cannot coexist on a ~335px card —
   every variant tried collided with either the paragraph or the link row. */
.card__figure {
  display: block;
  width: 4.4rem;
  margin-bottom: var(--space-2);
  pointer-events: none;
  opacity: 0.6;
  transform-origin: 50% 60%;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.card__figure img { width: 100%; height: auto; }

/* Mobile: the figure sits in the card's bottom-right corner, on the same line
   as the "Læs om …" link — the same corner it takes on desktop, just smaller.
   It bleeds slightly past the corner so the card's overflow:hidden trims it,
   which keeps its visual mass in the corner instead of pushing into the copy.
   The paragraph and the link each reserve room on the right so neither can run
   underneath it. Scoped to .card--figure because the 404 page reuses
   .card--service without a figure. */
@media (max-width: 47.99rem) {
  .card--figure .card__figure {
    position: absolute;
    top: auto;
    bottom: -3%; right: -4%;
    width: 5.8rem;
    margin: 0;
    z-index: 0;
    transform-origin: 65% 70%;
  }
  .card--figure > :not(.card__figure) { position: relative; z-index: 1; }
  /* Reserve just the figure's own footprint, not a round number: over-reserving
     wrapped "Læs om lønadministration" onto a second line. */
  .card--figure p { padding-right: 3.5rem; }
  .card--figure .link-arrow { padding-right: 3.6rem; }
}
.card--service:hover .card__figure { transform: scale(1.1) rotate(3deg); opacity: 1; }
/* Cancels .card:hover's lift — the figure carries the motion, not the card.
   Shadow and border still respond, so the card reads as interactive. */
.card--service:hover { transform: none; }

/* Tablet and up: wide enough for the reference's bottom-right corner bleed.
   The card's existing overflow:hidden does the clipping. */
@media (min-width: 48rem) {
  /* Scoped to .card--figure, not .card--service: the 404 page reuses
     .card--service for its stripe but carries no figure, and would otherwise
     inherit a reserved height and a 58% text column with nothing in the gap. */
  .card--figure { min-height: 17rem; }
  .card--figure .card__figure {
    position: absolute;
    bottom: -7%; right: -5%;
    width: 41.6%; max-width: 11.2rem;
    margin: 0;
    z-index: 0;
    transform-origin: 65% 65%;
  }
  .card--figure > :not(.card__figure) { position: relative; z-index: 1; }
  .card--figure p { max-width: 58%; }
}

/* Service card gets a top hairline that fills on hover.
   The card clips it: a straight 3px bar inside a 16px corner radius overhangs
   the curve by ~7px at each end, so the card's own rounded shape does the
   masking instead of trying to match it with border-radius on the bar. */
.card--service { overflow: hidden; }
.card--service::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card--service:hover::before { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   9. Why-us (dark) feature list
   -------------------------------------------------------------------------- */
.feature {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.025);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Brand glow sitting permanently behind the icon in the top-left corner — the
   same radial-gradient figure the hero uses, so the section's colour language
   carries through. Always visible; hover only lifts its intensity.
   Positioned by transform (% of its own box) rather than inset, so the
   bloom lands on the corner at any card aspect ratio. */
.feature::after {
  content: "";
  position: absolute;
  /* Centred exactly on the icon: card padding + half the icon. Anchoring in
     absolute units (not % of the glow's own box) keeps the centre on the icon
     at every card size — a % offset drifts as the card's width changes. */
  top: calc(var(--space-6) + 1rem);
  left: calc(var(--space-6) + 1rem);
  width: 140%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139, 17, 20, 0.13), transparent 66%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.feature > * { position: relative; z-index: 1; }
/* Still at rest; starts breathing only while pointed at. */
.feature:hover::after {
  opacity: 1;
  animation: cardGlowBreathe 7s var(--ease) infinite alternate;
}
.feature:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.2);
}
.feature h3 { font-size: var(--fs-lg); font-weight: 600; }
.feature p { font-size: var(--fs-sm); color: var(--dark-muted); }
.feature__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: rgba(232, 180, 182, 0.55);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   10. Geo / city grid
   -------------------------------------------------------------------------- */
.geo-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  list-style: none;
}
.geo-card {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.geo-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease-out);
}
.geo-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-2);
  border-color: var(--line-strong); color: var(--brand);
}
.geo-card:hover::after { transform: scaleY(1); }
.geo-card__pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.geo-card__pin .ic { width: 1.25rem; height: 1.25rem; }
.geo-card:hover .geo-card__pin { background: var(--brand); color: #fff; }
.geo-card__name { font-weight: 600; font-size: var(--fs-base); line-height: 1.3; display: block; }
.geo-card__meta { font-size: var(--fs-xs); color: var(--muted); }
.geo-card:hover .geo-card__meta { color: var(--brand); }

/* Not-yet-published cities: present for context, not a dead link */
.geo-card--soon {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  cursor: default;
}
.geo-card--soon:hover { transform: none; box-shadow: none; color: var(--muted); border-color: var(--line); }
.geo-card--soon:hover::after { transform: scaleY(0); }
.geo-card--soon .geo-card__pin { background: var(--bg-warm); color: var(--muted); }
.geo-card--soon:hover .geo-card__pin { background: var(--bg-warm); color: var(--muted); }
.geo-card--soon .geo-card__name { font-weight: 500; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   11. Team
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none;
}
.member {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.member:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.member__photo {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-warm);
  overflow: hidden;
}
.member__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.member:hover .member__photo img { transform: scale(1.045); }

/* Monogram fallback when there is no photograph */
.member__monogram {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--bg-warm), #E9E2DA);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 4.5rem);
  letter-spacing: 0.02em;
}
.member__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 0.35rem; }
.member__name { font-size: var(--fs-lg); font-weight: 600; }
.member__role {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--space-3);
}
.member__contact { display: flex; flex-direction: column; gap: 0.4rem; list-style: none; }
.member__contact a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-sm); color: var(--body); text-decoration: none;
  min-height: 2.25rem;
}
.member__contact a:hover { color: var(--brand); }
.member__contact .ic { width: 1rem; height: 1rem; color: var(--muted); flex: none; }
.member__contact a:hover .ic { color: var(--brand); }

/* --------------------------------------------------------------------------
   12. Stats
   -------------------------------------------------------------------------- */
.stats {
  display: grid; gap: var(--space-5);
  /* Two figures plus the Dinero seal. On narrow screens the two numbers pair
     up and the badge takes a full-width row below, rather than being squeezed
     into a third column it can't hold. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  max-width: 52rem;
  margin-inline: auto;
  list-style: none;
}
.stat--badge { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat--badge { grid-column: auto; }
}
/* The seal is an image among typographic figures — centre it and match its
   height to the number+label block so the three read as peers. */
.stat--badge picture { display: block; }
.stat--badge img { width: 112px; height: auto; margin-inline: auto; }
.stat { text-align: center; padding: var(--space-4); }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.section--dark .stat__num { color: var(--dark-text); }
.stat__label {
  display: block; margin-top: var(--space-3);
  font-size: var(--fs-sm); color: var(--muted);
}
.section--dark .stat__label { color: var(--dark-muted); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field__label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.field__req { color: var(--brand); margin-left: 0.15rem; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }

.input, .textarea, .select {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: #A79E98; }
.input:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--err);
  background: var(--err-tint);
}
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.18);
}

.field__error {
  display: none;
  align-items: center; gap: 0.4rem;
  font-size: var(--fs-xs); font-weight: 500; color: var(--err);
}
.field__error .ic { width: 0.95rem; height: 0.95rem; flex: none; }
.field.has-error .field__error { display: flex; }

.form__note { font-size: var(--fs-xs); color: var(--muted); }
.form__note a { color: var(--brand); }

.form__status {
  display: none;
  align-items: flex-start; gap: 0.65rem;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.form__status.is-visible { display: flex; }
.form__status--ok { background: var(--ok-tint); border-color: rgba(20, 108, 67, 0.28); color: var(--ok); }
.form__status--err { background: var(--err-tint); border-color: rgba(179, 38, 30, 0.28); color: var(--err); }
.form__status .ic { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.12rem; }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Submitting state */
.btn[data-loading="true"] { pointer-events: none; opacity: 0.75; }
.btn__spinner { display: none; width: 1.1em; height: 1.1em; }
.btn[data-loading="true"] .btn__spinner { display: block; animation: spin 0.7s linear infinite; }
.btn[data-loading="true"] .btn__label-idle { display: none; }
.btn__label-busy { display: none; }
.btn[data-loading="true"] .btn__label-busy { display: inline; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Contact split layout */
.contact-split {
  display: grid; gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-split { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-9); }
}
.contact-card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
@media (min-width: 640px) { .contact-card { padding: var(--space-7); } }

.contact-list { list-style: none; display: grid; gap: var(--space-5); }
.contact-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
/* Nudged down so the icon's optical centre lines up with the label's cap
   height, now that there's no tile to align against. */
.contact-list .chip { margin: 0; }
.contact-list .chip .ic { width: 1.5rem; height: 1.5rem; }
.contact-list__label {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.15rem;
}
/* inline-block (not inline-flex) so the multi-line address keeps its <br>
   instead of each text run becoming a flex item. Padding lifts the tap
   area to the 44px minimum. */
.contact-list a {
  display: inline-block;
  min-height: 2.75rem; padding-block: 0.6rem;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.contact-list a:hover { color: var(--brand); }
/* Two phone numbers sharing one "Ring til os" entry: stacked and more
   compact than the default 44px link, since they're a closely related pair
   rather than two independent list rows — still clears WCAG's 24px minimum
   target size with room to spare. */
.contact-list__multi a { display: block; min-height: 2.25rem; padding-block: 0.3rem; }
.contact-list__multi a + a { margin-top: 0.1rem; }

/* --------------------------------------------------------------------------
   14. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem));
  background: var(--dark);
  color: var(--dark-muted);
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: auto -20% -70% 30%;
  height: 130%;
  background: radial-gradient(ellipse at 50% 50%, rgba(139, 17, 20, 0.29), transparent 65%);
  pointer-events: none;
  transform-origin: center;
  animation: glowBreathe 19s var(--ease) infinite alternate;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { color: rgba(242, 238, 233, 0.8); margin-top: var(--space-5); }

.crumbs { margin-bottom: var(--space-5); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  list-style: none; font-size: var(--fs-xs);
}
.crumbs li { display: flex; align-items: center; gap: 0.4rem; color: rgba(242,238,233,0.55); }
/* padding keeps the tap target at/above the 24px WCAG 2.5.8 minimum */
.crumbs a {
  display: inline-block; padding-block: 0.3rem;
  color: rgba(242,238,233,0.75); text-decoration: none;
}
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs .ic { width: 0.8rem; height: 0.8rem; opacity: 0.5; }
.crumbs [aria-current="page"] { color: var(--brand-on-dark); }

/* Light variant for simple pages */
.page-hero--light { background: var(--bg-warm); color: var(--body); }
.page-hero--light::before { display: none; }
.page-hero--light h1 { color: var(--ink); }
.page-hero--light .lede { color: var(--body); }
.page-hero--light .crumbs li { color: var(--muted); }
.page-hero--light .crumbs a { color: var(--body); }
.page-hero--light .crumbs a:hover { color: var(--brand); }
.page-hero--light .crumbs [aria-current="page"] { color: var(--brand); }

/* --------------------------------------------------------------------------
   15. Long-form article
   -------------------------------------------------------------------------- */
.article-layout {
  display: grid; gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-9); align-items: start; }
  /* The sidebar (TOC + CTA, or just the CTA on pages without a TOC) sticks
     as ONE unit while scrolling. Sticky lived on .toc alone before, so the
     CTA below it — a normal sibling in flow — separated from it and
     scrolled away on its own instead of staying visible alongside it. */
  .article-layout > aside {
    position: sticky;
    top: 6rem;
  }
}

/* FAQ — <details>/<summary> so it opens without JS and is keyboard-operable.
   The visible questions must stay identical to the FAQPage schema in
   build.py's PAGES entry; Google drops the rich result if they diverge. */
.faq { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 600; font-size: var(--fs-base); color: var(--ink);
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none;
  width: 0.65rem; height: 0.65rem;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-0.15em, -0.15em);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-0.15em, -0.15em); }
.faq__item[open] summary { padding-bottom: var(--space-2); }
.faq__answer { padding: 0 var(--space-5) var(--space-5); }
.faq__answer > * + * { margin-top: var(--space-4); }

/* In-article photo. Breaks up long SEO copy and gives the page real imagery —
   the four service pages previously had none at all. */
.prose-figure { margin: var(--space-8) 0; }
.prose-figure img {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
}
.prose-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-sm); color: var(--muted);
  font-style: italic;
}

.prose { max-width: var(--wrap-prose); font-size: var(--fs-md); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.625rem, 1.8vw + 1.15rem, 2.25rem);
  line-height: 1.15; letter-spacing: -0.012em;
  margin-top: var(--space-9); scroll-margin-top: 6rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em;
  margin-top: var(--space-7); scroll-margin-top: 6rem;
}
.prose p { color: var(--body); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: var(--space-3); }
.prose li { color: var(--body); }
.prose li::marker { color: var(--brand); }
.prose ul li::marker { font-size: 1.1em; }
.prose a { font-weight: 500; }

/* Pull-quote / highlight box */
.callout {
  padding: var(--space-6);
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout p { color: var(--ink-soft); }
.callout h3 { margin-top: 0; }

/* In-page nav. Stickiness now lives on the parent <aside> (see
   .article-layout > aside) so it moves together with the CTA below it. */
.toc {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.toc__title {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--space-4);
}
.toc ol { list-style: none; display: grid; gap: 0.1rem; counter-reset: toc; }
.toc a {
  display: block; padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.45;
  color: var(--body); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.toc a:hover { color: var(--brand); background: var(--brand-tint); }
.toc a.is-active {
  color: var(--brand); font-weight: 600;
  border-left-color: var(--brand); background: var(--brand-tint);
}
@media (max-width: 1023px) { .toc { display: none; } }

/* Sidebar CTA */
.side-cta {
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--dark);
  border-radius: var(--r-lg);
  color: var(--dark-muted);
  position: relative; overflow: hidden;
}
.side-cta::before {
  content: ""; position: absolute; inset: auto -30% -60% -30%; height: 90%;
  background: radial-gradient(ellipse at 50% 100%, rgba(139,17,20,0.38), transparent 70%);
  transform-origin: 50% 100%;
  animation: glowBreathe 15s var(--ease) infinite alternate;
}
.side-cta > * { position: relative; }
.side-cta h3 { color: #fff; font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.side-cta p { font-size: var(--fs-sm); margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   16. Price tables
   -------------------------------------------------------------------------- */
.price-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none;
}
.price-card {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.price-card--featured { border-color: var(--brand); box-shadow: var(--sh-2); }
.price-card__tier {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand);
}
.price-card__vol {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl);
  color: var(--ink); margin-top: var(--space-3); line-height: 1.2;
}
.price-card__sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.35rem; }

/* One price per segment. The monthly figure leads because that is how most
   people judge an ongoing cost; the annual total sits beside it so the card
   states both ways of paying rather than implying only one. */
/* Column, not a wrapping row: the shortest tier ("667 kr./md. eller 8.000 kr.
   årligt") happens to fit on one line where the longer two do not, so a
   wrapping row gave the three cards different shapes. Stacking makes the
   monthly figure lead and the annual sit under it in every card. */
.price-card__price {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.price-card__mo { font-size: var(--fs-h3); font-weight: 600; color: var(--brand); line-height: 1.1; }
.price-card__yr { font-size: var(--fs-xs); color: var(--muted); }

/* --------------------------------------------------------------------------
   Map consent placeholder
   Sits in the same box as the blocked iframe and fills it, so the contact page
   never shows an empty 420px gap while waiting for consent.
   -------------------------------------------------------------------------- */
.map { position: relative; min-height: 420px; }
.map__consent {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  text-align: center;
  background: var(--bg-warm);
}
.map__consent[hidden] { display: none; }
.map__consent-text { max-width: 34ch; color: var(--body); font-size: var(--fs-sm); }
.map__consent-alt { font-size: var(--fs-sm); }
.map__consent-alt a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--brand); }
.map__consent-alt .ic { width: 1rem; height: 1rem; }
.price-badge {
  display: inline-block; align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: 0.3rem 0.7rem;
  background: var(--brand); color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600;
}

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--dark);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--dark-muted);
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: auto -20% -80% -20%; height: 140%;
  background: radial-gradient(ellipse at 50% 100%, rgba(139,17,20,0.34), transparent 66%);
  transform-origin: 50% 100%;
  animation: glowBreathe 23s var(--ease) infinite alternate;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band .lede { margin: var(--space-4) auto 0; color: rgba(242,238,233,0.78); }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--dark);
  color: var(--dark-muted);
  padding-block: var(--space-9) var(--space-6);
  font-size: var(--fs-sm);
}
.footer a { color: var(--dark-muted); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid {
  display: grid; gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: var(--space-8);
}
.footer__brand { max-width: 22rem; }
.footer__brand svg { height: 2.2rem; width: auto; margin-bottom: var(--space-4); }
.footer__brand p { color: var(--dark-muted); font-size: var(--fs-sm); }
.footer__title {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--space-4);
}
.footer__list { list-style: none; display: grid; gap: 0.7rem; }
.footer__list a { display: inline-block; min-height: 1.5rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--dark-line);
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; }
.footer__legal a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-inline: 0.15rem;
}

/* --------------------------------------------------------------------------
   19. Reveal animations
   -------------------------------------------------------------------------- */
/* Elements only start hidden when JS is present to reveal them again.
   Without the .js gate, a failed/blocked script would leave the page blank. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translate3d(-22px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(22px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Hero copy animates on load rather than on scroll */
.js .hero [data-hero] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: heroIn 800ms var(--ease-out) forwards;
  animation-delay: var(--hero-delay, 0ms);
}
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mx-auto { margin-inline: auto; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; }
.stack { display: grid; gap: var(--space-5); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   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; transform: none; }
  .js .hero [data-hero] { opacity: 1; transform: none; animation: none; }
  .hero__media img { animation: none; transform: none; }
  .card:hover, .member:hover, .geo-card:hover, .feature:hover, .price-card:hover, .btn:hover {
    transform: none;
  }
  .card--service:hover .card__figure { transform: none; }
  /* Killed outright, not just sped up: the shared rule above would otherwise
     run one instant iteration and leave every glow frozen at its largest. */
  .hero__glow, .section--dark::before, .page-hero::before,
  .side-cta::before, .cta-band::before {
    animation: none; transform: none;
  }
  .feature:hover::after { animation: none; transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .drawer, .footer, .cta-band, .side-cta, .toc, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  .js [data-reveal] { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}