/* =========================================================
   IRONFORGE FITNESS — "Brutalist Athletic"
   Modern sportswear energy. Archivo ultra-heavy at scale +
   Space Mono technical labels. Near-black, blaze orange,
   chalk. Hard edges, full-bleed photo bands, count-up data.
   ========================================================= */

:root {
  --blaze:    oklch(0.69 0.205 42);
  --blaze-br: oklch(0.76 0.18 52);
  --ink:      oklch(0.155 0.004 60);
  --ink-2:    oklch(0.20 0.005 55);
  --ink-3:    oklch(0.26 0.006 55);
  --steel:    oklch(0.64 0.006 60);
  --steel-d:  oklch(0.48 0.006 60);
  --chalk:    oklch(0.96 0.006 80);
  --line:     oklch(0.96 0.006 80 / 0.13);
  --line-2:   oklch(0.96 0.006 80 / 0.24);

  --display: "Archivo", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --wrap: 1320px;
  --gut: clamp(18px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--display); color: var(--chalk); background: var(--ink); font-size: 17px; line-height: 1.6; font-weight: 500; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; line-height: 0.9; margin: 0; text-transform: uppercase; letter-spacing: -0.02em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.kicker { font-family: var(--mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blaze); margin: 0 0 1.4rem; display: inline-flex; align-items: center; gap: 0.7em; }
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--blaze); }

.lead { font-size: 1.18rem; color: var(--steel); line-height: 1.55; max-width: 52ch; font-weight: 500; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 1.15em 2.1em; border: 2px solid transparent; cursor: pointer; transition: transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease; }
.btn:hover { transform: translateY(-3px); }
.btn--blaze { background: var(--blaze); color: var(--ink); }
.btn--blaze:hover { background: var(--blaze-br); }
.btn--ghost { background: transparent; color: var(--chalk); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--chalk); background: oklch(0.96 0.006 80 / 0.06); }
.btn--ink { background: var(--ink); color: var(--chalk); }
.btn--ink:hover { background: var(--ink-2); }
.btn--lg { font-size: 0.85rem; padding: 1.25em 2.5em; }

.arrow-link { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--mono); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blaze); }
.arrow-link span { transition: transform .15s ease; }
.arrow-link:hover span { transform: translateX(6px); }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem var(--gut); transition: background .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; }
.nav__brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 900; font-size: 1.5rem; letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.nav__brand .mark { width: 26px; height: 26px; background: var(--blaze); flex: none; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.nav__links a { font-family: var(--mono); font-weight: 400; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); transition: color .15s ease; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--chalk); }
.nav.scrolled, .nav--solid { background: oklch(0.155 0.004 60 / 0.9); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
@media (max-width: 760px) { .nav__links li:not(.nav__cta) { display: none; } }

/* footer */
.footer { background: var(--ink-2); padding: clamp(3rem,6vw,5rem) 0 2rem; border-top: 3px solid var(--blaze); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.6rem; border-bottom: 1px solid var(--line); }
.footer__brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 900; font-size: 1.9rem; text-transform: uppercase; letter-spacing: -0.03em; }
.footer__brand .mark { width: 26px; height: 26px; background: var(--blaze); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.footer p, .footer li { color: var(--steel); font-size: 0.94rem; }
.footer h4 { font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1rem; color: var(--chalk); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; font-family: var(--mono); font-size: 0.74rem; color: var(--steel-d); }
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; gap: 2rem; } }

/* reveal */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .45s cubic-bezier(.2,.9,.3,1), transform .45s cubic-bezier(.2,.9,.3,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* section */
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section--panel { background: var(--ink-2); }
.section-head { max-width: 62ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
.section-head h2 .o { color: var(--blaze); }
.section-head .lead { margin-top: 1.2rem; }

/* photo helper */
.ph { position: relative; overflow: hidden; background: var(--ink-3); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 50%, oklch(0.12 0.004 60 / 0.4)); }