/* ==========================================================================
   Dhoop Solar — design system
   Derived from the VivatSolar reference set in /references.

   Palette taken from their published swatch row: ivory ground, warm cream and
   sand surfaces, muted olive as the primary, sun-yellow reserved for
   punctuation. Dark sections invert to warm near-black with pale lime, so the
   accent stays in one hue family across both grounds.

   Type: Manrope for headlines, Inter for body and UI — as specified in their
   style guide.

   The olive is deliberately muted and sits against warm neutrals rather than
   blue; that is what keeps it reading as earth and agriculture rather than
   the "eco green" cliché the category is full of.
   ========================================================================== */

:root {
  /* ground — warm bone and deep ivory */
  --ivory:      #FAF9F5;
  --bone:       #F5F3ED;
  --cream:      #F4EEDB;
  --sand:       #E5DAC2;
  --taupe:      #A69D8F;

  /* ink — deep espresso and warm charcoal */
  --ink:        #161714;
  --ink-2:      #4A4D43;
  --ink-3:      #7E8274;

  /* accent — rich forest olive & polished sunlight brass */
  --olive:      #3D551E;
  --olive-deep: #2F4216;
  --olive-tint: rgba(61, 85, 30, .08);
  --sage:       #7B8F68;
  --sun:        #F5D061;
  --brass:      #B4861F;
  --sun-glow:   rgba(245, 208, 97, .22);

  /* dark sections — warm charcoal night & pale lime */
  --night:      #141512;
  --night-2:    #1E201A;
  --night-3:    #282A22;
  --on-night:   #FAF9F5;
  --on-night-2: #A8ABA0;
  --lime:       #D8E888;

  --line:       #DFDAD0;
  --line-dark:  #32352B;

  /* A single material shared by every light section and its inset surfaces. */
  --paper-grain: url("assets/paper-grain.svg");

  /* driven by hero.js from the sun's elevation: 0 = midday, 1 = low sun */
  --sun-warm: 0;

  --r-pill: 999px;
  --r-card: 22px;
  --r-tile: 14px;
  --r-sm:   8px;

  --shadow-sm: 0 1px 2px rgba(28, 29, 24, .04), 0 4px 16px rgba(28, 29, 24, .05);
  --shadow-md: 0 2px 6px rgba(28, 29, 24, .05), 0 18px 44px rgba(28, 29, 24, .08);

  --measure: 58ch;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
}

* { box-sizing: border-box; }

/* Deliberately NOT `smooth`: it fights ScrollTrigger's snap, which writes
   scrollTop every frame. main.js gives anchors their smoothness with GSAP. */
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--olive); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--bone); color: var(--ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.skip:focus-visible { transform: none; }

svg { display: block; }

.shell { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* The nav is fixed, so anchor jumps would otherwise drop headings behind it. */
section[id], main[id] { scroll-margin-top: 96px; }

/* ---------- pill badge (their "OUR MISSION" / "KEY IDEA" device) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(61, 85, 30, .32);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--olive); background: rgba(250, 249, 245, .8);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(22, 23, 20, .04);
  transition: border-color .24s, box-shadow .24s;
}
.badge-pulse {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--olive);
  box-shadow: 0 0 8px rgba(61, 85, 30, .6);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.section-dark .badge-pulse, .hero .badge-pulse {
  background: var(--sun);
  box-shadow: 0 0 10px rgba(245, 208, 97, .8);
}
@keyframes pulse-dot {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.25); }
}
.badge-solid { background: var(--olive); border-color: var(--olive); color: #fff; }
.section-dark .badge {
  border-color: rgba(245, 208, 97, .32);
  color: var(--sun);
  background: rgba(26, 28, 22, .75);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .25), 0 0 12px rgba(245, 208, 97, .08);
}
.hero .badge {
  border-color: rgba(245, 208, 97, .42);
  color: var(--sun);
  background: rgba(20, 21, 16, .78);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .4), 0 0 16px rgba(245, 208, 97, .12);
}

/* Luxury text gradients */
.text-gradient-sun {
  background: linear-gradient(135deg, #FFF0A8 0%, #F5D061 50%, #C89620 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.text-gradient-lime {
  background: linear-gradient(135deg, #E6F4A8 0%, #D8E888 60%, #A5BD42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.lede { font-size: clamp(16.5px, 1.9vw, 19px); color: var(--ink-2); max-width: var(--measure); }
.muted { color: var(--ink-3); font-size: 13.5px; }


/* ---------- nav: floating pill ------------------------------------------- */
.nav {
  position: fixed; z-index: 50;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--gutter)), var(--maxw));
  display: flex; align-items: center; gap: 20px;
  padding: 9px 9px 9px 20px;
  border-radius: var(--r-pill);
  background: rgba(242, 241, 236, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.nav.stuck {
  border-color: var(--line);
  background: rgba(250, 250, 247, .88);
  box-shadow: var(--shadow-sm);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: Manrope, sans-serif; font-weight: 800;
  letter-spacing: -.03em; font-size: 18px; text-decoration: none;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand em { font-style: normal; color: var(--brass); }
.nav-links { margin-left: auto; display: flex; gap: 28px; font-size: 14.5px; color: var(--ink-2); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

/* Over the dark stage the light pill reads as a grey slab, so the nav flips
   to the night palette until the page scrolls onto a light ground. */
.nav:not(.stuck) {
  background: rgba(18, 19, 14, .68);
  border-color: rgba(242, 241, 236, .16);
  color: var(--on-night);
}
.nav:not(.stuck) .brand { color: #fff; }
.nav:not(.stuck) .brand em { color: var(--sun); }
.nav:not(.stuck) .nav-links { color: rgba(242, 241, 236, .88); }
.nav:not(.stuck) .nav-links a:hover { color: #fff; }

/* ---- the mobile sheet ----
   v1 simply set display:none on the links below 860px and put nothing in
   their place, which left five sections unreachable on a phone. */
.nav-toggle {
  display: none; margin-left: 10px;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.8px; border-radius: 2px;
  background: currentColor;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), opacity .16s;
}
.nav:not(.stuck) .nav-toggle { border-color: rgba(242, 241, 236, .22); }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* Only shown inside the sheet — the conversion path must survive the fold
   into a menu, so the CTA moves rather than disappearing. */
.nav .nav-menu-cta { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; margin-left: auto; }
  /* .btn sets display:inline-flex further down the sheet, so this needs the
     extra specificity to win regardless of source order. */
  .nav .nav-cta { display: none; }
  .nav .nav-menu-cta { display: inline-flex; justify-content: center; margin: 8px 4px 4px; }
  .nav-links[hidden] { display: none; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    margin: 0; display: grid; gap: 2px;
    padding: 10px; border-radius: var(--r-card);
    background: rgba(250, 250, 247, .97);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    font-size: 16px;
  }
  .nav-links a { padding: 12px 14px; border-radius: var(--r-sm); }
  .nav-links a:hover { background: var(--olive-tint); }
  .nav-links a.nav-menu-cta { color: #fff; }
  .nav-links a.nav-menu-cta:hover { background: var(--olive-deep); }
  .nav:not(.stuck) .nav-links { color: var(--ink); }
  .nav:not(.stuck) .nav-links a:hover { color: var(--ink); }
}

/* ---------- buttons: pills with an arrow --------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: var(--r-pill);
  font-family: Inter, sans-serif; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background .2s, border-color .2s;
}
.btn svg { width: 15px; height: 15px; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--olive); color: #fff; }
.btn-primary:hover { background: var(--olive-deep); transform: translateY(-1px); }
.btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--sage); background: var(--bone); }
.btn-light { background: var(--bone); color: var(--ink); }
.btn-light:hover { background: #fff; transform: translateY(-1px); }
.btn-onnight { border-color: var(--night-3); color: var(--on-night); background: transparent; }
.btn-onnight:hover { border-color: var(--lime); color: var(--lime); }

/* Luxury Shimmer Button */
.btn-primary-shine {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FAF9F5 0%, #F5F3ED 100%);
  color: var(--night);
  border: 1px solid rgba(245, 208, 97, 0.48);
  box-shadow: 0 4px 20px rgba(245, 208, 97, 0.24), 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}
.btn-primary-shine::after {
  content: "";
  position: absolute; top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: rotate(25deg);
  transition: left 0.6s ease;
}
.btn-primary-shine:hover {
  background: #FFFFFF;
  border-color: var(--sun);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245, 208, 97, 0.38);
}
.btn-primary-shine:hover::after {
  left: 130%;
}

/* Hero Trust Bar */
.hero-trust {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 32px;
  font-size: 13px; color: var(--on-night-2);
}
.hero-trust-item {
  display: flex; align-items: center; gap: 7px;
  font-weight: 500;
}
.hero-trust-dot { color: rgba(245, 208, 97, 0.4); font-weight: bold; }
.trust-icon { width: 15px; height: 15px; flex: none; }
@media (max-width: 640px) {
  .hero-trust { gap: 10px; font-size: 12px; }
  .hero-trust-dot { display: none; }
  .hero-trust-item { width: 100%; }
}

/* Service Principles Index */
.strip-idx {
  display: block; font-family: Manrope, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--brass); margin-bottom: 4px;
}

/* Section Continuity Dividers & Seams */
.section-seam {
  position: relative; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
  margin: 0;
  overflow: visible;
}
.section-seam-dark {
  background: linear-gradient(90deg, transparent 0%, var(--line-dark) 20%, rgba(245, 208, 97, 0.32) 50%, var(--line-dark) 80%, transparent 100%);
}
.section-seam-mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.section-seam-dark .section-seam-mark {
  background: var(--night);
  border-color: rgba(245, 208, 97, 0.4);
}
.section-seam-mark::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass);
}
.section-seam-dark .section-seam-mark::after {
  background: var(--sun);
  box-shadow: 0 0 8px var(--sun);
}


/* ---------- the stage ----------------------------------------------------
   One canvas, fixed, for the length of the document. Everything else sits
   above it on z-index 1 and carries its own ground; the hero and the stage
   breaks are the transparent windows the 3D is seen through.               */
.stage {
  position: fixed; inset: 0; z-index: 0;
  background: var(--night);
  pointer-events: none;
}
#stage-canvas { width: 100%; height: 100%; display: block; }
.no-webgl .stage { display: none; }

/* Everything on the page stacks above the canvas. */
main, .footer { position: relative; z-index: 1; }
main > section { position: relative; }
/* A plain .section has no modifier class and would otherwise let the canvas
   show through behind body copy. */
.section {
  background-color: var(--ivory);
  background-image: var(--paper-grain);
  background-size: 180px 180px;
}

/* The calculator's ceiling, stated where it bites rather than in a footnote. */
.cap-note {
  margin: 12px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--ink-2); border-left: 2px solid var(--sage); padding-left: 12px;
}

/* ---------- hero ---------------------------------------------------------
   Sticky, not pinned. ScrollTrigger's pin inserts a spacer during refresh,
   and every trigger registered before that measures the wrong document —
   which is what lit all six workflow nodes at page load in v1. Sticky costs
   no spacer and cannot be mis-measured.                                    */
.hero { height: 260vh; background: transparent; }
.hero-pin {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
}

.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* The copy column gets its own ground. Panels land in and out of this
       area as the array assembles, and a specular highlight on the nearest
       one was arriving directly under the end of the headline — text contrast
       cannot be left to depend on where the 3D happens to be. */
    linear-gradient(100deg, rgba(14, 15, 10, .78) 0%, rgba(14, 15, 10, .60) 42%, transparent 68%),
    radial-gradient(118% 76% at 50% 6%, transparent 44%, rgba(16, 17, 12, .58) 100%),
    linear-gradient(to top, rgba(16, 17, 12, .88) 0%, transparent 48%);
}
.hero-copy, .hero-readout, .scroll-hint { pointer-events: auto; }

.hero-copy {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0 var(--gutter) clamp(38px, 7vh, 74px);
  color: var(--on-night);
}
.hero-copy .inner { max-width: var(--maxw); margin: 0 auto; }
.hero-copy h1 { font-size: clamp(38px, 7.2vw, 86px); }
.hero-copy h1 em { font-style: normal; color: var(--lime); }
.hero-sub {
  margin: 20px 0 0; max-width: 46ch;
  font-size: clamp(15.5px, 1.7vw, 18px); color: var(--on-night-2);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Right side, level with the array it is describing — a counter is easier to
   read next to the thing it counts.

   Not a corner: the top right is where the sun sets and the bottom right is
   the chat launcher, so it sits between them, vertically centred on the
   array's own band. */
.hero-readout {
  position: absolute; z-index: 2; right: var(--gutter); top: 44%;
  transform: translateY(-50%);
  display: grid; gap: 3px; justify-items: end;
  padding: 13px 17px; border-radius: var(--r-tile);
  background: rgba(16, 17, 12, .5);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(242, 241, 236, .11);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-night-2);
}
.hero-readout b {
  font-family: Manrope, sans-serif; font-size: 27px; font-weight: 800;
  letter-spacing: -.03em; color: var(--lime);
}
.hero-readout .sub b { font-size: 13px; color: var(--on-night); }
@media (max-width: 760px) { .hero-readout { display: none; } }

.scroll-hint {
  position: absolute; left: 50%; bottom: 15px; z-index: 3;
  transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-night-2); opacity: .75;
}

/* ---------- no WebGL -----------------------------------------------------
   The illustration is bright golden hour and the hero copy is near-white, so
   the v1 veil — transparent above 70% — left the headline unreadable. This
   one is opaque enough across the whole frame to carry text, and the two
   widgets that describe a build that will never happen are removed. */
.hero-fallback { position: absolute; inset: 0; display: none; background: var(--cream); }
.hero-fallback img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.no-webgl .hero-pin { background: var(--cream); }
.no-webgl .hero-fallback { display: block; }
.no-webgl .hero-veil {
  /* One layer, not two: stacked gradients multiply, and the right-hand side
     ended up dark enough to hide the illustration it exists to reveal. */
  background: linear-gradient(102deg,
    rgba(12,13,9,.94) 0%, rgba(12,13,9,.86) 38%, rgba(12,13,9,.46) 68%, rgba(12,13,9,.22) 100%);
}
/* Both describe a build that cannot happen without the canvas. */
.no-webgl .hero-readout,
.no-webgl .scroll-hint { display: none; }
/* The stage breaks carry real claims, so they stay — they just stop being
   sticky windows onto a scene that is not there. */
.no-webgl .hero { height: auto; }
.no-webgl .hero-pin { position: static; }
.no-webgl .stage-break { height: auto; background: var(--night); }
.no-webgl .break-sticky { position: static; height: auto; padding: clamp(66px, 10vw, 120px) 0; }

/* ---------- illustration blocks ------------------------------------------ */
.illus-feature {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
@media (max-width: 900px) { .illus-feature { grid-template-columns: 1fr; } }
.illus {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(90, 115, 40, .24);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--cream) 76%, var(--ivory));
}
.illus::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: var(--paper-grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: .72;
}
/* aspect-ratio reserves the box before the file arrives. Without it the img is
   zero-height, which both breaks lazy loading (it never reads as intersecting)
   and shifts everything below when it finally paints. */
.illus img {
  display: block; width: 100%; height: auto; aspect-ratio: 20 / 13;
  mix-blend-mode: multiply;
  filter: saturate(.76) contrast(.96) sepia(.035);
}

.system-intro {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  margin-bottom: clamp(48px, 7vw, 84px);
}
.system-intro .section-head { margin-bottom: 0; }
.flow-diagram { position: relative; margin: 0; }
.flow-diagram img {
  display: block; width: 100%; height: auto; aspect-ratio: 36 / 31;
}
.flow-note {
  margin: 12px auto 0; max-width: 52ch; text-align: center;
  font-size: 14.5px; color: var(--ink-2);
}
@media (max-width: 940px) {
  .system-intro { grid-template-columns: 1fr; gap: 24px; }
  .system-intro .section-head { max-width: 64ch; }
  .flow-diagram { width: min(100%, 620px); margin-inline: auto; }
}
@media (max-width: 520px) {
  .system-intro { margin-bottom: 42px; }
  .flow-diagram { width: calc(100% + 12px); margin-left: -6px; }
  .flow-note { padding-inline: 12px; font-size: 13.5px; }
}

/* ---------- service principles: compact, hairline-divided promises -------- */
.strip {
  background-color: var(--bone);
  background-image: var(--paper-grain);
  background-size: 180px 180px;
  border-block: 1px solid var(--line);
  padding: 34px 0;
}
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-item { padding: 4px 26px; border-left: 1px solid var(--line); }
.strip-item:first-child { border-left: 0; padding-left: 0; }
.strip .k {
  font-family: Manrope, sans-serif; font-weight: 800;
  font-size: clamp(19px, 2.3vw, 28px); letter-spacing: -.035em;
}
.strip .v { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 760px) {
  .strip-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .strip-item:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ---------- sections ----------------------------------------------------- */
.section { padding: clamp(66px, 10vw, 130px) 0; }
.section-head { max-width: var(--measure); margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(30px, 4.6vw, 52px); margin: 16px 0 16px; }
.section-head h2 em { font-style: normal; color: var(--olive); }
.section-alt { background-color: var(--bone); }
.section-cream { background-color: var(--cream); }
.section-dark { color: var(--on-night); }
.section-dark:not(.stage-break) { background: var(--night); }
/* The closing section sits over the stage rather than on top of it, so the
   array the page opened with is still faintly there behind the form. */
/* No backdrop-filter: blurring a full-height section costs a GPU pass for a
   effect the 84% fill already gives, and it composites unreliably. */
#survey { background: rgba(25, 26, 21, .86); }
.no-webgl #survey { background: var(--night); }
.section-dark .lede, .section-dark .muted { color: var(--on-night-2); }
.section-dark h2 em { color: var(--lime); }

/* ---------- stage breaks -------------------------------------------------
   The transparent windows between content sections. Each one holds the page
   still for a viewport and a half while the point cloud morphs into the
   shape that argues for the section it introduces, then hands over.        */
.stage-break { height: 175vh; background: transparent; }
.break-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
/* The cloud is bright and lives in the middle of the frame, so the copy
   takes the lower left and carries its own gradient to sit on. */
.break-sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 22% 62%, rgba(14, 15, 10, .84) 0%, transparent 72%),
    linear-gradient(to top, rgba(14, 15, 10, .72) 0%, transparent 46%);
}
.break-copy {
  position: relative;
  width: 100%;
  align-self: flex-end;
  padding-bottom: clamp(56px, 12vh, 132px);
  opacity: .34;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.break-copy.on { opacity: 1; transform: none; }
.break-copy h2 {
  font-size: clamp(30px, 5.2vw, 60px);
  margin: 16px 0 14px;
  max-width: 17ch;
}
.break-copy .lede { max-width: 46ch; }
.no-anim .break-copy, .static-stage .break-copy { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .stage-break { height: 150vh; }
  .break-sticky::before {
    background: linear-gradient(to top, rgba(14,15,10,.9) 0%, rgba(14,15,10,.62) 52%, rgba(14,15,10,.2) 100%);
  }
}


/* ---------- monoline icon system ----------------------------------------- */
.icon {
  width: 26px; height: 26px; stroke: var(--olive); stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .24s ease, stroke .24s ease;
}
.section-dark .icon { stroke: var(--lime); }
.icon-tile {
  width: 52px; height: 52px; border-radius: var(--r-tile);
  background: linear-gradient(135deg, rgba(61, 85, 30, .10) 0%, rgba(245, 208, 97, .16) 100%);
  border: 1px solid rgba(61, 85, 30, .18);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 8px rgba(22, 23, 20, .04);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.card:hover .icon-tile {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 22px rgba(61, 85, 30, .16);
  border-color: var(--brass);
}
.section-dark .icon-tile {
  background: linear-gradient(135deg, rgba(216, 232, 136, .12) 0%, rgba(245, 208, 97, .18) 100%);
  border: 1px solid rgba(245, 208, 97, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 16px rgba(0, 0, 0, .3);
}
.section-dark .card:hover .icon-tile {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 24px rgba(245, 208, 97, .32);
  border-color: var(--sun);
}

/* ---------- value row ---------------------------------------------------- */
.values {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.value {
  padding: 24px 20px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-align: center;
  position: relative;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.value::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity: 0;
  transition: opacity .28s;
}
.value:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 134, 31, .38);
  box-shadow: 0 14px 34px rgba(61, 85, 30, .07), 0 2px 8px rgba(245, 208, 97, .1);
}
.value:hover::before { opacity: 1; }
.value .icon { width: 34px; height: 34px; margin: 0 auto 14px; }
.value-art {
  display: block; width: 84px; height: 84px; margin: 0 auto 16px;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: saturate(.74) contrast(.96) sepia(.04);
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.value:hover .value-art { transform: translateY(-3px) scale(1.04); }
.value h3 { font-size: 16px; margin-bottom: 6px; letter-spacing: -.02em; }
.value p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 900px) {
  .values { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 520px) {
  .values { grid-template-columns: 1fr; }
}

/* ---------- calculator --------------------------------------------------- */
.section-head-split {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 48px);
}
@media (max-width: 980px) {
  .section-head-split {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
}
.section-head-split h2 {
  font-size: clamp(30px, 4.4vw, 50px);
  margin: 16px 0 0;
  line-height: 1.08;
}
.section-head-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.section-head-right .lede {
  margin: 0 0 14px;
  font-size: clamp(15.5px, 1.7vw, 17.5px);
  color: var(--ink-2);
  max-width: 62ch;
}
.calc-top-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.calc-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  box-shadow: 0 1px 4px rgba(22, 23, 20, .03);
}
.calc-top-badge .icon {
  width: 14px;
  height: 14px;
  stroke: var(--olive);
}

.calc {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px); align-items: stretch;
}
@media (max-width: 980px) { .calc { grid-template-columns: 1fr; } }

.calc-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bone) 100%);
  border: 1px solid rgba(180, 134, 31, .28);
  border-radius: var(--r-card); padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(22, 23, 20, .05), 0 1px 3px rgba(22, 23, 20, .03);
}
.field label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.bill-display { display: flex; align-items: baseline; gap: 5px; margin-bottom: 14px; }
.bill-display .rs { font-size: 26px; color: var(--brass); font-family: Manrope, sans-serif; font-weight: 800; }
.bill-display .amt {
  font-family: Manrope, sans-serif; font-size: 52px; font-weight: 800; letter-spacing: -.05em;
  color: var(--ink);
}

input[type="range"] {
  width: 100%; accent-color: var(--brass); height: 26px; cursor: pointer;
}
.range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); font-weight: 600; }

.calc-presets {
  display: flex; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap;
}
.btn-preset {
  flex: 1; min-width: 66px; padding: 7px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .85);
  font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; text-align: center;
  transition: all .2s cubic-bezier(.2,.7,.3,1);
}
.btn-preset:hover {
  border-color: var(--brass); color: var(--ink); background: #fff;
  transform: translateY(-1px);
}
.btn-preset.on {
  background: var(--olive); border-color: var(--olive); color: #fff;
  box-shadow: 0 2px 10px rgba(61, 85, 30, .28);
}

.calc-out {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Hero Payback Banner spanning full width on top */
.calc-hero-span {
  background: linear-gradient(135deg, #1E201A 0%, #141512 100%);
  border: 1px solid rgba(245, 208, 97, .44);
  color: var(--on-night);
  border-radius: var(--r-card);
  padding: 26px 30px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42), 0 0 28px rgba(245, 208, 97, .12);
  transition: border-color .28s, box-shadow .28s, transform .28s;
}
.calc-hero-span:hover {
  transform: translateY(-2px);
  border-color: var(--sun);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .52), 0 0 36px rgba(245, 208, 97, .2);
}
.calc-hero-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.calc-hero-left .lab {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sun);
}
.calc-hero-left .big {
  font-family: Manrope, sans-serif;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800; letter-spacing: -.04em; margin-top: 4px;
  color: #FFFFFF;
}
.calc-hero-left .big small {
  font-size: .52em; font-weight: 600; letter-spacing: 0; color: var(--on-night-2);
  margin-left: 4px;
}
.calc-hero-right {
  text-align: right;
  max-width: 32ch;
}
.calc-hero-right .hero-save-stat {
  font-size: clamp(15px, 1.8vw, 17px); font-weight: 700; color: var(--lime); line-height: 1.35;
}
.calc-hero-right .hero-save-note {
  font-size: 12.5px; color: var(--on-night-2); margin-top: 4px; line-height: 1.4;
}
@media (max-width: 640px) {
  .calc-hero-inner { flex-direction: column; align-items: flex-start; }
  .calc-hero-right { text-align: left; max-width: 100%; }
}

/* 3 Supporting Metric Cards below in a 3-column row */
.calc-subgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .calc-subgrid { grid-template-columns: 1fr; }
}
.calc-subgrid .cell-out {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(250, 249, 245, .8) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 22px 20px;
  box-shadow: 0 2px 10px rgba(22, 23, 20, .03);
  transition: transform .24s, border-color .24s, box-shadow .24s;
}
.calc-subgrid .cell-out:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 134, 31, .34);
  box-shadow: 0 10px 24px rgba(61, 85, 30, .06);
}
.calc-subgrid .cell-out .lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.calc-subgrid .cell-out .big {
  font-family: Manrope, sans-serif;
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 800; letter-spacing: -.035em; margin-top: 6px;
  color: var(--ink);
}
.calc-subgrid .cell-out .note {
  font-size: 12.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.4;
}

.assumptions { margin-top: 24px; font-size: 13px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 16px; }
.assumptions summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.assumptions ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; }

/* ---------- cards -------------------------------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(245, 243, 237, .86) 100%);
  border: 1px solid rgba(223, 218, 208, .9);
  border-radius: var(--r-card); padding: 28px 26px;
  box-shadow: 0 4px 18px rgba(22, 23, 20, .03);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 134, 31, .38);
  box-shadow: 0 16px 40px rgba(61, 85, 30, .08), 0 2px 10px rgba(245, 208, 97, .12);
}
.section-dark .card {
  background: linear-gradient(180deg, rgba(30, 32, 26, .94) 0%, rgba(20, 22, 17, .92) 100%);
  border-color: rgba(245, 208, 97, .18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.section-dark .card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 208, 97, .48);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5), 0 0 28px rgba(245, 208, 97, .14);
}
.section-alt .card { background: linear-gradient(180deg, #FFFFFF 0%, rgba(245, 243, 237, .75) 100%); }
.card .icon-tile { margin-bottom: 20px; }
.card h3 { font-size: 19px; margin-bottom: 8px; letter-spacing: -.025em; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.section-dark .card p { color: var(--on-night-2); }
.card .spec {
  font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line);
  letter-spacing: .02em;
}
.section-dark .card .spec { border-top-color: var(--line-dark); color: var(--on-night-2); }
.section-dark .card .spec { border-top-color: var(--line-dark); color: var(--on-night-2); }

/* numbered badge, overlapping the card corner as in their step row */
.step-num {
  position: absolute; top: -14px; left: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: Manrope, sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: -.02em; color: var(--olive);
}
.section-dark .step-num { background: var(--night-3); border-color: var(--line-dark); color: var(--lime); }

/* ---------- workflow spine ------------------------------------------------
   Six ordered steps over ten weeks. The spine's fill is scrubbed by scroll and
   each node lights as the fill reaches it, so the graphic reports progress
   through the sequence rather than merely decorating it. */
/* ---------- flow (2x2 zigzag grid) ---------------------------------------
   Arranged in a 2-column zigzag grid to reduce section height by >55%,
   alternating art on outer edges with step badge pins and synced ScrollTrigger. */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}

.flow-spine {
  display: none;
}
.flow-fill {
  display: none;
}

.flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.flow-node {
  position: absolute;
  top: -12px;
  left: 20px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ivory);
  border: 1.5px solid var(--line);
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.02em;
  color: var(--olive);
  box-shadow: 0 2px 10px rgba(22, 23, 20, .08);
  transition: background .45s cubic-bezier(.2,.7,.3,1),
              border-color .45s cubic-bezier(.2,.7,.3,1),
              color .45s, transform .45s cubic-bezier(.2,.7,.3,1),
              box-shadow .45s cubic-bezier(.2,.7,.3,1);
}
.section-alt .flow-node { background: var(--bone); }
.flow-node.on {
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(61, 85, 30, .35);
}

.flow-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: center;
  background-color: rgba(250, 250, 247, .78);
  background-image: var(--paper-grain);
  background-size: 180px 180px;
  border: 1px solid rgba(90, 115, 40, .18);
  border-radius: var(--r-card);
  padding: 22px 22px 20px;
  height: 100%;
  opacity: .72;
  transform: translateY(8px);
  box-shadow: 0 2px 8px rgba(22, 23, 20, .03);
  transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.3,1),
              border-color .45s, box-shadow .45s;
}
.flow-art {
  display: block;
  width: 140px;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  border: 1px solid rgba(90, 115, 40, .2);
  mix-blend-mode: multiply;
  filter: saturate(.65) contrast(.96) sepia(.04);
  transition: filter .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.flow-step.on .flow-art {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.02);
}

.flow-step.on .flow-card {
  opacity: 1;
  transform: none;
  border-color: rgba(90, 115, 40, .5);
  box-shadow: 0 1px 2px rgba(28, 29, 24, .04), 0 10px 26px rgba(86, 72, 42, .07);
}
.no-anim .flow-card { opacity: 1; transform: none; }

.flow-when {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 5px;
}
.flow-card h3 {
  font-size: 18px;
  line-height: 1.28;
  margin-bottom: 6px;
  letter-spacing: -.025em;
}
.flow-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Zigzag on desktop: even steps (2, 4, 6) place art on right, text on left, and pin node on top-right */
@media (min-width: 841px) {
  .flow-step:nth-child(even) .flow-node {
    left: auto;
    right: 20px;
  }
  .flow-step:nth-child(even) .flow-card {
    grid-template-columns: 1fr 140px;
  }
  .flow-step:nth-child(even) .flow-card .flow-art {
    order: 2;
  }
  .flow-step:nth-child(even) .flow-card .flow-body {
    order: 1;
  }
}

@media (max-width: 840px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .flow-card {
    grid-template-columns: 140px 1fr;
    gap: 18px;
    padding: 20px;
  }
}

@media (max-width: 520px) {
  .flow-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px;
  }
  .flow-art {
    width: 100%;
    max-width: 220px;
  }
}

/* ---------- feature ------------------------------------------------------ */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
.checklist { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
                font-size: 15px; color: var(--on-night-2); }
.checklist .icon { width: 20px; height: 20px; margin-top: 3px; }

/* ---------- faq ---------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; cursor: pointer; font-family: Manrope, sans-serif;
  font-size: 17.5px; font-weight: 700; letter-spacing: -.022em; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 22px; height: 22px; stroke: var(--olive);
                     stroke-width: 1.7; fill: none; stroke-linecap: round; transition: transform .25s; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq p { margin: 0 0 22px; color: var(--ink-2); max-width: var(--measure); font-size: 15px; }

/* ---------- lead form ---------------------------------------------------- */
.lead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); }
@media (max-width: 900px) { .lead { grid-template-columns: 1fr; } }
.form-card {
  background: var(--night-2); border: 1px solid var(--line-dark);
  border-radius: var(--r-card); padding: 30px;
}
.form-grid { display: grid; gap: 18px; }
.form-grid .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 540px) { .form-grid .row { grid-template-columns: 1fr; } }

/* underline fields, as in their consultation card */
.field-u { display: grid; gap: 6px; }
.field-u span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-night-2); }
.field-u span em { font-style: normal; letter-spacing: .04em; text-transform: none; opacity: .72; }
.input {
  width: 100%; padding: 8px 2px; font: inherit; font-size: 15px;
  color: var(--on-night); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0;
  transition: border-color .2s;
}
.input:focus { outline: none; border-bottom-color: var(--lime); }
.input[aria-invalid="true"] { border-bottom-color: #E8A07C; }
.input::placeholder { color: #6E7264; }
.input option { background: var(--night-2); color: var(--on-night); }
.field-error {
  min-height: 15px; color: #F2B394; font-size: 11.5px; line-height: 1.3;
}
.field-error:empty { display: none; }
.consent {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  color: var(--on-night-2); font-size: 12.5px; line-height: 1.5; cursor: pointer;
}
.consent input {
  width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--lime);
}
.consent input[aria-invalid="true"] { outline: 2px solid #E8A07C; outline-offset: 2px; }
.form-note { font-size: 12.5px; color: var(--on-night-2); }
.form-ok {
  display: none; padding: 15px 17px; border-radius: var(--r-tile);
  background: rgba(214, 232, 143, .1); border: 1px solid rgba(214, 232, 143, .34);
  color: var(--lime); font-size: 14.5px;
}
.form-ok.on { display: block; }

/* ---------- footer ------------------------------------------------------- */
.footer { background: var(--night); color: var(--on-night-2); padding: 60px 0 34px; font-size: 14px; }
.footer .brand { color: var(--on-night); }
.footer .brand em { color: var(--lime); }
.footer-top {
  display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between;
  align-items: start; padding-bottom: 30px; border-bottom: 1px solid var(--line-dark);
}
.footer-bottom { padding-top: 22px; display: flex; flex-wrap: wrap; gap: 14px;
                 justify-content: space-between; font-size: 12.5px; }

/* ---------- reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); }
.no-anim .reveal { opacity: 1; transform: none; }


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

/* The UA sheet's `[hidden] { display: none }` loses to any class rule that
   sets display, and all three of these are flex containers — so the panel,
   the chip row and the input all stayed on screen when hidden. */
.chat-panel[hidden], .chat-replies[hidden], .chat-form[hidden] { display: none; }

.chat {
  --chat-panel-h: min(560px, calc(100vh - 140px));
  position: fixed; z-index: 120; right: 22px; bottom: 22px;
}

.chat-launcher {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--olive-deep);
  background: var(--olive); color: #fff;
  font-family: Inter, sans-serif; font-size: 14.5px; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-md);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background .2s;
}
.chat-launcher svg { width: 19px; height: 19px; flex: none; }
.chat-launcher:hover { background: var(--olive-deep); transform: translateY(-1px); }
.chat.on .chat-launcher { transform: translateY(4px) scale(.96); opacity: .92; }

/* A single unread pip. Anything more insistent than this on a page nobody
   asked to be sold on is an interruption, not an invitation. */
.chat-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sun);
  box-shadow: 0 0 0 3px rgba(242, 225, 92, .25);
}

.chat-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(380px, calc(100vw - 32px));
  height: var(--chat-panel-h);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bone); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 2px 8px rgba(28,29,24,.08), 0 28px 70px rgba(28,29,24,.22);
  animation: chat-in .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes chat-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }
.chat-panel:focus-visible { outline: 2.5px solid var(--olive); outline-offset: -2px; }

.chat-head {
  display: flex; align-items: center; gap: 11px; flex: none;
  padding: 13px 12px 13px 15px;
  border-bottom: 1px solid var(--line); background: var(--ivory);
}
.chat-avatar {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--olive-tint);
}
.chat-avatar .icon { width: 19px; height: 19px; stroke: var(--olive); }
.chat-who { display: grid; line-height: 1.3; }
.chat-who b { font-family: Manrope, sans-serif; font-size: 15px; letter-spacing: -.02em; }
.chat-who small { font-size: 11.5px; color: var(--ink-3); }
.chat-x {
  margin-left: auto; width: 32px; height: 32px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2);
}
.chat-x svg { width: 16px; height: 16px; }
.chat-x:hover { background: var(--line); color: var(--ink); }

.chat-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 15px 6px; display: grid; gap: 9px; align-content: start;
}
.chat-row { display: flex; }
.chat-row.chat-you { justify-content: flex-end; }
.chat-bubble {
  max-width: 84%; padding: 10px 14px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.5;
  background: var(--ivory); border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.chat-you .chat-bubble {
  background: var(--olive); border-color: var(--olive); color: #fff;
  border-bottom-left-radius: 16px; border-bottom-right-radius: 5px;
}

.chat-typing .chat-bubble { display: flex; gap: 4px; padding: 14px; }
.chat-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: chat-blink 1.1s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: .16s; }
.chat-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

.chat-card {
  display: grid; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.chat-card b {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive);
}
.chat-card span { white-space: pre-line; }

.chat-replies {
  flex: none; display: flex; flex-wrap: wrap; gap: 7px;
  padding: 10px 15px 4px;
}
.chat-chip {
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--sage); background: transparent; color: var(--olive);
  font-family: Inter, sans-serif; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background .16s, border-color .16s;
}
.chat-chip:hover { background: var(--olive-tint); border-color: var(--olive); }

.chat-form {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 11px 12px 12px; border-top: 1px solid var(--line);
}
.chat-input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--ivory); color: var(--ink);
  font-family: Inter, sans-serif; font-size: 14.5px;
}
.chat-input:focus { outline: none; border-color: var(--sage); background: #fff; }
.chat-send {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--olive); color: #fff;
  cursor: pointer;
}
.chat-send svg { width: 17px; height: 17px; }
.chat-send:hover { background: var(--olive-deep); }

@media (max-width: 560px) {
  .chat { --chat-panel-h: min(70vh, calc(100vh - 120px)); right: 14px; bottom: 14px; left: 14px; }
  .chat-launcher { width: 100%; justify-content: center; }
  .chat-panel { width: 100%; }
  /* Keep both hero actions clear of the full-width launcher. The scroll cue
     becomes redundant on this compact first fold and competed with them. */
  .hero-copy { padding-bottom: 104px; }
  .scroll-hint { display: none; }
}

/* ==========================================================================
   Toasts
   Bottom LEFT: the chat launcher owns the bottom right, and a toast that
   covers the thing it is announcing is worse than no toast.
   ========================================================================== */
.toast-host {
  /* Lifted clear of the hero CTAs. At bottom:20 the first toast sat directly
     on top of "Book a free rooftop survey" — covering the primary action in
     order to announce that the action succeeded. 104px still clipped the
     button row on a 900px viewport; 150 clears it. */
  position: fixed; z-index: 130; left: 20px; bottom: 150px;
  display: grid; gap: 8px; width: min(340px, calc(100vw - 40px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 12px 13px 15px; border-radius: var(--r-tile);
  background: var(--night-2); color: var(--on-night);
  border: 1px solid var(--line-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 18px 44px rgba(0,0,0,.3);
  font-size: 14px; line-height: 1.45;
  animation: toast-in .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.out { transition: none; }
}
.toast-body { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.toast-body b { font-family: Manrope, sans-serif; font-size: 13.5px; letter-spacing: -.01em; }
.toast-body span { color: var(--on-night-2); }
.toast-ok { border-left: 3px solid var(--lime); }
.toast-error { border-left: 3px solid #E4784B; }
.toast-info { border-left: 3px solid var(--sage); }
.toast-action {
  flex: none; align-self: center; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-dark); background: transparent; color: var(--lime);
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 600;
}
.toast-action:hover { border-color: var(--lime); }
.toast-x {
  flex: none; width: 22px; height: 22px; line-height: 1; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--on-night-2); font-size: 17px;
}
.toast-x:hover { background: var(--night-3); color: var(--on-night); }

/* ---------- chat: unread pip, feedback, rating --------------------------- */
.chat-dot {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--sun); color: var(--ink);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px rgba(242, 225, 92, .22);
}

.chat-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0 2px; }
.chat-fb-q { font-size: 11.5px; color: var(--ink-3); }
.chat-fb-btn {
  width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: transparent;
  font-size: 11px; line-height: 1;
}
.chat-fb-btn:hover { border-color: var(--sage); background: var(--olive-tint); }
.chat-fb-note { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.chat-fb-note input {
  flex: 1 1 auto; min-width: 0; padding: 7px 11px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bone); color: var(--ink); font-family: Inter, sans-serif;
}
.chat-fb-note input:focus { outline: none; border-color: var(--sage); }
.chat-fb-note button {
  flex: none; padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 600;
  border: 0; border-radius: var(--r-pill); background: var(--olive); color: #fff;
  font-family: Inter, sans-serif;
}

.chat-rate { display: flex; align-items: center; gap: 2px; font-size: 13.5px; }
.chat-rate button {
  width: 26px; height: 26px; cursor: pointer; border: 0; background: transparent;
  color: var(--sand); font-size: 17px; line-height: 1; padding: 0;
}
.chat-rate button:hover { color: var(--sun); }

/* ==========================================================================
   Desk
   ========================================================================== */
html.desk-open, html.desk-open body { overflow: hidden; }

.desk {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: var(--ivory); color: var(--ink);
  font-size: 13.5px;
}
.desk:focus-visible { outline: none; }

.desk-head {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px var(--gutter); border-bottom: 1px solid var(--line);
  background: var(--bone);
}
.desk-title { display: grid; margin-right: auto; line-height: 1.3; }
.desk-title b { font-family: Manrope, sans-serif; font-size: 17px; letter-spacing: -.02em; }
.desk-title span { font-size: 12px; color: var(--ink-3); }

.desk-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.desk-btn {
  padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 600;
}
.desk-btn:hover { border-color: var(--sage); background: var(--olive-tint); }
.desk-btn-sm { padding: 5px 11px; font-size: 12px; }
.desk-btn-warn { color: #A6462A; border-color: #E3C4B8; }
.desk-btn-warn:hover { background: #F7E9E3; border-color: #C9694A; }
.desk-x {
  width: 34px; height: 34px; cursor: pointer; font-size: 20px; line-height: 1;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2);
}
.desk-x:hover { background: var(--line); }

.desk-banner {
  flex: none; padding: 9px var(--gutter);
  background: var(--cream); border-bottom: 1px solid var(--sand);
  font-size: 12.5px; color: #6B5A33;
}

.desk-stats {
  flex: none; display: flex; flex-wrap: wrap; gap: 22px;
  padding: 14px var(--gutter); border-bottom: 1px solid var(--line);
}
.desk-stat { display: grid; line-height: 1.2; }
.desk-stat b {
  font-family: Manrope, sans-serif; font-size: 22px; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.desk-stat span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.desk-tabs {
  flex: none; display: flex; gap: 4px; overflow-x: auto;
  padding: 10px var(--gutter) 0; border-bottom: 1px solid var(--line);
}
.desk-tab {
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: transparent; color: var(--ink-2);
  font-family: Inter, sans-serif; font-size: 13.5px; font-weight: 600;
}
.desk-tab:hover { color: var(--ink); }
.desk-tab.on {
  background: var(--bone); border-color: var(--line); color: var(--ink);
  margin-bottom: -1px; padding-bottom: 10px;
}

.desk-body { flex: 1 1 auto; overflow: auto; padding: 16px var(--gutter) 60px; }
.desk-note { margin: 0 0 12px; color: var(--ink-2); max-width: 70ch; }

.desk-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--bone); }
.desk-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.desk-table th {
  text-align: left; padding: 10px 13px; white-space: nowrap;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line); background: var(--ivory);
  position: sticky; top: 0;
}
.desk-table td { padding: 10px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.desk-table tr:last-child td { border-bottom: 0; }
.desk-empty { color: var(--ink-3); text-align: center; padding: 26px 0 !important; }
.desk-status {
  padding: 5px 9px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line); background: var(--ivory); color: var(--ink);
  font-family: Inter, sans-serif; font-size: 12.5px;
}

.desk-transcript {
  margin-top: 16px; padding: 14px; display: grid; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--bone);
}
.desk-msg { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.desk-msg b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.desk-msg-bot b { color: var(--olive); }
.desk-msg i { grid-column: 2; font-size: 11px; color: var(--ink-3); font-style: normal; }

@media (max-width: 700px) {
  .desk-stats { gap: 14px; }
  .desk-stat b { font-size: 18px; }
  .toast-host { left: 12px; right: 12px; bottom: 84px; width: auto; }
}

/* ==========================================================================
   Loading & interactive states
   ========================================================================== */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .65s linear infinite;
  vertical-align: middle;
  flex: none;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ==========================================================================
   Form error states enhancement
   ========================================================================== */
.input[aria-invalid="true"] {
  border-bottom-color: #E8A07C !important;
  background-color: rgba(232, 160, 124, 0.06);
}
.input[aria-invalid="true"]:focus {
  border-bottom-color: #F2B394 !important;
}
.field-error {
  min-height: 15px;
  color: #F2B394;
  font-size: 11.5px;
  line-height: 1.3;
  margin-top: 3px;
  animation: field-err-in .2s ease;
}
@keyframes field-err-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Sticky Mobile CTA
   ========================================================================== */
.mobile-sticky-cta {
  display: none;
}
@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 120;
    padding: 10px 14px;
    background: rgba(25, 26, 21, 0.94);
    backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid var(--line-dark);
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.28s;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  }
  .mobile-sticky-cta.hide {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
  }
  .mobile-sticky-inner {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
  }
  .btn-mobile-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 12px;
    border-radius: var(--r-pill);
    background: var(--night-3);
    color: var(--on-night);
    border: 1px solid var(--line-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .btn-mobile-call:hover, .btn-mobile-call:active {
    background: var(--night-2);
    border-color: var(--sage);
  }
  .btn-mobile-survey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 14px;
    border-radius: var(--r-pill);
    background: var(--lime);
    color: var(--night);
    border: 1px solid var(--lime);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
  }
  .btn-mobile-survey:hover, .btn-mobile-survey:active {
    background: #E4F4A2;
  }
  /* Offset body padding on mobile when sticky CTA is present */
  body.has-sticky-cta {
    padding-bottom: 74px;
  }
}

/* ==========================================================================
   Cookie & Privacy Consent Banner
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 520px;
  z-index: 150;
  background: var(--night-2);
  color: var(--on-night);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-card);
  padding: 20px 22px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 14px;
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.32s;
}
.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cookie-head b {
  font-family: Manrope, sans-serif;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.cookie-copy {
  font-size: 13px;
  color: var(--on-night-2);
  line-height: 1.5;
  margin: 0;
}
.cookie-copy a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-btn-accept {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--night);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: background 0.18s;
}
.cookie-btn-accept:hover {
  background: #E4F4A2;
}
.cookie-btn-decline {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--on-night-2);
  border: 1px solid var(--line-dark);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.cookie-btn-decline:hover {
  border-color: var(--on-night);
  color: var(--on-night);
}

@media (max-width: 600px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 16px 18px;
  }
}

/* ==========================================================================
   Content & Legal Pages (Privacy, Terms, Thank You, 404)
   ========================================================================== */
.content-header {
  padding: 120px 0 50px;
  background: var(--night);
  color: var(--on-night);
  position: relative;
  overflow: hidden;
}
.content-header .shell {
  position: relative;
  z-index: 2;
}
.content-header .badge {
  border-color: var(--night-3);
  color: var(--lime);
  margin-bottom: 16px;
}
.content-header h1 {
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.08;
  margin-bottom: 14px;
}
.content-header p.lede {
  color: var(--on-night-2);
  max-width: 64ch;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--on-night-2);
  margin-bottom: 22px;
}
.breadcrumb a {
  color: var(--on-night);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--lime);
}

.legal-section {
  padding: 60px 0 100px;
  background: var(--ivory);
}
.legal-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 900px) {
  .legal-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.legal-toc {
  position: sticky;
  top: 96px;
  padding: 22px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.legal-toc h3 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.legal-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.legal-toc a {
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}
.legal-toc a:hover {
  color: var(--olive);
  font-weight: 600;
}
.legal-body {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 40px 48px;
}
@media (max-width: 600px) {
  .legal-body {
    padding: 26px 20px;
  }
}
.legal-body h2 {
  font-size: 22px;
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.legal-body h2:first-of-type {
  margin-top: 0;
}
.legal-body h3 {
  font-size: 17px;
  margin: 22px 0 8px;
}
.legal-body p, .legal-body li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}
.legal-body ul, .legal-body ol {
  padding-left: 22px;
  margin: 12px 0 20px;
}
.legal-body li {
  margin-bottom: 8px;
}
.legal-badge-card {
  margin: 24px 0;
  padding: 18px 22px;
  background: var(--cream);
  border-left: 3px solid var(--olive);
  border-radius: 4px var(--r-tile) var(--r-tile) 4px;
  font-size: 14px;
  color: #4A422D;
}

/* ==========================================================================
   Status Pages (404 & Thank You)
   ========================================================================== */
.status-wrap {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}
.status-card {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 48px);
  box-shadow: var(--shadow-md);
}
.status-art {
  width: 140px;
  height: 140px;
  margin: 0 auto 24px;
}
.status-card h1 {
  font-size: clamp(28px, 4.5vw, 44px);
  margin-bottom: 14px;
}
.status-card p.lede {
  margin: 0 auto 28px;
}
.status-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* Step cards on thank-you */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 36px 0 28px;
  text-align: left;
}
@media (max-width: 720px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
.step-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  padding: 20px;
}
.step-card .num {
  font-family: Manrope, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--olive);
  margin-bottom: 6px;
}
.step-card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}
.step-card p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

.checklist-box {
  text-align: left;
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: var(--r-tile);
  padding: 22px 26px;
  margin-top: 24px;
}
.checklist-box h3 {
  font-size: 16px;
  color: #4A422D;
  margin-bottom: 10px;
}
.checklist-box ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: #5D543C;
  line-height: 1.6;
}

/* ==========================================================================
   Agency-Grade Luxury Polish ($$$$ Boutique Design System Extensions)
   ========================================================================== */

/* Micro index for Values section */
.val-idx {
  display: inline-block;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--brass);
  margin-bottom: 12px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(180, 134, 31, .08);
  border: 1px solid rgba(180, 134, 31, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Component pills on Hardware cards */
.card-pill {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--olive);
  background: rgba(61, 85, 30, .08);
  border: 1px solid rgba(61, 85, 30, .18);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  margin-bottom: 14px;
}
.section-dark .card-pill {
  color: var(--lime);
  background: rgba(216, 232, 136, .10);
  border-color: rgba(216, 232, 136, .24);
}

/* Subsidy highlighted tag */
.subsidy-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sun);
  background: rgba(245, 208, 97, .14);
  border: 1px solid rgba(245, 208, 97, .36);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-left: 8px;
  vertical-align: middle;
}

/* Calculator cell badge */
.cell-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sun);
  background: rgba(245, 208, 97, .16);
  border: 1px solid rgba(245, 208, 97, .32);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  margin-left: 6px;
  vertical-align: middle;
}

/* Ambient glow on dark feature section (#subsidy) */
#subsidy {
  position: relative;
}
#subsidy::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(180, 134, 31, 0.09) 0%, rgba(61, 85, 30, 0.04) 50%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
#subsidy > .shell {
  position: relative;
  z-index: 1;
}

/* Stage breaks must remain 100% transparent windows for the 3D point cloud */
.stage-break {
  height: 175vh;
  background: transparent !important;
  overflow: visible !important;
}
.stage-break::before {
  display: none !important;
}
.break-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Luxury form card glassmorphism upgrade */
.form-card {
  position: relative;
  background: linear-gradient(165deg, rgba(30, 32, 26, 0.92) 0%, rgba(18, 19, 15, 0.96) 100%);
  backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid rgba(245, 208, 97, 0.24);
  border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 208, 97, 0.65), transparent);
}

/* FAQ subtle card polish */
.faq details {
  border-bottom: 1px solid var(--line);
  transition: background-color .25s ease, border-color .25s ease;
  border-radius: var(--r-tile);
  padding: 0 18px;
  margin-bottom: 6px;
}
.faq details:hover {
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(180, 134, 31, 0.28);
}
.faq details[open] {
  background-color: #FFFFFF;
  border-color: rgba(180, 134, 31, 0.4);
  box-shadow: 0 4px 20px rgba(61, 85, 30, 0.05);
}

/* Flow node hover and active illumination */
.flow-step:hover .flow-node {
  border-color: var(--brass);
  box-shadow: 0 0 16px rgba(180, 134, 31, 0.45);
  transform: scale(1.12);
}
.flow-step:hover .flow-card {
  opacity: 1;
  border-color: rgba(180, 134, 31, 0.45);
  box-shadow: 0 8px 26px rgba(61, 85, 30, 0.08);
  transform: translateY(-2px);
}