/* ===========================================================
   SAPA-GP shared stylesheet — design system for all pages
   =========================================================== */
:root{
  --ink:#122A3F;--ink-2:#1B3F50;--paper:#F3F1EC;--paper-card:#FBFAF7;
  --brass:#C8923D;--brass-deep:#A06E1C;--text:#1A2530;--muted:#5C6B78;
  --line:#D9D4C9;--ring:#2E7D8A;--maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Libre Franklin",system-ui,-apple-system,sans-serif;color:var(--text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Spectral",Georgia,serif;font-weight:600;line-height:1.14;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);display:inline-block}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;padding:.8rem 1.4rem;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:.18s ease}
.btn-primary{background:var(--brass-deep);color:#fff}.btn-primary:hover{background:#8a5f17}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#0a1c2c}
.btn-ghost{border-color:var(--ink);color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{border-color:rgba(255,255,255,.5);color:#fff}.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* header / nav */
header{position:sticky;top:0;z-index:50;background:rgba(243,241,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1.4rem;height:72px}
.brand{display:flex;flex-direction:column;line-height:1.05;margin-right:auto}
.brand .mark{font-family:"Spectral",serif;font-weight:600;font-size:1.5rem;color:var(--ink)}
.brand .sub{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.menu{display:flex;gap:1.25rem;align-items:center}
.menu a{font-size:.92rem;font-weight:500;color:var(--ink);position:relative;padding:.3rem 0}
.menu a:hover,.menu a.active{color:var(--brass-deep)}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--brass);transition:width .2s}
.menu a:hover::after,.menu a.active::after{width:100%}
.nav .btn{padding:.6rem 1.1rem}
.burger{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}

/* page hero */
.page-hero{background:linear-gradient(160deg,var(--ink),var(--ink-2));color:#fff;padding:54px 0 62px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-120px;bottom:-180px;width:480px;height:480px;border:1px solid rgba(200,146,61,.22);border-radius:50%}
.page-hero::before{content:"";position:absolute;right:-30px;bottom:-300px;width:480px;height:480px;border:1px solid rgba(200,146,61,.12);border-radius:50%}
.page-hero .inner{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--brass)}.page-hero .eyebrow::before{background:var(--brass)}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,4.2vw,3.2rem);margin:.5rem 0 .6rem;max-width:22ch}
.page-hero p{color:#CBD5DE;max-width:40rem;font-size:1.08rem}
.crumb{font-size:.82rem;color:#9FB0BC;margin-bottom:.4rem}.crumb a:hover{color:var(--brass)}

/* sections */
section{padding:62px 0}
.sec-head{margin-bottom:32px}
.sec-head.center{text-align:center;max-width:42rem;margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:.3rem}
.sec-head p{color:var(--muted);margin-top:.5rem;max-width:44rem}
.sec-head.center p{margin-left:auto;margin-right:auto}

/* IMAGE PLACEHOLDER — shows where a real image goes */
.imgph{position:relative;background:
  repeating-linear-gradient(135deg, rgba(18,42,63,.04) 0 12px, rgba(18,42,63,.07) 12px 24px),
  linear-gradient(160deg,#ECE8DF,#F6F4EF);
  border:1.5px dashed #C2BAA8;border-radius:5px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#8A8275;padding:1.2rem;min-height:120px;overflow:hidden}
.imgph::before{content:"\1F5BC";font-size:1.7rem;opacity:.55;margin-bottom:.35rem}
.imgph .lbl{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:#6E6655;line-height:1.35}
.imgph .dim{font-size:.68rem;color:#9A917F;margin-top:.2rem}
.imgph.tall{min-height:300px}
.imgph.wide{aspect-ratio:16/9}
.imgph.square{aspect-ratio:1/1}
.imgph.avatar{border-radius:50%;min-height:0;aspect-ratio:1/1}
.imgph.dark{background:linear-gradient(160deg,var(--ink),var(--ink-2));border-color:rgba(200,146,61,.4);color:#9FB0BC}
.imgph.dark .lbl{color:#C9D2DA}.imgph.dark::before{opacity:.7}

/* footer */
footer{background:#0C2032;color:#A9B6C2;padding:56px 0 28px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
footer h4{font-family:"Libre Franklin",sans-serif;color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
footer a{display:block;padding:.25rem 0;color:#A9B6C2}footer a:hover{color:var(--brass)}
.foot-brand .mark{font-family:"Spectral",serif;font-size:1.4rem;color:#fff;margin-bottom:.5rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#7C8B98}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* responsive base */
@media(max-width:900px){
  .menu{display:none}.burger{display:block}.nav .btn.join-desktop{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* ===========================================================
   Program detail pages — shared components
   =========================================================== */
.pd-facts{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.4rem}
.pd-facts .item .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#9FB0BC;font-weight:700}
.pd-facts .item .v{font-size:1.05rem;color:#fff;font-weight:600;font-family:"Spectral",serif}
.pd-about{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.pd-about .lead{font-family:"Spectral",serif;font-size:1.4rem;line-height:1.45;color:var(--ink)}
.pd-about p{color:var(--muted);margin-top:.9rem}
.pill{display:inline-block;background:var(--paper-card);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;color:var(--text);margin:.25rem .35rem .25rem 0}
.pill.brass{border-color:var(--brass);color:var(--brass-deep);font-weight:600}
.pd-sessions{display:grid;gap:0;margin-top:.5rem}
.pd-row{display:grid;grid-template-columns:160px 1fr auto;gap:1.4rem;align-items:center;padding:1.1rem 0;border-top:1px solid var(--line)}
.pd-row:last-child{border-bottom:1px solid var(--line)}
.pd-row .date{font-family:"Spectral",serif;color:var(--brass-deep);font-weight:600;font-size:.95rem}
.pd-row h3{font-size:1.08rem;line-height:1.3}
.pd-row .tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ring)}
.pd-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pd-gallery .imgph{aspect-ratio:4/3;min-height:0}
.pd-flyers{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.pd-flyers .imgph{aspect-ratio:3/4;min-height:0}
.pd-cta{background:var(--ink);color:#fff;text-align:center}
.pd-cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.1rem)}
.pd-cta p{color:#CBD5DE;max-width:34rem;margin:.7rem auto 1.4rem}
.pd-cta .row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
@media(max-width:900px){
  .pd-about{grid-template-columns:1fr}
  .pd-gallery{grid-template-columns:1fr 1fr 1fr}
  .pd-flyers{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:560px){
  .pd-gallery,.pd-flyers{grid-template-columns:1fr 1fr}
  .pd-row{grid-template-columns:1fr;gap:.3rem}
  .pd-row .btn{justify-self:start}
}

/* ---- next style block ---- */

.tier{margin-bottom:2.4rem}
  .tlabel{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-deep);text-align:center;margin-bottom:1.1rem;display:flex;align-items:center;gap:1rem;justify-content:center}
  .tlabel::before,.tlabel::after{content:"";height:1px;flex:1;max-width:140px;background:var(--line)}
  .logos{display:grid;gap:1rem;justify-content:center}
  .diamond .logos{grid-template-columns:repeat(3,1fr)}
  .gold .logos{grid-template-columns:repeat(4,1fr)}
  .partner .logos{grid-template-columns:repeat(5,1fr)}
  .logo{background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.1rem;font-weight:600;color:var(--ink);min-height:80px;font-size:.92rem;transition:.18s}
  .logo:hover{border-color:var(--brass);transform:translateY(-2px)}
  .diamond .logo{min-height:110px;font-size:1.05rem;border-color:var(--brass)}
  .note{text-align:center;color:var(--muted);font-size:.84rem;margin-top:.6rem;font-style:italic}

  .why{background:var(--ink);color:#fff}
  .why .eyebrow{color:var(--brass)}.why .eyebrow::before{background:var(--brass)}
  .why h2{color:#fff}
  .why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-top:.5rem}
  .why p{color:#CBD5DE;margin-top:.9rem;max-width:34rem}
  .ben{list-style:none;display:grid;gap:.8rem;margin-top:1.2rem}
  .ben li{display:flex;gap:.7rem;align-items:flex-start;color:#E4EAEF;font-size:.97rem}
  .ben li::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.5rem;background:var(--brass);transform:rotate(45deg)}

  .tiers-table{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:.5rem}
  .plan{background:var(--paper-card);border:1px solid var(--line);border-radius:5px;padding:1.5rem 1.3rem;text-align:center}
  .plan.hl{border:1.5px solid var(--brass);box-shadow:0 20px 46px -30px rgba(160,110,28,.5)}
  .plan .lvl{font-family:"Spectral",serif;font-size:1.3rem;color:var(--ink)}
  .plan .pr{font-family:"Spectral",serif;font-size:1.8rem;color:var(--brass-deep);margin:.3rem 0}
  .plan .pr small{font-family:"Libre Franklin",sans-serif;font-size:.78rem;color:var(--muted)}
  .plan ul{list-style:none;text-align:left;display:grid;gap:.45rem;margin:1rem 0}
  .plan li{font-size:.86rem;color:var(--text);display:flex;gap:.45rem}
  .plan li::before{content:"✓";color:var(--brass-deep);font-weight:800}

  .cta-band{text-align:center}
  .cta-band h2{font-size:clamp(1.7rem,3vw,2.3rem)}
  .cta-band p{color:var(--muted);max-width:34rem;margin:.7rem auto 1.4rem}

  @media(max-width:900px){
    .diamond .logos{grid-template-columns:repeat(2,1fr)}
    .gold .logos{grid-template-columns:repeat(3,1fr)}
    .partner .logos{grid-template-columns:repeat(3,1fr)}
    .why-grid{grid-template-columns:1fr}
    .tiers-table{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){
    .gold .logos,.partner .logos,.diamond .logos{grid-template-columns:1fr 1fr}
    .tiers-table{grid-template-columns:1fr}
  }

/* ---- next style block ---- */

:root{
    --ink:#122A3F;--ink-2:#1B3F50;--paper:#F3F1EC;--paper-card:#FBFAF7;
    --brass:#C8923D;--brass-deep:#A06E1C;--text:#1A2530;--muted:#5C6B78;
    --line:#D9D4C9;--ring:#2E7D8A;--maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Libre Franklin",system-ui,sans-serif;color:var(--text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:"Spectral",Georgia,serif;font-weight:600;color:var(--ink);line-height:1.15}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  :focus-visible{outline:3px solid var(--ring);outline-offset:2px}
  .__navbtn_off{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.92rem;padding:.6rem 1.1rem;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:.18s}
  .__navbtnp_off{color:#fff}

  /* ===== HEADER ===== */
  header{position:sticky;top:0;z-index:100;background:transparent;border-bottom:0;backdrop-filter:none}

  /* utility bar */
  .util{background:var(--ink);color:#C9D2DA;font-size:.8rem}
  .util .wrap{display:flex;align-items:center;height:38px;gap:1.2rem}
  .util a{color:#C9D2DA}.util a:hover{color:var(--brass)}
  .util .left{display:flex;align-items:center;gap:1.2rem;margin-right:auto}
  .util .right{display:flex;align-items:center;gap:1.2rem}
  .util .sep{width:1px;height:16px;background:rgba(255,255,255,.18)}
  .lang b{color:#fff}.lang span{opacity:.5}
  .net{position:relative}
  .net>button{background:none;border:0;color:#C9D2DA;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
  .net>button:hover{color:var(--brass)}
  .net .caret{font-size:.7rem}
  .net .drop{position:absolute;top:120%;left:0;background:#0C2032;border:1px solid rgba(255,255,255,.12);border-radius:4px;min-width:170px;padding:.4rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.16s;box-shadow:0 16px 40px -20px rgba(0,0,0,.6)}
  .net.open .drop{opacity:1;visibility:visible;transform:none}
  .net .drop a{display:block;padding:.45rem .6rem;border-radius:3px;font-size:.84rem}
  .net .drop a:hover{background:rgba(255,255,255,.06);color:#fff}
  .social a{margin-left:.5rem;font-size:.95rem}

  /* main bar */
  .main{background:rgba(243,241,236,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .main .wrap{display:flex;align-items:center;gap:1.2rem;height:74px}
  .brand{display:flex;flex-direction:column;line-height:1.05;margin-right:auto}
  .brand .mark{font-family:"Spectral",serif;font-weight:600;font-size:1.55rem;color:var(--ink)}
  .brand .sub{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}

  .nav{display:flex;align-items:center;gap:.2rem;height:auto}
  .nav-item{position:relative}
  .nav-item>a,.nav-item>button{font-family:"Libre Franklin",sans-serif;font-size:.94rem;font-weight:500;color:var(--ink);background:none;border:0;cursor:pointer;padding:.55rem .8rem;display:inline-flex;align-items:center;gap:.3rem;border-radius:3px}
  .nav-item>a:hover,.nav-item>button:hover,.nav-item.open>button{color:var(--brass-deep)}
  .nav-item .caret{font-size:.62rem;transition:transform .18s;opacity:.7}
  .nav-item.open .caret{transform:rotate(180deg)}
  .nav-item>*::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.35rem;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .18s}
  .nav-item:hover>a::after,.nav-item:hover>button::after,.nav-item.open>button::after{transform:scaleX(1)}

  /* dropdown panel */
  .panel{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:6px;
    box-shadow:0 24px 50px -24px rgba(18,42,63,.45);padding:.5rem;min-width:236px;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:.17s;z-index:60}
  .nav-item:hover .panel,.nav-item:focus-within .panel,.nav-item.open .panel{opacity:1;visibility:visible;transform:none}
  .panel a{display:block;padding:.6rem .75rem;border-radius:4px;font-size:.9rem;color:var(--text)}
  .panel a:hover{background:var(--paper);color:var(--brass-deep)}
  .panel a small{display:block;font-size:.76rem;color:var(--muted);font-weight:400;margin-top:.1rem}
  .panel a:hover small{color:var(--muted)}
  .panel .head{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep);padding:.5rem .75rem .3rem}

  /* mega menu (Programs) */
  .mega{left:50%;transform:translateX(-50%) translateY(-6px);min-width:680px;padding:1.1rem;
    display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:.4rem 1.4rem}
  .nav-item:hover .mega,.nav-item.open .mega,.nav-item:focus-within .mega{transform:translateX(-50%) translateY(0)}
  .mega .col{display:flex;flex-direction:column}
  .mega .promo{background:var(--ink);border-radius:6px;padding:1.1rem;color:#fff;display:flex;flex-direction:column;justify-content:center}
  .mega .promo .tag{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
  .mega .promo h4{font-family:"Spectral",serif;color:#fff;font-size:1.15rem;margin:.3rem 0 .2rem}
  .mega .promo p{font-size:.82rem;color:#C9D2DA;margin-bottom:.8rem}
  .mega .promo a{color:var(--brass);font-weight:700;font-size:.84rem}

  .actions{display:flex;align-items:center;gap:.6rem;margin-left:.6rem}
  .icon-btn{background:none;border:0;color:var(--ink);cursor:pointer;font-size:1.1rem;padding:.35rem;border-radius:3px;line-height:1}
  .icon-btn:hover{color:var(--brass-deep)}
  .search-box{position:absolute;top:100%;right:24px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:.6rem;box-shadow:0 20px 44px -24px rgba(18,42,63,.4);display:none;z-index:70}
  .search-box.open{display:block}
  .search-box input{width:280px;max-width:60vw;border:1px solid var(--line);border-radius:3px;padding:.6rem .8rem;font-size:.92rem}

  .burger{display:none;background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer;line-height:1}

  /* ===== MOBILE DRAWER ===== */
  .scrim{position:fixed;inset:0;background:rgba(12,32,50,.5);opacity:0;visibility:hidden;transition:.2s;z-index:200}
  .scrim.open{opacity:1;visibility:visible}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(360px,86vw);background:var(--paper);z-index:210;
    transform:translateX(100%);transition:transform .26s ease;overflow-y:auto;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4)}
  .drawer.open{transform:none}
  .drawer .d-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line)}
  .drawer .d-head .mark{font-family:"Spectral",serif;font-size:1.3rem;color:var(--ink)}
  .drawer .close{background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer;line-height:1}
  .drawer nav{padding:.5rem 0}
  .acc>button{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;
    font:600 1rem/1.2 "Libre Franklin",sans-serif;color:var(--ink);padding:.95rem 1.2rem;cursor:pointer;text-align:left}
  .acc>button .caret{font-size:.7rem;transition:transform .18s;color:var(--muted)}
  .acc.open>button .caret{transform:rotate(180deg)}
  .acc .sub{max-height:0;overflow:hidden;transition:max-height .25s ease;background:var(--paper-card)}
  .acc.open .sub{max-height:420px}
  .acc .sub a{display:block;padding:.6rem 1.2rem .6rem 1.8rem;font-size:.92rem;color:var(--text);border-top:1px solid var(--line)}
  .acc .sub a:hover{color:var(--brass-deep)}
  .drawer .flat{display:block;padding:.95rem 1.2rem;font-weight:600;color:var(--ink);border-top:1px solid var(--line)}
  .drawer .d-cta{padding:1.1rem 1.2rem}
  .drawer .d-cta .btn{width:100%;justify-content:center}
  .drawer .d-util{padding:1rem 1.2rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.8rem 1.2rem}
  .drawer .d-util a{color:var(--muted)}.drawer .d-util a:hover{color:var(--brass-deep)}

  /* ===== demo content ===== */
  .demo-hero{background:linear-gradient(160deg,var(--ink),var(--ink-2));color:#fff;padding:70px 0}
  .demo-hero .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
  .demo-hero h1{color:#fff;font-size:clamp(2rem,4vw,2.8rem);margin:.5rem 0 .6rem;max-width:24ch}
  .demo-hero p{color:#CBD5DE;max-width:40rem}
  .demo-body{padding:54px 0}
  .demo-body h2{font-size:1.5rem;margin-bottom:.5rem}
  .demo-body p{color:var(--muted);max-width:48rem;margin-bottom:1rem}
  .tip{background:var(--paper-card);border:1px dashed var(--line);border-left:3px solid var(--brass);border-radius:4px;padding:1rem 1.1rem;font-size:.9rem;color:var(--text);max-width:48rem}
  .filler{height:60vh;display:flex;align-items:center;justify-content:center;color:var(--muted);font-style:italic;border-top:1px solid var(--line)}

  @media(max-width:980px){
    .nav,.actions .search-wrap,.main .btn{display:none}
    .burger{display:block}
    .util .left .net,.util .right .social{display:none}
  }