/* ============================================================
   Hoover Buildings — clone stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&family=Poppins:wght@600;700;800;900&display=swap');

:root{
  --red:#E31E24;
  --red-dark:#B3151A;
  --red-darker:#8f1015;
  --gold:#F4B740;
  --gold-dark:#e0a12b;
  --dark:#17181B;
  --dark-2:#1f2023;
  --dark-3:#2a2b2f;
  --ink:#1a1c1e;
  --gray-900:#26272b;
  --gray-700:#4b4d53;
  --gray-500:#767981;
  --gray-300:#c9cad0;
  --gray-100:#eceef1;
  --gray-50:#f6f7f9;
  --white:#ffffff;
  --radius-sm:6px;
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 10px 30px rgba(20,20,25,.08);
  --shadow-lg:0 20px 50px rgba(20,20,25,.18);
  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --container:1440px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-gutter:stable}
/* NOTE: overflow-x must stay off `body` — setting it there too turns body
   into its own scroll container (forces overflow-y:auto per spec), which
   detaches position:sticky descendants (.site-header) from the real
   viewport scroller and silently breaks the sticky header. */
body{
  max-width:100%;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;font-weight:900;letter-spacing:-.01em}
.icon{width:1em;height:1em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}

/* -------- eyebrow / kicker -------- */
.eyebrow{
  display:inline-flex;align-items:center;
  font-family:var(--font-body);font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red);
  margin-bottom:14px;
}
.eyebrow.on-dark{color:var(--gold)}
.eyebrow.center{justify-content:center}
.eyebrow.eyebrow-blue{color:#2f5fdb}

.section-head{max-width:640px;margin:0 auto 36px;text-align:center}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:14px}
.section-head p{color:var(--gray-700);font-size:1.02rem}
.section-head.left{margin-left:0;text-align:left}

/* -------- buttons -------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:600;font-size:.95rem;
  white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(227,30,36,.28)}
.btn-red:hover{background:var(--red-dark)}
.btn-gold{background:linear-gradient(180deg,#f7c25c,var(--gold-dark));color:#291a00;font-weight:800;box-shadow:0 8px 20px rgba(244,183,64,.35)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#000}
.btn-outline{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-outline-dark{border:1.5px solid var(--gray-300);color:var(--ink)}
.btn-outline-dark:hover{border-color:var(--red);color:var(--red)}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:.85rem}
.btn-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--red);font-size:.9rem}
.btn-link .icon{width:16px;height:16px;transition:transform .15s}
.btn-link:hover .icon{transform:translateX(3px)}
.btn-link.on-dark{color:var(--gold)}

/* ============================================================
   TOPBAR
   ============================================================ */
/* No JS-driven collapse here on purpose: the topbar is plain, un-sticky
   content sitting above the sticky header, so scrolling it out of view is
   handled entirely natively by the browser — 1:1 with the scroll gesture,
   nothing to animate or race against. It reappears exactly when you
   scroll back up to the very top, which is what "only show at the top"
   means in practice. */
.topbar{background:var(--dark);color:#dfe0e3;font-size:.76rem;overflow:hidden}
.topbar .container{display:flex;align-items:center;justify-content:center;padding-top:10px;padding-bottom:10px}
.topbar-msg{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font-weight:600;text-align:center;text-transform:uppercase;letter-spacing:.03em}
.topbar-slide{display:inline-flex;align-items:center;gap:7px}
.topbar-msg .flag{font-size:.9em}
.topbar-msg strong{color:#fff;font-weight:700}
.topbar-msg .sep{color:var(--gray-500)}
.topbar-msg .gold{color:var(--gold);font-weight:700}
.topbar-msg .gold:hover{text-decoration:underline}
.topbar-phone{color:var(--red);font-weight:800;letter-spacing:.02em}
.topbar-phone:hover{color:#ff5257}

/* ============================================================
   HEADER
   ============================================================ */
/* .site-header keeps its normal scroll runway (sticks once you've
   scrolled past the topbar, same feel as before) — only .site-header
   is sticky, not the topbar above it. */
.site-header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--gray-100)}
.header-top{border-bottom:1px solid var(--gray-100)}
.header-top-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo-img{height:36px;width:auto;display:block}
@media (min-width:861px){
  .site-header .logo-img{height:58px}
  /* Match the pill buttons to the BBB badge's fixed 60px height so the
     logo / call pill / quote pill / BBB badge all sit on the same
     top and bottom edge instead of only sharing a center line. */
  .header-top-inner .pill-btn{height:60px;padding-top:0;padding-bottom:0}
  /* Single-row header: logo left, nav centered in the remaining space,
     actions right — instead of the old logo+actions row with a
     separate centered nav row underneath. */
  .header-top-inner{display:grid;grid-template-columns:auto 1fr auto}
}

/* ------------------------------------------------------------
   DESKTOP HEADER LOCK (>=861px — the whole desktop range)
   ------------------------------------------------------------
   Goal: on desktop the header always looks EXACTLY like the 100%
   view — same sizes, same positions, nothing reflows — at any
   window width or browser-zoom level.

   How: the header's inner content is pinned to its exact design
   width (1440px) so its internal layout never changes. Then the
   whole block is scaled with `zoom` to fit the current viewport,
   capped at 1x so it never grows past the design. `zoom` (unlike
   `transform`) scales the layout box too, so the header's height
   follows the scale and nothing below it is left with a gap or an
   overlap. The dark topbar strip and the white header bar keep
   their full-bleed backgrounds because only the *content*
   containers are pinned and scaled, not the strips themselves.

   The 17px allowance covers the reserved scrollbar gutter so the
   scaled header never triggers its own horizontal scrollbar.
   Below 861px the responsive mobile header takes over. */
@media (min-width:861px){
  .topbar > .container,
  .site-header .header-top-inner{
    width:1600px;max-width:1600px;
    margin-left:auto;margin-right:auto;
    zoom:min(1, calc((100vw - 17px) / 1600px));
    /* Trim the inherited .container side padding so the logo sits nearer
       the left edge and the action buttons nearer the right edge. */
    padding-left:12px;padding-right:12px;
  }
  /* Restate every header dimension at full size and undo the
     narrow-viewport breakpoint rules further down this file
     (they hid the BBB badge and shrank the nav below 1180px) —
     with the whole header now scaling as one unit, everything
     stays visible and in place at every width. The `.site-header`
     prefixes give these the specificity to win over those rules. */
  .site-header .header-top-inner{grid-template-columns:auto 1fr auto;gap:18px}
  .site-header .logo-img{height:58px}
  .site-header .header-top-inner .pill-btn{height:60px;padding-top:0;padding-bottom:0}
  .site-header .bbb-badge{display:flex;height:60px}
  .site-header .main-nav{min-width:0}
  .site-header .main-nav ul{gap:36px;padding:11px 0;flex-wrap:nowrap}
  .site-header .main-nav a{font-size:1rem;white-space:nowrap}
  .site-header .header-actions{gap:8px;flex-shrink:0}
  .site-header .pill-quote{display:flex}
  .site-header .pill-btn{padding:8px 18px}
}

.main-nav{min-width:0}
.main-nav ul{display:flex;align-items:center;justify-content:center;gap:36px;padding:11px 0}
.main-nav a{font-weight:500;font-size:1rem;color:var(--gray-900);letter-spacing:.005em;display:flex;align-items:center;gap:4px;padding:4px 0;white-space:nowrap}
.main-nav a:hover{color:var(--red)}
.caret{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;opacity:.5;margin-top:2px;flex-shrink:0;transition:transform .18s ease}

/* -------- "3D Design" nav button (gold; matches .pill-btn height) -------- */
.nav-3d-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:60px;padding:0 22px;border:0;border-radius:999px;
  background:linear-gradient(180deg,#f7c25c,var(--gold-dark));color:#291a00;
  font-family:inherit;font-weight:800;font-size:.93rem;line-height:1;white-space:nowrap;
  box-shadow:0 6px 16px rgba(244,183,64,.32);
  cursor:pointer;transition:filter .15s ease;text-decoration:none;
}
.nav-3d-btn:hover,.nav-3d-btn:focus-visible{filter:brightness(1.05)}
.nav-3d-btn .icon{width:15px;height:15px;flex-shrink:0}
.nav-3d-btn--mobile{width:100%;height:auto;margin-bottom:10px;padding:12px 16px;font-size:1rem}

/* -------- desktop nav dropdowns (About Us / Locations) -------- */
.main-nav .has-dropdown{position:relative}
.main-nav .has-dropdown:hover > a .caret,
.main-nav .has-dropdown:focus-within > a .caret{transform:rotate(180deg);opacity:.8}
/* `.site-header` prefix: needed so `gap` / `padding` here beat the
   `.site-header .main-nav ul{gap:36px;padding:11px 0}` desktop-lock rule
   above — without it the dropdown inherits the 36px horizontal-nav gap
   as a huge vertical gap between its items. */
.site-header .main-nav .dropdown{
  /* top:100% with no margin-top keeps the panel flush against the
     trigger <li> — a gap here (e.g. margin-top) is dead space that
     belongs to neither element, so the mouse's :hover chain breaks
     while crossing it and the menu snaps shut before you can click
     anything in it. The 6px→0 transform is purely a slide-in visual,
     not a functional gap: :hover fires the instant the cursor enters
     the trigger link, so the panel has already animated flush by the
     time the mouse arrives. Padding-top below adds visual breathing
     room without reopening that dead zone. */
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  display:flex;flex-direction:column;align-items:stretch;gap:1px;justify-content:flex-start;
  min-width:180px;padding:6px;
  background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:60;
}
.main-nav .has-dropdown:hover > .dropdown,
.main-nav .has-dropdown:focus-within > .dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.site-header .main-nav .dropdown li{list-style:none}
.site-header .main-nav .dropdown a{padding:8px 14px;border-radius:6px;display:block;color:var(--gray-900);line-height:1.3}
.site-header .main-nav .dropdown a:hover{background:var(--gray-50);color:var(--red)}

.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

.pill-btn{
  display:flex;align-items:center;gap:9px;
  padding:8px 18px;border-radius:999px;color:#fff;white-space:nowrap;
}
.pill-btn > .icon{width:15px;height:15px;flex-shrink:0;opacity:.9}
.pill-text{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.pill-text small{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;font-weight:200;opacity:.8}
.pill-text strong{font-size:.93rem;font-weight:700}
.pill-call{background:var(--dark)}
.pill-quote{background:var(--red);box-shadow:0 6px 16px rgba(227,30,36,.28)}
.pill-btn:hover{filter:brightness(1.08)}

.bbb-badge{display:flex;align-items:center;flex-shrink:0;height:60px}
.bbb-badge-img{height:100%;width:auto;display:block}

.nav-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--gray-100);flex-shrink:0}
.nav-toggle .icon{width:18px;height:18px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    linear-gradient(rgba(8,9,11,.72),rgba(8,9,11,.72)),
    url("../images/cover-photo-scaled.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero .container{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:flex-start;padding-top:64px;padding-bottom:90px}
.hero-badge{display:inline-block;background:var(--red);color:#fff;padding:8px 16px;border-radius:6px;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-bottom:22px}
.hero h1{font-size:clamp(2.6rem,5vw,4.1rem);font-weight:800;line-height:1.06;margin-bottom:22px}
.hero h1 .accent{color:var(--gold)}
.hero p.lead{color:#c3c4cb;font-size:1.02rem;max-width:480px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-cta .btn .icon{width:16px;height:16px}
.btn-dark-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px)}
.btn-dark-glass:hover{background:rgba(255,255,255,.16)}

.hero-card{
  background:#fff;color:var(--ink);border-radius:var(--radius-lg);
  padding:34px 32px 36px;box-shadow:var(--shadow-lg);margin-top:6px;
}
.hero-card .btn{padding:17px 26px;font-size:1rem}

/* -------- hero quote widget: 2-step estimator -------- */
.qe-card-title{font-size:1.1rem;font-weight:800;color:var(--ink);margin-bottom:18px;text-transform:uppercase;text-align:center}

.qe-progress-bar{
  position:relative;height:38px;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--dark);margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;
}
.qe-progress-fill{position:absolute;inset:0;width:0;background:var(--red);transition:width .4s ease}
.qe-progress-label{
  position:relative;z-index:1;color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

.qe-error{display:none;background:#fdecec;color:var(--red-dark);border:1px solid #f6c6c8;border-radius:var(--radius-sm);padding:10px 14px;font-size:.83rem;font-weight:600;margin-bottom:16px}
.qe-error.show{display:block}

.qe-step{display:none}
.qe-step.is-active{display:block}
.qe-label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:12px}

.qe-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.qe-type-card{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:14px 6px;border:1.5px solid var(--gray-100);border-radius:var(--radius);background:var(--gray-50);
  cursor:pointer;transition:border-color .15s ease,background .15s ease;text-align:center;
}
.qe-type-card:hover{border-color:var(--gray-300)}
.qe-type-card input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.qe-type-icon{width:24px;height:24px;object-fit:contain}
.qe-type-card span{font-size:.78rem;font-weight:700;color:var(--gray-700)}
.qe-type-card:has(input:checked),
.qe-type-card.is-active{border-color:var(--red);background:#fdecec}
.qe-type-card:has(input:checked) span,
.qe-type-card.is-active span{color:var(--red-dark)}
.qe-type-card input:focus-visible ~ .qe-type-icon{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

.qe-field{margin-bottom:16px}
.qe-field label{display:block;font-size:.78rem;font-weight:700;color:var(--gray-700);margin-bottom:7px}
.qe-field label .req{color:var(--red)}
.qe-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qe-row .qe-field{margin-bottom:16px}

.qe-input{
  width:100%;border:1.5px solid var(--gray-100);background:var(--gray-50);border-radius:var(--radius);
  padding:13px 14px;font-size:.9rem;color:var(--ink);font-family:inherit;
  transition:border-color .15s ease,background .15s ease;
}
.qe-input:focus{outline:none;border-color:var(--red);background:#fff}
.qe-input::placeholder{color:var(--gray-500)}
select.qe-input{
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767981' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:32px;
}
#qeZip{margin-bottom:22px}

.qe-microtrust{text-align:center;font-size:.76rem;color:var(--gray-500);margin-top:14px}
.qe-back{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font-size:.82rem;font-weight:700;color:var(--gray-500);font-family:inherit;padding:0;margin-bottom:16px;
}
.qe-back:hover{color:var(--red)}
.qe-consent{display:block;font-size:.72rem;color:var(--gray-500);line-height:1.5;margin:2px 0 18px}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip{background:var(--red);color:#fff}
.stats-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:22px;padding-bottom:22px;text-align:center}
.stats-strip .stat{position:relative}
.stats-strip .stat:not(:last-child)::after{content:'';position:absolute;top:2px;bottom:2px;right:-12px;width:1px;background:rgba(255,255,255,.25)}
.stats-strip .stat b{display:block;font-family:var(--font-head);font-size:clamp(1.3rem,2vw,1.65rem);font-weight:800;color:var(--gold);line-height:1;margin-bottom:4px}
.stats-strip .stat span{font-size:.8rem;color:#ffd9da;font-weight:600;letter-spacing:.02em}

.marquee-bar{background:#0b0b0c;overflow:hidden;padding:13px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee-track span{display:inline-flex;align-items:center;color:#8d8f95;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.marquee-track span::after{content:'';display:inline-block;width:6px;height:6px;background:var(--red);transform:rotate(45deg);margin:0 18px;flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ============================================================
   GENERIC SPLIT SECTION (image + text)
   ============================================================ */
.split{padding:64px 0;background:var(--gray-50)}
.split-white{background:var(--white)}
.split .container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.reverse .container{direction:rtl}
.split.reverse .container > *{direction:ltr}
.split-media{position:relative}
.split-media .ph{border-radius:var(--radius-lg);aspect-ratio:4/3.2;box-shadow:var(--shadow)}
.floating-badge{
  position:absolute;left:-15px;top:90%;transform:translateY(-50%);background:linear-gradient(160deg,var(--red),var(--red-darker));
  border-radius:10px;box-shadow:var(--shadow-lg);padding:12px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:#fff;
  white-space:nowrap;z-index:2;
}
.floating-badge.on-photo{left:-57px}
.floating-badge .fb-num{font-family:var(--font-head);font-weight:800;font-size:1.4rem;line-height:1}
.floating-badge .fb-txt{font-size:.72rem;font-weight:600;line-height:1.2;opacity:.9}

/* "Built for You" split badge: sits inside the photo (bottom-left), not overhanging the edge */
.split-media .floating-badge{left:20px;right:auto;top:auto;bottom:20px;transform:none}

.split-content .eyebrow{margin-bottom:12px}
.split-content h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:18px}
.split-content > p{color:var(--gray-700);margin-bottom:28px}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-bottom:32px}
.feature-item{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;color:var(--gray-900)}
.check-circle-icon{width:20px;height:20px;flex-shrink:0;color:var(--red);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   PLACEHOLDER PHOTO BLOCKS
   ============================================================ */
.ph{
  position:relative;width:100%;height:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;
}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%);
}
.ph .ph-icon{position:relative;width:26%;max-width:64px;color:rgba(255,255,255,.85);opacity:.9}
.ph .ph-tag{
  position:absolute;z-index:2;left:14px;bottom:14px;background:rgba(10,10,12,.55);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:6px 12px;border-radius:999px;
  backdrop-filter:blur(3px);
}
.ph-1{background:linear-gradient(135deg,#8a2c2f,#3a1214)}
.ph-2{background:linear-gradient(135deg,#3d5a73,#1c2b38)}
.ph-3{background:linear-gradient(135deg,#4f7942,#1f3018)}
.ph-4{background:linear-gradient(135deg,#5a5f6b,#23262c)}
.ph-5{background:linear-gradient(135deg,#a9762c,#4a3212)}
.ph-6{background:linear-gradient(135deg,#6a4a8f,#241835)}
.ph-7{background:linear-gradient(135deg,#c0392b,#5c1710)}
.ph-8{background:linear-gradient(135deg,#2c3e50,#0f1720)}
.ph-hero{background:linear-gradient(135deg,#4b4d53,#1a1b1e)}

/* ============================================================
   BUILD TYPES GRID
   ============================================================ */
.types{padding:64px 0;background:var(--white)}
.types .section-head{max-width:760px}
.types .section-head h2{font-size:clamp(1.9rem,3.4vw,2.65rem);white-space:nowrap}
.types-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.type-card .ph{border-radius:var(--radius);aspect-ratio:4/2.9;box-shadow:var(--shadow)}
.type-card-label{
  position:absolute;left:0;right:0;bottom:0;padding:36px 16px 16px;z-index:2;
  background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.55) 60%,transparent);color:#fff;
}
.type-card-label h3{font-size:.94rem;font-weight:600;letter-spacing:normal;margin-bottom:2px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.type-card-label span{font-size:.72rem;color:#fff;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* ============================================================
   QUALITY (dark) SECTION
   ============================================================ */
.quality{background:var(--dark);color:#fff;padding:72px 0}
.quality .container{display:grid;grid-template-columns:.8fr 1.2fr;gap:130px;align-items:center}
.pill-eyebrow{display:inline-block;background:rgba(255,255,255,.08);color:var(--red);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:20px}
.pill-eyebrow.indigo{color:#8b93f5}
.quality h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:18px}
.quality > .container > div:first-child > p{color:#b7b9c0;margin-bottom:28px}
.quality-list{display:flex;flex-direction:column;gap:16px;margin-bottom:34px}
.quality-list li{display:flex;align-items:center;gap:12px;font-size:.95rem;color:#e6e6ea}
.quality-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:600px}
.collage .ph{border-radius:var(--radius)}
.collage-main-wrap{position:relative;grid-row:1/3}
.collage-main{width:100%;height:100%}

/* ============================================================
   WHAT WE OFFER
   ============================================================ */
.offer{padding:72px 0}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.offer-card{
  border:1px solid var(--gray-100);border-radius:var(--radius);padding:30px 26px;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.offer-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent}
.offer-icon{
  width:52px;height:52px;border-radius:12px;background:#e9eefc;color:#2f5fdb;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.offer-icon .icon{width:24px;height:24px}
.offer-card h3{font-size:1.08rem;font-weight:700;margin-bottom:8px}
.offer-card p{color:var(--gray-500);font-size:.88rem}

/* ============================================================
   TOP BUILDS (dark) SECTION
   ============================================================ */
.builds{background:var(--dark);padding:72px 0;color:#fff}
.builds .section-head h2{font-size:clamp(1.9rem,3.4vw,2.65rem);margin-bottom:10px}
.builds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:48px}
.build-card{background:var(--dark-2);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.build-card-media{position:relative}
.build-card .ph{aspect-ratio:4/2.4}
.build-tag{
  position:absolute;top:12px;left:12px;background:var(--red);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.build-card-body{padding:18px 18px 20px}
.build-dims{display:block;color:var(--gray-500);font-size:.76rem;margin-bottom:6px}
.build-card-body h3{font-size:1.02rem;font-weight:700;color:#fff;margin-bottom:8px}
.build-card-body p{color:#9d9ea5;font-size:.85rem;margin-bottom:16px}
.build-card-divider{border-top:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.build-loc{display:flex;align-items:center;gap:6px;color:var(--gray-500);font-size:.78rem}
.build-loc .icon{width:13px;height:13px}
.builds-cta{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}

/* ============================================================
   PROMISE (3-col) + offices bar
   ============================================================ */
.promise{padding:72px 0 0}
.promise .section-head{max-width:680px}
.promise .section-head h2{white-space:normal;text-align:center;margin-left:auto;margin-right:auto}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:40px}
.promise-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.promise-card-img{aspect-ratio:16/9.5;overflow:hidden;background:var(--gray-100)}
.promise-card-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .4s ease}
.promise-card:hover .promise-card-img img{transform:scale(1.04)}
.promise-card-body{padding:22px 24px 26px}
.promise-tag{display:inline-block;background:#fdecec;color:var(--red);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:14px}
.promise-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.promise-card p{color:var(--gray-500);font-size:.9rem}

.offices-bar{
  background:var(--dark);color:#fff;border-radius:var(--radius-lg);
  padding:30px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  position:relative;top:28px;box-shadow:var(--shadow-lg);
}
.offices-bar h3{font-size:1.3rem;margin-bottom:6px}
.offices-bar p{color:#b7b9c0;font-size:.9rem}
.offices-actions{display:flex;gap:12px;flex-wrap:wrap}
.promise-spacer{height:28px}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{padding:150px 0 100px;background:var(--gray-50)}
.rating-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.stars{display:flex;gap:2px;color:var(--gold)}
.stars .icon{width:16px;height:16px;fill:currentColor}
.rating-row span:not(.stars){font-weight:700;font-size:.9rem;color:var(--gray-700)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi-card{position:relative;background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.testi-card .stars{margin-bottom:14px}
.testi-quote{position:absolute;top:27px;right:26px;width:22px;height:20px}
.testi-quote::before,.testi-quote::after{content:"";position:absolute;top:0;width:8px;height:20px;border-radius:3px;background:#f7d67d}
.testi-quote::before{left:0}
.testi-quote::after{left:13px}
.testi-card p{color:var(--gray-700);font-size:.94rem;margin-bottom:18px}
.testi-person{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--gray-100)}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red-darker));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.testi-person>div{display:flex;flex-direction:column;gap:2px}
.testi-person strong{font-size:.9rem;line-height:1}
.testi-person span:not(.testi-avatar){font-size:.78rem;color:var(--gray-500);line-height:1}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:72px 0}
.faq-list{max-width:820px;margin:0 auto 40px}
.faq-item{border-bottom:1px solid var(--gray-100)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 4px;text-align:left;font-family:var(--font-head);font-weight:600;font-size:1rem;
}
.faq-q .icon{width:18px;height:18px;flex-shrink:0;transition:transform .2s ease;color:var(--red)}
.faq-item.open .faq-q .icon{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a p{padding:0 4px 22px;color:var(--gray-700);font-size:.92rem;max-width:680px}
.faq-cta{
  max-width:820px;margin:0 auto;background:var(--dark);color:#fff;border-radius:var(--radius);
  padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.faq-cta h4{font-size:1.02rem;margin-bottom:4px}
.faq-cta p{color:var(--gray-300);font-size:.86rem}

/* ============================================================
   QUOTE FORM CTA
   ============================================================ */
.quote-section{background:var(--gray-50);padding:72px 0}
.quote-section .container{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:stretch}
.quote-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.quote-photo img{width:100%;height:100%;min-height:420px;object-fit:cover}
.quote-right{display:flex;flex-direction:column;gap:32px}
.quote-intro{color:var(--ink);text-align:center}
.quote-intro h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:16px}
.quote-intro p{color:var(--gray-500);margin:0 auto 26px;max-width:420px}
.quote-points{display:flex;flex-direction:column;align-items:center;gap:14px}
.quote-points li{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--gray-700)}

.quote-form{display:flex;flex-direction:column;gap:20px}
.qf-group{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);overflow:hidden}
.qf-legend{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;color:var(--ink);padding:18px 22px;border-bottom:1px solid var(--gray-100)}
.qf-legend .num{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qf-body{padding:22px}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.qf-row.cols-3{grid-template-columns:1.4fr .8fr .8fr}
.qf-field label{display:block;font-size:.8rem;font-weight:600;color:var(--gray-700);margin-bottom:6px}
.qf-field input,.qf-field select,.qf-field textarea{
  width:100%;border:1px solid var(--gray-100);background:var(--gray-50);border-radius:8px;
  padding:12px 14px;font-size:.9rem;transition:border-color .15s ease,background .15s ease;
}
.qf-field input:focus,.qf-field select:focus,.qf-field textarea:focus{outline:none;border-color:var(--red);background:#fff}
.qf-label{display:block;font-size:.8rem;font-weight:600;color:var(--gray-700);margin-bottom:10px}
.qf-pills{display:flex;flex-wrap:wrap;gap:10px}
.qf-pill{display:inline-flex;align-items:center;padding:11px 20px;border:1px solid var(--gray-300);border-radius:999px;font-size:.85rem;color:var(--gray-700);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.qf-pill:hover{border-color:var(--gray-500)}
.qf-pill[aria-pressed="true"]{border-color:var(--red);background:#fdecec;color:var(--red);font-weight:600}
.qf-pill:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.qf-footnote{text-align:center;font-size:.86rem;color:var(--gray-500)}
.qf-footnote a{color:var(--red);font-weight:700}
.qf-consent{display:block;font-size:.72rem;color:var(--gray-500);line-height:1.5;text-align:center;margin:-6px 0 2px}
.qf-error{display:none;background:#fdecec;color:#b3261e;border:1px solid #f6c6c8;border-radius:8px;padding:10px 14px;font-size:.86rem;font-weight:600;text-align:center}
.qf-error.show{display:block}

.qf-steps{margin-bottom:4px}
.qf-steps-track{display:flex;align-items:center}
.qf-step-circle{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;background:var(--gray-100);color:var(--gray-500);transition:background .2s ease,color .2s ease}
.qf-step-circle.is-active,.qf-step-circle.is-done{background:var(--red);color:#fff}
.qf-step-line{flex:1;height:2px;background:var(--gray-100);margin:0 4px;transition:background .2s ease}
.qf-step-line.is-done{background:var(--red)}
.qf-steps-labels{display:flex;justify-content:space-between;padding:6px 1px 0}
.qf-steps-labels span{flex:1;font-size:.72rem;font-weight:600;color:var(--gray-500)}
.qf-steps-labels span:first-child{text-align:left}
.qf-steps-labels span:last-child{text-align:right}
.qf-steps-labels span:not(:first-child):not(:last-child){text-align:center}
.qf-steps-labels span.is-active{color:var(--ink)}

.qf-group[data-step]{display:none}
.qf-group[data-step].is-active{display:block}
.qf-nav{display:flex;gap:12px}
.qf-nav .btn{flex:1;white-space:normal;text-align:center}
.qf-nav .btn[hidden]{display:none}

/* ============================================================
   BOTTOM CTA BAR
   ============================================================ */
.cta-bar{background:var(--red);color:#fff;padding:56px 0}
.cta-bar .container{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-bar h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:8px}
.cta-bar p{color:#ffd9da;font-size:.95rem}
.cta-bar-actions{display:flex;gap:14px;flex-wrap:wrap}
.cta-bar .btn-dark{background:var(--dark)}
.cta-bar .btn-dark:hover{background:#000}
.cta-bar-centered .container{flex-direction:column;justify-content:center;gap:20px;text-align:center}
.cta-bar-centered .cta-bar-actions{justify-content:center}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#0f1012;color:#c6c7cc;padding:80px 0 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand .logo{color:#fff;margin-bottom:16px}
.footer-brand p{font-size:.88rem;color:#9d9ea5;max-width:280px;margin-bottom:16px}
.footer-hours{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#9d9ea5}
.footer-hours .icon{width:15px;height:15px;color:var(--red);flex-shrink:0}
.footer-label{font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.footer-address{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;color:#9d9ea5;line-height:1.4;margin-bottom:12px}
.footer-address .icon{width:15px;height:15px;color:var(--red);flex-shrink:0;margin-top:2px}
.footer-phone{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:#fff}
.footer-phone .icon{width:15px;height:15px;color:var(--red)}
.footer-serving{font-size:.87rem;color:#9d9ea5;line-height:1.6}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0;font-size:.8rem;color:#77787e}
.footer-bottom a{color:#77787e}
.footer-bottom a:hover{color:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .bbb-badge{display:none}
  .main-nav ul{gap:13px}
  .main-nav a{font-size:.78rem}
}
@media (max-width:1080px){
  .hero .container{grid-template-columns:1fr;gap:40px}
  .hero-card{max-width:520px}
  .types-grid{grid-template-columns:repeat(2,1fr)}
  .builds-grid{grid-template-columns:repeat(2,1fr)}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .promise-grid{grid-template-columns:1fr}
  .quality .container{grid-template-columns:1fr}
  .collage{height:360px}
  .quote-section .container{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .main-nav,.pill-quote,.bbb-badge,.header-actions .nav-3d-btn{display:none}
  .nav-toggle{display:flex}
  .pill-call .pill-text small{display:none}
  .stats-strip .container{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .stats-strip .stat:not(:last-child)::after{display:none}
  .stats-strip .stat:nth-child(odd)::after{display:block}
  .split .container{grid-template-columns:1fr}
  .split.reverse .container{direction:ltr}
  .testi-grid{grid-template-columns:1fr}
  .offices-bar{flex-direction:column;align-items:flex-start;top:0;margin-top:-14px}
  .promise-spacer{height:14px}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .topbar .container{justify-content:center;text-align:center}
  .topbar-msg{position:relative;width:100%;min-height:18px;flex-wrap:nowrap;overflow:hidden}
  .topbar-msg .sep{display:none}
  .topbar-slide{
    position:absolute;left:0;right:0;top:0;
    justify-content:center;
    opacity:0;visibility:hidden;
    transition:opacity .4s ease;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .topbar-slide.is-active{opacity:1;visibility:visible}
  .hero-cta,.qf-row,.qf-checks,.qf-row.cols-3,.qe-row{grid-template-columns:1fr}
  .qe-type-grid{grid-template-columns:1fr 1fr}
  .hero-card{padding:26px 22px 28px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;justify-content:center}
  .builds-cta{flex-direction:column;align-items:stretch}
  .builds-cta .btn{width:100%;justify-content:center}
  .split-content > .btn{display:flex;width:fit-content;margin:0 auto}
  .quality-cta{justify-content:center}
  .collage{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto;gap:12px}
  .collage-main-wrap{grid-column:1/3;grid-row:1;aspect-ratio:16/10}
  .collage > .ph:not(.collage-main){aspect-ratio:1/1}
  .offices-bar{align-items:center;text-align:center;border-radius:24px;padding:32px 28px}
  .offices-actions{align-self:center;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin-top:6px}
  .offices-actions .btn{width:auto;min-width:200px;justify-content:center}
  .faq-cta{flex-direction:column;align-items:stretch}
  .faq-cta > a{width:100%;justify-content:center}
  .qf-row,.qf-row.cols-3{display:flex;flex-direction:column}
  .types-grid,.builds-grid,.offer-grid{grid-template-columns:1fr}
  .types .section-head h2{white-space:normal}
  .promise .section-head h2{white-space:normal}
  .cta-bar .container{flex-direction:column;text-align:center}
  .cta-bar-actions{flex-direction:column;align-items:stretch;justify-content:center;width:100%}
  .cta-bar-actions .btn{width:100%;justify-content:center}
  .footer-bottom{flex-direction:column;text-align:center}
  .floating-badge.on-photo{left:16px}

  /* -------- tighter section spacing on mobile -------- */
  .hero .container{padding-top:40px;padding-bottom:48px}
  .split,.types{padding:40px 0}
  .quality,.offer,.builds,.faq,.quote-section{padding:40px 0}
  .promise{padding:40px 0 0}
  .testimonials{padding:64px 0 48px}
  .cta-bar{padding:32px 0}
  .site-footer{padding:48px 0 0}
}

/* utility */
.mobile-menu{
  /* top is set inline by JS to sit flush under the header (.site-header),
     which stays in place — body scroll is locked while the menu is open,
     so the header's position can't drift underneath it */
  display:none;position:fixed;top:70px;left:0;right:0;bottom:0;background:var(--dark);z-index:100;
  padding:24px;flex-direction:column;overflow-y:auto;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.mobile-menu.open{display:flex}
.mobile-menu ul{display:flex;flex-direction:column;gap:0;margin-bottom:20px}
.mobile-menu a{color:#fff;font-family:var(--font-head);font-size:1.15rem;font-weight:600;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);display:block}
.mobile-menu a.btn{display:flex;border-bottom:none}
/* BBB trust card — sits directly under the quote button in the mobile menu */
.mobile-menu a.mobile-menu-bbb{
  display:flex;align-items:center;gap:14px;margin-top:20px;padding:12px 14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;
  transition:background .15s ease,border-color .15s ease;
}
.mobile-menu a.mobile-menu-bbb:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.mobile-menu-bbb-seal{flex-shrink:0;display:flex;align-items:center;height:52px;padding:6px 8px;background:#fff;border-radius:10px}
.mobile-menu-bbb-seal img{height:100%;width:auto;display:block}
.mobile-menu-bbb-text{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.mobile-menu-bbb-text strong{font-size:.95rem;font-weight:700;color:#fff}
.mobile-menu-bbb-text small{font-family:var(--font-body);font-size:.78rem;font-weight:400;color:rgba(255,255,255,.6)}

/* ============================================================
   PAGE: POLE BUILDINGS (interior page hero + sections)
   ============================================================ */
.pb-hero{position:relative;background:var(--gray-50);padding:76px 0 92px;overflow:hidden}
.pb-hero::before{
  content:'';position:absolute;top:-140px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(227,30,36,.10),rgba(244,183,64,.09) 55%,transparent 72%);
  z-index:0;pointer-events:none;
}
.pb-hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.pb-hero-copy h1{font-size:clamp(2.5rem,4.6vw,3.6rem);font-weight:800;line-height:1.06;color:var(--ink);margin-bottom:22px}
.pb-hero-copy h1 .accent-red{color:var(--red)}
.pb-hero-copy p.lead{color:var(--gray-700);font-size:1.05rem;max-width:480px;margin-bottom:32px}

/* trust row: quick credibility strip under the CTA buttons */
.pb-trust-row{display:flex;flex-wrap:wrap;gap:22px 28px;margin-top:32px}
.pb-trust-item{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.83rem;color:var(--gray-900)}
.pb-trust-item .icon-wrap{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#fdecec;color:var(--red);
  display:flex;align-items:center;justify-content:center;
}
.pb-trust-item .icon-wrap .icon{width:17px;height:17px;stroke-width:2}

/* hero media: a two-photo collage instead of a single flat frame */
.pb-hero-media{position:relative}
.pb-hero-media .phm-main{border-radius:var(--radius-lg);aspect-ratio:4/3.6;box-shadow:var(--shadow-lg)}
.pb-hero-media .phm-accent{
  position:absolute;left:-44px;bottom:-36px;z-index:2;width:52%;aspect-ratio:2/1;
  /* .ph (below) sets height:100%, and because this box is absolutely
     positioned inside .pb-hero-media — whose height is definite once the
     grid resolves its row track — that percentage actually resolves,
     which makes aspect-ratio get silently ignored (a definite height
     always wins). height:auto is what lets aspect-ratio govern instead. */
  height:auto;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);border:6px solid var(--white);
}
/* the source photo is a wide overcast shot that's nearly half empty sky.
   `cover` only crops as much as the box's aspect ratio forces — a box close
   to the photo's own ratio crops almost nothing, so most of that sky stayed
   visible. Going wide/short here forces a real vertical crop, and anchoring
   it to the bottom pushes the crop entirely out of the sky. */
.pb-hero-media .phm-accent img{object-position:center bottom}
.pb-hero-media .floating-badge{left:auto;right:22px;top:22px;bottom:auto;transform:none;z-index:3}

/* -------- unseen-features checklist -------- */
.pb-unseen-list{display:flex;flex-direction:column;gap:20px;margin-bottom:4px}
.pb-unseen-list li{display:flex;align-items:flex-start;gap:14px;font-size:.96rem;color:var(--gray-700);line-height:1.5}
.pb-unseen-list .check-circle-icon{margin-top:2px}

/* -------- feature chip grid -------- */
.pb-chip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.pb-chip{
  display:flex;align-items:center;gap:10px;background:var(--gray-50);
  border:1px solid var(--gray-100);border-radius:var(--radius-sm);
  padding:14px 16px;font-weight:600;font-size:.87rem;color:var(--gray-900);
  transition:border-color .15s ease,background .15s ease;
}
.pb-chip:hover{border-color:var(--red);background:#fdecec}
.pb-chip .check-circle-icon{width:18px;height:18px;flex-shrink:0}
.pb-chip-more{background:transparent;border-style:dashed;color:var(--gray-500);justify-content:center;font-weight:700}
.pb-chip-more:hover{border-color:var(--gray-300);background:transparent}

/* -------- callout note -------- */
.pb-note{
  display:flex;gap:16px;align-items:flex-start;background:var(--gray-50);
  border-left:4px solid var(--red);border-radius:var(--radius-sm);
  padding:22px 26px;max-width:860px;margin:0 auto;
}
.pb-note .icon{width:22px;height:22px;color:var(--red);flex-shrink:0;margin-top:2px}
.pb-note p{color:var(--gray-700);font-size:.93rem}

@media (max-width:1080px){
  .pb-chip-grid{grid-template-columns:repeat(3,1fr)}
  .pb-hero .container{grid-template-columns:1fr;gap:48px}
  .pb-hero-media{order:-1}
  /* width:100% keeps this a definite-width box that max-width then clamps —
     without it, margin:auto centering makes the box shrink-to-fit, and its
     only in-flow child (.phm-main, width:100% via .ph) contributes nothing
     to that calculation, collapsing the whole thing to 0 width. */
  .pb-hero-media{width:100%;max-width:520px;margin:0 auto 24px}
  .pb-hero-copy p.lead{max-width:none}
}
@media (max-width:860px){
  .pb-hero{padding:40px 0 56px}
  .pb-chip-grid{grid-template-columns:repeat(2,1fr)}
  .pb-trust-row{gap:16px 24px}
}
@media (max-width:600px){
  /* On phones the hero photo becomes the section background (same shot as
     .phm-main) instead of a separate image block — no room for a collage,
     and this reads as a proper full-bleed mobile hero. */
  .pb-hero{
    background:
      linear-gradient(rgba(9,10,12,.76),rgba(9,10,12,.76)),
      url("../images/pole_buildings/12-December-scaled.jpg");
    background-size:cover;
    background-position:center;
    padding:48px 0 40px;
  }
  .pb-hero::before{display:none}
  .pb-hero-media{display:none}
  .pb-hero-copy h1{color:#fff}
  .pb-hero-copy p.lead{color:#dcdde1}
  .pb-trust-row{flex-direction:column;gap:14px}
  .pb-hero .pb-trust-item{color:#fff}
  .pb-hero .pb-trust-item .icon-wrap{background:rgba(255,255,255,.16);color:#fff}
  .pb-hero-copy .btn-outline-dark{border-color:rgba(255,255,255,.55);color:#fff}
  .pb-hero-copy .btn-outline-dark:hover{border-color:#fff;background:rgba(255,255,255,.12)}
}
@media (max-width:600px){
  .pb-note{flex-direction:column}
}

/* ============================================================
   PAGE: HOOVER TRUSSES (interior page hero + process + offices)
   ============================================================ */
.ht-hero{position:relative;background:var(--gray-50);padding:76px 0 92px;overflow:hidden}
.ht-hero::before{
  content:'';position:absolute;top:-140px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(227,30,36,.10),rgba(244,183,64,.09) 55%,transparent 72%);
  z-index:0;pointer-events:none;
}
.ht-hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ht-hero-copy h1{font-size:clamp(2.5rem,4.6vw,3.6rem);font-weight:800;line-height:1.06;color:var(--ink);margin-bottom:22px}
.ht-hero-copy h1 .accent-red{color:var(--red)}
.ht-hero-copy p.lead{color:var(--gray-700);font-size:1.05rem;max-width:480px;margin-bottom:32px}

.ht-hero-media{position:relative}
.ht-hero-media .phm-main{border-radius:var(--radius-lg);aspect-ratio:5/3.3;box-shadow:var(--shadow-lg)}
.ht-hero-media .phm-accent{
  position:absolute;left:-44px;bottom:-36px;z-index:2;width:52%;aspect-ratio:2/1;height:auto;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);border:6px solid var(--white);
}
.ht-hero-media .floating-badge{left:auto;right:22px;top:22px;bottom:auto;transform:none;z-index:3}

/* -------- 4-step process: vertical timeline -------- */
.ht-process{padding:72px 0;background:var(--white)}
.ht-timeline{max-width:1040px;margin:0 auto}
.ht-tl-step{display:grid;grid-template-columns:64px 1fr;gap:36px}
.ht-tl-step:not(:last-child){padding-bottom:44px}
.ht-tl-marker{position:relative;display:flex;justify-content:center}
.ht-tl-circle{
  width:64px;height:64px;border-radius:50%;background:var(--red);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;
  box-shadow:0 8px 20px rgba(227,30,36,.28);position:relative;z-index:1;
}
.ht-tl-line{position:absolute;top:64px;bottom:-44px;left:50%;transform:translateX(-50%);width:2px;background:var(--gray-100)}
.ht-tl-content{padding-top:10px}
.ht-tl-content h3{font-size:1.3rem;font-weight:700;margin-bottom:10px}
.ht-tl-content p{color:var(--gray-700);font-size:.98rem;margin-bottom:14px;line-height:1.65;max-width:820px}
.ht-tl-content p:last-of-type{margin-bottom:0}
.ht-tl-content p.ht-step-label{font-weight:700;color:var(--gray-900);font-size:.88rem;margin-bottom:12px}
.process-icon{
  width:48px;height:48px;border-radius:10px;background:#fdecec;color:var(--red);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.process-icon .icon{width:22px;height:22px}
.process-checklist{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px 28px;max-width:620px}
.process-checklist li{display:flex;align-items:center;gap:8px;font-size:.87rem;font-weight:600;color:var(--gray-900)}
.process-checklist .check-circle-icon{width:16px;height:16px;flex-shrink:0}

/* -------- offices -------- */
.ht-locations{padding:72px 0;background:var(--gray-50)}
.ht-locations-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:820px;margin:0 auto}
.ht-office-card{
  background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius);
  padding:30px 28px;text-align:center;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.ht-office-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent}
.ht-office-card h3{font-size:1.15rem;font-weight:700;margin-bottom:16px}
.ht-office-addr{display:flex;align-items:flex-start;justify-content:center;gap:10px;color:var(--gray-700);font-size:.92rem;line-height:1.5;margin-bottom:18px}
.ht-office-addr .icon{width:16px;height:16px;color:var(--red);flex-shrink:0;margin-top:3px}

@media (max-width:1080px){
  .ht-hero .container{grid-template-columns:1fr;gap:48px}
  .ht-hero-media{order:-1;width:100%;max-width:520px;margin:0 auto 24px}
  .ht-hero-copy p.lead{max-width:none}
}
@media (max-width:860px){
  .ht-hero{padding:40px 0 56px}
  .ht-tl-step{grid-template-columns:52px 1fr;gap:22px}
  .ht-tl-circle{width:52px;height:52px;font-size:1rem}
  .ht-tl-line{top:52px}
  .process-checklist{grid-template-columns:repeat(2,minmax(140px,1fr))}
}
@media (max-width:600px){
  .ht-hero{
    background:
      linear-gradient(rgba(9,10,12,.76),rgba(9,10,12,.76)),
      url("../images/hoover_trusses/100_1514-scaled%20(1).jpg");
    background-size:cover;
    background-position:center;
    padding:48px 0 40px;
  }
  .ht-hero::before{display:none}
  .ht-hero-media{display:none}
  .ht-hero-copy h1{color:#fff}
  .ht-hero-copy p.lead{color:#dcdde1}
  .ht-hero-copy .btn-outline-dark{border-color:rgba(255,255,255,.55);color:#fff}
  .ht-hero-copy .btn-outline-dark:hover{border-color:#fff;background:rgba(255,255,255,.12)}
  .pb-trust-row{flex-direction:column;gap:14px}
  .ht-hero .pb-trust-item{color:#fff}
  .ht-hero .pb-trust-item .icon-wrap{background:rgba(255,255,255,.16);color:#fff}
  .ht-timeline{max-width:none}
  .ht-tl-step{grid-template-columns:44px 1fr;gap:18px}
  .ht-tl-circle{width:44px;height:44px;font-size:.9rem}
  .ht-tl-line{top:44px}
  .process-checklist{grid-template-columns:1fr}
  .ht-locations-grid{grid-template-columns:1fr}
}

/* ============================================================
   PAGE: MATERIALS (interior page hero + supply + resources)
   ============================================================ */
.mt-hero{position:relative;background:var(--gray-50);padding:76px 0 88px;overflow:hidden;text-align:center}
.mt-hero::before{
  content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(227,30,36,.10),rgba(244,183,64,.09) 55%,transparent 72%);
  z-index:0;pointer-events:none;
}
.mt-hero .container{position:relative;z-index:1;max-width:760px;margin:0 auto}
.mt-hero h1{font-size:clamp(2.5rem,4.6vw,3.6rem);font-weight:800;line-height:1.06;color:var(--ink);margin-bottom:22px}
.mt-hero h1 .accent-red{color:var(--red)}
.mt-hero p.lead{color:var(--gray-700);font-size:1.05rem;margin:0 auto 28px}
.mt-hero .hero-cta{justify-content:center;margin-bottom:32px}
.mt-hero .pb-trust-row{justify-content:center}

/* contact instruction callout under the hero */
.mt-contact-note{
  display:flex;gap:16px;align-items:flex-start;text-align:left;background:var(--white);
  border:1px solid var(--gray-100);border-radius:var(--radius-sm);padding:22px 26px;
  max-width:640px;margin:36px auto 0;box-shadow:var(--shadow);
}
.mt-contact-note .icon{width:20px;height:20px;color:var(--red);flex-shrink:0;margin-top:2px}
.mt-contact-note p{color:var(--gray-700);font-size:.92rem;line-height:1.6}
.mt-contact-note a{color:var(--red);font-weight:600}

/* -------- resource images (color chart / warranty spec sheets, shown full size) -------- */
.mt-resources{padding:72px 0;background:var(--white)}
.mt-resources-grid{display:flex;flex-direction:column;gap:56px;max-width:1180px;margin:0 auto}
.mt-resource-card{
  display:block;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease;
}
.mt-resource-card:hover{box-shadow:var(--shadow);border-color:transparent}
.mt-resource-card img{display:block;width:100%;height:auto}

@media (max-width:860px){
  .mt-hero{padding:44px 0 56px}
  .mt-contact-note{flex-direction:column}
}

/* ============================================================
   PAGE: HOOVER BLOG (index grid + single post)
   ============================================================ */
.bl-hero{position:relative;background:var(--gray-50);padding:76px 0 60px;overflow:hidden;text-align:center}
.bl-hero::before{
  content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(227,30,36,.10),rgba(244,183,64,.09) 55%,transparent 72%);
  z-index:0;pointer-events:none;
}
.bl-hero .container{position:relative;z-index:1;max-width:720px;margin:0 auto}
.bl-hero h1{font-size:clamp(2.3rem,4.2vw,3.2rem);font-weight:800;line-height:1.08;color:var(--ink);margin-bottom:16px}
.bl-hero h1 .accent-red{color:var(--red)}
.bl-hero p.lead{color:var(--gray-700);font-size:1.05rem;margin:0 auto}

/* -------- post grid / cards (also used for "related posts") -------- */
.blog-section{padding:64px 0 84px;background:var(--white)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.blog-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:transparent}
.blog-card-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--gray-100)}
.blog-card-media img{width:100%;height:100%;object-fit:cover}
.blog-card-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--dark),var(--dark-2))}
.blog-card-noimg .icon{width:42px;height:42px;color:var(--gold);opacity:.9}
.blog-card-cat{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.blog-card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.blog-card-meta{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--gray-500);font-weight:600;margin-bottom:10px}
.blog-card-meta .sep{opacity:.5}
.blog-card h3{font-size:1.15rem;line-height:1.32;margin-bottom:10px}
.blog-card h3 a:hover{color:var(--red)}
.blog-card-body p{color:var(--gray-700);font-size:.9rem;line-height:1.6;margin-bottom:18px;flex:1}
.blog-card-body .btn-link{margin-top:auto}

@media (max-width:980px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .bl-hero{padding:44px 0 40px}
  .blog-section{padding:44px 0 56px}
  .blog-grid{grid-template-columns:1fr}
}

/* -------- single post -------- */
.post-hero{position:relative;background:var(--gray-50);padding:44px 0 40px;overflow:hidden}
.post-hero .container{position:relative;z-index:1;max-width:760px;margin:0 auto}
.post-back{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--gray-700);margin-bottom:22px}
.post-back .icon{width:15px;height:15px;transform:rotate(180deg)}
.post-back:hover{color:var(--red)}
.post-hero .eyebrow{margin-bottom:14px}
.post-hero h1{font-size:clamp(2rem,4vw,2.85rem);font-weight:800;line-height:1.14;color:var(--ink);margin-bottom:20px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.85rem;color:var(--gray-500);font-weight:600}
.post-meta .icon{width:15px;height:15px;margin-right:4px;vertical-align:-3px}
.post-meta .sep{opacity:.5}

.post-media{max-width:900px;margin:36px auto 0;padding:0 24px}
.post-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg)}

.post-section{padding:52px 0 16px;background:var(--white)}
.post-body{max-width:720px;margin:0 auto}
.post-body h2{font-size:clamp(1.25rem,2.4vw,1.55rem);color:var(--ink);margin:34px 0 14px}
.post-body h2:first-child{margin-top:0}
.post-body h3{font-size:1.05rem;color:var(--ink);margin:22px 0 10px}
.post-body p{color:var(--gray-700);font-size:1rem;line-height:1.75;margin-bottom:18px}
.post-body p strong{color:var(--ink)}
.post-body ul{list-style:disc;padding-left:22px;margin-bottom:18px}
.post-body li{color:var(--gray-700);font-size:1rem;line-height:1.75;margin-bottom:8px}
.post-body img{border-radius:var(--radius-sm)}

.post-table-wrap{overflow-x:auto;margin:8px 0 28px;border:1px solid var(--gray-100);border-radius:var(--radius-sm)}
.post-body table{width:100%;border-collapse:collapse;font-size:.88rem}
.post-body table th,.post-body table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--gray-100)}
.post-body table thead th{background:var(--gray-50);font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.post-body table tr:last-child td{border-bottom:none}
.post-body table td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}

/* inline project gallery used in "Custom Buildings for YOU!" post */
.post-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 28px}
.post-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);box-shadow:var(--shadow)}

/* contact callout reused inside posts */
.post-callout{display:flex;gap:16px;align-items:flex-start;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-sm);padding:22px 26px;margin:8px 0 30px}
.post-callout .icon{width:20px;height:20px;color:var(--red);flex-shrink:0;margin-top:2px}
.post-callout p{color:var(--gray-700);font-size:.95rem;margin:0}
.post-callout a{color:var(--red);font-weight:700}

.related-section{padding:16px 0 84px;background:var(--white)}
.related-section .section-head{margin-bottom:32px}

@media (max-width:640px){
  .post-hero{padding:32px 0 30px}
  .post-gallery{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   PAGE: GREER (location hero + service area + manufacturing)
   ============================================================ */
.gr-hero{position:relative;background:var(--gray-50);padding:64px 0 88px;overflow:hidden}
.gr-hero::before{
  content:'';position:absolute;top:-140px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(227,30,36,.10),rgba(244,183,64,.09) 55%,transparent 72%);
  z-index:0;pointer-events:none;
}
.gr-hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.gr-hero-copy h1{font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:800;line-height:1.08;color:var(--ink);margin-bottom:20px}
.gr-hero-copy h1 .accent-red{color:var(--red)}
.gr-hero-copy p.lead{color:var(--gray-700);font-size:1.03rem;max-width:520px;margin-bottom:30px}

/* location card: address up top, no photo needed to earn the spot */
.gr-location-card{
  position:relative;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:34px 32px;
}
.gr-location-card .eyebrow{margin-bottom:10px}
.gr-location-card h3{font-size:1.3rem;font-weight:700;margin-bottom:18px}
.gr-location-card .gr-addr{display:flex;align-items:flex-start;gap:12px;color:var(--gray-700);font-size:.95rem;line-height:1.55;margin-bottom:16px}
.gr-location-card .gr-addr .icon{width:18px;height:18px;color:var(--red);flex-shrink:0;margin-top:3px}
.gr-location-card .gr-hours{display:flex;align-items:center;gap:12px;color:var(--gray-700);font-size:.9rem;margin-bottom:22px}
.gr-location-card .gr-hours .icon{width:16px;height:16px;color:var(--red);flex-shrink:0}
.gr-location-card .footer-phone{
  display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:1.15rem;
  color:var(--ink);margin-bottom:14px;
}
.gr-location-card .footer-phone .icon{width:18px;height:18px;color:var(--red)}
.gr-location-card .floating-badge{left:auto;right:22px;top:-18px;bottom:auto;transform:none;z-index:3}

/* -------- service area band -------- */
.gr-service-area{padding:56px 0;background:var(--dark);text-align:center}
.gr-service-area .eyebrow{color:var(--gold);justify-content:center}
.gr-service-area h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:14px}
.gr-service-area p{color:#c9cad0;max-width:640px;margin:0 auto 30px;font-size:.98rem}
.gr-area-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:900px;margin:0 auto}
.gr-area-chip{
  display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:12px 22px;font-weight:700;font-size:.95rem;color:#fff;
}
.gr-area-chip .icon{width:16px;height:16px;color:var(--gold)}

/* -------- manufacturing section -------- */
.gr-manufacture{padding:72px 0;background:var(--gray-50)}

/* -------- feature grid: centered icon-chip cloud --------
   Fixed-column grids (.pb-chip-grid) leave an orphaned card stranded
   alone on the last row whenever the item count isn't a multiple of the
   column count. Flex-wrap + justify-content:center lets short last rows
   collapse to their content width and center instead. */
.gr-feature-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1000px;margin:0 auto}
.gr-feature-item{
  display:flex;align-items:center;gap:14px;background:var(--white);
  border:1px solid var(--gray-100);border-radius:var(--radius);
  padding:14px 26px 14px 16px;font-weight:700;font-size:.95rem;color:var(--gray-900);
  box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.gr-feature-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.gr-feature-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#fdecec;color:var(--red);
  display:flex;align-items:center;justify-content:center;
}
.gr-feature-icon .icon{width:19px;height:19px}
.gr-feature-item.is-more{
  background:transparent;box-shadow:none;border-style:dashed;color:var(--gray-500);
  padding:14px 26px;justify-content:center;
}
.gr-feature-item.is-more:hover{transform:none;border-color:var(--gray-300)}

@media (max-width:600px){
  .gr-feature-item{width:100%}
}

/* -------- build-type cards: icon + title + description --------
   A bare label in a pill reads as sparse padding once the row breaks
   unevenly. Giving each item a real description (same language as the
   homepage's .offer-card) fills the same footprint with substance
   instead of whitespace, and a fixed 5-column grid means these two
   5-item sections tile in a single row with nothing orphaned. */
.gr-build-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1180px;margin:0 auto}
.gr-build-card{
  background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius);
  padding:30px 20px;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.gr-build-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.gr-build-icon{
  width:52px;height:52px;border-radius:50%;background:#fdecec;color:var(--red);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.gr-build-icon .icon{width:23px;height:23px}
.gr-build-card h3{font-size:1rem;font-weight:700;margin-bottom:8px}
.gr-build-card p{color:var(--gray-500);font-size:.83rem;line-height:1.5}
.gr-build-card.is-more{background:transparent;border-style:dashed;display:flex;flex-direction:column;justify-content:center}
.gr-build-card.is-more h3{color:var(--gray-500);margin-bottom:0}
.gr-build-card.is-more:hover{transform:none;box-shadow:none;border-color:var(--gray-300)}

@media (max-width:1080px){
  .gr-build-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .gr-build-grid{grid-template-columns:repeat(2,1fr)}
  .gr-build-card{padding:24px 14px}
}

@media (max-width:1080px){
  .gr-hero .container{grid-template-columns:1fr;gap:40px}
  .gr-location-card{order:-1;width:100%;max-width:520px;margin:0 auto}
  .gr-hero-copy p.lead{max-width:none}
}
@media (max-width:600px){
  .gr-hero{padding:40px 0 56px}
  .gr-area-chips{flex-direction:column;align-items:stretch}
}

/* ============================================================
   PAGE: ABOUT (hero + history timeline + reviews + gallery + pillars)
   ============================================================ */
.ab-hero{position:relative;background:var(--gray-50);padding:76px 0 92px;overflow:hidden}
.ab-hero::before{
  content:'';position:absolute;top:-140px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(227,30,36,.10),rgba(244,183,64,.09) 55%,transparent 72%);
  z-index:0;pointer-events:none;
}
.ab-hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ab-hero-copy h1{font-size:clamp(2.5rem,4.6vw,3.6rem);font-weight:800;line-height:1.06;color:var(--ink);margin-bottom:22px}
.ab-hero-copy h1 .accent-red{color:var(--red)}
.ab-hero-copy p.lead{color:var(--gray-700);font-size:1.05rem;max-width:480px;margin-bottom:32px}

/* hero media: an older wide shot pinned behind a modern project photo,
   so the "then and now" pairing the copy talks about is visible at a glance */
.ab-hero-media{position:relative}
.ab-hero-media .phm-main{border-radius:var(--radius-lg);aspect-ratio:5/3.3;box-shadow:var(--shadow-lg)}
.ab-hero-media .phm-accent{
  position:absolute;left:-44px;bottom:-36px;z-index:2;width:52%;aspect-ratio:2/1;height:auto;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);border:6px solid var(--white);
}
.ab-hero-media .floating-badge{left:auto;right:22px;top:22px;bottom:auto;transform:none;z-index:3}

/* year-in-circle modifier for the history timeline (reuses .ht-timeline) */
.ht-tl-circle.yr{font-size:.82rem;letter-spacing:-.02em}

/* -------- reviews: dark section, deliberately set apart from the rest of the page -------- */
.ab-reviews{background:var(--dark);padding:80px 0;color:#fff}
.ab-reviews .section-head h2{color:#fff}
.ab-reviews .section-head p{color:#b7b9c0}
.ab-reviews-stat{display:flex;align-items:center;justify-content:center;gap:16px;margin:-4px 0 44px;flex-wrap:wrap}
.ab-reviews-stat .stars{color:var(--gold)}
.ab-reviews-stat .stars .icon{width:22px;height:22px}
.ab-reviews-stat b{font-family:var(--font-head);font-size:1.4rem;font-weight:800}
.ab-reviews-stat span{color:#9d9ea5;font-size:.92rem}
.ab-reviews-stat .sep{width:1px;height:22px;background:rgba(255,255,255,.16)}
.ab-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
.ab-review-card{background:var(--dark-2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:30px}
.ab-review-card .stars{margin-bottom:16px}
.ab-review-card .stars .icon{width:16px;height:16px}
.ab-review-card p{color:#d6d7db;font-size:.95rem;line-height:1.65;margin-bottom:22px}
.ab-review-person{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.ab-review-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red-darker));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.ab-review-person>div{display:flex;flex-direction:column;gap:2px}
.ab-review-person strong{font-size:.92rem;line-height:1;color:#fff}
.ab-review-person span:not(.ab-review-avatar){font-size:.78rem;color:#9d9ea5;line-height:1}
.ab-reviews-cta{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}

/* -------- our work: 6-photo proof grid (deliberately not a full gallery) -------- */
.ab-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
.ab-gallery-grid .ph{border-radius:var(--radius);aspect-ratio:4/2.9;box-shadow:var(--shadow)}
.ab-gallery-cta{text-align:center}

/* -------- commitment pillars -------- */
.ab-pillars{padding:72px 0;background:var(--gray-50)}
.ab-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:900px;margin:0 auto}
.ab-pillar{text-align:center}
.ab-pillar-icon{
  width:56px;height:56px;border-radius:50%;background:#fdecec;color:var(--red);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.ab-pillar-icon .icon{width:24px;height:24px}
.ab-pillar h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.ab-pillar p{color:var(--gray-500);font-size:.9rem}

@media (max-width:1080px){
  .ab-hero .container{grid-template-columns:1fr;gap:48px}
  .ab-hero-media{order:-1;width:100%;max-width:520px;margin:0 auto 24px}
  .ab-hero-copy p.lead{max-width:none}
  .ab-review-grid{grid-template-columns:1fr 1fr}
  .ab-gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ab-hero{padding:40px 0 56px}
  .ab-reviews{padding:56px 0}
  .ab-pillars-grid{grid-template-columns:1fr;gap:28px;max-width:340px}
}
@media (max-width:600px){
  .ab-hero{
    background:
      linear-gradient(rgba(9,10,12,.76),rgba(9,10,12,.76)),
      url("../images/pole_buildings/5b-scaled.jpg");
    background-size:cover;
    background-position:center;
    padding:48px 0 40px;
  }
  .ab-hero::before{display:none}
  .ab-hero-media{display:none}
  .ab-hero-copy h1{color:#fff}
  .ab-hero-copy p.lead{color:#dcdde1}
  .ab-hero-copy .btn-outline-dark{border-color:rgba(255,255,255,.55);color:#fff}
  .ab-hero-copy .btn-outline-dark:hover{border-color:#fff;background:rgba(255,255,255,.12)}
  .ab-review-grid{grid-template-columns:1fr}
  .ab-gallery-grid{grid-template-columns:1fr}
  .ab-reviews-stat{flex-direction:column;gap:8px}
  .ab-reviews-stat .sep{display:none}
}

/* ============================================================
   GALLERY PAGE (gallery.php)
   ============================================================ */

/* ---- 01 Hero ----
   Same minimal centered treatment as the Hoover Blog hero (.bl-hero):
   light background, soft radial-gradient blob, badge + heading + lead
   centered in a narrow column — no photo. */
.gallery-hero{position:relative;background:var(--gray-50);padding:76px 0 60px;overflow:hidden;text-align:center}
.gallery-hero::before{
  content:'';position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(227,30,36,.10),rgba(244,183,64,.09) 55%,transparent 72%);
  z-index:0;pointer-events:none;
}
.gallery-hero .container{position:relative;z-index:1;max-width:720px;margin:0 auto}
.gallery-hero h1{font-size:clamp(2.3rem,4.2vw,3.2rem);font-weight:800;line-height:1.08;color:var(--ink);margin-bottom:16px}
.gallery-hero h1 .accent-red{color:var(--red)}
.gallery-hero p.lead{color:var(--gray-700);font-size:1.05rem;margin:0 auto 28px}
.gallery-hero .hero-cta{justify-content:center}

/* ---- 02 Project Categories ---- */
.cat-cards{padding:76px 0;background:var(--gray-50)}
.cat-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cat-card{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3.2;box-shadow:var(--shadow)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cat-card:hover img{transform:scale(1.06)}
.cat-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(8,9,11,.86) 100%)}
.cat-card-body{position:absolute;left:0;right:0;bottom:0;padding:24px;color:#fff}
.cat-card-body h3{font-family:var(--font-head);font-size:1.35rem;font-weight:700;margin-bottom:10px}
.cat-card-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.86rem;color:var(--gold)}
.cat-card-link .icon{width:16px;height:16px;transition:transform .15s}
.cat-card:hover .cat-card-link .icon{transform:translateX(4px)}

/* ---- 03 Project Gallery (filter + uniform grid) ---- */
.gallery-section{padding:76px 0;scroll-margin-top:90px}
.gallery-empty{text-align:center;color:var(--gray-500);font-size:1rem;padding:40px 0}
.gallery-filter-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px;scroll-margin-top:90px}
.gallery-filter{
  display:inline-block;padding:10px 20px;border-radius:999px;border:1.5px solid var(--gray-300);background:#fff;
  font-family:var(--font-body);font-weight:600;font-size:.85rem;line-height:1;color:var(--gray-700);
  text-decoration:none;cursor:pointer;transition:all .15s;
}
.gallery-filter:hover{border-color:var(--red);color:var(--red)}
.gallery-filter.is-active{background:var(--red);border-color:var(--red);color:#fff}

/* ---- Per-category photo count + pager ---- */
.gallery-count{text-align:center;color:var(--gray-500);font-size:.85rem;font-weight:600;margin:-20px 0 28px}
.gallery-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px}
.gallery-pager .gpg-btn{
  display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;
  border:1.5px solid var(--gray-300);border-radius:10px;background:#fff;
  font-weight:700;font-size:1rem;color:var(--gold);text-decoration:none;transition:all .15s;
}
.gallery-pager .gpg-btn:hover{border-color:var(--red);color:var(--red)}
.gallery-pager .gpg-btn.is-disabled{opacity:.4;pointer-events:none}
.gallery-pager .gpg-jump{display:flex}
.gallery-pager .gpg-current{
  width:46px;height:38px;padding:0 6px;text-align:center;
  border:1.5px solid var(--gray-500);border-radius:10px;background:var(--gray-50);
  font-family:var(--font-body);font-weight:700;font-size:1rem;color:var(--gray-900);
  -moz-appearance:textfield;appearance:textfield;
}
.gallery-pager .gpg-current:focus{outline:none;border-color:var(--red);background:#fff}
.gallery-pager .gpg-current::-webkit-outer-spin-button,
.gallery-pager .gpg-current::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gallery-pager .gpg-sep{color:var(--gray-500);font-weight:600;font-size:.9rem}
.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  justify-content:center;align-items:start;
}
.gallery-item{
  --gallery-img-h:240px;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;
  height:var(--gallery-img-h);display:flex;align-items:center;justify-content:center;background:var(--gray-100);
}
.gallery-item img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  transition:transform .35s ease;
}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item.is-hidden{display:none}

/* ---- Lightbox ---- */
.gallery-lightbox{
  position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:40px;
  background:rgba(10,10,12,.94);opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.gallery-lightbox.is-open{opacity:1;visibility:visible}
.gallery-lightbox-figure{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;max-height:90vh;
}
.gallery-lightbox-figure img{
  max-width:100%;max-height:calc(90vh - 58px);min-height:0;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);object-fit:contain;
}
/* ---- Share bar ---- */
.gallery-share{
  display:flex;align-items:stretch;background:#fbfbfb;border:1px solid #d9d9d9;
  border-radius:6px;overflow:hidden;max-width:100%;flex-wrap:wrap;
}
.gallery-share a{
  display:flex;align-items:center;justify-content:center;width:34px;height:32px;
  color:#5b5b5b;border-left:1px solid #e4e4e4;transition:background .15s,color .15s;
}
.gallery-share a:first-child{border-left:0}
.gallery-share a:hover{background:#efefef;color:#111}
.gallery-share svg{width:15px;height:15px;display:block}
.gallery-lightbox-close{
  position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.gallery-lightbox-close:hover{background:rgba(255,255,255,.2)}
.gallery-lightbox-close .icon{width:20px;height:20px}
.gallery-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;
}
.gallery-lightbox-nav[hidden]{display:none}
.gallery-lightbox-nav:hover{background:rgba(255,255,255,.2)}
.gallery-lightbox-nav .icon{width:22px;height:22px}
.gallery-lightbox-prev{left:28px}
.gallery-lightbox-prev .icon{transform:rotate(180deg)}
.gallery-lightbox-next{right:28px}
@media (max-width:600px){
  .gallery-lightbox-prev{left:10px}
  .gallery-lightbox-next{right:10px}
}

/* ---- 04 Built Across the Carolinas ---- */
.region-section{background:var(--dark);padding:76px 0;color:#fff}
.region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px}
.region-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.3;border:1px solid rgba(255,255,255,.06)}
.region-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.region-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.78) 100%)}
.region-card-body{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:1}
.region-card-loc{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:#fff}
.region-card-loc .icon{width:14px;height:14px;color:var(--gold)}
.region-card-type{display:block;color:#b7b9c0;font-size:.75rem;margin-top:4px}

@media (max-width:1180px){
  .cat-cards-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .region-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item{--gallery-img-h:200px}
}
@media (max-width:640px){
  .gallery-hero{padding:44px 0 40px}
}
@media (max-width:600px){
  .cat-cards-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item{--gallery-img-h:220px}
  .region-grid{grid-template-columns:1fr}
  .cta-bar-actions{width:100%}
  .cta-bar-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ---- 05 Territories ---- */
.terr-states-grid{display:grid;grid-template-columns:.7fr 1.6fr;gap:24px;align-items:start;margin-bottom:32px}
.terr-state-card{background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:26px 28px}
.terr-state-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.terr-flag{font-size:1.9rem;line-height:1}
.terr-state-head h3{font-size:1.15rem;font-weight:800;color:var(--ink)}
.terr-count{display:inline-block;color:var(--red);font-weight:700;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase}
.terr-county-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.terr-county-grid .pb-chip{font-size:.83rem;padding:12px 14px;cursor:default}
.terr-county-grid a.pb-chip{cursor:pointer}

@media (max-width:900px){
  .terr-states-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .terr-county-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .terr-state-card{padding:22px 18px}
}

/* ---- 06 Breadcrumbs ---- */
.breadcrumbs{
  background-color:var(--gray-50);
  background-image:repeating-linear-gradient(135deg,rgba(38,39,43,.045) 0,rgba(38,39,43,.045) 1px,transparent 1px,transparent 11px);
  border-bottom:1px solid var(--gray-100);
}
.breadcrumbs .container{padding-top:12px;padding-bottom:12px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;gap:0}
.breadcrumbs li{display:flex;align-items:center;font-size:.82rem;color:var(--gray-500)}
.breadcrumbs li+li::before{content:'/';margin:0 9px;color:var(--gray-300)}
.breadcrumbs a{color:var(--gray-700);text-decoration:none;font-weight:500}
.breadcrumbs a:hover{color:var(--red)}
.breadcrumbs span[aria-current]{color:var(--gray-500);font-weight:500}
@media (max-width:600px){
  .breadcrumbs .container{padding-top:10px;padding-bottom:10px}
  .breadcrumbs li{font-size:.76rem}
}

/* ===== Reviews page — long customer letters, stacked one per row ===== */
.reviews-page{padding:72px 0 88px}
.reviews-list{display:grid;gap:24px;max-width:860px;margin:0 auto}
.reviews-list .testi-card p{padding-right:34px}