/* escAPElatitude — hand-written styles, no frameworks, no external dependencies */
:root{
  --navy:#0d366f;        /* RGB(13,54,112) */
  --navy-dark:#092650;
  --gold:#c48e1a;        /* RGB(196,142,26) */
  --gold-dark:#9c7110;
  --teal:#12808a;
  --ink:#1d2733;
  --muted:#5a6875;
  --paper:#fdfbf7;
  --card:#ffffff;
  --line:#e3ddcf;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; font-size:17px;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal)}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}

/* Header / nav */
.site-header{background:var(--navy); color:#fff}
.nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 0}
.nav .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; margin-right:auto}
.nav .brand img{width:46px; height:46px}
.nav .brand .wordmark{font-size:1.35rem; font-weight:800; letter-spacing:.2px}
.nav .brand .wordmark .ape{color:var(--gold)}
.nav-links{display:flex; gap:6px; flex-wrap:wrap}
.nav-links a{color:#dbe7f7; text-decoration:none; padding:8px 14px; border-radius:999px; font-weight:600}
.nav-links a:hover{background:rgba(255,255,255,.12); color:#fff}
.nav-links a[aria-current="page"]{background:var(--gold); color:#231a02}

/* Hero */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-dark) 100%); color:#fff; text-align:center; padding:52px 0 60px}
.hero img.badge{width:210px; margin:0 auto 18px}
.hero h1{font-size:2.6rem; margin:0 0 6px; line-height:1.15}
.hero h1 .ape{color:var(--gold)}
.hero .tagline{font-size:1.2rem; color:#cfe0f4; margin:0 auto 26px; max-width:620px}
.btn{display:inline-block; text-decoration:none; font-weight:700; padding:13px 26px; border-radius:999px; margin:4px}
.btn-gold{background:var(--gold); color:#231a02}
.btn-gold:hover{background:var(--gold-dark); color:#fff}
.btn-ghost{border:2px solid #7fa3cf; color:#eaf2fc}
.btn-ghost:hover{border-color:#fff; color:#fff}
.status-pill{display:inline-block; background:rgba(196,142,26,.16); border:1px solid var(--gold); color:#f3d489;
  border-radius:999px; padding:4px 14px; font-size:.85rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-bottom:16px}

/* Sections */
section{padding:52px 0 8px}
h2{font-size:1.7rem; color:var(--navy); margin:0 0 10px}
h2 .rule{display:block; width:56px; height:4px; background:var(--gold); border-radius:2px; margin-top:8px}
.lede{color:var(--muted); max-width:720px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
.two-col img.rounded{border-radius:var(--radius)}

/* Pillar + product cards */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-top:22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 1px 3px rgba(13,54,112,.05)}
.card h3{margin:0 0 8px; color:var(--navy); font-size:1.12rem}
.card p{margin:0; color:var(--muted); font-size:.97rem}
.card .icon{font-size:1.7rem; margin-bottom:10px}
.product{padding:0; overflow:hidden; display:flex; flex-direction:column}
.product .thumb{background:#fff}
.product .thumb img{width:100%; height:300px; object-fit:contain; padding:14px}
.product .body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1}
.product .price{font-weight:800; color:var(--navy); font-size:1.08rem}
.product .soon{margin-top:auto; font-size:.85rem; font-weight:700; color:var(--gold-dark); text-transform:uppercase; letter-spacing:.5px}
.product a.shop-link{font-weight:700}

/* Scene strip */
.scenes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:22px}
.scenes figure{margin:0}
.scenes img{border-radius:var(--radius); width:100%; height:220px; object-fit:cover}
.scenes figcaption{text-align:center; color:var(--muted); font-size:.9rem; margin-top:8px}

/* Disclosure + placeholder boxes */
.disclosure{background:#fdf3dd; border:1px solid var(--gold); border-radius:var(--radius); padding:20px 24px; margin:28px 0}
.disclosure h2,.disclosure h3{color:var(--gold-dark); margin-top:0}
.placeholder{border:2px dashed #b9c4cf; border-radius:10px; padding:14px 16px; color:var(--muted); background:#f7f9fb; font-weight:600; text-align:center}
.note{color:var(--muted); font-size:.95rem}

/* Footer */
.site-footer{background:var(--navy-dark); color:#c8d8ec; margin-top:60px; padding:36px 0 30px; font-size:.93rem}
.site-footer a{color:#f3d489}
.site-footer .fine{color:#8fa8c4; font-size:.85rem; margin-top:14px}

@media (max-width:680px){
  .two-col{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
  .hero img.badge{width:160px}
  .nav{justify-content:center}
  .nav .brand{margin-right:0}
}