/* =========================================================
   Cybertron Contractors 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{
  --navy:#101B2D;
  --navy-deep:#0A1220;
  --charcoal:#23262B;
  --steel:#4A5568;
  --steel-light:#EEF0F3;
  --gold:#C9962C;
  --gold-dark:#A67A1D;
  --white:#FFFFFF;
  --text-muted:#5B6270;
  --border:#E2E5EA;
  --radius:12px;
  --radius-lg:20px;
  --shadow-sm:0 2px 12px rgba(16,27,45,.10);
  --shadow-md:0 14px 34px rgba(16,27,45,.16);
  --shadow-lg:0 30px 70px rgba(16,27,45,.26);
  --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(--navy);}
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(--steel-light);}
.bg-navy{background:var(--navy);color:#fff;}
.bg-navy h2, .bg-navy h3{color:#fff;}
.eyebrow{
  display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--gold-dark);background:rgba(201,150,44,.14);
  padding:6px 16px;border-radius:999px;margin-bottom:16px;
}
.section-head{max-width:740px;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;}

/* Blueprint grid accent */
.blueprint-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:36px 36px;
}

/* 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(--gold);color:#2b1f04;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--gold-dark);box-shadow:var(--shadow-md);transform:translateY(-2px);color:#fff;}
.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(--navy);color:var(--navy);}
.btn-outline-dark:hover{background:var(--navy);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:11px 18px;font-size:.98rem;}

/* Trust bar */
.trust-bar{background:var(--navy-deep);color:#dde1e6;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.18rem;color:var(--navy);}
.brand .mark{
  width:40px;height:40px;border-radius:9px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:800;font-size:1.1rem;flex-shrink:0;
}
.main-nav{display:flex;align-items:center;gap:26px;}
.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;}
.call-btn{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--charcoal);font-size:.96rem;}
.call-btn svg{width:18px;height:18px;flex-shrink:0;color:var(--gold-dark);}
.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;}
  .call-btn span{display:none;}
  .header-actions .btn-primary{padding:10px 16px;font-size:.9rem;}
}
.nav-backdrop{position:fixed;inset:0;background:rgba(10,18,32,.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(--navy) 0%,var(--navy-deep) 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(--gold);opacity:.18;top:-160px;right:-100px;}
.hero-blob.b2{width:340px;height:340px;background:var(--steel);opacity:.2;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(201,150,44,.16);color:var(--gold);}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.5rem);margin-bottom:20px;}
.hero .lede{opacity:.86;max-width:560px;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(--gold);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;}}

/* Trust strip */
.trust-strip{background:var(--steel-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(--navy);}
.trust-item svg{width:19px;height:19px;color:var(--gold-dark);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;}}

/* Market / service cards */
.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(201,150,44,.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--gold-dark);}
.svc-icon svg{width:26px;height:26px;}
.svc-card h3{font-size:1.1rem;}
.svc-card p{color:var(--text-muted);font-size:.96rem;flex-grow:1;}
.svc-card .learn-more{color:var(--gold-dark);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:20px 22px;}
.project-cat{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--gold-dark);}
.project-body h3{font-size:1.06rem;margin:6px 0 8px;}
.project-body p{font-size:.94rem;color:var(--text-muted);margin-bottom:14px;}
.project-meta{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:4px;}
.project-meta span{font-size:.9rem;color:var(--text-muted);}
.project-meta b{color:var(--charcoal);font-weight:700;}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(8,12,20,.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;}

/* Approach steps */
.approach-list{display:flex;flex-direction:column;gap:18px;max-width:880px;margin:0 auto;}
.approach-item{
  display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:flex-start;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm);
}
.approach-item .num{
  width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.15rem;
}
.approach-item h3{font-size:1.06rem;margin-bottom:6px;}
.approach-item p{color:var(--text-muted);font-size:.96rem;margin-bottom:0;}
@media (max-width:600px){.approach-item{grid-template-columns:1fr;}.approach-item .num{margin-bottom:6px;}}

/* Delivery models */
.delivery-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;}
.delivery-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.delivery-card h3{font-size:1.12rem;margin-bottom:8px;}
.delivery-card .tagline{color:var(--gold-dark);font-weight:700;font-size:.96rem;margin-bottom:12px;font-style:italic;}
.delivery-card p{color:var(--text-muted);font-size:.96rem;margin-bottom:0;}

/* Safety cards */
.safety-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);text-align:center;}
.safety-icon{width:48px;height:48px;border-radius:12px;background:rgba(74,85,104,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--steel);}
.safety-icon svg{width:24px;height:24px;}
.safety-card h3{font-size:1rem;}
.safety-card p{margin-bottom:0;}

/* Technology 2-col */
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.tech-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.tech-visual img{aspect-ratio:4/4.6;object-fit:cover;}
.checklist{margin:24px 0 0;}
.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(--gold-dark);flex-shrink:0;margin-top:1px;}
@media (max-width:900px){.tech-grid{grid-template-columns:1fr;}}

/* Values / partnership */
.value-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);text-align:center;}
.value-card h3{font-size:1.04rem;}
.quote-box{
  background:var(--steel-light);border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:28px 30px;margin-top:36px;max-width:820px;margin-left:auto;margin-right:auto;text-align:center;
}
.quote-box p{font-style:italic;color:var(--navy);font-size:1.08rem;margin-bottom:10px;}
.quote-box .who{font-weight:700;font-size:.94rem;color:var(--text-muted);font-style:normal;}

/* Testimonials */
.review-card{background:#fff;border-radius:var(--radius-lg);padding:26px;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.stars{color:var(--gold-dark);letter-spacing:2px;margin-bottom:10px;font-size:1rem;}
.review-card p.quote{font-style:italic;color:var(--charcoal);font-size:.98rem;}
.review-who{display:flex;align-items:center;gap:12px;margin-top:14px;}
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:.92rem;}
.review-who .name{font-weight:700;font-size:.94rem;}
.review-who .loc{font-size:.9rem;color:var(--text-muted);}

/* Service area / offices */
.area-section{background:var(--navy);color:#fff;}
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0 40px;}
.area-card{background:rgba(255,255,255,.07);border-radius:var(--radius);padding:18px;text-align:center;font-weight:700;font-size:.94rem;}
@media (max-width:900px){.area-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.area-grid{grid-template-columns:repeat(2,1fr);}}
.office-card{background:rgba(255,255,255,.07);border-radius:var(--radius-lg);padding:22px;display:flex;gap:14px;align-items:flex-start;}
.office-card svg{width:22px;height:22px;color:var(--gold);flex-shrink:0;margin-top:2px;}
.office-card .lbl{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7;font-weight:700;}
.office-card .val{font-weight:600;font-size:.98rem;}

/* FAQ */
.faq-list{max-width:840px;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(--navy);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(--gold-dark);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;}

/* Project inquiry form */
.form-card{background:#fff;border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-md);border:1px solid var(--border);max-width:840px;margin:0 auto;}
.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(--gold);}
.form-note{font-size:.9rem;color:var(--text-muted);margin-top:14px;text-align:center;}

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

/* Footer */
.site-footer{background:var(--navy-deep);color:#b7bcc4;padding:64px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 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:#8b909a;}
.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(--gold);color:#2b1f04;}
.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:#797f89;
}
.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.
   ========================================================= */

/* --- Social icons (Facebook / Instagram) -----------------
   Colour-neutral on purpose: the chip borrows currentColor
   for both icon and border, so the same markup works on a
   light card and on a dark footer with no variant class.
   44px on phones keeps it above the minimum tap target. */
.social-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.social-links a{
  width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  color:inherit;border:1.5px solid currentColor;background:transparent;
  opacity:.72;flex-shrink:0;
  transition:opacity .2s ease,transform .2s ease;
}
.social-links a:hover,.social-links a:focus-visible{opacity:1;transform:translateY(-2px);}
.social-links svg{width:20px;height:20px;display:block;}
.cs-social-label{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:10px;
}
@media (max-width:640px){
  .social-links a{width:44px;height:44px;}
}

/* --- 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;}
.cs-info-foot .btn{margin-top:16px;}

/* Social row under the form, separated by a hairline. */
.cs-form-social{
  border-top:1px solid var(--border);
  margin-top:18px;padding-top:18px;text-align:center;
}
.cs-form-social .social-links{justify-content:center;}
.cs-form-social .cs-social-label{margin-bottom:10px;}

@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;}
}

/* --- Footer social --------------------------------------- */
.cs-footer-social{margin-top:18px;}
.cs-footer-social .social-links a{width:38px;height:38px;border-radius:10px;}
@media (max-width:640px){
  .cs-footer-social .social-links a{width:44px;height:44px;}
}

/* --- 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;}
  .call-btn{flex-shrink:0;}
  /* 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;}
  .call-btn span{display:none;}
}

/* =========================================================
   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 PASS — honesty, accessibility, contact balance
   ========================================================= */
:root{--gold-text:#7A5A14;}

/* Content stays visible if JS fails; reveal hides only once JS is flagged */
html:not(.js) .reveal{opacity:1;transform:none;}
[id]{scroll-margin-top:112px;}

/* Reduced motion: everything visible, no movement */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
}

/* Heading hierarchy (visual sizes unchanged) */
.section-head h1{font-size:clamp(1.9rem,3vw,2.7rem);}
.footer-grid .footer-heading{color:#fff;font-size:.98rem;margin-bottom:16px;}

/* Contrast: small gold text on light backgrounds */
.eyebrow,.svc-card .learn-more,.project-cat,.delivery-card .tagline{color:var(--gold-text);}
.hero .eyebrow,.bg-navy .eyebrow,.area-section .eyebrow,.final-cta .eyebrow{color:var(--gold) !important;}

/* Keyboard focus */
.project-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
.lightbox-close:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:6px;}
.faq-question:focus-visible,.menu-toggle:focus-visible,.call-btn:focus-visible{outline:3px solid var(--gold-dark);outline-offset:2px;}
.lightbox-close{min-width:44px;min-height:44px;}
.call-btn{min-height:44px;min-width:44px;justify-content:center;}

/* Owner scenario cards (replace testimonials) */
.scenario-card{border-top:4px solid var(--gold);}
.scenario-card:nth-child(2){border-top-color:var(--navy);}
.scenario-card:nth-child(4){border-top-color:var(--navy);}
.scenario-type{font-size:.82rem;font-weight:700;color:var(--gold-text);margin-bottom:8px;}
.scenario-card h3{font-size:1.1rem;margin-bottom:8px;}
.scenario-card p{color:var(--text-muted);font-size:1rem;margin:0;}

/* Planning principle (replaces client quote) */
.principle-box .who{text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--gold-text);margin-bottom:8px;}
.principle-box p{font-style:normal;margin:0;}

/* Contact: compact info + What Happens Next */
.cs-contact-grid > .cs-side{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:24px;height:auto;min-width:0;}
.cs-side > .cs-info-card{height:auto;flex:0 0 auto;}
.cs-info-title,.cs-next-title{font-size:1.25rem;margin-bottom:18px;}
.cs-info-list{flex:0 0 auto;justify-content:flex-start;gap:18px;}
.cs-info-list .cs-lbl{display:block;font-size:.8rem;opacity:.8;}
.cs-info-list .cs-val{display:block;}
.cs-next-card{flex:1 1 auto;background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-sm);}
.cs-next-card .cs-next-title{color:#fff;}
.cs-next-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative;}
.cs-next-list::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:3px;background:rgba(201,150,44,.45);}
.cs-next-list li{display:flex;gap:14px;align-items:flex-start;position:relative;}
.next-num{flex-shrink:0;width:37px;height:37px;border-radius:50%;background:var(--gold);color:#2b1f04;font-weight:800;display:flex;align-items:center;justify-content:center;border:3px solid var(--navy);position:relative;z-index:1;}
.cs-next-list strong{display:block;font-family:var(--font-display);font-size:1rem;margin-bottom:2px;}
.cs-next-list span{color:rgba(255,255,255,.84);font-size:1rem;line-height:1.55;}
@media (min-width:901px){.cs-info-foot{display:none;}}
@media (max-width:900px){.cs-contact-grid > .cs-side{grid-column:1;grid-row:auto;}}

/* Demo form notice + preview status */
.form-demo-notice{display:flex;align-items:flex-start;gap:10px;background:rgba(201,150,44,.12);border:1px solid rgba(166,122,29,.45);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:18px;color:var(--charcoal);font-size:.96rem;line-height:1.5;}
.form-demo-notice svg{width:20px;height:20px;flex-shrink:0;margin-top:1px;color:var(--gold-dark);}
.form-demo-notice p{margin:0;}
.form-status{display:none;margin:14px 0 0;padding:10px 12px;border-radius:var(--radius);background:#F3F5F8;border:1px solid var(--border);
  color:var(--charcoal);font-size:.95rem;font-weight:600;text-align:center;}
.form-status.show{display:block;}

/* Mobile menu tap targets */
@media (max-width:1180px){
  .main-nav a{display:flex;align-items:center;min-height:44px;width:100%;}
}
/* Very small phones: header row fits without sideways scroll */
@media (max-width:400px){
  .header-inner{gap:6px;padding-left:10px;padding-right:10px;}
  .brand{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem;gap:7px;}
  .brand .mark{width:34px;height:34px;}
  .header-actions{gap:2px;}
  .form-card{padding:24px 18px;}
  .btn{padding:13px 18px;font-size:.95rem;}
}
@media (max-width:340px){.brand{font-size:.84rem;}}

/* =========================================================
   BEAUTIFY PASS — premium polish layer
   Palette unchanged (navy, gold, steel). Signature motif: the
   "structural line" — a gold rail that connects steps like a
   beam line on a drawing, used on the approach timeline and
   contact next-steps.
   ========================================================= */
:root{--ease:cubic-bezier(.2,.7,.2,1);--navy-tint:#F4F6F9;--gold-tint:#FBF6EA;}

/* ---- Typography: body copy 16px+ ------------------------- */
.section-head p{font-size:1.1rem;line-height:1.7;}
.svc-card p,.project-body p,.approach-item p,.delivery-card p,.safety-card p,.value-card p,
.scenario-card p,.faq-answer-inner,.cs-info-list .cs-val,.footer-grid ul li,.footer-grid p,
.trust-item,.area-card,.office-card .val,.field label,.checklist li{font-size:1rem;}
.hero .lede{font-size:1.1rem;line-height:1.7;}
.project-meta span{font-size:.94rem;}
.svc-card .learn-more{font-size:.98rem;}

/* ---- Motion: quick, subtle -------------------------------- */
.reveal{transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateY(18px);}
.grid > .reveal:nth-child(2),.approach-list > .reveal:nth-child(2){transition-delay:.06s;}
.grid > .reveal:nth-child(3),.approach-list > .reveal:nth-child(3){transition-delay:.12s;}
.grid > .reveal:nth-child(4),.approach-list > .reveal:nth-child(4){transition-delay:.18s;}
.approach-list > .reveal:nth-child(5){transition-delay:.24s;}
.btn{transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s,color .2s,border-color .2s;}
.btn:hover{transform:translateY(-2px);}

/* ---- Balanced rows: a short last row centres ------------- */
main .grid.grid-3,main .grid.grid-4{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;align-items:stretch;}
main .grid.grid-3 > *{flex:0 1 calc((100% - 52px)/3);min-width:0;height:auto;}
main .grid.grid-4 > *{flex:0 1 calc((100% - 78px)/4);min-width:0;height:auto;}
@media (max-width:960px){main .grid.grid-3 > *,main .grid.grid-4 > *{flex-basis:calc((100% - 26px)/2);}}
@media (max-width:640px){main .grid.grid-3 > *,main .grid.grid-4 > *{flex-basis:100%;}}

/* ---- Hero ------------------------------------------------- */
.hero-visual{border-radius:24px;}
.hero-visual::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none;}
.hero-grid > div:last-child{position:relative;}
.hero-visual{overflow:visible;}
.hero-visual img{border-radius:24px;}

/* ---- Trust strip ------------------------------------------ */
.trust-strip{background:#fff;padding:22px 0;}
.trust-strip .container{justify-content:center;gap:12px 30px;}
.trust-item{font-size:.97rem;}

/* ---- Shared card hover ------------------------------------ */
.svc-card,.delivery-card,.safety-card,.value-card,.review-card,.project-card,.approach-item{
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s,background .25s;}
.svc-card:hover,.delivery-card:hover,.safety-card:hover,.value-card:hover,.review-card:hover,.project-card:hover{
  transform:translateY(-5px);box-shadow:0 18px 38px rgba(16,27,45,.14);}

/* Service & market cards: gold rail + icon badge */
.svc-card{position:relative;overflow:hidden;}
.svc-card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--navy));transform:scaleX(.18);transform-origin:left;transition:transform .35s var(--ease);}
.svc-card:hover::before{transform:scaleX(1);}
.svc-icon{transition:background .25s,color .25s,transform .25s var(--ease);}
.svc-card:hover .svc-icon{background:var(--navy);color:var(--gold);transform:rotate(-4deg);}
.svc-card .learn-more{margin-top:auto;padding-top:12px;}

/* Delivery models: navy left rail + tinted header tagline */
.delivery-card{border-left:5px solid var(--navy);background:linear-gradient(180deg,#fff,var(--navy-tint));}
.delivery-card:nth-child(even){border-left-color:var(--gold);}
.delivery-card .tagline{background:var(--gold-tint);border-radius:10px;padding:8px 12px;font-style:normal;}

/* Safety cards: steel tint, navy icon badge */
.safety-card{background:linear-gradient(180deg,#fff 0%,var(--navy-tint) 100%);border-top:4px solid var(--navy);padding:30px 24px;}
.safety-icon{background:var(--navy);color:var(--gold);width:54px;height:54px;border-radius:14px;}
.safety-card:hover .safety-icon{transform:translateY(-2px);}
.safety-icon{transition:transform .25s var(--ease);}
.safety-card h3{font-size:1.08rem;}

/* Values: gold top rail */
.value-card{border-top:4px solid var(--gold);background:linear-gradient(180deg,var(--gold-tint),#fff 55%);}
.value-card:nth-child(even){border-top-color:var(--navy);background:linear-gradient(180deg,var(--navy-tint),#fff 55%);}

/* Project cards */
.project-card{display:flex;flex-direction:column;}
.project-body{flex:1;display:flex;flex-direction:column;padding:20px 22px 22px;}
.project-meta{margin-top:auto;}
.project-card img{transition:transform .5s var(--ease);}
.project-card:hover img{transform:scale(1.05);}
.project-card > img{display:block;}

/* Area / office cards */
.area-card{border:1px solid rgba(255,255,255,.1);transition:background .2s,border-color .2s;}
.area-card:hover{background:rgba(255,255,255,.12);border-color:rgba(201,150,44,.5);}
.office-card{border:1px solid rgba(255,255,255,.1);}

/* FAQ */
.faq-item{transition:box-shadow .2s,border-color .2s;}
.faq-item.open{border-color:var(--gold);box-shadow:0 10px 26px rgba(16,27,45,.08);}

/* ---- APPROACH: connected structural timeline --------------- */
.approach-list{position:relative;}
.approach-list::before{content:"";position:absolute;left:54px;top:40px;bottom:40px;width:4px;border-radius:4px;
  background:repeating-linear-gradient(180deg,var(--gold) 0 16px,rgba(201,150,44,.35) 16px 20px);z-index:0;}
.approach-item{position:relative;z-index:1;background:transparent;border:none;box-shadow:none;padding:0;grid-template-columns:84px 1fr;gap:18px;align-items:center;}
.approach-item .num{position:relative;z-index:2;margin-left:12px;width:60px;height:60px;border:4px solid #fff;box-shadow:0 0 0 2px var(--gold);font-size:1.1rem;}
.approach-item > div:last-child{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px 24px;box-shadow:var(--shadow-sm);
  border-left:4px solid var(--gold);transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.approach-item:hover > div:last-child{transform:translateX(4px);box-shadow:0 14px 30px rgba(16,27,45,.12);}
@media (max-width:600px){
  .approach-list::before{left:28px;}
  .approach-item{grid-template-columns:60px 1fr;gap:12px;align-items:start;}
  .approach-item .num{margin-left:0;width:56px;height:56px;margin-bottom:0;}
  .approach-item > div:last-child{padding:16px 18px;}
}

/* ---- Final CTA depth -------------------------------------- */
.final-cta{position:relative;overflow:hidden;}
.final-cta::before{content:"";position:absolute;right:-8%;bottom:-55%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,150,44,.18),transparent 65%);pointer-events:none;}
.final-cta .container{position:relative;}

/* Contact: info card gets a gold top rail for rhythm with form */
.cs-side > .cs-info-card{border-top:5px solid var(--gold);}
.cs-contact-grid > form{border-top:5px solid var(--navy);}
.hero-visual img{position:relative;z-index:1;}
.trust-strip .container{gap:10px 24px;}
.trust-item{font-size:.95rem;}
/* CTA pairs stack as equal full-width buttons on phones */
@media (max-width:480px){
  .hero-ctas{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-ctas .btn{width:100%;}
  .final-cta .hero-ctas{max-width:360px;margin-left:auto;margin-right:auto;}
}
.form-demo-notice{font-size:1rem;}
/* Trust strip: an intentional 3 + 3 layout when six items cannot fit one row */
@media (min-width:900px) and (max-width:1479px){
  .trust-strip .container{display:grid;grid-template-columns:repeat(3,max-content);justify-content:center;column-gap:44px;row-gap:12px;}
}

/* =========================================================
   RESPONSIVE QA PASS
   ========================================================= */
/* Service-area chips (8): keep 4 + 4 on tablets instead of 3 + 3 + 2 */
@media (min-width:601px) and (max-width:900px){.area-grid{grid-template-columns:repeat(4,1fr);}}

/* Technology photo: when stacked, cap its size so it doesn't dominate */
@media (max-width:900px){.tech-visual{max-width:520px;width:100%;margin:0 auto;}}

/* Approach timeline: keep the numbered circles and their ring inside the viewport */
@media (max-width:600px){.approach-list{padding-left:4px;}}

/* Top announcement bar: tighter on phones so it doesn't take 4 lines */
@media (max-width:480px){.trust-bar{font-size:.8rem;line-height:1.4;padding:7px 0;}}

/* Very small phones: the header mail icon duplicates the menu's Contact link;
   hiding it gives the brand name room so it isn't cut off mid-letter */
@media (max-width:360px){
  .header-actions .call-btn{display:none;}
  .brand{font-size:.9rem;text-overflow:clip;}
}

/* --- Header: single "Contact Us" CTA ----------------------
   Nav "Contact" link and the separate mail link were removed;
   the one yellow button is the contact entry on every width. */
@media (min-width:1181px){
  .main-nav{margin-left:auto;}
  .header-inner > .header-actions{margin-left:clamp(8px,.6vw,12px);}
}
/* Phones: the button is now the only header route to Contact, so keep it visible */
@media (max-width:600px){
  .header-actions .btn-primary.header-cta{display:inline-flex;padding:9px 14px;font-size:.86rem;white-space:nowrap;}
}
/* Narrow phones: brand name wraps onto two tidy lines instead of being cut off */
@media (max-width:460px){
  .brand{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.12;flex-shrink:1;min-width:0;font-size:.95rem;}
  .header-actions .btn-primary.header-cta{padding:9px 12px;font-size:.84rem;}
}
@media (max-width:340px){
  .brand{font-size:.88rem;gap:7px;}
  .header-actions .btn-primary.header-cta{padding:8px 10px;font-size:.8rem;}
}

/* =========================================================
   IMAGE-RICH PASS — split page banners and image/text rows
   Banner = navy text panel + photo panel (no text over faces).
   Phones: photo on top, text below.
   ========================================================= */
.pg-banner{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);background:var(--navy);color:#fff;
  min-height:clamp(320px,30vw,440px);position:relative;overflow:hidden;}
.pg-banner-shallow{min-height:clamp(260px,22vw,340px);}
.pg-banner-text{display:flex;flex-direction:column;justify-content:center;
  padding:44px clamp(24px,3vw,56px) 44px max(24px,calc((100vw - 1200px)/2 + 24px));}
.pg-banner-text > *{max-width:560px;}
.pg-banner .eyebrow{background:rgba(201,150,44,.22);color:var(--gold) !important;align-self:flex-start;}
.pg-banner h1{color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.12;margin:0 0 14px;}
.pg-banner p{color:rgba(255,255,255,.88);font-size:1.08rem;line-height:1.65;margin:0;}
.pg-banner-media{position:relative;min-height:100%;}
.pg-banner-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pg-banner-media::before{content:"";position:absolute;left:0;top:0;bottom:0;width:90px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--navy),rgba(16,27,45,0));}
@media (max-width:860px){
  .pg-banner,.pg-banner-shallow{grid-template-columns:1fr;min-height:0;}
  .pg-banner-media{order:-1;aspect-ratio:2/1;min-height:0;}
  .pg-banner-media::before{display:none;}
  .pg-banner-text{padding:28px 20px 34px;}
  .pg-banner-text > *{max-width:none;}
}
@media (max-width:480px){.pg-banner-media{aspect-ratio:16/10;}}
.pg-banner + .section{padding-top:64px;}

/* Image + text rows */
.img-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;}
.img-row-spaced{margin-top:72px;}
.img-row-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.img-row-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;}
.img-row-text h2{font-size:clamp(1.6rem,2.6vw,2.15rem);margin-bottom:12px;}
.img-row-text p{color:var(--text-muted);font-size:1.05rem;}
.img-row-list{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:10px;}
.img-row-list li{position:relative;padding-left:28px;font-weight:600;color:var(--navy);}
.img-row-list li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(201,150,44,.18);}
@media (max-width:900px){
  .img-row{grid-template-columns:1fr;}
  .img-row-flip .img-row-media{order:-1;}
  .img-row-media{max-width:640px;}
}
.bg-soft{background:#F3F5F8;}

/* Home: two scenario features with photos */
.scenario-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:40px;}
.scenario-feature{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.scenario-feature:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(16,27,45,.14);}
.scenario-feature-media{overflow:hidden;}
.scenario-feature-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;}
.scenario-feature-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;}
.scenario-feature-body h3{font-size:1.2rem;margin:4px 0 8px;}
.scenario-feature-body p{color:var(--text-muted);margin:0 0 14px;}
.scenario-feature-body .learn-more{margin-top:auto;font-weight:700;}
@media (max-width:768px){.scenario-feature-grid{grid-template-columns:1fr;}}

/* Approach: timeline beside a coordination photo on wide screens */
.approach-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:40px;align-items:start;}
.approach-layout .approach-list{max-width:none;margin:0;}
.approach-figure{margin:0;margin-top:clamp(160px,17vw,240px);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:#fff;}
.approach-figure img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;}
.approach-figure figcaption{padding:18px 22px 20px;color:var(--text-muted);font-size:1rem;line-height:1.6;}
.approach-figure figcaption strong{display:block;color:var(--navy);font-family:var(--font-display);font-size:1.05rem;margin-bottom:4px;}
@media (max-width:1024px){
  .approach-layout{grid-template-columns:1fr;}
  .approach-figure{margin-top:8px;max-width:640px;}
}

/* Contact: the form is first in the DOM; keep it tight under the banner on phones */
@media (max-width:900px){.pg-banner + .section:has(.cs-contact-grid){padding-top:28px;}}
@media (prefers-reduced-motion:reduce){.scenario-feature{transition:none;}.scenario-feature:hover{transform:none;}}

/* Plan-Build-Deliver animation theme (decorative; aria-hidden; pointer-events:none; paused off-screen; reduced-motion aware) */
.anim-paused,.anim-paused *{animation-play-state:paused!important}
.ibeam{display:block;position:relative;width:124px;height:14px;margin:14px auto 12px;pointer-events:none;background:linear-gradient(var(--gold),var(--gold)) top/100% 3px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom/100% 3px no-repeat,linear-gradient(rgba(201,150,44,.55),rgba(201,150,44,.55)) center/100% 6px no-repeat;border-radius:1px}
.ibeam i{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#f3dfae;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ibeam i:nth-child(1){left:12%}.ibeam i:nth-child(2){left:37%}.ibeam i:nth-child(3){left:63%}.ibeam i:nth-child(4){left:88%}
.ibeam.reveal{opacity:0;transform:scaleX(.05)}
.ibeam.reveal.in{opacity:1;transform:none;transition:opacity .3s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.ibeam.reveal i{transform:scale(0)}
.ibeam.reveal.in i{transform:none;transition:transform .35s cubic-bezier(.2,1.8,.4,1) .7s}
.ibeam.reveal.in i:nth-child(2){transition-delay:.8s}.ibeam.reveal.in i:nth-child(3){transition-delay:.9s}.ibeam.reveal.in i:nth-child(4){transition-delay:1s}
.build-host>.container{z-index:2}
.build-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.cta-build{position:absolute;bottom:0;right:max(16px,calc((100% - var(--maxw)) / 2 + 8px));width:clamp(150px,14vw,200px);height:auto;fill:none;stroke:rgba(201,150,44,.6);stroke-width:1.6;stroke-linecap:round}
.cta-build .ground{stroke-width:2}
.cta-build .floor path{stroke-dasharray:1;stroke-dashoffset:1}
.build-host.built .cta-build .floor path{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease calc(var(--f) * .32s)}
.cta-build .win{stroke:none;fill:#F4C66A;fill-opacity:0}
.build-host.built .cta-build .win{animation:win-light 7s ease-in-out infinite;animation-delay:calc(2.4s + var(--wd))}
@keyframes win-light{0%,100%{fill-opacity:0}20%,60%{fill-opacity:.55}}
html:not(.js) .cta-build .floor path{stroke-dashoffset:0}
.laser{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.laser i{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(255,60,48,0) 0,rgba(255,60,48,.28) 3px,rgba(255,96,80,1) 6px,rgba(255,60,48,.28) 9px,rgba(255,60,48,0) 13px) 0 0/100% 13px no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);animation:laser-sweep 10s ease-in-out .6s infinite}
@keyframes laser-sweep{0%{transform:translateY(10%);opacity:0}6%{opacity:1}26%{transform:translateY(80%)}42%{transform:translateY(54%)}52%,86%{transform:translateY(62%);opacity:1}94%,100%{transform:translateY(62%);opacity:0}}
.gantt{position:absolute;z-index:1;left:max(24px,calc((100% - var(--maxw)) / 2 + 24px));bottom:24px;width:min(420px,36%);display:grid;gap:5px;pointer-events:none;opacity:.6}
.g-row{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.07)}
.g-row i{display:block;height:100%;margin-left:var(--l);width:var(--w);border-radius:4px;background:linear-gradient(90deg,var(--gold),#e6bd63);transform-origin:left center;animation:g-grow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--gd)}
@keyframes g-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.g-today{position:absolute;top:-6px;bottom:-6px;left:0;right:0;animation:g-today 10s linear 1.6s infinite}.g-today::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;border-radius:2px;background:rgba(255,255,255,.75);box-shadow:0 0 8px rgba(255,255,255,.5)}
@keyframes g-today{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media (max-width:960px){.gantt{display:none}}
.pin{display:inline-block;position:relative;width:11px;height:15px;margin-right:8px;vertical-align:-2px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C5.4 0 0 5.2 0 11.7 0 20.5 12 32 12 32s12-11.5 12-20.3C24 5.2 18.6 0 12 0zm0 16.5a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C5.4 0 0 5.2 0 11.7 0 20.5 12 32 12 32s12-11.5 12-20.3C24 5.2 18.6 0 12 0zm0 16.5a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.area-card.reveal .pin{opacity:0;transform:translateY(-16px)}
.area-card.reveal.in .pin{opacity:1;transform:none;transition:opacity .2s ease .25s,transform .6s cubic-bezier(.3,1.7,.5,1) .25s}
.safety-card{position:relative;overflow:hidden;border-top-width:0!important}
.hazard{position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(-45deg,#F2B705 0 10px,#1c1d20 10px 20px);background-size:28.28px 28.28px;transform-origin:left center}
.safety-card.reveal .hazard{transform:scaleX(0)}
.safety-card.reveal.in .hazard{transform:none;transition:transform .7s cubic-bezier(.2,.8,.2,1) .2s}
.safety-card:hover .hazard{animation:hazard-march .9s linear infinite}
@keyframes hazard-march{to{background-position:28.28px 0}}
.project-card{position:relative}
.bp-tint{position:absolute;top:0;left:0;right:0;aspect-ratio:1/.8;z-index:2;pointer-events:none;background:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px) 0 0/22px 22px,rgba(20,56,118,.7)}
.project-card.reveal.in .bp-tint{opacity:0;transition:opacity 1.2s ease .35s}
.project-card.reveal:not(.in)>img{filter:grayscale(1)}
.project-card>img{transition:transform .5s var(--ease),filter 1.2s ease .35s}
html:not(.js) .bp-tint{display:none}
.tech-visual{position:relative;overflow:hidden}
.scan{position:absolute;left:0;right:0;top:0;height:28%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(201,150,44,0),rgba(201,150,44,.22) 80%,rgba(255,226,150,.95) 100%);transform:translateY(-110%);animation:scan 7s ease-in-out 1s infinite}
@keyframes scan{0%{transform:translateY(-110%)}45%,100%{transform:translateY(360%)}}
.beam-fill{position:absolute;left:54px;top:40px;bottom:40px;width:4px;border-radius:4px;z-index:0;background:linear-gradient(180deg,var(--gold),#e6bd63);box-shadow:0 0 10px rgba(201,150,44,.45);transform-origin:top center;transform:scaleY(0)}
@media (max-width:600px){.beam-fill{left:28px}}
.approach-item.reached .num{box-shadow:0 0 0 2px var(--gold),0 0 0 8px rgba(201,150,44,.22);animation:num-pop .45s cubic-bezier(.2,1.6,.4,1)}
.approach-item .num{transition:box-shadow .35s ease}
@keyframes num-pop{0%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (max-width:900px){.cta-build{width:130px;opacity:.6}}
@media (max-width:640px){.build-layer{display:none}}
@media (prefers-reduced-motion:reduce){.laser,.scan,.g-today{display:none}.cta-build .floor path{stroke-dashoffset:0}.cta-build .win{fill-opacity:.4}.ibeam.reveal,.ibeam.reveal i,.area-card.reveal .pin,.safety-card.reveal .hazard{opacity:1;transform:none}.bp-tint{display:none}.project-card.reveal>img{filter:none}}
.pin{pointer-events:none}