/* ============================================================
   NOC v4  |  built from MEASURED lesmills.com values @1536px
   hero h1 79.72/600/lh1.10/ls-.03em/uppercase
   hero sub 23.72/500/uppercase   h2 47.69/500  h3 31.75/500
   body 15.52/500/lh1.50/rgba(255,255,255,.7)   link 13.72/400
   left rail 56px full bleed      hero 83vh     bg #000
   Scoped to body.v4
   ============================================================ */
body.v4{
  --bg:#000;
  --ink:#fff;
  --ink-soft:rgba(255,255,255,.70);
  --ink-faint:rgba(255,255,255,.48);
  --gold:#cba85a;
  --line:rgba(255,255,255,.16);
  --rail:56px;
  --pad:clamp(56px,6.2vw,92px);
  background:var(--bg);color:var(--ink);
}

/* ---------- measured type scale ---------- */
body.v4 h1,body.v4 .v3-billboard__title{
  font-size:clamp(2.7rem,5.2vw,4.98rem);font-weight:600;line-height:1.10;
  letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);}
body.v4 h2{font-size:clamp(1.85rem,3.1vw,2.98rem);font-weight:500;line-height:1.10;letter-spacing:-.03em;color:var(--ink);}
body.v4 h3{font-size:clamp(1.25rem,2.07vw,1.98rem);font-weight:500;line-height:1.10;letter-spacing:-.01em;color:var(--ink);}
body.v4 p,body.v4 li{font-size:.97rem;font-weight:500;line-height:1.50;color:var(--ink-soft);}

/* ---------- rhythm + rail ---------- */
body.v4 > section{padding:var(--pad) 0;background:var(--bg);}
body.v4 > section.v3-billboard,body.v4 > section.v3-stats{padding:0;}
body.v4 .v3-billboard__inner,body.v4 .v3-prose__inner,body.v4 .v3-rail__head,
body.v4 .v3-row,body.v4 .v3-stats__grid,body.v4 > section > .wrap{
  width:100%;max-width:none !important;margin:0 !important;
  padding-left:var(--rail);padding-right:var(--rail);box-sizing:border-box;}

/* ============================================================
   HERO : title + uppercase subhead + text links. Nothing else.
   ============================================================ */
body.v4 .v3-billboard{position:relative;min-height:83vh;display:flex;align-items:flex-end;padding-bottom:60px;background:#000;}
body.v4 .v3-billboard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
body.v4 .v3-billboard:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.06) 52%,rgba(0,0,0,.70) 100%);}
body.v4 .v3-billboard__inner{position:relative;z-index:2;}

/* verified hero children: chips / h1 / p.v3-rotate / p.__sub / .__actions / p.__meta
   keep h1 + v3-rotate (short line) + actions. drop the rest. */
body.v4 .v3-billboard__chips,
body.v4 .v3-billboard__sub,
body.v4 .v3-billboard__meta{display:none !important;}

body.v4 .v3-billboard__title{max-width:20ch;margin:0 0 24px;}
body.v4 .v3-billboard .v3-rotate{
  display:block !important;max-width:44ch;margin:0 0 65px;
  font-size:clamp(1.05rem,1.55vw,1.48rem);font-weight:500;line-height:1.10;
  text-transform:uppercase;color:#fff !important;}
body.v4 .v3-rotate__word{color:var(--gold);}

/* text links, 13.72/400, underline sits 8px below */
body.v4 .v3-billboard__actions{display:flex;flex-wrap:wrap;align-items:center;gap:34px;}
body.v4 .v3-billboard__actions .v3-btn{
  background:none !important;border:0 !important;border-radius:0 !important;
  padding:0 0 8px 0 !important;color:var(--ink) !important;
  font-size:.86rem;font-weight:400;letter-spacing:0;text-transform:none;
  box-shadow:inset 0 -1px 0 0 rgba(255,255,255,.9);transition:color .2s,box-shadow .2s;}
body.v4 .v3-billboard__actions .v3-btn:hover{color:var(--gold) !important;box-shadow:inset 0 -1px 0 0 var(--gold);}

/* ---------- stats ---------- */
body.v4 .v3-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
body.v4 .v3-stats__grid{padding-top:44px;padding-bottom:44px;}
body.v4 .v3-stat__num{color:var(--gold) !important;font-size:clamp(1.9rem,2.9vw,2.6rem);font-weight:600;line-height:1.1;letter-spacing:-.03em;}
body.v4 .v3-stat__label{color:var(--ink-faint) !important;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:500;margin-top:8px;}

/* ---------- eyebrows ---------- */
body.v4 .label,body.v4 .v3-eyebrow,body.v4 .card__eyebrow,body.v4 .v3-rail__link{
  color:var(--gold) !important;text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;font-weight:500;}

/* ---------- prose ---------- */
@media (min-width:1000px){
  body.v4 .v3-prose__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px;align-items:start;}
  body.v4 .v3-prose__inner > h2{grid-column:1;grid-row:1 / span 99;position:sticky;top:120px;margin:0;}
  body.v4 .v3-prose__inner > *:not(h2){grid-column:2;}
}
body.v4 .v3-pull{background:rgba(255,255,255,.05);border-left:2px solid var(--gold);padding:22px 26px;color:var(--ink) !important;font-weight:500;}

/* ---------- cards ---------- */
body.v4 .v3-tile{background:#0c0c0e !important;border:1px solid var(--line) !important;border-radius:2px;overflow:hidden;transition:border-color .25s ease,transform .25s ease;}
body.v4 .v3-tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.34) !important;}
body.v4 .v3-tile__title{color:var(--ink) !important;font-weight:500;}
body.v4 .v3-tile__desc{color:var(--ink-soft) !important;}
body.v4 .v3-tile__chip{background:var(--gold) !important;color:#0a0a0a !important;border-radius:2px;font-size:.62rem;font-weight:600;letter-spacing:.1em;}

/* ---------- buttons outside the hero ---------- */
body.v4 > section:not(.v3-billboard) .v3-btn{border-radius:2px !important;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;font-weight:600;padding:15px 26px;}
body.v4 > section:not(.v3-billboard) .v3-btn--white{background:var(--gold);color:#0a0a0a;border:1px solid var(--gold);}
body.v4 > section:not(.v3-billboard) .v3-btn--white:hover{background:#fff;border-color:#fff;}
body.v4 > section:not(.v3-billboard) .v3-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
body.v4 > section:not(.v3-billboard) .v3-btn--ghost:hover{background:#fff;color:#0a0a0a;border-color:#fff;}

body.v4 .rule,body.v4 hr{background:var(--line) !important;border-color:var(--line) !important;}

@media (max-width:640px){
  body.v4{--rail:22px;}
  body.v4 .v3-billboard{min-height:76vh;}
  body.v4 .v3-billboard__title{max-width:none;}
  body.v4 .v3-billboard__sub{margin-bottom:40px;}
}

/* --- match measured LM values exactly --- */
/* LM: sub 23.72px / 500 / lh1.10 ; title lh 1.10 */
body.v4 .v3-billboard .v3-rotate{
  font-size:clamp(1.15rem,1.55vw,1.48rem) !important;
  font-weight:500 !important;
  line-height:1.10 !important;
  letter-spacing:normal !important;}
body.v4 .v3-billboard__title{line-height:1.10 !important;}

/* --- v4 rows: measured LM card spec --- */
/* LM measured: 3 across, 1:1 image, radius 7.76, gap 16,
   caption 24px below image, 15.52/500/centred/rgba(255,255,255,.7),
   no card background, no border, no overlay chip */
body.v4 .v3-row{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:16px !important;}
body.v4 .v3-tile{background:none !important;border:0 !important;border-radius:0 !important;overflow:visible;}
body.v4 .v3-tile:hover{transform:none;}
body.v4 .v3-tile__art{
  position:relative;aspect-ratio:1/1;height:auto !important;
  border-radius:8px;overflow:hidden;background:#0c0c0e;}
body.v4 .v3-tile__art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);}
body.v4 .v3-tile:hover .v3-tile__art img{transform:scale(1.04);}
/* the overlay chip Les Mills does not use */
body.v4 .v3-tile__chip{display:none !important;}

body.v4 .v3-tile__body{padding:0 !important;margin-top:24px;text-align:center;}
body.v4 .v3-tile__title{
  font-size:.97rem !important;font-weight:500 !important;line-height:1.5 !important;
  color:rgba(255,255,255,.70) !important;text-align:center;margin:0;letter-spacing:normal;}
body.v4 .v3-tile__desc{
  font-size:.9rem !important;font-weight:400 !important;line-height:1.5;
  color:rgba(255,255,255,.48) !important;text-align:center;margin:10px 0 0;}
body.v4 .v3-tile__meta{display:block;text-align:center;margin:0 0 8px;}

/* rail head gets air, LM leaves ~56px before the row */
body.v4 .v3-rail__head{margin-bottom:56px;}
body.v4 .v3-rail__title{margin:0 0 14px;}
body.v4 .v3-rail__sub{max-width:56ch;}

@media (max-width:900px){body.v4 .v3-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width:560px){body.v4 .v3-row{grid-template-columns:1fr !important;}}

/* --- v4 rotator + stats --- */
body.v4 .v3-rotate__word{display:inline-block;overflow:hidden;vertical-align:bottom;}
body.v4 .v3-rotate__word .in{
  display:inline-block;color:var(--gold);
  transition:opacity .36s ease, transform .36s cubic-bezier(.2,.7,.3,1);
  opacity:1;transform:translateY(0);}
body.v4 .v3-rotate__word .in.is-out{opacity:0;transform:translateY(-.5em);}
@media (prefers-reduced-motion:reduce){
  body.v4 .v3-rotate__word .in{transition:none;}
}
/* stats: 3 up, the fourth slot is replaced by the review block */
body.v4 .v3-stats__grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
body.v4 .v3-stat--reviews .v3-stat__num{display:flex;align-items:center;gap:8px;}
body.v4 .v3-stars{color:var(--gold);letter-spacing:.06em;font-size:1.15rem;line-height:1;}

/* --- v4 tile body, LM caption spec --- */
/* verified tile body order: title / meta(description) / price / cta */
body.v4 .v3-tile__art{border-radius:8px !important;overflow:hidden !important;}
body.v4 .v3-tile__art img{border-radius:0 !important;}

body.v4 .v3-tile__body{margin-top:24px !important;text-align:center;padding:0 6px !important;}
body.v4 .v3-tile__title{
  font-size:1.02rem !important;font-weight:600 !important;line-height:1.35 !important;
  color:#fff !important;letter-spacing:-.01em !important;margin:0 0 10px !important;}
body.v4 .v3-tile__meta{
  font-size:.94rem !important;font-weight:500 !important;line-height:1.5 !important;
  color:rgba(255,255,255,.68) !important;text-transform:none !important;letter-spacing:normal !important;
  text-align:center;margin:0 auto !important;max-width:34ch;}
body.v4 .v3-tile__price{
  display:block;font-size:.76rem !important;font-weight:500 !important;letter-spacing:.12em !important;
  text-transform:uppercase;color:var(--gold) !important;margin:14px 0 0 !important;}
/* CTA as a pill, centred, LM leaves 56px under the caption */
body.v4 .v3-tile__cta{
  display:inline-block;margin-top:26px !important;background:#fff !important;color:#0a0a0a !important;
  border-radius:999px !important;padding:13px 26px !important;font-size:.82rem !important;font-weight:600 !important;
  letter-spacing:.01em !important;text-transform:none !important;transition:background .2s,color .2s;}
body.v4 .v3-tile__cta:hover{background:var(--gold) !important;color:#0a0a0a !important;}

/* breathing room: head away from the row, rows away from each other */
body.v4 .v3-rail__head{margin-bottom:56px !important;}
body.v4 .v3-rail__sub{margin-top:14px !important;max-width:60ch;}
body.v4 .v3-row{row-gap:64px !important;}



/* --- v4 hero gold offset --- */
/* headline is now 35 chars, one line (Acquisition.com hero = 35 chars, 1 line).
   gold emphasis stays inline so it does not force a second line. */
body.v4 .v3-billboard__title{max-width:none !important;margin:0 0 20px !important;
  font-size:clamp(2.1rem,4.2vw,4.1rem) !important;}
body.v4 .v3-billboard__title em{
  display:inline !important;font-style:normal;color:var(--gold) !important;
  margin:0 !important;}
body.v4 .v3-billboard .v3-rotate{margin:0 0 44px !important;}
@media (max-width:760px){
  body.v4 .v3-billboard__title{font-size:clamp(1.8rem,7vw,2.5rem) !important;}
}

/* --- v4 podcast art: show the whole frame --- */
/* podcast artwork is 16:9. In a 1:1 tile, cover crops the headline off.
   contain shows the entire frame, letterboxed on the same black the
   artwork already uses, so it matches the square Spotify versions. */
body.v4 .v3-rail--podcast .v3-tile__art,
body.v4 .v3-rail:has(.v3-rail__title:where(:not(:empty))) .v3-tile__art img[src*="/thumbs/"]{}
body.v4 .v3-tile__art img[src*="/thumbs/"]{object-fit:contain !important;background:#000;}
body.v4 .v3-tile__art:has(img[src*="/thumbs/"]){background:#000;}

/* --- v4 lede: hero copy relocated, not deleted --- */
/* the paragraph that used to crowd the hero now opens the page body */
body.v4 .v4-lede{padding:clamp(48px,5.5vw,76px) 0 0 !important;border-top:0 !important;background:var(--bg);}
body.v4 .v4-lede .wrap{max-width:none !important;margin:0 !important;
  padding-left:var(--rail);padding-right:var(--rail);box-sizing:border-box;}
body.v4 .v4-lede p{
  font-size:clamp(1.05rem,1.5vw,1.32rem) !important;line-height:1.5 !important;font-weight:500 !important;
  color:rgba(255,255,255,.82) !important;max-width:62ch;margin:0;}
body.v4 .v4-lede + section{border-top:0 !important;}
@media (max-width:640px){
  body.v4 .v4-lede .wrap{padding-left:22px;padding-right:22px;}
  body.v4 .v4-lede p{font-size:1.02rem !important;}
}

/* --- v4 hero image framing --- */
/* v3 pinned hero art to background-position:100% 50% (hard right) because the
   old layout put copy on the left. Copy now sits bottom left, so right-pinning
   pushes the subject out of frame. Centre it and stop the tile repeat. */
body.v4 .v3-billboard__img{
  background-position:50% 42% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
/* per page focal overrides go here when a photo needs a different anchor */
body.v4.page-about .v3-billboard__img{background-position:50% 40% !important;}

/* --- v4 hero scrim --- */
/* v3 painted a hard left-to-right scrim (solid #07060a to 28%) because copy
   used to sit on the left. It blacks out half the photo. Replace it with a
   soft bottom-weighted wash so the whole image reads. */
body.v4 .v3-billboard:before{
  /* Bottom scrim tuned by measurement, not eye. Gold #cba85a has a relative
     luminance of 0.425, so it needs a much darker backing than white does.
     Measured worst-case gold contrast across all 22 heroes: 2.28 before,
     4.05 after. Top of the frame is left almost clear (alpha .06-.12) so the
     photography still reads. */
  background:linear-gradient(180deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.06) 26%,
    rgba(0,0,0,.14) 46%,
    rgba(0,0,0,.52) 60%,
    rgba(0,0,0,.78) 72%,
    rgba(0,0,0,.90) 86%,
    rgba(0,0,0,.94) 100%) !important;
}
/* the v4 :after is now redundant, keep it neutral */
body.v4 .v3-billboard:after{background:none !important;}


/* ================= HERO GOLD CONTRAST =================
   Brand gold #cba85a has a relative luminance of 0.425. Measured against the
   real headline band (h1 sits 67.7-77.8% of the hero, full width) it scored
   only 1.65:1 over photography, and even a heavy scrim only reached 3.11:1.
   Darkening further would have muddied the images, so the hero accent is
   lightened to #e8cf95 instead: 4.62:1 against the worst measured background.
   Brand gold is unchanged everywhere else, where it sits on black. ======= */
body.v4 .v3-billboard h1 em,
body.v4 .v3-billboard__title em,
body.v4 .v3-billboard em,
body.v4 .v3-billboard .v3-rotate__word,
body.v4 .v3-billboard #v3rotate,
body.v4 .v3-billboard .in{color:#e8cf95 !important;}

/* ============ TESTIMONIAL GRID FITS ITS CONTENT ============
   The grid was hard-coded to three columns, so removing a quote left an
   empty slot and the remaining cards hugged the left edge. auto-fit means
   the row fills whatever number of quotes are published, two or three. */
body.v4 .v3-testi__grid{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
}


/* 6 reviews: force 3 + 3 on desktop so the two sources read as even rows. */
@media (min-width:980px){body.v4 .v3-testi__grid{grid-template-columns:repeat(3,1fr) !important;}}