/* Holy City Athletics — site-wide system, locked from the approved homepage (PPP anchor). */
:root{
  --ink:#0E0D0A; --ink-2:#171612; --paper:#F7F4ED; --paper-2:#EFEBE0;
  --card:#FFFDF8;
  --gold:#DAA520; --gold-deep:#8A6410; --line:#E4DFD4; --line-dk:#33302A;
  --txt:#3E3C36; --txt-inv:#C9C4B8;
  /* display type scale, 1.18 ratio. Every fixed display size is one of these. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --label:#706B5C; --edge:#7E7968;
  /* Twemoji baseball, CC BY 4.0, tilted 22deg. One token, three call sites. */
  /* A short rule, for lists with no value on the right. A check was the
     SaaS-pricing default; the lists that need a mark at all only need to
     show where a row starts. */
  --bullet:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%2012h14%22%20stroke%3D%22%238A6410%22%20stroke-width%3D%222.6%22%2F%3E%3C%2Fsvg%3E');
  --t1:.85rem; --t2:1rem; --t3:1.18rem; --t4:1.4rem; --t5:1.65rem;
  --t7:2.3rem; --t9:3.2rem;
  --disp:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:20px}

h2{font-family:var(--disp);font-weight:700;font-style:normal;text-transform:uppercase;
  font-size:clamp(1.9rem,4.8vw,3rem);line-height:.98;letter-spacing:-.012em;
  margin:0 0 .9rem;text-wrap:balance}
h2 em{font-style:italic;color:var(--gold-deep)}
/* the lean is the emphasis now, so it needs a hair of space after it */
h2 em{padding-right:.06em}
.dark h2 em,.goldband h2 em{color:inherit}
.dark h2 .em-d{color:var(--gold)}
h3{font-family:var(--disp);font-weight:700;font-style:normal;text-transform:uppercase;
  letter-spacing:-.006em;margin:0;line-height:1.05}
p{margin:0 0 1rem;max-width:64ch;color:var(--txt)}
.dark p{color:var(--txt-inv)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--disp);
  font-weight:700;font-style:normal;font-size:var(--t2);letter-spacing:.06em;
  text-transform:uppercase;padding:.9rem 1.7rem;border:2px solid transparent;cursor:pointer;
  /* <button> defaults to line-height:normal while an <a> inherits the body's
     1.62, which left the two form submits 7px shorter than every other button */
  line-height:1.62;
  transition:transform .12s ease-out,background .15s ease,color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-ink-wire{border-color:#17120A;color:#17120A;background:none}
.btn-ink-wire:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-gold{background:var(--gold);color:#17120A;border-color:var(--gold-deep)}
/* on a dark ground the gold fill is already an 8.84:1 edge, so it keeps a
   flush border; on light grounds it is 2.2:1 and needs the deeper ring */
.baseband .btn-gold,.ctaband .btn-gold,.dk .btn-gold,.phero .btn-gold,
.dark .btn-gold,.method .btn-gold,.velo .btn-gold{border-color:var(--gold)}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-wire{border-color:var(--edge);color:var(--ink);background:none}
/* one light-ghost control, not two: these were separate rules whose text
   colours differed by three RGB points. */
.btn-wire-lt,.btn-ghost-lt{border-color:var(--edge);color:#F2EEE4;background:none}
.btn-wire:hover{border-color:var(--gold);color:var(--gold-deep)}
.btn-wire-lt:hover,.btn-ghost-lt:hover{border-color:var(--gold);color:var(--gold);background:none}

/* header */
.top{background:var(--ink);color:#B9B4A8;font-size:.85rem}
.top .wrap{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);justify-content:center;padding-block:.45rem}
.top b{color:var(--gold);font-weight:600}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:var(--s4);padding-block:.6rem}
.brand{display:flex;align-items:center;gap:var(--s2);flex:none}
.brand img{width:64px;height:64px;object-fit:contain}
.brand span{font-family:var(--disp);font-weight:700;font-style:normal;text-transform:uppercase;
  font-size:var(--t3);line-height:.92}
.brand span i{display:block;font-style:normal;font-size:.62em;color:var(--gold-deep)}
/* the nav used to be shoved right against the actions, which left one dead
   315px hole after the brand at 1440 and then snapped to the hamburger at
   1020 with 116px still spare. It now centres in the space it has, and the
   gap and size track the viewport so it keeps fitting down to 900. */
nav.main{margin-inline:auto;display:flex;align-items:center;
  gap:clamp(.875rem, 2.387vw - .648rem, 1.5rem);font-family:var(--disp);font-weight:500;
  font-size:clamp(.86rem, .519rem + .535vw, 1rem);letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap}
nav.main a{padding-block:.25rem;border-bottom:2px solid transparent}
nav.main a:hover{border-color:var(--gold)}
.hdr-cta{flex:none;display:flex;align-items:center;gap:var(--s4)}
.hdr-phone{font-weight:700;font-size:.95rem}
.burger{display:none;margin-left:auto;background:none;border:0;
  padding:.5rem .65rem;cursor:pointer;min-height:44px;min-width:44px;
  align-items:center;justify-content:center;flex-direction:column}
.burger:hover span{background:var(--gold-deep)}
.burger{color:var(--ink)}
.burger span{display:block;width:19px;height:2px;background:var(--ink);margin:4px 0}
.m-cta{display:none}
.burger span{transition:transform .15s ease,opacity .15s ease}
/* the top utility bar carries the number at every width, so the header copy
   of it is the first thing to go when the bar gets tight. */
@media (max-width:1180px){.hdr-phone{display:none}}
@media (max-width:1060px){header.site .wrap .btn{padding-inline:1.15rem}}
@media (max-width:900px){
  .burger{display:flex}
  nav.main{margin-inline:0}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;gap:0;background:var(--ink);border-top:1px solid #2A2822;
    padding:.3rem 0 1.1rem;box-shadow:0 22px 34px rgba(0,0,0,.4)}
  header.site.nav-open nav.main{display:flex}
  nav.main a:not(.btn){color:#F2EEE4;font-size:var(--t3);min-height:48px;display:flex;align-items:center;
    padding:.35rem 20px;border-bottom:1px solid #26241E}
  nav.main a:hover{border-color:#26241E}
  nav.main a[aria-current=page]{color:var(--gold);border-color:#26241E;box-shadow:inset 3px 0 0 var(--gold)}
  .m-cta{display:flex;flex-direction:column;gap:var(--s3);padding:1rem 20px 0}
  .m-cta .btn{width:100%;min-height:48px}
  .m-phone{display:flex;align-items:center;justify-content:center;min-height:48px;
    font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t3);
    letter-spacing:.05em;color:var(--gold);border:2px solid #56534A}
  header.site.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  header.site.nav-open .burger span:nth-child(2){opacity:0}
  header.site.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (max-width:560px){.hdr-cta .btn{display:none}}

/* starline */
.starline{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:.95rem;margin-bottom:.9rem}
.starline a{text-decoration:underline}
.stars{display:flex;gap:var(--s1);color:var(--gold)}
.stars svg{width:17px;height:17px;fill:currentColor;display:block}

/* hero */
.hero{background:var(--paper-2);border-bottom:1px solid var(--line);overflow-x:clip}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:center;padding-block:clamp(2.6rem,6vw,4.4rem)}
h1{font-family:var(--disp);font-weight:800;font-style:normal;text-transform:uppercase;
  font-size:clamp(2.5rem,6.6vw,4.3rem);line-height:.95;letter-spacing:-.018em;
  margin:0 0 1rem;text-wrap:balance}
h1 em{font-style:italic;color:var(--gold-deep);padding-right:.06em}
/* the promise reads first; the category line keeps the h1 for search and
   steps back into a kicker above it */
.hero h1.kicker{font-family:var(--disp);font-weight:600;font-style:normal;font-size:var(--t2);
  line-height:1.35;letter-spacing:.13em;text-transform:uppercase;color:var(--label);
  margin:0 0 .85rem}
.hero .headline{font-family:var(--disp);font-weight:800;font-style:normal;text-transform:uppercase;
  font-size:clamp(2.1rem,5.4vw,3.4rem);line-height:.99;letter-spacing:-.016em;
  margin:0 0 1rem;text-wrap:balance;color:var(--ink)}
.hero .headline em{font-style:italic;color:var(--gold-deep);padding-right:.06em}
.hero .lede{font-size:var(--t4);line-height:1.38;max-width:34ch;color:var(--ink)}
.hero .sig{font-family:var(--disp);font-weight:700;font-style:italic;font-size:var(--t2);
  letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 1.4rem}
.hero-acts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}
@media (max-width:640px){
  .hero-acts{flex-direction:column;align-items:stretch}
  .hero-acts .btn{width:100%;min-height:48px}
  /* the homepage hero pairs its two actions on one row, so the photo is not
     pushed a full button-height further below the fold */
  .hero .hero-acts{flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--s2)}
  .hero .hero-acts .btn{flex:1 1 0;width:auto;min-width:0;padding:.98rem .55rem;
    justify-content:center;text-align:center;font-size:.92rem;white-space:nowrap}
}
.hero-card{position:relative}
.hero-card figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:#111}
@media (min-width:1081px){
  /* bleed the hero photo to the viewport edge: the gutter is half the leftover
     width plus the wrap's own padding, measured off the wrap, never off the cell */
  .hero .wrap{padding-right:0}
  .hero-card{margin-right:calc(-1 * max(0px, (100vw - 1180px) / 2))}
  .hero-card figure{aspect-ratio:auto;height:clamp(420px,46vw,620px)}
  .hero-card img{object-position:52% 50%}
}
.hero-card img{width:100%;height:100%;object-fit:cover;object-position:52% 50%}
/* the phone block used to sit absolutely over the photo, where it covered the
   athlete. It now closes the left column instead, which also fills the 96px of
   dead space that sat under the buttons. */
.hero-call{margin:var(--s5) 0 0;display:flex;align-items:baseline;gap:var(--s2) var(--s4);
  flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s4)}
.hero-call b{font-family:var(--disp);font-weight:700;font-style:normal;
  font-size:var(--t7);line-height:1;letter-spacing:-.014em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.hero-call span{font-size:.95rem;color:var(--txt)}
.hero-call a{text-decoration:underline;text-underline-offset:.18em;
  text-decoration-color:var(--edge)}
.hero-call a:hover{color:var(--gold-deep);text-decoration-color:var(--gold-deep)}
/* one action in the hero, so it gets room to be the action */
.hero .hero-acts .btn{padding-inline:2.2rem}
/* owner, ages, neighbourhood on one rule-separated row, so the signature stops
   sitting between the copy and the buttons and interrupting read-then-act */
.hmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);
  margin:var(--s4) 0 var(--s5);font-family:var(--disp);font-weight:500;font-size:var(--t1);
  letter-spacing:.07em;text-transform:uppercase;color:var(--label)}
.hmeta b{font-weight:700;font-style:italic;color:var(--gold-deep)}
.hmeta span{position:relative;padding-left:var(--s4)}
.hmeta span::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;
  width:1px;background:var(--line)}
/* below 360 the row wraps and the divider would hang at the start of line 2 */
@media (max-width:360px){
  .hmeta{display:block}
  .hmeta span{display:block;padding-left:0;margin-top:.2rem}
  .hmeta span::before{display:none}
}
@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-card{margin-bottom:1.2rem}
}

/* giant velo band */
.velo{background:#0B0A08;color:#F5F2EB;border-top:3px solid var(--gold)}
.velo .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,5vw,4rem);
  align-items:center;padding-block:clamp(2.6rem,6vw,4.2rem)}
.velo .num{font-family:var(--disp);font-weight:700;font-style:normal;letter-spacing:-.022em;
  font-size:clamp(3.6rem,11vw,8rem);line-height:.9;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.velo .num small{display:block;font-size:.16em;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#A9A498;margin-top:.55rem;white-space:normal}
.velo p{color:#C9C4B8;max-width:46ch;font-size:1.04rem}
@media (max-width:760px){.velo .wrap{grid-template-columns:1fr}}

/* floating mobile call pill (call only; house rule) */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:block;position:fixed;right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
    z-index:80;background:none;border:0;padding:0}
  .mbar a.call{display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;padding:.75rem 1.5rem;border-radius:999px;
    background:var(--gold);color:#17120A;font-family:var(--disp);font-weight:700;
    font-style:normal;font-size:var(--t2);letter-spacing:.05em;text-transform:uppercase;
    box-shadow:0 3px 0 rgba(14,13,10,.85)}
  .mbar a.call:active{transform:scale(.97)}
}

/* stat band */
.stats{background:var(--ink);color:#F5F2EB}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s5) clamp(1.4rem,3.4vw,3rem);padding-block:clamp(1.9rem,4vw,2.6rem)}
.stat{text-align:left;padding:1.05rem 0 0;position:relative}
.stat::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;
  background:var(--gold)}
.stat b{display:flex;align-items:center;gap:var(--s2);font-family:var(--disp);font-weight:700;
  font-style:normal;font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1;color:#F5F2EB;
  font-variant-numeric:tabular-nums;letter-spacing:-.012em}
.stat b .st{width:.72em;height:.72em;fill:currentColor;flex:none}
.stat small{display:block;margin-top:.35rem;font-size:.82rem;color:#A9A498}
/* one parent's words anchor the numbers: quote left, three stats right */
.statsplit{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center;padding-block:clamp(1.9rem,4vw,2.6rem)}
.statquote{margin:0;border-left:3px solid var(--gold);padding-left:1.15rem}
.statquote .stars svg{width:15px;height:15px}
.statquote p{margin:.5rem 0 .45rem;font-size:1.02rem;line-height:1.5;color:#F5F2EB}
.statquote cite{display:flex;align-items:center;gap:.5rem;font-style:normal;
  font-family:var(--disp);font-weight:500;font-size:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;color:#A9A498}
.statquote cite .rev-g-inline{width:15px;height:15px;flex:none}
.statsplit .grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5) clamp(1.1rem,2.4vw,1.8rem);padding-block:0}
@media (max-width:860px){
  .statsplit{grid-template-columns:1fr;gap:1.5rem;align-items:start}
}
@media (max-width:760px){
  .stats .grid{grid-template-columns:1fr 1fr;row-gap:var(--s5);padding-block:1.5rem}
}

section{padding-block:clamp(3.2rem,7vw,5.4rem)}
.dark{background:var(--ink-2);color:#F5F2EB}
.goldband{background:var(--gold);color:#17120A}
/* B.A.S.E. band: photo ground, gold as a mark */
.baseband{position:relative;isolation:isolate;background:#0B0A08;color:#F5F2EB;overflow:hidden}
.baseband .basebg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:58% 40%;opacity:.94;z-index:-2}
/* The scrim protects the copy, it does not tint the picture: dense only where
   the text sits, clearing to almost nothing over the open side. */
.baseband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(11,10,8,.93) 10%,rgba(11,10,8,.90) 58%,rgba(11,10,8,.44) 80%,rgba(11,10,8,.09) 100%)}
.baseband .wrap{position:relative;padding-block:clamp(3rem,7vw,5rem)}
.baseband .sec-head{max-width:60ch}
.baseband h2{color:#F7F4ED}
.baseband h2 em{color:var(--gold)}
.baseband p{color:var(--txt-inv)}
.baseband .checks span{color:#EDE9DE}
.baseband .btn-ink{background:var(--gold);color:#17120A;border-color:var(--gold)}
.baseband .btn-ink:hover{background:#E8B732;border-color:#E8B732;color:#17120A}
@media (max-width:860px){
  /* the 95deg scrim only darkens the first ~14% of the width, which at phone
     width leaves the copy on bright turf (measured 4.47:1). Go vertical. */
  .baseband .basebg{opacity:.9;object-position:60% 42%}
  .baseband::after{background:linear-gradient(180deg,rgba(11,10,8,.80) 0%,rgba(11,10,8,.90) 26%,rgba(11,10,8,.90) 74%,rgba(11,10,8,.46) 100%)}
}
.goldband h2,.goldband h3{color:#17120A}
.goldband p{color:#4A3B14}
.sec-head{max-width:760px;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.sec-head.row{max-width:none;display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;
  justify-content:space-between}

/* program cards */
.prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.prog{display:flex;flex-direction:column;background:var(--card);border:0;box-shadow:0 1px 0 #E7E1D4, 0 0 0 1px #EFE9DC;
  transition:border-color .2s ease,transform .2s ease}
.prog:hover{box-shadow:0 2px 0 #D9CDA8, 0 0 0 1px var(--gold);transform:translateY(-3px)}
.prog figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#111}
.prog img{width:100%;height:100%;object-fit:cover}
.prog .bd{padding:1.1rem 1.1rem 1.25rem;display:flex;flex-direction:column;gap:var(--s2);flex:1}
.prog h3{font-size:var(--t4)}
.prog .price{font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t3);
  color:var(--gold-deep)}
.prog .bfor{margin:0;font-size:.89rem;color:var(--ink)}
.prog .bfor b{display:block;font-family:var(--disp);font-weight:500;font-size:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;color:var(--label);margin-bottom:.1rem}
.prog p{margin:0;font-size:.93rem;flex:1}
.prog a{font-weight:700;font-size:.9rem;color:var(--ink)}
.prog a:hover{color:var(--gold-deep)}
.prog .bd .btn{margin-top:auto;align-self:flex-start;font-size:var(--t2);padding:.65rem 1.2rem;min-height:44px}
.prog .bd a.btn-ink,.prog .bd a.btn-ink:hover{color:#fff}
.prog .bd .btn-ink-wire{color:#17120A}
.prog .bd .btn-ink-wire:hover{color:#fff}
/* the team strip is an aside to the grid, not a fifth weaker card: no box,
   a rule to hang it off, and the price set like every other price on the site */
/* was a flex row with the copy left and the button hard right, which left a
   376px hole down the middle at 1440 and buried the price inside a running
   sentence. Now a three-part band: the figure, the offer, the action. */
.teamstrip{margin-top:28px;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--s5);background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--gold-deep);padding:1.25rem 1.5rem}
.teamstrip .tsamt{display:flex;flex-direction:column;gap:.1rem;padding-right:var(--s5);
  border-right:1px solid var(--line)}
.teamstrip .price{font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t7);
  line-height:1;letter-spacing:-.016em;color:var(--ink);font-variant-numeric:tabular-nums}
.teamstrip .tsamt small{font-family:var(--disp);font-weight:500;font-size:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;color:var(--label)}
.teamstrip .tstxt{max-width:56ch}
.teamstrip b{display:block;font-family:var(--disp);font-weight:500;font-size:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;color:var(--label);margin-bottom:.25rem}
.teamstrip p{margin:0;font-size:.95rem;color:var(--txt)}
.teamstrip .btn{flex:none;white-space:nowrap}
.teamstrip:hover{border-color:var(--gold-deep)}
.teamstrip:hover .btn{background:var(--gold);border-color:var(--gold-deep);color:#17120A}
/* two rentals as a pair: side by side above 880px, each band compact with
   its button pinned to the bottom edge so the pair reads symmetric. A
   full-width band leaves a dead field between its copy and its button once
   there are only two of them; halving the width closes it. */
.bandpair{margin-top:28px;display:grid;gap:var(--s4)}
.bandpair .teamstrip{margin-top:0;grid-template-columns:1fr;grid-template-rows:1fr auto;
  gap:var(--s4);align-items:start;padding:1.35rem 1.5rem 1.4rem;
  border-left:1px solid var(--line)}
/* the offer picks the reader, so the label leads and the price supports it,
   the same hierarchy as the three cards above */
.bandpair .teamstrip h3{margin:0;font-size:var(--t4)}
.bandpair .teamstrip .bprice{display:block;font-family:var(--disp);font-weight:700;
  font-style:normal;font-size:var(--t3);color:var(--gold-deep);margin-top:.15rem}
.bandpair .teamstrip .tstxt p{margin-top:.55rem}
.bandpair .teamstrip .btn{justify-content:center}
@media (min-width:881px){
  .bandpair{grid-template-columns:1fr 1fr}
}

/* a stack of bands lines its figures and its buttons up; a lone band has
   nothing to line up with, so it keeps sizing itself to its content */
@media (min-width:861px){
  .bandstack .teamstrip{grid-template-columns:6.5rem 1fr 12.5rem}
  .bandstack .teamstrip .btn{width:100%}
}
@media (max-width:860px){
  .teamstrip{grid-template-columns:auto 1fr;gap:var(--s4) var(--s5);padding:1.2rem 1.25rem}
  .teamstrip .btn{grid-column:1/-1;justify-content:center}
}
@media (max-width:460px){
  .teamstrip{grid-template-columns:1fr}
  .teamstrip .tsamt{flex-direction:row;align-items:baseline;gap:var(--s3);
    border-right:0;border-bottom:1px solid var(--line);padding:0 0 var(--s3)}
}
@media (max-width:980px){.prog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.prog-grid{grid-template-columns:1fr}}

/* method */
.method .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.6rem);align-items:center}
.method figure{margin:0;border:1px solid var(--line-dk);overflow:hidden;aspect-ratio:4/5;background:#000}
.method img{width:100%;height:100%;object-fit:cover}
/* The path from stranger to training, three steps, cheapest first. Both
   brands in this vertical that scaled from one location to many lead with
   a free first look; $30 is the closest this business can get, so it goes
   first and the lesson price comes second. */
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5);align-items:stretch;counter-reset:none}
.path li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  background:var(--card);border:1px solid var(--line);padding:1.5rem 1.4rem}
.path li>div{display:flex;flex-direction:column;gap:var(--s3);height:100%}
.path b{font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t7);
  font-variant-numeric:tabular-nums;
  line-height:.9;letter-spacing:-.016em;color:var(--gold-deep)}
.path h3{font-size:var(--t4);margin:0}
.path .amt{font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t5);
  line-height:1;letter-spacing:-.014em;color:var(--ink);font-variant-numeric:tabular-nums}
.path p{margin:0;font-size:.95rem;color:var(--txt);flex:1}
.path .btn{align-self:flex-start;justify-content:center}
@media (max-width:980px){.path{grid-template-columns:1fr}
  .path .btn{align-self:stretch}}
/* Jacob's own words, lightly cleaned from the interview rather than written
   for him -- so this block keeps contractions where the rest of the site
   spells them out. The signature is what licenses the register shift. */
.jsec{background:var(--paper-2)}
.jvoice{max-width:64ch;display:grid;gap:var(--s4)}
.jvoice p{margin:0;font-size:1.06rem;line-height:1.68;color:var(--txt)}
.jvoice p:first-child{font-size:1.2rem;line-height:1.56;color:var(--ink)}
.jvoice p.bigline{font-family:var(--disp);font-weight:800;font-style:normal;text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.04;letter-spacing:-.012em;color:var(--ink);max-width:24ch;text-wrap:balance}
.jvoice p.bigline em{font-style:italic;color:var(--gold-deep)}
.jsig{font-family:var(--disp);font-weight:700;font-style:italic;font-size:var(--t2);
  line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);
  border-top:1px solid var(--line);padding-top:var(--s4)}
.dark .jvoice p,.method .jvoice p{color:#E8E3D6}
.dark .jvoice p:first-child,.method .jvoice p:first-child{color:#F5F2EB}
.dark .jsig,.method .jsig{color:var(--gold);border-top-color:var(--line-dk)}
@media (max-width:640px){.jvoice p{font-size:1rem}.jvoice p:first-child:not(.bigline){font-size:1.1rem}}
.steps{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:0;max-width:58ch}
/* .steps and .quote default to a LIGHT ground and invert on dark surfaces.
   They used to assume dark, so /lessons/pitching/ rendered them at 1.58:1. */
/* the content is a progression, so the list reads as one: a hairline runs
   down the numeral column and stops at the last rung. Bare numerals, no
   filled chip -- a disc around a saturated colour is the template tell. */
.steps li{display:grid;grid-template-columns:2.1rem 1fr;gap:var(--s4);color:var(--txt);
  position:relative;padding-bottom:1.15rem}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:1.05rem;top:2.05rem;bottom:0;
  width:1px;background:#D8D2C4}
.steps li:last-child::before{display:none}
.steps b{font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t5);
  color:var(--gold-deep);line-height:1;letter-spacing:-.014em;text-align:center;
  position:relative;z-index:1;background:var(--paper);padding-bottom:.2rem}
.steps span{padding-top:.14rem}
.steps span strong{color:var(--ink);font-weight:700}
/* a four-rung ladder in a wide section leaves half the row empty, so above
   900px it turns on its side: the hairline runs across the numeral row
   instead of down it and the sequence reads left to right. */
@media (min-width:900px){
  .steps.across{grid-template-columns:repeat(4,1fr);max-width:none;margin-top:var(--s7)}
  .steps.across li{display:block;padding:0 var(--s6) 0 0}
  .steps.across li:last-child{padding-right:0}
  .steps.across li::before{left:0;right:0;top:.82rem;bottom:auto;width:auto;height:1px}
  .steps.across b{display:inline-block;text-align:left;padding:0 var(--s3) .2rem 0}
  .steps.across span{display:block;padding-top:var(--s3)}
}
.quote{border-left:3px solid var(--gold-deep);padding:.2rem 0 .2rem 1.1rem;margin:1.6rem 0 0;
  font-size:1.04rem;color:var(--txt);max-width:56ch}
.dark .steps li,.method .steps li,.phero .steps li,.baseband .steps li,.velo .steps li{color:var(--txt-inv)}
.dark .steps b,.method .steps b,.phero .steps b,.baseband .steps b,.velo .steps b{color:var(--gold)}
.dark .steps li::before,.method .steps li::before,.phero .steps li::before,
.baseband .steps li::before,.velo .steps li::before{background:var(--line-dk)}
.dark .steps b,.method .steps b,.velo .steps b{background:var(--ink-2)}
.baseband .steps b,.phero .steps b,.ctaband .steps b{background:none}
.prog .steps b,.tier .steps b,.camps-line .steps b{background:var(--card)}
.dark .steps span strong,.method .steps span strong,.phero .steps span strong,
.baseband .steps span strong,.velo .steps span strong{color:#F5F2EB;font-weight:600}
.dark .quote,.method .quote,.phero .quote,.baseband .quote,.velo .quote{
  border-left-color:var(--gold);color:#E8E3D6}
.quote cite{display:block;margin-top:.4rem;font-style:normal;font-size:.85rem;color:#A9A498}
@media (max-width:860px){.method .wrap{grid-template-columns:1fr}.method figure{aspect-ratio:16/11}}

/* membership tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch}
.tier{display:flex;flex-direction:column;gap:var(--s3);background:var(--card);border:1px solid #E3D9BE;
  padding:1.5rem 1.4rem}
.tier.feat{border:2px solid var(--ink);background:var(--ink-2);color:#EDEAE2}
.tier.feat h3{color:#F5F2EB}
.tier.feat .bestfor{color:#C9C4B8}
.tier.feat .amt{color:var(--gold)}
.tier.feat .amt small{color:#A7A294}
.tier.feat ul{color:#D8D4C9}
.tier.feat li{border-top-color:var(--line-dk)}
.tier.feat li i{color:var(--gold)}
.tier.feat .breakeven{color:#C9C4B8;border-top-color:var(--line-dk)}
.tier h3{font-size:var(--t4)}
.tier .bestfor{font-size:.9rem;color:#4A3B14;margin:0;min-height:2.6em}
.tier .amt{font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t7);letter-spacing:-.014em;
  line-height:1;font-variant-numeric:tabular-nums}
.tier .amt small{font-family:var(--body);font-style:normal;font-weight:600;font-size:var(--t1);color:#6E6A5E}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:0;align-content:start;
  font-size:.93rem;color:#3E3C36;flex:1}
/* A label on the left and a figure on the right is a complete row, so these
   lose the mark and gain a hairline: a spec table rather than a checklist. */
.tier li{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:baseline;
  padding:.62rem 0;border-top:1px solid #CEC6B1}
.tier li:first-child{border-top:0;padding-top:.2rem}
/* what the line is worth a la carte, so the monthly price has something
   to be measured against. Figures only -- every one is a posted rate. */
.tier li i{font-family:var(--disp);font-style:normal;font-weight:700;font-size:var(--t1);
  letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tier .breakeven{margin:0;font-size:.86rem;line-height:1.45;color:#6E6A5E;
  border-top:1px solid var(--line);padding-top:var(--s3)}
.tier .btn{justify-content:center}
/* the flagship membership panel on /pricing/: the one product that gets a
   different layout, not a decorated sibling card. One dark band, gold price. */
.flagship{background:var(--ink-2);color:#EDEAE2;border:2px solid var(--ink);
  padding:clamp(1.5rem,3.6vw,2.4rem);display:grid;gap:var(--s4)}
@media (min-width:861px){.flagship{grid-template-columns:1.2fr auto;align-items:center;gap:clamp(1.4rem,4vw,3rem)}}
.flagship h3{font-size:var(--t5);color:#F5F2EB;margin:0}
.flagship .fsub{color:#C9C4B8;margin:.3rem 0 0;font-size:.98rem}
.flagship .fmath{color:#D8D4C9;margin:.9rem 0 0;max-width:50ch;font-size:.98rem;line-height:1.6}
.flagship .fside{display:grid;gap:var(--s3);justify-items:start}
@media (min-width:861px){.flagship .fside{justify-items:end;text-align:right}}
.flagship .famt{font-family:var(--disp);font-weight:700;font-style:normal;
  font-size:clamp(2.4rem,5vw,3.2rem);line-height:1;letter-spacing:-.018em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.flagship .famt small{font-family:var(--body);font-weight:600;font-size:var(--t2);color:#A7A294}
.tmini{margin-top:var(--s4)}
.tmini .row{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:baseline;
  padding:.78rem 0;border-top:1px solid var(--line)}
.tmini .row:last-child{border-bottom:1px solid var(--line)}
.tmini .row span{color:var(--txt);font-size:.96rem}
.tmini .row span b{color:var(--ink)}
.tmini .row i{font-family:var(--disp);font-style:normal;font-weight:700;font-size:var(--t3);
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.math{margin-top:1.6rem;max-width:62ch}
.math p{color:#4A3B14}
@media (max-width:880px){.tiers{grid-template-columns:1fr}.tier .bestfor{min-height:0}}

/* pricing table */
.pricing table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
.pricing .tw{overflow-x:auto;background:var(--card);border:0}
@media (max-width:680px){
  .pricing table{min-width:0}
  .pricing thead{display:none}
  .pricing tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;
    column-gap:var(--s4);padding:.9rem 1.1rem;border-top:1px solid var(--line)}
  .pricing tbody tr:first-child{border-top:0}
  .pricing tbody td{display:block;border:0;padding:0}
  .pricing tbody td:first-child{flex:1 1 12ch;font-weight:600;line-height:1.25}
  .pricing tbody td.n{margin-left:auto;text-align:right;font-weight:700;
    font-family:var(--disp);font-style:normal;font-size:var(--t5);line-height:1;
    letter-spacing:-.016em;white-space:nowrap}
  .pricing tbody td:nth-child(2){flex-basis:100%;order:3;margin-top:.3rem;
    font-family:var(--disp);font-weight:500;font-size:var(--t1);line-height:1.2;
    letter-spacing:.09em;text-transform:uppercase;color:var(--label)}
}
.pricing th{font-family:var(--disp);font-weight:500;font-style:normal;text-transform:uppercase;
  letter-spacing:.05em;font-size:var(--t2);text-align:left;background:var(--ink);color:var(--gold);
  padding:.65rem .9rem}
.pricing td{padding:.72rem .9rem;border-top:1px solid var(--line);color:var(--txt)}
.pricing td:first-child{color:var(--ink);font-weight:600}
.pricing td:nth-child(2){font-family:var(--disp);font-weight:500;font-size:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;color:var(--label)}
/* the length column used to float mid-table, leaving two dead gulfs in every
   row; shrunk and right-set it reads as the price's qualifier instead */
@media (min-width:681px){
  .pricing th:nth-child(2),.pricing td:nth-child(2){text-align:right;width:1%;white-space:nowrap}
}
.pricing td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  font-family:var(--disp);font-weight:700;font-size:var(--t4);line-height:1;
  letter-spacing:-.014em;color:var(--ink)}
.pricing .note{font-size:.9rem;color:#6E6A5E;margin-top:.8rem}

/* reviews */
.rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-bottom:1.8rem}
.rev-head .score{font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t7);line-height:1;letter-spacing:-.016em}
.stars{display:flex;gap:var(--s1);color:var(--gold)}
.stars svg{width:18px;height:18px;fill:currentColor;display:block}
.rev-head small{font-size:.95rem;color:var(--txt)}
.dark .rev-head small{color:var(--txt-inv)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch}
/* cards styled to read like native Google reviews: G mark, avatar disc, Google star gold */
.rev{position:relative;color:#202124;display:flex;flex-direction:column;gap:var(--s2);background:#fff;
  border:1px solid #DFDAD0;border-radius:12px;padding:1.15rem 1.15rem 1.3rem;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rev-g{position:absolute;top:1.1rem;right:1.1rem;width:20px;height:20px}
.rev-hd{display:flex;align-items:center;gap:var(--s3);padding-right:30px}
.rev-avatar{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--ink);color:#fff;font-family:var(--disp);
  font-weight:700;font-style:normal;font-size:var(--t3)}
.rev:nth-child(3n+2) .rev-avatar{background:#8A6410}
.rev:nth-child(3n) .rev-avatar{background:#5A4A2E}
.rev-who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rev-who b{font-size:.95rem;color:#202124}
.rev-who small{font-size:.8rem;color:#70757A}
.rev .stars{color:#FBBC04}
.rev p{margin:0;flex:1;font-size:.95rem;line-height:1.6;color:#3C4043}
.rev-g-inline{width:18px;height:18px;vertical-align:-3px;margin-right:.45rem;display:inline-block}

/* blog index: vertical list, not cards */
.bpost{padding:1.35rem 0;border-top:1px solid var(--line)}
.bpost:first-child{border-top:0;padding-top:.4rem}
.bpost h3{font-size:var(--t4);line-height:1.15}
.bpost h3 a:hover{color:var(--gold-deep)}
.bpost small{display:block;margin-top:.25rem;color:#6E6A5E;font-size:.82rem}
.bpost p{margin:.4rem 0 0;max-width:68ch}
@media (max-width:900px){
  .rev-grid{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;margin-inline:-20px;padding:4px 20px 14px;align-items:stretch;
    scroll-padding-inline:20px}
  .rev-grid::after{content:"";flex:none;width:6px}
  .rev-grid::-webkit-scrollbar{display:none}
  .rev-grid .rev{flex:0 0 84%;max-width:360px;scroll-snap-align:start}
  .rev-grid.stack{display:grid;grid-template-columns:1fr;margin-inline:0;padding:0;overflow:visible}
  .rev-grid.stack .rev{max-width:none}
}

/* coach */
.coach .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,3.6rem);align-items:center}
.coach figure{margin:0;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);background:#111}
.coach img{width:100%;height:100%;object-fit:cover}
.coach .creds{list-style:none;margin:1rem 0 1.4rem;padding:0;display:grid;gap:var(--s2);color:var(--txt)}
.coach .creds li{display:grid;grid-template-columns:auto 1fr;gap:var(--s2)}
.coach .creds li::before{content:"";width:15px;height:1.62em;height:1lh;flex:none;align-self:start;background:var(--bullet) center calc(50% + .061em)/15px 15px no-repeat}
@media (max-width:820px){.coach .wrap{grid-template-columns:1fr}}

/* areas + faq */
.areas .towns{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);margin-top:1.6rem;
  padding:1.1rem 0 0;border-top:1px solid var(--line-dk)}
.areas .towns li{list-style:none;color:#9C978A;font-family:var(--disp);font-weight:500;
  font-size:var(--t3);letter-spacing:.055em;text-transform:uppercase;cursor:default}
.areas .towns li.big{color:var(--ink);font-weight:700}
.faq details{border-bottom:1px solid var(--line);padding:.15rem 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{font-family:var(--disp);font-weight:700;text-transform:uppercase;
  letter-spacing:.015em;font-size:var(--t4);cursor:pointer;list-style:none;
  min-height:60px;display:flex;align-items:center;gap:var(--s4);padding-right:.4rem;
  transition:color .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq summary:hover{color:var(--gold-deep)}
.faq details[open] summary{color:var(--gold-deep)}
.faq details p{margin:0 0 1.2rem;max-width:68ch}
.camps-line{background:var(--paper-2);border:1px solid var(--line);padding:1.1rem 1.3rem;
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:space-between;margin-top:2.4rem}
.camps-line p{margin:0}

/* cta + footer */
.cta{text-align:center}
.cta .hero-acts{justify-content:center;margin-top:1.6rem}
/* closing CTA: the band used to be 41% of a viewport of flat gold. Photo ground,
   and the gold becomes the button -- the only thing on the page asking to be pressed. */
.ctaband{position:relative;isolation:isolate;background:#0B0A08;color:#F7F4ED;overflow:hidden;
  border-bottom:3px solid var(--gold)}
.ctaband .ctabg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 58%;opacity:.94;z-index:-2}
.ctaband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,10,8,.34) 0%,rgba(11,10,8,.88) 26%,rgba(11,10,8,.90) 72%,rgba(11,10,8,.36) 100%)}
.ctaband .wrap{position:relative;padding-block:clamp(3rem,7vw,4.6rem)}
.ctaband h2{color:#F7F4ED}
.ctaband h2 em{color:var(--gold)}
.ctaband p{color:var(--txt-inv);max-width:62ch}
footer{background:var(--ink);color:#B9B4A8;padding-block:clamp(2.4rem,5vw,3.4rem) 1.4rem}
/* the floating call pill sits bottom-right and was covering the Privacy link.
   This rule has to come AFTER the footer rule above or source order kills it. */
@media (max-width:760px){footer{padding-bottom:calc(1.4rem + 76px)}}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:var(--s6)}
.foot h4{font-family:var(--disp);font-weight:500;font-style:normal;text-transform:uppercase;
  letter-spacing:.09em;font-size:var(--t1);color:var(--gold);margin:0 0 .9rem;
  padding-top:.85rem;border-top:1px solid var(--line-dk)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;font-size:.93rem}
/* the links were 18px tall: under the 24px WCAG 2.5.8 minimum and well under
   a thumb. Padding gives the hit area without opening the list up. */
.foot ul a{display:block;padding-block:.46rem}
.foot a:hover{color:var(--gold)}
.foot address b.aptlabel{display:block;font-family:var(--disp);font-weight:500;
  font-size:var(--t1);letter-spacing:.09em;text-transform:uppercase;color:#8C8778;
  margin-bottom:.1rem}
/* the brand column used to be a logo, two lines and 400px of nothing while
   the other three ran to the bottom. It now carries the proof and the last
   booking prompt, and takes the same hairline as the three headings. */
.fbrand{border-top:1px solid var(--line-dk);padding-top:.85rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.fbrand p{color:#B9B4A8;font-size:.92rem;max-width:32ch;margin:0}
.fbrand img{margin:0}
.frate{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none}
/* .rev-g is absolute inside a review card; in the footer it is a flex child */
.frate .rev-g{position:static;width:18px;height:18px;flex:none}
.frate b{font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t3);
  line-height:1;color:#F5F2EB;letter-spacing:-.01em}
.frate span{font-family:var(--disp);font-weight:500;font-size:var(--t1);letter-spacing:.07em;
  text-transform:uppercase;color:#A9A498}
.frate:hover span,.frate:hover b{color:var(--gold)}
/* days and times in two columns so the line stops ragging mid-week */
.fhours{display:grid;grid-template-columns:auto 1fr;gap:.28rem var(--s4);margin:var(--s3) 0 0;
  font-size:.9rem}
.fhours dt{font-family:var(--disp);font-weight:500;font-size:var(--t1);letter-spacing:.07em;
  text-transform:uppercase;color:#8C8778}
.fhours dd{margin:0;color:#B9B4A8;font-variant-numeric:tabular-nums}
.foot img{width:72px;height:72px;object-fit:contain;margin-bottom:.7rem}
address{font-style:normal;font-size:.93rem;display:grid;gap:var(--s2)}
address b{color:#F5F2EB}
.legal{border-top:1px solid var(--line-dk);margin-top:2rem;padding-top:1.2rem;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;font-size:.8rem;color:#7E7A6E}
@media (max-width:860px){
  .foot{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6)}
  .foot ul{grid-template-columns:1fr 1fr;column-gap:var(--s4)}
  .foot ul a{padding-block:.62rem}
  .foot>div:first-child{grid-column:1/-1}
  .foot>div:last-child{grid-column:1/-1}
}
@media (max-width:620px){
  .foot{grid-template-columns:1fr;gap:var(--s5)}
  .fbrand{gap:var(--s3)}
  .fbrand .btn{width:100%;justify-content:center}
  .fbrand p{max-width:none}
  /* the hours sit beside the address rather than under it */
  .fhours{grid-template-columns:auto 1fr;gap:.2rem var(--s4)}
  footer{padding-block:2rem 1.2rem}
  .legal{margin-top:1.4rem;padding-top:1rem}
}

/* ===== inner-page extensions ===== */
.phero{background:var(--ink-2);color:#F5F2EB}
/* inner-page heroes carry a photo like the homepage does, same scrim recipe as
   .baseband and .ctaband: vertical, so it holds at phone width too */
.phero.haspic{position:relative;isolation:isolate;background:#0B0A08;overflow:hidden;
  border-bottom:3px solid var(--gold)}
.phero .pherobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;opacity:.94;z-index:-2}
.phero.haspic::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(11,10,8,.93) 10%,rgba(11,10,8,.90) 62%,rgba(11,10,8,.46) 82%,rgba(11,10,8,.10) 100%)}
@media (min-width:861px){
  /* keep the copy inside the protected band. A 1180px measure was too long
     for a hero line anyway, so this is a reading improvement as well. */
  .phero.haspic h1,.phero.haspic .lede,.phero.haspic .meta,.phero.haspic .hero-acts,
  .phero.haspic .crumbs{max-width:62%}
}
@media (max-width:860px){
  /* a horizontal scrim clears too early at phone width, where the copy runs
     the full column, so go vertical and let the picture open up underneath it */
  .phero.haspic::after{background:linear-gradient(180deg,rgba(11,10,8,.84) 0%,rgba(11,10,8,.90) 22%,rgba(11,10,8,.90) 72%,rgba(11,10,8,.44) 100%)}
}
.phero.haspic .wrap{position:relative}
.phero .wrap{padding-block:clamp(2.2rem,5vw,3.6rem);display:grid;gap:var(--s2);max-width:1180px}
.phero h1{font-family:var(--disp);font-weight:800;font-style:normal;text-transform:uppercase;letter-spacing:-.016em;
  font-size:clamp(2.1rem,5.8vw,4rem);line-height:.98;margin:0;text-wrap:balance}
.phero h1 em{font-style:italic;color:var(--gold)}
.phero .lede{color:#C9C4B8;max-width:60ch;margin:0;font-size:1.12rem}
.phero .hero-acts{margin-top:.7rem}
.phero .hero-acts .btn{padding:1rem 1.55rem;font-size:1rem}
@media (max-width:640px){
  .phero .hero-acts{flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--s2)}
  .phero .hero-acts .btn{flex:1 1 0;width:auto;min-width:0;padding:.98rem .55rem;
    justify-content:center;text-align:center;font-size:.92rem;white-space:nowrap}
}
@media (max-width:359px){
  /* two nowrap buttons cannot share a 280px content box: at 320 they dragged
     the /lessons/catching/ hero out to 342. Let the pair stack again. */
  .hero .hero-acts,.phero .hero-acts{flex-wrap:wrap}
  .hero .hero-acts .btn,.phero .hero-acts .btn{flex:1 1 100%;white-space:normal}
}
.phero .meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:.4rem;
  font-family:var(--disp);font-weight:500;font-style:normal;font-size:var(--t2);
  letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.phero .hero-acts{margin-top:.8rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4.5vw,3.4rem);align-items:center}
.split figure{margin:0;overflow:hidden;border:1px solid var(--line);background:#111;aspect-ratio:4/3}
.split img{width:100%;height:100%;object-fit:cover}
.split.photo-right figure{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.photo-right figure{order:0}}

.prose{max-width:66ch}
.prose h2{margin-top:2.2rem}
.prose ul{color:var(--txt);max-width:62ch;padding-left:1.2rem}
.prose li{margin-bottom:.4rem}

.checks{list-style:none;margin:1rem 0 1.4rem;padding:0;display:grid;gap:var(--s2);color:var(--txt)}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:var(--s2)}
.checks li::before{content:"";width:15px;height:1.62em;height:1lh;flex:none;align-self:start;background:var(--bullet) center calc(50% + .061em)/15px 15px no-repeat}
.dark .checks li,.velo .checks li{color:var(--txt-inv)}
.goldband .checks li{color:#3A3119}

.kv{border-top:1px solid var(--line)}
.kv .row{display:grid;grid-template-columns:1fr auto auto;gap:var(--s4);align-items:baseline;
  border-bottom:1px solid var(--line);padding:.7rem 0;font-size:.98rem}
.kv .row span:nth-child(2){color:#6E6A5E;font-size:.88rem}
.kv .row b{font-variant-numeric:tabular-nums;white-space:nowrap}

.pnote{font-size:.9rem;color:#6E6A5E;margin-top:.9rem}

/* in-content links */
.prose a:not(.btn),.pnote a,.sec-head p a,.faq p a,.camps-line p a{
  color:var(--gold-deep);text-decoration:underline}
.kv a{text-decoration:underline}
/* the row label is a real link on the town pages; give it the whole row height */
.kv .row span:first-child a{display:flex;align-items:center;min-height:44px}
@media (min-width:641px){.kv .row span:first-child a{display:inline;min-height:0}}
.kv--dark{border-top:1px solid var(--line-dk)}
.kv--dark .row{border-bottom:1px solid var(--line-dk)}
.kv--dark .row span:first-child{color:#F5F2EB}
.kv--dark .row span:nth-child(2){color:#A9A498}
.kv--dark .row b{color:var(--gold)}
.kv--dark a{color:#F5F2EB}

/* 3-up card grid for the areas hub */
.prog-grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:520px){.prog-grid.cols-2{grid-template-columns:1fr}}
.prog-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.prog-grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.prog-grid.cols-3{grid-template-columns:1fr}}

/* coach monogram block */
.coachrow .mono{display:grid;place-items:center;aspect-ratio:1/1;max-width:200px;
  background:var(--ink);border:1px solid var(--line)}
.coachrow .mono span{font-family:var(--disp);font-weight:700;font-style:normal;
  font-size:var(--t9);color:var(--gold)}
@media (max-width:700px){.coachrow .mono{max-width:140px}}

/* wide closing review card */
.rev.wide{grid-column:1/-1}

.mt-1{margin-top:1.2rem}

/* forms (contact / team rental) */
.form-wrap{max-width:560px}
.form-wrap label{display:block;font-weight:700;font-size:.97rem;margin:1rem 0 .3rem}
.form-wrap .hint{display:block;font-weight:400;font-size:.86rem;color:#6E6A5E;margin-bottom:.35rem}
.form-wrap input[type=text],.form-wrap input[type=tel],.form-wrap input[type=email],.form-wrap textarea{
  width:100%;font-family:var(--body);font-size:1.02rem;color:var(--ink);background:#fff;
  border:1px solid #CFC8BA;padding:.7rem .8rem;border-radius:0}
.form-wrap input:focus,.form-wrap textarea:focus{border-color:var(--gold);outline:2px solid var(--gold)}
.form-wrap textarea{min-height:6rem;resize:vertical}
@media (max-width:640px){.form-wrap .btn{width:100%}}
.form-wrap input.w-s{max-width:12rem}
.form-wrap input.w-m{max-width:20rem}
.form-wrap .btn{margin-top:1.3rem}
.hp-field{position:absolute;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden}

/* coach rows */
.coachrow.nopic{grid-template-columns:1fr}
.coachrow{display:grid;grid-template-columns:200px 1fr;gap:clamp(1.2rem,3vw,2.2rem);
  align-items:start;border-top:1px solid var(--line);padding-block:1.8rem}
.coachrow figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:#111;border:1px solid var(--line)}
.coachrow img{width:100%;height:100%;object-fit:cover}
.coachrow h3{font-size:var(--t4)}
.coachrow .role{font-family:var(--disp);font-weight:700;font-style:italic;font-size:var(--t2);
  letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);display:block;margin:.15rem 0 .6rem}
@media (max-width:700px){.coachrow{grid-template-columns:1fr}.coachrow figure{max-width:260px}}

/* area pages */
.drive{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;
  background:var(--ink);color:#F5F2EB;padding:clamp(1.4rem,3.5vw,2.2rem);border-top:3px solid var(--gold)}
.drive .min{font-family:var(--disp);font-weight:700;font-style:normal;
  font-size:clamp(2.6rem,8vw,4.6rem);line-height:.9;color:var(--gold);white-space:nowrap}
.drive .min small{display:block;font-size:.22em;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#A9A498;margin-top:.4rem;white-space:normal}
.drive p{margin:0;color:#C9C4B8;max-width:52ch}
@media (max-width:640px){.drive{grid-template-columns:1fr}}

.crumbs{font-size:.88rem;color:#A9A498;margin:0 0 .4rem}
.crumbs a{color:#C9C4B8;text-decoration:underline}
/* the contact page's phone number is a primary action; keep it a 44px target */
.bigtel{display:inline-flex;align-items:center;min-height:44px}
/* The Google embed is a cross-origin iframe, so its colours are the one block
   on the site nobody chose: bright green parks, blue water, pink POI labels,
   all outside the 38-48 hue family. Warm it to paper. The marker stays the
   most saturated thing left on it. */
.mapfig{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.mapfig iframe{filter:grayscale(.88) sepia(.42) saturate(.78) brightness(1.04) contrast(.94)}
@media (prefers-reduced-motion:no-preference){
  .mapfig iframe{transition:filter .25s ease}
  .mapfig:hover iframe,.mapfig:focus-within iframe{filter:none}
}

/* current nav item */
nav.main a[aria-current=page]{border-color:var(--gold);color:var(--gold-deep)}

/* 404 + utility */
.center{ text-align:center }
.center .hero-acts{justify-content:center}


/* ══ OFF-CANVAS DRAWER ════════════════════════════════════════════════════
   The menu was a dropdown panel pushed out of the header, so the page sat
   visible underneath it and the whole thing read as rows dropped on top of
   the site rather than a surface of its own. Same treatment as the rest of
   the fleet: the page steps back and the panel slides in over it.

   Three things this has to get right, each of which broke it once before:
   a transformed .page-shift becomes the containing block for fixed children,
   so the drawer and scrim are rendered OUTSIDE it; a page wrapper is as tall
   as the document, so a percentage transform-origin pivots thousands of px
   off screen and the origin has to be set from JS; and [hidden] loses to
   display:flex, so the panel is driven from an attribute the CSS owns. */
[hidden]{display:none!important}
.page-shift{transition:transform 800ms cubic-bezier(.15,.2,.1,1);
  transform-origin:50% var(--shift-origin-y,50%)}
.mscrim{position:fixed;inset:0;z-index:60;background:rgba(8,8,6,.55);
  opacity:0;pointer-events:none;transition:opacity 420ms ease}

#mob.mdrawer{--dw:min(86vw,max(330px,40vw));
  position:fixed;top:0;right:0;left:auto;z-index:61;width:var(--dw);
  height:100vh;height:100dvh;background:var(--ink);
  display:flex;flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top,0px)) 28px calc(20px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(110px);opacity:0;visibility:hidden;
  transition:transform 800ms cubic-bezier(.15,.2,.1,1),opacity 420ms ease,
             visibility 0s linear 800ms}

.mhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding-bottom:14px;border-bottom:1px solid var(--line-dk)}
.mbrand{display:flex;align-items:center;gap:var(--s2);flex:none}
.mbrand img{width:46px;height:46px;object-fit:contain}
.mbrand span{font-family:var(--disp);font-weight:700;font-style:normal;
  text-transform:uppercase;font-size:var(--t3);line-height:.92;color:#F2EEE4}
.mbrand span i{display:block;font-style:normal;font-size:.62em;color:#F5F2EB}
.mclose{flex:none;width:44px;height:44px;position:relative;border:0;background:none;
  cursor:pointer;color:#F2EEE4;opacity:.8;transition:opacity 160ms ease}
.mclose:hover{opacity:1}
.mclose span{position:absolute;left:12px;top:21px;width:20px;height:2px;
  border-radius:2px;background:currentColor}
.mclose span:nth-child(1){transform:rotate(45deg)}
.mclose span:nth-child(2){transform:rotate(-45deg)}

/* No rule under every row: a hairline per link is the phone-drawer tell.
   Tracking and space do the separating instead. */
.mlinks{display:flex;flex-direction:column;flex:1;justify-content:center;gap:var(--s1)}
#mob.mdrawer .mlinks a{display:block;padding:.62rem 0;color:#F2EEE4;
  font-family:var(--disp);font-weight:500;font-size:var(--t3);
  letter-spacing:.07em;text-transform:uppercase;border:0;position:relative}
#mob.mdrawer .mlinks a[aria-current=page]{color:var(--gold);box-shadow:none}
#mob.mdrawer .mlinks a[aria-current=page]::before{content:"";position:absolute;
  left:-14px;top:50%;transform:translateY(-50%);width:3px;height:19px;background:var(--gold)}
/* expandable drawer groups: <details> so they work with no JS and are
   keyboard-operable, with the same chevron the FAQ uses */
#mob.mdrawer .mgroup summary{display:flex;align-items:center;gap:var(--s4);cursor:pointer;
  list-style:none;padding:.62rem 0;color:#F2EEE4;font-family:var(--disp);font-weight:500;
  font-size:var(--t3);letter-spacing:.07em;text-transform:uppercase}
#mob.mdrawer .mgroup summary::-webkit-details-marker{display:none}
#mob.mdrawer .mgroup summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
#mob.mdrawer .mgroup[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
#mob.mdrawer .mgroup[open] summary{color:var(--gold)}
#mob.mdrawer .msub{padding:.1rem 0 .5rem 1rem;border-left:1px solid #39352C;margin-left:.1rem}
#mob.mdrawer .msub a{font-size:var(--t2);letter-spacing:.055em;color:#CFC9BA;padding:.5rem 0}
#mob.mdrawer .msub a[aria-current=page]{color:var(--gold)}
#mob.mdrawer .msub a[aria-current=page]::before{left:-17px;height:15px}

.mfoot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2)}
.mnap{display:flex;flex-direction:column;gap:var(--s2);padding:15px 0;margin-bottom:4px;
  border-top:1px solid var(--line-dk);color:var(--txt-inv);
  font-size:.86rem;line-height:1.4}
#mob.mdrawer .mfoot .btn{width:100%;min-height:52px}
.mtel{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;
  font-family:var(--disp);font-weight:700;font-style:normal;font-size:var(--t3);
  letter-spacing:.05em;color:#F2EEE4;border:2px solid #757165}
.mtel:hover{border-color:#F2EEE4}

@media (max-width:1020px){
  body:has(.burger[aria-expanded="true"]) .page-shift{
    transform:translateX(calc(var(--shift-gap,0vw) - min(86vw,max(330px,40vw))))
              scale(var(--shift-scale,1))}
  body:has(.burger[aria-expanded="true"]) .mscrim{opacity:1;pointer-events:auto}
  body:has(.burger[aria-expanded="true"]) #mob.mdrawer{
    transform:none;opacity:1;visibility:visible;transition-delay:0s,0s,0s}
  body:has(.burger[aria-expanded="true"]) .mbar{opacity:0;pointer-events:none;
    transition:opacity 240ms ease}
  body:has(.burger[aria-expanded="true"]) .burger{opacity:0;transition:opacity 260ms ease}
  html:has(.burger[aria-expanded="true"]),
  body:has(.burger[aria-expanded="true"]){overflow:hidden}
  /* the old dropdown is retired; the drawer replaces it */
  header.site.nav-open nav.main{display:none}
}
@media (min-width:1021px){#mob.mdrawer,.mscrim{display:none}.page-shift{transform:none}}
@media (prefers-reduced-motion:reduce){
  .page-shift,#mob.mdrawer,.mscrim{transition-duration:1ms!important;transition-delay:0s!important}
  body:has(.burger[aria-expanded="true"]) .page-shift{transform:none}
}