/* =========================================================
   Home Remodeling Marietta — shared styles
   Plain CSS, no build step. Edit freely.

   THEME TOKENS live in :root below. Every color used anywhere
   in this file (and via inline "style" attributes that were
   removed from the HTML in favor of these tokens) traces back
   to one of these variables — change a value once here and it
   re-themes the whole site.
   ========================================================= */

/* Self-hosted fonts (replaces the Google Fonts stylesheet link, which
   cost an extra cross-origin round trip on the critical rendering path).
   Inter ships from Google as a single variable woff2 file that covers
   every static weight, so the four weights actually used sitewide
   (400/500/600/700) all point at the same local file; the browser picks
   the right instance per @font-face block. Libre Baskerville is only
   ever used at weight 700 (h1/h2/h3/.faq summary), so that's the only
   weight self-hosted for it. Latin subset only, since the site has no
   non-Latin content. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/libre-baskerville-700-latin.woff2') format('woff2');
}

:root {
  /* ---- Primary / secondary / accent (approved brand colors) ---- */
  --color-primary:        #1b3a5c;  /* deep navy: headings, links, nav text, secondary-button outline */
  --color-primary-rgb:    27,58,92;
  --color-secondary:      #12293f;  /* darker navy: footer, dark bands, primary color's hover/active shade */
  --color-secondary-rgb:  18,41,63;
  --color-accent:         #b3611c;  /* copper: primary buttons, hover accents, active marks */
  --color-accent-rgb:     179,97,28;
  --color-accent-hover:   #8f4c14;  /* accent hover/active shade */
  --color-accent-on-dark: #e7b98a;  /* lighter accent tint — the only accent value with safe contrast on navy */

  /* ---- Neutral scale ---- */
  --color-neutral-900: #1e2a33;  /* body text */
  --color-neutral-600: #55636f;  /* muted / secondary text */
  --color-neutral-400: #7c8791;  /* form-field borders (meets 3:1 UI-component contrast) */
  --color-neutral-200: #e7e2d8;  /* hairlines, card borders (decorative, not text-bearing) */
  --color-neutral-50:  #f7f4ee;  /* alternating section background */
  --color-neutral-0:   #ffffff;

  /* ---- On-dark surface text (white, used on navy backgrounds) ---- */
  --on-dark:     #ffffff;
  --on-dark-rgb: 255,255,255;

  /* ---- Semantic roles used throughout this file ---- */
  --text:          var(--color-neutral-900);
  --text-muted:    var(--color-neutral-600);
  --bg:            var(--color-neutral-0);
  --bg-alt:        var(--color-neutral-50);
  --bg-dark:       var(--color-secondary);
  /* Homepage-only warm palette (see .section--ivory/--stone below): a
     restrained pair of section backgrounds used solely on index.astro so
     white cards read clearly against them without the rest of the site's
     .section--alt/--dark usage being affected. --bg-ivory intentionally
     matches --color-neutral-50's value rather than aliasing it, so this
     homepage-specific palette stays independent of sitewide tokens. */
  --bg-ivory: #f7f4ee;
  --bg-stone: #f1ede6;
  --border:        var(--color-neutral-200);
  --border-input:  var(--color-neutral-400);
  --focus-ring:    var(--color-accent);

  /* ---- Short aliases (used by the rules below; keeps them readable) ---- */
  --brand:       var(--color-primary);
  --brand-dark:  var(--color-secondary);
  --accent:      var(--color-accent);
  --accent-dark: var(--color-accent-hover);
  --ink:         var(--text);
  --ink-soft:    var(--text-muted);
  --line:        var(--border);

  --max: 1160px;
  --radius: 12px;
  --shadow-sm: 0 2px 6px rgba(var(--color-secondary-rgb), .06);
  --shadow-md: 0 14px 34px -16px rgba(var(--color-secondary-rgb), .30);
  --shadow-lg: 0 26px 60px -24px rgba(var(--color-secondary-rgb), .42);
  --font-head: 'Libre Baskerville', serif;
  --font-body: 'Inter', sans-serif;

  /* Approximate rendered height of .site-header at the desktop breakpoint
     (it has no fixed height of its own — it sizes to content/padding),
     used only by .hero-stage's min-height calc() below. */
  --header-height: 78px;
}

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

html { scroll-behavior: smooth; }

/* Respect the OS-level "reduce motion" preference: no smooth-scroll
   animation, and the small hover transforms/transitions used on
   buttons, cards, and linklist items (translateY on hover) collapse
   to an instant, motion-free state. Nothing else about the site
   changes for these users — same layout, same colors, same content. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.14; color: var(--brand); letter-spacing: -.005em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 700; margin-bottom: .5em; }
h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .35em; }
h4 { font-family: var(--font-body); }
p  { margin-bottom: 1rem; color: var(--ink-soft); }
a  { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent); text-decoration: none; }
strong { color: var(--ink); }

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

/* Single, sitewide focus language: every focusable element gets the
   same accent-colored ring so keyboard focus is always unmistakable. */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

/* ---------- buttons ----------
   One hierarchy, used everywhere:
   .btn        = primary action  (filled accent / copper)
   .btn--ghost = secondary action (outlined, brand navy — or white
                 when the button sits on a dark/photo background,
                 handled by the "on dark surfaces" block below)      */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-dark);
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-family: var(--font-body);
  font-size: .98rem;
  letter-spacing: .01em;
  border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* color is restated here because the sitewide a:hover rule (copper text)
   outranks .btn's own white text and would turn the label copper on a
   copper button. */
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-dark); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--ghost { background: transparent; color: var(--brand); border: 2px solid var(--brand); box-shadow: none; }
.btn--ghost:hover { background: var(--brand); color: var(--on-dark); text-decoration: none; }
.btn--ghost:active { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn--lg { padding: 17px 36px; font-size: 1.04rem; }

/* Secondary (ghost) buttons on a dark or photo background: invert to
   white so they stay readable, everywhere that pattern occurs. */
.hero .btn--ghost,
.cta-band .btn--ghost,
.section--dark .btn--ghost {
  color: var(--on-dark); border-color: var(--on-dark);
}
/* The hero's ghost button sits directly over the photo (unlike the
   cta-band/section--dark ones, which sit on a solid brand-color
   background), so it alone gets a translucent backing for contrast on
   brighter images. */
.hero .btn--ghost {
  background: rgba(7, 27, 51, 0.28);
  backdrop-filter: blur(2px);
}
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.section--dark .btn--ghost:hover {
  background: var(--on-dark); color: var(--brand); border-color: var(--on-dark);
}
.hero .btn--ghost:active,
.cta-band .btn--ghost:active,
.section--dark .btn--ghost:active {
  background: rgba(var(--on-dark-rgb), .85); color: var(--brand); border-color: var(--on-dark);
}

.muted { color: var(--ink-soft); font-size: .9rem; }
/* .muted sits on dark bands (CTA sections) in a few places — keep it
   legible there without an inline style on every instance. */
.cta-band .muted { color: rgba(var(--on-dark-rgb), .8); }

/* Kitchen Remodeling's cost-benchmark source note: smaller than the
   surrounding .muted paragraphs so it reads as a citation, not another
   sentence of body copy. Kept as a modifier rather than editing .muted
   itself since other pages' .muted text should stay unaffected. */
.cost-source-note { font-size: .82rem; margin-top: 6px; }

/* Dense cost-factor grid (Kitchen Remodeling's "What usually has the
   biggest effect on cost?"): deliberately lighter than .card - no
   border, no shadow, no top accent bar - so seven items read as a
   scannable list rather than seven separate boxes. h4 is sitewide-styled
   as body text (Inter, normal weight) so it can sit inside prose
   paragraphs without looking like a heading; scoped here to look like
   the bold heading these items need without changing h4 anywhere else. */
.cost-factor h4 {
  font-family: var(--font-head); font-weight: 700; color: var(--brand);
  font-size: 1.05rem; margin-bottom: .3em;
}
.cost-factor p { color: var(--ink-soft); }

/* Keeps a short phrase (e.g. a city/state or county name inside a
   heading) from breaking across lines on desktop/tablet, while still
   allowing normal wrapping on narrow phones so it can't cause overflow. */
.nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .nowrap { white-space: normal; }
}

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Dark navy to match the footer (--bg-dark), rather than the lighter
     --brand navy the CTA band uses, per the "DARK NAVY" navbar/footer
     bookend called for. Solid, so the old backdrop-filter blur (only
     meaningful over a semi-transparent background) was dropped too. */
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(var(--on-dark-rgb), .12);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px; max-width: var(--max); margin: 0 auto;
}
.nav__logo { display: flex; align-items: center; }
/* The wordmark logo is wide (about 3:1), so it is sized by height and
   steps down where the bar gets tight, keeping the nav on one line. */
.nav__logo img { height: 62px; width: auto; }
@media (max-width: 1100px) { .nav__logo img { height: 52px; } }
@media (max-width: 900px) { .nav__logo img { height: 46px; } }
@media (max-width: 420px) { .nav__logo img { height: 42px; } }
.nav__logo { flex-shrink: 0; }
/* On narrow phones the top-bar call link drops the visible number (kept
   for screen readers) so the wide logo never has to shrink. */
@media (max-width: 480px) {
  .nav__callbar-num { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .nav__callbar { padding: 8px 14px; font-size: .9rem; }
}
.nav__links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav__links a { color: var(--on-dark); font-weight: 500; font-size: .96rem; }
.nav__links a:hover { color: var(--color-accent-on-dark); text-decoration: none; }
.nav__links a:focus-visible, .nav__logo:focus-visible { outline-color: var(--color-accent-on-dark); }

/* dropdown for services */
.has-dropdown { position: relative; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 250px; padding: 8px 0; box-shadow: var(--shadow-md);
}
.has-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; display: none;
}
.has-dropdown:hover::after, .has-dropdown:focus-within::after { display: block; }
/* :focus-within keeps the panel open for keyboard users tabbing through
   the trigger link and the links inside it, matching the :hover behavior
   above rather than only working for a mouse. */
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown li { list-style: none; }
/* The dropdown panel stays white/light (per design), so its links need
   dark ink here to override .nav__links a's white color above — those
   links are DOM descendants of .nav__links even though they render in a
   separate light-background panel. */
.dropdown a { display: block; padding: 9px 18px; font-size: .92rem; color: var(--ink); }
.dropdown a:hover { background: var(--bg-alt); color: var(--ink); }
.dropdown a:focus-visible { outline-color: var(--focus-ring); }

/* Sitewide CTA hierarchy in the navbar: "Get a Free Estimate" is the one
   filled copper button (primary); the phone number is an outlined button
   with an icon (secondary), so it never competes with the estimate CTA. */
.nav__cta,
.nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius); font-weight: 600;
  border: 2px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav__links .nav__cta { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.nav__links .nav__cta:hover,
.nav__links .nav__cta:active { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-dark); text-decoration: none; }
.nav__links .nav__phone { border-color: rgba(var(--on-dark-rgb), .45); color: var(--on-dark); }
.nav__links .nav__phone:hover { border-color: var(--on-dark); background: rgba(var(--on-dark-rgb), .08); color: var(--on-dark); text-decoration: none; }
.nav__phone-icon { width: 17px; height: 17px; flex: 0 0 auto; }
@media (min-width: 901px) {
  .nav__action { margin-left: 2px; }
  .nav__action + .nav__action { margin-left: -8px; }
}

/* Keep each top-level label (and the phone pill) on one line. Between the
   mobile breakpoint and full desktop width the bar is tight, so the gap,
   label size, and pill padding step down slightly instead of wrapping. */
@media (min-width: 901px) {
  .nav__logo { flex-shrink: 0; }
  .nav__links > li > a { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .nav { gap: 12px; }
  .nav__links { gap: 14px; }
  .nav__links > li > a { font-size: .88rem; }
  .nav__cta, .nav__phone { padding: 8px 13px; }
}
@media (min-width: 901px) and (max-width: 980px) {
  .nav__links { gap: 12px; }
  .nav__links > li > a { font-size: .86rem; }
  .nav__cta, .nav__phone { padding: 7px 11px; gap: 6px; }
  .nav__phone-icon { display: none; }
}

/* mobile-only call button in the top bar */
.nav__callbar {
  display: none;
  margin-left: auto;
  align-items: center; gap: 6px;
  border: 2px solid rgba(var(--on-dark-rgb), .5); color: var(--on-dark) !important;
  padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem;
  white-space: nowrap;
}
.nav__callbar .nav__phone-icon { width: 15px; height: 15px; }
.nav__callbar:hover { border-color: var(--on-dark); background: rgba(var(--on-dark-rgb), .08); text-decoration: none; }
@media (max-width: 360px) { .nav__logo img { height: 38px; } }

/* mobile nav toggle */
.nav__toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--on-dark); padding: 4px 8px; }
@media (max-width: 900px) {
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 20px;
    box-shadow: var(--shadow-md); }
  .nav__links.open { display: flex; }
  .nav__links li { width: 100%; padding: 0; }
  /* This panel keeps its original white background when open (unlike the
     navy top bar), so its link color is reverted back to dark ink here —
     the on-dark white set above is for the links sitting directly on the
     navy bar at desktop widths, not this light dropdown panel. */
  .nav__links a { color: var(--ink); }
  .nav__links a:hover { color: var(--accent); }
  .nav__links a:focus-visible { outline-color: var(--focus-ring); }
  /* Top-level mobile menu links (not the dropdown links, which already
     get their own padding below, and not the call pill button) need
     their own padding so the tappable area is the full row, not just
     the text line — a ~21px line was well under a usable tap target. */
  .nav__links > li > a:not(.nav__cta):not(.nav__phone) { display: block; padding: 12px 2px; }
  /* In the open mobile menu (white panel) the two actions become full-width
     buttons: copper filled estimate, navy outlined phone. */
  .nav__action { margin-top: 10px; }
  .nav__links .nav__cta,
  .nav__links .nav__phone { display: flex; justify-content: center; width: 100%; padding: 12px 16px; }
  .nav__links .nav__phone { border-color: var(--brand); color: var(--brand); }
  .nav__links .nav__phone:hover { background: var(--brand); color: var(--on-dark); }
  .dropdown { position: static; display: block; box-shadow: none; border: 0; padding: 4px 0 4px 14px; min-width: 0; }
  .nav__toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .nav__callbar { display: inline-flex; }
}

/* ---------- hero ---------- */
.hero { position: relative; color: var(--on-dark); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 27, 51, 0.42) 0%,
    rgba(7, 27, 51, 0.26) 24%,
    rgba(7, 27, 51, 0.10) 42%,
    rgba(7, 27, 51, 0) 58%
  ); z-index: 1; }
.hero--no-overlay::after { background: transparent; }
.hero__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 96px 20px 104px; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; color: var(--color-accent-on-dark); }
.hero h1 {
  color: var(--on-dark); margin: 14px 0 18px; max-width: 20ch; font-weight: 400;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.85),
    0 8px 22px rgba(0, 0, 0, 0.35);
}
.hero p,
.hero__note {
  color: var(--on-dark);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 4px 12px rgba(0, 0, 0, 0.45);
}
.hero p { font-size: 1.16rem; max-width: 34rem; }
.hero__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__note { margin-top: 16px; font-size: .92rem; max-width: 54ch; }
.hero__note::before { content: "✓ "; color: var(--color-accent-on-dark); font-weight: 700; }
/* Optional supporting headline (Hero `subheading` prop). Only heroes that
   pass it get these rules: a tighter H1 gap, a mid-weight line between the
   H1 and the paragraph, and a slightly wider paragraph measure (~640px). */
.hero h1:has(+ .hero__subheading) { margin-bottom: 10px; }
.hero .hero__subheading {
  font-size: clamp(1.25rem, 2.3vw, 1.55rem); font-weight: 600; line-height: 1.3;
  max-width: 46rem; margin-bottom: 16px;
}
.hero .hero__subheading ~ p:not(.hero__note) { max-width: 40rem; }
.hero .hero__eyebrow { margin-bottom: 4px; font-size: .82rem; max-width: none; }

/* .hero-stage wraps a .hero immediately followed by a .trust-bar on the
   pages that have both. On desktop it reserves one viewport (minus the
   header) for the pair and lets the trust bar take exactly the height its
   own text needs, growing it there if it wraps to a second line, with the
   hero filling whatever space is left above it. Below 900px it's an inert
   wrapper div and both sections keep their normal, natural height. */
@media (min-width: 900px) {
  .hero-stage {
    min-height: calc(100svh - var(--header-height));
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .hero-stage > .hero {
    min-height: 0;
  }
}

/* ---------- trust bar ---------- */
.trust-bar { background: var(--brand); color: var(--on-dark); }
.trust-bar ul {
  max-width: var(--max); margin: 0 auto; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(var(--on-dark-rgb), .14);
}
.trust-bar li { background: var(--brand); padding: 20px 22px; font-size: .95rem; font-weight: 600; }
.trust-bar li span { display: block; color: var(--color-accent-on-dark); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; font-weight: 700; }
@media (max-width: 780px) { .trust-bar ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .trust-bar ul { grid-template-columns: 1fr; } }

/* ---------- sections ---------- */
.section { padding: 72px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--on-dark); }
/* Warm, low-contrast section backgrounds, originally added for the
   homepage (index.astro) so white cards separate cleanly from the page
   without reading as alternating stripes. Scoped to these two classes
   rather than reusing .section--alt, so no other page (which uses
   .section--alt throughout) is affected by changes here. --stone is also
   used standalone on faq.html's main content section (see faq.astro). */
.section--ivory { background: var(--bg-ivory); }
.section--stone { background: var(--bg-stone); }
.section--white { background: var(--bg); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark p { color: rgba(var(--on-dark-rgb), .82); }
.section__lead { max-width: 65ch; font-size: 1.06rem; }
.section__lead p { color: var(--ink-soft); }
.center { text-align: center; }
.center .section__lead { margin: 0 auto; }
/* Sitewide rule: a section heading must never rely on the browser's
   default h2 margin-bottom (~0.5em) as its only separation from the
   content below it. Wherever a .section__lead sits directly under an
   h2 (LeadSection, InfoCardGrid's optional lead, HomeownerResources,
   MapSection, ChecklistSection, RelatedServices), this gives it
   deliberate breathing room instead. This does not affect
   EditorialSplit's intro row, where .section__lead is nested inside
   .split rather than a direct sibling of the h2, and that row already
   has its own deliberate margin-top (see .split--wide-left above).
   24px alone read as cramped next to this site's large desktop H2
   (clamp up to 2.35rem/~37.6px): a rendered check (not just "the CSS
   value exists") showed the heading and the content below it looking
   attached rather than clearly separated at desktop widths, the same
   problem across every section using this rule, not one page. 40px
   on desktop reads as clearly separated without approaching the more
   dramatic 68px used for EditorialSplit's two-column intro row, which
   is a heavier visual break by design. 24px stays on mobile, where it
   already read as sufficiently separated against the smaller H2. */
h2 + .section__lead { margin-top: 24px; }
@media (min-width: 801px) {
  h2 + .section__lead { margin-top: 40px; }
}
/* NOTE: eyebrow labels are used in the current markup below headings
   in several sections. The brand rules going forward say not to add
   new ones without the brief asking for it — this rule is kept as-is
   (not a color/theme change) so existing pages don't render broken;
   removing the eyebrow markup itself is a copy/structure change for
   a future pass, not this one. */
.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .13em; font-size: .78rem;
  font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.eyebrow.center { display: block; text-align: center; }

/* two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* Editorial variant: a wider primary column with a narrower supporting
   column alongside it, for body copy paired with a short reference list
   rather than two equal halves. Used exclusively by EditorialSplit.astro
   (every standard location/service-page intro), so its own spacing and
   alignment are scoped here rather than changed on the bare .split rule.

   Two rules, on purpose:
   - align-items: start (not center) makes the left paragraph and the
     right eyebrow/checklist start at the same vertical position by
     construction, regardless of how long either column's content is.
   - margin-top: 68px is the generous gap below the H2 that this row
     needs as a unit. Both columns move down together by this amount;
     neither is nudged individually.

   Earlier versions of this fix used a different hand-tuned
   translateY() per page (e.g. .roswell-intro-split, .acworth-intro-split)
   to shift only the left column down, while the row's own margin-top
   stayed at 24px. That approach had two bugs: it only reproduced the
   right vertical position when a page's left/right content heights
   happened to match the ratio the translateY value was tuned for (it
   drifted on pages like Alpharetta), and a later pass removed the
   per-page transforms entirely without restoring the spacing they had
   been supplying, leaving the whole row sitting too close to the H2 on
   every page including Roswell. This single rule replaces both: the
   68px is the H2-to-row spacing on its own, applied identically
   everywhere, and top alignment (not a transform) keeps the two
   columns level with each other at whatever position the row ends up. */
.split--wide-left { grid-template-columns: 1.8fr 1fr; align-items: start; margin-top: 24px; }
/* The generous 68px gap is a desktop-only addition, matching how the
   old per-page transforms only pushed content down at desktop widths
   (and reset to nothing at <=800px). Mobile keeps the smaller 24px
   gap so stacked content doesn't get an oversized blank area above it. */
@media (min-width: 801px) {
  .split--wide-left { margin-top: 68px; }
}
/* Image variant of the editorial split: same alignment and
   heading-to-row spacing as .split--wide-left, but a narrower right
   column (70/30 instead of ~64/36). A photo in that column, especially
   a portrait-oriented one, reads as oversized next to two paragraphs
   of text at the standard checklist ratio, since a checklist's natural
   height rarely runs much taller than the text while a portrait photo
   easily does. EditorialSplit.astro applies this automatically instead
   of .split--wide-left whenever it renders an image (not a checklist),
   so any future image-in-EditorialSplit page gets the same balanced
   ratio without needing its own one-off CSS. */
.split--image-narrow { grid-template-columns: 7fr 3fr; align-items: start; margin-top: 24px; }
@media (min-width: 801px) {
  .split--image-narrow { margin-top: 68px; }
}
/* Kitchen Remodeling's "A Kitchen That Works Better for the Way You
   Live" image only: two successive 25% increases over the standard
   .split--image-narrow ratio (image fraction 0.3 -> 0.375 -> 0.46875 of
   the row), scoped via EditorialSplit's splitClass so no other page
   using .split--image-narrow is affected. */
.kitchen-inspiration-split { grid-template-columns: 17fr 15fr; }
/* Reversed variant of the editorial split: checklist on the left,
   paragraph copy on the right (EditorialSplit's `reverse` prop), e.g.
   Acworth's "Indoor and Outdoor..." section. Same alignment and
   heading-to-row spacing as .split--wide-left, with the column ratio
   mirrored (1fr/1.8fr instead of 1.8fr/1fr) so the paragraph column
   stays the wider of the two regardless of which side it's on. */
/* Lead-form sections (Estimate, Contact): the right-column iframe form
   is much taller than the left column's copy, so the bare .split rule's
   align-items: center pushed the left column's heading well below the
   top of the form. This scoped override top-aligns the two columns
   instead, the same approach as the .split--wide-* variants above,
   without touching the shared .split rule (used as-is elsewhere, e.g.
   the homepage's contact-band section). */
.split--top { align-items: start; }
.split--wide-right { grid-template-columns: 1fr 1.8fr; align-items: start; margin-top: 24px; }
@media (min-width: 801px) {
  .split--wide-right { margin-top: 68px; }
}
/* Homepage's final pre-footer section only: widen the right (photo)
   column so the image renders about 20% larger than the default
   .split 50/50 split, without touching the shared .split rule (also
   used as-is by "Why Homeowners Work With Us" on this same page).
   1fr/1.5fr gives the image column 60% of the row's flexible width
   instead of 50% - a 20% increase (60/50 = 1.2) - while keeping the
   text column readable. No margin-top override is needed here: unlike
   EditorialSplit's rows, this section's H2 lives inside the left grid
   item itself, not above the split row as a separate sibling. Mobile/
   tablet fall through to the existing .split collapse-to-one-column
   rule below, unchanged. */
@media (min-width: 801px) {
  .split--contact-photo { grid-template-columns: 1fr 1.5fr; }
}
/* Acworth-only: extra breathing room below the lake photo that sits
   between the FAQ and Homeowner Resources sections. PhotoSection's own
   section already has an 18px bottom padding; this wrapper adds 40px
   more on top of that (within the site's existing 32-48px spacing
   rhythm), so the gap before "Acworth Homeowner Resources" feels
   deliberate rather than tight, without touching PhotoSection.astro or
   any other page that also uses PhotoSection (Roswell included). */
.acworth-lake-photo-gap { margin-bottom: 40px; }
/* Milton-only: body photo (detached garage) sized 20% smaller than the
   standard .photo width, without touching PhotoSection.astro or any
   other page that also uses PhotoSection (Acworth/Roswell included). */
.milton-body-photo .photo { width: 80%; display: block; margin: 0 auto; }
/* Roswell is the locked reference page (see CLAUDE.md) and keeps its
   original, pre-standardization intro treatment rather than the shared
   top-aligned/68px-gap rule above: a centered row with the left column
   nudged down by translateY, exactly as it rendered before the intro
   alignment work on other location pages. Do not change this block to
   "clean it up" into the shared approach; that shared approach is what
   moved Roswell up in the first place. */
.roswell-intro-split { align-items: center; margin-top: 24px; }
@media (min-width: 801px) {
  .roswell-intro-split { margin-top: 24px; }
  .roswell-intro-split > .section__lead { transform: translateY(44px); }
}
@media (max-width: 800px) {
  .roswell-intro-split > .section__lead { transform: none; }
}
/* A quiet copper rule standing in for a card border, so a short
   supporting block reads as part of the page rather than a boxed-off
   sidebar. */
.accent-rule { border-left: 3px solid var(--accent); padding-left: 24px; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* feature / why-us grid */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* simple checklist — an alternative to a bordered card grid, so a
   page doesn't read as one grid of cards after another */
.reasons-list { list-style: none; }
.reasons-list li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.reasons-list li:last-child { border-bottom: 0; }
.reasons-list li::before { content: "\2713"; position: absolute; left: 0; top: 12px; color: var(--accent); font-weight: 700; }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.section--alt .card { background: var(--bg); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

/* service cards with a call-to-action link */
.card--service a {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; font-weight: 700; color: var(--accent);
}
.card--service a:hover { color: var(--accent-dark); text-decoration: none; }
.card--service a:active { color: var(--accent-dark); }

/* Photographic project cards ("Start With Your Project" on the homepage):
   an image-led variant of the base .card, added as its own modifier so
   the plain .card (process steps, etc.) is untouched. The top accent bar
   is dropped in favor of a plain top edge, since the photo is now the
   card's visual anchor.

   Each card is the <a> itself (not a div wrapping a separate link) so the
   whole card is one clickable, focusable target with no nested links.
   `.card__link` is a plain <span> styled to look like the existing
   accent-colored CTA text; it carries no href of its own. */
.section--projects { padding: 96px 0 100px; background: var(--bg-ivory); }
.project-grid { margin-top: 32px; }
.card--project {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  color: inherit; text-decoration: none; cursor: pointer;
  /* Refined slightly from the base .card's --line/--shadow-sm now that
     this section's background is warm ivory rather than white: a touch
     more definition (navy-tinted border/shadow, reusing the same
     --color-secondary-rgb token .cta-band and .shadow-* already use)
     keeps the white cards reading as clearly elevated without looking
     heavily bordered or floating. */
  border: 1px solid rgba(var(--color-secondary-rgb), .08);
  box-shadow: 0 4px 16px rgba(var(--color-secondary-rgb), .06);
}
.card--project:hover { box-shadow: 0 10px 28px rgba(var(--color-secondary-rgb), .12); }
.card--project:hover { text-decoration: none; }
.card--project .card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.card--project .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kitchen, Bathroom, and Basement (first in the grid, filling row one on
   their own) get a taller, more editorial image than the five services
   below them, without breaking column alignment in either row. Scoped to
   the 3-column desktop layout only: below that, columns drop to 2 and a
   featured card can end up sharing a row with a non-featured one, which
   would otherwise misalign their descriptions the same way mismatched
   heading heights would. */
@media (min-width: 901px) {
  .card--project-featured .card__media { aspect-ratio: 4 / 3; }
}
/* Grid rows stretch every card to the row's tallest item by default
   (CSS Grid's align-items: stretch), so .card__body just needs to fill
   that stretched height and lay its own content out top-to-bottom:
   heading, description, flexible space, then the CTA line pinned to the
   bottom via margin-top: auto. This is what keeps "Explore..." aligned
   across a row even when one card's heading wraps to two lines. */
.card--project .card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.card--project h3 {
  font-size: 1.4rem; margin-bottom: .3em;
  /* Reserves room for a two-line heading (1.4rem * 1.14 line-height * 2
     lines) so a card with a one-line title still pushes its description
     down to the same position as a sibling whose title wraps. Headings
     stay block-level (no flex/centering here), so a short title still
     sits at the top of this space rather than centering within it. */
  min-height: calc(1.4rem * 1.14 * 2);
}
.card--project .card__body p { font-size: .95rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 0; }
.card--project .card__link {
  /* Block, not inline-flex/align-items:center: centering is what made a
     one-line CTA ("Explore General Contractors") sit at a different
     vertical position than a two-line one ("Explore Outdoor Kitchen
     Construction"), since each centered independently within its own
     content height. A plain block with a fixed two-line min-height keeps
     this area the same size on every card, and default top-aligned text
     flow means line one always starts at the top of that area, whether
     the CTA takes one line or two. margin-top: auto still pushes this
     now fixed-height area down to the bottom of the flex column body, so
     its top edge lines up across a row of equal-height cards regardless
     of how tall the description above it happens to be. */
  display: block;
  /* +10px accounts for this rule's own padding-top: with box-sizing:
     border-box, that padding is part of this min-height, so a genuinely
     two-line CTA (padding-top + 2 real lines) needs that much room to
     avoid growing 10px taller than a one-line CTA's box and throwing
     off the shared top edge margin-top: auto lines up. */
  min-height: calc(1rem * 1.65 * 2 + 10px);
  margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--accent);
  transition: color .15s ease;
}
/* Hovering or focusing anywhere on the card also highlights the CTA text,
   so the whole card reads as one intentional click target rather than
   just the visible link at the bottom. */
.card--project:hover .card__link,
.card--project:focus-visible .card__link { color: var(--accent-dark); }
.project-grid-cta { margin-top: 40px; text-align: center; }
@media (max-width: 700px) {
  .card--project .card__body { padding: 22px; }
  /* At one card per row there's no sibling to align against, so the
     reserved two-line heading and CTA space would just be empty air
     under a short title or CTA. Let each mobile card size to its own
     content instead. */
  .card--project h3,
  .card--project .card__link { min-height: 0; }
}

/* Featured Projects showcase (homepage): three reused photos with a
   simple caption, kept lighter than .card--project's boxed treatment so
   it doesn't repeat the same heavy card pattern immediately below the
   services grid. */
.showcase-item { margin: 0; }
.showcase-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.showcase-item figcaption {
  margin-top: 12px; font-family: var(--font-head); font-weight: 700; color: var(--brand);
}

/* service / area link list */
.linklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; }
@media (max-width: 800px) { .linklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .linklist { grid-template-columns: 1fr; } }
/* Service-area/location lists only: the HTML lists these locations in
   plain alphabetical order, and CSS multi-column flows them top-to-bottom
   within each column (rather than grid's left-to-right row order), so the
   visible order reads alphabetically down each column. At one column
   (mobile) this is identical to the alphabetical source order read top
   to bottom, so no separate mobile-ordering logic is needed. */
.linklist--areas {
  display: block;
  column-count: 3;
}
.linklist--areas li { break-inside: avoid; margin-bottom: 12px; }
@media (max-width: 800px) { .linklist--areas { column-count: 2; } }
@media (max-width: 500px) { .linklist--areas { column-count: 1; } }
.linklist a {
  display: block; padding: 17px 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* A small arrow that slides in on hover — a low-key clickability cue
   that doesn't require an icon asset or a heavier card treatment. */
.linklist a::after { content: "\2192"; display: inline-block; margin-left: 6px; opacity: 0; transition: opacity .15s ease, margin-left .15s ease; }
.linklist a:hover {
  border-color: var(--accent); color: var(--accent); text-decoration: none;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.linklist a:hover::after { opacity: 1; margin-left: 10px; }
.linklist a:active { background: var(--bg-alt); }
/* A "view all" link placed inside an areas grid as its own card, so it
   takes the last grid slot instead of sitting below as a separate button.
   Same footprint as the location cards; only the text color marks it as
   an action, and the built-in hover arrow is suppressed since the link
   text already ends in one. */
.linklist-cta { color: var(--accent); }
.linklist-cta::after { content: none; }

/* photos */
.photo {
  width: 100%; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 7; object-fit: cover;
}
@media (max-width: 640px) { .photo { aspect-ratio: 4 / 3; } }
/* EditorialSplit's optional right-column image (e.g. Acworth's
   indoor-outdoor photo): same border-radius/shadow language as .photo,
   but no forced aspect-ratio or object-fit crop, since this sits in a
   narrower column where the source image's own proportions should be
   kept intact rather than cropped to a wide-photo-strip ratio. The
   base `img { max-width:100%; height:auto }` rule already keeps it
   responsive at its natural aspect ratio. */
.editorial-split-image { border-radius: var(--radius); box-shadow: var(--shadow-md); }
/* Homepage-only: the final pre-footer section's right-column image.
   Unlike .editorial-split-image, this one needs a consistent cropped
   ratio (object-fit: cover) so it reads as a deliberate photo rather
   than whatever shape the source file happens to be, while still
   matching the site's border-radius/shadow language. */
.contact-band-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); display: block; }
.map-embed {
  display: block; width: 100%; max-width: 100%; height: 400px;
  border: 0; border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) { .map-embed { height: 320px; } }

/* cost table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .96rem; }
th { background: var(--brand); font-family: var(--font-body); font-weight: 700; color: var(--on-dark); }
tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: var(--bg-alt); }

/* FAQ / accordion */
.faq details { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-head); font-size: 1.1rem; color: var(--brand); padding: 16px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding-bottom: 16px; margin-bottom: 0; }

/* CTA band */
.cta-band { background: var(--brand); color: var(--on-dark); text-align: center; padding: 66px 20px; }
/* Generic photo variant: the image, focal position, and navy overlay
   strength are supplied per page as CSS custom properties (set inline
   by the Astro CtaBand component), so a new page's CTA photo never
   requires a new hand-authored class here. */
.cta-band--photo {
  --cta-position: center;
  --cta-overlay: 0.8;
  background-image: linear-gradient(rgba(27,58,92,var(--cta-overlay)), rgba(27,58,92,var(--cta-overlay))), var(--cta-image);
  background-size: cover;
  background-position: var(--cta-position);
}
.cta-band h2 { color: var(--on-dark); }
.cta-band .eyebrow { color: var(--color-accent-on-dark); }
.cta-band p { color: rgba(var(--on-dark-rgb), .9); max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-band .btn { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.cta-band .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Two-button CTA treatment: used only when a page supplies both a
   primary and a secondary action. Both buttons share one class so they
   can't visually drift apart the way .btn/.btn--ghost did (.btn--ghost's
   hover state inverts to a white fill with navy text, which read as two
   inconsistent buttons once there were two of them side by side). */
.cta-band__actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cta-band__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  padding: 17px 28px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-dark);
  font-weight: 600;
  font-family: var(--font-body);
  font-size: 1.04rem;
  letter-spacing: .01em;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cta-band__button:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--on-dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.cta-band__button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* Secondary action (the phone call by default): outlined, so the filled
   copper button is clearly the primary action. */
.cta-band__button--secondary { background: transparent; border-color: rgba(var(--on-dark-rgb), .85); box-shadow: none; }
.cta-band__button--secondary:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--brand); }
@media (max-width: 640px) {
  .cta-band__actions { flex-direction: column; align-items: center; }
}

/* Bottom "contact" band — info + embedded form side by side on a dark
   surface, reusing .split and .form-card rather than a new layout. */
.contact-band { background: var(--brand); padding: 72px 0; color: rgba(var(--on-dark-rgb), .88); }
.contact-band h2 { color: var(--on-dark); }
.contact-band p { color: rgba(var(--on-dark-rgb), .88); }
.contact-band a { color: var(--on-dark); }
.contact-band .muted { color: rgba(var(--on-dark-rgb), .75); }
.contact-band .contact-list strong { color: var(--on-dark); }
.contact-band .contact-list li { border-bottom-color: rgba(var(--on-dark-rgb), .18); }

/* ---------- estimate / contact form ---------- */
.form-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-md); }
/* Homepage GHL embed only: the widget already supplies its own
   internal field spacing, so the standard 30px .form-card padding
   reads as doubled-up whitespace around it. Do not apply this to
   Estimate/Contact (see .form-card--embed-tight below for why). */
.form-card--tight { padding: 8px; }
/* Estimate/Contact GHL embed only. Applying .form-card--tight here
   previously made the iframe wider (since width:100% just fills
   whatever padding leaves behind), which shifted GHL's own internal
   responsive layout across a breakpoint (the Project Type checkboxes
   went from 1 column to 2) and brought back an internal scrollbar
   inside the iframe - a GHL-side rendering issue, not something this
   site's CSS can safely paper over. This modifier thins the frame
   without changing the iframe's known-good rendered width: at the
   .split breakpoint (801px+) the card gets a fixed width equal to
   that iframe width (474px, measured) plus this padding and the
   existing 1px border on each side (474 + 8*2 + 1*2 = 492px), so the
   iframe keeps rendering at exactly 474px wide. justify-self: start
   keeps the now-narrower card left-aligned in its grid column instead
   of stretching to fill it. Below 801px, .split already collapses to
   one column and GHL's own form is already single-column there, so
   the card is left to fill its column naturally at the reduced
   padding - confirmed by testing that this does not reintroduce the
   scrollbar at mobile widths. */
.form-card--embed-tight { padding: 8px; }
@media (min-width: 801px) {
  .form-card--embed-tight { width: 492px; justify-self: start; }
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-input); border-radius: 8px;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Same accent focus ring used sitewide (see :focus-visible above),
   applied here on :focus too since form fields need the cue on
   every input method, not just keyboard navigation. */
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--focus-ring); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .25);
}
.field textarea { min-height: 130px; resize: vertical; }
.field textarea.compact { min-height: 70px; }

.project-type-fieldset { border: 1px solid var(--border-input); border-radius: 8px; padding: 12px 14px 14px; margin: 0 0 16px; }
.project-type-fieldset legend { font-weight: 600; font-size: .9rem; padding: 0 4px; color: var(--ink); }
.project-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 6px; }
.project-type-grid label { display: flex; align-items: flex-start; gap: 6px; font-weight: 400; font-size: .88rem; margin-bottom: 0; color: var(--ink); }
.project-type-grid input[type="checkbox"] { width: auto; margin: 3px 0 0; flex-shrink: 0; }
@media (max-width: 400px) { .project-type-grid { grid-template-columns: 1fr; } }

/* ---------- footer ----------
   Three columns on desktop (brand/about, quick links, contact), stacking
   brand first, then links and contact side by side on tablet, then one
   column on phones. Body text uses the near-white on-dark color rather
   than the sitewide gray paragraph color, which read as too faint on navy.
   Column headings are h2s styled small (semantic sections, not display
   headings), so they are excluded from the large sitewide h2 styling. */
/* The extra bottom padding keeps the legal links clear of the chat
   widget's bubble, which is fixed to the bottom-right corner. */
.site-footer { background: var(--bg-dark); color: rgba(var(--on-dark-rgb), .86); padding: 72px 0 96px; font-size: .97rem; line-height: 1.6; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .9fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 1100px) { .footer-grid { gap: 48px; } }
@media (max-width: 960px) {
  .site-footer { padding: 56px 0 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }

.site-footer .footer-heading {
  font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-accent-on-dark); margin: 0 0 18px; line-height: 1.3;
}
.footer-col--brand .footer-heading {
  font-family: var(--font-head); font-size: 1.3rem; letter-spacing: 0; text-transform: none;
  color: var(--on-dark); margin-bottom: 14px;
}
.site-footer p { color: rgba(var(--on-dark-rgb), .86); margin: 0; }
.footer-col--brand p { max-width: 40ch; }

.site-footer ul { list-style: none; }
.site-footer a { color: rgba(var(--on-dark-rgb), .9); transition: color .15s ease; }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline-color: var(--color-accent-on-dark); }

.footer-links li + li { margin-top: 10px; }
.footer-links a { display: inline-block; padding: 2px 0; }

/* Contact rows: icon + value, values in full near-white so they read first. */
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; }
.footer-contact li + li { margin-top: 12px; }
.footer-contact__icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); margin-top: 3px; }
.footer-contact a { color: var(--on-dark); font-weight: 600; }
.footer-contact span { color: rgba(var(--on-dark-rgb), .86); }
/* Email has no natural break points; keep it on one line where the column
   is wide enough, and let it wrap anywhere on narrow phones. */
.footer-contact a[href^="mailto:"] { white-space: nowrap; }
@media (max-width: 1000px) {
  .footer-contact a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
}

/* Small text-link CTAs (not buttons): the light accent tint, which has
   strong contrast on navy, bold with an arrow. */
.site-footer .footer-cta { display: inline-block; margin-top: 18px; padding: 4px 0; font-weight: 700; color: var(--color-accent-on-dark); }
.site-footer .footer-cta:hover,
.site-footer .footer-cta:focus-visible { color: var(--on-dark); }
/* The Contact heading and the CTA links are indented by the contact icon
   width (18px) plus its gap (12px), so they line up with the contact text. */
.site-footer .footer-heading--contact { padding-left: 30px; }
.footer-cta-group { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; padding-left: 30px; }
.footer-cta-group .footer-cta { margin-top: 4px; }

/* Bottom bar: copyright left, compact legal links right; stacks on phones. */
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px;
  border-top: 1px solid rgba(var(--on-dark-rgb), .12); margin-top: 56px; padding-top: 24px;
  font-size: .88rem;
}
.site-footer .footer-copyright { color: rgba(var(--on-dark-rgb), .75); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer .footer-legal a { color: rgba(var(--on-dark-rgb), .82); }
/* Stacked and left-aligned from tablet down, so the legal links never sit
   under the chat bubble in the bottom-right corner. */
@media (max-width: 960px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 40px; }
}
/* Phones: taller rows so footer links are comfortable tap targets. */
@media (max-width: 767px) {
  .footer-links li + li { margin-top: 0; }
  .footer-links a { padding: 9px 0; }
  .footer-legal { gap: 0 24px; }
  .footer-legal a { display: inline-block; padding: 9px 0; }
}

/* ---------- article pages (about, FAQ, team, careers, legal) ---------- */
.article { max-width: 820px; }
.article h1 { margin-bottom: 14px; }
.article h2 { margin-top: 40px; }
.article h3 { margin-top: 26px; }
.article ul, .article ol { margin: 0 0 1rem 1.3em; color: var(--ink-soft); }
.article li { margin-bottom: .45rem; }
.article__date { margin-top: -4px; }
/* Long article pages (Terms of Service): an "On this page" list, and
   section anchors that clear the sticky header when jumped to. */
.article h2[id] { scroll-margin-top: calc(var(--header-height) + 16px); }
.article__toc { margin: 28px 0 8px; padding: 20px 24px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); }
.article__toc-title { margin: 0 0 8px; font-weight: 700; color: var(--ink); }
.article .article__toc ul { margin: 0; list-style: none; columns: 2; column-gap: 32px; }
.article .article__toc li { margin-bottom: .35rem; break-inside: avoid; }
@media (max-width: 600px) { .article .article__toc ul { columns: 1; } }
/* scroll-margin-top keeps a category heading from being hidden under the
   sticky .site-header when a "Browse FAQs" anchor link jumps to it. */
.faq-page h2 { font-size: 1.35rem; margin-top: 34px; scroll-margin-top: calc(var(--header-height) + 16px); }
/* Center each FAQ category heading (the h2s with an id, one per
   category; "Browse FAQs" has no id and is unaffected) and give clearer
   separation between one category's accordion group and the next
   heading. The `.faq +` sibling selector only matches a heading that
   follows an accordion group, so the first category keeps the page's
   normal .faq-page h2 margin instead of picking up the extra gap. 68px
   reuses the same "generous gap below a heading" value already used at
   desktop widths by the .split--wide-left/-right/image-narrow rules. */
.faq-page h2[id] { text-align: center; }
.faq + h2[id] { margin-top: 48px; }
@media (min-width: 801px) {
  .faq + h2[id] { margin-top: 68px; }
}
/* With 15 Browse FAQs categories, the 2-column tablet layout (see
   .linklist's 800px breakpoint) would otherwise leave a lone card sitting
   alone in the first column of the last row. Span it full width instead,
   scoped to just this page's nav grid. */
@media (max-width: 800px) and (min-width: 501px) {
  .faq-browse-grid .linklist li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Equal-height FAQ topic cards: some labels wrap to two lines and others
   don't, which left shorter cards looking smaller since .linklist a sizes
   to its own content rather than stretching to fill its grid cell. A
   shared min-height on every row plus a flex-centered anchor keeps every
   card the same height and the label vertically centered, at any label
   length, without sizing individual cards by hand. */
.faq-browse-grid .linklist { grid-auto-rows: minmax(92px, auto); }
.faq-browse-grid .linklist a { height: 100%; display: flex; align-items: center; }
@media (max-width: 500px) {
  .faq-browse-grid .linklist { grid-auto-rows: minmax(64px, auto); }
}
.contact-list { list-style: none; margin: 22px 0; }
.contact-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.team-grid { margin-top: 24px; }
.team-card .role { color: var(--accent); font-weight: 700; font-size: .9rem; margin-bottom: 8px; }

/* phone link — class is a stable hook for WhatConverts dynamic number insertion */
.wc-phone { font-weight: 700; }

/* Page-specific photographic CTA bands (Roswell pattern), each scoped
   to its own page so the shared .cta-band rule stays untouched. */
.cta-band--kitchen {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-4.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--bathroom {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-1.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--basement {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-5.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--wholehome {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-8.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--additions {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-6.jpg');
  background-size: cover;
  background-position: center 25%;
}
.cta-band--newconstruction {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/home-construction-interior-progress.webp');
  background-size: cover;
  background-position: center;
}
.cta-band--gc {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-6.jpg');
  background-size: cover;
  background-position: center 25%;
}
.cta-band--outdoorkitchen {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-7.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--acworth {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-8.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--alpharetta {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-4.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--cherokee {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-5.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--cobb {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-1.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--fulton {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-4.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--johnscreek {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-2.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--kennesaw {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-5.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--milton {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-8.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--sandysprings {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-7.jpg');
  background-size: cover;
  background-position: center;
}
.cta-band--woodstock {
  background-image: linear-gradient(rgba(27,58,92,.8), rgba(27,58,92,.8)), url('images/img-6.jpg');
  background-size: cover;
  background-position: center 25%;
}

/* ---------- About page (about.astro) ----------
   Everything below is scoped to .about-page so no other page changes.
   The page is composed from existing pieces (.section--ivory/--stone/
   --dark, .eyebrow, .split, .card, .card--project, .linklist, .btn);
   these rules only add the spacing, panels, and grid layouts it needs. */
.about-page > .section { padding: 88px 0; }
@media (max-width: 900px) { .about-page > .section { padding: 64px 0; } }
@media (max-width: 600px) { .about-page > .section { padding: 48px 0; } }

.about-page .section__lead { font-size: 1.06rem; line-height: 1.7; max-width: 65ch; }
.about-page .section__lead p:last-child { margin-bottom: 0; }
.about-page .center .section__lead { margin-left: auto; margin-right: auto; }
.about-page h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); margin-bottom: .5em; }
/* The H1 is followed by .section__lead, which the sitewide
   h2 + .section__lead rule doesn't reach; give it the same spacing. */
.about-page h1 + .section__lead { margin-top: 24px; }
@media (min-width: 801px) { .about-page h1 + .section__lead { margin-top: 32px; } }
.about-actions { margin-top: 32px; margin-bottom: 0; }

/* Two-column sections: wider copy column (~620px of text), panel or
   link grid on the right, both top-aligned. Stacks with .split at 800px. */
.about-split { grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
/* Stacks earlier than the generic .split (960px, not 800px): at tablet
   widths the panel and location grid were too narrow side by side. */
@media (max-width: 960px) { .about-split { grid-template-columns: 1fr; gap: 36px; } }

/* Feature panels */
.about-panel { border-radius: var(--radius); padding: 40px 36px; }
@media (max-width: 600px) { .about-panel { padding: 30px 24px; } }
.about-panel h2,
.about-panel h3 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 20px; }
.about-panel p { margin-bottom: 0; font-size: 1.04rem; line-height: 1.7; }
.about-panel--navy { background: var(--bg-dark); color: var(--on-dark); box-shadow: var(--shadow-md); }
.about-panel--navy h2 { color: var(--on-dark); }
.about-panel--stone { background: var(--bg-stone); border-top: 3px solid var(--accent); }
.about-panel--ivory { background: var(--bg-ivory); border: 1px solid var(--line); }
/* Hero panel sits beside the H1 block; nudge it down to start near the
   heading rather than above it on desktop. */
@media (min-width: 961px) { .about-hero .about-panel { margin-top: 36px; } }
@media (max-width: 960px) { .about-split > .about-panel { max-width: 620px; } }
.about-hero .about-panel { align-self: start; }

.about-checks { list-style: none; }
.about-checks li {
  position: relative; padding: 14px 0 14px 32px; font-size: 1.04rem; line-height: 1.5;
  border-top: 1px solid var(--line); color: var(--ink);
}
.about-checks li::before {
  content: "\2713"; position: absolute; left: 2px; top: 14px; font-weight: 700; color: var(--accent);
}
.about-panel--navy .about-checks li { color: var(--on-dark); border-top-color: rgba(var(--on-dark-rgb), .16); }
.about-panel--navy .about-checks li::before { color: var(--color-accent-on-dark); }

/* Trust strip: darker navy and more vertical room than the default bar. */
.trust-bar--about { background: var(--bg-dark); }
.trust-bar--about li { background: var(--bg-dark); padding: 36px 28px; font-size: 1rem; line-height: 1.5; }
.trust-bar--about li span { margin-bottom: 8px; }
@media (max-width: 960px) { .trust-bar--about ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .trust-bar--about li { padding: 26px 20px; } }
@media (max-width: 440px) { .trust-bar--about ul { grid-template-columns: 1fr; } }

/* What You Can Expect: 3 + 2 cards, the second row centered at the same
   card width rather than stretched. Plain white cards (no copper top
   bar) so the copper-topped How We Work cards stay distinct. */
.about-expect { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 40px; }
.about-expect .about-card { flex: 0 1 calc((100% - 48px) / 3); }
@media (max-width: 900px) { .about-expect .about-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 600px) { .about-expect .about-card { flex-basis: 100%; } }
.about-card { border-top: 1px solid var(--line); padding: 30px 28px; }
.about-card p,
.about-approach .card p { font-size: 1rem; line-height: 1.7; }

/* What We Do: name-only service cards reusing the homepage project card. */
.about-services { margin-top: 40px; }
.about-service-card .card__body { padding: 26px 24px; }
.about-service-card h3 { font-size: 1.2rem; line-height: 1.25; min-height: calc(1.2rem * 1.25 * 2); }
.about-service-card .card__link { min-height: 0; padding-top: 14px; }
@media (max-width: 600px) {
  .about-service-card h3 { min-height: 0; }
}

/* Where We Work: compact location cards in the right column. */
.about-areas .linklist { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.about-areas .linklist a { padding: 14px 18px; font-size: .97rem; height: 100%; display: flex; align-items: center; }
@media (max-width: 960px) { .about-areas .linklist { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .about-areas .linklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .about-areas .linklist { grid-template-columns: 1fr; } }
.about-textlink { font-weight: 700; color: var(--accent); display: inline-block; margin-top: 24px; padding: 6px 0; }
.about-textlink:hover { color: var(--accent-dark); }

/* How We Work: roomier copper-topped cards. */
.about-approach { margin-top: 40px; gap: 24px; }
.about-approach .card { padding: 34px 32px; }
@media (max-width: 600px) { .about-approach .card { padding: 28px 24px; } }

/* Final CTA */
/* The lighter brand navy used by the site's other CTA bands, so the
   section stands apart from the darker footer below it. */
.about-page > .about-cta { background: var(--brand); }
.about-cta .section__lead { color: rgba(var(--on-dark-rgb), .86); max-width: 60ch; }
.about-cta__call { margin: 20px 0 0; font-weight: 700; font-size: 1.04rem; }
.about-cta__call a { color: var(--on-dark); text-decoration: none; display: inline-block; padding: 8px 4px; }
.about-cta__call a:hover { color: var(--color-accent-on-dark); }
.about-cta__call a:focus-visible { outline-color: var(--color-accent-on-dark); }

/* ---------- Estimate page (estimate.astro) ----------
   Scoped to the Estimate page's own classes; Contact uses the same
   LeadFormSection without these hooks and is unchanged. The GHL iframe
   and the .form-card--embed-tight width that keeps it rendering at its
   known-good 474px are left as they are. */
.estimate-section { padding: 80px 0 72px; background: var(--bg-ivory); }
@media (max-width: 900px) { .estimate-section { padding: 60px 0 64px; } }
@media (max-width: 600px) { .estimate-section { padding: 44px 0 48px; } }

/* Desktop: copy and the phone callout stack in the left column while the
   form card spans both rows on the right. Mobile (.split stacks at
   800px): intro, then the form, then the phone callout. */
.estimate-split {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "intro form" "after form";
  column-gap: 72px; row-gap: 32px;
}
.estimate-split > .lead-form__intro { grid-area: intro; }
.estimate-split > .form-card { grid-area: form; }
.estimate-split > .lead-form__after { grid-area: after; }
/* Stacks at 1000px rather than .split's 800px: beside the fixed 492px
   form card, the copy column was too narrow at tablet widths. */
@media (max-width: 1000px) {
  .estimate-split { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "after"; row-gap: 36px; }
}

/* H1-to-intro spacing lives on the H1 only (the sitewide reset zeroes all
   margins); the intro has no top margin so nothing can cancel it out.
   24px desktop, 18px mobile. */
.estimate-split h1 { margin-bottom: 18px; }
@media (min-width: 801px) { .estimate-split h1 { margin-bottom: 24px; } }
.estimate-intro {
  margin: 0; max-width: 540px; font-size: 1.1rem; line-height: 1.7; color: var(--ink);
}
.estimate-subhead { font-size: 1.35rem; margin: 48px 0 20px; }
@media (max-width: 600px) { .estimate-subhead { margin-top: 36px; } }

.estimate-steps { list-style: none; max-width: 540px; }
.estimate-steps li { display: flex; gap: 18px; align-items: flex-start; }
.estimate-steps li + li { margin-top: 22px; }
.estimate-steps__num {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; margin-top: 1px;
}
.estimate-steps h3 { font-size: 1.1rem; margin: 4px 0 4px; }
.estimate-steps p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); }

/* Warm stone card so the form stands apart from the white page. The GHL
   form itself renders white inside the iframe, so it reads as a white
   panel set into the tinted card. */
.estimate-split > .form-card { background: var(--bg); border-color: var(--line); box-shadow: var(--shadow-sm); }

/* Form card addition: a heading above the iframe.
   Horizontal padding lines the text up with GHL's own field inset. */
.form-card__header { padding: 22px 18px 6px; text-align: center; }
.form-card__header h2 { font-size: 1.35rem; margin: 0 0 6px; }
.form-card__header p { margin: 0; font-size: .98rem; color: var(--ink); }

/* Phone callout */
.estimate-call {
  display: flex; gap: 14px; align-items: flex-start; max-width: 540px;
  background: var(--bg-stone); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px;
}
.estimate-call__icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent); margin-top: 3px; }
.estimate-call h2 { font-size: 1.15rem; margin: 0 0 4px; }
.estimate-call p { margin: 0; font-size: 1rem; color: var(--ink); }
.estimate-call a { font-weight: 700; color: var(--brand); white-space: nowrap; display: inline-block; padding: 4px 0; }
.estimate-call a:hover { color: var(--accent); }



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

/* ---------- mobile sticky conversion bar ----------
   Mobile only (same 900px breakpoint as the mobile nav), on pages that
   opt in via BaseLayout's mobileCta prop (on by default). Two equal
   actions: outlined Call (secondary) and copper Get Estimate (primary).
   body.has-mobile-cta reserves room at the bottom so content and the
   footer never sit underneath the bar. */
.mobile-cta { display: none; }
@media (max-width: 900px) {
  body.has-mobile-cta { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-dark); border-top: 1px solid rgba(var(--on-dark-rgb), .14);
    box-shadow: 0 -6px 18px rgba(var(--color-secondary-rgb), .18);
  }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; border-radius: var(--radius); border: 2px solid transparent;
    font-weight: 700; font-size: 1rem; text-decoration: none;
  }
  .mobile-cta__call { border-color: rgba(var(--on-dark-rgb), .6) !important; color: var(--on-dark); }
  .mobile-cta__call:hover { color: var(--on-dark); background: rgba(var(--on-dark-rgb), .08); }
  .mobile-cta__estimate { background: var(--accent); border-color: var(--accent) !important; color: var(--on-dark); }
  .mobile-cta__estimate:hover { background: var(--accent-dark); color: var(--on-dark); }
  .mobile-cta a:focus-visible { outline-color: var(--color-accent-on-dark); outline-offset: 2px; }
  .mobile-cta__icon { width: 18px; height: 18px; }

  /* Room for the GHL chat bubble (fixed at right:20px, bottom:20px, 58px
     wide, inside the widget's shadow DOM) so it sits beside the buttons
     instead of on top of them. Do not style <chat-widget> itself: making
     it a transformed/sized box turns it into the containing block for the
     widget's fixed elements, which collapses the full-screen mobile chat
     window to 0x0 the moment it opens. */
  .mobile-cta { padding-right: 92px; }
  @media (max-width: 360px) { .mobile-cta a { font-size: .9rem; gap: 6px; } }
}

/* ---------- Powder Springs page (home-remodeling-in-powder-springs-ga.astro) ----------
   Spacing helpers only; cards, panels, link cards, and buttons reuse the
   existing .card / .card--project / .about-panel / .linklist / .btn styles. */
.ps-cards { margin-top: 40px; }
.linklist.ps-cards a { height: 100%; display: flex; align-items: center; }
@media (max-width: 800px) { .ps-cards { margin-top: 28px; } }
.ps-areas-link { margin: 32px 0 0; text-align: center; }
.ps-areas-link a { font-weight: 700; color: var(--accent); display: inline-block; padding: 6px 0; }
.ps-areas-link a:hover { color: var(--accent-dark); }
.ps-note { max-width: 65ch; margin: 24px 0 0; font-size: .95rem; color: var(--ink-soft); }
.ps-cta { margin: 32px 0 0; }
.ps-cta-note { margin: 14px 0 0; color: var(--ink-soft); }
/* Local Context: copy left, photo right, top-aligned; 4:3 photo cropped
   consistently so the column height stays predictable. */
.ps-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 961px) { .ps-photo-split .ps-photo { margin-top: 36px; } }

/* ---------- Cost & Timeline (components/CostTimeline.astro, location pages) ----------
   A white card-style table on desktop; below 700px each row becomes its own
   small card with labeled values, so nothing scrolls sideways. */
.cost-timeline__subhead { margin: 40px 0 16px; font-size: 1.3rem; }
.cost-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.cost-table th, .cost-table td { padding: 16px 22px; text-align: left; vertical-align: middle; }
/* Neutralize the sitewide table rules (navy th, zebra rows, bottom borders). */
.cost-table th, .cost-table td { border-bottom: 0; font-size: inherit; }
.cost-table tbody tr th, .cost-table tbody tr td { background: transparent; }
.cost-table tbody th { color: var(--brand); font-weight: 700; }
.cost-table thead th {
  background: var(--brand); color: var(--on-dark); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.cost-table tbody tr + tr th, .cost-table tbody tr + tr td { border-top: 1px solid var(--line); }
.cost-table tbody th { font-family: var(--font-head); font-size: 1.05rem; }
.cost-table tbody th a { color: var(--brand); }
.cost-table tbody th a:hover { color: var(--accent); }
.cost-table td { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) {
  .cost-table, .cost-table tbody, .cost-table tr, .cost-table th, .cost-table td { display: block; width: 100%; }
  .cost-table { background: none; border: 0; box-shadow: none; overflow: visible; }
  .cost-table thead { display: none; }
  .cost-table tbody tr {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 12px;
  }
  .cost-table th, .cost-table td { padding: 0; border: 0 !important; white-space: normal; }
  .cost-table tbody th { margin-bottom: 8px; }
  .cost-table td { display: flex; justify-content: space-between; gap: 12px; font-size: .97rem; padding: 4px 0; }
  .cost-table td { white-space: nowrap; text-align: right; }
  .cost-table td::before { content: attr(data-label); font-weight: 400; color: var(--ink-soft); white-space: normal; text-align: left; }
}
.cost-timeline__source { margin: 14px 0 0; font-size: .85rem; color: var(--ink-soft); max-width: 80ch; }
.cost-timeline__factors { margin-top: 40px; gap: 32px 48px; }
.cost-timeline__factors h3 { font-size: 1.2rem; margin-bottom: 10px; }
.cost-timeline__factors p { margin: 0; color: var(--ink); line-height: 1.7; }
.cost-timeline__disclaimer {
  margin: 32px 0 0; padding: 16px 20px; border-left: 3px solid var(--accent);
  background: rgba(var(--color-secondary-rgb), .04); font-size: .95rem; color: var(--ink); max-width: 80ch;
}

/* ---------- 404 page (src/pages/404.astro) ---------- */
.not-found .section__lead { margin-left: auto; margin-right: auto; }
.not-found h1 + .section__lead { margin-top: 24px; }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
@media (min-width: 801px) { .not-found__actions { margin-top: 64px; } }
.not-found__links { max-width: 760px; margin: 40px auto 0; text-align: left; }

/* ---------- Homepage mobile presentation (index.astro, body.page-home) ----------
   Desktop is unchanged: the only desktop-facing rules here hide the new
   mobile-only links. Everything else is inside the phone breakpoint
   (<=767px) or the existing <=900px sticky-bar breakpoint. */
.label-mobile, .faq-more, .m-only { display: none; }

/* Sticky bar on the homepage waits until the hero has scrolled away
   (body.sticky-deferred is added by a small IntersectionObserver script). */
@media (max-width: 900px) {
  body.sticky-deferred .mobile-cta { transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  body.sticky-deferred.sticky-revealed .mobile-cta { transform: none; visibility: visible; transition: transform .2s ease; }
}

@media (max-width: 767px) {
  /* Mobile-only / desktop-only copy variants (headings, steps, CTA labels) */
  body.page-home .d-only { display: none !important; }
  body.page-home .m-only { display: revert; }
  body.page-home .label-desktop { display: none; }
  body.page-home .label-mobile { display: inline; }

  body.page-home .section { padding: 56px 0; }
  body.page-home h2 { font-size: clamp(1.75rem, 7.5vw, 2rem); }
  body.page-home h3 { font-size: 1.25rem; }
  body.page-home h2 + .section__lead,
  body.page-home .section__lead.m-only { margin-top: 14px; }
  body.page-home .section__lead { font-size: 1.0625rem; }

  /* Hero: the photo as the background with H1 and one primary button over
     it, sitting low on a bottom-up gradient so the room stays visible above.
     Height follows the content plus a band of photo (no full-screen height).
     Paragraph, note, and call button are hidden. */
  .hero--compact-mobile { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(400px, 108vw, 480px); }
  .hero--compact-mobile .hero__media img { object-position: 58% 50%; }
  .hero--compact-mobile::after {
    background: linear-gradient(0deg, rgba(7, 27, 51, .82) 0%, rgba(7, 27, 51, .6) 38%, rgba(7, 27, 51, .12) 70%, rgba(7, 27, 51, 0) 100%);
  }
  .hero--compact-mobile .hero__inner { width: 100%; padding: 120px 20px 32px; }
  .hero--compact-mobile h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 2.75rem); line-height: 1.1; margin: 0; max-width: 13ch; }
  .hero--compact-mobile .hero__inner > p,
  .hero--compact-mobile .hero__cta .btn--ghost { display: none; }
  .hero--compact-mobile .hero__cta .btn:not(.btn--ghost) {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px;
    padding: 12px 20px; font-size: 1.0625rem; line-height: 1.3; text-align: center;
  }
  .hero--compact-mobile .hero__cta { margin-top: 20px; }
  /* Short phones (e.g. 320x568): less photo above the heading so the button
     sits above GHL's greeting popup, which opens over the lower screen. */
  @media (max-height: 640px) {
    .hero--compact-mobile { min-height: 0; }
    .hero--compact-mobile .hero__inner { padding-top: 84px; }
  }

  /* "Explore Remodeling Services": a quiet text link right under the hero */
  body.page-home .hero-after-link { margin: 0; padding: 6px 20px; text-align: center; background: var(--bg); }
  body.page-home .hero-after-link a {
    display: inline-block; padding: 10px 4px; font-weight: 600; color: var(--brand);
    text-decoration: underline; text-decoration-color: rgba(var(--color-accent-rgb), .6); text-underline-offset: 4px;
  }

  /* Trust strip: three short points in one quiet row (the fourth is hidden) */
  body.page-home .trust-bar ul { grid-template-columns: repeat(3, 1fr); }
  body.page-home .trust-bar li:nth-child(n + 4) { display: none; }
  body.page-home .trust-bar li { padding: 14px 8px; font-size: 0; text-align: center; display: flex; align-items: center; justify-content: center; }
  body.page-home .trust-bar li span { margin: 0; font-size: .8125rem; line-height: 1.35; letter-spacing: .06em; }

  /* Services: one card per row, then a text link to all services */
  body.page-home .section--projects { padding: 56px 0; }
  body.page-home .project-grid { margin-top: 24px; gap: 18px; }
  body.page-home .card--mobile-hidden { display: none; }
  body.page-home .card--project .card__media,
  body.page-home .card--project-featured .card__media { aspect-ratio: 3 / 2; }
  body.page-home .card--project .card__body { padding: 18px 20px 20px; }
  body.page-home .card--project h3 { font-size: 1.25rem; min-height: 0; }
  body.page-home .card--project .card__body p { font-size: 1rem; }
  body.page-home .card--project .card__link { min-height: 0; padding-top: 12px; font-size: 1rem; }
  body.page-home .project-grid-cta { margin-top: 24px; }
  body.page-home .project-grid-cta .btn {
    background: none; border: 0; box-shadow: none; padding: 8px 0; color: var(--accent); font-weight: 700;
  }

  /* Showcase photos: a horizontal swipe row instead of three tall stacked images */
  body.page-home .showcase-grid {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-top: 20px !important;
    padding-bottom: 6px; overscroll-behavior-x: contain;
  }
  body.page-home .showcase-item { scroll-snap-align: start; }
  body.page-home .showcase-item figcaption { margin-top: 8px; font-size: .95rem; }

  /* How a Project Inquiry Works: three plain numbered steps */
  body.page-home .inquiry-steps { list-style: none; counter-reset: step; margin: 24px 0 0; padding: 0; }
  body.page-home .inquiry-steps li { counter-increment: step; position: relative; padding-left: 52px; }
  body.page-home .inquiry-steps li + li { margin-top: 24px; }
  body.page-home .inquiry-steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: var(--on-dark); font-weight: 700; font-size: 1rem;
  }
  body.page-home .inquiry-steps h3 { margin: 4px 0 6px; }
  body.page-home .inquiry-steps p { margin: 0; font-size: 1rem; }
  body.page-home .process-cta .btn { width: 100%; text-align: center; min-height: 50px; }

  /* Process: a vertical numbered timeline instead of four cards */
  body.page-home .process-steps { gap: 0; border-left: 2px solid rgba(var(--color-accent-rgb), .45); margin-left: 6px; }
  body.page-home .process-steps .card {
    background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 22px 22px; position: relative;
  }
  body.page-home .process-steps .card::before {
    content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
  }
  body.page-home .process-steps .card:last-child { padding-bottom: 0; }
  body.page-home .process-steps .card:hover { transform: none; }
  body.page-home .process-steps h3 { font-size: 1.12rem; margin-bottom: 4px; }
  body.page-home .process-steps p { font-size: .97rem; }

  /* Service areas: Marietta first, a few nearby areas, then View all */
  body.page-home .area-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.page-home .area-cards .area--more { display: none; }
  body.page-home .area-cards .area--primary { order: -1; grid-column: 1 / -1; }
  body.page-home .area-cards .area--viewall { grid-column: 1 / -1; }
  body.page-home .area-card { padding: 12px 14px; }

  /* Supporting sections sit a little tighter than the main ones */
  body.page-home .section--showcase,
  body.page-home .section--areas,
  body.page-home .section--faq { padding: 48px 0; }

  /* Fewer Surprises points */
  body.page-home .surprises { gap: 28px; }
  body.page-home .surprise-points li + li { margin-top: 22px; }
  body.page-home .surprise-points h3 { font-size: 1.15rem; }
  body.page-home .surprise-points p { font-size: 1rem; }

  /* FAQ preview: four plain rows with thin separators, then a link to the full FAQ page */
  body.page-home .faq { margin-top: 20px !important; border-top: 1px solid var(--line); }
  body.page-home .faq--mobile-hidden { display: none; }
  body.page-home .faq details { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
  body.page-home .faq summary { font-size: 1.0625rem; line-height: 1.35; padding: 16px 32px 16px 0; min-height: 48px; position: relative; }
  body.page-home .faq summary::after { position: absolute; right: 2px; top: 16px; float: none; }
  body.page-home .faq details > p { font-size: 1rem; }
  body.page-home .faq-more { display: block; text-align: center; margin: 20px 0 0; }
  body.page-home .faq-more a { font-weight: 700; color: var(--accent); display: inline-block; padding: 8px 0; }

  /* Final CTA: heading, one sentence, one button */
  body.page-home .contact-band { padding: 56px 0; }
  body.page-home .contact-band h2 + p { margin-top: 14px; }
  body.page-home .contact-band .btn { width: 100%; text-align: center; min-height: 52px; }
}

/* ---------- Service Areas hero map (service-areas.astro) ---------- */
.areas-hero__map {
  width: 100%; height: auto; margin-top: 36px;
  border-radius: var(--radius); box-shadow: var(--shadow-md); border: 1px solid var(--line);
}
@media (max-width: 600px) { .areas-hero__map { margin-top: 24px; } }
.areas-hero__map--embed { display: block; aspect-ratio: 16 / 9; height: auto; min-height: 340px; }
@media (max-width: 600px) { .areas-hero__map--embed { aspect-ratio: 4 / 5; } }
/* Interactive (Leaflet) version of the hero map */
.areas-hero__map--live { display: block; aspect-ratio: 16 / 9; height: auto; min-height: 340px; overflow: hidden; background: var(--bg-stone); z-index: 0; }
@media (max-width: 600px) { .areas-hero__map--live { aspect-ratio: 1 / 1; min-height: 300px; } }
.areas-hero__map-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.area-pin { background: none; border: 0; }
.area-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.areas-hero__map--live .leaflet-popup-content { font-family: var(--font-body); font-size: .95rem; line-height: 1.5; }
.areas-hero__map--live .leaflet-popup-content strong { color: var(--brand); }
.areas-hero__map--live .leaflet-popup-content a { color: var(--accent); font-weight: 700; }
.areas-hero__map--live .leaflet-tooltip { font-family: var(--font-body); font-weight: 600; }

/* ---------- Service Areas page content (service-areas.astro) ---------- */
.areas-hero__sub { margin: 18px 0 0; font-size: 1.2rem; font-weight: 600; color: var(--ink); max-width: 60ch; }
.areas-hero .areas-hero__lead { margin-top: 14px; }
.areas-cards { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 900px) { .areas-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .areas-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; } }
.areas-cards > li { display: flex; }
.areas-card {
  display: flex; flex-direction: column; width: 100%; padding: 18px 20px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.areas-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--ink); text-decoration: none; }
.areas-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.areas-card__title { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; color: var(--brand); }
.areas-card__body { margin-top: 6px; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.areas-card__link { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: .95rem; color: var(--accent); }
.areas-card:hover .areas-card__link { color: var(--accent-dark); }
.areas-actions { margin: 32px 0 0; }
.center .areas-actions { text-align: center; }
@media (max-width: 767px) {
  .areas-projects, .areas-hero { padding: 48px 0; }
  .areas-actions .btn { width: 100%; text-align: center; }
  .areas-hero__sub { font-size: 1.08rem; }
}

/* Heroes with an eyebrow (currently only the Powder Springs page): tighter
   eyebrow-to-H1 spacing and slightly higher content so more of the photo
   shows. Body copy capped at about 600px. */
.hero__eyebrow + h1 { margin-top: 6px; }
.hero__inner:has(> .hero__eyebrow) { padding-top: 72px; }
.hero__inner:has(> .hero__eyebrow) .hero__subheading ~ p { max-width: 37.5rem; }
@media (max-width: 767px) {
  .hero__inner:has(> .hero__eyebrow) { padding-top: 44px; padding-bottom: 40px; }
  .hero__inner:has(> .hero__eyebrow) h1 { font-size: clamp(1.75rem, 8.2vw, 2.2rem); }
}

/* ---------- Homepage refinements (index.astro) ----------
   Trust strip weight, the Fewer Surprises points, service-area navigation
   cards, FAQ intro, the simplified final CTA, and section pacing. Desktop
   paddings sit between 64px and 88px: the main sections (services, process,
   final CTA) get more room than the supporting ones. */
.process-step__num { color: var(--accent); }

.surprises { align-items: start; }
@media (min-width: 801px) { .surprises { grid-template-columns: 1fr 1.2fr; gap: 72px; } }
.surprises__intro p { font-size: 1.0625rem; max-width: 34rem; }
.surprises__intro .btn { margin-top: 8px; }
.surprise-points { list-style: none; margin: 0; padding: 0; }
.surprise-points li { padding: 2px 0 2px 22px; border-left: 3px solid var(--accent); }
.surprise-points li + li { margin-top: 28px; }
.surprise-points h3 { font-size: 1.2rem; margin: 0 0 6px; }
.surprise-points p { margin: 0; color: var(--ink-soft); }

.area-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1000px) { .area-cards { grid-template-columns: repeat(3, 1fr); } }
.area-cards li { display: flex; }
.area-card {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.area-card__name { font-weight: 700; color: var(--brand); }
.area-card__link { font-size: .9rem; font-weight: 600; color: var(--accent); }
.area-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); text-decoration: none; }
.area-card:hover .area-card__link { color: var(--accent-dark); }
.area-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.faq-intro { margin-left: auto; margin-right: auto; text-align: center; color: var(--ink-soft); }

.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.contact-actions .btn--lg { padding: 14px 20px; font-size: 1rem; }
.contact-band .btn--ghost { color: var(--on-dark); border-color: rgba(var(--on-dark-rgb), .85); background: transparent; }
.contact-band .btn--ghost:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--brand); }
.contact-band .contact-note { margin: 16px 0 0; font-size: .95rem; }
.contact-note::before { content: "\2713  "; color: var(--color-accent-on-dark); font-weight: 700; }

@media (min-width: 768px) {
  body.page-home .trust-bar li { padding: 26px 24px; font-size: 1rem; }
  body.page-home .card--project .card__body p { font-size: 1rem; }
  body.page-home .section--projects { padding: 88px 0; }
  body.page-home .section--surprises,
  body.page-home .section--process,
  body.page-home .contact-band { padding: 80px 0; }
  body.page-home .section--showcase,
  body.page-home .section--areas,
  body.page-home .section--faq { padding: 64px 0; }
  body.page-home .faq summary { padding: 20px 0; }
  body.page-home .faq details > p { padding-bottom: 20px; }
}

/* ---------- About page: Project Communication section (.about-comms) ----------
   Narrower copy measure, tighter paragraph gap, a shorter panel centered
   against the copy, and heavier, evenly sized checklist rows. */
.about-comms .section__lead { max-width: 58ch; }
.about-comms .section__lead p { margin-bottom: 12px; }
.about-comms .about-panel { padding: 30px 32px 26px; }
.about-comms .about-panel h3 { margin-bottom: 12px; }
@media (min-width: 961px) { .about-comms > .about-panel { align-self: center; } }
.about-comms .about-checks li {
  display: flex; align-items: center; min-height: 54px; padding: 8px 0 8px 36px;
  font-weight: 600; color: var(--brand);
}
.about-comms .about-checks li::before { top: 50%; transform: translateY(-50%); font-size: 1.25rem; line-height: 1; }
.about-comms .about-actions .btn--ghost:hover,
.about-comms .about-actions .btn--ghost:focus-visible { background: var(--brand); border-color: var(--brand); color: var(--on-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
@media (max-width: 960px) { .about-comms { gap: 28px; } }
@media (max-width: 600px) {
  .about-comms .about-actions { margin-top: 24px; }
  .about-comms .about-actions .btn { display: block; width: 100%; text-align: center; }
  .about-comms .about-panel { padding: 22px 20px 16px; }
  .about-comms .about-checks li { min-height: 48px; padding-left: 30px; font-size: 1rem; }
  .about-comms .about-checks li::before { left: 0; font-size: 1.15rem; }
}

/* Estimate page additions: eyebrow and intro measure. */
.estimate-split .eyebrow { margin-bottom: 14px; }
.estimate-intro { max-width: 560px; }

/* Contact page: show the GHL form on its own, without the outer card
   frame. The iframe keeps its known-good 474px width on desktop. */
.contact-split > .form-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
@media (min-width: 801px) { .contact-split > .form-card { width: 474px; } }