/* Leatherback Lighting - token and component layer
   Built from 03-design-system/handoff/README.md (Design tokens) and DIRECTION.md.
   The .dc.html boards style every element inline; that is a prototype constraint.
   This file is where those values live instead. Do not reintroduce inline styles.

   E2: fonts are self-hosted below. No runtime Google Fonts request. */

/* ---------- E2: self-hosted geometric sans ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/poppins-800.woff2") format("woff2")}

:root{
  /* ---- colour: gold on deep blue, settled 2026-09-15 ---- */
  --blue-deep:#050d20;      /* page ground */
  --blue-card:#0c183a;      /* cards and panels */
  --navy-deep:#071232;      /* app section */
  --navy-alt:#0a1330;       /* alternating band */

  --gold:#d9a441;           /* primary accent: rules, eyebrows, bezel, bullets */
  --gold-pale:#f0d9a0;      /* sheen, hover, emphasis */
  --gold-deep:#b07f24;      /* rate bar, pressed */
  --gold-ink:#1a1204;       /* text on gold fills. NEVER cream */

  --ivory:#f7f3ea;          /* light reading bands */
  --ivory-card:#fdfaf2;     /* cards on ivory. NEVER pure white */

  --ink:#f4f7ff;            /* headlines */
  --ink-82:rgba(244,247,255,.82);
  --ink-60:rgba(244,247,255,.6);
  --ink-dark:#141a33;       /* text on ivory */

  --turquoise:#1fc0d4;      /* the logo lockup and the CTA rim. Separation 4 */
  --warn:#ffc857;           /* bracket markers ONLY. Never a brand colour */

  /* ---- metallic gold text ---- */
  --metallic:linear-gradient(100deg,#fff6e0,#f0d9a0 16%,#d9a441 34%,#8a5f16 48%,#d9a441 62%,#f7e6bd 80%,#fff6e0);

  /* ---- the house diagonal: top-left and bottom-right only, always same axis ---- */
  --r-band:96px 0 96px 0;
  --r-card:32px 0 32px 0;
  --r-carousel:20px 0 20px 0;
  --r-std:16px;
  --r-pill:999px;
  --r-btn:11px;

  /* ---- spacing ---- */
  --wrap:1180px;
  --pad-section:96px;
  --pad-section-min:72px;
  --gutter:64px;
  --gutter-mobile:16px;

  /* ---- motion ---- */
  --t-carousel:450ms cubic-bezier(.4,0,.2,1);
  --t-fast:160ms cubic-bezier(.4,0,.2,1);

  --font:Poppins,"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--blue-deep);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-pale)}
:focus-visible{outline:2px solid var(--gold-pale);outline-offset:3px;border-radius:4px}

/* ---------- type scale ---------- */
h1,h2,h3{font-family:var(--font);margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(34px,4.4vw,58px);line-height:1.02;letter-spacing:-1.6px}
h2{font-size:clamp(28px,3.4vw,52px);line-height:1.08;letter-spacing:-1.2px}
h3{font-size:clamp(18px,1.6vw,26px);line-height:1.15;letter-spacing:-.5px}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.3vw,20px);font-weight:500;line-height:1.65;color:var(--ink-82)}
.body-sm{font-size:15px}
.caption{font-size:13px;line-height:1.6;color:var(--ink-60)}
.eyebrow{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:4.4px;
  color:var(--gold);margin:0 0 18px;
}
.total-figure{font-size:clamp(44px,5.4vw,68px);font-weight:800;letter-spacing:-2.4px;line-height:1}

/* metallic gold text, clipped to glyphs */
.metallic{
  background:var(--metallic);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 10s linear infinite;
}
@keyframes sheen{to{background-position:200% 0}}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--pad-section) 0}
@media (max-width:820px){
  .section{padding:var(--pad-section-min) 0}
  .wrap{padding:0 var(--gutter-mobile)}
}
.band-ivory{background:var(--ivory);color:var(--ink-dark)}
.band-ivory h1,.band-ivory h2,.band-ivory h3{color:var(--ink-dark)}
.band-ivory p{color:rgba(20,26,51,.82)}
.band-ivory .caption{color:rgba(20,26,51,.72)}
.band-ivory .eyebrow{color:#6d4a10}
/* The ivory ground inverts the text colours but used to leave links and the focus
   ring on the dark-ground gold, which is unreadable on near-white. #7a5412 measures
   6.4:1 on ivory; the focus ring goes to the darkest gold in the palette. */
.band-ivory a{color:#7a5412}
.band-ivory a:hover{color:#5c3f0e}
.band-ivory :focus-visible{outline-color:var(--gold-ink)}
.band-navy-alt{background:var(--navy-alt)}
.band-navy-deep{background:var(--navy-deep)}

/* ---------- ornament: the gold ribbon (two strokes) ---------- */
.ribbon{display:block;width:74px;height:10px;margin:10px 0 0;overflow:visible}
.ribbon path.a{stroke:var(--gold);stroke-width:2.4;fill:none;stroke-linecap:round}
.ribbon path.b{stroke:var(--gold-pale);stroke-width:1;fill:none;opacity:.45;stroke-linecap:round}

/* diamond bullet: a 9px gold square rotated 45 */
.diamond{display:inline-block;width:9px;height:9px;background:var(--gold);
  transform:rotate(45deg);flex:0 0 9px;margin-top:.55em}

/* ---------- cards ---------- */
.card{background:var(--blue-card);border-radius:var(--r-card);padding:32px;
  border:1px solid rgba(217,164,65,.16)}
.card-std{border-radius:var(--r-std)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- figures: every image has alt AND a visible caption ---------- */
figure{margin:0}
figcaption{font-size:13px;line-height:1.6;color:var(--ink-60);margin-top:10px}
.band-ivory figcaption{color:rgba(20,26,51,.72)}

/* ---------- accessibility floors: nothing under 11px, 44px targets ---------- */
.skip{min-height:44px;display:inline-flex;align-items:center;position:absolute;left:-9999px}
.skip:focus{left:var(--gutter-mobile);top:8px;z-index:200;background:var(--gold);
  color:var(--gold-ink);padding:12px 18px;border-radius:var(--r-pill);font-weight:700}

/* =====================================================================
   THE CTA: a lit fixture, not a flat button.
   Four nested layers, pure CSS so the label stays live, indexable text.
   Spec: handoff/README.md "The CTA, a lit fixture".
   The spectrum is the ONE deliberate chromatic exception to the gold
   palette, confirmed 2026-09-15.
   ===================================================================== */

.fixture{
  --fx-h:58px;                       /* section size is the default */
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:var(--fx-h);padding:0;border:0;background:none;cursor:pointer;
  text-decoration:none;isolation:isolate;
  min-width:max(220px,var(--fx-h));
}
.fixture-nav{--fx-h:44px}
.fixture-hero{--fx-h:64px}
@media (max-width:680px){ .fixture{width:100%} }

/* 1. outer bloom */
.fixture-bloom{
  position:absolute;inset:-8px -10px -8px -10px;z-index:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#00a3ff,#00e5ff,#3ef07a,#e8ff3a,#ffb300,#ff3b1f,#ff2fd0,#8a5cff,#00a3ff);
  background-size:200% 100%;filter:blur(15px);opacity:.7;
  animation:spectrum 6s linear infinite;pointer-events:none;
}

/* 2. chrome bezel: 1px stripes over a nine-stop vertical gradient */
.fixture-bezel{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  height:100%;width:100%;padding:3px;border-radius:var(--r-pill);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 2px),
    linear-gradient(180deg,#fbfdfe,#e2e8ec 12%,#aab3bb 26%,#6f787f 40%,#49515a 52%,#79828a 64%,#b8c0c7 78%,#e8edf1 90%,#fdfefe);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px rgba(0,0,0,.45);
}

/* 3. spectrum rim */
.fixture-rim{
  position:absolute;inset:1px;border-radius:var(--r-pill);z-index:0;
  background:linear-gradient(90deg,#00a3ff,#00e5ff,#3ef07a,#e8ff3a,#ffb300,#ff3b1f,#ff2fd0,#8a5cff,#00a3ff);
  background-size:200% 100%;animation:spectrum 6s linear infinite;pointer-events:none;
}
@keyframes spectrum{to{background-position:200% 0}}

/* 4. dark glass face */
.fixture-face{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;
  height:100%;width:100%;padding:0 26px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#2c3238,#15191f 38%,#0a0d11 72%,#1b2026);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 -14px 22px rgba(0,0,0,.55) inset;
  transition:background var(--t-fast),box-shadow var(--t-fast);
}
.fixture-label{
  font-family:var(--font);font-weight:700;color:var(--ink);white-space:nowrap;
  font-size:clamp(13px,calc(var(--fx-h) * .26),17px);letter-spacing:.2px;
  transition:color var(--t-fast);
}
.fixture-glyph{
  width:calc(var(--fx-h) * .3);height:calc(var(--fx-h) * .3);flex:0 0 auto;
  stroke:var(--ink);stroke-width:2.1;fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(0,163,255,.85));
  transition:stroke var(--t-fast),filter var(--t-fast);
}

/* pressed: the button turns on */
.fixture:active .fixture-face,.fixture.is-on .fixture-face{
  background:linear-gradient(180deg,#e8f8ff,#8fd8ff 40%,#2f9ed4);
  box-shadow:0 0 50px rgba(143,216,255,.85),0 1px 0 rgba(255,255,255,.7) inset;
}
.fixture:active .fixture-label,.fixture.is-on .fixture-label{color:#05141f}
.fixture:active .fixture-glyph,.fixture.is-on .fixture-glyph{stroke:#05141f;filter:none}

/* hero scale only: blurred masked floor reflection */
.fixture-hero::after{
  content:"";position:absolute;left:6%;right:6%;top:calc(100% + 5px);height:26px;z-index:-1;
  background:linear-gradient(90deg,#00a3ff,#00e5ff,#3ef07a,#e8ff3a,#ffb300,#ff3b1f,#ff2fd0,#8a5cff,#00a3ff);
  background-size:200% 100%;filter:blur(11px);opacity:.34;border-radius:var(--r-pill);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent);
  animation:spectrum 6s linear infinite;pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .fixture-bloom,.fixture-rim,.fixture-hero::after,.metallic{animation:none}
}

/* ---------- rate bar (section 1): gold band, ink never cream ----------
   Locked to the top with the nav beneath it, so the price and the deadline are on
   screen wherever the reader has got to (Jeff, 2026-09-23). The nav's own offset is
   the measured height of this bar, published as --ratebar-h by the script in
   nav.html, because the text wraps to two lines on a narrow screen. */
.ratebar{position:sticky;top:0;z-index:61;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:var(--gold-ink)}
.ratebar-in{padding-top:11px;padding-bottom:11px}
.ratebar p{margin:0;font-size:15px;font-weight:600;line-height:1.5}
.ratebar-short{display:none}
@media (max-width:820px){
  .ratebar-in{padding-top:7px;padding-bottom:7px}
  .ratebar p{font-size:13px;line-height:1.4}
  .ratebar-long{display:none}
  .ratebar-short{display:block}
}

/* ---------- nav (section 2) ----------
   One row from 1240px up, at an explicit height so a late font swap cannot
   change it and shove the hero. Below 1240 it becomes two rows: brand, phone
   and CTA on top, the seven links underneath. */
.nav{position:sticky;top:var(--ratebar-h,0px);z-index:60;background:rgba(5,13,32,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(217,164,65,.22)}
.nav .wrap{max-width:1400px;padding:0 32px}
.nav-in{display:flex;align-items:center;gap:16px;height:96px}
.brand{display:flex;flex-direction:column;gap:3px;text-decoration:none;flex:0 0 auto}
.brand img{width:120px;height:auto}
.brand-sub{font-size:11px;line-height:1.3;letter-spacing:.3px;color:var(--ink-60);
  font-weight:500;max-width:150px}
.nav-links{display:flex;flex-wrap:nowrap;margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 9px;
  white-space:nowrap;color:var(--ink-82);text-decoration:none;font-size:14.5px;
  font-weight:500;border-radius:var(--r-btn)}
.nav-links a:hover{color:var(--gold-pale);background:rgba(217,164,65,.09)}
.nav-tel{display:inline-flex;align-items:center;min-height:44px;padding:6px 4px;
  white-space:nowrap;color:var(--gold);font-weight:700;text-decoration:none;font-size:15.5px}
.nav .fixture{flex:0 0 auto;min-width:0;width:auto}
.nav .fixture-face{padding:0 18px}
@media (max-width:1239px){
  .nav-in{height:auto;flex-wrap:wrap;row-gap:4px;padding-top:12px;padding-bottom:6px}
  .nav-tel{margin-left:auto}
  .nav-links{order:4;width:100%;margin-left:0;flex-wrap:wrap;padding-top:4px;
    border-top:1px solid rgba(217,164,65,.14)}
}
@media (max-width:820px){
  .nav .wrap{padding:0 var(--gutter-mobile)}
  .nav-in{gap:10px;padding-top:10px}
  .brand img{width:104px}
  .brand-sub{max-width:none}
  .nav-links a{padding:4px 8px;font-size:14px}
  .nav-tel{font-size:15px}
  .nav .fixture-label{font-size:13px}
  .nav .fixture-face{padding:0 14px}
  .ratebar p{font-size:14px}
}

/* ---------- hero (section 3): the primary interaction ----------
   ALIGNMENT. The two photographs are registered pixel for pixel in the source
   files. They only stay registered on screen if both get the IDENTICAL box and
   the IDENTICAL fit: absolutely positioned in frames of the same size, cover,
   object-position 62% 50%, the same edge mask. Never let either image size
   itself from its own content. That is exactly what broke it before: one was
   top-anchored in flow, the other centered, and they drifted apart.

   GEOMETRY. Seam, 40px handle, hairline track, range input and status label
   are all positioned against .hero-frame, the image wrapper. Four defects came
   from splitting them across offset parents. Do not reparent any of them.

   SIZE. On desktop the frame fills the first screen: viewport height minus
   everything above it, measured into --header-h by the script at the end of
   nav.html. 560px floor so a short window cannot crush the copy. */
.hero{position:relative}
.hero-media{position:relative;margin:0}
.hero-frame{position:relative;overflow:hidden;isolation:isolate;
  height:max(480px,calc(100vh - var(--header-h,140px)))}
.hero-frame > img,
.hero-lit > img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:62% 50%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 5%,#000 14%,#000 78%,rgba(0,0,0,.5) 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 5%,#000 14%,#000 78%,rgba(0,0,0,.5) 95%,transparent 100%)}
.hero-lit{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--reveal,36%)) 0 0)}
/* the copy scrim spans the full frame, not just the centered content column */
.hero-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,13,32,.86),rgba(5,13,32,.58) 42%,transparent 70%)}
.hero-seam{position:absolute;top:0;bottom:0;left:var(--reveal,36%);width:2px;
  background:linear-gradient(180deg,transparent,var(--gold-pale) 12%,var(--gold) 50%,var(--gold-pale) 88%,transparent);
  box-shadow:0 0 14px rgba(240,217,160,.55);z-index:3;pointer-events:none}
.hero-track{position:absolute;left:0;right:0;bottom:44px;height:1px;
  background:rgba(244,247,255,.28);z-index:3;pointer-events:none}
.hero-handle{position:absolute;bottom:32px;width:40px;height:40px;border-radius:50%;z-index:5;
  left:min(var(--reveal,36%),calc(100% - 20px));transform:translateX(-20px);pointer-events:none;
  background:linear-gradient(180deg,#fdfefe,#aab3bb 46%,#49515a);
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 1px rgba(240,217,160,.5)}
/* The input and the painted seam, track and handle all read 0-100 as a percentage
   of the WHOLE frame. They used to disagree: the input covered only the right-hand
   64%, so the thumb the finger moved was never under the handle the eye could see. */
.hero-range{position:absolute;left:0;right:0;bottom:24px;height:56px;z-index:6;
  width:100%;opacity:0;cursor:ew-resize;margin:0}
/* opacity:0 hides the focus ring along with the control, so the ring is painted on
   the handle instead. The :has()-free fallback is the outline on the input itself. */
.hero-range:focus-visible{outline:2px solid var(--gold-pale);outline-offset:-2px}
@supports selector(:has(*)){
  .hero-range:focus-visible{outline:none}
  .hero-frame:has(.hero-range:focus-visible) .hero-handle{
    box-shadow:0 0 0 3px var(--gold-pale),0 2px 10px rgba(0,0,0,.5)}
}
.hero-status{position:absolute;left:var(--gutter);bottom:36px;z-index:4;margin:0;
  font-size:12px;font-weight:700;letter-spacing:3.4px;text-transform:uppercase;color:var(--ink-60)}
.hero-copy{position:absolute;top:0;left:0;right:0;z-index:4;pointer-events:none;
  height:max(480px,calc(100vh - var(--header-h,140px)));
  display:flex;flex-direction:column;justify-content:center;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@supports (height:100svh){
  .hero-frame,.hero-copy{height:max(480px,calc(100svh - var(--header-h,140px)))}
}
.hero-copy > *{pointer-events:auto;max-width:640px}
.hero-cta{margin:30px 0 0}
.hero-cap{max-width:var(--wrap);margin:12px auto 0;padding:0 var(--gutter)}
@media (max-width:820px){
  .hero-frame{height:420px}
  .hero-frame::after{display:none}
  .hero-copy{position:static;height:auto;padding:30px var(--gutter-mobile) 8px}
  .hero-status{left:var(--gutter-mobile)}
  .hero-cap{padding:0 var(--gutter-mobile)}
}

/* ---------- proof strip (section 4) ---------- */
.proof{border-top:1px solid rgba(217,164,65,.22);border-bottom:1px solid rgba(217,164,65,.22)}
.proof-in{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding-top:30px;padding-bottom:30px}
.proof-item{display:flex;flex-direction:column;gap:5px;padding:0 20px;
  border-left:1px solid rgba(217,164,65,.22)}
.proof-item:first-child{border-left:0;padding-left:0}
.proof-v{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.8px;line-height:1}
.proof-l{font-size:13px;color:var(--ink-60);line-height:1.5}
@media (max-width:900px){
  .proof-in{grid-template-columns:repeat(2,1fr);gap:22px}
  .proof-item{border-left:0;padding:0}
}

/* ---------- review quotes (slot: home-review-quotes) ----------
   Real Google reviews. auto-fit rather than a fixed three, so the row fills
   whether there are two of them or four. The section reads correctly with none:
   the lead makes no promise the quotes have to keep. */
.quotes{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;padding:0;margin:36px 0 0}
.quotes figure{margin:0;height:100%;padding:28px;border-radius:32px 0 32px 0;
  background:rgba(244,247,255,.04);border:1px solid rgba(217,164,65,.2)}
.quotes blockquote{margin:0 0 16px}
.quotes blockquote p{margin:0;font-size:17px;line-height:1.7;color:var(--ink)}
.quotes figcaption{font-size:13px;letter-spacing:.4px;color:var(--ink-60)}
.quote-stars{color:var(--gold);letter-spacing:2px;margin-right:6px}
.quotes-more{margin:28px 0 0}
@media (max-width:860px){.quotes{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}}

/* ---------- footer ---------- */
.footer{background:#030812;border-top:1px solid rgba(217,164,65,.22);padding:72px 0 44px;font-size:15px}
/* Five columns: the identity block, then Lighting, Company, Learn and Where we work.
   They collapse to two at tablet width and one on a phone. */
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:44px}
@media (max-width:1180px){.footer-grid{grid-template-columns:1.4fr repeat(2,minmax(0,1fr));gap:36px 40px}}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr;gap:30px}}
.footer-name{font-size:20px;font-weight:800;margin:0 0 2px;letter-spacing:-.4px}
.footer-sub{font-size:13px;color:var(--ink-60);margin:0 0 16px}
.footer address{font-style:normal;color:var(--ink-82);line-height:1.9}
.footer h4{font-size:12px;text-transform:uppercase;letter-spacing:3.4px;color:var(--gold);margin:0 0 14px;font-weight:800}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:9px}
.footer a{color:var(--ink-82);text-decoration:none}
.footer a:hover{color:var(--gold-pale)}
/* A town we serve but have no page for yet is named, not linked. It reads as part
   of the same list rather than being dropped out of it. */
.nolink{color:var(--ink-60);display:inline-block;padding:4px 0}
.credentials{margin:44px 0 0;padding-top:24px;border-top:1px solid rgba(217,164,65,.18);
  font-size:13px;line-height:1.85;color:var(--ink-60);max-width:88ch}
.credentials strong{color:var(--ink-82)}
.legal{margin:18px 0 0;font-size:13px;color:var(--ink-60);display:flex;flex-wrap:wrap;gap:8px 20px}

/* ---------- DEV preview banner (never on production) ----------
   In normal flow and measured into --header-h, so the dev hero fits the first
   screen exactly as the production hero will. */
.devbar{background:var(--warn);color:#241a00;font-size:11px;font-weight:800;
  letter-spacing:1.8px;text-transform:uppercase;text-align:center;padding:8px 12px}

/* ---------- generic two column ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:34px}
@media (max-width:900px){.two-col{grid-template-columns:1fr;gap:32px}}
.sub-h{font-size:22px;margin:44px 0 18px;letter-spacing:-.5px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:700;text-decoration:none;font-size:16px}
.link-arrow::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg)}
.answer{max-width:74ch}
.answer .lead{font-size:20px;color:var(--ink-dark)}

/* ---------- steps (section 6) ---------- */
.steps{margin-top:40px}
.step-no{font-size:12px;font-weight:800;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px}
.steps .card h3{margin-bottom:6px}
.steps .card p{color:var(--ink-82);font-size:15px;margin:14px 0 0}

/* ---------- calculator (section 7) ---------- */
.calc-band{background:
  radial-gradient(900px 420px at 78% 12%,rgba(217,164,65,.16),transparent 62%),
  var(--blue-card);
  border-radius:var(--r-band);margin:0 auto;max-width:1320px}
.calc-grid{display:grid;grid-template-columns:1fr 470px;gap:64px;align-items:center}
.calc-copy{order:1}
.calc{order:2}
@media (max-width:1000px){
  .calc-grid{grid-template-columns:1fr;gap:34px}
  .calc-band{border-radius:32px 0 32px 0}
}
.calc-note{color:var(--gold-pale);font-weight:600}
.calc{background:rgba(5,13,32,.72);border:1px solid rgba(217,164,65,.28);
  border-radius:var(--r-card);padding:30px}
.calc-est{font-size:12.5px;color:var(--ink-60);margin:0 0 20px;line-height:1.55}
.calc-label{display:block;font-size:12px;font-weight:800;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.calc input[type=range]{width:100%;height:44px;accent-color:var(--gold);cursor:pointer}
.calc-scale{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--ink-60);margin-bottom:6px}
.calc-scale output{font-size:17px;font-weight:800;color:var(--gold-pale)}
.calc-sides{border:0;padding:18px 0 0;margin:14px 0 0;border-top:1px solid rgba(217,164,65,.18)}
.calc-sides legend{font-size:12px;font-weight:800;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--gold);padding:0}
.calc-sides label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;
  color:var(--ink-82);cursor:pointer}
.calc-sides input[type=checkbox]{width:19px;height:19px;accent-color:var(--gold);cursor:pointer}
.side-ft{margin-left:auto;font-size:13px;color:var(--ink-60);font-variant-numeric:tabular-nums}
.calc-out{margin-top:22px;padding-top:22px;border-top:1px solid rgba(217,164,65,.28)}
.calc-total{font-size:clamp(44px,5.2vw,68px);font-weight:800;letter-spacing:-2.4px;
  line-height:1;margin:0}
.calc-sub{display:flex;align-items:center;gap:12px;margin:12px 0 0;flex-wrap:wrap}
.calc-sub s{color:var(--ink-60);font-size:17px}
.calc-pill{background:var(--gold);color:var(--gold-ink);border-radius:var(--r-pill);
  padding:5px 14px;font-size:13.5px;font-weight:800}
.calc-lines{list-style:none;padding:0;margin:16px 0 0;font-size:13.5px;color:var(--ink-60)}
.calc-lines li{display:flex;justify-content:space-between;gap:16px;padding:5px 0;
  border-bottom:1px solid rgba(217,164,65,.12)}

/* ---------- three ways a system turns off (section 8) ---------- */
.offways{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:80ch}
.offways li{display:flex;gap:18px;align-items:flex-start;background:var(--blue-card);
  border-radius:var(--r-std);padding:20px 24px;border:1px solid rgba(217,164,65,.14)}
.offways li div{color:var(--ink-82);font-size:15.5px}
.offways strong{color:var(--ink);font-weight:700}
.offway-n{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(217,164,65,.14);color:var(--gold);font-weight:800;font-size:15px}
.offway-ours{border-color:var(--gold);background:rgba(217,164,65,.09)}
.offway-ours .offway-n{background:var(--gold);color:var(--gold-ink)}
.chart{margin-top:40px;max-width:1000px}
.chart img{border-radius:var(--r-carousel)}

/* ---------- diamond bullet list ---------- */
.diamonds{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.diamonds li{display:flex;gap:14px;align-items:flex-start;color:var(--ink-82);font-size:16px}

/* ---------- app phones ---------- */
/* ---------- the app section ----------
   The schedule used to be a screenshot of a settings table, cropped so the right
   hand columns were sliced off. It is text now: crisp at any size, readable by an
   answer engine, and it cannot crop. The photograph carries the couch. */
.app-grid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:56px;align-items:center}
@media (max-width:980px){.app-grid{grid-template-columns:1fr;gap:34px}}
.schedule{list-style:none;padding:0;margin:22px 0 14px;max-width:46ch}
.schedule li{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:baseline;
  padding:13px 0;border-top:1px solid rgba(217,164,65,.2)}
.schedule li:last-child{border-bottom:1px solid rgba(217,164,65,.2)}
.sched-when{font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold)}
.sched-what{color:var(--ink-82);line-height:1.6}
@media (max-width:420px){
  .schedule li{grid-template-columns:1fr;gap:2px}
}
.phones{margin:0}
.phones img{width:100%;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.phones figcaption{max-width:46ch}
@media (max-width:980px){
  .phones img{max-width:420px;margin:0 auto;display:block}
  .phones figcaption{margin-left:auto;margin-right:auto;text-align:center}
}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:38px 0 30px}
/* Five tiles in a three column grid would leave a hole in the second row, so the
   fourth runs wide and the two rows fill. With six or more tiles nothing spans and
   the plain grid takes over again. */
.gallery figure:nth-child(4):nth-last-child(2){grid-column:span 2}
.gallery figure:nth-child(4):nth-last-child(2) img{aspect-ratio:auto;height:100%}
@media (max-width:980px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure:nth-child(4):nth-last-child(2){grid-column:span 2}
  .gallery figure:nth-child(4):nth-last-child(2) img{aspect-ratio:3/2;height:auto}
}
@media (max-width:620px){
  .gallery{grid-template-columns:1fr}
  .gallery figure:nth-child(4):nth-last-child(2){grid-column:span 1}
}
.gallery img{border-radius:var(--r-carousel);aspect-ratio:3/2;object-fit:cover;width:100%;
  display:block;transition:opacity .2s ease}
.gallery a{display:block;border-radius:var(--r-carousel)}
.gallery a:hover img{opacity:.88}

/* ---------- reviews + closing ---------- */
.rating{font-size:64px;font-weight:800;letter-spacing:-2.4px;line-height:1;margin:0 0 6px}
.closing{text-align:center;background:
  radial-gradient(760px 320px at 50% 0%,rgba(217,164,65,.14),transparent 64%)}
.closing .lead{margin-left:auto;margin-right:auto}
.policy-note{margin:34px 0 0;font-size:14px;color:var(--ink-60)}
.policy-note a{position:relative;color:inherit;text-decoration:underline}
.policy-note a::after{content:"";position:absolute;left:0;right:0;top:-13px;bottom:-13px}

/* ---------- breakpoint copy variants (the boards use different lines) ---------- */
@media (max-width:820px){ .only-desktop{display:none} }
@media (min-width:821px){ .only-mobile{display:none} }

/* ---------- mobile header: logo, brand line, Menu button (board 13a) ----------
   Links and phone live inside the menu until it is opened. No CTA in the
   header; the hero carries the full-width one. Links stay reachable without
   JS, because they are only hidden once the .js class is present. */
.nav-toggle{display:none}
@media (max-width:820px){
  .nav-in{height:auto;flex-wrap:wrap;gap:10px;padding:12px 0}
  .brand{flex-direction:row;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
  .brand img{width:auto;height:72px}
  .brand-sub{font-size:11px;line-height:1.35;max-width:none}
  /* Gated on .js for the same reason the links are: without the script the button
     is a dead control reporting aria-expanded="false" about a menu already on screen. */
  .js .nav-toggle{display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;
    border:1px solid rgba(217,164,65,.35);background:rgba(217,164,65,.08);
    border-radius:var(--r-btn);color:var(--gold-pale);cursor:pointer;padding:0}
  .nav-toggle .i-close{display:none}
  .nav.is-open .nav-toggle .i-open{display:none}
  .nav.is-open .nav-toggle .i-close{display:block}
  .nav .fixture{display:none}
  .js .nav-links,.js .nav-tel{display:none}
  .nav.is-open .nav-links{display:flex;flex-direction:column;order:4;width:100%;margin:0;
    padding:4px 0 0;border-top:1px solid rgba(217,164,65,.18)}
  .nav.is-open .nav-links a{min-height:48px;padding:0;font-size:16px;font-weight:600;
    border-radius:0;border-bottom:1px solid rgba(217,164,65,.12)}
  .nav.is-open .nav-tel{display:flex;order:5;width:100%;min-height:48px;margin:0;padding:0;
    font-size:18px;font-weight:800;color:var(--gold-pale)}
}

/* ---------- mobile hero order (board 13a) ----------
   Eyebrow and H1 ABOVE the photo, then the photo and its caption, then the lead
   and CTA. That is what keeps the headline on the first screen of a phone.
   .hero-copy is a plain div, so display:contents drops only its box; the figure
   is untouched, which keeps the photo pair and its caption together. */
@media (max-width:820px){
  .brand{flex:1 1 0%}
  .hero{display:flex;flex-direction:column}
  .hero-copy{display:contents}
  .hero-copy > .eyebrow{order:1;margin:24px var(--gutter-mobile) 10px}
  .hero-copy > h1{order:2;margin:0 var(--gutter-mobile) 20px;max-width:none}
  .hero-media{order:3}
  .hero-copy > .lead{order:4;margin:18px var(--gutter-mobile) 0;max-width:none}
  .hero-copy > .hero-cta{order:5;margin:24px var(--gutter-mobile) 10px;max-width:none}
}

/* ---------- footer: the relationship sentence, verbatim on every property ---------- */
.footer-rel{font-size:14px;line-height:1.6;color:var(--ink-82);margin:0 0 14px;max-width:46ch}

/* ---------- shared fixes from the three-page review, 2026-09-18 ---------- */
/* Footer column titles are labels, not headings, so the outline never skips h2 to h4. */
.footer-h{font-size:12px;text-transform:uppercase;letter-spacing:3.4px;color:var(--gold);
  margin:0 0 14px;font-weight:800}
/* The current page, marked once for every page. The build writes aria-current. */
.nav-links a[aria-current="page"]{color:var(--gold-pale);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:2px;text-underline-offset:9px}
/* Anchored sections land below the sticky nav instead of underneath it.
   nav.html measures the real header and publishes --header-h, so this follows the
   header at every width instead of guessing per breakpoint. The fallback matches
   the tallest case, a two-row nav under the rate bar. */
[id]{scroll-margin-top:calc(var(--header-h,176px) + 16px)}
/* The proof-strip link is one text line tall. The overlay grows the hit area to the
   44px floor without moving the line, the technique /faq/ uses for its phone link. */
.proof-l a{color:inherit;text-decoration:underline;text-decoration-color:rgba(217,164,65,.55);
  text-underline-offset:3px;position:relative;white-space:nowrap}
.proof-l a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
.proof-l a:hover{color:var(--gold-pale)}
/* Touch: footer and legal links get a full 44px target. */
@media (max-width:820px), (pointer:coarse){
  .footer li{margin:0}
  .footer li a,.legal a,.footer address a{display:inline-flex;align-items:center;min-height:44px}
}
/* Interior pages: the header CTA that replaces the hidden nav CTA on a phone. */
.page-head-cta{margin:6px 0 46px}
@media (max-width:820px){ .page-head-cta .fixture{width:100%} }

/* ---------- warranty panel ----------
   Progressive enhancement. Without JavaScript the dialog is an ordinary block of
   content at the foot of the page, so the terms are always reachable. With
   JavaScript the .js class hides it until it is opened as a real modal. */
.warranty{border:0;padding:0;color:var(--ink);background:transparent;max-width:none;width:auto}
.js .warranty:not([open]){display:none}
.js .warranty[open]{position:fixed;inset:0;width:min(760px,calc(100vw - 32px));
  max-height:min(86vh,900px);margin:auto;padding:0;border-radius:var(--r-carousel);
  background:#0a1428;border:1px solid rgba(217,164,65,.3);
  box-shadow:0 40px 120px rgba(0,0,0,.6);overflow:auto}
.warranty::backdrop{background:rgba(3,8,18,.72)}
.warranty-in{padding:34px 34px 30px;max-width:70ch}
.warranty-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.warranty-head h2{font-size:clamp(24px,2.3vw,32px);line-height:1.15;letter-spacing:-.8px;margin:0}
.warranty-x{flex:0 0 auto;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(217,164,65,.3);background:rgba(244,247,255,.05);
  color:var(--gold-pale);font-size:24px;line-height:1}
.js .warranty-x{display:grid;place-items:center}
.warranty-x:hover{background:rgba(244,247,255,.1)}
.warranty:not([open]) .warranty-x,.warranty:not([open]) .warranty-actions{display:none}
.warranty-lead{font-size:17px;line-height:1.7;color:var(--ink);margin:16px 0 22px}
.warranty h3{font-size:15px;text-transform:uppercase;letter-spacing:2.6px;color:var(--gold);
  margin:24px 0 10px;font-weight:800}
.warranty p{line-height:1.7;color:var(--ink-82);margin:0 0 12px}
.warranty-list{list-style:none;padding:0;margin:0}
.warranty-list li{padding:11px 0;border-top:1px solid rgba(217,164,65,.16);line-height:1.65;
  color:var(--ink-82)}
.warranty-list strong{color:var(--ink)}
.warranty-note{font-size:14px;color:var(--ink-60);margin-top:20px}
.warranty-note a{color:var(--gold-pale)}
.warranty-actions{margin:24px 0 0}
.warranty-done{min-height:44px;padding:0 26px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid rgba(217,164,65,.4);background:rgba(217,164,65,.12);color:var(--gold-pale);
  font-weight:700;font-size:15px}
.warranty-done:hover{background:rgba(217,164,65,.2)}
@media (max-width:820px){
  .js .warranty[open]{width:100vw;max-width:none;height:100vh;max-height:none;border-radius:0}
  .warranty-in{padding:24px var(--gutter-mobile) 28px}
}

/* ---------- breadcrumbs, shared ----------
   Nine pages each carry their own copy of this rule under their own class name
   (.comm-crumbs, .hiw-crumbs and so on). /gallery/ used the shared name nobody
   had written, so its breadcrumb rendered as a raw numbered list. This is that
   shared rule; the nine copies are a consolidation waiting to happen. */
.crumbs ol{list-style:none;display:flex;align-items:center;gap:10px;margin:0 0 26px;padding:0;
  font-size:13px;color:var(--ink-60)}
.crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding-right:4px;
  text-decoration:none}
/* the separator is its own aria-hidden list item, so no screen reader announces
   the angle mark. .35 is the board's value for this ornament; it is not text. */
.crumbs li[aria-hidden="true"]{color:rgba(244,247,255,.35)}
@media (max-width:820px){.crumbs ol{margin-bottom:10px}}

/* Ai labelling (Jeff 2026-09-28). The hero pair are Ai generated illustrations
   derived from a real job, so they carry a visible label the way FHL's mockups
   do. Top right: the copy scrim owns the left and the reveal slider owns the
   bottom. z-index 4 clears the scrim (2) and the seam (3) but stays under the
   handle (5), and pointer-events:none keeps it off the slider. */
.hero-frame .ai-tag{position:absolute;right:14px;top:14px;z-index:4;pointer-events:none;
  padding:5px 10px;background:rgba(5,13,32,.78);border:1px solid rgba(240,217,160,.24);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,247,255,.78)}
/* 11px is the floor launch-gate.py condition 7 enforces, so the label holds it on
   mobile too and shrinks by padding instead. FHL sets 9.5px; that would fail here. */
@media (max-width:640px){.hero-frame .ai-tag{right:10px;top:10px;padding:4px 7px;letter-spacing:.08em}}