/* ============================================================
   Site-wide design system — barn red & cream (from Yoder's v17)
   Fonts: Fraunces (display) + Inter (body), loaded per-page.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* palette. The variable NAMES are left over from the green-and-gold site
     this was copied from, so every page's var(--green) keeps working:
       --green*  = the barn reds (brand, dark surfaces, headings)
       --gold    = the bright barn red for small accents on light backgrounds
       --gold-bright = CREAM, for text and marks on the dark reds only
     Never put --gold-bright on a light background: it disappears. */
  --ink: #2a1f1b;
  --green: #7a1e19;          /* barn red */
  --green-2: #93281f;
  --green-deep: #4b120f;     /* darkest red: footer, menus, overlays */
  --green-soft: #f5e5dd;
  --gold: #b0352a;
  --gold-bright: #f1e0bb;    /* cream */
  --gold-soft: #efdcc6;
  --red: #8a2c2c;
  --paper: #f8f2e4;          /* cream page */
  --line: #e7dcc5;
  --muted: #6e6152;
  --white: #ffffff;

  /* the main call-to-action button: red with white words on a light
     background; the dark sections below turn it cream with red words */
  --cta-1: #c3432f;
  --cta-2: #a32f26;
  --cta-ink: #ffffff;
  --cta-glow: rgba(140, 34, 27, 0.38);
  --focus: var(--gold);

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(66, 22, 18, 0.06), 0 2px 8px rgba(66, 22, 18, 0.06);
  --shadow-md: 0 2px 6px rgba(66, 22, 18, 0.07), 0 12px 32px rgba(66, 22, 18, 0.12);
  --shadow-lg: 0 6px 16px rgba(48, 14, 11, 0.16), 0 24px 60px rgba(48, 14, 11, 0.22);

  --radius: 18px;
  --radius-sm: 12px;
  --header-h: 72px;
}

/* dark red surfaces: cream buttons and cream focus rings */
.site-header, .mobile-menu, .hero-full, .page-hero, .bigcta, .cta-bar,
.contact-card, .site-footer, #lightbox, #lb-options {
  --cta-1: #fbf2dc;
  --cta-2: #eedcb3;
  --cta-ink: #6b1a15;
  --cta-glow: rgba(0, 0, 0, 0.28);
  --focus: var(--gold-bright);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
::selection { background: var(--gold); color: #fff; }

h1, h2, h3, .page-hero h1, .section-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; margin: 0 auto; padding: 0 22px; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15.5px;
  padding: 15px 28px; border-radius: 999px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer; border: none; line-height: 1.2;
}
.btn svg { flex-shrink: 0; }
.btn-gold { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); box-shadow: 0 4px 14px var(--cta-glow); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--cta-glow); }
.btn-glass { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.45); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; transform: translateY(-2px); }

/* ============ Header / Nav ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header .header-inner {
  max-width: 1220px; margin: 0 auto; padding: 0 22px;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.site-header.solid, .site-header.scrolled {
  background: rgba(48, 14, 11, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 8px 30px rgba(48, 14, 11,0.35);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
.brand .crown { width: 30px; height: 30px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.brand-name { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: .01em; line-height: 1.05; }
.brand-name em { font-style: normal; display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-bright); }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14.5px; font-weight: 550;
  padding: 9px 13px; border-radius: 999px; transition: background .18s, color .18s;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.12); }
.nav-links a.active { color: #fff; background: rgba(255,255,255,0.14); box-shadow: inset 0 -2px 0 var(--gold-bright); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.phone-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--cta-1), var(--cta-2));
  color: var(--cta-ink); text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: transform .18s ease, box-shadow .18s ease; white-space: nowrap;
}
.phone-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--cta-glow); }
.burger {
  display: none; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px; width: 44px; height: 42px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;
  background: linear-gradient(170deg, var(--green-deep), var(--green));
  padding: calc(var(--header-h) + 26px) 30px 40px;
  display: none; flex-direction: column; gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a.mlink {
  color: #fff; text-decoration: none; font-family: var(--serif); font-size: 30px; font-weight: 500;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-menu a.mlink small { font-family: var(--sans); font-size: 12px; color: var(--gold-bright); letter-spacing: .18em; text-transform: uppercase; display: block; }
.mobile-menu .mm-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
body.menu-open { overflow: hidden; }

/* ============ HOME: hero ============ */
.hero-full { position: relative; min-height: min(92vh, 860px); display: flex; align-items: center; overflow: hidden; background: var(--green-deep); }
.hero-full picture, .hero-full .hero-img { position: absolute; inset: 0; }
.hero-full img { width: 100%; height: 100%; object-fit: cover; object-position: center 68%; animation: heroZoom 14s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(78deg, rgba(38, 10, 8, 0.84) 0%, rgba(38, 10, 8, 0.62) 34%, rgba(38, 10, 8, 0.18) 62%, rgba(38, 10, 8,0.05) 100%),
              linear-gradient(0deg, rgba(38, 10, 8, 0.55) 0%, rgba(38, 10, 8,0) 30%);
}
/* ON A PHONE, THE SAME FORMAT AS THE DESKTOP — the whole building in the
   picture, and the words sitting ON it. Alan, Aug 2026, in three passes:
   "I want the phone version photo to look like the desktop photo", then
   "I want phone version the same format like this. You can make the words
   bigger. If you have to." (holding up the desktop page), then
   "I don't want phone version to have the zoom in photo and I want words on
   the photo."

   THOSE TWO ASKS FIGHT EACH OTHER AND NO CROP SETTLES IT. The building fills
   91% of the width of the photograph, and at a fixed width a TALLER frame holds
   a NARROWER slice of a wide photo. A hero big enough for the words is ~560px
   at 390px wide, and a frame that shape can only show about 60% of the picture.
   Two things settle it together, and neither works alone:
     · THE HERO IS AS TALL AS ITS OWN WORDS AND NO TALLER (`min-height: 0`,
       below). The base rule floors it at `min(92vh, 860px)` — 776px on an
       844-tall phone — and every 100px of height it does not need is picture it
       cannot show.
     · THE PHOTOGRAPH ITSELF IS TALLER (tools/sky-extend.py). Sky is generated
       above the roofline, fitted from the real sky in the same frame and given
       the same grain, so the whole building fits a portrait crop with room for
       the words. Nothing about the BUILDING is generated.
   `object-position: center bottom` is what makes that safe at every width: the
   part that gets trimmed is always sky, never the building.

   FABRICATED GROUND WAS TRIED AND REJECTED. Generating foreground below the
   gravel let the building sit higher still, and it gave itself away — the
   mirrored gravel correlated 0.80 with the real band and repeated on a 50px
   pitch, with a ruler-straight sharpness cut across the frame. Sky is smooth
   and forgiving; gravel is texture, and texture is where a fake shows. If more
   height is ever needed below the building, do not mirror.

   THE WASH IS DARK WHERE THE WORDS ARE AND CLEARS OVER THE BUILDING. That is
   what the desktop's diagonal does, and it is the whole trick: a flat
   full-height wash reaches the same contrast numbers and turns the photograph
   to dusk, which is a hero protecting its text by making the product look bad.
   Tuned by rendering the page with the words hidden and sampling the pixels
   behind each line. */
@media (max-width: 640px) {
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(38, 10, 8, 0.62) 0%,     /* the logo and the menu, on sky */
      rgba(38, 10, 8, 0.79) 18%,    /* BOTH lines of the eyebrow — gold on sky
                                        is the tightest pairing on the page and
                                        the one with the least headroom */
      rgba(38, 10, 8, 0.74) 44%,    /* the headline */
      rgba(38, 10, 8, 0.54) 60%,    /* the small print, over the roof */
      rgba(38, 10, 8, 0.18) 78%,    /* let the building be the building */
      rgba(38, 10, 8, 0.30) 100%);
  }
  /* THE GLASS BUTTON WAS THE WORST-READING THING ON THE PAGE and had been all
     along: a mostly-white translucency over an unpredictable photograph, and
     its white label was crossing the shed's pale corner post at about 1.4:1.
     A real tint under the blur fixes it wherever the picture happens to land.
     Phone only — on the desktop it sits over the darkened left side. */
  .btn-glass { background: rgba(14, 22, 20, 0.62); }
  /* THE PHOTO IS ANCHORED TO ITS BOTTOM — see the note above — AND THE ZOOM IS
     OFF, which is the same rule stated twice. heroZoom scales the image to
     1.08 about its centre; on a 564px-tall box that pushes the bottom edge
     22.6px past `overflow: hidden`, and the picture now ends AT the building's
     base, so for fourteen seconds the shed would run off the bottom of the
     screen with its ground line gone. `bottom` only guarantees "sky is what
     gets trimmed" while nothing is transforming the image. */
  .hero-full img { object-position: center bottom; animation: none; transform: none; }
}
/* A 320px PHONE IS A DIFFERENT COMPOSITION, so it needs its own wash. The
   headline wraps to THREE lines there, which makes the hero 606px instead of
   564px — so every percentage stop above lands ~7% higher up the picture than
   it was tuned for, and the small print drops out of the dark band into the
   fade. Measured: the sub falls to 3.9:1 and the eyebrow to the wrong side of
   4.5. Nothing is wrong with the profile; it is being asked to cover a taller
   box. This is the same gradient stretched to fit.

   It gets its own block rather than px-based stops, because px stops that hold
   at 320 would drag the clear region down the picture at 390 too — and dimming
   the shed on the phone almost everybody has, to fix the one almost nobody has,
   is the wrong trade. */
@media (max-width: 340px) {
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(38, 10, 8, 0.62) 0%,
      rgba(38, 10, 8, 0.81) 17%,
      rgba(38, 10, 8, 0.79) 46%,
      rgba(38, 10, 8, 0.68) 66%,
      rgba(38, 10, 8, 0.20) 85%,
      rgba(38, 10, 8, 0.32) 100%);
  }
}
.hero-content { position: relative; z-index: 2; max-width: 1220px; margin: 0 auto; padding: calc(var(--header-h) + 40px) 22px 110px; width: 100%; }
.hero-content .inner { max-width: 640px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold-bright); font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 1.5px; background: var(--gold-bright); }
.hero-content h1 {
  color: #fff; font-size: clamp(42px, 6.2vw, 74px); font-weight: 550;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero-content h1 .accent { color: var(--gold-bright); font-style: italic; }
.hero-sub { color: rgba(255,255,255,0.88); font-size: clamp(16px, 1.6vw, 19px); margin-top: 18px; max-width: 480px; line-height: 1.65; }
.hero-ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* trust bar overlapping hero */
.trustbar { position: relative; z-index: 5; max-width: 1120px; margin: -68px auto 0; padding: 0 22px; }
.trustbar .tb-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: repeat(4, 1fr);
  overflow: hidden; border: 1px solid rgba(227, 221, 207, 0.6);
}
.tb-item { padding: 24px 22px; display: flex; gap: 14px; align-items: flex-start; }
.tb-item + .tb-item { border-left: 1px solid var(--line); }
.tb-item svg { flex-shrink: 0; margin-top: 2px; }
.tb-item strong { display: block; font-size: 15px; font-weight: 650; color: var(--green); line-height: 1.3; }
.tb-item span { font-size: 13px; color: var(--muted); line-height: 1.45; display: block; margin-top: 3px; }

/* ============ sections ============ */
.site-section { padding: 84px 0; }
.site-section.alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; padding: 0 22px; }
.section-head .kicker, .kicker {
  display: inline-block; color: var(--gold); font-size: 12.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px;
}
.section-head h2 { font-size: clamp(30px, 3.6vw, 44px); color: var(--green); }
.section-head p { font-size: 16.5px; color: var(--muted); margin-top: 14px; line-height: 1.65; }

/* ============ HOME: 3 steps ============ */
.step-cards { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
/* The ticker's track is width:max-content. Without this the grid column
   sizes to it and the card stretches to thousands of pixels. */
.step-cards > li { min-width: 0; }
.step-cards a {
  display: block; height: 100%; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 30px 30px; text-decoration: none;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.step-cards a:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.step-cards .num {
  font-family: var(--serif); font-size: 64px; font-weight: 500; line-height: 1;
  color: var(--gold-soft); position: absolute; top: 18px; right: 24px;
  transition: color .22s ease;
}
.step-cards a:hover .num { color: var(--gold); }
.step-cards .icon {
  width: 54px; height: 54px; border-radius: 14px; background: var(--green-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.step-cards h3 { font-size: 23px; color: var(--green); margin-bottom: 8px; }
.step-cards p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.step-cards .go { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 650; font-size: 14.5px; color: var(--gold); }
.step-cards a:hover .go { text-decoration: underline; text-underline-offset: 3px; }

/* ============ HOME: style grid ============ */
.stylegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.stylegrid a {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  text-decoration: none; background: var(--green-deep); box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease; aspect-ratio: 4 / 3.1;
}
.stylegrid a:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.stylegrid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.stylegrid a:hover img { transform: scale(1.06); }
.stylegrid .veil { position: absolute; inset: 0; background: linear-gradient(5deg, rgba(38, 10, 8,0.82) 0%, rgba(38, 10, 8,0.25) 42%, rgba(38, 10, 8,0.02) 65%); }
.stylegrid .label { position: absolute; left: 22px; right: 22px; bottom: 18px; color: #fff; }
.stylegrid .label h3 { font-size: 23px; font-weight: 550; }
.stylegrid .label p { font-size: 13.5px; color: var(--gold-bright); font-weight: 650; margin-top: 3px; letter-spacing: .02em; }
.stylegrid .arrow {
  position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.stylegrid a:hover .arrow { background: var(--gold); border-color: var(--gold); transform: translateX(3px); }
.stylegrid a.wide { grid-column: 1 / -1; aspect-ratio: auto; min-height: 240px; }
.stylegrid a.wide .label h3 { font-size: 28px; }
.stylegrid .tag {
  position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,0.92); color: var(--green);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}

/* ============ HOME: family band ============ */
.family-band { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.family-photo { position: relative; }
.family-photo img { border-radius: var(--radius); box-shadow: var(--shadow-md); position: relative; z-index: 1; }
.family-photo::after {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 2px solid var(--gold); border-radius: var(--radius); z-index: 0;
}
.family-copy h2 { font-size: clamp(30px, 3.4vw, 42px); color: var(--green); margin: 12px 0 18px; }
.family-copy > p { font-size: 16.5px; color: var(--ink); line-height: 1.75; margin-bottom: 14px; }
.family-copy .sig { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 15.5px; }
.family-points { list-style: none; margin: 22px 0 26px; display: grid; gap: 12px; }
.family-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.family-points svg { flex-shrink: 0; margin-top: 3px; }

/* ============ designer ============ */
.designer-frame { max-width: 1120px; margin: 0 auto; height: 680px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-md); }
.designer-frame iframe { width: 100%; height: 100%; border: none; }
.designer-fallback { text-align: center; margin-top: 20px; }
.designer-fallback a { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: 999px; transition: background .2s, transform .2s; }
.designer-fallback a:hover { background: var(--green-2); transform: translateY(-2px); }

/* ============ HOME: gallery strip ============ */
.strip-wrap { position: relative; }
.strip { display: flex; gap: 16px; overflow-x: auto; padding: 6px 22px 22px; scroll-snap-type: x mandatory; max-width: 1220px; margin: 0 auto; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
.strip img { height: 320px; width: auto; border-radius: var(--radius-sm); scroll-snap-align: start; flex-shrink: 0; box-shadow: var(--shadow-sm); transition: transform .25s ease; }
.strip img:hover { transform: translateY(-4px); }
.strip .strip-more {
  flex-shrink: 0; width: 240px; height: 320px; border-radius: var(--radius-sm); scroll-snap-align: start;
  background: var(--green); color: #fff; text-decoration: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; font-family: var(--serif); font-size: 21px;
  transition: background .2s ease;
}
.strip .strip-more:hover { background: var(--green-2); }

/* ============ HOME: big CTA ============ */
.bigcta { background: radial-gradient(1000px 500px at 78% -10%, rgba(241, 224, 187, 0.14), transparent 60%), linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%); padding: 96px 22px; text-align: center; }
.bigcta h2 { color: #fff; font-size: clamp(34px, 4.4vw, 56px); max-width: 700px; margin: 0 auto; text-wrap: balance; }
.bigcta p { color: rgba(255,255,255,0.82); font-size: 17px; margin: 18px auto 34px; max-width: 520px; }
.bigcta .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============ subpage hero ============ */
.page-hero {
  background: radial-gradient(900px 400px at 82% 120%, rgba(241, 224, 187, 0.12), transparent 60%), linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
  color: #fff; text-align: center; padding: calc(var(--header-h) + 54px) 22px 60px;
}
.page-hero h1 { font-size: clamp(32px, 4.2vw, 50px); text-wrap: balance; max-width: 820px; margin: 0 auto; }
.page-hero p { font-size: 16px; color: rgba(255,255,255,0.82); margin: 14px auto 0; max-width: 640px; line-height: 1.65; }

/* ============ prose / generic ============ */
.prose { max-width: 720px; margin: 0 auto; padding: 0 22px; font-size: 16.5px; line-height: 1.75; }
.prose h2 { font-size: 28px; color: var(--green); margin: 34px 0 12px; }
.prose h3 { font-size: 20px; color: var(--green); margin: 22px 0 8px; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 12px 0 16px 22px; }
.prose li { margin-bottom: 7px; }
.prose .highlight { background: var(--green-soft); border-left: 3px solid var(--gold); border-radius: 10px; padding: 14px 18px; font-size: 15px; color: var(--green); margin: 14px 0; }

.cat-nav { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 860px; margin: 0 auto 34px; padding: 0 22px; }
.cat-nav a {
  font-size: 13.5px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--green); text-decoration: none; font-weight: 600;
  transition: all .18s ease; box-shadow: var(--shadow-sm);
}
.cat-nav a:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-2px); }

.style-category { margin: 0 auto 56px; max-width: 1120px; padding: 0 22px; }
.style-category h2 { font-size: 30px; color: var(--green); margin-bottom: 20px; border-bottom: 2px solid var(--line); padding-bottom: 12px; }
.style-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.style-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease;
}
.style-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.style-card > img { width: 100%; height: 190px; object-fit: contain; padding: 10px; background: #ffffff; border-bottom: 1px solid var(--line); }
.style-card .body { padding: 20px 22px 22px; }
.style-card h3 { font-size: 20px; color: var(--green); margin-bottom: 6px; }
.style-card .desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }

.price-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13.5px; }
.price-table th { background: var(--green); color: #fff; padding: 8px 12px; text-align: left; font-weight: 600; }
.price-table th:first-child { border-radius: 8px 0 0 0; }
.price-table th:last-child { border-radius: 0 8px 0 0; }
/* Group headings inside a price table (Doors / Windows / Inside on the price
   sheet's options table). Not the table's own header row, so they must not
   wear the solid green bar -- a paper-coloured band with the green text reads
   as a divider instead of a second start. */
.price-table .po-group th {
  background: var(--paper); color: var(--green); border-radius: 0;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 12px 6px;
}
.price-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); }
.price-table tr:nth-child(even) td { background: var(--paper); }
/* THE RENT-TO-OWN COLUMN (Aug 2026) made these three columns wide instead of
   two, and on a 360px phone the padding alone pushed the table a few pixels
   past its card. Tightening the side padding on narrow screens buys back more
   than enough; the type stays the same size, so nothing gets harder to read. */
@media (max-width: 400px) {
  .price-table th, .price-table td { padding-left: 8px; padding-right: 8px; }
}
/* Sizes folded up by width on the Styles & Prices cards. Each width is a row
   you tap open and tap shut; they open independently, so you can have the 10
   and the 12 up together to compare. <details> handles the opening itself. */
.size-groups { margin: 10px 0 2px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.size-group + .size-group { border-top: 1px solid var(--line); }
.size-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; background: #fff;
  font-size: 14.5px; font-weight: 650; color: var(--green);
}
.size-group > summary::-webkit-details-marker { display: none; }
/* The chevron: points right when shut, down when open. */
.size-group > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 7px; height: 7px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg); transition: transform .18s ease; position: relative; top: -2px;
}
.size-group[open] > summary::after { transform: rotate(45deg); top: -3px; }
.size-group[open] > summary { background: var(--paper); }
.size-group > summary:hover { background: var(--paper); }
.size-group .sg-meta { font-size: 12px; font-weight: 500; color: var(--muted); }
.size-group .price-table { margin: 0; border-top: 1px solid var(--line); }
.size-group .price-table th { border-radius: 0; }
.size-group .price-table tr:last-child td { border-bottom: none; }

.price-note { font-size: 12px; color: var(--gold); font-weight: 650; margin-top: 10px; }
.card-disclaimer { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ============ FAQ ============ */
.faq-list { max-width: 760px; margin: 0 auto; padding: 0 22px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease; }
.faq-item[open] { box-shadow: var(--shadow-md); border-color: var(--gold); }
.faq-item summary { cursor: pointer; list-style: none; font-size: 16px; font-weight: 650; color: var(--green); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 19px; color: var(--gold); flex-shrink: 0; width: 30px; height: 30px;
  border: 1.5px solid var(--gold); border-radius: 999px; display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .2s ease, color .2s ease; font-family: var(--sans); font-weight: 500;
}
.faq-item[open] summary::after { content: "\2212"; background: var(--gold); color: #fff; }
.faq-item .ans { padding: 0 22px 20px; font-size: 15px; line-height: 1.7; }
.faq-item .ans h3 { font-size: 16px; color: var(--green); margin: 12px 0 6px; }
.faq-item .ans ul { margin: 8px 0 8px 20px; }
.faq-item .ans li { margin-bottom: 5px; }
.faq-item .ans .highlight { background: var(--green-soft); border-left: 3px solid var(--gold); border-radius: 8px; padding: 12px 14px; font-size: 13.5px; color: var(--green); margin: 10px 0; }

/* ============ misc shared ============ */
.cta-bar { max-width: 760px; margin: 40px auto 0; background: linear-gradient(160deg, var(--green), var(--green-deep)); border-radius: var(--radius); padding: 30px 26px; text-align: center; box-shadow: var(--shadow-md); }
.cta-bar p { color: #fff; font-size: 16px; margin-bottom: 16px; font-family: var(--serif); }
.cta-bar a { display: inline-block; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; padding: 12px 24px; border-radius: 999px; margin: 4px; transition: background .2s ease, transform .2s ease; }
.cta-bar a:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); }
.cta-bar a.gold { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: transparent;  color: var(--cta-ink); }

.contact-card { max-width: 600px; margin: 0 auto; background: linear-gradient(160deg, var(--green), var(--green-deep)); border-radius: var(--radius); padding: 40px 30px; text-align: center; color: #fff; box-shadow: var(--shadow-md); }
.contact-card h2 { font-size: 28px; }
.contact-card p { font-size: 15px; color: rgba(255,255,255,0.85); margin-top: 10px; line-height: 1.65; }
.contact-card a.email-btn { display: inline-block; margin: 18px 5px 0; background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); text-decoration: none; font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); transition: transform .18s ease; }
.contact-card a.email-btn:hover { transform: translateY(-2px); }

.area-grid { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 760px; margin: 20px auto 0; padding: 0 22px; }
.area-grid span { font-size: 13.5px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; color: var(--green); font-weight: 600; box-shadow: var(--shadow-sm); }

.breadcrumb { font-size: 12.5px; color: var(--muted); padding: 14px 22px 0; max-width: 1120px; margin: 0 auto; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); }

/* ============ footer ============ */
.site-footer { background: var(--green-deep); color: rgba(255,255,255,0.75); font-size: 14px; }
.footer-grid { max-width: 1120px; margin: 0 auto; padding: 64px 22px 40px; display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 48px; }
.footer-grid h4 { font-family: var(--sans); color: var(--gold-bright); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; }
.footer-brand .brand-name { font-size: 22px; }
.footer-brand p { margin-top: 14px; line-height: 1.7; max-width: 330px; }
.footer-links { list-style: none; display: grid; gap: 9px; }
.footer-links a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color .15s ease; }
.footer-links a:hover { color: var(--gold-bright); }
.footer-contact { display: grid; gap: 12px; align-content: start; }
.footer-contact a { color: #fff; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.footer-contact a:hover { color: var(--gold-bright); }
.footer-contact .small { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.footer-bottom .fb-inner { max-width: 1120px; margin: 0 auto; padding: 20px 22px 26px; font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.7; }
.footer-bottom a { color: rgba(255,255,255,0.6); }

/* ============ reveal on scroll ============ */
/* Fail-open design: content is ALWAYS visible by default. The hidden state
   only applies when app.js confirms animations can run (html.js-anim),
   and app.js also force-reveals everything after a short timeout. */
html.js-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
html.js-anim .reveal.visible { opacity: 1; transform: none; }
html.js-anim .stylegrid a.reveal, html.js-anim .step-cards a { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .7s ease; }
html.js-anim .reveal.d1 { transition-delay: .08s; } html.js-anim .reveal.d2 { transition-delay: .16s; } html.js-anim .reveal.d3 { transition-delay: .24s; }
html.js-anim .reveal.visible.d1, html.js-anim .reveal.visible.d2, html.js-anim .reveal.visible.d3 { transition-delay: 0.08s; }
@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .hero-full img { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============ responsive ============ */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .step-cards { grid-template-columns: 1fr; max-width: 620px; }
  .stylegrid { grid-template-columns: repeat(2, 1fr); }
  .family-band { grid-template-columns: 1fr; gap: 44px; }
  .family-photo { max-width: 520px; }
  .trustbar .tb-card { grid-template-columns: repeat(2, 1fr); }
  .tb-item:nth-child(3) { border-left: none; }
  .tb-item:nth-child(1), .tb-item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .site-section { padding: 60px 0; }
  .phone-btn span { display: none; }
  .phone-btn { padding: 11px 13px; }
  /* NO FLOOR. The base rule is `min-height: min(92vh, 860px)` — 776px on an
     844-tall phone — and the hero only needs about 564px for its words. Every
     100px of height it does not need is picture it cannot show, because a
     taller frame at a fixed width holds a narrower slice of a wide photograph. */
  .hero-full { min-height: 0; }
  /* THE TRUST BAR STOPS SITTING ON THE BUILDING. It overlaps the hero by 84px
     by design, which is fine over a photo used as a background — but the phone
     photo now ends AT the building's base, so 84px of overlap was cutting the
     bottom off the shed and the door. A smaller overlap here, and the hero gets
     64px shorter into the bargain, which is 64px more picture. */
  /* AND THE DEAD GAP UNDER THE LOGO IS GONE. The top padding cleared a fixed
     header; 40px past the header was a band of empty sky between the wordmark
     and the eyebrow. Closing it moves the whole text block up into the darker
     part of the wash AND shortens the hero, which is more picture again. */
  .hero-content { padding-top: calc(var(--header-h) + 16px); padding-bottom: 56px; }
  /* THE WORDS ARE BIGGER, as Alan offered — and THESE TWO LIVE DOWN HERE FOR A
     REASON. `.eyebrow` and `.hero-sub` are declared further up the file than
     the phone hero block but LATER than it in source order, and a media query
     adds no specificity — so setting them up there did nothing at all, at every
     phone width. Exactly the trap `.hero-content`'s padding fell into one
     screen above. If you move them back up, they stop working silently. */
  .eyebrow { font-size: 13px; }
  .hero-sub { font-size: 17.5px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .trustbar { margin-top: -28px; }
  .trustbar .tb-card { grid-template-columns: 1fr 1fr; }
  .tb-item { padding: 16px 14px; flex-direction: column; gap: 8px; }
  .tb-item + .tb-item { border-left: none; }
  .tb-item:nth-child(odd) { border-left: none; }
  .tb-item:nth-child(1), .tb-item:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ============ quote form ============ */
.quote-form { max-width: 620px; margin: 0 auto; padding: 30px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.quote-form label { display: block; font-size: 13.5px; font-weight: 650; color: var(--green); margin-bottom: 16px; }
.quote-form input { display: block; width: 100%; margin-top: 6px; padding: 13px 15px; font: inherit; font-size: 15.5px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; }
.quote-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 53, 42, 0.18); background: #fff; }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* The texting opt-in on the quote form. A checkbox and its wording, laid out
   so the words sit beside the box rather than under it — the carriers read
   this page before they approve the number, and it has to be plainly legible
   rather than fine print. The label rules above make every label a block with
   a bold green line, which is wrong for a sentence, so this overrides them. */
/* `.quote-form label` sets every label bold and green, and beats a bare
   `.qf-consent` on specificity — which rendered this sentence as a heading.
   Matching label with the class keeps it a sentence. */
.quote-form label.qf-consent { display: flex; align-items: flex-start; gap: 11px;
  margin: -2px 0 18px; font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--muted); }
.quote-form label.qf-consent input[type="checkbox"] { display: block; flex: 0 0 auto;
  width: 20px; height: 20px; margin: 1px 0 0; padding: 0; accent-color: var(--green); }
.quote-form label.qf-consent a { color: var(--green); text-decoration: underline; }
.qf-hide { display: none; }
.qf-submit { width: 100%; justify-content: center; margin-top: 4px; }
.qf-note { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; }
@media (max-width: 560px) { .qf-row { grid-template-columns: 1fr; gap: 0; } }

/* ============ quote form v2: split layout ============ */
.quote-wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.quote-pitch h2 { font-size: clamp(30px, 3.4vw, 42px); color: var(--green); margin: 10px 0 14px; }
.qp-lead { font-size: 16.5px; color: var(--muted); line-height: 1.7; max-width: 400px; }
.qp-points { list-style: none; margin: 22px 0 26px; display: grid; gap: 12px; }
.qp-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.qp-points svg { flex-shrink: 0; margin-top: 2px; }
.qp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .quote-wrap { grid-template-columns: 1fr; gap: 34px; }
  .quote-pitch { text-align: center; }
  .qp-lead { margin: 0 auto; }
  .qp-points { max-width: 360px; margin-left: auto; margin-right: auto; text-align: left; }
  .qp-actions { justify-content: center; }
}

/* ============ header email button ============ */
.hdr-mail {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; text-decoration: none; font-weight: 650; font-size: 14px;
  padding: 9px 16px; border: 1.5px solid rgba(255,255,255,0.55); border-radius: 999px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.hdr-mail:hover { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: transparent; transform: translateY(-2px);  color: var(--cta-ink); }
@media (max-width: 1150px) { .hdr-mail span { display: none; } .hdr-mail { padding: 10px 12px; } }
@media (max-width: 1020px) { .hdr-mail { display: none; } }

/* ============ contact choice popup ============ */
.contact-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.contact-modal[hidden] { display: none; }
.cm-backdrop { position: absolute; inset: 0; background: rgba(48, 14, 11, 0.55); backdrop-filter: blur(3px); animation: cmFade .25s ease; }
.cm-card {
  position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-width: 430px; width: 100%; padding: 30px 28px 26px; animation: cmPop .3s cubic-bezier(.2,.9,.3,1.2);
}
.cm-card h3 { font-size: 26px; color: var(--green); margin: 6px 0 8px; }
.cm-sub { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.cm-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 999px;
  border: none; background: var(--paper); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.cm-close:hover { background: var(--green-soft); color: var(--green); }
.cm-options { display: grid; gap: 10px; }
.cm-options a {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 16px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cm-options a:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cm-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--green-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cm-txt b { display: block; font-size: 15.5px; color: var(--green); font-weight: 650; line-height: 1.25; }
.cm-txt small { font-size: 12.5px; color: var(--muted); }
.cm-options a.cm-gold { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); border-color: transparent;  color: var(--cta-ink); }
.cm-options a.cm-gold .cm-ic { background: rgba(255,255,255,0.2); }
.cm-options a.cm-gold svg path { stroke: #fff; }
.cm-options a.cm-gold .cm-txt b { color: #fff; }
.cm-options a.cm-gold .cm-txt small { color: rgba(255,255,255,0.85); }
.cm-options a.cm-gold:hover { box-shadow: 0 8px 22px rgba(140, 34, 27,0.45); }
@keyframes cmFade { from { opacity: 0; } }
@keyframes cmPop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
body.cm-open { overflow: hidden; }
@media (max-width: 560px) {
  .contact-modal { padding: 0; align-items: flex-end; }
  .cm-card { max-width: none; border-radius: 22px 22px 0 0; animation: cmSheet .3s ease; }
  @keyframes cmSheet { from { transform: translateY(40px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .cm-backdrop, .cm-card { animation: none; } }

/* ============ texting terms popup ============
   Shown when somebody taps any "Text us" link. Reuses the contact popup's
   card so it looks like the rest of the site; only the innards differ. */
.tc-modal { z-index: 260; }                       /* above the contact popup */
.tc-modal .cm-card { max-width: 460px; }
.tc-terms { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.tc-terms li {
  position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.55; color: var(--ink);
}
.tc-terms li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 999px;
  background: var(--green-soft) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m5 13 5 5L20 7' stroke='%232f6b45' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}
.tc-terms b { font-weight: 700; color: var(--green); }
.tc-actions { display: grid; gap: 8px; }
.tc-actions .tc-go { width: 100%; justify-content: center; border: none; cursor: pointer; font-size: 15.5px; }
.tc-no {
  border: none; background: none; cursor: pointer; padding: 9px; font: inherit;
  font-size: 14px; color: var(--muted); border-radius: 10px; transition: background .15s ease, color .15s ease;
}
.tc-no:hover { background: var(--paper); color: var(--green); }
.tc-fine { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: center; }
.tc-fine a { color: var(--green); }
@media (max-width: 560px) { .tc-modal .cm-card { max-width: none; } }

/* ============================================================
   BUILDING OPTIONS POPUP  (Gallery + Styles & Prices + detail pages)
   ============================================================ */
.bm-card { max-width: 520px; }
.bm-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding-right: 30px; }
.bm-thumb {
  width: 76px; height: 62px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; flex-shrink: 0;
}
.bm-kicker { margin-bottom: 2px; }
.bm-head h3.bm-name { font-size: 23px; color: var(--green); margin: 2px 0 2px; line-height: 1.15; }
.bm-tag { font-size: 13px; color: var(--muted); margin: 0; }
.bm-options a { padding: 12px 14px; }
.bm-options .cm-ic { width: 38px; height: 38px; border-radius: 10px; color: var(--gold); }
.bm-options a.cm-gold .cm-ic { color: #fff; }
.bm-options a.cm-gold svg path,
.bm-options a.cm-gold svg rect,
.bm-options a.cm-gold svg circle { stroke: #fff; }
.bm-options a.cm-gold svg circle[fill], .bm-options a.cm-gold svg path[fill] { fill: #fff; }

.bm-reach { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.bm-reach > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 9px; text-align: center; }
.bm-reach-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.bm-reach-row a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px; border: 1.5px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--green); font-weight: 650; font-size: 13.5px;
  background: #fff; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.bm-reach-row a:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---- "tap for options" affordances ---- */
.tap-hint {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(26,58,42,0.82); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; padding: 4px 10px; border-radius: 10px; pointer-events: none;
}
.card-photo { position: relative; display: block; width: 100%; border: none; padding: 0; background: none; cursor: pointer; }
.card-photo img { width: 100%; height: 190px; object-fit: contain; padding: 10px; background: #fff; border-bottom: 1px solid var(--line); display: block; }
.card-photo .tap-hint { position: absolute; left: 10px; bottom: 16px; }
.card-photo:hover .tap-hint { background: var(--gold); }
.style-card .card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.style-card .card-actions a, .style-card .card-actions button {
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  padding: 9px 15px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid var(--line); background: #fff; color: var(--green);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.style-card .card-actions a:hover, .style-card .card-actions button:hover {
  background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-2px);
}
.style-card .card-actions .ca-gold { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); border-color: transparent; }
.style-card .card-actions .ca-gold:hover { background: var(--gold); border-color: transparent; }

/* lightbox "options" button */
#lb-options {
  margin-top: 14px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink);
  border: none; padding: 12px 24px; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); display: inline-flex; align-items: center; gap: 8px;
}
#lb-options:hover { transform: translateY(-2px); }
#lb-img { cursor: pointer; }
#lb-tap { color: #f1d9cf; font-size: 12.5px; margin-top: 8px; }

/* ============================================================
   BUILDING DETAIL PAGES
   ============================================================ */
.bd-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 46px; align-items: start; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.bd-shot { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 16px; box-shadow: var(--shadow-sm); }
.bd-shot img { width: 100%; border-radius: var(--radius-sm); display: block; }
.bd-shot .bd-cap { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 10px; }
.bd-lead { font-size: 17px; line-height: 1.75; color: var(--ink); margin-bottom: 16px; }
.bd-who { background: var(--green-soft); border-left: 3px solid var(--gold); border-radius: 10px; padding: 15px 18px; font-size: 15px; line-height: 1.65; color: var(--green); margin-bottom: 22px; }
.bd-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.bd-price b { font-family: var(--serif); font-size: 40px; color: var(--green); line-height: 1; }
.bd-price span { font-size: 13.5px; color: var(--muted); }
.bd-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 6px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 6px 0 4px; }
.spec-table th { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; color: var(--green); font-weight: 700; white-space: nowrap; width: 33%; border-bottom: 1px solid var(--line); }
.spec-table td { padding: 12px 0; color: var(--ink); line-height: 1.6; border-bottom: 1px solid var(--line); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

.check-list { list-style: none; display: grid; gap: 11px; margin: 6px 0 0; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; }
.check-list li::before {
  content: ""; flex-shrink: 0; margin-top: 5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm); }
.panel h3 { font-size: 21px; color: var(--green); margin-bottom: 14px; }
.panel p { font-size: 15px; line-height: 1.7; color: var(--ink); }
.panel + .panel { margin-top: 22px; }

.bd-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.bd-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .2s; display: block; }
.bd-photos img:hover { transform: translateY(-3px); }
.bd-nophoto { text-align: center; color: var(--muted); font-size: 15px; padding: 0 22px; }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.rel-grid a { display: block; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.rel-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.rel-grid img { width: 100%; height: 130px; object-fit: contain; background: #fff; padding: 8px; display: block; }
.rel-grid b { display: block; padding: 11px 13px 4px; font-size: 14.5px; color: var(--green); }
.rel-grid small { display: block; padding: 0 13px 13px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 900px) {
  .bd-top { grid-template-columns: 1fr; gap: 28px; }
  .two-col { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .bm-head h3.bm-name { font-size: 20px; }
  .bm-thumb { width: 62px; height: 52px; }
  .panel { padding: 22px 20px; }
  .bd-price b { font-size: 34px; }
}

/* anchor links from the popup shouldn't land under the fixed header */
.style-card { scroll-margin-top: 96px; }
.style-category { scroll-margin-top: 84px; }

/* popup must never push wider than a phone screen */
.bm-modal .cm-card { min-width: 0; max-height: 92vh; overflow-y: auto; }
.bm-card, .bm-head, .bm-head > div, .bm-options a, .bm-options .cm-txt,
.bm-reach-row a, .bm-reach-row a span { min-width: 0; }
.bm-options .cm-txt b, .bm-options .cm-txt small { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .bm-card { max-width: none; }
  .bm-options a { padding: 11px 12px; gap: 11px; }
  .bm-options .cm-txt small { font-size: 12px; }
  /* leave room for the caption + options button under the photo */
  #lb-img { max-height: 54vh; }
  #lb-caption { font-size: 14px; margin-top: 9px; }
  #lb-prev, #lb-next { padding: 10px 13px; font-size: 24px; }
  #lb-options { font-size: 13.5px; padding: 11px 18px; margin-top: 11px; }
  #lb-tap { font-size: 11.5px; margin-top: 6px; }
}

/* the building popup must sit ABOVE the gallery lightbox */
.bm-modal { z-index: 1100; }
/* grid items must be allowed to shrink, or a wide photo blows the column out */
.bd-top > *, .two-col > * { min-width: 0; }
.bd-shot img, .rel-grid img, .bd-photos img { max-width: 100%; height: auto; }
.bd-shot img { aspect-ratio: 4/3; object-fit: contain; background: #fff; }
.rel-grid img { height: 130px; object-fit: contain; }
.bd-photos img { aspect-ratio: 4/3; object-fit: cover; height: auto; }
.spec-table, .price-table { table-layout: fixed; }
.spec-table th { white-space: normal; }

/* ---- phone layout rules that were lost when styles.css got truncated ---- */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 22px 32px; }
  .footer-brand p { max-width: none; }
  .quote-wrap { grid-template-columns: 1fr; gap: 30px; }
  .qf-row { grid-template-columns: 1fr; }
  .style-cards { grid-template-columns: 1fr; }
  .stylegrid { grid-template-columns: 1fr; }
  .designer-frame { height: 540px; }
  .strip img { height: 220px; }
  .section-head h2 { font-size: 27px; }
  .style-category h2 { font-size: 25px; }
  .bd-actions .btn, .bigcta .cta-row .btn { width: 100%; justify-content: center; }
}

/* ============ added Aug 2026: areas, guides, review page ============ */
.area-grid a { font-size: 13.5px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; color: var(--green); font-weight: 600; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.area-grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.city-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.city-grid a { padding: 4px 0 2px; }
.city-grid b { font-size: 16px; padding-top: 14px; }
.city-grid small { font-size: 13px; line-height: 1.5; padding-bottom: 16px; }
.src-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 18px; }
.src-note a { color: var(--muted); }
.prose .price-table { width: 100%; }
.review-options { max-width: 720px; margin: 26px auto; padding: 0 22px; display: grid; gap: 14px; }
.review-btn { display: block; text-decoration: none; border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-md); color: #fff; background: linear-gradient(160deg, var(--green), var(--green-deep)); transition: transform .18s ease; }
.review-btn:hover { transform: translateY(-2px); }
.review-btn b { display: block; font-size: 19px; }
.review-btn small { display: block; font-size: 13px; opacity: .85; margin-top: 4px; }
.review-google { background: linear-gradient(180deg, var(--cta-1), var(--cta-2));  color: var(--cta-ink); }
.review-fallback { font-size: 15px; line-height: 1.7; color: var(--ink); background: var(--green-soft); border-radius: 10px; padding: 14px 18px; }
.review-fallback-small { font-size: 13px; }
.home-guides { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ---- the red savings banner (home + Styles & Prices) --------------------
   Red and white on a site that is otherwise green and gold, on purpose: a
   sale has to read as a sale at a glance, and reusing the brand colours here
   would make it look like another content card. Rendered by app.js from
   YSB_CONFIG.savings so both pages say the same thing. */
.savings{
  background:#a8201a; color:#fff; border-radius:14px;
  padding:14px 20px; margin:0 auto 28px; max-width:960px;
  box-shadow:0 6px 18px rgba(168,32,26,.22);
  text-align:center;
  font-family:var(--font-display,Georgia,serif);
  font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:700; letter-spacing:.01em;
}

/* ---- the in-card strip, on the home page --------------------------------
   Alan wants the sale riding inside the "See styles & prices" card, tucked
   between the icon and the heading. The card keeps exactly the width the grid
   gave it -- the strip bleeds sideways by the card's own 30px padding so it
   touches the card edges, and the card's overflow:hidden trims it to the
   rounded corners for free. No shadow: this one sits ON a card rather than on
   the page, and a shadow there reads as a mistake.

   Same offer, with the card's smaller type. */
.savings-incard{
  margin:2px -30px 18px; border-radius:0; box-shadow:none;
  width:calc(100% + 60px); max-width:none;
  padding:10px 12px; font-size:1rem;
}

/* ============ tap a size ============
   Every row in a price table is a door: it opens the popup that offers the 3D
   designer at that exact size, or a quote for it. The rows have to LOOK
   tappable or nobody taps them, so: a pointer, a lift on hover, and a chevron
   that says "there is more behind this". Rows that aren't sizes (the dormer
   add-ons) never get the class and stay plain. */
tr.sz-row { cursor: pointer; transition: background .13s ease, box-shadow .13s ease; }
tr.sz-row:hover td { background: var(--green-soft); }
tr.sz-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* The chevron goes beside the SIZE, not out at the right-hand edge: in a
   narrow card the rent-to-own figure runs the full width of its cell and a
   chevron parked there sits on top of the money. */
tr.sz-row td:first-child { font-weight: 650; color: var(--green); white-space: nowrap; }
tr.sz-row td:first-child::after {
  content: "\203A"; margin-left: 7px; font-size: 16px; line-height: 1;
  color: var(--gold); opacity: .8; vertical-align: -1px;
}
tr.sz-row:hover td:first-child::after { opacity: 1; }

/* the popup itself — the contact popup's card, with a size headline on top */
.sq-card { max-width: 480px; }
.sq-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding-right: 34px; }
.sq-thumb { width: 84px; height: 64px; object-fit: cover; border-radius: 12px; flex-shrink: 0; background: var(--paper); }
.sq-kicker { margin-bottom: 2px; }
.sq-head h3.sq-name { font-size: 22px; color: var(--green); margin: 2px 0 3px; line-height: 1.15; }
.sq-price { font-size: 13.5px; color: var(--muted); margin: 0; }
.sq-price b { color: var(--ink); font-size: 15px; }
.sq-dot { opacity: .5; }

/* the quote form, sitting inside a card that already has its own padding */
.quote-form.sq-form {
  max-width: none; margin: 0; padding: 0; background: none;
  border: none; border-radius: 0; box-shadow: none;
}
.sq-form .sq-back {
  border: none; background: none; padding: 0 0 10px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--muted);
}
.sq-form .sq-back:hover { color: var(--green); }
.sq-formlead { font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0 0 16px; }
.sq-formlead b { color: var(--green); }
.sq-form .qf-submit { width: 100%; justify-content: center; }
@media (max-width: 420px) {
  .sq-thumb { width: 66px; height: 52px; }
  .sq-head h3.sq-name { font-size: 19px; }
  .sq-form .qf-row { grid-template-columns: 1fr; }
}
.sz-hint {
  margin: 7px 2px 0; font-size: 12.5px; color: var(--muted); text-align: center;
}
.sz-hint::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2.6 21 7.4v9.2L12 21.4 3 16.6V7.4z' stroke='%23b9873a' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat;
}

/* ---- Styles & Prices: the contact button on each card, and the sticky bar (Sept 2026) ----
   Clarity, Aug 2026: on the price page the photos got ~42 taps, the "Call, text or email"
   pill got none, and Call/Text/quote were absent from the top 36 tapped things. So the
   contact button is now a solid green button (Full details keeps the gold), and on phones
   and tablets a Call / Text / Get a quote bar stays on screen. */
.style-card .card-actions button[data-open-building] { background: var(--green); color: #fff; border-color: var(--green); }
.style-card .card-actions button[data-open-building]:hover { background: var(--green-2); border-color: var(--green-2); }
@media (max-width: 560px) {
  .style-card .card-actions button[data-open-building] { flex: 1 1 100%; text-align: center; padding: 12px 15px; font-size: 14px; }
}

.mobile-cta { display: none; }
@media (max-width: 900px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;   /* under the header (100) and every modal (200+) */
    display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(248, 242, 228, 0.97); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10);
  }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center; min-height: 46px;
    border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none;
    background: var(--green); color: #fff;
  }
  .mobile-cta a.gold { background: linear-gradient(180deg, var(--cta-1), var(--cta-2)); color: var(--cta-ink); }
  body.has-mobile-cta { padding-bottom: 84px; }
}