/* ==========================================================================
   Velocity Sports & Entertainment Group: core stylesheet
   Author: built for Velocity | Static build for cPanel hosting
   Sections: 1 Tokens  2 Reset  3 Typography  4 Layout  5 Header/Nav
             6 Hero  7 Cards  8 Sections  9 Forms/Modal  10 Footer
             11 Utilities  12 Motion  13 Responsive
   ========================================================================== */

/* --------------------------------------------------- 1. DESIGN TOKENS --- */
:root{
  /* Surfaces */
  --bg:            #07090E;
  --bg-alt:        #0A0D12;
  --surface:       #12161C;
  --surface-2:     #171C24;
  --surface-3:     #1E242E;
  --line:          #262C36;
  --line-soft:     rgba(255,255,255,.07);

  /* Ink */
  --text:          #F7F4EA;
  --text-dim:      #C3C8D1;
  --muted:         #9CA3AD;
  --muted-2:       #6E7683;

  /* Brand */
  --violet:        #2F49D6;
  --violet-lt:     #5B6DF0;
  --indigo:        #6C4BE8;
  --amber:         #FFB23F;
  --gold:          #FFC469;
  --grad:          linear-gradient(95deg, #2F49D6 0%, #6C4BE8 45%, #FFB23F 100%);
  --grad-soft:     linear-gradient(95deg, rgba(47,73,214,.16), rgba(255,178,63,.16));
  --grad-band:     linear-gradient(100deg, #7B86F0 0%, #B291EE 42%, #FFC06B 100%);
  --grad-btn:      linear-gradient(95deg, #7B86F0 0%, #A98CEE 45%, #FFB23F 100%);

  /* Club accents */
  --scbc:          #FFC469;
  --rhinos:        #7FE0A0;
  --ahoy:          #7FE3F7;
  --f2r:           #E38AA8;
  --accent:        var(--gold);       /* overridden per club page */
  --accent-soft:   rgba(255,196,105,.12);

  /* Feedback */
  --danger:        #E97A7A;
  --success:       #7FE0A0;

  /* Type */
  --font-display:  'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:     'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Space & shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
  --shadow:      0 18px 44px rgba(0,0,0,.42);
  --shadow-lift: 0 26px 60px rgba(0,0,0,.55);
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 72px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------- 2. RESET ----- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:rgba(255,178,63,.28); color:#fff; }

/* ---------------------------------------------------- 3. TYPOGRAPHY ----- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; color:var(--text); }
h1{ font-size:clamp(2.3rem, 5.4vw, 3.7rem); font-weight:800; }
h2{ font-size:clamp(1.85rem, 3.9vw, 2.85rem); }
h3{ font-size:clamp(1.2rem, 2.1vw, 1.5rem); }
h4{ font-size:1.05rem; }
p{ margin:0 0 1.1em; color:var(--text-dim); }
.lead{ font-size:clamp(1.03rem, 1.6vw, 1.22rem); color:var(--muted); line-height:1.75; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:.75rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin:0 0 16px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; border-radius:2px; opacity:.75; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hl{ color:var(--gold); }

/* -------------------------------------------------------- 4. LAYOUT ----- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(64px, 9vw, 118px) 0; position:relative; }
.section--tight{ padding:clamp(48px,6vw,76px) 0; }
.section--alt{ background:var(--bg-alt); border-block:1px solid var(--line-soft); }
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.stack-lg{ display:grid; gap:26px; }
.sec-head{ max-width:660px; margin-bottom:clamp(34px,4vw,52px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }

/* -------------------------------------------------- 5. HEADER & NAV ----- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(7,9,14,.55);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck{ background:rgba(7,9,14,.9); border-bottom-color:var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
/* The supplied logo already carries its own cream ring, so the mark is a
   bare circle. Only the text fallback (no image file) draws a ring. */
.brand__mark{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center; overflow:hidden;
}
.brand__mark img{ width:100%; height:100%; object-fit:contain; }
.brand__mark.is-fallback{
  background:radial-gradient(circle at 32% 30%, #1b2130, #05070b 70%);
  border:1.5px solid rgba(255,255,255,.85);
}
.brand__mark span{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:1.06rem; letter-spacing:.02em; line-height:1.1; }
.brand__sub{ display:block; font-size:.62rem; letter-spacing:.19em; color:var(--gold); text-transform:uppercase; font-weight:500; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{
  position:relative; padding:9px 14px; border-radius:var(--r-sm);
  font-size:.93rem; color:var(--muted); transition:color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav a.is-active{ color:var(--text); }
.nav a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px;
  background:var(--grad); border-radius:2px;
}
.nav-actions{ display:flex; align-items:center; gap:12px; }

.nav-toggle{ display:none; width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--line); place-items:center; }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; position:relative; transition:.25s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text); border-radius:2px; transition:.25s var(--ease); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* --------------------------------------------------------- 6. HERO ----- */
.hero{
  position:relative; padding:calc(var(--header-h) + clamp(56px,9vw,104px)) 0 clamp(56px,8vw,96px);
  overflow:hidden; isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:120%; z-index:-2;
  background:
    radial-gradient(46% 52% at 18% 8%,  rgba(47,73,214,.55), transparent 62%),
    radial-gradient(40% 46% at 82% 22%, rgba(255,178,63,.26), transparent 64%),
    radial-gradient(50% 50% at 55% 78%, rgba(108,75,232,.28), transparent 66%);
  filter:blur(12px);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.6px 1.6px at 34% 68%, rgba(255,196,105,.5), transparent),
    radial-gradient(1.2px 1.2px at 88% 62%, rgba(127,227,247,.45), transparent),
    radial-gradient(1.3px 1.3px at 58% 34%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.1px 1.1px at 22% 86%, rgba(255,255,255,.3), transparent);
}
.hero__inner{ position:relative; max-width:1040px; }
.hero h1{ margin-bottom:20px; }
.hero__lead{ max-width:600px; font-size:clamp(1.04rem,1.7vw,1.26rem); color:var(--text-dim); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.045); border:1px solid var(--line);
  font-size:.82rem; color:var(--text-dim);
}
.pill i{ color:var(--accent); font-size:1rem; }
.pill--live::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--success);
  box-shadow:0 0 0 0 rgba(127,224,160,.6); animation:ping 2.2s infinite;
}
@keyframes ping{ 70%{ box-shadow:0 0 0 9px rgba(127,224,160,0);} 100%{ box-shadow:0 0 0 0 rgba(127,224,160,0);} }

/* ------------------------------------------------------- 7. BUTTONS ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:50px; padding:0 26px; border-radius:var(--r-md);
  font-family:var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.btn i{ font-size:1.1rem; }
.btn--primary{ background:var(--grad-btn); color:#0B0E14; box-shadow:0 10px 26px rgba(47,73,214,.34); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(47,73,214,.42); }
.btn--ghost{ border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text); }
.btn--ghost:hover{ border-color:var(--muted-2); background:rgba(255,255,255,.07); transform:translateY(-2px); }
.btn--accent{ background:var(--accent); color:#0B0E14; }
.btn--accent:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn--sm{ height:42px; padding:0 18px; font-size:.88rem; }
.btn--block{ width:100%; }
.btn--nav{ height:42px; padding:0 18px; font-size:.88rem; background:var(--grad-btn); color:#0B0E14; border-radius:var(--r-sm); font-family:var(--font-display); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
/* `.nav a` (0-1-1) out-specifies `.btn--nav` (0-1-0) and was greying out the
   label, so the nav CTA needs its colours restated at matching specificity. */
.nav a.btn--nav, .nav a.btn--nav:hover{ color:#0B0E14; background:var(--grad-btn); }
.nav a.btn--nav:hover{ transform:translateY(-1px); filter:brightness(1.05); }

.link-arrow{ display:inline-flex; align-items:center; padding:5px 0; gap:7px; color:var(--accent); font-weight:500; font-size:.94rem; transition:gap .2s var(--ease); }
.link-arrow:hover{ gap:12px; }

/* --------------------------------------------------------- 8. CARDS ---- */
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(20px,2.4vw,28px);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:var(--line-soft); box-shadow:var(--shadow); }

/* Club card */
.club-card{
  --accent: var(--gold);
  display:flex; flex-direction:column; gap:16px; overflow:hidden;
  border-left:3px solid var(--accent);
}
.club-card[data-club="scbc"]{ --accent:var(--scbc); --accent-soft:rgba(255,196,105,.12); }
.club-card[data-club="rhinos"]{ --accent:var(--rhinos); --accent-soft:rgba(127,224,160,.12); }
.club-card[data-club="ahoy"]{ --accent:var(--ahoy); --accent-soft:rgba(127,227,247,.12); }
.club-card[data-club="f2r"]{ --accent:var(--f2r); --accent-soft:rgba(228,138,168,.14); }
.club-card::after{
  content:""; position:absolute; inset:auto -40% -60% auto; width:220px; height:220px; border-radius:50%;
  background:var(--accent); opacity:.07; filter:blur(46px); pointer-events:none;
  transition:opacity .35s var(--ease);
}
.club-card:hover::after{ opacity:.16; }
.club-card__top{ display:flex; align-items:center; gap:14px; }
/* The club crests are self-contained shields, so they sit on the card with no
   frame around them. The tile styling is only drawn behind the icon fallback,
   which needs a container to have any presence. */
.club-card__logo{
  width:62px; height:62px; flex:none; border-radius:14px; overflow:hidden;
  display:grid; place-items:center;
}
.club-card__logo img{ width:100%; height:100%; object-fit:contain; }
.club-card__logo.is-fallback{
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.club-card__logo i{ font-size:1.6rem; color:var(--accent); }
.club-card__sport{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0; }
.club-card__name{ font-family:var(--font-display); font-weight:700; font-size:1.28rem; margin:2px 0 0; letter-spacing:-.01em; }
.club-card__desc{ color:var(--muted); font-size:.95rem; margin:0; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{
  font-size:.76rem; padding:4px 10px; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent); white-space:nowrap;
}
.club-card__actions{ margin-top:auto; display:grid; gap:12px; padding-top:8px; }
.club-card__actions .btn{ width:100%; }
.club-card__actions .link-arrow{ font-size:.86rem; justify-self:start; }

/* Feature / value card */
.feature{ display:grid; gap:12px; }
.feature__icon{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--line); color:var(--gold); font-size:1.25rem;
}
.feature h3{ font-size:1.08rem; margin:0; }
.feature p{ margin:0; font-size:.94rem; color:var(--muted); }

/* Stat card */
.stat{ text-align:left; }

/* Statistics beside body copy sit two by two. As a single stacked column of
   four they ran 867px tall next to a 447px paragraph, and centring the row
   then padded the text with roughly 210px of empty space above and below. */
.grid--stats{ grid-template-columns:repeat(2,1fr); gap:16px; }
.grid--stats .card{ padding:20px 18px; }
.grid--stats .stat__num{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.grid--stats .stat__label{ margin-top:8px; font-size:.85rem; line-height:1.45; }
@media (max-width:560px){
  .grid--stats{ grid-template-columns:1fr; }
}
/* margin:0 matters. This is a <p>, so without it the global paragraph rule
   adds a 45px bottom margin between the number and its label. */
.stat__num{ margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(2.3rem,5vw,3.2rem); line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__label{ margin:10px 0 0; font-size:.92rem; color:var(--muted); }

/* Step / pathway */
.step{ position:relative; padding-left:56px; }
.step__num{
  position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.95rem;
  background:var(--grad-soft); border:1px solid var(--line); color:var(--gold);
}
.step h3{ font-size:1.05rem; margin:6px 0 6px; }
.step p{ margin:0; font-size:.94rem; color:var(--muted); }

/* Banner CTA */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--grad-band); color:#0B0E14; text-align:center;
  padding:clamp(38px,5.5vw,62px) clamp(24px,5vw,56px);
}
.cta-band h2{ color:#0B0E14; margin-bottom:12px; }
.cta-band p{ color:rgba(11,14,20,.86); max-width:560px; margin:0 auto 26px; font-weight:500; }
.cta-band .btn{ background:#0B0E14; color:var(--text); }
.cta-band .btn:hover{ background:#161B24; transform:translateY(-2px); }

/* --------------------------------------------- 9. FORMS & MODAL -------- */
.field{ display:block; margin-bottom:16px; }
.field__label{ display:block; font-size:.86rem; color:var(--muted); margin-bottom:7px; font-weight:500; }
.field__label .req{ color:var(--danger); }
.input, .select, .textarea{
  width:100%; background:var(--bg-alt); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-sm); min-height:48px; padding:12px 14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  appearance:none;
}
.textarea{ min-height:120px; resize:vertical; }
.input::placeholder,.textarea::placeholder{ color:var(--muted-2); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:#0D1117; }
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239CA3AD' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.select option{ background:#0D1117; color:var(--text); }
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{ border-color:var(--danger); }
.field__error{ display:none; font-size:.8rem; color:var(--danger); margin:6px 0 0; }
.field.has-error .field__error{ display:block; }
.field__hint{ font-size:.8rem; color:var(--muted-2); margin:6px 0 0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Parent/guardian notice on under-18 programmes. */
.youth-note{
  display:flex; gap:10px; align-items:flex-start;
  margin:0 0 16px; padding:12px 14px; border-radius:var(--r-sm);
  background:rgba(255,196,105,.10); border:1px solid rgba(255,196,105,.30);
  font-size:.86rem; line-height:1.5; color:var(--text-dim);
}
.youth-note[hidden]{ display:none; }
.youth-note i{ color:var(--gold); font-size:1.05rem; flex:none; margin-top:1px; }
.youth-note a{ color:var(--gold); text-decoration:underline; }

.modal{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(4,6,10,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.modal.is-open{ display:flex; animation:fade .22s var(--ease); }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.modal__panel{
  position:relative; width:100%; max-width:430px; max-height:90vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow-lift);
  animation:rise .28s var(--ease);
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px) scale(.985);} to{ opacity:1; transform:none; } }
.modal__panel::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px; }
.modal__title{ font-family:var(--font-display); font-weight:700; font-size:1.22rem; margin:0; }
.modal__sub{ font-size:.9rem; color:var(--muted); margin:0 0 20px; }
.modal__close{ width:34px; height:34px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--muted); border:1px solid transparent; transition:.2s var(--ease); }
.modal__close:hover{ color:var(--text); background:rgba(255,255,255,.06); border-color:var(--line); }
.modal__success{ display:none; text-align:center; padding:22px 0 8px; }
.modal__success i{ font-size:2.1rem; color:var(--success); }
.modal__success h3{ margin:14px 0 6px; font-size:1.12rem; }
.modal__success p{ color:var(--muted); font-size:.93rem; margin:0; }
/* On success, hide the intro line as well as the form. It sits outside
   .modal__body, so without this it lingered above the confirmation. */
.is-sent .modal__body{ display:none; }
.is-sent .modal__sub{ display:none; }
.is-sent .modal__success{ display:block; }
body.no-scroll{ overflow:hidden; }

.form-note{ font-size:.8rem; color:var(--muted-2); margin:14px 0 0; text-align:center; line-height:1.5; }
.form-status{ display:none; font-size:.86rem; padding:10px 12px; border-radius:var(--r-sm); margin-bottom:14px; }
.form-status.is-error{ display:block; background:rgba(233,122,122,.12); color:var(--danger); border:1px solid rgba(233,122,122,.3); }
.btn.is-loading{ pointer-events:none; opacity:.75; }
.btn.is-loading::after{
  content:""; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(11,14,20,.35); border-top-color:#0B0E14; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ------------------------------------------------------- 10. FOOTER ---- */
.site-footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding:clamp(48px,6vw,72px) 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; }
.site-footer h4{ font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin:0 0 16px; font-weight:600; }
.site-footer li{ margin-bottom:10px; }
.site-footer a{ display:inline-block; padding:3px 0; color:var(--muted); font-size:.93rem; transition:color .2s var(--ease); }
.site-footer a:hover{ color:var(--gold); }
.footer-about p{ font-size:.92rem; color:var(--muted); margin:16px 0 0; max-width:300px; }
.socials{ display:flex; gap:10px; margin-top:18px; }
.socials a{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted); font-size:1.05rem;
  transition:.2s var(--ease);
}
.socials a:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:.84rem; color:var(--muted-2);
}
.footer-bottom a{ font-size:.84rem; }

/* Page header (interior pages) */
.page-head{ position:relative; padding:calc(var(--header-h) + clamp(48px,7vw,84px)) 0 clamp(36px,5vw,60px); overflow:hidden; }
.page-head::before{
  content:""; position:absolute; inset:-60% -20% auto -20%; height:180%; z-index:-1;
  background:radial-gradient(44% 50% at 22% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%),
             radial-gradient(40% 44% at 78% 30%, rgba(47,73,214,.32), transparent 64%);
  filter:blur(10px);
}
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.83rem; color:var(--muted-2); margin-bottom:18px; }
.breadcrumb a{ display:inline-block; padding:3px 0; color:var(--muted); } .breadcrumb a:hover{ color:var(--gold); }

/* Photography */
.media{
  margin:0 0 clamp(22px,3vw,32px); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
}
.media img{ display:block; width:100%; height:auto; }
.media figcaption{
  padding:11px 16px; font-size:.82rem; color:var(--muted-2);
  border-top:1px solid var(--line); line-height:1.5;
}

/* Prose (About page) */
.prose h2{ margin-top:1.6em; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--text-dim); }
.prose ul{ display:grid; gap:14px; margin:0 0 1.4em; }
.prose ul li{ position:relative; padding-left:30px; color:var(--text-dim); }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:3px;
  background:var(--grad);
}
.prose li strong{ color:var(--text); }
.source-note{ font-size:.82rem; color:var(--muted-2); border-left:2px solid var(--line); padding-left:14px; margin-top:34px; }

/* Info rows (contact / club details) */
.info-row{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.info-row:last-child{ border-bottom:none; }
.info-row i{ color:var(--accent); font-size:1.15rem; margin-top:2px; }
.info-row strong{ display:block; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:3px; }
.info-row span{ color:var(--text-dim); font-size:.95rem; }
.info-row a{ display:inline-block; padding:3px 0; color:var(--text-dim); font-size:.95rem; }
.info-row a:hover{ color:var(--gold); }
.placeholder{ color:var(--muted-2); font-style:italic; }

/* Programme table */
.prog-list{ display:grid; gap:12px; }
.prog{
  display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-md); padding:16px 18px;
}
.prog > div:first-child{ flex:1 1 220px; min-width:0; }
.prog .btn{ flex:0 0 auto; }
.prog__actions{ display:flex; gap:8px; flex:0 0 auto; }
.prog__name{ font-family:var(--font-display); font-weight:600; font-size:1rem; margin:0; }
.prog__meta{ font-size:.86rem; color:var(--muted); margin:3px 0 0; }

/* FAQ */
.faq{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; }
.faq + .faq{ margin-top:12px; }
.faq summary{ cursor:pointer; padding:18px 20px; font-family:var(--font-display); font-weight:600; font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent); font-size:1.4rem; line-height:1; transition:transform .25s var(--ease); }
.faq[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:0; padding:0 20px 20px; color:var(--muted); font-size:.94rem; }

/* ----------------------------------------------------- 11. UTILITIES --- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:#0B0E14; padding:10px 16px; border-radius:0 0 var(--r-sm) 0; font-weight:600; }
.skip-link:focus{ left:0; }

/* -------------------------------------------------------- 12. MOTION --- */
/* Reveal-on-scroll is applied ONLY when JavaScript is running (html.js).
   Without JS every element stays visible, so the site degrades gracefully. */
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
.js [data-reveal][data-delay="1"]{ transition-delay:.08s; }
.js [data-reveal][data-delay="2"]{ transition-delay:.16s; }
.js [data-reveal][data-delay="3"]{ transition-delay:.24s; }
.js [data-reveal][data-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
}

/* ---------------------------------------------------- 13. RESPONSIVE --- */
/* Four club cards on a tablet fall 3 + 1, stranding one card beside a gap.
   Force a balanced 2 x 2 until there is room for a genuine row of four. */
@media (min-width:820px) and (max-width:1150px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:960px){
  .split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:920px){
  .nav-toggle{ display:grid; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    /* Solid, not translucent. A backdrop-filter nested inside the header's own
       backdrop-filter renders unreliably, and page content was bleeding through
       the open menu. A menu panel has no reason to be see-through anyway. */
    background:var(--bg); z-index:1; box-shadow:0 18px 40px rgba(0,0,0,.5);
    border-bottom:1px solid var(--line); padding:14px var(--gutter) 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s var(--ease);
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:13px 12px; font-size:1rem; border-radius:var(--r-sm); }
  .nav a.is-active::after{ display:none; }
  .nav a.is-active{ background:rgba(255,255,255,.06); }
  .nav .btn--nav{ margin-top:10px; justify-content:center; height:48px; }
}
@media (max-width:600px){
  :root{ --header-h:64px; }
  .brand__sub{ display:none; }
  .hero__cta .btn{ width:100%; }
  .footer-grid{ grid-template-columns:1fr; }
  .modal__panel{ padding:22px 20px; }
  .prog{ flex-direction:column; align-items:flex-start; }
  .prog .btn{ width:100%; }
  .prog__actions{ width:100%; flex-direction:column; }
}