/* ANIMAL GYM — shell: wrapper, top bar, header, mobile menu, footer, lightbox */

.agym-wrapin {
	width: min(1220px, 100% - 48px);
	margin-inline: auto;
}

.agym-wrapin--narrow { width: min(940px, 100% - 48px); }

.agym-sec {
	position: relative;
	padding: var(--sec-y) 0;
	background: var(--sec-bg, transparent);
	color: var(--sec-fg, var(--fg));
}

/* Every other section sits on the deeper paper tone. PHP tags the ones that
   should be banded, so switching a section off never leaves two bands touching. */
.agym-sec--band { background: var(--sec-bg, var(--band)); }

.agym-main { display: block; }

/* ------------------------------------------------------------- top bar --- */

.agym-topbar {
	background: var(--fg);
	color: var(--bg);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	padding: 9px 0;
	position: relative;
	/* Below the header, not above it. The header is a stacking context (z-index
	   50), so everything inside it — including the mobile menu panel at z-index
	   80 and its close button — is capped at 50 as far as this bar is concerned.
	   At 60 the bar painted straight over the top of the open menu and swallowed
	   the close button; it also painted over the sticky header scrolling past. */
	z-index: 40;
}

.agym-topbar a:hover { color: var(--gold-2); }

/* -------------------------------------------------------------- header --- */

.agym-header {
	--head-bg: rgba(var(--bg-rgb), .86);
	--head-fg: var(--fg);
	position: relative;
	z-index: 50;
	background: var(--head-bg);
	border-bottom: 1px solid var(--line);
	color: var(--head-fg);
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.agym-header.is-sticky { position: sticky; top: 0; }

/* While the menu is open the header carries a full-screen panel, so it has to
   outrank anything else on the page — a sticky bar from a plugin included. */
body.agym-menu-open .agym-header { z-index: 90; }

/* The background is deliberately not opaque, so the page shows through as it
   scrolls under — but only as a frost. Without the blur the text underneath
   stays legible through it, which reads as a bug rather than an effect.
   ------------------------------------------------------------------------
   The blur MUST live on this pseudo-element, never on .agym-header itself.
   backdrop-filter (like transform and filter) makes an element the containing
   block for its position:fixed descendants — and the mobile menu is a fixed
   panel parked at translateX(100%) inside this header. Put the filter on the
   header and that panel stops being viewport-fixed: it becomes a 146px-tall
   box sitting immediately to the right of the header, which doubles the page's
   scrollWidth and lets the whole site drag sideways on a phone. A child
   cannot change its parent's containing-block status, so a pseudo-element
   gives the same frost with none of that. */
.agym-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	transition: backdrop-filter .3s ease;
}

body:not(.agym-has-transparent-header) .agym-header.is-sticky::before {
	backdrop-filter: saturate(1.4) blur(14px);
}

@supports not (backdrop-filter: blur(2px)) {
	body:not(.agym-has-transparent-header) .agym-header.is-sticky { --head-bg: var(--bg); }
}

/* Transparent over the hero — until the script marks the header as scrolled. */
.agym-has-transparent-header .agym-header {
	position: absolute;
	inset: auto 0 auto 0;
	background: transparent;
	border-bottom-color: transparent;
}

/* Same rule as above: the frost goes on the pseudo-element, never on the
   header, or the fixed mobile menu loses the viewport as its containing block. */
.agym-has-transparent-header .agym-header.is-sticky.is-stuck::before {
	backdrop-filter: saturate(1.4) blur(14px);
}

.agym-has-transparent-header .agym-header.is-sticky.is-stuck {
	position: fixed;
	background: var(--head-bg);
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-sm);
}

.agym-header__in {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 80px;
}

/* ---------------------------------------------------------------- logo --- */

.agym-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex: none;
}

.agym-logo__img {
	height: var(--logo-h);
	width: auto;
	/* A wide wordmark would otherwise grow until it shoved the menu out of the
	   header; the cap keeps the row intact whatever gets uploaded. */
	max-width: min(260px, 42vw);
	object-fit: contain;
}

/* Two logos may be printed: the normal one and a light version for dark
   backgrounds. CSS picks, so there is no flash and no JavaScript involved.
   The alternate is hidden by default and only revealed by the more specific
   dark-context rules below. */
.agym-logo__img--alt { display: none; }

:root[data-theme="dark"] .agym-logo__img--swap,
.agym-invert .agym-logo__img--swap,
.agym-hero-invert .agym-header:not(.is-stuck) .agym-logo__img--swap { display: none; }

:root[data-theme="dark"] .agym-logo__img--alt,
.agym-invert .agym-logo__img--alt,
.agym-hero-invert .agym-header:not(.is-stuck) .agym-logo__img--alt { display: block; }

/* Once the header sticks it has its own background, so it goes back to the
   logo that matches the current colour scheme rather than the photo one. */
:root:not([data-theme="dark"]) .agym-hero-invert .agym-header.is-stuck .agym-logo__img--swap { display: block; }
:root:not([data-theme="dark"]) .agym-hero-invert .agym-header.is-stuck .agym-logo__img--alt { display: none; }

.agym-logo__mark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: calc(var(--radius) * .9);
	background: var(--gold);
	color: var(--on-gold);
	flex: none;
}

.agym-logo__text { display: flex; flex-direction: column; line-height: 1; }

.agym-logo__name {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-weight: 600;
}

.agym-logo__tag {
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-top: 5px;
}

/* ---------------------------------------------------------------- nav ---- */

.agym-nav { margin-left: auto; }

.agym-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
}

.agym-nav__list li { position: relative; }

.agym-nav__list a {
	display: block;
	position: relative;
	padding: 9px 13px;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-size: 13.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--head-fg);
	opacity: .82;
	transition: opacity .2s ease, color .2s ease, background .2s ease;
}

/* A soft pill instead of the old underline sweep — less to look at, and it
   survives sitting on top of a photograph. */
.agym-nav__list a:hover,
.agym-nav__list .current-menu-item > a,
.agym-nav__list .is-current > a {
	opacity: 1;
	color: var(--gold-ink);
	background: var(--gold-tint);
}

/* Sub menus */
.agym-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 214px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 7px;
	display: none;
	box-shadow: var(--shadow-md);
}

.agym-nav__list li:hover > .sub-menu,
.agym-nav__list li:focus-within > .sub-menu { display: block; }

.agym-nav__list .sub-menu a { padding: 9px 12px; }

.agym-nav__foot { display: none; }

/* Only exists while the menu is a full-screen panel; above that breakpoint the
   nav is an ordinary row and there is nothing to close. */
.agym-nav__close { display: none; }

/* ------------------------------------------------------------- actions --- */

.agym-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.agym-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 14.5px;
	letter-spacing: .06em;
	color: var(--head-fg);
}

.agym-header__phone:hover { color: var(--gold-ink); }

.agym-header__cta { padding: 12px 22px; font-size: 13px; }

/* ------------------------------------------------- phone bar (mobile) --- */

/* Lives inside <header> so it sticks with it. Desktop has room for both the
   number and the button beside the menu, so this row only exists below 900. */
.agym-mbar { display: none; }

.agym-mbar__in {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 9px 0 11px;
}

/* One child means one full-width button, not a half-empty row. */
.agym-mbar__in > :only-child { grid-column: 1 / -1; }

.agym-mbar__call,
.agym-mbar__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: .06em;
	font-weight: 600;
	white-space: nowrap;
	/* A long "GET STARTED TODAY" must shrink, not shove the row sideways. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.agym-mbar__call {
	border: 1px solid var(--line-2);
	color: var(--head-fg);
	background: var(--surface);
}

.agym-mbar__call svg { flex: none; color: var(--gold-ink); }

.agym-mbar__cta {
	background: var(--gold);
	color: var(--on-gold);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: 13px;
	box-shadow: var(--shadow-sm);
}

.agym-cartlink {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	transition: border-color .2s ease, color .2s ease;
}

.agym-cartlink:hover { border-color: var(--gold-ink); color: var(--gold-ink); }

.agym-cartlink__n {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 20px;
	background: var(--gold);
	color: var(--on-gold);
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

/* -------------------------------------------------- light / dark switch --- */

.agym-scheme {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	cursor: pointer;
	color: inherit;
	transition: border-color .2s ease, color .2s ease;
}

.agym-scheme:hover { border-color: var(--gold-bd-2); color: var(--gold-ink); }

.agym-scheme__sun,
.agym-scheme__moon {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	transition: opacity .2s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}

/* Light mode offers the moon (go dark); dark mode offers the sun. */
.agym-scheme__sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.agym-scheme__moon { opacity: 1; transform: none; }

:root[data-theme="dark"] .agym-scheme__sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .agym-scheme__moon { opacity: 0; transform: rotate(90deg) scale(.6); }

/* Without JS the switch cannot do anything, so do not offer it. */
.no-js .agym-scheme { display: none; }

/* ---------------------------------------- header sitting on a dark hero --- */

/* In light mode the hero over a photo keeps the dark palette, so the menu on
   top of it has to stay white until the header sticks and gets its own back-
   ground. The body class is only present when that hero is actually inverted. */
.agym-hero-invert .agym-header:not(.is-stuck) {
	--head-fg: #fff;
	--fg-rgb: 255, 255, 255;
	/* The deep "gold text" shade is for white backgrounds; over the hero the
	   bright gold is the legible one. */
	--gold-ink: var(--gold);
	--gold-tint: rgba(255, 255, 255, .14);
	--line-2: rgba(255, 255, 255, .34);
	color: #fff;
}

.agym-hero-invert .agym-header:not(.is-stuck) .agym-logo__name,
.agym-hero-invert .agym-header:not(.is-stuck) .agym-header__phone { color: #fff; }

/* The call button's --surface background is the light one; over the hero photo
   that would be a white slab, so it goes frosted like the other glass buttons. */
.agym-hero-invert .agym-header:not(.is-stuck) .agym-mbar__call {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .38);
	color: #fff;
	backdrop-filter: blur(8px);
}

/* -------------------------------------------------------------- burger --- */

.agym-burger {
	display: none;
	width: 44px;
	height: 40px;
	background: none;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	cursor: pointer;
	padding: 0;
	position: relative;
}

.agym-burger span {
	position: absolute;
	left: 12px;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .28s ease, opacity .2s ease;
}

.agym-burger span:nth-child(1) { top: 13px; }
.agym-burger span:nth-child(2) { top: 19px; }
.agym-burger span:nth-child(3) { top: 25px; }

.agym-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.agym-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.agym-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------- footer --- */

.agym-footer {
	position: relative;
	/* Comes from the tokens, not a fixed hex: .agym-invert supplies the dark
	   palette by default, and a panel colour brings its matching text with it. */
	background: var(--sec-bg, var(--bg));
	color: var(--sec-fg, var(--fg));
	overflow: hidden;
}

.agym-footer__badges {
	border-bottom: 1px solid var(--line);
	padding: 30px 0;
}

.agym-footer__badges ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.agym-footer__badges li {
	display: flex;
	align-items: center;
	gap: 13px;
}

.agym-footer__badgeicon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--gold-tint);
	color: var(--gold-ink);
	flex: none;
}

.agym-footer__badges strong {
	display: block;
	font-family: var(--font-display);
	font-size: 14.5px;
	letter-spacing: .11em;
	font-weight: 600;
}

.agym-footer__badges em {
	font-style: normal;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.agym-footer__grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1.3fr;
	gap: 44px;
	padding: 62px 0 48px;
	position: relative;
	z-index: 2;
}

.agym-foot__t {
	font-size: 14px;
	letter-spacing: .2em;
	margin-bottom: 18px;
	color: var(--gold-ink);
}

.agym-footer__about { color: var(--muted); max-width: 42ch; margin: 20px 0; }

.agym-footer__social { display: flex; gap: 10px; }

.agym-footer__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	color: var(--muted);
	transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.agym-footer__social a:hover {
	color: var(--gold-ink);
	border-color: var(--gold-ink);
	transform: translateY(-2px);
}

.agym-footer__menu li { margin-bottom: 9px; }

.agym-footer__menu a {
	color: var(--muted);
	transition: color .2s ease, padding-left .2s ease;
	display: inline-block;
}

.agym-footer__menu a:hover { color: var(--gold-ink); padding-left: 5px; }

.agym-footer__contact li {
	display: flex;
	gap: 11px;
	margin-bottom: 13px;
	color: var(--muted);
}

.agym-footer__contact svg { flex: none; color: var(--gold-ink); margin-top: 4px; }
.agym-footer__contact a:hover { color: var(--gold-ink); }

/* ------------------------------------------------------- app store links --- */

.agym-footer__app { margin-top: 26px; }

.agym-footer__applinks { display: flex; gap: 10px; flex-wrap: wrap; }

.agym-footer__applinks a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px 9px 13px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	color: var(--sec-fg, var(--fg));
	transition: border-color .2s ease, transform .2s ease;
}

.agym-footer__applinks a:hover { border-color: var(--gold-ink); transform: translateY(-2px); }
.agym-footer__applinks svg { flex: none; }
.agym-footer__applinks span { display: flex; flex-direction: column; line-height: 1.15; }
.agym-footer__applinks em { font-style: normal; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.agym-footer__applinks strong { font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; font-weight: 600; }

.agym-footer__bar {
	border-top: 1px solid var(--line);
	padding: 20px 0;
	position: relative;
	z-index: 2;
}

.agym-footer__bar .agym-wrapin {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.agym-footer__bar p { margin: 0; color: var(--muted); font-size: 14px; }

.agym-footer__bar a {
	color: var(--muted);
	border-bottom: 1px solid var(--line-2);
	padding-bottom: 1px;
	transition: color .2s ease, border-color .2s ease;
}

.agym-footer__bar a:hover { color: var(--gold-ink); border-color: var(--gold-ink); }

.agym-footer__legal { display: flex; gap: 20px; }
.agym-footer__legal a { color: var(--muted); font-size: 14px; }
.agym-footer__legal a:hover { color: var(--gold-ink); }

.agym-footer__watermark {
	position: absolute;
	left: 50%;
	bottom: -2%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: clamp(70px, 15vw, 210px);
	letter-spacing: .06em;
	color: rgba(var(--fg-rgb), .022);
	pointer-events: none;
	white-space: nowrap;
	z-index: 1;
	line-height: 1;
}

/* ------------------------------------------------------------- to top ---- */

.agym-totop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--gold);
	color: var(--on-gold);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	box-shadow: var(--shadow-md);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.agym-totop svg { transform: rotate(-90deg); }
.agym-totop.is-on { opacity: 1; visibility: visible; transform: none; }

/* ----------------------------------------------------------- lightbox ---- */

.agym-lb {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(12, 10, 8, .94);
	display: grid;
	grid-template-columns: 70px 1fr 70px;
	align-items: center;
	padding: 20px;
	backdrop-filter: blur(3px);
}

.agym-lb[hidden] { display: none; }

.agym-lb__fig { margin: 0; text-align: center; }

.agym-lb__img {
	max-height: 82vh;
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--radius-lg);
}

.agym-lb__cap {
	margin-top: 16px;
	color: rgba(255, 255, 255, .7);
	font-family: var(--font-display);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: 13px;
}

.agym-lb button {
	background: none;
	border: 0;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	opacity: .6;
	transition: opacity .2s ease;
}

.agym-lb button:hover { opacity: 1; }

.agym-lb__close {
	position: absolute;
	top: 14px;
	right: 20px;
	font-size: 34px !important;
}