/* ==========================================================================
   Nitro Performance — strength and conditioning, BGC
   --------------------------------------------------------------------------
   00  Tokens
   01  Reset and base
   02  Wordmark
   03  Header and nav
   04  Buttons and links
   05  Hero
   06  Built different
   07  Programmes
   08  Results
   09  Testimonial
   10  Footer
   11  Motion
   12  Responsive

   This build shares nothing with the car-detailing version that preceded it
   except the palette. The diagonal slash motif, the rotated vertical dates and
   the full-width lime call-to-action band are all gone deliberately — they were
   what made that build read as a retrace of its reference rather than a design.
   ========================================================================== */

/* 00  Tokens ==============================================================
   Read off img/comp.webp by modal pixel rather than by eye: the lime is the
   most common colour in every lime mass on the page, and the ground is the most
   common colour in the file full stop. */

:root {
  --ink:       #131313;   /* page ground — 687,243 pixels, the modal colour */
  --ink-raise: #17191A;   /* card and panel ground, one step up */
  --ink-deep:  #0C0D0D;   /* derived one step below, for shadow tint only */

  /* #A2CB30, not the previous build's #82B229. The iteration shifted the hue
     yellower and brighter and that is the version that was chosen, so the token
     follows the comp rather than the build it replaced. */
  --lime:      #A2CB30;
  --lime-dim:  rgba(162, 203, 48, .55);
  --lime-wash: rgba(162, 203, 48, .10);

  --white:     #FFFFFF;
  --text:      #E8E9E9;   /* body copy */
  --muted:     #ABAEAE;   /* supporting copy and footer fine print */

  --line:      rgba(232, 233, 233, .13);
  --line-soft: rgba(232, 233, 233, .07);

  /* Both terms carry the palette's own darkest ink. A black shadow on a
     near-black ground reads as dirt rather than as depth. */
  --sh-card: 0 1px 2px rgba(12, 13, 13, .7), 0 26px 60px -26px rgba(12, 13, 13, .95);

  --shell: min(1180px, 100% - 80px);
  /* Derived from the shell so anything can bleed to the viewport edge without a
     second number to keep in step. */
  --gut:   max(40px, calc((100vw - 1180px) / 2));

  --f-display: 'Saira', 'Barlow', system-ui, sans-serif;
  --f-sans:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* 01  Reset and base ====================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden here would stop the sticky header sticking. */
  overflow-x: clip;
}

svg { display: block; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.shell { width: var(--shell); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Every heading on this page is the same object: heavy Saira italic, uppercase,
   set tight, and broken into spans so each line is its own block. A <br> was
   the first approach and it welds words together the moment a line is hidden at
   a breakpoint — the spans keep the break and the space both. */
.h2, .hero__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: 1.02;
  color: var(--white);
}
.h2 span, .hero__title span { display: block; }
.h2 { font-size: clamp(34px, 4.1vw, 57px); }   /* x1.15 — see 00 */

.lime { color: var(--lime); }

.eyebrow {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 14px;
}

.u-sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: absolute; left: 16px; top: 14px; z-index: 200;
  padding: 10px 18px; background: var(--lime); color: var(--ink);
  font-weight: 700;
}

:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }


/* 02  Wordmark ============================================================
   NITR + a bolt standing in for the O. The bolt is sheared to the italic's own
   angle; at 0deg it read as a sticker dropped onto the word. */

.mark { display: inline-grid; justify-items: start; gap: 1px; }
.mark__word {
  display: flex;
  align-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--white);
}
.mark__bolt {
  width: .58em; height: .78em;
  margin-left: .04em;
  color: var(--lime);
  transform: skewX(-12deg);
}
.mark__sub {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.15;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--lime);
}
.mark--sm .mark__word { font-size: 24px; }
.mark--sm .mark__sub  { font-size: 9px; letter-spacing: .3em; }


/* 03  Header and nav ====================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
/* Transparent at the top of the page, glass once scrolled. The background and
   the backdrop-filter arrive together on .is-stuck — a translucent bar with no
   blur just puts the nav links on top of whatever is behind them. The hero is
   pulled up by the bar's own height so there IS something behind them. */
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
.site-header.is-stuck,
.site-header.is-open {
  background: rgba(19, 19, 19, .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
}

.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 38px); }
.nav__links > a {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  transition: color .16s ease;
}
.nav__links > a:hover { color: var(--lime); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.burger span { width: 21px; height: 2px; background: var(--white); }


/* 04  Buttons and links ===================================================
   Square corners throughout. The comp has no radius anywhere except on the
   footer's social discs, so a rounded button would be the one soft thing on
   the page. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 24px;
  border: 1px solid var(--lime);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease;
}
.btn svg { width: 18px; height: 18px; color: var(--lime); transition: color .18s ease; }
.btn:hover { background: var(--lime); color: var(--ink); }
.btn:hover svg { color: var(--ink); }

.btn--sm { padding: 11px 18px; font-size: 13.5px; }
.btn--sm svg { width: 15px; height: 15px; }
.btn--ghost { border-color: var(--line); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--lime-dim);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  transition: border-color .18s ease;
}
.link svg { width: 16px; height: 16px; color: var(--lime); }
.link:hover { border-bottom-color: var(--lime); }


/* 05  Hero ================================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* The plate is the hero's ground rather than a column inside it. It is 4:3,
     and cover would crop whichever axis the box is proportionally longer on —
     at 1920 that is 40% off the height, which takes the runner's head and his
     feet. `auto 100%` sizes it to the hero's HEIGHT instead and pins it right,
     so the figure is whole at every width and the flat ground simply extends
     left to fill whatever is left over. That works only because the plate's
     ground was lifted at export from #060606 to the page's own #131313; at
     #060606 the join would have been a vertical step down the middle.

     55%, not right. Pinned right the runner sat at 999-1381 of 1440 and left a
     340px trench of empty ground between him and the copy. Sliding the plate
     left costs nothing because its own left 59% is flat ground identical to the
     page's, and the strip it uncovers on the right is that same colour — so the
     only thing that actually moves is the runner. 106% oversizes it by a
     hair for presence; the 3% that crops off each end is clear of him, since he
     occupies 15.3% to 85.4% of the plate's height.

     The scrim is listed first, so it paints over the photograph. The left of
     the plate is near-black anyway, but "near" is not "guaranteed", and the
     headline has to hold at 375 where the runner sits under it. */
  background:
    linear-gradient(to right,
      var(--ink) 0 14%, rgba(19, 19, 19, .82) 38%, rgba(19, 19, 19, 0) 64%),
    url("img/hero-sprint.webp") 55% center / auto 106% no-repeat,
    var(--ink);
  min-height: clamp(540px, 56vw, 880px);
  padding-block: clamp(48px, 6vw, 96px);
}

/* 660, not 560: the four club names in the trust row measure about 610 together
   and the fourth was dropping to its own line. The paragraph is held short by
   its own 30ch instead, so widening this does not widen the sentence. */
.hero__copy { max-width: min(660px, 56%); }

.hero__title {
  font-size: clamp(44px, 6vw, 88px);
  letter-spacing: -.02em;
}

.hero__sub {
  max-width: 30ch;
  margin-top: clamp(18px, 2vw, 30px);
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--muted);
}

.hero .btn { margin-top: clamp(24px, 2.8vw, 40px); }

/* Same column as the copy above it; it used to live inside .hero__copy and
   moved out so the phone layout can put the plate between them. */
.trust { max-width: min(660px, 56%); margin-top: clamp(40px, 5.4vw, 74px); }
.hero__plate { display: none; }
.trust__rule { display: block; width: 26px; height: 2px; background: var(--lime); }
.trust__label { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
/* Invented clubs, not real ones. The iteration filled this row with UFC, HYROX,
   CrossFit and an NFL shield; a concept site does not get to borrow other
   people's marks, and set as type the row reads as a client list anyway. */
.trust__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  margin-top: 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(12.5px, 1.05vw, 15px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(232, 233, 233, .42);
}


/* 06  Built different ===================================================== */

.built { padding-block: clamp(42px, 4.9vw, 70px); border-top: 1px solid var(--line-soft); }

.built__top {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(28px, 5vw, 78px);
}
.built__lede p { color: var(--muted); }
.built__lede .btn { margin-top: 26px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 52px);
  margin-top: clamp(48px, 6vw, 86px);
}
/* Rules between the columns, not around them: a border-left on every item but
   the first, so the row reads as one object divided rather than three boxes. */
.pillars li + li { padding-left: clamp(24px, 3.4vw, 52px); border-left: 1px solid var(--line); }
.pillars__icon { width: 34px; height: 34px; color: var(--lime); }
.pillars h3 {
  margin: 20px 0 10px;
  font-family: var(--f-sans);
  font-size: 21px;
  font-weight: 600;
  color: var(--white);
}
.pillars p { font-size: 18px; color: var(--muted); }


/* 07  Programmes ========================================================== */

.programs { padding-block: clamp(42px, 4.9vw, 70px); }

.programs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(30px, 3.4vw, 46px);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 38px);
  background: var(--ink-raise);
  border: 1px solid var(--line-soft);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--lime-dim); transform: translateY(-3px); }
.card__icon { width: 38px; height: 38px; color: var(--lime); }
.card h3 {
  margin: 24px 0 12px;
  font-family: var(--f-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
}
.card > p { font-size: 20px; color: var(--muted); }

.card__list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 19px;
}
.card__list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.card__list svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--lime); }

/* Pushed to the bottom by the auto margin, so three cards of different copy
   lengths still line their arrows up. */
.card__go { margin-top: auto; padding-top: 26px; }
.card__go svg { width: 30px; height: 14px; color: var(--lime); }


/* 08  Results ============================================================= */

.results { padding-top: clamp(42px, 4.9vw, 70px); }

.results__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
}
.results__head p { color: var(--muted); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 40px);
  margin-top: clamp(34px, 4vw, 56px);
}
.stats li + li { padding-left: clamp(18px, 2.6vw, 40px); border-left: 1px solid var(--line); }
.stats strong {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(43px, 5vw, 71px);
  line-height: 1;
  color: var(--lime);
}
.stats strong span { font-size: .62em; }
.stats__label {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--muted);
}

/* Full-bleed, and deliberately not inside .shell — the comp runs this off both
   edges, which is the only thing on the page that does. */
.wave {
  width: 100%;
  height: clamp(84px, 10vw, 150px);
  margin-top: clamp(22px, 2.8vw, 40px);
}


/* 09  Testimonial ========================================================= */

.says { padding-block: clamp(40px, 4.6vw, 66px); }

.says__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
}

.says__arrows { display: flex; gap: 22px; margin-top: 30px; }
.says__arrows svg { width: 30px; height: 14px; color: var(--lime); }

.quote { position: relative; }
.quote__mark {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 76px;
  line-height: .7;
  color: var(--lime);
}
.quote blockquote p {
  margin-top: 18px;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.55;
  color: var(--text);
}

.quote__by {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 3vw, 40px);
  flex-wrap: wrap;
}
.quote__by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.quote__who { display: grid; }
.quote__who strong { font-size: 16px; font-weight: 600; color: var(--white); }
.quote__role { font-size: 14px; color: var(--muted); }
/* Pushed to the far end of the row, as in the comp. */
.quote__stars { display: flex; gap: 5px; margin-left: auto; }
.quote__stars svg { width: 17px; height: 17px; color: var(--lime); }


/* 10  Footer ============================================================== */

.site-footer { border-top: 1px solid var(--line-soft); padding-top: clamp(52px, 6vw, 86px); }

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .68fr) minmax(0, .97fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}

/* The pointed block. A border cannot follow a clip-path, so the outline is a
   clipped lime plate with a second, inset clipped plate of the page ground laid
   over it — the 1px that survives between the two IS the outline. */
.foot__cta { position: relative; padding: clamp(30px, 3.4vw, 46px) clamp(30px, 3.4vw, 52px); }
.foot__cta-edge {
  position: absolute;
  inset: 0;
  background: var(--lime);
  clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%);
}
.foot__cta-edge::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--ink);
  clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%);
}
.foot__cta-body { position: relative; }
.foot__cta p { margin-top: 14px; max-width: 26ch; color: var(--muted); }
.foot__cta .btn { margin-top: 26px; }

.foot__col h3 {
  margin-bottom: 20px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime);
}
.foot__col > a {
  display: block;
  padding: 7px 0;
  font-size: 16px;
  color: var(--text);
  transition: color .16s ease;
}
.foot__col > a:hover { color: var(--lime); }

.foot__col--contact p {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 16px;
  color: var(--text);
}
.foot__col--contact svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--lime); }
.foot__col--contact a:hover { color: var(--lime); }

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: clamp(38px, 5vw, 66px);
  padding-block: 26px 30px;
  border-top: 1px solid var(--line-soft);
}
.foot__fine { font-size: 14px; color: var(--muted); }
.foot__social { display: flex; gap: 12px; }
.foot__social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  transition: color .16s ease, border-color .16s ease;
}
.foot__social a:hover { color: var(--lime); border-color: var(--lime-dim); }
.foot__social svg { width: 16px; height: 16px; }


/* 11  Motion ============================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* 12  Responsive ==========================================================
   Two breakpoints and no more. 1000 is where the three-column rows stop having
   room for a sentence; 860 is where the hero's two columns stop being two. */

@media (max-width: 1000px) {
  :root { --shell: min(1180px, 100% - 56px); --gut: max(28px, calc((100vw - 1180px) / 2)); }

  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars li + li { padding-left: 0; border-left: 0; }
  .pillars li:nth-child(n+2) { padding-left: clamp(24px, 3.4vw, 52px); border-left: 1px solid var(--line); }
  .pillars li:nth-child(3) { padding-left: 0; border-left: 0; }

  .cards { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .stats li:nth-child(odd) { padding-left: 0; border-left: 0; }

  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__cta { grid-column: 1 / -1; }
  .foot__cta-edge, .foot__cta-edge::after { clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); }
}

@media (max-width: 860px) {
  :root { --shell: min(1180px, 100% - 40px); --gut: max(20px, calc((100vw - 1180px) / 2)); }

  .nav { min-height: 0; padding-block: 14px; }
  .burger { display: flex; }
  .nav__links {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 0 20px;
    border-top: 1px solid var(--line-soft);
  }
  .nav__links.is-open { display: flex; }
  .nav__links > a { padding: 10px 2px; font-size: 17px; }
  .nav__links .btn--sm { margin-top: 10px; }
  .nav { flex-wrap: wrap; }

  /* Stacked, not scrimmed. The plate under the headline left the runner
     cropped to an arm and a knee behind a fog of scrim. The copy now sits on
     plain ink; its own 2:3 plate follows as a full-bleed band with the runner
     as big as he is on a desktop, the button overlapping its top edge; the
     trust row closes the section under it. */
  .hero { align-items: flex-start; min-height: 0; background: var(--ink); padding-bottom: clamp(32px, 8vw, 44px); }
  .hero__copy { max-width: none; }
  .hero__sub { max-width: 34ch; }
  .hero .btn { position: relative; z-index: 1; }
  .hero__plate {
    display: block;
    height: clamp(440px, 128vw, 540px);
    margin: -20px calc(50% - 50vw) 0;
    background:
      linear-gradient(to bottom, var(--ink) 0, rgba(19, 19, 19, 0) 16%, rgba(19, 19, 19, 0) 88%, var(--ink) 100%),
      url("img/hero-mobile.webp?v=1") center 45% / cover no-repeat,
      var(--ink);
  }
  .trust { max-width: none; margin-top: 8px; }

  .built__top, .results__head { grid-template-columns: minmax(0, 1fr); }
  .says__grid { grid-template-columns: minmax(0, 1fr); }
  .says__arrows { margin-bottom: 8px; }

  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__cta-edge, .foot__cta-edge::after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@media (max-width: 560px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars li:nth-child(n+2) { padding-left: 0; border-left: 0; padding-top: 26px; border-top: 1px solid var(--line); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats li + li { padding-left: 0; border-left: 0; }
  .quote__stars { margin-left: 0; flex-basis: 100%; }
}