/* ==========================================================================
   GROUNDUP SPORTS — pages.css
   Section-level styles, page by page. Everything here is built from the same
   three moves: a rounded card, a soft mint fill, and a pill.
   ========================================================================== */

/* ==========================================================================
   1. HOME — HERO
   A rounded sky panel. Type sits centred at the top, the ground photo fades
   in beneath it, and small data cards float in the corners like scoreboard
   clippings pinned to the view.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  margin: 0 clamp(10px, 2vw, 26px);
  background: linear-gradient(180deg, #cfe6f5 0%, #dfeef2 42%, #d3ead8 74%, #c3e2cb 100%);
}

.hero__media { position: absolute; inset: 0; z-index: -1; }
/* Still and clip are stacked: the poster sits underneath, so if the video file
   is missing (or JS strips it) the drawing shows through. */
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
/* The clip stays invisible until it actually plays, so a missing or blocked
   file never paints the browser's broken-media glyph over the still. */
.hero__media video { opacity: 0; transition: opacity .5s ease; }
.hero__media video.is-ready { opacity: 1; }

/* Daylight wash — heaviest at the top where the headline sits, clearing by
   the time it reaches the ground so the pitch keeps its colour. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.52) 32%,
                    rgba(255,255,255,.1) 62%, rgba(255,255,255,0) 82%),
    linear-gradient(90deg, rgba(207,230,245,.5), rgba(207,230,245,0) 30%, rgba(207,230,245,0) 70%, rgba(207,230,245,.5));
}

.hero__inner {
  position: relative;
  z-index: 2;
  min-height: clamp(540px, 84vh, 800px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(2.2rem, 5vh, 3.6rem) clamp(2.4rem, 5vh, 3.4rem);
}

.hero h1 { max-width: 22ch; color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--teal); }

.hero__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.1rem;
}
.hero__meta p { color: var(--ink-2); max-width: 46ch; font-size: 1rem; margin: 0; }

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.5rem; }
.hero .btn--ghost { background: rgba(255,255,255,.72); }

/* Play control — white disc with a green triangle, label underneath */
.play {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  text-decoration: none;
}
.play__ring {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  position: relative;
  transition: background .2s ease, transform .2s ease;
}
.play__ring::after {
  content: "";
  width: 0; height: 0;
  margin-left: 3px;
  border-left: 11px solid var(--teal);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transition: border-left-color .2s ease;
}
.play:hover .play__ring { background: var(--teal); transform: scale(1.05); }
.play:hover .play__ring::after { border-left-color: #fff; }

/* Faint pulse ring */
.play__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(20,107,96,.5);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.play__txt {
  font-family: var(--body);
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.25;
}
.play__txt small {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-3);
}

/* --- floating hero cards ------------------------------------------------ */
.hero__float {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: 250px;
  text-align: left;
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  background: var(--paper);
  box-shadow: var(--shadow);
  font-size: .84rem;
  line-height: 1.4;
}
.hero__float b {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__float small { display: block; color: var(--ink-3); font-size: .78rem; }
.hero__float .big {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: inherit;
  margin: .3rem 0 .2rem;
  font-feature-settings: "tnum" 1;
}
.hero__float--dark { background: var(--forest); color: #b7cdbe; }
.hero__float--dark b, .hero__float--dark .big { color: #fff; }
.hero__float--dark small { color: #8fa998; }
.hero__float--mint { background: var(--paper-3); }

.hero__float--a { left: clamp(12px, 2.5vw, 40px); top: 42%; }
.hero__float--b { left: clamp(12px, 2.5vw, 40px); bottom: 20%; }
.hero__float--c { right: clamp(12px, 2.5vw, 40px); top: 44%; }
.hero__float--d { right: clamp(12px, 2.5vw, 40px); bottom: 20%; }

@media (max-width: 1080px) { .hero__float { display: none; } }

/* Chip row under the hero CTA, e.g. Est. 2009 · 380 players · 3 sports */
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.6rem;
}

/* Sound toggle for the background clip */
.hero__sound {
  position: absolute;
  right: clamp(14px, 3vw, 30px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink-2);
  background: rgba(255,255,255,.8);
  font-size: .76rem;
  border-radius: var(--r-pill);
  padding: .42rem .85rem;
  box-shadow: var(--shadow-card);
}
.hero__sound:hover { background: #fff; color: var(--ink); }
.hero__sound svg { width: 14px; height: 14px; fill: currentColor; }

/* Scoreboard card, straddling the bottom edge of the hero */
.scorebar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: calc(clamp(1.4rem, 3vw, 2.6rem) * -1);
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.scorebar div { background: var(--paper); padding: 1.15rem 1.2rem; text-align: center; }
.scorebar b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.scorebar span { font-size: .78rem; color: var(--ink-3); }

@media (max-width: 720px) {
  .scorebar { grid-template-columns: 1fr 1fr; }
  .hero__sound { display: none; }
}

/* ==========================================================================
   2. SPORT BANDS
   ========================================================================== */
.band { position: relative; z-index: 1; }

.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(1.4rem, 3.2vw, 3.2rem);
  align-items: center;
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem);
}
.band--rev .band__art { order: -1; }

@media (max-width: 900px) {
  .band__grid, .band--rev .band__grid { grid-template-columns: 1fr; }
  .band--rev .band__art { order: 0; }
}

.band__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .8rem;
}
.band__head .numeral { flex: none; color: var(--accent); opacity: .28; }

.band__copy { max-width: 52ch; margin-top: 1rem; }

/* Facts — four small mint tiles */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin-top: 1.6rem;
}
@media (max-width: 560px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts div {
  background: var(--paper-2);
  border-radius: var(--r-sm);
  padding: .8rem .9rem;
}
.facts b {
  display: block;
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.facts span { font-size: .76rem; color: var(--ink-3); }

.band__actions { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; align-items: center; margin-top: 1.7rem; }

/* Sport art: a rounded tinted plate with a corner chip */
.band__art {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.band__art svg,
.band__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__stamp {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 500;
  padding: .38rem .9rem;
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   3. FIXTURES
   ========================================================================== */
.fixtures {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .45rem;
  margin-top: 1.4rem;
}
.fixtures caption { text-align: left; }

.fixtures th {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 0 .8rem .3rem 1rem;
  white-space: nowrap;
}
.fixtures td {
  padding: .85rem 1rem;
  background: var(--paper);
  border-block: 1px solid var(--line);
  vertical-align: middle;
  transition: background .18s ease;
}
.fixtures td:first-child { border-left: 1px solid var(--line); border-radius: var(--r-md) 0 0 var(--r-md); }
.fixtures td:last-child  { border-right: 1px solid var(--line); border-radius: 0 var(--r-md) var(--r-md) 0; }
.fixtures tbody tr:hover td { background: var(--paper-2); }

.fixtures .d {
  font-family: var(--display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}
.fixtures .o { font-weight: 600; color: var(--ink); }
.fixtures .v { color: var(--ink-3); font-size: .9rem; }

@media (max-width: 700px) {
  .fixtures thead { display: none; }
  .fixtures { border-spacing: 0 .6rem; }
  .fixtures tr { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; }
  .fixtures td { border: 0; padding: .1rem 1rem; background: var(--paper-2); border-radius: 0; }
  .fixtures td:first-child { border-radius: var(--r-md) var(--r-md) 0 0; padding-top: .9rem; }
  .fixtures td:last-child { border-radius: 0 0 var(--r-md) var(--r-md); padding-bottom: .9rem; }
  .fixtures .t { grid-column: 1 / -1; }
}

/* ==========================================================================
   4. COACHES
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.filters button {
  font-size: .88rem;
  font-weight: 500;
  padding: .5rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--paper);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.filters button:hover { color: var(--ink); border-color: var(--ink); }
.filters button[aria-pressed="true"] {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.filters .count { color: var(--ink-3); font-size: .86rem; margin-left: auto; align-self: center; }

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}
.coach {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.coach:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.coach__pic {
  aspect-ratio: 1 / 1;
  background: var(--paper-3);
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.coach__pic svg,
.coach__pic img { width: 100%; height: 100%; object-fit: cover; }
.coach__no {
  position: absolute;
  top: .6rem; right: .6rem;
  z-index: 2;
  min-width: 34px;
  text-align: center;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  border-radius: var(--r-pill);
  padding: .35rem .5rem;
}

.coach h3 { font-size: 1.22rem; margin-bottom: .25rem; }
.coach__role {
  font-size: .8rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: .8rem;
}
.coach__quote {
  font-size: .94rem;
  color: var(--ink-2);
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: .8rem .95rem;
  margin: 0 0 1rem;
}
.coach__facts {
  list-style: none;
  margin: auto 0 0;
  padding: .9rem 0 0;
  border-top: var(--hair);
  display: grid;
  gap: .3rem;
  font-size: .86rem;
  color: var(--ink-3);
}
.coach__facts b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   5. TEAMS
   ========================================================================== */
.squad { padding-block: clamp(1.8rem, 3.6vw, 3rem); }

.squad__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.squad__head h2 { display: flex; align-items: center; gap: .9rem; }
.squad__head .numeral { font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--accent); opacity: .3; }

.teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 1rem;
}
.team {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.team:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.team__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.team h3 { font-size: 1.3rem; }
.team__age { font-size: .82rem; color: var(--ink-3); margin-top: .2rem; }

.team__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .9rem; }
.team__rows li {
  display: flex;
  gap: .8rem;
  justify-content: space-between;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  padding: .42rem .7rem;
}
.team__rows dt, .team__rows .k { font-size: .82rem; color: var(--ink-3); flex: none; }
.team__rows .v { text-align: right; color: var(--ink); font-weight: 500; }

.team__foot { margin-top: auto; padding-top: .9rem; border-top: var(--hair); display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.spots { font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.spots::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.spots--open  { color: var(--cricket); }
.spots--few   { color: var(--football); }
.spots--full  { color: var(--ink-3); }

/* ==========================================================================
   6. ABOUT
   ========================================================================== */
/* Timeline: a mint spine with years hanging off it */
.timeline { list-style: none; margin: 1.8rem 0 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 4px; top: .6rem; bottom: .6rem;
  width: 2px;
  border-radius: 2px;
  background: var(--mint-deep);
}
@media (min-width: 780px) { .timeline::before { left: 132px; } }

.timeline li { position: relative; padding: 0 0 1.9rem 1.7rem; }
@media (min-width: 780px) { .timeline li { padding-left: 168px; } }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: .6rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--accent);
}
@media (min-width: 780px) { .timeline li::before { left: 128px; } }

.timeline .yr {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--accent);
  display: block;
  margin-bottom: .2rem;
  font-feature-settings: "tnum" 1;
}
@media (min-width: 780px) {
  .timeline .yr { position: absolute; left: 0; top: -.1rem; width: 106px; text-align: right; margin: 0; }
}
.timeline h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.timeline p { font-size: .95rem; max-width: 62ch; }

/* Values: mint cards, numbered */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 1rem; }
.values > div {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 1.4rem;
}
.values .numeral { font-size: 2.4rem; display: block; margin-bottom: .5rem; color: var(--accent); opacity: .35; }
.values h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.values p { font-size: .94rem; }

/* Honours board */
.honours { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.honours li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.1rem;
  padding: .75rem 1.1rem;
  background: var(--paper-2);
  border-radius: var(--r-md);
}
.honours .yr {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
  width: 52px;
  flex: none;
  font-feature-settings: "tnum" 1;
}
.honours .ttl { font-weight: 600; color: var(--ink); flex: 1 1 240px; }

/* Facility list */
.facilities { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .6rem; }
.facilities li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; }
.facilities li::before {
  content: "✓";
  width: 20px; height: 20px;
  flex: none;
  margin-top: .22rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
}

/* Pull quote — forest card */
.pullquote {
  margin: 0;
  background: var(--forest);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.pullquote::before {
  content: "";
  position: absolute;
  right: -10%; top: -60%;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(126,198,148,.28), transparent 70%);
}
.pullquote p {
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.026em;
  text-transform: uppercase;
  color: #fff;
  max-width: 22ch;
  margin: 0;
}
.pullquote footer {
  position: relative;
  font-size: .84rem;
  color: #8fa998;
  margin-top: 1.1rem;
}

/* ==========================================================================
   7. FORMS — contact + registration
   ========================================================================== */
.field { display: block; margin-bottom: 1.05rem; }

/* :not(.err) matters — the error message is also a direct span child, and it
   must stay hidden until the field actually fails. */
.field > span:not(.err),
.legend {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .4rem;
}
.field .req { color: var(--tkd); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .74rem 1rem;
  font-family: var(--body);
  font-size: .98rem;
  color: var(--ink);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}
.field textarea { resize: vertical; min-height: 128px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,107,96,.12);
}
.field input::placeholder, .field textarea::placeholder { color: #9fb3a6; }

/* Validation */
.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea { border-color: var(--tkd); background: #fdf4f3; }

.err {
  display: none;
  font-size: .82rem;
  color: var(--tkd);
  margin-top: .35rem;
}
.field.is-bad .err { display: block; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 620px) { .row2 { grid-template-columns: 1fr; } }

fieldset { border: 0; margin: 0 0 1.2rem; padding: 0; }

/* Radio / checkbox cards */
.picks { display: grid; gap: .6rem; }
.picks--2 { grid-template-columns: 1fr 1fr; }
.picks--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .picks--2, .picks--3 { grid-template-columns: 1fr; } }

.pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pick:hover { border-color: var(--line-2); background: var(--paper-2); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }

.pick__box {
  width: 18px; height: 18px;
  flex: none;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .18s ease;
}
.pick__box::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform .16s ease;
}
.pick input:checked ~ .pick__box { border-color: var(--accent); }
.pick input:checked ~ .pick__box::after { transform: scale(1); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--paper-3); }
.pick:has(input[type=checkbox]) .pick__box { border-radius: 6px; }
.pick:has(input[type=checkbox]) .pick__box::after { border-radius: 2px; }
.pick input:focus-visible ~ .pick__box { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.pick.is-bad { border-color: var(--tkd); }

.pick__txt { display: block; }
.pick__txt b { display: block; font-family: var(--display); font-size: 1rem; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.pick__txt small { color: var(--ink-3); font-size: .84rem; }

/* --- multi-step registration ------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: 2rem;
  padding: 0;
}
.steps li {
  list-style: none;
  padding: .7rem .9rem;
  background: var(--paper-2);
  border-radius: var(--r-md);
  border-top: 3px solid transparent;
  color: var(--ink-3);
  transition: background .2s ease, color .2s ease;
}
.steps li[data-state="on"]   { background: var(--paper-3); border-top-color: var(--accent); color: var(--ink); }
.steps li[data-state="done"] { background: var(--paper-3); border-top-color: var(--mint-deep); color: var(--ink-2); }
.steps b {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  opacity: .75;
}
.steps span { font-size: .95rem; font-weight: 600; color: inherit; }
@media (max-width: 700px) {
  .steps span { display: none; }
  .steps li { padding: .6rem .7rem; }
}

.step[hidden] { display: none; }
.step h3 { margin-bottom: 1.3rem; }

.form__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.7rem;
  padding-top: 1.3rem;
  border-top: var(--hair);
}

/* Fee summary — sticky mint card */
.docket {
  background: var(--paper-3);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  position: sticky;
  top: 92px;
}
.docket h4 { margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--mint-deep); letter-spacing: .01em; }
.docket dl { margin: 0; display: grid; gap: .55rem; }
.docket .line { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; }
.docket .line dt { color: var(--ink-3); }
.docket .line dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.docket .total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--mint-deep);
}
.docket .total dt { font-size: .84rem; font-weight: 600; color: var(--ink); }
.docket .total dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.docket__note { font-size: .84rem; color: var(--ink-3); margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--mint-deep); }

/* Success + form messages */
.notice {
  background: var(--paper-3);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.5rem;
  font-size: .95rem;
}
.notice h3 { font-size: 1.1rem; margin-bottom: .35rem; }

/* ==========================================================================
   8. CONTACT
   ========================================================================== */
.hours { width: 100%; border-collapse: separate; border-spacing: 0 .35rem; margin-top: 1.1rem; }
.hours th, .hours td { text-align: left; padding: .6rem .9rem; background: var(--paper-2); font-size: .93rem; }
.hours th {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
  width: 46%;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.hours td { text-align: right; color: var(--ink); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-feature-settings: "tnum" 1; }

.contact-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.contact-lines li {
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: .9rem 1.1rem;
}
.contact-lines .k {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .25rem;
}
.contact-lines .v { font-size: 1.02rem; color: var(--ink); }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { color: var(--accent); text-decoration: underline; }

/* Map plate — a drawn schematic, honest about being a placeholder */
.mapplate {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.mapplate svg,
.mapplate img { width: 100%; height: 100%; object-fit: cover; }
.mapplate__pin {
  position: absolute;
  left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 500;
  padding: .45rem 1rem;
  box-shadow: var(--shadow-card);
}

/* FAQ — native disclosure, restyled as stacked cards */
.faq { margin-top: 1.6rem; display: grid; gap: .6rem; }
.faq details {
  background: var(--paper-2);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background .2s ease;
}
.faq details[open] { background: var(--paper-3); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.2rem;
  position: relative;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 1.3rem; top: 50%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.faq summary::before { width: 13px; height: 2px; margin-top: -1px; }
.faq summary::after  { width: 2px; height: 13px; margin-top: -6.5px; right: 1.72rem; }
.faq details[open] summary { color: var(--accent); }
.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq details[open] summary::before { background: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq .ans { padding: 0 1.4rem 1.2rem 1.2rem; font-size: .96rem; max-width: 76ch; }

/* ==========================================================================
   9. SHARED BLOCKS
   ========================================================================== */
/* Page masthead for interior pages — a rounded mint panel under the nav */
.pagehead {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #e2f0f7 0%, #e8f4ea 60%, #dcefe1 100%);
  border-radius: var(--r-xl);
  margin: 0 clamp(10px, 2vw, 26px);
  overflow: hidden;
}
.pagehead__inner {
  padding-block: clamp(2.2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.2rem, 3.4vw, 3rem);
  align-items: end;
}
@media (max-width: 840px) { .pagehead__inner { grid-template-columns: 1fr; } }
.pagehead h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); }
.pagehead .lede { max-width: 46ch; }

.crumbs {
  font-size: .82rem;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }

/* Section head with a heading left, supporting copy + link right */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.8rem;
}
.sec-head p { max-width: 44ch; margin-top: .8rem; }

/* Marquee CTA — forest card with a horizon glow */
.cta-band {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--forest);
  border-radius: var(--r-xl);
  margin: 0 clamp(10px, 2vw, 26px) clamp(1.6rem, 4vw, 2.6rem);
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -70%;
  width: min(140%, 1200px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(126,198,148,.32), transparent 72%);
}
.cta-band__inner {
  position: relative;
  padding-block: clamp(2.4rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.8rem;
  align-items: center;
}
@media (max-width: 800px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band h2 { color: #fff; max-width: 16ch; }
.cta-band h2 em { font-style: normal; color: #7fd3a8; }
.cta-band p { color: #9dbaa9; max-width: 42ch; margin-top: .9rem; }
.cta-band .btn { background: #7fd3a8; border-color: #7fd3a8; color: var(--forest); font-weight: 600; }
.cta-band .btn:hover { background: #fff; border-color: #fff; color: var(--forest); }

/* Stat strip — four white cards */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem;
}
.stats div {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.3rem;
}
.stats b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.stats span { font-size: .82rem; color: var(--ink-3); }

/* Testimonial cards */
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.voice {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.voice p { font-size: 1rem; color: var(--ink-2); }
.voice blockquote { margin: 0; }
.voice footer { margin-top: auto; padding-top: 1.1rem; }
.voice cite {
  font-style: normal;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
}
.voice small { color: var(--ink-3); font-size: .84rem; }
.voice .mark {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: .8;
  color: var(--accent);
  opacity: .3;
  margin-bottom: .4rem;
}

/* Video / gallery plate used on home + about */
.plate {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.plate img, .plate video { width: 100%; height: 100%; object-fit: cover; }
.plate svg { width: 100%; height: 100%; }
.plate__over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.plate__over .play__txt { display: none; }
.plate__cap {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 3;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: .78rem;
  padding: .38rem .9rem;
}
.plate__len {
  position: absolute;
  right: 1rem; top: 1rem;
  z-index: 3;
  font-size: .78rem;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  border-radius: var(--r-pill);
  padding: .28rem .7rem;
  font-feature-settings: "tnum" 1;
}