/* =========================================================
   FLEXIBILITY MAESTRO HOMEPAGE: program selector
   Same design system as the program pages.
   Palette: white / red / near-black only.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --red:#ED1C24;
  --red-deep:#C4141B;
  --red-soft:rgba(237,28,36,.12);

  --ink:#0E0E0E;
  --ink-2:#161616;
  --ink-3:#232323;
  --ink-4:#2E2E2E;

  --paper:#F5F4F2;
  --paper-2:#FFFFFF;
  --line:#E2E0DC;

  --white:#FFFFFF;
  --mute:#9A9A9A;
  --mute-d:#6B6B6B;

  --maxw:1180px;
  --gut:clamp(1rem,5vw,2.5rem);
  --r:14px;
  --r-sm:9px;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms var(--ease);
  --t-med:320ms var(--ease);
  --t-slow:620ms var(--ease);

  --f-head:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--ink);color:var(--white);
  font:400 16px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:8px;top:8px}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding:clamp(3.5rem,9vw,6.5rem) 0;position:relative}
.sec--dark{background:var(--ink);color:var(--white)}
.sec--light{background:var(--paper);color:var(--ink)}
.center{text-align:center}

/* ---------- TYPE ---------- */
.h1{
  font:800 clamp(2.4rem,7vw,4rem)/1 var(--f-head);
  letter-spacing:-.035em;margin:.55rem 0 0;
}
.h2{
  font:800 clamp(1.75rem,4.4vw,2.85rem)/1.05 var(--f-head);
  letter-spacing:-.028em;margin:.4rem 0 0;
}

.eyebrow{
  font:500 clamp(.63rem,1.35vw,.72rem)/1.45 var(--f-mono);
  text-transform:uppercase;letter-spacing:.14em;color:var(--mute);
  margin:0;position:relative;padding-bottom:.62rem;
}
.sec--light .eyebrow{color:var(--mute-d)}
.eyebrow--red{color:var(--red)}
/* signature: red rule wipes in under every eyebrow */
.eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--ease) 120ms;
}
.eyebrow.center::after{left:50%;transform:translateX(-50%) scaleX(0)}
.is-in .eyebrow::after,.eyebrow.is-in::after{transform:scaleX(1)}
.is-in .eyebrow.center::after,.eyebrow.center.is-in::after{transform:translateX(-50%) scaleX(1)}

.lede{color:var(--mute);font-size:clamp(.98rem,1.9vw,1.1rem);line-height:1.62;margin-top:1.2rem;max-width:50ch}
.lede b{color:var(--white);font-weight:600}
.sec__lede{color:var(--mute-d);font-size:clamp(.98rem,1.9vw,1.08rem);line-height:1.6;margin-top:1rem;max-width:56ch}

/* =========================================================
   MOTION SYSTEM
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow),transform var(--t-slow);
  transition-delay:calc(var(--i,0) * 60ms)}
[data-reveal].is-in{opacity:1;transform:none}

.mask > span{display:block;overflow:hidden}
.mask > span > span{display:block;transform:translateY(105%);
  transition:transform 720ms var(--ease)}
.mask > span:nth-child(2) > span{transition-delay:90ms}
.mask > span:nth-child(3) > span{transition-delay:180ms}
.mask.is-in > span > span{transform:none}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --bg:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--bg);color:#fff;font:600 .95rem/1 var(--f-body);
  padding:.95rem 1.5rem;border-radius:var(--r-sm);border:1px solid transparent;
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  box-shadow:0 1px 0 rgba(0,0,0,.2);white-space:nowrap;
}
.btn:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 8px 22px rgba(237,28,36,.28)}
.btn:active{transform:scale(.98) translateY(0);transition-duration:80ms}
.btn__arw{display:inline-block;transition:transform var(--t-fast)}
.btn:hover .btn__arw{transform:translateX(4px)}
.btn--sm{padding:.66rem 1.05rem;font-size:.85rem}
.btn--lg{padding:1.12rem 1.9rem;font-size:1.02rem}
.btn--full{width:100%}

/* =========================================================
   HEADER (the website menu sits above it, from the Pages Manager)
   ========================================================= */
.hdr{position:sticky;top:0;z-index:90;background:rgba(14,14,14,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-3)}
.hdr__in{max-width:var(--maxw);margin-inline:auto;padding:.72rem var(--gut);
  display:flex;align-items:center;gap:1.4rem;min-height:62px}
.hdr__logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.hdr__logo img{width:38px;height:auto}
.hdr__logo span{font:800 .95rem/1 var(--f-head);letter-spacing:-.02em;text-transform:uppercase}
.hdr__logo em{color:var(--red);font-style:normal}
.hdr__cta{display:none;margin-left:auto}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem);overflow:hidden}
.hero__glow{position:absolute;inset:auto -20% -40% auto;width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(closest-side,rgba(237,28,36,.16),transparent 70%);pointer-events:none}
.hero__grid{position:relative;z-index:1;display:grid;gap:2rem}
.hero__copy{min-width:0}
.hero__cta{margin-top:1.6rem}

.proof{display:flex;flex-wrap:wrap;gap:1.1rem 1.8rem;margin-top:2rem}
.proof li{display:grid;gap:.25rem;border-left:2px solid var(--red);padding-left:.85rem}
.proof b{font:800 clamp(1.45rem,3.4vw,1.85rem)/1 var(--f-head);letter-spacing:-.04em}
.proof i{font:500 .6rem/1.4 var(--f-mono);font-style:normal;text-transform:uppercase;
  letter-spacing:.1em;color:var(--mute);max-width:17ch}

.hero__visual{border-radius:var(--r);overflow:hidden;border:1px solid var(--ink-3);
  background:var(--ink-2);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.hero__visual img{width:100%;height:auto}

/* =========================================================
   PROGRAM SELECTOR
   ========================================================= */
.progs{display:grid;gap:1rem;margin-top:2.2rem}
.prog{position:relative;display:flex;flex-direction:column;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t-med),transform var(--t-med),box-shadow var(--t-med)}
.prog::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red);z-index:2;
  transform:scaleX(0);transform-origin:left;transition:transform 480ms var(--ease)}
.prog.is-in::before{transform:scaleX(1);transition-delay:calc(var(--i,0) * 90ms + 140ms)}
.prog:hover{border-color:#CFCDC8;transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.09)}

.prog__img{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.prog__img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform 900ms var(--ease)}
.prog__img--top img{object-position:50% 0}
.prog:hover .prog__img img{transform:scale(1.04)}

.prog__body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.25rem 1.3rem}
.prog__tag{font:500 .64rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.13em;color:var(--red)}
.prog__t{font:800 clamp(1.3rem,2.6vw,1.55rem)/1.12 var(--f-head);letter-spacing:-.025em;margin-top:.45rem}
.prog__p{margin-top:.65rem;font-size:.95rem;line-height:1.58;color:var(--mute-d);max-width:46ch}

.prog__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:1.2rem 0 1.3rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prog__facts li{display:grid;gap:.25rem;padding:.8rem .6rem .8rem 0}
.prog__facts li + li{border-left:1px solid var(--line);padding-left:.75rem}
.prog__facts b{font:800 1.15rem/1 var(--f-head);letter-spacing:-.03em;color:var(--ink)}
.prog__facts i{font:500 .58rem/1.35 var(--f-mono);font-style:normal;text-transform:uppercase;
  letter-spacing:.09em;color:var(--mute-d)}

.prog__btn{margin-top:auto}
/* the whole card opens the program, through its button */
.prog__btn::after{content:"";position:absolute;inset:0;z-index:1}
.prog__btn:hover{transform:none}

/* the free one stands apart */
.prog--free{background:var(--ink);border-color:var(--ink);color:var(--white)}
.prog--free:hover{border-color:var(--ink-4)}
.prog--free .prog__p{color:var(--mute)}
.prog--free .prog__facts{border-color:var(--ink-3)}
.prog--free .prog__facts li + li{border-color:var(--ink-3)}
.prog--free .prog__facts b{color:var(--white)}
.prog--free .prog__facts i{color:var(--mute)}

/* =========================================================
   WHO I AM
   ========================================================= */
.coach__grid{display:grid;gap:1.8rem;align-items:center}
.coach__pic{border-radius:var(--r);overflow:hidden;border:1px solid var(--ink-3);background:var(--ink-2);
  max-width:420px;width:100%}
.coach__pic img{width:100%;aspect-ratio:1/1;object-fit:cover}
.coach__p{margin-top:1.1rem;color:var(--mute);font-size:clamp(1rem,2vw,1.1rem);line-height:1.65;max-width:52ch}
.coach__p b{color:var(--white);font-weight:600}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final{overflow:hidden}
.final__in{position:relative;display:grid;justify-items:center}
.final__p{margin-top:1rem;color:var(--mute-d);font-size:clamp(.98rem,1.9vw,1.08rem);line-height:1.6;max-width:48ch}
.final__btn{margin-top:1.8rem}

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{background:var(--ink);border-top:1px solid var(--ink-3);padding:2.6rem 0 1.4rem}
.ftr__in{display:grid;gap:1.6rem}
.ftr__brand img{width:52px;margin-bottom:.8rem}
.ftr__brand p{color:var(--mute);font-size:.88rem;max-width:36ch}
.ftr__nav{display:flex;flex-wrap:wrap;gap:.85rem 1.4rem}
.ftr__nav a{font-size:.87rem;color:var(--mute);transition:color var(--t-fast)}
.ftr__nav a:hover{color:var(--red)}
.ftr__legal{text-align:center;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--ink-3);
  font:500 .68rem var(--f-mono);letter-spacing:.08em;color:var(--mute-d)}

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (min-width:720px){
  .progs{grid-template-columns:1fr 1fr;gap:1.2rem}
  .prog__body{padding:1.5rem 1.5rem 1.5rem}
  .coach__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem}
  .coach__pic{max-width:none}
  .ftr__in{grid-template-columns:1fr auto;align-items:start}
  .ftr__nav{justify-content:flex-end;max-width:460px}
  .hdr__cta{display:inline-flex}
}

@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:center}
}

@media (min-width:1100px){
  .progs{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
  .prog__body{padding:1.25rem 1.15rem 1.25rem}
  .prog__facts b{font-size:1.05rem}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .mask > span > span{transform:none !important}
  .eyebrow::after{transform:scaleX(1) !important}
  .eyebrow.center::after{transform:translateX(-50%) scaleX(1) !important}
}