/* Self-hosted fonts. Google Fonts was render-blocking and could not be
   made async: LiteSpeed rewrites the <link> and strips media="print". */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-black-400.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter-400-600.woff2) format('woff2')}
/* ==========================================================================
   Muscle Time Fitness — v2 "Chapters"
   Vertical rail navigation · full-height numbered chapters · editorial grid
   ========================================================================== */

:root{
  --red:#FF2A18;
  --red-lt:#FF4A3D;
  --red-dk:#B3140A;
  --ink:#050505;
  --ink-2:#0C0C0E;
  --ink-3:#141417;
  --pap:#F4F1EA;          /* warm paper, used for inverted chapters */
  --tx:#F2F2F0;
  --tx-2:#9A9A9E;
  --tx-3:#5E5E64;
  --line:rgba(255,255,255,.13);
  --line-2:rgba(255,255,255,.22);
  --rail:92px;
  --head:'Archivo Black','Arial Black',sans-serif;
  --cond:'Barlow Condensed',Oswald,'Arial Narrow',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--tx);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* NOT hidden: hidden would make body a scroll container */
  overscroll-behavior-y:none;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}

h1,h2,h3{margin:0;font-weight:400;line-height:1;text-transform:uppercase}
.mega{font-family:var(--head);letter-spacing:-.022em}
.cond{font-family:var(--cond);font-weight:700;letter-spacing:.01em}

/* ---------- fixed vertical rail ---------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  background:var(--ink-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:22px 0;
}
.rail__mark{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:var(--red);color:#fff;font-family:var(--head);font-size:1rem;letter-spacing:-.03em;
}
.rail__word{
  writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--cond);font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;font-size:.7rem;color:var(--tx-3);
  white-space:nowrap;      /* was wrapping into two overlapping columns */
}
.rail__dots{display:flex;flex-direction:column;gap:14px;align-items:center}
.rail__dot{
  position:relative;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--cond);font-weight:700;font-size:.78rem;color:var(--tx-3);
  transition:color .25s,background .25s;
}
.rail__dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:1px solid transparent;
  transition:border-color .25s;
}
.rail__dot:hover{color:var(--tx)}
.rail__dot.is-on{color:#fff;background:var(--red)}
.rail__dot.is-on::after{border-color:rgba(255,42,24,.45);inset:-5px}
.rail__wa{
  width:42px;height:42px;border-radius:50%;background:#1FA851;display:grid;place-items:center;
  transition:transform .2s;
}
.rail__wa:hover{transform:scale(1.1)}
.rail__wa svg{width:22px;height:22px;fill:#fff}


/* ---------- location picker (sits above the WhatsApp button) ---------- */
.loc-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.loc{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--red-lt),var(--red-dk));border:0;color:#fff;
  box-shadow:0 0 0 1px rgba(255,42,24,.5), 0 8px 22px rgba(255,42,24,.42);
  transition:transform .2s,box-shadow .2s;
}
.loc::after{                    /* soft pulse so it reads as "find us" */
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(255,42,24,.45);animation:locPulse 2.6s ease-out infinite;
}
@keyframes locPulse{0%{transform:scale(.85);opacity:.9}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.loc::after{animation:none;opacity:.5}}
.loc:hover,.loc[aria-expanded="true"]{
  transform:scale(1.1);box-shadow:0 0 0 2px #fff, 0 10px 28px rgba(255,42,24,.6);
}
.loc svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.loc-sheet{
  position:absolute;left:calc(100% + 12px);bottom:0;z-index:80;width:max-content;min-width:210px;
  background:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.65);padding:.55rem;display:grid;gap:.25rem;
}
.loc-sheet__t{
  margin:.2rem .55rem .45rem;font-family:var(--cond);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;font-size:.68rem;color:var(--tx-3);
}
.loc-sheet a{
  display:grid;gap:.12rem;padding:.6rem .7rem;border-radius:3px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:.95rem;color:var(--tx);
  transition:background .18s,color .18s;
}
.loc-sheet a span{
  font-family:var(--body);font-weight:500;text-transform:none;letter-spacing:0;
  font-size:.76rem;color:var(--tx-3);
}
.loc-sheet a:hover{background:var(--red);color:#fff}
.loc-sheet a:hover span{color:rgba(255,255,255,.85)}

@media (max-width:720px){
  /* rail is a bottom bar on phones - open the sheet upward instead */
  .loc-sheet{left:auto;right:0;bottom:calc(100% + 12px);min-width:190px}
}

/* ---------- top bar (minimal) ---------- */
.top{
  position:fixed;top:0;left:var(--rail);right:0;height:74px;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.2rem,4vw,3rem);pointer-events:none;
  /* opaque backdrop: chapter tags scroll behind this, never through it */
  background:linear-gradient(180deg,rgba(5,5,5,.97) 62%,rgba(5,5,5,0));
}
.top>*{pointer-events:auto}
.top__meta{
  font-family:var(--cond);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-size:.72rem;color:var(--tx-3);
}
.top__right{display:flex;align-items:center;gap:1rem}
.top__call{
  font-family:var(--cond);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:.78rem;color:var(--tx-2);transition:color .2s;
}
.top__call:hover{color:var(--red)}
.menu-btn{
  display:flex;align-items:center;gap:.6rem;font-family:var(--cond);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;font-size:.76rem;
  border:1px solid var(--line);padding:.7rem 1.1rem;border-radius:100px;
  background:rgba(10,10,12,.85);transition:border-color .2s,color .2s;
}
.menu-btn:hover{border-color:var(--red);color:var(--red)}
.menu-btn i{display:block;width:16px;height:9px;position:relative}
.menu-btn i::before,.menu-btn i::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;transition:.25s;
}
.menu-btn i::before{top:0}
.menu-btn i::after{top:7px}
body.menu-open .menu-btn i::before{top:4px;transform:rotate(45deg)}
body.menu-open .menu-btn i::after{top:4px;transform:rotate(-45deg)}

/* ---------- full-screen overlay menu ---------- */
.menu{
  position:fixed;inset:0 0 0 var(--rail);z-index:58;background:var(--ink-2);
  display:grid;grid-template-columns:1.25fr .75fr;
  /* clear the fixed top bar so the first item never sits under it */
  padding-top:74px;
  /* the list can be taller than the screen: let the panel scroll */
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;pointer-events:none;
  transition:clip-path .55s cubic-bezier(.76,0,.24,1),visibility 0s linear .55s;
}
body.menu-open .menu{
  clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto;
  transition:clip-path .55s cubic-bezier(.76,0,.24,1),visibility 0s;
}
.menu__list{align-self:safe center;padding:1.6rem clamp(1.5rem,6vw,5rem);display:grid;gap:.1rem}
.menu__list a{
  display:flex;align-items:baseline;gap:1.2rem;padding:.42rem 0;
  font-family:var(--head);font-size:clamp(1.45rem,3.4vw,2.6rem);letter-spacing:-.02em;
  text-transform:uppercase;color:var(--tx-3);transition:color .25s,transform .25s;
}
.menu__list a span{font-family:var(--cond);font-size:.8rem;letter-spacing:.2em;color:var(--red)}
.menu__list a:hover{color:#fff;transform:translateX(14px)}
.menu__side{
  border-left:1px solid var(--line);padding:clamp(2rem,6vw,4rem);align-self:safe center;
  font-size:.95rem;color:var(--tx-2);
}
.menu__side h4{
  font-family:var(--cond);font-weight:700;letter-spacing:.2em;font-size:.74rem;
  color:var(--tx-3);margin:0 0 .9rem;text-transform:uppercase;
}
.menu__side p{margin:0 0 1.8rem;line-height:1.65}
.menu__side strong{display:block;color:#fff;font-weight:600}

/* ---------- chapter shell ---------- */
.stage{margin-left:var(--rail)}
.ch{
  position:relative;min-height:100vh;min-height:100svh;
  padding:clamp(5.6rem,10vh,7rem) clamp(1.4rem,5vw,4.5rem) clamp(3.2rem,6vh,5rem);
  display:flex;flex-direction:column;justify-content:center;
  border-bottom:1px solid var(--line);overflow:hidden;
}
.ch--pap{background:var(--pap);color:var(--ink);border-bottom-color:rgba(0,0,0,.12)}
.ch--ink3{background:var(--ink-3)}
.ch__tag{
  /* in normal flow: as an absolute element it overlapped headings and controls
     whenever a chapter was shorter than the viewport */
  margin:0 0 1.15rem;
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--cond);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  font-size:.72rem;color:var(--tx-3);
}
.ch--pap .ch__tag{color:rgba(0,0,0,.45)}
.ch__tag b{color:var(--red);font-weight:700}
.ch__tag::after{content:"";width:clamp(30px,6vw,72px);height:1px;background:currentColor;opacity:.4}

/* ---------- 01 hero ---------- */
.hero{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.hero__type{min-width:0}
.hero__type h1{font-size:clamp(2.6rem,6.2vw,5.4rem);max-width:14ch}
.hero__type h1 span{display:block}
.hero__type h1 .out{
  color:transparent;-webkit-text-stroke:2px var(--red);text-stroke:2px var(--red);
}
.hero__lede{margin:1.4rem 0 0;max-width:52ch;color:var(--tx-2);font-size:clamp(1rem,1.2vw,1.08rem)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}
.hero__side{
  writing-mode:vertical-rl;font-family:var(--cond);font-weight:700;letter-spacing:.4em;
  text-transform:uppercase;font-size:.8rem;color:var(--tx-3);padding-bottom:.5rem;
}
.hero__strip{
  margin-top:clamp(1.8rem,4vh,3rem);display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.hero__strip div{padding:1.4rem 1.2rem 0;border-right:1px solid var(--line)}
.hero__strip div:last-child{border-right:0}
.hero__strip b{
  display:block;font-family:var(--head);font-size:clamp(1.5rem,3vw,2.4rem);
  line-height:1;color:#fff;letter-spacing:-.02em;white-space:nowrap;
}
.hero__strip span{
  display:block;margin-top:.5rem;font-family:var(--cond);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;color:var(--tx-3);
}
.slash{
  position:absolute;right:-14%;top:-22%;width:62%;height:150%;pointer-events:none;
  background:linear-gradient(200deg,rgba(255,42,24,.5),rgba(255,42,24,0) 62%);
  transform:skewX(-13deg);filter:blur(38px);
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--cond);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;font-size:.82rem;
  padding:1.02rem 1.9rem;border:1px solid transparent;border-radius:2px;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.btn--wire{border-color:var(--line);color:var(--tx)}
.btn--wire:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.ch--pap .btn--wire{border-color:rgba(0,0,0,.25);color:var(--ink)}
.ch--pap .btn--wire:hover{border-color:var(--red);color:var(--red)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}

.st{font-style:normal;font-size:.42em;vertical-align:.55em;margin-left:.12em;
  font-family:var(--body);color:var(--red)}


/* ---------- real photography layers (from the WP media library) ---------- */
.rail__mark img{width:30px;height:30px;object-fit:contain;display:block}

.hero__shot{
  position:absolute;right:0;top:0;bottom:0;width:52%;z-index:0;pointer-events:none;
  background:url('https://muscletime.in/wp-content/uploads/2026/08/mt-real-member-fitline.jpg') center right/cover no-repeat;
  opacity:.38;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 55%);
}
/* scrim so headline, buttons and the stat strip stay legible over the photo */
#c1::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,5,.94) 16%,rgba(5,5,5,.55) 58%,rgba(5,5,5,.30));
}
/* .ch__tag is already absolutely positioned - only raise it, never re-position it */
#c1>.ch__tag{z-index:2}
#c1>.hero,#c1>.hero__strip{position:relative;z-index:2}

/* chapters that sit on a photograph */
.ch--shot{position:relative;isolation:isolate}
.ch--shot::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  transform:translateZ(0);   /* own layer: avoids repaint on every scroll frame */
}
.ch--shot::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(5,5,5,.97) 18%,rgba(5,5,5,.86) 62%,rgba(5,5,5,.95));
}
#c4.ch--shot::before{background-image:url('https://muscletime.in/wp-content/uploads/2026/08/mt-real-equipment-rack.jpg')}
#c6.ch--shot::before{background-image:url('https://muscletime.in/wp-content/uploads/2026/08/mt-real-member-hydrate.jpg')}

.pick__panel{
  background-image:
    linear-gradient(150deg,rgba(20,20,23,.94),rgba(12,12,14,.97)),
    url('https://muscletime.in/wp-content/uploads/2026/08/mt-real-equipment-rack.jpg');
  background-size:cover;background-position:center;
}

/* ---------- 02 statement ---------- */
.say{max-width:30ch}
.say h2{font-size:clamp(1.9rem,4.2vw,3.9rem)}
.say h2 em{font-style:normal;color:var(--red)}
.say__foot{
  margin-top:clamp(1.8rem,4vh,2.6rem);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,3rem);max-width:1000px;
}
.say__foot p{margin:0;font-size:.98rem;color:rgba(0,0,0,.62);padding-top:1rem;
  border-top:2px solid var(--red)}
.band{
  position:absolute;left:0;right:0;bottom:0;overflow:hidden;padding:.85rem 0;
  background:var(--ink);color:var(--pap);
}
.band__t{display:flex;width:max-content;animation:roll 32s linear infinite}
.band__t span{
  font-family:var(--head);font-size:1.15rem;letter-spacing:-.01em;white-space:nowrap;
  display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;text-transform:uppercase;
}
.band__t span::after{content:"";width:7px;height:7px;background:var(--red);border-radius:50%}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- 03 program selector ---------- */
.pick{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4vw,4rem);align-items:stretch}
.pick__list{display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line)}
.pick__item{
  display:flex;align-items:center;gap:1.1rem;width:100%;text-align:left;
  padding:clamp(.85rem,2vh,1.35rem) .4rem;border-bottom:1px solid var(--line);
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.55rem);color:var(--tx-3);letter-spacing:.01em;
  transition:color .22s,padding-left .22s;position:relative;
}
.pick__item::before{
  content:"";position:absolute;left:0;top:50%;width:0;height:2px;background:var(--red);
  transform:translateY(-50%);transition:width .28s cubic-bezier(.76,0,.24,1);
}
.pick__item i{font-style:normal;font-size:.72rem;color:var(--red);letter-spacing:.1em;width:1.6rem;flex:none}
.pick__item:hover{color:var(--tx-2)}
.pick__item.is-on{color:#fff;padding-left:2.6rem}
.pick__item.is-on::before{width:1.9rem}
.pick__panel{
  border:1px solid var(--line);padding:clamp(1.6rem,3.4vw,2.8rem);
  display:flex;flex-direction:column;justify-content:center;position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,.035),transparent 60%);
  min-height:clamp(320px,48vh,460px);
}
.pick__panel::before{
  content:attr(data-n);position:absolute;top:clamp(.6rem,2vw,1.4rem);right:clamp(1rem,2.6vw,2rem);
  font-family:var(--head);font-size:clamp(3.4rem,8vw,7rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);
}
.pick__panel h3{font-family:var(--head);font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:1rem;letter-spacing:-.02em}
.pick__panel p{color:var(--tx-2);margin:0 0 1.5rem;max-width:52ch}
.pick__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.pick__panel li{display:flex;gap:.75rem;color:var(--tx-2);font-size:.96rem}
.pick__panel li::before{content:"—";color:var(--red);flex:none}
.fade{animation:fade .38s ease}
@keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- 04 figures ---------- */
.figs{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.4vw,2rem);align-items:end}
.fig{border-top:2px solid var(--red);padding-top:1.1rem}
.fig:nth-child(1){grid-column:1/span 5}
.fig:nth-child(2){grid-column:7/span 3}
.fig:nth-child(3){grid-column:1/span 3;margin-top:clamp(1.4rem,4vh,3rem)}
.fig:nth-child(4){grid-column:5/span 6;margin-top:clamp(1.4rem,4vh,3rem)}
.fig b{display:block;font-family:var(--head);font-size:clamp(2.2rem,5.6vw,4.6rem);
  line-height:.88;letter-spacing:-.035em;color:#fff;white-space:nowrap}
.fig span{display:block;margin-top:.7rem;font-family:var(--cond);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;font-size:.74rem;color:var(--tx-3)}

/* ---------- 05 plan switcher ---------- */
.plan__tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.8rem 0 clamp(1.4rem,3vh,2rem)}
.plan__tab{
  font-family:var(--cond);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:.8rem;padding:.85rem 1.5rem;border:1px solid var(--line);border-radius:2px;
  color:var(--tx-3);transition:.22s;
}
.plan__tab:hover{color:var(--tx);border-color:var(--tx-3)}
.plan__tab.is-on{background:var(--red);border-color:var(--red);color:#fff}
.slab{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.6rem,3.4vw,3.2rem);
  border:1px solid var(--line);border-radius:6px;padding:clamp(1.6rem,3vw,2.6rem);align-items:center}
.slab__price{font-family:var(--head);font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:.9;
  letter-spacing:-.04em;color:#fff}
.slab__price sup{font-size:.3em;vertical-align:.9em;margin-right:.12em;color:var(--tx-2)}
.slab__per{font-family:var(--cond);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  font-size:.76rem;color:var(--tx-3);margin-top:.9rem}
.slab__name{font-family:var(--cond);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  font-size:.78rem;color:var(--red);margin-bottom:.9rem}
.slab ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.7rem}
.slab li{display:flex;gap:.8rem;color:var(--tx-2);font-size:.97rem}
.slab li::before{content:"—";color:var(--red);flex:none}
.plan__note{margin-top:1.4rem;font-size:.86rem;color:var(--tx-3);max-width:70ch}

/* ---------- 06 branches ---------- */
.br__tabs{display:flex;gap:.5rem;margin-bottom:clamp(1.5rem,3.5vh,2.4rem);flex-wrap:wrap}
.br__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,4rem);align-items:center}
.br__name{font-family:var(--head);font-size:clamp(1.9rem,4vw,3.2rem);letter-spacing:-.03em;
  line-height:1;margin-bottom:1.1rem}
.br__addr{font-style:normal;color:var(--tx-2);max-width:40ch;margin-bottom:1.5rem;font-size:1rem}
.br__rating{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--cond);font-weight:700;
  letter-spacing:.1em;font-size:.82rem;color:var(--red);border:1px solid rgba(255,42,24,.4);
  padding:.45rem .9rem;border-radius:2px;margin-bottom:1.3rem}
.br__meta{border-left:2px solid var(--red);padding-left:1.5rem;display:grid;gap:1.2rem}
.br__meta h4{margin:0 0 .3rem;font-family:var(--cond);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;font-size:.72rem;color:var(--tx-3)}
.br__meta p{margin:0;color:var(--tx)}
.br__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}

/* ---------- 07 contact ---------- */
.ct{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
.ct h2{font-family:var(--head);font-size:clamp(1.8rem,3.8vw,3.2rem);letter-spacing:-.03em;line-height:1}
.ct__note{color:var(--tx-2);margin:1.4rem 0 0;max-width:40ch}
.form{display:grid;gap:1.15rem;background:linear-gradient(165deg,var(--s2,rgba(255,255,255,.03)),transparent);
  border:1px solid var(--line);border-radius:6px;padding:clamp(1.3rem,2.6vw,2rem)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.fld{display:grid;gap:.4rem}
.fld label{font-family:var(--cond);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.76rem;color:var(--tx-2)}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:1rem;padding:.95rem 1.05rem;color:var(--tx);width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);border-radius:4px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--tx-3)}
.fld textarea{resize:vertical;min-height:92px}
.fld select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .4rem center;background-size:17px;padding-right:2.2rem}
.fld select option{background:var(--ink-3);color:var(--tx)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--tx-3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--red);background:rgba(255,42,24,.07);
  box-shadow:0 0 0 3px rgba(255,42,24,.18);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--tx-3);opacity:1}
.form__ok{border-left:2px solid var(--red);padding:.85rem 1rem;background:rgba(255,42,24,.08);
  font-size:.94rem}
[hidden]{display:none !important}

/* ---------- footer ---------- */
.ftr{margin-left:var(--rail);background:var(--ink-2);border-top:1px solid var(--line);
  padding:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,5vw,4.5rem);
  display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center;
  font-family:var(--cond);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.74rem;color:var(--tx-3);
}
.ftr a:hover{color:var(--red)}
.ftr__links{display:flex;flex-wrap:wrap;gap:1.4rem}



/* ---------- imagery: photo cards, shot rows, gallery ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
.pcard{
  position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;isolation:isolate;background:var(--ink-3);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s;
}
.pcard img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) brightness(.62);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s;
}
.pcard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(5,5,5,.92));
}
.pcard:hover{transform:translateY(-5px);border-color:rgba(255,42,24,.5)}
.pcard:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.75)}
.pcard__t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.2rem 1.3rem}
.pcard__t h3{font-family:var(--head);font-size:clamp(1.05rem,1.7vw,1.35rem);
  letter-spacing:-.01em;color:#fff;margin:0 0 .3rem}
.pcard__t p{margin:0;font-size:.88rem;color:var(--tx-2);line-height:1.5}

/* small photo rows */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem}
.shots--2{grid-template-columns:repeat(2,1fr);max-width:760px}
.shots figure{margin:0;border-radius:4px;overflow:hidden;border:1px solid rgba(0,0,0,.14);
  aspect-ratio:4/3;background:#ddd}
.ch--shot .shots figure,.ch--ink3 .shots figure{border-color:var(--line);background:var(--ink-3)}
.shots img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shots figure:hover img{transform:scale(1.05)}
.shots--2 figure{aspect-ratio:1/1}

/* gallery */
.ch--gal{min-height:auto}
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:.9rem;margin-top:2rem}
.gal figure{margin:0;border-radius:4px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1/1;background:var(--ink-3)}
.gal figure:nth-child(1),.gal figure:nth-child(6){grid-row:span 2;aspect-ratio:1/2.06}
.gal img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.3) brightness(.8);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s}
.gal figure:hover img{transform:scale(1.06);filter:grayscale(0) brightness(1)}

@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .pgrid{grid-template-columns:1fr}
  .pcard{aspect-ratio:16/10}
  .shots{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .shots figure:nth-child(3){display:none}
  .gal{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .gal figure:nth-child(1),.gal figure:nth-child(6){grid-row:span 1;aspect-ratio:1/1}
}


/* LiteSpeed swaps not-yet-loaded images for a 1x1 base64 GIF; stretched across a
   card that reads as a grey block. Hide the placeholder so the dark card shows
   through until the real photo arrives, then fade it in. */
.pcard img[src^="data:"],.gal img[src^="data:"],.shots img[src^="data:"]{opacity:0}
.pcard img,.gal img,.shots img{transition:opacity .4s ease,transform .55s cubic-bezier(.2,.8,.2,1),filter .35s}



/* Inner pages stack a short header above one or two chapters. Forcing every
   chapter to a full viewport height left large dead gaps, so only the
   single-page home keeps that behaviour. */
body:not(.home) .stage .ch{min-height:auto}
body:not(.home) .stage .ch--head{padding-bottom:0}
body:not(.home) .stage .ch + .ch{padding-top:clamp(2rem,5vh,3.4rem)}


/* ---------- offer posters (wp-admin > Offer Posters) ---------- */
.posters-wrap{margin-top:clamp(2rem,4vh,3rem)}
.posters-h{
  font-family:var(--cond);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  font-size:.8rem;color:var(--red);margin:0 0 1rem;display:flex;align-items:center;gap:.85rem;
}
.posters-h::after{content:"";flex:1;max-width:120px;height:1px;background:var(--line-2)}
.posters{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;max-width:820px}
.poster{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--ink-3);transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s}
.poster:hover{transform:translateY(-4px);border-color:rgba(255,42,24,.45)}
.poster img{width:100%;height:auto;display:block}
.poster figcaption{
  padding:.7rem .9rem;font-family:var(--cond);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:.72rem;color:var(--tx-3);border-top:1px solid var(--line);
}
@media (max-width:640px){ .posters{grid-template-columns:1fr;max-width:420px} }

/* ---------- offer cards (managed from wp-admin > Offers) ---------- */
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.8rem}
.ocard{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(165deg,var(--ink-3),var(--ink-2));overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s;
}
.ocard:hover{transform:translateY(-5px);border-color:rgba(255,42,24,.45);
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.ocard__img{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);flex:none}
.ocard__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.ocard:hover .ocard__img img{transform:scale(1.05)}
.ocard__b{padding:1.3rem 1.35rem 1.5rem}
.ocard__b h3{font-family:var(--head);font-size:clamp(1.05rem,1.6vw,1.3rem);
  letter-spacing:-.01em;color:#fff;margin:0 0 .5rem}
.ocard__b p{margin:0;color:var(--tx-2);font-size:.94rem;line-height:1.65}
.ocard__note{margin-top:1.6rem;font-size:.86rem;color:var(--tx-3)}
.ocard__empty{margin-top:1.6rem;color:var(--tx-3);border:1px dashed var(--line-2);
  padding:1.2rem;border-radius:6px}
.ocard__empty strong{color:var(--tx)}
.ch--offers{min-height:auto}

@media (max-width:1080px){ .ogrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .ogrid{grid-template-columns:1fr} }

/* ---------- multi-page: primary nav, doc pages, FAQ ---------- */
.top__brand{
  font-family:var(--head);font-size:1.15rem;letter-spacing:-.01em;text-transform:uppercase;color:#fff;
}
.top__brand em{font-style:normal;color:var(--red)}
.pnav{display:flex;gap:1.5rem;align-items:center}
.pnav a{
  font-family:var(--cond);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:.82rem;color:var(--tx-3);padding:.3rem 0;position:relative;transition:color .2s;
}
.pnav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--red);transition:width .24s cubic-bezier(.2,.8,.2,1)}
.pnav a:hover{color:var(--tx)}
.pnav a:hover::after,.pnav a[aria-current="page"]::after{width:100%}
.pnav a[aria-current="page"]{color:#fff}

.ch--head{min-height:auto;padding-bottom:0;border-bottom:0;justify-content:flex-start}
/* the page-header block is short, so the tag must sit in normal flow -
   left absolute it collided with the H1 */
.ch--head .ch__tag{margin:0 0 1rem}
.ch--head h1{font-size:clamp(1.9rem,4vw,3.4rem);max-width:20ch}
.ch--head .hero__lede{margin-top:1.2rem}

/* legal / long-form documents */
.ch--doc{min-height:auto}
.doc{max-width:70ch;color:var(--tx-2);font-size:1rem;line-height:1.75}
.doc h2{font-family:var(--head);font-size:clamp(1.6rem,3.4vw,2.4rem);color:#fff;
  margin:0 0 1.2rem;letter-spacing:-.02em}
.doc h3{font-family:var(--cond);font-weight:700;font-size:1.12rem;letter-spacing:.06em;
  color:#fff;margin:2.2rem 0 .7rem;text-transform:uppercase}
.doc p{margin:0 0 1rem}
.doc ul{margin:0 0 1.2rem;padding-left:1.1rem;display:grid;gap:.55rem}
.doc li{padding-left:.2rem}
.doc li::marker{color:var(--red)}
.doc a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.doc strong{color:var(--tx)}

/* FAQ (mirrors the FAQPage schema) */
.ch--faq{min-height:auto}
.faqs{display:grid;gap:.7rem;max-width:60rem}
.faq{border:1px solid var(--line);border-radius:3px;background:var(--ink-3);overflow:hidden}
.faq[open]{border-color:rgba(255,42,24,.45)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 1.4rem;font-family:var(--cond);font-weight:700;
  font-size:1.02rem;letter-spacing:.02em;color:var(--tx);display:flex;justify-content:space-between;
  gap:1.2rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--head);font-size:1.3rem;color:var(--red);
  line-height:1;transition:transform .25s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 1.4rem 1.25rem;color:var(--tx-2);font-size:.97rem;line-height:1.7}
.faq__a p{margin:0}

/* full footer */
.ftr--full{display:block;padding:clamp(2.6rem,5vw,4rem) clamp(1.4rem,5vw,4.5rem) 0;
  text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.94rem}
.ftr__cols{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:2.4rem;padding-bottom:2.6rem}
.ftr__cols h4{font-family:var(--cond);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  font-size:.74rem;color:#fff;margin:0 0 1rem}
.ftr__cols p{margin:0;color:var(--tx-3);line-height:1.7}
.ftr__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ftr__cols a{color:var(--tx-2);transition:color .18s}
.ftr__cols a:hover{color:var(--red)}
.ftr--full .ftr__bar{border-top:1px solid var(--line);padding:1.4rem 0;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--tx-3);font-size:.85rem}

@media (max-width:1080px){
  .pnav{display:none}
  .ftr__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .top__brand{font-size:1rem}
  .ftr__cols{grid-template-columns:1fr;gap:1.8rem}
  .ftr--full{margin-bottom:62px}
}

/* ---------- reveal ---------- */
.rv{opacity:1}
html.js .rv{opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,.8,.24,1),transform .75s cubic-bezier(.22,.8,.24,1)}
html.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .band__t{animation:none}
  html.js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  /* photo recedes so the text column owns the screen */
  .hero__shot{width:78%;opacity:.20}
  #c1::after{background:linear-gradient(90deg,rgba(5,5,5,.95) 30%,rgba(5,5,5,.80) 70%,rgba(5,5,5,.7))}
  .hero{grid-template-columns:1fr}
  .hero__side{display:none}
  .pick,.slab,.br__grid,.ct{grid-template-columns:1fr}
  .pick__panel{min-height:auto}
  .menu{grid-template-columns:1fr}
  .menu__side{display:none}
  .figs{grid-template-columns:repeat(6,1fr)}
  .fig:nth-child(1),.fig:nth-child(2),.fig:nth-child(3),.fig:nth-child(4){grid-column:auto/span 3;margin-top:0}
}
@media (max-width:720px){
  h1,h2,h3{line-height:1.06}
  .hero__shot{opacity:.16}
  #c1::after{background:linear-gradient(180deg,rgba(5,5,5,.9),rgba(5,5,5,.82))}
  :root{--rail:0px}
  body{font-size:16px}
  .rail{
    top:auto;left:0;right:0;bottom:0;width:100%;height:62px;flex-direction:row;
    border-right:0;border-top:1px solid var(--line);
    padding:0 .85rem;justify-content:space-between;gap:.6rem;
  }
  /* pin and WhatsApp were touching at the right edge */
  .rail .loc-wrap{margin-left:auto}
  .rail__wa{margin-left:.15rem}
  .rail__word{display:none}
  .rail__dots{flex-direction:row;gap:4px}
  .rail__dot{width:30px;height:30px;font-size:.7rem}
  .rail__mark{width:38px;height:38px}
  .stage,.ftr{margin-left:0}
  .stage{padding-bottom:62px}
  .menu{inset:0 0 62px 0;grid-template-columns:1fr;padding-top:64px}
  .top{left:0;height:64px;background:linear-gradient(180deg,rgba(5,5,5,.95),transparent)}
  .top__meta,.top__call{display:none}
  .ch{padding-top:5.5rem}
  .hero__strip{grid-template-columns:repeat(2,1fr)}
  .hero__strip div{border-bottom:1px solid var(--line);padding-bottom:1rem}
  .say__foot{grid-template-columns:1fr;gap:1rem}
  .figs{grid-template-columns:repeat(2,1fr)}
  .f2{grid-template-columns:1fr}
  .ftr{flex-direction:column;text-align:center;margin-bottom:62px}
}

/* ---------- phones: rail bottom-bar overflow fix ----------
   375px of bar was being asked to hold 437px of content, which pushed the
   location and WhatsApp buttons off the right edge. Navigation lives in the
   menu on phones, so the bar keeps only what people tap. */
@media (max-width:560px){
  .rail__dots{display:none}
  .rail{padding:0 1rem;gap:.75rem;justify-content:space-between}
  .rail .loc-wrap{margin-left:auto}
  .loc{width:44px;height:44px;flex:none}
  .rail__wa{width:44px;height:44px;flex:none;margin-left:0}
  .rail__wa svg{width:24px;height:24px}
}