@import url('/assets/theme.css?v=20260917-1');

:root {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 20.8px;
  font-synthesis: weight;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  min-width: 320px;
  background-color: var(--paper);
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
p {
  line-height: 1.6;
}
h1,
h2,
h3 {
  font-weight: 600;
}
a {
  text-decoration: none;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  padding: 12px;
  background: var(--accent);
  color: var(--on-accent);
  z-index: 30;
}
.skip-link:focus {
  top: 10px;
}
/* Decorative motif down the left and right page edges. Anchored to <main> so the
   masthead and footer, which are siblings of it, stay full-bleed.
   The source strip is 201x4401, shown as one --edge-motif-width column per edge (45px,
   so the motif reads at ~22%) and tiled vertically to reach any content height. Two
   layers are needed because one background image cannot sit at two positions.
   flow-root keeps the first and last children's margins inside <main>; without it they
   collapse through and drag the box away from the header and footer, leaving the
   motif unpainted in a gap at each end. */
main {
  display: flow-root;
  --edge-motif-width: 45px;
  /* Set to <1 only where <main> is zoomed, so the strip keeps its intended on-screen
     width instead of shrinking along with the content. */
  --edge-motif-zoom: 1;
  /* Breathing room between the motif and the content beside it. */
  --edge-gutter: 20px;
  /* Inset every child clear of the motif. The motif is painted in the padding box, so
     this moves the content inward and leaves the strips pinned to the page edges. */
  padding-inline: calc(var(--edge-motif-width) + var(--edge-gutter));
  background-image:
    url('/assets/images/motif-vertical.png'), url('/assets/images/motif-vertical.png');
  background-repeat: repeat-y;
  background-position:
    left top,
    right top;
  background-size:
    calc(var(--edge-motif-width) / var(--edge-motif-zoom)) auto,
    calc(var(--edge-motif-width) / var(--edge-motif-zoom)) auto;
}
/* Narrower viewports cannot spare the full-width strip without crowding the content, so
   it tapers down to keep the motif present on phones too. The columns stay a background,
   so narrowing them never reflows the content. */
@media (max-width: 1280px) {
  main {
    --edge-motif-width: 34px;
  }
}
@media (max-width: 900px) {
  main {
    --edge-motif-width: 24px;
  }
}
@media (max-width: 480px) {
  main {
    --edge-motif-width: 20px;
  }
}
/* Now that the motif is present on phones, shrink the content to give it room. Every
   size in this file is px (no rem anywhere), so there is no single font-size to step
   down; zoom scales the whole box uniformly instead of editing hundreds of values. It is
   used rather than transform: scale() because it reflows layout, leaving text crisp and
   hit targets correctly sized. 0.8333 is 1/1.2, a 16.7% reduction. */
@media (max-width: 767px) {
  main {
    zoom: 0.8333;
    --edge-motif-zoom: 0.8333;
  }
}
.masthead {
  height: 80px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(28.6px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.5vw, 48px);
  background: var(--accent);
  color: var(--on-accent);
}
.masthead-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
}
.wordmark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 9px;
  /* Fluid so the full "RONB Corporate Championship" wordmark keeps its share of
     the bar between the fixed-height steps below. */
  font-size: clamp(20px, 2.5vw, 29.9px);
  font-weight: 600;
  letter-spacing: -1px;
}
.masthead-presents {
  flex-shrink: 0;
  font-size: clamp(14px, 1.4vw, 18px);
  font-style: italic;
  font-weight: 500;
}
/* Partner mark shown in the masthead slot the section nav used to occupy. Sized by
   height so its 1185x471 aspect ratio is preserved; max-width stops it from ever
   pushing the wordmark or the register button out of the 80px bar. */
.masthead-logo {
  display: block;
  flex-shrink: 0;
  height: clamp(34px, 4.4vw, 46px);
  width: auto;
  max-width: 34vw;
}
.text-link:hover {
  color: var(--on-accent);
  text-decoration: underline;
}
.masthead-link {
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid var(--on-accent);
  border-radius: 100px;
  padding: 12px 19px;
  font-weight: 600;
  font-size: 18.2px;
  background: var(--on-accent);
  color: var(--accent);
}
.masthead-link span {
  margin-left: 12px;
}
.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 48px;
  max-width: 1360px;
  margin: 56px auto 40px;
  padding: 0 clamp(28.6px, 4vw, 48px);
  text-align: center;
  min-height: 0;
}
.hero-copy {
  min-width: 0;
  text-align: center;
}
.hero-visual {
  min-width: 0;
  display: block;
  width: 100%;
  height: auto;
}
.hero-logo-mobile {
  display: none;
}
@media (min-width: 768px) {
  .hero-visual {
    transform: scale(1.2);
  }
}
.hero-copy .eyebrow {
  font-size: 23.4px;
}
.eyebrow {
  color: var(--accent);
  font-size: 15.6px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
/* Presenter mark inside the hero eyebrow. It sits on its own line with "presents"
   beneath it, so it is block-level and centred by auto margins rather than inline.
   Sized in em so it tracks the eyebrow's font-size across every breakpoint; the source
   is 1185x471, so width stays in ratio. */
.presenter-mark {
  display: block;
  height: 3.3em;
  width: auto;
  margin: 0 auto 0.32em;
}
.presenter-word {
  display: block;
}
.hero-title {
  font-family: VarsityTeam, Ultimate, sans-serif;
  font-weight: 700;
  /* Capped at 75.6px rather than 86.4px: the hero's max-width stops the copy column
     growing past ~608px, so a larger font makes "RONB Corporate" run into the logo
     visual at >=1500px. Below 1400px the 5.4vw term governs and is unaffected. */
  font-size: clamp(38.4px, 5.4vw, 75.6px);
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.04;
  margin-bottom: 24px;
  /* "RONB Corporate" is the widest line and must never break, so the <br> below it is
     the only wrap point. nowrap stops it silently reflowing to three lines; the
     font-size clamps at each breakpoint are sized to keep it inside .hero-copy. */
  white-space: nowrap;
}
.hero-title span {
  color: var(--accent);
}
.hero-sub {
  font-size: 20.4px;
  max-width: 440px;
  margin: 0 auto 28px;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
}
.hero-actions .button,
.hero-actions .text-link {
  font-size: 19.5px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 49px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 13px 23px;
  color: var(--ink);
  background: var(--white);
  font-size: 19.5px;
  font-weight: 600;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 16px rgb(35 30 31 / 0.1);
}
.button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.button:active {
  transform: scale(0.97);
}
.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.text-link {
  font-size: 19.5px;
  font-weight: 600;
}
.text-link span {
  margin-left: 8px;
}
.hero-note {
  margin: 34px auto 0;
  font-family: VarsityTeam, Ultimate, sans-serif;
  font-weight: 700;
  font-size: clamp(31.2px, 2.88vw, 53.04px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}
.event-strip {
  margin: 0;
  /* Full-bleed like the masthead and footer, so it cancels <main>'s content inset. Its
     own padding still clears the motif. width must stay auto: width:100% resolves against
     the containing block and would ignore the negative margins, leaving a gap on the
     right. */
  margin-inline: calc(-1 * (var(--edge-motif-width) + var(--edge-gutter)));
  width: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #e8233c;
  border-top: 1px solid #e8233c;
  border-bottom: 1px solid #e8233c;
  padding: 25px clamp(28.6px, 4vw, 48px);
  padding-inline: max(clamp(28.6px, 4vw, 48px), calc(var(--edge-motif-width) + var(--edge-gutter)));
  gap: 35px;
}
.event-strip div {
  display: grid;
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  align-content: center;
  justify-items: start;
  gap: 6px;
  text-align: left;
}
.event-strip span {
  font-size: 15.6px;
  color: rgba(255, 255, 255, 0.75);
}
.event-strip strong {
  font-size: 23.4px;
  font-weight: 600;
  color: #fff;
}
.section {
  max-width: 1264px;
  margin: auto;
  padding: 88px 0;
  scroll-margin-top: 20px;
}
.section-header {
  margin-bottom: 35px;
  max-width: 650px;
}
.section-header .eyebrow {
  margin-bottom: 12px;
}
.section-title,
h2 {
  font-size: clamp(37.7px, 3vw, 55.9px);
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin-bottom: 17px;
}
.section-intro {
  color: var(--muted);
  font-size: 22.1px;
  max-width: 520px;
}
.sport-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.sport {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--accent-hover);
  border-radius: 20px;
  background: var(--accent);
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    background-color 0.3s;
}
.sport-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 28px;
}
.sport-format {
  font-size: 15px;
  color: var(--on-accent);
  opacity: 0.85;
}
.sport-symbol {
  position: absolute;
  z-index: 0;
  right: -34px;
  bottom: -40px;
  font-size: 143.8px;
  line-height: 1;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.5);
}
.sport-cricksal .sport-symbol {
  right: -34px;
  bottom: -40px;
  width: 146.1px;
  height: 146.1px;
  object-fit: contain;
}
.sport > :not(.sport-symbol) {
  position: relative;
  z-index: 1;
}
.sport:hover {
  transform: translateY(-7px);
  background-color: var(--accent-hover);
  box-shadow: 0 14px 35px rgb(120 30 30 / 0.28);
}
.sport:hover .sport-symbol {
  transform: translate(-12px, -18px) rotate(18deg);
}
.sport h3 {
  font-size: 32.2px;
  letter-spacing: -0.7px;
  color: var(--on-accent);
  margin-bottom: 12px;
}
.sport p {
  color: var(--on-accent);
  opacity: 0.85;
  font-size: 18.4px;
  min-height: 76px;
  max-width: 290px;
}
.sport-link {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16.1px;
  font-weight: 600;
  color: var(--on-accent);
  margin-top: 26px;
}
.section-note {
  color: var(--muted);
  font-size: 18.2px;
  margin: 22px 0 0;
}
.team-story {
  background: var(--accent);
  border: 1px solid var(--accent-hover);
  border-radius: 24px;
  padding: 55px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 90px;
}
.team-story .eyebrow {
  grid-column: 1/-1;
  color: var(--on-accent);
  opacity: 0.85;
  margin-bottom: 16px;
}
.team-story h2 {
  grid-row: 2/4;
  margin: 0;
  font-size: 54.6px;
  color: var(--on-accent);
}
.team-story > p:not(.eyebrow) {
  font-size: 23.4px;
  color: var(--on-accent);
  opacity: 0.85;
  margin-bottom: 18px;
}
.team-story .text-link {
  color: var(--on-accent);
}
.teams-shell {
  border: 1px solid var(--tab-dark, var(--accent-hover));
  border-radius: 20px;
  padding: 20px;
  background: var(--tab-color, var(--accent));
}
.team-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
  padding-bottom: 18px;
}
.team-tabs button {
  background: transparent;
  border: 0;
  color: var(--on-accent);
  opacity: 0.8;
  padding: 11px 22px;
  border-radius: 100px;
  font-size: 19.5px;
  min-height: 44px;
  white-space: nowrap;
}
.team-tabs button[aria-selected='true'] {
  background: var(--on-accent);
  color: var(--tab-color, var(--accent));
  opacity: 1;
  font-weight: 600;
}
.team-count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 15.6px;
  font-weight: 700;
  background: rgb(255 255 255 / 0.2);
  color: var(--on-accent);
}
.team-tabs button[aria-selected='true'] .team-count {
  background: var(--tab-color, var(--accent));
  color: var(--on-accent);
}
.team-list {
  min-height: 155px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.team-list.switching {
  opacity: 0;
  transform: translateY(6px);
}
.teams-state {
  grid-column: 1/-1;
  text-align: center;
  color: var(--on-accent);
  opacity: 0.85;
  padding: 28px;
  max-width: 580px;
  margin: auto;
}
.team {
  min-width: 0;
  padding: 24px 12px;
  text-align: center;
}
.team-name {
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--on-accent);
  margin-bottom: 8px;
}
.team-logo {
  display: block;
  height: 100px;
  width: 100px;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 16px;
}
.venue-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  padding-top: 25px;
}
.venue-date {
  border-radius: 24px;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.venue-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 22.1px;
  max-width: 400px;
  margin-bottom: 28px;
}
.faq-section {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 70px;
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}
.faq details:first-child {
  padding-top: 0;
}
.faq summary {
  font-size: 23.4px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:after {
  content: '+';
  font-size: 31.2px;
}
.faq details[open] summary:after {
  content: '−';
}
.faq p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 20.8px;
  max-width: 60ch;
}
.closing {
  background: var(--accent);
  border: 1px solid var(--accent-hover);
  text-align: center;
  border-radius: 24px;
  padding: 60px 24px;
  margin-bottom: 55px;
}
.closing .eyebrow {
  color: var(--on-accent);
  opacity: 0.85;
}
.closing h2 {
  font-size: clamp(44.2px, 4vw, 65px);
  color: var(--on-accent);
  margin-bottom: 28px;
}
.closing .button.primary {
  background: var(--on-accent);
  color: var(--accent);
  border-color: var(--on-accent);
}
.closing .button.primary:hover {
  background: hsl(0 0% 95%);
  border-color: hsl(0 0% 95%);
}
.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px clamp(28.6px, 4vw, 48px) 35px;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 18.2px;
  background: var(--accent);
  color: var(--on-accent);
}
.site-footer p {
  margin: 0;
}
.page-register {
  max-width: 1080px;
  margin: 30px auto 80px;
  padding: 0 28px;
}
.registration-header {
  padding: 45px 0;
}
.registration-header h1 {
  font-size: 72.8px;
  letter-spacing: -2px;
  line-height: 1.08;
  margin: 0;
}
.registration-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
}
.registration-aside {
  padding: 28px;
  background: var(--tint);
  font-size: 18.2px;
}
.steps {
  padding: 0;
  list-style: none;
  margin-top: 30px;
}
.steps li {
  padding: 14px 0;
  color: var(--muted);
}
.steps li.active {
  font-weight: 600;
  color: var(--accent);
}
.registration-content {
  padding: 40px;
  min-width: 0;
}
.registration-content h2 {
  font-size: 41.6px;
}
.registration-content > p {
  color: var(--muted);
}
.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.form-stack,
.choice-list {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}
.input-group {
  display: grid;
  gap: 8px;
  font-size: 18.2px;
}
.input-group input,
.input-group select,
.sport-choice input[data-team] {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--input-rule);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  padding: 12px;
  font-size: 20.8px;
}
.sport-choice {
  padding: 20px;
  background: var(--tint);
  border-radius: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
}
.sport-choice strong,
.sport-choice span {
  display: block;
  margin-bottom: 10px;
}
.sport-choice input[type='radio'],
.sport-choice input[type='checkbox'] {
  accent-color: var(--accent);
  width: 20px;
  height: 20px;
}
.sport-choice.is-full {
  background: var(--tint);
  opacity: 0.55;
}
.sport-choice.is-full .sport-choice-label {
  cursor: not-allowed;
}
.sport-choice.is-full input[type='radio'],
.sport-choice.is-full input[type='checkbox'] {
  accent-color: var(--muted);
  cursor: not-allowed;
}
.sport-choice .slots-filled {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 15.6px;
}
.sport-choice .registered-state {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 15.6px;
}
.sport-choice.is-registered .sport-choice-label {
  cursor: not-allowed;
}
.sport-choice.is-registered input[type='radio'],
.sport-choice.is-registered input[type='checkbox'] {
  accent-color: var(--muted);
  cursor: not-allowed;
}
.sport-choice.is-verified {
  background: var(--verified-soft);
}
.sport-choice.is-verified .registered-state {
  color: var(--verified);
}
.sport-choice.is-pending {
  background: var(--pending-soft);
}
.sport-choice.is-pending .registered-state {
  color: var(--pending);
}
.sport-choice .sport-choice-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sport-choice .sport-choice-price > span {
  margin-bottom: 0;
}
.sport-choice .sport-choice-vat {
  color: var(--muted);
  font-size: 15.6px;
  opacity: 0.8;
  white-space: nowrap;
}
.sport-choice-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.sport-choice .sport-choice-copy,
.sport-choice-copy > span {
  margin-bottom: 0;
}
.sport-choice .sport-choice-icon {
  width: 48px;
  height: 48px;
  margin: 0;
  object-fit: contain;
  font-size: 42px;
  line-height: 48px;
  text-align: center;
  pointer-events: none;
}
.info-box {
  padding: 20px;
  background: var(--tint);
  border-radius: 14px;
  line-height: 1.6;
  margin: 24px 0;
}
.info-box code {
  color: var(--accent);
  font-weight: 700;
  background: oklch(0.52 0.2 25 / 0.1);
  padding: 2px 6px;
  border-radius: 6px;
}
.info-box .incl-vat {
  margin-left: 6px;
}
.registration-panel {
  margin: 24px 0;
}
.registration-panel > h3 {
  margin-bottom: 12px;
}
.sport-accordion {
  display: grid;
  gap: 10px;
}
.registration-sport {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--white);
}
.registration-sport[open] {
  border-color: var(--ink);
}
/* Capacity reached: the whole card is greyed out and the register action is closed. */
.registration-sport.is-full {
  background: var(--tint);
}
.registration-sport.is-full .registration-sport-icon .sport-choice-icon {
  filter: grayscale(1);
  opacity: 0.6;
}
.registration-sport.is-full .button[disabled]:hover {
  transform: none;
  box-shadow: none;
}
.registration-sport .slots-filled {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.registration-sport summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.registration-sport summary::-webkit-details-marker {
  display: none;
}
.registration-sport summary:hover {
  background: var(--tint);
}
.registration-sport summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.registration-sport-icon .sport-choice-icon {
  width: 40px;
  height: 40px;
  margin: 0;
  font-size: 36px;
  line-height: 40px;
  text-align: center;
}
.registration-sport-copy {
  display: grid;
  gap: 2px;
}
.registration-sport-copy > strong {
  font-size: 20px;
}
.registration-sport-copy > span {
  font-size: 14px;
  font-weight: 600;
}
.registration-sport-chevron {
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  transition: transform 160ms ease;
}
.registration-sport[open] .registration-sport-chevron {
  transform: rotate(180deg);
}
.registration-sport-content {
  padding: 0 16px 16px 74px;
}
.registration-sport-content > p {
  margin: 0 0 14px;
  color: var(--muted);
}
.registration-sport-content .registration-summary {
  margin: 0;
}
@media (max-width: 540px) {
  .registration-sport-content {
    padding-left: 16px;
  }
}
.registration-summary h3,
.registration-summary .team-name,
.registration-summary .registered-state {
  display: inline-block;
  margin: 0 0 4px;
}
.registration-summary h3 {
  margin-right: 8px;
}
.registration-summary .team-name {
  color: var(--ink);
  font-weight: 600;
}
.registration-summary .registered-state {
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 15.6px;
  font-weight: 600;
}
.registration-summary .registered-state.is-verified {
  color: var(--verified);
}
.registration-summary .registered-state.is-pending {
  color: var(--pending);
}
.registration-summary .captain-line {
  margin-top: 12px;
}
.registration-summary .roster-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.registration-summary .roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.roster-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.roster-photo-none {
  display: block;
  border: 1.5px dashed var(--rule);
  background: var(--tint);
}
.roster-name {
  margin-right: auto;
  margin-left: 12px;
}
.captain-tag {
  color: var(--muted);
  font-size: 15.6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.jersey-badge {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--rule);
  background: var(--white);
  border-radius: 8px;
  font-size: 15.6px;
  font-weight: 700;
}
.remarks-copy {
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}
.remarks-label {
  color: var(--accent);
  font-weight: 700;
}
.error {
  color: var(--accent);
  background: var(--white);
  border: 1px solid var(--accent);
  padding: 14px;
  border-radius: 10px;
}
.bank-details {
  background: var(--tint);
  border-radius: 14px;
  padding: 22px;
  margin: 24px 0;
  white-space: pre-line;
  line-height: 1.8;
  font-weight: 600;
}
/* The payment details and the receipt upload share one screen now; the rule is where the
   transfer instructions end and the proof of payment begins. */
.receipt-rule {
  margin: 34px 0 26px;
  border-top: 1px solid var(--rule);
}
.incl-vat {
  color: var(--muted);
  font-size: 15.6px;
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: var(--accent);
  color: var(--on-accent);
  padding: 16px 24px;
  border-radius: 14px;
  z-index: 30;
}
.error-view {
  max-width: 900px;
  margin: 80px auto;
  padding: 24px;
}
.loading {
  padding: 45px;
  text-align: center;
  color: var(--muted);
}
/* Spinner primitives: any state that waits on the server shows one of these. */
.spinner {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
}
.loading::before,
.teams-state.is-loading::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 14px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.teams-state.is-loading {
  opacity: 1;
}
.button.is-busy::before {
  content: '';
  flex: none;
  width: 17px;
  height: 17px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.button.is-busy {
  cursor: progress;
}
.button.is-busy:hover {
  transform: none;
  box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
  .spinner,
  .loading::before,
  .teams-state.is-loading::before,
  .button.is-busy::before {
    animation: spinner-turn 0.75s linear infinite;
  }
  @keyframes spinner-turn {
    to {
      transform: rotate(360deg);
    }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy {
    animation: enter 0.8s both;
  }
  .hero-visual {
    animation: enter 0.8s both;
    animation-delay: 0.12s;
  }
  .reveal {
    opacity: 0;
    transform: translateY(34px) scale(0.985);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveal.revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .faq details[open] p {
    animation: enter 0.3s both;
  }
  @keyframes enter {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @supports (animation-timeline: view()) {
    .venue-map {
      animation: map-arrival linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
    @keyframes map-arrival {
      from {
        opacity: 0.15;
        transform: translateY(52px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}
@media (min-width: 1600px) {
  .hero {
    margin-top: 60px;
    margin-bottom: 65px;
  }
}
@media (max-width: 1360px) {
  .section,
  .site-footer {
    margin-left: 48px;
    margin-right: 48px;
  }
  .site-footer {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 1024px) {
  .masthead {
    padding: 0 24px;
    gap: 24px;
  }
  .masthead-logo {
    height: clamp(30px, 4vw, 40px);
    max-width: 30vw;
  }
  .masthead-link {
    font-size: 16px;
    padding: 12px 16px;
  }
  .hero {
    padding: 20px 32px;
  }
  .section,
  .site-footer {
    margin-left: 32px;
    margin-right: 32px;
  }
  .site-footer {
    margin-left: 0;
    margin-right: 0;
  }
  .hero-actions {
    gap: 16px;
  }
  .sport {
    padding: 22px;
  }
  .team-story {
    gap: 25px;
    padding: 40px;
  }
  .venue-section {
    gap: 40px;
  }
  .faq-section {
    gap: 35px;
  }
}
@media (max-width: 767px) {
  .masthead {
    height: 72px;
    padding: 0 16px;
    gap: clamp(12px, 3vw, 24px);
  }
  /* The old nav was hidden below this width. The mark is a brand element, so it
     stays visible and simply scales down instead. */
  .masthead-logo {
    height: clamp(24px, 6.5vw, 32px);
    max-width: 24vw;
  }
  .wordmark {
    font-size: 24px;
    gap: 7px;
  }
  .masthead-link {
    font-size: 15.6px;
    padding: 10px 14px;
  }
  .masthead-link span {
    margin-left: 5px;
  }
  .hero {
    grid-template-columns: 1fr;
    margin: 12px auto 28px;
    padding: 22px;
    gap: 32px;
    min-height: 0;
  }
  .hero-visual {
    display: none;
  }
  .hero-logo-mobile {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 22px;
  }
  .hero-title {
    font-size: clamp(44px, 9.5vw, 75.4px);
    letter-spacing: -1.7px;
  }
  .hero-copy .eyebrow {
    font-size: 23.4px;
    margin-bottom: 18px;
  }
  .hero-sub {
    font-size: 20.4px;
    max-width: 340px;
  }
  .hero-actions {
    margin-top: 24px;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .hero-actions .button {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }
  .hero-note {
    margin-top: 18px;
  }
  .section,
  .site-footer {
    margin-left: 22px;
    margin-right: 22px;
  }
  .site-footer {
    margin-left: 0;
    margin-right: 0;
  }
  .event-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    /* padding-block only: a `padding` shorthand here would reset the padding-inline that
       keeps the strip's text clear of the motif. */
    padding-block: 24px;
  }
  .event-strip strong {
    font-size: 18.2px;
  }
  .event-strip span {
    font-size: 14.3px;
  }
  .section {
    padding: 56px 0;
  }
  .sport-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sport {
    padding: 25px;
  }
  .sport-top {
    margin-bottom: 15px;
  }
  .sport p {
    min-height: 0;
    max-width: none;
  }
  .sport-link {
    margin-top: 15px;
  }
  .team-story {
    padding: 32px;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .team-story .eyebrow {
    grid-column: auto;
  }
  .team-story h2 {
    grid-row: auto;
    font-size: 44.2px;
    margin-bottom: 22px;
  }
  .team-story > p:not(.eyebrow) {
    font-size: 20.8px;
  }
  .team-tabs {
    flex-wrap: wrap;
    gap: 3px;
  }
  .team-tabs button {
    padding: 10px 14px;
    font-size: 18.2px;
  }
  .teams-shell {
    padding: 14px;
  }
  .team-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  .team {
    padding: 20px 4px;
  }
  .team-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 12px;
  }
  .team-name {
    font-size: 16px;
  }
  .venue-section {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 0;
  }
  .venue-date {
    border-radius: 20px;
  }
  .faq-section {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .faq summary {
    font-size: 22.1px;
  }
  .closing {
    padding: 40px 22px;
  }
  .site-footer {
    padding-top: 0;
  }
  .registration-layout {
    grid-template-columns: 1fr;
  }
  .registration-aside {
    padding: 22px;
  }
  .steps {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin: 12px 0 0;
  }
  .steps li {
    padding: 0;
    font-size: 15.6px;
  }
  .registration-content {
    padding: 25px;
  }
  .page-register {
    padding: 0 20px;
  }
  .registration-header h1 {
    font-size: 54.6px;
  }
  .registration-content h2 {
    font-size: 37.7px;
  }
}
@media (max-width: 380px) {
  .masthead {
    padding: 0 12px;
  }
  .masthead-link {
    font-size: 12px;
    padding: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .sport:hover,
  .sport:hover .sport-symbol,
  .button:hover {
    transform: none;
  }
}

/* Venue map uses the place identifier from the organizer-provided Google Maps URL. */
.venue-map {
  grid-column: 1 / -1;
  border: 1px solid var(--rule);
  border-radius: 24px;
  overflow: hidden;
  background: var(--tint);
}
.venue-map iframe {
  display: block;
  width: 100%;
  height: 390px;
  border: 0;
}
.venue-map p {
  margin: 0;
  padding: 16px 22px;
  font-size: 18.2px;
  color: var(--accent);
}
.venue-map a {
  color: var(--accent);
  text-decoration: underline;
}
.sport:nth-child(2) {
  background: var(--accent);
}
.sport:nth-child(3) {
  background: var(--accent);
}
.sport-grid .sport.sport-futsal {
  background: #2e7d32;
  border-color: #25652a;
}
.sport-grid .sport.sport-futsal:hover {
  background-color: #25652a;
}
.sport-grid .sport.sport-basketball {
  background: #b8865b;
  border-color: #9c6f44;
}
.sport-grid .sport.sport-basketball:hover {
  background-color: #9c6f44;
}
@media (max-width: 767px) {
  .venue-map iframe {
    height: 320px;
  }
}

.company-logo-preview {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
#company-logo-note {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
/* Shown the moment a file is picked and cleared when the server answers. */
.upload-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
}
.upload-status[hidden] {
  display: none;
}
form.is-loading input[type='file'] {
  cursor: progress;
  opacity: 0.7;
}
/* Review screen: the line pulses while it asks the server, and "Check now" skips the wait. */
.review-watch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.review-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
}
.review-status.is-checking {
  color: var(--ink);
}
#draft-status {
  color: var(--muted);
}

.roster-fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.roster-fields legend {
  margin-bottom: 12px;
}
.player-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 20px 0;
}
.player-fields > * {
  min-width: 0;
}
.player-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}
.player-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.player-photo-clear {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  /* Above .player-photo-pick (z-index 2), whose invisible file input would
     otherwise swallow the click and open the picker instead of removing. */
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.player-photo-clear[hidden] {
  display: none;
}
.player-photo-clear:hover {
  background: var(--danger, #c0392b);
}
.player-photo-clear:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.player-photo-preview,
.player-photo-placeholder {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}
.player-photo-placeholder {
  position: relative;
  border: 1.5px dashed var(--rule);
  background: var(--tint);
}
.player-photo-placeholder::before {
  content: '+';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 300;
  color: var(--muted);
}
.player-photo-pick {
  position: relative;
  display: block;
  width: 84px;
  height: 84px;
  margin-top: -84px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.player-photo-pick span {
  display: none;
}
.player-photo-pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.player-photo-pick:hover {
  background: rgba(255, 255, 255, 0.12);
}
.player-photo-pick:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.player-row.has-photo-error .player-photo-preview,
.player-row.has-photo-error .player-photo-placeholder {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.player-photo-error {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.jersey-selector {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.jersey-selector legend {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}
.jersey-options {
  display: flex;
  gap: 6px;
}
.jersey-options label {
  position: relative;
  cursor: pointer;
}
.jersey-options input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.jersey-options span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 48px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-weight: 600;
}
.jersey-options input:checked + span {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.jersey-options input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.jersey-options label:hover span {
  border-color: var(--accent);
}
.player-row .jersey-selector + .jersey-selector {
  grid-column: 3;
  margin-top: -14px;
}
.player-row .jersey-selector + .jersey-selector .jersey-options span {
  min-width: 92px;
  height: 42px;
  padding: 0 8px;
  border-radius: 10px;
  line-height: 1.05;
  text-align: center;
}
@media (max-width: 540px) {
  .player-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px 14px;
  }
  .player-row .jersey-selector {
    grid-column: 1 / -1;
  }
  .player-row .jersey-selector + .jersey-selector {
    grid-column: 1 / -1;
    margin-top: -4px;
  }
}
#captain-note {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
@media (max-width: 767px) {
  .player-fields {
    grid-template-columns: 1fr;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mobile type scale: every font size renders 15% smaller at phone widths. */
/* Values mirror the winning declaration for each selector at that width, x0.85. */
@media (max-width: 767px) {
  :root {
    font-size: 17.68px;
  }
  .eyebrow {
    font-size: 13.26px;
  }
  .hero-actions .text-link {
    font-size: 16.58px;
  }
  .button {
    font-size: 16.58px;
  }
  .text-link {
    font-size: 16.58px;
  }
  .hero-note {
    font-size: clamp(26.52px, 2.45vw, 45.08px);
  }
  .section-title {
    font-size: clamp(32.05px, 2.55vw, 47.52px);
  }
  h2 {
    font-size: clamp(32.05px, 2.55vw, 47.52px);
  }
  .section-intro {
    font-size: 18.79px;
  }
  .sport-format {
    font-size: 12.75px;
  }
  .sport-symbol {
    font-size: 122.23px;
  }
  .sport h3 {
    font-size: 27.37px;
  }
  .sport p {
    font-size: 15.64px;
  }
  .sport-link {
    font-size: 13.69px;
  }
  .section-note {
    font-size: 15.47px;
  }
  .team-count {
    font-size: 13.26px;
  }
  .venue-copy > p:not(.eyebrow) {
    font-size: 18.79px;
  }
  .faq summary:after {
    font-size: 26.52px;
  }
  .faq p {
    font-size: 17.68px;
  }
  .closing h2 {
    font-size: clamp(37.57px, 3.4vw, 55.25px);
  }
  .site-footer {
    font-size: 15.47px;
  }
  .registration-aside {
    font-size: 15.47px;
  }
  .input-group {
    font-size: 15.47px;
  }
  .input-group input {
    font-size: 17.68px;
  }
  .input-group select {
    font-size: 17.68px;
  }
  .sport-choice input[data-team] {
    font-size: 17.68px;
  }
  .sport-choice .slots-filled {
    font-size: 13.26px;
  }
  .sport-choice .registered-state {
    font-size: 13.26px;
  }
  .sport-choice .sport-choice-vat {
    font-size: 13.26px;
  }
  .incl-vat {
    font-size: 13.26px;
  }
  .sport-choice .sport-choice-icon {
    font-size: 35.7px;
  }
  .registration-sport-icon .sport-choice-icon {
    font-size: 30.6px;
  }
  .registration-sport-copy > strong {
    font-size: 17px;
  }
  .registration-sport-copy > span {
    font-size: 11.9px;
  }
  .registration-sport-chevron {
    font-size: 20.4px;
  }
  .registration-summary .registered-state {
    font-size: 13.26px;
  }
  .captain-tag {
    font-size: 13.26px;
  }
  .jersey-badge {
    font-size: 13.26px;
  }
  .masthead-logo {
    height: 26px;
    max-width: 24vw;
  }
  .wordmark {
    font-size: 20.4px;
  }
  .masthead-link {
    font-size: 13.26px;
  }
  /* Mobile header carries only the XTREME mark and the register button; the wordmark and
     "presents" are dropped. The mark is left-aligned and the button pushed right with
     margin-left:auto, so the mark can grow to fill the 72px bar's height instead of
     competing for horizontal room the way it did when it was centred. Height-only sizing
     preserves the 1185x471 ratio. 46px is the desktop maximum and still clears the bar. */
  .masthead {
    display: flex;
    justify-content: flex-start;
  }
  .masthead-link {
    margin-left: auto;
  }
  .masthead-logo {
    height: clamp(34px, 13vw, 46px);
    max-width: 40vw;
  }
  .wordmark,
  .masthead-presents {
    display: none;
  }
  .hero-title {
    font-size: clamp(37.4px, 8.07vw, 64.09px);
  }
  .hero-copy .eyebrow {
    font-size: 19.89px;
  }
  .hero-sub {
    font-size: 17.34px;
  }
  .hero-actions .button {
    font-size: 11.9px;
  }
  .event-strip strong {
    font-size: 15.47px;
  }
  .event-strip span {
    font-size: 12.16px;
  }
  .team-story h2 {
    font-size: 37.57px;
  }
  .team-story > p:not(.eyebrow) {
    font-size: 17.68px;
  }
  .team-tabs button {
    font-size: 15.47px;
  }
  .team-name {
    font-size: 13.6px;
  }
  .faq summary {
    font-size: 18.79px;
  }
  .steps li {
    font-size: 13.26px;
  }
  .registration-header h1 {
    font-size: 46.41px;
  }
  .registration-content h2 {
    font-size: 32.05px;
  }
  .venue-map p {
    font-size: 15.47px;
  }
  #company-logo-note {
    font-size: 13.6px;
  }
  .player-photo-clear {
    font-size: 12.75px;
  }
  .player-photo-placeholder::before {
    font-size: 25.5px;
  }
  .player-photo-pick {
    font-size: 11.05px;
  }
  .jersey-selector legend {
    font-size: 11.9px;
  }
  #captain-note {
    font-size: 13.6px;
  }
}

@media (max-width: 380px) {
  .masthead-link {
    font-size: 10.2px;
  }
}
.form-actions .button:disabled,
form.is-loading .button:disabled {
  cursor: wait;
  opacity: 0.68;
}
.jersey-badge small {
  display: block;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}
.jersey-sizing {
  margin: 14px 0 18px;
  overflow-x: auto;
}
.jersey-sizing strong {
  display: block;
  margin-bottom: 8px;
}
.jersey-sizing table {
  width: 100%;
  max-width: 360px;
  border-collapse: collapse;
  font-size: 13px;
}
.jersey-sizing th,
.jersey-sizing td {
  padding: 7px 10px;
  border: 1px solid var(--rule);
  text-align: left;
}
.jersey-sizing th {
  background: var(--tint);
  font-weight: 600;
}