/* ============================================================
   K1K9 · Inspiring Doctrine · VI.2 grammar
   Silent Rolls-Royce grammar. General Sans thin.
   Three colors only: charcoal, off-white, image.
   Photo panel + black text panel, never overlaid.
   ============================================================ */

:root{
  --bg:#0a0a0a;
  --bg-2:#111110;
  --paper:#f0ede4;
  --paper-dim:rgba(240,237,228,0.72);
  --paper-faint:rgba(240,237,228,0.42);
  --paper-ghost:rgba(240,237,228,0.22);
  --hair:rgba(240,237,228,0.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  background:var(--bg);
  color:var(--paper);
  font-family:'General Sans','Helvetica Neue',Arial,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.01em;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ============================================================
   NAV
   ============================================================ */
nav.top{
  position:fixed;
  top:0;left:0;right:0;
  padding:26px 40px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  z-index:100;
  background:linear-gradient(180deg,rgba(10,10,10,0.6),transparent);
  color:var(--paper);
}
nav.top.solid{
  background:var(--bg);
  border-bottom:1px solid var(--hair);
}
nav.top a{
  color:var(--paper);
  font-size:11px;
  font-weight:400;
  letter-spacing:0.28em;
  text-transform:uppercase;
  transition:opacity 0.3s;
}
nav.top a:hover{opacity:0.6}
nav.top .left{justify-self:start;display:flex;align-items:center;gap:24px}
nav.top .right{justify-self:end;display:flex;align-items:center;gap:24px}
nav.top .brand{
  font-family:'General Sans',sans-serif;
  font-weight:300;
  font-size:20px;
  letter-spacing:0.35em;
  color:var(--paper);
  text-transform:none;
}
nav.top .brand:hover{opacity:1}

/* Quiet US-CSOG red — seamless brand tie.
   Applied only to: wordmark digits (.rd), hero kickers, hero H1 operative word (.r). */
:root{--csog-red:#c8102e}

/* Wordmark: red digits 1 and 9 inside K1K9.
   Universal — applies everywhere the brand appears (nav, footer,
   hero, body copy, headings, doctrine papers, everything).
   The digits are the silent brand imprint in every reader's mind. */
.rd{
  color:var(--csog-red);
  font-weight:500;
}

/* Red operative word inside a hero H1. One per page, static.
   Same US-CSOG red — recurring signature, not decoration. */
h1 .r,h2 .r,.gate-tercet .r{color:var(--csog-red)}

/* Weight-only emphasis inside a hero H1. Same color, same font, same size.
   Reveals mirror structure (e.g. "specialist ... specialist") without shouting. */
h1 .spec{font-weight:600}
nav.top .menu-toggle{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:none;border:0;color:var(--paper);
  font-size:11px;font-weight:400;letter-spacing:0.28em;text-transform:uppercase;
}
nav.top .menu-toggle .icon{
  display:inline-flex;flex-direction:column;gap:5px;
}
nav.top .menu-toggle .icon span{width:20px;height:1px;background:var(--paper)}

/* ============================================================
   OVERLAY MENU
   ============================================================ */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--bg);
  padding:120px 60px 60px;
  transform:translateY(-100%);
  transition:transform 0.5s cubic-bezier(0.65,0,0.35,1);
  overflow-y:auto;
}
.menu-overlay.open{transform:translateY(0)}
.menu-overlay .close-btn{
  position:absolute;top:26px;right:40px;
  background:none;border:0;color:var(--paper);cursor:pointer;
  font-size:11px;letter-spacing:0.28em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;
}
.menu-overlay .close-btn .x{
  display:inline-block;width:20px;height:20px;position:relative;
}
.menu-overlay .close-btn .x::before,
.menu-overlay .close-btn .x::after{
  content:"";position:absolute;top:9px;left:0;width:20px;height:1px;background:var(--paper);
}
.menu-overlay .close-btn .x::before{transform:rotate(45deg)}
.menu-overlay .close-btn .x::after{transform:rotate(-45deg)}
.menu-overlay .grid{
  max-width:1400px;margin:60px auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:60px 80px;
}
@media(min-width:1100px){
  .menu-overlay .grid{grid-template-columns:repeat(4, 1fr);gap:50px 60px;}
}
.menu-overlay .col-label{
  font-size:13px;letter-spacing:0.42em;text-transform:uppercase;font-weight:600;
  color:var(--paper);margin-bottom:32px;
  padding-bottom:16px;border-bottom:1px solid var(--hair);
}
.menu-overlay .col-label .rd{color:var(--csog-red);font-weight:700}
.menu-overlay ul{list-style:none}
.menu-overlay ul li{margin-bottom:22px}
.menu-overlay ul li a{
  font-family:'General Sans',sans-serif;
  font-weight:200;
  font-size:32px;
  letter-spacing:0.02em;
  color:var(--paper);
  text-transform:uppercase;
  transition:opacity 0.3s;
  display:inline-block;
}
.menu-overlay ul li a:hover{opacity:0.6}
.menu-overlay ul li.gated a::after{
  content:" · By Invitation";
  font-size:10px;letter-spacing:0.4em;
  color:var(--paper-ghost);vertical-align:middle;
  margin-left:8px;
}

/* ============================================================
   HERO (only place text overlays image, with dark gradient)
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:#000;
}
.hero .backdrop{position:absolute;inset:0;z-index:1}
.hero .backdrop img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 78%;
  filter:brightness(0.72) contrast(1.05) saturate(0.85);
}
.hero .backdrop::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,0.55) 0%,rgba(10,10,10,0.1) 30%,rgba(10,10,10,0.2) 55%,rgba(10,10,10,0.92) 100%);
}
.hero .content{
  position:relative;z-index:2;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;padding:140px 40px 90px;
}
.hero .seq{
  position:absolute;top:110px;left:50%;transform:translateX(-50%);
  z-index:3;font-size:10px;letter-spacing:0.5em;color:var(--paper-dim);
  text-transform:uppercase;
}
.hero .kicker{
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper);margin-bottom:32px;
}
.hero h1{
  font-family:'General Sans',sans-serif;
  font-weight:200;
  font-size:clamp(36px,5.5vw,84px);
  line-height:1.05;letter-spacing:0.02em;text-transform:none;
  color:var(--paper);margin-bottom:36px;max-width:1100px;
  text-shadow:0 4px 24px rgba(0,0,0,0.5);
}
.hero .body{
  font-size:15px;line-height:1.85;max-width:680px;
  color:var(--paper);margin-bottom:36px;font-weight:300;
}
/* The quiet-yell line — small, letter-spaced, sits under the body copy */
.hero .doctrine-line{
  font-size:11px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--paper-dim);
  max-width:640px;
  line-height:2;
  padding-top:24px;
  border-top:1px solid var(--paper-ghost);
  margin-bottom:8px;
}
.hero .doctrine-attr{
  font-size:10px;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--paper-faint);
  font-weight:300;
  margin-bottom:44px;
}
/* Trademark superscript — small, quiet, sits above the baseline */
sup.tm{
  font-size:0.85em;
  vertical-align:0.4em;
  letter-spacing:0;
  margin-left:2px;
  color:var(--paper-muted);
  font-weight:400;
  opacity:1;
}
.hero .scroll-hint{
  font-size:9px;letter-spacing:0.55em;color:var(--paper-dim);
  text-transform:uppercase;text-align:center;
}
.hero .scroll-hint::after{
  content:"";display:block;width:1px;height:36px;background:var(--paper-faint);
  margin:14px auto 0;animation:drop 2s ease-in-out infinite;
}
@keyframes drop{0%,100%{opacity:0.2;transform:scaleY(0.5) translateY(-8px)}50%{opacity:1;transform:scaleY(1) translateY(0)}}

/* ============================================================
   PAGE HERO (small hero for interior pages — no image)
   ============================================================ */
.page-hero{
  padding:180px 40px 100px;
  text-align:center;
  border-bottom:1px solid var(--hair);
}
.page-hero .kicker{
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper-faint);margin-bottom:32px;
}
.page-hero h1{
  font-family:'General Sans',sans-serif;
  font-weight:200;
  font-size:clamp(44px,7vw,104px);
  line-height:0.95;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--paper);margin-bottom:36px;
}
.page-hero .body{
  font-size:16px;line-height:1.9;max-width:640px;margin:0 auto;
  color:var(--paper-dim);font-weight:300;
}

/* ============================================================
   SPLIT CHAPTER (photo top, black text panel below)
   ============================================================ */
.split-chapter{background:var(--bg);display:grid;grid-template-rows:auto auto}
.split-chapter .photo{
  position:relative;height:78vh;min-height:560px;overflow:hidden;background:#000;
}
.split-chapter .photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 40%;
  display:block;
}
/* Per-photo focal points — verified visually against each image.
   Format: object-position: X Y  (X = horizontal, Y = vertical).
   Higher Y% = show more of the bottom of the image.
   Higher X% = show more of the right side. */

/* Pack of 9 K9s in bottom third against dramatic sky. Pull hard down to keep the pack. */
.split-chapter .photo img[src*="hero-doctrine"]{object-position:50% 82%}

/* The Standard hero: cinematic 16:9 outpainted editorial.
   Native 1672x941 (16:9). Break out to full viewport width and lock the
   panel to 16:9 so the image fills edge-to-edge with everything visible. */
.split-chapter:has(img[src*="the-standard-hero"]){
  background:#000;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  max-width:100vw;
}
.split-chapter .photo:has(img[src*="the-standard-hero"]){
  width:100vw;
  height:auto;
  min-height:0;
  aspect-ratio:21/9;
  max-height:none;
  background:#000;
}
.split-chapter .photo img[src*="the-standard-hero"]{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
}

/* HDR wall portrait: two Giant Schnauzers stacked, heads at upper-third. */
.split-chapter .photo img[src*="winter-approach"]{object-position:50% 50%}

/* Bred Not Selected: five Giants across the sand + handler/muzzled dog in the sky.
   Native image is 1672×941 (16:9). Force the section to true 100vw (breaking
   any body/scrollbar constraint) and lock the panel to that same 16:9 aspect
   so the image fills edge-to-edge with the full composition visible. */
.split-chapter:has(img[src*="bred-not-selected-pack"]){
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  max-width:100vw;
}
.split-chapter .photo:has(img[src*="bred-not-selected-pack"]){
  width:100vw;
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  max-height:none;
}
.split-chapter .photo img[src*="bred-not-selected-pack"]{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Atelier: K9 lying on marble floor bottom-right. Joseph standing left. */
.split-chapter .photo img[src*="atelier-marble"]{object-position:50% 50%}

/* Private jet: K9 left-center, Joseph right-center. K9 is the subject. */
.split-chapter .photo img[src*="private-jet"]{object-position:50% 60%}

/* Three K9s sitting in autumn park. Centered and slightly high. */
.split-chapter .photo img[src*="trio-fall"]{object-position:50% 60%}

/* Founder Hero B: Joseph in KILO1 kit + Giant Schnauzer, direct-address portrait.
   Face and Giant's head are in the upper third — pull crop up. */
.split-chapter .photo img[src*="hallway-approach"]{object-position:50% 22%}

/* City portrait: single K9 head-and-shoulders. Face is upper half. */
.split-chapter .photo img[src*="portrait-city"]{object-position:50% 50%}

/* Founder pack: hero K9 profile left, pack receding right. */
.split-chapter .photo img[src*="founder-pack"]{object-position:30% 50%}
.split-chapter .photo img[src*="founder-prison"]{object-position:50% 50%}

/* The Standard hero: Joseph + Giant walking Montana valley, mountains + evening sky.
   Handler right-center, Giant at hip lower-center. Keep both faces + sky drama. */
/* (consolidated above) */

/* Only Proven hero: three Giants foreground on barrels, CSO stack + kevlar K9 recessed left.
   Keep three-Giant line + left-rear working scene both readable. */
.split-chapter .photo img[src*="only-proven-hero"]{object-position:40% 55%}
.split-chapter .photo .caption{
  position:absolute;left:40px;bottom:32px;z-index:3;
  color:var(--paper);
  font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  padding:10px 16px;background:rgba(10,10,10,0.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-left:1px solid rgba(240,237,228,0.4);
}
.split-chapter .panel{
  background:var(--bg);padding:120px 40px 140px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.split-chapter .panel .seq-line{
  display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:40px;
}
.split-chapter .panel .seq-line .rule{width:60px;height:1px;background:var(--paper-faint)}
.split-chapter .panel .seq-line .seq{
  font-size:10px;letter-spacing:0.55em;text-transform:uppercase;color:var(--paper-faint);
}
.split-chapter .panel .kicker{
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper-dim);margin-bottom:32px;
}
.split-chapter .panel h2{
  font-family:'General Sans',sans-serif;
  font-weight:200;
  font-size:clamp(44px,6.5vw,96px);
  line-height:1;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--paper);max-width:1100px;margin-bottom:44px;
}
.split-chapter .panel .body{
  font-size:16px;line-height:1.9;max-width:620px;
  color:var(--paper-dim);font-weight:300;margin-bottom:48px;
}
.split-chapter .panel .read-more{
  display:inline-flex;align-items:center;gap:14px;
  color:var(--paper);
  font-size:10px;letter-spacing:0.5em;text-transform:uppercase;
  font-weight:400;padding-bottom:8px;
  border-bottom:1px solid var(--paper-faint);
  transition:border-color 0.3s;
}
.split-chapter .panel .read-more:hover{border-color:var(--paper);opacity:1}
.split-chapter .panel .read-more .arrow{
  width:24px;height:1px;background:var(--paper);position:relative;
  transition:width 0.3s;
}
.split-chapter .panel .read-more:hover .arrow{width:36px}
.split-chapter .panel .read-more .arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;
  border-right:1px solid var(--paper);border-top:1px solid var(--paper);
  transform:rotate(45deg);
}

/* ============================================================
   DOCTRINE PROSE (two-column, all black)
   ============================================================ */
.doctrine{
  background:var(--bg);padding:160px 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  max-width:1400px;margin:0 auto;align-items:start;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.doctrine .col-label{
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper-faint);margin-bottom:32px;
}
.doctrine .col-title{
  font-family:'General Sans',sans-serif;
  font-weight:200;
  font-size:clamp(40px,4.5vw,72px);
  line-height:1.05;letter-spacing:0.02em;text-transform:uppercase;
  margin-bottom:36px;color:var(--paper);
}
.doctrine .col-body{font-size:15px;line-height:2;color:var(--paper-dim)}
.doctrine .col-body p{margin-bottom:22px}

/* Single-column prose */
.prose-block{
  background:var(--bg);padding:120px 40px;
  max-width:820px;margin:0 auto;
  font-size:16px;line-height:2;color:var(--paper-dim);
}
.prose-block p{margin-bottom:24px}
.prose-block h3{
  font-family:'General Sans',sans-serif;font-weight:200;
  font-size:32px;letter-spacing:0.03em;text-transform:uppercase;
  color:var(--paper);margin-top:56px;margin-bottom:24px;
}
.prose-block h3:first-child{margin-top:0}

/* Story block — origin narrative, single-column, with chapter marker */
.story-block{
  background:var(--bg);padding:140px 40px 120px;
  max-width:780px;margin:0 auto;
  font-size:17px;line-height:1.9;color:var(--paper-dim);
  border-top:1px solid var(--hair);
}
.story-block .seq-line{
  display:flex;align-items:center;gap:16px;
  margin-bottom:24px;justify-content:center;
}
.story-block .seq-line .rule{width:60px;height:1px;background:var(--paper-faint)}
.story-block .seq-line .seq{
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper-faint);
}
.story-block .kicker{
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper-faint);text-align:center;margin-bottom:32px;
}
.story-block h2{
  font-family:'General Sans',sans-serif;font-weight:200;
  font-size:clamp(36px,5vw,64px);letter-spacing:-0.01em;line-height:1.05;
  color:var(--paper);text-align:center;margin-bottom:64px;
  text-transform:none;
}
.story-block p{margin-bottom:26px}
.story-block p.opener{
  font-size:20px;line-height:1.7;color:var(--paper);
  font-weight:300;margin-bottom:36px;
}
.story-block p.close{
  font-size:19px;line-height:1.7;color:var(--paper);
  font-weight:300;margin-top:40px;padding-top:36px;
  border-top:1px solid var(--hair);
}
.story-block p.close em{
  display:block;text-align:center;
  font-style:italic;font-weight:400;
  font-size:22px;letter-spacing:0.04em;
  color:var(--paper);
  padding:8px 0;
}

/* ============================================================
   THE SIGNAL — four facts, no quotes.
   Repeat-purchase, reservation, corporate, international reach.
   Doctrine credibility — the strongest proof block on the site.
   ============================================================ */
.signal{
  background:#0a0a0a;
  padding:160px 40px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.signal-head{
  text-align:center;
  max-width:820px;margin:0 auto 80px;
}
.signal-head .kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:400;letter-spacing:0.32em;
  text-transform:uppercase;color:var(--paper-dim);
  margin-bottom:32px;
}
.signal-head h2{
  font-family:var(--serif);
  font-size:clamp(36px,4.2vw,54px);
  font-weight:400;line-height:1.1;letter-spacing:-0.015em;
  color:var(--paper);margin:0 0 20px;
}
.signal-head .lede{
  font-family:var(--serif);
  font-size:18px;font-weight:400;font-style:italic;
  color:var(--paper-dim);margin:0;
}
.signal-list{
  list-style:none;padding:0;
  max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;
}
.signal-list li{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:40px;align-items:baseline;
  padding:44px 0;
  border-top:1px solid var(--hair);
}
.signal-list li:last-child{
  border-bottom:1px solid var(--hair);
}
.s-num{
  font-family:'General Sans',sans-serif;
  font-size:13px;font-weight:400;letter-spacing:0.28em;
  color:var(--csog-red);
  font-variant-numeric:tabular-nums;
}
.s-fact{
  font-family:var(--serif);
  font-size:clamp(20px,1.9vw,26px);
  font-weight:400;line-height:1.4;letter-spacing:-0.005em;
  color:var(--paper);margin:0;
}
.s-fact strong{
  font-weight:500;color:var(--paper);
}
@media (max-width:820px){
  .signal{padding:100px 24px}
  .signal-head{margin-bottom:56px}
  .signal-list li{
    grid-template-columns:1fr;gap:12px;padding:36px 0;
  }
}

/* ============================================================
   THREE DISCIPLINES — Genetics / Kinetics / Counter-Aggression.
   Vertical stack. Doctrine spine of the K1K9 program.
   ============================================================ */
.pillars{
  max-width:1240px;margin:0 auto;
  padding:120px 40px 100px;
  border-top:1px solid var(--hair);
}
.pillars-head{
  text-align:center;
  margin-bottom:84px;
}
.pillars-head .kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper-dim);margin-bottom:24px;
}
.pillars-head h2{
  font-family:var(--serif);
  font-size:clamp(32px,4.2vw,54px);
  font-weight:400;line-height:1.15;letter-spacing:-0.01em;
  color:var(--paper);margin:0 0 20px;
}
.pillars-head .lede{
  font-family:var(--serif);
  font-size:clamp(16px,1.3vw,19px);
  font-weight:400;font-style:italic;line-height:1.5;
  color:var(--paper-dim);
  max-width:640px;margin:0 auto;
}

/* Three Disciplines — mirrors Four Beats treatment */
.pillars-steps{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
.pillars-steps li{
  position:relative;
  padding:0 24px;
  text-align:center;
  z-index:1;
}
/* Red-outlined numbered badge — hollow center, white text */
.pillars-steps li .num{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:82px;height:82px;
  background:transparent;
  border:2px solid var(--csog-red);
  color:var(--paper);
  font-family:'General Sans',sans-serif;
  font-size:13px;font-weight:700;
  letter-spacing:0.3em;text-transform:uppercase;
  margin:0 auto 32px;
  position:relative;
  transition:transform .35s ease;
}
.pillars-steps li:hover .num{
  transform:scale(1.06);
}
.pillars-steps li .pillar-title{
  font-family:'General Sans',sans-serif;
  font-size:28px;font-weight:600;letter-spacing:0.02em;
  color:var(--paper);margin-bottom:20px;
  text-transform:uppercase;
  line-height:1.1;
}
.pillars-steps li .pillar-title::after{
  content:'';display:block;
  width:44px;height:3px;
  background:var(--csog-red);
  margin:16px auto 0;
}
.pillars-steps li p{
  font-size:14px;line-height:1.7;color:var(--paper-dim);
  font-weight:300;margin:0 auto 20px;
  max-width:260px;
}
.pillars-steps li .pillar-close{
  font-family:var(--serif);
  font-size:16px;font-weight:400;font-style:italic;
  color:var(--paper);
  margin:0 auto;
  max-width:260px;
}
@media (max-width:900px){
  .pillars{padding:80px 24px 60px}
  .pillars-steps{grid-template-columns:1fr;gap:56px}
  .pillars-steps li{padding:0}
  .pillars-steps li .num{width:64px;height:64px;font-size:12px;margin-bottom:24px}
  .pillars-steps li .pillar-title{font-size:22px}
  .pillars-head{margin-bottom:56px}
}

/* ============================================================
   MENTOR BANNER — full-width editorial statement, no imagery.
   Reads like a title card across the homepage. Cinema, not brochure.
   ============================================================ */
.mentor-banner{
  background:#050505;
  padding:180px 40px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  display:flex;justify-content:center;
}
.mentor-banner .mb-inner{
  max-width:960px;
  width:100%;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  gap:48px;
}
.mentor-banner .mb-kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.44em;
  text-transform:uppercase;font-weight:400;
  color:var(--rd);
}
.mentor-banner .mb-headline{
  font-family:var(--serif);
  font-size:clamp(32px,4.4vw,58px);
  line-height:1.15;letter-spacing:-0.015em;
  font-weight:300;
  color:var(--paper);
  margin:0;
  max-width:900px;
}
.mentor-banner .mb-headline em{
  font-style:italic;
  color:var(--rd);
  font-weight:300;
  padding-right:0.12em;
}
.mentor-banner .mb-rule{
  width:120px;height:1px;
  background:var(--rd);
  opacity:0.55;
}
.mentor-banner .mb-arc{
  display:flex;align-items:center;justify-content:center;
  gap:28px;flex-wrap:wrap;
  font-family:'General Sans',sans-serif;
  font-size:12px;letter-spacing:0.5em;
  text-transform:uppercase;
  color:var(--paper);
}
.mentor-banner .mb-dot{
  color:var(--rd);opacity:0.8;letter-spacing:0;
}
.mentor-banner .mb-body{
  font-family:'General Sans',sans-serif;
  font-size:15px;line-height:1.75;
  color:var(--paper-dim);
  max-width:680px;
  margin:0;
  font-style:italic;
  font-weight:300;
}
.mentor-banner .mb-close{
  font-family:var(--serif);
  font-size:clamp(20px,2.4vw,30px);
  line-height:1.4;
  color:var(--paper);
  max-width:780px;
  margin:0;
  font-style:italic;
  font-weight:400;
}
.mentor-banner .mb-close .mb-red{
  color:var(--rd);
  font-style:normal;
}
.mentor-banner .mb-sig{
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--paper-dim);
  font-weight:300;
}
@media (max-width:900px){
  .mentor-banner{padding:110px 24px}
  .mentor-banner .mb-inner{gap:36px}
  .mentor-banner .mb-arc{gap:16px;font-size:11px;letter-spacing:0.36em}
}

/* ============================================================
   MANIFESTO STRIP — three lines under the hero.
   Doctrine signals, restrained. Serif, quiet, hairline rules.
   ============================================================ */
.manifesto-strip{
  background:#0a0a0a;
  padding:120px 40px;
  display:flex;flex-direction:column;align-items:center;
  gap:60px;
}
.manifesto-strip .m-line{
  font-family:var(--serif);
  font-size:clamp(24px,3vw,38px);
  font-weight:400;line-height:1.25;letter-spacing:-0.01em;
  color:var(--paper);text-align:center;
  max-width:820px;
}
.manifesto-strip .m-line .quiet{
  display:inline-block;margin-top:14px;
  font-family:'General Sans',sans-serif;
  font-size:13px;font-weight:300;letter-spacing:0.32em;
  text-transform:uppercase;color:var(--paper-dim);
}
.manifesto-strip .m-rule{
  width:80px;height:1px;background:var(--hair);
}
@media (max-width:900px){
  .manifesto-strip{padding:80px 24px;gap:44px}
}

/* ============================================================
   PRESENCE — doctrine block between Signal and Chapter I.
   Pull-quote lead, prose body, hairline frame. Quiet, heavy.
   ============================================================ */
.presence{
  background:#050505;
  padding:140px 40px;
  display:flex;justify-content:center;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.presence .p-inner{
  max-width:820px;
  display:flex;flex-direction:column;gap:44px;
}
.presence .p-kicker{
  font-family:'General Sans',sans-serif;
  font-size:12px;font-weight:400;
  letter-spacing:0.34em;text-transform:uppercase;
  color:var(--paper-dim);text-align:center;
}
.presence .p-lead{
  font-family:var(--serif);
  font-size:clamp(28px,3.4vw,44px);
  font-weight:400;line-height:1.22;letter-spacing:-0.015em;
  color:var(--paper);text-align:center;
  max-width:720px;margin:0 auto;
}
.presence .p-lead em{
  font-style:italic;color:var(--paper);
}
.presence .p-rule{
  width:60px;height:1px;background:var(--hair);
  margin:0 auto;
}
.presence .p-body{
  font-family:'General Sans',sans-serif;
  font-size:17px;font-weight:300;line-height:1.72;
  color:var(--paper);letter-spacing:0.005em;
  max-width:680px;margin:0 auto;
}
.presence .p-body p{
  margin:0 0 22px 0;
}
.presence .p-body p:last-child{margin-bottom:0}
.presence .p-close{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px,2.4vw,30px);
  font-weight:400;line-height:1.3;
  color:var(--paper);text-align:center;
  max-width:640px;margin:0 auto;
}
@media (max-width:900px){
  .presence{padding:90px 24px}
  .presence .p-inner{gap:32px}
  .presence .p-body{font-size:16px;line-height:1.7}
}

/* ============================================================
   FOUNDATION — who runs this program.
   Kicker → lead statement → three-block prose → signature line.
   ============================================================ */
.foundation{
  background:#0a0a0a;
  padding:140px 40px;
  display:flex;justify-content:center;
}
.foundation .f-inner{
  max-width:900px;width:100%;
  display:flex;flex-direction:column;gap:56px;
}
.foundation .f-head{
  text-align:center;
  display:flex;flex-direction:column;gap:24px;
  align-items:center;
}
.foundation .f-kicker{
  font-family:'General Sans',sans-serif;
  font-size:12px;font-weight:400;
  letter-spacing:0.34em;text-transform:uppercase;
  color:var(--paper-dim);
}
.foundation .f-title{
  font-family:var(--serif);
  font-size:clamp(36px,4.4vw,58px);
  font-weight:400;line-height:1.1;letter-spacing:-0.02em;
  color:var(--paper);
  max-width:760px;margin:0;
}
.foundation .f-title em{font-style:italic}
.foundation .f-rule{
  width:60px;height:1px;background:var(--hair);
  margin:0 auto;
}
.foundation .f-block{
  max-width:720px;margin:0 auto;
  display:flex;flex-direction:column;gap:14px;
}
.foundation .f-block .f-sub{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--csog-red);
}
.foundation .f-block .f-body{
  font-family:'General Sans',sans-serif;
  font-size:17px;font-weight:300;line-height:1.72;
  color:var(--paper);letter-spacing:0.005em;
}
.foundation .f-block .f-body em{
  font-style:italic;
}
.foundation .f-sig{
  max-width:720px;margin:16px auto 0;
  padding-top:32px;
  border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:6px;
  text-align:center;
}
.foundation .f-sig-name{
  font-family:var(--serif);
  font-size:22px;font-weight:400;letter-spacing:-0.01em;
  color:var(--paper);
}
.foundation .f-sig-title{
  font-family:'General Sans',sans-serif;
  font-size:12px;font-weight:400;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--paper-dim);
}
@media (max-width:900px){
  .foundation{padding:90px 24px}
  .foundation .f-inner{gap:44px}
  .foundation .f-block .f-body{font-size:16px;line-height:1.7}
}

/* ============================================================
   DOCTRINE CALLOUT — short statement + link to full paper
   ============================================================ */
.doctrine-callout{
  background:var(--bg);
  padding:110px 40px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.doctrine-callout .dc-inner{
  max-width:820px;margin:0 auto;
  text-align:center;
  display:flex;flex-direction:column;gap:32px;align-items:center;
}
.doctrine-callout .dc-kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--csog-red);
}
.doctrine-callout .dc-title{
  font-family:var(--serif);
  font-size:clamp(28px,4.2vw,42px);
  font-weight:400;line-height:1.18;letter-spacing:-0.015em;
  color:var(--paper);margin:0;
  max-width:720px;
}
.doctrine-callout .dc-title em{
  font-style:italic;color:var(--csog-red);
}
.doctrine-callout .dc-body{
  font-family:'General Sans',sans-serif;
  font-size:17px;font-weight:300;line-height:1.72;
  color:var(--paper-dim);letter-spacing:0.005em;
  margin:0;max-width:680px;
}
.doctrine-callout .dc-link{
  font-family:'General Sans',sans-serif;
  font-size:12px;font-weight:500;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;
  display:inline-flex;align-items:center;gap:16px;
  padding-top:20px;border-top:1px solid var(--hair);
  transition:color .2s ease;
}
.doctrine-callout .dc-link:hover{color:var(--csog-red)}
.doctrine-callout .dc-link .rule{
  display:inline-block;width:48px;height:1px;background:currentColor;
}
@media (max-width:900px){
  .doctrine-callout{padding:80px 24px}
  .doctrine-callout .dc-body{font-size:16px;line-height:1.7}
}

/* ============================================================
   PATH TO PLACEMENT — four-beat process strip
   ============================================================ */
.path{
  max-width:1240px;margin:0 auto;
  padding:120px 40px 100px;
}
.path-head{text-align:center;margin-bottom:84px}
.path-head .kicker{
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper-dim);margin-bottom:24px;
}
.path-head h2{
  font-family:var(--serif);
  font-size:clamp(32px,4.2vw,54px);
  font-weight:400;line-height:1.15;letter-spacing:-0.01em;
  color:var(--paper);
}
.path-steps{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
  counter-reset:none;
}
/* Connecting line removed — badges stand alone */
.path-steps li{
  position:relative;
  padding:0 16px;
  text-align:center;
  z-index:1;
}
/* Red-outlined numbered badge — hollow center, white text */
.path-steps li .num{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:82px;height:82px;
  background:transparent;
  border:2px solid var(--csog-red);
  color:var(--paper);
  font-family:'General Sans',sans-serif;
  font-size:13px;font-weight:700;
  letter-spacing:0.3em;text-transform:uppercase;
  margin:0 auto 32px;
  position:relative;
  transition:transform .35s ease;
}
.path-steps li:hover .num{
  transform:scale(1.06);
}
.path-steps li .step-title{
  font-family:'General Sans',sans-serif;
  font-size:34px;font-weight:600;letter-spacing:0.02em;
  color:var(--paper);margin-bottom:20px;
  text-transform:uppercase;
  line-height:1;
}
.path-steps li .step-title::after{
  content:'';display:block;
  width:44px;height:3px;
  background:var(--csog-red);
  margin:16px auto 0;
}
.path-steps li p{
  font-size:14px;line-height:1.7;color:var(--paper-dim);
  font-weight:300;margin:0;
  max-width:230px;margin-left:auto;margin-right:auto;
}
@media (max-width:900px){
  .path{padding:80px 24px 60px}
  .path-steps{grid-template-columns:1fr;gap:56px}
  .path-steps::before{display:none}
  .path-steps li{padding:0}
  .path-steps li .num{width:64px;height:64px;font-size:12px;margin-bottom:24px}
  .path-steps li .step-title{font-size:26px}
  .path-head{margin-bottom:56px}
}

/* ============================================================
   END REEL
   ============================================================ */
.end-reel{
  background:var(--bg);padding:180px 40px;text-align:center;
  border-top:1px solid var(--hair);
}
.end-reel .kicker{
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  color:var(--paper-faint);margin-bottom:40px;
}
.end-reel h2{
  font-family:'General Sans',sans-serif;
  font-weight:200;
  font-size:clamp(40px,6vw,96px);
  line-height:1;letter-spacing:0.03em;text-transform:uppercase;
  max-width:1000px;margin:0 auto 56px;color:var(--paper);
}
.end-reel .lines{
  font-size:11px;letter-spacing:0.45em;text-transform:uppercase;
  color:var(--paper-dim);line-height:2.6;
}
.end-reel .lines strong{color:var(--paper);font-weight:400}
.end-reel .cta{
  display:inline-flex;align-items:center;gap:16px;margin-top:48px;
  padding-bottom:10px;border-bottom:1px solid var(--paper-faint);
  color:var(--paper);
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;font-weight:400;
  transition:border-color 0.3s;
}
.end-reel .cta:hover{border-color:var(--paper);opacity:1}
.end-reel .cta .rule{width:32px;height:1px;background:currentColor;display:inline-block}

/* ============================================================
   FORM (Enquire)
   ============================================================ */
.form-block{
  background:var(--bg);padding:80px 40px 160px;
  max-width:640px;margin:0 auto;
}
.form-block .field{margin-bottom:32px}
.form-block label{
  display:block;
  font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--paper-dim);margin-bottom:12px;
}
.form-block input,
.form-block textarea{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--paper-faint);
  padding:14px 0;
  color:var(--paper);
  font-family:'General Sans',sans-serif;
  font-weight:300;font-size:16px;letter-spacing:0.02em;
  outline:none;transition:border-color 0.3s;
}
.form-block input:focus,
.form-block textarea:focus{border-bottom-color:var(--paper)}
.form-block textarea{resize:vertical;min-height:120px}
.form-block .submit{
  display:inline-flex;align-items:center;gap:16px;margin-top:24px;
  padding:14px 0;background:transparent;border:0;
  border-bottom:1px solid var(--paper-faint);cursor:pointer;
  color:var(--paper);
  font-family:'General Sans',sans-serif;font-weight:400;
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  transition:border-color 0.3s;
}
.form-block .submit:hover{border-bottom-color:var(--paper)}
.form-block .submit .rule{width:32px;height:1px;background:currentColor;display:inline-block}
.form-block .privacy-note{
  margin-top:48px;font-size:11px;line-height:2;letter-spacing:0.04em;
  color:var(--paper-ghost);text-align:center;
}
/* Form note above the fields */
.form-block .form-note{
  margin:0 0 40px;padding:16px 20px;
  border-left:2px solid var(--rd);
  background:rgba(200,16,46,0.04);
  font-family:'General Sans',sans-serif;font-weight:300;
  font-size:14px;line-height:1.55;letter-spacing:0.01em;
  color:var(--paper);
}
/* Required / optional label markers */
.form-block label .req{color:var(--rd);font-weight:500;margin-left:4px}
.form-block label .opt{
  color:var(--paper-ghost);font-weight:300;
  font-size:9px;letter-spacing:0.3em;text-transform:none;margin-left:8px;
}
/* Country code + phone side-by-side */
.form-block .field-row{
  display:grid;grid-template-columns:200px 1fr;gap:24px;
  margin-bottom:32px;
}
.form-block .field-row .field{margin-bottom:0}
/* First name + last name — equal width */
.form-block .field-row-name{grid-template-columns:1fr 1fr}
/* Native select styled to match text inputs */
.form-block select{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--paper-faint);
  padding:14px 24px 14px 0;
  color:var(--paper);
  font-family:'General Sans',sans-serif;
  font-weight:300;font-size:16px;letter-spacing:0.02em;
  outline:none;transition:border-color 0.3s;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--paper-dim) 50%),linear-gradient(135deg,var(--paper-dim) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% - 2px),calc(100% - 7px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  cursor:pointer;
}
.form-block select:focus{border-bottom-color:var(--paper)}
.form-block select option{background:var(--bg);color:var(--paper)}
@media (max-width:640px){
  .form-block .field-row{grid-template-columns:1fr;gap:32px}
}

/* ============================================================
   PROGRESSIVE DIM — completed required fields fade back,
   empty ones stay full brightness so the eye tracks what's left
   ============================================================ */
/* Default state for required fields — label and input at full brightness */
.form-block input:required,
.form-block textarea:required,
.form-block select:required{
  border-bottom-color:var(--paper);
}
/* Empty required inputs: red asterisk stays bright, label at full */
.form-block input:required:placeholder-shown ~ *,
.form-block textarea:required:placeholder-shown ~ *{}
/* When a required field is VALID (filled correctly): dim the whole field */
.form-block .field:has(input:required:valid:not(:placeholder-shown)),
.form-block .field:has(textarea:required:valid:not(:placeholder-shown)),
.form-block .field:has(select:required:valid){
  opacity:0.42;transition:opacity 0.35s ease;
}
/* On hover/focus, temporarily bring back to full so they can edit */
.form-block .field:has(input:focus),
.form-block .field:has(textarea:focus),
.form-block .field:has(select:focus),
.form-block .field:hover{
  opacity:1;
}
/* Empty required fields stay fully bright with a subtle red underline pulse */
.form-block .field:has(input:required:placeholder-shown),
.form-block .field:has(textarea:required:placeholder-shown),
.form-block .field:has(select:required:invalid){
  opacity:1;
}
.form-block input:required:placeholder-shown,
.form-block textarea:required:placeholder-shown,
.form-block select:required:invalid{
  border-bottom-color:var(--rd);
}
/* Field container gets smooth transition */
.form-block .field{transition:opacity 0.35s ease}

/* ============================================================
   ENQUIRY-TYPE CHECKBOX GROUP  (unified alignment)
   
   ONE checkbox style, used everywhere:
   - primary group (single column, tight stack)
   - Red Cell sub-group (indented with red bracket)
   - Training sub-group (indented with red bracket)
   - Secure Handling radio group (round dot)
   
   Every box is 18×18, aligned to first line of label,
   12px gap between box and text, 10px vertical rhythm.
   ============================================================ */
.form-block .check-group{
  display:flex;flex-direction:column;gap:10px;
  margin-top:6px;
}
.form-block .check{
  display:flex;align-items:flex-start;gap:12px;
  cursor:pointer;padding:2px 0;
  font-family:'General Sans',sans-serif;
  font-weight:300;font-size:15px;letter-spacing:0.01em;
  color:var(--paper);text-transform:none;margin:0;
  line-height:1.4;
  transition:opacity 0.25s ease;
}
.form-block .check:hover{opacity:0.85}
.form-block .check input[type="checkbox"],
.form-block .check input[type="radio"]{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}
.form-block .check .box{
  width:18px;height:18px;flex-shrink:0;
  border:1px solid var(--paper-faint);
  background:transparent;
  position:relative;transition:all 0.2s ease;
  margin-top:2px; /* aligns box optical center with first line of text */
}
.form-block .check:hover .box{border-color:var(--paper-dim)}
.form-block .check input[type="checkbox"]:checked ~ .box{
  border-color:var(--rd);background:var(--rd);
}
.form-block .check input[type="checkbox"]:checked ~ .box::after{
  content:"";position:absolute;left:5px;top:1px;
  width:5px;height:11px;
  border:solid var(--paper);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.form-block .check input:focus-visible ~ .box{
  outline:2px solid var(--rd);outline-offset:2px;
}
.form-block .check .txt{
  line-height:1.4;flex:1;
  padding-top:0;
}
.form-block .field-referral{margin-top:8px}

/* Sub-heading above primary group */
.form-block .check-subhead{
  margin:8px 0 10px;
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--paper-dim);font-weight:500;
}

/* Red Cell / Training parent + child grouping */
.form-block .check-parent{margin-top:18px}
.form-block .check-lead{font-weight:500}
.form-block .check-subgroup{
  margin:8px 0 0 30px;    /* 30px = 18 (box width) + 12 (gap) — aligns children under parent label */
  padding:4px 0 4px 16px;
  border-left:2px solid var(--rd);
  display:flex;flex-direction:column;gap:10px;
}
@media (max-width:640px){
  .form-block .check-subgroup{margin-left:14px;padding-left:12px}
}

/* ============================================================
   SECURE HANDLING (E2EE + NDA question)
   Radios inherit .check styling above; only box shape changes.
   ============================================================ */
.form-block .field-secure{margin-top:36px}
.form-block .secure-note{
  margin:0 0 16px;padding:14px 16px;
  background:rgba(200,16,46,0.06);
  border-left:2px solid var(--rd);
  font-size:13px;line-height:1.55;color:var(--paper);
  font-weight:300;letter-spacing:0.01em;
}
.form-block .secure-note strong.rd{font-weight:600}
.form-block .radio-group{
  display:flex;flex-direction:column;gap:10px;
  margin-top:6px;
}
/* Round box + red dot when selected */
.form-block .radio-group .check .box{border-radius:50%}
.form-block .radio-group .check input[type="radio"]:checked ~ .box{
  background:transparent;border-color:var(--rd);
}
.form-block .radio-group .check input[type="radio"]:checked ~ .box::after{
  content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;border-radius:50%;
  background:var(--rd);
  transform:translate(-50%,-50%);
  border:0;
}

/* ============================================================
   EMAIL VERIFICATION STATE
   ============================================================ */
.form-block .email-status{
  display:inline-block;margin-left:12px;
  font-family:'General Sans',sans-serif;
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--paper-ghost);font-weight:400;
  transition:color 0.3s ease;
}
.form-block .email-status.checking{color:var(--paper-dim)}
.form-block .email-status.valid{color:#4a9d5a}
.form-block .email-status.invalid{color:var(--rd)}
.form-block .email-help{
  margin:8px 0 0;font-size:11px;line-height:1.5;letter-spacing:0.02em;
  color:var(--paper-ghost);font-weight:300;
}
.form-block input.is-checking{border-bottom-color:var(--paper-dim)!important}
.form-block input.is-valid{border-bottom-color:#4a9d5a!important}
.form-block input.is-invalid{border-bottom-color:var(--rd)!important;animation:emailShake 0.4s ease}
@keyframes emailShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

/* ============================================================
   GATE WALL (private tier entry)
   ============================================================ */
.gate{
  min-height:100vh;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:140px 40px 80px;text-align:center;
}
.gate .seq{
  font-size:10px;letter-spacing:0.6em;text-transform:uppercase;
  color:var(--paper-faint);margin-bottom:40px;
}
.gate .doctrine-line{
  font-family:'General Sans',sans-serif;
  font-weight:200;
  font-size:clamp(28px,4.2vw,64px);
  line-height:1.2;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--paper);max-width:1100px;
  margin-bottom:20px;
}
.gate .doctrine-attr{
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.45em;text-transform:uppercase;
  color:var(--paper-faint);font-weight:300;
  margin-bottom:56px;
}
.gate .rule{
  width:60px;height:1px;background:var(--paper-faint);margin:0 auto 56px;
}
.gate .sub{
  font-size:14px;line-height:1.9;max-width:520px;
  color:var(--paper-dim);font-weight:300;margin-bottom:56px;
}
.gate form{
  width:100%;max-width:400px;margin:0 auto;
}
.gate form .field{margin-bottom:24px;text-align:left}
.gate form label{
  display:block;font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--paper-dim);margin-bottom:10px;
}
.gate form input{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--paper-faint);padding:12px 0;
  color:var(--paper);
  font-family:'General Sans',sans-serif;font-weight:300;font-size:15px;letter-spacing:0.02em;
  outline:none;text-align:center;transition:border-color 0.3s;
}
.gate form input:focus{border-bottom-color:var(--paper)}
.gate form .submit{
  margin-top:24px;background:transparent;border:0;
  border-bottom:1px solid var(--paper-faint);cursor:pointer;
  padding:10px 24px;color:var(--paper);
  font-family:'General Sans',sans-serif;font-weight:400;
  font-size:11px;letter-spacing:0.5em;text-transform:uppercase;
  transition:border-color 0.3s;
}
.gate form .submit:hover{border-bottom-color:var(--paper)}
.gate .back-link{
  margin-top:56px;font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--paper-faint);border-bottom:1px solid transparent;
  padding-bottom:4px;transition:border-color 0.3s;
}
.gate .back-link:hover{border-bottom-color:var(--paper-faint);opacity:1}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site-footer{
  padding:60px 40px 40px;background:var(--bg);
  border-top:1px solid var(--hair);
}
footer.site-footer .row{
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;align-items:start;
  padding-bottom:40px;border-bottom:1px solid var(--hair);
}
footer.site-footer .col-label{
  font-size:13px;letter-spacing:0.42em;text-transform:uppercase;font-weight:600;
  color:var(--paper);margin-bottom:22px;
  padding-bottom:12px;border-bottom:1px solid var(--hair);
}
footer.site-footer .col-label .rd{color:var(--csog-red);font-weight:700}
footer.site-footer .col-body{
  font-size:12px;line-height:2;color:var(--paper-dim);
}
footer.site-footer .col-body a{
  color:var(--paper-dim);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color 0.3s,color 0.3s;
}
footer.site-footer .col-body a:hover{color:var(--csog-red);border-bottom-color:var(--csog-red);opacity:1}
footer.site-footer .brand-row{
  max-width:1400px;margin:32px auto 0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:var(--paper-faint);
}
footer.site-footer .brand-row .brand{
  font-family:'General Sans',sans-serif;font-weight:300;
  font-size:16px;letter-spacing:0.35em;color:var(--paper);text-transform:none;
}
footer.site-footer .institutional{
  color:var(--paper-faint);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color 0.3s,color 0.3s;
}
footer.site-footer .institutional:hover{color:var(--csog-red);border-bottom-color:var(--csog-red);opacity:1}

/* Social media row — sits between .row and .brand-row */
footer.site-footer .social-row{
  max-width:1400px;margin:40px auto 0;
  padding:28px 0 16px 0;
  border-top:1px solid rgba(200,16,46,0.14);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
footer.site-footer .social-label{
  font-family:'General Sans',sans-serif;
  font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--paper-faint);
}
footer.site-footer .social-label .rd{color:var(--csog-red);font-weight:600}
footer.site-footer .social-icons{
  display:flex;align-items:center;justify-content:center;
  gap:22px;
}
footer.site-footer .social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  color:var(--csog-red);
  border:1px solid rgba(200,16,46,0.35);
  border-radius:50%;
  transition:color 0.25s, border-color 0.25s, background 0.25s, transform 0.2s;
  padding-bottom:0;
}
footer.site-footer .social-link:hover{
  color:var(--paper);
  border-color:var(--paper);
  background:rgba(200,16,46,0.08);
  transform:translateY(-2px);
  opacity:1;
}

/* Pro Series (tuxedo) footer variant — lighter treatment for the Vault */
body.pro footer.site-footer .social-row{
  border-top-color:rgba(200,16,46,0.22);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  nav.top{padding:20px;grid-template-columns:auto auto auto}
  nav.top .brand{font-size:16px;letter-spacing:0.25em}
  nav.top .left,nav.top .right{gap:12px}
  .menu-overlay{padding:100px 24px 40px}
  .menu-overlay .grid{grid-template-columns:1fr;gap:40px}
  .menu-overlay ul li a{font-size:24px}
  .hero h1{font-size:30px;letter-spacing:0.01em;line-height:1.1}
  .hero .body{font-size:13px;line-height:1.75}
  .hero .doctrine-line{font-size:11px}
  .hero .doctrine-line{letter-spacing:0.3em}
  .page-hero{padding:120px 24px 60px}
  .page-hero h1{font-size:36px}
  .split-chapter .photo{height:50vh;min-height:360px}
  .split-chapter .photo .caption{left:20px;bottom:20px;font-size:9px}
  .split-chapter .panel{padding:64px 24px 80px}
  .split-chapter .panel h2{font-size:32px}
  .split-chapter .panel .body{font-size:14px}
  .doctrine{grid-template-columns:1fr;padding:64px 24px;gap:40px}
  .doctrine .col-title{font-size:32px}
  .prose-block{padding:64px 24px}
  .end-reel{padding:64px 24px}
  .end-reel h2{font-size:36px}
  .form-block{padding:32px 24px 80px}
  .gate{padding:100px 24px 60px}
  .gate .doctrine-line{font-size:22px;letter-spacing:0.04em}
  footer.site-footer .row{grid-template-columns:1fr;gap:32px}
  footer.site-footer .brand-row{flex-direction:column;text-align:center;gap:12px}
  footer.site-footer .social-icons{gap:16px}
  footer.site-footer .social-link{width:38px;height:38px}
}

/* ============================================================
   US-CSOG BRIDGE PAGE — the threshold
   ============================================================ */

/* HERO PHOTO BAND */
.bridge-hero-photo{
  position:relative;width:100%;
  height:min(78vh,760px);
  overflow:hidden;background:#000;
}
.bridge-hero-photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;
  display:block;
}
.bridge-hero-caption{
  position:absolute;left:40px;bottom:32px;
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  padding:10px 18px;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(4px);
  border-left:2px solid var(--csog-red);
}

/* HERO COPY */
.bridge-hero{
  max-width:900px;margin:0 auto;
  padding:110px 40px 90px;
  text-align:center;
}
.bridge-hero .kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--csog-red);
  margin-bottom:32px;
}
.bridge-hero h1{
  font-family:var(--serif);
  font-size:clamp(48px,7vw,92px);
  font-weight:400;line-height:1.02;letter-spacing:-0.02em;
  color:var(--paper);
  margin:0 0 40px;
}
.bridge-hero h1 .r{color:var(--csog-red);font-style:italic}
.bridge-hero .body{
  font-family:'General Sans',sans-serif;
  font-size:19px;font-weight:300;line-height:1.65;
  color:var(--paper-dim);
  max-width:680px;margin:0 auto;
}

/* PROSE SECTIONS */
.bridge-prose{
  max-width:820px;margin:0 auto;
  padding:80px 40px;
}
.bridge-prose .bp-inner{
  display:flex;flex-direction:column;gap:24px;
}
.bridge-prose .kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--csog-red);
}
.bridge-prose h2{
  font-family:var(--serif);
  font-size:clamp(30px,4.4vw,46px);
  font-weight:400;line-height:1.15;letter-spacing:-0.015em;
  color:var(--paper);margin:0 0 20px;
}
.bridge-prose p{
  font-family:'General Sans',sans-serif;
  font-size:17px;font-weight:300;line-height:1.72;
  color:var(--paper);
  margin:0;
}
.bridge-prose p + p{margin-top:20px}

/* THE QUESTION — martial arts analogy */
.bridge-question{
  background:var(--bg);
  padding:110px 40px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.bridge-question .bq-inner{
  max-width:820px;margin:0 auto;text-align:center;
}
.bridge-question .kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--csog-red);
  margin-bottom:28px;
}
.bridge-question h2{
  font-family:var(--serif);
  font-size:clamp(36px,5.4vw,60px);
  font-weight:400;line-height:1.1;letter-spacing:-0.02em;
  color:var(--paper);margin:0 0 48px;
}
.bridge-question .bq-body{
  font-family:'General Sans',sans-serif;
  font-size:18px;font-weight:300;line-height:1.75;
  color:var(--paper);
  max-width:720px;margin:0 auto;
}
.bridge-question .bq-or{
  font-family:var(--serif);
  font-style:italic;
  font-size:28px;font-weight:400;
  color:var(--csog-red);
  margin:32px 0;
}
.bridge-question .bq-close{
  font-family:'General Sans',sans-serif;
  font-size:14px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--paper-dim);
  margin:48px 0 0;padding-top:32px;
  border-top:1px solid var(--hair);
  max-width:520px;margin-left:auto;margin-right:auto;
}

/* PHOTO BAND */
.bridge-photo-band{
  position:relative;width:100%;
  height:min(68vh,640px);
  overflow:hidden;background:#000;
}
.bridge-photo-band.tall{
  height:min(76vh,720px);
}
.bridge-photo-band img{
  width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;
  display:block;
}
/* Per-image object-position overrides so subjects land right */
.bridge-photo-band img[src*="us-csog-physique"]{
  object-position:50% 22%;
}
.bridge-photo-band .bpb-caption{
  position:absolute;left:40px;bottom:40px;
  max-width:420px;
  padding:20px 24px;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(6px);
  border-left:2px solid var(--csog-red);
}
.bridge-photo-band .bpb-caption.right{
  left:auto;right:40px;
  border-left:none;border-right:2px solid var(--csog-red);
  text-align:right;
}
.bridge-photo-band .bpb-kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  margin-bottom:10px;
}
.bridge-photo-band .bpb-line{
  font-family:var(--serif);
  font-size:24px;font-weight:400;font-style:italic;
  letter-spacing:-0.005em;line-height:1.25;
  color:#fff;
}

/* THE BUILD — 5-step process */
.bridge-build{
  max-width:900px;margin:0 auto;
  padding:100px 40px;
}
.bridge-build .bb-inner{
  display:flex;flex-direction:column;gap:16px;
}
.bridge-build .kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--csog-red);
}
.bridge-build h2{
  font-family:var(--serif);
  font-size:clamp(32px,4.6vw,50px);
  font-weight:400;line-height:1.12;letter-spacing:-0.015em;
  color:var(--paper);margin:0 0 12px;
}
.bridge-build .bb-lead{
  font-family:'General Sans',sans-serif;
  font-size:18px;font-weight:300;line-height:1.6;
  color:var(--paper-dim);
  margin:0 0 40px;
}
.bridge-build .bb-steps{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:0;
}
.bridge-build .bb-steps li{
  display:grid;grid-template-columns:80px 1fr;gap:32px;
  padding:28px 0;
  border-top:1px solid var(--hair);
  align-items:start;
}
.bridge-build .bb-steps li:last-child{
  border-bottom:1px solid var(--hair);
}
.bridge-build .bb-num{
  font-family:'General Sans',sans-serif;
  font-size:14px;font-weight:500;
  letter-spacing:0.18em;
  color:var(--csog-red);
  padding-top:4px;
}
.bridge-build .bb-step-title{
  font-family:var(--serif);
  font-size:24px;font-weight:400;letter-spacing:-0.005em;
  color:var(--paper);
  margin-bottom:8px;
}
.bridge-build .bb-step-body{
  font-family:'General Sans',sans-serif;
  font-size:16px;font-weight:300;line-height:1.7;
  color:var(--paper-dim);
}

/* PULLQUOTE — baseline vs standard */
.bridge-pullquote{
  padding:110px 40px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  background:var(--bg);
}
.bridge-pullquote .bpq-inner{
  max-width:900px;margin:0 auto;text-align:center;
}
.bridge-pullquote .bpq-kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--csog-red);
  margin-bottom:36px;
}
.bridge-pullquote blockquote{
  font-family:var(--serif);
  font-size:clamp(30px,4.6vw,52px);
  font-weight:400;line-height:1.25;letter-spacing:-0.015em;
  color:var(--paper);
  margin:0;padding:0;
}
.bridge-pullquote blockquote em{
  font-style:italic;color:var(--paper-dim);
}
.bridge-pullquote blockquote .r{
  color:var(--csog-red);font-style:italic;
}

/* THE THRESHOLD — closing section with buttons */
.bridge-threshold{
  max-width:900px;margin:0 auto;
  padding:120px 40px 140px;
  text-align:center;
}
.bridge-threshold .bt-inner{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.bridge-threshold .kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--csog-red);
  margin-bottom:28px;
}
.bridge-threshold h2{
  font-family:var(--serif);
  font-size:clamp(36px,5.6vw,64px);
  font-weight:400;line-height:1.08;letter-spacing:-0.02em;
  color:var(--paper);margin:0 0 40px;
}
.bridge-threshold .bt-body{
  font-family:'General Sans',sans-serif;
  font-size:18px;font-weight:300;line-height:1.68;
  color:var(--paper);
  max-width:680px;margin:0 0 40px;
}
.bridge-threshold .bt-close{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,28px);
  font-weight:400;line-height:1.4;letter-spacing:-0.005em;
  color:var(--paper);
  max-width:640px;
  margin:0 0 64px;
  padding-top:40px;
  border-top:1px solid var(--hair);
}
.bridge-threshold .bt-close em{
  font-style:italic;color:var(--csog-red);
}
.bridge-threshold .bt-buttons{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  width:100%;
}
.bridge-threshold .bt-primary{
  font-family:'General Sans',sans-serif;
  font-size:14px;font-weight:500;
  letter-spacing:0.28em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  background:var(--csog-red);
  padding:22px 48px;
  display:inline-flex;align-items:center;gap:24px;
  transition:background .2s ease,transform .2s ease;
  min-width:340px;justify-content:center;
}
.bridge-threshold .bt-primary:hover{
  background:#a30d24;
  transform:translateY(-1px);
}
.bridge-threshold .bt-primary .rule{
  display:inline-block;width:56px;height:1px;background:currentColor;
}
.bridge-threshold .bt-secondary{
  font-family:'General Sans',sans-serif;
  font-size:12px;font-weight:400;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--paper-dim);text-decoration:none;
  padding:10px 24px;
  transition:color .2s ease;
}
.bridge-threshold .bt-secondary:hover{color:var(--paper)}

/* MOBILE */
@media (max-width:900px){
  .bridge-hero-photo{height:min(60vh,480px)}
  .bridge-hero-photo .bridge-hero-caption{left:20px;bottom:20px;font-size:10px}
  .bridge-hero{padding:80px 24px 60px}
  .bridge-prose{padding:60px 24px}
  .bridge-prose p{font-size:16px;line-height:1.7}
  .bridge-question{padding:80px 24px}
  .bridge-photo-band{height:min(56vh,420px)}
  .bridge-photo-band.tall{height:min(62vh,480px)}
  .bridge-photo-band .bpb-caption{left:16px;right:16px;bottom:16px;max-width:none}
  .bridge-photo-band .bpb-caption.right{text-align:left;border-right:none;border-left:2px solid var(--csog-red)}
  .bridge-build{padding:80px 24px}
  .bridge-build .bb-steps li{grid-template-columns:1fr;gap:8px}
  .bridge-build .bb-num{padding-top:0}
  .bridge-pullquote{padding:80px 24px}
  .bridge-threshold{padding:90px 24px 100px}
  .bridge-threshold .bt-primary{padding:18px 32px;min-width:0;width:100%}
}

/* ============================================================
   PAGE HERO WITH BACKGROUND IMAGE (subtle, for new root pages)
   ============================================================ */
.page-hero.with-image{
  position:relative;
  overflow:hidden;
  padding:200px 40px 140px;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.page-hero.with-image .bg{
  position:absolute;inset:0;z-index:0;
}
.page-hero.with-image .bg img{
  width:100%;height:100%;object-fit:cover;
  opacity:0.35;
  filter:grayscale(20%) contrast(1.05);
}
.page-hero.with-image .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,0.65) 0%,rgba(10,10,10,0.4) 50%,rgba(10,10,10,0.95) 100%);
}
.page-hero.with-image > *:not(.bg){position:relative;z-index:1}
.page-hero.with-image h1{color:var(--paper)}

/* ============================================================
   Doctrine Papers — Homepage "Three Papers" card grid (popped)
   ============================================================ */
.doctrine-papers-block .dp-kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.48em;text-transform:uppercase;
  color:var(--rd);text-align:center;font-weight:500;
  margin:56px auto 32px;max-width:820px
}
.doctrine-papers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  width:calc(100vw - 80px);max-width:1360px;
  margin-left:50%;transform:translateX(-50%);
  padding:0 32px;box-sizing:border-box;
  align-items:start
}
.dp-card{
  position:relative;display:block;
  padding:44px 32px 36px 40px;
  background:linear-gradient(180deg,rgba(200,16,46,0.035) 0%,rgba(200,16,46,0.01) 100%);
  border:1px solid rgba(200,16,46,0.22);
  text-decoration:none;color:var(--paper);
  overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease
}
.dp-card .dp-spine{
  position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--csog-red);
  transition:width .35s ease, box-shadow .35s ease
}
.dp-card .dp-num{
  font-family:'General Sans',sans-serif;
  font-size:64px;line-height:1;font-weight:200;
  color:rgba(200,16,46,0.55);
  letter-spacing:-0.02em;margin-bottom:10px;
  transition:color .35s ease, transform .35s ease
}
.dp-card .dp-label{
  font-family:'General Sans',sans-serif;
  font-size:10px;letter-spacing:0.42em;text-transform:uppercase;
  color:var(--paper-dim);font-weight:500;margin-bottom:18px
}
.dp-card .dp-title{
  font-family:'General Sans',sans-serif;
  font-size:26px;line-height:1.15;font-weight:300;
  letter-spacing:-0.015em;color:var(--paper);
  margin-bottom:16px;
  min-height:60px;
  transition:color .35s ease
}
.dp-card .dp-body{
  font-size:14px;line-height:1.65;color:var(--paper-dim);
  font-weight:300;margin-bottom:28px
}
.dp-card .dp-cta{
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--paper);font-weight:500;
  padding-top:20px;border-top:1px solid rgba(200,16,46,0.25);
  transition:color .35s ease, border-color .35s ease
}
.dp-card .dp-arrow{
  display:inline-block;margin-left:6px;
  transition:transform .35s ease, color .35s ease
}
/* Hover: lift, spine thickens + glows, number reddens, arrow slides */
.dp-card:hover{
  transform:translateY(-6px);
  border-color:var(--csog-red);
  background:linear-gradient(180deg,rgba(200,16,46,0.08) 0%,rgba(200,16,46,0.02) 100%);
  box-shadow:0 24px 60px -20px rgba(200,16,46,0.35)
}
.dp-card:hover .dp-spine{
  width:5px;
  box-shadow:0 0 20px rgba(200,16,46,0.6)
}
.dp-card:hover .dp-num{
  color:var(--csog-red)
}
.dp-card:hover .dp-cta{
  color:var(--csog-red);
  border-top-color:var(--csog-red)
}
.dp-card:hover .dp-arrow{
  transform:translateX(6px);
  color:var(--csog-red)
}
/* Mobile — single column, tighter spacing */
@media (max-width:900px){
  .doctrine-papers{grid-template-columns:1fr;gap:20px;padding:0 20px}
  .dp-card{padding:36px 24px 28px 32px}
  .dp-card .dp-num{font-size:52px}
  .dp-card .dp-title{font-size:24px}
}

/* Doctrine papers — Accordion chevron + panel */
.dp-card-wrap{
  display:flex;flex-direction:column
}
.dp-card{position:relative}
.dp-chevron{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  background:rgba(200,16,46,0.10);
  border:1px solid rgba(200,16,46,0.35);
  color:var(--csog-red);
  font-family:'General Sans',sans-serif;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, border-color .25s ease, transform .35s ease;
  z-index:5;
  padding:0
}
.dp-chevron:hover{
  background:rgba(200,16,46,0.20);
  border-color:var(--csog-red)
}
.dp-chevron .dp-chev-icon{
  font-size:22px;line-height:1;font-weight:300;
  display:inline-block;
  transition:transform .35s ease
}
.dp-chevron[aria-expanded="true"] .dp-chev-icon{
  transform:rotate(45deg)
}
.dp-panel{
  max-height:0;overflow:hidden;
  transition:max-height .5s ease;
  background:linear-gradient(180deg,rgba(200,16,46,0.06),rgba(200,16,46,0.02));
  border-left:1px solid rgba(200,16,46,0.22);
  border-right:1px solid rgba(200,16,46,0.22);
  border-bottom:1px solid rgba(200,16,46,0.22);
  margin-top:-1px
}
.dp-panel.open{
  max-height:400px
}
.dp-panel-inner{
  padding:28px 32px 32px 40px;
  border-top:1px solid rgba(200,16,46,0.28)
}
.dp-teaser-kicker{
  font-family:'General Sans',sans-serif;
  font-size:10px;letter-spacing:0.42em;text-transform:uppercase;
  color:var(--csog-red);font-weight:500;margin-bottom:14px
}
.dp-teaser{
  font-family:'General Sans',sans-serif;
  font-size:17px;line-height:1.55;font-weight:300;
  color:var(--paper);letter-spacing:-0.005em;
  font-style:italic;
  margin:0 0 24px;
  border-left:2px solid var(--csog-red);
  padding-left:16px
}
.dp-panel-cta{
  display:inline-block;
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--csog-red);font-weight:500;
  text-decoration:none;
  padding:12px 20px;
  border:1px solid var(--csog-red);
  background:rgba(200,16,46,0.05);
  white-space:nowrap;
  transition:background .25s ease, color .25s ease
}
.dp-panel-cta:hover{
  background:var(--csog-red);
  color:var(--paper)
}
.dp-panel-cta:hover .dp-arrow{
  color:var(--paper)
}
@media (max-width:900px){
  .dp-panel-inner{padding:24px 24px 28px 32px}
  .dp-teaser{font-size:16px}
}

/* ============================================================
   Chapter Accordion — collapsible homepage sections
   ============================================================ */
.ch-accordion{
  display:block;
  border-top:1px solid rgba(200,16,46,0.22);
  background:var(--bg);
  margin:0
}
.ch-accordion:last-of-type{
  border-bottom:1px solid rgba(200,16,46,0.22)
}
/* Remove default disclosure triangle */
.ch-summary{
  list-style:none;
  cursor:pointer;
  padding:44px 32px 40px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  transition:background .35s ease
}
.ch-summary::-webkit-details-marker{display:none}
.ch-summary::marker{display:none}
.ch-summary:hover{
  background:linear-gradient(90deg,rgba(200,16,46,0.05),rgba(200,16,46,0.01))
}
.ch-summary-inner{
  flex:1;
  max-width:1100px;
  margin:0 auto;
  padding-left:24px;
  border-left:2px solid var(--csog-red);
  min-width:0
}
.ch-kicker{
  font-family:'General Sans',sans-serif;
  font-size:11px;letter-spacing:0.42em;text-transform:uppercase;
  color:var(--csog-red);font-weight:500;margin-bottom:10px
}
.ch-title{
  font-family:'General Sans',sans-serif;
  font-size:32px;line-height:1.2;font-weight:300;
  letter-spacing:-0.015em;color:var(--paper);
  margin-bottom:12px
}
.ch-title em{
  color:var(--csog-red);font-style:normal;font-weight:400
}
.ch-teaser{
  font-family:'General Sans',sans-serif;
  font-size:15px;line-height:1.55;
  color:var(--paper-dim);
  font-weight:300;font-style:italic;
  letter-spacing:-0.005em
}
/* Popped hot word — like gallery accordion teaser badges */
.ch-hot{
  display:inline-block;
  font-family:'General Sans',sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:#c8102e;
  padding:8px 18px;
  border:1px solid rgba(200,16,46,0.4);
  transition:all .3s ease;
  line-height:1;
  margin-top:14px
}
.ch-summary:hover .ch-hot{
  background:rgba(200,16,46,0.10);
  border-color:#c8102e;
  letter-spacing:0.36em
}
.ch-accordion[open] .ch-hot{
  background:rgba(200,16,46,0.14);
  border-color:#c8102e;
  color:#f0ede4
}
@media (max-width:900px){
  .ch-hot{padding:6px 12px;font-size:10px;letter-spacing:0.24em}
}
.ch-plus{
  flex-shrink:0;
  width:44px;height:44px;
  border:1px solid var(--csog-red);
  color:var(--csog-red);
  background:rgba(200,16,46,0.06);
  font-family:'General Sans',sans-serif;
  font-size:26px;font-weight:300;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease, background .25s ease
}
.ch-accordion[open] .ch-plus{
  transform:rotate(45deg);
  background:var(--csog-red);
  color:var(--paper)
}
.ch-accordion[open] .ch-summary{
  background:linear-gradient(90deg,rgba(200,16,46,0.06),rgba(200,16,46,0.01));
  border-bottom:1px solid rgba(200,16,46,0.15)
}
/* Body reveal */
.ch-body{
  overflow:hidden;
  animation:ch-slide-in .5s ease
}
@keyframes ch-slide-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
/* When a section is INSIDE the accordion body, remove its own top/bottom
   padding so the accordion frame is what provides spacing */
.ch-body > section{
  padding-top:60px;
  padding-bottom:60px
}
/* Mobile */
@media (max-width:900px){
  .ch-summary{padding:32px 20px 28px;gap:16px}
  .ch-summary-inner{padding-left:16px}
  .ch-title{font-size:24px}
  .ch-teaser{font-size:14px}
  .ch-plus{width:36px;height:36px;font-size:22px}
}

/* Trademark superscript on the brand logo — slightly tighter than body ™ */
sup.tm-logo{
  font-size:0.5em;
  vertical-align:0.7em;
  letter-spacing:0;
  margin-left:2px;
  color:var(--paper-muted);
  font-weight:400;
  opacity:0.85;
}

/* ============================================
   SHOP · THE COLORS
   Product cards + Enquire-to-Order form (VI.141)
   ============================================ */

.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:32px;
  max-width:1240px;
  margin:24px auto 0;
  padding:0 6vw;
}

.shop-card{
  background:#000;
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}

.shop-card:hover{
  border-color:var(--csog-red);
  transform:translateY(-2px);
}

.shop-img-link{
  display:block;
  overflow:hidden;
  background:#000;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.shop-img-link img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .5s ease;
}

.shop-card:hover .shop-img-link img{
  transform:scale(1.03);
}

.shop-kicker{
  font-family:'General Sans', sans-serif;
  font-size:11px;
  font-weight:400;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--paper-dim, #888);
  padding:20px 24px 8px;
}

.shop-name{
  font-family:'General Sans', sans-serif;
  font-size:22px;
  font-weight:500;
  line-height:1.25;
  color:var(--paper);
  padding:0 24px 8px;
}

.shop-price{
  font-family:'General Sans', sans-serif;
  font-size:20px;
  font-weight:500;
  color:var(--csog-red);
  padding:0 24px 12px;
  letter-spacing:0.02em;
}

.shop-desc{
  font-family:'General Sans', sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.6;
  color:var(--paper);
  padding:0 24px 20px;
  flex:1;
}

.shop-btn{
  display:block;
  text-align:center;
  background:transparent;
  border-top:1px solid var(--csog-red);
  color:var(--paper);
  font-family:'General Sans', sans-serif;
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  padding:18px 24px;
  text-decoration:none;
  transition:background .3s ease;
}

.shop-btn:hover{
  background:var(--csog-red);
  color:#fff;
}

.shop-footnote{
  text-align:center;
  font-family:'General Sans', sans-serif;
  font-size:13px;
  font-weight:300;
  color:var(--paper-dim, #888);
  max-width:820px;
  margin:32px auto 0;
  padding:0 6vw;
  font-style:italic;
}

/* ============================================
   ORDER ENQUIRY FORM
   ============================================ */

.order-block{
  max-width:820px;
  margin:24px auto 0;
  padding:0 6vw;
}

.order-block form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.order-note{
  font-family:'General Sans', sans-serif;
  font-size:13px;
  color:var(--paper-dim, #888);
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.order-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media (max-width:640px){
  .order-row{ grid-template-columns:1fr; }
}

.order-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.order-field label{
  font-family:'General Sans', sans-serif;
  font-size:11px;
  font-weight:400;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--paper);
}

.order-field input,
.order-field select,
.order-field textarea{
  background:#000;
  border:1px solid rgba(255,255,255,0.16);
  color:var(--paper);
  font-family:'General Sans', sans-serif;
  font-size:15px;
  font-weight:300;
  padding:12px 14px;
  border-radius:0;
  width:100%;
  box-sizing:border-box;
}

.order-field input:focus,
.order-field select:focus,
.order-field textarea:focus{
  outline:none;
  border-color:var(--csog-red);
}

.order-section{
  font-family:'General Sans', sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--paper);
  padding-top:24px;
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.order-hint{
  font-family:'General Sans', sans-serif;
  font-size:13px;
  font-weight:300;
  color:var(--paper-dim, #888);
  margin:-8px 0 0;
}

.order-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

@media (max-width:640px){
  .order-item{
    grid-template-columns:1fr;
    gap:10px;
  }
}

.order-check{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'General Sans', sans-serif;
  font-size:15px;
  font-weight:400;
  color:var(--paper);
  cursor:pointer;
}

.order-check input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--csog-red);
  cursor:pointer;
}

.order-inline{
  display:flex;
  gap:10px;
  align-items:center;
}

.order-inline select,
.order-inline input[type="number"]{
  background:#000;
  border:1px solid rgba(255,255,255,0.16);
  color:var(--paper);
  font-family:'General Sans', sans-serif;
  font-size:14px;
  padding:8px 10px;
  border-radius:0;
}

.order-inline select{ min-width:100px; }
.order-inline input[type="number"]{ width:80px; }

.order-fixed{
  font-family:'General Sans', sans-serif;
  font-size:12px;
  color:var(--paper-dim, #888);
  letter-spacing:0.08em;
}

.order-actions{
  margin-top:16px;
  text-align:center;
}

.order-submit{
  background:var(--csog-red);
  border:none;
  color:#fff;
  font-family:'General Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  padding:18px 42px;
  cursor:pointer;
  transition:background .3s ease;
}

.order-submit:hover{
  background:#a00d24;
}

.order-close{
  font-family:'General Sans', sans-serif;
  font-size:12px;
  color:var(--paper-dim, #888);
  margin-top:14px;
  font-style:italic;
}

.req{
  color:var(--csog-red);
  font-weight:600;
}

/* SHOP · Colorway Headers + Yellow Accent (VI.141) */
.yl{color:#ffd700;font-weight:600}
.shop-colorway-header{
  text-align:center;
  font-family:'General Sans',sans-serif;
  font-size:14px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--paper);
  margin:40px auto 20px;
  padding-top:20px;
  border-top:1px solid rgba(240,237,228,0.12);
  max-width:600px;
}
.shop-colorway-yellow{margin-top:60px}
.order-colorway{
  text-align:center;
  font-family:'General Sans',sans-serif;
  font-size:13px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--paper);
  margin:24px 0 12px;
  padding:14px 0 4px;
  border-top:1px solid rgba(240,237,228,0.15);
}
.order-colorway:first-of-type{border-top:none;padding-top:0;margin-top:8px}

/* LIGHTBOX · Full-size product image viewer (VI.142) */
.shop-img-link{cursor:zoom-in;display:block;position:relative}
.shop-img-link::after{
  content:"CLICK TO ENLARGE";
  position:absolute;
  bottom:10px;
  right:10px;
  background:rgba(10,10,10,0.75);
  color:#f0ede4;
  font-family:'General Sans',sans-serif;
  font-size:10px;
  letter-spacing:0.2em;
  padding:6px 10px;
  border:1px solid var(--csog-red);
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
}
.shop-img-link:hover::after{opacity:1}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.94);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
  padding:40px 20px;
  cursor:zoom-out;
}
.lightbox.is-open,.lightbox.open{opacity:1;visibility:visible}
.lightbox-img{
  max-width:95vw;
  max-height:85vh;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  border:1px solid rgba(240,237,228,0.08);
}
.lightbox-caption{
  color:#f0ede4;
  font-family:'General Sans',sans-serif;
  font-size:13px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  margin-top:20px;
  text-align:center;
  max-width:90vw;
}
.lightbox-close{
  position:absolute;
  top:20px;
  right:24px;
  background:transparent;
  border:1px solid var(--csog-red);
  color:#f0ede4;
  width:44px;
  height:44px;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  font-family:'General Sans',sans-serif;
  transition:background 0.2s ease;
}
.lightbox-close:hover{background:var(--csog-red)}
@media (max-width:640px){
  .lightbox-img{max-width:98vw;max-height:78vh}
  .lightbox-caption{font-size:11px;letter-spacing:0.18em}
  .lightbox-close{top:12px;right:12px;width:38px;height:38px;font-size:22px}
  .shop-img-link::after{opacity:1;font-size:9px;padding:4px 8px}
}