@font-face { font-family: "New Title"; src: url(NewTitle-Bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Switzer"; src: url(Switzer-Medium.woff2) format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Switzer"; src: url(Switzer-Semibold.woff2) format("woff2"); font-weight: 600; font-display: block; }
/* Layout: full-bleed shader banner, copy anchored bottom-left, glass pills, spectrum rule */
:root {
  --ink: #000000; --cream: #F8F3EB; --beige: #E9DCCB; --sand: #D6C0A6;
  --orange: #EC6E00; --flame: #FE2B00; --marigold: #FFC400; --orchid: #A45EFF;
  /* k2 (audit): named colours and the neumorphic shadows, at today's values */
  --c-lo: #CDBFAD; --c-hi: #FFFDF8; --c-bg: #EFE6DA; --c-night: #292622;
  --neu-in: inset 4px 4px 10px var(--c-lo), inset -4px -4px 10px var(--c-hi);
  --neu-out: 5px 5px 12px var(--c-lo), -5px -5px 12px var(--c-hi);
  --neu-out-sm: 4px 4px 10px var(--c-lo), -4px -4px 10px var(--c-hi);
  --display: "New Title", "Arial Narrow", sans-serif;
  --body: "Switzer", system-ui, sans-serif;
  color-scheme: dark;
}
html, body { background: var(--ink); color: var(--cream); margin: 0; }
body { font-family: var(--body); }

.mast { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
#sg { position: absolute; inset: 0; z-index: -1; background: #000; pointer-events: none; }
#sg canvas { display: block; }
.mast::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.28) 100%); }

.inner { width: 100%; max-width: 1232px; margin: 0 auto; padding: clamp(28px, 6vh, 120px) 16px; display: flex; flex-direction: column; display: flex; flex-direction: column; box-sizing: border-box; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { width: clamp(150px, 18vw, 220px); height: auto; display: block; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.45)) drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.nav, .logopill { display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 30px rgba(0,0,0,0.25); }

.copy.glasspanel { background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 18px 48px rgba(0,0,0,0.28); border-radius: 56px; padding: 40px 44px 40px; }
.nav a { color: var(--cream); text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; }
.nav a:hover, .nav a:focus-visible { background: rgba(255,255,255,0.16); outline: none; }

.copy { margin-block: auto; width: 100%; max-width: 1200px; margin-inline: auto; box-sizing: border-box; }
.copy > * { max-width: 760px; }
.spacer { flex: 1; min-height: 72px; }
.eyebrow { font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--beige); margin: 0 0 12px; }
h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(64px, 11vw, 148px); line-height: 0.88; letter-spacing: 0.005em; margin: 0; text-wrap: balance; }
h1 .o { color: var(--cream); }
h1, .eyebrow, .sub { text-shadow: 0 2px 18px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25); }
.rule { height: 5px; width: min(360px, 60%); border-radius: 3px; margin: 22px 0 18px;
  background: linear-gradient(100deg, var(--flame) 0%, var(--orange) 17%, var(--marigold) 34%, #91CE63 50%, #06BFA8 66%, #01A2EE 83%, var(--orchid) 100%); }
.sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--cream); max-width: 34em; margin: 0; text-wrap: pretty; }
.copy .sub { display: inline-block; padding: 14px 20px; border-radius: 22px; background: rgba(41,38,34,0.34); border: 1px solid rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: none; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn { font: 600 15px/1 var(--body); color: var(--c-hi); text-decoration: none; padding: 15px 24px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.btn.glass { background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.btn svg { width: 16px; height: 16px; }
.meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.tag { font: 600 12px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; color: var(--cream);
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.18); }

/* Buttons: Uiverse.io by FColombati, set in Switzer */
.button { all: unset; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); position: relative; border-radius: 100em; background-color: rgba(41,38,34,0.78); font-size: 17px;
  box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5,5,5,0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5,5,5,0.1); }
.button::after { content: ""; position: absolute; z-index: 0; width: calc(100% + 0.3em); height: calc(100% + 0.3em); top: -0.15em; left: -0.15em; border-radius: inherit;
  background: linear-gradient(-135deg, rgba(5,5,5,0.5), transparent 20%, transparent 100%); filter: blur(0.0125em); opacity: 0.25; mix-blend-mode: multiply; }
.button .button-outer { position: relative; z-index: 1; border-radius: inherit; transition: box-shadow 300ms ease; will-change: box-shadow;
  box-shadow: 0 0.05em 0.05em -0.01em rgba(5,5,5,1), 0 0.01em 0.01em -0.01em rgba(5,5,5,0.5), 0.15em 0.3em 0.1em -0.01em rgba(5,5,5,0.25); }
.button:hover .button-outer, .button:focus-visible .button-outer { box-shadow: 0 0 0 0 rgba(5,5,5,1), 0 0 0 0 rgba(5,5,5,0.5), 0 0 0 0 rgba(5,5,5,0.25); }
.button-inner { --inset: 0.035em; position: relative; z-index: 1; border-radius: inherit; padding: 1em 1.5em;
  background-image: linear-gradient(135deg, #D9C6B1, #A6917F);
  transition: box-shadow 300ms ease, clip-path 250ms ease, background-image 250ms ease, transform 250ms ease; will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip; clip-path: inset(0 0 0 0 round 100em);
  box-shadow: 0 0 0 0 inset rgba(5,5,5,0.1), -0.05em -0.05em 0.05em 0 inset rgba(5,5,5,0.25), 0 0 0 0 inset rgba(5,5,5,0.1), 0 0 0.05em 0.2em inset rgba(255,255,255,0.25),
    0.025em 0.05em 0.1em 0 inset rgba(255,255,255,1), 0.12em 0.12em 0.12em inset rgba(255,255,255,0.25), -0.075em -0.25em 0.25em 0.1em inset rgba(5,5,5,0.25); }
.button:hover .button-inner, .button:focus-visible .button-inner {
  clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 100em);
  box-shadow: 0.1em 0.15em 0.05em 0 inset rgba(5,5,5,0.75), -0.025em -0.03em 0.05em 0.025em inset rgba(5,5,5,0.5), 0.25em 0.25em 0.2em 0 inset rgba(5,5,5,0.5),
    0 0 0.05em 0.5em inset rgba(255,255,255,0.15), 0 0 0 0 inset rgba(255,255,255,1), 0.12em 0.12em 0.12em inset rgba(255,255,255,0.25), -0.075em -0.12em 0.2em 0.1em inset rgba(5,5,5,0.25); }
.button .button-inner span { position: relative; z-index: 4; font-family: var(--body); letter-spacing: -0.02em; font-weight: 600; color: rgba(0,0,0,0);
  background-image: linear-gradient(135deg, var(--c-night), #4C4741); -webkit-background-clip: text; background-clip: text;
  transition: transform 250ms ease; display: block; will-change: transform; text-shadow: rgba(0,0,0,0.1) 0 0 0.1em; user-select: none; -webkit-user-select: none; }
.button:hover .button-inner span { transform: scale(0.975); }
.button:active .button-inner { transform: scale(0.975); }
.button:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .button-outer, .button-inner, .button-inner span { transition: none; } }
@media (max-width: 640px) {
  .copy.glasspanel { padding: 28px 22px; border-radius: 36px; }
  
  .inner { padding: 20px 16px 32px; }
  .inner { padding: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ---------- hero video ---------- */
.video { position: relative; background: #000; }
.video video { display: block; width: 100%; height: clamp(420px, 82vh, 860px); object-fit: cover; object-position: 50% 35%; }
.video .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 32px 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); padding-top: 120px; }
.video .cap p { margin: 0; font: 600 13px/1.4 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--beige); }
.video .cap b { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5vw, 64px); line-height: 0.9; text-transform: uppercase; color: var(--cream); display: block; margin-top: 8px; letter-spacing: 0.01em; }

/* ---------- light mode: soft (neumorphic) surfaces in the GYM41 palette ---------- */
.light { --bg: var(--c-bg); --hi: var(--c-hi); --lo: var(--c-lo); --night: var(--c-night); --deep: #4C4741; --taupe: #A6917F; --teal: #06BFA8;
  background: var(--bg); color: var(--night); padding-block: clamp(64px, 9vw, 120px); padding-inline: 16px; }
.wrap { max-width: 1200px; margin: 0 auto; }
.light .eyebrow { color: var(--deep); text-shadow: none; }
.light h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(44px, 6.5vw, 88px); line-height: 0.92; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
.light .lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--deep); max-width: 36em; margin: 0; text-wrap: pretty; }
.light .rule { margin: 22px 0 22px; }
.soft { border-radius: 50px; background: var(--bg); box-shadow: 20px 20px 60px var(--lo), -20px -20px 60px var(--hi); }
.soft.in { box-shadow: inset 10px 10px 24px var(--lo), inset -10px -10px 24px var(--hi); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: 56px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 36px); margin-top: 48px; }
.svc { padding: 40px 34px 34px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.svc h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 34px; line-height: 0.95; margin: 6px 0 0; letter-spacing: 0.01em; }
.svc p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--deep); text-wrap: pretty; }
.chip { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 8px 8px 18px var(--lo), -8px -8px 18px var(--hi), inset 0 1px 0 rgba(255,255,255,0.5); }
.chip svg { width: 28px; height: 28px; }
.c-or { background: linear-gradient(160deg, #FE7E25, var(--orange) 55%, #D56303); }
.c-te { background: linear-gradient(160deg, #31CFB8, #06BFA8 55%, #0EAD98); }
.c-oc { background: linear-gradient(160deg, #AE7BFC, var(--orchid) 55%, #954DED); }
.c-fl { background: linear-gradient(160deg, #FE5F45, var(--flame) 55%, #E42600); }
.c-mg { background: linear-gradient(160deg, #FFD24A, var(--marigold) 55%, #EAB515); }
.more { margin-top: auto; padding-top: 12px; align-self: flex-start; font: 600 15px/1 var(--body); color: var(--night); text-decoration: none; padding: 14px 20px; border-radius: 999px;
  background: var(--bg); box-shadow: 6px 6px 14px var(--lo), -6px -6px 14px var(--hi); transition: box-shadow .25s ease, transform .2s ease; display: inline-flex; gap: 8px; align-items: center; }
.more:hover, .more:focus-visible { box-shadow: inset 4px 4px 10px var(--lo), inset -4px -4px 10px var(--hi); outline: none; }
.more:active { transform: scale(0.97); }
.more i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: block; }
.feat { padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.feat b { font-size: 17px; font-weight: 600; }
.feat span { font-size: 14.5px; line-height: 1.5; color: var(--deep); }
.feat .chip { width: 52px; height: 52px; }
.feat .chip svg { width: 24px; height: 24px; }
.brands { margin-top: 72px; padding: 30px 36px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.brands .lbl { font: 600 12px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep); margin-right: 8px; }
.brands span:not(.lbl) { font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 999px; background: var(--bg); box-shadow: 4px 4px 10px var(--lo), -4px -4px 10px var(--hi); }
.visit { margin-top: 72px; padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.visit h2 { font-size: clamp(40px, 5.5vw, 72px); }
.visit .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }


.light.foot { padding-block: 0 48px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; border-top: 1px solid rgba(166,145,127,0.35); padding-top: 24px; }
@media (max-width: 960px) { .grid3 { grid-template-columns: 1fr; } .grid4 { grid-template-columns: 1fr 1fr; } .visit { grid-template-columns: 1fr; } .visit .actions { justify-content: flex-start; } }
@media (max-width: 520px) { .grid4 { grid-template-columns: 1fr; } .soft { border-radius: 36px; } .video .cap { padding: 80px 16px 20px; } }
@media (prefers-reduced-motion: reduce) { .more, .visit .pill-or { transition: none; } }

/* solid soft top bar, same surface as the light section */
.topbar { --bg: var(--c-bg); --hi: var(--c-hi); --lo: var(--c-lo); position: relative; z-index: 2; background: var(--bg); padding: 26px 32px;
  border-radius: 0; box-shadow: 0 14px 40px rgba(41,38,34,0.28), inset 0 -1px 0 rgba(255,255,255,0.6); }
.topbar .top { max-width: 1200px; margin: 0 auto; justify-content: center; }
.navpill { display: flex; align-items: center; gap: clamp(24px, 6vw, 96px); padding: 10px 12px 10px 26px; border-radius: 999px; border: 1px solid rgba(41,38,34,0.14); flex-wrap: wrap; justify-content: space-between; }
.topbar .logo { width: clamp(130px, 14vw, 168px); filter: none; }
.topbar .nav { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 12px; padding: 0; }
.topbar .nav a { color: var(--c-night); padding: 12px 18px; background: var(--bg); box-shadow: 5px 5px 12px var(--lo), -5px -5px 12px var(--hi); transition: box-shadow .25s ease; }
.topbar .nav a:hover, .topbar .nav a:focus-visible { background: var(--bg); box-shadow: inset 4px 4px 10px var(--lo), inset -4px -4px 10px var(--hi); }
.inner { flex: 1; }

/* glass3d (adapted): local noise tile, GYM41 teal tint */






/* brand marquee */
.brands { overflow: hidden; padding: 26px 0; display: block; }
.brands .lbl { display: block; text-align: center; margin: 0 0 18px; }
.marquee { display: flex; width: max-content; gap: 64px; align-items: center; animation: slide 32s linear infinite; padding-inline: 32px; }
.marquee img { height: 30px; width: auto; display: block; filter: brightness(0); opacity: 0.72; }
.marquee img.tall { height: 46px; }
.marquee img.wide { height: 20px; }
.marquee img[alt="Bells of Steel"] { height: 38px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brands { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
@media (max-width: 640px) { .navpill { padding: 8px 10px 8px 18px; } .topbar { padding: 16px 16px; }  .marquee img { height: 24px; } .marquee img.tall { height: 36px; } .marquee { gap: 44px; } }


/* teal Open 24/7 tag + live status light */
.open247 { display: flex; justify-content: center; align-items: center; gap: 10px; box-sizing: border-box; width: min(360px, 60%); max-width: 100%; padding: 11px 18px 10px; margin: 0 0 12px; border-radius: 999px; color: var(--c-hi); letter-spacing: 0.16em; white-space: nowrap;
  background: linear-gradient(160deg, #31CFB8, #06BFA8 55%, #0EAD98); box-shadow: 0 6px 16px rgba(6,191,168,0.35), inset 0 1px 0 rgba(255,255,255,0.5); text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.status { display: flex; justify-content: flex-start; box-sizing: border-box; width: min(360px, 60%); max-width: 100%; align-items: center; gap: 10px; margin: 0 0 20px; padding: 11px 18px 10px; border-radius: 999px; font: 600 14px/1 var(--body); color: var(--cream);
  background: rgba(41,38,34,0.34); border: 1px solid rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: none; }
.status-text { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.led { flex: none; --led: #06BFA8; width: 10px; height: 10px; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 3px color-mix(in srgb, var(--led) 30%, transparent), 0 0 12px var(--led); animation: blink 1.6s ease-in-out infinite; }
.status[data-state="closed"] .led, .status[data-state="alert"] .led { --led: var(--orange); }
.status[data-state="alert"] .led { animation-duration: 0.7s; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .led { animation: none; } }

@media (max-width: 640px) { .open247, .status, .copy .rule { width: 100%; } .open247 { letter-spacing: 0.1em; font-size: 11px; gap: 6px; } .status-text { font-size: 11px; letter-spacing: 0.1em; } }


/* desktop: two columns inside the glass panel */
.copy.glasspanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px; align-items: stretch; }
.copy.glasspanel > * { max-width: none; }
.copy-main > * { max-width: 760px; }
.copy-side { position: relative; border-radius: 36px; overflow: hidden; min-height: 320px; box-shadow: 0 14px 34px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.3); }
.copy-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.copy-side .look { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 999px; text-decoration: none;
  font: 600 15px/1 var(--body); color: var(--cream); background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); }
.copy-side .look i { font-style: normal; }
@media (max-width: 960px) { .copy.glasspanel { display: block; } .copy-side { display: none; } }

@media (max-width: 640px) {
  .navpill { flex-direction: column; gap: 14px; border: 0; padding: 0; width: 100%; box-sizing: border-box; }
  .topbar .nav { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px; border-radius: 999px; border: 1.5px solid rgba(41,38,34,0.16); }
  .topbar .nav a { white-space: nowrap; flex: 1 1 auto; text-align: center; font-size: clamp(11px, 3.2vw, 13px); padding: 10px clamp(6px, 2.2vw, 12px); }
}


/* "Take a look around": Uiverse.io by marcelodolza, in GYM41 Orchid */
.lookbtn { --white: #F7EFFF; --o100: #E0C4FF; --o200: #C89CFF; --o300: #B47CFF; --o400: var(--orchid); --o500: #48207E; --radius: 999px;
  position: absolute; right: 30px; bottom: 30px; z-index: 2; display: block; text-decoration: none; border-radius: var(--radius); outline: none; cursor: pointer;
  font: 600 19px/1 var(--body); letter-spacing: -0.5px; background: transparent; border: 0; width: 264px; height: 60px; }
.lookbtn .bg { display: none; }
.lookbtn .bg::before, .lookbtn .bg::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--radius) * 1.1); background: var(--o500); }
.lookbtn .bg::before { filter: blur(5px); transition: all .3s ease;
  box-shadow: -7px 6px 0 0 rgb(100 55 170 / 40%), -14px 12px 0 0 rgb(100 55 170 / 30%), -21px 18px 4px 0 rgb(100 55 170 / 25%), -28px 24px 8px 0 rgb(100 55 170 / 15%),
    -35px 30px 12px 0 rgb(100 55 170 / 12%), -42px 36px 16px 0 rgb(100 55 170 / 8%), -56px 42px 20px 0 rgb(100 55 170 / 5%); }
.lookbtn .wrap { border-radius: inherit; overflow: hidden; height: 100%; padding: 3px; background: linear-gradient(to bottom, var(--o100) 0%, var(--o400) 100%); position: relative; transition: all .3s ease; box-sizing: border-box; }
.lookbtn .outline { position: absolute; overflow: hidden; inset: 0; opacity: 0; outline: none; border-radius: inherit; transition: all .4s ease; }
.lookbtn .outline::before { content: ""; position: absolute; inset: 2px; width: 120px; height: 300px; margin: auto; background: linear-gradient(to right, transparent 0%, white 50%, transparent 100%); animation: lbspin 3s linear infinite; animation-play-state: paused; }
.lookbtn .content { pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; height: 100%; gap: 14px; border-radius: var(--radius);
  transition: all .3s ease; background: linear-gradient(to bottom, var(--o300) 0%, var(--o400) 100%); box-shadow: inset -2px 12px 11px -5px var(--o200), inset 1px -3px 11px 0 rgb(0 0 0 / 35%); }
.lookbtn .content::before { content: ""; inset: 0; position: absolute; z-index: 10; width: 80%; top: 45%; bottom: 35%; opacity: .7; margin: auto; background: linear-gradient(to bottom, transparent, var(--o400)); filter: brightness(1.3) blur(5px); }
.lookbtn .char { transition: all .3s ease; display: flex; align-items: center; justify-content: center; }
.lookbtn .char span { display: block; color: transparent; position: relative; }
.lookbtn .char.state-1 span { animation: lbAppear 1.2s ease backwards calc(var(--i) * 0.03s); }
.lookbtn .char.state-1 span::before, .lookbtn .char span::after { content: attr(data-label); position: absolute; color: var(--white); text-shadow: -1px 1px 2px var(--o500); left: 0; }
.lookbtn .char span::before { opacity: 0; transform: translateY(-100%); }
.lookbtn .char.state-2 { position: absolute; left: 92px; }
.lookbtn .char.state-2 span::after { opacity: 1; }
.lookbtn .icon { animation: lbReset .8s cubic-bezier(0.7, -0.5, 0.3, 1.2) forwards; z-index: 10; }
.lookbtn .icon div, .lookbtn .icon div::before, .lookbtn .icon div::after { height: 3px; border-radius: 1px; background-color: var(--white); }
.lookbtn .icon div::before, .lookbtn .icon div::after { content: ""; position: absolute; right: 0; transform-origin: center right; width: 14px; border-radius: 15px; transition: all .3s ease; }
.lookbtn .icon div { position: relative; width: 24px; box-shadow: -2px 2px 5px var(--o400); transform: scale(0.9); background: linear-gradient(to bottom, var(--white), var(--o100)); animation: lbSwing 1s ease-in-out infinite; animation-play-state: paused; }
.lookbtn .icon div::before { transform: rotate(44deg); top: 1px; box-shadow: 1px -2px 3px -1px var(--o400); animation: lbLine1 1s linear infinite; animation-play-state: paused; }
.lookbtn .icon div::after { bottom: 1px; transform: rotate(316deg); box-shadow: -2px 2px 3px 0 var(--o400); background: linear-gradient(200deg, var(--white), var(--o100)); animation: lbLine2 1s linear infinite; animation-play-state: paused; }
.lookbtn:hover .char.state-1 span::before { animation: lbAppear .7s ease calc(var(--i) * 0.03s); }
.lookbtn:hover .char.state-1 span::after { opacity: 1; animation: lbDisappear .7s ease calc(var(--i) * 0.03s); }

.lookbtn:hover .outline { opacity: 1; }
.lookbtn:hover .outline::before, .lookbtn:hover .icon div::before, .lookbtn:hover .icon div::after, .lookbtn:hover .icon div { animation-play-state: running; }
.lookbtn:active .bg::before { filter: blur(5px); opacity: .7; box-shadow: -7px 6px 0 0 rgb(100 55 170 / 40%), -14px 12px 0 0 rgb(100 55 170 / 25%), -21px 18px 4px 0 rgb(100 55 170 / 15%); }
.lookbtn:active .content { box-shadow: inset -1px 12px 8px -5px rgba(72, 32, 126, 0.45), inset 0 -3px 8px 0 var(--o200); }
.lookbtn:active .outline { opacity: 0; }
.lookbtn:active .wrap { transform: scale(0.975); }
.lookbtn:focus .icon { animation: lbArrow 1s cubic-bezier(0.7, -0.5, 0.3, 1.5) forwards; }
.lookbtn .char.state-2 span::after, .lookbtn:focus .char.state-1 span { animation: lbDisappear .5s ease forwards calc(var(--i) * 0.03s); }
.lookbtn:focus .char.state-2 span::after { animation: lbAppear 1s ease backwards calc(var(--i) * 0.03s); }
.lookbtn:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; }
@keyframes lbspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes lbAppear { 0% { transform: translateY(50%); opacity: 0; filter: blur(20px); } 20% { transform: translateY(70%); opacity: 1; } 50% { transform: translateY(-15%); opacity: 1; filter: blur(0); } 100% { transform: translateY(0); opacity: 1; } }
@keyframes lbDisappear { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-70%); opacity: 0; filter: blur(3px); } }
@keyframes lbArrow { 0% { opacity: 1; } 50% { transform: translateX(60px); opacity: 0; } 51% { transform: translateX(-200px); opacity: 0; } 100% { transform: translateX(-128px); opacity: 1; } }
@keyframes lbSwing { 50% { transform: translateX(5px) scale(0.9); } }
@keyframes lbLine1 { 50% { transform: rotate(30deg); } 80% { transform: rotate(55deg); } }
@keyframes lbLine2 { 50% { transform: rotate(330deg); } 80% { transform: rotate(300deg); } }
@keyframes lbReset { 0% { transform: translateX(-128px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .lookbtn *, .lookbtn *::before, .lookbtn *::after { animation: none !important; transition: none !important; } }

.open247 .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; }

/* fit the whole masthead into the first screen on desktop */
@media (min-width: 961px) {
  .copy h1 { font-size: clamp(60px, min(11vw, 12.5vh), 148px); }
  .copy.glasspanel { padding: clamp(22px, 3.6vh, 40px) 44px; }
  .topbar { padding-block: clamp(14px, 2.4vh, 26px); }
  .copy .rule { margin: clamp(12px, 2vh, 22px) 0 clamp(12px, 1.8vh, 18px); }
  .inner { padding-block: clamp(20px, 4vh, 120px); }
}

/* align the CTA row with the photo button (desktop) */
@media (min-width: 961px) {
  .copy-main { display: flex; flex-direction: column; }
  .copy-main .ctas { margin-top: auto; padding-top: 26px; padding-bottom: 18px; }
  .lookbtn { bottom: 18px; height: var(--cta-h, 52px); }
}

/* pixel kettlebell that trails the cursor (desktop pointers only) */
.kb { display: none; }
@media (hover: hover) and (pointer: fine) {
  .kb { display: block; position: fixed; left: 0; top: 0; width: 36px; height: 36px; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .25s ease; will-change: transform;
    image-rendering: pixelated; filter: drop-shadow(1px 0 0 var(--c-hi)) drop-shadow(-1px 0 0 var(--c-hi)) drop-shadow(0 1px 0 var(--c-hi)) drop-shadow(0 -1px 0 var(--c-hi)) drop-shadow(0 3px 4px rgba(0,0,0,0.3)); }
  .kb.on { opacity: 1; }
}

/* ================= multi-page additions ================= */
[data-sg] { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
[data-sg] canvas { display: block; }
#sg { background: #000; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--c-night); color: var(--c-hi); padding: 10px 14px; border-radius: 999px; }
.skip:focus { left: 12px; }

/* top bar used on every page */
.mast.short { min-height: 0; }
.topbar .navpill { position: relative; }
.menubtn { all: unset; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-night);
  background: var(--c-bg); box-shadow: var(--neu-out); transition: box-shadow .25s ease; flex: none; }
.menubtn:hover, .menubtn:focus-visible { box-shadow: var(--neu-in); }
.menubtn svg { width: 20px; height: 20px; }
.topbar .nav a[aria-current="page"] { box-shadow: var(--neu-in); }
.brandrow { display: flex; align-items: center; gap: 14px; }

/* menu sheet */
.sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.sheet.open { display: block; }
.sheet .scrim { position: absolute; inset: 0; background: rgba(41,38,34,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet .panel { position: absolute; top: 12px; left: 12px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; box-sizing: border-box;
  background: var(--c-bg); border-radius: 36px; padding: 22px; box-shadow: 20px 20px 60px rgba(41,38,34,0.35), -10px -10px 40px rgba(255,253,248,0.4); color: var(--c-night); }
.sheet .panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sheet .panel header img { width: 120px; }
.sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sheet li a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; font: 600 16px/1 var(--body); padding: 16px 18px; border-radius: 999px;
  background: var(--c-bg); box-shadow: var(--neu-out); }
.sheet li a:hover, .sheet li a:focus-visible, .sheet li a[aria-current="page"] { box-shadow: var(--neu-in); outline: none; }
.sheet li a i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.sheet .sheetfoot { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 14px; color: #4C4741; }

/* page hero for inner pages (gradient + glass) */
.phero { position: relative; overflow: hidden; isolation: isolate; }
.phero .inner { padding: clamp(48px, 9vh, 110px) 16px; }
.phero .gpanel { max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.gpanel { background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 18px 48px rgba(0,0,0,0.22); border-radius: 56px; padding: clamp(28px, 4vw, 48px); color: var(--cream); }
.gpanel h1, .gpanel h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.9; margin: 0; letter-spacing: 0.005em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,0.3); }
.gpanel h1 { font-size: clamp(56px, 9vw, 128px); }
.gpanel h2 { font-size: clamp(44px, 6vw, 84px); }
.gpanel .eyebrow { color: var(--beige); }
.gpanel .lead2 { margin: 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; max-width: 38em; display: inline-block; padding: 14px 20px; border-radius: 22px;
  background: rgba(41,38,34,0.34); border: 1px solid rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-wrap: pretty; }
.gpanel .rule { margin: 20px 0; }
.gpanel .ctas { margin-top: 24px; }
/* sand gradient is light, so its glass carries dark text */
.on-sand .gpanel { color: var(--c-night); background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.18)); border-color: rgba(255,255,255,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 18px 48px rgba(41,38,34,0.18); }
.on-sand .gpanel h1, .on-sand .gpanel h2 { text-shadow: none; color: var(--c-night); }
.on-sand .gpanel .eyebrow { color: #4C4741; }
.on-sand .gpanel .lead2 { background: rgba(255,253,248,0.45); border-color: rgba(255,255,255,0.7); color: var(--c-night); }

/* gradient band sections inside a page */
.band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(64px, 9vw, 120px) 16px; }
.band .wrap { max-width: 1200px; margin: 0 auto; }
.gcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.gcard { border-radius: 36px; padding: 28px; background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gcard h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 34px; line-height: 0.95; margin: 0; }
.gcard p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.on-sand .gcard { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.7); }
.gcard .button { align-self: flex-start; margin-top: auto; }

/* hours */
.hours { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: 28px; }
.hrs { width: 100%; border-collapse: collapse; font-size: 16px; }
.hrs th, .hrs td { text-align: left; padding: 12px 0; border-bottom: 1px solid rgba(41,38,34,0.12); font-variant-numeric: tabular-nums; }
.hrs th { font-weight: 600; }
.hrs tr.today th, .hrs tr.today td { color: var(--orange); }
.flag { display: inline-block; margin-top: 12px; font: 600 12px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: rgba(236,110,0,0.12); color: #9A4700; }
.big247 { font-family: var(--display); font-weight: 700; font-size: clamp(80px, 12vw, 160px); line-height: .85; margin: 6px 0 10px; }

/* pricing */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); margin-top: 48px; }
.price { padding: 34px 30px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.price h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: .95; margin: 0; }
.price .amt { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.price .per { font-size: 14px; color: var(--deep); letter-spacing: .04em; }
.price ul { margin: 6px 0 0; padding-left: 18px; color: var(--deep); font-size: 15px; line-height: 1.55; }
.price .more { margin-top: auto; }
.price.feature { box-shadow: 20px 20px 60px var(--lo), -20px -20px 60px var(--hi), inset 0 0 0 2px rgba(236,110,0,0.45); }
.note { margin-top: 36px; padding: 24px 28px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.note p { margin: 0; color: var(--deep); line-height: 1.5; max-width: 60ch; }

/* coaches: circles in a pill track (white rim, black and white photos) */
.track { margin-top: 44px; padding: 22px; border-radius: 999px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track ul { list-style: none; margin: 0; padding: 0 8px; display: flex; gap: 22px; width: max-content; }
.coach { scroll-snap-align: start; width: 168px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.coach .ph { width: 148px; height: 148px; border-radius: 50%; border: 10px solid #FFFFFF; box-sizing: border-box; overflow: hidden; box-shadow: 8px 8px 20px var(--lo), -8px -8px 20px var(--hi); background: #ddd; }
.coach .ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.coach b { font-size: 16px; }
.coach span { font-size: 13px; color: var(--deep); line-height: 1.35; }

.bios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.bio { padding: 24px; display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; border-radius: 36px; }
.bio .ph { width: 76px; height: 76px; border-radius: 50%; border: 5px solid #FFF; overflow: hidden; box-sizing: border-box; box-shadow: 4px 4px 10px var(--lo), -4px -4px 10px var(--hi); }
.bio .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.bio b { display: block; font-size: 16px; }
.bio em { font-style: normal; display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9A4700; margin: 3px 0 6px; }
.bio p { margin: 0; font-size: 14px; color: var(--deep); line-height: 1.5; }

/* neumorphic form */
.form { margin-top: 44px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.form .full { grid-column: 1 / -1; }
.form label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 14px; }
.form input, .form select, .form textarea { font: 500 16px/1.4 var(--body); color: var(--c-night); background: var(--bg); border: 0; border-radius: 18px; padding: 14px 16px;
  box-shadow: inset 5px 5px 12px var(--lo), inset -5px -5px 12px var(--hi); outline: none; -webkit-appearance: none; appearance: none; }
.form select { background-image: linear-gradient(45deg, transparent 50%, #4C4741 50%), linear-gradient(135deg, #4C4741 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { box-shadow: inset 5px 5px 12px var(--lo), inset -5px -5px 12px var(--hi), 0 0 0 2px var(--orange); }
.form .send { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.form .sent { font-size: 14px; color: #0B7F70; font-weight: 600; }
.form .fine { font-size: 13px; color: var(--deep); }

/* Q&A accordion */
.qa { margin-top: 40px; display: grid; gap: 34px; }
.qgroup h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 30px; margin: 0 0 14px; }
.qa details { border-radius: 28px; background: var(--bg); box-shadow: 8px 8px 20px var(--lo), -8px -8px 20px var(--hi); margin-bottom: 14px; }
.qa summary { cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 22px; color: var(--orange); flex: none; }
.qa details[open] summary::after { content: "–"; }
.qa details[open] { box-shadow: inset 6px 6px 14px var(--lo), inset -6px -6px 14px var(--hi); }
.qa .a { padding: 0 24px 22px; color: var(--deep); line-height: 1.6; font-size: 15.5px; }
.qa .a p { margin: 0 0 10px; }
.qa .a ul { margin: 0 0 10px; padding-left: 20px; }
.ph-flag { display: inline-block; font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--marigold); color: var(--c-night); margin-left: 6px; vertical-align: middle; }

/* zones + simple split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 44px; }
.photo { border-radius: 50px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; box-shadow: 20px 20px 60px var(--lo), -20px -20px 60px var(--hi); }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.prose p { font-size: 17px; line-height: 1.65; color: var(--deep); margin: 0 0 14px; max-width: 62ch; }
.pill-tag { display: inline-block; font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; background: var(--bg); box-shadow: 4px 4px 10px var(--lo), -4px -4px 10px var(--hi); }

/* antaris placeholder */
.portal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
.portal .soft { padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.portal button { all: unset; margin-top: 8px; align-self: flex-start; font: 600 15px/1 var(--body); padding: 14px 20px; border-radius: 999px; background: var(--bg); color: #7A736C; box-shadow: inset 4px 4px 10px var(--lo), inset -4px -4px 10px var(--hi); cursor: not-allowed; }
.banner-ph { margin-top: 24px; padding: 18px 22px; border-radius: 22px; background: #FFF4D6; color: #5A4300; font-size: 15px; line-height: 1.5; box-shadow: inset 0 0 0 1px rgba(255,196,0,0.6); }

/* social icons */
.social { display: flex; gap: 12px; }
.social a { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--c-night); text-decoration: none; background: var(--bg, var(--c-bg));
  box-shadow: var(--neu-out); transition: box-shadow .25s ease; }
.social a:hover, .social a:focus-visible { box-shadow: var(--neu-in); outline: none; }
.social svg { width: 22px; height: 22px; }

/* full footer */
.sitefoot { padding-block: 72px 40px; }
.sitefoot .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; padding: 36px; }
body footer.sitefoot h2.fh, .sitefoot h2.fh { margin: 0 0 12px; font: 600 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--deep); }
.sitefoot p, .sitefoot li { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--c-night); }
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot a { text-decoration: none; }
.sitefoot a:hover { text-decoration: underline; }
.sitefoot .logo2 { width: 150px; margin-bottom: 12px; }
.sitefoot .base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--deep); margin-top: 22px; padding: 0 8px; }

@media (max-width: 960px) {
  .gcards, .hours, .split, .portal { grid-template-columns: 1fr; }
  .prices, .bios { grid-template-columns: 1fr 1fr; }
  .sitefoot .cols { grid-template-columns: 1fr 1fr; }
  .form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prices, .bios { grid-template-columns: 1fr; }
  .sitefoot .cols { grid-template-columns: 1fr; padding: 26px; }
  .gpanel { border-radius: 36px; }
  .track { border-radius: 60px; padding: 16px; }
  .coach { width: 128px; } .coach .ph { width: 112px; height: 112px; border-width: 7px; }
  .menubtn { position: absolute; left: 0; top: 2px; width: 40px; height: 40px; }
  .brandrow { justify-content: center; position: relative; width: 100%; }
}

/* ---- tweaks ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tone-sand { background: #D6C0A6; color: var(--c-night); }
.tone-brand, .tone-tealpurple { background: #000; color: var(--cream); }
.band h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(44px, 6.5vw, 88px); line-height: 0.92; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
.band .eyebrow { margin: 0 0 10px; }
.on-sand h2, .on-sand .eyebrow { text-shadow: none; }
.on-sand .eyebrow { color: #4C4741; }
.band .gpanel { margin-top: 28px; }
.band .gpanel#trial { margin-top: 0; }
.band .gpanel .lead2 + .status { margin-top: 20px; }
.portal .pill-tag { align-self: flex-start; margin: 0; }
.coach a.ph { display: block; }
.coach a.ph:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.coach a.ph:hover img { filter: grayscale(1) contrast(1.15); transform: scale(1.04); }
.coach .ph img { transition: transform .3s ease, filter .3s ease; }
@media (min-width: 961px) {
  .track { border-radius: 50px; overflow: visible; padding: 40px 28px; }
  .track ul { flex-wrap: wrap; justify-content: center; width: auto; gap: 34px 22px; }
}
.flag { margin-bottom: 0; }
.photo + .flag { margin-top: 18px; }
.hours .status { width: auto; max-width: 100%; display: inline-flex; }
.on-sand .status { color: var(--c-night); background: rgba(255,253,248,0.5); border-color: rgba(255,255,255,0.7); }
.sitehead { position: relative; z-index: 5; }
.mast .topbar { z-index: 5; }
@media (min-width: 961px) {
  .coach { width: 140px; } .coach .ph { width: 128px; height: 128px; border-width: 9px; }
  .track ul { gap: 34px 22px; }
}
/* bright brand gradient: tint the glass so cream text stays readable */
.tone-brand .gcard, .tone-tealpurple .gcard { background: rgba(41,38,34,0.36); border-color: rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.tone-brand .band-h, .tone-brand > .wrap > .eyebrow, .tone-brand > .wrap > h2 { text-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3); }
.tone-brand > .wrap > .eyebrow, .tone-tealpurple > .wrap > .eyebrow { color: var(--cream); }
.tone-brand .gpanel .eyebrow, .tone-tealpurple .gpanel .eyebrow { color: var(--cream); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.tone-brand .gpanel { background: linear-gradient(135deg, rgba(41,38,34,0.16), rgba(41,38,34,0.04)); }
/* purple/teal: if the sphere ever pulls back from a corner, show purple/teal behind it, never black */
.tone-tealpurple { background: linear-gradient(135deg, var(--orchid) 0%, #5B3FD6 40%, #0A9FC0 75%, #00D0FF 100%); }
/* floating glass cards on the bright gradients: same glass as the masthead panel, bigger */
.tone-brand .gcard, .tone-tealpurple .gcard {
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 18px 48px rgba(0,0,0,0.28);
  border-radius: 56px; padding: clamp(32px, 3.6vw, 48px) clamp(28px, 3.6vw, 48px); gap: 18px; }
.tone-brand .gcards, .tone-tealpurple .gcards { gap: clamp(24px, 3vw, 40px); margin-top: 40px; }
.tone-brand .gcard h3, .tone-tealpurple .gcard h3 { font-size: clamp(44px, 4.6vw, 68px); line-height: 0.9; text-shadow: 0 2px 18px rgba(0,0,0,0.3); }
.tone-brand .gcard p, .tone-tealpurple .gcard p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; padding: 14px 20px; border-radius: 22px;
  background: rgba(41,38,34,0.34); border: 1px solid rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-wrap: pretty; }
.tone-brand .gcard .button, .tone-tealpurple .gcard .button { margin-top: auto; }
@media (max-width: 640px) { .tone-brand .gcard, .tone-tealpurple .gcard { border-radius: 36px; padding: 28px 22px; } }
/* sand bands: frosted "liquid glass" — milkier fill, bright rim, top sheen */
.on-sand .gpanel, .on-sand .gcard { position: relative; isolation: isolate;
  background: linear-gradient(150deg, rgba(255,253,248,0.62) 0%, rgba(255,253,248,0.34) 45%, rgba(255,253,248,0.48) 100%);
  border: 1.5px solid rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(26px) saturate(1.8) brightness(1.04); backdrop-filter: blur(26px) saturate(1.8) brightness(1.04);
  box-shadow: inset 0 2px 1px rgba(255,255,255,0.95), inset 0 -14px 34px rgba(166,145,127,0.22), inset 0 0 0 1px rgba(255,255,255,0.25), 0 24px 60px rgba(41,38,34,0.22), 0 4px 12px rgba(41,38,34,0.08); }
.on-sand .gpanel::before, .on-sand .gcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,0.75), rgba(255,255,255,0) 55%), radial-gradient(80% 50% at 100% 100%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%); }
.on-sand .gpanel .lead2 { background: rgba(255,253,248,0.55); border-color: rgba(255,255,255,0.9); box-shadow: inset 0 1px 0 #fff; }
/* orange gradient bands: the text inlays inside each card are pressed-in clear glass (inset neumorphic) */
.tone-brand .gcard p {
  background: linear-gradient(135deg, rgba(41,38,34,0.14), rgba(41,38,34,0.08));
  border: 2px solid rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: inset 4px 4px 10px rgba(110,30,0,0.38), inset -4px -4px 10px rgba(255,240,200,0.45);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 1px 10px rgba(0,0,0,0.3); }
/* sand panels: the text box is pressed in (inset neumorphic, adamgiebl), clear glass */
.on-sand .gpanel .lead2 {
  background: linear-gradient(135deg, rgba(239,230,218,0.30), rgba(239,230,218,0.14));
  border: 2px solid rgba(255,253,248,0.55);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 4px 4px 10px rgba(140,115,90,0.45), inset -4px -4px 10px rgba(255,253,248,0.85);
  color: var(--c-night); }
/* site-wide text inlays on the dark/bright gradients: pressed-in clear glass (adamgiebl inset) */
.copy .sub, .copy .status,
.tone-brand .gpanel .lead2, .tone-tealpurple .gpanel .lead2, .tone-tealpurple .gcard p {
  background: linear-gradient(135deg, rgba(41,38,34,0.16), rgba(41,38,34,0.08));
  border: 2px solid rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: inset 4px 4px 10px rgba(0,0,0,0.30), inset -4px -4px 10px rgba(255,255,255,0.38);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 1px 10px rgba(0,0,0,0.3); }
.copy .status { padding-top: 11px; padding-bottom: 10px; }  /* 2px rim: same height as the teal pill */
/* sand status pill joins the sand inlay */
.on-sand .status { background: linear-gradient(135deg, rgba(239,230,218,0.30), rgba(239,230,218,0.14)); border: 2px solid rgba(255,253,248,0.55);
  box-shadow: inset 4px 4px 10px rgba(140,115,90,0.45), inset -4px -4px 10px rgba(255,253,248,0.85); padding-top: 10px; padding-bottom: 9px; }
.big247 { margin-bottom: clamp(22px, 2.6vw, 32px); }
.big247 { margin-top: 14px; }
/* masthead hugs the glass panel with a fixed buffer instead of filling the whole screen */
.mast { min-height: 0; }
.mast .inner { padding-block: clamp(40px, 5vw, 72px); flex: 1; }
.mast .copy { margin-block: auto; }  /* site.js sets the masthead height halfway between hugging the panel and a full screen */
/* orange gradient: orange behind it, never black, if an edge ever shows */
#sg, .tone-brand { background: linear-gradient(135deg, var(--orange) 0%, #C73C00 55%, var(--flame) 100%); }
/* status light: red for alerts, cream ring so the orange light reads on the orange gradient; long custom messages can widen the pill */
.status[data-state="alert"] .led { --led: var(--flame); }
.status[data-state="closed"] .led, .status[data-state="alert"] .led { box-shadow: 0 0 0 2px var(--c-hi), 0 0 12px var(--led); }
.copy .status { width: auto; min-width: min(360px, 60%); white-space: nowrap; }
@media (max-width: 640px) { .copy .status { min-width: 100%; } }
.contactgrid { align-items: start; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 960px) { .contactgrid { grid-template-columns: 1fr; } }
/* phones and tablets: render the gradient at a desktop-like shape and crop the middle, so it fills the whole section the way it does on desktop */
@media (max-width: 960px) { [data-sg], #sg { inset: -20% -110%; } }
/* inner-page heroes fill the first screen like the home masthead (site.js sets the height) */
main > .phero:first-child { display: flex; flex-direction: column; }
main > .phero:first-child .inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }
@font-face { font-family: "Switzer"; src: url(Switzer-Bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
.or { color: var(--orange); }
.tone-tealpurple .gcard h3 .or { color: var(--orange); text-shadow: 0 2px 14px rgba(0,0,0,0.25); }
body footer.sitefoot h2.fh, .sitefoot h2.fh { font-weight: 700; color: var(--c-night); }
.sitefoot b { font-weight: 700; }
.sitefoot .social { margin-top: 22px; }
/* home: scrolling black-and-white photo tickers beside the headings (same build as the brand ticker) */
.phead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.pstrip { position: relative; border-radius: 50px; min-height: 150px; }
.pstrip .ptrack { position: absolute; inset: 26px 34px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pstrip ul { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; gap: 18px; width: max-content; animation: pslide 52s linear infinite; }
.pstrip.rev ul { animation-direction: reverse; }
.pstrip li { flex: none; height: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.pstrip img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); }
@keyframes pslide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) { .pstrip ul { animation: none; } }
@media (max-width: 760px) { .phead { grid-template-columns: 1fr; gap: 20px; } .pstrip { min-height: 170px; border-radius: 36px; } .pstrip .ptrack { inset: 22px 24px; } }
@media (min-width: 961px) { .gpanel.hours { column-gap: clamp(40px, 6vw, 96px); grid-template-columns: 1fr 1fr; } }
@media (min-width: 761px) { .phead { grid-template-columns: minmax(max-content, 32%) minmax(0, 1fr); } }
@media (max-width: 760px) { .pstrip { min-height: 128px; border-radius: 30px; } .pstrip .ptrack { inset: 16px 20px; } .pstrip ul { gap: 12px; } .pstrip li { border-radius: 14px; } }
/* hero panel with a black-and-white photo on the right (desktop) */
.gpanel.withphoto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px; align-items: stretch; }
.gpanel.withphoto .gmain { display: flex; flex-direction: column; justify-content: center; }
.gpanel.withphoto .lead2 { max-width: 26em; }
.gside { position: relative; border-radius: 36px; overflow: hidden; min-height: 300px; box-shadow: 0 14px 34px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.3); }
.gside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
@media (max-width: 960px) { .gpanel.withphoto { display: block; } .gside { display: none; } }
.gpanel.withphoto .gside { min-height: clamp(420px, 57vh, 620px); }
/* Power Academy: three large platform photos (placeholders until the shoot) */
#platforms { padding-top: clamp(56px, 7vw, 96px); }
.plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); margin-top: 48px; }
.platph { margin: 0; }
.platph .frame { aspect-ratio: 4 / 5; border-radius: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--deep); text-align: center; padding: 20px; }
.platph svg { width: 44px; height: 44px; opacity: .7; }
.platph span { font: 600 16px/1.2 var(--body); }
.platph small { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: rgba(255,196,0,.28); color: #5A4300; }
@media (max-width: 760px) { .plats { grid-template-columns: 1fr; } .platph .frame { aspect-ratio: 4 / 3; border-radius: 30px; } }
#platforms { scroll-margin-top: 40px; }
#turf { padding-top: clamp(56px, 7vw, 96px); scroll-margin-top: 40px; }

#platforms .rule, #turf .rule { margin-top: 26px; }
/* bigger photos beside the story text (Power Academy, About, Train Your Clients) */
@media (min-width: 961px) { .split:not(.contactgrid) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .split .photo { aspect-ratio: 5 / 4; } }
/* story text sits in a pressed-in (indented) panel, like the tickers */
.split .prose { border-radius: 40px; padding: clamp(26px, 3vw, 40px); box-shadow: inset 10px 10px 24px var(--lo), inset -10px -10px 24px var(--hi); border: 2px solid rgba(206,191,173,0.45); }
.split .prose p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .split .prose { border-radius: 30px; } }
/* story sections: heading + text on the left, photo fills the full height on the right, text box aligned to the photo's bottom */
.split.story { margin-top: 0; align-items: stretch; }
.split.story .sleft { display: flex; flex-direction: column; }
.split.story .sleft .prose { margin-top: auto; }
@media (min-width: 961px) { .split.story .photo { aspect-ratio: auto; height: 100%; min-height: 520px; } }
@media (max-width: 960px) { .split.story .sleft .prose { margin-top: 24px; } }
@media (min-width: 961px) { .split.story .photo { min-height: 680px; } .split.story .sleft .rule { margin-bottom: 48px; } }
.emails { display: flex; flex-direction: column; gap: 10px; line-height: 1.45; }
.emails p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.emails span { color: var(--deep); font-size: 14px; }
.emails strong { font-weight: 700; color: var(--night); }
a.em { font-weight: 700; color: var(--c-night); text-decoration: none; }
a.em:hover, a.em:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--orange); }
/* footer: 16:9 "how to find us" video slot under Find us + Contact */
.sitefoot .fbrand, .sitefoot .fexplore { grid-row: span 2; }
.sitefoot .findvid { grid-column: 2 / 4; }
.findvid .frame { aspect-ratio: 16 / 9; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 18px; color: var(--deep); }
.findvid svg { width: 46px; height: 46px; opacity: .75; }
.findvid b { font-size: 16px; color: var(--c-night); }
.findvid span { font-size: 14px; max-width: 30ch; }
.findvid small { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: rgba(255,196,0,.28); color: #5A4300; }
@media (max-width: 960px) { .sitefoot .fbrand, .sitefoot .fexplore { grid-row: auto; } .sitefoot .findvid { grid-column: 1 / -1; } }
@media (max-width: 960px) {
  .sitefoot .cols > .fbrand { order: 1; } .sitefoot .cols > :nth-child(2) { order: 2; } .sitefoot .cols > .findvid { order: 3; }
  .sitefoot .cols > :nth-child(3) { order: 4; } .sitefoot .cols > .fexplore { order: 5; }
}
@media (min-width: 961px) { .sitefoot .cols { grid-template-columns: minmax(260px, 345px) max-content max-content max-content; justify-content: space-between; column-gap: 32px; } }
@media (max-width: 960px) { .sitefoot { padding-top: 0; } .sitefoot > .wrap { border-top: 1px solid rgba(166,145,127,0.45); padding-top: 64px; } }
.qa .qgroup:last-child details:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .track { padding: 14px 0; border-radius: 44px; scroll-padding-inline: 30px; }
  .track ul { padding: 0 30px; gap: 18px; }
  .coach { width: 108px; gap: 6px; } .coach .ph { width: 92px; height: 92px; border-width: 6px; }
  .coach b { font-size: 14px; } .coach span { font-size: 12px; }
}
#machines { padding-top: clamp(56px, 7vw, 96px); scroll-margin-top: 40px; }
#machines .rule { margin-top: 26px; }
.plats.six .frame { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .plats.six { grid-template-columns: 1fr 1fr; gap: 14px; } .plats.six .frame { border-radius: 22px; padding: 10px; } .plats.six span { font-size: 13px; } .plats.six svg { width: 30px; height: 30px; } }
/* home: cardio section */
#cardio { padding-top: clamp(64px, 9vw, 120px); }
.cardio-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cardio-list .pill-tag { font-size: 13px; padding: 12px 18px; }
.plats.cardio .frame { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .plats.cardio { grid-template-columns: 1fr; } }
/* cardio: heading block left, vertical 9:16 loop video placeholder right */
.chead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 80px); align-items: stretch; }






@media (min-width: 961px) { .chead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .chead { grid-template-columns: 1fr; }  }
.plats.cardio { margin-top: 56px; }
/* cardio loop is horizontal 16:9 */
.chead { align-items: center; }


/* divider: sunset (marigold, orange, flame into orchid) with a teal tip */
.rule { background: linear-gradient(90deg, var(--marigold) 0%, var(--orange) 26%, var(--flame) 52%, var(--orchid) 78%, transparent 78%, transparent 82%, #06BFA8 82%, #06BFA8 100%); }
@media (max-width: 640px) { .rule { height: 3px; } }
/* stacked button groups: every button matches the widest one */
.ctas.stacked, .actions.stacked { display: inline-grid !important; grid-template-columns: 1fr; justify-items: stretch; justify-self: start; width: max-content; max-width: 100%; }
.stacked > .button { display: block; text-align: center; }
.stacked > .button .button-inner span { text-align: center; }
/* phones: hero panel runs from the top of the gradient down to an animated scroll arrow */
.scrollcue { display: none; }
@media (max-width: 640px) {
  .mast .inner, main > .phero:first-child .inner { padding: 18px 16px 0; display: flex; flex-direction: column; }
  .mast .copy { margin-block: 0; flex: 1; display: flex !important; flex-direction: column; }
  .mast .copy-main { flex: 1; display: flex; flex-direction: column; }
  .mast .copy-main .ctas { margin-top: auto; padding-top: 22px; }
  main > .phero:first-child .gpanel { flex: 1; display: flex; flex-direction: column; }
  main > .phero:first-child .gpanel .ctas { margin-top: auto; padding-top: 22px; }
  main > .phero:first-child .gpanel.withphoto .gmain { flex: 1; justify-content: flex-start; }
  .scrollcue { display: grid; place-items: center; flex: none; height: 76px; color: var(--cream); text-decoration: none; }
  .scrollcue span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08)); border: 1px solid rgba(255,255,255,0.45);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 20px rgba(0,0,0,0.18);
    animation: cuebob 1.8s ease-in-out infinite; }
  .scrollcue svg { width: 20px; height: 20px; }
  .on-sand .scrollcue { color: var(--c-night); }
  .on-sand .scrollcue span { background: rgba(255,253,248,0.5); border-color: rgba(255,255,255,0.8); }
}
@keyframes cuebob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .scrollcue span { animation: none; } }
/* phones, refined: home masthead back to the centred panel (no arrow); inner pages start lower and stop higher, arrow lifted off the bottom */
@media (max-width: 640px) {
  .mast .inner { padding: 28px 16px; display: flex; flex-direction: column; }
  .mast .copy { flex: none; margin-block: auto; display: block !important; }
  .mast .copy-main { display: block; }
  .mast .copy-main .ctas { margin-top: 26px; padding-top: 0; }
  .mast .scrollcue { display: none; }
  main > .phero:first-child .inner { padding-top: 36px; }
  main > .phero:first-child .scrollcue { height: 22vh; height: 22svh; min-height: 120px; }
}
/* ---- beta fixes ---- */
/* contact grid on small phones: let the form and side card shrink to the column (long select options pushed it 2px wide) */
.contactgrid > *, .form label, .form input, .form select, .form textarea { min-width: 0; }
/* keyboard focus is visible on the current-page pill too (it is already pressed in) */
.topbar .nav a[aria-current="page"]:focus-visible, .sheet li a[aria-current="page"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* form confirmation text: darker teal so 14px text passes contrast on the cream surface */
.form .sent { color: #066B5F; }
.qa .qgroup h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: 0.95; margin: 0 0 14px; }
/* small phones (360 wide): tighten the first screen so heroes fit */
@media (max-width: 380px) {
  .topbar { padding: 12px 12px; } .topbar .logo { width: 118px; }
  .mast .inner { padding: 18px 12px; }
  .copy.glasspanel { padding: 22px 18px; }
  .copy h1 { font-size: 50px; }
  .copy .rule { margin: 14px 0 12px; }
  .copy .sub { font-size: 15px; padding: 12px 16px; }
  .open247, .status { margin-bottom: 10px; }
  .copy-main .ctas { margin-top: 18px; }
  main > .phero:first-child .inner { padding-top: 24px; }
  .phero .gpanel { padding: 22px 18px; }
  .gpanel h1 { font-size: 46px; }
  .gpanel .rule { margin: 14px 0; }
  .gpanel .lead2 { font-size: 15px; padding: 12px 16px; }
  .gpanel .ctas { margin-top: 18px; }
  .button { font-size: 15px; }
}
/* sticky site header (all pages) */
.sitehead { position: sticky; top: 0; z-index: 40; }
.sitehead .topbar { transition: padding .25s ease; }
@media (max-width: 640px) {
  .sitehead.compact .topbar { padding-block: 10px; }
  .sitehead.compact .topbar .nav { display: none; }
  .sitehead.compact .navpill { gap: 0; }
  .sitehead.compact .topbar .logo { width: 104px; }
}
/* home: scroll-built wireframe dumbbell, floating bottom-right */



/* B · wireframe Olympic plate turning behind the masthead glass panel */
#plateGL { position: absolute; z-index: 0; pointer-events: none; top: 50%; right: -4vw; width: min(62vw, 880px); aspect-ratio: 1; transform: translateY(-50%); }
#plateGL canvas { width: 100% !important; height: 100% !important; display: block; }
.mast .inner { position: relative; z-index: 1; }
@media (max-width: 640px) { #plateGL { width: 135vw; right: -55vw; top: 34%; } }

/* A · pinned scroll stage: a wireframe dumbbell builds over four steps, then spins */
.stage { position: relative; height: 340vh; background: var(--c-night); color: var(--cream); }
.stage-pin { position: sticky; top: var(--head-h, 78px); height: calc(100vh - var(--head-h, 78px)); height: calc(100svh - var(--head-h, 78px)); overflow: hidden;
  background: radial-gradient(70% 60% at 68% 50%, rgba(236,110,0,0.16), transparent 70%), var(--c-night); }
#stageGL { position: absolute; inset: 0 0 0 30%; }
#stageGL canvas { width: 100% !important; height: 100% !important; display: block; }
.stage-copy { position: absolute; left: max(16px, calc((100vw - 1200px) / 2)); top: 50%; transform: translateY(-50%); width: min(440px, 40vw); height: 300px; }
.stage-step { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; display: flex; flex-direction: column; justify-content: center; }
.stage-step.on { opacity: 1; transform: none; }
.stage-step .eyebrow { color: #D6C0A6; text-shadow: none; margin: 0 0 12px; }
.stage-step h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(56px, 7vw, 104px); line-height: 0.88; margin: 0; letter-spacing: 0.005em; }
.stage-step p:last-child { margin: 18px 0 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: #E9DCCB; max-width: 26em; }
.stage-prog { position: absolute; left: max(16px, calc((100vw - 1200px) / 2)); right: max(16px, calc((100vw - 1200px) / 2)); bottom: clamp(20px, 5vh, 48px); display: flex; align-items: center; gap: 18px; }
.stage-count { font: 600 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #D6C0A6; white-space: nowrap; }
.stage-prog b { flex: 1; height: 3px; border-radius: 2px; background: rgba(248,243,235,0.16); overflow: hidden; }
.stage-prog i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--marigold) 0%, var(--orange) 26%, var(--flame) 52%, var(--orchid) 78%, transparent 78%, transparent 82%, #06BFA8 82%, #06BFA8 100%); }
@media (max-width: 760px) {
  .stage { height: 300vh; }
  #stageGL { inset: 34% 0 6% 0; }
  .stage-copy { left: 16px; right: 16px; width: auto; top: 28px; transform: none; height: 230px; }
  .stage-step { justify-content: flex-start; }
  .stage-step h2 { font-size: 52px; }
  .stage-step p:last-child { font-size: 15px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .stage { height: auto; } .stage-pin { position: relative; top: 0; } .stage-step { transition: none; } }
@media (min-width: 641px) { #plateGL { width: min(96vh, 980px); right: -6vw; } }
/* floating arrow / back to top (Uiverse vinodjangid07, recoloured GYM41 orchid) */
.fab { all: unset; box-sizing: border-box; position: fixed; z-index: 45; bottom: calc(26px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; color: var(--cream);
  background: linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08)); border: 1px solid rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 20px rgba(0,0,0,0.18);
  transition: left .45s cubic-bezier(.6,0,.2,1), transform .45s cubic-bezier(.6,0,.2,1), width .3s ease, border-radius .3s ease, background-color .3s ease, background .3s ease, box-shadow .3s ease, opacity .3s ease, visibility .3s; }
.fab.sand { color: var(--c-night); background: rgba(255,253,248,0.55); border-color: rgba(255,255,255,0.85); }
.fab .fab-ico { width: 20px; height: 20px; flex: none; transition: transform .35s ease; animation: cuebob 1.8s ease-in-out infinite; }
.fab .fab-txt { position: absolute; bottom: -20px; font: 600 0px/1 var(--body); color: #fff; white-space: nowrap; letter-spacing: .02em; }
.fab:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.fab.nodown:not(.up) { opacity: 0; visibility: hidden; }
@media (min-width: 641px) { .fab:not(.up) { opacity: 0; visibility: hidden; } }
.fab.up { left: calc(100% - 18px); transform: translateX(-100%); color: #fff; background: var(--orchid); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 4px rgba(164,94,255,0.28), 0 10px 24px rgba(72,32,126,0.3); }
.fab.up .fab-ico { animation: none; transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .fab.up:hover { width: 140px; border-radius: 50px; background: #B47CFF; }
  .fab.up:hover .fab-ico { transform: rotate(180deg) translateY(200%); }
  .fab.up:hover .fab-txt { font-size: 13px; bottom: auto; transition: font-size .3s ease; }
}
@media (min-width: 641px) { .fab.up { left: calc(100% - 28px); bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .fab, .fab .fab-ico { transition: none; animation: none; } }
@media (max-width: 640px) {
  .sitehead.compact .topbar { padding: 12px 16px; box-shadow: 0 10px 28px rgba(41,38,34,0.22); }
  .sitehead.compact .brandrow { min-height: 44px; align-items: center; }
  .sitehead.compact .menubtn { top: 0; width: 44px; height: 44px; box-shadow: 4px 4px 10px var(--c-lo), -3px -3px 8px rgba(255,253,248,0.7); }
}
/* B · technical drawing of a 20 kg plate, floating inside the masthead glass */
.copy.glasspanel { position: relative; }
.copy.glasspanel > *:not(.bpwrap) { position: relative; z-index: 1; }






@keyframes bpfloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.2deg); } 50% { transform: translate3d(0, -14px, 0) rotate(0.6deg); } }


/* drawing sits over the photo too (like annotations), text stays on top */
.copy.glasspanel > .copy-side { z-index: 1; }

.copy.glasspanel > .copy-main { z-index: 3; }
.copy-side .lookbtn { z-index: 4; }


/* B · FIG. 1 plate drawing: turns slowly behind the masthead glass, rolls away on scroll */
#plateDraw { position: absolute; z-index: 0; pointer-events: none; top: 50%; left: 50%; width: min(92vh, 860px); aspect-ratio: 600 / 640; transform: translate(-30%, -50%); perspective: 1400px; }





@media (max-width: 960px) { #plateDraw { width: 130vw; left: 30%; top: 40%; } }
/* let the drawing read through the masthead glass: lighter frost on this panel only */
.mast .copy.glasspanel { -webkit-backdrop-filter: blur(3px) saturate(1.4); backdrop-filter: blur(3px) saturate(1.4); }
#plateDraw { width: min(74vh, 640px); left: 34%; transform: translate(-50%, -50%); }
@media (max-width: 960px) { #plateDraw { width: 115vw; left: 62%; top: 44%; transform: translate(-50%, -50%); } }
/* plate drawing: big, bleeding off the top-right of the page */
#plateDraw { width: min(135vh, 1350px); left: auto; right: -22vw; top: -32%; transform: none; }
@media (max-width: 960px) { #plateDraw { width: 165vw; left: auto; right: -78vw; top: -12%; transform: none; } }
/* plate drawing as layered 3D: back face, rim thickness rings, front face, raised hub */
#plateDraw { aspect-ratio: 1; perspective: 1600px; }



   





/* plate: real depth, every layer pushed along Z by a share of the plate's width (--pd set by site.js) */

 
#plateDraw { width: min(165vh, 1750px); right: -34vw; top: -48%; perspective: 2200px; }
@media (max-width: 960px) { #plateDraw { width: 230vw; right: -120vw; top: -20%; } }
#plateGL3 { position: absolute; inset: 0; will-change: transform, opacity; }
#plateGL3 canvas { width: 100% !important; height: 100% !important; display: block; filter: drop-shadow(0 0 2px rgba(255,244,230,0.4)); }
#plateDraw { perspective: none; }
@media (min-width: 761px) { #stageGL { inset: -6% -4% -6% 24%; } } @media (max-width: 760px) { #stageGL { inset: 30% -10% 4% -10%; } }

/* Antaris pages shown inside the site: GYM41 header stays on top, the portal fills the rest of the screen */
.embed { display: flex; flex-direction: column; height: calc(100vh - var(--head-h, 78px)); height: calc(100svh - var(--head-h, 78px)); background: var(--bg, var(--c-bg)); }
.embedbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, calc((100vw - 1200px) / 2)); font: 600 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--deep, #4C4741); border-bottom: 2px solid rgba(206,191,173,.6); }
.embedlbl { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.embedlbl .led { width: 8px; height: 8px; border-radius: 50%; background: #06BFA8; box-shadow: 0 0 0 3px rgba(6,191,168,.25); }
.embedout { display: inline-flex; align-items: center; gap: 6px; color: #B95500; text-decoration: none; white-space: nowrap; }
.embedout svg { width: 16px; height: 16px; }
.embedout:hover, .embedout:focus-visible { text-decoration: underline; }
.embedframe { flex: 1; width: 100%; border: 0; background: #fff; display: block; }
@media (max-width: 520px) { .embedbar { letter-spacing: .08em; font-size: 11px; } }

/* After the dumbbell build has been seen once, the stage stops pinning and sits as one screen-height panel */
.stage.done { height: auto; }
.stage.done .stage-pin { position: relative; top: 0; height: min(calc(100svh - var(--head-h, 78px)), 860px); }
@media (max-width: 760px) { .stage.done .stage-pin { height: min(calc(100svh - var(--head-h, 78px)), 720px); } }
@media (max-width: 520px) { .embedsub { display: none; } }
body:has(.embed) .fab { display: none !important; }

/* Join online hand-off: a short branded moment before Antaris opens full screen */
.handoff { min-height: calc(100vh - var(--head-h, 78px)); min-height: calc(100svh - var(--head-h, 78px)); display: grid; place-items: center; padding: 48px max(16px, 4vw); background: var(--bg); }
.handoff-card { width: min(680px, 100%); padding: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; gap: 18px; }
.handoff-card .pill-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.handoff-card .led { width: 8px; height: 8px; border-radius: 50%; background: #06BFA8; box-shadow: 0 0 0 3px rgba(6,191,168,.25); }
.handoff-card h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(48px, 7vw, 84px); line-height: .9; margin: 6px 0 0; color: var(--night); text-shadow: none; text-wrap: balance; }
.handoff-card .lead2 { margin: 0; color: var(--deep); }
.handoff-bar { height: 6px; border-radius: 3px; background: rgba(206,191,173,.55); box-shadow: inset 2px 2px 4px var(--lo), inset -2px -2px 4px var(--hi); overflow: hidden; }
.handoff-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--marigold) 0%, var(--orange) 30%, var(--flame) 62%, var(--orchid) 88%, #06BFA8 100%); animation: handoff 2.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes handoff { to { transform: scaleX(1); } }
.handoff-note { margin: 0; font-size: 14px; color: var(--deep); }
@media (prefers-reduced-motion: reduce) { .handoff-bar i { animation-duration: .6s; } }
body:has(.handoff) .fab { display: none !important; }
.light.handoff { padding: clamp(32px, 6vh, 64px) max(16px, 4vw); }
.light.handoff { grid-template-columns: minmax(0, 680px); justify-content: center; } .handoff-card { width: auto; min-width: 0; box-sizing: border-box; }

/* ============ HOME · GROUPFIT41 second floor: a loud, wide Radwave band under the dumbbell stage ============ */
@font-face { font-family: "Radwave"; src: url(Radwave-Regular.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Radwave Outline"; src: url(Radwave-Outline.woff2) format("woff2"); font-weight: 400; font-display: block; }
.gf41 { position: relative; overflow: hidden; isolation: isolate; padding: 0 0 clamp(64px, 8vw, 112px); color: var(--cream); }
.gf41 .wrap { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.gf-marquee { overflow: hidden; padding: clamp(22px, 3vw, 36px) 0; margin-bottom: clamp(28px, 4vw, 56px); border-bottom: 2px solid rgba(248,243,235,.28); }
.gf-track { display: flex; width: max-content; gap: .6em; animation: gfmarq 38s linear infinite; font: 400 clamp(56px, 9vw, 132px)/1 "Radwave", var(--display); text-transform: uppercase; white-space: nowrap; }
.gf-track span { padding-right: .6em; }
.gf-track .o { font-family: "Radwave Outline", "Radwave", var(--display); color: var(--cream); opacity: .9; }
@keyframes gfmarq { to { transform: translateX(-50%); } }
.gf-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.gf-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 10px 16px; border-radius: 999px; font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(41,38,34,.28); border: 1.5px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 2px 2px 6px rgba(0,0,0,.25), inset -2px -2px 6px rgba(255,255,255,.18); }
.gf-tag .led { width: 9px; height: 9px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 3px rgba(255,196,0,.3), 0 0 12px var(--marigold); }
.gf-h { font: 400 clamp(38px, 5.4vw, 76px)/1.02 "Radwave", var(--display); text-transform: uppercase; margin: 0; letter-spacing: -.01em; text-shadow: 0 3px 24px rgba(30,10,60,.35); }
.gf-o { font-family: "Radwave Outline", "Radwave", var(--display); color: var(--marigold); text-shadow: none; }
.gf-lead { margin: 22px 0 0; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; max-width: 34em; text-wrap: pretty; text-shadow: 0 1px 10px rgba(30,10,60,.3); }
.gf-feats { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gf-feats li { padding: 10px 16px; border-radius: 999px; font: 600 14px/1 var(--body); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); box-shadow: 4px 4px 12px rgba(30,10,60,.25), -3px -3px 10px rgba(255,255,255,.14); }
.gf-sched { margin-top: 28px; padding: 22px; border-radius: 32px; background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 14px 14px 36px rgba(30,10,60,.28); }
.gf-schedh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0 0 16px; }
.gf-schedh b { font: 400 clamp(18px, 1.8vw, 22px)/1 "Radwave", var(--display); text-transform: uppercase; }
.gf-schedh span { font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.gf-times { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gf-times li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 12px; border-radius: 20px; background: rgba(41,38,34,.3);
  box-shadow: inset 3px 3px 8px rgba(0,0,0,.3), inset -3px -3px 8px rgba(255,255,255,.14); }
.gf-times b { font: 400 clamp(17px, 1.7vw, 22px)/1 "Radwave", var(--display); }
.gf-times span { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.gf41 .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.gf-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.gf-ph { margin: 0; min-width: 0; }
.gf-ph1 { grid-column: 1 / -1; }





@media (max-width: 960px) { .gf-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .gf-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gf-photos { gap: 12px; }  
  .gf-sched { padding: 18px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) { .gf-track { animation: none; } }
.gf-head { margin-bottom: clamp(28px, 4vw, 48px); }
.gf41 .gf-h { font-size: clamp(24px, 7.1vw, 100px); line-height: 1; }
.gf-photos { align-self: stretch; }
.gf41 .gf-head { margin: 0 auto clamp(32px, 4vw, 56px); }
.gf-br-m { display: none; }
.gf-feats { display: grid; grid-template-columns: repeat(2, max-content); }
@media (max-width: 600px) {
  .gf41 .gf-h { font-size: 11.2vw; line-height: 1.02; }
  .gf-br-m { display: inline; }
  .gf-feats { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } .gf-feats li { text-align: center; padding: 10px 8px; font-size: 13px; line-height: 1.2; display: flex; align-items: center; justify-content: center; }
  .gf-times { display: flex; flex-wrap: wrap; justify-content: center; } .gf-times li { flex: 0 0 calc((100% - 20px) / 3); }
}
@media (max-width: 600px) { .gf-times { gap: 10px; } .gf-times li { box-sizing: border-box; min-width: 0; flex: 0 0 calc((100% - 21px) / 3); padding-inline: 2px; } .gf-times b { font-size: clamp(15px, 4.4vw, 19px); } }
.gf41 .gf41n { font-style: normal; color: var(--flame); text-shadow: 0 0 18px rgba(254,43,0,.35); }

/* GroupFit41 rental note inside the second-floor band */
.gf41n { font-style: normal; color: var(--flame); }
.gf-rentpill { background: rgba(254,43,0,.28) !important; border-color: rgba(255,170,140,.7) !important; }
.gf-rent { margin-top: 26px; padding: 18px 20px; border-radius: 26px; background: rgba(41,38,34,.3); border: 1.5px solid rgba(255,255,255,.35); box-shadow: inset 3px 3px 9px rgba(0,0,0,.28), inset -3px -3px 9px rgba(255,255,255,.14); }
.gf-rent p { margin: 0; font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.gf-rent .gf-renth { font: 400 15px/1 "Radwave", var(--display); text-transform: uppercase; margin-bottom: 10px; color: var(--marigold); }
.gf-rent a { color: var(--cream); font-weight: 600; text-decoration: underline; text-decoration-color: var(--marigold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gf-rent a:hover, .gf-rent a:focus-visible { color: var(--marigold); }

/* ============ GroupFit41 page: its own loud look (Radwave type, purple/teal, lavender neumorphic sections) ============ */
body:has(.gf-theme) .light { --bg: #ECE7F5; --hi: #FFFFFF; --lo: #C9BEDF; --deep: #4A3F66; background: var(--bg); }
body:has(.gf-theme) .phero h1 { font: 400 clamp(44px, 8.4vw, 120px)/1 "Radwave", var(--display); letter-spacing: -.01em; }
body:has(.gf-theme) .light h2, body:has(.gf-theme) .band .gpanel h2 { font: 400 clamp(30px, 4.8vw, 66px)/1.04 "Radwave", var(--display); letter-spacing: -.01em; }
body:has(.gf-theme) .svc h3, body:has(.gf-theme) .card h3 { font-family: "Radwave", var(--display); font-weight: 400; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.15; }
body:has(.gf-theme) .light .eyebrow { color: #6A4FC9; }
body:has(.gf-theme) footer.sitefoot h2.fh { font-family: "Radwave", var(--display); font-weight: 400; }
body:has(.gf-theme) .light a:not(.button):not(.more) { color: #5B3FD6; }
.gf-rentpanel { padding: clamp(28px, 4vw, 52px); border-radius: 44px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px clamp(24px, 4vw, 56px); align-items: center; }
.gf-rentpanel .lead a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--flame); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gf-rentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gf-rentlist li { padding: 14px 18px; border-radius: 999px; font: 600 15px/1.2 var(--body); background: var(--bg); box-shadow: inset 4px 4px 10px var(--lo), inset -4px -4px 10px var(--hi); }
.gf-rentlist li::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #06BFA8; margin-right: 10px; box-shadow: 0 0 0 3px rgba(6,191,168,.22); }
.gf-rentpanel .ctas { grid-column: 1 / -1; margin: 0; }
@media (max-width: 860px) { .gf-rentpanel { grid-template-columns: minmax(0, 1fr); border-radius: 32px; } }
body:has(.gf-theme) .phero h1 { font-size: clamp(26px, 7.4vw, 112px); }
.gf-rentpanel h2 { font-size: clamp(28px, 3.5vw, 50px) !important; }

/* purple look-around button reused inline (teams & groups "Get in touch") */
.lookbtn.inline { position: relative; right: auto; bottom: auto; width: 214px; height: 56px; margin-top: 16px; font-size: 18px; }
.lookbtn.inline .char.state-2 { left: 66px; }
/* Radwave wordmark in the home "Lift with a crew" card */
.gcard h3 .rw { font: 400 clamp(26px, 3vw, 44px)/1.05 "Radwave", var(--display); letter-spacing: -.01em; }
.gcard h3 .rw .or { color: var(--flame); }
/* Train Your Clients prices */
.tyc-price { display: block; font: 700 clamp(44px, 5vw, 64px)/1 var(--display); margin: 2px 0 12px; }
.tyc-price small { font: 600 14px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; margin-left: 8px; opacity: .85; }
/* GroupFit41 band: photo column stretches so the two small photos line up with the bottom of the teams & groups note */
@media (min-width: 961px) {
  .gf-grid { align-items: stretch; }
  .gf-photos { grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
  
  .gf-ph1 { display: flex; flex-direction: column; } 
}
.gf-rent a.lookbtn, .gf-rent a.lookbtn:hover { text-decoration: none; color: inherit; }

/* gradients fade in over the solid colour instead of popping */
[data-sg] canvas { opacity: 0; transition: opacity .6s ease; }
[data-sg].on canvas { opacity: 1; }

/* Photo tickers: no mask on the moving strip (Safari drops or freezes masked, animated layers); soft fades are drawn on top instead.
   Each tile carries its own right margin so the two halves are exactly equal and the loop is seamless at every size. */
.pstrip .ptrack { -webkit-mask-image: none !important; mask-image: none !important; }
.pstrip .ptrack::before, .pstrip .ptrack::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 2; pointer-events: none; }
.pstrip .ptrack::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.pstrip .ptrack::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.pstrip ul { gap: 0 !important; animation-name: pslide2; will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.pstrip li { margin-right: 18px; }
@media (max-width: 760px) { .pstrip li { margin-right: 12px; } }
.pstrip li img { background: #DCCFBF; }
@keyframes pslide2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.pstrip.paused ul { animation-play-state: paused; }
/* reversed strip gets its own keyframes (no animation-direction: reverse), and no forced GPU layers: iPhones can blank large forced layers when memory is tight */
.pstrip ul { will-change: auto !important; backface-visibility: visible !important; transform: none; }
.pstrip.rev ul { animation-name: pslide2r !important; animation-direction: normal !important; }
@keyframes pslide2r { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.gf-ol { font-family: "Radwave Outline", "Radwave", var(--display); }
body:has(.gf-theme) .gf41 h1.gf-h { margin: 0; }
#hours { scroll-margin-top: calc(var(--head-h, 78px) + 16px); }
/* Power Academy logo badge in the page hero: dark inlay so the white and orange bolt read on the orange gradient */
.pa-logo { display: block; width: clamp(96px, 11vw, 132px); aspect-ratio: 1; margin: 4px 0 18px; padding: 14px; border-radius: 30px; background: var(--c-night);
  box-shadow: inset 4px 4px 10px rgba(0,0,0,.45), inset -3px -3px 8px rgba(255,255,255,.08), 0 10px 24px rgba(60,20,0,.25); box-sizing: border-box; }
.pa-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Power Academy schedule + head coach */
.pa-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.pa-day { padding: 22px 18px; border-radius: 32px; }
.pa-day h3 { font: 700 30px/1 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.pa-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pa-day li { padding: 12px 14px; border-radius: 18px; box-shadow: inset 4px 4px 10px var(--lo), inset -4px -4px 10px var(--hi); display: grid; gap: 4px; }
.pa-day li b { font: 600 14px/1.2 var(--body); color: var(--night); }
.pa-day li span { font-size: 13px; line-height: 1.35; color: var(--deep); }
@media (max-width: 1100px) { .pa-week { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .pa-week { grid-template-columns: 1fr; } }
.pa-coach { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; margin-top: 28px; }
.pa-bio { padding: clamp(22px, 3vw, 36px); border-radius: 40px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: start; }
.pa-bio p { margin: 0 0 14px; line-height: 1.6; text-wrap: pretty; }
.pa-head { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; filter: grayscale(1); border: 5px solid var(--hi); box-shadow: 8px 8px 20px var(--lo); }
.pa-sig { display: grid; gap: 2px; margin: 0 !important; } .pa-sig span { font-size: 14px; color: var(--deep); }
.pa-creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pa-creds li { padding: 14px 18px; border-radius: 22px; font: 600 14.5px/1.35 var(--body); background: var(--bg); box-shadow: inset 4px 4px 10px var(--lo), inset -4px -4px 10px var(--hi); }
.pa-creds li::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); margin-right: 10px; vertical-align: 1px; }
@media (max-width: 860px) { .pa-coach { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pa-bio { grid-template-columns: 1fr; } }

/* GroupFit41 "41" in the main brand orange (Kristian) */
.gf41 .gf41n, .gf41n, .gcard h3 .rw .or { color: var(--orange) !important; text-shadow: 0 0 18px rgba(236,110,0,.35); }
/* Room rental page */




.rr-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rr-steps li { padding: 28px; border-radius: 36px; }
.rr-steps b { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 400 22px/1 "Radwave", var(--display); color: #fff; background: linear-gradient(135deg, var(--orchid), #5B3FD6 55%, #0A9FC0); }
.rr-steps h3 { font: 400 18px/1.15 "Radwave", var(--display); text-transform: uppercase; margin: 16px 0 8px; }
.rr-steps p { margin: 0; line-height: 1.55; color: var(--deep); }
.rr-cta { margin-top: 36px; display: flex; justify-content: center; }
.lookbtn.rr-big { width: 240px; height: 62px; font-size: 20px; }
@media (max-width: 860px) {  .rr-steps { grid-template-columns: 1fr; } }

@media (min-width: 961px) and (max-width: 1180px) { .sitefoot .cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr); justify-content: stretch; column-gap: 24px; } }
/* crew card: plain brand orange 41, no glow (reads as true var(--orange)) */
.gcard h3 .rw .or { color: var(--orange) !important; text-shadow: none !important; }
/* Power Academy logo in place of its card title */
.gcard h3 .pa-wm { display: block; width: clamp(110px, 12vw, 150px); }
.gcard h3 .pa-wm img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
/* "CLASS TIMES" label above the weekday line */
.gf-schedk { margin: 0 0 8px; font: 700 12px/1 "Switzer", var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--marigold); }
/* CLASS TIMES: bigger, louder label */
.gf-schedk { font: 800 clamp(20px, 2.2vw, 28px)/1 "Switzer", var(--body) !important; letter-spacing: .14em !important; color: var(--marigold) !important; margin: 0 0 12px !important; text-shadow: 0 2px 14px rgba(255,196,0,.45), 0 1px 2px rgba(60,20,80,.35); }
/* Teams & groups: Get in touch + Learn more side by side */
.gf-rentbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.gf-rentbtns .lookbtn.inline { margin-top: 0; }
.gf-rent a.button, .gf-rent a.button:hover { text-decoration: none; color: inherit; }
@font-face { font-family: "Switzer"; src: url(Switzer-Extrabold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
.rr-cta { justify-content: flex-start !important; }
/* Power Academy logo, horizontal version (bolt beside the words) */
.pa-logo { width: clamp(230px, 26vw, 330px) !important; aspect-ratio: auto !important; padding: 18px 24px !important; border-radius: 24px !important; }
.pa-logo img { height: auto !important; }
.gcard h3 .pa-wm { width: clamp(220px, 22vw, 300px) !important; }
/* Dumbbell section never pins (Kristian): same layout as the old "done" state, from the start */
.stage { height: auto !important; }
.stage .stage-pin { position: relative !important; top: 0 !important; height: min(calc(100svh - var(--head-h, 78px)), 860px) !important; }
@media (max-width: 760px) { .stage .stage-pin { height: min(calc(100svh - var(--head-h, 78px)), 720px) !important; } }
/* Power Academy hero: the logo IS the title (no repeated words) */


/* Class times: "Monday to Friday" and "45 minute classes" at the same size */
.gf-schedh { align-items: center; }
.gf-schedh b, .gf-schedh span { font: 400 clamp(18px, 1.8vw, 22px)/1.1 "Radwave", var(--display) !important; letter-spacing: 0 !important; text-transform: uppercase; opacity: 1 !important; }
/* Power Academy hero: the original square logo as the title */
.pa-logo.pa-logo-sq { width: clamp(170px, 17vw, 230px) !important; aspect-ratio: 1 !important; padding: 18px !important; border-radius: 30px !important; margin: 6px 0 6px !important; }
.pa-logo.pa-logo-sq img { width: 100%; height: 100% !important; object-fit: contain; }
@media (max-width: 760px) { .pa-logo.pa-logo-sq { width: 160px !important; border-radius: 26px !important; } }
.button .igb { display: inline-flex; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.button .igb svg { width: 100%; height: 100%; }
.button i.igb { display: inline-block; width: 17px; height: 17px; margin-right: 7px; vertical-align: -3px; font-style: normal; }
.button i.igb svg { width: 100%; height: 100%; display: block; }
.phero .ctas:has(.button + .button + .button + .button) { flex-wrap: wrap; }
@media (max-width: 560px) {
  .phero .ctas:has(.button + .button + .button + .button) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .phero .ctas:has(.button + .button + .button + .button) .button { width: 100%; margin: 0; }
  .phero .ctas:has(.button + .button + .button + .button) .button-outer, .phero .ctas:has(.button + .button + .button + .button) .button-inner { width: 100%; box-sizing: border-box; }
  .phero .ctas:has(.button + .button + .button + .button) .button-inner { padding-inline: 10px; justify-content: center; text-align: center; }
  .phero .ctas:has(.button + .button + .button + .button) .button-inner span { white-space: nowrap; font-size: 15px; }
}
.button .button-inner:has(> i.igb) { display: flex; align-items: center; justify-content: center; }
.button .button-inner > i.igb { position: relative; z-index: 4; color: #4C4741; }
/* Power Academy: bigger square logo */
.pa-logo.pa-logo-sq { width: clamp(260px, 25vw, 360px) !important; padding: 22px !important; border-radius: 40px !important; }
@media (max-width: 760px) { .pa-logo.pa-logo-sq { width: min(100%, 250px) !important; border-radius: 32px !important; } }
/* Follow Power Academy (same round button as the footer socials) */
.pa-follow { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.pa-follow > span { font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--deep); }
/* Dave's photos in the platform row */
.pa-ph { border-radius: 40px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 10px 10px 26px var(--lo, rgba(0,0,0,.18)), -8px -8px 22px var(--hi, rgba(255,255,255,.7)); }
.pa-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-ph:nth-child(1) img { object-position: 50% 40%; } .pa-ph:nth-child(2) img { object-position: 55% 50%; } .pa-ph:nth-child(3) img { object-position: 50% 30%; }
@media (max-width: 760px) { .pa-ph { aspect-ratio: 4 / 3; border-radius: 30px; } .pa-ph:nth-child(3) img { object-position: 50% 22%; } }
/* Dave: bigger black and white portrait */
.pa-bio { grid-template-columns: clamp(170px, 16vw, 220px) minmax(0, 1fr) !important; gap: clamp(22px, 2.6vw, 34px) !important; }
.pa-head { width: 100% !important; height: auto !important; aspect-ratio: 1; border-radius: 50% !important; }
@media (max-width: 520px) { .pa-bio { grid-template-columns: 1fr !important; } .pa-head { width: 200px !important; } }
.pa-bio { grid-template-columns: 1fr !important; }
.pa-head { width: clamp(200px, 17vw, 240px) !important; }
@media (max-width: 520px) { .pa-head { width: 190px !important; } }
/* more breathing room around the Power Academy logo */
.pa-logo.pa-logo-sq { padding: clamp(44px, 4.4vw, 64px) !important; }
@media (max-width: 760px) { .pa-logo.pa-logo-sq { padding: 36px !important; } }
/* GroupFit41 band: real second floor photo in the big frame */
.gf-ph.gf-real { aspect-ratio: 16 / 10; border-radius: 36px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.4); box-shadow: 14px 14px 36px rgba(30,10,60,.3); }
.gf-ph.gf-real img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; display: block; }
@media (max-width: 760px) { .gf-ph.gf-real { aspect-ratio: 4 / 3; border-radius: 28px; } }
.gf-ph.gf-real { position: relative; min-height: 0; height: auto; }
.gf-ph.gf-real img { position: absolute; inset: 0; }
@media (min-width: 961px) { .gf-ph.gf-real { aspect-ratio: auto; height: 100%; min-height: 280px; } }
/* GroupFit41 band: all three frames are real photos now */
.gf-ph2.gf-real, .gf-ph3.gf-real { aspect-ratio: 4 / 3; width: 100%; height: auto; min-width: 0; }
/* GroupFit41 gallery */
.gf-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: 44px; }
.gf-gallery figure { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 2 / 3; box-shadow: 10px 10px 24px var(--lo, rgba(0,0,0,.18)), -8px -8px 20px var(--hi, rgba(255,255,255,.7)); }
.gf-gallery a { display: block; height: 100%; }
.gf-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gf-gallery a:hover img, .gf-gallery a:focus-visible img { transform: scale(1.04); }
@media (max-width: 960px) { .gf-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gf-gallery figure { border-radius: 20px; } }
/* Masthead photo: two main floor shots that cross-fade; hover jumps to the second */
.copy-side img { object-position: 50% 55%; }
.copy-side img.alt { opacity: 0; animation: mfswap 12s ease-in-out infinite; transition: opacity .6s ease; }
@keyframes mfswap { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
.copy-side:hover img.alt { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .copy-side img.alt { animation: none; } }
/* Masthead photos: full colour, slow cross-fade (driven by site.js) */
.copy-side img { filter: none !important; }
.copy-side img.alt { animation: none !important; opacity: 0; transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1); }
.copy-side:hover img.alt { opacity: 0; }
.copy-side.b img.alt { opacity: 1 !important; }
/* Cardio photos: three by three */
.cardio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: 48px; }
.cardio-grid figure { margin: 0; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; box-shadow: 10px 10px 24px var(--lo, rgba(0,0,0,.18)), -8px -8px 20px var(--hi, rgba(255,255,255,.7)); }
.cardio-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .cardio-grid { gap: 8px; } .cardio-grid figure { border-radius: 18px; } }
/* faint divider between Cardio and Built for lifting (same 1px tone as the title bar outline) */
#cardio { position: relative; }
#cardio::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }
/* trainers: fixed row lengths so nobody ends up alone (13 = 7+6 wide, 5+5+3 narrower) */
@media (min-width: 961px) { .track ul { max-width: calc(5 * 140px + 4 * 22px); margin-inline: auto; } }
@media (min-width: 1240px) { .track ul { max-width: calc(7 * 140px + 6 * 22px); } }
/* Room rental photo grid: real second floor photos */



/* GroupFit41 class times: MONDAY TO FRIDAY much bigger */
.gf-schedh b { font-size: clamp(30px, 3.3vw, 46px) !important; line-height: 1 !important; }
.gf-schedh span { font-size: clamp(16px, 1.5vw, 20px) !important; }
.gf-schedh b { font-size: clamp(26px, 2.5vw, 38px) !important; white-space: nowrap; }
@media (max-width: 560px) { .gf-schedh b { font-size: 24px !important; } }
@media (max-width: 370px) { .gf-schedh b { font-size: 21px !important; } }
/* MONDAY TO FRIDAY fills the full width of the class times box on every screen */
.gf-sched { container-type: inline-size; }
.gf-schedh b { font-size: 7.8cqi !important; white-space: nowrap; }
@media (max-width: 560px) { .gf-schedh b { font-size: 7.8cqi !important; } }
@media (max-width: 370px) { .gf-schedh b { font-size: 7.8cqi !important; } }
/* crew cards: two buttons side by side */
.gc-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.gc-btns .button { margin: 0; }
/* Room rental hero: "Book the space" box sits level with the second row of photos (desktop) */
@media (min-width: 961px) {
  #rental-hero .gf-copy { display: flex; flex-direction: column; }
  #rental-hero .gf-copy > .gf-rent { margin-top: auto; }
  #rental-hero .gf-photos { grid-template-rows: minmax(0, 1fr) var(--rent-h, auto); }
  #rental-hero .gf-ph2.gf-real, #rental-hero .gf-ph3.gf-real { aspect-ratio: auto; height: 100%; min-height: 0; }
}
/* room rental: same faint divider as the home page, between its sand sections */
#rental-hero ~ .light + .light { position: relative; }
#rental-hero ~ .light + .light::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }
/* room rental: divider between "Three steps to train" and the footer */
main:has(#rental-hero) ~ .sitefoot { position: relative; }
main:has(#rental-hero) ~ .sitefoot::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }
/* GroupFit41 page: same faint dividers between back-to-back sand sections and above the footer */
main:has(.gf-theme) > .light + .light { position: relative; }
main:has(.gf-theme) > .light + .light::before, main:has(.gf-theme) > .light:last-child ~ x, main:has(.gf-theme):has(> .light:last-child) ~ .sitefoot::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }
main:has(.gf-theme):has(> .light:last-child) ~ .sitefoot { position: relative; }
/* GroupFit41 page: tighter spacing between sections (was 120px top and bottom) */
main:has(#second-floor) > section.light { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 760px) { main:has(#second-floor) > section.light { padding-top: 56px; padding-bottom: 56px; } }
/* room rental hero: the plate photo shows the weight, not the window */
#rental-hero .gf-ph2.gf-real img { object-position: 50% 50%; }
/* How to find us: looping drive-in clip in the footer, opens a popup player */
.findvid .fv-btn { all: unset; box-sizing: border-box; display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; cursor: pointer; padding: 0 !important; background: var(--c-night); }
.findvid .fv-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.findvid .fv-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.findvid .fv-btn:hover .fv-loop { transform: scale(1.03); }
.findvid .fv-tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
  font: 600 13px/1 var(--body); color: #fff; background: rgba(41,38,34,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); }
.findvid .fv-tag i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); font-size: 9px; padding-left: 2px; box-sizing: border-box; }
dialog.vpop { padding: 0; border: 0; background: transparent; width: min(1100px, calc(100vw - 32px)); max-width: none; overflow: visible; }
dialog.vpop::backdrop { background: rgba(20,18,16,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.vpop video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
dialog.vpop .vclose { position: absolute; top: -18px; right: -18px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c-bg); color: var(--c-night); font: 600 22px/1 var(--body);
  box-shadow: 4px 4px 12px rgba(0,0,0,.35); }
dialog.vpop .vclose:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 560px) { dialog.vpop .vclose { top: -54px; right: 0; } dialog.vpop video { border-radius: 14px; } }
.gf-rentpanel .lead .gf-rentnote { color: #5B3FD6; font-weight: 600; text-decoration: underline; text-decoration-color: var(--flame); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* GroupFit41 band, mid-size screens: keep the three buttons (and the two rental buttons) side by side */
@media (min-width: 961px) and (max-width: 1279px) {
  .gf41 .gf-copy .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex-wrap: nowrap; }
  .gf41 .gf-copy .actions .button { width: 100%; margin: 0; min-width: 0; }
  .gf41 .gf-copy .actions .button-outer, .gf41 .gf-copy .actions .button-inner { width: 100%; box-sizing: border-box; }
  .gf41 .gf-copy .actions .button-inner { padding-left: 8px !important; padding-right: 8px !important; justify-content: center; text-align: center; }
  .gf41 .gf-copy .actions .button-inner span { white-space: nowrap; font-size: 14px; }
  .gf41 .gf-rentbtns { flex-wrap: nowrap; gap: 10px; }
  .gf41 .gf-rentbtns .lookbtn { flex: 1 1 0; min-width: 0; }
}
/* How to find us tag: sits between the turn chevrons and the bottom-left location overlay */
.findvid .fv-tag { bottom: 21%; }
@media (max-width: 560px) { .findvid .fv-tag { bottom: 21%; padding: 6px 10px 6px 7px; font-size: 11px; gap: 6px; } .findvid .fv-tag i { width: 17px; height: 17px; font-size: 7px; } }
/* embedded portal pages: back button on the left of the bar */
.embedback { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; color: var(--c-night); text-decoration: none; white-space: nowrap;
  background: var(--bg, var(--c-bg)); box-shadow: var(--neu-out-sm); }
.embedback svg { width: 16px; height: 16px; }
.embedback:hover, .embedback:focus-visible { box-shadow: inset 3px 3px 8px var(--c-lo), inset -3px -3px 8px var(--c-hi); outline: none; }
.embedbar .embedlbl { margin-right: auto; }
@media (max-width: 520px) { .embedbar .embedsub { display: none; } }
@media (max-width: 380px) { .embedbar .eo-l { display: none; } .embedbar { gap: 8px; } }
/* virtual tour: two-photo platforms row */
.plats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plats.two .pa-ph { aspect-ratio: 1; }
@media (max-width: 760px) { .plats.two { grid-template-columns: 1fr; } .plats.two .pa-ph { aspect-ratio: 4 / 5; } }
/* main floor gallery, virtual tour */
.fl-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
.fl-ph{margin:0;aspect-ratio:2/3;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(41,38,34,.45)}
.fl-ph img{width:100%;height:100%;object-fit:cover;display:block}
.fl-gallery:not(.open) .fl-more{display:none}
.fl-morebtn{display:flex;justify-content:center;margin-top:32px}
@media (max-width:960px){.fl-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.fl-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}.fl-ph{border-radius:16px}}
.fl-toggle{border:0;background:none;padding:0;font:inherit;cursor:pointer}
/* virtual tour: faint divider lines between sections and above the footer */
main:has(#machines.light) > .light + .light, main:has(#machines.light) ~ .sitefoot { position: relative; }
main:has(#machines.light) > .light + .light::before, main:has(#machines.light) ~ .sitefoot::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }
/* rotating photos, home masthead + virtual tour hero */
.copy-side img.rot, .gside img.rot { filter: none !important; animation: none !important; opacity: 0; transition: opacity 1.6s cubic-bezier(.4,0,.2,1); object-position: 50% 50%; }
.copy-side img.rot.on, .gside img.rot.on { opacity: 1 !important; }
/* gallery photos: slight zoom on hover, not clickable */
.gf-gallery img, .fl-ph img, .cardio-grid img, .plats .pa-ph img { transition: transform .5s ease; }
.gf-gallery figure:hover img, .fl-ph:hover img, .cardio-grid figure:hover img, .cardio-grid > *:hover > img, .plats .pa-ph:hover img { transform: scale(1.04); }
.fl-ph, .cardio-grid > *, .plats .pa-ph { overflow: hidden; }
/* virtual tour gallery tiles match the GroupFit41 gallery exactly */
.fl-gallery { gap: clamp(12px, 1.6vw, 22px); margin-top: 44px; }
.fl-ph { border-radius: 28px; box-shadow: 10px 10px 24px var(--lo, rgba(0,0,0,.18)), -8px -8px 20px var(--hi, rgba(255,255,255,.7)); }
.fl-ph img { transition: transform .5s ease; }
.fl-ph:hover img { transform: scale(1.04); }
@media (max-width: 560px) { .fl-gallery { gap: 10px; } .fl-ph { border-radius: 20px; } }

.gf-gallery:not(.open) .g-more { display: none; }
.chead { grid-template-columns: 1fr !important; }
/* page headers: wireframe gym objects inside the glass panel, under the text */
.phero .gpanel:has(.wirebox) { position: relative; }
.phero .gpanel:has(.wirebox) > :not(.wirebox) { position: relative; z-index: 1; }
.wirebox { position: absolute; z-index: 0; pointer-events: none; top: 46%; right: 1%; width: min(58vh, 42%); aspect-ratio: 1; transform: translateY(-50%); }
.wireGL { position: absolute; inset: 0; }
.wireGL canvas { width: 100% !important; height: 100% !important; display: block; }
.gpanel.withphoto .wirebox { width: min(34vh, 24%); right: auto; left: 31%; top: 32%; }
@media (max-width: 960px) { .wirebox, .gpanel.withphoto .wirebox { width: 62%; left: auto; right: -14%; top: 20%; opacity: .35; } }
/* behind the glass, huge, like the home masthead plate */
.phero .inner { position: relative; z-index: 1; }
.wirebox.behind { z-index: 0; top: 50%; left: 50%; right: auto; width: min(100vh, 940px); transform: translate(-22%, -50%); opacity: 1; }
@media (max-width: 960px) { .wirebox.behind { width: 140vw; left: auto; right: -62vw; top: 40%; transform: translateY(-50%); opacity: 1; } }
.about-photo img { filter: none !important; object-position: 50% 45%; }
/* about page: faint divider above the footer, like the other pages */
main:has(img[src="img/about-hero.jpg"]) > .light + .light, main:has(img[src="img/about-hero.jpg"]) ~ .sitefoot { position: relative; }
main:has(img[src="img/about-hero.jpg"]) > .light + .light::before, main:has(img[src="img/about-hero.jpg"]) ~ .sitefoot::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }
/* about: kettlebell breaks out past the right edge of the glass, like the home plate */
.wirebox.behind { width: min(112vh, 1040px); transform: translate(-6%, -50%); }
@media (max-width: 960px) { .wirebox.behind { width: 150vw; right: -70vw; left: auto; top: 46%; transform: translateY(-50%); } }
/* bench: much bigger, it's a wide object */
.wirebox:has([data-wire="bench"]) { width: min(88vh, 62%); right: -5%; top: 50%; }
@media (max-width: 960px) { .wirebox:has([data-wire="bench"]) { width: 90%; right: -26%; top: 22%; } }
/* medicine ball: bigger */
.wirebox:has([data-wire="medball"]) { width: min(76vh, 54%); right: -4%; top: 50%; }
@media (max-width: 960px) { .wirebox:has([data-wire="medball"]) { width: 80%; right: -26%; top: 18%; } }
/* rope behind the glass: lies diagonally so the whole rope fits the shorter header */
.wirebox.behind:has([data-wire="rope"]) { width: min(118vh, 1080px); transform: translate(-12%, -50%); }
/* contact: pulldown rope much bigger */
.wirebox:not(.behind):has([data-wire="rope"]) { width: min(86vh, 54%); right: -6%; top: 50%; }
@media (max-width: 960px) { .wirebox:not(.behind):has([data-wire="rope"]) { width: 80%; right: -24%; top: 22%; } }
/* train your clients: rope behind the glass, sized to the header */
.wirebox.behind:has([data-wire="rope"]) { width: min(96vh, 880px); transform: translate(-8%, -50%); }
/* room rental gallery spacing */
#rental-hero ~ .light .gf-gallery { margin-top: 44px; }
/* behind-the-glass objects: much bigger, running off the right edge of the screen like the home plate */
.wirebox.behind { width: min(165vh, 1500px); transform: translate(-10%, -50%); }
.wirebox.behind:has([data-wire="rope"]) { width: min(160vh, 1450px); transform: translate(-14%, -50%); }
@media (max-width: 960px) { .wirebox.behind, .wirebox.behind:has([data-wire="rope"]) { width: 190vw; right: -95vw; left: auto; top: 46%; transform: translateY(-50%); } }
@media (max-width: 960px) { .wirebox.behind, .wirebox.behind:has([data-wire="rope"]) { width: 170vw; right: -78vw; top: 50%; } }
/* behind-the-glass objects: bigger still, shifted left */
@media (min-width: 961px) {
  .wirebox.behind { width: min(225vh, 2050px); transform: translate(-36%, -50%); }
  .wirebox.behind:has([data-wire="rope"]) { width: min(215vh, 1950px); transform: translate(-38%, -50%); }
}
/* about: story text box fills the column beside the photo, words centred top to bottom */
@media (min-width: 961px) { .split.story:has(.about-photo) .sleft .prose { flex: 1; margin-top: 0; display: flex; flex-direction: column; justify-content: center; } }
/* bench: bigger and further left */
@media (min-width: 961px) { .wirebox:has([data-wire="bench"]) { width: min(112vh, 80%); right: 6%; top: 52%; } }
@media (min-width: 961px) { .wirebox:has([data-wire="bench"]) { width: min(140vh, 98%); right: 1%; top: 50%; } }
@media (min-width: 961px) { .wirebox:has([data-wire="medball"]) { width: min(118vh, 84%); right: 4%; top: 50%; } }
@media (min-width: 961px) { .wirebox:has([data-wire="medball"]) { right: -1%; } }
/* train your clients: real photo, story text box fills the column like About */
.tyc-photo img { filter: none !important; object-position: 50% 60%; }
@media (min-width: 961px) { .split.story:has(.tyc-photo) .sleft .prose { flex: 1; margin-top: 0; display: flex; flex-direction: column; justify-content: center; } }
@media (min-width: 961px) { .wirebox:not(.behind):has([data-wire="rope"]) { width: min(135vh, 94%); right: 8%; top: 50%; } }
@media (min-width: 961px) { .wirebox:not(.behind):has([data-wire="rope"]) { width: min(118vh, 82%); right: -6%; top: 52%; } }
.pstrip ul { animation-duration: 91s; }
/* join online: branded loading card over the Antaris frame until it loads */
.embed { position: relative; }
.embedwait { position: absolute; left: 0; right: 0; bottom: 0; top: var(--embedbar-h, 52px); display: grid; place-items: center; background: var(--sand, var(--c-bg)); z-index: 2; transition: opacity .5s ease, visibility .5s; }
.embed.ready .embedwait { opacity: 0; visibility: hidden; pointer-events: none; }
.embedwait-card { padding: 30px 34px; border-radius: 36px; display: grid; gap: 14px; max-width: 420px; text-align: left; }
.embedwait-card b { font: 700 clamp(30px, 4vw, 44px)/.95 var(--display); text-transform: uppercase; }
.embedwait { background: var(--c-bg); }
.embedwait-card { width: min(440px, calc(100% - 32px)); box-sizing: border-box; }
.embedwait-card .handoff-bar { width: 100%; margin: 0; }
/* class times: the Join online loader, laid over the page until the schedule is revealed */
.handoff-over { position: fixed; left: 0; right: 0; bottom: 0; top: var(--head-h, 78px); z-index: 50; min-height: 0; overflow: auto; transition: opacity .5s ease, visibility .5s; }
.handoff-over.gone { opacity: 0; visibility: hidden; pointer-events: none; }
/* top menu: five buttons (Kristian, Nov 3). Phones: 3 on top, 2 below; desktop stays one row */
@media (max-width: 640px) {
  .topbar .nav { flex-wrap: wrap; border-radius: 30px; row-gap: 8px; }
  .topbar .nav a { flex: 1 1 26%; padding-inline: 8px; }
  /* short labels on the top row, the two long ones share the second */
  .topbar .nav a:nth-child(5) { order: 3; }
  .topbar .nav a:nth-child(3), .topbar .nav a:nth-child(4) { order: 4; flex-basis: 40%; }
}
@media (min-width: 641px) and (max-width: 1180px) {
  .topbar .nav { gap: 8px; }
  .topbar .nav a { padding: 11px 13px; font-size: 13px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .topbar .nav { width: 100%; justify-content: space-between; }
  .topbar .nav a { flex: 1 1 auto; text-align: center; }
}
/* status pill: room for two staffed blocks on small phones */
@media (max-width: 420px) { .status-text { letter-spacing: 0.05em; } }

/* hero banner + virtual tour loop: 16:9 on desktop, vertical 9:16 file on phones */
.vt-vid { aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .vt-vid { aspect-ratio: 9 / 16; max-height: 82vh; margin-inline: auto; }
  .video video { height: min(82vh, 177.78vw); object-position: 50% 50%; }
}


/* Memberships header, phones only: bench fully in frame, further left and darker (it read washed out) */
@media (max-width: 960px) { .phero .wirebox:has([data-wire="bench"]) { right: -10%; width: 108%; top: 30%; opacity: 1; filter: brightness(.55) contrast(1.25); } }

/* Glass over a big wireframe (About kettlebell, Train your clients rope): light blur like the home masthead so the object shows through */
.phero:has(> .wirebox.behind) .gpanel { -webkit-backdrop-filter: blur(1.2px) saturate(1.3); backdrop-filter: blur(1.2px) saturate(1.3); background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)); }

/* Personal training header, phones only: medicine ball fully in frame, further left and darker (same treatment as the Memberships bench) */
@media (max-width: 960px) { .phero .wirebox:has([data-wire="medball"]) { right: -5%; width: 70%; top: 35%; opacity: 1; filter: brightness(.55) contrast(1.25); } }

/* Phones: button groups always sit side by side (2 across, 3 across when there are three), smaller labels that can wrap to two lines */
@media (max-width: 640px) {
  .ctas, .ctas.stacked, .actions, .actions.stacked, .gc-btns, .gf41 .gf-copy .actions {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
    width: 100% !important; max-width: 100%; justify-self: stretch; justify-items: stretch; flex-wrap: nowrap; }
  :is(.ctas, .actions, .gc-btns):has(> .button:nth-child(3)):not(:has(> .button:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  :is(.ctas, .actions, .gc-btns) > .button { width: 100% !important; min-width: 0 !important; margin: 0 !important; display: flex; }
  :is(.ctas, .actions, .gc-btns) > .button .button-outer { width: 100%; box-sizing: border-box; display: flex; }
  :is(.ctas, .actions, .gc-btns) > .button .button-inner { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;
    padding-left: 10px !important; padding-right: 10px !important; }
  :is(.ctas, .actions, .gc-btns) > .button .button-inner span { white-space: normal !important; font-size: 14px; line-height: 1.15; text-wrap: balance; }
  :is(.ctas, .actions, .gc-btns):has(> .button:nth-child(3)) > .button .button-inner { padding-left: 6px !important; padding-right: 6px !important; }
  :is(.ctas, .actions, .gc-btns):has(> .button:nth-child(3)) > .button .button-inner span { font-size: 12.5px; }
}

/* Trainer rows that scroll (phones and tablets): arrow on the right edge and a swipe cue under the row */
.trackwrap { position: relative; }
.trackarrow, .swipecue { display: none; }
@media (max-width: 960px) {
  .trackwrap .track { margin-top: 44px; }
  .trackarrow { display: grid; place-items: center; position: absolute; right: -6px; top: calc(44px + 50% + 34px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--orange); color: #fff; box-shadow: 0 6px 16px rgba(41,38,34,.28); transition: opacity .3s ease; animation: trk-nudge 1.6s ease-in-out infinite; }
  .trackarrow i { width: 10px; height: 10px; border-right: 2.5px solid #fff; border-top: 2.5px solid #fff; transform: translateX(-2px) rotate(45deg); }
  .swipecue { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px 0 0; font: 600 13px/1.2 var(--body); letter-spacing: .04em; color: var(--deep); transition: opacity .3s ease; }
  .swipecue b { color: var(--orange); font-size: 17px; animation: trk-nudge-x 1.6s ease-in-out infinite; }
  .trackwrap.at-end .trackarrow { opacity: 0; pointer-events: none; }
  .trackwrap.scrolled .swipecue { opacity: .45; }
}
@keyframes trk-nudge { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(4px); } }
@keyframes trk-nudge-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .trackarrow, .swipecue b { animation: none; } }

/* Contact header, phones: pull-down rope lower, further left, bigger and darker */
@media (max-width: 960px) { .phero .wirebox:not(.behind):has([data-wire="rope"]) { right: -28%; width: 134%; top: 0; transform: none; margin-top: calc(-12px - 3.8%); opacity: 1; filter: brightness(.5) contrast(1.3); } }

/* Train your clients: the upright rope sits a little smaller and lower so the top mount and both handles are in view; on phones it moves in from the edge */
.wirebox.behind:has([data-wire="rope"]) { width: min(118vh, 1100px); top: 58%; }
@media (max-width: 960px) { .wirebox.behind:has([data-wire="rope"]) { width: 150vw; right: -52vw; top: 47%; } }

/* GroupFit41 band: the three class buttons in brand yellow (trial) */
.gf41 .gf-copy .actions .button-inner { background-image: linear-gradient(135deg, #FFDB5C, #F2B200); }
/* Power Academy: the two platform photos sit first, then the three lifting shots */
.plats.two + .plats.pa-plats2 { margin-top: clamp(20px, 2.6vw, 36px); }

/* Virtual tour header, phones: more room around the intro text, and a small version of the rotating photo between the text and the button */
@media (max-width: 960px) {
  .gpanel.withphoto { display: flex !important; flex-direction: column; justify-content: flex-start !important; gap: 0 !important; }
  .gpanel.withphoto .gmain { display: contents; }
  .gpanel.withphoto .gmain > * { order: 1; flex: none !important; }
  .gpanel.withphoto .gmain > .eyebrow { margin-bottom: 14px !important; }
  .gpanel.withphoto .gmain > .rule { margin: 18px 0 !important; }
  .gpanel.withphoto .gmain > .lead2 { padding-top: 20px; padding-bottom: 20px; }
  .gpanel.withphoto .gside.rotset { display: block !important; order: 2; flex: none; min-height: 0 !important; height: 124px; margin-top: 18px; border-radius: 24px; }
  .gpanel.withphoto .gmain > .ctas { order: 3; margin-top: 18px !important; padding-top: 0 !important; }
}

/* Personal training + Q&A headers, desktop and tablet: medicine ball lower and further right so it clears the heading */
@media (min-width: 961px) { .phero .wirebox:has([data-wire="medball"]) { top: 42%; right: -5%; } }
@media (min-width: 641px) and (max-width: 960px) { .phero .wirebox:has([data-wire="medball"]) { right: -6%; width: 52%; top: 40%; } }

/* Contact header: rope bigger and a little lower (desktop; phones already set above) */
@media (min-width: 961px) { .phero .wirebox:not(.behind):has([data-wire="rope"]) { width: min(118vh, 74%); top: 60%; right: -6%; } }

/* ---- Kristian review round (Nov 4) ---- */
/* contact: front desk hours inside the "Other ways" box */
.ct-hours { display: flex; flex-direction: column; gap: 6px; }
.ct-hours .hrs { font-size: 15px; }
.ct-hours .hrs th, .ct-hours .hrs td { padding: 9px 0; }
.ct-hours .hrs td { text-align: right; }
.ct-hours .hrs tr:last-child th, .ct-hours .hrs tr:last-child td { border-bottom: 0; }
/* Q&A: staffed hours as a list */
.qa-hrs { margin: 2px 0 14px; max-width: 460px; font-size: 15.5px; }
.qa-hrs th, .qa-hrs td { padding: 9px 0; }
.qa-hrs td { text-align: right; }
/* room rental hero: each photo cross-fades through the space photos */
.gf-ph.rotset img.rot { opacity: 0; transition: opacity 1.6s cubic-bezier(.4,0,.2,1); }
.gf-ph.rotset img.rot.on { opacity: 1; }
.gf-ph .ph-more { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
  font: 600 13px/1 var(--body); color: #fff; text-decoration: none; background: rgba(41,38,34,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); }
.gf-ph .ph-more i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); font-size: 12px; }
.gf-ph .ph-more:hover, .gf-ph .ph-more:focus-visible { background: rgba(41,38,34,.75); }
@media (max-width: 560px) { .gf-ph .ph-more { left: 12px; bottom: 12px; padding: 7px 11px 7px 8px; font-size: 12px; } .gf-ph .ph-more i { width: 19px; height: 19px; font-size: 11px; } }

/* ---- trainer bio pop-up (personal training · Kristian first) ---- */
.coach .ph.has-bio { position: relative; }
/* bio badge: orange pill on the photo; "i" slides away and "Bio" slides out to the left (like the purple back-to-top button) */
.coach .ph.has-bio { overflow: visible; }
.coach .ph.has-bio .phc { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; font-style: normal; }
.coach .biotag { position: absolute; right: -4px; bottom: 2px; height: 34px; width: 34px; border-radius: 34px; overflow: hidden; display: block; font-style: normal;
  background: var(--orange); color: #fff; box-shadow: 0 0 0 3px rgba(236,110,0,0.22), 0 6px 14px rgba(0,0,0,0.22); transition: width .3s ease, background-color .3s ease; }
.coach .biotag em, .coach .biotag u { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; text-decoration: none; color: #fff; transition: transform .35s ease, opacity .3s ease; }
.coach .biotag em { font: 700 16px/1 var(--body); }
.coach .biotag u { font: 700 14px/1 var(--body); letter-spacing: .03em; opacity: 0; transform: translateY(-120%); }
.coach .biotag.out, .coach a.ph:focus-visible .biotag { width: 58px; background: #F27A12; }
.coach .biotag.out em, .coach a.ph:focus-visible .biotag em { transform: translateY(200%); opacity: 0; }
.coach .biotag.out u, .coach a.ph:focus-visible .biotag u { transform: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .coach a.ph:hover .biotag { width: 58px; background: #F27A12; }
  .coach a.ph:hover .biotag em { transform: translateY(200%); opacity: 0; }
  .coach a.ph:hover .biotag u { transform: none; opacity: 1; }
}
@media (max-width: 1100px) { .coach .biotag { height: 30px; width: 30px; right: -6px; bottom: 0; } .coach .biotag em { font-size: 15px; } .coach .biotag u { font-size: 13px; }
  .coach .biotag.out, .coach a.ph:focus-visible .biotag { width: 52px; } }
@media (max-width: 640px) { .coach .biotag { right: -8px; bottom: -2px; } }
@media (prefers-reduced-motion: reduce) { .coach .biotag, .coach .biotag em, .coach .biotag u { transition: none; } }
dialog.biopop { padding: 0; border: 0; background: transparent; width: min(980px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: visible; }
dialog.biopop::backdrop { background: rgba(20,18,16,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.biopop[open] { animation: biopop-in .32s cubic-bezier(.2,.8,.2,1); }
@keyframes biopop-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.bio-card { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); background: var(--c-bg); border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); max-height: calc(100dvh - 32px); }
.bio-ph { margin: 0; min-height: 100%; background: #ddd; }
.bio-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; filter: grayscale(1); }
.bio-copy { padding: clamp(26px, 3.4vw, 46px); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bio-copy .eyebrow { margin: 0 0 10px; }
.bio-copy h2 { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: clamp(38px, 4.4vw, 58px); line-height: .92; color: var(--c-night); }
.bio-copy .rule { margin: 18px 0 20px; }
.bio-text p { margin: 0 0 14px; font-size: 16px; line-height: 1.62; color: #45403A; }
.bio-text p:last-child { margin-bottom: 0; }
#bio-kristian .bio-text p:last-child { font-style: italic; color: var(--c-night); }
.bio-acts { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 4px; }
.bio-close { all: unset; cursor: pointer; padding: 15px 24px; border-radius: 999px; font: 600 15px/1 var(--body); color: var(--c-night); background: var(--c-bg);
  box-shadow: 6px 6px 14px rgba(160,140,115,.45), -6px -6px 14px rgba(255,253,248,.85); }
.bio-close:hover { color: var(--orange); }
.bio-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 760px) {
  dialog.biopop { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .bio-card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100dvh - 24px); border-radius: 24px; }
  .bio-ph { height: min(44vh, 360px); min-height: 0; }
  .bio-ph img { object-position: 50% 18%; }
  .bio-copy { padding: 24px 22px 22px; }
  .bio-text p { font-size: 15px; line-height: 1.58; }
  .bio-acts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-top: 22px; position: sticky; bottom: -22px; background: var(--c-bg); padding: 12px 0 2px; }
  .bio-acts::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; background: linear-gradient(rgba(239,230,218,0), var(--c-bg)); pointer-events: none; }
  .bio-acts .button-inner span { white-space: nowrap; font-size: 15px; }
  .bio-acts .button, .bio-acts .button-outer, .bio-acts .button-inner { width: 100%; box-sizing: border-box; }
  .bio-acts .button-inner { justify-content: center; text-align: center; padding-inline: 10px; }
  .bio-close { text-align: center; }
}
/* Q&A keeps its ball a little further right on phones so it clears "ANSWERED." */
@media (max-width: 640px) { main:has(#access) .phero .wirebox:has([data-wire="medball"]) { right: -13%; } }
/* bio pop-up v2: name in flame, yellow Work button, nothing looks pressed on open, clears phone corners */
dialog.biopop:focus, dialog.biopop:focus-visible { outline: none; }
.bio-copy h2 { color: var(--flame, var(--flame)); }
.bio-acts .js-bio-work .button-inner { background-image: linear-gradient(135deg, #FFD84D, #F2AE00); }
.bio-acts .js-bio-work .button-inner span { background-image: linear-gradient(135deg, var(--c-night), #3B2F1E); }
@media (max-width: 760px) {
  dialog.biopop { --bb: max(30px, calc(env(safe-area-inset-bottom) + 18px)); inset: 12px 0 var(--bb) 0; margin: auto; max-height: calc(100dvh - 12px - var(--bb)); }
  .bio-card { max-height: calc(100dvh - 12px - var(--bb)); }
}
.bio-copy > * { flex-shrink: 0; }
@media (max-width: 760px) { .bio-acts { padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); } }
.video .cap p .o41 { color: var(--orange, var(--orange)); }
/* every page: faint divider above the footer when the last section is sand (Memberships, Personal training, Train your clients, Q&A…) */
main:has(> .light:last-child) ~ .sitefoot { position: relative; }
main:has(> .light:last-child) ~ .sitefoot::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }
#enquire { scroll-margin-top: calc(var(--head-h, 78px) + 12px); }
.cardio-grid figure.cg-tall { grid-row: span 2; aspect-ratio: auto; }
.coach span.ph { display: block; cursor: default; }

/* ===== GroupFit41 · weekly schedule (Find your class) ===== */
.gfslots { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 30px; }
.gfslots b { font: 700 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--deep); margin-right: 6px; }
.gfslots span { padding: 10px 16px; border-radius: 999px; color: var(--c-hi); font: 700 15px/1 var(--body); white-space: nowrap;
  background: linear-gradient(160deg, #FE7E25, var(--orange) 55%, #D56303); box-shadow: 5px 5px 12px var(--lo), -5px -5px 12px var(--hi), inset 0 1px 0 rgba(255,255,255,.35); }
.gfweek { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.gfday { padding: 26px 20px 22px; gap: 12px; position: relative; transition: box-shadow .3s ease; }
.gfd-top { display: flex; align-items: center; gap: 12px; }
.gfday .chip { width: 50px; height: 50px; flex: none; }
.gfday .chip svg { width: 24px; height: 24px; }
.gfd-day { margin: 0; font: 700 14px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #D56303; }
.gfd-day abbr { text-decoration: none; }
.gfd-today { display: none; margin-left: auto; padding: 6px 10px; border-radius: 999px; color: var(--c-hi); font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(160deg, #FE7E25, var(--orange) 55%, #D56303); }
.gfday.today .gfd-today { display: inline-block; }
.gfday.today { box-shadow: 0 0 0 3px var(--orange), 12px 12px 26px var(--lo), -10px -10px 22px var(--hi); }
body:has(.gf-theme) .gfday h3 { font-size: clamp(17px, 1.45vw, 20px); margin: 2px 0 0; min-height: 2.3em; }
.gfd-times { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; }
.gfd-times li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; font-size: 14px;
  background: var(--bg); box-shadow: inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi); }
.gfd-times time { font-weight: 700; color: #D56303; white-space: nowrap; }
.gfd-times span { color: var(--deep); text-align: right; line-height: 1.25; }
.gfweek-cue { display: none; margin: 4px 0 0; font: 600 13px/1 var(--body); letter-spacing: .04em; color: #D56303; }
.gfweek-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.gfweek-ctas .more { margin-top: 0; }
/* tablets and phones: the week becomes a swipeable row, today's class first in view */
@media (max-width: 1100px) {
  .gfweek-wrap { margin: 0 calc(-1 * var(--gut, 16px)); }
  .gfweek { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 40%); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 12px var(--gut, 16px) 26px; scroll-padding-inline: var(--gut, 16px); scrollbar-width: none; }
  .gfweek::-webkit-scrollbar { display: none; }
  .gfday { scroll-snap-align: start; }
  .gfweek-cue { display: block; padding: 0 var(--gut, 16px); }
}
@media (max-width: 640px) {
  .gfweek-wrap { margin: 0 -16px; }
  .gfweek { grid-auto-columns: 80%; gap: 16px; padding: 12px 16px 24px; scroll-padding-inline: 16px; }
  .gfweek-cue { padding: 0 16px; }
  .gfslots { gap: 8px; }
  .gfslots b { width: 100%; margin: 0 0 4px; }
  .gfslots span { padding: 9px 13px; font-size: 14px; }
  body:has(.gf-theme) .gfday h3 { font-size: 20px; min-height: 0; }
  .gfweek-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .gfweek-ctas .more { justify-content: center; font-size: 14px; padding: 13px 10px; }
}
/* schedule fixes: breathing room under the intro, Tue 6pm note on its own line, shadows not clipped in the swipe row */
.gfslots { margin-top: 26px; }
.gfd-times small { display: block; font-size: 12px; font-weight: 600; color: #D56303; }
@media (max-width: 1100px) {
  .gfweek { padding-top: 34px; padding-bottom: 42px; margin-top: -22px; margin-bottom: -18px; }
}
@media (max-width: 640px) {
  .gfslots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .gfslots b { grid-column: 1 / -1; }
  .gfslots span { padding: 9px 2px; font-size: 13px; text-align: center; }
}

/* embed loader: "Back to …" label wraps evenly, GROUPFIT41 stays whole with an orange 41 */
.handoff .js-back .button-inner span { text-wrap: balance; }
.button-inner .gfw { font-style: normal; white-space: nowrap; }
.button-inner .gfo { font-style: normal; color: var(--orange); -webkit-text-fill-color: var(--orange); }
/* GroupFit41 band, wide screens: the three buttons span the full width of the class times box above */
@media (min-width: 1280px) {
  .gf41 .gf-copy .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex-wrap: nowrap; }
  .gf41 .gf-copy .actions .button { width: 100%; margin: 0; min-width: 0; }
  .gf41 .gf-copy .actions .button-outer, .gf41 .gf-copy .actions .button-inner { width: 100%; box-sizing: border-box; }
  .gf41 .gf-copy .actions .button-inner { padding-left: 10px !important; padding-right: 10px !important; justify-content: center; text-align: center; }
  .gf41 .gf-copy .actions .button-inner span { white-space: nowrap; }
}
#find-class { scroll-margin-top: calc(var(--head-h,78px) + 12px); }
/* GroupFit41 schedule: purple "take a look" style buttons under the week */
.gfweek-ctas .lookbtn.inline { margin-top: 0; }
@media (max-width: 640px) { .gfweek-ctas { grid-template-columns: 1fr; justify-items: start; } }
#trial { scroll-margin-top: calc(var(--head-h,78px) + 24px); }
/* home plate (desktop): size and position scale with the window, so the same share of the plate shows at any size
   (size = 1.65 x window height, capped by width; centre sits 20% of its size in from the right edge, 28% down from the top of the masthead) */
@media (min-width: 961px) {
  #plateDraw { width: min(165vh, 118vw); left: 100%; right: auto; top: 0; transform: translate(-70%, -22%); }
}
/* hero video banner (tablet and up): true 16:9, never taller than the screen under the header */
@media (min-width: 641px) {
  .video video { height: auto; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--head-h, 78px)); max-height: calc(100svh - var(--head-h, 78px)); object-position: 50% 50%; }
}
/* every page-header wireframe (bench, medicine ball, rope, kettlebell) follows the home plate:
   size = 1.65 x window height (capped by width), placed by its own size, so the same share shows at any window size */
@media (min-width: 961px) {
  .phero.haswire > .wirebox.behind:has(.wireGL[data-wire]) { width: min(165vh, 118vw); left: 100%; right: auto; top: 0; transform: translate(-70%, -22%); opacity: 1; filter: none; margin: 0; }
}
@media (max-width: 960px) {
  .phero.haswire > .wirebox.behind:has(.wireGL[data-wire]) { width: 230vw; left: 100%; right: auto; top: 0; transform: translate(-48%, -16%); opacity: 1; filter: none; margin: 0; }
}
/* the bench is long, so it sits a little further into view than the round objects to read as a whole bench */
@media (min-width: 961px) { .phero.haswire > .wirebox.behind:has(.wireGL[data-wire="bench"]) { width: min(145vh, 104vw); transform: translate(-91%, -27%); } }
@media (max-width: 960px) { .phero.haswire > .wirebox.behind:has(.wireGL[data-wire="bench"]) { width: 215vw; transform: translate(-80%, -10%); } }
/* trainer bio pop-ups look the same on every page: the GROUPFIT41 page theme (Radwave headings, purple eyebrows) stays out of them */
body:has(.gf-theme) .light dialog.biopop .bio-copy h2 { font: 700 clamp(38px, 4.4vw, 58px)/.92 var(--display); letter-spacing: .005em; }
body:has(.gf-theme) .light dialog.biopop .bio-copy .eyebrow { color: #4C4741; }
/* the rope hangs: sits a little lower so its steel eye stays on screen */
@media (min-width: 961px) { .phero.haswire > .wirebox.behind:has(.wireGL[data-wire="rope"]) { transform: translate(-80%, -12%); } }
@media (max-width: 960px) { .phero.haswire > .wirebox.behind:has(.wireGL[data-wire="rope"]) { transform: translate(-64%, -14%); } }

/* ===== audit fixes, Nov 5 ===== */
/* line breaks that only apply on phones (m-only) or only above phone width (d-only) */
.m-only { display: none; }
@media (max-width: 640px) { .m-only { display: inline; } .d-only { display: none; } }
/* b6: every jump target clears the sticky header (site.js shrinks the header first on phones) */
[id] { scroll-margin-top: calc(var(--head-h, 78px) + 16px); }
/* b5: the glass "scroll down" arrow steps aside on phones when it would sit on a hero button */
.fab.hidedown:not(.up) { opacity: 0; visibility: hidden; pointer-events: none; }
/* b3: the GROUPFIT41 week row lines up with the page gutter instead of poking 8px past it */
/* d2: page side gutter as one token: 16px on phones, 32px on tablets (matches the header), 40px up to 1279, then the 1200px column takes over */
:root { --gut: 16px; }
@media (min-width: 700px) and (max-width: 960px) { :root { --gut: 32px; } }
@media (min-width: 961px) and (max-width: 1279px) { :root { --gut: 40px; } }
.light, .band, .phero .inner, .gf41 .wrap { padding-left: var(--gut); padding-right: var(--gut); }
@media (min-width: 700px) { .mast .inner { padding-left: var(--gut); padding-right: var(--gut); } }
/* b7 (audit): sensible header-height defaults before site.js measures it, so the loader doesn't jump */
:root { --head-h: 117px; }
@media (max-width: 960px) { :root { --head-h: 203px; } }
@media (max-width: 640px) { :root { --head-h: 190px; } }
/* a10 (audit): lock the page while a trainer bio is open */
html.bio-open, html.bio-open body { overflow: hidden; }
/* s10 (audit): Bio badge opens with a clip (no width change, so nothing shifts); same look: 3px soft ring + drop shadow */
.coach .biowrap { position: absolute; right: -7px; bottom: -1px; width: 64px; height: 40px; filter: drop-shadow(0 6px 7px rgba(0,0,0,0.22)); pointer-events: none; }
.coach .biowrap .biotag { position: absolute; inset: 0; right: 0; bottom: 0; width: auto !important; height: auto; box-sizing: border-box; border: 3px solid rgba(236,110,0,0.22); background-clip: padding-box;
  border-radius: 40px; box-shadow: none; clip-path: inset(0 0 0 24px round 20px); transition: clip-path .3s ease, background-color .3s ease; }
.coach .biowrap .biotag em { left: auto; right: 0; width: 34px; }
.coach .biowrap .biotag.out, .coach a.ph:focus-visible .biowrap .biotag { clip-path: inset(0 round 20px); }
@media (hover: hover) and (pointer: fine) { .coach a.ph:hover .biowrap .biotag { clip-path: inset(0 round 20px); } }
@media (max-width: 1100px) { .coach .biowrap { right: -9px; bottom: -3px; width: 58px; height: 36px; } .coach .biowrap .biotag { clip-path: inset(0 0 0 22px round 18px); } .coach .biowrap .biotag em { width: 30px; }
  .coach .biowrap .biotag.out, .coach a.ph:focus-visible .biowrap .biotag { clip-path: inset(0 round 18px); } }
@media (max-width: 1100px) and (hover: hover) and (pointer: fine) { .coach a.ph:hover .biowrap .biotag { clip-path: inset(0 round 18px); } }
@media (max-width: 640px) { .coach .biowrap { right: -11px; bottom: -5px; } }
@media (prefers-reduced-motion: reduce) { .coach .biowrap .biotag { transition: none; } }
/* s10 (audit): the floating arrow slides to the corner with transform only (no layout shift) */
.fab { left: calc(100% - 18px); transform: translateX(calc(18px - 50vw - 50%)); }
.fab.up { left: calc(100% - 18px); transform: translateX(-100%); }
@media (min-width: 641px) { .fab, .fab.up { left: calc(100% - 28px); bottom: 28px; } .fab:not(.up) { transform: translateX(-100%); } }
/* a7 (audit): required marker and a message under each missing field (field edges left as they are) */
.form .req { color: #9A4700; margin-left: 3px; }
.form label:has(.req) { flex-wrap: wrap; flex-direction: row; column-gap: 0; }
.form label:has(.req) > input { flex: 1 0 100%; }
.form .ferr { flex: 1 0 100%; display: block; font: 600 13px/1.3 var(--body); color: #9A4700; }
.form .ferr:empty { display: none; }
.form [aria-invalid="true"] { box-shadow: inset 5px 5px 12px var(--lo), inset -5px -5px 12px var(--hi), 0 0 0 2px #9A4700; }
/* p1 (audit): a gap between the day and its hours; ranges never split */
.hrs .nw { white-space: nowrap; }
.hrs th { padding-right: 14px; }
/* p4 (audit): Power Academy hero buttons stack below 360 wide */
@media (max-width: 359px) { .phero:has(.pa-logo) .ctas { display: grid; grid-template-columns: max-content; justify-items: start; gap: 12px; } }
/* p6 (audit): small fixes at 320 wide */
@media (max-width: 359px) {
  .gfslots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gfslots span { padding: 9px 4px; }
  .status-text { letter-spacing: .1em; }
}
a[href^="tel:"] { white-space: nowrap; }
/* p8 (audit): the portal bar says where Back goes, or just "Back" when there's no room */
.embedback .eb-l { white-space: nowrap; }
.embedback .eb-l.short .eb-to { display: none; }
/* p9 (audit): short phone screens give the bio text more room (photo about a third) */
@media (max-width: 760px) and (max-height: 760px) { .bio-ph { height: min(33vh, 260px); } }
/* d1 (audit): home "Pick your program" in 2 columns on iPad portrait */
@media (min-width: 600px) and (max-width: 960px) { .grid3:has(> :nth-child(6)) { grid-template-columns: 1fr 1fr; } }
/* d3 (audit): "Available to rent" spans both columns */
.gf-feats .gf-rentpill { grid-column: 1 / -1; }
/* d4 (audit): cards size to their content */
.pa-week { align-items: start; }
.portal > .soft > .button { align-self: flex-start; }
/* d5 (audit) */
@media (min-width: 641px) { .fab.up { transform: translate(-100%, calc(-1 * var(--lift, 0px))); } }
/* g1 (audit): every GROUPFIT41 booking button in the one brand yellow; purple stays for tour / look-around buttons */
:root { --yel-a: #FFDB5C; --yel-b: #F2B200; }
#trial .ctas .button[href^="book-free-class"] .button-inner { background-image: linear-gradient(135deg, var(--yel-a), var(--yel-b)); }
.lookbtn.yel { --white: var(--c-night); --o100: #FFE88F; --o200: #FFDB5C; --o300: #F7C531; --o400: #F2B200; --o500: #9A6A00; }
.lookbtn.yel .char.state-1 span::before, .lookbtn.yel .char span::after { text-shadow: 0 1px 0 rgba(255,240,190,.6); }
/* g2 (audit): one yellow: "Work with" uses the same gradient */
.gf41 .gf-copy .actions .button-inner, .bio-acts .js-bio-work .button-inner { background-image: linear-gradient(135deg, var(--yel-a), var(--yel-b)); }
/* g3 (audit): GROUPFIT41 in caps with the orange 41 wherever it's a name in the design */
.gfw { font-style: normal; white-space: nowrap; }
.gfw .gfo { font-style: normal; color: var(--orange); -webkit-text-fill-color: var(--orange); }
/* c11 (audit): weekend cue above the GROUPFIT41 week */
.gfweek-off { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 16px; border-radius: 999px; font: 600 14px/1.2 var(--body); color: var(--c-night);
  background: var(--bg, var(--c-bg)); box-shadow: inset 4px 4px 10px var(--lo), inset -4px -4px 10px var(--hi); }
.gfweek-off .led { --led: var(--orange); }
/* l4 (audit): privacy page */
.prose.privacy h2 { margin: 30px 0 8px; font-size: clamp(30px, 4vw, 42px); }
/* ===== show-me-first items Chris approved (Nov 5) ===== */
/* a2: deeper purple on the tour button so the label passes (glow and animation stay) */
.lookbtn:not(.yel) { --o100: #C7A2FF; --o200: #A77CF2; --o300: #8D5BE8; --o400: #7440D6; --o500: #3A1868; }
/* a4 (teal only): dark text on the OPEN 24/7 pill */
.open247 { color: #10302C; text-shadow: none; }
/* a5: a dark focus ring on light sections (cream ring stays on the coloured bands) */
.light a:focus-visible, .light button:focus-visible, .topbar a:focus-visible, .topbar button:focus-visible, .sheet a:focus-visible, .social a:focus-visible { outline: 2.5px solid var(--c-night); outline-offset: 3px; }
/* a9: every small tap target at least 44px tall */
.embedback, .embedout { min-height: 44px; display: inline-flex; align-items: center; }
.sitefoot .base a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
/* p5: the small header after scrolling, up to 960 wide */
@media (min-width: 641px) and (max-width: 960px) {
  .sitehead.compact .topbar { padding: 12px 16px; box-shadow: 0 10px 28px rgba(41,38,34,0.22); }
  .sitehead.compact .topbar .nav { display: none; }
  .sitehead.compact .navpill { gap: 0; }
  .sitehead.compact .topbar .logo { width: 104px; }
  .sitehead.compact .brandrow { min-height: 44px; align-items: center; }
}
/* p7: logo-only header on the portal pages on phones */
@media (max-width: 640px) { body:has(.embed) .topbar .nav { display: none; } body:has(.embed) .topbar { padding: 12px 16px; } body:has(.embed) .topbar .logo { width: 104px; }
  /* the menu button sits inside the bar, same as the small header after scrolling */
  body:has(.embed) .brandrow { min-height: 44px; align-items: center; }
  body:has(.embed) .menubtn { top: 0; width: 44px; height: 44px; box-shadow: 4px 4px 10px var(--c-lo), -3px -3px 8px rgba(255,253,248,0.7); } }
/* p11: trainer row at iPad width: side padding, and the arrow sits by the swipe cue, clear of the captions */
@media (min-width: 641px) and (max-width: 1100px) { .trackwrap .track { scroll-padding-inline: 28px; padding-inline: 28px; } .trackwrap .trackarrow { top: auto; bottom: -2px; right: 28px; transform: none; } }
/* GROUPFIT41 "Find your class" blurb (Nov 5) */
#find-class .lead + .lead { margin-top: 12px; }
#find-class .lead .gf-tag { display: inline; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: 0; font: 600 1.15em/1.3 var(--body); color: var(--c-night); }
/* GROUPFIT41 week on tablets and phones: room for the cards' full soft shadow (60px blur), so the scroll row no longer cuts it into a hard line under the time pills. Same spacing as before. */
@media (max-width: 1100px) {
  .gfweek { padding-top: 96px; padding-bottom: 110px; margin-top: -84px; margin-bottom: -72px; }
}
/* GROUPFIT41 week swipe row (Chris, Nov 5): the usual pull past the ends stays; an arrow appears in the pulled-open space,
   pointing back the way to go. It only fades in once the pull has opened up enough space for it. */
.gfw-end { display: none; }
@media (max-width: 1100px) {
  .gfweek-wrap { position: relative; }
  .gfweek { position: relative; z-index: 1; }
  .gfw-end { display: grid; place-items: center; position: absolute; z-index: 2; width: 36px; height: 36px; border-radius: 50%; pointer-events: none;
    background: var(--orange); box-shadow: 0 6px 16px rgba(41,38,34,.28); opacity: 0; transform: translateY(-50%) scale(.6); transition: opacity .25s ease, transform .25s ease; }
  .gfw-end i { width: 9px; height: 9px; border-right: 2.5px solid #fff; border-top: 2.5px solid #fff; transform: translateX(-2px) rotate(45deg); }
  .gfw-end.atend i { transform: translateX(2px) rotate(-135deg); }
  .gfw-end.atstart { left: 14px; } .gfw-end.atend { right: 14px; }
  .gfw-end.show { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* GROUPFIT41 week (Chris, Nov 5): the row reaches 80px past each screen edge, so the cards' soft shadow is never cut into a hard line,
   even when you pull past Monday or Friday. Cards sit exactly where they did. */
@media (max-width: 1100px) {
  .gfweek-wrap { overflow-x: clip; }
  .gfweek { margin-left: -80px; margin-right: -80px; padding-left: calc(var(--gut, 16px) + 80px); padding-right: calc(var(--gut, 16px) + 80px); scroll-padding-inline: calc(var(--gut, 16px) + 80px); }
}
@media (max-width: 640px) {
  .gfweek { padding-left: 96px; padding-right: 96px; scroll-padding-inline: 96px; }
}
/* pull-past arrows use the purple back-to-top button design (Chris, Nov 5) */
@media (max-width: 1100px) {
  .gfw-end { width: 44px; height: 44px; background: var(--orchid); box-shadow: 0 0 0 4px rgba(164,94,255,0.28), 0 10px 24px rgba(72,32,126,0.3); }
  .gfw-end i { width: 10px; height: 10px; border-right-width: 2.6px; border-top-width: 2.6px; }
  .gfw-end.atstart { left: 12px; } .gfw-end.atend { right: 12px; }
}
/* brand logo ticker (Chris, Nov 5: blank or crawling on iPhone): no mask on the moving row and no single wide moving row.
   Each logo is moved on its own (same as the photo tickers), stays solid, and slides in and out under the panel's own rounded edge. */
.brands { -webkit-mask-image: none; mask-image: none; }
.brands .marquee.js { animation: none; position: relative; width: auto; display: block; overflow: visible; padding-inline: 0; height: 52px; }
.brands .marquee.js img { position: absolute; left: 0; top: 50%; will-change: transform; }
@media (max-width: 640px) { .brands .marquee.js { height: 44px; } }
/* menu on phones (Chris, Nov 5): the logo sits clear of the close X */
@media (max-width: 640px) { .sheet .panel header { position: relative; min-height: 44px; } .sheet .panel header img { margin-left: 56px; } }
/* How to find us clip: its first frame sits underneath as a still; the video fades in only once it's playing */
.findvid .fv-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.findvid .fv-loop { opacity: 0; transition: opacity .35s ease, transform .5s ease; }
.findvid .fv-live .fv-loop, .findvid.fv-live .fv-loop { opacity: 1; }
.findvid .fv-btn:hover .fv-thumb { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .findvid .fv-loop { opacity: 0; } }
/* arriving from a link (Chris, Nov 5): the menu bar stays put; the page below fades out to cream and back in once it has settled at the top */
/* a cream veil under the menu bar (the page's own background colour is left alone, so the app's bar around the site doesn't change colour) */
body::after { content: ""; position: fixed; inset: 0; z-index: 39; background: var(--c-bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
html.nav-arrive body::after, html.nav-out body::after { opacity: 1; visibility: visible; transition: opacity .12s ease; }
html.nav-arrive .fab, html.nav-out .fab { opacity: 0; }
/* hero video: a still of the first frame sits underneath; the video fades in once it's playing (no grey box or flash) */
:is(.video, .vt-vid):has(.hv-still) { position: relative; }
:is(.video, .vt-vid) .hv-still { position: absolute; inset: 0; display: block; pointer-events: none; }
:is(.video, .vt-vid) .hv-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video .hv-still img { object-position: 50% 35%; }
@media (min-width: 641px) { .video .hv-still img { object-position: 50% 50%; } }
:is(.video, .vt-vid) video.herovid { position: relative; opacity: 0; transition: opacity .4s ease; }
:is(.video, .vt-vid).hv-live video.herovid { opacity: 1; }
@media (prefers-reduced-motion: reduce) { :is(.video, .vt-vid) video.herovid { opacity: 1; } }
/* Power Academy: the home Olympic plate behind the glass, with the same glass blur as the home panel (Chris, Nov 5) */
.phero:has(#plateDraw) .gpanel { -webkit-backdrop-filter: blur(3px) saturate(1.4); backdrop-filter: blur(3px) saturate(1.4); }
/* Power Academy logo: 4:5 dark panel with a lot more space around the logo (Chris, Nov 5) */
.pa-logo.pa-logo-sq { aspect-ratio: 4 / 5 !important; padding: clamp(64px, 6.4vw, 92px) clamp(56px, 5.4vw, 78px) !important; }
@media (max-width: 760px) { .pa-logo.pa-logo-sq { width: min(100%, 240px) !important; padding: 56px 48px !important; } }
/* Power Academy: faint divider lines between sections and above the footer, like the other pages */
main:has(.pa-logo) > .light + .light, main:has(.pa-logo) ~ .sitefoot { position: relative; }
main:has(.pa-logo) > .light + .light::before, main:has(.pa-logo) ~ .sitefoot::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }
/* Memberships (phones): less empty space between the "What you get" cards and the "Ready when you are" card (Chris, Nov 5) */
@media (max-width: 760px) { .band + .light:has(> .wrap > .visit:only-child) { padding-top: 48px; } .band + .light > .wrap > .visit:only-child { margin-top: 0; } }
/* Kristian (Nov 5): his photo holds two people, so on phones it gets a slightly taller frame that fits both heads */
@media (max-width: 760px) { #bio-kristian .bio-ph { height: auto; aspect-ratio: 900 / 860; max-height: 62vh; } }
/* Kristian (Nov 5): a narrow but short window (e.g. a desktop browser beside the comments panel) made the stacked bio photo a thin strip
   that cut heads off. When the window is wider than tall, the bio keeps photo and text side by side instead. */
@media (max-width: 760px) and (min-aspect-ratio: 1/1) {
  .bio-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: none; }
  .bio-ph, #bio-kristian .bio-ph { height: auto; min-height: 100%; aspect-ratio: auto; max-height: none; }
}
/* Kristian (Nov 5), the real cause on laptops: when a bio is taller than the screen, the photo and text row grew past the pop-up and
   was centred in it, so the top of the photo (the heads) sat above the window. The text now scrolls inside the pop-up instead,
   so the photo always fits the pop-up from the top. */
.bio-copy { max-height: calc(100dvh - 32px); box-sizing: border-box; }
@media (max-width: 760px) and (min-aspect-ratio: 1/1) { .bio-copy { max-height: calc(100dvh - 12px - var(--bb, 30px)); } }
/* stacked bios in a wider portrait window (521–760px) get a taller photo, so close-up headshots aren't cut at the chin */
@media (min-width: 521px) and (max-width: 760px) and (max-aspect-ratio: 1/1) { .bio-ph { height: min(56vh, 480px); } }
.bio-ph { position: relative; overflow: hidden; } .bio-ph img { position: absolute; inset: 0; }  /* the photo fills its frame and never sets the row height */

/* Cookie notice (Nov 6): frosted cream card, bottom-left; full-width at the bottom on phones. Analytics only loads after Allow. */
.ck { position: fixed; z-index: 90; left: 24px; bottom: 24px; width: min(400px, calc(100vw - 32px)); box-sizing: border-box; padding: 24px 24px 22px; border-radius: 32px;
  background: rgba(239,230,218,.95); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,253,248,.75); color: #292622; font: 500 15px/1.5 var(--body);
  box-shadow: 16px 16px 40px rgba(41,38,34,.22), -10px -10px 30px rgba(255,253,248,.5), inset 0 1px 0 rgba(255,255,255,.65);
  opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.ck.on { opacity: 1; transform: none; }
.ck-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ck-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #FFFDF8;
  background: linear-gradient(160deg, #FE7E25, #EC6E00 55%, #D56303); box-shadow: 4px 4px 10px rgba(205,191,173,.9), -4px -4px 10px rgba(255,253,248,.8); }
.ck-ic svg { width: 20px; height: 20px; }
.ck-eye { margin: 0; font: 600 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #4C4741; }
.ck h2 { margin: 0 0 10px; font: 700 34px/.92 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #292622; }
.ck h2 span { color: #EC6E00; }
.ck p.ck-t { margin: 0 0 18px; color: #4C4741; text-wrap: pretty; }
.ck p.ck-t a { color: #A84B00; font-weight: 600; }
.ck-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ck-btns button { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 130px; min-height: 48px; padding: 14px 20px; border-radius: 999px; text-align: center;
  font: 400 15px/1 "Radwave", var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease; }
.ck-btns .ck-yes { color: #FFFDF8; background: linear-gradient(160deg, #FE7E25, #EC6E00 55%, #D56303); text-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 5px 5px 14px rgba(205,191,173,.95), -5px -5px 14px rgba(255,253,248,.8), inset 0 1px 0 rgba(255,255,255,.45); }
.ck-btns .ck-no { color: #292622; background: #EFE6DA; box-shadow: 5px 5px 14px rgba(205,191,173,.95), -5px -5px 14px rgba(255,253,248,.85); }
.ck-btns button:hover { transform: translateY(-1px); }
.ck-btns .ck-no:hover { box-shadow: inset 4px 4px 10px rgba(205,191,173,.9), inset -4px -4px 10px rgba(255,253,248,.85); }
.ck-btns button:active { transform: scale(.97); }
.ck-btns button:focus-visible, .ck p.ck-t a:focus-visible { outline: 2px solid #A84B00; outline-offset: 3px; }
@media (max-width: 560px) { .ck { left: 12px; right: 12px; width: auto; bottom: max(12px, env(safe-area-inset-bottom)); padding: 20px 20px 18px; border-radius: 28px; } .ck h2 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .ck, .ck-btns button { transition: none; } }

/* View from the parking lot (Nov 6): two portrait photos, side by side on desktop, stacked on phones */
.plats.two.lot .pa-ph { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .plats.two.lot .pa-ph { aspect-ratio: 4 / 5; } }
/* divider between "Your first class is free" and "View from the parking lot" (Nov 6) */
.light + .light#parking { position: relative; }
.light + .light#parking::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(90deg, rgba(41,38,34,0), rgba(41,38,34,.14) 18%, rgba(41,38,34,.14) 82%, rgba(41,38,34,0)); pointer-events: none; }

/* iPhone Safari let the grey-filtered trainer photos escape their round clip and show as rounded squares (Chris, Nov 6): clip the photo itself too */
.coach .ph img, .coach .ph.has-bio .phc { border-radius: 50%; }
.coach .ph.has-bio .phc { -webkit-mask-image: -webkit-radial-gradient(white, black); }

/* light mode for slow phones (site.js decides): glass sitting inside other glass skips its own blur. The outer panel already
   blurs what's behind, and each extra layer was re-blurred every frame. Outer panels keep their blur so text stays readable. */
html.lite .lite-noblur { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Safari draws a parent's drop-shadow from the badge's full hidden pill, not its round clipped shape, which left a smudge beside
   the round "i" badge (Chris, Nov 6). The shadow now comes from its own circle that follows the badge as it opens. */
.coach .biowrap { filter: none; }
.coach .biowrap::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 24px; border-radius: 20px; box-shadow: 0 6px 8px rgba(0,0,0,0.2); transition: left .3s ease; }
@media (max-width: 1100px) { .coach .biowrap::before { left: 22px; border-radius: 18px; } }
.coach .biowrap:has(.biotag.out)::before, .coach a.ph:focus-visible .biowrap::before { left: 0; }
@media (hover: hover) and (pointer: fine) { .coach a.ph:hover .biowrap::before { left: 0; } }
@media (prefers-reduced-motion: reduce) { .coach .biowrap::before { transition: none; } }

/* the purple buttons inside the GroupFit41 band picked up the band's side padding, which squeezed their inner pill (Chris, Nov 6) */
.gf41 .lookbtn .wrap { padding: 3px; max-width: none; }

/* Safari let the form boxes keep their built-in width, so Name ran into Email and Email ran off the card (Chris, Nov 6) */
.form input, .form select, .form textarea { width: 100%; box-sizing: border-box; }
/* contact page: the form card matches the height of the info card beside it; the message box takes up the extra room */
@media (min-width: 961px) {
  .contactgrid { align-items: stretch; }
  .contactgrid #contactForm { grid-template-rows: auto auto auto 1fr auto; }
  .contactgrid #contactForm label:has(textarea) textarea { flex: 1; }
}

/* The closed "i" badge showed the orange fill cut by a 20px circle on the left but only 17px on the right (the soft ring sat on the
   right side only), so it looked lopsided (Chris, Nov 6). Now the orange is clipped to a true circle and the soft ring is drawn
   evenly around it by the shadow layer behind, which opens with the badge. */
.coach .biowrap .biotag { border-color: transparent; clip-path: inset(3px 3px 3px 27px round 17px); }
.coach .biowrap::before { background: rgba(236,110,0,0.22); }
.coach .biowrap .biotag.out, .coach a.ph:focus-visible .biowrap .biotag { clip-path: inset(0 round 20px); }
@media (hover: hover) and (pointer: fine) { .coach a.ph:hover .biowrap .biotag { clip-path: inset(0 round 20px); } }
@media (max-width: 1100px) { .coach .biowrap .biotag { clip-path: inset(3px 3px 3px 25px round 15px); }
  .coach .biowrap .biotag.out, .coach a.ph:focus-visible .biowrap .biotag { clip-path: inset(0 round 18px); } }
@media (max-width: 1100px) and (hover: hover) and (pointer: fine) { .coach a.ph:hover .biowrap .biotag { clip-path: inset(0 round 18px); } }

/* Nov 6: OPEN 24/7 pill and the status bar always match (status text changes length with the time of day) */
.copy-main > .pillstack { display: grid; width: max-content; min-width: min(360px, 60%); max-width: 100%; margin: 0 0 20px; }
.pillstack > .open247, .pillstack > .status { width: 100%; min-width: 0; max-width: none; }
.pillstack > .open247 { margin: 0 0 12px; }
.pillstack > .status { margin: 0; }
@media (max-width: 640px) { .copy-main > .pillstack { width: 100%; min-width: 0; } }
@media (max-width: 380px) { .pillstack > .open247 { margin-bottom: 10px; } .copy-main > .pillstack { margin-bottom: 10px; } }

/* final pass (Nov 7): the open menu sits above the cookie notice */
.sheet.open { z-index: 100; }

/* final pass (Nov 7, Chris approved): tablets use the phone-style header — logo on top, the five pills in one capsule underneath — so the nav never wraps past the round ends */
@media (min-width: 641px) and (max-width: 980px) {
  .topbar { padding: 18px 32px; }
  .navpill { flex-direction: column; gap: 14px; border: 0; padding: 0; width: 100%; box-sizing: border-box; }
  .topbar .nav { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 999px; border: 1.5px solid rgba(41,38,34,0.16); }
  .topbar .nav a { white-space: nowrap; flex: 1 1 auto; text-align: center; font-size: 13px; padding: 10px 12px; }
  .menubtn { position: absolute; left: 0; top: 2px; }
}

/* final pass (Nov 7, Chris approved): compact cookie bar — no icon row, one-line heading, buttons beside the text; phones stack the buttons underneath */
.ck { width: min(660px, calc(100vw - 48px)); padding: 16px 18px 16px 22px; border-radius: 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; row-gap: 4px; align-items: center; }
.ck .ck-top { display: none; }
.ck h2 { grid-column: 1; margin: 0; font-size: 22px; line-height: 1; }
.ck h2 br { display: none; }
.ck h2 span::before { content: " "; }
.ck p.ck-t { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.4; }
.ck .ck-btns { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; gap: 10px; }
.ck-btns button { flex: none; min-height: 44px; padding: 12px 18px; font-size: 14px; }
@media (max-width: 560px) {
  .ck { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; border-radius: 22px; row-gap: 6px; }
  .ck h2 { font-size: 20px; }
  .ck .ck-btns { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .ck-btns button { flex: 1 1 0; }
}

/* final pass (Nov 7, Chris approved): three-button rows stack on small phones instead of squeezing (Power Academy hero, the yellow GROUPFIT41 row), using the site's own stacked style */
@media (max-width: 380px) {
  :is(.phero .ctas, .gf41 .actions):has(> .button:nth-child(3)):not(:has(> .button:nth-child(4))) { display: inline-grid !important; grid-template-columns: 1fr !important; gap: 12px !important; justify-items: stretch; justify-self: start; width: max-content; max-width: 100%; }
}

/* final pass (Nov 7, Chris approved): glass pause button on the hero video */
.hv-pause { all: unset; box-sizing: border-box; position: absolute; z-index: 3; right: calc(max(20px, env(safe-area-inset-right, 0px)) + 76px); bottom: 24px; width: 44px;   /* clear of the floating back-to-top button */ height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #FFFDF8;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)); border: 1.5px solid rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: 0 8px 22px rgba(0,0,0,0.25); transition: transform .15s ease, background .2s ease; }
.hv-pause svg { width: 18px; height: 18px; }
.hv-pause:hover { background: linear-gradient(135deg, rgba(255,255,255,0.32), rgba(255,255,255,0.12)); }
.hv-pause:active { transform: scale(.94); }
.hv-pause:focus-visible { outline: 2px solid #FFFDF8; outline-offset: 3px; }

/* final pass (Nov 7, Chris approved): Power Academy day cards all the same height */
.pa-week { align-items: stretch; }

/* final pass (Nov 7, Chris approved): footer bottom row lines up, footer links get more room to tap */
.sitefoot .base { align-items: center; }

/* final pass (Nov 7, Chris approved): the live status pill fits on one line on the smallest phones */
@media (max-width: 340px) { .status .status-text { font-size: 10px; letter-spacing: .06em; } }
.sitefoot .fexplore li a, .sitefoot .cols p > a, .contactgrid a.em, .contactgrid a[href^="tel:"] { display: inline-block; padding-block: 10px; margin-block: -10px; }
@media (max-width: 640px) { .hv-pause { top: 16px; bottom: auto; right: max(16px, env(safe-area-inset-right, 0px)); } }
/* 3-button rows on phones: let long labels wrap to two lines instead of touching the pill edges */
@media (max-width: 480px) { .ctas:has(> .button:nth-child(3)) .button-inner span { display: inline-block; max-width: 6.4em; text-wrap: balance; } }