/* ==========================================================================
   BUILT BY TEAM BOSS — Design tokens
   ========================================================================== */
:root{
  --bg: #0a0a0b;
  --bg-alt: #121213;
  --ink: #f4f1ea;
  --ink-dim: #a9a39b;
  --ink-faint: #6e6862;
  --gold: #c9a44c;
  --gold-bright: #ecc978;
  --oxblood: #7a2331;
  --oxblood-bright: #a63347;
  --line: rgba(244,241,234,0.11);
  --line-strong: rgba(244,241,234,0.22);
  --glass: rgba(244,241,234,0.045);

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-serif: 'Fraunces', serif;

  --container: min(1440px, 90vw);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked{ overflow: hidden; height: 100vh; }

::selection{ background: var(--gold); color: #14110a; }

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; background:none; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.container.narrow{ max-width: 760px; }
.container.container-wide{ max-width: var(--container); }

/* custom scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: #2a2a2c; border: 2px solid var(--bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--gold); }

/* film-grain overlay */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 500;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress-bar{
  position: fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index: 900; transition: width .1s linear;
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index: 2000;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.5rem;
  transition: opacity .7s var(--ease-soft), visibility .7s var(--ease-soft);
}
.preloader.done{ opacity:0; visibility: hidden; }
.preloader-mark{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.preloader-mark span{
  font-family: var(--font-display); font-weight: 800; font-size: 3rem; letter-spacing: .02em;
  opacity: 0; transform: translateY(16px);
  animation: markIn .7s var(--ease-soft) .1s forwards;
}
.preloader-mark em{
  font-style: normal; font-size: .68rem; letter-spacing: .3em; color: var(--gold); margin-top: .5rem;
  opacity: 0; transform: translateY(10px);
  animation: markIn .7s var(--ease-soft) .3s forwards;
}
@keyframes markIn{ to{ opacity:1; transform: translateY(0); } }
.preloader-bar{ width: 180px; height: 1px; background: var(--line-strong); overflow:hidden; }
.preloader-bar span{
  display:block; height:100%; width:0%; background: var(--gold);
  transition: width 1.1s var(--ease-soft);
}

/* ==========================================================================
   Custom cursor
   ========================================================================== */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 1500;
  border-radius: 50%; transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor-dot{ width: 6px; height:6px; background: var(--ink); transition: opacity .2s ease; }
.cursor-ring{
  width: 34px; height:34px; border: 1px solid var(--ink);
  transition: width .25s var(--ease), height .25s var(--ease), opacity .2s ease, border-color .25s ease;
}
.cursor-ring.hover{ width: 60px; height:60px; border-color: var(--gold); }
@media (pointer: coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ==========================================================================
   Typography
   ========================================================================== */
.kicker{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
  display:flex; align-items:center; gap: .7rem;
}
.kicker-line{ width: 28px; height:1px; background: var(--gold); display:inline-block; }
.h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  max-width: 17ch;
}
.lead{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink);
  max-width: 62ch;
  margin: 0 0 1.25rem;
}
.body-text{
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 0 0 1.25rem;
}
.body-text em, .lead em{ color: var(--ink); font-style: normal; }

.pull-quote{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  line-height: 1.35;
  color: var(--gold-bright);
  margin: 1.75rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--gold);
  max-width: 30ch;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex; align-items:center; justify-content:center;
  padding: .95rem 1.8rem;
  border-radius: 2px;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .4s var(--ease), background .3s ease, border-color .3s ease, color .3s ease, box-shadow .4s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--gold);
  color: #14110a;
  box-shadow: 0 0 0 0 rgba(201,164,76,0);
}
.btn-primary:hover{ background: var(--gold-bright); box-shadow: 0 8px 28px -8px rgba(201,164,76,0.55); }
.btn-outline{
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-outline:hover{ border-color: var(--gold); color: var(--gold); }
.btn-ghost{
  border: 1px solid var(--line-strong);
  padding: .6rem 1.35rem;
  font-size: .85rem;
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }

/* magnetic buttons: JS sets transform via inline style; keep transition smooth */
.magnetic{ will-change: transform; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 800;
  padding: 1.5rem 0;
  transition: padding .35s var(--ease), background .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  padding: .9rem 0;
  background: rgba(10,10,11,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items:center; justify-content:space-between; gap: 2rem;
}
.brand{ display:flex; flex-direction:column; line-height:1; gap:.2rem; }
.brand-mark{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: .01em;
}
.brand-sub{
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--gold);
  font-weight: 600;
}
.nav-links{ display:flex; gap: 2.1rem; margin-right: auto; margin-left: 3rem; }
.nav-links a{
  font-size: .88rem; color: var(--ink-dim); font-weight: 500;
  position: relative; padding-bottom: 4px;
  transition: color .25s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--gold); transition: right .3s var(--ease);
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ right:0; }
.nav-cta{ flex-shrink:0; }

.menu-toggle{
  display:none; flex-direction:column; gap:5px; border:none; padding: .5rem;
}
.menu-toggle span{ width:22px; height:1.5px; background: var(--ink); transition: transform .3s ease, opacity .3s ease; }

/* ==========================================================================
   Featured banner: boxed carousel with a professional overlay control set
   Same footprint as before (1050 x 480, centered, thin border).
   ========================================================================== */
.banner-section{
  padding: clamp(5.5rem, 9vw, 7rem) 0 .5rem;
  background: var(--bg);
  position: relative; z-index: 1;
}
.banner-section .kicker{ margin-bottom: 1.5rem; }
.bn{ --bn-interval: 5400ms; }
.bn-frame{
  position: relative;
  width: 1050px;
  height: 480px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(160deg, #17171a, #0c0c0d);
  border: 1px solid var(--line);
  transition: border-color .3s ease;
  touch-action: pan-y;               /* vertical scroll stays normal, horizontal swipe changes slide */
  user-select: none; -webkit-user-select: none;
}
.bn-frame:hover{ border-color: var(--gold); }
/* the soft dark edges + bottom scrim so overlaid text/controls stay legible */
.bn-slide::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,10,11,.85) 0%, rgba(10,10,11,.15) 26%, transparent 46%),
    linear-gradient(to right, rgba(10,10,11,.5) 0%, transparent 16%, transparent 84%, rgba(10,10,11,.5) 100%);
}
.bn-slide{
  position:absolute; inset:0; margin:0;
  transition: transform 1s var(--ease);
  will-change: transform;
  overflow: hidden;
}
.bn:not(.is-ready) .bn-slide:not(:first-child){ visibility:hidden; }   /* before the script runs, show only slide 1 */
.bn-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center 20%;
  -webkit-user-drag: none;
  transform: scale(1.12);
  transition: transform var(--bn-interval) linear;
}
/* Ken Burns: the visible slide drifts inward slowly for the length of its stay */
.bn-slide[aria-hidden="false"] .bn-img{ transform: scale(1); }
@media (prefers-reduced-motion: reduce){
  .bn-img{ transition: none !important; transform: scale(1) !important; }
}
.bn-ph{
  position:absolute; right: 14%; bottom:0; width: 26%;
  color: rgba(201,164,76,.22);
}
.bn-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;   /* above the dark edge fade so the text stays crisp */
  display:flex; flex-direction:column; gap:.2rem;
  padding: 2rem clamp(1.5rem, 3vw, 3.25rem) clamp(3.75rem, 6vw, 4.5rem);
}
.bn-cap strong{
  font-family: var(--font-display); font-weight:700; line-height:1.05;
  font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--ink);
}
.bn-cap span{ font-size: clamp(.85rem, 1.2vw, 1rem); color: var(--gold-bright); letter-spacing: .01em; }

/* circular arrows, floating over the image, revealed on hover */
.bn-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(244,241,234,.28);
  background: rgba(10,10,11,.4);
  backdrop-filter: blur(6px);
  color: var(--ink);
  z-index: 3;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}
.bn-arrow svg{ width: 17px; height: 17px; }
.bn-arrow-prev{ left: clamp(.75rem, 2vw, 1.5rem); }
.bn-arrow-next{ right: clamp(.75rem, 2vw, 1.5rem); }
.bn-frame:hover .bn-arrow{ opacity: 1; visibility: visible; }
.bn-arrow:hover{ border-color: var(--gold); background: rgba(10,10,11,.65); color: var(--gold); }
.bn-arrow-prev:hover{ transform: translateY(-50%) translateX(-3px); }
.bn-arrow-next:hover{ transform: translateY(-50%) translateX(3px); }
@media (hover: none){
  .bn-arrow{ opacity: 1; visibility: visible; background: rgba(10,10,11,.55); }
}

/* bottom overlay bar: play/pause, progress dots, slide count — all in one row on the image */
.bn-controls{
  position: absolute; left:0; right:0; bottom:0; z-index: 3;
  display:flex; align-items:center; gap: 1rem;
  padding: 0 clamp(1.5rem, 3vw, 3.25rem) clamp(1.25rem, 2.2vw, 1.75rem);
}
.bn-btn{
  width: 34px; height: 34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(244,241,234,.28); border-radius: 50%; color: var(--ink);
  background: rgba(10,10,11,.35);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.bn-btn svg{ width: 13px; height: 13px; }
.bn-btn:hover{ border-color: var(--gold); color: var(--gold); }
.bn-btn:focus-visible, .bn-dot:focus-visible, .bn-arrow:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.bn-ico-play{ display:none; }
.bn.is-stopped .bn-ico-play{ display:block; }
.bn.is-stopped .bn-ico-pause{ display:none; }

.bn-dots{ display:flex; gap: .5rem; flex: 1; }
.bn-dot{
  width: 38px; height: 22px; padding: 0; border:0; background:none;
  display:flex; align-items:center;
}
.bn-dot-bar{
  position:relative; display:block; width:100%; height:2.5px; overflow:hidden; border-radius: 2px;
  background: rgba(244,241,234,.25); transition: background .25s ease;
}
.bn-dot:hover .bn-dot-bar{ background: rgba(244,241,234,.45); }
.bn-dot-fill{
  position:absolute; inset:0; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
}
/* the current dot fills up over the time the slide stays; when it's full, the next slide comes in */
.bn-dot[aria-current="true"] .bn-dot-fill{ animation: bn-fill var(--bn-interval) linear forwards; }
@keyframes bn-fill{ to{ transform: scaleX(1); } }
.bn.is-paused .bn-dot[aria-current="true"] .bn-dot-fill{ animation-play-state: paused; }
.bn.is-stopped .bn-dot[aria-current="true"] .bn-dot-fill{ animation: none; transform: scaleX(1); }

.bn-count{
  font-family: var(--font-display); font-weight: 600; letter-spacing: .04em;
  font-size: .78rem; color: var(--ink-faint); flex-shrink:0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1240px){
  .bn-frame{ width: 100%; height: auto; aspect-ratio: 1050/480; }
}
@media (max-width: 720px){
  .bn-frame{ aspect-ratio: 4/5; }
  .bn-ph{ right: 50%; transform: translateX(50%); width: 46%; }
  .bn-arrow{ width: 40px; height: 40px; opacity:1; visibility:visible; background: rgba(10,10,11,.5); }
  .bn-arrow svg{ width: 16px; height: 16px; }
  .bn-controls{ gap: .7rem; padding-left: 1.1rem; padding-right: 1.1rem; }
  .bn-dot{ width: 26px; }
  .bn-count{ display:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  --photo-w: clamp(260px, calc(var(--container) * .3333), 480px);   /* 480px at 1440 container */
  --photo-x: 45px;   /* <<< MOVE THE PHOTO: positive = right, negative = left (e.g. 60px, -40px) */
  --photo-r: calc((100vw - var(--container)) / 2 + var(--gutter) + var(--container) * .0667 - var(--photo-x)); /* distance from the right edge: bigger = photo moves left, smaller = moves right */
  --photo-b: 16%;                        /* space under the photo */
  --photo-up: 9%;                        /* lifts the whole photo up without resizing it */
  --plate-w: calc(var(--container) * .458);
  --disc-r: calc(var(--photo-w) * .43);   /* radius of the round frame behind Coach Harry */
  position: relative;
  min-height: 0;                       /* height = content, never the screen height */
  display: flex; flex-direction: column; justify-content:flex-start;
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 0;
  overflow: hidden;
}
.hero-mesh{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.mesh-blob{
  position:absolute; border-radius:50%; filter: blur(80px);
  animation: drift 22s ease-in-out infinite alternate;
}
/* the gold glow now sits directly behind Coach Harry (same centre as the rings),
   so the area to his right stays plain black */
.blob-1{
  --glow-w: min(40vw, 640px);
  width: var(--glow-w); height: var(--glow-w);
  --glow-shift: 1.5vw;                       /* nudge the glow left (bigger = further left) */
  right: calc(var(--photo-r) + var(--photo-w) / 2 - var(--glow-w) / 2 + var(--glow-shift));
  top: calc(100% - var(--photo-b) - var(--photo-up) - var(--disc-r));
  margin-top: calc(var(--glow-w) / -2);
  background: radial-gradient(circle, rgba(201,164,76,0.36), rgba(201,164,76,0.12) 42%, rgba(201,164,76,0) 68%);
}
.blob-2{ width: 32vw; height: 32vw; max-width:460px; max-height:460px; bottom:-10%; left:-6%;
  background: radial-gradient(circle, rgba(122,35,49,0.32), rgba(122,35,49,0) 70%);
  animation-delay: -8s; }
.blob-3{ width: 24vw; height: 24vw; max-width:340px; max-height:340px; top: 40%; left: 30%;
  background: radial-gradient(circle, rgba(201,164,76,0.14), rgba(201,164,76,0) 70%);
  animation-delay: -14s; }
@keyframes drift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(3%, 4%) scale(1.08); }
}

.hero-photo{
  position: absolute; right: var(--photo-r);
  top: calc(-1 * var(--photo-up)); bottom: calc(var(--photo-b) + var(--photo-up));
  width: var(--photo-w);
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
/* Round frame: a gold disc sits behind him and the photo is cut to the disc's curve
   below the shoulders, while his head and shoulders stay uncut above it. */
.hero-photo::before{
  content:''; position:absolute; left:50%; bottom:0; z-index:0;
  width: calc(var(--disc-r) * 2); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(201,164,76,.42), rgba(201,164,76,.14) 52%, rgba(12,10,8,.96) 100%);
  border: 1px solid rgba(201,164,76,.6);
  box-shadow: 0 0 90px -12px rgba(201,164,76,.38), inset 0 0 70px rgba(0,0,0,.55);
}
.hero-photo img{
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55));
  -webkit-mask-image:
    radial-gradient(circle var(--disc-r) at 50% calc(100% - var(--disc-r)), #000 calc(var(--disc-r) - 1px), transparent var(--disc-r)),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle var(--disc-r) at 50% calc(100% - var(--disc-r)), #000 calc(var(--disc-r) - 1px), transparent var(--disc-r)),
    linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, 100% calc(100% - var(--disc-r));
  mask-size: 100% 100%, 100% calc(100% - var(--disc-r));
  -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* rings are centred on the photo box (same horizontal + vertical centre) */
.hero-plate{
  position:absolute; width: var(--plate-w); height: auto;
  top: calc(100% - var(--photo-b) - var(--photo-up) - var(--disc-r)); margin-top: calc(var(--plate-w) / -2);
  right: calc(var(--photo-r) + var(--photo-w) / 2 - var(--plate-w) / 2);
  color: var(--gold); z-index: 0;
  will-change: transform;
}
.hero-plate .ring-out{
  transform-origin: 200px 200px;
  opacity: .16;
  animation: spin 70s linear infinite;
}
.hero-plate .ring-mid{
  transform-origin: 200px 200px;
  opacity: .22;
  animation: spin-rev 46s linear infinite;
}
.hero-plate .ring-in{
  transform-origin: 200px 200px;
  opacity: .32;
  animation: spin 30s linear infinite;
}
.hero-plate .plate-dot{ filter: drop-shadow(0 0 6px rgba(201,164,76,.9)); }
.hero-plate .plate-pulse{
  transform-origin: 200px 200px;
  opacity: .5;
  animation: pulse-ring 3.4s var(--ease-soft) infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes spin-rev{ to{ transform: rotate(-360deg); } }
@keyframes pulse-ring{
  0%{ opacity:.5; transform: scale(1); }
  50%{ opacity: .05; transform: scale(1.12); }
  100%{ opacity:0; transform: scale(1.24); }
}
@media (prefers-reduced-motion: reduce){
  .hero-plate .ring-out, .hero-plate .ring-mid, .hero-plate .ring-in, .hero-plate .plate-pulse{ animation: none; }
}

.hero-inner{ position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; width:100%; padding-top: clamp(4.5rem, 7vw, 6.5rem); }

.hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, calc(var(--container) * .0733), 6.6rem);
  line-height: .95;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
}
.reveal-line{ display:block; overflow:hidden; }
.reveal-line span{ display:inline-block; transform: translateY(112%); transition: transform .9s var(--ease-soft); }
.hero.loaded .reveal-line:nth-child(1) span{ transition-delay: .05s; }
.hero.loaded .reveal-line:nth-child(2) span{ transition-delay: .15s; }
.hero.loaded .reveal-line:nth-child(3) span{ transition-delay: .25s; }
.hero.loaded .reveal-line span{ transform: translateY(0); }
.hero-title .accent{ color: var(--gold); }

.hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap: 2rem; flex-wrap:wrap; margin-bottom: 2.5rem; }
.hero-sub{
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--ink-dim);
  max-width: 42ch;
  margin: 0;
}
.hero-actions{
  position: relative; z-index: 2;
  display:flex; justify-content:center; gap: 1rem; flex-wrap: wrap;
  margin: 2.25rem auto 0;
}

.hero-glass{
  position: relative; z-index:1;
  max-width: var(--container); margin: 0 auto; width: calc(100% - clamp(2.5rem, 8vw, 5rem));
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 10px;
  display:flex; align-items:stretch;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  transition: box-shadow .4s ease, border-color .4s ease, transform .6s var(--ease-soft), opacity .6s var(--ease-soft);
  transform: translateY(22px);
  opacity: 0;
  will-change: transform, opacity;
  isolation: isolate;
}
.hero-glass.in-view{ opacity: 1; transform: translateY(0); }
.hero-glass:hover{ border-color: var(--line-strong); box-shadow: 0 36px 70px -28px rgba(0,0,0,0.7); }

.glass-stat{
  position: relative;
  flex:1;
  display:flex; flex-direction:column; align-items:flex-start;
  padding: .35rem clamp(.5rem, 1.4vw, 1.1rem);
  border-radius: 8px;
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .65s var(--ease-soft), transform .65s var(--ease-soft), background .35s ease;
  will-change: transform, opacity;
}
.hero-glass.in-view .glass-stat{ opacity:1; transform: translateY(0) scale(1); }
.hero-glass.in-view .glass-stat:nth-child(1){ transition-delay: .08s; }
.hero-glass.in-view .glass-stat:nth-child(3){ transition-delay: .2s; }
.hero-glass.in-view .glass-stat:nth-child(5){ transition-delay: .32s; }
.glass-stat:hover{ background: rgba(201,164,76,0.05); }

.glass-stat-icon{
  display:flex; align-items:center; justify-content:center;
  width: 38px; height: 38px; margin-bottom: .85rem;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(201,164,76,0.35);
  background: radial-gradient(circle at 30% 30%, rgba(201,164,76,0.16), rgba(201,164,76,0) 70%);
  transition: transform .45s var(--ease-soft), border-color .35s ease, box-shadow .35s ease;
}
.glass-stat-icon svg{ width: 18px; height: 18px; }
.glass-stat:hover .glass-stat-icon{
  transform: translateY(-3px) scale(1.06);
  border-color: var(--gold);
  box-shadow: 0 8px 22px -8px rgba(201,164,76,0.55);
}

.glass-stat-num{ line-height:1; }
.glass-stat .stat-num, .glass-stat .stat-num-text, .glass-stat .stat-suffix{ line-height:1; }
.glass-divider{
  width:1px; align-self:stretch; margin: 0 2rem;
  background: linear-gradient(to bottom, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.stat-num, .stat-num-text{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem); color: var(--gold);
  display:inline-block;
  letter-spacing: -.01em;
  transition: text-shadow .5s ease;
  font-variant-numeric: tabular-nums;
}
.stat-num.counted{ text-shadow: 0 0 24px rgba(201,164,76,0.55); }
.stat-suffix{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem); color: var(--gold);
}
.glass-stat p{ font-size: .85rem; color: var(--ink-dim); margin: .5rem 0 0; letter-spacing: .01em; }

.scroll-cue{
  position:relative; margin: 2.25rem auto 2rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:1;
}
.scroll-cue em{ font-style:normal; font-size: .68rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-faint); }
.scroll-cue span{
  position:relative; width: 1px; height: 40px; background: var(--line-strong); overflow:hidden; display:block;
}
.scroll-cue span::after{
  content:''; position:absolute; top:-40px; left:0; width:100%; height:100%;
  background: var(--gold);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{ top:-40px; } 60%{ top:100%; } 100%{ top:100%; } }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{
  position: relative; overflow: hidden;
  padding: .8rem 0; margin-top: 0;
  background:
    radial-gradient(60% 220% at 50% 50%, rgba(201,164,76,.10), transparent 70%),
    linear-gradient(180deg, #121213, #0d0d0e);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* thin gold hairlines that fade out toward the edges */
.marquee::before, .marquee::after{
  content:''; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(236,201,120,.75) 50%, transparent);
}
.marquee::before{ top:0; }
.marquee::after{ bottom:0; }

.marquee-track{
  display:flex; width: max-content;
  -webkit-mask-image: none;
}
/* soft fade at both edges */
.marquee{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* Two identical groups, each at least one viewport wide. Each group slides left by
   exactly its own width, so the moment one leaves the other has taken its place —
   there is never an empty gap, however wide the screen is. */
.marquee-group{
  flex: 0 0 auto; min-width: 100vw;
  display:flex; align-items:center; justify-content:flex-start;
  gap: 2.5rem; padding-right: 2.5rem;
  white-space: nowrap;
  animation: marquee-slide 50s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-group{ animation-play-state: paused; }

/* solid words: silver text with a slow gold shine sweeping through */
.marquee-group span{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.55vw, 1.4rem); line-height: 1.2;
  text-transform: uppercase; letter-spacing: .24em;
  color: transparent;
  background: linear-gradient(100deg, #bdb7ad 0%, #f4f1ea 38%, var(--gold-bright) 50%, #f4f1ea 62%, #bdb7ad 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: marquee-shine 7s ease-in-out infinite;
  transition: filter .3s ease;
}
/* every second word is a fine gold outline for rhythm */
.marquee-group span:nth-of-type(even){
  background: none; animation: none;
  -webkit-text-stroke: 1px rgba(201,164,76,.6);
}
.marquee-group span:hover{ filter: drop-shadow(0 0 10px rgba(236,201,120,.45)); }
.marquee-group span:nth-of-type(even):hover{ -webkit-text-stroke-color: var(--gold-bright); }

/* small gold diamond separator with a fine ring around it */
.marquee-group .dot{
  flex: none; position: relative; width: 6px; height: 6px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(201,164,76,.55);
}
.marquee-group .dot::after{
  content:''; position:absolute; inset:-6px;
  border: 1px solid rgba(201,164,76,.35);
}
@keyframes marquee-slide{ from{ transform: translateX(0); } to{ transform: translateX(-100%); } }
@keyframes marquee-shine{ 0%,100%{ background-position: 100% 0; } 50%{ background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce){ .marquee-group{ animation: none; } }

/* ==========================================================================
   Sections
   ========================================================================== */
.section{
  padding: var(--section-pad) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.section-dark{ background: var(--bg-alt); }
#about{ padding-top: calc(var(--section-pad) + 2.5rem); }

/* about split */
.split{ display:grid; grid-template-columns: 0.8fr 2fr; gap: 3rem; }
.split-label{ position:relative; }
.split-content{ max-width: 720px; }
.pill-row{ display:flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.pill{
  border: 1px solid var(--line-strong);
  padding: .5rem 1rem;
  border-radius: 2px;
  font-size: .82rem;
  color: var(--ink-dim);
}

/* coach */
.coach-grid{ display:grid; grid-template-columns: 0.85fr 2fr; gap: 4rem; align-items:start; margin-top: 2.5rem; }
.coach-frame{
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  aspect-ratio: 3/4;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(201,164,76,.20), rgba(201,164,76,0) 62%),
    linear-gradient(160deg, #1b1a19, #0d0d0e);
  box-shadow: 0 40px 70px -40px rgba(0,0,0,.85);
  transform-style: preserve-3d;
  transition: transform .1s ease-out, box-shadow .5s ease;
  overflow: hidden;
}
.coach-frame::before{
  content:''; position:absolute; inset:0; z-index:3; border-radius: inherit;
  padding: 1px; pointer-events:none;
  background: linear-gradient(155deg, rgba(201,164,76,.55), rgba(201,164,76,0) 30%, rgba(201,164,76,0) 70%, rgba(201,164,76,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.coach-frame:hover{ box-shadow: 0 46px 80px -36px rgba(0,0,0,.9), 0 0 60px -18px rgba(201,164,76,.28); }
/* soft fade at the bottom so the cut-off edge of the photo melts into the frame */
.coach-frame::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height: 34%;
  z-index: 2; pointer-events:none;
  background: linear-gradient(to top, rgba(13,13,14,.65), rgba(13,13,14,0));
}
.coach-frame-glow{
  position:absolute; width: 140%; height:140%; top:-20%; left:-20%;
  background: radial-gradient(circle at 50% 42%, rgba(201,164,76,0.16), transparent 60%);
  pointer-events:none;
  animation: coach-glow-pulse 5s ease-in-out infinite;
}
@keyframes coach-glow-pulse{
  0%, 100%{ opacity: .75; }
  50%{ opacity: 1; }
}
.coach-photo-img{
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  object-fit: contain; object-position: center bottom;
  /* The photo file has empty space around Coach Harry, so he looked small and floated in the
     middle of the box. Scaling from this point puts his head just under the top edge, centres
     him left-to-right, and pushes the cut-off bottom of the photo past the frame edge. */
  transform: translateY(4%) scale(1.236); transform-origin: 37% 34.4%;   /* translateY = how far he moves down: bigger = lower */
  opacity: 0; transition: opacity .7s var(--ease-soft);
}
.coach-frame.has-photo .coach-photo-img{ opacity: 1; }
.coach-frame.has-photo .coach-svg{ opacity: 0; }
.coach-svg{ width: 60%; height: auto; color: var(--gold); opacity: .85; position:relative; transition: opacity .5s ease; }
.coach-badge{
  position:absolute; bottom: -1px; right: -1px; z-index: 3;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#14110a;
  padding: 1rem 1.3rem;
  border-top-left-radius: 10px;
  display:flex; flex-direction:column; align-items:flex-end; line-height:1;
  box-shadow: -6px -6px 24px -10px rgba(0,0,0,.5);
}
.coach-badge-num{ font-family: var(--font-display); font-weight:800; font-size: 1.6rem; }
.coach-badge-label{ font-size: .68rem; letter-spacing:.05em; margin-top:.2rem; }

.pull-quote{ position: relative; }
.pull-quote::before{
  content:'\201C'; position:absolute; left: -.3rem; top: -1.6rem;
  font-family: var(--font-serif); font-style: normal; font-weight:700;
  font-size: 4.5rem; color: var(--gold); opacity: .28; line-height:1;
  pointer-events:none;
}

.credential-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin: 2rem 0 2.25rem; }
.credential{
  position: relative;
  display:flex; gap: 1rem; align-items:flex-start;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(244,241,234,0.035), rgba(244,241,234,0.008));
  overflow: hidden;
  transition: border-color .4s ease, background .4s ease, transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.credential::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width: 2px;
  background: linear-gradient(to bottom, var(--gold), rgba(201,164,76,0));
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease-soft);
}
.credential:hover{
  border-color: rgba(201,164,76,.5);
  background: linear-gradient(160deg, rgba(201,164,76,.08), rgba(201,164,76,.015));
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -24px rgba(0,0,0,.65);
}
.credential:hover::before{ transform: scaleY(1); }
.credential-mark{
  flex-shrink:0;
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color: var(--gold);
  font-size: .82rem;
  border: 1px solid rgba(201,164,76,.4);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(201,164,76,.2), transparent 70%);
  transition: transform .45s var(--ease-soft), border-color .35s ease, box-shadow .35s ease;
}
.credential:hover .credential-mark{
  transform: scale(1.08);
  border-color: var(--gold);
  box-shadow: 0 8px 18px -8px rgba(201,164,76,.5);
}
.credential p{ margin:0; color: var(--ink-dim); font-size: .92rem; line-height:1.55; }

/* why: feature card grid */
.why-head{ max-width: 720px; margin-bottom: 1rem; }
.why-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  margin-top: 2.75rem;
}
.why-card{
  --spot: rgba(201,164,76,.16);
  position: relative; z-index: 0; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2.25rem 2.25rem 2rem;
  background:
    linear-gradient(165deg, rgba(244,241,234,.05), rgba(244,241,234,.008) 55%),
    #0e0e0f;
  box-shadow: 0 30px 54px -34px rgba(0,0,0,.7);
  transition: border-color .4s ease, box-shadow .5s var(--ease-soft), transform .5s var(--ease-soft), background .4s ease;
}
.why-card > *{ position: relative; z-index: 1; }
.why-card::before{
  content:''; position:absolute; inset:0; z-index:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 62%);
  opacity: 0; transition: opacity .45s ease;
}
.why-card::after{
  content:''; position:absolute; inset:0 0 auto 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .5s var(--ease-soft);
}
.why-card:hover{
  border-color: rgba(201,164,76,.4);
  transform: translateY(-8px);
  box-shadow: 0 44px 76px -32px rgba(0,0,0,.85), 0 0 60px -30px rgba(201,164,76,.4);
}
.why-card:hover::before{ opacity: 1; }
.why-card:hover::after{ transform: scaleX(1); }

.why-card-num{
  position:absolute; top: 1rem; right: 1.5rem; z-index: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 4.5rem;
  color: var(--gold); opacity: .07; line-height:1; letter-spacing: -.02em;
  pointer-events: none; transition: opacity .4s ease, transform .5s var(--ease-soft);
}
.why-card:hover .why-card-num{ opacity: .13; transform: translateY(-4px); }

.why-icon{
  display:flex; align-items:center; justify-content:center;
  width: 54px; height: 54px; margin-bottom: 1.35rem;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(201,164,76,0.4);
  background: radial-gradient(circle at 30% 30%, rgba(201,164,76,0.22), rgba(201,164,76,0.02) 70%);
  box-shadow: 0 0 0 6px rgba(201,164,76,0.045);
  transition: transform .45s var(--ease-soft), border-color .35s ease, box-shadow .35s ease;
}
.why-icon svg{ width: 24px; height: 24px; }
.why-card:hover .why-icon{
  transform: translateY(-3px) scale(1.07);
  border-color: var(--gold);
  box-shadow: 0 10px 26px -8px rgba(201,164,76,0.55), 0 0 0 6px rgba(201,164,76,0.08);
}

.why-card h3{ font-family: var(--font-display); font-weight:700; font-size: 1.4rem; margin: 0 0 .75rem; }
.why-card p{ color: var(--ink-dim); margin:0; font-size: .95rem; line-height: 1.65; max-width: 42ch; }

/* services */
@property --angle{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ring-spin{ to{ --angle: 360deg; } }
@keyframes svc-rise{ from{ opacity:0; transform: translateY(42px) scale(.97); } to{ opacity:1; transform: none; } }
@keyframes svc-draw{ to{ stroke-dashoffset: 0; } }
@keyframes svc-item{ from{ opacity:0; transform: translateX(-12px); } to{ opacity:1; transform:none; } }
@keyframes svc-ping{ 0%{ transform: scale(1); opacity:.55; } 80%,100%{ transform: scale(1.7); opacity:0; } }
@keyframes svc-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@keyframes svc-float{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(30px,-24px); } }

#services{ overflow: hidden; }
#services::before, #services::after{
  content:''; position:absolute; z-index:0; border-radius:50%; filter: blur(90px); pointer-events:none;
}
#services::before{ width: 520px; height: 520px; top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(201,164,76,.16), transparent 70%); }
#services::after{ width: 620px; height: 620px; bottom: -220px; right: -160px;
  background: radial-gradient(circle, rgba(166,51,71,.24), transparent 70%);
  animation: svc-float 14s ease-in-out infinite; }
#services .container{ position: relative; z-index: 1; }

.services-head{
  display:grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: end;
}
.services-head .h2{ margin-bottom: 0; }
.services-intro{ margin: 0 0 .4rem; color: var(--ink-dim); font-size: 1.02rem; line-height: 1.7; max-width: 46ch; justify-self: end; }

.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.25rem; align-items: stretch; }

.service-card{
  --ring-a: rgba(201,164,76,0); --ring-b: var(--gold-bright);
  --spot: rgba(201,164,76,.16);
  position: relative; z-index: 0;
  min-width: 0; /* grid items default to min-width:auto, which floors them at their content's
                   natural width — on the narrow single-column mobile grid that was wider than
                   the track itself, pushing the card past the right edge of the screen */
  display: flex; flex-direction: column;
  padding: 2.25rem 2.1rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(165deg, rgba(244,241,234,.05), rgba(244,241,234,.008) 55%),
    #0e0e0f;
  transition: border-color .4s ease, box-shadow .5s ease, translate .5s var(--ease);
}
.service-card:hover{
  translate: 0 -10px;
  border-color: rgba(201,164,76,.35);
  box-shadow: 0 40px 70px -34px rgba(0,0,0,.85), 0 0 60px -30px rgba(201,164,76,.45);
}
.service-card > :not(.service-flag){ position: relative; z-index: 1; }

/* cursor spotlight */
.service-card::before{
  content:''; position:absolute; inset:0; z-index:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 62%);
  opacity: 0; transition: opacity .45s ease;
}
.service-card:hover::before{ opacity: 1; }

/* travelling light around the border */
.service-card::after{
  content:''; position:absolute; inset:-1px; z-index:2; border-radius: inherit; pointer-events:none;
  padding: 1.5px;
  background: conic-gradient(from var(--angle), transparent 0deg, transparent 240deg, var(--ring-a) 300deg, var(--ring-b) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s ease;
  animation: ring-spin 3.6s linear infinite; animation-play-state: paused;
}
.service-card:hover::after{ opacity: 1; animation-play-state: running; }

.service-top{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap: .65rem 1rem; margin-bottom: 1.75rem;
  /* on narrow cards the icon + badge no longer fit on one line — let the
     badge drop to its own line instead of overflowing the card's border */
}

.service-icon{
  position: relative;
  width: 58px; height: 58px; flex: none;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(201,164,76,.4);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(201,164,76,.16), rgba(201,164,76,.03));
  color: var(--gold-bright);
  transition: background .4s ease, color .4s ease, box-shadow .4s ease, transform .5s var(--ease), border-color .4s ease;
}
.service-icon svg{ width: 26px; height: 26px; }
.service-card:hover .service-icon{
  background: linear-gradient(145deg, var(--gold-bright), var(--gold));
  color: #14110a; border-color: var(--gold-bright);
  box-shadow: 0 12px 30px -8px rgba(201,164,76,.65);
  transform: rotate(-6deg) scale(1.06);
}

.service-index{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); padding: .42rem .8rem;
  border: 1px solid rgba(201,164,76,.32); border-radius: 999px;
  background: rgba(201,164,76,.06);
  white-space: nowrap; max-width: 100%;
}

.service-card h3{ font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; margin: 0 0 1rem; }
.service-card p{ color: var(--ink-dim); font-size: .94rem; line-height: 1.7; margin: 0 0 1.75rem; flex: 1 0 auto; }

.check-list{ padding-top: 1.35rem; border-top: 1px solid var(--line); }
.check-list li{
  position:relative; padding: .6rem 0 .6rem 1.9rem;
  font-size: .9rem; color: var(--ink);
  border-top: 1px solid var(--line);
  transition: padding-left .35s var(--ease), color .3s ease;
}
.check-list li:first-child{ border-top: none; }
.check-list li::before{
  content:''; position:absolute; left:0; top: .78rem;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid rgba(201,164,76,.55); background: rgba(201,164,76,.08);
  transition: background .3s ease, transform .3s var(--ease);
}
.check-list li::after{
  content:''; position:absolute; left: 5.6px; top: 1.06rem;
  width: 5.5px; height: 8px;
  border: solid var(--gold-bright); border-width: 0 1.4px 1.4px 0;
  transform: rotate(40deg);
}
.service-card:hover .check-list li::before{ background: rgba(201,164,76,.2); }
.check-list li:hover{ padding-left: 2.2rem; }
.check-list li:hover::before{ transform: scale(1.12); background: var(--gold); }
.check-list li:hover::after{ border-color: #14110a; }

/* call to action row — styled as an actual button so it reads as clickable,
   not just a text link with a decorative arrow */
.service-cta{
  margin-top: 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap: 1rem;
  padding: 1rem 1.3rem;
  border: 1px solid rgba(201,164,76,.4);
  border-radius: 4px;
  background: rgba(201,164,76,.07);
  font-size: .92rem; font-weight: 600; color: var(--gold-bright);
  transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.service-cta:hover{
  background: var(--gold); border-color: var(--gold); color: #14110a;
  box-shadow: 0 10px 26px -10px rgba(201,164,76,.6);
}
.service-cta-arrow{
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid currentColor; color: inherit;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .4s var(--ease);
}
.service-cta-arrow svg{ width: 16px; height: 16px; transition: transform .4s var(--ease); }
.service-cta:hover .service-cta-arrow{ background: rgba(20,17,10,.18); transform: scale(1.08); }
.service-cta:hover .service-cta-arrow svg{ transform: translateX(2px); }

/* specialty: Coach Harry's flagship — always lit */
.service-card.specialty{
  --ring-a: rgba(166,51,71,0); --ring-b: #e0566d;
  --spot: rgba(224,86,109,.2);
  border-color: rgba(166,51,71,.7);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(166,51,71,.3), transparent 70%),
    linear-gradient(165deg, rgba(122,35,49,.26), rgba(20,11,13,.9) 65%),
    #0e0e0f;
  box-shadow: 0 34px 80px -38px rgba(166,51,71,.7);
}
.service-card.specialty::after{ opacity: 1; animation-play-state: running; }
.service-card.specialty:hover{ border-color: rgba(224,86,109,.7); box-shadow: 0 44px 90px -36px rgba(166,51,71,.85); }
.service-card.specialty .service-icon{
  border-color: var(--oxblood-bright);
  background: linear-gradient(135deg, var(--oxblood-bright), var(--oxblood));
  color: var(--ink);
  box-shadow: 0 10px 26px -10px rgba(166,51,71,.9);
}
.service-card.specialty .service-icon::after{
  content:''; position:absolute; inset:-1px; border-radius: inherit;
  border: 1px solid var(--oxblood-bright);
  animation: svc-ping 2.6s ease-out infinite; pointer-events:none;
}
.service-card.specialty:hover .service-icon{
  background: linear-gradient(135deg, #e0566d, var(--oxblood-bright));
  color: #fff; border-color: #e0566d;
  box-shadow: 0 14px 34px -8px rgba(224,86,109,.8);
}
.service-card.specialty .service-index{
  color: #f0a0ae; border-color: rgba(224,86,109,.5); background: rgba(166,51,71,.18);
}
.service-card.specialty .service-index::before{
  content:''; width:6px; height:6px; border-radius:50%; background:#e0566d;
  animation: svc-dot 1.6s ease-in-out infinite;
}
.service-card.specialty .check-list li::before{ border-color: rgba(224,86,109,.6); background: rgba(166,51,71,.14); }
.service-card.specialty .check-list li::after{ border-color: #f0a0ae; }
.service-card.specialty .check-list li:hover::before{ background: var(--oxblood-bright); }
.service-card.specialty .check-list li:hover::after{ border-color: #fff; }
.service-card.specialty .service-cta{
  border-color: rgba(224,86,109,.5); background: rgba(166,51,71,.1); color: #f0a0ae;
}
.service-card.specialty .service-cta:hover{
  background: var(--oxblood-bright); border-color: var(--oxblood-bright); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(166,51,71,.7);
}

/* entrance sequence (only armed by JS, so the section is never hidden without it) */
.services-grid[data-anim] .service-card:nth-child(1){ --i: 0; }
.services-grid[data-anim] .service-card:nth-child(2){ --i: 1; }
.services-grid[data-anim] .service-card:nth-child(3){ --i: 2; }
.services-grid[data-anim] .check-list li:nth-child(1){ --j: 0; }
.services-grid[data-anim] .check-list li:nth-child(2){ --j: 1; }
.services-grid[data-anim] .check-list li:nth-child(3){ --j: 2; }
.services-grid[data-anim] .service-icon path,
.services-grid[data-anim] .service-icon circle:not([fill]){ stroke-dasharray: 1; stroke-dashoffset: 1; }
.services-grid[data-anim="pending"] .service-card{ opacity: 0; }
.services-grid[data-anim="pending"] .check-list li{ opacity: 0; }
.services-grid[data-anim="in"] .service-card{
  animation: svc-rise 1s var(--ease-soft) both;
  animation-delay: calc(var(--i) * .16s);
}
.services-grid[data-anim="in"] .service-icon path,
.services-grid[data-anim="in"] .service-icon circle:not([fill]){
  animation: svc-draw 1.1s var(--ease-soft) forwards;
  animation-delay: calc(var(--i) * .16s + .35s);
}
.services-grid[data-anim="in"] .check-list li{
  animation: svc-item .6s var(--ease-soft) both;
  animation-delay: calc(var(--i) * .16s + .6s + var(--j) * .11s);
}

@media (max-width: 1024px){
  .services-head{ grid-template-columns: 1fr; gap: 1.25rem; }
  .services-intro{ justify-self: start; }
  .service-card:hover{ translate: 0 -6px; }
}
@media (prefers-reduced-motion: reduce){
  #services::after, .service-card::after, .service-card.specialty .service-icon::after,
  .service-card.specialty .service-index::before{ animation: none; }
  .service-card:hover{ translate: none; }
}

/* pricing */
.pricing-note{ max-width: 56ch; }
.pricing-toggle{
  display:inline-flex; align-items:center; gap: 1.1rem; margin: 1.25rem 0 3.25rem;
  background: var(--glass); border: 1px solid var(--line); border-radius: 40px;
  padding: .55rem 1.15rem;
}
.toggle-label{ font-size: .86rem; font-weight: 600; color: var(--ink-faint); transition: color .3s ease; white-space:nowrap; }
.toggle-label.active{ color: var(--ink); }
.toggle-label[data-term-label="6"]::after{
  content: 'Save more'; display:inline-block; margin-left: .5rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold-bright); background: rgba(201,164,76,0.14); border: 1px solid rgba(201,164,76,0.4);
  padding: .18rem .45rem; border-radius: 20px; vertical-align: 1px;
}
.switch{
  width: 52px; height: 28px; border-radius: 20px; border: 1px solid var(--line-strong);
  position: relative; padding:0; flex-shrink:0;
  transition: border-color .3s ease, background .3s ease;
}
.switch-thumb{
  position:absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius:50%;
  background: linear-gradient(155deg, var(--gold-bright), var(--gold));
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .35s var(--ease);
}
.switch[aria-checked="true"] .switch-thumb{ transform: translateX(24px); }
.switch:focus-visible, .price-cta:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.pricing-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; align-items: stretch; }
.price-card{
  border: 1px solid var(--line);
  padding: 2.25rem 1.75rem;
  display:flex; flex-direction:column;
  position: relative;
  z-index: 0;
  border-radius: 8px;
  transition: border-color .4s ease, box-shadow .5s ease, translate .5s var(--ease);
  background:
    linear-gradient(165deg, rgba(244,241,234,.05), rgba(244,241,234,.008) 55%),
    #0d0d0e;
}
.price-card:hover{
  translate: 0 -10px;
  border-color: rgba(201,164,76,.4);
  box-shadow: 0 40px 70px -34px rgba(0,0,0,.85), 0 0 60px -30px rgba(201,164,76,.45);
}
.price-card h3{ font-family: var(--font-display); font-weight:700; font-size: 1.85rem; margin:0; letter-spacing: .01em; }
.price-tagline{ color: var(--ink-faint); font-size: .82rem; margin: .4rem 0 0; }
.price-amount{ margin: 1.65rem 0 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); min-height: 4rem; }
.price-amount span{ display: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 2vw, 2.35rem); color: var(--gold); letter-spacing: .01em; }
.price-amount span.term-3{ display: block; }
.price-amount small{ display:block; font-family: var(--font-body); font-weight: 500; font-size: .72rem; color: var(--ink-faint); margin-top: .4rem; line-height: 1.45; }
.price-features{ flex:1; margin-bottom: 1.75rem; }
.price-features li{
  position: relative;
  font-size: .84rem; color: var(--ink-dim); line-height: 1.5;
  padding: .55rem 0 .55rem 1.9rem;
  border-bottom: 1px solid var(--line);
}
.price-features li:last-child{ border-bottom: none; }
.price-features li::before{
  content: '';
  position: absolute; left: 0; top: .62rem;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid rgba(201,164,76,.55);
  background: rgba(201,164,76,.08);
}
.price-features li::after{
  content: '';
  position: absolute; left: 5.5px; top: .93rem;
  width: 6px; height: 9px;
  border: solid var(--gold-bright);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(40deg);
}
.price-features em{ color: var(--gold); font-style: normal; }
.price-footnote{ font-size: .74rem; color: var(--ink-faint); margin: -1rem 0 1.4rem; }

.price-cta{
  width:100%; position: relative; overflow: hidden;
}
.price-cta::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--ease);
  pointer-events: none;
}
.price-cta:hover::before{ left: 130%; }

/* Elite — the recommended plan is given more physical presence, not just a border */
.price-card.featured{
  --ring-b: var(--gold-bright); --spot: rgba(236,201,120,.2);
  border-color: rgba(201,164,76,.75);
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(201,164,76,.24), transparent 70%),
    linear-gradient(180deg, rgba(201,164,76,.08), transparent 55%),
    #0d0d0e;
  box-shadow: 0 34px 80px -40px rgba(201,164,76,.55);
  z-index: 2;
}
.price-card.featured:hover{ border-color: var(--gold-bright); box-shadow: 0 46px 90px -38px rgba(201,164,76,.7); }
.price-card.featured .price-amount{ border-top-color: rgba(201,164,76,.3); }
.featured-tag{
  position:absolute; top:0; right: 1.85rem;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#14110a;
  font-size: .66rem; font-weight:800; letter-spacing:.06em; text-transform: uppercase;
  padding: .55rem 1rem .65rem;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  box-shadow: 0 8px 18px -8px rgba(201,164,76,.65);
}

/* Signature — Coach Harry's own roster, marked with quiet exclusivity */
.price-card.signature{
  --ring-b: #e0566d; --spot: rgba(224,86,109,.2);
  border-color: rgba(166,51,71,.75);
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(166,51,71,.3), transparent 70%),
    linear-gradient(180deg, rgba(122,35,49,.22), transparent 58%),
    #0d0d0e;
  box-shadow: 0 34px 80px -40px rgba(166,51,71,.7);
  z-index: 1;
}
.price-card.signature:hover{ border-color: #e0566d; box-shadow: 0 46px 90px -38px rgba(166,51,71,.85); }
.price-card.signature .price-amount{ border-top-color: rgba(166,51,71,.35); }
.price-card.signature .price-features li::before{ border-color: rgba(166,51,71,.6); background: rgba(166,51,71,.1); }
.price-card.signature .price-features li::after{ border-color: var(--oxblood-bright); }
.signature-tag{
  background: linear-gradient(135deg, var(--oxblood-bright), var(--oxblood));
  color: var(--ink);
  font-size: .66rem; font-weight:800; letter-spacing:.06em; text-transform: uppercase;
  padding: .55rem 1rem .65rem;
  position:absolute; top:0; right: 1.85rem;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  box-shadow: 0 8px 18px -8px rgba(166,51,71,.65);
}
.price-card.signature .btn-primary{
  background: linear-gradient(135deg, var(--oxblood-bright), var(--oxblood));
  color: var(--ink);
}
.price-card.signature .btn-primary:hover{
  background: linear-gradient(135deg, #b8455a, var(--oxblood-bright));
  box-shadow: 0 8px 28px -8px rgba(166,51,71,.6);
}

/* give the recommended plan a taller stance on desktop, without touching
   the transform property (JS drives transform for the pointer-tilt effect) */
@media (min-width: 1025px){
  .price-card.featured{
    margin-top: -1.1rem; margin-bottom: -1.1rem;
    padding-top: 2.9rem; padding-bottom: 2.9rem;
  }
}


/* ---- pricing motion (shares its language with the services cards) ---- */
@keyframes price-swap{ from{ opacity:0; transform: translateY(12px); filter: blur(4px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes tag-shine{ 0%,55%{ left:-70%; } 100%{ left:140%; } }
@keyframes price-glint{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.price-card{ --ring-b: var(--gold-bright); --spot: rgba(201,164,76,.16); }
.price-card > :not(.featured-tag){ position: relative; z-index: 1; }

.price-card::before{
  content:''; position:absolute; inset:0; z-index:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 62%);
  opacity: 0; transition: opacity .45s ease;
}
.price-card:hover::before{ opacity: 1; }

.price-card::after{
  content:''; position:absolute; inset:-1px; z-index:2; border-radius: inherit; pointer-events:none;
  padding: 1.5px;
  background: conic-gradient(from var(--angle), transparent 0deg, transparent 240deg, rgba(255,255,255,0) 300deg, var(--ring-b) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s ease;
  animation: ring-spin 3.6s linear infinite; animation-play-state: paused;
}
.price-card:hover::after,
.price-card.featured::after,
.price-card.signature::after{ opacity: 1; animation-play-state: running; }
.price-card.signature::after{ animation-duration: 4.4s; animation-direction: reverse; }

.price-card h3{ transition: color .3s ease, letter-spacing .4s var(--ease); }
.price-card:hover h3{ letter-spacing: .035em; }
.price-card.featured h3{ color: var(--gold-bright); }

/* price flips in whenever the term is switched */
.price-amount span.term-3, .price-amount span.term-6{ animation: price-swap .6s var(--ease-soft) both; }
.price-card.featured .price-amount span{ text-shadow: 0 0 26px rgba(236,201,120,.35); }
.price-card.signature .price-amount span{ color: #e8a3ae; text-shadow: 0 0 26px rgba(224,86,109,.3); }

.price-features li{ transition: padding-left .35s var(--ease), color .3s ease; }
.price-features li::before{ transition: background .3s ease, transform .3s var(--ease); }
.price-features li:hover{ padding-left: 2.2rem; color: var(--ink); }
.price-features li:hover::before{ transform: scale(1.12); background: var(--gold); }
.price-features li:hover::after{ border-color: #14110a; }
.price-card.signature .price-features li:hover::before{ background: var(--oxblood-bright); }
.price-card.signature .price-features li:hover::after{ border-color: #fff; }

.price-cta{ transition: transform .4s var(--ease), background .3s ease, border-color .3s ease, color .3s ease, box-shadow .4s ease; }
.price-cta:hover{ transform: translateY(-2px); }
.price-card:hover .btn-outline.price-cta{ border-color: var(--gold); color: var(--gold-bright); }

.featured-tag, .signature-tag{ overflow: hidden; }
.featured-tag::after{
  content:''; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: tag-shine 4.5s ease-in-out infinite;
}
.signature-tag::after{ animation-delay: 1.2s; }

.toggle-label[data-term-label="6"]::after{ animation: price-glint 2.4s ease-in-out infinite; }

/* entrance sequence (armed by JS only) */
.pricing-grid[data-anim] .price-features li:nth-child(n){ --j: 0; }
.pricing-grid[data-anim] .price-features li:nth-child(1){ --j: 0; }
.pricing-grid[data-anim] .price-features li:nth-child(2){ --j: 1; }
.pricing-grid[data-anim] .price-features li:nth-child(3){ --j: 2; }
.pricing-grid[data-anim] .price-features li:nth-child(4){ --j: 3; }
.pricing-grid[data-anim] .price-features li:nth-child(5){ --j: 4; }
.pricing-grid[data-anim] .price-features li:nth-child(6){ --j: 5; }
.pricing-grid[data-anim] .price-features li:nth-child(7){ --j: 6; }
.pricing-grid[data-anim] .price-features li:nth-child(8){ --j: 7; }
.pricing-grid[data-anim] .price-features li:nth-child(9){ --j: 8; }
.pricing-grid[data-anim] .price-features li:nth-child(10){ --j: 9; }
.pricing-grid[data-anim] .price-card:nth-child(1){ --i: 0; }
.pricing-grid[data-anim] .price-card:nth-child(2){ --i: 1; }
.pricing-grid[data-anim] .price-card:nth-child(3){ --i: 2; }
.pricing-grid[data-anim] .price-card:nth-child(4){ --i: 3; }
.pricing-grid[data-anim="pending"] .price-card{ opacity: 0; }
.pricing-grid[data-anim="pending"] .price-features li{ opacity: 0; }
.pricing-grid[data-anim="in"] .price-card{
  animation: svc-rise 1s var(--ease-soft) both;
  animation-delay: calc(var(--i) * .14s);
}
.pricing-grid[data-anim="in"] .price-features li{
  animation: svc-item .55s var(--ease-soft) both;
  animation-delay: calc(var(--i) * .14s + .6s + var(--j) * .07s);
}
@media (max-width: 1024px){ .price-card:hover{ translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce){
  .price-card::after, .featured-tag::after, .toggle-label[data-term-label="6"]::after,
  .price-amount span.term-3, .price-amount span.term-6{ animation: none; }
  .price-card:hover{ translate: none; }
  .coach-frame-glow{ animation: none; }
}

/* process — vertical stepper with scroll-linked progress line */
.process-timeline{ position: relative; margin-top: 3rem; }
.process-list{ position: relative; }
.timeline-track{
  position: absolute; left: 27px; width: 2px;
  background: var(--line);
  border-radius: 2px;
  /* top/height are set by JS to run exactly from the first dot's centre to the last */
}
.timeline-fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background: linear-gradient(to bottom, var(--gold-bright), var(--gold));
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(201,164,76,.55);
  transition: height .15s linear;
}
.process-item{
  --spot: rgba(201,164,76,.14);
  position: relative; z-index: 0; overflow: hidden;
  display:grid; grid-template-columns: 56px 1fr; gap: 2rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem 0;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background .4s ease, border-color .4s ease, box-shadow .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.process-item:last-child{ margin-bottom: 0; }
.process-item::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius: inherit; pointer-events:none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 62%);
  opacity: 0; transition: opacity .45s ease;
}
.process-item:hover{
  background: rgba(244,241,234,0.03);
  border-color: rgba(201,164,76,.4);
  box-shadow: 0 34px 60px -32px rgba(0,0,0,.75), 0 0 60px -18px rgba(201,164,76,.5);
  transform: translateY(-5px);
}
.process-item:hover::before{ opacity: 1; }
.process-item.is-active{
  border-color: rgba(201,164,76,.4);
  background: rgba(244,241,234,0.02);
  box-shadow: 0 26px 50px -30px rgba(0,0,0,.6), 0 0 40px -20px rgba(201,164,76,.35);
  animation: process-glow-pulse 3.4s ease-in-out infinite;
}
.process-item.is-active:hover{
  box-shadow: 0 34px 60px -32px rgba(0,0,0,.75), 0 0 66px -14px rgba(201,164,76,.6);
  animation-play-state: paused;
}
@keyframes process-glow-pulse{
  0%, 100%{ box-shadow: 0 26px 50px -30px rgba(0,0,0,.6), 0 0 40px -20px rgba(201,164,76,.32); }
  50%{ box-shadow: 0 26px 50px -30px rgba(0,0,0,.6), 0 0 56px -16px rgba(201,164,76,.5); }
}
.process-marker{ position: relative; z-index: 1; display:flex; justify-content:center; padding-top: .1rem; }
.process-dot{
  width: 56px; height: 56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink-faint);
  background: #121212;
  border: 1px solid var(--line-strong);
  transition: color .5s ease, background .5s ease, border-color .5s ease, box-shadow .5s ease, transform .5s var(--ease-soft);
}
.process-item.is-active .process-dot{
  color: #14110a;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,164,76,0.12), 0 10px 26px -8px rgba(201,164,76,0.6);
  transform: scale(1.05);
}
.process-body{ padding-top: .3rem; }
.process-item h3{ font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0 0 .5rem; transition: color .4s ease; }
.process-item p{ color: var(--ink-dim); margin:0; max-width: 60ch; line-height: 1.6; }
.process-item.is-active h3{ color: var(--gold-bright); }
@media (prefers-reduced-motion: reduce){
  .process-dot, .timeline-fill{ transition: none; }
  .process-item.is-active{ animation: none; }
}

/* results */
.results-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.result-card{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  background: linear-gradient(165deg, rgba(244,241,234,0.035), rgba(244,241,234,0.008));
  overflow: hidden;
  transition: border-color .4s ease, transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background .4s ease;
}
.result-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .5s var(--ease-soft);
}
.result-card:hover{
  border-color: rgba(201,164,76,.5);
  background: linear-gradient(165deg, rgba(201,164,76,.08), rgba(201,164,76,.015));
  transform: translateY(-6px);
  box-shadow: 0 26px 46px -26px rgba(0,0,0,.65);
}
.result-card:hover::before{ transform: scaleX(1); }
.result-icon{
  display:flex; align-items:center; justify-content:center;
  width: 42px; height: 42px; margin-bottom: 1.1rem;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(201,164,76,0.35);
  background: radial-gradient(circle at 30% 30%, rgba(201,164,76,0.16), rgba(201,164,76,0) 70%);
  transition: transform .45s var(--ease-soft), border-color .35s ease, box-shadow .35s ease;
}
.result-icon svg{ width: 20px; height: 20px; }
.result-card:hover .result-icon{
  transform: translateY(-3px) scale(1.06);
  border-color: var(--gold);
  box-shadow: 0 8px 22px -8px rgba(201,164,76,0.55);
}
.result-num-row{ line-height:1; }
.result-num, .result-num-text{
  font-family: var(--font-display); font-weight:700; font-size: 2.4rem; color: var(--gold);
  display:inline-block; line-height:1; transition: text-shadow .5s ease;
  font-variant-numeric: tabular-nums;
}
.result-num.counted{ text-shadow: 0 0 24px rgba(201,164,76,0.55); }
.result-num-text{ font-size: 2rem; }
.result-card .stat-suffix{ font-size: 2.4rem; }
.result-card p{ color: var(--ink-dim); font-size: .88rem; margin: .7rem 0 0; line-height:1.5; }

/* faq accordion */
#faq{ position: relative; overflow: hidden; }
#faq::before, #faq::after{
  content:''; position:absolute; z-index:0; border-radius:50%; filter: blur(100px); pointer-events:none;
}
#faq::before{ width: 460px; height: 460px; top: -140px; right: -120px;
  background: radial-gradient(circle, rgba(201,164,76,.14), transparent 70%); }
#faq::after{ width: 420px; height: 420px; bottom: -160px; left: 10%;
  background: radial-gradient(circle, rgba(166,51,71,.16), transparent 70%); }
#faq .container{ position: relative; z-index: 1; }
.faq-head{ text-align: center; max-width: 560px; margin: 0 auto; }
.faq-head .kicker{ justify-content: center; font-size: 1.02rem; letter-spacing: .16em; }
.faq-head .h2{ position: relative; max-width: none; margin: 0 auto 1.5rem; padding-bottom: 1.15rem; transition-delay: .12s; }
.faq-head .h2::after{
  content:''; position:absolute; left:50%; bottom:0; transform: translateX(-50%);
  width:0; height:2px; border-radius:2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  transition: width .8s var(--ease-soft) .55s;
}
.faq-head .h2.in-view::after{ width: 84px; }
.accordion{ margin-top: 2.5rem; display:flex; flex-direction:column; gap: 1.1rem; }
.accordion-item{
  position: relative; z-index:0; overflow:hidden;
  --spot: rgba(201,164,76,.15);
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(244,241,234,.05), rgba(244,241,234,.008) 60%),
    #0e0e0f;
  box-shadow: 0 20px 40px -32px rgba(0,0,0,.6);
  transition: border-color .4s ease, box-shadow .5s var(--ease-soft), background .4s ease, transform .5s var(--ease-soft);
}
.accordion-item::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius: inherit; pointer-events:none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 62%);
  opacity: 0; transition: opacity .45s ease;
}
.accordion-item::after{
  content:''; position:absolute; left:0; top:14%; bottom:14%; width:3px; z-index:-1;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  border-radius: 0 3px 3px 0;
  opacity: 0; transition: opacity .4s ease;
}
.accordion-item:hover::before{ opacity: 1; }
.accordion-item:hover::after,
.accordion-item.open::after{ opacity: 1; }
.accordion-item > *{ position: relative; z-index: 1; }
.accordion-item:hover{
  border-color: rgba(201,164,76,.32);
  transform: translateY(-3px);
  box-shadow: 0 30px 54px -34px rgba(0,0,0,.7);
}
.accordion-item.open{
  border-color: rgba(201,164,76,.5);
  box-shadow: 0 30px 58px -32px rgba(0,0,0,.7), 0 0 46px -22px rgba(201,164,76,.4);
}
.accordion-trigger{
  width:100%; border:none; background:none; cursor:pointer; color: var(--ink);
  display:grid; grid-template-columns: 38px 1fr 44px; align-items:center; gap: 1.4rem;
  padding: 1.65rem 1.9rem; text-align:left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
}
.accordion-num{
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  color: var(--gold); opacity: .55; letter-spacing: .02em;
  display: inline-block;
  transform: translateX(-26px); opacity: 0;
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.accordion-item.in-view .accordion-num{ opacity: .55; transform: translateX(0); transition-delay: .12s; }
.accordion-item:hover .accordion-num,
.accordion-item.open .accordion-num{ opacity: 1; }
.accordion-item:hover .accordion-num{ transform: scale(1.12); }
.accordion-question{
  display:inline-block; font-size: 1.45rem;
  transform: translateX(-26px); opacity: 0;
  transition: opacity .6s var(--ease-soft), color .35s ease, transform .6s var(--ease-soft);
}
.accordion-item.in-view .accordion-question{ opacity: 1; transform: translateX(0); transition-delay: .18s; }
.accordion-item:hover .accordion-question{ transform: translateX(5px); }
.accordion-item.open .accordion-question{ color: var(--gold-bright); }
.accordion-icon{
  width: 44px; height: 44px; flex-shrink: 0;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(201,164,76,0.4);
  background: radial-gradient(circle at 30% 30%, rgba(201,164,76,0.2), rgba(201,164,76,0.02) 70%);
  box-shadow: 0 0 0 5px rgba(201,164,76,0.045);
  font-family: var(--font-body); font-weight:400; font-size: 1.55rem; line-height:1;
  opacity: 0; transform: translateX(26px);
  transition: transform .4s var(--ease-soft), background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease, opacity .6s var(--ease-soft);
}
.accordion-item.in-view .accordion-icon{ opacity: 1; transform: translateX(0); transition-delay: .24s; }
.accordion-item:hover .accordion-icon{
  border-color: var(--gold);
  transform: scale(1.08);
  box-shadow: 0 10px 24px -8px rgba(201,164,76,.5), 0 0 0 5px rgba(201,164,76,0.08);
}
.accordion-item.open .accordion-icon{
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: var(--gold);
  color: #14110a;
  box-shadow: 0 10px 26px -8px rgba(201,164,76,.6), 0 0 0 5px rgba(201,164,76,0.1);
}
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); }
.accordion-panel-inner{
  margin: 0 1.9rem 0 calc(38px + 1.4rem + 1.9rem);
  padding: .1rem 0 1.6rem;
  border-top: 1px solid var(--line);
}
.accordion-panel p{
  color: var(--ink-dim); margin: 0; padding-top: 1.1rem; max-width: 60ch; font-size: 1rem; line-height: 1.75;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .45s ease, transform .45s ease;
}
.accordion-item.open .accordion-panel p{ opacity: 1; transform: translateY(0); transition-delay: .12s; }

/* entrance stagger for the FAQ list as it scrolls into view */
.accordion .accordion-item:nth-child(1){ transition-delay: .05s; }
.accordion .accordion-item:nth-child(2){ transition-delay: .13s; }
.accordion .accordion-item:nth-child(3){ transition-delay: .21s; }
.accordion .accordion-item:nth-child(4){ transition-delay: .29s; }
.accordion .accordion-item:nth-child(5){ transition-delay: .37s; }

/* soft breathing glow while a question is open */
@keyframes accordion-glow-pulse{
  0%, 100%{ box-shadow: 0 30px 58px -32px rgba(0,0,0,.7), 0 0 40px -24px rgba(201,164,76,.32); }
  50%{ box-shadow: 0 30px 58px -32px rgba(0,0,0,.7), 0 0 56px -20px rgba(201,164,76,.5); }
}
.accordion-item.open{ animation: accordion-glow-pulse 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .accordion-icon, .accordion-item, .accordion-panel p, .accordion-question, .accordion-num{ transition: none; }
  .accordion-item.open{ animation: none; }
}

/* contact */
.contact-section{ border-bottom:none; }
.contact-split{ display:grid; grid-template-columns: 0.9fr 1.4fr; gap: 4rem; }
.contact-intro .pull-quote{ margin-top: 2.25rem; }
.contact-form{ margin-top: .5rem; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-field{ margin-bottom: 1.25rem; }
.form-field label{ display:block; font-size: .82rem; color: var(--ink-dim); margin-bottom: .5rem; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; background: var(--bg-alt); border: 1px solid var(--line-strong); color: var(--ink);
  padding: .85rem .9rem; font-family: var(--font-body); font-size: .92rem; border-radius: 2px;
  transition: border-color .25s ease, background .25s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline: none; border-color: var(--gold); background: #17171a;
}
.form-submit{ margin-top: .5rem; }
.form-note{ font-size: .78rem; color: var(--ink-faint); margin-top: 1rem; max-width: 50ch; }

/* footer */
.footer{ padding: 4rem 0 1.5rem; }
.footer-inner{ display:grid; grid-template-columns: 1.3fr 2fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.footer-brand p{ color: var(--ink-faint); font-size: .88rem; margin-top: 1rem; max-width: 32ch; }
.footer-links{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-links h4{ font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem; font-weight: 600; }
.footer-links a{ display:block; font-size: .9rem; color: var(--ink-dim); margin-bottom: .7rem; transition: color .25s ease; }
.footer-links a:hover{ color: var(--gold); }
.footer-bottom{ padding-top: 1.5rem; display:flex; justify-content:space-between; font-size: .8rem; color: var(--ink-faint); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal-up{
  opacity:0; transform: translateY(26px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
.reveal-up.in-view{ opacity:1; transform: translateY(0); }
.reveal-item{ opacity:0; transform: translateY(16px); transition: opacity .9s var(--ease-soft) .5s, transform .9s var(--ease-soft) .5s; }
.hero.loaded .reveal-item{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .split{ grid-template-columns: 1fr; }
  .coach-grid{ grid-template-columns: 1fr; }
  .coach-frame{ max-width: 340px; }
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
  .services-grid{ grid-template-columns: 1fr; }
  .results-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-glass{ flex-wrap: wrap; gap: 1.5rem; }
  .glass-stat{ flex: 1 1 auto; min-width: 45%; }
  .glass-divider{ display:none; }
  .footer-inner{ grid-template-columns: 1fr; gap: 2.5rem; }
  .why-grid{ grid-template-columns: 1fr; gap: 1.25rem; }
  .contact-split{ grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 720px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .menu-toggle{ display:flex; }
  .credential-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: 1fr 1fr; }
  .process-item{ grid-template-columns: 40px 1fr; gap: 1rem; }
  .process-dot{ width: 40px; height: 40px; font-size: .95rem; }
  .timeline-track{ left: 19px; }
  .accordion-trigger{ grid-template-columns: 1fr 38px; gap: .9rem; padding: 1.3rem 1.3rem; font-size: 1.1rem; }
  .accordion-question{ font-size: 1.1rem; }
  .accordion-num{ display:none; }
  .accordion-icon{ width: 38px; height: 38px; font-size: 1.3rem; }
  .accordion-panel-inner{ margin: 0 1.3rem; padding: .1rem 0 1.35rem; }
  .hero{ padding-top: 1.5rem; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
  .hero-glass{ padding: 1.5rem; }
  .hero-actions .btn{ flex: 1 1 100%; justify-content:center; text-align:center; }
  .hero-photo{ display: none; }
}

/* mobile nav drawer */
.nav-links.open{
  display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0;
  width: min(78vw, 320px); background: var(--bg-alt); border-left: 1px solid var(--line);
  padding: 6rem 2rem 2rem; gap: 1.75rem; z-index: 850;
  animation: slideIn .35s var(--ease);
}
@keyframes slideIn{ from{ transform: translateX(100%);} to{ transform: translateX(0);} }
.menu-toggle.active span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
/* Foundation has no 6-month option: keep that message quiet instead of price-sized */
.price-amount span.not-offered{
  font-family: var(--font-body); font-size: .95rem; font-weight: 500; line-height: 1.5;
  color: var(--ink-faint); letter-spacing: 0;
}

/* Pricing cards: brighter, easier-to-read text */
.price-tagline{ color: #c9c3ba; font-size: .86rem; }
.price-features li{ color: #e6e1d8; font-size: .88rem; }
.price-features em{ color: var(--gold-bright); }
.price-amount small{ color: #bdb7ae; font-size: .76rem; }
.price-footnote{ color: #b3ada4; font-size: .78rem; line-height: 1.55; }
.price-amount span.not-offered{ color: #bdb7ae; }

/* Photo sits further left now, so keep the stats card content clear of it:
   the three stats share the left part of the card and the photo owns the right. */
@media (min-width: 1025px){
  .hero-glass{ padding-right: clamp(2rem, calc(var(--container) * .4), 36rem); }
}

/* ==========================================================================
   Layout alignment — one centred column for the whole page
   Every section now shares the nav / Services container: same left and right
   edges, balanced two-column layouts, no empty half-screens.
   (Services and Pricing are intentionally untouched.)
   ========================================================================== */
:root{ --gutter: clamp(1.25rem, 4vw, 2.5rem); }

/* Hero: content and stats card line up with the nav edges */
.hero-inner{ max-width: calc(var(--container) - 2 * var(--gutter)); }
.hero-glass{ max-width: calc(var(--container) - 2 * var(--gutter)); width: 100%; }

/* Desktop only: multi-column sections */
@media (min-width: 1025px){
  /* About: heading on the left, story on the right */
  .about-split{ grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .about-split .h2{ max-width: 16ch; margin-top: 1.25rem; }
  .about-split .split-content{ max-width: none; }
  .about-split .lead, .about-split .body-text{ max-width: none; }
  .about-split .pull-quote{ max-width: none; }

  /* Coach: bigger portrait, text fills the column */
  .coach-grid{ grid-template-columns: 1fr 1.6fr; gap: clamp(3rem, 5vw, 5rem); align-items: stretch; }
  /* text column matches the photo's height: quote lines up with the top, button with the bottom */
  .coach-content{ display:flex; flex-direction:column; }
  .coach-content .btn{ margin-top: auto; align-self: flex-start; }
  .coach-content .pull-quote{ max-width: none; margin-top: 0; }
  .coach-content .body-text{ max-width: 84ch; }

  /* FAQ: heading centered on top, questions centered below */
  .faq-split{ display:block; }
  .faq-head{ max-width: none; }
  .faq-head .h2{ white-space: nowrap; font-size: clamp(2.6rem, 3.9vw, 3.85rem); }
  .faq-split .accordion{ max-width: 800px; margin: 2.75rem auto 0; }
}
/* ==========================================================================
   Athletes Harry has coached (left column of "What is Built")
   ========================================================================== */
.athlete-block{ margin-top: 2.75rem; max-width: 640px; }
.athlete-heading{
  margin: 0 0 1.1rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--ink-dim);
}
.athlete-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.athlete-card{ margin: 0; }
.athlete-card:nth-child(even){ margin-top: 2.75rem; }   /* right column sits lower, so the grid isn't a flat table */
.athlete-photo{
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(201,164,76,.16), rgba(201,164,76,0) 65%),
    linear-gradient(160deg, #1b1a19, #0d0d0e);
  transition: border-color .4s ease;
}
.athlete-ph{
  position:absolute; left:50%; bottom:0; width: 66%; transform: translateX(-50%);
  color: rgba(201,164,76,.32);
}
.athlete-photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.05);
  transition: filter .5s ease, transform .9s var(--ease);
}
.athlete-card:hover .athlete-photo{ border-color: rgba(201,164,76,.6); }
.athlete-card:hover .athlete-photo img{ filter: none; transform: scale(1.04); }
.athlete-card figcaption{ display:flex; flex-direction:column; gap:.15rem; padding-top: .75rem; }
.athlete-card figcaption strong{
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; color: var(--ink);
}
.athlete-card figcaption span{ font-size: .82rem; color: var(--gold); line-height: 1.4; }
@media (hover: none){
  .athlete-photo img{ filter: none; }   /* no hover on touch screens, so show colour straight away */
}

/* ==========================================================================
   Transformations: before / after sliders
   ========================================================================== */
.tf-filters{ display:flex; flex-wrap:wrap; gap: .6rem; margin-top: 2rem; }
.tf-chip{
  border: 1px solid var(--line-strong); border-radius: 2px;
  padding: .55rem 1.15rem; font-size: .86rem; font-weight: 500; color: var(--ink-dim);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.tf-chip:hover{ border-color: var(--gold); color: var(--gold); }
.tf-chip[aria-pressed="true"]{ background: var(--gold); border-color: var(--gold); color: #14110a; }
.tf-chip:focus-visible, .tf-expand:focus-visible, .tf-lightbox-close:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.tf-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.4rem; margin-top: 2.5rem; }   /* 3 frames per row, each holds before + after */
@media (max-width: 1024px){ .tf-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .tf-grid{ grid-template-columns: 1fr; } }
.tf-grid .ba-tag{ bottom: .55rem; padding: .22rem .5rem; font-size: .68rem; }
.tf-grid .ba-tag-before{ left: .55rem; }
.tf-grid .ba-tag-after{ left: calc(50% + .55rem); }
.tf-grid .tf-expand{ top: .5rem; right: .5rem; width: 30px; height: 30px; }
.tf-grid .tf-meta h3{ font-size: 1.1rem; }
.tf-meta h3{ font-size: 1.2rem; }
.tf-card[hidden]{ display:none; }
.tf-card.tf-show{ animation: tf-in .55s var(--ease-soft); }
@keyframes tf-in{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

.ba{
  --pos: 50%;
  /* before and after sit side by side in ONE frame, both fully visible (no slider, nothing hidden) */
  position: relative; aspect-ratio: 8/5; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  border: 1px solid var(--line-strong); background: var(--gold);
  user-select: none; -webkit-user-select: none;
}
.ba-img{ position:relative; overflow:hidden; min-width:0; }
.ba-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center top; pointer-events:none;
}
.ba-before{ background: linear-gradient(160deg, #1a1a1c, #0e0e0f); }
.ba-after{
  background: radial-gradient(ellipse at 50% 40%, rgba(201,164,76,.24), rgba(201,164,76,0) 70%), linear-gradient(160deg, #241d10, #0e0d0a);
}
.ba-ph{ position:absolute; left:50%; bottom:0; transform: translateX(-50%); }
.ba-before .ba-ph{ width: 54%; color: rgba(244,241,234,.22); }
.ba-after .ba-ph{ width: 64%; color: rgba(236,201,120,.55); }

.ba-tag{
  position:absolute; bottom: .8rem; z-index: 3; pointer-events:none;
  padding: .3rem .65rem; font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  background: rgba(10,10,11,.72); backdrop-filter: blur(4px);
}
.ba-tag-before{ left: .8rem; color: var(--ink); }
.ba-tag-after{ left: calc(50% + .8rem); color: var(--gold-bright); }

.ba-handle, .ba-range{ display:none; }   /* slider controls no longer needed */
.ba-handle{
  position:absolute; top:0; bottom:0; left: var(--pos); z-index: 4;
  width: 2px; margin-left: -1px; pointer-events:none;
  background: var(--gold-bright); box-shadow: 0 0 18px rgba(236,201,120,.45);
}
.ba-knob{
  position:absolute; top:50%; left:50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%; background: var(--gold); color: #14110a;
  border: 3px solid rgba(10,10,11,.85); box-shadow: 0 6px 20px rgba(0,0,0,.5);
  transition: transform .3s var(--ease);
}
.ba-knob svg{ width: 20px; height: 20px; }
.ba:hover .ba-knob{ transform: scale(1.08); }

/* invisible range input laid over the photo: handles mouse, touch and keyboard for us */
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; z-index: 5;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-range::-webkit-slider-runnable-track{ height: 100%; background: transparent; }
.ba-range::-moz-range-track{ height: 100%; background: transparent; }
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width: 2px; height: 100vh; background: transparent; border:0; }
.ba-range::-moz-range-thumb{ width: 2px; height: 100vh; background: transparent; border:0; }
.ba-range:focus-visible ~ .ba-handle .ba-knob{ outline: 2px solid var(--ink); outline-offset: 3px; }

.tf-expand{
  position:absolute; top: .7rem; right: .7rem; z-index: 6;
  width: 36px; height: 36px; display:flex; align-items:center; justify-content:center;
  color: var(--ink); background: rgba(10,10,11,.72); backdrop-filter: blur(4px);
  border: 1px solid var(--line-strong); border-radius: 2px;
  transition: border-color .25s ease, color .25s ease;
}
.tf-expand svg{ width: 16px; height: 16px; }
.tf-expand:hover{ border-color: var(--gold); color: var(--gold); }

.tf-meta{ padding-top: .9rem; }
.tf-meta h3{ margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.tf-meta p{ margin: .2rem 0 0; font-size: .88rem; color: var(--gold); }

.tf-empty{ margin: 2.5rem 0 0; color: var(--ink-dim); }
.tf-foot{ display:flex; align-items:center; justify-content:space-between; gap: 1.5rem 2rem; flex-wrap:wrap; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.tf-disclaimer{ margin: 0; font-size: .82rem; color: var(--ink-faint); max-width: 52ch; }

/* lightbox */
body.tf-open{ overflow: hidden; height: 100vh; }
/* ===== SERVICE LEAD MODALS (Online / In-Person / Contest Prep) ===== */
.lead-modal{
  position: fixed; inset: 0; z-index: 950; /* above the nav (800) and mobile menu (850) so it's never clipped behind the header */
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease, ease), visibility .35s;
}
.lead-modal.open{ opacity: 1; visibility: visible; pointer-events: auto; }
.lead-modal-backdrop{
  position: absolute; inset: 0; background: rgba(6,6,7,.96); backdrop-filter: blur(10px);
}

/* Card: two-column on desktop — a story/benefits panel next to the form.
   This is the shell; .lead-modal-aside is the left panel, .lead-modal-main is the form panel. */
.lead-modal-inner{
  position: relative; z-index: 1; width: min(940px, 100%);
  max-height: 88vh;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong); border-radius: 16px;
  overflow: hidden; /* the card itself never scrolls — only .lead-modal-scroll does — so the close button below stays fixed in place */
  box-shadow: 0 60px 120px -30px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.04) inset;
  transform: translateY(18px) scale(.97); opacity: 0;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.lead-modal.open .lead-modal-inner{ transform: translateY(0) scale(1); opacity: 1; }

/* Wraps the aside + form panel. This is what actually scrolls, so the
   close button (a sibling, positioned against .lead-modal-inner) always
   stays put in the corner instead of scrolling away with the content. */
.lead-modal-scroll{
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  max-height: 88vh; overflow-y: auto;
}

.lead-modal-close{
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(10,10,11,.55); backdrop-filter: blur(6px);
  color: var(--ink); font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s ease, color .25s ease, transform .25s ease, background .25s ease;
}
.lead-modal-close:hover{ border-color: var(--gold); color: var(--gold); background: rgba(201,164,76,.12); transform: rotate(90deg); }
.lead-modal-inner-specialty .lead-modal-close:hover{ border-color: var(--oxblood-bright); color: #f0a0ae; background: rgba(166,51,71,.14); }

/* Left panel: identity + reassurance, so the modal reads as a considered
   product moment rather than a bare form dropped on the page. */
.lead-modal-aside{
  position: relative; overflow: hidden;
  padding: 2.75rem 2.15rem 2.25rem;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(201,164,76,.16), transparent 60%),
    linear-gradient(170deg, #17140d 0%, #101011 55%, var(--bg) 100%);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.lead-modal-inner-specialty .lead-modal-aside{
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(166,51,71,.22), transparent 60%),
    linear-gradient(170deg, #1a1113 0%, #101011 55%, var(--bg) 100%);
}
.lead-modal-aside::before{
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-bright));
}
.lead-modal-inner-specialty .lead-modal-aside::before{ background: linear-gradient(180deg, var(--oxblood), var(--oxblood-bright)); }

.lead-modal-icon{
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,164,76,.1); border: 1px solid rgba(201,164,76,.35);
  color: var(--gold-bright); margin-bottom: 1.5rem;
}
.lead-modal-icon svg{ width: 24px; height: 24px; }
.lead-modal-icon-specialty{ background: rgba(166,51,71,.14); border-color: rgba(224,86,109,.45); color: #f0a0ae; }
.kicker-specialty{ color: #f0a0ae; }
.kicker-specialty .kicker-line{ background: #f0a0ae; }

.lead-modal-title{
  font-family: var(--font-display); font-weight: 700; letter-spacing: .01em;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.08; color: var(--ink); margin: .65rem 0 .7rem;
}
.lead-modal-sub{ color: var(--ink-dim); font-size: .9rem; line-height: 1.6; margin: 0 0 1.75rem; }

/* Reassurance list at the foot of the panel */
.lead-modal-points{ list-style: none; margin: auto 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .85rem; }
.lead-modal-points li{ display: flex; align-items: flex-start; gap: .65rem; font-size: .84rem; color: var(--ink-dim); line-height: 1.5; }
.lead-modal-points li::before{
  content: '✓'; flex: none; width: 18px; height: 18px; margin-top: .1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,164,76,.14); border: 1px solid rgba(201,164,76,.4);
  color: var(--gold-bright); font-size: .62rem; font-weight: 700;
}
.lead-modal-inner-specialty .lead-modal-points li::before{
  background: rgba(166,51,71,.18); border-color: rgba(224,86,109,.5); color: #f0a0ae;
}

/* Right panel: the form itself */
.lead-modal-main{ position: relative; padding: 2.75rem 2.5rem 2.5rem; }
.lead-form-view{ display: block; }

.lead-form .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lead-form .form-field{ margin-bottom: 1.1rem; }
.lead-form .form-field label{
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .55rem;
  transition: color .2s ease;
}
.lead-form .form-field:focus-within label{ color: var(--gold-bright); }
.lead-modal-inner-specialty .lead-form .form-field:focus-within label{ color: #f0a0ae; }

.lead-form .form-field input,
.lead-form .form-field textarea{
  width: 100%; background: rgba(255,255,255,.03); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 9px; padding: .85rem 1rem; font-family: inherit; font-size: .92rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.lead-form .form-field input::placeholder,
.lead-form .form-field textarea::placeholder{ color: var(--ink-faint); }
.lead-form .form-field input:hover,
.lead-form .form-field textarea:hover{ border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.lead-form .form-field input:focus,
.lead-form .form-field textarea:focus{
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,164,76,.14);
  background: rgba(255,255,255,.045);
}
.lead-modal-inner-specialty .lead-form .form-field input:focus,
.lead-modal-inner-specialty .lead-form .form-field textarea:focus{
  border-color: var(--oxblood-bright); box-shadow: 0 0 0 4px rgba(166,51,71,.16);
}

/* ---- Custom dropdown (replaces the native <select> popup) ---- */
.cselect{ position: relative; }
.cselect-native{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.cselect-trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 9px; padding: .85rem 1rem; font-family: inherit; font-size: .92rem; text-align: left;
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cselect-trigger:hover{ background: rgba(255,255,255,.05); }
.cselect.open .cselect-trigger,
.cselect-trigger:focus-visible{
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,164,76,.14);
}
.lead-modal-inner-specialty .cselect.open .cselect-trigger,
.lead-modal-inner-specialty .cselect-trigger:focus-visible{
  border-color: var(--oxblood-bright); box-shadow: 0 0 0 4px rgba(166,51,71,.16);
}
.cselect-caret{ width: 16px; height: 16px; flex: none; color: var(--ink-dim); transition: transform .3s cubic-bezier(.2,.8,.2,1), color .2s ease; }
.cselect.open .cselect-caret{ transform: rotate(180deg); color: var(--gold-bright); }
.lead-modal-inner-specialty .cselect.open .cselect-caret{ color: #f0a0ae; }

.cselect-options{
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  background: #17140d; border: 1px solid var(--line-strong); border-radius: 10px;
  padding: .4rem; list-style: none; margin: 0;
  max-height: 240px; overflow-y: auto;
  box-shadow: 0 26px 50px -14px rgba(0,0,0,.65);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility .2s;
}
.cselect.open .cselect-options{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.cselect-option{
  padding: .65rem .8rem; border-radius: 4px; font-size: .9rem; color: var(--ink-dim);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.cselect-option:hover, .cselect-option.is-active{ background: rgba(201,164,76,.12); color: var(--ink); }
.cselect-option.is-selected{ color: var(--gold-bright); font-weight: 600; }
.lead-modal-inner-specialty .cselect-option:hover,
.lead-modal-inner-specialty .cselect-option.is-active{ background: rgba(166,51,71,.16); color: var(--ink); }
.lead-modal-inner-specialty .cselect-option.is-selected{ color: #f0a0ae; }
.cselect-options::-webkit-scrollbar{ width: 6px; }
.cselect-options::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 3px; }

.form-submit{
  width: 100%; margin-top: .75rem; position: relative;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.5rem; border-radius: 9px; border: none;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em; color: #17140d;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  box-shadow: 0 16px 32px -12px rgba(201,164,76,.55);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.form-submit:hover:not([disabled]){ transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(201,164,76,.65); }
.form-submit-specialty{ background: linear-gradient(135deg, var(--oxblood), var(--oxblood-bright)); color: var(--ink); box-shadow: 0 16px 32px -12px rgba(166,51,71,.55); }
.form-submit-specialty:hover:not([disabled]){ box-shadow: 0 20px 40px -10px rgba(166,51,71,.65); }
.form-submit-spinner{
  width: 18px; height: 18px; display: none; animation: lead-spin .8s linear infinite;
}
.form-submit[disabled] .form-submit-spinner{ display: inline-block; }
.form-submit[disabled] .form-submit-label{ opacity: .7; }
.form-submit[disabled]{ cursor: default; pointer-events: none; }
@keyframes lead-spin{ to{ transform: rotate(360deg); } }

.lead-form-note{ font-size: .8rem; color: var(--ink-faint); margin-top: 1rem; min-height: 1.1em; }
.lead-form-note.is-error{ color: #e2685f; animation: lead-shake .4s ease; }
@keyframes lead-shake{
  0%, 100%{ transform: translateX(0); }
  20%{ transform: translateX(-4px); }
  40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
}

/* ---- Animated "thank you" success screen ---- */
.lead-success-view[hidden],
.lead-form-view[hidden]{ display: none !important; }
.lead-success-view:not([hidden]){
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.5rem 0 .5rem;
  animation: lead-success-in .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes lead-success-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
.success-check{ width: 84px; height: 84px; margin-bottom: 1.5rem; color: var(--gold-bright); }
.success-check-specialty{ color: #f0a0ae; }
.success-check svg{ width: 100%; height: 100%; }
.success-check-circle{
  stroke: currentColor; stroke-width: 2.5; opacity: .35;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: lead-circle-draw .6s ease forwards .1s;
}
.success-check-tick{
  stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: lead-tick-draw .4s ease forwards .55s;
}
@keyframes lead-circle-draw{ to{ stroke-dashoffset: 0; } }
@keyframes lead-tick-draw{ to{ stroke-dashoffset: 0; } }
.lead-success-title{
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); margin: 0 0 .6rem;
}
.lead-success-text{ color: var(--ink-dim); font-size: .95rem; max-width: 38ch; margin: 0 0 1.75rem; }
.lead-success-close{ min-width: 140px; }

@media (max-width: 820px){
  .lead-modal{ padding: 0; align-items: flex-end; }
  .lead-modal-inner{ width: 100%; max-height: 96vh; border-radius: 18px 18px 0 0; }
  .lead-modal-scroll{ grid-template-columns: 1fr; max-height: 96vh; }

  /* Compact the marketing panel drastically so the form is reachable
     almost immediately — a full-height story panel above the fields is
     what was forcing a long, unprofessional-feeling scroll on phones. */
  .lead-modal-aside{
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 3.5rem 1.35rem 1.1rem;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 .9rem;
  }
  .lead-modal-aside::before{ width: 100%; height: 3px; bottom: auto; }
  .lead-modal-icon{ order: 0; width: 38px; height: 38px; margin-bottom: 0; }
  .lead-modal-icon svg{ width: 18px; height: 18px; }
  .lead-modal-aside .kicker{ order: 1; margin: 0; font-size: .68rem; }
  .lead-modal-title{ order: 2; flex: 1 0 100%; font-size: 1.3rem; margin: .35rem 0 0; }
  .lead-modal-sub{ display: none; }
  .lead-modal-points{
    order: 3;
    flex: 1 0 100%; margin: .9rem 0 0; padding-top: .9rem;
    flex-direction: row; flex-wrap: wrap; gap: .5rem;
  }
  .lead-modal-points li{
    flex: 0 1 auto; align-items: center; gap: .4rem;
    font-size: .68rem; line-height: 1.3; white-space: normal;
    padding: .35rem .65rem .35rem .35rem;
    border: 1px solid var(--line); border-radius: 999px;
  }
  .lead-modal-points li::before{ margin-top: 0; width: 14px; height: 14px; font-size: .5rem; }
  .lead-modal-main{ padding: 1.5rem 1.35rem 1.75rem; }
  .lead-modal-close{
    top: .85rem; right: .85rem; width: 34px; height: 34px;
    background: rgba(10,10,11,.75);
  }
  /* keeps the fixed close button legible over whatever has scrolled beneath it */
  .lead-modal-inner::before{
    content:''; position:absolute; top:0; left:0; right:0; height: 64px; z-index: 4;
    background: linear-gradient(180deg, rgba(6,6,7,.55), transparent); pointer-events: none;
  }
}
@media (max-width: 640px){
  .lead-form .form-row{ grid-template-columns: 1fr; }
}

.tf-lightbox{
  position: fixed; inset: 0; z-index: 1600;
  display:flex; align-items:center; justify-content:center; padding: 4vh 4vw;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .35s var(--ease-soft), visibility .35s var(--ease-soft);
}
.tf-lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.tf-lightbox-backdrop{ position:absolute; inset:0; background: rgba(6,6,7,.92); backdrop-filter: blur(6px); }
.tf-lightbox-inner{ position: relative; z-index: 1; width: min(1100px, 94vw, calc(76vh * 1.6)); }
.tf-lightbox-close{
  position:absolute; top: -46px; right: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink); font-size: 1.4rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .25s ease, color .25s ease;
}
.tf-lightbox-close:hover{ border-color: var(--gold); color: var(--gold); }
.tf-lightbox-cap{ margin: .9rem 0 0; font-size: .92rem; color: var(--ink-dim); text-align: center; }

/* ---- responsive ---- */
@media (min-width: 1025px){
  /* the text on the right stays in view while you scroll past the athlete photos on the left */
  .about-split .split-content{ position: sticky; top: 7.5rem; align-self: start; }
}
@media (max-width: 720px){
  .tf-foot .btn{ width: 100%; }
  .athlete-block{ max-width: none; }
}
/* ==========================================================================
   Hero headline — typing animation (driven by script.js)
   ========================================================================== */
.hero-title.tw{ position: relative; }
.hero-title.tw .reveal-line{ overflow: visible; }
/* cancel the old slide-up rules for the letter/word spans */
.hero-title.tw .reveal-line span{ transform: none !important; }
.hero-title.tw .reveal-line .tw-ch{ display: inline; transition: none; opacity: 0; }
.hero-title.tw .reveal-line .tw-word{ display: inline-block; white-space: nowrap; transition: none; }
.hero-title.tw .reveal-line .tw-ch.on{ opacity: 1; transition: opacity .12s linear; }
.hero-title .tw-caret{
  position: absolute; left: 0; top: 0; width: .055em; min-width: 4px;
  background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(236,201,120,.5);
  pointer-events: none; will-change: transform;
  animation: tw-blink .9s steps(1) infinite;
}
.hero-title .tw-caret.typing{ animation: none; }     /* solid while typing */
.hero-title .tw-caret.gone{ animation: none; opacity: 0; transition: opacity .5s ease; }
@keyframes tw-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* Smoother hero: keep the drifting glows and rings on their own GPU layers
   so they don't force the page to repaint while the headline types. */
.mesh-blob{ will-change: transform; transform: translateZ(0); }
.hero-plate{ transform: translateZ(0); }

/* ==========================================================================
   Hero photo — cinematic entrance
   One orchestrated sequence (no looping gimmicks):
     0.10s  gold glow fades up
     0.15s  rings ease in
     0.30s  Coach Harry and his frame rise into place (long, soft ease-out)
     1.60s  a single sweep of light passes across the frame, once
   After that the scene is calm: slow ring rotation, a very gentle glow breath,
   and a light, smoothed parallax that follows the mouse.
   Only opacity / transform / background-position are animated.
   ========================================================================== */
.hero:not(.loaded) .hero-photo,
.hero:not(.loaded) .hero-plate{ opacity: 0; }

.hero.loaded .hero-photo{
  animation: photo-rise 2s cubic-bezier(.22,1,.36,1) .3s both;
  will-change: transform, opacity;
}
@keyframes photo-rise{
  from{ opacity: 0; transform: translate3d(0, 46px, 0); }
  60%{  opacity: 1; }
  to{   opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero.loaded .hero-plate{ animation: plate-in 2s cubic-bezier(.16,1,.3,1) .15s both; }
@keyframes plate-in{
  from{ opacity: 0; scale: .88; }
  to{   opacity: 1; scale: 1; }
}

/* the glow behind him fades up first, then breathes very gently */
.hero .blob-1{
  animation:
    drift 22s ease-in-out infinite alternate,
    glow-in 2.2s ease .1s both,
    glow-breathe 7s ease-in-out 2.4s infinite alternate;
}
@keyframes glow-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes glow-breathe{ from{ opacity: 1; } to{ opacity: .8; } }

/* one soft sweep of light across the round frame (plays once) */
.hero-photo::after{
  content:''; position:absolute; left:50%; bottom:0; z-index:2; pointer-events:none;
  width: calc(var(--disc-r) * 2); aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%);
  background: linear-gradient(105deg,
    rgba(255,236,190,0) 42%, rgba(255,236,190,.20) 50%, rgba(255,236,190,0) 58%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  opacity: 0;
}
.hero.loaded .hero-photo::after{ animation: frame-sweep 1.9s cubic-bezier(.45,0,.2,1) 1.6s 1 both; }
@keyframes frame-sweep{
  0%{   opacity: 0; background-position: 100% 0; }
  15%{  opacity: 1; }
  85%{  opacity: 1; }
  100%{ opacity: 0; background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero.loaded .hero-photo, .hero.loaded .hero-plate,
  .hero .blob-1, .hero.loaded .hero-photo::after{ animation: none; opacity: 1; }
  .hero-photo::after{ display: none; }
}

/* ==========================================================================
   IFBB Pros made by Coach Harry — moving carousel
   ========================================================================== */
.ifbb{ border-top: 1px solid var(--line); overflow: hidden; padding-bottom: clamp(4rem, 7vw, 6.5rem); }
.ifbb-head{ margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ifbb-head .h2{ max-width: none; margin-bottom: 1rem; }
.ifbb-gold{ color: var(--gold); }
.ifbb-sub{ margin: 0; max-width: 56ch; color: var(--ink-dim); font-size: 1.05rem; }

.ifbb-marquee{
  --card-w: clamp(210px, 17vw, 290px);
  --card-gap: clamp(.9rem, 1.4vw, 1.4rem);
  position: relative;
  cursor: grab;
  touch-action: pan-y;                 /* vertical scroll still works on phones */
  user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ifbb-marquee.is-dragging{ cursor: grabbing; }
.ifbb-track{
  display: flex; width: max-content;
  margin: 0; padding: 0; list-style: none;
  will-change: transform;
}
.ifbb-card{
  flex: 0 0 var(--card-w); width: var(--card-w);
  margin-right: var(--card-gap);        /* margin (not gap) so the loop is seamless */
}
.ifbb-photo{
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(201,164,76,.18), rgba(201,164,76,0) 65%),
    linear-gradient(160deg, #1b1a19, #0d0d0e);
  transition: border-color .4s ease, transform .5s var(--ease), box-shadow .5s ease;
}
.ifbb-ph{
  position: absolute; left: 50%; bottom: 0; width: 66%; transform: translateX(-50%);
  color: rgba(201,164,76,.3);
}
.ifbb-photo img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transition: transform .9s var(--ease);
  -webkit-user-drag: none; pointer-events: none;
}
/* readable caption over the bottom of the photo */
.ifbb-photo::after{
  content: ''; position: absolute; inset: 40% 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,11,0), rgba(10,10,11,.92));
}
.ifbb-badge{
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  padding: .28rem .6rem; border-radius: 3px;
  background: rgba(10,10,11,.72); border: 1px solid rgba(201,164,76,.55);
  color: var(--gold-bright); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ifbb-cap{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: .1rem; padding: 1rem 1.1rem 1.1rem;
}
.ifbb-cap strong{
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--ink);
}
.ifbb-cap span{ font-size: .8rem; color: var(--gold); line-height: 1.4; }

/* gold light sweep + caption underline on hover (colour photos stay colour) */
.ifbb-photo::before{
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(232,199,110,.22), transparent);
  transform: skewX(-12deg); opacity: 0;
}
.ifbb-cap strong{ position: relative; padding-bottom: .35rem; }
.ifbb-cap strong::after{
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold); transition: width .5s var(--ease);
}
@media (hover: hover){
  .ifbb-card:hover .ifbb-photo{
    border-color: rgba(201,164,76,.75); transform: translateY(-8px);
    box-shadow: 0 28px 50px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(201,164,76,.25), 0 0 40px -10px rgba(201,164,76,.45);
  }
  .ifbb-card:hover .ifbb-photo img{ transform: scale(1.06); }
  .ifbb-card:hover .ifbb-photo::before{ animation: ifbb-sweep .9s ease forwards; }
  .ifbb-card:hover .ifbb-cap strong::after{ width: 2.5rem; }
}
@keyframes ifbb-sweep{
  0%{ left: -60%; opacity: 0; } 20%{ opacity: 1; } 100%{ left: 130%; opacity: 0; }
}

/* reduced motion: no auto-scroll, just a normal swipeable row */
.ifbb-marquee.is-static{ overflow-x: auto; cursor: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
.ifbb-marquee.is-static .ifbb-track{ padding: 0 var(--gutter); }
@media (max-width: 720px){
  .ifbb-marquee{ --card-w: 62vw; }
}

/* ==========================================================================
   IFBB Pros — bigger centred heading, "See all Pros" button + overlay
   ========================================================================== */
.ifbb-head{ text-align: center; }
.ifbb-head .kicker{ justify-content: center; font-size: 1.02rem; letter-spacing: .16em; }
.ifbb-head .h2{
  max-width: none; margin: 0 auto 1.25rem;
  font-size: clamp(2.8rem, 5.6vw, 5.2rem); line-height: 1;
}
.ifbb-sub{ margin: 0 auto; max-width: 62ch; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.6; }
.ifbb-cta{ margin-top: clamp(2rem, 4vw, 3rem); display: flex; justify-content: center; }

.pros-modal{
  position: fixed; inset: 0; z-index: 1600;
  background: rgba(8,8,9,.99);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease-soft), visibility .4s var(--ease-soft);
}
.pros-modal.open{ opacity: 1; visibility: visible; pointer-events: auto; }
body.pros-open{ overflow: hidden; }
.pros-scroll{ position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.pros-inner{ max-width: var(--container); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--gutter) 4rem; }
.pros-top{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.pros-title{
  margin: .4rem 0 .5rem; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em;
}
.pros-count{ margin: 0; color: var(--ink-dim); font-size: 1rem; }
.pros-close{
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink); font-size: 1.7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s ease, color .25s ease, transform .35s var(--ease);
}
.pros-close:hover{ border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }
.pros-close:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.pros-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none;
}
.pros-grid .ifbb-card{ flex: none; width: auto; margin: 0; }
.pros-modal.open .pros-grid .ifbb-card{ animation: pros-in .6s var(--ease-soft) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes pros-in{ from{ opacity: 0; transform: translateY(24px); } to{ opacity: 1; transform: none; } }
@media (max-width: 720px){
  .pros-grid{ grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .pros-cap-small, .pros-grid .ifbb-cap strong{ font-size: 1.15rem; }
  .pros-grid .ifbb-badge{ top: .55rem; left: .55rem; font-size: .58rem; padding: .22rem .45rem; }
  .pros-grid .ifbb-cap{ padding: .7rem .75rem .8rem; }
}
@media (prefers-reduced-motion: reduce){ .pros-modal.open .pros-grid .ifbb-card{ animation: none; } }

/* ==========================================================================
   Athlete photo lightbox (click a card to enlarge)
   ========================================================================== */
.ifbb-card{ cursor: zoom-in; }
.lightbox{
  position: fixed; inset: 0; z-index: 1800;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6,6,7,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease-soft), visibility .35s var(--ease-soft);
}
.lightbox.open{ opacity: 1; visibility: visible; pointer-events: auto; }
body.lightbox-open{ overflow: hidden; }
.lightbox-fig{
  position: relative; margin: 0; max-width: min(92vw, 760px); max-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  transform: scale(.94) translateY(12px); transition: transform .5s var(--ease);
}
.lightbox.open .lightbox-fig{ transform: none; }
.lightbox-img{
  display: block; max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
  border: 1px solid rgba(201,164,76,.45);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), 0 0 60px -20px rgba(201,164,76,.35);
}
.lightbox-cap{ display: flex; flex-direction: column; align-items: center; gap: .15rem; padding-top: 1rem; text-align: center; }
.lightbox-cap strong{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; color: var(--ink); }
.lightbox-cap span{ font-size: .95rem; color: var(--gold); }
.lightbox-close{
  position: absolute; top: clamp(.9rem, 2.5vw, 1.75rem); right: clamp(.9rem, 2.5vw, 1.75rem); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(10,10,11,.7); color: var(--ink);
  font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: border-color .25s ease, color .25s ease, transform .35s var(--ease);
}
.lightbox-close:hover{ border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }
.lightbox-close:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .lightbox, .lightbox-fig{ transition: none; } }

/* ==========================================================================
   PREMIUM TYPE, COLOUR & BUTTONS  (override layer - keep at the end of the file)
   ========================================================================== */
:root{
  --ink: #fbf8f1;
  --ink-dim: #d6cfc3;            /* body copy: much brighter than before */
  --ink-faint: #a49d92;
  --gold: #d4af5a;
  --gold-bright: #f5d98a;
  --gold-deep: #a9782a;
  --gold-grad: linear-gradient(135deg, #fff1c1 0%, #f3d27f 28%, #d4a94a 55%, #b98a2e 78%, #f6dc94 100%);
  --text-grad: linear-gradient(180deg, #ffffff 0%, #fff4d6 45%, #f0cf86 100%);
}
@property --ang{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }

body{ font-size: 17px; }

/* ---- headings: bright white-to-champagne gradient, gold accent words glow ---- */
.h2{
  background: var(--text-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 18px rgba(212,175,90,.14));
  letter-spacing: -.005em;
}
.ifbb-gold, .h2 .accent, .hero-title .accent{
  background: linear-gradient(100deg, #f7dc8f 0%, #e2b652 40%, #fff0bd 60%, #d4a94a 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gold-shimmer 6s ease-in-out infinite;
}
.hero-title .accent{ filter: drop-shadow(0 0 22px rgba(236,201,120,.35)); }
@keyframes gold-shimmer{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }

/* ---- kicker labels: brighter, glowing gold with a lit line ---- */
.kicker{
  color: var(--gold-bright); font-weight: 700; font-size: .84rem; letter-spacing: .2em;
  text-shadow: 0 0 18px rgba(245,217,138,.4);
}
.kicker-line{ height: 2px; width: 34px; background: var(--gold-grad); box-shadow: 0 0 10px rgba(245,217,138,.6); }

/* ---- body text ---- */
.lead{ color: #fff; }
.body-text, .ifbb-sub, .hero-sub{ color: var(--ink-dim); }
.body-text em, .lead em{ color: var(--gold-bright); font-weight: 600; }
.credential p, .result-card p, .process-body p{ color: var(--ink-dim); }
.credential-mark{ color: var(--gold-bright); }

/* ---- serif quotes in molten gold ---- */
.pull-quote{
  background: linear-gradient(120deg, #fff0bd 0%, #f0c96b 45%, #d9a94b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  border-left: 3px solid; border-image: var(--gold-grad) 1;
}

/* ---- card / step titles ---- */
.service-card h3, .process-body h3, .why-card h3{ color: #fff; text-shadow: 0 0 24px rgba(245,217,138,.16); }
.accordion-question{ color: #fff; }
.price-amount span{ background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.price-amount span.not-offered{ background: none; -webkit-text-fill-color: #bdb7ae; color: #bdb7ae; }
.stat-num, .stat-num-text, .result-num, .result-num-text{ color: var(--gold-bright); text-shadow: 0 0 26px rgba(245,217,138,.4); }
.footer-links h4{ color: var(--gold-bright); }
.footer-links a{ color: var(--ink-dim); }
.footer-links a:hover{ color: var(--gold-bright); }

/* ---- nav: brighter links with a gold glow underline ---- */
.nav-links a{ color: #efe9dc; font-weight: 500; }
.nav-links a:hover{ color: var(--gold-bright); text-shadow: 0 0 16px rgba(245,217,138,.5); }
.brand-mark{ background: var(--text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-sub{ color: var(--gold-bright); }

/* ==========================================================================
   BUTTONS - "molten gold" pill: metallic gradient, light sweep, orbiting
   light ring and an arrow that slides out on hover
   ========================================================================== */
.btn{
  position: relative; isolation: isolate;
  border-radius: 999px;
  font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  gap: .7rem;
}
.btn::before{                                   /* orbiting light ring */
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--ang), rgba(255,241,193,0) 0 55%, #fff1c1 78%, #ffffff 86%, rgba(255,241,193,0) 100%);
  animation: btn-orbit 3.6s linear infinite; opacity: .95;
}
@keyframes btn-orbit{ to{ --ang: 360deg; } }
.btn::after{                                    /* arrow */
  content: '\2192'; font-size: 1.15em; letter-spacing: 0; line-height: 1;
  transition: transform .45s var(--ease);
}
.btn:hover::after{ transform: translateX(6px); }
.btn.form-submit::after, .btn-ghost::after{ content: none; }

.btn-primary{
  padding: 1.1rem 2.3rem;
  color: #1c1406;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat,
    var(--gold-grad);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(120,80,10,.28),
    0 12px 34px -10px rgba(236,201,120,.6), 0 0 0 1px rgba(255,241,193,.25);
  transition: background-position 1s var(--ease), transform .4s var(--ease), box-shadow .4s ease;
}
.btn-primary:hover{
  background-position: 160% 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(120,80,10,.3),
    0 18px 46px -10px rgba(245,217,138,.8), 0 0 0 1px rgba(255,241,193,.5);
}

.btn-outline, .btn-ghost{
  color: var(--gold-bright);
  background: linear-gradient(#0e0d0b, #0e0d0b) padding-box, var(--gold-grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 24px -8px rgba(245,217,138,.35);
  transition: color .3s ease, box-shadow .4s ease, transform .4s var(--ease), background .4s ease;
}
.btn-outline::before, .btn-ghost::before{ display: none; }
.btn-ghost{ padding: .7rem 1.5rem; font-size: .74rem; }
.btn-outline:hover, .btn-ghost:hover{
  color: #1c1406;
  background: var(--gold-grad) padding-box, var(--gold-grad) border-box;
  box-shadow: 0 10px 34px -8px rgba(245,217,138,.7);
}
.btn-ghost:hover{ color: #1c1406; }
@media (prefers-reduced-motion: reduce){ .btn::before, .ifbb-gold, .h2 .accent, .hero-title .accent{ animation: none; } }

/* ==========================================================================
   PRICING CARDS - readable buttons on hover + bolder, brighter card text
   ========================================================================== */
/* the old white "sheen" overlay sat on top of the label and washed it out - use the ring only */
.btn.price-cta::before{
  position: absolute; inset: -2px; top: -2px; left: -2px; width: auto; height: auto; z-index: -1;
  background: conic-gradient(from var(--ang), rgba(255,241,193,0) 0 55%, var(--ring-c, #fff1c1) 78%, #fff 86%, rgba(255,241,193,0) 100%);
  transform: none; transition: none; border-radius: inherit;
}
.btn.price-cta:hover::before{ left: -2px; }
.price-cta{ color-scheme: dark; }

/* label always readable: dark on gold, white on red - in every state */
.btn-primary, .btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active,
.price-card .btn-primary, .price-card .btn-primary:hover, .price-card:hover .btn-primary{ color: #1a1204; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn-outline, .btn-ghost, .price-card .btn-outline.price-cta, .price-card:hover .btn-outline.price-cta{ color: var(--gold-bright); text-shadow: none; }
.btn-outline:hover, .btn-ghost:hover, .price-card .btn-outline.price-cta:hover, .price-card:hover .btn-outline.price-cta:hover{ color: #1a1204; text-shadow: 0 1px 0 rgba(255,255,255,.35); }

/* Signature: same premium build as the gold buttons, in deep ruby */
.price-card.signature .btn-primary, .price-card.signature .btn-primary:hover{
  color: #fff; text-shadow: 0 1px 2px rgba(60,0,10,.55);
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat,
    linear-gradient(135deg, #e0566d 0%, #b8324a 45%, #7f1d31 75%, #c9435a 100%);
  --ring-c: #ffc2cc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(60,0,10,.35), 0 12px 34px -10px rgba(224,86,109,.6), 0 0 0 1px rgba(255,150,165,.3);
}
.price-card.signature .btn-primary:hover{ background-position: 160% 0, 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(60,0,10,.4), 0 18px 46px -10px rgba(224,86,109,.85), 0 0 0 1px rgba(255,170,185,.5); }

/* ---- text inside the cards: brighter + bolder ---- */
.price-card h3{ color: #fff; font-weight: 800; letter-spacing: .02em; text-shadow: 0 0 22px rgba(245,217,138,.2); }
.price-card.featured h3{ background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
.price-card.signature h3{ color: #ffc4cd; text-shadow: 0 0 22px rgba(224,86,109,.35); }
.price-tagline{ color: #e9e3d8; font-weight: 500; font-size: .9rem; }
.price-features li{ color: #f6f1e7; font-weight: 600; font-size: .92rem; line-height: 1.5; }
.price-features li:hover{ color: #fff; }
.price-features em{ color: var(--gold-bright); font-weight: 800; }
.price-card.signature .price-features em{ color: #ffb3c0; }
.price-features li::before{ border-color: rgba(245,217,138,.7); }
.price-features li::after{ border-color: var(--gold-bright); }
.price-amount span{ font-weight: 800; }
.price-card.signature .price-amount span{ background: none; -webkit-text-fill-color: #ffb3c0; color: #ffb3c0; }
.price-amount small, .price-card .price-amount small{ color: #e2dccf; font-weight: 500; font-size: .8rem; }

/* ==========================================================================
   "Book Consultation" thank-you screen - animated celebration
   ========================================================================== */
.lead-success-view.celebrate{ position: relative; overflow: hidden; min-height: 360px; justify-content: center; }
.celebrate > *:not(.success-confetti){ position: relative; z-index: 1; }
.success-confetti{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.success-confetti span{
  position: absolute; left: 50%; top: 32%; opacity: 0;
  animation: confetti-pop 1.5s cubic-bezier(.15,.7,.25,1) forwards;
}
@keyframes confetti-pop{
  0%{ opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(0); }
  12%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 90px)) rotate(var(--r)) scale(1); }
}
.celebrate .success-check{ position: relative; width: 96px; height: 96px; margin-bottom: 1.4rem; filter: drop-shadow(0 0 22px rgba(245,217,138,.6)); animation: check-pop .7s var(--ease) both; }
@keyframes check-pop{ 0%{ transform: scale(.4); opacity: 0; } 60%{ transform: scale(1.12); } 100%{ transform: scale(1); opacity: 1; } }
.celebrate .success-check-circle{ opacity: 1; stroke: var(--gold-bright); }
.success-ring{
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-bright); opacity: 0;
  animation: ring-out 2.2s ease-out infinite;
}
.success-ring:nth-child(2){ animation-delay: .7s; } .success-ring:nth-child(3){ animation-delay: 1.4s; }
@keyframes ring-out{ 0%{ transform: scale(.9); opacity: .7; } 100%{ transform: scale(2.4); opacity: 0; } }
.success-kicker{
  margin: 0 0 .5rem; font-size: .78rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-bright);
  animation: rise .6s var(--ease) .5s both;
}
.celebrate .lead-success-title{
  font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.05;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: rise .7s var(--ease) .62s both;
}
.celebrate .lead-success-text{ font-size: 1.05rem; color: #efe9dc; animation: rise .7s var(--ease) .78s both; }
.celebrate .lead-success-text strong{ color: var(--gold-bright); }
.success-pill{
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid rgba(245,217,138,.45); background: rgba(245,217,138,.08); color: #f6ecd0; font-size: .8rem; font-weight: 600;
  animation: rise .7s var(--ease) .92s both;
}
.success-pill i{ width: 8px; height: 8px; border-radius: 50%; background: #5be38a; box-shadow: 0 0 0 0 rgba(91,227,138,.7); animation: live-dot 1.6s ease-out infinite; }
@keyframes live-dot{ to{ box-shadow: 0 0 0 10px rgba(91,227,138,0); } }
.celebrate .lead-success-close{ animation: rise .7s var(--ease) 1.05s both; }
@keyframes rise{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .success-ring, .success-pill i{ animation: none; } }

/* ==========================================================================
   BUTTONS v2 - satin-gold pill with glass gloss, idle shimmer and an
   arrow "chip" that flips to point up-right on hover
   ========================================================================== */
.btn:not(.btn-ghost):not(.form-submit){ padding: .8rem .8rem .8rem 2rem; gap: 1.1rem; font-size: .82rem; letter-spacing: .14em; }
.btn.form-submit{ padding: 1.1rem 2.4rem; }

.btn:not(.form-submit):not(.btn-ghost)::after{
  content: '\2192'; flex: none;
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font-size: 1.05rem; letter-spacing: 0; line-height: 1;
  transition: transform .5s var(--ease), background .35s ease, color .35s ease, box-shadow .35s ease;
}
.btn:not(.form-submit):not(.btn-ghost):hover::after{ transform: rotate(-45deg) scale(1.06); }

/* primary: smooth satin gold (no harsh dark band), top gloss, moving shine */
.btn-primary{
  background:
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%) -180% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 48%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #ffeab0 0%, #f6d47a 38%, #e3b649 72%, #cf9d34 100%);
  animation: btn-idle-shine 4.8s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(140,95,15,.35), inset 0 0 0 1px rgba(255,241,193,.35),
    0 14px 30px -10px rgba(236,190,90,.65), 0 0 46px -12px rgba(245,217,138,.55);
  color: #1a1204; text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
@keyframes btn-idle-shine{ 0%,55%{ background-position: -180% 0, 0 0, 0 0; } 100%{ background-position: 180% 0, 0 0, 0 0; } }
.btn-primary::after{ background: #1a1204; color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(245,217,138,.35), 0 4px 10px -3px rgba(0,0,0,.5); }
.btn-primary:hover{
  animation-duration: 1.6s; transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(140,95,15,.4), inset 0 0 0 1px rgba(255,241,193,.6),
    0 22px 44px -10px rgba(245,200,100,.85), 0 0 64px -8px rgba(245,217,138,.75);
}
.btn-primary:hover::after{ background: #000; box-shadow: inset 0 0 0 1px var(--gold-bright), 0 0 14px rgba(245,217,138,.6); }

/* outline: frosted-glass dark pill, gold hairline, soft inner glow */
.btn-outline{
  color: #f8e3a2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 55%) padding-box,
    linear-gradient(#0d0c0a, #0d0c0a) padding-box,
    linear-gradient(135deg, #fff1c1, #d4a94a 45%, #f6dc94 75%, #b98a2e) border-box;
  border: 1.5px solid transparent;
  box-shadow: inset 0 0 22px -8px rgba(245,217,138,.4), 0 10px 30px -14px rgba(245,217,138,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-outline::after{ color: #1a1204; background: var(--gold-grad); box-shadow: 0 4px 12px -3px rgba(245,217,138,.55); }
.btn-outline:hover, .price-card .btn-outline.price-cta:hover{
  color: #1a1204;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 52%) padding-box,
    linear-gradient(180deg, #ffeab0, #f6d47a 40%, #e0b046 100%) padding-box,
    linear-gradient(#fff, #fff) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 40px -10px rgba(245,200,100,.75), 0 0 56px -8px rgba(245,217,138,.6);
  transform: translateY(-3px);
}
.btn-outline:hover::after{ background: #1a1204; color: var(--gold-bright); box-shadow: 0 0 14px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce){ .btn-primary{ animation: none; } }

/* ==========================================================================
   BUTTONS - static finish: no shine sweep, no orbiting ring, no arrow spin
   ========================================================================== */
.btn::before, .btn.price-cta::before, .price-cta::before{ display: none !important; animation: none !important; }
.btn-primary, .btn-primary:hover, .price-card.signature .btn-primary, .price-card.signature .btn-primary:hover{ animation: none !important; }
.btn-primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 48%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #ffeab0 0%, #f6d47a 38%, #e3b649 72%, #cf9d34 100%);
}
.btn-primary:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.14) 48%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #fff0c2 0%, #f9dc8a 38%, #e9bf55 72%, #d6a53c 100%);
  background-position: 0 0, 0 0;
}
.price-card.signature .btn-primary, .price-card.signature .btn-primary:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 48%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #e0566d 0%, #b8324a 55%, #8c2036 100%);
  background-position: 0 0, 0 0;
}
.btn:not(.form-submit):not(.btn-ghost):hover::after{ transform: none; }

/* normal system cursor, buttons never move */
.cursor-dot, .cursor-ring{ display: none !important; }
.btn, .btn:hover, .btn:focus, .btn:active{ transform: none !important; }

/* Coaching plans heading - same centred, large style as "IFBB Pros made by Coach Harry" */
#pricing .kicker{ justify-content: center; font-size: 1.02rem; letter-spacing: .16em; }
#pricing .h2{
  max-width: 1050px; margin: 0 auto 1.25rem; text-align: center;
  font-size: clamp(2.6rem, 5.2vw, 4.8rem); line-height: 1.02;
}
#pricing .pricing-note{ max-width: 62ch; margin: 0 auto; text-align: center; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.6; color: var(--ink-dim); font-weight: 400; }
#pricing .pricing-toggle{ width: fit-content; margin-left: auto; margin-right: auto; }
#pricing .pricing-toggle{ display: flex; margin: 2rem auto 3.25rem; }

/* ---- Coaching plans: balanced heading + tidy badge/card alignment ---- */
#pricing .h2{
  max-width: 880px; font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.06;
  text-wrap: balance; margin-bottom: 1.1rem;
}
#pricing .pricing-note{ max-width: 52ch; font-size: clamp(1.05rem, 1.35vw, 1.2rem); text-wrap: balance; }
#pricing[style]{ padding-top: clamp(6.5rem, 9vw, 8rem) !important; }
#pricing .kicker{ margin-bottom: 1.1rem; }
#pricing .pricing-toggle{ margin: 1.75rem auto 3.5rem; }

.featured-tag{
  z-index: 3; color: #1a1204; font-size: .68rem; letter-spacing: .1em; text-shadow: none;
  padding: .75rem 1.15rem 1.15rem; line-height: 1; text-align: center; white-space: nowrap;
}
.price-card.featured{ padding-top: calc(2.25rem + 8px); }

/* ==========================================================================
   Transformations — "result card" look (before / after in one frame)
   Before is slightly muted, After is full colour with a gold seal between them.
   ========================================================================== */
#transformations{
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201,164,76,.10), transparent 70%),
    radial-gradient(ellipse 50% 30% at 100% 60%, rgba(201,164,76,.05), transparent 70%);
}
.tf-grid .tf-card{
  position: relative;
  background: linear-gradient(180deg, #161618 0%, #0e0e0f 100%);
  border: 1px solid rgba(201,164,76,.22);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .45s var(--ease-soft, ease), border-color .35s ease, box-shadow .45s ease;
}
.tf-grid .tf-card::before{                       /* gold edge that lights up on hover */
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:6;
  background: linear-gradient(90deg, transparent, var(--gold-bright, #ecc978), transparent);
  opacity:.55; transition: opacity .35s ease;
}
.tf-grid .tf-card:hover{
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 26px 50px -22px rgba(201,164,76,.45), 0 0 0 1px rgba(201,164,76,.25);
}
.tf-grid .tf-card:hover::before{ opacity:1; }

.tf-grid .ba{ border: 0; gap: 0; background: #0a0a0b; border-radius: 0; }
.tf-grid .ba-img img{ transition: filter .6s ease, transform .9s var(--ease-soft, ease); }
.tf-grid .ba-before img{ filter: grayscale(.65) brightness(.82) contrast(1.05); }
.tf-grid .ba-after img{ filter: saturate(1.08) contrast(1.03); }
.tf-grid .tf-card:hover .ba-before img{ filter: grayscale(.15) brightness(.95); }
.tf-grid .tf-card:hover .ba-img img{ transform: scale(1.04); }

/* soft shade at top and bottom of each photo so labels always read */
.tf-grid .ba-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(8,8,9,.55) 0%, transparent 22%, transparent 70%, rgba(8,8,9,.5) 100%);
}

/* gold seam + arrow seal between the two photos */
.tf-grid .ba::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:3;
  background: linear-gradient(180deg, transparent, var(--gold-bright, #ecc978) 18%, var(--gold-bright, #ecc978) 82%, transparent);
  box-shadow: 0 0 14px rgba(236,201,120,.5);
}
.tf-grid .ba::after{
  content:""; position:absolute; left:50%; top:50%; z-index:4; width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:50%; border: 3px solid #0e0e0f;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12M13 6l6 6-6 6' fill='none' stroke='%2314110a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(236,201,120,.6);
  transition: transform .4s var(--ease-soft, ease);
}
.tf-grid .tf-card:hover .ba::after{ transform: scale(1.15) rotate(-360deg); }

/* labels move to the top: Before = quiet glass, After = solid gold */
.tf-grid .ba-tag{
  top: .6rem; bottom: auto; z-index: 5; border-radius: 3px;
  padding: .25rem .6rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.tf-grid .ba-tag-before{ left: .6rem; background: rgba(10,10,11,.7); color: var(--ink); border: 1px solid rgba(244,241,234,.18); }
.tf-grid .ba-tag-after{ left: calc(50% + .6rem); background: var(--gold); color: #14110a; backdrop-filter: none; }

/* expand button sits bottom-right so it never covers a label */
.tf-grid .tf-expand{ top: auto; bottom: .6rem; right: .6rem; width: 30px; height: 30px; border-radius: 50%; }

/* name + result strip */
.tf-grid .tf-meta{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem .8rem; flex-wrap:wrap;
  padding: .9rem 1rem 1rem; border-top: 1px solid rgba(201,164,76,.18);
}
.tf-grid .tf-meta h3{ font-size: 1.15rem; letter-spacing: .01em; }
.tf-grid .tf-meta p{
  margin: 0; padding: .28rem .7rem; font-size: .76rem; font-weight: 600; line-height: 1.2;
  color: var(--gold-bright, #ecc978); background: rgba(201,164,76,.10);
  border: 1px solid rgba(201,164,76,.35); border-radius: 999px;
}

@media (prefers-reduced-motion: reduce){
  .tf-grid .tf-card, .tf-grid .ba-img img, .tf-grid .ba::after{ transition: none; }
  .tf-grid .tf-card:hover{ transform: none; }
  .tf-grid .tf-card:hover .ba-img img, .tf-grid .tf-card:hover .ba::after{ transform: none; }
}

/* ---- Plans page: two-option layout ---- */
.pricing-grid.pricing-duo{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; gap: 2rem; }
.pricing-duo .price-card h3{ font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
.pricing-duo .price-amount span{ font-size: clamp(2.1rem, 3vw, 2.9rem); }
.pricing-duo .price-features li{ font-size: 1rem; }
@media (max-width: 760px){ .pricing-grid.pricing-duo{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Plans popup: Basic / Medium / Premium with included (tick) and not included (cross)
   ========================================================================== */
.pl-modal{
  --accent: var(--gold); --accent-bright: var(--gold-bright);
  position: fixed; inset: 0; z-index: 900; display:flex; align-items:center; justify-content:center;
  padding: 1.25rem; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .35s ease, visibility .35s;
}
.pl-modal.open{ opacity:1; visibility:visible; pointer-events:auto; }
.pl-modal.is-harry{ --accent: var(--oxblood-bright); --accent-bright: #e8a3ae; }
.pl-backdrop{ position:absolute; inset:0; background: rgba(6,6,7,.9); backdrop-filter: blur(6px); }
.pl-dialog{
  position:relative; z-index:1; width: min(1180px, 100%); max-height: calc(100vh - 2.5rem);
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, #151517, #0d0d0e); border: 1px solid rgba(201,164,76,.3); border-radius: 10px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
  transform: translateY(24px) scale(.98); transition: transform .45s var(--ease-soft, ease);
}
.pl-modal.open .pl-dialog{ transform:none; }
.pl-scroll{ overflow-y:auto; padding: clamp(1.25rem, 3vw, 2.25rem); overscroll-behavior: contain; }
.pl-close{
  position:absolute; top:.75rem; right:.75rem; z-index:3; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; line-height:1;
  color: var(--ink); background: rgba(10,10,11,.8); border: 1px solid var(--line-strong);
  transition: border-color .25s ease, color .25s ease, transform .3s ease;
}
.pl-close:hover{ border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }
.pl-close:focus-visible, .pl-tab:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.pl-heading{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.05; margin: .3rem 0 1.25rem; color: var(--ink); }

.pl-tabs{ display:inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(0,0,0,.35); margin-bottom: 1.5rem; }
.pl-tab{
  padding: .6rem 1.3rem; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--ink-dim);
  transition: background .25s ease, color .25s ease;
}
.pl-tab:hover{ color: var(--ink); }
.pl-tab[aria-selected="true"]{ background: var(--accent); color: #14110a; }
.pl-modal.is-harry .pl-tab[aria-selected="true"]{ color:#fff; }

.pl-panel[hidden]{ display:none; }
.pl-panel{ animation: pl-in .45s var(--ease-soft, ease); }
@keyframes pl-in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.pl-title{ margin:0; font-family: var(--font-display); font-weight:700; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--accent-bright); }
.pl-sub{ margin: .4rem 0 0; color: var(--ink-dim); max-width: 62ch; font-size: .95rem; }
.pl-legend{ display:flex; gap: 1.4rem; margin: 1.1rem 0 1.25rem; font-size: .8rem; color: var(--ink-dim); }
.pl-key{ display:inline-flex; align-items:center; gap:.5rem; }
.pl-key i{ width:18px; height:18px; border-radius:50%; display:inline-block; position:relative; }
.pl-key.yes i{ background: rgba(201,164,76,.16); border: 1px solid var(--accent); }
.pl-key.no i{ background: rgba(217,72,72,.16); border: 1px solid #d94848; }

.pl-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; align-items: stretch; }
.pl-card{
  position:relative; display:flex; flex-direction:column; padding: 1.6rem 1.4rem 1.4rem;
  background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .3s ease, transform .4s var(--ease-soft, ease), box-shadow .4s ease;
}
.pl-card:hover{ transform: translateY(-4px); border-color: var(--accent); }
.pl-card.pl-pop{
  border-color: var(--accent); background: linear-gradient(180deg, rgba(201,164,76,.09), rgba(255,255,255,.02));
  box-shadow: 0 30px 60px -34px rgba(201,164,76,.55);
}
.pl-modal.is-harry .pl-card.pl-pop{ background: linear-gradient(180deg, rgba(166,51,71,.16), rgba(255,255,255,.02)); box-shadow: 0 30px 60px -34px rgba(166,51,71,.7); }
.pl-tag{
  position:absolute; top:-12px; left:50%; transform: translateX(-50%); padding:.28rem .8rem; border-radius: 999px;
  background: var(--accent); color:#14110a; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.pl-modal.is-harry .pl-tag{ color:#fff; }
.pl-card h4{ margin:0; font-family: var(--font-display); font-weight:700; font-size: 1.7rem; color: var(--ink); }
.pl-tagline{ margin:.3rem 0 0; font-size:.82rem; color: var(--ink-faint); min-height: 2.4em; }
.pl-price{ margin: 1rem 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight:700; font-size: 2.3rem; line-height:1; color: var(--accent-bright); }
.pl-price small{ font-family: var(--font-body); font-weight:500; font-size:.8rem; color: var(--ink-faint); margin-left:.4rem; }

.pl-list{ list-style:none; margin:0 0 1.5rem; padding:0; flex:1; }
.pl-list li{ position:relative; display:block; padding: .62rem .5rem .62rem 2.1rem; font-size:.9rem; line-height:1.4; border-bottom: 1px solid rgba(244,241,234,.06); }
.pl-list li:last-child{ border-bottom:0; }
.pl-ico{ position:absolute; left:.25rem; top:.62rem; width:20px; height:20px; border-radius:50%; }
.pl-ico::after{ content:""; position:absolute; inset:0; }
/* included = tick */
.pl-list li.yes{ color: var(--ink); }
.pl-list li.yes .pl-ico{ background: rgba(201,164,76,.16); border:1px solid var(--accent); }
.pl-list li.yes .pl-ico::after{
  background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23ecc978' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pl-modal.is-harry .pl-list li.yes .pl-ico{ background: rgba(166,51,71,.2); }
.pl-modal.is-harry .pl-list li.yes .pl-ico::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23e8a3ae' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* NOT included = red cross, faded and struck through so it stands out */
.pl-list li.no{ color: var(--ink-faint); text-decoration: line-through; text-decoration-color: rgba(217,72,72,.6); background: rgba(217,72,72,.05); }
.pl-list li.no .pl-ico{ background: rgba(217,72,72,.16); border:1px solid #d94848; }
.pl-list li.no .pl-ico::after{
  background: no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23ff6b6b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pl-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; }
.pl-choose{ width:100%; justify-content:center; }
.pl-modal.is-harry .pl-card.pl-pop .btn-primary{ background: linear-gradient(180deg, #c04a60, var(--oxblood)); border-color: var(--oxblood-bright); color:#fff; }
.pl-note{ margin: 1.5rem 0 0; font-size:.78rem; color: var(--ink-faint); text-align:center; }

@media (max-width: 900px){
  .pl-grid{ grid-template-columns: 1fr; gap: 1.6rem; }
  .pl-tagline{ min-height:0; }
  .pl-tabs{ display:flex; } .pl-tab{ flex:1; padding:.6rem .5rem; }
}
@media (prefers-reduced-motion: reduce){
  .pl-modal, .pl-dialog, .pl-card, .pl-panel{ transition:none; animation:none; }
}

/* ---- Plans page: two cards, smaller and spaced out so both fit in one screen ---- */
#pricing.plans-duo[style]{ padding-top: clamp(5.5rem, 7vw, 6.5rem) !important; padding-bottom: 3rem; }
#pricing.plans-duo .h2{ font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 2.25rem; }
#pricing.plans-duo .kicker{ margin-bottom: .8rem; }
.pricing-grid.pricing-duo{ max-width: 900px; gap: clamp(2rem, 4vw, 3.5rem); }
.pricing-duo .price-card{ padding: 2.6rem 1.75rem 1.75rem; }
.pricing-duo .price-card h3{ font-size: clamp(1.4rem, 1.9vw, 1.65rem); }
.pricing-duo .price-tagline{ font-size: .8rem; }
.pricing-duo .price-amount{ margin: 1.1rem 0 1.15rem; padding-top: 1.1rem; min-height: 0; }
.pricing-duo .price-amount span{ font-size: clamp(1.9rem, 2.4vw, 2.3rem); }
.pricing-duo .price-features{ margin-bottom: 1.4rem; }
.pricing-duo .price-features li{ font-size: .9rem; padding: .5rem 0 .5rem 1.9rem; }
.pricing-duo .price-features li::before{ top: .55rem; }
.pricing-duo .price-features li::after{ top: .86rem; }
.pricing-duo .price-cta{ padding-top: .9rem; padding-bottom: .9rem; }
@media (min-width: 1025px) and (max-height: 820px){
  #pricing.plans-duo[style]{ padding-top: 5rem !important; }
  #pricing.plans-duo .h2{ margin-bottom: 1.5rem; font-size: 2.2rem; }
  .pricing-duo .price-card{ padding: 2.4rem 1.6rem 1.4rem; }
  .pricing-duo .price-features li{ padding: .38rem 0 .38rem 1.9rem; font-size: .86rem; }
  .pricing-duo .price-features li::before{ top: .43rem; }
  .pricing-duo .price-features li::after{ top: .74rem; }
}

/* ==========================================================================
   Hero — scaled down (less "zoomed"), single centred CTA, nav plans button
   ========================================================================== */
.hero{
  --photo-w: clamp(230px, calc(var(--container) * .27), 390px);
  --plate-w: calc(var(--container) * .37);
  --photo-b: 15%;
  --photo-up: 6%;
}
.hero-inner{ padding-top: calc(clamp(4rem, 5.5vw, 5.5rem) + 2.5rem); }   /* gap below nav: change the 2.5rem */
.hero-title{
  font-size: clamp(2.6rem, calc(var(--container) * .056), 5.1rem);
  margin-bottom: 1.4rem;
}
.hero-foot{ margin-bottom: 1.75rem; }
.hero-sub{ font-size: clamp(.98rem, 1.25vw, 1.06rem); max-width: 46ch; }
.hero-glass{ padding-top: 1.3rem; padding-bottom: 1.3rem; }
.glass-stat-icon{ width: 32px; height: 32px; margin-bottom: .6rem; }
.glass-stat-icon svg{ width: 15px; height: 15px; }
.stat-num, .stat-num-text, .stat-suffix{ font-size: clamp(1.6rem, 2.1vw, 2.05rem); }
.glass-stat p{ font-size: .8rem; margin-top: .35rem; }
@media (min-width: 1025px){
  .hero-glass{ padding-right: clamp(2rem, calc(var(--container) * .34), 31rem); }
}

/* one centred, wider "See Coaching Plans" button */
.hero-actions{ margin-top: 1.75rem; }
.hero-actions .btn{
  width: min(440px, 100%);
  justify-content: center;
  gap: 1.6rem;
}
.scroll-cue{ margin: 1.5rem auto 1.5rem; }
.scroll-cue span{ height: 30px; }

/* nav: See Coaching Plans sits beside Book Consultation */
.nav-actions{ display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.nav .btn.nav-plans{
  padding: .35rem .35rem .35rem 1.25rem; gap: .8rem;
  font-size: .7rem; letter-spacing: .12em; white-space: nowrap;
}
.nav .btn.nav-plans::after{ width: 1.8rem; height: 1.8rem; font-size: .85rem; }
@media (max-width: 1100px){ .nav-actions .nav-cta{ display: none; } }
@media (max-width: 720px){ .nav-actions{ display: none; } }


/* ---- Plans page: more breathing room (nav > heading > cards, and between cards) ---- */
#pricing.plans-duo[style]{ padding-top: clamp(8rem, 10vw, 9.5rem) !important; padding-bottom: 5rem; }
#pricing.plans-duo .kicker{ margin-bottom: 1.4rem; }
#pricing.plans-duo .h2{ margin-bottom: clamp(3.5rem, 5vw, 4.75rem); }
.pricing-grid.pricing-duo{ gap: clamp(2.5rem, 5vw, 4.5rem); max-width: 980px; }
@media (max-width: 760px){
  #pricing.plans-duo[style]{ padding-top: 6.5rem !important; }
  #pricing.plans-duo .h2{ margin-bottom: 2.5rem; }
  .pricing-grid.pricing-duo{ gap: 2.25rem; }
}


/* ---- Compare-plans modal: clear GREEN tick = included, RED cross = not included (both tabs) ---- */
.pl-list li.yes .pl-ico,
.pl-modal.is-harry .pl-list li.yes .pl-ico{
  background: #1fae5b; border: 1px solid #4ce08a;
  box-shadow: 0 0 0 3px rgba(31,174,91,.16), 0 0 12px rgba(31,174,91,.45);
}
.pl-list li.yes .pl-ico::after,
.pl-modal.is-harry .pl-list li.yes .pl-ico::after{
  background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pl-list li.no .pl-ico{
  background: #e03a3a; border: 1px solid #ff7373;
  box-shadow: 0 0 0 3px rgba(224,58,58,.14);
}
.pl-list li.no .pl-ico::after{
  background: no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pl-list li.no{ text-decoration-color: rgba(255,115,115,.7); background: rgba(224,58,58,.07); }
/* legend matches */
.pl-key.yes i, .pl-modal.is-harry .pl-key.yes i{ background: #1fae5b; border: 1px solid #4ce08a; }
.pl-key.no i{ background: #e03a3a; border: 1px solid #ff7373; }
.pl-key i::after{ content:""; position:absolute; inset:0; background: no-repeat center/10px; }
.pl-key.yes i::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pl-key.no i::after{ background-size: 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pl-key.yes{ color: #7be8a8; } .pl-key.no{ color: #ff8f8f; }


/* ==========================================================================
   Coach Harry "Signature" card + compare modal: black & champagne-gold
   (replaces the crimson/purple look so it sits with the rest of the site)
   ========================================================================== */
.price-card.signature{
  --ring-b: #f6dc94; --spot: rgba(245,217,138,.16);
  border-color: rgba(236,201,120,.55);
  background:
    radial-gradient(85% 42% at 50% 0%, rgba(236,201,120,.20), transparent 72%),
    linear-gradient(180deg, rgba(201,164,76,.09), transparent 55%),
    #0a0a0b;
  box-shadow: 0 34px 80px -40px rgba(236,201,120,.45), inset 0 1px 0 rgba(255,241,193,.14);
}
.price-card.signature:hover{ border-color: var(--gold-bright); box-shadow: 0 46px 90px -38px rgba(236,201,120,.6), inset 0 1px 0 rgba(255,241,193,.2); }
.price-card.signature .price-amount{ border-top-color: rgba(236,201,120,.28); }
.price-card.signature .price-features li::before{ border-color: rgba(236,201,120,.6); background: rgba(236,201,120,.1); }
.price-card.signature .price-features li::after{ border-color: var(--gold-bright); }
.price-card.signature .price-features li:hover::before{ background: var(--gold); }
.price-card.signature .price-features li:hover::after{ border-color: #1a1204; }
.price-card.signature .price-features em{ color: var(--gold-bright); }

.price-card.signature h3{
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; text-shadow: none;
}
.price-card.signature .price-amount span{
  background: none; -webkit-text-fill-color: #fff4d2; color: #fff4d2;
  text-shadow: 0 0 28px rgba(236,201,120,.45);
}
.signature-tag{
  background: linear-gradient(180deg, #ffeab0 0%, #f0c968 55%, #d4a23c 100%);
  color: #1a1204; box-shadow: 0 8px 18px -8px rgba(236,201,120,.6);
}
.price-card.signature .btn-primary, .price-card.signature .btn-primary:hover{
  color: #1a1204; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 48%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #ffeab0 0%, #f6d47a 38%, #e3b649 72%, #cf9d34 100%);
  background-position: 0 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(140,95,15,.35),
              0 14px 30px -10px rgba(236,190,90,.65), 0 0 46px -12px rgba(245,217,138,.55);
}

/* compare modal, "Work Directly with Coach Harry" tab */
.pl-modal.is-harry{ --accent: #e3b649; --accent-bright: #f6dc94; }
.pl-modal.is-harry .pl-tab[aria-selected="true"]{ color: #14110a; }
.pl-modal.is-harry .pl-card.pl-pop{
  background: linear-gradient(180deg, rgba(236,201,120,.13), rgba(255,255,255,.02));
  box-shadow: 0 30px 60px -34px rgba(236,201,120,.5);
}
.pl-modal.is-harry .pl-tag{ color: #14110a; }
.pl-modal.is-harry .pl-card.pl-pop .btn-primary{
  background: linear-gradient(180deg, #ffeab0, #e3b649); border-color: var(--gold-bright); color: #1a1204;
}


/* ==========================================================================
   Coach Harry "Signature" card v2 — luxe black & gold
   full animated gold frame, engraved texture, echo of the hero rings,
   solid-gold ticks, shimmering title and a softly pulsing CTA
   ========================================================================== */
.price-card.signature{
  --ring-b: #fff1c1;
  border-color: rgba(236,201,120,.35);
  background:
    radial-gradient(circle at 100% 100%, transparent 0 150px, rgba(236,201,120,.10) 151px 152px, transparent 153px 205px, rgba(236,201,120,.07) 206px 207px, transparent 208px 265px, rgba(236,201,120,.05) 266px 267px, transparent 268px),
    repeating-linear-gradient(135deg, rgba(255,241,193,.028) 0 1px, transparent 1px 10px),
    radial-gradient(80% 38% at 50% 0%, rgba(236,201,120,.26), transparent 74%),
    linear-gradient(180deg, rgba(201,164,76,.10), rgba(0,0,0,0) 48%),
    #08080a;
  box-shadow:
    0 40px 90px -34px rgba(236,201,120,.5),
    0 0 0 1px rgba(236,201,120,.08),
    inset 0 1px 0 rgba(255,241,193,.28),
    inset 0 0 60px -20px rgba(236,201,120,.12);
}
@media (min-width: 900px){ .price-card.signature{ translate: 0 -14px; } .price-card.signature:hover{ translate: 0 -20px; } }

/* full, slowly travelling gold frame (instead of one short spark) */
.price-card.signature::after{
  opacity: 1; padding: 2px;
  background: conic-gradient(from var(--angle),
    rgba(201,164,76,.35) 0deg, #fff1c1 40deg, rgba(201,164,76,.35) 110deg,
    rgba(201,164,76,.35) 200deg, #f6dc94 250deg, rgba(201,164,76,.35) 320deg, rgba(201,164,76,.35) 360deg);
  animation-duration: 7s;
}
/* spotlight always on, follows the cursor when it moves */
.price-card.signature::before{ opacity: 1; --spot: rgba(245,217,138,.16); }

/* tag */
.signature-tag{ letter-spacing: .1em; padding-left: 1.15rem; padding-right: 1.15rem; }
.signature-tag::before{ content: '\2605'; margin-right: .45rem; font-size: .8em; }

/* title: slow gold shimmer */
.price-card.signature h3{
  background: linear-gradient(100deg, #b98a2e 0%, #f6dc94 25%, #fffbe8 40%, #f6dc94 55%, #d4a94a 75%, #b98a2e 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sig-title-shine 6s ease-in-out infinite;
}
@keyframes sig-title-shine{ 0%,20%{ background-position: 100% 0; } 70%,100%{ background-position: 0 0; } }

/* price: bright champagne gradient */
.price-card.signature .price-amount span{
  background: linear-gradient(180deg, #ffffff 0%, #ffeab0 55%, #ecc978 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgba(236,201,120,.4));
}
.price-card.signature .price-amount small{ -webkit-text-fill-color: #e9dfc6; color: #e9dfc6; filter: none; }

/* ticks: solid gold discs (the left card keeps outline ticks) */
.price-card.signature .price-features li::before{
  background: linear-gradient(180deg, #ffeab0, #d4a23c); border-color: #fff1c1;
  box-shadow: 0 0 12px rgba(236,201,120,.5);
}
.price-card.signature .price-features li::after{ border-color: #1a1204; }
.price-card.signature .price-features li:hover::before{ background: #fff1c1; }

/* button: gentle golden pulse */
.price-card.signature .btn-primary{ animation: sig-pulse 3s ease-in-out infinite !important; }
@keyframes sig-pulse{
  0%,100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(140,95,15,.35), 0 14px 30px -10px rgba(236,190,90,.6), 0 0 26px -8px rgba(245,217,138,.4); }
  50%{    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(140,95,15,.35), 0 18px 40px -8px rgba(236,190,90,.85), 0 0 56px -4px rgba(245,217,138,.75); }
}
@media (prefers-reduced-motion: reduce){
  .price-card.signature h3, .price-card.signature .btn-primary, .price-card.signature::after{ animation: none !important; }
}
/* "Prices Starting from" label above the price */
.price-amount .price-from{
  margin: 0 0 .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-bright);
}


/* ==========================================================================
   HERO — final layout + effects (keep at the end of this file)
   Left: eyebrow, headline, intro, proof points.  Right: Coach Harry in his
   rings with credential chips.  Below: stats card, then ONE button.
   Everything shares the same left/right edges as the nav.
   ========================================================================== */
@property --ang{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.hero{
  --photo-w: clamp(230px, calc(var(--container) * .27), 390px);
  --disc-r: calc(var(--photo-w) * .43);
  --plate-w: calc(var(--photo-w) * 1.29);
  --vis-extra: calc(var(--photo-w) * .18);      /* room on the right for the credential chip */
  padding-bottom: 0;
  isolation: isolate;
}

/* ---------- layout ---------- */
.hero-layout{
  position: relative; z-index: 1;
  width: 100%;
  max-width: calc(var(--container) - 2 * var(--gutter));
  margin: 0 auto;
  padding-top: clamp(6.25rem, 8vw, 7.75rem);          /* gap below the nav */
  margin-bottom: clamp(2.5rem, 3.5vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

/* ---------- left column ---------- */
.hero-layout .hero-inner{
  max-width: none; width: 100%; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-eyebrow{
  display: inline-flex; align-items: center; gap: .9rem;
  margin: 0 0 1.5rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}
.hero-eyebrow .kicker-line{ flex: 0 0 auto; }
.hero-layout .hero-title{
  font-size: clamp(2.7rem, calc(var(--container) * .056), 5.2rem);
  line-height: .93; margin: 0 0 1.6rem; text-align: left;
}
.hero-layout .hero-foot{ margin: 0; display: block; }
.hero-layout .hero-sub{
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7;
  max-width: 48ch; text-align: left; color: rgba(244,241,234,.72);
}
.hero-points{
  display: flex; flex-wrap: wrap; gap: .7rem 1.6rem;
  margin: 1.9rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid rgba(201,164,76,.22);
  max-width: 46rem;
}
.hero-points li{
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .86rem; color: rgba(244,241,234,.82); letter-spacing: .01em;
}
.hero-points svg{
  flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 50%;
  color: var(--gold-bright, #f5d98a);
  background: radial-gradient(circle at 30% 30%, rgba(201,164,76,.3), rgba(201,164,76,.06) 75%);
  border: 1px solid rgba(201,164,76,.45);
}
.hero-points.reveal-item{ transition-delay: .3s; }

/* ---------- right column: photo + rings share ONE box so they never drift apart ---------- */
.hero-visual{
  position: relative;
  width: calc(var(--plate-w) + var(--vis-extra));
  height: calc(var(--photo-w) * 1.22);
  justify-self: end;
}
.hero-visual .hero-photo{
  position: absolute; top: auto; right: auto; bottom: 0;
  left: var(--vc, calc(var(--plate-w) / 2)); margin-left: calc(var(--photo-w) / -2);
  width: var(--photo-w); height: 100%;
}
.hero-visual .hero-plate{
  position: absolute; top: auto; right: auto; margin-top: 0;
  left: 0; margin-left: 0;
  bottom: calc(var(--disc-r) - var(--plate-w) / 2);      /* ring centre = disc centre */
  width: var(--plate-w);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 88%);
}

/* a thin arc of light that circles the round frame */
.hero-orbit{
  position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--plate-w) / 2 - var(--disc-r) - 8px);
  bottom: -8px;
  width: calc(var(--disc-r) * 2 + 16px); height: calc(var(--disc-r) * 2 + 16px);
  border-radius: 50%;
  filter: drop-shadow(0 0 7px rgba(245,217,138,.75));
}
.hero-orbit::before{
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(245,217,138,.05) 250deg, rgba(255,236,190,.95) 350deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: orbit-spin 7s linear infinite;
}
@keyframes orbit-spin{ to{ transform: rotate(360deg); } }

/* floating credential chips */
.hero-chip{
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem .6rem .65rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30,26,18,.86), rgba(14,12,9,.86));
  border: 1px solid rgba(201,164,76,.4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,236,190,.08);
  white-space: nowrap;
}
.chip-icon{
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  color: var(--gold);
  background: radial-gradient(circle at 30% 30%, rgba(201,164,76,.28), rgba(201,164,76,.04) 72%);
  border: 1px solid rgba(201,164,76,.4);
}
.chip-icon svg{ width: 16px; height: 16px; }
.chip-text{ display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.chip-text b{ font-size: .86rem; font-weight: 700; color: #f4f1ea; letter-spacing: .01em; }
.chip-text em{ font-style: normal; font-size: .68rem; letter-spacing: .05em; color: rgba(244,241,234,.6); margin-top: 2px; }
.chip-a{ left: -1.5rem; top: 27%; }
.chip-b{ right: 0; top: 14%; }

/* name plate straddling the bottom of the round frame */
.hero-nameplate{
  position: absolute; z-index: 4;
  left: var(--vc, calc(var(--plate-w) / 2)); bottom: 0;
  transform: translate(-50%, 50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .7rem 1.6rem; border-radius: 999px;
  background: linear-gradient(180deg, #f3d98e, #c9a44c 55%, #a8842f);
  color: #17120a;
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.85), 0 0 0 4px rgba(10,9,7,.9);
  white-space: nowrap; text-align: center;
}
.hero-nameplate b{ font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.hero-nameplate em{ font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; opacity: .72; }

.hero:not(.loaded) .hero-chip, .hero:not(.loaded) .hero-nameplate, .hero:not(.loaded) .hero-orbit{ opacity: 0; }
.hero.loaded .hero-orbit{ animation: chip-in 1.2s var(--ease-soft) .9s both; }
.hero.loaded .hero-chip{ animation: chip-in .9s var(--ease-soft) 1.1s both, chip-float 7s ease-in-out 2s infinite alternate; }
.hero.loaded .chip-b{ animation-delay: 1.3s, 2.6s; }
.hero.loaded .hero-nameplate{ animation: plate-rise .9s var(--ease-soft) 1s both; }
@keyframes chip-in{ from{ opacity: 0; scale: .92; } to{ opacity: 1; scale: 1; } }
@keyframes chip-float{ from{ translate: 0 -5px; } to{ translate: 0 6px; } }
@keyframes plate-rise{ from{ opacity: 0; transform: translate(-50%, 90%); } to{ opacity: 1; transform: translate(-50%, 50%); } }

/* ---------- backdrop: faint grid, warm glow, cursor spotlight, embers ---------- */
.hero::before{
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(244,241,234,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,234,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 38%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 75% at 72% 38%, #000 0%, transparent 72%);
}
.hero::after{
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  right: calc((100vw - var(--container)) / 2 - 8%); top: -6%;
  background: radial-gradient(circle, rgba(201,164,76,.14) 0%, rgba(201,164,76,.05) 38%, transparent 68%);
}
.hero-spot{
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  background: radial-gradient(circle, rgba(245,217,138,.11), rgba(245,217,138,.04) 40%, transparent 66%);
  opacity: 0; transition: opacity .6s ease; will-change: transform;
}
.hero:hover .hero-spot{ opacity: 1; }
.hero-embers{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ember{
  position: absolute; bottom: -12px; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #ffe7a8, rgba(245,217,138,0) 70%);
  opacity: 0;
  animation: ember-rise var(--d) linear var(--delay) infinite;
}
@keyframes ember-rise{
  0%{   opacity: 0;   transform: translate3d(0, 0, 0); }
  12%{  opacity: .8; }
  100%{ opacity: 0;   transform: translate3d(var(--drift), -85vh, 0); }
}
.hero.fx-off .ember, .hero.fx-off .hero-orbit::before, .hero.fx-off .hero-glass,
.hero.fx-off .hero-cta{ animation-play-state: paused; }

/* ---------- stats card: gold hairline with a travelling light ---------- */
.hero-glass{
  max-width: calc(var(--container) - 2 * var(--gutter)); width: 100%;
  border: 1px solid transparent; border-radius: 16px;
  padding: 1.9rem clamp(1rem, 2vw, 2rem);
  background:
    linear-gradient(180deg, #14110c, #0d0b08) padding-box,
    conic-gradient(from var(--ang, 0deg),
      rgba(201,164,76,.16) 0deg, rgba(245,217,138,.95) 40deg, rgba(201,164,76,.16) 95deg,
      rgba(201,164,76,.16) 200deg, rgba(245,217,138,.6) 245deg, rgba(201,164,76,.16) 295deg,
      rgba(201,164,76,.16) 360deg) border-box;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 60px -30px rgba(201,164,76,.35);
  animation: ang-spin 8s linear infinite;
}
@keyframes ang-spin{ to{ --ang: 360deg; } }
.hero-glass .glass-stat{
  flex: 1 1 0; min-width: 0;
  display: grid; grid-template-columns: auto auto;
  grid-template-areas: "icon num" "icon label";
  justify-content: center; align-items: center;
  column-gap: 1.1rem; row-gap: .3rem; text-align: left;
}
.hero-glass .glass-stat-icon{ grid-area: icon; width: 50px; height: 50px; margin: 0; }
.hero-glass .glass-stat-icon svg{ width: 20px; height: 20px; }
.hero-glass .glass-stat-num{ grid-area: num; justify-content: flex-start; align-self: end; }
.hero-glass .glass-stat p{
  grid-area: label; align-self: start; margin: 0;
  font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(244,241,234,.6);
}
.hero-glass .stat-num, .hero-glass .stat-suffix{ font-size: clamp(2.1rem, 3.2vw, 3.1rem); }
.hero-glass .glass-divider{
  flex: 0 0 1px; margin: 0;
  background: linear-gradient(to bottom, transparent, rgba(201,164,76,.45) 25%, rgba(201,164,76,.45) 75%, transparent);
}

/* ---------- the one button ---------- */
.hero-actions{ margin: 2.4rem auto 0; }
.hero-actions .btn.hero-cta{
  width: min(460px, 100%);
  padding: 1.25rem 1.6rem 1.25rem 2.4rem;
  font-size: .82rem; letter-spacing: .2em;
  justify-content: space-between;
  animation: cta-pulse 3.2s ease-out infinite;
}
.hero-actions .btn.hero-cta:hover{ animation-play-state: paused; }
@keyframes cta-pulse{
  0%{   box-shadow: 0 0 0 0 rgba(245,217,138,.5),  0 16px 38px -12px rgba(201,164,76,.65); }
  70%{  box-shadow: 0 0 0 26px rgba(245,217,138,0), 0 16px 38px -12px rgba(201,164,76,.65); }
  100%{ box-shadow: 0 0 0 0 rgba(245,217,138,0),   0 16px 38px -12px rgba(201,164,76,.65); }
}
.hero-actions.reveal-item{ transition-delay: .55s; }
.scroll-cue{ margin: 1.75rem auto; }

@media (prefers-reduced-motion: reduce){
  .hero-orbit::before, .hero-glass, .hero-actions .btn.hero-cta, .ember{ animation: none; }
  .hero.loaded .hero-chip, .hero.loaded .hero-nameplate, .hero.loaded .hero-orbit{ animation: none; opacity: 1; }
}

/* ---------- nav: collapse to the menu button before the links wrap ---------- */
.nav-links a{ white-space: nowrap; }
@media (max-width: 900px){
  .nav-links{ display: none; }
  .menu-toggle{ display: flex; }
}

/* ---------- tablet + phone: stack, photo centred under the text ---------- */
@media (max-width: 1024px){
  .hero{
    --photo-w: clamp(230px, 44vw, 340px);
    --plate-w: calc(var(--photo-w) * 1.2);
    --vis-extra: 0px;
  }
  .hero-layout{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3.5rem; margin-bottom: 4rem;
    padding-top: clamp(6rem, 14vw, 7rem);
  }
  .hero-visual{ justify-self: center; order: 2; }
  .chip-a{ left: -.5rem; }
  .chip-b{ right: -.5rem; top: -12%; }
  .hero-glass{ gap: 0; }
  .hero-glass .glass-stat{
    grid-template-columns: 1fr; grid-template-areas: "icon" "num" "label";
    justify-items: center; text-align: center; row-gap: .45rem;
  }
  .hero-glass .glass-stat-icon{ width: 42px; height: 42px; margin-bottom: .2rem; }
  .hero-glass .glass-stat-num{ justify-content: center; align-self: center; }
  .hero-glass .glass-stat p{ text-align: center; }
}
@media (max-width: 720px){
  .hero{ --photo-w: min(270px, 68vw); }
  .hero-visual .hero-photo{ display: flex; }          /* keep the photo on phones */
  .hero-chip{ display: none; }
  .hero-layout{ row-gap: 2.75rem; margin-bottom: 3.25rem; }
  .hero-eyebrow{ font-size: .64rem; letter-spacing: .18em; gap: .7rem; }
  .hero-points{ flex-direction: column; gap: .7rem; }
  .hero-nameplate{ padding: .6rem 1.3rem; }
  .hero-nameplate b{ font-size: 1.05rem; }
  .hero-glass{ flex-wrap: wrap; padding: 1.25rem; row-gap: 1.25rem; }
  .hero-glass .glass-stat{
    flex: 1 1 100%; justify-content: flex-start; padding-left: .5rem;
    grid-template-columns: auto 1fr; grid-template-areas: "icon num" "icon label";
    justify-items: start; text-align: left; column-gap: 1rem; row-gap: .2rem;
  }
  .hero-glass .glass-stat-num{ justify-content: flex-start; align-self: end; }
  .hero-glass .glass-stat p{ text-align: left; align-self: start; }
  .hero-glass .glass-stat-icon{ width: 46px; height: 46px; margin: 0; }
  .hero-glass .glass-divider{ display: none; }
  .hero-actions .btn.hero-cta{ width: 100%; }
}

@media (max-width: 1024px){ .hero-glass .glass-stat{ align-content: start; align-self: stretch; } }

/* ===== Discuss Plans form additions ===== */
.lead-form .form-field input[type="date"],.lead-form .form-field input[type="time"]{color-scheme:dark;min-height:2.9rem}
.lead-form .form-legend{margin:.2rem 0 .6rem;font-size:.82rem;color:var(--ink-dim);letter-spacing:.02em}
.lead-plan-chip{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin:0 0 1.1rem;padding:.7rem 1rem;border:1px solid rgba(236,201,120,.4);background:rgba(236,201,120,.08);border-radius:10px;font-size:.88rem}
.lead-plan-chip[hidden]{display:none}
.lead-plan-chip span{color:var(--ink-dim);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.lead-plan-chip b{color:var(--gold-bright);font-weight:600}

/* ==========================================================================
   MOBILE FIXES + CUSTOM DATE / TIME DROPDOWNS
   ========================================================================== */

/* ---- Plan cards: 1fr has an implicit min-content floor, which let the cards grow wider
        than the screen on phones. minmax(0,1fr) lets them shrink to fit. ---- */
.price-card{ min-width: 0; max-width: 100%; }
@media (max-width: 760px){
  .pricing-grid.pricing-duo{ grid-template-columns: minmax(0, 1fr); width: 100%; }
  .pricing-duo .price-card{ padding: 2.4rem 1.4rem 1.75rem; }
  .pricing-duo .price-card h3{ font-size: clamp(1.45rem, 6.4vw, 1.8rem); overflow-wrap: anywhere; }
  .pricing-duo .price-amount span{ font-size: clamp(1.6rem, 7.2vw, 2.2rem); white-space: nowrap; }
  .pricing-duo .price-features li{ font-size: .95rem; overflow-wrap: anywhere; }
  .price-card .featured-tag{ right: 1.4rem; }
  .pricing-grid.pricing-duo .price-card .btn.price-cta{ font-size: .68rem !important; letter-spacing: .06em !important; gap: .5rem !important; padding: .55rem .55rem .55rem 1rem !important; white-space: nowrap; justify-content: space-between !important; }
  .pricing-grid.pricing-duo .price-card .btn.price-cta::after{ flex: none; width: 34px !important; height: 34px !important; }
  .pricing-duo .price-card.signature{ padding-top: 3.6rem; }
}

/* ---- Modal: never wider than the screen ---- */
.lead-modal-inner{ max-width: 100%; }
.lead-modal-scroll{ grid-template-columns: minmax(0, 320px) minmax(0, 1fr); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.lead-modal-aside, .lead-modal-main{ min-width: 0; }
.lead-form .form-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead-form .form-field{ min-width: 0; }
.lead-form .form-field input, .lead-form .form-field select{ min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 2.9rem; }

/* section heading above the date / time row */
.lead-form .form-legend{
  margin: .4rem 0 .9rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-bright);
}

@media (max-width: 820px){
  .lead-modal-inner{ max-height: 96vh; max-height: 96dvh; }
  .lead-modal-scroll{ grid-template-columns: minmax(0, 1fr); max-height: 96vh; max-height: 96dvh; }
  .lead-modal-main{ padding: 1.35rem 1.1rem calc(1.75rem + env(safe-area-inset-bottom, 0px)); }
  .lead-modal-aside{ padding-right: 4.25rem; } /* keeps the title clear of the close button */
  .lead-form .form-row{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lead-form .form-field{ margin-bottom: 1rem; }
  .lead-form .form-field label{ margin-bottom: .45rem; }
  .form-submit{ margin-top: .5rem; }
}

/* ---- Close button: solid, gold-ringed, drawn with CSS so it is always visible and centred ---- */
.lead-modal-close{
  top: .9rem; right: .9rem; width: 42px; height: 42px; padding: 0; z-index: 10;
  font-size: 0; color: var(--gold-bright);
  background: #1a1a1c; border: 1.5px solid var(--gold); backdrop-filter: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.65);
}
.lead-modal-close::before, .lead-modal-close::after{
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px;
  background: currentColor; border-radius: 2px; transform: rotate(45deg);
}
.lead-modal-close::after{ transform: rotate(-45deg); }
.lead-modal-close:hover{ background: var(--gold); color: #14110a; border-color: var(--gold-bright); }
@media (max-width: 820px){
  .lead-modal-close{ top: .8rem; right: .8rem; width: 42px; height: 42px; background: #1a1a1c; }
}

/* ---- Date + time dropdowns (reuse the custom-select look) ---- */
.dtp .cselect-native{ pointer-events: none; }
.dtp .cselect-trigger{ min-height: 2.9rem; }
.dtp .cselect-value.is-placeholder{ color: var(--ink-faint); }
.dtp-icon{ width: 18px; height: 18px; flex: none; color: var(--gold-bright); }
.dtp .cselect-options.dtp-panel{ padding: .8rem; max-height: none; overflow: visible; }
.dtp-date .cselect-options{ right: auto; min-width: 290px; }
.dtp-time .cselect-options{ max-height: 250px; overflow-y: auto; }
.dtp-head{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.dtp-title{ font-weight: 600; font-size: .95rem; color: var(--ink); }
.dtp-nav{
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); color: var(--ink); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dtp-nav svg{ width: 16px; height: 16px; }
.dtp-nav:hover:not(:disabled){ border-color: var(--gold); color: var(--gold-bright); background: rgba(201,164,76,.12); }
.dtp-nav:disabled{ opacity: .3; cursor: default; }
.dtp-week, .dtp-days{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dtp-week span{ text-align: center; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: .2rem 0 .4rem; }
.dtp-day{
  height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dtp-day:hover:not(:disabled){ background: rgba(201,164,76,.16); }
.dtp-day.is-today{ border-color: rgba(236,201,120,.55); }
.dtp-day.is-selected{ background: var(--gold); color: #14110a; font-weight: 700; border-color: var(--gold-bright); }
.dtp-day:disabled{ color: var(--ink-faint); opacity: .35; cursor: default; }
.cselect-option.is-disabled{ opacity: .35; pointer-events: none; }
@media (max-width: 820px){
  .dtp-date .cselect-options{ right: 0; min-width: 0; }
  .dtp-day{ height: 40px; }
  .cselect-option{ padding: .8rem .9rem; }
}
@media (max-width: 340px){
  .pricing-grid.pricing-duo .price-card .btn.price-cta{ font-size: .56rem !important; letter-spacing: .02em !important; padding-left: .7rem !important; }
  .pricing-duo .price-amount span{ font-size: 1.45rem; }
}

/* ==========================================================================
   PLAN DETAILS MODAL: compact cards on phones / tablets
   ========================================================================== */
@media (max-width: 900px){
  .pl-modal{ padding: .6rem; }
  .pl-dialog{ max-height: calc(100vh - 1.2rem); max-height: calc(100dvh - 1.2rem); border-radius: 14px; }
  .pl-scroll{ padding: 3.4rem .85rem 1rem; }
  .pl-close{ top: .65rem; right: .65rem; width: 40px; height: 40px; background: #1a1a1c; border: 1.5px solid var(--gold); color: var(--gold-bright); font-size: 0; }
  .pl-close::before, .pl-close::after{ content:""; position:absolute; left:50%; top:50%; width:15px; height:2px; margin:-1px 0 0 -7.5px; background: currentColor; border-radius:2px; transform: rotate(45deg); }
  .pl-close::after{ transform: rotate(-45deg); }
  .pl-close:hover{ transform: none; }
  .pl-heading{ font-size: 1.6rem; margin: 0 0 .9rem; }
  .pl-tabs{ display:flex; margin-bottom: 1rem; }
  .pl-tab{ font-size: .8rem; padding: .5rem .4rem; }
  .pl-title{ font-size: 1.25rem; }
  .pl-sub{ font-size: .85rem; margin-top: .3rem; }
  .pl-legend{ margin: .8rem 0 .9rem; font-size: .74rem; gap: 1rem; }
  .pl-grid{ gap: 1rem; }

  .pl-card{ padding: 1rem .9rem .9rem; border-radius: 12px; }
  .pl-card:hover{ transform: none; }
  .pl-card h4{ font-size: 1.3rem; }
  .pl-tagline{ font-size: .76rem; margin-top: .15rem; }
  .pl-price{ font-size: 1.85rem; margin: .65rem 0 .5rem; padding-bottom: .65rem; }
  .pl-price small{ font-size: .72rem; }
  .pl-list{ margin-bottom: .9rem; }
  .pl-list li{ padding: .42rem .3rem .42rem 1.9rem; font-size: .82rem; line-height: 1.3; }
  .pl-ico{ width: 17px; height: 17px; left: .1rem; top: .5rem; }
  .pl-list li.yes .pl-ico::after{ background-size: 10px; }
  .pl-list li.no .pl-ico::after{ background-size: 9px; }
  .pl-card .btn.pl-choose{ font-size: .72rem !important; letter-spacing: .06em !important; padding: .45rem .45rem .45rem 1rem !important; justify-content: space-between !important; }
  .pl-card .btn.pl-choose::after{ width: 32px !important; height: 32px !important; flex: none; }
  .pl-tag{ font-size: .6rem; top: -11px; }
  .pl-note{ margin-top: 1rem; font-size: .72rem; }
}
@media (hover: none), (max-width: 900px){
  .pl-close:focus-visible, .lead-modal-close:focus-visible{ outline: none; }
}

/* ==========================================================================
   Refinement: give the plan cards room to breathe + neater, non-stretched buttons
   ========================================================================== */
@media (max-width: 900px){
  .pl-scroll{ padding: 3.6rem 1rem 1.25rem; }
  .pl-grid{ gap: 1.4rem; }
  .pl-card{ padding: 1.35rem 1.15rem 1.3rem; }
  .pl-card h4{ font-size: 1.4rem; }
  .pl-tagline{ font-size: .8rem; margin-top: .25rem; }
  .pl-price{ font-size: 2rem; margin: .9rem 0 .7rem; padding-bottom: .9rem; }
  .pl-list{ margin-bottom: 1.3rem; }
  .pl-list li{ padding: .6rem .35rem .6rem 2.15rem; font-size: .87rem; line-height: 1.4; }
  .pl-ico{ width: 19px; height: 19px; left: .15rem; top: .68rem; }
  .pl-list li.yes .pl-ico::after{ background-size: 11px; }
  .pl-list li.no .pl-ico::after{ background-size: 10px; }
  .pl-legend{ margin: 1rem 0 1.2rem; font-size: .78rem; }
  .pl-sub{ font-size: .9rem; }

  /* button: centred label + arrow, comfortable height, not spread edge to edge */
  .pl-card .btn.pl-choose,
  .pricing-grid.pricing-duo .price-card .btn.price-cta{
    width: 100%; justify-content: center !important; gap: .7rem !important;
    padding: .95rem 1.4rem !important; min-height: 3.25rem;
    font-size: .8rem !important; letter-spacing: .1em !important; text-align: center;
  }
  .pl-card .btn.pl-choose::after,
  .pricing-grid.pricing-duo .price-card .btn.price-cta::after{ width: 30px !important; height: 30px !important; flex: none; font-size: 1rem; }
}
@media (max-width: 340px){
  .pl-card .btn.pl-choose, .pricing-grid.pricing-duo .price-card .btn.price-cta{ font-size: .68rem !important; letter-spacing: .05em !important; padding-inline: .9rem !important; }
}
@media (max-width: 900px){
  .pricing-grid.pricing-duo .price-card .btn.price-cta{ font-size: .74rem !important; letter-spacing: .06em !important; padding-inline: 1.1rem !important; gap: .55rem !important; }
}
@media (max-width: 340px){
  .pricing-grid.pricing-duo .price-card .btn.price-cta{ font-size: .62rem !important; letter-spacing: .03em !important; }
}
@media (max-width: 400px){
  .pricing-grid.pricing-duo .price-card .btn.price-cta{ font-size: .66rem !important; letter-spacing: .04em !important; padding-inline: .9rem !important; gap: .45rem !important; }
  .pricing-grid.pricing-duo .price-card .btn.price-cta::after{ width: 26px !important; height: 26px !important; }
}
@media (max-width: 340px){
  .pricing-grid.pricing-duo .price-card .btn.price-cta{ font-size: .56rem !important; letter-spacing: .02em !important; padding-inline: .7rem !important; }
}

/* ==========================================================================
   MOBILE NAVIGATION: clean slide-in drawer
   Root cause of the glitch: .nav.scrolled used backdrop-filter, which turns the nav into the
   containing block for position:fixed children, so the drawer was clipped into a tiny box.
   The glass effect now lives on a pseudo-element, so the drawer is truly full-height.
   ========================================================================== */
.nav.scrolled{ background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: rgba(10,10,11,.82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: opacity .35s ease;
}
.nav.scrolled::before{ opacity: 1; }

.nd-head, .nd-label, .nd-foot, .nd-backdrop{ display: none; }

@media (max-width: 900px){
  .menu-toggle{ padding: .6rem; margin-right: -.6rem; cursor: pointer; background: none; }

  .nav .nav-links{
    display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    margin: 0; padding: 0; gap: 0; width: min(86vw, 360px); height: 100vh; height: 100dvh; z-index: 2;
    background: radial-gradient(120% 60% at 100% 0%, rgba(201,164,76,.10), transparent 60%), linear-gradient(180deg, #151517, #0b0b0c);
    border-left: 1px solid rgba(201,164,76,.35); box-shadow: -30px 0 70px rgba(0,0,0,.65);
    overflow-y: auto; overscroll-behavior: contain; animation: none;
    transform: translateX(105%); visibility: hidden;
    transition: transform .42s var(--ease), visibility 0s linear .42s;
  }
  .nav .nav-links.open{ transform: none; visibility: visible; transition: transform .42s var(--ease), visibility 0s; animation: none; }

  .nd-head{
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: 1.15rem 1.15rem 1.15rem 1.6rem; border-bottom: 1px solid rgba(201,164,76,.28);
  }
  .nd-brand{ display: flex; flex-direction: column; gap: .2rem; line-height: 1; }
  .nd-brand b{ font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--gold-bright); letter-spacing: .01em; }
  .nd-brand span{ font-size: .55rem; letter-spacing: .22em; font-weight: 600; color: var(--gold); }
  .nd-close{
    position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; cursor: pointer; padding: 0;
    background: #1a1a1c; border: 1.5px solid var(--gold); color: var(--gold-bright); font-size: 0;
  }
  .nd-close::before, .nd-close::after{
    content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; margin: -1px 0 0 -7.5px;
    background: currentColor; border-radius: 2px; transform: rotate(45deg);
  }
  .nd-close::after{ transform: rotate(-45deg); }
  .nd-label{
    display: block; padding: 1.4rem 1.6rem .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
  }

  .nav .nav-links > a{
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: 1.05rem 1.6rem; margin: 0; font-size: 1.05rem; font-weight: 500; letter-spacing: .01em;
    color: #efe9dc; white-space: normal; border-bottom: 1px solid rgba(244,241,234,.07);
    transition: background .25s ease, color .25s ease;
  }
  .nav .nav-links > a::after{
    position: static; inset: auto; width: auto; height: auto; background: none; transition: transform .25s ease, opacity .25s ease;
    content: "\2192"; color: var(--gold); opacity: .55; font-size: 1rem; line-height: 1;
  }
  .nav .nav-links > a:hover, .nav .nav-links > a:active{ background: rgba(201,164,76,.08); color: var(--gold-bright); }
  .nav .nav-links > a:hover::after{ transform: translateX(4px); opacity: 1; }
  .nav .nav-links > a[aria-current="page"]{
    color: var(--gold-bright); font-weight: 600; background: linear-gradient(90deg, rgba(201,164,76,.14), transparent);
    box-shadow: inset 3px 0 0 var(--gold);
  }
  .nav .nav-links > a[aria-current="page"]::after{ opacity: 1; }

  .nd-foot{ display: flex; flex-direction: column; gap: .75rem; flex: none; margin-top: auto; padding: 1.6rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
  .nd-foot .btn{ width: 100%; justify-content: center; min-height: 3.1rem; padding: .85rem 1.2rem; font-size: .76rem; letter-spacing: .1em; }
  .nd-foot .btn::after{ width: 28px; height: 28px; flex: none; font-size: .95rem; }
  .nd-mail{ display: block; text-align: center; margin-top: .4rem; font-size: .8rem; color: var(--ink-faint); overflow-wrap: anywhere; }
  .nav .nav-links > a.nd-mail{ display: block; padding: 0; border: 0; box-shadow: none; background: none; font-size: .8rem; font-weight: 400; color: var(--ink-faint); }
  .nav .nav-links > a.nd-mail::after{ content: none; }

  .nd-backdrop{
    display: block; position: fixed; inset: 0; z-index: 1; background: rgba(5,5,6,.72);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .nd-backdrop.open{ opacity: 1; visibility: visible; transition: opacity .35s ease; }
}
html.menu-lock, html.menu-lock body{ overflow: hidden; }
@media (prefers-reduced-motion: reduce){ .nav .nav-links, .nd-backdrop{ transition: none !important; } }
@media (max-width: 900px){
  .nav .nav-links .nd-foot a.btn{ position: relative; padding-bottom: .85rem; font-weight: 800; text-shadow: none; }
  .nav .nav-links .nd-foot a.btn-primary{ color: #1c1406; }
  .nav .nav-links .nd-foot a.btn-outline{ color: var(--gold-bright); }
  .nav .nav-links .nd-foot a.btn::after{ position: static; inset: auto; height: 28px; width: 28px; flex: none; }
  .nav .nav-links .nd-foot a.btn-primary::after{ background: #1a1204; color: var(--gold-bright); }
  .nav .nav-links .nd-foot a.btn-outline::after{ background: var(--gold-grad); color: #1a1204; }
  .nav .nav-links .nd-foot a.btn-outline:hover{ color: #1a1204; }
  .nav .nav-links .nd-foot a.nd-mail{ color: var(--ink-faint); }
  .nav .nav-links .nd-foot a.nd-mail::after{ content: none; }
}

/* ==========================================================================
   HERO on phones: two-line headline, no paragraph / checklist — headline, then photo + stats
   ========================================================================== */
@media (max-width: 720px){
  .hero-layout .hero-foot,
  .hero-layout .hero-points{ display: none; }

  .hero-layout .hero-title{
    margin: 0;
    font-size: clamp(1.6rem, calc((100vw - 2.9rem) / 9.3), 2.9rem);
    line-height: 1.02;
  }
  .hero-title .reveal-line,
  .hero-title.tw .reveal-line{ display: block; white-space: nowrap; }
  .hero-layout{ row-gap: 2.25rem; padding-top: 6.25rem; }
}

/* ---- Home page contact form: error note + success screen sits in the same card ---- */
.form-note.is-error{ color: #e2685f; animation: lead-shake .4s ease; }
.contact-card{ position: relative; min-width: 0; }
.contact-form[hidden]{ display: none; }
.contact-card .lead-success-view:not([hidden]){ min-height: 420px; padding: 2rem 1rem; }
.contact-form .cselect-value{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-form .cselect-options{ max-height: 330px; overflow-y: auto; }
.contact-card .lead-success-view:not([hidden]){ padding: 3.75rem 1rem 2.25rem; min-height: 480px; }
/* ==========================================================================
   SOCIAL BAR — "gold thread" rail: vertical hairline with round glass icons on it
   ========================================================================== */
.social-bar{
  position: absolute; z-index: 5;
  top: 150px; right: max(16px, calc((100vw - var(--container)) / 2 - 56px));
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding-bottom: 70px;
}
.social-bar::before, .social-bar::after{ /* the thread above and below the icons */
  content:""; position:absolute; left:50%; width:1px; transform:translateX(-50%); pointer-events:none;
}
.social-bar::before{ top:-40px; height:40px; background: linear-gradient(180deg, transparent, rgba(236,201,120,.7)); }
.social-bar::after{ bottom:0; height:60px; background: linear-gradient(180deg, rgba(236,201,120,.7), transparent); }
.sb-btn{ -webkit-tap-highlight-color: transparent; }
.sb-label{
  font: 600 .62rem/1 var(--font-body); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-bright);
  writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 4px;
  text-shadow: 0 0 14px rgba(236,201,120,.5);
}
.sb-btn{
  --c: 236,201,120;
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(14,14,15,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(236,201,120,.5); color: #f4f1ea;
  box-shadow: 0 8px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(236,201,120,.25);
  transition: transform .4s var(--ease), background .35s ease, border-color .35s ease, box-shadow .4s ease, color .35s ease;
}
.sb-btn svg{ width: 22px; height: 22px; fill: currentColor; transition: transform .4s var(--ease); }
.sb-ig svg{ fill: none; stroke: currentColor; }
.sb-ig .ig-dot{ fill: currentColor; stroke: none; }
.sb-fb{ --c: 24,119,242; color: #4c9aff; }
.sb-ig{ --c: 225,48,108; color: #ff5fa2; }
.sb-in{ --c: 10,132,214; color: #3aa9f0; }
.sb-btn{ box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 18px rgba(var(--c), .38), inset 0 1px 0 rgba(236,201,120,.25); }
@media (hover: hover) and (pointer: fine){
.sb-btn:hover, .sb-btn:focus-visible{
  color: #fff; border-color: rgba(255,255,255,.55); transform: translateX(-6px) scale(1.08);
  box-shadow: 0 0 0 4px rgba(var(--c), .22), 0 0 30px rgba(var(--c), .8), 0 0 60px rgba(var(--c), .4);
}
.sb-fb:hover, .sb-fb:focus-visible{ background: linear-gradient(150deg,#4c9aff,#1877f2 55%,#0d52c4); }
.sb-in:hover, .sb-in:focus-visible{ background: linear-gradient(150deg,#3aa9f0,#0a66c2 60%,#07448a); }
.sb-ig:hover, .sb-ig:focus-visible{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.sb-btn:hover svg{ transform: scale(1.1); }
}
.sb-btn::after{ /* name tag */
  content: attr(data-tip); position:absolute; right: calc(100% + 14px); top:50%; transform: translate(8px,-50%);
  opacity:0; pointer-events:none; white-space:nowrap;
  font: 600 .7rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:#0a0a0b;
  background: linear-gradient(180deg,#f6dc9a,#d9b25a); padding:.55rem .85rem; border-radius:99px;
  transition: opacity .3s ease, transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine){ .sb-btn:hover::after, .sb-btn:focus-visible::after{ opacity:1; transform: translate(0,-50%); } }
@media (max-width: 900px){
  .social-bar{ top: 278px; bottom: auto; right: 6px; gap: 20px; padding-bottom: 0; }
  .social-bar::before, .social-bar::after, .sb-label, .sb-btn::after{ display: none; }
  .sb-btn{ width: 36px; height: 36px; }
  .sb-btn svg{ width: 17px; height: 17px; }
  .sb-btn:active{ transform: scale(.92); }
}