/* ============================================================
   TK FITNESS PGH, single stylesheet.
   Was three files (tokens.css, site.css, gravityforms.css). Merged into one
   in this order because that is the order the cascade needs: design tokens,
   then the design, then the form layer that restyles Gravity Forms output,
   then the visual QA pass, then the motion layer.

   Regenerated 2026-09-01 from site-src (post client-feedback build: the
   client's own cyan #71C8D0, Montserrat display, no prices, no in-home
   training, free consultation). The GF / QA / motion layers below are
   WordPress-only work that has no equivalent in the static comp, so they are
   carried across verbatim rather than rebuilt.
   ============================================================ */

/* ============================================================
   TK FITNESS PGH, design tokens
   ACSS-mappable: every value here maps to an Automatic.css
   variable or a Bricks global variable at convert time.
   Palette source: the real TK Fitness logo (white high-contrast
   serif on black). Monochrome ink/bone plus one signal accent.
   ============================================================ */
:root{
  /* --- ink scale (maps to ACSS shade-*) --- */
  --ink:            #101215;
  --ink-2:          #1B1E22;
  --ink-3:          #26272B;
  --ink-line:       #33373D;
  --ink-muted:      #63686E;

  /* --- paper scale (maps to ACSS base-*) --- */
  --bone:           #F5F2EC;
  --bone-2:         #EBE6DD;
  --paper:          #FFFFFF;

  /* --- accent (ACSS action / primary) ---
     Sampled from the client's own flyer, 2026-08-25: #71C8D0. His whole brand system is
     monochrome plus this one cyan, so the site now matches the print material already in
     circulation instead of an accent we picked.
     Note the inversion from every previous palette here: cyan is LIGHT, so buttons carry
     INK text, not white. White on cyan measures 1.93:1 and is not usable.
     --flame       decorative (rules, icons, borders on dark)
     --flame-btn   filled-button ground, with ink text on it = 10.87:1
     --flame-text  small accent TEXT on a LIGHT ground, darkened to clear AA = 4.83:1
     --flame-soft  accent on the ink ground = 9.38:1 */
  --flame:          #71C8D0;
  --flame-btn:      #71C8D0;
  --flame-btn-hover:#8FD8DE;
  --flame-text:     #2F6F76;
  --flame-deep:     #2F6F76;
  --flame-soft:     #71C8D0;
  --on-accent:      #101215;

  /* --- semantic --- */
  --rule:           rgba(11,11,12,.14);
  --rule-dark:      rgba(245,242,236,.16);
  --good:           #4E9A6A;

  /* --- type (ACSS font stacks) --- */
  --f-display:      "Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:         "Archivo","Helvetica Neue",Arial,sans-serif;

  /* --- scale --- */
  --container:      1240px;
  --container-tight:940px;
  --radius:         4px;
  --radius-lg:      10px;

  /* --- elevation --- */
  --shadow-sm:      0 4px 16px rgba(11,11,12,.10);
  --shadow-md:      0 18px 44px rgba(11,11,12,.20);
  --shadow-flame:   0 10px 26px rgba(113,200,208,.30);

  /* --- rhythm --- */
  --section-y:      96px;
  --section-y-sm:   58px;
}


/* ============================================================
   TK FITNESS PGH, hand-built comp
   Modeled on Gen-X Renovation (storytelling-left hero + in-hero
   lead-form card + checkmark trust bullets). Recolored and
   retyped to TK's REAL logo: editorial black/bone with a single
   signal-orange action color, Bodoni Moda display.
   REAL PROSPECT, no fabricated reviews, quotes, or counts.
   Section/component classes are BEM so the Bricks convert stays
   mechanical (one owner per layer).
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:clip;}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;height:auto;}
button{font:inherit;}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.14;font-weight:700;letter-spacing:-.005em;}
.container{max-width:var(--container);margin:0 auto;padding:0 32px;}
.container--tight{max-width:var(--container-tight);}
@media(max-width:600px){.container{padding-left:20px;padding-right:20px;}}

.eyebrow{font-family:var(--f-body);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--flame-text);}
.eyebrow--muted{color:var(--ink-muted);}
.eyebrow--light{color:var(--flame-soft);}
.section{padding:var(--section-y) 0;}
.section--alt{background:var(--bone);}
.section--ink{background:var(--ink);color:var(--bone);}
.section--ink h2,.section--ink h3{color:var(--paper);}
.section__head{max-width:760px;margin-bottom:52px;}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center;}
.section__title{font-size:clamp(1.75rem,3.3vw,2.6rem);margin:14px 0 16px;text-transform:uppercase;letter-spacing:.005em;font-weight:800;}
.section__lead{font-size:1.06rem;color:var(--ink-muted);}
.section--ink .section__lead{color:rgba(245,242,236,.72);}
.rule{width:56px;height:2px;background:var(--flame);margin:0 0 22px;}
.section__head--center .rule{margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-body);
  font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;padding:18px 34px;
  border-radius:var(--radius);border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;}
.btn svg{width:17px;height:17px;}
.btn--flame{background:var(--flame-btn);color:var(--on-accent);box-shadow:var(--shadow-flame);}
.btn--flame:hover{background:var(--flame-btn-hover);color:var(--on-accent);transform:translateY(-3px);box-shadow:0 18px 38px rgba(113,200,208,.4);}
.btn--ink{background:var(--ink);color:var(--bone);box-shadow:0 10px 24px rgba(11,11,12,.3);}
.btn--ink:hover{background:var(--ink-2);transform:translateY(-3px);}
.btn--bone{background:var(--bone);color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.28);}
.btn--bone:hover{background:#fff;transform:translateY(-3px);}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn--outline:hover{background:var(--ink);color:var(--bone);transform:translateY(-3px);}
.btn--block{width:100%;}


/* ---------- Accessibility ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--flame-btn);color:var(--on-accent);
  font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:14px 20px;}
.skip:focus{left:0;}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px;}
.header :focus-visible,.footer :focus-visible,.hero :focus-visible{outline-color:var(--flame-soft);}
.leadform input:focus-visible,.leadform select:focus-visible{outline-offset:0;}

/* ---------- Utility bar ---------- */
.utility{background:var(--ink);color:rgba(245,242,236,.8);font-size:.78rem;border-bottom:1px solid var(--ink-line);}
.utility .container{display:flex;align-items:center;justify-content:space-between;min-height:40px;gap:18px;}
.utility__item{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.utility__item svg{width:14px;height:14px;color:var(--flame-soft);flex-shrink:0;}
.utility strong{color:var(--paper);font-weight:600;}
@media(max-width:900px){.utility__hide-md{display:none;}.utility .container{justify-content:center;}}
@media(max-width:640px){.utility__item{white-space:normal;text-align:center;}
  .utility .container{padding-top:8px;padding-bottom:8px;}
  .utility{font-size:.72rem;}}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--ink-line);transition:box-shadow .28s ease;}
.header .container{display:flex;align-items:center;gap:26px;height:88px;transition:height .28s ease;}
.header.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.4);}
.header.is-scrolled .container{height:70px;}
.header.is-scrolled .brand__logo{height:44px;}
.brand{display:flex;align-items:center;flex-shrink:0;}
.brand__logo{height:58px;width:auto;transition:height .28s ease;}

.nav{display:flex;align-items:center;margin-left:auto;}
.nav__items{display:flex;align-items:center;gap:2px;}
.nav__head,.nav__foot,.nav__close{display:none;}
.nav-overlay{display:none;}
.nav__item{position:relative;}
.nav__link{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.88rem;color:rgba(245,242,236,.86);
  padding:11px 13px;position:relative;cursor:pointer;letter-spacing:.01em;}
.nav__link:hover{color:var(--paper);}
.nav__link .caret{width:11px;height:11px;opacity:.7;transition:transform .2s ease;}
.nav__item:hover .nav__link .caret{transform:rotate(180deg);}
.nav__link::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:var(--flame);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease;}
.nav__link:hover::after,.nav__item:hover .nav__link::after{transform:scaleX(1);}
.nav__link.is-current::after{transform:scaleX(1);}
.nav__menu{position:absolute;top:100%;left:0;min-width:264px;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(9px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70;}
.nav__menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav__menu a{display:block;padding:12px 14px;border-radius:var(--radius);font-size:.9rem;font-weight:500;
  color:var(--ink);white-space:nowrap;transition:background .14s ease,color .14s ease;}
.nav__menu a:hover{background:var(--bone);color:var(--flame-deep);}

.header__cta{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.header__phone{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;}
.header__phone .num{font-family:var(--f-display);font-weight:600;font-size:1.2rem;color:var(--paper);display:flex;align-items:center;gap:8px;}
.header__phone .num svg{width:15px;height:15px;color:var(--flame);}
.header__phone .lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(245,242,236,.5);}
.header__mobile-phone{display:none;}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.hamburger span{width:26px;height:2px;background:var(--bone);border-radius:2px;transition:.2s;}

@media(max-width:1140px){.nav__link{padding:11px 9px;font-size:.83rem;}.header__phone .lbl{display:none;}}
@media(max-width:980px){
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:190;}
  .nav-overlay.is-open{opacity:1;visibility:visible;}
  .nav{position:fixed;top:0;right:0;left:auto;height:100dvh;width:90%;max-width:400px;margin-left:0;
    flex-direction:column;align-items:stretch;background:var(--ink);color:var(--bone);
    transform:translateX(105%);transition:transform .36s cubic-bezier(.4,0,.2,1);
    z-index:200;overflow-y:auto;box-shadow:-24px 0 60px rgba(0,0,0,.55);}
  .nav{visibility:hidden;transition:transform .36s cubic-bezier(.4,0,.2,1),visibility .36s;}
  .nav.is-open{transform:translateX(0);visibility:visible;transition-delay:0s;}
  .nav__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;
    border-bottom:1px solid var(--ink-line);position:sticky;top:0;background:var(--ink);z-index:2;}
  .nav__head img{height:34px;width:auto;}
  .nav__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
    background:rgba(245,242,236,.1);border:0;color:var(--bone);cursor:pointer;flex-shrink:0;transition:background .15s ease;}
  .nav__close:hover{background:var(--flame);color:var(--on-accent);}
  .nav__close svg{width:20px;height:20px;}
  .nav__items{display:block;padding:4px 0 0;}
  .nav__item{border-bottom:1px solid rgba(245,242,236,.08);}
  .nav__link{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;
    font-family:var(--f-display);font-weight:700;font-size:1.16rem;color:var(--bone);}
  .nav__link--solo{border-bottom:1px solid rgba(245,242,236,.08);}
  .nav__link::after{display:none;}
  .nav__link .caret{width:16px;height:16px;opacity:.9;transition:transform .28s ease,color .2s ease;}
  .nav__item.is-expanded .nav__link .caret{transform:rotate(180deg);color:var(--flame-soft);}
  .nav__menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;
    min-width:0;padding:0;background:rgba(0,0,0,.32);max-height:0;overflow:hidden;transition:max-height .32s ease;}
  .nav__menu::before{display:none;}
  .nav__item.is-expanded .nav__menu{max-height:420px;}
  .nav__menu a{display:flex;align-items:center;gap:11px;padding:14px 22px;font-size:.98rem;font-weight:600;
    color:rgba(245,242,236,.8);border-bottom:1px solid rgba(245,242,236,.06);border-radius:0;white-space:normal;}
  .nav__menu a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--flame);flex-shrink:0;}
  .nav__menu a:hover,.nav__menu a:active{background:rgba(245,242,236,.05);color:var(--paper);}
  .nav__foot{display:block;margin-top:auto;padding:22px 22px calc(26px + env(safe-area-inset-bottom));background:rgba(0,0,0,.3);}
  .nav__cta{width:100%;justify-content:center;margin-bottom:14px;}
  .nav__call{display:flex;align-items:center;justify-content:center;gap:11px;color:var(--paper);
    font-family:var(--f-display);font-weight:700;font-size:1.5rem;}
  .nav__call svg{width:20px;height:20px;color:var(--flame-soft);}
  .nav__note{text-align:center;font-size:.76rem;color:rgba(245,242,236,.55);margin-top:8px;}
  .nav__social{display:flex;justify-content:center;gap:12px;margin-top:20px;}
  .nav__social a{width:44px;height:44px;border-radius:50%;background:rgba(245,242,236,.1);display:flex;
    align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease;}
  .nav__social a:hover{background:var(--flame);color:var(--on-accent);transform:translateY(-2px);}
  .nav__social svg{width:18px;height:18px;color:var(--bone);}
  /* .header owns a stacking context (z-index:60), so the drawer's own z-index
     cannot beat the overlay from inside it. Lift the header while open. */
  body.is-nav-open{overflow:hidden;}
  body.is-nav-open .header{z-index:200;}
  .header__cta{margin-left:auto;}
  .header__cta .btn{display:none;}
  .header__phone{display:none;}
  /* a 25px icon is not a touch target. 44px minimum, per WCAG 2.5.5. */
  .header__mobile-phone{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;color:var(--bone);border-radius:50%;}
  .header__mobile-phone:hover{background:rgba(245,242,236,.08);}
  .header__mobile-phone svg{width:25px;height:25px;color:var(--flame);}
  .hamburger{display:flex;position:relative;z-index:210;}
  .hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.is-active span:nth-child(2){opacity:0;}
  .hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  body.is-nav-open .hamburger,body.is-nav-open .header__mobile-phone{opacity:0;pointer-events:none;transition:opacity .2s ease;}
}
@media(max-width:520px){.header .container{gap:10px;}.brand__logo{height:34px;}.header.is-scrolled .brand__logo{height:30px;}}

/* ---------- Hero (Gen-X storytelling-left + form card) ---------- */
.hero{position:relative;background:var(--ink);color:var(--bone);overflow:hidden;padding:74px 0 86px;}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:36% 50%;filter:brightness(1.04);}
.hero__media--studio img{object-position:70% 44%;filter:brightness(1.16);}
.hero__media--consult img{object-position:52% 34%;filter:brightness(1.06) contrast(1.02);}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(97deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.88) 26%,rgba(11,11,12,.62) 44%,rgba(11,11,12,.3) 62%,rgba(11,11,12,.12) 100%);}
.hero__scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.42),transparent 34%,rgba(11,11,12,.6));}
.hero .container{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;}
.hero__copy{max-width:600px;}
.hero__h1{font-family:var(--f-body);font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--flame-soft);margin-bottom:18px;}
.hero__h2{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,4.1vw,3.35rem);line-height:1.1;text-transform:uppercase;letter-spacing:.01em;
  letter-spacing:-.02em;color:var(--paper);margin-bottom:20px;}
.hero__h2 em{font-style:normal;color:var(--flame-soft);}
.hero__lead{font-size:1.1rem;color:rgba(245,242,236,.86);max-width:520px;margin-bottom:26px;}
.hero__rule{width:100%;max-width:330px;height:1px;background:var(--rule-dark);margin-bottom:24px;}
.hero__bullets{display:grid;gap:11px;margin-bottom:28px;}
.hero__bullet{display:flex;align-items:flex-start;gap:11px;font-size:.98rem;color:rgba(245,242,236,.94);}
.hero__bullet svg{width:19px;height:19px;color:var(--flame);flex-shrink:0;margin-top:2px;}
.hero__bullet b{font-weight:700;color:var(--paper);}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Lead form card ---------- */
.leadform{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;color:var(--ink);}
.leadform__head{background:var(--ink);color:var(--bone);padding:22px 28px 20px;text-align:center;border-bottom:3px solid var(--flame);}
.leadform__kicker{font-family:var(--f-body);font-weight:700;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--flame-soft);}
.leadform__title{font-family:var(--f-display);font-size:1.85rem;color:var(--paper);margin:8px 0 4px;line-height:1.1;}
.leadform__sub{font-size:.85rem;color:rgba(245,242,236,.7);}
.leadform__body{padding:24px 28px 28px;display:grid;gap:12px;}
.leadform__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.leadform input,.leadform select,.leadform textarea{width:100%;font-family:var(--f-body);font-size:.95rem;color:var(--ink);
  background:var(--bone);border:1px solid var(--rule);border-radius:var(--radius);padding:14px 15px;transition:border-color .15s ease,background .15s ease;}
.leadform input::placeholder,.leadform textarea::placeholder{color:#8B9098;}
.leadform input:focus,.leadform select:focus,.leadform textarea:focus{outline:none;border-color:var(--flame);background:var(--paper);}
.leadform select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7076' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:40px;}
.leadform__fine{font-size:.76rem;color:var(--ink-muted);text-align:center;line-height:1.5;}
.leadform__fine b{color:var(--ink);}

@media(max-width:1080px){
  .hero .container{grid-template-columns:1fr;gap:38px;}
  .hero__copy{max-width:none;}
  .hero__media img{object-position:64% 34%;}
  .leadform{max-width:520px;}
}
@media(max-width:1080px){
  /* a horizontal scrim only works next to a side-by-side form; stacked, it must run top-down */
  .hero__scrim{background:linear-gradient(178deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.72) 34%,rgba(11,11,12,.82) 74%,rgba(11,11,12,.94) 100%);}
  .hero__media img{object-position:66% 38%;}
}
@media(max-width:600px){
  .hero{padding:30px 0 40px;}
  .hero__h1{font-size:.68rem;letter-spacing:.13em;margin-bottom:12px;}
  .hero__h2{font-size:clamp(2.1rem,9.2vw,2.9rem);margin-bottom:14px;}
  .hero__lead{font-size:.98rem;margin-bottom:18px;}
  .hero__rule{margin-bottom:16px;}
  .hero__bullets{gap:9px;margin-bottom:20px;}
  .hero__bullet{font-size:.92rem;}
  .demo-flag{font-size:.7rem;padding:7px 16px;line-height:1.35;}
  .leadform__body{padding:20px 20px 24px;}
  .leadform__head{padding:18px 20px 16px;}
  .leadform__row{grid-template-columns:1fr;}
  .hero__actions .btn{width:100%;}
}

/* ---------- Credential bar ---------- */
.creds{background:var(--bone);border-bottom:1px solid var(--rule);}
.creds .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.cred{display:flex;align-items:center;gap:14px;padding:26px 26px;}
.cred + .cred{border-left:1px solid var(--rule);}
.cred svg{width:26px;height:26px;color:var(--flame);flex-shrink:0;}
.cred__label{font-family:var(--f-display);font-weight:700;font-size:1.05rem;line-height:1.2;}
.cred__note{font-size:.78rem;color:var(--ink-muted);margin-top:2px;}
@media(max-width:1140px){
  /* 4 across gets too tight for "Corrective Exercise" before the old 900px break */
  .creds .container{grid-template-columns:1fr 1fr;padding:0;}
  .cred{padding:20px;}
  .cred:nth-child(odd){border-left:0;}
  .cred:nth-child(n+3){border-top:1px solid var(--rule);}
}
@media(max-width:560px){
  /* two columns of ~150px still wrapped two-word labels, so phones get one per row */
  .creds .container{grid-template-columns:1fr;}
  .cred{padding:15px 20px;gap:14px;}
  .cred + .cred{border-left:0;border-top:1px solid var(--rule);}
  .cred:nth-child(n+3){border-top:1px solid var(--rule);}
  .cred svg{width:22px;height:22px;}
  .cred__label{font-size:1rem;}
}

/* ---------- Service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.svc-grid--two{grid-template-columns:repeat(2,1fr);gap:30px;}
@media(max-width:880px){.svc-grid--two{grid-template-columns:1fr;}}
.svc{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--ink);}
.svc__media{aspect-ratio:3/2;overflow:hidden;background:var(--ink);}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.svc:hover .svc__media img{transform:scale(1.05);}
.svc__body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;}
.svc__title{font-size:1.22rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:.01em;}
.svc__price{font-family:var(--f-body);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--flame-deep);margin-bottom:10px;}
.svc__text{font-size:.96rem;color:var(--ink-muted);margin-bottom:18px;}
.svc__list{list-style:none;display:grid;gap:8px;margin-bottom:22px;}
.svc__list li{display:flex;align-items:flex-start;gap:9px;font-size:.92rem;}
.svc__list svg{width:16px;height:16px;color:var(--flame);flex-shrink:0;margin-top:3px;}
.svc__link{margin-top:auto;font-family:var(--f-body);font-weight:800;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px;}
.svc__link svg{width:15px;height:15px;transition:transform .18s ease;}
.svc:hover .svc__link{color:var(--flame-deep);}
.svc:hover .svc__link svg{transform:translateX(4px);}
/* The centred 560px column used to kick in at 980px, which pushed the service cards
   up to 138px inside the gutter every other section shares. Hold three columns to
   760px, then go full width so the left edge stays put. */
@media(max-width:980px){.svc-grid{gap:18px;}}
/* three columns still read well at 900px; by 880 the titles and the card CTA
   both wrap, so one column is the better trade below that. */
@media(max-width:880px){.svc-grid{grid-template-columns:1fr;}}
@media(max-width:880px) and (min-width:601px){.svc__media{aspect-ratio:21/9;}}

/* ---------- Split (story / why) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
/* grid items default to min-width:auto, so an image's intrinsic width can force
   a track wider than its container. Every grid child here may shrink. */
.split > *,.hero .container > *,.cta .container > *,.svc-grid > *,.tiles > *,.rates > *{min-width:0;}
.split--reverse .split__media{order:2;}
.split__media{position:relative;}
.split__media img{border-radius:var(--radius-lg);width:100%;height:auto;}
.split__badge{position:absolute;bottom:-22px;left:-22px;background:var(--flame-btn);color:var(--on-accent);padding:18px 22px;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:220px;}
.split__badge b{font-family:var(--f-display);font-size:2.1rem;display:block;line-height:1;}
.split__badge span{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;}
.checklist{list-style:none;display:grid;gap:13px;margin:22px 0 30px;}
.checklist li{display:flex;align-items:flex-start;gap:12px;font-size:1rem;}
.checklist svg{width:19px;height:19px;color:var(--flame);flex-shrink:0;margin-top:3px;}
.checklist b{font-weight:700;}
@media(max-width:980px){
  .split{grid-template-columns:1fr;gap:44px;}
  .split--reverse .split__media{order:0;}
  .split__badge{left:16px;bottom:-18px;}
}

/* ---------- Rates ---------- */
.rates{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.rate{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:40px 36px;position:relative;display:flex;flex-direction:column;}
.rate .btn{margin-top:auto;align-self:flex-start;}
.rate--feature{background:var(--ink);color:var(--bone);border-color:var(--ink);}
.rate--feature .rate__label{color:var(--flame-soft);}
.rate__free{display:inline-block;align-self:flex-start;background:var(--flame-btn);color:var(--on-accent);
  font-family:var(--f-body);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--radius);margin-bottom:16px;}
.rate--feature .rate__free{background:var(--flame-btn);}
.rate__label{font-family:var(--f-body);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--flame-text);}
.rate__title{font-size:1.35rem;margin:12px 0 8px;text-transform:uppercase;letter-spacing:.01em;}
.rate--feature .rate__title{color:var(--paper);}
.rate__price{font-family:var(--f-display);font-size:3.3rem;line-height:1;margin:14px 0 6px;}
.rate--feature .rate__price{color:var(--paper);}
.rate__unit{font-family:var(--f-body);font-size:.95rem;font-weight:600;color:var(--ink-muted);}
.rate--feature .rate__unit{color:rgba(245,242,236,.66);}
.rate__text{font-size:.96rem;color:var(--ink-muted);margin:16px 0 20px;}
.rate--feature .rate__text{color:rgba(245,242,236,.8);}
@media(max-width:760px){.rates{grid-template-columns:1fr;}}

.asterisk{font-size:.5em;vertical-align:super;color:var(--flame-text);}
/* Introductory offer, added 2026-09-16. The flyer already in circulation reads
   "25% OFF YOUR FIRST TRAINING PACKAGE" and its QR code points here, so the site
   matches that wording exactly. The client asked for the terms in an asterisk
   rather than bold text, so the qualifier lives in .fineprint below the block. */
.offer{margin-top:20px;font-size:1.06rem;color:var(--ink);}
.offer strong{color:var(--flame-text);}
/* .asterisk uses the darkened light-ground accent, which disappears on the ink
   utility bar. Lift it to the on-ink accent there. */
.utility .asterisk{color:var(--flame-soft);}
.fineprint{margin-top:26px;font-size:.85rem;color:var(--ink-muted);text-align:center;}
.fineprint a{text-decoration:underline;}
.section--ink .fineprint{color:rgba(245,242,236,.66);}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;}
.step{padding:38px 30px;background:var(--paper);}
.step + .step{border-left:1px solid var(--rule);}
.step__num{font-family:var(--f-display);font-size:3rem;line-height:1;color:#8A8F95;margin-bottom:14px;}
.step:hover .step__num{color:var(--flame);transition:color .2s ease;}
.step__title{font-size:1.2rem;margin-bottom:9px;}
.step__text{font-size:.97rem;color:var(--ink-muted);}
@media(max-width:980px){
  .steps{grid-template-columns:1fr 1fr;}
  .step:nth-child(odd){border-left:0;}
  .step:nth-child(n+3){border-top:1px solid var(--rule);}
}
@media(max-width:560px){.steps{grid-template-columns:1fr;}.step{border-left:0!important;}.step + .step{border-top:1px solid var(--rule);}.step{padding:24px 22px;}}

/* ---------- Statement band ---------- */
.statement{position:relative;background:var(--ink);color:var(--bone);padding:110px 0;overflow:hidden;}
.statement__media{position:absolute;inset:0;}
.statement__media img{width:100%;height:100%;object-fit:cover;opacity:.34;}
.statement__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.94),rgba(11,11,12,.62));}
.statement .container{position:relative;z-index:2;}
.statement__quote{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.16;text-transform:uppercase;letter-spacing:.005em;
  max-width:900px;color:var(--paper);}
.statement__quote em{font-style:normal;color:var(--flame-soft);}
.statement__attr{margin-top:22px;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.6);}
@media(max-width:600px){.statement{padding:66px 0;}}

/* ---------- Audience tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:28px 24px;}
.tile svg{width:28px;height:28px;color:var(--flame);margin-bottom:16px;}
.tile__title{font-size:1.15rem;margin-bottom:9px;}
.tile__text{font-size:.92rem;color:var(--ink-muted);}
@media(max-width:1000px){.tiles{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){
  .tiles{grid-template-columns:1fr;}
  .tile{padding:22px 20px;}
}

/* ---------- Compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper);}
.compare__col{padding:34px 32px;}
.compare__col + .compare__col{border-left:1px solid var(--rule);}
.compare__title{font-size:1.3rem;margin-bottom:6px;text-transform:uppercase;letter-spacing:.01em;}
.compare__price{font-family:var(--f-body);font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--flame-text);margin-bottom:18px;}
@media(max-width:760px){.compare{grid-template-columns:1fr;}.compare__col + .compare__col{border-left:0;border-top:1px solid var(--rule);}}

/* ---------- FAQ ---------- */
.faq{max-width:880px;margin:0 auto;}
.faq__item{border-bottom:1px solid var(--rule);}
.faq__q{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:1.16rem;color:var(--ink);line-height:1.3;}
.faq__q::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-9px;
  border-right:2px solid var(--flame);border-bottom:2px solid var(--flame);transform:rotate(45deg);transition:transform .24s ease;}
.faq__item.is-open .faq__q::after{transform:rotate(225deg);margin-top:-3px;}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq__item.is-open .faq__a{max-height:460px;}
.faq__a p{padding:0 40px 24px 0;color:var(--ink-muted);font-size:.99rem;}

/* ---------- Service area ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.areas span{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:9px 15px;font-size:.88rem;font-weight:500;}
.section--ink .areas span{background:rgba(245,242,236,.06);border-color:var(--rule-dark);color:var(--bone);}

/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--ink);color:var(--bone);padding:var(--section-y) 0;overflow:hidden;}
.cta__media{position:absolute;inset:0;}
.cta__media img{width:100%;height:100%;object-fit:cover;opacity:.28;}
.cta__media::after{content:"";position:absolute;inset:0;background:linear-gradient(94deg,rgba(11,11,12,.95),rgba(11,11,12,.66));}
.cta .container{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.cta__title{font-size:clamp(1.75rem,3.3vw,2.6rem);color:var(--paper);margin:14px 0 18px;text-transform:uppercase;letter-spacing:.005em;font-weight:800;}
.cta__text{font-size:1.06rem;color:rgba(245,242,236,.82);margin-bottom:26px;}
.cta__points{list-style:none;display:grid;gap:12px;}
.cta__points li{display:flex;align-items:flex-start;gap:12px;font-size:1rem;}
.cta__points svg{width:19px;height:19px;color:var(--flame-soft);flex-shrink:0;margin-top:3px;}
@media(max-width:1080px){.cta .container{grid-template-columns:1fr;gap:38px;}.cta .leadform{max-width:520px;}}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(245,242,236,.72);}
.footer__trust{border-bottom:1px solid var(--ink-line);}
.footer__trust .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;padding-top:22px;padding-bottom:22px;}
.fbadge{display:flex;align-items:center;gap:9px;padding:4px 26px;font-size:.84rem;font-weight:600;color:rgba(245,242,236,.86);position:relative;}
.fbadge svg{width:17px;height:17px;color:var(--flame);}
.fbadge:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:var(--ink-line);}
.footer__grid{display:grid;grid-template-columns:1.35fr .95fr .95fr 1.05fr;gap:48px;
  align-items:start;padding:58px 0 46px;}
.footer__col{min-width:0;}
.footer__col a.btn{color:var(--on-accent);}  /* .footer__col a beats .btn--flame on specificity */
.footer__cta{margin-top:18px;padding:15px 26px;font-size:.74rem;}
.footer__logo{height:44px;width:auto;margin-bottom:20px;}
.footer__tagline{font-family:var(--f-display);font-weight:700;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--flame);margin:-8px 0 14px;}
.footer__about{font-size:.92rem;line-height:1.7;margin-bottom:20px;}
.footer__col h3{font-family:var(--f-body);font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);margin-bottom:16px;}
.footer__col a,.footer__col p{display:block;font-size:.92rem;color:rgba(245,242,236,.72);padding:5px 0;transition:color .14s ease;}
.footer__col a:hover{color:var(--flame-soft);}
.footer__phone{font-family:var(--f-display);font-weight:700;font-size:1.6rem;color:var(--paper)!important;padding:2px 0!important;}
.footer__note{font-size:.76rem;color:rgba(245,242,236,.5);margin-top:10px;}

/* Service-area coverage band. It used to live inside the contact column, which ran
   that column 260px taller than the other three and left the footer visibly lopsided.
   Full width, it balances the grid and reads as a stronger local signal. */
.footer__areas{display:grid;grid-template-columns:.8fr 2fr;gap:40px;align-items:start;
  padding:34px 0 44px;border-top:1px solid var(--ink-line);}
.footer__areas h3{font-family:var(--f-body);font-weight:800;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);margin-bottom:10px;}
.footer__areas-label p{font-size:.88rem;color:rgba(245,242,236,.6);line-height:1.6;max-width:320px;}
.footer__areas-list{display:flex;flex-wrap:wrap;gap:9px;}
.footer__areas-list a{font-size:.85rem;font-weight:500;color:rgba(245,242,236,.76);
  background:rgba(245,242,236,.05);border:1px solid var(--rule-dark);border-radius:var(--radius);
  padding:8px 14px;transition:background .14s ease,color .14s ease,border-color .14s ease;}
.footer__areas-list a:hover{background:var(--flame-btn);border-color:var(--flame-btn);color:var(--on-accent);}
@media(max-width:900px){.footer__areas{grid-template-columns:1fr;gap:22px;padding:28px 0 34px;}}
@media(max-width:600px){.footer__areas-list a{font-size:.8rem;padding:7px 12px;}}
.footer__bar{border-top:1px solid var(--ink-line);}
.footer__bar .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:22px;padding-bottom:22px;font-size:.82rem;}
.totop{display:inline-flex;align-items:center;gap:8px;color:rgba(245,242,236,.72);font-weight:600;}
.totop:hover{color:var(--paper);}
.totop svg{width:15px;height:15px;color:var(--flame-soft);}
.footer__social{display:flex;gap:10px;}
.footer__social a{width:38px;height:38px;border-radius:50%;background:rgba(245,242,236,.08);display:flex;align-items:center;justify-content:center;transition:background .15s ease;}
.footer__social a:hover{background:var(--flame);}
.footer__social a:hover svg{color:var(--on-accent);}
.footer__social svg{width:17px;height:17px;color:var(--bone);}
@media(max-width:980px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:34px 40px;}
  /* brand and contact span the full width so neither leaves a dead half-row */
  .footer__col:first-child,.footer__col:last-child{grid-column:1 / -1;}
}
/* the contact row only goes horizontal where there is room for it; on a phone the
   grid is already single-column and this would cram phone, email and CTA onto one line */
@media(min-width:601px) and (max-width:980px){
  .footer__col:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;}
  .footer__col:last-child h4{flex:0 0 100%;margin-bottom:4px;}
  .footer__col:last-child .footer__note{flex:0 0 100%;order:3;margin-top:0;}
  .footer__cta{margin-top:0;margin-left:auto;}
}
@media(max-width:600px){.footer__cta{width:100%;}}
@media(max-width:600px){
  .footer__grid{grid-template-columns:1fr;padding:40px 0;}
  .footer__trust .container{gap:10px 0;}
  .fbadge{padding:4px 14px;}
  .fbadge:not(:last-child)::after{display:none;}
  .footer__bar .container{justify-content:center;text-align:center;}
}

/* ---------- Mobile action bar ---------- */
.action-bar{display:none;}
@media(max-width:780px){
  .action-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);box-shadow:0 -6px 20px rgba(0,0,0,.4);}
  .action-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;
    color:var(--bone);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-right:1px solid var(--ink-line);}
  .action-bar a:last-child{border-right:0;}
  .action-bar a.is-primary{background:var(--flame-btn);color:var(--on-accent);}
  .action-bar svg{width:19px;height:19px;}
  body{padding-bottom:62px;}
}

/* ---------- Placeholder flag (demo only) ---------- */
.demo-flag{background:var(--ink-3);color:var(--flame);font-family:var(--f-body);font-weight:700;font-size:.76rem;
  letter-spacing:.06em;text-align:center;padding:9px 20px;}
.demo-flag b{text-transform:uppercase;letter-spacing:.14em;}

/* ---------- Landing page variants ---------- */
.lp-header{background:var(--ink);border-bottom:1px solid var(--ink-line);}
.lp-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px;}
.lp-header__phone{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--paper);}
.lp-header__phone svg{width:17px;height:17px;color:var(--flame);}
@media(max-width:600px){.lp-header .container{height:64px;}.lp-header__phone{font-size:1.05rem;}}

/* ---------- Inner page hero ---------- */
.page-hero{position:relative;background:var(--ink);color:var(--bone);padding:78px 0;overflow:hidden;}
.page-hero__media{position:absolute;inset:0;}
.page-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.4;}
.page-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(11,11,12,.94),rgba(11,11,12,.6));}
.page-hero .container{position:relative;z-index:2;}
.page-hero__h1{font-family:var(--f-body);font-weight:700;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--flame-soft);margin-bottom:16px;}
.page-hero__h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.95rem,3.8vw,3rem);line-height:1.12;text-transform:uppercase;letter-spacing:.005em;color:var(--paper);margin-bottom:18px;max-width:820px;}
.page-hero__lead{font-size:1.08rem;color:rgba(245,242,236,.84);max-width:640px;margin-bottom:26px;}
.crumbs{font-size:.8rem;color:rgba(245,242,236,.55);margin-bottom:20px;}
.crumbs a:hover{color:var(--flame-soft);}
@media(max-width:600px){.page-hero{padding:48px 0;}}

/* ---------- Prose ---------- */
.prose{max-width:760px;}
.prose h2,.prose h3{font-size:1.6rem;margin:34px 0 12px;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose p{margin-bottom:16px;color:var(--ink-muted);}
.prose strong{color:var(--ink);}
.prose ul{list-style:none;display:grid;gap:11px;margin:0 0 20px;}
.prose ul li{display:flex;align-items:flex-start;gap:11px;color:var(--ink-muted);}
.prose ul svg{width:18px;height:18px;color:var(--flame);flex-shrink:0;margin-top:4px;}
/* .fineprint centres itself for the homepage rate grid; inside a prose column
   that reads as a stray centred line, so pull it back to the text edge. */
.prose .fineprint{text-align:left;margin-top:14px;}
/* A centred prose column, for the single closing block on the About page where
   there is no facing media to align against. */
.prose--center{margin-inline:auto;text-align:center;}
.prose--center ul{display:inline-grid;text-align:left;}
/* Full-width photo break. The About page ran long on text against one portrait,
   so the client sent competition shots on 2026-09-16 to break the column up. */
.about__wide{margin:0 0 44px;}
.about__wide img{width:100%;height:auto;border-radius:var(--radius-lg);display:block;
  aspect-ratio:3/2;object-fit:cover;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-in{opacity:1;transform:none;}
.svc-grid .svc:nth-child(2){transition-delay:.08s}
.svc-grid .svc:nth-child(3){transition-delay:.16s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.01ms!important;}
  .reveal{opacity:1!important;transform:none!important;}
}
@media(max-width:600px){
  :root{--section-y:var(--section-y-sm);}
  .section__head{margin-bottom:34px;}
  /* long CTA labels must never set the page's scroll width */
  .btn{white-space:normal;text-align:center;padding-left:24px;padding-right:24px;max-width:100%;}
}


/* ============================================================
   Gravity Forms, styled to the comp's .leadform design.

   GF's own stylesheets are disabled (gform_disable_css), so this is not
   an override layer fighting the Orbital theme; it is the whole styling
   for the form. The field styling itself comes from site.css via the
   `.leadform input/select` rules, which already match GF's <input> and
   <select> output. What is needed here is only the structure GF wraps
   around them, plus the two-up first-name/phone row.

   Theme-only by necessity: the comp is static HTML with no server, so this
   is the one part of the build that cannot converge back into build.py.
   ============================================================ */

/* GF's wrapper chain must not introduce boxes of its own; .leadform__body
   is already the padded grid the comp designed. */
.leadform .gform_wrapper,
.leadform .gform_anchor,
.leadform .gform_heading { margin:0; padding:0; border:0; }
.leadform .gform_heading { display:none; }          /* title/description live in .leadform__head */

/* The comp's form is `display:grid; gap:12px`. GF nests its fields in an inner
   list, so the grid moves onto that list and the form tag is reset -- but ONLY
   when a Gravity Form is actually inside. Applying it unconditionally collapsed
   the static comp's own form to zero gap between fields, because this file is
   shared by the comp and the theme. */
.leadform__body:has(> .gform-body),
.leadform__body:has(> .gform_body) { display:block; }
.leadform .gform_fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  list-style:none;
  margin:0 0 12px;
  padding:0;
}
.leadform .gfield { min-width:0; grid-column:1 / -1; }
/* First name + phone sit two-up, matching .leadform__row. */
.leadform .gfield.tk-half { grid-column:span 1; }
@media(max-width:420px){ .leadform .gfield.tk-half { grid-column:1 / -1; } }

.leadform .gfield > label.gfield_label,
.leadform .gfield_label.gform-field-label { position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.leadform .ginput_container { margin:0; }

/* Validation, in the comp's own accent rather than GF's red. */
.leadform .gfield_error input,
.leadform .gfield_error select { border-color:var(--flame-btn); background:var(--paper); }
.leadform .gfield_validation_message,
.leadform .validation_message {
  font-family:var(--f-body); font-size:.76rem; font-weight:700; color:var(--flame-text);
  margin-top:6px; padding:0; background:none; border:0;
}
.leadform .gform_validation_errors {
  background:var(--bone-2); border:1px solid var(--rule); border-radius:var(--radius);
  padding:12px 14px; margin:0 0 12px;
}
.leadform .gform_validation_errors > h2 {
  font-family:var(--f-body); font-size:.82rem; font-weight:800; color:var(--flame-text);
  margin:0; text-transform:none; letter-spacing:0;
}
.leadform .gfield_required { color:var(--flame-text); }

/* GF's footer holds the button; the comp's button is full width with the fine
   print directly beneath it. */
/* gap was 12px, which read as the fine print being stuck to the button.
   22px separates the reassurance line from the CTA without letting it float
   away from the form it belongs to. */
.leadform .gform_footer { display:grid; gap:22px; margin:0; padding:0; }
.leadform .gform_footer .btn { width:100%; }
.leadform .gform_ajax_spinner { display:none; }

/* Confirmation message, in place of the form. */
.leadform .gform_confirmation_wrapper { padding:24px 28px 28px; }
.leadform__thanks {
  font-family:var(--f-body); font-size:1rem; line-height:1.6; color:var(--ink); text-align:center;
}
.leadform__thanks b { font-family:var(--f-display); font-size:1.5rem; display:block; margin-bottom:6px; }

/* GF honeypot must never be visible. */
.leadform .gform_validation_container,
.leadform .gfield--type-honeypot { display:none !important; position:absolute !important; left:-9999px !important; }


/* ---------- Header phone block and nav links ----------
   The number/label pair had no row gap, so the two lines sat flush against
   each other, and the label was at 50% opacity against the number's white.
   Both lines are now white with a real gap between them.

   Nav links were at 86% opacity; now full white. Their hover feedback does not
   depend on colour: `.nav__link::after` is a flame underline that scales in on
   hover, so raising the base colour to white does not remove the affordance. */
.header__phone{ row-gap:5px; justify-content:center; }
.header__phone .lbl{ color:var(--paper); }
.nav__link{ color:var(--paper); }


/* ---------- Text on dark grounds is white ----------
   Audited every text node whose effective background is dark: 397 of them were
   translucent bone between 55% and 86% opacity. On a dark ground that costs
   contrast and buys nothing, so they are now full white. Measured range before:
   5.71:1 (breadcrumbs) to 12.99:1. After: 19.67:1 throughout.

   Deliberately excluded: the orange accents (--flame-soft / --flame-text on
   ink), which are a designed accent rather than muted body copy. */
.hero__lead,
.page-hero__lead,
.hero__bullet,
.hero__bullet span,
.utility__item,
.leadform__sub,
.crumbs,
.crumbs a,
.totop,
.fbadge,
.footer__about,
.footer__note,
.footer__col a,
.footer__col p,
.footer__areas-label p,
.footer__areas-list a,
.footer__bar,
.footer__bar span,
.rate--feature .rate__unit,
.section--ink .section__lead{ color:var(--paper); }

/* Two hover states resolved to --paper, which is now the base colour, so they
   would have become no-ops. Moved to the accent so the feedback survives. */
.totop:hover{ color:var(--flame-soft); }
.footer__col a:hover,
.crumbs a:hover{ color:var(--flame-soft); }


/* ---------- Audience tile icons ----------
   28px against an 18.4px title in a 279x268 card read as a small mark rather
   than the card's opening beat. 40px gives it presence without crowding the
   heading. Stroke is nudged with it so the larger glyph does not thin out.
   Scaled back slightly on the single-column phone layout. */
.tile svg{
  width:40px;
  height:40px;
  stroke-width:2.1;
  margin-bottom:18px;
}
@media(max-width:640px){
  .tile svg{ width:34px; height:34px; margin-bottom:14px; }
}


/* ---------- Select placeholders match input placeholders ----------
   The comp styles `input::placeholder` and `textarea::placeholder` to #8B9098
   but not selects, and a select's placeholder is a real <option value="">, so
   it inherits the select's own ink colour. The result was three grey
   placeholders above two near-black ones in the same form.

   `:has(option[value=""]:checked)` colours the select only while the empty
   option is the current selection, so it reads as a placeholder and then
   switches to full ink the moment a real answer is picked. The option list
   itself stays ink so the open dropdown is readable. */
.leadform select:has(option[value=""]:checked){ color:#8B9098; }
.leadform select option{ color:var(--ink); }


/* ---------- Footer service-area heading ----------
   "Training across the Pittsburgh metro" sat at .74rem (11.84px) while the
   paragraph directly beneath it is 16px, so the heading was smaller than the
   copy it introduces and read as a caption. Up to .95rem, with the tracking
   eased from .16em to .12em because wide letter-spacing gets loose as the
   glyphs grow, and a little more line-height since it wraps to two lines.

   Scoped to .footer__areas-label so the other three footer column headings
   ("Training", "TK Fitness PGH", "Get in touch") keep their existing size. */
.footer__areas-label h3{
  font-size:.95rem;
  letter-spacing:.12em;
  line-height:1.35;
  margin-bottom:10px;
}


/* ---------- Service-area chips are not interactive ----------
   Mirrors the old anchor's appearance exactly (measured at 105x44 before the
   change) so the footer looks identical, minus the affordance. No hover, no
   pointer cursor: nothing here is clickable, and a hover fill on a non-link is
   a promise the markup cannot keep.

   The `.footer__areas-list a` rules above are now dead - harmless, and left in
   place so restoring links later is a one-line markup change. */
.footer__areas-list .area{
  font-size:1rem;
  font-weight:500;
  color:var(--paper);
  background:rgba(245,242,236,.05);
  border:1px solid var(--rule-dark);
  border-radius:var(--radius);
  padding:8px 14px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  cursor:default;
}
@media(max-width:600px){
  /* Padding only. The comp shrank these to .8rem on phones, but the 16px
     reading floor applies here too, so the space comes out of the padding
     instead of the type. */
  .footer__areas-list .area{ padding:7px 12px; }
}


/* ---------- Buttons stay one line, and one height, at 320px ----------
   The 600px rule below tuned padding and tracking for 390px. At 320px the
   longest label in the build - "How nutrition coaching works", 28 uppercase
   characters - still wrapped to two lines, giving a 69.41px button next to
   60px ones. Padding alone could not fix it: even at 10px it still wrapped,
   because 280px of usable width is genuinely too narrow for that string at
   12.8px.

   So the type steps down as well, which is allowed here: button labels are
   uppercase microtype and exempt from the 16px reading floor. Measured result
   at 320px: a single 60px height, zero overflowing labels.

   The real fix is shorter copy on that one button, which is a decision for
   whoever owns the words. */
/* 374, not 360: at 361-374 the label still wrapped, because the wider 600px
   rule is not tight enough until about 375. Boundary found by sweeping one
   pixel either side rather than assuming a round number. */
@media(max-width:374px){
  .btn{
    font-size:.72rem;
    padding-left:12px;
    padding-right:12px;
    letter-spacing:.03em;
    gap:6px;
  }
}


/* ============================================================
   Visual QA pass: findings from reviewing all 9 pages
   ============================================================ */

/* ---------- 1. In-prose links look like links ----------
   The single biggest finding. Round 4 of the comp added "3 to 6 internal links
   per page" in the body copy, but never gave them a visual treatment: measured
   across the build, 19 in-prose links rendered in exactly the body colour with
   no underline and no hover state. They were doing work for crawlers and none
   for readers.

   The acute case is the 404 page, whose entire purpose is the five recovery
   links in "Where you were probably going" - all five were indistinguishable
   from plain text.

   Uses the design's own accent, which passes AA on every ground it lands on:
   --flame-text is 4.61:1 on bone and 5.16:1 on paper, --flame-soft is 8.46:1
   on ink. Underline offset so descenders stay legible. */
.prose a:not(.btn),
.checklist li a:not(.btn),
.section__lead a:not(.btn),
.svc__text a, .rate__text a, .tile__text a, .step__text a,
.faq__a a, .compare__note a, .leadform__fine a{
  color:var(--flame-text);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .16s ease, text-decoration-color .16s ease;
}
.prose a:not(.btn):hover,
.checklist li a:not(.btn):hover,
.section__lead a:not(.btn):hover,
.svc__text a:hover, .rate__text a:hover, .tile__text a:hover, .step__text a:hover,
.faq__a a:hover, .compare__note a:hover, .leadform__fine a:hover{
  color:var(--flame-btn-hover);
  text-decoration-thickness:2px;
}

/* Same links on a dark ground need the light accent instead. */
.section--ink .prose a:not(.btn),
.section--ink .checklist li a:not(.btn),
.section--ink .section__lead a:not(.btn),
.cta .prose a:not(.btn), .cta__text a:not(.btn),
.cta .checklist li a:not(.btn),
.statement a:not(.btn),
.hero__bullet a:not(.btn),
.page-hero a:not(.btn),
.rate--feature .rate__text a, .rate--feature .checklist li a{
  color:var(--flame-soft);
}
.section--ink .prose a:not(.btn):hover,
.section--ink .checklist li a:not(.btn):hover,
.cta__text a:not(.btn):hover,
.statement a:not(.btn):hover,
.hero__bullet a:not(.btn):hover,
.page-hero a:not(.btn):hover,
.rate--feature .rate__text a:hover,
.rate--feature .checklist li a:hover{ color:var(--paper); }

/* The 404's recovery list is that page's primary action, not incidental prose,
   so it carries a little more weight. */
body.error404 .checklist li a{ font-weight:600; }

/* ---------- 2. Single-column prose pages are centred ----------
   Privacy and the 404 put a ~750px reading column flush left inside the 1366px
   container, leaving ~490px of dead space to the right and reading as an
   unfinished layout. The comp already ships --container-tight (940px) for
   exactly this; switching to it centres the column.

   Scoped by body class, because the about page also uses .prose but inside a
   two-column .split where centring would break the grid. */
body.tk-prose main .container{ max-width:var(--container-tight); }

/* ---------- 3. FAQ list closes its top edge ----------
   Every row had a bottom rule and the first had no top rule, so the list
   started in mid-air under its heading. */
.faq__item:first-child{ border-top:1px solid var(--rule); }


/* ---------- 4. Section CTAs ----------
   Two sections asked the reader to make a decision and gave them nothing to
   act on. "Same coaching. Two settings." literally says "pick the one you will
   actually show up for", and the service-area list ended on 18 place names.
   Both now close with a button.

   Alignment follows each section's own head: the compare section is centred,
   the service-area section is left-aligned, so the CTA matches rather than
   introducing a third alignment. */
.tk-section-cta{
  margin-top:44px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
#compare .tk-section-cta{ align-items:center; }

.tk-section-cta__note{
  font-family:var(--f-body);
  font-size:1rem;
  color:var(--ink-muted);
  margin:0;
}
.section--ink .tk-section-cta__note,
.cta .tk-section-cta__note{ color:var(--paper); }

@media(max-width:600px){
  .tk-section-cta{ margin-top:32px; align-items:stretch; }
  .tk-section-cta .btn{ width:100%; }
  .tk-section-cta__note{ text-align:center; }
}

/* =========================================================================
   MOTION LAYER — GSAP + Three.js (2026-08-24)
   ------------------------------------------------------------------------
   Gating rule, and it is the whole safety story:
   nothing in here applies until the motion module boots and sets
   `html.tk-gsap`. No JS, old browser, WebGL refused, or
   prefers-reduced-motion => the class is never set and the site renders
   exactly as it did before this layer existed. Do not remove that gate.
   ====================================================================== */

/* ---- 1. GSAP takes ownership of reveals -------------------------------
   site.js' IntersectionObserver still adds .is-in (it is the fallback).
   When GSAP is live we neutralise that transition so the two systems can
   never animate the same property at once - GSAP drives the inner spans. */
html.tk-gsap .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ---- 2. Split-text line masking -------------------------------------- */
/* overflow:hidden is the mask, but it clips descenders (p, g, the comma in
   "Four steps, in order."). Pad the box and pull the padding back out with a
   negative margin, so glyphs get room without shifting layout metrics. */
.tk-line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.tk-line > .tk-line__in{ display:block; will-change:transform; }
.tk-char{ display:inline-block; will-change:transform,opacity; }
/* SplitText needs a positioning context it will not inherit from headings */
html.tk-gsap .split__title,
html.tk-gsap .hero__title,
html.tk-gsap .section__title{ perspective:800px; }

/* ---- 3. Three.js hero canvas ----------------------------------------
   Sits behind the hero copy, above the photo. The photo stays as the
   no-WebGL fallback, so the canvas is purely additive. */
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:0;
  transition:opacity .9s ease;
}
html.tk-webgl .hero__canvas{ opacity:1; }
/* The canvas lives INSIDE .hero__media (z-index:0), so .hero__scrim (z-index:1)
   and the copy (z-index:2) both stay above it and headline contrast is
   preserved by the comp's own scrim. Do not raise this z-index. */
html.tk-webgl .hero__media img{ opacity:0; }   /* shader renders the photo now */

/* ---- 4. Cursor --------------------------------------------------------
   A rolling weight-plate cursor lived here. Removed 2026-09-16 at the
   client's request: he reported it as buggy and asked for the standard
   pointer. The plate markup came out of js/motion/main.js in the same
   pass, so there is nothing left for these rules to style. */

/* ---- 5. Magnetic buttons + card hover -------------------------------- */
html.tk-gsap .btn{ will-change:transform; }
html.tk-gsap .svc{ will-change:transform; }
html.tk-gsap .svc__media{ overflow:hidden; }
html.tk-gsap .svc__media img{ will-change:transform; }

/* ---- 6. Pinned "How it works" horizontal track ---------------------- */
/* The host still carries the comp's grid, which would keep sizing the cards.
   Force it to a block so the flex track actually governs, and give the cards a
   real width or scrollWidth never exceeds the container and the pin does nothing. */
/* The comp framed the 2x2 grid with one border and separated cells with
   internal dividers. As a moving row that frame just clips the track, and
   the cards - which have no border of their own - blur together. So in the
   pinned variant only: drop the host frame, give each card its own. The
   static (reduced-motion / no-JS) design keeps the comp's grid untouched. */
html.tk-gsap .steps--pinned{ overflow:hidden; display:block !important;
  border:0 !important; border-radius:0 !important; }
/* The section was 608px tall in a 900px viewport, so pinning it at the top
   left a ~292px void below and the pin engaging read as an abrupt jump.
   Filling the viewport makes the pin look deliberate.
   NOT a flex container: `.container` inside carries `margin:0 auto`, and auto
   margins on a flex item's cross axis CANCEL align-items:stretch - so it fell
   back to its max-width of 1366px and blew 342px of horizontal scroll out of a
   1024px viewport. Block layout plus centred padding does the same job safely.
   Scoped to the pin's own breakpoint: below 901px there is no pin, so a 100vh
   floor would only add dead space. */
@media (min-width:901px){
  html.tk-gsap #process{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
  }
  /* restore stretch that the auto margins cancelled, and keep the cap */
  html.tk-gsap #process > .container{ width:100%; align-self:stretch; }
}
html.tk-gsap .steps--pinned .step{
  border:1px solid var(--rule); border-radius:10px;
}
html.tk-gsap .steps--pinned .steps__track{
  display:flex; width:max-content; gap:28px; align-items:stretch; will-change:transform;
}
/* Width drives the whole effect. At 430px three cards fitted at once, so
   horizontal travel was only ~438px and nothing read as a sequence - the
   "current" step never advanced past 03. Wider cards mean they arrive one
   at a time, which is the point of "Four steps, in order." */
html.tk-gsap .steps--pinned .step{ flex:0 0 min(620px, 80vw); }
/* below the pin breakpoint the track reverts to the verified stacked grid */
@media (max-width:900px){
  html.tk-gsap .steps--pinned .steps__track{ display:grid; transform:none !important; }
}

/* ---- 6b. "Four steps, in order." ---------------------------------------
   The phrase is about SEQUENCE, so the section states it: a rule draws
   left-to-right under the heading, a progress line fills across the four
   cards, and whichever step is centred is emphasised while the others
   recede. Order made visible, rather than a generic fade. */
html.tk-gsap #process .tk-word{ display:inline-block; will-change:transform; }
/* No transform here on purpose. The rule is animated with gsap.from(), so
   its resting state is drawn. Setting scaleX(0) in CSS meant that when the
   .reveal tween's clearProps stripped the inline transform, the rule snapped
   back to invisible - it rendered as a 20px stub. Natural state = visible. */
html.tk-gsap #process .tk-headrule{
  display:block; height:2px; width:min(300px,52vw); margin:18px auto 0;
  background:var(--flame); transform-origin:0 50%;
}
html.tk-gsap .steps__progress{
  position:relative; height:2px; margin:0 0 26px; background:var(--rule);
}
html.tk-gsap .steps__progress i{
  position:absolute; inset:0; transform:scaleX(0); transform-origin:0 50%;
  background:var(--flame); display:block;
}
/* the centred step reads as "current"; the rest sit back. Opacity only -
   no layout property is touched, so nothing can shift. */
html.tk-gsap .steps--pinned .step{ opacity:.4; transition:opacity .4s ease; }
html.tk-gsap .steps--pinned .step.is-current{ opacity:1; }
/* the active step's numeral takes the brand colour - "you are here" */
html.tk-gsap .steps--pinned .step .step__num{ transition:color .4s ease; }
html.tk-gsap .steps--pinned .step.is-current .step__num{ color:var(--flame); }

/* ---- 7. Scroll progress rail ---------------------------------------- */
html.tk-gsap .tk-progress{
  position:fixed; left:0; top:0; height:2px; width:100%; transform-origin:0 50%;
  transform:scaleX(0); background:var(--flame); z-index:9998; pointer-events:none;
}

/* ---- 8. Reduced motion / no-WebGL hard stop -------------------------
   Belt and braces: the JS never sets .tk-gsap under reduced motion, and
   this makes certain nothing animates even if that gate were bypassed. */
@media (prefers-reduced-motion:reduce){
  html.tk-gsap *,html.tk-gsap *::before,html.tk-gsap *::after{
    transition:none !important; animation:none !important;
  }
  html.tk-gsap .hero__canvas{ display:none !important; }
  html.tk-gsap .hero__bg img{ opacity:1 !important; }
  html.tk-gsap .tk-progress{ display:none !important; }
  html.tk-gsap .tk-line > .tk-line__in,html.tk-gsap .tk-char{ transform:none !important; opacity:1 !important; }
}

/* ---- 9. Inner-page heroes (.page-hero) get the shader too --------------
   Their image is a feature column rather than a full-bleed background, so
   the canvas covers the media box and is opaque - no need to fade the <img>
   underneath the way the home hero does. Privacy has no hero image and is
   left flat on purpose. */
html.tk-gsap .page-hero__media .hero__canvas{ z-index:0; }
html.tk-gsap .page-hero__media::after{ z-index:1; }    /* comp gradient stays on top */
html.tk-webgl .page-hero__media img{ opacity:0; }      /* shader renders the photo */

/* ---- Form columns: not stretched, not equal width -----------------------
   The equal-height rule earlier in this file is right for PHOTO columns and
   wrong for a form: a photo can crop to fill, a form's height IS its content.
   Measured on /1-on-1-personal-training/: .split was `619px 619px` with
   align-items:stretch, so .leadform was stretched to 1460px around a 416px
   form - 911px of empty box hanging below it. Same on plans (1255), nutrition
   (1192) and contact (736).

   Only form splits are exempted here (`:has(> .leadform)`); the media splits
   on home, about and the landing page keep their stretch, so the equal-height
   photo work is untouched.

   The copy column also takes the larger share - it carries the argument, the
   form only needs to be wide enough to fill in - and the form travels with
   the reading column instead of sitting in a tall empty box. */
@media (min-width:981px){
  .split:has(> .leadform){
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }
  .split > .leadform{ align-self: start; }
}
/* Stick only when the viewport can actually hold the form. Measured: the form
   runs 573-623px tall across desktop widths, so with the 104px offset it needs
   up to 727px of height. At 650px and 600px tall it was clipped - the CTA still
   cleared the fold but the fine print under it did not. 740px is the smallest
   height that fits every measured case. */
@media (min-width:981px) and (min-height:740px){
  .split > .leadform{
    position: sticky;
    top: 104px;              /* same offset the sticky split photo uses */
  }
}
/* Stacked below 980px the form follows the copy in normal flow. A sticky form
   in a single column would hover over the very content it belongs under. */
@media (max-width:980px){
  .split > .leadform{ position:static; top:auto; }
}