/* ==========================================================================
   NORD.LIVING — site.css
   Extracted from index.html (2026-09-21). Cascade order preserved:
   1) main site CSS  2) cookiebar  3) .wa-btn
   @font-face for Josefin Sans stays inline in <head> (critical font path).
   ========================================================================== */

/* ===== BLOCK 1/3 — main site CSS (was <style> #2, index.html lines 38–1521) ===== */
  /* ==========================================================================
     NORD.LIVING — Draft 01 — Single-page journey
     ========================================================================== */

  :root {
    /* --- Brand palette (official names from manual) --- */
    --nl-charred-wood: #292728;   /* Charred Wood — primary dark */
    --nl-forest-deep:  #43442B;   /* Forest Deep  — primary accent */
    --nl-moss:         #939474;   /* Moss */
    --nl-sandstone:    #D0C7B3;   /* Sandstone */
    --nl-fog:          #F1F1EC;   /* Fog — primary background */

    /* --- Extended/legacy palette aliases (used in details) --- */
    --nl-cedar:    var(--nl-charred-wood);
    --nl-rifle:    var(--nl-forest-deep);
    --nl-oyster:   var(--nl-moss);
    --nl-kangaroo: var(--nl-sandstone);
    --nl-merino:   var(--nl-fog);
    --nl-wren:     #4B4139;
    --nl-bronze:   #907B60;
    --nl-pelican:  #C1B6AE;
    --nl-cream:    #E9D9C7;
    --nl-bone:     #F0EEE9;

    --bg: var(--nl-merino);
    --bg-inverse: var(--nl-cedar);
    --bg-warm: var(--nl-kangaroo);
    --surface: #ffffff;
    --ink: var(--nl-cedar);
    --ink-muted: #6b6a63;
    --ink-inverse: var(--nl-merino);
    --accent: var(--nl-rifle);
    --line: rgba(41, 39, 40, 0.12);
    --line-strong: rgba(41, 39, 40, 0.28);

    --font-display: 'Josefin Sans', system-ui, sans-serif;
    --font-body: 'Josefin Sans', system-ui, sans-serif;

    --ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-fast: 180ms;
    --t-base: 420ms;
    --t-slow: 900ms;

    --nav-h: 80px;
    --maxw: 1360px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.08;
    color: var(--ink);
  }
  h1 em, h2 em, h3 em { font-weight: 300; font-style: italic; color: var(--accent); }
  body { font-weight: 400; }

  .container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
  .section { padding: 140px 0; position: relative; }
  .section--tight { padding: 96px 0; }
  .section--dark { background: var(--bg-inverse); color: var(--ink-inverse); }
  .section--dark h1,
  .section--dark h2,
  .section--dark h3 { color: var(--ink-inverse); }
  .section--warm { background: var(--bg-warm); }

  .eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
    position: relative;
    padding-left: 40px;
  }
  .eyebrow::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 28px; height: 1px;
    background: var(--accent);
  }
  .section--dark .eyebrow { color: var(--nl-kangaroo); }
  .section--dark .eyebrow::before { background: var(--nl-kangaroo); }

  /* --- Buttons ---------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: all var(--t-base) var(--ease-premium);
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
  }
  .btn--primary { background: var(--nl-cedar); color: var(--nl-merino); }
  .btn--primary:hover { background: var(--nl-rifle); transform: translateY(-2px); box-shadow: 0 20px 40px rgba(41,39,40,0.25); }
  .btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
  .btn--ghost:hover { background: var(--nl-cedar); color: var(--nl-merino); border-color: var(--nl-cedar); }
  .btn--accent { background: var(--nl-kangaroo); color: var(--nl-cedar); }
  .btn--accent:hover { background: var(--nl-cream); transform: translateY(-2px); }
  .btn .arrow { transition: transform var(--t-base) var(--ease-premium); }
  .btn:hover .arrow { transform: translateX(4px); }

  /* --- Reveal on scroll ------------------------------------------------- */
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--t-slow) var(--ease-premium),
                transform var(--t-slow) var(--ease-premium);
  }
  .reveal.in { opacity: 1; transform: none; }
  .reveal--delay-1 { transition-delay: 120ms; }
  .reveal--delay-2 { transition-delay: 240ms; }
  .reveal--delay-3 { transition-delay: 360ms; }
  .reveal--delay-4 { transition-delay: 480ms; }

  /* =========================================================================
     NAV
     ========================================================================= */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 100;
    display: flex; align-items: center;
    padding: 0 32px;
    transition: background var(--t-base) var(--ease-premium),
                backdrop-filter var(--t-base) var(--ease-premium),
                box-shadow var(--t-base);
  }
  .nav.scrolled {
    background: rgba(241, 241, 236, 0.86);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 1px 0 var(--line);
  }
  .nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--maxw); margin: 0 auto; }
  .nav__logo {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 0.06em;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  .nav__logo .mark {
    display: inline-block;
    width: 38px;
    height: auto;
    color: var(--nl-charred-wood);
    flex-shrink: 0;
  }
  .nav__logo .mark svg { width: 100%; height: auto; display: block; }
  .nav__logo-img { height: 46px; width: auto; display: block; }
  .nav__logo .wordmark { display: inline-flex; flex-direction: column; line-height: 1; gap: 3px; }
  .nav__logo .wordmark .word { font-size: 19px; font-weight: 400; letter-spacing: 0.06em; }
  .nav__logo .wordmark .sub { font-size: 9px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--nl-moss); font-weight: 400; padding-top: 2px; border-top: 1px solid var(--line); }
  .nav__links { display: flex; gap: 36px; }
  .nav__links a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; transition: color var(--t-base); }
  .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--accent); transition: width var(--t-base) var(--ease-premium); }
  .nav__links a:hover { color: var(--accent); }
  .nav__links a:hover::after { width: 100%; }
  .nav__cta { }
  .nav__cta .btn { padding: 12px 22px; font-size: 11px; }

  @media (max-width: 960px) {
    .nav__links { display: none; }
  }
  @media (max-width: 640px) {
    /* mobile: keep the configure CTA inside the viewport — no lateral overflow */
    .nav__logo-img { height: 28px; max-width: 128px; object-fit: contain; }
    .nav__logo { gap: 8px; }
    .nav__logo .wordmark .word { font-size: 14px; }
    .nav__logo .wordmark .sub { font-size: 6.5px; letter-spacing: 0.26em; }
    .nav__cta .btn { padding: 8px 10px; font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }
    .nav__inner { gap: 8px; }
    .footer__links { flex-wrap: wrap; row-gap: 10px; }
    .modal__card { max-width: calc(100vw - 28px); }
  }

  /* =========================================================================
     HERO
     ========================================================================= */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: var(--nav-h);
  }
  .hero__bg {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(41,39,40,0.38) 0%, rgba(41,39,40,0.5) 55%, rgba(41,39,40,0.72) 100%),
      url('../img/hero.webp') center / cover no-repeat,
      linear-gradient(135deg, #5a6a54 0%, #2a2e24 40%, #1a1814 100%);
    z-index: 0;
  }
  .hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  /* gradient overlay above the video, below the content */
  .hero__bg::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(41,39,40,0.38) 0%, rgba(41,39,40,0.5) 55%, rgba(41,39,40,0.72) 100%);
    z-index: 1;
  }
  .hero__bg::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 20%;
    background: linear-gradient(180deg, transparent, var(--bg));
  }
  .hero__pine { display: none; }  /* CSS treeline replaced by real photography */

  /* Aurora borealis — Nordic by nature, animated colour + scroll dynamism */
  .hero__aurora {
    position: absolute; inset: -12%;
    z-index: 1;
    filter: blur(70px) saturate(1.35);
    mix-blend-mode: screen;
    opacity: 0.8;
    pointer-events: none;
    will-change: transform, opacity;
  }
  .hero__aurora-blob {
    position: absolute;
    width: 58vw; height: 58vw;
    min-width: 480px; min-height: 480px;
    border-radius: 50%;
    will-change: transform, opacity;
  }
  .hero__aurora-blob--1 {
    top: -12%; left: -8%;
    background: radial-gradient(circle at 35% 35%, rgba(98, 190, 138, 0.65), transparent 62%);
    animation: aurora-drift-1 16s ease-in-out infinite alternate;
  }
  .hero__aurora-blob--2 {
    top: 4%; right: -14%;
    background: radial-gradient(circle at 60% 40%, rgba(64, 156, 160, 0.55), transparent 60%);
    animation: aurora-drift-2 21s ease-in-out infinite alternate;
  }
  .hero__aurora-blob--3 {
    bottom: -18%; left: 18%;
    background: radial-gradient(circle at 50% 60%, rgba(144, 123, 96, 0.55), transparent 62%);
    animation: aurora-drift-3 18s ease-in-out infinite alternate;
  }
  .hero__aurora-blob--4 {
    top: 26%; left: 34%;
    width: 44vw; height: 44vw;
    background: radial-gradient(circle at 45% 45%, rgba(128, 116, 184, 0.4), transparent 58%);
    animation: aurora-drift-4 24s ease-in-out infinite alternate;
  }
  .hero__aurora-blob--5 {
    bottom: -8%; right: 6%;
    width: 38vw; height: 38vw;
    background: radial-gradient(circle at 55% 50%, rgba(233, 217, 199, 0.5), transparent 60%);
    animation: aurora-drift-5 14s ease-in-out infinite alternate;
  }
  @keyframes aurora-drift-1 {
    from { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.75; }
    50%  { opacity: 1; }
    to   { transform: translate(14vw, 9vh) scale(1.28) rotate(28deg); opacity: 0.65; }
  }
  @keyframes aurora-drift-2 {
    from { transform: translate(0, 0) scale(1.15); opacity: 0.6; }
    50%  { opacity: 0.95; }
    to   { transform: translate(-16vw, 12vh) scale(0.92); opacity: 0.75; }
  }
  @keyframes aurora-drift-3 {
    from { transform: translate(0, 0) scale(0.95); opacity: 0.7; }
    to   { transform: translate(10vw, -12vh) scale(1.3); opacity: 0.5; }
  }
  @keyframes aurora-drift-4 {
    from { transform: translate(0, 0) scale(1); opacity: 0.35; }
    50%  { opacity: 0.7; }
    to   { transform: translate(-9vw, -9vh) scale(1.4); opacity: 0.45; }
  }
  @keyframes aurora-drift-5 {
    from { transform: translate(0, 0) scale(1); opacity: 0.55; }
    to   { transform: translate(-7vw, -14vh) scale(1.2); opacity: 0.8; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__aurora-blob { animation: none; }
  }
  .hero__content { position: relative; z-index: 2; color: var(--nl-merino); padding: 120px 0 160px; }
  .hero__eyebrow {
    color: var(--nl-kangaroo);
    font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
    margin-bottom: 28px;
    display: inline-flex; align-items: center; gap: 14px;
  }
  .hero__eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--nl-kangaroo); }
  .hero h1 {
    font-size: clamp(52px, 7.2vw, 104px);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 0.98;
    color: var(--nl-merino);
    max-width: 1100px;
    margin-bottom: 36px;
  }
  .hero h1 em { font-style: italic; color: var(--nl-kangaroo); font-weight: 400; }
  .hero__sub {
    max-width: 580px;
    font-size: 19px;
    line-height: 1.55;
    color: rgba(241, 241, 236, 0.82);
    margin-bottom: 48px;
    font-weight: 300;
  }
  .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
  .hero__actions .btn--primary { background: var(--nl-merino); color: var(--nl-cedar); }
  .hero__actions .btn--primary:hover { background: var(--nl-kangaroo); }
  .hero__actions .btn--ghost { color: var(--nl-merino); border-color: rgba(241, 241, 236, 0.4); }
  .hero__actions .btn--ghost:hover { background: var(--nl-merino); color: var(--nl-cedar); border-color: var(--nl-merino); }

  .hero__scroll {
    position: absolute;
    bottom: 60px; left: 50%;
    transform: translateX(-50%);
    color: var(--nl-kangaroo);
    font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    writing-mode: vertical-rl;
    z-index: 3;
    animation: bob 2.4s var(--ease-premium) infinite;
  }
  @keyframes bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
  }

  /* =========================================================================
     VALUE STRIP
     ========================================================================= */
  .valuestrip {
    background: var(--bg-inverse);
    color: var(--ink-inverse);
    padding: 80px 0;
  }
  .valuestrip__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }
  .valuestrip__item {
    text-align: center;
    padding: 16px 8px;
    border-left: 1px solid rgba(241, 241, 236, 0.12);
  }
  .valuestrip__item:first-child { border-left: none; }
  .valuestrip__icon {
    width: 40px; height: 40px;
    margin: 0 auto 18px;
    opacity: 0.9;
  }
  .valuestrip__icon svg { width: 100%; height: 100%; stroke: var(--nl-kangaroo); fill: none; stroke-width: 1.4; }
  .valuestrip__label {
    font-size: 13px; font-weight: 500; line-height: 1.4;
    color: var(--nl-merino);
  }

  @media (max-width: 900px) {
    .valuestrip__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .valuestrip__item { border-left: none; }
  }
  @media (max-width: 560px) {
    .valuestrip__grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* =========================================================================
     ABOUT
     ========================================================================= */
  .about__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 72px;
    align-items: stretch;
  }
  .about__visual {
    position: relative;
    min-height: 100%;
    background: var(--nl-rifle);
    border-radius: 2px;
    overflow: hidden;
  }
  @media (min-width: 901px) { .about__visual { aspect-ratio: auto; } }
  .about__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .about__visual::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(41,39,40,0) 55%, rgba(41,39,40,0.45) 100%);
    z-index: 1;
  }
  .about__visual::after {
    content: "";
    position: absolute;
    right: -30px; bottom: -30px;
    width: 55%; height: 55%;
    background: var(--nl-kangaroo);
    z-index: 0;
  }
  .about__label {
    position: absolute; left: 32px; bottom: 32px; z-index: 2;
    color: var(--nl-merino);
    font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
    padding: 10px 18px;
    background: rgba(41, 39, 40, 0.55);
    backdrop-filter: blur(8px);
  }
  .about h2 {
    font-size: clamp(38px, 4.4vw, 64px);
    margin-bottom: 28px;
  }
  .about h2 em { font-style: italic; color: var(--accent); }
  .about__body p { font-size: 17px; color: var(--ink-muted); margin-bottom: 20px; max-width: 540px; }
  .about__meta {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 44px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
  }
  .about__meta-item {
    padding: 6px 4px 8px;
    border-bottom: 2px solid transparent;
    transition: border-color var(--t-base), transform var(--t-base);
    cursor: default;
  }
  .about__meta-item:hover { border-bottom-color: var(--accent); transform: translateY(-4px); }
  .about__meta-item .n {
    font-family: var(--font-display);
    font-size: clamp(30px, 3vw, 42px);
    color: var(--accent);
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .about__meta-item .l { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.35; }
  @media (max-width: 560px) { .about__meta { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; } }

  @media (max-width: 900px) {
    .about__grid { grid-template-columns: 1fr; gap: 60px; }
  }

  /* =========================================================================
     WHY NORD LIVING
     ========================================================================= */
  .why {
    background: var(--nl-rifle);
    color: var(--nl-merino);
  }
  .why h2 { color: var(--nl-merino); }
  .why__grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: center;
  }
  .why__head h2 { font-size: clamp(40px, 4.6vw, 68px); margin-bottom: 24px; }
  .why__head h2 em { color: var(--nl-kangaroo); font-style: italic; }
  .why__head p { font-size: 17px; color: rgba(241,241,236,0.75); max-width: 440px; margin-bottom: 32px; }
  .why__list { display: flex; flex-direction: column; gap: 2px; }
  .why__item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid rgba(241, 241, 236, 0.14);
    transition: padding-left var(--t-base) var(--ease-premium);
  }
  .why__item:first-child { border-top: 1px solid rgba(241, 241, 236, 0.14); }
  .why__item:hover { padding-left: 8px; }
  .why__num {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--nl-kangaroo);
    letter-spacing: 0.1em;
  }
  .why__title { font-size: 18px; font-weight: 400; color: var(--nl-merino); }
  .why__plus {
    width: 22px; height: 22px;
    border: 1px solid rgba(241, 241, 236, 0.4);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: all var(--t-base) var(--ease-premium);
  }
  .why__item:hover .why__plus { background: var(--nl-kangaroo); color: var(--nl-rifle); border-color: var(--nl-kangaroo); transform: rotate(90deg); }

  @media (max-width: 900px) {
    .why__grid { grid-template-columns: 1fr; gap: 40px; }
  }

  /* =========================================================================
     PRODUCTION TIMELINE
     ========================================================================= */
  .production { }
  .production__head { text-align: center; margin-bottom: 80px; }
  .production__head h2 { font-size: clamp(40px, 5vw, 72px); max-width: 900px; margin: 0 auto 20px; }
  .production__head h2 em { font-style: italic; color: var(--accent); }
  .production__head p { color: var(--ink-muted); font-size: 17px; max-width: 620px; margin: 0 auto; }

  .timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }
  .timeline::before {
    content: "";
    position: absolute;
    top: 36px; left: 6%; right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 10%, var(--line-strong) 90%, transparent);
  }
  .step { position: relative; }
  .step__bullet {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--nl-merino);
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--accent);
    position: relative;
    z-index: 1;
    transition: all var(--t-base) var(--ease-premium);
  }
  .step:hover .step__bullet { background: var(--accent); color: var(--nl-merino); border-color: var(--accent); }
  .step__title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
    color: var(--ink);
  }
  .step__copy {
    font-size: 13.5px;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1.55;
  }

  @media (max-width: 900px) {
    .timeline { grid-template-columns: repeat(2, 1fr); gap: 48px; }
    .timeline::before { display: none; }
  }

  /* Process stage viewer — the house grows as you hover steps 01→06 */
  .process__viewer {
    position: relative;
    max-width: 1060px;
    margin: 0 auto 72px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: var(--nl-rifle);
    box-shadow: var(--shadow-lift);
  }
  .process__viewer img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 0.5s ease, transform 5.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .process__viewer img.active { opacity: 1; transform: scale(1); }
  .process__viewer-label {
    position: absolute; left: 20px; bottom: 18px; z-index: 2;
    color: var(--nl-fog);
    background: rgba(41, 39, 40, 0.62);
    backdrop-filter: blur(6px);
    padding: 9px 16px;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  }
  .step { cursor: pointer; }
  .step.active .step__bullet {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--nl-fog);
  }
  @media (prefers-reduced-motion: reduce) {
    .process__viewer img { transition: opacity 0.2s ease; transform: none; }
  }

  /* =========================================================================
     CONIFERIS CASE STUDY
     ========================================================================= */
  .case { background: var(--nl-bone); position: relative; }
  .case__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 90px;
    align-items: center;
  }
  .case__media { position: relative; }
  .case__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--nl-rifle) url('../img/case-luna.webp') center center / cover no-repeat;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: var(--shadow-lift);
  }
  .case__visual::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(41,39,40,0) 45%, rgba(41,39,40,0.6) 100%);
  }
  .case__visual::after { content: none; }
  /* collage of the resort cabins — overlapping frames on desktop/tablet */
  .case__collage {
    position: relative;
    aspect-ratio: 4 / 5.4;
  }
  .case__collage img {
    position: absolute;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 18px 40px rgba(41, 39, 40, 0.28);
    border: 4px solid var(--nl-bone);
  }
  .case__collage img:nth-child(1) { left: 0;   top: 0;    width: 62%; height: 34%; z-index: 2; }
  .case__collage img:nth-child(2) { right: 0;  top: 7%;   width: 46%; height: 26%; z-index: 3; }
  .case__collage img:nth-child(3) { left: 6%;  top: 30%;  width: 48%; height: 30%; z-index: 4; }
  .case__collage img:nth-child(4) { right: 3%; top: 38%;  width: 44%; height: 25%; z-index: 2; }
  .case__collage img:nth-child(5) { left: 0;   bottom: 4%; width: 44%; height: 30%; z-index: 3; }
  .case__collage img:nth-child(6) { right: 8%; bottom: 0; width: 50%; height: 28%; z-index: 5; }
  @media (max-width: 640px) {
    .case__collage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .case__collage img { position: static; width: 100%; height: 130px; border: none; }
  }
  .case__label {
    position: absolute; left: 24px; top: 24px; z-index: 2;
    color: var(--nl-merino);
    font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
    padding: 10px 18px;
    background: rgba(41, 39, 40, 0.55);
    backdrop-filter: blur(8px);
  }
  .case__credit {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 18px;
    text-align: right;
  }
  .case__body h2 {
    font-size: clamp(38px, 4.4vw, 60px);
    margin: 16px 0 28px;
    line-height: 1.05;
  }
  .case__body h2 em { font-style: italic; color: var(--accent); }
  .case__body > p {
    font-size: 17px;
    color: var(--ink-muted);
    margin-bottom: 20px;
    max-width: 560px;
  }
  .case__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .case__stat .n {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--accent);
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .case__stat .l {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.4;
  }
  .case__pullquote {
    margin: 36px 0 32px;
    padding: 28px 32px;
    background: var(--surface);
    border-left: 3px solid var(--accent);
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.45;
    color: var(--ink);
    font-style: italic;
    box-shadow: var(--shadow-soft);
  }
  .case__attribution {
    display: block;
    margin-top: 14px;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .case__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
  }
  .case__note {
    font-size: 13.5px;
    color: var(--ink-muted);
    font-style: italic;
    max-width: 520px;
  }

  @media (max-width: 900px) {
    .case__grid { grid-template-columns: 1fr; gap: 56px; }
    .case__stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  }

  /* =========================================================================
     HERO AS TOUR — sticky scrub viewport, static poster only as fallback
     ========================================================================= */
  .hero--tour { display: block; padding: 0; height: auto; min-height: 100vh; overflow: visible; background: var(--nl-cedar); }
  .hero__sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: var(--nl-cedar) url('../img/hero-poster.webp') center / cover no-repeat; }
  .hero--tour .tour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero--tour .hero__aurora { z-index: 3; }
  .hero--tour .hero__content { z-index: 4; }
  .hero--tour .hero__scroll { z-index: 4; }
  .hero--tour .tour__rail { z-index: 4; }
  #tourOverlay { opacity: 0; transition: opacity 0.45s ease; }

  /* =========================================================================
     LUNA TOUR — scroll-scrubbed cinematic (canvas frame sequence)
     ========================================================================= */
  .tour { position: relative; background: var(--nl-cedar); }
  .tour__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .tour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .tour__vignette {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(41,39,40,0.45) 0%, rgba(41,39,40,0) 24%, rgba(41,39,40,0) 62%, rgba(41,39,40,0.7) 100%);
  }
  .tour__overlay { position: absolute; left: 0; right: 0; bottom: 88px; z-index: 3; color: var(--nl-fog); }
  .tour__eyebrow {
    color: var(--nl-sandstone); font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
    margin-bottom: 12px; display: inline-flex; align-items: center; gap: 14px;
  }
  .tour__eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--nl-sandstone); }
  .tour__caption {
    font-family: var(--font-display); font-style: italic; font-weight: 300;
    font-size: clamp(30px, 3.8vw, 56px); line-height: 1.08; letter-spacing: -0.01em;
  }
  .tour__rail {
    position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; flex-direction: column; gap: 18px;
  }
  .tour__rail-item {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    color: rgba(241,241,236,0.45); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    transition: color 0.3s ease; background: none; border: 0; font-family: var(--font-body); padding: 4px 0;
  }
  .tour__rail-item::after { content: ""; width: 22px; height: 1px; background: currentColor; order: -1; transition: width 0.3s ease; }
  .tour__rail-item.active { color: var(--nl-sandstone); }
  .tour__rail-item.active::after { width: 44px; }
  .tour__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: rgba(241,241,236,0.18); }
  .tour__progress span { display: block; height: 100%; width: 0; background: var(--nl-sandstone); }
  @media (max-width: 768px) {
    .tour__rail { right: 16px; gap: 12px; }
    .tour__rail-item { font-size: 9px; letter-spacing: 0.16em; }
    .tour__rail-item::after { width: 14px; }
    .tour__overlay { bottom: 64px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tour__rail-item, .tour__rail-item::after { transition: none; }
  }
  /* =========================================================================
     CONFIGURATOR
     ========================================================================= */
  .configurator {
    background: var(--nl-cedar);
    color: var(--ink-inverse);
    padding: 120px 0 0;
  }
  .configurator__head { text-align: center; margin-bottom: 60px; padding: 0 32px; }
  .configurator__head .eyebrow { color: var(--nl-kangaroo); }
  .configurator__head .eyebrow::before { background: var(--nl-kangaroo); }
  .configurator__head h2 {
    font-size: clamp(42px, 5.2vw, 76px);
    color: var(--nl-merino);
    margin-bottom: 18px;
    max-width: 880px;
    margin-left: auto; margin-right: auto;
  }
  .configurator__head h2 em { font-style: italic; color: var(--nl-kangaroo); }
  .configurator__head p { color: rgba(241,241,236,0.7); max-width: 640px; margin: 0 auto; font-size: 17px; }

  .configurator__stage {
    display: grid;
    grid-template-columns: 1fr 420px;
    min-height: 720px;
    height: calc(100vh - 80px);
    max-height: 860px;
    position: relative;
  }

  .viewer {
    position: relative;
    background: radial-gradient(ellipse at center, #3b3a3b 0%, #1a1818 80%);
    overflow: hidden;
  }
  .viewer canvas { display: block; width: 100% !important; height: 100% !important; }
  .viewer__hud {
    position: absolute;
    top: 24px; left: 24px;
    display: flex; gap: 8px;
    z-index: 5;
  }
  .viewer__chip {
    padding: 8px 14px;
    background: rgba(241, 241, 236, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(241, 241, 236, 0.15);
    color: var(--nl-merino);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 100px;
  }
  .viewer__controls {
    position: absolute;
    bottom: 24px; left: 24px; right: 24px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 5;
    color: rgba(241, 241, 236, 0.7);
    font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .viewer__hint {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    background: rgba(41,39,40,0.6);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    border: 1px solid rgba(241,241,236,0.1);
  }
  .viewer__hint svg { width: 14px; height: 14px; stroke: var(--nl-kangaroo); fill: none; stroke-width: 1.6; }
  .viewer__fullscreen {
    padding: 10px 14px;
    background: rgba(41,39,40,0.6);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    border: 1px solid rgba(241,241,236,0.1);
    color: var(--nl-merino);
    transition: all var(--t-base);
  }
  .viewer__fullscreen:hover { background: var(--nl-kangaroo); color: var(--nl-cedar); }
  .viewer__interior-nav {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 30;
  }
  .viewer__interior-nav[hidden] { display: none; }
  /* inside the unit the exterior controls row hides so Exit is clickable */
  .viewer--inside .viewer__controls { display: none; }
  /* touch walking D-pad — only on coarse-pointer (touch) devices */
  .viewer__dpad { display: none; }
  @media (pointer: coarse) {
    .viewer__dpad {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      position: absolute; right: 16px; bottom: 64px; z-index: 32;
    }
    .viewer__dpad-row { display: flex; gap: 6px; }
    .viewer__dpad button {
      width: 52px; height: 52px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.35);
      background: rgba(20,20,20,0.45); color: #fff; font-size: 17px;
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      touch-action: none; user-select: none; -webkit-user-select: none;
    }
    .viewer__dpad button:active { background: rgba(67,68,43,0.85); }
  }
  /* zone material swatches: all options on ONE row — they shrink to fit the
     panel width so nothing wraps (only the hovered swatch shows its name, so
     the tighter spacing never collides). */
  .swatches.swatches--zones { gap: 8px; flex-wrap: nowrap; align-items: flex-start; }
  .swatches--zones .swatch {
    position: relative;
    flex: 1 1 0; min-width: 0; max-width: 48px;
    width: auto; height: auto; aspect-ratio: 1 / 1;
  }
  .swatches--zones .swatch:hover { z-index: 30; }

  /* panel */
  .panel {
    background: var(--nl-merino);
    color: var(--nl-cedar);
    overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .panel__tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0;
    background: var(--nl-merino);
    z-index: 2;
  }
  .panel__tab {
    flex: 1;
    padding: 20px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: color var(--t-base);
  }
  .panel__tab.active { color: var(--accent); }
  .panel__tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 20%; right: 20%;
    height: 2px;
    background: var(--accent);
  }
  .panel__body { padding: 32px 28px 200px; flex: 1; }
  .panel__model {
    display: flex; gap: 10px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }
  .panel__model-btn {
    flex: 1;
    padding: 14px 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all var(--t-base);
    text-align: center;
    line-height: 1.3;
  }
  .panel__model-btn span { display: block; font-size: 18px; font-family: var(--font-display); text-transform: none; letter-spacing: 0; margin-bottom: 4px; color: var(--ink); }
  .panel__model-btn.active { background: var(--nl-cedar); color: var(--nl-merino); border-color: var(--nl-cedar); }
  .panel__model-btn.active span { color: var(--nl-kangaroo); }
  .panel__model-btn:hover:not(.active) { border-color: var(--nl-cedar); }
  /* models on top, large — the first decision a visitor makes */
  .panel__models {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--line);
  }
  .panel__models .panel__model-btn { padding: 22px 12px; font-size: 11.5px; }
  .panel__models .panel__model-btn span { font-size: 24px; margin-bottom: 8px; }
  /* only FJORD offered for now — single card spans the full width */
  .panel__models--single { grid-template-columns: 1fr; }
  .panel__setup { padding: 24px 28px 4px; border-bottom: 1px solid var(--line); }
  .panel__setup .group { margin-bottom: 24px; }
  .segmented__btn:disabled { opacity: 0.35; cursor: not-allowed; }

  .group { margin-bottom: 32px; }
  .group__label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
  }
  .group__label .t { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
  .group__label .v { font-size: 12px; color: var(--ink-muted); }

  .swatches { display: flex; gap: 10px; flex-wrap: wrap; }
  .swatch {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: all var(--t-base);
    box-shadow: inset 0 0 0 1px rgba(41,39,40,0.08);
  }
  .swatch.active { border-color: var(--nl-cedar); transform: scale(1.05); }
  .swatch:hover:not(.active) { transform: scale(1.06); }
  .swatch__name {
    position: absolute; top: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    font-size: 10px; color: var(--ink-muted);
    text-align: center; white-space: nowrap;
    opacity: 0; transition: opacity var(--t-base);
    pointer-events: none;
  }
  .swatch:hover .swatch__name { opacity: 1; }

  .segmented {
    /* equal columns for however many options the toggle has — always full width */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border: 1px solid var(--line);
  }
  .segmented__btn {
    padding: 14px 8px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-muted);
    background: transparent;
    border: none;
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: all var(--t-base);
  }
  .segmented__btn:last-child { border-right: none; }
  .segmented__btn.active { background: var(--nl-cedar); color: var(--nl-merino); }

  .toggle-list { display: flex; flex-direction: column; }
  .toggle {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
  }
  .toggle__main .t { font-size: 14px; font-weight: 500; display: block; }
  .toggle__main .d { font-size: 12px; color: var(--ink-muted); display: block; margin-top: 2px; }
  .toggle__right { display: flex; align-items: center; gap: 14px; }
  .toggle__price { font-size: 13px; color: var(--accent); font-weight: 500; white-space: nowrap; }
  .toggle__switch {
    width: 40px; height: 22px;
    background: var(--line-strong);
    border-radius: 100px;
    position: relative;
    transition: background var(--t-base);
  }
  .toggle__switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--nl-merino);
    border-radius: 50%;
    transition: transform var(--t-base) var(--ease-premium);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .toggle.on .toggle__switch { background: var(--accent); }
  .toggle.on .toggle__switch::after { transform: translateX(18px); }
  /* compact heating rows: single line, no description */
  .toggle--compact { padding: 10px 0; }
  .toggle--compact .t { font-size: 13.5px; font-weight: 500; }
  .toggle--compact .toggle__switch { width: 36px; height: 20px; }
  .toggle--compact .toggle__switch::after { width: 16px; height: 16px; }
  .toggle--compact.on .toggle__switch::after { transform: translateX(16px); }
  /* an option forced on by another choice (e.g. HRV under Passive House) */
  .toggle--locked { cursor: default; opacity: 0.85; }
  .toggle--locked .toggle__price { color: var(--ink-muted); }

  .bedroom-counter { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); width: fit-content; }
  .bedroom-counter button {
    width: 44px; height: 44px;
    font-size: 18px;
    color: var(--ink);
    transition: all var(--t-base);
  }
  .bedroom-counter button:hover { background: var(--nl-kangaroo); }
  .bedroom-counter .count {
    min-width: 60px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }

  /* Price bar */
  .pricebar {
    position: sticky;
    bottom: 0; left: 0; right: 0;
    background: var(--nl-cedar);
    color: var(--nl-merino);
    padding: 20px 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    border-top: 3px solid var(--nl-rifle);
    margin-top: auto;
  }
  .pricebar__label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-kangaroo); margin-bottom: 4px; }
  .pricebar__value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--nl-merino);
  }
  .pricebar__hint { font-size: 11px; color: rgba(241,241,236,0.55); margin-top: 4px; }
  .pricebar__cta {
    padding: 14px 22px;
    background: var(--nl-kangaroo);
    color: var(--nl-cedar);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background var(--t-base);
    border-radius: 2px;
  }
  .pricebar__cta:hover { background: var(--nl-cream); }
  /* VAT toggle: show the price with or without Romanian VAT (21%) */
  .vat-toggle { display: inline-flex; margin-top: 9px; border: 1px solid rgba(241,241,236,0.22); border-radius: 3px; overflow: hidden; }
  .vat-toggle__btn {
    padding: 5px 11px; font-size: 10px; letter-spacing: 0.05em;
    background: transparent; color: rgba(241,241,236,0.6);
    border: none; cursor: pointer; transition: all var(--t-base);
  }
  .vat-toggle__btn + .vat-toggle__btn { border-left: 1px solid rgba(241,241,236,0.22); }
  .vat-toggle__btn.active { background: var(--nl-kangaroo); color: var(--nl-cedar); font-weight: 600; }

  @media (max-width: 900px) {
    .configurator__stage { grid-template-columns: 1fr; height: auto; max-height: none; }
    .viewer { height: 60vh; }
    .panel { max-height: none; }
  }

  /* =========================================================================
     PROJECTS
     ========================================================================= */
  .projects__head { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: end; margin-bottom: 64px; }
  .projects__head h2 { font-size: clamp(40px, 5vw, 72px); max-width: 700px; }
  .projects__head h2 em { font-style: italic; color: var(--accent); }
  .projects__head p { color: var(--ink-muted); font-size: 16px; max-width: 340px; }

  .projects__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  .project { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4/5; cursor: pointer; }
  .project--wide { aspect-ratio: 16/10; }
  .project:nth-child(1)  { grid-column: span 5; }
  .project:nth-child(2)  { grid-column: span 7; }
  .project:nth-child(3)  { grid-column: span 4; }
  .project:nth-child(4)  { grid-column: span 4; }
  .project:nth-child(5)  { grid-column: span 4; }
  .project:nth-child(6)  { grid-column: span 7; }
  .project:nth-child(7)  { grid-column: span 5; }
  .project:nth-child(8)  { grid-column: span 12; aspect-ratio: 21/8; }
  .project:nth-child(9)  { grid-column: span 5; }
  .project:nth-child(10) { grid-column: span 7; }
  .project:nth-child(11) { grid-column: span 7; }
  .project:nth-child(12) { grid-column: span 5; }

  .project__img {
    position: absolute; inset: 0;
    transition: transform 1.2s var(--ease-premium);
  }
  .project__img { background: #292728; }
  .project__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .project__count {
    position: absolute; right: 16px; top: 16px; z-index: 2;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--nl-fog);
    background: rgba(41, 39, 40, 0.72);
    border: 1px solid rgba(241, 241, 236, 0.28);
    padding: 6px 10px;
    backdrop-filter: blur(6px);
  }

  /* ---- Project lightbox gallery ---- */
  .plight {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(26, 24, 24, 0.96);
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
  }
  .plight.open { display: flex; }
  .plight__stage { position: relative; width: min(1100px, 92vw); }
  .plight__img {
    width: 100%; max-height: 68vh; object-fit: contain; display: block;
    background: #111;
  }
  .plight__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(41, 39, 40, 0.8); color: var(--nl-fog);
    border: 1px solid rgba(241, 241, 236, 0.25);
    font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .plight__nav:hover { background: var(--nl-rifle); }
  .plight__nav--prev { left: -22px; }
  .plight__nav--next { right: -22px; }
  .plight__meta { width: min(1100px, 92vw); color: var(--nl-fog); padding: 22px 4px 0; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .plight__model { font-size: 10px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--nl-cedar); background: var(--nl-sandstone); padding: 6px 10px; }
  .plight__title { font-family: var(--font-display); font-size: 26px; font-weight: 300; }
  .plight__dims { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(241, 241, 236, 0.65); }
  .plight__counter { margin-left: auto; font-size: 11px; letter-spacing: 0.24em; color: var(--nl-sandstone); font-variant-numeric: tabular-nums; }
  .plight__close {
    position: absolute; top: 22px; right: 26px;
    background: none; border: 0; color: var(--nl-fog);
    font-size: 34px; line-height: 1; cursor: pointer; opacity: 0.75;
  }
  .plight__close:hover { opacity: 1; }
  @media (max-width: 700px) {
    .plight__nav--prev { left: 6px; }
    .plight__nav--next { right: 6px; }
    .plight__title { font-size: 20px; }
  }
  .project__img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(41,39,40,0.66) 100%);
  }
  .project:hover .project__img { transform: scale(1.06); }
  .project__model {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    font-size: 10px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--nl-fog);
    background: rgba(41, 39, 40, 0.72);
    border: 1px solid rgba(241, 241, 236, 0.28);
    padding: 7px 12px;
    backdrop-filter: blur(6px);
  }
  .project__meta {
    position: absolute;
    bottom: 28px; left: 28px; right: 28px;
    color: var(--nl-merino);
    z-index: 2;
  }
  .project__loc { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-kangaroo); margin-bottom: 8px; }
  .project__title { font-family: var(--font-display); font-size: 24px; font-weight: 400; }

  @media (max-width: 900px) {
    .projects__head { grid-template-columns: 1fr; gap: 20px; }
    .projects__grid { grid-template-columns: 1fr; }
    .project { grid-column: span 1 !important; aspect-ratio: 4/3; }
  }

  /* =========================================================================
     CONTACT
     ========================================================================= */
  .contact {
    background: var(--nl-cedar);
    color: var(--ink-inverse);
  }
  .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
  .contact__left h2 {
    font-size: clamp(42px, 5.4vw, 76px);
    color: var(--nl-merino);
    margin-bottom: 28px;
  }
  .contact__left h2 em { font-style: italic; color: var(--nl-kangaroo); }
  .contact__left p { color: rgba(241,241,236,0.7); font-size: 17px; max-width: 480px; margin-bottom: 40px; }
  .contact__details { display: flex; flex-direction: column; gap: 24px; padding-top: 32px; border-top: 1px solid rgba(241,241,236,0.14); }
  .contact__detail .l { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-kangaroo); margin-bottom: 6px; }
  .contact__detail .v { font-size: 17px; color: var(--nl-merino); font-family: var(--font-display); }

  .form { background: rgba(241,241,236,0.05); padding: 48px; border: 1px solid rgba(241,241,236,0.1); }
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
  .form__field { display: flex; flex-direction: column; }
  .form__field--full { grid-column: 1 / -1; }
  .form__label {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--nl-kangaroo);
    margin-bottom: 10px;
    font-weight: 500;
  }
  .form__input,
  .form__select,
  .form__textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(241,241,236,0.25);
    padding: 12px 0;
    color: var(--nl-merino);
    font-family: var(--font-body);
    font-size: 16px;
    transition: border-color var(--t-base);
  }
  .form__input:focus,
  .form__textarea:focus,
  .form__select:focus {
    outline: none;
    border-bottom-color: var(--nl-kangaroo);
  }
  .form__select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23D0C7B3' stroke-width='1.2' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; }
  .form__select option { background: var(--nl-cedar); color: var(--nl-merino); }
  .form__textarea { min-height: 100px; resize: vertical; }
  .form__submit {
    margin-top: 12px;
    padding: 18px 32px;
    background: var(--nl-kangaroo);
    color: var(--nl-cedar);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    width: 100%;
    transition: all var(--t-base);
  }
  .form__submit:hover { background: var(--nl-cream); }

  @media (max-width: 900px) {
    .contact__grid { grid-template-columns: 1fr; gap: 48px; }
    .form { padding: 32px 24px; }
    .form__row { grid-template-columns: 1fr; }
  }

  /* =========================================================================
     FOOTER
     ========================================================================= */
  .footer { background: var(--nl-cedar); color: var(--nl-merino); padding: 40px 0; border-top: 1px solid rgba(241,241,236,0.1); }
  .footer__inner {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
  }
  .footer__brand {
    font-family: var(--font-display);
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .footer__logo {
    display: inline-block;
    width: 42px;
    color: var(--nl-fog);
  }
  .footer__logo svg { width: 100%; height: auto; display: block; }
  .footer__brand-name {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--nl-fog);
  }
  .footer__brand-name em {
    font-style: normal;
    font-weight: 300;
    color: var(--nl-sandstone);
    letter-spacing: 0.16em;
    margin-left: 2px;
  }
  .footer__brand .small { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--nl-sandstone); font-family: var(--font-body); }
  .footer__links { display: flex; gap: 28px; font-size: 13px; color: rgba(241,241,236,0.7); }
  .footer__links a:hover { color: var(--nl-kangaroo); }
  .footer__copy { font-size: 12px; color: rgba(241,241,236,0.5); }

  /* =========================================================================
     MODAL (email gate)
     ========================================================================= */
  .modal {
    position: fixed; inset: 0;
    background: rgba(41, 39, 40, 0.6);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
  }
  .modal.open { opacity: 1; pointer-events: auto; }
  .modal__card {
    background: var(--nl-merino);
    border-radius: 2px;
    max-width: 520px;
    width: 100%;
    padding: 48px;
    position: relative;
    transform: translateY(24px);
    transition: transform var(--t-base) var(--ease-premium);
  }
  .modal.open .modal__card { transform: none; }
  .modal__close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    transition: background var(--t-base);
  }
  .modal__close:hover { background: var(--line); }
  .modal__eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
  .modal h3 { font-family: var(--font-display); font-size: 32px; margin-bottom: 12px; }
  .modal p { color: var(--ink-muted); font-size: 15px; margin-bottom: 28px; }
  .modal__field { margin-bottom: 18px; }
  .modal__field label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: 8px; }
  .modal__field input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    border-radius: 2px;
  }
  .modal__field input:focus { outline: none; border-color: var(--accent); }
  .modal__submit {
    width: 100%;
    padding: 18px;
    background: var(--nl-cedar);
    color: var(--nl-merino);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 12px;
    border-radius: 2px;
  }
  .modal__submit:hover { background: var(--nl-rifle); }
  a.modal__submit { display: block; text-align: center; text-decoration: none; }
  .modal__submit--wa { background: #25D366; color: #0b3d20; }
  .modal__submit--wa:hover { background: #1eb457; }
  .modal__submit--ghost { background: transparent; color: var(--nl-cedar); border: 1px solid var(--line-strong); }
  .modal__submit--ghost:hover { background: var(--nl-cedar); color: var(--nl-merino); }
  .modal__foot { font-size: 11px; color: var(--ink-muted); text-align: center; margin-top: 16px; line-height: 1.5; }

  /* ==================== UTILITY ==================== */
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== BLOCK 2/3 — cookie consent (was <style> #3 in <body>, index.html lines 2382–2438) ===== */
  .cookiebar {
    position: fixed; left: 20px; bottom: 20px; z-index: 400;
    max-width: 400px;
    background: var(--nl-cedar);
    color: var(--nl-fog);
    padding: 22px 24px;
    border: 1px solid rgba(241, 241, 236, 0.12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    font-size: 13.5px; line-height: 1.55;
  }
  .cookiebar p { margin: 0 0 16px; color: rgba(241, 241, 236, 0.85); }
  .cookiebar a { color: var(--nl-sandstone); text-decoration: underline; }
  .cookiebar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .cookiebar__actions button {
    font-family: var(--font-body);
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 12px 18px; cursor: pointer; border: 1px solid transparent;
  }
  /* Accept is visually dominant, but Decline is a real, full-size, always-visible
     button — refusing must be as easy as accepting. */
  #ckAccept { background: var(--nl-sandstone); color: var(--nl-cedar); flex: 1 1 auto; }
  #ckAccept:hover { background: var(--nl-fog); }
  #ckDecline { background: transparent; color: rgba(241, 241, 236, 0.78); border-color: rgba(241, 241, 236, 0.32); }
  #ckDecline:hover { color: var(--nl-fog); border-color: var(--nl-fog); }
  #ckSave { background: transparent; color: var(--nl-sandstone); border-color: rgba(208, 199, 179, 0.45); }
  #ckSave:hover { background: rgba(208, 199, 179, 0.12); }
  .cookiebar__more {
    margin-top: 13px; background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0.06em;
    color: rgba(241, 241, 236, 0.62); text-decoration: underline; text-underline-offset: 3px;
  }
  .cookiebar__more:hover { color: var(--nl-fog); }
  .cookiebar__opts { margin: 2px 0 16px; border-top: 1px solid rgba(241, 241, 236, 0.12); }
  .ckopt { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-bottom: 1px solid rgba(241, 241, 236, 0.08); }
  .ckopt__txt { flex: 1; }
  .ckopt__name { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nl-fog); margin-bottom: 4px; }
  .ckopt__desc { display: block; font-size: 12px; line-height: 1.45; color: rgba(241, 241, 236, 0.62); }
  .ckopt input {
    appearance: none; -webkit-appearance: none; margin: 1px 0 0; flex: 0 0 38px;
    width: 38px; height: 21px; border-radius: 21px; position: relative; cursor: pointer;
    background: rgba(241, 241, 236, 0.18); transition: background 0.18s;
  }
  .ckopt input::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
    border-radius: 50%; background: var(--nl-fog); transition: transform 0.18s;
  }
  .ckopt input:checked { background: var(--nl-moss); }
  .ckopt input:checked::after { transform: translateX(17px); }
  /* "Necessary" is permanently on. Style the locked state explicitly instead of
     leaning on :checked — a disabled toggle that reads as OFF tells the visitor
     the opposite of the truth right where they are deciding whether to trust us. */
  .ckopt input:disabled { opacity: 0.55; cursor: not-allowed; background: var(--nl-moss); }
  .ckopt input:disabled::after { transform: translateX(17px); }
  .ckopt input:focus-visible { outline: 2px solid var(--nl-sandstone); outline-offset: 2px; }
  @media (max-width: 560px) { .cookiebar { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* ===== BLOCK 3/3 — WhatsApp floating button (was <style> #4 in <body>, index.html lines 2456–2477) ===== */
  .wa-btn {
    position: fixed; right: 22px; bottom: 22px; z-index: 350;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .wa-btn svg { width: 30px; height: 30px; }
  .wa-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38); }
  .wa-btn::before {
    content: "Contact now";
    position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
    background: var(--nl-cedar); color: var(--nl-fog);
    font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 8px 14px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  .wa-btn:hover::before { opacity: 1; }
  @media (max-width: 640px) { .wa-btn { right: 14px; bottom: 14px; width: 52px; height: 52px; } }


/* =========================================================================
   PRODUCT PAGES (tiny-houses.html and its siblings) - added for Etapa 4.
   Everything here is scoped to .hero--static or to the page's body class,
   so index.html is untouched.
   ========================================================================= */

  /* --- Static product hero: the cinematic scroll tour stays on the homepage,
         product pages get a still photograph behind the same hero copy. --- */
  .hero--static { min-height: 88vh; }
  .hero--static .hero__bg {
    background:
      linear-gradient(180deg, rgba(41,39,40,0.52) 0%, rgba(41,39,40,0.55) 55%, rgba(41,39,40,0.78) 100%),
      var(--nl-cedar);
    z-index: 0;
  }
  .hero--static .hero__bg--tiny {
    background:
      linear-gradient(180deg, rgba(41,39,40,0.52) 0%, rgba(41,39,40,0.55) 55%, rgba(41,39,40,0.78) 100%),
      url('../img/projects/luna-1.jpg') center / cover no-repeat,
      var(--nl-cedar);
  }
  /* The homepage hero fades to the light page background; a product page runs
     straight into the dark value strip, so both overlays are dropped here. */
  .hero--static .hero__bg::before,
  .hero--static .hero__bg::after { content: none; }
  /* .hero__content overrides .container's shorthand padding, which drops the
     32px side gutter. Restored here (scoped, so the homepage is untouched). */
  .hero--static .hero__content { padding: 110px 32px 120px; }
  @media (max-width: 640px) { .hero--static { min-height: 76vh; } }

  /* --- Nav over a dark static hero: the transparent state needs light ink,
         the same way the homepage nav sits over its dark cinematic hero. --- */
  .page-tiny .nav:not(.scrolled) .nav__links a { color: var(--nl-fog); }
  .page-tiny .nav:not(.scrolled) .nav__links a:hover { color: var(--nl-kangaroo); }

  /* --- Active page marker in the nav. --- */
  .nav__links a.active { color: var(--accent); }
  .nav__links a.active::after { width: 100%; }
  .page-tiny .nav:not(.scrolled) .nav__links a.active { color: var(--nl-kangaroo); }

  /* --- Project grid, 11 cards (no `office` card on the tiny page).
         The base rules are written for the homepage's 12 cards, so every row
         would break one card short here; these spans re-balance the rows:
         5+7 / 4+4+4 / 7+5 / 12 / 4+4+4. --- */
  .page-tiny .project:nth-child(1)  { grid-column: span 5; }
  .page-tiny .project:nth-child(2)  { grid-column: span 7; }
  .page-tiny .project:nth-child(3)  { grid-column: span 4; }
  .page-tiny .project:nth-child(4)  { grid-column: span 4; }
  .page-tiny .project:nth-child(5)  { grid-column: span 4; }
  .page-tiny .project:nth-child(6)  { grid-column: span 7; }
  .page-tiny .project:nth-child(7)  { grid-column: span 5; }
  .page-tiny .project:nth-child(8)  { grid-column: span 12; aspect-ratio: 21/8; }
  .page-tiny .project:nth-child(9)  { grid-column: span 4; aspect-ratio: 4/5; }
  .page-tiny .project:nth-child(10) { grid-column: span 4; aspect-ratio: 4/5; }
  .page-tiny .project:nth-child(11) { grid-column: span 4; aspect-ratio: 4/5; }


/* =========================================================================
   CATEGORY CAROUSEL (#categories) — Etapa 5.
   Sits directly under the homepage hero tour: three doors into the range
   (Tiny Houses, Modular Houses and Wellness Units).
   Desktop = a plain 3-column grid (no JS drives the layout).
   <=900px = native horizontal scroll-snap; JS only paints the dots.
   ========================================================================= */

  .categories { padding: 110px 0 120px; background: var(--nl-fog); }
  .categories__head { max-width: 760px; margin-bottom: 56px; }
  .categories__head h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.01em;
  }
  .categories__head h2 em { font-style: italic; color: var(--nl-forest-deep); }
  .categories__head p {
    margin-top: 20px;
    color: var(--ink-muted);
    font-size: 17px;
    max-width: 560px;
  }

  /* Hairline above the row — the brand thin-rule separator. */
  .categories__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
  }

  .catcard {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform var(--t-base) var(--ease-premium),
                box-shadow var(--t-base) var(--ease-premium),
                border-color var(--t-base) var(--ease-premium);
  }
  .catcard:hover,
  .catcard:focus-visible {
    transform: translateY(-6px);
    border-color: var(--line-strong);
    box-shadow: 0 26px 54px rgba(41, 39, 40, 0.14);
  }
  .catcard:focus-visible { outline: 2px solid var(--nl-forest-deep); outline-offset: 3px; }

  .catcard__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--nl-sandstone);
  }
  .catcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow) var(--ease-premium);
  }
  .catcard:hover .catcard__media img { transform: scale(1.06); }

  .catcard__badge {
    position: absolute;
    /* The image carries a filter on the waiting-list cards, which makes it
       its own stacking context painted in the same step as this positioned
       badge — and it comes later in the DOM. z-index keeps the badge on top. */
    z-index: 2;
    top: 16px;
    left: 16px;
    padding: 7px 14px;
    background: rgba(41, 39, 40, 0.86);
    color: var(--nl-fog);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .catcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
    padding: 32px 30px 34px;
  }
  .catcard__kicker {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nl-moss);
  }
  .catcard__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--nl-charred-wood);
  }
  .catcard__copy {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-muted);
    flex: 1;
  }
  .catcard__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nl-forest-deep);
  }
  .catcard__cta .arrow { transition: transform var(--t-base) var(--ease-premium); }
  .catcard:hover .catcard__cta .arrow { transform: translateX(5px); }

  /* Waiting-list cards read one notch quieter than the live one. */
  .catcard--soon .catcard__media img { filter: saturate(0.72); }

  .categories__dots { display: none; }

  @media (max-width: 900px) {
    .categories { padding: 80px 0 90px; }
    .categories__head { margin-bottom: 36px; }

    /* Full-bleed snap rail: negative margins cancel the .container 32px
       gutter, the padding puts it back as first/last card breathing room. */
    .categories__track {
      display: flex;
      grid-template-columns: none;
      gap: 16px;
      margin: 0 -32px;
      padding: 32px 32px 4px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .categories__track::-webkit-scrollbar { display: none; }
    .catcard {
      /* ~82% of the viewport, so the next card always peeks in. vw rather
         than % because % resolves against the track's content box, which the
         32px gutters have already eaten into. */
      flex: 0 0 82vw;
      max-width: 420px;
      scroll-snap-align: center;
    }
    .catcard__body { padding: 26px 24px 28px; }
    .catcard__title { font-size: 26px; }

    .categories__dots {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 26px;
    }
    .categories__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      border: 0;
      padding: 0;
      background: var(--line-strong);
      opacity: 0.35;
      transition: opacity var(--t-fast) var(--ease-premium),
                  transform var(--t-fast) var(--ease-premium);
    }
    .categories__dot.is-active {
      opacity: 1;
      transform: scale(1.5);
      background: var(--nl-forest-deep);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .catcard,
    .catcard__media img,
    .catcard__cta .arrow { transition: none; }
    .catcard:hover { transform: none; }
    .catcard:hover .catcard__media img { transform: none; }
    .categories__track { scroll-behavior: auto; }
  }

/* =========================================================================
   MODEL CTA BAND (.ctaband) — Etapa 5.
   Replaces the 3D configurator on the homepage: the configurator now lives
   only on the product pages, so the homepage just points at them.
   ========================================================================= */

  .ctaband {
    padding: 110px 0;
    background: var(--nl-charred-wood);
    color: var(--nl-fog);
  }
  .ctaband__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: end;
  }
  .ctaband .eyebrow { color: var(--nl-sandstone); }
  .ctaband h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.08;
    color: var(--nl-fog);
  }
  .ctaband h2 em { font-style: italic; color: var(--nl-sandstone); }
  .ctaband p {
    margin-top: 22px;
    color: rgba(241, 241, 236, 0.72);
    font-size: 17px;
    max-width: 520px;
  }
  .ctaband__links {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(241, 241, 236, 0.16);
  }
  .ctaband__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(241, 241, 236, 0.16);
    text-decoration: none;
    color: var(--nl-fog);
    font-family: var(--font-display);
    transition: padding-left var(--t-base) var(--ease-premium),
                color var(--t-base) var(--ease-premium);
  }
  .ctaband__link:hover,
  .ctaband__link:focus-visible { padding-left: 12px; color: var(--nl-sandstone); }
  .ctaband__link-name { font-size: 24px; font-weight: 300; }
  .ctaband__link-note {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(241, 241, 236, 0.5);
    white-space: nowrap;
  }

  @media (max-width: 900px) {
    .ctaband { padding: 80px 0; }
    .ctaband__inner { grid-template-columns: 1fr; gap: 40px; align-items: start; }
    .ctaband__link-name { font-size: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ctaband__link { transition: none; }
    .ctaband__link:hover { padding-left: 0; }
  }

/* =========================================================================
   WAITING-LIST PAGE STYLES (.page-interest) — Etapa 5.
   Text-only hero (no invented product photography) + an honest claims list.
   ========================================================================= */

  .page-interest .nav:not(.scrolled) .nav__links a { color: var(--nl-fog); }
  .page-interest .nav:not(.scrolled) .nav__links a:hover { color: var(--nl-sandstone); }
  .page-interest .nav:not(.scrolled) .nav__links a.active { color: var(--nl-sandstone); }

  .hero--plain { min-height: 62vh; }
  /* Flat Charred Wood instead of the photo overlay gradient: there is no
     photograph underneath, so the gradient only showed as a seam. */
  .hero--plain .hero__bg { background: var(--nl-charred-wood); }
  .hero--plain .hero__content { padding: 160px 32px 100px; max-width: 900px; }
  /* The homepage h1 clamp is sized for two short lines; this copy is longer. */
  .hero--plain h1 { font-size: clamp(38px, 5.2vw, 66px); }
  .hero--plain .hero__sub { max-width: 560px; }
  /* Over a flat dark hero the Charred Wood nav button disappears, so the
     transparent state flips it to Fog. */
  .page-interest .nav:not(.scrolled) .nav__cta .btn--primary {
    background: var(--nl-fog);
    color: var(--nl-charred-wood);
  }
  .page-interest .nav:not(.scrolled) .nav__cta .btn--primary:hover {
    background: var(--nl-sandstone);
  }
  @media (max-width: 640px) {
    .hero--plain { min-height: 0; }
    .hero--plain .hero__content { padding: 130px 24px 70px; }
  }

  .truths__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .truth { background: var(--nl-fog); padding: 36px 32px; }
  .truth__n {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--nl-moss);
    margin-bottom: 14px;
  }
  .truth__t {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    margin-bottom: 10px;
    color: var(--nl-charred-wood);
  }
  .truth__c { font-size: 15px; line-height: 1.65; color: var(--ink-muted); }
  @media (max-width: 760px) { .truths__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   WELLNESS UNITS PRODUCT PAGE (wellness.html) — Etapa 6.
   Everything below is scoped to .page-sauna, .hero__bg--sauna or to classes
   shared with the modular-houses page (.specband / .zone / .rendernote), so
   index.html and tiny-houses.html are untouched.
   ========================================================================= */

  /* --- Hero background: the front elevation at dusk. --- */
  .hero--static .hero__bg--sauna {
    background:
      linear-gradient(180deg, rgba(41,39,40,0.46) 0%, rgba(41,39,40,0.5) 50%, rgba(41,39,40,0.8) 100%),
      url('../img/sauna/sauna-ext-fatada.webp') center / cover no-repeat,
      var(--nl-cedar);
  }
  /* Same treatment the tiny-house page gets: light nav ink over a dark hero. */
  .page-sauna .nav:not(.scrolled) .nav__links a { color: var(--nl-fog); }
  .page-sauna .nav:not(.scrolled) .nav__links a:hover { color: var(--nl-kangaroo); }
  .page-sauna .nav:not(.scrolled) .nav__links a.active { color: var(--nl-kangaroo); }

/* =========================================================================
   MODULAR HOUSES PRODUCT PAGE (modular-houses.html) — 24 Sep 2026.
   The page reuses the wellness page's .specband / .zone / .rendernote
   components; only the hero image and the dark-hero nav treatment are its
   own, so this block stays scoped to .page-modular and .hero__bg--modular.
   ========================================================================= */
  .hero--static .hero__bg--modular {
    background:
      linear-gradient(180deg, rgba(41,39,40,0.44) 0%, rgba(41,39,40,0.5) 50%, rgba(41,39,40,0.82) 100%),
      /* render withheld — see MODULAR PAGE note below */
      var(--nl-cedar);
  }
  .page-modular .nav:not(.scrolled) .nav__links a { color: var(--nl-fog); }
  .page-modular .nav:not(.scrolled) .nav__links a:hover { color: var(--nl-kangaroo); }
  .page-modular .nav:not(.scrolled) .nav__links a.active { color: var(--nl-kangaroo); }
  /* No BOM exists for this range, so the fourth key figure is a word, not a
     number. It is set smaller so it does not try to look like a price. */
  .specband__v--word { font-size: clamp(20px, 1.9vw, 28px); }

  /* --- Key-figure band, directly under the hero (replaces the icon strip:
         four numbers say more about this module than six icons). --- */
  .specband { background: var(--bg-inverse); color: var(--ink-inverse); padding: 64px 0; }
  .specband__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .specband__item { padding: 8px 4px; border-left: 1px solid rgba(241, 241, 236, 0.14); padding-left: 28px; }
  .specband__item:first-child { border-left: none; padding-left: 4px; }
  .specband__v {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.05;
    color: var(--nl-merino);
    letter-spacing: -0.01em;
  }
  .specband__l {
    margin-top: 12px;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--nl-kangaroo);
  }
  .specband__note {
    margin-top: 36px;
    font-size: 13.5px; line-height: 1.7;
    color: rgba(241, 241, 236, 0.62);
    max-width: 760px;
    padding-top: 24px;
    border-top: 1px solid rgba(241, 241, 236, 0.14);
  }
  @media (max-width: 900px) { .specband__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .specband__item { border-left: none; padding-left: 4px; } }
  @media (max-width: 460px) { .specband__grid { grid-template-columns: 1fr; } }

  /* --- The three zones: image / copy rows that alternate side. --- */
  .zone {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 72px 0;
    border-top: 1px solid var(--line);
  }
  .zone:first-of-type { border-top: none; padding-top: 24px; }
  .zone--flip .zone__media { order: 2; }
  .zone__media { position: relative; overflow: hidden; border-radius: 2px; background: var(--nl-cedar); }
  .zone__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; }
  .zone__n {
    font-family: var(--font-display);
    font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--nl-moss);
    margin-bottom: 16px;
  }
  .zone__t {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.1;
    color: var(--nl-charred-wood);
    margin-bottom: 18px;
  }
  .zone__t em { font-style: italic; color: var(--nl-forest-deep); }
  .zone__c { font-size: 16px; line-height: 1.75; color: var(--ink-muted); }
  .zone__list { margin: 22px 0 0; padding: 0; list-style: none; }
  .zone__list li {
    position: relative;
    padding: 9px 0 9px 22px;
    font-size: 14.5px; line-height: 1.6;
    color: var(--nl-charred-wood);
    border-top: 1px solid var(--line);
  }
  .zone__list li::before {
    content: "";
    position: absolute; left: 0; top: 19px;
    width: 10px; height: 1px; background: var(--nl-moss);
  }
  @media (max-width: 900px) {
    .zone { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
    .zone--flip .zone__media { order: 0; }
  }

  /* --- Film strip: four short clips, each behind its own poster. Nothing
         autoplays — the visitor decides which one to open. --- */
  .filmgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .film {
    background: var(--nl-charred-wood);
    border-radius: 2px;
    overflow: hidden;
  }
  .film video {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--nl-charred-wood);
  }
  .film__cap {
    padding: 16px 20px 20px;
    color: var(--nl-merino);
  }
  .film__cap .l { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--nl-kangaroo); }
  .film__cap .t { font-family: var(--font-display); font-size: 19px; font-weight: 300; margin-top: 8px; }
  /* --- Still tile: same frame and proportion as a clip, but it is an image.
         No play affordance; a small "Still" label says so outright. --- */
  .film--still { margin: 0; }
  .film__stillwrap { position: relative; display: block; }
  .film__stillwrap img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--nl-charred-wood);
  }
  .film__badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nl-merino);
    background: rgba(20, 18, 16, 0.62);
    border: 1px solid rgba(245, 240, 232, 0.22);
    border-radius: 2px;
    backdrop-filter: blur(4px);
  }
  @media (max-width: 760px) { .filmgrid { grid-template-columns: 1fr; } }

  /* --- Price block plus the two honest lists. The renders show a deck, a hot
         tub, a cold plunge and an outdoor shower that are NOT in the module
         price, so "what is in" and "what is extra" sit side by side, same
         weight, never folded away. --- */
  .pricebox {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
  }
  .pricebox__figure {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(44px, 5.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--nl-charred-wood);
  }
  .pricebox__vat { margin-top: 14px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-moss); }
  .pricebox__terms { margin-top: 22px; font-size: 15px; line-height: 1.7; color: var(--ink-muted); }
  .pricebox__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

  .inclists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .inclist { background: var(--nl-fog); padding: 32px 28px; }
  .inclist--out { background: #EDEBE4; }
  .inclist__h {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 500;
    color: var(--nl-charred-wood);
    margin-bottom: 6px;
  }
  .inclist__sub { font-size: 12.5px; line-height: 1.6; color: var(--ink-muted); margin-bottom: 18px; }
  .inclist ul { margin: 0; padding: 0; list-style: none; }
  .inclist li {
    position: relative;
    padding: 10px 0 10px 26px;
    font-size: 14.5px; line-height: 1.6;
    color: var(--nl-charred-wood);
    border-top: 1px solid var(--line);
  }
  .inclist li::before {
    position: absolute; left: 0; top: 9px;
    font-size: 14px; line-height: 1.6;
  }
  .inclist--in li::before { content: "+"; color: var(--nl-forest-deep); }
  .inclist--out li::before { content: "−"; color: var(--nl-bronze); }
  @media (max-width: 900px) {
    .pricebox { grid-template-columns: 1fr; gap: 32px; }
    .inclists { grid-template-columns: 1fr; }
  }

  /* --- The renders are renders. Said next to the gallery and next to the
         price, not buried in a footnote. --- */
  .rendernote {
    margin-top: 28px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-left: 2px solid var(--nl-moss);
    background: var(--nl-fog);
    font-size: 14px; line-height: 1.7;
    color: var(--ink-muted);
  }
  .section--dark .rendernote {
    background: rgba(241, 241, 236, 0.06);
    border-color: rgba(241, 241, 236, 0.16);
    border-left-color: var(--nl-kangaroo);
    color: rgba(241, 241, 236, 0.7);
  }

/* ==========================================================================
   DARK-HERO LOGO LEGIBILITY — 22 Sep 2026
   The brand has no white logo file; the manual's method is to render the dark
   PNG white in CSS. While the nav sits transparent over a dark hero image
   (product pages and the waiting-list pages), the dark wordmark is almost
   invisible, so invert it there and restore it once the nav goes solid.
   ========================================================================== */
.page-tiny .nav:not(.scrolled) .nav__logo-img,
.page-sauna .nav:not(.scrolled) .nav__logo-img,
.page-modular .nav:not(.scrolled) .nav__logo-img,
.page-interest .nav:not(.scrolled) .nav__logo-img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}
@media (prefers-reduced-motion: no-preference) {
  .nav__logo-img { transition: filter 0.3s ease; }
}

/* ==========================================================================
   WELLNESS — THE GUEST PATH BETWEEN THE THREE ZONES — 23 Sep 2026
   The three rooms are read in the order a guest walks them (changing room →
   sauna → salt room). These rules draw a discreet numbered cue between the
   blocks so the sequence is obvious without a JS carousel: a hairline, a
   number, the site's own .arrow, the next number. Scoped to .page-sauna so
   no other page inherits it; the zone that follows a cue drops its own
   border-top, otherwise the rule would be drawn twice.
   ========================================================================== */
.page-sauna .zonestep {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}
.page-sauna .zonestep__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.page-sauna .zonestep__cue {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nl-moss);
  white-space: nowrap;
}
.page-sauna .zonestep__from { color: var(--line-strong); }
.page-sauna .zonestep__to { color: var(--nl-forest-deep); }
.page-sauna .zonestep .arrow { color: var(--nl-moss); letter-spacing: 0; }
.page-sauna .zonestep__txt {
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
.page-sauna .zonestep + .zone { border-top: none; padding-top: 34px; }

@media (max-width: 700px) {
  .page-sauna .zonestep { gap: 12px; }
  .page-sauna .zonestep__cue {
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    white-space: normal;
  }
  .page-sauna .zonestep__txt { letter-spacing: 0.1em; }
  .page-sauna .zonestep + .zone { padding-top: 26px; }
}

/* ==========================================================================
   ORBIT FILM — wellness gallery, 23 Sep 2026
   One continuous lap around the module, sitting above the stills grid.
   Scoped to .page-sauna so no other page is affected.
   ========================================================================== */
.page-sauna .orbit { margin: 0 0 clamp(32px, 4vw, 56px); }
.page-sauna .orbit video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--nl-cedar);
  border-radius: 2px;
}
.page-sauna .orbit__cap {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .page-sauna .orbit__cap { font-size: 11.5px; }
}

/* =========================================================================
   MODULAR HOUSES — the three standards
   Intro paragraph under the section heading, and the comparison table that
   sits below the three .zone blocks. The table lives on the light section
   background, so it does not reuse .page-sauna .btable (dark). Below 620px
   it collapses into one card per standard, exactly as the wellness tables
   do, because seven columns cannot be read on a phone.
   ========================================================================= */
.page-modular .configs__intro {
  max-width: 760px;
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-muted);
}
.page-modular .zone__c--more { margin-top: 16px; }

.page-modular .ctable {
  margin: 8px 0 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(41, 39, 40, 0.16);
  background: rgba(208, 199, 179, 0.1);
}
.page-modular .ctable table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.page-modular .ctable caption {
  caption-side: top;
  text-align: left;
  padding: 16px 18px 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nl-forest-deep);
  border-bottom: 1px solid rgba(41, 39, 40, 0.16);
}
.page-modular .ctable th,
.page-modular .ctable td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(41, 39, 40, 0.1);
}
.page-modular .ctable thead th {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(41, 39, 40, 0.6);
  white-space: nowrap;
}
.page-modular .ctable tbody th {
  font-weight: 600;
  color: var(--nl-charred-wood);
  white-space: nowrap;
}
.page-modular .ctable tbody td { color: var(--ink-muted); }
.page-modular .ctable .num { text-align: right; white-space: nowrap; }
.page-modular .ctable tbody tr:last-child th,
.page-modular .ctable tbody tr:last-child td { border-bottom: none; }
/* The 80 is the one that exists as a building, not only as a render. */
.page-modular .ctable tr.is-built { background: rgba(147, 148, 116, 0.14); }
.page-modular .ctable tr.is-built th { color: var(--nl-forest-deep); }

.page-modular .ctable__note {
  max-width: 760px;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(41, 39, 40, 0.6);
}

@media (max-width: 900px) {
  .page-modular .ctable table { min-width: 660px; font-size: 13.5px; }
  .page-modular .ctable th,
  .page-modular .ctable td { padding: 12px 14px; }
}

/* Phones: one card per standard. Each cell carries its own label via data-l. */
@media (max-width: 620px) {
  .page-modular .ctable { overflow-x: visible; }
  .page-modular .ctable table { min-width: 0; }
  .page-modular .ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-modular .ctable tbody tr { display: block; padding: 4px 0 10px; border-bottom: 1px solid rgba(41, 39, 40, 0.16); }
  .page-modular .ctable tbody tr:last-child { border-bottom: none; }
  .page-modular .ctable tbody th {
    display: block;
    padding: 14px 16px 8px;
    border-bottom: none;
    font-size: 15px;
    white-space: normal;
  }
  .page-modular .ctable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 16px;
    border-bottom: none;
    text-align: right;
    white-space: normal;
  }
  .page-modular .ctable tbody td::before {
    content: attr(data-l);
    flex: 0 0 auto;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(41, 39, 40, 0.5);
    text-align: left;
  }
  .page-modular .ctable .num { text-align: right; }
}

/* ==========================================================================
   MODULAR PAGE — RENDERS WITHHELD, 23 Sep 2026
   The range renders were not approved for publication, so the page runs on
   text alone for now: a plain hero and full-width configuration blocks.
   Putting the images back = restore the .zone__media divs and the gallery;
   these two rules then stop applying on their own.
   ========================================================================== */
.page-modular .hero__bg--plain {
  position: absolute;
  inset: 0;
  background: var(--nl-cedar);
}
.page-modular .hero__bg--plain::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(147, 148, 116, 0.16), transparent 62%),
    radial-gradient(90% 80% at 92% 96%, rgba(208, 199, 179, 0.10), transparent 60%);
}
/* A .zone is a two-column grid; with no media cell it would run half-width. */
.page-modular .zone--nomedia {
  display: block;
  max-width: 760px;
}
.page-modular .zone--nomedia + .zone--nomedia {
  margin-top: clamp(42px, 5vw, 76px);
  padding-top: clamp(42px, 5vw, 76px);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   BUSINESS CASE — wellness page, 24 Sep 2026
   Written for any resort or hotel, so it leads with three claims and the
   money, not with prose. Larger type and brighter ink than the rest of the
   dark sections: this is the block people read on a phone while deciding.
   Bar fills are a sequential ramp in the Moss hue (#6E6F52 → #D8D9C2),
   shorter payback lighter; validated for lightness monotonicity, CVD
   separation (worst adjacent ΔE 16.9) and ≥3:1 contrast against the
   surface. Every value is also written on its bar and repeated in the
   table, so colour never carries a number on its own.
   ========================================================================== */
.page-sauna .bcase__slogans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.2vw, 52px);
  margin-bottom: clamp(48px, 5.5vw, 78px);
}
.page-sauna .bslog__t {
  margin: 0 0 14px;
  font-size: clamp(21px, 1.85vw, 27px);
  line-height: 1.22;
  font-weight: 400;
  color: var(--nl-fog);
}
.page-sauna .bslog__c {
  margin: 0;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.66;
  color: rgba(241, 241, 236, 0.74);
}

/* The three numbers that answer "what does it cost me and when is it mine". */
.page-sauna .bcase__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(208, 199, 179, 0.18);
  border: 1px solid rgba(208, 199, 179, 0.18);
  margin-bottom: clamp(40px, 4.5vw, 64px);
}
.page-sauna .bstat {
  background: var(--nl-cedar);
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 30px);
}
.page-sauna .bstat__v {
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.05;
  color: var(--nl-fog);
}
.page-sauna .bstat--hero .bstat__v { color: var(--nl-kangaroo); }
.page-sauna .bstat__l {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(241, 241, 236, 0.62);
}

.page-sauna .bcase__chart { margin: 0 0 clamp(30px, 3.4vw, 44px); }
.page-sauna .bcase__chart-cap { display: block; margin-bottom: 18px; }
.page-sauna .bcase__chart-t {
  display: block;
  font-size: clamp(18px, 1.5vw, 23px);
  color: var(--nl-fog);
}
.page-sauna .bcase__svg { display: block; width: 100%; height: auto; max-width: 720px; }
.page-sauna .bcase__lbl,
.page-sauna .bcase__val,
.page-sauna .bcase__band,
.page-sauna .bcase__axis,
.page-sauna .bcase__ticks text { font-family: var(--font-body); }
.page-sauna .bcase__lbl { font-size: 13px; fill: rgba(241, 241, 236, 0.86); }
.page-sauna .bcase__val { font-size: 16px; fill: var(--nl-fog); }
.page-sauna .bcase__band,
.page-sauna .bcase__axis {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  fill: var(--nl-kangaroo);
}
.page-sauna .bcase__ticks text { font-size: 12px; fill: rgba(241, 241, 236, 0.6); }

.page-sauna .bcase__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(28px, 3vw, 40px);
  font-family: var(--font-body);
  font-size: 13.5px;
}
.page-sauna .bcase__table caption {
  text-align: left;
  padding-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nl-kangaroo);
}
.page-sauna .bcase__table th,
.page-sauna .bcase__table td {
  text-align: left;
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid rgba(208, 199, 179, 0.16);
  color: rgba(241, 241, 236, 0.9);
}
.page-sauna .bcase__table th {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(208, 199, 179, 0.72);
  font-weight: 400;
}
.page-sauna .bcase__note {
  max-width: 760px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(241, 241, 236, 0.58);
}
.page-sauna .bcase__note a { color: var(--nl-kangaroo); }

@media (max-width: 900px) {
  .page-sauna .bcase__slogans { grid-template-columns: 1fr; gap: 30px; }
  .page-sauna .bcase__stats { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .page-sauna .bcase__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page-sauna .bcase__table tr { display: block; padding: 14px 0; border-bottom: 1px solid rgba(208, 199, 179, 0.16); }
  .page-sauna .bcase__table td { display: flex; justify-content: space-between; gap: 18px; border: 0; padding: 4px 0; }
  .page-sauna .bcase__table td::before {
    content: attr(data-l);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(208, 199, 179, 0.62);
  }
}
