/* home.css - page-specific deviations for index; loads after site.css */
.burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;
    position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);z-index:5}
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden;min-height:clamp(640px,90vh,900px);display:flex;align-items:center}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% center;opacity:.74}
@media(max-width:560px){
.hero-img{object-position:30% center}
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,22,.73) 0%,rgba(15,15,22,.65) 100%)}
.hero-kick .kicker{color:#cfd6dd;font-size:9.5px;letter-spacing:0.15em}
.hero-actions .btn{position:relative;animation:hb-nudge 4.5s ease-in-out infinite,hb-glow 3s ease-in-out infinite}
.hero-actions .btn:hover{animation:none}
@keyframes hb-nudge{0%,84%,100%{transform:rotate(0)}86%{transform:rotate(-5deg)}88.5%{transform:rotate(5deg)}91%{transform:rotate(-3deg)}93.5%{transform:rotate(3deg)}96%{transform:rotate(0)}}
@keyframes hb-glow{0%,100%{box-shadow:0 0 18px 2px rgba(94,134,184,.4)}50%{box-shadow:0 0 34px 9px rgba(94,134,184,.75)}}
@media(prefers-reduced-motion:reduce){
.hero-actions .btn{animation:none;box-shadow:none}
}
@media(max-width:768px){
.hero-facts{bottom:calc(env(safe-area-inset-bottom, 0px) + 14px)}
}
.hero-facts{position:absolute;left:0;right:0;bottom:0;width:100%;max-width:none;margin:0;padding:14px 0;background:#000;z-index:3;overflow:hidden}
.hero-facts .hfacts-mask{overflow:hidden}
.hero-facts .hfacts-track{animation-name:hero-facts-scroll;animation-duration:260s}
@media(max-width:768px){
.hero-facts .hfacts-track{animation-duration:550s}
}
.promise-keep{white-space:nowrap}
.promise blockquote{max-width:37ch}
@media(max-width:560px){.promise blockquote{max-width:24ch}.promise-keep{white-space:normal}}
/* Promise blockquote responsive line breaks (batch3 2026-06-24): desktop/tablet break after "best?"; mobile break after "that" */
.br-dt,.br-mob{display:none}
@media(min-width:561px){.br-dt{display:inline}}
@media(max-width:560px){.br-mob{display:inline}.br-dt{display:none}}
.promise-coda{display:block;font-family:inherit;font-style:normal;font-weight:700;font-size:1em;letter-spacing:.005em;color:var(--steel)}
.promise-coda.coda-armed{opacity:1;transform:none}
#physiotherapy .svc-split,#physiotherapy-tiles .svc-split{display:block}
#physiotherapy .svc-text,#physiotherapy-tiles .svc-text{max-width:840px;margin:0 auto;text-align:center}
#physiotherapy .phys-photo{position:relative;max-width:880px;margin:30px auto 0}
#physiotherapy .phys-photo img{width:100%;height:clamp(260px,36vw,440px);object-fit:cover;border-radius:6px;box-shadow:0 30px 60px rgba(15,15,22,.16)}
#physiotherapy .conditions{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:12px;max-width:880px;margin:42px auto 34px}
#physiotherapy .conditions li{display:flex;flex-direction:column;align-items:flex-start;text-align:left;height:100%;padding:22px 22px 24px;font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px;letter-spacing:-0.01em;line-height:1.28;color:#fff;background:#000;border:1px solid #000;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
#physiotherapy .conditions li::after{content:"";display:block;width:26px;height:2px;background:#1c3d6e;border-radius:2px;margin-top:13px}
#physiotherapy .conditions li:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,15,22,.2)}
#exercise-physiology .svc-text{max-width:860px;margin:0 auto;text-align:center}
#exercise-physiology .ep-gym{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:44px auto 0}
#exercise-physiology .ep-gym img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--border)}
@media(max-width:640px){
#exercise-physiology .ep-gym{grid-template-columns:1fr;gap:12px;margin-top:32px}
}
.facility::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,22,.73) 0%,rgba(15,15,22,.65) 100%)}
.member{display:block;color:inherit;text-decoration:none;text-align:center;background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
#our-clients .sec-head{margin-left:auto;margin-right:auto;text-align:center}
#our-clients .prose{max-width:980px;margin-left:auto;margin-right:auto}
#our-clients .spec-grid{grid-template-columns:repeat(4,1fr);max-width:1080px}
#our-clients .spec-card{align-items:center;text-align:center}
#our-clients .spec-card .spec-area::after{left:50%;transform:translateX(-50%)}
@media(max-width:960px){
#our-clients .spec-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
#our-clients .spec-grid{grid-template-columns:repeat(2,1fr)}
}
#physiotherapy .spec-grid,#physiotherapy-tiles .spec-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){
#physiotherapy .spec-grid,#physiotherapy-tiles .spec-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
#physiotherapy .spec-grid,#physiotherapy-tiles .spec-grid{grid-template-columns:repeat(2,1fr)}
}
#our-principles .principles-close{text-align:center;margin-left:auto;margin-right:auto;border-left:none;padding-left:0;max-width:none}
#our-patients .prose{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;margin-top:10px}
#physiotherapy.pad{padding-bottom:clamp(64px,7vw,96px)}
#our-principles.pad{padding-top:clamp(66px,7.5vw,100px);padding-bottom:clamp(66px,7.5vw,100px)}
#our-patients.pad{padding-top:clamp(48px,5.5vw,80px);padding-bottom:clamp(34px,4vw,56px)}
#physiotherapy-tiles.pad{padding-top:clamp(34px,4vw,56px)}
.patients-sub{font-style:normal;font-weight:700;font-size:clamp(15px,1.8vw,19px);color:var(--ink);margin-top:6px;line-height:1.15;letter-spacing:-.01em}
#our-patients .sec-head h2{margin-top:0}
#our-patients .patients-sub{margin-top:6px}
.split-photo{position:relative;z-index:1}
#exercise-physiology .summary,#exercise-physiology .detail,#physiotherapy .detail{font-size:clamp(17px,1.5vw,19px);color:var(--ink);font-weight:400}
.split-photo img{width:100%;height:clamp(340px,44vw,520px);object-fit:cover;border-radius:6px;box-shadow:0 26px 54px rgba(15,15,22,.20);display:block}
@media(min-width:881px){
#our-principles .place-split{grid-template-columns:1fr 1.1fr}
}
@media(min-width:881px){
#our-patients .ps-copy .sec-head,#our-patients .ps-copy .prose{margin-left:0;margin-right:0;max-width:none;text-align:left}
}
@media(min-width:881px){
#our-principles .ps-copy .sec-head,#our-principles .ps-copy .sec-head .lead{margin-left:0;margin-right:0;max-width:none;text-align:left}
}
@media(min-width:881px){
#our-principles .ps-copy .principles-close{text-align:left;margin-left:0;max-width:28ch;border-left:3px solid var(--steel);padding-left:26px}
}
.foot-brand img{display:block}
@media(max-width:880px){
.foot-brand img{height:46px;margin-left:auto;margin-right:auto}
}
@media(max-width:560px){
.foot-brand img{height:40px;margin:0 auto 2px}
}
.mobile-panel a:hover{color:#2a3f54}
.mp-team{border-bottom:1px solid rgba(255,255,255,.1)}
.mp-team>summary{list-style:none;cursor:pointer;font-family:'Inter',sans-serif;font-weight:500;font-size:17px;color:var(--white);padding:13px 0;display:flex;align-items:center;justify-content:space-between}
.mp-team>summary:hover{color:#2a3f54}
.mp-team>summary::-webkit-details-marker{display:none}
.mp-team>summary::after{content:"+";font-size:21px;line-height:1;color:rgba(255,255,255,.55);font-weight:400}
.mp-team[open]>summary::after{content:"\2013"}
.mp-team .mp-sub{display:flex;flex-direction:column;padding:2px 0 12px}
.mp-team .mp-sub a{font-size:15px;color:rgba(255,255,255,.78);padding:9px 0 9px 14px;border-bottom:0}
.mp-team .mp-sub a:hover{color:#2a3f54}
.mp-team .mp-sub a.mp-sub-all{color:var(--white);font-weight:600}
@media(max-width:1200px){
.burger{display:flex;position:absolute;left:0;top:50%;transform:translateY(-50%);margin-left:0}
}
@media(max-width:560px){
#physiotherapy .conditions{gap:8px}
}
@media(max-width:560px){
#physiotherapy .conditions li{font-size:12px;padding:15px 9px;line-height:1.38}
}
@media(max-width:560px){
.hero{min-height:78vh;min-height:calc(100svh - 64px)}
}
#our-principles .place-split{grid-template-areas:"head" "photo" "close"}
#our-principles .ps-copy{grid-area:head}
#our-principles .split-photo{grid-area:photo}
#our-principles .principles-close{grid-area:close}
@media(min-width:881px){
#our-principles .place-split{grid-template-columns:1fr 1.1fr;grid-template-areas:"photo head" "photo close";align-items:center}
}
@media(min-width:881px){
#our-principles .principles-close{text-align:left;margin-left:0;max-width:28ch;border-left:3px solid var(--steel);padding-left:26px}
}
/* T6 — Our Story: club/credential logos sit UNDER Andrew's photo (left column), reducing the sticky-portrait scroll */
#our-story .story-grid{grid-template-areas:"portrait heading" "portrait text" "creds text";grid-template-rows:auto auto 1fr}
#our-story .creds-logos{grid-area:creds;max-width:none}
@media(max-width:880px){
#our-story .story-grid{grid-template-areas:"heading" "portrait" "creds" "text";grid-template-rows:auto auto auto auto}
#our-story .creds-logos{margin-left:auto;margin-right:auto}
}

/* Homepage section background contrast (2026-06-23):
   #physiotherapy-tiles -> dark (prev section is white); .promise -> light with
   black text. Steel/navy accents (inline "best" span + .promise-coda "Every time")
   are left untouched. home.css is index-only so this stays homepage-scoped. */
#physiotherapy-tiles{background:var(--ink)}
.promise{background:var(--white);color:var(--ink)}
.promise blockquote{color:var(--ink)}
.promise blockquote b{color:var(--ink)}

/* Mobile: force the 7 credential logos under Andrew's photo into exactly 2 rows (4 + 3).
   4 per row via flex-basis (box-sizing:border-box); justify-center centres the row of 3. */
@media(max-width:560px){
  #our-story .creds-logos{justify-content:center;gap:8px}
  #our-story .creds-logos .cred-chip{flex:0 0 calc(25% - 8px);max-width:calc(25% - 8px);height:50px;padding:5px 6px}
  #our-story .creds-logos .cred-chip img{max-width:100%;max-height:100%}
}

/* Our Story (desktop): stop Andrew's photo from being sticky, so it scrolls with the
   page instead of sliding down over the club logos beneath it. Mobile is already static. */
@media(min-width:881px){
  #our-story .story-portrait{position:relative;top:auto}
}

/* Fading premises-photo backdrop on dark sections (injected by section-bg.js).
   Strong scrim keeps the dark look and text contrast; imagery drifts subtly behind. */
.bg-fade{position:relative;overflow:hidden}
.bg-fade>.secbg-wrap{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}
.bg-fade>*:not(.secbg-wrap){position:relative;z-index:1}
.secbg-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:0;transition:opacity 2.8s cubic-bezier(0.37,0,0.63,1);will-change:opacity}
.secbg-layer.is-active{opacity:1}
.secbg-scrim{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(15,15,22,.73) 0%,rgba(15,15,22,.65) 100%);z-index:3}
@media(prefers-reduced-motion:reduce){.secbg-layer{transition:none}}


/* Send an enquiry (#contact): white section, dark text, light form. */
#contact{background:var(--white);color:var(--ink)}
#contact h2{color:var(--ink)}

/* Why Choose Aspire (#why-aspire): dark section with fading backdrop. */
#why-aspire{background:var(--ink);border-top-color:rgba(255,255,255,.14)}
#why-aspire .why-list li{color:#edf1f5}
#why-aspire .why-list li::before{color:#7fa3d0}

/* Physiotherapy photo: ~10% zoom-in (scale + crop via overflow), image not altered */
#physiotherapy .phys-photo{overflow:hidden}
#physiotherapy .phys-photo img{transform:scale(1.1);transform-origin:center}

/* Exercise Physiology: trim top, add bottom */
#exercise-physiology.pad{padding-top:clamp(44px,5.5vw,84px);padding-bottom:clamp(52px,6vw,88px)}

/* Promise section: blockquote had a 24px top margin (none at bottom), making the
   top gap larger than the bottom. Zero it so the symmetric section padding governs
   top and bottom equally. */
.promise blockquote{margin:0 auto}

/* Our Place: drop the bottom margin that showed as white space before Exercise Physiology. */
.facility{margin:0}

/* Why Choose Aspire: lighten body text for readability on the dark background. */
#why-aspire .prose,#why-aspire .prose p{color:#edf1f5}

/* Send an enquiry: form is a light-grey card on the white section, with dark
   text and white inputs for contrast. */
#contact .form{background:#f1f3f6;border:1px solid #dde1e7}
#contact .form p.sm{color:#5b626b}
#contact .form .note{color:#6b7178}
#contact .field label{color:#5b626b}
#contact .field input,#contact .field select,#contact .field textarea{background:#fff;border:1px solid #cfd5dc;color:#21202e}
#contact .field input::placeholder,#contact .field textarea::placeholder{color:#9aa0a8}
#contact .field input:focus,#contact .field select:focus,#contact .field textarea:focus{border-color:#7fa3d0;background:#fff}

/* Our Principles: lighten body text for readability on the dark background. */
#our-principles .lead,#our-principles .prose,#our-principles .prose p{color:#edf1f5}

/* Andrew's signature at the foot of the promise section. */
.promise-sign{display:block;margin:clamp(16px,2.4vw,28px) auto 0;width:clamp(118px,16vw,180px);height:auto}

/* Team + front-desk cards: white (matching the conditions tiles), dark text on the dark section. */
#team .team-grid .member,
#team .frontdesk .fd-person{background:var(--white);border-color:var(--border)}
#team .team-grid .member:hover,
#team .frontdesk .fd-person:hover{background:var(--white);border-color:#c8cfd6}
#team .member-info h4,#team .frontdesk .fd-person h4{color:var(--ink)}
#team .member-info p,#team .frontdesk .fd-person p{color:var(--body)}

/* Our Clients cards: white, matching the conditions tiles. */
#our-clients .spec-card{background:var(--white);border-color:var(--border)}
#our-clients .spec-card:hover{background:var(--white);border-color:#c8cfd6}
#our-clients .spec-card .spec-area{color:var(--ink)}
#our-clients .spec-card .spec-detail{color:var(--body)}