/* UCSI Base CSS - Palette matched to Sponsored Residential Packet */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #1F2A2E;
  background: #FBF7F1;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  font-weight: 600;
  line-height: 1.15;
  color: #1F3D6B;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
p { margin: 0 0 var(--space-4); }
a { color: #1F3D6B; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #C74233; }
:root {
  /* Navy primary — matched to packet cover & headings */
  --color-navy-900: #17325A;
  --color-navy-700: #1F3D6B;
  --color-navy-500: #2E5891;
  --color-navy-100: #DDE4EF;

  /* Gold — packet's secondary color (hairlines, eyebrows, section rules) */
  --color-gold-700: #B78A15;
  --color-gold: #D4A017;
  --color-gold-300: #E6C670;

  /* Coral — reserved for primary CTA and hover states only */
  --color-coral-600: #C74233;
  --color-coral-500: #E05A48;
  --color-coral-100: #F5D3CE;

  /* Neutrals */
  --color-cream: #FBF7F1;
  --color-cream-warm: #F3E9D9;
  --color-ink: #1F2A2E;
  --color-ink-muted: #506069;

  /* Backward-compat aliases (old teal-* names) so unchanged rules keep working */
  --color-teal-900: var(--color-navy-900);
  --color-teal-700: var(--color-navy-700);
  --color-teal-500: var(--color-navy-500);
  --color-teal-100: var(--color-navy-100);

  /* Packet's celebration color bar (used sparingly as an accent motif) */
  --color-bar-red: #D93B3B;
  --color-bar-gold: #D4A017;
  --color-bar-green: #4B9B3E;
  --color-bar-blue: #2E5891;
  --color-bar-purple: #7A3E9B;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --container: 1200px;
  --container-narrow: 820px;
  --shadow-soft: 0 8px 24px rgba(23,50,90,0.10);
  --shadow-lift: 0 20px 40px rgba(23,50,90,0.15);
}
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container--narrow { max-width: var(--container-narrow); }

/* Packet-inspired accents */
.color-bar {
  height: 8px;
  display: flex;
}
.color-bar > span { flex: 1; }
.color-bar > span:nth-child(1) { background: var(--color-bar-red); }
.color-bar > span:nth-child(2) { background: var(--color-bar-gold); }
.color-bar > span:nth-child(3) { background: var(--color-bar-green); }
.color-bar > span:nth-child(4) { background: var(--color-bar-blue); }
.color-bar > span:nth-child(5) { background: var(--color-bar-purple); }

.rule-gold {
  height: 3px;
  width: 88px;
  background: var(--color-gold);
  border: 0;
  margin: 0 0 var(--space-5);
}

.eyebrow {
  color: var(--color-gold-700);
}