/* FenceWorks design system — ported verbatim from fenceworks-site/index.html inline <style> (prototype).
   Asset URLs rewritten /assets/... -> ../... (relative to assets/css/). Re-port when the prototype changes. */
/* Self-hosted fonts — latin subset (replaces Google Fonts), font-display:swap. */
@font-face {font-family:'Bitter'; font-style:normal; font-weight:800; font-display:swap; src:url(../fonts/bitter-800-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/inter-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/inter-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/inter-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Metrics-matched fallback: sized so the pre-swap fallback occupies EXACTLY Inter's space, so the
   font swap can't reflow the hero (was CLS ~0.10). Derived from inter-400-latin.woff2 vs Arial.
   SPLIT BY WEIGHT on purpose: all three Inter faces above load the SAME inter-400 file, so 500/600
   are SYNTHESISED (faux-bold) and therefore wider than 400. One size-adjust cannot serve all three
   — the old single 107.47% face was right for 600 but 1.85% too WIDE at 400, which is body copy,
   and that was still flipping a line on long hero subs (a 270-char sub = 26.4px shift, everything
   below it moved). Ratios measured Inter/'Inter Fallback' over 206 real site headings, per weight.
   ascent/descent-override are rescaled per face so the line box is IDENTICAL across all three
   (effective ascent 1.0747*0.9014 = 0.9688, descent 1.0747*0.2245 = 0.2413). */
@font-face {font-family:'Inter Fallback'; font-weight:400; src:local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust:105.48%; ascent-override:91.85%; descent-override:22.87%; line-gap-override:0%;}
@font-face {font-family:'Inter Fallback'; font-weight:500; src:local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust:106.49%; ascent-override:90.97%; descent-override:22.66%; line-gap-override:0%;}
@font-face {font-family:'Inter Fallback'; font-weight:600; src:local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust:107.47%; ascent-override:90.14%; descent-override:22.45%; line-gap-override:0%;}
/* Metrics-matched fallback: Georgia sized to occupy EXACTLY Playfair's space so the
   display-font swap can't reflow long hero H1s (city pages' verbatim old titles wrap
   4-5 lines; a one-line difference shifted everything below — CLS 0.10-0.12).
   size-adjust is tuned to ADVANCE WIDTH, not cap-height: re-wrap is a width phenomenon,
   and the fallback is only on screen for <1s so width parity beats visual parity. Measured
   Playfair/Georgia over all 206 real H1s on the site -> median 1.0109 (was set to 102.36%,
   ~1.25pp too wide, which pushed long H1s one line over and shifted the page 33.6px).
   ascent/descent-override are rescaled by 102.36/101.09 so the line box is unchanged. */
@font-face {font-family:'Playfair Fallback'; src:local('Georgia'); size-adjust:101.09%; ascent-override:107.04%; descent-override:24.83%; line-gap-override:0%;}
@font-face {font-family:'Playfair Display'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/playfair-display-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/playfair-display-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* =========================================================
   FenceWorks of Georgia — homepage redesign (prototype)
   Mobile-first. Self-contained. Two-clip crossfade hero.
   ========================================================= */
:root {
  --brand-green-deep: #28492A;
  --brand-green:      #2F5D2A;
  --brand-green-tint: #F3F7EF;
  --ink:              #1f2421;
  --cta-amber:        #E08A1E;
  --cta-amber-dark:   #c5760f;
  --cta-red:          #C3461A;
  --cta-red-dark:     #A03812;
  --surface:          #F5F1E8;
  --hairline:         rgba(0,0,0,0.10);
  --hairline-light:   rgba(255,255,255,0.16);
  --text:        #2b302c;
  --text-muted:  #5f5f5a;
  --text-light:  #D9E4D2;
  --maxw: clamp(1120px, 90vw, 1920px); /* WP-theme divergence from the prototype's fixed 1120px (Austin, 2026-07-17): the page frame fills ~90% of any display (capped at 1920). Text blocks keep their own ch-based line caps; grids add columns. Keep when re-porting site.css. */
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20,30,18,0.05);
  --shadow-md: 0 8px 22px rgba(20,30,18,0.09);
  --shadow-lg: 0 18px 40px rgba(20,30,18,0.16);
  --shadow-card:       0 3px 8px rgba(20,30,18,0.10), 0 16px 34px rgba(20,30,18,0.18);
  --shadow-card-hover: 0 10px 20px rgba(20,30,18,0.13), 0 28px 56px rgba(20,30,18,0.26);
  --section-pad: clamp(54px, 9vw, 92px);
  --font-display: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* ⚠ The two font stacks below are spelled out LITERALLY instead of using var(--font-body) /
   var(--font-display) — on purpose, do not "tidy" them back into the custom properties.
   WP Rocket's Remove-Unused-CSS only keeps an @font-face whose family it sees named in a
   font-family declaration on a selector that matched the page. Our stacks lived only inside
   custom-property VALUES, which its analyzer can't trace, so it silently dropped the
   'Inter Fallback' / 'Playfair Fallback' faces from every optimized page — the stack then
   fell through to Segoe UI/Georgia with no metric overrides and the swap reflowed the page
   (header -1px site-wide, hero buttons -67.6px, H1 -33.6px => real mobile CLS up to 0.13,
   intermittent because a page served pre-RUCSS still had them). Naming the families here
   keeps the faces alive. Values are identical to the custom properties above. */
body { margin: 0; font-family: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; color: var(--text); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--brand-green); text-decoration: none; }
h1, h2, h3, h4 { font-family: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif; font-weight: 500; color: var(--ink); line-height: 1.18; margin: 0; }
p { margin: 0; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
:focus-visible { outline: 3px solid var(--cta-amber); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: var(--radius-sm); transition: top .15s ease; }
.skip-link:focus { top: 12px; }
/* Prose links must be underlined (link-in-text-block): brand green is ~1.4:1 vs body ink,
   so colour alone cannot carry a link. The wrapper pairs are NOT redundant — an <a> wrapped
   in inline formatting is a GRANDCHILD of the <p>, and the child combinator silently misses
   it. 4.B found 3 such links unstyled behind <em>; 4.F found 2 more behind <strong>
   (`p > em > strong > a`, `li > strong > a`) — so match on the <a>'s IMMEDIATE parent being
   any inline formatting element, at any depth inside the p/li. That closes the whole class
   instead of one tag per site check.
   ⚠ Do NOT collapse this to `main p a` / `main li a`. Measured site-wide 2026-07-25 (219
   URLs): that would newly capture the /news/ blog cards' `li > div > h2 > a` and
   `li > div > figure > a` and underline every card title. Austin ruled SURGICAL (4.B). */
main p > a:not([class]), main li > a:not([class]),
main p em > a:not([class]), main li em > a:not([class]),
main p strong > a:not([class]), main li strong > a:not([class]),
main p b > a:not([class]), main li b > a:not([class]),
main p i > a:not([class]), main li i > a:not([class]),
main p span > a:not([class]), main li span > a:not([class]) { text-decoration: underline; text-decoration-color: rgba(47,93,42,0.35); text-underline-offset: 3px; }
/* The weight lift applies only where the wrapper is NOT already bold — inside <strong>/<b>
   the anchor inherits 700, and forcing 500 would visibly THIN a deliberately bold term. */
main p > a:not([class]), main li > a:not([class]),
main p em > a:not([class]), main li em > a:not([class]),
main p i > a:not([class]), main li i > a:not([class]),
main p span > a:not([class]), main li span > a:not([class]) { font-weight: 500; }
main p > a:not([class]):hover, main li > a:not([class]):hover,
main p em > a:not([class]):hover, main li em > a:not([class]):hover,
main p strong > a:not([class]):hover, main li strong > a:not([class]):hover,
main p b > a:not([class]):hover, main li b > a:not([class]):hover,
main p i > a:not([class]):hover, main li i > a:not([class]):hover,
main p span > a:not([class]):hover, main li span > a:not([class]):hover { color: var(--brand-green-deep); text-decoration-color: currentColor; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 15px; padding: 12px 20px; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .05s ease; text-align: center; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-cta { background: var(--cta-red); color: #fff; }
.btn-cta:hover { background: var(--cta-red-dark); }
.btn-cta-outline { background: #fff; color: var(--cta-red-dark); border-color: var(--cta-red); }
.btn-cta-outline:hover { background: #fff7ec; }
.btn-outline-light { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-outline-light:hover { background: rgba(255,255,255,0.2); }

.ic { width: 18px; height: 18px; flex: none; }
.ic path, .ic circle { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.phone-link svg path { fill: currentColor; stroke: none; }
.stars { color: #E7A93B; letter-spacing: 1px; }

.site-header { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, #efe8d8 0%, #e9e1cf 100%); border-bottom: 1px solid rgba(0,0,0,0.10); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(20,30,18,0.12); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--cta-red), var(--cta-amber)); opacity: .85; pointer-events: none; }
/* Header tracks the window on wide screens instead of the 1120px text column */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; max-width: 1480px; padding-inline: clamp(20px, 3vw, 40px); }
/* ===== FenceWorks logo lockup (Bitter slab) — scales from one font-size ===== */
.fwg-logo { display: inline-flex; align-items: center; gap: 3em; color: var(--fwg-ink, #4e4e4e); font-family: "Bitter", Georgia, "Times New Roman", serif; line-height: 1; }
.fwg-logo__mark { height: 30em; width: auto; display: block; flex: none; }
.fwg-logo__type { width: 82.4em; display: flex; flex-direction: column; gap: 1.4em; }
.fwg-logo__line { text-align: center; white-space: nowrap; font-weight: 800; font-size: 13.9em; letter-spacing: 0; }
.fwg-logo__line--top { line-height: 0.92; }
.fwg-logo__line:not(.fwg-logo__line--top) { font-size: 12.6em; }  /* 'of Georgia' slightly smaller (Option C) */
.fwg-logo__est { display: flex; align-items: center; gap: 2.2em; width: 100%; margin-top: 0.2em; }
.fwg-logo__rule { flex: 1; height: 0.6em; background: var(--fwg-ink, #4e4e4e); }
.fwg-logo__estlabel { font-weight: 800; font-size: 5em; letter-spacing: 0.4em; white-space: nowrap; }
.brand .fwg-logo { font-size: 1.55px; }
.primary-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.phone-link { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-green); font-weight: 500; white-space: nowrap; }
.phone-link span { font-size: 15px; }
/* Narrow phones (<390px): brand + full number + hamburger no longer fit on one row, so drop the number text and keep the tap-to-call chip (bottom bar also has Call). */
@media (max-width: 389px) { .site-header .phone-link > span:last-child { display: none; } }
.site-header .phone-link { color: var(--brand-green); }
.site-header .phone-link:hover { color: var(--brand-green-deep); }
.site-header .phone-chip { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.header-quote { display: none; }
.header-quote.btn-cta { border: none; border-radius: 999px; padding: 10px 22px; font-weight: 500; background: var(--cta-red); box-shadow: 0 4px 14px rgba(229,82,31,0.42), inset 0 1px 0 rgba(255,255,255,0.30); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.header-quote.btn-cta:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 7px 22px rgba(229,82,31,0.52), inset 0 1px 0 rgba(255,255,255,0.34); background: var(--cta-red); }
.header-quote .ic-arrow { stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.header-quote:hover .ic-arrow { transform: translateX(3px); }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; background: none; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.nav-toggle span { height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { border-top: 1px solid var(--hairline); background: #fff; max-height: calc(100vh - var(--header-h, 72px)); max-height: calc(100dvh - var(--header-h, 72px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mobile-menu nav { display: flex; flex-direction: column; padding: 8px var(--gutter) 16px; }
/* Menu open (html.menu-open set by home.js): hide the Intaker chat bubble + Call-us button — their z-index (2147482900) puts them over the panel and covers the lower items. */
html.menu-open #icw, html.menu-open #icw--call--content { display: none !important; }
.mobile-menu a { padding: 12px 4px; color: var(--cta-red); border-bottom: 1px solid var(--hairline); font-weight: 500; }
.mobile-menu a:last-child { border-bottom: 0; }

/* ===== Nav dropdowns: shared + mobile accordion ===== */
.nav-item { display: inline-flex; align-items: center; }
.nav-trigger { display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.nav-chev { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .2s ease; }
.nav-panel { display: none; }
.m-acc { border-bottom: 1px solid var(--hairline); }
.m-acc-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 4px; background: none; border: 0; font: inherit; color: var(--cta-red); font-weight: 500; cursor: pointer; }
.m-acc-trigger .nav-chev { width: 14px; height: 14px; }
.m-acc-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.m-acc-panel { display: flex; flex-direction: column; padding: 0 0 10px 12px; }
.mobile-menu .m-acc-panel a { padding: 11px 4px; border-bottom: 0; color: #46463f; font-weight: 500; font-size: 14.5px; }
.m-head { display: block; font-family: var(--font-display); font-weight: 600; color: var(--cta-red); font-size: 13px; padding: 12px 4px 3px; }
.mobile-menu a.m-head { border-bottom: 0; color: var(--cta-red); font-family: var(--font-display); padding: 12px 4px 3px; }
.mobile-menu a.m-head:hover { color: var(--cta-red-dark); }
.mobile-menu .m-acc-panel .m-head { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--cta-red); padding: 12px 4px 3px; }
.m-grp { border-top: 1px solid var(--hairline); }
.m-acc-panel > .m-grp:first-of-type { border-top: 0; }
.m-grp-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 4px; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); text-align: left; line-height: 1.2; }
.m-grp-trigger .nav-chev { width: 14px; height: 14px; opacity: .7; transition: transform .2s ease; }
.m-grp-trigger[aria-expanded="true"] { color: var(--brand-green); }
.m-grp-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.m-grp-panel { display: flex; flex-direction: column; padding: 2px 0 10px 12px; }
.m-grp-panel[hidden] { display: none; }
.m-acc-panel[hidden] { display: none; }
.mobile-menu .m-acc-panel a.m-grp-viewall { color: var(--brand-green); font-weight: 600; }

/* ===== Trust badge band (auto-scrolling credential marquee, above reviews) ===== */
.badge-strip { position: relative; background: var(--surface); padding-block: clamp(10px, 1.4vw, 16px); }
.badge-strip::before, .badge-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cta-red), var(--cta-amber)); opacity: .85; pointer-events: none; z-index: 2; }
.badge-strip::before { top: -1px; }
.badge-strip::after { bottom: -1px; }
/* clip the moving track and soft-fade the badges in/out at the edges */
.badge-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* the track: two identical badge sets scrolling left forever (seamless at -50%) */
.badge-row { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; align-items: center; animation: badge-scroll 60s linear infinite; will-change: transform; }
.badge-row:hover { animation-play-state: paused; }
.badge-row li { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-right: clamp(40px, 6vw, 88px); }
.badge-row img { height: clamp(64px, 9vw, 108px); width: auto; display: block; }
.badge-row a { display: inline-flex; transition: transform .15s ease; }
.badge-row a:hover { transform: scale(1.06); }
@keyframes badge-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .badge-row { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 16px; }
  .badge-viewport { -webkit-mask-image: none; mask-image: none; }
  .badge-row li[aria-hidden="true"] { display: none; }
}

/* ---------- HERO (two-clip crossfade background) ---------- */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(540px, 82vh, 760px); background: var(--brand-green-deep); color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero-bg.is-active { opacity: 1; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,28,17,0.92) 0%, rgba(15,28,17,0.62) 55%, rgba(15,28,17,0.40) 100%); }
.hero-inner { position: relative; z-index: 2; width: 100%; padding-block: 56px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }
.rating-pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 7px 15px; border-radius: 999px; font-size: 13.5px; margin-bottom: 20px; }
.rating-pill strong { font-weight: 500; }
.hero h1 { color: #fff; font-size: clamp(36px, 8.8vw, 64px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 16px; text-shadow: 0 2px 22px rgba(0,0,0,0.35); }
/* em not ch — a ch cap resizes with the webfont swap; see the note in pages.css. 29.02em = 46ch in Inter. */
.hero-sub { font-family: var(--font-body); font-weight: 400; color: #eef3ea; font-size: clamp(15px, 4.2vw, 19px); line-height: 1.6; max-width: 29.02em; margin-bottom: 26px; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* First-fold quote form (Namendra V2-5) — desktop-only side-by-side card; on mobile the
   hero CTA anchors to the full #quote form instead (keeps the 375px fold + LCP/CLS intact). */
.hero-form { display: none; }
.hero-form-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); margin-bottom: 14px; }
.hero-form .field { margin-bottom: 12px; }
@media (min-width: 1000px) {
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 4vw, 64px); align-items: center; }
  .hero-form { display: block; }
}


.section-head { text-align: center; max-width: 62ch; margin: 0 auto 38px; }
.section-head h2 { font-size: clamp(26px, 5.4vw, 40px); letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 10px; }
.section-head p { color: var(--text-muted); font-size: 16px; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; text-align: left; max-width: none; }
.section-head--row h2 { font-size: clamp(26px, 5.4vw, 40px); letter-spacing: -0.015em; line-height: 1.1; }
.section-head--light h2 { color: #fff; }
.section-head--light p { color: var(--text-light); }
.link-arrow { color: var(--brand-green); font-weight: 500; font-size: 15px; white-space: nowrap; }
.split-card .link-arrow { display: inline-block; margin-top: 4px; }

/* ===== Atlanta fence installation company (intro copy directly below the hero).
   Restored old-site homepage paragraphs. Warm-sand band (breaks the plain white void below the
   hero) with an editorial text column at left and a soft green-tint "coverage" panel at right — the
   Smyrna-to-Dacula service-area sentence leads the panel under a route motif (two amber map-pins
   joined by a dashed line) with a faint coverage ring. CSS-only on purpose — the hero above is
   the LCP zone, no images here. A hairline seams the sand intro from the sand offer-zone below. ===== */
.intro { background: var(--surface); padding-block: var(--section-pad); border-bottom: 1px solid var(--hairline); }
.intro .container { max-width: 1080px; }
.intro .section-head { text-align: left; max-width: none; margin: 0 0 18px; }
.intro .section-head h2::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--brand-green); margin-top: 16px; }
.intro-cols { display: grid; gap: 40px; align-items: start; }
.intro-cols p { font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.intro-left p:last-child { margin-bottom: 0; }
.intro-cols a { color: var(--brand-green-deep); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.intro-cols a:hover { color: var(--brand-green); }
/* Right-hand coverage panel — soft green tint, serif service-area line, route motif + coverage ring. */
.intro-panel { position: relative; overflow: hidden; background: var(--brand-green-tint); border: 1px solid rgba(47,93,42,0.20); border-radius: 16px; padding: 32px 30px; box-shadow: var(--shadow-md); }
.intro-panel p { color: #4a5546; font-size: 15.5px; }
.intro-panel p:last-child { margin-bottom: 0; }
.intro-panel .route { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.intro-panel .route .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cta-amber); box-shadow: 0 0 0 4px rgba(224,138,30,0.20); flex: none; }
.intro-panel .route .line { flex: 1; height: 0; border-top: 2px dashed rgba(47,93,42,0.38); }
.intro-panel .intro-highlight { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.34; color: var(--brand-green-deep); margin: 0 0 16px; }
.intro-panel::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 230px; height: 230px; border-radius: 50%; border: 1px solid rgba(47,93,42,0.13); box-shadow: 0 0 0 24px rgba(47,93,42,0.04); pointer-events: none; }
@media (min-width: 880px) { .intro-cols { grid-template-columns: 1.12fr 0.88fr; gap: 48px; } }

/* .split sits alone inside .offer-zone (the aluminum-fence backdrop); .styles is now a
   separate standalone section further down the page. */
.split { background: transparent; padding-block: var(--section-pad) 64px; }
.split-grid { display: grid; gap: 18px; }
.split-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; }
.split-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.split-card--primary { border: 2px solid var(--brand-green); background: var(--brand-green-tint); }
.split-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--cta-amber); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .01em; padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-md); }
.split-body { padding: 22px; }
.split-body h3 { font-size: 22px; margin-bottom: 8px; }
.split-body p { color: #4a4a45; margin-bottom: 12px; }

.styles { background: var(--surface); padding-block: clamp(40px, 6vw, 60px) var(--section-pad); }
/* Fence photo crowns the "what we offer" intro (.split only). It's shown WHOLE at
   full width (background-size: 100% auto) so it's never zoomed/cropped; a soft top fade is
   baked into the brand sand so it dissolves into the --surface base. A light
   sand veil + eased contrast keep it calm and the headings legible.
   Alternate backdrop kept on disk: offer-bg.jpg (garden).
   The photo's baked-in BOTTOM fade can't be relied on: this box is sized by its content
   (~625px) while the image is sized by viewport width (100% auto -> ~800px at desktop), so the
   image is clipped mid-photo on a dark row and the baked fade never renders. The first gradient
   layer below re-creates that fade anchored to the box's bottom edge, so the dissolve lands on
   the seam at every viewport regardless of where the image happens to get cut. */
.offer-zone {
  background-color: var(--surface);
  background-image:
    linear-gradient(to top, #F5F1E8, rgba(245,241,232,0) 150px),
    linear-gradient(rgba(245,241,232,0.40), rgba(245,241,232,0.40)),
    url("../img/offer-bg-aluminum-1400.webp");
  background-repeat: no-repeat;
  background-position: bottom center, top center, top center;
  background-size: 100% 100%, 100% 100%, 100% auto;
}
/* The headings/subheads can sit over the photo, so darken the gray subhead a touch
   (the default medium gray washes out over imagery) to keep it readable. */
.offer-zone .section-head p { color: #474b44; }
/* flexbox (not grid) so the last, incomplete row of cards centers instead of left-aligning */
/* Styles section breaks out of the 1120px column so the fence tiles stay big on desktop —
   the fence IS the product; tiles must never shrink into skinny strips. */
.styles .container { max-width: max(1380px, var(--maxw)); }
.styles-intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 76px); align-items: center; max-width: 1020px; margin: 0 auto 54px; }
.styles-intro h2 { font-size: clamp(30px, 4vw, 40px); }
.styles-intro h2::after { content: ""; display: block; width: 54px; height: 3px; border-radius: 2px; background: var(--brand-green); margin-top: 16px; }
.styles-sub { color: var(--text-muted); margin: 16px 0 0; }
.styles-lead { font-size: 17px; color: var(--text); margin: 14px 0 0; }
.styles-qlist { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--brand-green); }
.styles-qlist li { display: flex; gap: 12px; align-items: baseline; padding: 13px 0 13px 22px; border-bottom: 1px solid var(--hairline); font-size: 16.5px; font-weight: 500; color: var(--ink); }
.styles-qlist li:last-child { border-bottom: 0; }
.styles-qlist li svg { flex: none; width: 16px; height: 16px; transform: translateY(2px); }
@media (max-width: 760px) { .styles-intro { grid-template-columns: 1fr; gap: 26px; } }
.section-divider { background: var(--surface); }
.section-divider .sd-inner { display: flex; align-items: center; gap: 6px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section-divider .sd-inner::before, .section-divider .sd-inner::after { content: ""; flex: 1; height: 1px; background: rgba(31,36,33,0.18); }
.section-divider .sd-inner::before { margin-right: 14px; }
.section-divider .sd-inner::after { margin-left: 14px; }
.section-divider span { width: 4px; border-radius: 2px; background: var(--brand-green); opacity: .6; }
.section-divider span:nth-child(1), .section-divider span:nth-child(5) { height: 13px; }
.section-divider span:nth-child(2), .section-divider span:nth-child(4) { height: 18px; }
.section-divider span:nth-child(3) { height: 22px; }

.styles-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.styles-grid > li { flex: 0 1 calc((100% - 18px) / 2); }
@media (min-width: 680px)  { .styles-grid > li { flex-basis: calc((100% - 36px) / 3); } }
@media (min-width: 1000px) { .styles-grid > li { flex-basis: calc((100% - 54px) / 4); } }
/* image on top; fence-type title + keyword description below it on the card (not overlaid on the photo) */
.style-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; border: 1px solid var(--hairline); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; }
/* height:auto is REQUIRED — without it the CLS width/height attrs act as a fixed pixel height,
   the 4/3 aspect-ratio is ignored, and every tile collapses into a skinny distorted strip. */
.style-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.style-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.style-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; text-align: left; }
.style-label { font-family: var(--font-display); font-weight: 600; font-size: 17.5px; color: var(--ink); line-height: 1.25; }
.style-desc { color: var(--text-muted); font-size: 14px; line-height: 1.55; }

/* ===== The FenceWorks difference (narrative: photo + rich text, sits between the
   residential/commercial split and the styles grid on the shared sand base) ===== */
.difference { background: var(--surface); padding-block: var(--section-pad); }
.difference-inner { display: grid; gap: 26px; align-items: center; }
.difference-media { margin: 0; }
.difference-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.difference-media figcaption { margin-top: 10px; color: var(--text-muted); font-size: 13.5px; }
.difference-copy h2 { font-size: clamp(26px, 5.4vw, 40px); letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 16px; }
.difference-copy p { font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
.difference-copy p:last-of-type { margin-bottom: 0; }
.difference-copy a { color: var(--brand-green-deep); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.difference-copy a:hover { color: var(--brand-green); }
/* Source order is photo -> copy -> photo, so on one column the story opens and closes on a
   photo instead of stacking both up front. On two columns the pair stacks in the left column,
   which the tall copy would otherwise leave half empty. */
@media (min-width: 880px) {
  .difference-inner { grid-template-columns: 1fr 1.15fr; gap: 46px; align-items: start; }
  .difference-media:nth-of-type(1) { grid-area: 1 / 1; }
  .difference-media:nth-of-type(2) { grid-area: 2 / 1; }
  .difference-copy { grid-area: 1 / 2 / span 2 / auto; }
}

.reviews { background: var(--brand-green-deep); color: #fff; padding-block: var(--section-pad); }
/* Auto-drifting review marquee (same treatment as the badge strip: continuous scroll,
   edge fade, pause to read). JS clones the card set for a seamless wrap; under
   prefers-reduced-motion it stays a plain hand-scrollable strip. */
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; margin-bottom: 18px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.reviews-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .reviews-track { scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.4) transparent; -webkit-mask-image: none; mask-image: none; }
  .reviews-track .gr-card { scroll-snap-align: start; }
}
/* Google-review cards, dark variant (same .gr-card anatomy as /reviews — avatar, linked name, date, stars, verbatim text) */
.reviews .gr-card { background: var(--brand-green-deep); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding: 18px; }
.reviews .gr-head { display: flex; align-items: center; gap: 10px; }
.reviews .gr-avatar { border-radius: 50%; flex: none; background: rgba(255,255,255,0.15); }
.reviews .gr-id { min-width: 0; }
.reviews .gr-name { display: block; font-weight: 600; color: #fff; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reviews a.gr-name:hover { color: #E7A93B; }
.reviews .gr-date { display: block; color: #a9c19f; font-size: 13px; margin-top: 1px; }
.reviews .gr-stars { margin-left: auto; flex: none; color: #E7A93B; letter-spacing: 1.5px; font-size: 13.5px; }
.reviews .gr-text { margin-top: 10px; color: #eaf1e6; font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.reviews-controls { display: flex; align-items: center; gap: 10px; }
.rev-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hairline-light); background: rgba(255,255,255,0.08); color: #fff; font-size: 18px; cursor: pointer; }
.rev-btn:hover { background: rgba(255,255,255,0.18); }
.reviews-controls .btn { margin-left: auto; }
.reviews-note { color: #9fb595; font-size: 12.5px; margin-top: 14px; }
/* Expandable full-text review archive (indexable — real Google review text lives in the DOM) */
.reviews-more { margin-top: 22px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); background: rgba(255,255,255,0.04); }
.reviews-more summary { list-style: none; cursor: pointer; padding: 18px 20px; font-family: var(--font-display); font-weight: 500; font-size: 17px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.reviews-more summary::-webkit-details-marker { display: none; }
.reviews-more summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--brand-amber, #e8a33d); flex: none; transition: transform .2s ease; }
.reviews-more[open] summary::after { transform: rotate(45deg); }
.reviews-more__hint { color: #a9c19f; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; margin-left: auto; }
.reviews-more__grid { display: grid; gap: 14px; padding: 0 18px 18px; }
@media (min-width: 880px) { .reviews-more__grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Recent projects spotlight (city-tagged proof cards; white band between
   the dark reviews section and the sand "why us" section) ===== */
.spotlight { background: #fff; padding-block: var(--section-pad); }
.spotlight-grid { display: grid; gap: 18px; }
.spotlight-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--hairline); background: #fff; color: var(--text); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; }
.spotlight-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
/* height:auto REQUIRED alongside aspect-ratio — see the styles-grid note above (ledger row 20) */
.spotlight-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.spotlight-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.spotlight-body h3 { font-size: 18px; line-height: 1.3; }
.spotlight-body p { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.spotlight-body .link-arrow { margin-top: auto; padding-top: 8px; font-size: 14.5px; }
.spotlight-cta { text-align: center; margin-top: 26px; }
@media (min-width: 880px) { .spotlight-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Trust / affordability / warranty band (Namendra H6) — the old single-row
   financing strip expanded into the 3-part price-objection banner: pricing,
   Wisetack financing (the page's ONE financing CTA), warranty + guarantee ===== */
.financing { background: var(--brand-green-deep); color: #fff; padding-block: clamp(36px, 6vw, 56px); }
.financing > .container > h2 { color: #fff; text-align: center; font-size: clamp(22px, 4.4vw, 30px); letter-spacing: -0.01em; margin-bottom: 28px; }
.trust-grid { display: grid; gap: 24px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-ic { width: 30px; height: 30px; color: var(--cta-amber); flex: none; margin-top: 2px; }
.trust-ic path, .trust-ic circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust-item h3 { color: #fff; font-size: 17.5px; margin-bottom: 5px; }
.trust-item p { color: #eaf1e6; font-size: 14.5px; line-height: 1.6; }
.trust-item .btn { margin-top: 12px; }
@media (min-width: 880px) { .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.promise { max-width: 720px; margin: 34px auto 0; text-align: center; }
.promise h3 { color: #fff; font-size: 17.5px; margin-bottom: 6px; }
.promise-lead { color: #eaf1e6; font-size: 14.5px; margin-bottom: 12px; }
.promise blockquote { margin: 0; padding: 18px 22px; border-left: 3px solid var(--cta-amber); background: rgba(255,255,255,0.06); border-radius: var(--radius-sm); text-align: left; }
.promise blockquote p { color: #fff; font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 2.6vw, 20px); line-height: 1.55; }

.why { background: var(--surface); padding-block: var(--section-pad); }
.why-grid { display: grid; gap: 28px; text-align: center; }
.why-ic { width: 34px; height: 34px; color: var(--brand-green); margin: 0 auto 12px; }
.why-ic path, .why-ic circle { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.why-item h3 { font-size: 18px; margin-bottom: 6px; }
.why-item p { color: var(--text-muted); font-size: 15px; }

/* ===== How it works (3-step process strip, cloned from the privacy leaf page;
   sand surface so it alternates with the white FAQ above and dark CTA below) ===== */
.how { background: var(--surface); padding-block: var(--section-pad); }
.how-grid { display: grid; gap: 26px; counter-reset: step; max-width: 980px; margin: 0 auto; }
.how-step { position: relative; padding-left: 58px; }
.how-step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 999px; background: var(--brand-green-tint); border: 1.5px solid var(--brand-green); color: var(--brand-green-deep); font-family: var(--font-display); font-weight: 600; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.how-step h3 { font-size: 18px; margin-bottom: 5px; }
.how-step p { color: var(--text-muted); font-size: 15px; }
@media (min-width: 720px) { .how-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Beyond installation (repair / removal / gates strip — old-site
   "We Do Not Limit Our Services to Installation Only" copy, Namendra V2-4c) ===== */
.svc-more { padding-block: var(--section-pad); background: #fff; }
.svc-more .why-grid { max-width: 980px; margin: 0 auto; }
.svc-more .link-arrow { display: inline-block; margin-top: 8px; }

/* ---------- FINAL CTA (clean dark band) ---------- */
.final-cta { background: var(--ink); color: #fff; padding-block: clamp(44px, 8vw, 76px); }
.final-inner { display: grid; gap: 28px; }
.final-copy h2 { color: #fff; font-size: clamp(26px, 5.4vw, 40px); letter-spacing: -0.015em; line-height: 1.08; margin-bottom: 12px; }
.final-copy > p { color: #b9bdb6; font-size: 16px; margin-bottom: 16px; }
.cta-proof { display: flex; align-items: center; gap: 16px; margin: 2px 0 20px; padding: 14px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: var(--radius-sm); }
.cta-seal { width: 58px; height: auto; flex: none; }
.cta-proof a { display: inline-flex; flex: none; transition: transform .15s ease; }
.cta-proof a:hover { transform: scale(1.05); }
.cta-proof-text { color: #c9cfc2; font-size: 14px; line-height: 1.5; }
.cta-proof-text strong { color: #fff; font-weight: 500; }
.phone-link--light { color: #fff; }
.phone-link--light:hover { color: var(--text-light); }
.quote-form { background: #fff; border-radius: var(--radius); padding: 22px; color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,0.30); }
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field label { font-size: 13px; font-weight: 500; color: #3a3a36; margin-bottom: 6px; }
.field input, .field select { font-family: inherit; font-size: 16px; padding: 12px; border: 1px solid #cdd1c9; border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.field input:focus, .field select:focus { outline: 3px solid var(--cta-amber); outline-offset: 1px; border-color: var(--cta-amber); }
.form-status { font-size: 14px; margin-top: 10px; min-height: 1px; }
.form-status.is-ok { color: var(--brand-green); font-weight: 500; }
.form-status.is-err { color: #c62828; font-weight: 500; }
.field-err { margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: #c62828; }
.form-status.is-err { color: var(--cta-red-dark); font-weight: 500; }
.form-fineprint { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

.site-footer { background: var(--brand-green-deep); color: #d2dccb; border-top: 1px solid rgba(255,255,255,0.08); padding-top: clamp(36px, 7vw, 56px); }
.footer-grid { display: grid; gap: 32px; }
.footer-brand .fwg-logo { font-size: 1.7px; --fwg-ink: #eef3e9; margin-bottom: 12px; }
.footer-brand p { font-size: 14px; margin-bottom: 12px; max-width: 34ch; }
.footer-col h3 { color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .03em; margin-bottom: 12px; }
.footer-col a { display: block; color: #c8ccc6; font-size: 14.5px; padding: 5px 0; }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 14.5px; margin-bottom: 10px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 32px; padding-block: 18px 24px; font-size: 13px; color: #adb3ab; }
/* #adb3ab (not the global green) — the link inherits the AA-checked footer-bottom color */
.footer-bottom a { color: inherit; text-decoration: underline; text-decoration-color: rgba(173,179,171,0.5); text-underline-offset: 2px; }
.footer-bottom a:hover { color: #fff; }
.footer-rating { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 13.5px; color: #c8ccc6; margin-top: 14px; padding: 7px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; white-space: nowrap; }
.footer-rating .stars { font-size: 14px; }
.footer-rating strong { color: #fff; font-weight: 600; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.footer-social a { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); color: #cdd6c6; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.footer-social a:hover { color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
/* The TrustDALE guarantee seal is drawn for dark backgrounds -- gold and white on transparent -- so
   it sits straight on the footer with no chip behind it. 56px is a floor, not a preference: below it
   the "MAKE IT RIGHT / GUARANTEE" inner text stops resolving and the seal reads as a gold blob.
   Angi ships an official white knockout wordmark (white + #DDDDDD, from their own CDN) for exactly
   this case, so it goes on the green unmodified -- recolouring their orange mark would breach their
   trademark standards. BBB stays text: unaccredited businesses can't use their mark. */
/* Flat on purpose -- no wrapper div. add_footer_badges.py copies this block with a non-greedy
   `<div class="footer-seals">.*?</div>`, so ANY nested <div> truncates the copy at the inner
   closer and ships an unclosed div (and a dropped BBB link) to 187 pages. Keep the seals as
   direct children; .seal-links takes flex-basis:100% to claim its own line instead. */
.footer-seals { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 12px; }
.footer-seals .seal-td { display: block; width: auto; height: 56px; }
/* 36px, not the seal's 56px: the seal spends its height on the gold ring and fine print, the Angi
   wordmark spends all of it on solid letterform. Matching heights makes Angi ~50% wider and far
   louder; 36px matches FOOTPRINT (59px vs the seal's 62px), which is what reads as equal. */
.footer-seals .seal-angi { display: block; width: auto; height: 36px; }
.seal-links { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 0; font-size: 13px; }
.seal-links a { color: #c8ccc6; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.seal-links a:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.7); }
.seal-links .sep { color: rgba(255,255,255,0.25); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr; } .footer-brand { grid-column: auto; } }

.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--hairline); }
.mobile-bar .btn { flex: 1; }
.btn-outline-bar { background: #fff; color: var(--brand-green); border-color: var(--brand-green); }
body { padding-bottom: 72px; }

@media (min-width: 720px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-track { grid-auto-columns: calc((100% - 28px) / 3); }
  /* Still mode: home.js adds this when the whole card set fits the visible columns
     (no marquee, no clones, no edge mask) — every quote shown once, filling the row. */
  .reviews-track--still {
    grid-auto-columns: calc((100% - (var(--rev-n, 3) - 1) * 14px) / var(--rev-n, 3));
    overflow-x: hidden; -webkit-mask-image: none; mask-image: none;
  }
}
@media (min-width: 1560px) {
  .reviews-track { grid-auto-columns: calc((100% - 42px) / 4); }
  .reviews-track--still { grid-auto-columns: calc((100% - (var(--rev-n, 4) - 1) * 14px) / var(--rev-n, 4)); }
  .final-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
}
@media (min-width: 880px) {
  .primary-nav { display: flex; align-items: center; gap: 24px; }
  .primary-nav > a, .primary-nav .nav-trigger { position: relative; color: #3a3a36; font-size: 15px; font-weight: 500; padding: 6px 0; }
  .primary-nav > a::after, .primary-nav .nav-trigger::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--brand-green); transition: right .2s ease; }
  .primary-nav > a:hover, .nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger { color: var(--brand-green-deep); }
  .primary-nav > a:hover::after, .primary-nav > a:focus-visible::after, .nav-item:hover .nav-trigger::after, .nav-item:focus-within .nav-trigger::after { right: 0; }
  .nav-item { position: relative; }
  .nav-panel { display: block; position: absolute; top: calc(100% + 10px); left: 0; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px 22px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 120; }
  .nav-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
  .nav-item:hover > .nav-panel, .nav-item:focus-within > .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-item:hover .nav-chev, .nav-item:focus-within .nav-chev { transform: rotate(180deg); }
  .mega { display: flex; gap: 28px; }
  .mega-col { display: flex; flex-direction: column; gap: 18px; min-width: 190px; }
  .mega-group { display: flex; flex-direction: column; }
  .nav-panel a { display: block; padding: 7px 8px; border-radius: var(--radius-sm); color: #46463f; font-size: 14px; font-weight: 500; white-space: nowrap; }
  .nav-panel a:hover { background: var(--brand-green-tint); color: var(--brand-green-deep); }
  .mega .mega-head { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--cta-red); padding: 0 8px 8px; margin-bottom: 5px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
  .mega a.mega-head:hover { background: transparent; color: var(--cta-red-dark); }
  .dropdown { display: flex; flex-direction: column; min-width: 250px; }
  .header-quote { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }
  .hero-inner { padding-block: 72px; }
  .split-grid { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
  .split-card { flex-direction: row; }
  .split-media { aspect-ratio: auto; flex: 0 0 44%; }
  .split-body { display: flex; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .style-card:hover img { transform: none; }
}

/* ===== Service-area band (near-me / city coverage) ===== */
.svc-area { background: var(--surface); padding-block: var(--section-pad); }
.svc-area__lead { text-align: center; max-width: 62ch; margin: 0 auto 34px; color: var(--text-muted); font-size: 16px; }
.svc-area__groups { display: grid; gap: 18px; }
.svc-area__group { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.svc-area__group h3 { font-size: 18px; line-height: 1.2; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.svc-area__group ul { list-style: none; margin: 0; padding: 0; }
.svc-area__group li a, .svc-area__group li span { display: block; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 15px; }
.svc-area__group li span { color: var(--text); }
.svc-area__group li a { color: var(--brand-green-deep); font-weight: 500; }
.svc-area__group li a:hover { background: var(--brand-green-tint); }
.svc-area__group li a::after { content: " \2192"; color: var(--brand-green); font-size: 13px; }
.svc-area__cta { text-align: center; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: center; }
.svc-area__cta .link-arrow { font-size: 15px; }
@media (min-width: 560px) { .svc-area__groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-area__groups { grid-template-columns: repeat(4, 1fr); } }

/* ===== Homepage FAQ (native details, no JS) ===== */
.faq-home { padding-block: var(--section-pad); background: #fff; }
.faq-home__list { max-width: 760px; margin: 30px auto 0; display: grid; gap: 12px; }
.faq-home details { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-home summary { list-style: none; cursor: pointer; padding: 18px 20px; font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.faq-home summary::-webkit-details-marker { display: none; }
.faq-home summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--brand-green); flex: none; transition: transform .2s ease; }
.faq-home details[open] summary::after { transform: rotate(45deg); }
.faq-home details > div { padding: 0 20px 18px; }
.faq-home details > div p { color: var(--text-muted); font-size: 15.5px; line-height: 1.6; }
.faq-home details > div ul { margin: 10px 0; padding-left: 22px; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; display: grid; gap: 6px; }
/* Two columns once there's room; align-items:start so an open answer doesn't stretch its closed neighbour.
   1020px is where the longest question still fits on one line in a half-width card. */
@media (min-width: 1020px) {
  .faq-home__list { max-width: 1560px; margin-inline: auto; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 20px; }
}
/* C4-b: 880-1099px header compression (desktop nav is wider than these viewports) */
@media (min-width: 880px) and (max-width: 1099px) {
  .site-header .phone-link > span:last-child { display: none; }
  .primary-nav { gap: 12px; }
  .primary-nav > a, .primary-nav .nav-trigger { font-size: 14px; }
  .header-inner { padding-inline: 16px; gap: 12px; }
  .header-quote.btn-cta { white-space: nowrap; padding: 10px 16px; }
}

/* ===== City-page reviews component ([fenceworks_reviews_city] shortcode) =====
   Ported from the prototype city-page template (decatur-ga.html): a plain
   snap-scroll strip of blockquote.review quote cards inside the standard dark
   .reviews band — no marquee, no edge mask (the strip has no #reviews-track id,
   so home.js leaves it alone). */
.reviews-track--city { scroll-snap-type: x mandatory; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.4) transparent; -webkit-mask-image: none; mask-image: none; }
.reviews .review { scroll-snap-align: start; margin: 0; background: var(--brand-green-deep); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.reviews .review p:not(.stars) { color: #eaf1e6; font-size: 15px; }
.reviews .review .stars { color: #E7A93B; letter-spacing: 1.5px; font-size: 13.5px; margin: 0; }
.reviews .review cite { color: #a9c19f; font-size: 14px; font-style: normal; margin-top: auto; }

/* ===== Converted-page WP integration fixes (2026-07-19, Marietta port review) =====
   1. Sticky header: WP wraps the header template part in a wrapper exactly the
      header's height, so position:sticky never had room to stick and the header
      scrolled away. display:contents lifts .site-header into the page flow.  */
.wp-block-template-part:has(> .site-header) { display: contents; }
/* 2. WP's global block-gap injected 32px margins: white seams between alignfull
      sections, the hero scrim pushed 32px off the top of its photo, and extra
      air inside every nested group. Converted pages take ALL spacing from the
      ported prototype CSS, so zero the injected gaps there.                   */
body.page-template-page-converted .entry-content > *,
body.page-template-page-converted .entry-content :where(.is-layout-flow) > * { margin-block-start: 0; }
/*    ...except inside .cat-head, whose own flow spacing (pages.css `.cat-head > * + *`)
      IS prototype-intended typography. A converted .cat-head is a wp-block-group, so it
      matches .is-layout-flow and the blunt zeroing above (0,2,1) outranked the pages.css
      rule (0,1,0) — consecutive paragraphs rendered with 0px between them, one wall of
      text. Keep this in sync with the pages.css rule.                           */
body.page-template-page-converted .entry-content .cat-head > * + * { margin-block-start: 1em; }
.page-template-page-converted .res-hero__bg, .page-template-page-converted .res-hero__scrim { margin: 0; }
/* Editable hero background: the hero photo is a native (replaceable) image block;
   its figure.res-hero__media is positioned as the full-bleed layer behind the scrim
   and content (same role the old locked <img.res-hero__bg> played). */
.res-hero .res-hero__media { position: absolute; inset: 0; margin: 0; }
.res-hero .res-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 3. The prototype body is sand (--surface), not white — untinted bands (e.g.
      cat-band--flip) are designed to read as sand.                            */
body.page-template-page-converted { background: var(--surface); }

/* ---- Homepage hero proof row + footer HGTV seal + dead-space layout pass (Austin 2026-09-17) ----
   Hero: buttons row, then HGTV/TrustDALE badges with four check-mark lines beside them, the row
   centered between the CTAs and the hero bottom (margin scales with viewport). Layout pass: the
   980px islands (.how-grid, .svc-more .why-grid) fill the container; why/services/financing items
   become cards so wide screens don't read as three floating lines (Codex red team, layout only). */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: clamp(66px, 5.9vw, 94px); }
.hero-badges a { display: inline-flex; transition: transform .15s ease; }
.hero-badges a:hover { transform: scale(1.05); }
.hero-badges img { height: 88px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.hero-chips { list-style: none; margin: 0 0 0 8px; padding: 0; height: 88px; display: flex; flex-direction: column; justify-content: space-between; font-size: 14px; font-weight: 500; line-height: 1.2; color: #e6eee0; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero-chips li { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hero-chips li::before { content: "✓"; font-size: 13px; font-weight: 700; color: #7ddc6e; }
@media (max-width: 720px) {
  .hero-badges { gap: 16px 22px; margin-top: 34px; }
  .hero-badges img { height: 68px; }
  .hero-chips { height: auto; gap: 7px; margin: 0; flex-basis: 100%; }
}
.footer-seals .seal-hgtv { display: block; width: auto; height: 48px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2.2fr .85fr .85fr .85fr 1.1fr; } .footer-brand p { max-width: 40ch; } }
.how-grid { max-width: none; gap: clamp(26px, 3vw, 48px); }
.svc-more .why-grid { max-width: none; }
.why { padding-block: clamp(44px, 5.5vw, 64px); }
.why .why-grid { gap: clamp(20px, 2.4vw, 32px); }
.why .why-item { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px 26px 28px; box-shadow: var(--shadow-sm); }
.svc-more .why-item { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px 26px 28px; }
.financing { padding-block: clamp(40px, 5.5vw, 60px); }
.financing .trust-grid { max-width: none; gap: clamp(24px, 3vw, 48px); }
.financing .trust-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 24px 22px; }
@media (min-width: 900px) { .financing .trust-grid { grid-template-columns: repeat(3, 1fr); } }