/*
Theme Name: Omega Finans
Theme URI: https://omegafinans.dk
Author: Custom Build
Description: Bespoke investment finance theme for Omega Finans ApS
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Private
Text Domain: omega-finans
*/

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --navy:       #0F1E3C;
  --navy-mid:   #1A2E52;
  --navy-light: #2A4070;
  --navy-pale:  #E8EDF5;
  --gold:       #B89A5A;
  --gold-light: #D4B87A;
  --gold-ink:   #7E611E;  /* deep gold for small text on light surfaces (WCAG AA) */
  --cream:      #F0EBE1;
  --cream-dark: #E7E0D2;
  --ink:        #1A1A1A;
  --ink-60:     #5F5F5F;
  --ink-30:     #67655E;
  --white:      #F7F4EF;  /* warm off-white surface (replaces stark #FFF) */
  --pure-white: #FFFFFF;
  --serif:      'Playfair Display', Georgia, serif;
  --sans:       'Work Sans', 'Helvetica Neue', sans-serif;
  --max:        1200px;
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* ── Utilities ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
}
.eyebrow--light { color: var(--gold-light); }
.eyebrow--muted { color: var(--ink-30); }

/* Ampersands in headings. Playfair's italic ampersand is an ornate Et-ligature
   and the client asked for something plainer, so any "&" an editor types into
   a heading field is set upright in the sans face instead. Emitted by
   of_heading(); see functions.php. */
.amp {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.86em;
  padding: 0 0.02em;
}

.btn-primary {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 14px 32px;
  border: 1.5px solid var(--navy);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  text-align: center;
}
.btn-primary:hover { background: var(--navy-mid); border-color: var(--navy-mid); color: var(--white); }
.btn-primary--gold { background: var(--gold); border-color: var(--gold); }
.btn-primary--gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn-primary--full { display: block; width: 100%; }

.btn-ghost {
  display: inline-block;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.btn-ghost:hover { opacity: 0.6; }
/* For navy sections ONLY. On a light ground this renders near-white text on
   near-white and is effectively invisible — use the plain .btn-ghost there. */
.btn-ghost--light { color: rgba(255,255,255,0.7); }

/* ── Header ────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 0.5px solid rgba(15,30,60,0.1);
  height: 64px;
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 2px 24px rgba(15,30,60,0.08); }
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  /* Fluid so the row gives up its outer margin before it gives up the gaps
     between links. Caps at the 48px the rest of the site aligns to. */
  padding: 0 clamp(20px, 3vw, 48px);
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.site-logo { display: flex; align-items: center; height: 36px; flex-shrink: 0; }
.site-logo__img { height: 100%; width: auto; display: block; max-height: 36px; }
#site-nav { flex: 1 1 auto; min-width: 0; }
/* Items are distributed evenly across the row rather than pinned into a
   centred cluster plus a right-hand cluster. With nine items the two clusters
   met in the middle and the left one ran under the logo.

   space-between only shares out surplus space, so it is not on its own what
   stops the collision — the fluid gap below is. It is what keeps the row
   looking deliberate at every width in between. */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Shrinks with the viewport instead of holding 32px until the row bursts.
     Floor of 14px is about where 12px letterspaced labels stop reading as
     separate items. */
  gap: clamp(14px, 1.4vw, 32px);
  list-style: none;
  width: 100%;
}
.site-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-60);
  transition: color 0.2s;
  /* Without this a squeezed flex item breaks a two-word label such as
     "Tidligere Projekter" onto a second line inside the header bar. */
  white-space: nowrap;
}
.site-nav a:hover, .site-nav .current-menu-item a { color: var(--navy); }
/* Primary CTA — Kontakt (gold fill).
   Keyed to the .nav-cta class the menu item carries, never to its position:
   `li:last-child` meant that dragging any new item to the end of the menu in
   Appearance → Menus silently turned it into the gold button. */
.site-nav .nav-cta a {
  background: var(--gold);
  color: var(--white) !important;
  padding: 9px 20px;
  border: 1.5px solid var(--gold);
  letter-spacing: 0.04em;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.site-nav .nav-cta a:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  box-shadow: 0 2px 12px rgba(184,154,90,0.35);
}
/* Secondary CTA — Kundeportal (outlined ghost) */
.site-nav .nav-portal a {
  padding: 9px 18px;
  border: 1px solid rgba(15,30,60,0.25);
  color: var(--ink-60) !important;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.site-nav .nav-portal a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white) !important;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--navy); transition: all 0.25s; }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Navigation breakpoints ─────────────────────────────
   The row is capped at --max (1200px) regardless of monitor size, so the
   space available to it is fixed and the item count is what decides whether
   it fits. Nine items plus two buttons need roughly 1230px at the old fixed
   32px gap — hence the fluid gap and padding above, which bring that back
   under the cap.
   Below 1120px even the minimum gap runs out: hand over to the menu button
   rather than let the labels collide again. Raised from 1024px when the
   ninth item was added — if a tenth is ever added, this needs raising too,
   or the nav needs to become a dropdown. */
@media (max-width: 1280px) {
  .site-nav .nav-portal a { padding: 9px 14px; }
  .site-nav .nav-cta a    { padding: 9px 16px; }
}
@media (max-width: 1120px) {
  #site-nav { position: absolute; }
  .site-nav { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; position: fixed; top: 64px; left: 0; right: 0; background: var(--white); border-bottom: 0.5px solid rgba(15,30,60,0.1); padding: 16px 24px 24px; box-shadow: 0 8px 24px rgba(15,30,60,0.08); list-style: none; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
  #site-nav.is-open .site-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-nav li { width: 100%; }
  .site-nav a { display: block; padding: 12px 0; border-bottom: 0.5px solid rgba(15,30,60,0.06); white-space: normal; }
  .site-nav .nav-cta a,
  .site-nav .nav-portal a { background: none; color: var(--navy) !important; box-shadow: none; border: none; padding: 12px 0; }
  .menu-toggle { display: flex; }
}

/* ── Hero (hook-first) ─────────────────────────────────── */
.hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 128px 48px 80px;
}
.hero::before {
  content: '';
  position: absolute;
  bottom: 0; left: -20px;
  width: 460px;
  height: 460px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 88'%3E%3Cpolygon points='80,2 158,86 2,86' fill='white'/%3E%3Cpolygon points='80,18 134,76 26,76' fill='none' stroke='white' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
}

/* Split: copy | general image */
.hero__top {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 64px;
  align-items: center;
}

/* Hook */
.hero__hook { max-width: 620px; }
.hero__eyebrow { margin-bottom: 24px; }
.hero__h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.2vw, 3.5rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 20px;
}
.hero__h1 em { font-style: italic; color: var(--gold-light); }
.hero__lead {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,0.60);
  max-width: 540px;
  margin-bottom: 30px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Hero media — one general image, deliberately not a project.
   Replaces the four-project collage: no captions, nothing identifying a
   specific loan, so the hero carries no track-record claim. */
.hero__media {
  position: relative;
  overflow: hidden;
  border: 0.5px solid rgba(255,255,255,0.12);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
}


/* Supporting widget: return calculator — bright section, relief from navy */
.hero-calc { background: var(--cream); padding: 96px 48px; margin-bottom: 56px; }
.hero-calc__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-calc__intro .eyebrow { margin-bottom: 16px; }
.hero-calc__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 14px;
}
.hero-calc__sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 380px;
  margin-bottom: 28px;
}

/* Stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(15,30,60,0.08);
  border: 0.5px solid rgba(15,30,60,0.08);
  margin-bottom: 32px;
}
.stat-strip__item { background: var(--white); padding: 18px 18px 16px; }
.stat-strip__label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-30);
  margin-bottom: 5px;
}
.stat-strip__value {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
}

/* Calculator */
.calc-card { background: var(--white); border: 0.5px solid rgba(15,30,60,0.10); padding: 28px 28px 24px; }
.calc-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.calc-card__title { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--navy); }
.calc-card__note { font-size: 10px; color: var(--ink-30); }
.slider-group { margin-bottom: 16px; }
.slider-group__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.slider-group__name { font-size: 14px; color: var(--ink-60); }
.slider-group__val { font-family: var(--serif); font-size: 15px; color: var(--navy); }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px;
  background: var(--navy-pale);
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
  transition: transform 0.15s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--navy);
  border: none; cursor: pointer;
}
.calc-card__result {
  background: var(--navy);
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px; margin-bottom: 14px;
}
.calc-card__result-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.50); }
.calc-card__result-value { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--gold-light); }
.calc-card__cta { border-top: 0.5px solid rgba(15,30,60,0.08); padding-top: 14px; text-align: center; }
.calc-card__cta-text { font-size: 12px; color: var(--ink-60); margin-bottom: 10px; }

/* ── Track Record ──────────────────────────────────────── */
.track-record { background: var(--navy); padding: 80px 48px; }
.track-record__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 7fr;
  gap: 80px; align-items: center;
}
.track-record__eyebrow { margin-bottom: 16px; }
.track-record__heading { font-family: var(--serif); font-size: clamp(1.8rem, 2.5vw, 2.5rem); font-weight: 400; line-height: 1.15; color: var(--white); margin-bottom: 18px; }
.track-record__heading em { font-style: italic; color: var(--gold-light); }
.track-record__note { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.58); line-height: 1.7; margin-bottom: 24px; max-width: 340px; }
.track-record__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(184,154,90,0.15);
  border: 0.5px solid rgba(184,154,90,0.35);
  color: var(--gold-light);
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  padding: 8px 14px; margin-bottom: 28px;
}
.track-record__badge::before { content: '✓'; }
.track-record__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.05); }
.track-record__metric { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.06); padding: 26px 26px 22px; }
.track-record__metric-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.track-record__metric-value { font-family: var(--serif); font-size: 32px; font-weight: 400; color: var(--white); line-height: 1; margin-bottom: 4px; }
.track-record__metric-sub { font-size: 11px; color: rgba(255,255,255,0.55); }

/* ── Approach ──────────────────────────────────────────── */
.approach { background: var(--cream); padding: 96px 48px; }
.approach__inner { max-width: var(--max); margin: 0 auto; }
.approach__head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
.approach__eyebrow { margin-bottom: 16px; }
.approach__title { font-family: var(--serif); font-size: clamp(2rem, 2.8vw, 2.8rem); font-weight: 400; line-height: 1.15; color: var(--navy); }
.approach__title em { font-style: italic; color: var(--gold); }
.approach__intro { font-size: 15px; font-weight: 300; color: var(--ink-60); line-height: 1.75; }
.approach__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(15,30,60,0.08); }
.approach__card { background: var(--white); padding: 36px 32px 40px; }
.approach__card::before { content: ''; display: block; width: 32px; height: 2px; background: var(--gold); margin-bottom: 22px; }
.approach__card h3 { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--navy); margin-bottom: 12px; line-height: 1.3; }
.approach__card p { font-size: 14px; color: var(--ink-60); line-height: 1.7; }

/* ── Process ───────────────────────────────────────────── */
.process { background: var(--white); padding: 96px 48px; }
.process__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 5fr 4fr; gap: 96px; align-items: start; }
.process__eyebrow { margin-bottom: 20px; }
.process__title { font-family: var(--serif); font-size: clamp(1.8rem, 2.3vw, 2.3rem); font-weight: 400; line-height: 1.2; color: var(--navy); margin-bottom: 44px; }
.process__steps { display: flex; flex-direction: column; }
.process__step { display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding: 22px 0; border-top: 0.5px solid rgba(15,30,60,0.08); align-items: start; }
.process__step:last-child { border-bottom: 0.5px solid rgba(15,30,60,0.08); }
.process__step-num { font-family: var(--serif); font-size: 18px; color: var(--gold); padding-top: 2px; }
.process__step h4 { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.process__step p { font-size: 13px; color: var(--ink-60); line-height: 1.6; }
.process__sidebar { position: sticky; top: 88px; }
.security-card { background: var(--navy); padding: 36px 32px 40px; }
.security-card__eyebrow { margin-bottom: 18px; }
.security-card h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--white); line-height: 1.25; margin-bottom: 28px; }
.security-card__items { margin-bottom: 28px; }
.security-card__item { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-top: 0.5px solid rgba(255,255,255,0.08); }
.security-card__item:last-child { border-bottom: 0.5px solid rgba(255,255,255,0.08); }
.security-card__item span { font-size: 14px; color: rgba(255,255,255,0.58); }
.security-card__item strong { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.80); }
/* The frame line is indicative, and says so; the note sits between the items
   and the CTA so it is read before the button, not after it. */
.security-card__note { font-size: 11px; line-height: 1.6; color: rgba(255,255,255,0.55); margin: -14px 0 24px; }

/* ── Projects ──────────────────────────────────────────── */
.projects { background: var(--cream-dark); padding: 96px 48px; }
.projects__inner { max-width: var(--max); margin: 0 auto; }
.projects__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; }
.projects__eyebrow { margin-bottom: 12px; }
.projects__title { font-family: var(--serif); font-size: clamp(1.8rem, 2.3vw, 2.3rem); font-weight: 400; color: var(--navy); }
.projects__title em { font-style: italic; }
.projects__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1px; background: rgba(15,30,60,0.08); margin-bottom: 44px; }
.project-feature { background: var(--white); padding: 36px 36px 40px; }
.project-feature__eyebrow { margin-bottom: 14px; }
.project-feature__title { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--navy); margin-bottom: 28px; line-height: 1.3; }
.project-feature__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(15,30,60,0.08); }
.project-feature__metric { background: var(--cream); padding: 14px 16px; }
.project-feature__metric span { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-30); margin-bottom: 4px; }
.project-feature__metric strong { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--navy); }
.projects__sidebar { display: flex; flex-direction: column; gap: 1px; }
.project-mini { background: var(--white); padding: 24px 24px 22px; flex: 1; }
.project-mini__eyebrow { margin-bottom: 8px; font-size: 9px; }
.project-mini h4 { font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.project-mini__rate { font-family: var(--serif); font-size: 22px; color: var(--navy); font-weight: 400; display: block; }
.project-mini__label { font-size: 11px; color: var(--ink-30); margin-top: 2px; display: block; }

/* Front page: the section is now a route into the history rather than a
   results display, so the head is a two-column statement like .approach__head
   and the metric grid beneath it is gone. */
.projects--simple .projects__head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 36px; }
.projects--simple .projects__title em { font-style: italic; color: var(--gold-ink); }
.projects--simple .projects__body { font-size: 15px; font-weight: 300; color: var(--ink-60); line-height: 1.75; }
.projects--simple .projects__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ── Contact Band ──────────────────────────────────────── */
/* Light surface, so the page resolves light -> dark into the navy footer
   instead of navy -> near-black. Text colours are inverted accordingly. */
.contact-band { background: var(--cream); padding: 96px 48px; text-align: center; }
.contact-band__inner { max-width: 680px; margin: 0 auto; }
.contact-band__eyebrow { margin-bottom: 22px; }
.contact-band__title { font-family: var(--serif); font-size: clamp(2rem, 3vw, 3rem); font-weight: 400; line-height: 1.15; color: var(--navy); margin-bottom: 18px; }
.contact-band__title em { font-style: italic; color: var(--gold-ink); }
.contact-band__body { font-size: 15px; font-weight: 300; color: var(--ink-60); line-height: 1.7; margin-bottom: 36px; }

/* ── Footer ────────────────────────────────────────────── */
/* Navy, not near-black: the black ground clashed with the navy band that used
   to sit directly above it. The band is now light, so the page closes
   light -> dark on a single dark tone. */
.site-footer { background: var(--navy); padding: 56px 48px 32px; }
.site-footer__inner { max-width: var(--max); margin: 0 auto; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 0.5px solid rgba(255,255,255,0.08); margin-bottom: 28px; }
.footer-logo { margin-bottom: 12px; }
.footer-logo__img { height: 56px; width: auto; display: block; filter: brightness(0) invert(1); }
.footer-tagline { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.65; max-width: 240px; margin-bottom: 18px; }
.footer-col__title { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 12px; color: rgba(255,255,255,0.60); margin-bottom: 10px; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.footer-note { font-size: 11px; color: rgba(255,255,255,0.62); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 11px; color: rgba(255,255,255,0.45); }
.footer-legal a { color: rgba(255,255,255,0.45); transition: color 0.2s; }
.footer-legal a:hover { color: var(--white); }

/* ═══════════════════════════════════════════════════════
   INVESTERING I UDLÅN — Page Blocks
   ══════════════════════════════════════════════════════ */

/* ── Loan Hero ─────────────────────────────────────────── */
.loan-hero {
  background: var(--navy);
  padding: 139.5px 48px 76px;
  position: relative;
  overflow: hidden;
}
.loan-hero__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.loan-hero__eyebrow { margin-bottom: 20px; }
.loan-hero__h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.14;
  color: var(--white);
  margin-bottom: 18px;
  max-width: 660px;
}
.loan-hero__h1 em { font-style: italic; color: var(--gold-light); }
.loan-hero__lead {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  max-width: 660px;
  margin-bottom: 28px;
}
.loan-hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.loan-hero__trust {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 0.5px solid rgba(255,255,255,0.10);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.loan-hero__trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.58);
}
.loan-hero__trust-badge::before {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ── Loan Overview ─────────────────────────────────────── */
.loan-overview { background: var(--white); padding: 80px 48px; }
.loan-overview__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 64px;
  align-items: stretch;
}
.loan-overview__media {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.loan-overview__image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.loan-overview__caption {
  background: var(--cream);
  padding: 28px 32px 32px;
  flex: 1;
}
.loan-overview__caption .eyebrow { margin-bottom: 10px; }
.loan-overview__caption h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 10px;
}
.loan-overview__caption p {
  font-size: 14px;
  color: var(--ink-60);
  line-height: 1.7;
}

/* Typiske rammer panel */
.loan-overview__metrics {
  background: var(--navy);
  padding: 40px 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.loan-overview__metrics .eyebrow { margin-bottom: 14px; }
.loan-overview__metrics-heading {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 32px;
}
.loan-metrics-list { display: flex; flex-direction: column; }
.loan-metrics-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-top: 0.5px solid rgba(255,255,255,0.08);
}
.loan-metrics-list__item:last-child { border-bottom: 0.5px solid rgba(255,255,255,0.08); }
.loan-metrics-list__item span {
  font-size: 12px;
  color: rgba(255,255,255,0.58);
  letter-spacing: 0.04em;
}
.loan-metrics-list__item strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--gold-light);
}

/* ── Loan Process ──────────────────────────────────────── */
.loan-process { background: var(--cream); padding: 80px 48px; }
.loan-process__inner { max-width: var(--max); margin: 0 auto; }
.loan-process__head { max-width: 640px; margin-bottom: 56px; }
.loan-process__head .eyebrow { margin-bottom: 14px; }
.loan-process__heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 16px;
}
.loan-process__intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-60);
  line-height: 1.75;
}
.loan-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(15,30,60,0.08);
}
.loan-process__step {
  background: var(--white);
  padding: 32px 28px 36px;
}
.loan-process__step-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  padding: 5px 10px;
  border: 0.5px solid rgba(184,154,90,0.30);
  background: rgba(184,154,90,0.06);
}
.loan-process__step h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 12px;
}
.loan-process__step p {
  font-size: 13px;
  color: var(--ink-60);
  line-height: 1.7;
}

/* ── Loan Risk ─────────────────────────────────────────── */
.loan-risk { background: var(--white); padding: 80px 48px; }
.loan-risk__inner { max-width: var(--max); margin: 0 auto; }
.loan-risk__head { max-width: 560px; margin-bottom: 44px; }
.loan-risk__head .eyebrow { margin-bottom: 14px; }
.loan-risk__heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 14px;
}
.loan-risk__intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-60);
  line-height: 1.75;
}

/* Tab buttons */
.loan-risk__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(15,30,60,0.08);
  margin-bottom: 1px;
}
.loan-risk__tab {
  background: var(--cream);
  border: none;
  cursor: pointer;
  padding: 18px 20px 18px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s var(--ease);
  position: relative;
  overflow: hidden;
}
.loan-risk__tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: var(--progress, 0%);
  background: var(--gold);
}
.loan-risk__tab:hover { background: var(--cream-dark); }
.loan-risk__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.loan-risk__tab.is-active { background: var(--navy); }
.loan-risk__tab-num {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink-60);
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}
.loan-risk__tab.is-active .loan-risk__tab-num { color: var(--gold-light); }
.loan-risk__tab-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-60);
  transition: color 0.2s;
  flex: 1;
}
.loan-risk__tab.is-active .loan-risk__tab-label { color: var(--white); }
.loan-risk__tab-arrow {
  font-size: 14px;
  color: var(--ink-30);
  transition: color 0.2s, transform 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.loan-risk__tab:hover .loan-risk__tab-arrow { color: var(--ink-60); transform: translateX(2px); }
.loan-risk__tab.is-active .loan-risk__tab-arrow { color: var(--gold-light); transform: rotate(90deg); }

/* Panels */
.loan-risk__panels { position: relative; }
.loan-risk__panel {
  display: none;
  background: var(--navy);
  padding: 48px 40px;
  animation: fadePlain 0.25s ease both;
}
.loan-risk__panel.is-active { display: block; }
.loan-risk__panel-num {
  display: block;
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 8px;
}
.loan-risk__panel h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.2;
}
.loan-risk__panel p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.75;
  max-width: 560px;
}

/* ── Loan Gallery ──────────────────────────────────────── */
.loan-gallery { background: var(--cream-dark); padding: 0; }
.loan-gallery__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 4px;
  max-height: 520px;
}
.loan-gallery__main,
.loan-gallery__sub {
  overflow: hidden;
}
.loan-gallery__main { max-height: 520px; }
.loan-gallery__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.loan-gallery__sub { max-height: 258px; }
.loan-gallery__main img,
.loan-gallery__sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.loan-gallery__main:hover img,
.loan-gallery__sub:hover img { transform: scale(1.03); }

/* ── Loan Waitlist ─────────────────────────────────────── */
.loan-waitlist { background: var(--cream); padding: 80px 48px; }
.loan-waitlist__inner { max-width: var(--max); margin: 0 auto; }
.loan-waitlist__head { max-width: 620px; margin-bottom: 48px; }
.loan-waitlist__head .eyebrow { margin-bottom: 14px; }
.loan-waitlist__heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 16px;
}
.loan-waitlist__intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-60);
  line-height: 1.75;
}
.loan-waitlist__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(15,30,60,0.08);
  margin-bottom: 40px;
}
.loan-waitlist__card {
  background: var(--white);
  padding: 36px 32px 40px;
}
.loan-waitlist__card::before {
  content: '';
  display: block;
  width: 32px; height: 2px;
  background: var(--gold);
  margin-bottom: 20px;
}
.loan-waitlist__card .eyebrow { margin-bottom: 12px; }
.loan-waitlist__card h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 12px;
}
.loan-waitlist__card p {
  font-size: 14px;
  color: var(--ink-60);
  line-height: 1.75;
}
.loan-waitlist__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.loan-waitlist__note {
  font-size: 11px;
  color: var(--ink-30);
  letter-spacing: 0.02em;
}

/* ── Responsive: Loan blocks ───────────────────────────── */
@media (max-width: 1024px) {
  .loan-overview__inner { grid-template-columns: 1fr; gap: 0; }
  .loan-overview__image { height: 300px; }
  .loan-process__grid { grid-template-columns: repeat(2, 1fr); }
  .loan-risk__tabs { grid-template-columns: repeat(2, 1fr); }
  .loan-gallery__grid { grid-template-columns: 1fr; max-height: none; }
  .loan-gallery__main { max-height: 340px; }
  .loan-gallery__stack { grid-template-rows: auto auto; }
  .loan-gallery__sub { max-height: 220px; }
}
@media (max-width: 768px) {
  .loan-hero { padding: 123.5px 24px 60px; }
  .loan-hero__actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .loan-overview,
  .loan-process,
  .loan-risk,
  .loan-waitlist { padding-left: 24px; padding-right: 24px; }
  .loan-process__grid { grid-template-columns: 1fr; }
  .loan-risk__tabs { grid-template-columns: 1fr 1fr; }
  .loan-risk__panel { padding: 32px 24px; }
  .loan-waitlist__cards { grid-template-columns: 1fr; }
  .loan-waitlist__actions { flex-direction: column; align-items: flex-start; }
  .loan-gallery__main { max-height: 260px; }
  .loan-gallery__sub { max-height: 180px; }
}

/* ── Animations ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadePlain {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim { opacity: 0; }
.anim.is-visible { animation: fadeUp 0.65s var(--ease) forwards; }
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.22s; }
.anim-delay-3 { animation-delay: 0.34s; }
.anim-delay-4 { animation-delay: 0.46s; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero { padding: 112px 40px 72px; }
  .hero__top { grid-template-columns: 1fr; gap: 48px; }
  .hero__hook { max-width: 640px; }
  .hero__media { max-width: 560px; }
  .hero-calc { padding: 72px 40px; margin-bottom: 40px; }
  .hero-calc__inner { grid-template-columns: 1fr; gap: 36px; }
  .track-record__inner { grid-template-columns: 1fr; gap: 48px; }
  .approach__head { grid-template-columns: 1fr; gap: 24px; }
  .approach__cards { grid-template-columns: 1fr; }
  .process__inner { grid-template-columns: 1fr; }
  .process__sidebar { position: static; }
  .projects__grid { grid-template-columns: 1fr; }
  .projects--simple .projects__head { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .header-inner { padding: 0 24px; }
  .hero { padding: 100px 24px 64px; }
  .hero-calc { padding: 56px 24px; margin-bottom: 28px; }
  .track-record, .approach, .process, .projects, .contact-band, .site-footer { padding-left: 24px; padding-right: 24px; }
  .stat-strip { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ── Page Header (inner pages) ─────────────────────────── */
.page-header {
  background: var(--navy);
  padding: 139.5px 48px 76px;
}
.page-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* With a photograph the header splits text | image, matching the front-page
   hero. The text column keeps its own vertical stacking, so the image sits
   beside the whole block rather than becoming a third column that strands the
   lead paragraph next to empty space. */
.page-header--with-image .page-header__inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}
.page-header--with-image .page-header__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
}
.page-header__figure {
  flex: 0 0 340px;
  overflow: hidden;
  border: 0.5px solid rgba(255,255,255,0.12);
  line-height: 0;
}
.page-header__figure img { width: 100%; height: auto; display: block; }
.page-header .eyebrow {
  color: var(--gold);
  opacity: 0.85;
}
.page-header__heading {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.2;
  max-width: 660px;
}
.page-header__heading em {
  font-style: italic;
  color: var(--gold-light);
}
.page-header__lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 660px;
}
/* The split header is a desktop arrangement only. Below this the fixed 340px
   figure would crush the text column, so the two stack and the image becomes
   fluid with a ceiling rather than a fixed track. */
@media (max-width: 960px) {
  .page-header--with-image .page-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }
  .page-header__figure {
    flex: 0 0 auto;
    width: 100%;
    max-width: 340px;
  }
}
@media (max-width: 768px) {
  .page-header { padding: 123.5px 24px 60px; }
  .page-header__heading { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .page-header--with-image .page-header__inner { gap: 28px; }
}

/* ── Legal / policy content (data handling, terms, etc.) ── */
.legal-content { background: var(--white); padding: 72px 48px 96px; }
.legal-content__inner { max-width: 720px; margin: 0 auto; }
.legal-content__inner h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
  margin-top: 48px;
  margin-bottom: 14px;
}
.legal-content__inner h2:first-child { margin-top: 0; }
.legal-content__inner h3 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
  margin-top: 28px;
  margin-bottom: 8px;
}
.legal-content__inner p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink-60);
  margin-bottom: 16px;
}
.legal-content__inner ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
  list-style: disc;
}
.legal-content__inner li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink-60);
  margin-bottom: 6px;
}
.legal-content__inner a { color: var(--gold-ink); border-bottom: 1px solid rgba(126,97,30,0.35); }
.legal-content__inner a:hover { border-color: var(--gold-ink); }
.legal-content__publisher {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 0.5px solid rgba(15,30,60,0.10);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.legal-content__publisher h3 { margin-top: 0; }
.legal-content__publisher p { margin-bottom: 4px; font-size: 0.9rem; }
@media (max-width: 640px) {
  .legal-content { padding: 56px 24px 72px; }
  .legal-content__publisher { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Loan Security ──────────────────────────────────────── */
.loan-security {
  background: var(--navy);
  padding: 96px 48px;
}
.loan-security__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.loan-security__head {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eyebrow--gold {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.loan-security__heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
}
.loan-security__intro {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.68);
}
.loan-security__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.loan-security__pillar {
  background: rgba(255,255,255,0.05);
  border-top: 2px solid var(--gold);
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loan-security__pillar h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--white);
}
.loan-security__pillar p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
}
.loan-security__package {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.loan-security__package-heading {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.loan-security__package-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 0;
}
.loan-security__package-list li {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  padding-left: 18px;
  position: relative;
}
.loan-security__package-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
@media (max-width: 960px) {
  .loan-security__pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .loan-security { padding: 72px 24px; }
  .loan-security__pillars { grid-template-columns: 1fr; gap: 1px; }
}

/* ── Borrower Criteria ──────────────────────────────────── */
.borrower-criteria {
  background: var(--cream);
  padding: 96px 48px;
}
.borrower-criteria__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.borrower-criteria__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}
.borrower-criteria__head-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.borrower-criteria__heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.25;
}
.borrower-criteria__lead {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-60);
  max-width: 480px;
}
.borrower-criteria__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.borrower-criteria__card {
  background: var(--white);
  border-top: 2px solid var(--gold);
  padding: 32px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.borrower-criteria__card-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--gold-ink);
  line-height: 1;
}
.borrower-criteria__card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--navy);
}
.borrower-criteria__card p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-60);
}
@media (max-width: 960px) {
  .borrower-criteria__head { grid-template-columns: 1fr; }
  .borrower-criteria__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .borrower-criteria { padding: 72px 24px; }
  .borrower-criteria__grid { grid-template-columns: 1fr; }
}

/* ── Borrower Process ───────────────────────────────────── */
.borrower-process {
  background: var(--white);
  padding: 96px 48px;
}
.borrower-process__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.borrower-process__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
}
.borrower-process__heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.25;
}
.borrower-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  counter-reset: steps;
}
.borrower-process__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--navy-pale);
}
.borrower-process__step-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.borrower-process__step h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--navy);
}
.borrower-process__step p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-60);
}
.borrower-process__checklist {
  background: var(--navy);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.borrower-process__checklist-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.borrower-process__checklist-head h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--white);
}
.borrower-process__checklist-head p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
}
.borrower-process__checklist-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-column: 2;
  grid-row: 1;
}
.borrower-process__checklist-list li {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.borrower-process__checklist-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.borrower-process__checklist .btn-primary {
  grid-column: 1;
  align-self: end;
  width: fit-content;
}
@media (max-width: 960px) {
  .borrower-process__steps { grid-template-columns: 1fr 1fr; }
  .borrower-process__checklist { grid-template-columns: 1fr; }
  .borrower-process__checklist-list { grid-column: 1; grid-row: auto; }
  .borrower-process__checklist .btn-primary { grid-column: 1; }
}
@media (max-width: 768px) {
  .borrower-process { padding: 72px 24px; }
  .borrower-process__steps { grid-template-columns: 1fr; gap: 24px; }
  .borrower-process__checklist { padding: 40px 28px; }
}

/* ── Projects Summary ───────────────────────────────────── */
.projects-summary {
  background: var(--white);
  padding: 72px 48px;
  border-bottom: 1px solid var(--cream-dark);
}
.projects-summary__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.projects-summary__head { display: flex; flex-direction: column; gap: 10px; }
.projects-summary__period {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  color: var(--navy);
}
.projects-summary__metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--cream-dark);
}
.projects-summary__metric {
  background: var(--cream);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* "Rente p.a. (realiseret)" wraps to two lines while the other five labels
     do not, which would drop its value below the rest of the row. Pinning the
     values to the bottom keeps them on one baseline whatever the label does. */
  justify-content: space-between;
}
.projects-summary__metric span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.projects-summary__metric strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--navy);
}
.projects-summary__note {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 720px;
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}
.projects-summary__disclaimer {
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--ink-30);
  font-style: italic;
  max-width: 620px;
  margin-top: -18px;
  opacity: 0.8;
}

/* align-items matters here: a flex row defaults to stretch, which makes the
   ghost link as tall as the solid button beside it and drops its underline to
   the bottom of that stretched box, well clear of its own text. */
.projects-summary__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 960px) {
  .projects-summary__metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .projects-summary { padding: 56px 24px; }
  .projects-summary__metrics { grid-template-columns: 1fr 1fr; }
}

/* ── Projects List ──────────────────────────────────────── */
.projects-list {
  background: var(--cream);
  padding: 80px 48px;
}
.projects-list__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.projects-list__head { display: flex; flex-direction: column; gap: 10px; }
.projects-list__heading {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 400;
  color: var(--navy);
}
.projects-list__rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── Legend ─────────────────────────────────────────────── */
.projects-list__legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-60);
}
.legend-item::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-item--over::before     { background: #1A5C1A; }
.legend-item--expected::before { background: var(--navy-mid); }
.legend-item--under::before    { background: #C0451A; }
.legend-note {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--ink-30);
  font-style: italic;
}

/* ── Project Row — accordion ────────────────────────────── */
.project-row {
  background: var(--white);
  border-bottom: 1px solid var(--cream-dark);
}
.project-row:first-child { border-top: 1px solid var(--cream-dark); }

/* Summary button — always-visible row */
.project-row__summary {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 36px 1fr auto auto 24px;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.project-row__summary:hover { background: var(--cream); }
.project-row__summary[aria-expanded="true"] { background: var(--cream); }

/* Translucent image — left side of header row */
.project-row__bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40%;
  object-fit: cover;
  object-position: center;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
  mask-image: linear-gradient(to right, black 20%, transparent 100%);
  pointer-events: none;
  transition: opacity 0.2s;
}
.project-row__summary:hover .project-row__bg { opacity: 0.25; }

.project-row__num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--navy-mid);  /* was navy-pale — much more readable */
  font-weight: 400;
  position: relative;
}
.project-row__name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--navy);
  position: relative;
}
.project-row__pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
}
.project-row__return {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  min-width: 72px;
  text-align: right;
  flex-shrink: 0;
  position: relative;
}
.project-row__return--over     { color: #1A5C1A; }
.project-row__return--under    { color: #C0451A; }
.project-row__return--expected { color: var(--navy); }

.project-row__chevron {
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
}
.project-row__chevron::before,
.project-row__chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 1.5px;
  background: var(--navy);
  transition: transform 0.3s var(--ease);
}
.project-row__chevron::before { left: 0;  transform: translateY(-50%) rotate(45deg); }
.project-row__chevron::after  { right: 0; transform: translateY(-50%) rotate(-45deg); }
.project-row__summary[aria-expanded="true"] .project-row__chevron::before { transform: translateY(-50%) rotate(-45deg); }
.project-row__summary[aria-expanded="true"] .project-row__chevron::after  { transform: translateY(-50%) rotate(45deg); }

/* Status pills */
.project-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--navy-pale);
  color: var(--navy);
}
.project-pill--over     { background: #D6EDD6; color: #1A5C1A; }
.project-pill--under    { background: #FAE5D3; color: #7A2F10; }
.project-pill--expected { background: #E8EDF5; color: #1A2E52; }

/* Detail panel — max-height animation */
.project-row__detail {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-top: 0px solid var(--cream-dark);
}
.project-row__detail[style*="max-height: 0"] { border-top-width: 0; }
.project-row__summary[aria-expanded="true"] + .project-row__detail { border-top-width: 1px; }

/* Detail panel inner layout */
.project-row__detail-inner {
  display: block;
}
.project-row__detail-inner--has-image {
  display: grid;
  grid-template-columns: 280px 1fr;
}
.project-row__detail-image {
  padding: 20px;
  background: var(--white);
}
.project-row__detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  overflow: hidden;
}
.project-row__detail-body {
  display: flex;
  flex-direction: column;
}

/* Metrics strip */
.project-row__metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--cream-dark);
}
.project-row__metric-cell {
  background: var(--cream);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-row__metric-cell--accent { background: var(--navy); }

.project-metric-label {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.project-row__metric-cell--accent .project-metric-label { color: rgba(255,255,255,0.5); }

.project-metric-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.project-row__metric-cell--accent .project-metric-value { color: var(--white); }
.project-metric-agreed { color: var(--ink-60); font-weight: 400; }
.project-metric-arrow  { color: var(--ink-30); font-size: 0.8rem; }
.project-metric-large  { font-size: 1.1rem; }

.project-metric-realized--over     { color: #1A5C1A; }
.project-metric-realized--under    { color: #C0451A; }
.project-metric-realized--expected { color: var(--navy); }
.project-row__metric-cell--accent .project-metric-realized--over  { color: #7DD87D; }
.project-row__metric-cell--accent .project-metric-realized--under { color: #F4A07A; }

.project-row__description {
  padding: 16px 24px 22px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--ink-60);
}

@media (max-width: 960px) {
  .project-row__summary { grid-template-columns: 30px 1fr auto 20px; }
  .project-row__return  { display: none; }
  .project-row__metrics { grid-template-columns: repeat(3, 1fr); }
  .legend-note          { display: none; }
  .project-row__detail-inner--has-image { grid-template-columns: 200px 1fr; }
}
@media (max-width: 768px) {
  .projects-list { padding: 56px 24px; }
  .project-row__summary { grid-template-columns: 26px 1fr 20px; padding: 14px 16px; gap: 10px; }
  .project-row__pills   { display: none; }
  .project-row__metrics { grid-template-columns: 1fr 1fr; }
  .project-row__metric-cell--accent:last-child { grid-column: span 2; }
  .projects-list__legend { gap: 14px; }
  .project-row__detail-inner--has-image { grid-template-columns: 1fr; }
  .project-row__detail-image { aspect-ratio: 16/7; }
}

/* ── Contact Main ───────────────────────────────────────── */
.contact-main {
  background: var(--white);
  padding: 80px 48px;
}
.contact-main__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: start;
}
.contact-main__invite {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 88px;
  align-self: start;
}
.contact-main__invite-head { display: flex; flex-direction: column; gap: 12px; }
.contact-main__invite-heading {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.25;
}
.contact-main__invite-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-60);
}

/* Mail-client button (replaced the form — ticket 04) */
.contact-main__actions { display: flex; align-items: center; }
.contact-main__invite-note {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-60);
}

/* Right: unified navy card */
.contact-main__info-card {
  background: var(--navy);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contact-main__portrait {
  width: 100%;
  height: 300px;
  overflow: hidden;
  flex-shrink: 0;
}
.contact-main__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.contact-main__card-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact-main__company,
.contact-main__help {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-main__company h3,
.contact-main__help h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--white);
}
.contact-main__company address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-main__company address p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.contact-main__company address a {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
.contact-main__company address a:hover { color: var(--gold-light); }
.contact-main__help { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 28px; }
.contact-main__help ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-main__help ul li {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.contact-main__help ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.contact-main__help-note {
  font-size: 0.83rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.60);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
.contact-main__trust {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .contact-main__inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-main__info-card { display: grid; grid-template-columns: 320px 1fr; }
  .contact-main__portrait { height: 100%; min-height: 280px; }
  .contact-main__invite { position: static; }
}
@media (max-width: 768px) {
  .contact-main { padding: 64px 24px; }
  .contact-main__info-card { display: flex; flex-direction: column; }
  .contact-main__portrait { height: 260px; }
}

/* ── Contact: team link ─────────────────────────────────── */
.contact-main__team-link {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gold-light);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.contact-main__team-link:hover { color: var(--white); }

/* ── Team Values ────────────────────────────────────────── */
.team-values {
  background: var(--cream);
  padding: 88px 48px;
}
.team-values__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.team-values__head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.team-values__heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.25;
}
.team-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.team-values__card {
  background: var(--white);
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 2px solid var(--gold);
}
.team-values__card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--navy);
}
.team-values__card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-60);
}
@media (max-width: 960px) { .team-values__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .team-values { padding: 64px 24px; }
  .team-values__grid { grid-template-columns: 1fr; }
}

/* ── Team Profiles ──────────────────────────────────────── */
.team-profiles {
  background: var(--white);
  padding: 88px 48px;
}
.team-profiles__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.team-profiles__head { display: flex; flex-direction: column; gap: 12px; }
.team-profiles__heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 400;
  color: var(--navy);
}
.team-profiles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 36px;
}
.team-profiles__card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.team-profiles__photo {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--navy-pale);
  position: relative;
  margin-bottom: 20px;
}
.team-profiles__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.team-profiles__photo--empty { background: var(--navy-pale); }
.team-profiles__card-body { display: flex; flex-direction: column; gap: 8px; }
.team-profiles__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.team-profiles__card-body h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 4px;
}
.team-profiles__card-body p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--ink-60);
}

/* Partners */
.team-profiles__partners {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--cream-dark);
}
.team-profiles__partners-head { display: flex; flex-direction: column; gap: 10px; }
.team-profiles__partners-heading {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 400;
  color: var(--navy);
}
.team-profiles__partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.team-profiles__partner-card {
  background: var(--cream);
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 2px solid var(--gold);
}
.team-profiles__partner-card h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--navy);
}
.team-profiles__partner-card p { font-size: 0.9rem; line-height: 1.7; color: var(--ink-60); }

/* A trailing card left alone on its own row (4, 7, 10 … members) is centred.
   Dormant at 6 members, where the grid is two full rows of three. */
.team-profiles__grid > .team-profiles__card:last-child:nth-child(3n - 2) {
  grid-column: 2;
}

@media (max-width: 960px) {
  .team-profiles__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .team-profiles__grid > .team-profiles__card:last-child:nth-child(3n - 2) { grid-column: auto; }
}
@media (max-width: 768px) {
  .team-profiles { padding: 64px 24px; }
  .team-profiles__grid { grid-template-columns: 1fr; gap: 40px; }
  .team-profiles__partners-grid { grid-template-columns: 1fr; }
}

/* ── Section photography ─────────────────────────────────
   Three optional, ACF-driven photographs that break up the
   text-heaviest sections. Every rule here is scoped to a
   --with-figure modifier or to the figure itself, so with the field
   left empty each section renders exactly as it did before.

   Hairlines follow the language already in use: rgba(255,255,255,0.12)
   on navy, as .hero__media, and rgba(15,30,60,0.08) on light
   surfaces, as .stat-strip.

   The two portraits are 1714×2400 and are shown at their native
   aspect ratio — no forced crop box, so no risk of trimming a head
   or a pair of feet. Only the landscape is cropped, and gently. */

/* Låntagere — standing portrait beside the four process steps.
   The steps drop from four across to two-by-two so the column beside
   the photograph stays wide enough to read. */
.borrower-process__body { display: contents; }

/* Rådgivning — seated portrait as a third column in the section head.
   Bottom-aligned with the title and the intro, which sit to its left. */
/* No image: the wrapper is transparent to the grid, so the title and intro
   remain the two columns they have always been. */
.approach__head-text { display: contents; }

/* With an image: text becomes one real column, stacked, beside the portrait.
   Centred rather than bottom-aligned — an end-aligned three-column version of
   this left a large void above the intro. */
.approach__head--with-figure {
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: center;
}
.approach__head--with-figure .approach__head-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.approach__figure {
  margin: 0;
  overflow: hidden;
  background: var(--cream-dark);
  border: 0.5px solid rgba(15,30,60,0.08);
}
.approach__figure img {
  display: block;
  width: 100%;
  height: auto;
}


/* Collapses at 1024px, not 960px, to match .approach__head's own breakpoint
   and the cards below it. Between the two widths the head was still two
   columns while everything under it had already gone single — which is what
   made the tablet view look wrong. */
@media (max-width: 1024px) {
  .approach__head--with-figure { grid-template-columns: 1fr; gap: 32px; }
  .approach__figure { max-width: 340px; }
}