/* =========================================================================
   Product Advising Geospatial — Design System
   Premium / enterprise / bright. See docs/DESIGN_SYSTEM.md for the full spec.
   ========================================================================= */

:root{
  /* Brand palette (unchanged from the approved mockup) */
  --navy:#092350;
  --blue:#0868f6;
  --blue-dark:#054fc0;
  --light:#edf5ff;
  --slate:#586c86;
  --line:#e0e9f3;
  --bg:#f7faff;
  --white:#ffffff;
  --shadow:0 9px 30px rgba(9,35,80,.08);
  --shadow-sm:0 2px 10px rgba(9,35,80,.06);

  /* Spacing scale — deliberate and reusable (4px base) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:56px;
  --space-11:72px;

  /* Layout targets per the production brief */
  --header-h:72px;
  --content-max:1280px;      /* text/content column, excluding gutters */
  --gutter:32px;
  --section-pad:48px;
  --section-pad-lg:56px;
  --card-gap:18px;
  --radius-sm:7px;
  --radius-md:10px;
  --radius-lg:14px;

  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
/* height:auto lets the width/height attributes reserve space (no layout shift)
   without pinning images to a fixed pixel height — the cause of the distorted
   card and feature images before the 2026-10 visual recovery. */
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p{margin-top:0}
ul{list-style:none;margin:0;padding:0}

h1{font-size:clamp(34px,4vw,56px);letter-spacing:-.03em;line-height:1.08;font-weight:800}
h2{font-size:clamp(25px,2.6vw,36px);letter-spacing:-.025em;line-height:1.16;font-weight:800}
h3{font-size:18px;letter-spacing:-.01em;font-weight:750}
p{line-height:1.62;color:var(--slate)}
.small{font-size:12.5px}

/* Skip link for keyboard/screen-reader users */
.skip-link{
  position:absolute;left:12px;top:-60px;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 8px;z-index:200;transition:top .15s;font-weight:700;font-size:13px;
}
.skip-link:focus{top:0}

:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.wrap{max-width:calc(var(--content-max) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--blue);text-transform:uppercase}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 22px;border-radius:6px;
  border:1.5px solid var(--blue);background:#fff;color:var(--blue);
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(8,104,246,.18)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn svg{width:16px;height:16px;flex:none}

/* ---------- Header / nav ---------- */
.nav{
  height:var(--header-h);border-bottom:1px solid var(--line);background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(8px);position:sticky;top:0;z-index:60;
}
.navin{height:100%;display:flex;justify-content:space-between;align-items:center;gap:28px}
.brand{display:block;flex:none}
.brand img{height:56px;width:auto;display:block}
.primary-nav{flex:1;display:flex;justify-content:center;min-width:0}
.navlinks{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500;color:var(--navy)}
.navlinks>li{position:relative}
.navlinks a.toplevel{display:flex;align-items:center;gap:6px;padding:12px 2px;white-space:nowrap}
.navlinks a:hover,.textlink:hover{color:var(--blue)}
.navlinks svg{width:14px;height:14px;transition:transform .15s}
.has-menu:hover .toplevel svg,.has-menu:focus-within .toplevel svg{transform:rotate(180deg)}
.has-menu.is-dismissed .toplevel svg{transform:none}
.actions{display:flex;gap:12px;align-items:center;flex:none}
.actions .btn{min-height:44px;padding:0 20px}
.mobile-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px;color:var(--navy)}
.mobile-toggle svg{width:24px;height:24px}
.mobile-toggle__close,.mobile-toggle[aria-expanded="true"] .mobile-toggle__open{display:none}
.mobile-toggle[aria-expanded="true"] .mobile-toggle__close{display:inline-flex}
.mobile-toggle__open{display:inline-flex}

.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:18px;display:none;min-width:580px;gap:6px;grid-template-columns:repeat(2,1fr);z-index:70;
}
.has-menu:hover .mega,.has-menu:focus-within .mega{display:grid}
.has-menu.is-dismissed .mega{display:none}
.mega a{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:8px;font-weight:600;font-size:13.5px}
.mega a:hover{background:var(--bg);color:var(--blue)}
.mega a small{color:var(--slate);font-weight:400;font-size:12px;line-height:1.45}

@media(max-width:1280px){
  .brand img{height:46px}
  .navlinks{gap:24px}
}
@media(max-width:1180px){
  .navin{gap:16px}
  .brand img{height:40px}
  .navlinks{gap:16px;font-size:13.5px}
  .navlinks a.toplevel{gap:4px}
  .actions{gap:8px}
  .actions .btn{padding:0 13px;font-size:13.5px;gap:7px}
}
@media(max-width:1000px){
  .primary-nav,.actions .btn:not(.primary){display:none}
  .mobile-toggle{display:inline-flex}
  .navin{gap:12px}
}

.mobile-panel{
  display:none;position:fixed;inset:var(--header-h) 0 0 0;background:#fff;z-index:55;
  overflow-y:auto;padding:8px var(--gutter) 32px;overscroll-behavior:contain;
}
.mobile-panel.open{display:block}
.mobile-panel a{display:flex;align-items:center;min-height:48px;padding:6px 2px;border-bottom:1px solid var(--line);font-weight:500;font-size:15.5px}
.mobile-panel .group-label{padding-top:22px;padding-bottom:4px;color:var(--blue-dark);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.mobile-panel a.mobile-panel__cta{margin-top:24px;justify-content:center;border-bottom:1.5px solid var(--blue);font-weight:600}

/* ---------- Sections ---------- */
.section{padding:var(--section-pad) 0}
.section.lg{padding:var(--section-pad-lg) 0}
.muted-section{background:var(--bg)}
.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:var(--space-6)}
.section-top p{max-width:460px}

/* ---------- Cards / grids ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--card-gap)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--card-gap)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--light)}
.card-inner{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.card h3{font-size:16.5px}
.card p{font-size:13.3px;color:var(--slate);flex:1}
.textlink{font-weight:750;color:var(--blue);font-size:13.3px;display:inline-flex;align-items:center;gap:5px}
.textlink svg{width:14px;height:14px}

/* ---------- Split sections ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--space-10)}
.split.reverse{grid-template-columns:.95fr 1.05fr}
.photo{width:100%;border-radius:var(--radius-lg);aspect-ratio:4/3;object-fit:cover;background:var(--light)}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:var(--space-5) 0 var(--space-6)}
.feature-list li{font-size:13.3px;font-weight:650;display:flex;gap:8px;align-items:flex-start}
.feature-list li svg{width:16px;height:16px;color:var(--blue);flex:none;margin-top:1px}

/* ---------- Strip / stats ---------- */
.strip{background:var(--light);padding:28px 0}
.stripin{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.stripitem{flex:1;min-width:140px;border-right:1px solid #cbd9e9;padding:0 18px}
.stripitem:last-child{border:0}
.stripitem b{font-size:17px}
.stripitem small{display:block;color:var(--slate);margin-top:5px}

/* ---------- Final CTA ---------- */
.finalcta{background:linear-gradient(120deg,#07234e,#0a61c5);color:#fff;padding:var(--space-9) 0}
.finalcta p{color:#cfe2ff;margin-top:var(--space-2)}
.finalcta .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:#fff;padding:52px 0 28px;border-top:1px solid var(--line)}
.footer-columns{display:grid;grid-template-columns:minmax(0,1.9fr) repeat(3,minmax(0,1fr));gap:40px}
.footer-brand img{height:40px;width:auto;margin-bottom:16px}
.footer-brand p{font-size:13.5px;line-height:1.65;max-width:360px;margin:0}
.footer-heading{margin:4px 0 12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);line-height:1.3}
.footer nav a{display:block;font-size:14px;color:var(--slate);padding:6px 0}
.footer nav a:hover{color:var(--blue)}
.copyright{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-size:13px;line-height:1.6;color:var(--slate)}
.copyright__links{display:flex;gap:24px}
.copyright__links a{color:var(--slate);padding:4px 0}
.copyright__links a:hover{color:var(--blue)}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{background:linear-gradient(95deg,#f6faff,#e9f3ff);padding:var(--section-pad) 0}
.page-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.page-hero img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:84% 50%;border-radius:var(--radius-lg)}   /* hub pages reuse the 16:9 hero frame: keep its drone in view */
.page-hero p{font-size:16px}
.page-hero-figure{margin:0}
.page-hero-figure picture{display:block}
.page-hero-figure figcaption{margin-top:6px;font-size:12px;color:var(--slate,#5d708b);text-align:right}
.page-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--space-5)}

.pill{background:var(--light);color:var(--blue);padding:7px 12px;border-radius:100px;font-size:11.5px;font-weight:750;display:inline-block}

/* ---------- Process steps ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--card-gap)}
.process.steps-6{grid-template-columns:repeat(3,1fr)}
.step{background:var(--bg);padding:var(--space-6);border-radius:var(--radius-md)}
.step b{color:var(--blue);font-size:19px}
.summary{padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.summary .icon-wrap{color:var(--blue);margin-bottom:var(--space-3)}
.summary .icon-wrap svg{width:28px;height:28px}
.summary picture img{width:100%;border-radius:9px;margin-top:12px;aspect-ratio:4/3;object-fit:cover}

/* ---------- Forms ---------- */
.form{display:grid;gap:var(--space-5);max-width:760px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
input,select,textarea{
  width:100%;padding:11px 13px;border:1px solid #bccde0;border-radius:var(--radius-sm);
  background:#fff;font-size:14px;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{min-height:120px;resize:vertical}
.note{background:#fff8e7;border:1px solid #f4dba4;color:#725419;padding:14px 18px;border-radius:9px;font-size:13px;margin-bottom:var(--space-5)}
.note.info{background:#eef6ff;border-color:#bcdcff;color:#0a3a78}
.legal{max-width:780px}
.legal p,.legal li{font-size:16px}
.legal p{margin-bottom:var(--space-4)}
.legal h2{font-size:22px;margin:var(--space-8) 0 var(--space-3);scroll-margin-top:96px}
.legal ul{margin:0 0 var(--space-4) 22px;color:var(--slate);line-height:1.62}
.legal li{margin-bottom:6px}
.legal a{color:var(--blue);text-decoration:underline;overflow-wrap:anywhere}
.legal strong{color:var(--navy)}
.legal-toc{background:var(--bg,#f7faff);border:1px solid var(--line,#e0e9f3);border-radius:var(--radius-lg);padding:20px 24px;margin:var(--space-6) 0}
.legal-toc .legal-toc__title{font-size:14px;margin:0 0 10px;letter-spacing:.04em;text-transform:uppercase}
.legal-toc ol{margin:0 0 0 20px;columns:2;column-gap:32px;color:var(--slate)}
.legal-toc li{font-size:14px;margin-bottom:6px;break-inside:avoid}
@media (max-width:640px){.legal-toc ol{columns:1}}
.result{margin-top:var(--space-3);font-weight:650}
.result.ok{color:#12633e}
.result.error{color:#9c2626}

/* ---------- Timeline / portal-concept blocks ---------- */
.timeline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.timeline-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}

/* ---------- Icon circle ---------- */
.icon-circle{width:42px;height:42px;border-radius:50%;background:var(--light);display:grid;place-items:center;color:var(--blue);flex:none}
.icon-circle svg{width:21px;height:21px}

/* ---------- Sitemap list (footer sitemap helper page) ---------- */
.sitemap-cols{columns:3;column-gap:32px}
.sitemap-cols a{display:block;font-size:13px;color:var(--blue);margin:7px 0;break-inside:avoid}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--line);padding:var(--space-5) 0}
.faq-item summary{font-weight:750;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:16px;height:16px;flex:none;transition:transform .15s;color:var(--blue)}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item p{margin-top:var(--space-3)}

/* ---------- Responsive grid collapses ---------- */
@media(max-width:1024px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .split,.split.reverse{grid-template-columns:1fr}
  .split img,.split.reverse img{order:-1}
}
@media(max-width:900px){
  .service-grid,.summary-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero .wrap{grid-template-columns:1fr}
  .page-hero img{order:-1}
  .page-hero-figure{order:-1}
  .footer-columns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
  .process,.process.steps-6{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  :root{--gutter:20px}
  .brand img{height:36px}
  .actions{gap:6px}
  .actions .btn{padding:0 14px;font-size:13px}
  .card-grid,.service-grid,.summary-grid,.process,.process.steps-6,.timeline-grid,.formgrid{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .finalcta .wrap{display:block}
  .finalcta .btn{margin-top:var(--space-5)}
  .footer-columns{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footer-brand{grid-column:1 / -1}
  .section{padding:36px 0}
  .section-top{display:block}
  .sitemap-cols{columns:1}
  .stripitem{flex:1 0 100%;border:0;padding:10px 0;border-bottom:1px solid #cbd9e9}
  .stripitem:last-child{border:0}
}

/* ---------- Utility ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.center-text{text-align:center;margin-left:auto;margin-right:auto}

/* =========================================================================
   Homepage — visual recovery (2026-10)
   Rebuilt against work/design_reference/approved-homepage.png.
   Everything below is scoped to hp-/svc- classes used only by src/index.njk,
   so interior pages keep their current layout until the homepage is approved.
   ========================================================================= */
.hp-eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-dark);line-height:1.4}
.hp-section{padding-block:24px}
.hp-section h2,.hp-approach h2,.hp-cta h2{font-size:clamp(23px,2.15vw,30px);font-weight:700;letter-spacing:-.022em;line-height:1.2;margin:0}
.line{display:inline}
@media(min-width:601px){.line{display:block}}
.hp-hero h1,.hp-section h2{text-wrap:balance}
.hp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:20px}
.hp-head .hp-eyebrow{margin-bottom:8px}
.hp-head .textlink{padding-block:5px;white-space:nowrap}
.textlink{font-weight:600;font-size:14px}
.hp-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Hero ---------- */
.hp-hero{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.hp-hero__media{position:absolute;inset:0 0 0 auto;width:min(62%,1080px);z-index:-1}
.hp-hero__media picture,.hp-hero__media img{display:block;width:100%;height:100%}
/* Drone sits in the upper right of the artwork: anchor right and near the top so it is never cropped. */
.hp-hero__media img{object-fit:cover;object-position:82% 30%}
@media(min-width:1600px){.hp-hero__media img{object-position:82% 12%}}
.hp-hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 9%,rgba(255,255,255,.72) 22%,rgba(255,255,255,.34) 38%,rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 64%);
}
.hp-hero__inner{width:100%;min-height:440px;display:flex;align-items:center;padding-block:36px}
.hp-hero__copy{max-width:600px}
.hp-hero .hp-eyebrow{margin-bottom:14px;letter-spacing:.24em}
.hp-hero h1{font-size:clamp(33px,3.65vw,52px);font-weight:700;letter-spacing:-.032em;line-height:1.06;margin:0;color:var(--navy)}
.hp-hero__summary{font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:#3f5373;max-width:500px;margin:16px 0 24px}
.hp-points{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:28px}
.hp-points li{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--navy)}
.hp-points svg{width:26px;height:26px;color:var(--blue);flex:none}

@media(max-width:1180px){
  .hp-hero__media{width:62%}
  .hp-hero__media::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 14%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.4) 48%,rgba(255,255,255,.08) 64%,rgba(255,255,255,0) 76%)}
  .hp-hero__copy{max-width:520px}
  .hp-points{gap:12px 24px}
}
/* Tablet and mobile: a deliberate stacked hero — copy first, then the full artwork. */
@media(max-width:900px){
  .hp-hero{background:#fff}
  .hp-hero__inner{min-height:0;padding-block:32px 28px}
  .hp-hero__copy{max-width:640px}
  .hp-hero__media{position:relative;inset:auto;width:100%;aspect-ratio:16/9;z-index:0;order:2}
  .hp-hero{display:flex;flex-direction:column}
  .hp-hero__media img{object-position:70% 20%}
  .hp-hero__media::after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 22%)}
}
@media(max-width:600px){
  .hp-hero__inner{padding-block:26px 24px}
  .hp-hero__media{aspect-ratio:3/2}
  .hp-hero__summary{margin:14px 0 22px}
  .hp-hero .hp-actions .btn{flex:1 1 auto}
  .hp-points{margin-top:24px;gap:14px 20px}
  .hp-points li{flex:1 1 44%}
}

/* ---------- Core service cards ---------- */
.hp-services{padding-top:38px}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:20px}   /* 1fr rows: every card the same height, in every row */
.svc-card{
  position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(9,35,80,.04),0 6px 20px rgba(9,35,80,.05);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.svc-card:hover,.svc-card:focus-within{transform:translateY(-3px);box-shadow:0 14px 34px rgba(9,35,80,.12);border-color:#c9dcf3}
/* 2.3:1 — the service-card image proportion in the approved mockup (owner decision, 2026-10-11). */
.svc-card__media{position:relative;aspect-ratio:23/10;background:var(--light);overflow:hidden}
.svc-card__media picture,.svc-card__media img{display:block;width:100%;height:100%}
.svc-card__media img{object-fit:cover;object-position:center}
.svc-card__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 14px}
.svc-card h3{font-size:17px;font-weight:650;letter-spacing:-.012em;line-height:1.25;margin:0 0 8px;color:var(--navy)}
.svc-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}   /* whole card is one link */
.svc-card h3 a:focus-visible{outline:none}
.svc-card:has(h3 a:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.svc-card p{font-size:13.5px;line-height:1.5;color:var(--slate);margin:0 0 12px;flex:1}
.svc-card__foot{display:flex;align-items:center;justify-content:space-between}
.round-arrow{width:34px;height:34px;border-radius:50%;background:var(--light);color:var(--blue);display:grid;place-items:center;transition:background .18s,color .18s}
.round-arrow svg{width:16px;height:16px}
.svc-card:hover .round-arrow{background:var(--blue);color:#fff}
.svc-card:hover .textlink{color:var(--blue-dark)}

/* ---------- Featured sections ---------- */
.hp-feature__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.hp-feature--reverse .hp-feature__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.hp-feature--reverse .hp-feature__media{order:2}
.hp-feature__media{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--light);box-shadow:0 10px 30px rgba(9,35,80,.10)}
.hp-feature__media picture,.hp-feature__media img{display:block;width:100%;height:100%}
.hp-feature__media img{object-fit:cover}
.hp-feature__copy h2{font-size:clamp(24px,2.35vw,32px)}
.hp-feature__copy>p:not(.hp-eyebrow){font-size:16px;line-height:1.6;color:#3f5373;margin:14px 0 18px;max-width:560px}
.hp-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px;margin:0 0 24px}
.hp-checks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#33466a}
.hp-checks svg{width:16px;height:16px;color:var(--blue);flex:none;margin-top:2px;stroke-width:2.6}

.hp-chip{
  position:absolute;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.97);border-radius:10px;
  padding:12px 16px;box-shadow:0 10px 28px rgba(9,35,80,.22);font-size:12px;line-height:1.35;color:var(--slate);
}
.hp-chip strong{display:block;font-size:13.5px;font-weight:600;color:var(--navy)}
.hp-chip--check{right:4%;top:50%;transform:translateY(-50%)}
.hp-chip--progress{right:4%;top:8%;min-width:176px}
.hp-chip__tick{width:30px;height:30px;border-radius:50%;background:#22a85a;color:#fff;display:grid;place-items:center;flex:none}
.hp-chip__tick svg{width:16px;height:16px;stroke-width:3}
.hp-chip__text{flex:1}
.hp-chip__bar{display:block;height:6px;border-radius:6px;background:#e3eaf3;margin:8px 0 6px;overflow:hidden}
.hp-chip__bar i{display:block;width:72%;height:100%;border-radius:6px;background:#22a85a}

/* ---------- Additional services ---------- */
.hp-more{padding-bottom:44px}
.svc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.svc-tile{
  position:relative;display:flex;align-items:flex-start;gap:14px;padding:20px 40px 20px 20px;background:#fff;
  border:1px solid var(--line);border-radius:10px;transition:border-color .18s,box-shadow .18s,transform .18s;
}
.svc-tile:hover,.svc-tile:focus-within{border-color:#bcd5f5;box-shadow:0 10px 26px rgba(9,35,80,.09);transform:translateY(-2px)}
.svc-tile__icon{width:44px;height:44px;border-radius:10px;background:var(--light);color:var(--blue);display:grid;place-items:center;flex:none}
.svc-tile__icon svg{width:22px;height:22px}
.svc-tile h3{font-size:16px;font-weight:650;letter-spacing:-.01em;line-height:1.3;margin:2px 0 6px}
.svc-tile h3 a::after{content:"";position:absolute;inset:0}
.svc-tile h3 a:focus-visible{outline:none}
.svc-tile:has(h3 a:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.svc-tile p{font-size:13.5px;line-height:1.5;color:var(--slate);margin:0}
.svc-tile__arrow{position:absolute;right:16px;top:22px;color:var(--blue)}
.svc-tile__arrow svg{width:16px;height:16px}

/* ---------- Approach strip ---------- */
.hp-approach{background:#f3f7fc;border-block:1px solid var(--line);padding-block:30px}
.hp-approach__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,3.4fr);gap:36px;align-items:center}
.hp-approach h2{font-size:clamp(21px,1.8vw,25px)}
.hp-approach__items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-approach__items li{display:flex;gap:14px;align-items:flex-start;padding:4px 22px;border-left:1px solid #d5e0ee}
.hp-approach__items svg{width:30px;height:30px;color:var(--blue);flex:none;margin-top:2px}
.hp-approach__value{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--blue)}
.hp-approach__label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-top:5px}
.hp-approach__text{display:block;font-size:12.5px;line-height:1.5;color:var(--slate);margin-top:3px}

/* ---------- Closing call to action ---------- */
.finalcta.hp-cta{position:relative;isolation:isolate;overflow:hidden;color:var(--navy);padding-block:34px;background:linear-gradient(180deg,#eef5fd 0%,#dfecfa 100%)}
.hp-cta__media{position:absolute;inset:0 0 0 auto;width:min(30%,420px);z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%);opacity:.9}
.hp-cta__media picture,.hp-cta__media img{display:block;width:100%;height:100%}
.hp-cta__media img{object-fit:cover;object-position:60% 50%}
.finalcta.hp-cta .wrap.hp-cta__grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.34fr);gap:32px;align-items:center}
.finalcta.hp-cta .hp-eyebrow{color:var(--blue-dark);margin:0 0 8px}
.hp-cta h2{font-size:clamp(22px,2vw,28px)}
.finalcta.hp-cta p:not(.hp-eyebrow){color:#3f5373;font-size:15px;line-height:1.5;margin:8px 0 0;max-width:440px}
.finalcta.hp-cta .btn{margin-top:0}

/* ---------- Homepage responsive ---------- */
@media(max-width:1180px){
  .hp-approach__grid{grid-template-columns:1fr;gap:20px}
  .hp-approach__items li:first-child{border-left:0;padding-left:0}
  .finalcta.hp-cta .wrap.hp-cta__grid{grid-template-columns:minmax(0,1fr) auto}
  .hp-cta__media{opacity:.45}
}
@media(max-width:1024px){
  .svc-grid,.svc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-approach__items{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}
  .hp-approach__items li:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:900px){
  .hp-feature__grid,.hp-feature--reverse .hp-feature__grid{grid-template-columns:1fr;gap:24px}
  .hp-feature--reverse .hp-feature__media{order:0}
  .hp-feature__copy>p:not(.hp-eyebrow){max-width:none}
  .finalcta.hp-cta .wrap.hp-cta__grid{grid-template-columns:1fr;gap:20px}
  .hp-cta__media{display:none}
}
@media(max-width:600px){
  .hp-section{padding-block:22px}
  .hp-services{padding-top:32px}
  .hp-head{display:block;margin-bottom:18px}
  .hp-head .textlink{display:inline-flex;margin-top:10px;padding:6px 0;min-height:32px}
  .svc-grid,.svc-tiles{grid-template-columns:1fr;gap:16px}
  .hp-checks{grid-template-columns:1fr}
  .hp-feature__copy .btn{width:100%;white-space:normal;text-align:center;padding-block:10px}
  .hp-chip{padding:9px 12px;gap:10px;font-size:11px}
  .hp-chip strong{font-size:12.5px}
  .hp-chip--progress{min-width:150px}
  .hp-approach__items{grid-template-columns:1fr;gap:18px}
  .hp-approach__items li{border-left:0;padding-left:0}
  .finalcta.hp-cta{padding-block:30px}
  .finalcta.hp-cta .hp-actions .btn{flex:1 1 100%}
  .finalcta.hp-cta .btn{margin-top:0}
}

/* ============================================================
   Large desktop (wider than 1440px) — v1.4.2
   Everything at 1440px and below is untouched: every rule here sits inside this one media query.

   One centered container for the whole site. Its edges are the left edge of the header logo and the
   right edge of the "Get a Quote" button; header, hero copy, card grids, feature sections, band
   content and footer all use .wrap, so they share those edges. --content-max is 1280px at a 1440px
   window, grows 1px for every 2px of extra window and stops at 1520px (a 1920px window). Wider
   screens get equal margins.

   Hero and quote bands (owner decisions, 2026-10-12):
   - full-width gradient bands: --band-hero and --band-cta. Edit those two values to retune them;
   - text and buttons stay in the container on the left; the photograph is right-justified: its right
     edge is the right edge of the band (the window), crisp and fully opaque, with no fade or overlay;
   - the hero photograph starts at the same place in the container as at 1440 (36.5% across) and runs
     to the band's right edge, up to --hero-art-max wide, so it grows with the window instead of
     drifting away from the headline. Past that width it stays that size, anchored right;
   - blending happens only on the photograph's left side, over a fixed distance (the same 570px ramp
     the approved white gradient has at 1440), so it does not widen as the picture does;
   - the hero grows from 440px to at most 475px with the container.
   ============================================================ */
@media(min-width:1441px){
  :root{
    --content-max:clamp(1280px,calc(1280px + (100vw - 1440px) * .5),1520px);
    --page-margin:calc((100vw - var(--content-max)) / 2);          /* window edge to the logo / to Get a Quote */
    --hero-art-max:1210px;                                          /* keeps at least 70% of the picture's height in view */
    --hero-art-w:min(calc(100vw - var(--page-margin) - var(--content-max) * .365),var(--hero-art-max));
    --band-hero:linear-gradient(105deg,#fafcff 0%,#eff5fd 32%,#dfecfc 65%,#c7e0fc 100%);
    --band-cta:linear-gradient(105deg,#f7fafe 0%,#eaf3fe 52%,#d7e8fa 100%);
    --art-blend:linear-gradient(90deg,transparent 0,rgba(0,0,0,.06) 80px,rgba(0,0,0,.28) 196px,rgba(0,0,0,.66) 340px,rgba(0,0,0,.92) 464px,#000 570px,#000 100%);
  }
  .hp-hero{background:var(--band-hero);border-bottom:1px solid var(--line)}
  .hp-hero__media{inset:0 0 0 auto;width:var(--hero-art-w);-webkit-mask-image:var(--art-blend);mask-image:var(--art-blend)}
  .hp-hero__media::after{content:none}
  .hp-hero__media img{object-position:right 25%}
  .hp-hero__inner{min-height:max(440px,calc(var(--content-max) * .635 * 440 / 893))}
  .finalcta.hp-cta{background:var(--band-cta)}
  .hp-cta__media{inset:0 0 0 auto;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%)}
  .hp-cta__media img{object-position:right center}
}