/* ═══════════════════════════════════════════════════════════════
   PHM DESIGN SYSTEM — v2.0
   Single source of truth. Do not override per-page.
   ═══════════════════════════════════════════════════════════════ */

/* ── FONT LOAD ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── DESIGN TOKENS ── */
:root {

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale — px-based, converted to rem at 16px root */
  --f-xs:    0.75rem;   /* 12px — timestamps, fine print */
  --f-sm:    0.8125rem; /* 13px — metadata, secondary labels */
  --f-label: 0.875rem;  /* 14px — small labels, badges */
  --f-body:  1.125rem;  /* 18px — body text */
  --f-md:    1.25rem;   /* 20px — comfortable reading, card body */
  --f-lg:    1.5rem;    /* 24px — subheadings */
  --f-xl:    1.75rem;   /* 28px — subheadings upper */
  --f-2xl:   2.25rem;   /* 36px — section H2 */
  --f-3xl:   3rem;      /* 48px — hero sub / large display */
  --f-4xl:   4rem;      /* 64px — hero headline */

  /* Font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.15;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* ── Color palette ── */

  /* Backgrounds */
  --bg:       #F8F9FA;   /* primary page background */
  --panel:    #F0F2F5;   /* panel / section bg */
  --card:     #FFFFFF;   /* card surface */
  --card2:    #F4F6F8;   /* alt card */

  /* Navigation & hero */
  --nav-bg:   #0F172A;   /* dark executive nav */
  --hero-bg:  #0B1120;   /* premium dark hero */
  --footer-bg:#0B1120;   /* dark footer */

  /* Text */
  --white:    #0F172A;   /* primary text (dark on light) */
  --text:     #334155;   /* body text */
  --mute:     #64748B;   /* secondary/muted text */
  --dim:      #94A3B8;   /* tertiary/disabled */
  --silver:   #CBD5E1;   /* nav secondary links, footer text */

  /* Borders */
  --line:     #E5E7EB;   /* card dividers, borders */
  --line-dark:rgba(255,255,255,0.1); /* borders on dark backgrounds */

  /* Brand amber — signal states, CTAs, amber accents */
  --amber:    #9A5C10;   /* amber base */
  --amber-l:  #C07820;   /* amber primary */
  --amber-lt: #E8A040;   /* amber light / hover */
  --amber-d:  #FFF8EC;   /* amber tint background */

  /* Semantic colors */
  --red-l:    #A82818;
  --red-d:    #FEF2F2;
  --green-l:  #1A6838;
  --green-d:  #F0FDF4;
  --blue:     #1860C8;
  --blue-l:   #2868C0;
  --blue-d:   #EFF6FF;

  /* Legacy aliases — keep these so old references resolve correctly */
  --ink:      #0F172A;   /* was old dark text — maps to --white */
  --navy:     #0B1120;   /* was old nav bg */
  --navy-mid: #F0F2F5;   /* was old card bg on dark — now panel */
  --navy-card:#FFFFFF;   /* was old card */
  --navy-line:#E5E7EB;   /* was old dark border — now line */
  --navy-mute:#64748B;   /* was old muted text */
  --text-mute:#64748B;   /* was old text-mute */
  --text-dim: #94A3B8;   /* was old text-dim */
  --sub:      #334155;   /* was old sub text */
  --rule:     #E5E7EB;   /* was old rule/border */

  /* Mono */
  --mono:     'DM Mono', 'Courier New', monospace;

  /* ── Spacing ── */
  --s1:  0.5rem;   /* 8px */
  --s2:  1rem;     /* 16px */
  --s3:  1.5rem;   /* 24px */
  --s4:  2rem;     /* 32px */
  --s5:  3rem;     /* 48px */
  --s6:  5rem;     /* 80px — section vertical rhythm */
  --s7:  7.5rem;   /* 120px — hero top padding */

  /* ── Layout ── */
  --max-w:      1320px;
  --content-w:  980px;
  --radius:     6px;
  --radius-sm:  4px;
  --radius-lg:  10px;

  /* ── Transitions ── */
  --ease: 0.15s ease;
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--f-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

/* ── BASE TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--f-4xl); font-weight: var(--fw-black); }
h2 { font-size: var(--f-2xl); }
h3 { font-size: var(--f-xl); }
h4 { font-size: var(--f-lg); font-weight: var(--fw-semi); }

p { line-height: var(--lh-normal); }
a { text-decoration: none; color: inherit; }
strong { font-weight: var(--fw-semi); }

/* ── NAV — CANONICAL ── */
nav {
  background: var(--nav-bg);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--line-dark);
  height: 64px;
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-logo-top {
  font-family: var(--font);
  font-size: var(--f-md);
  font-weight: var(--fw-bold);
  color: #FFFFFF;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.nav-logo-top:hover { color: var(--amber-lt); }

.nav-logo-sub {
  font-size: var(--f-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-l);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.nav-logo-sub::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--amber-l);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav-links li a {
  font-size: var(--f-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--ease), background var(--ease);
  white-space: nowrap;
}

.nav-links li a:hover { color: #FFFFFF; background: rgba(255,255,255,0.06); }
.nav-links li a.nav-active { color: #FFFFFF; font-weight: var(--fw-semi); }
.nav-links li a.nav-amber { color: var(--amber-lt); }
.nav-links li a.nav-amber:hover { color: var(--amber-lt); }
.nav-links li a.nav-amber.nav-active { color: var(--amber-lt); }
.nav-links li a.nav-red { color: #F87171; }

.nav-links li a.btn-nav {
  background: var(--amber-l);
  color: #FFFFFF;
  font-weight: var(--fw-semi);
  padding: 9px 20px;
  border-radius: var(--radius);
  letter-spacing: 0.06em;
}
.nav-links li a.btn-nav:hover { background: var(--amber-lt); }

.nav-pill {
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}
.nav-pill--amber { background: rgba(192,120,32,0.15); color: var(--amber-l); }
.nav-pill--red   { background: rgba(168,40,24,0.1); color: #F87171; }

/* Mobile nav */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(255,255,255,0.7);
  transition: all var(--ease);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  background: var(--nav-bg);
  border-top: 1px solid var(--line-dark);
  padding: 16px 24px 24px;
  flex-direction: column;
  gap: 2px;
  z-index: 999;
}

.mobile-menu a {
  font-size: var(--f-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mob-cta, .sw-mob-cta, .ea-mob-cta {
  display: inline-block;
  background: var(--amber-l);
  color: #FFFFFF !important;
  font-weight: var(--fw-bold);
  padding: 12px 20px;
  margin-top: 12px;
  text-align: center;
  border-bottom: none !important;
  border-radius: var(--radius);
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links { display: none; }
  .nav-inner { padding: 0 20px; }
}

/* ── SECTION RHYTHM ── */
.section { padding: var(--s6) 0; }
.section-hero { padding: var(--s7) 0 var(--s6); }
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 36px;
}
.section-inner--narrow {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 36px;
}

/* ── EYEBROWS ── */
.eyebrow {
  font-size: var(--f-label);
  font-weight: var(--fw-semi);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-l);
  margin-bottom: 12px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: var(--f-label);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--amber-l);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--amber-lt); }

.btn-outline {
  background: transparent;
  color: var(--amber-l);
  border: 1.5px solid var(--amber-l);
}
.btn-outline:hover { background: var(--amber-d); }

.btn-ghost {
  background: transparent;
  color: var(--mute);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--mute); color: var(--white); }

/* ── CARDS ── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
}

.card-amber {
  border-top: 3px solid var(--amber-l);
}

/* ── FOOTER ── */
footer, .footer {
  background: var(--footer-bg);
  color: var(--silver);
  padding: 48px 0 32px;
}

/* ── UTILITY ── */
.text-muted  { color: var(--mute); }
.text-amber  { color: var(--amber-l); }
.text-white  { color: #FFFFFF; }
.text-body   { color: var(--text); }

.bg-dark     { background: var(--hero-bg); }
.bg-panel    { background: var(--panel); }

@media (max-width: 768px) {
  :root {
    --f-4xl: 2.5rem;
    --f-3xl: 2rem;
    --f-2xl: 1.75rem;
    --f-xl:  1.5rem;
    --s6: 3.5rem;
    --s7: 5rem;
  }
  .section-inner,
  .section-inner--narrow { padding: 0 20px; }
}