/* ============================================================
   SELF-HOSTED FONTS
   These were loaded from fonts.googleapis.com. They are served from this
   folder instead, for two reasons: the site-wide Content-Security-Policy on
   blackoakconsulting.net allows no third-party origins, and a demo hosted here
   should not be sending visitor IP addresses to Google when the real site
   deliberately does not.

   The files are the same variable woff2 Google serves, split by unicode-range
   exactly as Google splits them, so a visitor still downloads only the subset
   their content needs.

   NOTE ON AXES: these carry opsz and wght only, which is precisely what the
   old <link> requested (ital,opsz,wght). Fraunces' WONK and SOFT axes were
   never in that request, so "font-variation-settings:WONK 1" further down was
   already doing nothing before this change. Rendering is unchanged. To make
   WONK real, the full-axis Fraunces from github.com/google/fonts is needed.
   ============================================================ */

@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/fraunces-italic-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/fraunces-italic-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/fraunces-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Public Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/public-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Public Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/public-sans-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('../fonts/public-sans-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('../fonts/public-sans-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* ============================================================
   Local HVAC Company - Design System
   Palette drawn from the badge logo: deep navy hull, lake blue,
   spray highlight, sunset ember. Sand-paper ground.
   ============================================================ */

:root{
  /* Brand */
  --navy-950:#08192F;
  --navy-900:#0E2A4F;
  --navy-800:#143A6B;
  --navy-700:#1D4C86;
  --lake-600:#166BA6;
  --lake-500:#2E92D4;
  --lake-400:#4BA3DC;
  --spray-300:#8FCDEE;
  --spray-200:#B9DFF3;
  --spray-100:#DCEEF9;
  --ember-500:#F0803C;
  --ember-400:#F79A5E;
  --ember-600:#B4551C;

  /* Ground */
  --sand-50:#FAF7F2;
  --sand-100:#F3EDE3;
  --sand-200:#E7DECF;
  --white:#FFFFFF;

  /* Ink */
  --ink:#12243D;
  --ink-soft:#3D5470;
  --muted:#556880;
  --line:#DCE4EE;

  /* Semantic */
  --bg:var(--sand-50);
  --surface:var(--white);
  --fg:var(--ink);
  --accent:var(--ember-500);
  --on-accent:var(--navy-950);
  --ring:var(--lake-600);

  /* Type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Space - 4/8 rhythm */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.25rem;--s-6:1.5rem; --s-8:2rem;   --s-10:2.5rem;
  --s-12:3rem;  --s-16:4rem;  --s-20:5rem;  --s-24:6rem;

  --radius:14px;
  --radius-lg:22px;
  --radius-xl:32px;

  --shadow-sm:0 1px 2px rgba(8,25,47,.06),0 2px 8px rgba(8,25,47,.05);
  --shadow:0 4px 12px rgba(8,25,47,.07),0 14px 36px rgba(8,25,47,.08);
  --shadow-lg:0 10px 30px rgba(8,25,47,.10),0 30px 70px rgba(8,25,47,.13);

  --maxw:1200px;
  --ease:cubic-bezier(.22,.68,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit}

:focus-visible{
  outline:3px solid var(--lake-600);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy-900);color:#fff;padding:.85rem 1.25rem;
  border-radius:0 0 10px 0;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 96;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0 0 var(--s-4);
  color:var(--navy-900);
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.1vw,3.15rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.01em}
h4{font-size:1.09rem;font-family:var(--sans);font-weight:700;letter-spacing:-.005em}
p{margin:0 0 var(--s-4);max-width:68ch}
.lede{font-size:clamp(1.09rem,1.6vw,1.3rem);line-height:1.6;color:var(--ink-soft)}

/* Gauge-style eyebrow - the instrumentation motif */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--lake-600);margin:0 0 var(--s-4);
}
.eyebrow::before{
  content:"";width:26px;height:2px;flex:none;
  background:linear-gradient(90deg,var(--ember-500),var(--lake-500));
}
.eyebrow--light{color:var(--spray-300)}
.eyebrow--light::before{background:linear-gradient(90deg,var(--ember-500),var(--spray-300))}

/* Visually hidden, still announced by screen readers */
.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;
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s-6)}
.section{padding-block:clamp(3.5rem,8vw,var(--s-24))}
.section--tight{padding-block:clamp(2.5rem,5vw,var(--s-16))}
.section--navy{background:var(--navy-900);color:var(--spray-100)}
.section--navy h2,.section--navy h3{color:#fff}
.section--sand{background:var(--sand-100)}
.center{text-align:center}
.center p{margin-inline:auto}

.grid{display:grid;gap:var(--s-6)}
@media(min-width:700px){ .g-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}

/* Horizon rule - lake motif */
.horizon{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--spray-300) 18%,var(--lake-500) 50%,var(--spray-300) 82%,transparent);
  opacity:.55;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.6rem;
  border-radius:100px;border:2px solid transparent;
  font-weight:700;font-size:1rem;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none}

.btn--primary{background:var(--ember-500);color:var(--on-accent)}
.btn--primary:hover{background:var(--ember-400)}

.btn--navy{background:var(--navy-900);color:#fff}
.btn--navy:hover{background:var(--navy-700)}

.btn--ghost{background:transparent;color:var(--navy-900);border-color:var(--navy-900)}
.btn--ghost:hover{background:var(--navy-900);color:#fff}

.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--onDark:hover{background:#fff;color:var(--navy-900);border-color:#fff}

.btn--lg{min-height:60px;padding:1.05rem 2.1rem;font-size:1.06rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ---------- Utility bar ---------- */
.utility{background:var(--navy-950);color:var(--spray-200);font-size:.83rem}
.utility .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);min-height:42px;flex-wrap:wrap;
}
.utility a{color:#fff;font-weight:600;text-decoration:none}
.utility a:hover{text-decoration:underline}
.utility-left{display:flex;align-items:center;gap:.55rem}
.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:var(--ember-500);
  display:inline-block;flex:none;
  box-shadow:0 0 0 0 rgba(240,128,60,.65);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(240,128,60,0)}
  100%{box-shadow:0 0 0 0 rgba(240,128,60,0)}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,247,242,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);min-height:78px;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand img{height:60px;width:auto}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-name b{
  font-family:var(--display);font-variation-settings:"WONK" 1;
  font-size:1.12rem;font-weight:700;color:var(--navy-900);letter-spacing:-.02em;
}
.brand-name span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lake-600);
}
@media(max-width:420px){.brand-name{display:none}}

.nav{display:none;align-items:center;gap:var(--s-1)}
@media(min-width:1000px){.nav{display:flex}}
.nav a{
  padding:.6rem .9rem;border-radius:8px;text-decoration:none;
  font-weight:600;font-size:.97rem;color:var(--ink-soft);
  transition:color .16s var(--ease),background-color .16s var(--ease);
}
.nav a:hover{color:var(--navy-900);background:var(--sand-100)}
.nav a[aria-current="page"]{color:var(--navy-900)}
.nav a[aria-current="page"]::after{
  content:"";display:block;height:2px;margin-top:3px;border-radius:2px;
  background:var(--ember-500);
}
.header-cta{display:none}
@media(min-width:1000px){.header-cta{display:inline-flex}}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;min-width:48px;padding:0 .9rem;
  background:var(--navy-900);color:#fff;border:0;border-radius:100px;
  font-weight:600;font-size:.9rem;cursor:pointer;
}
@media(min-width:1000px){.nav-toggle{display:none}}

.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--sand-50)}
.mobile-nav.open{display:block}
@media(min-width:1000px){.mobile-nav,.mobile-nav.open{display:none}}
.mobile-nav ul{list-style:none;margin:0;padding:var(--s-3) var(--s-6) var(--s-6)}
.mobile-nav a{
  display:block;padding:.95rem .25rem;text-decoration:none;
  font-weight:600;font-size:1.06rem;color:var(--navy-900);
  border-bottom:1px solid var(--line);
}
.mobile-nav .btn{margin-top:var(--s-4);width:100%}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-950)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* Both layers must be stacked, not flowed. The <img> is the fallback floor;
   the <video> sits on top of it and covers it whenever it can play. */
.hero__media video,.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,25,47,.78) 0%,rgba(8,25,47,.55) 38%,rgba(8,25,47,.88) 100%),
    linear-gradient(90deg,rgba(8,25,47,.82) 0%,rgba(8,25,47,.25) 62%,transparent 100%);
}
.hero__inner{
  position:relative;
  padding-block:clamp(4.5rem,13vw,9.5rem);
  max-width:44rem;color:#fff;
}
.hero h1{color:#fff;margin-bottom:var(--s-6)}
.hero h1 em{
  font-style:italic;font-variation-settings:"WONK" 1,"SOFT" 40;
  color:var(--spray-300);
}
.hero__lede{
  font-size:clamp(1.09rem,1.75vw,1.32rem);color:rgba(255,255,255,.9);
  max-width:40rem;margin-bottom:var(--s-8);
}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);
  margin-top:var(--s-10);padding-top:var(--s-6);
  border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--spray-200);
}
.hero__trust span{display:flex;align-items:center;gap:.45rem}
.hero__trust svg{color:var(--ember-500)}

/* ---------- Stat bar ---------- */
.statbar{background:var(--navy-800);color:#fff}
.statbar .wrap{
  display:grid;gap:var(--s-6);padding-block:var(--s-10);
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:860px){.statbar .wrap{grid-template-columns:repeat(4,1fr)}}
.stat b{
  display:block;font-family:var(--mono);font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  color:#fff;line-height:1;
}
.stat span{
  display:block;margin-top:.55rem;font-size:.83rem;
  letter-spacing:.03em;color:var(--spray-200);
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--s-8);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.card p:last-child{margin-bottom:0}
a.card{text-decoration:none;display:block}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--spray-200)}

.card__icon{
  width:52px;height:52px;border-radius:14px;
  background:var(--spray-100);color:var(--lake-600);
  display:grid;place-items:center;margin-bottom:var(--s-5);
}
.card h3{margin-bottom:.6rem}
.card__link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--s-4);
  font-weight:700;font-size:.95rem;color:var(--lake-600);
}
a.card:hover .card__link{color:var(--ember-600)}

.card--navy{background:var(--navy-800);border-color:rgba(255,255,255,.12);color:var(--spray-100)}
.card--navy h3{color:#fff}
.card--navy .card__icon{background:rgba(143,205,238,.16);color:var(--spray-300)}

/* ---------- Before / After slider ---------- */
.ba{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--navy-900);
  aspect-ratio:16/9;
}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__line{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);
  width:3px;margin-left:-1.5px;background:#fff;
  box-shadow:0 0 14px rgba(8,25,47,.5);pointer-events:none;
}
.ba__grip{
  position:absolute;top:50%;left:var(--pos,50%);
  transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:#fff;color:var(--navy-900);
  display:grid;place-items:center;pointer-events:none;
  box-shadow:0 6px 20px rgba(8,25,47,.35);
}
.ba__range{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;
}
.ba__range:focus-visible ~ .ba__line{outline:3px solid var(--ember-500);outline-offset:2px}
.ba__tag{
  position:absolute;bottom:var(--s-4);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
  background:rgba(8,25,47,.72);
  padding:.45rem .85rem;border-radius:100px;pointer-events:none;
}
.ba__tag--b{left:var(--s-4)}
.ba__tag--a{right:var(--s-4);background:rgba(240,128,60,.95);color:var(--navy-950);font-weight:600}
.ba__hint{
  margin-top:var(--s-4);font-family:var(--mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.5rem;
}

/* ---------- Plan ---------- */
.plan{
  background:linear-gradient(155deg,var(--navy-800),var(--navy-950));
  color:var(--spray-100);border-radius:var(--radius-xl);
  padding:clamp(2rem,4.5vw,3.5rem);position:relative;overflow:hidden;
}
.plan::after{
  content:"";position:absolute;right:-70px;top:-70px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(75,163,220,.32),transparent 68%);
}
.plan h2,.plan h3{color:#fff;position:relative}
.plan__price{
  font-family:var(--mono);font-size:clamp(2.4rem,5vw,3.4rem);
  font-weight:600;color:#fff;line-height:1;letter-spacing:-.03em;
  position:relative;
}
.plan__price small{font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--spray-200)}
.checklist{list-style:none;margin:0 0 var(--s-8);padding:0;display:grid;gap:.85rem;position:relative}
.checklist li{display:flex;gap:.75rem;align-items:flex-start;line-height:1.5}
.checklist svg{flex:none;margin-top:3px;color:var(--ember-500)}

/* ---------- Reviews ---------- */
.review{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--s-8);
  display:flex;flex-direction:column;
}
.stars{display:flex;gap:2px;color:var(--ember-500);margin-bottom:var(--s-4)}
.review blockquote{
  margin:0 0 var(--s-6);font-family:var(--display);
  font-variation-settings:"WONK" 1,"SOFT" 20;
  font-size:1.13rem;line-height:1.5;color:var(--navy-900);flex:1;
}
.review figcaption{
  display:flex;align-items:center;gap:.7rem;
  font-size:.9rem;color:var(--muted);
  padding-top:var(--s-4);border-top:1px solid var(--line);
}
.review figcaption b{color:var(--navy-900);font-weight:700}
.avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--navy-800);color:#fff;display:grid;place-items:center;
  font-family:var(--mono);font-size:.85rem;font-weight:600;
}

/* ---------- Service area ---------- */
.towns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem}
.towns li{
  display:flex;align-items:center;gap:.5rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:100px;padding:.6rem 1.1rem;
  font-weight:600;font-size:.95rem;color:var(--navy-900);
}
.towns svg{color:var(--lake-600);flex:none}

/* ---------- Forms ---------- */
.form-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:clamp(1.75rem,4vw,3rem);
  box-shadow:var(--shadow);
}
.field{margin-bottom:var(--s-5)}
.field label{
  display:block;font-weight:700;font-size:.92rem;
  color:var(--navy-900);margin-bottom:.45rem;
}
.field .req{color:var(--ember-600)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;
  border:1.5px solid var(--line);border-radius:12px;
  background:var(--sand-50);color:var(--ink);
  font:inherit;font-size:1rem;
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--spray-300)}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff;border-color:var(--lake-600);outline:none;
  box-shadow:0 0 0 4px rgba(27,127,196,.15);
}
.hint{font-size:.85rem;color:var(--muted);margin:.4rem 0 0}
.form-note{font-size:.87rem;color:var(--muted);margin-top:var(--s-4)}

/* ---------- CTA band ---------- */
.ctaband{
  background:linear-gradient(140deg,var(--navy-900),var(--navy-950) 70%);
  color:#fff;position:relative;overflow:hidden;
}
.ctaband::before{
  content:"";position:absolute;left:-120px;bottom:-160px;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(27,127,196,.28),transparent 70%);
}
.ctaband h2{color:#fff}
.ctaband .wrap{position:relative}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-950);color:var(--spray-200);font-size:.95rem}
.site-footer h3{
  color:#fff;font-size:.8rem;font-family:var(--mono);
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:var(--s-4);font-weight:500;
}
.footer-grid{display:grid;gap:var(--s-10);padding-block:var(--s-16)}
@media(min-width:760px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:1040px){.footer-grid{grid-template-columns:1.7fr 1fr 1fr 1.2fr}}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.site-footer a{color:var(--spray-200);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .brand img{height:72px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:var(--s-6);display:flex;flex-wrap:wrap;
  gap:var(--s-4);justify-content:space-between;
  font-size:.85rem;color:var(--spray-300);
}
.footer-bottom p{margin:0;max-width:none}

/* ---------- Sticky mobile call ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:var(--navy-950);
  padding:.7rem var(--s-4) calc(.7rem + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  box-shadow:0 -6px 24px rgba(8,25,47,.28);
}
@media(min-width:1000px){.callbar{display:none}}
.callbar .btn{min-height:50px;padding:.7rem 1rem;font-size:.97rem}
@media(max-width:999px){body{padding-bottom:88px}}

/* ---------- Page header (inner pages) ---------- */
.pagehead{
  background:linear-gradient(150deg,var(--navy-900),var(--navy-950));
  color:#fff;padding-block:clamp(3rem,7vw,5.5rem);
  position:relative;overflow:hidden;
}
.pagehead::after{
  content:"";position:absolute;right:-90px;top:-90px;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(75,163,220,.26),transparent 70%);
}
.pagehead h1{color:#fff;font-size:clamp(2.3rem,5vw,3.7rem);margin-bottom:var(--s-4)}
.pagehead p{color:rgba(255,255,255,.85);font-size:1.1rem;max-width:52ch}
.pagehead .wrap{position:relative}
.crumbs{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--spray-300);margin-bottom:var(--s-5);
}
.crumbs a{color:var(--spray-300);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}

/* ---------- Media figures ---------- */
figure{margin:0}
.figure{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.figure--tall img{aspect-ratio:3/4}
.figure--wide img{aspect-ratio:16/9}
.figcap{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:.85rem;
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s-6) 3rem var(--s-6) 0;
  font-weight:700;font-size:1.09rem;color:var(--navy-900);position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2.5px solid var(--lake-600);border-bottom:2.5px solid var(--lake-600);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{padding-bottom:var(--s-6);color:var(--ink-soft);margin:0}

/* ---------- Reveal ----------
   Content is visible by default. The hidden starting state is applied only
   when JS is running (html.js), so a script failure, a blocked file, or a
   browser that never fires IntersectionObserver can never leave the page
   blank. Progressive enhancement, not a dependency. */
.reveal{transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,html.js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ---------- Cinematic band ----------
   Full-bleed drone shot. The clip fades in from black and back out to
   black at the end of every loop, so the loop seam is never visible. */
.cine{
  position:relative;isolation:isolate;overflow:hidden;
  background:#000;color:#fff;
  min-height:min(76vh,720px);
  display:grid;align-items:end;
}
.cine__media{position:absolute;inset:0;z-index:0}
.cine__media video,.cine__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Sits over the footage: keeps the type legible top and bottom. */
.cine__vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,25,47,.50) 0%,
    rgba(8,25,47,.10) 30%,
    rgba(8,25,47,.20) 55%,
    rgba(8,25,47,.88) 100%);
}
/* Driven by JS from the video's own currentTime. */
.cine__fade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#000;opacity:0;
}
.cine__inner{
  position:relative;z-index:3;
  padding-block:clamp(2.5rem,6vw,4.5rem);
  max-width:40rem;
}
.cine__inner h2{color:#fff;margin-bottom:var(--s-3)}
.cine__inner h2 em{
  font-style:italic;font-variation-settings:"WONK" 1,"SOFT" 40;
  color:var(--spray-300);
}
.cine__inner p{color:rgba(255,255,255,.88);margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  /* No motion, no pulsing black overlay - just hold the still frame. */
  .cine__fade{display:none}
}

/* ---------- Click-to-enlarge ----------
   The trigger is a real <button>, so keyboard and screen-reader support
   come for free. The overlay is a native <dialog>: showModal() gives us
   the focus trap, Escape-to-close and focus restore without extra code. */
.zoom{
  display:block;width:100%;padding:0;border:0;background:none;
  border-radius:var(--radius-xl);overflow:hidden;position:relative;
  cursor:zoom-in;box-shadow:var(--shadow);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.zoom img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.zoom:hover{box-shadow:var(--shadow-lg)}
.zoom:hover img{transform:scale(1.045)}
.zoom__badge{
  position:absolute;right:.85rem;bottom:.85rem;
  width:40px;height:40px;border-radius:50%;
  background:rgba(8,25,47,.74);color:#fff;
  display:grid;place-items:center;pointer-events:none;
  opacity:0;transform:translateY(6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.zoom:hover .zoom__badge,
.zoom:focus-visible .zoom__badge{opacity:1;transform:none}

.lightbox{
  border:0;padding:0;background:transparent;
  max-width:min(96vw,1500px);max-height:94vh;
  overflow:visible;
}
.lightbox::backdrop{background:rgba(8,25,47,.92)}
.lightbox img{
  display:block;max-width:100%;max-height:88vh;
  width:auto;height:auto;margin-inline:auto;
  border-radius:var(--radius-lg);box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.lightbox figcaption{
  margin-top:var(--s-4);text-align:center;color:var(--spray-200);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;
}
.lightbox__close{
  position:absolute;top:-14px;right:-14px;
  width:48px;height:48px;border-radius:50%;border:0;
  background:#fff;color:var(--navy-900);cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.lightbox__close:hover{background:var(--ember-500)}
@media(max-width:640px){
  .lightbox__close{top:6px;right:6px}
}
@media (prefers-reduced-motion:reduce){
  .zoom img,.zoom{transition:none}
  .zoom:hover img{transform:none}
}

/* ---------- Legal / prose pages ---------- */
.legal{max-width:52rem}
.legal h2{
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  margin-top:var(--s-12);margin-bottom:var(--s-4);
}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.12rem;margin-top:var(--s-8);margin-bottom:var(--s-3)}
.legal p,.legal li{color:var(--ink-soft)}
.legal ul,.legal ol{padding-left:1.35rem;margin:0 0 var(--s-4)}
.legal li{margin-bottom:.5rem;max-width:66ch}
.legal a{color:var(--lake-600);font-weight:600}
.legal dl{margin:0 0 var(--s-4)}
.legal dt{font-weight:700;color:var(--navy-900);margin-top:var(--s-4)}
.legal dd{margin:.25rem 0 0;color:var(--ink-soft)}
.updated{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-8);
}
.notice{
  border-left:4px solid var(--ember-500);
  background:var(--sand-100);
  padding:var(--s-6);border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:var(--s-10);
}
.notice p{margin-bottom:0;color:var(--ink)}
.notice strong{color:var(--navy-900)}

/* ---------- Cookie consent ---------- */
.cookiebar{
  position:fixed;z-index:120;
  left:var(--s-4);right:var(--s-4);bottom:var(--s-4);
  max-width:44rem;margin-inline:auto;
  background:var(--navy-900);color:var(--spray-100);
  border-radius:var(--radius-lg);
  box-shadow:0 18px 60px rgba(8,25,47,.45);
  padding:var(--s-6);
}
.cookiebar[hidden]{display:none}
@media(max-width:999px){
  /* clear the sticky click-to-call bar */
  .cookiebar{bottom:calc(88px + var(--s-3))}
}
.cookiebar h2{
  color:#fff;font-size:1.15rem;margin-bottom:.5rem;
  font-family:var(--sans);font-weight:700;letter-spacing:-.005em;
}
.cookiebar p{font-size:.94rem;margin-bottom:var(--s-5);color:var(--spray-200)}
.cookiebar a{color:#fff;font-weight:600}
.cookiebar__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cookiebar .btn{min-height:46px;padding:.65rem 1.2rem;font-size:.95rem;flex:1 1 auto}

/* ---------- Cookie preferences dialog ---------- */
.prefs{
  border:0;padding:0;background:transparent;
  max-width:min(94vw,34rem);
}
.prefs::backdrop{background:rgba(8,25,47,.85)}
.prefs__card{
  background:var(--surface);border-radius:var(--radius-xl);
  padding:clamp(1.5rem,4vw,2.25rem);box-shadow:var(--shadow-lg);
  max-height:88vh;overflow-y:auto;
}
.prefs h2{font-size:1.5rem;margin-bottom:var(--s-2)}
.prefs__intro{font-size:.95rem;color:var(--ink-soft);margin-bottom:var(--s-6)}

.optrow{
  display:flex;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-5) 0;border-top:1px solid var(--line);
}
.optrow__text{flex:1}
.optrow h3{font-size:1.02rem;margin-bottom:.25rem;font-family:var(--sans);font-weight:700}
.optrow p{font-size:.9rem;color:var(--muted);margin:0}
.optrow__locked{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);flex:none;padding-top:.35rem;
}

/* Real checkbox under a painted switch - keyboard and SR support intact */
.switch{position:relative;flex:none;width:52px;height:30px}
.switch input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.switch__track{
  position:absolute;inset:0;border-radius:100px;
  background:var(--line);transition:background-color .2s var(--ease);
  pointer-events:none;
}
.switch__track::after{
  content:"";position:absolute;top:3px;left:3px;
  width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(8,25,47,.35);
  transition:transform .2s var(--ease);
}
.switch input:checked + .switch__track{background:var(--lake-600)}
.switch input:checked + .switch__track::after{transform:translateX(22px)}
.switch input:focus-visible + .switch__track{outline:3px solid var(--lake-600);outline-offset:3px}

.prefs__actions{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line);
}
.prefs__actions .btn{flex:1 1 auto}

/* ---------- 404 ---------- */
.notfound{
  min-height:64vh;display:grid;place-items:center;text-align:center;
}
.notfound__code{
  font-family:var(--mono);font-size:clamp(4rem,14vw,9rem);
  font-weight:600;line-height:1;letter-spacing:-.04em;
  color:var(--navy-900);opacity:.13;margin-bottom:calc(var(--s-8) * -1);
}

/* ---------- Footer legal row ---------- */
.footer-legal{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center;
}
.footer-legal a,.footer-legal .linkish{color:var(--spray-300)}
.footer-legal a:hover,.footer-legal .linkish:hover{color:#fff;text-decoration:underline}
/* A button that reads as a link - it opens a dialog, so it must not be an <a> */
.linkish{
  background:none;border:0;padding:0;margin:0;
  font:inherit;font-size:inherit;color:inherit;
  cursor:pointer;text-decoration:none;
}