/* ============ TOKENS ============ */
:root {
  --red: #c23c1a;
  --blue: #1c1cb0;
  --black: #0e0e0e;
  --cream: #f2ede4;
  --white: #fbf9f5;
  --text-dark: #171410;

  --hero-pad: clamp(1.5rem, 6vw, 5rem);

  /* Monument and Cy Grotesk V3 Wide are not available as font files, so the
     closest available Google Fonts are used as stand-ins:
     - Archivo Black for the heavy geometric display type (BURN BABY, READY TO
       BURN?, DOUBLE THE BURN, BOOKING, PROTEIN…)
     - Archivo Expanded for the wider supporting/body grotesk (nav, paragraphs,
       card copy). Replace both with @font-face rules once the real files
       (Monument / Cy Grotesk V3 Wide) are available. */
  --font-display: "Archivo Black", sans-serif;
  --font-body: "Archivo Expanded", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 0.92;
}

/* ============ NAV ============ */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1.4rem var(--hero-pad) 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav__link { color: var(--white); opacity: 0.95; transition: opacity 0.15s ease; }
.nav__link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ============ HERO ============ */
.hero {
  position: relative;
  background: var(--red);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
  overflow: hidden;
}

/* Kettlebell + wordmark act as one lockup, like a deliberately designed
   brand mark. The kettlebell is taken out of the text flow (absolute,
   centered over the wordmark, slightly offset) so its size never pushes
   BURN BABY further down the page — the two are positioned independently
   and then balanced against each other by eye. */

/* First viewport: BURN BABY + kettlebell + tagline are the whole story on
   load, vertically centered in the viewport beneath the nav. READY TO
   BURN? and everything after it only appear once the person scrolls. */
.hero__firstview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84svh;
}

.hero__mark {
  position: relative;
  width: 100%;
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.hero__kettlebell-slot {
  position: absolute;
  top: clamp(1.5rem, 3vw, 3rem);
  left: 50%;
  width: min(30vw, 400px);
  margin-left: clamp(-14.5rem, calc(-14.5vw - 0.5rem), -10.5rem);
  z-index: 3;
  pointer-events: none;
}

/* A slow, continuous, perfectly even rotation — a quiet motion-design
   accent, not an entrance effect. Clockwise, constant speed, no easing
   steps, no bounce. */
.hero__kettlebell-wrap {
  animation: kettlebell-spin 16s linear infinite;
}

@keyframes kettlebell-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__kettlebell-wrap { animation: none; }
}

.hero__kettlebell { width: 100%; filter: drop-shadow(0 35px 45px rgba(0,0,0,0.4)); }

.hero__brand {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800; /* Archivo Black itself is a single heavy cut; requesting
                        800 asks the browser to render its boldest available */
  font-size: clamp(5.6rem, 16.5vw, 14rem);
  line-height: 0.82;
  color: var(--blue);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transform: scaleX(1.32);
  transform-origin: center;
}

.hero__tagline {
  margin: 1.6rem 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.35em;
  font-size: clamp(0.8rem, 1.7vw, 1.15rem);
  color: var(--white);
  text-transform: uppercase;
}

/* Second beat of the hero, revealed on scroll: one full-width statement,
   tightly followed by the image + caption row — spacing is deliberately
   tight so the two read as one section, not separate floating blocks. */
.hero__second {
  position: relative;
  z-index: 2;
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.hero__statement {
  font-family: var(--font-display);
  font-weight: 800; /* strongest weight available; Archivo Black itself only
                        ships one heavy cut, so this asks the browser for the
                        boldest rendering it has */
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(1.8rem, 6.6vw, 5.6rem);
  letter-spacing: -0.01em;
  line-height: 0.94;
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, 0.18vw, 2.6px) var(--white);
  text-stroke: clamp(1.5px, 0.18vw, 2.6px) var(--white);
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  padding: 0 var(--hero-pad);
}

/* Image + text now form a single composed unit directly beneath the
   statement: the frame anchors the left, the caption sits on the right,
   vertically centered against the photo and tied to it with a left rule. */
.hero__body {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding: 0 var(--hero-pad);
}

.hero__paragraph {
  padding-left: 1.1rem;
  border-left: 2px solid var(--white);
  max-width: 22rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.78rem, 1.05vw, 0.88rem);
  line-height: 1.65;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.hero__frame {
  border: clamp(7px, 1vw, 11px) solid var(--blue);
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 30px 50px rgba(0,0,0,0.25);
}

.hero__frame-img { width: 100%; height: 100%; object-fit: cover; }

/* ============ MARQUEE PATTERN ============ */
.marquee {
  background: var(--blue);
  overflow: hidden;
  padding: 0.4rem 0;
}

.marquee__row {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  line-height: 1.2;
  color: var(--red);
  white-space: nowrap;
  overflow: hidden;
}

/* ============ DOUBLE THE BURN ============ */
.double-burn {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) var(--hero-pad);
  background-image: url("assets/zebra.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}

/* Heading + cards travel together as one centered group, sharing the same
   measure, instead of the heading sitting flush left above centered cards. */
.double-burn__inner {
  width: 100%;
  max-width: 66rem;
}

.double-burn__heading {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 8.5vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--red);
  text-shadow: 0 3px 0 rgba(0,0,0,0.18);
  text-align: center;
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
}

.double-burn__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}

.burn-card {
  background: var(--cream);
  padding: 0.7rem 0.7rem 1.6rem;
}

.burn-card__image-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1rem;
}

.burn-card__image { width: 100%; height: 100%; object-fit: cover; }

.burn-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  margin: 0 0.5rem 0.7rem;
  text-transform: uppercase;
  color: var(--black);
}

.burn-card__text {
  margin: 0;
  padding: 0 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.84rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: #2c2c2c;
}

.burn-card__text strong { font-weight: 800; color: var(--black); }

/* ============ BOOKING ============ */
.booking {
  position: relative;
  background: var(--blue);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(26rem, 52vw, 42rem);
  overflow: hidden;
}

.booking__type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--hero-pad);
}

.booking__type span {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 9.5vw, 7rem);
  line-height: 0.78;
  color: var(--white);
  letter-spacing: -0.02em;
  transform: scaleX(1.08);
  transform-origin: left center;
}

.booking__type span:not(:first-child) { margin-top: -0.1em; }

.booking__type span.booking__type-accent { color: var(--red); }

.booking__image-wrap {
  position: relative;
  height: 100%;
}

.booking__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% top;
}

/* ============ PROTEIN ============ */
.protein {
  background: var(--cream);
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(3.5rem, 8vw, 6rem) var(--hero-pad);
}

.protein__image-wrap {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--black);
}

.protein__image { width: 100%; height: 100%; object-fit: cover; }

.protein__heading {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 8.2vw, 6.2rem);
  color: var(--red);
  letter-spacing: -0.01em;
  line-height: 0.9;
}

.protein__text {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  max-width: 24rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #4a4640;
}

.protein__accent {
  display: inline-block;
  margin: 0.35em 0;
  font-weight: 800;
  font-size: 1.15em;
  color: var(--red);
  letter-spacing: 0.01em;
}

/* ============ FOOTER ============ */
.footer {
  position: relative;
  min-height: clamp(20rem, 40vw, 28rem);
  background-image: url("assets/carpet.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__panel {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  letter-spacing: 0.02em;
  line-height: 1.9;
  text-transform: uppercase;
}

.footer__line {
  background: var(--blue);
  color: var(--white);
  padding: 0.05em 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.footer__legal {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  max-width: min(26rem, 78vw);
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 1.05vw, 0.64rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--white);
  text-transform: uppercase;
}

.footer__legal-group { margin: 0 0 0.7em; }
.footer__legal-group:last-child { margin-bottom: 0; }

.footer__ig {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  width: 2rem;
  height: 2rem;
  background: var(--black);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 760px) {
  .hero__mark { min-height: clamp(16rem, 62vw, 22rem); }
  .hero__kettlebell-slot {
    width: min(58vw, 320px);
    top: -1.5rem;
    margin-left: clamp(-13rem, -34vw, -8rem);
  }
  .hero__body { grid-template-columns: 1fr; }
  .hero__frame { width: 100%; max-width: 340px; margin: 0 auto; }
  .hero__statement { white-space: normal; }
  .hero__paragraph { margin: 1.5rem auto 0; }
  .double-burn__heading { white-space: normal; }
  .booking { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .booking__type { padding: 0 1.5rem 1.5rem; }
  .booking__image-wrap { height: auto; aspect-ratio: 4 / 5; }
  .booking__image { object-position: 65% 20%; }
  .protein { grid-template-columns: 1fr; }
}