:root{
    --black:#111111;
    --ivory:#F6F2EC;
    --soft-white:#FCFBF8;
    --champagne:#B79A68;
    --champagne-deep:#7A5A34;
    --forest:#243C35;
    --clay:#A85F45;
    --burgundy:#5C1A2B;
    --burgundy-deep:#3D0F1C;
    --grey:#6E6E6E;

    --display: 'Fraunces', Georgia, serif;
    --sans: 'Switzer', 'Inter', -apple-system, sans-serif;
    --body: 'Inter', -apple-system, sans-serif;

    --max: 1280px;
    --text-col: 720px;
    --section-space: 150px;
    --section-space-mobile: 84px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ivory);
    color:var(--black);
    font-family:var(--body);
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .container{max-width:var(--max);margin:0 auto;padding:0 32px;}

  h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-0.01em;line-height:1.05;}
  .eyebrow{
    font-family:var(--sans);font-weight:500;font-size:11.5px;text-transform:uppercase;
    letter-spacing:0.15em;color:var(--champagne-deep);
  }
  .lede{max-width:var(--text-col);font-size:18px;line-height:1.7;color:var(--grey);}

  section{padding:var(--section-space) 0;}
  @media (max-width:860px){
    section{padding:var(--section-space-mobile) 0;}
    body{font-size:16px;}
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
    padding:16px 30px;border-radius:0;border:1px solid transparent;
    transition:all .35s ease;cursor:pointer;white-space:nowrap;
  }
  .btn-primary{background:var(--black);color:var(--soft-white);}
  .btn-primary:hover{background:var(--forest);}
  .btn-secondary{background:transparent;color:var(--black);border-color:var(--black);}
  .btn-secondary:hover{background:var(--black);color:var(--soft-white);}
  .btn-onlight-primary, .btn-ondark-primary{background:var(--ivory);color:var(--black);}
  .btn-onlight-primary:hover, .btn-ondark-primary:hover{background:var(--soft-white);}
  .btn-ondark-secondary{background:transparent;color:var(--ivory);border-color:rgba(246,242,236,.5);}
  .btn-ondark-secondary:hover{background:rgba(246,242,236,.1);border-color:var(--ivory);}

  /* ---------- Nav ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:26px 0;transition:all .4s ease;
  }
  /* Legibility scrim for the transparent (non-scrolled) header state: the light logo/nav
     colours below assume a dark hero photo sits directly underneath. Not every page opens
     on one, so this guarantees contrast regardless of what's actually behind the header.
     Only ever visible pre-scroll on non-.interior pages — .interior pages force .scrolled
     immediately (see js/main.js), so this never renders there. */
  header:not(.scrolled)::before{
    content:"";position:absolute;top:0;left:0;right:0;height:170px;
    background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,0) 100%);
    pointer-events:none;z-index:-1;
  }
  header.scrolled{background:var(--ivory);padding:16px 0;box-shadow:0 1px 0 rgba(17,17,17,.06);}
  .navwrap{display:flex;align-items:center;justify-content:space-between;}
  .logo{font-family:var(--display);font-size:22px;letter-spacing:.02em;color:var(--soft-white);transition:color .4s ease;}
  header.scrolled .logo{color:var(--black);}
  nav.desktop-nav{display:flex;align-items:center;gap:38px;}
  nav.desktop-nav a{
    font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.03em;
    color:rgba(255,255,255,.88);transition:color .3s ease;position:relative;
  }
  header.scrolled nav.desktop-nav a{color:var(--black);}
  nav.desktop-nav a:not(.btn):hover{color:var(--champagne);}
  header.scrolled nav.desktop-nav a:not(.btn):hover{color:var(--champagne-deep);}
  .nav-cta{margin-left:6px;}
  .menu-toggle{display:none;}

  @media (max-width:980px){
    nav.desktop-nav{display:none;}
    .menu-toggle{
      display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;
    }
    .menu-toggle span{width:24px;height:1.5px;background:var(--soft-white);transition:background .3s;}
    header.scrolled .menu-toggle span{background:var(--black);}
  }

  .mobile-menu{
    position:fixed;inset:0;background:rgba(17,17,17,.86);z-index:200;overflow-y:auto;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    transform:translateY(-100%);opacity:0;
    transition:transform .5s cubic-bezier(.65,0,.35,1),opacity .4s ease;
  }
  @supports not (backdrop-filter:blur(1px)){
    .mobile-menu{background:rgba(17,17,17,.97);}
  }
  .mobile-menu.open{transform:translateY(0);opacity:1;}
  .mm-inner{max-width:var(--max);margin:0 auto;padding:32px;min-height:100%;display:flex;flex-direction:column;box-sizing:border-box;}
  .mm-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18);
    opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .4s ease;}
  .mobile-menu.open .mm-head{opacity:1;transform:translateY(0);transition-delay:.05s;}
  .mobile-menu .mobile-brand{width:170px;}
  .mobile-menu .mobile-brand img{width:100%;height:auto;display:block;}
  .mobile-close{
    background:none;border:none;color:var(--soft-white);cursor:pointer;
    font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:var(--sans);
    display:flex;align-items:center;gap:8px;transition:color .2s ease;
  }
  .mobile-close:hover{color:var(--champagne);}

  .mm-body{display:grid;grid-template-columns:1fr;column-gap:56px;padding:44px 0 8px;flex:1;}
  @media (min-width:760px){.mm-body{grid-template-columns:7fr 5fr;}}

  .mm-inner>a{color:var(--soft-white);transition:color .2s ease;}
  .mm-inner>a:hover{color:var(--champagne);}

  .mm-nav{counter-reset:mmnav;display:flex;flex-direction:column;}
  .mm-nav a{
    counter-increment:mmnav;position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    font-family:var(--display);font-weight:400;font-size:clamp(20px,3vw,28px);color:var(--soft-white);
    padding:16px 0;border-top:1px solid rgba(255,255,255,.18);background-color:transparent;
    transition:color .2s ease,transform .2s ease,border-color .2s ease,background-color .2s ease;
    opacity:0;transform:translateY(10px);
  }
  .mobile-menu.open .mm-nav a{opacity:1;transform:translateY(0);transition:color .2s ease,transform .2s ease,border-color .2s ease,background-color .2s ease,opacity .4s ease;}
  .mm-nav a:nth-child(1){transition-delay:.1s;}
  .mm-nav a:nth-child(2){transition-delay:.15s;}
  .mm-nav a:nth-child(3){transition-delay:.2s;}
  .mm-nav a:nth-child(4){transition-delay:.25s;}
  .mm-nav a:last-child{border-bottom:1px solid rgba(255,255,255,.18);}
  .mm-nav a::after{
    content:counter(mmnav,decimal-leading-zero);
    font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.05em;color:rgba(183,154,104,.75);
    transition:color .2s ease;flex-shrink:0;
  }
  @media (hover:hover){
    .mobile-menu.open .mm-nav a:hover{color:var(--champagne);transform:translateX(8px);border-color:var(--champagne);background-color:rgba(255,255,255,.035);}
    .mm-nav a:hover::after{color:var(--champagne);}
  }

  .mm-intro{margin-top:36px;padding:28px;
    background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.16);border-radius:0;
    opacity:0;transition:opacity .5s ease;transition-delay:.3s;}
  @supports not (backdrop-filter:blur(1px)){
    .mm-intro{background:rgba(255,255,255,.08);}
  }
  .mobile-menu.open .mm-intro{opacity:1;}
  @media (min-width:760px){.mm-intro{margin-top:0;padding:32px;}}
  .mm-intro-label{display:block;font-family:var(--display);font-size:19px;line-height:1.3;color:var(--soft-white);margin-bottom:14px;}
  .mm-intro p{font-family:var(--body);font-size:14px;line-height:1.65;color:rgba(250,250,247,.82);max-width:30em;}
  .mm-social{display:flex;gap:20px;margin-top:20px;}
  .mm-social a{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(250,250,247,.55);border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s ease,border-color .2s ease;}
  .mm-social a:hover{color:var(--champagne);border-color:var(--champagne);}

  @media (prefers-reduced-motion:reduce){
    .mobile-menu,.mm-head,.mm-nav a,.mm-intro{transition:opacity .15s ease!important;transform:none!important;transition-delay:0s!important;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:flex-end;
    padding:0 0 100px 0;color:var(--soft-white);overflow:hidden;
  }
  .hero-content{position:relative;z-index:2;max-width:800px;}
  .hero h1{font-size:clamp(52px,8.5vw,124px);font-weight:300;margin:22px 0 28px;letter-spacing:-0.02em;}
  .hero-ctas{display:flex;gap:18px;margin-top:38px;flex-wrap:wrap;}

  /* ---------- Introduction ---------- */
  .intro-grid{
    display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:start;
  }
  .intro-grid h2{font-size:clamp(30px,3.6vw,44px);font-weight:400;}
  @media (max-width:860px){
    .intro-grid{grid-template-columns:1fr;gap:32px;}
  }
  .intro-grid .right p{margin-bottom:20px;color:var(--grey);}
  .intro-grid .right{padding-top:6px;}

  /* ---------- Pillars ---------- */
  .pillar-row{
    display:grid;grid-template-columns:120px 1fr 2fr;gap:36px;align-items:baseline;
    padding:36px 0;border-top:1px solid rgba(17,17,17,.1);
  }
  .pillar-row:last-child{border-bottom:1px solid rgba(17,17,17,.1);}
  .pillar-num{font-family:var(--display);font-size:15px;color:var(--champagne-deep);letter-spacing:.05em;}
  .pillar-name{font-family:var(--display);font-size:clamp(26px,3vw,38px);font-weight:400;}
  .pillar-desc{color:var(--grey);max-width:520px;}
  @media (max-width:700px){
    .pillar-row{grid-template-columns:1fr;gap:10px;padding:26px 0;}
  }

  /* ---------- Section headers ---------- */
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:54px;flex-wrap:wrap;}
  .section-head h2{font-size:clamp(30px,3.6vw,48px);font-weight:400;max-width:600px;}

  /* ---------- Featured event ---------- */
  .event-feature{
    display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-bottom:64px;
  }
  .event-feature img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;filter:saturate(1.02);}
  .event-tag{
    display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;background:rgba(183,154,104,.16);color:var(--champagne-deep);
    padding:6px 12px;border-radius:4px;margin-bottom:16px;
  }
  /* Event status system: apply one alongside .event-tag as real events are added.
     status-upcoming (default above) · status-soldout · status-waitlist · status-priority · status-past */
  .event-tag.status-soldout{background:rgba(168,95,69,.14);color:var(--clay);}
  .event-tag.status-waitlist{background:rgba(110,110,110,.14);color:var(--grey);}
  .event-tag.status-priority{background:var(--black);color:var(--soft-white);}
  .event-tag.status-past{background:rgba(110,110,110,.1);color:var(--grey);opacity:.8;}
  .event-feature h3{font-size:clamp(26px,3vw,36px);font-weight:400;margin-bottom:14px;}
  .event-meta{color:var(--grey);font-size:15px;margin-bottom:18px;}
  @media (max-width:860px){.event-feature{grid-template-columns:1fr;}}

  /* ---------- Signature experiences ---------- */
  .sig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;}
  .sig-card{
    background:var(--forest);color:var(--ivory);border-radius:8px;padding:36px 28px;min-height:260px;
    display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s ease;
  }
  .sig-card:hover{transform:translateY(-6px);}
  .sig-card:nth-child(5n+2){background:var(--clay);}
  .sig-card:nth-child(5n+3){background:var(--black);}
  .sig-card:nth-child(5n+4){background:#3a3a3a;}
  .sig-card h3{font-family:var(--display);font-size:24px;font-weight:400;margin-bottom:12px;}
  .sig-card p{font-size:14.5px;opacity:.85;}
  @media (max-width:980px){.sig-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.sig-grid{grid-template-columns:1fr;}}

  /* ---------- Moments mosaic ---------- */
  .moments{background:var(--black);color:var(--ivory);}
  .moments .eyebrow{color:var(--champagne);}
  .moments h2{color:var(--soft-white);}
  .moments .lede{color:#b9b9b9;}
  .mosaic{
    display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:12px;margin-top:56px;
  }
  .mosaic img{width:100%;height:100%;object-fit:cover;border-radius:6px;filter:saturate(1.05) contrast(1.02);transition:transform .6s ease;}
  .mosaic div{overflow:hidden;border-radius:6px;display:block;}
  .mosaic div:hover img{transform:scale(1.04);}
  .m1{grid-column:span 2;grid-row:span 2;}
  .m2{grid-column:span 2;grid-row:span 3;}
  .m3{grid-column:span 2;grid-row:span 2;}
  .m4{grid-column:span 3;grid-row:span 2;}
  .m5{grid-column:span 3;grid-row:span 2;}
  .m6{grid-column:span 2;grid-row:span 1;}
  @media (max-width:860px){
    .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;}
    .m1,.m2,.m3,.m4,.m5,.m6{grid-column:span 1;grid-row:span 2;}
  }
  @media (max-width:460px){
    .mosaic{grid-auto-rows:112px;gap:8px;}
    .m1,.m2,.m3,.m4,.m5,.m6{grid-row:span 1;}
  }

  /* ---------- Membership ---------- */
  .membership{background:var(--forest);color:var(--ivory);}
  .membership .eyebrow{color:var(--champagne);}
  .membership h2{color:var(--soft-white);font-size:clamp(32px,4vw,54px);max-width:640px;}
  .membership .lede{color:#d3ded9;}
  .tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(246,242,236,.15);margin-top:56px;}
  .tier{background:var(--forest);padding:36px 30px;}
  .tier h3{font-family:var(--display);font-size:22px;font-weight:400;margin-bottom:14px;color:var(--champagne);}
  .tier p{color:#cfd9d4;font-size:15px;}
  @media (max-width:860px){.tier-row{grid-template-columns:1fr;}}

  /* ---------- New to Qatar ---------- */
  .qatar-guide{background:var(--forest);color:var(--ivory);}
  .qatar-guide .eyebrow{color:var(--champagne);}
  .qatar-guide h2{color:var(--soft-white);font-size:clamp(32px,4vw,52px);max-width:680px;}
  .qatar-guide .lede{color:#d3ded9;}
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;}
  .tile{
    border:1px solid rgba(246,242,236,.2);border-radius:6px;padding:26px 22px;
    font-family:var(--sans);font-size:15px;font-weight:500;transition:border-color .3s,background .3s;
  }
  .tile:hover{border-color:var(--champagne);background:rgba(183,154,104,.08);}
  .tile-soon{display:flex;align-items:center;justify-content:space-between;gap:10px;color:rgba(246,242,236,.55);cursor:default;}
  .tile-soon .soon-tag{color:var(--champagne);border-color:rgba(183,154,104,.4);}
  @media (max-width:700px){.tiles{grid-template-columns:1fr 1fr;}}
  @media (max-width:460px){.tiles{grid-template-columns:1fr;}}

  /* ---------- Community stories ---------- */
  .stories{background:var(--soft-white);}
  .quote-block{max-width:840px;margin:0 auto;text-align:center;}
  .quote-block blockquote{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);font-weight:400;line-height:1.35;}

  /* ---------- Founders ---------- */
  .founders{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;}
  .founders img{border-radius:8px;aspect-ratio:5/4;object-fit:cover;}
  .founders h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:22px;}
  .founders p{color:var(--grey);margin-bottom:18px;max-width:560px;}
  @media (max-width:860px){.founders{grid-template-columns:1fr;gap:36px;}}
  .founder-list{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;max-width:560px;}
  .founder-item h3{font-family:var(--display);font-size:19px;font-weight:400;margin-bottom:4px;}
  .founder-role{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--champagne-deep);margin-bottom:8px;}
  .founder-bio{font-size:13.5px;color:var(--grey);font-style:italic;}
  @media (max-width:520px){.founder-list{grid-template-columns:1fr;}}

  /* ---------- Final CTA ---------- */
  .final-cta{background:var(--black);color:var(--soft-white);text-align:center;}
  .final-cta h2{font-size:clamp(38px,6vw,74px);font-weight:300;max-width:900px;margin:0 auto 26px;}
  .final-cta .lede{margin:0 auto 42px;text-align:center;color:#c9c9c9;}
  .final-cta .hero-ctas{justify-content:center;}

  /* ---------- Footer ---------- */
  footer{background:var(--black);color:#bdbdbd;padding:80px 0 36px;}
  .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:50px;padding-bottom:60px;border-bottom:1px solid rgba(246,242,236,.1);}
  @media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px 40px;}}
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:32px;}}
  .footer-grid .logo{color:var(--soft-white);margin-bottom:16px;display:block;}
  .footer-grid h5{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a;margin-bottom:18px;}
  .footer-grid a{display:block;font-size:14.5px;padding:6px 0;color:#d8d8d8;transition:color .25s;}
  .footer-grid a:hover{color:var(--champagne);}
  .footer-newsletter{display:flex;gap:8px;margin-top:16px;}
  .footer-newsletter input{
    flex:1;background:transparent;border:1px solid rgba(246,242,236,.25);border-radius:0;
    padding:12px 14px;color:var(--soft-white);font-family:var(--body);font-size:14px;
  }
  .footer-newsletter input::placeholder{color:#8a8a8a;}
  .footer-bottom{display:flex;justify-content:space-between;padding-top:28px;font-size:13px;color:#7c7c7c;flex-wrap:wrap;gap:12px;}
  .footer-bottom a{color:#7c7c7c;}
  .footer-bottom a:hover{color:var(--champagne);}

  /* ---------- Reveal on scroll ---------- */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease;}
  .reveal.visible{opacity:1;transform:translateY(0);}
  /* Staggered reveal — children of a .reveal-stagger fade up in sequence once the parent
     is observed as .visible (same IntersectionObserver, no extra JS needed). The wrapper
     itself stays neutral (no double motion) when both .reveal and .reveal-stagger are used
     together for observer wiring — only its children animate. */
  .reveal.reveal-stagger{opacity:1;transform:none;transition:none;}
  .reveal-stagger.visible > *{opacity:1;transform:translateY(0);}
  .reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
  .reveal-stagger > *:nth-child(1){transition-delay:0s;}
  .reveal-stagger > *:nth-child(2){transition-delay:.08s;}
  .reveal-stagger > *:nth-child(3){transition-delay:.16s;}
  .reveal-stagger > *:nth-child(4){transition-delay:.24s;}
  .reveal-stagger > *:nth-child(5){transition-delay:.32s;}
  /* Slow image zoom — for selected photography only, applied deliberately, not globally. */
  .hx-zoom{overflow:hidden;}
  .hx-zoom img{transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
  .hx-zoom:hover img{transform:scale(1.035);}
  /* Animated rule — a dedicated thin line that draws left-to-right once revealed
     (nest it inside a .reveal container, or add .visible to it directly via JS/IO). */
  .hx-rule-draw{height:1px;background:var(--hx-rule,rgba(23,23,20,.5));transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.65,0,.35,1);}
  .hx-rule-draw-light{background:rgba(250,250,247,.35);}
  .reveal.visible .hx-rule-draw,.hx-rule-draw.visible{transform:scaleX(1);}
  @media (prefers-reduced-motion:reduce){
    .reveal,.reveal-stagger > *{opacity:1;transform:none;transition:none;}
    .hx-zoom img{transition:none;}
    .hx-zoom:hover img{transform:none;}
    .hx-rule-draw{transform:scaleX(1);transition:none;}
  }

  /* generic grid helpers */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media (max-width:700px){.grid2{grid-template-columns:1fr;}}

/* ================= INTERIOR PAGE ADDITIONS ================= */

/* Compact page hero (non-homepage) */
.page-hero{
  padding:calc(var(--section-space) + 60px) 0 var(--section-space);
}
.page-hero.light{background:var(--ivory);color:var(--black);}
.page-hero.dark{background:var(--forest);color:var(--ivory);}
.page-hero.black{background:var(--black);color:var(--ivory);}
.page-hero.dark .lede, .page-hero.black .lede{color:#d3ded9;}
.page-hero h1{font-size:clamp(42px,6vw,80px);font-weight:300;margin:18px 0 22px;}
.page-hero .hero-ctas{margin-top:34px;}
@media (max-width:860px){
  .page-hero{padding:calc(var(--section-space-mobile) + 50px) 0 var(--section-space-mobile);}
}

/* Membership: who it's for */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
@media (max-width:860px){.who-grid{grid-template-columns:1fr;gap:28px;}}

/* Benefit chips */
.benefit-chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
.benefit-chip{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.03em;
  border:1px solid rgba(17,17,17,.16);border-radius:30px;padding:11px 22px;color:var(--black);
}

/* Membership tier detail cards */
.tier-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(17,17,17,.1);margin-top:56px;}
.tier-card{background:var(--soft-white);padding:40px 32px;display:flex;flex-direction:column;gap:22px;}
.tier-card.featured{background:var(--black);color:var(--ivory);}
.tier-card h3{font-family:var(--display);font-size:26px;font-weight:400;}
.tier-card .tier-tag{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne-deep);}
.tier-card.featured .tier-tag{color:var(--champagne);}
.tier-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;flex:1;}
.tier-card ul li{font-size:14.5px;color:var(--grey);padding-left:20px;position:relative;}
.tier-card.featured ul li{color:#cfcfcf;}
.tier-card ul li::before{content:"—";position:absolute;left:0;color:var(--champagne);}
@media (max-width:860px){.tier-cards{grid-template-columns:1fr;}}

/* Application steps */
.step-list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:50px;}
.step-item{padding-top:24px;border-top:1px solid rgba(17,17,17,.15);}
.step-num{font-family:var(--display);font-size:14px;color:var(--champagne-deep);}
.step-item h3{font-family:var(--display);font-weight:400;font-size:20px;margin:10px 0 8px;}
.step-item p{font-size:14px;color:var(--grey);}
@media (max-width:860px){.step-list{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.step-list{grid-template-columns:1fr;}}

/* Forms */
.app-form{max-width:760px;margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.app-form .full{grid-column:1/-1;}
.app-form label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;}
.app-form input, .app-form select, .app-form textarea{
  width:100%;background:var(--soft-white);border:1px solid rgba(17,17,17,.15);border-radius:6px;
  padding:14px 16px;font-family:var(--body);font-size:15px;color:var(--black);
}
.app-form textarea{min-height:110px;resize:vertical;}
.app-form input:focus, .app-form select:focus, .app-form textarea:focus{outline:2px solid var(--champagne);outline-offset:1px;}
@media (max-width:700px){.app-form{grid-template-columns:1fr;}}

/* Qatar Guide search */
.guide-search{max-width:640px;margin:40px auto 0;position:relative;}
.guide-search input{
  width:100%;padding:20px 24px;border-radius:8px;border:1px solid rgba(246,242,236,.25);
  background:rgba(246,242,236,.06);color:var(--ivory);font-family:var(--body);font-size:16px;
}
.guide-search input::placeholder{color:#a9b8b2;}
.guide-search input:focus{outline:2px solid var(--champagne);}
.quicklinks{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px;}
.quicklink{font-family:var(--sans);font-size:13px;color:#d3ded9;border:1px solid rgba(246,242,236,.2);border-radius:20px;padding:8px 16px;}
.quicklink:hover{border-color:var(--champagne);color:var(--champagne);}

/* Guide category grid */
.guide-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.guide-cat{background:var(--soft-white);border-radius:8px;padding:34px 28px;}
.guide-cat h3{font-family:var(--display);font-size:22px;font-weight:400;margin-bottom:14px;color:var(--forest);}
.guide-cat ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.guide-cat ul li{font-size:14px;color:var(--grey);}
@media (max-width:860px){.guide-cats{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.guide-cats{grid-template-columns:1fr;}}

.disclaimer-box{
  margin-top:50px;padding:22px 26px;border-left:3px solid var(--champagne);
  background:var(--soft-white);font-size:14px;color:var(--grey);max-width:760px;
}

/* Journal */
.journal-cats{background:var(--soft-white);border-bottom:1px solid rgba(17,17,17,.08);padding:22px 0}
.journal-cats .container{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.journal-cats span{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);}
.journal-cats span:not(:last-child):after{content:"·";margin-left:14px;color:rgba(17,17,17,.2);}
@media(max-width:600px){.journal-cats{padding:16px 0}.journal-cats span{font-size:11px}.journal-cats span:not(:last-child):after{margin-left:10px}}
.journal-feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.journal-feature img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;}
.journal-feature h3{font-family:var(--display);font-size:clamp(28px,3.2vw,42px);font-weight:400;margin:16px 0 18px;}
@media (max-width:860px){.journal-feature{grid-template-columns:1fr;}}

.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:60px;}
.journal-card img{border-radius:6px;aspect-ratio:4/3;object-fit:cover;margin-bottom:18px;}
.journal-card .eyebrow{margin-bottom:10px;display:block;}
.journal-card h3{font-family:var(--display);font-size:21px;font-weight:400;line-height:1.25;}
@media (max-width:860px){.journal-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.journal-grid{grid-template-columns:1fr;}}

/* Spotlight */
.spotlight-card{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center;background:var(--soft-white);border-radius:8px;padding:28px;}
.spotlight-card img{border-radius:6px;aspect-ratio:1/1;object-fit:cover;}
.spotlight-card h3{font-family:var(--display);font-size:20px;font-weight:400;}
.spotlight-card .role{font-family:var(--sans);font-size:12.5px;color:var(--champagne-deep);text-transform:uppercase;letter-spacing:.05em;margin:4px 0 12px;}
.spotlight-card p{font-size:14px;color:var(--grey);}
@media (max-width:560px){.spotlight-card{grid-template-columns:1fr;text-align:center;}.spotlight-card img{margin:0 auto;width:120px;}}

/* Values / origin */
.value-row{display:grid;grid-template-columns:280px 1fr;gap:30px;padding:28px 0;border-top:1px solid rgba(17,17,17,.1);}
.value-row:last-child{border-bottom:1px solid rgba(17,17,17,.1);}
.value-row h3{font-family:var(--display);font-size:22px;font-weight:400;}
.value-row p{color:var(--grey);}
@media (max-width:700px){.value-row{grid-template-columns:1fr;gap:8px;}}

/* Partner formats */
.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(17,17,17,.1);margin-top:50px;}
.format-item{background:var(--soft-white);padding:30px;font-family:var(--sans);font-size:15px;font-weight:500;}
@media (max-width:700px){.format-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.format-grid{grid-template-columns:1fr;}}

/* Contact routes */
.route-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:50px;}
.route-card{border:1px solid rgba(17,17,17,.12);border-radius:8px;padding:28px 24px;}
.route-card h3{font-family:var(--display);font-size:19px;font-weight:400;margin-bottom:8px;}
.route-card p{font-size:13.5px;color:var(--grey);}
@media (max-width:860px){.route-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.route-grid{grid-template-columns:1fr;}}

.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
@media (max-width:860px){.contact-split{grid-template-columns:1fr;gap:40px;}}
.social-list{display:flex;gap:20px;margin-top:30px;flex-wrap:wrap;}
.social-list a,.social-list .link-soon{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid rgba(17,17,17,.25);padding-bottom:2px;display:inline-flex;align-items:center;gap:8px;}
.social-list a:hover{color:var(--champagne-deep);border-color:var(--champagne-deep);}
.social-list .link-soon{color:var(--grey);opacity:.75;border-bottom-color:rgba(17,17,17,.14);}

/* ================= COMMUNITY DIRECTORY ================= */
.directory-controls{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px;
}
.directory-search{
  flex:1;min-width:240px;position:relative;
}
.directory-search input{
  width:100%;padding:16px 20px;border-radius:8px;border:1px solid rgba(17,17,17,.15);
  background:var(--soft-white);font-family:var(--body);font-size:16px;color:var(--black);
}
.directory-search input:focus{outline:2px solid var(--champagne);}
.directory-count{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap;
}
.directory-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;
}
@media (max-width:980px){.directory-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.directory-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.directory-grid{grid-template-columns:1fr 1fr;gap:14px;}}

.member-card{
  background:var(--soft-white);border-radius:8px;padding:22px 18px 24px;text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
  border:0;appearance:none;-webkit-appearance:none;display:block;width:100%;font:inherit;cursor:pointer;
}
.member-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(17,17,17,.08);}
.member-card:focus-visible{outline:2px solid var(--champagne);outline-offset:2px;}
.member-avatar{
  width:64px;height:64px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
}
.member-card h3{font-family:var(--display);font-size:16.5px;font-weight:400;line-height:1.3;margin-bottom:2px;}
.member-role{font-family:var(--sans);font-size:11px;color:var(--champagne-deep);margin:0 0 10px;line-height:1.4;}
.member-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.member-tag{
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.02em;
  background:rgba(17,17,17,.05);color:var(--grey);padding:4px 9px;border-radius:12px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.directory-empty{
  text-align:center;padding:70px 20px;color:var(--grey);font-family:var(--sans);font-size:14px;display:none;
}
.directory-note{
  max-width:760px;margin:0 auto 50px;text-align:center;color:var(--grey);font-size:14.5px;
}
.directory-filters{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:8px;
}
.filter-field select{
  padding:12px 16px;border-radius:8px;border:1px solid rgba(17,17,17,.15);
  background:var(--soft-white);font-family:var(--sans);font-size:13px;color:var(--black);
  min-width:170px;
}
.filter-field select:focus{outline:2px solid var(--champagne);}
.filter-interests{display:flex;flex-wrap:wrap;gap:8px;}
.interest-filter-btn{
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.02em;
  padding:7px 13px;border-radius:14px;border:1px solid rgba(17,17,17,.15);
  background:var(--soft-white);color:var(--grey);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.interest-filter-btn:hover{border-color:rgba(17,17,17,.3);}
.interest-filter-btn:focus-visible{outline:2px solid var(--champagne);}
.interest-filter-btn.active{background:var(--black);color:var(--soft-white);border-color:var(--black);}

/* Member profile detail (View Profile) */
.profile-modal-backdrop{
  position:fixed;inset:0;background:rgba(17,17,17,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000;
}
.profile-modal-backdrop[hidden]{display:none;}
.profile-modal{
  background:var(--soft-white);border-radius:12px;max-width:460px;width:100%;
  max-height:88vh;overflow-y:auto;padding:40px 32px 32px;position:relative;
}
.profile-modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(17,17,17,.15);background:var(--soft-white);cursor:pointer;
  font-size:15px;line-height:1;color:var(--grey);
}
.profile-modal-close:hover{background:var(--ivory);}
.profile-modal-close:focus-visible{outline:2px solid var(--champagne);}
.profile-modal-avatar{
  width:84px;height:84px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:24px;
}
.profile-modal-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.profile-modal h3{font-family:var(--display);font-weight:400;font-size:23px;text-align:center;margin-bottom:4px;}
.profile-modal-role{text-align:center;color:var(--champagne-deep);font-family:var(--sans);font-size:13px;margin-bottom:24px;}
.profile-modal-section{margin-bottom:18px;}
.profile-modal-section h4{
  font-family:var(--sans);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--champagne-deep);font-weight:600;margin-bottom:6px;
}
.profile-modal-section p{font-size:13.5px;color:var(--black);margin:0;line-height:1.55;}
.profile-modal-section .member-tags{justify-content:flex-start;}
.profile-modal-actions{margin-top:28px;display:flex;flex-direction:column;gap:10px;}
.profile-modal-note{font-size:12px;color:var(--grey);text-align:center;margin:0;}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* ================= PRODUCTION ALIGNMENT / V2 ================= */
body{min-height:100vh}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--black);color:var(--soft-white);padding:10px 14px;z-index:9999}
.skip-link:focus{left:8px}
header .logo img{width:170px;height:auto;display:block}
header.scrolled .logo img{filter:invert(1)}
.navwrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.desktop-nav .btn{color:var(--black)!important;background:var(--ivory);padding:12px 18px}
header.scrolled .desktop-nav .btn{background:var(--black);color:var(--soft-white)!important}
.mobile-menu .mobile-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft-white);
  border:1px solid rgba(255,255,255,.5);border-radius:0;margin-top:18px;padding:18px 24px;text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.mobile-menu .mobile-cta:hover{background:var(--soft-white);color:var(--black);border-color:var(--soft-white);}
.interior header .logo img{filter:invert(1)}
.interior header nav.desktop-nav a{color:var(--black)}
.interior header .menu-toggle span{background:var(--black)}
.hero .container{position:relative;z-index:2;width:100%}
.hero .lede{color:rgba(252,251,248,.86);max-width:760px}
.hero-kicker{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne)}
.text-link{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;border-bottom:1px solid rgba(17,17,17,.3);padding-bottom:2px}
.text-link:hover{color:var(--forest);border-color:var(--forest)}
.section-copy{max-width:660px;color:var(--grey)}
.section-copy p+p{margin-top:18px}
.bg-ivory{background:var(--ivory)}.bg-white{background:var(--soft-white)}.bg-black{background:var(--black);color:var(--ivory)}.bg-forest{background:var(--forest);color:var(--ivory)}
@media(max-width:700px){.navwrap{padding:0 20px}header .logo img{width:145px}}
.four-pillars .pillar-row{grid-template-columns:90px 1fr 2fr}.four-pillars .pillar-row:last-child .pillar-name{color:var(--forest)}
.experience-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.experience-item{min-height:300px;border-radius:8px;overflow:hidden;position:relative;background:var(--black)}.experience-item img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.67}.experience-item:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(17,17,17,.85))}.experience-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;color:var(--soft-white)}.experience-copy h3{font-size:24px;margin-bottom:8px}.experience-copy p{font-size:14px;color:rgba(252,251,248,.8)}
@media(max-width:900px){.experience-strip{grid-template-columns:1fr 1fr}}@media(max-width:560px){.experience-strip{grid-template-columns:1fr}}
.hero-media-video{position:absolute;inset:0}.hero-media-video img{width:100%;height:100%;object-fit:cover}.hero-media-video:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.28),rgba(17,17,17,.83))}
.content-band{padding:72px 0}.content-band .container{display:flex;justify-content:space-between;gap:50px;align-items:center}.content-band h2{font-size:clamp(28px,3.2vw,44px);max-width:650px}.content-band p{max-width:500px;color:var(--grey)}@media(max-width:760px){.content-band .container{display:block}.content-band p{margin-top:20px}}
.faq-list{max-width:860px;margin-top:42px}.faq-item{border-top:1px solid rgba(17,17,17,.14)}.faq-item:last-child{border-bottom:1px solid rgba(17,17,17,.14)}.faq-q{width:100%;background:none;border:0;padding:22px 0;display:flex;justify-content:space-between;gap:20px;text-align:left;font-family:var(--display);font-size:20px;cursor:pointer}.faq-q:after{content:"+";font-family:var(--sans)}.faq-item.open .faq-q:after{content:"–"}.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}.faq-a p{padding:0 0 22px;color:var(--grey)}
.form-success{margin-top:20px;padding:16px;border-left:3px solid var(--forest);background:rgba(36,60,53,.07)}
.form-success[hidden]{display:none}
.form-error{margin-top:20px;padding:16px;border-left:3px solid var(--burgundy);background:rgba(92,26,43,.06)}
.form-error[hidden]{display:none}
.footer-grid .logo img{width:180px;height:auto}
.footer-grid .logo{font-family:inherit}
.footer-brand-copy{font-size:14px;max-width:310px;margin-top:14px}
.page-hero .container{padding-top:15px}
.page-hero .lede{margin-top:10px}
.page-hero.black .eyebrow,.page-hero.dark .eyebrow{color:var(--champagne)}
.page-hero.black h1,.page-hero.dark h1{color:var(--soft-white)}
.feature-image{border-radius:8px;width:100%;aspect-ratio:4/3;object-fit:cover}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}@media(max-width:860px){.two-col{grid-template-columns:1fr;gap:36px}}
.note{font-size:13px;color:var(--grey);margin-top:16px}
.event-feature-copy p{color:var(--grey);margin-bottom:22px}
.mosaic img{background:#222}
.member-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media(max-width:760px){.member-preview{grid-template-columns:1fr}}
.link-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px}
.link-list a,.link-list .link-soon{font-family:var(--sans);font-size:14px;border-bottom:1px solid rgba(17,17,17,.12);padding-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.link-list a:hover{color:var(--forest)}
.link-list .link-soon{color:var(--grey);opacity:.75;cursor:default}
.soon-tag{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--champagne-deep);border:1px solid rgba(122,90,52,.3);border-radius:20px;padding:3px 8px;white-space:nowrap;flex-shrink:0}
@media(max-width:600px){.link-list{grid-template-columns:1fr}}

/* Guide category jump nav */
.guide-nav{background:var(--soft-white);border-bottom:1px solid rgba(17,17,17,.08);padding:24px 0}
.guide-nav .container{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.guide-nav a{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);border:1px solid rgba(17,17,17,.14);border-radius:20px;padding:9px 16px;transition:border-color .25s,color .25s}
.guide-nav a:hover{border-color:var(--champagne-deep);color:var(--champagne-deep)}
@media(max-width:600px){.guide-nav{padding:18px 0}.guide-nav a{font-size:11.5px;padding:8px 13px}}

/* Black Pearl Recommends */
.recommend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.recommend-card{background:var(--soft-white);border:1px solid rgba(17,17,17,.08);border-radius:8px;padding:28px 24px}
.recommend-card .recommend-cat{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--champagne-deep);display:block;margin-bottom:10px}
.recommend-card h3{font-family:var(--display);font-size:19px;font-weight:400;margin-bottom:8px;color:var(--grey)}
.recommend-card p{font-size:13.5px;color:var(--grey)}
@media(max-width:860px){.recommend-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.recommend-grid{grid-template-columns:1fr}}
article.prose{max-width:760px}article.prose h2{font-size:34px;margin:48px 0 16px}article.prose h3{font-size:24px;margin:32px 0 12px}article.prose p,article.prose li{color:#444}article.prose p+p{margin-top:16px}article.prose ul{padding-left:20px;margin-top:14px}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
[hidden]{display:none!important}

/* Page hero background image (Events hero) */
.page-hero.has-media{position:relative;overflow:hidden}
.page-hero-media{position:absolute;inset:0;z-index:0}
.page-hero-media img{width:100%;height:100%;object-fit:cover}
.page-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.35),rgba(17,17,17,.88))}
.page-hero.has-media .container{position:relative;z-index:2}

/* Member Sign In (nav, coming soon) */
.desktop-nav .link-soon{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.62);display:inline-flex;align-items:center;gap:6px;cursor:default}
header.scrolled .desktop-nav .link-soon{color:rgba(17,17,17,.5)}
.desktop-nav .link-soon .soon-tag{color:var(--champagne);border-color:rgba(183,154,104,.4)}
header.scrolled .desktop-nav .link-soon .soon-tag{color:var(--champagne-deep);border-color:rgba(122,90,52,.3)}
.mobile-menu .link-soon{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.55);padding:16px 0;border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:8px;cursor:default}
.mobile-menu .link-soon .soon-tag{color:var(--champagne);border-color:rgba(183,154,104,.4)}

/* ================= VISUAL SYSTEM V2 ================= */

/* Oversized statement type — used sparingly for key moments, not every section */
.statement{font-family:var(--display);font-weight:300;letter-spacing:-0.02em;line-height:0.98;font-size:clamp(56px,9vw,140px);}
.statement-sm{font-family:var(--display);font-weight:300;letter-spacing:-0.02em;line-height:1.03;font-size:clamp(36px,5.2vw,68px);}

/* Section rhythm variants — break the uniform padding pattern deliberately */
.section-tight{padding:70px 0}
.section-loose{padding:200px 0}
@media(max-width:860px){
  .section-tight{padding:48px 0}
  .section-loose{padding:120px 0}
}

/* Strategic colour blocks beyond black/white/ivory */
.bg-clay{background:var(--clay);color:var(--soft-white)}
.bg-clay .eyebrow{color:rgba(252,251,248,.8)}
.bg-clay .lede{color:rgba(252,251,248,.85)}

/* Full-bleed edge-to-edge photography moment */
.bleed{width:100%;position:relative}
.bleed-media{width:100%;height:80vh;min-height:560px;max-height:820px;overflow:hidden;position:relative}
.bleed-media img{width:100%;height:100%;object-fit:cover;display:block}
.bleed-caption{position:absolute;left:0;right:0;bottom:0;padding:56px 32px;background:linear-gradient(0deg,rgba(17,17,17,.75),transparent);color:var(--soft-white)}
.bleed-caption .container{padding:0 32px}
@media(max-width:700px){.bleed-media{height:64vh;min-height:420px}.bleed-caption{padding:32px 20px 28px}}

/* Asymmetric editorial split — image bleeds to one edge, copy sits offset */
.editorial-split{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;gap:0;min-height:560px}
.editorial-split .es-media{position:relative;min-height:360px}
.editorial-split .es-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.editorial-split .es-copy{padding:64px;display:flex;flex-direction:column;justify-content:center}
.editorial-split.reverse{grid-template-columns:1fr 1.15fr}
.editorial-split.reverse .es-media{order:2}
.editorial-split.reverse .es-copy{order:1}
@media(max-width:980px){
  .editorial-split,.editorial-split.reverse{grid-template-columns:1fr;min-height:0}
  .editorial-split .es-media,.editorial-split.reverse .es-media{order:1;min-height:340px}
  .editorial-split .es-copy,.editorial-split.reverse .es-copy{order:2;padding:44px 24px}
}

/* Overlap moment — a card breaking over the edge of adjacent media */
.overlap-wrap{position:relative}
.overlap-card{position:relative;z-index:2;background:var(--soft-white);border-radius:8px;padding:40px 36px;box-shadow:0 28px 64px rgba(17,17,17,.16);margin-top:-96px;max-width:440px}
@media(max-width:860px){.overlap-card{margin-top:-56px;padding:26px 24px;max-width:none}}

/* Ecosystem index numerals — extends the existing pillar-num device site-wide */
.eco-num{font-family:var(--display);font-size:13px;color:var(--champagne-deep);letter-spacing:.08em}
.bg-forest .eco-num,.bg-black .eco-num,.bg-clay .eco-num{color:var(--champagne)}

/* Who's in the room — role chips */
.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:40px}
.room-chip{border:1px solid rgba(17,17,17,.14);border-radius:6px;padding:22px 20px;font-family:var(--sans);font-size:14px;font-weight:500;text-align:center}
.bg-clay .room-chip{border-color:rgba(252,251,248,.35);color:var(--soft-white)}

/* Partners teaser strip */
.partners-teaser-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.partners-format-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.partners-format-list span{font-family:var(--sans);font-size:12.5px;letter-spacing:.03em;border:1px solid rgba(246,242,236,.3);border-radius:20px;padding:8px 16px}
@media(max-width:860px){.partners-teaser-row{grid-template-columns:1fr;gap:30px}}

/* ================= VISUAL SYSTEM V3 — NeueHouse editorial pass ================= */

/* Editorial caption — small, restrained, sits near large photography instead of a boxed paragraph */
.editorial-caption{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--grey);max-width:420px}
.editorial-caption strong{color:var(--black);font-weight:500}

/* Quieter, narrower editorial split for image-led moments (image dominant, text as a caption column) */
.editorial-lead{display:grid;grid-template-columns:1.7fr 1fr;gap:56px;align-items:end}
.editorial-lead.reverse{grid-template-columns:1fr 1.7fr}
.editorial-lead.reverse .el-media{order:2}
.editorial-lead.reverse .el-copy{order:1}
.editorial-lead .el-media{position:relative;overflow:hidden}
.editorial-lead .el-media img{width:100%;height:auto;display:block;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.editorial-lead .el-media:hover img{transform:scale(1.03)}
.editorial-lead .el-copy{padding-bottom:12px}
@media(max-width:860px){.editorial-lead{grid-template-columns:1fr;gap:24px}.editorial-lead .el-copy{padding-bottom:0}}

/* Community-in-motion — asymmetric editorial photo sequence, not a uniform grid */
.eg-sequence{display:flex;flex-direction:column;gap:2px}
.eg-row{display:grid;gap:2px}
.eg-row.two{grid-template-columns:1.3fr 1fr}
.eg-row.two.reverse{grid-template-columns:1fr 1.3fr}
.eg-item{position:relative;overflow:hidden;background:#111}
.eg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.eg-item:hover img{transform:scale(1.035)}
.eg-tall{aspect-ratio:3/4}
.eg-wide{aspect-ratio:16/9}
.eg-square{aspect-ratio:4/5}
.eg-full{aspect-ratio:21/8}
@media(max-width:860px){
  .eg-row.two,.eg-row.two.reverse{grid-template-columns:1fr}
  .eg-full{aspect-ratio:4/5}
}

/* Quieter nav CTA — text-link treatment instead of a solid pill, editorial restraint */
.nav-cta.quiet{background:none!important;border:0!important;padding:0!important;text-decoration:none;position:relative;color:inherit!important}
.nav-cta.quiet:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;opacity:.5}
header.scrolled .nav-cta.quiet{color:var(--black)!important}
.desktop-nav a:not(.nav-cta){font-weight:400;letter-spacing:.02em}

/* Softened event/programming label — replaces the boxed pill badge feel */
.programme-label{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne-deep);margin-bottom:16px;display:block}

/* ================================================================
   DARKER-THEME + TRANSPARENCY SYSTEM (site-wide prototype)
   Loaded on every page (this file always is), but every rule below
   is either a brand-new class name or gated behind a new opt-in
   class — so no page keeps its exact current look unless it
   deliberately uses one of these. Four pages opt in this pass:
   index.html, about.html, events.html, membership.html. The other
   seven are untouched, by construction, not just by omission.
   ================================================================ */
:root{
  --bp-glass-dark-bg:rgba(17,17,17,.42);
  --bp-glass-dark-border:rgba(255,255,255,.26);
  --bp-glass-light-bg:rgba(246,242,236,.68);
  --bp-glass-light-border:rgba(17,17,17,.16);
  --bp-glass-blur:14px;
}

/* ---------- .bp-glass — the one transparency primitive ----------
   Square corners, thin border, subtle blur, no shadow, no gradient
   inside the panel, photography visible through it. Two colour
   variants; pick one. */
.bp-glass{border-radius:0;-webkit-backdrop-filter:blur(var(--bp-glass-blur));backdrop-filter:blur(var(--bp-glass-blur))}
.bp-glass--dark{background:var(--bp-glass-dark-bg);border:1px solid var(--bp-glass-dark-border);color:var(--soft-white)}
.bp-glass--light{background:var(--bp-glass-light-bg);border:1px solid var(--bp-glass-light-border);color:var(--black)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bp-glass--dark{background:rgba(17,17,17,.8)}
  .bp-glass--light{background:rgba(246,242,236,.92)}
}
/* Common descendant classes set their own explicit colour sitewide, so plain inheritance
   from the panel isn't enough — scope the overrides that matter for each variant. */
.bp-glass--dark .hx-body,.bp-glass--dark p{color:rgba(252,251,248,.9)}
.bp-glass--dark .hx-label{color:rgba(252,251,248,.72)}
.bp-glass--dark .hx-link{color:var(--soft-white);border-bottom-color:rgba(252,251,248,.45)}
.bp-glass--dark .hx-link:hover{color:var(--champagne);border-color:var(--champagne)}
.bp-glass--dark .btn-secondary{color:var(--soft-white);border-color:rgba(252,251,248,.55)}
.bp-glass--dark .btn-secondary:hover{background:var(--soft-white);color:var(--black)}
.bp-glass--dark .hx-btn{color:var(--soft-white);border-color:rgba(252,251,248,.6)}
.bp-glass--dark .hx-btn:hover{background:var(--soft-white);color:var(--black)}
.bp-glass--dark .entry-label{color:rgba(252,251,248,.6)}
.bp-glass--dark .entry-name{color:var(--soft-white)}
.bp-glass--light .hx-body,.bp-glass--light p{color:rgba(17,17,17,.85)}

/* Small overlays — a caption or a metadata tag sitting in one corner of a photograph,
   never covering the whole image. Requires a position:relative ancestor (.hx-img-wrap
   and .exp-hero-media already are). */
.bp-glass-caption{position:absolute;left:20px;bottom:20px;padding:10px 18px}
.bp-glass-meta{position:absolute;left:20px;top:20px;padding:10px 18px}
@media(max-width:700px){
  .bp-glass-caption,.bp-glass-meta{left:14px;padding:8px 14px}
  .bp-glass-caption{bottom:14px}
  .bp-glass-meta{top:14px}
}

/* ---------- .bg-burgundy — completes the existing .bg-black/.bg-forest/.bg-clay family ---------- */
.bg-burgundy{background:var(--burgundy);color:var(--soft-white)}

/* ---------- Full-bleed photo band + glass content panel ----------
   Reusable "cinematic CTA" pattern: one wide photograph, a bottom-anchored .bp-glass
   panel holding whatever text/CTA already exists — never a full-image dark wash. */
.bp-photo-band{position:relative;overflow:hidden;aspect-ratio:21/9;background:var(--black)}
.bp-photo-band img{width:100%;height:100%;object-fit:cover;display:block}
.bp-photo-band-content{position:absolute;left:32px;bottom:32px;max-width:420px;padding:32px}
@media(max-width:900px){
  .bp-photo-band{aspect-ratio:4/5}
  .bp-photo-band-content{left:20px;right:20px;bottom:20px;max-width:none;padding:22px}
}

/* Taller variant — for a masthead-scale photo band (more vertical presence than the
   default cinematic 21:9 strip), used where a page's opening treatment needs it. A
   modifier class, not an inline style, so its own mobile override still applies —
   an inline aspect-ratio would otherwise beat the media query above at every width. */
.bp-photo-band-tall{aspect-ratio:16/9}
@media(max-width:900px){.bp-photo-band-tall{aspect-ratio:4/5}}

/* Wider content variant — for a masthead-scale heading that needs more room than the
   default CTA panel's 420px. On mobile the base class's left:20px;right:20px already
   caps the real width well below this, so no separate mobile override is needed. */
.bp-photo-band-content--wide{max-width:560px}

/* ---------- Ivory reading surface inside a dark field ----------
   For text that needs to stay on its normal light background even though the section
   around it has opted into .hx-field-black/-forest/-burgundy (e.g. a "dark surround,
   light text panel" composition). Overrides the dark-field text-colour rules back to
   their normal dark-on-light values, scoped to inside this class only. */
.bp-ivory-surface{background:var(--ivory);color:var(--black)}
.hx-field-black .bp-ivory-surface .hx-label,
.hx-field-forest .bp-ivory-surface .hx-label,
.hx-field-burgundy .bp-ivory-surface .hx-label{color:var(--hx-muted)}
.hx-field-black .bp-ivory-surface .hx-body,
.hx-field-forest .bp-ivory-surface .hx-body,
.hx-field-burgundy .bp-ivory-surface .hx-body{color:var(--hx-ink)}
.hx-field-black .bp-ivory-surface .hx-display,
.hx-field-forest .bp-ivory-surface .hx-display,
.hx-field-burgundy .bp-ivory-surface .hx-display{color:var(--hx-ink)}

/* ---------- Opt-in dark header (four-page prototype only) ----------
   Add class="... bp-dark-nav" to <body>. Nothing below fires on a page that doesn't
   carry that class, so the header is untouched everywhere else. */
body.bp-dark-nav header.scrolled,
body.bp-dark-nav.interior header.scrolled{background:var(--black)}
body.bp-dark-nav.interior header .logo img,
body.bp-dark-nav header.scrolled .logo img{filter:none}
/* The nav-cta link (Join the Community) uses color:inherit!important on interior pages
   (and via .quiet on index.html), so it never picks up the plain "a" colour rule below —
   it reads whatever colour the header itself resolves to. Set that directly. */
body.bp-dark-nav.interior header,
body.bp-dark-nav header.scrolled{color:var(--soft-white)}
body.bp-dark-nav.interior header nav.desktop-nav a,
body.bp-dark-nav header.scrolled nav.desktop-nav a{color:var(--soft-white)}
body.bp-dark-nav header.scrolled nav.desktop-nav a:not(.btn):hover{color:var(--champagne)}
body.bp-dark-nav.interior header .menu-toggle span,
body.bp-dark-nav header.scrolled .menu-toggle span{background:var(--soft-white)}
body.bp-dark-nav header.scrolled .nav-cta.quiet{color:var(--soft-white)!important}