/* ============================================================
   OOOH CLUB, Public site theme (Ivory x Gold)
   The member app and The Heist keep the dark theme; the public
   pages that a company buyer sees use this one.
   Variable names are kept identical to theme.css on purpose, so
   pages written against the dark theme re-skin cleanly.
   ============================================================ */
/* fonts arrive via a <link> tag on each page (font-display: swap); no @import here */

:root {
  color-scheme: light;
  /* design system tokens */
  --bg:           #FFFFFF;
  --bg-subtle:    #F7F5EF;
  --border:       #E7E3D8;
  --ink:          #15140F;
  --ink-2:        #5F5C53;
  --ink-3:        #6F6C64;
  --gold:         #80661C;   /* text gold: links, eyebrows, active nav (5.5:1 on white) */
  --gold-display: #B08D2B;   /* display headings 28px+ and the logo only */
  --gold-tint:    #F5EEDC;
  --success:      #047857; --success-bg: #ECFDF5;
  --warning:      #B45309; --warning-bg: #FFFBEB;
  --danger:       #B91C1C; --danger-bg:  #FEF2F2;
  --info:         #6D28D9; --info-bg:    #F5F3FF;
  --shadow-card:  0 1px 2px rgba(21,20,15,.06);
  /* legacy aliases, kept so older pages keep working; new code uses the tokens above */
  --black:        var(--bg);
  --black-soft:   var(--bg-subtle);
  --black-border: var(--border);
  --gold-light:   #B08D2B;   /* was #D8BE6B (1.8:1); never for text on white now */
  --gold-dark:    #80661C;
  --platinum:     #6B6963;
  --text:         var(--ink);
  --text-dim:     var(--ink-2);

  --font-display: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
body {
  background: var(--black); color: var(--text);
  font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; color: var(--text); line-height: 1.15; }
h3, h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }   /* Playfair for display only: h1 and h2 */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
h1 { font-size: clamp(36px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 22px); }
p  { line-height: 1.75; }
img { max-width: 100%; height: auto; }
a  { color: inherit; }
@media (max-width: 640px) { body { font-size: 15.5px; } }

.gold { color: var(--gold); }
/* no gradient text: display type stays one colour */
.gold-gradient { color: inherit; font-style: normal; }

/* Buttons */
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  cursor: pointer; transition: background .15s ease; border: none;
}
.btn-gold  { background: var(--text); color: #FFFFFF; }
.btn-gold:hover { background: #2A2822; }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--text); }
.btn-ghost:hover { background: rgba(21,20,15,.05); }
.btn-goldfill { background: var(--gold); color: #FFFFFF; }
.btn-goldfill:hover { background: var(--gold-dark); }
@media (max-width: 640px) { .btn { width: 100%; text-align: center; } }

/* Cards & forms */
.card {
  background: #FFFFFF; border: 1px solid var(--black-border);
  border-radius: 16px; padding: 28px;
  box-shadow: 0 6px 24px rgba(21,20,15,.05);
}
label { display:block; font-size: 13px; font-weight: 600; color: var(--text); margin: 18px 0 6px; }
input, select, textarea {
  width: 100%; padding: 13px 15px; background: #FFFFFF; color: var(--text);
  border: 1px solid #D9D5C9; border-radius: 8px;
  font-family: var(--font-body); font-size: 15px; outline: none; transition: border .25s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,141,43,.15); }
/* iOS Safari: date/time pickers ignore width unless appearance is reset; keep every field inside its box */
input, select, textarea { box-sizing: border-box; max-width: 100%; min-width: 0; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 48px; line-height: 1.2;
  text-align: left; -webkit-text-align: left;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
input[type="number"] { -moz-appearance: textfield; }
img, svg, video, canvas { max-width: 100%; }
* { min-width: 0; }
html, body { overflow-x: hidden; }
textarea { min-height: 96px; resize: vertical; }
.badge { display:inline-block; font-size: 11.5px; font-weight:600; color: var(--gold); border: 1px solid var(--gold); padding: 4px 10px; border-radius: 20px; }
.muted { color: var(--text-dim); }
.center { text-align: center; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; width: 100%; }
@media (max-width: 640px) { .container { padding: 0 18px; } }
.divider { height: 1px; background: var(--black-border); margin: 60px auto; }

/* Nav */
nav.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 32px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--black-border); }
nav.site-nav .links { display: flex; align-items: center; gap: 26px; }
nav.site-nav .links a { color: var(--text-dim); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: color .2s; }
nav.site-nav .links a:hover { color: var(--text); }
nav.site-nav .cta { display: flex; align-items: center; gap: 10px; }
nav.site-nav .links .dd { position: relative; }
nav.site-nav .links .dd-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; z-index: 30; }
nav.site-nav .links .dd:hover .dd-menu { display: block; }
nav.site-nav .links .dd-menu a { display: block; background: #fff; border: 1px solid var(--black-border); padding: 12px 18px; white-space: nowrap; font-size: 13px; color: var(--text); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
nav.site-nav .links .dd-menu a:first-child { border-radius: 10px 10px 0 0; }
nav.site-nav .links .dd-menu a:last-child { border-radius: 0 0 10px 10px; border-top: none; }
nav.site-nav .links .dd-menu a:hover { background: var(--black-soft); }
nav.site-nav .btn { padding: 11px 20px; font-size: 12px; }
@media (max-width: 940px) { nav.site-nav .links { display: none; } nav.site-nav .cta .btn { padding: 9px 14px; font-size: 13px; width: auto; } }
nav.site-nav .links .dd:focus-within .dd-menu { display: block; }   /* keyboard users get the dropdown too */
@media (min-width: 941px) { #menu-btn { display: none !important; } }

/* Section rhythm */
section { padding: 88px 0; }
@media (max-width: 640px) { section { padding: 60px 0; } }
.eyebrow { font-size: 13.5px; color: var(--gold-dark, #8C7326); font-weight: 600; }
.lede { color: var(--text-dim); font-size: 17.5px; line-height: 1.8; }
@media (max-width: 640px) { .lede { font-size: 16px; } }

/* Two doors */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 560px; }
.door { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px 52px; color: #fff;
  background: #222 center/cover no-repeat; overflow: hidden; text-decoration: none; }
.door::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.72) 100%); transition: background .3s; }
.door:hover::before { background: linear-gradient(180deg, rgba(0,0,0,.15) 20%, rgba(0,0,0,.80) 100%); }
.door > * { position: relative; }
.door .eyebrow { color: var(--gold-light); }
.door h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin-top: 12px; }
.door p { color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.7; margin-top: 12px; max-width: 460px; }
.door .go { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; background: #fff; color: var(--text);
  padding: 13px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.door .go span { transition: transform .25s; }
.door:hover .go span { transform: translateX(4px); }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } .door { min-height: 400px; padding: 36px 24px; } .door h2 { font-size: 30px; } .door p { font-size: 15px; } }

/* Proof strip */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.proof > div { text-align: center; padding: 22px 12px; background: #F6F3EC; border-radius: 14px; }
.proof .n { font-family: var(--font-display); font-size: 34px; color: var(--text); line-height: 1; }
.proof .l { font-size: 13px; color: var(--text-dim); margin-top: 8px; line-height: 1.35; }
@media (max-width: 760px) { .proof { grid-template-columns: repeat(2, 1fr); } .proof .n { font-size: 28px; } }

/* Feature split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.split img, .split .img { width: 100%; height: 100%; min-height: 520px; border-radius: 20px; object-fit: cover; background: var(--black-soft) center/cover no-repeat; }
.split > div:not(.img) { display: flex; flex-direction: column; justify-content: center; }
.split h2 { font-size: clamp(28px, 3.2vw, 40px); }
.split .item { display: flex; gap: 16px; margin-top: 22px; }
.split .item .ico, .ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(176,141,43,.10); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.ico svg { width: 20px; height: 20px; }
.split .item h4 { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--text); line-height: 1.4; }
.split .item p { color: var(--text-dim); font-size: 15px; line-height: 1.7; margin-top: 4px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } .split img, .split .img { min-height: 0; aspect-ratio: 4/3; } .split .img { order: -1; } }

/* Testimonials */
.tm-track { display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding:6px 2px 10px; scrollbar-width:none; }
.tm-track::-webkit-scrollbar { display:none; }
.tm-card { flex:0 0 min(360px, 82vw); scroll-snap-align:start; background:#FFFFFF; border:1px solid var(--black-border);
  border-radius:18px; padding:28px; text-align:left; display:flex; flex-direction:column; gap:14px; }
.tm-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid var(--black-border); color:var(--text); font-size:19px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.08); }
@media (max-width:760px) { .tm-arrow { display:none; } }

/* Footer */
footer.site-footer { background: #15140F; color: #B9B6AA; padding: 56px 0 40px; font-size: 13.5px; }
footer.site-footer a { color: #E8E4D6; text-decoration: none; }
footer.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
footer.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
footer.site-footer li { list-style: none; margin: 8px 0; }
@media (max-width: 760px) { footer.site-footer .cols { grid-template-columns: 1fr 1fr; } }

/* ---- legacy dark-page helpers re-mapped ---- */
.hero-on-photo h1, .hero-on-photo h2, .hero-on-photo h3 { color: #fff !important; }
.hero-on-photo p, .hero-on-photo .muted, .hero-on-photo .lede { color: rgba(255,255,255,.88) !important; }
.hero-on-photo .gold, .hero-on-photo .eyebrow { color: var(--gold-light) !important; }
.hero-on-photo .gold-gradient { color: #fff !important; }
.hero-on-photo .btn-gold { background: #fff; color: var(--text); }
.hero-on-photo .btn-ghost { color: #fff; border-color: #fff; }
.tier-card, .fmt, .vr-card, .review-card { background: #fff; }

/* ---- phone safety: nothing wider than the screen, nothing unreadable ---- */
h1, h2, h3 { overflow-wrap: break-word; }
.container > * { max-width: 100%; }
table { max-width: 100%; }
@media (max-width: 640px) {
  h1 { font-size: clamp(32px, 9vw, 40px); }
  h2 { font-size: clamp(26px, 7.5vw, 32px); }
  .card { padding: 22px 18px; border-radius: 14px; }
}

/* ===== refactor: audience toggle, category cards, mobile carousels, sticky bar, touch targets ===== */
.aud { display:inline-flex; background:#F6F3EC; border:1px solid #E7E3D8; border-radius:999px; padding:4px; gap:4px; margin:16px 0 14px; }
.aud button { border:none; background:transparent; font-family:var(--font-body); font-size:14px; padding:10px 18px; border-radius:999px; color:var(--text-dim); cursor:pointer; min-height:44px; }
.aud button.on { background:var(--text); color:#fff; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.cat-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.cat { display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:4/3; border-radius:16px; background:var(--black-soft) center/cover no-repeat; position:relative; overflow:hidden; text-decoration:none; color:#fff; padding:16px; box-shadow:inset 0 -110px 90px -40px rgba(0,0,0,.8); transition:transform .3s; }
.cat:hover { transform:translateY(-3px); }
.cat b { font-size:18px; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.cat span { font-size:13px; line-height:1.35; margin-top:4px; opacity:.92; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.btn { min-height:44px; }
nav.site-nav a { min-height:44px; display:inline-flex; align-items:center; }
.msteps { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; margin-top:30px; position:relative; }
.msteps::before { content:''; position:absolute; left:16%; right:16%; top:26px; height:2px; background:linear-gradient(90deg, var(--gold), #E7E3D8); }
.mstep { text-align:center; padding:0 12px; position:relative; }
.mstep .mno { width:52px; height:52px; border-radius:50%; background:var(--gold); color:#fff; font-family:var(--font-display); font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto; position:relative; z-index:1; }
.mstep h4 { font-size:16px; margin-top:14px; } .mstep p { font-size:14px; color:var(--text-dim); line-height:1.6; margin-top:6px; }
.popular { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.08em; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.sticky-bar { display:none; }
@media (max-width: 767px) {
  .swipe, .grid3, .cat-grid, .msteps, .tiers { display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; grid-template-columns:none; }
  .swipe::-webkit-scrollbar, .grid3::-webkit-scrollbar, .cat-grid::-webkit-scrollbar, .msteps::-webkit-scrollbar, .tiers::-webkit-scrollbar { display:none; }
  .swipe > *, .grid3 > *, .cat-grid > *, .msteps > *, .tiers > * { flex:0 0 82%; scroll-snap-align:start; }
  .cat-grid > * { flex-basis:72%; aspect-ratio:4/3; }
  .msteps::before { display:none; }
  .sticky-bar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-top:1px solid #E7E3D8; }
  .sticky-bar a { flex:1; text-align:center; padding:12px 8px; font-size:13px; }
  body.has-sticky { padding-bottom:76px; }
  .site-footer { padding-bottom:90px; }
}
/* brand kit v1.0 header logo: keep the mark readable on small phones */
@media (max-width: 400px) { nav.site-nav img[src="/logo-header.svg"] { height: 32px !important; width: auto !important; } }

/* ===== Sep 2026 polish: sentence case labels, no hover lifts, readable logo, split heroes, redacted names ===== */
[style*="uppercase"]:not(input):not(textarea), .hero-badge, .tier-title, .vr-date, .review-card .who, .chem-h, .section-title, .tb-lbl, .fmt .eyebrow, .tier-ribbon, .popular { text-transform:none !important; letter-spacing:0 !important; }
.gold[style*="letter-spacing"] { letter-spacing:0 !important; }
.cat:hover { transform:none; }
nav.site-nav img[src="/logo-header.svg"] { height:44px !important; width:auto !important; }
@media (max-width: 400px) { nav.site-nav img[src="/logo-header.svg"] { height:36px !important; } nav.site-nav { padding-left:16px; padding-right:16px; } }
.hero-split { padding:124px 0 64px; background:#FAF7F0; }
.hero-split .in { max-width:1120px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:52px; align-items:center; }
.hero-split h1 { font-size:clamp(34px,4.6vw,54px); line-height:1.08; }
.hero-split p { color:var(--ink-2); font-size:17px; line-height:1.7; margin-top:18px; max-width:520px; }
.hero-split .acts { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hero-split img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:18px; display:block; background:#EDE8DC; }
@media (max-width: 860px) { .hero-split { padding:100px 0 44px; } .hero-split .in { grid-template-columns:1fr; gap:26px; padding:0 18px; } .hero-split p { font-size:16px; } }
.rd { display:inline-block; height:.78em; background:#DCD6C8; border-radius:4px; vertical-align:middle; }
.rv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px; text-align:left; }
.rv { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.rv .im { aspect-ratio:16/9; background:#EDE8DC center/cover no-repeat; }
.rv .bd { padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.rv q { quotes:none; font-size:15px; line-height:1.7; color:var(--ink); flex:1; }
.rv .who { font-size:13.5px; color:var(--ink-2); } .rv .who b { color:var(--ink); font-weight:600; }
@media (max-width: 860px) { .rv-grid { grid-template-columns:1fr; } }