/* ============================================================
   AAG Smart Vending — site styles
   Design tokens come from WEBSITE_BRIEF.md §3 and are defined
   ONCE, below. Never hardcode a hex value anywhere else.
   ============================================================ */

:root{
  /* brand palette — brief §3 */
  --navy:#0E2A47;
  --navy-deep:#17416B;
  --green:#1FA971;
  --green-bright:#4FD79E;
  --green-soft:#E4F5EE;
  --green-line:#B9E4D2;
  --ink:#17242F;
  --muted:#5A6B7B;
  --rule:#DCE6EF;
  --surface:#F4F7FA;
  --white:#FFFFFF;

  /* derived — a darker green that passes AA for small text on white */
  --green-text:#12744C;

  --measure:68ch;
  --radius:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(14,42,71,.06), 0 6px 18px -12px rgba(14,42,71,.22);
  --shadow-md:0 2px 6px rgba(14,42,71,.07), 0 18px 40px -22px rgba(14,42,71,.35);

  --space-band:clamp(56px, 8vw, 104px);
  --space-band-tight:clamp(40px, 5.5vw, 72px);

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

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

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%; height:auto; display:block}
a{color:var(--green-text)}
a:hover{color:var(--navy)}

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:12px; top:-64px; z-index:200;
  background:var(--navy); color:var(--white); padding:12px 18px;
  border-radius:0 0 var(--radius) var(--radius); font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{top:0; color:var(--white)}

/* ─────────────── layout ─────────────── */
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 20px}
.narrow{max-width:760px}
.center{text-align:center}
.band{padding:var(--space-band) 0}
.band-tight{padding:var(--space-band-tight) 0}
.band + .band:not(.band-surface):not(.band-navy):not(.band-cta){padding-top:0}
.band-surface{background:var(--surface); border-block:1px solid var(--rule)}
.band-navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); color:var(--white)}
.band-navy .body-lg,.band-navy .section-intro{color:rgba(255,255,255,.82)}
.band-navy a:not(.btn){color:var(--green-bright)}

/* ─────────────── type ─────────────── */
.h1{font-size:clamp(32px,5vw,50px); line-height:1.08; letter-spacing:-.025em; font-weight:700; margin:0 0 18px; text-wrap:balance}
.h2-xl{font-size:clamp(28px,4.2vw,42px); line-height:1.14; letter-spacing:-.02em; font-weight:700; margin:0 0 14px; text-wrap:balance}
.h2-lg{font-size:clamp(25px,3.2vw,34px); line-height:1.2; letter-spacing:-.018em; font-weight:700; margin:0 0 14px; text-wrap:balance}
.h3{font-size:clamp(20px,2.2vw,24px); line-height:1.28; letter-spacing:-.012em; font-weight:600; margin:0 0 12px}
.h2-sub{font-size:clamp(19px,2.4vw,24px); font-weight:600; color:var(--green-bright); margin:0 0 18px}

.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--green-text); margin:0 0 14px;
}
.eyebrow-light{color:var(--green-bright)}
.lede{font-size:clamp(17px,2vw,20px); line-height:1.55; color:var(--muted); max-width:var(--measure); margin:0 0 26px}
.body-lg{font-size:17.5px; color:var(--muted); max-width:var(--measure); margin:0 0 18px}
.section-head{max-width:var(--measure); margin:0 0 clamp(28px,4vw,44px)}
.section-head-light .h2-lg{color:var(--white)}
.section-intro{color:var(--muted); font-size:17px; margin:0}
.section-more{margin:32px 0 0}

.link-arrow{font-weight:600; text-decoration:none; border-bottom:2px solid var(--green-line); padding-bottom:2px}
.link-arrow::after{content:" →"}
.link-arrow:hover{border-color:var(--navy)}

/* ─────────────── buttons ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  border-radius:10px; border:2px solid transparent; padding:11px 20px;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-lg{padding:14px 26px; font-size:17px}
.btn-block{width:100%}
.btn-primary{background:var(--green-text); color:var(--white); border-color:var(--green-text)}
.btn-primary:hover{background:var(--navy); border-color:var(--navy); color:var(--white)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--navy); background:var(--surface); color:var(--navy)}
.band-navy .btn-ghost{color:var(--white); border-color:rgba(255,255,255,.35)}
.band-navy .btn-ghost:hover{background:rgba(255,255,255,.1); color:var(--white)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 26px}
.btn-row-center{justify-content:center}

/* ─────────────── header ─────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:70px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--navy)}
.brand-mark{display:block; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-weight:700; font-size:16.5px; letter-spacing:-.01em; white-space:nowrap}
.brand-region{font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}

.nav-toggle{
  display:none; background:transparent; border:1px solid var(--rule); border-radius:9px;
  width:44px; height:44px; cursor:pointer; padding:0; align-items:center; justify-content:center;
}
.nav-toggle-bars{display:block; width:20px}
.nav-toggle-bars span{display:block; height:2px; background:var(--navy); border-radius:2px; margin:4px 0; transition:transform .18s ease, opacity .18s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.site-nav{display:flex; align-items:center; gap:6px}
.site-nav ul{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.site-nav a{
  display:block; padding:9px 12px; border-radius:8px; text-decoration:none;
  color:var(--ink); font-size:15.5px; font-weight:500; white-space:nowrap;
}
.site-nav a:not(.btn):hover{background:var(--surface); color:var(--navy)}
.site-nav .btn-primary{color:var(--white)}
.site-nav .btn-primary:hover{background:var(--navy); border-color:var(--navy); color:var(--white)}
.site-nav a[aria-current="page"]{color:var(--green-text); font-weight:600}
.nav-phone{
  font-weight:600; color:var(--navy); white-space:nowrap;
  margin-left:8px; font-variant-numeric:tabular-nums;
}
.nav-phone:hover{color:var(--green-text); background:transparent}
.btn-nav{margin-left:10px; padding:10px 18px; font-size:15px; white-space:nowrap}


@media (max-width:1020px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:fixed; inset:70px 0 auto; display:none; flex-direction:column; align-items:stretch;
    gap:4px; background:var(--white); border-bottom:1px solid var(--rule);
    padding:16px 20px 24px; box-shadow:var(--shadow-md); max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .site-nav.open{display:flex}
  .site-nav ul{flex-direction:column; align-items:stretch; gap:2px}
  .site-nav a{padding:13px 12px; font-size:17px; border-bottom:1px solid var(--rule); border-radius:0}
  .nav-phone{padding:13px 12px; font-size:17px; border-bottom:1px solid var(--rule)}
  .btn-nav{margin:14px 0 0}
}

/* ─────────────── hero ─────────────── */
.hero{padding:clamp(44px,6vw,84px) 0 clamp(40px,5vw,72px); border-bottom:1px solid var(--rule)}
.hero-grid{display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:center}
@media (min-width:920px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.badges{display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:26px 0 0; padding:0}
.badges li{
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--green-text); background:var(--green-soft); border:1px solid var(--green-line);
  border-radius:999px; padding:6px 14px;
}

.page-head{padding:clamp(40px,5.5vw,76px) 0 clamp(30px,4vw,52px); background:var(--surface); border-bottom:1px solid var(--rule)}
.page-head-inner > *{max-width:820px}
.page-head .lede{margin-bottom:0}

/* ─────────────── images & placeholders ─────────────── */
.img{border-radius:var(--radius-lg); width:100%}
.img-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:20px; text-align:center;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(14,42,71,.045) 11px 22px),
    var(--surface);
  border:2px dashed var(--rule); color:var(--muted);
}
.img-ph-tag{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--navy)}
.img-ph-alt{font-size:13.5px; max-width:34ch; line-height:1.45}

/* ─────────────── split sections ─────────────── */
.split{display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:center}
@media (min-width:920px){
  .split{grid-template-columns:1fr 1fr}
  .split-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start}
}
.split-media-portrait{max-width:420px}
/* A portrait photo in a side-by-side band should not tower over its copy. */
.split-media .img{max-height:620px; width:auto; margin-inline:auto}

/* ─────────────── cards ─────────────── */
.cards{list-style:none; margin:0; padding:0; display:grid; gap:16px}
@media (min-width:640px){.cards-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm);
}
.band-surface .card{background:var(--white)}
.card-plain{box-shadow:none}
.card-mark{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
  padding:0 10px; border-radius:10px; background:var(--green-soft); border:1px solid var(--green-line);
  color:var(--green-text); font-weight:700; font-size:15px; margin-bottom:14px;
}
.card-title{font-size:18px; font-weight:600; letter-spacing:-.008em; margin:0 0 8px; color:var(--ink)}
.card-body{margin:0; color:var(--muted); font-size:15.5px}
.card-media{margin:-24px -24px 18px}
.card-media .img{
  border-radius:var(--radius) var(--radius) 0 0;
  width:100%; aspect-ratio:4 / 3; object-fit:cover; max-height:none;
}
.card-industry{display:flex; flex-direction:column}

/* ─────────────── tick lists ─────────────── */
.ticks{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px}
.ticks li{position:relative; padding-left:30px; color:var(--muted); font-size:16px}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:18px; height:18px; border-radius:50%;
  background:var(--green-soft); border:1px solid var(--green-line);
}
.ticks li::after{
  content:""; position:absolute; left:5.5px; top:.72em; width:7px; height:4px;
  border-left:2px solid var(--green-text); border-bottom:2px solid var(--green-text);
  transform:rotate(-45deg);
}
.ticks-light li{color:rgba(255,255,255,.88)}
.ticks-light li::before{background:rgba(95,223,166,.14); border-color:rgba(95,223,166,.5)}
.ticks-light li::after{border-color:var(--green-bright)}

.included{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); padding:clamp(22px,3vw,32px);
}
.included-h{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-bright); margin:0 0 18px;
}
.included .ticks{margin-bottom:0}

.cost-media{margin-top:clamp(26px,3.5vw,38px); max-width:320px}
.cost-media .img-ph{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.72)}
.cost-media .img-ph-tag{color:var(--green-bright)}

/* ─────────────── lineup (home teaser) ─────────────── */
.lineup{list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.lineup{grid-template-columns:repeat(5,1fr)}}
.lineup a{
  display:flex; flex-direction:column; align-items:center; gap:5px; height:100%;
  text-decoration:none; color:var(--ink); text-align:center;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  padding:18px 14px 20px; transition:border-color .15s ease, box-shadow .15s ease;
}
.lineup a:hover{border-color:var(--green-line); box-shadow:var(--shadow-md); color:var(--ink)}
.lineup-media{display:block; width:100%; max-width:130px; margin-bottom:10px}
.lineup-media .img{border-radius:8px}
.lineup-code{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--green-text)}
.lineup-name{font-weight:600; font-size:15.5px; line-height:1.3}
.lineup-size{font-size:13.5px; color:var(--muted)}

/* ─────────────── model cards ─────────────── */
.model-grid{display:grid; gap:20px; grid-template-columns:1fr}
@media (min-width:860px){.model-grid{grid-template-columns:repeat(2,1fr)}}
.model-card{
  display:grid; gap:22px; align-items:start; grid-template-columns:1fr;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,30px); box-shadow:var(--shadow-sm); scroll-margin-top:90px;
}
@media (min-width:520px){.model-card{grid-template-columns:150px minmax(0,1fr)}}
.model-media{background:var(--surface); border-radius:var(--radius); padding:14px}
.model-code{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-text); margin:0 0 4px}
.model-code-light{color:var(--green-bright)}
.model-name{font-size:22px; font-weight:700; letter-spacing:-.015em; margin:0 0 6px}
.model-summary{font-size:14px; color:var(--muted); margin:0 0 14px; font-weight:500}
.model-blurb{font-size:16px; color:var(--muted); margin:0 0 16px}
.model-specs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0; padding:16px 0 0; border-top:1px solid var(--rule)}
.model-specs dt{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 3px}
.model-specs dd{margin:0; font-weight:600; font-size:15px; color:var(--ink)}

/* ─────────────── flagship ─────────────── */
.flagship{display:grid; gap:clamp(26px,4vw,48px); grid-template-columns:1fr; align-items:center; scroll-margin-top:90px}
@media (min-width:920px){.flagship{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.flagship-media{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:clamp(18px,3vw,30px)}
.flagship-copy .h2-lg{color:var(--white)}
.stat-row{
  list-style:none; margin:clamp(32px,4vw,52px) 0 0; padding:26px 0 0; display:grid; gap:22px;
  grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.16);
}
@media (min-width:860px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat-figure{display:block; font-size:26px; font-weight:700; color:var(--green-bright); letter-spacing:-.015em; margin-bottom:5px}
.stat-label{display:block; font-size:14.5px; color:rgba(255,255,255,.78); line-height:1.45}

/* ─────────────── table ─────────────── */
.table-scroll{overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius-lg); background:var(--white)}
.table-scroll:focus-visible{outline:3px solid var(--green-text); outline-offset:2px}
.compare{width:100%; border-collapse:collapse; font-size:15px; min-width:680px}
.compare th,.compare td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--rule); white-space:nowrap}
.compare thead th{
  background:var(--surface); font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy);
}
.compare tbody th{font-weight:600; color:var(--ink)}
.compare tbody th a{text-decoration:none; color:var(--ink)}
.compare tbody th a:hover{color:var(--green-text); text-decoration:underline}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.table-note{margin:18px 0 0; font-size:15px; color:var(--muted); max-width:var(--measure)}

/* ─────────────── steps ─────────────── */
.steps{display:grid; gap:clamp(34px,5vw,60px)}
.step{display:grid; gap:clamp(20px,3vw,44px); grid-template-columns:1fr; align-items:center}
@media (min-width:920px){
  .step{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .step:nth-child(even) .step-copy{order:2}
}
.step-media .img{margin-inline:auto}
.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; background:var(--navy); color:var(--green-bright);
  font-weight:700; font-size:16px; letter-spacing:.02em; margin-bottom:16px;
}

/* ─────────────── panels, faq, misc ─────────────── */
.panel{background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:clamp(22px,3vw,30px); box-shadow:var(--shadow-sm)}
.panel-quiet{box-shadow:none; background:var(--surface)}
.panel-h{font-size:17px; font-weight:700; margin:0 0 16px; letter-spacing:-.008em}

.city-row{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:24px 0 0; padding:0}
.city-row li{background:var(--surface); border:1px solid var(--rule); border-radius:999px; padding:7px 16px; font-size:15px; font-weight:500; color:var(--navy)}

.faq{border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; background:var(--white)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 52px 18px 22px; position:relative;
  font-weight:600; font-size:17px; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--surface)}
.faq-item summary::after{
  content:""; position:absolute; right:24px; top:26px; width:9px; height:9px;
  border-right:2px solid var(--green-text); border-bottom:2px solid var(--green-text);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg); top:30px}
.faq-answer{padding:0 22px 20px; color:var(--muted); max-width:var(--measure)}
.faq-answer p{margin:0}

.todo{background:#FBF3E2; border:1px solid #E6C98A; border-radius:var(--radius); padding:18px 20px; margin:0 0 20px}
.todo-label{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#8A5A12}
.todo-body{margin:0; font-size:15px; color:#6E4A12}
.byline{font-size:15px; font-weight:600; color:var(--navy); margin:0}

/* ─────────────── forms ─────────────── */
.contact-grid{display:grid; gap:clamp(24px,3.5vw,44px); grid-template-columns:1fr; align-items:start}
@media (min-width:920px){.contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.form-panel{background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-sm)}
.form-note{font-size:14.5px; color:var(--muted); margin:0 0 22px}
.demo-note{background:#FBF3E2; border:1px solid #E6C98A; color:#6E4A12; border-radius:var(--radius); padding:14px 16px; font-size:14.5px; margin:0 0 22px}
.demo-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}

.form{display:grid; gap:18px}
.field{display:grid; gap:6px}
.field label{font-weight:600; font-size:15px; color:var(--ink)}
.req{color:var(--green-text)}
.field input,.field select,.field textarea{
  font:inherit; font-size:16px; color:var(--ink); background:var(--white);
  border:1px solid var(--rule); border-radius:10px; padding:12px 14px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:120px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B9C8D8}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--green-text); box-shadow:0 0 0 3px rgba(18,116,76,.16); outline:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#B3261E; background:#FDF5F4}
.field-error{margin:0; font-size:14px; font-weight:500; color:#B3261E}
.form-summary{background:#FDF5F4; border:1px solid #E6B3AE; color:#8C1D18; border-radius:var(--radius); padding:14px 16px; font-size:15px}
.form-summary ul{margin:8px 0 0; padding-left:20px}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-result{border-radius:var(--radius); padding:22px 24px; margin-top:22px}
.form-result .h3{margin-bottom:8px}
.form-result p{margin:0; color:var(--muted)}
.form-result-ok{background:var(--green-soft); border:1px solid var(--green-line)}
.form-result-ok .h3{color:var(--green-text)}
.form-result-bad{background:#FDF5F4; border:1px solid #E6B3AE}
.form-result-bad .h3{color:#8C1D18}

.contact-dl{margin:0 0 16px; display:grid; gap:14px}
.contact-dl dt{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.contact-dl dd{margin:0; font-size:16.5px; font-weight:600; word-break:break-word}
.contact-note{margin:0; font-size:14.5px; color:var(--muted)}
.numbered{margin:0; padding-left:22px; display:grid; gap:10px; color:var(--muted); font-size:15.5px}

/* ─────────────── cta band ─────────────── */
.band-cta{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); color:var(--white); padding:var(--space-band) 0}
.band-cta-inner{max-width:720px; margin:0 auto; text-align:center}
.band-cta .h2-lg{color:var(--white)}
.band-cta-body{color:rgba(255,255,255,.82); font-size:17.5px; margin:0 auto 28px; max-width:60ch}

/* ─────────────── footer ─────────────── */
.site-footer{background:var(--navy); color:rgba(255,255,255,.78); padding:clamp(44px,5vw,64px) 0 28px; font-size:15px}
.footer-grid{display:grid; gap:32px; grid-template-columns:1fr}
@media (min-width:700px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-name{color:var(--white); font-weight:700; font-size:17px; margin:14px 0 4px}
.footer-tag{margin:0; font-size:14.5px; color:rgba(255,255,255,.6); max-width:34ch}
.footer-h{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--green-bright); margin:0 0 14px}
.footer-list{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.footer-list a{color:rgba(255,255,255,.82); text-decoration:none}
.footer-list a:hover{color:var(--green-bright); text-decoration:underline}
.footer-cities{grid-template-columns:repeat(2,1fr)}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  font-size:14px; color:rgba(255,255,255,.6);
}
.footer-bottom p{margin:0}
.footer-bottom a{color:rgba(255,255,255,.78)}

.error-page{padding:clamp(30px,6vw,70px) 0}