/* Shadd Athletic Club:concept build by Marketlube (28 Oct 2026). A sports poster on a club noticeboard. */
:root {
--chalk:#F4F2EC;--ink:#191919;--red:#C33A2C;--red-d:#A32E22;--concrete:#C9C7C1;
--steel:#4D6B82;--steel-d:#3A5468;--graphite:#55534E;--white:#fff;
--display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
--text:"Barlow",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--arabic:"Cairo","Segoe UI",Tahoma,sans-serif;
--g:clamp(16px,4vw,48px);
--sec:clamp(64px,9vw,136px);
--hh:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--mlc-h,34px) + var(--hh) + 12px)}
body{margin:0;background:var(--chalk);color:var(--ink);font:400 1.0625rem/1.55 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:800}
figure{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero-band :focus-visible,.tt :focus-visible,.ladies :focus-visible,.pt :focus-visible,.ramadan :focus-visible,.cta :focus-visible,.site-footer :focus-visible,.build :focus-visible,.menu-sheet :focus-visible,.floor :focus-visible{outline-color:var(--chalk)}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:calc(var(--mlc-h,34px) + 8px);z-index:60;background:var(--ink);color:var(--chalk);padding:10px 16px;transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{width:min(100% - 2 * var(--g),1400px);margin-inline:auto}
.section{padding-block:var(--sec)}
[lang="ar"]{font-family:var(--arabic);font-weight:700}
/* Type */
.eyebrow{font:600 0.8125rem/1.3 var(--text);letter-spacing:0.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:18px}
.eyebrow-chalk{color:var(--chalk)}
.h2{font:800 clamp(2.75rem,1.3rem + 5.2vw,6rem)/0.9 var(--display);letter-spacing:-0.005em;text-wrap:balance}
.h3{font:800 clamp(2rem,1.4rem + 2.2vw,3.25rem)/0.95 var(--display)}
.h4{font:600 1.125rem/1.3 var(--text);margin-bottom:10px}
.sec-lede{font-size:clamp(1.0625rem,1rem + 0.3vw,1.25rem);max-width:40ch;color:var(--graphite)}
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.sec-head-split{display:grid;gap:20px;align-items:end}
@media (min-width:900px){.sec-head-split{grid-template-columns:1.4fr 1fr} .sec-head-split .sec-lede{margin:0}}
.sq{display:inline-block;width:14px;height:14px;flex:none;border:2px solid var(--chalk);vertical-align:-1px}
.sq-m{background:var(--red)} .sq-l{background:var(--steel)} .sq-k{background:var(--ink)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border:2px solid transparent;border-radius:0;font:600 1rem/1.1 var(--text);text-decoration:none;letter-spacing:0.01em;transition:background-color 0.2s,color 0.2s,border-color 0.2s}
.btn-red{background:var(--red);border-color:var(--red);color:var(--white)}
.btn-red:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-chalk{background:var(--chalk);border-color:var(--chalk);color:var(--ink)}
.btn-chalk:hover{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.btn-outline-chalk{border-color:var(--chalk);color:var(--chalk);background:transparent}
.btn-outline-chalk:hover{background:var(--chalk);color:var(--ink)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.btn-ink:hover{background:var(--red-d);border-color:var(--red-d);color:var(--white)}
.btn-outline-ink{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline-ink:hover{background:var(--ink);color:var(--chalk)}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn[hidden]{display:none}
/* Header */
.site-header{position:sticky;top:var(--mlc-h,34px);z-index:40;background:var(--chalk);border-bottom:2px solid transparent;transition:border-color 0.2s}
.site-header.is-scrolled{border-bottom-color:var(--ink)}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--hh)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand-mark{width:40px;height:40px;flex:none}
.brand-word{font:900 1.875rem/1 var(--display);text-transform:uppercase;letter-spacing:0.03em}
.brand-rule{width:1.5px;height:26px;background:currentColor;opacity:0.6}
.brand-ar{font:700 1.375rem/1 var(--arabic);padding-bottom:4px}
.nav{margin-left:auto;display:none}
.nav ul{display:flex;gap:clamp(14px,1.5vw,26px)}
.nav a{font-weight:500;font-size:0.975rem;text-decoration:none;padding:6px 0;background:linear-gradient(var(--red),var(--red)) 0 100% / 0 2px no-repeat;transition:background-size 0.25s}
.nav a:hover{background-size:100% 2px}
.header-cta{display:none;min-height:44px;padding:0 18px}
.menu-btn{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;background:var(--ink);color:var(--chalk);border:0;font-weight:600}
.menu-btn-bars{display:grid;gap:5px;width:18px}
.menu-btn-bars span{display:block;height:2px;background:currentColor;transition:transform 0.25s}
.menu-btn[aria-expanded="true"] .menu-btn-bars span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn-bars span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:1180px){.nav,.header-cta{display:flex} .menu-btn{display:none} .nav{margin-left:auto}}
.menu-sheet{position:fixed;inset:calc(var(--mlc-h,34px) + var(--hh)) 0 0 0;background:var(--ink);color:var(--chalk);overflow-y:auto;padding:28px 0 40px}
.menu-sheet[hidden]{display:none}
.menu-list a{display:block;font:800 clamp(2.25rem,9vw,3.25rem)/1.1 var(--display);text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(244,242,236,0.18)}
.menu-list a:hover{color:var(--concrete)}
.menu-cta{margin-top:28px}
.menu-foot{margin-top:24px;color:var(--concrete);max-width:36ch}
html.menu-open{overflow:hidden}
/* Hero */
.hero-band{background:var(--red);color:var(--chalk);padding-block:clamp(32px,3.6vw,52px)}
.hero.is-ramadan .hero-band,.is-ramadan-boot .hero-band{background:var(--ink)}
.hero-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:stretch}
@media (min-width:1000px){.hero-grid{grid-template-columns:1fr 1.08fr}}
.hero-title{font:900 clamp(4.25rem,1.4rem + 8.4vw,8.75rem)/0.84 var(--display);letter-spacing:-0.01em;margin-bottom:clamp(20px,2.4vw,32px)}
.hero-lede{font-size:clamp(1.125rem,1rem + 0.45vw,1.375rem);line-height:1.45;max-width:40ch;font-weight:500;margin-bottom:clamp(22px,2.4vw,32px)}
.ramadan-line{font-weight:500;color:var(--concrete);margin:8px 0 0;font-size:0.9375rem}
.hero.is-ramadan .ramadan-line{color:var(--chalk)}
.ramadan-line-on{display:none}
.hero.is-ramadan .ramadan-line-on{display:inline}
.hero.is-ramadan .ramadan-line-off{display:none}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:500;font-size:0.9375rem}
.legend li{display:inline-flex;align-items:center;gap:8px}
.hero-photo{display:flex;flex-direction:column;gap:10px;min-height:0}
.hero-photo-in{position:relative;overflow:hidden;aspect-ratio:16 / 10;flex:1 1 auto;background:var(--ink)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
@media (min-width:1000px){.hero-photo-in{aspect-ratio:auto;min-height:360px}}
.hero-photo figcaption{font-size:0.875rem;color:var(--white)}
/* Timetable */
.tt{background:var(--ink);color:var(--chalk);padding-block:clamp(32px,4vw,56px) clamp(40px,5vw,72px);border-top:2px solid rgba(244,242,236,0.16)}
.tt-top{display:grid;gap:16px 32px;margin-bottom:24px;align-items:center}
@media (min-width:900px){.tt-top{grid-template-columns:1fr auto} .tt-top .switch{grid-column:2;grid-row:1} .tt-top .legend{grid-column:1 / -1}}
.tt-top .switch{justify-self:start}
.tt-title{font:800 clamp(1.75rem,1.2rem + 1.8vw,2.75rem)/1 var(--display)}
.switch{display:inline-flex;align-items:center;gap:12px;background:none;border:2px solid var(--chalk);padding:8px 16px 8px 10px;min-height:48px;font-weight:600}
.switch-track{position:relative;width:52px;height:28px;border:2px solid var(--chalk);border-radius:14px;flex:none}
.switch-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--chalk);transition:transform 0.25s}
.switch[aria-checked="true"]{background:var(--chalk);color:var(--ink)}
.switch[aria-checked="true"] .switch-track{background:var(--red);border-color:var(--red)}
.switch[aria-checked="true"] .switch-knob{transform:translateX(24px);background:var(--white)}
.switch:hover .switch-track{border-color:var(--concrete)}
.tt-controls{display:flex;flex-wrap:wrap;gap:16px 24px;padding-block:20px;border-block:1px solid rgba(244,242,236,0.2)}
.tt-filters>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 14px;border:1.5px solid rgba(244,242,236,0.45);font-weight:600;cursor:pointer;list-style:none}
.tt-filters>summary::-webkit-details-marker{display:none}
.tt-filters>summary::after{content:"+";font:800 1.75rem/1 var(--display);transition:transform 0.25s}
.tt-filters[open]>summary::after{transform:rotate(45deg)}
.tt-filters[open]>summary{margin-bottom:12px}
.tt-filters #fCount{margin-right:auto;color:var(--concrete);font-weight:500}
@media (min-width:700px){.tt-filters>summary{display:none}}
.ctl{display:grid;gap:8px;min-width:0}
.ctl-label{font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--concrete)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;background:transparent;border:1.5px solid rgba(244,242,236,0.45);font-weight:500;font-size:0.95rem}
.seg button:hover{border-color:var(--chalk)}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.seg .sq{width:12px;height:12px;border-width:1.5px}
.ctl-sel{flex:1 1 140px;max-width:220px}
.ctl-sel select{width:100%;min-height:42px;min-width:0;padding:0 40px 0 14px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F4F2EC' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;border:1.5px solid rgba(244,242,236,0.45);border-radius:0;appearance:none;color:var(--chalk)}
.ctl-sel select:hover{border-color:var(--chalk)}
.tt-status{margin:16px 0 20px;font-size:0.9375rem;color:var(--concrete)}
.tt-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:16px}
.tt-tab{display:grid;justify-items:center;gap:2px;padding:8px 0 10px;background:transparent;border:1.5px solid rgba(244,242,236,0.3);position:relative}
.tt-tab-num{font:900 clamp(1.5rem,6vw,2.25rem)/0.9 var(--display);font-variant-numeric:tabular-nums}
.tt-tab-day{font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
.tt-tab.is-on{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.tt-tab.is-today::after{content:"";position:absolute;left:6px;right:6px;bottom:-6px;height:4px;background:var(--red)}
.tt-week{display:grid;gap:20px}
.tt-day.is-off{display:none}
.tt-head{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid rgba(244,242,236,0.25);position:relative}
.tt-num{font:900 clamp(3.5rem,2rem + 5vw,5rem)/0.82 var(--display);font-variant-numeric:tabular-nums;display:inline-block}
.tt-name{font-size:0.875rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase}
.tt-today{display:none;margin-left:auto;align-self:center;background:var(--red);color:var(--white);font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:3px 8px}
.tt-day.is-today .tt-today{display:inline-block}
.tt-day.is-today .tt-head{border-bottom:6px solid var(--red);padding-bottom:8px}
.tt-list{display:grid;gap:8px}
.cls[hidden]{display:none}
.cls-btn{position:relative;display:grid;grid-template-columns:92px 1fr;grid-template-areas:"time name" "time meta" "time cap";column-gap:12px;row-gap:3px;width:100%;text-align:left;background:var(--chalk);color:var(--ink);border:0;padding:12px 14px 12px 22px;transition:transform 0.2s,background-color 0.2s}
.cls-btn::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:6px;background:var(--fc,var(--ink))}
.cls-M{--fc:var(--red)} .cls-L{--fc:var(--steel)} .cls-K{--fc:var(--ink)}
.cls-btn:hover{background:var(--white);transform:translateY(-2px)}
.cls-time{grid-area:time;display:flex;align-items:baseline;gap:3px}
.cls-time b{font:800 2.125rem/0.9 var(--display);font-variant-numeric:tabular-nums}
.cls-time i{font-style:normal;font-size:0.75rem;font-weight:600;text-transform:uppercase}
.cls-name{grid-area:name;font-weight:600;line-height:1.2}
.cls-meta{grid-area:meta;font-size:0.8125rem;color:var(--graphite);line-height:1.3}
.cls-cap{grid-area:cap;display:grid;gap:4px;margin-top:4px}
.cls-bar{display:block;height:4px;background:var(--concrete);overflow:hidden}
.cls-bar i{display:block;height:100%;background:var(--ink);transform-origin:left center;transform:scaleX(var(--f,0))}
.cls-left{font-size:0.75rem;color:var(--graphite);font-weight:500}
.cls-left.is-low{color:var(--red-d);font-weight:600}
.tt-empty{font-size:0.9375rem;color:var(--concrete);padding:14px 0;margin:0}
.tt-note{margin:28px 0 0;font-size:0.9375rem;color:var(--concrete);max-width:70ch}
@media (min-width:1100px) {
.tt-tabs{display:none}
.tt-week{grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin-inline:-6px}
.tt-day{padding-inline:6px;border-left:1px solid rgba(244,242,236,0.16);container-type:inline-size}
.tt-day:first-child{border-left:0}
.tt-head{display:grid;gap:6px}
.tt-num{font-size:min(8.5rem,62cqi)}
.tt-today{position:absolute;right:0;top:4px}
.cls-btn{grid-template-columns:1fr;grid-template-areas:"time" "name" "meta" "cap";padding:12px 10px 12px 20px}
.cls-time b{font-size:1.875rem}
.cls-name{font-size:0.9375rem}
}
/* Two floors */
.floors-grid{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:900px){.floors-grid{grid-template-columns:1fr 1fr}}
.floor{display:flex;flex-direction:column;color:var(--chalk)}
.floor-photo{order:-1}
.floor-m{background:var(--red)} .floor-l{background:var(--steel)}
.floor-copy{padding:clamp(24px,3.4vw,44px)}
.floor-tag{font-size:0.8125rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:10px}
.floor .h3{margin-bottom:16px}
.floor-lede{font-size:1.1875rem;font-weight:500;line-height:1.4;max-width:36ch}
.floor-photo{position:relative;overflow:hidden;aspect-ratio:4 / 3}
.floor-photo img{width:100%;height:100%;object-fit:cover}
.floor-photo-tall img{object-position:50% 40%}
.tick-list li{position:relative;padding:11px 0 11px 22px;border-top:1px solid rgba(244,242,236,0.35)}
.tick-list li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:9px;background:currentColor}
.tick-ink li{border-top-color:var(--concrete)}
.floors-note{margin:28px 0 0;font-size:1.0625rem;max-width:62ch;font-weight:500;border-left:6px solid var(--ink);padding-left:16px}
.shade{display:none;position:absolute;inset:0;background:var(--chalk);transform-origin:50% 0;pointer-events:none;z-index:1}
.js-motion .shade{display:block}
.floor-m .shade{background:var(--red)} .floor-l .shade,.ladies .shade{background:var(--steel)} .shade-ink,.kit .shade{background:var(--ink)}
/* Ladies' floor */
.ladies{background:var(--steel);color:var(--chalk);padding-block:var(--sec)}
.ladies-grid{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:1000px){.ladies-grid{grid-template-columns:1fr 1.1fr;align-items:center} .practices{grid-column:1 / -1}}
.ladies-lede{font-size:clamp(1.125rem,1rem + 0.4vw,1.375rem);line-height:1.45;max-width:36ch;margin-top:24px;font-weight:500}
.ladies-photo{position:relative;overflow:hidden;aspect-ratio:3 / 2}
.ladies-photo img{width:100%;height:100%;object-fit:cover}
.practices{display:grid;gap:28px 32px;counter-reset:p}
@media (min-width:640px){.practices{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.practices{grid-template-columns:repeat(4,1fr)}}
.practice{border-top:2px solid var(--chalk);padding-top:16px}
.practice-num{display:block;font:900 clamp(3.5rem,2.6rem + 3vw,5.5rem)/0.85 var(--display);margin-bottom:14px}
.practice .h4{font-size:1.1875rem}
.practice p{margin:0}
/* Membership + builder */
.builder{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,44px);align-items:start}
@media (min-width:1100px){.builder{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.plans{display:grid;gap:14px;margin-bottom:36px}
.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan{position:relative;display:grid;align-content:start;gap:6px;padding:22px 22px 18px;border:2px solid var(--ink);background:var(--chalk);cursor:pointer;transition:background-color 0.2s,color 0.2s}
.plan input{position:absolute;opacity:0;width:1px;height:1px}
.plan:hover{background:var(--white)}
.plan-term{font-weight:600;letter-spacing:0.1em;text-transform:uppercase;font-size:0.875rem}
.plan-price{font:900 clamp(4rem,3rem + 3vw,6rem)/0.85 var(--display);font-variant-numeric:tabular-nums}
.plan-price small,.pack-price small,.total-num small{font:600 1rem/1 var(--text);vertical-align:top;margin-right:6px;letter-spacing:0.06em;position:relative;top:0.5em}
.plan-rows{display:grid;margin-top:10px;font-size:0.9375rem}
.plan-rows span{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--concrete)}
.plan-rows b{font-weight:500;color:var(--graphite)}
.plan:has(input:checked){background:var(--red);color:var(--chalk);border-color:var(--red)}
.plan:has(input:checked) .plan-rows span{border-top-color:rgba(244,242,236,0.4)}
.plan:has(input:checked) .plan-rows b{color:var(--chalk)}
.plan:has(input:checked)::after{content:"Selected";position:absolute;top:14px;right:14px;font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;background:var(--chalk);color:var(--ink);padding:3px 8px}
.plan:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:4px}
.plan-flag{justify-self:start;background:var(--ink);color:var(--chalk);font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:4px 8px;margin-top:8px;order:9}
.includes,.addons{margin-bottom:28px}
.addon-list li{display:grid;gap:2px 16px;padding:10px 0;border-top:1px solid var(--concrete)}
@media (min-width:560px){.addon-list li{grid-template-columns:160px 1fr}}
.addon-list span{color:var(--graphite)}
.addon-list b{font-weight:600}
.mem-notes{display:grid;gap:4px;font-size:0.9375rem;color:var(--graphite);max-width:64ch}
.mem-ctas{margin-top:36px}
.build{background:var(--ink);color:var(--chalk);padding:clamp(22px,2.6vw,34px);border-top:10px solid var(--red);display:grid;gap:22px}
.build[data-floor="L"]{border-top-color:var(--steel)}
@media (min-width:1100px){.build{position:sticky;top:calc(var(--mlc-h,34px) + var(--hh) + 20px)}}
.build-title{font:800 2.25rem/1 var(--display);margin-bottom:14px}
.build-same{margin:10px 0 0;font-size:0.875rem;color:var(--concrete)}
.build[data-floor="L"] .seg button[aria-checked="true"]{background:var(--steel);border-color:var(--steel);color:var(--chalk)}
.build[data-floor="M"] .seg button[aria-checked="true"]{background:var(--red);border-color:var(--red);color:var(--chalk)}
.build .seg button[aria-checked="true"] .sq{background:var(--chalk)}
.build-field legend{font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--concrete);margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid rgba(244,242,236,0.45);font-weight:500;font-size:0.9375rem}
.chip:hover span{border-color:var(--chalk)}
.chip input:checked + span{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.chip input:focus-visible + span{outline:3px solid var(--chalk);outline-offset:2px}
.stepper{display:flex;align-items:center;gap:14px}
.step-btn{width:44px;height:44px;background:transparent;border:1.5px solid var(--chalk);font-size:1.375rem;line-height:1}
.step-btn:hover:not(:disabled){background:var(--chalk);color:var(--ink)}
.step-btn:disabled{opacity:0.4;cursor:not-allowed}
.stepper output{font:800 1.625rem/1 var(--display);min-width:7ch;text-align:center;font-variant-numeric:tabular-nums}
.build-hint{margin:8px 0 0;font-size:0.8125rem;color:var(--concrete)}
.sum{margin:0;display:grid;border-top:2px solid var(--chalk)}
.sum div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(244,242,236,0.18);font-size:0.9375rem}
.sum dt{color:var(--concrete)}
.sum dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.total{display:flex;justify-content:space-between;align-items:end;gap:12px}
.total-label{font-weight:600;letter-spacing:0.12em;text-transform:uppercase;font-size:0.875rem;padding-bottom:8px}
.total-num{font:900 clamp(3.75rem,3rem + 2.5vw,5.25rem)/0.85 var(--display);font-variant-numeric:tabular-nums}
.total-sub{margin:-10px 0 0;font-size:0.875rem;color:var(--concrete)}
.build-live{border-top:1px solid rgba(244,242,236,0.25);padding-top:14px;font-size:0.9375rem}
.build-live p{margin:0 0 6px}
.build-trial{background:var(--chalk);color:var(--ink);padding:8px 12px;font-weight:600;margin-top:10px !important}
.build-done{margin:0;font-size:0.9375rem;background:var(--chalk);color:var(--ink);padding:12px 14px}
/* Free trial */
.trial{background:var(--concrete)}
.trial .sec-lede{color:var(--ink);margin-top:24px}
.trial-grid{display:grid;gap:clamp(32px,4vw,56px);align-items:start}
.trial-steps-list{display:none;gap:0;margin-top:28px;max-width:420px}
@media (min-width:1000px){.trial-grid{grid-template-columns:0.85fr 1.15fr} .trial-steps-list{display:grid}}
.trial-steps-list li{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-top:2px solid var(--ink);font-weight:600}
.trial-steps-list span{font:900 2.25rem/1 var(--display);width:2ch}
.trial-steps-list li{color:var(--graphite);transition:color 0.25s,border-color 0.25s}
.trial-steps-list li.is-on{color:var(--ink);border-top-color:var(--red)}
.trial-steps-list li.is-on span{color:var(--red-d)}
.stepper-panel{background:var(--chalk);border:3px solid var(--ink);padding:clamp(20px,3vw,36px);position:relative}
.trial-progress{height:6px;background:var(--concrete);margin-bottom:24px;overflow:hidden}
.trial-progress span{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(0.25);transition:transform 0.4s cubic-bezier(0.2,0.7,0.2,1)}
.tstep{margin-bottom:28px}
.has-stepper .tstep.is-off{display:none}
.tstep-title{font:800 clamp(1.875rem,1.4rem + 1.5vw,2.5rem)/1 var(--display);padding:0;margin-bottom:20px}
.tstep-title:focus{outline:none}
.tstep-title:focus-visible{outline:3px solid var(--ink)}
.tstep-n{display:block;font:600 0.8125rem/1.3 var(--text);letter-spacing:0.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.opts{display:grid;gap:10px}
@media (min-width:640px){.opts{grid-template-columns:repeat(3,1fr)} .opts-2{grid-template-columns:1fr 1fr}}
.opt,.dayopt,.timeopt{position:relative;cursor:pointer}
.opt input,.dayopt input,.timeopt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt-in{display:grid;gap:4px;height:100%;padding:16px;border:2px solid var(--ink);transition:background-color 0.2s,color 0.2s}
.opt-in b{font-weight:600;font-size:1.0625rem}
.opt-in small{font-size:0.875rem;color:var(--graphite)}
.opt:hover .opt-in,.dayopt:hover span,.timeopt:hover span{background:var(--white)}
.opt input:checked + .opt-in{background:var(--ink);color:var(--chalk)}
.opt-m input:checked + .opt-in{background:var(--red);border-color:var(--red)}
.opt-l input:checked + .opt-in{background:var(--steel);border-color:var(--steel)}
.opt input:checked + .opt-in small{color:var(--chalk)}
.opt input:focus-visible + .opt-in,.dayopt input:focus-visible + span,.timeopt input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-bottom:18px}
.dayopt span{display:grid;justify-items:center;padding:10px 4px;border:2px solid var(--ink)}
.dayopt b{font:900 2.25rem/0.9 var(--display);font-variant-numeric:tabular-nums}
.dayopt small{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em}
.dayopt input:checked + span,.timeopt input:checked + span{background:var(--ink);color:var(--chalk)}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.timeopt span{display:grid;gap:2px;padding:10px 14px;border:2px solid var(--ink);height:100%}
.timeopt b{font:800 1.5rem/1 var(--display)}
.timeopt small{font-size:0.8125rem}
.times-empty{grid-column:1 / -1;color:var(--graphite);margin:0}
.fields{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field > span:first-child{font-size:0.875rem;font-weight:600}
.field input,.field select{min-height:50px;padding:0 14px;border:2px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);width:100%}
.field select{appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23191919' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:40px}
.phone{display:flex}
.phone-cc{display:inline-flex;align-items:center;padding:0 12px;background:var(--ink);color:var(--chalk);font-weight:600}
.check{display:flex;gap:12px;align-items:flex-start;font-size:0.9375rem;line-height:1.4}
.check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--red)}
.tstep-error{min-height:0;margin:0 0 10px;color:var(--red-d);font-weight:600}
.tstep-error:empty{display:none}
.tnav{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.tnav #trialBack{margin-right:auto}
.confirm:focus{outline:none}
.confirm-tag{font:800 2.25rem/1 var(--display);color:var(--red-d);margin-bottom:12px}
.confirm-what{font-weight:600;font-size:1.1875rem}
/* Personal training */
.pt{background:var(--ink);color:var(--chalk);padding-block:var(--sec)}
.pt-grid{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:1000px){.pt-grid{grid-template-columns:1.1fr 1fr;align-items:center} .packs,.pt-more{grid-column:1 / -1}}
.pt-photo{position:relative;overflow:hidden;aspect-ratio:3 / 2}
.pt-photo img{width:100%;height:100%;object-fit:cover}
.pt-lede{font-size:clamp(1.125rem,1rem + 0.4vw,1.375rem);line-height:1.45;max-width:36ch;margin-top:24px;font-weight:500}
.packs{display:grid;gap:12px}
@media (min-width:760px){.packs{grid-template-columns:repeat(3,1fr)}}
.pack{display:grid;gap:8px;padding:24px;border:2px solid rgba(244,242,236,0.4);transition:background-color 0.2s,color 0.2s,border-color 0.2s}
.pack:hover{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.pack-n{font-weight:600;letter-spacing:0.1em;text-transform:uppercase;font-size:0.875rem}
.pack-price{font:900 clamp(4rem,3rem + 3vw,5.75rem)/0.85 var(--display);font-variant-numeric:tabular-nums}
.pack-meta{font-size:0.9375rem}
.pt-more{display:grid;gap:20px;align-items:start}
@media (min-width:1000px){.pt-more{grid-template-columns:1.2fr 1fr auto;align-items:center}}
.pt-extras li{padding:8px 0;border-top:1px solid rgba(244,242,236,0.25)}
.pt-note{margin:0;color:var(--concrete);font-size:0.9375rem}
/* The floor */
.kit{position:relative;background:var(--ink)}
.kit-photo{position:relative;overflow:hidden;height:clamp(320px,62vw,820px)}
.kit-photo img{width:100%;height:112%;margin-top:-6%;object-fit:cover;object-position:40% 50%}
.kit-wrap{position:relative;margin-top:-72px;padding-bottom:clamp(48px,6vw,96px)}
.kit-panel{background:var(--chalk);color:var(--ink);padding:clamp(24px,3.4vw,48px);border-top:10px solid var(--red);max-width:620px}
.kit-panel .h2{margin-bottom:18px}
@media (min-width:1000px){.kit-wrap{position:absolute;inset:auto 0 clamp(40px,5vw,72px) 0;margin:0 auto;padding:0;display:flex;justify-content:flex-end}}
.kit-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:18px 0}
.kit-list li{display:grid;padding:10px 0;border-top:2px solid var(--ink)}
.kit-list b{font:800 1.75rem/1 var(--display);font-variant-numeric:tabular-nums}
.kit-list span{font-size:0.9375rem;color:var(--graphite)}
.kit-ladies{display:flex;gap:10px;align-items:center;font-weight:600}
.kit-ladies .sq{border-color:var(--steel)}
.kit-clean{margin:0;font-size:0.9375rem;color:var(--graphite)}
/* Ramadan */
.ramadan{background:var(--ink);color:var(--chalk);padding-block:var(--sec);border-top:2px solid rgba(244,242,236,0.14)}
.ram-grid{display:grid;gap:clamp(32px,5vw,72px)}
@media (min-width:1000px){.ram-grid{grid-template-columns:1.15fr 1fr;align-items:end}}
.ramadan .h2{font-size:clamp(2.75rem,1.3rem + 4.4vw,5.25rem)}
.ram-lede{font-size:clamp(1.125rem,1rem + 0.4vw,1.375rem);line-height:1.45;max-width:38ch;margin-top:24px;font-weight:500}
.ram-extras{margin-bottom:28px}
.ram-extras li{padding:8px 0;border-top:1px solid rgba(244,242,236,0.25)}
.ram-hours{margin:0;display:grid;gap:0 28px}
@media (min-width:560px){.ram-hours{grid-template-columns:1fr 1fr}}
.rh{border-top:2px solid var(--chalk);padding:14px 0 22px}
.rh dt{display:flex;align-items:center;gap:8px;font-size:0.8125rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--concrete);margin-bottom:8px}
.rh dd{margin:0;font:900 clamp(2.5rem,1.6rem + 2.4vw,3.75rem)/0.95 var(--display);font-variant-numeric:tabular-nums}
.rh dd span{display:inline-block;white-space:nowrap}
.rh dd i{font:600 1rem/1 var(--text);font-style:normal;text-transform:uppercase;letter-spacing:0.08em;margin-right:6px;vertical-align:middle;color:var(--concrete)}
.rh small{font-size:0.42em;text-transform:uppercase;letter-spacing:0.06em}
/* Kids */
.kids-grid{display:grid;gap:14px}
@media (min-width:900px){.kids-grid{grid-template-columns:repeat(3,1fr)}}
.kid{background:var(--ink);color:var(--chalk);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:6px}
.kid-age{font:900 clamp(4.5rem,3.4rem + 3.6vw,6.5rem)/0.82 var(--display);font-variant-numeric:tabular-nums;margin-bottom:18px}
.kid-age i{font:600 1rem/1 var(--text);font-style:normal;text-transform:uppercase;letter-spacing:0.08em;margin:0 8px;vertical-align:middle}
.kid-age .kid-plus{font:900 0.6em/1 var(--display);letter-spacing:0;margin:0 0.08em;vertical-align:0.12em}
.kid .h3{margin-bottom:8px}
.kid p{margin:0 0 10px}
.kid-when{margin-top:auto !important;padding-top:12px;border-top:1px solid rgba(244,242,236,0.3);font-weight:600}
.kids-note{margin:28px 0 0;font-weight:500;border-left:6px solid var(--ink);padding-left:16px;max-width:62ch}
/* Visit */
.visit{padding-top:0}
.visit-grid{display:grid;gap:clamp(32px,4vw,64px);border-top:3px solid var(--ink);padding-top:var(--sec)}
@media (min-width:1000px){.visit-grid{grid-template-columns:1fr 1fr;align-items:start}}
.visit-where{font-size:1.25rem;font-weight:600;margin:22px 0 26px}
.hours{width:100%;border-collapse:collapse;margin-bottom:30px;font-variant-numeric:tabular-nums}
.hours th,.hours td{text-align:left;padding:11px 10px 11px 0;border-bottom:1px solid var(--concrete);vertical-align:top;font-size:0.9375rem}
.hours thead th{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--graphite);border-bottom:2px solid var(--ink);font-weight:600}
.hours tbody th{font-weight:600;white-space:nowrap}
.hours .sq{margin-right:8px;border:0}
.visit-copy .h4{margin-top:8px}
.contact li{padding:8px 0;border-top:1px solid var(--concrete)}
.contact a{font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px}
.contact a:hover{color:var(--red-d)}
.contact span{color:var(--graphite);font-size:0.875rem}
.map{border:3px solid var(--ink);background:var(--chalk)}
.map svg{display:block;width:100%;height:auto}
.map figcaption{padding:12px 14px;font-size:0.875rem;color:var(--graphite);border-top:2px solid var(--ink)}
/* Health + FAQ */
.faq{padding-top:0}
.faq-grid{display:grid;gap:clamp(32px,4vw,56px)}
@media (min-width:1000px){.faq-grid{grid-template-columns:1fr 1.8fr;align-items:start} .health{position:sticky;top:calc(var(--mlc-h,34px) + var(--hh) + 20px)}}
.health{background:var(--concrete);border:2px solid var(--ink);padding:clamp(22px,2.6vw,32px)}
.health .h3{margin-bottom:14px}
.health p{margin:0}
.faq-main .h2{margin-bottom:28px}
.faq-list details{border-top:2px solid var(--ink)}
.faq-list details:last-child{border-bottom:2px solid var(--ink)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:600;font-size:clamp(1.0625rem,1rem + 0.3vw,1.25rem)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:800 2rem/1 var(--display);transition:transform 0.25s;flex:none}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--red-d)}
.faq-list details p{margin:0 0 20px;max-width:64ch}
/* CTA */
.cta{background:var(--red);color:var(--chalk);padding-block:clamp(56px,8vw,120px)}
.cta-grid{display:grid;gap:28px}
@media (min-width:1000px){.cta-grid{grid-template-columns:1.6fr 1fr;align-items:end}}
.cta-title{font:900 clamp(2.5rem,1.2rem + 5.4vw,6.5rem)/0.88 var(--display);text-wrap:balance}
.cta-side p{font-size:1.1875rem;font-weight:500;max-width:32ch}
/* Footer */
.site-footer{background:var(--ink);color:var(--chalk);padding-block:clamp(48px,6vw,88px) 32px}
.foot-top{display:grid;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(244,242,236,0.2)}
@media (min-width:1000px){.foot-top{grid-template-columns:1fr 2fr}}
.brand-foot{color:var(--chalk);flex-wrap:wrap}
.brand-foot .brand-mark{width:48px;height:48px}
.brand-foot .brand-word{font-size:2.25rem}
.brand-foot .brand-ar{font-size:1.25rem}
.foot-tag{margin-top:18px;font-weight:500;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.foot-tag [lang="ar"]{font-size:1.25rem}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
@media (min-width:760px){.foot-cols{grid-template-columns:repeat(4,1fr)}}
.foot-h{font:600 0.75rem/1.3 var(--text);letter-spacing:0.12em;text-transform:uppercase;color:var(--concrete);margin-bottom:12px}
.foot-cols li{padding:4px 0;font-size:0.9375rem;overflow-wrap:anywhere}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-base{display:grid;gap:8px;padding-top:24px;font-size:0.875rem;color:var(--concrete)}
.foot-base p{margin:0}
.foot-slot span{color:var(--chalk);font-weight:600}
.foot-honest a{color:var(--chalk);text-underline-offset:3px}
/* Dialogs */
.dlg{width:min(100% - 32px,540px);max-height:calc(100dvh - 48px);padding:0;border:3px solid var(--ink);background:var(--chalk);color:var(--ink);border-top:10px solid var(--red)}
.dlg[data-floor="L"]{border-top-color:var(--steel)}
.dlg[data-floor="K"]{border-top-color:var(--ink)}
.dlg::backdrop{background:rgba(25,25,25,0.66)}
.dlg-in{position:relative;padding:clamp(22px,4vw,34px)}
.dlg-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;font-size:1.75rem;line-height:1}
.dlg-x:hover{background:var(--ink);color:var(--chalk)}
.dlg-tag{font-size:0.8125rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.dlg-title{font:800 2.25rem/1 var(--display);margin-bottom:12px;padding-right:40px}
.dlg-class{font-weight:600;margin-bottom:20px}
/* Phones: compact blocks (after the base rules so they win) */
@media (max-width:559px){.plans{gap:8px} .plan{padding:16px 12px 12px} .plan-price{font-size:3.5rem} .plan-rows{font-size:0.8125rem} .plan-rows span{flex-wrap:wrap;gap:0 8px} .plan:has(input:checked)::after{display:none} .plan-price small{font-size:0.8125rem;margin-right:4px}}
@media (max-width:639px){.practice{display:grid;grid-template-columns:4.25rem 1fr;column-gap:14px} .practice-num{grid-row:span 2;font-size:3.25rem;margin:0}}
@media (max-width:759px){.pack{grid-template-columns:auto 1fr;align-items:end;column-gap:18px;padding:18px 20px} .pack-n{grid-column:1 / -1} .pack-price{font-size:3.5rem} .pack-meta{padding-bottom:4px}}
@media (max-width:1099px){.plans-col{display:contents} .plans{order:1;margin:0} .build{order:2} .includes{order:3;margin:0} .addons{order:4;margin:0} .mem-notes{order:5}}
/* Motion:hidden states only when the head script allowed motion */
.js-motion [data-split]{opacity:0}
[data-split] > div{padding-bottom:0.14em;margin-bottom:-0.14em}
.js-motion .rv,.js-motion .rv-card{opacity:0;transform:translateY(36px)}
.js-motion .tt-week:not(.is-in) .tt-num,.js-motion .tt-week:not(.is-in) .cls{opacity:0}
.js-motion .hero-photo-in,.js-motion .hero-copy .eyebrow,.js-motion .hero-lede,.js-motion .hero-copy .btn-row{opacity:0}
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after{transition:none !important;animation:none !important}
}