/* ============================================================
   "Signal" theme (2026-10-25): carries the home page look onto every page.
   Loaded on every page right after style.css. It restyles the existing
   component classes, so page markup stays as it is. The home page adds
   css/home.css on top for its own hd- sections.
   ============================================================ */

:root {
  --hd-night: #0F1A2E;     /* page ground for the dark bands */
  --hd-night-2: #13213A;
  --hd-soft: #C9D3E3;      /* body text on --hd-night, 11.6:1 */
  --hd-dim: #A9B6CB;       /* secondary text on --hd-night, 8.3:1 */
  --radius-card: 18px;
}

/* -------- Dark header, every page -------- */
.site-header {
  background: var(--hd-night);
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: none;
  --focus-color: #fff;
}
.site-header nav.main a { color: var(--hd-soft); }
.site-header nav.main a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.site-header nav.main a.active { color: var(--gold); }
.site-header .mobile-toggle span { background: #fff; }
.topbar { background: var(--hd-night-2); }
@media (max-width: 1040px) {
  .site-header nav.main.open { background: var(--hd-night); border-bottom-color: rgba(255, 255, 255, .1); }
}

/* -------- Type -------- */
h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -.02em; }
.section-head { margin-bottom: 48px; }
.section-head h2 { text-wrap: balance; }
.btn { border-radius: 10px; font-weight: 700; padding: 14px 24px; }

/* Inline links inside running text are underlined, so they never rely on colour alone. */
main p a:not(.btn), main li a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* -------- Heroes -------- */
.hero {
  background: var(--hd-night);
  color: var(--hd-soft);
}
.hero::before { /* faint blueprint grid instead of the old blue glow */
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto; height: auto;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent);
          mask-image: linear-gradient(180deg, #000 50%, transparent);
}
.hero::after { /* warm glow, top right */
  top: -160px; right: -180px; bottom: auto; left: auto;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 69, 43, .24) 0%, rgba(232, 69, 43, 0) 65%);
}
.hero .wrap { padding: 88px 24px 96px; z-index: 1; }
.hero.compact .wrap { padding: 72px 24px 80px; }
.hero h1 {
  font-weight: 800;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.026em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero.compact h1 { font-size: clamp(34px, 4.4vw, 58px); max-width: 980px; }
.hero .lede { color: var(--hd-soft); font-size: clamp(17px, 1.5vw, 19.5px); }
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  margin-bottom: 22px;
  border: 1px solid rgba(244, 156, 139, .4);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 1.2px;
}
.hero-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  padding: 30px 30px 26px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
}
.hero-card h2 { font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.hero-card li { color: var(--hd-soft); }
.hero-card li::before { color: var(--orange); }

/* -------- Stat strip -------- */
.trust { background: var(--cream); border-bottom: 0; padding: 48px 0 8px; }
.trust .wrap { text-align: left; gap: 16px; }
.trust .wrap > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px 26px;
}
.trust .num { font-family: var(--font-head); font-size: clamp(32px, 3vw, 42px); line-height: 1; }
.trust .label { margin-top: 8px; font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 500; line-height: 1.45; }
.trust + section.block { padding-top: 72px; }

/* -------- Sections -------- */
section.block.alt { background: var(--cream-alt); }
section.block.dark {
  position: relative;
  overflow: hidden;
  background: var(--hd-night);
  color: var(--hd-soft);
}
section.block.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
section.block.dark > .wrap { position: relative; }
section.block.dark .lede.invert { color: var(--hd-soft); }

/* -------- Cards: one radius, one border, one lift -------- */
.track-card, .tier, .svc-card, .area-card, .outcome, .contact-form, .pain, .spec, .cred {
  border-radius: var(--radius-card);
}
.track-card, .tier, .svc-card, .area-card { box-shadow: var(--shadow-soft); }
.tier { padding: 34px 28px; }
.tier .price { font-family: var(--font-head); font-size: 46px; letter-spacing: -.02em; }
.tier.featured {
  border: 2px solid var(--orange-dark);
  box-shadow: 0 24px 50px rgba(198, 55, 31, .16);
}
.pain, .spec {
  border-left: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  padding-left: 30px;
}
.pain::before, .spec::before {
  content: "";
  position: absolute;
  left: 14px; top: 22px; bottom: 22px;
  width: 4px;
  border-radius: 4px;
  background: var(--orange);
}
.spec.blue::before { background: var(--blue); }
.specialties { background: var(--cream); border-bottom: 0; }
.svc-card .icon { border-radius: 14px; }
.mara-door { border-radius: var(--radius-card); background: rgba(255, 255, 255, .05); }
.about-card { background: var(--hd-night); border-radius: 22px; box-shadow: 0 30px 60px rgba(15, 26, 46, .22); }
.step .step-num { border-radius: 999px; }
.faq { border-bottom-color: var(--border); }
.contact-form { box-shadow: 0 24px 50px rgba(15, 26, 46, .08); }
.contact-form input, .contact-form select, .contact-form textarea, .track-face { border-radius: 10px; }

/* -------- CTA band: red card on the night ground -------- */
.cta-band {
  background: var(--hd-night);
  padding: 32px 0 96px;
  --focus-color: #fff;
}
.cta-band .wrap {
  position: relative;
  overflow: hidden;
  padding: 64px 48px;
  border-radius: 28px;
  background: var(--orange-dark);
  isolation: isolate;
}
.cta-band .wrap::after { /* the M-and-roof mark, faint, bottom right */
  content: "";
  position: absolute;
  right: -40px; bottom: -110px;
  width: 360px; height: 370px;
  z-index: -1;
  opacity: .12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='150 140 700 720'%3E%3Cpath d='M180,438 L500,168 L820,438' fill='none' stroke='%23fff' stroke-width='58' stroke-linecap='square'/%3E%3Cpath d='M282,832 L282,438 L372,438 L500,628 L628,438 L718,438 L718,832 L636,832 L636,562 L500,760 L364,562 L364,832 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}
.cta-band h2 { font-weight: 800; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.04; }
.cta-band p { font-size: 18px; }
.cta-band .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.cta-band .btn-outline-light { border-color: rgba(255, 255, 255, .7); }
.cta-band .btn-outline-light:hover { color: var(--orange-deep); }
/* A section that follows the hero directly gets the cream ground so cards read. */
main > .cta-band:last-child { margin-bottom: 0; }

/* -------- Responsive -------- */
@media (max-width: 980px) {
  .trust .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero .wrap { padding: 52px 24px 64px; }
  .hero.compact .wrap { padding: 48px 24px 56px; }
  .hero .eyebrow { font-size: 11px; letter-spacing: .8px; }
  .trust { padding-top: 32px; }
  .trust .wrap { gap: 10px; }
  .trust .wrap > div { padding: 18px; border-radius: 14px; }
  .cta-band { padding: 16px 0 72px; }
  .cta-band .wrap { padding: 44px 24px; margin: 0 16px; border-radius: 22px; }
  .cta-band .btn { width: 100%; margin: 6px 0; }
}

/* -------- Motion (only for visitors who have not asked for less) -------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lede, .hero .hero-cta, .hero-card {
    animation: sg-rise .7s cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero h1 { animation-delay: .06s; }
  .hero .lede { animation-delay: .14s; }
  .hero .hero-cta { animation-delay: .22s; }
  .hero-card { animation-delay: .3s; }

  .track-card, .tier, .svc-card, .area-card { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .2s ease; }
  .tier:hover, .track-card:hover, .svc-card:hover, .area-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(15, 26, 46, .14); }

  /* Scroll reveal: js/reveal.js adds .js-reveal to <html> only when it can run the observer,
     so without JS nothing is ever hidden. --rd is a per-item stagger it sets. */
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease var(--rd, 0s), transform .7s cubic-bezier(.16, 1, .3, 1) var(--rd, 0s);
  }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
  /* After the fade, reveal.js removes data-reveal so each card's own hover transition applies again. */
}
@keyframes sg-rise { from { opacity: 0; transform: translateY(18px); } }