/* ============================================================
   GOL FUTSAL — design tokens
   Palette pulled from the club crest: deep magenta-purple,
   ink black, chalk white — plus a boot-orange accent lifted
   from the action shot, and a court-line motif used as the
   site's recurring signature (the hand-drawn circle a coach
   draws round a stat on the whiteboard).
   ============================================================ */
:root{
  --ink:        #14100f;
  --plum:       #35003a;
  --purple:     #8e0095;
  --purple-2:   #b400bd;
  --paper:      #faf7f8;
  --tint:       #f3e3f5;
  --orange:     #ff5a36;
  --line:       rgba(20,16,15,0.12);

  --display: "Anton", "Arial Narrow", sans-serif;
  --body:    "Work Sans", "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:0.01em;
  line-height:1.02;
  margin:0 0 0.4em;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.6rem, 6.5vw, 5.2rem); }
h2{ font-size:clamp(1.9rem, 4.5vw, 3.1rem); }
h3{ font-size:clamp(1.25rem, 2.6vw, 1.7rem); }
p{ margin:0 0 1em; }
.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--purple);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:.8em;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--orange);
  display:inline-block;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- header / nav ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:3px solid var(--purple);
}
.nav{
  max-width:var(--max); margin:0 auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{ display:flex; align-items:center; gap:.7rem; color:#fff; text-decoration:none; }
.brand img{ height:44px; width:44px; object-fit:contain; }
.brand span{
  font-family:var(--display); text-transform:uppercase;
  font-size:1.15rem; letter-spacing:.03em; color:#fff;
}
.nav-links{
  display:flex; gap:1.9rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:#fff; text-decoration:none; font-size:0.92rem;
  font-weight:600; letter-spacing:.02em;
  padding:.4em 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:#fff;
  transition:width .2s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-cta{
  background:#fff; color:#14100f !important;
  padding:.55em 1.2em !important; border-radius:999px;
  font-weight:700 !important;
}
.nav-cta::after{ display:none; }
.nav-toggle{
  display:none; background:none; border:0; color:#fff;
  width:40px; height:40px; cursor:pointer;
}
.nav-toggle svg{ width:100%; height:100%; }

@media (max-width: 860px){
  .nav-links{
    position:fixed; inset:72px 0 0 0; height:calc(100vh - 72px);
    background:var(--ink); flex-direction:column; gap:0;
    padding:1rem var(--pad);
    transform:translateX(100%); visibility:hidden;
    /* visibility flips only once the panel has slid away, so the slide-out is
       still visible, but a closed menu is never reachable by keyboard or AT. */
    transition:transform .28s ease, visibility 0s linear .28s;
  }
  .nav-links.open{
    transform:translateX(0); visibility:visible;
    transition:transform .28s ease, visibility 0s linear 0s;
  }
  .nav-links a{ display:block; padding:1em 0; border-bottom:1px solid rgba(255,255,255,0.12); }
  .nav-toggle{ display:block; }
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; font-size:0.95rem;
  padding:.85em 1.6em; border-radius:999px;
  text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:#fff; color:var(--ink); border-color:var(--ink); }
.btn-primary:hover{ background:var(--ink); color:#fff; }
.btn-outline{ background:transparent; border-color:#fff; color:#fff; }
.btn-outline:hover{ background:#fff; color:var(--ink); }
.btn-outline-dark{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline-dark:hover{ background:var(--ink); color:#fff; }
.btn-purple{ background:var(--purple); color:#fff; }
.btn-purple:hover{ background:var(--purple-2); }

/* ---------------- hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 160% at 85% -10%, var(--purple-2) 0%, var(--plum) 45%, var(--ink) 100%);
  color:#fff; padding:clamp(60px,10vw,110px) 0 clamp(50px,8vw,90px);
}
.hero .arc{
  position:absolute; border:2px solid rgba(255,255,255,0.18);
  border-radius:50%;
}
.hero .arc.a1{ width:900px; height:900px; right:-320px; top:-420px; }
.hero .arc.a2{ width:560px; height:560px; right:-180px; top:-120px; border-color:rgba(255,90,54,0.25); }
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(24px,5vw,60px);
  align-items:center;
}
.hero-copy p.lead{ font-size:1.15rem; color:rgba(255,255,255,0.85); max-width:46ch; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.hero-photo{
  position:relative;
  aspect-ratio:490/512; border-radius:18px; overflow:hidden;
  border:3px solid rgba(255,255,255,0.25);
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-photo .tag{
  position:absolute; left:14px; bottom:14px;
  background:var(--orange); color:var(--ink);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  padding:.4em .8em; border-radius:999px; text-transform:uppercase;
}
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ max-width:340px; margin:0 auto; }
}

/* ---------------- stat / tactics-board section ---------------- */
.stats{ padding:clamp(60px,8vw,100px) 0; background:var(--paper); }
/* linked-to sections must clear the 72px sticky header */
#stats{ scroll-margin-top:88px; }
.stats-head{ max-width:60ch; margin-bottom:2.4rem; }
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
.stat-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.4rem 1.4rem;
}
.stat-num{
  font-family:var(--display); font-size:2.6rem; color:var(--purple);
  position:relative; display:inline-block; line-height:1;
}
.stat-circle{
  position:relative; display:inline-block;
}
.stat-circle svg{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-4deg);
  width:150%; height:220%; overflow:visible; pointer-events:none;
}
.stat-circle svg path{
  fill:none; stroke:var(--orange); stroke-width:3;
  stroke-linecap:round;
}
.stat-card p{ margin-top:1rem; font-size:0.94rem; color:#3c3436; }
@media (max-width:960px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stat-grid{ grid-template-columns:1fr; } }

/* court-line divider */
.court-divider{
  height:64px; position:relative; background:var(--ink);
}
.court-divider svg{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------------- generic section ---------------- */
.section{ padding:clamp(56px,8vw,100px) 0; }
.section-alt{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-dark{ background:var(--ink); color:#fff; }
.section-dark .eyebrow{ color:var(--orange); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem;
}

/* age group chips */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0; }
.chip{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
  padding:.5em 1em; border-radius:999px; background:var(--tint); color:var(--purple);
  border:1px solid rgba(142,0,149,0.25);
}

/* ---------------- testimonials ---------------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:960px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem; display:flex; flex-direction:column; gap:1rem;
}
.stars{ color:var(--orange); letter-spacing:.15em; font-size:1rem; }
.testi-quote{ font-size:1rem; color:#2c2727; flex:1; }
.testi-name{ font-weight:700; font-family:var(--display); text-transform:uppercase; letter-spacing:.02em; font-size:1rem; }
.testi-meta{ font-family:var(--mono); font-size:.78rem; color:#7a7274; }

/* ---------------- footer ---------------- */
.site-footer{ background:var(--ink); color:#fff; padding:56px 0 28px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,0.14);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-size:1rem; color:#fff; font-weight:700; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:.6em; }
.footer-grid a{ text-decoration:none; color:rgba(255,255,255,0.82); }
.footer-grid a:hover{ color:var(--orange); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1.4rem; font-size:.82rem; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:.6rem;
}
.social-row{ display:flex; gap:.8rem; margin-top:1.1rem; }
.social-row a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.25); color:#fff;
  transition:border-color .2s ease, color .2s ease;
}
.social-row a:hover{ border-color:var(--orange); color:var(--orange); }
.social-row svg{ width:18px; height:18px; }

/* ---------------- forms ---------------- */
form .field{ margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.4rem; }
form label{ font-weight:600; font-size:.9rem; }
form input, form select, form textarea{
  font-family:var(--body); font-size:1rem; padding:.75em .9em;
  border:1.5px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
form input:focus, form select:focus, form textarea:focus{ border-color:var(--purple); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
fieldset{ border:1.5px solid var(--line); border-radius:10px; padding:1rem 1.2rem; margin:0 0 1.2rem; }
legend{ font-weight:700; padding:0 .4em; font-size:.9rem; }
.radio-group, .check-group{ display:flex; flex-wrap:wrap; gap:1rem; }
.radio-group label, .check-group label{ font-weight:500; display:flex; align-items:center; gap:.4em; }
.form-success{
  display:none; background:var(--tint); border:1.5px solid var(--purple);
  border-radius:var(--radius); padding:1.6rem; margin-top:1.4rem;
}
.form-success.show{ display:block; }
.form-error{
  display:none; background:#fdecea; border:1.5px solid #b3261e;
  border-radius:var(--radius); padding:1.4rem 1.6rem; margin-bottom:1.4rem;
  color:#5c1511;
}
.form-error.show{ display:block; }
.form-error h3{ color:#8c1d18; margin-bottom:.5rem; font-size:1.15rem; }
.form-error p{ margin:0; }
.form-error a{ color:#8c1d18; }
.form-success:focus-visible, .form-error:focus-visible{ outline:3px solid var(--purple); outline-offset:3px; }
.note{ font-size:.85rem; color:#6c6467; }
.field .note{ display:block; margin-top:.35rem; }

/* ---------------- schedule table ---------------- */
.schedule-table{ width:100%; border-collapse:collapse; background:#fff; }
.schedule-table th, .schedule-table td{
  text-align:left; padding:.9em 1em; border-bottom:1px solid var(--line); font-size:.94rem;
}
.schedule-table thead th{
  background:var(--ink); color:#fff; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.table-scroll table{ min-width:640px; }
.tourn-list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.tourn-item{
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.4rem;
  flex-wrap:wrap;
}
.tourn-date{ font-family:var(--mono); color:var(--purple); font-weight:700; min-width:90px; }

/* ---------------- kit page ---------------- */
.kit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:960px){ .kit-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .kit-grid{ grid-template-columns:1fr; } }
.kit-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.kit-visual{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--plum), var(--ink));
}
.kit-visual svg{ width:56%; height:56%; }
.kit-body{ padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.kit-price{ font-family:var(--mono); color:var(--purple); font-weight:700; }
.kit-body select{ margin-top:.4rem; }

/* ---------------- photo gallery (bento) ---------------- */
.bento{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, 220px);
  gap:1rem;
}
.bento a, .bento .bento-item{ display:block; }
.bento-item{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--tint);
}
.bento-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.bento-item:hover img{ transform:scale(1.05); }
.bento-item.big{ grid-column:span 2; grid-row:span 2; }
.bento-cap{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1.1rem .8rem;
  background:linear-gradient(0deg, rgba(20,16,15,0.75), transparent);
  color:#fff; font-family:var(--mono); font-size:.76rem; letter-spacing:.03em;
}
@media (max-width:860px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,170px); }
  .bento-item.big{ grid-column:span 2; grid-row:span 1; height:260px; }
}

/* ---------------- full-width caption banner ---------------- */
.photo-banner{
  position:relative; width:100%; overflow:hidden;
  aspect-ratio:2/1; max-height:520px;
}
.photo-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,16,15,0.85) 0%, rgba(20,16,15,0.15) 45%, transparent 70%);
}
.photo-banner .banner-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(20px,4vw,40px) var(--pad);
}
.photo-banner .banner-cap .eyebrow{ color:var(--orange); margin-bottom:.3em; }
.photo-banner .banner-cap h3{
  color:#fff; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2rem); margin:0;
}
@media (max-width:640px){ .photo-banner{ aspect-ratio:4/5; max-height:440px; } }

/* ---------------- split hero with photo (About/Register/Schedule/Kit) ---------------- */
.hero-split{
  position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(120% 160% at 85% -10%, var(--purple-2) 0%, var(--plum) 45%, var(--ink) 100%);
  padding:clamp(50px,8vw,90px) 0;
}
.hero-split .arc{ position:absolute; border:2px solid rgba(255,255,255,0.18); border-radius:50%; }
.hero-split .arc.a1{ width:900px; height:900px; right:-320px; top:-420px; }
.hero-split-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:clamp(24px,5vw,56px); align-items:center;
}
.hero-split-photo{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5;
  border:3px solid rgba(255,255,255,0.25); box-shadow:0 30px 60px rgba(0,0,0,0.45);
}
.hero-split-photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){
  .hero-split-grid{ grid-template-columns:1fr; }
  .hero-split-photo{ max-width:340px; margin:0 auto; aspect-ratio:4/5; }
}

/* ---------------- coach photo collage ---------------- */
.coach-collage{ position:relative; max-width:380px; margin:0 auto; }
.coach-collage .primary{
  border-radius:18px; overflow:hidden; border:3px solid var(--line);
  aspect-ratio:1/1;
}
.coach-collage .primary img{ width:100%; height:100%; object-fit:cover; }
.coach-collage .secondary{
  position:absolute; right:-32px; bottom:-32px; width:52%;
  border-radius:14px; overflow:hidden; border:4px solid var(--paper);
  box-shadow:0 16px 32px rgba(0,0,0,0.25); aspect-ratio:4/3;
}
.coach-collage .secondary img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:560px){
  .coach-collage{ max-width:280px; }
  .coach-collage .secondary{ right:-16px; bottom:-16px; }
}

/* ---------------- testimonial photo cards ---------------- */
.testi-card.with-photo{ padding:0; overflow:hidden; }
.testi-photo{ aspect-ratio:16/10; overflow:hidden; }
.testi-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.testi-card.with-photo .testi-body{ padding:1.6rem; display:flex; flex-direction:column; gap:1rem; }

/* ---------------- accreditation strip ---------------- */
.accreditation{ padding:clamp(40px,6vw,64px) 0; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.accreditation-label{
  text-align:center; font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:#8a8184; margin-bottom:1.8rem;
}
.accreditation-row{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(2.2rem,6vw,4.2rem);
}
.accreditation-row img{
  height:44px; width:auto; max-width:180px; object-fit:contain;
  filter:grayscale(1) opacity(0.55);
  transition:filter .2s ease;
}
.accreditation-row img:hover{ filter:grayscale(0) opacity(1); }
.accreditation-row img.tall{ height:58px; }

/* ---------------- tagline band ---------------- */
.tagline-band{
  margin-top:1.8rem; padding-top:1.6rem; border-top:2px solid var(--line);
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.1rem, 2.6vw, 1.5rem); letter-spacing:.04em;
  color:var(--purple);
}

/* ---------------- pathway / credibility markers ---------------- */
.pathway-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin-top:2rem;
}
.pathway-item{
  display:flex; align-items:flex-start; gap:.9rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.3rem;
}
.pathway-check{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--purple); display:flex; align-items:center; justify-content:center;
}
.pathway-check svg{ width:18px; height:18px; }
.pathway-item h3{ font-size:1rem; margin:0; text-transform:none; font-family:var(--body); font-weight:700; letter-spacing:0; line-height:1.3; }
@media (max-width:860px){ .pathway-grid{ grid-template-columns:1fr; } }
.pathway-grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:960px){ .pathway-grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .pathway-grid-4{ grid-template-columns:1fr; } }

/* ---------------- kit packs ---------------- */
.pack-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
@media (max-width:760px){ .pack-grid{ grid-template-columns:1fr; } }
.pack-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.pack-visual{
  display:flex; justify-content:center; align-items:center; gap:1.2rem;
  padding:2.2rem 1rem; background:linear-gradient(160deg, var(--plum), var(--ink));
}
.pack-visual-gk{ background:linear-gradient(160deg, #2c2c2c, var(--ink)); }
.pack-icon{ width:64px; flex:none; }
.pack-body{ padding:1.7rem; }
.pack-body h3{ font-size:1.3rem; margin-bottom:.3rem; }
.pack-includes{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.pack-includes li{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.02em;
  background:var(--tint); color:var(--purple); padding:.35em .85em; border-radius:999px;
}
.pack-pricing{ display:flex; gap:1.8rem; margin:1.2rem 0 1.1rem; }
.pack-price{ font-family:var(--display); font-size:1.7rem; color:var(--ink); display:block; line-height:1; }
.pack-price-label{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#8a8184; }
.pack-order-row{ display:flex; gap:.6rem; margin-top:.5rem; flex-wrap:wrap; }
.pack-order-row select{ flex:1 1 auto; min-width:0; }
.pack-qty{ width:56px; flex:none; text-align:center; padding:.75em .4em; border:1.5px solid var(--line); border-radius:8px; font-family:var(--body); }
.pack-add-btn{ flex:none; padding:.7em 1.1em; font-size:.85rem; white-space:nowrap; }
.pack-added-note{
  display:none; margin:.7rem 0 0; font-family:var(--mono); font-size:.76rem;
  color:var(--purple); letter-spacing:.02em;
}
.pack-added-note.show{ display:block; }

/* ---------------- size guide ---------------- */
.size-guide{ display:grid; grid-template-columns:1.5fr 0.8fr; gap:2rem; align-items:start; }
@media (max-width:860px){ .size-guide{ grid-template-columns:1fr; } }
.size-table td:first-child{ font-weight:700; }
.size-diagram{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; display:flex; justify-content:center;
}
.size-diagram svg{ width:130px; height:auto; }
.size-diagram-labels span{
  position:absolute; left:14px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.03em; color:var(--purple); text-transform:uppercase;
}

/* utility */
.center{ text-align:center; }
.mt-2{ margin-top:2rem; }
.small{ font-size:.85rem; color:#6c6467; }
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:#fff; color:var(--ink); padding:.8em 1.2em; z-index:100;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------------- coaches ---------------- */
.coach-lead{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(24px,4vw,48px); align-items:start;
}
.coach-lead-photo{
  border-radius:18px; overflow:hidden; border:3px solid var(--line); aspect-ratio:1/1;
}
.coach-lead-photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){
  .coach-lead{ grid-template-columns:1fr; }
  .coach-lead-photo{ max-width:300px; }
}
.coach-role{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--purple); margin:0 0 .6rem;
}
.coach-tags{ list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.coach-quote{
  margin:1.4rem 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid var(--purple);
  font-size:1.15rem; font-weight:600; line-height:1.45; color:var(--ink);
}
.coach-tags li{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  background:var(--tint); color:var(--purple); padding:.35em .85em; border-radius:999px;
}

.coach-list{ display:grid; gap:0; }
.coach-row{
  display:grid; grid-template-columns:300px 1fr; gap:clamp(24px,4vw,44px);
  align-items:start; padding:2.4rem 0; border-top:1px solid var(--line);
}
.coach-row:first-child{ border-top:0; padding-top:.6rem; }
.coach-row-photo{
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--tint);
  border:1px solid var(--line);
}
.coach-row-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.coach-row-body h3{ font-size:1.45rem; margin-bottom:.3rem; }
.coach-row-body p:last-child{ margin-bottom:0; }
@media (max-width:760px){
  .coach-row{ grid-template-columns:1fr; }
  .coach-row-photo{ max-width:260px; }
}

/* ---------------- gallery ---------------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
@media (max-width:960px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius);
  background:var(--tint); aspect-ratio:4/3;
}
.gallery-item.wide{ grid-column:span 2; }
@media (max-width:520px){ .gallery-item.wide{ grid-column:span 1; } }
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1.1rem .8rem;
  background:linear-gradient(0deg, rgba(20,16,15,0.8), transparent);
  color:#fff; font-family:var(--mono); font-size:.76rem; letter-spacing:.03em;
}

/* nav has eight items now - tighten the gap before it wraps */
@media (max-width:1080px) and (min-width:861px){
  .nav-links{ gap:1.15rem; }
  .nav-links a{ font-size:0.86rem; }
}