:root {
  --ink: #f7f2e8;
  --muted: rgba(247, 242, 232, 0.68);
  --gold: #e5a326;
  --gold-light: #ffd773;
  --line: rgba(229, 163, 38, 0.26);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050505; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-inline: clamp(24px, 5vw, 80px);
  background: #050505;
}

.hero__image, .hero__shade { position: absolute; inset: 0; z-index: -2; }
.hero__image { background: url("../assets/fitness-hero.webp") center / cover no-repeat; }
.hero__shade {
  z-index: -1;
  background:
    radial-gradient(circle at 73% 45%, rgba(213,139,20,.12), transparent 35%),
    linear-gradient(90deg, rgba(3,3,3,.98) 0%, rgba(3,3,3,.84) 42%, rgba(3,3,3,.24) 76%, rgba(3,3,3,.52) 100%),
    linear-gradient(0deg, rgba(3,3,3,.9) 0%, transparent 35%);
}

.topbar { min-height: 108px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(229,163,38,.16)); }
.topbar__contact { padding: 12px 0; color: var(--muted); font-size: 13px; letter-spacing: .07em; transition: color 180ms ease; }
.topbar__contact:hover, .topbar__contact:focus-visible { color: #fff; }
.contact__short { display: none; }

.content { align-self: center; width: min(680px, 70vw); padding-block: clamp(36px, 7vh, 88px); }
.eyebrow { margin: 0 0 24px; display: flex; align-items: center; gap: 12px; color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow span { width: 34px; height: 2px; background: currentColor; }
h1 { margin: 0; max-width: 680px; font-size: clamp(54px, 7.5vw, 112px); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; font-weight: 900; }
h1 em { display: block; color: var(--gold); font-style: normal; text-shadow: 0 0 35px rgba(229,163,38,.14); }
.lead { max-width: 560px; margin: 26px 0 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; }

.status { width: fit-content; max-width: 100%; margin-top: 34px; display: flex; align-items: center; gap: 15px; padding: 14px 18px 14px 14px; border: 1px solid var(--line); background: rgba(10,11,12,.58); backdrop-filter: blur(12px); }
.status__icon { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid rgba(229,163,38,.55); display: grid; place-items: center; }
.status__icon i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(229,163,38,.13); }
.status div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.status strong { font-size: 13px; line-height: 1.25; }
.status div span { color: var(--muted); font-size: 12px; line-height: 1.3; }

.footer { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: rgba(244,241,235,.45); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.footer a:hover, .footer a:focus-visible { color: #fff; }

@media (max-width: 700px) {
  .hero { min-height: 100svh; overflow-y: auto; padding-inline: 20px; }
  .hero__image { background-position: 61% center; opacity: .76; }
  .hero__shade { background: linear-gradient(90deg, rgba(5,6,7,.96) 0%, rgba(5,6,7,.66) 72%, rgba(5,6,7,.42) 100%), linear-gradient(0deg, rgba(5,6,7,.86), transparent 45%); }
  .topbar { min-height: 82px; }
  .brand img { width: 66px; height: 66px; }
  .contact__full { display: none; }
  .contact__short { display: inline; }
  .content { width: 100%; padding-block: 36px; }
  .eyebrow { margin-bottom: 16px; font-size: 10px; letter-spacing: .18em; }
  h1 { font-size: clamp(43px, 14.5vw, 68px); line-height: .92; letter-spacing: -.045em; }
  .lead { max-width: 100%; margin-top: 20px; font-size: 15px; line-height: 1.48; }
  .status { width: 100%; margin-top: 26px; padding: 12px; }
  .footer { min-height: 58px; gap: 12px; font-size: 8px; letter-spacing: .08em; }
}

@media (max-height: 720px) {
  .topbar { min-height: 72px; }
  .brand img { width: 58px; height: 58px; }
  .content { padding-block: 24px; }
  .eyebrow { margin-bottom: 12px; }
  h1 { font-size: clamp(42px, 7vw, 82px); line-height: .92; }
  .lead { margin-top: 16px; font-size: 15px; line-height: 1.4; }
  .status { margin-top: 18px; padding-block: 10px; }
  .footer { min-height: 48px; }
}

@media (max-width: 420px) and (max-height: 700px) {
  .content { padding-block: 18px; }
  h1 { font-size: clamp(40px, 13vw, 54px); }
  .status__icon { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: no-preference) {
  .content > * { animation: reveal 700ms ease both; }
  .content > *:nth-child(2) { animation-delay: 80ms; }
  .content > *:nth-child(3) { animation-delay: 160ms; }
  .content > *:nth-child(4) { animation-delay: 240ms; }
  @keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}