.mobile-nav { display: none; }
.facility-card > img { height: 100%; inset: 0; object-fit: cover; opacity: .32; position: absolute; transition: transform .5s, opacity .25s; width: 100%; }
.facility-card:hover { box-shadow: 0 18px 30px rgba(16,20,21,.13); transform: translateY(-6px); }
.facility-card:hover > img { opacity: .47; transform: scale(1.06); }
.facility-card .card-number, .facility-card h3, .facility-card p, .facility-icon { z-index: 1; }
.facility-card .card-number { position: relative; }
.card-open { background: transparent; border: 1px solid currentColor; border-radius: 50%; color: inherit; cursor: pointer; font-size: 21px; height: 39px; line-height: 35px; position: absolute; right: 22px; text-align: center; top: 20px; transition: background .2s, color .2s; width: 39px; z-index: 2; }
.card-open:hover { background: var(--lime); color: var(--ink); }
.detail-dialog { background: var(--paper); border: 0; box-shadow: 0 22px 80px rgba(0,0,0,.35); color: var(--ink); max-width: 760px; padding: 0; width: calc(100% - 40px); }
.detail-dialog::backdrop { background: rgba(16,20,21,.72); }
.detail-dialog > img { display: block; height: 280px; object-fit: cover; width: 100%; }
.dialog-copy { padding: 31px 34px 35px; }.dialog-copy h2 { font-size: 52px; margin: 16px 0; }.dialog-copy > p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin-bottom: 25px; max-width: 520px; }.dialog-close { background: var(--paper); border: 0; border-radius: 50%; cursor: pointer; font-size: 28px; height: 38px; position: absolute; right: 16px; top: 16px; width: 38px; z-index: 2; }
@media (max-width: 800px) { .nav-toggle { display: block; margin-left: auto; }.mobile-nav { background: var(--ink); color: white; flex-direction: column; gap: 20px; padding: 22px 20px; }.mobile-nav.open { display: flex; }.mobile-nav a { font-size: 13px; font-weight: 700; }.detail-dialog > img { height: 200px; }.dialog-copy { padding: 24px; }.dialog-copy h2 { font-size: 43px; } }
.facility-card details { bottom: 20px; color: inherit; left: 24px; position: absolute; right: 24px; z-index: 2; }
.facility-card summary { cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; text-transform: uppercase; }
.facility-card summary::-webkit-details-marker { display: none; }
.facility-card summary::after { color: var(--lime); content: " +"; font-size: 18px; margin-left: 8px; }
.facility-card details[open] summary::after { content: " −"; }
.facility-card details p { background: rgba(16,20,21,.8); bottom: 28px; color: white; left: -24px; margin: 0; padding: 14px 18px; position: absolute; width: min(320px, calc(100vw - 80px)); }
.cream-card details p { background: rgba(244,241,233,.95); color: var(--ink); }
.address-detail:hover strong { color: var(--lime); }
.email-detail strong, footer a { overflow-wrap: anywhere; }
.nav-toggle { align-items: center; background: transparent; border: 1px solid var(--ink); cursor: pointer; gap: 9px; padding: 9px 11px; }.nav-toggle span { font: 700 10px "DM Sans"; letter-spacing: 1px; text-transform: uppercase; }.nav-toggle b { color: var(--red); font: 500 20px/.7 "DM Sans"; }.nav-toggle[aria-expanded="true"] b { transform: rotate(45deg); }
.header-contact a span, .contact-detail small span, .footer-contact a span { color: var(--red); font-size: 14px; margin-right: 4px; }.email-detail:hover strong, .footer-contact a:hover { color: var(--red); }
.copy-contact { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; text-align: left; }.copy-contact:hover strong, .copy-contact:hover { color: var(--red); }.copy-label { color: var(--lime); float: right; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }.copy-contact.copied .copy-label { color: var(--lime); }.contact-detail.copy-contact { display: block; padding: 0; width: 100%; }.footer-contact .copy-contact { font-size: 11px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; width: 100%; }.footer-contact .copy-label { margin-left: 8px; }
.match-lab { background: var(--ink); color: white; display: grid; gap: 44px; grid-template-columns: .9fr 1.15fr .9fr; margin: 0 auto 120px; max-width: 1184px; padding: 56px 46px; }
.match-lab, .match-lab button, .match-lab input { touch-action: manipulation; }
.lab-heading h2 { font-size: 65px; margin: 18px 0; }.lab-heading > p:last-child { color: #aeb6ae; font-size: 14px; max-width: 230px; }.match-lab .eyebrow { color: #aeb6ae; }.lab-brand { align-items: center; color: var(--lime); display: flex; font: 700 11px "DM Sans"; gap: 9px; letter-spacing: 1px; margin-bottom: 25px; text-transform: uppercase; }.lab-brand img { border: 1px solid var(--red); height: 30px; object-fit: cover; width: 30px; }
.scoreboard { background: #252e2a; border: 1px solid #435048; padding: 23px; }.scoreboard-top { align-items: center; color: #aeb6ae; display: flex; font-size: 10px; gap: 8px; letter-spacing: 1px; text-transform: uppercase; }.scoreboard-top strong { color: var(--lime); margin-left: auto; }.score-main { align-items: baseline; display: flex; font: 800 88px/.9 "Barlow Condensed"; margin: 30px 0 14px; }.score-main > span:first-child { color: var(--lime); }.wicket-count { color: white; font-size: 42px; margin-left: 8px; }.wicket-count b { color: var(--red); }.score-main small { color: #aeb6ae; font: 600 11px "DM Sans"; margin-left: 10px; text-transform: uppercase; }.score-meta { border-bottom: 1px solid #435048; border-top: 1px solid #435048; display: flex; justify-content: space-between; padding: 12px 0; }.score-meta span { color: #aeb6ae; font-size: 10px; text-transform: uppercase; }.score-meta b { color: white; display: block; font-size: 14px; margin-top: 3px; }.over-dots { display: flex; gap: 7px; margin: 22px 0; }.over-dots i { background: #53625a; border-radius: 50%; display: block; height: 9px; width: 9px; }.over-dots i.active { background: var(--lime); }.over-dots i.wicket { background: var(--red); }.score-controls { display: grid; gap: 7px; grid-template-columns: repeat(4, 1fr); }.score-controls button, .mode-choice { background: transparent; border: 1px solid #607067; color: white; cursor: pointer; font: 700 11px "DM Sans"; padding: 9px 6px; }.score-controls button:hover, .mode-choice:hover, .mode-choice.active { background: var(--lime); border-color: var(--lime); color: var(--ink); }.score-controls button:last-child { grid-column: span 4; }.lab-controls { align-self: center; }.mode-switch { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }.mode-switch > span { color: #aeb6ae; font-size: 11px; margin-right: 7px; text-transform: uppercase; }.target-control { color: #aeb6ae; display: block; font-size: 11px; margin-top: 35px; text-transform: uppercase; }.target-control output { color: var(--lime); float: right; font-size: 18px; }.target-control input { accent-color: var(--lime); display: block; margin-top: 17px; width: 100%; }.lab-note { border-left: 2px solid var(--red); color: #aeb6ae; font-size: 13px; margin-top: 35px; padding-left: 13px; }
.challenge-line { border-bottom: 1px solid #435048; color: #aeb6ae; display: flex; font-size: 10px; justify-content: space-between; margin-top: 20px; padding-bottom: 10px; text-transform: uppercase; }.challenge-line b { color: var(--lime); }.challenge-button { background: var(--red); border: 0; color: white; cursor: pointer; font: 700 12px "DM Sans"; margin-top: 10px; padding: 12px; text-transform: uppercase; width: 100%; }.challenge-button:hover { background: var(--lime); color: var(--ink); }.best-score { align-items: baseline; border-bottom: 1px solid #435048; display: flex; gap: 9px; margin-top: 38px; padding-bottom: 12px; }.best-score span, .best-score small { color: #aeb6ae; font-size: 11px; text-transform: uppercase; }.best-score strong { color: var(--lime); font: 800 36px "Barlow Condensed"; margin-left: auto; }
.challenge-button:disabled { background: #46514b; color: #aeb6ae; cursor: default; opacity: .8; }
.roll-button { align-items: center; background: var(--lime) !important; color: var(--ink) !important; display: flex; gap: 12px; grid-column: span 3; justify-content: center; min-height: 52px; text-align: left; }.roll-button:hover { background: white !important; }.roll-button > span:last-child { display: flex; flex-direction: column; gap: 2px; }.roll-button b { font: 800 13px "DM Sans"; text-transform: uppercase; }.roll-button small { font-size: 9px; letter-spacing: .5px; opacity: .65; text-transform: uppercase; }.dice-face { align-items: center; background: var(--ink); border: 2px solid rgba(255,255,255,.8); border-radius: 7px; color: var(--lime); display: flex; font: 800 20px/1 "Barlow Condensed"; height: 34px; justify-content: center; line-height: 1; width: 34px; }.roll-button.rolling .dice-face { animation: tumble .45s ease; }@keyframes tumble { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }.roll-button:disabled { cursor: not-allowed; filter: grayscale(.25); opacity: .55; }
.roll-button.is-hidden { display: none; }
.result-toast { color: var(--lime); font: 800 26px "Barlow Condensed"; height: 0; opacity: 0; pointer-events: none; position: absolute; right: 23px; text-transform: uppercase; top: 104px; z-index: 3; }.result-toast.show { animation: result-pop .9s ease both; }.result-toast.disappoint { color: var(--red); }@keyframes result-pop { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 30% { opacity: 1; transform: scale(1.2) rotate(3deg); } 70% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: translateY(-18px); } }.scoreboard.celebrate { animation: scoreboard-pop .5s ease; }.scoreboard.disappoint { animation: scoreboard-shake .45s ease; }@keyframes scoreboard-pop { 40% { box-shadow: 0 0 0 8px rgba(217,242,59,.2); } }@keyframes scoreboard-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.scoreboard.boundary-four::before, .scoreboard.boundary-six::before { border-radius: 50%; content: ""; inset: 10px; pointer-events: none; position: absolute; z-index: 0; }.scoreboard.boundary-four::before { animation: four-burst .7s ease-out; background: radial-gradient(circle, transparent 0 42%, rgba(217,242,59,.35) 43% 44%, transparent 45%); }.scoreboard.boundary-six::before { animation: six-burst .9s ease-out; background: radial-gradient(circle, rgba(217,242,59,.9) 0 2px, transparent 3px) 10% 20% / 25px 25px, radial-gradient(circle, rgba(234,60,45,.9) 0 2px, transparent 3px) 90% 70% / 31px 31px; }.scoreboard.boundary-six { animation: six-board-pop .75s ease; }.scoreboard.boundary-four { animation: four-board-pop .55s ease; }@keyframes four-board-pop { 35% { box-shadow: 0 0 0 8px rgba(217,242,59,.22), 0 0 28px rgba(217,242,59,.3); } }@keyframes six-board-pop { 25% { box-shadow: 0 0 0 12px rgba(217,242,59,.25), 0 0 55px rgba(234,60,45,.35); } 55% { transform: scale(1.025); } }@keyframes four-burst { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1.08); } }@keyframes six-burst { 0% { opacity: 0; transform: scale(.5) rotate(0); } 35% { opacity: 1; transform: scale(1.15) rotate(35deg); } 100% { opacity: 0; transform: scale(1.35) rotate(70deg); } }
.scoreboard { overflow: hidden; position: relative; }
.result-modal { align-items: center; background: rgba(16,20,21,.78); display: flex; inset: 0; justify-content: center; opacity: 0; padding: 20px; pointer-events: none; position: fixed; transition: opacity .25s; visibility: hidden; z-index: 20; }.result-modal.open { opacity: 1; pointer-events: auto; visibility: visible; }.result-modal-card { background: var(--paper); box-shadow: 0 22px 80px rgba(0,0,0,.4); max-width: 470px; padding: 42px 38px 38px; position: relative; transform: translateY(15px); transition: transform .25s; width: 100%; }.result-modal.open .result-modal-card { transform: translateY(0); }.result-kicker { color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }.result-modal h2 { font-size: 60px; margin: 14px 0; }.result-modal p { color: var(--muted); font-size: 14px; margin-bottom: 27px; }.result-close { background: transparent; border: 0; cursor: pointer; font-size: 28px; position: absolute; right: 16px; top: 12px; }
.result-contact { justify-content: space-between; gap: 16px; width: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 800px) { .match-lab { display: block; margin: 0 20px 75px; padding: 35px 22px; }.lab-heading h2 { font-size: 57px; }.scoreboard { margin: 35px 0; }.lab-controls { padding-bottom: 8px; } }
.match-lab { min-width: 0; width: min(1184px, calc(100% - 40px)); }
.scoreboard, .lab-heading, .lab-controls { min-width: 0; }
@media (max-width: 800px) { .match-lab { overflow: hidden; width: calc(100% - 40px); }.scoreboard { width: 100%; }.score-main { font-size: 76px; }.score-meta { gap: 8px; }.score-meta span { min-width: 0; }.score-controls { grid-template-columns: 1fr 1fr; }.roll-button { grid-column: span 2; } }
img { max-width: 100%; }
.site-header, .hero, .section-intro, .facility-grid { width: calc(100% - 40px); }
.section-intro, .facility-grid { padding-left: 0; padding-right: 0; }
.contact-strip { width: min(1184px, calc(100% - 40px)); }
@media (max-width: 1100px) { .site-header { gap: 16px; }.main-nav { margin-left: auto; }.header-contact { display: none; }.hero { padding-top: 45px; }.hero h1 { font-size: clamp(68px, 10vw, 100px); }.match-lab { gap: 28px; grid-template-columns: 1fr 1.15fr 1fr; padding-left: 34px; padding-right: 34px; } }
@media (max-width: 800px) { .site-header, .hero, .section-intro, .facility-grid, .contact-strip { width: calc(100% - 40px); }.site-header { gap: 8px; }.main-nav { display: none; }.hero { padding-top: 48px; }.section-intro, .facility-grid { padding-left: 0; padding-right: 0; }.contact-strip { margin-left: 20px; margin-right: 20px; }.contact-detail strong { overflow-wrap: anywhere; }.score-meta span { font-size: 9px; }.score-meta b { font-size: 12px; } }
@media (max-width: 480px) { .site-header { padding-left: 0; padding-right: 0; }.brand { font-size: 20px; gap: 8px; }.brand img { height: 40px; width: 40px; }.brand b { font-size: 8px; letter-spacing: 1.5px; }.header-cta { font-size: 10px; gap: 7px; padding: 10px 9px; white-space: nowrap; }.header-cta span { font-size: 15px; }.hero { padding-left: 0; padding-right: 0; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-text { font-size: 14px; }.hero-visual { min-height: 315px; }.hero-visual:before { height: 245px; width: 245px; }.hero-ring { height: 285px; width: 285px; }.hero-ball { height: 110px; width: 110px; }.hero-ball:before, .hero-ball:after { height: 86px; width: 36px; }.circle-label { left: 2%; }.hero-stat { right: 0; }.contact-strip { margin-left: 20px; margin-right: 20px; padding-left: 18px; padding-right: 18px; }.contact-heading strong { font-size: 18px; }.phone-detail strong { font-size: 18px; }.section-intro { margin-top: 80px; }.section-intro h2 { font-size: 53px; }.match-lab { margin-left: 20px; margin-right: 20px; padding-left: 17px; padding-right: 17px; }.lab-heading h2 { font-size: 51px; }.scoreboard { margin-left: 0; margin-right: 0; padding: 18px 15px; }.score-main { font-size: 68px; }.wicket-count { font-size: 34px; }.score-meta { gap: 4px; }.score-meta span { font-size: 8px; }.score-meta b { font-size: 11px; }.score-controls button { font-size: 10px; }.footer-contact a { overflow-wrap: anywhere; } }
@media (max-width: 340px) { .brand { font-size: 18px; }.brand b { font-size: 7px; }.header-cta { font-size: 9px; padding-left: 7px; padding-right: 7px; }.hero h1 { font-size: 66px; }.section-intro h2 { font-size: 48px; }.score-main { font-size: 61px; }.wicket-count { font-size: 30px; } }
.roll-button.batting-action { border-radius: 10px 38px 38px 10px; overflow: hidden; padding-left: 91px; position: relative; }.roll-button.batting-action::before { background: linear-gradient(90deg, #b9783d 0 78%, #e5b56f 79% 100%); border: 2px solid var(--ink); border-radius: 4px 5px 15px 15px; bottom: -17px; box-shadow: inset -5px 0 rgba(234,60,45,.75); content: ""; height: 96px; left: 39px; position: absolute; transform: rotate(-17deg); width: 31px; }.roll-button.batting-action::after { background: #171c1b; border: 2px solid var(--ink); border-radius: 7px; content: ""; height: 31px; left: 27px; position: absolute; top: -3px; transform: rotate(-17deg); width: 10px; }.roll-button.batting-action .dice-face { display: none; }
.score-controls { display: grid; gap: 12px; grid-template-columns: 1fr; width: 100%; }.score-controls button { min-height: 52px; width: 100%; }.roll-button { grid-column: auto; }.challenge-button { min-height: 52px; margin-top: 12px; }
.score-controls > button { box-sizing: border-box; justify-self: stretch; max-width: 100%; }.roll-button { width: 100% !important; }
.score-controls button:last-child { grid-column: auto; }
.score-controls .roll-button { border: 2px solid var(--ink); box-shadow: 0 5px 0 rgba(16,20,21,.35); min-height: 64px; }.score-controls .roll-button:hover { box-shadow: 0 3px 0 rgba(16,20,21,.35); transform: translateY(2px); }.score-controls .roll-button:active { box-shadow: none; transform: translateY(5px); }.score-controls #resetScore { background: transparent; color: white; }.score-controls #resetScore:hover { background: #34403a; }
.roll-button.batting-action { background: #f3f0d9 !important; border-radius: 10px 38px 38px 10px; padding-left: 91px; }.roll-button.batting-action::before { background: linear-gradient(90deg, #b9783d 0 78%, #e5b56f 79% 100%); border: 2px solid var(--ink); border-radius: 4px 5px 15px 15px; bottom: -17px; box-shadow: inset -5px 0 rgba(234,60,45,.75); content: ""; height: 96px; left: 39px; position: absolute; transform: rotate(-17deg); width: 31px; }.roll-button.batting-action::after { background: #171c1b; border: 2px solid var(--ink); border-radius: 7px; content: ""; height: 31px; left: 27px; position: absolute; top: -3px; transform: rotate(-17deg); width: 10px; }.roll-button.batting-action > span { position: relative; z-index: 1; }.roll-button.batting-action .dice-face { display: none; }
.dice-face.bat-icon { background: transparent; border: 0; color: transparent; height: 40px; position: relative; transform: rotate(25deg); width: 30px; }.dice-face.bat-icon::before { background: #f7f4df; border: 2px solid var(--ink); border-radius: 3px 3px 7px 7px; bottom: 1px; box-shadow: inset -4px 0 rgba(234,60,45,.65); content: ""; height: 27px; left: 7px; position: absolute; width: 14px; }.dice-face.bat-icon::after { background: var(--ink); border-radius: 3px; content: ""; height: 12px; left: 12px; position: absolute; top: 0; width: 5px; }.roll-button.batting-action { background: #f0f3da !important; }.roll-button.batting-action b { color: var(--red); }.roll-button.bowling-action .dice-face { background: var(--ink); border: 2px solid rgba(255,255,255,.8); color: var(--lime); }
.roll-button.batting-action { border-radius: 10px 38px 38px 10px; overflow: hidden; padding-left: 91px; position: relative; }.roll-button.batting-action::before { background: linear-gradient(90deg, #b9783d 0 78%, #e5b56f 79% 100%); border: 2px solid var(--ink); border-radius: 4px 5px 15px 15px; bottom: -17px; box-shadow: inset -5px 0 rgba(234,60,45,.75); content: ""; height: 96px; left: 39px; position: absolute; transform: rotate(-17deg); width: 31px; }.roll-button.batting-action::after { background: #171c1b; border: 2px solid var(--ink); border-radius: 7px; content: ""; height: 31px; left: 27px; position: absolute; top: -3px; transform: rotate(-17deg); width: 10px; }.roll-button.batting-action > span { position: relative; z-index: 1; }.roll-button.batting-action .dice-face { display: none; }
.scoreboard.boundary-four::before, .scoreboard.boundary-six::before { display: none; }
.scoreboard.boundary-four { animation: clean-four .55s ease; box-shadow: 0 0 0 1px rgba(217,242,59,.7), 0 10px 28px rgba(217,242,59,.12); }
.scoreboard.boundary-six { animation: clean-six .7s cubic-bezier(.2,.75,.25,1); box-shadow: 0 0 0 1px rgba(217,242,59,.95), 0 14px 38px rgba(217,242,59,.2); }
.result-toast.show { font-size: 30px; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(16,20,21,.18); }
.result-toast.show:not(.disappoint) { animation: clean-toast .8s cubic-bezier(.2,.75,.25,1) both; }
@keyframes clean-four { 0% { transform: scale(1); } 35% { transform: scale(1.012); } 100% { transform: scale(1); } }
@keyframes clean-six { 0% { transform: scale(1); } 30% { transform: scale(1.025); } 62% { transform: scale(.998); } 100% { transform: scale(1); } }
@keyframes clean-toast { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 0; transform: translateY(-12px); } }
:root { --ink: #101415; --paper: #f4f1e9; --lime: #d9f23b; --red: #ea3c2d; --muted: #676d68; --line: #d9d8cf; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
button, input { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.site-header { padding-top: max(22px, env(safe-area-inset-top)); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.site-header { align-items: center; backdrop-filter: blur(12px); background: rgba(244,241,233,.9); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 22px 28px; position: sticky; top: 0; z-index: 10; }
.brand, .footer-brand { align-items: center; display: flex; font-family: "Barlow Condensed", sans-serif; font-size: 23px; font-weight: 800; gap: 10px; letter-spacing: .5px; }
.brand img { height: 54px; object-fit: cover; width: 54px; }.brand { font-size: 28px; gap: 12px; }.brand b, .footer-brand b { display: block; font-size: 11px; letter-spacing: 2px; line-height: 1; }
.main-nav { display: flex; gap: 34px; margin-left: 100px; }
.main-nav a { color: #555b55; font-size: 13px; font-weight: 600; }
.main-nav a:hover, .main-nav a.active { color: var(--red); }
.header-contact { display: flex; flex-direction: column; gap: 2px; margin-left: auto; margin-right: 24px; }.header-contact a { color: var(--muted); font-size: 10px; line-height: 1.2; text-align: right; }.header-contact a:hover { color: var(--red); }
.header-cta, .primary-button { align-items: center; background: var(--ink); color: white; display: inline-flex; font-size: 13px; font-weight: 700; gap: 24px; justify-content: center; padding: 13px 18px; transition: background .2s, transform .2s; }
.header-cta span, .primary-button span { color: var(--lime); font-size: 19px; line-height: .6; }
.header-cta:hover, .primary-button:hover { background: var(--red); transform: translateY(-2px); }
.hero { display: grid; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: 1240px; min-height: 570px; overflow: hidden; padding: 70px 28px 64px; }
.hero-copy { padding-top: 34px; position: relative; z-index: 1; }
.eyebrow { align-items: center; color: #707770; display: flex; font-size: 11px; font-weight: 700; gap: 9px; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow span { background: var(--red); display: inline-block; height: 7px; width: 7px; }
h1, h2, h3 { font-family: "Barlow Condensed", sans-serif; line-height: .88; text-transform: uppercase; }
h1 { font-size: clamp(74px, 9vw, 126px); letter-spacing: -2px; margin: 22px 0 25px; }
h1 em, h2 em { color: var(--red); font-style: normal; }
.hero-text { color: var(--muted); font-size: 16px; max-width: 390px; }
.hero-actions { align-items: center; display: flex; gap: 27px; margin-top: 32px; }
.text-link { border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 700; padding-bottom: 4px; }
.text-link span { color: var(--red); margin-left: 10px; }
.hero-proof { align-items: center; display: flex; font-size: 11px; gap: 10px; margin-top: 52px; }
.hero-proof strong { font-size: 21px; }
.stars { color: var(--red); letter-spacing: 1px; }
.hero-proof span:last-child { color: var(--muted); }
.hero-visual { align-items: center; display: flex; justify-content: center; min-height: 440px; overflow: hidden; position: relative; }
.hero-visual:before { background: var(--lime); border-radius: 50%; content: ""; height: 390px; position: absolute; right: 8%; top: 5%; width: 390px; }
.hero-ring { border: 1px solid rgba(16,20,21,.35); border-radius: 50%; height: 430px; position: absolute; right: 0; transform: rotate(-25deg); width: 430px; }
.hero-ring:after { border: 1px solid var(--red); border-radius: 50%; content: ""; inset: 20px; position: absolute; }
.hero-ball { background: var(--red); border: 9px solid var(--ink); border-radius: 50%; box-shadow: 18px 18px 0 rgba(234,60,45,.25); height: 158px; position: relative; transform: rotate(-28deg); width: 158px; z-index: 1; }
.hero-ball:before, .hero-ball:after { border: 2px dashed white; border-radius: 50%; content: ""; height: 125px; left: 7px; position: absolute; top: 7px; width: 55px; }
.hero-ball:before { transform: rotate(45deg); }.hero-ball:after { transform: rotate(-45deg); }
.circle-label { font-family: "Barlow Condensed", sans-serif; font-size: 11px; left: 6%; letter-spacing: 2px; position: absolute; text-align: center; top: 10%; transform: rotate(-12deg); z-index: 2; }.circle-label strong { font-size: 21px; }
.hero-stat { align-items: center; bottom: 12%; display: flex; gap: 12px; position: absolute; right: 4%; z-index: 2; }.hero-stat strong { color: var(--red); font: 800 39px "Barlow Condensed"; }.hero-stat span { font-size: 10px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.contact-strip { align-items: center; background: var(--ink); color: white; display: flex; gap: 32px; justify-content: space-between; margin: 0 auto; max-width: 1184px; padding: 25px 30px; }
.contact-heading { align-items: center; display: flex; gap: 20px; min-width: 370px; }.contact-logo { border: 2px solid var(--lime); height: 88px; object-fit: cover; width: 88px; }.contact-heading small, .contact-detail small { color: #9da49c; display: block; font-size: 10px; }.contact-heading strong { display: block; font: 600 27px/1 "Barlow Condensed"; text-transform: uppercase; }.contact-detail { font-style: normal; }.contact-detail strong { display: block; font-size: 14px; line-height: 1.35; }.phone-detail strong { color: var(--lime); font-size: 20px; }
.booking-intro { align-items: center; display: flex; gap: 12px; min-width: 190px; }.booking-intro small { color: #9da49c; display: block; font-size: 10px; }.booking-intro strong { display: block; font: 600 20px/1 "Barlow Condensed"; text-transform: uppercase; }.live-dot { background: var(--lime); border-radius: 50%; height: 9px; width: 9px; }
#bookingForm { align-items: center; display: flex; gap: 13px; }.booking-bar label { color: #8b928b; font-size: 10px; text-transform: uppercase; }.booking-bar input, .booking-bar select { background: transparent; border: 0; border-bottom: 1px solid #58605a; color: white; display: block; font: 600 14px "DM Sans"; margin-top: 5px; min-width: 145px; outline: none; padding: 5px 0; }.booking-bar option { color: var(--ink); }.booking-bar .primary-button { background: var(--lime); color: var(--ink); border: 0; cursor: pointer; margin-left: 10px; }.booking-bar .primary-button span { color: var(--ink); }.booking-bar .primary-button:hover { background: white; }.booking-message { bottom: -26px; color: var(--red); font-size: 12px; left: 30px; position: absolute; }
.section-intro { display: flex; justify-content: space-between; margin: 140px auto 54px; max-width: 1184px; padding: 0 0; }.section-intro h2 { font-size: 72px; margin-top: 18px; }.section-description { align-self: end; color: var(--muted); font-size: 14px; max-width: 285px; padding-bottom: 7px; }.facility-grid { display: grid; gap: 14px; grid-template-columns: 1.4fr 1fr 1fr; margin: 0 auto 120px; max-width: 1184px; }.facility-card { min-height: 310px; overflow: hidden; padding: 24px; position: relative; }.feature-card { background: var(--red); color: white; }.dark-card { background: #202827; color: white; }.cream-card { background: #ddd8c9; }.card-number { color: inherit; font-size: 10px; font-weight: 700; letter-spacing: 1px; opacity: .7; }.facility-card h3 { bottom: 51px; font-size: 44px; position: absolute; }.facility-card p { bottom: 24px; font-size: 12px; position: absolute; }.facility-card a { border: 1px solid currentColor; border-radius: 50%; font-size: 21px; height: 39px; line-height: 35px; position: absolute; right: 22px; text-align: center; top: 20px; width: 39px; }.facility-icon { font-size: 84px; line-height: 1; opacity: .85; position: absolute; right: 31px; top: 75px; }.pitch-mark { border: 2px solid rgba(255,255,255,.4); border-radius: 50%; height: 250px; position: absolute; right: -50px; top: 55px; width: 250px; }.pitch-mark:after { border: 2px solid rgba(255,255,255,.4); border-radius: 50%; content: ""; inset: 26px; position: absolute; }
footer { align-items: center; background: var(--lime); display: flex; gap: 40px; padding: 27px max(28px, calc((100vw - 1184px) / 2)); }.footer-brand img { height: 37px; object-fit: cover; width: 37px; }.footer-brand { font-size: 20px; }.footer-brand b { font-size: 9px; }.footer-brand + p { font-size: 13px; margin-right: auto; }.footer a { font-size: 13px; font-weight: 700; }.footer small { font-size: 10px; }
.footer-contact { display: flex; flex-direction: column; gap: 3px; max-width: 360px; }.footer-contact a { font-size: 11px; line-height: 1.25; }.footer-contact a:hover { color: var(--red); }
.hero-copy, .hero-visual { animation: rise-in .7s ease both; }.hero-visual { animation-delay: .12s; }.contact-strip, .facility-card { animation: rise-in .7s ease both; }.facility-card:nth-child(2) { animation-delay: .1s; }.facility-card:nth-child(3) { animation-delay: .2s; }@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 800px) { .site-header { padding: 16px 20px; }.brand { font-size: 23px; }.brand img { height: 46px; width: 46px; }.main-nav { display: none; }.header-contact { display: none; }.header-cta { gap: 10px; padding: 10px 12px; }.hero { display: block; min-height: auto; padding: 48px 20px 20px; }.hero-copy { padding-top: 0; }.hero-visual { min-height: 360px; }.hero-visual:before { height: 290px; right: 8%; width: 290px; }.hero-ring { height: 320px; width: 320px; }.hero-ball { height: 125px; width: 125px; }.hero-ball:before, .hero-ball:after { height: 98px; width: 42px; }.hero-stat { bottom: 5%; right: 4%; }.contact-strip { align-items: stretch; display: block; margin: 0 20px; padding: 23px 20px; }.contact-heading { gap: 16px; margin-bottom: 24px; min-width: 0; }.contact-logo { height: 72px; width: 72px; }.contact-heading strong { font-size: 22px; }.contact-detail { border-top: 1px solid #3c4540; margin-top: 16px; padding-top: 15px; }.section-intro { display: block; margin: 100px 20px 38px; }.section-intro h2 { font-size: 60px; }.section-description { margin-top: 25px; }.facility-grid { display: block; margin: 0 20px 75px; }.facility-card { margin-bottom: 14px; min-height: 270px; }footer { align-items: flex-start; display: grid; gap: 17px; padding: 28px 20px; }.footer-brand + p { margin: 0; }.footer-contact { max-width: 100%; }.footer small { grid-row: 4; } }