/* =========================================================
   Cybertron Paving Demo — Cybertron Softech
   Static demo stylesheet (no build process, no frameworks)
   Typography scale matches the roofing demo baseline.
   ========================================================= */

html { font-size: 16px; scroll-behavior: smooth; }

:root{
  --charcoal:#1C1D1F;
  --asphalt:#101113;
  --concrete:#6B6E73;
  --concrete-light:#EDEDEE;
  --yellow:#F2B705;
  --yellow-dark:#C99604;
  --orange:#E8622C;
  --white:#FFFFFF;
  --text-muted:#5B5F63;
  --border:#E2E3E5;
  --radius:12px;
  --radius-lg:20px;
  --shadow-sm:0 2px 12px rgba(16,17,19,.10);
  --shadow-md:0 14px 34px rgba(16,17,19,.18);
  --shadow-lg:0 30px 70px rgba(16,17,19,.28);
  --maxw:1200px;
  --font-display:'Poppins','Segoe UI',Arial,sans-serif;
  --font-body:'Inter','Segoe UI',Arial,sans-serif;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-size:16px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;margin:0 0 .5em;font-weight:700;color:var(--charcoal);}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.bg-grey{background:var(--concrete-light);}
.bg-charcoal{background:var(--charcoal);color:#fff;}
.bg-charcoal h2, .bg-charcoal h3{color:#fff;}
.eyebrow{
  display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--yellow-dark);background:rgba(242,183,5,.14);
  padding:6px 16px;border-radius:999px;margin-bottom:16px;
}
.section-head{max-width:720px;margin:0 auto 52px;text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.7rem);}
.section-head p{color:var(--text-muted);font-size:1.05rem;}
.demo-note{font-size:.8rem;color:var(--text-muted);font-style:italic;margin-top:6px;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:8px;font-weight:700;font-size:.98rem;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:#cf5220;box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-yellow{background:var(--yellow);color:#241c02;box-shadow:var(--shadow-sm);}
.btn-yellow:hover{background:var(--yellow-dark);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-outline-dark{background:transparent;border-color:var(--charcoal);color:var(--charcoal);}
.btn-outline-dark:hover{background:var(--charcoal);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:11px 18px;font-size:.98rem;}

/* Trust bar */
.trust-bar{background:var(--asphalt);color:#d8dadc;padding:9px 0;text-align:center;font-size:.9rem;font-weight:600;letter-spacing:.01em;}
.trust-bar .container{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}

/* Header */
.site-header{position:sticky;top:0;z-index:90;background:var(--white);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--maxw);margin:0 auto;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--charcoal);}
.brand .mark{
  width:40px;height:40px;border-radius:9px;background:var(--charcoal);
  display:flex;align-items:center;justify-content:center;color:var(--yellow);font-weight:800;font-size:1.1rem;flex-shrink:0;
}
.main-nav{display:flex;align-items:center;gap:30px;}
.main-nav a{font-weight:600;font-size:.96rem;color:var(--charcoal);opacity:.82;transition:opacity .2s;}
.main-nav a:hover{opacity:1;}
.header-actions{display:flex;align-items:center;gap:14px;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--charcoal);}
.menu-toggle svg{width:28px;height:28px;}

@media (max-width:980px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:80%;max-width:320px;background:var(--white);
    flex-direction:column;align-items:flex-start;padding:100px 30px 30px;gap:24px;
    box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .3s ease;z-index:95;
  }
  .main-nav.open{transform:translateX(0);}
  .menu-toggle{display:block;position:relative;z-index:96;}
  .header-actions .btn-primary{padding:10px 16px;font-size:.9rem;}
}
.nav-backdrop{position:fixed;inset:0;background:rgba(16,17,19,.6);opacity:0;pointer-events:none;transition:opacity .3s;z-index:65;}
.nav-backdrop.open{opacity:1;pointer-events:auto;}

/* Hero */
.hero{background:linear-gradient(155deg,var(--charcoal) 0%,var(--asphalt) 100%);color:#fff;position:relative;overflow:hidden;padding:80px 0 90px;}
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:1;}
.hero-blob.b1{width:460px;height:460px;background:var(--orange);opacity:.24;top:-160px;right:-100px;}
.hero-blob.b2{width:340px;height:340px;background:var(--yellow);opacity:.14;bottom:-160px;left:-80px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.hero .eyebrow{background:rgba(242,183,5,.16);color:var(--yellow);}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.5rem);margin-bottom:20px;}
.hero .lede{opacity:.86;max-width:540px;margin-bottom:28px;font-size:1.06rem;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.hero-trust{display:flex;flex-wrap:wrap;gap:16px 22px;}
.hero-trust span{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;opacity:.92;}
.hero-trust svg{width:18px;height:18px;color:var(--yellow);flex-shrink:0;}
.hero-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.hero-visual img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.2;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;} .hero{padding:56px 0 56px;}}

/* Stats strip */
.trust-strip{background:var(--concrete-light);padding:28px 0;border-bottom:1px solid var(--border);}
.trust-strip .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;}
.trust-item{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem;color:var(--charcoal);}
.trust-item svg{width:19px;height:19px;color:var(--orange);flex-shrink:0;}

/* Grids */
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* Services */
.svc-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.svc-icon{width:52px;height:52px;border-radius:14px;background:rgba(232,98,44,.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--orange);}
.svc-icon svg{width:26px;height:26px;}
.svc-card h3{font-size:1.12rem;}
.svc-card p{color:var(--text-muted);font-size:.96rem;flex-grow:1;}
.svc-card .learn-more{color:var(--orange);font-weight:700;font-size:.94rem;margin-top:10px;}

/* Project cards */
.project-card{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;position:relative;background:#fff;border:1px solid var(--border);}
.project-card img{aspect-ratio:1/.8;object-fit:cover;transition:transform .35s;}
.project-card:hover img{transform:scale(1.06);}
.project-body{padding:18px 20px;}
.project-type{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--orange);}
.project-body h3{font-size:1.04rem;margin:6px 0 4px;}
.project-body p{font-size:.94rem;color:var(--text-muted);margin-bottom:0;}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,11,12,.94);display:none;align-items:center;justify-content:center;z-index:200;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(900px,92vw);max-height:86vh;border-radius:12px;}
.lightbox-close{position:absolute;top:24px;right:28px;color:#fff;font-size:2rem;background:none;border:none;cursor:pointer;line-height:1;}

/* Why choose / diff cards */
.diff-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 30px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;}
.diff-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.diff-card .tag{font-family:var(--font-display);font-weight:800;color:var(--yellow-dark);font-size:.9rem;letter-spacing:.06em;margin-bottom:10px;}
.diff-card h3{font-size:1.28rem;}
.diff-card p{color:var(--text-muted);font-size:.98rem;margin-bottom:0;}

/* Process timeline */
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.process-step{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 26px;box-shadow:var(--shadow-sm);position:relative;}
.process-step .timeframe{
  display:inline-block;background:var(--charcoal);color:var(--yellow);font-weight:700;font-size:.82rem;
  padding:5px 14px;border-radius:999px;margin-bottom:18px;
}
.process-step .step-badge{
  width:56px;height:56px;border-radius:50%;border:2px solid var(--orange);color:var(--orange);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem;margin-bottom:16px;background:#fff;
}
.process-step h3{font-size:1.08rem;}
.process-step p{color:var(--text-muted);font-size:.96rem;}
@media (max-width:900px){.process-steps{grid-template-columns:1fr;}}

/* Prep-first checklist section */
.prep-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;}
.prep-grid p{color:var(--text-muted);font-size:1rem;}
.checklist{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm);}
.checklist li{display:flex;align-items:flex-start;gap:12px;font-size:.98rem;font-weight:600;color:var(--charcoal);margin-bottom:16px;}
.checklist li:last-child{margin-bottom:0;}
.checklist li svg{width:22px;height:22px;color:var(--orange);flex-shrink:0;margin-top:1px;}
@media (max-width:900px){.prep-grid{grid-template-columns:1fr;}}


/* Estimate highlight section */
.highlight-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:28px;text-align:center;}
.highlight-card h3{color:#fff;font-size:1.06rem;}
.highlight-card p{color:rgba(255,255,255,.72);font-size:.94rem;margin-bottom:0;}

/* Quick request form */
.form-card{background:#fff;border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-md);border:1px solid var(--border);}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--charcoal);}
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border-radius:8px;border:1.5px solid var(--border);
  font-family:inherit;font-size:.96rem;background:#fff;color:var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--orange);}
.form-note{font-size:.9rem;color:var(--text-muted);margin-top:14px;text-align:center;}


/* FAQ */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:#fff;}
.faq-question{
  width:100%;text-align:left;background:none;border:none;padding:20px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;font-weight:700;font-size:1.02rem;color:var(--charcoal);cursor:pointer;
}
.faq-question .plus{width:22px;height:22px;flex-shrink:0;position:relative;}
.faq-question .plus::before,.faq-question .plus::after{content:'';position:absolute;background:var(--orange);border-radius:2px;transition:transform .25s;}
.faq-question .plus::before{width:100%;height:3px;top:50%;left:0;transform:translateY(-50%);}
.faq-question .plus::after{height:100%;width:3px;left:50%;top:0;transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-answer-inner{padding:0 24px 20px;color:var(--text-muted);font-size:.96rem;}
.faq-item.open .faq-answer{max-height:320px;}

/* Final CTA */
.final-cta{background:linear-gradient(155deg,var(--charcoal) 0%,var(--asphalt) 100%);color:#fff;text-align:center;}
.final-cta h2{color:#fff;}
.final-cta p{opacity:.86;max-width:600px;margin:0 auto 32px;font-size:1.02rem;}
.final-cta .hero-ctas{justify-content:center;}

/* Footer */
.site-footer{background:var(--asphalt);color:#b9bbbe;padding:64px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px;margin-bottom:34px;}
.footer-grid h4{color:#fff;font-size:.98rem;margin-bottom:16px;}
.footer-grid p{font-size:.94rem;color:#8d9094;}
.footer-grid ul li{margin-bottom:11px;font-size:.94rem;}
.footer-grid ul li a:hover{color:#fff;}
.footer-brand .brand{color:#fff;margin-bottom:14px;}
.footer-brand .brand .mark{background:var(--yellow);color:#241c02;}
.footer-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;}
.footer-badge{background:rgba(255,255,255,.08);padding:8px 16px;border-radius:999px;font-size:.88rem;font-weight:700;color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9rem;color:#797c80;
}
.footer-bottom a{font-weight:700;color:#fff;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.text-center{text-align:center;}

/* =========================================================
   Cybertron demo — common pass additions
   Appended block. No existing rule above was modified.
   Everything here is prefixed `cs-` (except the shared
   .social-links helper) so it cannot collide with this
   site's own theme classes, and it is colour-neutral: it
   inherits currentColor and this site's own CSS variables,
   so it picks up each site's palette automatically.
   ========================================================= */

/* --- Contact layout --------------------------------------
   Info card and form sit in one row and stretch to the same
   height, so the shorter column can never leave a blank gap
   beneath it. minmax(0,..) lets both columns shrink below
   their content width, which is what prevents a long email
   or select box from forcing horizontal overflow. */
.cs-contact-grid{
  /* Some sites already wrap their contact area in a grid; span every column
     so this row is never squeezed into one cell of the parent grid.
     Harmless when the parent is not a grid. */
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:24px;align-items:stretch;
}
.cs-contact-grid > *{min-width:0;height:100%;}
/* Pin the two columns explicitly. One site's own stylesheet forces a
   full-width grid-column on form elements, which pushed the form onto its
   own row and unbalanced the pair; explicit placement overrides that. */
.cs-contact-grid > .cs-info-card,
.cs-contact-grid > .contact-card,
.cs-contact-grid > .feat-card:not(form){grid-column:1;grid-row:1;}
.cs-contact-grid > form{grid-column:2;grid-row:1;margin:0;height:100%;}

.cs-info-card{
  background:var(--white,#fff);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:30px 26px;
  display:flex;flex-direction:column;
  min-width:0;
}
.cs-info-card h3{margin-bottom:20px;}
/* The rows grow to absorb the height the form column sets and
   spread evenly, instead of bunching at the top and leaving a
   hollow band above the button. */
.cs-info-list{
  list-style:none;margin:0;padding:0;
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;
  gap:14px;
}
.cs-info-list li{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.cs-info-list svg{
  width:19px;height:19px;flex-shrink:0;margin-top:3px;opacity:.75;
}
.cs-info-list .cs-lbl{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:2px;
}
.cs-info-list .cs-val{
  font-size:.95rem;line-height:1.5;color:var(--text-muted);
  min-width:0;overflow-wrap:anywhere;
}
.cs-info-foot{margin-top:auto;padding-top:22px;}

@media (max-width:900px){
  .cs-contact-grid{grid-template-columns:1fr;gap:20px;}
  .cs-contact-grid > .cs-info-card,
  .cs-contact-grid > .contact-card,
  .cs-contact-grid > .feat-card:not(form){grid-column:1;grid-row:auto;}
  .cs-contact-grid > form{grid-column:1;grid-row:auto;}
  /* Stacked: the card is sized by its own content again, so the
     rows should sit together rather than stretch apart. */
  .cs-info-list{flex:0 0 auto;justify-content:flex-start;}
  .cs-contact-grid > form{height:auto;}
}

/* --- Image slot safety -----------------------------------
   Keeps every existing image slot from stretching once real
   photos replace the SVG placeholders later. Only sets
   object-fit, which has no effect on how the SVGs render now. */
img{max-width:100%;}
.cs-media-fit{display:block;width:100%;height:100%;object-fit:cover;}

/* --- Mobile header fit ------------------------------------
   PRE-EXISTING BUG (present before this pass): below ~560px the
   brand + call link + CTA + hamburger were wider than the
   viewport. That pushed the hamburger past the right edge, so
   the page scrolled sideways and the mobile menu button could
   end up unreachable. Nothing here changes the header's design
   or markup — it only lets the row shrink to fit. */
@media (max-width:600px){
  .header-inner{gap:10px;padding-left:16px;padding-right:16px;min-width:0;}
  .brand{font-size:1rem;min-width:0;gap:8px;}
  .brand .mark{flex-shrink:0;}
  .header-actions{gap:8px;min-width:0;}
  .header-actions .btn{padding:9px 12px;font-size:.82rem;white-space:nowrap;}
  .menu-toggle{flex-shrink:0;}
  .trust-bar .container{padding-left:16px;padding-right:16px;}
}
@media (max-width:400px){
  .brand{font-size:.94rem;}
  .header-actions .btn{padding:9px 10px;font-size:.78rem;}
}

/* --- Long CTA buttons on small screens --------------------
   PRE-EXISTING BUG: a few inline CTAs carry long labels
   ("Need help choosing? Request ...") and the .btn rule keeps
   them on one line, so at phone widths the button rendered
   ~470px wide inside a 390px viewport and dragged the whole
   page sideways. Letting the label wrap fixes the scroll
   without changing the button's styling anywhere else. */
@media (max-width:600px){
  .btn{max-width:100%;white-space:normal;}
  .header-actions .btn{white-space:nowrap;}
}

@media (max-width:600px){
  /* Brand may ellipsis rather than push the row wide. */
  .brand{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* The header CTA duplicates CTAs that already appear in the hero and in
     every section below, and its label cannot shrink (nowrap), so on phones
     it was the single element forcing the hamburger off-screen. Hidden here
     only; unchanged from 601px up. */
  .header-actions .btn-primary{display:none;}
}
@media (max-width:420px){
  .header-inner{padding-left:12px;padding-right:12px;gap:8px;}
}

/* --- Mid-width nav crowding -------------------------------
   PRE-EXISTING BUG: between the mobile breakpoint (~980px) and
   roughly 1340px the full desktop nav, brand, call link and CTA
   together were wider than the viewport on the longer-nav demos,
   so laptops and small desktops scrolled sideways. Tightening
   spacing and type slightly in that band makes the row fit; the
   layout is untouched above and below it. */
@media (min-width:981px) and (max-width:1340px){
  .main-nav{gap:16px;min-width:0;}
  .main-nav a{font-size:.88rem;}
  .header-inner{gap:12px;}
  .header-actions{gap:10px;}
  .header-actions .btn{padding:9px 13px;font-size:.85rem;}
}

/* =========================================================
   Multi-page conversion — shared layout cleanup
   Appended block. No existing rule above was modified.
   Everything here is theme-neutral: it uses this site's own
   CSS variables and currentColor, so each demo keeps its palette.
   ========================================================= */

/* --- Container width / side gutters ------------------------
   Content was capped at 1200px, leaving wide blank gutters on
   large screens. Widened to 1320px with a fluid gutter. Every
   section, header and footer reads the same --maxw token, so
   they widen together and stay aligned with each other. */
:root{ --maxw:1320px; }
.container{ padding-left:clamp(16px,2.2vw,32px); padding-right:clamp(16px,2.2vw,32px); }

/* --- Header ------------------------------------------------
   Brand and CTA cluster never shrink, so the brand text can
   never overflow its box and collide with the nav. Nav labels
   never wrap, so "Panel Upgrades" / "Water Heaters" / "EV
   Chargers" stay on one line. Below 1180px the nav hands off
   to the existing hamburger rather than cramming. */
.header-inner{ align-items:center; }
.brand{ flex-shrink:0; white-space:nowrap; }
.brand .mark{ flex-shrink:0; }
.header-actions{ flex-shrink:0; display:flex; align-items:center; gap:12px; }
.main-nav{ flex-wrap:nowrap; }
.main-nav a{ white-space:nowrap; line-height:1.2; }

@media (min-width:1181px){
  .header-inner{ max-width:1400px; gap:clamp(14px,1.3vw,30px); }
  .main-nav{ gap:clamp(11px,1.1vw,20px); margin-left:clamp(10px,1vw,26px); }
}
@media (min-width:1181px) and (max-width:1460px){
  .main-nav a{ font-size:.88rem; }
  .header-actions .btn{ padding:9px 13px; font-size:.82rem; }
}
@media (max-width:1180px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:80%; max-width:320px;
    background:var(--white,#fff); flex-direction:column; align-items:flex-start;
    padding:100px 30px 30px; gap:22px; transform:translateX(100%);
    transition:transform .3s ease; z-index:95; box-shadow:var(--shadow-lg);
    overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .menu-toggle{ display:block; position:relative; z-index:96; }
}
@media (max-width:600px){
  .header-inner{ gap:10px; padding-left:16px; padding-right:16px; }
  .brand{ font-size:1rem; overflow:hidden; text-overflow:ellipsis; }
  .header-actions .btn{ padding:9px 12px; font-size:.8rem; white-space:nowrap; }
}

/* Current-page indicator. */
.main-nav a.active{ color:var(--accent,currentColor); position:relative; font-weight:700; }
@media (min-width:1181px){
  .main-nav a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:currentColor; border-radius:2px;
  }
}

/* --- Headings ---------------------------------------------- */
h1,h2{ text-wrap:balance; }
h1{ line-height:1.08; }

/* --- Cards -------------------------------------------------
   Equal height per row, and heading-only cards centre their
   text instead of inheriting the left/top layout meant for
   cards that also carry an icon and a paragraph. */
.grid > *{ min-width:0; }
.svc-card, .feat-card, .why-card, .type-card, .material-card{ height:100%; }
.svc-card-title{
  display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:104px; padding:24px;
}
.svc-card-title h3{ margin:0; line-height:1.25; text-align:center; }
@media (max-width:640px){ .svc-card-title{ min-height:84px; padding:20px; } }

/* --- Contact ----------------------------------------------
   Info column and form sit in one row and stretch to the same
   height, so the shorter column can never leave a blank gap
   beneath it. Explicit placement stops a full-width form rule
   from pushing the form onto its own row. */
.cs-contact-grid{
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:24px; align-items:stretch;
}
.cs-contact-grid > *{ min-width:0; height:100%; }
.cs-contact-grid > .cs-info-card,
.cs-contact-grid > .contact-card,
.cs-contact-grid > .feat-card:not(form){ grid-column:1; grid-row:1; }
.cs-contact-grid > form{ grid-column:2; grid-row:1; margin:0; height:100%; }
@media (max-width:900px){
  .cs-contact-grid{ grid-template-columns:1fr; gap:20px; }
  .cs-contact-grid > .cs-info-card,
  .cs-contact-grid > .contact-card,
  .cs-contact-grid > .feat-card:not(form){ grid-column:1; grid-row:auto; }
  .cs-contact-grid > form{ grid-column:1; grid-row:auto; height:auto; }
  .cs-info-list{ flex:0 0 auto; justify-content:flex-start; }
}

/* --- Footer ------------------------------------------------
   Columns flush at the top; the bottom row keeps copyright and
   the Cybertron Softech credit on one baseline and stacks
   centred on small screens instead of half-wrapping. */
.footer-grid{ align-items:start; }
.footer-brand .brand{ display:flex; align-items:center; gap:10px; }
@media (min-width:721px){
  .footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  .footer-legal{ justify-content:center; }
}
@media (max-width:720px){
  .footer-bottom{ display:flex; flex-direction:column; align-items:center; text-align:center; row-gap:12px; }
  .footer-legal{ justify-content:center; flex-wrap:wrap; }
}

/* --- Images ------------------------------------------------
   Keeps placeholders (and the real photos that replace them
   later) filling their slots without stretching. */
img{ max-width:100%; }

/* =========================================================
   QA correction pass — accessibility, honest content blocks,
   contact form preview. Appended; earlier rules left intact
   apart from removing styles for markup that no longer exists.
   ========================================================= */

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px;}
.field input:focus, .field select:focus, .field textarea:focus{box-shadow:0 0 0 3px rgba(232,98,44,.22);}

/* Page-level H1 inside a section head (inner pages) */
.section-head h1{font-size:clamp(2rem,3.4vw,2.9rem);}

.footer-grid h2.footer-heading{color:#fff;font-size:.98rem;margin-bottom:16px;}

/* Card headings promoted from h3 to h2 keep their original size */
.svc-card h2{font-size:1.12rem;}
.diff-card h2{font-size:1.28rem;}
.project-body h2{font-size:1.04rem;margin:6px 0 4px;}
.cs-info-card h2{font-size:1.17rem;margin-bottom:20px;}

/* Mobile drawer: hidden from keyboard/screen readers while closed */
@media (max-width:1180px){
  .main-nav{visibility:hidden;transition:transform .3s ease, visibility 0s linear .3s;}
  .main-nav.open{visibility:visible;transition:transform .3s ease, visibility 0s;}
}

/* Home — illustrative scenarios (replaces testimonials) */
.scenario-card{background:#fff;border-radius:var(--radius-lg);padding:28px;border:1px solid var(--border);box-shadow:var(--shadow-sm);height:100%;}
.scenario-tag{display:inline-block;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--orange);margin-bottom:10px;}
.scenario-card h3{font-size:1.06rem;}
.scenario-card p{color:var(--text-muted);font-size:.95rem;margin-bottom:0;}

/* Home — concise service-area statement */
.area-statement{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;
  color:rgba(255,255,255,.82);max-width:720px;margin:36px auto 28px;font-size:1rem;}
.area-statement svg{width:20px;height:20px;color:var(--yellow);flex-shrink:0;}
.area-statement strong{color:var(--yellow);}

/* Projects — keyboard-operable photo trigger */
.project-open{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;overflow:hidden;border-radius:0;}
.project-open img{width:100%;height:auto;}
.project-open:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:0;}
.project-card:has(.project-open:focus-visible){outline:3px solid var(--orange);outline-offset:4px;}

/* Lightbox dialog */
.lightbox-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;}
.lightbox-figure img{max-width:min(900px,92vw);max-height:78vh;width:auto;height:auto;border-radius:12px;}
.lightbox-caption{color:#fff;font-weight:600;font-size:.98rem;text-align:center;}
.lightbox-close{width:48px;height:48px;display:flex;align-items:center;justify-content:center;top:16px;right:16px;}
.lightbox-close:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:10px;}
html.lightbox-lock{overflow:hidden;}

/* FAQ — closed answers are hidden from assistive tech */
.faq-answer{visibility:hidden;transition:max-height .3s ease, visibility 0s linear .3s;}
.faq-item.open .faq-answer{visibility:visible;transition:max-height .3s ease, visibility 0s;}

/* Contact — info card sized by its content, helpful checklist below */
.cs-info-list{flex:0 0 auto;justify-content:flex-start;gap:16px;}
.cs-info-foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--border);}
.cs-info-note{margin-top:auto;background:var(--concrete-light);border-radius:var(--radius);padding:16px 18px;font-size:.92rem;line-height:1.55;color:var(--text-muted);}
.cs-info-foot{margin-bottom:24px;}
.cs-info-note strong{display:block;color:var(--charcoal);margin-bottom:4px;}
@media (max-width:900px){.cs-info-note{margin-top:24px;}}
.cs-ready-title{font-size:1rem;margin-bottom:12px;}
.cs-ready-list li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.94rem;color:var(--text-muted);}
.cs-ready-list li:last-child{margin-bottom:0;}
.cs-ready-list li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2.4px solid var(--orange);border-bottom:2.4px solid var(--orange);transform:rotate(-45deg);}

/* Contact — form preview state */
.cs-info-list li > span{display:flex;flex-direction:column;min-width:0;}
.cs-info-list .cs-lbl{font-size:.75rem;}
@media (max-width:640px){.form-card .grid-2{row-gap:0 !important;}}
.form-title{font-size:1.17rem;margin-bottom:14px;}
.form-preview-notice{background:rgba(242,183,5,.14);border:1px solid rgba(201,150,4,.45);border-left:4px solid var(--yellow-dark);
  border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:.92rem;line-height:1.55;color:var(--charcoal);}
.form-preview-notice strong{display:block;margin-bottom:2px;}
.form-preview-notice:focus{outline:3px solid var(--orange);outline-offset:2px;}
.btn:disabled, .btn:disabled:hover{background:#c9cbce;color:#2f3134;box-shadow:none;transform:none;cursor:not-allowed;}


/* =========================================================
   Beautify pass — premium polish layer.
   Appended; builds on the existing tokens and markup.
   ========================================================= */

/* ---------- Readable type (body copy at 16px+) ---------- */
.svc-card p, .process-step p, .project-body p, .scenario-card p, .diff-card p,
.highlight-card p, .faq-answer-inner, .checklist li, .prep-grid p{font-size:1rem;line-height:1.65;}
.footer-grid ul li, .footer-grid p{font-size:1rem;}
.field label{font-size:.95rem;}
.field input, .field select, .field textarea{font-size:1rem;}
.trust-item, .hero-trust span{font-size:.95rem;}

/* ---------- Section rhythm ---------- */
.section-head{margin-bottom:48px;}
.section-head p{max-width:640px;margin-left:auto;margin-right:auto;}

/* ---------- Inner-page hero band ---------- */
.page-hero{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(155deg,var(--charcoal) 0%,var(--asphalt) 100%);padding:64px 0 72px;}
.page-hero .hero-blob.b1{width:380px;height:380px;top:-170px;right:-80px;}
.page-hero .hero-blob.b2{width:300px;height:300px;bottom:-190px;left:-60px;}
.page-hero-inner{position:relative;z-index:2;max-width:820px;}
.page-hero .eyebrow{background:rgba(242,183,5,.16);color:var(--yellow);}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4vw,3.1rem);margin-bottom:16px;}
.page-hero p{color:rgba(255,255,255,.8);font-size:1.08rem;max-width:660px;margin:0 auto;}
.breadcrumb{display:flex;justify-content:center;align-items:center;gap:10px;font-size:.9rem;margin-bottom:18px;color:rgba(255,255,255,.62);}
.breadcrumb a{color:rgba(255,255,255,.85);font-weight:600;}
.breadcrumb a:hover{color:var(--yellow);}
.breadcrumb [aria-current]{color:var(--yellow);font-weight:600;}
@media (max-width:640px){.page-hero{padding:48px 0 56px;}}

/* ---------- Home hero: tidy 2×2 trust points ---------- */
.hero-trust{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 28px;}
@media (max-width:420px){.hero-trust{grid-template-columns:1fr;}}

/* ---------- Trust strip: centred wrap, never ragged-left ---------- */
.trust-strip .container{justify-content:center;gap:14px 34px;}

/* ---------- Service cards: icon badge + accent stripe ---------- */
.svc-card{position:relative;overflow:hidden;border-color:#e6e7e9;
  background:linear-gradient(180deg,#fff 0%,#fff 62%,#fbfaf6 100%);}
.svc-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--orange),var(--yellow));transform:scaleX(.18);transform-origin:left;transition:transform .35s ease;}
.svc-card:hover::before{transform:scaleX(1);}
.svc-icon{background:linear-gradient(135deg,rgba(232,98,44,.16),rgba(242,183,5,.18));transition:transform .3s ease, background .3s ease, color .3s ease;}
.svc-card:hover .svc-icon{transform:translateY(-2px) rotate(-6deg);background:var(--orange);color:#fff;}
.svc-card h2{margin-bottom:8px;}

/* ---------- Services: "every service includes" band ---------- */
.included{display:grid;grid-template-columns:1fr;gap:28px;text-align:center;}
.included-list{text-align:left;}
.included-head .eyebrow{margin-bottom:12px;}
.included-head h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0;}
.included-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.included-list > li{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 16px;box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;}
.included-list > li:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.inc-icon{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--charcoal);color:var(--yellow);}
.inc-icon svg{width:21px;height:21px;}
.included-list strong{display:block;font-family:var(--font-display);font-size:1rem;line-height:1.3;margin-bottom:3px;}
.inc-sub{display:block;font-size:.93rem;color:var(--text-muted);line-height:1.45;}
@media (max-width:900px){.included-list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.included-list{grid-template-columns:1fr;}}

/* ---------- About: principle cards ---------- */
.diff-grid .diff-card{position:relative;overflow:hidden;border-top:4px solid var(--yellow);}
.diff-grid .diff-card:nth-child(2){background:var(--charcoal);border-color:var(--charcoal);border-top-color:var(--orange);}
.diff-grid .diff-card:nth-child(2) h2{color:#fff;}
.diff-grid .diff-card:nth-child(2) p{color:rgba(255,255,255,.76);}
.diff-card .tag{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(242,183,5,.16);color:var(--yellow-dark);font-size:1.05rem;margin-bottom:18px;}
.diff-grid .diff-card:nth-child(2) .tag{background:rgba(242,183,5,.18);color:var(--yellow);}

/* ---------- Process journeys: connected milestone path ---------- */
.journey{position:relative;}
.journey::before{content:"";position:absolute;z-index:0;left:6%;right:6%;top:61px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--orange),var(--yellow));}
.journey > .process-step{position:relative;z-index:1;transition:transform .2s ease, box-shadow .2s ease;}
.journey > .process-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.journey .step-badge{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 0 0 6px rgba(232,98,44,.14);}
.journey .timeframe{margin:0 0 12px;}
@media (max-width:960px){
  .journey, .journey.grid-4{grid-template-columns:1fr;gap:18px;}
  .journey::before{left:53px;right:auto;top:40px;bottom:40px;width:3px;height:auto;
    background:linear-gradient(180deg,var(--orange),var(--yellow));}
  .journey > .process-step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;align-items:start;padding:24px 22px 24px 26px;}
  .journey > .process-step > *{grid-column:2;}
  .journey > .process-step > .step-badge{grid-column:1;grid-row:1 / span 4;margin:0;}
  .journey .timeframe{justify-self:start;}
  .journey > .process-step p{margin-bottom:0;}
}

/* ---------- Home: scenario cards ---------- */
.scenario-card{position:relative;overflow:hidden;border-left:4px solid var(--orange);
  background:linear-gradient(160deg,#fffaf0 0%,#fff 45%);transition:transform .2s ease, box-shadow .2s ease;}
.scenario-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.scenario-tag{background:rgba(232,98,44,.1);padding:4px 10px;border-radius:999px;}

/* ---------- Home: dark highlight cards ---------- */
.highlight-card{transition:transform .2s ease, background .2s ease, border-color .2s ease;}
.highlight-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(242,183,5,.45);}
.hl-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(242,183,5,.14);color:var(--yellow);}
.hl-icon svg{width:26px;height:26px;}

/* ---------- Checklist ---------- */
.checklist{border-top:4px solid var(--yellow);}
.checklist li{padding:4px 0;}

/* ---------- Projects: "view photo" cue ---------- */
.project-card{transition:transform .2s ease, box-shadow .2s ease;}
.project-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.project-open{position:relative;}
.view-chip{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(16,17,19,.78);color:#fff;font-size:.84rem;font-weight:600;padding:7px 12px;border-radius:999px;
  opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease;pointer-events:none;}
.view-chip svg{width:15px;height:15px;}
.project-card:hover .view-chip, .project-open:focus-visible .view-chip{opacity:1;transform:none;}
@media (hover:none){.view-chip{opacity:1;transform:none;}}
.project-body{padding:20px 22px 24px;}
.project-type{display:inline-block;background:rgba(232,98,44,.1);padding:3px 10px;border-radius:999px;}

/* ---------- Contact: compact info + next-steps card ---------- */
.cs-contact-grid{align-items:start;}
.cs-contact-grid > .cs-contact-side{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:20px;height:auto;}
.cs-contact-grid > form{height:auto;}
.cs-info-card{padding:28px 26px;border-top:4px solid var(--orange);}
.cs-info-list{gap:18px;}
.cs-info-list svg{width:36px;height:36px;padding:8px;margin-top:0;border-radius:10px;opacity:1;
  background:rgba(232,98,44,.1);color:var(--orange);}
.cs-info-list .cs-val{font-size:1rem;color:var(--charcoal);}
.cs-next-card{background:linear-gradient(155deg,var(--charcoal) 0%,var(--asphalt) 100%);color:#fff;
  border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;}
.cs-next-title{color:#fff;font-size:1.17rem;margin-bottom:20px;}
.next-steps{list-style:none;margin:0;padding:0;position:relative;}
.next-steps::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--yellow),rgba(242,183,5,.15));}
.next-steps li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;margin-bottom:20px;}
.next-steps li:last-child{margin-bottom:0;}
.ns-num{width:32px;height:32px;border-radius:50%;background:var(--yellow);color:#241c02;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;position:relative;z-index:1;box-shadow:0 0 0 5px rgba(242,183,5,.16);}
.next-steps strong{display:block;font-family:var(--font-display);font-size:1rem;margin:4px 0 2px;}
.next-steps p{margin:0;color:rgba(255,255,255,.74);font-size:.97rem;line-height:1.55;}
.form-card{border-top:4px solid var(--yellow);}

/* ---------- FAQ ---------- */
.faq-item{transition:border-color .2s ease, box-shadow .2s ease;box-shadow:0 1px 0 rgba(16,17,19,.02);}
.faq-item:hover{border-color:#d3d5d8;}
.faq-item.open{border-color:rgba(232,98,44,.45);box-shadow:var(--shadow-sm);border-left:4px solid var(--orange);}

/* ---------- Final CTA: subtle depth ---------- */
.final-cta{position:relative;overflow:hidden;}
.final-cta::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;top:-180px;
  background:var(--orange);opacity:.16;filter:blur(90px);}
.final-cta .container{position:relative;z-index:1;}

/* ---------- Reveal: quicker, motion-safe ---------- */
.reveal{transition:opacity .5s ease, transform .5s ease;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *, *::before, *::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* =========================================================
   Responsive QA pass — fixes for issues observed in browser
   testing at 1920 → 320px. Appended; desktop layout unchanged.
   ========================================================= */

/* Content stays visible if JavaScript fails (reveal is JS-driven). */
html:not(.js) .reveal{opacity:1;transform:none;}

/* Sticky header never covers an anchored section heading. */
section[id], :target{scroll-margin-top:96px;}

/* Top bar: balanced two-line wrap instead of an orphaned word. */
.trust-bar span{text-wrap:balance;}

/* Home hero, 961–1180px: headline was wrapping to 4–5 lines. */
@media (min-width:961px) and (max-width:1180px){
  .hero-grid{gap:40px;}
  .hero h1{font-size:2.6rem;}
}

/* Home hero, stacked (≤960px): the 5:4 photo became ~780×620 on tablets.
   A wider crop keeps the house and driveway centred at a sensible height. */
@media (max-width:960px){
  .hero-visual img{aspect-ratio:16/10;object-position:center 60%;}
}

/* Lone last card in 3-up grids at the 2-column tablet breakpoint:
   centre it instead of leaving it stranded on the left. */
@media (min-width:641px) and (max-width:960px){
  .grid-3 > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 13px);}
}

/* Contact, 641–900px: info + next-steps side by side above the form,
   instead of two thin full-width cards. */
@media (min-width:641px) and (max-width:900px){
  .cs-contact-grid > .cs-contact-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch;}
}

/* Mobile section rhythm: desktop 96px padding left oversized gaps. */
@media (max-width:640px){
  .section{padding:64px 0;}
  .section-tight{padding:48px 0;}
  .section-head{margin-bottom:36px;}
}

/* Mobile CTAs: full-width stacked buttons, equal widths. */
@media (max-width:540px){
  .hero-ctas{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-ctas .btn{width:100%;}
  .form-card, .cs-info-card, .cs-next-card{padding:24px 20px;}
}
@media (max-width:420px){
  .btn-extra{display:none;}
  .hero h1{font-size:2rem;}
}


/* Mobile drawer: links were 18px tall — now full-width 48px tap targets. */
@media (max-width:1180px){
  .main-nav{gap:4px;padding-top:92px;align-items:stretch;}
  .main-nav a{display:block;padding:13px 12px;border-radius:10px;font-size:1.02rem;}
  .main-nav a:hover, .main-nav a.active{background:rgba(232,98,44,.08);opacity:1;}
}

/* =========================================================
   Image-rich integration — split photo page heroes, Home
   process/base/problem imagery, service card media and About
   visuals. Appended block; earlier rules kept.
   ========================================================= */

/* --- Inner page hero: charcoal text panel | photo --------- */
.page-hero--photo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:0; text-align:left;
  min-height:clamp(380px,34vw,480px);
}
.page-hero--photo .page-hero-inner{
  grid-column:1; grid-row:1; align-self:center; max-width:none; margin:0; width:100%;
  padding-top:clamp(48px,5vw,72px); padding-bottom:clamp(48px,5vw,72px);
  padding-left:max(24px, calc((100vw - var(--maxw)) / 2 + 24px)); padding-right:clamp(28px,4vw,56px);
}
.page-hero--photo .breadcrumb{ justify-content:flex-start; }
.page-hero--photo p{ margin:0; max-width:560px; color:rgba(255,255,255,.86); }
.page-hero--photo h1{ font-size:clamp(1.9rem,3.2vw,2.8rem); }
.page-hero-media{ grid-column:2; grid-row:1; position:relative; min-height:100%; overflow:hidden; }
.page-hero-media img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:var(--pos,70% 50%);
}
.page-hero-media::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--asphalt) 0%, rgba(16,17,19,.35) 14%, rgba(16,17,19,0) 32%);
}
@media (max-width:1024px){ .page-hero--photo{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }
/* Tablet/phone: photo band on top, solid text panel below */
@media (max-width:768px){
  .page-hero--photo{ display:flex; flex-direction:column; min-height:0; }
  .page-hero-media{ order:-1; min-height:0; }
  .page-hero-media::before{ display:none; }
  .page-hero-media img{ position:relative; inset:auto; height:auto; aspect-ratio:16/9; object-position:var(--pos-m,var(--pos)); }
  .page-hero--photo .page-hero-inner{ padding:26px 20px 32px; }
  .page-hero--photo .hero-blob{ display:none; }
}
@media (max-width:430px){ .page-hero-media img{ aspect-ratio:16/10; } }
/* Contact: keep the form close to the top on phones */
@media (max-width:768px){ .page-hero--photo:has(img[src*="contact-page-banner"]) .page-hero-media img{ aspect-ratio:21/9; } }

/* --- Shared: photo + heading split ------------------------ */
.head-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; margin-bottom:44px; }
.head-split--reverse .head-split-img{ order:2; }
.head-split-img{ margin:0; position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.head-split-img img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.section-head--left{ text-align:left; margin:0 !important; }
.section-head--left p{ margin-left:0; }
figure figcaption{ font-size:.9rem; }
.head-split-img figcaption, .prep-media figcaption, .values-media figcaption{
  position:absolute; left:12px; bottom:12px; right:12px; width:fit-content; max-width:calc(100% - 24px);
  padding:8px 12px; border-radius:10px; background:rgba(16,17,19,.84); color:#fff; line-height:1.35;
}
@media (max-width:900px){ .head-split{ grid-template-columns:1fr; gap:24px; margin-bottom:32px; } .head-split--reverse .head-split-img{ order:0; } }

/* --- Home: prep grid with photo ---------------------------- */
.prep-grid--photo{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:48px; align-items:center; }
.prep-media{ margin:0; position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); align-self:stretch; min-height:360px; }
.prep-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:40% 50%; }
.checklist--compact{ display:grid; grid-template-columns:1fr 1fr; gap:4px 22px; padding:22px 24px; margin-top:22px; }
.checklist--compact li{ margin:0; }
@media (max-width:900px){
  .prep-grid--photo{ grid-template-columns:1fr; gap:28px; }
  .prep-media{ min-height:0; }
  .prep-media img{ position:relative; height:auto; aspect-ratio:3/2; }
}
@media (max-width:560px){ .checklist--compact{ grid-template-columns:1fr; } }

/* --- Home: problem cards with photo + solid text panel ----- */
.scenario-card--media{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.scenario-media{ position:relative; aspect-ratio:5/4; overflow:hidden; background:#2c2e31; }
.scenario-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.scenario-body{ padding:20px 22px 24px; flex:1; }
.scenario-card--media:hover .scenario-media img{ transform:scale(1.04); }
.scenario-media img{ transition:transform .45s ease; }
@media (max-width:960px) and (min-width:641px){ .scenario-media{ aspect-ratio:16/10; } }
@media (max-width:640px){ .scenario-media{ aspect-ratio:16/10; } }

/* --- Services: card media ---------------------------------- */
.svc-card--media{ padding:0; overflow:hidden; }
.svc-media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:#2c2e31; }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.svc-card--media:hover .svc-media img{ transform:scale(1.04); }
.svc-body{ position:relative; padding:34px 22px 24px; display:flex; flex-direction:column; flex:1; }
.svc-card--media .svc-icon{
  position:absolute; top:-26px; left:22px; margin:0; width:52px; height:52px;
  border:3px solid #fff; box-shadow:var(--shadow-sm);
}

/* --- About: values beside photo, compaction split ---------- */
.values-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:stretch; }
.values-media{ margin:0; position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); min-height:420px; }
.values-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:45% 50%; }
.values-stack{ grid-template-columns:1fr !important; gap:16px; }
.values-stack .diff-card{ padding:24px 26px; }
@media (max-width:900px){
  .values-split{ grid-template-columns:1fr; gap:24px; }
  .values-media{ min-height:0; }
  .values-media img{ position:relative; height:auto; aspect-ratio:3/2; }
}
.svc-card--media .svc-icon{ background:#FFF1E6; }
.svc-card--media:hover .svc-icon{ background:var(--orange); }
.nowrap{ white-space:nowrap; }
/* The About values stack is single-column at every width: neutralise the 2-col orphan-centring rule inside it. */
.values-stack > :last-child:nth-child(odd){ grid-column:auto; justify-self:stretch; width:auto; }

/* =========================================================
   ROAD FX — paving-themed decorative motion (all pages)
   A road is laid as you scroll, a fresh road strip is paved
   along each banner (with a roller) and its lane line flows,
   hot-asphalt steam rises from fresh photos, timelines become
   roads with flowing lane lines, badges do a compactor stomp,
   photos get a wet-sealcoat shine on hover, and buttons kick
   up gravel. Effect elements are aria-hidden, pointer-events
   none, absolutely/fixed positioned (no layout shift), paused
   off-screen and disabled for reduced motion.
   ========================================================= */

/* ---- 1) Fresh road strip along banners -------------------------------- */
.fx-road{--rh:18px;position:absolute;left:0;right:0;bottom:0;height:var(--rh);z-index:3;pointer-events:none;overflow:hidden;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.45,.05,.3,1) .2s;}
.fx-road.fx-laid{clip-path:inset(0 0 0 0);}
.fx-road-surface{position:absolute;inset:0;background:linear-gradient(180deg,#34373B 0%,#1B1C1F 55%,#141517 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22);}
.fx-road-line{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1px;
  background:repeating-linear-gradient(90deg,#F2B705 0 26px,transparent 26px 48px);
  animation:fx-lane 1.1s linear infinite;}
@keyframes fx-lane{from{background-position:0 0;}to{background-position:-48px 0;}}
.fx-roller{position:absolute;bottom:2px;left:0;width:34px;height:28px;z-index:4;pointer-events:none;
  border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,#F2B705,#D99A00);box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 -4px 0 rgba(0,0,0,.18);
  opacity:0;transform:translateX(-40px);}
.fx-roller::after{content:"";position:absolute;left:4px;right:4px;bottom:3px;height:8px;border-radius:5px;
  background:repeating-linear-gradient(90deg,#2A2C30 0 4px,#45484D 4px 8px);animation:fx-drum .25s linear infinite;}
@keyframes fx-drum{to{background-position:8px 0;}}
.fx-road.fx-laid + .fx-roller{animation:fx-roll 1.5s cubic-bezier(.45,.05,.3,1) .2s 1 forwards;}
@keyframes fx-roll{0%{opacity:1;transform:translateX(-40px);}88%{opacity:1;}100%{opacity:0;transform:translateX(var(--rw,1200px));}}
.page-hero--photo.fx-has-road .page-hero-inner{padding-bottom:calc(clamp(48px,5vw,72px) + 18px);}
.hero.fx-has-road{padding-bottom:calc(90px + 18px);}
@media (max-width:960px){ .hero.fx-has-road{padding-bottom:calc(56px + 18px);} }
@media (max-width:768px){
  .fx-road{--rh:14px;}
  .fx-roller{width:26px;height:22px;}
  .fx-road-line{height:2px;background:repeating-linear-gradient(90deg,#F2B705 0 18px,transparent 18px 34px);}
  @keyframes fx-lane{from{background-position:0 0;}to{background-position:-34px 0;}}
  .page-hero--photo.fx-has-road .page-hero-inner{padding-bottom:calc(32px + 14px);}
}

/* ---- 2) Scroll bar = asphalt being laid -------------------------------- */
.fx-scrollroad{position:absolute;left:0;right:0;bottom:0;height:6px;pointer-events:none;
  background:linear-gradient(180deg,#34373B,#17181B);clip-path:inset(0 100% 0 0);}
.fx-scrollroad::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;
  background:repeating-linear-gradient(90deg,#F2B705 0 10px,transparent 10px 18px);}
.fx-scrollroller{position:absolute;bottom:-3px;left:0;width:14px;height:12px;margin-left:-7px;border-radius:5px 5px 3px 3px;pointer-events:none;
  background:linear-gradient(180deg,#F2B705,#D99A00);box-shadow:0 1px 3px rgba(0,0,0,.35);opacity:0;transition:opacity .25s;}

/* ---- 3) Hot-asphalt steam --------------------------------------------- */
.fx-steam{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;}
.fx-host{position:relative;isolation:isolate;}
.fx-host > .fx-steam{z-index:-1;}
.fx-wisp{position:absolute;bottom:-20px;left:var(--x);width:var(--w);height:calc(var(--w) * 2.4);border-radius:50% 50% 45% 45%;opacity:0;
  background:radial-gradient(ellipse 45% 50% at 50% 55%,rgba(255,255,255,.85),rgba(255,255,255,.3) 55%,rgba(255,255,255,0) 74%);filter:blur(8px);
  animation:fx-steam var(--dur) ease-out var(--delay) infinite;will-change:transform,opacity;}
@keyframes fx-steam{
  0%{transform:translate(0,0) scale(.5,.6);opacity:0;}
  20%{opacity:var(--op,.55);}
  60%{transform:translate(var(--dx),calc(var(--rise) * -.6)) scale(1,1.1);opacity:calc(var(--op,.55) * .6);}
  100%{transform:translate(calc(var(--dx) * 1.6),calc(var(--rise) * -1)) scale(1.4,1.3);opacity:0;}
}

/* ---- 4) Timelines become roads: flowing lane line + compactor stomp ---- */
.journey::before{background:repeating-linear-gradient(90deg,#F2B705 0 14px,#3A3D42 14px 24px) !important;animation:fx-rail-h 1.2s linear infinite;}
@keyframes fx-rail-h{from{background-position:0 0;}to{background-position:24px 0;}}
.next-steps::before{background:repeating-linear-gradient(180deg,#F2B705 0 10px,rgba(242,183,5,.25) 10px 18px);animation:fx-rail-v 1.1s linear infinite;}
@keyframes fx-rail-v{from{background-position:0 0;}to{background-position:0 18px;}}
@media (max-width:960px){
  .journey::before{background:repeating-linear-gradient(180deg,#F2B705 0 14px,#3A3D42 14px 24px) !important;animation-name:fx-rail-v2;}
  @keyframes fx-rail-v2{from{background-position:0 0;}to{background-position:0 24px;}}
}
.fx-stomp .step-badge,.fx-stomp .ns-num{animation:fx-stomp .7s cubic-bezier(.3,.6,.4,1) calc(.2s + var(--i,0) * .28s) 1 both;}
@keyframes fx-stomp{
  0%{transform:translateY(0) scale(1);}
  35%{transform:translateY(-9px) scale(1.04,.96);}
  55%{transform:translateY(1px) scale(1.12,.84);box-shadow:0 0 0 0 rgba(150,150,150,.55);}
  75%{transform:translateY(0) scale(.97,1.04);}
  100%{transform:none;box-shadow:0 0 0 16px rgba(150,150,150,0);}
}

/* ---- 5) Wet-sealcoat shine sweeping across photos on hover ------------- */
.svc-media::after,.scenario-media::after,.project-open::after,.head-split-img::after,.prep-media::after,.values-media::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 45%,rgba(255,255,255,.08) 60%,rgba(255,255,255,0) 100%);
  transform:skewX(-12deg);}
.svc-card:hover .svc-media::after,.scenario-card:hover .scenario-media::after,.project-card:hover .project-open::after,
.head-split-img:hover::after,.prep-media:hover::after,.values-media:hover::after{animation:fx-sheen .9s ease-out 1;}
@keyframes fx-sheen{0%{left:-60%;opacity:0;}15%{opacity:1;}100%{left:120%;opacity:0;}}
.prep-media,.values-media{position:relative;overflow:hidden;}

/* ---- 6) Gravel scatter on button press (fixed overlay) ----------------- */
.fx-gravel{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;}
.fx-stone{position:absolute;width:var(--s);height:calc(var(--s) * .8);border-radius:45% 55% 50% 40%;background:var(--c);
  box-shadow:inset -1px -1px 1px rgba(0,0,0,.35);animation:fx-stone .65s cubic-bezier(.2,.7,.4,1) forwards;}
@keyframes fx-stone{
  0%{transform:translate(-50%,-50%) rotate(0deg);opacity:1;}
  55%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(calc(var(--r) * .6));opacity:1;}
  100%{transform:translate(calc(-50% + var(--dx) * 1.2),calc(-50% + var(--dy) + 30px)) rotate(var(--r));opacity:0;}
}

/* ---- Pause off-screen / reduced motion --------------------------------- */
.fx-off .fx-wisp,.fx-off .fx-road-line{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){
  .fx-road,.fx-roller,.fx-steam,.fx-gravel,.fx-scrollroller{display:none !important;}
  .journey::before,.next-steps::before{animation:none !important;}
  .fx-stomp .step-badge,.fx-stomp .ns-num{animation:none !important;}
  .svc-card:hover .svc-media::after,.scenario-card:hover .scenario-media::after,.project-card:hover .project-open::after,
  .head-split-img:hover::after,.prep-media:hover::after,.values-media:hover::after{animation:none !important;}
}

/* ===== Responsive QA pass ===== */
/* Eyebrow labels and number tags on light sections: deeper gold for readable contrast
   (hero / dark-section variants keep their own brighter yellow via more specific rules) */
.eyebrow,.tag{color:#7A5C00;}
/* Readable small labels */
.cs-info-list .cs-lbl,.cs-lbl,.scenario-tag{font-size:.8rem;}
.diff-card .tag{color:#7A5C00;}   /* light cards; the dark featured card keeps its yellow via :nth-child(2) */