/* The Muscle Maestro, production stylesheet
   Tokens, layout, components. Mobile first. */

:root{
  --ink:#03060E; --ink-2:#070C16; --ink-3:#0A101C;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --blue:#2E7BFF; --blue-hover:#1B62E0; --blue-lit:#8FBAFF; --amber:#FFB020;
  --paper:#EEF2F8; --muted:#8C9AAE;
  --out:cubic-bezier(.16,1,.3,1);
  --wrap:1320px;
  --z-sticky:10; --z-nav:60; --z-menu:70; --z-cursor:90; --z-pre:100;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0; padding:0}
body{
  background:var(--ink); color:var(--paper);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.loading{overflow:hidden}
img{max-width:100%}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--blue-lit); outline-offset:4px; border-radius:6px}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue); color:#fff; padding:12px 20px; border-radius:0 0 12px 0}
.skip:focus{left:0}

.serif{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.01em}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
@media(min-width:900px){ .wrap{padding:0 40px} body{font-size:18px} }

h1,h2,h3,.dspl{font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-.025em; line-height:.92; margin:0}
h1{font-size:clamp(46px,7vw,96px); line-height:.87}
h2{font-size:clamp(34px,4.4vw,62px)}
h3{font-size:clamp(24px,2.4vw,32px)}
p{margin:0 0 20px}
.lede{color:var(--muted); font-size:19px; max-width:44ch}
.prose{max-width:64ch}
.prose p{color:#C6D0DD}
.prose h2{margin:56px 0 20px}
.prose h3{margin:40px 0 14px}
.prose ul{margin:0 0 22px; padding-left:20px; color:#C6D0DD}
.prose li{margin-bottom:10px}
.prose strong{color:var(--paper); font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 28px; border-radius:99px; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;
  letter-spacing:.1em; text-transform:uppercase; border:1px solid transparent;
  transition:background-color .2s var(--out), border-color .2s var(--out), color .2s var(--out), transform .4s var(--out);
  will-change:transform;
}
.btn:active{transform:scale(.97); transition-duration:.09s}
.btn-p{background:var(--blue); color:#fff}
.btn-s{background:rgba(255,255,255,.02); border-color:var(--line-2); color:var(--paper)}
.btn:disabled{opacity:.35; cursor:not-allowed}
@media(hover:hover) and (pointer:fine){
  .btn-p:hover{background:var(--blue-hover)}
  .btn-s:hover{border-color:var(--blue-lit)}
}
.acts{display:flex; flex-wrap:wrap; gap:12px}

.tag{display:inline-flex; align-items:center; gap:10px; margin:0 0 24px}
.tag i{width:6px; height:6px; border-radius:99px; background:var(--amber); flex:none}
.tag.calm i{background:var(--blue-lit)}

/* ---------- navigation ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:background-color .3s var(--out), backdrop-filter .3s var(--out)}
.nav.stuck{background:rgba(3,6,14,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
@media(min-width:1000px){ .nav{padding:20px 40px} }
.brand{font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; font-size:19px; letter-spacing:.1em; white-space:nowrap}
.brand em{font-family:'Instrument Serif',serif; font-style:italic; text-transform:none; letter-spacing:0; color:var(--blue-lit)}
.nav-links{display:none; gap:28px; font-size:15px}
.nav-links a{color:var(--muted); transition:color .2s var(--out)}
.nav-links a[aria-current="page"]{color:var(--paper)}
@media(hover:hover) and (pointer:fine){ .nav-links a:hover{color:var(--paper)} }
.nav-cta{display:none}
@media(min-width:1000px){ .nav-links{display:flex} .nav-cta{display:inline-flex} }

.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:48px; height:48px;
  align-items:center; background:transparent; border:1px solid var(--line-2); border-radius:99px; cursor:pointer}
.burger i{display:block; width:16px; height:1.5px; background:var(--paper); transition:transform .3s var(--out), opacity .2s var(--out)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-3.25px) rotate(-45deg)}
@media(min-width:1000px){ .burger{display:none} }

.menu{position:fixed; inset:0; z-index:var(--z-menu); background:rgba(3,6,14,.97); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:center; padding:100px 24px 40px; gap:6px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--out), visibility .35s}
.menu.open{opacity:1; visibility:visible}
.menu a{font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,8vw,46px); letter-spacing:-.02em; padding:8px 0; color:var(--paper)}
.menu a[aria-current="page"]{color:var(--blue-lit)}
.menu .btn{margin-top:24px; align-self:flex-start}

/* ---------- hero, generic pages ---------- */
.page-hero{padding:140px 0 56px; position:relative}
@media(min-width:900px){ .page-hero{padding:190px 0 72px} }
.crumbs{margin-bottom:22px}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--paper)}
.crumbs li+li::before{content:"/"; margin-right:8px; color:rgba(255,255,255,.24)}

.split{display:grid; gap:40px; align-items:center}
@media(min-width:960px){ .split{grid-template-columns:1.05fr .95fr; gap:64px} .split.rev > *:first-child{order:2} }

/* body figure crops */
.zonefig{position:relative; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--ink-2)}
.zonefig img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.zonefig.full{aspect-ratio:3/4.4}
.zonefig.neck{aspect-ratio:4/3} .zonefig.neck img{object-position:50% 13%}
.zonefig.back{aspect-ratio:4/3} .zonefig.back img{object-position:50% 36%}
.zonefig.hips{aspect-ratio:4/3} .zonefig.hips img{object-position:50% 68%}
.zonefig::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 80% at 50% 45%, transparent 30%, rgba(3,6,14,.55) 100%)}
.zonefig figcaption{position:absolute; left:16px; bottom:14px; z-index:2; margin:0}

/* readings */
.read{border-top:1px solid var(--line); padding-top:18px; margin-top:32px; display:grid; gap:14px; max-width:420px}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:20px}
.row b{font-weight:500; font-size:15px}
.row span{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--amber); letter-spacing:.06em}
.row.ok span{color:var(--blue-lit)}
.bar{height:2px; background:rgba(255,255,255,.09); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--out)}
.bar.ok i{background:var(--blue)}

.list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; max-width:46ch}
.list li{display:flex; gap:16px; align-items:flex-start; font-size:16px}
.list .n{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--blue-lit); padding-top:5px; flex:none; letter-spacing:.1em}

/* ---------- sections ---------- */
.sec{padding:80px 0; position:relative}
@media(min-width:900px){ .sec{padding:112px 0} }
.sec.alt{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

.steps{display:grid; gap:1px; margin-top:48px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden}
@media(min-width:900px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{background:var(--ink-2); padding:32px 26px 38px; transition:background-color .25s var(--out)}
@media(hover:hover) and (pointer:fine){ .step:hover{background:var(--ink-3)} }
.step .n{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; color:var(--blue-lit); margin:0}
.step h3{margin:14px 0 10px}
.step p{margin:0; color:var(--muted); font-size:15px}

.cards{display:grid; gap:14px; margin-top:48px}
@media(min-width:700px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{display:block; border:1px solid var(--line); border-radius:18px; padding:28px; background:var(--ink-2);
  transition:border-color .25s var(--out), background-color .25s var(--out), transform .25s var(--out)}
@media(hover:hover) and (pointer:fine){ .card:hover{border-color:rgba(46,123,255,.5); background:var(--ink-3); transform:translateY(-3px)} }
.card h3{margin:0 0 10px; font-size:26px}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .go{display:inline-block; margin-top:18px; font-size:13px; color:var(--blue-lit); letter-spacing:.06em}

.quotes{display:grid; gap:14px; margin-top:48px}
@media(min-width:900px){ .quotes{grid-template-columns:repeat(3,1fr)} }
blockquote{margin:0; padding:30px; border:1px solid var(--line); border-radius:18px; background:var(--ink-2)}
blockquote p{margin:0 0 18px; font-family:'Instrument Serif',serif; font-style:italic; font-size:25px; line-height:1.32}
blockquote cite{font-style:normal; font-size:13px; color:var(--muted); letter-spacing:.06em}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.chip{border:1px solid var(--line); border-radius:99px; padding:9px 18px; font-size:14px; color:var(--muted)}

/* FAQ */
.faq{margin-top:40px; border-top:1px solid var(--line); max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:-.01em; font-size:22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:32px; width:11px; height:11px;
  border-right:1.5px solid var(--blue-lit); border-bottom:1.5px solid var(--blue-lit);
  transform:rotate(45deg); transition:transform .25s var(--out)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 0 24px; color:#C6D0DD; max-width:70ch}
.faq .a p:last-child{margin-bottom:0}

/* booking selector */
.book{border:1px solid var(--line); border-radius:22px; overflow:hidden; margin-top:44px; background:var(--ink-2)}
.qs{padding:28px 24px; border-bottom:1px solid var(--line); border-width:0 0 1px; margin:0}
@media(min-width:700px){ .qs{padding:32px} }
.qs legend{padding:0}
.opts{display:grid; gap:10px; margin-top:18px}
@media(min-width:700px){ .opts{grid-template-columns:repeat(2,1fr)} .opts.f{grid-template-columns:repeat(4,1fr)} }
.opt{min-height:54px; padding:15px 18px; text-align:left; border-radius:14px; border:1px solid var(--line);
  background:transparent; color:var(--paper); font:inherit; font-size:15px; cursor:pointer;
  transition:border-color .2s var(--out), background-color .2s var(--out), transform .2s var(--out)}
.opt:active{transform:scale(.985); transition-duration:.08s}
@media(hover:hover) and (pointer:fine){ .opt:hover{border-color:var(--blue-lit); background:rgba(46,123,255,.06)} }
.opt[aria-pressed="true"]{border-color:var(--blue); background:rgba(46,123,255,.16)}
.sum{padding:24px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; background:rgba(3,6,14,.6)}
@media(min-width:700px){ .sum{padding:26px 32px} }

/* contact form */
.form{display:grid; gap:16px; max-width:560px; margin-top:32px}
.field{display:grid; gap:8px}
.field label{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea,.field select{
  width:100%; padding:14px 16px; font:inherit; font-size:16px; color:var(--paper);
  background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
  transition:border-color .2s var(--out)}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-lit); outline:none}
.field input::placeholder,.field textarea::placeholder{color:#5D6B7D}

/* marquee */
.marq{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:20px 0; background:var(--ink-2)}
.marq .run{display:flex; gap:60px; width:max-content; animation:run 34s linear infinite; will-change:transform}
.marq p{margin:0; font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(24px,3.6vw,42px); letter-spacing:-.02em; color:rgba(238,242,248,.15); white-space:nowrap}
.marq p em{font-family:'Instrument Serif',serif; font-style:italic; text-transform:none; color:var(--blue-lit); opacity:.7}
@keyframes run{to{transform:translateX(-50%)}}

/* CTA band */
.cta-band{padding:88px 0; border-top:1px solid var(--line); background:
  radial-gradient(ellipse 70% 130% at 50% 0%, rgba(46,123,255,.14), transparent 70%), var(--ink)}
.cta-band .inner{text-align:center; max-width:760px; margin:0 auto}
.cta-band .acts{justify-content:center; margin-top:28px}

/* footer */
footer{background:var(--ink); border-top:1px solid var(--line); padding:64px 0 40px; color:var(--muted); font-size:15px}
footer .grid{display:grid; gap:32px}
@media(min-width:900px){ footer .grid{grid-template-columns:2fr 1fr 1fr 1fr} }
footer h4{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); margin:0 0 14px; font-weight:400}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
footer a{color:var(--muted); transition:color .2s var(--out)}
footer a:hover{color:var(--paper)}
.legal{margin-top:44px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:13px}

/* sticky mobile CTA */
.sticky{position:fixed; left:16px; right:16px; bottom:16px; z-index:var(--z-sticky)}
.sticky .btn{width:100%; box-shadow:0 10px 40px rgba(0,0,0,.7)}
@media(min-width:1000px){ .sticky{display:none} }
body{padding-bottom:0}
@media(max-width:999px){ footer{padding-bottom:104px} }

/* reveals */
.up{opacity:0; transform:translateY(20px); transition:opacity .6s var(--out), transform .6s var(--out)}
.up.in{opacity:1; transform:none}
.rv{display:inline-block; overflow:hidden; vertical-align:bottom}
.rv > span{display:inline-block; transform:translateY(105%); transition:transform .9s var(--out)}
.ready .rv > span, .no-js .rv > span{transform:none}

/* cursor */
#cur,#curDot{position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none; border-radius:99px; mix-blend-mode:screen; will-change:transform}
#cur{width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid rgba(143,186,255,.7); background:rgba(46,123,255,0); transition:background-color .25s var(--out)}
#cur.big{background:rgba(46,123,255,.12)}
#curDot{width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--blue-lit)}
@media(hover:none),(max-width:999px){ #cur,#curDot{display:none} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .marq .run{animation:none}
  .rv > span{transform:none; transition:none}
  .up{transform:none; transition:opacity .3s linear}
  .btn:active,.opt:active,.card:hover,.step:hover{transform:none}
  .bar i{transition:transform .3s linear}
}

/* Google review banner */
.gr{border:1px solid var(--line); border-radius:18px; background:rgba(7,12,22,.78); padding:22px 26px 18px; position:relative; overflow:hidden}
.gr:before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 0%,rgba(46,123,255,.14),transparent 46%); pointer-events:none}
.gr-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; position:relative}
.gr-profile{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.gr-profile b{font-family:'Barlow Condensed',sans-serif; font-size:28px; margin-right:8px; vertical-align:middle}
.gr-g{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#4285F4; font-weight:700; font-family:Arial,sans-serif}
.gr-stars{display:inline-flex; gap:2px; vertical-align:middle}
.gr-stars i{width:14px; height:14px; background:rgba(238,242,248,.18); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.gr-stars i.on{background:#FBBC05}
.gr-nav{display:flex; align-items:center; gap:10px}
.gr-nav button,.gr-dots button{appearance:none; border:1px solid var(--line); background:transparent; color:var(--paper); cursor:pointer}
.gr-nav button{width:34px; height:34px; border-radius:50%; font-size:20px; line-height:1}
.gr-nav button:hover{border-color:var(--blue-lit)}
.gr-stage{position:relative; min-height:150px; margin-top:18px}
.gr-card{margin:0; transition:opacity .26s ease, transform .26s ease}
.gr-card.out{opacity:0; transform:translateX(-14px)}
.gr-card blockquote{margin:0; border:0; padding:0; background:none; font-style:normal}
.gr-card blockquote p{font-size:clamp(17px,1.5vw,21px); line-height:1.5; margin:10px 0 0; max-width:70ch}
.gr-card figcaption{display:flex; gap:14px; align-items:baseline; margin-top:14px; flex-wrap:wrap}
.gr-card figcaption b{font-family:'Barlow Condensed',sans-serif; font-size:18px; text-transform:uppercase; letter-spacing:.04em}
.gr-card figcaption a{color:var(--blue-lit)}
.gr-dots{display:flex; gap:6px; margin-top:14px; flex-wrap:wrap}
.gr-dots button{width:8px; height:8px; border-radius:50%; padding:0}
.gr-dots button.on{background:var(--blue-lit); border-color:var(--blue-lit)}
@media(max-width:700px){.gr{padding:18px}.gr-card blockquote p{font-size:16px}}

/* home page booking hand-off */
.book-steps{display:grid; gap:14px; margin-top:30px}
.book-steps > div{border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:rgba(7,12,22,.6)}
.book-steps span{color:var(--blue-lit)}
.book-steps b{display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:22px; margin-top:8px}
.book-steps p{margin:6px 0 0; color:var(--muted)}
@media(min-width:760px){.book-steps{grid-template-columns:repeat(3,1fr)}}
#book .acts{margin-top:30px}