/* Prime Punjab Roofing — Global Stylesheet */
:root {
  --charcoal:#141414; --charcoal-soft:#2B2B2B; --gold:#A97C3F; --gold-light:#C9A063;
  --cream:#FAF7F2; --cream-border:#F0EAE0; --line:#EEE7DB;
  --grey-body:#5A5650; --grey-soft:#6B655C; --grey-dark-body:#B7B1A6; --grey-dark-soft:#9A948A;

  /* ---------- Layout container ----------
     Content is centred to --container with a minimum side gutter. This is
     applied as horizontal PADDING rather than a max-width wrapper so that
     section background colours still bleed to the full viewport width — the
     markup has no inner wrapper div to constrain, and there are 154 sections
     across 28 pages. Change --container here to rewiden/narrow the whole site. */
  --container: 1200px;
  --gutter: 32px;
  --pad-x: max(var(--gutter), calc((100% - var(--container)) / 2));
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; -webkit-font-smoothing:antialiased; }
body { font-family:'Sora', system-ui, sans-serif; background:#FFFFFF; color:var(--charcoal-soft); min-width:920px; }
a { color:var(--gold); text-decoration:none; }
a:hover { color:#8C6529; }
img { max-width:100%; display:block; }
h1, h2, h3 { margin:0; font-family:'Sora', system-ui, sans-serif; }
p { margin:0; }

@keyframes ppr-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes ppr-pulse-ring { 0% { box-shadow:0 0 0 0 rgba(169,124,63,0.45); } 70% { box-shadow:0 0 0 10px rgba(169,124,63,0); } 100% { box-shadow:0 0 0 0 rgba(169,124,63,0); } }
@keyframes ppr-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes ppr-fadein { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* ---------- Image placeholder (replace with real <img> at build time) ---------- */
.image-slot { display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; background:repeating-linear-gradient(45deg,#F0EAE0,#F0EAE0 10px,#FAF7F2 10px,#FAF7F2 20px); border:1px dashed #DCD4C4; color:#8A847A; font-size:13px; border-radius:2px; width:100%; }

/* ---------- Top bar ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:10px var(--pad-x); background:var(--charcoal); flex-wrap:wrap; gap:10px; }
.topbar-left { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.topbar-link { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--grey-dark-body); }
.topbar-link:hover { color:var(--gold-light); }
.topbar-right { display:flex; align-items:center; gap:16px; }
.social-btn { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1px solid #3A3730; color:var(--grey-dark-body); transition:border-color .2s ease, color .2s ease; }
.social-btn:hover { border-color:var(--gold); color:var(--gold-light); }

/* ---------- Header / Nav ---------- */
.site-header { display:flex; align-items:center; justify-content:space-between; padding:10px var(--pad-x); background:#FFFFFF; border-bottom:1px solid var(--cream-border); position:relative; z-index:50; flex-wrap:wrap; gap:16px; }
.logo-link { display:flex; align-items:center; gap:12px; }
.logo-mark { width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:var(--charcoal); transition:transform .3s ease; }
.logo-link:hover .logo-mark { transform:rotate(-8deg) scale(1.08); }
.logo-text { line-height:1; }
.logo-name { font-weight:800; font-size:19px; letter-spacing:.02em; color:var(--charcoal); }
.logo-name span { color:var(--gold); }
.logo-sub { font-size:10px; letter-spacing:.35em; color:var(--charcoal); margin-top:3px; }

.site-nav { display:flex; align-items:center; gap:36px; }
/* No position:relative here on purpose — it would become the mega panel's
   containing block. The panel anchors to .site-header instead so it can span
   the full width and sit flush under the header. */
.nav-item { padding:8px 0; }
.nav-link { font-size:14px; font-weight:600; color:var(--charcoal); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.nav-arrow { font-size:10px; color:var(--gold); display:inline-block; transition:transform .25s ease; }
.nav-item:hover .nav-arrow { transform:rotate(180deg); }
.nav-plain-link { font-size:14px; font-weight:600; color:var(--charcoal); }
/* Anchored to the bottom of .site-header (top:100%) rather than a hard-coded
   fixed offset, which sat 46px too high and covered the nav links — you
   couldn't move across to another menu item without the panel swallowing the
   pointer. Tinted background so it reads as a separate surface, not a
   continuation of the white header. */
.mega-panel { display:none; position:absolute; top:100px; left:0; right:0; background:var(--cream); box-shadow:0 24px 48px rgba(20,20,20,.16); border-top:2px solid var(--gold); border-bottom:1px solid var(--cream-border); padding:40px var(--pad-x); z-index:60; }
.nav-item:hover .mega-panel { display:block; }
/* Invisible bridge across the gap between the nav item and the panel, so the
   menu doesn't close while the pointer travels down to it. */
.mega-panel::before { content:''; position:absolute; left:0; right:0; bottom:100%; height:30px; }
.mega-panel-inner { max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start; }
.mega-label { font-size:11px; letter-spacing:.24em; color:var(--gold); font-weight:700; margin-bottom:18px; }
.mega-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:4px 32px; }
.mega-link { display:flex; align-items:center; gap:10px; padding:12px 8px; font-size:14.5px; color:#2B2B2B; font-weight:600; border-radius:2px; transition:padding-left .2s ease, color .2s ease, background .2s ease; }
.mega-link:hover { background:var(--cream); color:var(--gold); padding-left:16px; }
.mega-arrow { color:var(--gold); font-size:12px; }

.btn-quote { background:var(--charcoal); color:#FFFFFF; padding:13px 26px; font-size:14px; font-weight:700; border-radius:2px; transition:transform .25s ease, background .25s ease; animation:ppr-pulse-ring 2.6s ease-in-out infinite; display:inline-block; }
.btn-quote:hover { background:var(--gold); color:#FFFFFF; transform:translateY(-2px) scale(1.03); animation:none; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding:16px var(--pad-x); background:var(--cream); border-bottom:1px solid var(--cream-border); font-size:12.5px; color:#8A847A; }
.breadcrumb a { color:#8A847A; }
.breadcrumb .current { color:var(--charcoal); font-weight:600; }

/* ---------- Sections & layout ---------- */
.section { padding:96px var(--pad-x); }
.section-tight { padding:64px var(--pad-x); }
.section-dark { background:var(--charcoal); }
.section-cream { background:var(--cream); }
.eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.eyebrow.center { justify-content:center; }
.eyebrow-line { height:1px; width:28px; background:var(--gold); }
.eyebrow-text { font-size:12px; letter-spacing:.32em; color:var(--gold); font-weight:700; }
.eyebrow-text.on-dark { color:var(--gold-light); }

.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 32px; font-size:15px; font-weight:700; border-radius:2px; transition:transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease; border:none; cursor:pointer; }
.btn-gold { background:var(--gold); color:var(--charcoal); }
.btn-gold:hover { background:var(--gold-light); color:var(--charcoal); transform:translateY(-3px); box-shadow:0 14px 28px rgba(201,160,99,.35); }
.btn-dark { background:var(--charcoal); color:#FFFFFF; }
.btn-dark:hover { background:#000000; color:#FFFFFF; transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.3); }
.btn-outline-dark { border:1px solid #d3d3d3; color:#FFFFFF; }
.btn-outline-dark:hover { border-color:var(--gold); color:var(--gold-light); transform:translateY(-3px); }
.btn-outline-light { border:1px solid var(--charcoal); color:var(--charcoal); }
.btn-outline-light:hover { background:var(--charcoal); color:#FFFFFF; }

/* ---------- Cards ---------- */
.card-hover { transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform:translateY(-6px); box-shadow:0 18px 32px rgba(20,20,20,.1); border-color:var(--gold-light); }
.svc-card { display:flex; flex-direction:column; height:100%; background:var(--cream); border:1px solid var(--cream-border); border-radius:2px; overflow:hidden; }
.svc-card:hover { border-color:var(--gold-light); transform:translateY(-6px); box-shadow:0 20px 36px rgba(20,20,20,.12); }
.svc-card-body { padding:22px 26px 26px; flex:1; }
.svc-card-title { font-size:16px; font-weight:700; color:var(--charcoal); margin-bottom:8px; }
.svc-card-desc { font-size:13.5px; line-height:1.6; color:var(--grey-soft); }

/* Three-across service grid. Fixed columns rather than auto-fit so each group
   breaks predictably (3 + 3) and the CTA always lands in the sixth slot. */
.svc-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }

/* CTA card — same footprint as a service card so the row stays even. */
.svc-cta {
  display:flex; flex-direction:column; justify-content:center;
  background:var(--charcoal); border:1px solid var(--charcoal); border-radius:2px;
  padding:30px 28px; height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.svc-cta:hover { transform:translateY(-6px); box-shadow:0 20px 36px rgba(20,20,20,.28); }
.svc-cta-label { font-size:11px; letter-spacing:.28em; color:var(--gold-light); font-weight:700; margin-bottom:12px; }
.svc-cta-title { font-size:20px; font-weight:800; color:#FFFFFF; line-height:1.3; margin-bottom:10px; }
.svc-cta-desc { font-size:13.5px; line-height:1.65; color:#B7B1A6; margin-bottom:20px; }
.svc-cta-meta { font-size:13px; line-height:1.9; color:#D8D3CB; margin-bottom:22px; }
.svc-cta-meta a { color:var(--gold-light); font-weight:700; }
.svc-cta-meta a:hover { color:#FFFFFF; }
.svc-cta .btn { align-self:flex-start; }

.region-card { display:flex; align-items:center; justify-content:center; text-align:center; font-size:14px; font-weight:600; color:var(--charcoal); background:#FFFFFF; border:1px solid var(--line); padding:20px; border-radius:2px; height:100%; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease; }
.region-card:hover { border-color:var(--gold); color:var(--gold); background:#FFF9EF; transform:translateY(-6px) scale(1.03); box-shadow:0 16px 30px rgba(169,124,63,.22); }
.region-card.small { padding:18px; font-size:13.5px; }
.region-card.small:hover { transform:translateY(-4px); box-shadow:0 14px 26px rgba(169,124,63,.18); }
.region-card.on-cream { background:var(--cream); }

/* ---------- Why-us checklist ---------- */
.why-row { display:flex; gap:20px; padding:22px 0; border-bottom:1px solid #2C2A24; }
.why-tick { width:26px; height:26px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.why-title { font-size:16px; font-weight:700; color:#FFFFFF; margin-bottom:6px; }
.why-desc { font-size:14px; line-height:1.65; color:var(--grey-dark-soft); }

.checklist { display:inline-flex; flex-direction:column; gap:14px; text-align:left; }
.checklist-item { display:flex; gap:12px; align-items:flex-start; }
.checklist-item b { color:#FFFFFF; }
.checklist-item span.txt { font-size:15px; line-height:1.6; color:#D8D3CB; }
.checklist-check { color:var(--gold); font-size:16px; flex-shrink:0; }

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { display:flex; align-items:center; justify-content:space-between; padding:22px 0; cursor:pointer; gap:20px; }
.faq-q-text { font-size:16px; font-weight:700; color:var(--charcoal); }
.faq-sign { font-size:20px; color:var(--gold); flex-shrink:0; font-weight:400; display:inline-block; transition:transform .3s ease; }
.faq-item.open .faq-sign { transform:rotate(180deg); }
.faq-a { display:none; padding:0 0 24px; font-size:14.5px; line-height:1.7; color:var(--grey-body); max-width:700px; }
.faq-item.open .faq-a { display:block; }

/* ---------- Testimonials ---------- */
.testimonial-card { background:#1C1A15; border:1px solid #2C2A24; padding:32px; border-radius:2px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.testimonial-card:hover { border-color:var(--gold); transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.35); }
.testimonial-quote { font-family:'Lora',serif; font-style:italic; font-size:17px; line-height:1.65; color:#D8D3CB; margin-bottom:24px; }
.testimonial-name { font-family:'Lora',serif; font-size:15px; font-weight:600; color:var(--gold-light); }
.testimonial-role { font-size:12.5px; color:#8A847A; margin-top:2px; }

/* ---------- Process stepper (Home) ---------- */
.stepper-wrap { max-width:960px; margin:0 auto; }
.stepper-track { position:relative; margin-bottom:48px; }
.stepper-line-bg { position:absolute; top:19px; left:20px; right:20px; height:2px; background:var(--line); }
.stepper-line-fill { position:absolute; top:19px; left:20px; height:2px; background:var(--gold); transition:width .4s ease; }
.stepper-items { position:relative; display:flex; justify-content:space-between; }
.stepper-item { display:flex; flex-direction:column; align-items:center; cursor:pointer; gap:12px; width:15%; transition:transform .25s ease; }
.stepper-item:hover { transform:translateY(-4px); }
.stepper-circle { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; transition:all .3s ease; background:#FFFFFF; color:#8A847A; border:2px solid #DCD4C4; }
.stepper-circle.done { background:var(--gold); color:var(--charcoal); border-color:var(--gold); }
.stepper-circle.active { transform:scale(1.18); }
.stepper-label { font-size:12.5px; font-weight:700; text-align:center; line-height:1.3; color:var(--grey-dark-soft); transition:color .3s ease; }
.stepper-label.active { color:var(--charcoal); }
.stepper-panel { background:var(--cream); border:1px solid var(--cream-border); border-radius:2px; padding:40px 44px; display:flex; align-items:center; gap:28px; min-height:100px; }
.stepper-panel-num { font-family:'Lora',serif; font-style:italic; font-size:48px; color:var(--gold-light); flex-shrink:0; }
.stepper-panel-title { font-size:20px; font-weight:800; color:var(--charcoal); margin-bottom:8px; }
.stepper-panel-desc { font-size:15px; line-height:1.65; color:var(--grey-body); }

/* Simple numbered step (service pages) */
.step-simple-circle { width:40px; height:40px; border-radius:50%; background:var(--cream); border:2px solid var(--gold-light); display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:background .3s ease, transform .3s ease, box-shadow .3s ease; }
.step-simple:hover .step-simple-circle { background:var(--gold); transform:scale(1.15); box-shadow:0 10px 22px rgba(169,124,63,.35); }
.step-simple { transition:transform .3s ease; }
.step-simple:hover { transform:translateY(-8px); }
.step-simple-num { font-family:'Lora',serif; font-style:italic; font-size:16px; color:var(--gold); }
.step-simple-desc { font-size:14.5px; line-height:1.6; color:var(--grey-body); }

/* ---------- Footer ---------- */
.site-footer { background:#0F0F0F; padding:64px var(--pad-x) 32px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid #262420; }
.footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer-logo-name { font-weight:800; font-size:16px; color:#FFFFFF; }
.footer-logo-name span { color:var(--gold-light); }
.footer-logo-sub { font-size:9px; letter-spacing:.3em; color:var(--grey-dark-soft); margin-top:2px; }
.footer-contact { font-size:13.5px; line-height:1.8; color:var(--grey-dark-soft); }
.footer-heading { font-size:12px; letter-spacing:.2em; color:var(--gold-light); font-weight:700; margin-bottom:16px; }
.footer-col { display:flex; flex-direction:column; }
.footer-col a { font-size:13.5px; color:var(--grey-dark-body); display:block; margin-bottom:10px; }
.footer-col a:hover { color:var(--gold-light); }
.footer-bottom { padding-top:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-legal { font-size:12px; color:#6B655C; }
.footer-credit { display:block; margin-top:6px; }
.footer-credit a { color:var(--gold-light); }
.footer-credit a:hover { color:#FFFFFF; }
.footer-tag { display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.28em; color:#6B655C; }

/* ---------- Contact form ---------- */
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field span { font-size:13px; font-weight:700; color:var(--charcoal); }
.form-field input, .form-field textarea { padding:14px 16px; border:1px solid #DCD4C4; border-radius:2px; font-size:14.5px; color:var(--charcoal); font-family:'Sora',sans-serif; transition:border-color .2s ease; }
.form-field input:focus, .form-field textarea:focus { outline:none; border-color:var(--gold); }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
body.nav-open { overflow:hidden; }

/* ---------- Public page layout helpers ---------- */
.text-center { text-align:center; }
.max-820-center { max-width:820px; margin:0 auto; }
.max-900 { max-width:900px; }
.section-faq { padding-bottom:112px; }
.section-pad-64 { padding:64px var(--pad-x); }
.section-label { font-size:12px; letter-spacing:.2em; color:var(--gold); font-weight:700; margin-bottom:20px; }
.section-label-tight { font-size:12px; letter-spacing:.2em; color:var(--gold); font-weight:700; margin-bottom:14px; }
.faq-title { font-size:34px; font-weight:800; color:var(--charcoal); margin:0 0 40px; }
.section-title { font-size:30px; font-weight:800; color:var(--charcoal); margin:0 0 36px; }
.section-title-spacious { font-size:30px; font-weight:800; color:var(--charcoal); margin:0 0 40px; }
.title-32-spacious { font-size:32px; font-weight:800; color:var(--charcoal); margin:0 0 40px; }
.title-32-tight { font-size:32px; font-weight:800; color:var(--charcoal); margin:0 0 20px; }
.section-title-34 { font-size:34px; font-weight:800; color:var(--charcoal); }
.section-title-nowrap { font-size:34px; font-weight:800; color:var(--charcoal); white-space:nowrap; }
.content-title { font-size:28px; font-weight:800; color:var(--charcoal); margin:0 0 18px; }
.body-copy { font-size:15px; line-height:1.75; color:var(--grey-body); }
.body-copy-15-5 { font-size:15.5px; line-height:1.75; color:var(--grey-body); }
.body-copy-wide { font-size:15.5px; line-height:1.75; color:var(--grey-body); max-width:820px; margin:0 0 40px; }
.dark-label { font-size:12px; letter-spacing:.24em; color:var(--gold-light); font-weight:700; margin-bottom:14px; }

.split-hero { padding:80px var(--pad-x) 88px; }
.split-hero-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 5;
}
.split-hero-inner.hero_content {
    display: flex;
    justify-content: center;
    text-align: center;
}
.hero_content .eyebrow, .hero_content .home-hero-actions, .home-badges {
    justify-content: center;
}
.hero_content .badge-title, .hero_content .badge-copy {
    text-align: left;
}
.split-hero-copy { max-width:640px; flex:1 1 460px; }
.hero-title { font-size:42px; line-height:1.15; font-weight:800; color:#FFFFFF; margin:0 0 22px; }
.hero-copy { font-size:17px; line-height:1.75; color:#D8D3CB; margin:0 0 32px; }
.actions-wrap { display:flex; gap:16px; flex-wrap:wrap; }
.actions-center { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.media-hero { flex:1 1 380px; min-width:320px; max-width:480px; height:auto; }
.media-h-150 { height:150px; }
.media-h-220 { height:220px; }
.media-h-260 { height:260px; }
.media-h-340 { height:340px; }
.media-h-400 { height:400px; }
.content-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.process-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.stack-16 { display:flex; flex-direction:column; gap:16px; }
.region-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }

.service-card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:20px; }
.service-card { background:var(--cream); border:1px solid var(--cream-border); border-radius:2px; padding:26px; }
.service-link-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:20px; }
.service-link-card { display:block; background:#FFFFFF; border:1px solid var(--cream-border); border-radius:2px; padding:26px; }
.card-title { font-size:15.5px; font-weight:700; color:var(--charcoal); margin-bottom:8px; }
.card-copy { font-size:13.5px; line-height:1.65; color:var(--grey-soft); }

.area-hero { padding:80px var(--pad-x) 72px; text-align:center; }
.area-hero-title { font-size:42px; line-height:1.15; font-weight:800; color:#FFFFFF; margin:0 auto 22px; max-width:780px; }
.area-hero-copy { font-size:17px; line-height:1.75; color:#D8D3CB; margin:0 auto 32px; max-width:760px; }
.pill-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pill { font-size:12.5px; color:#D8D3CB; background:#232019; border:1px solid #3A3730; padding:7px 14px; border-radius:100px; }
.other-areas { padding:0 var(--pad-x) 88px; background:#FFFFFF; }

.dark-cta { position:relative; padding:100px var(--pad-x); background:#141414; text-align:center; overflow:hidden; }
.dark-cta-bar { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, #8C6529, #C9A063, #8C6529); }
.dark-cta-inner { position:relative; max-width:720px; margin:0 auto; }
.dark-cta-title { font-size:36px; font-weight:800; color:#FFFFFF; margin-bottom:36px; line-height:1.2; }
.dark-cta-title-large { font-size:40px; font-weight:800; color:#FFFFFF; margin-bottom:18px; line-height:1.2; }

.value-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:24px; }
.about-hero-title { font-size:44px; line-height:1.15; font-weight:800; color:#FFFFFF; margin:0 0 22px; }
.about-hero-copy { font-size:17px; line-height:1.75; color:#D8D3CB; }
.value-card { background:var(--cream); border:1px solid var(--cream-border); border-radius:2px; padding:30px; }
.value-card-title { font-size:16.5px; font-weight:700; color:var(--charcoal); margin-bottom:10px; }
.value-card-copy { font-size:14px; line-height:1.65; color:var(--grey-soft); }
.stat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.stat-card { border-left:2px solid var(--gold); padding-left:24px; }
.stat-label { font-size:11px; letter-spacing:.24em; color:var(--gold-light); font-weight:700; margin-bottom:14px; }
.stat-title { font-size:19px; font-weight:800; color:#FFFFFF; margin-bottom:12px; }
.stat-copy { font-size:14.5px; line-height:1.7; color:#B7B1A6; }
.team-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.team-title { font-size:30px; font-weight:800; color:var(--charcoal); margin:0 0 20px; line-height:1.3; }

.cta-band { background:var(--gold); display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta-band-wrap { flex-wrap:wrap; }
.cta-band-content { display:flex; align-items:center; gap:28px; max-width:760px; }
.cta-band-title { font-size:22px; font-weight:800; color:var(--charcoal); margin-bottom:8px; }
.cta-band-copy { font-size:15px; line-height:1.6; color:#2B2100; }
.action-nowrap { flex-shrink:0; white-space:nowrap; }
.icon-float { flex-shrink:0; animation:ppr-float 2.6s ease-in-out infinite; }

.home-hero { position:relative; padding:70px var(--pad-x) 96px; overflow:hidden; }
.home-hero-copy { max-width:730px; flex:1 1 480px; }
.home-hero-title { font-size:52px; line-height:1.12; font-weight:800; color:#FFFFFF; margin:0 0 24px; letter-spacing:-.01em; }
.home-hero-text { font-size:15px; line-height:1.7; color:#D8D3CB; margin:0 0 40px; }
.home-hero-actions { display:flex; gap:16px; margin-bottom:35px; }
.home-badges { display:flex; gap:36px; flex-wrap:wrap; }
.badge-row { display:flex; align-items:center; gap:12px; }
.badge-icon { width:36px; height:36px; border:1px solid #55503F; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.badge-title { font-size:14px; font-weight:700; color:#FFFFFF; }
.badge-copy { font-size:12.5px; color:#9A948A; }
.home-hero-media { flex:1 1 380px; min-width:320px; max-width:520px; height:460px; }
.section-intro-wide { max-width:900px; margin:0 auto 64px; text-align:center; }
.section-intro { max-width:680px; margin:0 auto 64px; text-align:center; }
.section-intro-narrow { max-width:680px; margin:0 auto 56px; text-align:center; }
.section-group { margin-bottom:64px; }
.heading-row { display:flex; align-items:baseline; gap:18px; margin-bottom:10px; }
.heading-24 { font-size:24px; font-weight:800; color:var(--charcoal); }
.heading-divider { height:1px; flex:1; background:var(--line); }
.summary-ellipsis { font-size:15.5px; line-height:1.7; color:var(--grey-body); margin:0 0 28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid-auto-220 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; }
.home-why-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:stretch; }
.stack-col { display:flex; flex-direction:column; }
.home-why-title { font-size:32px; font-weight:800; color:#FFFFFF; margin:0 0 20px; line-height:1.25; }
.home-why-text { font-size:15.5px; line-height:1.75; color:#B7B1A6; margin:0 0 32px; }
.media-grow { flex:1; min-height:200px; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.dark-section-title { font-size:34px; font-weight:800; color:#FFFFFF; }
.stepper-line-fill { width:0; }

.contact-hero { padding:72px var(--pad-x) 64px; }
.contact-hero-title { font-size:42px; line-height:1.15; font-weight:800; color:#FFFFFF; margin:0 0 18px; }
.contact-hero-copy { font-size:17px; line-height:1.7; color:#D8D3CB; max-width:680px; }
.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:start; }
.contact-title { font-size:26px; font-weight:800; color:var(--charcoal); margin:0 0 10px; }
.contact-copy { font-size:14.5px; line-height:1.7; color:var(--grey-body); margin:0 0 32px; }
.form-stack { display:flex; flex-direction:column; gap:20px; }
.visually-hidden-trap { position:absolute; left:-9999px; }
.button-reset-inline { align-self:flex-start; border:none; cursor:pointer; }
.notice-success { background:#EFF6F1; border:1px solid #C3DFCB; padding:18px 20px; border-radius:2px; margin-bottom:26px; }
.notice-success-title { font-weight:700; color:#2E7D46; margin-bottom:4px; }
.notice-success-copy { font-size:14px; color:#4A6B54; }
.notice-error { background:#FBEAE9; border:1px solid #F0C4C1; padding:18px 20px; border-radius:2px; margin-bottom:26px; }
.notice-error-title { font-weight:700; color:#B3261E; }
.sidebar-stack { display:flex; flex-direction:column; gap:32px; }
.contact-card { background:var(--cream); border:1px solid var(--cream-border); border-radius:2px; padding:32px; }
.contact-list { display:flex; flex-direction:column; gap:18px; }
.contact-item { display:flex; gap:14px; align-items:flex-start; }
.contact-item-icon { flex-shrink:0; margin-top:2px; }
.contact-item-text { font-size:14.5px; }
.contact-item-link { font-size:14.5px; color:var(--charcoal-soft); }
.contact-item-link:hover { color:var(--charcoal-soft); }
.alert-panel { background:#141414; border-radius:2px; padding:28px 32px; display:flex; gap:18px; align-items:flex-start; }
.shrink-0 { flex-shrink:0; }
.alert-panel-title { font-size:15.5px; font-weight:700; color:#FFFFFF; margin-bottom:6px; }
.alert-panel-copy { font-size:13.5px; line-height:1.65; color:#B7B1A6; }

.sitemap-title { font-size:32px; font-weight:800; color:var(--charcoal); margin:0 0 30px; }
.sitemap-list { columns:2; gap:40px; font-size:15px; line-height:2.2; }

.maintenance-page { display:flex; justify-content:center; align-items:center; min-height:100vh; margin:0; padding:20px; text-align:center; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#FFFFFF; color:#333333; }
.maintenance-shell { max-width:600px; }
.maintenance-kicker { font-size:1.17em; font-weight:700; margin:0 0 1em; color:#333333; }
.maintenance-logo { max-width:200px; margin:0 auto 30px; }
.maintenance-title { font-size:48px; margin-bottom:20px; }
.maintenance-copy { font-size:18px; margin-bottom:40px; }
.maintenance-spinner { width:40px; height:40px; border:5px solid #CCCCCC; border-top-color:#3B82F6; border-radius:50%; animation:ppr-spin 1s linear infinite; margin:0 auto; }
.maintenance-note { margin-top:30px; }
@keyframes ppr-spin { to { transform:rotate(360deg); } }

/* ==========================================================================
   Mobile navigation
   ========================================================================== 
   The desktop nav was simply hidden below 1100px with nothing to replace it,
   so the menu was unreachable on every phone and tablet. Rather than
   maintaining a duplicate mobile menu in the markup, the same .site-nav is
   restyled into a slide-in drawer and each .mega-panel becomes an accordion —
   so any menu item added later appears on mobile automatically.
   ========================================================================== */

.nav-toggle { display:none; }
.nav-close { display:none; }
img.logo {
    max-width: 100px;
}
video.home_banner_video {
    position: absolute;
    inset: 0;
    z-index: 1;
    object-fit: cover;
    height: 100%;
}
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #0000009e;
    z-index: 2;
}
.border_r {
    border-radius: 15px;
}
.mega-panel-inner img {
    max-height: 265px;
    margin-left: auto;
}
.step-simple:hover .step-simple-num {
    color: #fff;
}
section.pb_0{padding-bottom: 0;}


@media (max-width: 1100px) {
    .mega-panel-inner > img{display: none;}
  body { min-width:0; }
  html, body { overflow-x:hidden; }
  .section-title-nowrap, .summary-ellipsis { white-space:normal; }
  .media-hero, .home-hero-media, .image-slot { min-width:0 !important; }
  .home-hero-media { max-width:100% !important; }
  .nav-toggle {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    flex:none; width:46px; height:46px; padding:0 11px;
    border:1px solid var(--cream-border);
    background:#FFFFFF; border-radius:2px; cursor:pointer; order:3;
  }
  .logo-link { min-width:0; flex:0 1 auto; }
  .nav-toggle-bar { display:block; height:2px; width:100%; background:var(--charcoal); transition:transform .25s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  .nav-backdrop { position:fixed; inset:0; background:rgba(20,20,20,.5); z-index:190; }
  .nav-backdrop[hidden] { display:none; }

  /* Drawer */
  .site-nav {
    display:block; position:fixed; top:0; right:0; z-index:200;
    width:min(370px, 86vw); height:100vh; height:100dvh;
    background:#FFFFFF; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:76px 0 40px; gap:0;
    transform:translateX(100%); transition:transform .28s ease;
    box-shadow:-12px 0 44px rgba(20,20,20,.22);
  }
  .site-nav.open { transform:translateX(0); }

  .nav-close {
    display:block; position:absolute; top:16px; right:16px;
    width:44px; height:44px; border:0; background:transparent;
    font-size:32px; line-height:1; color:var(--charcoal); cursor:pointer;
  }

  .nav-item { display:block; padding:0; border-bottom:1px solid var(--line); }
  .nav-link, .nav-plain-link {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px; min-height:54px; font-size:15.5px; width:100%;
  }
  .nav-arrow { transition:transform .25s ease; font-size:12px; }
  .nav-item.open .nav-arrow { transform:rotate(180deg); }
  /* Hover must not drive the panel on touch — tapping toggles .open instead. */
  .nav-item:hover .mega-panel { display:none; }
  .mega-panel {
    position:static; display:none; padding:4px 0 12px; margin:0;
    background:var(--cream); box-shadow:none; border-top:0; border-bottom:0;
  }
  .mega-panel::before { display:none; }
  .nav-item.open .mega-panel { display:block; }
  .mega-panel-inner { display:block; max-width:none; }
  .mega-panel .image-slot, .mega-panel .mega-label { display:none; }
  .mega-grid { display:block; }
  .mega-link { padding:13px 22px 13px 34px; min-height:46px; font-size:14.5px; }
  .mega-link:hover { padding-left:34px; }

  /* Header row: logo left, hamburger right, quote button below on phones. */
  .site-header { padding:14px var(--pad-x); gap:12px; flex-wrap:nowrap; }
  .btn-quote { order:2; padding:11px 18px; font-size:13px; animation:none; }

  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gutter:20px; }

  /* Topbar: the email address is too long for a phone; keep the phone number. */
  .topbar { padding:8px var(--pad-x); gap:8px; }
  .topbar-left .topbar-link:first-child { display:none; }
  .topbar-link {
    font-size: 15px;
    color: #fff;
}
.split-hero {
    padding: 50px var(--pad-x);
}
  .site-header { padding:10px var(--pad-x); }
  .logo-mark svg { width:38px; height:38px; }
  .logo-name { font-size:16px; }
  .logo-sub { font-size:9px; letter-spacing:.28em; }
  .site-header .btn-quote { display:none; }
.dark-cta .btn-outline-dark {
    display: none;
}
  .footer-col a { padding:11px 0; margin-bottom:0; }
  .topbar-link { padding:8px 0; }
  .svc-cta-meta a, .footer-contact a { display:inline-block; padding:9px 0; }

  /* Sections breathe less on a phone. */
  .section { padding:52px var(--pad-x); }
  .section-tight { padding:38px var(--pad-x); }
  .breadcrumb { padding:12px var(--pad-x); font-size:12px; }
  .site-footer { padding:44px var(--pad-x) 26px; }
h1 {
    font-size: 26px !important;  margin: 0 0 15px !important;
    line-height: 1.4 !important;
}
  h2 { font-size:clamp(23px, 6vw, 30px) !important; line-height:1.25 !important; }
  h3 { font-size:clamp(19px, 5vw, 24px) !important; }

  /* Every multi-column grid collapses to one column. These are inline styles
     on the pages, so !important is the only thing that reaches them. */
  .svc-grid-3,
  .content-grid-2,
  .process-grid,
  .service-card-grid,
  .service-link-grid,
  .region-grid,
  .grid-auto-220,
  .home-why-grid,
  .testimonial-grid,
  .value-grid,
  .stat-grid,
  .team-grid,
  .contact-grid { grid-template-columns:1fr !important; }
  .form-row-2 { grid-template-columns:1fr !important; }
  .footer-grid { grid-template-columns:1fr !important; gap:26px !important; }
  .mega-grid { grid-template-columns:1fr !important; }

  /* Flex rows that were side-by-side. */
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .why-row { flex-direction:row; gap:14px; }

  /* Inline flex rows (button pairs, stat rows) are allowed to wrap. flex-wrap
     only kicks in when the content genuinely overflows, so icon+label pairs
     that still fit are left alone. */
  .split-hero-inner,
  .actions-wrap,
  .actions-center,
  .home-hero-actions,
  .home-badges,
  .cta-band,
  .cta-band-content { flex-wrap:wrap !important; }
  .stepper-panel { flex-direction:column; align-items:flex-start; gap:14px; padding:26px 22px; }
  .stepper-label { font-size:8px; }
  .faq-q { padding:18px 0; }

  /* 16px prevents iOS Safari zooming the page when a field is focused. */
 .form-field input, .form-field textarea {
    font-size: 16px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}
  .split-hero-inner {
    grid-template-columns: 1fr;
}
.eyebrow-text {
    font-size: 10px;
}
.home-hero-text {
    font-size: 15px; margin: 0 0 25px;
}
.region-grid {
    gap: 8px;
}
.region-card {
    padding: 15px 20px;
}
.stepper-circle {
    width: 30px;
    height: 30px;
}
.stepper-line-fill, .stepper-line-bg {
    top: 14px;
}
.dark-cta-title-large, .dark-cta-title {
    font-size: 30px;
}
img.logo {
    max-width: 90px;
}
.contact-grid {
    display: inline-block;
    max-width: 100%;
}
.split-hero-inner.hero_content {
    text-align: left;
}
.hero_content .eyebrow, .hero_content .home-hero-actions, .home-badges {
    justify-content: flex-start;
}
.split-hero .btn, .home-hero .btn, .area-hero .btn{
    padding: 16px;
    font-size: 14px;
}
.home-hero-actions {
    gap: 12px;
    margin-bottom: 25px;
}
.home-badges {
    gap: 15px 2px;
    justify-content: space-between;
}
.hero_content .badge-row {
    gap: 5px;
}
.home-hero {
    padding: 50px 15px;
}
.hero_content .badge-title {
    font-size: 13px;
}
}

/* ==========================================================================
   Tablets — two columns rather than one
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1200px) {
    .ppr-hero-section {
    padding: 80px 20px 88px;
}
  .svc-grid-3 { grid-template-columns:repeat(2, 1fr) !important; }
  .region-grid, .process-grid { grid-template-columns:repeat(2, 1fr) !important; }
  h1 { font-size:clamp(34px, 5vw, 35px) !important; }
}