/* ============================================================================
   Verified Fitness — parent-brand site design system.
   Black / white / muted gray / VF red. Shared by all pages.
   ========================================================================== */
/* Fonts load via <link> in the page head (preconnect + swap), not @import. */

:root{
  --red:#bf0d0b; --red2:#e5342f; --redtxt:#ff5c55;
  --ink:#07090d; --ink2:#0d1117; --ink3:#161b26; --line:#1e2530;
  --txt:#e8edf3; --mut:#94a3b8; --dim:#7e8797;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;z-index:100}
.skip:focus{left:0}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--txt);font-family:'Inter',system-ui,Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#fff}
img{max-width:100%}
a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,9,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{width:30px;height:30px;border-radius:7px;background:var(--red);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:900;font-size:17px;color:#fff}
.brand .mark-img{width:30px;height:30px;border-radius:7px;display:block}
.pathlogo,.pagelogo{display:block;height:auto;max-width:100%}
.brand .word{font-family:'Archivo';font-weight:800;font-size:15px;color:#fff;letter-spacing:-.01em}
.brand .word span{color:var(--redtxt)}
.nav-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav-links a{font-size:13.5px;font-weight:600;color:var(--mut);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--red);color:#fff !important;font-family:'Archivo';font-weight:800;font-size:13px;padding:9px 20px;border-radius:99px;transition:background .2s}
.nav-cta:hover{background:var(--red2)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:18px;padding:4px 10px;cursor:pointer}

/* ---------- typography ---------- */
.kick{font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--redtxt);margin-bottom:14px}
h1.hero-h{font-family:'Archivo';font-weight:900;letter-spacing:-.02em;line-height:1.04;font-size:clamp(34px,5.6vw,64px);color:#fff}
h1.hero-h .r,h2 .r{color:var(--red2)}
h2.sec{font-family:'Archivo';font-weight:900;letter-spacing:-.015em;line-height:1.1;font-size:clamp(26px,3.6vw,40px);color:#fff;margin-bottom:14px}
h3.card-h{font-family:'Archivo';font-weight:800;font-size:18px;color:#fff;margin-bottom:8px}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--mut);max-width:680px;line-height:1.65}
.muted{color:var(--mut)}
.fine{font-size:12.5px;color:var(--dim);line-height:1.7}

/* ---------- sections ---------- */
.section{padding:clamp(56px,9vw,110px) 0}
.section.alt{background:var(--ink2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero{padding:clamp(72px,11vw,140px) 0 clamp(56px,8vw,100px);text-align:center;background:radial-gradient(900px 480px at 50% -10%,rgba(191,13,11,.16),transparent 70%)}
.hero .lede{margin:20px auto 0}

/* ---------- buttons ---------- */
.btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.btn{display:inline-block;font-family:'Archivo';font-weight:800;font-size:15px;padding:15px 32px;border-radius:99px;text-decoration:none;transition:.2s}
.btn.p{background:var(--red);color:#fff;box-shadow:0 0 30px rgba(191,13,11,.35)}
.btn.p:hover{background:var(--red2);transform:translateY(-2px)}
.btn.s{background:var(--ink3);color:#fff;border:1px solid #2a3346}
.btn.s:hover{border-color:var(--red2)}
.textlink{font-size:14px;font-weight:600;color:var(--mut);text-decoration:none}
.textlink:hover{color:#fff}
.textlink b{color:var(--redtxt)}

/* ---------- cards & grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:20px;padding:28px}
.card.brandcard{border-color:#2a3346}
.card p{font-size:14.5px;color:var(--mut);line-height:1.65}
.card ul{list-style:none;margin-top:12px}
.card li{font-size:14px;color:var(--mut);padding:5px 0 5px 20px;position:relative}
.card li::before{content:'';position:absolute;left:0;top:.85em;width:7px;height:7px;background:var(--red)}
.card .cta-row{margin-top:18px}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--redtxt);margin-bottom:10px}

/* ---------- journey strip ---------- */
.journey{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin-top:40px}
.jstep{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 6px}
.jstep .dot{min-width:120px;text-align:center;border:1.5px solid var(--line);background:var(--ink2);border-radius:14px;padding:12px 16px;font-family:'Archivo';font-weight:800;font-size:14px;color:#fff}
.jarrow{color:var(--red2);font-weight:900;font-size:18px;padding:0 8px;position:relative;top:-4px}
.jstep.hot .dot{border-color:var(--red2);background:linear-gradient(160deg,rgba(191,13,11,.2),var(--ink2));box-shadow:0 0 22px rgba(191,13,11,.3)}

/* ---------- audience chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.chip{border:1px solid var(--line);background:var(--ink2);border-radius:99px;padding:10px 20px;font-size:13.5px;font-weight:600;color:var(--mut)}

/* ---------- CTA band ---------- */
.ctaband{text-align:center;padding:clamp(56px,8vw,96px) 24px;background:radial-gradient(700px 360px at 50% 120%,rgba(191,13,11,.22),transparent 70%)}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.form-grid .full{grid-column:1/-1}
label.f{display:block}
label.f span{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:6px}
input.f,select.f,textarea.f{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:12px;color:#fff;font-family:inherit;font-size:14.5px;padding:12px 14px}
input.f:focus,select.f:focus,textarea.f:focus{outline:2px solid var(--red2);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-msg{margin-top:14px;font-size:14px;font-weight:600}
.form-msg.ok{color:#a3e635}
.form-msg.err{color:var(--redtxt)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--ink2);padding:48px 0 34px;margin-top:0}
.foot{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot .foot-h{font-family:'Archivo';font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.foot a{display:block;font-size:13.5px;color:var(--mut);text-decoration:none;padding:3px 0}
.foot a:hover{color:#fff}
.foot p{font-size:13px;color:var(--mut);line-height:1.7}
.foot-legal{max-width:1120px;margin:30px auto 0;padding:22px 24px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}

/* ---------- reveal (hidden state applies only when JS is running; content stays visible without JS) ---------- */
html.js .fx{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
html.js .fx.on{opacity:1;transform:none}

/* ---------- video hero: copy left, portrait video panel right ---------- */
.vhero{position:relative;overflow:hidden;background:var(--ink) radial-gradient(1000px 560px at 78% 30%,rgba(191,13,11,.14),transparent 65%)}
.vhero-grid{display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"head panel" "rest panel";column-gap:56px;align-items:center;padding-top:64px;padding-bottom:64px;min-height:min(86vh,820px)}
.vh-head{grid-area:head;align-self:end;text-align:left}
.vh-rest{grid-area:rest;align-self:start;text-align:left}
.vh-rest .lede{margin:20px 0 0;max-width:540px}
.vh-rest .btns{justify-content:flex-start;margin-top:28px}
.vpanel{grid-area:panel;justify-self:center;aspect-ratio:9/16;height:min(72vh,640px);border-radius:22px;overflow:hidden;border:1px solid rgba(229,52,47,.25);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 44px rgba(191,13,11,.18);background:url('/media/hero-poster.jpg') center/cover no-repeat}
.vpanel video{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- metric strip ---------- */
.mstrip{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink2);padding:13px 0}
.mtrack{display:flex;gap:26px;align-items:center;white-space:nowrap;width:max-content;font-family:'Archivo';font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.mtrack i{color:var(--redtxt);font-style:normal}
html.js .mtrack{animation:mslide 26s linear infinite}
@keyframes mslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- energy: red line, card lift, journey stagger ---------- */
.redline{height:2px;width:64px;margin:18px auto 0;background:linear-gradient(90deg,var(--red),var(--red2));border-radius:2px;transition:width .9s ease .15s}
html.js .redline.fx{opacity:1;transform:none;width:0}
html.js .redline.fx.on{width:120px}
.lift{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.lift:hover{transform:translateY(-5px);border-color:rgba(229,52,47,.45);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 22px rgba(191,13,11,.12)}
html.js .journey .jstep,html.js .journey .jarrow{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
html.js .journey.on .jstep,html.js .journey.on .jarrow{opacity:1;transform:none}
html.js .journey.on .jstep:nth-child(1){transition-delay:.05s}
html.js .journey.on .jarrow:nth-child(2){transition-delay:.2s}
html.js .journey.on .jstep:nth-child(3){transition-delay:.35s}
html.js .journey.on .jarrow:nth-child(4){transition-delay:.5s}
html.js .journey.on .jstep:nth-child(5){transition-delay:.65s}
html.js .journey.on .jarrow:nth-child(6){transition-delay:.8s}
html.js .journey.on .jstep:nth-child(7){transition-delay:.95s}
html.js .journey.on .jarrow:nth-child(8){transition-delay:1.1s}
html.js .journey.on .jstep:nth-child(9){transition-delay:1.25s}

/* ---------- combine section + product shots ---------- */
.combine-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.combine-media{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.combine-media img{display:block;width:100%;height:auto}
.combine-media.portrait{max-width:380px;justify-self:center;overflow:visible;border:none;box-shadow:none}
.combine-media.portrait video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:18px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);background:#000}
html.js .combine-media img{transition:transform 6s ease}
html.js .combine-media.on img{transform:scale(1.05)}
.shots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:36px;align-items:start}
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.45);transition:transform .35s ease,border-color .35s ease}
.shot:hover img{transform:translateY(-6px);border-color:rgba(229,52,47,.4)}
.shot figcaption{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--mut)}

:focus-visible{outline:2px solid var(--red2);outline-offset:2px;border-radius:4px}

@media (max-width:860px){
  .grid2,.grid3{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink2);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 24px;gap:14px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .jarrow{transform:rotate(90deg);top:0;padding:6px 0}
  .journey{flex-direction:column}
  html.js .journey .jarrow{transform:rotate(90deg) translateX(14px)}
  html.js .journey.on .jarrow{transform:rotate(90deg)}
  .vhero-grid{grid-template-columns:1fr;grid-template-areas:"head" "panel" "rest";row-gap:26px;padding-top:44px;padding-bottom:52px;min-height:0}
  .vh-head{text-align:center;align-self:auto}
  .vh-rest{text-align:center;align-self:auto}
  .vh-rest .lede{margin:0 auto}
  .vh-rest .btns{justify-content:center}
  .vpanel{width:min(86%,340px);height:auto;justify-self:center}
  .combine-grid{grid-template-columns:1fr;gap:28px}
  .combine-media.portrait{max-width:340px;margin:0 auto}
  .shots{grid-template-columns:1fr;max-width:420px;margin:36px auto 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .fx{opacity:1;transform:none;transition:none}
  .btn.p:hover{transform:none}
  html.js .mtrack{animation:none}
  html.js .journey .jstep,html.js .journey .jarrow{opacity:1;transform:none;transition:none}
  html.js .journey .jarrow{transform:none}
  html.js .redline.fx{width:120px;transition:none}
  .lift:hover,.shot:hover img{transform:none}
  html.js .combine-media img,html.js .combine-media.on img{transform:none;transition:none}
}