/* ==========================================================================
   All Quality Construction — site stylesheet
   Built to the AllQuality website style guide. Colours, type scale, button
   and card specs come from that sheet; nothing here is invented.

   One deliberate deviation, and it is the only one: the style guide draws the
   primary button as WHITE text on brand orange. White on #FF6A00 measures
   2.87:1, which fails WCAG AA for button-sized text. Navy on the same orange
   measures 4.69:1 and passes, so primary buttons carry navy text. The orange
   itself is untouched. See BUILD-NOTES.md.
   ========================================================================== */

/* ---------- fonts (self-hosted: no third-party request, no layout shift) --- */
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-600-normal.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-800-normal.woff2)format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-600-normal.woff2)format("woff2");font-weight:600;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* the five from the style guide */
  --navy:#0A2D5B;
  --orange:#FF6A00;
  --white:#FFFFFF;
  --gray:#F2F4F7;
  --text:#1F2937;

  /* derived, for jobs the five cannot do accessibly */
  --navy-900:#071E3D;   /* footer depth */
  --navy-700:#12437F;   /* hover, hairlines on navy */
  /* Two darker oranges, both measured, both needed. The brand orange is a
     BACKGROUND colour: 2.87:1 on white, so it can carry navy text but cannot BE
     text. --orange-ink is orange words at body size (4.87:1 on the grey section
     ground, 5.37:1 on white). --orange-display is the big two-line headings,
     which need only 3:1 as large text and so stay much closer to the brand
     colour — the difference from #FF6A00 is barely perceptible side by side. */
  --orange-ink:#B84600;
  --orange-display:#E85D00;
  --line:#DFE4EC;
  --muted:#59637A;

  --head:Montserrat,"Segoe UI",system-ui,-apple-system,sans-serif;
  --body:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;

  --shell:1200px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --pad:clamp(3.5rem,7vw,6.5rem);   /* vertical section rhythm */
  --r:4px;
  --shadow:0 1px 2px rgba(10,45,91,.06),0 8px 24px rgba(10,45,91,.07);
  --shadow-lift:0 2px 4px rgba(10,45,91,.08),0 16px 40px rgba(10,45,91,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);
  font:400 clamp(1rem,.97rem + .15vw,1.0625rem)/1.65 var(--body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--head);color:var(--navy);line-height:1.08;
  letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:.75rem 1.25rem;font:700 .875rem var(--head)}
.skip:focus{left:0}

/* ---------- layout primitives ---------- */
.shell{width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto}
.section{padding-block:var(--pad)}
.section--gray{background:var(--gray)}
.section--navy{background:var(--navy);color:#D8E1EE}
.section--navy h2,.section--navy h3{color:#fff}

/* eyebrow: short orange rule then tracked-out label, straight off the asset sheet */
.eyebrow{display:flex;align-items:center;gap:.875rem;margin:0 0 1.125rem;
  font:600 .8125rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-ink)}
.eyebrow::before{content:"";flex:none;width:2.5rem;height:3px;background:var(--orange)}
.section--navy .eyebrow,.hero .eyebrow,.phero .eyebrow,.cta .eyebrow{color:#FFA05C}

/* section titles: two lines, second in orange — the mockup's signature */
.title{font-weight:800;font-size:clamp(2rem,1.35rem + 2.9vw,3.25rem);
  text-transform:uppercase;letter-spacing:-.015em}
.title .alt{color:var(--orange-display);display:block}
.section--navy .title .alt,.hero h1 .alt,.phero h1 .alt,.cta h2 .alt{color:var(--orange)}
.lede{margin-top:1.125rem;max-width:46ch;color:var(--muted);font-size:1.0625rem}
.section--navy .lede{color:#B9C7DC}

.head-row{display:grid;gap:clamp(1.5rem,3vw,3.5rem);align-items:end;
  grid-template-columns:minmax(0,1fr);margin-bottom:clamp(2.25rem,4vw,3.5rem)}
@media (min-width:900px){.head-row--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.head-row .lede{margin-top:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.625rem;border:2px solid transparent;
  border-radius:var(--r);padding:.9375rem 1.5rem;cursor:pointer;text-decoration:none;
  font:700 .875rem/1 var(--head);letter-spacing:.08em;text-transform:uppercase;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease);white-space:nowrap}
.btn .arw{flex:none;transition:transform .22s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}

/* primary — brand orange ground, navy text (4.69:1) */
.btn--primary{background:var(--orange);color:var(--navy)}
.btn--primary:hover{background:#FF7D1F}

/* secondary — outline; navy on light, white on navy */
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.on-navy .btn--ghost,.section--navy .btn--ghost,.cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.on-navy .btn--ghost:hover,.section--navy .btn--ghost:hover,.cta .btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

.btn-row{display:flex;flex-wrap:wrap;gap:.875rem}

/* inline text link with a nudging arrow */
.tlink{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font:700 .8125rem/1 var(--head);letter-spacing:.09em;text-transform:uppercase;
  color:var(--orange-ink)}
.tlink .arw{transition:transform .22s var(--ease)}
.tlink:hover{text-decoration:underline;text-underline-offset:5px}
.tlink:hover .arw{transform:translateX(4px)}
.section--navy .tlink,.cta .tlink,.market__body .tlink{color:#FFA05C}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:5rem}
.hdr__logo{flex:none;display:block;padding:.5rem 0}
.hdr__logo svg,.hdr__logo img{width:clamp(148px,17vw,208px);height:auto}
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav__link{position:relative;display:block;padding:.5rem 0;text-decoration:none;
  font:700 .8125rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-.125rem;height:3px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav__link:hover::after,.nav__link[aria-current=page]::after{transform:scaleX(1)}
.hdr__cta{flex:none}
/* the nav list carries its own Get a Quote for the mobile drawer; on desktop the
   header button is the one that shows, or the page gets two of them side by side */
@media (min-width:901px){.nav__list .btn{display:none}}
.burger{display:none;flex:none;margin-left:auto;width:2.75rem;height:2.75rem;
  align-items:center;justify-content:center;background:none;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--navy);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy)}
.burger span::before{top:-6px}.burger span::after{top:6px}

@media (max-width:900px){
  .burger{display:flex}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .nav[data-open=true]{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gut) 1.25rem}
  .nav__link{padding:.9375rem 0;border-bottom:1px solid var(--line)}
  .nav__link::after{display:none}
  .nav__link[aria-current=page]{color:var(--orange-ink)}
  .nav__list .btn{margin-top:1rem;justify-content:center}
  .hdr__cta{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#D8E1EE;isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--navy) 0%,rgba(10,45,91,.94) 42%,rgba(10,45,91,.55) 100%)}
.hero__in{display:grid;gap:2rem;align-items:center;
  padding-block:clamp(4rem,9vw,7.5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.hero__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.hero h1{color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(2.5rem,1.4rem + 4.6vw,4.25rem);line-height:1.02}
.hero h1 .alt{display:block;color:var(--orange)}
.hero__sub{margin-top:1.375rem;max-width:34ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:#C6D3E5}
.hero .btn-row{margin-top:2.25rem}

/* the PLAN / BUILD / DELIVER stack with its long arrow */
.motif{justify-self:end;text-align:right;display:none}
@media (min-width:1000px){.motif{display:block}}
.motif ol{display:grid;gap:.125rem;font:800 clamp(1.25rem,1.1rem + .6vw,1.75rem)/1.14 var(--head);
  color:#fff;text-transform:uppercase;letter-spacing:.02em}
.motif ol li:nth-child(2){color:#C6D3E5}
.motif ol li:nth-child(3){color:#8FA6C6}
.motif__arw{margin-top:1rem;margin-left:auto;display:block;width:170px;color:var(--orange)}

/* compact hero for inner pages */
.phero{position:relative;background:var(--navy);color:#C6D3E5;isolation:isolate;overflow:hidden}
.phero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.5}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,var(--navy) 12%,rgba(10,45,91,.86) 100%)}
.phero__in{padding-block:clamp(3rem,6vw,5rem)}
.phero h1{color:#fff;font-weight:800;text-transform:uppercase;
  font-size:clamp(2.125rem,1.5rem + 2.7vw,3.5rem);letter-spacing:-.015em}
.phero h1 .alt{color:var(--orange)}
.phero .lede{color:#B9C7DC;margin-top:1rem;max-width:52ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;
  font:600 .75rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:#8FA6C6}
.crumbs a{color:#B9C7DC;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}

.card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:2rem 1.75rem;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--orange);
  border-radius:var(--r) var(--r) 0 0;transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card__icon{width:72px;height:72px;margin-bottom:1.25rem}
.card h3{font-size:1.125rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.card p{margin-top:.75rem;color:var(--muted);font-size:.9688rem}
/* the link sits at the bottom of the card and stretches over the whole card,
   so the entire tile is clickable without the label leaving normal flow */
.card__more{margin-top:auto;padding-top:1.375rem;align-self:flex-start}
.card__more::after{content:"";position:absolute;inset:0;border-radius:var(--r)}

/* ---------- media frames (placeholder-aware) ---------- */
.frame{position:relative;overflow:hidden;border-radius:var(--r);background:var(--navy);
  border:1px solid var(--line)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.frame--43{aspect-ratio:4/3}
.frame--169{aspect-ratio:16/9}
.frame__body{position:absolute;inset:auto 0 0;padding:1.25rem 1.25rem 1.125rem;
  background:linear-gradient(to top,rgba(7,30,61,.93),rgba(7,30,61,.55) 60%,transparent);color:#fff}
.frame__body h3{color:#fff;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.frame__meta{margin-top:.25rem;font-size:.8125rem;color:#B9C7DC}
/* the "photo goes here" chip — deliberately visible, but a chip rather than a
   full-width banner, which read as a broken element rather than a note */
.shotnote{position:absolute;top:.75rem;left:.75rem;max-width:calc(100% - 1.5rem);
  display:inline-flex;gap:.4375rem;align-items:flex-start;padding:.4375rem .625rem;
  border-radius:3px;background:rgba(255,106,0,.95);color:var(--navy);
  font:600 .6563rem/1.3 var(--head);letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(7,30,61,.3)}
.shotnote svg{flex:none;margin-top:1px}

.tile{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:var(--r)}
.tile:hover .frame img{transform:scale(1.045)}
.tile .frame{border:0}

/* ---------- markets split ---------- */
.market{position:relative;display:grid;gap:0;border-radius:var(--r);overflow:hidden;
  background:var(--navy);color:#C6D3E5}
@media (min-width:820px){.market{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch}
  .market--flip .market__media{order:2}}
.market__media{position:relative;min-height:16rem;background:var(--navy-900)}
/* a hairline between the image half and the copy half, so the two panels read as
   two panels even while the image is a placeholder in the same colour family */
.market__media::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.market__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.market__body{padding:clamp(2rem,4vw,3rem)}
.market__body h3{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em}
.market__body p{margin-top:1rem;color:#B9C7DC}
.market__list{margin-top:1.5rem;display:grid;gap:.625rem}
.market__list li{position:relative;padding-left:1.625rem;font-size:.9688rem;color:#D8E1EE}
.market__list li::before{content:"";position:absolute;left:0;top:.5625rem;width:.625rem;height:.625rem;
  background:var(--orange);clip-path:polygon(0 0,100% 50%,0 100%,22% 50%)}
.market__body .tlink{margin-top:1.75rem;color:#FFA05C}

/* ---------- process (plan / build / deliver) ---------- */
.steps{counter-reset:s;display:grid;gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.step{position:relative;padding-top:2.75rem;border-top:3px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:1.125rem;left:0;
  font:800 .9375rem/1 var(--head);letter-spacing:.1em;color:var(--orange-ink)}
.step::after{content:"";position:absolute;top:-3px;left:0;width:3.5rem;height:3px;background:var(--orange)}
.step h3{font-size:1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.step p{margin-top:.625rem;color:var(--muted);font-size:.9688rem}
.section--navy .step{border-top-color:rgba(255,255,255,.18)}
.section--navy .step::before{color:#FFA05C}
.section--navy .step p{color:#B9C7DC}

/* ---------- trust strip ---------- */
.trust{display:grid;gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.trust__item{display:flex;gap:1rem;align-items:flex-start}
.trust__item img{flex:none;width:52px;height:52px}
.trust__item h3{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.trust__item p{margin-top:.375rem;font-size:.9375rem;color:var(--muted)}
.section--navy .trust__item p{color:#B9C7DC}

/* ---------- CTA band with the angled orange chevron ---------- */
.cta{position:relative;background:var(--navy);color:#C6D3E5;isolation:isolate;overflow:hidden}
.cta__bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;opacity:.55}
.cta::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(92deg,var(--navy) 30%,rgba(10,45,91,.72) 62%,rgba(10,45,91,.5) 100%)}
.cta::after{content:"";position:absolute;z-index:-1;top:-10%;bottom:-10%;left:44%;width:14rem;
  background:var(--orange);clip-path:polygon(0 0,42% 0,100% 50%,42% 100%,0 100%,58% 50%);
  opacity:.95;display:none}
@media (min-width:900px){.cta::after{display:block}}
.cta__in{display:grid;gap:2rem;align-items:center;padding-block:clamp(3rem,6vw,5rem);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cta__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.cta h2{color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(1.875rem,1.35rem + 2.3vw,3rem)}
.cta h2 .alt{color:var(--orange)}
.cta p{margin-top:1rem;max-width:40ch;color:#B9C7DC}
.cta .btn-row{margin-top:2rem}
.cta__motif{justify-self:end;text-align:right;display:none}
@media (min-width:1000px){.cta__motif{display:block}}
.cta__motif ol{display:grid;gap:.125rem;font:800 clamp(1.125rem,1rem + .6vw,1.625rem)/1.14 var(--head);
  color:#fff;text-transform:uppercase}
.cta__motif ol li:nth-child(2){color:#C6D3E5}
.cta__motif ol li:nth-child(3){color:#8FA6C6}
.cta__motif svg{margin-top:.875rem;margin-left:auto;width:150px;color:var(--orange)}

/* ---------- service detail rows ---------- */
.srow{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
  grid-template-columns:minmax(0,1fr);padding-block:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line)}
.srow:first-of-type{border-top:0;padding-top:0}
@media (min-width:900px){
  .srow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .srow:nth-child(even) .srow__media{order:2}
}
.srow__media{position:relative}
/* bottom-left, not top-left: the top-left corner belongs to the photo chip, and
   an 80px disc parked on top of it clipped the caption */
.srow__icon{position:absolute;left:-.75rem;bottom:-.75rem;width:80px;height:80px;
  filter:drop-shadow(0 6px 16px rgba(10,45,91,.28))}
.srow h2{font-size:clamp(1.625rem,1.3rem + 1.4vw,2.25rem);font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em}
.srow > div > p{margin-top:1rem;color:var(--muted)}
.checks{margin-top:1.5rem;display:grid;gap:.625rem}
.checks li{position:relative;padding-left:1.75rem;font-size:.9688rem}
.checks li::before{content:"";position:absolute;left:0;top:.5rem;width:.75rem;height:.75rem;
  background:var(--orange);clip-path:polygon(0 0,100% 50%,0 100%,25% 50%)}

/* ---------- projects filter ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.625rem;margin-bottom:2rem}
.filters button{padding:.625rem 1.125rem;border:1px solid var(--line);background:#fff;
  border-radius:999px;cursor:pointer;color:var(--navy);
  font:700 .75rem/1 var(--head);letter-spacing:.09em;text-transform:uppercase;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.filters button:hover{border-color:var(--navy)}
.filters button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:940px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
/* min-width:0 all the way down, and a break rule on the links: the email address
   is one 31-character unbreakable token and will push a 390px layout sideways */
.cinfo{display:grid;gap:1.5rem;align-content:start;min-width:0}
.cinfo__item{display:flex;gap:1rem;align-items:flex-start;min-width:0}
.cinfo__item > div{min-width:0}
.cinfo__item a{overflow-wrap:break-word}
.cinfo__item img{flex:none;width:48px;height:48px}
.cinfo__item h3{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.cinfo__item a,.cinfo__item p{display:block;margin-top:.25rem;font-family:var(--head);
  font-weight:700;font-size:1.125rem;color:var(--navy);text-decoration:none}
.cinfo__item a:hover{color:var(--orange-ink);text-decoration:underline}
.cinfo__item .sub{font:400 .9375rem/1.5 var(--body);color:var(--muted);margin-top:.25rem}

.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.125rem}
.field label{display:block;margin-bottom:.4375rem;font:600 .875rem/1.4 var(--body);color:var(--text)}
.field .req{color:var(--orange-ink)}
.field input,.field select,.field textarea{width:100%;padding:.8125rem .875rem;
  border:1px solid #C9D2E0;border-radius:var(--r);background:#fff;color:var(--text);
  font:400 1rem/1.4 var(--body);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.field textarea{min-height:8.5rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#93A0B5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(10,45,91,.14)}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#B3261E}
.err{display:block;margin-top:.375rem;font-size:.8125rem;color:#B3261E;font-weight:500}
.two-up{display:grid;gap:0 1.125rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.two-up{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formcard .btn{width:100%;justify-content:center;margin-top:.5rem}
.formnote{margin-top:1rem;font-size:.8125rem;color:var(--muted);text-align:center}
.formstatus{margin-top:1rem;padding:.9375rem 1.125rem;border-radius:var(--r);
  font-size:.9375rem;font-weight:500;display:none}
.formstatus[data-state=ok]{display:block;background:#E7F4EC;color:#14532D;border:1px solid #A7D7BB}
.formstatus[data-state=err]{display:block;background:#FDECEA;color:#8C1D18;border:1px solid #F3B7B1}

.area{margin-top:2.5rem;padding:1.5rem;background:var(--gray);border-radius:var(--r);
  border-left:4px solid var(--orange)}
.area h3{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.area p{margin-top:.5rem;font-size:.9688rem}

/* ---------- prose ---------- */
.prose{max-width:62ch}
.prose p + p{margin-top:1.125rem}
.prose h3{margin-top:2.25rem;font-size:1.25rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.prose h3 + p{margin-top:.75rem}

/* ---------- footer ---------- */
.ftr{background:var(--navy-900);color:#9FB2CD;padding-block:clamp(3rem,5vw,4rem) 0;font-size:.9375rem}
.ftr__grid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.ftr__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.ftr__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.ftr__logo{display:block;width:clamp(170px,20vw,210px);margin-bottom:1.25rem}
.ftr__tag{max-width:34ch;color:#8FA6C6}
.ftr h2{color:#fff;font-size:.8125rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;margin-bottom:1rem}
.ftr__list{display:grid;gap:.625rem}
.ftr__list a{color:#B9C7DC;text-decoration:none}
.ftr__list a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ftr__contact{display:grid;gap:.75rem}
.ftr__contact div{display:flex;gap:.625rem;align-items:flex-start}
.ftr__contact svg{flex:none;margin-top:.25rem;color:var(--orange)}
.ftr__contact a{color:#D8E1EE;text-decoration:none}
.ftr__contact a:hover{color:#fff;text-decoration:underline}
.badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.4375rem .75rem;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  font:700 .6875rem/1 var(--head);letter-spacing:.11em;text-transform:uppercase;color:#D8E1EE}
.badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--orange)}
.ftr__bar{margin-top:clamp(2.5rem,4vw,3.5rem);padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.13);display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between;align-items:center;font-size:.8125rem;color:#8FA6C6}
.ftr__bar a{color:#8FA6C6}
.social{display:flex;gap:.625rem}
.social a{display:grid;place-items:center;width:2.375rem;height:2.375rem;border-radius:var(--r);
  background:rgba(255,255,255,.09);color:#D8E1EE;transition:background .18s var(--ease),color .18s var(--ease)}
.social a:hover{background:var(--orange);color:var(--navy)}

/* ---------- utility ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.rule{height:3px;background:var(--orange);width:3.5rem;border:0;margin:0 0 1.5rem}
.trk{margin-right:-.14em} /* letter-spacing applies after the last glyph */

/* a head-row's second cell holding only a link, pushed to the end of the row */
.lede--end{align-self:end;justify-self:start;margin:0}
@media (min-width:900px){.lede--end{justify-self:end;text-align:right}}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.quote{display:flex;flex-direction:column;margin:0;padding:2rem 1.75rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.stars{display:flex;gap:.1875rem;color:var(--orange);margin-bottom:1.125rem}
.quote blockquote{margin:0;flex:1}
.quote blockquote p{color:var(--text);font-size:1.0313rem;line-height:1.6}
/* real quotation marks, drawn rather than typed, so the text stays copyable */
.quote blockquote p::before{content:"\201C"}
.quote blockquote p::after{content:"\201D"}
.quote figcaption{margin-top:1.5rem;padding-top:1.125rem;border-top:1px solid var(--line)}
.quote__who{display:block;font:700 .9375rem/1.3 var(--head);color:var(--navy)}
.quote__src{display:block;margin-top:.25rem;font-size:.8125rem;color:var(--muted)}
.area--review{background:var(--navy);border-left-color:var(--orange)}
.area--review h3{color:#8FA6C6}
.area--review p{color:#D8E1EE}