/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* Colors */
  --navy-900:#0B1B33;
  --navy-800:#0F2542;
  --navy-700:#16325A;
  --blue-500:#2563EB;
  --blue-600:#1D4ED8;
  --blue-400:#3B82F6;
  --blue-300:#93C5FD;
  --cream:#F5F1E8;
  --cream-2:#FAF7F0;
  --text-dk:#0B1B33;
  --text-md:#4A5568;
  --text-lt:#94A3B8;
  --green:#10B981;
  --red:#EF4444;
  --amber:#F59E0B;
  --white:#FFFFFF;
  --line-cream:#E4DCCB;
  --line-navy:rgba(147,197,253,.16);

  /* Typography */
  --font-serif:"Playfair Display",Georgia,serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-hand:"Caveat",cursive;

  /* Layout */
  --container:1200px;
  --section-y:96px;
  --radius:12px;
  --radius-sm:8px;
}
@media (max-width:767px){
  :root{--section-y:56px;}
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}
body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--text-dk);
  background:var(--navy-900);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;cursor:pointer;}
ul,ol{list-style:none;}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.15;}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px;border-radius:2px;}
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px;}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue-500);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;
  font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:16px;line-height:1;
  padding:16px 26px;border-radius:8px;border:0;text-decoration:none;
  transition:background-color .18s ease,transform .18s ease;
}
.btn-primary{background:var(--blue-500);color:#fff;}
.btn-primary:hover{background:var(--blue-600);}
.btn-invert{background:var(--navy-900);color:#fff;}
.btn-invert:hover{background:#122a4d;}
.btn-sm{padding:11px 20px;font-size:14.5px;}
.btn .arrow{transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(3px);}

/* Links */
.link-underline{
  color:#DDE5F0;font-size:15px;font-weight:500;text-decoration:none;
  border-bottom:2px solid var(--amber);padding-bottom:3px;
  transition:color .15s ease;
}
.link-underline:hover{color:#fff;}

/* Handwritten */
.hand{font-family:var(--font-hand);font-weight:600;line-height:1.15;}
.hand-note{color:var(--amber);font-size:22px;white-space:nowrap;}

/* Highlighter underlines */
.u-amber{background-image:linear-gradient(transparent 78%,rgba(245,158,11,.55) 78%);}
.u-amber-d{background-image:linear-gradient(transparent 82%,rgba(245,158,11,.7) 82%);}

/* Section rhythm */
.section{padding-block:var(--section-y);}
.scribble-block{display:block;margin-top:-4px;}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  background:#06101F;
  text-align:center;
  padding:10px 16px;
}
.topbar p{
  font-size:12px;font-weight:600;letter-spacing:.08em;
  color:#E7ECF5;text-transform:uppercase;
}
.topbar .hl{color:var(--amber);}
@media (max-width:639px){
  .topbar p{font-size:10.5px;letter-spacing:.05em;}
}

/* ============================================================
   NAV
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--navy-900);
  border-bottom:1px solid var(--line-navy);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:76px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;
  font-family:var(--font-serif);font-size:22px;font-weight:600;white-space:nowrap;
}
.brand svg{flex:none;}
.nav-menu{
  display:flex;align-items:center;gap:36px;
}
.nav-menu a{
  color:#C9D4E5;text-decoration:none;font-size:15px;font-weight:500;
  transition:color .15s ease;
}
.nav-menu a:hover{color:#fff;}
.nav-cta{white-space:nowrap;}
.nav-menu .menu-cta{display:none;}
.nav-toggle{
  display:none;background:none;border:0;padding:8px;color:#fff;
}
@media (max-width:1023px){
  .nav-menu{gap:24px;}
}
@media (max-width:860px){
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .nav-menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-800);
    border-bottom:1px solid var(--line-navy);
    display:none;
    padding:8px 0 16px;
  }
  .nav-menu.open{display:flex;}
  .nav-menu a{padding:14px 24px;font-size:16px;}
  .nav-menu .menu-cta{display:block;margin:12px 24px 0;}
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{background:var(--blue-500);color:#fff;padding-block:56px;position:relative;}
.cta-inner{
  display:flex;align-items:center;gap:32px;justify-content:space-between;flex-wrap:wrap;
}
.cta-left{display:flex;align-items:center;gap:24px;flex:1;min-width:280px;}
.cta-left svg{flex:none;}
.cta-left h2{font-size:clamp(26px,2.8vw,36px);color:#fff;margin-bottom:8px;}
.cta-left p{font-size:15.5px;color:#DBE7FF;}
.cta-right{text-align:center;}
.cta-right .link-underline{
  display:inline-block;margin-top:14px;color:#EAF1FF;border-bottom-color:rgba(255,255,255,.6);
  font-size:14px;
}
.cta-hand{
  position:absolute;right:28px;bottom:14px;
  color:#fff;font-size:20px;line-height:1.2;transform:rotate(-5deg);text-align:left;
}
@media (max-width:1279px){
  .cta-hand{display:none;}
}
@media (max-width:767px){
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .cta-right{text-align:left;}
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list details{
  background:var(--cream-2);
  border:1px solid var(--line-cream);
  border-radius:var(--radius-sm);
  margin-bottom:12px;
}
.faq-list summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;
  font-size:15px;font-weight:600;color:var(--text-dk);
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary svg{flex:none;transition:transform .25s ease;color:var(--text-md);}
.faq-list details[open] summary svg{transform:rotate(180deg);}
.faq-list .answer{
  padding:0 22px 20px;font-size:14.5px;line-height:1.7;color:var(--text-md);
}
.faq-list .answer p + p{margin-top:10px;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy-900);color:#9FB0C8;padding:64px 0 40px;}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;
  padding-bottom:48px;border-bottom:1px solid var(--line-navy);
}
.footer-brand .brand{margin-bottom:14px;font-size:20px;}
.footer-brand p{font-size:14px;line-height:1.65;max-width:260px;}
.footer-col h3{
  font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-bottom:18px;
}
.footer-col li{margin-bottom:12px;}
.footer-col a{
  color:#9FB0C8;text-decoration:none;font-size:14px;transition:color .15s ease;
}
.footer-col a:hover{color:#fff;}
.footer-col p{font-size:14px;line-height:1.7;margin-bottom:10px;}
.footer-col p strong{color:#DDE5F0;font-weight:600;}
.footer-legal{padding-top:28px;font-size:12.5px;line-height:1.7;color:#68788F;}
.footer-legal p + p{margin-top:8px;}
@media (max-width:1023px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:639px){
  .footer-grid{grid-template-columns:1fr;gap:32px;}
}