/* Método TTF+ — Team The Flex
   Palette sampled from the client's own files. Gold is the mark, neon is the voice.

   Two rules hold the look together, both answers to the client's read of the first
   version ("muy apagada muy negra", "a nivel tipografía"):

   1. Black is never flat. The base is warm (#0B0A09, not #000), every card is a
      gradient, grain sits over the whole page, and the neon appears as *mass* — a
      full-bleed inverted block and two tickers — not only as coloured words.
   2. Two display voices, not one. Anton is the shout: it drops inline into body
      copy (.shout) so a sentence changes typeface mid-line, and it also runs
      outlined (.stroke, the step numerals, the splitter) so the same face reads as
      two different weights of attention. Yellowtail carries the mark's gold. */

:root{
  --black:#0B0A09;
  --void:#000000;
  --raised:#14130F;
  --raised-2:#1C1A14;
  --ink:#F7F6F2;
  --muted:#A6A39A;
  --neon:#EEEB00;
  --gold:#D3AF37;
  --rule:#2B2A24;

  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --script:'Yellowtail','Snell Roundhand',cursive;
  --text:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gutter:clamp(20px,5vw,48px);
  --block:clamp(72px,12vw,140px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--black);color:var(--ink);
  font-family:var(--text);font-weight:400;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* Film grain. What made the first version read as "apagada" is that #000 has no
   material to it; 5% of noise over everything gives the black a surface without
   touching a single colour value. Fixed, so it does not swim with the scroll. */
body::after{
  content:"";position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjgnIG51bU9jdGF2ZXM9JzMnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTYwJyBoZWlnaHQ9JzE2MCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}
img{max-width:100%;display:block;}
a{color:var(--neon);}
a:hover{color:var(--ink);}
::selection{background:var(--neon);color:var(--black);}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}

.skip{position:absolute;left:-9999px;top:0;background:var(--neon);color:var(--black);padding:12px 20px;z-index:99;font-weight:600;}
.skip:focus{left:0;}

/* ---- shared type ---- */
.h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
    font-size:clamp(2.5rem,6.2vw,4.8rem);line-height:0.98;color:var(--ink);}
.h2--neon{color:var(--neon);}
/* The eyebrow carries a neon dash: the smallest type on the page still gets a
   piece of the brand colour, so no block is left entirely grey. */
.kicker{margin:0;display:flex;align-items:center;gap:12px;
        font-family:var(--text);font-weight:600;font-size:clamp(11px,1.4vw,13px);
        letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.kicker::before{content:"";flex:0 0 auto;width:clamp(22px,4vw,40px);height:2px;background:var(--neon);}
/* Yellowtail is the mark's voice, so it is gold, and it sits at the angle a
   signature would. */
.script{margin:0 0 2px;font-family:var(--script);font-size:clamp(1.7rem,3.2vw,2.4rem);
        color:var(--gold);line-height:1.15;display:inline-block;transform:rotate(-2.5deg);
        transform-origin:left center;}
.neon{color:var(--neon);}
/* Anton dropped inline into a Poppins sentence. This is the page's main
   typographic device: the phrase that matters changes typeface, not just colour. */
.shout{font-family:var(--display);font-weight:400;text-transform:uppercase;
       font-size:1.06em;letter-spacing:0.012em;color:var(--neon);}
/* Highlighter. Used sparingly — the promise in the h1, one line per list. */
/* The highlighter is a painted rectangle, not an inline background. An inline
   background covers the font's whole em box — 1.51em of it in Anton, half again the
   type size — which at the h1's 0.95 leading reached into the line above and sat on
   its letters. A background-image can be given a height in em instead, so the block
   is as tall as the word rather than as tall as the font. The glyph itself is never
   touched, so nothing clips: accents and descenders draw over the yellow as usual.
   Both numbers are measured per face — Anton's capitals sit higher in the box than
   Poppins' lowercase. */
.hl{background-image:linear-gradient(var(--neon),var(--neon));background-repeat:no-repeat;
    background-size:100% 1.16em;background-position:0 0.22em;
    color:var(--black);padding:0 0.16em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.hero__h1 .hl,.gate__h1 .hl{background-size:100% 1.06em;background-position:0 0.25em;}
/* Keeps "a los 20" together, so the highlighted block never lands alone on a line. */
.nb{white-space:nowrap;}
/* Outlined display type: the same Anton at a lower volume. Guarded, because a
   browser without text-stroke would render transparent text on black. */
.stroke{color:var(--ink);}
@supports (-webkit-text-stroke:1px #000){
  .stroke{color:transparent;-webkit-text-stroke:clamp(1px,0.28vw,2.4px) var(--ink);}
}
.lead{margin:0;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.55;max-width:36em;text-wrap:pretty;}
.note{margin:0;font-size:12px;color:var(--muted);line-height:1.5;}
/* Figures the client has not signed off on yet. */
.tbd{border-bottom:1px dashed var(--muted);}
/* Section index, set huge and outlined behind the heading. Depth, no new colour. */
.ghost{position:absolute;top:clamp(-8px,-1vw,0px);right:var(--gutter);z-index:0;pointer-events:none;
       font-family:var(--display);font-size:clamp(6rem,20vw,15rem);line-height:0.75;
       color:transparent;-webkit-text-stroke:1px rgba(247,246,242,0.07);}
@supports not (-webkit-text-stroke:1px #000){.ghost{display:none;}}

.section{position:relative;padding:var(--block) var(--gutter);}
.section > *:not(.ghost){position:relative;z-index:1;}
/* The separator between blocks. It used to be a flat 1px of --rule across the whole
   width, which was fine when every section was the same rectangle of black — but two
   of the four sit on a glow now, and a flat line cuts straight across the light. Same
   gradient idea as the footer: neon where the eye enters, gone before the right edge. */
.section--ruled{border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(238,235,0,0.55) 0%,var(--rule) 30%,rgba(43,42,36,0) 86%) 1;}
/* A neon wash bled into a corner. Cheap, and it stops three consecutive blocks
   from being the same rectangle of black.

   The pool has to close inside its own box, or the section edge slices it and the
   light ends in a straight horizontal line. So the box overhangs the section by a
   sixth of its height, and the gradient's visible reach (radius x its transparent
   stop) stays inside that: 40% x 0.68 = 27% against a centre at 34%. It still runs
   off the left or right edge of the screen, which is how light behaves. */
.section--glow::before{content:"";position:absolute;left:0;right:0;top:-16%;bottom:0;
  z-index:0;pointer-events:none;
  background:radial-gradient(54% 40% at 10% 34%,rgba(238,235,0,0.10),transparent 68%);}
.section--glow-r::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-16%;
  z-index:0;pointer-events:none;
  background:radial-gradient(50% 38% at 92% 66%,rgba(238,235,0,0.09),transparent 66%);}
.wrap{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);}
.wrap--wide{max-width:1080px;}

/* The one full-bleed inverted block. Everything above and below it is dark, so
   this is what the eye lands on when it scans the page at speed. */
.section--neon{background:var(--neon);color:var(--black);border-top:0;}
.section--neon .h2,.section--neon .h2 .neon{color:var(--black);}
.section--neon .script{color:rgba(11,10,9,0.62);}
.section--neon .kicker{color:rgba(11,10,9,0.66);}
.section--neon .kicker::before{background:var(--black);}
.section--neon .lead{color:rgba(11,10,9,0.86);}
.section--neon .shout{color:var(--black);}
.section--neon .mark{background:var(--black);color:var(--neon);}
.section--neon .note{color:rgba(11,10,9,0.6);}
.section--neon .tbd{border-bottom-color:rgba(11,10,9,0.5);}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 clamp(28px,4vw,40px);
  background:var(--neon);color:var(--black);
  font-family:var(--text);font-weight:600;font-size:14px;
  letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 0 0 0 rgba(238,235,0,0.45);transition:box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.btn:hover,.btn:focus{background:var(--ink);color:var(--black);box-shadow:0 10px 30px -12px rgba(238,235,0,0.55);transform:translateY(-1px);}
.btn--lg{min-height:56px;font-size:15px;padding:0 clamp(32px,5vw,48px);}
.btn--hero{flex:1 1 240px;max-width:380px;}
.section--neon .btn{background:var(--black);color:var(--neon);}
.section--neon .btn:hover,.section--neon .btn:focus{background:var(--ink);color:var(--black);}
.link-quiet{color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:4px;
            text-decoration-color:var(--gold);padding:12px 0;}
.link-quiet:hover{color:var(--ink);}

/* ---- 01 hero ---- */
/* The hero is exactly one screen on load. svh rather than vh so a phone's
   retracting browser chrome cannot push the fold off the bottom. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;}
.site-head{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;
           justify-content:space-between;align-items:center;
           padding:clamp(16px,3vw,28px) var(--gutter);}
.site-head__logo{height:34px;width:auto;}
.head-cta{font-family:var(--text);font-weight:600;font-size:12px;letter-spacing:0.14em;
          text-transform:uppercase;text-decoration:none;color:var(--neon);padding:12px 0;
          border-bottom:2px solid rgba(238,235,0,0.35);}
.head-cta:hover{color:var(--ink);border-bottom-color:var(--ink);}
.hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
            flex:1;align-items:stretch;max-width:1280px;width:100%;margin:0 auto;}
/* Vertical rhythm is in vh, not vw: the hero has to fit one screen, so what it
   has to yield to is the height of the window, not its width. */
.hero__copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.8vh,22px);
            padding:clamp(78px,9vh,130px) var(--gutter) clamp(22px,3.5vh,56px);position:relative;z-index:2;}
/* The wash hangs off the top edge of the hero, so the light is already there behind
   the logo. Anchored to .hero rather than .hero__copy: the copy starts under the
   header, which left a flat strip above the glow. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(64% 42% at 16% -4%,rgba(238,235,0,0.15),transparent 64%);}
/* The display size answers to the shorter axis too. On a laptop at 1366x720 the
   width alone would ask for 102px, four lines of which cannot share one screen
   with the subline and the button.

   The size is the one the headline was drawn at. Leading opened from 0.95 to 1.08 to
   get the highlighter off the line above, and the hero padding came down to pay for
   it, so the fold still lands where it did. The rest of the clearance comes from the
   highlighter itself — see .hl. */
.hero__h1{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
          font-size:clamp(2.6rem,min(7.5vw,11vh),6rem);line-height:1.08;letter-spacing:0.005em;color:var(--ink);}
.hero__h1 .brand{display:block;color:var(--neon);}
.hero__sub{margin:0;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.6;max-width:34em;text-wrap:pretty;}
/* Three facts of the method, set in the display face at caption size. Small type
   in Anton reads as a stamp, and it keeps the fold from being h1-then-button. */
.hero__stats,.gate__stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
             gap:clamp(9px,1.8vw,20px);font-family:var(--display);text-transform:uppercase;
             font-size:clamp(0.78rem,1.4vw,1rem);letter-spacing:0.05em;color:var(--ink);}
.hero__stats li,.gate__stats li{display:flex;align-items:center;gap:clamp(9px,1.8vw,20px);}
.hero__stats li+li::before,.gate__stats li+li::before{content:"";flex:0 0 auto;width:6px;height:6px;background:var(--neon);transform:rotate(45deg);}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,28px);margin-top:4px;}
.hero__media{position:relative;min-height:min(78vh,640px);}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--black) 0%,rgba(11,10,9,0) 32%),
             linear-gradient(to top,var(--black) 6%,rgba(11,10,9,0) 55%),
             linear-gradient(to bottom,var(--black) 0%,rgba(11,10,9,0) 24%);}
/* One column: the copy takes what it needs and the photograph takes the rest of
   the screen, instead of adding its own 78vh underneath and making the hero two
   screens tall. Same three-edge grade, shorter band, so the crop rides up to his
   face rather than his knees. */
@media (max-width:899px){
  .hero__grid{grid-template-rows:auto 1fr;}
  .hero__copy{padding-top:clamp(76px,10.5vh,120px);padding-bottom:clamp(16px,2.6vh,30px);}
  .hero__media{min-height:170px;}
  /* The band is short and he stands low in the frame - his face sits around 40%
     down, with gym behind him above. 32% is what centres the face in the slice
     at 360, 390 and 430 alike; 12% showed the equipment and cut him at the chin. */
  .hero__media img{object-position:center 32%;}
}

/* Short windows, last so they win over the one-column block above. The trigger is
   height, not width: a phone held sideways is 844x390, which is wide enough for
   two columns and shorter than any laptop. Nothing here can make the hero taller —
   min-height already holds the floor at one screen; these only stop the content
   pushing past it. */
@media (max-height:850px) and (min-width:700px){
  .hero__copy{padding-top:clamp(56px,10vh,150px);padding-bottom:clamp(18px,4vh,72px);}
  .hero__h1{font-size:clamp(2.2rem,min(6.5vw,10vh),6rem);}
}
@media (max-height:620px){
  .hero__stats{display:none;}
  .hero__copy{padding-top:clamp(52px,13vh,88px);padding-bottom:12px;gap:clamp(8px,1.6vh,20px);}
  .hero__media{min-height:110px;}
}

/* ---- ticker ---- */
/* Yellow mass, and it moves. Two of them, running opposite ways, break the page
   into three acts without adding a single new colour. */
.ticker{overflow:hidden;background:var(--neon);color:var(--black);}
.ticker__track{display:flex;width:max-content;animation:ticker 42s linear infinite;}
.ticker__track > span{display:inline-flex;align-items:center;gap:clamp(14px,3vw,26px);
  font-family:var(--display);text-transform:uppercase;white-space:nowrap;letter-spacing:0.01em;
  font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1;
  padding:clamp(11px,1.5vw,16px) clamp(13px,2.6vw,24px) clamp(13px,1.7vw,18px);}
.ticker__track > span::after{content:"";flex:0 0 auto;width:clamp(7px,1vw,10px);height:clamp(7px,1vw,10px);
  background:currentColor;transform:rotate(45deg);opacity:.55;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker--dark{background:var(--black);color:var(--neon);
              border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.ticker--dark .ticker__track{animation-direction:reverse;}

/* ---- 02 diagnosis ---- */
.suena{display:flex;flex-direction:column;gap:clamp(14px,2.2vw,22px);
       font-size:clamp(1.2rem,2.3vw,1.7rem);line-height:1.45;text-wrap:pretty;}
/* A hairline holds the list together as a column of complaints. It warms from
   grey to neon down the run, so the block is not seven identical lines. */
.suena p{margin:0;padding-left:clamp(14px,2.4vw,22px);border-left:2px solid var(--rule);}
.suena p:nth-child(n+4){border-left-color:rgba(238,235,0,0.28);}
.suena p:nth-child(n+6){border-left-color:rgba(238,235,0,0.55);}
/* Alternating emphasis: odd lines change typeface, even lines only weight and
   colour. Seven lines all in Anton read as one texture instead of seven jabs. */
.suena .neon{font-weight:600;}
.verdict{margin:clamp(12px,2vw,24px) 0 0;font-family:var(--display);font-weight:400;
         text-transform:uppercase;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.05;
         color:var(--neon);text-wrap:pretty;}

/* ---- checklists ---- */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(18px,2.6vw,24px);}
.checks li{display:flex;align-items:flex-start;gap:16px;font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.5;}
.mark{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--raised);
      display:inline-flex;align-items:center;justify-content:center;
      font-family:var(--text);font-weight:600;font-size:15px;margin-top:2px;}

/* ---- 06 steps ---- */
.section--steps{padding:var(--block) 0;overflow:hidden;position:relative;}
.steps__head{padding:0 var(--gutter);}
.steps{list-style:none;margin:0;padding:0 0 0 var(--gutter);display:flex;flex-direction:column;gap:0;}
.steps li{display:flex;align-items:center;gap:clamp(12px,3vw,36px);
          padding:clamp(24px,3.6vw,36px) var(--gutter) clamp(24px,3.6vw,36px) 0;
          border-top:1px solid var(--rule);}
.steps li:first-child{border-top:0;padding-top:0;}
/* -0.14em trims Anton's left side bearing so the ink of the numeral lines up with
   the heading above it, rather than the glyph box. The list carries the gutter as
   padding so that trim never pushes the digit past the viewport edge — the section
   clips its overflow, and on a phone the container is flush with the screen.
   Outlined rather than solid: four solid neon numerals this size fought the
   headings, and the outline is the second display voice the page needed. */
.steps__n{font-family:var(--display);font-size:clamp(5.6rem,16vw,10.5rem);line-height:0.8;
          color:var(--neon);margin-left:-0.14em;font-variant-numeric:tabular-nums;}
@supports (-webkit-text-stroke:1px #000){
  .steps__n{color:transparent;-webkit-text-stroke:clamp(1.5px,0.34vw,3px) var(--neon);}
}
.steps__body{min-width:0;}
.steps h3{margin:0 0 6px;font-family:var(--display);font-weight:400;text-transform:uppercase;
          font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.05;color:var(--ink);}
.steps p{margin:0;color:var(--muted);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.55;}

/* ---- 07 before / after ---- */
.grid-cambios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
              gap:clamp(14px,2vw,24px);}
.cambio{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--raised);
        border:1px solid var(--rule);}
.cambio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cambio:hover img{transform:scale(1.03);}
.cambio::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--black);}
.cambio figcaption{position:absolute;top:10px;left:10px;right:10px;display:flex;
                   justify-content:space-between;pointer-events:none;}
.tag{background:rgba(11,10,9,0.78);color:var(--ink);font-family:var(--text);font-weight:600;
     font-size:10px;letter-spacing:0.14em;padding:5px 8px;border:1px solid rgba(247,246,242,0.16);}
/* The "después" chip is a solid neon block: twelve of them across the grid are
   what stops a wall of grey photographs from reading as a wall of grey. */
.tag--after{color:var(--black);background:var(--neon);border-color:var(--neon);}

/* ---- 08 testimonials ---- */
/* Three featured players on the men's page, two on the women's, one column on a
   phone. Columns are capped at 320px so the same rule can serve both counts without
   the two-up page blowing its cards up to half the screen. */
.testis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),320px));
        justify-content:center;gap:clamp(20px,3vw,32px);}
.testi{margin:0;display:flex;flex-direction:column;gap:18px;}
.testi blockquote{margin:0;position:relative;padding-top:0.5em;
                  font-family:var(--display);font-weight:400;text-transform:uppercase;
                  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.1;text-wrap:pretty;}
.testi blockquote::before{content:"«";position:absolute;top:-0.42em;left:-0.04em;z-index:-1;
  font-family:var(--display);font-size:3.4em;line-height:1;color:rgba(238,235,0,0.16);pointer-events:none;}
.testi__player{position:relative;aspect-ratio:9/16;background:var(--raised);
               border:1px solid var(--rule);overflow:hidden;padding:0;width:100%;
               cursor:pointer;display:block;transition:border-color .2s ease;}
.testi__player:hover{border-color:var(--neon);}
.testi__player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
      width:64px;height:64px;border-radius:50%;background:var(--neon);border:none;
      display:flex;align-items:center;justify-content:center;pointer-events:none;
      box-shadow:0 0 0 12px rgba(238,235,0,0.12);}
.play::before{content:"";display:block;width:0;height:0;border-left:18px solid var(--black);
              border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px;}
.testi figcaption{display:flex;flex-direction:column;gap:2px;}
.testi__label{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:0.14em;color:var(--gold);}
.testi__name{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;color:var(--ink);}
/* ---- the wall of testimonials ---- */
/* Six small players under the three featured ones. Fixed column counts rather than
   auto-fit: six divides by two and by three, so no row is ever left with an orphan. */
.wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
      gap:clamp(14px,2.4vw,28px);}
@media (min-width:640px){.wall{grid-template-columns:repeat(3,1fr);}}
.wall__card{display:flex;flex-direction:column;gap:10px;}
.wall__player{position:relative;aspect-ratio:9/16;background:var(--raised);border:1px solid var(--rule);
              overflow:hidden;padding:0;width:100%;cursor:pointer;display:block;
              transition:border-color .2s ease;}
.wall__player:hover{border-color:var(--neon);}
.wall__player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.play--sm{width:46px;height:46px;box-shadow:0 0 0 8px rgba(238,235,0,0.12);}
.play--sm::before{border-left:13px solid var(--black);border-top:8px solid transparent;
                  border-bottom:8px solid transparent;margin-left:3px;}
.wall__quote{margin:0;font-size:clamp(0.9rem,1.3vw,1.02rem);line-height:1.35;text-wrap:pretty;}
.wall__meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.wall__name{font-family:var(--display);text-transform:uppercase;font-size:1rem;
            line-height:1.1;color:var(--ink);}
.wall__tag{font-family:var(--text);font-weight:600;font-size:10px;letter-spacing:0.1em;
           text-transform:uppercase;color:var(--black);background:var(--neon);padding:3px 6px;
           white-space:nowrap;}

.pull{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
      gap:clamp(24px,4vw,48px);border-top:1px solid var(--rule);padding-top:clamp(28px,4vw,44px);}
.pull p{margin:0;font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.5;
        border-left:2px solid rgba(238,235,0,0.35);padding-left:clamp(14px,2vw,20px);}
.pull cite{display:block;margin-top:6px;font-family:var(--text);font-style:normal;font-weight:600;
           font-size:11px;letter-spacing:0.14em;color:var(--gold);}

/* ---- quote band ---- */
.band{position:relative;min-height:min(60vh,520px);display:flex;align-items:flex-end;overflow:hidden;}
.band__media{position:absolute;inset:0;}
.band__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;}
.band__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--black) 8%,rgba(11,10,9,0.2) 60%,rgba(11,10,9,0.55) 100%);}
.band blockquote{position:relative;z-index:1;margin:0 auto;max-width:880px;
  padding:clamp(120px,20vh,200px) var(--gutter) clamp(48px,8vw,80px);
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.1;text-wrap:pretty;}
.band blockquote::before{content:"«";position:absolute;left:calc(var(--gutter) - 0.1em);
  top:clamp(20px,6vh,70px);font-size:clamp(9rem,26vw,18rem);line-height:0.7;
  color:rgba(238,235,0,0.13);pointer-events:none;}

/* ---- 09 about ---- */
.about{max-width:1080px;margin:0 auto;display:grid;
       grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
       gap:clamp(32px,5vw,64px);align-items:center;}
.about__media{margin:0;display:flex;flex-direction:column;gap:12px;}
.about__photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--raised);
              display:block;width:100%;padding:0;border:1px solid var(--rule);cursor:pointer;
              transition:border-color .2s ease;}
.about__photo:hover{border-color:var(--gold);}
.about__caption{font-family:var(--text);font-weight:600;font-size:11px;letter-spacing:0.14em;
                text-transform:uppercase;color:var(--gold);}
.about__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.about__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--black) 0%,rgba(11,10,9,0) 30%);}
.about__body{display:flex;flex-direction:column;gap:clamp(20px,3vw,28px);}
.about__body p{margin:0;font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.6;text-wrap:pretty;}
.about__turn{font-family:var(--display);font-weight:400;text-transform:uppercase;
             font-size:clamp(1.5rem,3vw,2.2rem)!important;line-height:1.15!important;color:var(--neon);}
.about .h2{font-size:clamp(2.4rem,6vw,4rem);}

/* ---- 10 final CTA ---- */
.final{position:relative;overflow:hidden;text-align:center;padding:clamp(96px,16vw,180px) var(--gutter);
       background:radial-gradient(72% 62% at 50% 108%,rgba(238,235,0,0.16),transparent 68%);}
.final__inner{position:relative;z-index:1;max-width:720px;margin:0 auto;display:flex;flex-direction:column;
              align-items:center;gap:clamp(18px,2.6vw,26px);}
.final .kicker{justify-content:center;}
.final .script{transform:rotate(-2.5deg);}
.final h2{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
          font-size:clamp(3.4rem,12vw,8rem);line-height:0.95;color:var(--neon);}
.final p{margin:0;font-size:clamp(1.05rem,1.8vw,1.25rem);}
.final .btn{margin-top:8px;}

/* ---- 11 footer ---- */
.foot{padding:clamp(32px,5vw,48px) var(--gutter);
      border-top:2px solid transparent;
      border-image:linear-gradient(90deg,var(--neon) 0%,var(--gold) 22%,var(--rule) 55%,var(--rule) 100%) 1;}
.foot__row{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
           justify-content:space-between;gap:24px;}
.foot__logo{height:28px;width:auto;}
.foot nav{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,32px);font-size:13px;}
.foot nav a{color:var(--muted);text-decoration:none;padding:8px 0;}
.foot nav a:hover{color:var(--ink);}
.foot__legal{max-width:1080px;margin:20px auto 0;display:flex;flex-wrap:wrap;
             justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);}
.foot__legal a{color:var(--muted);text-decoration:none;}
.foot__legal a:hover{color:var(--ink);}

/* ---- sticky CTA (phones, after the hero) ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:9;
        padding:12px 16px calc(12px + env(safe-area-inset-bottom));
        background:rgba(11,10,9,0.92);border-top:1px solid rgba(238,235,0,0.35);
        display:flex;justify-content:center;
        transform:translateY(110%);transition:transform .22s ease;}
.sticky.is-on{transform:translateY(0);}
.sticky .btn{min-height:48px;width:min(420px,100%);}
@media (min-width:900px){.sticky{display:none;}}

/* ---- video lightbox ---- */
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,5,4,0.95);
    display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,40px);}
.lb[hidden]{display:none;}
.lb video{max-width:min(420px,100%);max-height:100%;width:auto;height:auto;background:#000;}
.lb__close{position:absolute;top:12px;right:12px;width:48px;height:48px;background:none;
           border:1px solid var(--rule);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;}
.lb__close:hover{border-color:var(--neon);color:var(--neon);}

/* ---- plain pages: 404 and the legal notices ---- */
.plain-head{display:flex;justify-content:center;padding:clamp(28px,6vw,48px) var(--gutter);}
.plain-head img{height:34px;width:auto;}
.doc{max-width:720px;margin:0 auto;padding:clamp(24px,6vw,56px) var(--gutter) clamp(72px,12vw,120px);}
.doc h1{margin:0 0 clamp(20px,4vw,32px);font-family:var(--display);font-weight:400;
        text-transform:uppercase;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;color:var(--ink);}
.doc h2{margin:clamp(32px,5vw,48px) 0 12px;font-family:var(--display);font-weight:400;
        text-transform:uppercase;font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.15;color:var(--neon);}
.doc p,.doc li{font-size:1rem;line-height:1.7;color:var(--ink);}
.doc ul{padding-left:1.2em;}
.doc a{color:var(--neon);}
.doc .updated{color:var(--muted);font-size:13px;}
/* Identity the client has not sent yet. Visible on purpose: it must not ship unnoticed. */
.gap{background:rgba(238,235,0,0.14);border-bottom:1px dashed var(--neon);color:var(--neon);padding:0 4px;}
.error{min-height:56vh;display:flex;align-items:center;justify-content:center;
       text-align:center;padding:clamp(48px,10vw,96px) var(--gutter);}
.error__code{margin:0 0 8px;font-family:var(--display);font-size:clamp(5rem,20vw,11rem);
             line-height:0.85;color:var(--neon);}
.error h1{margin:0 0 14px;font-family:var(--display);font-weight:400;text-transform:uppercase;
          font-size:clamp(1.8rem,5vw,3rem);line-height:1.05;}
.error p{margin:0 auto clamp(24px,4vw,32px);max-width:34em;color:var(--muted);}

/* ---- root ---- */
/* One card, centred, exactly one screen with the footer sitting on the fold. It used
   to be a two-panel chooser; the two landings are linked directly from the ads, so
   the root is the brand and the promise, nothing to click through. */
.gate-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;}
.gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
      text-align:center;gap:clamp(10px,1.8vh,20px);
      padding:clamp(40px,7vh,88px) var(--gutter) clamp(32px,5vh,64px);position:relative;
      background:radial-gradient(66% 42% at 50% 0%,rgba(238,235,0,0.13),transparent 62%);}
.gate__mark{width:clamp(88px,13vw,140px);height:auto;}
.gate .kicker{justify-content:center;}
.gate .script{transform:rotate(-2.5deg);}
.gate__h1{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
          font-size:clamp(2.3rem,min(6.6vw,9.5vh),5.2rem);line-height:1.08;
          letter-spacing:0.005em;color:var(--ink);max-width:13em;text-wrap:balance;}
.gate__lead{margin:0;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.6;max-width:32em;text-wrap:pretty;}
/* Short windows: a 1024x640 laptop and a 360x640 phone both had the card spilling
   past the fold. The mark is the biggest single saving — it is sized off width
   everywhere else, which says nothing about how much height is left. */
@media (max-height:700px){
  .gate{padding:clamp(26px,4.5vh,60px) var(--gutter) clamp(18px,3.2vh,44px);gap:clamp(7px,1.3vh,16px);}
  .gate__mark{width:clamp(62px,9vh,104px);}
  .gate__h1{font-size:clamp(1.9rem,min(5.4vw,8vh),4.2rem);}
  .gate .script{font-size:clamp(1.3rem,2.4vw,1.9rem);}
  .gate__lead{font-size:clamp(0.95rem,1.4vw,1.1rem);}
}
.gate-page .foot{border-image:linear-gradient(90deg,var(--neon) 0%,var(--gold) 22%,var(--rule) 55%,var(--rule) 100%) 1;}
.gate-page .foot__legal{margin:0 auto;align-items:center;justify-content:center;gap:clamp(12px,3vw,32px);}
.gate-page .foot__legal nav{display:flex;gap:clamp(12px,3vw,24px);}