/* ============================================================
   The Unshakeable Man, shared stylesheet.
   Extracted from index.html 2026-09-27. Every page links this
   instead of carrying its own copy. Page-specific rules stay in
   a small <style> block on that page, after this file loads.

   Do not re-inline this. The whole point is one place to change
   a colour, a font or the nav.
   ============================================================ */
:root{
  --navy:#0f1623; --navy-light:#161e2e; --charcoal:#1a2332; --charcoal-light:#1f2b3d;
  --gold:#c9a55c; --gold-light:#dbbe7a; --gold-glow:rgba(201,165,92,.15);
  --cream:#f5f0e8; --text-primary:#f0ece4; --text-secondary:#a8a299; --text-muted:#6b7280;
  --border-subtle:rgba(201,165,92,.12); --border-medium:rgba(201,165,92,.25);
  --gap:clamp(72px,9vw,124px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--text-primary);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300; line-height:1.75; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:900px; margin:0 auto; padding:0 22px}
.narrow{max-width:660px; margin:0 auto}
section{padding:var(--gap) 0}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; color:var(--cream); letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,4.4vw,2.7rem); line-height:1.2; margin:0 0 20px}
.eyebrow{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin:0 0 14px; font-family:'Inter',sans-serif;
}
p{margin:0 0 18px}
.lede{font-size:clamp(1.02rem,2vw,1.16rem)}
.muted{color:var(--text-secondary)}

/* ---------- hero ---------- */
.hero{padding:clamp(34px,5vw,58px) 0 0; text-align:center}
/* Was .9rem at 85% opacity in wide-tracked gold, which on this navy read as
   almost nothing, especially on a phone. Bigger, fully opaque, and the lighter
   gold so it holds its own at the top of the page. */
.mark{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.02rem,1.5vw,1.18rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-light);
  opacity:1; margin-bottom:clamp(38px,6vw,60px);
}
/* Attribution sits under the brand mark. Sentence-case italic with tight
   tracking so it reads as a signature, not a second headline competing
   with the wide-tracked mark above it. */
.mark-by{
  display:block; margin-top:9px;
  font-size:.82rem; letter-spacing:.1em; text-transform:none;
  font-style:italic; opacity:.8; color:var(--gold);
}
/* Hero deliberately breaks from the Cormorant used elsewhere. "Unshakeable,
   not just unstoppable" is a flat statement, not a flourish; an elegant italic
   serif fought it. Inter heavy, sentence case: firm without shouting. */
h1{
  font-family:'Inter',-apple-system,sans-serif;
  font-weight:800; font-size:clamp(2.2rem,7vw,4.3rem);
  line-height:1.04; letter-spacing:-.035em; margin:0 0 26px;
}
h1 .em{color:var(--gold); display:block}
.hero-sub{
  font-size:clamp(1.04rem,2.2vw,1.24rem); color:var(--text-secondary);
  max-width:31em; margin:0 auto 8px;
}
.hero-sub b{color:var(--cream); font-weight:500}

/* ---------- proof strip ---------- */
.proof{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin:clamp(38px,5vw,52px) 0 0; padding:26px 0;
  border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
}
.proof div{text-align:center}
.proof .n{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,3.6vw,2.15rem);
  color:var(--gold); font-weight:600; display:block; line-height:1.1;
}
.proof .l{font-size:.72rem; color:var(--text-muted); letter-spacing:.05em}

/* ---------- offer / capture ---------- */
.offer{background:var(--navy-light); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle)}
.offer .head{text-align:center; margin-bottom:34px}
.form-card{max-width:430px; margin:0 auto}
.field{
  width:100%; padding:15px 17px; margin-bottom:12px;
  background:var(--charcoal); color:var(--text-primary);
  border:1px solid var(--border-subtle); border-radius:4px;
  font-family:inherit; font-size:1rem; font-weight:300; transition:border-color .25s ease;
}
.field::placeholder{color:var(--text-muted)}
.field:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow)}
.btn{
  width:100%; padding:16px 20px; border:0; border-radius:4px; cursor:pointer;
  background:linear-gradient(180deg,var(--gold-light),var(--gold)); color:#1a1408;
  font-family:inherit; font-weight:600; font-size:.86rem; letter-spacing:.13em;
  text-transform:uppercase; transition:transform .18s ease, filter .18s ease;
}
.btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
/* .btn as a link. The base rule was written for a <button> inside a form, so it
   carries no display, no text-align and no text-decoration. Used on an <a> it
   lays out inline and underlines. */
a.btn{display:inline-block; text-align:center; text-decoration:none; color:#1a1408}
.btn:disabled{opacity:.6; cursor:default; transform:none}
.micro{font-size:.78rem; color:var(--text-muted); text-align:center; margin:12px 0 0}
.err{display:none; color:#e2857f; font-size:.83rem; text-align:center; margin:9px 0 0}

.tiles{display:grid; grid-template-columns:1fr; gap:18px; margin:40px auto 0; max-width:640px}
.tile{
  background:var(--charcoal); border:1px solid var(--border-subtle); border-radius:5px;
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s ease, transform .3s ease;
}
.tile.ready{cursor:pointer}
.tile.ready:hover{border-color:var(--border-medium); transform:translateY(-3px)}
.thumb{position:relative; aspect-ratio:16/10; background:var(--charcoal-light); overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; opacity:.5; transition:opacity .3s ease}
.tile.ready .thumb img{opacity:.82}
.tile.ready:hover .thumb img{opacity:1}
.badge{
  position:absolute; left:0; right:0; bottom:0; padding:16px 14px 13px; text-align:center;
  background:linear-gradient(to top,rgba(15,22,35,.97) 0%,rgba(15,22,35,.88) 45%,rgba(15,22,35,0) 100%);
}
.part{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:3px}
.tname{font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600; color:var(--cream); display:block}
.lock{position:absolute; top:11px; right:12px; font-size:.85rem; opacity:.75}
.tile.ready .lock{display:none}
.play{
  position:absolute; top:0; left:0; right:0; bottom:64px; margin:auto;
  width:50px; height:50px; border-radius:50%; border:1.5px solid var(--gold);
  background:rgba(15,22,35,.55); display:none; align-items:center; justify-content:center;
}
.tile.ready .play{display:flex}
.play::after{content:''; border-left:12px solid var(--gold); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px}
.tdesc{padding:14px 15px 17px; font-size:.82rem; line-height:1.6; color:var(--text-secondary); flex:1}
.frame{width:100%; aspect-ratio:16/9; border:0; display:block}

/* ---------- want list ---------- */
.want{list-style:none; padding:0; margin:0}
.want li{
  display:flex; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--border-subtle); color:var(--text-secondary);
}
.want li:last-child{border-bottom:0}
.want .a{color:var(--gold); flex-shrink:0}

/* ---------- quote ---------- */
blockquote{
  margin:0; padding:30px 28px; background:var(--charcoal);
  border:1px solid var(--border-subtle); border-radius:5px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.02rem,2.1vw,1.14rem); color:var(--text-secondary); line-height:1.75;
}
blockquote cite{
  display:block; margin-top:16px; font-family:'Inter',sans-serif; font-style:normal;
  font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gold); font-weight:600;
}

/* ---------- cta ---------- */
.cta{text-align:center; background:var(--navy-light); border-top:1px solid var(--border-subtle)}
.btn-ghost{
  display:inline-block; padding:15px 34px; border-radius:4px; border:1px solid var(--gold);
  color:var(--gold); text-decoration:none; font-weight:600; font-size:.82rem;
  letter-spacing:.13em; text-transform:uppercase; transition:background .25s ease,color .25s ease;
}
.btn-ghost:hover{background:var(--gold); color:#1a1408}

footer{text-align:center; padding:54px 0 46px; color:var(--text-muted); font-size:.78rem}
footer a{color:var(--text-secondary); text-decoration:none}
footer a:hover{color:var(--gold)}

@media (max-width:760px){
  .tiles{grid-template-columns:1fr; gap:15px}
  .thumb{aspect-ratio:16/9}
  .proof{grid-template-columns:1fr; gap:20px; padding:22px 0}
}

/* ---- Top navigation, added 2026-08-20 ----
   The site had no nav at all: every other page (practice, scorecard, sessions,
   and catchyourbreath.me) was reachable only if you already knew the URL.
   Sticky so it survives the long scroll, and it wraps rather than collapsing
   into a burger, because four items do not need a menu behind a tap. */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(15,22,35,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);
}
.topnav .inner{
  max-width:1080px; margin:0 auto; padding:11px 22px;
  display:flex; flex-wrap:wrap; gap:6px 26px;
  align-items:center; justify-content:center;
}
.topnav a{
  color:var(--text-secondary); text-decoration:none;
  font-size:.9rem; letter-spacing:.02em; white-space:nowrap; padding:4px 0;
}
.topnav a:hover{color:var(--gold-light)}
.topnav a.cta{color:var(--gold)}
@media(max-width:520px){
  .topnav .inner{gap:2px 14px; padding:7px 10px}
  .topnav a{font-size:.78rem; padding:2px 0}
}

/* ---- Join button in the nav -----------------------------------------
   Peter Crone's site keeps a permanent button pointing at the cheapest
   PAID rung, never at a call. This is that button. It must stay visually
   distinct from the text links or it reads as a sixth menu item. */
.topnav a.join{
  color:var(--navy); background:var(--gold);
  padding:7px 16px; border-radius:999px;
  font-weight:600; font-size:.85rem; letter-spacing:.01em;
}
.topnav a.join:hover{background:var(--gold-light); color:var(--navy)}
@media(max-width:520px){
  .topnav a.join{padding:5px 12px; font-size:.76rem}
}

/* ---- Price / offer card, used on community, group, courses ---------- */
.price-card{
  border:1px solid var(--border-medium); border-radius:14px;
  padding:clamp(26px,4vw,40px); background:var(--charcoal);
  text-align:center; margin:34px auto 0; max-width:520px;
}
.price-card .amount{
  font-family:'Cormorant Garamond',Georgia,serif; color:var(--cream);
  font-size:clamp(2.6rem,7vw,3.6rem); line-height:1; display:block; margin-bottom:4px;
}
.price-card .per{color:var(--text-secondary); font-size:.95rem; display:block; margin-bottom:22px}
.price-card .fine{color:var(--text-muted); font-size:.82rem; margin-top:16px}
.price-card ul{
  text-align:left; list-style:none; padding:0; margin:0 0 26px;
  color:var(--text-secondary); font-size:.97rem;
}
.price-card li{padding:9px 0 9px 26px; position:relative; border-bottom:1px solid var(--border-subtle)}
.price-card li:last-child{border-bottom:0}
.price-card li::before{content:"\2014"; position:absolute; left:0; color:var(--gold)}

/* ---- Brand strip ----------------------------------------------------
   Peter Crone's homepage puts "Trusted by Elite Performers" immediately
   under the hero, before he asks for anything. Same slot, same job.

   The band sits on its own colour so the row reads as one object rather
   than fifteen loose marks floating on the page background. That also
   hides the biggest problem with supplied logo artwork: it arrives
   black-on-white, gold-on-brown, pale-blue-on-white and everything in
   between. Every mark is flattened to a single colour by
   ~/normalise-logos.py before it gets here, so the band only has to
   handle one ink.

   Each slot degrades: if the PNG is missing the <img> hides itself via
   onerror and the brand NAME shows instead. So the strip is never broken,
   it is just less finished. -------------------------------------------- */
.brands{
  background:var(--navy-light);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  padding:clamp(40px,5vw,62px) 0;
}
.brands .eyebrow{text-align:center; margin-bottom:26px}
.brands .list{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(18px,3vw,38px) clamp(24px,4vw,52px);
  max-width:940px; margin:0 auto;
}
/* The PNGs are already balanced by optical AREA, so a single max-height here
   would throw that away and squash the tall marks (Immersiv, Echoes) to
   nothing. Give height and width generous independent caps and let each
   mark's own aspect ratio decide. */
.brands .b{display:inline-flex; align-items:center; justify-content:center; min-height:34px}
.brands .b img{
  height:auto; width:auto; max-height:54px; max-width:200px; display:block;
  opacity:.72; transition:opacity .25s ease;
}
.brands .b:hover img{opacity:1}
.brands .b.noimg .nm{display:inline}
/* Hidden by default; the img's onerror adds .noimg to the slot, which is
   the only thing that reveals the name. Without this the name would sit
   next to a logo that loaded fine. */
.brands .b .nm{display:none;
  color:var(--text-secondary); font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
}
@media(max-width:600px){
  .brands .list{gap:14px 22px}
  .brands .b{min-height:24px}
  .brands .b img{max-height:38px; max-width:132px}
  .brands .b .nm{font-size:.74rem; letter-spacing:.04em}
}

/* ---- The ladder -----------------------------------------------------
   The single biggest thing missing from this homepage. Peter shows every
   rung on the front page in price order so a visitor can place himself.
   Rungs that do not exist yet are marked, not hidden: an unmarked
   "coming soon" reads as a broken link, and the _redirects catch-all
   will serve the homepage at 200 rather than 404 if one is wrong. */
.ladder{display:grid; gap:14px; margin-top:34px}
.rung{
  display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:center;
  border:1px solid var(--border-subtle); border-radius:12px;
  padding:20px 24px; background:var(--charcoal); text-decoration:none;
}
a.rung:hover{border-color:var(--border-medium); background:var(--charcoal-light)}
.rung .name{font-family:'Cormorant Garamond',Georgia,serif; font-size:1.3rem; color:var(--cream)}
.rung .desc{grid-column:1/-1; color:var(--text-secondary); font-size:.95rem; margin:0}
.rung .tag{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.rung .tag.soon{color:var(--text-muted)}
@media(max-width:560px){
  .rung{grid-template-columns:1fr; padding:17px 18px}
  .rung .tag{margin-top:2px}
}

/* ---- Portrait beside a text block -----------------------------------
   Used on the story section. Stacks under the text on narrow screens so
   the copy always leads. */
.withpic{display:grid; grid-template-columns:1fr 400px; gap:clamp(26px,4vw,48px); align-items:start}
.withpic figure{margin:0}   /* browsers default <figure> to 40px side margins,
                               which silently ate 80px of a 400px column and
                               made the portrait look shrunken. */
.withpic img{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--border-subtle);
}
.withpic .cap{font-size:.76rem; color:var(--text-muted); margin-top:10px; text-align:center}
@media(max-width:980px){
  .withpic{grid-template-columns:1fr}
  .withpic figure{order:-1; max-width:430px; margin:0 auto 26px}
}

/* A photograph that runs the full column. Used where the picture is landscape
   and there is no copy to sit beside it. */
.band{margin:0 0 40px !important}
.band img{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--border-subtle);
}


/* Inline links inside body copy. Without this they fall back to the browser
   default blue-and-underlined, which on a navy and gold page looks like a
   mistake. Spotted on the Brotherhood price card, where the Pocket Ashley
   link sat in a list of gold dashes rendering bright blue. */
.price-card a:not([class]), .narrow p a:not([class]), .inside p a:not([class]){
  color:var(--gold-light); text-decoration:none;
  border-bottom:1px solid var(--border-medium);
}
.price-card a:not([class]):hover, .narrow p a:not([class]):hover, .inside p a:not([class]):hover{
  color:var(--gold); border-bottom-color:var(--gold);
}

/* Testimonial wall. WhatsApp screenshots, deliberately left as screenshots
   because a transcription of a message is just text and anyone can type text.
   CSS columns rather than grid: the images are every height from 323 to 973px
   and a grid would leave ragged gaps under the short ones. */
.proofwall{column-count:2; column-gap:18px; margin-top:34px}
.proofwall figure{margin:0 0 16px; break-inside:avoid; -webkit-column-break-inside:avoid}
.proofwall img{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--border-subtle);
}
@media(max-width:620px){ .proofwall{column-count:1} }

/* Next-session dates on the event cards. Computed in the browser from the rule
   rather than typed in, so they can never go stale, and rendered in the
   visitor's own timezone because the audience is spread from London to Sydney. */
.nextup{
  margin:14px 0 0; padding:12px 14px; border-radius:8px;
  background:var(--navy-light); border:1px solid var(--border-subtle);
}
.nextup .lead{color:var(--cream); font-weight:600; font-size:.95rem; display:block}
.nextup .then{color:var(--text-muted); font-size:.82rem; display:block; margin-top:5px}

/* The founding terms, when the discount IS the offer rather than a footnote.
   .fine is muted grey at .82rem, which is where you put a disclaimer, not where
   you put the reason someone buys today. */
.price-card .founding{
  margin:18px 0 0; padding:13px 16px; border-radius:8px;
  background:var(--gold-glow); border:1px solid var(--border-medium);
  color:var(--cream); font-size:.95rem; line-height:1.5;
}
.price-card .founding strong{color:var(--gold-light)}

/* ---- Menu v2, 2026-10-10 --------------------------------------------
   One menu on every page, written by tools/sync-nav.py. Name on the left
   takes you home, links on the right, the Brotherhood button last. On a
   phone: name on its own line, links in one centred row underneath. */
.topnav{line-height:1.75}
.topnav .inner{justify-content:space-between; gap:10px 24px; padding:12px 24px}
.topnav .brand{font-family:'Cormorant Garamond',Georgia,serif; font-size:1.2rem; letter-spacing:.03em; color:var(--cream)}
.topnav .brand:hover{color:var(--gold-light)}
.topnav .links{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 22px}
.topnav a[aria-current="page"]:not(.join):not(.brand){color:var(--gold)}
.topnav a.join[aria-current="page"]{box-shadow:0 0 0 2px var(--gold-light)}
@media(max-width:760px){
  .topnav .inner{flex-direction:column; justify-content:center; gap:6px; padding:8px 12px}
  .topnav .links{justify-content:center; gap:4px 14px}
  .topnav .brand{font-size:1.05rem}
}

/* ---------- top action, 2026-10-14 ----------
   Ashley: "why isn't the website converting". Measured 14 Oct: no page had a
   real button on the first phone screen, the mentoring page's only booking
   button was the last thing on it, and the first testimonial was on screen 6.
   7 of 8 peer coaches put a button before any scrolling. So every offer page
   now opens with his face, one button for the page's own next step, and one
   line of proof. */
.hero-face{
  width:76px; height:76px; border-radius:50%; object-fit:cover; display:block;
  margin:0 auto 14px; border:1.5px solid var(--gold);
}
.top-cta{max-width:420px; margin:22px auto 0; text-align:center}
.top-cta .btn{width:100%}
.top-cta .alt{display:block; margin-top:12px; font-size:.82rem; color:var(--text-muted)}
.top-cta .alt a{color:var(--gold-light)}
blockquote.top-quote{
  max-width:560px; margin:22px auto 0; padding:18px 22px; text-align:left;
  font-size:clamp(1rem,2vw,1.08rem); line-height:1.6;
}
blockquote.top-quote cite{margin-top:10px; font-size:.68rem}