/* ===========================================================
   TC SWISS / 2026
   Lifestyle premium. Editorial restraint. Real photography.
   =========================================================== */

/* ===== SELF-HOSTED FONTS (latin subset, same origin = fast) =====
   Display: Schibsted Grotesk. Body: Inter Tight. font-display:swap. */
@font-face { font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/schibsted-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Schibsted Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/schibsted-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Schibsted Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/schibsted-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Schibsted Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/schibsted-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/inter-tight-400.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/inter-tight-500.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/inter-tight-600.woff2') format('woff2'); }

:root {
  /* Teal is the temperature of everything — no pure black, no cold grey.
     Darks and text are teal-charcoal; the paper is warm limestone so the
     teal reads rich and inviting (warmth, for a company about warmth). */
  --ink:        #15282F;   /* deep teal-charcoal — replaces pure black */
  --ink-2:      #1E3942;
  --paper:      #F1ECE3;   /* warm limestone */
  --paper-2:    #E8E1D4;   /* deeper sand for alternating sections */
  --line:       #DBD2C3;   /* warm hairline */
  --line-d:     #21434E;   /* teal-tinted hairline on dark */
  --white:      #FFFFFF;
  --graphite:   #4B4A44;   /* warm grey body text */
  --mute:       #8B8475;   /* warm muted */
  --stone:      #B7AF9F;   /* warm stone */
  --r:          14px;      /* soft radius for cards & media */
  /* ===== BRAND ===== TC Swiss petrol/teal — the bus livery */
  --brand:        #1D4B5F;   /* core brand */
  --brand-d:      #163A48;   /* deep section surface */
  --brand-2:      #0C2029;   /* deepest — footer / hero ground */
  --red:        #E1251B;  /* TC Swiss red — the energetic accent / spark */
  --amber:      #C97B2F;

  /* Swiss typographic system — one expressive grotesque (display + labels),
     one neutral grotesque (body). Var names kept for minimal churn. */
  --serif:  'Schibsted Grotesk', 'Inter Tight', system-ui, sans-serif;
  --sans:   'Inter Tight', system-ui, sans-serif;
  --mono:   'Schibsted Grotesk', 'Inter Tight', system-ui, sans-serif;

  --pad:       max(28px, 4vw);
  --container: 1520px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }

/* Koppen: lange (samengestelde) woorden mogen afbreken i.p.v. buiten beeld te
   vallen door body{overflow-x:hidden}. Breekt alleen als een woord niet past. */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 400;
}
.eyebrow .num { color: var(--mute); }
.eyebrow.light { color: rgba(247,244,237,.8); }
.eyebrow.light .num { color: rgba(247,244,237,.55); }

.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 80;
  padding: 22px var(--pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              padding .4s var(--ease), color .4s var(--ease);
  border-bottom: 1px solid transparent;
  color: var(--paper);
}
.nav.scrolled {
  background: rgba(247, 244, 237, .94);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom-color: var(--line);
  padding-top: 14px; padding-bottom: 14px;
  color: var(--ink);
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.brand img {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity .35s var(--ease);
}
.brand .logo-dark { position: absolute; top: 0; left: 0; opacity: 0; }
.nav.scrolled .brand .logo-light { opacity: 0; }
.nav.scrolled .brand .logo-dark  { opacity: 1; }
.nav ul {
  display: flex;
  gap: 36px;
  list-style: none; margin: 0; padding: 0;
  justify-content: center;
}
.nav a.lk {
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -.005em;
  position: relative;
  padding-bottom: 2px;
}
.nav a.lk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a.lk:hover::after { transform: scaleX(1); }
.nav .cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav.scrolled .cta { background: var(--brand); color: var(--paper); border-color: var(--brand); }
.nav .cta:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.nav .cta .dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
.nav.scrolled .cta .dot, .nav .cta:hover .dot { background: var(--white); }

/* ===== HERO : FULL BLEED LIFESTYLE ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--brand-2);
  color: var(--paper);
  isolation: isolate;
}
.hero .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/images/lifestyle-livingroom.jpg');
  background-size: cover;
  background-position: center 60%;
  transform: scale(1.05);
  animation: heroDrift 30s ease-in-out infinite;
}
@keyframes heroDrift {
  0%, 100% { transform: scale(1.05) translateY(0); }
  50%      { transform: scale(1.08) translateY(-12px); }
}
.hero .scrim {
  position: absolute;
  inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.15) 35%, rgba(10,10,10,0) 55%, rgba(13,38,49,.9) 100%),
    linear-gradient(90deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.05) 60%, rgba(10,10,10,0) 100%);
}
.hero .content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 130px var(--pad) 48px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 40px;
}
.hero .main {
  display: grid;
  grid-template-columns: 1.3fr 460px;
  gap: 80px;
  align-items: end;
}
.hero .copy { max-width: 720px; }
.hero .deck { margin: 0 0 36px; }

/* ===== LEAD FORM ===== */
.lead {
  position: relative;
  background: rgba(18, 48, 62, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.12);
  padding: 32px 32px 28px;
  color: var(--paper);
  overflow: hidden;
}
.lead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(225,37,27,.10), rgba(0,0,0,0) 60%);
  pointer-events: none;
}
.lead .h-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(247,244,237,.14);
}
.lead .h-row .lab {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247,244,237,.7);
}
.lead .h-row .lab::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
  animation: ping 2.2s ease-in-out infinite;
}
.lead .h-row .step {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: rgba(247,244,237,.55);
}
.lead h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 22px;
  color: var(--paper);
  max-width: 12ch;
}
.lead h3 i { font-style: italic; color: var(--paper); }

.lead .grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.lead .field {
  position: relative;
  margin-bottom: 14px;
}
.lead label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247,244,237,.55);
  margin-bottom: 6px;
}
.lead input[type="text"], .lead input[type="email"], .lead input[type="tel"] {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(247,244,237,.24);
  padding: 6px 0 8px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: -.005em;
  transition: border-color .25s var(--ease);
  outline: none;
}
.lead input::placeholder { color: rgba(247,244,237,.34); }
.lead input:focus { border-bottom-color: var(--red); }

.lead .chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.lead .chip {
  background: rgba(247,244,237,.06);
  border: 1px solid rgba(247,244,237,.12);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 6px;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
  text-align: center;
}
.lead .chip:hover { background: rgba(247,244,237,.12); }
.lead .chip.active { background: var(--red); border-color: var(--red); color: var(--white); }

.lead .submit {
  width: 100%;
  margin-top: 18px;
  padding: 17px 20px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lead .submit:hover { background: var(--red); color: var(--white); }
.lead .submit .arr {
  width: 16px; height: 1px; background: currentColor; position: relative;
  transition: width .25s var(--ease);
}
.lead .submit .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.lead .submit:hover .arr { width: 24px; }

.lead .foot {
  margin-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247,244,237,.55);
}
.lead .foot b { color: var(--paper); font-weight: 500; }
.hero .copy {
  align-self: end;
  max-width: 1040px;
}
.hero .copy .eyebrow {
  margin-bottom: 32px;
  display: inline-flex; gap: 12px; align-items: center;
}
.hero .copy .eyebrow::before {
  content: ""; display: inline-block;
  width: 36px; height: 1px; background: var(--paper); opacity: .75;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 7vw, 132px);
  line-height: .96;
  letter-spacing: -.022em;
  margin: 0 0 28px;
  color: var(--paper);
  max-width: 14ch;
}
.hero h1 i { font-style: italic; }
.hero h1 .accent {
  display: inline-block;
  position: relative;
  color: var(--paper);
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: -.02em; right: -.04em;
  bottom: -.06em;
  height: .06em;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  animation: drawline 1.4s var(--ease) .8s forwards;
}
@keyframes drawline { to { transform: scaleX(1); } }

.hero .deck {
  max-width: 540px;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  color: rgba(247,244,237,.85);
  margin: 0 0 44px;
}
.hero .cta-row { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  letter-spacing: -.005em;
  border-radius: 999px;
  border: 1px solid var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-pill:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.btn-pill .arr {
  width: 16px; height: 1px; background: currentColor; position: relative;
  transition: width .3s var(--ease);
}
.btn-pill .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn-pill:hover .arr { width: 24px; }
.btn-pill.ghost { background: transparent; color: var(--paper); border-color: rgba(247,244,237,.4); }
.btn-pill.ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.hero .footer-row {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: end;
  padding-top: 32px;
  margin-top: 60px;
  border-top: 1px solid rgba(247,244,237,.18);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247,244,237,.7);
}
.hero .footer-row .col b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 30px);
  text-transform: none;
  letter-spacing: -.012em;
  color: var(--paper);
  margin-bottom: 8px;
}
.hero .footer-row .col i {
  font-style: normal;
  color: var(--red);
  display: inline-block;
  margin-left: 4px;
}

/* Floating scroll cue */
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  bottom: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,244,237,.55);
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.scroll-cue .l {
  width: 60px; height: 1px; background: rgba(247,244,237,.4);
  position: relative; overflow: hidden;
}
.scroll-cue .l::after {
  content: ""; position: absolute; left: -30px; top: 0; width: 30px; height: 1px;
  background: var(--paper);
  animation: scrollBar 2.4s var(--ease) infinite;
}
@keyframes scrollBar {
  0% { left: -30px; } 100% { left: 60px; }
}

/* ===== STATEMENT ===== */
.statement {
  background: var(--paper);
  padding: 180px var(--pad) 160px;
  position: relative;
}
.statement .ix-row {
  max-width: var(--container);
  margin: 0 auto 80px;
  display: flex; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.statement .ix-row .num { color: var(--mute); }

.statement .pull {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
  margin-bottom: 100px;
}
.statement .pull h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 132px);
  line-height: .98;
  letter-spacing: -.022em;
  margin: 0;
  color: var(--ink);
  max-width: 18ch;
}
.statement .pull h2 i {
  font-style: italic;
  color: var(--ink);
  position: relative;
}
.statement .pull h2 .ast {
  font-family: var(--serif);
  font-style: italic;
  color: var(--red);
  font-size: .55em;
  vertical-align: .8em;
  margin-left: .05em;
}
.statement .pull .ftn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--graphite);
  max-width: 280px;
  padding-bottom: 8px;
  text-align: right;
}
.statement .pull .ftn .red { color: var(--red); }
.statement .pull .ftn .sig {
  display: block;
  margin-top: 24px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}

.statement .proof {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.statement .proof .cell {
  background: var(--paper);
  padding: 36px 28px 32px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.statement .proof .cell .top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.statement .proof .cell .ix {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.statement .proof .cell .ix .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--red);
  letter-spacing: -.012em;
  margin-right: 8px;
  vertical-align: -2px;
}
.statement .proof .cell h5 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.04;
  letter-spacing: -.014em;
  margin: 8px 0 0;
  color: var(--ink);
  max-width: 14ch;
}
.statement .proof .cell h5 i { font-style: italic; }
.statement .proof .cell p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--graphite);
  margin: 14px 0 0;
  max-width: 320px;
}
.statement .proof .cell .data {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.statement .proof .cell .data b { color: var(--ink); font-weight: 500; }

/* ===== EXISTING HOME (the "your radiators" moment) ===== */
.existing {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.existing .wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
}
.existing .picture {
  position: relative;
  overflow: hidden;
}
.existing .picture img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  transition: transform 6s var(--ease);
}
.existing.in .picture img { transform: scale(1); }
.existing .picture::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0) 60%, rgba(10,10,10,.5) 100%);
}
.existing .picture .pin {
  position: absolute;
  z-index: 3;
  bottom: 32px; left: 32px;
  background: rgba(10,10,10,.7);
  backdrop-filter: blur(8px);
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
}
.existing .picture .pin .acc {
  display: inline-block;
  width: 6px; height: 6px; background: var(--red);
  border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
  animation: ping 2s ease-in-out infinite;
}
@keyframes ping {
  0%,100% { box-shadow: 0 0 0 0 rgba(225,37,27,.6); }
  50%     { box-shadow: 0 0 0 6px rgba(225,37,27,0); }
}
.existing .body {
  padding: 100px 60px;
  display: flex; flex-direction: column;
  justify-content: center;
  background: var(--ink);
}
.existing .body .ix-row {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  padding: 14px 0;
  margin-bottom: 40px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.existing .body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 32px;
  color: var(--paper);
  max-width: 12ch;
}
.existing .body h3 i { font-style: italic; }
.existing .body p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(247,244,237,.78);
  margin: 0 0 18px;
  max-width: 460px;
}
.existing .body p b { color: var(--paper); font-weight: 500; }
.existing .checks {
  margin-top: 30px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--line-d);
  padding-top: 30px;
}
.existing .checks .ck {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 16px;
  align-items: center;
  font-size: 15px;
  color: var(--paper);
}
.existing .checks .ck .v {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}
.existing .checks .ck::before {
  content: "+";
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  color: var(--red);
}

/* ===== STAT MOMENT ===== */
.stat {
  padding: 180px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.stat .wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  align-items: end;
}
.stat .big {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(160px, 23vw, 380px);
  line-height: .84;
  letter-spacing: -.04em;
  margin: 0;
  color: var(--ink);
  position: relative;
  font-feature-settings: "ss01";
}
.stat .big sup {
  font-family: var(--sans);
  font-size: .14em;
  font-weight: 400;
  vertical-align: 2.4em;
  color: var(--red);
  margin-left: .12em;
  letter-spacing: 0;
}
.stat .big i { font-style: italic; }
.stat .copy { padding-bottom: 24px; }
.stat .copy .ix {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 24px;
}
.stat .copy p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 1.8vw, 32px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0 0 18px;
}
.stat .copy p .red { color: var(--red); font-style: italic; }
.stat .copy .note {
  font-family: var(--sans);
  font-style: normal;
  font-size: 13.5px;
  color: var(--graphite);
  line-height: 1.55;
  margin-top: 24px;
  max-width: 380px;
}

/* ===== RANGE ===== */
.range {
  padding: 180px 0 0;
  background: var(--paper);
}
.range .wrap { padding-left: var(--pad); padding-right: var(--pad); }
.range .head {
  max-width: var(--container);
  margin: 0 auto 60px;
  padding: 0 var(--pad);
}
.range .head .ix-row {
  display: flex; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.range .head .ix-row .num { color: var(--mute); }
.range .head .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.range .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.2vw, 116px);
  line-height: .96;
  letter-spacing: -.022em;
  margin: 0;
}
.range .head h2 i { font-style: italic; }
.range .head .rhs {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--graphite);
  max-width: 480px;
  justify-self: end;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.tile {
  position: relative;
  padding: 40px 36px 36px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease);
  min-height: 580px;
  overflow: hidden;
}
.tile .ix {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex; justify-content: space-between;
}
.tile .ix .arr {
  width: 14px; height: 1px; background: currentColor;
  position: relative;
  transition: width .3s var(--ease);
}
.tile .ix .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.tile:hover .ix .arr { width: 36px; }
.tile .image {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin: 0 -16px;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.04), transparent 60%);
}
.tile .image img {
  max-height: 340px;
  width: auto;
  max-width: 90%;
  transition: transform .8s var(--ease);
}
.tile:hover .image img { transform: scale(1.05); }
.tile .body { display: flex; flex-direction: column; gap: 10px; }
.tile .body h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: .95;
  letter-spacing: -.018em;
  margin: 0;
}
.tile .body h4 i { font-style: italic; }
.tile .body p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--graphite);
  margin: 0;
  max-width: 360px;
}
.tile .foot {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex; justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.tile .foot b { color: var(--ink); font-weight: 500; }

.tile.c-feat { grid-column: span 7; min-height: 660px; background: var(--ink); color: var(--paper); flex-direction: row; padding: 0; gap: 0; align-items: stretch; }
.tile.c-feat .l { flex: 1; padding: 44px 40px; display: flex; flex-direction: column; }
.tile.c-feat .image { flex: 1.2; margin: 0; background: linear-gradient(135deg, #1c3a44, #0f2630); padding: 30px; align-items: center; }
.tile.c-feat .image img { max-height: 100%; max-width: 100%; }
.tile.c-feat .ix { color: var(--stone); margin-bottom: auto; }
.tile.c-feat .ix .arr { background: var(--paper); }
.tile.c-feat .ix .arr::after { border-top-color: var(--paper); border-right-color: var(--paper); }
.tile.c-feat .body { padding-top: 40px; }
.tile.c-feat .body h4 { color: var(--paper); font-size: 64px; line-height: .92; }
.tile.c-feat .body p { color: var(--stone); max-width: 380px; font-size: 16px; }
.tile.c-feat .foot { color: var(--stone); border-color: var(--line-d); margin-top: 32px; padding-top: 18px; }
.tile.c-feat .foot b { color: var(--paper); }
.tile.c-feat:hover { background: #161616; }

.tile.c-elite { grid-column: span 5; }
.tile.c-boiler { grid-column: span 4; }
.tile.c-breeze { grid-column: span 4; }
.tile.c-buffer { grid-column: span 4; }
.tile.c-elite, .tile.c-boiler, .tile.c-breeze, .tile.c-buffer { background: var(--paper-2); }
.tile.c-elite:hover, .tile.c-boiler:hover, .tile.c-breeze:hover, .tile.c-buffer:hover {
  background: var(--paper); color: var(--ink);
}

/* Buffer tile gets a special accent: the water splash photo */
.tile.c-buffer .image img { max-height: 360px; }
.tile.c-buffer { background: linear-gradient(180deg, #C9DCE6 0%, #B8CCD9 100%); }
.tile.c-buffer h4, .tile.c-buffer .ix, .tile.c-buffer .foot, .tile.c-buffer .foot b { color: var(--ink); }
.tile.c-buffer p { color: rgba(10,10,10,.7); }
.tile.c-buffer:hover { background: linear-gradient(180deg, #D6E5ED 0%, #C5D6E1 100%); }

/* ===== TESTIMONIAL ===== */
.quote {
  padding: 180px var(--pad);
  background: var(--paper-2);
  position: relative;
}
.quote .wrap {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  max-width: var(--container);
  margin: 0 auto;
  align-items: start;
}
.quote .lhs .por {
  width: 100%; aspect-ratio: 3/4;
  background: url('/images/lifestyle-modern-home.jpg') center/cover;
  position: relative;
}
.quote .lhs .por::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(10,10,10,.05);
}
.quote .lhs .ix {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex; justify-content: space-between;
}
.quote .rhs .open {
  font-family: var(--serif);
  font-style: italic;
  font-size: 120px;
  line-height: .6;
  color: var(--red);
  margin: 0 0 -10px;
}
.quote .rhs blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.2;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--ink);
}
.quote .rhs blockquote b { font-style: normal; }
.quote .rhs .att {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.quote .rhs .att b { display: block; color: var(--ink); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -.01em; text-transform: none; margin-bottom: 6px; }

/* ===== PROCESS ===== */
.process {
  padding: 180px var(--pad);
  background: var(--paper);
}
.process .wrap { max-width: var(--container); margin: 0 auto; }
.process .head { margin-bottom: 80px; }
.process .head .ix {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 18px;
}
.process .head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 96px);
  line-height: 1;
  letter-spacing: -.022em;
  margin: 0;
  max-width: 1000px;
}
.process .head h2 i { font-style: italic; }
.process .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process .step {
  background: var(--paper);
  padding: 40px 28px;
  display: flex; flex-direction: column;
  gap: 16px;
  min-height: 320px;
}
.process .step .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 88px;
  line-height: .8;
  letter-spacing: -.022em;
  color: var(--red);
  margin: 0 0 12px;
}
.process .step h5 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -.012em;
  margin: 0;
  line-height: 1.1;
}
.process .step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--graphite);
  margin: 0;
  max-width: 280px;
}
.process .step .meta {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ===== CTA CLOSING ===== */
.cta {
  padding: 200px var(--pad);
  background: var(--brand-d);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.cta .wrap {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  position: relative;
  z-index: 2;
}
.cta .lhs .ix {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-block;
  margin-bottom: 28px;
}
.cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7.4vw, 144px);
  line-height: .94;
  letter-spacing: -.024em;
  margin: 0;
  color: var(--paper);
}
.cta h2 i { font-style: italic; }
.cta h2 .red { color: var(--red); font-style: italic; }
.cta .rhs { padding-bottom: 24px; }
.cta .rhs p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(247,244,237,.78);
  margin: 0 0 32px;
  max-width: 440px;
}
.cta .rhs .actions { display: flex; flex-direction: column; gap: 0; max-width: 460px; }
.cta-row-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--line-d);
  text-decoration: none;
  color: var(--paper);
  transition: padding .3s var(--ease);
}
.cta-row-item:last-child { border-bottom: 1px solid var(--line-d); }
.cta-row-item:hover { padding-left: 10px; }
.cta-row-item .lab {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  letter-spacing: -.012em;
  line-height: 1;
}
.cta-row-item .v {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 8px;
}
.cta-row-item .arr {
  width: 18px; height: 1px; background: var(--paper);
  position: relative;
  transition: width .3s var(--ease);
}
.cta-row-item .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid var(--paper); border-right: 1px solid var(--paper);
  transform: rotate(45deg);
}
.cta-row-item:hover .arr { width: 36px; }
.cta-row-item:hover .arr,
.cta-row-item:hover .arr::after { border-color: var(--red); background: var(--red); }
.cta-row-item:hover .lab { color: var(--red); }

/* Decorative swiss cross watermark */
.cta .cross {
  position: absolute;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  width: 520px; height: 520px;
  opacity: .04;
  z-index: 1;
}
.cta .cross::before, .cta .cross::after { content: ""; position: absolute; background: var(--paper); }
.cta .cross::before { left: 50%; top: 18%; width: 18%; height: 64%; transform: translateX(-50%); }
.cta .cross::after  { top: 50%; left: 18%; height: 18%; width: 64%; transform: translateY(-50%); }

/* ===== FOOTER ===== */
footer {
  background: var(--brand-2);
  color: var(--paper);
  padding: 100px var(--pad) 36px;
}
footer .wrap { max-width: var(--container); margin: 0 auto; }
footer .top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line-d);
}
footer .brand-col h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 80px);
  line-height: 1;
  letter-spacing: -.024em;
  margin: 0 0 28px;
}
footer .brand-col h3 i { font-style: italic; }
footer .brand-col p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--stone);
  max-width: 400px;
  margin: 0 0 28px;
}
footer .brand-col .contact {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.9;
}
footer .col h6 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 24px;
  font-weight: 400;
}
footer .col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
footer .col ul a { text-decoration: none; color: var(--paper); font-size: 14px; transition: color .25s var(--ease); }
footer .col ul a:hover { color: var(--red); }
footer .bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--mute);
}

/* ===== REVEALS ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }

/* ===== MOBILE NAV / MENU ===== */
.nav-toggle {
  display: none;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  width: 44px; height: 44px; padding: 0;
  cursor: pointer; color: inherit;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
}
.nav-toggle span {
  display: block; width: 26px; height: 1.5px;
  background: currentColor;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
body.menu-open .nav { color: var(--paper); background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
body.menu-open { overflow: hidden; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--brand-2); color: var(--paper);
  padding: 104px var(--pad) 40px;
  display: flex; flex-direction: column;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .55s var(--ease), visibility .55s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
body.menu-open .mobile-menu { transform: none; visibility: visible; }
.mobile-menu .mm-inner { display: flex; flex-direction: column; border-top: 1px solid var(--line-d); }
.mm-link {
  display: flex; align-items: baseline; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--line-d);
  text-decoration: none; color: var(--paper);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 8vw, 42px); letter-spacing: -.02em; line-height: 1;
  opacity: 0; transform: translateY(16px);
  transition: color .25s var(--ease);
}
.mm-link:hover { color: var(--red); }
.mm-link .mm-n {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  color: var(--brand); font-weight: 500; flex: none;
}
@keyframes mmIn { to { opacity: 1; transform: none; } }
body.menu-open .mm-link { animation: mmIn .6s var(--ease) both; }
body.menu-open .mm-link:nth-child(1) { animation-delay: .10s; }
body.menu-open .mm-link:nth-child(2) { animation-delay: .17s; }
body.menu-open .mm-link:nth-child(3) { animation-delay: .24s; }
body.menu-open .mm-link:nth-child(4) { animation-delay: .31s; }
.mobile-menu .mm-foot { margin-top: auto; padding-top: 36px; display: flex; flex-direction: column; gap: 22px; }
.mobile-menu .mm-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 24px; background: var(--red); color: var(--white);
  border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em;
}
.mobile-menu .mm-cta .dot { width: 6px; height: 6px; background: var(--white); border-radius: 50%; }
.mobile-menu .mm-contact {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.9; color: var(--stone);
}
.mobile-menu .mm-contact a { color: var(--paper); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
  body.menu-open .mm-link { animation: none; opacity: 1; transform: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .hero .main { grid-template-columns: 1fr; gap: 40px; }
  .hero .footer-row { grid-template-columns: 1fr 1fr; }
  .statement .wrap { grid-template-columns: 1fr; gap: 32px; }
  .statement .pull { grid-template-columns: 1fr; gap: 24px; }
  .statement .pull .ftn { text-align: left; }
  .statement .proof { grid-template-columns: 1fr; }
  .existing .wrap { grid-template-columns: 1fr; }
  .existing .picture { min-height: 420px; }
  .existing .body { padding: 60px 36px; }
  .stat .wrap { grid-template-columns: 1fr; gap: 40px; }
  .range .head .row { grid-template-columns: 1fr; gap: 28px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .tile.c-feat { grid-column: span 2; flex-direction: column; padding: 40px 32px; }
  .tile.c-feat .l { padding: 0; }
  .tile.c-feat .image { margin: 0 -32px; }
  .tile.c-elite { grid-column: span 2; }
  .tile.c-boiler, .tile.c-breeze { grid-column: span 1; }
  .tile.c-buffer { grid-column: span 2; }
  .quote .wrap { grid-template-columns: 1fr; gap: 40px; }
  .quote .lhs .por { aspect-ratio: 16/9; }
  .process .steps { grid-template-columns: 1fr 1fr; }
  .cta .wrap { grid-template-columns: 1fr; gap: 36px; }
  footer .top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .hero .footer-row { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero .lead { max-width: 520px; }
}
/* Tablet portrait & below: switch to the mobile menu */
@media (max-width: 820px) {
  .nav { grid-template-columns: 1fr auto; gap: 16px; }
  .nav > nav { display: none; }
  .nav .cta { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .grid .tile { grid-column: span 1; }
  .process .steps { grid-template-columns: 1fr; }
  .quote .rhs .att { grid-template-columns: 1fr; }
  footer .top { grid-template-columns: 1fr; }
  .statement, .stat, .quote, .process, .cta { padding-top: 110px; padding-bottom: 110px; }
  .range { padding-top: 110px; }
  .range .head { padding: 0 var(--pad); }
  .hero h1 { font-size: clamp(48px, 13vw, 72px); }
  .hero .footer-row { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  :root { --pad: 22px; }
  .hero .content { padding: 104px var(--pad) 36px; gap: 28px; }
  .hero .lead { padding: 24px 22px 22px; }
  .lead h3 { font-size: 26px; }
  .lead .chips { grid-template-columns: 1fr 1fr; }
  .lead .chip { padding: 12px 8px; }
  .statement, .stat, .quote, .process, .cta { padding-top: 88px; padding-bottom: 88px; }
  .range { padding-top: 88px; }
  .existing .body { padding: 48px 24px; }
  .existing .picture { min-height: 320px; }
  .tile { min-height: auto; padding: 32px 24px 28px; gap: 16px; }
  .tile .image { min-height: 240px; }
  .tile .body h4 { font-size: 34px; }
  .tile.c-feat .body h4 { font-size: 44px; }
  .process .step { min-height: auto; padding: 32px 24px; }
  .process .step .n { font-size: 64px; }
  .quote .rhs .open { font-size: 84px; }
  .cta-row-item .lab { font-size: 22px; }
  .cta-row-item { padding: 22px 0; gap: 14px; }
  .stat .stat-key { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stat-cap { padding-bottom: 0; max-width: none; }
  .stat-head { flex-direction: column; gap: 6px; align-items: flex-start; }
  footer { padding-top: 72px; }
  footer .top { padding-bottom: 56px; }
  footer .bot { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 400px) {
  :root { --pad: 18px; }
  .hero h1 { font-size: clamp(38px, 12.5vw, 50px); }
  .lead h3 { font-size: 23px; }
  .nav { padding-left: var(--pad); padding-right: var(--pad); }
}

/* ===========================================================
   DISPLAY WEIGHT — grotesque needs more mass than the old
   high-contrast serif to hold the big sizes. Swiss-confident,
   still refined. (Layered after section rules to win on weight.)
   =========================================================== */
/* Big display: light weight + very tight tracking = refined, expensive,
   not loud. Size carries the impact, not weight. */
.hero h1,
.statement .pull h2,
.range .head h2,
.process .head h2,
.cta h2,
footer .brand-col h3,
.existing .body h3 { font-weight: 400; letter-spacing: -.04em; }

/* Mid display keeps a touch more body so it holds at smaller sizes */
.stat .big,
.lead h3,
.statement .proof .cell h5,
.tile .body h4,
.tile.c-feat .body h4,
.process .step h5,
.process .step .n,
.statement .proof .cell .ix .n,
.quote .rhs blockquote,
.quote .rhs .open,
.quote .rhs .att b,
.cta-row-item .lab,
.hero .footer-row .col b,
.stat .copy p { font-weight: 500; }

/* Labels: tighten the wide editorial tracking a touch and lock
   tabular figures so the grotesque caps read as Swiss spec marks,
   not typewriter bylines. */
.eyebrow,
.lead .h-row .lab, .lead .h-row .step, .lead label, .lead .chip, .lead .foot,
.statement .ix-row, .statement .proof .cell .ix, .statement .proof .cell .data,
.existing .body .ix-row, .existing .picture .pin, .existing .checks .ck .v,
.stat .copy .ix, .range .head .ix-row, .tile .ix, .tile .foot,
.quote .lhs .ix, .quote .rhs .att, .process .head .ix, .process .step .meta,
.cta .lhs .ix, .cta-row-item .v, footer .brand-col .contact, footer .col h6,
footer .bot, .scroll-cue {
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ===========================================================
   BRAND COLOR — #1D4B5F (TC Swiss petrol/teal, the bus livery).
   Deep teal carries large surfaces (CTA, footer); a brighter
   teal handles accents that must read on dark backgrounds.
   =========================================================== */

/* Accents are the TC Swiss red spark — it carries energy the deep
   teal can't, and reads beautifully on dark photos and on teal alike.
   (Most red accents come straight from --red; these sit on dark
   surfaces and were briefly mis-tinted, now restored.) */
.cta .cross { opacity: .07; }
.cta-row-item,
.cta-row-item:last-child { border-color: rgba(247,244,237,.16); }
footer .top { border-bottom-color: rgba(247,244,237,.14); }

/* ===========================================================
   NO OBLIQUE TYPE — the grotesque reads wrong slanted.
   Emphasis now lives in the brand teal, woven through every
   headline, so the colour feels owned, not applied afterward.
   =========================================================== */
.lead h3 i, .hero h1 i, .statement .pull h2 i, .statement .pull h2 .ast,
.statement .pull .ftn, .statement .proof .cell .ix .n, .statement .proof .cell h5 i,
.existing .body h3 i, .existing .checks .ck::before, .stat .big i, .stat .copy p,
.stat .copy p .red, .range .head h2 i, .tile .body h4 i, .quote .rhs .open,
.quote .rhs blockquote, .quote .rhs .att b, .process .head h2 i, .process .step .n,
.cta h2 i, .cta h2 .red, .cta-row-item .lab, footer .brand-col h3 i {
  font-style: normal;
}

/* Emphasis stays upright and inherits the headline colour — no
   slanting, no colour sprinkled across every heading. The one
   exception is the form heading, which keeps a single red spark
   to rhyme with the red submit button below it. */
.lead h3 i { color: var(--red); }

/* Primary action: solid TC Swiss red on the teal form panel */
.lead .submit { background: var(--red); color: var(--white); }
.lead .submit:hover { background: var(--ink); color: var(--white); }

/* ===========================================================
   TEAL AS THE HOUSE COLOUR — it now carries a full mid-page
   section, the headline statistic and every section marker,
   so the eye reads #1D4B5F as "this brand", not an accent.
   =========================================================== */

/* The "in situ" section becomes a deep-teal field (was near-black) */
.existing, .existing .body { background: var(--brand-d); }
.existing .body .ix-row { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.7); }
.existing .checks { border-top-color: rgba(255,255,255,.16); }
.existing .checks .ck .v { color: rgba(255,255,255,.5); }

/* Section markers in teal — the quiet, systemic brand thread */
.statement .ix-row, .stat .copy .ix, .range .head .ix-row,
.process .head .ix, .tile .ix, .quote .lhs .ix { color: var(--brand); }
.statement .ix-row .num, .range .head .ix-row .num { color: var(--brand); opacity: .55; }

/* Headline statistic in brand teal (the red "%" stays the spark) */
.stat .big { color: var(--brand); }

/* Savings gauge — fills the stat block and proves the 60% in teal */
.stat .figure { align-self: end; }
.stat .gauge { margin-top: 52px; max-width: 580px; display: flex; flex-direction: column; gap: 24px; }
.stat .gauge .grow .lab {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite);
}
.stat .gauge .grow .lab .amt { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.stat .gauge .track { position: relative; height: 12px; background: var(--paper-2); overflow: hidden; }
.stat .gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; }
.stat .gauge .fill.old { width: 100%; background: var(--stone); }
.stat .gauge .fill.new { width: 40%; background: var(--brand); }
@keyframes growbar { from { width: 0; } }
.stat .gauge .cut {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
}
.stat .gauge .cut::before { content: ""; width: 18px; height: 1px; background: var(--red); }

@media (max-width: 1100px) { .stat .gauge { margin-top: 36px; } }

/* ===========================================================
   POLISH PASS — depth, motion, refinement (the wow layer)
   =========================================================== */

/* Fine film grain over everything — tactile, premium depth */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 75; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero entrance — gated on web fonts so the big headline never reflows
   mid-animation (that swap-jump is what read as a janky/"rommelig" load).
   With JS the whole content block is held hidden until .fonts-ready
   (capped at 700ms by the inline head script), then rises in one tight,
   cohesive stagger. No-JS falls back to plain visible content. */
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .hero .content { opacity: 0; }
.js.fonts-ready .hero .content { opacity: 1; }
.fonts-ready .hero .copy .eyebrow { animation: heroRise .7s var(--ease) .02s both; }
.fonts-ready .hero h1            { animation: heroRise .75s var(--ease) .08s both; }
.fonts-ready .hero .deck         { animation: heroRise .75s var(--ease) .16s both; }
.fonts-ready .hero .cta-row      { animation: heroRise .75s var(--ease) .22s both; }
.fonts-ready .hero .lead         { animation: heroRise .8s  var(--ease) .12s both; }
.fonts-ready .hero .footer-row   { animation: heroRise .75s var(--ease) .26s both; }

/* Premium float on the lead form panel */
.lead { box-shadow: 0 50px 90px -30px rgba(4,16,22,.7), inset 0 1px 0 rgba(255,255,255,.07); }

/* Scroll reveals — animation-based, gated on JS so no-JS stays visible */
.js-anim .r-up { opacity: 0; }
.js-anim .r-up.in { animation: heroRise .85s var(--ease) both; }

/* Product tiles: lift + soft shadow + drawn underline on hover */
.tile { transition: background .35s var(--ease), color .35s var(--ease),
                     transform .5s var(--ease), box-shadow .5s var(--ease); }
.grid .tile:hover { transform: translateY(-5px); box-shadow: 0 36px 64px -30px rgba(22,57,74,.5); z-index: 3; }
.tile .body h4 { position: relative; }
.tile .body h4::after {
  content: ""; position: absolute; left: 0; bottom: -8px; height: 2px; width: 0;
  background: var(--red); transition: width .45s var(--ease);
}
.tile:hover .body h4::after { width: 56px; }

/* Buffer tile harmonised into the teal family */
.tile.c-buffer { background: linear-gradient(180deg, #CBDEE2 0%, #AFCBD2 100%); }
.tile.c-buffer:hover { background: linear-gradient(180deg, #D8E8EB 0%, #BFD6DC 100%); }

/* Stat: header rail fills the empty top; gauge grows in when seen */
.stat { padding-top: 140px; }
.stat-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 18px; margin-bottom: 72px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
}
.stat-head .r { color: var(--mute); }
.stat .figure.seen .gauge .fill.new { animation: growbar 1.4s var(--ease) .25s both; }

/* nav glass matches the warm limestone paper */
.nav.scrolled { background: rgba(241,236,227,.9); }

/* ===========================================================
   WARMTH & SOFTNESS — cards and media get a soft radius so the
   palette reads premium-inviting (à la a warm chalet), not cold
   and severe. Structure (grids, rails) stays Swiss-sharp.
   =========================================================== */
.lead { border-radius: var(--r); }
.quote .lhs .por { border-radius: var(--r); overflow: hidden; }
.tile.c-feat .image { border-radius: 0; }
.stat .gauge .track { border-radius: 7px; }
.stat .gauge .fill { border-radius: 7px; }
.existing .picture { border-radius: 0; }

/* Lift the feature tile's product onto a soft rounded plate */
.tile.c-feat .image img { filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }

/* Photographs warmed and lifted a touch */
.existing .picture img, .quote .lhs .por { box-shadow: 0 40px 70px -40px rgba(12,32,41,.5); }

/* ===========================================================
   SAVINGS GRAPHIC — a seasonal energy curve (gas vs TC Swiss).
   The shaded gap is the saving; the teal line draws itself in.
   =========================================================== */
.stat .wrap { align-items: start; }
.stat .figure { align-self: start; display: flex; flex-direction: column; }
.stat-key { display: flex; align-items: flex-end; gap: 30px; }
.stat .big { font-size: clamp(108px, 15vw, 236px); line-height: .8; margin: 0; }
.stat-cap { padding-bottom: 16px; font-size: 17px; line-height: 1.3; color: var(--ink); max-width: 210px; font-weight: 500; }
.stat-cap span { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 400; color: var(--graphite); }

.stat .chart { margin-top: 52px; width: 100%; }
.stat .chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.ch-legend { display: flex; gap: 34px; margin-bottom: 22px; flex-wrap: wrap; }
.ch-legend .k {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite);
}
.ch-legend .k i { width: 20px; height: 3px; border-radius: 2px; }
.ch-legend .k.gas i { background: var(--stone); }
.ch-legend .k.tc i { background: var(--brand); }
.ch-legend .k b { margin-left: 4px; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: -.01em; color: var(--ink); text-transform: none; }

.stat .chart .grid line { stroke: var(--line); stroke-width: 1; }
.stat .chart .line-gas { fill: none; stroke: var(--stone); stroke-width: 2; stroke-dasharray: 6 5; }
.stat .chart .line-tc  { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stat .chart .dot { fill: var(--paper); stroke: var(--brand); stroke-width: 2; }
.stat .chart .ann { stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 3 3; }
.stat .chart .ann-dot { fill: var(--red); }
.stat .chart .ann-txt { fill: var(--red); font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; font-weight: 500; }
.stat .chart .axis text { fill: var(--mute); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }

/* Draw-in on reveal: teal line strokes itself; the rest fades up */
.stat .chart .line-tc { stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.stat .figure.seen .chart .line-tc { transition: stroke-dashoffset 1.8s var(--ease) .35s; stroke-dashoffset: 0; }
.stat .chart .area, .stat .chart .line-gas, .stat .chart .dots, .stat .chart .ann-grp { opacity: 0; }
.stat .figure.seen .chart .area     { transition: opacity 1.1s var(--ease) .15s; opacity: 1; }
.stat .figure.seen .chart .line-gas { transition: opacity 1s   var(--ease) .1s;  opacity: 1; }
.stat .figure.seen .chart .dots     { transition: opacity .7s  var(--ease) 1.5s; opacity: 1; }
.stat .figure.seen .chart .ann-grp  { transition: opacity .8s  var(--ease) 1.7s; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .stat .chart .line-tc { stroke-dashoffset: 0; }
  .stat .chart .area, .stat .chart .line-gas, .stat .chart .dots, .stat .chart .ann-grp { opacity: 1; }
}
@media (max-width: 1100px) { .stat .chart { margin-top: 36px; } .stat-key { gap: 20px; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .js-anim .r-up { opacity: 1; }
  .hero .bg { animation: none; }
}

/* ===========================================================
   ════════════════════════════════════════════════════════
   INNER PAGES — shared component system (built on the tokens
   above). Subpages compose these blocks. Editorial Swiss,
   same restraint and warmth as the home page.
   ════════════════════════════════════════════════════════
   =========================================================== */

/* ---- SUB-HERO : compact editorial header for inner pages ---- */
.subhero {
  position: relative;
  background: var(--brand-2);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  padding: 200px var(--pad) 90px;
}
.subhero .wrap { max-width: var(--container); margin: 0 auto; position: relative; z-index: 2; }
.subhero .bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .34; transform: scale(1.04);
}
.subhero .scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(12,32,41,.55) 0%, rgba(12,32,41,.2) 40%, rgba(12,32,41,.92) 100%),
    linear-gradient(90deg, rgba(12,32,41,.6) 0%, rgba(12,32,41,0) 70%);
}
.crumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247,244,237,.6);
  margin-bottom: 40px;
}
.crumb a { color: rgba(247,244,237,.8); text-decoration: none; transition: color .25s var(--ease); }
.crumb a:hover { color: var(--red); }
.crumb .sep { color: rgba(247,244,237,.35); }
.subhero .ix-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; margin-bottom: 44px;
  border-bottom: 1px solid rgba(247,244,237,.18);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(247,244,237,.7);
}
.subhero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 6.6vw, 116px); line-height: .96;
  letter-spacing: -.04em; margin: 0; color: var(--paper); max-width: 17ch;
}
.subhero h1 i { font-style: normal; color: var(--red); }
.subhero .lede {
  margin: 32px 0 0; max-width: 600px;
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5;
  color: rgba(247,244,237,.82);
}
.subhero .meta-row {
  margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: rgba(247,244,237,.14);
  border: 1px solid rgba(247,244,237,.14);
}
.subhero .meta-row .m { background: var(--brand-2); padding: 22px 24px; }
.subhero .meta-row .m b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(24px, 2vw, 34px); letter-spacing: -.02em;
  color: var(--paper); margin-bottom: 6px;
}
.subhero .meta-row .m span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247,244,237,.6);
}
.subhero .meta-row .m b i { font-style: normal; color: var(--red); }

/* Decorative swiss cross (reusable, positioned by modifier) */
.swisscross {
  position: absolute; width: 460px; height: 460px; opacity: .05; z-index: 1;
  right: -110px; top: 50%; transform: translateY(-50%); pointer-events: none;
}
.swisscross::before, .swisscross::after { content: ""; position: absolute; background: var(--paper); }
.swisscross::before { left: 50%; top: 18%; width: 18%; height: 64%; transform: translateX(-50%); }
.swisscross::after  { top: 50%; left: 18%; height: 18%; width: 64%; transform: translateY(-50%); }

/* ---- SECTION SCAFFOLD ---- */
.section { padding: 130px var(--pad); background: var(--paper); }
.section.alt { background: var(--paper-2); }
.section.dark { background: var(--brand-d); color: var(--paper); }
.section.ink  { background: var(--ink); color: var(--paper); }
.section .wrap { max-width: var(--container); margin: 0 auto; }
.section-head { margin-bottom: 64px; }
.section-head .ix-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
}
.section.dark .section-head .ix-row, .section.ink .section-head .ix-row {
  border-color: var(--line-d); color: rgba(247,244,237,.7);
}
.section-head .ix-row .num { color: var(--brand); opacity: .55; }
.section-head .row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.section-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 96px); line-height: .98;
  letter-spacing: -.04em; margin: 0; max-width: 16ch;
}
.section-head h2 i { font-style: normal; color: var(--red); }
.section.dark .section-head h2, .section.ink .section-head h2 { color: var(--paper); }
.section-head .rhs {
  font-size: 16.5px; line-height: 1.55; color: var(--graphite); max-width: 480px; justify-self: end;
}
.section.dark .section-head .rhs, .section.ink .section-head .rhs { color: rgba(247,244,237,.78); }

/* ---- PROSE : editorial long-form text ---- */
.prose { max-width: 720px; }
.prose.wide { max-width: 860px; }
.prose p { font-size: 17px; line-height: 1.65; color: var(--graphite); margin: 0 0 22px; }
.prose h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin: 56px 0 18px;
}
.prose h3 i { font-style: normal; color: var(--red); }
.prose h4 {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  letter-spacing: -.012em; color: var(--ink); margin: 36px 0 12px;
}
.prose a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .25s var(--ease), color .25s var(--ease); }
.prose a:hover { color: var(--red); border-color: var(--red); }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose ul { list-style: none; margin: 0 0 26px; padding: 0; }
.prose ul li {
  position: relative; padding-left: 30px; margin-bottom: 14px;
  font-size: 16.5px; line-height: 1.6; color: var(--graphite);
}
.prose ul li::before {
  content: "+"; position: absolute; left: 0; top: -1px;
  font-family: var(--serif); font-style: normal; font-size: 20px; color: var(--red);
}
.section.dark .prose p, .section.ink .prose p,
.section.dark .prose ul li, .section.ink .prose ul li { color: rgba(247,244,237,.82); }
.section.dark .prose b, .section.ink .prose b { color: var(--paper); }
.section.dark .prose h3, .section.ink .prose h3 { color: var(--paper); }

/* ---- FEATURE / VALUE GRID (3-up cells, like home .proof) ---- */
.cells {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cells.two { grid-template-columns: repeat(2, 1fr); }
.cells.four { grid-template-columns: repeat(4, 1fr); }
.cell {
  background: var(--paper); padding: 40px 30px 34px;
  display: flex; flex-direction: column; gap: 14px; position: relative; min-height: 280px;
}
.section.alt .cell { background: var(--paper-2); }
.cell .top { display: flex; justify-content: space-between; align-items: baseline; }
.cell .ix {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
}
.cell .ix .n {
  font-family: var(--serif); font-style: normal; font-size: 22px; color: var(--red);
  margin-right: 8px; vertical-align: -2px;
}
.cell h5 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.06; letter-spacing: -.018em; margin: 8px 0 0; color: var(--ink); max-width: 15ch;
}
.cell h5 i { font-style: normal; color: var(--red); }
.cell p { font-size: 14.5px; line-height: 1.6; color: var(--graphite); margin: 12px 0 0; max-width: 340px; }
.cell .data {
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}
.cell .data b { color: var(--ink); font-weight: 600; }
.cell .ic { width: 40px; height: 40px; color: var(--brand); margin-bottom: 6px; }
.cell .ic svg { width: 100%; height: 100%; display: block; }

/* ---- SPLIT : image + body, 50/50 ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.split.flip .pic { order: 2; }
.split .pic { position: relative; overflow: hidden; background: var(--paper-2); }
.split .pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s var(--ease); }
.split.in .pic img { transform: scale(1); }
.split .pic.contain { display: flex; align-items: center; justify-content: center; padding: 56px;
  background: linear-gradient(135deg, #1c3a44, #0f2630); }
.split .pic.contain img { width: auto; height: auto; max-height: 78%; max-width: 86%; object-fit: contain;
  transform: none; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }
.split .pic .pin {
  position: absolute; bottom: 28px; left: 28px; z-index: 3;
  background: rgba(12,32,41,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 13px 17px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper);
}
.split .pin .acc { display: inline-block; width: 6px; height: 6px; background: var(--red);
  border-radius: 50%; margin-right: 8px; vertical-align: 1px; animation: ping 2s ease-in-out infinite; }
.split .body { padding: 100px 64px; display: flex; flex-direction: column; justify-content: center; }
.split.dark { background: var(--brand-d); color: var(--paper); }
.split.dark .body { background: var(--brand-d); }
.split.ink { background: var(--ink); color: var(--paper); }
.split.ink .body { background: var(--ink); }
.split .body .ix {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 22px;
}
.split.dark .body .ix, .split.ink .body .ix { color: rgba(247,244,237,.65); }
.split .body h2, .split .body h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 64px);
  line-height: 1; letter-spacing: -.03em; margin: 0 0 26px; max-width: 13ch; color: var(--ink);
}
.split .body h2 i, .split .body h3 i { font-style: normal; color: var(--red); }
.split.dark .body h2, .split.dark .body h3, .split.ink .body h2, .split.ink .body h3 { color: var(--paper); }
.split .body p { font-size: 16.5px; line-height: 1.6; color: var(--graphite); margin: 0 0 18px; max-width: 480px; }
.split.dark .body p, .split.ink .body p { color: rgba(247,244,237,.8); }
.split .body p b { color: var(--ink); font-weight: 600; }
.split.dark .body p b, .split.ink .body p b { color: var(--paper); }

/* ---- CHECK LIST (reusable from home .checks) ---- */
.checklist { margin-top: 28px; display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 28px; }
.section.dark .checklist, .split.dark .checklist, .split.ink .checklist { border-top-color: var(--line-d); }
.checklist .ck {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 16px; align-items: center;
  font-size: 15px; color: var(--ink);
}
.split.dark .checklist .ck, .split.ink .checklist .ck, .section.dark .checklist .ck { color: var(--paper); }
.checklist .ck::before { content: "+"; font-family: var(--serif); font-style: normal;
  font-size: 20px; line-height: 1; color: var(--red); }
.checklist .ck .v {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.split.dark .checklist .ck .v, .split.ink .checklist .ck .v { color: var(--stone); }

/* ---- SPEC TABLE ---- */
.spec { width: 100%; border-collapse: collapse; }
.spec tr { border-bottom: 1px solid var(--line); }
.section.dark .spec tr { border-color: var(--line-d); }
.spec th {
  text-align: left; padding: 18px 16px 18px 0; vertical-align: top; width: 38%;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); font-weight: 500;
}
.spec td { padding: 18px 0; font-size: 16px; color: var(--ink); }
.section.dark .spec td { color: var(--paper); }
.spec td b { font-weight: 600; }
.spec .hl td, .spec .hl th { color: var(--red); }

/* Scroll-container: voorkomt dat brede tabellen door body{overflow-x:hidden}
   rechts worden afgekapt op smalle schermen. Scrollt binnen z'n eigen box. */
.spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Scroll-hint: site.js wikkelt een overlopende .spec-wrap in .spec-scroll en
   togglet .more-left/.more-right. Fade + chevron tonen dat je kunt scrollen en
   verdwijnen vanzelf aan de randen. --spec-fade = achtergrondkleur van de sectie. */
.spec-scroll { position: relative; }
.spec-scroll::before,
.spec-scroll::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .25s var(--ease);
}
.spec-scroll::before { left: 0;  background: linear-gradient(to right, var(--spec-fade, var(--paper-2)), transparent); }
.spec-scroll::after  { right: 0; background: linear-gradient(to left,  var(--spec-fade, var(--paper-2)), transparent); }
.spec-scroll.more-left::before { opacity: 1; }
.spec-scroll.more-right::after { opacity: 1; }
.spec-scroll .spec-hint {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%) translateX(6px);
  width: 32px; height: 32px; border-radius: 50%; z-index: 3;
  background: var(--brand); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(21, 40, 47, .24);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.spec-scroll.more-right .spec-hint { opacity: 1; transform: translateY(-50%) translateX(0); }
.spec-scroll .spec-hint svg { width: 15px; height: 15px; }
/* Meerkoloms vergelijkingstabel (bv. GT-serie): de eerste kolom mag niet 38%
   pakken, kolommen krijgen lucht, en een minimale breedte houdt de tekst
   leesbaar i.p.v. ingedrukt (scrollt binnen .spec-wrap op smalle schermen). */
.spec.compare th { width: auto; white-space: nowrap; }
.spec.compare th, .spec.compare td { padding-right: 28px; }
.spec.compare th:last-child, .spec.compare td:last-child { padding-right: 0; }
@media (max-width: 640px) {
  .spec.compare { min-width: 540px; }
}
/* Key/value-tabellen: lange labels (bv. VERWARMINGSVERMOGEN) mogen op smalle
   schermen breken i.p.v. de eerste kolom op te blazen en de tabel te laten
   overlopen. */
@media (max-width: 600px) {
  .spec:not(.compare) th { width: 40%; overflow-wrap: anywhere; }
}

/* ---- FAQ ACCORDION ---- */
.faq { border-top: 1px solid var(--line); }
.section.dark .faq { border-top-color: var(--line-d); }
.faq .q { border-bottom: 1px solid var(--line); }
.section.dark .faq .q { border-bottom-color: var(--line-d); }
.faq .q summary {
  list-style: none; cursor: pointer; padding: 28px 0; display: flex;
  justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -.018em; color: var(--ink); transition: color .25s var(--ease);
}
.section.dark .faq .q summary { color: var(--paper); }
.faq .q summary::-webkit-details-marker { display: none; }
.faq .q summary:hover { color: var(--red); }
.faq .q .sign { position: relative; width: 18px; height: 18px; flex: none; }
.faq .q .sign::before, .faq .q .sign::after { content: ""; position: absolute; background: var(--red); transition: transform .3s var(--ease); }
.faq .q .sign::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq .q .sign::after  { top: 0; left: 50%; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq .q[open] .sign::after { transform: translateX(-50%) scaleY(0); }
.faq .q .a { overflow: hidden; }
.faq .q .a p { font-size: 16px; line-height: 1.6; color: var(--graphite); margin: 0 0 24px; max-width: 720px; }
.section.dark .faq .q .a p { color: rgba(247,244,237,.78); }
.faq .q[open] summary { color: var(--red); }

/* ---- CARD GRID (product / link cards) ---- */
.cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cardgrid.two { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--paper-2); padding: 38px 32px 32px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 18px; min-height: 460px; position: relative;
  transition: background .35s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover { background: var(--paper); transform: translateY(-5px);
  box-shadow: 0 36px 64px -30px rgba(22,57,74,.5); z-index: 3; }
.card .ix { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.card .ix .arr { width: 14px; height: 1px; background: currentColor; position: relative; transition: width .3s var(--ease); }
.card .ix .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.card:hover .ix .arr { width: 34px; }
.card .pic { flex: 1; display: flex; align-items: center; justify-content: center; margin: 6px 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.04), transparent 62%); }
.card .pic img { max-height: 250px; width: auto; max-width: 88%; transition: transform .8s var(--ease); }
.card:hover .pic img { transform: scale(1.05); }
.card h4 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: .98;
  letter-spacing: -.02em; margin: 0; position: relative; }
.card h4 i { font-style: normal; color: var(--red); }
.card h4::after { content: ""; position: absolute; left: 0; bottom: -8px; height: 2px; width: 0;
  background: var(--red); transition: width .45s var(--ease); }
.card:hover h4::after { width: 52px; }
.card p { font-size: 14.5px; line-height: 1.55; color: var(--graphite); margin: 0; max-width: 340px; }
.card .foot { border-top: 1px solid var(--line); padding-top: 14px; display: flex; justify-content: space-between;
  align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.card .foot b { color: var(--ink); font-weight: 600; }

/* ---- STEPS (reusable from home .process) ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.steps .step { background: var(--paper); padding: 40px 28px; display: flex; flex-direction: column; gap: 16px; min-height: 300px; }
.section.alt .steps .step { background: var(--paper-2); }
.steps .step .n { font-family: var(--serif); font-style: normal; font-size: 80px; line-height: .8;
  letter-spacing: -.04em; color: var(--red); margin: 0 0 12px; }
.steps .step h5 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -.012em; margin: 0; line-height: 1.1; }
.steps .step p { font-size: 14.5px; line-height: 1.55; color: var(--graphite); margin: 0; max-width: 280px; }
.steps .step .meta { margin-top: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); }

/* ---- FORM PANEL (light, for contact/offerte pages) ---- */
.formpanel {
  background: var(--ink); color: var(--paper); padding: 48px 44px; border-radius: var(--r);
  box-shadow: 0 50px 90px -34px rgba(4,16,22,.6);
}
.formpanel .h-row { display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--line-d); }
.formpanel .h-row .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(247,244,237,.7); }
.formpanel .h-row .lab::before { content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--red); border-radius: 50%; margin-right: 8px; vertical-align: 1px; animation: ping 2.2s ease-in-out infinite; }
.formpanel h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.04;
  letter-spacing: -.02em; margin: 0 0 26px; color: var(--paper); }
.formpanel h3 i { font-style: normal; color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { position: relative; margin-bottom: 16px; }
.field.full { grid-column: 1 / -1; }
.formpanel label, .field label {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(247,244,237,.55); margin-bottom: 6px;
}
.formpanel input, .formpanel textarea, .formpanel select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(247,244,237,.24);
  padding: 8px 0 9px; color: var(--paper); font-family: var(--sans); font-size: 16px;
  letter-spacing: -.005em; transition: border-color .25s var(--ease); outline: none; border-radius: 0;
}
.formpanel textarea { resize: vertical; min-height: 96px; }
.formpanel select { -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F1ECE3' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; }
.formpanel select option { color: var(--ink); }
.formpanel input::placeholder, .formpanel textarea::placeholder { color: rgba(247,244,237,.34); }
.formpanel input:focus, .formpanel textarea:focus, .formpanel select:focus { border-bottom-color: var(--red); }
.formpanel .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.formpanel .chip { background: rgba(247,244,237,.06); border: 1px solid rgba(247,244,237,.12); color: var(--paper);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 6px; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); text-align: center; }
.formpanel .chip:hover { background: rgba(247,244,237,.12); }
.formpanel .chip.active { background: var(--red); border-color: var(--red); color: var(--white); }
.formpanel .submit {
  width: 100%; margin-top: 22px; padding: 17px 20px; background: var(--red); color: var(--white);
  border: 0; font-family: var(--sans); font-size: 14.5px; font-weight: 500; letter-spacing: -.005em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 999px; transition: background .25s var(--ease), color .25s var(--ease); }
.formpanel .submit:hover { background: var(--paper); color: var(--ink); }
.formpanel .submit:disabled { opacity: .6; cursor: progress; }
.formpanel .submit .arr { width: 16px; height: 1px; background: currentColor; position: relative; transition: width .25s var(--ease); }
.formpanel .submit .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.formpanel .submit:hover .arr { width: 24px; }
.formpanel .foot { margin-top: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247,244,237,.55); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin-top: 16px; padding: 14px 16px; border-radius: 8px; font-size: 14px; display: none; line-height: 1.5; }
.form-msg.show { display: block; }
.form-msg.ok { background: rgba(29,75,95,.18); border: 1px solid var(--brand); color: var(--paper); }
.form-msg.err { background: rgba(225,37,27,.14); border: 1px solid var(--red); color: var(--paper); }

/* ---- CONTACT LAYOUT ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-info .ix { font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 20px; }
.contact-info h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 64px);
  line-height: 1; letter-spacing: -.03em; margin: 0 0 28px; }
.contact-info h2 i { font-style: normal; color: var(--red); }
.contact-info p { font-size: 17px; line-height: 1.6; color: var(--graphite); margin: 0 0 36px; max-width: 460px; }
.contact-rows { border-top: 1px solid var(--line); }
.contact-row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 22px 0;
  border-bottom: 1px solid var(--line); align-items: baseline; }
.contact-row .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.contact-row .vv { font-size: 17px; color: var(--ink); }
.contact-row .vv a { color: var(--brand); text-decoration: none; transition: color .25s var(--ease); }
.contact-row .vv a:hover { color: var(--red); }

/* ---- DOWNLOADS LIST ---- */
.dl { border-top: 1px solid var(--line); }
.dl-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 28px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: padding .3s var(--ease); }
.dl-item:hover { padding-left: 10px; }
.dl-item .ic { width: 34px; height: 42px; color: var(--brand); flex: none; }
.dl-item .ic svg { width: 100%; height: 100%; }
.dl-item .t { display: flex; flex-direction: column; gap: 4px; }
.dl-item .t b { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -.012em; }
.dl-item .t span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.dl-item .fmt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.dl-item .arr { width: 18px; height: 1px; background: var(--brand); position: relative; transition: width .3s var(--ease); }
.dl-item .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid var(--brand); border-right: 1px solid var(--brand); transform: rotate(45deg); }
.dl-item:hover .arr { width: 36px; }
.dl-item:hover .arr, .dl-item:hover .arr::after { background: var(--red); border-color: var(--red); }

/* ---- BIG NUMBER STRIP ---- */
.numstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-d);
  border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.numstrip .n { background: var(--brand-d); padding: 44px 30px; }
.numstrip .n b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 76px);
  line-height: .92; letter-spacing: -.04em; color: var(--paper); margin-bottom: 12px; }
.numstrip .n b i { font-style: normal; color: var(--red); }
.numstrip .n span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,244,237,.62); }

/* ---- INLINE CTA BAND (reuse home .cta look as a band) ---- */
.ctaband { padding: 130px var(--pad); background: var(--brand-d); color: var(--paper); position: relative; overflow: hidden; }
.ctaband .wrap { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: end; position: relative; z-index: 2; }
.ctaband .ix { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247,244,237,.6); display: inline-block; margin-bottom: 24px; }
.ctaband h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 112px);
  line-height: .94; letter-spacing: -.04em; margin: 0; color: var(--paper); }
.ctaband h2 i { font-style: normal; color: var(--red); }
.ctaband .rhs { padding-bottom: 18px; }
.ctaband .rhs p { font-size: 17px; line-height: 1.55; color: rgba(247,244,237,.78); margin: 0 0 30px; max-width: 440px; }
.ctaband .actions { display: flex; flex-direction: column; max-width: 460px; }

/* reuse cta-row-item styling on bands too */
.ctaband .cta-row-item { border-color: rgba(247,244,237,.16); }
.ctaband .cta-row-item:last-child { border-bottom: 1px solid rgba(247,244,237,.16); }

/* ---- generic content pages (legal) ---- */
.legal { max-width: 820px; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -.02em; color: var(--ink); margin: 48px 0 16px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--graphite); }
.legal ul { padding-left: 22px; }
.legal a { color: var(--brand); }

/* ---- INNER PAGE RESPONSIVE ---- */
@media (max-width: 1100px) {
  .section-head .row { grid-template-columns: 1fr; gap: 28px; }
  .section-head .rhs { justify-self: start; }
  .cells, .cells.four { grid-template-columns: 1fr 1fr; }
  .cells.two { grid-template-columns: 1fr; }
  .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip .pic { order: 0; }
  .split .pic { min-height: 380px; }
  .split .body { padding: 64px 40px; }
  .cardgrid, .cardgrid.two { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .numstrip { grid-template-columns: 1fr 1fr; }
  .ctaband .wrap { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .subhero { padding-top: 150px; padding-bottom: 64px; }
  .section { padding-top: 88px; padding-bottom: 88px; }
  .cells, .cells.four, .cardgrid, .cardgrid.two, .steps { grid-template-columns: 1fr; }
  .numstrip { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .formpanel .chips { grid-template-columns: 1fr 1fr; }
  .split .body { padding: 48px 24px; }
  .dl-item { grid-template-columns: auto 1fr auto; gap: 16px; }
  .dl-item .fmt { display: none; }
}
@media (max-width: 600px) {
  .subhero .meta-row { grid-template-columns: 1fr 1fr; }
  .formpanel { padding: 32px 24px; }
}
@media (max-width: 460px) {
  /* 2 koloms numstrip wordt te krap voor de grote cijfers -> 1 kolom */
  .numstrip { grid-template-columns: 1fr; }
  .numstrip .n { padding: 32px 26px; }
  /* meta-row mag op zeer smal ook stapelen */
  .subhero .meta-row { grid-template-columns: 1fr; }
}

/* ===========================================================
   AUTOFILL FIX — Chrome/Safari paint a solid white/yellow plate
   over autofilled fields, which clashes on the dark glass forms
   (the "raar wit vlak" in the woningcheck). The 9999s transition
   trick prevents that background from ever painting, so the input
   stays visually transparent; text colour is forced to paper.
   =========================================================== */
.lead input:-webkit-autofill,
.lead input:-webkit-autofill:hover,
.lead input:-webkit-autofill:focus,
.lead input:-webkit-autofill:active,
.formpanel input:-webkit-autofill,
.formpanel input:-webkit-autofill:hover,
.formpanel input:-webkit-autofill:focus,
.formpanel textarea:-webkit-autofill,
.formpanel select:-webkit-autofill {
  -webkit-text-fill-color: var(--paper);
  caret-color: var(--paper);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
  background-clip: text;
}
/* Belt-and-braces: keep the honeypot fully out of layout & paint */
.hp { visibility: hidden; pointer-events: none; }

/* ===========================================================
   STEPPED LEAD FORM — 2 steps (woning → wensen + contact),
   PDOK address badge, stacked choice chips. Lives inside the
   dark .lead glass panel; uses the same tokens as the mockup.
   =========================================================== */
.lead-step { display: none; }
.lead-step.active { display: block; animation: leadStepIn .45s var(--ease) both; }
@keyframes leadStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* resolved-address confirmation badge */
.lead .addr {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 20px;
  background: rgba(29,75,95,.30);
  border: 1px solid rgba(120,180,196,.42);
  border-radius: 10px;
}
.lead .addr.warn { background: rgba(225,37,27,.12); border-color: rgba(225,37,27,.4); }
.lead .addr .addr-ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(120,180,196,.22); display: flex; align-items: center; justify-content: center;
  color: #Bfe0ea;
}
.lead .addr.warn .addr-ic { background: rgba(225,37,27,.18); color: #ffb4ae; }
.lead .addr .addr-ic svg { width: 15px; height: 15px; }
.lead .addr .addr-txt { line-height: 1.3; min-width: 0; }
.lead .addr .addr-txt b { display: block; font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--paper); letter-spacing: -.005em; }
.lead .addr .addr-txt span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: rgba(247,244,237,.6); }
.lead .addr .addr-edit {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247,244,237,.7); padding: 4px; transition: color .2s var(--ease);
}
.lead .addr .addr-edit:hover { color: var(--red); }

/* stacked choice chips (the hybride / all-electric decision) */
.lead .chips.stack { grid-template-columns: 1fr; gap: 7px; }
.lead .chips.stack .chip { text-align: left; padding: 12px 14px; letter-spacing: .02em; text-transform: none; font-family: var(--sans); font-size: 13px; }

/* error state on inputs */
.lead input.err, .formpanel input.err { border-bottom-color: var(--red); }

/* back link on step 2 */
.lead-back {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247,244,237,.6); transition: color .2s var(--ease);
}
.lead-back:hover { color: var(--paper); }
.lead-back .bk-arr { width: 16px; height: 1px; background: currentColor; position: relative; }
.lead-back .bk-arr::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px;
  border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }

/* offerte-page inline address badge (light formpanel context reuses .addr) */
.formpanel .addr {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 16px;
  background: rgba(29,75,95,.30); border: 1px solid rgba(120,180,196,.42); border-radius: 10px;
}
.formpanel .addr .addr-ic { flex:none; width:30px; height:30px; border-radius:50%; background:rgba(120,180,196,.22);
  display:flex; align-items:center; justify-content:center; color:#Bfe0ea; }
.formpanel .addr .addr-ic svg { width:15px; height:15px; }
.formpanel .addr .addr-txt b { display:block; font-weight:600; font-size:14.5px; color:var(--paper); }
.formpanel .addr .addr-txt span { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:rgba(247,244,237,.6); }

/* formpanel variants of the choice chips (offerte page) */
.formpanel .chips.stack { grid-template-columns: 1fr; gap: 7px; }
.formpanel .chips.stack .chip { text-align: left; padding: 12px 14px; text-transform: none; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; }
.formpanel .chips.quad { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) { .formpanel .chips.quad { grid-template-columns: 1fr 1fr; } }