/* ======================================================================
   Seawolf — merged visual system
   deck palette · editorial typography · flyer voice on sales pages
   ====================================================================== */

:root{
  /* Brand (from investor deck) */
  --navy:        #1e3a5f;
  --navy-deep:   #0f2540;
  --teal:        #4a9d9e;
  --teal-bright: #00a3a3;
  --red:         #e53935;
  --orange:      #d4812a;

  /* Text */
  --ink:    #0d1116;
  --ink-2:  #3a4b5e;
  --ink-3:  #64748b;
  --muted:  #94a3b8;

  /* Backgrounds */
  --white:       #ffffff;
  --paper:       #f8fafc;
  --paper-warm:  #eef2f6;
  --sand:        #cbd5e1;

  /* Rules */
  --rule:    #e2e8f0;
  --rule-2:  #cbd5e1;

  /* Brand emphasis */
  --highlight: #fff27a;

  /* Type */
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --tight: "Inter Tight", "Inter", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --type:  "Special Elite", "Courier Prime", "Courier New", monospace;

  /* Layout */
  --pad-x: clamp(24px, 5vw, 64px);
  --max:   1240px;
}

*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; padding: 0 }

body{
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100% }
a { color: var(--ink); text-decoration: none }
a:hover { color: var(--teal-bright) }

/* ===================== layout helpers ===================== */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section{ padding: clamp(48px, 7vw, 88px) 0 }
.section--tight{ padding: clamp(36px, 5vw, 64px) 0 }
.section--xl{ padding: clamp(72px, 10vw, 120px) 0 }

.rule{ height: 1px; background: var(--rule); border: 0; margin: 0 }

/* ===================== type ===================== */
.display{
  font-family: var(--tight);
  font-weight: 800;
  font-size: clamp(28px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  padding-bottom: 0.04em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.display em,
.display .ital{
  color: var(--teal-bright);
  font-style: normal;
  font-weight: inherit;
}

.display-2{
  font-family: var(--tight);
  font-weight: 800;
  font-size: clamp(24px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  padding-bottom: 0.04em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.display-2 em{
  color: var(--teal-bright);
  font-style: normal;
  font-weight: inherit;
}

.h1{
  font-family: var(--tight);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.h1 em{
  color: var(--teal-bright);
  font-style: normal;
  font-weight: inherit;
}

.h2{
  font-family: var(--tight);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.h2 em{
  color: var(--teal-bright);
  font-style: normal;
  font-weight: inherit;
}

.h3{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}

.lede{
  font-family: var(--sans);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 18px 0 0;
}

.body{
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}
.body--lg{ font-size: 19px; line-height: 1.6 }

.eyebrow{
  display: inline-flex;
  align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.eyebrow::before{
  content:"";
  width: 28px; height: 1px;
  background: var(--teal);
}

.eyebrow--urgent{
  color: var(--teal-bright);
  font-weight: 500;
}
.eyebrow--urgent::before{
  content: "●";
  background: none;
  width: auto; height: auto;
  font-size: 10px;
  color: var(--teal-bright);
}

.caption{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ===================== header ===================== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,250,252,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
}
.brand{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.brand-mark{
  width: 40px; height: 40px;
  flex: none;
}
.brand-name{ font-family: var(--sans) }

.nav-links{
  display: flex; align-items: center; gap: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-links a{ color: var(--ink-2); position: relative; padding: 6px 0 }
.nav-links a:hover{ color: var(--ink) }
.nav-links a.current{ color: var(--ink) }
.nav-links a.current::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--teal-bright);
}
.nav-cta{
  background: var(--navy); color: var(--paper) !important;
  padding: 10px 18px !important;
  border-radius: 999px;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  white-space: nowrap;
}
.nav-cta:hover{ background: var(--teal-bright); color: var(--white) !important }
.nav-cta::after{ display: none !important }
.nav-cta-short{ display: none }

@media (max-width: 720px){
  .nav-hide-mobile { display: none }
  .nav-links { gap: 14px }
  .brand-text { display: none }
  .brand-mark { width: 32px; height: 32px }
  .nav-cta { padding: 8px 14px !important; font-size: 10px !important }
}

/* ===================== hero ===================== */
.hero{
  padding: clamp(20px, 3vw, 40px) 0 clamp(16px, 2.5vw, 28px);
  position: relative;
}
.hero-inner{ max-width: 1100px }
.hero .accent{ color: var(--teal-bright); font-style: normal; font-weight: inherit }
.hero-sub{
  font-family: var(--sans);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 32px 0 0;
}
.hero-sub strong{ font-weight: 600; color: var(--ink) }
.hero-cta{
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-top: 36px;
}

.hero-narrow .hero-inner{ max-width: 720px }
.hero-centered{ text-align: center }
.hero-centered .hero-inner{ margin: 0 auto }
.hero-centered .hero-sub{ margin-left: auto; margin-right: auto }
.hero-centered .hero-cta{ justify-content: center }

.hero-terms{
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.hero-meta{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px }

/* ===================== buttons ===================== */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-primary{ background: var(--navy); color: var(--paper) !important }
.btn-primary:hover{ background: var(--teal-bright); color: var(--white) !important }
.btn-secondary{ background: transparent; color: var(--ink) !important; border-color: var(--ink) }
.btn-secondary:hover{ background: var(--ink); color: var(--paper) !important }
.btn-arrow{ display: inline-block; transition: transform 160ms ease }
.btn:hover .btn-arrow{ transform: translateX(3px) }
.btn-ghost{ background: transparent; color: var(--ink) !important; padding: 14px 4px }
.btn-ghost:hover{ color: var(--teal-bright) !important }

/* ===================== built-by band ===================== */
.builtby{
  background: var(--paper-warm);
  color: var(--ink);
  padding: 16px 0;
  text-align: center;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.builtby::before, .builtby::after{
  content:""; position: absolute;
  left: 0; right: 0; height: 1px;
  background: var(--rule);
  pointer-events: none;
}
.builtby::before{ top: 4px }
.builtby::after{ bottom: 4px }
.builtby-text{
  font-family: var(--tight);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  margin: 0;
  letter-spacing: -0.015em;
}
.builtby-text em{
  color: var(--teal-bright);
  font-style: normal;
  font-weight: inherit;
}

/* ===================== paths / two cards on home ===================== */
.paths-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 820px){ .paths-grid{ grid-template-columns: 1fr } }

.path-card{
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  color: var(--ink) !important;
  position: relative;
}
.path-card:hover{
  transform: translateY(-2px);
  border-color: var(--navy);
  box-shadow: 0 12px 36px rgba(30, 58, 95, 0.08);
}
.path-card-tier{
  background: var(--navy);
  color: var(--paper);
  padding: 24px 32px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.path-card-tier-mark{
  font-family: var(--tight);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.path-card-status{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-bright);
}
.path-card-status .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 0 rgba(0,163,163,0.55);
  animation: pulse 2s infinite;
}
.path-card-status.muted{ color: rgba(248,250,252,0.55) }
.path-card-status.muted .dot{ background: rgba(248,250,252,0.4); animation: none; box-shadow: none }

@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(0,163,163,0.55) }
  100%{ box-shadow: 0 0 0 10px rgba(0,163,163,0) }
}

.path-card-body{ padding: 28px 32px 32px; display: flex; flex-direction: column; flex: 1 }
.path-card-tag{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 14px;
}
.path-card .product-name,
.product-mark{
  font-family: var(--tight);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 0 6px;
  padding-bottom: 0.04em;
}
.path-card h3{
  font-family: var(--tight);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.path-card .summary{
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 24px;
  flex: 1;
}
.specs{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  margin-bottom: 22px;
}
.spec-label{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.spec-value{
  font-family: var(--tight); font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em;
  color: var(--ink);
}
.path-cta{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 14px 22px;
  background: var(--navy);
  color: var(--paper);
  border-radius: 999px;
  margin-top: auto;
  align-self: flex-start;
  transition: background 160ms ease, transform 160ms ease;
}
.path-cta-arrow{ display: inline-block; transition: transform 200ms ease }
.path-card:hover .path-cta-arrow{ transform: translateX(4px) }
.path-card:hover .path-cta{ background: var(--teal-bright); color: var(--white) }

/* ===================== old-way / seawolf-way comparison (sport page) ===================== */
.compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 820px){ .compare{ grid-template-columns: 1fr } }

.compare-col{
  padding: 22px clamp(20px, 2.5vw, 28px);
}
.compare-col--old{
  background: var(--paper-warm);
  color: var(--ink);
}
.compare-col--new{
  background: var(--navy);
  color: var(--paper);
}
.compare-eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.compare-col--old .compare-eyebrow{ color: var(--ink-3) }
.compare-col--new .compare-eyebrow{ color: var(--teal-bright) }
.compare-title{
  font-family: var(--tight);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.compare-col--old .compare-title{ color: var(--ink) }
.compare-col--new .compare-title{ color: var(--paper) }
.compare-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.compare-list li{
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
}
.compare-list li::before{
  content: "—";
  display: block;
  margin-top: 2px;
}
.compare-col--old .compare-list li{ color: var(--ink-2); border-bottom: 1px solid var(--rule) }
.compare-col--old .compare-list li::before{ color: var(--ink-3) }
.compare-col--new .compare-list li{ color: rgba(248,250,252,0.78); border-bottom: 1px solid rgba(248,250,252,0.14) }
.compare-col--new .compare-list li::before{ color: var(--teal-bright) }
.compare-list li:last-child{ border-bottom: 0 }
.compare-list strong{
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.compare-col--old .compare-list strong{ color: var(--ink) }
.compare-col--new .compare-list strong{ color: var(--paper) }

/* ===================== options grid (3-up tear-down, commercial) ===================== */
.options{
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--navy);
}
@media (max-width: 820px){ .options{ grid-template-columns: 1fr } }
.option{
  padding: 36px 28px 36px 0;
  border-right: 1px solid var(--rule);
}
.option:last-child{ border-right: 0; padding-right: 0 }
.option:not(:first-child){ padding-left: 28px }
@media (max-width: 820px){
  .option{ border-right: 0; border-bottom: 1px solid var(--rule); padding: 28px 0 !important }
  .option:last-child{ border-bottom: 0 }
}
.option-cost{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.option-name{
  font-family: var(--tight);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.option-desc{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 36ch;
}

/* does section (how it works on sport/commercial) */
.does-section{
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.section-eyebrow::before{
  content:""; width: 28px; height: 1px; background: var(--teal);
}
.section-title{ margin: 0 0 18px }
.section-lede{
  font-family: var(--sans);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}

/* flow */
/* box grid (what's included) */
.box-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 720px){ .box-grid{ grid-template-columns: 1fr } }
.box-item{
  padding: 14px 24px 14px 0;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  align-items: start;
}
.box-item:nth-child(2n){ border-right: 0; padding-right: 0; padding-left: 24px }
.box-item:nth-last-child(-n+2){ border-bottom: 0 }
@media (max-width: 720px){
  .box-item{ border-right: 0; padding: 20px 0 !important }
  .box-item:nth-last-child(-n+2){ border-bottom: 1px solid var(--rule) }
  .box-item:last-child{ border-bottom: 0 }
}
.box-check{
  font-family: var(--mono); font-weight: 600;
  font-size: 14px;
  color: var(--teal-bright);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--teal-bright);
  border-radius: 50%;
}
.box-text{
  font-family: var(--sans);
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
}
.box-text strong{ color: var(--ink); font-weight: 600 }

/* ===================== reserve / talk dark CTA bands ===================== */
.reserve, .talk{
  background: var(--navy);
  color: var(--paper);
}
.reserve-inner, .talk-inner{ max-width: 980px }
.reserve .section-eyebrow,
.talk .section-eyebrow{
  color: rgba(248,250,252,0.55);
}
.reserve .section-eyebrow::before,
.talk .section-eyebrow::before{
  background: var(--teal-bright);
}
.reserve-title, .talk-title{
  font-family: var(--tight); font-weight: 800;
  font-size: clamp(28px, 5vw, 64px);
  overflow-wrap: break-word;
  line-height: 1.08; letter-spacing: -0.03em;
  margin: 0;
  color: var(--paper);
  padding-bottom: 0.04em;
}
.reserve-title em, .reserve-title .ital,
.talk-title em, .talk-title .ital{
  color: var(--teal-bright);
  font-style: normal;
  font-weight: inherit;
}
.reserve-lede, .talk-lede{
  font-family: var(--sans);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: rgba(248,250,252,0.82);
  max-width: 60ch;
  margin: 24px 0 0;
}
.reserve-lede strong, .talk-lede strong{ color: var(--paper); font-weight: 600 }
.reserve .btn-primary,
.talk .btn-primary{
  background: var(--paper); color: var(--navy) !important;
}
.reserve .btn-primary:hover,
.talk .btn-primary:hover{
  background: var(--teal-bright); color: var(--white) !important;
}
.reserve .btn-secondary,
.talk .btn-secondary{
  color: var(--paper) !important; border-color: rgba(248,250,252,0.4);
}
.reserve .btn-secondary:hover,
.talk .btn-secondary:hover{
  background: var(--paper); color: var(--navy) !important; border-color: var(--paper);
}
.reserve-terms{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 48px 0 36px;
  border-top: 1px solid rgba(248,250,252,0.18);
  border-bottom: 1px solid rgba(248,250,252,0.18);
}
.reserve-terms > div{
  padding: 24px 24px 24px 0;
  border-right: 1px solid rgba(248,250,252,0.18);
}
.reserve-terms > div:last-child{ border-right: 0; padding-right: 0 }
.reserve-terms > div:not(:first-child){ padding-left: 24px }
@media (max-width: 720px){
  .reserve-terms{ grid-template-columns: 1fr }
  .reserve-terms > div{ padding: 20px 0 !important; border-right: 0; border-bottom: 1px solid rgba(248,250,252,0.18) }
  .reserve-terms > div:last-child{ border-bottom: 0 }
}
.term-label{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(248,250,252,0.55);
  margin-bottom: 6px;
}
.term-value{
  font-family: var(--tight); font-weight: 800;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--paper);
}
.reserve-fineprint{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(248,250,252,0.55);
  margin: 28px 0 0;
}
.reserve-fineprint a{ color: var(--paper); border-bottom: 1px solid rgba(248,250,252,0.3) }
.reserve-fineprint a:hover{ color: var(--teal-bright); border-color: var(--teal-bright) }

/* benefits row inside reserve / talk sections (3 small benefits) */
.benefits{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid rgba(248,250,252,0.18);
}
@media (max-width: 720px){ .benefits{ grid-template-columns: 1fr } }
.benefit{
  padding: 24px 24px 0 0;
  border-right: 1px solid rgba(248,250,252,0.18);
}
.benefit:last-child{ border-right: 0; padding-right: 0 }
.benefit:not(:first-child){ padding-left: 24px }
@media (max-width: 720px){
  .benefit{ border-right: 0; border-bottom: 1px solid rgba(248,250,252,0.18); padding: 20px 0 !important }
  .benefit:last-child{ border-bottom: 0 }
}
.benefit-label{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 8px;
}
.benefit-text{
  font-family: var(--sans);
  font-size: 14px; line-height: 1.5;
  color: rgba(248,250,252,0.78);
  margin: 0;
}

/* ===================== footer ===================== */
.site-footer{
  background: var(--navy);
  color: rgba(248,250,252,0.78);
  padding: 36px 0 20px;
}
.site-footer .brand{ color: var(--paper) }
/* Footer logo: white variant is loaded directly via src in the HTML */
.footer-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px } .footer-brand{ grid-column: 1 / -1 } }
@media (max-width: 540px){ .footer-grid{ grid-template-columns: 1fr } }
.footer-tagline{
  font-family: var(--sans); font-style: normal;
  font-size: 14px; letter-spacing: -0.005em;
  margin: 12px 0 0;
  color: rgba(248,250,252,0.78);
  max-width: 36ch;
}
.footer-col h4{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 12px; font-weight: 500;
}
.footer-col a{
  display: block;
  font-family: var(--sans); font-size: 14px;
  color: rgba(248,250,252,0.85) !important;
  line-height: 1.9;
}
.footer-col a:hover{ color: var(--teal-bright) !important }
.footer-bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(248,250,252,0.18);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(248,250,252,0.55);
}
.footer-social{
  display: inline-flex; align-items: center;
  color: rgba(248,250,252,0.55);
  transition: color 140ms ease;
}
.footer-social:hover{ color: var(--teal-bright) }
@media (max-width: 540px){ .footer-bottom{ flex-direction: column; gap: 8px } }

/* ===================== terms page ===================== */
.terms{ padding: 48px 0 80px }
.terms-inner{ max-width: 720px }
.terms section{
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.terms section:first-of-type{ border-top: 0; padding-top: 0 }
.terms h2{
  font-family: var(--tight); font-weight: 700; font-style: normal;
  font-size: 22px; letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--navy);
  display: flex; align-items: baseline; gap: 14px;
}
.terms h2::before{
  content: "0" counter(section);
  counter-increment: section;
  font-family: var(--mono); font-style: normal;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--teal-bright); text-transform: uppercase;
  font-weight: 500;
}
.terms{ counter-reset: section }
.terms p{
  font-family: var(--sans);
  font-size: 17px; line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}
.terms p a{
  border-bottom: 1px solid var(--teal-bright);
  color: var(--teal-bright);
}

/* ===================== careers ===================== */
.careers-hero{
  padding: clamp(8px, 1.5vw, 14px) 0 clamp(4px, 0.6vw, 8px);
}
.careers-pivot{
  padding: clamp(8px, 1.5vw, 16px) 0 clamp(20px, 3vw, 32px);
  background: var(--paper);
}
.careers-pivot .display em{ color: var(--teal-bright); font-style: normal; font-weight: inherit }
.careers-pivot-inner{ max-width: 1000px; margin: 0 auto; text-align: center }
.careers-pivot-inner .hero-sub{ margin-left: auto; margin-right: auto }
.careers-pivot-inner .hero-cta{ justify-content: center }

.poem{
  background: var(--navy);
  color: var(--paper);
  padding: clamp(10px, 2vw, 18px) 0 clamp(32px, 5vw, 56px);
  position: relative;
}
.poem-inner{ max-width: 980px; margin: 0 auto }
.poem-meta{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(248,250,252,0.55);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.poem-meta::before{
  content:""; width: 28px; height: 1px; background: var(--teal-bright);
}
.poem-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 5vw, 56px);
  overflow-wrap: break-word;
  line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 8px;
  padding-bottom: 0.05em;
}
.poem-title em{ font-style: italic; color: var(--teal-bright) }
.poem-attr{
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(248,250,252,0.55);
  margin: 0 0 48px;
}
.poem-attr a{ color: rgba(248,250,252,0.85); border-bottom: 1px solid rgba(248,250,252,0.4) }
.poem-attr a:hover{ color: var(--teal-bright); border-color: var(--teal-bright) }
.poem-body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  font-family: var(--type);
  font-size: 17px;
  line-height: 1.8;
  color: rgba(248,250,252,0.92);
  letter-spacing: 0.01em;
}
@media (max-width: 720px){ .poem-body{ grid-template-columns: 1fr; gap: 32px } }
.poem-stanza{ white-space: pre-line; margin: 0 }
.poem-stanza .pull{
  background: linear-gradient(transparent 65%, rgba(0,163,163,0.4) 65%);
  padding: 0 2px;
  color: var(--paper);
}

.signal{
  padding: clamp(32px, 5vw, 56px) 0;
  text-align: center;
}
.signal-inner{ max-width: 880px; margin: 0 auto }
.signal h2{ margin: 0 auto 24px; max-width: 22ch }
.signal h2 em{ color: var(--teal-bright); font-style: normal; font-weight: inherit }
.signal p{
  font-family: var(--sans); font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6; color: var(--ink-2);
  max-width: 56ch; margin: 0 auto 36px;
}
.signal-checks{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  max-width: 820px; margin: 0 auto 48px;
  text-align: left;
}
@media (max-width: 640px){ .signal-checks{ grid-template-columns: 1fr } }
.signal-chk{
  display: flex; align-items: flex-start; gap: 14px;
  font-family: var(--sans); font-size: 16px;
  line-height: 1.5; color: var(--ink-2);
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.signal-chk:last-child{ border-bottom: 1px solid var(--rule) }
.signal-chk.signal-chk--inf{
  grid-column: 1 / -1;
  font-size: 16px;
}
.signal-chk.signal-chk--inf .signal-chk-mark{
  font-size: 18px;
  letter-spacing: 0;
  padding-top: 0;
}
@media (max-width: 640px){
  .signal-chk:last-child{ border-bottom: 1px solid var(--rule) }
}
.signal-chk-mark{
  font-family: var(--mono); font-size: 12px;
  color: var(--teal-bright); padding-top: 3px;
  letter-spacing: 0.1em;
  flex: 0 0 22px;
}

/* Signal: compressed to fit alongside the pivot above the fold */
.signal{ padding: clamp(20px, 3vw, 36px) 0 clamp(8px, 1.5vw, 16px) }
.signal h2{ font-size: clamp(28px, 3.2vw, 42px); margin: 0 auto 10px }
.signal p{ font-size: 16px; margin: 0 auto 20px }
.signal-checks{ margin: 0 auto 0 }
.signal-chk{ padding: 10px 0 }

.areas{
  background: var(--paper-warm);
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.areas-grid-v2{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--navy);
}
@media (max-width: 720px){ .areas-grid-v2{ grid-template-columns: 1fr } }
.areas-grid-v2 .area{
  padding: 32px 28px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.areas-grid-v2 .area:nth-child(2n){ border-right: 0; padding-right: 0 }
.areas-grid-v2 .area:nth-child(2n+1){ padding-left: 0 }
.areas-grid-v2 .area:nth-last-child(-n+2){ border-bottom: 0 }
.areas-grid-v2 .area.area--wildcard{
  grid-column: 1 / -1;
  text-align: left;
  padding: 32px 0;
  border-right: 0;
  border-bottom: 0;
}
.areas-grid-v2 .area.area--wildcard .area-marker{ font-size: 18px; letter-spacing: 0 }
.areas-grid-v2 .area:nth-child(6):not(:last-child){ border-bottom: 1px solid var(--rule) }
.areas-grid-v2 .area-desc{ max-width: 44ch; font-size: 16px }
@media (max-width: 720px){
  .areas-grid-v2 .area{ padding: 10px 0 !important; border-right: 0; border-bottom: 1px solid var(--rule) }
  .areas-grid-v2 .area:last-child{ border-bottom: 0 }
  .areas-grid-v2 .area .area-marker{ margin-bottom: 2px }
  .areas-grid-v2 .area .area-title{ margin-bottom: 2px }
}
.area-marker{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.15em; color: var(--teal-bright);
  margin-bottom: 14px;
}
.area-title{
  font-family: var(--tight); font-weight: 700;
  font-size: 22px; letter-spacing: -0.015em;
  line-height: 1.2; margin-bottom: 10px;
  color: var(--ink);
}
.area-desc{
  font-family: var(--sans); font-size: 15px;
  line-height: 1.55; color: var(--ink-2);
  max-width: 32ch;
}

/* Areas: compressed to fit above the fold on a 16" MBP */
.areas{ padding: clamp(16px, 2.5vw, 28px) 0 }
.areas .section-eyebrow{ margin-bottom: 10px }
.areas .section-title{ font-size: clamp(24px, 2.6vw, 36px); margin-bottom: 8px }
.areas .section-lede{ font-size: 15px; line-height: 1.45 }
.areas-grid-v2{ margin-top: 16px }
.areas-grid-v2 .area{ padding: 16px 20px }
.areas-grid-v2 .area .area-marker{ margin-bottom: 6px }
.areas-grid-v2 .area .area-title{ font-size: 17px; margin-bottom: 4px }
.areas-grid-v2 .area .area-desc{ font-size: 14px; line-height: 1.45 }
.areas-grid-v2 .area.area--wildcard{ padding: 18px 0 }

/* apply */
.apply{ padding: clamp(32px, 5vw, 56px) 0; background: var(--navy); color: var(--paper) }
.apply-inner{ max-width: 980px; margin: 0 auto }
.apply-inner .section-eyebrow{ color: rgba(248,250,252,0.55) }
.apply-inner .section-eyebrow::before{ background: var(--teal-bright) }
.apply-title{
  font-family: var(--tight); font-weight: 800;
  font-size: clamp(28px, 5vw, 56px);
  overflow-wrap: break-word;
  line-height: 1.08; letter-spacing: -0.03em;
  margin: 0;
  color: var(--paper);
  padding-bottom: 0.04em;
}
.apply-title em{ color: var(--teal-bright); font-style: normal; font-weight: inherit }
.apply-lede{
  font-family: var(--sans); font-size: 17px;
  line-height: 1.6; color: rgba(248,250,252,0.82);
  margin: 18px 0 0;
}
.apply-lede strong{ color: var(--paper); font-weight: 600 }
.apply-cta{ margin-top: 28px }
.apply-cta .btn-primary{ background: var(--paper); color: var(--navy) !important }
.apply-cta .btn-primary:hover{ background: var(--teal-bright); color: var(--white) !important }

/* utility */
.text-center{ text-align: center }
.muted{ color: var(--ink-3) }
.accent-color{ color: var(--teal-bright) }
.no-wrap{ white-space: nowrap }
.divider-line{ height: 1px; background: var(--rule); margin: 0 }


/* ============================================================
   v5-HYBRID INTEGRATION (chart + instrument vocabulary)
   ============================================================ */

:root {
  --paper-edge: #e2e8f0;
  --navy-soft:  #2a4a73;
  --rule-strong: rgba(30,58,95,0.30);
  --rule-soft:   rgba(30,58,95,0.08);
}


/* ============ VHF TICKER (home only) ============ */
.ticker{
  background: var(--navy);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
  border-bottom: 1px solid var(--navy-deep);
  padding: 12px 0;
}
.ticker-inner{
  display: flex; align-items: center; gap: 36px;
  white-space: nowrap;
  animation: ticker-scroll 60s linear infinite;
  padding-left: 100%;
}
.ticker-item{ display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.78) }
.ticker-item strong{ color: var(--paper); font-weight: 500 }
.ticker-item .live{ color: var(--teal-bright); font-size: 8px }
.ticker-item .sep{ color: rgba(255,255,255,0.25) }
a.ticker-item{ text-decoration: none; transition: color 140ms ease }
a.ticker-item:hover{ color: var(--teal-bright) }
a.ticker-item:hover strong{ color: var(--teal-bright) }
a.ticker-item .ticker-arrow{ display: inline-block; transition: transform 160ms ease; color: rgba(255,255,255,0.55) }
a.ticker-item:hover .ticker-arrow{ transform: translateX(3px); color: var(--teal-bright) }
@keyframes ticker-scroll{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-100%) }
}
.ticker:hover .ticker-inner{ animation-play-state: paused }

/* ============ MARGIN STRIP (chart-edge coords, all pages) ============ */
.margin-strip{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  background: rgba(248,250,252,0.85);
}
.margin-strip-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; gap: 18px; overflow: hidden;
}
.margin-strip-left, .margin-strip-right{
  display: flex; align-items: center; gap: 14px; white-space: nowrap;
}
.margin-strip .sep{ color: var(--rule-strong) }
.margin-strip a{ color: var(--ink-2) }
@media (max-width: 720px){ .margin-strip-right{ display: none } }

/* ============ BRAND WORDMARK W/ SUB-LINE ============ */
.brand-text{ display: flex; flex-direction: column; line-height: 1.1 }
.brand-sub{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 2px;
}
.site-footer .brand-sub{ color: rgba(255,255,255,0.6) }
.reserve-confirm{
  background: var(--teal-bright);
  color: var(--white);
  padding: 22px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
#reserve{ scroll-margin-top: 96px }
.reserve-confirm-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.reserve-confirm-text{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
}
.reserve-confirm-text strong{ font-weight: 700 }
.reserve-confirm-close{
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.reserve-confirm-close:hover{ opacity: 0.7 }

@media (max-width: 720px){
  .site-header .brand{ flex-shrink: 0 }
  .site-header .brand-text{ display: none }
  .site-header .brand-mark{ width: 32px; height: 32px }
  .site-header .nav-links{ gap: 10px }
  .site-header .nav-links a{ padding: 16px 4px }
  .site-header .nav-cta{ padding: 8px 12px !important; font-size: 10px !important }
  .site-header .nav-cta .nav-cta-long{ display: none }
  .site-header .nav-cta .nav-cta-short{ display: inline }
}

/* ============ COORD-TAG EYEBROW ============ */
.coord-tag{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  background: rgba(248,250,252,1);
  flex-wrap: wrap;
}
.coord-tag .pt{ display: inline-flex; align-items: center; gap: 8px; color: var(--teal-bright) }
.coord-tag .pt::before{
  content:""; width: 8px; height: 8px;
  background: var(--teal); border: 1.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,163,163,0.18);
}
.coord-tag .sep{ color: var(--rule-strong) }
.coord-tag.urgent .pt{ color: var(--signal-red); animation: none }
.coord-tag.urgent .pt::before{ background: var(--signal-red); box-shadow: 0 0 0 2px rgba(229,57,53,0.18); animation: pulse-red 2s infinite }
@keyframes pulse-red{
  0%{ box-shadow: 0 0 0 0 rgba(229,57,53,0.55) }
  100%{ box-shadow: 0 0 0 10px rgba(229,57,53,0) }
}

/* ============ HERO 2-COLUMN GRID (home / sport / commercial) ============ */
.hero-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 940px){ .hero-grid{ grid-template-columns: 1fr; gap: 40px } }

/* Sport hero uses the same default ratio (text wider than plate) */
.hero-grid.hero-grid--sport{ grid-template-columns: 1.5fr 1fr }
@media (max-width: 940px){ .hero-grid.hero-grid--sport{ grid-template-columns: 1fr } }

/* ============ PLATE (riveted navy instrument card) ============ */
.plate{
  position: relative;
  background: var(--navy);
  color: var(--paper);
  padding: 22px 24px 22px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 1px 0 rgba(255,255,255,0.04),
    0 18px 40px -16px rgba(11,30,45,0.35);
}
.plate > .rv-tl, .plate > .rv-tr,
.plate > .rv-bl, .plate > .rv-br{
  position: absolute;
  width: 7px; height: 7px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.4);
}
.plate > .rv-tl{ top: 10px; left: 10px }
.plate > .rv-tr{ top: 10px; right: 10px }
.plate > .rv-bl{ bottom: 10px; left: 10px }
.plate > .rv-br{ bottom: 10px; right: 10px }

.plate-head{
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px 12px;
  margin-bottom: 16px;
  border-bottom: 1px dashed rgba(255,255,255,0.22);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.plate-head .model{ color: var(--teal-bright) }
.plate-head .serial{ color: rgba(255,255,255,0.55) }

.plate-scale{ display: flex; align-items: center; gap: 8px; margin-bottom: 18px }
.plate-scale-line{
  display: flex; height: 6px; border: 1px solid rgba(255,255,255,0.55); flex: 1;
}
.plate-scale-line > div{ flex: 1; border-right: 1px solid rgba(255,255,255,0.55) }
.plate-scale-line > div:last-child{ border-right: 0 }
.plate-scale-line > div:nth-child(odd){ background: rgba(255,255,255,0.55) }
.plate-scale-label{
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.plate-name{
  font-family: var(--tight); font-weight: 800;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
  color: var(--paper);
  text-transform: uppercase;
}
.plate-tagline{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 22px;
}

.plate-specs{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.plate-specs > div{
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.plate-specs > div:nth-child(2n){
  padding-left: 14px; padding-right: 0;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.plate-specs > div:nth-last-child(-n+2){ border-bottom: 0 }

.spec-key{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 2px;
}
.spec-val{
  font-family: var(--tight); font-weight: 700;
  font-size: 19px; letter-spacing: -0.01em;
  color: var(--paper);
}
.spec-val .unit{
  font-family: var(--mono); font-weight: 400;
  font-size: 11px; color: rgba(255,255,255,0.65);
  letter-spacing: 0.12em; margin-left: 4px; text-transform: uppercase;
}

.plate-foot{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.22);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.plate-status{ display: inline-flex; align-items: center; gap: 8px; color: var(--teal-bright) }
.plate-status::before{
  content:""; width: 8px; height: 8px;
  background: var(--teal-bright); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,163,163,0.35);
  animation: pulse 2s infinite;
}
.plate-status.muted{ color: rgba(255,255,255,0.55) }
.plate-status.muted::before{ background: rgba(255,255,255,0.5); animation: none; box-shadow: none }

/* ============ SOUNDINGS BAR (home stat strip) ============ */
.soundings{
  padding: clamp(20px, 3vw, 32px) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper-warm);
  position: relative;
}
.soundings::before, .soundings::after{
  content:""; position: absolute;
  left: 0; right: 0; height: 1px;
  background: var(--rule);
}
.soundings::before{ top: 4px }
.soundings::after{ bottom: 4px }
.soundings-inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 720px){
  .soundings-inner{ grid-template-columns: 1fr 1fr }
  .sounding-cell:nth-child(odd){ border-left: 0 }
  .sounding-cell::before{ display: none }
}
.sounding-cell{
  padding: 12px 28px;
  border-left: 1px solid var(--rule);
  position: relative;
}
.sounding-cell:first-child{ border-left: 0 }
.sounding-cell::before{
  content:"+"; position: absolute; top: -8px; left: -6px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--rule-strong);
}
.sounding-cell:first-child::before{ display: none }
.sounding-key{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.sounding-val{
  font-family: var(--tight); font-weight: 800;
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: -0.025em; color: var(--ink);
}
.sounding-val .accent{ color: var(--teal-bright) }
.sounding-val .unit{
  font-family: var(--mono); font-weight: 400; font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.14em; margin-left: 4px;
  text-transform: uppercase;
}

/* ============ FLEET CARDS (navy, home) ============ */
.fleet{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 940px){ .fleet{ grid-template-columns: 1fr; gap: 20px } }
.fleet-card{
  display: flex; flex-direction: column;
  background: var(--navy);
  color: var(--paper);
  border: 1px solid var(--navy);
  text-decoration: none;
  position: relative;
  box-shadow: 0 18px 40px -16px rgba(11,30,45,0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.fleet-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px -20px rgba(11,30,45,0.45);
}
.fleet-card > .rv-tl, .fleet-card > .rv-tr,
.fleet-card > .rv-bl, .fleet-card > .rv-br{
  position: absolute;
  width: 7px; height: 7px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.4);
  z-index: 1;
}
.fleet-card > .rv-tl{ top: 10px; left: 10px }
.fleet-card > .rv-tr{ top: 10px; right: 10px }
.fleet-card > .rv-bl{ bottom: 10px; left: 10px }
.fleet-card > .rv-br{ bottom: 10px; right: 10px }

.fleet-card-head{
  padding: 18px 24px 14px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  border-bottom: 1px dashed rgba(255,255,255,0.22);
}
.fleet-card-head .tier strong{ color: var(--teal-bright); font-weight: 500 }
.fleet-card-head .status{ color: var(--teal-bright); display: inline-flex; align-items: center; gap: 8px }
.fleet-card-head .status::before{
  content:""; width: 8px; height: 8px;
  background: var(--teal-bright); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,163,163,0.35);
  animation: pulse 2s infinite;
}
.fleet-card-head .status.muted{ color: rgba(255,255,255,0.55) }
.fleet-card-head .status.muted::before{ background: rgba(255,255,255,0.5); animation: none; box-shadow: none }

.fleet-card-body{ padding: 24px 24px 22px; flex: 1; display: flex; flex-direction: column }
.fleet-card-name{
  font-family: var(--tight); font-weight: 800;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 0.92; letter-spacing: -0.03em;
  margin: 0 0 6px;
  color: var(--paper);
  text-transform: uppercase;
}
.fleet-card-tagline{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 18px;
}
.fleet-card-summary{
  font-family: var(--sans); font-size: 15px;
  line-height: 1.55; color: rgba(255,255,255,0.78);
  margin: 0 0 22px;
}
.fleet-card-specs{
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  margin-bottom: 22px;
}
.fleet-card-specs > div{
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.fleet-card-specs > div:nth-child(2n){
  padding-left: 14px; padding-right: 0;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.fleet-card-specs > div:nth-last-child(-n+2){ border-bottom: 0 }
.fleet-card-cta{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 12px;
  align-self: flex-start;
  padding: 12px 18px;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 140ms ease;
}
.fleet-card:hover .fleet-card-cta{ background: var(--teal-bright); color: var(--white) }

/* ============ RECTANGULAR MONO BUTTONS (overrides on .btn) ============ */
.btn{
  border-radius: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid;
}
.btn-primary{ border-color: var(--navy) }
.btn-primary:hover{ border-color: var(--teal-bright) }
.btn-secondary{ border-color: var(--ink) }
.btn-arrow{ font-size: 14px }

/* ============ DEEP BAND OVERLAYS (reserve / talk / apply / poem) ============ */
.reserve, .talk, .apply, .poem{
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.reserve::before, .talk::before, .apply::before, .poem::before{
  content:""; position: absolute; left: -10%; right: -10%; top: 30%;
  height: 200px; pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 100% at 30% 50%, transparent 55%, rgba(255,255,255,0.025) 56%, rgba(255,255,255,0.025) 57%, transparent 58%),
    radial-gradient(ellipse 60% 100% at 70% 50%, transparent 60%, rgba(255,255,255,0.02) 61%, rgba(255,255,255,0.02) 62%, transparent 63%);
}
.reserve::after, .talk::after, .apply::after, .poem::after{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}
.reserve > .container, .talk > .container, .apply > .container, .poem > .container{
  position: relative; z-index: 1;
}

/* ============ COMPARE LIST × / ● markers (replace em-dash) ============ */
.compare-col--old .compare-list li::before{
  content: "\2715";
  color: var(--ink-3);
  font-family: var(--mono);
  padding-top: 2px;
  margin-top: 0;
}
.compare-col--new .compare-list li::before{
  content: "";
  width: 10px; height: 10px;
  margin-top: 6px;
  background: var(--teal-bright);
  border: 1.5px solid var(--paper);
  border-radius: 50%;
}

/* ============ SIGNAL-RED option-cost (commercial helicopter) ============ */
.option-cost.signal-red{
  color: var(--red);
  display: inline-flex; align-items: center; gap: 8px;
}
.option-cost.signal-red::before{
  content:""; width: 9px; height: 9px;
  background: var(--red); border-radius: 50%;
  border: 1.5px solid var(--ink);
}

/* ============ FOCUS INDICATORS (WCAG 2.4.7) ============ */
:focus-visible{
  outline: 2px solid var(--teal-bright);
  outline-offset: 2px;
}
/* Override for teal-on-teal: reserve-confirm banner uses white outline */
.reserve-confirm :focus-visible,
.reserve-confirm-close:focus-visible{
  outline-color: var(--white);
}

/* ============ 404 PAGE ============ */
.error-404{
  background: var(--paper);
  color: var(--ink);
  padding: clamp(80px, 12vw, 160px) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.error-404 .container{ max-width: 720px }
.error-eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 28px;
}
.error-title{
  font-family: var(--tight);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.error-sub{
  font-family: var(--sans);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 40px;
}
.error-nav{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.error-nav a{
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
}
.error-nav a:hover{ color: var(--teal-bright); border-color: var(--teal-bright) }
.error-nav .sep{ color: var(--ink-3) }

/* ============ FAQ (sport common questions) ============ */
.faq{
  max-width: 720px;
  margin: 32px auto 0;
}
.faq-item{
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.faq-item:last-child{
  border-bottom: 1px solid var(--rule);
}
.faq-q{
  font-family: var(--tight);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq-a{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}
.faq-a a{
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
}
.faq-a a:hover{
  color: var(--teal-bright);
  border-color: var(--teal-bright);
}

/* ============ REDUCED MOTION (WCAG 2.3.3) ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ NARROW VIEWPORT HEADLINE WRAPS (iPhone SE etc.) ============ */
@media (max-width: 480px){
  .display br{ display: none }
}

/* ============ ULTRA-NARROW NAV (<=380px: iPhone SE, narrow Android) ============ */
@media (max-width: 380px){
  .site-header .nav{ justify-content: center; gap: 18px }
  .site-header .nav-links{ gap: 8px }
  .site-header .nav-links a{ padding: 16px 0 }
  .site-header .nav-links a.current{ display: none }
  .site-header .nav-cta{ padding: 8px 10px !important; font-size: 10px !important }
  /* Home has no .current page link, but its hero already carries Reserve CTA, so the nav Reserve is redundant at narrow widths */
  .page-home .site-header .nav-cta{ display: none }
}