/*
  EPAC / APAC coming-soon sites. Shared by every brand, unchanged.

  Values are taken from the soccer site's rendered output (getComputedStyle on the
  live homepage, 2026-09-14), not from its Tailwind class names: the Shopify theme
  sets a 10px root, so rem figures there do not mean what they appear to.
*/

:root {
  --navy: #020e38;
  --navy-deep: #01081f;
  --surface: #0d1b2a;
  --red: #e30613;
  --gold: #ffb703;
  --gold-ink: #b8860b;
  --blue: #0077b6;
  --blue-on-dark: #3fa9e0;
  --slate: #334155;
  --mute: #64748b;
  --line: #eef0f4;
  --tint: #f7f8fa;
  --field: #d1d5db;
  --hdr: 74px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.6px;
  color: rgba(51, 65, 85, 0.75);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, fieldset { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: var(--navy); padding: 8px 14px; border-radius: 10px; }

.wrap { max-width: 1536px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .wrap { padding: 0 32px; } }

/* Anchor targets clear the fixed header. */
section[id], article[id] { scroll-margin-top: calc(var(--hdr) + 16px); }
#top { scroll-margin-top: 0; }

/* ------------------------------------------------------------------ type */
.display { font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: 14px; line-height: 20px; }
.eyebrow-sm { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; font-size: 12px; line-height: 16px; }
.t-red { color: var(--red); }
.t-gold { color: var(--gold); }
.t-gold-ink { color: var(--gold-ink); }
.t-blue { color: var(--blue); }
.t-blue-on-dark { color: var(--blue-on-dark); }
.glow { text-shadow: 0 1px 2px rgba(2, 14, 56, 0.95), 0 2px 10px rgba(2, 14, 56, 0.75); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; border: 0; border-radius: 16px; cursor: pointer; white-space: nowrap;
}
.btn .ico { width: 18px; height: 18px; }
.btn-red { background: var(--red); color: #fff; transition: transform 0.2s, filter 0.2s; }
.btn-red:hover { filter: brightness(0.92); transform: translateY(-1px); }
.btn-lg { font-size: 16px; line-height: 24px; padding: 16px 32px; }
.btn-sm { font-size: 14px; line-height: 20px; padding: 10px 18px; border-radius: 12px; }
.btn-block { width: 100%; font-size: 16px; line-height: 24px; padding: 13px 20px; border-radius: 12px; }
.btn-block[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.btn-text { color: #fff; font-weight: 600; padding: 16px 8px; }
.btn-text:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.hdr.is-solid {
  background: rgba(2, 14, 56, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hdr-in { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lockup { display: flex; align-items: center; gap: 12px; color: #fff; white-space: nowrap; }
.lockup img { width: 44px; height: 44px; object-fit: contain; }
.lockup-name { display: block; font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: -0.01em; }
.lockup-sub { display: block; margin-top: 4px; font-size: 8.5px; line-height: 1; letter-spacing: 0.18em; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
/* Under 420px the lockup and a full "Register interest" button do not fit on one row,
   so the button shortens rather than the sport name disappearing. */
.label-short { display: none; }
@media (max-width: 419px) {
  .label-long { display: none; }
  .label-short { display: inline; }
  .hdr-in { gap: 12px; }
}
.nav { display: none; gap: 32px; font-size: 14px; line-height: 20px; font-weight: 500; }
.nav a { color: rgba(255, 255, 255, 0.85); }
.nav a:hover { color: #fff; }
@media (min-width: 1024px) { .nav { display: flex; } }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; text-align: center;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Shared PAC banner across the top of the header, full width and never cropped (its
   height follows its width), with the centred headline below it. Its black floor fades
   into the site's navy so the two read as one scene, and the headline rises a little
   into that fade. Below 1024px the banner is short, so it starts under the fixed header
   bar instead of behind it; a top fade blends the navy strip into the black image. */
.hero--banner { display: block; min-height: 0; background: var(--navy-deep); padding: var(--hdr) 0 72px; }
.banner-media { position: relative; }
.banner-img { width: 100%; height: auto; }
.banner-media::before,
.banner-media::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.banner-media::before { top: 0; height: 22%; background: linear-gradient(180deg, var(--navy-deep), rgba(1, 8, 31, 0)); }
.banner-media::after { bottom: -1px; height: 42%; background: linear-gradient(180deg, rgba(1, 8, 31, 0), var(--navy-deep)); }
.banner-in { margin: -4vw auto 0; padding: 0 24px; }
@media (min-width: 1024px) {
  .hero--banner { padding-top: 0; }
  .banner-media::before { height: 18%; background: linear-gradient(180deg, rgba(1, 8, 31, 0.55), rgba(1, 8, 31, 0)); }
  .banner-in { margin-top: -5.5vw; }
}
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 14, 56, 0.8), rgba(2, 14, 56, 0)); }
.hero--strong .hero-scrim {
  background:
    linear-gradient(180deg, rgba(2, 14, 56, 0.7), rgba(2, 14, 56, 0.1)),
    rgba(2, 14, 56, 0.55);
}
.hero-in { position: relative; width: 100%; max-width: 1024px; padding: 120px 24px 96px; }

.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px; line-height: 1.8; letter-spacing: 0.12em; text-transform: uppercase;
}
@media (min-width: 640px) { .pill-eyebrow { letter-spacing: 0.18em; } }
.pill-eyebrow .ico { width: 14px; height: 14px; color: var(--gold); flex: none; }

.hero-h { font-size: 40px; color: #fff; margin-bottom: 24px; text-wrap: balance; }
@media (min-width: 640px) { .hero-h { font-size: 64px; } }
@media (min-width: 1024px) { .hero-h { font-size: 78px; } }

.hero-p { max-width: 620px; margin: 0 auto 36px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.85); }
@media (min-width: 640px) { .hero-p { font-size: 22px; line-height: 32px; } }

.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }

.audience { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; }
.audience .eyebrow-sm { color: var(--gold); }
.audience-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.audience-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  background: #fff; color: var(--navy); font-size: 14px; line-height: 20px; font-weight: 500;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25);
}
.audience-pill .ico { width: 16px; height: 16px; }
.audience-pill:hover { color: var(--red); }

.scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); }
.scroll-cue:hover { color: #fff; }
.scroll-cue .ico { width: 24px; height: 24px; animation: bounce 1s infinite; }
@media (max-height: 760px) { .scroll-cue { display: none; } }
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/*
  Placeholder hero: a floodlit gridiron seen from behind the end zone, drawn in CSS.
  Yard lines every 5 yards (10%), hash marks every yard (2%), sidelines either side.
  It stands in until a photograph is supplied, and it is structural in the same way
  the soccer site's pitch geometry is: lines, not illustration.
*/
.gridiron { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, #123063 0%, #071845 42%, var(--navy-deep) 78%); }
.field-wrap {
  position: absolute; left: 50%; bottom: -14%; width: 190vw; height: 110vh;
  transform: translateX(-50%); perspective: 900px; perspective-origin: 50% 0%;
  opacity: 0.9;
  /* The tilted field only fills the lower part of this box, so the fade has to run
     well past halfway or the far edge of the field shows as a hard horizontal line. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, #000 72%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, #000 72%);
}
.gridiron-field {
  position: absolute; inset: 0;
  transform: rotateX(64deg); transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0 3px, transparent 3px 10%),
    repeating-linear-gradient(180deg, #0a3b27 0 10%, #0e4a31 10% 20%);
}
.gridiron-field::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 14%; right: 14%;
  border-left: 5px solid rgba(255, 255, 255, 0.42); border-right: 5px solid rgba(255, 255, 255, 0.42);
}
.gridiron-field::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 40%; right: 40%;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0 2px, transparent 2px 2%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 6%, transparent 6% 94%, #000 94%);
  mask-image: linear-gradient(90deg, #000 0 6%, transparent 6% 94%, #000 94%);
}
/* Sport-neutral placeholder: two floodlight glows over the navy sky, and the brand's
   crest as a large, near-invisible watermark behind the headline. */
.hero-plain {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(55% 45% at 10% -5%, rgba(255, 255, 255, 0.12), transparent 70%),
    radial-gradient(55% 45% at 90% -5%, rgba(255, 255, 255, 0.12), transparent 70%),
    radial-gradient(120% 80% at 50% -10%, #123063 0%, #071845 42%, var(--navy-deep) 78%);
}
.hero-plain img {
  position: absolute; left: 50%; top: 50%; width: min(760px, 92vw); height: auto;
  transform: translate(-50%, -46%); opacity: 0.07; filter: grayscale(1) brightness(1.8);
}
.hero--placeholder .hero-scrim {
  background: linear-gradient(180deg, rgba(1, 8, 31, 0.55) 0%, rgba(2, 14, 56, 0.25) 45%, rgba(1, 8, 31, 0.8) 100%);
}

/* -------------------------------------------------------------- sections */
.section { padding: 72px 0; }
@media (min-width: 1024px) { .section { padding: 88px 0; } }
.section--tint { background: var(--tint); }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 12px; }
.h2 { font-size: 34px; line-height: 1; font-weight: 700; color: var(--navy); }
@media (min-width: 640px) { .h2 { font-size: 48px; } }
.section-intro { color: var(--mute); margin: 16px auto 0; max-width: 672px; }

.grid { display: grid; gap: 20px; }
/* Three cards stay one column until they fit three across: a 2-up step would leave
   the third card alone on its own row. */
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.lift { transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.lift:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12); }

/* Audience cards: the soccer site's dark router cards. */
.card-dark { display: flex; flex-direction: column; background: var(--surface); color: #fff; border-radius: 24px; padding: 36px; }
.card-dark .eyebrow-sm { margin-bottom: 12px; }
.card-dark h3 { font-size: 30px; line-height: 36px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.01em; }
.card-dark p { color: rgba(255, 255, 255, 0.7); margin-bottom: 28px; max-width: 448px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chips li { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 14px; line-height: 20px; font-weight: 500; }
.card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: #fff; }
.card-link .ico { width: 16px; height: 16px; transition: transform 0.2s; }
.card-link:hover { color: var(--gold); }
.card-link:hover .ico { transform: translateX(3px); }

/* Pathway steps: colour-coded bars, EPAC Club style for the last step. */
.card-step { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.bar { height: 6px; width: 48px; border-radius: 999px; margin-bottom: 28px; }
.bar-blue { background: var(--blue); }
.bar-red { background: var(--red); }
.bar-gold { background: var(--gold); }
.card-step .eyebrow-sm { margin-bottom: 8px; }
.card-step h3 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--navy); margin-bottom: 12px; }
.card-step p { font-size: 14px; line-height: 20px; color: var(--slate); }
.card-step--dark { background: var(--navy); border-color: var(--navy); }
.card-step--dark .bar { background: rgba(255, 255, 255, 0.3); }
.card-step--dark .eyebrow-sm { color: rgba(255, 255, 255, 0.55); }
.card-step--dark h3 { color: #fff; }
.card-step--dark p { color: rgba(255, 255, 255, 0.75); }

/* Programmes. */
.card-prog { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.badge { width: 48px; height: 48px; border-radius: 16px; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.badge .ico { width: 24px; height: 24px; }
.card-prog h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.card-prog p { font-size: 14px; line-height: 22px; color: var(--slate); }

.model { margin-top: 44px; text-align: center; font-size: 15px; color: var(--slate); }
.model a { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; color: var(--red); font-weight: 600; }
.model a .ico { width: 16px; height: 16px; }
.model a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- enquiry */
.enquire { background: var(--navy); color: #fff; padding: 80px 0; }
@media (min-width: 640px) { .enquire { padding: 96px 0; } }
.enquire-in { max-width: 672px; margin: 0 auto; padding: 0 24px; text-align: center; }
.enquire .eyebrow-sm { margin-bottom: 12px; }
.h2-enquire { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-bottom: 16px; }
@media (min-width: 640px) { .h2-enquire { font-size: 36px; line-height: 40px; } }
.enquire-body { color: rgba(255, 255, 255, 0.75); margin-bottom: 32px; }

.form, .form-done { background: #fff; border-radius: 24px; padding: 24px; text-align: left; color: var(--slate); }
@media (min-width: 640px) { .form { padding: 28px; } }
.form { position: relative; }
.label { display: block; margin-bottom: 6px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.2px; color: var(--navy); }
.types { border: 0; padding: 0; min-width: 0; margin-bottom: 16px; }
.types legend { padding: 0; margin-bottom: 8px; }
.type-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.type { position: relative; cursor: pointer; }
.type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type span {
  display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--field);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--slate);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.type:hover span { border-color: var(--navy); }
.type input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.type input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.field { display: block; margin-bottom: 12px; }
.row-2 { display: grid; gap: 12px; margin-bottom: 12px; }
.row-2 .field { margin-bottom: 0; }
@media (min-width: 640px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.input { width: 100%; border: 1px solid var(--field); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 20px; color: var(--slate); background: #fff; }
.input::placeholder { color: #94a3b8; }
.input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(2, 14, 56, 0.12); }
textarea.input { resize: vertical; min-height: 104px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Turnstile spam check. Reserving its height stops the button jumping when it loads. */
.cf-turnstile { margin: 4px 0 12px; min-height: 65px; }
.form-error { margin-bottom: 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--red); }
.form-privacy { margin-top: 12px; text-align: center; font-size: 12px; line-height: 18px; color: var(--mute); }

.form-done { text-align: center; padding: 36px 28px; }
.form-done:focus { outline: none; }
.done-icon { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 999px; background: rgba(227, 6, 19, 0.1); color: var(--red); display: flex; align-items: center; justify-content: center; }
.done-icon .ico { width: 24px; height: 24px; }
.form-done h3 { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.form-done p { font-size: 14px; line-height: 20px; color: var(--slate); }
.form-done .preview-note { display: inline-block; margin-top: 16px; padding: 6px 12px; border-radius: 8px; background: #fff4d6; color: #7a5600; font-size: 12px; font-weight: 600; }

/* ---------------------------------------------------------------- footer */
.ftr { background: var(--surface); color: rgba(255, 255, 255, 0.7); }
.ftr-grid { display: grid; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) { .ftr-grid { grid-template-columns: 2fr 1fr 1fr; } }
.ftr-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #fff; }
.ftr-brand img { width: 40px; height: 40px; object-fit: contain; }
.ftr-brand b { font-weight: 700; }
.ftr p, .ftr li { font-size: 14px; line-height: 20px; }
.ftr-h { margin-bottom: 12px; font-size: 14px; font-weight: 600; color: #fff; }
.ftr ul { display: grid; gap: 8px; }
.ftr a:hover { color: #fff; }
.ftr-legal { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 24px; text-align: center; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.5); }

/* ---------------------------------------------------------------- motion */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue .ico { animation: none; }
  .btn-red:hover { transform: none; }
}