/* =========================================================
   SkateFacilities — design tokens
   ========================================================= */

:root {
  --sans: 'Plus Jakarta Sans', 'Helvetica Neue', system-ui, sans-serif;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);

  /* Warm off-white palette — matched to the reference site */
  --bg: #faf7f3;
  --bg-soft: #f4f0e9;
  --bg-soft-2: #ece7dd;
  --ink: #1a1410;
  --ink-2: #5b5142;
  --ink-3: #8a8070;
  --line: #e6ddcc;
  --accent: #fcc000;        /* brand logo amber */
  --accent-ink: #1a1410;    /* near-black text on accent */
  --accent-text: #8a5a00;   /* readable amber for links/labels on cream */
  --shadow: rgba(30, 22, 12, 0.12);

  --container: 1240px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: clamp(18px, 4vw, 24px);
  --space-4: clamp(28px, 6vw, 40px);
  --space-5: clamp(36px, 7vw, 64px);
  --space-6: clamp(44px, 9vw, 96px);
  --space-7: clamp(56px, 12vw, 144px);

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;

  /* Type scale — one fluid system shared across the whole site */
  --fs-display: clamp(46px, 8vw, 104px);  /* hero / biggest statements */
  --fs-h2:      clamp(36px, 5.2vw, 64px); /* section titles */
  --fs-h3:      clamp(21px, 2.4vw, 28px); /* card / sub headings */
  --fs-lead:    clamp(17px, 1.4vw, 20px); /* intro paragraphs */
  --fs-body:    16.5px;
  --lh-head:    1.05;                     /* tight, intentional headlines */
  --lh-body:    1.65;                     /* calm, readable body */
  --track-head: -0.03em;                  /* slight condense on headings */

  color-scheme: light;
}

/* =========================================================
   Reset
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
/* Starts as "auto" (instant), not "smooth" — the browser's own
   scroll-position restore on reload happens before any of our JS runs,
   and if "smooth" were the default at that point, the restore itself
   gets animated: the page visibly scrolls from the top (or a URL hash
   target) up/down to where you last were, instead of just opening
   there. main.js switches this to "smooth" (for in-page nav clicks)
   once the page has fully loaded and any such restore is long done. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
  overflow-x: hidden;
}

section[id] { scroll-margin-top: 90px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   Layout helpers
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (min-width: 640px) {
  .container { padding: 0 var(--space-4); }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.kicker::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--accent-text);
  display: inline-block;
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-5);
}

.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--track-head);
  line-height: var(--lh-head);
  margin-top: var(--space-2);
}

.section-head p:not(.kicker) {
  margin-top: var(--space-3);
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: 52ch;
}

.eyebrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.eyebrow-link:hover { gap: 11px; color: var(--accent-text); }

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  min-height: 48px;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { transform: translateY(-2px); }

.btn-ghost {
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }

/* =========================================================
   Header / Nav
   ========================================================= */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 12px 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s,
    background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  pointer-events: none;
}

.site-header.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0s;
  pointer-events: auto;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 2px 10px var(--shadow);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

.nav-links a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
}
.menu-toggle svg { width: 18px; height: 18px; }

.nav-cta { display: none; }

@media (min-width: 980px) {
  .nav-links { display: flex; }
  .menu-toggle { display: none; }
  .nav-cta { display: inline-flex; }
}

/* Header swipe-collapse through the facility-parallax section — ported
   from the same mechanism on the other SkateFacilities site
   (G:\SF Website\js\main.js / style.css), minus its logo-docks-right
   trick: here the burger simply appears in place of the nav instead.
   The header bar itself also goes fully transparent while collapsed
   (matching that site), so it sits invisibly over the parallax images
   until the nav swipes back in. Below 980px the nav row never shows
   inline anyway (mobile always uses the burger + full-screen drawer),
   so the swipe/transparency only apply at desktop widths — the burger
   itself still toggles instantly there; clicking it while collapsed
   re-shows the nav inline rather than opening the full-screen drawer
   (see main.js). */
.site-header.is-parallax-collapsed {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
.site-header.is-parallax-collapsed.is-parallax-expanded {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--line);
  box-shadow: 0 8px 30px var(--shadow);
}
/* The SkateFacilities wordmark/logo fades out along with the nav
   while the bar is transparent over the parallax images — at every
   width, not just the 980px+ row, since the logo (unlike the nav
   links) is always shown. */
.site-header .brand { transition: opacity 0.45s var(--ease); }
.site-header.is-parallax-collapsed .brand {
  opacity: 0;
  pointer-events: none;
}
.site-header.is-parallax-collapsed.is-parallax-expanded .brand {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 980px) {
  .nav-links,
  .nav-cta {
    transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
  }
  .site-header.is-parallax-collapsed .nav-links,
  .site-header.is-parallax-collapsed .nav-cta {
    transform: translateX(40px);
    opacity: 0;
    pointer-events: none;
  }
  .site-header.is-parallax-collapsed.is-parallax-expanded .nav-links,
  .site-header.is-parallax-collapsed.is-parallax-expanded .nav-cta {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}
.site-header.is-parallax-collapsed .menu-toggle {
  display: grid;
  /* The bar is transparent here, so the burger needs its own solid
     backing to stay legible over whichever parallax image is behind
     it — same problem the other site solves by forcing its hamburger
     lines white. */
  background: var(--bg);
  border-color: transparent;
  box-shadow: 0 4px 16px var(--shadow);
}
.site-header.is-parallax-collapsed.is-parallax-expanded .nav-links {
  display: flex;
}
.site-header.is-parallax-collapsed.is-parallax-expanded .nav-cta {
  display: inline-flex;
}
/* Safety net for narrow viewports: the nav row is normally only ever
   shown at 980px+ (with room to spare), so let it wrap instead of
   overflowing if it's forced open on a smaller screen. */
.site-header.is-parallax-expanded .container { flex-wrap: wrap; row-gap: var(--space-2); }
.site-header.is-parallax-expanded .nav-links { flex-wrap: wrap; }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
}
.mobile-drawer.is-open { transform: translateY(0); }

.mobile-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-drawer-links {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mobile-drawer-links a {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mobile-drawer-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--ink-2);
}

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

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  text-align: center;
  padding: var(--space-4);
}

.hero-word-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: min(1100px, 92vw);
  /* Scroll-linked dissolve: JS sets --hero-progress from 0 (top) to 1
     (scrolled a screen down) and the whole group fades and lifts away,
     so the title feels like it disappears as the site begins. */
  opacity: calc(1 - var(--hero-progress, 0));
  transform: translateY(calc(var(--hero-progress, 0) * -40px));
  will-change: opacity, transform;
}

.hero-eyebrow {
  margin: 0;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.hero-word {
  margin: 0;
  font-size: clamp(46px, 12vw, 200px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
}

.hero-word-accent { color: var(--accent); }

.hero-sub {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  color: var(--ink-3);
  line-height: 0;
  text-decoration: none;
  /* fades out together with the title as you scroll in */
  opacity: calc((1 - var(--hero-progress, 0)) * 0.6);
}
.hero-scroll-cue svg {
  width: 22px;
  height: 22px;
  animation: hero-scroll-bob 2.2s ease-in-out infinite;
}
.hero-scroll-cue:hover { color: var(--accent-text); }

@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue svg { animation: none; }
}

/* =========================================================
   Icon badge — used by the Impression bullet list
   ========================================================= */

.icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-soft-2);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.icon-badge svg, .icon-badge img { width: 26px; height: 26px; object-fit: contain; }

/* =========================================================
   Impression / why us
   ========================================================= */

.impression { padding: var(--space-7) 0; }

.impression-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 860px) {
  .impression-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: start;
    gap: var(--space-6);
  }
}

.impression-media {
  width: min(100%, 780px);
  margin: 0 auto;
}
.impression-media img {
  width: 100%;
  display: block;
  aspect-ratio: 1600 / 938;
}

.impression-content { max-width: 760px; margin: 0 auto; width: 100%; min-width: 0; }

.impression-content h2 {
  margin-top: var(--space-2);
  font-size: clamp(19px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: var(--track-head);
  line-height: var(--lh-head);
  margin-bottom: var(--space-4);
  white-space: nowrap;
}
@media (min-width: 860px) {
  /* Content sits in a narrower grid column here, not the full container —
     scale against viewport more conservatively so it still fits on one line. */
  .impression-content h2 { font-size: clamp(24px, calc(3.95vw - 10px), 40px); }
}

/* =========================================================
   Facility intro — "More than just skateparks" header
   ========================================================= */

.facility-intro { padding: var(--space-7) 0; }

/* Header (kicker/title/discipline icons), centred as a block within the
   container. */
.facility-intro-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.facility-intro-content { min-width: 0; }

.facility-intro-content .section-head {
  margin-bottom: var(--space-2);
  max-width: 640px;
  margin-inline: auto;
}

.facility-intro-content .section-head p strong { color: var(--accent-text); }

.discipline-icons { justify-content: center; }

/* Card grid sits below the intro header, within the same section. */
.discipline-showcase-body { margin-top: var(--space-6); }

/* Icon badges styled identically to the ones in the "Build anywhere"
   bullet list (.icon-badge.icon-badge-sm, reused as-is) so both
   sections' icon treatment matches. */
.discipline-icons {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 4vw, 40px);
}

/* Each discipline = icon badge with its name beneath it. */
.discipline-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.discipline-icon-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

/* =========================================================
   Discipline showcase — light card grid on cream
   ========================================================= */

.discipline-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(28px, 3vw, 44px);
}

.discipline-showcase-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}
.discipline-showcase-cta .btn svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.discipline-showcase-cta .btn:hover svg { transform: translateX(3px); }

.discipline-card { display: flex; flex-direction: column; align-items: flex-start; }

.discipline-card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-soft);
}
.discipline-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.discipline-card:hover .discipline-card-media img { transform: scale(1.04); }

.discipline-card h3 {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--track-head);
  line-height: 1.1;
}

.discipline-card-desc {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
  max-width: 34ch;
}

.bullet-list { display: flex; flex-direction: column; }
/* Reserve room for one open panel so expanding an item fills the
   reserved space instead of growing the section and nudging the
   divider below. Only one panel opens at a time (hover / focus), so
   a single panel's worth of height keeps the section boundary static. */
@media (min-width: 860px) {
  .bullet-list { min-height: 320px; justify-content: flex-start; }
}

.bullet-item { border-top: 1px solid var(--line); }
.bullet-item:last-child { border-bottom: 1px solid var(--line); }

.bullet-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}

.icon-badge-sm {
  width: 34px;
  height: 34px;
  flex: none;
  margin-bottom: 0;
}
.icon-badge-sm svg, .icon-badge-sm img { width: 17px; height: 17px; object-fit: contain; }

/* These are detailed illustrative icons (not simple minimal glyphs like
   the rest of the site's icon set), so they need more room than the
   standard 17px/34px badge to stay legible. */
.discipline-icon .icon-badge-sm { width: 52px; height: 52px; }
.discipline-icon .icon-badge-sm img { width: 34px; height: 34px; }
/* Rollerblade.png's artwork fills almost its entire canvas (~97%) with
   barely any padding, unlike Bicycle.png (~58%) — so at the same
   display size it reads much larger/heavier. Scaled down to match the
   others' visual weight rather than their literal pixel size. */
.discipline-icon .icon-badge-sm img.icon-img-compact { width: 26px; height: 26px; }

.bullet-title {
  flex: 1;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.bullet-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-3);
  transition: transform 0.3s var(--ease);
}

.bullet-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.bullet-panel-inner { overflow: hidden; }
.bullet-panel-inner p {
  padding: 0 4px var(--space-2) 46px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 48ch;
}

.bullet-item:hover .bullet-panel,
.bullet-item:focus-within .bullet-panel,
.bullet-item.is-open .bullet-panel {
  grid-template-rows: 1fr;
}
.bullet-item:hover .bullet-chevron,
.bullet-item:focus-within .bullet-chevron,
.bullet-item.is-open .bullet-chevron {
  transform: rotate(180deg);
  color: var(--accent-text);
}

/* =========================================================
   Certification
   ========================================================= */

.certification {
  padding: var(--space-6) 0 var(--space-7);
  background: linear-gradient(155deg, var(--bg-soft-2), var(--bg-soft));
}

.cert-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 90px;
}
@media (min-width: 700px) {
  /* Same fix as .sustainability-box: without an explicit
     justify-content, the flex row packs to the left by default,
     leaving the whole block looking shoved left with dead space on
     the right instead of sitting centred in the section. Back to the
     original two-column 90px gap — .cert-standards is taken out of
     flow entirely (position: absolute, below), so it can't affect it. */
  .cert-box { flex-direction: row; align-items: center; justify-content: center; gap: 90px; }
}

/* Sized to its own content (capped, like every other section heading on
   the site) — NOT flex:1. flex:1 was the bug: it stretched this box to
   fill the entire row, so the text sat left-aligned inside a much wider
   invisible box and the real gap only started after that, way past 90px. */
.cert-copy {
  flex: 0 1 auto;
  max-width: 640px;
  min-width: 0;
}

/* The two standards-body marks (CEN, ASTM), grouped side by side.
   Absolutely positioned against .cert-box on every breakpoint — an
   absolutely-positioned flex item is removed from the flex flow
   entirely, so it never adds to .cert-box's gap and can't shift
   .cert-copy or .cert-logo. On the row layout (700px+) that lets it
   sit dead centre of the whole section's content — left:50%/top:50%
   plus the -50% translate centres the element itself, not just its
   corner, vertically anchored to sit level with .cert-links instead
   of the box's own centre (see the bottom:32px note below) so it
   lines up with the EN 14974 / ASTM link rows instead of the
   paragraph. On the narrow mobile stack it's pinned just below the
   World Skate logo instead, still horizontally centred. */
.cert-standards {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Without an explicit width, this absolutely-positioned box has an
     auto (shrink-to-fit) width — and the site-wide `img{max-width:100%}`
     rule then resolves against that same undetermined width, which
     collapses both logos down to a sliver. width:max-content forces
     sizing off the images' own intrinsic size instead. */
  width: max-content;
}
@media (min-width: 700px) {
  .cert-standards {
    top: auto;
    /* .cert-copy is the taller of the two flex items, so its top/bottom
       edges coincide exactly with .cert-box's — meaning the distance
       from .cert-links' vertical centre up to the shared bottom edge
       stays a constant 32px regardless of how many lines the paragraph
       above it wraps to (measured at both ~770px and ~1300px wide).
       bottom:32px + translateY(50%) puts THIS element's centre (not
       its edge) at that same point, lining it up with the links. */
    bottom: 32px;
    margin-top: 0;
    transform: translateX(-50%) translateY(50%);
    gap: 25px;
  }
}
/* 150% larger than the original 26px/24px (i.e. 2.5x that size). */
.cert-standard-logo {
  height: 65px;
  width: auto;
  display: block;
}
@media (min-width: 700px) {
  .cert-standard-logo { height: 60px; }
}

.cert-logo {
  flex: none;
  width: 117px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .cert-logo { width: 149px; margin: 0; }
}
.cert-logo img {
  width: 100%;
  display: block;
}

.cert-copy h2 {
  margin-top: var(--space-2);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--track-head);
  line-height: var(--lh-head);
}
.cert-copy p:not(.kicker) {
  margin-top: var(--space-3);
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: 60ch;
}

.cert-links {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cert-links a {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  display: inline-block;
}
.cert-links a:hover { color: var(--accent-text); }

/* =========================================================
   Sustainability — the site's only intentionally green-themed
   section, since the subject matter itself calls for it; every
   other section uses the site's own gold/cream tokens.
   ========================================================= */

.sustainability {
  padding: var(--space-7) 0;
}

.sustainability-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}
@media (min-width: 860px) {
  /* The logo (149px) is much narrower than .sustainability-copy's own
     content, so the pair no longer fills the container the way the
     certification section's wider two-column layout does — without an
     explicit justify-content, the flex row packs to the start (left)
     by default, leaving the whole block looking shoved left with dead
     space on the right instead of sitting centred in the section. */
  .sustainability-box { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-6); }
}

.sustainability-copy { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.sustainability-copy .kicker { color: #2f7a2f; }
.sustainability-copy .kicker::before { background: #2f7a2f; }
.sustainability-copy h2 {
  margin-top: var(--space-2);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--track-head);
  line-height: var(--lh-head);
}
.sustainability-copy > p:not(.kicker) {
  margin-top: var(--space-3);
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: 60ch;
}

.sustainability-points {
  /* Half the original var(--space-4) gap to the paragraph above. */
  margin-top: calc(var(--space-4) / 2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
}
.sustainability-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.5;
}
.sustainability-points .icon-badge-sm {
  background: #e3f3df;
  color: #2f7a2f;
  margin-top: 2px;
}

/* Same size as the World Skate logo in the certification section
   above (.cert-logo) — same widths, same breakpoint. */
.sustainability-media { flex: none; width: 117px; margin: 0 auto; }
@media (min-width: 700px) {
  .sustainability-media { width: 149px; margin: 0; }
}
.sustainability-media img { width: 100%; display: block; }

/* =========================================================
   Services — a static circular flow diagram (icons positioned
   around a thin ring, no motion of any kind) on the left; hovering
   or focusing an icon crossfades that service's image/heading/
   paragraph in on the right, and clicking one pins it so it stays
   shown after the mouse leaves — see the services-flow/-detail JS
   in main.js.
   ========================================================= */

.services { padding: var(--space-7) 0; background: var(--bg); }

/* Same max-width + margin:auto as .services-body, so this wrapper's
   edges land exactly on the body's edges at every viewport width —
   deliberately the same two values, not an independent calculation,
   so there's no risk of the two drifting apart between breakpoints. */
.services-head-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

/* On the row layout the heading sits flush at the start of that
   shared-width wrapper — the same position the flow diagram (also
   the first, fixed-width item inside an identically-bounded row)
   sits at — so the text lines up with the diagram's own left edge
   instead of the container's. Centred plainly on the mobile stack,
   where the diagram itself is centred rather than positioned left. */
.services .section-head { text-align: center; }
@media (min-width: 860px) {
  .services .section-head { width: 450px; text-align: left; }
}

/* One line, always — the box above stays 450px (so nothing else in the
   section shifts) and the heading is simply allowed to overflow that
   box visually rather than wrap within it. */
.services .section-head h2 { white-space: nowrap; }

/* Bounded and centred as one compact block — .services-detail no
   longer stretches edge-to-edge across whatever's left of a wide
   container, which read as lopsided (a small diagram against a huge
   stretched-out text column) rather than a centred composition.
   1180px (not the original 920px) — the 450px diagram plus a full
   gap left too little of that for the detail image's own 630px
   max-width to ever actually apply; it was silently being squeezed
   down to ~400px by the column itself, which is what actually made
   the "50% bigger" images look no bigger (and, worse, cropped in
   tighter than before, since the box's aspect ratio changed against
   an unchanged, narrow width). */
.services-body {
  margin: var(--space-4) auto 0;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
@media (min-width: 860px) {
  .services-body { flex-direction: row; align-items: center; gap: var(--space-6); }
}

/* Three icons positioned by hand at 0°/120°/240° around a circle
   (see the matching ::before ring below) rather than a generic
   trig-driven system — simplest reliable option for exactly three
   fixed points. Sized up at the row breakpoint since there's more
   width to give it there. 1.5x the original 260/300px — the labels
   are exempt (see .services-flow-label), only the diagram itself. */
.services-flow {
  position: relative;
  flex: none;
  width: 390px;
  height: 390px;
}
@media (min-width: 860px) {
  .services-flow { width: 450px; height: 450px; }
}

/* The one connecting shape — a thin static ring through the three
   icons' centres, in the site's existing fine hairline colour
   (var(--line)), not a directional arrow — "maintain the same fine
   line styling" from the original stepper's connecting line. Also
   scaled 1.5x (radius 90px/100px → 135px/150px); border-width is
   left as-is so it stays a fine line rather than growing with it. */
/* The connecting ring is now an SVG so it can double as a progress
   indicator: a hairline track plus an amber arc that sweeps 120° from
   the active step toward the next as the auto-cycle advances. */
.services-flow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 270px;
  height: 270px;
  transform: translate(-50%, -50%);
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
@media (min-width: 860px) {
  .services-flow-ring { width: 300px; height: 300px; }
}
.services-flow-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}

/* Travelling comet: a ~120-degree arc that fades from a bright leading
   head to a transparent tail. JS rotates it continuously so the head
   glides from the active step toward the next; when it arrives, that
   step activates. Built with a conic-gradient masked into a thin ring. */
.services-flow-comet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 270px;
  height: 270px;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 50%;
  background: conic-gradient(rgba(252, 192, 0, 0) 0deg 240deg, var(--accent) 358deg, rgba(252, 192, 0, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 0 5px rgba(252, 192, 0, 0.45));
}
@media (min-width: 860px) {
  .services-flow-comet { width: 300px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-flow-comet { display: none; }  /* no auto-cycle → no comet */
}

/* Step counter in the middle of the ring — reinforces progress and
   fills the centre the way a professional circular stepper does. */
.services-flow-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}
.services-flow-num {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.services-flow-of {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Sized to exactly the icon (56x56), not the icon+label together —
   translate(-50%,-50%) below then centres the ICON itself on the
   ring at the intended radius. Centering the whole icon+label column
   instead (as this originally did) let the label's height pull the
   box's centre down, landing each icon 20px+ off the ring — visibly
   worse for the two lower icons (pulled inside the ring) than the
   top one (pushed outside it), exactly the mismatch reported.
   The label is a separate absolutely-positioned child below (see
   .services-flow-label) so it doesn't factor into this box's size;
   it's still a DOM descendant, so hovering it still counts as
   hovering the item. */
/* 1.5x the original 56x56 — kept sized to exactly the icon (see the
   note above on why) so it still centres the icon precisely on the
   ring at the (also 1.5x'd) radius. */
.services-flow-item {
  position: absolute;
  z-index: 1;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Positions: top, bottom-right, bottom-left — matching the ring
   radius (135px/150px) above. */
.services-flow-item:nth-child(1) { top: 60px; left: 195px; }
.services-flow-item:nth-child(2) { top: 262.5px; left: 311.9px; }
.services-flow-item:nth-child(3) { top: 262.5px; left: 78.1px; }
@media (min-width: 860px) {
  .services-flow-item:nth-child(1) { top: 75px; left: 225px; }
  .services-flow-item:nth-child(2) { top: 300px; left: 354.9px; }
  .services-flow-item:nth-child(3) { top: 300px; left: 95.1px; }
}
.services-flow-item:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 4px;
  border-radius: var(--radius-s);
}

/* Opaque background so the ring visually passes behind each icon
   rather than showing straight through it — icons "as they are"
   (proportionally: the glyph is 1.5x'd along with its badge, same
   ratio as before), unchanged in style from the original stepper. */
.services-flow-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--ink-3);
  box-shadow: 0 6px 18px rgba(30, 22, 12, 0.07);
  transition: background 300ms var(--ease), border-color 300ms var(--ease),
    color 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.services-flow-icon svg { width: 39px; height: 39px; }

/* Font-size deliberately NOT scaled with the rest of the diagram —
   "keep the text of the flow diagram the same size it is currently". */
.services-flow-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  width: 110px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-2);
  transition: color 300ms var(--ease);
}

/* Only the icon's own colours change on activity — the diagram's
   layout/positions never move, per "keep the flow diagram static". */
.services-flow-item.is-active .services-flow-icon,
.services-flow-item:hover .services-flow-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(252, 192, 0, 0.4);
}
.services-flow-item.is-active .services-flow-label,
.services-flow-item:hover .services-flow-label {
  color: var(--ink);
}

/* Detail panel: all three panels are stacked in the same grid cell
   (grid-area 1/1) instead of one being taken out of flow (position:
   relative) while the others sit absolute — that swap used to resize
   .services-detail to whichever panel happened to be active, which
   reflowed the centred row around it every time you hovered a
   different icon. Stacking them as grid items instead sizes the cell
   to the TALLEST panel always, so the container's height (and the
   row's vertical centering) never changes — content stays static and
   only opacity cross-fades between panels. No transform/translate:
   a real cross-fade, not a slide. */
.services-detail { position: relative; flex: 1 1 auto; min-width: 0; width: 100%; display: grid; }
.services-detail-panel {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 400ms var(--ease);
  pointer-events: none;
}
.services-detail-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Fixed height (not aspect-ratio off the column's own — often quite
   wide — width) so the image stays a landscape strip instead of
   growing tall enough to blow past the circular diagram's own
   height; that's what actually keeps image + heading + paragraph
   together fitting neatly alongside it. */
/* 1.5x the original 420px/170px. */
.services-detail-panel img {
  width: 100%;
  max-width: 630px;
  height: 255px;
  object-fit: cover;
  border-radius: var(--radius-m);
  display: block;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(30, 22, 12, 0.1);
}
.services-detail-text { margin-top: var(--space-3); }
.services-detail-panel h3 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.services-detail-panel p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 52ch;
}

/* =========================================================
   Featured at — copied from the other SkateFacilities site's
   "World Stage Ready" event wall, minus the dark section it
   lived in: background swapped for the site's plain white and
   the eyebrow/labels swapped for our own token colours.
   ========================================================= */

.featured-at { padding: var(--space-7) 0; background: var(--bg); }

.event-wall { text-align: center; }
.event-wall .kicker { margin: 0 auto var(--space-5); justify-content: center; }

/* Continuous marquee (shared component, used on the home + portfolio
   pages). The track holds two identical copies of the logo set (JS
   clones once); the animation slides it by exactly one copy (-50%) for a
   seamless loop. Edges fade out; hovering pauses it. Trailing space is
   applied as margin on each item (not flex gap) so the two copies join
   with an even gap and the loop has no visible jump. */
.event-logos {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.event-logos-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: event-marquee 42s linear infinite;
}
.event-logos:hover .event-logos-track { animation-play-state: paused; }
@keyframes event-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.event-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 210px;
  flex: none;
  margin-right: 24px;
}
.event-logo-chip {
  width: 100%;
  height: 160px;
  /* Pure white, matching the other SkateFacilities site's own event
     chips — these event logos have real alpha transparency (verified:
     the PNG files are byte-identical to that site's copies), but
     several sit on a mix of white/light artwork internally, which
     reads noticeably cleaner against a plain white chip than the
     site's own cream/tan token used everywhere else. */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: 0 6px 18px rgba(30, 22, 12, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  /* No motion: a static, centred, wrapping row (JS also skips cloning). */
  .event-logos { -webkit-mask-image: none; mask-image: none; }
  .event-logos-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .event-logo { margin-right: 0; }
}
.event-logo-chip img { height: 100px; width: auto; max-width: 100%; object-fit: contain; display: block; margin-inline: auto; }
.event-logo span {
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* =========================================================
   CTA / contact
   ========================================================= */

.cta { padding: var(--space-7) 0; }

.cta-box {
  background: linear-gradient(155deg, var(--bg-soft-2), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-5) var(--space-4);
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .cta-box { grid-template-columns: 1fr 1fr; padding: var(--space-6); }
}

.cta-copy h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.cta-copy p:not(.kicker) {
  margin-top: var(--space-2);
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 48ch;
}

.contact-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-3);
}
.contact-item .icon-badge { background: var(--bg); border: 1px solid var(--line); }
.contact-item h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.contact-item p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.contact-item a { color: var(--ink); font-weight: 700; }
.contact-item a:hover { color: var(--accent-text); }

.cta-form { display: flex; flex-direction: column; gap: var(--space-2); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field input,
.field select,
.field textarea {
  font: inherit;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  padding: 13px 16px;
  color: var(--ink);
  min-height: 48px;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); outline: none; }

.field-row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

.option-group { display: flex; flex-wrap: wrap; gap: 8px; }
.option-pill { position: relative; }
.option-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.option-pill span {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.option-pill input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.option-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.dropdown-select { position: relative; }

.dropdown-select-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
  text-align: left;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  padding: 13px 16px;
  color: var(--ink);
  min-height: 48px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.dropdown-select-toggle:hover { border-color: var(--ink-3); }
.dropdown-select.is-open .dropdown-select-toggle,
.dropdown-select-toggle:focus-visible { border-color: var(--accent); outline: none; }

.dropdown-select-value { color: var(--ink-2); }
.dropdown-select.has-value .dropdown-select-value { color: var(--ink); font-weight: 600; }

.dropdown-select-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-3);
  transition: transform 0.2s var(--ease);
}
.dropdown-select.is-open .dropdown-select-chevron { transform: rotate(180deg); }

.dropdown-select-panel-wrap {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
}
.dropdown-select.is-open .dropdown-select-panel-wrap { display: block; }

.dropdown-select-panel {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: 0 12px 32px var(--shadow);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
@media (max-width: 460px) {
  .dropdown-select-panel { grid-template-columns: 1fr; }
}

.dropdown-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s var(--ease);
  break-inside: avoid;
}
.dropdown-select-option:hover { background: var(--bg-soft); }
.dropdown-select-option input {
  width: 14px;
  height: 14px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.dropdown-select-option input:checked ~ span { color: var(--ink); font-weight: 700; }

.field-note {
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px 14px;
}

.cta-form .btn { margin-top: 6px; }

.form-note {
  font-size: 13px;
  color: var(--ink-3);
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-6) 0 var(--space-4);
}

.footer-top {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

@media (min-width: 860px) {
  .footer-top { grid-template-columns: 1.2fr 0.8fr 0.8fr; }
}

.footer-brand .brand { margin-bottom: var(--space-2); }
.footer-brand p {
  color: var(--ink-2);
  max-width: 42ch;
  line-height: 1.65;
  font-size: 15px;
}

.footer-social { display: flex; gap: 10px; margin-top: var(--space-3); }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.footer-social svg { width: 16px; height: 16px; }

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 15px; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--accent-text); }
.footer-col p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 10px; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 13.5px;
}

/* =========================================================
   Facility discipline parallax — copied from the other SkateFacilities
   site at G:\SF Website\index.html. Its header (kicker/heading/media)
   has since been brought in line with this site's own design system;
   only the sticky crossfade panel mechanism below still carries the
   source site's own spacing/color tokens and class names (including
   generic ones like .btn--ghost-dark) — scoped under .facility-parallax
   via inherited custom properties so it can reuse them without
   redefining this site's own .btn or global heading styles out from
   under every other section on the page.
   ========================================================= */

.facility-parallax {
  --fp-space-2xs: 8px;
  --fp-space-xs: 12px;
  --fp-space-s: 20px;
  --fp-space-m: 32px;
  --fp-space-l: 56px;
  --fp-space-xl: 88px;
  --fp-space-2xl: 140px;
  --fp-gutter: clamp(1.25rem, 4vw, 4rem);
  --fp-radius-s: 6px;
  --fp-radius-m: 14px;
  --fp-ease-out: cubic-bezier(.16,1,.3,1);
  --fp-dur-m: 320ms;
  --fp-color-brand: var(--accent);
  --fp-color-brand-dark: var(--accent-text);
  --fp-color-brand-tint: var(--accent);
  --fp-color-brand-pale: color-mix(in srgb, var(--accent) 16%, var(--bg-soft-2));
  --fp-color-ink: var(--ink);
  --fp-color-ink-soft: var(--ink-2);
  --fp-color-paper-dim: var(--bg-soft-2);
  --fp-color-night: var(--accent-ink);
  --fp-font-display: 'League Spartan', 'Helvetica Neue', system-ui, sans-serif;
  --fp-font-body: 'Libre Franklin', 'Helvetica Neue', system-ui, sans-serif;
  font-family: var(--fp-font-body);
}

.facility-block-overlay h3 {
  font-family: var(--fp-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.facility-parallax {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* Full-bleed again: capping this at var(--container) left large dead
   margins on either side on wide screens once the viewport exceeded the
   container's max-width — the "own block" framing isn't worth that. */
.facility-parallax-bg {
  grid-column: 1; grid-row: 1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: hidden;
}
.facility-parallax-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.78) 100%);
}

.facility-parallax-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--fp-ease-out);
}
.facility-parallax-slide.is-active { opacity: 1; }
.facility-parallax-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ph-note {
  position: absolute;
  top: var(--fp-space-s);
  right: var(--fp-space-s);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.3);
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
}

.facility-parallax-track {
  grid-column: 1; grid-row: 1;
  position: relative;
  z-index: 2;
}
.facility-parallax-panel {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
}

.facility-block-overlay {
  position: relative;
  z-index: 1;
  padding: var(--fp-space-xl) var(--fp-gutter);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* A single shared gap between all three children (title, badge,
     button) — one value applied uniformly by the flex container,
     rather than each child carrying its own margin-bottom. Per-child
     margins are how the previous attempts at this ended up uneven:
     each element's margin is measured from its own box edge, and a
     large heading's box edge sits noticeably below its actual glyph
     ink (unused descender space in the font), which a small badge's
     box barely has — so two "identical" 20px margins didn't read as
     equal. A shared gap can't drift out of sync the way separate
     margins did; the heading's line-height below is tightened to
     shrink that residual whitespace at the source instead of
     compensating for it after the fact. */
  gap: var(--fp-space-s);
}
.facility-block-overlay h3 {
  color: #fff;
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  /* Tightened from the base 1.02 (see the shared .facility-block-overlay
     h3 rule above) specifically here, where the heading is large enough
     for the font's unused descender space to be visually significant.
     Safe for this all-caps display heading — no descenders or accents
     that a tighter box would clip. */
  line-height: 0.88;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
  /* Pulls this one edge in by half the shared gap, so title-to-badge
     ends up at 50% of the original spacing while badge-to-button (which
     only gets the plain container gap, untouched) stays as it was. */
  margin-bottom: calc(-1 * var(--fp-space-s) / 2);
}
.facility-block-overlay .wc-badge {
  background: rgba(255,255,255,0.14);
  color: var(--fp-color-brand-tint);
  backdrop-filter: blur(4px);
  font-size: 0.85rem;
  padding: 7px 14px 7px 11px;
  /* The base .wc-badge rule below carries its own margin-bottom for
     other uses of the badge elsewhere on the site; here spacing comes
     entirely from the shared .facility-block-overlay gap instead, so
     it's zeroed to avoid stacking on top of that gap. */
  margin-bottom: 0;
}
.facility-block-overlay .wc-badge svg { width: 16px; height: 16px; }

.wc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-color-brand-dark);
  background: var(--fp-color-brand-pale);
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  margin-bottom: var(--fp-space-2xs);
}
.wc-badge svg { width: 13px; height: 13px; }

/* Reuses this site's own .btn (layout/transition/hover-lift) for the base,
   since redeclaring .btn itself would repaint every button on the page —
   these two modifiers just carry the source site's exact color/shape/size
   on top of it. */
.btn--ghost-dark {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
  border-radius: var(--fp-radius-s);
  transition: transform 0.2s var(--fp-ease-out), background var(--fp-dur-m) var(--fp-ease-out), color var(--fp-dur-m) var(--fp-ease-out), box-shadow var(--fp-dur-m) var(--fp-ease-out);
}
.btn--ghost-dark:hover {
  background: #fff;
  color: var(--fp-color-night);
  box-shadow: inset 0 0 0 1.5px #fff;
}
.btn--sm {
  min-height: 40px;
  padding: 0.6rem 1.25rem;
  font-size: 0.75rem;
  border-radius: var(--fp-radius-s);
}

/* =========================================================
   Scroll reveal
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Portfolio page — copied from the other SkateFacilities
   site's portfolio.html, recoloured to this site's tokens.
   ========================================================= */

.lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.page-hero {
  padding: calc(var(--space-7) + 40px) 0 var(--space-5);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.page-hero .kicker { margin-bottom: var(--space-2); }
.page-hero h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 16ch;
}
.page-hero .lede { margin-top: var(--space-2); max-width: 48ch; }

/* The portfolio hero pairs its copy with a standard/credential card, so
   the World Championship claim lands as proof right beside the gallery
   the visitor is about to browse — and fills the empty column the
   narrow h1 (max-width:16ch) otherwise leaves on wide screens. */
.page-hero-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.page-hero-copy { min-width: 0; }
@media (min-width: 860px) {
  .page-hero-stack { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-5); }
  .page-hero-copy { flex: 1 1 auto; }
}

.hero-standard {
  flex: none;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 340px;
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-m);
}
@media (min-width: 860px) {
  .hero-standard { align-self: center; width: 340px; max-width: none; }
}
.hero-standard-logo { width: 96px; height: auto; display: block; }
.hero-standard-claim { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.hero-standard-claim strong { color: var(--ink); font-weight: 800; }
.hero-standard .eyebrow-link { font-size: 13px; }
.hero-standard .eyebrow-link svg { width: 16px; height: 16px; flex: none; }

.portfolio-grid-section { padding: var(--space-6) 0; }

.container--wide { max-width: 1600px; }

/* align-items:start so a gallery card (taller, it carries a CTA row under
   the photo) doesn't stretch the plain cards beside it into blank strips. */
.card-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px var(--shadow);
}
.card-media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  color: #fff;
}
.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.card:hover .card-media img { transform: scale(1.05); }
.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
.card-media .card-ph-label {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.3rem;
  color: var(--accent);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 8px 20px rgba(0,0,0,0.7);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover .card-media .card-ph-label { opacity: 1; transform: translateY(0); }
.card-ph-note {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.3);
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
}

.tone-a { background: linear-gradient(140deg, var(--ink), var(--accent-text)); }
.tone-b { background: linear-gradient(140deg, var(--ink), var(--ink-2)); }

/* Every card carries the same footer CTA link, whether it has one photo
   or several — so no card's media area routes anywhere (it opens the
   lightbox instead, see below), keeping every card's layout and quote
   click target identical. */
.card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  border-top: 1px solid var(--line);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.card-cta svg { width: 16px; height: 16px; flex: none; transition: transform 0.2s var(--ease); }
.card-cta:hover { color: var(--accent-text); background: var(--bg-soft); }
.card-cta:hover svg { transform: translateX(3px); }

/* =========================================================
   Card gallery — cards with more than one photo. The arrows/dots
   need their own clicks, so the media area cycles photos instead
   of linking anywhere; .card-cta below carries the click-through.
   ========================================================= */
.card-gallery .card-media img {
  opacity: 0;
  transition: opacity 600ms var(--ease), transform 500ms var(--ease);
  pointer-events: none;
}
.card-gallery .card-media img.is-active {
  opacity: 1;
  pointer-events: auto;
}

.card-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.25s var(--ease), background-color 0.2s var(--ease);
}
.card-gallery-arrow svg { width: 18px; height: 18px; }
.card-gallery-arrow-prev { left: var(--space-2); }
.card-gallery-arrow-next { right: var(--space-2); }
.card-gallery:hover .card-gallery-arrow,
.card-gallery-arrow:focus-visible { opacity: 1; }
.card-gallery-arrow:hover { background: rgba(0, 0, 0, 0.7); }

.card-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: var(--space-2);
  z-index: 2;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}
.card-gallery-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.card-gallery-dots button.is-active {
  background: var(--accent);
  transform: scale(1.3);
}

.portfolio-cta { padding: 0 0 var(--space-4); }
.cta-banner {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-m);
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.cta-banner h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.01em; }
.cta-banner p { margin-top: 6px; color: rgba(26, 20, 16, 0.7); max-width: 52ch; }
.cta-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-banner .btn { flex: none; background: var(--ink); color: #fff; }
.cta-banner .btn:hover { background: var(--ink-2); }
.cta-banner .btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(26, 20, 16, 0.35);
  color: var(--accent-ink);
}
.cta-banner .btn-ghost:hover { background: rgba(26, 20, 16, 0.08); border-color: var(--accent-ink); }
.cta-banner .btn-ghost svg { width: 18px; height: 18px; }

.back-home { padding: var(--space-5) 0; text-align: center; }
.back-home .btn-ghost svg { width: 18px; height: 18px; }

/* =========================================================
   Lightbox — click a facility photo (discipline card or portfolio
   card) to view it full-size alongside a project-details panel.
   Markup is injected by main.js; the card's media area itself is
   the click/keyboard target, so it picks up the site's default
   :focus-visible ring for free. The details panel's copy comes from
   each card's data-lb-* attributes in the HTML — placeholder spec
   sheet figures until real per-facility numbers are ready.
   ========================================================= */
.discipline-card-media,
.card-media { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly (not over 0.25s) and pointer-events is
     off while closed — otherwise the faded-out overlay still covers the
     viewport and eats the next click for the length of the transition.
     Same idiom as .site-header above. */
  pointer-events: none;
  transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s var(--ease), visibility 0s linear 0s;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 11, 7, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(96vw, 1280px);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-l);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.lightbox.is-open .lightbox-panel { opacity: 1; transform: scale(1); }

.lightbox-media { flex: 0 0 auto; display: flex; flex-direction: column; }
.lightbox-stage {
  position: relative;
  z-index: 1;
  margin: 0;
  height: 46vh;
  max-height: 460px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-media-foot {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.lightbox-caption { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.lightbox-caption[hidden] { display: none; }

.lightbox-dots { display: flex; flex: none; gap: 7px; }
.lightbox-dots[hidden] { display: none; }
.lightbox-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: var(--line);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.lightbox-dots button.is-active { background: var(--accent); transform: scale(1.4); }

.lightbox-details {
  flex: 0 0 auto;
  padding: var(--space-3);
  background: var(--bg-soft);
}
.lightbox-details-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.lightbox-details-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  color: var(--ink);
}
.lightbox-details-tag { margin: 0 0 var(--space-3); color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.lightbox-details-tag[hidden] { display: none; }
.lightbox-details-list { margin: 0; }
.lightbox-details-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.lightbox-details-row:first-child { padding-top: 0; }
.lightbox-details-row:last-child { border-bottom: none; }
.lightbox-details-row dt {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lightbox-details-row dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.lightbox-details-bar { height: 5px; background: var(--accent); border-radius: 999px; margin-top: var(--space-3); }

.lightbox-arrow[hidden] { display: none; }

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.2s var(--ease);
}
.lightbox-close:hover,
.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.22); }

.lightbox-close {
  top: var(--space-2);
  right: var(--space-2);
  width: 40px;
  height: 40px;
}
.lightbox-close svg { width: 20px; height: 20px; }

.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
}
.lightbox-arrow svg { width: 22px; height: 22px; }
.lightbox-arrow-prev { left: var(--space-2); }
.lightbox-arrow-next { right: var(--space-2); }

@media (min-width: 700px) {
  .lightbox-close { top: var(--space-3); right: var(--space-3); width: 46px; height: 46px; }
  .lightbox-arrow { width: 52px; height: 52px; }
  .lightbox-arrow-prev { left: var(--space-3); }
  .lightbox-arrow-next { right: var(--space-3); }
}

@media (min-width: 860px) {
  .lightbox-panel { flex-direction: row; height: min(86vh, 760px); max-height: 86vh; overflow: hidden; }
  .lightbox-media { flex: 1 1 auto; min-width: 0; height: 100%; }
  .lightbox-stage { flex: 1 1 auto; height: auto; max-height: none; min-height: 0; }
  .lightbox-media-foot { border-bottom: none; }
  .lightbox-details {
    flex: 0 0 340px;
    width: 340px;
    overflow-y: auto;
    border-left: 1px solid var(--line);
  }
}

/* =========================================================
   Floating WhatsApp chat button — permanent, bottom-right
   ========================================================= */
.wa-fab {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .4), 0 2px 6px rgba(0, 0, 0, .2);
  transition: transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.wa-fab:hover,
.wa-fab:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(37, 211, 102, .5), 0 3px 8px rgba(0, 0, 0, .25);
}

.wa-fab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.wa-fab-icon {
  width: 34px;
  height: 34px;
}

@media (max-width: 600px) {
  .wa-fab { width: 54px; height: 54px; }
  .wa-fab-icon { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover,
  .wa-fab:focus-visible { transform: none; }
}