/* ============================================================
   LMN METHOD
   Palette taken from his actual product line: Bone + Walnut.
   ============================================================ */

@font-face{font-family:'Archivo';src:url('../fonts/archivo.woff2') format('woff2');font-weight:100 900;font-display:swap;}

:root{
  /* Warmer, brighter, less black-and-white — grounded in his real palette,
     not invented colour. His merch is Bone + Walnut, his footage is warm,
     his one accent is a burnt orange. So: the darks are lifted off pure
     black to a warm espresso (they read brown, not black), the bone is a
     touch brighter, the ember is richer, and two warm brights are added —
     amber (a gold lift) and clay (a martial-arts red) — used as accents. */
  --ink:#17110B;
  --ink-2:#211812;
  --ink-3:#2E2118;
  --bone:#F1E8D7;
  --bone-2:#DCCDB2;
  --bone-dim:#9C8C79;
  --walnut:#6A4A34;
  --walnut-lt:#A9743F;
  --walnut-dk:#3F2B1D;
  --ember:#DA6A2C;
  --amber:#F0A44A;   /* bright warm gold — the "brighten it up" lever */
  --clay:#BE4A2E;    /* deep warm red — martial-arts heat, used sparingly */

  /* The earthy-but-colourful accent SYSTEM (21/07/2026 redesign).
     Cream + walnut stay the brand base; these give each section its own
     colour so the page reads alive, not warm-mono. The *-ink variants are
     the darkened text-safe versions (≥4.5:1 on the cream surfaces). */
  --terra:#C4622D;      --terra-ink:#96421A;
  /* Was forest pine (#3F5D45) — warmed to olive so it stops clashing with
     the walnut/brown (Ryan, 21/07). Olive sits in the earth family. */
  --pine:#6E6A38;       --pine-ink:#565225;   --pine-deep:#4A4720;
  --teal:#40706B;       --teal-ink:#2F5D59;
  --ochre:#C9922E;      --ochre-ink:#7C5A12;
  --sagec:#7A8663;      --sage-ink:#535E42;

  /* One family, doing everything through weight and tracking — the way
     the garment print does it. Anton was dropped: a heavy condensed
     display read as a fight promoter, while his actual brand is quiet,
     wide-set and premium. The footage carries the aggression now. */
  --display:'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body:'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --track-display:.06em;
  --track-wide:.28em;

  --wrap:1240px;
  --gut:clamp(20px, 5vw, 64px);
  /* Softer geometry for a warmer, more inviting feel: small radius for
     controls, a generous one for cards and media frames. */
  --r:6px;
  --r-card:18px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:clamp(15px,1.05vw,17px);line-height:1.65;
  font-weight:400;letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--bone);color:var(--ink);padding:12px 20px;}
.skip:focus{left:8px;top:8px;}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ember);outline-offset:3px;border-radius:var(--r);
}

/* ── type ───────────────────────────────────────────── */
.h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.06;
  letter-spacing:var(--track-display);
  text-transform:uppercase;margin:0 0 .6em;
}
.eyebrow{
  font-size:.68rem;letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--walnut-lt);font-weight:500;margin:0 0 1.4rem;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--bone);line-height:1.5;}
p{color:var(--bone-dim);}
p.lead{color:var(--bone);}

/* ── buttons ────────────────────────────────────────── */
/* Pill-shaped and terracotta now: the primary action carries the site's
   signature warmth on dark AND cream surfaces. */
.btn{
  --bg:#B4511E;--fg:#FDF6E8;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--bg);color:var(--fg);
  font-weight:600;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.95em 1.9em;border:1px solid var(--bg);border-radius:999px;
  cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 10px 30px -14px rgba(150,66,26,.55);
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .35s;
}
.btn:hover{transform:translateY(-2px);--bg:#9A3F12;box-shadow:0 16px 36px -14px rgba(150,66,26,.7);}
.btn:active{transform:translateY(0);}
.btn--lg{padding:1.15em 2.4em;font-size:.92rem;}
.btn--sm{padding:.7em 1.3em;font-size:.75rem;}
.btn--ghost{--bg:transparent;--fg:var(--bone);border-color:rgba(233,224,209,.32);box-shadow:none;}
.btn--ghost:hover{--bg:rgba(233,224,209,.08);--fg:var(--bone);border-color:var(--bone);box-shadow:none;}

/* ══════════════ NAV ══════════════ */
.nav{
  position:fixed;inset:0 0 auto;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--gut);
  transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
/* Stuck nav is CREAM glass now: the page below the hero is cream, and a
   dark bar over it read heavy. Text re-tints walnut to match. */
.nav.is-stuck{
  background:rgba(236,227,207,.86);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(36,24,17,.12);padding-block:12px;
}
.nav.is-stuck .nav__mark{color:#241811;}
.nav.is-stuck .nav__sub{color:#96421A;}
.nav.is-stuck .nav__links a{color:#6E6050;}
.nav.is-stuck .nav__links a:hover{color:#241811;}
.nav.is-stuck .nav__links a::after{background:#241811;}
.nav.is-stuck .motion-toggle{color:#6E6050;}
.nav__brand{display:flex;align-items:baseline;gap:.5em;}
.nav__mark{font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:.2em;line-height:1;}
.nav__sub{font-size:.56rem;letter-spacing:.42em;color:var(--walnut-lt);font-weight:500;}
.nav__links{display:flex;gap:30px;}
.nav__links a{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--bone-dim);position:relative;padding-block:4px;transition:color .3s;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--bone);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--bone);}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav__right{display:flex;align-items:center;gap:14px;}

.motion-toggle{
  display:inline-flex;align-items:center;gap:.5em;background:none;border:0;cursor:pointer;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);
  padding:6px 4px;
}
.motion-toggle__dot{width:7px;height:7px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 0 rgba(201,98,46,.6);animation:pulse 2.6s infinite;}
.motion-toggle[aria-pressed="true"] .motion-toggle__dot{background:var(--bone-dim);animation:none;box-shadow:none;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,98,46,.5);}70%{box-shadow:0 0 0 7px rgba(201,98,46,0);}100%{box-shadow:0 0 0 0 rgba(201,98,46,0);}}

@media(max-width:900px){
  .nav__links{display:none;}
  .motion-toggle__label{display:none;}
}
/* The sticky bottom CTA takes over on small screens, so the nav
   button is redundant and was pushing the header past the viewport. */
@media(max-width:560px){
  .nav__right .btn{display:none;}
  .nav{padding-inline:20px;}
}

/* ══════════════ HERO — the one bet ══════════════ */
.hero{position:relative;}
.hero__spacer{height:200vh;}
.hero__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;background:var(--ink);
}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Source is 4:3; on wide viewports cover crops top and bottom. Bias
     upward so heads and the standing fighter stay in frame. */
  object-position:center 25%;
}
/* Let the footage's real colour show. The old grade crushed saturation to
   .55 and washed sepia over it, which is exactly the "black and white" look
   Lachlan asked to move away from. Now it keeps colour and just adds warmth
   and punch, so the film reads alive rather than a brown monochrome. */
/* Lighter, warmer cinema: the training loop is golden already, so the
   grade lifts it rather than crushing it. */
.hero__poster,.hero__video{
  filter:contrast(1.04) saturate(1.16) brightness(1.06);
  transform:scale(1.03);
}
.hero__video{opacity:0;transition:opacity 1.4s var(--ease);}
.hero__video.is-live{opacity:1;}
/* A warm amber-into-ember wash instead of the flat walnut duotone —
   ties the footage to the brand while adding, not removing, colour. */
.hero__grade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(240,164,74,.22), rgba(218,106,44,.14) 46%, rgba(23,17,11,.42));
  mix-blend-mode:soft-light;
}
/* Living warm light: two low glows that drift, so the dark hero is never
   flat black. Sits under the type, over the film. */
.hero__glow{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(48% 42% at 22% 26%, rgba(240,164,74,.34), transparent 68%),
    radial-gradient(52% 46% at 82% 78%, rgba(218,106,44,.30), transparent 70%);
  animation:heroGlow 14s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.42;}
  100%{transform:translate3d(-2%,-2%,0) scale(1.12);opacity:.6;}
}
html[data-motion="off"] .hero__glow{animation:none;}

.hero__vig{
  position:absolute;inset:0;pointer-events:none;
  /* Much lighter vignette than the fight-footage era: the film should
     glow, and the bottom fades toward the terracotta marquee below. */
  background:
    radial-gradient(130% 92% at 50% 40%, transparent 50%, rgba(23,17,11,.28) 84%, rgba(23,17,11,.6) 100%),
    linear-gradient(to bottom, rgba(23,17,11,.3) 0%, transparent 30%, transparent 62%, rgba(23,17,11,.5) 100%);
}
.hero__grain{
  position:absolute;inset:-50%;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}

/* The type spine. The two words are pushed apart so the headline
   and CTAs sit in the gap between them rather than on top of them. */
.hero__type{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding-block:11vh 9vh;
  pointer-events:none;z-index:2;text-align:center;
}
.hero__word{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.2rem,9.2vw,8.4rem);line-height:1;letter-spacing:.16em;
  font-weight:500;color:var(--bone);
  will-change:transform,opacity;
}
/* Blend per word, not on the container: the top word sits over the
   bright light beam where `overlay` glows, but the bottom word sits
   on the dark floor where `overlay` would swallow it entirely. */
.hero__word--1{mix-blend-mode:overlay;opacity:.95;}
/* MOVEMENT screens warm amber rather than plain bone, so the bottom of the
   hero carries colour instead of grey. */
.hero__word--2{mix-blend-mode:screen;opacity:.4;color:var(--amber);}

.hero__content{
  position:relative;z-index:4;text-align:center;padding-inline:var(--gut);
  display:grid;justify-items:center;gap:1.1rem;
  transform:translateY(2vh);
}
/* The film moves, so contrast behind the copy changes frame to frame —
   at one point the text sits on the referee's white shirt. A soft
   radial scrim guarantees legibility on every frame rather than most. */
.hero__content::before{
  content:'';position:absolute;left:50%;top:50%;
  /* Taller and a touch darker than before: the amber eyebrow and the
     italic "through" sit at the TOP of this stack, over live film, and on
     bright frames (white ring canvas, grey shorts) they were dropping below
     readable contrast. This guarantees a dark bed under every frame. */
  width:min(820px,96vw);height:min(600px,78vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(23,17,11,.72) 0%, rgba(23,17,11,.46) 48%, transparent 74%);
  pointer-events:none;z-index:-1;
}
.hero__eyebrow{
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--amber);font-weight:600;margin:0;
  text-shadow:0 1px 2px rgba(23,17,11,.98), 0 2px 20px rgba(23,17,11,.95);
}
.hero__h1{margin:0;display:grid;justify-items:center;gap:.5rem;}
/* The connective in the tagline, sitting between the two spine words.
   Lowercase, wide, amber — a quiet hinge, not a shout. */
.hero__through{
  font-family:var(--display);text-transform:lowercase;font-style:italic;
  font-weight:400;font-size:clamp(.9rem,1.5vw,1.15rem);letter-spacing:.42em;
  color:var(--amber);opacity:.95;
  text-shadow:0 1px 2px rgba(23,17,11,.98), 0 2px 22px rgba(23,17,11,.95);
}
.hero__h1line{
  font-family:var(--display);text-transform:uppercase;font-weight:500;
  font-size:clamp(1.05rem,2.1vw,1.7rem);line-height:1.35;letter-spacing:.14em;
  color:var(--bone);display:block;
  text-shadow:0 2px 24px rgba(23,17,11,.95), 0 0 60px rgba(23,17,11,.6);
}
.hero__sub{
  margin:0;max-width:44ch;
  font-size:clamp(.88rem,1.3vw,1.02rem);line-height:1.6;color:var(--bone-2);
  text-shadow:0 1px 14px rgba(23,17,11,.9);
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:.6rem;}
/* The what-you-get pills: small glass chips that say "this is a coaching
   offer" before a single word of body copy is read. */
.hero__pills{
  list-style:none;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin:.9rem 0 0;padding:0;
}
.hero__pills li{
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--bone);padding:7px 14px;border-radius:999px;
  background:rgba(23,17,11,.34);border:1px solid rgba(240,164,74,.38);
  backdrop-filter:blur(6px);
}
.hero__pills li:nth-child(4){border-color:rgba(233,224,209,.4);color:var(--amber);}

.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;
  display:grid;justify-items:center;gap:8px;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim);
}
.hero__scrollline{width:1px;height:44px;background:linear-gradient(var(--bone),transparent);
  animation:drop 2.4s var(--ease) infinite;transform-origin:top;}
@keyframes drop{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

@media(max-width:700px){ .hero__spacer{height:180vh;} }

/* ══════════════ MARQUEE ══════════════ */
/* The signature terracotta ribbon: a full-colour band bridging the warm
   hero film into the cream page. */
.marquee{
  overflow:hidden;border-block:1px solid rgba(36,24,17,.2);
  background:linear-gradient(100deg,#B4511E,#96421A 55%,#A8431C);
  padding-block:18px;position:relative;z-index:5;
}
.marquee__track{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite;}
.marquee__track span{
  font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.3em;
  text-transform:uppercase;color:#F7EDD9;white-space:nowrap;
  display:flex;align-items:center;gap:44px;
}
.marquee__track span::after{content:'';width:6px;height:6px;background:#F0A44A;border-radius:50%;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ══════════════ WHO ══════════════ */
/* Warm atmosphere on the dark sections so they read as deep espresso with
   light in the room, never flat black. Kept low-alpha and off to one side
   so it's felt, not seen. */
.who{
  padding-block:clamp(80px,12vw,150px);position:relative;z-index:5;
  background:
    radial-gradient(70% 60% at 92% 8%, rgba(240,164,74,.10), transparent 60%),
    var(--ink);
}
.who__grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(32px,6vw,84px);align-items:center;}
.who__media{
  position:relative;overflow:hidden;border-radius:var(--r-card);
  box-shadow:0 30px 70px -30px rgba(36,24,17,.45);
}
.who__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;
  filter:contrast(1.1) saturate(1.08) brightness(.96);
  transition:transform 1.2s var(--ease), filter .8s;
}
.who__media:hover img{transform:scale(1.045);filter:contrast(1.08) saturate(1.18) brightness(1.02);}
.who__mediatag{
  position:absolute;left:16px;bottom:16px;
  background:rgba(23,17,11,.78);backdrop-filter:blur(8px);
  padding:8px 14px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(233,224,209,.18);
  color:#F1E8D7;   /* chip sits on the photo, so light text regardless of section theme */
}
.who__body .h2{margin-bottom:.35em;}
.who__body p{margin-block:0 1.1rem;}

.quote{
  margin:1.8rem 0;padding:20px 24px;border-left:2px solid var(--walnut-lt);
  background:linear-gradient(90deg,rgba(91,64,48,.22),transparent);
}
.quote blockquote{margin:0;font-size:1.02rem;line-height:1.5;color:var(--bone);font-style:italic;}
.quote figcaption{margin-top:10px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);}
.quote figcaption a{color:var(--walnut-lt);text-decoration:underline;text-underline-offset:3px;}

/* ── verified professional record ─────────────────────── */
/* A self-contained DARK stat card that reads the same on a dark OR a cream
   section: it re-points its own text vars to light so the numbers stay
   readable on its espresso gradient even when the surrounding section is
   cream (the Who section is now cream). */
.record{
  --bone:#F1E8D7;--bone-2:#DCCDB2;--bone-dim:#B8AA90;
  --ember:#E8843C;--walnut-lt:#D98A4A;
  margin:1.8rem 0 1.4rem;border:1px solid rgba(233,224,209,.16);
  background:linear-gradient(135deg,#3A2A1C,#211711);
  padding:clamp(18px,2.4vw,26px);border-radius:var(--r);
}
.record__row{display:flex;align-items:center;gap:clamp(20px,4vw,44px);flex-wrap:wrap;}
.record__big{display:flex;align-items:baseline;gap:.12em;position:relative;padding-right:clamp(20px,4vw,40px);}
.record__big b{font-family:var(--display);font-size:clamp(2.6rem,6vw,4rem);line-height:.9;color:var(--bone);font-weight:300;letter-spacing:.02em;}
.record__big i{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);color:var(--walnut-lt);font-style:normal;}
.record__big span{
  position:absolute;left:0;bottom:-1.15em;white-space:nowrap;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
}
.record__split{display:flex;gap:clamp(18px,3vw,34px);border-left:1px solid rgba(233,224,209,.18);padding-left:clamp(18px,3vw,34px);}
.record__split div{display:grid;gap:3px;}
.record__split b{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1;color:var(--ember);font-weight:400;letter-spacing:.02em;}
.record__split span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);}
.record__meta{
  margin:2.1rem 0 0;font-size:.76rem;color:var(--bone-dim);
  padding-top:14px;border-top:1px solid rgba(233,224,209,.14);
}
.record__meta a{color:var(--walnut-lt);text-decoration:underline;text-underline-offset:3px;}
.record__meta a:hover{color:var(--bone);}

/* Amateur block. Deliberately quieter than the pro numbers above it:
   the 3-0 is the headline, this is the depth behind it. */
.record__am{
  margin-top:1.1rem;padding-top:1rem;
  border-top:1px solid rgba(233,224,209,.14);
}
.record__amlabel{
  display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--walnut-lt);font-weight:600;margin-bottom:.5rem;
}
.record__amline{
  margin:0 0 .3rem;font-size:.88rem;line-height:1.5;color:var(--bone-dim);
}
.record__amline b{color:var(--bone-2);font-weight:600;}
.record__amsrc{margin:.5rem 0 0;font-size:.72rem;}
.record__amsrc a{color:var(--walnut-lt);text-decoration:underline;text-underline-offset:3px;}
.record__amsrc a:hover{color:var(--bone);}

.fights{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:1px;background:rgba(233,224,209,.12);border:1px solid rgba(233,224,209,.12);}
.fight{
  background:var(--ink);padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:.82rem;
}
.fight__res{
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:var(--ember);color:var(--ink);padding:3px 9px;
}
.fight__opp{color:var(--bone);font-weight:600;}
.fight__where,.fight__date{color:var(--bone-dim);font-size:.76rem;}
.fight__date{margin-left:auto;}

/* .who__stats removed with the follower tiles, 20/07/2026. */

@media(max-width:860px){ .who__grid{grid-template-columns:1fr;} }

/* ══════════════ LIGHT SECTIONS ══════════════
   The palette has a bone tone that was doing nothing while every
   section sat on ink. Inverting a couple of sections gives the long
   scroll some rhythm, and makes the dark fight sections hit harder by
   contrast. Implemented by re-pointing the same variables, so every
   component inside keeps working untouched. */
/* Cream is now the site's dominant surface (Lachlan's call, 21/07/2026:
   "cream and brown like the tracksuits"). Tones taken from his actual Bone
   fabric (a warm greige cream) and Walnut fabric (deep espresso brown). Most
   content sections carry this; only the film/photo bands stay dark. */
.section--light{
  --ink:#ECE3CF;      /* Bone-fabric cream, warmer + deeper than paper white */
  --ink-2:#E4D9C1;
  --ink-3:#D8CBAF;
  --bone:#241811;     /* Walnut-fabric brown, the primary text colour */
  --bone-2:#4A3625;
  --bone-dim:#6E6050;
  /* Dark enough that the small letterspaced tags clear 4.5:1 on cream. */
  --walnut-lt:#8F4A1C;
  --ember:#A83D16;
  /* Per-section accent, re-pointed by the s-* modifiers below. */
  --acc:var(--terra);--acc-ink:var(--terra-ink);
  /* Warm cream with a faint amber wash, not flat paper. */
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(214,150,70,.18), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(168,61,22,.08), transparent 60%),
    #ECE3CF;
  color:#241811;
}
.section--light p{color:#5C4F42;}
.section--light .h2{color:#1E140D;}
.section--light .eyebrow{color:var(--acc-ink);}
/* Eyebrows in light sections carry a small accent dash, a quiet colour
   signature repeated down the page. */
.section--light .eyebrow::before{
  content:'';display:inline-block;width:22px;height:3px;border-radius:2px;
  background:var(--acc);margin-right:10px;vertical-align:middle;
  transform:translateY(-1px);
}
.section--light .btn--ghost{--bg:transparent;--fg:#1E140D;border-color:rgba(30,20,13,.32);box-shadow:none;}
.section--light .btn--ghost:hover{--bg:rgba(168,61,22,.08);--fg:#1E140D;border-color:var(--acc-ink);}

/* ── The colour rhythm: each section owns a hue ─────────────
   s-terra  : Who: warm amber-terracotta cream (his corner of the site)
   s-sage   : Method / FAQ: pale sage-cream, pine accents
   s-terra2 : Train: pale terracotta-cream, the invitation glows warm
   s-clay   : Fight night: clay-red heat on cream, the proof section
   s-teal   : Watch: soft teal-cream, camera-roll cool
   s-ochre  : Shop: ochre/mustard, garment gold */
.s-sage{
  --acc:var(--pine);--acc-ink:var(--pine-ink);
  background:
    radial-gradient(110% 80% at 90% 0%, rgba(122,134,99,.22), transparent 55%),
    radial-gradient(90% 70% at 4% 100%, rgba(63,93,69,.10), transparent 60%),
    #E7E4CE;
}
.s-terra2{
  --acc:var(--terra);--acc-ink:var(--terra-ink);
  background:
    radial-gradient(110% 85% at 10% 0%, rgba(196,98,45,.16), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(240,164,74,.14), transparent 60%),
    #EDDFC6;
}
.s-clay{
  --acc:var(--clay);--acc-ink:#A03318;
  background:
    radial-gradient(95% 70% at 6% 0%, rgba(190,74,46,.16), transparent 58%),
    radial-gradient(90% 80% at 100% 100%, rgba(168,61,22,.10), transparent 55%),
    #EBDDC9;
}
.s-teal{
  --acc:var(--teal);--acc-ink:var(--teal-ink);
  background:
    radial-gradient(110% 80% at 92% 4%, rgba(64,112,107,.16), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(64,112,107,.08), transparent 60%),
    #E4E3D2;
}
.s-ochre{
  --acc:var(--ochre);--acc-ink:var(--ochre-ink);
  background:
    radial-gradient(110% 85% at 88% 0%, rgba(201,146,46,.20), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(201,146,46,.08), transparent 60%),
    #ECE2C6;
}
/* Hairlines and card borders: the dark-theme light-bone borders vanish on
   cream, so re-tint them warm-brown inside light sections. */
.section--light .product{border-color:rgba(36,24,17,.16);}
.section--light .product:hover{border-color:rgba(36,24,17,.4);}
.section--light .sw{border-color:rgba(36,24,17,.28);}
.section--light .social{border-color:rgba(36,24,17,.2);}
.section--light .social:hover{border-color:var(--bone);background:rgba(36,24,17,.05);}

/* ══════════════ METHOD ══════════════
   Type-led, no photography. An earlier pass gave every pillar a large
   image; four big photos here plus ten in the gallery overpowered the
   page and buried the ideas. The Method is about how he thinks, so it
   is set as text with room to breathe. The photographs earn more
   attention by being rarer. */
.method{padding-block:clamp(80px,12vw,140px);position:relative;z-index:5;}
.method__h2{max-width:14ch;}
.method__intro{max-width:52ch;font-size:1.02rem;margin-bottom:clamp(52px,7vw,88px);}

.pillars{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}
/* Each pillar owns one of the accent hues, so colour is distributed through the
   section instead of a single warm monotone. */
.pillar{
  --pacc:var(--terra);--pacc-ink:var(--terra-ink);
  background:#F2ECDD;padding:clamp(26px,3vw,38px) clamp(20px,2.2vw,30px);
  display:grid;gap:14px;align-content:start;position:relative;
  border:1px solid rgba(36,24,17,.1);border-top:4px solid var(--pacc);
  border-radius:var(--r-card);
  box-shadow:0 18px 40px -26px rgba(36,24,17,.35);
  transition:background .5s var(--ease), transform .5s var(--ease), box-shadow .5s;
}
.pillar:hover{background:#F6F1E4;transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(36,24,17,.45);}
.pillar:nth-child(2){--pacc:var(--pine);--pacc-ink:var(--pine-ink);}
.pillar:nth-child(3){--pacc:var(--teal);--pacc-ink:var(--teal-ink);}
.pillar:nth-child(4){--pacc:var(--ochre);--pacc-ink:var(--ochre-ink);}
.pillar__n{
  font-family:var(--display);font-weight:200;
  font-size:2.4rem;line-height:1;letter-spacing:.04em;
  color:var(--pacc);opacity:.75;
}
.pillar__tag{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pacc-ink);font-weight:600;}
.pillar h3{
  font-family:var(--display);font-size:1.02rem;text-transform:uppercase;
  letter-spacing:.16em;font-weight:600;margin:0;
}
.pillar p{margin:0;font-size:.92rem;line-height:1.7;}
.pillar__q{
  margin-top:4px;padding-top:14px;border-top:1px solid rgba(25,20,16,.12);
  font-size:.86rem;font-style:italic;color:#4A3E33;
}

/* ══════════════ FIGHT NIGHT ══════════════
   A slideshow, not a mosaic.

   Two earlier attempts failed: nine equal tiles in a row overpowered
   the page, then an asymmetric grid mosaic left holes everywhere
   because auto-placement with mismatched spans staircases.

   One frame at a time fixes both. You see a single photo, so nothing
   overpowers; and every slide occupies the SAME fixed frame, so
   misalignment is impossible by construction. */
/* Light now: the s-clay modifier supplies the clay-on-cream heat. */
.gallery{
  padding-block:clamp(80px,12vw,140px) clamp(60px,8vw,100px);position:relative;z-index:5;
}
.gallery__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(34px,4.5vw,52px);}

/* The finish film — real fight-night footage as the centrepiece of the proof
   section. Keeps its own dark frame (like the slideshow and the record chip)
   on the cream section. Plays only while on screen, via main.js. */
.fightfilm{
  position:relative;margin:0 0 clamp(20px,3vw,32px);
  aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-card);background:#241811;
  box-shadow:0 34px 80px -34px rgba(36,24,17,.55);
}
@media(max-width:620px){ .fightfilm{aspect-ratio:4/3;} }
.fightfilm__poster,.fightfilm__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;
  filter:contrast(1.05) saturate(1.12) brightness(.96);
}
.fightfilm__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(23,17,11,.72) 0%,transparent 34%),
             radial-gradient(120% 100% at 50% 40%,transparent 60%,rgba(23,17,11,.4) 100%);
}
.fightfilm__cap{
  position:absolute;left:0;bottom:0;padding:clamp(16px,2.4vw,26px);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:#DCCDB2;
}
.fightfilm__cap span{color:var(--terra);font-weight:700;}

.slides{position:relative;}
/* The photos are dark; the section is cream. The frame keeps its own dark
   world (like the .record chip) and the chrome around it goes dark-on-cream. */
.slides__frame{
  box-shadow:0 34px 80px -34px rgba(36,24,17,.5);
  /* 4/3, not 16/9. The sources run 0.56 to 1.25, so a wide frame threw away
     most of the portrait shots' height. Nothing is cropped now regardless
     (see .slide img), but a squarer frame keeps the fill strip narrow. */
  position:relative;width:100%;aspect-ratio:4/3;
  overflow:hidden;border-radius:var(--r-card);background:#241811;
}
@media(max-width:620px){ .slides__frame{aspect-ratio:4/5;} }

.slide{
  position:absolute;inset:0;margin:0;background:#17110B;
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease), visibility .7s;
}
.slide.is-on{opacity:1;visibility:visible;}
/* Blurred copy of the same photo, filling whatever the contained image
   leaves. Carries the slow zoom so the foreground photo never moves and so
   can never drift out of frame. */
.slide__fill{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(38px) saturate(1) brightness(.44);
  transform:scale(1.14);
  transition:transform 7s linear;
}
.slide.is-on .slide__fill{transform:scale(1.22);}
html[data-motion="off"] .slide__fill{transition:none;transform:scale(1.14);}

.slide img{
  position:relative;
  width:100%;height:100%;object-fit:contain;display:block;
  /* Desaturated AND low contrast reads washed out — keep colour, push depth. */
  /* Real colour, not the old washed-sepia look. */
  filter:contrast(1.08) saturate(1.14) brightness(.98);
}

.slide__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(23,17,11,.9) 0%,rgba(23,17,11,.42) 22%,rgba(23,17,11,.1) 46%,transparent 70%);
}
.slide__cap{
  position:absolute;left:0;bottom:0;padding:clamp(18px,2.6vw,30px);
  display:grid;gap:6px;
}
/* Caption text sits ON the dark photo, so it is hardcoded light and must
   never follow the section's cream re-pointing. */
.slide__tag{
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:#F0A44A;
  text-shadow:0 1px 8px rgba(23,17,11,.9);
}
.slide__txt{font-size:.94rem;color:#F1E8D7;margin:0;max-width:46ch;line-height:1.5;}

/* ── controls ── */
.slides__bar{
  display:flex;align-items:center;gap:18px;
  margin-top:18px;
}
/* Controls live on the cream section, so they are dark-on-cream. */
.slides__count{
  font-size:.72rem;letter-spacing:.18em;color:var(--bone-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.slides__count b{color:var(--bone);font-weight:500;}
.slides__dots{display:flex;gap:6px;flex:1;}
.slides__dot{
  flex:1;height:3px;border-radius:2px;background:rgba(36,24,17,.18);border:0;padding:0;cursor:pointer;
  position:relative;overflow:hidden;transition:background .3s;
}
.slides__dot:hover{background:rgba(36,24,17,.4);}
.slides__dot[aria-current="true"]{background:var(--acc,#A83D16);}
.slides__nav{display:flex;gap:8px;}
.slides__btn{
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid rgba(36,24,17,.3);border-radius:50%;
  color:var(--bone);transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.slides__btn:hover{border-color:var(--bone);background:rgba(36,24,17,.07);}
.slides__btn:active{transform:scale(.94);}
.slides__btn svg{width:15px;height:15px;}

@media(max-width:560px){
  .slides__bar{flex-wrap:wrap;gap:12px;}
  .slides__dots{order:3;flex-basis:100%;}
}

/* No JS: show the first slide rather than an empty frame. */
.no-js .slide:first-child{opacity:1;visibility:visible;}

/* ══════════════ TRAIN ══════════════
   Light and warm now: the film that used to darken this section IS the
   hero. A coaching photo anchors the invitation; the session cards each
   own an accent colour. */
.train{padding-block:clamp(80px,12vw,150px);position:relative;z-index:5;overflow:hidden;}
.train__grid{
  display:grid;grid-template-columns:.72fr 1fr;gap:clamp(32px,6vw,84px);
  align-items:center;margin-bottom:clamp(20px,3vw,36px);
}
.train__media{
  position:relative;overflow:hidden;border-radius:var(--r-card);
  box-shadow:0 30px 70px -30px rgba(36,24,17,.5);
}
.train__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 68%;
  filter:contrast(1.06) saturate(1.1) brightness(1.0);
  transition:transform 1.2s var(--ease);
}
.train__media:hover img{transform:scale(1.045);}
.train__intro{max-width:46ch;font-size:1.02rem;}
@media(max-width:860px){ .train__grid{grid-template-columns:1fr;} }

.sessions{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:clamp(32px,5vw,56px);}
.session{
  --sacc:var(--terra);--sacc-ink:var(--terra-ink);
  border:1px solid rgba(36,24,17,.12);border-radius:var(--r-card);
  padding:clamp(24px,3vw,34px);
  display:grid;gap:10px;align-content:start;position:relative;overflow:hidden;
  background:#F4EEDF;
  box-shadow:0 20px 44px -28px rgba(36,24,17,.4);
  transition:border-color .4s, transform .5s var(--ease), box-shadow .5s;
}
.session::before{
  content:'';position:absolute;inset:0 auto 0 0;width:5px;
  background:var(--sacc);
}
.session:hover{border-color:rgba(36,24,17,.28);transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(36,24,17,.5);}
.session:nth-child(2){--sacc:var(--pine);--sacc-ink:var(--pine-ink);}
.session:nth-child(3){--sacc:var(--clay);--sacc-ink:#A03318;}
.session:nth-child(4){--sacc:var(--teal);--sacc-ink:var(--teal-ink);}
.session__kicker{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sacc-ink);font-weight:700;}
.session h3{font-family:var(--display);font-size:1.12rem;text-transform:uppercase;margin:0;font-weight:600;letter-spacing:.16em;}
.session p{margin:0;font-size:.93rem;}
.session__for{font-size:.78rem;color:var(--sacc-ink);border-top:1px solid rgba(36,24,17,.12);padding-top:12px;margin-top:4px;}
.session__go{
  margin-top:10px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--bone);display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
  background:none;border:0;padding:0;text-align:left;
}
.session__go::after{content:'→';transition:transform .35s var(--ease);}
.session:hover .session__go::after{transform:translateX(5px);}

.train__cta{margin-top:clamp(40px,6vw,64px);display:grid;justify-items:center;gap:14px;text-align:center;}
.train__note{font-size:.82rem;color:var(--bone-dim);margin:0;}

/* ══════════════ WATCH ══════════════ */
/* Light now: s-teal supplies the soft teal-cream. The video thumbnails
   stay their own dark world, like the slideshow frame. */
.watch{
  padding-block:clamp(80px,12vw,150px);position:relative;z-index:5;
}
.watch__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,52px);}
.watch__socials{display:flex;gap:12px;flex-wrap:wrap;max-width:100%;}
.social{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  border:1px solid rgba(233,224,209,.18);border-radius:var(--r);
  transition:border-color .35s, background .35s, transform .4s var(--ease);
  min-width:0;flex:0 1 auto;
}
.social__t,.social__n{white-space:nowrap;}
.social:hover{border-color:var(--bone);background:rgba(233,224,209,.06);transform:translateY(-2px);}
.social svg{width:19px;height:19px;flex:none;}
.social__t{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.social__n{font-size:.72rem;color:var(--bone-dim);}

.reel{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:18px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  scrollbar-width:thin;scrollbar-color:rgba(36,24,17,.4) transparent;
}
.reel::-webkit-scrollbar{height:5px;}
.reel::-webkit-scrollbar-thumb{background:rgba(36,24,17,.4);border-radius:9px;}
.reel::-webkit-scrollbar-track{background:rgba(36,24,17,.08);}

.vid{
  scroll-snap-align:start;position:relative;display:block;
  aspect-ratio:9/16;overflow:hidden;border-radius:var(--r-card);
  background:#241811;
  box-shadow:0 22px 48px -26px rgba(36,24,17,.5);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.vid:hover{transform:translateY(-5px);box-shadow:0 30px 60px -26px rgba(36,24,17,.6);}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease), filter .5s;filter:brightness(.88);}
.vid:hover img{transform:scale(1.06);filter:brightness(1);}
/* Scrim only where the caption sits. The old gradient dimmed the top of
   every thumbnail too, muddying the most colourful content on the page. */
.vid__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,17,11,.94) 0%,rgba(23,17,11,.2) 46%,transparent 66%);}
.vid__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:52px;height:52px;border-radius:50%;
  background:rgba(233,224,209,.14);backdrop-filter:blur(6px);
  border:1px solid rgba(233,224,209,.4);
  display:grid;place-items:center;opacity:0;
  transition:opacity .4s, transform .5s var(--ease);
}
/* Overlay chrome sits ON dark thumbnails: hardcoded light, never re-pointed. */
.vid__play::after{content:'';border-left:13px solid #F1E8D7;border-block:8px solid transparent;margin-left:4px;}
.vid:hover .vid__play{opacity:1;transform:translate(-50%,-50%) scale(1);}
.vid__tag{
  position:absolute;top:11px;left:11px;
  background:rgba(23,17,11,.72);backdrop-filter:blur(6px);color:#F1E8D7;
  padding:5px 10px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(233,224,209,.18);border-radius:999px;
}
.vid__meta{position:absolute;inset:auto 0 0;padding:14px;display:grid;gap:6px;}
.vid__cap{
  font-size:.79rem;line-height:1.4;color:#F1E8D7;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.vid__views{font-size:.66rem;letter-spacing:.1em;color:#C9B99F;display:flex;align-items:center;gap:5px;}
.vid__views::before{content:'';width:5px;height:5px;border-radius:50%;background:#F0A44A;}

.watch__foot{margin-top:clamp(28px,4vw,44px);display:flex;justify-content:center;}

/* ══════════════ SHOP ══════════════ */
.shop{padding-block:clamp(80px,12vw,150px);position:relative;z-index:5;}
.shop__head{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;margin-bottom:clamp(36px,5vw,60px);}
.shop__intro{max-width:46ch;margin-top:1rem;font-size:.98rem;}
.shop__intro em{color:var(--bone-2);font-style:italic;}
.shop__struggle{
  display:grid;gap:6px;text-align:right;
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(.9rem,1.7vw,1.4rem);line-height:1.5;letter-spacing:.34em;
  color:transparent;-webkit-text-stroke:1px var(--walnut-lt);
}
@media(max-width:760px){ .shop__struggle{display:none;} }

.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;max-width:900px;}
.product{
  border:1px solid rgba(36,24,17,.12);border-radius:var(--r-card);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  transition:border-color .4s, transform .5s var(--ease), box-shadow .5s;
  background:#F4EEDF;
  box-shadow:0 18px 42px -28px rgba(36,24,17,.4);
}
.product:hover{border-color:rgba(36,24,17,.32);transform:translateY(-5px);box-shadow:0 28px 54px -28px rgba(36,24,17,.5);}
.product__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-3);}
.product__media img{
  width:100%;height:100%;object-fit:cover;
  /* Mockups, not photography — hold them back tonally so they sit
     quietly beside the real fight images rather than competing. */
  filter:contrast(1.06) saturate(.85) brightness(.97);
  transition:transform .9s var(--ease), opacity .5s, filter .5s;
}
.product:hover .product__media img{filter:none;}
.product:hover .product__media img{transform:scale(1.05);}
.product__media img.is-alt{position:absolute;inset:0;opacity:0;}
.product:hover .product__media img.is-alt{opacity:1;}
.product__badge{
  position:absolute;top:12px;right:12px;background:var(--ember);color:var(--ink);
  padding:5px 11px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
}
.product__body{padding:14px;display:grid;gap:7px;align-content:start;}
.product__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.product__top>h3{flex:1;min-width:0;}
/* Tighter tracking so "LMN TRACKSUIT PANT" holds two lines in a narrow
   card instead of breaking to three and misaligning the row. */
.product h3{font-family:var(--display);font-size:.9rem;text-transform:uppercase;margin:0;font-weight:600;letter-spacing:.08em;line-height:1.2;}
.product__price{white-space:nowrap;}
.product__price{font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--bone);letter-spacing:.04em;}
.product__blurb{font-size:.78rem;margin:0;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.product__swatches{display:flex;gap:8px;align-items:center;}
.sw{width:17px;height:17px;border-radius:50%;border:1px solid rgba(233,224,209,.35);}
.sw--bone{background:#E4D9C6;}
.sw--walnut{background:#5B4030;}
.product__sizes{font-size:.7rem;letter-spacing:.1em;color:var(--bone-dim);text-transform:uppercase;}
.product__buy{
  margin-top:6px;display:inline-flex;align-items:center;gap:.5em;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--bone);
}
.product__buy::after{content:'↗';transition:transform .35s var(--ease);}
.product:hover .product__buy::after{transform:translate(3px,-3px);}

.shop__foot{margin-top:clamp(36px,5vw,56px);display:grid;justify-items:center;gap:12px;text-align:center;}
.shop__note{font-size:.78rem;color:var(--bone-dim);margin:0;}

/* ══════════════ FAQ ══════════════ */
.faq{padding-block:clamp(80px,12vw,140px);position:relative;z-index:5;}
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:start;}
.faq__head{position:sticky;top:110px;}
.faq__note{font-size:.88rem;max-width:28ch;}
.faq__list{display:grid;gap:10px;}
.qa{
  background:#F1EBDC;border:1px solid rgba(36,24,17,.12);border-radius:var(--r-card);
  transition:border-color .3s, background .3s;
}
.qa[open]{background:#F6F1E4;border-color:rgba(63,93,69,.4);}
.qa summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative;
  font-size:1.02rem;font-weight:600;color:var(--bone);
  transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{
  content:'';position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--acc-ink,#8F4A1C);border-bottom:1.5px solid var(--acc-ink,#8F4A1C);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .35s var(--ease), border-color .3s;
}
.qa[open] summary::after{transform:translateY(-20%) rotate(-135deg);border-color:var(--bone);}
.qa summary:hover{color:#96421A;}
.qa summary:focus-visible{outline:2px solid var(--ember);outline-offset:-3px;}
.qa__a{padding:0 52px 20px 22px;}
.qa__a p{margin:0;font-size:.94rem;line-height:1.65;}
@media(max-width:860px){
  .faq__grid{grid-template-columns:1fr;}
  .faq__head{position:static;}
}

/* ══════════════ BAND ══════════════ */
/* The full-colour moment: a deep warm clay/brick block (was pine green,
   which clashed with the brown — Ryan, 21/07), his ambition in cream across
   it, and the last big CTA before the footer. */
.band{
  padding-block:clamp(80px,11vw,130px);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(240,164,74,.16), transparent 55%),
    radial-gradient(80% 100% at 95% 100%, rgba(23,17,11,.32), transparent 60%),
    linear-gradient(135deg,#8E3C22,#742C17 58%,#5E230F);
  position:relative;z-index:5;overflow:hidden;
}
/* On the clay band a terracotta button would vanish, so the CTA goes cream. */
.btn.band__btn{--bg:var(--bone);--fg:#5E230F;border-color:var(--bone);box-shadow:0 12px 34px -16px rgba(23,17,11,.6);}
.btn.band__btn:hover{--bg:#fff;--fg:#5E230F;border-color:#fff;}
.band::before{
  content:'“';position:absolute;left:50%;top:-.12em;transform:translateX(-50%);
  font-family:var(--display);font-weight:200;font-size:clamp(11rem,26vw,20rem);
  line-height:1;color:rgba(240,164,74,.14);pointer-events:none;
}
.band__in{text-align:center;position:relative;}
.band__quote{
  font-family:var(--display);text-transform:uppercase;font-weight:300;
  font-size:clamp(1.2rem,3vw,2.4rem);line-height:1.45;letter-spacing:.1em;color:#F1E8D7;margin:0 0 .9rem;
  max-width:20ch;margin-inline:auto;
}
.band__attr{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#E9B96B;margin:0;}
.band__btn{margin-top:2rem;}

/* ══════════════ FOOTER ══════════════ */
/* Carry a warm ember glow into the footer so it doesn't drop to a flat
   near-black slab below the quote band — the one section that read
   "left behind" in the audit. */
/* Warm deep walnut, not near-black: the page closes on brand brown with
   an amber glow, the tracksuit's Walnut fabric as a room. */
.foot{
  padding-block:clamp(56px,8vw,90px) 28px;position:relative;z-index:5;
  background:
    radial-gradient(70% 80% at 8% 0%, rgba(218,106,44,.18), transparent 58%),
    radial-gradient(50% 60% at 96% 100%, rgba(240,164,74,.08), transparent 60%),
    linear-gradient(180deg,#33231A,#241811 70%);
}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;}
.foot__mark{font-family:var(--display);font-weight:600;font-size:1.6rem;line-height:1;letter-spacing:.2em;}
/* Square disc now, not the old wide wordmark, so it sizes off its own
   width rather than a 200x75 box. Slightly dimmed at rest so a bone
   circle doesn't punch a hole in a very dark footer. */
.foot__logo{
  display:block;width:clamp(88px,9vw,116px);height:auto;
  margin-bottom:1rem;border-radius:50%;
  opacity:.92;transition:opacity .4s var(--ease);
}
.foot__logo:hover{opacity:1;}
.book__callalt{font-size:.84rem;margin:0 0 .9rem;color:var(--bone-2);}
.book__callalt a{color:var(--ember);text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.foot__line{font-size:.68rem;letter-spacing:.3em;color:var(--walnut-lt);margin:.5rem 0 .2rem;}
.foot__loc{font-size:.8rem;margin:0;}
.foot__col h3{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);margin:0 0 1rem;font-weight:600;}
.foot__col a{display:block;font-size:.86rem;color:var(--bone-2);padding-block:5px;transition:color .3s;}
.foot__col a:hover{color:var(--amber);}
.foot__base{
  margin-top:clamp(40px,6vw,64px);padding-top:22px;border-top:1px solid rgba(233,224,209,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot__h3b{margin-top:1.6rem !important;}
.foot__meta{display:block;font-size:.8rem;color:var(--bone-dim);padding-block:5px;}
.foot__base p{font-size:.74rem;margin:0;}
.foot__base a{color:var(--bone-dim);text-decoration:underline;text-underline-offset:3px;transition:color .3s;}
.foot__base a:hover{color:var(--bone);}

/* ══════════════ DOC PAGES (privacy) ══════════════ */
.doc{background:var(--ink);}
.doc__wrap{max-width:760px;margin-inline:auto;padding:clamp(110px,14vh,160px) var(--gut) clamp(70px,10vw,110px);}
.doc__h1{
  font-family:var(--display);text-transform:uppercase;font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.25;letter-spacing:.1em;margin:0 0 1.2rem;color:var(--bone);
}
.doc__lead{font-size:1.05rem;color:var(--bone-2);margin:0 0 2.6rem;line-height:1.6;}
.doc__wrap h2{
  font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:.16em;
  font-size:.92rem;margin:2.4rem 0 .7rem;color:var(--bone);
}
.doc__wrap p, .doc__wrap li{font-size:.96rem;line-height:1.7;}
.doc__wrap ul{padding-left:1.1rem;margin:0 0 1rem;}
.doc__wrap li{margin-bottom:.4rem;}
.doc__wrap strong{color:var(--bone);}
.doc__foot{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(233,224,209,.14);}
.doc__foot a{color:var(--ember);text-decoration:underline;text-underline-offset:3px;}
/* ── The credit ─────────────────────────────────────────────
   The one deliberately crafted flourish on the site, and it stays
   quiet on purpose: this is Lachlan's site, not Ryan's. It does
   nothing until you either scroll to it or hover it.

   Archivo is a variable font (100-900), so the whole effect is the
   site's own design language pushed to its limit: weight and
   tracking doing the work, plus one ember foil sweep echoing the
   embossed merch. No new font, no new colour, no dependency.

   LEGIBILITY GUARD: the transparent text-fill lives inside @supports,
   so a browser without background-clip:text renders solid bone text
   instead of a blank line. Do not lift it out of that block. */
.foot__credit{margin-left:auto;}
.foot__credit .sig{
  position:relative;display:inline-block;
  color:var(--bone-2);
  font-weight:500;letter-spacing:.02em;
  padding-bottom:2px;
  transition:font-weight .8s var(--ease), letter-spacing .8s var(--ease);
}
.foot__credit .sig.is-lit,
.foot__credit:hover .sig{font-weight:680;letter-spacing:.11em;}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foot__credit .sig{
    background:linear-gradient(100deg,
      var(--bone-2) 0%,   var(--bone-2) 38%,
      var(--bone)   46%,  var(--ember)  50%, var(--bone) 54%,
      var(--bone-2) 62%,  var(--bone-2) 100%);
    background-size:300% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    transition:background-position 1.4s var(--ease),
               font-weight .8s var(--ease),
               letter-spacing .8s var(--ease);
  }
  .foot__credit .sig.is-lit,
  .foot__credit:hover .sig{background-position:0 0;}
}

/* Ember rule that draws itself in, left to right. */
.foot__credit .sig::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--ember) 0%,rgba(233,224,209,.30) 70%,transparent 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease);
}
.foot__credit .sig.is-lit::after,
.foot__credit:hover .sig::after{transform:scaleX(1);}

/* Motion off: skip straight to the resolved state, no sweep, no draw. */
html[data-motion="off"] .foot__credit .sig{
  transition:none;background-position:0 0;
  font-weight:680;letter-spacing:.11em;
}
html[data-motion="off"] .foot__credit .sig::after{transition:none;transform:scaleX(1);}
@media(max-width:760px){ .foot__grid{grid-template-columns:1fr 1fr;} }

/* ══════════════ BOOKING DIALOG ══════════════ */
.book{
  border:0;padding:0;max-width:640px;width:min(94vw,640px);
  background:var(--ink-2);color:var(--bone);
  border:1px solid rgba(233,224,209,.18);border-radius:var(--r);
  box-shadow:0 40px 120px rgba(0,0,0,.8);
  /* The form is taller than a short viewport, so it scrolls itself.
     overscroll-behavior:contain stops a flick at the end of the form
     from chaining into the page behind. Lenis is told to keep off this
     subtree in main.js (see LENIS_EXEMPT) or the wheel does nothing. */
  max-height:88vh;      /* fallback */
  max-height:88svh;     /* the small viewport, so mobile browser chrome can't clip it */
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.book::backdrop{background:rgba(6,5,4,.86);backdrop-filter:blur(6px);}
.book__in{padding:clamp(26px,4vw,44px);}
.book__x{position:absolute;top:10px;right:10px;margin:0;}
.book__x button{
  background:none;border:0;font-size:1.9rem;line-height:1;color:var(--bone-dim);
  cursor:pointer;padding:6px 12px;transition:color .3s;
}
.book__x button:hover{color:var(--bone);}
.book__h{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.6rem);text-transform:uppercase;margin:0 0 1.7rem;font-weight:600;line-height:1.25;letter-spacing:.14em;}

.book__steps{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 1.8rem;}
.book__steps li{
  flex:1;display:flex;align-items:center;gap:8px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);
  padding-bottom:10px;border-bottom:2px solid rgba(233,224,209,.14);
  transition:color .35s, border-color .35s;
}
.book__steps li span{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(233,224,209,.1);font-size:.68rem;flex:none;transition:background .35s,color .35s;
}
.book__steps li.is-active{color:var(--bone);border-bottom-color:var(--ember);}
.book__steps li.is-active span{background:var(--ember);color:var(--ink);font-weight:700;}
.book__steps li.is-done{color:var(--bone-2);border-bottom-color:var(--walnut-lt);}
.book__steps li.is-done span{background:var(--walnut-lt);color:var(--ink);}

.book__panel{display:none;border:0;padding:0;margin:0;min-inline-size:0;}
.book__panel.is-active{display:block;animation:fadeUp .45s var(--ease);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.book__legend{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--walnut-lt);
  padding:0;margin:0 0 .8rem;display:block;
}
.book__legend:not(:first-of-type){margin-top:1.6rem;}
.book__opts{display:grid;gap:10px;}
.book__opts--chips{display:flex;flex-wrap:wrap;gap:8px;}

.opt{
  display:block;cursor:pointer;position:relative;
  border:1px solid rgba(233,224,209,.2);padding:15px 18px;border-radius:var(--r);
  transition:border-color .3s, background .3s;
}
.opt:hover{border-color:rgba(233,224,209,.5);background:rgba(233,224,209,.04);}
.opt input{position:absolute;opacity:0;width:0;height:0;}
.opt:has(input:checked){border-color:var(--ember);background:rgba(201,98,46,.1);}
.opt:has(input:focus-visible){outline:2px solid var(--ember);outline-offset:2px;}
.opt__t{display:block;font-weight:600;font-size:.95rem;}
.opt__d{display:block;font-size:.8rem;color:var(--bone-dim);margin-top:3px;}

.chip{
  cursor:pointer;position:relative;
  border:1px solid rgba(233,224,209,.2);padding:9px 16px;border-radius:99px;
  font-size:.82rem;transition:border-color .3s, background .3s, color .3s;
}
.chip:hover{border-color:rgba(233,224,209,.5);}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip:has(input:checked){border-color:var(--ember);background:var(--ember);color:var(--ink);font-weight:600;}
.chip:has(input:focus-visible){outline:2px solid var(--ember);outline-offset:2px;}

.field{display:grid;gap:6px;margin-bottom:1.1rem;}
.field label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut-lt);}
.field label .opt{display:inline;border:0;padding:0;color:var(--bone-dim);text-transform:none;letter-spacing:0;}
.field input,.field select,.field textarea{
  background:var(--ink);border:1px solid rgba(233,224,209,.2);border-radius:var(--r);
  padding:12px 14px;width:100%;transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ember);outline:none;}
.field textarea{resize:vertical;}

.book__summary{
  border:1px dashed rgba(233,224,209,.24);padding:14px 16px;border-radius:var(--r);
  font-size:.85rem;margin-bottom:1rem;background:rgba(233,224,209,.03);
}
.book__summary b{color:var(--bone);}
.book__summary .row{display:flex;justify-content:space-between;gap:14px;padding-block:3px;}
.book__summary .row span:first-child{color:var(--bone-dim);font-size:.78rem;}

.field2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){ .field2{grid-template-columns:1fr;} }
.field__hint{font-size:.74rem;color:var(--bone-dim);margin:-.6rem 0 1rem;line-height:1.45;}
.field textarea + .field__hint{margin-top:.4rem;}
/* Honeypot: off-screen, not display:none — some bots skip hidden fields. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cf-turnstile{margin:0 0 1rem;min-height:0;}
.book__status{font-size:.82rem;margin:.8rem 0 0;line-height:1.5;}
.book__status.is-err{color:#E08A5A;}
.book__status.is-ok{color:var(--bone);}
.book__status a{color:var(--ember);text-decoration:underline;text-underline-offset:3px;}
.book__legal{font-size:.76rem;color:var(--bone-dim);margin:0 0 1rem;line-height:1.5;}
.book__hint{font-size:.78rem;color:var(--bone-dim);margin-top:1rem;}
.book__send{display:grid;gap:8px;}
.book__send .btn{width:100%;}
.book__send .btn svg{width:16px;height:16px;}

.book__done{text-align:center;padding:1.4rem 0 .4rem;animation:fadeUp .5s var(--ease);}
.book__tick{
  width:56px;height:56px;border-radius:50%;margin:0 auto 1.1rem;
  display:grid;place-items:center;font-size:1.7rem;
  background:rgba(201,98,46,.16);border:1px solid var(--ember);color:var(--ember);
}
.book__done h3{font-family:var(--display);font-size:1.1rem;text-transform:uppercase;margin:0 0 .7rem;font-weight:600;letter-spacing:.14em;}
.book__done p{margin:0 0 .6rem;}
.book__doneNote{font-size:.82rem;}
.book__doneNote a{color:var(--ember);text-decoration:underline;text-underline-offset:3px;}

.book__nav{display:flex;justify-content:space-between;gap:12px;margin-top:1.6rem;}
.book__nav .btn{min-width:130px;}
.book__nav:has(#bookBack[hidden]) {justify-content:flex-end;}
/* `.btn{display:inline-flex}` beats the UA `[hidden]{display:none}`, so the
   Back button was showing on step 1 where there's nothing to go back to.
   The id+attr selector wins the specificity fight and re-hides it. */
#bookBack[hidden]{display:none;}

/* ══════════════ STICKY MOBILE CTA ══════════════ */
.stickycta{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  display:none;justify-content:center;
  background:#B4511E;color:#FDF6E8;
  padding:15px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  border-radius:999px;box-shadow:0 12px 40px rgba(76,32,10,.5);
  transform:translateY(140%);transition:transform .5s var(--ease);
}
.stickycta.is-on{transform:none;}
@media(max-width:900px){ .stickycta{display:flex;} }

/* ══════════════ REVEALS ══════════════ */
.reveal{opacity:0;transform:translateY(26px);}
.reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease), transform .9s var(--ease);}

/* ══════════════ REDUCED MOTION ══════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .hero__spacer{height:0;}
  .hero__sticky{position:relative;}
  .reveal{opacity:1;transform:none;}
}
/* Explicit user opt-out via the Motion toggle */
html[data-motion="off"] .hero__spacer{height:0;}
html[data-motion="off"] .hero__sticky{position:relative;}
html[data-motion="off"] .marquee__track{animation:none;}
html[data-motion="off"] .hero__grain{animation:none;}
html[data-motion="off"] .hero__scrollline{animation:none;}
html[data-motion="off"] .reveal{opacity:1;transform:none;}
html[data-motion="off"] .hero__canvas{display:none;}
html[data-motion="off"] .motion-toggle__dot{animation:none;}