:root{
  --blue:#002ea0; --blue-deep:#001a5e; --ink:#0d1733; --paper:#ffffff; --mist:#eef1f8;
  --line:#d3d9e8; --muted:#4a5572; --yellow:#ffc629; --on-blue:#ffffff;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8ecf7; --paper:#0c1430; --mist:#121c3f; --line:#26335e; --muted:#a6b0cc; --blue-deep:#000f3a;
  }
}
:root[data-theme="dark"]{
  --ink:#e8ecf7; --paper:#0c1430; --mist:#121c3f; --line:#26335e; --muted:#a6b0cc; --blue-deep:#000f3a;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 92px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-family:var(--display);line-height:1.02;margin:0;letter-spacing:.005em}
h2{font-size:clamp(2rem,4vw,2.9rem);font-weight:700}
h3{font-size:1.45rem;font-weight:700}
p{margin:0 0 1em;max-width:66ch}

/* utility bar */
.util{background:var(--blue-deep);color:#cdd6f2;font-size:.9rem}
.util .wrap{display:flex;justify-content:space-between;gap:1rem;padding-top:.45rem;padding-bottom:.45rem;flex-wrap:wrap}
.util a{color:#fff;text-decoration:none;font-weight:600}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#fff;color:#002ea0;border-bottom:4px solid var(--blue);box-shadow:0 2px 10px rgba(0,20,80,.08)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:block;line-height:0}
.logo-img{width:205px;height:auto;display:block}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;align-items:center}
nav a,nav button.menu-btn{font-family:var(--display);font-size:1.15rem;font-weight:600;color:#002ea0;text-decoration:none;background:none;border:0;padding:.6rem .8rem;cursor:pointer;display:block}
nav a:hover,nav button.menu-btn:hover{color:#001a5e;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:6px}
.has-drop{position:relative}
.drop{position:absolute;left:0;top:100%;background:#fff;color:#0d1733;min-width:270px;padding:.6rem;border-top:4px solid var(--yellow);box-shadow:0 14px 30px rgba(0,20,80,.25);display:none}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{color:#0d1733;font-family:var(--body);font-size:1rem;font-weight:500;padding:.45rem .6rem}
.drop a:hover{background:#eef1f8;color:#002ea0;text-decoration:none}
nav .cta{background:#002ea0;color:#fff;margin-left:.5rem;padding:.55rem 1rem}
nav .cta:hover{color:#fff;background:#001a5e;text-decoration:none}
.burger{display:none;background:none;border:2px solid #002ea0;color:#002ea0;font:600 1rem var(--display);padding:.35rem .7rem;cursor:pointer}
@media (max-width:900px){
  .burger{display:block}
  nav{position:absolute;left:0;right:0;top:84px;background:#fff;border-bottom:4px solid var(--blue);display:none;padding:.5rem 1.25rem 1rem;max-height:calc(100vh - 120px);overflow:auto}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch}
  .drop{position:static;display:block;box-shadow:none;border:0;background:transparent;padding:0 0 .4rem .8rem;min-width:0}
  .drop a{color:#4a5572}
  nav .cta{margin:.5rem 0 0;text-align:center}
}
@media (max-width:480px){.logo-img{width:165px}}
.foot-logo{width:200px;height:75px;display:block;margin-bottom:1rem}

/* hero */
.hero{
  /* Drop the photo in here: --hero-image:url("../assets/hero.jpg"); */
  --hero-image:none;
  --hero-scrim:linear-gradient(104deg,rgba(0,15,58,.94) 0%,rgba(0,26,94,.86) 38%,rgba(0,46,160,.60) 72%,rgba(0,46,160,.42) 100%);
  background-color:var(--blue);
  background-image:var(--hero-scrim),var(--hero-image);
  background-size:cover,cover;
  background-position:center,center center;
  background-repeat:no-repeat,no-repeat;
  color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.09;
  background:repeating-linear-gradient(115deg,#fff 0 2px,transparent 2px 28px),repeating-linear-gradient(65deg,#fff 0 2px,transparent 2px 28px)}
.hero .wrap{position:relative;padding-top:4.5rem;padding-bottom:5rem}
.hero h1{
  font-size:clamp(2.6rem,5.6vw,4.25rem);
  font-weight:800;
  line-height:.93;
  letter-spacing:-.018em;
  text-wrap:balance;
  max-width:19ch;
  text-shadow:0 1px 2px rgba(0,10,40,.35),0 6px 30px rgba(0,10,40,.35)}
.hero .lede{font-size:1.2rem;color:#e2e8fb;margin-top:1.4rem;max-width:34ch;text-shadow:0 1px 10px rgba(0,10,40,.45)}
.tagline{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--yellow);margin-top:1.5rem;letter-spacing:.01em;text-shadow:0 1px 10px rgba(0,10,40,.5)}
.hero-actions{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.2rem;padding:.75rem 1.4rem;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-yellow{background:var(--yellow);color:var(--blue-deep)}
.btn-yellow:hover{background:#ffd65c}
.btn-ghost{border-color:#fff;color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-deep)}

/* filter label sizer */
.label{background:#fff;color:#0d1733;border:3px solid #0d1733;box-shadow:12px 12px 0 var(--yellow);max-width:560px;width:100%;margin:0 auto;text-align:left}
.label-top{background:#0d1733;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;font-family:var(--display);font-weight:700;font-size:1.1rem}
.label-body{padding:1.2rem 1.2rem 1.4rem}
.label-body .hint{font-size:.92rem;color:#4a5572;margin-bottom:.8rem}
.dims{display:grid;grid-template-columns:1fr auto 1fr auto .8fr;align-items:end;gap:.35rem}
.dims label,.opts label{display:flex;flex-direction:column;font-size:.85rem;font-weight:600;color:#4a5572}
.dims input,.dims select{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.3rem);width:100%;border:0;border-bottom:3px solid #0d1733;padding:0;background:transparent;color:#002ea0;text-align:center;appearance:none;-webkit-appearance:none;border-radius:0}
.dims .x{font-family:var(--display);font-size:2rem;font-weight:600;padding-bottom:.4rem;color:#0d1733}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.1rem}
.opts select,.opts input{font:600 1.1rem var(--body);padding:.5rem;border:2px solid #0d1733;background:#fff;color:#0d1733;border-radius:0;width:100%}
.actual{margin-top:1rem;padding:.7rem .8rem;background:#eef1f8;font-size:.95rem;color:#0d1733}
.actual strong{font-family:var(--display);font-size:1.25rem}
.label .btn{width:100%;margin-top:1rem;text-align:center}

/* service trio */

/* contact slide - live text so the number and address are actually tappable */
.banner-contact .banner-copy{z-index:2}
.contact-rows{margin:1.3rem 0 0;display:grid;gap:.45rem}
.contact-rows > div{display:grid;grid-template-columns:5.2rem 1fr;align-items:baseline;gap:.6rem}
.contact-rows dt{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--yellow);margin:0}
.contact-rows dd{margin:0;font-family:var(--body);font-weight:600;font-size:clamp(.95rem,1.15vw,1.12rem);color:#fff}
.contact-rows a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.contact-rows a:hover{color:var(--yellow)}
.contact-rows a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.banner-contact .hero-actions{margin-top:1.5rem}
@media (max-width:700px){
  .contact-rows > div{grid-template-columns:1fr;gap:0}
  .contact-rows dt{font-size:.7rem}
  .banner-contact .hero-actions{margin-top:1rem}
}

/* header nav */
.mainnav{display:flex;align-items:center;gap:1.3rem}
.mainnav a{font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:.01em;color:var(--ink);text-decoration:none}
.mainnav a:hover{color:var(--blue)}
.mainnav a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.mainnav a[aria-current="page"]{color:var(--blue)}
.mainnav .nav-cta{background:var(--blue);color:#fff;padding:.55rem 1.15rem}
.mainnav .nav-cta:hover,.mainnav .nav-cta[aria-current="page"]{background:var(--blue-deep);color:#fff}
@media (max-width:480px){
  .mainnav{gap:.7rem}
  .mainnav a{font-size:.95rem}
  .mainnav .nav-cta{padding:.45rem .75rem}
}
/* single-panel hero on the contact page - no carousel controls */
.page-hero .banner-slide{position:relative;opacity:1;z-index:auto}

/* page-hero mobile: the contact panel carries real text, so below 700px the
   hero must size to that text instead of to the artwork aspect ratio. Locked
   to 2000/698 it collapses to ~131px and clips the headline and buttons. */
@media (max-width:700px){
  .page-hero .banner-viewport{aspect-ratio:auto;height:auto}
  .page-hero .banner-slide{height:auto}
  /* cover shows only ~1/3 of the artwork width at phone size; centred that
     lands on the dark panel and the fade, so anchor it to the photo side */
  .page-hero .banner-contact > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:12% center;z-index:0}
  .page-hero .banner-contact::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(8,22,54,.93) 0%,rgba(8,22,54,.88) 100%)}
  .page-hero .banner-copy{position:relative;inset:auto;z-index:2;display:block}
  .page-hero .banner-copy .wrap{padding-block:2.4rem}
  .page-hero .banner-title{max-width:100%}
}
/* rotating banner */
.banner{position:relative;background:var(--blue-deep);overflow:hidden}
.banner-viewport{position:relative;aspect-ratio:2000/698}
/* isolation:isolate is load-bearing. opacity:1 does NOT create a stacking
   context, so without it the outgoing slide s .banner-copy (z-index 2) escapes
   and paints ON TOP of the incoming slide (z-index 1) - the old headline flashes
   over the new one on every rotation. */
.banner-slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;pointer-events:none;isolation:isolate;transition:opacity .6s ease}
.banner-slide.is-active{opacity:1;z-index:1;pointer-events:auto}
.banner-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* slide 1 is built in HTML rather than baked into the image, so its type can
   match slide 2: non-condensed Barlow, and the same soft blue gradient
   transition over the photo instead of a hard yellow diagonal. */
.banner-built{background:var(--blue-deep)}
.banner-built{background-color:var(--blue);background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 28px),repeating-linear-gradient(65deg,rgba(255,255,255,.07) 0 2px,transparent 2px 28px)}
.banner-built .banner-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* No CSS wash on desktop: assets/banner-1-photo.jpg already carries the blue
   panel and its soft diagonal falloff, painted in so the filters stay uncovered. */
.banner-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.banner-copy .wrap{width:100%}
.banner-eyebrow{font-family:var(--body);font-weight:700;font-size:clamp(.82rem,1.05vw,1.05rem);letter-spacing:.02em;color:var(--yellow);margin:0 0 .85rem}
/* Montserrat to match slide 2s geometric lettering (Barlow is a grotesque) */
.banner-title{font-family:"Montserrat",var(--body),sans-serif;font-weight:800;font-size:clamp(1.75rem,2.9vw,2.8rem);line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0;max-width:15ch;text-shadow:0 2px 20px rgba(0,10,40,.45)}
/* rule measured off slide 2: rgb(0,154,246), ~8px tall, solid then fading */
.banner-rule{height:6px;width:min(330px,60%);margin-top:1.05rem;background:linear-gradient(90deg,rgb(0,154,246) 0%,rgb(0,154,246) 62%,rgba(0,154,246,0) 100%)}
.banner-sub{font-family:var(--body);font-weight:500;font-size:clamp(.9rem,1.1vw,1.12rem);line-height:1.5;color:#dde4f8;margin:1.25rem 0 0;text-shadow:0 1px 12px rgba(0,10,40,.5)}
.banner-route{display:flex;align-items:center;gap:.7rem;margin-top:1.15rem;color:var(--yellow);font-family:var(--body);font-weight:600;font-size:clamp(.78rem,.95vw,.95rem)}
.banner-route .route-ico{width:22px;height:18px;flex:none}
.banner-route .route-line{width:clamp(70px,14vw,190px);height:8px;flex:none}
@media (max-width:700px){
  /* the baked-in blue panel gets cropped away at phone widths, so the wash has
     to come back here - full declarations, since the desktop rule is gone */
  .banner-built::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(176deg,rgba(0,22,80,.93) 0%,rgba(0,30,110,.90) 55%,rgba(0,48,160,.84) 100%)}
  .banner-title{max-width:100%}
  .banner-route{display:none}
}

.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:64px;border:0;padding:0;background:rgba(0,26,94,.5);color:#fff;font:400 2rem/1 var(--display);cursor:pointer}
.banner-arrow:hover{background:rgba(0,26,94,.85)}
.banner-arrow:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.banner-arrow.prev{left:0}
.banner-arrow.next{right:0}
.banner-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:.6rem}
.banner-dots button{width:34px;height:6px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer}
.banner-dots button.is-active{background:var(--yellow)}
.banner-dots button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.banner-actions{background:var(--blue);color:#fff}
.banner-actions .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;padding-top:1.1rem;padding-bottom:1.1rem}
.banner-actions .tagline{margin:0}
.banner-actions .hero-actions{margin:0}
@media (prefers-reduced-motion:reduce){.banner-slide{transition:none}}
@media (max-width:700px){
  /* No phone-specific crop. Both slides are finished artwork with the wording
     baked in, so cropping to a fixed height hid the right-hand side of the
     banner. The container keeps the artwork aspect ratio at every width and
     the whole banner scales down intact. */
  .banner-arrow{display:none} /* overlapped the headline; dots remain */
  .banner-actions .wrap{justify-content:center;text-align:center}
}

/* size finder - moved out of the hero, sits under .trio */
.sizefinder{border-bottom:1px solid var(--line)}
.sizefinder .wrap{padding-top:3.6rem;padding-bottom:4.4rem;text-align:center}
.sizefinder h2{margin-bottom:.7rem}
.sizefinder-intro{color:var(--muted);max-width:54ch;margin:0 auto 2.4rem}
@media (max-width:700px){
  .sizefinder .wrap{padding-top:2.6rem;padding-bottom:3rem}
  .sizefinder-intro{margin-bottom:1.8rem}
}

.trio{border-bottom:1px solid var(--line)}
.trio .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.trio article{padding:2.4rem 2rem 2.4rem 0}
.trio article+article{padding-left:2rem;border-left:1px solid var(--line)}
.trio svg{width:44px;height:44px;color:var(--blue);margin-bottom:.8rem}
.trio p{color:var(--muted);margin:.6rem 0 0}

/* intro */
.intro .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;padding-top:4.5rem;padding-bottom:4.5rem;align-items:start}
.intro p{color:var(--muted);font-size:1.12rem}

/* products */
.products{background:var(--mist);padding:4.5rem 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}
.sec-head p{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.prod{background:var(--paper);padding:1.5rem 1.4rem 1.6rem;text-decoration:none;display:flex;flex-direction:column;min-height:230px}
.prod:hover{background:var(--mist)}
.prod:hover h3{color:var(--blue)}
.prod svg{width:64px;height:48px;margin-bottom:1rem;color:var(--blue)}
.prod .spec{font-size:.92rem;color:var(--muted);margin-top:.5rem}
.prod .merv{margin-top:auto;padding-top:1rem;font-family:var(--display);font-weight:600;color:var(--blue)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .prod .merv,:root:not([data-theme="light"]) .prod svg,:root:not([data-theme="light"]) .trio svg{color:#8fa8ff}}
:root[data-theme="dark"] .prod .merv,:root[data-theme="dark"] .prod svg,:root[data-theme="dark"] .trio svg{color:#8fa8ff}

/* why */
.why{padding:4.5rem 0}
.why .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem}
.why ul{list-style:none;margin:0;padding:0}
.why li{padding:1.1rem 0 1.1rem 2.4rem;border-bottom:1px solid var(--line);position:relative}
.why li::before{content:"";position:absolute;left:0;top:1.35rem;width:18px;height:18px;background:var(--yellow);clip-path:polygon(0 50%,40% 90%,100% 10%,85% 0,40% 62%,14% 36%)}
.why li strong{font-family:var(--display);font-size:1.3rem;display:block}
.why li span{color:var(--muted)}

/* industries */
.industries{background:var(--blue-deep);color:#fff;padding:4rem 0}
.industries h2{margin-bottom:1.6rem}
.ind{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
.ind div{border-top:4px solid var(--yellow);padding-top:.9rem}
.ind h3{font-size:1.35rem}
.ind p{font-size:.95rem;color:#c6d0ee;margin:.4rem 0 0}

/* quote */
.quote{padding:4.5rem 0;background:var(--mist)}
.quote .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem}
.contact-list{list-style:none;padding:0;margin:1.5rem 0 0}
.contact-list li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.contact-list b{display:block;font-family:var(--display);font-size:1.15rem}
form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:var(--paper);padding:1.8rem;border:1px solid var(--line)}
form label{display:flex;flex-direction:column;font-weight:600;font-size:.95rem;gap:.35rem}
form .full{grid-column:1/-1}
form input,form select,form textarea{font:1rem var(--body);padding:.65rem .7rem;border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:0;width:100%}
form input:focus,form textarea:focus,form select:focus{border-color:var(--blue);outline:none}
form textarea{min-height:130px;resize:vertical}
.form-note{font-size:.9rem;color:var(--muted);margin:0}
.form-msg{font-weight:600;color:var(--blue)}

/* footer */
footer{background:#0d1733;color:#b9c3e0;padding:3.5rem 0 2rem;font-size:.95rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
footer h3{color:#fff;font-size:1.2rem;margin-bottom:.8rem}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin:.35rem 0}
footer a{color:#dfe5f7;text-decoration:none}
footer a:hover{color:var(--yellow)}
.legal{border-top:1px solid #26335e;margin-top:2.5rem;padding-top:1.2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

@media (max-width:1000px){
  .hero .wrap,.intro .wrap,.why .wrap,.quote .wrap{grid-template-columns:1fr}
  .hero h1{max-width:22ch}
  .grid{grid-template-columns:repeat(2,1fr)}
  .ind{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .trio .wrap{grid-template-columns:1fr}
  .trio article,.trio article+article{padding:1.8rem 0;border-left:0}
  .trio article+article{border-top:1px solid var(--line)}
  .grid{grid-template-columns:1fr}
  .prod{min-height:0}
  form{grid-template-columns:1fr;padding:1.2rem}
  .util .addr{display:none}
  .hero{--hero-scrim:linear-gradient(178deg,rgba(0,15,58,.93) 0%,rgba(0,26,94,.88) 52%,rgba(0,46,160,.74) 100%)}
  .hero h1{max-width:100%;letter-spacing:-.01em}
  .hero .lede{font-size:1.08rem;max-width:100%}
  .hero .wrap{padding-top:3rem;padding-bottom:3.5rem}
  .label{box-shadow:8px 8px 0 var(--yellow)}
}
@media (max-width:480px){.ind{grid-template-columns:1fr}footer .cols{grid-template-columns:1fr}}