/* ==========================================================================
   VLG Task Services — v5 unified design system (single source of truth).
   Loaded LAST in Base.astro so its tokens + components take precedence over
   the legacy site.css / v2.css compatibility layer. Token-driven: every
   component reads semantic variables, so light/dark + rebrands are one edit.
   Premium commercial clean-tech: navy + teal + white, controlled cyan glow.
   WCAG AA, reduced-motion aware, no-JS safe.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* brand ramp */
  --navy-950:#071a2f; --navy-900:#0A2540; --navy-800:#123a5e;
  --navy-700:#184a75; --teal-600:#0e7c86; --teal-500:#12a3ad; --teal-400:#2bc4cf;
  --cyan-400:#38d6e6; --green-500:#22a06b; --green-400:#34c17f;

  /* semantic — light */
  --bg:#ffffff;
  --bg-subtle:#f4f7fa;
  --bg-sunken:#eef2f7;
  --surface:#ffffff;
  --surface-2:#f7fafc;
  --ink:#0c2036;
  --ink-2:#3d566e;
  --ink-3:#556983;
  --line:#dde5ee;
  --line-2:#c8d4e0;
  --brand:#0A2540;
  --brand-ink:#ffffff;
  --accent:#0a6a72;
  --accent-2:#12a3ad;
  --accent-ink:#ffffff;
  --glow:rgba(43,196,207,.22);
  --focus:#0e7c86;
  --button-primary-bg:#075b63;
  --button-primary-bg-hover:#064b52;
  --button-primary-text:#ffffff;
  --button-primary-border:#075b63;
  /* override legacy v2.css accents so accent-on-light text meets WCAG AA */
  --v2-accent:#0a6a72; --color-accent:#0a6a72;

  /* typography */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --fs-800:clamp(2.35rem,1.6rem + 3.3vw,3.9rem);
  --fs-700:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);
  --fs-600:clamp(1.45rem,1.2rem + 1.1vw,1.95rem);
  --fs-500:clamp(1.2rem,1.08rem + .5vw,1.4rem);
  --fs-400:1.06rem;
  --fs-300:.94rem;
  --fs-200:.82rem;
  --lh-tight:1.12; --lh-snug:1.3; --lh:1.62;

  /* spacing scale (8pt) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:88px; --sp-10:120px;

  /* radius / shadow / motion / container */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,37,64,.06),0 1px 3px rgba(10,37,64,.09);
  --sh-2:0 6px 16px -6px rgba(10,37,64,.16),0 2px 6px -2px rgba(10,37,64,.10);
  --sh-3:0 20px 45px -18px rgba(10,37,64,.30),0 8px 20px -12px rgba(10,37,64,.18);
  --sh-glow:0 24px 60px -22px var(--glow);
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:.22s;
  --container:1160px;
  --container-narrow:760px;
}
html[data-theme="dark"]{
  --bg:#0b1520;
  --bg-subtle:#0f1d2c;
  --bg-sunken:#0a1420;
  --surface:#122234;
  --surface-2:#0f1d2c;
  --ink:#e9f1f8;
  --ink-2:#b3c4d6;
  --ink-3:#8ba0b6;
  --line:#22384f;
  --line-2:#2c465f;
  --brand:#0e2136;
  --brand-ink:#eaf1f8;
  --accent:#2bc4cf;
  --accent-2:#38d6e6;
  --accent-ink:#03202a;
  --glow:rgba(43,196,207,.30);
  --focus:#38d6e6;
  --button-primary-bg:#38d6e6;
  --button-primary-bg-hover:#70e5ef;
  --button-primary-text:#03202a;
  --button-primary-border:#38d6e6;
  /* legacy accent vars must be light on dark surfaces for WCAG AA */
  --v2-accent:#38d6e6; --color-accent:#38d6e6;
  color-scheme:dark;
}

/* ---------- 2. Base / reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--fs-400); line-height:var(--lh);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
img,svg,video{max-width:100%;height:auto;display:block}
.v5-icon{
  inline-size:var(--icon-size,24px);
  block-size:var(--icon-size,24px);
  min-inline-size:var(--icon-size,24px);
  flex:0 0 var(--icon-size,24px);
  max-inline-size:none;
}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-2)}
h1,h2,h3,h4{color:var(--ink);line-height:var(--lh-snug);margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:var(--fs-800);line-height:var(--lh-tight);letter-spacing:-.02em}
h2{font-size:var(--fs-700)}
h3{font-size:var(--fs-600)}
p{margin:0 0 1em}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:4px
}
.visually-hidden,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

/* ---------- 3. Layout primitives ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:clamp(48px,7vw,var(--sp-9))}
.section--tight{padding-block:clamp(32px,5vw,var(--sp-7))}
.section--sunken{background:var(--bg-subtle)}
.section--brand{background:linear-gradient(160deg,var(--navy-900),var(--navy-950) 60%);color:#dfe9f3;position:relative;overflow:hidden}
.section--brand h1,.section--brand h2,.section--brand h3{color:#fff}
.section--brand p{color:#b9cbdd}
body.v2 .section--brand{
  background:linear-gradient(160deg,var(--navy-900),var(--navy-950) 60%);
  color:#dfe9f3
}
body.v2 .section--brand h1,body.v2 .section--brand h2,body.v2 .section--brand h3{color:#fff}
body.v2 .section--brand p,body.v2 .section--brand li{color:#b9cbdd}
.section--brand::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 90% at 85% 0%,var(--glow),transparent 60%),
  radial-gradient(40% 70% at 0% 100%,rgba(18,163,173,.14),transparent 60%);pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-200);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .8em}
.section--brand .eyebrow{color:var(--accent-2)}
.lead,.v2-lead{font-size:var(--fs-500);color:var(--ink-2);line-height:1.5;max-width:62ch}
.section--brand .lead{color:#c6d6e6}
body.v2 .section--brand .lead{color:#c6d6e6}
.stack>*+*{margin-top:var(--sp-4)}

/* ---------- 4. Buttons ---------- */
.btn,.v2-btn,.v5-btn{
  --_bg:var(--surface);--_fg:var(--ink);--_bd:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:inherit;font-weight:700;font-size:var(--fs-300);line-height:1;
  padding:.85em 1.4em;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;
  background:var(--_bg);color:var(--_fg);border:1.5px solid var(--_bd);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover,.v2-btn:hover,.v5-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--_fg)}
.btn:active,.v2-btn:active,.v5-btn:active{transform:translateY(0)}
.btn-primary,.v2-btn-primary,.btn-on-dark,.v5-btn--primary{
  --_bg:var(--button-primary-bg);--_fg:var(--button-primary-text);--_bd:var(--button-primary-border);
  box-shadow:var(--sh-1),0 10px 22px -12px var(--glow)
}
.btn-primary:hover,.v2-btn-primary:hover,.v5-btn--primary:hover{
  --_bg:var(--button-primary-bg-hover);
  box-shadow:var(--sh-3),0 14px 30px -12px var(--glow);color:var(--button-primary-text)
}
.btn-outline,.btn-ghost-dark,.v5-btn--outline{--_bg:transparent}
.v5-btn--ghost{--_bg:transparent;--_bd:transparent}
.btn-lg,.v2-btn-lg,.v5-btn--lg{font-size:var(--fs-400);padding:1em 1.7em}
.btn-block{width:100%}
.section--brand .btn:not(.btn-primary){--_bg:rgba(255,255,255,.06);--_fg:#eaf3fb;--_bd:rgba(255,255,255,.22)}
body.v2 :is(.btn,.v2-btn,.v5-btn){color:var(--_fg)}

/* ---------- 5. Cards & grids ---------- */
.grid{display:grid;gap:var(--sp-5)}
.v2-grid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card,.v2-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)
}
.card:hover,.v2-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.v2-card-icon,.card-icon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);margin-bottom:var(--sp-4)
}
.v2-card-icon svg,.card-icon svg{width:24px;height:24px}
.v2-tag,.badge{display:inline-block;font-size:var(--fs-200);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:.32em .7em;border-radius:var(--r-pill)}
.v2-chip{display:inline-flex;align-items:center;gap:.45em;font-size:var(--fs-300);font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);padding:.5em .9em;border-radius:var(--r-pill)}
.v2-chip svg{width:16px;height:16px;color:var(--green-500)}

/* ---------- 6. Header ---------- */
.site-header,.v2-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.site-nav,.v2-nav{display:flex;align-items:center;gap:var(--sp-4);min-height:70px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{height:42px;width:auto}
.brand-logo--mark{display:none}
.nav-main{display:flex;align-items:center;gap:2px;margin-left:var(--sp-3)}
.nav-main>a,.nav-item>button{
  font:inherit;font-weight:650;font-size:var(--fs-300);color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:.55em .8em;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;gap:.35em;text-decoration:none
}
.nav-main>a:hover,.nav-item>button:hover{color:var(--ink);background:var(--surface-2)}
.nav-main>a[aria-current="page"],.nav-item[data-active] >button{color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.nav-item{position:relative}
.nav-item>button .chev{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.nav-item>button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-pop{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:var(--sp-2);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.nav-item:hover .nav-pop,.nav-item:focus-within .nav-pop,.nav-item[data-open] .nav-pop{opacity:1;visibility:visible;transform:none}
.nav-pop a{display:block;padding:.6em .8em;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-size:var(--fs-300);font-weight:600}
.nav-pop a small{display:block;font-weight:500;color:var(--ink-3);font-size:var(--fs-200);margin-top:2px}
.nav-pop a:hover{background:var(--surface-2);color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.v2-nav-phone,.nav-phone{font-weight:800;color:var(--ink);text-decoration:none;white-space:nowrap}
.v2-nav-phone:hover,.nav-phone:hover{color:var(--accent)}
.v2-theme-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.v2-theme-toggle:hover{color:var(--ink);border-color:var(--accent)}
.v2-theme-toggle svg{width:19px;height:19px}
.v2-theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .v2-theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .v2-theme-toggle .icon-moon{display:none}
.nav-burger{display:none}

/* dark logo treatment */
html[data-theme="dark"] .brand-logo--full img{filter:brightness(0) invert(1)}

/* ---------- 7. Mobile drawer ---------- */
.nav-drawer{display:none}
@media (max-width:940px){
  .nav-main,.nav-right .v2-nav-phone,.nav-right .btn{display:none}
  .nav-burger{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer}
  .nav-drawer{display:block}
}
.drawer-panel{position:fixed;inset:0 0 0 auto;width:min(88vw,360px);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh-3);transform:translateX(100%);transition:transform var(--dur) var(--ease);z-index:130;display:flex;flex-direction:column;padding:var(--sp-5);overflow-y:auto}
.nav-drawer[open] .drawer-panel,.drawer-panel[data-open]{transform:none}
.drawer-scrim{position:fixed;inset:0;background:rgba(6,18,32,.5);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);z-index:120}
.nav-drawer[open] .drawer-scrim,.drawer-scrim[data-open]{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.drawer-close{width:44px;height:44px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.drawer-panel a{display:block;padding:.7em .2em;color:var(--ink);text-decoration:none;font-weight:650;border-bottom:1px solid var(--line)}
.drawer-panel a.is-sub{padding-left:1em;font-weight:550;color:var(--ink-2);font-size:var(--fs-300)}
.drawer-panel .btn{margin-top:var(--sp-4)}
body.no-scroll{overflow:hidden}
details.nav-drawer>summary{list-style:none}
details.nav-drawer>summary::-webkit-details-marker{display:none}

/* ---------- 8. Hero (split 55/45) ---------- */
.hero-v5{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--navy-900),var(--navy-950));color:#e7f0f8}
.hero-v5::before{content:"";position:absolute;inset:0;background:
  radial-gradient(50% 60% at 88% 8%,var(--glow),transparent 62%),
  radial-gradient(45% 55% at 6% 100%,rgba(18,163,173,.16),transparent 60%);pointer-events:none}
.hero-v5 .container{position:relative;display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:center;padding-block:clamp(44px,7vw,86px)}
@media(min-width:900px){.hero-v5 .container{grid-template-columns:55fr 45fr}}
.hero-copy h1,body.v2 .hero-v5 .hero-copy h1{color:#fff}
.hero-copy .lead,body.v2 .hero-v5 .hero-copy .lead{color:#c3d5e6;margin-bottom:var(--sp-5)}
.hero-eyebrow,body.v2 .hero-v5 .hero-eyebrow{color:#70e5ef}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.hero-v5 .v5-btn--primary{
  --_bg:#38d6e6;--_fg:#03202a;--_bd:#38d6e6
}
.hero-v5 .v5-btn--primary:hover{--_bg:#70e5ef;--_fg:#03202a}
.hero-v5 .v5-btn--outline{
  --_bg:transparent;--_fg:#eaf3fb;--_bd:rgba(255,255,255,.32)
}
.hero-phone,body.v2 .hero-v5 .hero-phone{color:#dbe8f4;font-weight:800;text-decoration:none;white-space:nowrap}
.hero-phone:hover,body.v2 .hero-v5 .hero-phone:hover{color:#fff}
.hero-meta,.v2-hero-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-5);list-style:none;padding:0;color:#a9c1d6;font-size:var(--fs-300)}
.hero-v5 .hero-meta li,body.v2 .hero-v5 .hero-meta li{color:#a9c1d6}
.hero-meta li{display:flex;align-items:center;gap:.45em}
.hero-meta svg{width:16px;height:16px;color:var(--accent-2)}
/* media collage */
.hero-media{position:relative;min-height:clamp(360px,34vw,470px)}
.collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:100%}
.collage figure{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.1)}
.collage img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.collage .c-tall{grid-row:span 2;aspect-ratio:auto}
.collage .c-tall img{height:100%;aspect-ratio:3/4}
.hero-trustcard{position:absolute;left:6%;bottom:-18px;background:var(--surface);color:var(--ink);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:.8em 1.05em;display:flex;align-items:center;gap:.7em;border:1px solid var(--line);font-size:var(--fs-300);font-weight:700}
.hero-trustcard svg{width:26px;height:26px;color:var(--green-500);flex:0 0 auto}
.hero-badge{position:absolute;right:4%;top:-14px;background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);font-weight:800;font-size:var(--fs-200);letter-spacing:.03em;padding:.55em .9em;border-radius:var(--r-pill);box-shadow:var(--sh-2)}
@media(max-width:520px){.hero-trustcard{position:static;margin-top:22px}.hero-badge{display:none}}
@media(max-width:899px){.hero-media{min-height:clamp(330px,72vw,470px)}}
@media(max-width:520px){.hero-media{min-height:auto}.collage{height:auto}}

/* ---------- 9. Trust bar ---------- */
.trustbar{border-block:1px solid var(--line);background:var(--surface-2)}
.trustbar ul{list-style:none;margin:0;padding:var(--sp-4) 0;display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);justify-content:center;align-items:center}
.trustbar li{display:flex;align-items:center;gap:.5em;font-weight:650;font-size:var(--fs-300);color:var(--ink-2)}
.trustbar svg{width:18px;height:18px;color:var(--green-500);flex:0 0 auto}

/* ---------- 10. Bento services ---------- */
.bento{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.bento{grid-template-columns:repeat(6,1fr)}}
.bento-item{grid-column:span 2;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1);position:relative;overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);text-decoration:none;color:inherit;display:block}
.bento-item:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2);color:inherit}
.bento-item h3{font-size:var(--fs-500);margin-bottom:.3em}
.bento-item p{color:var(--ink-2);font-size:var(--fs-300);margin:0}
.bento-item .more{margin-top:var(--sp-3);color:var(--accent);font-weight:700;font-size:var(--fs-300)}
@media(min-width:760px){.bento-item.feat{grid-column:span 3}.bento-item.wide{grid-column:span 3}}
.bento-item.dark{background:linear-gradient(155deg,var(--navy-800),var(--navy-900));color:#e6f0f9;border-color:transparent}
.bento-item.dark h3{color:#fff}.bento-item.dark p{color:#b7cadd}
.bento-item.dark::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 100% 0,var(--glow),transparent 60%);pointer-events:none}

/* ---------- 11. Process steps ---------- */
.steps{display:grid;gap:var(--sp-5);counter-reset:step;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{position:relative;padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.section--brand .step{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  box-shadow:0 14px 34px -24px rgba(0,0,0,.65)
}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:var(--sp-5);width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);font-weight:800;box-shadow:var(--sh-2)}
.step h3{font-size:var(--fs-500);margin:.6em 0 .3em}
.step p{color:var(--ink-2);font-size:var(--fs-300);margin:0}
.section--brand .step p,body.v2 .section--brand .step p{color:#b9cbdd}
.operations-split{display:grid;gap:clamp(40px,6vw,72px);grid-template-columns:1fr}
.operations-grid{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);grid-template-columns:1fr}
.operations-card{
  display:grid;grid-template-columns:40px 1fr;column-gap:var(--sp-3);align-items:start;
  padding:var(--sp-4);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);background:rgba(255,255,255,.055)
}
.operations-card__icon{
  width:40px;height:40px;display:grid;place-items:center;grid-row:1/3;
  border-radius:12px;color:var(--accent-2);background:rgba(56,214,230,.11)
}
.operations-card h3{margin:0 0 .25em;color:#fff}
.operations-card p,.operations-card__copy,body.v2 .section--brand .operations-card__copy{
  grid-column:2;color:#b9cbdd;font-size:var(--fs-300);margin:0
}
@media(min-width:980px){
  .operations-split{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start}
}

/* ---------- 12. Proof / media ---------- */
.proof-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.proof-grid figure{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);border:1px solid var(--line);background:var(--surface)}
.proof-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proof-grid figcaption{padding:.6em .8em;font-size:var(--fs-200);color:var(--ink-3)}

/* before/after (enhances v2 markup) */
.v2-ba,.ba{position:relative}
.v2-ba-frame,.ba-frame{position:relative;overflow:hidden;border-radius:var(--r-md);box-shadow:var(--sh-2);border:1px solid var(--line)}
.v2-ba-frame img,.ba-frame img{width:100%;display:block}
.v2-ba.enhanced .img-after,.ba.enhanced .img-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split,50%))}
.v2-ba-handle,.ba-handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(10,37,64,.25);pointer-events:none}
.v2-ba-handle::after,.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:var(--sh-2)}
.v2-ba input[type=range],.ba input[type=range]{position:absolute;inset:auto 0 8px;width:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
.v2-ba input[type=range]:focus-visible{outline-offset:6px}
.v2-ba-label,.ba-label{position:absolute;top:10px;padding:.25em .6em;font-size:var(--fs-200);font-weight:700;color:#fff;background:rgba(10,37,64,.72);border-radius:var(--r-pill)}
.v2-ba-label.before{left:10px}.v2-ba-label.after{right:10px}

/* ---------- 13. Forms ---------- */
.v2-fields,.form-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.v2-fields,.form-grid{grid-template-columns:1fr}}
.v2-field{display:flex;flex-direction:column;gap:.4em}
.v2-field--full{grid-column:1/-1}
.v2-field label,.field label{font-weight:650;font-size:var(--fs-300);color:var(--ink)}
.req{color:#d6455d}
.hint{font-weight:500;color:var(--ink-3);font-size:var(--fs-200)}
.v2-field input,.v2-field select,.v2-field textarea,.form input,.form select,.form textarea{
  font:inherit;font-size:var(--fs-300);padding:.7em .85em;border-radius:var(--r-sm);
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);width:100%
}
.v2-field input:focus,.v2-field select:focus,.v2-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);outline:none}
.v2-field [aria-invalid="true"]{border-color:#d6455d}
.field-msg{font-size:var(--fs-200);color:#d6455d;min-height:1em}
.v2-form-card,.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);box-shadow:var(--sh-2)}
.v2-form-note{font-size:var(--fs-200);color:var(--ink-3);margin-top:var(--sp-4)}
.form-status{margin-top:var(--sp-3);font-weight:650}
.form-status[data-state="error"]{color:#d6455d}
.form-status[data-state="success"]{color:var(--green-500)}
.v2-form-wrap{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
@media(min-width:860px){.v2-form-wrap{grid-template-columns:.8fr 1.2fr;align-items:start}}
.v2-points{list-style:none;padding:0;margin:var(--sp-4) 0;display:grid;gap:.6em}
.v2-points li{display:flex;gap:.6em;color:var(--ink-2);font-size:var(--fs-300)}
.v2-points svg{width:20px;height:20px;color:var(--green-500);flex:0 0 auto}
.v2-form-trust{display:flex;flex-wrap:wrap;gap:.5em;margin-top:var(--sp-3)}

/* ---------- 14. FAQ (native details, both legacy + v2) ---------- */
.v2-faq details,.faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--sp-3);overflow:hidden}
.v2-faq summary,.faq-q{cursor:pointer;padding:1em 1.1em;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1em;align-items:center}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq summary::after,.faq-q::after{content:"+";font-size:1.3em;color:var(--accent);transition:transform var(--dur)}
.v2-faq details[open] summary::after{transform:rotate(45deg)}
.v2-faq-a,.faq-panel{padding:0 1.1em 1.1em;color:var(--ink-2)}

/* ---------- 15. Map ---------- */
.v2-map-wrap{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media(min-width:820px){.v2-map-wrap{grid-template-columns:1.1fr .9fr}}
.v2-map{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--sh-1);aspect-ratio:4/3}
.v2-map .marker{cursor:pointer}
.v2-map .marker circle{fill:var(--accent);transition:r var(--dur) var(--ease),fill var(--dur)}
.v2-map .marker.hl circle,.v2-map .marker:hover circle,.v2-map .marker:focus circle{fill:var(--accent-2);r:9}
.v2-map .marker[aria-pressed="true"] circle{fill:var(--green-500)}
.v2-map-cards{display:grid;gap:var(--sp-3)}
.v2-map-card{display:block;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);cursor:pointer;box-shadow:var(--sh-1);color:inherit}
.v2-map-card.hl,.v2-map-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.v2-map-card h3{font-size:var(--fs-400);margin:0 0 .2em}
.v2-map-card p{margin:0;color:var(--ink-3);font-size:var(--fs-300)}

/* v5 real-boundary service map (MapLibre is route-split and loaded near view) */
.service-map{display:grid;gap:var(--sp-5)}
.service-map__intro{display:grid;gap:var(--sp-4);align-items:end}
.service-map__intro h2{max-width:18ch}
.service-map__intro p{max-width:68ch;color:var(--ink-2)}
.service-map__source{
  padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink-3);font-size:var(--fs-200)
}
.service-map__source strong{display:block;color:var(--ink);margin-bottom:2px}
@media(min-width:760px){.service-map__intro{grid-template-columns:1fr minmax(240px,.42fr)}}
.service-map__chips{
  display:flex;gap:var(--sp-2);overflow-x:auto;padding:2px 2px var(--sp-2);
  scrollbar-width:thin;scroll-snap-type:x proximity
}
.service-map__chip,.service-map__control{
  min-height:44px;border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--fs-300);
  font-weight:700;white-space:nowrap;cursor:pointer;padding:.65em 1em
}
.service-map__chip{display:inline-flex;align-items:center;gap:.5em;scroll-snap-align:start}
.service-map__chip:hover,.service-map__control:hover{border-color:var(--accent);color:var(--ink)}
.service-map__chip[aria-pressed="true"]{
  border-color:var(--accent);background:var(--accent);color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)
}
html[data-theme="dark"] .service-map__chip[aria-pressed="true"]{color:#03202a}
.service-map__home-dot{
  width:9px;height:9px;border-radius:50%;background:var(--green-500);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--green-500) 20%,transparent)
}
.service-map__layout{display:grid;gap:var(--sp-5);align-items:stretch}
@media(min-width:900px){.service-map__layout{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr)}}
.service-map__visual{
  position:relative;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--sp-3);box-shadow:var(--sh-2)
}
.service-map__canvas{
  position:relative;height:clamp(390px,52vw,590px);overflow:hidden;border-radius:calc(var(--r-lg) - 6px);
  background:
    radial-gradient(circle at 30% 40%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 28%),
    linear-gradient(145deg,var(--bg-sunken),var(--surface-2))
}
.service-map__canvas .maplibregl-canvas{max-width:none}
.service-map__canvas .maplibregl-ctrl-attrib{
  color:#26384a;background:rgba(255,255,255,.88);font-size:11px
}
.service-map__canvas .maplibregl-ctrl-attrib a{color:#075b63}
.service-map__skeleton{
  position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;
  gap:var(--sp-3);padding:var(--sp-5);text-align:center;color:var(--ink-2)
}
.service-map__skeleton.is-hidden{display:none}
.service-map__canvas.has-fallback .service-map__skeleton{background:var(--surface-2)}
.service-map__status{margin:.65em .25em 0;color:var(--ink-3);font-size:var(--fs-200);min-height:1.4em}
.service-map__attribution{margin:.2em .25em 0;color:var(--ink-3);font-size:.72rem}
.service-map__attribution a{color:var(--accent)}
.service-map__controls{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.service-map__control{border-radius:var(--r-sm);padding:.55em .9em}
.service-map__detail{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(20px,3vw,32px);box-shadow:var(--sh-1);align-self:stretch
}
.service-map__detail-kicker{
  display:block;margin-bottom:var(--sp-2);color:var(--accent);font-size:var(--fs-200);
  font-weight:800;letter-spacing:.08em;text-transform:uppercase
}
.service-map__detail h3{font-size:var(--fs-600)}
.service-map__detail p{color:var(--ink-2);font-size:var(--fs-300)}
.service-map__detail dl{margin:var(--sp-5) 0;display:grid;gap:var(--sp-3)}
.service-map__detail dl div{padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.service-map__detail dt{font-size:var(--fs-200);font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.service-map__detail dd{margin:.15em 0 0;color:var(--ink);font-size:var(--fs-300)}
.service-map__detail-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.service-map__detail .v5-btn{width:100%}
.service-map__fallback{
  border-top:1px solid var(--line);padding-top:var(--sp-5)
}
.service-map__fallback>p{display:flex;flex-wrap:wrap;gap:.4em 1em;color:var(--ink)}
.service-map__fallback>p span{color:var(--ink-3);font-size:var(--fs-300)}
.service-map__fallback ul{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))
}
.service-map__fallback a{
  display:block;min-height:64px;padding:.75em .9em;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);text-decoration:none
}
.service-map__fallback a:hover{border-color:var(--accent);color:var(--ink);box-shadow:var(--sh-1)}
.service-map__fallback small{display:block;color:var(--ink-3);font-size:var(--fs-200)}
.service-map__noscript{padding:var(--sp-4);background:var(--surface-2);border-radius:var(--r-sm)}
.service-map__base-marker{
  width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:var(--green-500);
  box-shadow:0 4px 14px rgba(7,26,47,.35)
}
.service-map__base-marker::after{
  content:"";position:absolute;inset:-8px;border:2px solid var(--green-500);border-radius:50%;
  animation:map-pulse 2s ease-out infinite
}
.service-map__canvas .is-map-link{cursor:pointer}
@keyframes map-pulse{0%{transform:scale(.55);opacity:.8}75%,100%{transform:scale(1.35);opacity:0}}
body.map-modal-open{overflow:hidden}
.service-map.is-expanded{
  position:fixed;inset:12px;z-index:220;overflow:auto;padding:var(--sp-4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--sh-3)
}
.service-map.is-expanded .service-map__canvas{height:min(72vh,760px)}
@media(max-width:680px){
  .service-map__canvas{height:440px}
  .service-map__visual{padding:var(--sp-2)}
  .service-map__detail{padding:var(--sp-4)}
  .service-map.is-expanded{inset:0;border:0;border-radius:0;padding:var(--sp-3)}
  .service-map.is-expanded .service-map__canvas{height:68vh}
}

/* ---------- 16. Estimator / quote planner stepper ---------- */
.v2-steps fieldset[data-inactive]{display:none}
.v2-est-progress{display:flex;gap:8px;margin-bottom:var(--sp-5)}
.v2-est-progress .seg{flex:1;height:6px;border-radius:var(--r-pill);background:var(--line)}
.v2-est-progress .seg.done{background:var(--green-500)}
.v2-est-progress .seg.now{background:var(--accent)}
.v2-est-steplabel{font-weight:700;color:var(--ink-2);margin-bottom:var(--sp-3)}
.v2-est-nav{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-4)}
.v2-est-review dl{display:grid;grid-template-columns:auto 1fr;gap:.3em .8em;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4)}
.v2-est-review dt{font-weight:700;color:var(--ink-2)}
.v2-est-review dd{margin:0;color:var(--ink)}
.choice-cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.choice-card{position:relative;border:1.5px solid var(--line-2);border-radius:var(--r-md);padding:var(--sp-4);cursor:pointer;background:var(--surface);display:flex;flex-direction:column;gap:.3em}
.choice-card input{position:absolute;opacity:0}
.choice-card:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.choice-card strong{font-size:var(--fs-400)}
.choice-card span{color:var(--ink-3);font-size:var(--fs-200)}

/* ---------- 17. CTA strip / gallery / related / callout ---------- */
.v2-cta-strip,.cta-strip{background:linear-gradient(155deg,var(--navy-800),var(--navy-900));color:#e7f0f8;border-radius:var(--r-xl);padding:clamp(28px,4vw,52px);text-align:center;position:relative;overflow:hidden}
.v2-cta-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 80% 0,var(--glow),transparent 60%);pointer-events:none}
.v2-cta-strip h2{color:#fff}
.v2-cta-strip p{color:#bcd0e2;max-width:56ch;margin-inline:auto}
.v2-cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-5);position:relative}
.v2-gal{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.v2-gal-item{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1);position:relative}
.v2-gal-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s var(--ease)}
.v2-gal-item:hover img{transform:scale(1.05)}
.v2-gal-item figcaption{padding:.6em .8em;font-size:var(--fs-200);color:var(--ink-3)}
.v2-filters{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:var(--sp-5)}
.v2-filter{font:inherit;font-weight:650;font-size:var(--fs-300);padding:.5em 1em;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.v2-filter[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.v2-related{list-style:none;padding:0;margin:var(--sp-5) 0 0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.v2-related a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);text-decoration:none;font-weight:700;color:var(--ink)}
.v2-related a small{display:block;font-weight:500;color:var(--ink-3);margin-top:.2em;font-size:var(--fs-200)}
.v2-related a:hover{border-color:var(--accent);box-shadow:var(--sh-1)}
.v2-callout{background:var(--surface-2);border-left:4px solid var(--accent);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0}
.v2-callout-label{font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-200)}
.v2-divider{height:1px;background:var(--line);border:0;margin:var(--sp-6) 0}

/* lightbox dialog */
.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,1100px);max-height:92vh}
.lightbox::backdrop{background:rgba(6,18,32,.82);backdrop-filter:blur(3px)}
.lightbox-inner{position:relative;background:var(--surface);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-3)}
.lightbox img{width:100%;max-height:78vh;object-fit:contain;background:#0b1520}
.lightbox figcaption{padding:.7em 1em;color:var(--ink-2);font-size:var(--fs-300)}
.lightbox-btn{position:absolute;top:8px;width:44px;height:44px;border-radius:var(--r-pill);border:0;background:rgba(6,18,32,.6);color:#fff;cursor:pointer;display:grid;place-items:center}
.lightbox-close{right:8px}.lightbox-prev{left:8px;top:50%;transform:translateY(-50%)}.lightbox-next{right:8px;top:50%;transform:translateY(-50%)}

/* ---------- 18. Prose / breadcrumbs ---------- */
.prose{max-width:72ch;color:var(--ink-2)}
.prose h2{margin-top:1.6em}.prose h3{margin-top:1.3em}
.prose a{font-weight:600}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin:.3em 0}
.crumbs{font-size:var(--fs-200);color:var(--ink-3);margin-bottom:var(--sp-4)}
.crumbs a{color:var(--ink-2)}

/* ---------- 19. Footer ---------- */
.site-footer,.v2-footer{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));color:#b9cbdd;padding-block:var(--sp-8) var(--sp-5);margin-top:var(--sp-8)}
.site-footer a,.v2-footer a{color:#cdddec;text-decoration:none}
.site-footer a:hover,.v2-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;gap:var(--sp-6);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-col h4{color:#fff;font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--sp-3)}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.55em}
.footer-col p{color:#9fb6ca;font-size:var(--fs-300)}
.footer-col .brand img{height:38px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-6);padding-top:var(--sp-4);color:#8ba3ba;font-size:var(--fs-200)}

/* ---------- 20. Reveal / motion ---------- */
.js .v2-reveal,.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .v2-reveal.in-view,.js .reveal.in-view,.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .v2-reveal,.js .reveal{opacity:1!important;transform:none!important}
  .service-map__base-marker::after{animation:none!important;opacity:.35}
}

/* neutralize legacy forced-white sheet in dark mode */
html[data-theme="dark"] .v2-legacy{background:transparent!important;color:var(--ink)!important}
html[data-theme="dark"] .v2-legacy h1,html[data-theme="dark"] .v2-legacy h2,html[data-theme="dark"] .v2-legacy h3,html[data-theme="dark"] .v2-legacy h4{color:var(--ink)!important}
html[data-theme="dark"] .v2-legacy p,html[data-theme="dark"] .v2-legacy li{color:var(--ink-2)!important}

/* decorative */
.grid-line,.radius-ring{pointer-events:none}
.green{color:var(--green-500)}