/* RRG Boxing Club, rrgboxing.club
   One stylesheet for every page. Source of site/assets/css/main.css (built by web/build.py).

   Direction: speed. The hero is Murat Temur's punch with the ring smeared into speed lines and
   graded to the blue of the RRG shield. The whole site keeps that one theme, the three colours of
   the logo: deep shield blue for the dark chapters and the chrome, white and a cool blue white
   for the light ones, and the glove red for the main action only.
   Rules this file follows, from unslop by Damir Sokolovsky (@heydamir, CC BY 4.0) and Apple's
   design talks (WWDC):
   - one family, Archivo. Body 400, labels 500, headlines 600 slightly condensed in sentence case
   - blue for kickers, links and icons, red only on the main button of a screen
   - one icon set (Lucide), 18px, 1.5 stroke
   - buttons are pills, cards 16, panels 20
   - signature: the quiz counts its steps in rounds ("Raunt 1 / 5"), nowhere else
   - three text roles (primary, secondary, muted), hairlines at 8%
   - every space on a 4px grid, written in rem so it scales with the reader's text size
   - radius by size: controls 10, cards 16, panels 20
   - one easing curve (and its mirror for exits): feedback 120 to 160ms, menus 200ms,
     entrances 480ms with a 12px rise; only transform, opacity and clip-path animate
   - translucent chrome; solid when the reader asks for less transparency or more contrast
   - no period at the end of headings, labels, buttons and captions */

/* ---------- Font ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 70% 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 70% 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-tr.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-tr.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* surfaces */
  --bg: #ffffff;
  --bg-alt: #f1f4fb;            /* cool blue white */
  --surface: #ffffff;
  --ink: #0a1236;               /* shield blue: dark chapters, nav, footer */
  --ink-deep: #060a20;          /* the hero night and the footer */
  --ink-2: #131d4f;

  /* text roles */
  --text: #0b1230;
  --text-2: #4b5576;
  --text-3: #6f7896;
  --on-dark: #f4f6ff;
  --on-dark-2: rgba(244, 246, 255, 0.72);
  --hairline: rgba(11, 18, 48, 0.08);
  --hairline-strong: rgba(11, 18, 48, 0.15);
  --hairline-dark: rgba(255, 255, 255, 0.16);

  /* the blue of the shield, for kickers, links, icons and focus. 8:1 on white */
  --blue: #2440c0;
  --blue-hover: #1a2f94;
  --blue-on-dark: #a3b5ff;
  --blue-soft: rgba(36, 64, 192, 0.08);

  /* the red of the gloves on the shield, for the main action. 5:1 under white text */
  --accent: #d0202a;
  --accent-hover: #b3161f;
  --accent-on-dark: #ff6168;
  --danger: #d70015;

  /* spacing, 4px grid */
  --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;   --s5: 1.25rem; --s6: 1.5rem;
  --s8: 2rem;     --s10: 2.5rem; --s12: 3rem;   --s16: 4rem;  --s20: 5rem;   --s24: 6rem; --s32: 8rem;

  --gutter: var(--s5);
  --max: 72.5rem;
  --section: var(--s20);
  --head-gap: var(--s12);
  --nav-h: 3.5rem;

  /* radius by size */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* type scale */
  --fs-xs: 0.8125rem;                                   /* 13 meta, captions */
  --fs-sm: 0.9375rem;                                   /* 15 nav, labels */
  --fs-md: 1.0625rem;                                   /* 17 body, buttons */
  --fs-lg: 1.25rem;                                     /* 20 card titles, lead */
  --fs-xl: 1.5rem;                                      /* 24 small headings */
  --fs-2xl: 2rem;                                       /* 32 */
  --fs-h2: clamp(2.125rem, 1.5rem + 2.8vw, 4rem);       /* 34 to 64 */
  --fs-hero: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);    /* 40 to 84 */

  /* motion: one curve, its mirror for exits */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --t-press: 120ms;
  --t-hover: 160ms;
  --t-menu: 200ms;
  --t-enter: 480ms;
  --rise: 12px;
}
@media (min-width: 48rem) {
  :root { --gutter: var(--s8); --section: var(--s24); --head-gap: var(--s16); }
}
@media (min-width: 64rem) {
  :root { --section: var(--s32); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* a jump to a section lands its top edge right under the bar */
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  background: var(--bg);
  color: var(--text);
  font-family: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
figure { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a, button, summary, input, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
main { flex: 1 0 auto; }
::selection { background: rgba(36, 64, 192, 0.2); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-xs); }
[tabindex="-1"]:focus { outline: none; }

.skip {
  position: absolute; left: var(--s3); top: -6rem; z-index: 100;
  padding: var(--s2) var(--s4); border-radius: var(--r-sm); background: var(--text); color: #fff;
  font-size: var(--fs-sm); font-weight: 500;
}
.skip:focus { top: var(--s3); }
.icon { width: 18px; height: 18px; flex: none; stroke-width: 1.5; }

/* ---------- Layout and type ---------- */
.container { width: min(100% - 2 * var(--gutter) - env(safe-area-inset-left) - env(safe-area-inset-right), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--first { padding-top: var(--s16); }
.section-head { max-width: 52rem; margin-bottom: var(--head-gap); }
.section-head--center { max-width: 64rem; margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: var(--s5); max-width: 40rem; }
.section-head--center .lead { margin-inline: auto; }

/* The display voice: semibold, slightly condensed, sentence case, tight at large sizes */
.display {
  font-stretch: 88%; font-weight: 600;
  line-height: 1.02; letter-spacing: -0.025em;
}
.h2 { font-size: var(--fs-h2); }
.h3-lg { font-size: var(--fs-2xl); line-height: 1.2; }
.lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); line-height: 1.5; color: var(--text-2); }
.section--dark .lead { color: var(--on-dark-2); }
.kicker { margin-bottom: var(--s3); font-size: var(--fs-sm); font-weight: 500; color: var(--blue); }
.section--dark .kicker, .shop__card--dark .kicker { color: var(--blue-on-dark); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.nowrap { white-space: nowrap; }
.rounded { border-radius: var(--r-lg); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 3rem; padding: 0 var(--s6); border: 0; border-radius: var(--r-pill);
  font-size: var(--fs-md); font-weight: 500; line-height: 1;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform var(--t-press) ease-out, background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--hairline-dark); }
.btn--glass {
  background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--quiet { background: transparent; color: var(--text-2); padding-inline: var(--s2); }
.btn--sm { position: relative; min-height: 2.25rem; padding: 0 var(--s5); font-size: var(--fs-sm); }
.btn--sm::after { content: ""; position: absolute; inset: -4px 0; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn .icon { width: 18px; height: 18px; }

.link-more {
  position: relative; display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--blue); font-weight: 500;
  transition: opacity var(--t-press) ease-out, color var(--t-hover) var(--ease);
}
.link-more::after { content: ""; position: absolute; inset: -10px -4px; }
.link-more .icon { transition: transform var(--t-hover) var(--ease); }
.link-more:active { opacity: 0.6; }
.link-more--light { color: #fff; }
.section--dark .link-more { color: var(--blue-on-dark); }

/* ---------- Navigation: clear over the hero photo, shield blue glass once the page scrolls ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); color: var(--on-dark); }
/* the material lives on a layer behind the bar, a blur on the bar itself would trap the fixed menu */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 18, 54, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: opacity var(--t-menu) var(--ease);
}
.nav.is-clear::before { opacity: 0; }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); min-height: 2.75rem; flex-shrink: 0; white-space: nowrap; font-weight: 500; font-size: var(--fs-md); }
.brand__logo { width: 2.25rem; height: auto; }
.nav__links { display: flex; align-items: center; gap: var(--s8); font-size: var(--fs-sm); letter-spacing: 0.01em; }
.nav__links a { color: rgba(255, 255, 255, 0.78); transition: color var(--t-hover) var(--ease); }
.nav__links a[aria-current="true"] { color: #fff; }
.nav__links a:active { color: rgba(255, 255, 255, 0.5); }
.nav__actions { display: flex; align-items: center; gap: var(--s1); }
.nav__toggle {
  display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-right: calc(-1 * var(--s3));
  border: 0; background: none; cursor: pointer;
}
.nav__toggle span {
  position: absolute; left: 13px; width: 18px; height: 1.5px; border-radius: 2px; background: #fff;
  transition: transform var(--t-menu) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 18px; }
.nav__toggle span:nth-child(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 49;
  padding: var(--s6) calc(var(--gutter) + env(safe-area-inset-right)) calc(var(--s10) + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
  background: rgba(10, 18, 54, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--s2)));
  transition: opacity var(--t-menu) var(--ease-in), transform var(--t-menu) var(--ease-in), visibility 0s linear var(--t-menu);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-menu) var(--ease), transform var(--t-menu) var(--ease), visibility 0s;
}
.menu__links { display: grid; }
.menu__links a {
  display: flex; align-items: center; min-height: 3.25rem;
  font-size: 1.75rem; font-weight: 500;
  opacity: 0; transform: translateY(calc(-1 * var(--s2)));
  transition: opacity var(--t-menu) var(--ease), transform var(--t-enter) var(--ease), color var(--t-press) ease-out;
}
.menu__links a:active { color: var(--on-dark-2); }
.menu.is-open .menu__links a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 40ms + 40ms); }
.menu__cta { margin-top: var(--s8); display: grid; gap: var(--s3); }

/* ---------- Hero: the punch in speed lines fills the first screen, the words on its calm left ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));
  min-height: max(40rem, 100svh);
  display: flex; flex-direction: column;
  background: var(--ink-deep); color: #fff;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 62% 32%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 10, 32, 0.55) 0%, rgba(6, 10, 32, 0) 16%),
    linear-gradient(90deg, rgba(6, 10, 32, 0.7) 0%, rgba(6, 10, 32, 0.35) 34%, rgba(6, 10, 32, 0) 58%),
    linear-gradient(0deg, rgba(6, 10, 32, 0.72) 0%, rgba(6, 10, 32, 0) 26%);
}
.hero__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + var(--s16)); padding-bottom: var(--s12); }
.hero__text { max-width: 44rem; }
.hero__kicker { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.hero__title { margin-top: var(--s4); font-size: var(--fs-hero); }
.hero__lead { margin-top: var(--s5); max-width: 32rem; font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.hero__actions { margin-top: var(--s8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }
.hero__points { margin-top: var(--s8); display: grid; gap: var(--s3); list-style: none; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.82); }
.hero__points li { display: flex; align-items: center; gap: 10px; }
.hero__points .icon { color: rgba(255, 255, 255, 0.7); }
.hero__foot {
  display: flex; justify-content: flex-end;
  padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom));
}
.hero__next {
  position: relative; display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.86); transition: color var(--t-hover) var(--ease);
}
.hero__next::after { content: ""; position: absolute; inset: -12px -6px; }
.hero__next .icon { width: 16px; height: 16px; }

/* ---------- Training cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s12) var(--s6); list-style: none; }
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card__media { width: 100%; overflow: hidden; border-radius: var(--r-md); background: var(--bg-alt); }
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__meta { margin-top: var(--s5); font-size: var(--fs-sm); color: var(--text-2); }
.card__title { margin-top: var(--s1); font-size: var(--fs-xl); line-height: 1.3; }
.card__text { margin-top: var(--s2); color: var(--text-2); }
.card .link-more { margin-top: var(--s4); }

.branches { margin-top: var(--s24); }
.branches__title { margin-bottom: var(--s8); font-size: var(--fs-xl); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s10); list-style: none; }
.feature { padding-top: var(--s6); border-top: 1px solid var(--hairline-strong); }
.feature__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); }
.feature__title .icon { color: var(--blue); }
.feature p { margin-top: var(--s2); color: var(--text-2); }

/* ---------- Group classes: the team photo grows from a rounded window to the whole screen as you scroll ---------- */
.grow { position: relative; }
.grow__sticky { position: relative; }
.grow__frame { position: relative; height: min(80svh, 46rem); overflow: hidden; background: var(--ink); }
.grow__frame img { width: 100%; height: 100%; object-fit: cover; }
.grow__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 10, 32, 0.72) 0%, rgba(6, 10, 32, 0.3) 32%, rgba(6, 10, 32, 0) 56%);
}
.grow__caption {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-bottom: var(--s12);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s6);
  color: #fff;
}
.grow__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); max-width: 16ch; }
html.js-ready .grow { height: 200svh; }
html.js-ready .grow__sticky { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; }
html.js-ready .grow__frame { height: 100%; will-change: clip-path; }
html.js-ready .grow__caption { will-change: opacity, transform; }

.groups__split { margin-top: var(--section); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s24); }
.split .lead { margin-top: var(--s5); }
.split__more { margin-top: var(--s8); }
.split__media img { width: 100%; }
.section--dark .split__media img { box-shadow: 0 0 0 1px var(--hairline-dark); }
.schedule { margin-top: var(--s8); border-top: 1px solid var(--hairline-strong); }
.schedule__row {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: var(--s4);
  padding-block: var(--s4); border-bottom: 1px solid var(--hairline-strong);
}
.schedule dt { font-weight: 500; }
.schedule dd { color: var(--text-2); }
.schedule dd.num { color: var(--text); }
.groups__cta { margin-top: var(--s8); }

/* ---------- Quiz ---------- */
.quiz-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s16) var(--s24); align-items: start; }
.quiz-wrap__head .lead { margin-top: var(--s5); }
.quiz { position: relative; padding: var(--s10); border-radius: var(--r-lg); background: var(--bg-alt); }
.quiz__progress { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); margin-bottom: var(--s8); }
.quiz__count { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.quiz__bar { display: flex; flex: 1; max-width: 14rem; gap: var(--s1); }
.quiz__bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--hairline-strong); transition: background-color var(--t-enter) var(--ease); }
.quiz__bar i.is-done { background: var(--blue); }
.quiz__bar i.is-now { background: var(--accent); }
html:not(.js-ready) .quiz__progress, html:not(.js-ready) .quiz__nav { display: none; }
.quiz__step + .quiz__step { margin-top: var(--s10); }
html.js-ready .quiz__step { display: none; margin-top: 0; }
html.js-ready .quiz__step.is-active { display: block; animation: enter var(--t-enter) var(--ease); }
.quiz__q { margin-bottom: var(--s5); font-size: var(--fs-xl); font-weight: 500; line-height: 1.3; }
.choices { display: grid; gap: var(--s2); }
.choice {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 3.25rem; padding: var(--s3) var(--s5); border-radius: var(--r-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: pointer; transition: box-shadow var(--t-hover) var(--ease), transform var(--t-press) ease-out;
}
.choice:active { transform: scale(0.99); }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 1rem; }
.choice__check { color: var(--blue); opacity: 0; transform: scale(0.8); transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--blue); background: #f7f9ff; }
.choice:has(input:checked) .choice__check { opacity: 1; transform: none; }
.choice:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.quiz__nav { margin-top: var(--s8); display: flex; justify-content: space-between; align-items: center; }
.quiz__nav [hidden] { display: none; }
.quiz__nav [data-quiz-next] { margin-left: auto; }
.quiz .field input { background: var(--surface); }

/* ---------- Gym: amenities and the photo row ---------- */
.amenities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8); list-style: none; }
.amenities li { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--hairline-strong); font-weight: 500; line-height: 1.4; }
.amenities .icon { color: var(--blue); }

.gallery { margin-top: var(--s16); }
.gallery__track {
  --pad: max(var(--gutter) + env(safe-area-inset-left), (100% - var(--max)) / 2);
  display: flex; gap: var(--s4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--pad); scroll-padding-inline: var(--pad);
  position: relative; user-select: none; -webkit-user-select: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-moving { scroll-snap-type: none; }
@media (pointer: fine) {
  .gallery__track { cursor: grab; }
  .gallery__track.is-dragging { cursor: grabbing; }
}
.gallery__item { flex: 0 0 clamp(15rem, 24vw, 21rem); scroll-snap-align: start; overflow: hidden; border-radius: var(--r-md); background: #e3e8f5; }
.gallery__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.gallery__controls { margin-top: var(--s6); display: flex; justify-content: flex-end; gap: var(--s3); }
html:not(.js-ready) .gallery__controls { display: none; }
.round-btn {
  position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blue-soft); color: var(--blue);
  transition: background-color var(--t-hover) var(--ease), transform var(--t-press) ease-out, opacity var(--t-hover) var(--ease);
}
.round-btn::after { content: ""; position: absolute; inset: -2px; }
.round-btn:active { transform: scale(0.94); }
.round-btn[disabled] { opacity: 0.35; cursor: default; }

/* ---------- Coaches ---------- */
.coaches { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s16) var(--s24); list-style: none; }
.coach { width: 18rem; text-align: center; }
.coach__img { width: 15rem; height: 15rem; margin-inline: auto; border-radius: 50%; object-fit: cover; }
.coach__name { margin-top: var(--s6); font-size: var(--fs-xl); }
.coach__titles { margin-top: var(--s2); list-style: none; color: var(--text-2); display: grid; gap: var(--s1); }

/* ---------- Reviews ---------- */
.reviews-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s10) var(--s16); margin-bottom: var(--head-gap); }
.reviews-head .lead { margin-top: var(--s5); max-width: 40rem; }
.rating { display: flex; align-items: center; gap: var(--s4); }
.rating__num { font-stretch: 88%; font-weight: 600; font-size: clamp(3.5rem, 2.6rem + 3vw, 5.5rem); line-height: 0.9; letter-spacing: -0.01em; }
.rating__label { display: grid; gap: var(--s1); font-weight: 500; }
.rating__label span { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-sm); font-weight: 400; color: var(--blue); }
.rating__label .icon { width: 14px; height: 14px; }
.rating:active { opacity: 0.6; }
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); list-style: none; }
.reviews > li:first-child { grid-column: 1 / -1; }
.review {
  height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s8);
  padding: var(--s8); border-radius: var(--r-md); background: var(--surface);
}
.review blockquote { margin: 0; }
.reviews > li:first-child .review { padding: var(--s12); }
.reviews > li:first-child blockquote { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.4; max-width: 50rem; }
.review figcaption { font-size: var(--fs-sm); font-weight: 500; }
.review figcaption span { display: block; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.01em; color: var(--text-2); }

/* ---------- Gear and shirts ---------- */
.shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.shop__card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s12); border-radius: var(--r-lg); background: var(--bg-alt); min-height: 30rem; }
.shop__card--dark { background: var(--ink); color: var(--on-dark); }
.shop__title { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); }
.shop__text { margin-top: var(--s4); max-width: 26rem; color: var(--text-2); font-size: var(--fs-lg); line-height: 1.5; }
.shop__card--dark .shop__text { color: var(--on-dark-2); }
.shop__list { margin: var(--s8) 0 var(--s10); list-style: none; width: 100%; max-width: 20rem; }
.shop__list li { padding-block: var(--s3); border-bottom: 1px solid var(--hairline-dark); }
.shop__list li:first-child { border-top: 1px solid var(--hairline-dark); }
.shop__card .btn { margin-top: auto; }
.shop__card--shirt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s6); }
.shop__card--shirt > div { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.shop__card--shirt .btn { margin-top: auto; }
.shop__card--shirt .shop__text { margin-bottom: var(--s10); }
.shop__shirt { width: clamp(11rem, 16vw, 15rem); margin-right: calc(-1 * var(--s4)); }

/* ---------- App: two real screens rise from the bottom edge of a blue chapter ---------- */
.app { padding-bottom: 0; overflow: clip; }
.app__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16) var(--s24); align-items: end; }
.app__text { align-self: center; padding-bottom: var(--section); }
.app .lead { margin-top: var(--s5); }
.app__points { margin-top: var(--s8); display: grid; gap: var(--s3); list-style: none; }
.app__points li { display: flex; align-items: center; gap: 10px; }
.app__points .icon { color: var(--blue-on-dark); }
.app__store { margin-top: var(--s10); }
.app__store .icon { width: 20px; height: 20px; margin-top: -2px; }
.app__note { margin-top: var(--s4); font-size: var(--fs-xs); letter-spacing: 0.01em; color: var(--on-dark-2); }
.app__phones { position: relative; height: clamp(30rem, 44vw, 40rem); }
.app__phone { position: absolute; height: auto; }
.app__phone--back { width: clamp(13rem, 19vw, 17.5rem); left: 50%; bottom: -12%; }
.app__phone--front { width: clamp(15rem, 22vw, 20rem); left: 6%; bottom: -30%; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16) var(--s24); align-items: start; }
.contact .lead { margin-top: var(--s5); }
.rows { margin-top: var(--s10); display: grid; gap: var(--s5); list-style: none; }
.row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.row .icon { margin-top: 4px; color: var(--blue); }

.form-card { padding: var(--s10); border-radius: var(--r-lg); background: var(--surface); }
.form-card__title { font-size: var(--fs-xl); }
.form-card__text { margin: var(--s1) 0 var(--s8); color: var(--text-2); }
.field { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.field input {
  width: 100%; min-height: 3rem; padding: var(--s3) var(--s4);
  border: 1px solid transparent; border-radius: var(--r-sm); background: var(--bg-alt);
  color: var(--text); font: inherit; font-size: var(--fs-md); line-height: 1.4;
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder { color: var(--text-3); }
.field input:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36, 64, 192, 0.14); }
.field.is-invalid input { border-color: var(--danger); background: #fff; }
.field.is-invalid input:focus { box-shadow: 0 0 0 4px rgba(215, 0, 21, 0.12); }
.field__error { font-size: var(--fs-xs); letter-spacing: 0.01em; color: var(--danger); }
.field__error:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__consent { margin-top: var(--s4); text-align: center; font-size: var(--fs-xs); letter-spacing: 0.01em; color: var(--text-2); }
.form__consent a, .form__status a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.form__status { margin-top: var(--s4); font-size: var(--fs-sm); text-align: center; }
.form__status:empty { display: none; }
.form__status.is-error { color: var(--danger); }
.form-success { display: none; text-align: center; padding: var(--s8) var(--s2); }
.form-success .icon { width: 48px; height: 48px; margin: 0 auto var(--s5); color: var(--blue); }
.form-success h3 { font-size: var(--fs-xl); }
.form-success p { margin-top: var(--s2); color: var(--text-2); }
form.is-sent .form__fields, form.is-sent .quiz__progress { display: none; }
form.is-sent .form-success { display: block; animation: enter var(--t-enter) var(--ease); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: spin 700ms linear infinite; display: none; }
form.is-sending .spinner { display: block; }

.visit {
  margin-top: var(--s24); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  overflow: hidden; border-radius: var(--r-lg); background: var(--surface);
}
.visit__media img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }
.visit__body { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s12); }
.contact__list { margin-top: var(--s6); display: grid; gap: var(--s3); list-style: none; }
.contact__list a, .contact__list li > span { display: inline-flex; align-items: center; gap: var(--s3); }
.contact__list a { transition: color var(--t-hover) var(--ease); }
.contact__list a:active { opacity: 0.6; }
.contact__list .icon { color: var(--blue); }
.visit__cta { margin-top: var(--s10); }

/* ---------- Footer ---------- */
.footer { background: var(--ink-deep); color: var(--on-dark-2); font-size: var(--fs-xs); letter-spacing: 0.01em; line-height: 1.5; padding-block: var(--s16) var(--s8); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.footer__about p { margin-top: var(--s3); max-width: 18rem; }
.footer .brand { color: var(--on-dark); letter-spacing: 0; }
.footer h2 { margin-bottom: var(--s3); font-size: var(--fs-xs); font-weight: 500; color: var(--on-dark); }
.footer ul { display: grid; gap: var(--s2); list-style: none; }
.footer a { transition: color var(--t-hover) var(--ease); }
.footer__bottom { margin-top: var(--s12); padding-top: var(--s5); border-top: 1px solid var(--hairline-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s6); }

.footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s6); }
/* the maker's credit: quiet, one line, the Salonu Yönet check mark in its own blue */
.credit { display: inline-flex; align-items: center; gap: var(--s2); }
.credit strong { font-weight: 500; color: var(--on-dark); }
.credit__mark { width: 14px; height: 14px; color: #3d7dff; }   /* Salonu Yönet blue, lifted for the dark footer */

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: calc(var(--s5) + env(safe-area-inset-right)); bottom: calc(var(--s5) + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--ink); color: #fff; box-shadow: 0 8px 24px rgba(10, 18, 54, 0.24);
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(var(--rise)) scale(0.92); pointer-events: none;
  transition: opacity var(--t-menu) var(--ease-in), transform var(--t-menu) var(--ease-in);
}
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); }
.wa-float:active { transform: scale(0.94); transition-duration: var(--t-press); }
.wa-float .icon { width: 26px; height: 26px; }

/* ---------- Simple pages ---------- */
.page-center { min-height: calc(100svh - 18rem); display: grid; align-items: center; }
.lost { max-width: 40rem; }
.lost .lead { margin-top: var(--s5); }
.lost__actions { margin-top: var(--s10); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s8); }

.prose { max-width: 45rem; }
.prose h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.prose .meta { margin-top: var(--s4); color: var(--text-2); }
.prose h2 { margin: var(--s12) 0 var(--s3); font-size: var(--fs-xl); line-height: 1.3; }
.prose p { margin-top: var(--s3); }
.prose ul { margin-top: var(--s3); padding-left: var(--s5); }
.prose li { margin-top: var(--s2); }
.prose li::marker { color: var(--text-3); }
.prose strong { font-weight: 500; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Touch screens: small text links get finger sized rows ---------- */
@media (pointer: coarse) {
  .footer ul { gap: 0; }
  .footer ul a, .footer__bottom a { display: inline-block; padding-block: var(--s2); }
  .footer__bottom a.credit { display: inline-flex; }
  .contact__list { gap: var(--s1); }
  .contact__list a { min-height: 2.75rem; }
  .form__consent a { display: inline-block; padding-block: var(--s3); }
}

/* ---------- Hover, only for a real pointer ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--dark:hover { background: var(--ink-2); }
  .btn--light:hover { background: #e6ebf8; }
  .btn--glass:hover { background: rgba(255, 255, 255, 0.22); }
  .hero__next:hover { color: #fff; }
  .link-more:hover { color: var(--blue-hover); }
  .section--dark .link-more:hover, .link-more--light:hover { color: #fff; }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
  .btn--quiet:hover { color: var(--text); }
  .link-more:hover .icon { transform: translateX(2px); }
  .nav__links a:hover { color: #fff; }
  .round-btn:hover:not([disabled]) { background: rgba(36, 64, 192, 0.14); }
  .choice:hover { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
  .choice:has(input:checked):hover { box-shadow: inset 0 0 0 2px var(--blue); }
  .rating:hover .rating__label span .icon { transform: translate(1px, -1px); }
  .rating__label .icon { transition: transform var(--t-hover) var(--ease); }
  .contact__list a:hover { color: var(--blue); }
  .footer a:hover { color: var(--on-dark); }
  .wa-float:hover { background: var(--ink-2); }
}

/* ---------- Motion ---------- */
@keyframes enter { from { opacity: 0; transform: translate3d(0, var(--rise), 0); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* One entrance on load for the first screen, pure CSS so it paints at once */
[data-enter] { animation: enter var(--t-enter) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 40ms); }

/* Below the fold, each block fades and rises once as it arrives. Hidden only after the
   script is running, so nothing stays invisible if it fails */
html.js-ready [data-reveal] {
  opacity: 0; transform: translate3d(0, var(--rise), 0);
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
  transition-delay: calc(var(--i, 0) * 50ms);
}
html.js-ready [data-reveal="fade"] { transform: none; }
html.js-ready [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-enter] { animation: none; }
  html.js-ready [data-reveal] { transform: none; transition: opacity 200ms ease; }
  html.js-ready .grow { height: auto; }
  html.js-ready .grow__sticky { position: relative; top: 0; height: auto; }
  html.js-ready .grow__frame { height: min(80svh, 46rem); clip-path: none !important; }
  html.js-ready .grow__caption { opacity: 1 !important; transform: none !important; }
  html.js-ready .quiz__step.is-active { animation: none; }
  .menu, .menu__links a, .wa-float { transform: none !important; transition: opacity 200ms ease !important; }
  .btn:active, .round-btn:active, .wa-float:active, .choice:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav::before, .menu { background: #0a1236; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn--glass { background: rgba(10, 18, 54, 0.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --text-2: #2f3856; --text-3: #4b5576; --hairline: rgba(0, 0, 0, 0.32); --hairline-strong: rgba(0, 0, 0, 0.5); --on-dark-2: rgba(255, 255, 255, 0.9); }
  .hero__media::after { background: rgba(6, 10, 32, 0.6); }
  .nav::before, .menu { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .review, .form-card, .choice, .visit { box-shadow: inset 0 0 0 1px var(--text); }
  .field input { border-color: var(--text-2); }
}

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .nav__links { gap: var(--s6); }
  .split, .contact, .quiz-wrap { gap: var(--s16); }
  .amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop__card { padding: var(--s10); }
  .visit__body { padding: var(--s10); }
}

@media (max-width: 53.75rem) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  /* phones get the tall crop: Murat's face up top, the words on the dark lower part */
  .hero { min-height: max(38rem, 100svh); }
  .hero__media img { object-position: 30% 18%; }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(6, 10, 32, 0.5) 0%, rgba(6, 10, 32, 0) 14%),
      linear-gradient(0deg, rgba(6, 10, 32, 0.96) 0%, rgba(6, 10, 32, 0.86) 40%, rgba(6, 10, 32, 0.2) 66%, rgba(6, 10, 32, 0) 80%);
  }
  .hero__inner { justify-content: flex-end; padding-top: calc(var(--nav-h) + var(--s24)); padding-bottom: var(--s6); }
  .hero__actions { margin-top: var(--s6); }
  .hero__points { margin-top: var(--s6); gap: var(--s2); }
  .hero__foot { display: none; }
  .hero__inner { padding-bottom: calc(var(--s10) + env(safe-area-inset-bottom)); }
  .cards { grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
  .features { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .branches { margin-top: var(--s16); }
  html.js-ready .grow { height: 170svh; }
  .grow__caption { padding-bottom: var(--s8); }
  .split, .contact, .quiz-wrap { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split__media { order: -1; }
  .quiz { padding: var(--s6); }
  .reviews-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .reviews { grid-template-columns: minmax(0, 1fr); }
  .reviews > li:first-child .review { padding: var(--s8); }
  .reviews > li:first-child blockquote { font-size: var(--fs-lg); }
  .shop { grid-template-columns: minmax(0, 1fr); }
  .shop__card { min-height: 0; padding: var(--s8); }
  .shop__card--shirt { grid-template-columns: minmax(0, 1fr); }
  .shop__shirt { width: min(60%, 14rem); margin: 0 auto calc(-1 * var(--s8)); order: -1; }
  .app__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
  .app__text { padding-bottom: 0; }
  /* the phones start right under the button and run past the bottom edge */
  .app__phones { height: 20rem; max-width: 26rem; margin-inline: auto; width: 100%; }
  .app__phone--back { width: 11.5rem; left: auto; right: 2%; bottom: -3.5rem; }
  .app__phone--front { width: 13rem; left: 2%; bottom: -7.5rem; }
  .visit { grid-template-columns: minmax(0, 1fr); }
  .visit__media img { min-height: 0; aspect-ratio: 4 / 3; }
  .visit__body { padding: var(--s8); }
  .form-card { padding: var(--s6); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__about { grid-column: 1 / -1; }
}

@media (max-width: 35rem) {
  :root { --fs-md: 1rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .amenities { gap: var(--s6) var(--s5); }
  .schedule__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); }
  .schedule__row dt { grid-column: 1 / -1; }
  .groups__cta, .visit__cta, .shop__card .btn, .app__store { width: 100%; }
  .coach { width: 100%; }
  .coach__img { width: 11rem; height: 11rem; }
  .rating__num { font-size: 4rem; }
  .wa-float { width: 3rem; height: 3rem; right: calc(var(--s3) + env(safe-area-inset-right)); bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
  .wa-float .icon { width: 24px; height: 24px; }
  .nav__inner { gap: var(--s4); }
}

/* Very narrow phones: the bar keeps the logo and the menu only */
@media (max-width: 22rem) {
  .nav__actions .btn--sm { display: none; }
  :root { --fs-h2: 1.875rem; }
}
/* Phones held sideways: a shorter hero so the headline, text and button fit */
@media (max-height: 30rem) and (orientation: landscape) and (max-width: 64rem) {
  .hero { min-height: 0; }
  .hero { min-height: 0; }
  .hero__title { font-size: 2.5rem; }
  .hero__inner { padding-top: calc(var(--nav-h) + var(--s8)); padding-bottom: var(--s6); }
  .hero__lead { margin-top: var(--s4); }
  .hero__actions { margin-top: var(--s6); }
  .hero__points, .hero__foot { display: none; }
}