/* CH Group: home.css (home layout only; tokens and shared components live in site.css) */

/* ------------------------------------------------------------------- 1 hero --
   Natural flow, never pinned. Three planes in one box so they register at
   rest: the sky-and-hills plate (slowest), the building cutout, a warm haze.
   The copy rides at 1x. Reduced motion swaps in the flattened photograph. */
.hero {
  --hero-pad: clamp(36px, 7.5vh, 96px);
  position: relative; height: clamp(560px, calc(100svh - var(--hd-h) - 164px), 1000px);
  overflow: clip; background: #dfe3e2; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__plane { position: absolute; inset: -18px -28px -18px; }
.hero__depth { position: absolute; inset: 0; will-change: transform; }
.hero__depth picture, .hero__img, .hero__full {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 64% 30%;
}
/* the cutout's far-left edge has a hard courtyard step; feather it into the plate */
.hero__plane--site .hero__img {
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 70%), linear-gradient(to right, transparent 3%, #000 15%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 70%), linear-gradient(to right, transparent 3%, #000 15%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.hero__plane--haze .hero__depth {
  background:
    radial-gradient(42% 46% at 6% 34%, rgb(255 238 206 / 0.42), rgb(255 238 206 / 0) 70%),
    linear-gradient(to top, rgb(250 236 210 / 0.20), rgb(250 236 210 / 0) 26%);
}
.hero__full { z-index: 3; }
.hero__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* the lead-column haze: dense under the copy (every line >= 4.5:1 on the render),
     gone by 64% so the building and the roof keep their full contrast */
  background: linear-gradient(90deg, rgb(246 245 240 / 0.9) 0%, rgb(246 245 240 / 0.86) 30%, rgb(246 245 240 / 0.79) 40%, rgb(246 245 240 / 0.5) 49%, rgb(246 245 240 / 0.17) 57%, rgb(246 245 240 / 0) 64%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 97%); mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--sc-maxw); margin-inline: auto; padding: var(--hero-pad) var(--sc-gutter) 0; }
.hero__copy { max-width: 48rem; color: var(--green-900); }
.hero [data-sc-cue] { opacity: 1; }
.hero__title, .hero__sub, .hero__proofline { width: fit-content; }
.hero__title {
  font: 500 clamp(2.5rem, 1.35rem + 3.55vw, 4.85rem)/1.0 var(--sc-font-display); font-optical-sizing: auto;
  letter-spacing: -0.026em; color: var(--green-900);
}
.hero__line { display: block; }
.hero__title em { font-style: italic; letter-spacing: -0.018em; }
.hero__sub { margin-top: clamp(16px, 2.2vh, 24px); max-width: 40ch; font-size: clamp(1.08rem, 0.98rem + 0.42vw, 1.3rem); line-height: 1.5; color: var(--green-900); text-wrap: balance; }
.hero__actions { margin-top: clamp(20px, 3vh, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hero__proofline { margin-top: clamp(14px, 2vh, 20px); font: 500 14px/1.4 var(--sc-font-text); color: var(--green-900); }
.hero .btn--text { color: var(--green-900); }

@media (max-width: 700px) {
  /* shorter than the screen so the top of the proof bar shows at 390 x 844; the
     plane keeps its old box (it runs on below the hero, which clips it), so the
     building sits where it did and only its base is cropped */
  .hero { --hero-pad: 22px; height: max(560px, calc(100svh - var(--hd-h) - 110px)); }
  .hero__plane { inset: -18px -20px -104px; }
  .hero__depth picture, .hero__img, .hero__full { object-position: 58% 100%; }
  .hero__wash { -webkit-mask-image: none; mask-image: none; }
  .hero__plane--site .hero__img { -webkit-mask-image: none; mask-image: none; }
  .hero__wash { background: linear-gradient(to bottom, rgb(245 246 244 / 0.5), rgb(245 246 244 / 0.28) 34%, rgb(245 246 244 / 0) 52%); }
  .hero__title { font-size: min(2.4rem, 9.4vw); line-height: 1.04; }
  .hero__sub { margin-top: 14px; max-width: 34ch; font-size: 1.0625rem; }
  .hero__actions { margin-top: 18px; gap: 8px 18px; }
  .hero__actions .btn--film { font-size: 14px; gap: 10px; }
  .hero__actions .btn__disc { width: 34px; height: 34px; }
  .hero__proofline { margin-top: 12px; }
}
/* short phones: drop the building lower so the copy keeps the sky */
@media (max-width: 700px) and (max-height: 760px) {
  .hero__plane { inset: -18px -20px -200px; }
  .hero__sub { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__plane--site, .hero__plane--haze { display: none; }
}
.no-js .hero__plane { display: none; }

/* ------------------------------------------------------------- 2 proof bar -- */
.proofbar { position: relative; z-index: 2; background: var(--white); border-bottom: 1px solid var(--line); padding: 30px 0 clamp(22px, 2.6vw, 32px); }
.proofbar__link { margin-top: clamp(20px, 2.4vw, 28px); padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.proofbar__link a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--sc-ink); text-underline-offset: 0.3em; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }
.proofbar__link .ico { width: 16px; height: 16px; transition: transform 180ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .proofbar__link a:hover .ico { transform: translateX(3px); } }

/* ------------------------------------------------------ 3 three proposals --
   Authored quiet before the peak: one heading, one paragraph, room. */
.tension { padding-block: clamp(6rem, 13vw, 12rem) clamp(5rem, 11vw, 10rem); }
.tension__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
.tension__title {
  grid-column: 1 / -1; font: 500 clamp(2.4rem, 1.25rem + 3.7vw, 5.4rem)/1.04 var(--sc-font-display);
  letter-spacing: -0.026em; color: var(--sc-ink);
}
.tension__line { display: block; }
.tension__line:nth-child(3) { font-style: italic; letter-spacing: -0.02em; }
.tension__body { grid-column: 6 / span 6; margin-top: clamp(32px, 4.5vw, 64px); max-width: 46ch; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
@media (max-width: 860px) { .tension__body { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ 4 normaliser --
   The one pinned act on the site. normaliser.js drives it from scroll; with no
   JS or under reduced motion it is a static ledger with an As quoted toggle.
   The ledger is set compact (row padding follows the viewport height) so the
   whole ledger and its recommendation hold in about 540px on a laptop and
   about 570px on a phone: the act pins on any screen with 560px of room. */
.norm {
  --edge: max(var(--sc-gutter), calc((100vw - var(--sc-maxw)) / 2 + var(--sc-gutter)));
  --cy: clamp(4px, 0.8vh, 8px);          /* ledger cell padding, top and bottom */
  position: relative;
}
.norm__lead { font: 500 clamp(1.15rem, 1rem + 0.5vw, 1.4rem)/1.3 var(--sc-font-display); font-style: italic; color: var(--brass-on-dark); }
.norm__title { margin-top: 14px; font-size: clamp(1.9rem, 1.35rem + 1.25vw, 2.75rem); color: var(--sc-ink); }
.norm__body { margin-top: 20px; max-width: 40ch; }
.norm__frame { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 940px; }
.norm__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.norm__brief { display: grid; justify-items: start; gap: 4px; }
.norm__chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px;
  border: 1px solid var(--line-strong); border-radius: var(--sc-r-sm);
  font: 500 12.5px/1.35 var(--sc-font-text); color: var(--sc-ink);
}
.norm__chip .ico { width: 15px; height: 15px; flex: none; color: var(--brass-on-dark); stroke-width: 2.25; }
.norm__label { font-size: 12px; line-height: 1.3; color: var(--sc-ink-soft); }
.norm__toggle { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--sc-r-sm); }
.norm__tbtn {
  min-height: 30px; padding: 0 11px; border: 0; border-radius: 4px; background: none;
  font: 600 12.5px/1 var(--sc-font-text); color: var(--sc-ink-soft);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.norm__tbtn[aria-pressed="true"] { background: var(--porcelain); color: var(--green-900); }
@media (hover: hover) and (pointer: fine) { .norm__tbtn[aria-pressed="false"]:hover { color: var(--sc-ink); } }
.no-js .norm__toggle { display: none; }
@media (pointer: coarse) { .norm__tbtn { position: relative; } .norm__tbtn::after { content: ""; position: absolute; inset: -8px -2px; } }

.norm__board { position: relative; display: grid; margin-top: clamp(10px, 1.6vh, 18px); isolation: isolate; }
.norm__panel, .norm__table { grid-area: 1 / 1; }
.norm__table { z-index: 2; }
.norm__panel { margin: -8px -12px; border-radius: var(--sc-r-md); background: var(--white); box-shadow: var(--sc-e3); }
/* stacking: panel, then the paper sheets, then the ledger (whose text only
   appears once the sheets' own text has cleared) */
.norm__sheets { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.norm__table {
  --pn: 1; --mark: 1; --reco: 1;
  position: relative; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  font: 400 13.5px/1.3 var(--sc-font-text); color: var(--green-900);
  --sc-ink: var(--green-900); --sc-ink-soft: #5d6d64; --sc-accent: var(--brass-text);
}
.norm__table th, .norm__table td { position: relative; padding: var(--cy) 10px; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(16 61 44 / calc(0.11 * var(--rule, 1))); }
.norm__table tbody tr:last-child > * { border-bottom: 0; }
.norm__table thead > tr > * { padding-top: 2px; padding-bottom: calc(var(--cy) + 3px); border-bottom-color: rgb(16 61 44 / calc(0.26 * var(--rule, 1))); }
.nh--blank { width: 18%; }
.norm__table th.nr { padding-right: 6px; }
.nh__in { display: inline-block; font: 500 1.04rem/1.2 var(--sc-font-display); letter-spacing: -0.005em; color: var(--green-900); }
/* the recommended column: a brass rule over its head and a faint brass tint */
.nh.is-reco::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: -8px; height: 3px; border-radius: 0 0 2px 2px;
  background: var(--brass); opacity: var(--reco);
}
.nc.is-reco { background: rgb(224 166 58 / calc(0.085 * var(--reco))); }
.nr__in { display: inline-block; font: 600 12px/1.3 var(--sc-font-text); color: #5d6d64; letter-spacing: 0.01em; white-space: nowrap; }
.nc__in { position: relative; display: grid; grid-template-areas: "v" "sub" "note"; justify-items: start; }
.nc__n, .nc__q { grid-area: v; }
.nc__n { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; }
.nc--claim .nc__q { grid-area: sub; }
.nc__note { grid-area: note; margin-top: 1px; font-size: 11px; line-height: 1.25; font-style: italic; color: #5d6d64; }
.nc__v { font-weight: 500; }
.nc--num .nc__v { font-weight: 600; font-variant-numeric: tabular-nums; }
.nc__sub { font-size: 11.5px; color: #5d6d64; font-variant-numeric: tabular-nums; }
/* best value in the two return rows (Savings, Payback) */
.is-best .nc__v::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%;
  background: var(--brass); box-shadow: 0 0 0 1px var(--brass-edge); vertical-align: 0.12em; opacity: var(--mark);
}
.nc__q { color: var(--green-900); transition: opacity 200ms var(--ease); }
.nc__n { transition: opacity 200ms var(--ease); }
.nc__qt { position: relative; }
/* as quoted, a figure reads at the weight of a figure; a gap reads as a gap */
.nc--num:not(.nc--claim) .nc__q { font-weight: 600; font-variant-numeric: tabular-nums; }
.nc .nc__q.nc__q--gap { font-weight: 400; font-style: italic; color: #5d6d64; }
.nc:not(.nc--claim) .nc__q { opacity: 0; }
.nc--claim .nc__q { margin-top: 1px; font-size: 11.5px; line-height: 1.25; color: #5d6d64; }
/* The strike: a transparent copy of the claim carrying line-through, so it
   strikes every line of a claim that wraps, revealed left to right (clip-path). */
.nc--claim .nc__qt { display: inline-block; }
.nc--claim .nc__qt::after {
  content: attr(data-t); content: attr(data-t) / "";
  position: absolute; inset: 0; color: transparent; pointer-events: none;
  text-decoration: line-through; text-decoration-color: #5d6d64; text-decoration-thickness: 1.5px;
  clip-path: inset(-2px calc((1 - var(--k, 1)) * 100%) -2px 0);
}
.norm__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; margin-top: clamp(12px, 2vh, 22px); }
.norm__reco { flex: 1 1 26rem; max-width: 66ch; font-size: 14.5px; line-height: 1.45; color: var(--sc-ink); }
.norm__reco strong { color: var(--brass-on-dark); font-weight: 600; }

/* As quoted (static toggle): every cell shows the installer's own wording;
   a value the quote already gave on the same basis stays as it is. */
.norm--quoted .nc__n, .norm--quoted .nc__note { opacity: 0; }
.norm--quoted .nc--same .nc__n { opacity: 1; }
.norm--quoted .nc .nc__q { opacity: 1; }
.norm--quoted .nc--claim .nc__q { grid-area: v; margin-top: 0; font-size: inherit; line-height: inherit; font-weight: 500; color: var(--green-900); }
.norm--quoted .nc--claim .nc__qt::after { visibility: hidden; }
.norm--quoted .nc__sub { visibility: hidden; }
.norm--quoted .norm__table { --mark: 0; --reco: 0; }
.norm--quoted .norm__reco { opacity: 0; }
.norm__reco { transition: opacity 200ms var(--ease); }

/* The paper quote sheets of the before state (built by normaliser.js, motion
   only). Each is laid out in normal flow in its installer's own idiom, so
   nothing inside a sheet can overlap. */
.sheet {
  position: absolute; left: 0; top: 0; overflow: hidden; border-radius: var(--sc-r-sm); background: #fff; color: var(--green-900);
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / 0.3), 0 18px 36px -10px hsl(var(--sc-shadow-color) / 0.55);
  transform-origin: 50% 50%; will-change: transform, opacity;
}
.sheet__in { padding-bottom: 8px; will-change: opacity; }
.sheet__head { padding: 10px 13px 8px; }
.sheet__title { font: 500 0.98rem/1.2 var(--sc-font-display); }
.sheet__sub { margin-top: 2px; font-size: 10.5px; line-height: 1.3; color: #5d6d64; }
.sheet__list { margin: 0; padding: 0 13px; }
.sheet__f { padding: 3px 0 4px; }
.sheet__lab { font-size: 10px; line-height: 1.3; color: #5d6d64; }
.sheet__val { margin: 1px 0 0; font-size: 11.5px; line-height: 1.3; font-weight: 500; color: var(--green-900); }
.sheet__f.is-gap .sheet__val { font-style: italic; font-weight: 400; color: #5d6d64; }
/* B: a tidy two-column table under a ruled head */
.sheet--tidy .sheet__head { margin-inline: 13px; padding-inline: 0; border-bottom: 1.5px solid var(--green-900); }
.sheet--tidy .sheet__list { padding-top: 2px; }
.sheet--tidy .sheet__f { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 8px; align-items: baseline; border-bottom: 1px solid #e6e9e4; padding: 4px 0; }
.sheet--tidy .sheet__val { margin: 0; text-align: right; }
/* A: a sales quotation, dark banner, uppercase labels, the headline saving shouted */
.sheet--sales { background: #fbfaf6; }
.sheet--sales .sheet__head { background: var(--green-900); color: var(--porcelain); }
.sheet--sales .sheet__title { font: 700 11px/1.3 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; }
.sheet--sales .sheet__sub { color: #b9c8bf; text-transform: uppercase; letter-spacing: 0.1em; font-size: 9.5px; }
.sheet--sales .sheet__list { padding-top: 3px; }
.sheet--sales .sheet__lab { font-weight: 700; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.sheet--sales .sheet__f.is-claim .sheet__val { font: 600 1.06rem/1.2 var(--sc-font-display); color: #7a4f0b; }
/* C: an investment summary that leads with its payback figure */
.sheet--summary .sheet__head { background: #eef0ec; border-bottom: 1px solid #d5dad3; }
.sheet--summary .sheet__title { font: 600 13px/1.3 var(--sc-font-text); }
.sheet--summary .sheet__f + .sheet__f { border-top: 1px solid #e3e6e1; }
.sheet--summary .sheet__f.is-claim .sheet__val { font: 600 1rem/1.25 var(--sc-font-text); }

.norm--motion .nc__q, .norm--motion .nc__n, .norm--motion .norm__reco { transition: none; }
.norm--motion .nc__q, .norm--motion .nc__n { backface-visibility: hidden; transform-origin: 0 50%; }
/* still too tall once the fonts are in: one step tighter rather than a static fallback */
.norm--tight { --cy: 3px; }
.norm--tight .norm__board { margin-top: 8px; }
.norm--tight .norm__foot { margin-top: 10px; }

/* desktop: intro and stage side by side, both held for the whole act */
@media (min-width: 861px) {
  .norm { display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); }
  .norm__intro { display: flex; align-items: center; padding: calc(var(--hd-h) + 32px) clamp(20px, 2.4vw, 40px) 48px var(--edge); }
  .norm__stage { display: flex; align-items: center; padding: calc(var(--hd-h) + clamp(8px, 1.4vh, 18px)) var(--edge) clamp(8px, 1.4vh, 18px) clamp(16px, 2vw, 32px); }
  .js .norm[data-sc-act] .norm__intro { position: sticky; top: 0; height: 100vh; height: 100svh; }
  .norm--static, .no-js .norm { padding-block: var(--sec-y); }
  .norm--static .norm__intro, .norm--static .norm__stage, .no-js .norm__intro, .no-js .norm__stage { padding-top: 0; padding-bottom: 0; height: auto; }
}
/* short laptops: the side copy steps down a rung beside the pinned ledger */
@media (min-width: 861px) and (max-height: 700px) {
  .norm__title { font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2.3rem); }
  .norm__body { margin-top: 14px; font-size: 1rem; }
}
/* phones and tablets: the intro scrolls away, then the ledger pins. The chip
   and the toggle share the top row and the illustrative label sits under the
   ledger, so the whole frame holds in a 375 x 667 screen. */
@media (max-width: 860px) {
  .norm { display: block; --cy: 3px; }
  .norm__intro { padding: var(--sec-y) var(--sc-gutter) 24px; }
  .norm__stage { padding: calc(var(--hd-h) + 6px) 16px 6px; }
  .norm--static .norm__stage, .no-js .norm__stage { padding-top: 8px; padding-bottom: var(--sec-y); }
  .norm[data-sc-act] .norm__stage { display: flex; align-items: center; }
  .norm__frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chip toggle" "board board" "foot foot" "label label"; column-gap: 8px; }
  .norm__bar, .norm__brief { display: contents; }
  .norm__chip { grid-area: chip; align-self: start; font-size: 10px; line-height: 1.25; padding: 4px 7px 4px 6px; gap: 6px; }
  .norm__chip .ico { width: 12px; height: 12px; }
  .norm__toggle { grid-area: toggle; align-self: start; padding: 2px; }
  .norm__tbtn { min-height: 30px; padding: 0 7px; font-size: 11px; }
  .norm__board { grid-area: board; margin-top: 9px; }
  .norm__foot { grid-area: foot; margin-top: 8px; }
  .norm__label { grid-area: label; margin-top: 4px; font-size: 10px; line-height: 1.25; }
  .norm__panel { margin: -5px -8px; }
  .norm__table, .norm__table thead, .norm__table tbody { display: block; }
  .norm__table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
  .norm__table th, .norm__table td { padding: 0 0 4px; font-size: 11px; line-height: 1.25; }
  .norm__table thead .nh--blank { display: none; }
  .norm__table thead > tr > * { padding-top: 0; padding-bottom: 4px; }
  .norm__table th.nr { grid-column: 1 / -1; padding: 3px 0 1px; border-bottom: 0; }
  .nr__in { font-size: 9.5px; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; }
  .nh__in { font-size: 0.9rem; }
  .nh.is-reco::before { left: 0; right: 0; top: -5px; }
  /* the recommended column's tint as one band (the cells are separate grid rows here) */
  .nc.is-reco { background: none; }
  .norm__table::before {
    content: ""; position: absolute; z-index: -1; top: -5px; bottom: 0; width: calc((100% - 16px) / 3 + 8px);
    left: calc(var(--reco-col, 1) * ((100% - 16px) / 3 + 8px) - 4px);
    border-radius: 4px; background: rgb(224 166 58 / calc(0.085 * var(--reco))); pointer-events: none;
  }
  .nc__sub { display: none; }
  .nc__note { font-size: 9.5px; line-height: 1.2; margin-top: 0; }
  .nc--claim .nc__q { font-size: 10px; line-height: 1.2; }
  .is-best .nc__v::before { width: 6px; height: 6px; margin-right: 4px; }
  .norm__reco { font-size: 11.5px; line-height: 1.38; flex-basis: 100%; }
  .norm .nr__in { white-space: normal; }
  .norm--tight .norm__table th.nr { padding: 2px 0 0; }
  .norm--tight .norm__table td { padding-bottom: 3px; }
  .norm--tight .norm__board { margin-top: 7px; }
  .norm--tight .norm__foot { margin-top: 6px; }
  .sheet__head { padding: 8px 11px 6px; }
  .sheet--tidy .sheet__head { margin-inline: 11px; }
  .sheet__list { padding-inline: 11px; }
  .sheet__f { padding: 2px 0 3px; }
}

/* ----------------------------------------------------------- 5 the portal -- */
.portal { --sec-y: clamp(4rem, 8vw, 8rem); }
.portal__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.portal__copy .body { margin-top: var(--sc-5); }
.screens { margin: 0; }
.screens__stack { position: relative; padding-bottom: 20%; }
.screens__back, .screens__compare, .screens__reco { overflow: hidden; border: 1px solid var(--line); border-radius: var(--sc-r-md); background: var(--white); }
.screens__back { width: 88%; box-shadow: var(--sc-e2); }
.screens__compare { position: absolute; right: 0; top: 34%; width: 50%; box-shadow: var(--sc-e3); }
.screens__reco { position: absolute; left: 8%; bottom: 0; width: 48%; box-shadow: var(--sc-e3); }
.screens__img { display: block; width: 100%; height: auto; }
.screens__caption { margin-top: 18px; font-size: 14px; color: var(--sc-ink-soft); }
.portal__stages { margin-top: clamp(64px, 8vw, 120px); }
.portal__film { margin-top: clamp(64px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4.5vw, 72px); align-items: end; }
.replaces__label { font: 600 0.8125rem/1.3 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.replaces { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.replaces span { position: relative; display: inline-block; font: 500 clamp(1.55rem, 1.25rem + 1vw, 2.2rem)/1.22 var(--sc-font-display); letter-spacing: -0.012em; color: var(--sc-ink-soft); }
.replaces span::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 56%; height: 2px; border-radius: 1px; background: var(--green-900);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 640ms var(--ease);
}
.replaces.sc-in span::after, .no-js .replaces span::after { transform: scaleX(1); }
.replaces li:nth-child(1) span::after { transition-delay: 260ms; }
.replaces li:nth-child(2) span::after { transition-delay: 400ms; }
.replaces li:nth-child(3) span::after { transition-delay: 540ms; }
.replaces li:nth-child(4) span::after { transition-delay: 680ms; }
.portal__link { margin-top: 26px; }
@media (max-width: 860px) {
  .portal__top, .portal__film { grid-template-columns: 1fr; }
  .screens__stack { padding-bottom: 26%; }
}
@media (prefers-reduced-motion: reduce) { .replaces span::after { transition: none; } }

/* ------------------------------------------------------------ 7 two doors -- */
.doors__title { max-width: 18ch; }
.doors__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4.5vw, 72px); margin-top: clamp(36px, 4.5vw, 64px); align-items: start; }
.door--installer { margin-top: clamp(0px, 9vw, 128px); }
.door__media { overflow: hidden; border-radius: var(--sc-r-md); background: var(--hairline-light); }
.door__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.door__body { margin-top: clamp(20px, 2.4vw, 30px); }
.door__body .h3 { margin-top: 10px; }
.door__body .body { margin-top: 12px; max-width: 46ch; }
.door__link { margin-top: 14px; }
.door__label { font: 600 0.8125rem/1.3 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .doors__grid { grid-template-columns: 1fr; }
  .door--installer { margin-top: 24px; }
}

/* ----------------------------------------------------------- 8 who we are -- */
.who__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 88px); row-gap: clamp(32px, 4vw, 48px); }
.who__copy { grid-column: 1; grid-row: 1; }
.who__copy .lede { margin-top: var(--sc-5); }
.who__link { margin-top: var(--sc-5); }
.who__film { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.who__founders { grid-column: 1; grid-row: 2; max-width: 30rem; }
@media (max-width: 860px) {
  .who__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .who__copy, .who__film, .who__founders { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------------------------------------ 9 FAQ -- */
.faqsec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.faqsec__title { max-width: 12ch; }
@media (max-width: 860px) { .faqsec__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- 0 zoom intro --
   One camera move ahead of the hero (zoom.js). The section is the scroll run; its
   stage sticks under the header. The last viewport of the run overlaps the hero
   (negative margin), so when the stage fades out the real hero is already there.
   Only with JS and motion allowed: otherwise the page starts at the hero. */
.zoom { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .zoom {
    --stage-h: calc(100svh - var(--hd-h));
    --zoom-run: 560svh;
    display: block; position: relative; z-index: 5; pointer-events: none; /* its tail lies over the hero */
    height: calc(var(--stage-h) + var(--zoom-run));
    margin-bottom: calc(var(--stage-h) * -1);
  }
}
@media (max-width: 700px) { .js .zoom { --zoom-run: 430svh; } }
.zoom__stage {
  position: sticky; top: var(--hd-h); height: var(--stage-h); overflow: hidden;
  background: #e9d9b8; color: var(--porcelain);
}
/* at the end of the run the stage sits exactly over the live hero and fades onto it in
   time, not with scroll: past this point the two scroll away together, registered */
.zoom__stage { transition: opacity 320ms var(--ease), visibility 0s; }
.zoom.is-done .zoom__stage { opacity: 0; visibility: hidden; transition: opacity 520ms var(--ease), visibility 0s 520ms; }
.zoom__frames { position: absolute; inset: 0; }
.zoom__frame {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 6688 / 3764;
  transform-origin: 0 0; opacity: 0; backface-visibility: hidden;
  /* the entering frame arrives as a soft oval that opens to the full frame (zoom.js sets the stops) */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 var(--fs, 145%), transparent var(--fe, 155%));
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 var(--fs, 145%), transparent var(--fe, 155%));
}
.zoom__frame:first-child { opacity: 1; }
.zoom__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* the website on the laptop display: the real hero, captured (npm run zoom:screen) */
.zoom__site { position: absolute; overflow: hidden; border-radius: 0.4%; background: #e4e6e2; }
.zoom__site img { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.zoom__flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(60% 60% at 50% 50%, #fffaf0, #ffe9bf 60%, #f7d896); pointer-events: none; }
.zoom__scrim {
  position: absolute; inset: auto 0 0; height: 46%; pointer-events: none;
  background: linear-gradient(to top, rgb(10 42 30 / 0.62), rgb(10 42 30 / 0.3) 45%, rgb(10 42 30 / 0));
}
.zoom__lead { position: absolute; left: 0; right: 0; top: 0; max-width: var(--sc-maxw); margin-inline: auto; padding: clamp(28px, 7vh, 88px) var(--sc-gutter) 0; color: var(--green-900); }
.zoom__title { font: 400 clamp(2.4rem, 1.2rem + 4.2vw, 5.2rem)/1.02 var(--sc-font-display); letter-spacing: -0.025em; }
.zoom__title span { display: block; }
.zoom__title em { font-style: italic; }
.zoom__cue { display: flex; align-items: center; gap: 12px; margin-top: clamp(18px, 3vh, 30px); font: 600 12.5px/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-900); }
.zoom__cueline { position: relative; width: 48px; height: 1px; overflow: hidden; background: rgb(16 61 44 / 0.25); }
.zoom__cueline::after { content: ""; position: absolute; inset: 0; background: var(--green-900); transform: translateX(-100%); animation: zoom-cue 2.2s var(--ease) infinite; }
@keyframes zoom-cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.zoom__cap {
  position: absolute; left: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter))); bottom: clamp(28px, 7vh, 72px);
  max-width: min(24ch, calc(100% - 2 * var(--sc-gutter) - 70px)); opacity: 0;
  font: 400 clamp(1.7rem, 1rem + 2.3vw, 3.2rem)/1.08 var(--sc-font-display); letter-spacing: -0.018em; text-wrap: balance;
  color: var(--porcelain); text-shadow: 0 1px 18px rgb(10 42 30 / 0.45);
}
.zoom__cap strong { font-weight: 500; font-style: italic; color: #f3cf7d; }
.zoom__clock {
  position: absolute; right: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter))); bottom: clamp(30px, 7vh, 76px);
  font: 500 15px/1 var(--sc-font-text); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: rgb(245 246 244 / 0.86);
}
.zoom__skip {
  position: absolute; right: var(--sc-gutter); top: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  pointer-events: auto; border-radius: 999px; background: rgb(245 246 244 / 0.82); color: var(--green-900); font: 500 13.5px/1 var(--sc-font-text); text-decoration: none;
  backdrop-filter: blur(6px); transition: opacity 200ms var(--ease);
}
.zoom__skip .ico { width: 15px; height: 15px; }
.zoom__skip:focus-visible { outline: 2px solid var(--brass-edge); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .zoom__skip:hover { background: var(--porcelain); } }
@media (max-width: 700px) {
  .zoom__cap { font-size: clamp(1.55rem, 6.4vw, 2rem); }
  .zoom__clock { font-size: 13px; }
}