/* ============================================================
   North West Elite Academy — styles.css
   Brand: royal blue + white (club colours) · red + black (kit)
   Type: Barlow Condensed (display) · Barlow (body)
   Signature: the kit stripe — thin red/black diagonals
   ============================================================ */

:root {
  --royal: #1d3fd1;
  --royal-deep: #12279b;
  --ink: #101216;
  --red: #e22420;
  --red-deep: #b3120f;
  --white: #ffffff;
  --cloud: #f1f4fc;
  --line: #d9dfef;
  --text: #23262e;
  --muted: #5a6070;

  --display: "Barlow Condensed", sans-serif;
  --body: "Barlow", sans-serif;

  --stripe: repeating-linear-gradient(
    115deg,
    var(--red) 0 10px,
    var(--ink) 10px 20px
  );

  --radius: 10px;
  --shadow: 0 10px 30px rgba(16, 18, 22, 0.1);
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

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

html { scroll-behavior: smooth; }

html, body {
  /* hard guard: decorative transforms or sizing bugs must never cause sideways scroll */
  overflow-x: clip;
}

body {
  font-family: var(--body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

.container { width: min(1140px, 100% - 2 * var(--pad)); margin-inline: auto; }

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

h1, h2, h3, .display {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-weight: 800;
}

h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); }

.kicker {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--red);
  margin-bottom: 0.75rem;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 22px; height: 3px;
  background: var(--stripe);
  margin-right: 0.6rem;
  vertical-align: middle;
  transform: skewX(-15deg);
}

.lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--muted); max-width: 60ch; }

section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 68ch; }
.section-head p { margin-top: 0.9rem; }

/* ---------- kit stripe dividers ---------- */

.stripe-bar { height: 8px; background: var(--stripe); }

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

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
  padding: 0.85rem 1.9rem;
  text-decoration: none;
  border: 2px solid transparent;
  transform: skewX(-8deg);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.btn > span { display: inline-block; transform: skewX(8deg); }

.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-deep); }

.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.65); }
.btn-ghost:hover { background: var(--white); color: var(--royal-deep); }

.btn-royal { background: var(--royal); color: var(--white); }
.btn-royal:hover { background: var(--royal-deep); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.logo-badge-img {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(16, 18, 22, 0.28), 0 1px 3px rgba(16, 18, 22, 0.2);
}
.logo-text {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
}
.logo-text small {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--royal);
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none;
}
.nav-links a:not(.btn) {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.4rem;
  border-bottom: 3px solid transparent;
}
.nav-links a:not(.btn):hover { color: var(--royal); }
.nav-links a[aria-current="page"] { color: var(--royal); border-bottom-color: var(--red); }
.nav-links .btn { font-size: 0.95rem; padding: 0.55rem 1.2rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

/* Nothing in the nav may wrap onto two lines; below 1240px tighten, below 1024px use the pull-out menu. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1240px) {
  .nav { gap: 0.75rem; }
  .nav-links { gap: clamp(0.7rem, 1.4vw, 1.25rem); }
  .nav-links a:not(.btn) { font-size: 0.95rem; letter-spacing: 0.05em; }
  .nav-links .btn { font-size: 0.88rem; padding: 0.5rem 0.9rem; }
  .logo-text { font-size: 1.1rem; }
}
@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--pad) 1.5rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { border-bottom: 1px solid var(--line); padding-block: 0.8rem; }
  .nav-links .btn { margin-top: 0.75rem; text-align: center; }
}

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

.hero {
  background:
    radial-gradient(ellipse 120% 80% at 70% -10%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(160deg, var(--royal) 0%, var(--royal-deep) 70%);
  color: var(--white);
  position: relative;
  overflow: hidden;
  /* first screen = header + hero + ticker, no scrolling needed */
  padding-block: 1.5rem;
  display: grid;
  align-items: center;
  min-height: calc(100svh - 122px);
}
.hero::after {
  /* faint pitch markings */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 120%, transparent 138px, rgba(255,255,255,0.09) 139px, rgba(255,255,255,0.09) 141px, transparent 142px),
    linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.07)) 50% 0 / 2px 100% no-repeat;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
/* ---------- animated tactics pitch ---------- */

.hero-pitch {
  justify-self: center;
  width: clamp(240px, 25vw, 330px);
  pointer-events: none;
}
.pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 420;
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 255, 255, 0.1), transparent 60%),
    repeating-linear-gradient(0deg, #2f9e44 0 40px, #2a8f3d 40px 80px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  overflow: clip;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.45),
    inset 0 0 60px rgba(0, 40, 0, 0.25);
}
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.goal-mouth {
  position: absolute;
  left: 42%; top: 0;
  width: 16%; height: 2.4%;
  background: rgba(255, 255, 255, 0.55);
  transition: background-color 0.15s ease;
}
.goal-mouth.flash { background: #ffffff; box-shadow: 0 0 22px rgba(255, 255, 255, 0.95); }
.p-dot {
  position: absolute;
  width: 4.6%; aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: dot-bob 3.2s ease-in-out infinite;
}
.p-dot:nth-child(odd) { animation-delay: -1.6s; }
.p-dot:nth-child(3n) { animation-delay: -0.8s; }
.p-dot.us { background: var(--red); box-shadow: 0 0 0 2px var(--ink), 0 3px 6px rgba(0, 0, 0, 0.4); }
.p-dot.them { background: #9fd4f5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 3px 6px rgba(0, 0, 0, 0.35); }   /* baby-blue away kit (was white), 19 Aug 2026 */
.p-dot.keeper { background: #ffd23f; }
.p-dot.gk {
  background: #3dffae;
  box-shadow:
    0 0 0 2px rgba(16, 18, 22, 0.9),
    0 0 12px rgba(61, 255, 174, 0.85),
    0 3px 6px rgba(0, 0, 0, 0.4);
}
@keyframes dot-bob {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 3px)); }
}
.ball {
  position: absolute;
  left: 50%; top: 92%;
  width: 3.8%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff 55%, #cfd6e6);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}
.goal-flash {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3rem, 4.8vw, 4.6rem);
  color: var(--white);
  -webkit-text-stroke: 1.5px var(--red);
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  z-index: 3;
}
.goal-flash.show { animation: goal-pop 1.7s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes goal-pop {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-8deg); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
}
.pitch.shake { animation: pitch-shake 0.5s ease-in-out; }
@keyframes pitch-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(2px, 2px); }
}
.confetti-layer { position: absolute; inset: 0; overflow: clip; }
.confetti-layer span {
  position: absolute;
  width: 7px; height: 10px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall var(--dur) ease-out forwards;
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

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

.ticker {
  background: var(--ink);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-image: var(--stripe) 1;
  overflow: clip;
  position: sticky;
  top: var(--header-h, 72px);
  z-index: 45;
}
.hero-band {
  background: linear-gradient(160deg, #16289f, var(--royal-deep));
  color: var(--white);
  padding-block: 2.75rem 3.25rem;
}
.hero-band .hero-stats { margin-top: 0; }
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  will-change: transform;
}
.ticker-group { display: inline-flex; align-items: center; padding-block: 0.55rem; }
.ticker-group em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  color: var(--white);
  padding-inline: 1.4rem;
}
.ticker-group i { color: var(--red); font-style: normal; font-size: 1.1rem; }
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-pitch { display: none; }
}
.hero h1 { color: var(--white); max-width: 16ch; }
.hero .kicker { color: #ffd6d5; }
.hero .lead { color: rgba(255, 255, 255, 0.88); margin-top: 1.1rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.hero-stats div { background: rgba(18, 39, 155, 0.6); padding: 1.1rem 1.2rem; }
.hero-stats strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  text-transform: uppercase;
  line-height: 1.1;
}
.hero-stats span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); }

/* ---------- media placeholders (swap for real photos/video) ---------- */

.media-slot {
  position: relative;
  background:
    linear-gradient(150deg, rgba(29, 63, 209, 0.92), rgba(16, 18, 22, 0.95)),
    var(--cloud);
  color: var(--white);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  min-height: 220px;
  /* width must always come from the container, never be derived by
     aspect-ratio from min-height (that combination blows out mobile width) */
  width: 100%;
  max-width: 100%;
}
.media-slot::before, .card::before, .enquiry-form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--stripe);
}
.enquiry-form::before { height: 8px; }
.media-slot.wide { aspect-ratio: 16 / 9; }
.media-slot.tall { aspect-ratio: 3 / 4; }
.media-slot.square { aspect-ratio: 1; }
.media-slot .slot-label {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}
.media-slot .slot-label small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.35rem;
}
.media-slot .play-ring {
  width: 64px; height: 64px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;
}
.play-ring::after {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--white);
  margin-left: 4px;
}
/* a published photo fills its slot; the red and black stripe stays on top of it */
.media-slot .slot-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-slot.has-photo .slot-label { display: none; }
.media-slot.has-photo::before { z-index: 2; }

/* ---------- cards ---------- */

.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--muted); font-size: 0.98rem; }
.card .card-meta {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--royal);
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.4rem;
}

.alt-section { background: var(--cloud); }

/* ---------- pathway ---------- */

.pathway { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.pathway-step {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.8rem 1.6rem 1.6rem;
  position: relative;
  box-shadow: var(--shadow);
}
.pathway-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -1.1rem; left: 1.3rem;
  background: var(--royal);
  color: var(--white);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  padding: 0.25rem 0.7rem;
  transform: skewX(-8deg);
}
.pathway-step .ages {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1;
}
.pathway-step h3 { margin: 0.35rem 0 0.55rem; }
.pathway-step .night {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--royal);
  display: block;
  margin-bottom: 0.5rem;
}
.pathway-step p { color: var(--muted); font-size: 0.96rem; }

/* ---------- dark band ---------- */

.dark-band { background: var(--ink); color: var(--white); }
.dark-band h2, .dark-band h3 { color: var(--white); }
.dark-band .lead, .dark-band p { color: rgba(255, 255, 255, 0.78); }
.dark-band .kicker { color: var(--red); }

.cred-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 2rem; list-style: none; }
.cred-list li {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 5px solid var(--red);
  padding: 1.1rem 1.2rem;
  font-weight: 500;
}

/* ---------- timetable ---------- */

.timetable { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.day-card { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.day-card header {
  background: var(--royal);
  color: var(--white);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  padding: 0.8rem 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.day-card header span { font-size: 0.95rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.day-card ul { list-style: none; }
.day-card li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.3rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.day-card li:last-child { border-bottom: none; }
.day-card li strong { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.04em; }
.day-card li span { color: var(--muted); white-space: nowrap; }

/* ---------- steps (free taster) ---------- */

.steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: taster; }
.step {
  padding: 1.6rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.step::before {
  counter-increment: taster;
  content: counter(taster);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--royal);
  color: var(--white);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* ---------- gallery ---------- */

.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-flow: dense;
}
.gallery-grid .span-2 { grid-column: span 2; }
@media (max-width: 560px) { .gallery-grid .span-2 { grid-column: span 1; } }

/* ---------- forms ---------- */

.form-wrap { display: grid; gap: 3rem; grid-template-columns: 1.1fr 1fr; align-items: start; }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } }

.enquiry-form {
  background: var(--white);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow);
}
.enquiry-form fieldset { border: none; margin-bottom: 1.6rem; }
.enquiry-form legend {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 0.9rem;
  letter-spacing: 0.04em;
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field select, .field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-family: var(--body);
  font-size: 1rem;
  background: var(--white);
  color: var(--text);
}
.field textarea { min-height: 110px; resize: vertical; }
.field .hint { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }

.choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice-row label {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 500;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.choice-row label:has(input:checked) {
  background: var(--royal);
  border-color: var(--royal);
  color: var(--white);
}
.choice-row label:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }

.consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--muted); margin-bottom: 1.4rem; }
.consent input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--royal); }

.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.8rem; }

.form-success {
  display: none;
  background: var(--cloud);
  border-left: 6px solid var(--royal);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.form-success.visible { display: block; }

/* ---------- info panel on enquire page ---------- */

.info-panel h3 { margin-top: 1.8rem; margin-bottom: 0.5rem; }
.info-panel h3:first-child { margin-top: 0; }
.info-panel ul { list-style: none; }
.info-panel li { padding: 0.45rem 0; border-bottom: 1px dashed var(--line); font-size: 0.98rem; }
.info-panel li strong { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- FAQ ---------- */

.faq details {
  border: 1px solid var(--line);
  background: var(--white);
  margin-bottom: 0.8rem;
}
.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  padding: 1rem 1.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--red); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 1.3rem 1.2rem; color: var(--muted); }

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

.cta-band {
  background:
    radial-gradient(ellipse 100% 120% at 85% 0%, rgba(226, 36, 32, 0.35), transparent 55%),
    linear-gradient(150deg, var(--royal), var(--royal-deep));
  color: var(--white);
  text-align: center;
}
.cta-band h2 { color: var(--white); max-width: 24ch; margin-inline: auto; }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin: 1rem auto 2rem; max-width: 55ch; }

/* ---------- interlinks (filled in at the edge from site_seo, empty by default) ---------- */

.interlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: center;
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.6rem var(--pad);
  border-top: 1px solid var(--line);
}
.interlinks a {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--royal);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.interlinks a:hover,
.interlinks a:focus-visible { border-bottom-color: var(--red); }

/* ---------- testimonials (placeholder slots) ---------- */

.quote-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 6px solid var(--red);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow);
}
.quote-card blockquote { font-size: 1.05rem; font-style: italic; color: var(--muted); }
.quote-card cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ---------- breadcrumbs ---------- */

.crumbs { padding-block: 1rem 0; font-size: 0.88rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs span { color: var(--ink); font-weight: 600; }

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

.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.8); padding-block: 3.5rem 2rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h3 {
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.footer-badge {
  border-radius: 50%;
  margin-bottom: 0.9rem;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 0 30px rgba(29, 63, 209, 0.65);
}
.site-footer ul { list-style: none; }
.site-footer li { padding-block: 0.25rem; font-size: 0.95rem; }
.site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- reveal animation ---------- */

html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- Enquiry form: colour and structure (added 29 Jul 2026) ----------
   The form read as a flat white sheet. Grouping each fieldset onto the cloud
   tint with a royal edge breaks it up and pulls the brand through the page. */
.enquiry-form fieldset {
  background: var(--cloud);
  border-left: 4px solid var(--royal);
  border-radius: 8px;
  padding: 1.3rem 1.2rem 0.5rem;
}
.enquiry-form fieldset + fieldset { margin-top: 1.3rem; }
.enquiry-form legend {
  color: var(--royal);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.9rem;
  margin-bottom: 1rem;
}
.field input[type="text"]:focus, .field input[type="tel"]:focus,
.field input[type="email"]:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--royal);
  box-shadow: 0 0 0 3px rgba(29, 63, 209, 0.16);
}
.choice-row label { background: var(--white); }
.choice-row label:hover { border-color: var(--royal); color: var(--royal); }
.choice-row label:has(input:checked):hover { color: var(--white); }

/* ---------- Enquiry page: form-first layout + mobile choice dropdowns (14 Aug 2026) ----------
   The taster page now opens straight onto the form (no hero), with the h1 living
   inside the form card. On phones the pill choice groups collapse into dropdowns
   styled to match the form's select boxes; desktop keeps the pills untouched. */

.form-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.7rem, 3.5vw, 2.2rem);
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.form-title small {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.45rem;
}

/* Desktop and tablet: the details wrapper is invisible chrome (kept open by
   markup + JS), so the pills render exactly as before. */
.choice-dd > summary { display: none; }
.choice-dd > summary::-webkit-details-marker { display: none; }

@media (max-width: 767px) {
  .choice-dd > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
  }
  .choice-dd > summary::after {
    content: "▾";
    color: var(--royal);
    font-size: 1.05rem;
    margin-left: 0.6rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .choice-dd:not(.dd-closed) > summary::after { transform: rotate(180deg); }
  .choice-dd:not(.dd-closed) > summary {
    border-color: var(--royal);
    box-shadow: 0 0 0 3px rgba(29, 63, 209, 0.16);
  }
  .choice-dd.dd-closed > .choice-row { display: none; }
  .choice-dd > summary .dd-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .choice-dd > summary.has-value .dd-value { color: var(--royal); font-weight: 600; }
  .choice-dd > .choice-row { margin-top: 0.6rem; gap: 0.45rem; }
  .choice-dd .choice-row label {
    display: block;
    width: 100%;
    border-radius: 8px;
    padding: 0.65rem 0.95rem;
  }
}

/* News index: two cards per row, one on phones */
.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .news-grid { grid-template-columns: 1fr; } }
.news-grid .card h3 a { color: inherit; text-decoration: none; }
.news-grid .card h3 a:hover { color: var(--royal); }

/* ---------- member area icon in the header (19 Aug 2026) ---------- */
.nav-avatar {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--royal); color: var(--royal); background: var(--white);
  text-decoration: none; transition: background .15s, color .15s, transform .15s;
}
.nav-avatar:hover, .nav-avatar:focus-visible { background: var(--royal); color: var(--white); transform: translateY(-1px); }
.nav-avatar svg { display: block; }
.nav-avatar-label { display: none; }
.nav-links .nav-avatar { border-bottom: 0; padding-block: 0; }
@media (max-width: 1024px) {
  .nav-member { margin-top: 0.75rem; }
  .nav-avatar { width: auto; height: auto; border-radius: var(--radius); padding: 0.75rem 1rem; justify-content: flex-start; }
  .nav-avatar-label { display: inline; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; }
}