/* ==========================================================================
   Gutter Jet Hull — guttercleaninghull.com
   Palette sampled from the client's own logo artwork.
   Every text/background pairing below was contrast-checked (WCAG AA).
   ========================================================================== */

:root{
  /* brand */
  --navy:        #0A2342;   /* shield interior */
  --navy-deep:   #07182E;
  --navy-soft:   #123253;
  --blue:        #0868A0;   /* shield edge */
  --blue-deep:   #12496F;
  --cyan:        #14A5E0;   /* graphics only — never behind small text */
  --orange:      #E87018;   /* logo orange */
  --orange-dark: #A94F05;   /* 4.72:1 on white; #C25E0C was 4.29:1 */

  /* surfaces + text */
  --ink:    #0A2342;
  --body:   #44556B;        /* 7.62:1 on white */
  --muted:  #5B6A7D;        /* 5.17:1 on --soft, 5.52:1 on white (was #64748B = 4.46:1 on --soft, a fail) */
  --line:   #E2E9F0;
  --soft:   #F4F8FB;
  --white:  #FFFFFF;

  --radius:   14px;
  --radius-l: 20px;
  --shadow-s: 0 1px 2px rgba(10,35,66,.06), 0 2px 8px rgba(10,35,66,.05);
  --shadow-m: 0 4px 12px rgba(10,35,66,.08), 0 12px 28px rgba(10,35,66,.09);
  --shadow-l: 0 10px 24px rgba(10,35,66,.12), 0 24px 56px rgba(10,35,66,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
  --wrap: 1180px;
  --header-h: 72px;
}

/* ------------------------------------------------------------- resets ---- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }          /* beats .btn{display:flex} etc */
figure,blockquote{ margin:0; }                /* UA margin:1em 40px */

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue-deep); }

h1,h2,h3,h4{
  font-family:'Barlow Condensed','Inter',sans-serif;
  color:var(--ink);
  line-height:1.1;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:.005em;
}
h1{ font-size:clamp(2.1rem,6.2vw,3.5rem); text-transform:uppercase; }
h2{ font-size:clamp(1.65rem,4.4vw,2.5rem); text-transform:uppercase; }
h3{ font-size:clamp(1.15rem,2.6vw,1.4rem); }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

/* icons: sized generically so a snippet works wherever it is reused */
svg.icon{ width:1.25rem; height:1.25rem; flex:none; display:block; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:20px;          /* never the padding shorthand — see notes */
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:4px; }

/* ------------------------------------------------------------ buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.5rem;
  border-radius:999px;
  border:2px solid transparent;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:1.125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.btn::after{                       /* subtle sheen on hover */
  content:''; position:absolute; inset:0 auto 0 -60%;
  width:45%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .55s var(--ease);
}
.btn:hover::after{ left:120%; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* orange + navy text = 6.24:1 (white on this orange is only 2.75:1) */
.btn--primary{ background:var(--orange); color:var(--navy); box-shadow:0 6px 16px rgba(232,112,24,.32); }
.btn--primary:hover{ background:#F98526; box-shadow:0 10px 24px rgba(232,112,24,.42); }

.btn--dark{ background:var(--navy); color:#fff; }
.btn--dark:hover{ background:var(--navy-soft); box-shadow:0 10px 24px rgba(10,35,66,.3); }

.btn--outline{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--navy); background:var(--navy); color:#fff; }

.btn--light{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.5); }
.btn--light:hover{ background:#fff; color:var(--navy); border-color:#fff; }

.btn--wide{ width:100%; }
.btn--lg{ padding:1.05rem 1.9rem; font-size:1.2rem; }

/* ------------------------------------------------------------- header ---- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  /* NOTE: no backdrop-filter — it would make this a containing block for the
     position:fixed mobile drawer below. */
}
.header__bar{
  display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; flex:none; }
.brand img{ width:auto; height:46px; }
.brand__text{ display:none; }

.header__actions{
  margin-left:auto;             /* survives the nav going position:fixed */
  display:flex; align-items:center; gap:.5rem;
}
.header__call{
  display:none; align-items:center; gap:.45rem;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:1.2rem; font-weight:700; letter-spacing:.02em;
  color:var(--navy); text-decoration:none; white-space:nowrap;
}
.header__call svg{ width:1.1rem; height:1.1rem; color:var(--orange); }
.header__call:hover{ color:var(--blue-deep); }
.header__cta{ display:none; }

.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:none;
  background:var(--navy); color:#fff; border:0; border-radius:12px; cursor:pointer;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.burger:hover{ background:var(--navy-soft); transform:translateY(-1px); }
.burger svg{ width:22px; height:22px; }
/* the open/close swap must out-specify `.burger svg` */
.burger .burger__close{ display:none; }
.burger[aria-expanded="true"] .burger__open{ display:none; }
.burger[aria-expanded="true"] .burger__close{ display:block; }

/* ---------------------------------------------------- mobile nav drawer -- */
.nav{
  /* Drawer starts BELOW the header so the burger stays visible and hittable
     while it is open — otherwise the drawer (or the scrim) sits on top of the
     very button that closes it. */
  position:fixed; inset:var(--header-h) 0 0 auto;
  width:min(320px,86vw);
  transform:translateX(101%);
  background:var(--navy);
  padding:1.25rem 1.5rem 2rem;
  display:flex; flex-direction:column; gap:.25rem;
  overflow-y:auto;
  z-index:80;
  transition:transform .3s var(--ease);
  visibility:hidden;
}
.nav.is-open{ transform:translateX(0); visibility:visible; }
.nav__link{
  color:#DCE7F2; text-decoration:none;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:1.35rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.12);
  transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.nav__link:hover{ color:var(--orange); padding-left:.4rem; }
.nav__link[aria-current="page"]{ color:var(--orange); }
.nav__cta{ margin-top:1.25rem; }
/* the drawer's own CTA must not inherit .nav__link colouring */
.nav .btn--primary{ color:var(--navy); }

.scrim{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:70;
  background:rgba(7,24,46,.55);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.scrim.is-open{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }
/* While open, lift the header over both the scrim (70) and the drawer (80) so
   elementFromPoint at the burger returns the burger, not the scrim. */
body.nav-open .header{ z-index:90; }

/* ------------------------------------------------------------ sections --- */
.section{ padding:clamp(3rem,8vw,5.5rem) 0; }
.section--soft{ background:var(--soft); }
.section--dark{ background:var(--navy); color:#C9D8E8; }
.section--dark h2,.section--dark h3{ color:#fff; }

.section__head{ max-width:720px; margin:0 auto clamp(2rem,5vw,3rem); text-align:center; }
.section__head p{ font-size:1.075rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:1rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:.6rem;
}
.eyebrow::before{ content:''; width:26px; height:3px; border-radius:2px; background:var(--orange); }
/* On any dark panel the eyebrow must use cyan: the brand blue #0868A0 on
   navy is only 2.63:1. Cyan gives 5.62:1. */
.section--dark .eyebrow,
.hero .eyebrow,
.pagehead .eyebrow,
.cta .eyebrow{ color:var(--cyan); }

/* ---------------------------------------------------------------- hero --- */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(20,165,224,.22), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 62%, #0B2C50 100%);
  color:#CFDDEC;
  padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(3rem,8vw,5rem);
  overflow:hidden;
}
.hero::before{                     /* faint water-jet arc, purely decorative */
  content:''; position:absolute; right:-14%; top:-24%;
  width:min(680px,88vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 34%, rgba(20,165,224,.2), transparent 62%);
  pointer-events:none;
}
.hero__grid{ position:relative; display:grid; gap:clamp(2rem,5vw,3rem); align-items:center; }
.hero h1{ color:#fff; margin-bottom:.35em; }
.hero h1 em{ font-style:normal; color:var(--orange); display:block; }
.hero__lede{ font-size:clamp(1.05rem,2.4vw,1.2rem); max-width:36em; margin-bottom:1.5rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.75rem; }

.hero__chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0; }
.hero__chips li{
  display:flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:.4rem .85rem;
  font-size:.875rem; color:#E3EDF7;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.hero__chips li:hover{ background:rgba(20,165,224,.2); border-color:rgba(20,165,224,.55); transform:translateY(-2px); }
.hero__chips svg{ width:1rem; height:1rem; color:var(--cyan); }

.hero__media{ position:relative; }
.hero__media img{
  width:100%; border-radius:var(--radius-l);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.14);
}
.hero__badge{
  position:absolute; left:-6px; bottom:-14px;
  background:#fff; color:var(--navy);
  border-radius:var(--radius); padding:.7rem .95rem;
  box-shadow:var(--shadow-l);
  display:flex; align-items:center; gap:.6rem;
  max-width:calc(100% - 20px);
}
.hero__badge strong{
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:1.2rem; letter-spacing:.02em; display:block; line-height:1.15;
}
.hero__badge span{ font-size:.8rem; color:var(--muted); line-height:1.3; display:block; }
.hero__badge .stars{ color:var(--orange); display:flex; gap:1px; }
.hero__badge .stars svg{ width:1rem; height:1rem; }

/* -------------------------------------------------------- trust strip ---- */
.trust{ background:var(--white); border-bottom:1px solid var(--line); }
.trust__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line);
}
.trust__item{
  background:#fff; padding:1.25rem 1rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  transition:background-color .25s var(--ease);
}
.trust__item:hover{ background:var(--soft); }
.trust__item svg{ width:1.75rem; height:1.75rem; color:var(--blue); transition:transform .3s var(--ease), color .25s var(--ease); }
.trust__item:hover svg{ transform:scale(1.12) rotate(-6deg); color:var(--orange); }
.trust__item strong{
  font-family:'Barlow Condensed','Inter',sans-serif; color:var(--ink);
  font-size:1.1rem; letter-spacing:.02em; line-height:1.2;
}
.trust__item span{ font-size:.85rem; color:var(--muted); line-height:1.4; }

/* ------------------------------------------------------------- cards ----- */
.grid{ display:grid; gap:1.25rem; }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }

.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:1.5rem;
  display:flex; flex-direction:column; gap:.75rem;
  align-content:start;
  box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before{                     /* accent rule that draws in on hover */
  content:''; position:absolute; left:1.5rem; right:1.5rem; top:0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--cyan));
  border-radius:0 0 3px 3px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:#CFE0EE; }
.card:hover::before{ transform:scaleX(1); }
.card h3{ margin:0; }
.card p{ margin:0; font-size:.95rem; }

.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; flex:none;
  border-radius:14px;
  background:linear-gradient(140deg,#E8F3FA,#D6E9F6);
  color:var(--blue-deep);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.card__icon svg{ width:26px; height:26px; }
.card:hover .card__icon{
  transform:translateY(-2px) rotate(-7deg) scale(1.06);
  background:linear-gradient(140deg,var(--navy),var(--blue-deep));
  color:#fff;
}
.card__tag{
  position:absolute; top:1.25rem; right:1.25rem;
  background:var(--orange); color:var(--navy);
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:999px;
}
.card__link{
  margin-top:auto; padding-top:.35rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.95rem; color:var(--blue-deep); text-decoration:none;
}
.card__link svg{ width:1rem; height:1rem; transition:transform .25s var(--ease); }
.card:hover .card__link svg{ transform:translateX(4px); }
.card__link:hover{ text-decoration:underline; }

/* ---------------------------------------------------------- service pg --- */
.svc{
  display:grid; gap:1.5rem;
  padding:clamp(1.5rem,4vw,2.25rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);
  scroll-margin-top:calc(var(--header-h) + 16px);
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svc:hover{ box-shadow:var(--shadow-m); border-color:#CFE0EE; }
.svc + .svc{ margin-top:1.25rem; }
.svc__head{ display:flex; align-items:center; gap:.9rem; }
.svc__head h2{ margin:0; font-size:clamp(1.4rem,3.4vw,1.9rem); }
.svc__media{ border-radius:var(--radius); overflow:hidden; }
.svc__media img{ width:100%; transition:transform .6s var(--ease); }
.svc:hover .svc__media img{ transform:scale(1.045); }

.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.ticks li{
  display:grid; grid-template-columns:22px minmax(0,1fr); gap:.6rem;
  align-items:start; font-size:.95rem;
}
.ticks svg{ width:22px; height:22px; color:var(--blue); margin-top:.15rem; }
.section--dark .ticks svg{ color:var(--cyan); }

/* ------------------------------------------------------------- steps ----- */
.steps{ counter-reset:step; display:grid; gap:1.25rem; }
.step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-l); padding:1.75rem 1.5rem 1.5rem;
  box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; top:-16px; left:1.5rem;
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--navy); color:#fff;
  font-family:'Barlow Condensed','Inter',sans-serif; font-size:1.2rem; font-weight:700;
  box-shadow:0 6px 14px rgba(10,35,66,.28);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.step:hover::before{ background:var(--orange); color:var(--navy); transform:rotate(-6deg); }
.step h3{ margin:.85rem 0 .4rem; }
.step p{ font-size:.95rem; margin:0; }

/* ----------------------------------------------------------- gallery ----- */
.gallery{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.shot{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-s); background:var(--navy);
  aspect-ratio:4/3;
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.shot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,24,46,.55));
  opacity:0; transition:opacity .35s var(--ease);
}
.shot:hover img{ transform:scale(1.06); }
.shot:hover::after{ opacity:1; }
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.85rem 1rem; color:#fff; font-size:.85rem; line-height:1.35;
  transform:translateY(8px); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.shot:hover figcaption{ transform:translateY(0); opacity:1; }

/* ------------------------------------------------------- testimonials ---- */
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  padding:1.5rem; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; gap:.9rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.quote__mark{ width:34px; height:34px; color:#CFE0EE; }
.quote p{ margin:0; font-size:.975rem; color:var(--body); }
.quote footer{ margin-top:auto; display:flex; flex-direction:column; gap:.1rem; }
.quote cite{
  font-style:normal; font-weight:700; color:var(--ink);
  font-family:'Barlow Condensed','Inter',sans-serif; font-size:1.1rem; letter-spacing:.02em;
}
.quote small{ color:var(--muted); font-size:.8rem; }

.review-note{
  text-align:center; font-size:.85rem; color:var(--muted);
  margin:1.5rem auto 0; max-width:54ch;
}

/* ---------------------------------------------------------------- FAQ ---- */
.faq{ display:grid; gap:.75rem; max-width:860px; margin-inline:auto; }
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-s);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq details[open]{ border-color:#C9DEEF; box-shadow:var(--shadow-m); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:1.1rem 3rem 1.1rem 1.25rem;
  position:relative;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:1.2rem; font-weight:600; color:var(--ink); line-height:1.3;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--blue-deep); }
.faq summary::after{
  content:''; position:absolute; right:1.25rem; top:1.35rem;
  width:12px; height:12px;
  border-right:2.5px solid var(--orange); border-bottom:2.5px solid var(--orange);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.6rem; }
.faq .faq__a{ padding:0 1.25rem 1.2rem; font-size:.96rem; }

/* ------------------------------------------------------------ coverage --- */
.areas{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
}
.areas li{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:.65rem .85rem; font-size:.92rem; color:var(--ink);
  transition:transform .22s var(--ease), border-color .22s var(--ease),
             box-shadow .22s var(--ease), background-color .22s var(--ease);
}
.areas li:hover{
  transform:translateY(-2px); border-color:var(--blue);
  box-shadow:var(--shadow-s); background:#F8FCFF;
}
.areas .pc{
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
  color:var(--blue-deep); background:#E8F3FA;
  border-radius:6px; padding:.12rem .4rem; flex:none;
}

/* ---------------------------------------------------------------- map ---- */
.map{
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  background:var(--soft);
}
/* The Google embed is given a real pixel height and no absolutely-positioned
   siblings. Wrapping it in a rounded, clipped, z-indexed container stops the
   tiles compositing (verified against a plain control iframe). */
.map__frame{
  display:block; width:100%; height:380px; border:0;
  border-radius:var(--radius-l);
  background:var(--soft);
}
@media (max-width:600px){
  .map__frame{ height:300px; }
}

/* --------------------------------------------------------------- forms --- */
.form{ display:grid; gap:1rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:.9rem; font-weight:600; color:var(--ink); }
.field .req{ color:var(--orange-dark); }
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink);
  padding:.8rem .9rem;
  border:1.5px solid var(--line); border-radius:10px;
  background:#fff; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select{
  appearance:none; -webkit-appearance:none;
  /* keep the chevron out of a `background:` shorthand so a skin can't wipe it */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A2342' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .85rem center;
  background-size:16px 16px;
  padding-right:2.4rem;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(8,104,160,.14);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:#C0392B; box-shadow:0 0 0 4px rgba(192,57,43,.12);
}
.field__err{ font-size:.82rem; color:#B3291D; }
.form__row{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.form__note{ font-size:.82rem; color:var(--muted); }
/* honeypot — must never be visible or focusable */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{
  border-radius:10px; padding:.85rem 1rem; font-size:.92rem;
  border:1.5px solid transparent;
}
.alert--err{ background:#FDECEA; border-color:#F1B0A8; color:#96241A; }

.formcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  padding:clamp(1.25rem,4vw,2rem); box-shadow:var(--shadow-m);
}

/* ------------------------------------------------------------ CTA band --- */
.cta{
  background:
    radial-gradient(760px 340px at 12% 0%, rgba(20,165,224,.22), transparent 62%),
    linear-gradient(135deg,var(--navy),var(--navy-deep));
  color:#CFDDEC; border-radius:var(--radius-l);
  padding:clamp(1.75rem,5vw,2.75rem);
  display:grid; gap:1.25rem; align-items:center;
}
.cta h2{ color:#fff; margin:0; }
.cta p{ margin:.5rem 0 0; }
.cta__btns{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* -------------------------------------------------------------- footer --- */
.footer{ background:var(--navy-deep); color:#9FB4CA; padding:clamp(2.5rem,6vw,3.5rem) 0 1.5rem; }
.footer__grid{ display:grid; gap:2rem; }
.footer__logo{
  background:#fff; border-radius:var(--radius);
  padding:.75rem; display:inline-block; margin-bottom:1rem;
}
.footer__logo img{ height:60px; width:auto; }
.footer h3{
  color:#fff; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 .9rem;
}
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer a{ color:#9FB4CA; text-decoration:none; font-size:.94rem; transition:color .2s var(--ease), padding-left .2s var(--ease); }
.footer a:hover{ color:var(--orange); padding-left:.25rem; }
.footer__contact a{ display:inline-flex; align-items:center; gap:.5rem; }
.footer__contact svg{ width:1rem; height:1rem; color:var(--cyan); flex:none; }
.footer p{ font-size:.92rem; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:2rem; padding-top:1.25rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; justify-content:space-between;
  font-size:.82rem; color:#7D93AB;
}
.footer__bottom a{ font-size:.82rem; }

/* --------------------------------------------------------- sticky call --- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:rgba(255,255,255,.18);
  box-shadow:0 -4px 18px rgba(10,35,66,.18);
}
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.85rem .5rem; text-decoration:none;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:1.1rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.callbar svg{ width:1.05rem; height:1.05rem; }
.callbar__call{ background:var(--navy); color:#fff; }
.callbar__quote{ background:var(--orange); color:var(--navy); }
body{ padding-bottom:56px; }        /* room for the bar on mobile */

/* --------------------------------------------------------- prose bits ---- */
.prose h2{ margin-top:2rem; }
.prose h3{ margin-top:1.5rem; }
.prose ul{ padding-left:1.15rem; }
.prose li{ margin-bottom:.4rem; }
.lead{ font-size:1.1rem; color:var(--ink); }

.breadcrumbs{ font-size:.85rem; color:var(--muted); padding:.9rem 0 0; }
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0; }
.breadcrumbs li::after{ content:'/'; margin-left:.4rem; color:#B6C4D4; }
.breadcrumbs li:last-child::after{ content:''; }
.breadcrumbs a{ color:var(--blue-deep); text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }

.pagehead{
  background:linear-gradient(150deg,var(--navy),var(--navy-deep));
  color:#C9D8E8;
  padding:clamp(2rem,6vw,3.25rem) 0;
}
.pagehead h1{ color:#fff; margin-bottom:.35em; }
.pagehead p{ max-width:60ch; font-size:1.05rem; margin:0; }
.pagehead .breadcrumbs{ color:#8FA8C2; padding-bottom:.75rem; }
.pagehead .breadcrumbs a{ color:#BBD3E8; }
.pagehead .breadcrumbs li::after{ color:#5C7A99; }

/* ===================== BREAKPOINTS (kept last on purpose) ================= */
/* On phones the hero photo would otherwise sit below four rows of chips, a
   long way under the fold. display:contents promotes the copy's children to
   grid items so the photo can be ordered directly after the call buttons. */
@media (max-width:899px){
  .hero__grid{ gap:1.15rem; }
  .hero__copy{ display:contents; }
  .hero__copy > .eyebrow{ order:1; margin-bottom:0; }
  .hero__copy > h1{ order:2; margin-bottom:0; }
  .hero__copy > .hero__lede{ order:3; margin-bottom:0; }
  .hero__copy > .hero__cta{ order:4; margin-bottom:0; }
  .hero__media{ order:5; }
  .hero__copy > .hero__chips{ order:6; }
}

@media (min-width:600px){
  .trust__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
  .brand__text{
    display:block; line-height:1.05;
  }
  .brand__text strong{
    display:block; font-family:'Barlow Condensed','Inter',sans-serif;
    font-size:1.35rem; letter-spacing:.02em; color:var(--navy); text-transform:uppercase;
  }
  .brand__text span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
}

@media (min-width:768px){
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .cta{ grid-template-columns:1.5fr auto; }
  .svc{ grid-template-columns:1.15fr .85fr; align-items:center; }
  .svc--noimg{ grid-template-columns:minmax(0,1fr); }
  .svc__body{ min-width:0; }
}

@media (min-width:900px){
  :root{ --header-h:82px; }
  body{ padding-bottom:0; }
  .callbar{ display:none; }
  .burger{ display:none; }
  .header__cta{ display:inline-flex; }
  .brand img{ height:56px; }
  /* measured: brand text 263px + nav 402 + phone 126 + CTA 205 + gaps 24 =
     1044px, but a 1024 viewport only offers 984 inside .wrap. The wordmark is
     already in the logo and the phone is repeated in the hero + footer, so
     both stand down until there is genuinely room. */
  .brand__text{ display:none; }
  .header__call{ display:none; }

  /* nav returns to a normal in-flow row */
  .nav{
    position:static; transform:none; visibility:visible;
    width:auto; background:none; padding:0;
    flex-direction:row; align-items:center; gap:.25rem;
    overflow:visible; z-index:auto;
    margin-left:auto;
  }
  .nav__link{
    color:var(--navy); font-size:1.05rem; border-bottom:0;
    padding:.5rem .8rem; border-radius:8px; position:relative;
  }
  .nav__link::after{
    content:''; position:absolute; left:.8rem; right:.8rem; bottom:.3rem; height:2px;
    background:var(--orange); border-radius:2px;
    transform:scaleX(0); transform-origin:left;
    transition:transform .28s var(--ease);
  }
  .nav__link:hover{ color:var(--blue-deep); padding-left:.8rem; background:transparent; }
  .nav__link:hover::after{ transform:scaleX(1); }
  .nav__link[aria-current="page"]{ color:var(--blue-deep); }
  .nav__link[aria-current="page"]::after{ transform:scaleX(1); }
  .nav__cta{ display:none; }
  .scrim{ display:none; }

  .header__actions{ margin-left:1rem; }

  .hero__grid{ grid-template-columns:1.08fr .92fr; gap:clamp(2rem,4vw,3.5rem); }
  .hero__media{ max-width:440px; margin-left:auto; }

  .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width:1080px){
  .areas{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

@media (min-width:1140px){
  .brand__text{ display:block; }
  .header__call{ display:inline-flex; }
}