/* ==========================================================================
   Salty Lighting Co. — landing page
   Implemented from the Claude Design source (Salty Landing Page.dc.html)
   ========================================================================== */

/* ---- Fonts (self-hosted Google Fonts subsets) ---------------------------- */
/* Archivo Narrow 500–700 (variable subsets share one file per range) */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/archivo-narrow-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/archivo-narrow-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/yellowtail-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/yellowtail-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens & base -------------------------------------------------------- */
:root {
  --ink: #222121;
  --ink-soft: #2C2B2B;
  --cream: #F7F2E9;
  --paper: #EFE8DC;
  --amber: #FFAF00;
  --rust: #992800;
  --rust-bright: #D34A24;
  /* Hover ground/ink. Darker than --rust so hover reads as a deepening, and
     legible both as text on cream and beneath cream text. */
  --rust-deep: #8A2200;
  --pine: #465B48;
  --glow-warm: #FFD9A0;

  --font-display: 'Archivo Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-body: 'Source Sans 3', 'Clear Sans', Helvetica, sans-serif;
  --font-script: 'Yellowtail', cursive;

  /* Layout: one container width and one gutter, so the hero, every section,
     the footer and the interior pages all land on the same left edge. */
  /* min() so the container fills narrow screens and still grows into large
     ones instead of stranding 360px of margin on each side at 2000px. */
  --container: min(1720px, 100%);
  --gutter: 48px;

  /* Spacing scale. Card padding, stack gaps and section rhythm were all
     one-off values before; these are the sanctioned steps. */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 44px;
  --sp-7: 64px;
  --sp-8: 96px;

  /* Motion. Grouped so durations stay in proportion to each other. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 180ms;
  --t-panel: 240ms;
  --t-reveal: 560ms;

  --noise: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22140%22%20height=%22140%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.8%22%20numOctaves=%222%22/%3E%3CfeColorMatrix%20values=%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.04%200%22/%3E%3C/filter%3E%3Crect%20width=%22140%22%20height=%22140%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E');
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cream); }
html { scroll-behavior: smooth; }

body { font-family: var(--font-body); color: var(--ink); }
a { color: var(--rust); text-decoration: none; }
a, button {
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: #EFE8DC99; }
img { max-width: 100%; }

/* ---- Type helpers --------------------------------------------------------- */
.kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
}
.kicker--rust { color: var(--rust); }
.kicker--amber { color: var(--amber); }

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 8.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.004em;
  text-transform: uppercase;
}
.script {
  font-family: var(--font-script);
  text-transform: none;
  color: var(--amber);
  font-weight: 400;
  font-size: 1.125em;
  letter-spacing: 0;
}

/* ---- Buttons & nav pills --------------------------------------------------- */
.nav-pill,
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.nav-pill {
  font-size: 14px;
  padding: 16px 22px;
  background: var(--pine);
  color: var(--cream);
}

.nav-pill--ghost { background: #222121B3; color: var(--cream); }

.btn { font-size: 16px; padding: 17px 30px; }
.btn--amber {
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
}

.nav-pill--cta { font-size: 14px; padding: 16px 22px; }

.nav-pill--quote {
  background: var(--pine);
  color: var(--cream);
  font-weight: 700;
}

.btn--outline {
  border: 1px solid var(--cream);
  color: var(--cream);
}

.btn--amber-to-cream {
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 18px 34px;
}

/* ---- Soft corners ----------------------------------------------------------- */
:root { --radius: 5px; }
.nav-pill, .btn, .btn--amber-to-cream,
.quote-form input, .quote-form textarea, .quote-form button[type="submit"],
.benefit-card, .type-card, .marquee__item, .price-table,
.quote-form, .quote-success, .hero__inset, image-slot .slot-empty {
  border-radius: var(--radius);
}
/* Clip child images/rows to the rounded edge */
.type-card, .price-table, .hero__inset { overflow: hidden; }

/* ---- Scroll reveal ---------------------------------------------------------
   Every hidden-until-scrolled state is scoped to .js, which the inline script
   in <head> sets. If that script or main.js never runs, nothing is hidden and
   the page still renders in full rather than blank. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  /* No will-change here: it would promote every revealable element on the
     page for the whole session. main.js promotes each one just before it
     animates and releases it afterwards. */
}
.js [data-reveal].on { opacity: 1; transform: translateY(0); }
/* Cards fade in place, no slide, matching the site's other fades */
.js .benefit-card[data-reveal], .js .type-card[data-reveal] { transform: none; }

/* ---- image-slot ------------------------------------------------------------ */
image-slot { position: absolute; inset: 0; display: block; overflow: hidden; }
image-slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
image-slot .slot-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background:
    repeating-linear-gradient(45deg, #F7F2E90A 0 12px, transparent 12px 24px),
    #2C2B2B;
  border: 1px dashed #F7F2E933;
  color: #EFE8DC99;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 16px;
}
image-slot .slot-empty svg { width: 26px; height: 26px; opacity: .55; }

/* ---- Announcement bar ------------------------------------------------------ */
.announcement {
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 9px 16px;
}

/* ---- Hero ------------------------------------------------------------------ */
.hero {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  min-height: 820px;
  height: 92vh;
  display: flex;
}
.hero__media { position: absolute; inset: 0; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      #222121EB 0%,
      #2221219E 30%,
      #22212147 58%,
      #22212100 80%),
    #2221214D;
  pointer-events: none;
}
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 10px 12px;
  gap: 16px;
}
.site-header nav { display: flex; gap: 2px; }
.site-header nav:last-child { justify-content: flex-end; }
.site-header .logo { height: 48px; width: auto; display: block; margin-top: 4px; }

.hero__content {
  position: relative; z-index: 10;
  align-self: flex-end;
  width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gutter);
  /* Matches .section + .section__inner: a capped inner width inside a gutter,
     so hero copy starts on the same left edge as every section below it. */
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 150px var(--gutter) 56px;
  pointer-events: none;
}
.hero__copy { display: flex; flex-direction: column; gap: 0; max-width: min(1120px, 100%); }
.hero__copy > * + * { margin-top: var(--sp-4); }
/* A kicker belongs to the headline beneath it, so it sits closer */
.hero__copy .kicker + .hero__title { margin-top: var(--sp-2); }
.hero__copy .hero__ctas { margin-top: var(--sp-5); }
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--cream);
}
.hero__title .script { font-size: clamp(54px, 7vw, 100px); }
.hero__lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--paper);
  max-width: 70ch;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: stretch; pointer-events: auto; }
.hero__inset {
  display: flex; flex-direction: column;
  flex: 0 0 300px;
  border: 1px solid #F7F2E966;
  background: #22212199;
  pointer-events: auto;
}
.hero__inset-media { position: relative; height: 190px; }
.hero__inset-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cream);
  text-align: center;
  padding: var(--sp-3);
  line-height: 1.55;
}

/* ---- Sections shared ------------------------------------------------------- */
.section { padding: var(--sp-8) var(--gutter); }
.section__inner { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-7); }
.section__intro { display: flex; flex-direction: column; gap: 0; }
.section__intro > * + * { margin-top: var(--sp-3); }
.section__intro .kicker + .section-title { margin-top: var(--sp-2); }
.section__intro p { margin: 0; font-size: clamp(18px, 1.05vw, 21px); line-height: 1.55; max-width: 40em; }

/* ---- Benefits -------------------------------------------------------------- */
.benefits {
  background: var(--cream);
  background-image:
    repeating-linear-gradient(0deg, #22212108 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, #22212108 0 1px, transparent 1px 56px);
}
.benefits .section__intro { max-width: min(1060px, 100%); }
.benefits .section__intro p { color: #222121CC; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.benefit-card {
  background: var(--paper);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: opacity var(--t-reveal) var(--ease);
}
.benefit-card__num { font-family: var(--font-mono); font-size: 12px; color: var(--rust); letter-spacing: 0.1em; }
.benefit-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.benefit-card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #222121CC; }

/* ---- Benefits marquee ------------------------------------------------------
   A continuously scrolling strip. main.js clones the slides once, so the
   translate below lands exactly one group over and the loop is seamless. */
.marquee {
  position: relative;
  overflow: hidden;
  /* Flex item defaults to min-width:auto, which the max-content track would
     otherwise inflate past the viewport */
  min-width: 0;
  /* Feather both edges into the section background so slides don't pop in */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  --gap: 24px;
  display: flex;
  gap: var(--gap);
  width: max-content;
}
.marquee__track.is-looping {
  animation: marquee-scroll 24s linear infinite;
  will-change: transform;
}
/* No hover or off-screen pausing: a cursor resting mid-page lands on the
   strip, and a stopped marquee reads as a broken one. It just runs. */
.marquee__item {
  position: relative;
  flex: 0 0 clamp(260px, 30vw, 560px);
  height: clamp(300px, 22vw, 420px);
  overflow: hidden;
}
/* Half the doubled track is one group plus half a gap; shift the extra half
   gap so slide 1 of the clone lands exactly where slide 1 started. */
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--gap) / 2), 0, 0); }
}

/* ---- Lighting solutions ----------------------------------------------------- */
.lighting {
  background: var(--ink);
  background-image: var(--noise);
  color: var(--cream);
}
.lighting .section__intro { max-width: min(1060px, 100%); }
.lighting .section__intro p { color: var(--paper); }
.lighting .section-title { color: var(--cream); }

.types-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
.type-card {
  display: flex; flex-direction: column;
  background: var(--ink-soft);
  border: 1px solid #F7F2E922;
  transition: opacity var(--t-reveal) var(--ease);
}
.type-card__media { position: relative; height: clamp(240px, 18vw, 340px); min-width: 0; overflow: hidden; }
.type-card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); }
.type-card__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--amber); }
.type-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.type-card p { margin: 0; font-size: 16px; line-height: 1.6; color: #EFE8DCCC; }

/* ---- Pricing ---------------------------------------------------------------- */
.pricing { background-color: var(--pine); color: var(--cream); }
.pricing-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 72px;
  align-items: start;
}
.pricing__copy { display: flex; flex-direction: column; gap: 16px; }
.pricing__copy p { margin: 0; font-size: clamp(18px, 1.05vw, 21px); line-height: 1.6; color: var(--paper); max-width: 40em; }
.pricing__copy .btn--amber-to-cream { align-self: flex-start; margin-top: 8px; }

.price-table {
  display: flex; flex-direction: column;
  gap: 1px;
  background: #F7F2E933;
  border: 1px solid #F7F2E933;
}
.price-row {
  background: var(--pine);
  padding: var(--sp-4) var(--sp-5);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px;
}
.price-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-row__desc { font-size: 15px; color: #EFE8DCCC; margin-top: 4px; }
.price-row__val {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--amber);
  white-space: nowrap;
}

/* ---- FAQ --------------------------------------------------------------------- */
.faq { background: var(--paper); }
.faq__inner { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.faq__list { display: flex; flex-direction: column; border-top: 1px solid #22212133; }
.faq-item { border-bottom: 1px solid #22212133; }
.faq-item__q {
  width: 100%;
  background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  padding: 24px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.faq-item__icon { font-family: var(--font-mono); font-size: 18px; color: var(--rust); }
.faq-item__a-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-panel) var(--ease);
}
/* Collapsed only where the accordion script exists to reopen it */
.js .faq-item__a-wrap { grid-template-rows: 0fr; }
.faq-item__a-inner { overflow: hidden; min-height: 0; }
.js .faq-item.open .faq-item__a-wrap { grid-template-rows: 1fr; }
.js .faq-item__q { cursor: pointer; }
/* No accordion script means no toggle affordance to advertise */
html:not(.js) .faq-item__icon { display: none; }
.faq-item__a {
  margin: 0;
  padding: 0 4px var(--sp-4);
  font-size: clamp(16.5px, 0.95vw, 19px);
  line-height: 1.6;
  color: #222121CC;
  max-width: 64ch;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-panel) var(--ease) 60ms, transform var(--t-panel) var(--ease) 60ms;
}
.faq-item.open .faq-item__a { opacity: 1; transform: none; }

/* ---- Quote ------------------------------------------------------------------- */
.quote {
  background: var(--ink);
  background-image: var(--noise);
  color: var(--cream);
  position: relative;
}
.quote-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 72px;
  align-items: start;
}
.quote__copy { display: flex; flex-direction: column; gap: 18px; }
.quote__copy .section-title { font-size: clamp(38px, 10vw, 52px); }
.quote__copy .section-title .script { font-size: 1.154em; }
.quote__copy > p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--paper); max-width: 48ch; }
.quote__meta {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #EFE8DCAA;
  padding-top: 8px;
}

.quote-form {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--ink-soft);
  padding: var(--sp-6) var(--sp-6);
  border: 1px solid #F7F2E922;
}
.form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
/* City takes the slack; state and ZIP stay just wide enough for their content */
.form-grid--address { grid-template-columns: minmax(0,1fr) 90px 120px; }
/* Inputs carry a ~182px intrinsic min-width; without this they refuse to
   shrink inside a grid column and push the form wider than the viewport. */
.quote-form input, .quote-form textarea { min-width: 0; }
.quote-form label {
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--amber);
}
.quote-form input,
.quote-form textarea {
  background: var(--ink);
  border: 1px solid #F7F2E940;
  color: var(--cream);
  padding: 15px var(--sp-3);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* Text fields always warrant a visible focus state, pointer or keyboard */
.quote-form input:focus,
.quote-form textarea:focus {
  border-color: var(--amber);
  background: #1B1A1A;
}
.quote-form textarea { resize: vertical; }
.quote-form .hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.quote-form__error {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #FF9B85;
}
.quote-form__error a { color: var(--amber); }
.quote-form button[type="submit"] {
  background: var(--amber);
  border: none; cursor: pointer;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.12em;
  padding: 18px;
  margin-top: var(--sp-1);
}

.quote-success {
  background: var(--pine);
  padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: flex-start;
}
.quote-success .script { font-size: 44px; }
.quote-success p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cream); }
.quote-success[hidden] { display: none; }

/* ---- Footer ------------------------------------------------------------------ */
.site-footer { background: var(--ink); color: var(--paper); }
.footer-lights {
  height: 10px;
  background: radial-gradient(circle at 13px 5px, var(--glow-warm) 0 4px, transparent 4.5px) 0 0 / 26px 10px repeat-x;
  filter: drop-shadow(0 0 6px #FFC97C) drop-shadow(0 0 16px #FFC97C);
}
.footer-grid {
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto;
  padding: var(--sp-7) var(--gutter) var(--sp-6);
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-5);
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-brand .logo { height: 52px; width: auto; display: block; }
.footer-brand p { margin: 0; font-size: 15px; line-height: 1.6; color: #EFE8DC99; max-width: 36ch; }
.footer-col { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col__head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--amber);
}
.footer-col__items { display: flex; flex-direction: column; gap: var(--sp-2); font-size: 15px; line-height: 1.45; }
.footer-col__items, .footer-col__items a { color: var(--paper); }
.footer-col__items .muted { color: #EFE8DC99; }
.footer-bottom { border-top: 1px solid #F7F2E91A; }
.footer-bottom__inner {
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #EFE8DC99;
}

/* ---- Responsive ---------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .section { padding: 72px var(--gutter); }
  .hero { min-height: 640px; }
  .nav-pill--ghost { display: none; }
  .site-header { grid-template-columns: auto auto 1fr; }
  .site-header .logo { height: 38px; }
  .hero__content {
    flex-direction: column;
    align-items: flex-start;
    padding: 110px var(--gutter) 40px;
    gap: 28px;
  }
  .hero__inset { display: none; }
  /* Photo's house is right-of-center; bias the cover crop so it stays centered */
  .hero__media image-slot img { object-position: 68% center; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .marquee__item { flex-basis: clamp(240px, 76vw, 420px); height: 240px; }
  .marquee__track.is-looping { animation-duration: 20s; }
  .types-grid { grid-template-columns: 1fr; }
  .pricing-grid, .quote-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5); padding: var(--sp-6) var(--gutter) var(--sp-5); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .benefits-grid, .form-grid { grid-template-columns: 1fr; }
  /* City on its own row, state and ZIP paired beneath it */
  .form-grid--address { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .form-grid--address label:first-child { grid-column: 1 / -1; }

  /* Typography: tighter display sizes for small screens */
  .announcement { font-size: 11px; letter-spacing: 0.08em; padding: 8px 14px; }
  .hero__title { font-size: 44px; }
  .hero__title .script { font-size: 50px; }
  .hero__lede { font-size: 17px; }
  .kicker { font-size: 12px; }
  .faq-item__q { font-size: 19px; padding: 20px 4px; }

  /* Hero CTAs: full-width stacked buttons instead of a cramped row */
  .hero__ctas { flex-direction: column; align-self: stretch; }
  .hero__ctas .btn { text-align: center; padding: 16px 24px; }
  .hero__content { padding-bottom: 36px; }

  /* Compact card, table, and form padding */
  :root { --gutter: 20px; }
  .section { padding: 64px var(--gutter); }
  .benefit-card { padding: 26px 22px; }
  .benefits-grid { gap: 16px; }
  .type-card__media { height: 220px; }
  .type-card__body { padding: 24px 20px; }
  .type-card h3 { font-size: 23px; }
  .types-grid { gap: 20px; }
  .price-row { padding: var(--sp-4) var(--sp-3); gap: var(--sp-3); }
  .quote-form { padding: 28px 18px; }
  .quote-success { padding: 40px 24px; }
  .marquee__track { --gap: 16px; }
  .marquee__track.is-looping { animation-duration: 14s; }
}

/* ---- Skip link ------------------------------------------------------------- */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  padding: 10px 16px;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; color: var(--cream); outline: 2px solid var(--amber); outline-offset: 2px; }

/* Provenance note under the example imagery */
.media-note {
  margin: -20px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #22212199;
}

/* ---- No-JavaScript fallbacks ----------------------------------------------
   The marquee's seamless loop is script-built. Without JS, let it fall back to
   a plain scrollable row. */
html:not(.js) .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

/* ==========================================================================
   Content pages (/permanent-lighting-cost/, /installation-process/, ...)
   Reuses the homepage's tokens, type scale and 5px radius. The solid header
   variant exists because these pages have no full-bleed hero behind it.
   ========================================================================== */

.site-header--solid {
  position: static;
  background: var(--ink);
  background-image: var(--noise);
}

body.page { background: var(--cream); }

.doc { padding: 0 0 96px; }

.breadcrumb {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 48px 0;
}
.breadcrumb ol {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #221211CC;
}
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: #2221214D; }
.breadcrumb a { color: var(--rust); }

/* ---- Document rhythm ------------------------------------------------------ */
.doc__band { padding: 56px 48px; }
.doc__band--paper { background: var(--paper); }
.doc__band--ink {
  background: var(--ink);
  background-image: var(--noise);
  color: var(--cream);
}
/* Prose sits in a much wider band than the old 760px. Body type scales with
   the viewport alongside it, so the line length stays in a readable range
   rather than stretching to 90-plus characters on a large monitor. */
.doc__inner { max-width: var(--container); margin: 0 auto; }
.doc__inner--wide { max-width: var(--container); margin: 0 auto; }

.doc__lede {
  margin: 20px 0 0;
  font-size: clamp(18px, 1.25vw, 25px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.doc__band--ink .doc__lede { color: #F7F2E9CC; }

.doc h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 7.6vw, 46px);
  line-height: 1.04;
  text-transform: uppercase;
}
.doc h2 {
  margin: 52px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 5.6vw, 31px);
  line-height: 1.12;
  text-transform: uppercase;
}
.doc h3 {
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 4.4vw, 21px);
  line-height: 1.2;
}
.doc p, .doc li { font-size: clamp(17px, 1.1vw, 22px); line-height: 1.62; color: var(--ink-soft); }
/* The band spans the container so the page fills a large screen, but running
   text is capped in em so the line length stays readable regardless of how
   wide the band gets. Headings, tables, callouts and CTAs use the full band,
   which is what anchors the layout rather than leaving it looking empty. */
.doc__inner > p,
.doc__inner .qa p,
.doc__inner .doc__lede,
.doc__inner h3 { max-width: 45em; }
.doc__inner .note p,
.doc__inner .doc-cta p,
.doc__inner .area-card p,
.doc__inner .area-card ul { max-width: none; }

/* On a wide screen a single prose column cannot fill the page at a readable
   line length, so the content that does suit the width takes it: lists and
   question groups run in two columns while flowing paragraphs keep their
   measure. Tables, callouts and CTAs already span the band. */
@media (min-width: 1400px) {
  .doc__inner > ul,
  .doc__inner > ol,
  .doc__inner .qa:not(.qa--disclosure) {
    columns: 2;
    column-gap: var(--sp-8);
  }
  .doc__inner > ul > li,
  .doc__inner > ol > li { break-inside: avoid; }
  /* Keep a question with its answer */
  .doc__inner .qa h3 { break-after: avoid; max-width: none; }
  .doc__inner .qa p { break-inside: avoid; max-width: none; }
  /* The section heading belongs above both columns */
  .doc__inner .qa h2 { column-span: all; }
}
.doc p { margin: var(--sp-3) 0 0; }
.doc ul, .doc ol { margin: var(--sp-3) 0 0; padding-left: 22px; }
.doc li + li { margin-top: var(--sp-2); }
.doc a:not(.btn):not(.nav-pill) { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.doc a.btn, .doc a.nav-pill { text-decoration: none; }
.doc strong { color: var(--ink); font-weight: 700; }

/* ---- Tables --------------------------------------------------------------- */
.doc__table-wrap { margin: var(--sp-4) 0 0; overflow-x: auto; }
.doc table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  background: #FFFFFF80;
  border: 1px solid #2221211A;
  border-radius: var(--radius);
}
.doc caption {
  caption-side: bottom;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  /* 60% alpha measured 4.14:1 against the cream ground, under AA for text */
  color: #221211CC;
  text-align: left;
  /* The table sets a min-width so it can scroll on narrow screens. Without
     this the caption inherits that width and its text scrolls out of sight,
     taking the "estimate, not a quote" disclaimer with it. */
  position: sticky;
  left: 0;
  width: min(100%, calc(100vw - 40px));
  box-sizing: border-box;
}
.doc th, .doc td {
  padding: 13px 16px;
  text-align: left;
  font-size: 16px;
  border-bottom: 1px solid #2221211A;
  vertical-align: top;
}
.doc th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  background: #2221210A;
}
.doc tbody tr:last-child td { border-bottom: 0; }

/* ---- Callouts ------------------------------------------------------------- */
.note {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  background: #FFFFFF99;
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
}
.note p:first-child { margin-top: 0; }
.note__head {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 6px;
}

/* ---- In-page CTA ---------------------------------------------------------- */
.doc-cta {
  margin: 56px 0 0;
  padding: 32px;
  background: var(--ink);
  background-image: var(--noise);
  border-radius: var(--radius);
  color: var(--cream);
}
.doc-cta h2 { margin: 8px 0 0; color: var(--cream); }
.doc-cta p { color: #F7F2E9CC; }
.doc-cta .btn { margin-top: 22px; display: inline-block; }

/* ---- Q&A blocks ----------------------------------------------------------- */
.qa { margin: 34px 0 0; }
.qa h3 { margin-top: 26px; }
.qa h3:first-child { margin-top: 0; }

/* ---- Coverage columns ----------------------------------------------------- */
.area-grid {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px;
}
.area-card {
  padding: var(--sp-4);
  background: #FFFFFF99;
  border: 1px solid #2221211A;
  border-radius: var(--radius);
}
.area-card h3 { margin: 0 0 4px; }
.area-card p { font-size: 15.5px; }
.area-card ul { padding-left: 18px; }
.area-card li { font-size: 15.5px; }

@media (max-width: 900px) {
  .breadcrumb { padding: 22px 24px 0; }
  .doc__band { padding: 44px 24px; }
  .doc { padding-bottom: 72px; }
}
@media (max-width: 560px) {
  .breadcrumb { padding: 18px 20px 0; }
  .doc__band { padding: 36px 20px; }
  .doc-cta { padding: 24px 20px; }
  .doc h2 { margin-top: 40px; }
}

/* Contextual links inside the homepage's dark and light sections */
.section p a, .benefit-card p a, .type-card p a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Rust is unreadable on the dark and pine sections: measured 1.07:1 on the
   pricing green and 2.03:1 on the quote section's ink. Amber on those. */
.lighting p a, .lighting .type-card p a,
.quote p a, .hero p a { color: var(--amber); }
/* Amber on the pricing section's pine only reaches 3.99:1, so it gets the
   lighter warm tone instead. */
.pricing p a, .pricing__link a { color: var(--glow-warm); }
.pricing__link { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; }

/* ---- Focus visibility ------------------------------------------------------
   Keyboard users had no indicator at all: nothing in the stylesheet set an
   outline, and the UA default is suppressed by the reset. Amber on the dark
   sections, rust on the light ones. */
:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.lighting :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.doc-cta :focus-visible,
.doc__band--ink :focus-visible {
  outline-color: var(--amber);
}

/* The quote block is reused on /contact/ over a cream ground, where its
   dark-section text colours are unreadable. */
.doc .quote__meta { color: #221211CC; }
.doc .quote__copy p, .doc .quote__copy li { color: var(--ink-soft); }
.doc .quote__copy h1, .doc .quote__copy h2, .doc .quote__copy h3 { color: var(--ink); }

/* ---- Screen-reader-only utility ------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Footage estimator (/permanent-lighting-cost/)
   Scoped to .estimator and its own children. Every rule that would otherwise
   lose to the .doc typography above is prefixed with .doc on purpose rather
   than reaching for !important.
   ========================================================================== */
.doc .est__head { margin-top: 44px; }

.estimator {
  margin: var(--sp-4) 0 0;
  max-width: 1120px;
  padding: var(--sp-5);
  background: #FFFFFFB3;
  border: 1px solid #2221211F;
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  /* Controls and the estimate keep the primary column. The drawing is capped
     so it cannot push the useful controls down the page. */
  .estimator {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 300px);
    gap: var(--sp-6);
    align-items: start;
  }
  .est__foot { grid-column: 1 / -1; }
}

.est__controls { display: grid; gap: var(--sp-4); }
.est__group { min-width: 0; }

.est__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.est__label--sub { font-size: 14px; }

.est__field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.est__number {
  width: 7ch;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--font-mono);
  /* 16px floor: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 18px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid #22212140;
  border-radius: var(--radius);
}
.est__unit {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #221211CC;
}

.est__slider {
  width: 100%;
  min-height: 44px;
  margin: var(--sp-2) 0 0;
  /* A slider the full width of a wide column makes every foot a sub-pixel
     drag and reads as a progress bar rather than a control. */
  max-width: 460px;
  /* Keeps the native control, its keyboard behavior and its touch target */
  accent-color: var(--rust);
}

.est__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.est__preset {
  min-height: 44px;
  padding: 11px 15px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  border: 1px solid #22212159;
  border-radius: var(--radius);
  cursor: pointer;
}
/* Selection is marked by a filled dot as well as the fill, so the state does
   not rest on color alone. */
.est__preset::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  vertical-align: 1px;
}
.est__preset[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.est__preset[aria-pressed="true"]::before { background: currentColor; }

.estimator input:disabled,
.estimator button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Result -------------------------------------------------------------- */
.est__result {
  margin-top: var(--sp-2);
  padding: var(--sp-4);
  background: var(--paper);
  border-radius: var(--radius);
}
.doc .est__result-head {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
}
.est__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--amber);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.1em;
  border-radius: 3px;
}
/* Hidden rather than removed: the tag shares a line with the label, so the
   example marker can go without moving anything. */
[data-est-state="user"] .est__tag { visibility: hidden; }

/* Both states share one grid cell, so the box is always as tall as the taller
   of them and swapping a price for the prompt cannot shift the page. */
.est__figure-stack { display: grid; margin-top: 6px; }
.est__figure-stack > * { grid-area: 1 / 1; margin: 0; }
.doc .est__figure {
  font-family: var(--font-mono);
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.25;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.doc .est__prompt {
  align-self: center;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* visibility, not display: it reserves the space and still takes the inactive
   state out of the accessibility tree. */
[data-est-result="value"] .est__prompt,
[data-est-result="prompt"] .est__figure { visibility: hidden; }

.doc .est__qual {
  margin-top: var(--sp-2);
  font-size: 14.5px;
  line-height: 1.45;
  color: #221211CC;
  max-width: 40em;
}

.doc .est__help {
  margin-top: var(--sp-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44em;
}
.doc .est__error {
  margin-top: var(--sp-3);
  padding-left: 11px;
  border-left: 3px solid var(--rust);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--rust);
  max-width: 40em;
}

/* ---- Footer row and no-script fallback ----------------------------------- */
.est__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid #2221211F;
}
.doc .est__foot-note,
.doc .est__fallback { margin: 0; font-size: 15px; line-height: 1.5; }
.est__foot > a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.doc .est__fallback { flex-basis: 100%; color: var(--ink-soft); }
/* The estimator sets this only after a clean init, so a blocked or broken
   script keeps the explanation and leaves the controls disabled. */
[data-est-ready] .est__fallback { display: none; }

/* ---- House illustration -------------------------------------------------- */
.house-fig { margin: 0; }
.house-fig svg {
  display: block;
  width: 100%;
  height: auto;
  /* Reserved from the viewBox so the drawing never causes a shift. The box is
     cropped to the drawing's own bounds, so it carries no empty bands. */
  aspect-ratio: 384 / 164;
}
.doc .house-fig figcaption {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: #221211CC;
}
.house-fig .hf-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.house-fig .hf-pane { fill: #2221210F; stroke: var(--ink); stroke-width: 2; }
.house-fig .hf-roof {
  fill: none;
  stroke: var(--amber);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.house-fig .hf-led {
  fill: none;
  stroke: var(--glow-warm);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0.001 11;
}
.house-fig .hf-tick { fill: none; stroke: var(--rust); stroke-width: 2; stroke-linecap: round; }
.house-fig .hf-shrub { fill: var(--pine); }

/* ==========================================================================
   Installation steps (/installation-process/)
   ========================================================================== */
@media (min-width: 1024px) {
  .steps-layout {
    display: grid;
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}
/* Sticky only where the column has room to sit inside the viewport. The
   max-height keeps it from ever consuming the usable screen, and short or
   narrow viewports get the plain wrapping list instead. */
@media (min-width: 1024px) and (min-height: 700px) {
  .step-nav {
    position: sticky;
    top: var(--sp-5);
    max-height: calc(100vh - var(--sp-6));
    overflow-y: auto;
  }
}

.step-nav {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  background: #FFFFFF99;
  border: 1px solid #2221211A;
  border-radius: var(--radius);
}
.doc .step-nav__head {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
}
.doc .step-nav__list {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stepnav;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.doc .step-nav__list li { counter-increment: stepnav; margin: 0; font-size: 16px; }
/* :not(.btn) is here to match the specificity of the generic
   `.doc a:not(.btn):not(.nav-pill)` rule, which otherwise wins and paints
   the whole list rust and underlined. */
.doc .step-nav__list a:not(.btn) {
  display: inline-block;
  padding: 4px 0;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.doc .step-nav__list a::before {
  content: counter(stepnav) '.';
  margin-right: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rust);
}
@media (min-width: 1024px) {
  .step-nav { margin-top: 0; }
  .doc .step-nav__list { flex-direction: column; gap: 0; }
  .doc .step-nav__list li + li { border-top: 1px solid #2221211A; }
  .doc .step-nav__list a { padding: 10px 0; }
}

.doc .steps h2:first-child { margin-top: 44px; }
@media (min-width: 1024px) {
  .doc .steps h2:first-child { margin-top: 0; }
}

.step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  background: #FFFFFF80;
  border: 1px solid #2221211A;
  border-radius: var(--radius);
  /* Headings clear the top of the viewport on a deep link */
  scroll-margin-top: var(--sp-5);
}
.doc .step h3 { margin: 0; max-width: none; }
/* Carries its own period and is followed by a real space, so the heading's
   text content still reads "1. The measurement and quote". */
.step__num {
  display: inline-block;
  margin-right: 3px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--rust);
}
.doc .step p { margin-top: var(--sp-2); max-width: 46em; }

/* The targeted section is marked by a bar and a wash, not by color alone */
.step:target {
  background: #FFAF001F;
  border-color: #FFAF0080;
  box-shadow: inset 4px 0 0 var(--amber);
}

.step__ico { width: 46px; height: 46px; }
.step__ico svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.step__ico .si-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step__ico .si-mark {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step__ico .si-dot { fill: var(--amber); }

@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-3); }
  .estimator { padding: var(--sp-4); }
}

/* ---- Preparation list ---------------------------------------------------- */
.doc .prep__list {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--sp-4);
}
.doc .prep__list li {
  margin: 0;
  padding: var(--sp-4);
  background: #FFFFFF99;
  border: 1px solid #2221211A;
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.55;
}
.doc .prep__list strong { display: block; margin-bottom: 4px; }

/* ==========================================================================
   FAQ disclosures
   Native details/summary. All answer text is in the delivered HTML, so a
   closed question is still a crawled and readable answer.
   ========================================================================== */
.qa--disclosure { border-top: 1px solid #22212126; }
.qa-item { border-bottom: 1px solid #22212126; }
.qa-item > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 2px;
  cursor: pointer;
  list-style: none;
}
.qa-item > summary::-webkit-details-marker { display: none; }
.doc .qa-item > summary h3 { margin: 0; flex: 1 1 auto; max-width: none; }
.qa-item__chev {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--rust);
  border-bottom: 2.5px solid var(--rust);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 160ms var(--ease);
}
.qa-item[open] > summary .qa-item__chev { transform: rotate(225deg); }
.doc .qa-item > p { margin-top: 0; padding: 0 2px var(--sp-4); max-width: 46em; }
.doc .qa-item > p:last-child { margin-bottom: 0; }

@media (min-width: 1400px) {
  /* Two tracks of a grid, not two multicolumn columns: opening a question
     grows its own row instead of reflowing every question after it into a
     different column. */
  .qa--disclosure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-8);
    align-items: start;
  }
  .doc .qa--disclosure > h2 { grid-column: 1 / -1; }
  .qa--disclosure > .qa-item { min-width: 0; }
}

/* ---- HubSpot embedded form ------------------------------------------------
   The form renders inside an iframe on HubSpot's own origin, so none of its
   type, colors or spacing can be reached from this stylesheet. Only the box it
   sits in belongs to us.
   ------------------------------------------------------------------------- */
.hs-form-wrap {
  /* The iframe has no intrinsic height until HubSpot's script answers. Without
     a reserved box the whole section jumps once on every load. Measured at
     652-655px on desktop and up to 755px at 390px wide; reserved a little above
     that so the form can also grow a validation message without shifting. */
  min-height: 670px;
}
/* On the homepage the form sits on the dark quote section, where HubSpot's
   default dark labels land on dark ground and disappear. The embed gets a
   light panel of its own to sit on. The label colors themselves can only be
   changed in HubSpot's form editor. */
.quote .hs-form-wrap {
  background: var(--cream);
  padding: var(--sp-4);
  border-radius: var(--radius);
}
/* /contact/ reuses the same block over cream, where no panel is needed. */
.doc .hs-form-wrap { background: none; padding: 0; }

@media (max-width: 560px) {
  .hs-form-wrap { min-height: 790px; }
  .quote .hs-form-wrap { padding: var(--sp-3); }
}

/* ==========================================================================
   Mobile navigation
   Above 900px the primary nav is inline and the toggle is hidden. Below it,
   the same <nav> becomes a panel the toggle opens. Both states use the same
   markup and the same pills, so there is one set of links to maintain.
   ========================================================================== */

.nav-pill--in-menu { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 13px 16px;
  background: #F7F2E91A;
  border: 1px solid #F7F2E933;
  border-radius: var(--radius);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 17px; }
.nav-toggle__bars span {
  display: block; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform var(--t-panel) var(--ease), opacity 140ms linear;
}
.site-header.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  /* Without JS the panel never collapses, so the toggle has nothing to do */
  html:not(.js) .nav-toggle { display: none; }
  .nav-pill--in-menu { display: block; }
  /* The solid header is position:static, so it needs a positioning context
     for the dropdown. Declared here because that base rule sits later in the
     file than the main responsive block. */
  .site-header--solid { position: relative; }

  /* The panel drops out of the header. Because it is absolutely positioned it
     is already out of flow, so it fades and lifts rather than animating a
     height. Collapsed state is scoped to .js, so a scripting failure leaves
     the links visible and reachable instead of sealed shut. */
  .js .site-header #site-nav {
    position: absolute;
    grid-column: 1 / -1;
    top: calc(100% - 4px);
    left: 12px;
    right: 12px;
    flex-direction: column;
    gap: 0;
    padding: 6px 10px;
    background: var(--ink);
    background-image: var(--noise);
    border: 1px solid #F7F2E926;
    border-radius: var(--radius);
    box-shadow: 0 18px 40px #22212166;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .24s cubic-bezier(.22,1,.36,1),
                transform .28s cubic-bezier(.22,1,.36,1),
                visibility 0s linear .28s;
  }
  .js .site-header.nav-open #site-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .24s cubic-bezier(.22,1,.36,1),
                transform .28s cubic-bezier(.22,1,.36,1),
                visibility 0s;
  }
  .site-header #site-nav .nav-pill {
    display: block;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #F7F2E914;
    border-radius: 0;
    padding: 15px 8px;
  }
  .site-header #site-nav .nav-pill:last-child { border-bottom: 0; }

  /* Without JS the panel is simply an inline wrapped row of pills */
  html:not(.js) .site-header #site-nav { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .nav-toggle { padding: 14px; font-size: 12px; letter-spacing: 0.08em; }
  .nav-toggle__label { display: none; }
}

/* ==========================================================================
   Interactive states
   Hover is gated behind a hover-capable pointer. On touch, :hover latches
   after a tap and leaves elements looking permanently active. Pressed states
   sit outside the gate so a tap gets immediate feedback too.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--rust-deep); }

  .nav-pill:hover { background: var(--amber); color: var(--ink); }
  .nav-pill--ghost:hover { background: var(--ink); color: var(--cream); }
  .nav-pill--quote:hover {
    background: var(--amber);
    color: var(--ink);
    transform: translateY(-2px);
  }
  .nav-toggle:hover { background: #F7F2E92E; }

  .btn--amber:hover {
    background: var(--rust-deep);
    color: var(--cream);
    transform: translateY(-2px);
  }
  .btn--outline:hover { background: var(--cream); color: var(--ink); }
  .est__preset:not(:disabled):hover { border-color: var(--ink); background: #2221210F; }
  .est__preset[aria-pressed="true"]:not(:disabled):hover { background: var(--ink-soft); }
  .qa-item > summary:hover h3 { color: var(--rust-deep); }
  .doc .step-nav__list a:not(.btn):hover { color: var(--rust-deep); text-decoration: underline; text-underline-offset: 3px; }
  .btn--amber-to-cream:hover { background: var(--cream); color: var(--ink); }
  .quote-form button[type="submit"]:hover {
    background: var(--rust-deep);
    color: var(--cream);
    transform: translateY(-2px);
  }

  /* Links darken on light grounds and warm up on dark ones */
  .breadcrumb a:hover,
  .doc a:not(.btn):not(.nav-pill):hover,
  .section p a:hover,
  .benefit-card p a:hover,
  .type-card p a:hover { color: var(--rust-deep); }
  .lighting p a:hover, .lighting .type-card p a:hover,
  .pricing p a:hover, .pricing__link a:hover,
  .quote p a:hover, .hero p a:hover { color: var(--glow-warm); }
}

.nav-pill:active,
.btn:active,
.nav-toggle:active,
.quote-form button[type="submit"]:active {
  transform: translateY(1px);
  transition-duration: 70ms;
}

/* Already used while the quote form is submitting */
.quote-form button[type="submit"]:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Not links: no lift, no shadow, no pointer cursor */
.benefit-card,
.type-card,
.price-row,
.area-card { cursor: default; }

/* ==========================================================================
   Line breaking
   balance evens out short display text so headlines do not leave a single
   orphaned word; pretty does the same job for body copy without the line-count
   limit. Both are progressive: unsupported browsers wrap exactly as before.
   ========================================================================== */
.hero__title,
.section-title,
.hero__inset-caption,
.benefit-card h3,
.type-card h3,
.price-row__name,
.faq-item__q span,
.doc h1, .doc h2, .doc h3,
.doc caption,
.area-card h3,
.quote-success .script { text-wrap: balance; }

.hero__lede,
.section__intro p,
.benefit-card p,
.type-card p,
.faq-item__a,
.price-row__desc,
.doc p, .doc li,
.footer-brand p { text-wrap: pretty; }

/* ==========================================================================
   Reduced motion
   One block, emitted last so it actually wins. Previously these rules were
   split across three places above the declarations they were meant to
   override, and the accordion kept animating under a reduce preference.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; will-change: auto; }
  .faq-item__a-wrap, .faq-item__a { transition: none; }
  a, button, .benefit-card, .type-card { transition: none; }
  /* main.js leaves the strip un-cloned here; make it a plain swipeable row */
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__item { scroll-snap-align: start; }
  .nav-toggle__bars span,
  .js .site-header #site-nav { transition: none; }
  .qa-item__chev { transition: none; }
  .js .faq-item__a-wrap,
  .faq-item__a,
  .nav-toggle__bars span,
  .js .site-header #site-nav,
  .quote-form input,
  .quote-form textarea,
  .skip-link { transition: none; }
}

/* The collapsed mobile panel's own row hover. Scoped to the breakpoint as
   well as the pointer, because its ID selector outranks .nav-pill:hover and
   would otherwise cancel the amber hover on desktop. */
@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
  .site-header #site-nav .nav-pill:hover { background: #F7F2E914; }
}