/* ==========================================================================
   VB Scaffolding Ltd — Design System
   ========================================================================== */

:root{
  /* Brand colour tokens */
  --navy-950:#0d1117;
  --navy-900:#14181d;
  --navy-800:#1c222a;
  --navy-700:#2a323d;
  --navy-600:#3d4753;
  --grey-500:#5b6470;
  --grey-300:#9aa3ad;
  --grey-100:#e7e9ec;
  --off-white:#f5f6f7;
  --white:#ffffff;
  --red-700:#a80c1e;
  --red-600:#b50e21;
  --red-500:#d71028;
  --red-400:#e14456;
  --red-050:#fdeaec;
  --success:#1f8a4c;

  /* Semantic tokens */
  --bg:var(--white);
  --bg-alt:var(--off-white);
  --bg-dark:var(--navy-900);
  --text:var(--navy-900);
  --text-muted:var(--grey-500);
  --text-on-dark:var(--white);
  --text-on-dark-muted:var(--grey-300);
  --accent:var(--red-500);
  --accent-hover:var(--red-600);
  --border:var(--grey-100);

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --shadow-sm:0 1px 2px rgba(13,17,23,.06), 0 1px 1px rgba(13,17,23,.04);
  --shadow-md:0 8px 24px rgba(13,17,23,.10);
  --shadow-lg:0 20px 48px rgba(13,17,23,.16);

  --container:1200px;
  --font-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(215,16,40,.15);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--text);
}
h1{font-size:clamp(2.4rem,5vw,4rem);}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem);}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem);}
p{margin:0 0 1em;color:var(--text-muted);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.section--alt{background:var(--bg-alt);}
.section--dark{background:var(--bg-dark);color:var(--text-on-dark);}
.section--dark p{color:var(--text-on-dark-muted);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--text-on-dark);}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.8rem;color:var(--accent);margin-bottom:14px;
}
.eyebrow::before{content:'';width:28px;height:2px;background:var(--accent);display:inline-block;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:1rem;padding:15px 30px;border-radius:var(--radius-sm);
  border:2px solid transparent;cursor:pointer;transition:.15s ease;
}
.btn--primary{background:var(--accent);color:var(--white);}
.btn--primary:hover{background:var(--accent-hover);}
.btn--outline{border-color:currentColor;background:transparent;color:var(--text);}
.btn--outline:hover{background:var(--text);color:var(--white);}
.section--dark .btn--outline{color:var(--white);}
.section--dark .btn--outline:hover{background:var(--white);color:var(--navy-900);}
.btn--ghost-light{border-color:rgba(255,255,255,.4);color:var(--white);}
.btn--ghost-light:hover{background:var(--white);color:var(--navy-900);border-color:var(--white);}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(13,17,23,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;max-width:1340px;gap:20px;
}
.logo{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:1.45rem;letter-spacing:.02em;color:var(--white);display:flex;align-items:center;gap:10px;
  flex:none;
}
.logo__mark{
  width:38px;height:38px;border-radius:8px;background:var(--white);
  display:flex;align-items:center;justify-content:center;padding:4px;flex:none;
}
.logo__mark svg{width:100%;height:100%;display:block;}
.logo span{color:var(--accent);}
.main-nav{display:flex;align-items:center;gap:6px;flex:none;}
.main-nav a{
  color:var(--grey-300);font-weight:600;font-size:.92rem;text-transform:uppercase;
  letter-spacing:.03em;padding:10px 13px;border-radius:var(--radius-sm);transition:.15s;
  white-space:nowrap;flex:none;
}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--white);background:rgba(255,255,255,.06);}

/* Services dropdown */
.nav-item{position:relative;}
.nav-item__trigger{display:flex;align-items:center;gap:6px;}
.nav-item__trigger .caret{transition:transform .15s ease;flex:none;}
.nav-item:hover .nav-item__trigger .caret,
.nav-item:focus-within .nav-item__trigger .caret{transform:rotate(180deg);}
.dropdown-menu{
  position:absolute;top:100%;left:0;margin-top:6px;min-width:250px;
  background:var(--navy-900);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);
  padding:8px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:50;
}
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-menu a{
  display:block;padding:11px 14px;border-radius:6px;font-size:.86rem;
  text-transform:none;letter-spacing:.01em;font-weight:600;
}
.dropdown-menu a:hover,.dropdown-menu a:focus{background:rgba(255,255,255,.07);color:var(--white);}
.header-cta{display:flex;align-items:center;gap:18px;flex:none;}
.header-phone{
  color:var(--white);font-weight:700;font-family:var(--font-display);
  font-size:1.05rem;letter-spacing:.02em;display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.header-phone svg{flex:none;color:var(--accent);}
.nav-toggle{
  display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);
  color:var(--white);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;
}

/* Hero */
.hero{
  position:relative;color:var(--white);
  background:
    linear-gradient(120deg, rgba(13,17,23,.92) 10%, rgba(13,17,23,.72) 55%, rgba(13,17,23,.55) 100%),
    repeating-linear-gradient(135deg, #1c222a 0 2px, #14181d 2px 40px);
  overflow:hidden;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(215,16,40,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215,16,40,.14) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.5) 40%, transparent);
  pointer-events:none;
  z-index:1;
}
/* Photo-backed hero: a real jobsite photo behind a dark overlay (::before) for
   text contrast, with the same red dot-grid accent (::after) on top.
   background-attachment stays the default "scroll" (never "fixed") since
   fixed backgrounds are unreliable and janky on iOS Safari. */
.hero--photo{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--navy-950);
}
.hero--photo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(13,17,23,.90) 15%, rgba(13,17,23,.80) 55%, rgba(13,17,23,.65) 100%);
}
.hero h1,.hero h2,.hero h3,.hero h4{color:var(--white);}
/* .hero__inner carries the .container class too, but since it's a plain
   class selector defined after .container in the cascade, its own padding
   shorthand wins outright — so it must set its OWN left/right gutter
   (matching .container's) rather than relying on inheriting it, or the
   hero content sits flush against the viewport edge. */
.hero__inner{position:relative;z-index:2;padding:120px 24px 96px;max-width:760px;}
.hero__inner--wide{max-width:1000px;}
.hero--page{padding:0;}
.hero--page .hero__inner{padding:64px 24px 56px;max-width:820px;}
.hero p.lead{font-size:1.15rem;color:var(--grey-300);max-width:620px;}
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--grey-300);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px;
}
.breadcrumb a{color:var(--grey-300);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span[aria-hidden]{color:var(--grey-500);}

.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.1);
  border-top:1px solid rgba(255,255,255,.1);
  position:relative;z-index:2;
}
.stat-strip__item{
  background:var(--navy-900);padding:28px 20px;text-align:center;
}
.stat-strip__num{
  font-family:var(--font-display);font-weight:800;font-size:2.1rem;color:var(--accent);display:block;
}
.stat-strip__label{
  font-size:.8rem;color:var(--grey-300);text-transform:uppercase;letter-spacing:.06em;
}

/* Trust badges */
.trust-row{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;margin-top:28px;}
.trust-row--fit{flex-wrap:nowrap;}
.trust-badge{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.88rem;color:var(--grey-300);white-space:nowrap;}
.trust-badge svg{color:var(--accent);flex:none;width:19px;height:19px;}
.section:not(.section--dark) .trust-badge{color:var(--text-muted);}
@media (max-width:1180px){
  .trust-row--fit{flex-wrap:wrap;}
}

/* Cards */
.grid{display:grid;gap:28px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:32px 28px;box-shadow:var(--shadow-sm);transition:.2s ease;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.card__icon{
  width:52px;height:52px;border-radius:var(--radius-sm);background:var(--red-050);
  display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:18px;
}
.card--dark{background:var(--navy-800);border-color:var(--navy-700);}
.card--dark h3{color:var(--white);}
.card--dark p{color:var(--grey-300);}
.card a.card-link{
  display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent);
  text-transform:uppercase;font-size:.82rem;letter-spacing:.04em;margin-top:6px;
}

.icon-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.icon-row__icon{
  width:44px;height:44px;flex:none;border-radius:var(--radius-sm);
  background:var(--navy-900);color:var(--accent);display:flex;align-items:center;justify-content:center;
}
.icon-row h4{margin-bottom:4px;font-size:1.05rem;text-transform:none;letter-spacing:0;}
.icon-row p{margin:0;font-size:.95rem;}

/* Image placeholders (swap for real project photography) */
.ph{
  position:relative;border-radius:var(--radius-md);overflow:hidden;
  background:
    repeating-linear-gradient(45deg, var(--navy-800) 0 2px, var(--navy-900) 2px 22px);
  display:flex;align-items:center;justify-content:center;color:var(--grey-300);
  min-height:220px;
}
.ph::before{content:'';position:absolute;inset:0;border:2px dashed rgba(255,107,26,.35);border-radius:var(--radius-md);}
.ph__label{
  position:relative;background:rgba(13,17,23,.75);padding:8px 16px;border-radius:999px;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--red-400);
  text-align:center;
}
.ph--tall{min-height:360px;}
.ph--square{aspect-ratio:1/1;min-height:0;}
.ph--wide{aspect-ratio:16/9;min-height:0;}

/* Real project photography */
.photo{border-radius:var(--radius-md);overflow:hidden;background:var(--navy-800);}
.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.photo--tall{min-height:360px;}
.photo--tall img{height:100%;}
.photo--wide{aspect-ratio:16/9;}
.photo-caption{font-size:.78rem;color:var(--text-muted);margin-top:8px;}

/* Two-column feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split--rev{direction:rtl;}
.split--rev>*{direction:ltr;}

/* Process steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.step{position:relative;padding-top:8px;}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:var(--red-050);
  -webkit-text-stroke:1.5px var(--accent);display:block;margin-bottom:10px;
}
.section--dark .step::before{color:var(--navy-800);-webkit-text-stroke:1.5px var(--accent);}

/* Location / service chip list */
.chip-list{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;
  padding:8px 16px;font-size:.88rem;font-weight:600;color:var(--text);
}
.section--dark .chip{background:var(--navy-800);border-color:var(--navy-700);color:var(--grey-300);}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);padding:22px 0;}
.faq-item summary{
  cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';font-size:1.6rem;color:var(--accent);font-weight:400;flex:none;
}
.faq-item[open] summary::after{content:'\2212';}
.faq-item p{margin-top:14px;}

/* Testimonial */
.testimonial{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:30px;box-shadow:var(--shadow-sm);
}
.testimonial__stars{color:var(--accent);letter-spacing:2px;margin-bottom:12px;font-size:1.1rem;}
.testimonial__quote{font-size:1.02rem;color:var(--text);font-style:italic;}
.testimonial__meta{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.testimonial__author{font-weight:700;font-family:var(--font-display);text-transform:uppercase;font-size:.85rem;color:var(--text-muted);}
.testimonial__google{
  display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--text-muted);flex:none;
}
.testimonial__google svg{flex:none;}
.testimonial__google:hover{color:var(--accent);}
.google-rating{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;}

/* Contact / form */
.info-card{
  background:var(--navy-900);color:var(--white);border-radius:var(--radius-lg);padding:40px;
}
.info-card p{color:var(--grey-300);}
.info-list{display:flex;flex-direction:column;gap:20px;margin-top:24px;}
.info-list__item{display:flex;gap:14px;align-items:flex-start;}
.info-list__item svg{color:var(--accent);flex:none;margin-top:3px;}
.info-list__item a{font-weight:700;color:var(--white);}
.info-list__item a:hover{color:var(--accent);}

.form-card{
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text);}
.field input,.field select,.field textarea{
  border:1px solid var(--grey-100);border-radius:var(--radius-sm);padding:13px 14px;
  font-family:var(--font-body);font-size:16px;background:var(--white);color:var(--text);
  width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.field--full{grid-column:1/-1;}
.form-note{font-size:.82rem;color:var(--text-muted);margin-top:10px;}

/* Map — a live Google Maps embed on the Contact page (.map-embed--live);
   the plain .map-embed/.map-embed--photo variants are kept for any future
   spot that still needs a placeholder-style box. */
.map-embed{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);
  min-height:340px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);text-align:center;flex-direction:column;gap:10px;padding:24px;
}
.map-embed--photo{background-size:cover;background-position:center;color:var(--white);}
.map-embed--photo::before{content:'';position:absolute;inset:0;background:rgba(13,17,23,.72);}
.map-embed__note{position:relative;z-index:1;}
.map-embed--photo .form-note{color:var(--grey-300);}
.map-embed--live{display:block;height:340px;padding:0;}
.map-embed--live iframe{width:100%;height:100%;}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--navy-900),var(--navy-800));
  color:var(--white);border-radius:var(--radius-lg);padding:56px;
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
}
.cta-band h2{margin-bottom:6px;}
.cta-band p{color:var(--grey-300);margin:0;}

/* Footer */
.site-footer{background:var(--navy-950);color:var(--grey-300);padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-grid h4{color:var(--white);font-size:.95rem;letter-spacing:.06em;margin-bottom:18px;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid a{color:var(--grey-300);font-size:.92rem;}
.footer-grid a:hover{color:var(--accent);}
.footer-logo{margin-bottom:14px;}
.footer-social{display:flex;gap:12px;margin-top:18px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .15s ease;
}
.footer-social a svg{width:100%;height:100%;display:block;}
.footer-social a:hover{transform:translateY(-2px);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--grey-500);
}
.footer-bottom a{color:var(--grey-500);}
.footer-bottom a:hover{color:var(--accent);}

/* Sticky mobile call bar */
.mobile-call-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:var(--accent);padding:14px 20px;
}
.mobile-call-bar a{
  display:flex;align-items:center;justify-content:center;gap:10px;color:var(--white);
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;
}

/* Floating WhatsApp button — sits bottom-right on every page. Bumped up
   above the sticky mobile call bar (z-index:200, ~64px tall) on small
   screens so the two never overlap. On phones it also starts hidden and
   fades in once the visitor scrolls a little way down (toggled via
   .is-visible in main.js) — on tall phones the hero + stat strip can fill
   almost the entire first screen, and a button fixed at the bottom would
   otherwise land right on top of the stat-strip text before any scrolling
   happens. Desktop/tablet keep it visible immediately since the hero is
   proportionally shorter there and this hasn't been an issue. */
.whatsapp-float{
  position:fixed;right:20px;bottom:24px;z-index:210;
  width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  transition:transform .15s ease,box-shadow .15s ease,opacity .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.38);}
.whatsapp-float svg{width:30px;height:30px;flex:none;}
@media (max-width:1180px){
  .whatsapp-float{right:16px;bottom:80px;width:52px;height:52px;}
  .whatsapp-float svg{width:27px;height:27px;}
  .whatsapp-float{opacity:0;pointer-events:none;}
  .whatsapp-float.is-visible{opacity:1;pointer-events:auto;}
}

/* Utilities */
.text-center{text-align:center;}
.max-w{max-width:680px;}
.max-w-center{max-width:680px;margin-left:auto;margin-right:auto;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.mb-sm{margin-bottom:16px;}
.mb-lg{margin-bottom:48px;}
.badge-list{display:flex;gap:12px;flex-wrap:wrap;}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:1000;
}
.skip-link:focus{left:10px;top:10px;}

/* Responsive */
/* Nav switches to the hamburger/mobile drawer earlier (1180px) than the
   general content breakpoint (980px) below, so the desktop nav is never
   caught in a squeezed in-between state on laptop-width screens. */
@media (max-width:1180px){
  .main-nav,.header-cta .btn,.header-phone{display:none;}
  .nav-toggle{display:flex;}
  .site-header.is-open .main-nav{
    display:flex;position:absolute;top:100%;left:0;right:0;background:var(--navy-900);
    flex-direction:column;padding:12px;border-top:1px solid rgba(255,255,255,.08);
  }
  .site-header.is-open .main-nav a{padding:14px;text-align:center;}
  .nav-item{width:100%;}
  .nav-item__trigger{justify-content:center;}
  .dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:rgba(255,255,255,.03);margin:4px 0;
  }
  .dropdown-menu a{text-align:center;color:rgba(255,255,255,.78);}
  .dropdown-menu a:hover,.dropdown-menu a:focus{color:var(--white);}
  .nav-item__trigger .caret{display:none;}
  .mobile-call-bar{display:block;}
  body{padding-bottom:64px;}
}
@media (max-width:980px){
  .stat-strip{grid-template-columns:repeat(2,1fr);}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .grid--2{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;gap:32px;}
  .split--rev{direction:ltr;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cta-band{padding:40px 28px;}
  .hero__inner{padding:90px 24px 64px;}
  .hero--page .hero__inner{padding:56px 24px 44px;}
  .photo--tall{min-height:300px;}
  h1{line-height:1.12;}
}
@media (max-width:640px){
  .section{padding:48px 0;}
  .grid--4,.grid--3{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .cta-band{flex-direction:column;align-items:flex-start;padding:32px 24px;}
  .hero__inner{padding:44px 20px 32px;}
  .hero--page .hero__inner{padding:36px 20px 28px;}
  /* Photos vary in brightness — darken the overlay a touch more on small
     screens so white hero text stays reliably readable at any crop/position. */
  .hero--photo::before{background:linear-gradient(160deg, rgba(13,17,23,.92) 20%, rgba(13,17,23,.86) 60%, rgba(13,17,23,.80) 100%);}
  /* Headline runs long on narrow screens — scale it down and tighten the
     line-height so it doesn't eat the whole first screen before any
     content is visible. */
  h1{font-size:clamp(1.85rem,8vw,2.4rem);line-height:1.14;}
  .eyebrow{font-size:.72rem;letter-spacing:.1em;margin-bottom:10px;}
  .hero p.lead{font-size:1rem;line-height:1.55;margin-bottom:.85em;}
  .btn-row{gap:12px;}
  .btn{padding:14px 24px;font-size:.92rem;}
  .trust-row{margin-top:18px;gap:12px 22px;}
  .stat-strip__item{padding:20px 14px;}
  .stat-strip__num{font-size:1.7rem;}
  .photo--tall{min-height:220px;}
  .info-card,.form-card{padding:28px 22px;}
  /* Full-width, stacked CTAs are easier to hit accurately with a thumb. */
  .btn-row .btn{flex:1 1 100%;}
  .footer-social a{width:42px;height:42px;}
  /* .site-header__inner also carries the .container class, which sets
     padding:0 24px — this rule must restate horizontal padding explicitly
     (not just "12px 0") or its shorthand zeroes that out, leaving the logo
     and hamburger icon flush against the screen edge on phones. */
  .site-header__inner{padding:14px 20px;}
}