:root{
    --ink:#101827;
    --teal:#0B5E62;
    --teal-deep:#083F42;
    --brass:#C08A3E;
    --brass-bright:#D9A254;
    --paper:#F6F3EC;
    --paper-dim:#EEE9DC;
    --moss:#3F6A4F;
    --slate:#5B6B76;
    --line: rgba(16,24,39,0.12);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    line-height:1.05;
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  .has-bg-photo{position:relative;}
  .section-bg-photo{
    position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:.22;z-index:0;pointer-events:none;
  }
  .has-bg-photo > .wrap{position:relative;z-index:1;}
  .draft-banner{
    background:var(--ink);
    color:var(--paper);
    text-align:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:.05em;
    padding:8px 12px;
    text-transform:uppercase;
  }

  /* Header */
  header.site{
    position:sticky;top:0;z-index:50;
    background:rgba(246,243,236,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
  .logo{display:flex;align-items:center;gap:18px;font-family:'Fraunces',serif;font-weight:600;font-size:20px;letter-spacing:-0.01em;}
  .logo .mark{
    width:34px;height:34px;border-radius:9px;
    background:linear-gradient(155deg,var(--teal),var(--teal-deep));
    display:flex;align-items:center;justify-content:center;
    color:var(--brass-bright);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:14px;
  }
  nav.primary{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:var(--slate);}
  nav.primary a:hover{color:var(--teal);}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 20px;border-radius:999px;
    font-size:14px;font-weight:600;
    border:1px solid transparent;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-solid{background:var(--teal);color:#fff;}
  .btn-solid:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(11,94,98,.55);}
  .btn-ghost{border-color:var(--line);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
  .btn-brass{background:var(--brass);color:var(--ink);}
  .btn-brass:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(192,138,62,.6);}
  .header-actions{display:flex;align-items:center;gap:12px;}
  .menu-toggle{
    display:none;background:none;border:none;font-size:32px;cursor:pointer;color:var(--ink);
    width:50px;height:50px;border-radius:10px;line-height:1;flex-shrink:0;
    align-items:center;justify-content:center;transition:background .15s ease;
  }
  .menu-toggle.active{background:var(--paper-dim);color:var(--teal-deep);}

  /* Hero */
  .hero{padding:76px 0 56px;position:relative;overflow:hidden;}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--teal-deep);background:rgba(11,94,98,.08);
    padding:6px 12px;border-radius:999px;margin-bottom:22px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);}
  .hero h1{font-size:clamp(38px,4.6vw,60px);}
  .hero h1 em{font-style:normal;color:var(--teal);}
  .hero-headline-wrap{container-type:inline-size;}
  .hero-logo-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap;}
  .hero .hero-headline-full{
    font-size:3.35cqw;margin:0 0 48px;
    white-space:nowrap;
  }
  .hero .hero-headline-full em{font-style:normal;color:var(--teal);margin:0 12px;}
  .hero p.lead{margin:22px 0 32px;font-size:18px;line-height:1.6;color:var(--slate);max-width:52ch;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
  .hero-stats{display:flex;gap:34px;margin-top:44px;}
  .stat b{display:block;font-family:'Fraunces',serif;font-size:30px;color:var(--ink);}
  .stat span{font-size:12.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;}

  .hero-art{
    position:relative;border-radius:22px;overflow:hidden;
    background:linear-gradient(160deg,var(--teal-deep),var(--teal) 55%,var(--moss));
    min-height:420px;padding:30px;color:#fff;
    display:flex;flex-direction:column;justify-content:space-between;
  }
  .hero-art .card-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65);}
  .hero-art .quote{font-family:'Fraunces',serif;font-size:23px;line-height:1.35;margin:18px 0;}
  .hero-art .signer{display:flex;align-items:center;gap:12px;}
  .hero-art .signer .avatar{width:42px;height:42px;border-radius:50%;background:var(--brass);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;color:var(--ink);font-weight:600;}
  .hero-art .signer .name{font-weight:600;font-size:14.5px;}
  .hero-art .signer .role{font-size:12.5px;color:rgba(255,255,255,.7);}
  .hero-art::after{
    content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;
    border-radius:50%;border:1px solid rgba(255,255,255,.14);
  }
  .hero-art::before{
    content:"";position:absolute;right:20px;top:-40px;width:140px;height:140px;
    border-radius:50%;border:1px solid rgba(255,255,255,.14);
  }

  /* Ticker */
  .ticker-wrap{
    margin-top:66px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--paper-dim);overflow:hidden;position:relative;
  }
  .ticker-wrap .ticker-label{
    position:absolute;left:0;top:0;bottom:0;z-index:2;
    display:flex;align-items:center;gap:8px;
    padding:0 20px;background:var(--paper-dim);
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);
    border-right:1px solid var(--line);
  }
  .ticker-wrap .ticker-label .live{width:7px;height:7px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 0 rgba(63,106,79,.6);animation:pulse 2s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,106,79,.5);}70%{box-shadow:0 0 0 8px rgba(63,106,79,0);}100%{box-shadow:0 0 0 0 rgba(63,106,79,0);}}
  .ticker-track{display:flex;white-space:nowrap;padding:16px 0 16px 190px;animation:scroll-left 62s linear infinite;width:max-content;}
  .ticker-wrap:hover .ticker-track{animation-play-state:paused;}
  @keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .tick{
    display:inline-flex;align-items:baseline;gap:9px;margin-right:38px;
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);
  }
  .tick .day{color:var(--teal);font-weight:500;}
  .tick .time{color:var(--slate);}
  .tick .loc{color:var(--brass);}


  /* Sections */
  section{padding:96px 0;}
  .section-head{max-width:640px;margin:0 auto 52px;text-align:center;}
  .section-head .eyebrow{display:inline-flex;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:14px;}
  .section-head p{color:var(--slate);font-size:16.5px;line-height:1.6;}

  /* Ask yourself */
  .ask{background:var(--ink);color:var(--paper);padding:40px 0;}
  .ask .section-head p{color:rgba(246,243,236,.72);}
  .ask .section-head .eyebrow{background:rgba(217,162,84,.15);color:var(--brass-bright);}
  .ask-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .ask-card{
    position:relative;overflow:hidden;
    border:1px solid rgba(246,243,236,.14);border-radius:16px;padding:40px 32px;
    background:rgba(255,255,255,.03);
    min-height:190px;display:flex;align-items:center;justify-content:center;
  }
  .ask-card::before{
    content:"?";position:absolute;top:-0.28em;left:-0.12em;
    font-family:'Fraunces',serif;font-weight:700;font-size:340px;line-height:1;
    color:rgba(217,162,84,.10);pointer-events:none;z-index:0;
  }
  .ask-card p{
    position:relative;z-index:1;margin:0;text-align:center;
    font-family:'Fraunces',serif;font-weight:600;
    font-size:clamp(18px,1.9vw,23px);line-height:1.4;
    color:rgba(246,243,236,.95);
  }
  .ask-foot{text-align:center;margin-top:32px;font-family:'Fraunces',serif;font-size:26px;color:var(--brass-bright);}

  /* Chapters */
  .chapters-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:14px;}
  .chip-row{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{
    font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;
    border:1px solid var(--line);color:var(--slate);cursor:pointer;background:#fff;
    transition:all .15s ease;
  }
  .chip.active,.chip:hover{border-color:var(--teal);color:var(--teal);}
  .chapters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .chapter-card{
    position:relative;overflow:hidden;
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px 18px;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .chapter-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:5px;
    background:var(--area-color, var(--teal));
    transition:height .15s ease;
  }
  .chapter-card::after{
    content:"";position:absolute;top:0;left:0;right:0;height:0;
    display:flex;align-items:center;padding-left:16px;overflow:hidden;
    font-family:'IBM Plex Mono',monospace;font-size:0;letter-spacing:.06em;text-transform:uppercase;
    color:rgba(255,255,255,.92);opacity:0;
    transition:height .15s ease, font-size .15s ease, opacity .15s ease;
  }
  .chapters-grid.show-area-labels .chapter-card::before{height:26px;}
  .chapters-grid.show-area-labels .chapter-card::after{
    content:attr(data-area-label);height:26px;font-size:11px;opacity:1;
  }
  .chapters-grid.show-area-labels .chapter-card h3{margin-top:22px;}
  .chapter-card[data-area="central"]{--area-color:var(--teal);}
  .chapter-card[data-area="north"]{--area-color:var(--brass);}
  .chapter-card[data-area="west"]{--area-color:var(--moss);}
  .chapter-card[data-area="southeast"]{--area-color:#5B8FB0;}
  .chapter-card[data-area="specialty"]{--area-color:#8A6BAE;}
  .chapter-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(16,24,39,.28);border-color:rgba(11,94,98,.3);}
  .chapter-card h3{font-size:18px;margin:8px 0 10px;line-height:1.25;}
  .chapter-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
  .meta-pill{
    font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;padding:5px 10px;border-radius:7px;
    background:var(--paper-dim);color:var(--teal-deep);
  }
  .meta-pill.time{color:var(--brass);background:rgba(192,138,62,.1);}
  .chapter-card .loc{
    font-size:14px;color:var(--slate);margin:0 0 18px;
    display:flex;align-items:center;gap:6px;
  }
  .chapter-card .loc::before{content:"📍";font-size:12px;flex-shrink:0;}
  .chapter-card a.link{
    display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:600;color:var(--teal);
    padding:8px 14px;border-radius:999px;border:1px solid rgba(11,94,98,.25);
    transition:background .15s ease, color .15s ease;
  }
  .chapter-card a.link:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
  .chapter-card a.link:after{content:"→";}
  .chapters-more{text-align:center;margin-top:34px;}

  /* Tiers */
  .tiers{background:var(--paper-dim);}
  .tiers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .tier-card{
    background:#fff;border-radius:18px;border:1px solid var(--line);padding:30px 24px;position:relative;
    display:flex;flex-direction:column;
  }
  .tier-card.featured{border-color:var(--brass);box-shadow:0 20px 40px -24px rgba(192,138,62,.5);}
  .tier-card.featured .tier-badge{
    position:absolute;top:-13px;left:24px;background:var(--brass);color:var(--ink);
    font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    padding:5px 12px;border-radius:999px;
  }
  .tier-name{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:10px;}
  .tier-price{font-family:'Fraunces',serif;font-size:34px;margin-bottom:4px;}
  .tier-price span{font-size:14px;font-family:'Inter',sans-serif;color:var(--slate);font-weight:500;}
  .tier-desc{font-size:13.5px;color:var(--slate);margin-bottom:20px;line-height:1.5;}
  .tier-feats{list-style:none;padding:0;margin:0 0 24px;flex:1;}
  .tier-feats li{font-size:13.5px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink);}
  .tier-feats li:first-child{border-top:none;}

  /* Leadership */
  .leadership .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;}
  .leader-photo{
    aspect-ratio:4/5;border-radius:20px;background:linear-gradient(160deg,var(--moss),var(--teal-deep));
    display:flex;align-items:end;padding:22px;color:#fff;
  }
  .leader-photo .tag{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);}
  .leadership blockquote{
    font-family:'Fraunces',serif;font-size:clamp(22px,2.4vw,30px);line-height:1.4;margin:0 0 24px;color:var(--ink);
  }
  .leadership .attribution b{display:block;font-size:16px;}
  .leadership .attribution span{font-size:13.5px;color:var(--slate);}

  /* CTA band */
  .cta-band{
    background:linear-gradient(160deg,var(--teal-deep),var(--teal));
    color:#fff;border-radius:26px;padding:64px 56px;text-align:center;margin:0 28px;
  }
  .cta-band h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:16px;}
  .cta-band p{color:rgba(255,255,255,.8);max-width:52ch;margin:0 auto 30px;font-size:16.5px;}
  .cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

  /* Footer */
  footer{padding:70px 0 40px;}
  .footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;margin-bottom:52px;}
  .footer-brand .logo{margin-bottom:14px;}
  .footer-brand p{color:var(--slate);font-size:14px;line-height:1.6;max-width:32ch;}
  .footer-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:16px;}
  .footer-col a{display:block;font-size:14px;color:var(--ink);margin-bottom:10px;}
  .footer-col a:hover{color:var(--teal);}
  .footer-bottom{
    border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;
    font-size:13px;color:var(--slate);flex-wrap:wrap;gap:12px;
  }

  /* Mobile menu panel: built for real, hidden entirely on desktop so it
     never affects that layout even if the (also desktop-hidden) toggle
     button were somehow triggered. */
  .mobile-menu{display:none;}

  @media (max-width:900px){
    /* Generic section padding (96px top+bottom, meant for spacious desktop
       rows) was stacking with each section's own internal padding/margins
       on mobile, showing up as huge gaps between e.g. Chapters and Roster,
       Leadership and the CTA band, etc. Fixing it once here at the root
       instead of chasing it section-by-section as each one gets reported. */
    section{padding:48px 0;}

    nav.primary{display:none;}
    .header-actions .btn{display:none;}
    .menu-toggle{display:flex;}
    /* Real slide-out drawer, not inline content stacked inside the sticky
       header. The earlier version was a child of header.site (position:
       sticky) and grew/shrank the header's own box as it opened -- on a
       tall menu that pushed the header taller than the viewport, clipping
       content at the top and letting the page scroll independently
       "behind" it (confirmed by real device testing). Fixed position +
       its own backdrop solves all of that: fixed height/position
       regardless of content, always starts at the true top of the
       screen, and the backdrop makes it visually obvious you're in an
       overlay rather than part of the page. Also narrower per feedback --
       it never needed to span the full screen width. */
    .mobile-menu-backdrop{
      display:none;position:fixed;inset:0;background:rgba(16,24,39,.45);
      z-index:150;opacity:0;transition:opacity .2s ease;
    }
    .mobile-menu-backdrop.open{display:block;opacity:1;}
    .mobile-menu{
      display:block;position:fixed;top:0;left:0;bottom:0;
      width:82%;max-width:340px;
      background:var(--paper-dim);
      box-shadow:16px 0 40px -12px rgba(16,24,39,.3);
      z-index:151;overflow-y:auto;
      transform:translateX(-100%);transition:transform .25s ease;
    }
    .mobile-menu.open{transform:translateX(0);}
    .mobile-menu .wrap{display:flex;flex-direction:column;padding:70px 22px 32px;max-width:none;position:relative;}
    .mobile-menu-close{
      position:absolute;top:16px;right:18px;
      width:38px;height:38px;border-radius:10px;border:none;background:rgba(16,24,39,.06);
      font-size:24px;line-height:1;color:var(--ink);cursor:pointer;
    }
    .mobile-menu > .wrap > a{
      padding:12px 0;font-size:15px;font-weight:500;color:var(--ink);
      border-bottom:1px solid var(--line);
    }
    .mobile-menu a.coming-soon{pointer-events:none;}
    .mobile-menu-group{display:flex;flex-direction:column;}
    .mobile-menu-heading{
      padding-top:14px;font-family:'IBM Plex Mono',monospace;font-size:11px;
      letter-spacing:.06em;text-transform:uppercase;color:var(--slate);
    }
    /* Sub-items indented to read clearly as children of their heading,
       with a slightly smaller/lighter style so the hierarchy is obvious
       at a glance, not just implied by the heading above them. */
    .mobile-menu-group a{
      padding:11px 0 11px 14px;font-size:14px;font-weight:500;color:var(--ink);
      border-bottom:1px solid var(--line);border-left:2px solid var(--line);
      margin-left:2px;
    }
    .mobile-menu-top-action{
      display:flex;align-items:center;justify-content:space-between;
      padding:13px 14px;margin-bottom:10px;border-radius:10px;
      background:rgba(11,94,98,.08);color:var(--teal-deep) !important;
      font-weight:600;border-bottom:none !important;
    }
    .mobile-menu-top-action::after{content:"↗";font-size:13px;}
    .mobile-menu-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
    .mobile-menu-actions .btn{display:flex;justify-content:center;}
  }

  @media (max-width:900px){
    nav.primary{display:none;}
    .menu-toggle{display:flex;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-art{min-height:280px;}
    .ask-grid{grid-template-columns:1fr;}
    .chapters-grid{grid-template-columns:1fr 1fr;}
    .tiers-grid{grid-template-columns:1fr 1fr;}
    /* Leadership section: was inheriting the generic 96px top/bottom
       section padding on top of its own content, plus a tall 4:5 photo --
       same class of "double padding" bug as the CTA band fix earlier. */
    .leadership{padding:36px 0;}
    .leadership .wrap{grid-template-columns:1fr;gap:24px;}
    .leader-photo{aspect-ratio:16/9;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    #join{padding:36px 0;}
    .cta-band{margin:0 16px;padding:36px 24px;}
    .cta-band h2{font-size:26px;}
  }
  @media (max-width:600px){
    .chapters-grid{grid-template-columns:1fr;}
    .tiers-grid{grid-template-columns:1fr;}
    /* Footer: was stacking everything full-width with generous desktop
       spacing, so it read as a long vertical list instead of a compact
       footer. Keep the brand block full-width up top, then Organization/
       Members/Connect side by side in 2 columns with much tighter spacing. */
    footer{padding:36px 0 24px;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:24px 20px;margin-bottom:24px;}
    .footer-brand{grid-column:1 / -1;}
    .footer-brand p{margin-top:6px;font-size:13px;}
    .footer-col h4{margin-bottom:8px;font-size:11px;}
    .footer-col a{margin-bottom:6px;font-size:13.5px;}
    .footer-bottom{padding-top:16px;font-size:11.5px;flex-direction:column;gap:4px;}
    .hero-stats{flex-wrap:nowrap;gap:14px;justify-content:space-between;}
    .hero-stats .stat b{font-size:22px;}
    .hero-stats .stat span{font-size:10px;letter-spacing:.02em;}
  }

  @media (max-width:640px){
    /* Header logo: prevent overflow off the left edge, shrink to fit
       comfortably next to the hamburger button on narrow phones. */
    .nav-row{position:relative;justify-content:flex-end;gap:8px;}
    /* Scoped to the HEADER's logo specifically -- .logo is also used by the
       footer's brand block, and an unscoped rule here was ripping the
       footer logo out of the footer entirely (position:absolute with no
       positioned ancestor near it falls back to the page's root box,
       which is why it appeared floating mid-page over the hero, not a
       rendering glitch). */
    header.site .logo{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      gap:8px;font-size:15px;overflow:hidden;white-space:nowrap;
    }
    header.site .logo img{height:26px !important;flex-shrink:0;}

    /* Hero: less top whitespace, big logo centered and smaller, eyebrow
       on its own centered line underneath instead of side-by-side
       (side-by-side is what was forcing it to wrap to 2 lines). */
    .hero{padding-top:28px;}
    .hero-logo-row{flex-direction:column;align-items:center;gap:14px;}
    .hero-logo-row img{
      height:105px !important; /* ~70% of the 150px desktop size */
    }
    .eyebrow{
      font-size:10.5px;padding:5px 10px;white-space:normal;text-align:center;
    }

    /* Headline: the desktop cqw/nowrap approach doesn't hold up reliably on
       real phones (confirmed overflowing off-screen on a real device test,
       which was also the actual cause of the page-wide horizontal overflow
       that was cutting the header logo off on the left -- one root cause,
       not two separate bugs). Simplest fix that can't fail: on mobile, drop
       nowrap/cqw entirely and just let it wrap normally at a safe fixed size. */
    /* Plain centered stacked text read as an afterthought / out of place.
       Restyled as a proper left-aligned list, each phrase with the same
       small brass-dot bullet treatment already used for the eyebrow pill
       elsewhere on this page, inside a subtle bordered box -- gives it an
       intentional, designed feel instead of just "broken headline text". */
    .hero .hero-headline-full{
      font-size:20px !important;white-space:normal;text-align:left;
      line-height:1.3;
      display:flex;flex-direction:column;gap:12px;
      border:1px solid var(--line);border-radius:14px;
      padding:18px 20px;background:rgba(255,255,255,.5);
    }
    .hero-headline-full em.sep{display:none;}
    .hero-headline-full .phrase{
      display:flex;align-items:center;gap:10px;
    }
    .hero-headline-full .phrase::before{
      content:"";width:8px;height:8px;border-radius:50%;
      background:var(--brass);flex-shrink:0;
    }

    /* Removed: html,body{overflow-x:hidden} was here as a safety net
       against horizontal overflow, but overflow-x:hidden on body is a
       well-known way to accidentally break position:sticky on iOS Safari
       specifically (it changes which element iOS treats as the scrolling
       container -- confirmed this was exactly what broke the sticky header).
       The actual overflow source (the headline) is fixed properly above,
       so this blunt safety net wasn't needed and was doing more harm than
       good. */

    /* Green "From the desk of" quote card: much smaller on mobile -- the
       180px desktop photo and 23px quote text were eating a huge amount of
       vertical space stacked on a narrow phone. */
    .hero-art{min-height:0;padding:22px;}
    .hero-art .quote{font-size:17px;line-height:1.4;margin:12px 0;}
    .hero-art .signer img{
      width:56px !important;height:56px !important;border-width:2px !important;
    }
    .hero-art .signer .name{font-size:13.5px;}
    .hero-art .signer .role{font-size:11.5px;}

    /* Ask-yourself cards: much shorter on mobile -- they were eating a
       full screen's height each when stacked (min-height + generous
       padding + big background "?" made sense as a wide 3-across desktop
       row, not as 3 stacked full-height mobile cards). */
    .ask{padding:32px 0;}
    .ask-grid{gap:14px;}
    .ask-card{
      min-height:0;padding:20px 22px;border-radius:12px;
    }
    .ask-card::before{font-size:160px;}
    .ask-card p{font-size:16px;line-height:1.35;}
    .ask-foot{margin-top:20px;font-size:19px;}
  }

  /* Nav dropdowns */
  .nav-drop{position:relative;}
  .nav-drop > a{cursor:default;}
  .drop-panel{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
    background:#fff;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 20px 40px -18px rgba(16,24,39,.25);
    padding:10px;min-width:230px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index:60;
  }
  .nav-drop:hover .drop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  .drop-panel a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;}
  .drop-panel a:hover{background:var(--paper-dim);color:var(--teal);}

  /* Roster of Professionals */
  .roster{background:var(--paper-dim);}
  .roster-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:36px;flex-wrap:wrap;}
  .roster-tab{
    font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;
    border:1px solid var(--line);color:var(--slate);cursor:pointer;background:#fff;
  }
  .roster-tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .roster-tab .tier-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle;}
  .roster-tab[data-tier="diamond"] .tier-dot{background:#5B8FB0;}
  .roster-tab[data-tier="platinum"] .tier-dot{background:#8A8F98;}
  .roster-tab[data-tier="gold"] .tier-dot{background:var(--brass);}
  .roster-tab[data-tier="all"] .tier-dot{background:var(--teal);}
  .roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .roster-card{
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 18px;
    display:flex;align-items:flex-start;gap:12px;
  }
  .roster-card-avatar-col{
    display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;
  }
  .roster-card-text{min-width:0;flex:1;}
  .roster-card .avatar{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(155deg,var(--teal),var(--moss));
    display:flex;align-items:center;justify-content:center;color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;
  }
  .roster-card .name{font-size:14.5px;font-weight:600;margin-bottom:2px;}
  .roster-card .biz{
    font-size:12.5px;color:var(--slate);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;text-overflow:ellipsis;line-height:1.35;
  }
  .roster-card .name{
    line-height:1.3;margin-bottom:3px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;text-overflow:ellipsis;
  }
  .roster-card{min-height:104px;}
  .roster-card .tier-flag{
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.05em;
    text-transform:uppercase;padding:2px 7px;border-radius:6px;flex-shrink:0;white-space:nowrap;
  }
  .roster-card.diamond .tier-flag{background:rgba(91,143,176,.15);color:#3E6D8A;}
  .roster-card.platinum .tier-flag{background:rgba(138,143,152,.15);color:#5C6169;}
  .roster-card.gold .tier-flag{background:rgba(192,138,62,.15);color:var(--brass);}
  .roster-note{
    text-align:center;margin-top:30px;font-size:13.5px;color:var(--slate);
    background:#fff;border:1px dashed var(--line);border-radius:12px;padding:16px 22px;
  }

  /* Marketplace */
  .marketplace-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
  .mp-card{
    border:1px solid var(--line);border-radius:14px;padding:22px 18px;background:#fff;
    text-align:center;transition:transform .15s ease, box-shadow .15s ease;
  }
  .mp-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(16,24,39,.25);}
  .mp-card .mp-icon{
    width:40px;height:40px;border-radius:10px;margin:0 auto 14px;
    background:rgba(192,138,62,.12);color:var(--brass);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;font-size:17px;
  }
  .mp-card h3{font-size:14.5px;line-height:1.3;}

  @media (max-width:900px){
    .drop-panel{display:none;}
    .roster-grid{grid-template-columns:1fr 1fr;}
    .marketplace-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .roster-grid{grid-template-columns:1fr;}
    .marketplace-grid{grid-template-columns:1fr;}
  }

/* Roster search + pagination */
.roster-search{max-width:420px;margin:0 auto 28px;}
.roster-search input{
  width:100%;padding:12px 16px;border-radius:999px;border:1px solid var(--line);
  font-family:'Inter',sans-serif;font-size:14px;background:#fff;
}
.roster-search input:focus{outline:none;border-color:var(--teal);}
.roster-empty{text-align:center;color:var(--slate);font-size:14px;padding:30px;}
.roster-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px;}
.roster-page-btn{
  font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink);background:#fff;cursor:pointer;
}
.roster-page-btn:hover:not(:disabled){border-color:var(--teal);color:var(--teal);}
.roster-page-btn:disabled{opacity:.35;cursor:default;}
.roster-page-info{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--slate);}

/* Roster card as clickable trigger */
.roster-card{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.roster-card:hover{transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(16,24,39,.22);border-color:rgba(11,94,98,.3);}
.roster-card:focus{outline:2px solid var(--teal);outline-offset:2px;}

/* Member detail modal */
.member-modal-backdrop{
  position:fixed;inset:0;background:rgba(16,24,39,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;
  z-index:200;opacity:0;visibility:hidden;transition:opacity .2s ease;
}
.member-modal-backdrop.open{opacity:1;visibility:visible;}
.member-modal{
  background:var(--paper);border-radius:22px;max-width:480px;width:100%;
  max-height:88vh;overflow-y:auto;position:relative;
  box-shadow:0 40px 80px -30px rgba(16,24,39,.5);
  transform:translateY(12px);transition:transform .2s ease;
}
.member-modal-backdrop.open .member-modal{transform:translateY(0);}
.member-modal-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.85);color:var(--ink);font-size:20px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.member-modal-close:hover{background:#fff;}
.member-modal-photo-wrap{
  width:100%;aspect-ratio:1/1;max-height:320px;overflow:hidden;
  border-radius:22px 22px 0 0;background:linear-gradient(160deg,var(--teal-deep),var(--moss));
}
.member-modal-photo-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.member-modal-photo-fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Fraunces',serif;font-size:64px;font-weight:600;
}
.member-modal-body{padding:28px 28px 32px;}
.member-modal-tier{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:12px;
}
.member-modal-tier.diamond{background:rgba(91,143,176,.15);color:#3E6D8A;}
.member-modal-tier.platinum{background:rgba(138,143,152,.15);color:#5C6169;}
.member-modal-tier.gold{background:rgba(192,138,62,.15);color:var(--brass);}
.member-modal-body h3{font-size:26px;margin-bottom:6px;}
.member-modal-biz{font-size:15px;color:var(--slate);margin:0 0 14px;}
.member-modal-meta{font-size:13.5px;color:var(--ink);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px;}
.member-modal-meta .dot-sep{color:var(--line);}
.member-modal-about{font-size:14.5px;line-height:1.6;color:var(--ink);border-top:1px solid var(--line);padding-top:16px;}

.chapter-modal-map{border-radius:12px;overflow:hidden;border:1px solid var(--line);}

.chapter-modal-extra{font-size:14px;color:var(--ink);}
.chapter-modal-extra div{margin-bottom:6px;}

.chapters-empty-prompt{text-align:center;color:var(--slate);font-size:15px;padding:30px 20px;background:var(--paper-dim);border-radius:14px;border:1px dashed var(--line);}

.chapter-modal-venue{
  font-family:'Inter',sans-serif;font-weight:700;font-size:17px;
  color:#8A5A1E;margin:2px 0 12px;
}

.footer-social-row{display:flex;gap:14px;margin-top:2px;}
.footer-social-row a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;
  background:var(--paper-dim);color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
.footer-social-row a:hover{background:var(--teal);color:#fff;}
.footer-col a{margin-bottom:10px;}

.drop-panel a.coming-soon, nav.primary > a.coming-soon{
  color:var(--slate) !important;pointer-events:none;position:relative;opacity:.65;
}
.drop-panel a.coming-soon::after{
  content:"Soon";font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--slate);background:var(--paper-dim);
  padding:2px 6px;border-radius:5px;margin-left:8px;vertical-align:middle;
}
nav.primary > a.coming-soon{opacity:.5;}