/* Self-hosted fonts (OFL) */
@font-face{font-family:"BL Serif";src:url(assets/fonts/CormorantGaramond-Variable.ttf) format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"BL Serif";src:url(assets/fonts/CormorantGaramond-Italic-Variable.ttf) format("truetype");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"BL Sans";src:url(assets/fonts/Inter-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
/* Brummell Labs — homepage styles (production) */
:root{
  --ink:#031326;      /* deck navy (primary dark) */
  --navy:#0B2340;     /* raised navy surfaces */
  --navy-2:#16345C;   /* hover / borders on dark */
  --ice:#D4E6FC;      /* deck accent pale blue */
  --ivory:#F6F3EC;    /* warm paper background */
  --white:#FFFFFF;
  --brass:#B8975A;    /* Regency brass accent (sparing) */
  --slate:#5A6474;    /* body text on light */
  --line:#E3DED3;     /* hairlines on ivory */
  --serif:"BL Serif","Cormorant Garamond", "Times New Roman", serif;
  --sans:"BL Sans","Inter", system-ui, -apple-system, sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
body{font-family:var(--sans);color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}

h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.04;text-wrap:balance}
h1{font-size:84px}
h2{font-size:56px}
h1 em,h2 em{font-style:italic;color:var(--ice)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);margin-bottom:20px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.eyebrow--gold{color:var(--brass)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;font:600 15px/1 var(--sans);letter-spacing:.02em;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn--sm{height:42px;padding:0 20px;font-size:14px}
.btn--light{background:var(--white);color:var(--ink)}
.btn--light:hover{background:var(--ice)}
.btn--ghost{border-color:rgba(255,255,255,.35);color:var(--white)}
.btn--ghost:hover{border-color:var(--white)}
.btn--navy{background:var(--ink);color:var(--white)}
.btn--block{width:100%}

/* NAV */
.nav{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:10}
.nav__inner{height:84px;display:flex;align-items:center;justify-content:space-between}
.nav__logo img{height:50px;width:auto}
.nav__links{display:flex;gap:44px;font-size:14px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.78)}
.nav__links a:hover{color:#fff}

/* HERO */
.hero{background:var(--ink);color:var(--white);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:center;padding-top:72px;padding-bottom:96px}
.hero__sub{font-size:19px;line-height:1.65;color:rgba(255,255,255,.74);max-width:520px;margin:30px 0 40px}
.hero__ctas{display:flex;gap:14px}
.hero__tests{display:flex;gap:0;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero__tests li{padding-right:22px;margin-right:22px;border-right:1px solid rgba(255,255,255,.18)}
.hero__tests li:last-child{border:0}
.hero__media{position:relative;height:660px}
.hero__media>img{width:100%;height:100%;object-fit:cover;object-position:center 30%;border-radius:2px}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,19,38,0) 55%,rgba(3,19,38,.55));pointer-events:none}
.hero__media::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid rgba(184,151,90,.55);z-index:0}
.hero__media>img{position:relative;z-index:1}
.hero__badge{position:absolute;left:-36px;bottom:40px;z-index:3;background:rgba(11,35,64,.92);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);padding:18px 22px;display:flex;gap:16px;align-items:center;font-size:13px;color:rgba(255,255,255,.7)}
.hero__badge img{height:38px;width:auto}
.hero__badge strong{display:block;color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em}

/* PROBLEM */
.problem{background:var(--ivory);padding:120px 0}
.problem__inner{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center}
.problem h2{font-size:48px;margin-bottom:26px}
.problem__copy>p:not(.eyebrow){color:var(--slate);font-size:17px;max-width:500px}
.problem__kicker{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:28px!important;color:var(--ink)!important}
.problem__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.q{background:var(--white);border:1px solid var(--line);height:74px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:500}
.q i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;flex-shrink:0}

/* VISIT */
.visit{background:var(--white);padding:120px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 64px}
.section-head .eyebrow{justify-content:center}
.section-head .eyebrow::after{content:"";width:28px;height:1px;background:currentColor}
.section-head p:not(.eyebrow){color:var(--slate);font-size:17px;margin-top:22px}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.card{background:var(--ivory);border:1px solid var(--line);display:flex;flex-direction:column}
.card__img{aspect-ratio:1/1.02;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{padding:22px 22px 26px}
.card__num{font-family:var(--serif);font-size:20px;color:var(--brass);font-weight:600}
.card h3{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.1;margin-top:2px}
.card__tag{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:6px 0 14px}
.card p:last-child{font-size:14px;line-height:1.55;color:var(--slate)}
.pillars{margin-top:44px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:30px 44px}
.pillar{display:flex;gap:18px;align-items:center}
.pillar__n{font-family:var(--serif);font-size:30px;color:var(--brass);width:44px;height:44px;border:1px solid rgba(184,151,90,.6);border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:600}
.pillar strong{font-size:16px;font-weight:600}
.pillar p{font-size:13.5px;color:rgba(255,255,255,.62)}
.pillar__arrow{color:rgba(255,255,255,.35);font-size:22px;margin:0 24px}

/* MEMBERSHIP */
.membership{background:var(--navy);color:#fff;padding:120px 0;position:relative;overflow:hidden}
.membership::before{content:"";position:absolute;right:-180px;top:-120px;width:620px;height:760px;background:url(assets/shield-white.png) no-repeat center/contain;opacity:.035}
.membership__inner{display:grid;grid-template-columns:1.25fr .85fr;gap:80px;align-items:start;position:relative}
.membership .lede{font-size:18px;color:rgba(255,255,255,.7);margin:24px 0 44px;max-width:520px}
.included{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.12)}
.included li{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.included li:nth-child(odd){padding-right:28px}
.included b{font-family:var(--serif);font-size:24px;color:var(--brass);font-weight:600;min-width:34px;line-height:1.1}
.included strong{display:block;font-size:16px;font-weight:600;margin-bottom:2px}
.included span{font-size:14px;color:rgba(255,255,255,.6)}
.included span strong{color:#fff}
.price{background:var(--ivory);color:var(--ink);padding:48px 44px 40px;position:relative;margin-top:8px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.price::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);pointer-events:none}
.price__shield{height:46px;width:auto;margin-bottom:26px}
.price__title{font-family:var(--serif);font-size:46px;white-space:nowrap;font-weight:500;line-height:1.02;letter-spacing:-.01em}
.price__title em{font-style:italic;color:var(--brass)}
.price__note{color:var(--slate);font-size:15px;line-height:1.6;margin-top:18px}
.price hr{border:0;border-top:1px solid var(--line);margin:28px 0 22px}
.price__list li{font-size:15px;padding:7px 0 7px 26px;position:relative}
.price__list li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:1px;background:var(--brass)}
.price .btn{margin-top:28px;position:relative}
.price__phys{display:block;text-align:center;font-size:14px;color:var(--slate);margin-top:18px;position:relative}
.price__phys u{color:var(--ink);text-underline-offset:3px}

/* CHICAGO */
.chicago{background:var(--ivory);padding:120px 0}
.chicago__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:center}
.chicago__media{position:relative;background:var(--ink);padding:14px}
.chicago__media img{width:100%;height:470px;object-fit:cover}
.chicago__media figcaption{position:absolute;left:34px;bottom:34px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px}
.chicago h2{font-size:64px}
.chicago__copy>p:not(.eyebrow){color:var(--slate);font-size:17px;margin:24px 0 30px}
.spaces{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:36px}
.spaces li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:500}
.link-arrow{font-weight:600;font-size:15px;border-bottom:1px solid var(--ink);padding-bottom:4px}

/* FOOTER */
.footer{background:var(--ink);color:#fff;padding:120px 0 40px}
.waitlist{text-align:center;max-width:720px;margin:0 auto 110px}
.waitlist__shield{height:64px;width:auto;margin:0 auto 30px}
.waitlist h2{font-size:60px}
.waitlist>p{color:rgba(255,255,255,.68);font-size:17px;margin:18px 0 38px}
.waitlist__form{display:flex;gap:10px;max-width:560px;margin:0 auto}
.waitlist__form input{flex:1;height:54px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font:15px var(--sans);padding:0 20px;border-radius:2px}
.waitlist__form input::placeholder{color:rgba(255,255,255,.45)}
.fine{font-size:12.5px;color:rgba(255,255,255,.4);margin-top:16px}
.footer__bar{display:flex;align-items:center;justify-content:space-between;padding-top:36px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.5)}
.footer__logo{height:34px;width:auto}
.footer__bar nav{display:flex;gap:30px;color:rgba(255,255,255,.72)}
.disclaimer{font-size:12px;color:rgba(255,255,255,.35);margin-top:26px;max-width:760px}

/* MOBILE */
@media (max-width:820px){
  .wrap{padding:0 22px}
  h1{font-size:50px} h2,.problem h2,.chicago h2,.waitlist h2{font-size:38px}
  .nav__inner{height:68px}.nav__logo img{height:30px}.nav__links{display:none}
  .nav .btn--sm{height:38px;padding:0 14px;font-size:13px}
  .hero__inner{grid-template-columns:1fr;gap:44px;padding-top:44px;padding-bottom:64px}
  .hero__sub{font-size:17px;margin:22px 0 30px}
  .hero__ctas{flex-direction:column}
  .hero__tests{flex-wrap:wrap;gap:10px 0;margin-top:36px;font-size:11px}
  .hero__tests li{padding-right:12px;margin-right:12px}
  .hero__media{height:440px;margin-left:14px}
  .hero__badge{left:-14px;bottom:20px}
  .problem,.visit,.membership,.chicago{padding:72px 0}
  .problem__inner,.membership__inner,.chicago__inner{grid-template-columns:1fr;gap:44px}
  .problem__grid{grid-template-columns:1fr 1fr}
  .q{height:60px;font-size:14px}
  .cards{grid-template-columns:1fr;gap:14px}
  .card{flex-direction:row}.card__img{width:120px;flex-shrink:0;aspect-ratio:auto}
  .card__body{padding:16px 18px}.card h3{font-size:26px}.card__tag{margin:2px 0 8px}
  .pillars{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 24px}.pillar__arrow{display:none}
  .included{grid-template-columns:1fr}.included li:nth-child(odd){padding-right:0}
  .price{padding:40px 28px 32px}  .chicago__media img{height:260px}
  .spaces{grid-template-columns:1fr}
  .waitlist{margin-bottom:64px}
  .waitlist__form{flex-direction:column}
  .footer__bar{flex-direction:column;gap:22px;align-items:flex-start}
  .footer__bar nav{flex-wrap:wrap;gap:16px}
}

/* Numerals: Cormorant ships old-style figures, so small numbers use Inter */
.card__num{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em}
.included b{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.5}

/* ---------- Production polish ---------- */
/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--white);color:var(--ink);padding:10px 16px;font-weight:600;font-size:14px;border-radius:2px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.btn:disabled{opacity:.6;cursor:default}
.btn--navy:hover{background:var(--navy-2)}
.link-arrow:hover,.price__phys:hover u{color:var(--navy-2)}
.footer__bar nav a:hover{color:#fff}

/* Waitlist form states */
.waitlist__form input{min-width:0;transition:border-color .2s,background .2s}
.waitlist__form input:focus{outline:none;border-color:var(--white);background:rgba(255,255,255,.04)}
.waitlist__form input:disabled{opacity:.55}
.waitlist__form.has-error input{border-color:#E9A3A3}
.waitlist .waitlist__msg{font-size:14.5px;line-height:1.5;margin:14px auto 0;max-width:560px;color:rgba(255,255,255,.75)}
.waitlist .waitlist__msg:empty{display:none}
.waitlist .waitlist__msg.is-error{color:#F2B8B8}
.waitlist .waitlist__msg.is-success{color:var(--ice);font-family:var(--serif);font-size:24px;font-style:italic;line-height:1.35;margin-top:0;padding:14px 0 4px}
.waitlist__form.is-done{display:none}

/* Problem grid: keep the "?" from crowding long labels */
.q{gap:10px}
.q span{min-width:0;line-height:1.3}

/* Tablet / small laptop */
@media (max-width:1180px){
  h1{font-size:68px}
  .hero__inner{gap:56px}
  .hero__tests{font-size:11px;letter-spacing:.16em}
  .hero__tests li{padding-right:14px;margin-right:14px;white-space:nowrap}
  .hero__badge{left:-20px}
  .problem__inner{gap:56px}
  .problem__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{gap:12px}
  .card__body{padding:18px 16px 22px}
  .card h3{font-size:27px}
  .card__tag{letter-spacing:.12em}
  .pillars{padding:26px 28px}
  .pillar__arrow{margin:0 12px}
  .membership__inner{gap:48px}
  .price{padding:44px 32px 36px}
  .price__title{font-size:42px}
  .chicago__inner{gap:56px}
}

/* Large tablet: cards to a 3 + 2 layout */
@media (max-width:1000px) and (min-width:821px){
  .cards{grid-template-columns:repeat(6,1fr)}
  .card{grid-column:span 2}
  .card:nth-child(4){grid-column:2 / span 2}
  .hero__inner{grid-template-columns:1fr 1fr}
  h1{font-size:60px}
  .membership__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .included{grid-template-columns:1fr}
  .included li:nth-child(odd){padding-right:0}
  .pillars{flex-direction:column;align-items:flex-start;gap:18px}
  .pillar__arrow{display:none}
}

/* Mobile */
@media (max-width:820px){
  .br-desk{display:none}
  .problem__inner,.membership__inner,.chicago__inner{grid-template-columns:minmax(0,1fr)}
  .hero__tests{gap:8px;padding-top:24px}
  .hero__tests li,.hero__tests li:last-child{border:1px solid rgba(255,255,255,.18);border-radius:2px;padding:7px 10px;margin:0;letter-spacing:.14em}
  .hero__media{height:auto;aspect-ratio:4/5;max-height:520px}
  .problem__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .q{padding:0 12px 0 14px;font-size:13.5px}
  .q i{width:22px;height:22px;font-size:12px}
  .card__img{width:112px}
  .card__img img{height:100%}
  .price__title{font-size:clamp(30px,9.2vw,40px)}
  h1{font-size:clamp(38px,11.2vw,56px)}
  .nw{white-space:nowrap}
  .hero__tests{gap:6px}
  .hero__tests li,.hero__tests li:last-child{padding:6px 8px;font-size:10.5px;letter-spacing:.12em}
  .waitlist__form input{flex:0 0 auto}
  .waitlist__form .btn{width:100%}
  .chicago__media figcaption{left:24px;bottom:24px;font-size:11px;padding:8px 12px}
  .footer__bar p{font-size:12.5px}
}
@media (max-width:380px){
  .wrap{padding:0 18px}
  h2,.problem h2,.chicago h2,.waitlist h2{font-size:32px}
  .nav .btn--sm{padding:0 12px;font-size:12.5px}
  .nav__logo img{height:26px}
  .price{padding:36px 22px 28px}
  .hero__badge{padding:14px 16px;gap:12px}
  .btn{padding:0 16px}
  .btn--sm{padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}
