:root {
    --navy: #071B3D;
    --navy-soft: #273142;
    --cream: #F4F1EA;
    --gold: #C8A24B;
    --white: #ffffff;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; color: var(--navy); background: var(--cream); line-height: 1.65; }
  h1, h2, h3 { font-family: 'Playfair Display', serif; }

  /* NAV */
  nav { position: sticky; top: 0; z-index: 100; background: rgba(7,27,61,.97); padding: .8rem 5%; display: flex; justify-content: space-between; align-items: center; }
  nav img { height: 44px; }
  nav ul { list-style: none; display: flex; gap: 1.6rem; }
  nav a { color: var(--cream); text-decoration: none; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
  nav a:hover, nav a.active { color: var(--gold); }

  /* HERO */
  header { background: var(--navy); color: var(--cream); padding: 4rem 5% 3.5rem; position: relative; overflow: hidden; }
  .hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: center; }
  .eyebrow { color: var(--gold); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600; }
  header h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.15; font-weight: 700; margin-bottom: 1.4rem; }
  header p.lede { font-size: 1.1rem; color: #d8dce6; max-width: 32rem; margin-bottom: 2rem; }
  .btn { display: inline-block; background: var(--gold); color: var(--navy); padding: .95rem 2rem; text-decoration: none; font-weight: 600; letter-spacing: .04em; border-radius: 3px; transition: transform .15s, box-shadow .15s; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,162,75,.35); }
  .hero-photo { position: relative; }
  .hero-photo img { width: 100%; display: block; border-radius: 4px; box-shadow: -14px 14px 0 var(--gold); }

  /* SECTIONS */
  section { padding: 5rem 5%; }
  .wrap { max-width: 1200px; margin: 0 auto; }
  .section-label { color: var(--gold); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin-bottom: .9rem; }
  h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1.4rem; line-height: 1.2; }

  /* ABOUT */
  #about { background: var(--white); }
  .about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; }
  .about-photo img { width: 100%; border-radius: 4px; box-shadow: 12px -12px 0 var(--cream); display: block; }
  .cred-list { list-style: none; margin-top: 1.6rem; }
  .cred-list li { padding: .7rem 0; border-bottom: 1px solid #e8e4da; font-size: .95rem; display: flex; gap: .8rem; align-items: baseline; }
  .cred-list li::before { content: "—"; color: var(--gold); font-weight: 600; }

  /* SERVICES */
  #services { background: var(--navy); color: var(--cream); }
  .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2rem; }
  .svc-card { border-left: 3px solid var(--gold); padding: 1.6rem 1.8rem; background: rgba(255,255,255,.07); text-decoration: none; color: inherit; display: block; transition: transform .15s; }
  .svc-card:hover { transform: translateY(-3px); }
  .svc-card h3 { font-size: 1.35rem; margin-bottom: .7rem; color: var(--white); }
  .svc-card p { color: #c9cfdb; font-size: .95rem; }

  /* RESOURCES */
  #resources { background: var(--cream); }
  .res-list { display: grid; gap: 1rem; margin-top: 2rem; max-width: 46rem; }
  .res-item { background: var(--white); padding: 1.3rem 1.5rem; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(7,27,61,.06); text-decoration: none; color: inherit; transition: transform .15s; }
  .res-item:hover { transform: translateX(4px); }
  .res-item h3 { font-size: 1.15rem; margin-bottom: .3rem; }
  .res-item p { color: var(--navy-soft); font-size: .9rem; }
  .res-arrow { color: var(--gold); font-size: 1.4rem; flex-shrink: 0; }

  /* FAQ */
  #faq { background: var(--white); }
  details { border-bottom: 1px solid #e8e4da; padding: 1.1rem 0; max-width: 52rem; }
  summary { cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; font-weight: 400; }
  details[open] summary::after { content: "–"; }
  details p { margin-top: .9rem; color: var(--navy-soft); font-size: .95rem; max-width: 48rem; }

  /* CONTACT */
  #contact { background: var(--navy); color: var(--cream); text-align: center; padding: 6rem 5%; }
  #contact h2 { color: var(--white); }
  .contact-phone { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--gold); text-decoration: none; display: inline-block; margin: 1.4rem 0 .6rem; }
  .contact-phone:hover { transform: scale(1.03); }
  #contact p.sub { color: #c9cfdb; font-size: .95rem; max-width: 34rem; margin: 0 auto 2rem; }
  .contact-meta { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-top: 2.6rem; font-size: .88rem; color: #9aa3b5; }
  .contact-meta a { color: #c9cfdb; text-decoration: none; }

  footer { background: var(--navy); border-top: 1px solid rgba(200,162,75,.25); padding: 1.4rem 5%; font-size: .8rem; color: #7d8699; text-align: center; }
  footer span { display: block; margin-top: .3rem; }

  /* PAGE HEADER (for sub-pages) */
  .page-header { background: var(--navy); color: var(--cream); padding: 4rem 5% 3.5rem; text-align: center; }
  .page-header h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
  .page-header p { color: #d8dce6; max-width: 40rem; margin: 0 auto; }

  /* CONTENT SECTIONS */
  .content-section { background: var(--white); padding: 5rem 5%; }
  .content-wrap { max-width: 72rem; margin: 0 auto; }
  .content-wrap h2 { color: var(--navy); margin-bottom: 1.4rem; }
  .content-wrap p, .content-wrap li { color: var(--navy-soft); font-size: 1rem; line-height: 1.75; }
  .content-wrap ul, .content-wrap ol { padding-left: 1.5rem; margin: 1rem 0; }
  .content-wrap h3 { color: var(--navy); font-size: 1.4rem; margin-top: 2rem; margin-bottom: .8rem; }

  /* STATS */
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
  .stat-card { background: var(--cream); padding: 2rem; text-align: center; border-radius: 4px; }
  .stat-num { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--gold); font-weight: 700; }
  .stat-label { color: var(--navy-soft); font-size: .9rem; margin-top: .5rem; }

  /* PDF DOWNLOAD */
  .pdf-card { background: var(--white); padding: 2.5rem; border-radius: 4px; box-shadow: 0 4px 16px rgba(7,27,61,.08); text-align: center; max-width: 30rem; margin: 2rem auto; }
  .pdf-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--navy); }
  .pdf-card p { color: var(--navy-soft); margin-bottom: 1.5rem; }

  /* QUIZ */
  .quiz-container { max-width: 40rem; margin: 2rem auto; background: var(--white); padding: 3rem; border-radius: 8px; box-shadow: 0 4px 20px rgba(7,27,61,.08); }
  .quiz-question { display: none; }
  .quiz-question.active { display: block; }
  .quiz-q-num { color: var(--gold); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
  .quiz-q-text { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--navy); margin-bottom: 1.5rem; line-height: 1.3; }
  .quiz-options { display: grid; gap: .8rem; }
  .quiz-option { padding: 1rem 1.2rem; border: 2px solid #e8e4da; border-radius: 6px; cursor: pointer; transition: all .15s; font-size: .95rem; color: var(--navy-soft); }
  .quiz-option:hover { border-color: var(--gold); background: rgba(200,162,75,.05); }
  .quiz-progress { height: 4px; background: #e8e4da; margin-bottom: 2rem; border-radius: 2px; overflow: hidden; }
  .quiz-progress-bar { height: 100%; background: var(--gold); transition: width .3s; }

  /* TIMELINE */
  .timeline-container { max-width: 50rem; margin: 2rem auto; }
  .timeline-tabs { display: flex; gap: .5rem; margin-bottom: 2rem; justify-content: center; }
  .timeline-tab { padding: .8rem 1.5rem; background: var(--white); border: 2px solid #e8e4da; border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--navy-soft); transition: all .15s; }
  .timeline-tab.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
  .timeline-content { display: none; background: var(--white); padding: 2.5rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(7,27,61,.06); }
  .timeline-content.active { display: block; }
  .timeline-label { color: var(--gold); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .8rem; }
  .timeline-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--navy); margin-bottom: 1rem; }
  .timeline-text { color: var(--navy-soft); margin-bottom: 1.5rem; line-height: 1.7; }
  .timeline-list { list-style: none; padding: 0; }
  .timeline-list li { padding: .8rem 0; border-bottom: 1px solid #e8e4da; color: var(--navy-soft); display: flex; gap: .8rem; align-items: start; }
  .timeline-list li::before { content: "•"; color: var(--gold); font-weight: 700; }
  .timeline-question { margin-top: 1.5rem; padding: 1.2rem; background: rgba(200,162,75,.08); border-radius: 6px; font-style: italic; color: var(--navy-soft); }

  /* BLOG */
  .blog-grid { display: grid; gap: 2rem; max-width: 46rem; margin: 2rem auto; }
  .blog-card { background: var(--white); padding: 1.8rem; border-radius: 6px; box-shadow: 0 3px 12px rgba(7,27,61,.06); text-decoration: none; color: inherit; transition: transform .15s; }
  .blog-card:hover { transform: translateY(-4px); }
  .blog-date { color: var(--gold); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; display: block; }
  .blog-card h3 { font-size: 1.3rem; color: var(--navy); margin-bottom: .7rem; line-height: 1.3; }
  .blog-card p { color: var(--navy-soft); font-size: .95rem; }

  @media (max-width: 800px) {
    nav ul { display: none; }
    .hero-inner, .about-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .svc-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .hero-photo img { box-shadow: -8px 8px 0 var(--gold); }
    section { padding: 3.5rem 5%; }
    .timeline-tabs { flex-wrap: wrap; }
  }