/* Marval Fitness — marketing site styles. Builder A.
   Reads tokens.css variables only, never redefines them. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

/* ---------- Base ---------- */
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { color: var(--text-dim); max-width: 62ch; }

a { text-decoration: none; }

em, i { font-style: italic; line-height: 1.15; padding-bottom: 0.08em; display: inline-block; }

/* ---------- Layout utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

main { display: block; }

section { padding-block: var(--space-section); }

.section-tight { padding-block: clamp(48px, 7vw, 88px); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--gold);
  color: var(--on-gold);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  z-index: 200;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* Focus visibility across the site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 10, 9, 0.88);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding-block: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
}
.brand-word strong { color: var(--gold); font-weight: 600; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  color: var(--text-dim);
  font-size: 0.94rem;
  font-weight: 500;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] {
  color: var(--gold-bright);
  border-color: var(--gold-deep);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The header login button collapses into the mobile menu on small screens */
.nav-item-login { display: none; }
@media (max-width: 560px) {
  .nav-actions .btn { display: none; }
  .nav-item-login { display: block; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  /* backdrop-filter makes an element the containing block for its
     position:fixed descendants, which trapped the open menu inside the 69px
     header and clipped it to one row. The header is near opaque anyway, so
     below the menu breakpoint we drop the filter and go solid. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ink);
  }
  .nav-links {
    position: fixed;
    inset: 68px 0 0 0;
    top: 69px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--ink);
    border-top: 1px solid var(--line);
    padding: 18px 24px 28px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    max-height: calc(100dvh - 69px);
    overflow-y: auto;
  }
  /* The anchors default to display:inline, which silently drops width:100%
     and lets padding-block inflate the hit box past the li. Consecutive
     links then overlapped by ~18px and the lower strip of each row fired
     the NEXT link. Block-level anchors on stretched li's give each row one
     honest full-width target. */
  .nav-links > li { align-self: stretch; }
  .nav-links > li.nav-item-lang { align-self: flex-start; }
  .nav-links a {
    display: block;
    /* 3px border + 9px padding = the 12px the negative margin pulls back,
       so the text still lands on the 24px menu gutter. */
    padding: 12px 12px 12px 9px;
    margin-inline: -12px;
    font-size: 1.05rem;
    /* A block anchor would stretch the desktop underline across the whole
       row, where it reads as a separator between two items instead of a
       marker on one. Mark the current page with a left bar instead. */
    border-bottom-width: 0;
    border-left: 3px solid transparent;
  }
  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .nav-toggle { display: inline-flex; }
  html.js .nav-links:not(.is-open) { display: flex; } /* keep in DOM for no-js fallback below */
}

/* ---------- Language toggle ---------- */
.lang-toggle {
  display: flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  flex: 0 0 auto;
}
.lang-toggle button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 14px;
  min-width: 40px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-toggle button + button { border-left: 1px solid var(--line); }
.lang-toggle button:hover { color: var(--text); }
.lang-toggle button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.lang-toggle button[aria-pressed="true"]:hover { color: var(--on-gold); }
.lang-toggle button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }

/* Same responsive convention as .nav-item-login: desktop instance lives
   in .nav-actions, mobile-menu instance takes over <=560px. */
.nav-item-lang { display: none; }
@media (max-width: 560px) {
  .nav-actions .lang-toggle { display: none; }
  .nav-item-lang { display: block; padding-block: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-toggle button { transition: none; }
}

/* No-JS fallback: without JS, mobile nav just stacks under the bar, always visible */
html:not(.js) .nav-links {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (max-width: 860px) {
  html:not(.js) .nav-bar { flex-wrap: wrap; }
  html:not(.js) .nav-links {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    background: transparent;
    border-top: none;
    padding: 10px 0 4px;
    gap: 18px;
  }
  html:not(.js) .nav-toggle { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.96rem;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--gold);
}
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn-outline {
  background: transparent;
  color: var(--gold-bright);
  border-color: var(--gold-deep);
}
.btn-outline:hover { border-color: var(--gold-bright); color: var(--text); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-bright); }

.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(56px, 9vw, 96px);
  padding-bottom: clamp(56px, 8vw, 88px);
  min-height: min(78dvh, 720px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(201,162,75,0.14), transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(110,35,51,0.16), transparent 46%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero-kicker {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 18px;
  display: block;
}

.hero h1 {
  font-size: clamp(2.3rem, 4.4vw + 1rem, 3.6rem);
  line-height: 1.08;
  margin-bottom: 22px;
}

.hero-sub {
  font-size: clamp(1.02rem, 1vw + 0.8rem, 1.2rem);
  color: var(--text-dim);
  max-width: 52ch;
  margin-bottom: 34px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Section heads ---------- */
.section-head {
  max-width: 640px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head h2 {
  font-size: clamp(1.7rem, 2.6vw + 1rem, 2.4rem);
  margin-bottom: 14px;
}
.section-head p { font-size: 1.05rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

/* ---------- Split layout (asymmetric) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; }
  .split.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .split.reverse > *:first-child { order: 2; }
}

/* ---------- Lanes (typographic, no photo) ---------- */
.lanes {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
@media (min-width: 760px) {
  .lanes { grid-template-columns: 1fr 1fr; }
}
.lane {
  padding: clamp(28px, 4vw, 48px);
  position: relative;
}
.lane + .lane {
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
  .lane + .lane { border-top: none; border-left: 1px solid var(--line); }
}
.lane-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--wine);
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 18px;
}
.lane:nth-child(2) .lane-tag {
  color: var(--on-gold);
  background: var(--gold);
}
.lane h3 {
  font-size: clamp(1.4rem, 1.6vw + 1rem, 1.8rem);
  margin-bottom: 14px;
}
.lane p { max-width: 46ch; }
.lane-name {
  display: block;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-dim);
  font-weight: 600;
}

/* ---------- Bento grid ---------- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 760px) {
  .bento {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: repeat(3, auto);
  }
  .bento-feature {
    grid-row: 1 / span 3;
  }
}
.bento-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s ease, transform .2s ease;
}
.bento-card:hover { border-color: var(--gold-deep); }
.bento-feature {
  background:
    linear-gradient(180deg, rgba(11,10,9,0.30) 0%, rgba(11,10,9,0.62) 55%, rgba(11,10,9,0.92) 100%),
    url("/img/karina_hex.jpg") center 24% / cover no-repeat,
    linear-gradient(155deg, var(--surface-2), var(--surface));
  justify-content: flex-end;
  min-height: 440px;
}
.bento-icon {
  width: 42px;
  height: 42px;
  color: var(--gold);
  flex-shrink: 0;
}
.bento-card h3 {
  font-size: 1.2rem;
}
.bento-card p { font-size: 0.96rem; margin: 0; }

/* ---------- Offer cards (coaching page) ---------- */
.offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 760px) {
  .offers { grid-template-columns: 1.3fr 1fr; }
  .offer-primary { grid-row: 1 / span 2; }
}
.offer-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offer-primary {
  background: linear-gradient(160deg, rgba(201,162,75,0.10), var(--surface) 60%);
  border-color: var(--gold-deep);
}
.offer-card h3 { font-size: 1.35rem; }
.offer-primary h3 { font-size: 1.6rem; }
.offer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.offer-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.offer-list svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 2px;
}

/* ---------- Image treatments ---------- */
.frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  isolation: isolate;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.04);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,10,9,0) 40%, rgba(11,10,9,0.55) 100%),
              linear-gradient(0deg, rgba(201,162,75,0.10), rgba(110,35,51,0.06));
  pointer-events: none;
}

.portrait {
  max-width: 320px;
  aspect-ratio: 3 / 4;
}
.portrait img { object-position: top center; }

.portrait-round {
  max-width: 148px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
}
.portrait-round img { object-position: center 30%; }

.transform-shot {
  max-width: 440px;
  aspect-ratio: 16 / 13;
}

.figure-caption {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--text-dim);
  max-width: 320px;
}

/* ---------- Callout / quote ---------- */
.callout {
  background: var(--wine);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 40px);
  color: var(--text);
}
.callout p {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw + 0.9rem, 1.5rem);
  line-height: 1.4;
  max-width: 60ch;
}
.callout cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.9rem;
  color: rgba(242,236,224,0.75);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-band h2 { font-size: clamp(1.6rem, 2.4vw + 1rem, 2.1rem); margin-bottom: 8px; }
.cta-band p { margin: 0; }
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex-shrink: 0;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) {
  .form-grid.two-col { grid-template-columns: 1fr 1fr; }
  .form-grid.two-col .field-full { grid-column: 1 / -1; }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.field .hint {
  font-size: 0.82rem;
  color: var(--text-dim);
}
.field input,
.field select,
.field textarea {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.98rem;
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-dim);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--gold-bright);
  outline-offset: 1px;
  border-color: var(--gold-deep);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-error {
  font-size: 0.82rem;
  color: var(--err);
  min-height: 1em;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 44px);
}

.form-status {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  display: none;
}
.form-status[data-state="success"] {
  display: block;
  background: rgba(127, 176, 105, 0.14);
  border: 1px solid rgba(127, 176, 105, 0.4);
  color: var(--text);
}
.form-status[data-state="error"] {
  display: block;
  background: rgba(208, 101, 85, 0.14);
  border: 1px solid rgba(208, 101, 85, 0.4);
  color: var(--text);
}

/* ---------- FAQ (details/summary) ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 4px 20px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding-block: 16px;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev {
  width: 18px; height: 18px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item p { padding-bottom: 18px; font-size: 0.96rem; }

/* ---------- Contact tiles ---------- */
.contact-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .contact-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .contact-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-tile svg {
  width: 22px; height: 22px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-tile h3 { font-size: 1.05rem; margin-bottom: 4px; }
.contact-tile a, .contact-tile p { font-size: 0.95rem; color: var(--text-dim); }
.contact-tile a { color: var(--gold-bright); }
.contact-tile a:hover { color: var(--text); }

/* ---------- Legal / privacy content ---------- */
.legal h2 {
  font-size: 1.3rem;
  margin-top: 40px;
  margin-bottom: 12px;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-dim); font-size: 0.98rem; margin-bottom: 12px; }
.legal ul { padding-left: 1.2em; list-style: disc; }
.legal ul li { margin-bottom: 6px; }
.legal .updated { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 32px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 48px 32px;
  background: var(--surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer-brand p {
  font-size: 0.92rem;
  color: var(--text-dim);
  max-width: 34ch;
  margin-top: 12px;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  color: var(--text-dim);
  font-size: 0.94rem;
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.footer-bottom a { color: var(--text-dim); }
.footer-bottom a:hover { color: var(--gold-bright); }

/* ---------- Scroll reveal ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Responsive guardrails ---------- */
@media (max-width: 480px) {
  .wrap { padding-inline: 18px; }
  .hero-ctas .btn { width: 100%; }
  .cta-band-actions .btn { width: 100%; }
  .cta-band-actions { width: 100%; }
}

/* ---------- Photo presence (PM punch-up 2026-08-04) ----------
   Real gym photography carries the page instead of gradients alone.
   Every photo sits under a scrim so text keeps its contrast. */

/* Hero: portrait photo panel on the right, faded into the ink */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(52%, 720px);
  background: url("/img/hero_dark.jpg") center 22% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
  opacity: 0.75;
  z-index: 0;
  pointer-events: none;
}
.hero::before { z-index: 1; }
.hero-inner { z-index: 2; }

@media (max-width: 860px) {
  .hero::after {
    width: 100%;
    background-position: center 12%;
    opacity: 0.30;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 88%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 88%);
  }
  /* On a phone the copy sits directly over the photo, so the scrim layer
     carries a real darkening pass instead of only the brand radials. */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(11,10,9,0.72) 0%, rgba(11,10,9,0.60) 45%, rgba(11,10,9,0.88) 100%),
      radial-gradient(circle at 82% 12%, rgba(201,162,75,0.14), transparent 42%),
      radial-gradient(circle at 8% 92%, rgba(110,35,51,0.16), transparent 46%);
  }
}

/* Lane cards get a real face */
.lane { position: relative; overflow: hidden; }
.lane-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--surface-2);
}
.lane-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.9) contrast(1.05);
}
.lane-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,10,9,0) 45%, rgba(11,10,9,0.72) 100%);
}

/* Full-bleed photo band */
.photo-band {
  position: relative;
  padding-block: clamp(80px, 11vw, 150px);
  background: url("/img/group_flex.jpg") center 12% / cover no-repeat, var(--ink);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,10,9,0.94) 0%, rgba(11,10,9,0.82) 48%, rgba(11,10,9,0.55) 100%);
}
.photo-band .wrap { position: relative; z-index: 1; }
.photo-band h2 { max-width: 18ch; }
.photo-band p { color: var(--text); max-width: 46ch; }

/* Coaching cards with a photo header */
.offer-photo {
  position: relative;
  margin: -1px -1px 20px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-2);
}
.offer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.offer-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,10,9,0.18) 0%, rgba(11,10,9,0.80) 100%);
}

/* About: the together shot, heavily graded so the green wall reads as brand */
.together-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
  aspect-ratio: 16 / 9;
  max-height: 380px;
}
.together-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  filter: saturate(0.55) contrast(1.06) brightness(0.82) sepia(0.18);
}
.together-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,10,9,0.25) 0%, rgba(11,10,9,0.70) 100%),
    linear-gradient(0deg, rgba(201,162,75,0.16), rgba(110,35,51,0.20));
}

/* ---------- Touch targets on phones ----------
   Audit at 375px found the language buttons at 38px, footer links at 17-26px
   and the header logo at 34px, all under the 44px minimum. Padding is added
   rather than font size so the layout and rhythm stay put. */
@media (max-width: 860px) {
  .lang-toggle { height: 44px; }
  .lang-toggle button { min-width: 52px; }

  .brand { padding-block: 5px; }

  .footer-col ul a,
  .footer-bottom a,
  .contact-tile a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col ul li { line-height: 1.2; }
}

/* ---------- Hero video slot (Vimeo, consent-gated) ----------
   Section stays [hidden] until a video exists. The iframe is gated by the
   krispy-widget (data-consent-src), which drops its own placeholder into
   .hero-video-frame until the visitor accepts. Frame is 16:9; add
   .hero-video--tall on the section for a 9:16 reel. Horizontal inset comes
   from the .wrap child, never from this element. */
.hero-video { padding-block: 0 clamp(40px, 6vw, 72px); }
.hero-video[hidden] { display: none; }
.hero-video-frame {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.hero-video--tall .hero-video-frame { aspect-ratio: 9 / 16; max-width: min(420px, 100%); max-height: 78dvh; }
.hero-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Widget bug (2026-09-29): .kw-embed-placeholder{display:flex} beats the UA
   [hidden] rule, so the "Enable and view" placeholder stays laid out and in the
   accessibility tree after consent. Local guard until the widget ships the fix. */
.hero-video-frame .kw-embed-placeholder[hidden] { display: none; }