/* =========================================================
   Energy Upgrade — inner pages
   Loads after style.css and uses the same tokens, type system (.stack / .t-hero / .t-small),
   sheets, buttons, nav and footer. Each page gets its own hero world:
   Heat Pumps navy launch · Boilers light price · Process mint route · About photo · Service Areas map.
   ========================================================= */

/* ---------- shared bits ---------- */
/* clip, not hidden: a hidden overflow makes the sheet a scroll container and breaks the sticky
   grant card, FAQ heading and phone readout inside it */
@supports (overflow: clip) { .sheet-sec { overflow: clip; } }
[data-route-panel][hidden], .gta[hidden] { display: none !important; }
.js:not(.rm) [data-stagger] > :not(.gmini) { opacity: 0; }
.rm [data-stagger] > * { opacity: 1 !important; transform: none !important; }
.nav__links a[aria-current="page"] { color: var(--white); }
.nav__links a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 3px; border-radius: 2px; background: var(--mint); }

.ph { position: relative; overflow: hidden; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--mint); }
.kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.lede { max-width: 40ch; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.38; letter-spacing: -.012em; color: rgba(245, 239, 242, .84); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sec { padding: clamp(96px, 14vh, 170px) 0; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: clamp(44px, 7vh, 88px); }
.sec-head__note { max-width: 36ch; font-size: 17px; line-height: 1.45; font-weight: 500; padding-bottom: 8px; }
.on-dark .sec-head__note, .sec-head__note--dark { color: rgba(245, 239, 242, .7); }
.sheet-sec--light .sec-head__note { color: #3b3070; }
.sheet-sec--light .t-small { color: var(--magenta-d); }
.btn--magenta { background: var(--magenta); color: var(--white); }
.btn--magenta:hover { background: #ff3d80; }
.btn--navy-line { border: 1.5px solid rgba(23, 12, 69, .3); color: var(--navy); }
.btn--navy-line:hover { border-color: var(--navy); }
.btn--sm { height: 48px; padding: 0 22px; font-size: 16px; }
.small-print { font-size: 13px; line-height: 1.5; color: rgba(245, 239, 242, .5); max-width: 70ch; }

/* dark world sections that are not sheets */
.world-navy {
  position: relative; color: var(--lav);
  background:
    radial-gradient(60% 55% at 92% 8%, rgba(89, 77, 121, .5) 0%, rgba(89, 77, 121, 0) 70%),
    radial-gradient(55% 60% at 0% 95%, rgba(58, 25, 120, .45) 0%, rgba(58, 25, 120, 0) 70%),
    linear-gradient(180deg, #120a36 0%, #170c45 100%);
}
.world-ink {
  position: relative; color: var(--lav);
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(76, 28, 132, .42) 0%, rgba(76, 28, 132, 0) 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(89, 77, 121, .32) 0%, rgba(89, 77, 121, 0) 70%),
    linear-gradient(180deg, #170c45 0%, #0f082b 100%);
}
.world-navy .t-small, .world-ink .t-small { color: var(--mint); }

/* faint grid (DESIGN.md §4) on light sheets that ask for it */
.has-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(23, 12, 69, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 12, 69, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}
.has-grid > * { position: relative; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.faq__head { position: sticky; top: 120px; }
.faq__head p { margin-top: 22px; max-width: 30ch; font-size: 17px; line-height: 1.45; font-weight: 500; color: rgba(245, 239, 242, .7); }
.faq__head a { color: var(--mint); font-weight: 700; text-decoration: none; white-space: nowrap; }
a[href^="tel:"] { white-space: nowrap; }
.faq__list { border-top: 1px solid rgba(245, 239, 242, .14); }
.faq details { border-bottom: 1px solid rgba(245, 239, 242, .14); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-weight: 700; font-size: clamp(20px, 1.7vw, 27px); letter-spacing: -.03em; line-height: 1.12;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245, 239, 242, .25); transition: background-color .3s, border-color .3s, transform .5s var(--ease-out); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease-out); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { background: var(--mint); border-color: var(--mint); color: var(--navy); transform: rotate(180deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq summary:hover i { border-color: rgba(245, 239, 242, .6); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 64px 28px 0; font-size: 17px; line-height: 1.55; font-weight: 500; color: rgba(245, 239, 242, .74); max-width: 62ch; }
.faq__a p + p { margin-top: -14px; }
.faq__a a { color: var(--mint); font-weight: 700; }
.faq--light .faq__list, .faq--light details { border-color: rgba(23, 12, 69, .14); }
.faq--light summary i { border-color: rgba(23, 12, 69, .25); }
.faq--light details[open] summary i { background: var(--navy); border-color: var(--navy); color: var(--lav); }
.faq--light .faq__a p, .faq--light .faq__head p { color: #3b3070; }
.faq--light .faq__head a, .faq--light .faq__a a { color: var(--magenta-d); }

/* ---------- CTA variants (reuse the homepage .cta + .est) ---------- */
.cta--navy { color: var(--lav); background: radial-gradient(55% 65% at 80% 30%, rgba(105, 93, 134, .55) 0%, rgba(105, 93, 134, 0) 70%), radial-gradient(70% 70% at 0% 100%, rgba(58, 25, 120, .6) 0%, rgba(58, 25, 120, 0) 70%), linear-gradient(160deg, #1f1257 0%, #170c45 60%, #120937 100%); }
.cta--navy .t-small { color: var(--mint); }
.cta--navy .est { background: rgba(245, 239, 242, .96); color: var(--navy); }
.cta--pink .t-small { color: var(--white); }
.cta--pink .est { background: rgba(255, 255, 255, .9); color: var(--navy); }
.cta--light .t-small { color: var(--magenta-d); }
.cta--light .est { background: #fff; }

/* =========================================================
   HEAT PUMPS
   ========================================================= */
.hp-hero {
  min-height: var(--sh); padding: clamp(120px, 16vh, 170px) 0 clamp(36px, 6vh, 64px);
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(48% 60% at 74% 46%, rgba(108, 70, 190, .55) 0%, rgba(108, 70, 190, 0) 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(58, 25, 120, .5) 0%, rgba(58, 25, 120, 0) 70%),
    linear-gradient(180deg, #120a36 0%, #170c45 70%, #1a0e4c 100%);
}
.hp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.hp-hero .stack { color: var(--lav); }
.hp-hero .t-small { color: var(--mint); font-weight: 500; font-size: clamp(20px, calc(var(--fs) * .2), 40px); }
.hp-hero .t-hero:last-child { color: var(--mint); }
.hp-hero .lede { margin-top: clamp(20px, 3vh, 34px); }
.hp-hero .ctas { margin-top: clamp(24px, 4vh, 40px); }
.hp-unit { position: relative; aspect-ratio: 1 / 1; max-width: 640px; justify-self: center; width: 100%; }
.hp-unit img {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: lighten;   /* the render's near-black studio drops out against the page navy */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 96%);
}
.hp-unit__shadow { position: absolute; z-index: 1; left: 16%; right: 12%; bottom: 17%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(5, 2, 20, .75), rgba(5, 2, 20, 0)); filter: blur(6px); }
.hp-unit__glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(113, 212, 171, .22), rgba(113, 212, 171, 0)); filter: blur(10px); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.hp-unit__air { position: absolute; z-index: 3; left: -8%; top: 30%; width: 46%; height: 40%; overflow: visible; pointer-events: none; }
.hp-unit__air path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 22; opacity: .7; animation: air 2.4s linear infinite; }
.hp-unit__air path:nth-child(2) { animation-duration: 3s; opacity: .45; }
.hp-unit__air path:nth-child(3) { animation-duration: 2.7s; opacity: .55; }
@keyframes air { to { stroke-dashoffset: 72; } }
.hp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 7vh, 80px); border-top: 1px solid rgba(245, 239, 242, .12); }
.hp-facts li { padding: 22px 20px 0 0; }
.hp-facts b { display: block; font-weight: 900; font-size: clamp(30px, 3.3vw, 54px); letter-spacing: -.05em; line-height: .9; font-feature-settings: "tnum"; }
.hp-facts span { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; color: rgba(245, 239, 242, .62); }

/* how it works */
.how { padding: clamp(88px, 11vh, 130px) 0 clamp(72px, 9vh, 110px); }
.how .t-hero:last-child { color: var(--magenta); }
/* tight: the note sits under the headline instead of across the sheet, and the drawing follows close behind */
.how .sec-head, .split .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: clamp(20px, 3vh, 36px); }
.how .sec-head__note, .split .sec-head__note { max-width: 46ch; }
@media (min-width: 1181px) { .how .hi-steps { margin-top: clamp(100px, 11vh, 120px); } }
/* "inside the box": the unit is the hero. Its cover lifts off and the refrigerant loop runs inside it,
   mint while it is cold, magenta once the compressor squeezes it. Air and home stay quiet. */
.how-inside { --hi-ink: #170c45; --hi-mint: #3fb88d; --hi-hot: #ef2a70; --hi-warm: #695d86; }
.hi { container-type: inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 280fr) minmax(0, 800fr) minmax(0, 440fr); align-items: start; margin-top: clamp(20px, 3vh, 44px); }
.hi__air { grid-column: 1; grid-row: 1; }
.hi__unit { grid-column: 2; grid-row: 1; }
.hi__home { grid-column: 3; grid-row: 1; position: relative; }
.hi__band, .hi .hi-rail, .hi__home .hi-house--tall, .hi .hi-v-m { display: none; }
.hi svg { display: block; width: 100%; height: auto; overflow: visible; }
.hi .hi-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* art */
.hi text { font-family: var(--font); fill: var(--hi-ink); }
.hi .hi-ln { font-weight: 700; font-size: 17px; letter-spacing: .09em; }
.hi .hi-lc { font-weight: 500; font-size: 19px; letter-spacing: -.01em; fill: #3b3070; }
.hi .hi-lead { fill: none; stroke: var(--hi-ink); stroke-width: 1.8; stroke-linecap: round; }
.hi .hi-dot { fill: var(--hi-ink); stroke: #fff; stroke-width: 2.4; }
.hi .hi-wisp { fill: none; stroke: var(--hi-mint); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 22 14; }
.hi__air .hi-wisp { stroke: url(#hiAirFade); }
.hi .hi-wisp--band { stroke: url(#hiBandFade); }
/* the air that leaves: dusty, spun off the fan rim, fading as it goes */
.hi .hi-wisp--out { stroke: url(#hiFanOut); stroke-width: 2.8; stroke-dasharray: 12 7; }
.hi .hi-frost { fill: none; stroke: var(--hi-warm); stroke-opacity: .5; stroke-width: 2.2; stroke-linecap: round; }
.hi .hi-pipe-o { fill: none; stroke: var(--hi-ink); stroke-width: 12; stroke-linejoin: round; }
.hi .hi-pipe-c { fill: none; stroke-width: 7; stroke-linejoin: round; }
.hi .hi-pipe-c--hot { stroke: var(--hi-hot); }
.hi .hi-pipe-c--cold { stroke: var(--hi-mint); }
.hi .hi-pipe-d { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 22; stroke-opacity: .95; }
.hi .hi-shim { fill: none; stroke: var(--hi-hot); stroke-width: 2.4; stroke-linecap: round; stroke-opacity: .55; }
.hi .hi-plus { fill: var(--hi-hot); }

/* motion: CSS loops run only once the figure is live (.is-on) and pause off-screen (.is-off) */
.hi.is-on .hi-wisp { animation: hiAir 1.7s linear infinite; }
.hi.is-on .hi-wisp:nth-child(2n) { animation-duration: 2.3s; }
.hi.is-on .hi-wisp.hi-wisp--out { animation: hiAirOut 1.1s linear infinite; }
.hi.is-on .hi-wisp.hi-wisp--out:nth-child(2n) { animation-delay: -.55s; }
.hi.is-on .hi-pipe-d { animation: hiFlow .9s linear infinite; }
.hi.is-on .hi-shim { animation: hiShim 2.6s ease-in-out infinite; }
.hi.is-on .hi-shim:nth-child(2) { animation-delay: -.9s; }
.hi.is-on .hi-shim:nth-child(3) { animation-delay: -1.7s; }
/* the compressor's moving scroll orbits in a tiny circle, the way a real scroll compressor squeezes */
.hi.is-on .hi-scroll { animation: hiOrbit .55s linear infinite; }
.hi.is-off * { animation-play-state: paused !important; }
@keyframes hiAir { to { stroke-dashoffset: -36; } }
@keyframes hiAirOut { to { stroke-dashoffset: -19; } }
@keyframes hiFlow { to { stroke-dashoffset: -22; } }
@keyframes hiShim { 0%, 100% { transform: translateY(0); stroke-opacity: .2; } 50% { transform: translateY(-6px); stroke-opacity: .6; } }
@keyframes hiOrbit {
  0%, 100% { transform: translate(1.2px, 0); } 12.5% { transform: translate(.85px, .85px); } 25% { transform: translate(0, 1.2px); }
  37.5% { transform: translate(-.85px, .85px); } 50% { transform: translate(-1.2px, 0); } 62.5% { transform: translate(-.85px, -.85px); }
  75% { transform: translate(0, -1.2px); } 87.5% { transform: translate(.85px, -.85px); }
}

/* the cover only exists while the motion version plays; reduced motion starts with it off */
.hi .hi-beads { display: none; }

.js:not(.rm) .hi:not(.hi-fail) [data-hi] { opacity: 0; }

/* pipe key: sits on the label row under the house (font sizes track the SVG labels via cqw) */
.hi-key { position: absolute; left: 12.7%; top: 101%; display: grid; gap: .55em; font-size: 1.25cqw; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: #3b3070; }
.hi-key__i { display: flex; align-items: center; gap: .65em; }
.hi-key i { flex: none; width: 2.1em; height: 7px; border-radius: 9px; background: var(--hi-hot); box-shadow: 0 0 0 2px var(--hi-ink); }
.hi-key i.hi-key__cold { background: var(--hi-mint); }

/* steps */
.hi-steps { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 4.5vh, 52px); }
.hi-step { border-top: 1px solid rgba(23, 12, 69, .14); padding-top: 22px; }
.hi-step__k { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.hi-step__k b { font-weight: 700; color: var(--magenta-d); font-feature-settings: "tnum"; letter-spacing: .04em; }
.hi-step__k i { width: 26px; height: 3px; border-radius: 3px; background: var(--magenta); }
.hi-step--1 .hi-step__k i { background: var(--hi-mint); }
.hi-step h3 { font-weight: 700; font-size: clamp(24px, 2.1vw, 34px); letter-spacing: -.035em; line-height: .98; margin-bottom: 12px; color: var(--navy); }
.hi-step p:not(.hi-step__k) { font-size: 17px; line-height: 1.5; font-weight: 500; color: #3b3070; max-width: 36ch; }

/* pointing at a step quietly dims the parts of the drawing it is not about */
@media (hover: hover) and (min-width: 1181px) {
  .hi__air > svg, .hi__unit > svg, .hi__home > svg, .hi-key { transition: opacity .6s var(--ease-out); }
  .hi:has(.hi-step--1:hover) :is(.hi__home > svg, .hi-key),
  .hi:has(.hi-step--2:hover) :is(.hi__air > svg, .hi__home > svg, .hi-key),
  .hi:has(.hi-step--3:hover) :is(.hi__air > svg, .hi__unit > svg) { opacity: .3; }
}
/* just above the stack point the three-column art is at its smallest, so its labels step up a size */
@media (min-width: 1181px) and (max-width: 1300px) {
  .hi .hi-ln { font-size: 19px; }
  .hi .hi-lc { font-size: 20px; }
  .hi-key { font-size: 1.32cqw; }
}

/* stacked (tablets and phones): one column, art between the words. The air comes down a band over
   the unit, and the two water pipes run down beside step 02 from the unit to the house */
@media (max-width: 1180px) {
  /* the column hangs off the same left edge as the heading; it grows with the screen but stops short of
     making the unit taller than the viewport */
  .hi { grid-template-columns: minmax(0, 1fr); max-width: clamp(760px, 106vh, 880px); margin-left: 0; margin-right: auto; }
  .hi__air, .hi .hi-v-d, .hi__home .hi-house--wide { display: none; }
  .hi__band, .hi__home .hi-house--tall { display: block; }
  .hi .hi-v-m { display: inline; }
  .hi__band, .hi__unit, .hi__home, .hi-step { grid-column: 1; grid-row: auto; }
  .hi-steps { display: contents; }
  .hi-step--1 { order: 1; padding-bottom: 22px; }
  .hi__band { order: 2; }
  .hi__unit { order: 3; }
  .hi-step--2 { order: 4; position: relative; border-top: 0; padding: 26px 9% 34px 0; }
  .hi__home { order: 5; }
  .hi-step--3 { order: 6; margin-top: 30px; }
  .hi .hi-rail { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
  .hi-rail:not([data-k]) .hi-pipe-d { display: none; }
  .hi-key { position: static; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; padding-left: 14%; font-size: 14px; }
}
/* stacked on a wide screen the art grows past 800px, so its labels come down a touch to sit level with the step copy */
@media (min-width: 901px) and (max-width: 1180px) {
  .hi .hi-ln { font-size: 15.5px; }
  .hi .hi-lc { font-size: 17.5px; }
}
@media (max-width: 600px) {
  .hi { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); max-width: none; }
  .hi-step { padding-left: var(--gutter); padding-right: var(--gutter); }
  .hi-step--2 { padding-right: max(var(--gutter), 10%); }
  .hi .hi-ln { font-size: 27px; }
  .hi .hi-lc { font-size: 28px; }
  .hi .hi-lead { stroke-width: 2.6; }
  .hi .hi-wisp--out { stroke-width: 3.8; }
  .hi .hi-scroll { stroke-width: 3.4; stroke-opacity: .85; }
  .hi-key { padding: 0 var(--gutter); }
  .hi-step h3 { font-size: 26px; }
  .hi-step p:not(.hi-step__k) { font-size: 16px; }
}
.works-with { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(48px, 8vh, 90px); padding-top: 28px; border-top: 1px solid rgba(23, 12, 69, .12); }
.works-with > p { font-weight: 700; color: var(--magenta-d); font-size: 16px; letter-spacing: -.01em; }
.works-with li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--navy); }
.works-with img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(23, 12, 69, .14)); }
.works-with ul { display: flex; flex-wrap: wrap; gap: 14px 32px; }

/* grant builder */
.grant { padding: clamp(96px, 14vh, 170px) 0; }
.grant .t-small { color: var(--navy); }
.grant__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; margin-top: clamp(40px, 6vh, 72px); }
.grant__intro { max-width: 40ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.4; font-weight: 500; color: rgba(23, 12, 69, .82); margin-top: 22px; }
.gq { display: grid; gap: 14px; }
.gq fieldset { margin: 0; padding: 22px 24px 24px; border: 0; border-radius: 26px; background: rgba(255, 255, 255, .55); transition: opacity .4s, background-color .4s; }
.gq fieldset.is-off { opacity: .4; }
.gq legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 0; margin-bottom: 14px; font-weight: 700; font-size: 19px; letter-spacing: -.025em; color: var(--navy); }
.gq legend span { font-size: 13px; font-weight: 700; color: rgba(23, 12, 69, .5); font-feature-settings: "tnum"; letter-spacing: .02em; }
.gq .opts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.gq label { position: relative; cursor: pointer; }
.gq input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gq label span {
  display: inline-flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 8px 18px; border-radius: 22px;
  border: 1.5px solid rgba(23, 12, 69, .2); font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1.15; color: var(--navy);
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.gq label span small { font-weight: 500; font-size: 13px; opacity: .7; }
.gq label:hover span { border-color: var(--navy); }
.gq input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--lav); }
.gq input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 3px; }
.gq input:disabled + span { cursor: not-allowed; }
.gq__sys label span { min-height: 60px; padding: 10px 20px; }

.gcard {
  position: sticky; top: 96px; padding: clamp(24px, 2.4vw, 36px); border-radius: 32px; color: var(--lav);
  background: radial-gradient(70% 60% at 100% 0%, rgba(105, 93, 134, .55) 0%, rgba(105, 93, 134, 0) 70%), linear-gradient(170deg, #1f1257 0%, #170c45 70%);
  box-shadow: 0 40px 80px -40px rgba(23, 12, 69, .55);
}
.gcard__label { font-weight: 700; font-size: 16px; color: var(--mint); letter-spacing: -.01em; }
.gcard__total { display: block; margin: 10px 0 22px; font-weight: 900; font-size: clamp(64px, 6.6vw, 112px); letter-spacing: -.055em; line-height: .84; font-feature-settings: "tnum"; transform-origin: 0 80%; }
.gcard.is-none .gcard__total { color: rgba(245, 239, 242, .45); }
.gbar { position: relative; display: flex; gap: 3px; height: 14px; border-radius: 99px; background: rgba(245, 239, 242, .1); overflow: hidden; }
.gbar__seg { height: 100%; transition: width .7s var(--ease-out); }
.gbar__seg--unit { background: var(--mint); }
.gbar__seg--ch { background: #b6ecc6; }
.gbar__seg--rhb { background: var(--magenta); }
.gbar__seg.is-maybe { background: repeating-linear-gradient(135deg, #b6ecc6 0 5px, rgba(182, 236, 198, .25) 5px 10px); }
.glegend { display: grid; gap: 8px; margin-top: 18px; }
.gleg { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: rgba(245, 239, 242, .82); }
.gleg i { width: 12px; height: 12px; border-radius: 4px; background: rgba(245, 239, 242, .3); }
.gleg--unit i { background: var(--mint); }
.gleg--ch i { background: #b6ecc6; }
.gleg--rhb i { background: var(--magenta); }
.gleg.is-maybe i { background: repeating-linear-gradient(135deg, #b6ecc6 0 3px, transparent 3px 6px); }
.gleg b { font-weight: 700; font-feature-settings: "tnum"; color: var(--lav); }
.gleg.is-zero { opacity: .45; }
.gleg.is-zero span { text-decoration: line-through; text-decoration-thickness: 1px; }
.gta { display: inline-flex; margin-top: 16px; padding: 6px 12px; border-radius: 99px; background: rgba(113, 212, 171, .14); color: var(--mint); font-size: 13px; font-weight: 700; }
.gta[hidden] { display: none; }
.gprice { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(245, 239, 242, .12); display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 15px; font-weight: 500; color: rgba(245, 239, 242, .72); }
.gprice b { font-weight: 700; color: var(--lav); font-feature-settings: "tnum"; text-align: right; }
.gprice__after { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 1px dashed rgba(245, 239, 242, .16); }
.gprice__after span { font-weight: 700; color: var(--lav); font-size: 16px; }
.gprice__after strong { font-weight: 900; font-size: clamp(36px, 3.4vw, 54px); letter-spacing: -.05em; line-height: .9; color: var(--mint); font-feature-settings: "tnum"; display: inline-block; transform-origin: 100% 80%; }
.gnotes { display: grid; gap: 10px; margin-top: 22px; }
.gnote { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.45; font-weight: 500; color: rgba(245, 239, 242, .74); }
.gnote::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.gnote--warn::before { background: var(--magenta); }
.gnote--info::before { background: #b6ecc6; }
.gnote b { color: var(--lav); font-weight: 700; }
.gcard .btn { margin-top: 24px; }
.gcard .small-print { margin-top: 16px; font-size: 12px; }
.gmini { display: none; }

/* thermal camera: the Hero J house, with a lens that shows it in thermal */
.thermal { position: relative; background: #0b0828; color: var(--lav); overflow: hidden; }
.thermal__stage {
  position: relative; height: clamp(600px, 56.25vw, 100svh); overflow: hidden; cursor: none; touch-action: pan-y;
  --lx: 70%; --ly: 45%; --lr-base: 160px; --lr: var(--lr-base); --pos: 92% 50%;
}
.thermal__base, .thermal__base img, .thermal__video, .thermal__heat, .thermal__scan { position: absolute; inset: 0; width: 100%; height: 100%; }
.thermal__base img, .thermal__video, .thermal__heat { object-fit: cover; object-position: var(--pos); }
.thermal__video { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.thermal__video.is-on { opacity: 1; }
.thermal__heat, .thermal__scan {
  -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - 1.5px), transparent var(--lr));
  mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - 1.5px), transparent var(--lr));
}
.thermal__scan { pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
/* the left of the frame is empty night, so the copy sits on it; a feather keeps the type clear of the bokeh */
.thermal__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 8, 40, .85) 0%, rgba(11, 8, 40, .55) 26%, rgba(11, 8, 40, 0) 48%), linear-gradient(0deg, rgba(11, 8, 40, .7) 0%, rgba(11, 8, 40, 0) 22%); }
.thermal__lens { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
html:not(.pages-ready) .thermal__lens { display: none; }
.thermal__ring {
  position: absolute; left: calc(-1 * var(--lr)); top: calc(-1 * var(--lr)); width: calc(2 * var(--lr)); height: calc(2 * var(--lr));
  border-radius: 50%; border: 1.5px solid rgba(245, 239, 242, .85);
  box-shadow: 0 0 0 1px rgba(11, 8, 40, .35), 0 0 60px rgba(239, 42, 112, .28), inset 0 0 40px rgba(11, 8, 40, .35);
  transition: opacity .4s var(--ease-out);
}
.thermal__lens::before, .thermal__lens::after { content: ""; position: absolute; left: 0; top: 0; background: rgba(245, 239, 242, .92); box-shadow: 0 0 0 1px rgba(11, 8, 40, .25); }
.thermal__lens::before { width: 18px; height: 1.5px; margin: -.75px 0 0 -9px; }
.thermal__lens::after { width: 1.5px; height: 18px; margin: -9px 0 0 -.75px; }
.thermal__ring i { position: absolute; background: rgba(245, 239, 242, .85); }
.thermal__ring i:nth-child(1) { left: 50%; top: -1px; width: 1.5px; height: 12px; }
.thermal__ring i:nth-child(2) { left: 50%; bottom: -1px; width: 1.5px; height: 12px; }
.thermal__ring i:nth-child(3) { top: 50%; left: -1px; height: 1.5px; width: 12px; }
.thermal__ring i:nth-child(4) { top: 50%; right: -1px; height: 1.5px; width: 12px; }
.thermal__read {
  position: absolute; left: calc(var(--lr) * .74); top: calc(var(--lr) * .74); display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px 10px 13px; border-radius: 14px; white-space: nowrap;
  background: rgba(11, 8, 40, .72); border: 1px solid rgba(245, 239, 242, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .5s var(--ease-out);
}
.thermal__read b { font-weight: 900; font-size: 30px; letter-spacing: -.05em; line-height: .9; font-feature-settings: "tnum"; color: var(--white); }
.thermal__read small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffab98; min-height: 1em; }
.thermal__read small:empty { display: none; }
.thermal__lens.read-l .thermal__read { left: auto; right: calc(var(--lr) * .74); }
.thermal__lens.read-u .thermal__read { top: auto; bottom: calc(var(--lr) * .74); }
.thermal.is-full .thermal__ring { opacity: 0; }
.thermal.is-full .thermal__read { left: 22px; top: 22px; right: auto; bottom: auto; }

.thermal__copy { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; }
.thermal__copy .wrap { pointer-events: none; }
.thermal__copy .stack { max-width: min(44vw, 640px); color: var(--lav); }
.thermal__copy .t-small { color: var(--mint); font-weight: 500; font-size: clamp(20px, 2.2vw, 36px); margin-bottom: .3em; }
.thermal__copy .t-hero:last-child { color: var(--magenta); }
.thermal__lede { margin-top: clamp(18px, 3vh, 30px); max-width: 36ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.42; color: rgba(245, 239, 242, .84); }
.thermal__ui { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(22px, 3.6vh, 36px); pointer-events: auto; }
.thermal__toggle { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 20px 0 10px; border-radius: 99px; border: 1px solid rgba(245, 239, 242, .3); font-weight: 700; font-size: 16px; color: var(--lav); transition: border-color .3s, background-color .3s; }
.thermal__toggle:hover { border-color: rgba(245, 239, 242, .7); }
.thermal__switch { position: relative; width: 44px; height: 28px; border-radius: 99px; background: rgba(245, 239, 242, .16); transition: background-color .4s var(--ease-out); }
.thermal__switch::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--lav); transition: transform .45s var(--ease-out), background-color .4s; }
.thermal__toggle[aria-pressed="true"] .thermal__switch { background: linear-gradient(90deg, #a3268f, #ef2a70); }
.thermal__toggle[aria-pressed="true"] .thermal__switch::after { transform: translateX(16px); background: #fff7ef; }
.thermal__scale { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 239, 242, .6); }
.thermal__scale i { width: 150px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #06041a 0%, #170c45 14%, #33137a 28%, #6a1f9c 42%, #a3268f 54%, #ef2a70 65%, #ff6f86 76%, #ffab98 87%, #ffdcc0 95%, #fff7ef 100%); box-shadow: inset 0 0 0 1px rgba(245, 239, 242, .14); }
.thermal__note { margin-top: 18px; max-width: 46ch; font-size: 13px; line-height: 1.5; color: rgba(245, 239, 242, .5); }
.thermal__note span { color: rgba(245, 239, 242, .78); font-weight: 700; margin-right: .3em; }
.thermal__hint-touch { display: none; }
@media (hover: none) {
  .thermal__hint-mouse { display: none; }
  .thermal__hint-touch { display: inline; }
  .thermal__stage { cursor: default; }
}

/* two systems */
.systems { padding: clamp(96px, 14vh, 170px) 0; }
.sys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.sys {
  position: relative; overflow: hidden; padding: clamp(28px, 3vw, 48px); border-radius: var(--radius);
  background: rgba(245, 239, 242, .05); border: 1px solid rgba(245, 239, 242, .1);
  transition: border-color .5s, background-color .5s;
}
.sys:hover { border-color: rgba(113, 212, 171, .4); background: rgba(245, 239, 242, .07); }
.sys__brand { font-weight: 900; font-size: clamp(54px, 7vw, 120px); letter-spacing: -.055em; line-height: .84; text-transform: uppercase; }
.sys__model { margin-top: 10px; font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.03em; color: var(--mint); }
.sys__price { margin-top: clamp(36px, 6vh, 72px); display: flex; align-items: baseline; gap: 12px; }
.sys__price span { font-weight: 700; font-size: 16px; color: rgba(245, 239, 242, .6); }
.sys__price b { font-weight: 900; font-size: clamp(44px, 4.6vw, 76px); letter-spacing: -.05em; line-height: .9; font-feature-settings: "tnum"; }
.sys ul { margin-top: 26px; display: grid; gap: 10px; font-size: 17px; font-weight: 500; color: rgba(245, 239, 242, .78); }
.sys li { display: flex; gap: 14px; align-items: baseline; }
.sys li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); transform: translateY(-2px); }
.sys__fan { position: absolute; right: clamp(-60px, -3vw, -20px); top: clamp(-60px, -3vw, -20px); width: clamp(180px, 20vw, 300px); height: auto; pointer-events: none; color: var(--mint); opacity: .22; transition: opacity .5s; }
.sys__fan .blades { transform-origin: 100px 100px; animation: spin 9s linear infinite; }
.sys:hover .sys__fan { opacity: .4; }
.sys:hover .sys__fan .blades { animation-duration: 3s; }
@keyframes spin { to { transform: rotate(360deg); } }
.sys__sizes { position: absolute; right: clamp(28px, 3vw, 48px); bottom: clamp(28px, 3vw, 48px); display: flex; gap: 6px; }
.sys__sizes span { display: grid; place-items: center; height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(113, 212, 171, .4); font-weight: 700; font-size: 15px; color: var(--mint); font-feature-settings: "tnum"; }
.systems__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: clamp(28px, 5vh, 48px); }
.systems__foot p { max-width: 54ch; font-size: 18px; line-height: 1.45; font-weight: 500; color: rgba(245, 239, 242, .78); }

/* ready checklist */
.ready { padding: clamp(96px, 14vh, 170px) 0; }
.ready__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.ready__photo { position: relative; border-radius: calc(var(--radius) * .8); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -40px rgba(23, 12, 69, .4); }
.ready__photo img { width: 100%; height: 115%; object-fit: cover; }
.ready__photo figcaption { position: absolute; left: 18px; bottom: 18px; padding: 10px 16px; border-radius: 99px; background: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 700; color: var(--navy); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 5vh, 52px); }
.check { padding: 26px 24px; border-radius: 26px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(23, 12, 69, .06); }
.check__tick { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); margin-bottom: 18px; }
.check__tick svg { width: 18px; height: 18px; }
.check h3 { font-weight: 700; font-size: 21px; letter-spacing: -.03em; line-height: 1.05; color: var(--navy); margin-bottom: 10px; }
.check p { font-size: 15.5px; line-height: 1.5; font-weight: 500; color: #3b3070; }

/* =========================================================
   BOILERS (light hero: the nav swaps to navy ink until it condenses)
   ========================================================= */
.on-light .nav:not(.is-condensed):not(.is-open) .nav__links a, .on-light .nav:not(.is-condensed):not(.is-open) .nav__phone { color: rgba(23, 12, 69, .74); }
.on-light .nav:not(.is-condensed):not(.is-open) .nav__links a:hover, .on-light .nav:not(.is-condensed):not(.is-open) .nav__links a[aria-current="page"], .on-light .nav:not(.is-condensed):not(.is-open) .nav__phone:hover { color: var(--navy); }
.on-light .nav:not(.is-condensed):not(.is-open) .nav__links a[aria-current="page"]::after { background: var(--magenta); }
.on-light .nav:not(.is-condensed):not(.is-open) .pill--nav { border-color: rgba(23, 12, 69, .3); color: var(--navy); }
.on-light .nav:not(.is-condensed):not(.is-open) .nav__menu { border-color: rgba(23, 12, 69, .25); }
.on-light .nav:not(.is-condensed):not(.is-open) .nav__menu[aria-expanded="false"] span { background: var(--navy); }
.nav__logo .logo-dark { display: none; }
.on-light .nav:not(.is-condensed):not(.is-open) .nav__logo .logo-dark { display: block; }
.on-light .nav:not(.is-condensed):not(.is-open) .nav__logo .logo-light { display: none; }
.nav__logo img { transition: width .6s var(--ease-out); }
.nav.is-condensed .nav__logo .logo-dark { width: 128px; }

.bo-hero {
  min-height: var(--sh); padding: clamp(120px, 16vh, 170px) 0 clamp(48px, 8vh, 90px); color: var(--navy);
  display: flex; align-items: center;
  background:
    radial-gradient(50% 60% at 78% 40%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 60% at 0% 100%, #eadcf0 0%, rgba(234, 220, 240, 0) 70%),
    linear-gradient(170deg, #f7f2f5 0%, #efe5f0 100%);
}
.bo-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.bo-hero .stack .t-small { color: var(--magenta-d); font-size: clamp(22px, 2.5vw, 42px); margin-bottom: .3em; }
.bo-hero__price { position: relative; }
.bo-hero__price .eur { font-size: .56em; vertical-align: .54em; margin-right: .02em; letter-spacing: -.02em; }
.bo-hero .lede { color: #3b3070; margin-top: clamp(20px, 3vh, 32px); max-width: 44ch; }
.bo-hero .ctas { margin-top: clamp(24px, 4vh, 40px); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 4vh, 40px); }
.badges li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(23, 12, 69, .08); font-size: 14px; font-weight: 700; color: var(--navy); }
.badges li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); }
.bo-hero__media { position: relative; }
.bo-frame { position: relative; border-radius: calc(var(--radius) * .9); overflow: hidden; aspect-ratio: 4 / 5; background: #e9e6ea; box-shadow: 0 50px 90px -40px rgba(23, 12, 69, .45); }
.bo-frame img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute; z-index: 2; left: -12%; bottom: 12%; width: min(250px, 62%); padding: 18px 20px 18px 34px; border-radius: 18px;
  background: var(--navy); color: var(--lav); box-shadow: 0 30px 50px -20px rgba(23, 12, 69, .6);
  transform: rotate(-4deg); transform-origin: 100% 0;
  animation: swing 6s ease-in-out infinite;
}
.tag::before { content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #efe5f0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
@keyframes swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-1.5deg); } }
.tag small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.tag b { display: block; margin-top: 6px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.tag span { display: block; margin-top: 4px; font-size: 14px; color: rgba(245, 239, 242, .7); }

/* the range */
.range { padding: clamp(96px, 14vh, 170px) 0; }
.range__tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 99px; background: rgba(245, 239, 242, .08); border: 1px solid rgba(245, 239, 242, .1); }
.range__tab { height: 42px; padding: 0 20px; border-radius: 99px; font-weight: 700; font-size: 15px; color: rgba(245, 239, 242, .74); transition: background-color .35s, color .35s; }
.range__tab:hover { color: var(--white); }
.range__tab.is-on { background: var(--lav); color: var(--navy); }
.models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.model {
  position: relative; display: flex; flex-direction: column; min-height: 470px; padding: 26px 24px 24px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(245, 239, 242, .08) 0%, rgba(245, 239, 242, .03) 100%); border: 1px solid rgba(245, 239, 242, .1);
  transition: opacity .5s var(--ease-out), filter .5s var(--ease-out), border-color .4s, transform .5s var(--ease-out);
}
.model:hover { border-color: rgba(113, 212, 171, .45); }
.model.is-dim { opacity: .22; filter: grayscale(1) blur(1px); transform: scale(.97); }
.model__type { align-self: flex-start; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(113, 212, 171, .14); color: var(--mint); }
.model[data-type="combi"] .model__type { background: rgba(239, 42, 112, .16); color: #ff7aa6; }
/* real packshots: same height everywhere, contain, a soft contact shadow under each unit */
.model__photo { --h: 210px; position: relative; height: var(--h); margin: 20px 0 18px; display: flex; justify-content: center; align-items: flex-end; }
.model__photo::before { content: ""; position: absolute; left: 50%; bottom: -16px; width: calc(var(--h) * 1); height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 239, 242, .13), rgba(245, 239, 242, 0)); }
.model__photo::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: calc(var(--h) * .6); height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .85), rgba(0, 0, 0, .4) 60%, rgba(0, 0, 0, 0)); }
.model__photo img { position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35)); }
.model h3 { font-weight: 700; font-size: 15px; color: rgba(245, 239, 242, .6); letter-spacing: 0; }
.model .model__name { color: var(--lav); font-weight: 900; font-size: clamp(28px, 2.4vw, 40px); letter-spacing: -.045em; line-height: .9; margin-top: 4px; }
.model .model__kw { margin-top: 14px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--mint); font-feature-settings: "tnum"; }
.model p { margin-top: 12px; font-size: 15px; line-height: 1.45; font-weight: 500; color: rgba(245, 239, 242, .7); }
.model .model__warranty { margin-top: 14px; margin-bottom: 20px; font-size: 14px; font-weight: 700; color: rgba(245, 239, 242, .74); }
.model__warranty b { color: var(--mint); }
.models__note { margin-top: 22px; max-width: 70ch; font-size: 14px; line-height: 1.5; font-weight: 500; color: rgba(245, 239, 242, .6); }
.model .model__price { margin-top: auto; padding-top: 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(245, 239, 242, .1); }
.model__price span { font-size: 14px; font-weight: 700; color: rgba(245, 239, 242, .6); }
.model__price b { color: var(--lav); font-weight: 900; font-size: clamp(32px, 2.6vw, 44px); letter-spacing: -.05em; line-height: .9; font-feature-settings: "tnum"; }

/* combi or system */
.vs { padding: clamp(96px, 14vh, 170px) 0; }
.vs__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: stretch; }
.vs__col { padding: clamp(26px, 2.6vw, 40px); border-radius: var(--radius); background: rgba(255, 255, 255, .72); border: 1px solid rgba(23, 12, 69, .06); }
/* each boiler stands on a tinted disc (pink combi, mint system, like the range badges) so the white unit reads */
.vs__art { --d: 240px; position: relative; height: calc(var(--d) + 34px); width: calc(var(--d) + 40px); margin-bottom: 28px; }
.vs__art::after { content: ""; position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffe1ec 0%, #f9c0d5 60%, #f3a3c1 100%); }
.vs__col:last-child .vs__art::after { background: radial-gradient(circle at 34% 28%, #d9f6e8 0%, #ade8cd 60%, #8adbb8 100%); }
.vs__art::before { content: ""; position: absolute; z-index: 1; left: calc(var(--d) * .5); bottom: -8px; width: calc(var(--d) * .7); height: 22px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(23, 12, 69, .45), rgba(23, 12, 69, .16) 60%, rgba(23, 12, 69, 0)); }
.vs__art img { position: absolute; z-index: 2; left: calc(var(--d) * .5); bottom: 0; height: calc(var(--d) * 1); width: auto; transform: translateX(-50%); filter: drop-shadow(0 0 1px rgba(23, 12, 69, .28)) drop-shadow(12px 14px 18px rgba(23, 12, 69, .16)); }
.vs__col h3 { font-weight: 900; font-size: clamp(44px, 5vw, 84px); letter-spacing: -.05em; line-height: .84; text-transform: uppercase; color: var(--navy); }
.vs__col h3 + p { margin-top: 12px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--magenta-d); }
.vs__col ul { margin-top: 24px; display: grid; gap: 12px; font-size: 17px; font-weight: 500; line-height: 1.4; color: #2c2160; }
.vs__col li { display: flex; gap: 14px; align-items: baseline; }
.vs__col li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); transform: translateY(-2px); }
.vs__or { align-self: center; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--lav); font-weight: 900; font-size: 20px; letter-spacing: -.04em; }
.vs__foot { margin-top: clamp(28px, 5vh, 48px); font-size: 18px; line-height: 1.45; font-weight: 500; color: #3b3070; max-width: 60ch; }
.vs__foot b { color: var(--navy); }

/* same day (pink world) */
.sameday { padding: clamp(100px, 15vh, 180px) 0; }
.sameday__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.sameday .stack { --fs: clamp(110px, 19vw, 330px); }
.sameday .t-small { color: var(--white); font-size: clamp(26px, 3vw, 50px); }
.sameday__clock { width: 100%; max-width: 420px; justify-self: center; }
.sameday__clock svg { width: 100%; height: auto; overflow: visible; }
.sameday__quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 7vh, 80px); }
.pq { padding: 26px 26px 22px; border-radius: 26px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pq blockquote { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.36; font-weight: 500; letter-spacing: -.015em; }
.pq figcaption { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(255, 255, 255, .82); }
.pq figcaption b { font-weight: 700; color: #fff; }
.sameday__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-top: clamp(28px, 5vh, 48px); }
.sameday__foot p { font-weight: 700; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.03em; line-height: 1; }
.btn--white { background: #fff; color: var(--magenta-d); }
.btn--white:hover { background: var(--lav); }

/* extras */
.extras { padding: clamp(96px, 14vh, 170px) 0; }
.extra-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.extra { display: flex; flex-direction: column; padding: 28px; border-radius: 28px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(23, 12, 69, .06); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.extra:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(23, 12, 69, .35); }
.extra__art { position: relative; height: 160px; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding-bottom: 24px; margin-bottom: 22px; border-radius: 20px; background: radial-gradient(60% 70% at 50% 60%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), #f1e9f2; }
.extra__art img { position: relative; height: 80%; width: auto; max-width: 70%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(23, 12, 69, .16)); }
.extra__art::before { content: ""; position: absolute; left: 50%; bottom: 17px; width: 40%; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(23, 12, 69, .34), rgba(23, 12, 69, .12) 60%, rgba(23, 12, 69, 0)); }
.extra__art--pair img:first-child { height: 66%; max-width: 56%; }
.extra__art--pair img + img { height: 56%; max-width: 34%; }
.extra__art--pair::before { width: 78%; }
.extra h3 { font-weight: 700; font-size: 24px; letter-spacing: -.035em; line-height: 1; color: var(--navy); }
.extra__brands { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--magenta-d); }
.extra p { margin-top: 12px; font-size: 16px; line-height: 1.5; font-weight: 500; color: #3b3070; }

/* signs */
.signs { padding: clamp(96px, 14vh, 170px) 0; }
.sign-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.sign { grid-column: span 2; position: relative; padding: 28px 26px 26px; border-radius: 28px; background: rgba(245, 239, 242, .05); border: 1px solid rgba(245, 239, 242, .1); }
.sign:nth-child(4), .sign:nth-child(5) { grid-column: span 3; }
.sign__no { font-weight: 900; font-size: 64px; letter-spacing: -.05em; line-height: .84; color: rgba(245, 239, 242, .14); font-feature-settings: "tnum"; }
.sign h3 { margin-top: 18px; font-weight: 700; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -.035em; line-height: 1; }
.sign p { margin-top: 12px; font-size: 16px; line-height: 1.5; font-weight: 500; color: rgba(245, 239, 242, .72); max-width: 44ch; }
.sign--alert { background: linear-gradient(160deg, rgba(239, 42, 112, .2), rgba(239, 42, 112, .06)); border-color: rgba(239, 42, 112, .4); }
.sign--alert .sign__no { color: rgba(239, 42, 112, .55); }
.sign--alert p b { color: #fff; }
.signs__honest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(32px, 5vh, 56px); padding: clamp(24px, 2.6vw, 36px); border-radius: 28px; background: var(--mint); color: var(--navy); }
.signs__honest p { font-weight: 900; font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -.045em; line-height: .95; max-width: 26ch; }

/* =========================================================
   PROCESS (mint hero, route switch, sticky numeral)
   ========================================================= */
.pr-hero {
  min-height: min(var(--sh), 940px); padding: clamp(120px, 16vh, 170px) 0 clamp(150px, 22vh, 210px); color: var(--navy);
  display: flex; align-items: center;
  background:
    radial-gradient(55% 65% at 76% 58%, #b6ecc6 0%, rgba(182, 236, 198, 0) 70%),
    radial-gradient(70% 70% at 0% 0%, #83dda0 0%, rgba(131, 221, 160, 0) 70%),
    linear-gradient(160deg, #7ad9a7 0%, #71d4ab 55%, #5fc79d 100%);
}
.on-mint .nav:not(.is-condensed):not(.is-open) .nav__links a, .on-mint .nav:not(.is-condensed):not(.is-open) .nav__phone { color: rgba(23, 12, 69, .78); }
.on-mint .nav:not(.is-condensed):not(.is-open) .nav__links a:hover, .on-mint .nav:not(.is-condensed):not(.is-open) .nav__links a[aria-current="page"] { color: var(--navy); }
.on-mint .nav:not(.is-condensed):not(.is-open) .nav__links a[aria-current="page"]::after { background: var(--navy); }
.on-mint .nav:not(.is-condensed):not(.is-open) .pill--nav { border-color: rgba(23, 12, 69, .35); color: var(--navy); }
.on-mint .nav:not(.is-condensed):not(.is-open) .nav__menu { border-color: rgba(23, 12, 69, .3); }
.on-mint .nav:not(.is-condensed):not(.is-open) .nav__menu[aria-expanded="false"] span { background: var(--navy); }
.on-mint .nav:not(.is-condensed):not(.is-open) .nav__logo .logo-dark { display: block; }
.on-mint .nav:not(.is-condensed):not(.is-open) .nav__logo .logo-light { display: none; }
.pr-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.pr-hero .stack .t-small { color: var(--navy); font-size: clamp(22px, 2.6vw, 44px); margin-bottom: .3em; }
.pr-hero .lede { color: rgba(23, 12, 69, .82); margin-top: clamp(20px, 3vh, 32px); }
.pr-route { position: absolute; inset: 0; pointer-events: none; }
.pr-route svg { width: 100%; height: 100%; }
.pr-route__path { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 2 12; stroke-linecap: round; }
.pr-route__done { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-opacity: .9; }
.pr-route__stop { fill: #71d4ab; stroke: #fff; stroke-width: 3; transition: fill .4s; }
.pr-route__stop.is-hit { fill: var(--navy); }
.pr-route__stop-g text { font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: .1em; fill: var(--navy); opacity: .55; transition: opacity .4s; }
.pr-route__stop-g:has(.is-hit) text { opacity: 1; }
.pr-route__halo { fill: #fff; fill-opacity: .55; }
.pr-route__puck { fill: var(--navy); filter: drop-shadow(0 4px 6px rgba(23, 12, 69, .3)); }
.pr-route__core { fill: #fff; }
.rm .pr-route__done { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.rm .pr-route__pebble { display: none; }

/* tilt + glare (pages.js buildTilt) */
.tilt-host { perspective: 1100px; }
.glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 60%); }
.is-tilting > .glare { opacity: 1; }
.plaque .glare { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .1) 32%, rgba(255, 255, 255, 0) 62%); }
.bo-frame .glare { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 55%); }
.route { padding: clamp(22px, 2.4vw, 34px); border-radius: 30px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(23, 12, 69, .08); }
.route__q { font-weight: 700; font-size: 19px; letter-spacing: -.03em; margin-bottom: 14px; }
.route__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 99px; background: rgba(23, 12, 69, .08); }
.route__btn { height: 52px; border-radius: 99px; font-weight: 700; font-size: 17px; color: var(--navy); transition: background-color .35s, color .35s; }
.route__btn.is-on { background: var(--navy); color: var(--lav); }
.route__stat { margin-top: 22px; }
.route__stat b { display: block; font-weight: 900; font-size: clamp(56px, 6vw, 100px); letter-spacing: -.055em; line-height: .84; text-transform: uppercase; }
.route__stat span { display: block; margin-top: 10px; font-size: 16px; font-weight: 500; color: rgba(23, 12, 69, .78); max-width: 32ch; }

.steps-sec { padding: clamp(96px, 14vh, 170px) 0; }
.track { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 96px); }
.track__aside { position: sticky; top: 110px; align-self: start; }
.track__num { display: block; font-weight: 900; font-size: clamp(160px, 22vw, 380px); letter-spacing: -.06em; line-height: .78; color: var(--lav); font-feature-settings: "tnum"; }
.track__of { margin-top: 18px; font-weight: 700; font-size: 18px; color: var(--mint); letter-spacing: -.01em; }
.track__name { margin-top: 6px; font-size: 16px; font-weight: 500; color: rgba(245, 239, 242, .62); max-width: 28ch; }
.track__list { position: relative; padding-left: 44px; }
.track__rail, .track__fill { position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.track__rail { background: rgba(113, 212, 171, .18); }
.track__fill { background: var(--mint); transform-origin: 50% 0; transform: scaleY(0); }
.rm .track__fill { transform: none; }
.pstep { position: relative; padding: 0 0 clamp(56px, 10vh, 120px); opacity: .42; transition: opacity .5s var(--ease-out); }
.pstep:last-child { padding-bottom: 0; }
.pstep.is-on, .rm .pstep { opacity: 1; }
.pstep::before { content: ""; position: absolute; left: -44px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #170c45; border: 2px solid var(--mint); box-sizing: border-box; transition: background-color .4s; }
.pstep.is-on::before { background: var(--mint); }
.pstep__tag { font-weight: 700; font-size: 14px; color: var(--mint); letter-spacing: .04em; font-feature-settings: "tnum"; }
.pstep h3 { margin-top: 10px; font-weight: 700; font-size: clamp(32px, 3.3vw, 56px); letter-spacing: -.045em; line-height: .92; max-width: 16ch; }
.pstep p { margin-top: 16px; font-size: 18px; line-height: 1.5; font-weight: 500; color: rgba(245, 239, 242, .74); max-width: 48ch; }
.pstep__you { display: inline-flex; gap: 10px; margin-top: 20px; padding: 10px 16px; border-radius: 16px; background: rgba(245, 239, 242, .07); font-size: 15px; font-weight: 500; color: rgba(245, 239, 242, .8); max-width: 48ch; }
.pstep__you b { color: var(--mint); font-weight: 700; white-space: nowrap; }

.split { padding: clamp(96px, 14vh, 170px) 0; }
.split__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.split__col { padding: clamp(26px, 2.6vw, 40px); border-radius: var(--radius); }
.split__col--you { background: var(--navy); color: var(--lav); }
.split__col--us { background: rgba(255, 255, 255, .72); border: 1px solid rgba(23, 12, 69, .06); }
.split__col h3 { font-weight: 900; font-size: clamp(64px, 8vw, 140px); letter-spacing: -.055em; line-height: .82; text-transform: uppercase; }
.split__col--us h3 { color: var(--navy); }
.split__col--you h3 { color: var(--mint); }
.split__count { margin-top: 12px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.split__col--you .split__count { color: rgba(245, 239, 242, .7); }
.split__col--us .split__count { color: var(--magenta-d); }
.split__col ul { margin-top: 28px; display: grid; gap: 0; }
.split__col li { display: flex; gap: 16px; align-items: center; padding: 15px 0; border-top: 1px solid; font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.025em; line-height: 1.15; }
.split__col--you li { border-color: rgba(245, 239, 242, .12); }
.split__col--us li { border-color: rgba(23, 12, 69, .1); color: var(--navy); }
.split__col li i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 13px; font-feature-settings: "tnum"; }
.split__col--you li i { background: rgba(113, 212, 171, .16); color: var(--mint); }
.split__col--us li i { background: var(--navy); color: var(--lav); }
.split__col li small { display: block; margin-top: 3px; font-weight: 500; font-size: 14px; letter-spacing: 0; opacity: .7; }
/* wide: the US list runs in two columns so both cards end level, no hole under YOU */
@media (min-width: 1000px) {
  .split__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; }
  .split__us-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: clamp(24px, 2.4vw, 40px); }
}

.voices { padding: clamp(96px, 14vh, 170px) 0; overflow: hidden; }
.voices__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.voice { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 30px 26px 24px; border-radius: 28px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.voices__row { align-items: start; }
.voice { position: relative; }
.voice:nth-child(even) { top: 48px; }
.voice blockquote { font-size: 19px; line-height: 1.38; font-weight: 500; letter-spacing: -.015em; }
.voice blockquote::before { content: "“"; display: block; font-weight: 900; font-size: 64px; line-height: .6; margin-bottom: 8px; color: rgba(255, 255, 255, .6); }
.voice figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(255, 255, 255, .82); }
.voice figcaption b { font-weight: 700; color: #fff; font-size: 15px; }

/* =========================================================
   ABOUT (photo hero, editorial)
   ========================================================= */
/* the photo's own white fog is the top of the hero: type sits in it. The photo runs 32% past the bottom edge so the
   front car's bonnet logo is cropped away, and navy closes the bottom and corners over whatever is left */
.ab-hero { min-height: max(var(--sh), 60vw); padding: clamp(120px, 16vh, 170px) 0 0; background: #fff; }
.ab-hero__media { position: absolute; inset: 6vw 0 -32%; }
.ab-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; filter: contrast(1.04) saturate(1.06); }
.ab-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .94) 22%, rgba(255, 255, 255, .6) 32%, rgba(255, 255, 255, 0) 42%, rgba(15, 8, 43, 0) 64%, rgba(15, 8, 43, .45) 80%, rgba(15, 8, 43, .9) 93%, #0f082b 100%),
  linear-gradient(90deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, .5) 100%),
  radial-gradient(55% 45% at 0% 100%, rgba(15, 8, 43, .75) 0%, rgba(15, 8, 43, 0) 70%),
  radial-gradient(45% 40% at 100% 100%, rgba(15, 8, 43, .6) 0%, rgba(15, 8, 43, 0) 70%); }
.ab-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 24px 48px; align-items: end; }
.ab-hero .stack { color: var(--navy); }
.ab-br { display: none; }
.ab-hero .t-small { color: var(--magenta); font-weight: 700; font-size: clamp(22px, 2.6vw, 44px); margin-bottom: .3em; }
.ab-hero__quote { padding: 22px 24px; border-radius: 24px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(23, 12, 69, .1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 60px -40px rgba(23, 12, 69, .35); }
.ab-hero__quote blockquote, .ab-hero__intro { font-size: 17px; line-height: 1.45; font-weight: 500; color: #2c2160; }
.ab-hero__quote figcaption, .ab-hero__meta { margin-top: 14px; font-size: 14px; color: rgba(23, 12, 69, .6); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.ab-hero__quote figcaption b, .ab-hero__meta b { color: var(--navy); }

.story { padding: clamp(96px, 14vh, 170px) 0; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.story .stack { color: var(--navy); }
.story__body p { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; font-weight: 500; color: #2c2160; letter-spacing: -.01em; }
.story__body p + p { margin-top: 1.1em; }
.story__body p:first-child::first-letter { float: left; font-weight: 900; font-size: 4.2em; line-height: .78; margin: .06em .08em 0 0; color: var(--magenta); }
.story__sign { margin-top: 32px; display: flex; align-items: center; gap: 16px; font-size: 15px; font-weight: 500; color: #4a3f79; }
.story__sign img { width: 64px; height: 64px; object-fit: contain; }
.story__photos { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(48px, 8vh, 96px); height: clamp(320px, 38vw, 560px); }
.story__photo { border-radius: calc(var(--radius) * .8); overflow: hidden; position: relative; box-shadow: 0 40px 70px -40px rgba(23, 12, 69, .45); }
.story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.story__photo:last-child img { object-position: 50% 57%; }

.numbers { padding: clamp(96px, 14vh, 160px) 0; }
.num-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(245, 239, 242, .14); }
.num { padding: 28px 24px 0 0; }
.num + .num { padding-left: 24px; border-left: 1px solid rgba(245, 239, 242, .14); }
.num b { display: block; font-weight: 900; font-size: clamp(64px, 7.4vw, 128px); letter-spacing: -.06em; line-height: .84; font-feature-settings: "tnum"; color: var(--lav); white-space: nowrap; }
.num b sup, .num b small { font-size: .42em; letter-spacing: -.03em; vertical-align: .9em; color: var(--mint); margin-left: .04em; }
.num p { margin-top: 16px; font-size: 16px; line-height: 1.4; font-weight: 500; color: rgba(245, 239, 242, .7); max-width: 22ch; }

.plaques { padding: clamp(100px, 15vh, 180px) 0; }
.plaques .t-small { color: #fff; }
.plaque-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(40px, 7vh, 80px); }
.plaque { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px, 2.2vw, 34px); border-radius: 28px; background: linear-gradient(170deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .3); overflow: hidden; }
.plaque:nth-child(2) { top: -36px; }   /* top, not transform/translate: GSAP owns transform and folds translate into it */
.plaque svg { width: 64px; height: 64px; }
.plaque__year { font-weight: 900; font-size: clamp(72px, 9vw, 170px); letter-spacing: -.06em; line-height: .8; font-feature-settings: "tnum"; }
.plaque__what { font-weight: 700; font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -.02em; line-height: 1.15; max-width: 16ch; }
.plaque::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 46%, transparent 62%); transform: translateX(-120%); animation: sheen 7s ease-in-out infinite; }
.plaque:nth-child(2)::after { animation-delay: 1.2s; }
.plaque:nth-child(3)::after { animation-delay: 2.4s; }
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.plaques__foot { margin-top: clamp(28px, 5vh, 48px); font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .86); max-width: 60ch; }

.crew-sec { padding: clamp(96px, 14vh, 170px) 0; }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 11vw, 190px); gap: clamp(8px, 1vw, 14px); }
.mosaic figure { position: relative; overflow: hidden; border-radius: 22px; background: #221656; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1.2s var(--ease-out); }
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic .m-wide { grid-column: span 6; grid-row: span 2; }
.mosaic .m-wide img { object-position: 50% 55%; }
.mosaic .m-wide--van img { object-position: 50% 60%; }
.mosaic .m-tall { grid-column: span 3; grid-row: span 2; }
.mosaic .m-van { grid-column: span 3; grid-row: span 2; }
.mosaic .m-van img { object-position: 50% 50%; }
.names { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 7vh, 80px); }
.name-q { padding: 24px 22px; border-radius: 24px; background: rgba(245, 239, 242, .05); border: 1px solid rgba(245, 239, 242, .1); }
.name-q p { font-size: 16px; line-height: 1.45; font-weight: 500; color: rgba(245, 239, 242, .8); }
.name-q mark { background: none; color: var(--mint); font-weight: 700; }
.name-q span { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; color: rgba(245, 239, 242, .5); }

.values { padding: clamp(96px, 14vh, 170px) 0; }
.value-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 72px); }
.value { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; padding: 30px 0; border-top: 1px solid rgba(23, 12, 69, .12); }
.value__no { grid-row: span 2; font-weight: 900; font-size: 56px; letter-spacing: -.05em; line-height: .84; color: var(--magenta); font-feature-settings: "tnum"; min-width: 1.4em; }
.value h3 { font-weight: 700; font-size: clamp(26px, 2.4vw, 38px); letter-spacing: -.04em; line-height: .95; color: var(--navy); }
.value p { font-size: 17px; line-height: 1.5; font-weight: 500; color: #3b3070; max-width: 44ch; }

.creds { padding: clamp(80px, 12vh, 140px) 0; }
.cred-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cred { padding: 24px 22px; border-radius: 22px; border: 1px solid rgba(245, 239, 242, .14); }
.cred b { display: block; font-weight: 900; font-size: clamp(26px, 2.4vw, 40px); letter-spacing: -.05em; line-height: .9; color: var(--lav); }
.cred > span { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; color: rgba(245, 239, 242, .66); }
.cred__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 14px; min-height: 64px; }
/* real logos sit on a white tile so their own colours read on the dark world; sized by the shared .plogo art box */
.cred .plogo { --pw: 128px; --ph: 64px; --pr: 14px; --u: 72px; display: block; background: var(--white); border-color: transparent; }
.visit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: clamp(40px, 7vh, 72px); padding: clamp(26px, 2.6vw, 40px); border-radius: 28px; background: rgba(245, 239, 242, .06); }
.visit h3 { font-weight: 900; font-size: clamp(30px, 3.2vw, 52px); letter-spacing: -.05em; line-height: .9; }
.visit p { margin-top: 10px; font-size: 17px; font-weight: 500; color: rgba(245, 239, 242, .74); }
.visit p a { color: var(--mint); text-decoration: none; font-weight: 700; }

/* =========================================================
   SERVICE AREAS (dot map)
   ========================================================= */
.sa-hero { min-height: var(--sh); padding: clamp(110px, 14vh, 150px) 0 clamp(40px, 7vh, 80px); display: flex; align-items: center; }
.sa-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.sa-hero .stack { color: var(--lav); }
.sa-hero .t-small { color: var(--mint); font-weight: 500; font-size: clamp(22px, 2.6vw, 44px); margin-bottom: .3em; }
.sa-hero .t-hero:last-child { color: var(--mint); }
.sa-hero .lede { margin-top: clamp(18px, 3vh, 30px); }
.county-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 4vh, 40px); }
.county-chip { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: 99px; border: 1px solid rgba(245, 239, 242, .24); font-weight: 700; font-size: 15px; color: var(--lav); transition: background-color .3s, border-color .3s, color .3s; }
.county-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(113, 212, 171, .5); transition: box-shadow .4s; }
.county-chip small { font-size: 13px; font-weight: 500; opacity: .6; font-feature-settings: "tnum"; }
.county-chip:hover { border-color: rgba(245, 239, 242, .6); }
.county-chip.is-on { background: var(--lav); border-color: var(--lav); color: var(--navy); }
.county-chip.is-on i { background: var(--magenta); box-shadow: 0 0 0 4px rgba(239, 42, 112, .2); }
.towns { margin-top: 22px; min-height: 120px; }
.towns h2 { font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--mint); }
.towns ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 16px; font-weight: 500; color: rgba(245, 239, 242, .82); }
.towns li { display: inline-flex; align-items: center; gap: 8px; }
.towns li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(113, 212, 171, .7); }

.map { position: relative; }
.map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.map__land, .map__cover { -webkit-mask-image: radial-gradient(70% 66% at 64% 46%, #000 52%, transparent 100%); mask-image: radial-gradient(70% 66% at 64% 46%, #000 52%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }   /* no-repeat: edge dots poke past the box and would pick up the tiled mask's opaque far side */
.map__heat { fill: none; stroke: var(--magenta); stroke-width: 9; stroke-linecap: round; }
.map__bloom { transition: r .5s var(--ease-out); }
.town.is-quiet text { display: none; }
.map__land { fill: none; stroke: #f5eff2; stroke-opacity: .28; stroke-width: 6.5; stroke-linecap: round; }
.map__cover { fill: none; stroke: var(--mint); stroke-opacity: .7; stroke-width: 7; stroke-linecap: round; transition: stroke-opacity .5s; }
.map__rings circle { fill: none; stroke: var(--lav); stroke-opacity: .3; stroke-width: 1.2; stroke-dasharray: 3 7; }
.map__rings text { fill: var(--lav); fill-opacity: .45; font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.town circle { fill: var(--mint); stroke: #170c45; stroke-width: 3; transition: r .4s var(--ease-out), fill .3s; }
.town text { fill: var(--lav); font-family: var(--font); font-weight: 700; font-size: 21px; letter-spacing: -.01em; paint-order: stroke; stroke: #150f3d; stroke-width: 6px; stroke-linejoin: round; opacity: 0; transition: opacity .35s; pointer-events: none; }
.town.is-major text { opacity: .9; }
.map__county.is-on .town text, .map__svg[data-peek] .map__county .town text { opacity: 0; }
.map__county.is-on .town text { opacity: 1; }
.map__svg[data-active=""] .town.is-major text { opacity: .9; }
.map__county.is-on .town circle { fill: var(--magenta); r: 7; }
.map__svg[data-active]:not([data-active=""]) .map__county:not(.is-on) .town.is-major text { opacity: .35; }
.map__svg[data-peek="dublin"] [data-county="dublin"] .town text, .map__svg[data-peek="meath"] [data-county="meath"] .town text, .map__svg[data-peek="kildare"] [data-county="kildare"] .town text,
.map__svg[data-peek="wicklow"] [data-county="wicklow"] .town text, .map__svg[data-peek="louth"] [data-county="louth"] .town text, .map__svg[data-peek="westmeath"] [data-county="westmeath"] .town text { opacity: 1; }
.map__home .core { fill: var(--magenta); stroke: #fff; stroke-width: 3; }
.map__home .pulse { fill: none; stroke: var(--magenta); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2.8s cubic-bezier(.2, .7, .3, 1) infinite; }
.map__home .pulse--2 { animation-delay: 1.4s; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(7); opacity: 0; } }
.map__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 13px; font-weight: 500; color: rgba(245, 239, 242, .6); }
.map__legend span { display: inline-flex; align-items: center; gap: 8px; }
.map__legend i { width: 9px; height: 9px; border-radius: 50%; }
.map__legend .l-home { background: var(--magenta); }
.map__legend .l-town { background: var(--mint); }
.map__legend .l-cover { background: rgba(113, 212, 171, .5); }
.map__legend .l-ring { background: none; border: 1.2px dashed rgba(245, 239, 242, .5); }
.js:not(.rm) .map__land, .js:not(.rm) .map__cover { clip-path: circle(0% at 68% 40%); }
.map__heat { pointer-events: none; }
/* wide screens: the map is the hero's right half, full height, bleeding off the edge; the copy sits over its faded west */
@media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
  .sa-hero__grid { grid-template-columns: minmax(0, 620px); }
  .sa-hero .map__land, .sa-hero .map__cover { -webkit-mask-image: radial-gradient(60% 58% at 68% 50%, #000 42%, transparent 100%); mask-image: radial-gradient(60% 58% at 68% 50%, #000 42%, transparent 100%); }
  .sa-hero__grid > div { position: relative; z-index: 1; }
  /* the lit east coast (about 60% across the art) sits centred in the space right of the copy; the faded west runs under it */
  .sa-hero .map { position: absolute; top: clamp(64px, 8vh, 96px); bottom: 0; left: calc(50% + 310px); right: 0; margin: 0; }
  .sa-hero .map__svg { width: auto; height: 100%; aspect-ratio: 1000 / 985; max-width: none; transform: translateX(-48%); }
  .sa-hero .map__legend { position: absolute; right: var(--gutter); bottom: clamp(20px, 3.5vh, 36px); margin: 0; flex-wrap: nowrap; white-space: nowrap; }
}
.map.is-in .map__land, .map.is-in .map__cover, .rm .map__land, .rm .map__cover { clip-path: circle(150% at 68% 40%); transition: clip-path 2.4s cubic-bezier(.33, 1, .68, 1); }

.counties { padding: clamp(96px, 14vh, 170px) 0; }
.county-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.county { position: relative; padding: 28px 26px 26px; border-radius: 28px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(23, 12, 69, .06); overflow: hidden; }
.county__name { font-weight: 900; font-size: clamp(40px, 4vw, 68px); letter-spacing: -.055em; line-height: .84; text-transform: uppercase; color: var(--navy); }
.county__km { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--magenta-d); }
.county ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.county li { padding: 6px 12px; border-radius: 99px; background: #f1e9f2; font-size: 14px; font-weight: 700; color: #2c2160; }
.county--home { background: var(--navy); }
.county--home .county__name { color: var(--lav); }
.county--home .county__km { color: var(--mint); }
.county--home li { background: rgba(245, 239, 242, .1); color: var(--lav); }
.counties__note { margin-top: clamp(24px, 4vh, 40px); font-size: 16px; line-height: 1.5; font-weight: 500; color: #3b3070; max-width: 70ch; }

.base { padding: clamp(96px, 14vh, 160px) 0; }
.base__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.base__photo { border-radius: calc(var(--radius) * .8); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.base__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 90%; scale: 1.15; transform-origin: 50% 80%; }
.base dl { margin: clamp(28px, 4vh, 44px) 0 0; display: grid; gap: 0; }
.base dl div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(245, 239, 242, .12); }
.base dt { font-size: 14px; font-weight: 700; color: var(--mint); padding-top: 3px; }
.base dd { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.base dd a { text-decoration: none; }
.base dd a:hover { color: var(--mint); }
.base__far { margin-top: 28px; padding: 22px 24px; border-radius: 22px; background: rgba(113, 212, 171, .1); border: 1px solid rgba(113, 212, 171, .25); font-size: 16px; line-height: 1.5; font-weight: 500; color: rgba(245, 239, 242, .86); }
.base__far b { color: var(--mint); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model { min-height: 0; }
  .names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voices__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lede { font-size: 18px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq__head { position: static; }
  .faq summary { font-size: 20px; padding: 22px 0; }
  .faq__a p { padding-right: 0; }

  .hp-hero { min-height: 0; }
  .thermal__copy { position: relative; display: block; padding: clamp(80px, 12vh, 120px) 0 28px; }
  .thermal__copy .stack { max-width: none; }
  .thermal { display: flex; flex-direction: column-reverse; }
  .thermal__stage { height: auto; aspect-ratio: 4 / 5; --lr-base: 104px; --pos: 76% 50%; }
  .thermal__stage::after { background: linear-gradient(180deg, #0b0828 0%, rgba(11, 8, 40, 0) 18%), linear-gradient(0deg, rgba(11, 8, 40, .6) 0%, rgba(11, 8, 40, 0) 20%); }
  .thermal__read b { font-size: 24px; }
  .hp-hero__grid, .bo-hero__grid, .pr-hero__grid, .sa-hero__grid, .ready__grid, .story__grid, .sameday__grid, .base__grid, .grant__grid, .track { grid-template-columns: minmax(0, 1fr); }
  .hp-unit { max-width: 420px; order: -1; margin: -10px auto -30px; }
  .hp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-facts li:nth-child(n+3) { padding-top: 26px; }
  .gcard { position: static; }
  /* phones: the result card sits under the questions, so a slim live readout follows you down the form */
  .gmini { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; padding: 14px 18px; border-radius: 99px; background: var(--navy); color: rgba(245, 239, 242, .78); font-size: 13px; font-weight: 500; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(23, 12, 69, .6); }
  .gmini b { color: var(--mint); font-weight: 700; font-feature-settings: "tnum"; }
  .gmini span { white-space: nowrap; }
  .gq fieldset { padding: 18px 16px 20px; border-radius: 22px; }
  .gq label span { min-height: 44px; padding: 8px 14px; font-size: 14.5px; }
  .sys-grid { grid-template-columns: minmax(0, 1fr); }
  .ready__photo { aspect-ratio: 16 / 10; order: 2; }

  .bo-hero { min-height: 0; }
  .bo-hero__media { max-width: 440px; width: 86%; margin: 12px auto 0; }
  .tag { left: -8%; }
  .vs__grid { grid-template-columns: minmax(0, 1fr); }
  .vs__or { justify-self: center; margin: -6px 0; }
  .vs__art { --d: 184px; }
  .sameday__clock { max-width: 260px; order: -1; }
  .sameday__quotes { grid-template-columns: minmax(0, 1fr); }
  .extra-grid { grid-template-columns: minmax(0, 1fr); }
  .extra { flex-direction: row; gap: 18px; align-items: center; padding: 18px; }
  .extra__art { flex: none; width: 104px; height: 104px; margin: 0; }
  .extra__art { padding-bottom: 14px; }
  .extra__art::before { height: 9px; bottom: 10px; }
  .sign-list { grid-template-columns: minmax(0, 1fr); }
  .sign, .sign:nth-child(4), .sign:nth-child(5) { grid-column: auto; }

  .pr-hero { min-height: 0; padding-bottom: clamp(48px, 8vh, 96px); }
  .pr-route { display: none; }
  .track__aside { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 14px; padding: 84px 0 10px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); background: #150b40; }
  .track__aside::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(180deg, #150b40, rgba(21, 11, 64, 0)); pointer-events: none; }
  .track__num { font-size: 72px; }
  .track__of { margin: 0; }
  .track__name { display: none; }
  .track__list { padding-left: 36px; }
  .pstep::before { left: -36px; }
  .split__grid { grid-template-columns: minmax(0, 1fr); }
  .voices__row { grid-template-columns: minmax(0, 1fr); }
  .voice:nth-child(even) { top: 0; }

  .ab-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .ab-hero { min-height: 0; padding-bottom: calc(70vw - 60px); }
  .ab-hero__media { top: auto; bottom: -22vw; height: 92vw; }
  .ab-hero::after { top: auto; height: calc(70vw + 80px); }
  .ab-br { display: inline; }
  .story__photos { grid-template-columns: minmax(0, 1fr); height: auto; }
  .story__photo { aspect-ratio: 4 / 3; }
  .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num:nth-child(3) { padding-left: 0; border-left: 0; }
  .num:nth-child(n+3) { margin-top: 28px; border-top: 1px solid rgba(245, 239, 242, .14); }
  .plaque-row { grid-template-columns: minmax(0, 1fr); }
  .plaque { aspect-ratio: auto; min-height: 220px; flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
  .plaque:nth-child(2) { top: 0; }
  .plaque svg { position: absolute; right: 20px; top: 20px; width: 44px; height: 44px; }
  .plaque__year { flex-basis: 100%; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  .mosaic .m-wide { grid-column: span 2; grid-row: span 1; }
  .mosaic .m-tall, .mosaic .m-van { grid-column: span 1; grid-row: span 1; }
  .names { grid-template-columns: minmax(0, 1fr); }
  .value-list { grid-template-columns: minmax(0, 1fr); }
  .visit { grid-template-columns: minmax(0, 1fr); }

  .sa-hero { min-height: 0; }
  .map { order: -1; margin: 0 -8px; }
  .town text { font-size: 26px; }
  .county-grid { grid-template-columns: minmax(0, 1fr); }
  .base dl div { grid-template-columns: 90px 1fr; }
}
@media (max-width: 560px) {
  .models { grid-template-columns: minmax(0, 1fr); }
  .extra { flex-direction: column; align-items: stretch; gap: 0; }
  .extra__art { width: auto; height: 150px; margin-bottom: 18px; padding-bottom: 20px; }
  .extra__art::before { height: 12px; bottom: 14px; }
  .town text { font-size: 34px; stroke-width: 8px; }
  .town circle { r: 7; }
  .hp-facts b { font-size: 30px; }
  .cred-row { grid-template-columns: minmax(0, 1fr); }
  .county-chip { height: 42px; padding: 0 14px 0 12px; font-size: 14px; }
  .route__btn { font-size: 15px; }
}