/* Hallmark · shape: Feature Stack (draw 9f17aa) · genre: editorial · theme: Sport (deal 1/3, seed personal-training-coaching-studio-747f·1e7ac281·2026-11-06·r0) · redesign: full
 * hero: Index · nav: edge-aligned · footer: colophon block (swap: single page, no sitemap) · imagery: photographs (the user's) · signature: the bookable offer as an index beside the gym photograph
 * axes: light/display-condensed/chromatic-volt · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the photographs are one shoot so the page leans on type and rules for variety */
/* Hallmark · brand kept: DOQUE pink #ff005c from the logo replaces the theme's volt, used as a fill under ink only; photographs in their own colour at the owner's request */
@import url("./tokens.css");
@import url("./base.css");

/* Self-hosted fonts (SIL Open Font License, see assets/fonts): no visitor IP goes to Google */
@font-face { font-family: "Saira Condensed"; src: url("assets/fonts/saira-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("assets/fonts/albert-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("assets/fonts/albert-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root { --nav-h: 72px; }
html { scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
h1, h2, h3 { text-transform: uppercase; line-height: 1.02; }
p + p { margin-top: var(--space-md); }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a:hover { text-decoration-color: var(--color-accent-deep); }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: var(--space-sm) var(--space-lg);
  border: var(--rule-bar) solid transparent; border-radius: var(--radius-card);
  font: var(--display-weight) var(--text-md)/1.25 var(--font-display); text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-deep); color: var(--color-paper); }
.btn--primary:active { background: var(--color-ink); color: var(--color-paper); }
.btn--secondary { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.btn--secondary:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--secondary:active { background: var(--color-ink-2); color: var(--color-paper); }
.btn--sm { min-height: 40px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.btn--block { width: 100%; }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.photo { position: relative; border-radius: var(--radius-card); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav.is-scrolled { border-bottom-color: var(--color-rule-2); }
.nav__inner { display: flex; align-items: center; gap: var(--space-lg); height: var(--nav-h); }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav__links a { font-size: var(--text-sm); font-weight: 500; text-decoration: none; padding-block: var(--space-xs); border-bottom: var(--rule-bar) solid transparent; transition: border-color var(--dur-micro) var(--ease-out); }
.nav__links a:hover, .nav__links a.is-active { border-bottom-color: var(--color-accent-deep); }
.nav__ig { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-card); color: var(--color-ink); }
.nav__ig:hover { background: var(--color-paper-2); }
.nav__ig svg { width: 20px; height: 20px; fill: currentColor; }
.nav__toggle { display: none; width: 44px; height: 44px; margin-left: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2xs); }
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out); }
.nav.is-open .nav__toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---------- Hero: Index posture ---------- */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "text img" "index img" "stats stats";
  column-gap: var(--space-2xl); row-gap: var(--space-xl);
}
.hero__text { grid-area: text; }
.hero__title { font-size: var(--text-display); max-width: 12ch; }
.hero__lead { margin-top: var(--space-lg); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__img { grid-area: img; min-height: 520px; }
.index { grid-area: index; align-self: end; border-top: var(--rule-bar) solid var(--color-rule-2); }
.index__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md);
  padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule);
  text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out);
}
.index__row:hover { background: var(--color-paper-2); }
.index__row--lead { background: var(--color-accent); color: var(--color-accent-ink); border-bottom-color: var(--color-accent); }
.index__row--lead:hover { background: var(--color-accent-deep); color: var(--color-paper); }
.index__name { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; }
.index__note { grid-column: 1; font-size: var(--text-sm); }
.index__val { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: var(--display-weight) var(--text-xl)/1 var(--font-display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.hero__stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-bar) solid var(--color-rule-2); }
.hero__stats li { padding: var(--space-md) var(--space-lg) 0 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.hero__stats li + li { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.hero__stats strong { font: var(--display-weight) var(--text-display-s)/0.95 var(--font-display); font-variant-numeric: tabular-nums; }
.hero__stats span { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* ---------- Feature Stack: sticky pane, content scrolling beside it ---------- */
.stack { padding-block: var(--section-gap-s); border-top: var(--rule-bar) solid var(--color-rule-2); }
.stack--well { background: var(--color-paper-2); }
.stack__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.stack__pane { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; }
.stack__pane p { max-width: 46ch; }
.stack__flow { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; }
.stack__img { aspect-ratio: 3 / 2; }
.stack__caption { font-size: var(--text-sm); color: var(--color-muted); margin-top: calc(var(--space-md) * -1); }
.stack__sub { font-size: var(--text-title); }
.pull { font: var(--display-weight) var(--text-xl)/1.15 var(--font-display); text-transform: uppercase; padding-left: var(--space-md); border-left: var(--rule-bar) solid var(--color-accent); }

.ruled { border-top: var(--rule-hair) solid var(--color-rule); }
.ruled li { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.ruled--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }

.focus { border-top: var(--rule-bar) solid var(--color-rule-2); }
.focus > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-lg); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.focus dt { font: var(--display-weight) var(--text-lg)/1.15 var(--font-display); text-transform: uppercase; }

/* Tabs: the Switcher */
.tabs__list { display: flex; flex-wrap: wrap; border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.tabs__list [role="tab"] {
  padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: transparent; color: var(--color-ink);
  font: var(--display-weight) var(--text-md)/1.2 var(--font-display); text-transform: uppercase; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.tabs__list [role="tab"]:hover { background: var(--color-paper-3); }
.tabs__list [role="tab"][aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.tabs__list [role="tab"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
[role="tabpanel"] { padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
[role="tabpanel"] h3 { font-size: var(--text-title); }
.steps { counter-reset: step; border-top: var(--rule-hair) solid var(--color-rule); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: 1 / span 2; font: 500 var(--text-lg)/1.2 var(--font-outlier); color: var(--color-muted); }
.steps strong { font: var(--display-weight) var(--text-lg)/1.15 var(--font-display); text-transform: uppercase; }
.formula { font: var(--display-weight) var(--text-xl)/1.2 var(--font-display); text-transform: uppercase; }
.formula strong { background: var(--color-accent); color: var(--color-accent-ink); padding: 0 var(--space-xs); border-radius: var(--radius-card); }

/* Price */
.price { width: 100%; border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-md); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.price__label, .price__per { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.figure { font: var(--display-weight) clamp(4rem, 6vw + 1rem, 7rem)/0.9 var(--font-display); font-variant-numeric: tabular-nums; }
.price .btn { margin-top: var(--space-sm); }

/* ---------- Free trial ---------- */
.trial { padding-block: var(--section-gap-s); border-top: var(--rule-bar) solid var(--color-rule-2); }
.trial__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.trial__img { aspect-ratio: 4 / 3; }
.trial__text { display: flex; flex-direction: column; gap: var(--space-lg); }
.trial__text h2 { font-size: var(--text-display-s); }
.trial__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.trial__mail { font-size: var(--text-sm); color: var(--color-muted); }
.trial__mail a { color: var(--color-ink); }

/* ---------- Results ---------- */
.results { padding-block: var(--section-gap-s); border-top: var(--rule-bar) solid var(--color-rule-2); background: var(--color-paper-2); }
.results__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-xl); }
.ba-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.ba { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--color-paper); pointer-events: none; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 2; }
.ba:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ba__label { position: absolute; bottom: var(--space-sm); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); font-weight: 500; z-index: 1; }
.ba__label--l { left: var(--space-sm); }
.ba__label--r { right: var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); }
.gains { display: flex; flex-wrap: wrap; margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.gains li { padding: var(--space-sm) var(--space-lg) var(--space-sm) 0; margin-right: var(--space-lg); font-weight: 500; }

/* ---------- Reviews ---------- */
.reviews-sec { padding-block: var(--section-gap-s); border-top: var(--rule-bar) solid var(--color-rule-2); }
.reviews__head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.slider-nav { display: flex; gap: var(--space-xs); }
.icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.icon-btn:hover { background: var(--color-ink); color: var(--color-paper); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.25; }
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap-columns)) / 3); gap: var(--gap-columns); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-top: var(--rule-bar) solid var(--color-rule-2); }
.reviews::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.review p { font-size: var(--text-md); }
.review cite { font: var(--display-weight) var(--text-md)/1.2 var(--font-display); font-style: normal; text-transform: uppercase; }

/* ---------- Team ---------- */
.team-sec { padding-block: var(--section-gap-s); border-top: var(--rule-bar) solid var(--color-rule-2); }
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-xl); }
.member { display: flex; flex-direction: column; gap: var(--space-sm); }
.member__img { aspect-ratio: 4 / 3; margin-bottom: var(--space-sm); }
.member h3 { font-size: var(--text-section); }
.member__role { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* Accordion */
.accordion { border-top: var(--rule-bar) solid var(--color-rule-2); }
.accordion details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; cursor: pointer; list-style: none; font: var(--display-weight) var(--text-lg)/1.2 var(--font-display); text-transform: uppercase; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font: 500 var(--text-lg)/1 var(--font-outlier); transition: transform var(--dur-short) var(--ease-out); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion summary:hover { color: var(--color-accent-deep); }
.accordion summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.accordion details p { padding-bottom: var(--space-md); }

/* ---------- Knowledge: the one ink band ---------- */
.knowledge { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-paper); }
.knowledge__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--space-2xl); }
.knowledge__grid > h2 { font-size: var(--text-section); }
.knowledge__sub { font-size: var(--text-title); margin-bottom: var(--space-md); }
.knowledge .ruled, .knowledge .ruled li { border-color: var(--color-rule-2); }
.knowledge .ruled--cols { grid-template-columns: minmax(0, 1fr); }
.partners { grid-column: 1 / -1; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); }
.partners__label { font-size: var(--text-sm); font-weight: 500; }
.partners__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); }
.partners__logos img { height: 40px; width: auto; }

/* ---------- Also in this gym + Instagram ---------- */
.more { padding-block: var(--section-gap-s); }
.more__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
.more__title { font-size: var(--text-title); margin-bottom: var(--space-sm); }
.also > p, .insta > p { margin-bottom: var(--space-lg); color: var(--color-muted); }
.also > p { font-size: var(--text-sm); }
.also__card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.also__card:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.also__card:hover { background: var(--color-paper-2); }
.also__img { aspect-ratio: 1; }
.also__logo { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-card); background: var(--color-paper-2); padding: var(--space-sm); }
.also__text { display: flex; flex-direction: column; gap: var(--space-3xs); }
.also__text b { font: var(--display-weight) var(--text-lg)/1.15 var(--font-display); text-transform: uppercase; }
.also__text span { font-size: var(--text-sm); color: var(--color-muted); }
.also__text em { font-style: normal; font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 0.16em; }
.insta__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.insta__grid .photo { aspect-ratio: 1; }
.insta__grid:hover .photo { outline-color: var(--color-accent-deep); }

/* ---------- Contact ---------- */
.contact-sec { padding-block: var(--section-gap-s); border-top: var(--rule-bar) solid var(--color-rule-2); }
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.contact__info { display: flex; flex-direction: column; gap: var(--space-lg); }
.facts { border-top: var(--rule-bar) solid var(--color-rule-2); }
.facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt, .hours li > span:first-child { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.hours-box { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); padding: var(--space-md); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.hours-box__head { display: flex; align-items: center; justify-content: space-between; font: var(--display-weight) var(--text-lg)/1.2 var(--font-display); text-transform: uppercase; margin-bottom: var(--space-sm); }
.status { font: 500 var(--text-xs)/1 var(--font-body); font-style: normal; text-transform: none; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-card); }
.status.is-open { background: var(--color-accent); color: var(--color-accent-ink); }
.status.is-closed { background: var(--color-paper-3); color: var(--color-ink); }
.hours li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.hours li.is-today { background: var(--color-paper); margin-inline: calc(var(--space-xs) * -1); padding-inline: var(--space-xs); }
.time { font: 500 var(--text-md)/1.4 var(--font-outlier); font-variant-numeric: tabular-nums; }

.form { display: flex; flex-direction: column; gap: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-lg); }
.form h3 { font-size: var(--text-title); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.form label { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 48px; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--color-muted); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
.form textarea { resize: vertical; }
.form .is-invalid { border-color: var(--color-error); }
.form__note { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Footer: colophon ---------- */
.footer { border-top: var(--rule-bar) solid var(--color-rule-2); padding-block: var(--space-2xl) var(--space-3xl); }
.footer__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: start; }
.footer__logo { height: 32px; width: auto; }
.footer__colophon { font-size: var(--text-sm); color: var(--color-muted); }
.footer__colophon p + p { margin-top: var(--space-2xs); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); }

/* Floating WhatsApp */
.wa-fab { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-raised); display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); transition: background-color var(--dur-micro) var(--ease-out); }
.wa-fab:hover { background: var(--color-accent-deep); }
.wa-fab svg { width: 28px; height: 28px; fill: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 75rem) {
  .nav__links { gap: var(--space-md); }
  .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews { grid-auto-columns: calc((100% - var(--gap-columns)) / 2); }
}
@media (max-width: 60rem) {
  :root { --nav-h: 64px; }
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .nav__links { position: fixed; inset: var(--nav-h) 0 0 0; flex-direction: column; gap: 0; margin: 0; padding: var(--space-lg) var(--gutter); background: var(--color-paper); visibility: hidden; opacity: 0; transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short); }
  .nav__links a { font: var(--display-weight) var(--text-2xl)/1.2 var(--font-display); text-transform: uppercase; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; }
  .nav__ig { margin-left: auto; }
  .nav__toggle { margin-left: 0; }
  .hero { padding-top: var(--space-xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "img" "index" "stats"; }
  .hero__img { min-height: 0; aspect-ratio: 4 / 3; }
  .stack__grid, .trial__grid, .results__head, .more__grid, .contact, .knowledge__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .stack__pane { position: static; }
  .team { grid-template-columns: minmax(0, 1fr); }
  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  .hero__stats { grid-template-columns: minmax(0, 1fr); }
  .hero__stats li + li { padding-left: 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
  .hero__stats li { padding: var(--space-sm) 0; flex-direction: row; align-items: baseline; gap: var(--space-sm); }
  .ba-grid { grid-template-columns: minmax(0, 1fr); }
  .reviews { grid-auto-columns: 88%; }
  .ruled--cols, .focus > div, .form__row { grid-template-columns: minmax(0, 1fr); }
  .focus > div { gap: var(--space-2xs); }
  .wa-fab { right: var(--space-md); bottom: var(--space-md); }
}

/* ---------- Motion (owner asked for animations) ----------
   Only transform and opacity. Hidden start states apply only under .js, so the page reads fine without scripting;
   base.css collapses every duration under prefers-reduced-motion, so everything simply appears. */
@keyframes rise { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* Hero entrance on load */
.js .hero__title span { display: inline-block; animation: rise 0.8s var(--ease-out) both; }
.js .hero__title span:nth-child(2) { animation-delay: 0.12s; }
.js .hero__title span:nth-child(3) { animation-delay: 0.22s; }
.js .hero__lead { animation: rise 0.8s var(--ease-out) 0.32s both; }
.js .hero__actions { animation: rise 0.8s var(--ease-out) 0.42s both; }
.js .hero__img > img { animation: settle 1.2s var(--ease-out) both; }
.js .index li { animation: slide-in 0.7s var(--ease-out) both; }
.js .index li:nth-child(1) { animation-delay: 0.5s; }
.js .index li:nth-child(2) { animation-delay: 0.6s; }
.js .index li:nth-child(3) { animation-delay: 0.7s; }
.js .hero__stats { animation: rise 0.8s var(--ease-out) 0.6s both; }

/* Scroll reveal: script.js tags elements with .rv and adds .is-in when they enter the viewport */
.js .rv { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--rv-delay, 0s); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv [data-slot] > img, .js [data-slot].rv > img { transform: scale(1.1); transition: transform 1.4s var(--ease-out); transition-delay: var(--rv-delay, 0s); }
.js .rv.is-in [data-slot] > img, .js [data-slot].rv.is-in > img { transform: none; }

/* Hover: buttons lift, rows nudge, photos zoom a touch */
.btn { transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.index__name { display: inline-block; transition: transform var(--dur-short) var(--ease-out); }
.index__row:hover .index__name { transform: translateX(6px); }
.member__img > img, .insta__grid img, .also__card img { transition: transform 0.6s var(--ease-out); }
.member:hover .member__img > img, .insta__grid:hover img, .also__card:hover img { transform: scale(1.05); }
/* after the reveal has finished, hand the photo back to the quicker hover zoom */
.js .member.is-in .member__img > img { transition-duration: 0.6s; transition-delay: 0s; }
.js .member.is-in:hover .member__img > img { transform: scale(1.05); }