/* =========================================================
   APEXFITX — shared stylesheet
   Design tokens carried over from the original one-page build,
   extended with components needed for the multi-page site.
   ========================================================= */

:root{
  --apex-red:#d32f2f; --apex-red-d:#b12626;
  --apex-gold:#c9a24b; --apex-gold-d:#a9822f;
  --ink:#0d0d0f; --muted:#6b7280; --bg:#ffffff;
  --card:#f8fafc; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --white:#fff;
  --nav-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.h2{font-family:Montserrat,sans-serif;font-size:32px;margin:0 0 10px;color:var(--apex-red)}
.lead{color:#111827;opacity:.9}
.eyebrow{display:inline-block;font-family:Montserrat,sans-serif;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:12px;color:var(--apex-red);margin-bottom:8px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:800;border:1px solid transparent;transition:.25s;cursor:pointer;font-size:15px}
.btn-primary{background:var(--apex-red);color:#fff}
.btn-primary:hover{background:var(--apex-red-d);transform:translateY(-1px)}
.btn-ghost{border-color:#e5e7eb;color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:#cbd5e1;transform:translateY(-1px)}
.btn-block{width:100%}
.btn:focus-visible, a:focus-visible, summary:focus-visible, .dot:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--apex-red-d);outline-offset:2px}

/* NAV */
.nav{position:sticky;top:0;z-index:1000;backdrop-filter: blur(8px);background:rgba(255,255,255,.9);border-bottom:1px solid #e5e7eb}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--apex-red),#ff6b6b);box-shadow: var(--shadow);flex:0 0 auto}
.brand-name{font-family:Montserrat,sans-serif;font-weight:800;letter-spacing:.5px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a.nav-link{font-weight:600;color:#374151;padding:8px 2px;border-bottom:2px solid transparent}
.nav-links a.nav-link:hover, .nav-links a.nav-link.active{color:var(--ink);border-bottom-color:var(--apex-red)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}
@media (max-width:860px){
  /* NOTE: .nav has backdrop-filter, which makes it the containing block for this
     position:fixed panel. bottom:0 would resolve against nav's own ~64px box
     instead of the viewport, so height is computed explicitly via svh instead. */
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;height:calc(100svh - var(--nav-h));background:#fff;flex-direction:column;align-items:flex-start;padding:24px 24px;gap:4px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s;border-top:1px solid #e5e7eb;overflow-y:auto}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a.nav-link{width:100%;padding:14px 4px;border-bottom:1px solid #f1f5f9}
  .nav-toggle{display:block}
}

/* PAGE HERO (inner pages) */
.page-hero{background:#0a0c12;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:-20% -10% -10% -10%;z-index:-1;pointer-events:none;background:
  radial-gradient(700px 380px at 15% 0%, rgba(211,47,47,.4), transparent 60%),
  radial-gradient(800px 420px at 90% 10%, rgba(211,47,47,.3), transparent 65%);mix-blend-mode:screen}
.page-hero-inner{max-width:900px;padding:64px 20px 56px;margin:0 auto}
.page-hero .kicker{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);font-weight:800;letter-spacing:.4px;font-size:13px}
.page-hero h1{font-family:Montserrat,system-ui,sans-serif;font-weight:900;line-height:1.05;font-size:clamp(30px,4.4vw,52px);margin:14px 0 10px}
.page-hero p{font-size:clamp(16px,1.6vw,18px);opacity:.92;max-width:64ch}
.page-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.page-hero.with-photo{background:#0a0c12}
.page-hero .hero-photo{position:absolute;inset:0;z-index:-2;opacity:.34}
.page-hero .hero-photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05)}

/* HOME HERO (kept from the original build) */
#apex-hero{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;color:var(--white);background:#0a0c12}
#apex-hero .apex-bg{position:absolute;inset:0;z-index:-2}
#apex-hero .apex-bg figure{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:fadeZoom 30s linear infinite;transform:scale(1.08);filter:contrast(1.05) brightness(.95) saturate(1.05)}
#apex-hero .apex-bg figure:nth-child(1){animation-delay:0s}
#apex-hero .apex-bg figure:nth-child(2){animation-delay:6s}
#apex-hero .apex-bg figure:nth-child(3){animation-delay:12s}
#apex-hero .apex-bg figure:nth-child(4){animation-delay:18s}
#apex-hero .apex-bg figure:nth-child(5){animation-delay:24s}
@keyframes fadeZoom{0%{opacity:0;transform:scale(1.08)}6%{opacity:.9}30%{opacity:.9;transform:scale(1)}33%{opacity:0}100%{opacity:0}}
#apex-hero .apex-wash{position:absolute;inset:-20% -10% -10% -10%;z-index:-1;pointer-events:none;background:
  radial-gradient(800px 400px at 15% 10%, rgba(211,47,47,.45), transparent 60%),
  radial-gradient(900px 480px at 85% -5%, rgba(211,47,47,.38), transparent 65%);mix-blend-mode: screen}
#apex-hero .apex-wrap{max-width:1200px;margin:0 auto;padding:min(6vw,64px) 20px;display:grid;grid-template-columns:1.25fr 1fr;gap:38px;align-items:center}
#apex-hero .kicker{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);font-weight:800;letter-spacing:.4px}
#apex-hero .h1{font-family:Montserrat,system-ui,sans-serif;font-weight:900;line-height:1.02;font-size: clamp(36px, 5vw, 68px);margin:14px 0 8px;letter-spacing:.2px}
#apex-hero .sub{font-size:clamp(16px,1.9vw,18px);opacity:.95;max-width:56ch}
#apex-hero .hero-points{margin:18px 0 0;display:grid;gap:10px;padding:0}
#apex-hero .hero-points li{list-style:none;display:flex;gap:10px;align-items:flex-start;opacity:.95}
#apex-hero .hero-points svg{flex:0 0 18px}
#apex-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
#apex-hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
#apex-hero .badge{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px);font-weight:800}
#apex-hero .badge.gold{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));border:1px solid transparent}
#apex-hero .metrics{margin-top:16px;display:flex;gap:14px;flex-wrap:wrap}
#apex-hero .metric{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px);font-weight:800;display:flex;gap:8px;align-items:center}
#apex-hero .metric .num{font-family:Montserrat,sans-serif;color:#fff}
#apex-hero .parallax{position:relative;height:56svh;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);backdrop-filter: blur(6px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
#apex-hero .p-layer{position:absolute;inset:0;pointer-events:none;transition:transform .06s linear}
#apex-hero .p-layer img{width:140%;max-width:none;position:absolute;bottom:-6%;left:-10%;opacity:.9;filter:contrast(1.05)}
#apex-hero .p-fore img{width:120%;left:-4%;bottom:-2%}
#apex-hero .p-light{background: radial-gradient(500px 300px at 70% 20%, rgba(255,255,255,.28), transparent 50%);mix-blend-mode: screen;opacity:.35}
#apex-hero .marquee{position:absolute;left:0;bottom:18px;width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#apex-hero .marquee-track{display:flex;gap:28px;white-space:nowrap;animation:scroll 20s linear infinite;color:#e5e7eb;opacity:.85}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (max-width:980px){#apex-hero .apex-wrap{grid-template-columns:1fr;gap:24px} #apex-hero .parallax{height:44svh}}

/* TRUST/COUNTERS */
.trust{padding:40px 0;background:#fff}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.counter{background:var(--card);border-radius:var(--radius);padding:22px;text-align:center;border:1px solid #eef2f7;box-shadow:var(--shadow)}
.counter .num{font-family:Montserrat,sans-serif;font-weight:800;color:var(--apex-red);font-size:28px}
.counter .lbl{color:var(--muted);font-size:14px}
@media (max-width:700px){.counters{grid-template-columns:repeat(2,1fr)}}

/* CONTENT LAYOUTS */
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.split.reverse{grid-template-columns:1fr 1.2fr}
.split.reverse > *:first-child{order:2}
.card{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.list{display:grid;gap:10px;margin-top:10px;padding:0}
.list li{list-style:none;display:flex;gap:10px}
.list svg{flex:0 0 20px;color:var(--apex-red)}
.photo{border-radius:var(--radius);overflow:hidden;border:1px solid #e5e7eb;box-shadow:var(--shadow)}
.section{padding:56px 20px}
.section-tight{padding:0 20px 56px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:980px){
  .split,.split.reverse{grid-template-columns:1fr}
  .split.reverse > *:first-child{order:0}
  .grid-3,.grid-2{grid-template-columns:1fr}
}

/* PLAN / STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{position:relative;background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:.25s}
.step:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.step-num{position:absolute;top:-14px;left:-14px;background:var(--apex-red);color:#fff;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;border:3px solid #fff}
@media (max-width:980px){.steps{grid-template-columns:1fr}}

/* PROGRAM CARDS (programs overview) */
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.program-card{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.program-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.program-card .thumb{height:180px;overflow:hidden}
.program-card .thumb img{width:100%;height:100%;object-fit:cover}
.program-card .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.program-card h3{margin:0;font-family:Montserrat,sans-serif;color:var(--ink)}
.program-card .tag{color:var(--apex-red);font-weight:800;font-size:12px;letter-spacing:.6px;text-transform:uppercase}
.program-card p{margin:0;color:var(--muted);font-size:14.5px}
.program-card .btn{margin-top:auto;align-self:flex-start}
@media (max-width:980px){.program-grid{grid-template-columns:1fr}}

/* CAROUSEL */
.carousel{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid #e5e7eb;background:#fff}
.track{display:flex;transition:transform .5s ease}
.slide{min-width:100%;padding:28px;display:grid;grid-template-columns:1fr .9fr;gap:24px;align-items:center}
.slide .quote{font-size:18px;line-height:1.6}
.slide .person{font-weight:700;color:var(--apex-red)}
.slide .role{color:var(--muted);font-size:13.5px;margin-top:2px}
.slide .t-photo{border-radius:14px;overflow:hidden;border:1px solid #e5e7eb}
.dots{display:flex;gap:8px;justify-content:center;padding:10px}
.dot{width:10px;height:10px;border-radius:50%;background:#e5e7eb;cursor:pointer;border:0;padding:0}
.dot.active{background:var(--apex-red)}
@media (max-width:980px){.slide{grid-template-columns:1fr}}

/* PRICING */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.price .name{font-family:Montserrat,sans-serif;font-weight:800;font-size:20px;color:var(--apex-red)}
.price .amt{font-family:Montserrat,sans-serif;font-weight:800;font-size:34px;margin:6px 0}
.price ul{margin:12px 0 18px;padding:0;display:grid;gap:8px}
.price li{list-style:none;display:flex;gap:8px;font-size:14.5px}
.price .btn{margin-top:auto}
.badge{display:inline-block;background:var(--apex-red);color:#fff;border-radius:999px;padding:4px 10px;font-weight:700;font-size:12px;margin-left:8px}
@media (max-width:980px){.pricing{grid-template-columns:1fr}}

/* COMPARISON TABLE (pricing page) */
.compare{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid #eef2f7;text-align:left;font-size:14.5px}
.compare th{background:var(--card);font-family:Montserrat,sans-serif}
.compare td.yes{color:var(--apex-red);font-weight:800}
.compare-wrap{overflow-x:auto;position:relative}
.compare-hint{display:none;color:var(--muted);font-size:13px;margin-bottom:8px}
@media (max-width:650px){
  .compare-hint{display:block}
  .compare-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));pointer-events:none}
}

/* FAQ */
.faq{display:grid;gap:12px}
.qa{border:1px solid #e5e7eb;border-radius:14px;background:#fff;overflow:hidden}
.qa summary{cursor:pointer;padding:16px 18px;font-weight:700;color:var(--apex-red);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:20px;color:var(--muted);transition:.2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa div{padding:0 18px 16px;color:#0f172a}
.faq-cat{margin:34px 0 14px;font-family:Montserrat,sans-serif;font-size:15px;color:var(--ink)}
.faq-cat:first-child{margin-top:0}

/* FORM (contact) */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:13.5px}
.field .req{color:var(--apex-red)}
.field input,.field select,.field textarea{font:inherit;padding:12px 14px;border-radius:10px;border:1px solid #dbe0e6;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--apex-red);outline:none}
.field textarea{resize:vertical;min-height:110px}
.form-note{font-size:13px;color:var(--muted)}
.form-status{padding:14px 16px;border-radius:12px;font-weight:700;display:none;margin-top:16px}
.form-status.show{display:block}
.form-status.ok{background:#ecfdf3;color:#046c4e;border:1px solid #bbf1d4}
.form-status.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.contact-info{display:grid;gap:14px}
.contact-info .item{display:flex;gap:12px;align-items:flex-start}
.contact-info svg{flex:0 0 22px;color:var(--apex-red);margin-top:2px}
.contact-info h4{margin:0 0 2px;font-family:Montserrat,sans-serif}
.contact-info p{margin:0;color:var(--muted)}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}

/* PROSE (privacy) */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-family:Montserrat,sans-serif;color:var(--ink);font-size:22px;margin:32px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{color:#1f2937;margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:20px;color:#1f2937}
.prose .updated{color:var(--muted);font-size:14px;margin-bottom:28px}

/* CAREERS */
.role-card{border:1px solid #eef2f7;border-radius:var(--radius);padding:22px;background:#fff;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.role-card h3{margin:0 0 4px;font-family:Montserrat,sans-serif}
.role-card p{margin:0;color:var(--muted)}

/* BEFORE/AFTER */
.ba-wrap{position:relative;height:360px;overflow:hidden;border-radius:var(--radius)}
.ba-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-handle{position:absolute;inset:0;width:0;border-left:3px solid #fff;left:50%}
.ba-grab{position:absolute;left:calc(50% - 16px);top:calc(50% - 16px);width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--apex-red);box-shadow:var(--shadow)}

/* FOOTER */
.footer{background:#0b0e14;color:#e5e7eb;padding:48px 0 0}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
.foot-cta{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.foot-grid h4{margin:0 0 8px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.foot-grid ul a{color:#cbd5e1}
.foot-grid ul a:hover{color:#fff}
.copyright{border-top:1px solid #1f2937;margin-top:24px;padding:16px 20px;color:#94a3b8;font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* skip link */
.skip-link{position:absolute;left:-999px;top:auto;background:var(--apex-red);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:2000}
.skip-link:focus{left:0;top:0}