/* ============================================================
   ANGLIN SNOW — Airside Snow Removal
   Design system v2 — cold industrial precision.
   Charcoal glass canvas · signal-orange accent · ice cyan.
   ============================================================ */

:root{
  --bg-0:#0e0f11;          /* near-black neutral grey */
  --bg-1:#141618;
  --bg-2:#1a1d20;
  --bg-3:#212528;
  --bg-glass:rgba(26,29,32,.62);

  --line:#2b2f33;
  --line-2:#3a4045;

  --fg:#f2f4f6;            /* near-white */
  --fg-dim:#b4bbc1;        /* light grey */
  --fg-mute:#7d858c;       /* mid grey */

  --signal:#d81f27;        /* brand red (from logo) */
  --signal-2:#ec3b42;      /* lighter red for hover */
  --ice:#c7ced4;           /* steel/light-grey accent (replaces cyan) */
  --ice-dim:#5a636b;       /* muted grey */

  --f-display:"Space Grotesk","Archivo",sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --maxw:1240px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --radius:14px;
  --radius-sm:10px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg-0);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(199,206,212,.05), transparent 60%),
    radial-gradient(100% 60% at 50% 110%, rgba(216,31,39,.05), transparent 55%);
}

h1,h2,h3,h4,.display{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.02em;
}
h1{ font-size:clamp(2.9rem,7vw,6rem); }
h2{ font-size:clamp(2rem,4.4vw,3.4rem); letter-spacing:-0.025em; }
h3{ font-size:1.35rem; letter-spacing:-0.015em; }
.mono{ font-variant-numeric:tabular-nums; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body);
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mute);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--signal); display:inline-block; }
.eyebrow.ice::before{ background:var(--ice); }
.eyebrow.plain::before{ display:none; }

p{ color:var(--fg-dim); max-width:66ch; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:#c3c9cf; line-height:1.55; letter-spacing:-0.015em; }

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--signal); color:#0e0f11; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); position:relative; z-index:2; }
.section{ padding-block:var(--s10); position:relative; }
.section.sm{ padding-block:var(--s9); }
.divider{ height:1px; background:var(--line); border:0; }
.bg-1{ background:var(--bg-1); }
.bg-2{ background:var(--bg-2); }

/* Nav */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:rgba(11,14,20,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{ max-width:var(--maxw); margin:0 auto; height:100%; padding:0 var(--s5);
  display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{ height:34px; width:auto; display:block;
  background:#ffffff; padding:7px 11px; border-radius:9px;
  box-shadow:0 2px 10px -3px rgba(0,0,0,.5); }
.brand-tag{ font-family:var(--f-body); font-size:.56rem; font-weight:600; letter-spacing:.26em;
  color:var(--fg-mute); text-transform:uppercase; padding-left:14px; border-left:1px solid var(--line-2);
  line-height:1.3; max-width:8ch; }
.footer .brand-logo{ height:38px; }
@media (max-width:520px){ .brand-tag{ display:none; } .brand-logo{ height:30px; padding:6px 9px; } }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{ position:relative; font-size:.82rem; font-weight:500; letter-spacing:.01em;
  padding:9px 15px; color:var(--fg-dim); border-radius:8px;
  transition:color .25s var(--ease), background .25s var(--ease); }
.nav-links a:hover{ color:var(--fg); background:rgba(255,255,255,.04); }
.nav-links a.active{ color:var(--fg); }
.nav-links a.active::after{ content:""; position:absolute; left:15px; right:15px; bottom:2px; height:2px;
  background:var(--signal); border-radius:2px; }
.nav-cta{ margin-left:10px; }
.nav-links a.nav-cta, .nav-links a.nav-cta:hover{ color:#fff; }
.nav-toggle{ display:none; width:44px; height:40px; background:none; border:1px solid var(--line-2);
  border-radius:8px; cursor:pointer; }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--fg); margin:3px auto; border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--f-body); font-weight:600; font-size:.92rem; letter-spacing:-0.01em;
  padding:14px 26px; border:1px solid transparent; border-radius:var(--radius-sm);
  transition:transform .2s var(--ease), background .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), box-shadow .25s var(--ease); white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-accent{ background:var(--signal); color:#fff; border-color:var(--signal);
  box-shadow:0 6px 24px -8px rgba(216,31,39,.5); }
.btn-accent:hover{ background:var(--bg-0); border-color:var(--bg-0); color:#fff; box-shadow:0 10px 32px -8px rgba(0,0,0,.6); }
.btn-ghost{ background:rgba(255,255,255,.02); color:var(--fg); border-color:var(--line-2); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:#4a5157; }
.btn-ice{ background:transparent; color:var(--ice); border-color:var(--ice-dim); }
.btn-ice:hover{ background:rgba(199,206,212,.08); border-color:var(--ice); }
.btn-sm{ padding:10px 18px; font-size:.84rem; }
.btn-block{ width:100%; justify-content:center; }

/* Hero */
.hero{ position:relative; min-height:92vh; min-height:92dvh; display:flex; align-items:center;
  overflow:hidden; border-bottom:1px solid var(--line); }
.hero-video-wrap{ position:absolute; inset:0; z-index:0; }
.hero-video-wrap video,.hero-video-wrap img.poster{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-fallback{ position:absolute; inset:0; z-index:0; }
.hero-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,14,20,.72) 0%, rgba(11,14,20,.42) 26%, rgba(11,14,20,.55) 60%, rgba(11,14,20,.98) 100%),
    linear-gradient(90deg, rgba(11,14,20,.9) 0%, rgba(11,14,20,.55) 38%, transparent 70%),
    radial-gradient(120% 90% at 20% 80%, rgba(11,14,20,.5), transparent 60%); }
#heroSnow{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-content{ position:relative; z-index:4; padding-bottom:var(--s9); padding-top:var(--s9); max-width:920px; }
.hero-content h1{ margin:var(--s4) 0 var(--s5); font-size:clamp(2.6rem,6vw,5.6rem); }
.hero-content h1 .line{ display:block; overflow:hidden; }
.hero-content h1 .line > span{ display:block; }
.hero-content h1 .accent{ background:linear-gradient(100deg,var(--signal),var(--signal-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s6); }
.hero-meta{ position:absolute; bottom:var(--s6); right:0; z-index:4; display:flex; gap:var(--s6); padding-right:var(--s5); }
.hero-meta .m{ text-align:right; }
.hero-meta .m .v{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; line-height:1; }
.hero-meta .m .k{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute); margin-top:6px; }

.hero-content h1 .line > span,
.hero-content .eyebrow,
.hero-content .lead,
.hero-content .hero-actions{ opacity:0; transform:translateY(120%); animation:heroUp .9s var(--ease-out) forwards; }
.hero-content .eyebrow{ transform:translateY(20px); animation-delay:.05s; }
.hero-content h1 .line:nth-child(1) > span{ animation-delay:.12s; }
.hero-content h1 .line:nth-child(2) > span{ animation-delay:.2s; }
.hero-content h1 .line:nth-child(3) > span{ animation-delay:.28s; }
.hero-content .lead{ transform:translateY(20px); animation-delay:.42s; }
.hero-content .hero-actions{ transform:translateY(20px); animation-delay:.52s; }
@keyframes heroUp{ to{ opacity:1; transform:translateY(0); } }

/* Page hero — image-backed header for interior pages (About, Training, etc.) */
.page-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  padding:var(--s10) 0 var(--s9); display:flex; align-items:flex-end; min-height:52vh; }
.page-hero-bg{ position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 42%; transform:scale(1.04);
  animation:slowZoom 24s ease-in-out infinite alternate; }
@keyframes slowZoom{ from{ transform:scale(1.04); } to{ transform:scale(1.12); } }
.page-hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,14,20,.82) 0%, rgba(11,14,20,.5) 32%, rgba(11,14,20,.72) 72%, rgba(11,14,20,.98) 100%),
    linear-gradient(90deg, rgba(11,14,20,.92) 0%, rgba(11,14,20,.55) 42%, rgba(11,14,20,.2) 78%),
    radial-gradient(120% 90% at 18% 85%, rgba(11,14,20,.55), transparent 62%); }
.page-hero .wrap{ position:relative; z-index:2; width:100%; }
.page-hero .eyebrow{ margin-bottom:var(--s4); }
.page-hero h1{ font-size:clamp(2.7rem,6vw,5.2rem); max-width:20ch; }
.page-hero .lead{ margin-top:var(--s5); max-width:60ch; }

/* Image band — photo behind a block of text mid-page */
.img-band{ position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.img-band-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 40%; }
.img-band-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,14,20,.92) 0%, rgba(11,14,20,.86) 50%, rgba(11,14,20,.95) 100%),
    linear-gradient(90deg, rgba(11,14,20,.9) 0%, rgba(11,14,20,.7) 60%, rgba(11,14,20,.85) 100%); }
.img-band .wrap{ position:relative; z-index:2; }

/* Ticker */
.ticker{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-1); overflow:hidden; padding:var(--s4) 0; }
.ticker-track{ display:flex; gap:var(--s8); width:max-content; animation:scroll 34s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{ display:flex; align-items:center; gap:12px; color:var(--fg-mute);
  font-family:var(--f-display); font-weight:600; font-size:1.1rem; letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap; }
.ticker-item::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* Section head */
.sec-head{ max-width:76ch; margin-bottom:var(--s8); }
.sec-head h2{ margin-top:var(--s4); }
.sec-head .lead{ margin-top:var(--s5); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }

/* Grid + features */
.grid{ display:grid; gap:var(--s5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.g-mid{ align-items:center; gap:var(--s8); }

.feature{ position:relative; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s6);
  transition:transform .35s var(--ease-out), border-color .35s var(--ease), background .35s var(--ease); overflow:hidden; }
.feature::after{ content:""; position:absolute; inset:0; border-radius:var(--radius);
  background:radial-gradient(120% 100% at 0% 0%, rgba(216,31,39,.07), transparent 45%);
  opacity:0; transition:opacity .4s var(--ease); }
.feature:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--bg-3); }
.feature:hover::after{ opacity:1; }
.feature .ico{ width:44px; height:44px; margin-bottom:var(--s5); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:12px; color:var(--ice); background:rgba(199,206,212,.05); }
.feature h3{ margin-bottom:var(--s3); }
.feature p{ font-size:.96rem; }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.stat{ background:var(--bg-1); padding:var(--s6); }
.stat .v{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.4rem,4vw,3.4rem);
  line-height:1; letter-spacing:-0.03em; }
.stat .v em{ font-style:normal; color:var(--signal); }
.stat .v i{ font-style:normal; color:var(--ice); }
.stat .k{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); margin-top:var(--s3); }

.split-visual{ position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--bg-1); min-height:340px; }

/* MAP */
.map-stage{ position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:radial-gradient(90% 120% at 50% 0%, rgba(199,206,212,.06), transparent 55%), var(--bg-1); overflow:hidden;
  aspect-ratio:8/5; }
.map-stage svg{ width:100%; height:auto; display:block; }
.map-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(70% 70% at 50% 45%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 45%, #000, transparent 80%); }

.state-path{ fill:#17191c; stroke:#2b2f33; stroke-width:.8; transition:fill .3s var(--ease), stroke .3s var(--ease); }
.state-path.op{ fill:#242a2e; stroke:#454b52; cursor:pointer; }
.state-path.op:hover{ fill:#2f3439; stroke:var(--ice); }
.map-svg.zoomable .state-path{ cursor:default; }

.pin{ cursor:pointer; }
.pin .halo{ fill:var(--signal); opacity:.16; }
.pin .ring{ fill:none; stroke:var(--signal); stroke-width:1.5; }
.pin .dot{ fill:var(--signal); stroke:#0e0f11; stroke-width:1.6;
  transition:transform .18s var(--ease); transform-box:fill-box; transform-origin:center; }
.pin:hover .dot,.pin:focus .dot{ transform:scale(1.35); }
.pin:focus{ outline:none; }
.pin:focus .ring{ stroke-width:2.4; }
.pin .plabel{ font-family:var(--f-display); font-weight:700; font-size:12px; fill:#eef1f4;
  letter-spacing:.04em; paint-order:stroke; stroke:#0e0f11; stroke-width:3px; }
@keyframes ping{ 0%{ r:5; opacity:.7 } 80%,100%{ r:20; opacity:0 } }
.pin .ring.animate{ animation:ping 2.8s var(--ease) infinite; }

.map-hint{ position:absolute; top:var(--s4); left:var(--s4); z-index:3; display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute);
  background:var(--bg-glass); border:1px solid var(--line); border-radius:99px; padding:7px 14px; backdrop-filter:blur(8px); }
.map-hint b{ color:var(--fg); font-weight:600; }
.map-back{ position:absolute; top:var(--s4); right:var(--s4); z-index:3; display:none; }
.map-title{ position:absolute; bottom:var(--s5); left:var(--s5); z-index:3; display:none; }
.map-title .st{ font-family:var(--f-display); font-weight:700; font-size:1.8rem; letter-spacing:-0.02em; }
.map-title .sub{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--signal); margin-top:4px; }

.legend{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s5); }
.legend .chip{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--fg-dim); }
.legend .chip b{ font-family:var(--f-display); font-weight:700; color:var(--fg); letter-spacing:.02em; }
.legend .chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--signal); }

/* Apply sheet */
.overlay{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  padding:var(--s5); background:rgba(6,8,12,.7); backdrop-filter:blur(6px); }
.overlay.show{ display:flex; animation:fade .25s var(--ease); }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.sheet{ width:100%; max-width:720px; background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:var(--radius); overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
  animation:sheetIn .4s var(--ease-out); box-shadow:0 40px 120px -30px rgba(0,0,0,.7); }
@keyframes sheetIn{ from{ transform:translateY(24px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
.sheet-map{ position:relative; background:radial-gradient(90% 90% at 50% 30%, rgba(199,206,212,.08), transparent 60%), var(--bg-1);
  border-right:1px solid var(--line); min-height:280px; display:flex; align-items:center; justify-content:center; }
.sheet-map svg{ width:100%; height:auto; }
.sheet-map .lbl{ position:absolute; top:var(--s4); left:var(--s4);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-mute); }
.sheet-body{ padding:var(--s6); position:relative; }
.sheet-body .close{ position:absolute; top:var(--s4); right:var(--s4); width:34px; height:34px;
  border:1px solid var(--line-2); border-radius:8px; background:none; color:var(--fg-dim); cursor:pointer;
  font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:.2s; }
.sheet-body .close:hover{ color:var(--fg); border-color:#4a5157; }
.sheet-body .code{ font-family:var(--f-display); font-weight:700; font-size:.8rem; letter-spacing:.14em; color:var(--signal); }
.sheet-body h3{ margin:var(--s2) 0; font-size:1.5rem; }
.sheet-body .city{ font-size:.9rem; color:var(--fg-mute); margin-bottom:var(--s4); }
.sheet-body .blurb{ font-size:.92rem; color:var(--fg-dim); padding:var(--s4); border-left:2px solid var(--ice-dim);
  background:rgba(199,206,212,.04); border-radius:0 8px 8px 0; margin-bottom:var(--s5); }
.sheet-body .choose-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:var(--s3); }
.sheet-choices{ display:grid; gap:var(--s3); }

/* Clients — real logos on soft light chips (brand colors read true on dark site) */
.clients{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); }
.client{ display:flex; align-items:center; justify-content:center;
  background:#f4f6f9; border:1px solid var(--line);
  border-radius:12px; aspect-ratio:5/3; padding:22px 26px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.client:hover{ transform:translateY(-3px); background:#ffffff;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55); }
.client img{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block; }

/* Training flip cards */
.tc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.tc{ perspective:1400px; }
.tc-inner{ position:relative; width:100%; aspect-ratio:3/4; transform-style:preserve-3d; transition:transform .7s var(--ease-out); }
.tc.flipped .tc-inner{ transform:rotateY(180deg); }
.tc-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.tc-front{ background:var(--bg-2); display:flex; flex-direction:column; cursor:pointer; }
.tc-front .photo{ position:relative; flex:1; overflow:hidden; }
.tc-front .photo svg{ width:100%; height:100%; display:block; transition:transform .8s var(--ease-out); }
.tc:hover .tc-front .photo svg{ transform:scale(1.06); }
.tc-front .photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(11,14,20,.9)); }
.tc-front .cap{ position:absolute; left:0; right:0; bottom:0; padding:var(--s5); z-index:2; }
.tc-front .cap .region{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); }
.tc-front .cap h3{ margin-top:6px; font-size:1.4rem; }
.tc-front .cap .fliphint{ margin-top:var(--s3); font-size:.78rem; color:var(--fg-mute); display:inline-flex; align-items:center; gap:8px; }
.tc-back{ background:var(--bg-3); transform:rotateY(180deg); padding:var(--s6); display:flex; flex-direction:column; }
/* When flipped, the back face must receive clicks and the front must not (and vice-versa). */
.tc-front{ pointer-events:auto; }
.tc-back{ pointer-events:none; }
.tc.flipped .tc-front{ pointer-events:none; }
.tc.flipped .tc-back{ pointer-events:auto; }
.tc-back .code{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--signal); }
.tc-back h3{ margin:var(--s2) 0 var(--s3); }
.tc-back p{ font-size:.9rem; margin-bottom:var(--s5); }
.tc-back .links{ display:grid; gap:var(--s3); margin-top:auto; }
.tc-back .back-btn{ margin-top:var(--s4); background:none; border:none; color:var(--fg-mute); font-size:.78rem;
  cursor:pointer; text-align:left; padding:0; display:inline-flex; align-items:center; gap:8px; transition:color .2s; }
.tc-back .back-btn:hover{ color:var(--fg); }

/* Forms */
.form-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s7); }
.field{ margin-bottom:var(--s4); }
.field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:var(--s2); }
.field input,.field textarea,.field select{ width:100%; background:var(--bg-0); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); color:var(--fg); padding:13px 15px; font-family:inherit; font-size:.96rem; transition:border-color .2s, box-shadow .2s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(216,31,39,.12); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }

.contact-list{ margin-top:var(--s6); }
.crow{ display:flex; align-items:center; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--line); }
.crow .k{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); min-width:120px; }
.crow .v{ color:var(--fg); font-weight:500; }
.crow .v a:hover{ color:var(--signal); }

/* CTA band */
.cta-band{ position:relative; border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  background:radial-gradient(120% 160% at 100% 0%, rgba(216,31,39,.14), transparent 55%), var(--bg-2);
  padding:var(--s9) var(--s7); overflow:hidden; text-align:center; }
.cta-band h2{ max-width:20ch; margin:var(--s4) auto var(--s5); }
.cta-band .lead{ margin:0 auto var(--s6); }

/* Footer */
.footer{ background:var(--bg-0); border-top:1px solid var(--line); padding:var(--s9) 0 var(--s6); }
.footer-top{ display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:var(--s6); }
.footer h4{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:var(--s4); font-weight:600; }
.footer .col a{ display:block; color:var(--fg-dim); font-size:.94rem; padding:6px 0; transition:color .2s; }
.footer .col a:hover{ color:var(--signal); }
.footer .tagline{ color:var(--fg-mute); max-width:38ch; margin-top:var(--s4); font-size:.94rem; }
.footer-bottom{ margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s3); font-size:.78rem; color:var(--fg-mute); }

/* Reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }

/* Responsive */
@media (max-width:1000px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:var(--s6); }
  .hero-meta{ display:none; }
}
@media (max-width:860px){
  .nav-links{ position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--bg-1); border-bottom:1px solid var(--line); padding:var(--s3); gap:2px; display:none; }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px; border-radius:8px; }
  .nav-links a.active::after{ display:none; }
  .nav-cta{ margin:var(--s2) 0 0; }
  .nav-toggle{ display:block; }
  .grid-2,.grid-3,.g-mid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .tc-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .sheet{ grid-template-columns:1fr; max-width:440px; }
  .sheet-map{ min-height:200px; border-right:none; border-bottom:1px solid var(--line); }
  .footer-top{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .clients{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:520px){
  .clients{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:1fr; }
  .cta-band{ padding:var(--s7) var(--s5); }
  .map-hint{ right:var(--s4); max-width:calc(100% - var(--s4) * 2); border-radius:var(--radius-sm); white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-content h1 .line > span,.hero-content .eyebrow,.hero-content .lead,.hero-content .hero-actions{ opacity:1; transform:none; }
}

/* ============================================================
   VULCAN-inspired system — snow-storm depth, gradient shells, grain
   (adapted to red / grey / white)
   ============================================================ */

/* Fixed WebGL storm canvas behind everything */
#gl{ position:fixed; inset:0; z-index:0; width:100%; height:100%; display:block;
  pointer-events:none; }
/* Solid dark backdrop sits BEHIND the storm so the canvas alpha reads on charcoal */
body::after{ content:""; position:fixed; inset:0; z-index:-1; background:var(--bg-0); }
/* Let body's own bg be transparent so #gl (z0) shows; backdrop(::after,-1) fills black */
html{ background:var(--bg-0); }
/* Grain overlay for premium texture */
.grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Real content sits above the storm/grain */
main, .footer{ position:relative; z-index:2; }
/* Nav must outrank page content so the open mobile menu isn't painted over */
.nav{ z-index:110; }

/* Make section bands semi-transparent so the storm breathes through the page.
   Text stays readable because bands are still ~85-92% opaque charcoal. */
body{ background:transparent; }
.bg-1{ background:rgba(20,22,24,.82); }
.bg-2{ background:rgba(26,29,32,.82); }
.section:not(.bg-1):not(.bg-2){ background:transparent; }
.footer{ background:rgba(14,15,17,.86); }
.nav{ background:rgba(14,15,17,.7); }

/* Gradient border "shell" — premium hairline frame around key cards.
   Wrap: .shell > .shell-inner(content).  Also applied to .feature via ::before. */
.shell{ position:relative; border-radius:calc(var(--radius) + 3px); padding:1px;
  background:
    radial-gradient(60% 60% at 60% 47%, rgba(216,31,39,.28) 0%, rgba(150,20,26,.10) 30%, rgba(8,5,3,0) 58%),
    radial-gradient(120% 90% at 14% 116%, rgba(216,31,39,.16) 0%, rgba(8,5,3,0) 52%),
    linear-gradient(180deg, rgba(58,64,69,.7), rgba(20,22,25,.7)); }
.shell-inner{ border-radius:var(--radius); background:var(--bg-2);
  border:1px solid rgba(255,255,255,.02); height:100%; }

/* Elevate feature cards with the same shell language */
.feature{ background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); }
.feature::before{ content:""; position:absolute; inset:0; border-radius:var(--radius);
  padding:1px; pointer-events:none;
  background:linear-gradient(180deg, rgba(216,31,39,.0), rgba(216,31,39,.0));
  transition:background .4s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.feature:hover::before{ background:linear-gradient(180deg, rgba(216,31,39,.5), rgba(216,31,39,.05)); }

/* Slightly stronger shadow recipe on raised panels (consistent depth system) */
.stat, .map-stage, .form-card, .clients, .cta-band{
  box-shadow:0 4px 22px -12px rgba(0,0,0,.6); }
.btn-accent{ box-shadow:0 4px 22px -6px rgba(216,31,39,.55); }
.btn-accent:hover{ box-shadow:0 6px 26px -6px rgba(0,0,0,.7); }

/* Headline size bump toward VULCAN display scale */
.hero-content h1{ letter-spacing:-0.03em; }

@media (prefers-reduced-motion:reduce){
  #gl{ opacity:.5; }
}

/* Disabled coming-soon button + apply note */
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{ transform:none; background:rgba(255,255,255,.02); border-color:var(--line-2); }
.sheet-note{ font-size:.82rem; color:var(--fg-mute); margin-top:var(--s3); line-height:1.5; }

/* Training virtual schedule note */
.tc-schedule{ font-size:.76rem; color:var(--fg-mute); margin-top:var(--s3); text-align:center; }
.tc-schedule b{ color:var(--ice); font-weight:600; }

/* ============================================================
   ENHANCEMENTS — motion, texture, depth (red/grey/white)
   ============================================================ */

/* Scroll progress bar (red, top of viewport) */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:200; pointer-events:none;
  background:linear-gradient(90deg, var(--signal), var(--signal-2));
  transform:scaleX(0); transform-origin:left; transition:transform .1s linear;
  box-shadow:0 0 12px rgba(216,31,39,.6); }

/* Button shine sweep */
.btn.has-shine{ position:relative; overflow:hidden; }
.btn.has-shine::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:none; pointer-events:none; }
.btn.has-shine:hover::after{ left:120%; transition:left .7s var(--ease); }

/* Feature cards: smoother tilt base + red index accent */
.feature{ transition:transform .3s var(--ease-out), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.feature:hover{ box-shadow:0 24px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(216,31,39,.15); }
.feature .ico{ transition:transform .4s var(--ease-out), color .3s var(--ease), border-color .3s var(--ease); }
.feature:hover .ico{ transform:translateY(-2px) scale(1.06); border-color:var(--signal); color:var(--signal); }

/* Section divider with red tick — drop <div class="rule"></div> between sections */
.rule{ position:relative; height:1px; background:var(--line); margin:0; }
.rule::before{ content:""; position:absolute; left:50%; top:-1px; width:64px; height:3px;
  transform:translateX(-50%); background:var(--signal); border-radius:2px;
  box-shadow:0 0 14px rgba(216,31,39,.5); }

/* Eyebrow: animated tick that draws in on reveal */
.reveal.in .eyebrow::before{ animation:tickGrow .6s var(--ease-out) both; }
@keyframes tickGrow{ from{ width:0 } to{ width:22px } }

/* Richer stat cards */
.stat{ position:relative; overflow:hidden; transition:background .3s var(--ease); }
.stat::after{ content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 100% at 0% 0%, rgba(216,31,39,.10), transparent 55%);
  transition:opacity .4s var(--ease); }
.stat:hover{ background:var(--bg-2); }
.stat:hover::after{ opacity:1; }
.stat .v{ transition:transform .3s var(--ease-out); }
.stat:hover .v{ transform:translateX(4px); }

/* Diagonal hazard texture accent for CTA bands (subtle, brand red/grey) */
.cta-band{ position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:repeating-linear-gradient(45deg,
    rgba(216,31,39,.05) 0 12px, transparent 12px 34px); }
.cta-band > *{ position:relative; z-index:1; }

/* Section eyebrow numbers — big faint watermark index (add via ::before with data) */
.sec-head{ position:relative; }

/* Staggered reveal for grids: children lift in sequence */
.grid-3 > .reveal:nth-child(1){ transition-delay:.05s }
.grid-3 > .reveal:nth-child(2){ transition-delay:.15s }
.grid-3 > .reveal:nth-child(3){ transition-delay:.25s }

/* Nav link underline grow from left (replaces static) */
.nav-links a::after{ content:""; position:absolute; left:15px; bottom:4px; height:2px; width:0;
  background:var(--signal); border-radius:2px; transition:width .28s var(--ease); }
.nav-links a:hover::after{ width:calc(100% - 30px); }
.nav-links a.active::after{ width:calc(100% - 30px); }

/* Link hover on client logos: red ring pulse */
.client{ position:relative; }
.client::after{ content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(216,31,39,0); transition:box-shadow .35s var(--ease); }
.client:hover::after{ box-shadow:0 0 0 2px rgba(216,31,39,.35); }

/* Headline: red underline flourish under the accent word */
.hero-content h1 .accent{ position:relative; }

/* Marquee ticker: red dots already; add subtle fade edges */
.ticker{ position:relative; }
.ticker::before,.ticker::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.ticker::before{ left:0; background:linear-gradient(90deg, var(--bg-0), transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg, var(--bg-0), transparent); }

@media (prefers-reduced-motion:reduce){
  .scroll-progress{ display:none; }
  .btn.has-shine::after{ display:none; }
}

/* ============================================================
   CINEMATIC SLIDESHOW (Services) — Ken Burns + crossfade
   ============================================================ */
.slideshow{ position:relative; width:100%; aspect-ratio:21/9; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line); background:var(--bg-1);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8); }
.slide{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease; will-change:opacity, transform; }
.slide.is-active{ opacity:1; }
/* Ken Burns: slow zoom/pan while a slide is active */
@keyframes kenburns{ from{ transform:scale(1.04) translate(0,0); } to{ transform:scale(1.14) translate(-1.2%, -1.2%); } }
.slide.is-active{ animation:kenburns 12s ease-out both; }
.slide-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,15,17,.28) 0%, rgba(14,15,17,.08) 34%, rgba(14,15,17,.5) 74%, rgba(14,15,17,.9) 100%),
            radial-gradient(120% 80% at 50% 92%, rgba(14,15,17,.55), transparent 60%); }
.slide-cap{ position:absolute; left:50%; bottom:var(--s7); z-index:3; max-width:70ch; width:100%;
  transform:translateX(-50%) translateY(14px); text-align:center; padding:0 var(--s5);
  opacity:0; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.slide.is-active .slide-cap{ opacity:1; transform:translateX(-50%) translateY(0); transition-delay:.35s; }
.slide-eyebrow{ display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:#fff; margin-bottom:10px; }
.slide-cap h3{ font-size:clamp(1.5rem,2.8vw,2.4rem); color:var(--signal); letter-spacing:-0.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.5); }
.slide-dots{ position:absolute; right:var(--s6); bottom:var(--s6); z-index:4; display:flex; gap:6px; }
.slide-dots button{ width:32px; height:32px; border:0; cursor:pointer; padding:0; background:none;
  display:flex; align-items:center; justify-content:center; }
.slide-dots button::after{ content:""; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.35); transition:background .3s, transform .3s; }
.slide-dots button.active::after{ background:var(--signal); transform:scale(1.25); }
.slide-dots button:hover::after{ background:rgba(255,255,255,.7); }
@media (max-width:640px){
  .slideshow{ aspect-ratio:4/3; }
  .slide-cap{ bottom:var(--s7); padding:0 var(--s4); }
}
@media (prefers-reduced-motion:reduce){
  .slide.is-active{ animation:none; }
  .slide{ transition:opacity .3s ease; }
}

/* ============================================================
   BLUE-COLLAR / INDUSTRIAL TOUCHES
   ============================================================ */

/* Hazard-stripe accent — an industrial caution motif, used sparingly.
   Add <div class="hazard"></div> where a gritty divider fits. */
.hazard{ height:8px; width:100%;
  background:repeating-linear-gradient(45deg,
    var(--signal) 0 16px, #14151700 16px 20px, #2b2f33 20px 36px, #14151700 36px 40px);
  opacity:.55; border-radius:2px; }

/* Stamped / stenciled eyebrow option for a rugged feel */
.eyebrow.stencil{ font-family:var(--f-display); font-weight:700; letter-spacing:.18em; }

/* Ticker items: monospace-ish industrial treatment already; add a bolt dot */
.ticker-item{ font-weight:700; }

/* Feature icons get a faint machined ring on hover (industrial detail) */
.feature .ico{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); }

/* Section headings can carry a small red "index bolt" — decorative */
.sec-head .eyebrow{ position:relative; }

/* Photo fade-in as they load (removes the 'pop') */
img{ }
.slide, .page-hero-bg, .img-band-bg{ }

/* Rugged focus outline for keyboard users (accessibility + intentional look) */
a:focus-visible, button:focus-visible, .pin:focus-visible{
  outline:2px solid var(--signal); outline-offset:3px; border-radius:4px; }

/* Selection in brand red already set; ensure it's crisp */
::selection{ background:var(--signal); color:#fff; }

/* ============================================================
   VIDEO HERO — portrait video, blurred fill + sharp centered
   ============================================================ */
.video-hero{ position:relative; overflow:hidden; min-height:78vh; display:flex; align-items:flex-end;
  border-bottom:1px solid var(--line); }
/* landscape video fills the whole header */
.video-hero-blur{ display:none; }
.video-hero-main{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.video-hero-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,15,17,.55) 0%, rgba(14,15,17,.2) 30%, rgba(14,15,17,.55) 68%, rgba(14,15,17,.96) 100%),
            linear-gradient(90deg, rgba(14,15,17,.8) 0%, rgba(14,15,17,.15) 42%, rgba(14,15,17,.15) 58%, rgba(14,15,17,.8) 100%); }
.video-hero-content{ position:relative; z-index:3; width:100%; padding-top:var(--s9); padding-bottom:var(--s9); }
.video-hero-content .eyebrow{ margin-bottom:var(--s4); }
.video-hero-content h1{ font-size:clamp(2.7rem,6vw,5rem); max-width:20ch; letter-spacing:-0.03em; }
.video-hero-content .lead{ margin-top:var(--s5); max-width:60ch; }
@media (max-width:720px){
  .video-hero{ min-height:64vh; }
}
@media (prefers-reduced-motion:reduce){
  .video-hero-blur, .video-hero-main{ /* poster shows; videos still load first frame */ }
}

/* ============================================================
   VIDEO FEATURE — portrait video in a contained block beside text
   ============================================================ */
.video-feature{ display:grid; grid-template-columns:0.85fr 1fr; gap:var(--s8); align-items:center; }
.video-feature-media{ position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-1);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8); aspect-ratio:3/4; max-width:420px; }
.video-feature-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-feature-media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  background:linear-gradient(180deg, transparent 60%, rgba(14,15,17,.35) 100%); }
.video-feature-text .eyebrow{ margin-bottom:var(--s4); }
.video-feature-text h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:-0.02em; }
.video-feature-text .lead{ margin-top:var(--s5); }
@media (max-width:820px){
  .video-feature{ grid-template-columns:1fr; gap:var(--s6); }
  .video-feature-media{ max-width:340px; margin:0 auto; }
}