/* ============================================================
   LAYOUT — site header/nav, footer, foundation progress line,
   hero grid. Structural placement only; visual detail of the
   components living inside these regions is in components.css.
   ============================================================ */

/* ---------- site header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--c-navy); color:#F2ECDD;
  border-bottom:1px solid rgba(242,236,221,.16);
}
.site-header .shell{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--shell-pad);
  max-width:var(--shell-max); margin:0 auto;
}
@media (max-width:640px){ .site-header .shell{ padding:16px var(--shell-pad-mobile); } }

.wordmark{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-sans); font-weight:700; font-size:17px;
  letter-spacing:-.01em; text-decoration:none; color:#F2ECDD;
}
.wordmark .mark{ color:var(--c-gold); font-family:var(--font-mono); font-size:13px; font-weight:500; }

.main-nav{ display:flex; align-items:center; gap:8px; }
.main-nav ul{ display:flex; align-items:center; gap:6px; }
.main-nav a:not(.btn){
  font-family:var(--font-sans); font-size:14px; font-weight:600;
  padding:9px 14px; text-decoration:none; color:#D8DEE7;
  border-radius:var(--radius);
}
.main-nav a:not(.btn):hover,
.main-nav a[aria-current="page"]{ color:#F2ECDD; background:rgba(242,236,221,.08); }
.main-nav .btn{ margin-left:6px; padding:11px 20px; font-size:14px; }

.nav-toggle{ display:none; }

@media (max-width:900px){
  .main-nav ul{ display:none; }
  .main-nav.is-open ul{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; left:0; right:0; top:100%;
    background:var(--c-navy); border-bottom:1px solid rgba(242,236,221,.16);
    padding:10px var(--shell-pad-mobile) 18px;
  }
  .main-nav.is-open ul a:not(.btn){ padding:13px 6px; }
  .main-nav .btn{ display:none; }
  .main-nav.is-open .btn{
    display:inline-block; margin:10px 6px 0; text-align:center;
  }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:5px; width:44px; height:44px; margin:-10px; z-index:101;
  }
  .nav-toggle span{ display:block; width:20px; height:2px; background:#F2ECDD; transition:transform .25s ease, opacity .25s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .site-header .shell{ position:relative; flex-wrap:wrap; }
}

/* ---------- mobile sticky CTA (context-aware: hidden near footer CTA) ---------- */
.mobile-sticky-cta{
  display:none;
}
@media (max-width:640px){
  .mobile-sticky-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:12px var(--shell-pad-mobile);
    background:var(--c-cream); border-top:1px solid #E4DAC2;
    box-shadow:0 -8px 20px -12px rgba(15,45,82,.25);
    transform:translateY(0); transition:transform .3s ease;
  }
  .mobile-sticky-cta.is-hidden{ transform:translateY(110%); }
  .mobile-sticky-cta .btn{ flex:1; text-align:center; }
  body{ padding-bottom:68px; }
}

/* ---------- foundation progress line (desktop only — see brief §8) ---------- */
.progress-track{
  position:fixed; left:22px; top:96px; bottom:26px; width:1px;
  background:rgba(217,164,65,.25); z-index:40; pointer-events:none;
}
.progress-fill{ position:absolute; top:0; left:0; width:100%; height:100%; background:var(--c-gold); transform-origin:top; transform:scaleY(var(--progress,0)); }
.progress-tick{ position:absolute; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--c-cream); border:2px solid var(--c-gold); opacity:.45; transition:opacity .3s ease, transform .3s ease; transform:scale(.85); }
.progress-tick.lit{ opacity:1; transform:scale(1); }
@media (max-width:1080px){ .progress-track{ display:none; } }
html.reduce-motion .progress-fill{ transition:none; }

/* ---------- mobile foundation line ---------- */
.progress-track-m{ display:none; }
@media (max-width:1080px){
  .progress-track-m{
    display:block; position:fixed; left:7px; top:60px; bottom:18px; width:1px;
    background:rgba(107,114,128,.3); z-index:40; pointer-events:none;
  }
}
@media (max-width:640px){ .progress-track-m{ top:56px; } }
.progress-fill-m{ position:absolute; top:0; left:0; width:100%; height:100%; background:var(--c-gold); transform-origin:top; transform:scaleY(var(--progress,0)); }
.progress-tick-m{ position:absolute; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--c-cream); border:1.5px solid var(--c-gold); opacity:.4; transition:opacity .3s ease, transform .3s ease; transform:scale(.85); }
.progress-tick-m.lit{ opacity:1; transform:scale(1); }
html.reduce-motion .progress-fill-m{ transition:none; }

/* ---------- hero grid ---------- */
.hero{ padding:44px 0 0; overflow:hidden; }
.hero-shell{ max-width:var(--shell-max); margin:0 auto; padding:0 var(--shell-pad); position:relative; }
@media (max-width:640px){ .hero-shell{ padding:0 var(--shell-pad-mobile); } }
.hero-index{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; padding:16px 0; border-bottom:1px solid var(--line); opacity:.7; }
@media (max-width:640px){ .hero-index{ display:none; } }
.hero-grid{ display:grid; grid-template-columns:7fr 5fr; gap:0 40px; align-items:start; padding-top:56px; }
@media (max-width:980px){ .hero-grid{ display:block; } }

/* ---------- footer ---------- */
.site-footer{ background:#0A2242; color:#B9C2CE; padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:48px; border-bottom:1px solid rgba(242,236,221,.14); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#7F8CA0; margin-bottom:14px; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ text-decoration:none; font-size:14.5px; color:#DCE1E8; }
.footer-col a:hover{ color:var(--c-gold); }
.footer-about p{ font-size:14px; color:#AEB7C3; max-width:32ch; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:22px 0; font-family:var(--font-mono); font-size:11.5px; color:#7F8CA0;
}