@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('archivo-italic.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('archivo-normal.woff2') format('woff2')}
/* Barbells & Co — Humanise Digital · award-grade demo */
:root{
  --soft:#C2C7C0;
  --bg:#000000; --panel:#0D0D0D; --ink:#F4F4F2; --muted:#A2A7A1;
  --accent:#00B96B; --ember:#00B96B; --line:rgba(244,244,242,0.12);
}
:root[data-mode="light"]{
  --bg:#F4F4F2; --panel:#ffffff; --ink:#0a0c0a; --muted:#5c625c; --soft:#3c423c; --line:rgba(10,12,10,0.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance}
.sub,.body-copy,.card p,.qa .a p{text-wrap:pretty}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;
  transition:background-color .6s cubic-bezier(.4,0,.2,1),color .6s cubic-bezier(.4,0,.2,1)}
::selection{background:var(--accent);color:#000}
[data-anim],[data-ganim]{visibility:hidden}
.rm [data-anim],.rm [data-ganim]{visibility:visible}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* progress bar — CSS scroll-timeline w/ JS fallback */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);
  transform-origin:0 50%;transform:scaleX(0);z-index:9600}
@supports (animation-timeline: scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root)}
  @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem 5vw;transition:transform .35s cubic-bezier(.3,0,.2,1),
  padding .45s cubic-bezier(.2,1,.3,1),background .45s,backdrop-filter .45s}
.hd.hide{transform:translateY(-102%)}
.hd.dense{padding:.75rem 5vw;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:.9rem;flex-shrink:0}
.logo img{display:block;transition:height .4s cubic-bezier(.2,1,.3,1);
  filter:drop-shadow(0 0 12px rgba(0,185,107,.25))}
.logo .lg-mark{height:56px;width:auto}
.logo .lg-word{height:27px;width:auto}
.hd.dense .logo .lg-mark{height:44px}
.hd.dense .logo .lg-word{height:21px}
:root[data-mode="light"] .logo img{filter:brightness(.72) saturate(1.15)}
@media(max-width:860px){
  .logo{gap:.7rem}
  .logo .lg-mark{height:46px}
  .logo .lg-word{height:21px}
  .hd.dense .logo .lg-mark{height:40px}
  .hd.dense .logo .lg-word{height:18px}
}
@media(max-width:420px){ .logo .lg-word{height:18px} }
.m-logo{position:absolute;top:1.3rem;left:5vw}
.m-logo{display:flex;align-items:center;gap:.8rem}
.m-logo .lg-mark{height:58px;width:auto}
.m-logo .lg-word{height:24px;width:auto}
.hd nav{display:flex;gap:2rem;align-items:center}
.hd nav a{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.65;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s}
.hd nav a:hover{opacity:1}
.hd nav a.cur{opacity:1;border-color:var(--accent)}
.book-mini{background:var(--accent);color:#000!important;opacity:1!important;border:none!important;
  padding:.62rem 1.2rem!important;border-radius:100px;font-weight:600}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);
  width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
@media(max-width:860px){.hd nav{display:none}.burger{display:block}}

/* fullscreen menu */
.menu{position:fixed;inset:0;z-index:9500;visibility:hidden}
.menu .m-bg{position:absolute;inset:0;background:var(--panel);transform:translateY(102%)}
.menu .m-in{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 8vw;gap:1.15rem}
.menu .m-link{display:block;overflow:hidden}
.menu .m-link{padding:.2rem 0;min-height:44px}
.menu .m-link span{display:block;font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(2.1rem,8vw,5.4rem);
  text-transform:uppercase;line-height:1.16;transform:translateY(115%);transition:color .3s}
.menu .m-link:hover span{color:var(--accent)}
.menu .m-meta{position:absolute;bottom:6vh;left:8vw;right:8vw;display:flex;justify-content:space-between;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:0}
.m-close{position:absolute;top:1.4rem;right:5vw;background:none;border:1px solid var(--line);
  color:var(--ink);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:16px}

/* cursor */
.cur-dot,.cur-ring,.cur-chip{position:fixed;pointer-events:none;z-index:9990;transform:translate(-50%,-50%)}
.cur-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);top:-30px;left:-30px}
.cur-ring{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);
  transition:width .3s,height .3s,opacity .3s;top:-30px;left:-30px}
.cur-chip{background:var(--accent);color:#000;font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;
  font-size:10px;letter-spacing:.14em;padding:9px 14px;border-radius:100px;opacity:0;top:-40px;left:-40px}

/* grain + glow */
#grain{position:fixed;inset:0;z-index:9400;pointer-events:none;opacity:.06;mix-blend-mode:overlay}
.glow{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.14}
.glow.g1{width:46vw;height:46vw;background:radial-gradient(circle,#00B96B,transparent 70%);top:-12vw;right:-12vw}
.glow.g2{width:38vw;height:38vw;background:radial-gradient(circle,#7fe0ae,transparent 70%);bottom:-14vw;left:-10vw;opacity:.05}

/* media in placeholders */
[class*="ph-"] img,[class*="ph-"] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-dim::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55));pointer-events:none}

/* SHAPE RULE: interactive = pill (100px) · surfaces = 14px. No other radii. */
/* layout primitives */
main{position:relative;z-index:1}
section{padding:19vh 8vw;position:relative}
.kick{display:flex;align-items:center;gap:.8rem;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);margin-bottom:2rem}
.kick::before{content:'';width:28px;height:1px;background:var(--accent);flex-shrink:0}
h1,h2{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:.98;letter-spacing:0}
h1 em,h2 em{font-style:italic;letter-spacing:0}
.h-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.h-line i{display:block;font-style:normal}
.sub{color:var(--soft);line-height:1.75;max-width:44ch;margin-top:1.9rem;font-size:clamp(1rem,1.35vw,1.12rem);font-weight:300}
.body-copy{color:var(--soft);line-height:1.95;max-width:56ch;margin-top:1.3rem;font-size:.95rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.4rem;background:var(--accent);color:#000;
  font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;
  padding:1.1rem 2.3rem;border-radius:100px;letter-spacing:.12em;will-change:transform;cursor:pointer;border:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);transition:border-color .3s}
.btn.ghost:hover{border-color:var(--accent)}
.btn:active{transform:scale(.98)}
.btn span{display:inline-block}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:12vh}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:center;width:100%}
.hero h1{font-size:clamp(2.9rem,7vw,6.3rem)}
.media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.media .ph{position:absolute;inset:0}
.media .tag{position:absolute;bottom:12px;left:12px;font-family:ui-monospace,monospace;font-size:10px;
  letter-spacing:.12em;background:rgba(0,0,0,.7);color:var(--accent);padding:6px 12px;border-radius:100px;z-index:3}
.ph-a{background:linear-gradient(140deg,#07130c,#0f3a24 34%,#00B96B 58%,#0f3a24 78%,#07130c);background-size:220% 220%;animation:drift 9s ease-in-out infinite alternate}
.ph-b{background:linear-gradient(120deg,#080a08,#173321 45%,#2ea36b 70%,#080a08);background-size:200% 200%;animation:drift 11s ease-in-out infinite alternate}
.ph-c{background:linear-gradient(160deg,#070a08,#1d4d33 40%,#7fe0ae 62%,#070a08 85%);background-size:220% 220%;animation:drift 13s ease-in-out infinite alternate}
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}

/* video hero */
.hero-video{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:0 8vw}
.hv-media{position:absolute;inset:0;will-change:transform,filter;transform-origin:50% 42%;
  box-shadow:0 0 0 1px rgba(244,244,242,.07),0 0 90px rgba(0,185,107,.06);overflow:hidden}
.hv-media .ph{position:absolute;inset:0}
.hv-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.2) 100%),
             linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 30%,transparent 55%,var(--bg) 100%)}
.hv-content{position:relative;z-index:3;max-width:60rem;padding-top:14vh;will-change:transform,opacity}
.hero-video .sub{max-width:40ch}
@media(max-width:860px){.hv-content{padding-top:20vh}.hv-shade{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.34) 78%,var(--bg) 98%)}}

/* statement / highlight */
.statement p{font-family:'Archivo',sans-serif;font-stretch:110%;font-weight:700;font-size:clamp(1.55rem,3.5vw,2.8rem);
  line-height:1.3;text-transform:none;max-width:24ch;letter-spacing:-.01em}
.statement .w{display:inline-block;transition:opacity .18s linear}

/* cards grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:4.2rem;perspective:900px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel);border:1px solid rgba(244,244,242,.11);border-radius:14px;overflow:hidden;will-change:transform}
.card .c-media{aspect-ratio:4/3;overflow:hidden;position:relative}
.card .c-media>div{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,1,.3,1)}
.card{transition:border-color .35s,transform .35s cubic-bezier(.2,1,.3,1)}
.card:hover{border-color:rgba(0,185,107,.4);transform:translateY(-3px)}
.card:hover .c-media>div{transform:scale(1.07)}
.card .c-body{padding:1.15rem 1.2rem 1.35rem}
.card h3{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;font-size:.98rem;text-transform:uppercase;letter-spacing:.09em}
.card p{color:var(--soft);font-size:.84rem;line-height:1.75;margin-top:.6rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;border-top:1px solid var(--line);padding-top:3.4rem;margin-top:4.5rem}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block;font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(2.6rem,5.2vw,4.6rem);
  color:var(--accent);font-variant-numeric:tabular-nums;line-height:1;will-change:transform;transform-origin:0 85%}
.stat b span{font:inherit;color:inherit;letter-spacing:inherit;display:inline;margin:0}
.stat b .u{font-style:normal;font-size:.48em;margin-left:.08em;opacity:.85}
.stat > span{display:block;margin-top:.7rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* split */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:6vw;align-items:center}
@media(max-width:900px){.split,.hero .wrap{grid-template-columns:1fr}}
.split h2{font-size:clamp(2rem,4.6vw,3.8rem)}

/* marquee */
.mq{overflow-x:clip;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.6rem 0;will-change:transform}
.mq .track{display:flex;gap:3.5rem;white-space:nowrap;font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  font-size:clamp(1.8rem,4.5vw,3.6rem);text-transform:uppercase;animation:mq 26s linear infinite;width:max-content}
.mq .track em{font-style:normal;color:var(--accent)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* chapter numerals (About) */
.chap{position:relative}
.chap .chap-num{position:absolute;top:-.55em;left:-.04em;z-index:0;pointer-events:none;
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;line-height:1;
  font-size:clamp(6rem,17vw,13rem);color:transparent;
  -webkit-text-stroke:1px rgba(0,185,107,.28);text-stroke:1px rgba(0,185,107,.28)}
.chap>*:not(.chap-num){position:relative;z-index:1}
.chap-full{padding:22vh 8vw;text-align:left}
.chap-full .inner{max-width:62ch;margin:0 auto}
.chap-full h2{font-size:clamp(2rem,4.8vw,4rem);margin-bottom:1.6rem}

/* cylinder */
.cyl-wrap{height:280vh;position:relative}
.cyl-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;
  perspective:68vw;overflow:hidden}
.cyl{position:relative;transform-style:preserve-3d;height:1em;font-size:clamp(2.2rem,6vw,5rem)}
.cyl b{position:absolute;left:50%;top:50%;transform-origin:center;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;backface-visibility:hidden;
  -webkit-backface-visibility:hidden}
.cyl b em{font-style:normal;color:var(--accent)}

/* dual wave — pinned viewport stage */
.wave-wrap{height:200vh}
@media(min-width:761px){ .wave-wrap{height:260vh} }
.wave-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:0 6vw}
.wave-sticky.flat{position:static;height:auto;padding:16vh 8vw 10vh}
.wave-head{position:absolute;top:max(11vh,88px);left:6vw}
.wave-sticky.flat .wave-head{position:static;margin-bottom:2rem}
.wave{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:3vw;align-items:center;width:100%}
.wave ul{list-style:none;min-width:0}
.wave li{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(0.95rem,min(2.3vw,3.6vh),1.9rem);
  text-transform:uppercase;line-height:1.6;opacity:.28;transition:opacity .25s,color .25s;
  will-change:transform;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave li.on{opacity:1;color:var(--accent)}
.wave .w-core{width:clamp(120px,19vw,230px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;position:relative}
.wave .w-chip{position:absolute;bottom:10px;left:10px;right:10px;background:rgba(0,0,0,.75);color:var(--accent);
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.14em;padding:6px 11px;border-radius:100px;z-index:2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave .col-r{text-align:right}
@media(max-height:560px){ .wave li{line-height:1.42} }
/* packages stack */
.stack{margin-top:3rem}
.pk{position:sticky;background:var(--panel);border:1px solid rgba(244,244,242,.11);border-radius:14px;
  padding:2.4rem 2.6rem;margin-bottom:1.2rem;display:grid;grid-template-columns:auto 1fr auto;gap:2.5rem;align-items:center}
.pk i{font-family:ui-monospace,monospace;font-style:normal;color:var(--accent);font-size:12px}
.pk h3{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(1.2rem,2.4vw,1.9rem);text-transform:uppercase}
.pk p{color:var(--muted);font-size:.85rem;line-height:1.75;max-width:52ch;margin-top:.5rem}
.pk .tagline{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(max-width:800px){.pk{grid-template-columns:1fr;gap:1rem}}

/* faq */
.faq{margin-top:3rem;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;background:none;border:none;color:var(--ink);text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.6rem 0;
  font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;font-size:clamp(1rem,2vw,1.35rem);text-transform:uppercase}
.qa button i{font-style:normal;color:var(--accent);transition:transform .4s cubic-bezier(.2,1,.3,1)}
.qa.open button i{transform:rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.2,1,.3,1)}
.qa .a p{color:var(--muted);line-height:1.8;font-size:.9rem;max-width:60ch;padding:0 0 1.6rem}

/* drag gallery */
.dragzone{touch-action:pan-y;overflow:hidden;cursor:none;padding:4vh 0}
.dtrack{display:flex;gap:1.2rem;will-change:transform;padding:0 8vw;width:max-content}
.dcard{width:min(64vw,380px);flex-shrink:0;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:3/4;will-change:transform}
.dcard .lab{position:absolute;bottom:14px;left:14px;z-index:2;font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  font-size:1.1rem;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.dcard .lab small{display:block;font-family:ui-monospace,monospace;font-weight:400;font-size:10px;
  letter-spacing:.16em;color:var(--accent);margin-top:.35rem}
.dbar{height:2px;background:var(--line);margin:2.4rem 8vw 0;position:relative}
.dbar i{position:absolute;top:0;left:0;height:100%;width:20%;background:var(--accent)}

/* testimonials */
.tst{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
@media(max-width:900px){.tst{grid-template-columns:1fr}}
.t-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:2rem 1.9rem}
.t-card p{font-style:italic;font-weight:300;font-size:1.05rem;line-height:1.7}
.t-card span{display:block;margin-top:1.4rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* cta + footer */
.cta{text-align:left;padding-top:22vh;padding-bottom:14vh}
.cta h2{font-size:clamp(3rem,10.5vw,9rem)}
.cta .contact{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:3rem;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cta .contact b{color:var(--ink);font-weight:500}
footer{border-top:1px solid var(--line);padding:3.4rem 8vw 2.4rem}
footer .f-brand{display:flex;align-items:center;gap:1.4rem;margin-bottom:2rem}
footer .f-brand img{height:92px;width:auto}
footer .f-brand b{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(1rem,2.4vw,1.5rem);
  text-transform:uppercase;letter-spacing:.04em}
footer .f-brand b i{font-style:italic;color:var(--accent)}
footer .f-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* transition overlay */
.tr{position:fixed;inset:0;z-index:9700;pointer-events:none}
.tr .tr-bg{position:absolute;inset:0;background:var(--accent);transform:translateY(102%)}
.tr .tr-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:clamp(2.5rem,12vw,10rem);text-transform:uppercase;
  color:#000;overflow:hidden}
.tr .tr-t b{display:inline-block;transform:translateY(120%)}
/* preloader */
.pre{position:fixed;inset:0;z-index:9800;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3rem;will-change:transform}
.pre .p-logo{overflow:hidden}
.pre .p-logo img{height:clamp(76px,14vw,150px);width:auto;display:block;transform:translateY(115%)}
.pre .p-bar{position:relative;width:min(300px,56vw);height:34px;will-change:transform}
.pre .p-track{position:absolute;left:26px;right:26px;top:50%;height:2px;background:rgba(244,244,242,0.12);transform:translateY(-50%)}
.pre .p-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:#00B96B}
.pre .p-plate{position:absolute;top:50%;width:14px;height:34px;border-radius:4px;background:#00B96B;transform:translateY(-50%)}
.pre .p-plate.l{left:6px}.pre .p-plate.r{right:6px}
.pre .p-cap{position:absolute;top:50%;width:4px;height:22px;border-radius:2px;background:rgba(244,244,242,0.35);transform:translateY(-50%)}
.pre .p-cap.l{left:0}.pre .p-cap.r{right:0}
.pre .p-count{font-family:ui-monospace,monospace;font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:.2em;color:#00B96B}

/* ---- V2.1 mobile pass ---- */
@media(max-width:980px){
  .card h3{font-size:.82rem;letter-spacing:.05em}
  .card .c-body{padding:1rem .95rem 1.15rem}
  .card p{font-size:.8rem;line-height:1.65}
  .pk h3{font-size:clamp(1.05rem,4.4vw,1.5rem)}
  .dcard .lab{font-size:.95rem}
}
@media(max-width:560px){
  section{padding:13vh 7vw}
  .hero-video{padding:0 7vw}
  .stats{gap:1.8rem 1rem}
  .stat b{font-size:2.6rem}
  .chap-full{padding:15vh 7vw}
  .chap .chap-num{font-size:5.4rem;top:-.42em}
  footer .f-brand img{height:42px}
  footer .f-brand b{font-size:.92rem}
  .qa button{font-size:.95rem;gap:1rem}
  .cta h2{font-size:clamp(2.4rem,13vw,4.5rem)}
  .mq .track{font-size:clamp(1.4rem,7vw,2.2rem)}
}
/* ---- signature scene: the graveyard of quick fixes ---- */
.fixes-wrap{height:280vh;padding:0}
.fixes-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:0 7vw}
.fixes-sticky.flat{position:static;height:auto;padding:16vh 7vw}
.fx-dead{position:absolute;inset:0;pointer-events:none}
.fx-dead b{position:absolute;font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;
  text-transform:uppercase;font-size:clamp(.9rem,2.4vw,1.5rem);color:var(--muted);opacity:.14;
  text-decoration:line-through;text-decoration-color:var(--accent);white-space:nowrap}
.fx-dead b{opacity:.18}
.fx-line{position:relative;font-size:clamp(2rem,7.5vw,5.4rem);line-height:1.1;min-height:1.2em}
.fx-word{position:relative;display:inline-block}
.fx-strike{position:absolute;left:-3%;top:44%;width:106%;height:16%;transform:scaleX(0);transform-origin:0 50%;overflow:visible}
.fx-strike path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fx-word b{display:inline-block;font-weight:inherit}
.fx-mantra{position:absolute;font-size:clamp(2.6rem,9vw,7rem);opacity:0}
.fx-mantra .h-line i{display:block}
.fx-cap{position:absolute;bottom:9vh;font-family:ui-monospace,monospace;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* ================= V2.2 — mobile elegance pass ================= */
html{-webkit-text-size-adjust:100%}

/* WAVE — mobile: swipeable service cards (image-forward) */
@media(max-width:760px){
  .wave-sticky.flat{padding:12vh 0 8vh;display:block;height:auto}
  .wave-sticky.flat .wave-head{position:static;margin:0 7vw 1.5rem}
  .wave{display:block}
  .wave ul,.wave .w-core{display:none}
  .wave-rail{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 7vw 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wave-rail::-webkit-scrollbar{display:none}
  .w-card{flex:0 0 70vw;aspect-ratio:4/5;border-radius:14px;overflow:hidden;position:relative;
    scroll-snap-align:center;background:var(--panel);border:1px solid var(--line)}
  .w-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .w-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.72))}
  .w-card .wc-name{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;
    font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;text-transform:uppercase;
    font-size:1.05rem;letter-spacing:.04em;color:var(--ink)}
  .w-card .wc-i{position:absolute;top:.9rem;right:1rem;z-index:2;font-family:ui-monospace,monospace;
    font-size:10px;letter-spacing:.18em;color:var(--accent)}
  .wave-hint{display:block;margin:.4rem 7vw 0;font-family:ui-monospace,monospace;font-size:9px;
    letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
}
@media(min-width:761px){ .wave-rail,.wave-hint{display:none} }

@media(max-width:760px){
  .split .media{aspect-ratio:4/5}
  .statement p{font-size:clamp(1.35rem,6.2vw,1.9rem);line-height:1.45}
  .cyl b{font-size:clamp(1.05rem,4.4vw,2rem)}
}

@media(max-width:560px){
  .hero h1,.hero-video h1{font-size:clamp(2.05rem,10.4vw,2.7rem)}
  .hv-content{padding-top:23vh}
  .hero-video .sub{font-size:1rem}
  .fx-line{font-size:clamp(1.55rem,8.4vw,2.5rem)}
  .fx-mantra{font-size:clamp(2.1rem,11vw,3.1rem)}
  .fx-cap{bottom:5vh}
  .chap-full h2{font-size:clamp(1.7rem,8.2vw,2.6rem)}
  .pk{position:static}
  .t-card{padding:1.4rem 1.2rem}
  .t-card p{font-size:.98rem}
  .dcard{width:74vw}
  .qa .a p{font-size:.92rem}
  footer .f-meta{flex-direction:column;gap:.55rem}
  .m-meta{gap:1.2rem;flex-wrap:wrap}
}

/* debug build badge — remove for production */
.build-badge{position:fixed;left:10px;bottom:10px;z-index:9999;font-family:ui-monospace,monospace;
  font-size:9px;letter-spacing:.2em;color:#000;background:var(--accent);padding:4px 8px;border-radius:100px;opacity:.9;pointer-events:none}

/* ---- V2.6: pinned scenes on mobile ---- */
@media(max-width:760px){
  .fixes-wrap{height:230vh}
  .cyl-wrap{height:210vh}
  .cyl{font-size:clamp(1.35rem,6.8vw,2.3rem)}
  .fx-dead b{font-size:clamp(.7rem,3vw,1rem)}
}

/* ================= V3.0 — completion layer ================= */
/* skip link */
.skip{position:fixed;left:-999px;top:10px;z-index:99999;background:var(--accent);color:#000;
  padding:.7rem 1.2rem;border-radius:100px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.skip:focus{left:10px}

/* quote moment */
.quote-moment{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2rem}
.quote-moment p{font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:800;font-style:italic;
  text-transform:none;font-size:clamp(1.9rem,5.2vw,4.2rem);line-height:1.18;max-width:22ch}
.quote-moment em{font-style:italic;color:var(--accent)}
.quote-moment .q-attr{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* booking form */
.book-form{margin-top:2.6rem;max-width:44rem;text-align:left}
.book-form .hp,.lead-form .hp,form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.book-form label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.book-form input,.book-form select,.book-form textarea{display:block;width:100%;margin-top:.5rem;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--ink);
  font:inherit;font-size:.95rem;padding:.9rem 1rem;letter-spacing:0;text-transform:none;transition:border-color .25s}
.book-form input:focus,.book-form select:focus,.book-form textarea:focus{border-color:var(--accent);outline:none}
.bf-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.bf-actions .btn{margin-top:0}
.bf-alt{font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .25s}
.bf-alt:hover{color:var(--accent)}
.bf-done{margin-top:1.2rem;color:var(--accent);font-size:.9rem}
:root[data-mode="light"] .book-form input,:root[data-mode="light"] .book-form select,:root[data-mode="light"] .book-form textarea{background:#fff}
@media(max-width:640px){.bf-row{grid-template-columns:1fr}}

/* footer parallax reveal */
footer.reveal{position:fixed;left:0;right:0;bottom:0;z-index:0}
main{position:relative;z-index:2;background:var(--bg);box-shadow:0 30px 90px rgba(0,0,0,.55)}

/* ================= V3.3 — horizontal scroll engine ================= */
.hscroll-wrap{position:relative;padding:0}
.hscroll-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.hs-head{position:absolute;top:max(10vh,90px);left:8vw;z-index:2;max-width:70vw}
.htrack{display:flex;gap:2vw;padding:0 8vw;align-items:center;will-change:transform}
.htrack::after{content:'';flex:0 0 8vw}
.hs-panel{flex:0 0 auto;width:clamp(280px,36vw,500px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  position:relative;border:1px solid var(--line);background:var(--panel)}
.hs-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-panel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.78))}
.hs-panel .hs-body{position:absolute;left:1.3rem;right:1.3rem;bottom:1.2rem;z-index:2}
.hs-panel .hs-body h3{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.05em}
.hs-panel .hs-body p{color:var(--soft);font-size:.8rem;line-height:1.65;margin-top:.45rem}
.hs-panel .hs-body small{display:block;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.2em;
  color:var(--accent);margin-top:.5rem;text-transform:uppercase}
.htrack .t-card{flex:0 0 auto;width:clamp(300px,32vw,460px)}
.tl-card{flex:0 0 auto;width:clamp(250px,28vw,400px);border:1px solid var(--line);border-radius:14px;
  padding:2.2rem 1.9rem;background:var(--panel);align-self:center}
.tl-card b{display:block;font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:2.6rem;
  color:transparent;-webkit-text-stroke:1px rgba(0,185,107,.5);line-height:1}
.tl-card h3{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;text-transform:uppercase;
  font-size:1rem;letter-spacing:.06em;margin-top:1rem}
.tl-card p{color:var(--soft);font-size:.85rem;line-height:1.7;margin-top:.6rem}
.hs-hint{position:absolute;bottom:6vh;left:8vw;font-family:ui-monospace,monospace;font-size:9px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){
  .htrack::after{flex-basis:7vw}
  .hs-panel{width:76vw}
  .htrack .t-card{width:78vw}
  .tl-card{width:74vw}
  .hs-head{max-width:84vw;left:7vw}
  .htrack{padding:0 7vw;gap:4vw}
}

/* footer lead-gen */
footer .f-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;margin:2.4rem 0 2.8rem;align-items:start}
footer .f-lead h3{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.05}
footer .f-lead h3 em{font-style:italic;color:var(--accent)}
footer .f-lead p{color:var(--soft);font-size:.92rem;line-height:1.8;margin-top:1rem;max-width:38ch}
footer .book-form{margin-top:0}
@media(max-width:860px){footer .f-grid{grid-template-columns:1fr;gap:2rem}}

/* ---- V3.4 ---- */
footer:not(.reveal){position:static}
@media(max-width:860px){
  footer{padding:2.4rem 7vw 4.6rem}
  footer .f-brand img{height:72px}
  footer .f-grid{margin:1.6rem 0 2rem;gap:1.6rem}
  footer .f-brand img{height:48px}
}
/* mobile wave joins the horizontal engine */
@media(max-width:760px){
  .htrack .w-card{flex:0 0 70vw;aspect-ratio:4/5}
}

/* ---- V3.5: craft layer ---- */
.pinbar{position:absolute;right:calc(5vw - 2px);top:50%;transform:translateY(-50%);width:2px;height:80px;
  background:var(--line);border-radius:2px;z-index:3;overflow:hidden}
.pinbar i{position:absolute;left:0;top:0;width:100%;height:0%;background:var(--accent)}
.book-form label:focus-within{color:var(--accent)}
.book-form input,.book-form select,.book-form textarea{transition:border-color .25s,transform .15s}
.book-form input:focus,.book-form textarea:focus{transform:translateY(-1px)}
.bf-note{font-size:.68rem;letter-spacing:.1em;color:var(--muted);margin-top:.9rem;text-transform:uppercase}
.cred-strip{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.cred-strip span{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.cred-strip b{color:var(--accent);font-weight:400}

/* ---- V4.2 kinetic axis + micro-craft ---- */
.hd nav a{transition:font-stretch .4s cubic-bezier(.2,1,.3,1),color .3s}
.hd nav a:hover{font-stretch:125%}
.btn span{transition:font-stretch .4s cubic-bezier(.2,1,.3,1)}
.btn:hover span{font-stretch:125%}
.mq .track{will-change:font-stretch,transform}
.bf-alt{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0% 1px;border-bottom:none;
  padding-bottom:3px;transition:background-size .4s cubic-bezier(.2,1,.3,1),color .25s}
.bf-alt:hover{background-size:100% 1px}
.hs-panel{isolation:isolate}
.hs-panel img{will-change:transform;transform:scale(1.12)}

/* ═══════════ V5.0 — real content layer ═══════════ */

/* photography now lives directly in .media / .w-core (no gradient placeholders) */
.media>img,.w-core .ph>img,.pf-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .wrap .media{aspect-ratio:4/5}
@media(max-width:900px){.hero .wrap .media{aspect-ratio:4/5;margin-top:2.5rem}}

/* CJ profile block (about) */
.profile{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:center}
.pf-media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.pf-body h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.pf-body .sub{margin-top:.9rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
@media(max-width:900px){.profile{grid-template-columns:1fr;gap:2.5rem}.pf-media{aspect-ratio:4/5}}

/* package pricing */
.pk-inc{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.15rem}
.pk-inc li{font-size:.66rem;letter-spacing:.06em;color:var(--soft);border:1px solid var(--line);
  border-radius:100px;padding:.38rem .85rem;line-height:1.3}
.pk-price{text-align:right;white-space:nowrap}
.pk-price b{display:block;font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;
  font-size:clamp(1.05rem,2.1vw,1.55rem);color:var(--accent);text-transform:uppercase;letter-spacing:.02em}
.pk-price small{display:block;margin-top:.4rem;font-family:ui-monospace,monospace;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:800px){.pk-price{text-align:left}.pk-price b{font-size:1.35rem}}

/* before / after pairs sit square so both halves stay readable */
.hs-panel.ba{aspect-ratio:1/1;width:clamp(300px,44vw,620px);background:#090909}
.hs-panel.ba img{transform:none;object-fit:contain}
.hs-panel.ba::after{background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.85))}
@media(max-width:860px){.hs-panel.ba{width:82vw}}

/* real photography is portrait — keep it upright on small screens */
@media(max-width:760px){.split .media{aspect-ratio:4/5}}

/* ── V5.1 · horizontal strips: heading must never sit on the panels ── */
@media(min-width:861px){
  .hscroll-sticky{padding-top:clamp(74px,12vh,155px)}
  .hs-panel{height:min(58vh,640px);width:auto}
  .hs-panel.ba{height:min(56vh,600px);width:auto}
}
@media(min-width:861px) and (max-height:760px){
  .hs-head h2{font-size:clamp(1.4rem,2.6vw,2rem)}
  .hs-panel{height:56vh}
  .hs-panel.ba{height:54vh}
}

/* reduced-motion fallback: the strip stops pinning, so the heading joins the flow */
.hscroll-sticky.flat{display:block;align-items:initial;padding:12vh 0 8vh;overflow-y:hidden}
.hscroll-sticky.flat .hs-head{position:static;max-width:84vw;margin:0 8vw 2.2rem}
.hscroll-sticky.flat .htrack{transform:none!important;align-items:stretch}
.hscroll-sticky.flat .hs-panel,.hscroll-sticky.flat .hs-panel.ba{height:min(56vh,520px);width:auto}
.hscroll-sticky.flat .hs-hint{position:static;display:block;margin:1.6rem 8vw 0}
.hscroll-sticky.flat .pinbar{display:none}
@media(min-width:861px) and (max-height:700px){
  .hscroll-sticky{padding-top:clamp(58px,9vh,100px)}
  .hs-panel{height:54vh}
  .hs-panel.ba{height:52vh}
  .hs-head .kick{display:none}
}

/* ═══════════ V5.3 — before/after reveal, media blocks ═══════════ */

/* ---- pinned before/after reveal (results) ---- */
.rev-wrap{position:relative}
.rev-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;padding:max(11vh,96px) 8vw 4.5vh}
.rev-head{flex:0 0 auto;margin-bottom:clamp(1rem,2.6vh,2.2rem)}
.rev-head h2{font-size:clamp(1.35rem,3vw,2.5rem);font-family:'Archivo',sans-serif;
  font-stretch:112%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02}
.rev-stage{position:relative;flex:1 1 auto;min-height:0}
.rev-item{position:absolute;inset:0;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:clamp(1.6rem,4.5vw,4.5rem);align-items:center;
  opacity:0;visibility:hidden;pointer-events:none}
.rev-item.on{opacity:1;visibility:visible}

.rev-frame{position:relative;height:var(--fh,46vh);width:calc(var(--fh,46vh) / 2);
  border-radius:14px;overflow:hidden;background:#080808;flex:0 0 auto;
  box-shadow:0 30px 90px -40px rgba(0,0,0,.9)}
.rev-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rv-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,100%));will-change:clip-path}
.rv-line{position:absolute;top:0;bottom:0;left:var(--x,100%);width:2px;
  background:var(--accent);box-shadow:0 0 22px 2px color-mix(in srgb,var(--accent) 55%,transparent);
  transform:translateX(-1px);pointer-events:none}
.rv-line::after{content:'';position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--accent);
  background:color-mix(in srgb,#000 55%,transparent);backdrop-filter:blur(3px)}
.rv-tag{position:absolute;bottom:.85rem;z-index:3;font-family:ui-monospace,monospace;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;padding:.35rem .6rem;border-radius:100px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(4px);color:var(--soft);transition:opacity .3s}
.rv-tag.l{left:.7rem}
.rv-tag.r{right:.7rem;color:var(--accent)}

.rev-body{max-width:34rem}
.rev-body .rv-num{display:block;font-family:ui-monospace,monospace;font-size:10px;
  letter-spacing:.26em;color:var(--accent);margin-bottom:.9rem}
.rev-body h3{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.8rem,4.4vw,3.6rem);line-height:.95;letter-spacing:-.02em}
.rev-body .rv-meta{display:block;margin-top:.8rem;font-family:ui-monospace,monospace;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rev-body blockquote{margin-top:1.4rem;font-style:italic;font-weight:300;
  font-size:clamp(.92rem,1.4vw,1.08rem);line-height:1.7;color:var(--soft);
  border-left:2px solid var(--line);padding-left:1.3rem}
.rev-body blockquote cite{display:block;margin-top:1rem;font-style:normal;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rev-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:clamp(.8rem,2vh,1.6rem)}
.rev-dots{display:flex;gap:.5rem;align-items:center}
.rev-dots i{width:22px;height:2px;background:var(--line);display:block;transition:background .35s}
.rev-dots i.on{background:var(--accent)}
.rev-hint{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}

@media(max-width:900px){
  .rev-sticky{padding:max(9vh,78px) 7vw 3.5vh}
  .rev-item{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:1.2rem;align-items:center}
  .rev-frame{margin-inline:auto}
  .rev-body{max-width:none}
  .rev-body h3{font-size:clamp(1.5rem,6.5vw,2.2rem)}
  .rev-body .rv-num{margin-bottom:.5rem}
  .rev-body blockquote{margin-top:.8rem;font-size:.86rem;line-height:1.55;padding-left:1rem;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .rev-body blockquote cite{margin-top:.7rem}
  .rev-hint{display:none}
}

/* flat fallback — touch + reduced motion: a draggable slider per client */
.rev-wrap.flat{height:auto!important}
.rev-wrap.flat .rev-sticky{position:static;height:auto;display:block;padding:2vh 8vw 6vh;overflow:visible}
.rev-wrap.flat .rev-stage{position:static;min-height:0}
.rev-wrap.flat .rev-item{position:static;inset:auto;opacity:1;visibility:visible;
  pointer-events:auto;margin-bottom:5vh;grid-template-columns:1fr;grid-template-rows:auto auto;gap:1.4rem}
.rev-wrap.flat .rev-frame{height:auto;width:min(74vw,320px);aspect-ratio:1/2;margin-inline:auto}
.rev-wrap.flat .rev-foot{display:none}
.rv-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;margin:0}
.rv-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.rv-range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent}
.rv-drag{position:absolute;left:0;right:0;bottom:2.6rem;z-index:4;text-align:center;
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft);pointer-events:none;text-shadow:0 2px 10px #000;transition:opacity .3s}

/* ---- video blocks ---- */
.vid{position:relative;border-radius:14px;overflow:hidden;background:#080808}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid.band{aspect-ratio:16/9;margin:0 8vw}
.vid.tall{aspect-ratio:9/16}
.vid::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.55))}
.vid .v-cap{position:absolute;left:1.1rem;bottom:.95rem;z-index:2;font-family:ui-monospace,monospace;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.vid-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:0 8vw}
@media(max-width:760px){.vid-pair{grid-template-columns:1fr}.vid.band{margin:0 7vw}}

/* ═══════════ V5.5 — hero CTA, client voices, natural-aspect gallery ═══════════ */
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero-note{margin-top:1.5rem;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);max-width:46ch;line-height:1.9}
@media(max-width:860px){.hero-cta .btn{flex:1 1 100%;text-align:center}.hero-note{font-size:9px;letter-spacing:.1em}}

.voices .v-head{margin-bottom:2.6rem}
.voices h2{font-size:clamp(1.6rem,3.6vw,2.8rem)}
.v-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.v-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:2rem 1.8rem;
  display:flex;flex-direction:column;justify-content:space-between}
.v-card p{font-style:italic;font-weight:300;font-size:1.02rem;line-height:1.72;color:var(--soft)}
.v-card cite{display:block;margin-top:1.6rem;font-style:normal;font-family:'Archivo',sans-serif;
  font-stretch:112%;font-weight:800;text-transform:uppercase;font-size:.92rem;letter-spacing:.02em}
.v-card cite span{display:block;margin-top:.45rem;font-family:ui-monospace,monospace;font-weight:400;
  font-size:9px;letter-spacing:.18em;color:var(--muted)}
.v-more{display:inline-block;margin-top:2rem;font-family:ui-monospace,monospace;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line);
  padding-bottom:.35rem;transition:border-color .3s}
.v-more:hover{border-color:var(--accent)}
@media(max-width:900px){.v-grid{grid-template-columns:1fr;gap:.9rem}.v-card{padding:1.5rem 1.3rem}
  .v-card p{font-size:.96rem}}

/* gallery: each photograph keeps its own shape, so nothing is ever cropped */
.gal{columns:2;column-gap:1.4rem;max-width:1000px;margin:0 auto;padding:0 8vw}
.gal figure{break-inside:avoid;position:relative;margin-bottom:1.1rem;border-radius:14px;
  overflow:hidden;background:#080808;aspect-ratio:auto}
.gal img{width:100%;height:auto;display:block}
.gal figure::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.62))}
.gal figcaption{position:absolute;left:.95rem;bottom:.8rem;z-index:2;font-family:ui-monospace,monospace;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
@media(max-width:860px){.gal{columns:2;column-gap:.9rem;padding:0 7vw}.gal figure{margin-bottom:.9rem}}
@media(max-width:520px){.gal{columns:1}}

/* package CTA + persistent mobile booking bar */
.pk-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.35rem;
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:.35rem;transition:border-color .3s}
.pk-cta:hover{border-color:var(--accent)}

.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:9400;display:none;gap:.6rem;
  padding:.7rem max(3vw,12px) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);transform:translateY(105%);transition:transform .4s cubic-bezier(.3,0,.2,1)}
.bookbar.on{transform:translateY(0)}
.bookbar a{flex:1;text-align:center;padding:.85rem .6rem;border-radius:100px;font-family:'Archivo',sans-serif;
  font-stretch:112%;font-weight:800;text-transform:uppercase;font-size:.72rem;letter-spacing:.06em}
.bookbar .b-main{background:var(--accent);color:#000}
.bookbar .b-alt{border:1px solid var(--line);color:var(--ink)}
@media(max-width:860px){.bookbar{display:flex}body{padding-bottom:0}}

/* comfortable tap targets on touch — text links were 18px tall */
@media(hover:none),(pointer:coarse){
  .v-more,.pk-cta,.bf-alt,.hs-hint{min-height:44px;display:inline-flex;align-items:center}
  .m-link,.hd nav a{min-height:44px;display:flex;align-items:center}
  .bf-actions{gap:.4rem}
}
.bf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
@media(max-width:620px){.bf-actions .btn{flex:1 1 100%}}

/* form feedback + page-to-page pager */
.bf-done{margin-top:1rem;font-size:.9rem;color:var(--accent);line-height:1.6}
.bf-done.err{color:var(--ink)}
.bf-done a{color:var(--accent);border-bottom:1px solid var(--accent)}

.pager{border-top:1px solid var(--line);margin-top:6vh}
.pg-link{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(2.4rem,7vh,5rem) 8vw;transition:background .45s cubic-bezier(.3,0,.2,1)}
.pg-link:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pg-txt{min-width:0}
.pg-kick{display:block;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.75rem}
.pg-title{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.6rem,5vw,3.4rem);line-height:.98;letter-spacing:-.02em}
.pg-sub{margin-top:.8rem;color:var(--soft);font-size:.92rem;line-height:1.6;max-width:44ch}
.pg-arrow{flex:0 0 auto;width:clamp(46px,6vw,68px);height:clamp(46px,6vw,68px);border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);font-size:1.1rem;
  transition:transform .45s cubic-bezier(.3,0,.2,1),border-color .45s,background .45s}
.pg-link:hover .pg-arrow{transform:translateX(8px);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pg-prev{display:flex;justify-content:flex-start;padding:0 8vw 3.5vh}
.pg-prev a{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);min-height:44px;display:inline-flex;align-items:center;transition:color .3s}
.pg-prev a:hover{color:var(--ink)}
@media(max-width:760px){.pg-link{padding:2.6rem 7vw;gap:1.2rem}.pg-prev{padding:0 7vw 3vh}
  .pg-sub{display:none}}

/* ═══════════ V5.8 — three tiers, group, programmes, corporate ═══════════ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.4rem;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:2.4rem 1.9rem 2rem}
.tier.feat{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),0 40px 90px -60px var(--accent)}
.t-flag{position:absolute;top:-.75rem;left:1.9rem;background:var(--accent);color:#000;
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:100px}
.t-num{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.24em;color:var(--muted)}
.tier h3{margin-top:.9rem;font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;letter-spacing:-.02em}
.tier h3 em{color:var(--accent);font-style:normal}
.t-line{margin-top:.9rem;color:var(--soft);font-size:.95rem;line-height:1.65}
.t-price{display:block;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.t-price b{display:block;font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.5rem,3vw,2rem);color:var(--accent);letter-spacing:-.01em}
.t-price small{display:block;margin-top:.4rem;font-family:ui-monospace,monospace;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.t-inc{list-style:none;margin-top:1.5rem;display:flex;flex-direction:column;gap:.7rem}
.t-inc li{position:relative;padding-left:1.3rem;font-size:.88rem;line-height:1.6;color:var(--soft)}
.t-inc li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;
  background:var(--accent)}
.t-inc li b{color:var(--ink)}
.t-for{margin-top:1.5rem;font-size:.8rem;line-height:1.6;color:var(--muted);font-style:italic}
.tier>.btn,.tier>a.btn{margin-top:auto;align-self:flex-start}
.t-note{margin-top:2rem;font-size:.85rem;color:var(--muted);line-height:1.7;max-width:60ch}
.t-note b{color:var(--accent)}
@media(max-width:1000px){.tiers{grid-template-columns:1fr;gap:1rem}
  .tier{padding:2rem 1.5rem 1.7rem}.t-flag{left:1.5rem}}

.group-sec .grp,.corp-sec .corp{display:grid;grid-template-columns:1.5fr .8fr;gap:4vw;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(2rem,4vw,3.4rem)}
.grp-price,.corp-price{text-align:right}
.grp-price b,.corp-price b{display:block;font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);color:var(--accent);line-height:1}
.grp-price small,.corp-price small{display:block;margin-top:.6rem;font-family:ui-monospace,monospace;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){.group-sec .grp,.corp-sec .corp{grid-template-columns:1fr;gap:2rem}
  .grp-price,.corp-price{text-align:left}}

.progs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.2rem}
.pr{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:2rem 1.7rem}
.pr-tag{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent)}
.pr h3{margin-top:.9rem;font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;
  text-transform:uppercase;font-size:1.35rem;letter-spacing:-.01em}
.pr p{margin-top:.9rem;font-size:.88rem;line-height:1.65;color:var(--soft)}
.pr-price{display:block;margin-top:1.4rem;font-family:'Archivo',sans-serif;font-stretch:118%;
  font-weight:800;font-size:1.5rem;color:var(--accent)}
.pr .btn{margin-top:auto;align-self:flex-start}

@media(max-width:960px){.progs{grid-template-columns:1fr}}

/* the booking form, when you have been sent to it */
.book-form.lit{animation:litform 2.2s cubic-bezier(.3,0,.2,1) 1}
@keyframes litform{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  18%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 26%,transparent)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.book-form{border-radius:16px}

/* free-guide email capture */
.lead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(2rem,4vw,3.4rem)}
.lf-row{display:flex;gap:.7rem;margin-top:.4rem}
.lf-row input{flex:1;min-width:0;background:transparent;border:1px solid var(--line);border-radius:100px;
  padding:1rem 1.3rem;color:var(--ink);font-family:'Archivo',sans-serif;font-size:.95rem;font-weight:300}
.lf-row input:focus{outline:none;border-color:var(--accent)}
.lf-row .btn{flex:0 0 auto}
.lf-note{margin-top:1rem;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);line-height:1.9}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:860px){.lead{grid-template-columns:1fr;gap:2rem}
  .lf-row{flex-direction:column}.lf-row .btn{width:100%;text-align:center}}

/* ═══════════ V6.0 — hero type scale, extras grid, card alignment ═══════════ */

/* the video hero had no heading rule of its own and was falling back to the
   browser default, so it read far smaller than every other page hero */
.hero-video h1{font-size:clamp(2.6rem,6.3vw,5.6rem);line-height:.98;letter-spacing:-.02em}
.hero-video .sub{font-size:clamp(1rem,1.35vw,1.15rem);max-width:44ch}
@media(max-width:900px){.hero-video h1{font-size:clamp(2.1rem,8.6vw,3rem)}}

/* extras — a real grid, not a stack of unstyled paragraphs */
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:3rem}
.ad{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:1.8rem 1.6rem;transition:border-color .4s}
.ad:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.ad h4{font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:800;text-transform:uppercase;
  font-size:1rem;letter-spacing:.01em}
.ad p{margin-top:.85rem;font-size:.88rem;line-height:1.65;color:var(--soft);flex:1}
.ad>span{display:block;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}
.ad>span b{font-family:'Archivo',sans-serif;font-stretch:118%;font-weight:800;font-size:1.25rem;
  letter-spacing:0;color:var(--accent);margin-right:.5rem;text-transform:none}
@media(max-width:760px){.addons{grid-template-columns:1fr}}

/* tier and programme cards: price and button line up across the row */
.tier .t-for{padding-top:1.5rem}
.pr p{flex:1}
.pr .pr-price{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line);width:100%}
.pr .btn{width:100%;text-align:center}
.progs{align-items:stretch}

/* ═══════════ V6.1 — hero scale down, input/button alignment ═══════════ */

/* heroes were running hot: 101px on the standard pages, 90px on the video hero */
.hero h1{font-size:clamp(2.4rem,5.4vw,4.8rem)}
.hero-video h1{font-size:clamp(2.25rem,4.9vw,4.3rem)}
@media(max-width:900px){
  .hero h1,.hero-video h1{font-size:clamp(1.95rem,8vw,2.6rem)}
}

/* email capture: the input and the button are the same height and share a baseline */
.lf-row{align-items:stretch;gap:.6rem}
.lf-row input{padding:0 1.4rem;height:54px;line-height:normal}
.lf-row .btn{margin-top:0;height:56px;padding:0 1.9rem;justify-content:center;white-space:nowrap}
.lead-form .bf-done{margin-top:.9rem}
@media(max-width:860px){.lf-row{flex-direction:column}.lf-row .btn{width:100%}}

/* cards: price block sits on a rule, button sits on the card floor */
.tier .t-price,.pr .pr-price{margin-bottom:0}
.tier>.btn,.pr .btn{margin-bottom:0}
.progs .pr,.tiers .tier{padding-bottom:1.9rem}

/* footer credit + social */
.f-social{display:flex;align-items:center;gap:1rem;margin:0 0 1.6rem;padding-top:.4rem}
.f-social .ig{display:inline-flex;align-items:center;gap:.7rem;color:var(--muted);
  padding:.5rem .95rem .5rem .7rem;border:1px solid var(--line);border-radius:100px;min-height:44px;
  transition:color .3s,border-color .3s,background .3s}
.f-social .ig span{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.f-social .ig:hover{color:var(--accent);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.f-social .ig svg{flex:0 0 auto}
.hd-credit{border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.hd-credit:hover{color:var(--accent);border-color:var(--accent)}
.contact a{border-bottom:1px solid var(--line);transition:border-color .3s}
.contact a:hover{border-color:var(--accent)}

/* ═══════════ V6.3 — mobile pass ═══════════ */
@media(max-width:860px){
  /* scroll-driven sections were reserving 2+ screens of black for a line of type */
  .fixes-wrap{height:150vh}
  .cyl-wrap{height:140vh}
  .fx-line{font-size:clamp(1.4rem,7.2vw,2.1rem)}
  .cta h2{font-size:clamp(1.9rem,9.4vw,3.2rem)}
  .quote-moment p{font-size:clamp(1.3rem,6.6vw,2.1rem)}
  .statement p{font-size:clamp(1.3rem,6.4vw,2rem)}

  /* the booking bar must not sit on top of the last line of the page */
  body.has-bookbar{padding-bottom:74px}
  body.has-bookbar footer.reveal{bottom:74px}
}

/* four photographs in one column was 1,700px of scrolling */
@media(max-width:520px){.gal{columns:2;column-gap:.7rem}.gal figure{margin-bottom:.7rem}}

/* the vertical clips sit side by side on a phone rather than stacking */
@media(max-width:760px){
  .vid-pair{grid-template-columns:1fr 1fr;gap:.7rem;margin:0 7vw}
  .vid .v-cap{left:.6rem;bottom:.6rem;font-size:8px;letter-spacing:.12em}
}

/* email capture: input and button the same size, sensibly spaced */
.lf-row input,.lf-row .btn{height:54px;min-height:54px;font-size:.95rem}
.lf-row .btn{padding:0 1.8rem}
@media(max-width:860px){
  .lf-row{gap:.55rem}
  .lf-row input,.lf-row .btn{height:52px;min-height:52px}
  .lead{padding:1.7rem 1.3rem}
  .lf-note{margin-top:.8rem;line-height:1.8}
}

/* a WhatsApp button with no number behind it is worse than no button */
/* the WhatsApp option is always visible. When no number is configured it stops
   being a wa.me link and drops the person into the form instead of a dead chat. */
.no-wa a[data-wa].pending::after{content:' (form)';opacity:.55;font-size:.85em}
.no-wa .bookbar .b-alt.pending{opacity:.9}

/* every real link is a 44px target on touch */
@media(hover:none),(pointer:coarse){
  .contact a,.hd-credit,.f-meta a{min-height:44px;display:inline-flex;align-items:center}
  .bookbar a{padding-top:1rem;padding-bottom:1rem}
}


/* burger and close: drawn, not typed. A glyph's ink sits wherever the font puts
   it inside its em box, which is why the bars looked off-centre in the circle. */
.burger,.m-close{display:none;place-items:center;padding:0;line-height:0;
  -webkit-tap-highlight-color:transparent}
@media(max-width:860px){.burger{display:grid}}
.m-close{display:grid}
.burger{width:44px;height:44px}
.burger svg,.m-close svg{display:block}
.burger:hover,.m-close:hover{border-color:var(--accent);color:var(--accent)}
@media(hover:none),(pointer:coarse){.hd .logo{min-height:44px;display:inline-flex;align-items:center}}

/* ═══════════ V6.5 — phone spacing and button fit ═══════════ */
@media(max-width:860px){
  /* 13vh top and bottom is 220px of empty space between every pair of sections
     on a phone. Halved, with a fixed floor so it does not collapse on short screens */
  section{padding:clamp(2.6rem,7vh,4.4rem) 7vw}
  .hero{padding-top:clamp(6.5rem,17vh,9rem)!important;min-height:auto!important}
  .cta{padding-top:clamp(3rem,8vh,5rem);padding-bottom:clamp(3rem,8vh,5rem)}
  .lead-sec,.group-sec,.corp-sec,.prog-sec{padding-top:clamp(2.4rem,6vh,3.8rem);
    padding-bottom:clamp(2.4rem,6vh,3.8rem)}
  .quote-moment{padding-top:clamp(3rem,8vh,5rem);padding-bottom:clamp(3rem,8vh,5rem);min-height:auto}

  /* "Tell me when it lands" was breaking onto a second line and making a 67px button */
  .pr .btn,.tier>.btn{padding:0 1.1rem;font-size:.74rem;letter-spacing:.06em;
    height:50px;white-space:nowrap}
  .pr .btn span,.tier>.btn span{white-space:nowrap}
}

/* ═══════════ V6.6 — form controls sized for actual typing ═══════════ */

/* 16px is the threshold below which iOS Safari zooms the whole page when a field
   is focused. Everything here was 15.2px, so every tap zoomed the site. */
.book-form input,.book-form select,.book-form textarea,
.lead-form input,input,select,textarea{font-size:16px}

.book-form input,.book-form select{height:58px;padding:0 1.15rem;
  background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:12px}
.book-form select{padding-right:2.6rem}
.book-form textarea{min-height:140px;padding:1.05rem 1.15rem;line-height:1.55;
  background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:12px;resize:vertical}
.book-form label{margin-bottom:1.15rem}
.book-form input::placeholder,.book-form textarea::placeholder,
.lead-form input::placeholder{color:var(--muted);opacity:.85}
.book-form input:focus,.book-form select:focus,.book-form textarea:focus,
.lead-form input:focus{background:color-mix(in srgb,var(--ink) 8%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}

/* the guide field was an outline next to a solid button, so it read as the smaller
   of the two even at a matching height */
.lf-row input{height:58px;background:color-mix(in srgb,var(--ink) 5%,transparent);
  border-radius:100px;padding:0 1.5rem}
.lf-row .btn{height:58px}

@media(max-width:860px){
  .book-form input,.book-form select,.lf-row input,.lf-row .btn{height:56px}
  .book-form textarea{min-height:132px}
  .bf-row{gap:1rem}
}
/* the field carries flex:1 for the side-by-side desktop row; once the row stacks,
   that flex-grow in the block axis overrides the height and it shrinks to content */
@media(max-width:860px){.lf-row input{flex:0 0 auto;width:100%}}

/* ═══════════ V6.9 — six confirmed packages ═══════════ */

/* Six cards instead of three: 3-up on desktop, 2-up on tablet, stacked on phone.
   The two-column step matters — six cards straight from 3-up to a single column
   left a very long scroll on iPad-width screens. */
.tiers.six{grid-template-columns:repeat(3,1fr);row-gap:1.6rem}
.tiers.six .tier h3{font-size:clamp(1.35rem,2.2vw,1.75rem)}
@media(max-width:1180px){.tiers.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.tiers.six{grid-template-columns:1fr;row-gap:1rem}}

/* Cards 01, 04, 05 and 06 carry shorter inclusion lists than 02 and 03. Pushing
   the "for:" line and the button apart keeps the buttons on a common floor
   within each row rather than floating up under the short lists. */
.tiers.six .tier .t-for{margin-top:1.5rem}
.tiers.six .tier>.btn,.tiers.six .tier>a.btn{margin-top:auto}

/* The flag on the featured card sits above the card edge; on the two-up and
   stacked layouts it needs the row gap to clear the card above it. */
@media(max-width:1180px){.tiers.six{padding-top:.75rem}}

/* Intro lines run to different lengths, which left the price rule sitting at a
   different height in each card across a row. Reserving three lines lands every
   price on the same baseline; the cards stay bottom-aligned via margin-top:auto. */
@media(min-width:761px){.tiers.six .t-line{min-height:4.95em}}

/* "GLP-1 support" and "Anywhere" set on one line while the rest set on two, so
   the price rule under them sat 28px high. Reserve two lines for the heading. */
@media(min-width:761px){.tiers.six .tier h3{min-height:2em}}

/* ═══════════ V7.0 — credentials, honours, second FAQ group ═══════════ */

/* Two ledgers side by side: what CJ studied, and what she won. The year column
   is fixed so every entry hangs off the same left edge and the list reads as a
   record rather than as prose. */
.creds{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4.5rem);margin-top:3rem}
.cred-col h3{font-family:'Archivo',sans-serif;font-stretch:112%;font-weight:800;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.02em;color:var(--accent);padding-bottom:1rem;
  border-bottom:1px solid var(--line)}
.cred-list{list-style:none;margin-top:.4rem}
.cred-list li{display:grid;grid-template-columns:5.6rem 1fr;gap:1rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line)}
.cred-list li:last-child{border-bottom:none}
.cr-yr{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.cr-it{font-size:.92rem;line-height:1.6;color:var(--soft)}
@media(max-width:860px){
  .creds{grid-template-columns:1fr;gap:2.6rem}
  .cred-list li{grid-template-columns:4.6rem 1fr;gap:.9rem;padding:.85rem 0}
  .cr-it{font-size:.88rem}}

/* The GLP-1 questions are a second, separate accordion. Tinting the panel keeps
   them visibly distinct from the training questions above without a hard rule. */
.faq-glp{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ═══════════ V7.1 — nutrition pair, landscape split media ═══════════ */

/* Two square plates side by side. Square keeps them level regardless of what
   the next photograph turns out to be — phone food shots arrive in every ratio. */
.fuel{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:3rem}
.fuel figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.fuel img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.fuel figcaption{padding:1.1rem 1.3rem 1.3rem;font-size:.86rem;line-height:1.6;color:var(--soft)}
@media(max-width:760px){.fuel{grid-template-columns:1fr;gap:1rem}}

/* .media is locked to 4/5 for portraits; the corporate group shot is landscape
   and would lose half the room to a centre crop at that ratio. */
.media.wide{aspect-ratio:4/3}
@media(max-width:760px){.media.wide{aspect-ratio:4/3}}

/* the corporate split leads with copy, so the image column sits second */
.corp-split{grid-template-columns:1.1fr .9fr}
@media(max-width:900px){.corp-split{grid-template-columns:1fr}}

/* ═══════════ V7.4 — still-image hero ═══════════ */

/* The hero is a photograph rather than a video cut. .hv-media keeps its scroll
   recede; the image just has to fill it. object-position holds the athlete and
   the bar in frame as the viewport gets wider — a plain centre crop pushed her
   head out of the top on short landscape windows. */
.hv-media picture{position:absolute;inset:0;display:block}
.hv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 28%}
@media(max-width:860px){.hv-img{object-position:52% 20%}}

/* Very short landscape windows crop hardest, so bias further up the frame. */
@media(min-width:861px) and (max-height:640px){.hv-img{object-position:58% 18%}}

/* The deadlift frame is high-key — big bright windows behind the athlete — where
   the video cut it replaced was dark. On phones the shade is a top-to-bottom
   wash with no side scrim to help, so the kick line and the sub sat on near-white
   glass. Deepen it on small screens; desktop already has a left scrim. */
@media(max-width:860px){
  .hero-video .hv-shade{
    background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.68) 28%,
               rgba(0,0,0,.54) 58%,rgba(0,0,0,.74) 86%,var(--bg) 99%)}
}
/* and a touch more weight behind the headline on mid-size landscape windows */
@media(min-width:861px) and (max-width:1100px){
  .hero-video .hv-shade{
    background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.28) 100%),
               linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 30%,transparent 55%,var(--bg) 100%)}
}

/* ═══════════════════════════════════════════════════════════════════
   V7.5 — TYPE SCALE
   The root problem: `h1,h2` (line 113) sets family, weight and stretch
   but never a font-size. Thirteen section headings across the site are
   plain <h2 data-anim="chars"> with no class, so they fell through to
   the UA default of 1.5em = 24px — the same 24px on a 390px phone and a
   1440px desktop, no scaling at all. Meanwhile .rev-body h3 rendered at
   58px and .f-lead h3 at 38px, so H3s were more than twice the size of
   H2s and the hierarchy read upside down.

   Everything below is one scale, declared once. Each step is fluid, so
   there is no separate mobile block to drift out of sync.
       token          390px      1440px
       --fs-display     42   →     112     one per page (the CTA)
       --fs-hero        38   →      76     page H1
       --fs-h2          31   →      60     major section heading
       --fs-h2-sub      24   →      40     heading inside a component
       --fs-h3-lg       26   →      46     feature H3 (review names)
       --fs-h3          19   →      27     card H3
       --fs-h3-sm       15   →      17     label H3, small caps
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --fs-display:clamp(2.6rem,8vw,7rem);
  --fs-hero:clamp(2.35rem,5.3vw,4.75rem);
  --fs-h2:clamp(1.95rem,4.2vw,3.75rem);
  --fs-h2-sub:clamp(1.5rem,2.8vw,2.5rem);
  --fs-h3-lg:clamp(1.6rem,3.2vw,2.9rem);
  --fs-h3:clamp(1.2rem,1.9vw,1.6rem);
  --fs-h3-sm:clamp(.94rem,1.1vw,1.06rem);
}

/* the fix for the 24px headings — a real default for every bare h2 */
h2{font-size:var(--fs-h2)}
h1{font-size:var(--fs-hero)}

/* page H1 — index, about, coaching, results and 404 were 69/77/96px.
   One token now, so all five open at the same size. */
.hero h1,.hero-video h1{font-size:var(--fs-hero);line-height:.96}

/* major section headings */
.split h2,.chap-full h2,.pf-body h2{font-size:var(--fs-h2);line-height:.98}

/* headings that live inside a component, so they sit a step down */
.hs-head h2,.wave-head h2,.voices h2,.lead h2{font-size:var(--fs-h2-sub);line-height:1.02}
/* results: the review names below run at --fs-h3-lg, so this has to sit above them */
.rev-head h2{font-size:var(--fs-h2);line-height:1}
/* short laptop screens: the strip heading must not crowd the panels */
@media(min-width:861px) and (max-height:760px){.hs-head h2{font-size:clamp(1.4rem,2.6vw,2rem)}}

/* the single display moment per page */
.cta h2{font-size:var(--fs-display);line-height:.92}

/* H3s — the inverted ones brought back under the H2 above them */
.rev-body h3{font-size:var(--fs-h3-lg);line-height:.98}
footer .f-lead h3{font-size:var(--fs-h3);line-height:1.08}
.tier h3,.tiers.six .tier h3,.pk h3{font-size:var(--fs-h3);line-height:1.06}
.hs-panel .hs-body h3,.tl-card h3,.cred-col h3,.card h3{
  font-size:var(--fs-h3-sm);line-height:1.25;letter-spacing:.055em}

/* Anchor targets sit under the fixed header, so an eased jump to #book used to
   land with the heading tucked behind it. */
:target,#book,#main,section[id]{scroll-margin-top:clamp(74px,11vh,120px)}

/* ═══════════════════════════════════════════════════════════════════
   V7.6 — typescale corrections

   The scale above was right; three things were sitting outside it.

   1. The "fixes" section rolled its own clamps: the cycling word landed at
      86.4px desktop / 28.1px mobile and the mantra at 112 / 42.9. On mobile the
      mantra was the largest type on the whole site — bigger than the page H1 and
      bigger than the CTA. Both now use tokens, so they move with everything else.
      The mantra IS a display moment, so it takes --fs-display outright; the
      cycling word takes a new --fs-xl step between display and H2.

   2. font-stretch was inconsistent at identical sizes. Archivo is a variable
      font and the site's convention is 125% for display and section headings,
      118% for component headings. Three had drifted: the reviews heading and the
      credentials column were at 112%, and the footer lead was at 125% while the
      package card H3 beside it — same size — was at 118%.
   ═══════════════════════════════════════════════════════════════════ */

:root{ --fs-xl:clamp(2.05rem,6.1vw,5.4rem); }   /* 33 → 86 */

/* the fixes section, back on the scale */
.fx-line{font-size:var(--fs-xl)}
.fx-mantra{font-size:var(--fs-display)}

/* one width per level */
.rev-head h2{font-stretch:125%}
.cred-col h3,footer .f-lead h3,.pk h3{font-stretch:118%}

/* A still in the band slot. The band is 16:9 for video, but this frame is a
   tall composition — a coach standing over someone in a plank — and a 16:9
   centre crop cut the client's forearms off, so this variant runs 3:2. */
.vid.shot{aspect-ratio:3/2}
.vid img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.vid.shot{aspect-ratio:4/3}}

/* ═══════════════════════════════════════════════════════════════════
   V7.7 — MOBILE LEGIBILITY FLOOR
   An audit at 320/360/390/430px found no overflow, no iOS zoom traps and
   correct 44px tap targets, but a lot of type sitting at 8–10px. Uppercase
   monospace at 8px is decoration, not text — and some of it was real
   content: the price unit on every package card, the transformation
   figures on Results, CJ's credentials, and the hero's free-consult line.

   Floor is 11px for anything a person needs to READ and 10px for pure
   chrome (counters, scroll hints). Applied only below 760px; desktop
   sizing is unchanged.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* content — must be readable */
  .hero-note{font-size:11px;line-height:1.55}
  .tier .t-price small{font-size:11px}          /* "per session" — a price term */
  .rv-meta,.rev-item cite,.rv-cap{font-size:11px}
  .cred-strip b,.cr-yr{font-size:11px}
  .lf-note,.bf-note{font-size:11px}
  .q-attr{font-size:11px}
  .vid .v-cap{font-size:10px;letter-spacing:.1em}
  .t-flag{font-size:10px}
  .pager .pg-sub,.pager a small{font-size:11px}

  /* chrome — smaller is fine, but not 9px */
  .hs-hint,.rv-drag,.rv-tag,.gal figcaption{font-size:10px}
}

/* Landscape phones: the pinned strip panel came out 405px tall in a 390px
   viewport, so it was clipped 8px top and bottom. Cap it against the space
   actually left under the heading. */
@media(max-height:520px) and (orientation:landscape){
  .hs-panel,.hs-panel.ba,.hscroll-sticky.flat .hs-panel{
    height:min(56vh,calc(100vh - 150px));max-height:calc(100vh - 150px)}
}

/* Second pass: these carried more specific rules than the block above, so the
   floor did not reach them. .pg-prev a is the previous-page link on every page
   and hs-body small is the strip caption — both are navigation and content. */
@media(max-width:760px){
  .pg-prev a,.pg-next a{font-size:11px}
  .hs-panel .hs-body small{font-size:11px}
  .rev-item .rv-meta,.rev-body .rv-meta{font-size:11px}
  .rev-item .rv-cap,.rev-item figcaption{font-size:11px}
}
@media(max-width:760px){.v-card cite span{font-size:11px}}