/* ═══════════════════════════════════════════════
   ULTIMATE PERSONAL TRAINING
   Design system modelled on coachsportifecublens.com
   ═══════════════════════════════════════════════ */

:root{
  --bg:        #000000;
  --bg-soft:   #0a0a0a;
  --bg-card:   #111111;
  --ink:       #ffffff;
  --ink-mute:  #a3a3a3;
  --ink-dim:   #6b6b6b;
  --line:      rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.08);
  --accent:    #c8ff3d;
  --maxw:      1480px;
  --gutter:    24px;
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-io:   cubic-bezier(.65,.05,.36,1);
  --font:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  /* Reveal transforms sit outside the layout box; clip so they never
     create a transient horizontal scrollbar. */
  overflow-x:clip;
}

/* Anchor targets clear the fixed header when jumped to natively. */
section[id]{scroll-margin-top:84px}

/* Native scrolling path. When Lenis is driving the scroll we must not also
   ask the browser to smooth, or the two animations fight each other. The
   no-smooth class is set by the script only when Lenis is disabled. */
html{scroll-behavior:auto}
html.no-smooth{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.is-locked{overflow:hidden}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

::selection{background:var(--accent);color:#000}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#2a2a2a}
::-webkit-scrollbar-thumb:hover{background:#3a3a3a}


/* ═══════════ TYPOGRAPHY ═══════════ */

.display{
  font-size:clamp(2.75rem,7.2vw,7rem);
  line-height:.92;
  letter-spacing:-.045em;
  font-weight:600;
}
.display em{font-style:normal;font-weight:500;color:var(--ink-mute)}

/* The 12 week challenge band is the one place the accent phrase should
   actually read as the accent; .display otherwise mutes every <em>. */
.cta__content .display em{color:var(--accent)}

.h2{
  font-size:clamp(1.5rem,2.9vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:500;
}

.h3{
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:600;
}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-weight:500;
}

.lede{font-size:1.05rem;line-height:1.55;color:var(--ink-mute);letter-spacing:-.015em}

p{color:var(--ink-mute);line-height:1.6}
.h3 + p, .lede{margin-top:1rem}


/* ═══════════ BUTTONS ═══════════ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.btn--pill{
  border:1px solid var(--ink);
  border-radius:999px;
  padding:.75rem 1.4rem;
}
.btn--pill:hover{background:var(--ink);color:#000}

.btn--sm{padding:.6rem 1.1rem;font-size:.7rem}

.btn--block{display:flex;width:100%}

.btn--light{background:var(--ink);color:#000;border-color:var(--ink)}
.btn--light:hover{background:transparent;color:var(--ink)}

/* Solid white fill with black text, for calls to action that need to
   read as the primary option on the dark canvas. */
.btn--white{background:#fff;color:#000;border-color:#fff}
.btn--white:hover{background:var(--accent);color:#000;border-color:var(--accent)}

.btn--invert{background:var(--ink);color:#000;border-color:var(--ink)}
.btn--invert:hover{background:transparent;color:var(--ink)}


/* ═══════════ PRELOADER ═══════════ */

.preloader{
  position:fixed;
  inset:0;
  z-index:1000;
  background:#000;
  display:grid;
  place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}

.preloader__inner{width:min(360px,70vw);text-align:center}

.preloader__logo{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  margin-bottom:2rem;
}
.preloader__logo span{
  display:block;
  font-size:.6rem;
  letter-spacing:.3em;
  color:var(--ink-dim);
  font-weight:500;
  margin-top:.4rem;
}

.preloader__bar{
  height:1px;
  background:var(--line);
  overflow:hidden;
}
.preloader__bar span{
  display:block;
  height:100%;
  width:0%;
  background:var(--ink);
  transition:width .25s linear;
}

.preloader__pct{
  margin-top:.8rem;
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--ink-dim);
}


/* ═══════════ CUSTOM CURSOR ═══════════ */

.cursor{
  position:fixed;
  top:0;left:0;
  width:14px;height:14px;
  border:1px solid var(--ink);
  border-radius:999px;
  pointer-events:none;
  z-index:900;
  will-change:transform;
  transform:translate3d(-50%,-50%,0);
  transition:background .3s var(--ease), opacity .3s, border-color .3s;
  opacity:0;
  display:grid;
  place-items:center;
}
.cursor.is-on{opacity:1}
/* Inverted shader. `difference` against the backdrop means the bubble
   and its label flip to whatever reads on whatever is underneath, so the
   same white label stays legible over the black canvas, the white
   featured pricing plan, and a light photograph alike.

   Applied only while hovering, not to the idle dot: a blend mode forces
   the region beneath it to re-composite, and paying that on every pointer
   move is exactly what made the cursor feel heavy before. Idle state
   keeps a plain transform. */
.cursor.is-hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.4);
  mix-blend-mode:difference;
}
/* Hover growth is a scale on an inner wrapper, so the outer element's
   transform stays free for the position the rAF loop writes each frame
   and the two never fight. Scaling also avoids the layout pass that
   animating width/height caused on every hover. */
.cursor__inner{
  display:grid;
  place-items:center;
  width:100%;height:100%;
  border-radius:999px;
  transform:scale(1);
  transition:transform .3s var(--ease);
}
.cursor.is-hover .cursor__inner{transform:scale(4.57)}
.cursor__label{
  font-size:.55rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  /* Pure white so the difference blend inverts it against any backdrop
     rather than washing out to grey over mid-tones. */
  color:#fff;
  opacity:0;
  transition:opacity .25s;
  white-space:nowrap;
}
.cursor.is-hover .cursor__label{opacity:1}

@media (hover:none),(pointer:coarse){
  .cursor{display:none}
}


/* ═══════════ SIDE RAIL ═══════════ */

.rail{
  position:fixed;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:80;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-left:none;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
}
.rail__item{
  writing-mode:vertical-rl;
  padding:.9rem .45rem;
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:1px solid var(--line-soft);
  transition:color .3s, background .3s;
}
.rail__item:last-child{border-bottom:none}
.rail__item:hover{color:#000;background:var(--ink)}

@media (max-width:1100px){.rail{display:none}}

/* The rail is a fixed 30px column pinned to the left edge, but the
   gutter is only 24px, so section content can sit underneath it. Widen
   the gutter wherever the rail is actually visible to clear it plus
   some breathing room. */
@media (min-width:1101px){
  :root{ --gutter: 72px; }
}


/* ═══════════ SCROLL PROGRESS ═══════════ */

/* Fixed hairline that scales with scroll depth. transform only, so it
   never triggers layout or paint of anything else. */
.progress{
  position:fixed;
  top:0;left:0;
  width:100%;
  height:3px;
  z-index:120;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:0 50%;
  will-change:transform;
  pointer-events:none;
}


/* ═══════════ HEADER ═══════════ */

.header{
  position:fixed;
  top:0;left:0;
  width:100%;
  z-index:100;
  display:flex;
  align-items:center;
  gap:2rem;
  padding:1.1rem var(--gutter);
  max-width:var(--maxw);
  margin:0 auto;
  transition:transform .5s var(--ease), background .4s, backdrop-filter .4s;
}
.header.is-hidden{transform:translateY(-100%)}
.header.is-stuck{background:rgba(0,0,0,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}

.header__brand{display:flex;align-items:center;gap:.6rem;flex:none}
.header__mark{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  background:var(--ink);
  color:#000;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.header__name{font-size:.78rem;font-weight:600;letter-spacing:-.01em}

.header__nav{display:flex;gap:1.6rem;margin-left:auto}
.header__nav a{
  font-size:.78rem;
  color:var(--ink-mute);
  position:relative;
  padding:.2rem 0;
  transition:color .3s;
}
.header__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ink);transition:width .4s var(--ease);
}
.header__nav a:hover{color:var(--ink)}
.header__nav a:hover::after{width:100%}

.header__contact{display:flex;flex-direction:column;gap:.1rem;font-size:.68rem;color:var(--ink-dim);text-align:right}
.header__contact a:hover{color:var(--ink)}
.header__contact span{font-size:.64rem}

.header .btn--pill{padding:.55rem 1.1rem;font-size:.7rem}

/* Keeps Login and Enquire now adjacent and aligned as a pair. */
.header__actions{display:flex;align-items:center;gap:.6rem}

.header__burger{display:none;width:32px;height:32px;position:relative}
.header__burger i{
  position:absolute;left:6px;right:6px;height:1.5px;background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s;
}
.header__burger i:nth-child(1){top:12px}
.header__burger i:nth-child(2){bottom:12px}
.header__burger.is-open i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.header__burger.is-open i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

@media (max-width:1100px){
  .header__contact{display:none}
  .header__burger{display:block;margin-left:auto}
  .header__nav{
    position:fixed;inset:0;
    background:#000;
    flex-direction:column;
    align-items:center;justify-content:center;
    gap:2rem;
    margin:0;
    transform:translateY(-100%);
    transition:transform .7s var(--ease);
    z-index:-1;
  }
  .header__nav.is-open{transform:translateY(0)}
  .header__nav a{font-size:1.8rem;font-weight:500}
}
@media (max-width:640px){
  .header__name{display:none}
  /* The header buttons used to be hidden outright here, which also
     swallowed the new Login button. Keep them visible but compact, so
     there is still a real call to action on small screens. */
  .header__actions{gap:.4rem}
  .header .btn--pill{padding:.45rem .85rem;font-size:.64rem}
}


/* ═══════════ HERO ═══════════ */

.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px var(--gutter) 60px}
.hero__grid{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:60px;
  align-items:center;
}

.hero__title{
  font-size:clamp(2.6rem,6.4vw,6.2rem);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:600;
}
.hero__title span{display:block;overflow:hidden}
.hero__title span > i{
  display:block;
  font-style:normal;
  transform:translateY(100%);
}
.is-loaded .hero__title span > i{transform:translateY(0);transition:transform 1s var(--ease)}
.is-loaded .hero__title span:nth-child(2) > i{transition-delay:.08s}
.is-loaded .hero__title span:nth-child(3) > i{transition-delay:.16s}

.hero__marquee{
  margin-top:2.5rem;
  max-width:100%;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.7rem 0;
}
.hero__marquee-track{display:flex;width:max-content;animation:slideL 28s linear infinite}
.hero__marquee-track span{
  display:flex;align-items:center;gap:1.4rem;
  padding-right:1.4rem;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-mute);
  white-space:nowrap;
}
.hero__marquee-track i{color:var(--accent);font-style:normal}

.hero__right{display:flex;justify-content:flex-end}

.hero__portrait{
  position:relative;
  width:min(420px,100%);
  overflow:hidden;
  background:var(--bg-card);
}
.hero__portrait img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transform:scale(1.06);
}
.is-loaded .hero__portrait img{
  animation:portraitIn 1.6s var(--ease) forwards;
}
@keyframes portraitIn{
  from{clip-path:inset(100% 0 0 0)}
  to{clip-path:inset(0 0 0 0)}
}

.hero__portrait-frame{
  position:absolute;inset:0;
  border:1px solid var(--line);
  pointer-events:none;
}

.hero__portrait-tag{
  position:absolute;left:0;bottom:0;
  background:var(--ink);color:#000;
  padding:.85rem 1.1rem;
  max-width:80%;
}
.hero__portrait-tag strong{display:block;font-size:.68rem;letter-spacing:.14em;font-weight:700}
.hero__portrait-tag span{display:block;font-size:.6rem;letter-spacing:.04em;opacity:.65;margin-top:.2rem}

.hero__scroll{
  position:absolute;
  left:var(--gutter);bottom:32px;
  display:flex;align-items:center;gap:.7rem;
  font-size:.6rem;letter-spacing:.2em;color:var(--ink-dim);
}
.hero__scroll span{
  display:block;width:1px;height:44px;background:var(--ink-dim);
  position:relative;overflow:hidden;
}
.hero__scroll span::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  animation:scrollDot 2s var(--ease-io) infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

@media (max-width:900px){
  /* minmax(0,1fr) rather than 1fr: a bare 1fr track is floored at the
     content's min-content width, and the marquee's long unbroken text
     line pushed this column to 1634px inside a 390px viewport. */
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero__right{justify-content:flex-start}
  .hero__portrait{width:min(320px,80%)}
  .hero__scroll{display:none}
}


/* ═══════════ KEYFRAMES ═══════════ */

/* The velocity nudge is applied to the *wrapper* via --mq-shift while
   the keyframes animate the track inside it. Keyframes that read a
   custom property force a style recalculation for the element on every
   single frame; keeping the property on a separate element means the
   animation itself stays a pure compositor transform. */
.hero__marquee,
.band,
.footer__marquee{transform:translate3d(var(--mq-shift,0px),0,0)}

@keyframes slideL{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--span-w,50%) * -1),0,0)}
}
/* Mirrored loop for the rightward variant. --span-w is the measured
   width of one copy, so the travel distance is exact rather than a
   percentage of a track that may not divide evenly. */
@keyframes slideR{
  from{transform:translate3d(calc(var(--span-w,50%) * -1),0,0)}
  to{transform:translate3d(0,0,0)}
}

/* A rightward loop travels from -50% back to 0, so it needs at least one
   full copy of slack sitting to the right of the visible area. 100vw is
   used rather than 50% of the track, because at wide viewports the track
   is only just wider than its box and half of it does not cover the
   distance travelled -- which showed up as a gap at the right edge. */
.marquee--rev{padding-right:100vw}


/* ═══════════ MARQUEE BAND ═══════════ */

.band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.6rem 0;
  overflow:hidden;
}
.band__track{display:flex;width:max-content;animation:slideR 44s linear infinite}
.band__track span{
  display:flex;align-items:center;gap:2rem;
  padding-right:2rem;
  font-size:clamp(1.6rem,4vw,3.4rem);
  font-weight:600;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.band__track i{color:var(--accent);font-style:normal;font-size:.5em;vertical-align:middle}


/* ═══════════ INTRO ═══════════ */

.intro{padding:clamp(90px,12vw,180px) var(--gutter)}
.intro__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:center;
}
.intro__img-wrap{position:relative;overflow:hidden}
.intro__img-wrap img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:grayscale(1);
}
.intro__badge{
  position:absolute;right:0;bottom:0;
  background:var(--accent);color:#000;
  padding:1rem 1.2rem;
  display:flex;flex-direction:column;align-items:center;
  font-size:.55rem;letter-spacing:.2em;font-weight:600;
}
.intro__badge strong{font-size:2rem;line-height:1;letter-spacing:-.04em;margin-bottom:.2rem}

.intro__body .h2{margin-bottom:1.5rem}
.intro__body .btn{margin-top:2rem}

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

/* ═══════════ INFO CARDS ═══════════ */

.info{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter) clamp(90px,12vw,180px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.info__card{background:var(--bg);padding:clamp(1.5rem,2.5vw,2.5rem);display:flex;flex-direction:column;gap:1.5rem}
.info__card--accent{background:var(--bg-soft)}
.info__card .h3{color:var(--ink)}
.info__card .btn{align-self:flex-start;margin-top:auto}
.info__note{font-size:.88rem}

.hours{display:flex;flex-direction:column;gap:.55rem}
.hours li{
  display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line-soft);
  font-size:.88rem;
  color:var(--ink-mute);
}
.hours li:last-child{border-bottom:none}
.hours li span:last-child{color:var(--ink);text-align:right}
.hours .is-closed span:last-child{color:var(--ink-dim)}

.contact-list{display:flex;flex-direction:column;gap:1rem}
.contact-list a{color:var(--ink-mute);transition:color .3s;line-height:1.5}
.contact-list a:hover{color:var(--ink)}
.contact-list--lg a{font-size:1.05rem}

.offer-list{display:flex;flex-direction:column;gap:1.5rem}
.offer-list li{display:flex;flex-direction:column;gap:.35rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
.offer-list strong{font-size:.95rem;font-weight:600}
.offer-list span{font-size:.82rem;color:var(--ink-dim);line-height:1.5}
.offer-list a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:.2rem}
.offer-list a:hover{text-decoration:underline}

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


/* ═══════════ ABOUT ═══════════ */

.about{padding:clamp(90px,12vw,180px) var(--gutter);background:var(--bg-soft)}
.about__head{max-width:var(--maxw);margin:0 auto clamp(50px,7vw,90px)}
.about__head .eyebrow{margin-bottom:1.2rem}
.about__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,6vw,90px);align-items:start;
}
.about__media{position:sticky;top:120px}
.about__media img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1)}
.about__sticker{
  position:absolute;left:-20px;top:30px;
  background:var(--accent);color:#000;
  width:96px;height:96px;
  display:grid;place-content:center;
  font-size:2rem;font-weight:700;letter-spacing:-.05em;line-height:.9;
  text-align:center;
}
.about__sticker span{font-size:.5rem;letter-spacing:.2em;font-weight:600}

.about__body{display:flex;flex-direction:column;gap:clamp(40px,5vw,70px)}
.about__block{position:relative;padding-left:clamp(2.5rem,4vw,4rem)}
.about__num{
  position:absolute;left:0;top:.2rem;
  font-size:.7rem;letter-spacing:.16em;color:var(--ink-dim);font-weight:600;
}
.about__block .h3{margin-bottom:1.1rem}
.about__block p + p{margin-top:1rem}

.certs__lead{
  font-size:.92rem;
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
  padding-left:.9rem;
  border-left:2px solid var(--accent);
  margin-top:1rem;
}
.certs{display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem}
.certs li{
  position:relative;padding-left:1.4rem;
  font-size:.9rem;color:var(--ink-mute);line-height:1.5;
}
.certs li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--accent);
}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr}
  .about__media{position:relative;top:0;max-width:340px}
}


/* ═══════════ STATS ═══════════ */

.stats{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(70px,9vw,130px) var(--gutter);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(30px,4vw,60px);
}
.stats__item{display:flex;flex-direction:column;gap:.6rem}
.stats__num{
  font-size:clamp(3.5rem,8vw,7rem);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.stats__label{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);line-height:1.6;
}

@media (max-width:760px){.stats{grid-template-columns:1fr;gap:2.5rem}}


/* ═══════════ SERVICES ═══════════ */

.services{padding:clamp(90px,12vw,180px) var(--gutter)}
.services__head{max-width:var(--maxw);margin:0 auto clamp(50px,7vw,90px)}
.services__head .eyebrow{margin-bottom:1.2rem}

.services__list{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
}
.service{
  display:grid;
  grid-template-columns:80px 220px 1fr;
  gap:clamp(20px,3vw,50px);
  align-items:center;
  padding:clamp(24px,3vw,44px) 0;
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);
}
.service:hover{background:var(--bg-soft)}
.service__num{font-size:.7rem;letter-spacing:.16em;color:var(--ink-dim);font-weight:600}
.service__media{overflow:hidden}
.service__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);
  transition:transform .9s var(--ease), filter .6s;
}
.service:hover .service__media img{transform:scale(1.06);filter:grayscale(0)}
.service__body .h3{margin-bottom:.8rem}
.service__body p{max-width:62ch}

@media (max-width:900px){
  .service{grid-template-columns:60px 120px 1fr;gap:20px}
}
@media (max-width:640px){
  .service{grid-template-columns:1fr;gap:14px}
  .service__num{order:0}
  .service__media{max-width:160px}
}


/* ═══════════ SUPPLEMENTS ═══════════ */

.supp{padding:clamp(90px,12vw,180px) var(--gutter);background:var(--bg-soft)}
.supp__head{max-width:var(--maxw);margin:0 auto clamp(40px,5vw,70px)}
.supp__head .eyebrow{margin-bottom:1.2rem}

.supp__layout{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:260px 1fr;gap:clamp(30px,4vw,60px);
  align-items:start;
}

.supp__tabs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.supp__tab{
  text-align:left;
  padding:1rem .2rem;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
  color:var(--ink-dim);
  position:relative;
  transition:color .35s, padding-left .35s var(--ease);
}
.supp__tab::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:0;height:1px;background:var(--accent);
  transition:width .35s var(--ease);
}
.supp__tab:hover{color:var(--ink-mute);padding-left:14px}
.supp__tab.is-active{color:var(--ink);padding-left:14px;font-weight:600}
.supp__tab.is-active::before{width:8px}

.supp__panel{display:flex;flex-direction:column;gap:2rem}
.supp__media{overflow:hidden}
.supp__media img{width:100%;aspect-ratio:16/6;object-fit:cover;filter:grayscale(.6)}

.supp__content{position:relative;min-height:250px}
.supp__slide{
  position:absolute;inset:0;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.supp__slide.is-active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative}
.supp__slide .h3{margin-bottom:1rem}
.supp__slide p{max-width:60ch}
.supp__flavours{color:var(--ink);font-size:.85rem;letter-spacing:.02em;margin-bottom:.6rem}

.price-list{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.price-list li{
  border:1px solid var(--line);
  padding:.55rem 1rem;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink);
  border-radius:999px;
}

@media (max-width:900px){
  .supp__layout{grid-template-columns:1fr}
  .supp__tabs{flex-direction:row;flex-wrap:wrap;gap:0 1.5rem;border-top:none}
  .supp__tab{border-bottom:none;padding:.4rem 0}
  .supp__tab:hover,.supp__tab.is-active{padding-left:0}
  .supp__tab::before{display:none}
  .supp__tab.is-active{color:var(--accent)}
  .supp__content{min-height:300px}
}


/* ═══════════ CTA ═══════════ */

.cta{position:relative;padding:clamp(100px,14vw,200px) var(--gutter);overflow:hidden;background:#000}
.cta__bg{position:absolute;inset:-12% 0;z-index:0}
.cta__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.32)}
.cta__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.45) 100%);
}
.cta__content{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.cta__content .eyebrow{margin-bottom:1.4rem}
.cta__content .display{margin-bottom:2.4rem}


/* ═══════════ BLOG ═══════════ */

.blog{padding:clamp(90px,12vw,180px) var(--gutter)}
.blog__head{max-width:var(--maxw);margin:0 auto clamp(40px,5vw,70px)}
.blog__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--line-soft);
}
.post{
  background:var(--bg);
  padding:clamp(1rem,1.6vw,1.6rem);
  display:flex;flex-direction:column;gap:1.1rem;
  transition:background .45s var(--ease);
}
.post:hover{background:var(--bg-soft)}
.post__date{font-size:.6rem;letter-spacing:.18em;color:var(--ink-dim)}
.post__media{overflow:hidden;aspect-ratio:3/4}
.post__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .9s var(--ease),filter .6s}
.post:hover .post__media img{transform:scale(1.05);filter:grayscale(0)}
.post .h3{color:var(--ink);transition:color .3s}
.post:hover .h3{color:var(--accent)}


/* ═══════════ PRICING ═══════════ */

.pricing{padding:clamp(90px,12vw,180px) var(--gutter);background:var(--bg-soft)}
.pricing__head{max-width:var(--maxw);margin:0 auto clamp(50px,7vw,90px)}
.pricing__head .eyebrow{margin-bottom:1.2rem}

.pricing__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);
}

.plan{
  background:var(--bg);
  padding:clamp(1.6rem,2.4vw,2.4rem);
  display:flex;flex-direction:column;gap:1.4rem;
  position:relative;
  transition:background .4s;
}
.plan:hover{background:var(--bg-soft)}
.plan--feature{background:var(--ink);color:#000}
.plan--feature:hover{background:var(--ink)}
.plan--feature .plan__name,
.plan--feature .plan__price,
.plan--feature .plan__list li{color:#000}
.plan--feature .plan__price span{color:rgba(0,0,0,.5)}
.plan--feature .plan__list li{color:rgba(0,0,0,.62)}
.plan--feature .plan__list .note{color:rgba(0,0,0,.45)}
.plan--feature .plan__list{border-color:rgba(0,0,0,.14)}

.plan__tag{
  position:absolute;top:0;right:0;
  background:var(--accent);color:#000;
  padding:.4rem .8rem;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}

.plan__name{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600}
.plan__price{font-size:2.6rem;line-height:1;letter-spacing:-.05em;font-weight:600;color:var(--ink)}
.plan__price span{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;margin-top:.5rem}
.plan__price--stack{display:flex;flex-direction:column;gap:.4rem;font-size:2rem}
.plan__price--stack span{margin-top:.2rem}

.plan__list{display:flex;flex-direction:column;gap:.5rem;flex:1}
.plan__list li{
  font-size:.86rem;color:var(--ink-mute);
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line-soft);
  line-height:1.45;
}
.plan__list .note{color:var(--ink-dim);font-size:.76rem;border-bottom:none;padding-bottom:0;margin-top:.3rem}
.plan .btn{margin-top:1rem}

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


/* ═══════════ CONTACT ═══════════ */

.contact{padding:clamp(90px,12vw,180px) var(--gutter)}
.contact__head{max-width:var(--maxw);margin:0 auto clamp(50px,7vw,80px)}
.contact__head .eyebrow{margin-bottom:1.2rem}

.contact__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,6vw,90px);
  align-items:start;
}
.contact__details{display:flex;flex-direction:column;gap:2.5rem}
.contact__details .contact-list{gap:1.4rem}

.socials{display:flex;gap:.6rem}
.socials a{
  display:grid;place-items:center;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink-mute);
  transition:background .35s,color .35s,border-color .35s;
}
.socials a:hover{background:var(--ink);color:#000;border-color:var(--ink)}

.form{display:flex;flex-direction:column;gap:1rem}
.form__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
.form input,
.form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font:inherit;
  font-size:.95rem;
  padding:.85rem 0;
  transition:border-color .35s;
  resize:vertical;
}
.form textarea{min-height:120px}
.form input::placeholder,
.form textarea::placeholder{color:var(--ink-dim)}
.form input:focus,
.form textarea:focus{outline:none;border-bottom-color:var(--ink)}
.form .btn{margin-top:1rem}
.form__status{font-size:.8rem;min-height:1.2em}
.form__status.is-ok{color:var(--accent)}
.form__status.is-err{color:#ff6b6b}

@media (max-width:760px){
  .contact__grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
}


/* ═══════════ FOOTER ═══════════ */

.footer{border-top:1px solid var(--line);background:#000}
.footer__top{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(50px,6vw,80px) var(--gutter);
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:clamp(30px,4vw,60px);
}
.footer__mark{
  display:grid;place-items:center;
  width:52px;height:52px;
  background:var(--ink);color:#000;
  font-size:.9rem;font-weight:800;letter-spacing:-.02em;
  margin-bottom:1.2rem;
}
.footer__brand p{font-size:1.1rem;line-height:1.35;color:var(--ink);font-weight:500;letter-spacing:-.02em}

.footer__col{display:flex;flex-direction:column;gap:.55rem;font-size:.86rem}
.footer__col h4{
  font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;margin-bottom:.5rem;
}
.footer__col a,.footer__col span{color:var(--ink-mute);transition:color .3s;line-height:1.5}
.footer__col a:hover{color:var(--ink)}

.footer__marquee{border-top:1px solid var(--line);overflow:hidden;padding:1.1rem 0}
.footer__marquee-track{display:flex;width:max-content;animation:slideL 35s linear infinite}
.footer__marquee-track span{
  display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;
  font-size:1.5rem;font-weight:600;letter-spacing:-.035em;white-space:nowrap;
}
.footer__marquee-track i{color:var(--accent);font-style:normal;font-size:.5em;vertical-align:middle}

.footer__bottom{
  max-width:var(--maxw);margin:0 auto;
  padding:1.2rem var(--gutter);
  border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.7rem;color:var(--ink-dim);letter-spacing:.04em;
}

.footer__toggle{
  font:inherit;font-size:.7rem;letter-spacing:.04em;
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.4rem .9rem;
  transition:color .3s,border-color .3s;
}
.footer__toggle b{color:var(--ink);font-weight:600}
.footer__toggle:hover{color:var(--ink);border-color:var(--ink-mute)}

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


/* ═══════════ REVEAL ANIMATIONS ═══════════ */

/* Reveal is opt-in: only hide elements once JS has confirmed it can reveal
   them again, so a script failure never leaves the page blank. */
.js-reveal [data-reveal]{opacity:0;transition:opacity .9s var(--ease), transform 1s var(--ease)}
.js-reveal [data-reveal="up"]{transform:translateY(48px)}
.js-reveal [data-reveal="left"]{transform:translateX(-48px)}
.js-reveal [data-reveal="right"]{transform:translateX(48px)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .hero__title span > i{transform:none}
}

/* NOTE: content-visibility was tried here for cheaper offscreen rendering
   and removed. It requires a contain-intrinsic-size for every skipped
   element, and any estimate that is not exactly right makes the document
   report a height it does not have. A blanket 800px overstated the page
   by 362px; per-section measured values still drifted by 1852px, because
   section height is responsive and changes with viewport width. The
   resulting scrollbar and anchor jumps were badly wrong, which is far
   worse than the small paint saving it bought. Paint cost is instead
   kept down by the cheaper fixes: grayscale only on hover targets,
   will-change on the one hero image, and lazy images below the fold. */
.hero__portrait img{will-change:transform}

@media (max-width:900px){
  .hero__portrait img{will-change:auto}
}


/* ═══════════ TEXT FILL EFFECT ═══════════ */

.text-fill{
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 100%);
  background-size:100% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}