/* 1. Base */
:root {
  --primary: #0B4DA8;
  --primary-dark: #07276B;
  --secondary: #1E88E5;
  --accent: #14C8D6;
  --navy: #06142E;
  --bg: #F5F9FF;
  --text: #1B2A41;
  --muted: #5B6B82;
  --white: #FFFFFF;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary) 55%, var(--accent));
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; color: var(--text); background: var(--white); font: 16px/1.65 var(--font-body); }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; z-index: 3000; top: -50px; left: 12px; padding: 8px 12px; color: var(--white); background: var(--navy); }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.section { padding: 50px 0; }
.section-head { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.section-head .eyebrow { display: block; }
.section-head p { margin-right: auto; margin-left: auto; }
.eyebrow { margin: 0 0 8px; color: var(--primary); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, h4 { color: var(--navy); font-family: var(--font-heading); line-height: 1.25; }
h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { margin: 0 0 14px; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { margin: 0 0 10px; font-size: 1.15rem; }
p { margin: 0 0 16px; }
.section-title { position: relative; display: inline-block; }
.section-title::after { display: block; width: 64px; height: 3px; margin: 12px 0 0; content: ""; background: var(--gradient); border-radius: 4px; }
.section-head .section-title::after, .text-center .section-title::after { margin: 12px auto 0; }
.card { padding: 22px; background: var(--white); border: 1px solid #e1eaf4; border-radius: 14px; box-shadow: 0 8px 24px rgba(6, 20, 46, .07); }

/* 2. Header */
.site-header { position: sticky; z-index: 1000; top: 0; display: flex; height: 80px; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--white); box-shadow: 0 2px 12px rgba(7, 39, 107, .08); }
.site-header.scrolled { box-shadow: 0 4px 16px rgba(7,39,107,.14); }
.brand img { width: 176px; height: 44px; object-fit: contain; }
.desktop-nav { position: absolute; left: 50%; display: flex; align-items: center; gap: 28px; transform: translateX(-50%); }
.desktop-nav a, .mobile-menu > a:not(.btn) { color: var(--text); font-size: .92rem; font-weight: 600; }
.desktop-nav a:hover, .desktop-nav a.active, .mobile-menu a.active { color: var(--primary); }
.header-cta { margin-left: auto; }
.menu-toggle, .mobile-menu { display: none; }

/* 3. Footer */
.site-footer { padding: 40px 50px 15px; color: rgba(255,255,255,.78); background: linear-gradient(135deg, var(--navy), #092755 60%, var(--primary)); }
.footer-grid { display: grid; max-width: 1400px; grid-template-columns: 1.4fr .8fr 1.7fr 1.2fr; gap: 24px; margin: 0 auto; padding-bottom: 22px; }
.footer-brand { display: inline-block; margin-bottom: 8px; }
.footer-brand img { width: 210px; height: 53px; object-fit: contain; }
.footer-about p { max-width: 390px; margin: 0; font-size: .85rem; line-height: 1.55; }
.footer-column h2 { margin: 0 0 10px; color: var(--white); font-size: 1rem; }
.footer-column ul { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; }
.footer-column a, .footer-location { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); font-size: .82rem; }
.footer-column a:hover { color: var(--accent); }
.footer-services a { white-space: nowrap; }
.footer-contact svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent); }
.footer-bottom { max-width: 1400px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); font-size: .82rem; text-align: center; }
.footer-bottom a { color: var(--accent); }
.footer-bottom a:hover { text-decoration: underline; }
.back-to-top { position: fixed; z-index: 900; right: 20px; bottom: 20px; display: grid; width: 44px; height: 44px; place-items: center; color: var(--white); background: var(--gradient); border: 0; border-radius: 50%; box-shadow: 0 6px 20px rgba(6,20,46,.24); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s ease; cursor: pointer; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top svg { width: 22px; height: 22px; }

/* 4. Buttons */
.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; padding: 10px 20px; border: 2px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 600; transition: all .3s ease; cursor: pointer; }
.btn-primary { color: var(--white); background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 6px 18px rgba(11,77,168,.2); }
.btn-primary:hover { box-shadow: 0 10px 22px rgba(11,77,168,.3); transform: translateY(-3px); }
.btn-outline { color: var(--primary); background: transparent; border-color: var(--primary); }
.btn-outline:hover { color: var(--white); background: var(--primary); transform: translateY(-3px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn-arrow, .btn .submit-arrow, .btn > span[aria-hidden="true"] { transition: transform .3s ease; }
.btn:hover .btn-arrow, .btn:hover .submit-arrow, .btn:hover > span[aria-hidden="true"] { transform: translateX(4px); }
.home-hero .btn-outline, .home-final-cta .btn-outline, .about-final-cta .btn-outline, .services-final-cta .btn-outline, .contact-final-cta .btn-outline { color: var(--white); border-color: var(--white); }
.home-hero .btn-outline:hover, .home-final-cta .btn-outline:hover, .about-final-cta .btn-outline:hover, .services-final-cta .btn-outline:hover, .contact-final-cta .btn-outline:hover { color: var(--primary); background: var(--white); }

/* 5. Home */
.home-hero, .about-banner, .services-banner, .contact-banner, .home-final-cta, .about-final-cta, .services-final-cta, .contact-final-cta { position: relative; overflow: hidden; color: var(--white); background: linear-gradient(120deg, var(--navy), var(--primary-dark) 55%, var(--primary)); }
.home-hero { display: flex; min-height: 620px; align-items: center; padding: 60px 0 56px; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.hero-copy, .hero-visual, .final-cta-content, .about-final-content, .services-final-content, .contact-final-content { position: relative; z-index: 1; }
.hero-eyebrow, .home-hero .eyebrow, .home-final-cta .eyebrow, .about-final-cta .eyebrow, .services-final-cta .eyebrow, .contact-final-cta .eyebrow { color: #b7e9ff; }
.home-hero h1, .about-banner h1, .services-banner h1, .contact-banner h1, .home-final-cta h2, .about-final-cta h2, .services-final-cta h2, .contact-final-cta h2 { color: var(--white); }
.home-hero h1 span { color: #86f1ed; }
.hero-description { max-width: 590px; color: rgba(255,255,255,.82); }
.hero-specialties { color: #d7efff; }
.hero-actions, .final-cta-actions, .about-final-actions, .services-final-actions, .contact-final-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 24px; color: #b9d8f8; font-size: .88rem; }
.hero-visual { min-height: 440px; }
.hero-image-frame, .about-image-frame, .about-team-frame { overflow: hidden; background: var(--gradient); border-radius: 28px; }
.hero-image-frame { width: min(100%, 410px); height: 430px; margin: auto; border-radius: 45% 45% 24px 24px; }
.hero-main-image { width: 100%; height: 100%; object-fit: cover; }
.hero-float-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text); background: rgba(255,255,255,.94); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.hero-float-card strong, .hero-float-card small { display: block; }
.hero-float-card strong { color: var(--primary-dark); font-size: .9rem; }
.hero-float-card small { color: var(--muted); font-size: .73rem; }
.hero-float-clients { top: 12%; left: -2%; }
.hero-float-format { right: -3%; top: 48%; }
.hero-float-rated { bottom: 6%; left: -1%; }
.float-card-icon, .rated-stars { color: var(--secondary); }
.scroll-cue { position: absolute; right: 0; bottom: 18px; left: 0; display: flex; justify-content: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .75rem; }
.trust-strip { padding: 30px 0; background: var(--white); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.trust-item { display: grid; justify-items: center; padding: 24px 16px; text-align: center; background: #eaf3ff; border: 1px dashed rgba(11,77,168,.35); border-radius: 12px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
@media (hover: hover) {
  .trust-item:hover { transform: translateY(-4px); border-color: var(--secondary); border-style: solid; box-shadow: 0 10px 24px rgba(7,39,107,.12); }
}
.trust-icon { display: grid; width: 32px; height: 32px; place-items: center; margin-bottom: 10px; color: var(--primary); }
.trust-icon svg { width: 32px; height: 32px; stroke-width: 1.7; }
.trust-number { color: var(--primary); font: 700 2rem/1.25 var(--font-heading); }
.trust-label { color: var(--muted); font: 400 14px/1.5 var(--font-body); }
.about-stat-number { color: var(--primary); font: 700 1.7rem var(--font-heading); }
.about-home-layout, .about-who-layout, .membership-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.about-home-visual, .about-who-copy, .about-home-copy, .about-team-visual { position: relative; }
.about-image-frame, .about-team-frame { height: 520px; }
.about-home-visual, .about-team-visual { isolation: isolate; }
.about-home-visual::before, .about-team-visual::before { position: absolute; z-index: -1; top: 16px; right: 12px; bottom: -12px; left: -12px; border-radius: 28px; background: var(--gradient); content: ""; transition: transform .35s ease; }
@media (hover: hover) {
  .about-home-visual:hover::before, .about-team-visual:hover::before { transform: translate(5px,-5px); }
}
.about-image-frame img, .about-team-frame img { width: 100%; height: 520px; }
.about-image-caption { margin-top: 10px; color: var(--muted); font-size: .85rem; }
.about-intro, .section-head > p:last-child { color: var(--muted); }
.about-checklist, .service-checklist, .membership-card ul, .membership-inclusions, .offer-inclusions ul { padding-left: 0; list-style: none; }
.about-checklist li, .service-checklist li, .membership-card li, .membership-inclusions li, .offer-inclusions li { display: flex; gap: 10px; margin: 9px 0; }
.check-icon, .service-checklist li span, .membership-card li span, .membership-inclusions li span { color: var(--secondary); font-weight: 800; }
.about-promise, .trainer-membership, .contact-info-section, .contact-coverage-section, .services-home, .join-home, .newsletter-home, .about-who { background: var(--white); }
.process-home, .about-vision, .assessment-process, .booking-process, .service-faq, .enquiry-section, .contact-newsletter, .contact-faq, .membership-home, .about-bytes, .about-home { background: var(--bg); }
.services-home-grid, .join-benefits-grid, .newsletter-articles, .about-promise-grid, .contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card-icon, .vision-icon, .promise-icon, .contact-info-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 14px; color: var(--primary); background: #e7f4ff; border-radius: 12px; }
.card-icon svg, .vision-icon svg, .promise-icon svg, .contact-info-icon svg { width: 26px; height: 26px; }
.service-card p, .benefit-card p, .article-bio { color: var(--muted); font-size: .88rem; }
.service-learn, .contact-faq-link { color: var(--primary); font-weight: 700; }
.services-more { margin-top: 24px; text-align: center; }
.process-timeline, .assessment-timeline, .booking-steps { display: grid; gap: 18px; padding: 0; list-style: none; }
.process-step p, .assessment-card p:last-child, .booking-step p { color: var(--muted); font-size: .88rem; }
.promise-home, .about-why { padding: 64px 0; color: var(--white); background: linear-gradient(120deg, var(--navy), var(--primary-dark)); }
.promise-home h2, .about-why h2 { color: var(--white); }
.promise-home .eyebrow, .about-why .eyebrow { color: #a9eff0; }
.promise-heading { text-align: center; }
.promise-heading p:last-child, .about-why-heading > p:last-child { color: rgba(255,255,255,.8); }
.promise-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; list-style: none; }
.promise-list li { display: flex; gap: 10px; padding: 14px; background: rgba(255,255,255,.08); border-radius: 10px; }
.promise-list li span:first-child { color: var(--accent); }
.membership-card, .trainer-dues-card { padding: 26px; background: var(--white); border: 1px solid #dce8f4; border-radius: 16px; box-shadow: 0 10px 28px rgba(6,20,46,.1); }
.membership-kicker, .membership-detail-label, .offer-kicker { color: var(--primary); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.membership-price, .dues-price, .offer-price { color: var(--primary); font-size: 1.35rem; }
.membership-price strong, .dues-price strong, .offer-price strong { font: 700 2rem var(--font-heading); }
.membership-includes { display: grid; gap: 4px; margin: 14px 0; padding: 14px; background: var(--bg); border-radius: 10px; }
.membership-includes span { color: var(--muted); font-size: .78rem; }
.badge { display: inline-block; margin-bottom: 12px; padding: 5px 10px; color: var(--primary-dark); background: #e8f8fb; border-radius: 99px; font-size: .8rem; }
.article-index { color: var(--secondary); font-weight: 700; }
.article-index span { display: block; font-size: .68rem; letter-spacing: .1em; }
.article-author { margin: 0; font-weight: 700; }
.newsletter-subscribe { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 22px 28px; background: var(--bg); border-radius: 999px; }
.subscribe-copy h3 { margin: 0; }
.subscribe-control, .contact-newsletter-control { display: flex; gap: 8px; }
.subscribe-control input, .contact-newsletter-control input { min-width: 0; padding: 10px 14px; border: 1px solid #cbd9e8; border-radius: 99px; }
.subscribe-message { min-height: 20px; margin: 5px 0 0; color: #087c55; font-size: .85rem; }
.subscribe-message.is-error { color: #b42318; }
.home-final-cta, .about-final-cta, .services-final-cta, .contact-final-cta { padding: 60px 0; text-align: center; }
.final-cta-content h2, .about-final-content h2, .services-final-content h2, .contact-final-content h2 { max-width: 850px; margin: 0 auto 16px; }
.final-cta-content > p:not(.eyebrow), .about-final-content > p:not(.eyebrow), .services-final-content > p:not(.eyebrow), .contact-final-content > p:not(.eyebrow) { color: rgba(255,255,255,.8); }
.final-cta-actions, .about-final-actions, .services-final-actions, .contact-final-actions { justify-content: center; }

/* 6. About */
.about-banner, .services-banner, .contact-banner { padding: 65px 0; }
.about-banner-content, .services-banner-content, .contact-banner-content { position: relative; z-index: 1; }
.about-breadcrumb, .services-breadcrumb, .contact-breadcrumb { display: flex; gap: 10px; margin-bottom: 20px; color: rgba(255,255,255,.75); font-size: .85rem; }
.about-breadcrumb a, .services-breadcrumb a, .contact-breadcrumb a { color: #a4edf2; }
.about-banner .eyebrow, .services-banner .eyebrow, .contact-banner .eyebrow { color: #b7e9ff; }
.about-banner-subtitle, .services-banner-subtitle, .contact-banner-subtitle { max-width: 700px; color: rgba(255,255,255,.82); }
.page-banner { padding: 50px 0; color: var(--white); background: linear-gradient(120deg, var(--navy), var(--primary-dark) 55%, var(--primary)); }
.page-banner .breadcrumb { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }
.page-banner .breadcrumb a { color: var(--accent); }
.page-banner h1 { margin: 8px 0 0; color: var(--white); font: 700 36px/1.2 var(--font-heading); }
.about-team-visual figcaption { margin-top: 10px; color: var(--muted); font-size: .85rem; }
.about-facts, .about-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.about-fact, .about-stat { display: grid; padding: 14px; background: var(--bg); border-radius: 10px; }
.vision-mission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vision-card { padding: 24px; background: var(--bg); border-radius: 14px; }
.vision-label { color: var(--primary); font-weight: 700; }
.vision-card > p:last-child, .promise-item p { color: var(--muted); }
.about-promise-grid { grid-template-columns: repeat(5, 1fr); }
.promise-item { padding: 18px; background: var(--bg); border-radius: 12px; }
.assessment-step { position: relative; }
.assessment-card { height: 100%; }
.membership-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.trainer-profile-card { padding: 24px; background: var(--bg); border-radius: 14px; }
.profile-rating { color: var(--primary); font-size: .85rem; font-weight: 600; }
.guidelines-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 28px; margin-top: 30px; }
.guideline-item, .service-faq-item, .contact-faq-item { border-bottom: 1px solid #dce8f4; }
.guideline-toggle, .service-faq-toggle, .contact-faq-toggle { display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 14px 0; color: var(--text); background: transparent; border: 0; text-align: left; font-weight: 700; cursor: pointer; }
.guideline-panel, .service-faq-panel, .contact-faq-panel { display: none; padding: 0 0 14px; color: var(--muted); font-size: .9rem; }
.guideline-item.is-open .guideline-panel, .service-faq-item.is-open .service-faq-panel, .contact-faq-item.is-open .contact-faq-panel { display: block; }
.about-why-content { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; }
.about-stat-grid { grid-template-columns: repeat(2, 1fr); }
.about-stat { background: rgba(255,255,255,.1); color: var(--white); }
.about-stat-number { color: #87eff0; }
.about-why .about-stat { background: transparent; border: 0; box-shadow: none; text-align: center; }
.about-why .about-stat::before { display: none; }
.about-why-heading, .service-faq-intro, .contact-faq-intro, .enquiry-intro { margin: 0; }
.about-why-content { display: block; }
.about-why-heading { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.about-stat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.about-bytes-inner { display: flex; align-items: center; gap: 22px; padding: 24px; background: var(--bg); border-radius: 14px; }
.bytes-emblem, .newsletter-mark { display: grid; width: 64px; height: 64px; flex: 0 0 64px; place-items: center; color: var(--white); background: var(--gradient); border-radius: 16px; font-weight: 700; }
.bytes-copy { flex: 1; }
.bytes-copy h2 { margin-bottom: 4px; }
.bytes-copy p:last-child { margin: 0; color: var(--muted); }

/* 7. Services */
.service-detail { scroll-margin-top: 120px; }
.service-programs > .service-detail:nth-child(odd) { background: var(--white); }
.service-programs > .service-detail:nth-child(even) { background: var(--bg); }
.service-detail-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 44px; }
.service-detail-reverse .service-detail-visual { order: 2; }
.service-detail-reverse .service-detail-copy { order: 1; }
.service-detail-visual { position: relative; isolation: isolate; min-width: 0; margin: 0; padding: 0 14px 14px 0; }
.service-detail-image { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gradient); border-radius: 50%; }
.service-detail-image img { width: 100%; height: 100%; }
.service-watermark { position: absolute; z-index: 2; right: 22px; bottom: 14px; left: auto; color: rgba(11,77,168,.2); font: 800 5.5rem/1 var(--font-heading); }
.service-description { color: var(--muted); }
.service-list-title { margin: 18px 0 8px; }
.service-checklist { margin: 0 0 18px; }
.brand-offer-container { margin-top: 28px; }
.brand-offer { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 26px; background: var(--white); border-radius: 16px; box-shadow: 0 8px 28px rgba(11,77,168,.12); }
.offer-ribbon { position: absolute; top: 0; right: 20px; padding: 5px 12px; color: var(--white); background: var(--primary); font-size: .72rem; font-weight: 700; }
.offer-copy { padding-top: 16px; }
.offer-inclusions { grid-row: span 2; }
.offer-inclusions ul { margin-bottom: 0; }
.offer-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; grid-column: 1 / -1; }
.offer-footer p { margin: 0; color: var(--primary); font-weight: 700; }
.booking-steps { grid-template-columns: repeat(4, 1fr); }
.services-page .booking-process { background: var(--white); }
.services-page .service-faq { background: var(--bg); }
.services-page .services-final-actions { justify-content: center; }
.service-faq-layout, .contact-faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; }
.service-faq-intro { align-self: start; }

/* 8. Contact */
.contact-info-grid { grid-template-columns: repeat(3, 1fr); }
.contact-info-card { min-height: 225px; }
.contact-info-label { margin: 12px 0 2px; color: var(--primary); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.contact-info-card > p:last-child { margin-top: 10px; color: var(--muted); font-size: .85rem; }
.contact-info-link, .contact-info-secondary { color: var(--primary); font-weight: 700; overflow-wrap: anywhere; }
.contact-info-secondary { margin-top: 8px; font-size: .85rem; }
.enquiry-section { background: var(--bg); }
.enquiry-layout { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: 42px; }
.enquiry-intro { position: sticky; top: 90px; }
.enquiry-promise { padding: 14px; background: #e8f3ff; border-radius: 10px; }
.contact-form, .trainer-wizard { padding: 24px; background: var(--white); border: 1px solid #e1eaf4; border-radius: 14px; box-shadow: 0 8px 24px rgba(6,20,46,.07); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.form-field-full { grid-column: 1 / -1; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 48px; padding: 12px; color: var(--text); background: var(--white); border: 1px solid #cbd9e8; border-radius: 8px; }
.form-field textarea { resize: vertical; }
.form-field label, .photo-label { color: var(--text); font-size: .85rem; font-weight: 600; }
.form-field label span, .terms-agree b { color: #bd2c24; }
.field-error, .photo-status { min-height: 16px; color: #b42318; font-size: .76rem; }
[aria-invalid="true"] { border-color: #b42318; }
.honeypot-field { position: absolute; left: -10000px; }
.form-submit { margin-top: 16px; }
.form-status, .wizard-message { min-height: 22px; margin: 10px 0 0; color: #087c55; font-size: .85rem; }
.form-status.is-error, .wizard-message.is-error, .photo-status.is-error { color: #b42318; }
.trainer-join-section { background: var(--white); }
.trainer-fee-note { display: flex; gap: 16px; margin-bottom: 20px; padding: 18px; background: #e8f3ff; border-radius: 12px; }
.trainer-fee-note h3, .trainer-fee-note p { margin: 0 0 5px; }
.fee-note-icon { color: var(--primary); font-size: 1.5rem; }
.wizard-progress { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 24px; }
.wizard-progress-step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; }
.wizard-progress-step > span { display: grid; width: 30px; height: 30px; place-items: center; color: var(--white); background: #9aabba; border-radius: 50%; }
.wizard-progress-step.is-current > span, .wizard-progress-step.is-complete > span { background: var(--primary); }
.wizard-panel[hidden] { display: none; }
.wizard-panel-title { margin-bottom: 5px; }
.wizard-panel-intro { color: var(--muted); }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wizard-actions-end { justify-content: flex-end; }
.photo-field input[type="file"] { padding: 10px; }
.photo-hint { color: var(--muted); font-size: .78rem; font-weight: 400; }
.photo-preview { width: 88px; height: 88px; margin-top: 8px; border-radius: 50%; object-fit: cover; }
.domain-fieldset { padding: 0; border: 0; }
.domain-fieldset legend { font-weight: 700; }
.domain-fieldset > p { color: var(--muted); font-size: .85rem; }
.domain-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.domain-chip input { position: absolute; opacity: 0; }
.domain-chip span { display: inline-block; padding: 8px 12px; background: var(--bg); border: 1px solid #d4dfeb; border-radius: 99px; cursor: pointer; }
.domain-chip input:checked + span { color: var(--white); background: var(--primary); }
.trainer-terms { max-height: 240px; overflow-y: auto; padding: 14px; background: var(--bg); border: 1px solid #d8e3ef; border-radius: 8px; }
.trainer-terms li { margin-bottom: 10px; }
.terms-agree { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; }
.trainer-review { margin-top: 14px; padding: 14px; background: var(--bg); border-radius: 8px; }
.trainer-review h4 { margin: 0 0 8px; }
.review-summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.review-summary dt { color: var(--muted); }
.review-summary dd { margin: 0; font-weight: 600; }
.contact-newsletter { background: var(--bg); }
.contact-newsletter-card { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 20px; padding: 22px; background: var(--white); border-radius: 14px; }
.contact-newsletter-copy h2 { margin: 0; }
.contact-newsletter-copy p:last-child { margin: 5px 0 0; color: var(--muted); }
.contact-newsletter-control input { flex: 1; }
.contact-coverage-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 28px; padding: 20px; background: var(--bg); border-radius: 14px; }
.coverage-visual { position: relative; min-height: 270px; overflow: hidden; background: var(--gradient); border-radius: 12px; }
.coverage-visual img { position: absolute; width: 100%; height: 100%; }
.coverage-caption { position: absolute; right: 12px; bottom: 12px; left: 12px; color: var(--white); font-weight: 700; text-shadow: 0 1px 5px #000; }
.coverage-copy h2 { font-size: 1.6rem; }
.coverage-copy > p:not(.eyebrow) { color: var(--muted); }
.service-faq { background: var(--white); }

/* Component: Service card */
.service-card { position: relative; overflow: hidden; padding: 26px; background: var(--white); border: 1px solid rgba(11,77,168,.1); box-shadow: 0 8px 24px rgba(6,20,46,.06); }
.service-card-number { position: absolute; top: 10px; right: 16px; color: transparent; font: 800 4.5rem/1 var(--font-heading); -webkit-text-stroke: 1px rgba(11,77,168,.18); transition: color .35s ease; }
.service-card .card-icon { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 15px; }
.service-card h3, .service-card p, .service-card .service-learn { position: relative; z-index: 1; }
.service-card::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; content: ""; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.service-card .service-learn span, .article-read span { display: inline-block; transition: transform .3s ease; }
.service-card.reveal.show { transition: opacity .7s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease; transition-delay: 0s; }
@media (hover: hover) {
  .service-card.reveal.show:hover { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(11,77,168,.15); border-color: var(--secondary); }
  .service-card:hover::after { transform: scaleX(1); }
  .service-card:hover .service-card-number { color: transparent; -webkit-text-stroke-color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; }
  .service-card:hover .service-learn span { transform: translateX(5px); }
}

/* Component: Benefit tile */
.benefit-card { display: flex; align-items: center; gap: 16px; min-height: 128px; padding: 20px; background: var(--bg); border: 1px solid rgba(11,77,168,.08); box-shadow: none; transition: color .35s ease, background .35s ease, border-color .35s ease; }
.benefit-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ""; background: var(--accent); }
.benefit-card .card-icon { flex: 0 0 50px; width: 50px; height: 50px; margin: 0; border-radius: 50%; transition: color .35s ease, background .35s ease; }
.benefit-copy h3 { margin-bottom: 5px; }
.benefit-copy p { margin: 0; }
.benefit-card.reveal.show { transition: opacity .7s ease, color .35s ease, background .35s ease, border-color .35s ease; transition-delay: 0s; }
@media (hover: hover) {
  .benefit-card:hover { color: var(--white); background: var(--gradient); border-color: var(--secondary); }
  .benefit-card:hover h3, .benefit-card:hover p { color: var(--white); }
  .benefit-card:hover .card-icon { color: var(--primary); background: var(--white); }
}

/* Component: Article card */
.article-card { overflow: hidden; padding: 0 0 22px; background: var(--white); border: 1px solid rgba(11,77,168,.1); box-shadow: 0 5px 18px rgba(6,20,46,.05); }
.article-band { position: relative; display: flex; min-height: 126px; align-items: flex-start; justify-content: space-between; overflow: hidden; padding: 20px; color: var(--white); background: linear-gradient(120deg, var(--primary), var(--secondary), var(--primary)); background-size: 220% 100%; background-position: 0 50%; transition: background-position .4s ease; }
.article-band .article-index { position: relative; z-index: 1; color: var(--white); font: 700 35px var(--font-heading); }
.article-band .article-index span { display: block; margin-top: 5px; font: 600 19px var(--font-body); }
.article-band > svg { position: absolute; right: 18px; bottom: -7px; width: 78px; height: 78px; color: rgba(255,255,255,.26); stroke-width: 1.2; transition: transform .35s ease; }
.article-card h3, .article-card .article-author, .article-card .article-bio, .article-card .article-read { margin-right: 22px; margin-left: 22px; }
.article-card h3 { margin-top: 20px; }
.article-read { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--primary); font-weight: 700; }
.article-card.reveal.show { transition: opacity .7s ease, box-shadow .35s ease, border-color .35s ease; transition-delay: 0s; }
@media (hover: hover) {
  .article-card:hover { box-shadow: 0 14px 30px rgba(11,77,168,.15); border-color: var(--secondary); }
  .article-card:hover .article-band { background-position: 100% 50%; }
  .article-card:hover .article-band > svg { transform: rotate(-7deg) scale(1.08); }
  .article-card:hover .article-read span { transform: translateX(5px); }
}

/* Component: Step timeline */
.process-home .process-timeline { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.process-home .process-timeline::before { position: absolute; top: 27px; right: 10%; left: 10%; border-top: 2px dashed rgba(11,77,168,.28); content: ""; }
.process-step { position: relative; z-index: 1; padding: 0 8px; background: transparent; text-align: center; }
.step-number, .assessment-number, .booking-step-number { display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto 18px; color: var(--primary); background: var(--white); border: 2px solid var(--secondary); border-radius: 50%; font: 700 1.15rem var(--font-heading); transition: color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease; }
.process-step h3, .assessment-card h3, .booking-step h3 { transition: color .35s ease; }
.process-step p, .assessment-card p:last-child, .booking-step p { color: var(--muted); font-size: .88rem; }
.process-step.reveal.show, .assessment-step.reveal.show, .booking-step.reveal.show { transition: opacity .7s ease; transition-delay: 0s; }
.assessment-timeline { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 850px; margin: 0 auto; }
.assessment-timeline::before { position: absolute; top: 10px; bottom: 10px; left: 50%; width: 2px; content: ""; background: linear-gradient(var(--primary), var(--accent)); transform: translateX(-50%); }
.assessment-step { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: start; gap: 0; }
.assessment-step:nth-child(odd) .assessment-card { grid-column: 1; grid-row: 1; text-align: right; }
.assessment-step:nth-child(even) .assessment-card { grid-column: 3; grid-row: 1; }
.assessment-number { z-index: 1; grid-column: 2; grid-row: 1; margin: 8px auto 0; }
.assessment-card { padding: 12px 18px; background: transparent; }
.assessment-kicker { color: var(--secondary); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.booking-steps { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.booking-step { position: relative; min-height: 200px; padding: 24px 24px 20px 34px; background: var(--white); border: 1px solid rgba(11,77,168,.12); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%); text-align: center; }
.booking-step:first-child { padding-left: 24px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); }
.booking-step-number { margin-bottom: 14px; }
@media (hover: hover) {
  .process-step:hover .step-number, .assessment-step:hover .assessment-number, .booking-step:hover .booking-step-number { color: var(--white); background: var(--gradient); border-color: transparent; transform: scale(1.1); box-shadow: 0 0 0 7px rgba(20,200,214,.16); }
  .process-step:hover h3, .assessment-step:hover h3, .booking-step:hover h3 { color: var(--primary); }
}

/* Component: Glass promise item */
.promise-list li, .about-promise .promise-item, .about-stat { position: relative; overflow: hidden; color: var(--white); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.promise-list li { padding: 14px 16px 14px 20px; }
.promise-list li::before, .about-promise .promise-item::before, .about-stat::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; content: ""; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
.promise-list li > span:first-child, .about-promise .promise-icon { flex: 0 0 auto; color: var(--accent); }
.about-promise-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; }
.about-promise .promise-item { padding: 12px 18px; background: transparent; border: 0; border-right: 1px solid rgba(11,77,168,.16); text-align: center; }
.about-promise .promise-item:last-child { border-right: 0; }
.about-promise .promise-item, .about-promise .promise-item h3 { color: var(--navy); }
.about-promise .promise-icon { display: grid; width: 44px; height: 44px; place-items: center; margin: 0 auto 12px; transition: color .35s ease, transform .35s ease; }
.about-promise .promise-item p { color: var(--muted); font-size: .84rem; }
.promise-list li.reveal.show, .about-promise .promise-item.reveal.show, .about-stat.reveal.show { transition: opacity .7s ease, transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease; transition-delay: 0s; }
@media (hover: hover) {
  .promise-list li.reveal.show:hover { transform: translateX(6px); background: rgba(255,255,255,.12); border-color: var(--accent); box-shadow: 0 0 18px rgba(20,200,214,.12); }
  .promise-list li:hover::before { transform: scaleY(1); }
  .about-promise .promise-item:hover .promise-icon { color: var(--secondary); transform: scale(1.08); }
  .about-why .about-stat:hover { transform: none; background: transparent; border-color: transparent; box-shadow: none; }
}

/* Component: Contact card */
.contact-info-card { display: grid; align-items: center; justify-items: center; padding: 26px; background: var(--bg); border: 1px solid rgba(11,77,168,.1); text-align: center; }
.contact-info-icon { width: 68px; height: 68px; margin: 0 auto 16px; color: var(--primary); background: var(--white); border-radius: 50%; transition: color .35s ease, background .35s ease, transform .35s ease; }
.contact-info-card.reveal.show { transition: opacity .7s ease, transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease; transition-delay: 0s; }
@media (hover: hover) {
  .contact-info-card.reveal.show:hover { color: var(--white); background: var(--gradient); transform: translateY(-6px); box-shadow: 0 14px 30px rgba(11,77,168,.2); }
  .contact-info-card:hover h3, .contact-info-card:hover p, .contact-info-card:hover a { color: var(--white); }
  .contact-info-card:hover .contact-info-icon { color: var(--white); background: rgba(255,255,255,.15); transform: scale(1.08); }
}

/* Component: Vision and mission cards */
.vision-card { position: relative; overflow: hidden; padding: 30px; background: var(--white); border: 1px solid var(--secondary); border-radius: 16px; }
.vision-card:first-child { color: var(--white); background: var(--gradient); }
.vision-card:first-child h3, .vision-card:first-child p, .vision-card:first-child .vision-label { color: var(--white); }
.vision-icon { position: relative; z-index: 1; width: 62px; height: 62px; color: var(--primary); background: var(--bg); }
.vision-card:first-child .vision-icon { color: var(--white); background: rgba(255,255,255,.16); }
.vision-icon-back { position: absolute; right: 8px; bottom: 0; color: rgba(11,77,168,.08); }
.vision-icon-back svg { width: 190px; height: 190px; stroke-width: 1; transition: transform .35s ease; }
.vision-card:first-child .vision-icon-back { color: rgba(255,255,255,.12); }
.vision-card::after { position: absolute; right: 10px; bottom: -24px; width: 150px; height: 150px; border: 14px solid rgba(20,200,214,.08); border-radius: 50%; content: ""; transition: transform .35s ease; }
.vision-card.reveal.show { transition: opacity .7s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease; transition-delay: 0s; }
@media (hover: hover) {
  .vision-card.reveal.show:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(11,77,168,.16); }
  .vision-card:hover::after { transform: translate(-12px,-12px) rotate(16deg); }
  .vision-card:hover .vision-icon-back svg { transform: translate(-8px,-5px) rotate(8deg); }
}

/* Component: Membership and offer */
.membership-layout { grid-template-columns: 1fr; justify-items: center; }
.membership-copy { max-width: 700px; text-align: center; }
.membership-copy .section-title::after { margin-right: auto; margin-left: auto; }
.membership-feature { display: grid; width: min(100%, 900px); grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.trainer-membership .container { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
.trainer-membership .section-head { grid-column: 1 / -1; }
.trainer-membership .membership-details-grid { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; }
.trainer-membership .guidelines-wrap { display: block; grid-column: 2; grid-row: 2; margin-top: 0; }
.trainer-membership .guidelines-intro { margin-bottom: 14px; }
.trainer-membership .guidelines-intro .eyebrow, .trainer-membership .guidelines-intro h3 { text-align: left; }
.membership-card, .trainer-dues-card, .brand-offer { position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 16px; background: linear-gradient(var(--white),var(--white)) padding-box, linear-gradient(110deg,var(--primary),var(--accent),var(--secondary),var(--primary)) border-box; background-size: auto, 240% 100%; box-shadow: 0 10px 28px rgba(6,20,46,.1); transition: transform .35s ease, box-shadow .35s ease, background-position .35s ease; }
.membership-card { padding: 28px; }
.membership-card.reveal.show, .trainer-dues-card.reveal.show, .brand-offer.reveal.show { transition: opacity .7s ease, transform .35s ease, box-shadow .35s ease, background-position .35s ease; transition-delay: 0s; }
.membership-card .membership-kicker { display: inline-block; margin-bottom: 12px; padding: 5px 12px; color: var(--white); background: var(--gradient); border-radius: 999px; font-size: .72rem; letter-spacing: .08em; }
.trainer-dues-card .membership-detail-label { display: inline-block; margin-bottom: 12px; padding: 5px 12px; color: var(--white); background: var(--gradient); border-radius: 999px; font-size: .72rem; letter-spacing: .08em; }
.membership-benefit-list { display: grid; gap: 14px; padding: 20px 0; list-style: none; }
.membership-benefit-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--white); border-bottom: 1px solid rgba(11,77,168,.12); }
.membership-benefit-list li span { color: var(--secondary); font-weight: 800; }
.membership-cta { grid-column: 1 / -1; justify-self: center; }
.trainer-profile-card { padding: 24px; background: var(--white); border: 1px solid rgba(11,77,168,.1); border-radius: 14px; }
@media (hover: hover) {
  .membership-card.reveal.show:hover, .trainer-dues-card.reveal.show:hover, .brand-offer.reveal.show:hover { transform: translateY(-6px); background-position: 0 0, 100% 50%; box-shadow: 0 18px 38px rgba(11,77,168,.2); }
}

/* Component: FAQ and accordion */
.guideline-item, .service-faq-item, .contact-faq-item { padding: 0 14px; background: var(--white); border: 0; border-bottom: 1px solid rgba(11,77,168,.18); border-left: 2px solid transparent; transition: border-color .35s ease, color .35s ease; }
.guideline-item.reveal.show, .service-faq-item.reveal.show, .contact-faq-item.reveal.show { transition: opacity .7s ease, border-color .35s ease, color .35s ease; transition-delay: 0s; }
.guideline-toggle, .service-faq-toggle, .contact-faq-toggle { padding: 16px 0; }
.guideline-indicator, .service-faq-indicator, .contact-faq-indicator { display: inline-grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(11,77,168,.25); border-radius: 50%; transition: transform .35s ease, color .35s ease, border-color .35s ease; }
.guideline-indicator::before, .service-faq-indicator::before, .contact-faq-indicator::before { content: "+"; }
.guideline-toggle[aria-expanded="true"] .guideline-indicator, .service-faq-toggle[aria-expanded="true"] .service-faq-indicator, .contact-faq-toggle[aria-expanded="true"] .contact-faq-indicator { color: var(--primary); border-color: var(--secondary); transform: rotate(90deg); }
@media (hover: hover) {
  .guideline-item:hover, .service-faq-item:hover, .contact-faq-item:hover { border-left-color: var(--accent); }
  .guideline-item:hover .guideline-toggle, .service-faq-item:hover .service-faq-toggle, .contact-faq-item:hover .contact-faq-toggle { color: var(--primary); }
}

/* Component: Service image frames */
.about-image-frame, .about-team-frame { position: relative; z-index: 1; overflow: hidden; border-radius: 22px; }
.service-detail-visual::before { position: absolute; z-index: 0; inset: 0 14px 14px 0; border-radius: 50%; background: var(--gradient); content: ""; transform: translate(14px,14px); }
.service-detail-image img, .about-image-frame img, .about-team-frame img { transition: transform .35s ease; }
.service-detail-image img.reveal.show, .about-image-frame img.reveal.show, .about-team-frame img.reveal.show { transition: opacity .7s ease, transform .35s ease; transition-delay: 0s; }
@media (hover: hover) {
  .service-detail-visual:hover .service-detail-image img.reveal.show, .about-image-frame:hover img.reveal.show, .about-team-frame:hover img.reveal.show { transform: scale(1.05); }
}
.service-checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.service-checklist li { align-items: center; gap: 6px; margin: 0; padding: 7px 10px; background: var(--white); border: 1px solid rgba(11,77,168,.1); border-radius: 999px; font-size: .83rem; }
.service-checklist li span { display: inline-grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: var(--white); background: var(--primary); border-radius: 50%; font-size: .7rem; }

/* Component: Enquiry and newsletter panels */
.enquiry-intro { padding: 28px; color: var(--white); background: var(--gradient); border-radius: 16px; }
.enquiry-intro h2, .enquiry-intro h3, .enquiry-intro p, .enquiry-intro a { color: var(--white); }
.contact-form { background: var(--white); border: 1px solid rgba(11,77,168,.1); border-radius: 16px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .subscribe-control input:focus, .contact-newsletter-control input:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 4px rgba(11,77,168,.12); }
.contact-newsletter-card, .newsletter-subscribe { background: var(--gradient); color: var(--white); border-radius: 999px; }
.contact-newsletter-card h2, .contact-newsletter-card h3, .contact-newsletter-card p, .newsletter-subscribe h3, .newsletter-subscribe p { color: var(--white); }
.contact-coverage-card { padding: 20px; background: var(--white); border: 1px solid rgba(11,77,168,.1); border-radius: 16px; }
.wizard-progress { position: relative; }
.wizard-progress-step { position: relative; z-index: 1; flex: 1; }
.wizard-progress-step:not(:last-child)::after { position: absolute; z-index: -1; top: 14px; right: -50%; left: 30px; height: 2px; background: rgba(11,77,168,.18); content: ""; }
.trust-item.reveal.show { transition: opacity .7s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease; transition-delay: 0s; }

/* 9. Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--reveal-delay, 0s); }
.reveal.show { opacity: 1; transform: none; }
.delay-1 { --reveal-delay: .1s; }
.delay-2 { --reveal-delay: .2s; }
.delay-3 { --reveal-delay: .3s; }
.delay-4 { --reveal-delay: .4s; }
.trainer-profile-card.reveal.show { transition: opacity .7s ease, border-color .35s ease, box-shadow .35s ease; transition-delay: 0s; }
.contact-newsletter-card.reveal.show, .contact-coverage-card.reveal.show { transition: opacity .7s ease, background .35s ease, border-color .35s ease; transition-delay: 0s; }
.preloader-active { overflow: hidden; }
.preloader { position: fixed; z-index: 2500; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #FFFFFF, #EAF3FF); opacity: 1; transition: opacity .5s ease; }
.preloader.hide { opacity: 0; pointer-events: none; }
.preloader img { width: 50px; height: 50px; object-fit: contain; animation: preloader-pulse 1.2s ease-in-out infinite; }
.loader-content { display: grid; place-items: center; }
@keyframes preloader-pulse {
  0%, 100% { opacity: .7; transform: scale(1); filter: drop-shadow(0 0 0 rgba(20,200,214,0)); }
  50% { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(20,200,214,.45)); }
}
.cursor-dot, .cursor-ring { position: fixed; z-index: 2200; top: 0; left: 0; pointer-events: none; border-radius: 50%; }
.cursor-dot { width: 6px; height: 6px; margin: -3px; background: var(--accent); }
.cursor-ring { width: 30px; height: 30px; margin: -15px; border: 1px solid var(--secondary); transition: width .2s, height .2s; }
.cursor-ring.hover { width: 42px; height: 42px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none; transition: none; }
  .preloader img { animation: none; }
  .reveal, .reveal.show { opacity: 1; transform: none; }
  .service-card:hover, .service-card:hover::after, .benefit-card:hover, .article-card:hover,
  .service-card:hover .service-learn span, .article-card:hover .article-band > svg,
  .article-card:hover .article-read span, .process-step:hover .step-number,
  .assessment-step:hover .assessment-number, .booking-step:hover .booking-step-number,
  .promise-list li:hover, .about-promise .promise-item:hover, .about-stat:hover,
  .about-promise .promise-item:hover .promise-icon, .contact-info-card:hover,
  .contact-info-card:hover .contact-info-icon, .vision-card:hover, .vision-card:hover::after,
  .membership-card:hover,
  .trainer-dues-card:hover, .brand-offer:hover,
  .service-detail-visual:hover .service-detail-image img, .about-image-frame:hover img,
  .about-team-frame:hover img, .about-home-visual:hover::before, .about-team-visual:hover::before,
  .vision-card:hover .vision-icon-back svg, .guideline-toggle[aria-expanded="true"] .guideline-indicator,
  .service-faq-toggle[aria-expanded="true"] .service-faq-indicator,
  .contact-faq-toggle[aria-expanded="true"] .contact-faq-indicator,
  .trust-item:hover, .btn:hover, .btn:hover .btn-arrow, .btn:hover .submit-arrow,
  .btn:hover > span[aria-hidden="true"], .back-to-top:hover { transform: none; box-shadow: none; }
}

/* 10. Responsive */
@media (max-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: grid; width: 42px; height: 42px; align-content: center; justify-items: center; gap: 5px; padding: 0; background: var(--white); border: 1px solid #d7e4f2; border-radius: 50%; }
  .menu-toggle span { width: 18px; height: 2px; background: var(--primary-dark); }
  .mobile-menu { position: absolute; top: 64px; right: 0; left: 0; display: none; padding: 18px 20px 24px; background: var(--white); box-shadow: 0 10px 18px rgba(6,20,46,.12); }
  .mobile-menu.open { display: grid; gap: 14px; }
  .mobile-menu > a:not(.btn) { padding: 5px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-services a { white-space: normal; }
  .hero-layout, .about-home-layout, .about-who-layout, .membership-layout, .service-detail-layout, .contact-coverage-card { gap: 28px; }
  .about-promise-grid { grid-template-columns: repeat(3, 1fr); }
  .process-timeline, .assessment-timeline, .booking-steps { grid-template-columns: 1fr 1fr; }
  .enquiry-layout, .about-why-content, .guidelines-wrap, .service-faq-layout, .contact-faq-layout { grid-template-columns: 1fr; }
  .enquiry-intro { position: static; }
  .contact-newsletter-card { grid-template-columns: auto 1fr; }
  .contact-newsletter-form { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .section { padding: 46px 0; }
  .page-banner { padding: 35px 0; }
  .page-banner h1 { font-size: 28px; }
  .site-header { height: 56px; }
  .brand img { width: 160px; height: 40px; }
  .mobile-menu { top: 56px; }
  .footer-grid, .hero-layout, .about-home-layout, .about-who-layout, .membership-layout, .vision-mission-grid, .membership-details-grid, .service-detail-layout, .contact-info-grid, .form-grid, .contact-coverage-card { grid-template-columns: 1fr; }
  .site-footer { padding: 32px 20px 15px; }
  .footer-grid { gap: 20px; }
  .footer-services a { white-space: normal; }
  .home-hero { min-height: auto; padding: 48px 0 48px; }
  .hero-visual { min-height: 360px; }
  .hero-image-frame { height: 340px; }
  .hero-float-clients { left: 0; }
  .hero-float-format { right: 0; }
  .trust-strip { padding: 32px 0; }
  .trust-grid { gap: 12px; }
  .trust-item { padding: 20px 10px; }
  .services-home-grid, .join-benefits-grid, .newsletter-articles, .about-promise-grid { grid-template-columns: 1fr; }
  .process-timeline, .assessment-timeline, .booking-steps, .promise-list, .about-stat-grid { grid-template-columns: 1fr; }
  .service-detail-reverse .service-detail-visual, .service-detail-reverse .service-detail-copy { order: initial; }
  .brand-offer { grid-template-columns: 1fr; padding: 20px; }
  .offer-inclusions { grid-row: auto; }
  .offer-footer { align-items: flex-start; flex-direction: column; grid-column: auto; }
  .newsletter-subscribe, .about-bytes-inner { align-items: flex-start; flex-direction: column; }
  .subscribe-form, .subscribe-control, .contact-newsletter-control { width: 100%; }
  .subscribe-control { flex-direction: column; }
  .about-image-frame, .about-team-frame { height: 280px; }
  .contact-newsletter-card { grid-template-columns: 1fr; }
  .contact-newsletter-form { grid-column: auto; }
  .contact-newsletter-control { flex-direction: column; }
  .form-grid { gap: 12px; }
  .form-field-full { grid-column: auto; }
  .contact-form, .trainer-wizard { padding: 18px; }
  .wizard-progress { align-items: flex-start; flex-direction: column; }
  .wizard-actions { flex-wrap: wrap; }
  .about-final-cta, .services-final-cta, .contact-final-cta, .home-final-cta { padding: 50px 0; }
  .hero-actions, .about-final-actions, .services-final-actions, .contact-final-actions { align-items: stretch; flex-direction: column; }
  .services-page .services-final-actions { align-items: center; }
}

@media (max-width: 900px) {
  .process-home .process-timeline { grid-template-columns: 1fr 1fr; }
  .process-home .process-timeline::before { display: none; }
  .about-promise-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
  .about-promise .promise-item:nth-child(even) { border-right: 0; }
  .about-promise .promise-item { border-bottom: 1px solid rgba(11,77,168,.16); }
  .booking-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .booking-step, .booking-step:first-child { clip-path: none; border-radius: 12px; }
  .trainer-membership .container { grid-template-columns: 1fr; }
  .trainer-membership .section-head, .trainer-membership .membership-details-grid, .trainer-membership .guidelines-wrap { grid-column: 1; grid-row: auto; }
  .trainer-membership .guidelines-wrap { display: block; }
  .membership-details-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .process-home .process-timeline { grid-template-columns: 1fr; }
  .assessment-timeline::before { left: 27px; }
  .assessment-step { grid-template-columns: 56px 1fr; }
  .assessment-step:nth-child(odd) .assessment-card, .assessment-step:nth-child(even) .assessment-card { grid-column: 2; grid-row: 1; text-align: left; }
  .assessment-number { grid-column: 1; grid-row: 1; width: 48px; height: 48px; margin: 4px auto 0; }
  .booking-steps, .membership-feature, .membership-details-grid { grid-template-columns: 1fr; }
  .about-promise-grid { grid-template-columns: 1fr; }
  .about-promise .promise-item, .about-promise .promise-item:nth-child(even) { border-right: 0; }
  .about-home-visual::before, .about-team-visual::before { right: 0; left: 0; }
  .newsletter-subscribe, .contact-newsletter-card { border-radius: 18px; }
}

/* Contact page: compact contact details and flush map */
.contact-page main { margin-bottom: 0; padding-bottom: 0; }
.contact-page .contact-info-section { padding: 40px 0; }
.contact-page .contact-section-heading { margin-bottom: 30px; }
.contact-page .contact-info-grid { width: min(100%, 800px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 auto; }
.contact-page .contact-info-card { display: flex; min-width: 0; min-height: 0; align-items: center; justify-items: initial; gap: 20px; padding: 22px; text-align: left; }
.contact-page .contact-info-icon { width: 64px; height: 64px; flex: 0 0 64px; margin: 0; color: var(--white); background: var(--gradient); }
.contact-page .contact-info-copy { min-width: 0; }
.contact-page .contact-info-copy h3 { margin: 0 0 4px; color: var(--navy); font-size: 18px; font-weight: 700; }
.contact-page .contact-info-link { display: inline-block; color: var(--primary); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.contact-page .contact-info-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-page .contact-info-card:hover .contact-info-copy h3,
.contact-page .contact-info-card:hover .contact-info-link { color: var(--white); }
.contact-page .map-section { position: relative; margin: 0; padding: 0; }
.contact-page .map-frame { width: 100%; }
.contact-page .map-section iframe { display: block; width: 100%; height: 440px; border: 0; filter: grayscale(1) contrast(1.05) brightness(1.02); transition: filter .5s ease; }
.contact-page .back-to-top { z-index: 1100; bottom: 70px; right: 20px; width: 44px; height: 44px; padding: 0; }
.contact-page .back-to-top svg { display: block; flex: 0 0 22px; }
.contact-page .site-footer { margin-top: 0; }

@media (max-width: 600px) {
  .contact-page .contact-info-grid { grid-template-columns: 1fr; }
  .contact-page .map-section iframe { height: 340px; }
  .wizard-progress { align-items: flex-start; flex-direction: row; gap: 2px; }
  .wizard-progress-step { align-items: center; flex-direction: column; gap: 4px; font-size: .65rem; text-align: center; }
  .wizard-progress-step:not(:last-child)::after { top: 14px; right: calc(-50% + 15px); left: calc(50% + 15px); display: block; }
}

@media (hover: hover) {
  .contact-page .map-section:hover iframe { filter: grayscale(0); }
}