/* ============================================================
   ProTurf — proturf.net
   Palette (brand-supplied):
     --blue   #0056AA   primary
     --green  #09AF34   primary action
     --navy   #041C31   primary dark
     --steel  #C4CDD6   secondary
     --paper  #fdfdfb   secondary light
   Type: Gropro (hero/display headings — brand "GoPro" font, local @font-face)
         Barlow Condensed (small-display utility: nav, buttons, labels)
         Montserrat (body, brand-specified)
   ============================================================ */

@font-face {
  font-family: "Gropro";
  src: url("../assets/fonts/Gropro.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0056AA;
  --green: #09AF34;
  --navy: #041C31;
  --steel: #C4CDD6;
  --paper: #fdfdfb;

  --navy-2: #0a2a45;          /* lifted navy for cards on dark */
  --green-dark: #078a29;
  --ink: #12222f;             /* body text on light */
  --line: rgba(196, 205, 214, 0.25);

  --font-hero: "Gropro", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;

  --max: 1120px;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Clears the sticky header on anchor jumps. Without this, a section's top
     lands flush under the 76px header and only survives on the section's own
     top padding — change that padding and headings slide under the header. */
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}

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

a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- type helpers ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}

.h-display {
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: 0.01em;
}

.section-head { margin-bottom: 40px; }
.section-head h2 {
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  margin-top: 8px;
}
.section-head p { max-width: 60ch; margin-top: 12px; color: #3c4c5a; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-green { background: var(--green); color: var(--navy); }
.btn-green:hover { background: var(--green-dark); color: var(--paper); }
.btn-ghost { border-color: var(--steel); color: var(--paper); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-blue { background: var(--blue); color: var(--paper); }
.btn-blue:hover { background: #00448a; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid #dde4ea;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 24px;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 56px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #3c4c5a;
}
.site-nav a:hover { color: var(--navy); }
.site-nav .btn { padding: 8px 20px; font-size: 1rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: 6px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid #dde4ea;
    padding: 8px 24px 20px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid #e4e9ee; }
  .site-nav .btn { margin-top: 14px; text-align: center; border: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  /* real field photo, muted under a navy wash so the headline stays legible;
     the CSS yard-lines (::before/::after) still read subtly on top */
  background:
    linear-gradient(rgba(4, 28, 49, 0.80), rgba(4, 28, 49, 0.92)),
    url("../assets/hero-football.webp") center 38% / cover no-repeat,
    var(--navy);
  color: var(--paper);
  overflow: hidden;
}

/* yard lines + hash marks: the field, drawn in CSS */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 119px,
      rgba(196, 205, 214, 0.14) 119px,
      rgba(196, 205, 214, 0.14) 121px
    );
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      rgba(9, 175, 52, 0.10) 27px,
      rgba(9, 175, 52, 0.10) 29px
    );
  /* hash marks only in two vertical bands, like a real field */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0 18%, black 18% 21%, transparent 21% 79%, black 79% 82%, transparent 82%);
  mask-image: linear-gradient(to right,
      transparent 0 18%, black 18% 21%, transparent 21% 79%, black 79% 82%, transparent 82%);
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: clamp(70px, 12vh, 130px);
  padding-bottom: clamp(70px, 12vh, 130px);
}

/* The headline is the hero's thesis — let it run close to the full canvas
   rather than sitting in a narrow column with dead space beside it. */
.hero h1 {
  font-size: clamp(2.2rem, 6.2vw, 5rem);
  max-width: 20ch;
  margin: 16px 0 22px;
}
.hero h1 .accent { color: var(--green); }

/* Scale the lede with the canvas: the wider hero can carry 1.12rem, but on a
   phone that same size ran the lede to 9 lines and pushed the CTAs below the
   fold. Track viewport width instead of setting one size for both. */
.hero .lede {
  max-width: 68ch;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.12rem);
  color: var(--steel);
  margin-bottom: 34px;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

.hero-strip {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: rgba(4, 28, 49, 0.6);
}
.hero-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.hero-strip span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.hero-strip span::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 10px;
  background: var(--green);
  transform: rotate(45deg);
}

/* ---------- turf / depth chart (full-bleed field tiles) ---------- */

/* The tiles are the one full-bleed block on the site. The intro and footnote
   stay in the normal centered content column (the default .wrap) so they line
   up with the header, hero, and every other section. --turf-gutter is the tile
   badge inset (.tile-rank), kept equal to the site .wrap gutter. */
.turf-section {
  --turf-gutter: 24px;              /* .tile-rank inset == site .wrap gutter */
  padding: 90px 0 70px;
  background: var(--paper);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1020px) { .field-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .field-grid { grid-template-columns: 1fr; } }

/* min-height is load-bearing — do not shorten. The tier name (h3) is
   bottom-anchored vertical text that grows UPWARD, so tile height is what keeps
   it clear of the .tile-rank badge above it.

   Worst case is the LONGEST name at the WIDEST viewport: the h3 is
   clamp(1.5rem, 1.9vw, 2rem), so it tops out at the 2rem cap once the viewport
   passes ~1684px. There, "All-Conference" is 435px of glyphs; anchored 18px off
   the bottom against a badge reaching 53px, the floor is 435+18+53 = 506px
   before any gap at all. 560px leaves 54px. Verified 390px-2560px.

   Test wide, not just at 1280: at 1600px the same name measures only 413px
   (1.9vw = 30.4px there), which makes a too-short tile look safe. */
.field-tile {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  background: var(--navy);
  color: var(--paper);
}

/* Seam between adjacent tiles, so four tiers read as four columns rather than
   one continuous field. Sits on the canvas, which paints over the tile's own
   background. Only while the grid is multi-column. */
@media (min-width: 681px) {
  .field-tile + .field-tile .tile-static {
    box-shadow: inset 1px 0 0 rgba(4, 28, 49, 0.6);
  }
}

/* Static background: the field / action photo for this tier, shown at rest. */
.tile-static {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rollover photo: the tier's turf shot cross-fades + eases in on hover, above
   the static field photo (z0) but below the scrim (z2), badge/name (z3), and
   spec panel (z4). Lazy-loaded and decorative — meaning lives in name + specs. */
.tile-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.5s ease, transform 0.6s ease;
  pointer-events: none;
}
/* Always-on navy scrim so the white badge and tier name stay legible over any
   photo (bright field shot at rest, or the turf shot on hover). */
.field-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(4, 28, 49, 0.55) 0%,
    rgba(4, 28, 49, 0.14) 40%,
    rgba(4, 28, 49, 0.62) 100%);
  pointer-events: none;
}
.field-tile:hover .tile-photo,
.field-tile:focus-within .tile-photo {
  opacity: 1;
  transform: scale(1);
}

.tile-rank {
  position: absolute;
  top: 18px;
  left: var(--turf-gutter);        /* aligns tier 1's badge under the heading */
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(4, 28, 49, 0.72);
  padding: 6px 12px;
  border-left: 3px solid var(--green);
}

/* Tier name: top-anchored vertical text, reading top-to-bottom (no rotation),
   starting just below the rank badge. Top-anchoring means the WHOLE name is
   visible the instant a tile scrolls into view — you read "ALL-CONFERENCE" from
   its start, never a mid-word fragment. (It used to be bottom-anchored and
   rotated 180deg to read upward, which on a laptop viewport showed only the
   tail of each name until you scrolled the full 560px tile past.) */
.field-tile h3 {
  position: absolute;
  left: 10px;
  top: 66px;                 /* clears the badge (bottom ~53px) */
  z-index: 3;
  margin: 0;
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  line-height: 1;
  color: var(--paper);
  writing-mode: vertical-rl;
  text-shadow: 0 2px 14px rgba(4, 28, 49, 0.8);
}

/* Expand affordance. Was a small "Details +" label that read as stray text
   rather than a control; now a target that echoes the .tile-rank badge above it
   (translucent navy, green accent, Barlow). Decorative — the panel it reveals
   is always in the DOM, and the tile's real action is the .tile-link inside. */
.tile-hint {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(9, 175, 52, 0.9);
  background: rgba(4, 28, 49, 0.72);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--paper);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.field-tile:hover .tile-hint { transform: scale(0.85); }

/* The panel stops short of the left edge, leaving a gutter the tier name lives
   in. That keeps the name readable while its own panel is open, instead of
   fading it out and leaving the reader without a label. */
.tile-panel {
  position: absolute;
  left: 52px;
  right: 0;
  bottom: 0;
  z-index: 4;
  /* translucent so the turf photo reads through; blur keeps the copy legible */
  background: rgba(4, 28, 49, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 22px 20px 20px 16px;
  transform: translateY(102%);
  transition: transform 0.3s ease;
}
.field-tile:hover .tile-panel,
.field-tile:focus-within .tile-panel { transform: none; }
.field-tile:hover .tile-hint,
.field-tile:focus-within .tile-hint { opacity: 0; }

.tile-panel p { font-size: 0.88rem; color: var(--steel); margin-bottom: 14px; }
.tile-panel .tile-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.92rem;
  line-height: 1.15;
  color: var(--green);
  margin-bottom: 8px;
}
.tile-panel .tile-bestfor { font-size: 0.78rem; line-height: 1.45; margin-bottom: 14px; }
.tile-panel .tile-bestfor span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--paper);
  margin-bottom: 3px;
}

.tile-specs {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-bottom: 14px;
  font-size: 0.82rem;
}
.tile-specs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--steel);
}
.tile-specs li strong { color: var(--paper); font-weight: 600; text-align: right; }

/* Sized to survive the longest tier name ("Ask about All-Conference →") on one
   line inside the gutter-narrowed panel. */
.tile-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green);
  text-wrap: balance;
}
.tile-link:hover { color: var(--paper); }

/* touch devices & narrow screens: panel sits statically below the field */
@media (hover: none), (max-width: 680px) {
  .field-tile { min-height: 0; display: flex; flex-direction: column; }
  .tile-static { position: relative; inset: auto; height: 300px; }
  .tile-rank { top: 16px; left: var(--turf-gutter); }   /* stay aligned to the intro when stacked */
  /* name reads horizontally inside the fixed-height canvas */
  .field-tile h3 {
    writing-mode: horizontal-tb;
    transform: none;
    bottom: auto;
    top: 252px;
    left: 16px;
    font-size: 1.4rem;
    white-space: nowrap;
  }
  .tile-hint { display: none; }
  .tile-panel { position: static; transform: none; background: var(--navy); }
  /* No hover on mobile: keep the resting turf texture, skip the rollover photo. */
  .tile-photo { display: none; }
  .field-tile::after { content: none; }
}

/* "Standard on every system" — the shared-spec summary. Was grey fine print
   crammed top-left; now a spec strip that spans the tile grid's width, so the
   universal specs read as a deliberate value statement, not a disclaimer. The
   green-diamond bullet echoes the hero trust strip for brand continuity. */
/* "Included with every system" — a defined card so the six specs read as a
   balanced spec sheet filling the column, not chips floating on empty white. */
.turf-standard {
  margin-top: 52px;
  padding: 38px clamp(22px, 3vw, 44px) 34px;
  background: rgba(4, 28, 49, 0.035);
  border: 1px solid #dde4ea;
  border-radius: var(--radius);
}
.turf-standard-lead {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1rem;
  color: var(--green-dark);
  text-align: center;
  margin-bottom: 28px;
}
.turf-standard-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
@media (max-width: 760px) { .turf-standard-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .turf-standard-list { grid-template-columns: 1fr; } }
.turf-standard-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 1.1rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid #dde4ea;
  border-radius: 10px;
  padding: 15px 20px;
}
.turf-standard-list li::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--green);
  transform: rotate(45deg);   /* diamond, matching the hero trust strip */
}
.turf-standard-note {
  font-size: 0.95rem;
  color: #55677a;
  text-align: center;
  max-width: 64ch;
  margin: 0 auto;
}

/* add-on products (contact-only) below the main four */
.more-products { position: relative; margin-top: 40px; }
.more-products-lead {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1rem;
  color: var(--green-dark);
  text-align: center;
  margin-bottom: 22px;
}
.more-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 760px) { .more-products-grid { grid-template-columns: 1fr; } }
.more-products-grid li {
  position: relative;
  background: #fff;
  border: 1px solid #dde4ea;
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}
/* product cutaway render, shown in full on a clean panel; zooms on rollover */
.mp-thumb {
  display: block;
  height: 176px;
  overflow: hidden;
  background: #fff;
  border-bottom: 3px solid var(--green);
}
.mp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fill the thumb edge-to-edge — no white side gaps */
  object-position: center;
  transform: scale(1);
  transition: transform 0.5s ease;
}
.more-products-grid li:hover .mp-thumb img,
.more-products-grid li:focus-within .mp-thumb img {
  transform: scale(1.06);
}
.mp-body { padding: 20px 22px 22px; }
.more-products-grid h3 {
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 8px;
}
.more-products-grid p { font-size: 0.9rem; color: #55677a; margin-bottom: 14px; }
.more-products-grid a {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--green-dark);
  text-decoration: none;
}
.more-products-grid a:hover { text-decoration: underline; }

/* one section-level info button (top-right) → opens the system-diagram popup */
.mp-diagram-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--navy);
  padding: 11px 18px;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.mp-diagram-btn:hover, .mp-diagram-btn:focus-visible { background: var(--green-dark); }
.mp-diagram-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1;
}
/* on narrow screens drop it below the "Also available" label instead of the corner */
@media (max-width: 640px) {
  .mp-diagram-btn { position: static; display: inline-flex; margin: 0 auto 20px; }
}

/* ---------- lightbox (system diagram popup) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 28, 49, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: 96vw;
  max-height: 92vh;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.lightbox-dialog picture { display: block; }
/* auto/auto so a landscape shot fits by width and the portrait one by height */
.lightbox-dialog img { display: block; width: auto; height: auto; max-width: 96vw; max-height: 92vh; }
.lightbox-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(4, 28, 49, 0.85);
  color: var(--paper);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover, .lightbox-close:focus-visible { background: var(--green-dark); }

/* ---------- story (scroll-scrub video) ---------- */
.story { position: relative; background: var(--paper); }
.story-track { height: 650vh; }                 /* scroll distance that drives the video (45s clip); taller = slower scrub */
.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.story-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper);
}
/* The story video is a light, white-background animation, so the scrim is a
   paper wash (not navy) and the beat text is navy for contrast. */
.story-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(253, 253, 251, 0.70) 0%,
    rgba(253, 253, 251, 0.15) 42%,
    rgba(253, 253, 251, 0.55) 100%);
}
.story-beats { position: absolute; inset: 0; z-index: 2; color: var(--navy); }
.story-beat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.story-beat.is-active { opacity: 1; transform: none; pointer-events: auto; }
.story-beat h2 {
  font-size: clamp(2rem, 5.4vw, 4.2rem);
  line-height: 1.05;
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(253, 253, 251, 0.85);
}
.story-beat .eyebrow { margin-bottom: 14px; }
.story-beat .btn { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) {
  .story-beat { transition: none; }
}

/* ---------- process ---------- */

.process-section { padding: 90px 0; background: var(--navy); color: var(--paper); }
.process-section .section-head p { color: var(--steel); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .process-grid { grid-template-columns: 1fr; } }

.process-step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: var(--navy-2);
}
.process-step .step-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: var(--green);
}
.process-step h3 {
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin: 8px 0 10px;
}
.process-step p { color: var(--steel); font-size: 0.95rem; }

.process-note {
  margin-top: 30px;
  padding: 20px 24px;
  border-left: 4px solid var(--green);
  background: var(--navy-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--steel);
  max-width: 72ch;
}
.process-note strong { color: var(--paper); }

/* ---------- about ---------- */

.about-section { padding: 90px 0; background: var(--paper); }

/* wide sideline photo between the heading and the copy grid */
.about-media {
  position: relative;
  margin-bottom: 44px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #dde4ea;
}
.about-media img {
  display: block;
  width: 100%;
  height: clamp(240px, 40vw, 460px);
  object-fit: cover;
  object-position: center 32%;
}
.about-media figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 22px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(to top, rgba(4, 28, 49, 0.85), rgba(4, 28, 49, 0));
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }

.about-copy p { margin-bottom: 16px; max-width: 62ch; }

.about-points { list-style: none; display: grid; gap: 14px; }
.about-points li {
  background: #fff;
  border: 1px solid #dde4ea;
  border-radius: var(--radius);
  padding: 18px 20px;
}
.about-points .point-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.about-points p { font-size: 0.92rem; color: #3c4c5a; }

/* ---------- contact CTA band ---------- */

.cta-band {
  background: linear-gradient(100deg, var(--blue), #003d7a);
  color: var(--paper);
  padding: 70px 0;
}
.cta-band .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta-band h2 {
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.05;
  max-width: 18ch;
}
.cta-band p { color: #d8e4f0; margin-top: 10px; max-width: 48ch; }

/* ---------- contact page ---------- */

.contact-hero {
  background: var(--navy);
  color: var(--paper);
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 89px,
    rgba(196, 205, 214, 0.10) 89px,
    rgba(196, 205, 214, 0.10) 91px
  );
  pointer-events: none;
}
.contact-hero .wrap { position: relative; z-index: 1; }
.contact-hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  margin: 12px 0 14px;
}
.contact-hero p { color: var(--steel); max-width: 58ch; }

.contact-section { padding: 64px 0 90px; }
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: stretch;
}
/* The details column is ~240px shorter than the form, which pooled all the
   slack into one void at the bottom. Let the column fill the row and push the
   reassurance box down, so it lands level with the end of the form. */
.contact-details { display: flex; flex-direction: column; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-details h2, .contact-form-wrap h2 {
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin-bottom: 18px;
  color: var(--navy);
}

.contact-list { list-style: none; display: grid; gap: 16px; }
.contact-list li { padding-left: 18px; border-left: 3px solid var(--green); }
.contact-list .label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #55677a;
}
.contact-list a { color: var(--blue); font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.contact-reassure {
  margin-top: auto;          /* bottom-anchor within .contact-details */
  padding: 18px 20px;
  background: #eef4f0;
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: #2a4436;
}
/* Single column: no slack to absorb, so restore a normal gap. */
@media (max-width: 860px) { .contact-reassure { margin-top: 28px; } }

/* form */
.inquiry-form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.field .req {
  color: var(--green-dark);
  margin-left: 4px;
  font-weight: 700;
}
.form-legend {
  font-size: 0.82rem;
  color: #55677a;
  margin-bottom: 2px;
}
.form-legend .req { color: var(--green-dark); font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 11px 12px;
  border: 1px solid #c2cdd7;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }

.form-fine { font-size: 0.82rem; color: #55677a; }

/* ---------- brand stripe & brand moment ---------- */

/* Brand stripe device (from ProTurf_Stripe.svg): blue / green / steel bands */
.brand-stripe {
  height: 12px;
  background: linear-gradient(
    to bottom,
    var(--blue) 0 21.3%,
    var(--green) 21.3% 78.7%,
    var(--steel) 78.7% 100%
  );
}

/* Logo alone — the tagline moved to the footer. The logo SVG is a 600x200
   viewBox with its ink inset 66.7/600 (11.12%) top and bottom, so at 400px wide
   it already carries ~45px of its own whitespace each side. The section padding
   is set low to account for that; the optical gap is larger than it reads. */
.brand-moment {
  background: var(--paper);
  padding: 48px 0 56px;
  text-align: center;
}
.brand-moment .logo { width: min(400px, 74vw); margin: 0 auto; }

/* ---------- footer ---------- */

.site-footer { background: var(--navy); color: var(--steel); padding: 56px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Tagline sits directly above the ProTurf heading so the two read as one line:
   "The surface pros rely on / ProTurf". The SVG carries 9.23% dead space above
   and below its ink, which scales with width — trim both so the art aligns with
   the neighbouring column headings and closes up on the name below it. */
.footer-tag {
  --ftag-w: min(230px, 70%);
  width: var(--ftag-w);
  margin-top: calc(-1 * var(--ftag-w) * 0.0923);
  margin-bottom: calc(10px - var(--ftag-w) * 0.0923);
}

.site-footer h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  color: var(--paper);
  margin-bottom: 12px;
}
.site-footer a { color: var(--steel); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer ul { list-style: none; display: grid; gap: 8px; font-size: 0.92rem; }
.site-footer p { font-size: 0.92rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  font-size: 0.85rem;
  color: #7e93a6;
}
.footer-bottom .division { color: var(--steel); font-weight: 600; }

/* ---------- scroll reveal ---------- */
/* Hidden state only applies when JS has tagged <html class="js">,
   so content stays visible with JavaScript disabled. */

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- intro reveal ---------- */
/* Pure CSS: the curtain animates itself away, so there is no JS to fail and
   leave the site covered. pointer-events:none means it can never trap a click.
   Skipped entirely for reduced-motion users (see media query below). */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  animation: introHide 1.7s steps(1) forwards;
}
.intro-curtain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.4%;               /* slight overlap hides the seam before parting */
  background: var(--navy);
}
.intro-curtain-top    { top: 0;    animation: introTop    1.7s cubic-bezier(.72, 0, .18, 1) forwards; }
.intro-curtain-bottom { bottom: 0; animation: introBottom 1.7s cubic-bezier(.72, 0, .18, 1) forwards; }

.intro-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(90px, 14vw, 132px);
  height: auto;
  transform: translate(-50%, -50%);
  animation: introIcon 1.7s ease forwards;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
}
.intro-icon path { fill: var(--paper); }

@keyframes introIcon {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  26%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  52%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
  100% { opacity: 0; }
}
@keyframes introTop {
  0%, 52% { transform: translateY(0); }
  100%    { transform: translateY(-100%); }
}
@keyframes introBottom {
  0%, 52% { transform: translateY(0); }
  100%    { transform: translateY(100%); }
}
@keyframes introHide {
  0%, 99% { visibility: visible; }
  100%    { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}