:root{
    --navy:#1C3E8C; --navy-deep:#16326F; --gold:#C9A227; --cream:#EDEAE3;
    --ink:#14161A; --slate:#3A3D44; --muted:#6B6860; --line:#DCD8CF; --white:#FFFFFF;
    --wrap:1240px;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--white); color:var(--ink);
    font-family:"Saira",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
    line-height:1.5; overflow-x:hidden;
  }
  a{color:var(--navy); text-decoration:none}
  ::placeholder{color:#9A968D}
  input,select,button,textarea{font-family:inherit}
  img{display:block; max-width:100%}

  .cond{font-family:"Saira Condensed",sans-serif}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px}
  .eyebrow{font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
  .rule{width:44px; height:2px; background:var(--gold); display:inline-block}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex; align-items:center; gap:10px; font-family:"Saira Condensed",sans-serif; font-weight:700; font-size:17px; letter-spacing:.1em; text-transform:uppercase; padding:16px 30px; border:none; cursor:pointer; transition:background .18s,color .18s,transform .18s; text-align:center}
  .btn:active{transform:translateY(1px)}
  .btn-gold{background:var(--gold); color:var(--navy)}
  .btn-gold:hover{background:var(--cream)}
  .btn-navy{background:var(--navy); color:var(--white)}
  .btn-navy:hover{background:var(--gold); color:var(--navy)}
  .btn-ghost{background:transparent; color:var(--white); border-bottom:2px solid rgba(201,162,39,.7); padding:6px 2px}
  .btn-ghost:hover{color:var(--gold)}

  /* ---------- nav ---------- */
  nav.top{position:sticky; top:0; z-index:60; background:var(--navy); border-bottom:1px solid rgba(201,162,39,.45)}
  nav.top .wrap{height:64px; display:flex; align-items:center; gap:36px}
  .brand{display:flex; align-items:baseline; gap:8px; color:var(--white)}
  .brand b{font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:22px; letter-spacing:.06em; text-transform:uppercase}
  .brand i{width:26px; height:3px; background:var(--gold); display:inline-block; transform:translateY(-4px)}
  .navlinks{flex:1; display:flex; align-items:center; gap:26px; justify-content:flex-end}
  .navlinks a{font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:#EDEAE3; padding:4px 0; border-bottom:2px solid transparent; transition:color .15s,border-color .15s}
  .navlinks a:hover{color:var(--white)}
  .navlinks a.active{color:var(--white); border-bottom-color:var(--gold)}
  .navlinks a.cta{color:var(--navy); background:var(--gold); padding:11px 20px; border:none}
  .navlinks a.cta:hover{background:var(--cream)}
  /* The icon is drawn in CSS rather than set as a glyph, so it never depends on a
     webfont loading. Kept here, next to the button, so the bars survive even if
     theme.css does not apply. */
  .navtoggle{display:none; align-items:center; justify-content:center; background:none; border:none; padding:0; color:#fff; width:46px; height:46px; cursor:pointer; font-size:0; -webkit-tap-highlight-color:transparent}
  .navtoggle .bar, .navtoggle .bar:before, .navtoggle .bar:after{display:block; width:24px; height:2px; background:#F0ECE3}
  .navtoggle .bar{position:relative}
  .navtoggle .bar:before{content:""; position:absolute; left:0; top:-7px}
  .navtoggle .bar:after{content:""; position:absolute; left:0; top:7px}

  /* ---------- generic section ---------- */
  .sec{padding:92px 0}
  .sec-cream{background:var(--cream)}
  .sec-navy{background:var(--navy); color:#fff}
  .sec-white{background:var(--white)}
  h1.display{font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:clamp(46px,7vw,82px); line-height:.94; letter-spacing:-.005em; text-transform:uppercase; text-wrap:balance}
  h2.head{font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:clamp(34px,5vw,52px); line-height:1.02; text-transform:uppercase; color:var(--navy)}
  .sec-navy h2.head{color:#fff}
  h3.sub{font-family:"Saira Condensed",sans-serif; font-weight:700; font-size:clamp(24px,3vw,31px); line-height:1.08; text-transform:uppercase; color:var(--navy)}
  .lede{font-size:clamp(18px,2vw,20px); line-height:1.55; color:var(--slate); text-wrap:pretty}
  .sec-navy .lede{color:#EDEAE3}

  /* ---------- reveal-on-scroll ---------- */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1; transform:none; transition:none}
    html{scroll-behavior:auto}
  }

  /* ---------- views (routing) ---------- */
  .view{display:none}
  .view.active{display:block; animation:fadein .45s ease}
  @keyframes fadein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

  /* ---------- responsive ---------- */
  @media (max-width:860px){
    .navlinks{position:fixed; inset:64px 0 auto 0; background:var(--navy-deep); flex-direction:column; align-items:stretch; gap:0; padding:8px 0 16px; border-bottom:1px solid rgba(201,162,39,.4); transform:translateY(-140%); transition:transform .28s ease; z-index:59}
    .navlinks.open{transform:none}
    .navlinks a{padding:14px 32px; border-bottom:1px solid rgba(255,255,255,.06)}
    .navlinks a.active{border-bottom-color:rgba(255,255,255,.06); color:var(--gold)}
    .navlinks a.cta{margin:12px 32px 0; text-align:center; padding:14px}
    .navtoggle{display:flex; margin-left:auto}
    .sec{padding:64px 0}
    .wrap{padding:0 22px}
  }