/*
 * phase-brand-01-foundation.css
 * ============================================================
 * BRAND SPRINT — PHASE 1: FOUNDATION TOKENS
 * ============================================================
 * This is the canonical token override for the brand sprint.
 * All subsequent sprint overlays build on top of this file.
 * Change a value here and it cascades everywhere.
 *
 * Canonical brand values from brand asset pack:
 *   Navy:    #0F1626
 *   Ink:     #101827
 *   Teal:    #4CB7AA  (brand canonical — replaces #2CA6A4)
 *   Surface: #F7F8FA / #FBFBFA
 *   Muted:   #5A616B
 * ============================================================
 */

:root {

  /* ----------------------------------------------------------
     COLOUR — brand canonical values
     ---------------------------------------------------------- */

  /* Primary backgrounds */
  --telstar-primary:          #0F1626;   /* was #0B2545 — brand navy */
  --telstar-primary-strong:   #080e18;   /* deepest dark, footer etc */

  /* Teal — THE canonical change. #4CB7AA replaces #2CA6A4 throughout. */
  --telstar-teal:             #4CB7AA;
  --telstar-teal-hover:       #3aa598;
  --telstar-teal-soft:        rgba(76, 183, 170, 0.12);
  --telstar-teal-mid:         rgba(76, 183, 170, 0.25);
  --telstar-teal-border:      rgba(76, 183, 170, 0.30);

  /* Surfaces — slightly cooler, closer to brand off-white */
  --telstar-surface:          #FBFBFA;
  --telstar-surface-low:      #F7F8FA;
  --telstar-surface-high:     #FFFFFF;

  /* Text */
  --telstar-text:             #101827;
  --telstar-text-muted:       #5A616B;
  --telstar-text-faint:       rgba(16, 24, 39, 0.45);

  /* Borders — lighter, more restrained */
  --telstar-border:           rgba(16, 24, 39, 0.09);
  --telstar-border-mid:       rgba(16, 24, 39, 0.14);
  --telstar-border-soft:      rgba(255, 255, 255, 0.08);

  /* Remove the secondary Royal Blue as a dominant colour.
     Keep defined for compatibility but point it toward navy. */
  --telstar-secondary:        #1a3d6e;

  /* Remove Orange as a surface/fill colour. Keep for rare accent use only. */
  --telstar-accent:           #F58A07;

  /* Shadow — lighter, more restrained */
  --telstar-shadow:           0 8px 32px rgba(15, 22, 38, 0.08);
  --telstar-shadow-soft:      0 4px 16px rgba(15, 22, 38, 0.05);
  --telstar-shadow-none:      none;

  /* ----------------------------------------------------------
     RADIUS — flatten from rounded SaaS toward architectural
     ---------------------------------------------------------- */
  --telstar-radius-sm:        4px;    /* was 14px */
  --telstar-radius-md:        6px;    /* was 18px */
  --telstar-radius-lg:        10px;   /* was 24px */
  --telstar-radius-pill:      100px;  /* chips/badges only */

  /* ----------------------------------------------------------
     TYPOGRAPHY — brand register
     Heads: Inter 300 (light), tracked, lowercase via CSS
     Body:  Karla 400 — unchanged, already correct
     ---------------------------------------------------------- */

  /* Heading weight — the single most impactful change */
  --td-head-weight:           300;
  --td-head-weight-mid:       400;
  --td-head-weight-strong:    500;

  /* Letter spacing for headings */
  --td-head-tracking-hero:    -0.01em;
  --td-head-tracking-section: -0.005em;
  --td-head-tracking-card:    0em;

  /* Eyebrow / label tracking */
  --td-label-tracking:        0.16em;
  --td-label-size:            0.6875rem;  /* 11px */

  /* ----------------------------------------------------------
     BUTTON TOKEN OVERRIDES
     ---------------------------------------------------------- */
  --telstar-btn-primary-bg:           var(--telstar-teal);
  --telstar-btn-primary-border:       var(--telstar-teal);
  --telstar-btn-primary-text:         #FFFFFF;
  --telstar-btn-primary-bg-hover:     var(--telstar-teal-hover);
  --telstar-btn-primary-border-hover: var(--telstar-teal-hover);
  --telstar-btn-primary-focus:        rgba(76, 183, 170, 0.30);

  /* Secondary button — ghost style */
  --telstar-btn-secondary-bg:           transparent;
  --telstar-btn-secondary-border:       var(--telstar-border-mid);
  --telstar-btn-secondary-text:         var(--telstar-text);
  --telstar-btn-secondary-bg-hover:     var(--telstar-surface-low);
  --telstar-btn-secondary-border-hover: var(--telstar-teal-border);
  --telstar-btn-secondary-text-hover:   var(--telstar-teal);
  --telstar-btn-secondary-focus:        rgba(76, 183, 170, 0.20);

  /* ----------------------------------------------------------
     TEAL RULE DEVICE
     The single underscore from the brand mark.
     Used as a CSS custom property so all uses stay in sync.
     ---------------------------------------------------------- */
  --td-rule-color:   var(--telstar-teal);
  --td-rule-height:  3px;
  --td-rule-width:   48px;
  --td-rule-radius:  2px;

}

/* ============================================================
   GLOBAL TYPOGRAPHY — heading weight + tracking reset
   Applies the brand Inter 300 register to all headings.
   ============================================================ */

h1, h2 {
  font-weight: var(--td-head-weight) !important;
  letter-spacing: var(--td-head-tracking-hero);
  text-transform: lowercase;
}

h3 {
  font-weight: var(--td-head-weight-mid) !important;
  letter-spacing: var(--td-head-tracking-card);
}

h4, h5, h6 {
  font-weight: var(--td-head-weight-strong) !important;
}

/* ============================================================
   GLOBAL BORDER RADIUS — flatten rounded corners
   ============================================================ */

.btn,
button,
[class*="btn"],
[class*="card"],
[class*="chip"],
[class*="badge"],
[class*="pill"],
[class*="tag"] {
  border-radius: var(--telstar-radius-sm) !important;
}

/* Cards specifically */
[class*="card--"],
[class*="--card"],
.base-card,
.route-card,
.stage-card {
  border-radius: var(--telstar-radius-md) !important;
}

/* ============================================================
   GLOBAL SHADOW — reduce everywhere
   ============================================================ */

[class*="card"] {
  box-shadow: var(--telstar-shadow-soft) !important;
}

[class*="card"]:hover {
  box-shadow: var(--telstar-shadow) !important;
}

/* ============================================================
   DARK SECTION BACKGROUND — align to brand navy
   ============================================================ */

[class*="--dark"],
[class*="dark--"],
[class*="band--dark"],
[class*="section--dark"],
.site-footer,
.footer-cta {
  background-color: var(--telstar-primary) !important;
}

/* ============================================================
   TEAL RULE DEVICE — utility class
   Apply .td-ruled to any heading to get the brand underscore.
   ============================================================ */

.td-ruled {
  display: inline-block;
  padding-bottom: 0.75rem;
  position: relative;
}

.td-ruled::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--td-rule-width);
  height: var(--td-rule-height);
  background: var(--td-rule-color);
  border-radius: var(--td-rule-radius);
}

/* ============================================================
   EYEBROW / LABEL — brand register
   ============================================================ */

[class*="eyebrow"],
[class*="overline"],
[class*="label--"],
[class*="kicker"],
.section-eyebrow,
.card-eyebrow {
  font-family: var(--font-head, 'Inter', sans-serif);
  font-size: var(--td-label-size) !important;
  font-weight: 400 !important;
  letter-spacing: var(--td-label-tracking) !important;
  text-transform: uppercase !important;
  color: var(--telstar-text-muted) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Teal eyebrow variant (on dark sections) */
[class*="dark"] [class*="eyebrow"],
[class*="dark"] [class*="overline"],
.eyebrow--teal {
  color: var(--telstar-teal) !important;
}

/* ============================================================
   DISPOSITION CHIPS — outline teal treatment
   ============================================================ */

.home-disposition-chip,
[class*="treatment-path"],
.chip--disposition {
  background: var(--telstar-teal-soft) !important;
  border: 1px solid var(--telstar-teal-border) !important;
  color: var(--telstar-teal) !important;
  border-radius: var(--telstar-radius-sm) !important;
  font-size: var(--td-label-size) !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.85rem !important;
  box-shadow: none !important;
}

/* ============================================================
   SURFACE — page body background
   ============================================================ */

body {
  background-color: var(--telstar-surface) !important;
}


/*
 * phase-brand-01b-foundation-corrections.css
 * Fixes five issues from Phase 1 foundation overlay.
 */

/* FIX 1: Stop uppercase/styling bleeding into body text */
p, li, td, blockquote,
[class*="card"] p, [class*="card"] li,
[class*="section"] p, [class*="section"] li,
[class*="band"] p, [class*="band"] li,
[class*="panel"] p, [class*="panel"] li {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* FIX 2: Disposition section — remove mint/teal background */
.disposition-section,
.disposition-paths,
[class*="disposition-section"],
[class*="treatment-paths-section"] {
  background-color: var(--telstar-surface-low) !important;
  border: 1px solid var(--telstar-border) !important;
  border-radius: var(--telstar-radius-lg) !important;
}

/* FIX 3: Hero ghost button — visible on dark background */
[class*="hero"] .btn--secondary,
[class*="hero"] [class*="btn--secondary"],
[class*="hero"] [class*="btn--ghost"] {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.3) !important;
  background: transparent !important;
}

/* FIX 4: Dark section headings — apply lowercase */
[class*="band--dark"] h2, [class*="band--dark"] h3,
[class*="section--dark"] h2, [class*="section--dark"] h3,
[class*="proof-strip"] h2, [class*="proof-strip"] h3,
[class*="cta-panel"] h2, [class*="cta-panel"] h3,
[class*="footer-cta"] h2, [class*="footer-cta"] h3,
[class*="decision-panel"] h2, [class*="decision-panel"] h3 {
  text-transform: lowercase !important;
  font-weight: 300 !important;
}

/* FIX 5: Conversion panel buttons — correct colours */
[class*="cta-panel"] .btn--primary,
[class*="footer-cta"] .btn--primary,
[class*="decision-panel"] .btn--primary {
  background-color: var(--telstar-teal) !important;
  border-color: var(--telstar-teal) !important;
  color: #ffffff !important;
}

[class*="cta-panel"] .btn--secondary,
[class*="footer-cta"] .btn--secondary,
[class*="decision-panel"] .btn--secondary {
  background: transparent !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: rgba(255,255,255,0.8) !important;
}

/* FIX 6: Card h3 headings — sentence case not lowercase */
[class*="card"] h3, [class*="card"] h4,
[class*="flow-item"] h3, [class*="route-card"] h3 {
  text-transform: none !important;
  font-weight: 400 !important;
}

/* FIX 7: Proof metric numbers — preserve as-is */
[class*="metric-value"], [class*="proof-value"],
.proof-strip strong {
  text-transform: none !important;
  color: var(--telstar-teal) !important;
}

/* Conversion panel buttons — using exact selector from front-page */
.footer-cta .btn,
.footer-cta a[class*="btn"],
[class*="cta-panel"] a[class*="btn"],
[class*="decision-band"] a[class*="btn"] {
  border-radius: var(--telstar-radius-sm) !important;
}

.footer-cta .btn--primary,
[class*="cta-panel"] .btn--primary {
  background: var(--telstar-teal) !important;
  border-color: var(--telstar-teal) !important;
  color: #fff !important;
}

.footer-cta .btn--secondary,
[class*="cta-panel"] .btn--secondary {
  background: transparent !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ============================================================
   DISPOSITION PATHS SECTION — clean rewrite
   Matches the established card language of the site.
   ============================================================ */

.home-disposition-paths {
  background: #F7F8FA;
  padding-top: clamp(2.4rem, 4vw, 3.6rem);
  padding-bottom: clamp(2.4rem, 4vw, 3.6rem);
}

.home-disposition-paths__header {
  margin-bottom: 2rem;
}

.home-disposition-paths__header h2 {
  font-weight: 300 !important;
  text-transform: lowercase !important;
  color: #101827 !important;
}

.home-disposition-paths__header p {
  color: #5A616B;
  font-size: 1rem;
  line-height: 1.65;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.home-disposition-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.home-disposition-chip {
  background: #fff;
  border: 1px solid rgba(16, 24, 39, 0.10);
  border-left: 3px solid #4CB7AA;
  border-radius: 4px;
  padding: 0.85rem 1rem;
  box-shadow: none;
}

.home-disposition-chip:hover {
  border-left-color: #101827;
  box-shadow: 0 2px 8px rgba(16, 24, 39, 0.08);
}

.home-disposition-chip__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase !important;
  color: #4CB7AA;
  margin-bottom: 0.3rem;
}

.home-disposition-chip__desc {
  display: block;
  font-size: 0.8125rem;
  color: #5A616B;
  line-height: 1.45;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.home-disposition-paths__note {
  font-size: 0.875rem;
  color: #5A616B;
  border-left: 3px solid #4CB7AA;
  padding-left: 1rem;
  line-height: 1.6;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: none;
  border-radius: 0;
}

@media (max-width: 860px) {
  .home-disposition-paths__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .home-disposition-paths__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HEADER — brand wordmark alignment
   ============================================================ */

.site-brand__logo {
  display: block;
  width: 240px;
  height: auto;
}

.site-header {
  background: #0F1626 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.site-header__inner {
  align-items: center;
}

.site-nav__list {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-nav__list a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  padding: 0.5rem 0.75rem !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item a {
  color: #ffffff !important;
}