/* Oak Cliff Pilates — site styles
   Part 1: design-system components (translated 1:1 from _ds_bundle.js)
   Part 2: page styles (from "OCP Website - Home.html")
   Part 3: intro-offer popup (from ocp-popup.jsx)
   Part 4: production additions the design prototype did not cover */

/* ════════════════════════════════════════════════════════════════════
   1. DESIGN SYSTEM COMPONENTS
   ════════════════════════════════════════════════════════════════════ */

/* ── FoilText — the 5-stop gold foil clipped to type.
      Headline words and thin strokes only. One foil moment per layout. ── */
.foil{
  background-image:var(--ocp-gold-foil);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  display:inline;
}
.foil--vertical{background-image:var(--ocp-gold-foil-vertical)}

/* ── LogoPuck — the circular OCP mark. Never render below 40px. ── */
.logo-puck{display:block;object-fit:contain}
.logo-puck--glow{filter:drop-shadow(0 0 18px rgba(201,162,74,.35))}

/* ── PhotoFrame — full-bleed tile with the bottom-up protection gradient. ── */
.photo{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:4 / 3;
  border-radius:var(--radius-lg);
  background:var(--ocp-ink);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo__scrim{position:absolute;inset:0;background:var(--ocp-photo-scrim)}
.photo figcaption{
  position:absolute;left:var(--space-5);bottom:var(--space-4);right:var(--space-5);
  font:var(--fw-semibold) .9375rem/1.2 var(--font-display);
  text-transform:uppercase;letter-spacing:.05em;color:var(--ocp-cream);
}

/* ── SectionLabel — "01 · WHO WE ARE". The brand kit's section marker. ── */
.sec-label{display:flex;align-items:baseline;gap:var(--space-4)}
.sec-label__num{font:var(--fw-bold) var(--type-body)/1 var(--font-display);color:var(--ocp-gold-deep)}
.sec-label__text{
  font:var(--text-style-eyebrow);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow-wide);color:var(--ocp-gold);
}

/* ── StatBlock — oversized gold Khand figure over a letterspaced caption. ── */
.stat{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding-left:var(--space-6);border-left:var(--rule-gold);
}
.stat__value{
  font:var(--fw-bold) var(--type-display-3)/.9 var(--font-display);
  color:var(--ocp-gold);letter-spacing:var(--ls-display);
}
.stat--lg .stat__value{font-size:var(--type-display-2)}
.stat__label{
  font:var(--text-style-eyebrow);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--text-muted);max-width:18ch;
}

/* ── Badge ── */
.badge{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;
  font:var(--fw-bold) var(--type-micro)/1 var(--font-body);
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  border:var(--border-width) solid;border-radius:var(--radius-sm);white-space:nowrap;
}
.badge--gold{background:var(--ocp-gold);color:var(--ocp-black);border-color:var(--ocp-gold)}
.badge--outline{background:transparent;color:var(--ocp-gold);border-color:var(--border-hairline)}
.badge--cream{background:var(--ocp-cream);color:var(--ocp-black);border-color:var(--ocp-cream)}
.badge--ink{background:var(--ocp-ink);color:var(--ocp-grey-300);border-color:var(--border-subtle)}
.badge--neon{background:var(--ocp-neon-pink);color:var(--ocp-black);border-color:var(--ocp-neon-pink)}

/* ── Button ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-height);padding:0 var(--control-pad-x);
  font:var(--fw-semibold) .9375rem/1 var(--font-display);
  text-transform:uppercase;letter-spacing:var(--ls-button);text-decoration:none;
  border:var(--border-width) solid;border-radius:var(--radius-sm);
  cursor:pointer;white-space:nowrap;transition:var(--transition-control);
}
.btn > span{padding-top:1px}
.btn--sm{height:var(--control-height-sm);padding:0 14px;font-size:.8125rem}
.btn--lg{height:var(--control-height-lg);padding:0 var(--control-pad-x-lg);font-size:1.0625rem}
.btn--full{width:100%}
.btn:active:not(:disabled){transform:scale(var(--press-scale))}

.btn--primary{background:var(--ocp-gold);color:var(--ocp-black);border-color:var(--ocp-gold)}
.btn--primary:hover:not(:disabled){background:var(--ocp-gold-warm);border-color:var(--ocp-gold-warm);color:var(--ocp-black)}

.btn--secondary{background:transparent;color:var(--ocp-cream);border-color:var(--border-hairline)}
.btn--secondary:hover:not(:disabled){background:rgba(201,162,74,.1);border-color:var(--ocp-gold);color:var(--ocp-gold-warm)}

.btn--ghost{background:transparent;color:var(--ocp-cream);border-color:transparent;box-shadow:none}
.btn--ghost:hover:not(:disabled){color:var(--ocp-gold)}

.btn--on-light{background:var(--ocp-black);color:var(--ocp-cream);border-color:var(--ocp-black)}
.btn--on-light:hover:not(:disabled){background:var(--ocp-grey-800);border-color:var(--ocp-grey-800);color:var(--ocp-gold-warm)}

.btn--danger{background:var(--ocp-hot-red);color:var(--ocp-paper);border-color:var(--ocp-hot-red)}
.btn--danger:hover:not(:disabled){background:#f7333f;border-color:#f7333f}

.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--action-disabled-bg);color:var(--action-disabled-fg);
  border-color:transparent;cursor:not-allowed;transform:none;
}

/* ── Card — framed surface. `footer` is the brand-kit label bar. ── */
.card{
  background:var(--surface-card);
  border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-lg);overflow:hidden;color:var(--text-primary);
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
  transition:var(--transition-control),box-shadow var(--dur) var(--ease-out);
}
.card--light{background:var(--surface-light);color:var(--text-on-light);border-color:var(--border-on-light)}
.card--outline{background:transparent}
.card__body{padding:var(--card-pad);flex:1}
.card__body--0{padding:0}
.card__body--32{padding:32px}
.card__body--36{padding:36px}
.card__footer{
  padding:12px var(--card-pad);
  border-top:var(--border-width) solid var(--border-hairline);
  font:var(--fw-semibold) .9375rem/1 var(--font-display);
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.card--light .card__footer{border-top-color:var(--border-on-light)}
.card--hoverable:hover{
  border-color:var(--ocp-gold);
  box-shadow:var(--shadow-raised);
  transform:translateY(var(--hover-lift));
}

/* ── Input ── */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{
  font:var(--text-style-eyebrow);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--text-secondary);
}
.field__box{
  display:flex;align-items:center;gap:var(--space-3);
  height:var(--control-height);padding:0 var(--space-4);
  background:var(--ocp-ink);
  border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-sm);
  transition:var(--transition-control),box-shadow var(--dur) var(--ease-out);
}
.field__box:focus-within{border-color:var(--ocp-gold);box-shadow:0 0 0 var(--focus-ring-width) rgba(233,201,119,.22)}
.field__box input{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  font:var(--fw-regular) var(--type-body-sm)/1 var(--font-body);color:var(--text-primary);
}
.field__box input::placeholder{color:var(--text-muted)}

/* ════════════════════════════════════════════════════════════════════
   2. PAGE
   ════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface-page);color:var(--text-primary);
  font:var(--text-style-body);-webkit-font-smoothing:antialiased;
}
a{color:var(--text-primary);text-decoration:none;transition:color .18s var(--ease-out)}
a:hover{color:var(--ocp-gold)}
img{max-width:100%}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}

.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.eyebrow{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--ocp-gold);margin:0;
}
.dsp{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
  text-transform:uppercase;margin:0;
}
.lede{
  max-width:52ch;color:var(--text-secondary);
  font-size:var(--type-body-lg);line-height:var(--lh-body);margin:0;
}

/* ── nav ── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(11,11,11,.82);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-subtle);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:32px;height:88px}
.nav-links{
  display:flex;gap:32px;font:var(--text-style-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav-burger i{display:block;width:22px;height:1px;background:var(--ocp-cream);transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out)}
.nav-in img{border-radius:50%}
.nav-brand{display:flex;align-items:center;gap:14px}
.nav-brand .dsp{font-size:var(--type-display-5)}
.nav-cta{display:flex;align-items:center;gap:12px}

/* ── hero ── */
.hero{
  position:relative;min-height:100vh;padding-top:88px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.hero img,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,11,.96) 0%,rgba(11,11,11,.86) 28%,rgba(11,11,11,.6) 52%,rgba(11,11,11,.2) 78%,rgba(11,11,11,.35) 100%);
}
.hero-frame{position:absolute;inset:112px 40px 40px;border:1px solid var(--border-hairline);pointer-events:none;z-index:2}
.hero-in{position:relative;z-index:3;width:100%;padding:0;flex:0 0 auto}
.hero-in::before{
  content:"";position:absolute;left:-50vw;right:-50vw;top:-56px;bottom:0;
  background:linear-gradient(to top,rgba(11,11,11,.94) 0%,rgba(11,11,11,.88) 55%,rgba(11,11,11,.66) 100%);
  z-index:-1;
}
.hero h1{font-size:var(--type-display-hero);margin:24px 0 28px}
.hero .lede{margin-bottom:36px}
.hero-meta{
  display:flex;gap:24px;margin:44px 0 0;padding:0 0 64px;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow-wide);
  text-transform:uppercase;color:var(--text-secondary);
}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}

/* ── marquee ── */
.marquee{
  border-top:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline);
  overflow:hidden;padding:22px 0;
}
.marquee-t{
  display:flex;gap:48px;width:max-content;animation:mq 38s linear infinite;
  font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--type-display-4);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ocp-gold);
}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── sections ── */
section{position:relative}
.band{padding:128px 0}
.band--flush-top{padding-top:0}
.band--flush{padding-top:0;padding-bottom:0}
.band-light{background:var(--surface-light);color:var(--text-on-light)}
.band-light .lede{color:var(--text-on-light-secondary)}
.band-light .eyebrow{color:var(--ocp-gold-deep)}
.band-light .sec-head{border-bottom-color:var(--border-on-light)}
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
  padding-bottom:40px;border-bottom:1px solid var(--border-hairline);margin-bottom:64px;
}
.sec-head h2{font-size:var(--type-display-2)}
.sec-head__l{display:grid;gap:20px}
.sec-head__r{display:grid;gap:16px;justify-items:end}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline);
}
.stats > *{padding:44px 40px 44px var(--space-6)}

.embedsocial-hashtag,.embedsocial-hashtag iframe{background:transparent!important;color-scheme:dark}
.offer-best{border-color:var(--ocp-gold)!important;box-shadow:0 12px 32px -12px rgba(11,11,11,.28)}
.offer-flag{
  display:inline-block;margin-bottom:18px;padding:5px 10px;
  border:1px solid var(--ocp-gold);border-radius:2px;background:rgba(201,162,74,.14);
  font:var(--fw-bold) var(--type-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ocp-gold-deep);
}
.tk{
  font:var(--fw-bold) var(--type-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ocp-gold-deep);
}
.rowlabel{
  display:flex;justify-content:space-between;gap:16px;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
}

/* section 01 — manifesto */
.manifesto-copy h3{font-size:var(--type-display-4)}
.manifesto-copy .lede{margin-top:20px;font-size:var(--type-body)}
.manifesto-copy .btn-row{margin-top:32px}

/* section 02 — intro offers */
.offer-lede{margin-bottom:24px;font-size:var(--type-body);color:var(--text-on-light-secondary);max-width:60ch}
.offer-headline{
  margin-bottom:40px;max-width:38ch;
  font-family:var(--font-display);font-size:var(--type-display-5);
  text-transform:uppercase;letter-spacing:var(--ls-display);color:var(--text-on-light);
}
.offer-price{font-size:var(--type-display-1);color:var(--ocp-black)}
.offer-note{margin:16px 0 0;color:var(--text-on-light-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body)}
.offer-fine{margin:32px 0 0;color:var(--text-on-light-secondary);font-size:var(--type-caption)}

/* section 03 — classes */
.class-copy{margin-top:20px;font-size:var(--type-body)}
.class-outro{margin-top:48px;font-size:var(--type-body);max-width:78ch}

/* section 04 — studios */
.studio-media{position:relative;aspect-ratio:4 / 5;overflow:hidden}
.studio-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.studio-body{padding:24px 24px 8px}
.studio-body p:last-child{margin:10px 0 0;color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body)}

/* section 05 — team */
.team-lede{margin-bottom:40px;font-size:var(--type-body);color:var(--text-on-light-secondary);max-width:64ch}
.team-media{position:relative;aspect-ratio:3 / 4;overflow:hidden}
.team-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* section 06 — membership */
.tier-flag{margin-bottom:20px;min-height:26px}
.tier-price{font-size:var(--type-display-3);color:var(--ocp-gold)}
.tier-price span{
  font-size:var(--type-body);font-family:var(--font-body);
  color:var(--text-secondary);letter-spacing:0;
}
.tier-items{display:grid;gap:12px;margin:28px 0 32px}
.tier-items div{
  display:flex;gap:12px;color:var(--text-secondary);
  font-size:var(--type-body-sm);line-height:var(--lh-body);
  border-top:1px solid var(--border-subtle);padding-top:12px;
}
.tier-items div span:first-child{color:var(--ocp-gold-deep)}
.membership-note{margin-top:28px}

/* section 07 — reviews */
.review-cta{margin-top:44px;display:grid;gap:16px}

/* section 08 — faq */
.faq-list{display:grid;max-width:78ch}
.faq-item{border-top:1px solid rgba(11,11,11,.14)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 0;background:none;border:0;cursor:pointer;text-align:left;
  font:var(--fw-semibold) var(--type-display-5)/1.25 var(--font-display);
  letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--ocp-black);
}
.faq-q i{
  flex:none;font-style:normal;color:var(--ocp-gold-deep);
  font:var(--fw-regular) 22px/1 var(--font-body);
  transition:transform .18s var(--ease-out);
}
.faq-q[aria-expanded="true"] i{transform:rotate(45deg)}
.faq-a{margin:0;max-width:66ch;color:var(--text-on-light-secondary);font-size:var(--type-body);line-height:var(--lh-body);text-wrap:pretty}
.faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.faq-q[aria-expanded="true"] + .faq-a-wrap{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-q[aria-expanded="true"] + .faq-a-wrap .faq-a{margin-bottom:26px}

/* app band + signup — the two hairline-framed blocks */
.frame-box{border:1px solid var(--border-hairline);padding:56px;align-items:center}
.frame-box h2{font-size:var(--type-display-3);margin:0}
.frame-box .lede{margin-top:20px;font-size:var(--type-body)}
.frame-box .btn-row{margin-top:32px}
.frame-box img{width:100%;height:auto;border-radius:var(--radius-lg)}
.signup-box{
  border:1px solid var(--border-hairline);padding:72px 56px;
  display:grid;gap:32px;grid-template-columns:1.1fr .9fr;align-items:center;
}
.signup-box h2{font-size:var(--type-display-3)}
.signup-box .lede{margin-top:16px}
.signup-form{display:grid;gap:12px}

/* ── footer ── */
.foot{border-top:1px solid var(--border-hairline);padding:80px 0 48px}
.foot-cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:48px;padding-bottom:64px}
.foot-list{display:grid;gap:12px;font-size:var(--type-body-sm);color:var(--text-secondary)}
.foot-big{
  font-size:clamp(2.5rem,7vw,6rem);border-top:1px solid var(--border-subtle);
  padding-top:48px;color:var(--ocp-cream);
}
.foot-brand{display:grid;gap:20px;justify-items:start}
.foot-brand img{width:132px;height:auto;display:block}
.foot-brand p{margin:0;color:var(--text-secondary);font-size:16px;max-width:28ch}

/* ════════════════════════════════════════════════════════════════════
   3. INTRO-OFFER POPUP
   ════════════════════════════════════════════════════════════════════ */
.pop{
  position:fixed;inset:0;z-index:100;
  background:rgba(11,11,11,.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:popFade .18s var(--ease-out);
}
.pop[hidden]{display:none}
@keyframes popFade{from{opacity:0;transform:translateY(8px)}}
.pop-shell{
  position:relative;width:min(1080px,100%);max-height:min(720px,92vh);
  display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:minmax(0,1fr);
  background:var(--ocp-black);border:1px solid var(--border-hairline);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.9);overflow:hidden;
}
.pop-panel{padding:56px 56px 48px;display:flex;flex-direction:column;gap:24px;min-height:0;overflow-y:auto}
.pop-photo{position:relative;overflow:hidden;border-left:1px solid var(--border-hairline)}
.pop-photo img{width:100%;height:100%;object-fit:cover}
.pop-photo__scrim{position:absolute;inset:0;background:var(--ocp-photo-scrim)}
.pop-photo__tag{position:absolute;left:28px;bottom:24px;right:28px}
.pop-eyebrow{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow-wide);
  text-transform:uppercase;color:var(--ocp-gold);margin:0;
}
.pop-head{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--type-display-2);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);text-transform:uppercase;margin:0;
}
.pop-offer-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 0;border-top:1px solid var(--border-subtle);
  font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--type-display-5);letter-spacing:var(--ls-display);text-transform:uppercase;
}
.pop-offer-row span:last-child{color:var(--ocp-gold)}
.pop-ask{font:var(--text-style-body);color:var(--text-secondary);margin:0}
.pop-fine{font:var(--fw-regular) var(--type-caption)/1.5 var(--font-body);color:var(--text-muted);margin:0}
.pop-close{
  position:absolute;top:16px;right:16px;z-index:4;width:40px;height:40px;
  display:grid;place-items:center;background:rgba(11,11,11,.6);
  border:1px solid var(--border-hairline);border-radius:2px;
  color:var(--ocp-cream);font:16px var(--font-body);cursor:pointer;
}
.pop-ghost{
  align-self:center;background:none;border:0;color:var(--text-muted);
  font:var(--fw-bold) var(--type-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow-wide);text-transform:uppercase;cursor:pointer;padding:12px 4px;
}
.pop-back{
  align-self:flex-start;background:none;border:0;color:var(--text-muted);
  font:var(--fw-bold) var(--type-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow-wide);text-transform:uppercase;cursor:pointer;padding:0;
}
.pop-steps{display:flex;gap:8px;align-items:center}
.pop-dot{width:8px;height:3px;background:var(--border-hairline);transition:all .18s var(--ease-out)}
.pop-dot.on{width:28px;background:var(--ocp-gold)}
.pop-reasons{display:grid;gap:10px}
.pop-reasons .btn{white-space:normal;text-align:center;height:auto;min-height:var(--control-height);padding-top:12px;padding-bottom:12px}
.pop-fields{display:grid;gap:14px}
/* One intro offer in a three-up grid: let the single card take two columns
   so it reads as the offer rather than as two missing ones. */
.intro-solo{grid-column:span 2}
@media (max-width:900px){ .intro-solo{grid-column:auto} }

.pop-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Arketa's hosted intake form, embedded. Their page centres its card on a
   light background, leaving a pale band above and below; the wrapper is
   shorter than the frame and the frame is nudged up, which crops both away so
   the card meets our black cleanly. If they ever change that padding the worst
   case is a thin light edge, not a broken layout. */
.pop-embed{
  position:relative;height:500px;overflow:hidden;
  border:1px solid var(--border-hairline);border-radius:8px;background:var(--ocp-black);
}
.pop-embed__frame{
  display:block;width:100%;height:560px;margin-top:-30px;border:0;
  background:var(--ocp-black);
}
.pop-embed__wait{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  background:var(--ocp-black);
}
/* Needed because the display above outranks the browser's own [hidden] rule,
   so without this the overlay never goes away. */
.pop-embed__wait[hidden]{display:none}
.pop-embed__wait p{
  margin:0;font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.pop-embed__spin{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--border-hairline);border-top-color:var(--ocp-gold);
  animation:pop-spin .8s linear infinite;
}
@keyframes pop-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .pop-embed__spin{animation-duration:2.4s} }
.pop-check{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;
  font:var(--fw-regular) var(--type-caption)/1.5 var(--font-body);
  color:var(--text-secondary);cursor:pointer;
}
.pop-check input{
  width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--ocp-gold);cursor:pointer;
}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.pop-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pop-msg{
  margin:0;font:var(--fw-regular) var(--type-caption)/1.5 var(--font-body);
  color:var(--ocp-gold);
}
.pop-submit{display:grid;gap:12px;margin-top:4px}
.pop-offers{display:grid;gap:12px}
.pop-offer{
  display:block;text-decoration:none;padding:20px 22px;background:#111110;
  border:1px solid var(--border-hairline);border-radius:8px;color:var(--ocp-cream);
  transition:var(--transition-control);
}
.pop-offer--best{border-color:var(--ocp-gold)}
.pop-offer:hover{border-color:var(--ocp-gold);background:rgba(201,162,74,.1)}
.pop-offer__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--type-display-5);letter-spacing:var(--ls-display);text-transform:uppercase;
}
.pop-offer__top span:last-child{color:var(--ocp-gold)}
.pop-offer p{margin:10px 0 0;color:var(--text-secondary);font:var(--text-style-body);font-size:var(--type-body-sm)}
.pop-step[hidden]{display:none}

/* ════════════════════════════════════════════════════════════════════
   4. PRODUCTION ADDITIONS
   (mobile drawer, skip link, motion + print — not in the prototype)
   ════════════════════════════════════════════════════════════════════ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--ocp-gold);color:var(--ocp-black);
  font:var(--fw-semibold) var(--type-body-sm)/1 var(--font-display);
  text-transform:uppercase;letter-spacing:var(--ls-button);
}
.skip:focus{left:0}

.nav-drawer{
  position:fixed;inset:88px 0 auto 0;z-index:49;
  background:rgba(11,11,11,.97);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-hairline);
  padding:24px 24px 32px;display:none;
}
.nav-drawer[data-open="true"]{display:block}
.nav-drawer a{
  display:block;padding:16px 0;border-bottom:1px solid var(--border-subtle);
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
}
.nav-drawer .btn{margin-top:24px}
.nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

body.is-locked{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-t{animation:none}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}

/* ── responsive (from the design) ── */
@media(max-width:1000px){
  .wrap{padding:0 24px}
  .g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-cols{grid-template-columns:1fr 1fr}
  .band{padding:96px 0}
  .band--flush-top{padding-top:0}
  .band--flush{padding-top:0;padding-bottom:0}
  .frame-box{padding:40px}
  .signup-box{padding:48px 32px;grid-template-columns:1fr}
}

/* The inline nav needs room for brand + six links with chevrons + CTA. Below
   this it overlaps the CTA, so hand navigation to the drawer here rather than
   at the prototype's 700px. The CTA stays until 700px. Kept in its own block
   so it stays in step with the mega-menu rule, which must switch off at
   exactly the same width. */
@media (max-width:1100px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media(max-width:820px){
  .pop-shell{grid-template-columns:1fr}
  .pop-row{grid-template-columns:1fr}
  /* Their card sits closer to the top at narrow widths, so the crop above
     has to ease off or it takes a bite out of the logo. */
  .pop-embed{height:530px}
  .pop-embed__frame{height:560px;margin-top:-14px}
  .pop-photo{display:none}
  .pop-panel{padding:44px 24px 32px}
}
@media(max-width:700px){
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head{flex-direction:column;align-items:flex-start;gap:24px}
  .sec-head h2{font-size:var(--type-display-3)}
  .sec-head__r{justify-items:start}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > *{padding:32px 20px 32px var(--space-6)}
  .hero-frame{inset:104px 16px 16px}
  .hero-meta{display:none}
  .hero-in{padding-bottom:56px}
  .band{padding:72px 0}
  .band--flush-top{padding-top:0}
  .band--flush{padding-top:0;padding-bottom:0}
  .marquee-t{font-size:var(--type-display-5)}
  .frame-box{grid-template-columns:minmax(0,1fr);padding:32px 24px}
  .offer-price{font-size:var(--type-display-2)}
  .nav-cta .btn{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   5. INNER PAGES
   Components the homepage doesn't use: compact page hero, carousel,
   feature grid, values list, chips, gallery, closing CTA band.
   Same vocabulary as above — gold hairlines, Khand caps, squared corners.
   ════════════════════════════════════════════════════════════════════ */

/* ── Compact page hero — a shorter cousin of .hero ── */
.page-hero{
  position:relative;min-height:min(72vh,720px);padding:calc(88px + 96px) 0 96px;
  display:flex;align-items:flex-end;overflow:hidden;
}
.page-hero img,.page-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,11,.96) 0%,rgba(11,11,11,.84) 34%,rgba(11,11,11,.56) 62%,rgba(11,11,11,.34) 100%);
}
.page-hero .wrap{position:relative;z-index:2;width:100%}
.page-hero h1{font-size:clamp(2.75rem,6.5vw,5rem);margin:20px 0 24px}
.page-hero .lede{max-width:60ch}
.page-hero .btn-row{margin-top:36px}
.page-hero-frame{position:absolute;inset:112px 40px 40px;border:1px solid var(--border-hairline);pointer-events:none;z-index:1}

/* Breadcrumb above the page-hero headline */
.crumbs{
  display:flex;gap:10px;align-items:center;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.crumbs a{color:var(--ocp-gold)}
.crumbs span[aria-hidden]{color:var(--ocp-gold-deep)}

/* ── Carousel — numbered slides, the "1 2 3 4 / 4" pattern ── */
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{display:flex;transition:transform var(--dur-slow) var(--ease-out)}
.carousel__slide{flex:0 0 100%;min-width:0}
.carousel__bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid var(--border-hairline);
}
.band-light .carousel__bar{border-bottom-color:var(--border-on-light)}
.carousel__nums{display:flex;align-items:baseline;gap:4px}
.carousel__num{
  background:none;border:0;cursor:pointer;padding:6px 10px;
  font:var(--fw-bold) var(--type-display-5)/1 var(--font-display);
  letter-spacing:var(--ls-display);color:var(--text-muted);
  transition:var(--transition-control);
}
.carousel__num:hover{color:var(--ocp-gold)}
.carousel__num[aria-selected="true"]{color:var(--ocp-gold)}
.band-light .carousel__num{color:var(--ocp-grey-500)}
.band-light .carousel__num:hover,
.band-light .carousel__num[aria-selected="true"]{color:var(--ocp-gold-deep)}
.carousel__count{
  font:var(--fw-bold) var(--type-display-5)/1 var(--font-display);
  letter-spacing:var(--ls-display);color:var(--text-muted);
}
.carousel__arrows{display:flex;gap:8px}
.carousel__arrow{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--ocp-cream);
  border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sm);
  font:var(--fw-regular) 18px/1 var(--font-body);transition:var(--transition-control);
}
.carousel__arrow:hover{background:rgba(201,162,74,.1);border-color:var(--ocp-gold);color:var(--ocp-gold-warm)}
.band-light .carousel__arrow{color:var(--ocp-black);border-color:var(--border-on-light)}
.band-light .carousel__arrow:hover{background:rgba(201,162,74,.14);border-color:var(--ocp-gold-deep);color:var(--ocp-black)}

/* Slide body: photo one side, copy the other */
.slide-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.slide-split h3{font-size:var(--type-display-3);margin:0}
.slide-split .kicker{
  margin:14px 0 0;font-family:var(--font-display);font-size:var(--type-display-5);
  text-transform:uppercase;letter-spacing:var(--ls-display);color:var(--ocp-gold);
}
.band-light .slide-split .kicker{color:var(--ocp-gold-deep)}
.slide-split p.lede{margin-top:20px;font-size:var(--type-body)}
.slide-split .btn-row{margin-top:32px}
.slide-addr{margin:14px 0 0;font-size:var(--type-body-sm);color:var(--text-secondary)}
.band-light .slide-addr{color:var(--text-on-light-secondary)}
.slide-note{
  margin:24px 0 0;padding-top:20px;border-top:1px solid var(--border-subtle);
  font-size:var(--type-body-sm);line-height:var(--lh-body);color:var(--text-secondary);
}
.band-light .slide-note{border-top-color:var(--border-on-light);color:var(--text-on-light-secondary)}
.slide-note b{color:var(--ocp-gold);font-weight:var(--fw-bold)}
.band-light .slide-note b{color:var(--ocp-gold-deep)}

/* ── Feature grid — labelled spec cards ── */
.feature{
  display:flex;flex-direction:column;gap:12px;padding:32px 28px;
  border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
  background:var(--surface-card);
}
.band-light .feature{background:var(--surface-light-raised);border-color:var(--border-on-light)}
.feature__label{
  font:var(--text-style-eyebrow);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--ocp-gold);
}
.band-light .feature__label{color:var(--ocp-gold-deep)}
.feature__title{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--type-display-4);line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);text-transform:uppercase;margin:0;
}
.feature p{margin:0;color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body)}
.band-light .feature p{color:var(--text-on-light-secondary)}
.feature__tag{margin-top:auto;padding-top:16px}

/* ── Values — numbered rule-separated rows ── */
.values{display:grid;gap:0;border-top:1px solid var(--border-hairline)}
.band-light .values{border-top-color:var(--border-on-light)}
.value{
  display:grid;grid-template-columns:minmax(200px,.34fr) 1fr;gap:40px;
  padding:36px 0;border-bottom:1px solid var(--border-hairline);
}
.band-light .value{border-bottom-color:var(--border-on-light)}
.value h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--type-display-4);line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);text-transform:uppercase;margin:0;color:var(--ocp-gold);
}
.band-light .value h3{color:var(--ocp-black)}
.value p{margin:0;color:var(--text-secondary);font-size:var(--type-body);line-height:var(--lh-body)}
.band-light .value p{color:var(--text-on-light-secondary)}

/* ── Checklists ── */
.ticks{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.ticks li{
  display:flex;gap:14px;padding-top:12px;border-top:1px solid var(--border-subtle);
  color:var(--text-secondary);font-size:var(--type-body-sm);line-height:var(--lh-body);
}
.band-light .ticks li{border-top-color:var(--border-on-light);color:var(--text-on-light-secondary)}
.ticks li::before{content:"·";color:var(--ocp-gold-deep);font-weight:var(--fw-bold)}

/* ── Chips — neighbourhood / phrase pills ── */
.chip-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.chip{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;
  border:1px solid var(--border-hairline);border-radius:var(--radius-pill);
  font:var(--fw-semibold) var(--type-body-sm)/1 var(--font-display);
  text-transform:uppercase;letter-spacing:var(--ls-button);color:var(--text-primary);
}
.band-light .chip{border-color:var(--border-on-light);color:var(--text-on-light)}
.chip em{font-style:normal;font-size:15px}

/* ── Gallery ── */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--ocp-ink);aspect-ratio:4 / 5}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figure.is-wide{grid-column:span 2;aspect-ratio:16 / 10}

/* ── Closing CTA band ── */
.cta-band{
  border:1px solid var(--border-hairline);padding:72px 56px;text-align:center;
  display:grid;gap:28px;justify-items:center;
}
.cta-band h2{font-size:var(--type-display-2);max-width:20ch}
.cta-band .lede{max-width:52ch;margin:0 auto}
.cta-band .chip-row{justify-content:center;margin-top:0}
.cta-tagline{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--type-display-4);text-transform:uppercase;
  letter-spacing:var(--ls-display);color:var(--ocp-gold);
}

/* ── Pull quote / mission statement ── */
.mission{
  border-left:2px solid var(--ocp-gold);padding:8px 0 8px 32px;margin:0;
  font-family:var(--font-display);font-weight:var(--fw-semibold);
  font-size:var(--type-display-3);line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);text-transform:uppercase;max-width:24ch;
}

/* ── Inline offer strip ── */
.offer-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  border:1px solid var(--ocp-gold);border-radius:var(--radius-lg);padding:28px 32px;
  background:rgba(201,162,74,.08);
}
.offer-strip__price{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--type-display-2);line-height:1;letter-spacing:var(--ls-display);
  color:var(--ocp-gold);
}
.band-light .offer-strip__price{color:var(--ocp-gold-deep)}
.offer-strip__meta{display:grid;gap:6px}

@media(max-width:1000px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slide-split{grid-template-columns:1fr;gap:32px}
  .cta-band{padding:56px 32px}
  .page-hero{padding:calc(88px + 64px) 0 64px}
  .page-hero-frame{inset:104px 24px 24px}
}
@media(max-width:700px){
  .value{grid-template-columns:1fr;gap:12px;padding:28px 0}
  .gallery figure.is-wide{grid-column:span 2}
  .cta-band{padding:44px 24px}
  .cta-band h2{font-size:var(--type-display-3)}
  .mission{font-size:var(--type-display-4);padding-left:20px}
  .carousel__bar{flex-wrap:wrap;gap:16px}
  .offer-strip{padding:24px}
  .page-hero-frame{inset:104px 16px 16px}
}

/* ── FAQ on a dark band (the accordion above assumes a cream band) ── */
.faq-list--dark .faq-item{border-top-color:var(--border-hairline)}
.faq-list--dark .faq-q{color:var(--ocp-cream)}
.faq-list--dark .faq-q i{color:var(--ocp-gold)}
.faq-list--dark .faq-a{color:var(--text-secondary)}

/* Feature-card tags carry longer phrases than a normal Badge, so let them wrap
   instead of overflowing the card. */
.feature__tag .badge{
  white-space:normal;height:auto;min-height:22px;
  padding:5px 8px;line-height:1.3;text-align:left;
}

/* ── Award callout ── */
.award{
  display:grid;gap:10px;justify-items:center;text-align:center;
  border:1px solid var(--ocp-gold);border-radius:var(--radius-lg);
  padding:32px 40px;background:rgba(201,162,74,.08);
}
.award__label{
  font:var(--text-style-eyebrow);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow-wide);color:var(--ocp-gold-deep);
}
.award__title{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--type-display-3);line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--ocp-gold);
}
.award__by{
  font:var(--fw-semibold) var(--type-body-sm)/1.4 var(--font-body);
  color:var(--text-secondary);
}

/* ── Third-party embed frame (Arketa schedule / events) ── */
.embed-frame{
  border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface-card);
}
.embed-frame iframe{display:block;width:100%;border:0;min-height:900px}
.embed-note{
  margin:20px 0 0;font:var(--fw-regular) var(--type-caption)/1.5 var(--font-body);
  color:var(--text-muted);
}

/* ── Anchor chips — jump links for a long page ── */
.jump{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:64px}
.jump a{
  display:inline-flex;align-items:center;height:44px;padding:0 20px;
  border:1px solid var(--border-hairline);border-radius:var(--radius-sm);
  font:var(--fw-semibold) var(--type-body-sm)/1 var(--font-display);
  text-transform:uppercase;letter-spacing:var(--ls-button);
  transition:var(--transition-control);
}
.jump a:hover{background:rgba(201,162,74,.1);border-color:var(--ocp-gold);color:var(--ocp-gold-warm)}
.band-light .jump a{border-color:var(--border-on-light);color:var(--text-on-light)}
.band-light .jump a:hover{background:rgba(201,162,74,.14);border-color:var(--ocp-gold-deep);color:var(--ocp-black)}

/* Rich FAQ answers — lists inside an answer body */
.faq-a ul,.faq-a ol{margin:12px 0 0;padding-left:20px}
.faq-a li{margin-bottom:8px}
.faq-a li:last-child{margin-bottom:0}
.faq-a p{margin:0 0 12px}
.faq-a p:last-child{margin:0}
.faq-a a{text-decoration:underline;text-underline-offset:3px}
.band-light .faq-a a{color:var(--ocp-gold-deep)}

/* A section of FAQs stacked under one heading */
.faq-group{margin-bottom:80px}
.faq-group:last-child{margin-bottom:0}
.faq-group > h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--type-display-3);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);text-transform:uppercase;
  margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid var(--border-hairline);
}
.band-light .faq-group > h3{border-bottom-color:var(--border-on-light)}

/* ── Rating line (intro offers hero) ── */
.rating{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;flex-wrap:wrap}
.rating__stars{color:var(--ocp-gold);font-size:20px;line-height:1}
.rating__score{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--type-display-5);letter-spacing:var(--ls-display);color:var(--ocp-gold);
}
.rating__text{
  font:var(--text-style-eyebrow);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--text-secondary);
}

/* ── Shorter page hero, for pages that lead with content not image ── */
.page-hero--short{min-height:min(58vh,560px)}

/* ── Team roster — a long list of names, set as a typographic grid ── */
.roster-group{margin-bottom:72px}
.roster-group:last-child{margin-bottom:0}
.roster-group > h3{
  font-size:var(--type-display-4);margin:0 0 8px;
  padding-bottom:16px;border-bottom:1px solid var(--border-hairline);
}
.band-light .roster-group > h3{border-bottom-color:var(--border-on-light)}
.roster-blurb{margin:16px 0 28px;font-size:var(--type-body)}
.roster{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 32px;margin:0;padding:0;list-style:none;
}
.roster__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--border-subtle);
}
.band-light .roster__item{border-bottom-color:var(--border-on-light)}
.roster__name{
  font:var(--fw-semibold) var(--type-display-5)/1.2 var(--font-display);
  letter-spacing:var(--ls-display);text-transform:uppercase;
}
.roster__since{
  flex:none;font:var(--fw-bold) var(--type-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
@media(max-width:1000px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.roster{grid-template-columns:minmax(0,1fr)}}

/* ══════════════════════════════════════════════════════════════════════════
   6 · JOURNAL — the blog index and the article layout
   Built from the same vocabulary as the rest of section 5. The article body
   is the only place on the site with a long-form measure, so `.prose` sets
   its own max-width rather than inheriting the page grid.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Post cards, used on the index and in "keep reading" ────────────────── */
.posts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px 32px;margin:0;padding:0;list-style:none;
}
.post-card{display:flex;flex-direction:column;position:relative;height:100%}
.post-card__media{
  position:relative;aspect-ratio:3/2;overflow:hidden;
  background:var(--surface-inset);border:1px solid var(--border-hairline);
}
.post-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.post-card:hover .post-card__media img{transform:scale(1.04)}
.post-card__cats{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 10px}
.post-card__title{
  font-family:var(--font-display);font-size:var(--type-display-5);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  text-transform:uppercase;margin:0 0 10px;
}
.post-card__title a{color:inherit;text-decoration:none}
/* The whole card is the click target; the title keeps the accessible name. */
.post-card__title a::after{content:"";position:absolute;inset:0}
.post-card:hover .post-card__title{color:var(--ocp-gold)}
.post-card__excerpt{
  font-size:var(--type-body-sm);color:var(--text-secondary);
  margin:0 0 14px;flex:1;
}
.band-light .post-card__excerpt{color:var(--text-on-light-secondary)}
.post-card__meta{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}

/* A single wide card for the newest post. */
.post-lead{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  border:1px solid var(--border-hairline);margin-bottom:64px;position:relative;
}
.post-lead__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-inset)}
.post-lead__media img{width:100%;height:100%;object-fit:cover;display:block}
.post-lead__body{padding:48px;display:flex;flex-direction:column;justify-content:center}
.post-lead__title{
  font-family:var(--font-display);font-size:clamp(1.9rem,3.2vw,2.9rem);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  text-transform:uppercase;margin:16px 0 16px;
}
.post-lead__title a{color:inherit;text-decoration:none}
.post-lead__title a::after{content:"";position:absolute;inset:0}
.post-lead:hover .post-lead__title{color:var(--ocp-gold)}
.post-lead__excerpt{color:var(--text-secondary);margin:0 0 22px;max-width:52ch}

/* ── Article ────────────────────────────────────────────────────────────── */
.article-head{padding:calc(88px + 72px) 0 0;background:var(--surface-page)}
.article-head__cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.article-head h1{
  font-size:clamp(2.1rem,4.6vw,3.6rem);margin:0 0 22px;max-width:20ch;
}
.article-head__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.article-head__meta span + span::before{content:"·";padding-right:10px}
.article-head__lede{
  font-size:var(--type-body-lg);color:var(--text-secondary);
  max-width:60ch;margin:24px 0 0;
}
.article-figure{margin:56px 0 0;border:1px solid var(--border-hairline)}
.article-figure img{width:100%;height:auto;display:block}

.prose{max-width:68ch;margin:0 auto}
.prose > * + *{margin-top:1.35em}
.prose p{font-size:var(--type-body-lg);line-height:1.75;color:var(--text-secondary)}
.prose p strong{color:var(--text-primary);font-weight:600}
.prose em{color:var(--text-primary)}
.prose h2{
  font-family:var(--font-display);font-size:var(--type-display-4);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  text-transform:uppercase;color:var(--text-primary);
  margin-top:2.1em;margin-bottom:.1em;
}
.prose h2 + p{margin-top:.7em}
.prose h3{
  font-family:var(--font-display);font-size:var(--type-display-5);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  color:var(--text-primary);margin-top:1.6em;margin-bottom:.1em;
}
.prose h3 + p,.prose h3 + ul{margin-top:.6em}
.prose a{color:var(--ocp-gold);text-underline-offset:3px}
.prose ul{padding-left:1.2em;color:var(--text-secondary);font-size:var(--type-body-lg)}
.prose li + li{margin-top:.5em}
/* A pulled-out line of quoted speech — used where the source copy bolds a quote. */
.prose .pull{
  font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.25;letter-spacing:var(--ls-heading);text-transform:none;
  color:var(--text-primary);border-left:2px solid var(--ocp-gold);
  padding:4px 0 4px 28px;margin-top:1.9em;margin-bottom:1.9em;
}

/* ── YouTube facade ─────────────────────────────────────────────────────────
   The poster and play button are ours; the YouTube iframe is only injected
   on click. Keeps ~1 MB of player JS and its cookies off every page view.
   Without JS the link still opens the video on YouTube.                     */
.video{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ocp-black);border:1px solid var(--border-hairline)}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(11,11,11,.28);border:0;cursor:pointer;width:100%;
  transition:background var(--dur) var(--ease-out);
}
.video__play:hover{background:rgba(11,11,11,.12)}
.video__play::after{
  content:"";width:78px;height:78px;border-radius:var(--radius-pill);
  background:var(--ocp-gold);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  -webkit-mask:radial-gradient(circle,#000 99%,transparent 100%);
  display:grid;place-items:center;
  box-shadow:var(--glow-gold-tight);
  transition:transform var(--dur) var(--ease-out);
}
.video__play::before{
  content:"";position:absolute;z-index:2;
  border-style:solid;border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent var(--ocp-black);
  transform:translateX(3px);
}
.video__play:hover::after{transform:scale(1.07)}
.video__label{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--ocp-white);background:linear-gradient(transparent,rgba(11,11,11,.8));text-align:left}
figure.video-figure{margin:0}
figure.video-figure figcaption{
  margin-top:16px;font-size:var(--type-body-sm);color:var(--text-muted);
}

/* ── Share row and prev/next ────────────────────────────────────────────── */
.share{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:64px;padding-top:28px;border-top:1px solid var(--border-hairline);
}
.share__label{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);margin-right:4px;
}
.post-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.post-nav a{
  display:block;padding:28px 32px;border:1px solid var(--border-hairline);
  text-decoration:none;transition:border-color var(--dur) var(--ease-out);
}
.post-nav a:hover{border-color:var(--ocp-gold)}
.post-nav__dir{
  display:block;font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;
}
.post-nav__t{
  font-family:var(--font-display);font-size:var(--type-display-5);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  text-transform:uppercase;color:var(--text-primary);
}
.post-nav a:hover .post-nav__t{color:var(--ocp-gold)}
.post-nav--next{grid-column:2}

@media (max-width:900px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-lead{grid-template-columns:1fr}
  .post-lead__body{padding:32px}
  .post-lead__media{aspect-ratio:16/9}
}
@media (max-width:640px){
  .posts{grid-template-columns:1fr;gap:44px}
  .post-nav{grid-template-columns:1fr}
  .post-nav--next{grid-column:1}
  .article-head{padding-top:calc(76px + 48px)}
  .prose .pull{padding-left:18px}
  .video__play::after{width:60px;height:60px}
}

/* ══════════════════════════════════════════════════════════════════════════
   7 · REVIEWS — our own Google-reviews feed
   Rendered at build time from src/data/reviews.json by tools/build-reviews.py,
   so the reviews are real HTML: crawlable, instant, and styled like the rest
   of the site instead of like a third-party widget.
   ══════════════════════════════════════════════════════════════════════════ */

.rv-head{
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  padding-bottom:40px;margin-bottom:48px;border-bottom:1px solid var(--border-hairline);
}
.band-light .rv-head{border-bottom-color:var(--border-on-light)}
.rv-score{display:flex;align-items:baseline;gap:12px}
.rv-score__n{
  font-family:var(--font-display);font-size:clamp(3.5rem,7vw,5.5rem);line-height:.85;
  letter-spacing:var(--ls-display);color:var(--ocp-gold);
}
.rv-score__of{font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted)}
.rv-meta{display:flex;flex-direction:column;gap:10px}
.rv-src{
  display:flex;align-items:center;gap:10px;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.rv-src svg{width:16px;height:16px;flex:none}

/* Stars. Drawn from tokens rather than an icon font — one less request, and
   they inherit the gold. `aria-hidden` on the row; the label carries the value. */
.stars{display:inline-flex;gap:3px;line-height:1}
.stars svg{width:16px;height:16px;fill:var(--ocp-gold)}
.stars--lg svg{width:20px;height:20px}
.stars .is-empty{fill:var(--border-strong)}
.band-light .stars .is-empty{fill:var(--border-on-light)}

.rv-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;margin:0;padding:0;list-style:none;
}
.rv-card{
  display:flex;flex-direction:column;gap:16px;height:100%;
  padding:var(--card-pad);border:1px solid var(--border-hairline);
  background:var(--surface-card);
  transition:border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.band-light .rv-card{background:var(--surface-light-raised);border-color:var(--border-on-light)}
.rv-card:hover{border-color:var(--ocp-gold);transform:translateY(var(--hover-lift))}
.rv-card__text{
  font-size:var(--type-body-sm);line-height:var(--lh-body);
  color:var(--text-secondary);margin:0;flex:1;
}
.band-light .rv-card__text{color:var(--text-on-light-secondary)}
.rv-card__who{
  /* Google names run from "Caitlin P" to "Monette DeBaun Stransom", so the
     name gets the room it needs and the date drops beneath it rather than
     squeezing a long one into three stacked words. */
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 12px;padding-top:16px;border-top:1px solid var(--border-subtle);
}
.band-light .rv-card__who{border-top-color:var(--border-on-light)}
.rv-card__name{font-family:var(--font-display);font-size:var(--type-display-5);
  text-transform:uppercase;letter-spacing:var(--ls-heading);color:var(--text-primary)}
.rv-card__when{font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.rv-card__where{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--ocp-gold);
}
.band-light .rv-card__where{color:var(--ocp-gold-deep)}

/* The page shows twelve of the hundreds on file, so it says where the rest
   are and sends people straight to each studio's Google listing. */
.rv-more{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--border-subtle);
}
.band-light .rv-more{border-top-color:var(--border-on-light)}
.rv-more__label{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.rv-more__links{display:flex;flex-wrap:wrap;gap:8px 24px}
/* Deliberately text links, not buttons: the "Leave a review" buttons sit
   directly beneath with the same three studio names, and two rows of identical
   pills would read as one control repeated twice. */
.rv-more__link{
  display:inline-flex;align-items:baseline;gap:8px;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-secondary);text-decoration:none;
  border-bottom:1px solid var(--border-subtle);padding-bottom:3px;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.band-light .rv-more__link{color:var(--text-on-light-secondary);border-bottom-color:var(--border-on-light)}
.rv-more__link span{color:var(--ocp-gold);white-space:nowrap}
.band-light .rv-more__link span{color:var(--ocp-gold-deep)}
.rv-more__link:hover{color:var(--text-primary);border-bottom-color:var(--ocp-gold)}
.band-light .rv-more__link:hover{color:var(--text-on-light)}

@media (max-width:1000px){ .rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){
  .rv-grid{grid-template-columns:1fr}
  .rv-head{grid-template-columns:1fr;gap:20px}
  .rv-more{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ══════════════════════════════════════════════════════════════════════════
   8 · CHECKOUT — one page per pricing option, Arketa's checkout embedded
   Arketa serves the checkout without X-Frame-Options or a frame-ancestors
   policy, so it frames cleanly. Card entry stays on Arketa's origin; we only
   provide the surround. Every page also links out, because a payment step
   inside a frame can hit redirects (3-D Secure, wallet sheets) that need a
   top-level window.
   ══════════════════════════════════════════════════════════════════════════ */

.co-head{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:12px}
.co-price{text-align:right;white-space:nowrap}
.co-price__n{
  font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);line-height:.9;
  letter-spacing:var(--ls-display);color:var(--ocp-gold);display:block;
}
.co-price__unit{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.co-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}
.co-aside{position:sticky;top:112px;display:flex;flex-direction:column;gap:24px}
.co-panel{padding:var(--card-pad);border:1px solid var(--border-hairline);background:var(--surface-card)}
.co-panel h2{font-size:var(--type-display-5);margin:0 0 4px}

.co-frame{border:1px solid var(--border-hairline);overflow:hidden;background:#fff}
.co-frame iframe{display:block;width:100%;border:0;height:1080px}
.co-note{
  margin-top:16px;font-size:var(--type-body-sm);line-height:var(--lh-body);
  color:var(--text-muted);
}
.co-note a{color:var(--ocp-gold)}

@media (max-width:1000px){
  .co-layout{grid-template-columns:1fr;gap:36px}
  .co-aside{position:static;order:-1}
}
@media (max-width:640px){
  .co-head{grid-template-columns:1fr;gap:12px}
  .co-price{text-align:left}
  .co-frame iframe{height:1240px}
}


/* ══════════════════════════════════════════════════════════════════════════
   9 · COOKIE NOTICE
   A bar until a choice is made, then a panel you can reopen from the footer.
   Only one switch, because only one thing on this site is genuinely optional
   — see src/partials/cookie.html.
   ══════════════════════════════════════════════════════════════════════════ */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:16px;pointer-events:none}
.ck > *{pointer-events:auto}
.ck[hidden]{display:none}

.ck-bar{
  max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:20px 32px;padding:20px 24px;
  background:var(--ocp-black);border:1px solid var(--border-subtle);border-radius:10px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
}
.ck-bar[hidden]{display:none}
.ck-copy{flex:1 1 380px;min-width:0}
.ck-title{
  margin:0;font-family:var(--font-display);font-size:var(--type-display-5);
  letter-spacing:var(--ls-heading);text-transform:uppercase;color:var(--text-primary);
}
.ck-text{
  margin:6px 0 0;font:var(--fw-regular) var(--type-caption)/1.6 var(--font-body);
  color:var(--text-secondary);
}
.ck-text strong{color:var(--ocp-gold);font-weight:600}
.ck-actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}

.ck-panel{
  max-width:640px;margin:0 auto;max-height:min(80vh,720px);overflow-y:auto;
  padding:28px;background:var(--ocp-black);
  border:1px solid var(--border-subtle);border-radius:10px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
}
.ck-panel[hidden]{display:none}
.ck-panel__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ck-panel__title{
  margin:0;font-family:var(--font-display);font-size:var(--type-display-4);
  letter-spacing:var(--ls-heading);text-transform:uppercase;color:var(--text-primary);
}
.ck-close{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--border-subtle);border-radius:50%;
  color:var(--text-secondary);cursor:pointer;font-size:13px;
}
.ck-close:hover{border-color:var(--ocp-gold);color:var(--text-primary)}

.ck-group{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.ck-group__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ck-group__name{
  font-family:var(--font-display);font-size:var(--type-display-5);
  letter-spacing:var(--ls-heading);text-transform:uppercase;color:var(--text-primary);
}
.ck-group__state{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.ck-group__why{
  margin:10px 0 0;font:var(--fw-regular) var(--type-caption)/1.6 var(--font-body);
  color:var(--text-secondary);
}
.ck-list{
  margin:12px 0 0;padding-left:1.1em;
  font:var(--fw-regular) var(--type-caption)/1.6 var(--font-body);color:var(--text-secondary);
}
.ck-list li + li{margin-top:8px}
.ck-list code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  color:var(--ocp-gold);
}

/* The checkbox stays in the accessibility tree and keeps its focus ring; the
   track beside it is the part that is painted. */
.ck-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.ck-switch input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer}
.ck-switch__track{
  position:relative;width:44px;height:24px;flex:none;border-radius:999px;
  background:var(--surface-raised);border:1px solid var(--border-subtle);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.ck-switch__track::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--text-muted);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.ck-switch input:checked + .ck-switch__track{background:rgba(201,162,74,.28);border-color:var(--ocp-gold)}
.ck-switch input:checked + .ck-switch__track::after{transform:translateX(20px);background:var(--ocp-gold)}
.ck-switch input:focus-visible + .ck-switch__track{box-shadow:0 0 0 var(--focus-ring-width) rgba(233,201,119,.35)}
.ck-switch__label{
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);min-width:24px;
}

.ck-panel__foot{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--border-subtle);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.ck-clear{
  background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font:var(--fw-regular) var(--type-caption)/1.5 var(--font-body);
  color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;
}
.ck-clear:hover{color:var(--ocp-gold)}
.ck-clear:disabled{cursor:default;text-decoration:none;color:var(--ocp-gold)}

@media (max-width:760px){
  .ck{padding:10px}
  .ck-bar{padding:18px}
  .ck-actions{width:100%}
  .ck-actions .btn{flex:1 1 auto}
  .ck-panel{padding:22px}
}

/* Inline consent prompt over a video poster. */
.video__ask{
  position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;
  gap:14px;padding:24px;text-align:center;background:rgba(11,11,11,.92);
}
.video__ask p{
  margin:0;max-width:34ch;
  font:var(--fw-regular) var(--type-body-sm)/1.6 var(--font-body);color:var(--text-secondary);
}
.video__ask-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.video__ask-prefs{
  background:none;border:0;padding:0;cursor:pointer;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;
}
.video__ask-prefs:hover{color:var(--ocp-gold)}


/* ══════════════════════════════════════════════════════════════════════════
   10 · CLASS DESCRIPTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.cls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.cls{
  display:flex;flex-direction:column;
  border:1px solid var(--border-subtle);border-radius:10px;overflow:hidden;
  background:var(--surface-raised);
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.cls:hover{border-color:var(--ocp-gold);transform:translateY(var(--hover-lift))}
.cls__shot{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden}
.cls__shot img{width:100%;height:100%;object-fit:cover;display:block}
.cls__body{padding:28px 30px 32px;display:flex;flex-direction:column;gap:12px}
.cls__top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.cls__name{
  margin:0;font-family:var(--font-display);font-size:var(--type-display-4);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  text-transform:uppercase;color:var(--text-primary);
}
.cls__tag{
  margin:0;font-family:var(--font-display);font-size:var(--type-display-5);
  letter-spacing:var(--ls-heading);color:var(--ocp-gold);
}
.cls__copy{
  margin:0;font:var(--fw-regular) var(--type-body-sm)/1.7 var(--font-body);
  color:var(--text-secondary);
}
/* The Jumpboard contraindication. Loud enough not to be missed by someone
   scanning, because the cost of missing it is not a bad workout. */
.cls__note{
  margin:4px 0 0;padding:14px 16px;border-radius:8px;
  background:rgba(201,162,74,.09);border:1px solid var(--border-subtle);
  border-left:3px solid var(--ocp-gold);
  font:var(--fw-regular) var(--type-caption)/1.6 var(--font-body);color:var(--text-secondary);
}
.cls__note strong{color:var(--text-primary)}
.cls__note a{color:var(--ocp-gold);text-underline-offset:3px}

@media (max-width:900px){
  .cls-grid{grid-template-columns:1fr;gap:28px}
  .cls__body{padding:24px 22px 26px}
}


/* ══════════════════════════════════════════════════════════════════════════
   11 · MEGA MENU
   Panels open on :hover and :focus-within, so the whole menu works with
   JavaScript off. The .is-open class is only used by the touch handler and
   by Escape — CSS is the source of truth for everything else.
   ══════════════════════════════════════════════════════════════════════════ */
.nav-item{position:relative;display:flex;align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:6px;padding:8px 0}
/* The chevron is decorative and rotates when the panel is up. */
.nav-top::after{
  content:"";width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);opacity:.55;
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.nav-item:hover .nav-top::after,
.nav-item:focus-within .nav-top::after,
.nav-item.is-open .nav-top::after{transform:rotate(225deg) translate(-2px,-2px);opacity:1}

.mega{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:320px;padding-top:14px;z-index:60;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),visibility var(--dur-fast);
}
.mega--wide{min-width:620px}
.nav-item:hover .mega,
.nav-item:focus-within .mega,
.nav-item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}

.mega__in{
  display:grid;gap:4px;padding:14px;
  background:var(--ocp-black);border:1px solid var(--border-subtle);border-radius:10px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.9);
}
.mega__in--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.mega__link{
  display:grid;gap:3px;padding:12px 14px;border-radius:7px;
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out);
}
.mega__link:hover,.mega__link:focus-visible{background:rgba(201,162,74,.12)}
.mega__name{
  font-family:var(--font-display);font-size:var(--type-display-5);
  letter-spacing:var(--ls-heading);text-transform:uppercase;color:var(--text-primary);
  line-height:1.15;
}
.mega__link:hover .mega__name,.mega__link:focus-visible .mega__name{color:var(--ocp-gold)}
.mega__note{
  font:var(--fw-regular) var(--type-caption)/1.45 var(--font-body);color:var(--text-muted);
}

/* Grouped mobile drawer. */
.drawer-head{
  display:block;margin-top:22px;
  font:var(--text-style-eyebrow);letter-spacing:var(--ls-eyebrow-wide);
  text-transform:uppercase;color:var(--ocp-gold);
}
.drawer-head:first-child{margin-top:0}
.nav-drawer a{padding-left:2px}

/* Below the desktop breakpoint the panels never open — the drawer takes over,
   so they must not linger as invisible click targets. */
@media (max-width:1100px){
  .mega{display:none}
  .nav-top::after{display:none}
}