/* ==========================================================================
   Nordstille — marketing site (DK)
   One file. All selectors for the four-page walkthrough.
   Tokens come from ../../colors_and_type.css.
   ========================================================================== */

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Page shell */
.m-page { min-height: 100vh; display: flex; flex-direction: column; }
.m-container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* ---- Header ------------------------------------------------------------- */
.m-header { border-bottom: 1px solid var(--border-hairline); background: var(--paper); position: sticky; top: 0; z-index: 10; }
.m-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.m-wm { display: block; line-height: 1; }
.m-nav { display: flex; gap: 40px; }
.m-nav a { font-size: 13px; color: var(--ink-60); transition: color var(--dur-micro) var(--ease); cursor: pointer; }
.m-nav a:hover { color: var(--ink); }
.m-nav a.is-active { color: var(--ink); }

/* ---- Hero --------------------------------------------------------------- */
.m-hero { padding: 112px 0 120px; border-bottom: 1px solid var(--border-hairline); }
.m-kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 40px; }
.m-display { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.25rem, 6vw + 0.5rem, 6.5rem); line-height: 0.98; letter-spacing: -0.025em; max-width: 14ch; text-wrap: balance; }
.m-display em { font-style: italic; font-weight: 400; color: var(--fjord); }
.m-hero__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; margin-top: 80px; align-items: end; }
.m-hero__lead { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; color: var(--ink-60); max-width: 44ch; }
.m-hero__cta { display: flex; gap: 12px; justify-self: end; }

/* Hero foto-anker — Kate 18/5-2026 anbefaling A (vej i golden hour, antyder rute).
   Full-bleed v3 18/5 (Lasse-godkendt): bryder ud af m-container for at matche
   m-atmosphere-rytmen på sub-sider. Drop border-radius — full-bleed har ikke kant. */
.m-hero__media {
  margin-top: 64px;
  margin-left: calc(-50vw + 50%);
  width: 100vw;
  max-width: 100vw;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--sand);
}
.m-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(0.85) brightness(0.97); }
@media (max-width: 768px) {
  .m-hero__media { margin-top: 48px; aspect-ratio: 4/3; }
}

/* Buttons */
.m-btn { font-family: var(--font-sans); font-weight: 500; font-size: 14px; padding: 14px 22px; border-radius: 2px; border: 1px solid transparent; line-height: 1; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.m-btn--primary { background: var(--fjord); color: var(--paper); border-color: var(--fjord); }
.m-btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.m-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink-20); }
.m-btn--secondary:hover { border-color: var(--ink); }

/* ---- Sections ----------------------------------------------------------- */
.m-section { padding: 112px 0; border-bottom: 1px solid var(--border-hairline); }
.m-section__head { display: grid; grid-template-columns: 220px 1fr; gap: 48px; margin-bottom: 72px; align-items: baseline; }
.m-section__label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); }
.m-section__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 2.5vw + 0.5rem, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }

/* Houses grid */
/* (Editorial-sektionen fjernet 18/5-2026 — Kate P0.1: ikke i designmanual-reference) */

/* ===== Countdown-blok ===== */
.m-countdown { margin-top: 64px; padding: 28px 0 0; border-top: 1px solid var(--border-hairline); max-width: 560px; }
.m-countdown__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 16px; }
.m-countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 420px; }
.m-countdown__cell { display: flex; flex-direction: column; align-items: flex-start; }
.m-countdown__n { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.m-countdown__u { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60); margin-top: 6px; }
.m-countdown__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-60); margin-top: 14px; }
@media (max-width: 600px) {
  .m-countdown__grid { max-width: none; gap: 12px; }
  .m-countdown__n { font-size: 32px; }
}

/* ===== Mobile breakpoints (tilføjet 25/4-2026 efter Kate-QA) ===== */
@media (max-width: 768px) {
  .m-container { padding: 0 24px; }
  .m-nav {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 12px;
  }
  .m-nav a { font-size: 12px; white-space: nowrap; }
  .m-twocol {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 48px 0;
  }
  .m-twocol__body { max-width: none; }
  .m-houses { grid-template-columns: 1fr !important; gap: 24px; }
  .m-houses-wrap { padding: 0 24px; }
  .m-pagehead h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .m-display { font-size: clamp(2.5rem, 10vw, 4rem); }
  .m-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 480px) {
  .m-footer__grid { grid-template-columns: 1fr; }
  .m-nav { gap: 12px; }
  .m-nav a { font-size: 11px; }
}

/* ===== Pre-launch CTA-blok ===== */
.m-prelaunch-cta { padding: 112px 0; background: var(--sand); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.m-prelaunch-cta h2 em { font-style: italic; font-weight: 400; }

/* 5 huse i én row, max-width 1320px container — fallback 3+2 ved <1300px, 1-kol mobile.
   Per Kate P0.4 anbefaling 18/5-2026.
   Container-bredden udvides her separat fra normal .m-container (1240px). */
.m-houses-wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.m-houses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1300px) {
  .m-houses { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.m-house { display: flex; flex-direction: column; gap: 16px; cursor: pointer; }
/* ──────────────────────────────────────────────────────────────────────
   FARVEBLOK-DISCIPLIN — nordstille (18/5-2026, per Kate P0.3)
   Reference (designmanual) bruger rene farveblokke for hus-billeder.
   ALDRIG fotos med filter-hack (samme foto + filter på flere huse).
   ALDRIG genbrug af foto-filer på tværs af huse.
   Hvis vi får dedikerede fotos af de faktiske huse, kan vi genintroducere
   foto MED ensartet filter på alle 5 — men ALDRIG forskelligt per hus.
   ────────────────────────────────────────────────────────────────────── */
.m-house__img { aspect-ratio: 4/5; background-color: var(--skog); position: relative; overflow: hidden; transition: transform var(--dur-layout) var(--ease); }
.m-house:hover .m-house__img { transform: scale(1.01); }
.m-house__img--skoven  { background-color: var(--skog); }       /* #5F6B4E — Sydsverige, nordisk skov-grøn */
.m-house__img--olive   { background-color: var(--sand); }       /* #D9CDB7 — Provence, tør sten/sand */
.m-house__img--havet   { background-color: var(--lav); }        /* #8FA0A0 — Nice, kølig blå-grå (kystby) */
.m-house__img--lake    { background-color: var(--sand-deep); }  /* #C7B99E — Garda, citruslund-toner */
.m-house__img--fjeldet { background-color: var(--fjord); }      /* #3A4A48 — Val di Fassa, bjerg-mørk */

/* Foto overlay på farveblok-fallback (Kate 18/5-2026 — saturate 0.85 brand-disciplin).
   Hvis <img> fejler eller mangler, vises farveblokken som baggrund. */
.m-house__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(0.85) brightness(0.95);
  display: block;
  z-index: 0;
}
/* Når has-photo: gør num + mark-svg mere kontrast-sikre over foto */
.m-house__img.has-photo .m-house__num { color: rgba(244,240,232,0.95); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.m-house__img.has-photo svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }

/* Sydlige huse — tegl-prik som temperatur-signal (per Kate, R7 — apricot udfaset 18/5) */
.m-house--south .m-house__loc { /* prikken renderes inline i jsx; ingen ekstra style nødvendig */ }

/* Hus-nummer + Mark-SVG sidder ovenpå ren farveblok — ingen text-shadow/drop-shadow nødvendig */
.m-house__num { position: absolute; top: 20px; left: 20px; font-family: var(--font-mono); font-size: 11px; color: rgba(244,240,232,0.85); letter-spacing: 0.1em; z-index: 1; }
.m-house__img--olive .m-house__num { color: rgba(28,31,27,0.6); }  /* Provence sand-baggrund kræver mørk tekst */
.m-house__img svg { position: absolute; bottom: 20px; right: 20px; z-index: 1; }
.m-house__meta { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--border-hairline); }
.m-house__name { font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: -0.01em; }
.m-house__loc { font-size: 10px; letter-spacing: 0.12em; color: var(--ink-60); font-weight: 500; }
.m-house__desc { font-size: 14px; line-height: 1.6; color: var(--ink-80); max-width: 36ch; }
.m-house__travel { font-family: var(--font-mono); font-size: 11px; color: var(--ink-60); letter-spacing: 0.04em; padding-top: 8px; }
.m-house__avail { font-family: var(--font-mono); font-size: 11px; color: var(--ink-60); letter-spacing: 0.04em; padding-top: 12px; border-top: 1px solid var(--border-hairline); }

/* Steps (How it works — short version on landing) */
.m-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.m-step { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--ink); padding-top: 20px; }
.m-step__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-60); }
.m-step__title { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; max-width: 14ch; }
.m-step__body { font-size: 14px; line-height: 1.6; color: var(--ink-80); max-width: 30ch; }

/* Manifesto */
.m-manifesto { padding: 128px 0; background: var(--fjord); color: var(--paper); border-bottom: 1px solid var(--border-hairline); }
.m-manifesto .m-section__label { color: rgba(244,240,232,0.55); }
.m-manifesto__body { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 26ch; color: var(--paper); }
.m-manifesto__body em { font-style: italic; color: var(--sand); }
.m-manifesto__sig { font-family: var(--font-sans); font-style: normal; font-size: 12px; letter-spacing: 0.06em; color: rgba(244,240,232,0.55); margin-top: 48px; }

/* FAQ */
.m-faq { border-top: 1px solid var(--border-hairline); }
.m-faq__item { border-bottom: 1px solid var(--border-hairline); padding: 28px 0; cursor: pointer; }
.m-faq__q { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; }
.m-faq__q-text { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; }
.m-faq__toggle { font-family: var(--font-mono); font-size: 20px; color: var(--ink-60); }
.m-faq__a { font-size: 15px; line-height: 1.65; color: var(--ink-80); max-width: 60ch; margin-top: 16px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--dur-layout) var(--ease), opacity var(--dur-layout) var(--ease), margin-top var(--dur-layout) var(--ease); }
.m-faq__item.is-open .m-faq__a { max-height: 400px; opacity: 1; }

/* Footer */
.m-footer { background: var(--ink); color: var(--paper); padding: 96px 0 32px; margin-top: auto; }
.m-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(244,240,232,0.15); }
.m-footer__wm { margin-bottom: 24px; }
.m-footer__wm .m-wm-svg text { fill: var(--paper); }
.m-footer__tagline { font-size: 14px; line-height: 1.6; color: rgba(244,240,232,0.6); max-width: 38ch; }
.m-footer__col { display: flex; flex-direction: column; gap: 12px; }
.m-footer__col-title { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,240,232,0.45); margin-bottom: 8px; }
.m-footer__col a { font-size: 14px; color: rgba(244,240,232,0.75); cursor: pointer; transition: color var(--dur-micro) var(--ease); }
.m-footer__col a:hover { color: var(--paper); }
.m-footer__bottom { display: flex; justify-content: space-between; padding-top: 32px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(244,240,232,0.45); }

/* ==========================================================================
   Extensions for the four-page marketing walkthrough.
   ========================================================================== */

/* Logo in header uses the SVG wordmark instead of plain text, for the literary direction */
.m-wm-svg { height: 22px; width: auto; display: block; }
.m-wm-svg text { font-family: var(--font-display); }

/* Secondary nav — sub-pages */
.m-subnav { border-bottom: 1px solid var(--border-hairline); background: var(--paper); }
.m-subnav__inner { display: flex; gap: 32px; padding: 18px 0; }
.m-subnav a { font-size: 13px; color: var(--ink-60); cursor: pointer; }
.m-subnav a.is-active { color: var(--ink); }
.m-subnav a:hover { color: var(--ink); }

/* Page headers — used on How-it-works, About, Waitlist */
.m-pagehead { padding: 96px 0 72px; border-bottom: 1px solid var(--border-hairline); }
.m-pagehead__kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 20px; }
.m-pagehead h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 4.5vw + 1rem, 5rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; text-wrap: balance; }
.m-pagehead h1 em { font-style: italic; font-weight: 400; color: var(--fjord); }
.m-pagehead__lead { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; color: var(--ink-60); max-width: 52ch; margin-top: 72px; }

/* Two-column editorial block (How it works — long-form) */
.m-twocol { display: grid; grid-template-columns: 280px 1fr; gap: 96px; padding: 72px 0; border-bottom: 1px solid var(--border-hairline); }
.m-twocol__label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); }
.m-twocol__body { max-width: 60ch; }
.m-twocol__body h2 { font-family: var(--font-display); font-weight: 300; font-size: 2rem; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 24px; }
.m-twocol__body p { font-size: 17px; line-height: 1.7; color: var(--ink-80); margin-bottom: 1.2em; max-width: 58ch; }
.m-twocol__body p:last-child { margin-bottom: 0; }
.m-twocol__body em { color: var(--fjord); font-style: italic; }
.m-twocol__body ul { margin: 0 0 1.2em 0; padding: 0; list-style: none; border-top: 1px solid var(--border-hairline); }
.m-twocol__body li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-hairline); font-size: 15px; line-height: 1.55; }
.m-twocol__body li::before { content: ""; display: block; width: 6px; height: 1px; background: var(--ink); margin-top: 11px; }
.m-twocol__body li > * { grid-column: 2; }

/* Detailed how-it-works steps */
.m-bigsteps { }
.m-bigstep { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 64px; padding: 64px 0; border-bottom: 1px solid var(--border-hairline); align-items: start; }
.m-bigstep:last-child { border-bottom: 0; }
.m-bigstep__num { font-family: var(--font-mono); font-size: 13px; color: var(--ink-60); letter-spacing: 0.08em; }
.m-bigstep__title { font-family: var(--font-display); font-weight: 300; font-size: 2rem; letter-spacing: -0.015em; line-height: 1.15; max-width: 16ch; }
.m-bigstep__body p { font-size: 15px; line-height: 1.7; color: var(--ink-80); max-width: 48ch; }
.m-bigstep__body p + p { margin-top: 1em; }

/* Price box on How-it-works */
.m-pricebox { background: var(--paper-deep); padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 72px; border: 1px solid var(--border-hairline); }
.m-pricebox__lead { font-family: var(--font-display); font-weight: 300; font-size: 2rem; letter-spacing: -0.015em; line-height: 1.2; }
.m-pricebox__lead em { font-style: italic; font-weight: 400; color: var(--fjord); }
.m-pricelist { }
.m-priceline { display: grid; grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--border-hairline); font-size: 14px; align-items: baseline; }
.m-priceline:first-child { border-top: 1px solid var(--border-hairline); }
.m-priceline__label { color: var(--ink-80); }
.m-priceline__value { font-family: var(--font-mono); color: var(--ink); font-size: 13px; }
.m-priceline--big .m-priceline__value { font-family: var(--font-display); font-size: 24px; }

/* About — story blocks */
.m-story { padding: 96px 0; border-bottom: 1px solid var(--border-hairline); }
.m-story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.m-story__inner.is-flip { direction: rtl; }
.m-story__inner.is-flip > * { direction: ltr; }
.m-story h3 { font-family: var(--font-display); font-weight: 300; font-size: 2.25rem; letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 24px; max-width: 16ch; }
.m-story h3 em { font-style: italic; font-weight: 400; color: var(--fjord); }
.m-story p { font-size: 16px; line-height: 1.7; color: var(--ink-80); max-width: 54ch; }
.m-story p + p { margin-top: 1em; }
.m-story__img { aspect-ratio: 4/5; background: var(--skog); position: relative; }
.m-story__img--sand { background: var(--sand); }
.m-story__img--lav { background: var(--lav); }
.m-story__img svg { position: absolute; bottom: 24px; left: 24px; }
.m-story__caption { position: absolute; bottom: 24px; right: 24px; font-family: var(--font-mono); font-size: 11px; color: rgba(244, 240, 232, 0.7); letter-spacing: 0.08em; }
.m-story__img--sand .m-story__caption { color: rgba(28, 31, 27, 0.55); }

/* Founders card */
.m-founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; padding: 72px 0; border-bottom: 1px solid var(--border-hairline); }
.m-founder { display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: start; }
.m-founder__portrait { aspect-ratio: 4/5; background: var(--sand); position: relative; }
.m-founder__portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(28,31,27,0.08)); }
.m-founder__name { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
.m-founder__role { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin-top: 6px; }
.m-founder__bio { font-size: 14px; line-height: 1.65; color: var(--ink-80); margin-top: 20px; max-width: 44ch; }

/* Waitlist */
.m-waitlist { padding: 56px 0 96px; }
.m-waitlist__hero { padding: 112px 0 96px; }
.m-waitlist__hero h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 5vw + 1rem, 5.5rem); line-height: 1; letter-spacing: -0.025em; max-width: 18ch; text-wrap: balance; }
.m-waitlist__hero h1 em { font-style: italic; font-weight: 400; color: var(--fjord); }
.m-waitlist__hero p { font-size: 18px; line-height: 1.55; color: var(--ink-60); max-width: 50ch; margin-top: 32px; }
.m-waitlist__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; padding: 72px 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); align-items: start; }
.m-form { display: flex; flex-direction: column; gap: 24px; }
.m-field { display: flex; flex-direction: column; gap: 8px; }
.m-field__label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); }
.m-field__hint { font-size: 12px; color: var(--ink-60); line-height: 1.55; margin-top: 4px; }
.m-input, .m-select, .m-textarea { font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--border-hairline); border-radius: 2px; color: var(--ink); line-height: 1.4; transition: border-color var(--dur-micro, 240ms) ease; }
.m-input:focus, .m-select:focus, .m-textarea:focus { outline: 2px solid var(--fjord); outline-offset: 2px; border-color: var(--fjord); }
.m-textarea { min-height: 96px; resize: vertical; }
.m-radio-row { display: flex; gap: 24px; flex-wrap: wrap; }
.m-radio { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-80); cursor: pointer; }
.m-radio input { accent-color: var(--fjord); }
.m-check-row { display: flex; flex-direction: column; gap: 10px; }
.m-check { display: flex; gap: 12px; font-size: 14px; color: var(--ink-80); align-items: flex-start; cursor: pointer; }
.m-check input { accent-color: var(--fjord); margin-top: 4px; }
.m-submit-row { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.m-submit-note { font-size: 12px; color: var(--ink-60); max-width: 28ch; line-height: 1.5; }

.m-waitlist__side { background: var(--paper-deep); padding: 40px; border: 1px solid var(--border-hairline); }
.m-waitlist__side h4 { font-family: var(--font-display); font-weight: 300; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 20px; }
.m-waitlist__side ul { list-style: none; padding: 0; margin: 0; }
.m-waitlist__side li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border-hairline); font-size: 14px; line-height: 1.55; color: var(--ink-80); }
.m-waitlist__side li:first-child { border-top: 0; }
.m-waitlist__side li strong { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--ink-60); }

/* Testimonial / pull-quote */
.m-pullquote { padding: 96px 0; border-bottom: 1px solid var(--border-hairline); background: var(--paper-deep); }
.m-pullquote__body { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 2.2vw + 0.5rem, 2.25rem); line-height: 1.35; letter-spacing: -0.01em; max-width: 28ch; color: var(--ink); }
.m-pullquote__attrib { margin-top: 40px; display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--ink-60); }
.m-pullquote__rule { width: 40px; height: 1px; background: var(--ink-40); }

/* Screen wrapper so we can label for dom scanning */
.m-screen { min-height: 100vh; }

/* Current openings tally — waitlist */
.m-tally { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); margin-top: 72px; }
.m-tally__cell { padding: 32px 32px 32px 0; border-right: 1px solid var(--border-hairline); }
.m-tally__cell:last-child { border-right: 0; padding-right: 0; }
.m-tally__n { font-family: var(--font-display); font-weight: 300; font-size: 3rem; line-height: 1; letter-spacing: -0.02em; }
.m-tally__label { font-size: 12px; margin-top: 12px; color: var(--ink-60); letter-spacing: 0.06em; text-transform: uppercase; }
.m-tally__sub { font-size: 13px; color: var(--ink-80); margin-top: 8px; line-height: 1.5; }

/* ==========================================================================
   Rejselogistik-sektion (tilføjet 18/5-2026 — Holgers data, Flemming-impl)
   Disciplin: paper-baggrund, samme typografi-rytme som .m-section.
   Mønster: m-section-shell + 5 cards med farveblok-header + 3-kol tabel.
   ========================================================================== */
.m-travel { padding: 112px 0; border-bottom: 1px solid var(--border-hairline); }
.m-travel__head { display: grid; grid-template-columns: 220px 1fr; gap: 48px; margin-bottom: 56px; align-items: baseline; }
.m-travel__lead { font-size: 16px; line-height: 1.6; color: var(--ink-60); max-width: 60ch; margin-top: 16px; }

.m-travel__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 1320px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 1300px) { .m-travel__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 0; } }
@media (max-width: 700px)  { .m-travel__grid { grid-template-columns: 1fr; padding: 0; } }

.m-travel__card { display: flex; flex-direction: column; gap: 14px; }
.m-travel__band { aspect-ratio: 5/2; position: relative; }
.m-travel__band--skoven  { background-color: var(--skog); }
.m-travel__band--olive   { background-color: var(--sand); }
.m-travel__band--havet   { background-color: var(--lav); }
.m-travel__band--lake    { background-color: var(--sand-deep); }
.m-travel__band--fjeldet { background-color: var(--fjord); }
.m-travel__band-num { position: absolute; top: 12px; left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(244,240,232,0.85); }
.m-travel__band--olive .m-travel__band-num { color: rgba(28,31,27,0.6); }
.m-travel__band-name { position: absolute; bottom: 12px; left: 14px; font-family: var(--font-display); font-size: 18px; font-weight: 400; color: rgba(244,240,232,0.95); letter-spacing: -0.01em; }
.m-travel__band--olive .m-travel__band-name { color: rgba(28,31,27,0.85); }
.m-travel__anchor { font-size: 11px; letter-spacing: 0.12em; color: var(--ink-60); font-weight: 500; text-transform: uppercase; padding-top: 4px; border-top: 1px solid var(--border-hairline); }

.m-travel__table { display: grid; grid-template-columns: 1fr; gap: 0; }
.m-travel__row { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-hairline); font-size: 12px; line-height: 1.5; align-items: baseline; }
.m-travel__row:first-child { border-top: 1px solid var(--border-hairline); }
.m-travel__row-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-60); text-transform: uppercase; }
.m-travel__row-value { color: var(--ink-80); }
.m-travel__row-value strong { font-weight: 500; color: var(--ink); }

/* ==========================================================================
   Editorial story-img foto (Kate 18/5-2026)
   ========================================================================== */
.m-story__img { overflow: hidden; }
.m-story__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(0.85) brightness(0.95);
  display: block;
  z-index: 0;
}
.m-story__img.has-photo svg { z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.m-story__img.has-photo .m-story__caption { z-index: 1; color: rgba(244,240,232,0.95); text-shadow: 0 1px 2px rgba(0,0,0,0.45); position: absolute; top: 24px; right: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
.m-story__img--sand.has-photo .m-story__caption { color: rgba(244,240,232,0.95); }
.m-story__img--sand.has-photo svg { filter: drop-shadow(0 1px 2px rgba(255,255,255,0.5)); }

/* ==========================================================================
   Atmosphere editorial band (Kate 18/5-2026 — efter manifest)
   ========================================================================== */
.m-atmosphere {
  position: relative;
  width: 100%;
  height: clamp(360px, 60vh, 640px);
  overflow: hidden;
  border-bottom: 1px solid var(--border-hairline);
}
.m-atmosphere img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(0.85) brightness(0.92);
}
.m-atmosphere__caption {
  position: absolute;
  bottom: 32px; left: 40px;
  display: flex; align-items: baseline; gap: 16px;
  color: rgba(244,240,232,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.m-atmosphere__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.m-atmosphere__label {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  .m-atmosphere__caption { left: 24px; bottom: 24px; }
}

/* ==========================================================================
   Footer foto-credits (Kate 18/5-2026 — best practice, ikke krav)
   ========================================================================== */
.m-footer__credits {
  padding: 32px 0;
  border-bottom: 1px solid rgba(244,240,232,0.12);
}
.m-footer__credits-title {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244,240,232,0.45);
  margin-bottom: 8px;
}
.m-footer__credits-body {
  font-size: 12px; line-height: 1.6;
  color: rgba(244,240,232,0.55);
  max-width: 92ch;
}
.m-footer__credits-body a {
  color: rgba(244,240,232,0.85);
  text-decoration: underline;
  text-decoration-color: rgba(244,240,232,0.25);
}
.m-footer__credits-body a:hover { color: var(--paper); text-decoration-color: var(--paper); }

.m-travel__rec { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-60); padding-top: 10px; border-top: 1px solid var(--border-hairline); line-height: 1.55; }
.m-travel__rec strong { color: var(--ink); font-weight: 500; }

@media (max-width: 768px) {
  .m-travel__head { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   Hero højre-kolonne mono-blok (deadline-info, P0.5 — 18/5-2026)
   ========================================================================== */
.m-hero__mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; line-height: 1.9; color: var(--ink-60); text-transform: uppercase; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-hairline); }
.m-hero__mono strong { font-weight: 400; color: var(--ink); }