/* ==========================================================================
   NexaCold — Design Tokens
   ========================================================================== */
:root{
  --navy-950:#071324;
  --navy-900:#0a1a2f;
  --navy-800:#0f2942;
  --navy-700:#153a63;
  --blue-500:#2f9bff;
  --blue-400:#4facfe;
  --ice-300:#7fdbff;
  --ice-100:#e6f6ff;
  --white:#ffffff;
  --gray-50:#f4f8fb;
  --gray-100:#e9eff4;
  --gray-400:#8a97a5;
  --gray-600:#546472;
  --gray-800:#1f2b36;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:24px;

  --shadow-sm: 0 2px 8px rgba(10,26,47,0.08);
  --shadow-md: 0 12px 32px rgba(10,26,47,0.12);
  --shadow-lg: 0 24px 60px rgba(10,26,47,0.18);

  --container-w: 1200px;
  --header-h: 80px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  color:var(--gray-800);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;font-size:1rem;}
h1,h2,h3,h4{line-height:1.2;font-weight:700;color:var(--navy-900);}
.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 24px;
}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--blue-500);color:#fff;padding:10px 16px;z-index:1000;
}
.skip-link:focus{left:8px;top:8px;}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-weight:600;font-size:0.98rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--blue-500);color:#fff;box-shadow:0 8px 20px rgba(47,155,255,0.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(47,155,255,0.45);}
.btn-ghost{background:rgba(255,255,255,0.08);color:#fff;border:1.5px solid rgba(255,255,255,0.35);}
.btn-ghost:hover{background:rgba(255,255,255,0.16);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--blue-500);border:1.5px solid var(--blue-500);margin-top:8px;}
.btn-outline:hover{background:var(--blue-500);color:#fff;transform:translateY(-2px);}
.btn-small{padding:10px 20px;font-size:0.9rem;}
.btn-block{width:100%;}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(10,26,47,0.0);
  transition:background .25s ease, box-shadow .25s ease, height .25s ease;
}
.site-header.scrolled{
  background:rgba(7,19,36,0.96);
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  height:68px;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
}
.logo{display:flex;align-items:center;color:#fff;flex-shrink:0;}
/* The logo artwork is a white-knockout PNG, sized by height so it keeps its
   aspect ratio, and shared by the header and the footer. 52px keeps the
   strapline under the wordmark readable; below that it turns to mush.
   flex:none, or the header's flex row squeezes the width while the height
   stays put and the artwork distorts. */
.logo img{display:block;height:52px;width:auto;flex:none;}
.accent{color:var(--blue-400);}

.main-nav ul{display:flex;gap:32px;}
/* The header already has a "Contact Us" CTA button, so hide the duplicate nav
   link at desktop widths; it reappears on mobile where that button is hidden. */
@media (min-width:861px){
  .contact-nav-item{display:none;}
}
.nav-link{
  color:rgba(255,255,255,0.85);font-weight:600;font-size:0.96rem;position:relative;padding:6px 0;
  transition:color .2s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue-400);
  transition:width .2s ease;
}
.nav-link:hover,.nav-link.active{color:#fff;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}

.header-actions{display:flex;align-items:center;gap:20px;}
.header-phone{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:0.95rem;}
.header-phone span{white-space:nowrap;}
.header-phone svg{width:18px;height:18px;color:var(--ice-300);}

.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;z-index:901;}
.menu-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease, opacity .25s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  /* Not a full 100vh: at laptop heights the copy is ~480px tall, so a
     full-viewport hero left ~260px of dead space split above and below it.
     Capping the height trims that slack (and lets the next section peek). */
  min-height:clamp(600px, 84vh, 900px);
  display:flex;align-items:center;
  padding-top:var(--header-h);
  /* Reserves exactly the band the absolutely positioned scroll cue sits in
     (28px offset + 44px tall) plus 12px of clearance. Without it, a hero taller
     than the viewport pins the cue under the stats row and it collides with the
     temperature stat. .hero-inner carries no bottom padding of its own so this
     is the whole gap below the stats. */
  padding-bottom:84px;
  background:var(--navy-950);
  color:#fff;
  overflow:hidden;
}
.hero-photo-bg{position:absolute;inset:0;z-index:0;}
.hero-photo-bg img{width:100%;height:100%;object-fit:cover;object-position:center center;}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(3,17,29,0.96) 0%, rgba(3,19,32,0.74) 39%, rgba(3,19,32,0.1) 72%);
}

.hero-inner{position:relative;z-index:2;padding-top:32px;padding-bottom:0;}
/* Wider than the headline column so the three stats sit on one row; the
   headline and lead keep their own narrower measures below. */
.hero-copy{max-width:720px;}
.eyebrow{display:inline-block;color:var(--ice-300);font-weight:700;font-size:0.85rem;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:18px;}
.hero h1{font-size:clamp(2.6rem,5vw,4rem);color:#fff;margin-bottom:20px;letter-spacing:-0.01em;max-width:640px;}
.hero-lead{font-size:1.1rem;color:rgba(255,255,255,0.82);max-width:560px;margin-bottom:28px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}
.hero-ctas svg{width:18px;height:18px;}

.hero-stats{display:flex;flex-wrap:wrap;gap:32px;margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.18);}
.stat-item{display:flex;flex-direction:column;gap:4px;}
.stat-value{font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:800;color:#fff;letter-spacing:-0.01em;}
.stat-label{font-size:0.88rem;color:rgba(255,255,255,0.7);}

.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  width:28px;height:44px;border:2px solid rgba(255,255,255,0.4);border-radius:16px;
  display:flex;justify-content:center;padding-top:8px;z-index:1;
}
.scroll-cue span{width:4px;height:8px;background:var(--ice-300);border-radius:2px;animation:scrollcue 1.6s ease-in-out infinite;}
@keyframes scrollcue{0%{opacity:1;transform:translateY(0);}70%{opacity:0;transform:translateY(14px);}100%{opacity:0;}}

/* ==========================================================================
   Section basics
   ========================================================================== */
.section{padding:96px 0;}
section[id]{scroll-margin-top:var(--header-h);}
.section-tag{
  display:inline-block;color:var(--blue-500);font-weight:700;font-size:0.82rem;
  letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px;
}
/* 880px so the section leads sit on one line instead of wrapping a stub onto a
   second: the longest of them measures ~790px, plus headroom for macOS font
   metrics, which run wider than Windows. Sections whose lead needs more carry
   their own cap below. */
.section-head{max-width:880px;margin-bottom:56px;}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:14px;}
.section-head p{color:var(--gray-600);font-size:1.05rem;}
.section-head.light .section-tag{color:var(--ice-300);}
.section-head.light h2{color:#fff;}
.section-head.light p{color:rgba(255,255,255,0.75);}

/* About */
.about{background:var(--gray-50);}
.about h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:20px;}
/* 1040px so the opening sentence stays on one line (it needs ~960px). The
   second paragraph is too long for any sensible measure, so text-wrap keeps its
   two lines even instead of leaving a stub. */
.about-copy{max-width:1040px;margin-bottom:48px;}
.about-copy p{color:var(--gray-600);margin-bottom:16px;font-size:1.03rem;text-wrap:pretty;}
.about-copy p:first-child{color:var(--gray-800);font-size:1.12rem;}

/* Services (End-to-end support) */
.services-dark{background:var(--navy-950);color:#fff;}
.eto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.eto-card{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-md);padding:28px 24px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.eto-card:hover{transform:translateY(-6px);background:rgba(255,255,255,0.08);border-color:rgba(127,219,255,0.35);}
.eto-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.eto-card-top svg{width:28px;height:28px;color:var(--ice-300);}
.eto-num{font-size:0.85rem;font-weight:700;color:rgba(255,255,255,0.4);letter-spacing:0.06em;}
.eto-card h3{color:#fff;font-size:1.08rem;margin-bottom:10px;}
.eto-card p{color:rgba(255,255,255,0.7);font-size:0.94rem;}
.section-note{color:rgba(255,255,255,0.6);font-size:0.95rem;margin-top:32px;}

/* Industries / products */
.industries{background:var(--gray-50);}
/* 1152px (the container's own inner width at 1200px+) so the products lead
   stays on one line: it needs ~1065px, more than the global cap allows. */
.industries .section-head{max-width:1152px;}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.industry-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.industry-card{
  background:#fff;border-radius:var(--radius-md);padding:32px 24px;text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;
}
.industry-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.industry-card svg{width:40px;height:40px;color:var(--blue-500);margin:0 auto 16px;}
.industry-card h3{font-size:1.05rem;margin-bottom:8px;}
.industry-card p{color:var(--gray-600);font-size:0.9rem;}

/* Process step flow */
.step-flow{
  --marker-size:52px;--flow-gap:32px;--line-inset:40px;
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--flow-gap);
}
.step-item{position:relative;text-align:center;padding:0 6px;}
.step-item:not(:last-child)::before{
  content:"";position:absolute;z-index:0;
  top:calc(var(--marker-size) / 2 - 1px);
  left:calc(50% + var(--line-inset));
  right:calc(-50% - var(--flow-gap) + var(--line-inset));
  height:2px;background:var(--gray-100);
}
.step-num{
  position:relative;z-index:1;width:var(--marker-size);height:var(--marker-size);
  margin:0 auto 18px;border-radius:50%;background:var(--blue-500);color:#fff;
  font-size:1.15rem;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.step-item h3{font-size:1.08rem;margin-bottom:8px;}
.step-item p{color:var(--gray-600);font-size:0.92rem;}

.chip-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:64px;}
.chip{
  display:inline-flex;align-items:center;background:#fff;border:1px solid var(--gray-100);
  border-radius:999px;padding:10px 22px;font-weight:600;font-size:0.92rem;
  color:var(--navy-900);box-shadow:var(--shadow-sm);
}
.subsection-head{margin-bottom:28px;}
.subsection-head h3{font-size:clamp(1.4rem,2.4vw,1.8rem);}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{background:linear-gradient(180deg, var(--navy-900), var(--navy-950));color:#fff;}
/* Quote request form */
/* Tighter than the global section-head gap: the card carries its own 32px of
   padding, so the usual 56px leaves the heading floating away from the form. */
/* 800px so the heading and the lead each stay on one line: they need 695px and
   705px at their largest font sizes, ~750px with macOS font metrics. Still
   narrower than the global cap so the form below stays the wider element. */
.contact .section-head{margin-bottom:32px;max-width:800px;}
.quote-form{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-md);padding:32px;margin:0 0 48px;
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px;}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;}
.field-wide{grid-column:1 / -1;}
.field label{font-size:0.88rem;font-weight:600;color:rgba(255,255,255,0.82);}
.req{color:var(--blue-400);}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);color:#fff;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field textarea{resize:vertical;min-height:110px;line-height:1.5;}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,0.4);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-400);background:rgba(255,255,255,0.1);
  box-shadow:0 0 0 3px rgba(47,155,255,0.25);
}
.field input:user-invalid,.field select:user-invalid{border-color:#ff9a9a;}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fdbff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px;
}
.field select option{color:var(--navy-900);background:#fff;}
.field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:0.55;cursor:pointer;}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;}
.form-note{font-size:0.85rem;color:rgba(255,255,255,0.55);}
.form-status{display:none;margin-top:18px;font-size:0.92rem;color:var(--ice-300);line-height:1.5;}
.form-status.visible{display:block;}
.contact-info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px;}
.info-card{
  display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-md);padding:24px;
}
.info-card svg{width:24px;height:24px;color:var(--ice-300);flex-shrink:0;margin-top:2px;}
.info-card h4{color:#fff;font-size:1rem;margin-bottom:6px;}
.info-card p{color:rgba(255,255,255,0.75);font-size:0.94rem;line-height:1.5;}
.info-card a:hover{color:var(--ice-300);}
.map-embed{border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(255,255,255,0.1);height:220px;}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(0.1) contrast(1.05);}
.map-embed-wide{height:380px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,0.7);padding:64px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.3fr 0.8fr 0.8fr 1fr;gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.08);}
.footer-brand p{margin-top:14px;font-size:0.92rem;max-width:280px;color:rgba(255,255,255,0.55);}
.footer-col h5{color:#fff;font-size:0.95rem;margin-bottom:16px;letter-spacing:0.03em;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;font-size:0.92rem;}
.footer-col a:hover{color:var(--ice-300);}
.footer-bottom{padding:24px 0;text-align:center;font-size:0.85rem;color:rgba(255,255,255,0.45);}

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top{
  position:fixed;bottom:28px;right:28px;width:46px;height:46px;border-radius:50%;
  background:var(--blue-500);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;z-index:800;
}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top svg{width:20px;height:20px;}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.gallery-item{
  position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;
  border:none;padding:0;cursor:pointer;background:var(--navy-800);display:block;width:100%;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;filter:saturate(1.06) contrast(1.02);}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,19,36,0) 55%, rgba(7,19,36,0.65) 100%);
  opacity:0;transition:opacity .25s ease;
}
.gallery-item:hover::after{opacity:1;}
.gallery-caption{
  position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-weight:600;font-size:0.92rem;
  opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease;text-align:left;z-index:1;
}
.gallery-item:hover .gallery-caption{opacity:1;transform:translateY(0);}
.gallery-zoom-icon{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  background:rgba(10,26,47,0.6);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease;z-index:1;
}
.gallery-item:hover .gallery-zoom-icon{opacity:1;}
.gallery-zoom-icon svg{width:16px;height:16px;}
/* 1040px so the gallery intro sentence stays on one line: it needs 939px here
   and ~995px with macOS font metrics. */
.gallery-section .section-head{max-width:1040px;}
.gallery-note{color:var(--gray-600);font-size:0.95rem;margin-top:28px;text-align:center;}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(4,10,20,0.94);z-index:2000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;
  opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s ease;padding:24px;
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox-img{max-width:min(90vw,900px);max-height:70vh;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);object-fit:contain;}
.lightbox-caption{color:rgba(255,255,255,0.85);font-size:0.95rem;text-align:center;}
.lightbox-close{
  position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;
}
.lightbox-close:hover{background:rgba(255,255,255,0.2);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,0.1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;
}
.lightbox-nav:hover{background:rgba(255,255,255,0.2);}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}

/* ==========================================================================
   Scroll-reveal
   ========================================================================== */
[data-animate]{opacity:0;transition:opacity .7s ease, transform .7s ease;}
[data-animate="up"]{transform:translateY(28px);}
[data-animate="fade"]{transform:translateY(0) scale(0.98);}
[data-animate].in-view{opacity:1;transform:translateY(0) scale(1);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  /* Slightly smaller logo and tighter nav so the full nav, the call icon and
     the CTA still clear the header at the 861px end of this range. */
  .logo img{height:44px;}
  .main-nav ul{gap:24px;}
  .industry-grid,.industry-grid.cols-3,.eto-grid{grid-template-columns:repeat(2,1fr);}
  .contact-info-row{grid-template-columns:repeat(2,1fr);}
  .hero-overlay{background:linear-gradient(90deg, rgba(3,17,29,0.96) 0%, rgba(3,19,32,0.86) 45%, rgba(3,19,32,0.55) 100%);}
  .hero-stats{gap:28px;}
}

/* Between 861px and 1000px the nav, the phone number and the CTA together need
   more room than the header has, which squeezed the number onto two lines. Keep
   the call icon as a tap target and drop the digits until they fit. */
@media (max-width: 1000px){
  .header-phone span{display:none;}
  .header-phone{padding:8px;}
  .header-phone svg{width:20px;height:20px;}
}

@media (max-width: 860px){
  .main-nav{
    position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
    background:var(--navy-950);
    display:flex;align-items:flex-start;justify-content:center;padding-top:48px;
    visibility:hidden;pointer-events:none;transform:translateY(-16px);
    transition:transform .25s ease, visibility .25s ease;z-index:899;
  }
  .main-nav.open{visibility:visible;pointer-events:auto;transform:translateY(0);}
  .main-nav ul{flex-direction:column;gap:28px;text-align:center;width:100%;}
  .nav-link{font-size:1.3rem;}
  .header-phone{display:none;}
  .menu-toggle{display:flex;}
  .header-actions .btn-small{display:none;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:40px;}

  /* Three steps side by side leave only ~195px each here, which wraps the step
     headings; the vertical list reads better once the other grids are 2-up. */
  .step-flow{--flow-gap:28px;grid-template-columns:1fr;}
  .step-item{
    display:grid;grid-template-columns:var(--marker-size) 1fr;
    column-gap:18px;align-content:start;text-align:left;padding:0;
  }
  .step-num{grid-column:1;grid-row:1 / span 2;margin:0;}
  .step-item h3{grid-column:2;grid-row:1;margin-top:2px;}
  .step-item p{grid-column:2;grid-row:2;}
  .step-item:not(:last-child)::before{
    top:calc(var(--marker-size) + 8px);left:calc(var(--marker-size) / 2 - 1px);
    right:auto;bottom:-20px;width:2px;height:auto;
  }
}

/* Laptop-height windows (a 14" MacBook in Safari leaves ~910px, and macOS font
   metrics run the hero ~80px taller than Windows): tighten the hero's vertical
   rhythm so the stats row and the scroll cue both fit inside 100vh. */
@media (min-width: 641px) and (max-height: 940px){
  .hero-inner{padding-top:12px;}
  .hero h1{margin-bottom:16px;}
  .hero-lead{margin-bottom:22px;}
  .hero-stats{margin-top:32px;padding-top:24px;}
  .eyebrow{margin-bottom:12px;}
}

@media (max-width: 640px){
  .section{padding:64px 0;}
  .hero{min-height:auto;padding-bottom:56px;}
  .hero-inner{padding-top:48px;}
  /* The hero is taller than a phone screen, so the cue would sit below the
     fold anyway — hiding it also keeps it off the stacked stats. */
  .scroll-cue{display:none;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-stats{flex-direction:column;gap:20px;margin-top:36px;padding-top:28px;}
  .industry-grid,.industry-grid.cols-3,.eto-grid{grid-template-columns:1fr;}
  .contact-info-row{grid-template-columns:1fr;}
  .contact .section-head{margin-bottom:24px;}
  .quote-form{padding:22px 18px;}
  .form-grid{grid-template-columns:1fr;gap:18px;}
  .form-foot{margin-top:22px;gap:14px;}
  .form-foot .btn{width:100%;justify-content:center;}
  .map-embed-wide{height:260px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .container{padding:0 18px;}
  .gallery-grid{grid-template-columns:1fr;}
  .chip-row{margin-bottom:48px;}
  .lightbox-nav{width:40px;height:40px;font-size:1.4rem;}
  .lightbox-prev{left:10px;}
  .lightbox-next{right:10px;}
  .lightbox-close{top:12px;right:12px;}
}