@import url('../fonts/fonts.css');

/* ==========================================================================
   Knockout Fitness — Nashville's original boxing gym since 1995.
   One idea: the page is a fight card. The gym's own photographs carry every
   band; Anton sets the card; hairlines and outline pills do the rest.
   Reference lock: DESIGN.md §13 (21 TSI primary; Peloton red role; Nike light
   band).
   ========================================================================== */

:root{
  /* canvas + ink: 21 TSI */
  --black:#000;
  --dark:#161A1C;
  --ink:#EBF3F6;
  --ink-2:#AEBBC5;
  --line-d:#222A30;
  /* light band: Nike */
  --white:#fff;
  --ink-l:#111;
  --grey-l:#707072;
  --line-l:#E5E5E5;
  /* the one accent: Peloton's role, the gym's own red */
  --red:#D8232A;
  --red-deep:#A9141B;

  --display:'Anton','Arial Narrow',sans-serif;
  --label:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --pad:80px;
  --gutter:20px;
  --maxw:1350px;
  --pill:70px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-ui:.28s;
  --t-reveal:.7s;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--black);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.5;font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

:where(a,button,[role=tab]):focus-visible{outline:3px solid var(--red);outline-offset:3px}
.light :where(a,button):focus-visible{outline-color:var(--ink-l)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--red);color:#fff;padding:12px 18px;border-radius:var(--pill)}
.skip:focus{left:12px;top:12px}

/* ---------- type --------------------------------------------------------- */

.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:-.005em}
h1.display{font-size:clamp(3rem,8.6vw,8.2rem)}
h2.display{font-size:clamp(2.5rem,6.2vw,5.6rem)}
h3.display{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:.95}

.eyebrow{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:'';width:28px;height:1px;background:currentColor;flex:0 0 auto}
.light .eyebrow{color:var(--grey-l)}
.lede{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.45;max-width:54ch;color:var(--ink)}
.light .lede{color:var(--ink-l)}
.muted{color:var(--ink-2)}
.light .muted{color:var(--grey-l)}
.small{font-size:.875rem;line-height:1.45}

/* ---------- layout ------------------------------------------------------- */

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--pad)}
.dark{background:var(--dark)}
.light{background:var(--white);color:var(--ink-l)}
.head{display:grid;gap:18px;margin-bottom:44px}
.head h2{margin-top:14px}

/* ---------- pills -------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:14px 28px;
  border:1px solid currentColor;border-radius:var(--pill);
  font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.1;
  text-decoration:none;text-align:center;
  transition:transform .14s var(--ease),background-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.btn:active{transform:scale(.97)}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--sm{min-height:44px;padding:10px 20px;font-size:.9375rem}
@media (hover:hover) and (pointer:fine){
  .btn--red:hover{background:var(--red-deep);border-color:var(--red-deep)}
  .btn:not(.btn--red):hover{background:var(--ink);color:var(--black);border-color:var(--ink)}
  .light .btn:not(.btn--red):hover{background:var(--ink-l);color:#fff;border-color:var(--ink-l)}
}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header: floating glass pill ---------------------------------- */

.hdr{position:fixed;top:12px;left:0;right:0;z-index:60;padding-inline:12px;pointer-events:none}
.hdr__pill{
  pointer-events:auto;
  max-width:calc(var(--maxw) - 2 * var(--gutter));margin-inline:auto;
  display:flex;align-items:center;gap:14px;
  min-height:60px;padding:8px 8px 8px 22px;
  background:rgba(10,12,13,.8);
  -webkit-backdrop-filter:blur(15px) saturate(1.2);backdrop-filter:blur(15px) saturate(1.2);
  border:1px solid rgba(235,243,246,.16);border-radius:var(--pill);
}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;flex:0 0 auto;margin-right:auto}
.brand b{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1;text-transform:uppercase;color:#fff}
.brand b span{color:var(--red)}
.brand small{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.nav{display:none}
.nav ul{display:flex;gap:2px}
.nav a{
  display:block;padding:10px 16px;border-radius:var(--pill);
  font-weight:500;font-size:.9375rem;text-decoration:none;color:var(--ink);
  transition:background-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease);
}
.nav a[aria-current=page]{background:rgba(235,243,246,.14);color:#fff}
@media (hover:hover) and (pointer:fine){.nav a:hover{background:rgba(235,243,246,.14);color:#fff}}
/* one segmented contact pill: phone | email */
.contact{display:none;border-radius:var(--pill);overflow:hidden;background:var(--red);flex:0 0 auto}
.contact a{
  display:flex;align-items:center;min-height:44px;padding:0 20px;
  font-weight:600;font-size:.9375rem;color:#fff;text-decoration:none;
  transition:background-color var(--t-ui) var(--ease);
}
.contact a+a{border-left:1px solid rgba(255,255,255,.35)}
.contact a:focus-visible{outline-color:#fff;outline-offset:-4px}
@media (hover:hover) and (pointer:fine){.contact a:hover{background:var(--red-deep)}}
.menu-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;
  border:1px solid rgba(235,243,246,.5);border-radius:var(--pill);
  font-weight:600;font-size:.9375rem;text-decoration:none;color:#fff;flex:0 0 auto;
}
.menu-btn i{display:block;width:16px;height:8px;border-block:2px solid currentColor}

/* phone drawer (native dialog: focus trap, Escape and focus return built in) */
.drawer{
  width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:0;
  background:var(--black);color:var(--ink);
}
.drawer::backdrop{background:#000}
.drawer__in{display:flex;flex-direction:column;height:100%;padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom))}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.drawer__close{min-height:44px;padding:0 20px;border:1px solid rgba(235,243,246,.5);border-radius:var(--pill);font-weight:600;font-size:.9375rem}
.drawer ul{margin-top:18px;border-top:1px solid var(--line-d);overflow:auto;flex:1 1 auto}
.drawer li a{
  display:flex;align-items:baseline;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-d);
  font-family:var(--display);font-size:2.5rem;line-height:1;text-transform:uppercase;text-decoration:none;
}
.drawer li a span{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);letter-spacing:.08em}
.drawer__acts{display:grid;grid-template-columns:1fr auto;gap:10px;padding-top:16px}

/* ---------- hero --------------------------------------------------------- */

.hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:max(620px,100svh);
  padding-block:120px 40px;
  overflow:hidden;
}
.hero--sub{min-height:max(560px,82svh)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 38%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.5) 100%),
    linear-gradient(95deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 60%);
}
.hero__in{position:relative;width:100%}
.hero h1{margin-top:18px;max-width:12ch}
.hero--sub h1{font-size:clamp(2.9rem,7.6vw,7.2rem);max-width:none}
.hero--sub h1 span{display:block}
.hero__row{margin-top:26px;display:grid;gap:24px}
.hero__lede{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.4;max-width:40ch}
.hero__note{margin-top:12px;font-size:.875rem;color:var(--ink-2)}
.hero__foot{
  margin-top:34px;padding-top:16px;border-top:1px solid rgba(235,243,246,.24);
  display:flex;flex-wrap:wrap;gap:6px 28px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
}

/* ---------- home opener: training photo in an inset frame ---------------- */
/* Section reference hero-beatperminute: movement photograph inside a frame on
   the black canvas, headline low-left over it, copy and a second photo below. */

.opener{padding-top:88px}
.opener__frame{position:relative;overflow:hidden;background:#0c0e0f}
.opener__frame img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.opener__frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,0) 58%),
    linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 55%);
}
.opener__title{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 18px 20px}
.opener h1{margin-top:12px;font-size:clamp(2.4rem,11.5vw,7.4rem);max-width:11ch;color:#fff}
.opener__row{display:grid;gap:28px;margin-top:22px}
.opener__lede{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.4;max-width:42ch}
.opener__copy .actions{margin-top:20px}
.opener__foot{
  margin-top:26px;padding-top:14px;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;gap:6px 26px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
}
.opener__foot span{white-space:nowrap}
.opener__side{display:none}
.opener__side img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:62% 62%}

/* ---------- tale of the tape: numerals as sculpture ---------------------- */

.tape{border-bottom:1px solid var(--line-d)}
.tape__grid{display:grid;grid-template-columns:1fr 1fr}
.tape__cell{padding:26px 16px 26px 0;border-top:1px solid var(--line-d)}
.tape__cell:nth-child(even){padding-left:16px;border-left:1px solid var(--line-d)}
.tape__n{font-family:var(--display);font-size:clamp(3rem,7.4vw,6.6rem);line-height:.9;color:var(--ink);white-space:nowrap}
.tape__n small{font-size:.38em;color:var(--ink-2);margin-left:.2em}
.tape__k{margin-top:12px;font-size:.9375rem;color:var(--ink-2);max-width:26ch}
.tape__src{padding-block:16px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- pick your corner: the format explorer (signature) ------------ */

.pick__grid{display:grid;gap:26px}
.pick__tabs{display:flex;gap:8px}
.pick__tab{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:60px;padding:8px 6px;text-align:center;text-decoration:none;
  border:1px solid rgba(235,243,246,.4);border-radius:var(--pill);color:var(--ink);
  transition:background-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.pick__tab i{display:none}
.pick__word{font-family:var(--label);font-weight:700;font-size:1.0625rem;line-height:1;text-transform:uppercase;letter-spacing:.03em}
.pick__price{font-family:var(--mono);font-size:.6875rem;color:var(--ink-2)}
.pick__tab[aria-selected=true]{background:var(--ink);color:var(--black);border-color:var(--ink)}
.pick__tab[aria-selected=true] .pick__price{color:#2b3238}
.pick__hint{display:none}

.pick__panel{display:grid;gap:22px}
.pick__panel+.pick__panel{margin-top:48px}
.js .pick__panel+.pick__panel{margin-top:0}
.pick__photo{position:relative;overflow:hidden;background:#0c0e0f}
.pick__photo img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover}
.pick__badge{
  position:absolute;left:0;bottom:0;background:var(--black);color:var(--ink);
  padding:8px 14px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
}
.pick__body h3{font-size:clamp(2.2rem,4vw,3.4rem)}
.pick__body>p{margin-top:14px;max-width:44ch}
.pick__rows{margin-top:22px;border-top:1px solid var(--line-d)}
.pick__rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-d)}
.pick__rows dt{color:var(--ink-2);font-size:.9375rem}
.pick__rows dd{font-family:var(--mono);font-weight:700;font-size:1.125rem;white-space:nowrap}
.pick__rows dd small{font-weight:400;font-size:.75rem;color:var(--ink-2);margin-left:6px}
.pick__body .actions{margin-top:24px}
@media (prefers-reduced-motion:no-preference){
  .js .pick__panel.is-in .pick__photo img{animation:pick-photo var(--t-reveal) var(--ease) both}
  .js .pick__panel.is-in .pick__body{animation:pick-body .5s var(--ease) .08s both}
  @keyframes pick-photo{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
  @keyframes pick-body{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- the hour: three frames (pinned on desktop) ------------------- */

.hour__steps{display:grid;gap:56px;margin-top:8px}
.hour__step{display:grid;gap:20px}
.hour__step p.hour__num{margin-top:0;max-width:none;font-family:var(--display);font-size:clamp(5rem,15vw,15.3rem);line-height:.8;color:var(--ink-l)}
.hour__step p.hour__num small{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--grey-l);margin-left:12px;vertical-align:top}
.hour__step h3{font-size:clamp(2rem,4.4vw,4.2rem);margin-top:14px}
.hour__step p{margin-top:14px;max-width:38ch;font-size:1.0625rem}
.hour__fig{position:relative;background:#eee}
.hour__fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hour__fig figcaption,.cap{
  margin-top:10px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-l);
}
.dark .cap,.corner .cap,.visit .cap,.opener .cap{color:var(--ink-2)}
.hour__bar{display:none}

/* ---------- full-bleed interlude ----------------------------------------- */

.interlude{position:relative;overflow:hidden}
.interlude img{width:100%;height:min(92svh,860px);object-fit:cover;object-position:50% 40%}
.interlude__cap{position:absolute;left:0;right:0;bottom:0;padding-block:80px 28px;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0))}
.interlude__cap p.display{font-size:clamp(2.2rem,6.4vw,5.6rem);max-width:14ch}
.interlude__cap p+p{margin-top:12px;color:var(--ink);max-width:40ch}

/* ---------- the corner --------------------------------------------------- */

.corner__grid{display:grid;gap:40px}
.corner__rec{font-family:var(--display);font-size:clamp(6rem,22vw,19rem);line-height:.8;color:var(--ink);white-space:nowrap}
.corner__rec+p{margin-top:16px;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.corner__body p+p{margin-top:1em}
.corner__body p{max-width:50ch}
.corner__list{margin-top:26px;border-top:1px solid var(--line-d)}
.corner__list div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-d)}
.corner__list dt{color:var(--ink-2);font-size:.9375rem}
.corner__list dd{font-family:var(--mono);font-weight:700}
.corner__src{margin-top:12px;font-size:.8125rem;color:var(--ink-2);max-width:52ch}
.corner__fig img{width:100%;height:auto}

/* ---------- rates: a printed rate card beside the headline --------------- */
/* Section reference pricing-chroma-tsc8m: headline, copy and actions on the
   left; a tabbed card holding the list in monospace on the right. */

.tariff{display:grid;gap:40px}
.tariff__intro h2{margin-top:14px}
.tariff__intro .lede{margin-top:22px}
.tariff__rule{margin-top:20px;padding:4px 0 4px 16px;border-left:3px solid var(--ink-l);max-width:50ch}
.tariff__rule b{font-weight:700}
.tariff__intro .actions{margin-top:26px}
.tariff__link{margin-top:18px}
.tariff__card{background:#F4F4F4;border:1px solid var(--line-l);padding:16px}
.tariff__tab{
  position:relative;z-index:1;display:inline-block;margin-bottom:-1px;
  padding:9px 14px;background:var(--white);border:1px solid var(--ink-l);border-bottom-color:var(--white);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;
}
.tariff__sheet{background:var(--white);border:1px solid var(--ink-l);padding:6px 14px 18px}
.tariff__h{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  padding-top:22px;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1;text-transform:uppercase;
}
.tariff__h span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--grey-l)}
.tariff__list{margin-top:10px;border-top:1px solid var(--ink-l)}
.tariff__list div{
  display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid var(--line-l);
  font-family:var(--mono);font-size:.875rem;
}
.tariff__list dt{flex:1 1 auto;min-width:0}
.tariff__list dt small{display:inline-block;margin-left:4px;font-size:.8125rem;color:var(--grey-l);white-space:nowrap}
.tariff__list dd{font-weight:700;font-size:1.0625rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.tariff__list .is-ask{flex-wrap:wrap}
.tariff__list .is-ask dd{margin-left:auto;font-size:.9375rem}
.tariff__src{margin-top:12px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;line-height:1.5;color:var(--grey-l)}

/* first-visit steps (personal-training) */
.steps{display:grid;gap:0;border-top:1px solid var(--ink-l);counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;padding:24px 0;border-bottom:1px solid var(--line-l);counter-increment:s}
.steps li::before{content:'0' counter(s);font-family:var(--display);font-size:clamp(3rem,6vw,5.6rem);line-height:.85;grid-row:span 2}
.steps h3{font-family:var(--body);font-weight:600;font-size:1.25rem;line-height:1.2;text-transform:none;letter-spacing:0;align-self:end}
.steps p{color:var(--grey-l);max-width:46ch}
.steps a{color:var(--ink-l)}

/* equipment list */
.kit{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.kit li{border:1px solid rgba(235,243,246,.34);border-radius:var(--pill);padding:8px 16px;font-size:.9375rem}
.trio{display:grid;gap:26px;margin-top:44px}
.trio img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* ---------- visit -------------------------------------------------------- */

.visit__grid{display:grid;gap:36px}
.visit__cols{display:grid;gap:0;border-top:1px solid var(--line-d)}
.visit__block{padding:22px 0;border-bottom:1px solid var(--line-d)}
.visit__block h3{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.visit__block address,.visit__big{font-style:normal;font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1}
.visit__block a{text-decoration:none;border-bottom:1px solid rgba(235,243,246,.4)}
@media (hover:hover) and (pointer:fine){.visit__block a:hover{border-bottom-color:var(--red)}}
.visit__block p.small{margin-top:10px;color:var(--ink-2);max-width:44ch}
.visit__fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 70%}

/* ---------- closing + footer --------------------------------------------- */

.close{border-top:1px solid var(--line-d);padding-block:var(--pad)}
.close h2{font-size:clamp(3rem,10.4vw,10.4rem);margin-top:16px}
.close .actions{margin-top:30px}
.close p.hero__note{max-width:46ch}

/* closing call to action (home). Section reference cta-greenboard: two tiles,
   one per real action, the phone number set as the second tile's headline. */
.cta .cta__head h2{font-size:clamp(2.5rem,6.2vw,5.6rem);margin-top:14px}
.cta__tiles{display:grid;gap:12px;margin-top:36px}
.cta__tile{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:44px;
  min-height:200px;padding:22px 22px 24px;
  background:var(--dark);border:1px solid var(--line-d);color:var(--ink);text-decoration:none;
  transition:background-color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.cta__tile--red{background:var(--red);border-color:var(--red);color:#fff}
.cta__tile--red:focus-visible{outline-color:#fff}
.cta__top{font-size:.9375rem;line-height:1.4;max-width:30ch;padding-right:36px;color:var(--ink-2)}
.cta__tile--red .cta__top{color:rgba(255,255,255,.88)}
.cta__big{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.8rem);line-height:.95;max-width:13ch}
.cta__num{white-space:nowrap;max-width:none}
.cta__arrow{position:absolute;top:20px;right:22px;font-size:1.375rem;line-height:1;transition:transform var(--t-ui) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cta__tile--red:hover{background:var(--red-deep);border-color:var(--red-deep)}
  .cta__tile:not(.cta__tile--red):hover{border-color:var(--ink-2)}
  .cta__tile:hover .cta__arrow{transform:translateX(5px)}
}
.cta__more{margin-top:22px;font-size:.9375rem;color:var(--ink-2);overflow-wrap:anywhere}
.cta__more a{color:var(--ink)}

/* footer. Section reference footer-united-carriers: labelled columns for the
   address with directions, phone, email and sessions; pages above. */
.ft{border-top:1px solid var(--line-d);padding-block:56px 40px}
.ft__top{display:grid;gap:30px;padding-bottom:30px;border-bottom:1px solid var(--line-d)}
.ft__brand{display:flex;align-items:center;gap:16px}
.ft__mark{background:#fff;padding:8px 9px;width:62px;flex:0 0 auto}
.ft__brand p{font-size:.9375rem;color:var(--ink-2);max-width:32ch}
.ft__brand b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.ft__label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.ft__nav ul{display:flex;flex-wrap:wrap;gap:0 22px}
.ft__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid transparent;font-size:.9375rem}
.ft__grid{display:grid;gap:26px;padding-block:30px;border-bottom:1px solid var(--line-d)}
.ft__col{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ft__col address{font-style:normal;font-size:1rem;line-height:1.45}
.ft__col a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;
  text-decoration:underline;text-decoration-color:rgba(235,243,246,.35);text-underline-offset:4px;
  font-size:.9375rem;overflow-wrap:anywhere;
}
.ft__col .ft__big{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;line-height:1;white-space:nowrap;text-decoration:none}
.ft__col p.ft__big{min-height:44px;display:flex;align-items:center}
.ft__note{font-size:.875rem;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .ft__nav a:hover{border-bottom-color:var(--red)}
  .ft__col a:hover{text-decoration-color:var(--red)}
}
.ft__meta{padding-top:22px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- sticky-action (library component, site tokens) --------------- */

:root{--sticky-action-h:68px}
.sticky-action{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  min-height:var(--sticky-action-h);
  background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-d);
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.sticky-action a{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;
  border:1px solid rgba(235,243,246,.5);border-radius:var(--pill);
  font-weight:600;font-size:.9375rem;color:#fff;text-decoration:none;white-space:nowrap;
}
.sticky-action a.sticky-action__offer{flex:1 1 auto;background:var(--red);border-color:var(--red)}
.sticky-action[data-state=hidden]{transform:translateY(110%);opacity:0;pointer-events:none}
html.has-sticky-action{scroll-padding-bottom:calc(var(--sticky-action-h) + 16px)}
html.has-sticky-action body{padding-bottom:var(--sticky-action-h)}
@media (min-width:900px){
  .sticky-action.sticky-action--phone-only{display:none}
  html.has-sticky-action.sticky-action-phone-only body{padding-bottom:0}
}

/* ---------- reveal ------------------------------------------------------- */

.rv{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  /* The zero-length animation is a safety net: if site.js never runs, every
     block still becomes visible rather than staying at opacity 0 for good. */
  .js .rv{opacity:0;transform:translateY(20px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);animation:rv-show 0s linear 6s forwards}
  .js .rv.is-in{opacity:1;transform:none;animation:none}
  @keyframes rv-show{to{opacity:1;transform:none}}
}

/* ==========================================================================
   breakpoints
   ========================================================================== */

@media (min-width:640px){
  :root{--gutter:32px}
  .hour__step{grid-template-columns:1fr 1fr;align-items:end;gap:32px}
  .trio{grid-template-columns:repeat(3,1fr)}
  .pick__panel{grid-template-columns:1fr 1fr;align-items:end}
  .opener__frame img{aspect-ratio:4/3}
  .tariff__sheet{padding:6px 22px 20px}
  .tariff__list div{font-size:.9375rem}
  .cta__tiles{grid-template-columns:1fr 1fr}
  .ft__grid{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  :root{--pad:120px;--gutter:45px}
  body{font-size:18px}
  .hdr{top:18px}
  .nav,.contact{display:block}
  .contact{display:flex}
  .menu-btn{display:none}
  .brand{margin-right:18px}
  .nav{margin-right:auto}
  .head{grid-template-columns:1.2fr .8fr;align-items:end;gap:60px;margin-bottom:64px}
  .hero{padding-bottom:48px}
  .hero__row{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:60px}
  .tape__grid{grid-template-columns:repeat(4,1fr)}
  .tape__cell{padding:36px 24px 36px 0}
  .tape__cell:nth-child(n){padding-left:24px;border-left:1px solid var(--line-d)}
  .tape__cell:first-child{padding-left:0;border-left:0}

  /* explorer: giant words on the left, one photographed panel on the right */
  .pick__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:60px;align-items:start}
  .pick__tabs{flex-direction:column;gap:0;border-top:1px solid var(--line-d)}
  .pick__tab{
    flex:0 0 auto;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:22px;
    padding:22px 0;border:0;border-bottom:1px solid var(--line-d);border-radius:0;text-align:left;
    color:#56636d;
  }
  .pick__tab i{display:block;font-style:normal;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--ink-2);width:2.2em}
  .pick__word{font-family:var(--display);font-weight:400;font-size:clamp(3.2rem,6.1vw,6rem);line-height:.9;letter-spacing:-.005em;white-space:nowrap}
  .pick__price{margin-left:auto;font-size:.875rem;white-space:nowrap}
  .pick__tab[aria-selected=true]{background:none;color:var(--ink);border-color:var(--line-d)}
  .pick__tab[aria-selected=true] .pick__price{color:var(--ink)}
  .pick__hint{display:block;margin-top:18px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
  .pick__panel{grid-template-columns:1fr;align-items:start}
  .pick__photo img{aspect-ratio:5/4}
  .pick__body h3{display:none}
  .pick__body>p{margin-top:0}

  .corner__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:60px;align-items:start}
  .opener{padding-top:96px}
  .opener__frame img{aspect-ratio:auto;height:clamp(460px,66svh,680px);object-position:50% 26%}
  .opener__title{padding:0 40px 34px}
  .opener h1{font-size:clamp(4rem,7.4vw,7.4rem)}
  .opener__row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:60px;align-items:start;margin-top:32px}
  .opener__side{display:block;width:100%;max-width:360px;justify-self:end}
  .tariff{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px;align-items:start}
  .tariff__intro{position:sticky;top:120px}
  .cta__tiles{margin-top:48px}
  .cta__tile{min-height:280px;padding:28px 30px 30px}
  .cta__arrow{top:26px;right:30px}
  .visit__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:60px;align-items:start}
  .visit__fig{max-width:420px;justify-self:end}
  .ft__top{grid-template-columns:1fr auto;align-items:end;gap:40px}
  .ft__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
  .steps li{grid-template-columns:180px 1fr 1fr;align-items:end}
  .steps li::before{grid-row:auto}
}
@media (min-width:1200px){
  .ft__grid{grid-template-columns:1.2fr 1fr 1.3fr 1fr 1fr}
}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .pick__tab:hover{color:var(--ink)}
}

/* Pinned hour: only when site.js opts in (it adds .hour--pin on wide,
   normal-motion viewports), so no-JS and reduced motion keep the stack. */
@media (min-width:900px){
  .hour--pin{height:300vh;padding-block:0}
  .hour--pin .hour__stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:96px 32px}
  .hour--pin .head{margin-bottom:20px}
  .hour--pin .head h2{font-size:clamp(2rem,3.4vw,3.2rem)}
  .hour--pin .hour__steps{position:relative;flex:1 1 auto;min-height:0;display:block;margin:0}
  .hour--pin .hour__step{
    position:absolute;inset:0;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:60px;align-items:end;
    opacity:0;visibility:hidden;
    transition:opacity .5s var(--ease),visibility 0s linear .5s;
  }
  .hour--pin .hour__step{align-items:stretch}
  .hour--pin .hour__step>div{display:flex;flex-direction:column;padding-bottom:28px}
  .hour--pin .hour__step h3{margin-top:auto}
  .hour--pin .hour__step.is-on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
  .hour--pin .hour__fig{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;background:none}
  .hour--pin .hour__fig img{width:100%;height:calc(100% - 28px);aspect-ratio:auto;object-fit:cover;transform:scale(1.05);transition:transform 1s var(--ease)}
  .hour--pin .hour__step.is-on .hour__fig img{transform:none}
  .hour--pin .hour__bar{display:block;height:1px;background:var(--line-l);margin-top:18px}
  .hour--pin .hour__bar i{display:block;height:3px;margin-top:-1px;background:var(--ink-l);transform:scaleX(0);transform-origin:left center}
}

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