/* Inspired Citizen — shared design system
   Used by all pages except index.html (which keeps its self-contained styles). */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',sans-serif;background:#f3ede3;-webkit-font-smoothing:antialiased;color:#1a1410}
a{color:inherit}

:root{
  --serif:'Cormorant Garamond',serif;
  --sans:'Montserrat',sans-serif;
  --gold:rgba(180,155,100,0.95);
  --gold-soft:rgba(140,100,40,0.92);
  --ivory:#f3ede3;
  --ivory-warm:#f7f5f1;
  --dark:#0e0e0e;
  --navy:#06111e;
}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:18px 64px;background:#0e0e0e;border-bottom:0.5px solid rgba(255,255,255,0.07)}
.nl{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,255,0.68);text-decoration:none;display:inline-flex;align-items:center;gap:12px}
.nl-logo{height:30px;width:auto;display:block;flex:none;filter:brightness(0) invert(1) opacity(0.68)}
.nl-text{display:inline-flex;flex-direction:row;gap:0.32em;line-height:1.15;white-space:nowrap}
.nl-text>span{display:inline-block}
.nm{display:flex;gap:36px;list-style:none}
.nm a{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.68);text-decoration:none;transition:color 0.2s}
.nm a:hover{color:rgba(255,255,255,0.95)}
.nm a.active{color:rgba(180,155,100,0.95)}
.nc{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.82);border:0.5px solid rgba(255,255,255,0.4);padding:11px 24px;text-decoration:none;border-radius:999px;transition:background 0.25s,color 0.25s}
.nc:hover{background:rgba(255,255,255,0.92);color:#0e0e0e}

/* HERO */
.hero{position:relative;min-height:620px;height:80vh;overflow:hidden;background:#04080f;padding-top:66px;display:flex;flex-direction:column;justify-content:center}
.hero.short{min-height:460px;height:60vh}
.hero.short{background:radial-gradient(ellipse at 50% 38%,#0d1224 0%,#080b18 55%,#04060f 100%)}
.hero.short .h-img{display:none}
.hero.short .h-grad{display:none}
.hero.short::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,transparent 0px,transparent 14px,rgba(100,140,180,0.05) 14px,rgba(100,140,180,0.05) 15.5px),repeating-linear-gradient(135deg,transparent 0px,transparent 28px,rgba(90,130,170,0.04) 28px,rgba(90,130,170,0.04) 29.5px);pointer-events:none;z-index:1}
.hero.short .h-h1{font-size:clamp(38px,4.5vw,60px)}
.hero.short .h-sub{font-family:var(--sans);font-size:13.5px;font-style:normal;font-weight:400;color:rgba(255,255,255,0.92);line-height:1.7;letter-spacing:0;text-shadow:0 1px 16px rgba(0,0,0,0.6);max-width:680px;margin:0 auto}
.h-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;filter:brightness(0.78) saturate(0.95)}
.h-grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,8,16,0.3) 0%,rgba(4,8,16,0.5) 50%,rgba(4,8,16,0.78) 100%);z-index:1}
.hc{position:relative;z-index:5;text-align:center;padding:0 40px;max-width:1240px;margin:0 auto}
.h-eye{font-size:11px;letter-spacing:0.44em;text-transform:uppercase;color:rgba(255,255,255,0.92);margin-bottom:22px;display:block;font-weight:500}
.h-h1{font-family:var(--serif);font-size:clamp(42px,5.2vw,72px);font-weight:300;color:#fff;line-height:1.05;letter-spacing:-0.015em;margin-bottom:20px}
.h-h1 em{font-style:italic;color:rgba(220,200,160,0.95)}
.h-rule{width:32px;height:0.5px;background:rgba(255,255,255,0.35);margin:0 auto 22px}
.h-sub{font-family:var(--serif);font-size:20px;font-style:italic;color:rgba(255,255,255,0.88);font-weight:300;letter-spacing:0.01em;text-shadow:0 1px 16px rgba(0,0,0,0.55);max-width:640px;margin:0 auto}

/* INTRO COPY (ivory section) */
.intro{background:#f3ede3;padding:110px 80px 96px;border-top:0.5px solid rgba(100,80,50,0.1)}
.intro-inner{max-width:880px;margin:0 auto;text-align:center}
.intro-eye{display:block;font-family:var(--sans);font-size:10px;letter-spacing:0.44em;text-transform:uppercase;color:rgba(80,62,38,0.55);margin-bottom:28px}
.intro-h{font-family:var(--serif);font-size:clamp(34px,3.8vw,52px);font-weight:300;color:#1a1410;line-height:1.1;letter-spacing:-0.01em;margin-bottom:24px}
.intro-h em{font-style:italic;color:var(--gold-soft)}
.intro-body{font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);font-weight:300;color:#1a1410;line-height:1.5;letter-spacing:0.005em}
.intro-body + .intro-body{margin-top:22px}
.intro-body em{font-style:italic;color:var(--gold-soft)}

/* DARK NAVY SECTION (mem/cred pattern) */
.dark-sec{background-color:#06111e;background-image:repeating-linear-gradient(135deg,transparent 0px,transparent 14px,rgba(100,140,180,0.052) 14px,rgba(100,140,180,0.052) 15.5px),repeating-linear-gradient(135deg,transparent 0px,transparent 28px,rgba(90,130,170,0.044) 28px,rgba(90,130,170,0.044) 29.5px);padding:96px 80px 110px}
.dark-inner{max-width:1100px;margin:0 auto}
.dark-head{text-align:center;margin-bottom:64px}
.dark-eye{display:block;font-family:var(--sans);font-size:9px;letter-spacing:0.44em;text-transform:uppercase;color:rgba(140,178,212,0.6);margin-bottom:22px}
.dark-h{font-family:var(--serif);font-size:clamp(36px,3.6vw,52px);font-weight:300;color:#f3ede3;line-height:1.1;letter-spacing:-0.01em}
.dark-h em{font-style:italic;color:var(--gold)}
.dark-sub{font-family:var(--serif);font-style:italic;font-size:18px;color:rgba(243,237,227,0.55);margin-top:18px;font-weight:300}

/* Two-col grid used for cred items, service lists, etc. */
.grid-2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(243,237,227,0.1);box-shadow:0 64px 240px rgba(0,0,0,0.28),0 28px 112px rgba(0,0,0,0.18),0 6px 28px rgba(0,0,0,0.15)}
.grid-2 .gi{background:#06111e;padding:34px 36px;display:flex;align-items:flex-start;gap:22px}
.grid-2 .gi .gn{font-family:var(--serif);font-size:18px;font-style:italic;font-weight:300;color:var(--gold);line-height:1.4;min-width:28px;letter-spacing:0.02em}
.grid-2 .gi .gt{font-family:var(--serif);font-size:19px;font-weight:300;color:rgba(243,237,227,0.86);line-height:1.45;letter-spacing:0.005em}
.grid-2 .gi.full{grid-column:1 / -1}

/* IVORY CARD GRID (for service tiers, magazine articles, etc.) */
.cards{background:#f7f5f1;padding:90px 80px 100px;border-top:0.5px solid rgba(100,80,50,0.1)}
.cards-head{text-align:center;margin:0 auto 56px;max-width:880px}
.cards-eye{display:block;font-family:var(--sans);font-size:10px;letter-spacing:0.44em;text-transform:uppercase;color:rgba(80,62,38,0.6);margin-bottom:18px}
.cards-h{font-family:var(--serif);font-size:clamp(34px,3.4vw,50px);font-weight:300;color:#1a1410;line-height:1.12;letter-spacing:-0.01em;margin-bottom:14px}
.cards-h em{font-style:italic;color:var(--gold-soft)}
.cards-sub{font-family:var(--serif);font-style:italic;font-size:18px;color:rgba(40,30,20,0.55);font-weight:300}
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1240px;margin:0 auto}
.cards-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.cards-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;overflow:hidden;background:#1a1a1a;aspect-ratio:4/5;text-decoration:none;color:inherit;display:block}
.card-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.78);transition:transform 0.6s ease,filter 0.6s ease}
.card:hover .card-bg{transform:scale(1.04);filter:brightness(0.92)}
.card-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,0.78) 0%,rgba(10,10,10,0.15) 50%,transparent 78%)}
.card-txt{position:absolute;bottom:28px;left:28px;right:28px;z-index:2}
.card-eye{font-family:var(--sans);font-size:9px;letter-spacing:0.36em;text-transform:uppercase;color:rgba(243,237,227,0.72);display:block;margin-bottom:10px}
.card-h{font-family:var(--serif);font-size:24px;font-weight:300;color:rgba(243,237,227,0.98);line-height:1.15;letter-spacing:-0.005em}
.card-arrow{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:9.5px;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold)}

/* SERVICE LIST (numbered list, ivory bg) */
.svc{background:#f3ede3;padding:90px 80px 100px;border-top:0.5px solid rgba(100,80,50,0.1)}
.svc-inner{max-width:1100px;margin:0 auto}
.svc-head{text-align:center;margin-bottom:56px}
.svc-eye{display:block;font-family:var(--sans);font-size:10px;letter-spacing:0.44em;text-transform:uppercase;color:rgba(80,62,38,0.6);margin-bottom:18px}
.svc-h{font-family:var(--serif);font-size:clamp(34px,3.4vw,50px);font-weight:300;color:#1a1410;line-height:1.12;letter-spacing:-0.01em}
.svc-h em{font-style:italic;color:var(--gold-soft)}
.svc-price{display:inline-block;margin-top:24px;font-family:var(--sans);font-size:10px;letter-spacing:0.44em;text-transform:uppercase;color:var(--gold-soft);border:0.5px solid rgba(140,100,40,0.4);padding:9px 22px;border-radius:999px}
.svc-list{list-style:none;display:grid;grid-template-columns:1fr;gap:1px;background:rgba(100,80,50,0.13);border-top:0.5px solid rgba(100,80,50,0.13);border-bottom:0.5px solid rgba(100,80,50,0.13)}
.svc-list li{background:#f3ede3;padding:30px 40px;display:flex;align-items:flex-start;gap:24px;font-family:var(--serif);font-size:19px;font-weight:300;color:#1a1410;line-height:1.5;letter-spacing:0.005em}
.svc-list li::before{content:counter(svc, decimal-leading-zero);counter-increment:svc;font-family:var(--serif);font-size:16px;font-style:italic;color:var(--gold-soft);min-width:32px;line-height:1.5}
.svc-list{counter-reset:svc}
.svc-foot{margin-top:36px;text-align:center;font-family:var(--sans);font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:rgba(80,62,38,0.5)}

/* CTA BLOCK (black bg) */
.cta{background:#000;padding:110px 80px;text-align:center;border-top:0.5px solid rgba(255,255,255,0.06)}
.cta-eye{display:block;font-family:var(--sans);font-size:10px;letter-spacing:0.44em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:24px}
.cta-h{font-family:var(--serif);font-size:clamp(34px,4vw,54px);font-weight:300;color:#fff;line-height:1.12;letter-spacing:-0.01em;margin-bottom:14px;max-width:840px;margin-left:auto;margin-right:auto}
.cta-h em{font-style:italic;color:var(--gold)}
.cta-sub{font-family:var(--serif);font-size:18px;font-style:italic;color:rgba(255,255,255,0.5);font-weight:300;margin-bottom:38px}
.cta-btn{display:inline-block;font-family:var(--sans);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;padding:16px 42px;background:#fff;color:#0e0e0e;border-radius:999px;text-decoration:none;transition:transform 0.25s,background 0.25s,color 0.25s}
.cta-btn:hover{background:var(--gold);color:#fff}
.cta-btn.ghost{background:transparent;color:rgba(255,255,255,0.78);border:0.5px solid rgba(255,255,255,0.35);margin-left:10px}
.cta-btn.ghost:hover{background:rgba(255,255,255,0.08);color:#fff}

/* FORM (ivory bg) */
.form-sec{background:#ede6da;padding:100px 80px 110px;border-top:0.5px solid rgba(100,80,50,0.1)}
.form-inner{max-width:760px;margin:0 auto}
.form-head{text-align:center;margin-bottom:48px}
.form-eye{display:block;font-family:var(--sans);font-size:10px;letter-spacing:0.44em;text-transform:uppercase;color:rgba(80,62,38,0.55);margin-bottom:18px}
.form-h{font-family:var(--serif);font-size:clamp(30px,3vw,44px);font-weight:300;color:#1a1410;line-height:1.12;letter-spacing:-0.01em;margin-bottom:12px}
.form-h em{font-style:italic;color:var(--gold-soft)}
.form-sub{font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(40,30,20,0.6);font-weight:300}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--sans);font-size:9px;letter-spacing:0.32em;text-transform:uppercase;color:rgba(40,30,20,0.6)}
.field input,.field select,.field textarea{font-family:var(--serif);font-size:17px;font-weight:300;color:#1a1410;background:transparent;border:none;border-bottom:0.5px solid rgba(40,30,20,0.28);padding:12px 0 10px;outline:none;transition:border-color 0.2s}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold-soft)}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.form-submit{display:inline-block;margin-top:34px;font-family:var(--sans);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;padding:16px 50px;background:#0e0e0e;color:#fff;border:none;border-radius:999px;cursor:pointer;transition:background 0.25s}
.form-submit:hover{background:var(--gold-soft)}
.form-submit[disabled]{opacity:0.6;cursor:wait}
.form-honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{font-family:var(--serif);font-style:italic;font-size:16px;color:#7a1f1f;background:rgba(163,51,51,0.06);border:0.5px solid rgba(163,51,51,0.28);padding:12px 18px;margin-bottom:18px;grid-column:1 / -1}
.form-success{font-family:var(--serif);font-size:20px;font-weight:300;color:#1a1410;line-height:1.55;text-align:center;padding:40px 20px;grid-column:1 / -1}
.form-success strong{font-style:italic;color:var(--gold-soft);font-weight:400}

/* PROSE (privacy policy, long-form copy) */
.prose{background:#f3ede3;padding:100px 80px 110px;border-top:0.5px solid rgba(100,80,50,0.1)}
.prose-inner{max-width:780px;margin:0 auto;font-family:var(--serif);color:#1a1410}
.prose-inner h2{font-family:var(--serif);font-size:24px;font-weight:300;color:#1a1410;letter-spacing:-0.005em;margin:42px 0 14px}
.prose-inner h2:first-child{margin-top:0}
.prose-inner p{font-size:17.5px;font-weight:300;line-height:1.7;color:rgba(20,14,10,0.82);margin-bottom:16px;letter-spacing:0.005em}
.prose-inner ul{padding-left:22px;margin:8px 0 18px}
.prose-inner li{font-size:17.5px;font-weight:300;line-height:1.7;color:rgba(20,14,10,0.82);margin-bottom:8px}
.prose-inner .meta{font-family:var(--sans);font-size:10px;letter-spacing:0.36em;text-transform:uppercase;color:rgba(80,62,38,0.55);margin-bottom:34px;display:block}
.prose-inner strong{font-weight:400;color:#1a1410}

/* FOOTER */
footer{background:#0e0e0e;padding:44px 80px;border-top:0.5px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.f-brand{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,255,0.78)}
.f-links{display:flex;gap:32px;flex-wrap:wrap}
.f-links a{font-family:var(--sans);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.55);text-decoration:none;transition:color 0.2s}
.f-links a:hover{color:rgba(255,255,255,0.9)}
.f-copy{font-family:var(--sans);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.4)}

/* Cloned-into-drawer CTA is only visible in the mobile menu */
.nm .nm-cta-li{display:none}

/* Mobile nav: hamburger button (hidden on desktop) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:transparent;border:none;cursor:pointer;padding:10px;width:40px;height:40px;-webkit-tap-highlight-color:transparent;margin-left:auto;order:2}
.nav-toggle span{display:block;width:22px;height:1px;background:rgba(255,255,255,0.85);transition:transform 0.28s ease,opacity 0.2s ease}
nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.nav-locked{overflow:hidden}

@media (max-width:860px){
  html,body{overflow-x:hidden;max-width:100vw;width:100%}
  body > nav,body > section,body > footer{width:100%;max-width:100vw;box-sizing:border-box}
  img,video{max-width:100%}
  nav{padding:14px 22px}
  .nav-toggle{display:flex}
  nav > .nc{display:none}              /* original CTA hidden; cloned into drawer by nav.js */
  .nl{order:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Slide-down drawer */
  .nm{
    display:flex;
    position:fixed;
    top:0;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#0e0e0e;
    padding:80px 28px 36px;
    border-bottom:0.5px solid rgba(255,255,255,0.08);
    transform:translateY(-100%);
    transition:transform 0.32s cubic-bezier(.2,.7,.2,1);
    z-index:-1;
    max-height:100vh;
    overflow-y:auto;
  }
  nav.nav-open .nm{transform:translateY(0)}
  .nm li{width:100%;border-bottom:0.5px solid rgba(255,255,255,0.07)}
  .nm li:last-child{border-bottom:none}
  .nm a{display:block;padding:18px 0;font-size:13px;letter-spacing:0.22em;color:rgba(255,255,255,0.88)}
  .nm a.active{color:rgba(180,155,100,0.95)}
  .nm .nm-cta-li{display:block;border-bottom:none;margin-top:22px}
  .nm .nm-cta{display:inline-block;padding:14px 26px;border:0.5px solid rgba(255,255,255,0.45);border-radius:999px;color:rgba(255,255,255,0.95);font-size:10px;letter-spacing:0.24em;text-transform:uppercase}
  .hero{min-height:520px;height:70vh}
  .hero.short{min-height:380px;height:55vh}
  .intro,.dark-sec,.cards,.svc,.cta,.form-sec,.prose{padding-left:24px;padding-right:24px}
  .intro,.dark-sec,.cards,.svc,.form-sec,.prose{padding-top:72px;padding-bottom:72px}
  .cta{padding-top:80px;padding-bottom:80px}
  .grid-2,.cards-grid,.cards-grid.cols-3,.cards-grid.cols-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .svc-list li{padding:24px 28px;font-size:17px}
  footer{padding:32px 24px;flex-direction:column;text-align:center;align-items:center}
  .f-links{justify-content:center;gap:18px 24px}
}
@media (max-width:380px){
  nav{padding:12px 16px}
}

/* CLOSING CTA — shared between membership, magazine, videos */
.close-cta{background:radial-gradient(ellipse at 50% 40%,#0d1224 0%,#080b18 55%,#04060f 100%);padding:110px 80px;text-align:center;border-top:0.5px solid rgba(255,255,255,0.06)}
.cc-pill{display:inline-block;border:0.5px solid rgba(255,255,255,0.2);padding:7px 20px;font-family:var(--sans);font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,255,0.42);margin-bottom:28px}
.cc-h{font-family:var(--serif);font-size:clamp(34px,3.6vw,48px);font-weight:300;color:#fff;line-height:1.1;letter-spacing:-0.015em;max-width:1400px;margin:0 auto 22px;white-space:nowrap}
.cc-h em{color:rgba(180,160,120,0.95);font-style:italic;font-weight:300}
.cc-p{font-family:var(--sans);font-size:15px;font-weight:400;color:rgba(255,255,255,0.78);max-width:780px;margin:0 auto 36px;line-height:1.78}
.cc-btns{display:flex;gap:14px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.ccb1{font-family:var(--sans);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;padding:16px 40px;background:#fff;color:#0e0e0e;border:none;cursor:pointer;border-radius:999px;text-decoration:none;display:inline-block}
.ccb2{font-family:var(--sans);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;padding:16px 40px;background:transparent;color:rgba(255,255,255,0.85);border:0.5px solid rgba(255,255,255,0.4);cursor:pointer;border-radius:999px;text-decoration:none;display:inline-block}
.cc-fine{font-family:var(--serif);font-size:13px;font-style:italic;color:rgba(255,255,255,0.28);line-height:1.6}
@media (max-width:860px){
  .close-cta{padding:64px 22px 80px}
  .cc-h{font-size:clamp(26px,6.5vw,36px);white-space:normal}
  .cc-p{max-width:none}
  .cc-btns{flex-direction:column;gap:10px;align-items:center}
  .ccb1,.ccb2{width:100%;max-width:280px;padding:14px 22px}
}