/* =================================================================
   EXCELSIOR BRAND LAYER — css/brand.css
   Source: Excelsior Branding Board (Sept 2026)
   Loaded LAST on every page (after style.css and any page <style>).
   Remove the one <link rel="stylesheet" href="/css/brand.css"> line
   from a page to revert that page to the pre-brand look.
   style.css is intentionally untouched.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600&family=JetBrains+Mono:wght@500&family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap');

/* ── 1. TOKENS ────────────────────────────────────────────────────
   Board palette: Blackout #0C0C0D · Field Green #25382E ·
   Olive Signal #4A5D42 · Gunmetal #484F4E · Concrete #A5A7A6 ·
   Brass #C6A158 (reserved for accents, authority, earned status).
   Surface steps between Blackout and Gunmetal are derived.
   Old variable NAMES are kept so every existing rule picks these up. */
:root {
  --blackout:     #0C0C0D;
  --field-green:  #25382E;
  --olive:        #4A5D42;
  --gunmetal:     #484F4E;
  --concrete:     #A5A7A6;
  --brass:        #C6A158;
  --brass-hi:     #DDBE7E;
  --brass-lo:     #A07F43;

  /* site-wide (style.css names) */
  --black:        var(--blackout);
  --charcoal:     #121414;
  --dark-grey:    #181B1A;
  --mid-grey:     #2A2F2E;
  --steel:        #8A908E;   /* muted text: 5.9:1 on Blackout */
  --light-grey:   var(--concrete);
  --off-white:    #E7E8E5;
  --white:        #F3F4F1;
  --kmr-green:    var(--olive);
  --kmr-green-dk: var(--field-green);
  --kmr-green-lt: #6B7F61;
  --accent:       var(--brass);
  --accent-dk:    var(--brass-lo);
  --shadow-btn:   0 2px 10px rgba(198,161,88,0.22);

  /* funnel-page names (free-trial, 30-day-kickstart, vip) */
  --dark:         #121414;
  --mid:          #2A2F2E;
  --green:        var(--olive);
  --green-lt:     #6B7F61;
  --muted:        #8A908E;

  /* type */
  --font-headline: 'Teko', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-heading:  'Barlow Condensed', 'Arial Narrow', sans-serif;  /* was Oswald */
  --font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-d:        'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'Barlow', system-ui, sans-serif;
  --font-b:        'Barlow', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

body { background-color: var(--blackout); }

/* ── 2. HEADLINES — Teko ──────────────────────────────────────────
   [class] variants lift specificity above single-class page rules. */
h1, h2, h1[class], h2[class],
.section-title, .hero-headline, .page-hero h1, .cta-banner h2,
.sch-title, .trial-h1, .cards-title, .hero-h1, .final-cta h2, .vip-h1,
.cs-title, .big-stat, .price-amount, .stat-num, .trust-num,
.expect-num, .value-num {
  font-family: var(--font-headline);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0.01em;
}
/* Teko sets smaller than Barlow Condensed at the same size — scale up. */
h1, h1[class], .hero-headline, .trial-h1, .vip-h1 { font-size: clamp(3.4rem, 7.2vw, 6rem); }
.page-hero h1                    { font-size: clamp(3rem, 6vw, 4.8rem); }
.hero-h1                         { font-size: clamp(2.5rem, 4.8vw, 3.9rem); }
h2, h2[class], .section-title,
.cta-banner h2, .final-cta h2    { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
.cards-title, .sch-title         { font-size: clamp(2.4rem, 5vw, 3.6rem); }

/* Subheads — Barlow Condensed SemiBold (board) */
h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; }

/* Utility labels — JetBrains Mono (board: "LEVEL 01-05 • CERTIFIED") */
.eyebrow, .trial-eyebrow, .prog-hero-eyebrow, .contact-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--brass);
}

.divider, .divider-line { background: var(--olive); }

/* ── 3. BUTTONS — board UI elements ───────────────────────────────
   Primary: brushed brass (the one bold element on the page).
   Secondary (.btn-green): Field Green.  Tertiary (.btn-outline): Blackout + Concrete edge. */
.btn, .btn-primary, .btn-outline, .btn-green { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.12em; }

.btn-primary, a.btn-primary, button.btn-primary,
.btn-submit, .submit-btn, .btn-cs {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--blackout);
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 46%, var(--brass-lo) 100%);
  border: 1px solid #8C6E38;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.55),   /* specular top edge */
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 10px rgba(198,161,88,0.2);
  text-shadow: 0 1px 0 rgba(255,240,200,0.35);
}
.btn-primary::after, .btn-submit::after, .submit-btn::after, .btn-cs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,250,235,0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn-primary:hover, .btn-submit:hover, .submit-btn:hover, .btn-cs:hover {
  background: linear-gradient(180deg, #E6C98B 0%, #CFAA62 46%, var(--brass-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,244,214,0.6), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(198,161,88,0.32);
}
.btn-primary:hover::after, .btn-submit:hover::after, .submit-btn:hover::after, .btn-cs:hover::after { transform: translateX(120%); transition: transform 0.7s ease; }
.btn-primary:active, .btn-submit:active, .submit-btn:active, .btn-cs:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,0.35); }

.btn-green {
  background: var(--field-green);
  color: var(--off-white);
  border: 1px solid var(--olive);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn-green:hover { background: #2E4539; color: var(--white); }

.btn-outline {
  background: transparent;
  color: var(--off-white);
  border: 1px solid var(--concrete);
}
.btn-outline:hover { background: var(--off-white); color: var(--blackout); border-color: var(--off-white); }

/* nav CTA inherits .btn-primary; funnel nav link uses its own class */
.nav-cta-link {
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 46%, var(--brass-lo) 100%);
  color: var(--blackout);
  box-shadow: inset 0 1px 0 rgba(255,244,214,0.55);
}

/* ── 4. SURFACES — hairline top edge on raised cards ─────────────── */
.program-card, .class-card, .testimonial-card, .form-card, .hero-form-card,
.comp-card, .value-card, .proof-card, .faq-item, .popup-card, .addr-popup-card,
.mc-form-card, .pw-gate-card, .cs-card, .info-cards > *, .team-card, .contact-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 28px rgba(0,0,0,0.45);
}

/* ── 5. FORMS — recessed inputs ────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="password"], input:not([type]), select, textarea,
input[class]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
select[class], textarea[class], .float-input, .float-select, .float-textarea {
  background-color: #09090A;
  border: 1px solid #2E3432;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(0,0,0,0.3);
  color: var(--off-white);
}
input:focus, select:focus, textarea:focus,
.float-input:focus, .float-select:focus, .float-textarea:focus,
input[class]:focus, select[class]:focus, textarea[class]:focus {
  border-color: var(--brass);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.65), 0 0 0 3px rgba(198,161,88,0.22);
  outline: none;
}

/* ── 6. ACCESSIBILITY FLOOR ────────────────────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
::selection { background: rgba(198,161,88,0.35); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .btn-submit::after, .submit-btn::after, .btn-cs::after { display: none; }
  .btn, .btn-primary, .btn-outline, .btn-green { transition: none; }
  .btn:hover, .btn-primary:hover, .btn-outline:hover, .btn-green:hover { transform: none; }
}

/* ── 7. FOOTER service-area links (added Batch 4) ──────────────── */
.footer-areas a { color: inherit; text-decoration: underline; text-decoration-color: rgba(165,167,166,0.35); text-underline-offset: 3px; }
.footer-areas a:hover { color: var(--brass); text-decoration-color: currentColor; }

/* ── 8. LAYOUT FIX — homepage hero had zero side padding on mobile
   (.hero-content's "padding: 2rem 0" cancelled .container's gutter). ── */
.container.hero-content { padding-left: 1.5rem; padding-right: 1.5rem; }

/* ── 9. LINE ICONS (Batch 7) — /images/icons.svg sprite ──────────
   Size/stroke are set as attributes on each <svg class="ico">, so the
   icons still render correctly if this file is removed; this only
   aligns and colours them. */
.ico { vertical-align: -0.28em; flex-shrink: 0; overflow: visible; }
.why-icon, .value-icon, .kf-icon, .class-icon, .card-icon, .expect-icon,
.ic-icon, .cs-icon, .sched-card-icon, .si, .addr-popup-icon,
.trust-item .icon, .footer-contact, .kmw-badge-footer, .cred-badge, .eq-label {
  --ico-color: var(--brass);
}
.why-icon .ico, .value-icon .ico, .kf-icon .ico, .class-icon .ico, .card-icon .ico,
.expect-icon .ico, .ic-icon .ico, .cs-icon .ico, .sched-card-icon .ico, .si .ico,
.addr-popup-icon .ico, .trust-item .icon .ico, .footer-contact .ico,
.kmw-badge-footer .ico, .cred-badge .ico, .eq-label .ico { color: var(--ico-color); }
.footer-contact .ico, .kmw-badge-footer .ico, .cred-badge .ico, .eq-label .ico,
.social-btn .ico, .form-secure .ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }