/* ==========================================================================
   Trustlane HR Solutions — Homepage
   Design system. Tokens follow Trustlane-Brand-Guidelines.docx §03 / §04 / §05.
   Responsiveness is built with CONTAINER queries, so each band lays itself out
   from its own width rather than the viewport's.
   ========================================================================== */

:root{
  /* Brand — primary */
  --navy:        #0B2A49;
  --navy-700:    #123A5E;
  --navy-deep:   #081F36;   /* extension: footer only, a shade under navy-900 */
  --teal-600:    #0F9F90;   /* extension: darker step of --teal, statement band only */
  --teal:        #14B8A6;
  --teal-700:    #0C7A70;
  --white:       #FFFFFF;

  /* Brand — extended neutrals */
  --gray-50:     #F5F7FA;
  --gray-200:    #E4E9EF;
  --gray-500:    #64748B;
  --gray-600:    #5F6E82;   /* extension: secondary TEXT — a half-step darker than gray-500
                               so muted copy also clears AA on the #F5F7FA tint (4.84:1) */
  --gray-900:    #1E293B;

  --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --font-body:    'Poppins', 'Segoe UI', system-ui, sans-serif;

  --r-card: 10px;
  --r-btn:  8px;
  --r-chip: 4px;

  --shadow:    0 1px 2px rgba(11,42,73,.04), 0 18px 40px -24px rgba(11,42,73,.18);
  --shadow-lg: 0 2px 4px rgba(11,42,73,.05), 0 40px 80px -40px rgba(11,42,73,.32);

  --pad-x: 32px;
  --sec-y: 132px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--white);
  color:var(--gray-900);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; height:auto; }
svg.arw{ width:14px; height:14px; }
svg.chev{ width:9px; height:9px; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--teal-700); outline-offset:3px; border-radius:2px; }
.section--navy :focus-visible,.hero :focus-visible,.footer :focus-visible,
.utility :focus-visible,.nf :focus-visible{ outline-color:#5FE3D3; }
button{ font:inherit; color:inherit; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* Container scopes. Placed on the full-bleed band, never on .wrap — an element
   cannot be styled by a query against its own size. */
.utility,.header-main,.hero,.credbar-shell,
.section,.band,.footer{
  container-type:inline-size;
}

.section{ padding-block:var(--sec-y); position:relative; }
.section--white{ background:var(--white); }
.section--tint{ background:var(--gray-50); }
.section--navy{ background:var(--navy); color:rgba(255,255,255,.76); }
.section--rule{ border-top:1px solid var(--gray-200); }

.grid{ display:grid; gap:64px; }
.g-7-5{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.g-5-7{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.g-4-8{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
.g-3{   grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{   grid-template-columns:repeat(4,minmax(0,1fr)); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  margin:0;
  color:var(--navy);
  letter-spacing:-.01em;
}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{ color:var(--white); }

.h1{ font-size:58px; line-height:1.06; letter-spacing:-.015em; text-wrap:balance; }
.h2{ font-size:42px; line-height:1.1; text-wrap:balance; }
.h3{ font-size:21px; line-height:1.3; font-weight:600; letter-spacing:0; text-wrap:balance; }
.h4{ font-size:18px; line-height:1.35; font-weight:600; letter-spacing:0; }

.accent{ color:var(--teal); }
.section--white .accent,.section--tint .accent{ color:var(--teal-700); }

p{ margin:0; }
.lead{ font-size:18.5px; line-height:1.65; color:var(--gray-600); }
.section--navy .lead{ color:rgba(255,255,255,.74); }
.body{ font-size:16px; color:var(--gray-600); }
.section--navy .body{ color:rgba(255,255,255,.7); }
.small{ font-size:14px; line-height:1.6; color:var(--gray-600); }
.section--navy .small{ color:rgba(255,255,255,.6); }

/* Eyebrow: 28px teal rule + uppercase Poppins label */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:11.5px; font-weight:600; line-height:1;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal-700);
  margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:28px; height:2px; background:var(--teal); flex:none;
}
.section--navy .eyebrow,.nf .eyebrow{ color:var(--teal); }

.eyebrow-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px 7px 12px;
  border:1px solid rgba(20,184,166,.38);
  background:rgba(20,184,166,.10);
  border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal);
  margin-bottom:28px;
}
.eyebrow-pill .ck{ width:13px; }

.stack-sm > * + *{ margin-top:14px; }
.stack   > * + *{ margin-top:22px; }
.stack-lg> * + *{ margin-top:32px; }

.measure{ max-width:60ch; }
.measure-sm{ max-width:46ch; }

/* --------------------------------------------------------------------------
   Checkmark — the supplied brand asset, four scales. Never redrawn.
   -------------------------------------------------------------------------- */

.ck{ flex:none; width:16px; height:auto; }
.ck--xs{ width:14px; }
.ck--md{ width:20px; }
.ck--lg{ width:28px; }
.ck--xl{ width:40px; }

.cklist{ list-style:none; margin:0; padding:0; }
.cklist li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:14.5px; line-height:1.55; color:var(--gray-600);
  padding-block:5px;
}
.cklist li .ck{ margin-top:5px; }
.section--navy .cklist li{ color:rgba(255,255,255,.72); }
.cklist--2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  border-radius:var(--r-btn);
  font-size:15px; font-weight:600; line-height:1;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn .arw{ width:14px; height:14px; flex:none; transition:transform .18s ease; }
.btn:hover .arw{ transform:translateX(3px); }

.btn--primary{ background:var(--teal-700); color:var(--white); }
.btn--primary:hover{ background:#0A6A61; }

.btn--primary-navy{ background:var(--teal); color:var(--navy); }
.btn--primary-navy:hover{ background:#2CCBBA; }

.btn--ghost{ border-color:var(--navy); color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:var(--white); }

.btn--ghost-navy{ border-color:rgba(255,255,255,.28); color:var(--white); }
.btn--ghost-navy:hover{ border-color:var(--white); background:rgba(255,255,255,.08); }

.btn--sm{ padding:11px 18px; font-size:14px; }

.link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--teal-700);
  border-bottom:1px solid rgba(12,122,112,.3);
  padding-bottom:2px; line-height:1.2;
  transition:border-color .18s ease;
}
.link:hover{ border-color:var(--teal-700); }
.section--navy .link{ color:var(--teal); border-bottom-color:rgba(20,184,166,.35); }
.section--navy .link:hover{ border-color:var(--teal); }

.link svg.arw{ width:13px; height:13px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* --------------------------------------------------------------------------
   Artwork panels. Original vector artwork on a navy duotone field — no
   photography is used or needed anywhere on this page.
   -------------------------------------------------------------------------- */

.plate{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 6%,  rgba(20,184,166,.30) 0%, rgba(20,184,166,0) 46%),
    radial-gradient(100% 70% at 12% 92%, rgba(18,58,94,.95)  0%, rgba(18,58,94,0)  60%),
    linear-gradient(158deg, #16456E 0%, #0B2A49 48%, #071B30 100%);
  box-shadow:var(--shadow-lg);
  isolation:isolate;
}
.plate::before{   /* grain */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'%20opacity='.42'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.plate::after{    /* 1px inset frame + vignette */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:inherit;
  box-shadow:inset 0 0 120px rgba(4,15,28,.22), inset 0 -60px 70px -60px rgba(4,15,28,.3);
}
.plate > .plate-art{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
}
.plate--hero{ aspect-ratio:4/5; }
.plate--wide{ aspect-ratio:4/3; }
.plate--square{ aspect-ratio:1/1; }


/* --------------------------------------------------------------------------
   Header — utility strip + sticky nav
   -------------------------------------------------------------------------- */

.utility{
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,.66);
}
.utility .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:38px; }
.utility-l,.utility-r{ display:flex; align-items:center; gap:22px; }
.utility-l span{ display:flex; align-items:center; gap:8px; }
.utility-r a:hover{ color:var(--white); }
.utility .dot{ color:rgba(255,255,255,.28); }
/* Small lead-in marks use a plain teal dot, not the trademark — the brand book
   reserves the icon-alone for marks at 24px and above. */
.dotted{ display:inline-flex; align-items:center; gap:9px; }
.dotted::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--teal); flex:none;
}

.header-main{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  box-shadow:0 1px 0 rgba(11,42,73,.02);
}
/* `>` matters: .drawer is a child of .header-main and has its own .wrap — a
   descendant selector here laid the mobile menu out as a horizontal desktop row. */
.header-main > .wrap{ display:flex; align-items:center; gap:28px; min-height:76px; }
.brand{ flex:none; }
.brand img{ width:186px; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-item{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  padding:12px 14px;
  font-size:15px; font-weight:500; color:var(--gray-900);
  border-radius:var(--r-chip);
  transition:color .16s ease, background .16s ease;
}
.nav-link:hover{ color:var(--teal-700); background:var(--gray-50); }
.nav-link .chev{ width:9px; height:9px; opacity:.45; transition:transform .18s ease; }
.nav-item:hover .nav-link .chev{ transform:rotate(180deg); }
.nav-actions{ display:flex; align-items:center; gap:12px; margin-left:20px; }

/* Services dropdown — shown, not overbuilt */
.dropdown{
  position:absolute; top:calc(100% + 14px); left:-16px; z-index:70;
  width:660px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);
  padding:10px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown::before{
  content:""; position:absolute; top:-14px; left:0; right:0; height:14px;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dd-item{ padding:16px 16px 18px; border-radius:var(--r-chip); transition:background .16s ease; }
.dd-item:hover{ background:var(--gray-50); }
.dd-num{
  font-family:var(--font-body); font-size:12px; font-weight:700;
  color:var(--teal-700); letter-spacing:.08em; display:block; margin-bottom:8px;
}
.dd-item strong{ display:block; font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.dd-item span{ font-size:13px; line-height:1.5; color:var(--gray-600); }
.dd-foot{
  grid-column:1 / -1; margin-top:6px;
  border-top:1px solid var(--gray-200);
  padding:14px 16px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.dd-foot span{ font-size:13px; color:var(--gray-600); }
.dd-foot .link{ white-space:nowrap; flex:none; }

.nav-toggle{
  display:none; margin-left:auto;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--gray-200); border-radius:var(--r-btn);
  cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:1.5px; background:var(--navy); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--navy);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

.drawer{
  display:none;
  border-top:1px solid var(--gray-200);
  background:var(--white);
  padding:10px 0 22px;
}
.drawer.is-open{ display:block; }
/* The drawer is inside the sticky header, so anything taller than the space
   under it is unreachable — a pinned box cannot be scrolled back into view.
   The offset is the header block at its TALLEST: at scroll 0 the drawer sits
   below the utility strip as well as the header row, and the strip only
   scrolls away once the header pins. Measured: utility+header is 158px at
   320px wide, 132 to 640, 108 to 980, 116 above. Taking the worst case for
   each side of the 981 breakpoint means the panel fits in both states; it
   scrolls internally when the cap bites, which is only ever in landscape. */
.drawer{
  max-height:calc(100vh - 158px - env(safe-area-inset-top, 0px));
  max-height:calc(100dvh - 158px - env(safe-area-inset-top, 0px));
  overflow-y:auto;
  overscroll-behavior:contain;
}
@container (min-width:981px){
  .drawer{
    max-height:calc(100vh - 116px - env(safe-area-inset-top, 0px));
    max-height:calc(100dvh - 116px - env(safe-area-inset-top, 0px));
  }
}
.drawer .wrap > a:not(.btn){
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 0; font-size:16px; font-weight:500; color:var(--navy);
  border-bottom:1px solid var(--gray-200);
}
.drawer .wrap > a:not(.btn) .chev{ width:9px; opacity:.4; }
.drawer .btn{ width:100%; justify-content:center; margin-top:20px; }
.drawer-meta{ margin-top:18px; font-size:13px; color:var(--gray-600); display:flex; flex-direction:column; gap:6px; }

/* --------------------------------------------------------------------------
   1 — Hero
   -------------------------------------------------------------------------- */

.hero{
  position:relative; overflow:hidden;
  background:var(--navy);
  color:rgba(255,255,255,.76);
  padding-block:92px 148px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero::before{  /* dot grid */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.15) 70%, transparent);
}
.hero::after{   /* lane lift */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 90% at 78% 12%, rgba(18,58,94,.85) 0%, rgba(18,58,94,0) 62%),
    radial-gradient(60% 80% at 4% 90%,  rgba(20,184,166,.10) 0%, rgba(20,184,166,0) 60%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero .grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.hero .h1{ font-size:54px; margin-bottom:26px; }
.hero .lead{ max-width:53ch; }
.hero .btn-row{ margin-top:36px; }

.hero-chips{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:44px; padding-top:30px;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-chip);
  font-size:13px; font-weight:500; color:rgba(255,255,255,.82);
}

.hero-media{ position:relative; }

/* --------------------------------------------------------------------------
   2 — Credibility strip (lifted into the hero)
   -------------------------------------------------------------------------- */

.credbar-shell{ background:var(--white); padding-bottom:84px; }
.credbar{
  margin-top:-62px; position:relative; z-index:20;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-top:3px solid var(--teal);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:auto auto;   /* title row + qualifier row, shared by subgrid */
}
.cred{
  padding:26px 20px 28px;
  border-left:1px solid var(--gray-200);
  display:grid; grid-row:span 2; grid-template-rows:subgrid; gap:9px;
}
.cred:first-child{ border-left:0; }
.cred-h{ display:flex; align-items:flex-start; gap:9px; }
.cred-h .ck{ margin-top:3px; }
.cred-h b{
  font-family:var(--font-body); font-size:14.5px; font-weight:600;
  color:var(--navy); line-height:1.25; letter-spacing:0;
}
.cred p{ font-size:12.5px; line-height:1.5; color:var(--gray-600); }


/* --------------------------------------------------------------------------
   3 — One HR partner (comparison)
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   4 — Services
   -------------------------------------------------------------------------- */

.svc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:48px; }
.svc-head-aside{
  flex:none; max-width:280px; text-align:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  padding-bottom:6px;
}
.svc-head-aside .small{ text-align:right; }
.svc-head .link{ white-space:nowrap; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:56px; }
.svc{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--r-card);
  padding:34px 32px 34px;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.svc:hover{ border-color:#CBD5E1; box-shadow:var(--shadow); transform:translateY(-2px); }
.svc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:26px; }
.svc-num{
  font-family:var(--font-display); font-size:34px; font-weight:700; line-height:1;
  color:transparent;
  -webkit-text-stroke:2px var(--teal-700);
  letter-spacing:.01em;
}
.svc-ico{
  width:46px; height:46px; flex:none; border-radius:var(--r-chip);
  background:var(--navy); display:grid; place-items:center;
}
.svc-ico svg{ width:22px; height:22px; }
.svc h3{ margin-bottom:12px; }
.svc > .lead{ font-size:15.5px; line-height:1.6; min-height:125px; } /* aligns the rule across all three cards */
.svc-list-label{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--gray-200);
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray-600); margin-bottom:12px;
}
.svc .cklist{ flex:1; }
.svc .link{ margin-top:26px; align-self:flex-start; }

/* --------------------------------------------------------------------------
   5 — Statement band
   -------------------------------------------------------------------------- */

.band{
  background:var(--navy);
  padding-block:56px;
  position:relative;
  overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.7;
}
.band .wrap{ position:relative; z-index:1; }
.band-row{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px 40px;
}
.band-item{
  display:flex; align-items:center; gap:13px;
  font-family:var(--font-display); font-weight:700; font-size:27px; line-height:1.2;
  color:var(--white); letter-spacing:-.01em;
}
.band-note{
  margin-top:20px; text-align:center;
  font-size:13.5px; font-weight:500; color:rgba(255,255,255,.66);
}

/* --------------------------------------------------------------------------
   6 — Why Trustlane
   -------------------------------------------------------------------------- */

.why-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--gray-200);
  border-left:1px solid var(--gray-200);
}
.reason{
  padding:38px 40px 42px;
  border-right:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}
.reason .ck{ margin-bottom:22px; }
.reason h3{ margin-bottom:12px; }
.reason p{ font-size:15px; line-height:1.65; color:var(--gray-600); }
.why-aside{ padding-right:24px; }
.why-mark{
  margin-top:40px; padding-top:32px;
  border-top:1px solid var(--gray-200);
  display:flex; align-items:center; gap:14px;
  font-size:13px; font-weight:500; color:var(--gray-600);
}
.why-mark img{ width:26px; }

/* --------------------------------------------------------------------------
   7 — Regional positioning
   -------------------------------------------------------------------------- */

.map-panel{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  background:linear-gradient(162deg,#123A5E 0%,#0B2A49 52%,#071B30 100%);
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.1);
}
.map-panel svg{ width:100%; height:auto; display:block; }
.map-legend{
  position:absolute; left:22px; bottom:20px; z-index:3;
  display:flex; flex-direction:column; gap:9px;
}
.map-leg{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.map-leg i{ width:9px; height:9px; border-radius:50%; flex:none; }
.map-leg i.solid{ background:var(--teal); box-shadow:0 0 0 4px rgba(20,184,166,.2); }
.map-leg i.ring{ border:1.5px solid rgba(20,184,166,.55); }
.map-coord{
  position:absolute; right:22px; top:20px; z-index:3;
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  color:rgba(255,255,255,.56);
}

.region-facts{ margin-top:36px; border-top:1px solid var(--gray-200); }
.region-fact{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid var(--gray-200);
}
.region-fact b{
  font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--navy);
  display:block; margin-bottom:3px; letter-spacing:0;
}
.region-fact p{ font-size:14px; line-height:1.55; color:var(--gray-600); }

/* --------------------------------------------------------------------------
   8 — How it works
   -------------------------------------------------------------------------- */

.steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px; margin-top:64px;
  position:relative;
}
.step{ position:relative; }
.step::after{           /* connector: this node's centre to the next node's centre */
  content:""; position:absolute; top:15px; left:16px; right:-48px; height:1px;
  background:var(--gray-200);
}
.step:last-child::after{ right:0; background:linear-gradient(90deg, var(--gray-200) 0%, rgba(228,233,239,0) 100%); }
.step-node{
  position:relative; z-index:1;
  width:32px; height:32px; border-radius:50%;
  background:var(--white); border:1px solid var(--gray-200);
  display:grid; place-items:center;
  margin-bottom:26px;
}
.step-node img{ width:14px; }
.step--done .step-node{ background:var(--navy); border-color:var(--navy); }
.step-num{
  font-family:var(--font-body); font-size:12px; font-weight:700;
  letter-spacing:.14em; color:var(--teal-700); margin-bottom:8px;
}
.step h3{ margin-bottom:10px; }
.step p{ font-size:14.5px; line-height:1.6; color:var(--gray-600); }
.step-get{
  margin-top:16px; padding-top:12px;
  border-top:1px solid var(--gray-200);
  font-size:13px; line-height:1.5; color:var(--gray-600);
}
.step-get b{
  display:block; margin-bottom:2px;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-700);
}

/* --------------------------------------------------------------------------
   9 — Mission
   -------------------------------------------------------------------------- */

.mission-quote{
  border-left:2px solid var(--teal);
  padding-left:28px;
}
.mv{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:38px; }
.mv-item{ padding-top:22px; border-top:1px solid var(--gray-200); }
.mv-label{
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-700); margin-bottom:12px;
}
.mv-item p{ font-size:15px; line-height:1.65; color:var(--gray-600); }

/* --------------------------------------------------------------------------
   10 — Final CTA
   -------------------------------------------------------------------------- */

.cta{ background:var(--navy); position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 80% at 92% 8%, rgba(20,184,166,.13) 0%, rgba(20,184,166,0) 58%),
    radial-gradient(70% 90% at 0% 100%, rgba(18,58,94,.9) 0%, rgba(18,58,94,0) 60%);
}
.cta .wrap{ position:relative; z-index:1; }
.form-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-card);
  padding:32px;
  margin-top:40px;
}
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.field .box{
  height:46px; width:100%; border-radius:var(--r-btn);
  background:rgba(255,255,255,.06);
  /* .16 composited to 1.37:1 against the fill — under the 3:1 that WCAG
     1.4.11 requires of a control's boundary. .45 gives 3.23:1. */
  border:1px solid rgba(255,255,255,.45);
  display:flex; align-items:center; padding-inline:15px;
  font:inherit; font-size:14.5px; color:var(--white);
  appearance:none; -webkit-appearance:none;
}
.field .box::placeholder{ color:rgba(255,255,255,.62); }
.field .box:focus{ outline:2px solid var(--teal); outline-offset:2px; border-color:transparent; }
.field textarea.box{ resize:none; line-height:1.55; }
.field select.box{
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  /* The open dropdown is drawn by the OS, not by us, and it takes its colour
     from the select itself while keeping the system's own popup background.
     Inheriting `color:var(--white)` from .box therefore paints white options on
     a white list and they vanish. color-scheme pins the popup to light so the
     rows below are the ones that actually get used. */
  color-scheme:light;
}
/* Stated on both ends, because a dark-mode OS would otherwise re-darken the
   popup behind navy text. These apply to the open list only; the closed control
   keeps the white-on-navy above. */
.field select.box option,
.field select.box optgroup{
  color:var(--navy);
  background-color:var(--white);
}
.field--full{ grid-column:1 / -1; }
.field--full .box{ height:96px; align-items:flex-start; padding-block:13px; }
/* Full width WITHOUT the textarea's height — the select would otherwise be left
   alone on a row with an empty cell beside it. */
.field--wide{ grid-column:1 / -1; }
.field-opt{ font-weight:500; color:rgba(255,255,255,.38); }
/* The honeypot. Moved off-screen rather than display:none, because a bot that
   skips hidden inputs is precisely the one worth catching. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-foot{
  margin-top:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.form-foot .small{ display:flex; align-items:center; gap:9px; }

.contact-card{
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-card);
  padding:32px;
}
.contact-row{ padding:20px 0; border-top:1px solid rgba(255,255,255,.14); }
.contact-row:first-of-type{ border-top:0; padding-top:0; }
.contact-label{
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.58); margin-bottom:8px;
}
.contact-val{
  font-family:var(--font-body); font-size:19px; font-weight:600; color:var(--white);
  letter-spacing:0; line-height:1.3;
}
.contact-val a:hover{ color:var(--teal); }
.contact-note{ font-size:13px; color:rgba(255,255,255,.55); margin-top:6px; }
.contact-checks{ margin-top:0; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }

/* --------------------------------------------------------------------------
   11 — Footer
   -------------------------------------------------------------------------- */

.footer{ background:var(--navy-deep); color:rgba(255,255,255,.6); padding-block:72px 0; }
.footer-top{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:48px; }
.footer-brand img{ width:200px; margin-bottom:22px; }
.footer-brand p{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.55); max-width:34ch; }
.footer h3{
  font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.56);
  margin-bottom:20px;
}
.footer ul{ list-style:none; margin:0; padding:0; }
.footer ul li{ margin-bottom:13px; font-size:14.5px; }
.footer ul a:hover{ color:var(--teal); }
.footer-svc{
  margin-top:56px; padding:22px 0;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:14px 36px;
}
.footer-svc span{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.6); }
.footer-legal{
  padding:24px 0 34px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(255,255,255,.56);
}
.footer-legal nav{ display:flex; gap:24px; }

/* ==========================================================================
   Container queries — laptop / small desktop
   The nav + CTA need ~990px beside the logo, so the drawer takes over below
   1060 rather than letting the menu wrap onto two lines at 1024.
   ========================================================================== */

@container (max-width:1240px){
  .hero-card--a{ left:-18px; }
  .hero-card--b{ right:0; }
}

@container (max-width:1100px){
  .hero .h1{ font-size:44px; }
  .hero-card{ width:240px; }
  .hero-card--a{ top:16px; }        /* clears the artwork */
}

/* Between 981 and 1100 the panel is only ~350x435, so two overlay cards would
   bury the illustration. One card there; both return once it stacks full-width. */
@container (min-width:981px) and (max-width:1100px){
  .hero-card--b{ display:none; }
}

/* 1100, not 1060: the desktop row's own content run is 1028px
   (brand 186 + 28 + nav 545 + 28 + 20 + CTA 221), so it needs a 1092px
   container to keep both 32px gutters. Switching at 1060 left 1061-1091
   showing the full nav with the CTA overhanging the right gutter by up to
   31px. The breakpoint is where the row stops fitting, plus a little slack
   for font-metric variation. */
@container (max-width:1100px){
  .nav{ display:none; }
  .nav-toggle{ display:flex; margin-left:12px; }
  .nav-actions{ margin-left:auto; }
}

@container (min-width:1101px){
  .drawer.is-open{ display:none; }   /* widening past the breakpoint hides the toggle too */
}

@container (max-width:1120px){
  .credbar{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,auto auto); margin-top:-54px; }
  .cred{ border-top:1px solid var(--gray-200); }
  .cred:nth-child(3n+1){ border-left:0; }
  .cred:nth-child(-n+3){ border-top:0; }
}

/* ==========================================================================
   Container queries — tablet
   ========================================================================== */

@container (max-width:980px){
  .h1,.hero .h1{ font-size:40px; }
  .h2{ font-size:30px; }
  .lead{ font-size:17px; }

  .grid{ gap:44px; }
  .g-7-5,.g-5-7,.g-4-8,.g-3,.g-4,.hero .grid{ grid-template-columns:minmax(0,1fr); }
  .g-5-7 > .order-first,.g-4-8 > .order-first{ order:-1; }

  .header-main > .wrap{ min-height:68px; gap:16px; }
  .brand img{ width:164px; }

  .utility .wrap{ min-height:auto; padding-block:9px; flex-wrap:wrap; gap:6px 18px; font-size:11.5px; }

  .credbar{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto auto); margin-top:-48px; }
  .cred:nth-child(3n+1){ border-left:1px solid var(--gray-200); }
  .cred:nth-child(-n+3){ border-top:1px solid var(--gray-200); }
  .cred{ border-left:1px solid var(--gray-200); border-top:1px solid var(--gray-200); }
  .cred:nth-child(odd){ border-left:0; }
  .cred:nth-child(1),.cred:nth-child(2){ border-top:0; }

  .compare{ grid-template-columns:minmax(0,1fr); gap:0; }
  .vs{ padding-block:18px; }
  .vs::before{ top:50%; bottom:auto; left:0; right:0; width:auto; height:1px; }

  .svc-grid{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .svc > .lead{ min-height:0; }
  .svc-head{ flex-direction:column; align-items:flex-start; gap:24px; }
  .svc-head-aside{ align-items:flex-start; text-align:left; max-width:none; padding-bottom:0; }
  .svc-head-aside .small{ text-align:left; }

  /* 641-980 only: below that the phone block takes it to one column */
  .footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .why-grid{ grid-template-columns:minmax(0,1fr); }
  .why-aside{ padding-right:0; }

  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 28px; }
  .step::after{ display:none; }

  .mv{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .hero-card--a{ left:0; }
  .hero-card--b{ right:-14px; bottom:34px; }
}

/* ==========================================================================
   Container queries — phone
   ========================================================================== */

@container (max-width:640px){
  .h1,.hero .h1{ font-size:31px; }
  .h2{ font-size:26px; }
  .h3{ font-size:20px; }
  .lead{ font-size:16.5px; }

  .grid{ gap:36px; }
  .svc > .lead{ min-height:0; }

  .hide-sm{ display:none !important; }

  /* The CTA goes, and with it the `margin-left:auto` that was pushing the
     burger to the right edge — the toggle's own `margin-left:12px` then left
     it glued to the logo with the whole right half of the row empty. The auto
     margin has to move onto the toggle itself once it is the last item. */
  .nav-actions{ display:none; }
  .nav-toggle{ margin-left:auto; }
  .hero .btn-row{ margin-top:30px; }
  .hero .btn{ width:100%; justify-content:center; }
  .hero-chips{ margin-top:34px; padding-top:24px; gap:8px; }
  .hero-chip{ width:100%; }
  .plate--hero{ aspect-ratio:3/4; }
  .hero-card{ width:214px; padding:13px 15px; }
  .hero-card--a{ left:0; top:18px; }
  .hero-card--b{ display:none; }   /* one verification card is enough at phone width */

  .credbar{ grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(6,auto auto); margin-top:-40px; }
  .credbar .cred{ border-left:0; }
  .cred{ padding:20px 20px 22px; }
  .cred:nth-child(1){ border-top:0; }
  /* card 2 was the top row of the two-column layout, so it inherited
     border-top:0 from there and merged into card 1 at phone width. */
  .cred:nth-child(2){ border-top:1px solid var(--gray-200); }

  .cmp-panel{ padding:26px 22px 30px; }
  .cmp-kicker{ font-size:23px; }
  .svc{ padding:28px 24px 30px; }
  .cklist--2{ grid-template-columns:minmax(0,1fr); }

  .band-row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .band-item{ font-size:22px; }
  .band-note{ text-align:left; }

  .reason{ padding:28px 24px 30px; }
  .steps{ grid-template-columns:minmax(0,1fr); gap:28px; margin-top:44px; }

  .form-grid{ grid-template-columns:minmax(0,1fr); }
  .form-card,.contact-card{ padding:24px 20px; }
  .form-foot .btn,.contact-card .btn{ width:100%; justify-content:center; }

  .footer .footer-top{ grid-template-columns:minmax(0,1fr); gap:38px; }
  .footer-svc{ flex-direction:column; gap:12px; margin-top:40px; }

  .footer ul li{ margin-bottom:0; }
  .footer ul a,.footer-legal nav a,.utility-r a,.contact-val a{ display:inline-flex; align-items:center; min-height:44px; }
  .brand{ display:inline-flex; align-items:center; min-height:44px; }
  .link{ padding-block:13px; }
  .mission-quote{ padding-left:20px; }
  .region-fact{ padding:16px 0; }

  /* The map halves in width at phone (viewBox 676 into ~333px), so the SVG's
     own font sizes would render CAIRO at 6.9px and the coordinates at 4.7px.
     26 user units keeps the city label above 10px even at 320. */
  .map-panel .m-coord{ display:none; }
  .map-panel .m-city{ font-size:26px; }
  .map-legend{ left:16px; bottom:14px; gap:7px; }
}

/* --------------------------------------------------------------------------
   Band-level rhythm. These target the container elements themselves — an
   element cannot be styled by a query against its own size — so they stay on
   viewport media queries rather than container queries.
   -------------------------------------------------------------------------- */

.hero{ padding-block:92px 148px; }
.band{ padding-block:56px; }

@media (max-width:1000px){
  :root{ --sec-y:88px; --pad-x:24px; }
  .hero{ padding-block:60px 120px; }
  .credbar-shell{ padding-bottom:64px; }
}
@media (max-width:640px){
  :root{ --sec-y:68px; --pad-x:20px; }
  .hero{ padding-block:44px 104px; }
  .band{ padding-block:40px; }
  .credbar-shell{ padding-bottom:48px; }
}


/* Motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}


/* ==========================================================================
   V3 "OPERATIONS" — navy-led, the tightest grid of the three, and imagery that
   diagrams the service rather than depicting anything. The comparison is a
   loose-versus-single panel pair; the hero wires the three services into one
   contract.
   ========================================================================== */

:root{ --sec-y:104px; }
@media (max-width:1000px){ :root{ --sec-y:72px; } }
@media (max-width:640px){  :root{ --sec-y:56px; } }

.grid{ gap:52px; }
.h1{ font-size:54px; letter-spacing:-.02em; }
.h2{ font-size:38px; letter-spacing:-.015em; }


/* --- one partner, not three vendors -----------------------------------
   The comparison is made by the containers, not by a grid of ticks: three
   detached boxes on the left, one continuous panel on the right. */
.onepart{
  margin-top:52px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border-top:1px solid rgba(255,255,255,.14);
}
.op-col{
  display:flex; flex-direction:column;
  padding:34px 44px 0 0; min-width:0;
}
.op-col--us{
  padding:34px 0 0 44px;
  border-left:1px solid rgba(255,255,255,.14);
}

.op-tag{
  display:flex; align-items:center; gap:9px;
  margin:0 0 22px;
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.op-tag--us{ color:var(--teal); }
.op-tag .ck--xs{ width:13px; flex:none; }

/* three suppliers — three separate objects, with air between them */
.op-loose{ display:grid; gap:12px; }
.op-box{
  display:flex; gap:16px; align-items:flex-start;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  background:rgba(255,255,255,.02);
}
.op-n{
  flex:none; padding-top:3px;
  font-size:11px; font-weight:600; letter-spacing:.12em;
  color:rgba(255,255,255,.55);
}

/* one partner — one object, divided only by hairlines */
.op-solid{
  border:1px solid rgba(20,184,166,.45);
  border-radius:6px;
  background:rgba(20,184,166,.08);
  overflow:hidden;
}
.op-row{
  display:flex; gap:15px; align-items:flex-start;
  padding:16px 20px;
  border-bottom:1px solid rgba(20,184,166,.24);
}
.op-row:last-child{ border-bottom:0; }
.op-row .ck--xs{ width:15px; flex:none; margin-top:4px; }

.op-tx{ display:block; min-width:0; }
.op-tx b{
  display:block;
  font-size:14.5px; font-weight:600; line-height:1.5;
  color:var(--white);
}
.op-tx small{
  display:block;
  font-size:13px; line-height:1.6;
  color:rgba(255,255,255,.62);
}

.op-out{
  margin:0; padding-top:24px;
  margin-top:auto;            /* both outcome lines sit on the same baseline */
  font-size:13.5px; line-height:1.65;
  color:rgba(255,255,255,.62);
}
.op-out--us{ color:rgba(255,255,255,.88); }

.op-note{ margin-top:34px; font-size:12.5px; color:rgba(255,255,255,.55); }

@container (max-width:980px){
  .onepart{ grid-template-columns:minmax(0,1fr); }
  .op-col{ padding:30px 0 34px; }
  .op-out{ margin-top:0; padding-top:20px; }
  .op-col--us{
    padding:30px 0 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .op-note{ margin-top:28px; }
}
@container (max-width:640px){
  .onepart{ margin-top:40px; }
  .op-box,.op-row{ padding:15px 16px; }
}

/* --- density: services carry their lists two-up ----------------------- */
.svc{ padding:30px 28px 30px; }
.svc > .lead{ min-height:104px; font-size:15px; }
.svc .cklist li{ font-size:13.5px; padding-block:4px; }
.svc-list-label{ margin-top:22px; padding-top:18px; }

/* --- why sits on the tint here ---------------------------------------- */
.section--tint .why-grid{ border-top-color:var(--gray-200); border-left-color:var(--gray-200); }
.section--tint .reason{ border-right-color:var(--gray-200); border-bottom-color:var(--gray-200); }
.section--tint .reason p{ color:var(--gray-600); }
.section--tint .why-mark{ border-top-color:var(--gray-200); color:var(--gray-600); }

/* --- regional sits on navy here --------------------------------------- */
.section--navy .region-facts{ border-top-color:rgba(255,255,255,.16); }
.section--navy .region-fact{ border-bottom-color:rgba(255,255,255,.16); }
.section--navy .region-fact b{ color:var(--white); }
.section--navy .region-fact p{ color:rgba(255,255,255,.66); }

/* --- the statement band stays navy but gets a rule -------------------- */
.band{ border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding-block:46px; }
/* a viewport @media, not @container: .band is itself a container, and an
   element cannot be matched by a query against its own size. */
@media (max-width:640px){ .band{ padding-block:40px; } }
.band-item{ font-size:24px; }

@container (max-width:980px){
  .h1,.hero .h1{ font-size:40px; }
  .h2{ font-size:31px; }
  .svc > .lead{ min-height:0; }
  .svc .cklist--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* restated here because the V3 block's unconditional `.grid{gap:52px}`
     sits after the base's own responsive rule at the same specificity. */
  .grid{ gap:44px; }
}
@container (max-width:640px){
  .h1,.hero .h1{ font-size:31px; }
  .band-item{ font-size:21px; }
}


/* the phone steps below never applied: `.h2` and `.cklist--2` were being set at
   (0,1,0) later in the file than the base's own (0,1,0) phone rules, and the
   two-up service lists were pinned by `.svc .cklist--2` at (0,2,0). */
@container (max-width:640px){
  .h2{ font-size:25px; }
  .svc .cklist--2{ grid-template-columns:minmax(0,1fr); }
  /* same cause: both were overridden by unconditional V3 rules. */
  .grid{ gap:36px; }
  .svc{ padding:28px 24px 30px; }
}
/* two-up on tablets only — an unscoped max-width here outranked the base's
   phone rule and kept the services two columns wide at 320px. */
@container (min-width:641px) and (max-width:1100px){
  .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* regional sits on the tint now, so its panel and facts go back to light type */
.section--tint .region-facts{ border-top-color:var(--gray-200); }
.section--tint .region-fact{ border-bottom-color:var(--gray-200); }
.section--tint .region-fact b{ color:var(--navy); }
.section--tint .region-fact p{ color:var(--gray-600); }

/* --- contact form states ----------------------------------------------- */
.form-status{
  margin:18px 0 0;
  font-size:13.5px; line-height:1.6;
  color:rgba(255,255,255,.82);
  display:flex; align-items:flex-start; gap:9px;
}
.form-status::before{
  content:""; flex:none; margin-top:7px;
  width:6px; height:6px; border-radius:50%;
  background:var(--teal);
}
.form-status[data-state="error"]{ color:#FCA5A5; }
.form-status[data-state="error"]::before{ background:#F87171; }
.field .box[aria-invalid="true"]{
  border-color:#F87171;
  background:rgba(248,113,113,.08);
}
.form-foot .btn{ font-family:inherit; }

/* --- 404 ---------------------------------------------------------------- */
.nf-body{ background:var(--navy); }
.nf{
  container-type:inline-size;
  min-height:100svh;
  display:flex; align-items:center;
  background:var(--navy);
  color:rgba(255,255,255,.76);
  padding-block:64px;
}
.nf .wrap{ max-width:720px; }
.nf-brand{ display:inline-block; margin-bottom:48px; }
.nf-brand img{ width:186px; height:auto; }
.nf .h2{ color:var(--white); margin:6px 0 0; }
.nf .lead{ margin-top:18px; color:rgba(255,255,255,.72); max-width:52ch; }
.nf .btn-row{ margin-top:34px; }
.nf-meta{
  margin-top:56px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13px; color:rgba(255,255,255,.55);
}
.nf-meta a{ color:rgba(255,255,255,.8); text-decoration:underline; text-underline-offset:3px; }

/* --- live-site behaviour ------------------------------------------------ */

/* The header is sticky. Without this, every in-page link scrolls its own
   heading underneath it. 77px header + 19px of air; 69px + 19px below 768. */
.section[id],.hero[id],#top,#content{ scroll-margin-top:96px; }
@media (max-width:768px){
  .section[id],.hero[id],#top,#content{ scroll-margin-top:88px; }
}

/* Skip link. Displaced on the BLOCK axis only — moving it off to the side
   is what grows scroll width and would undo the no-overflow result. */
.skip{
  position:absolute; left:8px; top:-64px; z-index:100;
  background:var(--navy); color:var(--white);
  padding:11px 18px; border-radius:var(--r-btn);
  font-size:14.5px; font-weight:600;
}
.skip:focus{ top:8px; }
#content:focus{ outline:none; }

/* the dropdown, dismissed with Escape while the pointer is still on it */
.nav-item.is-dismissed:hover .dropdown,
.nav-item.is-dismissed .dropdown{ opacity:0; visibility:hidden; transform:translateY(-6px); }

/* the live region is always in the tree; the empty state just takes no room */
.form-noscript{
  margin:0 0 24px; padding:14px 16px;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-btn);
  font-size:14px; line-height:1.6; color:rgba(255,255,255,.86);
}
.form-noscript a{ text-decoration:underline; text-underline-offset:3px; }

.form-status:empty{ margin:0; }
.form-status:empty::before{ content:none; }

.footer-legal-contact a{ text-decoration:underline; text-underline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}