/* MuddyStuds brand overrides on top of Bootstrap 5.3.3 */
:root{--ink:#111111;--chalk:#f5f5f5;--sun:#f3ebd8;--sun-hover:#d9cdb0;/* site accent = "Muddy" cream (Steve 2 Nov 2026); Studs yellow only in wordmark art */--mud:#6b4a2f;
  --bs-body-bg:#111111;--bs-body-color:#f5f5f5;--bs-link-color:#f3ebd8;--bs-link-hover-color:#d9cdb0;
  --bs-link-color-rgb:243,235,216;--bs-link-hover-color-rgb:217,205,176}
html,body{height:100%}
body{
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--chalk);
  background:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:clamp(2rem,6vh,4rem);
  padding-bottom:3rem;
  gap:clamp(1.4rem,3vh,2.2rem);
}
main.container{/* suite container parity with Touchline: Bootstrap .container widths (1320px @xxl) — 20261102cw */}
.hero{
  width:min(920px,100%);
  display:block;
  height:auto;
  border-radius:12px;
}
.tag{
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  max-width:34rem;
  line-height:1.55;
  opacity:.92;
  margin:0;
}
.soon{
  display:inline-block;
  padding:.55rem 1.25rem;
  border:2px solid var(--sun);
  border-radius:999px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.8rem;
  color:var(--sun);
}
.who{
  font-size:.98rem;
  opacity:.8;
  max-width:30rem;
  line-height:1.6;
  margin:0;
}
.products{
  --bs-gutter-x:1rem;
  --bs-gutter-y:1rem;
  /* Bootstrap .row uses negative side margins; widen by one gutter so cards line up with the hero */
  width:calc(100% + var(--bs-gutter-x)); /* full container width, Touchline parity (20261102cw) */
  padding:0;
  list-style:none;
  text-align:left;
}
/* ---- Product cards: each wears its own product brand ---- */
.products .brand-card{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:var(--chalk);
  border:1px solid rgba(245,245,245,.18);
  background:#1a1a1a;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.products .brand-card:hover,
.products .brand-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.products .brand-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:6.5rem;
  padding:1.1rem 1.25rem;
}
/* Card brand art: icon+wordmark lockups (icon = full word ink height incl. descenders), tight-cropped, ONE shared height (20261102lock) */
.products .brand-logo img{display:block;height:56px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:575.98px){.products .brand-logo img{height:36px}}
.products .card-body{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;flex:1}
.products h2{font-size:1.5rem;font-weight:700;margin:0;letter-spacing:.01em}
.products .status{
  align-self:stretch;display:block;width:100%;text-align:center;box-sizing:border-box;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.28rem .65rem;
  border-radius:999px;
  margin-bottom:.7rem;
}
.products p{font-size:.92rem;line-height:1.5;margin:0 0 .5rem}
.products .card-bullets{flex:1;list-style:none;margin:0 0 .9rem;padding:0;font-size:.87rem;line-height:1.45;opacity:.85}
.products .card-bullets li{position:relative;padding-left:1rem;margin:.15rem 0}
.products .card-bullets li::before{content:"✓";position:absolute;left:0;font-weight:700}
.products .brand-link{font-size:.9rem;font-weight:700}

/* Touchline — touchlineapp.co.uk: pitch-dark, brand green #558B2F, grass #2E8B57 */
.products .brand-touchline{
  --tl-green:#558B2F;--tl-green-hover:#6BA03A;--tl-grass:#2E8B57;--tl-mint:#a5d6a7;
  background-color:#0A0A0A;
  background-image:
    linear-gradient(180deg,rgba(85,139,47,.16) 0%,transparent 55%),
    linear-gradient(rgba(46,139,87,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,139,87,.06) 1px,transparent 1px);
  background-size:auto,24px 24px,24px 24px;
  border:1px solid rgba(85,139,47,.55);
  border-top:4px solid var(--tl-green);
  color:#F5F5F5;
}
.products .brand-touchline .brand-logo{background:rgba(10,10,10,.92);border-bottom:1px solid rgba(85,139,47,.35)}
.products .brand-touchline .status{background:var(--tl-green);color:#fff}
.products .brand-touchline p,.products .brand-touchline .card-bullets{color:#cfd8c9}
.products .brand-touchline .brand-link{color:var(--tl-grass)}
.products .brand-touchline:hover,.products .brand-touchline:focus-visible{border-color:var(--tl-green-hover);box-shadow:0 10px 28px rgba(46,139,87,.35)}
.products .brand-touchline:hover .brand-link{color:var(--tl-green-hover)}

/* Match Referee — matchreferee.co.uk: lockup v4 (nested rings). Black, teal #0D7377 outer ring,
   Touchline green #558B2F + Whistle amber #f8ac01 inner rings, white centre stripe on wordmark */
.products .brand-matchref{
  --mr-teal:#0D7377;--mr-teal-hover:#14919B;--mr-teal-text:#4FC3C9;--mr-green:#558B2F;--mr-amber:#f8ac01;
  background-color:#000;
  /* t617u motif: concentric referee rings radiating from the top-right corner (echoes nested-ring mark) */
  background-image:
    linear-gradient(180deg,rgba(13,115,119,.2) 0%,transparent 55%),
    repeating-radial-gradient(circle at 100% 0%,transparent 0 23px,rgba(20,145,155,.075) 23px 24px);
  background-size:auto,auto;
  border:1px solid rgba(13,115,119,.6);
  border-top:4px solid var(--mr-teal);
  color:#F5F5F5;
}
.products .brand-matchref .brand-logo{background:#000;border-bottom:1px solid rgba(13,115,119,.4);position:relative}
.products .brand-matchref .status{background:var(--mr-teal);color:#fff}
.products .brand-matchref p,.products .brand-matchref .card-bullets{color:#cfe0df}
.products .brand-matchref .brand-link{color:var(--mr-teal-text)}
.products .brand-matchref:hover .brand-link{color:#7AD6DA}
.products .brand-matchref:hover,.products .brand-matchref:focus-visible{border-color:var(--mr-teal-hover);box-shadow:0 10px 28px rgba(13,115,119,.4)}

/* Pro Club Manager — proclubmanager.co.uk: club platform, black + indigo #6366F1 */
.products .brand-pcm{
  --pcm-indigo:#6366F1;--pcm-indigo-hover:#818CF8;--pcm-indigo-text:#A5B4FC;
  background-color:#05050c;
  /* t617u motif: club timetable — 24px rows, 72px day columns, alternate-column shading */
  background-image:
    linear-gradient(180deg,rgba(99,102,241,.2) 0%,transparent 55%),
    linear-gradient(rgba(129,140,248,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(129,140,248,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,.035) 50%,transparent 50%);
  background-size:auto,100% 24px,72px 100%,144px 100%;
  border:1px solid rgba(99,102,241,.55);
  border-top:4px solid var(--pcm-indigo);
  color:#F5F5F5;
}
.products .brand-pcm .brand-logo{background:#05050c;border-bottom:1px solid rgba(99,102,241,.35)}
.products .brand-pcm .status{background:var(--pcm-indigo);color:#fff}
.products .brand-pcm p,.products .brand-pcm .card-bullets{color:#d4d5ee}
.products .brand-pcm .brand-link{color:var(--pcm-indigo-text)}
.products .brand-pcm:hover .brand-link{color:#C7D2FE}
.products .brand-pcm:hover,.products .brand-pcm:focus-visible{border-color:var(--pcm-indigo-hover);box-shadow:0 10px 28px rgba(99,102,241,.38)}

/* Whistle — whistleapp.co.uk: black, whistle Marigold #E8890C (t596u; was Tangerine #D96A10 / Brick #A3271B), white stripe */
.products .brand-whistle{
  --wh-amber:#E8890C;--wh-amber-hover:#F5A02A;
  background-color:#000;
  /* t617u motif: referee notepad — 24px ruled lines, left margin rule, faint diagonal hash, soft whistle-blast glow */
  background-image:
    linear-gradient(180deg,rgba(232,137,12,.14) 0%,transparent 55%),
    radial-gradient(ellipse 75% 45% at 100% 0%,rgba(245,160,42,.10),transparent 70%),
    linear-gradient(90deg,transparent 0 27px,rgba(245,160,42,.13) 27px 28px,transparent 28px),
    linear-gradient(rgba(232,137,12,.07) 1px,transparent 1px),
    repeating-linear-gradient(135deg,rgba(232,137,12,.03) 0 1px,transparent 1px 12px);
  background-size:auto,auto,auto,100% 24px,auto;
  border:1px solid rgba(232,137,12,.5);
  border-top:4px solid var(--wh-amber);
  color:#F5F5F5;
}
.products .brand-whistle .brand-logo{background:#000;border-bottom:1px solid rgba(232,137,12,.35);position:relative}
.products .brand-whistle .brand-logo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);opacity:.35}
.products .brand-whistle .status{background:var(--wh-amber);color:#000}
.products .brand-whistle p,.products .brand-whistle .card-bullets{color:#e2d8c4}
.products .brand-whistle .brand-link{color:var(--wh-amber-hover)}
.products .brand-whistle:hover{border-color:var(--wh-amber-hover);box-shadow:0 10px 28px rgba(232,137,12,.28)}

a{color:var(--sun);text-underline-offset:3px}
a:hover{color:var(--sun-hover)}

.social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin:0;
  padding:0;
}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:14px;
  border:1px solid var(--sun); /* muddy cream, matches the icon tile borders (t582u) */
  background:transparent;
  line-height:0;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.social-link img{
  width:56px;
  height:56px;
  display:block;
  border-radius:13px;
}
.social-link:hover,
.social-link:focus-visible{
  transform:translateY(-3px);
  border-color:var(--sun-hover);
  box-shadow:0 10px 28px rgba(243,235,216,.35);
  outline:none;
}
.social-link:focus-visible{
  box-shadow:0 10px 28px rgba(243,235,216,.35), 0 0 0 3px rgba(243,235,216,.45);
}



/* ---- Contact form ---- */
.contact-page{
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:1.5rem;
  padding-top:clamp(1.5rem,4vh,2.5rem);
  padding-bottom:2.5rem;
}
.contact-card{
  width:min(28rem,100%);
  text-align:left;
  background:#1a1a1a;
  border:1px solid rgba(243,235,216,.28);
  border-radius:16px;
  padding:1.6rem 1.4rem 1.5rem;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}
.contact-card--thanks{text-align:center}
.contact-mark{
  display:block;
  width:64px;
  height:64px;
  margin:0 auto 1rem;
}
.contact-title{
  font-size:clamp(1.5rem,3.5vw,1.85rem);
  font-weight:700;
  color:var(--sun);
  margin:0 0 .55rem;
  text-align:center;
}
.contact-lead{
  text-align:center;
  opacity:.85;
  margin:0 0 1.25rem;
  line-height:1.55;
  font-size:.98rem;
}
.contact-form .form-label{color:var(--chalk);font-weight:600;margin-bottom:.35rem}
.contact-form .form-control{
  background:#111;
  border:1px solid rgba(243,235,216,.28);
  color:var(--chalk);
  border-radius:.55rem;
  padding:.7rem .85rem;
}
.contact-form .form-control::placeholder{color:rgba(245,245,245,.4)}
.contact-form .form-control:focus{
  background:#111;
  color:var(--chalk);
  border-color:var(--sun);
  box-shadow:0 0 0 .2rem rgba(243,235,216,.25);
}
.contact-form textarea.form-control{resize:vertical;min-height:8rem}
.contact-form .honey{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.contact-social .social-link{width:48px;height:48px;border-radius:12px}
.contact-social .social-link img{width:48px;height:48px;border-radius:11px}
.btn-ms{
  background:var(--sun);
  border:1px solid var(--sun);
  color:#111;
  font-weight:700;
  border-radius:999px;
  padding:.7rem 1.4rem;
}
.btn-ms:hover,.btn-ms:focus-visible{
  background:var(--sun-hover);
  border-color:var(--sun-hover);
  color:#111;
}

footer{
  text-align:center;
  padding:1rem 1.25rem 1.4rem;
  font-size:.78rem;
  opacity:.65;
}

/* ---- Navbar: matches Touchline/Whistle chrome; static (no scroll-shrink) ---- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--sun);color:#000;padding:.5rem 1rem;z-index:10000;font-weight:700}
.skip-link:focus{left:.75rem;top:.75rem;color:#000}
.navbar-muddystuds{background:rgba(17,17,17,.92)!important;backdrop-filter:blur(10px);border-bottom:1px solid rgba(243,235,216,.25);padding-top:calc(.7rem - 4px);padding-bottom:calc(.7rem - 4px);z-index:1030;flex:0 0 auto;transition:box-shadow 280ms ease}
.navbar-muddystuds .container{display:flex;flex-wrap:wrap;align-items:center}
.navbar-muddystuds .navbar-brand{display:flex;align-items:center;flex:1 1 0%;min-width:0;margin-right:.5rem;padding:0}
.navbar-muddystuds .navbar-brand img{width:auto;height:48px;max-height:48px;max-width:100%;object-fit:contain;object-position:left center}
.navbar-muddystuds .navbar-toggler{flex:0 0 2.75rem;width:2.75rem;display:inline-flex;align-items:center;justify-content:center;padding-left:0;padding-right:0;border-color:rgba(245,245,245,.35)}
.navbar-muddystuds .navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(243,235,216,.4)}
.navbar-muddystuds .navbar-toggler-icon{margin:0 auto;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(245, 245, 245, 0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.navbar-muddystuds .nav-link{color:rgba(245,245,245,.72)!important;font-weight:500;padding:.5rem .85rem!important;border-radius:.4rem}
.navbar-muddystuds .nav-link:hover,.navbar-muddystuds .nav-link:focus-visible{color:var(--sun)!important}
.navbar-muddystuds .nav-link.active,.navbar-muddystuds .nav-link[aria-current="page"]{color:var(--chalk)!important;box-shadow:inset 0 -2px 0 var(--sun)}
@media (max-width:991.98px){
  .navbar-muddystuds .navbar-collapse{flex-basis:100%;width:100%}
  .navbar-muddystuds .navbar-collapse .navbar-nav{align-items:stretch!important;padding-top:.5rem;padding-bottom:.75rem}
  .navbar-muddystuds .navbar-collapse .nav-link{padding-left:.25rem!important;padding-right:.25rem!important}
  .navbar-muddystuds .navbar-collapse .nav-link.active,.navbar-muddystuds .navbar-collapse .nav-link[aria-current="page"]{box-shadow:inset 3px 0 0 var(--sun);padding-left:.75rem!important}
}
@media (min-width:992px){
  .navbar-muddystuds .navbar-toggler{display:none}
  .navbar-muddystuds .navbar-brand{flex:0 1 auto;margin-right:1.5rem;padding-right:.25rem}
  .navbar-muddystuds .container{flex-wrap:nowrap}
}
@media (min-width:992px) and (max-width:1199.98px){.navbar-muddystuds .navbar-brand{margin-right:1rem}}
@media (prefers-reduced-motion:reduce){.navbar-muddystuds{transition:none}}
/* Suite card lockups share ONE ring size (56px / 36px phone); PCM's 'g' hangs below the ring (20261102ring) */

/* Footer: suite links + company (2026-11-02) */
footer .footer-suite{margin-bottom:.35rem}
footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
footer a:hover,footer a:focus-visible{color:var(--sun)}