/* =========================================================
   East Coast Iron Doors — design tokens
   Change a color/spacing value here and it updates everywhere.
   ========================================================= */
:root {
  --ink: #1F2124;
  --ink-2: #3F423F;
  --body-text: #4A4D49;
  --muted: #6F736E;
  --muted-strong: #5C605B;
  --accent: #8C5A2E;
  --accent-hover: #6E4622;
  --surface: #FAFAF8;
  --page: #F4F4F2;
  --section-alt: #EAEAE7;
  --image-bg: #E7E6E2;
  --line: #CBCDC8;
  --hairline: #D8D9D5;
  --hairline-soft: #E2E1DD;
  --line-strong: #C2BDB4;
  --dash: #B7B9B4;
  --on-dark: #FAFAF8;
  --on-dark-muted: #B9BCB7;
  --dark-hairline: #3C4046;

  --header-height: 84px;
  --max-width: 1440px;
  /* Section backgrounds always fill the full browser width; this is the
     gutter that keeps their *content* aligned to a readable ~1600px
     column instead of stretching edge to edge. Below ~1712px it behaves
     like a normal 56px side padding (unchanged from the original design
     at 1440px). Above that, it grows so the content stops at 1600px
     instead of getting wider and wider. Redefined to a flat 20px on
     phones, below. See the 1712px breakpoint further down for the two
     photo grids that add columns instead of just growing. */
  --gutter: max(56px, calc((100% - 1600px) / 2));

  /* Fluid type scale — headline and hero sizes grow between the 1440px
     design width and 1712px (where the container above hits its cap),
     then hold. This is what actually makes the page feel bigger on a
     big screen; capping the container width alone only fixed *layout*,
     not scale. Small UI/body text is left fixed on purpose — labels,
     buttons and paragraphs don't need to grow, only the big display
     type does. Change the two numbers in a clamp() to retune a step. */
  --fs-hero-h1: clamp(86px, calc(-9.294px + 6.6176vw), 104px);
  --fs-contact-h1: clamp(68px, calc(-6.118px + 5.1471vw), 82px);
  --fs-h2: clamp(48px, calc(-4.941px + 3.6765vw), 58px);
  --fs-h2-shop: clamp(50px, calc(-2.941px + 3.6765vw), 60px);
  --fs-h2-sm: clamp(42px, calc(-0.353px + 2.9412vw), 50px);
  --fs-h2-contact-form: clamp(40px, calc(-2.353px + 2.9412vw), 48px);
  --fs-h3-areas: clamp(32px, calc(0.235px + 2.2059vw), 38px);
  --fs-h3-step: clamp(26px, calc(-0.471px + 1.8382vw), 31px);
  --fs-h3-quote: clamp(24px, calc(2.824px + 1.4706vw), 28px);
  --fs-serif-financing: clamp(34px, calc(2.235px + 2.2059vw), 40px);
  --fs-serif-backlanding: clamp(30px, calc(-1.765px + 2.2059vw), 36px);
  --fs-body-hero: clamp(20px, calc(-1.176px + 1.4706vw), 24px);
  --fs-body-contact: clamp(19px, calc(-2.176px + 1.4706vw), 23px);
  --fs-card-h3: clamp(19px, calc(3.118px + 1.1029vw), 22px);
  --fs-stat: clamp(20px, calc(4.118px + 1.1029vw), 23px);

  /* Same idea for the two spacing values that most affect how "big" a
     section feels: its own vertical padding, and the hero's height. */
  --space-section: clamp(76px, calc(-8.706px + 5.8824vw), 92px);
  --hero-height: clamp(660px, calc(342.353px + 22.0588vw), 720px);
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
}

/* =========================================================
   Reset & base
   ========================================================= */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* "proximity", not "mandatory" — scrolling settles at the start of the
     next block when you land near one, but a block taller than the
     screen (FAQ, the catalog, the gallery) still scrolls through freely
     instead of fighting you to jump past it. */
  scroll-snap-type: y proximity;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Every direct block of the page is a snap point — the header is sticky
   so it's excluded, and scroll-margin-top keeps a block's heading from
   landing underneath it. Add a new section as a direct child of <main>
   and it gets this for free, no class needed. */
main > *,
.site-footer,
.back-to-landing,
.compact-footer {
  scroll-snap-align: start;
  scroll-margin-top: var(--header-height);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button, input, textarea { font-family: inherit; }

img { max-width: 100%; display: block; }

.serif { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-optical-sizing: auto; }

.page-shell {
  /* Full width on purpose — each section below fills the browser edge to
     edge and uses --gutter to keep its own content aligned to 1440px. */
  background: var(--page);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

[id] { scroll-margin-top: var(--header-height); }

/* =========================================================
   Placeholder image slots — swap for a real <img> when photos
   arrive. Just delete the .img-slot div and put:
   <img src="images/your-photo.jpg" alt="...">
   in its place, inside the same wrapper.
   ========================================================= */
.img-slot {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--image-bg);
  text-align: center;
  padding: 16px;
}
.img-slot span {
  max-width: 220px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.site-header__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 14px var(--gutter);
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-right: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--ink);
}
.brand__name { font-size: 23px; color: var(--ink); }
.brand__eyebrow {
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-top: 5px;
}
.main-nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-weight: 600;
  flex: 1 1 340px;
  min-width: 0;
  flex-wrap: wrap;
}
.main-nav a { color: var(--ink-2); white-space: nowrap; }
.main-nav .is-active {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  white-space: nowrap;
}
.main-nav a.nav-contact { color: var(--accent); font-weight: 700; }

.header-licenses {
  order: 5;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  text-align: right;
  padding-right: 18px;
  border-right: 1px solid var(--hairline-soft);
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-strong);
}
.header-contact {
  order: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  flex-shrink: 0;
  white-space: nowrap;
}
.header-contact__phone { font-size: 17px; font-weight: 700; color: var(--ink); }
.header-contact__email { font-size: 12px; font-weight: 600; color: var(--muted-strong); }

.header-ctas {
  order: 3;
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 22px;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); color: #fff; }
.btn--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }

/* =========================================================
   Generic section helpers
   ========================================================= */
.section { padding: var(--space-section) var(--gutter); }
.section--alt { background: var(--section-alt); }
.section--page { background: var(--page); }
.section--surface { background: var(--surface); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
}
.section-head h2 {
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: var(--ink);
}
/* A lighter version of .section-head for the sections that are just an
   eyebrow + heading with no second column (process, gallery). */
.section-intro h2 {
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: var(--ink);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  height: var(--hero-height);
  overflow: hidden;
  background: var(--image-bg);
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,250,248,.94) 0%, rgba(250,250,248,.5) 30%, rgba(250,250,248,.55) 62%, rgba(250,250,248,.96) 100%);
  pointer-events: none;
}
.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 64px 120px;
  text-align: center;
  pointer-events: none;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  background: rgba(250,250,248,.8);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
}
.hero h1 {
  font-size: var(--fs-hero-h1);
  font-weight: 600;
  line-height: .99;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 1040px;
  text-wrap: balance;
}
.hero p {
  font-size: var(--fs-body-hero);
  line-height: 1.55;
  color: var(--body-text);
  max-width: 660px;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  pointer-events: auto;
}
.hero__cta { padding: 20px 44px; font-size: 18px; font-weight: 800; }
.hero__note { font-size: 14px; color: var(--muted); }

/* =========================================================
   Trust bar
   ========================================================= */
.trust-bar {
  display: grid;
  /* Fits as many 150px+ columns as the screen allows — 5 on desktop,
     naturally down to 2 on a phone — instead of a fixed column count
     per breakpoint. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  padding: 0 var(--gutter);
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.trust-bar__item {
  background: var(--surface);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.trust-bar__item strong { font-size: 16px; font-weight: 800; color: var(--ink); }
.trust-bar__item span { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* =========================================================
   Card grids (door types / shop stages / catalog)
   ========================================================= */
.card-grid {
  display: grid;
  gap: 20px;
}
/* auto-fit + minmax finds however many columns actually fit — 3 (or 6, on
   a very wide screen) door-type cards, 4 (or 8) catalog cards, always
   shrinking to 1 column on a phone — with no pixel breakpoint to
   maintain by hand. The minmax lower bound is just "how narrow can one
   card get before its photo looks cramped." */
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
}
.card__image { height: 230px; background: var(--image-bg); }
.card__body { display: flex; flex-direction: column; gap: 9px; padding: 22px 24px 24px; }
.card__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card__title { font-size: 21px; font-weight: 700; color: var(--ink); }
.card__meta { font-size: 13px; font-weight: 700; color: var(--accent); }
.card__note { font-size: 14px; line-height: 1.55; color: var(--muted); }

.card--dashed {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px dashed var(--dash);
}
.card--dashed .card__title { margin: 0; }
.card--dashed p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.card--dashed .btn { margin-top: auto; justify-content: space-between; gap: 14px; }

/* =========================================================
   Before / after
   ========================================================= */
.before-after { background: var(--section-alt); padding: 72px 0 52px; }
.before-after__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 0 var(--gutter);
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.before-after__head h2 { font-size: var(--fs-h2); line-height: 1.05; color: var(--ink); max-width: 760px; }
.project-dots { display: flex; gap: 7px; }
.project-dots button {
  width: 30px; height: 6px;
  border: none; padding: 0; cursor: pointer;
  background: #CFD1CC;
}
.project-dots button.is-active { background: var(--accent); }
.project-index { font-size: 13px; color: var(--muted-strong); text-align: right; margin-bottom: 12px; }

.wipe-box {
  position: relative;
  height: 560px;
  overflow: hidden;
  margin: 0 var(--gutter) 26px;
  background: #DAD9D4;
  user-select: none;
}
.wipe-box__layer { position: absolute; inset: 0; }
.wipe-box__handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 10px;
  background: var(--accent);
  pointer-events: none;
  transform: translateX(-5px);
}
.wipe-box__knob {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  pointer-events: none;
  transform: translate(-50%,-50%);
}
.wipe-box__label {
  position: absolute;
  top: 22px;
  padding: 9px 16px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}
.wipe-box__label--before { left: 22px; background: rgba(250,250,248,.92); color: var(--ink); font-weight: 700; }
.wipe-box__label--after { right: 22px; background: var(--accent); color: #fff; font-weight: 800; }
.wipe-box input[type="range"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}

.before-after__meta {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 0 var(--gutter);
  flex-wrap: wrap;
}
.before-after__meta-block { display: flex; flex-direction: column; gap: 5px; }
.before-after__meta-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-strong); font-weight: 700; }
.before-after__meta-value { font-size: 16px; font-weight: 600; color: var(--ink); }
.before-after__all {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 300px; padding: 16px 22px;
  border: 1px solid var(--accent); color: var(--accent);
  font-size: 15px; font-weight: 700;
}

/* =========================================================
   Shop section
   ========================================================= */
.shop-head {
  /* flex-wrap instead of a fixed grid — it drops to a single column on
     its own once the two sides can't both fit, no breakpoint needed. */
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: flex-end;
  margin-bottom: 34px;
}
.shop-head > div { flex: 2 1 420px; }
.shop-head h2 { font-size: var(--fs-h2-shop); line-height: 1.04; color: var(--ink); text-wrap: pretty; }
.shop-head p { flex: 1 1 340px; font-size: 17px; line-height: 1.65; color: var(--body-text); }

.stage-card .card__image { height: 250px; }
.stage-card .card__body { gap: 12px; padding: 24px 26px 26px; }
.stage-tag {
  align-self: flex-start;
  padding: 7px 13px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.stage-card .card__title { font-size: 21px; }
.stage-card .card__note { font-size: 14.5px; line-height: 1.6; }

.callout {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
}
.callout__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
.callout p { font-size: 15px; line-height: 1.65; color: var(--body-text); max-width: 1040px; }

.shop-panels {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
}
.shop-panel {
  flex-grow: 2;
  min-width: 320px;
  display: flex;
  align-items: center;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.shop-panel h3 { font-size: 16px; font-weight: 700; color: var(--ink); }
.shop-panel span { font-size: 14px; color: var(--muted); }
.shop-panel--cta {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 26px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
.shop-panel--cta:hover { background: var(--accent-hover); color: #fff; }

/* =========================================================
   Financing strip
   ========================================================= */
.financing-strip {
  padding: 44px var(--gutter);
  background: var(--section-alt);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.financing-strip__row { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.financing-strip__headline { flex-grow: 2; min-width: 320px; display: flex; flex-direction: column; gap: 8px; }
.financing-strip__headline .serif { font-size: var(--fs-serif-financing); line-height: 1.1; color: var(--ink); }
.financing-strip__headline p { font-size: 15px; color: var(--body-text); }
.financing-strip__bullets { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--body-text); }
.financing-strip__foot {
  font-size: 13px; color: var(--muted);
  border-top: 1px dashed var(--dash);
  padding-top: 12px;
}

/* =========================================================
   Catalog
   ========================================================= */
.catalog-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.catalog-head h2 { font-size: var(--fs-h2); line-height: 1.05; color: var(--ink); }
.catalog-head__col { flex-grow: 1; display: flex; flex-direction: column; gap: 12px; }
.catalog-head__link { font-size: 15px; font-weight: 700; color: var(--accent); border-bottom: 1px solid var(--accent); }
.catalog-item { display: flex; flex-direction: column; gap: 10px; }
.catalog-item__image { height: 200px; background: var(--image-bg); }
.catalog-item h3 { font-size: 18px; font-weight: 700; color: var(--ink); }
.catalog-item p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.catalog-item .cta-link { font-size: 14px; font-weight: 700; color: var(--accent); }
.catalog-foot { font-size: 13px; color: var(--muted); margin-top: 20px; }

/* =========================================================
   Quick-quote strip / lead form (shared look for both instances)
   ========================================================= */
.quick-quote {
  padding: 40px var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.quick-quote__row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.quick-quote__copy { flex-grow: 2; min-width: 340px; display: flex; flex-direction: column; gap: 7px; }
.quick-quote__copy h3 { font-size: var(--fs-h3-quote); font-weight: 800; color: var(--ink); }
.quick-quote__copy p { font-size: 15px; color: var(--muted); }

.field-zip {
  display: flex;
  align-items: center;
  height: 56px;
  width: 200px;
  padding: 0 22px;
  background: var(--page);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 16px;
}
.btn--tall { height: 56px; padding: 0 34px; font-size: 16px; font-weight: 800; }

.quick-quote__note {
  margin-top: 16px;
  font-size: 14px;
  display: none;
}
.quick-quote__note.is-visible { display: block; }
.service-note--in { color: var(--accent); }
.service-note--out { color: var(--muted); }

.pill {
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
}
.pill.is-selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-input {
  border: 1px solid var(--line);
  background: var(--page);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
}

/* =========================================================
   Process
   ========================================================= */
.process-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 30px; }
.process-item { display: flex; flex-direction: column; gap: 11px; }
.process-item__tag {
  align-self: flex-start;
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  background: var(--surface);
  color: var(--ink);
}
.process-item__tag.is-accent { background: var(--accent); color: #fff; }
.process-item h3 { font-size: var(--fs-card-h3); font-weight: 700; color: var(--ink); }
.process-item p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.process-rule { height: 3px; background: var(--hairline); margin: 30px 0; }
.process-note {
  font-size: 15px; line-height: 1.6; color: var(--body-text);
  border: 1px dashed var(--dash);
  padding: 14px 18px;
  max-width: 1040px;
}

/* =========================================================
   Specs
   ========================================================= */
.specs { display: flex; flex-wrap: wrap; gap: 44px; }
.specs__image { flex: 1 1 420px; min-width: 360px; height: 440px; background: #E0DFDA; }
.specs__content { flex: 1 1 520px; display: flex; flex-direction: column; gap: 14px; }
.specs__content h2 { font-size: var(--fs-h2-sm); line-height: 1.06; color: var(--ink); margin-bottom: 8px; }
.specs-table { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.specs-row { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 1px; background: var(--line); }
.specs-row__key { background: var(--surface); padding: 13px 16px; font-size: 14px; font-weight: 700; color: var(--ink); }
.specs-row__value { background: var(--surface); padding: 13px 16px; font-size: 14px; line-height: 1.5; color: var(--body-text); }

/* =========================================================
   Gallery by town
   ========================================================= */
.town-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.town-chip {
  padding: 11px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}
.town-chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

.gallery-mosaic { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.gallery-mosaic__main { position: relative; overflow: hidden; flex: 2 1 520px; height: 440px; background: var(--image-bg); }
.gallery-mosaic__stack { flex: 1 1 240px; display: flex; flex-direction: column; gap: 16px; }
.gallery-mosaic__stack .img-slot-wrap { position: relative; overflow: hidden; flex: 1; min-height: 212px; background: var(--image-bg); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 24px; }
.gallery-grid__item { position: relative; overflow: hidden; height: 220px; background: var(--image-bg); }
/* A real photo has its own aspect ratio, which can fight the flex/grid
   sizing above (a tall portrait shot can force its wrapper taller than
   intended). Pulling the <img> out of flow with position:absolute fixes
   that once and for all — the wrapper's size always wins, the photo
   just fills it and crops via object-fit. */
.gallery-mosaic__main img,
.gallery-mosaic__stack .img-slot-wrap img,
.gallery-grid__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Warranty
   ========================================================= */
.warranty-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-bottom: 24px; }
.warranty-panel { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--surface); border: 1px solid var(--line); }
.warranty-panel__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-strong); font-weight: 800; }
.warranty-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 15px; }
.warranty-row span:first-child { color: var(--body-text); }
.warranty-row span:last-child { color: var(--ink); font-weight: 700; }
.warranty-line { padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 15px; line-height: 1.5; color: var(--body-text); }
.warranty-chips { display: flex; gap: 16px; flex-wrap: wrap; }
.warranty-chip {
  flex: 1 1 280px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; text-align: center;
  font-size: 15px;
}
.warranty-chip--accent { background: var(--accent); color: #fff; font-weight: 800; }
.warranty-chip--outline { border: 1px solid var(--accent); color: var(--accent); font-weight: 700; }

/* =========================================================
   Reviews
   ========================================================= */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 24px; }
.reviews-head h2 { font-size: var(--fs-h2); line-height: 1.05; color: var(--ink); }
.reviews-count { display: flex; flex-direction: column; gap: 4px; padding: 14px 22px; background: var(--surface); border: 1px solid var(--line); }
.reviews-count strong { font-size: var(--fs-stat); font-weight: 800; color: var(--ink); }
.reviews-count span { font-size: 13px; color: var(--muted); }
.review-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--surface); border: 1px solid var(--line); }
.review-card__stars { font-size: 15px; color: var(--accent); letter-spacing: .14em; }
.review-card__text { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.review-card__meta { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 14px; border-top: 1px solid var(--hairline-soft); }
.review-card__meta strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.review-card__meta span { font-size: 13px; color: var(--muted); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: flex; gap: 60px; flex-wrap: wrap; }
.faq__intro { flex: 1 1 300px; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.faq__intro h2 { font-size: var(--fs-h2-sm); line-height: 1.06; color: var(--ink); }
.faq__intro p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.faq__list { flex: 1 1 620px; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); }
.faq-item__question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  background: none; border: none; cursor: pointer; text-align: left;
}
.faq-item__question span:first-child { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.faq-item__sign { font-size: 20px; color: var(--accent); font-weight: 700; }
.faq-item__answer {
  display: none;
  padding: 0 22px 20px;
  font-size: 15px; line-height: 1.65; color: var(--body-text);
  max-width: 720px;
}
.faq-item.is-open .faq-item__answer { display: block; }

/* =========================================================
   Showroom & areas
   ========================================================= */
.showroom { display: flex; flex-wrap: wrap; gap: 44px; }
.showroom__col { flex: 1 1 440px; display: flex; flex-direction: column; gap: 14px; }
.showroom__col h2 { font-size: var(--fs-h2-sm); line-height: 1.06; color: var(--ink); margin-bottom: 6px; }
.showroom__map { height: 280px; background: var(--image-bg); }
.showroom__info { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); }
.showroom__info strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.showroom__info span { font-size: 14px; color: var(--muted); }
.showroom__buttons { display: flex; gap: 12px; }
.showroom__buttons a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; font-size: 15px; }

.areas-col { flex: 1 1 480px; display: flex; flex-direction: column; gap: 12px; }
.areas-col h3 { font-size: var(--fs-h3-areas); color: var(--ink); margin-bottom: 6px; }
.area-row { display: flex; gap: 14px; align-items: stretch; }
.area-row__label { width: 150px; flex-shrink: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--ink); }
.area-row__towns { flex: 1; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--body-text); }
.areas-note { font-size: 14px; line-height: 1.6; color: var(--muted); border: 1px dashed var(--dash); padding: 12px 16px; margin-top: 4px; }

/* =========================================================
   Final form
   ========================================================= */
.final-form { border-top: 1px solid var(--hairline); }
.final-form h2 { font-size: var(--fs-h2); line-height: 1.05; color: var(--ink); max-width: 760px; margin-bottom: 24px; }
.progress-bar { display: flex; gap: 10px; margin-bottom: 40px; }
.progress-bar__seg { flex: 1; height: 6px; background: var(--hairline); }
.progress-bar__seg.is-done { background: var(--accent); }

.final-form__layout { display: flex; gap: 40px; flex-wrap: wrap; align-items: stretch; }
.final-form__step1 { flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; }
.final-form__step1 .step-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-strong); font-weight: 800; }
.final-form__step1 h3 { font-size: var(--fs-h3-step); font-weight: 800; color: var(--ink); }
.final-form__step1 .field-zip { width: auto; height: 58px; }
.final-form__step1 p.hint { font-size: 14px; color: var(--muted); }
.final-form__step1 .btn { align-self: flex-start; padding: 18px 34px; font-size: 16px; }
.final-form__privacy {
  margin-top: auto;
  font-size: 13px; line-height: 1.6; color: var(--muted);
  border: 1px dashed var(--dash);
  padding: 12px 16px;
}

.final-form__steps234 {
  flex: 1 1 620px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  transition: opacity .15s ease;
}
.final-form__steps234[data-locked="true"] { opacity: .5; pointer-events: none; }
.final-form__column { display: flex; flex-direction: column; gap: 9px; }
.final-form__column .step-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-strong); font-weight: 800; }
.photo-drop {
  display: flex; align-items: center; justify-content: center;
  height: 74px;
  border: 1px dashed var(--dash);
  font-size: 14px; color: var(--muted); text-align: center;
  cursor: pointer;
  padding: 6px;
}
.final-form__column .mini-input,
.final-form__column .pill { height: auto; }
.final-form__submit { margin-top: auto; display: flex; align-items: center; justify-content: center; padding: 15px; font-size: 15px; font-weight: 800; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  padding: 56px var(--gutter) 40px;
  background: var(--section-alt);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .serif { font-size: 22px; color: var(--ink); }
.footer-col address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--body-text); }
.footer-col small { font-size: 13px; color: var(--muted); }
.footer-col-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-strong); font-weight: 800; }
.footer-col a { font-size: 14px; color: var(--body-text); }
.footer-col p { font-size: 14px; line-height: 1.6; color: var(--body-text); }
.footer-col .btn { align-self: flex-start; }
.footer-bottom {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}

/* =========================================================
   Sticky bottom bar
   ========================================================= */
.sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 70;
  background: var(--ink);
  border-top: 1px solid var(--dark-hairline);
  padding: 14px var(--gutter);
}
.sticky-bar__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.sticky-bar__copy { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sticky-bar__copy strong { font-size: 15px; font-weight: 700; color: var(--on-dark); }
.sticky-bar__copy span { font-size: 13px; color: var(--on-dark-muted); }
.sticky-bar__chip {
  display: flex; align-items: center;
  padding: 13px 20px;
  border: 1px solid #6B6F6B;
  color: var(--on-dark);
  font-size: 14px; font-weight: 700;
  flex-shrink: 0; white-space: nowrap;
}
.sticky-bar__cta { padding: 13px 24px; font-size: 14px; font-weight: 800; flex-shrink: 0; white-space: nowrap; }
.sticky-bar__mobile { display: none; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.sticky-bar__mobile a { display: flex; align-items: center; justify-content: center; padding: 12px 6px; font-size: 13px; font-weight: 700; }
.sticky-bar__mobile .btn--outline { color: var(--on-dark); border-color: #6B6F6B; }

/* =========================================================
   Contact page
   ========================================================= */
/* The text column stops growing past 700px so the photo column gets all
   the extra space on a wide screen instead of just leaving a gap. */
.split-hero { display: grid; grid-template-columns: minmax(380px, 700px) minmax(0,1fr); border-bottom: 1px solid var(--hairline); }
.split-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 72px 48px 72px var(--gutter); background: var(--surface); }
.split-hero__copy h1 { font-size: var(--fs-contact-h1); font-weight: 600; line-height: 1.0; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.split-hero__copy p { font-size: var(--fs-body-contact); line-height: 1.6; color: var(--body-text); max-width: 560px; text-wrap: pretty; }
.split-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.contact-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 26px;
}
.contact-card--accent { background: var(--accent); color: #fff; }
.contact-card--accent:hover { color: #fff; background: var(--accent-hover); }
.contact-card--outline { border: 1px solid var(--line-strong); color: var(--ink); }
.contact-card small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.contact-card strong { font-size: 20px; font-weight: 800; }
.split-hero__hours { font-size: 14px; color: var(--muted); }
.split-hero__image { position: relative; min-width: 0; background: var(--image-bg); }

.three-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; padding: 0 var(--gutter); background: var(--hairline); border-bottom: 1px solid var(--hairline); }
.three-ways__item { background: var(--page); padding: 26px 28px; display: flex; flex-direction: column; gap: 7px; }
.three-ways__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-strong); font-weight: 800; }
.three-ways__item strong { font-size: 18px; font-weight: 800; color: var(--ink); }
.three-ways__item span { font-size: 14px; line-height: 1.55; color: var(--muted); }

.contact-layout { display: flex; gap: 44px; flex-wrap: wrap; }
.contact-form { flex: 1 1 620px; min-width: 340px; display: flex; flex-direction: column; gap: 22px; }
.contact-form h2 { font-size: var(--fs-h2-contact-form); line-height: 1.06; color: var(--ink); }
.contact-form__intro { display: flex; flex-direction: column; gap: 10px; }
.contact-form__intro p { font-size: 15px; color: var(--muted); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-strong); font-weight: 700; }
.field input, .field textarea {
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink);
}
.field input { height: 52px; }
.field textarea { min-height: 112px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.field-group { display: flex; flex-direction: column; gap: 10px; }
.field-group > span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-strong); font-weight: 700; }
.pill-lg { padding: 12px 18px; font-size: 14px; }

.photo-upload-box {
  height: 150px;
  background: #EFEEEA;
  border: 1px dashed var(--dash);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 14px; color: var(--muted);
  cursor: pointer;
  padding: 12px;
}
.contact-form__submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 4px; }
.contact-form__submit-row .btn { padding: 19px 36px; font-size: 17px; }
.contact-form__submit-note { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 340px; }

.contact-sidebar { flex: 1 1 380px; min-width: 320px; display: flex; flex-direction: column; gap: 16px; }
.contact-sidebar__map { height: 260px; background: var(--image-bg); }
.contact-sidebar__panel { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); }
.contact-sidebar__panel-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-strong); font-weight: 800; }
.contact-sidebar__address { font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.hours-table { display: flex; flex-direction: column; gap: 1px; background: var(--hairline-soft); }
.hours-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; background: var(--surface); font-size: 15px; }
.hours-row span:first-child { color: var(--muted); }
.hours-row span:last-child { color: var(--ink); font-weight: 700; }
.contact-sidebar__buttons { display: flex; gap: 10px; }
.contact-sidebar__buttons a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 15px; font-size: 15px; }
.contact-sidebar__areas { display: flex; flex-direction: column; gap: 3px; padding-bottom: 11px; border-bottom: 1px solid var(--hairline-soft); }
.contact-sidebar__areas strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.contact-sidebar__areas span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.contact-sidebar__license { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px; background: var(--section-alt); border-left: 3px solid var(--accent); }
.contact-sidebar__license-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
.contact-sidebar__license p { font-size: 14.5px; line-height: 1.6; color: var(--body-text); }

.back-to-landing { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 44px var(--gutter); background: var(--surface); border-top: 1px solid var(--hairline); }
.back-to-landing__copy { flex: 1 1 420px; min-width: 300px; display: flex; flex-direction: column; gap: 6px; }
.back-to-landing__copy .serif { font-size: var(--fs-serif-backlanding); line-height: 1.15; color: var(--ink); }
.back-to-landing__copy p { font-size: 15px; color: var(--muted); }
.compact-footer { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 28px var(--gutter); background: var(--section-alt); border-top: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }

/* =========================================================
   Responsive
   The card/column grids above all use `repeat(auto-fit, minmax(...))`,
   so they add or drop columns on their own as the screen gets wider or
   narrower — there's no pixel breakpoint to maintain for those. What's
   left here is genuine layout mode-switches (a form's three columns
   collapsing into one stacked column, the sticky bar swapping which
   version is visible) that CSS has no fluid equivalent for.
   ========================================================= */
@media (max-width: 760px) {
  /* Most horizontal spacing follows --gutter automatically (redefined to
     20px above). Only the odd-ones-out that don't use --gutter need
     overrides here. */
  .hero__content { padding-left: 20px; padding-right: 20px; }
  .hero { height: 560px; }
  .hero h1 { font-size: 40px; line-height: 1.05; }
  .hero p { font-size: 16px; }
  .split-hero, .final-form__steps234 {
    grid-template-columns: 1fr;
  }
  .wipe-box { height: 380px; }
  .split-hero__copy { padding-left: 20px; padding-right: 20px; }
  .split-hero__copy h1 { font-size: 36px; }
  .split-hero__image { height: 240px; }
  .specs-row { grid-template-columns: 1fr; }
  .sticky-bar__row { display: none; }
  .sticky-bar__mobile { display: grid; }
  .financing-strip, .quick-quote, .contact-layout, .final-form__layout { gap: 20px; }
}

/* One deliberate exception to "no pixel breakpoints": auto-fit can only
   ADD a column when there's room for another whole card, so a fixed
   count of cards can only ever settle on a column count that divides it
   evenly if we tell it to — continuous math can't jump straight from 3
   to 5. Right after the point where this grid would otherwise start
   splitting unevenly (just past the original 1440px design width), it
   snaps straight to one full row instead of sitting at an awkward
   leftover split. The catalog grid doesn't get this: 7 doesn't divide
   into anything reasonable without cards getting too narrow, so it's
   left on plain auto-fit and just accepts an uneven last row sometimes
   — same trade-off every other grid on the site already makes. If the
   door-type card count changes again, update the "5" below to match. */
@media (min-width: 1441px) {
  #doors .card-grid--3 { grid-template-columns: repeat(5, minmax(0,1fr)); }
}