:root {
    --bg: #131211; --bg-2: #1c1a18; --bg-3: #24211e; --fg: #ece8e1; --mute: #8f897f; --rule: #ece8e11f;
    --red: #e0321f;
    --display: "Barlow Condensed", sans-serif; --body: "Barlow", system-ui, sans-serif;
    --pad: clamp(1.25rem, 4vw, 3.5rem);
    --ease: cubic-bezier(.16,1,.3,1);
  }
  * { box-sizing: border-box; margin: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--fg); font-family: var(--body); -webkit-font-smoothing: antialiased; }
  body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  .wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
  .display { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; }
  .kicker { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: .85rem; color: var(--mute); }
  .kicker b { color: var(--red); font-weight: 800; margin-right: .5rem; }
  section { scroll-margin-top: 70px; }
  [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  [data-reveal].in { opacity: 1; transform: none; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; height: 52px; padding: 0 1.6rem; background: var(--red); color: #fff; border: 0; cursor: pointer; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: transform .2s var(--ease), background .2s; white-space: nowrap; }
  .btn:hover { background: #f04430; } .btn:active { transform: translateY(1px); }
  .btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg); clip-path: none; }
  .btn.ghost:hover { background: var(--fg); color: var(--bg); }
  .btn.dark { background: var(--bg); } .btn.dark:hover { background: #000; }

  nav { position: fixed; inset: 0 0 auto 0; z-index: 20; transition: background .3s; }
  nav.solid { background: #131211e8; backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; }
  nav .logo img { height: 26px; width: auto; }
  .links { display: flex; gap: 2.2rem; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .95rem; }
  .links a { color: var(--mute); transition: color .2s; } .links a:hover { color: var(--fg); }
  .nav-r { display: flex; align-items: center; gap: .6rem; }
  .menu-btn { display: none; height: 44px; padding: 0 1rem; background: transparent; border: 1.5px solid var(--fg); font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
  .mobile-menu { display: none; }

  /* hero */
  .hero { position: relative; min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; }
  .hero .copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 8rem var(--pad) 3.5rem; padding-left: max(var(--pad), calc((100vw - 1440px) / 2 + var(--pad))); }
  .hero h1 { font-size: clamp(3.6rem, 9.5vw, 9.6rem); margin-top: 1.2rem; }
  .hero h1 em { color: var(--red); }
  .hero .lead { margin-top: 1.8rem; max-width: 42ch; font-size: 1.1rem; line-height: 1.55; color: var(--mute); }
  .ctas { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
  .hero .media { position: relative; }
  .hero .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; filter: saturate(.85) contrast(1.05); }
  .hero .media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg) 0%, #13121100 35%), linear-gradient(0deg, var(--bg) 0%, #13121100 30%); }
  .hero .tag { position: absolute; z-index: 2; right: var(--pad); bottom: 3.5rem; text-align: right; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--mute); }
  .hero .tag b { display: block; color: var(--fg); font-size: 1.2rem; letter-spacing: .04em; font-style: italic; font-weight: 800; }

  .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .stats div { padding: 1.6rem var(--pad); border-left: 1px solid var(--rule); }
  .stats div:first-child { border-left: 0; }
  .stats b { display: block; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; }
  .stats span { font-size: .85rem; color: var(--mute); }

  .sec { padding: clamp(4.5rem, 9vw, 8rem) 0; }
  .wrap.sec { padding-left: var(--pad); padding-right: var(--pad); }
  .head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.6rem; flex-wrap: wrap; }
  .head h2 { font-size: clamp(2.8rem, 6vw, 5.6rem); margin-top: .8rem; }
  .head p { max-width: 40ch; color: var(--mute); line-height: 1.55; }

  /* programme strips */
  .strips { display: flex; gap: .6rem; height: 72vh; min-height: 520px; }
  .strip { position: relative; flex: 1; overflow: hidden; transition: flex .7s var(--ease); background: var(--bg-2); }
  .strip:hover, .strip.on { flex: 3.2; }
  .strips:hover .strip.on:not(:hover) { flex: 1; }
  .strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(.6) brightness(.7); transition: filter .7s, transform 1.2s var(--ease); }
  .strip:hover img, .strip.on img { filter: none; transform: scale(1.03); }
  .strips:hover .strip.on:not(:hover) img { filter: grayscale(.6) brightness(.7); transform: none; }
  .strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #131211f2 0%, #13121100 55%); }
  .strip .num { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.2rem; }
  .strip .body { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; z-index: 2; }
  .strip h3 { font-size: clamp(1.8rem, 2.6vw, 2.8rem); white-space: nowrap; }
  .strip .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
  .strip .more > div { overflow: hidden; }
  .strip:hover .more, .strip.on .more { grid-template-rows: 1fr; }
  .strips:hover .strip.on:not(:hover) .more { grid-template-rows: 0fr; }
  .strip p { margin-top: .8rem; max-width: 40ch; color: #d6d1c9; line-height: 1.5; }
  .strip .go { display: inline-block; margin-top: 1rem; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }

  /* method */
  .steps { border-top: 1px solid var(--rule); }
  .step { display: grid; grid-template-columns: 9rem 1fr 1.4fr; gap: 2rem; align-items: center; padding: 2.2rem 0; border-bottom: 1px solid var(--rule); transition: background .3s; }
  .step:hover { background: var(--bg-2); }
  .step .big { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(4rem, 7vw, 6.5rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--red); padding-left: .4rem; }
  .step h3 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
  .step p { color: var(--mute); line-height: 1.6; max-width: 52ch; }

  /* planner */
  .planner { background: var(--bg-2); border-block: 1px solid var(--rule); }
  .planner-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  .pf { display: grid; gap: 1.6rem; }
  .pf-group { border: 0; padding: 0; }
  .pf-group legend, .pf-field > span { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: var(--mute); margin-bottom: .6rem; }
  .pf-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .pf-opts-4 { grid-template-columns: repeat(4, 1fr); }
  .pf-opt input { position: absolute; opacity: 0; pointer-events: none; }
  .pf-opt span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: .5rem; background: var(--bg-3); font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; cursor: pointer; transition: background .2s, color .2s; }
  .pf-opt input:checked + span { background: var(--red); color: #fff; }
  .pf-opt input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
  .pf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
  .pf-field input, .pf-field select { width: 100%; height: 50px; padding: 0 .9rem; background: var(--bg-3); border: 1px solid transparent; border-radius: 0; }
  .pf-field select option { background: var(--bg-3); }
  .pf-field input:focus, .pf-field select:focus { outline: none; border-color: var(--red); }
  .pf-range input { width: 100%; accent-color: var(--red); }
  .pf-range b { color: var(--fg); }
  .pf-submit { height: 56px; background: var(--red); color: #fff; border: 0; cursor: pointer; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .06em; font-size: 1.2rem; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
  #plan-out { background: var(--bg); border: 1px solid var(--rule); padding: clamp(1.4rem, 3vw, 2.2rem); position: sticky; top: 96px; }
  #plan-out:not(.has-plan) { display: grid; place-content: center; text-align: center; min-height: 440px; }
  #plan-out .empty img { width: 84px; margin: 0 auto 1.2rem; opacity: .9; }
  #plan-out .empty p { color: var(--mute); max-width: 28ch; line-height: 1.5; }
  .plan-label { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--mute); margin-top: 1.5rem; }
  .plan-label:first-child { margin-top: 0; }
  .plan-programme { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(2rem, 3vw, 2.8rem); line-height: .95; margin-top: .3rem; }
  .plan-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.3rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .plan-stats div { padding: 1rem .6rem 1rem 0; }
  .plan-stats div + div { border-left: 1px solid var(--rule); padding-left: .9rem; }
  .plan-stats b { display: block; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 2rem; color: var(--red); line-height: 1; }
  .plan-stats span { font-size: .78rem; color: var(--mute); }
  .plan-split, .plan-phases { list-style: none; padding: 0; margin-top: .6rem; }
  .plan-split { display: flex; flex-wrap: wrap; gap: .4rem; }
  .plan-split li { background: var(--bg-3); padding: .4rem .7rem; font-size: .85rem; }
  .plan-phases li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: .92rem; line-height: 1.45; }
  .plan-phases li span { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--red); }
  .plan-outcome { margin-top: 1.3rem; line-height: 1.5; }
  .plan-send { margin-top: 1.3rem; width: 100%; height: 52px; background: var(--fg); color: var(--bg); border: 0; cursor: pointer; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
  .plan-send:hover { background: var(--red); color: #fff; }
  .plan-small, .plan-error { margin-top: .8rem; font-size: .78rem; color: var(--mute); }
  .plan-error { color: #ff8d7f; font-size: .95rem; }

  /* reels */
  #reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--red) var(--bg-2); }
  .reel { position: relative; display: block; text-align: left; padding: 0; border: 0; background: var(--bg-2); cursor: pointer; scroll-snap-align: start; overflow: hidden; }
  .reel-media { display: block; aspect-ratio: 9/16; }
  .reel-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); transition: filter .5s, transform 1s var(--ease); }
  .reel:hover .reel-media img { filter: none; transform: scale(1.04); }
  .reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #131211f0 0%, #13121100 50%); pointer-events: none; }
  .reel-play { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 46px; height: 46px; background: var(--red); color: #fff; display: grid; place-items: center; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
  .reel-meta { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; z-index: 2; }
  .reel-tag { display: block; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: var(--red); }
  .reel-title { display: block; margin-top: .3rem; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.45rem; line-height: 1; }
  .reel-modal { position: fixed; inset: 0; z-index: 100; background: #131211ee; display: none; place-items: center; padding: 1rem; }
  .reel-modal.open { display: grid; }
  .reel-frame { width: min(400px, 100%); height: min(720px, 86vh); background: #fff; }
  .reel-frame iframe { width: 100%; height: 100%; border: 0; }
  .reel-close { position: absolute; top: 1rem; right: 1rem; width: 50px; height: 50px; border: 0; background: var(--red); color: #fff; font-size: 1.8rem; cursor: pointer; }

  /* coach */
  .coach { display: grid; grid-template-columns: 1fr 1fr; min-height: 90vh; border-block: 1px solid var(--rule); }
  .coach .pic { position: relative; overflow: hidden; }
  .coach .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
  .coach .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, var(--bg) 0%, #13121100 40%); }
  .coach .txt { padding: clamp(3rem, 7vw, 6rem) var(--pad); display: flex; flex-direction: column; justify-content: center; }
  .coach h2 { font-size: clamp(3rem, 6.5vw, 6rem); margin-top: .8rem; }
  .coach blockquote { margin-top: 1.8rem; padding-left: 1.2rem; border-left: 3px solid var(--red); font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; }
  .coach .bio { margin-top: 1.6rem; color: var(--mute); line-height: 1.7; max-width: 54ch; }
  .coach .creds { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
  .coach .creds div { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .coach .creds div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--rule); }
  .coach .creds b { display: block; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.25rem; }
  .coach .creds span { font-size: .85rem; color: var(--mute); }

  /* comparison scoreboard */
  .board { border: 1px solid var(--rule); }
  .board-row { display: grid; grid-template-columns: 1fr 1fr; }
  .board-row + .board-row { border-top: 1px solid var(--rule); }
  .board-row > div { padding: 1.1rem 1.4rem; line-height: 1.45; }
  .board-row > div + div { border-left: 1px solid var(--rule); }
  .board-row.h > div { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); }
  .board-row.h > div + div { background: var(--red); color: #fff; }
  .board-row .no { color: var(--mute); text-decoration: line-through; text-decoration-color: #8f897f66; }
  .board-row .yes { display: flex; gap: .7rem; align-items: baseline; }
  .board-row .yes::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--red); transform: skewX(-12deg); }

  /* cta band */
  .cta { background: var(--red); color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0; clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); }
  .cta .wrap { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
  .cta h2 { font-size: clamp(3rem, 8vw, 7.8rem); }

  /* faq */
  .faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 5rem); }
  .faq h2 { font-size: clamp(2.8rem, 6vw, 5.6rem); margin-top: .8rem; }
  #faq-list { border-top: 1px solid var(--rule); }
  .faq-item { border-bottom: 1px solid var(--rule); }
  .faq-item summary { list-style: none; display: grid; grid-template-columns: 3rem 1fr 1.6rem; gap: 1rem; align-items: center; padding: 1.3rem 0; cursor: pointer; font-weight: 500; font-size: 1.08rem; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-n { font-family: var(--display); font-weight: 900; font-style: italic; color: var(--red); font-size: 1.3rem; }
  .faq-icon { position: relative; width: 1.1rem; height: 1.1rem; }
  .faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--fg); transition: transform .3s var(--ease); }
  .faq-icon::after { transform: rotate(90deg); }
  .faq-item[open] .faq-icon::after { transform: rotate(0); }
  .faq-item p { padding: 0 0 1.4rem 4rem; color: var(--mute); line-height: 1.65; max-width: 62ch; }

  /* contact */
  .contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 5vw, 5rem); }
  .contact h2 { font-size: clamp(2.8rem, 6vw, 5.6rem); margin-top: .8rem; }
  .contact .side p { margin-top: 1.4rem; color: var(--mute); line-height: 1.6; max-width: 38ch; }
  .contact .side dl { margin-top: 2rem; border-top: 1px solid var(--rule); }
  .contact .side dl div { display: grid; grid-template-columns: 7rem 1fr; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .contact .side dt { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: var(--mute); }
  .contact .side dd { margin: 0; }
  .contact .side dd a:hover { color: var(--red); }
  #contact-form { display: grid; gap: 1rem; background: var(--bg-2); padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--rule); }
  .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .cf-field { display: grid; gap: .5rem; }
  .cf-field > span { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: var(--mute); }
  .cf-field input, .cf-field select, .cf-field textarea { width: 100%; background: var(--bg-3); border: 1px solid transparent; padding: .85rem .9rem; border-radius: 0; resize: vertical; }
  .cf-field select option { background: var(--bg-3); }
  .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-color: var(--red); }
  .cf-submit { height: 56px; background: var(--red); color: #fff; border: 0; cursor: pointer; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .06em; font-size: 1.2rem; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
  .cf-note { min-height: 1.4em; font-size: .92rem; color: var(--fg); }
  .cf-note[data-state="error"] { color: #ff8d7f; }

  /* footer */
  footer { border-top: 1px solid var(--rule); padding-top: 3rem; overflow: hidden; }
  .foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
  .foot h4 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: var(--mute); margin-bottom: .9rem; }
  .foot a, .foot span { display: block; padding: .25rem 0; }
  .foot a:hover { color: var(--red); }
  .wordmark { margin-top: 3rem; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(2rem, 11.4vw, 12rem); line-height: .8; white-space: nowrap; color: var(--bg-3); }
  .wordmark span { color: var(--red); }
  .legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 0 2rem; font-size: .8rem; color: var(--mute); border-top: 1px solid var(--rule); }

  .note { position: fixed; left: 1rem; bottom: 1rem; background: var(--fg); color: var(--bg); font-size: .78rem; padding: .55rem .9rem; z-index: 60; }
  .note a { text-decoration: underline; margin-left: .5rem; }

  @media (max-width: 960px) {
    .links { display: none; }
    .menu-btn { display: inline-flex; align-items: center; }
    .mobile-menu { position: fixed; inset: 76px 0 0 0; z-index: 19; background: var(--bg); padding: 2rem var(--pad); flex-direction: column; }
    .menu-open .mobile-menu { display: flex; }
    .menu-open nav { background: var(--bg); }
    .mobile-menu a { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 2.4rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
    .hero, .planner-grid, .coach, .faq, .contact { grid-template-columns: 1fr; }
    .hero .media { position: absolute; inset: 0; }
    .hero .media::before { background: linear-gradient(0deg, var(--bg) 25%, #131211aa 60%, #13121155 100%); }
    .hero .tag { display: none; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stats div:nth-child(3) { border-left: 0; }
    .stats div:nth-child(n+3) { border-top: 1px solid var(--rule); }
    .strips { flex-direction: column; height: auto; }
    .strip, .strip:hover, .strip.on { flex: none; height: 440px; }
    .strip img, .strips:hover .strip.on:not(:hover) img { filter: none; }
    .strip .more, .strips:hover .strip.on:not(:hover) .more { grid-template-rows: 1fr; }
    .step { grid-template-columns: 5rem 1fr; }
    .step p { grid-column: 1 / 3; }
    #plan-out { position: static; }
    .pf-row { grid-template-columns: 1fr 1fr; }
    .pf-opts-4 { grid-template-columns: 1fr 1fr; }
    .coach .pic { height: 70vh; }
    .coach .pic::after { background: linear-gradient(0deg, var(--bg) 0%, #13121100 40%); }
    .board-row > div { padding: .9rem; font-size: .92rem; }
    .cf-row { grid-template-columns: 1fr; }
    .foot { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    nav .btn { display: none; }
    .coach .creds { grid-template-columns: 1fr; }
    .coach .creds div:nth-child(even) { padding-left: 0; border-left: 0; }
    .plan-phases li { grid-template-columns: 1fr; gap: .2rem; }
  }
  @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

  /* ===== Scroll fly-through (animated direction) ===== */
  .fly { position: relative; height: 100dvh; overflow: hidden; background: var(--bg); }
  .fly canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
  .fly canvas.ready { opacity: 1; }
  .fly .shade { position: absolute; inset: 0; pointer-events: none; background:
      radial-gradient(120% 90% at 50% 45%, #13121100 40%, #131211cc 100%),
      linear-gradient(0deg, #131211 0%, #13121100 22%); }
  .fly .stage { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 45%; pointer-events: none; }
  .scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--pad) 5rem; opacity: 0; will-change: transform, opacity; }
  .scene.live { pointer-events: auto; }
  .scene.center { align-items: center; text-align: center; }
  .scene.left { align-items: flex-start; max-width: 1440px; margin: 0 auto; }

  .fly-title { font-size: clamp(3.4rem, 10.5vw, 11rem); text-shadow: 0 10px 60px #0009; }
  .fly-title em { color: var(--red); }
  .fly-sub { margin-top: 1.4rem; max-width: 44ch; font-size: 1.1rem; line-height: 1.55; color: #cfc9bf; }
  .fly .ctas { justify-content: center; }
  .fly-chip { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; padding: .5rem .9rem; background: #13121199; border: 1px solid var(--rule); backdrop-filter: blur(8px); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; }
  .fly-chip i { width: 8px; height: 8px; background: var(--red); transform: skewX(-12deg); }

  /* zone card (glass panel that slides in over the moving gym) */
  .zone { width: min(420px, 88vw); background: #1c1a18b8; border: 1px solid #ece8e126; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 #ffffff14, 0 30px 60px -30px #000; padding: 1.4rem; display: grid; grid-template-columns: 110px 1fr; gap: 1.1rem; align-items: center; }
  .zone img { width: 110px; height: 140px; object-fit: cover; object-position: 50% 25%; }
  .zone .k { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: var(--red); }
  .zone h3 { font-size: clamp(2rem, 3vw, 2.7rem); margin-top: .3rem; }
  .zone p { margin-top: .5rem; font-size: .92rem; line-height: 1.45; color: #cfc9bf; }
  .zone-label { position: absolute; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .85; font-size: clamp(3rem, 8vw, 8.5rem); color: #ece8e1; text-shadow: 0 10px 50px #000a; white-space: nowrap; }

  /* programme cards fan (membership-style) */
  .fan { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; margin-top: 2rem; }
  .pcard { width: clamp(180px, 19vw, 260px); background: #1c1a18d9; border: 1px solid #ece8e126; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 1.2rem; text-align: left; box-shadow: 0 30px 60px -30px #000; transform-origin: 50% 120%; }
  .pcard.hot { border-color: var(--red); background: #2a1512e0; }
  .pcard .t { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.9rem; line-height: .9; }
  .pcard .s { margin-top: .4rem; font-size: .82rem; color: var(--mute); }
  .pcard ul { list-style: none; padding: 0; margin: 1rem 0; font-size: .86rem; color: #d8d2c8; }
  .pcard li { padding: .4rem 0; border-top: 1px solid var(--rule); }
  .pcard .btn { width: 100%; height: 42px; font-size: .92rem; }
  .pcard .badge { display: inline-block; margin-bottom: .6rem; padding: .2rem .5rem; background: var(--red); font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; }

  .fly-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ece8e114; }
  .fly-progress span { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); }
  .fly-hint { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; color: var(--mute); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
  .fly-hint::after { content: ""; width: 1.5px; height: 34px; background: linear-gradient(var(--red), transparent); animation: drip 1.6s ease-in-out infinite; }
  @keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
  .fly-loader { position: absolute; right: var(--pad); bottom: 1.4rem; font-family: var(--display); font-weight: 600; letter-spacing: .14em; font-size: .75rem; color: var(--mute); text-transform: uppercase; }

  #watch, #why, #proof, #story { overflow-x: clip; }
  html, body { overflow-x: clip; }


  /* stage photo inside the Mr. Pakistan scene */
  .stage-card { position: absolute; right: var(--pad); top: 50%; transform: translateY(-46%) rotate(3deg); width: min(30vw, 380px); background: #1c1a18; padding: .6rem .6rem .5rem; box-shadow: 0 40px 80px -30px #000; }
  .stage-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: 50% 20%; }
  .stage-card figcaption { display: flex; justify-content: space-between; gap: .5rem; padding-top: .5rem; font-size: .72rem; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }

  /* proof: pinned horizontal gallery */
  .proof { position: relative; background: var(--bg); overflow: hidden; }
  .proof-pin { height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 2.4rem; }
  .proof-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
  .proof-head h2 { font-size: clamp(3rem, 7vw, 6.6rem); margin-top: .8rem; }
  .proof-head h2 em { color: var(--red); }
  .proof-head p { max-width: 38ch; color: var(--mute); line-height: 1.55; }
  .proof-track { display: flex; align-items: center; gap: 1.2rem; padding: 0 var(--pad); width: max-content; will-change: transform; }
  .proof-track figure { position: relative; flex: none; overflow: hidden; background: var(--bg-2); }
  .proof-track img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.12); }
  .proof-track figcaption { position: absolute; left: .8rem; bottom: .8rem; padding: .3rem .6rem; background: var(--red); font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
  .p-tall { width: clamp(240px, 24vw, 380px); height: clamp(320px, 52vh, 520px); }
  .p-sq { width: clamp(260px, 30vw, 440px); height: clamp(260px, 42vh, 440px); }
  .p-low { transform: translateY(8vh); }
  .p-high { transform: translateY(-7vh); }
  .p-end { flex: none; width: clamp(260px, 28vw, 420px); padding: 0 1rem; }
  .p-end .display { font-size: clamp(3rem, 6vw, 5.6rem); margin-bottom: 1.4rem; }

  @media (max-width: 960px) {
    .stage-card { position: relative; right: auto; top: auto; transform: rotate(2deg); width: 56vw; margin-top: 1.4rem; }
    .stage-card img { aspect-ratio: 3/4; }
    .proof-pin { height: auto; padding: 5rem 0; }
    .proof-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
    .proof-track figure, .p-end { scroll-snap-align: start; }
    .p-low, .p-high { transform: none; }
    .p-tall { width: 70vw; height: 88vw; } .p-sq { width: 80vw; height: 80vw; }
  }


  /* hero: copy + real coaching video */
  .scene.hero-split { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); max-width: 1440px; margin: 0 auto; }
  .hero-split .fly-title { font-size: clamp(3.2rem, 7.6vw, 8.4rem); }
  .hero-video { position: relative; justify-self: end; width: min(100%, 400px); aspect-ratio: 4/5; background: #1c1a18; padding: .5rem; box-shadow: 0 40px 90px -30px #000; transform: rotate(2deg); }
  .hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-video figcaption { position: absolute; left: 1.1rem; bottom: 1.1rem; display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem; background: #131211cc; backdrop-filter: blur(6px); font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
  .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: rec 1.4s ease-in-out infinite; }
  @keyframes rec { 50% { opacity: .25; } }

  /* client story */
  .story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
  .story h2 { font-size: clamp(3rem, 6.5vw, 6rem); margin-top: .8rem; }
  .story h2 em { color: var(--red); }
  .story-copy > p:not(.kicker) { margin-top: 1.4rem; color: var(--mute); line-height: 1.6; max-width: 44ch; }
  .story-points { list-style: none; padding: 0; margin: 1.8rem 0 2rem; border-top: 1px solid var(--rule); }
  .story-points li { padding: .9rem 0; border-bottom: 1px solid var(--rule); display: flex; gap: .8rem; align-items: baseline; }
  .story-points li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--red); transform: skewX(-12deg); }
  .story-player { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 9/16; background: #000; border: 1px solid var(--rule); box-shadow: 0 40px 90px -30px #000; }
  .story-player video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .story-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; border: 0; cursor: pointer; background: linear-gradient(0deg, #131211d9, #13121133 55%); color: #fff; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .08em; }
  .story-play svg { width: 74px; height: 74px; padding: 20px; background: var(--red); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
  .story-player.playing .story-play { display: none; }

  @media (max-width: 960px) {
    .scene.hero-split { grid-template-columns: 1fr; align-content: center; gap: 1.2rem; padding-top: 5.5rem; }
    .hero-split .fly-title { font-size: clamp(2.6rem, 11vw, 4rem); }
    .hero-split .fly-sub { font-size: .95rem; margin-top: .8rem; }
    .hero-video { justify-self: start; width: 52vw; max-height: 34vh; aspect-ratio: auto; transform: rotate(1.5deg); }
    .hero-video video { height: calc(34vh - 1rem); }
    .story-grid { grid-template-columns: 1fr; }
    .story-player { width: min(100%, 360px); }
  }


  /* standalone hero (before the gym fly-through) */
  .hero2 { position: relative; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
  .hero2-bg { position: absolute; inset: 0; background:
      radial-gradient(60% 70% at 78% 45%, #e0321f2e 0%, #e0321f00 60%),
      radial-gradient(50% 60% at 10% 90%, #e0321f14 0%, #e0321f00 70%),
      linear-gradient(180deg, #131211 0%, #0f0e0d 100%); }
  .hero2-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, #ece8e10a 1px, transparent 1px); background-size: calc(100% / 12) 100%; mask-image: linear-gradient(180deg, #000, transparent 85%); }
  .hero2-inner { position: relative; flex: 1; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); width: 100%; max-width: 1440px; margin: 0 auto; padding: 7rem var(--pad) 2.5rem; }
  .hero2 .fly-title { font-size: clamp(3.2rem, 7.6vw, 8.4rem); }
  .hero2 .ctas { justify-content: flex-start; }
  .hero2-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
  .hero2-stats div { padding: 1.3rem var(--pad); border-left: 1px solid var(--rule); }
  .hero2-stats div:first-child { border-left: 0; }
  .hero2-stats b { display: block; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
  .hero2-stats span { font-size: .82rem; color: var(--mute); }
  .story-play { inset: auto 1rem 1rem auto; flex-direction: row; gap: .5rem; padding: .6rem .9rem; background: #131211cc; backdrop-filter: blur(6px); font-size: .85rem; }
  .story-play svg { width: 34px; height: 34px; padding: 7px; }
  @media (max-width: 960px) {
    .hero2-inner { grid-template-columns: 1fr; padding-top: 6rem; gap: 1.8rem; }
    .hero2 .fly-title { font-size: clamp(2.8rem, 12vw, 4.4rem); }
    .hero2 .hero-video { justify-self: start; width: min(78vw, 360px); max-height: none; aspect-ratio: 4/5; }
    .hero2 .hero-video video { height: 100%; }
    .hero2-stats { grid-template-columns: 1fr 1fr; }
    .hero2-stats div:nth-child(3) { border-left: 0; }
    .hero2-stats div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  }


  /* ===== whole-page scroll journey: the gym keeps moving behind every section ===== */
  .bgv { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
  .bgv canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
  .bgv canvas.ready { opacity: 1; }
  .bgv-shade { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, #13121100 40%, #131211cc 100%), linear-gradient(0deg, #131211 0%, #13121100 22%); }
  .bgv-dim { position: absolute; inset: 0; background: #131211; opacity: 0; }
  .fly, .proof { background: transparent; }
  .planner { background: #1c1a18b3; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  #contact-form { background: #1c1a18cc; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .glass-sec { position: relative; }
  .faq-item, .step, .board, .coach .txt { position: relative; }
  footer { background: #131211e6; }
  .pf-group, .pf-row, .pf-range, .pf-submit, .faq-item, .cf-row, .cf-field, .cf-submit { will-change: transform, opacity; }


  /* testimonials wall */
  .t-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .t-card { margin: 0; }
  .t-card:nth-child(2) { margin-top: 3rem; }
  .t-card .story-player { width: 100%; }
  .t-card figcaption { margin-top: .7rem; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
  /* pricing */
  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .plan-card { position: relative; padding: clamp(1.4rem, 3vw, 2.2rem); background: #1c1a18cc; border: 1px solid var(--rule); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; }
  .plan-card.hot { border-color: var(--red); background: #2a1512e0; }
  .plan-card .badge { position: absolute; top: -.8rem; left: 1.4rem; padding: .25rem .6rem; background: var(--red); font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
  .p-name { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 2.2rem; line-height: .9; }
  .p-sess { margin-top: .3rem; color: var(--mute); }
  .p-price { margin-top: 1.4rem; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(3rem, 5vw, 4.4rem); line-height: .9; }
  .p-price span { font-size: .35em; color: var(--mute); vertical-align: top; }
  .p-price small { font-size: .28em; color: var(--mute); font-style: normal; margin-left: .3rem; }
  .p-total { margin-top: .5rem; font-size: .9rem; color: var(--mute); }
  .p-ask { margin-top: 1.2rem; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
  .plan-card ul { list-style: none; padding: 0; margin: 1.4rem 0 1.6rem; border-top: 1px solid var(--rule); flex: 1; }
  .plan-card li { padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: .95rem; }
  .plan-card li b { color: #fff; }
  .included { margin-top: 1.4rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: #1c1a18b3; border: 1px solid var(--rule); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .inc-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
  .inc-head h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
  .inc-head p { color: var(--red); font-weight: 600; }
  .inc-list { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.4rem; }
  .inc-list li { padding: .7rem 0 .7rem 1.1rem; border-top: 1px solid var(--rule); font-size: .92rem; position: relative; }
  .inc-list li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: 7px; height: 7px; background: var(--red); transform: skewX(-12deg); }
  .policy { margin-top: 1.2rem; font-size: .8rem; color: var(--mute); line-height: 1.5; }
  @media (max-width: 960px) {
    .plans { grid-template-columns: 1fr; gap: 1.4rem; }
    .inc-list { grid-template-columns: 1fr 1fr; }
    .t-wall { gap: .6rem; }
    .t-card:nth-child(2) { margin-top: 1.5rem; }
    .t-card figcaption { font-size: .85rem; }
  }
  @media (max-width: 480px) { .inc-list { grid-template-columns: 1fr; } .t-card .story-play span { display: none; } }


  /* four testimonials: heading on top, videos in a row */
  .story-grid { grid-template-columns: 1fr !important; }
  .story-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: end; }
  .story-copy > .kicker, .story-copy > h2 { grid-column: 1; }
  .story-copy > p:not(.kicker), .story-copy > .story-points, .story-copy > .btn { grid-column: 2; }
  .story-copy > .btn { justify-self: start; }
  .t-wall { grid-template-columns: repeat(4, 1fr) !important; }
  .t-card:nth-child(2), .t-card:nth-child(4) { margin-top: 3rem; }
  @media (max-width: 960px) {
    .story-copy { grid-template-columns: 1fr; }
    .story-copy > * { grid-column: 1 !important; }
    .t-wall { grid-template-columns: 1fr 1fr !important; }
    .t-card:nth-child(2), .t-card:nth-child(4) { margin-top: 1.5rem; }
  }


  /* mobile: horizontal rows move left as the page scrolls down (driven by fly.js) */
  @media (max-width: 767px) {
    #reels.scroll-x, .proof-track.scroll-x { overflow: visible; width: max-content; scroll-snap-type: none; padding-bottom: 0; will-change: transform; }
    #reels.scroll-x { grid-auto-columns: 62vw; }
    .planner.pin-mode #plan-out:not(.has-plan) { display: none; }
    .planner.pin-mode .head[data-reveal] { opacity: 1; transform: none; }
    .t-wall.scroll-x { display: flex !important; gap: .8rem; margin-top: 1.4rem; }
    .t-wall.scroll-x .t-card { flex: none; width: 64vw; margin-top: 0 !important; }
    .t-wall.scroll-x .t-card:nth-child(even) { margin-top: 1.6rem !important; }
    .story-copy { margin-bottom: 1.8rem; }
    .t-card .story-play span { display: inline !important; }
  }

  /* generic scroll animations for the sections below */
  .line-mask { display: block; overflow: hidden; }
  .line-mask > span { display: inline-block; }
  .parallax { overflow: hidden; }
  .parallax img { will-change: transform; }

  @media (max-width: 960px) {
    .fan { flex-wrap: wrap; gap: .6rem; }
    .pcard { width: calc(50% - .3rem); padding: .9rem; }
    .pcard ul { display: none; }
    .pcard .t { font-size: 1.4rem; }
    .zone { grid-template-columns: 80px 1fr; padding: 1rem; }
    .zone img { width: 80px; height: 104px; }
    .zone-label { font-size: 3.2rem; }
  }
  @media (prefers-reduced-motion: reduce) { .fly-hint::after { animation: none; } }