:root{
  --black:#0c0b0b;
  --black-2:#161413;
  --black-3:#201d1c;
  --red:#dc1023;
  --red-bright:#ff2d2d;
  --amber:#ffb020;
  --steel:#a8a39a;
  --steel-dim:#8e887d;
  --paper:#faf7f2;
  --paper-dim:#ece6da;
  --line: rgba(250,247,242,0.14);
  --line-dark: rgba(12,11,11,0.14);
  --shadow: 0 20px 50px rgba(0,0,0,0.45);

  /* ---- motion system ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-xs: 0.18s;
  --dur-sm: 0.3s;
  --dur-md: 0.5s;
  --dur-lg: 0.8s;

  /* ---- elevation scale ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.4);
  --shadow-lg: 0 26px 60px rgba(0,0,0,0.55);
  --glow-red: 0 0 40px rgba(255,45,45,0.28);

  /* ---- layout rhythm ---- */
  --header-h: 96px;

  /* ---- type stacks ----
     Every family below carries real fallbacks. Without them, a blocked or
     slow Google Fonts request drops the whole site to Times New Roman. */
  --font-display: 'Oswald', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  --font-serif: 'Prata', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:hidden; scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
/* global keyboard-focus visibility — applies everywhere unless a component overrides it */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--red-bright); outline-offset:2px; border-radius:1px;
}
/* skip-to-content link — hidden until a keyboard user tabs to it */
.skip-link{
  position:absolute; top:-100px; left:12px; z-index:10000;
  background:var(--red); color:var(--paper); padding:12px 20px;
  font-family:var(--font-mono); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em;
  transition:top 0.2s ease;
}
.skip-link:focus{ top:12px; }
body{
  font-family:var(--font-body);
  background:
    radial-gradient(ellipse 70% 40% at 15% 0%, rgba(220,16,35,0.10), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 2px, transparent 2px, transparent 60px),
    var(--black);
  color:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* film grain — subtle noise texture over the whole site */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E");
  opacity:0.035;
  mix-blend-mode:overlay;
}
/* signature glow — a recurring red radial accent at every section break */
.stripe{position:relative;}
.stripe::before{
  content:""; position:absolute; left:50%; top:50%; width:340px; height:120px;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(220,16,35,0.35) 0%, rgba(220,16,35,0) 75%);
  filter:blur(4px);
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-weight:700;
  line-height:1.1;
}
.mono{font-family:var(--font-mono);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--red-bright);
  font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--red-bright); display:inline-block; }

.hero .eyebrow{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing:0.04em;
  font-weight:600;
  color:var(--red-bright);
  text-shadow:0 0 26px rgba(255,45,45,0.4);
}
.hero .eyebrow::before{ width:44px; height:3px; background:var(--red-bright); }

/* ---------- activity panels (welcome / apparatus / alarms / join now) ---------- */
.activity-grid{display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start;}
@media (max-width:900px){ .activity-grid{grid-template-columns:1fr;} }
.main-col, .sidebar-col{display:grid; gap:28px;}
.panel{background:var(--black-2); border:1px solid var(--line); box-shadow:var(--shadow);}
.panel-head{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.03em; font-weight:700;
  padding:16px 22px; font-size:1.05rem; color:var(--paper);
}
.panel-head.red{background:var(--red);}
.panel-head.amber{background:var(--amber); color:var(--black);}
.panel-body{padding:26px;}
.panel-body p{color:var(--steel); font-size:0.95rem; margin-bottom:18px;}
.panel-photo{aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line);}
.panel-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.panel .btn{padding:12px 22px; font-size:0.72rem;}

.alarm-table{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:0.78rem;}
.alarm-table th{
  text-align:left; padding:8px 10px; color:var(--steel); text-transform:uppercase;
  letter-spacing:0.08em; font-size:0.66rem; border-bottom:2px solid var(--line);
}
.alarm-table td{padding:10px; color:var(--paper);}
.alarm-table tr:nth-child(odd) td{background:rgba(220,16,35,0.16);}
.alarm-table tr:hover td{background:rgba(220,16,35,0.28);}
.alarm-note{
  font-family:var(--font-mono); font-size:0.66rem; color:var(--steel-dim); letter-spacing:0.02em;
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
}


.stripe{
  height:14px;
  background:repeating-linear-gradient(-45deg, var(--black) 0px, var(--black) 16px, var(--red) 16px, var(--red) 32px);
}
.stripe.thin{height:8px;}

/* ---------- top emergency bar ---------- */
.topbar{ background:var(--red); color:var(--paper); font-family:var(--font-serif); font-size:0.8rem; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding-top:9px; padding-bottom:9px; flex-wrap:wrap; gap:6px 20px; }
.topbar .emergency{color:var(--paper); font-weight:700; letter-spacing:0.01em; animation:emergencyPulse 2.2s ease-in-out infinite;}
@keyframes emergencyPulse{ 0%,100%{opacity:1;} 50%{opacity:0.55;} }
.topbar .sep{color:rgba(250,247,242,0.55); margin:0 10px;}

/* ---------- nav ---------- */
header.site{ position:sticky; top:0; z-index:50; background:rgba(12,11,11,0.97); border-bottom:2px solid var(--red); backdrop-filter:blur(6px); }
nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{display:flex; align-items:center; gap:14px;}
.brand .badge{
  width:62px; height:62px; flex:none; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 0 10px rgba(220,16,35,0.55));
}
.brand .badge img{width:100%; height:100%; object-fit:contain;}
.brand-text{color:var(--paper);}
.brand-text .name{font-family:var(--font-display); font-size:1.32rem; letter-spacing:0.03em; text-transform:uppercase;}
.brand-text .county{font-family:var(--font-mono); font-size:0.8rem; color:var(--steel); letter-spacing:0.12em;}

.navlinks{display:flex; gap:14px; align-items:center;}
.navlinks a{
  color:var(--paper-dim); font-family:var(--font-mono); font-size:0.66rem; white-space:nowrap;
  letter-spacing:0.04em; text-transform:uppercase; transition:color 0.2s; position:relative; padding-bottom:4px;
}
.navlinks a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--red-bright);
  transform:scaleX(0); transform-origin:left; transition:transform 0.25s ease;
}
.navlinks a:hover::after{transform:scaleX(1);}
.navlinks a.cta::after{display:none;}
.navlinks a:hover{color:var(--red-bright);}
.navlinks a.active{color:var(--red-bright); border-bottom:2px solid var(--red-bright);}
.navlinks a.cta{ background:var(--red); color:var(--paper); padding:9px 15px; border:1px solid var(--red); }
.navlinks a.cta:hover{background:transparent; color:var(--red-bright); box-shadow:none;}
.navlinks a.fb-badge-link{ padding-bottom:0; }
.navlinks a.fb-badge-link::after{display:none;}
.navlinks a.fb-badge-link img{
  width:30px; height:30px; display:block; border-radius:50%;
  filter:drop-shadow(0 0 6px rgba(24,119,242,0.45));
  transition:transform 0.25s ease, filter 0.25s ease;
}
.navlinks a.fb-badge-link:hover img{ transform:scale(1.1) rotate(-4deg); filter:drop-shadow(0 0 10px rgba(24,119,242,0.75)); }
header.site.condensed .navlinks a.fb-badge-link img{ width:28px; height:28px; }
.navtoggle{display:none; position:relative; z-index:60; background:none; border:none; color:var(--paper); font-size:1.6rem; cursor:pointer;}

/* ---------- nav dropdown (Services) ---------- */
.navdrop{position:relative; display:flex; align-items:center; gap:2px;}
.navdrop-caret{
  display:inline-flex; align-items:center; justify-content:center; background:none; border:none;
  color:var(--paper-dim); cursor:pointer; padding:6px 4px; margin-left:-2px; transition:color 0.2s, transform 0.25s ease;
}
.navdrop-caret svg{display:block;}
.navdrop-caret:hover{color:var(--red-bright);}
.navdrop.open .navdrop-caret{transform:rotate(180deg); color:var(--red-bright);}
.navdrop-menu{
  position:absolute; top:calc(100% + 14px); left:0; min-width:230px;
  background:var(--black-2); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:8px 0; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index:60;
}
.navdrop.open .navdrop-menu{opacity:1; visibility:visible; transform:translateY(0);}
.navdrop-menu a{
  display:block; padding:11px 20px; color:var(--paper-dim); font-family:var(--font-mono);
  font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap;
  transition:color 0.2s, background 0.2s;
}
.navdrop-menu a::after{display:none;}
.navdrop-menu a:hover, .navdrop-menu a:focus-visible{color:var(--red-bright); background:rgba(220,16,35,0.12);}
.navdrop-menu a.active{color:var(--red-bright);}

@media (max-width:1080px){
  .navlinks{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px); background:var(--black);
    flex-direction:column; justify-content:center; align-items:flex-start; padding:40px; gap:26px;
    transform:translateX(100%); visibility:hidden; transition:transform 0.35s ease, visibility 0s linear 0.35s;
    border-left:1px solid var(--line); overflow-y:auto;
  }
  .navlinks.open{transform:translateX(0); visibility:visible; transition:transform 0.35s ease, visibility 0s linear 0s;}
  .navtoggle{display:block;}
  .navdrop{flex-wrap:wrap; row-gap:14px;}
  .navdrop-menu{
    position:static; opacity:1; visibility:visible; transform:none; display:none;
    flex:1 0 100%; width:100%; background:transparent; border:none; box-shadow:none;
    padding:2px 0 2px 18px; border-left:1px solid var(--line);
  }
  .navdrop.open .navdrop-menu{display:flex; flex-direction:column; gap:14px;}
  .navdrop-menu a{padding:0; font-size:0.68rem;}
}

/* ---------- page header banner (interior pages) ---------- */
.pagehead{
  background:
    linear-gradient(180deg, rgba(19,18,17,0.6), rgba(19,18,17,0.94)),
    repeating-linear-gradient(115deg, #1c1a19 0px, #1c1a19 2px, #181615 2px, #181615 60px);
  color:var(--paper);
  padding:74px 0 56px;
}
.pagehead h1{font-size:clamp(2.2rem,4.4vw,3.2rem); margin-top:14px;}
.pagehead p{color:var(--steel); max-width:56ch; margin-top:16px; font-size:1.02rem;}
.crumbs{font-family:var(--font-mono); font-size:0.72rem; color:var(--steel); letter-spacing:0.08em; text-transform:uppercase;}
.crumbs a:hover{color:var(--red-bright);}

/* ---------- hero (home) ---------- */
.hero{
  color:var(--paper); padding:130px 0 90px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url('assets/fleet-hero-base.jpg');
  background-size:cover; background-position:center 62%;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg, rgba(19,18,17,0.94) 0%, rgba(19,18,17,0.82) 42%, rgba(19,18,17,0.35) 100%),
    linear-gradient(0deg, rgba(19,18,17,0.85), rgba(19,18,17,0.2) 55%);
}
.hero .wrap{position:relative; z-index:3;}

/* waving flag, cropped from the same photo, animated independently over the static backdrop */
.hero-flag{
  position:absolute; left:0; top:0; width:24%; height:36%; z-index:1;
  background-image:url('assets/hero-flag-crop.png');
  background-size:cover; background-position:top left;
  transform-origin:left center;
  animation:flagWave 4.5s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(115deg, black 55%, transparent 92%);
  mask-image:linear-gradient(115deg, black 55%, transparent 92%);
}
@keyframes flagWave{
  0%,100%{ transform:skewY(0deg) skewX(0deg) scaleY(1); }
  25%{ transform:skewY(1.1deg) skewX(-1deg) scaleY(0.99); }
  50%{ transform:skewY(-0.9deg) skewX(1.3deg) scaleY(1.01); }
  75%{ transform:skewY(0.9deg) skewX(-0.6deg) scaleY(0.995); }
}

/* soft drifting clouds/smoke across the sky */
.hero-clouds{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;}
.hero-clouds span{
  position:absolute; width:55%; height:65%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 72%);
  filter:blur(20px);
  animation:cloudDrift linear infinite;
}
.hero-clouds span:nth-child(1){left:-35%; top:-8%; animation-duration:75s;}
.hero-clouds span:nth-child(2){left:15%; top:-18%; animation-duration:100s; animation-delay:-25s;}
.hero-clouds span:nth-child(3){left:50%; top:-6%; animation-duration:85s; animation-delay:-45s;}
@keyframes cloudDrift{ from{transform:translateX(-10%);} to{transform:translateX(140%);} }

/* flashing emergency lightbars on the ambulance and truck */
.hero-lights{position:absolute; inset:0; z-index:1; pointer-events:none;}
.hero-lights .lb1{
  position:absolute; left:3%; top:42%; width:34%; height:11%;
  background:radial-gradient(ellipse at center, rgba(255,30,30,0.55) 0%, rgba(255,30,30,0) 70%);
  animation:lightFlashA 1s steps(1) infinite;
}
.hero-lights .lb2{
  position:absolute; left:61%; top:48%; width:17%; height:6%;
  background:radial-gradient(ellipse at center, rgba(255,30,30,0.55) 0%, rgba(255,30,30,0) 70%);
  animation:lightFlashA 1s steps(1) infinite;
}
@keyframes lightFlashA{ 0%,40%{opacity:0;} 10%,30%{opacity:1;} 50%,100%{opacity:0;} }

.hero h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); color:var(--paper); max-width:14ch; margin-top:20px; }
.hero h1 em{
  font-style:normal; color:var(--red-bright); text-shadow:0 0 34px rgba(255,45,45,0.45);
  transition:text-shadow 0.4s ease, letter-spacing 0.4s ease;
}
.hero h1:hover em{ text-shadow:0 0 52px rgba(255,45,45,0.7), 0 0 90px rgba(255,45,45,0.3); letter-spacing:0.01em; }
.hero .lede{ max-width:52ch; color:var(--steel); font-size:1.08rem; margin-top:22px; }
.hero .lede-group{ max-width:62ch; margin-top:22px; }
.hero .lede-group p{ color:var(--steel); font-size:1.06rem; line-height:1.62; }
.hero .lede-group p + p{ margin-top:16px; }
.hero .lede-group .tagline{ color:var(--paper); font-weight:600; }
.hero .actions{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
.btn{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--red); display:inline-block; transition:all 0.2s ease; cursor:pointer; background:none;
}
.btn.solid{background:var(--red); color:var(--paper); box-shadow:0 0 0 rgba(220,16,35,0);}
.btn.solid:hover{background:var(--red-bright); border-color:var(--red-bright); box-shadow:0 8px 28px rgba(255,45,45,0.35); transform:translateY(-2px);}
.btn.ghost{color:var(--paper); border-color:var(--line);}
.btn.ghost:hover{border-color:var(--red-bright); color:var(--red-bright);}
.btn.small{padding:10px 16px; font-size:0.7rem;}
.btn-icon{display:inline-flex; align-items:center; gap:9px;}
.btn-icon svg{width:16px; height:16px; flex:none;}

.hero-stats{ margin-top:64px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); padding-top:32px; gap:20px; }
.hero-stats .stat .num{font-family:var(--font-mono); font-weight:700; font-size:2.15rem; color:var(--red-bright);}
.hero-stats .stat .lbl{font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); margin-top:6px;}
@media (max-width:900px){ .hero-stats{grid-template-columns:repeat(3,1fr); row-gap:30px;} }
@media (max-width:560px){ .hero-stats{grid-template-columns:repeat(2,1fr); row-gap:30px;} }

/* ---------- generic section ---------- */
section{padding:96px 0;}
section.tight{padding:70px 0;}
section.dark{background:radial-gradient(ellipse 120% 60% at 50% 0%, rgba(220,16,35,0.16), transparent 60%), var(--black-2); color:var(--paper);}
section.dark .steel-txt{color:var(--steel);}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head.wide{max-width:760px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:14px;}
.section-head p{color:var(--steel); margin-top:16px; font-size:1.02rem;}
section.dark .section-head p{color:var(--steel);}
.section-foot{display:flex; justify-content:space-between; align-items:center; margin-top:44px; flex-wrap:wrap; gap:16px;}

/* ---------- about ---------- */
#about{position:relative; padding-top:0;}
.about-banner{position:relative; height:440px; overflow:hidden;}
.about-banner-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%;}
.about-banner-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,11,11,0.05) 0%, rgba(12,11,11,0.6) 60%, var(--black) 100%),
    linear-gradient(90deg, rgba(12,11,11,0.85) 0%, rgba(12,11,11,0.25) 50%, rgba(12,11,11,0.05) 100%);
}
.about-banner-content{position:relative; z-index:1; height:100%; display:flex; align-items:flex-end; gap:26px; padding-bottom:40px;}
@media (max-width:600px){ .about-banner{height:360px;} .about-banner-content{flex-direction:column; align-items:flex-start; gap:16px;} }

.section-head-patch{display:flex; align-items:center; gap:26px; margin-bottom:52px;}
.about-patch{width:110px; height:110px; object-fit:contain; flex:none; filter:drop-shadow(0 6px 20px rgba(0,0,0,0.5));}

.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start; margin-top:56px;}

.about-grid p{color:var(--steel); margin-bottom:16px;}
.about-grid .about-punch{font-family:var(--font-display); text-transform:none; font-size:1.18rem; color:var(--red-bright); font-weight:600; margin:26px 0 14px;}
.about-grid ul{margin:6px 0 22px; display:grid; gap:8px;}
.about-grid li{color:var(--steel); font-size:0.95rem; padding-left:20px; position:relative;}
.about-grid li::before{content:"—"; position:absolute; left:0; color:var(--red-bright);}
.about-close{margin-top:52px; padding-top:34px; border-top:1px solid var(--line); text-align:center; font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--paper);}
.about-cards{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px;}
.about-card{background:var(--black-2); padding:36px;}
.about-card:nth-child(3n+1){border-top:3px solid var(--red);}
.about-card:nth-child(3n+2){border-top:3px solid var(--amber);}
.about-card:nth-child(3n+3){border-top:3px solid var(--red-bright);}
.about-card h3{font-size:1.15rem; color:var(--paper);}
.about-card .tag{font-family:var(--font-display); text-transform:none; font-size:1rem; color:var(--red-bright); font-weight:600; margin-top:8px;}
.about-card p{color:var(--steel); font-size:0.94rem; line-height:1.65; margin-top:12px;}
.about-card ul{margin:10px 0; display:grid; gap:6px;}
.about-card li{color:var(--steel); font-size:0.9rem; padding-left:20px; position:relative;}
.about-card li::before{content:"—"; position:absolute; left:0; color:var(--red-bright);}
@media (max-width:780px){ .about-cards{grid-template-columns:1fr;} }
.values{display:grid; gap:22px; margin-top:8px;}
.value{border-left:3px solid var(--red); padding-left:18px;}
.value h4{font-size:1rem; letter-spacing:0.04em;}
.value .sub{color:var(--amber); font-size:0.82rem; font-weight:600; margin-top:4px;}
.value p.body{color:var(--steel); font-size:0.94rem; margin-top:8px;}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }

/* ---------- services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.svc-card{ background:var(--black-2); padding:36px 30px; transition:background 0.25s ease, box-shadow 0.25s ease; border-top:3px solid var(--red); }
.svc-card:hover{background:var(--red); color:var(--paper); box-shadow:0 14px 34px rgba(220,16,35,0.35);}
.svc-card:hover p{color:rgba(250,247,242,0.85);}
.svc-card:hover .svc-no{color:var(--paper);}
.svc-no{font-family:var(--font-mono); font-weight:700; color:var(--red-bright); font-size:0.8rem; letter-spacing:0.1em;}
.svc-card h3{font-size:1.15rem; margin-top:14px;}
.svc-card p{color:var(--steel); margin-top:10px; font-size:0.94rem;}
@media (max-width:820px){ .svc-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr;} }
.svc-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:820px){ .svc-grid.cols-4{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .svc-grid.cols-4{grid-template-columns:1fr;} }

/* ---------- photo strip (division pages) ---------- */
.photo-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px;}
.photo-strip figure{margin:0; background:var(--black-2); border:1px solid var(--line); overflow:hidden; border-radius:2px;}
.photo-strip img{width:100%; height:190px; object-fit:cover; display:block; transition:transform 0.35s ease;}
.photo-strip figure:hover img{transform:scale(1.06);}
.photo-strip figcaption{padding:13px 16px; color:var(--steel); font-size:0.82rem; line-height:1.5;}
@media (max-width:780px){ .photo-strip{grid-template-columns:1fr;} }

/* ---------- asymmetric photo mosaic (mixed tile sizes, not lined up) ---------- */
.ops-mosaic{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; grid-auto-flow:dense; gap:14px; margin-top:32px;}
.ops-tile{margin:0; position:relative; overflow:hidden; border-radius:2px; background:var(--black-2); border:1px solid var(--line);}
.ops-tile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease;}
.ops-tile:hover img{transform:scale(1.07);}
.ops-tile figcaption{position:absolute; left:0; right:0; bottom:0; padding:12px 14px 10px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--paper); background:linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0));}
.ops-tile.w2{grid-column:span 2;}
.ops-tile.h2{grid-row:span 2;}
@media (max-width:900px){
  .ops-mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px;}
  .ops-tile.w2{grid-column:span 2;}
}
@media (max-width:560px){
  .ops-mosaic{grid-template-columns:1fr; grid-auto-rows:220px;}
  .ops-tile.w2, .ops-tile.h2{grid-column:span 1; grid-row:span 1;}
}

/* ---------- fleet (home) ---------- */
.fleet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .fleet-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .fleet-grid{grid-template-columns:1fr;} }
.fleet-card{
  background:var(--black-2); border:1px solid var(--line); border-top:3px solid var(--red); cursor:pointer;
  transition:transform 0.25s ease, border-color 0.25s ease; position:relative; overflow:hidden;
}
.fleet-card:hover{transform:translateY(-6px); border-color:var(--red-bright); border-top-color:var(--red-bright);}
.fleet-card:focus-visible{outline:2px solid var(--red-bright); outline-offset:2px;}
.fleet-art{
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(195,31,42,0.07) 0px, rgba(195,31,42,0.07) 2px, transparent 2px, transparent 22px),
    var(--black);
  border-bottom:1px solid var(--line);
}
.fleet-art svg{width:58%; height:58%; color:var(--red-bright);}
.fleet-art.photo{padding:0; position:relative;}
.fleet-art.photo img{width:100%; height:100%; object-fit:cover; display:block;}
.fleet-art.photo::after{
  content:"ACTUAL UNIT"; position:absolute; top:12px; left:12px;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; font-weight:700;
  color:var(--black); background:var(--amber); padding:4px 8px;
}
.fleet-body{padding:20px 22px 24px;}
.fleet-unit{font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; color:var(--amber); text-transform:uppercase;}
.fleet-name{color:var(--paper); font-size:1.15rem; margin-top:8px;}
.fleet-desc{color:var(--steel); font-size:0.88rem; margin-top:8px;}
.fleet-more{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--steel-dim); margin-top:16px; display:flex; align-items:center; gap:8px;
}
.fleet-card:hover .fleet-more{color:var(--red-bright);}
.fleet-detail{
  max-height:0; overflow:hidden; transition:max-height 0.35s ease;
  border-top:1px solid transparent;
}
.fleet-card.open .fleet-detail{max-height:220px; border-top:1px solid var(--line);}
.fleet-detail-inner{padding:18px 22px 22px; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;}
.fleet-spec .k{font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel-dim);}
.fleet-spec .v{color:var(--paper); font-size:0.88rem; margin-top:3px;}
.fleet-card-photo{cursor:default;}
.fleet-card-photo .fleet-art{aspect-ratio:16/10;}
.fleet-card-photo .fleet-art.photo img{object-position:top;}
.fleet-card-photo .fleet-art.photo::after{display:none;}

/* ---------- careers ---------- */
.path-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line);}
.path-grid.single{grid-template-columns:1fr; max-width:620px; margin:0 auto; border:none;}
.path-grid.single .path.career{border:1px solid var(--line); border-top:3px solid var(--red);}
.path{padding:44px;}
.path.career{background:var(--black-2); border-right:1px solid var(--line); border-top:3px solid var(--red);}
.path.alt{background:var(--black-3); border-top:3px solid var(--red-bright);}
.path .tag{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; color:var(--amber); text-transform:uppercase;}
.path h3{color:var(--paper); font-size:1.6rem; margin-top:12px;}
.path p{color:var(--steel); margin-top:14px; font-size:0.96rem;}
.path ul{margin-top:20px; display:grid; gap:10px;}
.path li{color:var(--steel); font-size:0.9rem; padding-left:22px; position:relative;}
.path li::before{content:"—"; position:absolute; left:0; color:var(--red-bright);}
.path .btn{margin-top:28px;}
@media (max-width:780px){ .path-grid{grid-template-columns:1fr;} .path.career{border-right:none; border-bottom:1px solid var(--line);} }

/* ---------- careers section (why-work-here cards) ---------- */
.career-subhead{margin-top:56px; font-size:1.5rem;}
.career-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:28px;}
.career-card{background:var(--black-2); padding:36px;}
.career-card:nth-child(1){border-top:3px solid var(--red);}
.career-card:nth-child(2){border-top:3px solid var(--amber);}
.career-card:nth-child(3){border-top:3px solid var(--red-bright);}
.career-card:nth-child(4){border-top:3px solid var(--amber);}
.career-card h3{font-size:1.1rem; color:var(--paper);}
.career-card p{color:var(--steel); margin-top:12px; font-size:0.95rem; line-height:1.6;}
.career-card ul{margin-top:14px; display:grid; gap:8px;}
.career-card li{color:var(--steel); font-size:0.9rem; padding-left:20px; position:relative;}
.career-card li::before{content:"—"; position:absolute; left:0; color:var(--red-bright);}
@media (max-width:780px){ .career-grid{grid-template-columns:1fr;} }
.career-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.career-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .career-grid.cols-3, .career-grid.cols-4{grid-template-columns:1fr 1fr;} }
@media (max-width:780px){ .career-grid.cols-3, .career-grid.cols-4{grid-template-columns:1fr;} }
.career-cta{max-width:640px; margin-top:56px;}
.career-cta h3{font-size:1.5rem;}
.career-cta p{color:var(--steel); margin-top:14px; font-size:1rem; line-height:1.6;}
.career-req{margin-top:40px; padding:26px 30px; background:var(--black-2); border:1px solid var(--line); border-left:3px solid var(--red); max-width:640px;}
.career-req .tag{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; color:var(--amber); text-transform:uppercase;}
.career-req ul{margin-top:16px; display:grid; gap:10px;}
.career-req li{color:var(--steel); font-size:0.9rem; padding-left:22px; position:relative;}
.career-req li::before{content:"—"; position:absolute; left:0; color:var(--red-bright);}

/* ---------- news ---------- */
.news-list{display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.news-item{ background:var(--black-2); border-left:3px solid var(--red); display:grid; grid-template-columns:110px 1fr auto; gap:28px; align-items:center; padding:26px 6px 26px 20px; transition:padding-left 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
a.news-item{ cursor:pointer; }
.news-item:hover{padding-left:18px; background:var(--black-3); border-left-color:var(--red-bright);}
.news-date{font-family:var(--font-mono); color:var(--red-bright); font-size:0.82rem; font-weight:700;}
.news-item h4{font-family:var(--font-body); text-transform:none; font-weight:700; font-size:1.02rem; color:var(--paper);}
.news-item p{color:var(--steel); font-size:0.88rem; margin-top:4px;}
.news-item .arrow{font-family:var(--font-mono); color:var(--steel); font-size:1.2rem;}
@media (max-width:640px){ .news-item{grid-template-columns:1fr; gap:8px;} .news-item .arrow{display:none;} }

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.info-block{margin-bottom:30px;}
.info-block .lbl{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; color:var(--red-bright); text-transform:uppercase;}
.info-block .val{margin-top:8px; font-size:1.05rem; color:var(--paper);}
.map-frame{ margin-top:30px; border:1px solid var(--line); aspect-ratio:16/11; width:100%; background:var(--black-2); position:relative; }
.map-frame iframe{width:100%; height:100%; border:0;}
.map-frame #station-map{width:100%; height:100%; background:var(--black-2); font-family:var(--font-body);}
form{display:grid; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); display:block; margin-bottom:8px; }
input, select, textarea{ width:100%; background:var(--black-2); border:1px solid var(--line); color:var(--paper); padding:13px 14px; font-family:var(--font-body); font-size:0.95rem; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--red-bright); outline-offset:2px; border-color:var(--red-bright); }
textarea{resize:vertical; min-height:110px;}
button.submit{
  font-family:var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; background:var(--red); color:var(--paper);
  border:1px solid var(--red); padding:15px 26px; font-size:0.8rem; cursor:pointer; transition:all 0.2s ease; margin-top:4px;
}
button.submit:hover{background:var(--red-bright); border-color:var(--red-bright);}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} }

/* ---------- filter tabs (staff + gallery) ---------- */
.filter-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.filter-tabs button{
  background:none; border:1px solid var(--line); color:var(--steel);
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:10px 18px; cursor:pointer; transition:all 0.2s ease;
}

.filter-tabs button:hover{border-color:var(--red-bright); color:var(--red-bright);}
.filter-tabs button.active{background:var(--red); border-color:var(--red); color:var(--paper);}

/* ---------- staff ---------- */
.staff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){ .staff-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .staff-grid{grid-template-columns:1fr;} }
.staff-card{
  background:var(--black-2); border:1px solid var(--line); border-top:3px solid var(--red); padding:32px 28px;
  transition:border-color 0.25s ease, transform 0.25s ease; cursor:pointer;
}
.staff-card:hover{border-color:var(--red-bright); border-top-color:var(--red-bright); transform:translateY(-4px);}
.staff-card:focus-visible{outline:2px solid var(--red-bright); outline-offset:2px;}
.avatar{
  width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:1.6rem; color:var(--paper);
  background:var(--red); border:3px solid var(--red); flex:none; overflow:hidden;
}
.avatar.chief{background:var(--amber); border-color:var(--amber);}
.avatar.command{background:var(--red-bright); color:var(--paper); border-color:var(--red-bright);}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.staff-top{display:flex; gap:20px; align-items:center;}
.staff-name{color:var(--paper); font-size:1.18rem; margin-top:0; font-family:var(--font-display); text-transform:none; letter-spacing:0; font-weight:600;}
.staff-role{font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--amber); text-transform:uppercase; margin-top:5px;}
.staff-bio{
  max-height:0; overflow:hidden; transition:max-height 0.35s ease; color:var(--steel); font-size:0.9rem;
}
.staff-card.open .staff-bio{max-height:260px; margin-top:18px;}
.staff-bio p{padding-top:14px; border-top:1px solid var(--line);}
.staff-expand{ font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel-dim); margin-top:18px; display:flex; align-items:center; gap:6px; }
.staff-card:hover .staff-expand{color:var(--red-bright);}
.staff-bio .dept-line{color:var(--steel); font-size:0.88rem;}
.staff-bio .dept-line a{color:var(--red-bright);}
.staff-bio .contact-line{display:block; font-family:var(--font-mono); font-size:0.82rem; color:var(--paper); margin-top:8px;}
.staff-bio .contact-line a{color:var(--red-bright);}
.staff-card.pending{border-top-style:dashed; border-top-color:var(--steel-dim); cursor:pointer;}
.staff-card.pending:hover{border-color:var(--line); border-top-color:var(--steel); transform:none;}
.staff-card.pending .staff-name{color:var(--steel); font-style:italic; font-weight:400;}
.staff-card.pending .staff-role{color:var(--steel-dim);}
.avatar.pending{background:var(--black-3); border:2px dashed var(--line); color:var(--steel-dim);}
.avatar.pending svg{width:58%; height:58%;}
.staff-bio .contact-line a:hover{text-decoration:underline;}

/* ---------- command staff leadership cards (separate from the .staff-card family above) ---------- */
.leader-card{
  position:relative; background:var(--black-2); border:1px solid var(--line);
  padding:0; text-align:left; overflow:hidden; cursor:pointer; width:100%; display:block;
  font-family:inherit; color:inherit;
  transition:border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.leader-card:hover{ border-color:var(--red-bright); transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,0.5); }
.leader-card:focus-visible{ outline:2px solid var(--red-bright); outline-offset:2px; }

.leader-photo-wrap{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--black-3); }
.leader-photo-wrap::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(12,11,11,0.92) 0%, rgba(12,11,11,0) 42%);
}
.leader-index{
  position:absolute; top:16px; left:18px; z-index:2;
  font-family:var(--font-mono); font-size:0.7rem; color:rgba(250,247,242,0.55); letter-spacing:0.1em;
}
.leader-photo-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.6s ease;
}
.leader-card:hover .leader-photo-img{ transform:scale(1.05); }
.leader-initials{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:3.4rem; font-weight:700; color:rgba(250,247,242,0.06);
  background:
    radial-gradient(circle at 30% 20%, rgba(220,16,35,0.35), transparent 55%),
    linear-gradient(160deg, var(--black-3) 0%, var(--black) 130%);
  -webkit-text-stroke:1.5px var(--red-bright);
  transition:transform 0.6s ease;
}
.leader-card:hover .leader-initials{ transform:scale(1.06); }

.leader-info{ padding:22px 24px 0; position:relative; z-index:2; }
.leader-name{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--paper); text-transform:uppercase; letter-spacing:0.01em; line-height:1.28; }
.leader-role{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; color:var(--red-bright); text-transform:uppercase; margin-top:8px; }

.leader-contact{ max-height:0; overflow:hidden; padding:0 24px; transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
.leader-card.open .leader-contact{ max-height:170px; padding-top:14px; padding-bottom:4px; }
.leader-dept{
  color:var(--steel); font-size:0.85rem; opacity:0; transform:translateY(6px);
  transition:opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s;
}
.leader-card.open .leader-dept{ opacity:1; transform:translateY(0); }
.leader-contact a{
  display:block; font-family:var(--font-mono); font-size:0.82rem; color:var(--red-bright); margin-top:8px;
  opacity:0; transform:translateY(6px); transition:opacity 0.3s ease 0.16s, transform 0.3s ease 0.16s;
}
.leader-card.open .leader-contact a{ opacity:1; transform:translateY(0); }
.leader-contact a:hover{ text-decoration:underline; }
.leader-desc{
  color:var(--steel); font-size:0.88rem; line-height:1.65; opacity:0; transform:translateY(6px);
  transition:opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s;
}
.leader-card.open .leader-desc{ opacity:1; transform:translateY(0); }

.leader-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 24px 22px; margin-top:14px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel-dim);
  transition:color 0.25s ease;
}
.leader-card:hover .leader-toggle{ color:var(--red-bright); }
.leader-toggle-icon{
  width:20px; height:20px; border:1px solid currentColor; border-radius:50%; position:relative; flex:none;
  transition:transform 0.35s ease;
}
.leader-toggle-icon::before, .leader-toggle-icon::after{
  content:""; position:absolute; background:currentColor; top:50%; left:50%; transform:translate(-50%,-50%);
}
.leader-toggle-icon::before{ width:8px; height:1px; }
.leader-toggle-icon::after{ width:1px; height:8px; transition:opacity 0.3s ease; }
.leader-card.open .leader-toggle-icon{ transform:rotate(90deg); }
.leader-card.open .leader-toggle-icon::after{ opacity:0; }

/* ---------- featured leadership card (Chief) ---------- */
.leader-featured{ margin-bottom:28px; }
.leader-card-featured{
  display:grid; grid-template-columns:300px 1fr;
}
.leader-card-featured .leader-photo-wrap{ aspect-ratio:auto; }
.leader-card-featured .leader-featured-tag{
  position:absolute; top:16px; left:18px; z-index:2;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--red-bright); background:rgba(12,11,11,0.75); padding:4px 10px; border:1px solid var(--red-bright);
}
.leader-card-featured .leader-info{ padding:32px 36px 0; display:flex; flex-direction:column; justify-content:center; }
.leader-card-featured .leader-name{ font-size:1.65rem; }
.leader-card-featured .leader-role{ font-size:0.8rem; margin-top:12px; }
.leader-card-featured .leader-contact{ padding:0 36px; }
.leader-card-featured.open .leader-contact{ max-height:120px; }
.leader-card-featured .leader-toggle{ padding:16px 36px 28px; }
@media (max-width:700px){
  .leader-card-featured{ grid-template-columns:1fr; }
  .leader-card-featured .leader-photo-wrap{ aspect-ratio:4/5; }
}

/* ---------- FAQ accordion ---------- */
.faq-list{ max-width:800px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.faq-item{ background:var(--black-2); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:none; color:var(--paper); text-align:left; cursor:pointer;
  padding:22px 26px; font-family:var(--font-display); font-size:1.02rem; font-weight:600;
}
.faq-icon{
  width:22px; height:22px; border:1px solid var(--steel-dim); border-radius:50%; position:relative; flex:none;
  transition:transform 0.3s ease, border-color 0.3s ease;
}
.faq-icon::before, .faq-icon::after{ content:""; position:absolute; background:var(--steel); top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-icon::before{ width:9px; height:1px; }
.faq-icon::after{ width:1px; height:9px; transition:opacity 0.25s ease; }
.faq-item.open .faq-icon{ transform:rotate(90deg); border-color:var(--red-bright); }
.faq-item.open .faq-icon::after{ opacity:0; }
.faq-q:hover .faq-icon{ border-color:var(--red-bright); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ color:var(--steel); font-size:0.95rem; line-height:1.65; padding:0 26px 24px; max-width:64ch; }
.faq-a a{ color:var(--red-bright); text-decoration:underline; }
.faq-a ul{ list-style:disc; margin:0 0 24px; padding:0 26px 0 46px; max-width:64ch; }
.faq-a li{ color:var(--steel); font-size:0.95rem; line-height:1.65; }
.faq-a li + li{ margin-top:4px; }

/* Category groupings within the FAQ list */
.faq-category{ margin:52px 0 18px; scroll-margin-top:var(--header-h); }
.faq-category:first-child{ margin-top:0; }
.faq-category .eyebrow{ margin-bottom:6px; }
.faq-category h2{ font-family:var(--font-display); font-size:1.32rem; color:var(--paper); margin:0; }

/* FAQ search + category jump toolbar */
.faq-toolbar{ max-width:800px; margin-bottom:12px; }
.faq-search-wrap{ position:relative; }
.faq-search-icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--steel-dim); pointer-events:none; }
.faq-search-wrap input[type="search"]{ padding-left:44px; }
.faq-search-wrap input[type="search"]::-webkit-search-cancel-button{ filter:invert(0.6); }
.faq-jump{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.faq-jump a{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--steel); border:1px solid var(--line); padding:8px 14px; text-decoration:none;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.faq-jump a:hover, .faq-jump a:focus-visible{ border-color:var(--red-bright); color:var(--red-bright); }
.faq-no-results{ color:var(--steel); font-size:0.95rem; margin-top:28px; max-width:800px; }
.faq-no-results a{ color:var(--red-bright); text-decoration:underline; }

/* Prominent "call 911, don't use the form" notice at the top of the FAQ page */
.faq-emergency-note{
  max-width:800px; display:flex; align-items:center; gap:16px;
  background:rgba(220,16,35,0.1); border:1px solid rgba(220,16,35,0.4);
  padding:18px 22px; margin-top:24px;
}
.faq-emergency-note .icon{ font-size:1.4rem; flex:none; line-height:1; }
.beacon-light{
  width:26px; height:26px; border-radius:50%; flex:none; position:relative; margin:3px 2px 0 0;
  background:radial-gradient(circle at 32% 24%, #ffd0d0 0%, #ff5a5a 18%, #ee1414 42%, #a80000 74%, #4a0000 100%);
  box-shadow:
    inset -3px -4px 5px rgba(0,0,0,0.5),
    inset 2px 3px 4px rgba(255,255,255,0.35),
    0 0 10px 4px rgba(255,25,25,0.9),
    0 0 24px 11px rgba(220,16,35,0.5);
  animation:beacon-flash 1.3s infinite;
}
.beacon-light::before{
  content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:62%; height:6px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 72%);
}
.beacon-light::after{
  content:""; position:absolute; top:14%; left:20%; width:30%; height:24%;
  border-radius:50%; background:rgba(255,255,255,0.85); filter:blur(0.4px);
}
@keyframes beacon-flash{
  0%, 8%{
    filter:brightness(1.55) saturate(1.15);
    box-shadow:
      inset -3px -4px 5px rgba(0,0,0,0.5), inset 2px 3px 4px rgba(255,255,255,0.4),
      0 0 16px 7px rgba(255,35,35,1), 0 0 34px 16px rgba(220,16,35,0.7);
  }
  16%, 24%{
    filter:brightness(0.5) saturate(0.9);
    box-shadow:
      inset -3px -4px 5px rgba(0,0,0,0.55), inset 2px 3px 4px rgba(255,255,255,0.15),
      0 0 4px 2px rgba(200,20,20,0.4), 0 0 7px 3px rgba(180,16,35,0.2);
  }
  32%, 40%{
    filter:brightness(1.55) saturate(1.15);
    box-shadow:
      inset -3px -4px 5px rgba(0,0,0,0.5), inset 2px 3px 4px rgba(255,255,255,0.4),
      0 0 16px 7px rgba(255,35,35,1), 0 0 34px 16px rgba(220,16,35,0.7);
  }
  50%, 100%{
    filter:brightness(0.5) saturate(0.9);
    box-shadow:
      inset -3px -4px 5px rgba(0,0,0,0.55), inset 2px 3px 4px rgba(255,255,255,0.15),
      0 0 4px 2px rgba(200,20,20,0.4), 0 0 7px 3px rgba(180,16,35,0.2);
  }
}
@media (prefers-reduced-motion: reduce){
  .beacon-light{ animation:none; }
}
.faq-emergency-note p{
  margin:0; color:var(--paper); font-family:var(--font-mono); font-size:0.82rem;
  letter-spacing:0.01em; line-height:1.6; text-transform:uppercase;
}
.faq-emergency-note strong{ color:var(--red-bright); }
.memorial-pagehead{ border-bottom:1px solid var(--line); }
.memorial-entry{
  display:grid; grid-template-columns:300px 1fr; gap:0;
  background:var(--black-2); border:1px solid var(--line); border-top:3px solid var(--amber);
  max-width:900px;
}
.memorial-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--black-3); }
.memorial-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.memorial-details{ padding:36px 40px; display:flex; flex-direction:column; justify-content:center; }
.memorial-name{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--paper); text-transform:uppercase; letter-spacing:0.01em; }
.memorial-dates{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.05em; color:var(--amber); text-transform:uppercase; margin-top:12px; }
.memorial-tribute{ color:var(--steel); font-size:0.96rem; line-height:1.7; margin-top:20px; max-width:52ch; }
@media (max-width:700px){
  .memorial-entry{ grid-template-columns:1fr; }
  .memorial-photo{ aspect-ratio:4/3; }
}
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
.gallery-tile{
  position:relative; aspect-ratio:1/1; overflow:hidden; cursor:pointer; border:1px solid var(--line-dark);
  background:var(--black); display:flex; align-items:flex-end;
}
.gallery-tile.tall{grid-row:span 2; aspect-ratio:auto;}
.gallery-tile:focus-visible{ outline:3px solid var(--red-bright); outline-offset:-3px; }
.gallery-art{
  position:absolute; inset:0; transition:transform 0.4s ease;
  display:flex; align-items:center; justify-content:center;
}
.gallery-tile:hover .gallery-art{transform:scale(1.06);}
.gallery-art svg{width:36%; height:36%; color:rgba(244,241,234,0.18);}
.gallery-art.photo img{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-cap{
  position:relative; z-index:2; padding:14px 16px; width:100%;
  background:linear-gradient(0deg, rgba(19,18,17,0.92), transparent 100%);
  color:var(--paper); font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:all 0.25s ease;
}
.gallery-tile:hover .gallery-cap{opacity:1; transform:translateY(0);}
.gallery-tile[data-cat="apparatus"] .gallery-art{background:linear-gradient(150deg,#241417,#171514);}
.gallery-tile[data-cat="training"] .gallery-art{background:linear-gradient(150deg,#1a1f24,#171514);}
.gallery-tile[data-cat="community"] .gallery-art{background:linear-gradient(150deg,#241d14,#171514);}
.gallery-tile[data-cat="response"] .gallery-art{background:linear-gradient(150deg,#251515,#171514);}
.gallery-tile[data-cat="station"] .gallery-art{background:linear-gradient(150deg,#151f1c,#171514);}
.gallery-tile.hidden{display:none;}

.lightbox{
  position:fixed; inset:0; background:rgba(10,9,8,0.92); z-index:200; display:none;
  align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox-box{
  max-width:720px; width:100%; background:var(--black-2); border:1px solid var(--line);
}
.lightbox-art{ aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background:var(--black); border-bottom:1px solid var(--line); }
.lightbox-art svg{width:26%; height:26%; color:rgba(244,241,234,0.16);}
.lightbox-info{padding:22px 26px; display:flex; justify-content:space-between; align-items:flex-start; gap:20px;}
.lightbox-info h4{color:var(--paper); font-size:1.05rem; text-transform:none; font-family:var(--font-body); font-weight:700;}
.lightbox-info p{color:var(--steel); font-size:0.85rem; margin-top:6px; font-family:var(--font-mono); letter-spacing:0.04em; text-transform:uppercase;}
.lightbox-close{ background:none; border:1px solid var(--line); color:var(--paper); width:38px; height:38px; cursor:pointer; font-size:1rem; flex:none; }
.lightbox-close:hover{border-color:var(--red-bright); color:var(--red-bright);}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--paper); font-size:2rem; cursor:pointer; padding:14px;}
.lightbox-nav:hover{color:var(--red-bright);}
.lightbox-prev{left:0;}
.lightbox-next{right:0;}
.lightbox-art.square{aspect-ratio:1/1;}
.employee-card:has(.employee-photo img){cursor:pointer;}
.photo-note{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--steel-dim); letter-spacing:0.04em;
  border:1px dashed var(--line); padding:14px 18px; margin-bottom:40px; max-width:760px;
}


/* ---------- employee photos page ---------- */
.employee-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:900px){ .employee-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .employee-grid{grid-template-columns:1fr;} }
.employee-card{background:var(--black-2); border:1px solid var(--line); border-top:3px solid var(--red); overflow:hidden;}
.employee-photo{aspect-ratio:1/1; background:var(--black); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.employee-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.employee-photo svg{width:42%; height:42%; color:rgba(244,241,234,0.16);}
.employee-photo .init-fill{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:var(--paper);
  background:
    radial-gradient(circle at 30% 20%, rgba(220,16,35,0.35), transparent 55%),
    linear-gradient(160deg, var(--black-3) 0%, var(--black) 130%);
}
.employee-info{padding:16px 18px 20px;}
.employee-name{color:var(--paper); font-family:var(--font-body); font-weight:700; font-size:0.98rem; text-transform:none; letter-spacing:0; line-height:1.4;}
.employee-role{font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber); margin-top:5px;}
.employee-card.vacant{border-top-style:dashed; border-top-color:var(--steel-dim);}
.employee-card.vacant .employee-photo{background:var(--black-3);}
.employee-card.vacant .employee-name{color:var(--steel); font-style:italic; font-weight:400;}
.employee-card.vacant .employee-role{color:var(--steel-dim);}

footer{background:var(--black); color:var(--steel); padding:50px 0 30px; position:relative; overflow:hidden;}
.footer-patch{
  position:absolute; top:50%; right:-40px; transform:translateY(-50%);
  width:260px; height:260px; object-fit:contain; opacity:0.06; pointer-events:none;
}
footer .wrap{position:relative; z-index:1;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; padding-bottom:34px; border-bottom:1px solid var(--line);}
.foot-grid .name{color:var(--paper); font-family:var(--font-display); font-size:1.1rem; text-transform:uppercase;}
.foot-links{display:flex; gap:28px; font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; flex-wrap:wrap;}
.foot-links a:hover{color:var(--red-bright);}
.fine{ display:flex; justify-content:space-between; padding-top:24px; font-family:var(--font-mono); font-size:0.72rem; color:var(--steel-dim); flex-wrap:wrap; gap:10px; }

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(16px); transition:opacity 0.5s ease, transform 0.5s ease;}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}

/* subtle cursor-trail glow, desktop only */
.cursor-trail{
  position:fixed; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; pointer-events:none; z-index:9997;
  background:radial-gradient(circle, rgba(220,16,35,0.35) 0%, rgba(220,16,35,0) 72%);
  will-change:transform;
}

/* mobile floating emergency call button */
.mobile-call-fab{display:none;}
@media (max-width:680px){
  .mobile-call-fab{
    display:flex; align-items:center; gap:8px; justify-content:center;
    position:fixed; bottom:18px; right:18px; z-index:999;
    background:var(--red); color:var(--paper); text-decoration:none;
    padding:14px 20px; border-radius:50px;
    font-family:var(--font-mono); font-weight:700; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
    animation:fabPulse 2.4s ease-in-out infinite;
  }
}
@keyframes fabPulse{
  0%,100%{ box-shadow:0 8px 24px rgba(0,0,0,0.45), 0 0 0 0 rgba(220,16,35,0.5); }
  50%{ box-shadow:0 8px 24px rgba(0,0,0,0.45), 0 0 0 10px rgba(220,16,35,0); }
}

::selection{background:var(--red); color:var(--paper);}


/* ==========================================================================
   PREMIUM POLISH LAYER
   Refinements layered on top of the base styles above. Ordered by concern.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Progressive-enhancement guard
   The reveal system hides content until JS observes it. If JS never runs,
   undo the hiding so the page is still fully readable.
   -------------------------------------------------------------------------- */
html:not(.js) .reveal,
html:not(.js) .reveal-stagger > *,
html:not(.js) .hero h1 .word-i{
  opacity:1 !important; transform:none !important; filter:none !important;
}

/* --------------------------------------------------------------------------
   1. Typography refinement
   -------------------------------------------------------------------------- */
body{ text-rendering:optimizeLegibility; -moz-osx-font-smoothing:grayscale; }
h1, h2{ text-wrap:balance; }
.section-head p, .hero .lede-group p, .panel-body p{ text-wrap:pretty; }

/* About intro — the only prose block on the site whose paragraphs ran
   together (the global margin reset left it with no separation at all).
   Reads as a proper lede now: bright opening line, supporting copy in steel. */
#about .wrap > .reveal > p + p{ margin-top:1.05em; }
#about .wrap > .reveal > p{ color:var(--steel); font-size:1.02rem; }
#about .wrap > .reveal > p:first-child{
  color:var(--paper-dim); font-size:1.16rem; line-height:1.68;
}

/* Large display type reads tighter — Oswald opens up too much at scale */
.hero h1{ letter-spacing:-0.012em; }
.pagehead h1{ letter-spacing:-0.008em; }
.section-head h2{ letter-spacing:-0.005em; }

/* the eyebrow rule grows into place with the heading */
.eyebrow::before{
  transition:width var(--dur-lg) var(--ease-out-expo) 0.15s;
}
.reveal .eyebrow::before, .reveal-stagger .eyebrow::before{ width:0; }
.reveal.in .eyebrow::before{ width:22px; }
.hero .eyebrow::before{ width:44px; }

/* hairline that draws under each section heading as it enters.
   Defaults to drawn, and is only held back inside a reveal that hasn't
   fired yet — so headings outside the reveal system still get the rule. */
.section-head h2::after{
  content:""; display:block; height:2px; margin-top:20px; width:170px;
  background:linear-gradient(90deg, var(--red) 0%, rgba(220,16,35,0) 100%);
  transition:width 1.1s var(--ease-out-expo) 0.2s;
}
html.js .reveal:not(.in) .section-head h2::after,
html.js .section-head.reveal:not(.in) h2::after{ width:0; }

/* --------------------------------------------------------------------------
   2. Sticky-header anchor offset
   Anchored sections previously landed flush under the sticky header.
   -------------------------------------------------------------------------- */
section[id], #main-content, .pagehead{ scroll-margin-top:var(--header-h); }

/* --------------------------------------------------------------------------
   3. Header — spacing fix + condense on scroll
   `nav` also carries .wrap, whose `padding:0 28px` was beating `nav{padding:16px 0}`,
   leaving the header with no vertical breathing room at all.
   -------------------------------------------------------------------------- */
header.site nav.wrap{
  padding-top:15px; padding-bottom:15px;
  transition:padding var(--dur-md) var(--ease-out-quart);
}
header.site{
  transition:background var(--dur-md) var(--ease-out-quart),
             box-shadow var(--dur-md) var(--ease-out-quart),
             border-color var(--dur-md) var(--ease-out-quart);
  will-change:background;
}
header.site.condensed{
  background:rgba(12,11,11,0.86);
  box-shadow:0 10px 34px rgba(0,0,0,0.5);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
header.site.condensed nav.wrap{ padding-top:7px; padding-bottom:7px; }
header.site .brand .badge{
  transition:width var(--dur-md) var(--ease-out-quart), height var(--dur-md) var(--ease-out-quart),
             filter var(--dur-md) var(--ease-out-quart);
}
header.site.condensed .brand .badge{ width:46px; height:46px; }
.brand-text .name, .brand-text .county{
  transition:font-size var(--dur-md) var(--ease-out-quart), opacity var(--dur-sm) var(--ease-out-quart);
}
header.site.condensed .brand-text .name{ font-size:1.14rem; }
header.site.condensed .brand-text .county{ font-size:0.72rem; }
.brand{ transition:transform var(--dur-sm) var(--ease-out-quart); }
.brand:hover{ transform:translateX(2px); }
.brand:hover .badge{ filter:drop-shadow(0 0 18px rgba(220,16,35,0.85)); }

/* --------------------------------------------------------------------------
   4. Scroll progress bar (injected by main.js)
   -------------------------------------------------------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-bright) 55%, var(--amber) 100%);
  box-shadow:0 0 14px rgba(255,45,45,0.55);
}

/* --------------------------------------------------------------------------
   5. Reveal system — longer travel, blur-to-sharp, expo easing, real stagger
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(30px); filter:blur(7px);
  transition:opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo), filter 0.7s var(--ease-out-expo);
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

.reveal-stagger > *{
  opacity:0; transform:translateY(26px); filter:blur(6px);
  transition:opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo), filter 0.6s var(--ease-out-expo);
  transition-delay:calc(var(--i, 0) * 85ms);
}
.reveal-stagger.in > *{ opacity:1; transform:none; filter:blur(0); }

/* directional variants for editorial layouts */
.reveal-left{ transform:translateX(-34px); }
.reveal-right{ transform:translateX(34px); }
.reveal-scale{ transform:scale(0.955); }
.reveal-left.in, .reveal-right.in, .reveal-scale.in{ transform:none; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* slow Ken Burns push on the backdrop — reads as depth, not motion */
.hero::before{
  animation:heroDrift 34s var(--ease-in-out-quart) infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{ transform:scale(1) translate3d(0,0,0); }
  to{ transform:scale(1.09) translate3d(-1.2%, -1%, 0); }
}

/* headline reveals word by word, rising out of its own baseline */
.hero h1 .word{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:0.1em; margin-bottom:-0.1em;
}
.hero h1 .word-i{
  display:inline-block; transform:translateY(112%); opacity:0;
  transition:transform 1s var(--ease-out-expo), opacity 0.7s var(--ease-out-expo);
  transition-delay:calc(var(--i, 0) * 55ms);
}
.hero h1.in .word-i{ transform:translateY(0); opacity:1; }

/* the rest of the hero enters on a staged timeline after the headline */
.hero .hero-enter{
  opacity:0; transform:translateY(24px);
  transition:opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
  transition-delay:calc(var(--i, 0) * 110ms + 260ms);
}
.hero .hero-enter.in{ opacity:1; transform:none; }
html:not(.js) .hero .hero-enter{ opacity:1; transform:none; }

/* stats get hairline separators and a hover lift */
.hero-stats{ column-gap:0; }
.hero-stats .stat{
  padding:0 22px; position:relative;
  transition:transform var(--dur-sm) var(--ease-out-quart);
}
.hero-stats .stat:first-child{ padding-left:0; }
.hero-stats .stat + .stat::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}
.hero-stats .stat:hover{ transform:translateY(-3px); }
.hero-stats .stat .num{
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
  text-shadow:0 0 26px rgba(255,45,45,0.32);
  transition:text-shadow var(--dur-sm) var(--ease-out-quart);
}
.hero-stats .stat:hover .num{ text-shadow:0 0 40px rgba(255,45,45,0.6); }
@media (max-width:900px){
  .hero-stats .stat{ padding:0 14px; }
  .hero-stats .stat:nth-child(3n+1){ padding-left:0; }
  .hero-stats .stat:nth-child(3n+1)::before{ display:none; }
}
@media (max-width:560px){
  .hero-stats .stat:nth-child(3n+1){ padding-left:14px; }
  .hero-stats .stat:nth-child(3n+1)::before{ display:block; }
  .hero-stats .stat:nth-child(odd){ padding-left:0; }
  .hero-stats .stat:nth-child(odd)::before{ display:none; }
}

/* --------------------------------------------------------------------------
   7. Cards — cursor spotlight, refined hover, depth
   `isolation:isolate` + `z-index:-1` keeps the glow above the card background
   but behind its text, with no markup changes.
   -------------------------------------------------------------------------- */
.spot{ position:relative; isolation:isolate; }
.spot::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity var(--dur-md) var(--ease-out-quart);
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),
             rgba(255,45,45,0.16), rgba(255,45,45,0.05) 38%, transparent 68%);
}
.spot:hover::before, .spot:focus-within::before{ opacity:1; }

/* service cards — red wipes up from the base instead of hard-swapping */
.svc-card{
  position:relative; isolation:isolate; overflow:hidden;
  transition:box-shadow var(--dur-md) var(--ease-out-quart),
             transform var(--dur-md) var(--ease-out-quart),
             border-top-color var(--dur-sm) var(--ease-out-quart);
}
.svc-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg, var(--red) 0%, #b60d1d 100%);
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform 0.55s var(--ease-out-expo);
}
.svc-card:hover{
  background:var(--black-2);
  transform:translateY(-5px);
  border-top-color:var(--amber);
  box-shadow:0 22px 46px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,45,45,0.25);
}
.svc-card:hover::after{ transform:scaleY(1); }
.svc-card h3, .svc-card p, .svc-no{ transition:color var(--dur-sm) var(--ease-out-quart) 0.1s; }
.svc-card:hover h3{ color:var(--paper); }
.svc-card:hover .svc-no{ color:rgba(12,11,11,0.85); }
.svc-no{ font-variant-numeric:tabular-nums; }

/* fleet cards */
.fleet-card{
  transition:transform var(--dur-md) var(--ease-out-quart),
             border-color var(--dur-sm) var(--ease-out-quart),
             box-shadow var(--dur-md) var(--ease-out-quart);
}
.fleet-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,45,45,0.22); }
.fleet-card-photo:hover{ transform:none; box-shadow:none; border-color:var(--line); border-top-color:var(--red); }
.fleet-art.photo img{ transition:transform 0.9s var(--ease-out-expo), filter var(--dur-md) var(--ease-out-quart); }
.fleet-card:hover .fleet-art.photo img{ transform:scale(1.07); filter:saturate(1.12) contrast(1.04); }
.fleet-art svg{ transition:transform 0.7s var(--ease-out-expo), color var(--dur-sm) ease; }
.fleet-card:hover .fleet-art svg{ transform:scale(1.07) translateX(3px); }
.fleet-more span:last-child{
  display:inline-block; transition:transform var(--dur-sm) var(--ease-spring);
}
.fleet-card:hover .fleet-more span:last-child{ transform:rotate(90deg); }
.fleet-card.open .fleet-more span:last-child{ transform:rotate(45deg); }

/* staff + leadership + about + career cards */
.staff-card{
  transition:border-color var(--dur-sm) var(--ease-out-quart),
             transform var(--dur-md) var(--ease-out-quart),
             box-shadow var(--dur-md) var(--ease-out-quart);
}
.staff-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.avatar{ transition:transform var(--dur-md) var(--ease-spring), box-shadow var(--dur-md) var(--ease-out-quart); }
.staff-card:hover .avatar{ transform:scale(1.06); box-shadow:0 0 0 4px rgba(255,45,45,0.16); }
.staff-card.pending:hover .avatar{ transform:none; box-shadow:none; }

.about-card, .career-card{
  transition:background var(--dur-md) var(--ease-out-quart),
             transform var(--dur-md) var(--ease-out-quart);
}
.about-card:hover, .career-card:hover{ background:var(--black-3); transform:translateY(-3px); }

.leader-card:hover{ box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,45,45,0.2); }

/* --------------------------------------------------------------------------
   8. Buttons — sweep fill, magnetic offset, arrow motion
   -------------------------------------------------------------------------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--dur-sm) var(--ease-out-quart),
             border-color var(--dur-sm) var(--ease-out-quart),
             box-shadow var(--dur-md) var(--ease-out-quart),
             transform var(--dur-sm) var(--ease-out-quart);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--red-bright);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 0.5s var(--ease-out-expo);
}
.btn:hover::before{ transform:scaleX(1); }
.btn.solid:hover{
  background:var(--red); border-color:var(--red-bright);
  box-shadow:0 12px 34px rgba(255,45,45,0.4); transform:translateY(-2px);
}
.btn.ghost::before{ background:rgba(255,45,45,0.14); }
.btn.ghost:hover{ border-color:var(--red-bright); color:var(--red-bright); transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(0.985); }

button.submit{
  position:relative; overflow:hidden; isolation:isolate;
  transition:box-shadow var(--dur-md) var(--ease-out-quart), transform var(--dur-sm) var(--ease-out-quart);
}
button.submit::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--red-bright);
  transform:scaleX(0); transform-origin:0 50%; transition:transform 0.5s var(--ease-out-expo);
}
button.submit:hover{ box-shadow:0 12px 34px rgba(255,45,45,0.4); transform:translateY(-2px); }
button.submit:hover::before{ transform:scaleX(1); }
button.submit:active{ transform:translateY(0) scale(0.985); }

/* "Learn more →" style inline links pick up an arrow slide */
a[href] .arrow, .news-item .arrow{
  display:inline-block; transition:transform var(--dur-sm) var(--ease-spring), color var(--dur-sm) ease;
}
.news-item:hover .arrow{ transform:translateX(7px); color:var(--red-bright); }

/* --------------------------------------------------------------------------
   9. Navigation polish
   -------------------------------------------------------------------------- */
.navlinks a{ transition:color var(--dur-sm) var(--ease-out-quart); }
.navlinks a::after{ transition:transform 0.42s var(--ease-out-expo); }
.navlinks a:not(.cta):hover{ color:var(--paper); }
.navlinks a.cta{
  position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--dur-sm) ease, box-shadow var(--dur-md) var(--ease-out-quart), transform var(--dur-sm) var(--ease-out-quart);
}
.navlinks a.cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--red-bright);
  transform:scaleX(0); transform-origin:0 50%; transition:transform 0.45s var(--ease-out-expo);
}
.navlinks a.cta:hover{ color:var(--paper); box-shadow:0 8px 24px rgba(255,45,45,0.4); transform:translateY(-1px); }
.navlinks a.cta:hover::before{ transform:scaleX(1); }

.navdrop-menu{
  transition:opacity 0.3s var(--ease-out-quart), transform 0.36s var(--ease-out-expo), visibility 0.3s;
  transform:translateY(-10px) scale(0.985); transform-origin:top left;
  box-shadow:var(--shadow-lg);
}
.navdrop.open .navdrop-menu{ transform:translateY(0) scale(1); }
.navdrop-menu a{ position:relative; }
.navdrop-menu a::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--red-bright);
  transform:scaleY(0); transform-origin:50% 0; transition:transform var(--dur-sm) var(--ease-out-expo);
}
.navdrop-menu a:hover::before, .navdrop-menu a.active::before{ transform:scaleY(1); }
.navdrop-caret{ transition:color var(--dur-sm) ease, transform 0.4s var(--ease-out-expo); }

/* mobile drawer links stagger in behind the panel */
@media (max-width:1080px){
  .navlinks > a, .navlinks > .navdrop{
    opacity:0; transform:translateX(24px);
    transition:opacity 0.4s var(--ease-out-quart), transform 0.5s var(--ease-out-expo);
  }
  .navlinks.open > a, .navlinks.open > .navdrop{ opacity:1; transform:none; }
  .navlinks.open > *:nth-child(1){ transition-delay:0.10s; }
  .navlinks.open > *:nth-child(2){ transition-delay:0.15s; }
  .navlinks.open > *:nth-child(3){ transition-delay:0.20s; }
  .navlinks.open > *:nth-child(4){ transition-delay:0.25s; }
  .navlinks.open > *:nth-child(5){ transition-delay:0.30s; }
  .navlinks.open > *:nth-child(6){ transition-delay:0.35s; }
  .navlinks.open > *:nth-child(7){ transition-delay:0.40s; }
  .navlinks.open > *:nth-child(8){ transition-delay:0.45s; }
  html:not(.js) .navlinks > a, html:not(.js) .navlinks > .navdrop{ opacity:1; transform:none; }

  /* the drawer's submenu is inline, not a floating panel — drop the
     desktop popover treatment so no card appears behind it */
  .navdrop-menu, .navdrop.open .navdrop-menu{
    box-shadow:none; transform:none; background:transparent;
  }
}
.navtoggle{ transition:transform var(--dur-sm) var(--ease-spring), color var(--dur-sm) ease; }
.navtoggle:hover{ color:var(--red-bright); transform:scale(1.12); }
.navtoggle[aria-expanded="true"]{ transform:rotate(90deg); color:var(--red-bright); }

/* --------------------------------------------------------------------------
   10. Imagery
   -------------------------------------------------------------------------- */
.photo-strip figure{
  transition:transform var(--dur-md) var(--ease-out-quart),
             border-color var(--dur-sm) var(--ease-out-quart),
             box-shadow var(--dur-md) var(--ease-out-quart);
}
.photo-strip figure:hover{ transform:translateY(-5px); border-color:rgba(255,45,45,0.4); box-shadow:var(--shadow-md); }
.photo-strip img{ transition:transform 0.9s var(--ease-out-expo), filter var(--dur-md) ease; }
.photo-strip figure:hover img{ transform:scale(1.07); filter:saturate(1.1); }
.photo-strip figcaption{ transition:color var(--dur-sm) ease; }
.photo-strip figure:hover figcaption{ color:var(--paper-dim); }

.gallery-art{ transition:transform 0.75s var(--ease-out-expo), filter var(--dur-md) ease; }
.gallery-tile:hover .gallery-art{ transform:scale(1.08); filter:saturate(1.12) brightness(1.05); }
.gallery-tile{ transition:box-shadow var(--dur-md) var(--ease-out-quart), border-color var(--dur-sm) ease; }
.gallery-tile:hover{ box-shadow:0 16px 40px rgba(0,0,0,0.55); border-color:rgba(255,45,45,0.45); }
.gallery-cap{ transition:opacity 0.35s var(--ease-out-quart), transform 0.45s var(--ease-out-expo); }

.employee-card{ transition:transform var(--dur-md) var(--ease-out-quart), border-color var(--dur-sm) ease, box-shadow var(--dur-md) ease; }
.employee-card:hover{ transform:translateY(-5px); border-color:rgba(255,45,45,0.4); box-shadow:var(--shadow-md); }
.employee-photo img{ transition:transform 0.8s var(--ease-out-expo); }
.employee-card:hover .employee-photo img{ transform:scale(1.06); }

.panel-photo img{ transition:transform 0.9s var(--ease-out-expo); }
.panel:hover .panel-photo img{ transform:scale(1.05); }
.panel{ transition:border-color var(--dur-sm) ease, box-shadow var(--dur-md) var(--ease-out-quart); }
.panel:hover{ border-color:rgba(255,45,45,0.3); box-shadow:var(--shadow-lg); }

/* --------------------------------------------------------------------------
   11. Disclosure panels — height-agnostic open/close
   grid-template-rows animates to the content's real height, so long entries
   can't be clipped the way a fixed max-height clips them.
   -------------------------------------------------------------------------- */
/* Disclosure panels keep the max-height technique (these children carry their
   own padding, which leaks out of an fr-sized track). Easing is upgraded and
   the ceilings are raised well clear of the tallest real entry. */
.staff-bio, .leader-contact, .faq-a, .fleet-detail{
  transition:max-height 0.45s var(--ease-out-expo),
             margin 0.45s var(--ease-out-expo),
             padding 0.45s var(--ease-out-expo);
}
.staff-card.open .staff-bio{ max-height:420px; }
.leader-card.open .leader-contact{ max-height:340px; }
.leader-card-featured.open .leader-contact{ max-height:260px; }
.faq-item.open .faq-a{ max-height:520px; }
.fleet-card.open .fleet-detail{ max-height:300px; }
.faq-q{ transition:background var(--dur-sm) ease, color var(--dur-sm) ease; }
.faq-q:hover{ background:rgba(255,45,45,0.05); }
.faq-item.open .faq-q{ color:var(--red-bright); }
.faq-icon, .leader-toggle-icon{ transition:transform 0.45s var(--ease-spring), border-color var(--dur-sm) ease; }

/* --------------------------------------------------------------------------
   12. News list
   -------------------------------------------------------------------------- */
.news-item{
  transition:padding var(--dur-sm) var(--ease-out-quart),
             border-color var(--dur-sm) ease,
             background var(--dur-sm) ease;
}
.news-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(255,45,45,0.12), transparent);
  transition:width 0.5s var(--ease-out-expo); pointer-events:none;
}
.news-item{ position:relative; overflow:hidden; }
.news-item:hover::before{ width:100%; }
.news-item:hover{ padding-left:26px; }
.news-date{ font-variant-numeric:tabular-nums; }
.news-item h4{ transition:color var(--dur-sm) ease; }
.news-item:hover h4{ color:var(--red-bright); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
input, select, textarea{
  transition:border-color var(--dur-sm) ease, background var(--dur-sm) ease, box-shadow var(--dur-sm) ease;
}
input:hover, select:hover, textarea:hover{ border-color:rgba(250,247,242,0.28); }
input:focus, select:focus, textarea:focus{ background:var(--black-3); box-shadow:0 0 0 3px rgba(255,45,45,0.12); }
label{ transition:color var(--dur-sm) ease; }
form > div:focus-within label, .form-row > div:focus-within label{ color:var(--red-bright); }

/* --------------------------------------------------------------------------
   14. Filter tabs
   -------------------------------------------------------------------------- */
.filter-tabs button{
  position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--dur-sm) ease, border-color var(--dur-sm) ease, transform var(--dur-sm) var(--ease-out-quart);
}
.filter-tabs button::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--red);
  transform:scaleY(0); transform-origin:50% 100%; transition:transform 0.4s var(--ease-out-expo);
}
.filter-tabs button:hover::before{ transform:scaleY(1); }
.filter-tabs button:hover{ color:var(--paper); border-color:var(--red); transform:translateY(-2px); }
.filter-tabs button.active{ box-shadow:0 6px 20px rgba(220,16,35,0.35); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.foot-links a{ position:relative; transition:color var(--dur-sm) ease; }
.foot-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:var(--red-bright); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 0.38s var(--ease-out-expo);
}
.foot-links a:hover::after{ transform:scaleX(1); }
.footer-patch{ transition:opacity 1.4s var(--ease-out-quart), transform 1.4s var(--ease-out-quart); }
footer:hover .footer-patch{ opacity:0.1; transform:translateY(-50%) rotate(4deg); }
footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--red) 25%, var(--red) 75%, transparent);
  opacity:0.5;
}

/* --------------------------------------------------------------------------
   16. Diagonal hazard stripe — slow directional crawl
   -------------------------------------------------------------------------- */
.stripe{ background-size:45.26px 45.26px; animation:stripeCrawl 3.4s linear infinite; }
@keyframes stripeCrawl{ from{ background-position:0 0; } to{ background-position:45.26px 0; } }

/* --------------------------------------------------------------------------
   17. Back-to-top control (injected by main.js)
   -------------------------------------------------------------------------- */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:110;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(22,20,19,0.9); border:1px solid var(--line); color:var(--paper);
  cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(0.9);
  transition:opacity var(--dur-md) var(--ease-out-quart), transform var(--dur-md) var(--ease-spring),
             visibility var(--dur-md), border-color var(--dur-sm) ease, background var(--dur-sm) ease;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); }
.to-top svg{ width:17px; height:17px; }
@media (max-width:680px){ .to-top{ display:none; } }

/* --------------------------------------------------------------------------
   18. Scrollbar
   -------------------------------------------------------------------------- */
html{ scrollbar-color:var(--red) var(--black-2); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--black-2); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--red), #8f0a17);
  border:2px solid var(--black-2); border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, var(--red-bright), var(--red)); }

/* --------------------------------------------------------------------------
   19. Misc finishing
   -------------------------------------------------------------------------- */
.crumbs a{ position:relative; transition:color var(--dur-sm) ease; }
.crumbs a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:var(--red-bright); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 0.35s var(--ease-out-expo);
}
.crumbs a:hover::after{ transform:scaleX(1); }

.pagehead{ position:relative; overflow:hidden; }
.pagehead::after{
  content:""; position:absolute; right:-90px; top:50%; transform:translateY(-50%);
  width:320px; height:320px; pointer-events:none;
  background:radial-gradient(circle, rgba(220,16,35,0.16) 0%, transparent 68%);
}

.career-req, .panel, .about-card, .career-card, .svc-card, .staff-card, .fleet-card{
  box-shadow:var(--shadow-sm);
}

a.news-item, .path{ transition:transform var(--dur-md) var(--ease-out-quart), background var(--dur-sm) ease; }
.path:hover{ background:var(--black-3); }

/* --------------------------------------------------------------------------
   20. Apparatus / placeholder line-art icons
   These symbols were drawn as outlines — several carry fill="none",
   stroke-width and stroke-linecap — but no stroke paint was ever set, so
   they rendered as solid black blobs (or vanished). Paint them here.
   The avatar symbol is deliberately excluded: it is a filled glyph.
   -------------------------------------------------------------------------- */
.fleet-art svg, .gallery-art svg, .lightbox-art svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   21. Magnetic controls
   main.js writes --mag-x / --mag-y; composing them here (rather than letting
   JS overwrite `transform`) keeps the hover lift and active press intact.
   -------------------------------------------------------------------------- */
.btn.solid, .navlinks a.cta, button.submit{
  transform:translate(var(--mag-x, 0px), var(--mag-y, 0px));
}
.btn.solid:hover{ transform:translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 2px)); }
.navlinks a.cta:hover{ transform:translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 1px)); }
button.submit:hover{ transform:translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 2px)); }
.btn.solid:active, button.submit:active{ transform:translate(var(--mag-x, 0px), var(--mag-y, 0px)) scale(0.985); }
.to-top.show{ transform:translate(var(--mag-x, 0px), var(--mag-y, 0px)); }
.to-top.show:hover{ transform:translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 3px)); }

/* --------------------------------------------------------------------------
   22. Recruiting components (careers page)
   -------------------------------------------------------------------------- */

/* editor callout — clearly not public-facing copy */
.pending-note{
  border:1px dashed var(--amber); border-left:4px solid var(--amber);
  background:rgba(255,176,32,0.07); padding:20px 24px; margin:0 0 40px;
  max-width:760px;
}
.pending-note .tag{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--amber); font-weight:700;
}
.pending-note p{ color:var(--paper-dim); font-size:0.9rem; line-height:1.65; margin-top:10px; }
.pending-note ul{ margin-top:12px; display:grid; gap:7px; }
.pending-note li{ color:var(--steel); font-size:0.88rem; padding-left:20px; position:relative; }
.pending-note li::before{ content:"→"; position:absolute; left:0; color:var(--amber); }

/* headline facts band — the numbers a candidate scans for first */
.fact-band{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:34px;
}
@media (max-width:860px){ .fact-band{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fact-band{ grid-template-columns:1fr; } }
.fact-cell{ background:var(--black-2); padding:28px 24px; border-top:3px solid var(--amber); }
.fact-cell .k{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--steel-dim);
}
.fact-cell .v{
  font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:var(--paper);
  margin-top:10px; line-height:1.1; letter-spacing:-0.01em;
}
.fact-cell .sub{ color:var(--steel); font-size:0.85rem; margin-top:8px; line-height:1.55; }

/* ---------- recruitment banner (careers page) ---------- */
.recruit-banner{ position:relative; overflow:hidden; }
.recruit-bg{ position:absolute; inset:0; z-index:0; }
.recruit-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.recruit-overlay{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(10,9,8,0.97) 0%, rgba(10,9,8,0.88) 34%, rgba(10,9,8,0.58) 66%, rgba(10,9,8,0.22) 100%);
}
.recruit-content{ position:relative; z-index:1; }
.recruit-inner{ max-width:640px; padding:70px 0; }
.recruit-badge{
  display:inline-block; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--black-2); background:var(--amber); padding:7px 16px; font-weight:700;
}
.recruit-inner h2{ margin-top:20px; font-size:clamp(2rem,4.4vw,3.1rem); color:var(--paper); line-height:1.1; }
.recruit-perks{ margin-top:34px; display:grid; gap:10px; }
.recruit-perks li{ color:var(--paper-dim); font-size:0.92rem; padding-left:24px; position:relative; }
.recruit-perks li::before{ content:"✓"; position:absolute; left:0; color:var(--amber); font-weight:700; }
.recruit-inner .btn{ margin-top:36px; }
@media (max-width:700px){
  .recruit-overlay{ background:linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.95) 58%, rgba(10,9,8,0.98) 100%); }
  .recruit-bg img{ object-position:center 20%; }
  .recruit-inner{ padding:52px 0; max-width:100%; }
}

/* eligibility self-check */
.qualify{
  background:var(--black-2); border:1px solid var(--line); border-top:3px solid var(--red);
  padding:34px 34px 30px; max-width:760px; margin-top:34px;
}
@media (max-width:600px){ .qualify{ padding:26px 22px 24px; } }
.qualify h3{ font-size:1.25rem; color:var(--paper); }
.qualify .intro{ color:var(--steel); font-size:0.94rem; margin-top:10px; }
.q-item{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.q-item:first-of-type{ border-top:none; padding-top:14px; }
.q-item .q{ color:var(--paper); font-size:0.99rem; line-height:1.5; }
.q-opts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.q-opts button{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--steel);
  padding:0 20px; min-height:46px; cursor:pointer;
  transition:color var(--dur-sm) ease, border-color var(--dur-sm) ease, background var(--dur-sm) ease, transform var(--dur-sm) var(--ease-out-quart);
}
/* comfortable thumb targets — this page is mostly read on a phone */
@media (max-width:600px){
  .q-opts{ gap:9px; }
  .q-opts button{ flex:1 1 100%; min-height:52px; padding:0 18px; }
}
.q-opts button:hover{ border-color:var(--red-bright); color:var(--paper); transform:translateY(-2px); }
.q-opts button[aria-pressed="true"]{ background:var(--red); border-color:var(--red); color:var(--paper); }
.q-opts button[aria-pressed="true"].warn{ background:var(--amber); border-color:var(--amber); color:var(--black); }
.q-opts button[aria-pressed="true"].no{ background:var(--black-3); border-color:var(--steel-dim); color:var(--paper); }

.q-result{
  margin-top:28px; padding:24px 26px; border:1px solid var(--line); border-left:4px solid var(--steel-dim);
  background:var(--black-3);
}
.q-result[data-state="eligible"]{ border-left-color:#3ea653; }
.q-result[data-state="path"]{ border-left-color:var(--amber); }
.q-result[data-state="blocked"]{ border-left-color:var(--red-bright); }
.q-result .rtitle{
  font-family:var(--font-display); text-transform:uppercase; font-size:1.15rem;
  color:var(--paper); letter-spacing:0.01em;
}
.q-result p{ color:var(--steel); font-size:0.92rem; margin-top:10px; line-height:1.65; }
.q-result ul{ margin-top:12px; display:grid; gap:8px; }
.q-result li{ color:var(--steel); font-size:0.89rem; padding-left:20px; position:relative; }
.q-result li::before{ content:"—"; position:absolute; left:0; color:var(--red-bright); }
.q-result .btn{ margin-top:20px; }
.q-progress{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--steel-dim); margin-top:20px;
}

/* hiring process ladder */
.steps{ margin-top:34px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); max-width:820px; }
.step{ background:var(--black-2); padding:24px 28px; display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start; }
@media (max-width:560px){ .step{ grid-template-columns:1fr; gap:8px; } }
.step .n{
  font-family:var(--font-mono); font-weight:700; font-size:1.5rem; color:var(--red);
  line-height:1; font-variant-numeric:tabular-nums;
}
.step h4{ font-family:var(--font-display); text-transform:uppercase; font-size:1.02rem; color:var(--paper); letter-spacing:0.01em; }
.step p{ color:var(--steel); font-size:0.9rem; margin-top:7px; line-height:1.6; }
/* keep the film grain from sitting on top of interactive chrome */
body::after{ z-index:98; }

/* respect reduced motion for the decorative loops added above */
@media (prefers-reduced-motion: reduce){
  .hero::before, .stripe{ animation:none !important; }
  .reveal, .reveal-stagger > *, .hero h1 .word-i, .hero .hero-enter{ filter:none !important; }
}

/* ---------- sitewide search ---------- */
.nav-search-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none; background:none; border:1px solid transparent; border-radius:50%;
  color:var(--paper-dim); cursor:pointer; padding:0; transition:color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.nav-search-btn:hover, .nav-search-btn:focus-visible{ color:var(--red-bright); border-color:var(--line); transform:scale(1.06); }
.nav-search-btn svg{ display:block; }
@media (max-width:1080px){
  .nav-search-btn{ width:auto; height:auto; }
}

body.search-open{ overflow:hidden; }

.site-search-overlay{
  position:fixed; inset:0; z-index:500; display:flex; align-items:flex-start; justify-content:center;
  padding:min(14vh,120px) 20px 40px; background:rgba(10,9,8,0.85); backdrop-filter:blur(4px);
}
.site-search-overlay[hidden]{ display:none; }
.site-search-modal{
  width:100%; max-width:620px; max-height:70vh; display:flex; flex-direction:column;
  background:var(--black-2); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  animation:siteSearchIn 0.22s var(--ease-out-quart);
}
@keyframes siteSearchIn{
  from{ opacity:0; transform:translateY(-14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .site-search-modal{ animation:none; }
}
.site-search-box{ position:relative; flex:none; border-bottom:1px solid var(--line); }
.site-search-icon{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--steel-dim); pointer-events:none; }
.site-search-box input[type="search"]{
  width:100%; background:transparent; border:none; color:var(--paper);
  padding:20px 52px 20px 52px; font-family:var(--font-body); font-size:1.05rem;
}
.site-search-box input[type="search"]:focus{ outline:none; }
.site-search-box input[type="search"]::-webkit-search-cancel-button{ filter:invert(0.6); }
.site-search-close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--steel); font-size:1.1rem; cursor:pointer; transition:color 0.2s ease;
}
.site-search-close:hover, .site-search-close:focus-visible{ color:var(--red-bright); }
.site-search-results{ overflow-y:auto; padding:10px 0; }
.site-search-section{
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--steel-dim); padding:14px 24px 6px;
}
.site-search-result{
  display:block; padding:10px 24px; transition:background 0.15s ease;
}
.site-search-result:hover, .site-search-result:focus-visible, .site-search-result.active{ background:rgba(220,16,35,0.12); }
.site-search-title{ color:var(--paper); font-family:var(--font-display); font-size:1rem; letter-spacing:0.01em; }
.site-search-title mark{ background:none; color:var(--red-bright); }
.site-search-desc{ color:var(--steel); font-size:0.84rem; margin-top:3px; line-height:1.5; }
.site-search-empty{ color:var(--steel); font-size:0.92rem; padding:32px 24px; text-align:center; }
.site-search-hint{ color:var(--steel-dim); font-size:0.8rem; padding:18px 24px; }
@media (max-width:560px){
  .site-search-overlay{ padding:8vh 12px 24px; }
  .site-search-box input[type="search"]{ font-size:0.98rem; padding:17px 48px 17px 46px; }
  .site-search-icon{ left:14px; }
}

/* ---------- printable quick-reference page ---------- */
.print-header, .print-footer{ display:none; }

.qr-section{ padding:70px 0 90px; }
.qr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.qr-card{ background:var(--black-2); padding:32px 30px; }
.qr-card-wide{ grid-column:1 / -1; }
.qr-h{
  font-family:var(--font-display); text-transform:uppercase; font-size:1.15rem; letter-spacing:0.01em;
  color:var(--paper); margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--red);
}
.qr-numbers{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
.qr-numbers li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:12px; }
.qr-num-label{ color:var(--steel); font-size:0.9rem; }
.qr-num-val{ font-family:var(--font-mono); font-weight:700; color:var(--red-bright); font-size:1.05rem; white-space:nowrap; }
.qr-num-big{ font-size:1.6rem; }
.qr-note{ color:var(--steel-dim); font-size:0.85rem; line-height:1.6; margin-top:6px; }
.qr-note a{ color:var(--red-bright); text-decoration:underline; }
.qr-checklist{ color:var(--steel); font-size:0.94rem; line-height:1.75; padding-left:20px; margin-bottom:8px; }
.qr-checklist li{ margin-bottom:6px; }
.qr-stations{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin-bottom:16px; }
.qr-station{ display:flex; gap:12px; align-items:flex-start; }
.qr-station-tag{
  flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:var(--black-3); border:1px solid var(--line); color:var(--red-bright);
  font-family:var(--font-mono); font-weight:700; font-size:0.72rem;
}
.qr-station-name{ color:var(--paper); font-size:0.92rem; font-weight:600; }
.qr-station-name em{ color:var(--red-bright); font-style:normal; font-size:0.78rem; font-weight:700; }
.qr-station-addr{ color:var(--steel); font-size:0.84rem; margin-top:2px; }
.qr-checklist-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.qr-checkbox-list{ list-style:none; padding-left:0; }
.qr-checkbox-list li{ display:flex; gap:10px; align-items:flex-start; }
.qr-box{ flex:none; color:var(--steel-dim); font-size:1.1rem; line-height:1; margin-top:1px; }
@media screen and (max-width:900px){
  .qr-grid{ grid-template-columns:1fr; }
  .qr-stations, .qr-checklist-grid{ grid-template-columns:1fr; }
}

@media print{
  .noprint, .scroll-progress, .to-top, .cursor-trail{ display:none !important; }
  body::after, body::before{ display:none !important; }
  html, body{ background:#fff !important; }
  body{ color:#111 !important; font-size:13px; }
  a{ color:#111 !important; text-decoration:underline; }
  .pagehead{ display:none !important; }
  main{ padding:0 !important; }
  .print-header{
    display:flex !important; align-items:center; gap:12px; padding:0 0 10px; margin:0 0 12px;
    border-bottom:3px solid #111;
  }
  .print-patch{ width:40px; height:40px; object-fit:contain; }
  .print-title{ font-family:var(--font-display); font-size:1.05rem; text-transform:uppercase; color:#111; }
  .print-sub{ font-family:var(--font-mono); font-size:0.62rem; color:#444; margin-top:2px; }
  .qr-section{ padding:0; }
  .wrap{ max-width:100%; padding:0; }
  .qr-grid{ background:#111; border:1px solid #111; grid-template-columns:1fr 1fr; }
  .qr-card{ background:#fff; padding:8px 12px; }
  .qr-card:not(.qr-card-wide){ break-inside:avoid; }
  .qr-h{ color:#111; border-bottom:1.5px solid #111; margin-bottom:6px; padding-bottom:4px; font-size:0.82rem; }
  .qr-numbers{ gap:5px; margin-bottom:6px; }
  .qr-numbers li{ padding-bottom:4px; }
  .qr-num-label{ color:#333; font-size:0.72rem; }
  .qr-num-val{ color:#111; font-size:0.78rem; }
  .qr-num-big{ font-size:0.98rem; }
  .qr-note{ color:#333; font-size:0.66rem; margin-top:2px; }
  .qr-note a{ color:#111; }
  .qr-checklist{ color:#111; font-size:0.72rem; line-height:1.35; margin-bottom:2px; padding-left:14px; }
  .qr-checklist li{ margin-bottom:2px; break-inside:avoid; }
  .qr-stations{ grid-template-columns:1fr 1fr 1fr; gap:4px 14px; margin-bottom:6px; }
  .qr-station{ gap:6px; break-inside:avoid; }
  .qr-station-tag{ background:#eee; border-color:#999; color:#111; width:18px; height:18px; font-size:0.52rem; }
  .qr-station-name{ color:#111; font-size:0.66rem; line-height:1.25; }
  .qr-station-name em{ color:#111; font-size:0.58rem; }
  .qr-station-addr{ color:#333; font-size:0.6rem; margin-top:0; line-height:1.25; }
  .qr-checklist-grid{ gap:0 14px; }
  .qr-checkbox-list{ font-size:0.7rem; }
  .qr-checkbox-list li{ margin-bottom:2px; break-inside:avoid; }
  .qr-box{ color:#111; font-size:0.85rem; }
  .print-footer{
    display:block !important; margin-top:8px; padding-top:6px; border-top:1px solid #999;
    font-family:var(--font-mono); font-size:0.58rem; color:#444; text-align:center;
  }
  @page{ margin:0.45in; }
}