/* ==========================================================================
   LOW KS CONSTRUCTION — site stylesheet
   --------------------------------------------------------------------------
   Design language: "on-site engineering"
   - Brand palette sampled from the logo: deep navy #032042 + safety orange
     #fe8709, over a concrete off-white paper.
   - Barlow Condensed (display, uppercase, tight) + Barlow (body): industrial
     signage typography that matches the logo's condensed letterforms.
   - Signature elements: the hazard beam (diagonal navy/orange safety stripe),
     blueprint grid backgrounds, and angled "poured slab" section edges.
   - Small radii, sturdy 2px borders — angular, structural, nothing bubbly.
   ==========================================================================
   INDEX
   01 Design tokens        07 Hero (blueprint)        13 Contact / form / map
   02 Reset & base         08 Hazard beam & slabs     14 Footer
   03 Typography           09 Cards & service grid    15 Helpers & reveal
   04 Layout primitives    10 Process (numbered)      16 Accessibility & print
   05 Buttons              11 Split rows & checklists 17 Responsive
   06 Header & nav         12 Stats / trust strip
   ========================================================================== */

/* 01 — Design tokens -------------------------------------------------------*/
:root{
  --navy:        #032042;
  --navy-2:      #07305e;   /* raised panels on navy */
  --navy-3:      #0d3a6e;   /* borders on navy */
  --orange:      #fe8709;
  --orange-dark: #d97200;   /* hover / borders */
  --orange-soft: #fff3e3;   /* tinted chips on light */
  --paper:       #f4f3ef;   /* concrete off-white */
  --white:       #ffffff;
  --ink:         #12233c;   /* body text on light */
  --steel:       #5c6b80;   /* captions, meta */
  --line:        #dcdcd4;   /* hairlines on light */

  --ff-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ff-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;

  --radius: 4px;
  --shadow-1: 0 2px 6px rgba(3,32,66,.08);
  --shadow-2: 0 14px 34px -14px rgba(3,32,66,.28);
  --container: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --sect: clamp(3.4rem, 8vw, 5.5rem);   /* vertical rhythm between sections */

  /* the hazard beam — diagonal safety stripe used as the brand signature */
  --hazard: repeating-linear-gradient(
      -45deg,
      var(--orange) 0 12px,
      var(--navy) 12px 24px);
}

/* 02 — Reset & base ---------------------------------------------------------*/
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:1.0625rem;               /* 17px base */
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--orange-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul{ padding-left:1.2rem; }
iframe{ border:0; display:block; }

/* 03 — Typography -----------------------------------------------------------*/
h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.015em;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 .6em;
}
h1{ font-size:clamp(2.6rem, 6.2vw, 4.4rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.8rem); }
h3{ font-size:clamp(1.3rem, 2.4vw, 1.6rem); }
h4{ font-size:1.15rem; letter-spacing:.04em; }
p{ margin:0 0 1em; }
.lead{ font-size:clamp(1.1rem, 1.9vw, 1.25rem); color:var(--steel); }

/* eyebrow: small spec label, like a drawing title block */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff-display);
  font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:.85rem;
  color:var(--orange-dark);
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:""; width:26px; height:3px; background:var(--orange);
}
.on-dark .eyebrow{ color:var(--orange); }

.section-head{ max-width:720px; margin-bottom:2.4rem; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }

/* 04 — Layout primitives ----------------------------------------------------*/
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sect); }
.section--tight{ padding-block:calc(var(--sect) * .62); }
.section--navy{ background:var(--navy); color:#d9e2ef; }
.section--navy :is(h1,h2,h3,h4){ color:var(--white); }
.section--navy p{ color:#c3cfdf; }
.section--white{ background:var(--white); }

.grid{ display:grid; gap:1.4rem; }
.grid--2{ grid-template-columns:repeat(2, 1fr); }
.grid--3{ grid-template-columns:repeat(3, 1fr); }
.grid--4{ grid-template-columns:repeat(4, 1fr); }

/* 05 — Buttons ---------------------------------------------------------------
   Square-shouldered, sturdy. The primary button carries a hazard underline
   that slides in on hover. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.02rem;
  padding:.85rem 1.7rem;
  border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; text-decoration:none !important;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  position:relative;
}
.btn:active{ transform:translateY(1px); }
.btn--accent{ background:var(--orange); color:var(--navy); }
.btn--accent:hover{ background:var(--orange-dark); color:var(--white); }
.btn--outline{ border-color:var(--navy); color:var(--navy); background:transparent; }
.btn--outline:hover{ background:var(--navy); color:var(--white); }
.on-dark .btn--outline{ border-color:#ffffff66; color:var(--white); }
.on-dark .btn--outline:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
.btn__arrow{ transition:transform .18s ease; }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* 06 — Header & nav ----------------------------------------------------------*/
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-2); }
/* thin hazard strip along the very top of the page — site hoarding tape */
.site-header::before{
  content:""; display:block; height:5px; background:var(--hazard);
}
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:76px;
}
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:46px; width:auto; }

.nav-list{
  display:flex; align-items:center; gap:.35rem;
  list-style:none; margin:0; padding:0;
}
.nav-link{
  display:inline-block; padding:.55rem .85rem;
  font-family:var(--ff-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; font-size:1.02rem;
  color:var(--navy); border-radius:var(--radius);
  text-decoration:none !important;
  border-bottom:3px solid transparent;
}
.nav-link:hover{ color:var(--orange-dark); }
.nav-link.is-active{ border-bottom-color:var(--orange); }

/* services dropdown */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:320px;
  background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--orange);
  border-radius:var(--radius); box-shadow:var(--shadow-2);
  padding:.45rem; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown.is-open .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
@media (hover:hover){
  .has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
}
.dropdown a{
  display:block; padding:.6rem .8rem; border-radius:var(--radius);
  color:var(--ink); font-size:.98rem; text-decoration:none !important;
}
.dropdown a:hover{ background:var(--orange-soft); color:var(--navy); }
.caret{ font-size:.68em; margin-left:.25rem; }

.nav-cta{ margin-left:.6rem; }

/* mobile toggle */
.nav-toggle{
  display:none; background:none; border:2px solid var(--navy);
  border-radius:var(--radius); padding:.5rem .6rem; cursor:pointer;
}
.nav-toggle .bars{ display:block; width:22px; height:2px; background:var(--navy); position:relative; }
.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--navy);
}
.nav-toggle .bars::before{ top:-7px; } .nav-toggle .bars::after{ top:7px; }

/* 07 — Hero -------------------------------------------------------------------
   Deep navy with a blueprint grid: fine 1px grid + a heavier 120px grid,
   like technical drawing paper. The skyline SVG sits along the bottom edge,
   echoing the buildings in the logo. */
.hero{
  position:relative; overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(180deg, #04264e 0%, var(--navy) 60%);
  background-size:
    24px 24px, 24px 24px, 120px 120px, 120px 120px, 100% 100%;
  color:#d9e2ef;
}
.hero__inner{
  position:relative; z-index:2;
  padding-block:clamp(4rem, 10vw, 7rem) clamp(7rem, 14vw, 10rem);
  max-width:820px;
}
.hero h1{ color:var(--white); margin-bottom:.4em; }
.hero h1 .hl{ color:var(--orange); }
.hero .lead{ color:#b9c7da; max-width:600px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* skyline strip along the hero base */
.hero__skyline{
  position:absolute; inset:auto 0 0 0; z-index:1;
  width:100%; height:clamp(90px, 16vw, 170px);
  pointer-events:none; user-select:none;
}
.hero__skyline svg{ width:100%; height:100%; display:block; }

/* page hero (inner pages): shallower, same drawing-paper treatment */
.page-hero{
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    var(--navy);
  background-size:24px 24px, 24px 24px, 100% 100%;
  color:#c3cfdf;
  padding-block:clamp(3rem, 7vw, 4.6rem);
}
.page-hero h1{ color:var(--white); margin-bottom:.25em; }
.page-hero .crumb{
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.9rem; color:#8fa3bd;
}
.page-hero .crumb a{ color:#c3cfdf; }
.page-hero .crumb .sep{ margin-inline:.5rem; color:var(--orange); }

/* 08 — Hazard beam & slab edges ----------------------------------------------*/
.hazard-beam{
  height:10px; width:min(240px, 40%);
  background:var(--hazard);
  border-radius:2px;
  margin-block:1.4rem;
}
.hazard-beam--full{ width:100%; margin:0; border-radius:0; height:8px; }

/* angled "slab" edge between light sections and navy bands */
.slab-top{ position:relative; }
.slab-top::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:56px;
  background:var(--paper);
  clip-path:polygon(0 0, 100% 0, 100% 22%, 0 100%);
}

/* 09 — Cards & service grid ----------------------------------------------------*/
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-top:4px solid var(--navy);
  border-radius:var(--radius);
  padding:1.7rem 1.5rem 1.5rem;
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:.65rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-top-color:var(--orange); }
.card h3{ margin:0; }
.card p{ margin:0; color:var(--steel); font-size:.99rem; }
.card__icon{
  width:52px; height:52px; border-radius:var(--radius);
  display:grid; place-items:center;
  background:var(--orange-soft); color:var(--orange-dark);
  border:1px solid #ffd9ab;
  margin-bottom:.4rem;
}
.card__link{
  margin-top:auto; padding-top:.7rem;
  font-family:var(--ff-display); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:.95rem;
  color:var(--navy); text-decoration:none !important;
}
.card__link:hover{ color:var(--orange-dark); }

/* full-card click target */
.card--linked{ position:relative; }
.card--linked .card__cover{ position:absolute; inset:0; z-index:1; }

/* 10 — Process steps (a real sequence, so numbers carry meaning) --------------*/
.steps{ counter-reset:step; }
.step{
  background:var(--navy-2);
  border:1px solid var(--navy-3);
  border-radius:var(--radius);
  padding:1.6rem 1.4rem;
  position:relative;
}
.step::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  font-family:var(--ff-display); font-weight:700;
  font-size:2.6rem; line-height:1;
  color:var(--orange);
  display:block; margin-bottom:.6rem;
}
.step h3{ color:var(--white); font-size:1.25rem; margin-bottom:.35rem; }
.step p{ color:#aebcd0; font-size:.97rem; margin:0; }

/* 11 — Split rows & checklists -------------------------------------------------*/
.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.8rem, 5vw, 4rem); align-items:center;
}
.split--flip > :first-child{ order:2; }
.split--flip > :last-child{ order:1; }

.checklist{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem; }
.checklist li{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:1rem;
}
.checklist .tick{
  flex:0 0 auto; width:22px; height:22px; margin-top:.15rem;
  border-radius:2px; background:var(--orange); color:var(--navy);
  display:grid; place-items:center; font-weight:800; font-size:.8rem;
}
.on-dark .checklist li{ color:#c3cfdf; }

/* scope list on service detail pages — drawing register style */
.scope{
  list-style:none; margin:1.4rem 0 0; padding:0;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
}
.scope li{
  display:flex; align-items:center; gap:.8rem;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line);
  font-size:1rem;
}
.scope li:last-child{ border-bottom:0; }
.scope .idx{
  font-family:var(--ff-display); font-weight:700; color:var(--orange-dark);
  font-size:.92rem; letter-spacing:.05em; min-width:34px;
}

/* illustrations ---------------------------------------------------------------
   Original flat SVG artwork in the brand palette. .hero__art floats beside the
   hero copy on wide screens; .illus-panel frames light-background artwork on a
   faint drawing-grid card. */
.hero__art{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  right:clamp(1rem, 4vw, 4.5rem);
  bottom:clamp(120px, 17vw, 185px);
  width:min(420px, 34vw); height:auto;
}
@media (max-width:1024px){ .hero__art{ display:none; } }

.illus-panel{
  background:
    linear-gradient(rgba(3,32,66,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,32,66,.055) 1px, transparent 1px),
    var(--white);
  background-size:22px 22px, 22px 22px, 100% 100%;
  border:1px solid var(--line);
  border-top:4px solid var(--orange);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:clamp(1.3rem, 3.4vw, 2.4rem);
  display:grid; place-items:center;
}
.illus-panel img{ width:100%; max-width:480px; height:auto; }
.illus-panel--spot{ padding:1.1rem 1.1rem 1.3rem; }
.illus-panel--spot img{ max-width:300px; }

/* brand plate — logo panel used on About / detail sidebars */
.brand-plate{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:clamp(1.6rem, 4vw, 2.6rem);
  display:grid; place-items:center;
}
.brand-plate img{ max-width:min(320px, 80%); }
.brand-plate--dark{ background:var(--navy-2); border-color:var(--navy-3); }

/* 12 — Stats / trust strip -------------------------------------------------------*/
.trust{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.trust__item{
  background:var(--white); padding:1.35rem 1.2rem;
  display:flex; gap:.85rem; align-items:flex-start;
}
.trust__item svg{ flex:0 0 auto; color:var(--orange-dark); margin-top:.15rem; }
.trust__item b{
  display:block; font-family:var(--ff-display); text-transform:uppercase;
  letter-spacing:.05em; color:var(--navy); font-size:1.05rem;
}
.trust__item span{ color:var(--steel); font-size:.92rem; line-height:1.45; }

/* 13 — Contact / form / map -------------------------------------------------------*/
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.8rem, 5vw, 3.6rem); }

.form-card{
  background:var(--white); border:1px solid var(--line);
  border-top:4px solid var(--orange);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:clamp(1.4rem, 3.4vw, 2.2rem);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem; margin-bottom:1.2rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; font-size:.88rem; color:var(--navy);
}
.field input,.field textarea{
  font:inherit; color:var(--ink);
  border:1.5px solid #c9ccc4; border-radius:var(--radius);
  background:var(--paper); padding:.7rem .85rem;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--orange-dark);
  box-shadow:0 0 0 3px rgba(254,135,9,.22);
  background:var(--white);
}
.form-status{ margin:.9rem 0 0; font-weight:600; color:var(--navy); min-height:1.4em; }
.form-note{ color:var(--steel); font-size:.94rem; margin-top:.5rem; }

.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.info-list li{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.1rem;
}
.info-list svg{ flex:0 0 auto; color:var(--orange-dark); margin-top:.2rem; }
.info-list b{
  display:block; font-family:var(--ff-display); text-transform:uppercase;
  letter-spacing:.06em; color:var(--navy);
}
.info-list a{ color:var(--ink); }

.map-embed{
  margin-top:2.6rem; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-1);
}
.map-embed iframe{ width:100%; height:400px; }

/* 14 — Footer ----------------------------------------------------------------------*/
.site-footer{ background:var(--navy); color:#b9c7da; }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:clamp(1.6rem, 4vw, 3rem);
  padding-block:3.4rem 2.6rem;
}
/* the logo is navy+orange on transparency, so it sits on a white plate */
.footer-logo{
  display:inline-block; background:var(--white);
  border-radius:var(--radius); padding:.85rem 1.1rem;
  margin-bottom:1rem;
}
.footer-logo img{ height:40px; width:auto; }
.site-footer h4{ color:var(--white); margin-bottom:.9rem; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer-links a{ color:#b9c7da; text-decoration:none; }
.footer-links a:hover{ color:var(--orange); text-decoration:underline; }
.footer-contact{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer-contact li{ display:flex; gap:.65rem; align-items:flex-start; }
.footer-contact svg{ flex:0 0 auto; color:var(--orange); margin-top:.25rem; }
.footer-contact a{ color:#d9e2ef; }
.footer-bottom{
  border-top:1px solid var(--navy-3);
  padding-block:1.2rem;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between;
  font-size:.92rem; color:#8fa3bd;
}

/* CTA band ---------------------------------------------------------------------*/
.cta-band{
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    var(--navy);
  background-size:24px 24px, 24px 24px, 100% 100%;
  color:#c3cfdf;
}
.cta-band__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.4rem; padding-block:clamp(2.6rem, 6vw, 3.8rem);
}
.cta-band h2{ color:var(--white); margin:0; }
.cta-band p{ margin:.4rem 0 0; }

/* 15 — Helpers & scroll reveal ----------------------------------------------------*/
.on-dark{ color:#c3cfdf; }
.mt-2{ margin-top:2rem; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* 16 — Accessibility & print --------------------------------------------------------*/
:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
}
@media print{
  .site-header,.site-footer,.cta-band,.hero__actions,.nav-toggle{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* 17 — Responsive --------------------------------------------------------------------*/
@media (max-width:1024px){
  .grid--4{ grid-template-columns:repeat(2, 1fr); }
  .trust{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:880px){
  .nav-toggle{ display:inline-flex; align-items:center; }
  .site-nav{
    position:fixed; inset:81px 0 0 auto; width:min(340px, 88vw);
    background:var(--white); border-left:1px solid var(--line);
    box-shadow:var(--shadow-2);
    transform:translateX(100%); transition:transform .22s ease;
    overflow-y:auto; z-index:55; padding:1rem;
  }
  .site-nav.is-open{ transform:translateX(0); }
  .nav-list{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav-link{ display:block; padding:.85rem .9rem; border-bottom:0; border-left:3px solid transparent; }
  .nav-link.is-active{ border-left-color:var(--orange); background:var(--orange-soft); }
  .dropdown{
    position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    border:0; border-left:3px solid var(--line); border-radius:0;
    box-shadow:none; padding:.2rem 0 .2rem .6rem; margin:.2rem 0 .4rem .9rem;
    display:none;
  }
  .has-dropdown.is-open .dropdown{ display:block; }
  .nav-cta{ margin:.8rem .5rem 0; }
  body.nav-locked{ overflow:hidden; }

  .grid--3{ grid-template-columns:repeat(2, 1fr); }
  .split{ grid-template-columns:1fr; }
  .split--flip > :first-child{ order:1; }
  .split--flip > :last-child{ order:2; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .trust{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .brand img{ height:38px; }
  .header-bar{ min-height:68px; }
  .site-nav{ inset:73px 0 0 auto; }
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
}