/* Alive Fitness: the shared default design (/platform/platform.css) turned into a dark gym floor with an orange signal.
   Headings, buttons and labels are condensed capitals; the hero photo fills the whole band. */
:root {
  --pf-accent: #ff5a1f;
  --pf-accent-ink: #140a05;
  --pf-ink: #f4f2ed;
  --pf-muted: #a09d96;
  --pf-surface: #0c0c0e;
  --pf-surface-alt: #141417;
  --pf-dark: #1b1b20;
  --pf-line: rgb(255 255 255 / 9%);
  --pf-radius: 14px;
  --pf-container: 1180px;
  --pf-font: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --pf-heading-font: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --af-card: #1b1b20;
  color-scheme: dark;
}

::selection { background: var(--pf-accent); color: var(--pf-accent-ink); }
h1, h2, h3 { font-weight: 800; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 9vw, 6.5rem); }
h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; }

/* Condensed capitals for everything that reads like a label. */
.eyebrow, .btn, .link-arrow, .plan__badge, .stat__value, .step__node::before, .member__role, .contact-item strong, .nav a,
.price-list dd { font-family: var(--pf-heading-font); text-transform: uppercase; }
.eyebrow { font-weight: 600; letter-spacing: 0.18em; }
.btn { font-weight: 700; letter-spacing: 0.08em; font-size: 1.05rem; transition: transform 0.15s, background 0.15s, border-color 0.15s; }
.btn:active { transform: scale(0.97); }
.btn--accent:hover { background: #ff6d3a; }
.btn--ghost { color: var(--pf-ink); border-color: rgb(255 255 255 / 28%); }
.btn--ghost:hover { border-color: var(--pf-ink); }
.btn--dark { background: var(--pf-accent); color: var(--pf-accent-ink); }
.link-arrow { letter-spacing: 0.1em; }
:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }

/* Header: translucent over the hero photo. */
.site-header { background: rgb(12 12 14 / 82%); backdrop-filter: blur(14px); }
.nav a { font-size: 1.05rem; letter-spacing: 0.06em; }
.nav a:hover, .nav a[aria-current="page"] { background: transparent; color: var(--pf-ink); }
.brand__name strong { font-family: var(--pf-heading-font); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.brand__name small { font-family: var(--pf-heading-font); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.65rem; color: var(--pf-accent); }

/* Hero: the photo covers the band and fades into the page; text sits at the bottom. */
.block-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(86svh, 760px); padding: 5.5rem 0 2.75rem; background: var(--pf-surface); }
.block-hero .hero__grid { grid-template-columns: 1fr; width: 100%; }
.block-hero .hero__art { position: absolute; inset: 0; z-index: -2; }
.block-hero .hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(0.85) contrast(1.05); }
.block-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 12 14 / 25%) 0%, rgb(12 12 14 / 55%) 45%, var(--pf-surface) 100%); }
.hero h1 em { font-style: italic; }
.hero .lead { color: var(--pf-ink); opacity: 0.85; font-size: 1.1rem; max-width: 60ch; }
.page-hero { background: var(--pf-surface-alt); border-bottom: 1px solid var(--pf-line); }

/* Numbers: a strip under the hero instead of tiles. */
.block-stats { padding-block: 0; background: var(--pf-surface-alt); border-block: 1px solid var(--pf-line); }
.block-stats .stats { gap: 0; }
.stat { background: none; border-radius: 0; padding: 1.5rem 1rem; }
.stat + .stat { border-left: 1px solid var(--pf-line); }
.stat__value { font-size: 2.6rem; font-weight: 800; }

/* Cards, results, trainers, plans: dark surfaces with a hairline. */
.card, .testimonial, .plan, .form-card { background: var(--af-card); border-color: var(--pf-line); }
.card { transition: border-color 0.2s; }
a.card:hover { border-color: var(--pf-accent); }
.card__icon { background: rgb(255 90 31 / 15%); }
.testimonial blockquote { font-size: 1.1rem; }
.testimonial blockquote::before { content: "„"; }
.testimonial blockquote::after { content: "“"; }
.testimonial figcaption small { color: var(--pf-accent); font-family: var(--pf-heading-font); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; }
.member__photo { aspect-ratio: 4 / 5; }
.member__role { font-weight: 600; letter-spacing: 0.12em; font-size: 0.85rem; }
.plan--highlight { background: linear-gradient(180deg, rgb(255 90 31 / 12%), rgb(255 90 31 / 0%) 60%), var(--af-card); box-shadow: none; }
.plan__price strong { font-family: var(--pf-heading-font); font-size: 3.5rem; font-weight: 800; }
.plan .btn--dark { background: transparent; color: var(--pf-ink); border-color: rgb(255 255 255 / 28%); }

/* Process: big orange numbers over a rule. */
.step { padding-top: 1.25rem; border-top: 2px solid var(--pf-line); }
.step__node::before { font-size: 2.75rem; font-weight: 800; line-height: 1; content: counter(step); }

/* Schedule (price list): time in big condensed figures. */
.price-list dd { font-size: 1.5rem; font-weight: 800; color: var(--pf-accent); font-variant-numeric: tabular-nums; }
.price-list__row { border-bottom-style: solid; }

/* Gallery: the first photo spans two columns and rows. */
.block-gallery .gallery { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.block-gallery .gallery > :first-child { grid-column: span 2; grid-row: span 2; }
.block-gallery .gallery img { width: 100%; height: 100%; aspect-ratio: 1; }
@media (max-width: 720px) {
  .block-gallery .gallery { grid-template-columns: repeat(2, 1fr); }
  .block-gallery .gallery > :first-child { grid-row: auto; }
  .block-gallery .gallery > :first-child img { aspect-ratio: 16 / 10; }
}

/* Call to action: orange band with dark text and a dark button. */
.cta h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.cta .btn--dark { background: var(--pf-accent-ink); color: var(--pf-ink); }

/* Forms on the dark surface. */
.field input, .field textarea, .field select { background: var(--pf-surface); color: var(--pf-ink); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--pf-accent); }
.field__error, .form__error { color: #ff8a65; }
.map__card { background: var(--af-card); }

.site-footer { border-top: 1px solid var(--pf-line); }

@media (max-width: 720px) {
  .stat + .stat { border-left: 0; border-top: 1px solid var(--pf-line); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; }
}