/* =====================================================================
   A&M COMMERCIAL SERVICES — Design System (V1)
   Premium / executive / modern. Turquoise + navy + ink + paper.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --brand:        #16CEC6;   /* turquoise — primary */
  --brand-bright: #2DE9DF;   /* glow / hover */
  --brand-deep:   #0FA8A2;   /* pressed */
  --brand-ink:    #06403E;   /* text on light turquoise */

  /* Neutrals */
  --navy:    #072138;
  --navy-700:#0A2C49;
  --navy-900:#04121F;
  --ink:     #05080B;
  --paper:   #FFFFFF;
  --mist:    #F1F6F7;
  --mist-2:  #E7EFF1;
  --line:    #DCE6E8;

  /* Text */
  --t-strong:#08131C;
  --t-body:  #33454F;
  --t-soft:  #5C6E78;
  --t-invert:#EAF6F6;
  --t-invert-soft: #A9C4C9;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(7,33,56,.06), 0 2px 8px rgba(7,33,56,.06);
  --shadow-md: 0 10px 30px -12px rgba(7,33,56,.22);
  --shadow-lg: 0 30px 70px -24px rgba(6,20,33,.45);
  --glow:      0 0 0 1px rgba(45,233,223,.35), 0 8px 30px -6px rgba(22,206,198,.55);
  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* Type */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--t-body);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--t-strong); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
::selection { background: var(--brand); color: #03201F; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: var(--t-invert); }
.section--navy { background:
   radial-gradient(120% 120% at 85% -10%, rgba(22,206,198,.16), transparent 55%),
   radial-gradient(90% 90% at 0% 110%, rgba(22,206,198,.10), transparent 50%),
   var(--navy-900);
  color: var(--t-invert);
}
.grid { display:grid; gap: clamp(18px,2.4vw,30px); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 960px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr;} }

/* ---------- Type helpers ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color: var(--brand-deep);
}
.section--ink .eyebrow, .section--navy .eyebrow { color: var(--brand-bright); }
.eyebrow::before { content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }
.h-display { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--t-soft); }
.section--ink .lead, .section--navy .lead { color: var(--t-invert-soft); }
.measure { max-width: 62ch; }
.center { text-align:center; margin-inline:auto; }
.text-brand { color: var(--brand-deep); }
.section--ink .text-brand,.section--navy .text-brand{ color: var(--brand-bright); }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 15px; --pad-x: 26px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: var(--pad-y) var(--pad-x); border-radius: 999px; border:1px solid transparent;
  font-family: var(--font-display); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space: nowrap;
}
.btn svg { width:18px; height:18px; }
.btn--primary { background: linear-gradient(120deg, var(--brand-bright), var(--brand)); color:#022523; box-shadow: var(--glow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(45,233,223,.6), 0 16px 40px -10px rgba(22,206,198,.7); }
.btn--ghost { background: transparent; color: var(--t-strong); border-color: var(--line); }
.section--ink .btn--ghost,.section--navy .btn--ghost { color: var(--t-invert); border-color: rgba(255,255,255,.22); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-2px); }
.section--ink .btn--ghost:hover,.section--navy .btn--ghost:hover{ color: var(--brand-bright); }
.btn--lg { --pad-y: 18px; --pad-x: 32px; font-size:1.05rem; }
.btn--block { width:100%; }
.btn--white { background:#fff; color: var(--navy); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- Keyboard focus visibility (WCAG 2.4.7) ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible, .formtab:focus-visible,
.faq__q:focus-visible, .nav__link:focus-visible, .card:focus-visible, .pill:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, .cty:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}
.hero a:focus-visible, .section--navy a:focus-visible, .section--ink a:focus-visible,
.cta-band a:focus-visible, .btn--primary:focus-visible { outline-color: var(--brand-bright); }
.skip-link{ position:absolute; left:12px; top:-64px; z-index:300; background:var(--brand); color:#03201F;
  padding:11px 18px; border-radius:0 0 12px 12px; font-family:var(--font-display); font-weight:700; transition:top .18s; }
.skip-link:focus{ top:0; }

/* ---------- Header ---------- */
.header {
  position: sticky; top:0; z-index: 60;
  backdrop-filter: saturate(160%) blur(14px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.header.is-scrolled { background: rgba(255,255,255,.92); border-color: var(--line); box-shadow: var(--shadow-sm); }
.header__bar { display:flex; align-items:center; gap: 24px; height: 74px; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800; color:var(--t-strong); letter-spacing:-.01em; }
.brand__mark { width:42px; height:42px; flex:0 0 auto; }
.brand__name { font-size:1.05rem; line-height:1; }
.brand__name span { display:block; font-size:.62rem; letter-spacing:.22em; font-weight:600; color:var(--brand-deep); text-transform:uppercase; margin-top:3px; }
.brand__logo { height:52px; width:auto; display:block; }
.footer .brand__logo { height:40px; }
.brand__chip { display:inline-grid; place-items:center; background:#fff; border-radius:12px; padding:9px 14px; }
@media (max-width:520px){ .brand__logo { height:44px; } }
.nav { display:flex; align-items:center; gap: 4px; margin-left:auto; }
.nav__link { position:relative; padding:10px 14px; border-radius:10px; font-weight:500; font-size:.95rem; color:var(--t-body); transition:color .2s, background .2s; }
.nav__link:hover { color:var(--t-strong); background: var(--mist); }
.has-mega { position: static; }
.nav__cta { display:flex; align-items:center; gap:10px; margin-left:8px; }
.nav__phone { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; color:var(--t-strong); padding:8px 12px; border-radius:10px; }
.nav__phone:hover { color: var(--brand-deep); }
.nav__phone svg{ width:16px;height:16px;color:var(--brand-deep); }

/* Mega dropdown */
.mega {
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:55;
}
.has-mega:hover .mega, .mega:hover { opacity:1; visibility:visible; transform: translateY(0); }
.mega__inner { display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:30px; padding-block:30px; }
.mega__col h4 { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--t-soft); margin-bottom:14px; }
.mega__item { display:flex; gap:12px; padding:10px; border-radius:12px; transition:background .2s; }
.mega__item:hover { background: var(--mist); }
.mega__item .ic { width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(22,206,198,.16),rgba(22,206,198,.05)); display:grid;place-items:center;color:var(--brand-deep);flex:0 0 auto; }
.mega__item .ic svg{ width:20px;height:20px; }
.mega__item b { display:block; color:var(--t-strong); font-weight:600; font-size:.95rem; }
.mega__item span { font-size:.82rem; color:var(--t-soft); }
.mega__promo { background: var(--navy-900); color:#fff; border-radius:16px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; }
.mega__promo b{ color:#fff; font-family:var(--font-display); font-size:1.1rem; }
.mega__promo p{ color:var(--t-invert-soft); font-size:.88rem; margin:8px 0 16px; }

.burger { display:none; margin-left:auto; width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff; align-items:center;justify-content:center; }
.burger span,.burger span::before,.burger span::after{ content:""; display:block; width:20px;height:2px;background:var(--t-strong); border-radius:2px; transition:.3s; }
.burger span::before{ transform:translateY(-6px);} .burger span::after{ transform:translateY(4px);}
@media (max-width:1080px){
  .nav, .nav__phone span { display:none; }
  .burger{ display:flex; }
}

/* Mobile drawer */
.drawer { position:fixed; inset:0; z-index:80; visibility:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(4,18,31,.5); opacity:0; transition:.3s; backdrop-filter:blur(2px);}
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(88vw,380px); background:#fff; box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .35s var(--ease); padding:22px; overflow-y:auto; }
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__panel a{ display:block; padding:14px 12px; border-radius:12px; font-family:var(--font-display); font-weight:600; color:var(--t-strong); }
.drawer__panel a:hover{ background:var(--mist); }
.drawer__close{ width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;float:right; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background: var(--ink); color:#fff; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg::before{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 90% at 78% 8%, rgba(22,206,198,.28), transparent 55%),
    radial-gradient(60% 80% at 10% 100%, rgba(22,206,198,.16), transparent 50%),
    linear-gradient(180deg, #04121F, #05080B);
}
.hero__grid{ position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(80% 70% at 60% 20%, #000, transparent 80%);
}
.hero__inner{ position:relative; z-index:2; padding-block: clamp(64px, 11vw, 150px); }
.hero__cols{ display:grid; grid-template-columns: 1.15fr .85fr; gap:48px; align-items:center; }
@media (max-width:980px){ .hero__cols{ grid-template-columns:1fr; } }
.hero h1{ color:#fff; font-size: clamp(2.5rem,6.2vw,4.7rem); }
.hero h1 .accent{ background:linear-gradient(110deg,var(--brand-bright),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__sub{ font-size: clamp(1.05rem,1.6vw,1.3rem); color:var(--t-invert-soft); max-width:54ch; margin-top:22px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:22px 30px; margin-top:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); }
.hero__trust .ti{ display:flex; align-items:center; gap:10px; color:var(--t-invert-soft); font-size:.9rem; }
.hero__trust .ti b{ color:#fff; font-family:var(--font-display); }
.hero__trust svg{ width:18px;height:18px;color:var(--brand-bright); flex:0 0 auto; }

/* Hero side card */
.hero__card{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: 26px; backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); }
.hero__card h3{ color:#fff; font-size:1.2rem; }
.hero__card .muted{ color:var(--t-invert-soft); font-size:.9rem; }
.statline{ display:flex; gap:8px; align-items:baseline; }
.statline .n{ font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:#fff; }
.statline .n .u{ color:var(--brand-bright); }

/* ---------- Cards ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; position:relative; overflow:hidden; }
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(22,206,198,.5); }
.card__ic{ width:52px;height:52px;border-radius:14px; background:linear-gradient(135deg, rgba(22,206,198,.16), rgba(22,206,198,.04)); display:grid;place-items:center;color:var(--brand-deep); margin-bottom:18px; }
.card__ic svg{ width:26px;height:26px; }
.card h3{ font-size:1.2rem; margin-bottom:8px; }
.card p{ color:var(--t-soft); font-size:.96rem; }
.card__link{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-family:var(--font-display); font-weight:600; color:var(--brand-deep); font-size:.92rem; }
.card__link svg{ width:16px;height:16px; transition:transform .25s var(--ease); }
.card:hover .card__link svg{ transform: translateX(4px); }
.card--svc::after{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--brand-bright),var(--brand)); transition:width .4s var(--ease); }
.card:hover.card--svc::after{ width:100%; }
.card--glass{ background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.14); color:#fff; }
.card--glass h3{ color:#fff; } .card--glass p{ color:var(--t-invert-soft); }

/* ---------- Pill / badge ---------- */
.pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:var(--mist); border:1px solid var(--line); font-size:.82rem; font-weight:600; color:var(--t-body); }
.pill svg{ width:15px;height:15px; color:var(--brand-deep); }
.section--ink .pill,.section--navy .pill{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:var(--t-invert); }

/* ---------- Trust strip ---------- */
.logos{ display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:center; }
.logos .logo{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--t-soft); opacity:.85; letter-spacing:-.01em; padding:8px 0; transition:.3s; }
.logos .logo:hover{ color:var(--brand-deep); opacity:1; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:46px; width:max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes slide{ to{ transform: translateX(-50%); } }

/* ---------- Stat band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr);} }
.stat{ text-align:center; padding:18px; }
.stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,4vw,3rem); color:var(--t-strong); }
.section--ink .stat .num,.section--navy .stat .num{ color:#fff; }
.stat .num .u{ color:var(--brand-deep); } .section--navy .stat .num .u{ color:var(--brand-bright); }
.stat .lbl{ font-size:.86rem; color:var(--t-soft); margin-top:4px; }
.section--navy .stat .lbl{ color:var(--t-invert-soft); }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }
.checklist li{ display:flex; gap:13px; padding:11px 0; border-bottom:1px solid var(--line); }
.section--ink .checklist li,.section--navy .checklist li{ border-color:rgba(255,255,255,.1); }
.checklist .ck{ width:26px;height:26px;border-radius:8px;background:rgba(22,206,198,.14);display:grid;place-items:center;color:var(--brand-deep);flex:0 0 auto; }
.checklist .ck svg{ width:15px;height:15px; }
.checklist b{ color:var(--t-strong); } .section--ink .checklist b,.section--navy .checklist b{ color:#fff; }
.checklist span{ font-size:.9rem; color:var(--t-soft); } .section--navy .checklist span{ color:var(--t-invert-soft); }

/* ---------- Visual frame (image placeholders) ---------- */
.frame{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: linear-gradient(135deg,var(--navy-700),var(--navy-900)); }
.frame--tall{ aspect-ratio: 3/4; }
.frame__ph{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--t-invert-soft); padding:24px; gap:10px; }
.frame__ph svg{ width:42px;height:42px;color:var(--brand-bright); opacity:.8; }
.frame__ph small{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.frame__tag{ position:absolute; left:16px; bottom:16px; z-index:2; }

/* Before/After slider */
.ba{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/10; user-select:none; touch-action:none; }
.ba__layer{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; letter-spacing:.04em; color:#fff; }
.ba__after{ background: linear-gradient(135deg,#0FA8A2,#072138); }
.ba__before{ background: linear-gradient(135deg,#3a4a52,#1c262c); clip-path: inset(0 50% 0 0); }
.ba__tag{ position:absolute; top:14px; padding:6px 12px; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.1em; background:rgba(0,0,0,.45); color:#fff; }
.ba__tag.before{ left:14px;} .ba__tag.after{ right:14px; }
.ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; box-shadow:0 0 18px rgba(0,0,0,.4); }
.ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px;height:46px;border-radius:50%; background:#fff; display:grid;place-items:center; box-shadow:var(--shadow-md); color:var(--navy); }
.ba__range{ position:absolute; inset:0; opacity:0; cursor:ew-resize; width:100%; height:100%; }

/* ---------- Programs ---------- */
.prog{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .prog{ grid-template-columns:1fr; } }
.prog__card{ border-radius:var(--radius-lg); padding:30px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.prog__card.is-featured{ background: var(--navy-900); color:#fff; border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-8px); }
@media (max-width:880px){ .prog__card.is-featured{ transform:none; } }
.prog__card.is-featured h3{ color:#fff; }
.prog__tag{ align-self:flex-start; margin-bottom:14px; }
.prog__card.is-featured .prog__tag{ background:var(--brand); color:#03201F; border-color:transparent; }
.prog__feat{ margin:18px 0 24px; } .prog__feat li{ display:flex; gap:10px; padding:8px 0; font-size:.94rem; color:var(--t-soft); }
.prog__card.is-featured .prog__feat li{ color:var(--t-invert-soft); }
.prog__feat svg{ width:18px;height:18px;color:var(--brand-deep);flex:0 0 auto; } .prog__card.is-featured .prog__feat svg{ color:var(--brand-bright); }
.prog__price{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--t-strong); margin-top:auto; } .prog__card.is-featured .prog__price{ color:#fff; }
.prog__price small{ display:block; font-weight:500; font-size:.8rem; color:var(--t-soft); margin-top:4px; } .prog__card.is-featured .prog__price small{ color:var(--t-invert-soft); }

/* ---------- Testimonials ---------- */
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); height:100%; display:flex; flex-direction:column; }
.quote__stars{ color:#E08A00; display:flex; gap:2px; margin-bottom:14px; filter: drop-shadow(0 1px 0 rgba(120,70,0,.35)); } .quote__stars svg{ width:18px;height:18px; }
.section--navy .quote__stars, .section--ink .quote__stars{ color:#FFC247; filter:none; }
.quote p{ font-size:1.02rem; color:var(--t-strong); font-weight:500; }
.quote__by{ margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:12px; }
.quote__av{ width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--navy)); color:#fff; display:grid;place-items:center;font-family:var(--font-display);font-weight:700; }
.quote__by b{ color:var(--t-strong); font-size:.92rem; display:block; } .quote__by span{ color:var(--t-soft); font-size:.82rem; }

/* ---------- Interactive coverage map ---------- */
.map-wrap{ display:grid; grid-template-columns:1.3fr .7fr; gap:34px; align-items:center; }
@media (max-width:920px){ .map-wrap{ grid-template-columns:1fr; } }
.map{ position:relative; }
.map svg{ width:100%; height:auto; overflow:visible; }
.cty{ fill: rgba(255,255,255,.05); stroke: rgba(45,233,223,.35); stroke-width:1.2; transition: fill .25s, transform .25s var(--ease), filter .25s; cursor:pointer; transform-box: fill-box; transform-origin:center; }
.cty:hover{ fill: rgba(22,206,198,.30); filter: drop-shadow(0 6px 16px rgba(22,206,198,.5)); }
.cty.is-tier1{ fill: rgba(22,206,198,.14); }
.cty.is-tier1:hover{ fill: rgba(22,206,198,.4); }
.cty-bg{ fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.12); stroke-width:.6; pointer-events:none; }
.cty-state{ fill:none; stroke: rgba(45,233,223,.30); stroke-width:1.4; pointer-events:none; }
.map svg .cty{ filter: drop-shadow(0 2px 6px rgba(22,206,198,.35)); }
.cty-label{ fill:#EAF6F6; font-family:var(--font-display); font-weight:600; font-size:13px; pointer-events:none; text-anchor:middle; }
.cty-dot{ fill: var(--brand-bright); }
.map__tip{ position:absolute; pointer-events:none; background:#fff; color:var(--navy); border-radius:10px; padding:8px 12px; font-size:.82rem; font-weight:600; box-shadow:var(--shadow-md); opacity:0; transform:translateY(6px); transition:.18s; white-space:nowrap; z-index:5; }
.map__tip.show{ opacity:1; transform:translateY(0); }
.arealist li a{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.12); margin-bottom:10px; color:#fff; font-family:var(--font-display); font-weight:600; transition:.25s; }
.arealist li a:hover{ background:rgba(22,206,198,.14); border-color:var(--brand); transform:translateX(4px); }
.arealist svg{ width:16px;height:16px;color:var(--brand-bright); }

/* ---------- FAQ ---------- */
.faq{ max-width: 820px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; text-align:left; background:none; border:none; padding:22px 8px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:var(--t-strong); }
.faq__q .ic{ width:30px;height:30px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;transition:.3s; }
.faq__q .ic svg{ width:16px;height:16px;transition:transform .3s var(--ease); }
.faq__item.is-open .faq__q .ic{ background:var(--brand); border-color:transparent; color:#03201F; }
.faq__item.is-open .faq__q .ic svg{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq__a p{ padding:0 8px 22px; color:var(--t-soft); }

/* ---------- Forms ---------- */
.formcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding: clamp(22px,3vw,38px); }
.formtabs{ display:flex; gap:8px; background:var(--mist); padding:6px; border-radius:999px; margin-bottom:24px; }
.formtab{ flex:1; padding:12px; border-radius:999px; border:none; background:transparent; font-family:var(--font-display); font-weight:600; color:var(--t-soft); transition:.25s; }
.formtab.is-active{ background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--t-strong); margin-bottom:7px; }
.field label .req{ color:var(--brand-deep); }
.input,.select,.textarea{ width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:#fff; font:inherit; color:var(--t-strong); transition:border-color .2s, box-shadow .2s; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(22,206,198,.15); }
.textarea{ min-height:110px; resize:vertical; }
/* address autocomplete dropdown */
.addr-suggest{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 54px -14px rgba(8,19,28,.34); overflow:hidden; display:none; }
.addr-suggest.show{ display:block; }
.addr-opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 14px; background:none; border:none; cursor:pointer; font:inherit; font-size:.9rem; color:var(--t-strong); line-height:1.3; }
.addr-opt svg{ width:16px; height:16px; color:var(--brand-deep); flex:none; }
.addr-opt + .addr-opt{ border-top:1px solid var(--line); }
.addr-opt:hover, .addr-opt.is-active{ background:#EEF6F6; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:.86rem; font-weight:500; color:var(--t-body); cursor:pointer; transition:.2s; user-select:none; }
.chip:hover{ border-color:var(--brand); }
.chip.is-on{ background:var(--brand); border-color:transparent; color:#03201F; font-weight:600; }
.form-note{ font-size:.78rem; color:var(--t-soft); margin-top:10px; }
.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form-ok{ display:none; text-align:center; padding:20px; }
.form-ok.show{ display:block; }
.form-ok .ok-ic{ width:64px;height:64px;border-radius:50%;background:rgba(22,206,198,.16);color:var(--brand-deep);display:grid;place-items:center;margin:0 auto 16px; }
.form-ok .ok-ic svg{ width:32px;height:32px; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius: clamp(20px,3vw,34px); padding: clamp(36px,6vw,72px); background:
  radial-gradient(90% 140% at 90% 0%, rgba(22,206,198,.3), transparent 55%), var(--navy-900); color:#fff; }
.cta-band h2{ color:#fff; }

/* ---------- Footer ---------- */
.footer{ background: var(--ink); color: var(--t-invert-soft); padding-block: 70px 32px; }
.footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:34px; }
@media (max-width:860px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }
.footer h4{ color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px; }
.footer a{ display:block; padding:6px 0; color:var(--t-invert-soft); font-size:.92rem; transition:color .2s; }
.footer a:hover{ color:var(--brand-bright); }
.footer__brand p{ font-size:.92rem; margin:14px 0; max-width:34ch; }
.footer__contact a{ display:flex; gap:10px; align-items:center; }
.footer__contact svg{ width:16px;height:16px;color:var(--brand-bright); }
.footer__bottom{ margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.82rem; }
.footer__badges{ display:flex; gap:10px; flex-wrap:wrap; }
.footer__badges .b{ padding:6px 12px; border:1px solid rgba(255,255,255,.14); border-radius:8px; font-size:.74rem; font-weight:600; color:#fff; }

/* ---------- Sticky mobile call bar ---------- */
.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(5,8,11,.92); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.1); }
.callbar .btn{ flex:1; --pad-y:14px; }
@media (max-width:1080px){ .callbar{ display:flex; } body{ padding-bottom:74px; } }

/* ---------- Breadcrumbs ---------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.84rem; color:var(--t-soft); padding-block:20px; }
.crumbs a:hover{ color:var(--brand-deep); } .crumbs svg{ width:14px;height:14px;opacity:.5; }
.section--ink .crumbs, .hero .crumbs{ color:var(--t-invert-soft); } .hero .crumbs a:hover{ color:var(--brand-bright); }

/* ---------- Reveal animation ---------- */
[data-reveal]{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } .marquee__track{ animation:none; } .tag-emergency .dot{ animation:none; } *{ scroll-behavior:auto !important; } }

/* ---------- Media frame (real photos) ---------- */
.media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/9; background:#04121F; }
.media--tall{ aspect-ratio:4/5; }
.media img{ width:100%; height:100%; object-fit:cover; display:block; }
.media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(4,18,31,.5)); pointer-events:none; }
.media .tag{ position:absolute; left:14px; bottom:14px; z-index:2; }
.frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Video showcase ---------- */
.vid{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio:16/9; background:#04121F; }
.vid--wide{ aspect-ratio:21/9; }
.vid video{ width:100%; height:100%; object-fit:cover; display:block; }
.vid__badge{ position:absolute; left:16px; bottom:16px; z-index:3; }
.vid__overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, transparent 55%, rgba(4,18,31,.55)); pointer-events:none; }
/* hero background photo/video */
.hero__media{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
.hero.has-photo .hero__bg{ z-index:1; }
.hero.has-photo .hero__bg::before{ background:
   radial-gradient(60% 80% at 82% 12%, rgba(22,206,198,.18), transparent 55%),
   linear-gradient(95deg, rgba(5,8,11,.93) 0%, rgba(5,8,11,.78) 40%, rgba(5,8,11,.32) 78%, rgba(5,8,11,.18) 100%); }
.hero.has-photo .hero__grid{ opacity:.25; }

/* ---------- Contrast safety on dark surfaces (bulletproof, explicit) ---------- */
/* Every heading on a dark section is white... */
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4, .section--navy h5,
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4, .section--ink h5,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4 { color:#fff !important; }
/* ...except headings inside a WHITE card, which keep dark text */
.section--navy .card:not(.card--glass) h1, .section--navy .card:not(.card--glass) h2, .section--navy .card:not(.card--glass) h3, .section--navy .card:not(.card--glass) h4,
.section--ink .card:not(.card--glass) h1, .section--ink .card:not(.card--glass) h2, .section--ink .card:not(.card--glass) h3, .section--ink .card:not(.card--glass) h4,
.section--navy .quote h1, .section--navy .quote h2, .section--navy .quote h3,
.section--navy .prog__card:not(.is-featured) h1, .section--navy .prog__card:not(.is-featured) h2, .section--navy .prog__card:not(.is-featured) h3 { color: var(--t-strong) !important; }
.section--navy .card--glass h3, .section--ink .card--glass h3 { color:#fff !important; }
/* dark sections: default body/paragraph text stays light */
.section--navy p, .section--ink p { color: var(--t-invert-soft); }
.section--navy .card:not(.card--glass) p, .section--ink .card:not(.card--glass) p, .section--navy .quote p { color: var(--t-soft); }
.hero .checklist b, .hero__card .checklist b, .cta-band .checklist b { color:#fff; }
.hero .checklist span, .hero__card .checklist span, .cta-band .checklist span { color: var(--t-invert-soft); }
.hero .checklist li, .hero__card .checklist li { border-color: rgba(255,255,255,.12); }
.hero__card .pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--t-invert); }
.hero__card .pill svg, .hero .pill svg { color: var(--brand-bright); }
/* any non-button link sitting on a dark surface stays bright, never dark-on-dark */
.hero a:not(.btn):not(.nav__link):not(.brand):not(.nav__phone),
.hero__card a:not(.btn),
.cta-band a:not(.btn),
.section--navy a:not(.btn):not(.brand),
.section--ink a:not(.btn):not(.brand) { color: var(--brand-bright); }
.hero a.ti, .hero a.ti:hover { color: var(--t-invert-soft); }
.hero a.ti b { color:#fff; }
/* The hero is a dark surface on EVERY page, but it is not tagged .section--navy/.section--ink,
   so ghost buttons there fell through to the dark default. Force them light. */
.hero .btn--ghost, .hero__card .btn--ghost { color: var(--t-invert) !important; border-color: rgba(255,255,255,.24); }
.hero .btn--ghost:hover, .hero__card .btn--ghost:hover { color: var(--brand-bright) !important; border-color: var(--brand); }
.hero .btn--ghost svg { color: var(--brand-bright); }

/* ---------- Misc ---------- */
.divider-soft{ height:1px; background:var(--line); }
.kicker-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:42px; }
.tag-emergency{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(255,86,86,.12); color:#ff7a7a; font-size:.8rem; font-weight:600; }
.tag-emergency .dot{ width:8px;height:8px;border-radius:50%;background:#ff5656; box-shadow:0 0 0 0 rgba(255,86,86,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(255,86,86,0);} 100%{ box-shadow:0 0 0 0 rgba(255,86,86,0);} }