/* ====================================================================
   SIGNAL — marketing layer
   Header/nav · footer · home · about · pricing · contact · login.
   ==================================================================== */

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 34px; height: auto; }
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand__name {
  font-family: var(--font-nav);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  white-space: nowrap;
}
.brand__name b { color: var(--signal); font-weight: 400; }
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav > a {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding: 8px 2px;
  position: relative;
  white-space: nowrap;
}
.site-nav > a:hover { color: var(--ink); }
.site-nav > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--signal);
  transition: right 0.18s ease;
}
.site-nav > a:hover::after { right: 0; }
.site-nav > a[aria-current="page"] { color: var(--ink); }
.site-nav > a[aria-current="page"]::after { right: 0; }

.nav-extra { display: flex; align-items: center; gap: 12px; margin-left: 8px; }

/* theme toggle — HUD mode control.
   Reads "● MODE: DARK [■ ]" in IBM Plex Mono with corner brackets
   (markup adds .hud). The status dot crossfades red↔amber and the
   thumb slides on transform only; both are keyed off html[data-theme]
   so they are correct at first paint. theme.js (untouched) updates
   .tgl-label text + aria-pressed. */
.theme-toggle {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 13px;
  background-color: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  --hud-s: 9px;
  --hud-w: 2px;
  --hud-c: var(--line-2);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--signal); --hud-c: var(--signal); }
.theme-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; --hud-c: var(--signal); }
.theme-toggle--menu { display: none; }

.theme-toggle .tgl-mode { color: var(--ink-3); }
.theme-toggle .tgl-label {
  font-weight: 600;
  min-width: 5ch;
  text-align: left;
  color: var(--ink);
}
.theme-toggle .tgl-hint { display: none; color: var(--ink-3); font-size: 0.56rem; letter-spacing: 0.18em; }

/* status dot — two stacked layers crossfade (opacity only) */
.theme-toggle .tgl-dot { position: relative; width: 9px; height: 9px; flex: none; }
.theme-toggle .tgl-dot::before,
.theme-toggle .tgl-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}
.theme-toggle .tgl-dot::before { background: #ff3434; box-shadow: 0 0 9px rgba(255, 52, 52, 0.85); opacity: 1; }
.theme-toggle .tgl-dot::after  { background: #ffb224; box-shadow: 0 0 9px rgba(255, 178, 36, 0.75); opacity: 0; }
[data-theme="light"] .theme-toggle .tgl-dot::before { opacity: 0; }
[data-theme="light"] .theme-toggle .tgl-dot::after  { opacity: 1; }

/* two-position track — thumb slides on transform only */
.theme-toggle .tgl-track {
  position: relative;
  width: 36px;
  height: 18px;
  flex: none;
  border: 1px solid var(--line-2);
  background-color: var(--bg-2);
}
.theme-toggle .tgl-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 12px;
  background: var(--signal);
  transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.32, 1);
}
[data-theme="light"] .theme-toggle .tgl-thumb { transform: translateX(16px); }

/* the desktop header runs a fixed 1180px budget — with the search button
   in the row, the "MODE:" word is the width that keeps the brand and the
   nav comfortably apart; the dot + DARK/LIGHT label reads fine without it */
.theme-toggle--desktop .tgl-mode { display: none; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  transition: transform 0.22s ease, opacity 0.18s ease;
}

/* ------------------------------------------------------------------ */
/* Home hero — telemetry screen                                        */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(620px, 94vh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #eef1f6;
  background: #0c0e11;
  overflow: hidden;
}
.hero__media, .hero__media img { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.95) contrast(1.1) brightness(0.62);
}
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  /* film grain (reactbits noise, static SVG turbulence) rides on top of
     the two shade gradients — no motion, no extra request */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(12,14,17,0.62) 0%, rgba(12,14,17,0.18) 38%, rgba(12,14,17,0.9) 88%),
    linear-gradient(90deg, rgba(12,14,17,0.66) 0%, rgba(12,14,17,0) 60%);
  background-size: 160px 160px, auto, auto;
}
.hero__gridlines {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(238,241,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,246,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
}
.hero__frame {
  position: absolute; inset: 16px; z-index: 2;
  pointer-events: none;
  --hud-c: rgba(238, 241, 246, 0.45);
  --hud-s: 26px;
}
.hero__content { position: relative; z-index: 1; padding-bottom: 30px; }
.hero .eyebrow { color: #c6cdd8; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 10.5vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.002em;
  margin-top: 20px;
  text-transform: uppercase;
}
.hero__title .red { color: var(--red); text-shadow: 0 0 26px rgba(221, 0, 0, 0.55); }
.hero__sub {
  margin-top: 22px;
  max-width: 56ch;
  color: #c6cdd8;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* the hero photo panel is dark in BOTH themes — ghost CTA can't use theme ink */
.hero__cta .btn--ghost { border-color: rgba(238, 241, 246, 0.6); color: #eef1f6; }
.hero__cta .btn--ghost:hover { border-color: #eef1f6; background: rgba(238, 241, 246, 0.1); color: #ffffff; }

.hero__telemetry {
  position: relative; z-index: 1;
  margin-top: 44px;
  border-top: 1px solid rgba(238, 241, 246, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 44px;
  padding: 14px 0 22px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b95a6;
}
.hero__telemetry b { color: #e8ecf2; font-weight: 500; }
.hero__telemetry .tl-item { display: inline-flex; align-items: center; gap: 9px; }

[data-theme="light"] .hero { margin: 14px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* compact page hero (about / pricing / contact) */
.page-hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 8vw, 104px) 0 clamp(36px, 5vw, 64px);
  overflow: hidden;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 7.5vw, 5.6rem);
  line-height: 0.92;
  margin-top: 16px;
}
.page-hero .lede { margin-top: 18px; color: var(--ink-2); font-size: 1.05rem; }
.page-hero__meta {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* ------------------------------------------------------------------ */
/* Stats band                                                          */
/* ------------------------------------------------------------------ */

.stats-band { border-bottom: 1px solid var(--line); }
.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats-band .stat {
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
  border-left: 1px solid var(--line);
  position: relative;
}
.stats-band .stat:first-child { border-left: none; }
.stats-band .stat::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 28px; height: 3px;
  background: var(--signal);
}
.stats-band .stat:first-child::before { left: 0; }

/* ------------------------------------------------------------------ */
/* Pillars                                                             */
/* ------------------------------------------------------------------ */

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { display: flex; flex-direction: column; gap: 14px; min-height: 240px; }
.pillar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pillar h3 { font-size: 1.25rem; }
.pillar p { color: var(--ink-2); font-size: 0.94rem; }
.pillar__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 9px;
}

/* ------------------------------------------------------------------ */
/* Facility showcase                                                   */
/* ------------------------------------------------------------------ */

.showcase {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 96px;
  gap: 14px;
}
.showcase .ph { height: 100%; }
.showcase .sc-a { grid-column: 1 / 8;  grid-row: span 4; }
.showcase .sc-b { grid-column: 8 / 13; grid-row: span 2; }
.showcase .sc-c { grid-column: 8 / 13; grid-row: span 2; }
.showcase .sc-d { grid-column: 1 / 5;  grid-row: span 2; }
.showcase .sc-e { grid-column: 5 / 9;  grid-row: span 2; }
.showcase .sc-f { grid-column: 9 / 13; grid-row: span 2; }

.equip-list {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background-color: var(--bg-3);
}
.equip-list > div {
  padding: 18px 22px;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
}
.equip-list > div:first-child { border-left: none; }

/* ------------------------------------------------------------------ */
/* PT split section                                                    */
/* ------------------------------------------------------------------ */

.pt-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.pt-split .ph { aspect-ratio: 4 / 3.4; }
.pt-roster { margin-top: 26px; border-top: 1px solid var(--line); }
.pt-roster li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.pt-roster { padding-left: 0; }
.pt-roster li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--signal); }
.pt-roster .spec { margin-left: auto; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }

/* ------------------------------------------------------------------ */
/* Core values — THE OPERATING PROTOCOL (signature)                    */
/* ------------------------------------------------------------------ */

.values-sec { position: relative; border-block: 1px solid var(--line); background-color: var(--bg-2); }
.values-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.values-head .v-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 14px;
}
.values-head .v-count .bars { display: inline-flex; gap: 4px; }
.values-head .v-count .bars i { width: 7px; height: 16px; background: var(--signal); display: block; }

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.value {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-3);
  border: 1px solid var(--line);
  padding: 26px 28px 22px;
  min-height: 158px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.value:hover { border-color: var(--signal); transform: translateY(-2px); }
.value:hover { --hud-c: var(--signal); }
.value__idx {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--signal);
  position: absolute;
  top: 18px; left: 28px;
}
.value h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); position: relative; z-index: 1; max-width: 17ch; }
.value__status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 1;
}
.value__ghost {
  position: absolute;
  right: 6px; bottom: -26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 7.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.2s ease;
}
.value:hover .value__ghost { -webkit-text-stroke-color: var(--signal); }

/* expanded variant (about page) */
.value--exp { min-height: 0; justify-content: flex-start; padding-top: 54px; }
.value--exp p { color: var(--ink-2); font-size: 0.92rem; position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/* Reviews                                                             */
/* ------------------------------------------------------------------ */

.reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.review { display: flex; flex-direction: column; gap: 18px; }
.review__stars { display: flex; gap: 5px; }
.review__stars i {
  width: 16px; height: 16px;
  background: var(--signal);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.review blockquote {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.review .review__kicker {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-2);
}
.review figcaption {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.review figcaption b { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------ */
/* Pricing teaser (home) + plan hero (pricing page)                    */
/* ------------------------------------------------------------------ */

.price-teaser {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.price-big {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(3.6rem, 8vw, 6.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.price-big .cur { font-size: 0.42em; vertical-align: 0.85em; color: var(--signal); margin-right: 0.06em; }
.price-big .per { font-size: 0.28em; color: var(--ink-3); letter-spacing: 0.1em; }
.tick-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 0.95rem; }
.tick-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--signal);
  font-family: var(--font-mono);
}
.tick-list strong { color: var(--ink); }

.plan-hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background-color: var(--bg-3);
}
.plan-hero__main { padding: clamp(28px, 4.5vw, 52px); }
.plan-hero__main .tick-list { margin-top: 26px; }
.plan-hero__side {
  border-left: 1px solid var(--line);
  background-color: var(--bg-2);
  padding: clamp(28px, 4.5vw, 52px);
  display: flex; flex-direction: column; gap: 4px;
}
.cost-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line-2);
  font-size: 0.92rem; color: var(--ink-2);
}
.cost-row .mono { color: var(--ink); font-size: 0.88rem; }
.cost-row--total { border-bottom: none; padding-top: 16px; }
.cost-row--total .mono { color: var(--signal); font-weight: 600; font-size: 1.3rem; }

.mil-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  border: 1px solid var(--signal);
  background: var(--signal-dim);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3.5vw, 40px);
}
.mil-callout .pct {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--signal);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.mil-callout p { color: var(--ink-2); font-size: 0.95rem; }
.mil-callout strong { color: var(--ink); }

/* PT packages */
.pt-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pt-pack { display: flex; flex-direction: column; gap: 10px; padding-top: 30px; }
.pt-pack__name { font-family: var(--font-nav); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-2); }
.pt-pack .price-big { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.pt-pack__per { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.08em; }
.pt-pack p { color: var(--ink-2); font-size: 0.9rem; }
.pt-pack .badge { position: absolute; top: -11px; left: 22px; }
.pt-pack .btn { margin-top: auto; }
.pt-note { margin-top: 18px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.06em; }

/* comparison table accents */
.cmp-yes { color: var(--ok); font-family: var(--font-mono); font-size: 0.8rem; }
.cmp-no { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.8rem; }
.table .col-hogg { color: var(--ink); font-weight: 500; }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details {
  border: 1px solid var(--line);
  background-color: var(--bg-3);
  border-radius: var(--radius);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  content: "+" / ""; /* alt-text syntax mutes the glyph for screen readers */
  font-family: var(--font-mono);
  color: var(--signal);
  font-size: 1.1rem;
  width: 20px;
  flex: none;
  transition: transform 0.18s ease;
}
.faq details[open] summary::before { content: "–"; content: "–" / ""; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .faq-body { padding: 18px 22px 22px 58px; color: var(--ink-2); font-size: 0.94rem; }

/* ------------------------------------------------------------------ */
/* Locations                                                           */
/* ------------------------------------------------------------------ */

.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.loc-card { display: flex; flex-direction: column; gap: 16px; }
.loc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.loc-card h3 { font-size: 1.35rem; }
.loc-card address {
  font-style: normal;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}
.loc-card .tel {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  width: fit-content;
}
.loc-card .tel:hover { color: var(--signal); border-color: var(--signal); }
.hours-rows { border-top: 1px solid var(--line); }
.hours-rows .hr-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.86rem;
  color: var(--ink-2);
}
.hours-rows .hr-row .mono { color: var(--ink); font-size: 0.78rem; }
.loc-card__foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* ------------------------------------------------------------------ */
/* Final CTA band                                                      */
/* ------------------------------------------------------------------ */

.cta-band {
  position: relative;
  background: var(--red);
  color: #ffffff;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
}
.cta-band__inner {
  position: relative;
  padding: clamp(64px, 9vw, 110px) 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 0.92;
}
.cta-band .eyebrow { color: #ffffff; }
.cta-band .eyebrow::before { background: #ffffff; }
.cta-band p { color: rgba(255,255,255,0.95); margin-top: 14px; }
.cta-band__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cta-band .btn--ghost { border-color: rgba(255,255,255,0.6); color: #ffffff; }
.cta-band .btn--ghost:hover { border-color: #ffffff; background: rgba(255,255,255,0.1); color: #ffffff; }
.cta-band .mono-line {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #ffffff;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line);
  background-color: var(--bg-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
  padding: clamp(48px, 7vw, 80px) 0 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand img { width: 44px; height: auto; }
.footer-brand p { color: var(--ink-2); font-size: 0.9rem; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; }
.footer-col a:hover { color: var(--signal); }
.footer-col li { color: var(--ink-2); font-size: 0.9rem; }
.footer-col .mono { font-size: 0.8rem; }
.footer-col .gap-top { margin-top: 12px; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 20px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ */
/* About page                                                          */
/* ------------------------------------------------------------------ */

.story-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.story-split .ph { aspect-ratio: 1 / 1.05; }
.story-split .body-copy p + p { margin-top: 16px; }
.story-split .body-copy p { color: var(--ink-2); }
.story-facts {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 12px 36px;
  width: fit-content;
}

.mission-quote {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 72px);
  text-align: center;
}
.mission-quote blockquote {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--ink);
}
.mission-quote blockquote b { color: var(--signal); font-weight: 600; }
.mission-quote figcaption {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* minmax(0,1fr) keeps long nowrap badges from stretching one column and
   staggering the row's baselines */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.trainer .badge { white-space: normal; }
.trainer { display: flex; flex-direction: column; gap: 12px; }
.trainer__tile {
  aspect-ratio: 1 / 0.72;
  background-color: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.trainer__tile::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.trainer__tile span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  color: var(--signal);
  position: relative;
}
.trainer h3 { font-size: 1.02rem; }
.trainer__spec { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.trainer p { color: var(--ink-2); font-size: 0.86rem; }
.trainer .badge { width: fit-content; margin-top: auto; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 14px; }
.gallery .ph:nth-child(1) { grid-column: span 2; }
/* last frame runs full-bleed — span 2 would leave a dead cell bottom-right */
.gallery .ph:nth-child(6) { grid-column: 1 / -1; }

/* member interviews — click-to-play video facades */
.vid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vid {
  position: relative;
  margin: 0;
  background-color: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.vid:hover { border-color: var(--signal); }
.vid__face {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  padding: 0;
  border: 0;
  background: #0c0e11;
  cursor: pointer;
}
.vid__face img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transition: transform 0.25s ease;
}
.vid__face::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,14,17,0.05) 40%, rgba(12,14,17,0.72) 100%);
  pointer-events: none;
}
.vid__face:hover img { transform: scale(1.04); }
.vid__face:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.vid__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px; height: 46px;
  display: grid;
  place-items: center;
  z-index: 1;
  background-color: rgba(12, 14, 17, 0.82);
  /* mini HUD brackets, top-left + bottom-right (matches .ph__tag) */
  background-image:
    linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal)),
    linear-gradient(var(--signal), var(--signal));
  background-size: 9px 2px, 2px 9px, 9px 2px, 2px 9px;
  background-position: top left, top left, bottom right, bottom right;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 0.78rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.vid__face:hover .vid__play,
.vid__face:active .vid__play { background-color: var(--red); border-color: var(--red); transform: scale(1.06); }
.vid__tag {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8ecf2;
  background: rgba(12, 14, 17, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 6px 10px;
}
.vid__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  border: 0;
  background: #0c0e11;
}

/* ------------------------------------------------------------------ */
/* Contact page                                                        */
/* ------------------------------------------------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.contact-form-card .btn { margin-top: 6px; }
.form-success {
  text-align: center;
  padding: clamp(36px, 6vw, 64px) 24px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.form-success .ok-mark {
  width: 64px; height: 64px;
  border: 2px solid var(--ok);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: 1.6rem;
}
.form-success h3 { font-size: 1.3rem; }
.form-success p { color: var(--ink-2); }
.contact-form-card.sent form { display: none; }
.contact-form-card.sent .form-success { display: flex; }

.contact-aside { display: grid; gap: 18px; }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-row a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.social-row a:hover { border-color: var(--signal); color: var(--signal); }

/* ------------------------------------------------------------------ */
/* Login page                                                          */
/* ------------------------------------------------------------------ */

.login-shell {
  display: grid;
  grid-template-columns: minmax(420px, 520px) 1fr;
  min-height: calc(100vh - 69px);
}
.login-pane {
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-pane h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-top: 14px;
}
.login-pane .lede { color: var(--ink-2); margin: 14px 0 30px; font-size: 0.95rem; }
.login-card { margin-bottom: 22px; }
.login-card.shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.login-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin: 4px 0 18px;
}
.login-meta a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.login-meta a:hover { color: var(--signal); }
.forgot-note {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  border: 1px dashed var(--line-2);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.forgot-note.show { display: block; }

.demo-chips { display: grid; gap: 10px; }
.demo-chips__label {
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chip {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background-color: var(--bg-3);
  border: 1px solid var(--line);
  padding: 12px 16px;
  min-height: 56px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.chip:hover { border-color: var(--signal); transform: translateY(-1px); }
.chip .chip__role {
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  width: 74px;
  flex: none;
}
.chip .chip__cred { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-2); line-height: 1.5; }
.chip .chip__go { margin-left: auto; color: var(--ink-3); font-family: var(--font-mono); }

.login-visual {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
  min-height: 420px;
}
.login-visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.1) brightness(0.55);
}
.login-visual__shade {
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(12,14,17,0.2) 0%, rgba(12,14,17,0.85) 100%);
}
.login-visual__content {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(28px, 5vw, 56px);
  color: #eef1f6;
}
.login-visual__content .display { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.login-visual__content .mono-line {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9aa4b5;
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .stats-band__grid { grid-template-columns: 1fr 1fr; }
  .stats-band .stat:nth-child(3) { border-left: none; }
  .stats-band .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vid-grid { grid-template-columns: 1fr 1fr; }
  .equip-list { grid-template-columns: 1fr 1fr; }
  .equip-list > div:nth-child(odd) { border-left: none; }
  .equip-list > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .showcase { grid-auto-rows: 80px; }
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { display: none; }
}

/* the desktop header (brand + 6 links + locations dropdown + toggle
   + 2 buttons) needs ~1250px before everything fits — hand over to
   the burger below that */
@media (max-width: 1249px) {
  .nav-burger { display: flex; }
  .site-nav {
    /* NB: header has backdrop-filter, which would become the containing
       block for position:fixed — use absolute under the sticky header. */
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: calc(100vh - 68px);
    height: calc(100dvh - 68px);
    z-index: 49;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 28px 24px 40px;
    background-color: var(--bg);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 48px 48px;
    border-top: 1px solid var(--line);
    /* clip-path wipe (not translateX): zero scrollable overflow when closed */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.28s ease, visibility 0s linear 0.28s;
    overflow-y: auto;
  }
  .nav-open .site-nav {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 0.28s ease, visibility 0s;
  }
  .nav-open body { overflow: hidden; }
  .site-nav > a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.04em;
    padding: 10px 2px;
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .site-nav > a::after { display: none; }
  .site-nav > a[aria-current="page"] { color: var(--signal); }
  .nav-extra {
    margin: 22px 0 0;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .nav-extra .btn { width: 100%; }
  .theme-toggle--desktop { display: none; }
  /* full-width labeled row inside the mobile menu */
  .theme-toggle--menu {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    background-color: var(--bg-3);
    font-size: 0.7rem;
  }
  .theme-toggle--menu .tgl-hint { display: inline-block; margin-left: auto; }
  .nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; }
  .pt-split, .story-split, .contact-grid { grid-template-columns: 1fr; }
  .plan-hero { grid-template-columns: 1fr; }
  .plan-hero__side { border-left: none; border-top: 1px solid var(--line); }
  .reviews { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .pt-packs { grid-template-columns: 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .price-teaser { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .gallery .ph:nth-child(1), .gallery .ph:nth-child(6) { grid-column: span 2; }

  .showcase { display: flex; flex-direction: column; gap: 12px; }
  .showcase .ph { height: auto; aspect-ratio: 16 / 10; }
  .login-shell { min-height: 0; }
}

@media (max-width: 880px) {
  /* >= 44px tap targets for footer + inline contact links on touch widths */
  .footer-col a,
  .loc-card .tel,
  .cost-row a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col ul { gap: 2px; }
  .footer-col .gap-top { margin-top: 8px; }
}

@media (max-width: 560px) {
  .wrap { width: min(1180px, 100% - 36px); }
  .stats-band__grid { grid-template-columns: 1fr 1fr; }
  .stat__value { font-size: 1.7rem; }
  .team-grid { grid-template-columns: 1fr; }
  .vid-grid { grid-template-columns: 1fr; }
  .equip-list { grid-template-columns: 1fr; }
  .equip-list > div { border-left: none; border-top: 1px solid var(--line); }
  .equip-list > div:first-child { border-top: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .ph:nth-child(1), .gallery .ph:nth-child(6) { grid-column: span 1; }
  .hero__telemetry { gap: 8px 22px; }
  .brand__sub { display: none; }
  .login-pane { padding-inline: 20px; }
  .login-shell { grid-template-columns: 1fr; }
}

/* ====================================================================
   SIGNAL — site-map expansion layer
   Locations dropdown · site dossiers (oxnard/camarillo) · story ·
   faq · home social feed · ad landing pages (lp/).
   ==================================================================== */

/* ------------------------------------------------------------------ */
/* Nav — LOCATIONS dropdown                                            */
/* ------------------------------------------------------------------ */

.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop__btn {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 2px;
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.nav-drop__btn:hover { color: var(--ink); }
.nav-drop__btn::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--signal);
  transition: right 0.18s ease;
}
.nav-drop__btn:hover::after { right: 0; }
.nav-drop__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.nav-drop__btn .caret {
  font-size: 0.6em;
  color: var(--ink-3);
  transition: transform 0.18s ease;
}
.nav-drop.open .nav-drop__btn .caret { transform: rotate(180deg); }
/* on a location page the whole group reads as current */
.nav-drop.is-here .nav-drop__btn { color: var(--ink); }
.nav-drop.is-here .nav-drop__btn::after { right: 0; }

.nav-drop__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 252px;
  padding: 6px;
  background-color: var(--bg-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel,
.nav-drop.open .nav-drop__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
.nav-drop__panel a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  text-decoration: none;
  padding: 11px 14px;
  color: var(--ink-2);
  font-family: var(--font-nav);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.nav-drop__panel a:last-child { border-bottom: none; }
.nav-drop__panel a:hover { color: var(--ink); background-color: var(--bg-4); }
.nav-drop__panel a:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.nav-drop__panel a .code {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.nav-drop__panel a[aria-current="page"] { color: var(--ink); }
.nav-drop__panel a[aria-current="page"] .code { color: var(--signal); }
.nav-drop__label { display: none; }

/* ------------------------------------------------------------------ */
/* Site dossier pages (oxnard / camarillo)                             */
/* ------------------------------------------------------------------ */

.page-hero__telemetry {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-hero__telemetry b { color: var(--ink); font-weight: 500; }
.page-hero__telemetry .tl-item { display: inline-flex; align-items: center; gap: 9px; }

.site-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.site-strip {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
}
.site-strip .ph { aspect-ratio: 16 / 9; }
.site-strip .ph + .ph { aspect-ratio: auto; }

/* staff cards reuse .team-grid/.trainer; manifest reuses .table */
.manifest-foot {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.amen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.amen {
  position: relative;
  background-color: var(--bg-3);
  border: 1px solid var(--line);
  padding: 24px 22px 20px;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.amen__idx {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--signal);
}
.amen h3 { font-size: 0.95rem; }
.amen p { color: var(--ink-2); font-size: 0.84rem; }

/* cross-site handoff band */
.xsite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  border: 1px solid var(--line);
  background-color: var(--bg-2);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3.5vw, 40px);
}
.xsite h2 { font-size: 1.15rem; }
.xsite p { color: var(--ink-2); font-size: 0.92rem; }
.xsite .btn { margin-left: auto; }

/* ------------------------------------------------------------------ */
/* Story page (File 01 — Origin)                                       */
/* ------------------------------------------------------------------ */

.sign-wall {
  position: relative;
  border-block: 1px solid var(--line);
  background-color: var(--bg-2);
  padding: clamp(36px, 5vw, 64px) 0;
  text-align: center;
  overflow: hidden;
}
.sign-wall figure { margin: 0; }
.sign-wall img {
  width: min(780px, 88%);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 26px 54px rgba(0, 0, 0, 0.55));
}
[data-theme="light"] .sign-wall img { filter: drop-shadow(0 20px 40px rgba(17, 20, 27, 0.28)); }
.sign-wall figcaption {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.portrait-frame {
  position: relative;
  aspect-ratio: 1 / 1.06;
  background-color: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.portrait-frame .init {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  color: var(--signal);
  position: relative;
  text-transform: uppercase;
}
.portrait-frame .init small {
  display: block;
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 0.14em;
  letter-spacing: 0.34em;
  color: var(--ink-2);
  text-align: center;
  margin-top: 14px;
}
.portrait-frame .slot-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  background-color: var(--bg-3);
  border: 1px solid var(--line-2);
  padding: 6px 10px;
}

.tel-band {
  border-block: 1px solid var(--line);
  background-color: var(--bg-2);
}
.tel-band__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 44px;
  padding: 18px 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tel-band__row b { color: var(--ink); font-weight: 500; }
.tel-band__row .tl-item { display: inline-flex; align-items: center; gap: 9px; }

.origin-log {
  border: 1px solid var(--line);
  background-color: var(--bg-3);
}
.olog {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 24px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
.olog:last-child { border-bottom: none; }
.olog__t {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--signal);
  padding-top: 3px;
  white-space: nowrap;
}
.olog h3 { font-size: 1.05rem; }
.olog p { color: var(--ink-2); font-size: 0.9rem; margin-top: 6px; }

.gym-mom-quote .badge { margin-top: 20px; }

/* ------------------------------------------------------------------ */
/* FAQ page                                                            */
/* ------------------------------------------------------------------ */

.faq-group { margin-bottom: clamp(40px, 6vw, 64px); }
.faq-group:last-of-type { margin-bottom: 0; }
.faq-group > .eyebrow { margin-bottom: 20px; }

/* ------------------------------------------------------------------ */
/* Home — live social feed                                             */
/* ------------------------------------------------------------------ */

.posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.post {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.post:hover { border-color: var(--signal); transform: translateY(-2px); }
.post__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.post__net { color: var(--signal-text); font-weight: 600; }
.post__time { margin-left: auto; color: var(--ink-3); }
.post__media { aspect-ratio: 1 / 0.74; }
.post__body {
  padding: 16px 16px 14px;
  font-size: 0.88rem;
  color: var(--ink-2);
  flex: 1;
}
.post__body strong { color: var(--ink); }
.post__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.post__meta a {
  margin-left: auto;
  color: var(--ink-2);
  text-decoration: none;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.post__meta a:hover { color: var(--signal); }
.post__meta a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (pointer: coarse) {
  .post__meta a { min-height: 44px; }
}
.feed-follow {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.feed-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Ad landing pages (lp/)                                              */
/* ------------------------------------------------------------------ */

/* LP header actions — NOT .nav-extra (that class goes column/full-width
   inside the burger-menu media query, which the LP header must not do) */
.lp-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.lp-actions .btn { white-space: nowrap; }
@media (max-width: 560px) {
  /* keep the tour CTA; the sticky bottom bar carries the call action */
  .lp-actions .btn--ghost { display: none; }
}

/* The LP hero (and the form card riding on it) is pinned dark in BOTH
   themes — the photo is the surface. Re-map every theme-variant token to
   its dark value inside this scope so status/error/focus colors stay
   readable when a visitor carries a persisted light-theme preference. */
.lp-hero, .lp-form-card {
  --ok: #3ce081; --ok-dim: rgba(60, 224, 129, 0.12);
  --bad: #ff5050; --bad-dim: rgba(255, 80, 80, 0.13);
  --signal: #ff3434; --signal-ink: #ffffff; --signal-text: #ff5555;
  --signal-dim: rgba(255, 52, 52, 0.14);
  --signal-glow: 0 0 18px rgba(255, 52, 52, 0.38);
  --ink: #eef1f6; --ink-2: #a8b1bf; --ink-3: #8a94a8;
  --line: #222835; --line-2: #333b4c;
  --bg-2: #10131a; --bg-3: #141822; --bg-4: #1b2130;
  --scan: rgba(0, 0, 0, 0.5);
}

.lp-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 88vh, 820px);
  background: #0c0e11;
  color: #eef1f6;
  overflow: hidden;
}
/* per-site art direction: Camarillo's late-night hero runs darker + cooler
   (midzone kept readable so the training action still reads as people) */
.lp-hero--night .hero__media img { filter: saturate(0.88) contrast(1.08) brightness(0.66); }
.lp-hero__inner { position: relative; z-index: 1; }
.lp-hero__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 72px) clamp(18px, 3vw, 30px);
}
/* the welcome moment — "Glad you're here, {Site}." */
.lp-h1 { margin-top: 18px; }
.lp-h1__hi {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #c6cdd8;
}
.lp-h1__site {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.1rem, 9vw, 5.9rem);
  line-height: 0.92;
  margin-top: 4px;
}
.lp-h1__site .red { color: var(--red); text-shadow: 0 0 26px rgba(221, 0, 0, 0.55); }
.lp-hero .eyebrow { color: #c6cdd8; }
.lp-hero__sub {
  margin-top: 20px;
  max-width: 50ch;
  color: #c6cdd8;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
}
.lp-hero__sub strong { color: #ffffff; }
.lp-hero .tick-list { margin-top: 24px; }
.lp-hero .tick-list li { color: #c6cdd8; }
.lp-hero .tick-list strong { color: #ffffff; }
.lp-hero__phone {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b95a6;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-hero__phone a {
  color: #e8ecf2;
  /* decoration glued to the glyphs — a border on the padded hit box would
     strike through the second line when the row wraps on phones */
  text-decoration: underline;
  text-decoration-color: rgba(238, 241, 246, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* 44px hit area without moving the line */
  display: inline-flex;
  align-items: center;
  padding-block: 13px;
  margin-block: -13px;
}
.lp-hero__phone a:hover { color: var(--signal); text-decoration-color: var(--signal); }
/* per-site telemetry rail along the hero's bottom edge */
.lp-hero .hero__telemetry { margin-top: clamp(24px, 4vw, 40px); padding-bottom: 8px; }

/* the LP form card sits on the dark hero photo in both themes
   (colors resolve through the dark re-map above) */
.lp-form-card {
  background-color: var(--bg-3);
  --hud-c: var(--line-2);
  color: var(--ink);
  scroll-margin-top: 96px; /* #tour lands clear of the 69px sticky header */
}
.lp-form-card h2 { font-size: 1.4rem; margin: 14px 0 20px; }
.lp-form-card .eyebrow { color: var(--ink-2); }
.lp-form-card .field > label { color: var(--ink-2); }
.lp-form-card .input {
  background-color: var(--bg-2);
  border-color: var(--line-2);
  color: var(--ink);
}
.lp-form-card .input::placeholder { color: var(--ink-3); }
.lp-form-card .form-success p { color: var(--ink-2); }
.lp-form-card.sent form { display: none; }
.lp-form-card.sent .form-success { display: flex; }

/* mono microcopy — floored at 0.7rem so trust copy stays legible on phones */
.lp-micro {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}

.lp-band { border-top: 1px solid var(--line); }

/* -------- site manifest — the location's floor, spec'd (per-site) ---- */
.lp-manifest {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.manifest-card .mf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}
.manifest-card .mf-head h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mf-row {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.mf-row:first-of-type { border-top: none; }
.mf-zone {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-text);
}
.mf-item { font-size: 0.93rem; color: var(--ink); }
.mf-note { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.8rem; }
.mf-qty {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  white-space: nowrap;
}
.mf-foot {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* the posted terms — telemetry rows, deliberately NOT another card.
   Solid --bg mask keeps the grid-bg texture from running through the rows. */
.lp-terms {
  background-color: var(--bg);
  padding: 10px 22px 18px;
}
.lp-terms h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.term-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.term-row:first-of-type { border-top: none; margin-top: 10px; }
.term-row span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.term-row b {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: right;
}
.term-row b.red { color: var(--signal-text); }
.lp-terms .lp-micro { margin-top: 14px; }

/* ---- site signatures — one per location, drawn from the real floor ---- */

/* OXNARD — the 40-yd red turf runway, dash marks and all */
.runway {
  position: relative;
  height: 42px;
  background: var(--red);
  overflow: hidden;
}
.runway::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg,
    var(--signal-ink) 0 30px, transparent 30px 64px);
  opacity: 0.92;
}
.runway__tag {
  position: absolute;
  right: clamp(16px, 4vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--signal-ink);
  background: var(--red);
  padding: 3px 12px;
}

/* CAMARILLO — the always-on hour rail: 24 hours, every tick lit */
.hour-rail {
  border-block: 1px solid var(--line);
  background-color: var(--bg-2);
  padding: 20px 0 16px;
}
.hour-rail__ticks {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 26px;
}
.hour-rail__ticks i {
  width: 2px;
  height: 14px;
  background: var(--signal);
  border-radius: 1px;
}
/* two real states: keyfob-only hours (red) vs the staffed window 8:00–20:00
   (ink) — ticks are hours 0..24, so children 9–21 carry the staffed state */
.hour-rail__ticks i:nth-child(n + 9):nth-child(-n + 21) { background: var(--ink); height: 20px; }
.hour-rail__ticks i:nth-child(6n + 1) { height: 26px; }
.hour-rail__key {
  display: inline-block;
  width: 3px;
  height: 12px;
  border-radius: 1px;
}
.hour-rail__key--fob { background: var(--signal); }
.hour-rail__key--staff { background: var(--ink); }
.hour-rail__cap .seg {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hour-rail__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.hour-rail__cap {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.hour-rail__cap b { color: var(--signal-text); font-weight: 500; }

/* solo review — one voice doesn't get a grid; centered so the row composes */
.review--solo { max-width: 860px; margin: 28px auto 0; }

.lp-local {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
/* LP FAQ drops the card chrome for ruled dossier rows */
.lp-local .faq { gap: 0; }
.lp-local .faq details {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
}
.lp-local .faq details:last-of-type { border-bottom: 1px solid var(--line-2); }
.lp-local .faq summary { padding: 19px 8px; }
.lp-local .faq details[open] summary { border-bottom: 0; }
.lp-local .faq .faq-body { padding: 0 8px 22px 44px; }

.lp-footer {
  border-top: 1px solid var(--line);
  background-color: var(--bg-2);
  padding: 28px 0 34px;
}
.lp-footer .footer-bottom { border-top: none; padding: 0; }
.lp-footer .footer-bottom a { color: inherit; }

.lp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-2);
  border-top: 1px solid var(--line-2);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* clear the iPhone home bar */
}
.lp-sticky a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.lp-sticky a svg { flex: none; }
.lp-sticky .lp-sticky__call { background-color: var(--bg-2); color: var(--ink); }
.lp-sticky .lp-sticky__tour { background: var(--red); color: var(--signal-ink); }

/* keyboard focus must survive the red CTA band (signal-on-red is invisible);
   ghost buttons only — .btn--inverse is white and keeps base's red ring */
.cta-band .btn--ghost:focus-visible { box-shadow: inset 0 0 0 2px var(--signal-ink); }

/* ---------- enhancement layer — concepts ported from reactbits.dev ----
   spotlight-card / border-glow / glare-hover (site-wide; hover-only) and
   tilted-card. Token-driven, no markup changes; js/lp-fx.js feeds the
   cursor position where it's loaded — without it the CSS degrades to a
   centered glow on hover. Grain lives in the base .hero__shade rule.   */

/* spotlight-card — a cursor-tracked light inside HUD cards.
   hover:hover gate keeps touch taps from latching a lit state; form
   cards opt out so the red wash never reads as a validation state. */
.card.hud::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(240px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
    var(--signal-dim), transparent 70%);
}
.card.contact-form-card::after,
.card.lp-form-card::after { content: none; }
@media (hover: hover) {
  .card.hud:hover::after { opacity: 1; }

  /* border-glow — the brackets already flip red on hover; add their halo
     (--signal-glow is zeroed in the light theme, so this self-disables) */
  .hud-hover:hover { box-shadow: var(--signal-glow); }
}

/* glare-hover — one sheen pass across a photo */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ph::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg,
      transparent 42%, rgba(238, 241, 246, 0.13) 50%, transparent 58%);
    transform: translateX(-130%);
  }
  .ph:hover::before {
    transform: translateX(130%);
    transition: transform 0.75s ease;
  }
  .ph__tag { z-index: 2; }
}

/* tilted-card — gentle 3D follow on flagged imagery (js/lp-fx.js) */
[data-fx="tilt"] { transition: transform 0.25s ease; will-change: transform; }

/* ------------------------------------------------------------------ */
/* Expansion — responsive                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 1249px) {
  /* inside the burger menu the dropdown flattens to a labeled group */
  .nav-drop { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-drop__btn { display: none; }
  .nav-drop__label {
    display: block;
    font-family: var(--font-nav);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 18px 2px 8px;
  }
  .nav-drop__panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none !important;
    transition: none;
  }
  .nav-drop__panel a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    padding: 10px 2px 10px 22px;
    border-bottom: 1px solid var(--line);
  }
  .nav-drop__panel a .code { font-size: 0.6rem; }
  .nav-drop__panel a[aria-current="page"] { color: var(--signal); }
}

@media (max-width: 1024px) {
  .posts { grid-template-columns: 1fr 1fr; }
  .amen-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .site-strip { grid-template-columns: 1fr; }
  .site-strip .ph + .ph { aspect-ratio: 16 / 9; }
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-manifest { grid-template-columns: 1fr; }
  .lp-local { grid-template-columns: 1fr; }
  .lp-sticky { display: grid; }
  .lp-body { padding-bottom: calc(59px + env(safe-area-inset-bottom, 0px)); }
  .olog { grid-template-columns: 1fr; padding: 18px 20px; }
  .xsite .btn { margin-left: 0; }
}

@media (max-width: 560px) {
  .lp-body .mf-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .lp-body .mf-zone { grid-column: 1 / -1; }
  .lp-body .hour-rail__labels span:nth-child(even) { display: none; }
  .lp-body .lp-terms { padding-inline: 16px; }
}

@media (max-width: 419px) {
  /* logo alone carries the brand — keeps the header CTA on one line */
  .lp-body .brand__text { display: none; }
  .lp-actions .btn--sm { padding-inline: 0.9em; }
}

@media (max-width: 640px) {
  .posts { grid-template-columns: 1fr; }
  .amen-grid { grid-template-columns: 1fr; }
}

/* ==================================================================== */
/* Site search — "search the files" (js/search.js + js/search-index.js) */
/* ==================================================================== */

.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-nav);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  background-color: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 9px 12px;
  min-height: 38px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-search:hover { color: var(--signal); border-color: var(--signal); }
.nav-search:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--signal); }
.nav-search svg { flex: none; }
.nav-search kbd {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 1px 5px;
}
/* the desktop nav row is permanently capped by the 1180px wrap — the
   search button stays icon-only there so the brand↔nav gap holds */
@media (min-width: 1250px) {
  .nav-search span,
  .nav-search kbd { display: none; }
  .nav-search { padding: 9px 11px; }
}
@media (max-width: 1249px) {
  .nav-search { width: 100%; justify-content: center; min-height: 48px; }
  .nav-search kbd { display: none; }
}

/* footer entry — the input that types its own suggestions */
.footer-search {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}
.footer-search__label {
  font-family: var(--font-nav);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.footer-search__box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  max-width: 480px;
  min-height: 48px;
  padding: 0 12px;
  color: var(--ink-3);
  background-color: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.footer-search__box:focus-within { border-color: var(--signal); }
.footer-search__box svg { flex: none; }
.footer-search__box input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.footer-search__box input::placeholder { color: var(--ink-2); }
.footer-search__box kbd {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 2px 6px;
}

/* the command-palette dialog */
.search-modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(680px, calc(100vw - 32px));
  margin: clamp(24px, 10vh, 120px) auto auto;
}
.search-modal::backdrop { background: rgba(6, 7, 9, 0.66); }
.search-modal__card {
  background-color: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  --hud-c: var(--line-2);
  padding: clamp(18px, 3vw, 26px);
  box-shadow: var(--shadow);
}
.search-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.search-modal__box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--ink-3);
  background-color: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.search-modal__box:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim); }
.search-modal__box svg { flex: none; }
.search-modal__box input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--ink);
}
.search-modal__box input::placeholder { color: var(--ink-3); }
.search-modal__close {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 4px 8px;
  cursor: pointer;
}
.search-modal__close:hover { color: var(--signal); border-color: var(--signal); }
.search-modal__close:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--signal); }
.search-modal__results {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  display: grid;
  gap: 6px;
}
.search-modal__results [role="option"] a {
  display: block;
  padding: 12px 14px;
  text-decoration: none;
  background-color: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.search-modal__results [role="option"] a:hover,
.search-modal__results [role="option"][aria-selected="true"] a {
  border-color: var(--signal);
  background-color: var(--bg-4);
}
.sr-file {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-text);
  margin-bottom: 4px;
}
.sr-head { display: block; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.sr-snip { display: block; margin-top: 3px; font-size: 0.82rem; color: var(--ink-2); }
.search-modal mark {
  background: var(--signal-dim);
  color: inherit;
  padding: 0 1px;
  border-radius: 1px;
}
.search-modal__empty {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding: 18px 4px;
}
.search-modal__hint {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* ==================================================================== */
/* The House (combined story + about) — layout utilities                */
/* ==================================================================== */

.h-display--tight { margin-bottom: 20px; }
.story-facts .stat__value { font-size: 1.6rem; }

.quote-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.quote-pair .mission-quote { max-width: none; margin: 0; }
.quote-pair .mission-quote blockquote { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.mission-quote { background-color: var(--bg-2); }
.mission-quote .eyebrow { justify-content: center; }
.mission-quote blockquote { margin-top: 22px; }
@media (max-width: 880px) {
  .quote-pair { grid-template-columns: 1fr; }
}

/* ==================================================================== */
/* Refinement pass — cross-page polish                                  */
/* ==================================================================== */

/* the nav CTA must never wrap to two lines between pages */
.nav-extra .btn { white-space: nowrap; }

/* footer search row aligns to the footer grid: label in the brand
   column, box flush with the LOCATIONS column */
@media (min-width: 1025px) {
  .footer-search {
    display: grid;
    grid-template-columns: 1.3fr 3fr;
    gap: 36px;
    align-items: center;
  }
  .footer-search__box { max-width: 535px; }
}

/* keyboard focus on result links matches the arrow-key treatment */
.search-modal__results [role="option"] a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

/* touch: the close chip needs a real hit area */
@media (hover: none) {
  .search-modal__close { min-width: 44px; min-height: 40px; }
}

/* iOS zooms sub-16px inputs on focus — the footer entry opens a modal,
   so the zoom would linger behind it */
@media (pointer: coarse) {
  .footer-search__box input { font-size: 1rem; }
}

/* The House — the family photo runs portrait; crop biased toward faces */
#story .story-split .ph { aspect-ratio: 4 / 5; }
#story .story-split .ph img { object-position: center 30%; }

/* values ghost numerals stay out of the text column (the --exp cards
   have free height, so the 7.6rem numeral was running through copy) */
.value--exp .value__ghost { font-size: 5rem; bottom: -10px; }
.value--exp p { padding-right: 84px; }
@media (max-width: 560px) {
  .value--exp p { padding-right: 0; }
  .value--exp .value__ghost { display: none; }
}

/* origin log: cap the sheet so rows do not frame dead space */
.origin-log { max-width: 880px; }

/* member interviews are vertical clips — crop to the sharp center strip
   instead of showing YouTube blurred pillarbox padding */
.vid__face { aspect-ratio: 9 / 16; }
.vid__frame { aspect-ratio: 9 / 16; }

/* phone numbers and similar atoms that must not break mid-line */
.nb { white-space: nowrap; }

/* pricing — stacked plan CTAs share one width; kicker holds one line */
@media (max-width: 560px) {
  .plan-hero__main .btn { flex: 1 1 100%; }
  .plan-hero .eyebrow { font-size: 0.64rem; letter-spacing: 0.2em; }
}

/* FAQ page — dossier question index fills the right rail */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 860px) 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.faq-index {
  position: sticky;
  top: 96px;
  border-left: 1px solid var(--line-2);
  padding-left: clamp(18px, 2vw, 28px);
  display: grid;
  gap: 2px;
}
.faq-index__label {
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.faq-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.9rem;
  transition: color 0.15s ease;
}
.faq-index a:hover { color: var(--signal); }
.faq-index a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.faq-index a .code {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--signal-text);
}
@media (max-width: 1024px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-index { display: none; } /* sections are one flick apart on mobile */
}
.faq-group { scroll-margin-top: 92px; }
.faq details { scroll-margin-top: 92px; }

/* mobile tap comfort: inline cross-reference + FAQ-answer links get a
   44px hit area without moving the line (padding/negative-margin trick) */
.mono.faint a { white-space: nowrap; }
@media (max-width: 880px) {
  .mono.faint a,
  .faq-body a {
    display: inline-flex;
    align-items: center;
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* ==================================================================== */
/* Mobile polish — client-preview readiness pass                        */
/* ==================================================================== */

/* BEST VALUE chip: opaque ground so the card border can't bleed through,
   nudged clear of the corner bracket */
.pt-pack .badge--red {
  background: linear-gradient(var(--signal-dim), var(--signal-dim)), var(--bg-3);
  left: 34px;
}

/* military callout button joins the row on desktop, full-width on phones */
.mil-callout .btn { margin-left: auto; }

@media (max-width: 640px) {
  /* table wraps: the scroll cue beats the corner brackets on a phone */
  .table-wrap.hud {
    background-image:
      linear-gradient(90deg,  var(--bg-3) 38%, transparent),
      linear-gradient(270deg, var(--bg-3) 38%, transparent),
      linear-gradient(90deg,  var(--scroll-shade), transparent),
      linear-gradient(270deg, var(--scroll-shade), transparent);
    background-position: left center, right center, left center, right center;
    background-size: 40px 100%, 40px 100%, 18px 100%, 18px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* single-column value cards: one-line titles shouldn't strand dead space,
     and the ghost numeral stays inside the card */
  .value {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 54px;
  }
  .value .value__ghost { font-size: 5rem; bottom: -10px; }

  /* coach monogram tiles: header band, not a void */
  .trainer__tile { aspect-ratio: 3 / 1; }
  .trainer__tile span { font-size: 2.2rem; }

  /* Camarillo LP night hero: darker photo so gray copy stays readable
     over the bright blurred subject at phone crops */
  .lp-hero--night .hero__media img { filter: saturate(0.88) contrast(1.08) brightness(0.5); }

  /* home feed video tile: vertical clip shows as a vertical crop */
  .posts .post__media { aspect-ratio: 9 / 16; }
  .posts .post__media img { width: 100%; height: 100%; object-fit: cover; }

  .mil-callout .btn { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  /* Ask-a-Human / teaser CTAs share one width */
  .price-teaser .btn { width: 100%; }
}

@media (max-width: 480px) {
  /* dossier hero actions match the LP band treatment */
  .page-hero .btn { width: 100%; }
}

@media (hover: none) {
  /* keyboard hint means nothing on touch */
  .footer-search__box kbd { display: none; }
}

/* photo-ready trainer tiles: drop an <img> into .trainer__tile (replacing
   the monogram span) when real headshots arrive — it covers the frame */
.trainer__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* portraits are framed with faces in the upper third — bias the
     landscape tile crop upward so heads survive the 1/0.72 window */
  object-position: center 18%;
  filter: var(--photo-filter);
}
@media (max-width: 640px) {
  /* headshot tiles keep a portrait-friendly crop; monograms stay 3:1 */
  .trainer__tile:has(img) { aspect-ratio: 4 / 3; }
}

/* ==================================================================== */
/* 404 — File Not Found                                                 */
/* ==================================================================== */

.nf-hero {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 8vw, 104px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.nf-glitch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* giant outlined numeral — same ghost grammar as the values cards */
.nf-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 20vw, 12rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--signal);
  margin: 10px 0 6px;
  width: fit-content;
}
@keyframes nf-glitch-slice {
  0%, 91.5%, 100% { clip-path: none; transform: none; }
  92%  { clip-path: inset(8% -2% 62% -2%); transform: translateX(-7px); }
  93%  { clip-path: inset(58% -2% 10% -2%); transform: translateX(6px); }
  94%  { clip-path: none; transform: none; }
  95.5% { clip-path: inset(34% -2% 38% -2%); transform: translateX(4px); }
  96%  { clip-path: none; transform: none; }
}
html.motion .nf-code { animation: nf-glitch-slice 7s steps(1, end) infinite; }
.nf-hero .lede { max-width: 52ch; }
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.nf-tel {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.nf-links {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}
.nf-links a {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 10px;
  transition: color 0.15s ease;
}
.nf-links a:hover { color: var(--signal); }
.nf-links a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (max-width: 560px) {
  .nf-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html.motion .nf-code { animation: none !important; }
}

/* forms backend — honeypot (humans never see it) + transmit-failure line */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-fail {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bad);
}

/* 404 easter egg — the RERACK counter chip + the held state */
.nf-glitch { pointer-events: auto; }
.nf-rerack {
  pointer-events: none; /* status readout — clicks pass through to the field */
  position: absolute;
  top: clamp(16px, 4vw, 36px);
  right: clamp(16px, 4vw, 36px);
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--signal-text);
  border: 1px solid var(--signal);
  background: linear-gradient(var(--signal-dim), var(--signal-dim)), var(--bg);
  padding: 7px 12px;
  border-radius: 2px;
}
.nf-rerack--held {
  color: var(--ok);
  border-color: var(--ok);
  background: linear-gradient(var(--ok-dim), var(--ok-dim)), var(--bg);
}
.nf-code--held {
  color: var(--red);
  -webkit-text-stroke: 0px transparent;
  text-shadow: 0 0 34px rgba(221, 0, 0, 0.45);
}
html.motion .nf-code--held { animation: none; }

/* ==================================================================== */
/* Ad showcase pages (ad/) — unlisted, full-story, full-nav             */
/* ==================================================================== */

.ad-hero { min-height: clamp(640px, 96vh, 920px); }
.ad-hero .lp-hero__grid {
  grid-template-columns: 1fr;
  padding-block: clamp(48px, 8vw, 96px) clamp(20px, 3vw, 32px);
}
.ad-hero .lp-h1__hi { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
.ad-hero .lp-h1__site { font-size: clamp(3.4rem, 11vw, 6rem); letter-spacing: 0.01em; }
.ad-hero .lp-hero__sub {
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-top: 24px;
}
.ad-hero .hero__cta { margin-top: 30px; }

/* the red stat wall — real numbers, drenched */
.ad-statwall {
  background: var(--red);
  color: var(--signal-ink);
  padding-block: clamp(44px, 6vw, 76px);
}
.ad-statwall .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.ad-stat {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: clamp(14px, 2vw, 26px);
}
.ad-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 3px;
  background: var(--signal-ink);
  transform-origin: left;
}
.ad-stat .stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 0.9;
  padding-top: 14px;
  color: var(--signal-ink);
}
.ad-stat .stat__label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* entrance: the tick wipes in, the numeral and label settle — a one-shot
   left-to-right pass when ad-fx.js flags the band (.fx-on). Prices and
   the discount are exempt from count-up by house rule, so this is the
   only arrival those numerals get. Finished state is the default; only
   html.motion holds it back. */
.ad-stat:nth-child(1) { --sd: 0s; }
.ad-stat:nth-child(2) { --sd: 0.09s; }
.ad-stat:nth-child(3) { --sd: 0.18s; }
.ad-stat:nth-child(4) { --sd: 0.27s; }
html.motion .ad-statwall:not(.fx-on) .ad-stat::before { transform: scaleX(0); }
html.motion .ad-statwall:not(.fx-on) .stat__value { opacity: 0; transform: translateY(10px); }
html.motion .ad-statwall:not(.fx-on) .stat__label { opacity: 0; }
html.motion .ad-statwall.fx-on .ad-stat::before {
  transform: scaleX(1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--sd, 0s);
}
html.motion .ad-statwall.fx-on .stat__value {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.45s ease-out calc(var(--sd, 0s) + 0.08s),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--sd, 0s) + 0.08s),
    filter 0.5s ease-out calc(var(--sd, 0s) + 0.08s);
}
html.motion .ad-statwall.fx-on .stat__label {
  opacity: 1;
  transition: opacity 0.4s ease-out calc(var(--sd, 0s) + 0.24s);
}

/* standalone tour-form section */
.ad-form { max-width: 640px; margin-inline: auto; }

@media (max-width: 880px) {
  .ad-statwall .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================================== */
/* Ad category themes — military / powerlifting / no-contract          */
/* ==================================================================== */

/* -------- military: standing-order document grammar ------------------
   The page is built as a STANDING ORDER, not a costume. Its vocabulary is
   the paperwork a service member actually touches every day — classification
   banners, block-numbered memoranda, stencilled gear markings, date-time
   groups — rather than camo prints and fake insignia. No branch seal, mark
   or emblem appears anywhere: those are protected and their use would imply
   a DoD endorsement that does not exist.

   Palette is olive drab (--od-*) rather than brand red for the military
   furniture only; red stays the call-to-action colour so the conversion
   path still reads as House of Gains.                                    */
.ad-mil {
  --od: #4a5444;          /* FS 34094 "Green 383" — the CARC green, spec value */
  --od-2: #373024;        /* FS 34087 olive drab, flat */
  /* The FED-STD-595 field palette is a SURFACE palette — every drab in it
     sits at 1.5–2.5:1 on graphite and is unusable as text. Ink is a light
     olive (8.8:1 here), never the drab itself. */
  --od-ink: #9cb87a;
  --od-line: #6b7d52;
  --manila: #e5dcc3;      /* buff order paper */
  --manila-2: #d6cbac;    /* paper fold / rule */
  --manila-ink: #2b2a24;  /* typewriter ink */
}
.ad-mil .lp-h1__site,
.ad-mil .ad-statwall .stat__value,
.ad-mil .memo__mark,
.ad-mil .branch-strip li {
  /* the VARIABLE Saira Stencil, not the static "Saira Stencil One" — same
     designer, but it carries wdth+wght so the stencil can be condensed and
     heavy the way real plate lettering is */
  font-family: "Saira Stencil", "Saira Stencil One", var(--font-display);
  font-weight: 700;
  font-stretch: 75%;
}
/* stat wall: drab field, sprayed-through-stencil grain */
.ad-mil .ad-statwall {
  background-color: var(--od);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E");
}
.ad-mil .lp-terms h3 .red { color: var(--od-ink); }
/* stencil-spray arrival: on the OD band the numerals settle out of paint
   mist instead of travelling — spray lands where the stencil sits */
html.motion .ad-mil .ad-statwall:not(.fx-on) .stat__value { transform: none; filter: blur(9px); }
html.motion .ad-mil .ad-statwall.fx-on .stat__value { transform: none; filter: blur(0); }

/* ---- classification banner ----------------------------------------
   Centred, all-caps, top AND bottom of the document — the way every
   marked page is banner-lined. Green is the UNCLASSIFIED colour. Fixed
   in both themes: it's a printed marking, not a themed surface.        */
.cls-banner {
  background: #00703c;
  color: #ffffff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(0.56rem, 1.5vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 16px;
  line-height: 1.3;
}
.cls-banner--foot { border-top: 0; }

/* A distribution statement is its OWN block, never part of the banner line —
   real banners carry the classification and nothing else, and the same string
   repeats top and bottom. Mashing the two together is the tell. */
.dist-stmt {
  max-width: 780px;
  margin: 0 auto;
  padding: 13px 18px;
  border: 1px solid var(--od-line);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.dist-stmt b { color: var(--od-ink); font-weight: 600; }

/* ---- date-time group stamp ---------------------------------------- */
.dtg {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--od-ink);
  border: 1px solid var(--od-line);
  padding: 7px 13px;
  max-width: none;
}
/* each field wraps as a unit — a bare flex row broke "HOGG ORDER 15.1"
   across two lines mid-field */
.dtg > span { white-space: nowrap; }
.dtg b { color: #ffffff; font-weight: 600; letter-spacing: 0.1em; }

/* ---- the standing order: a buff order sheet on the dark page -------
   Deliberately a different physical object from the no-contract receipt
   (buff + typewritten + tall, vs. white thermal + narrow), so the two
   category themes never read as the same trick.                        */
.memo {
  position: relative;
  background: var(--manila);
  color: var(--manila-ink);
  padding: clamp(26px, 4vw, 46px) clamp(22px, 4vw, 52px) clamp(30px, 4vw, 46px);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.75;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  max-width: 860px;
  margin-inline: auto;
}
/* torn/aged top and bottom edge */
.memo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120, 106, 70, 0.09) 1px, transparent 1px);
  background-size: 100% 28px;
  pointer-events: none;
}
.memo__head {
  text-align: center;
  border-bottom: 2px solid var(--manila-ink);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.memo__head b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.memo__head span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c584a;
  margin-top: 3px;
}
.memo__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5c584a;
  margin-bottom: 20px;
}
.memo__meta b { color: var(--manila-ink); font-weight: 600; }
.memo dl { margin: 0 0 20px; }
.memo dt {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5c584a;
  float: left;
  width: 74px;
  clear: left;
}
.memo dd { margin: 0 0 6px 74px; font-weight: 500; }
.memo ol {
  list-style: none;
  counter-reset: para;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--manila-2);
  padding-top: 18px;
}
.memo ol > li {
  counter-increment: para;
  position: relative;
  padding-left: 40px;
  margin-bottom: 15px;
}
.memo ol > li::before {
  content: counter(para) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.memo ol > li b {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
/* signature block sits right-of-centre, the way a real one does */
.memo__sig {
  margin-top: 26px;
  padding-top: 8px;
  margin-left: auto;
  width: min(300px, 100%);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}
.memo__sig b { display: block; font-weight: 700; letter-spacing: 0.14em; }
.memo__sig span { color: #5c584a; }
/* stencilled acceptance mark — bottom LEFT, clear of the signature block
   that sits bottom right (a stamp landing on the signature is exactly what
   a real clerk avoids, and it buried the owners' names here) */
.memo__mark {
  position: absolute;
  left: clamp(18px, 5vw, 64px);
  bottom: clamp(14px, 3vw, 40px);
  transform: rotate(-11deg);
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgba(150, 36, 30, 0.72);
  border: 4px double rgba(150, 36, 30, 0.72);
  padding: 8px 16px;
  pointer-events: none;
  text-transform: uppercase;
}
html.motion .memo__mark:not(.fx-on) { opacity: 0; transform: rotate(-11deg) scale(1.85); }
html.motion .memo__mark.fx-on {
  opacity: 1;
  transform: rotate(-11deg) scale(1);
  transition: opacity 0.26s ease-out, transform 0.26s cubic-bezier(0.2, 1.45, 0.4, 1);
}
@media (max-width: 700px) {
  .memo__mark { position: static; display: inline-block; margin-top: 20px; transform: rotate(-6deg); }
  html.motion .memo__mark:not(.fx-on) { transform: rotate(-6deg) scale(1.85); }
  html.motion .memo__mark.fx-on { transform: rotate(-6deg) scale(1); }
  .memo dt { float: none; width: auto; }
  .memo dd { margin-left: 0; margin-bottom: 12px; }
}

/* ---- branch grid: SIGNAL plates, each service's accent on the mark --
   THE DEVICES ARE ORIGINAL DRAWINGS OF GENERIC SYMBOLS — a star, an
   anchor, a globe, wings, a triangle, a life ring. They are NOT the
   services' emblems. The Eagle-Globe-and-Anchor, the Space Force delta
   mark, the Hap Arnold wings, the Coast Guard seal and the Army star
   logo are registered trademarks: commercial use needs a per-service
   licence and would assert a DoD endorsement that does not exist.
   Each service's accent is its own published brand value (colours are
   not protected the way an emblem is), but it is confined to the drawn
   device and a statwall-grammar top tick: the plates themselves are the
   site's graphite, so the row reads as SIGNAL rendering the branches
   rather than six foreign badges parked on the page. Plates stay
   pinned dark in both themes (lp-hero convention) — the gold and red
   devices have no contrast on a light surface.
   The name stays the loudest element so this reads as identification. */
.branch-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
}
@media (max-width: 1000px) { .branch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.branch {
  position: relative;
  background: #10131a; /* --bg-2 dark value, pinned in both themes */
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: clamp(20px, 2.6vw, 30px) 8px clamp(16px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vw, 12px);
  text-align: center;
}
/* the service accent rides the statwall tick grammar — a short centred
   top tick — never a full-width colour bar */
.branch::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--b-accent);
}
.branch svg {
  width: clamp(44px, 5.8vw, 64px);
  height: auto;
  color: var(--b-accent);
  flex: none;
}
.branch b {
  font-family: "Saira Stencil", "Saira Stencil One", var(--font-display);
  font-weight: 700;
  font-stretch: 75%;
  font-size: clamp(0.74rem, 1.5vw, 0.96rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
}
/* ---- draw-on reveal --------------------------------------------------
   Every mark carries pathLength="1", so dasharray/dashoffset are in
   normalised units and all six draw at the SAME rate regardless of how
   long their outlines actually are. Default state is DRAWN — only under
   html.motion is a mark held back, so no-JS and reduced-motion users
   never see an empty ring. The ring leads, the device follows. */
.branch svg :is(path, circle, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.motion .branch-grid:not(.fx-on) svg :is(path, circle, ellipse) { stroke-dashoffset: 1; }
html.motion .branch-grid.fx-on svg :is(path, circle, ellipse) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0s) + 0.17s);
}
html.motion .branch-grid.fx-on svg .ring {
  transition-duration: 0.58s;
  transition-delay: var(--d, 0s);
}
/* the inner bezel is what makes a roundel read as a SEAL rather than a
   circle — it draws just behind the outer ring, ahead of the device */
.branch svg .ring2 { opacity: 0.42; stroke-width: 1; }
html.motion .branch-grid.fx-on svg .ring2 {
  transition-duration: 0.58s;
  transition-delay: calc(var(--d, 0s) + 0.07s);
}
.branch:nth-child(1) { --d: 0s; }
.branch:nth-child(2) { --d: 0.08s; }
.branch:nth-child(3) { --d: 0.16s; }
.branch:nth-child(4) { --d: 0.24s; }
.branch:nth-child(5) { --d: 0.32s; }
.branch:nth-child(6) { --d: 0.40s; }

/* ---- hover: the plate lifts, the mark takes its own accent as glow --- */
@media (hover: hover) and (pointer: fine) {
  .branch { transition: box-shadow 0.24s ease, border-color 0.24s ease; }
  .branch:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.24); }
  .branch:hover svg { filter: drop-shadow(0 0 9px currentColor); }
  html.motion .branch { transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; }
  html.motion .branch:hover { transform: translateY(-3px); }
  html.motion .branch svg { transition: filter 0.24s ease; }
}

/* each service's own published brand accent */
.branch--army { --b-accent: #ffcc01; }
.branch--navy { --b-accent: #e8b00f; }
.branch--usmc { --b-accent: #efc97b; }
.branch--usaf { --b-accent: #c8a667; }
.branch--ussf { --b-accent: #e34217; }
.branch--uscg { --b-accent: #e1251b; }
/* plates stay pinned dark on the light theme; the page hairline reads
   better against a light ground than the white one */
html[data-theme="light"] .branch { border-color: rgba(17, 20, 27, 0.35); }

/* ---- branch strip: named, never badged (legacy, kept for B twins) -- */
.branch-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(16px, 2.4vw, 30px);
}
/* sized so all six sit on one row at desktop — a lone wrapped "Coast
   Guard" reads as an afterthought, which is the one thing this strip
   must never do */
.branch-strip li {
  font-size: clamp(1rem, 2.3vw, 1.62rem);
  letter-spacing: 0.03em;
  color: var(--od-ink);
  text-transform: uppercase;
}
.branch-strip li span { color: var(--ink-3); }
/* base.css caps every <p> at 64ch, so a centred caption under the strip
   centres inside a left-aligned box unless the box is centred too */
.branch-grid + .lp-micro,
.branch-strip + .lp-micro {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* ---- accepted-credential cards ------------------------------------ */
.id-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}
.id-card {
  position: relative;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--od-line);
  background: var(--bg-3);
  padding: 16px 18px 15px;
}
.id-card b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.id-card span {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.id-card .id-form {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--od-ink);
  margin-top: 9px;
  display: block;
  text-transform: uppercase;
}

/* ---- accepted credentials, compact ---------------------------------
   Was five padded cards at 876px; an ad page cannot spend that on a
   list of ID types. Same information, two columns, a third the height. */
.id-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(18px, 3vw, 36px); }
@media (max-width: 760px) { .id-list { columns: 1; } }
.id-list li {
  break-inside: avoid;
  margin-bottom: 12px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--od-line);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.id-list b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--od-ink);
  margin-bottom: 2px;
}

/* ---- neighbour block: the base next door -------------------------- */
.mil-near {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 3vw, 28px);
}
.mil-near__item {
  border-top: 2px solid var(--od-line);
  padding-top: 16px;
}
.mil-near__item .n-dist {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 0.95;
  color: var(--ink);
}
.mil-near__item .n-dist em { font-style: normal; font-size: 0.42em; color: var(--od-ink); letter-spacing: 0.08em; }
.mil-near__item .n-lab {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* the sourcing/disclaimer note needs to read as a footnote to the row,
   not as a fifth column of it */
.mil-near + .lp-micro { margin-top: clamp(24px, 3.4vw, 38px); }
/* redaction bars: black ink in every theme — that's what redactions are.
   Default (no JS / no motion) renders open; motion draws the bar and
   slides it off when the line scrolls into view (.fx-on). */
.redact { position: relative; display: inline-block; }
.redact::after {
  content: "";
  position: absolute;
  inset: -1px -3px;
  background: #101318;
  transform: scaleX(0);
  transform-origin: right center;
}
html.motion .redact:not(.fx-on)::after { transform: scaleX(1); }
html.motion .redact.fx-on::after {
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
/* rubber stamp — replaces the badge on the how-it-works card */
.mil-stamp {
  position: absolute;
  top: 18px; right: 20px;
  transform: rotate(-7deg);
  font-family: "Saira Stencil One", var(--font-display);
  font-size: 0.86rem;
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #8ea86c;
  border: 3px double #8ea86c;
  border-radius: 3px;
  padding: 6px 12px;
  opacity: 0.92;
  pointer-events: none;
}
html.motion .mil-stamp:not(.fx-on) { opacity: 0; transform: rotate(-7deg) scale(1.7); }
html.motion .mil-stamp.fx-on {
  opacity: 0.92;
  transform: rotate(-7deg) scale(1);
  transition: opacity 0.28s ease-out, transform 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ad-mil .manifest-card { position: relative; }
@media (max-width: 640px) { .mil-stamp { position: static; display: inline-block; margin-top: 10px; } }

/* -------- powerlifting: IPF kilo colors + chalk grain ---------------- */
.ad-pl .ad-statwall {
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
/* stat ticks carry the kilo plate colors: 25 red · 20 blue · 15 yellow · 10 green */
.ad-pl .ad-stat:nth-child(1)::before { background: #e0463c; }
.ad-pl .ad-stat:nth-child(2)::before { background: #3565c4; }
.ad-pl .ad-stat:nth-child(3)::before { background: #e5b62e; }
.ad-pl .ad-stat:nth-child(4)::before { background: #3f9e63; }
.kilo-rail {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.kilo-rail .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; width: min(1180px, 100% - 48px); margin-inline: auto; }
.kilo {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  flex: none;
}
.kilo--25 { background: #e0463c; }
.kilo--20 { background: #3565c4; }
.kilo--15 { background: #e5b62e; color: #17191d; }
.kilo--10 { background: #3f9e63; }
.kilo-rail__cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
}
/* the discs load L→R like plates sliding onto a sleeve; the caption
   reads last. Finished state is default — only html.motion holds it. */
.kilo:nth-of-type(1) { --kd: 0s; }
.kilo:nth-of-type(2) { --kd: 0.08s; }
.kilo:nth-of-type(3) { --kd: 0.16s; }
.kilo:nth-of-type(4) { --kd: 0.24s; }
html.motion .kilo-rail:not(.fx-on) .kilo { opacity: 0; transform: translateX(-26px); }
html.motion .kilo-rail:not(.fx-on) .kilo-rail__cap { opacity: 0; }
html.motion .kilo-rail.fx-on .kilo {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 0.32s ease-out var(--kd, 0s),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--kd, 0s);
}
html.motion .kilo-rail.fx-on .kilo-rail__cap { opacity: 1; transition: opacity 0.4s ease-out 0.4s; }

/* ---- three white lights --------------------------------------------
   The referees' verdict, borrowed as the page's closing argument: three
   whites means the lift counts. The lamps sit dead (unlit) until they
   scroll into view, then snap on as one verdict. Without motion they
   render lit — the point is the verdict, not the animation.           */
.lights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 44px);
  margin-top: clamp(26px, 4vw, 44px);
}
.lights__item { text-align: center; }
.lamp {
  width: clamp(54px, 8vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--bg-4);
  border: 3px solid var(--line-2);
  box-shadow: inset 0 5px 14px rgba(0, 0, 0, 0.55);
}
/* All three snap on TOGETHER after a pause, never in sequence. The IPF
   rulebook is explicit that the lights "light up together and not
   separately" — a cascading reveal is the one thing that would read as
   wrong to an actual lifter. The pause is the referees deciding. */
.lights.fx-on .lamp {
  background: radial-gradient(circle at 38% 32%, #ffffff, #eef1f6 55%, #c3ccd8);
  border-color: #ffffff;
  box-shadow: 0 0 38px rgba(255, 255, 255, 0.55), inset 0 2px 9px rgba(255, 255, 255, 0.8);
}
html.motion .lamp {
  transition: background 0.1s linear 0.45s, border-color 0.1s linear 0.45s, box-shadow 0.24s ease-out 0.45s;
}
/* the verdict line reads only after the lights are up */
html.motion .lights:not(.fx-on) + .lights__verdict { opacity: 0; }
html.motion .lights.fx-on + .lights__verdict { opacity: 1; transition: opacity 0.5s ease-out 0.85s; }
.lights__item b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.lights__item span {
  display: block;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}
.lights__verdict {
  margin-top: clamp(26px, 4vw, 40px);
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.6vw, 0.84rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: none;
}
.lights__verdict b { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) {
  .lights { grid-template-columns: 1fr; gap: 26px; }
  .lights__item { display: grid; grid-template-columns: 54px 1fr; gap: 0 18px; text-align: left; align-items: center; }
  .lamp { margin: 0; grid-row: span 2; }
  .lights__item span { grid-column: 2; }
}

/* -------- no-contract: paper receipt + voided fine print ------------- */
/* the receipt is a physical object — white paper in both themes */
.ad-nc .lp-terms {
  background: #ffffff;
  color: #17191d;
  border: 1px solid #d8d8d2;
  padding: 26px 24px;
  font-family: var(--font-mono);
  /* perforated tear edges */
  -webkit-mask-image: linear-gradient(#000, #000);
  position: relative;
}
.ad-nc .lp-terms::before,
.ad-nc .lp-terms::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  background-image: radial-gradient(circle at 6px 4px, var(--bg) 4px, transparent 4.5px);
  background-size: 16px 8px;
  background-repeat: repeat-x;
}
.ad-nc .lp-terms::before { top: -1px; }
.ad-nc .lp-terms::after { bottom: -1px; transform: scaleY(-1); }
.ad-nc .lp-terms h3 { color: #17191d; font-family: var(--font-head); }
.ad-nc .lp-terms .term-row { border-bottom: 1px dashed #b9b9af; }
.ad-nc .lp-terms .term-row span { color: #5a5f66; }
.ad-nc .lp-terms .term-row b { color: #17191d; }
.ad-nc .lp-terms .term-row b.red { color: var(--red); }
.ad-nc .lp-terms .lp-micro { color: #5a5f66; }
/* the receipt's print-out reveal lives in motion.css as data-rv="print"
   — it must ride the motion.js observer (threshold 0), because a
   self-clipped element can never reach ad-fx's 0.7 threshold */
/* fine-print exhibit */
.fineprint-card { max-width: 880px; margin-inline: auto; }
/* The VOID stamp must NOT live inside .fineprint: an absolutely-positioned
   child of a `columns` container gets a broken containing block in Chrome
   (it resolved to 1445px wide, spilling past the viewport, so the reveal
   observer's 0.7 threshold could never trip and the stamp stayed at
   opacity 0). It rides on this wrapper instead. */
.fineprint-wrap { position: relative; margin-top: 22px; }
.fineprint {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  columns: 3;
  column-gap: 22px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow: hidden;
}
@media (max-width: 700px) { .fineprint { columns: 2; } }
/* self-centred at its own text size — a full-bleed inset:0 overlay
   rotated 9° grows a bounding box wider than the viewport and adds
   page-level horizontal scroll (and starves its own IO reveal) */
.fp-void {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 5.6rem);
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 3px var(--signal);
  transform: translate(-50%, -50%) rotate(-9deg);
  opacity: 0.9;
  pointer-events: none;
}
html.motion .fp-void:not(.fx-on) { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.6); }
html.motion .fp-void.fx-on {
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(-9deg) scale(1);
  transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) 0.25s;
}
/* ---- the clauses that aren't in ours -------------------------------
   A wall of struck-through terms against a single line of ours. Every
   item is phrased as something ABSENT FROM THIS AGREEMENT — the page
   never asserts what any other gym's contract contains.               */
.deal-vs {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
}
.deal-col { border-top: 2px solid var(--line-2); padding-top: 20px; }
.deal-col--us { border-top-color: var(--signal); }
.deal-col h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.deal-no { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; }
@media (max-width: 760px) { .deal-no { columns: 1; } }
.deal-no li {
  break-inside: avoid;
  padding: 7px 0;
  color: var(--ink-3);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--line);
  /* line-through (not an absolutely-placed bar) so a wrapped clause is
     struck on every line it occupies */
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
}
.deal-no li.fx-on { text-decoration-color: var(--signal); }
html.motion .deal-no li { transition: text-decoration-color 0.35s ease-out; }
html.motion .deal-no li:nth-child(2n) { transition-delay: 0.06s; }
html.motion .deal-no li:nth-child(3n) { transition-delay: 0.12s; }
.deal-one {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
  max-width: none;
}
.deal-one em { font-style: normal; color: var(--signal); }
.deal-yes { list-style: none; margin: 20px 0 0; padding: 0; }
.deal-yes li {
  position: relative;
  padding: 8px 0 8px 26px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.92rem;
}
.deal-yes li::before {
  content: "";
  position: absolute;
  left: 2px; top: 15px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
@media (max-width: 860px) { .deal-vs { grid-template-columns: 1fr; } }

/* struck-before-you-signed terms */
.strike { position: relative; white-space: nowrap; }
.strike::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  top: 52%;
  height: 2px;
  background: var(--signal);
  transform: scaleX(1);
  transform-origin: left center;
}
html.motion .strike:not(.fx-on)::after { transform: scaleX(0); }
html.motion .strike.fx-on::after {
  transform: scaleX(1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

/* safety nets: reduced motion / print always shows the finished state */
@media (prefers-reduced-motion: reduce), print {
  .redact::after { transform: scaleX(0) !important; transition: none !important; }
  .mil-stamp, .fp-void { opacity: 0.92 !important; transform: rotate(-7deg) !important; transition: none !important; }
  .fp-void { transform: translate(-50%, -50%) rotate(-9deg) !important; opacity: 0.9 !important; }
  .memo__mark { opacity: 1 !important; transform: rotate(-11deg) !important; transition: none !important; }
  .strike::after { transform: scaleX(1) !important; transition: none !important; }
  /* the verdict must read as three whites even when nothing animates */
  .lights .lamp {
    background: radial-gradient(circle at 38% 32%, #ffffff, #eef1f6 55%, #c3ccd8) !important;
    border-color: #ffffff !important;
    transition: none !important;
  }
  /* an unstruck clause list would read as terms we DO impose */
  .deal-no li { text-decoration-color: var(--signal) !important; transition: none !important; }
  /* the statwall arrival always lands finished */
  .ad-statwall .ad-stat::before { transform: scaleX(1) !important; transition: none !important; }
  .ad-statwall .stat__value { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .ad-statwall .stat__label { opacity: 1 !important; transition: none !important; }
  /* loaded plates and a read verdict */
  .kilo, .kilo-rail__cap, .lights__verdict { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* an undrawn branch mark would be six empty rings */
  .branch svg :is(path, circle, ellipse) { stroke-dashoffset: 0 !important; transition: none !important; }
  .branch:hover { transform: none !important; }
}
@media (max-width: 700px) {
  @media (prefers-reduced-motion: reduce), print {
    .memo__mark { transform: rotate(-6deg) !important; }
  }
}

/* ad pages — the one real review + trust facts, at the point of
   decision. One block replaces the old floating review card AND the
   chip strip; there is exactly one real review per page — never pad
   this with invented ones. */
.ad-vouch {
  max-width: 680px;
  margin: 0 auto 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.ad-vouch blockquote {
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.ad-vouch figcaption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ad-vouch figcaption b { color: var(--ink); font-weight: 500; }

/* ad pages — compact both-houses strip: the loc-card pair said this in
   two full cards; two mono rows carry the same facts */
.site-line__kick {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.site-line { border-top: 1px solid var(--line); }
.site-line__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.site-line__row > b {
  font-family: var(--font-head);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  min-width: 15ch;
}
.site-line__x { color: var(--signal-text); }
.site-line__row a { color: var(--ink); text-decoration: none; }
.site-line__row a.site-line__dir {
  margin-left: auto;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-line__row a.site-line__dir:hover { color: var(--ink); }
.site-line + .lp-micro { margin-top: 14px; }
@media (max-width: 700px) {
  .site-line__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* stacked plain-text links need real tap height */
  .site-line__row a { padding-block: 8px; }
  .site-line__row a.site-line__dir { margin-left: 0; }
}

/* ==================================================================== */
/* Motto mark — official LIFT LOCAL™ lockup (community section)        */
/* ==================================================================== */

.motto-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 6px auto 34px;
  text-align: center;
}
.motto-mark img { width: min(280px, 56vw); height: auto; }
/* the shipped asset is the white variant — flip it to ink on light theme (and print) */
html[data-theme="light"] .motto-mark img { filter: invert(1); }
@media print { .motto-mark img { filter: invert(1); } }
.motto-mark figcaption { font-size: 0.66rem; letter-spacing: 0.14em; }