/* Performance First — brand-aligned stylesheet
   Brick #B7001E, Denim #0079BE, Iron #535456
   Typography: Helvetica Neue family
*/

:root{
  /* Brand palette — official values from PF brand guidelines (page 12) */
  --red:#B7001E;       /* RED  — primary bright red, CTAs */
  --brick:#B7001E;     /* legacy alias for --red (most CSS still references --brick) */
  --brick-dk:#9C0013;  /* BRICK — deeper red, hover state, shadow side of emblem */
  --blue:#0079BE;      /* BLUE  — primary bright blue */
  --denim:#0079BE;     /* legacy alias for --blue */
  --denim-dk:#004E7F;  /* DENIM — deeper blue, hover state, shadow side of emblem */
  --denim-lt:#0079BE;  /* legacy alias — collapsed to primary blue (no more light sky tone) */
  --iron:#535456;      /* IRON — body copy, secondary text */
  --ink:#0F1216;
  --ink-2:#1B2129;
  --bg:#FFFFFF;
  --bg-soft:#F4F6F8;
  --line:#E5E8EC;
  --shadow: 0 8px 24px rgba(15,18,22,.08);
  --shadow-lg: 0 24px 60px rgba(15,18,22,.18);
  --radius: 16px;
  --radius-sm: 8px;
  --maxw: 1240px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--denim);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(15,18,22,.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 30px rgba(0,0,0,.25);
}
/* On non-home pages the header always uses solid styling */
body.solid-header .site-header{
  background:rgba(15,18,22,.96);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;gap:32px;
}

/* ---------- BRAND LOCKUP RULES ----------
   .brand            → wordmark lockup: EMBLEM + "PERFORMANCE FIRST" only (header default).
   .brand.full       → full lockup: EMBLEM + wordmark + tagline subtitle (footer / brand surfaces).
   .scrolled .brand  → emblem only (header collapsed on scroll).
   These three states cover every surface — never mix lockups within one surface.
------------------------------------------------ */
.brand{
  display:flex;align-items:center;gap:14px;color:#fff;
  text-decoration:none;line-height:1;height:100%;
  flex-shrink:0;          /* critical: stop the nav from squeezing the wordmark */
  min-width:0;            /* allow internal collapse on scroll animation only */
}
.brand:hover{text-decoration:none}
.brand img{height:36px;width:auto;flex-shrink:0;display:block;transition:height .25s ease}
.brand .wm{
  display:inline-flex;flex-direction:column;justify-content:center;
  color:#fff;font-weight:800;font-size:14px;letter-spacing:2.4px;line-height:1;
  white-space:nowrap;
  flex-shrink:0;          /* never let the wordmark itself be clipped */
  overflow:visible;       /* default: show every character */
  max-width:none;
  transition:opacity .25s ease;
  opacity:1;
}
@media (max-width:520px){
  .brand .wm{font-size:11.5px;letter-spacing:1.5px}
}
/* HEADER default: hide the tagline */
.brand .wm small{display:none}
/* FULL LOCKUP (footer): the image IS the lockup (emblem + wordmark + tagline + heartbeat).
   Hide the HTML wordmark since the image carries it. Image is taller than header emblem. */
.brand.full{align-items:flex-start;display:block;height:auto}
.brand.full img{height:auto;max-height:140px;width:auto;max-width:240px;display:block}
.brand.full .wm{display:none}

/* Scrolled state: emblem stays, wordmark fades out (no layout shift) */
.site-header.scrolled .brand .wm{
  opacity:0;
  visibility:hidden;
  width:0;max-width:0;margin-left:-14px;
  transition:opacity .25s ease, max-width .35s ease, margin .35s ease, visibility 0s linear .35s;
}
.site-header.scrolled .brand img{height:32px}

.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center;height:100%}
.nav ul li{display:flex;align-items:center;height:100%}
.nav a.nav-link{
  color:#fff;font-weight:600;font-size:12px;letter-spacing:1.8px;
  text-transform:uppercase;opacity:.82;transition:opacity .2s, color .2s;
  display:inline-flex;align-items:center;height:100%;
}
.nav a.nav-link:hover{opacity:1;text-decoration:none}
.nav a.nav-link.active{color:var(--denim-lt);opacity:1}

.nav .cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--brick);color:#fff;
  height:42px;padding:0 22px;border-radius:999px;
  font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  transition:background .2s, transform .2s;
  align-self:center;flex-shrink:0;
}
.nav .cta::after{content:"→";font-size:14px;opacity:.9;letter-spacing:0}
.nav .cta:hover{background:var(--brick-dk);text-decoration:none;transform:translateY(-1px)}

.menu-btn{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:#fff;padding:8px}

@media (max-width:980px){
  .nav ul{
    display:none;position:absolute;top:78px;left:0;right:0;background:rgba(15,18,22,.98);
    flex-direction:column;padding:20px 28px;gap:18px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .nav ul.open{display:flex}
  .nav .cta{display:none}
  .menu-btn{display:block}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  color:#fff;overflow:hidden;
  background:#0F1216;
}
.hero .bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.55) contrast(1.05);
  transform:scale(1.04);
  animation:slowzoom 22s ease-in-out infinite alternate;
}
@keyframes slowzoom{from{transform:scale(1.0)}to{transform:scale(1.08)}}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(15,18,22,.55) 0%, rgba(15,18,22,.25) 35%, rgba(15,18,22,.85) 100%),
    radial-gradient(900px 500px at 80% 20%, rgba(0,121,190,.25), transparent 60%);
  z-index:1;
}
.hero .container{position:relative;z-index:2;padding-top:120px;padding-bottom:80px;width:100%}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:#fff;background:var(--brick);padding:8px 14px;border-radius:4px;margin-bottom:24px;font-weight:700;
}
.hero .eyebrow::before{content:"";width:6px;height:6px;background:#fff;border-radius:50%}
.hero h1{
  font-size:clamp(40px, 6vw, 84px);line-height:1.0;margin:0 0 22px;
  font-weight:900;letter-spacing:-1.5px;text-transform:uppercase;
  max-width:1000px;
}
.hero h1 .accent{color:var(--denim-lt);display:block}
.hero h1 .brick{color:#fff;-webkit-text-stroke:0;position:relative;display:inline-block}
.hero h1 .brick::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:5px;background:var(--brick);
}
.hero p.lead{font-size:clamp(16px,1.4vw,19px);max-width:680px;color:#D7DEE6;margin:0 0 36px;line-height:1.6}
.hero .actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:60px;align-items:center}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;align-items:center}

/* ---------- BUTTONS ----------
   Fixed height + box-sizing so filled (no border) and ghost (1.5px border) match exactly.
   Premium tracking (1.8px) and weight tuned for Nike/Equinox feel.
*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 30px;box-sizing:border-box;
  border-radius:999px;
  font-weight:800;font-size:12px;letter-spacing:1.8px;
  text-transform:uppercase;line-height:1;white-space:nowrap;
  border:1.5px solid transparent;       /* keeps height identical between filled + ghost */
  cursor:pointer;text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brick);color:#fff;border-color:var(--brick)}
.btn-primary:hover{background:var(--brick-dk);border-color:var(--brick-dk);transform:translateY(-2px);box-shadow:0 12px 28px rgba(183,0,30,.35)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:#000;border-color:#000;transform:translateY(-2px)}
.btn-denim{background:var(--denim);color:#fff;border-color:var(--denim)}
.btn-denim:hover{background:var(--denim-dk);border-color:var(--denim-dk);transform:translateY(-2px)}

/* compact variant for cards / inline secondary actions */
.btn.btn-sm{height:40px;padding:0 22px;font-size:11px;letter-spacing:1.5px}

/* hero trust strip pinned to bottom */
.hero-trust{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:rgba(15,18,22,.5);backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:18px 0;
}
.hero-trust .container{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding-top:0;padding-bottom:0}
.hero-trust .ts{display:flex;align-items:center;gap:12px;color:#D7DEE6;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.hero-trust .ts strong{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.5px;text-transform:none}

@media (max-width:760px){
  .hero{min-height:auto;padding:90px 0 0}
  .hero .container{padding-top:60px;padding-bottom:140px}
  .hero h1{font-size:44px}
  .hero-trust{position:static}
  .hero-trust .container{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- SECTION ---------- */
.section{padding:110px 0;position:relative}
.section.tight{padding:64px 0}
.section.alt{background:var(--bg-soft)}
.section.dark{background:var(--ink);color:#fff}
.section.darker{background:#0B0E12;color:#fff}

.eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--brick);font-weight:800;display:inline-block}
.section.dark .eyebrow,.section.darker .eyebrow{color:var(--denim-lt)}

h2.section-title{
  font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-1px;
  margin:12px 0 18px;font-weight:900;text-transform:uppercase;
  position:relative;padding-left:22px;
}
/* "cutting line" red bar */
h2.section-title::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:6px;background:var(--brick);border-radius:2px;
}
/* centered variant — for manifesto / hero-style section headings */
h2.section-title.centered, .center > h2.section-title{padding-left:0}
h2.section-title.centered::before, .center > h2.section-title::before{display:none}
.section-sub{color:var(--iron);font-size:18px;max-width:720px;margin:0 0 48px;line-height:1.6}
.section.dark .section-sub,.section.darker .section-sub{color:#B6BFC9}
.section-head{margin-bottom:48px}
.section-head .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* ---------- GRIDS ---------- */
.grid{display:grid;gap:24px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:980px){
  .grid.cols-3,.grid.cols-4,.grid.cols-6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4,.grid.cols-6{grid-template-columns:1fr}
}

/* ---------- SERVICE TILES (image cards) ----------
   Landscape 3:2 — matches actual source photo aspect exactly = ZERO crop.
   Photos breathe at their natural shape, no awkward zooming.
*/
.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:3/2;background:#1B2129;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer;transition:transform .35s ease;
}
.tile:hover{transform:translateY(-4px);text-decoration:none}
.tile .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease}
.tile:hover .img{transform:scale(1.02)}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.85) 100%);
}
.tile .body{position:relative;z-index:2;padding:26px}
.tile .tag{
  display:inline-block;font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:#fff;background:var(--brick);padding:5px 10px;border-radius:3px;font-weight:700;margin-bottom:10px;
}
.tile .tag.denim{background:var(--denim)}
.tile h3{margin:0 0 8px;font-size:24px;line-height:1.1;letter-spacing:-.3px;font-weight:800;text-transform:uppercase;color:#fff}
.tile p{margin:0;color:#D7DEE6;font-size:14px}
.tile .arr{position:absolute;top:22px;right:22px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;z-index:2;font-size:18px;transition:background .2s}
.tile:hover .arr{background:var(--brick)}

/* placeholder background for tiles awaiting real photos */
.tile .img.placeholder,
.hyrox-band .img.placeholder,
.sas-band .img.placeholder{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, #1B2129 0%, #0F1216 100%);
}
.tile .img.placeholder.denim,
.sas-band .img.placeholder.denim{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--denim-dk) 0%, #0F1216 100%);
}
.tile .img.placeholder::after,
.hyrox-band .img.placeholder::after,
.sas-band .img.placeholder::after{
  content:"// photo pending";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.35);font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700;
}
.sas-band .img{position:relative}

.tile.wide{aspect-ratio:16/9;grid-column:span 2}
.tile.tall{aspect-ratio:3/4}
@media (max-width:980px){.tile.wide{grid-column:span 1}}

/* ---------- HYROX FEATURE BAND ---------- */
.hyrox-band{
  background:linear-gradient(135deg,#0F1216 0%, #1B2129 60%, #2a0408 100%);
  color:#fff;border-radius:var(--radius);overflow:hidden;
  display:grid;grid-template-columns:1.1fr 1fr;
  position:relative;
}
.hyrox-band .copy{padding:60px}
/* Bigger min-height so the photo breathes and isn't tightly cropped */
.hyrox-band .img{background-size:cover;background-position:center;min-height:520px}
.hyrox-band .new{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brick);color:#fff;padding:6px 12px;border-radius:4px;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:800;margin-bottom:16px;
}
.hyrox-band h2{font-size:48px;font-weight:900;letter-spacing:-1px;margin:0 0 16px;text-transform:uppercase;line-height:1}
.hyrox-band p{color:#B6BFC9;font-size:17px;max-width:520px;margin:0 0 28px}
.hyrox-band ul{list-style:none;padding:0;margin:0 0 30px;color:#D7DEE6;font-size:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hyrox-band ul li::before{content:"› ";color:var(--brick);font-weight:800}
@media (max-width:880px){
  .hyrox-band{grid-template-columns:1fr}
  .hyrox-band .copy{padding:36px 24px}
  .hyrox-band h2{font-size:34px}
}

/* ---------- METHODOLOGY (3-col with red bars) ---------- */
.method{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;position:relative;transition:transform .25s ease, box-shadow .25s ease;
}
.method:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.method .num{
  font-size:14px;font-weight:800;color:var(--brick);letter-spacing:3px;margin-bottom:12px;
}
.method h3{margin:0 0 10px;font-size:22px;letter-spacing:-.3px;font-weight:800}
.method p{margin:0;color:var(--iron);font-size:15px}

/* ---------- IMAGE-LED CARDS (used on subpages like gym.html, classes.html) ----------
   Bulletproof CTA-row alignment: grid stretches all cards to equal height, body is
   flex-column with the trailing CTA <p> pushed to the bottom with margin-top:auto.
*/
/* Force the parent grid to stretch all cards to the tallest one */
.grid.cols-3,.grid.cols-4,.grid.cols-2{align-items:stretch}

.card.img-card{
  padding:0;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex !important;flex-direction:column !important;
  transition:transform .25s ease, box-shadow .25s ease;
  height:100% !important;          /* fill the grid cell */
  align-self:stretch !important;
}
.card.img-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(15,18,22,.10)}
.card.img-card .ph{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#0F1216;flex-shrink:0}
.card.img-card .body{
  padding:24px 22px 22px;
  display:flex !important;flex-direction:column !important;
  flex:1 1 auto !important;        /* take remaining vertical space */
  gap:10px;
}
.card.img-card h3{margin:0;font-size:18px;letter-spacing:-.2px;font-weight:800;text-transform:uppercase}
.card.img-card p{margin:0;color:var(--iron);font-size:14px;line-height:1.55}
.card.img-card .tag{align-self:flex-start;margin-bottom:4px}
/* push the LAST paragraph in body to the bottom of the body (= bottom of card) */
.card.img-card .body > p:last-child{margin-top:auto !important;padding-top:14px}
/* button at the bottom always sits flush-left and at a consistent height */
.card.img-card .body > p:last-child > .btn{margin-top:0}

/* ---------- COURSES GRID (stable schedule — instructor + class only) ---------- */
.course{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;display:flex;flex-direction:column;gap:6px;
  transition:transform .2s ease, border-color .2s ease;
}
.course:hover{transform:translateY(-2px);border-color:var(--ink)}
.course .when{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.course .when::before{content:"";width:8px;height:8px;border-radius:50%}
.course .when.morning{color:var(--brick)}
.course .when.morning::before{background:var(--brick)}
.course .when.evening{color:var(--denim)}
.course .when.evening::before{background:var(--denim)}
.course .when.both{color:var(--iron)}
.course .when.both::before{background:linear-gradient(90deg, var(--brick) 50%, var(--denim) 50%)}
.course h3{margin:6px 0 2px;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.2px;line-height:1.2}
.course .by{font-size:13px;color:var(--iron);font-weight:500}
.course .by strong{color:var(--ink);font-weight:700}
.courses-note{
  text-align:center;margin:28px auto 0;max-width:680px;color:var(--iron);font-size:14px;
  padding:18px 22px;border:1px dashed var(--line);border-radius:var(--radius);background:#fff;
}
.courses-note strong{color:var(--ink)}
.courses-note a{color:var(--brick);font-weight:700}

/* ---------- WEEKLY SCHEDULE (poster + WhatsApp CTA) ---------- */
.schedule-hero{
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.schedule-hero .sch-img{
  position:relative;min-height:420px;background:#0F1216;
  display:flex;align-items:center;justify-content:center;
}
.schedule-hero .sch-img img{width:100%;height:100%;object-fit:contain;background:#0F1216}
.schedule-hero .sch-img.no-img img{display:none}
.schedule-hero .sch-img .sch-placeholder{
  display:none;color:#fff;text-align:center;padding:40px;
  background:linear-gradient(135deg,#0F1216 0%,#1B2129 100%);
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.schedule-hero .sch-img img:not([src=""]){position:relative;z-index:2}
.schedule-hero .sch-placeholder .lbl{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--denim-lt);font-weight:800;margin-bottom:14px}
.schedule-hero .sch-placeholder p{margin:0;font-size:15px;color:#D7DEE6;max-width:360px}
.schedule-hero .sch-side{padding:48px;display:flex;flex-direction:column;justify-content:center}
.schedule-hero .sch-side .btn{align-self:flex-start}
@media (max-width:880px){
  .schedule-hero{grid-template-columns:1fr}
  .schedule-hero .sch-img{min-height:300px}
  .schedule-hero .sch-side{padding:32px 24px}
}

/* ---------- PRICING (classy, value-led) ----------
   The savings line is the visual hero. The price sits as supporting metadata.
   Cards are quiet by default; featured card adds a soft brick accent line and a refined pill.
*/
.tier{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 32px 32px;display:flex;flex-direction:column;height:100%;position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.tier:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(15,18,22,.08)}
.tier.featured{border-color:var(--brick);position:relative}
.tier.featured::before{
  content:"Best Value";position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--brick);color:#fff;
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;font-weight:800;white-space:nowrap;
}
.tier .tier-label{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--iron);
  font-weight:700;margin:0 0 8px;
}
.tier h3{display:none}  /* keep semantic h3 for SEO but use .tier-label for display */
.tier .desc{color:var(--iron);font-size:14px;margin:0 0 28px;line-height:1.5}
.tier .savings{
  font-size:clamp(34px,4vw,46px);font-weight:900;line-height:1;letter-spacing:-1.5px;
  color:var(--ink);margin:0 0 12px;
}
.tier.featured .savings{color:var(--brick)}
.tier.discount .savings{color:var(--brick)}
.tier .price-line{
  font-size:15px;color:var(--iron);margin:0 0 4px;font-weight:500;
}
.tier .price-line strong{color:var(--ink);font-weight:700}
.tier .price-sub{
  font-size:12px;color:var(--iron);letter-spacing:.5px;margin:0;
}
.tier ul{list-style:none;padding:0;margin:24px 0 28px;flex:1}
.tier ul li{padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px;color:#2c3137;line-height:1.5}
.tier ul li:last-child{border-bottom:0}
.tier ul li::before{content:"";display:inline-block;width:14px;height:8px;border-left:1.5px solid var(--brick);border-bottom:1.5px solid var(--brick);transform:rotate(-45deg) translateY(-3px);margin-right:10px;vertical-align:middle}
.tier .tier-cta{margin-top:auto}

/* ---------- TESTIMONIALS ---------- */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  position:relative;
}
.quote::before{
  content:"";position:absolute;top:24px;left:24px;width:32px;height:24px;
  background:var(--brick);clip-path:polygon(0 0, 50% 0, 30% 100%, 0 100%);
  opacity:.18;
}
.quote p{font-size:16px;line-height:1.6;margin:24px 0 16px;color:#1c2128}
.quote .who{font-size:12px;color:var(--iron);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.quote .who span{color:var(--brick)}

/* ---------- CTA STRIP ---------- */
.cta-strip{
  background:linear-gradient(135deg,var(--brick) 0%, var(--brick-dk) 100%);
  color:#fff;border-radius:var(--radius);padding:48px;
  display:grid;grid-template-columns:1.4fr auto;align-items:center;gap:36px;
  position:relative;overflow:hidden;
}
.cta-strip::before{
  content:"";position:absolute;right:-100px;top:-100px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}
.cta-strip h3{margin:0 0 6px;font-size:32px;font-weight:900;text-transform:uppercase;letter-spacing:-.5px}
.cta-strip p{margin:0;color:rgba(255,255,255,.85);font-size:16px}
@media (max-width:760px){
  .cta-strip{grid-template-columns:1fr;padding:32px 24px}
  .cta-strip h3{font-size:24px}
}

/* ---------- FORM ---------- */
.form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);
}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-size:12px;color:var(--iron);font-weight:700;margin:14px 0 6px;letter-spacing:1px;text-transform:uppercase}
.form input, .form select, .form textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  font:inherit;color:var(--ink);background:#fff;transition:all .2s;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none;border-color:var(--denim);box-shadow:0 0 0 4px rgba(0,121,190,.12);
}
.form .submit{margin-top:20px;width:100%;justify-content:center}
.form .note{font-size:11px;color:var(--iron);margin-top:12px;letter-spacing:.5px}

/* ---------- PARTNERS LOGOS BAND ---------- */
.partners-band{padding:50px 0;background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partners-band .lab{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--iron);font-weight:700;text-align:center;margin-bottom:22px}
.partners-band .row{display:flex;justify-content:center;flex-wrap:wrap;gap:50px;align-items:center;color:var(--iron);font-weight:700;letter-spacing:1.5px;font-size:14px;opacity:.8}

/* ---------- SAS BAND ---------- */
.sas-band{
  display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);overflow:hidden;
  background:#fff;border:1px solid var(--line);
}
.sas-band .img{background-size:cover;background-position:center;min-height:340px}
.sas-band .copy{padding:48px}
.sas-band .lbl{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--brick);font-weight:800;margin-bottom:12px;display:block}
.sas-band h3{font-size:32px;font-weight:900;margin:0 0 14px;letter-spacing:-.5px;line-height:1.05;text-transform:uppercase}
.sas-band p{color:var(--iron);font-size:15px;margin:0 0 22px}
@media (max-width:880px){
  .sas-band{grid-template-columns:1fr}
  .sas-band .copy{padding:32px 24px}
}

/* ---------- FOOTER ---------- */
.site-footer{background:#0B0E12;color:#B6BFC9;padding:80px 0 28px}
.site-footer .brand{margin-bottom:18px}
.site-footer .brand img{height:48px}
.site-footer h4{color:#fff;margin:0 0 16px;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:800}
.site-footer a{color:#B6BFC9}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.site-footer .legal{
  margin-top:48px;padding-top:24px;border-top:1px solid #1d242c;
  display:flex;justify-content:space-between;font-size:12px;color:#7d8896;flex-wrap:wrap;gap:12px;letter-spacing:.5px;
}
.social{display:flex;gap:12px;margin-top:18px}
.social a{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;transition:background .25s ease, transform .2s ease;
  border:1px solid rgba(255,255,255,.12);
}
.social a:hover{background:var(--brick);border-color:var(--brick);text-decoration:none;transform:translateY(-2px)}
.social a svg{width:18px;height:18px;display:block;fill:currentColor}

/* ---------- PAGE HERO (subpages) ----------
   Min-height enforced so the hero is tall enough to display landscape source photos
   without aggressive cropping. background-position centred upper third so subjects sit well.
*/
.page-hero{
  position:relative;padding:180px 0 90px;color:#fff;background:#0F1216;overflow:hidden;
  min-height:640px;
  display:flex;align-items:flex-end;
}
@media (max-width:760px){.page-hero{min-height:520px;padding:140px 0 60px}}
.page-hero .container{position:relative;z-index:2;width:100%}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 35%;filter:brightness(.50)}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,22,.6),rgba(15,18,22,.85))}
.page-hero .container{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--denim-lt)}
.page-hero h1{font-size:clamp(30px,6.5vw,64px);font-weight:900;letter-spacing:-1px;text-transform:uppercase;margin:8px 0 14px;line-height:1.05;word-wrap:break-word;overflow-wrap:break-word}
.page-hero p{font-size:18px;color:#D7DEE6;max-width:680px;margin:0}

/* ---------- UTIL ---------- */
.center{text-align:center}
.divider{height:1px;background:var(--line);margin:48px 0}
.tag{display:inline-block;font-size:11px;padding:5px 12px;border-radius:999px;background:rgba(0,121,190,.10);color:var(--denim);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.success{color:#1a7f37;background:#E8F5EC;border:1px solid #B6E0BF;padding:12px 16px;border-radius:10px;font-size:14px;display:none;margin-top:14px}

/* heartbeat motif (small accent) */
.heartbeat-mini{
  display:inline-block;width:80px;height:14px;vertical-align:middle;margin-left:10px;
}

/* ============================================================
   PHASE 1 — Nike-tier animations
   - Page fade-in on load + fade-out on internal navigation
   - Ken-Burns slow drift on hero and page-hero photos
   - Scroll-triggered reveal-up for sections, grid items, bands
   - prefers-reduced-motion: full bypass for accessibility
   ============================================================ */

/* PAGE LOAD FADE-IN — body becomes visible smoothly on every page load.
   The CSS animation runs immediately so even if JS is slow, the page never stays blank. */
body{animation:pageIn .45s cubic-bezier(.2,.7,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* JS sets .leaving on body when user clicks an internal link, triggering fade-out */
body.leaving{opacity:0;transform:translateY(-6px);transition:opacity .28s ease, transform .28s ease}

/* KEN-BURNS — hero photos slowly drift + zoom (no JS, pure CSS) */
@keyframes kenBurns{
  0%{transform:scale(1) translate3d(0,0,0)}
  100%{transform:scale(1.08) translate3d(0,-14px,0)}
}
.hero .bg{animation:kenBurns 22s cubic-bezier(.4,.2,.4,.8) infinite alternate;will-change:transform}
.page-hero .bg{animation:kenBurns 26s cubic-bezier(.4,.2,.4,.8) infinite alternate;will-change:transform}

/* SCROLL REVEALS — elements start hidden + offset, fade up when entering viewport.
   JS adds .reveal-on attribute + .visible class on intersection. */
[data-reveal]{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 1s cubic-bezier(.16,.84,.32,1),
             transform 1s cubic-bezier(.16,.84,.32,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
[data-reveal].visible{opacity:1;transform:none}

/* Reveal variants — opt-in via data-reveal="fade" etc. */
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-36px)}
[data-reveal="left"].visible{transform:none}
[data-reveal="right"]{transform:translateX(36px)}
[data-reveal="right"].visible{transform:none}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="scale"].visible{transform:none}

/* HOVER LIFT on tiles & cards — already on .tile and .card.img-card; add subtle shadow rise */
.tile, .card.img-card, .tier, .method, .course{transition:transform .35s cubic-bezier(.16,.84,.32,1), box-shadow .35s ease, border-color .25s ease}

/* REDUCED MOTION — accessibility override */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  body{animation:none}
  .hero .bg, .page-hero .bg{animation:none}
}

/* ============================================================
   FOUNDER ROWS (About page — quiet, editorial layout)
   ============================================================ */
.founder-list{display:flex;flex-direction:column;gap:56px;margin-top:24px}
.founder-row{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:36px;
  align-items:start;
}
.founder-photo{
  width:240px;height:300px;
  background-color:#0F1216;
  background-size:cover;
  background-position:center 18%;
  background-repeat:no-repeat;
  border-radius:var(--radius);
}
.founder-body{display:flex;flex-direction:column;gap:12px}
.founder-role{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800;
  color:var(--brick);
}
.founder-body h3{
  font-size:26px;font-weight:900;letter-spacing:-.3px;margin:0;
  color:var(--ink);text-transform:none;
}
.founder-title{
  font-size:13px;color:var(--denim);font-weight:700;
  margin:0 0 6px;text-transform:uppercase;letter-spacing:1.5px;
}
.founder-body p:not(.founder-title){
  font-size:15.5px;line-height:1.7;color:#3D434A;margin:0;
}
@media (max-width: 760px){
  .founder-row{grid-template-columns:1fr;gap:18px}
  .founder-photo{width:100%;height:auto;aspect-ratio:4/5;max-width:320px}
}

/* Ecosystem strip — 4 brands */
.ecosystem-strip{
  margin-top:48px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--line);
  background:#fff;
  border-radius:0;
}
.ecosystem-strip > div{
  padding:24px 22px;
  display:flex;flex-direction:column;gap:6px;
  border-right:1px solid var(--line);
}
.ecosystem-strip > div:last-child{border-right:none}
.ecosystem-strip strong{
  font-size:14px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--ink);font-weight:900;
}
.ecosystem-strip span{font-size:12.5px;color:#535456;line-height:1.4}

@media (max-width: 900px){
  .ecosystem-strip{grid-template-columns:1fr 1fr}
  .ecosystem-strip > div:nth-child(2){border-right:none}
  .ecosystem-strip > div:nth-child(1),
  .ecosystem-strip > div:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width: 560px){
  .ecosystem-strip{grid-template-columns:1fr}
  .ecosystem-strip > div{border-right:none;border-bottom:1px solid var(--line)}
  .ecosystem-strip > div:last-child{border-bottom:none}
}

/* === PF MOBILE FIXES v1 — added 2026-05-22 ===
   (1) hero stacks vertically on mobile so trust strip falls below
   (2) hero h1 scales down on narrow viewports (was 44px, now clamp)
   (3) trust strip becomes 2x2 grid, no truncation
   (4) action buttons go full-width on phone
   (5) page-hero h1 also scales on mobile */
@media (max-width: 760px) {
  .hero { display: block !important; padding: 90px 0 0; }
  .hero .container { padding-top: 50px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(28px, 8.5vw, 40px) !important; line-height: 1.05; letter-spacing: -0.5px; max-width: 100%; }
  .hero p.lead { font-size: 15px; line-height: 1.6; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 24px; }
  .hero .actions .btn, .page-hero .actions .btn { width: 100%; justify-content: center; }
  .hero-trust { position: static !important; background: rgba(15,18,22,.85); backdrop-filter: blur(8px); padding: 16px 0; }
  .hero-trust .container { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 18px; justify-content: stretch !important; }
  .hero-trust .ts { font-size: 10.5px; letter-spacing: 1px; gap: 8px; flex-wrap: nowrap; line-height: 1.2; }
  .hero-trust .ts strong { font-size: 16px; white-space: nowrap; }
  .eyebrow { letter-spacing: 2px !important; line-height: 1.4; }
  .page-hero h1 { font-size: clamp(28px, 8vw, 40px) !important; word-wrap: break-word; }
  .page-hero p.lead { font-size: 15px; line-height: 1.6; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 30px !important; line-height: 1.05; }
  .hero-trust .container { grid-template-columns: 1fr !important; }
  .hero-trust .ts strong { font-size: 15px; }
  .container { padding-left: 18px !important; padding-right: 18px !important; }
}
/* === END PF MOBILE FIXES v1 === */


/* === PF FAQ SECTION v1 — added 2026-05-22 === */
.section.faq { background: #FFFFFF; }
.section.faq .container { max-width: 920px; }
.section.faq .section-title { margin-bottom: 8px; }
.section.faq .section-sub { color: var(--iron); margin-bottom: 32px; font-size: 16px; }

.faq-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.faq-list details {
  background: #F8F8F9;
  border: 1px solid var(--line, #E5E7EB);
  border-left: 3px solid var(--brick, #9C0013);
  border-radius: 6px;
  padding: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.faq-list details[open] {
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(15, 18, 22, 0.06);
}
.faq-list summary {
  cursor: pointer;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #0F1216;
  padding: 18px 22px 18px 22px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  color: var(--brick, #9C0013);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq-list details[open] summary::after { content: '−'; }
.faq-list .answer {
  padding: 0 22px 20px 22px;
  color: var(--iron, #535456);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 760px) {
  .faq-list summary { font-size: 15.5px; padding: 16px 18px; }
  .faq-list .answer { padding: 0 18px 18px 18px; font-size: 14.5px; }
}
/* === END PF FAQ SECTION === */


/* === PF HERO IMG CONVERSION v1 — added 2026-05-22 === */
.hero img.bg, .page-hero img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero img.bg {
  filter: brightness(.55) contrast(1.05);
  transform: scale(1.04);
  animation: slowzoom 22s ease-in-out infinite alternate;
}
.page-hero img.bg {
  object-position: center 35%;
  filter: brightness(.50);
  animation: kenBurns 26s cubic-bezier(.4,.2,.4,.8) infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero img.bg, .page-hero img.bg { animation: none; }
}
/* === END PF HERO IMG CONVERSION === */