:root {
--color-ink: #0d1f2d;
--color-ocean: #0a6e9e;
--color-sand: #f5f0e8;
--color-coral: #e8654a;
--color-white: #fafaf8;
--color-ink-light: color-mix(in oklch, var(--color-ink), white 40%);
--color-ink-muted: color-mix(in oklch, var(--color-ink), white 60%);
--color-ocean-light: color-mix(in oklch, var(--color-ocean), white 50%);
--color-ocean-pale: color-mix(in oklch, var(--color-ocean), white 80%);
--color-ocean-dark: color-mix(in oklch, var(--color-ocean), black 20%);
--color-coral-light: color-mix(in oklch, var(--color-coral), white 50%);
--color-coral-pale: color-mix(in oklch, var(--color-coral), white 80%);
--color-sand-dark: color-mix(in oklch, var(--color-sand), black 10%);
--color-sand-mid: color-mix(in oklch, var(--color-sand), black 5%);
--font-heading: 'DM Serif Display', serif;
--font-body: 'DM Sans', sans-serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--shadow-card: 0 2px 8px color-mix(in oklch, var(--color-ink), transparent 85%), 0 8px 24px color-mix(in oklch, var(--color-ink), transparent 92%);
--shadow-elevated: 0 4px 16px color-mix(in oklch, var(--color-ink), transparent 80%), 0 16px 48px color-mix(in oklch, var(--color-ink), transparent 88%);
--shadow-hover: 0 8px 24px color-mix(in oklch, var(--color-ink), transparent 75%), 0 24px 56px color-mix(in oklch, var(--color-ink), transparent 85%);
--transition-fast: 0.2s ease-out;
--transition-med: 0.35s ease-out;
--transition-slow: 0.5s ease-out;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
font-family: var(--font-body);
background: var(--color-white);
color: var(--color-ink);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-ocean); transition: color var(--transition-fast); }
a:hover { color: var(--color-ocean-dark); }

.homepage-section-container {
max-width: 1240px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg);
}

.homepage-section-label {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-coral);
margin-bottom: var(--space-sm);
}

.homepage-section-label--light {
color: color-mix(in oklch, var(--color-coral-light), white 20%);
}

.homepage-section-heading {
font-family: var(--font-heading);
font-size: clamp(1.9rem, 4vw, 3rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--color-ink);
margin-bottom: var(--space-md);
}

.homepage-section-heading--white {
color: var(--color-white);
}

.homepage-text-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--color-ocean);
font-weight: 700;
text-decoration: none;
font-size: 0.95rem;
transition: gap var(--transition-fast), color var(--transition-fast);
}

.homepage-text-link:hover {
color: var(--color-ocean-dark);
gap: 0.7rem;
}

.homepage-text-link--large {
font-size: 1.1rem;
}


.cookie-consent-top-bar {
background: var(--color-ink);
border-bottom: 2px solid var(--color-coral);
overflow: hidden;
transition: max-height var(--transition-slow), opacity var(--transition-slow);
max-height: fit-content;
}

.cookie-consent-top-bar.cookie-consent-hidden {
max-height: 0;
opacity: 0;
pointer-events: none;
}

.cookie-consent-inner {
max-width: 1240px;
margin: 0 auto;
padding: 0.6rem var(--space-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
flex-wrap: wrap;
}

.cookie-consent-text {
font-size: 0.82rem;
color: color-mix(in oklch, var(--color-white), transparent 20%);
}

.cookie-consent-text a {
color: var(--color-coral-light);
text-decoration: underline;
}

.cookie-consent-button-group {
display: flex;
gap: 0.5rem;
}

.cookie-consent-accept-button,
.cookie-consent-decline-button {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
padding: 0.35rem 0.9rem;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
min-height: 32px;
}

.cookie-consent-accept-button {
background: var(--color-coral);
color: var(--color-white);
}

.cookie-consent-accept-button:hover {
background: color-mix(in oklch, var(--color-coral), black 15%);
}

.cookie-consent-decline-button {
background: transparent;
color: color-mix(in oklch, var(--color-white), transparent 30%);
border: 1px solid color-mix(in oklch, var(--color-white), transparent 70%);
}

.cookie-consent-decline-button:hover {
color: var(--color-white);
border-color: color-mix(in oklch, var(--color-white), transparent 40%);
}


.main-navigation-container {
background: var(--color-ink);
padding: 0 var(--space-lg);
position: relative;
z-index: 100;
}

.main-navigation-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}

.main-navigation-logo-link {
display: flex;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
}

.main-navigation-logo-text {
font-family: var(--font-heading);
font-size: 1.35rem;
color: var(--color-white);
letter-spacing: -0.01em;
line-height: 1.2;
}

.main-navigation-logo-accent { color: var(--color-coral); }

.main-navigation-links-list {
display: flex;
list-style: none;
gap: var(--space-md);
align-items: center;
}

.main-navigation-links-list a {
color: color-mix(in oklch, var(--color-white), transparent 20%);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.02em;
transition: color var(--transition-fast);
padding: var(--space-xs) 0;
position: relative;
}

.main-navigation-links-list a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--color-coral);
transition: width var(--transition-med);
}

.main-navigation-links-list a:hover { color: var(--color-white); }
.main-navigation-links-list a:hover::after { width: 100%; }

.main-navigation-cta-button {
background: var(--color-coral) !important;
color: var(--color-white) !important;
padding: 0.55rem 1.25rem !important;
border-radius: var(--radius-sm) !important;
transition: background var(--transition-fast), transform var(--transition-fast) !important;
}

.main-navigation-cta-button::after { display: none !important; }

.main-navigation-cta-button:hover {
background: color-mix(in oklch, var(--color-coral), black 15%) !important;
transform: translateY(-1px);
}

.main-navigation-hamburger-button {
display: none;
background: none;
border: none;
cursor: pointer;
padding: var(--space-xs);
color: var(--color-white);
font-size: 1.4rem;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
transition: color var(--transition-fast);
}

.main-navigation-hamburger-button:hover { color: var(--color-coral); }


.homepage-hero-section {
background: var(--color-ink);
min-height: 90vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: var(--space-xl) var(--space-lg);
}

.homepage-hero-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 100%;
background: url('../images/swim-instructor-poolside-training.jpg') center/cover no-repeat;
opacity: 0.25;
z-index: 0;
}

.homepage-hero-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(105deg, var(--color-ink) 45%, transparent 100%);
z-index: 1;
}

.homepage-hero-content-wrapper {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
width: 100%;
}

.homepage-hero-greeting-tag {
display: inline-block;
background: color-mix(in oklch, var(--color-ocean), transparent 30%);
color: var(--color-ocean-light);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.4rem 1rem;
border-radius: var(--radius-sm);
margin-bottom: var(--space-md);
border: 1px solid color-mix(in oklch, var(--color-ocean), transparent 50%);
}

.homepage-hero-main-heading {
font-family: var(--font-heading);
font-size: clamp(2.8rem, 6vw, 5.5rem);
color: var(--color-white);
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: var(--space-md);
max-width: 700px;
}

.homepage-hero-main-heading em {
color: var(--color-coral);
font-style: normal;
}

.homepage-hero-subheading {
font-size: clamp(1rem, 2vw, 1.2rem);
color: color-mix(in oklch, var(--color-white), transparent 30%);
max-width: 520px;
margin-bottom: var(--space-lg);
line-height: 1.7;
}

.homepage-hero-button-group {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}

.homepage-hero-primary-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-coral);
color: var(--color-white);
padding: 0.9rem 2rem;
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 700;
font-size: 1rem;
transition: all var(--transition-fast);
box-shadow: 0 4px 20px color-mix(in oklch, var(--color-coral), transparent 50%);
}

.homepage-hero-primary-button:hover {
background: color-mix(in oklch, var(--color-coral), black 12%);
transform: translateY(-2px);
box-shadow: 0 8px 28px color-mix(in oklch, var(--color-coral), transparent 40%);
color: var(--color-white);
}

.homepage-hero-secondary-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
color: var(--color-white);
padding: 0.9rem 2rem;
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 500;
font-size: 1rem;
border: 1.5px solid color-mix(in oklch, var(--color-white), transparent 60%);
transition: all var(--transition-fast);
}

.homepage-hero-secondary-button:hover {
border-color: var(--color-white);
background: color-mix(in oklch, var(--color-white), transparent 90%);
color: var(--color-white);
}


.homepage-intro-section {
background: var(--color-white);
}

.homepage-intro-section .homepage-section-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}

.homepage-intro-text-column p {
color: var(--color-ink-light);
margin-bottom: var(--space-sm);
font-size: 1.05rem;
}

.homepage-intro-text-column p:last-of-type {
margin-bottom: var(--space-md);
}

.homepage-intro-image-wrapper {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-elevated);
}

.homepage-intro-image {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
transition: transform var(--transition-slow);
}

.homepage-intro-image-wrapper:hover .homepage-intro-image {
transform: scale(1.03);
}

.homepage-intro-image-badge {
position: absolute;
bottom: var(--space-md);
left: var(--space-md);
background: var(--color-coral);
color: var(--color-white);
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 700;
box-shadow: 0 4px 12px color-mix(in oklch, var(--color-coral), transparent 40%);
}


.homepage-modules-section {
background: var(--color-sand);
}

.homepage-modules-header {
text-align: center;
margin-bottom: var(--space-xl);
}

.homepage-modules-intro {
color: var(--color-ink-light);
max-width: 560px;
margin: 0 auto;
font-size: 1.05rem;
}

.homepage-modules-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}

.homepage-module-card {
background: var(--color-white);
border-radius: var(--radius-md);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
transition: all var(--transition-med);
border: 1px solid color-mix(in oklch, var(--color-sand), black 8%);
}

.homepage-module-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}

.homepage-module-card-icon-wrapper {
width: 52px;
height: 52px;
background: color-mix(in oklch, var(--color-ocean), white 85%);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: var(--color-ocean);
margin-bottom: var(--space-sm);
transition: background var(--transition-fast), color var(--transition-fast);
}

.homepage-module-card:hover .homepage-module-card-icon-wrapper {
background: var(--color-ocean);
color: var(--color-white);
}

.homepage-module-card-title {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--color-ink);
margin-bottom: 0.5rem;
}

.homepage-module-card-description {
font-size: 0.92rem;
color: var(--color-ink-light);
line-height: 1.6;
}


.homepage-sticky-visual-section {
background: var(--color-ink);
overflow: hidden;
}

.homepage-sticky-visual-layout {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
}

.homepage-sticky-visual-image-panel {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}

.homepage-sticky-visual-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
}

.homepage-sticky-visual-content-panel {
padding: var(--space-2xl) var(--space-xl);
display: flex;
align-items: flex-start;
}

.homepage-sticky-visual-content-inner {
max-width: 520px;
}

.homepage-sticky-content-block {
margin-bottom: var(--space-xl);
}

.homepage-sticky-content-block p {
color: color-mix(in oklch, var(--color-white), transparent 30%);
font-size: 1rem;
line-height: 1.7;
}

.homepage-sticky-subheading {
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--color-white);
margin-bottom: 0.5rem;
}

.homepage-sticky-cta-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--color-coral-light);
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
transition: gap var(--transition-fast), color var(--transition-fast);
margin-top: var(--space-sm);
}

.homepage-sticky-cta-button:hover {
color: var(--color-coral);
gap: 0.8rem;
}


.homepage-comparison-section {
background: var(--color-white);
}

.homepage-comparison-header {
text-align: center;
margin-bottom: var(--space-xl);
}

.homepage-comparison-intro {
color: var(--color-ink-light);
max-width: 560px;
margin: 0 auto;
}

.homepage-comparison-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}

.homepage-comparison-card {
border-radius: var(--radius-lg);
padding: var(--space-xl);
}

.homepage-comparison-card--standard {
background: var(--color-sand);
border: 1px solid var(--color-sand-dark);
}

.homepage-comparison-card--bright {
background: var(--color-ink);
}

.homepage-comparison-card-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}

.homepage-comparison-card--standard .homepage-comparison-card-header i {
font-size: 1.4rem;
color: var(--color-ink-muted);
}

.homepage-comparison-card--bright .homepage-comparison-card-header i {
font-size: 1.4rem;
color: var(--color-coral);
}

.homepage-comparison-card--standard h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--color-ink-light);
}

.homepage-comparison-card--bright h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--color-white);
}

.homepage-comparison-feature-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.9rem;
}

.homepage-comparison-feature-list li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
}

.homepage-comparison-card--standard li {
color: var(--color-ink-light);
}

.homepage-comparison-card--bright li {
color: color-mix(in oklch, var(--color-white), transparent 20%);
}

.homepage-comparison-card--standard .fa-circle-xmark {
color: color-mix(in oklch, var(--color-ink-muted), white 20%);
font-size: 1rem;
}

.homepage-comparison-card--bright .fa-circle-check {
color: var(--color-coral);
font-size: 1rem;
}


.homepage-approach-section {
background: var(--color-sand);
}

.homepage-approach-content {
margin-bottom: var(--space-xl);
}

.homepage-approach-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}

.homepage-approach-item {
padding: var(--space-lg);
background: var(--color-white);
border-radius: var(--radius-md);
border-left: 3px solid var(--color-coral);
box-shadow: var(--shadow-card);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.homepage-approach-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-elevated);
}

.homepage-approach-item-number {
font-family: var(--font-heading);
font-size: 2.5rem;
color: color-mix(in oklch, var(--color-coral), white 60%);
line-height: 1;
margin-bottom: var(--space-xs);
}

.homepage-approach-item h3 {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--color-ink);
margin-bottom: 0.5rem;
}

.homepage-approach-item p {
font-size: 0.92rem;
color: var(--color-ink-light);
line-height: 1.65;
}


.homepage-gallery-preview-section {
background: var(--color-white);
}

.homepage-gallery-preview-header {
margin-bottom: var(--space-xl);
}

.homepage-gallery-preview-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}

.homepage-gallery-preview-item {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-card);
}

.homepage-gallery-preview-item img {
width: 100%;
height: 280px;
object-fit: cover;
transition: transform var(--transition-slow);
display: block;
}

.homepage-gallery-preview-item--large img {
height: 360px;
}

.homepage-gallery-preview-item:hover img {
transform: scale(1.04);
}

.homepage-gallery-preview-link-wrapper {
text-align: right;
}


.homepage-location-strip-section {
background: var(--color-ink);
padding: var(--space-lg) var(--space-lg);
}

.homepage-location-strip-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
}

.homepage-location-strip-item {
display: flex;
align-items: center;
gap: var(--space-sm);
color: color-mix(in oklch, var(--color-white), transparent 20%);
font-size: 0.95rem;
}

.homepage-location-strip-item i {
color: var(--color-coral);
font-size: 1.1rem;
}

.homepage-location-strip-item a {
color: color-mix(in oklch, var(--color-white), transparent 20%);
text-decoration: none;
transition: color var(--transition-fast);
}

.homepage-location-strip-item a:hover {
color: var(--color-white);
}

.homepage-location-strip-divider {
width: 1px;
height: 28px;
background: color-mix(in oklch, var(--color-white), transparent 75%);
}


.main-footer-section {
background: color-mix(in oklch, var(--color-ink), black 10%);
padding: var(--space-2xl) var(--space-lg) 0;
}

.main-footer-inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: var(--space-xl);
padding-bottom: var(--space-xl);
border-bottom: 1px solid color-mix(in oklch, var(--color-white), transparent 88%);
}

.main-footer-logo-link {
display: flex;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
margin-bottom: var(--space-md);
}

.main-footer-brand-name {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--color-white);
}

.main-footer-brand-description {
font-size: 0.88rem;
color: color-mix(in oklch, var(--color-white), transparent 40%);
line-height: 1.65;
margin-bottom: var(--space-md);
}

.main-footer-address {
font-style: normal;
font-size: 0.85rem;
color: color-mix(in oklch, var(--color-white), transparent 40%);
line-height: 2;
}

.main-footer-address a {
color: color-mix(in oklch, var(--color-white), transparent 40%);
text-decoration: none;
transition: color var(--transition-fast);
}

.main-footer-address a:hover { color: var(--color-white); }
.main-footer-address i { color: var(--color-coral); margin-right: 0.4rem; }

.main-footer-column-heading {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-white);
margin-bottom: var(--space-md);
}

.main-footer-links-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.65rem;
}

.main-footer-links-list a {
font-size: 0.88rem;
color: color-mix(in oklch, var(--color-white), transparent 40%);
text-decoration: none;
transition: color var(--transition-fast), padding-left var(--transition-fast);
display: block;
}

.main-footer-links-list a:hover {
color: var(--color-white);
padding-left: 4px;
}

.main-footer-news-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

.main-footer-news-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.main-footer-news-date {
font-size: 0.72rem;
color: var(--color-coral);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.main-footer-news-item a {
font-size: 0.85rem;
color: color-mix(in oklch, var(--color-white), transparent 30%);
text-decoration: none;
line-height: 1.45;
transition: color var(--transition-fast);
}

.main-footer-news-item a:hover { color: var(--color-white); }

.main-footer-bottom-bar {
max-width: 1240px;
margin: 0 auto;
padding: var(--space-md) 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
}

.main-footer-copyright {
font-size: 0.82rem;
color: color-mix(in oklch, var(--color-white), transparent 55%);
}

.main-footer-legal-links {
list-style: none;
display: flex;
gap: var(--space-md);
}

.main-footer-legal-links a {
font-size: 0.82rem;
color: color-mix(in oklch, var(--color-white), transparent 55%);
text-decoration: none;
transition: color var(--transition-fast);
}

.main-footer-legal-links a:hover { color: var(--color-white); }


.back-to-top-button {
position: fixed;
bottom: var(--space-lg);
right: var(--space-lg);
width: 48px;
height: 48px;
background: var(--color-coral);
color: var(--color-white);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
box-shadow: 0 4px 16px color-mix(in oklch, var(--color-coral), transparent 40%), 0 2px 4px color-mix(in oklch, var(--color-ink), transparent 80%);
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: all var(--transition-med);
z-index: 200;
}

.back-to-top-button.back-to-top-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.back-to-top-button:hover {
background: color-mix(in oklch, var(--color-coral), black 15%);
transform: translateY(-3px);
box-shadow: 0 8px 24px color-mix(in oklch, var(--color-coral), transparent 30%);
}


.mobile-bottom-sheet-overlay {
position: fixed;
inset: 0;
background: color-mix(in oklch, var(--color-ink), transparent 40%);
z-index: 300;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-med);
}

.mobile-bottom-sheet-overlay.mobile-sheet-overlay-active {
opacity: 1;
pointer-events: auto;
}

.mobile-bottom-sheet-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--color-white);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
z-index: 400;
padding: var(--space-sm) 0 calc(var(--space-lg) + env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform var(--transition-med);
box-shadow: 0 -8px 32px color-mix(in oklch, var(--color-ink), transparent 70%);
}

.mobile-bottom-sheet-menu.mobile-sheet-open {
transform: translateY(0);
}

.mobile-bottom-sheet-drag-handle {
width: 40px;
height: 4px;
background: color-mix(in oklch, var(--color-ink), white 70%);
border-radius: 2px;
margin: 0 auto var(--space-md);
cursor: grab;
}

.mobile-bottom-sheet-nav {
padding: 0 var(--space-md);
}

.mobile-bottom-sheet-links-list {
list-style: none;
display: flex;
flex-direction: column;
}

.mobile-bottom-sheet-links-list li a {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
color: var(--color-ink);
text-decoration: none;
font-weight: 500;
font-size: 1.05rem;
border-radius: var(--radius-md);
transition: background var(--transition-fast), color var(--transition-fast);
min-height: 56px;
}

.mobile-bottom-sheet-links-list li a:hover,
.mobile-bottom-sheet-links-list li a:focus {
background: color-mix(in oklch, var(--color-ocean), white 90%);
color: var(--color-ocean);
}

.mobile-bottom-sheet-links-list li a i {
width: 20px;
text-align: center;
color: var(--color-coral);
}


.page-hero-banner {
background: var(--color-ink);
padding: var(--space-xl) var(--space-lg);
text-align: center;
position: relative;
overflow: hidden;
}

.page-hero-banner::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.12;
background-size: cover;
background-position: center;
}

.page-hero-banner-inner {
position: relative;
z-index: 1;
max-width: 700px;
margin: 0 auto;
}

.page-hero-banner-label {
display: inline-block;
color: var(--color-coral);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: var(--space-sm);
}

.page-hero-banner-heading {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 5vw, 4rem);
color: var(--color-white);
line-height: 1.1;
margin-bottom: var(--space-md);
}

.page-hero-banner-subtext {
color: color-mix(in oklch, var(--color-white), transparent 30%);
font-size: 1.1rem;
max-width: 560px;
margin: 0 auto;
}


.instructors-intro-section {
background: var(--color-white);
}

.instructors-intro-text {
max-width: 760px;
}

.instructors-intro-text p {
color: var(--color-ink-light);
margin-bottom: var(--space-sm);
font-size: 1.05rem;
}

.instructors-profiles-section {
background: var(--color-sand);
}

.instructors-profiles-grid {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}

.instructor-profile-card {
display: grid;
grid-template-columns: 340px 1fr;
gap: var(--space-xl);
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-elevated);
transition: box-shadow var(--transition-med);
}

.instructor-profile-card:hover {
box-shadow: var(--shadow-hover);
}

.instructor-profile-card--reversed {
grid-template-columns: 1fr 340px;
}

.instructor-profile-card--reversed .instructor-profile-image-wrapper {
order: 2;
}

.instructor-profile-card--reversed .instructor-profile-content {
order: 1;
}

.instructor-profile-image-wrapper {
overflow: hidden;
}

.instructor-profile-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
min-height: 320px;
}

.instructor-profile-card:hover .instructor-profile-image-wrapper img {
transform: scale(1.04);
}

.instructor-profile-content {
padding: var(--space-xl);
display: flex;
flex-direction: column;
justify-content: center;
}

.instructor-profile-name {
font-family: var(--font-heading);
font-size: 1.8rem;
color: var(--color-ink);
margin-bottom: 0.3rem;
}

.instructor-profile-role {
display: inline-block;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-coral);
margin-bottom: var(--space-md);
}

.instructor-profile-content p {
color: var(--color-ink-light);
font-size: 0.95rem;
margin-bottom: var(--space-sm);
line-height: 1.7;
}

.instructor-profile-specialisms {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: var(--space-sm);
}

.instructor-profile-specialisms span {
background: color-mix(in oklch, var(--color-ocean), white 85%);
color: var(--color-ocean-dark);
font-size: 0.78rem;
font-weight: 700;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-sm);
}

.instructors-approach-highlight-section {
background: var(--color-ocean);
}

.instructors-approach-highlight-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xl);
flex-wrap: wrap;
}

.instructors-approach-highlight-text {
flex: 1;
min-width: 300px;
}

.instructors-approach-highlight-text p {
color: color-mix(in oklch, var(--color-white), transparent 20%);
font-size: 1.05rem;
line-height: 1.7;
margin-top: var(--space-sm);
}


.programmes-overview-section {
background: var(--color-sand);
padding-top: var(--space-xl);
padding-bottom: 0;
}

.programmes-overview-lead-text {
font-size: 1.1rem;
color: var(--color-ink-light);
max-width: 680px;
font-style: italic;
}

.programmes-module-detail-section {
background: var(--color-white);
}

.programmes-module-detail-section--alt {
background: var(--color-sand);
}

.programmes-module-detail-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}

.programmes-module-detail-layout--reversed .programmes-module-detail-content {
order: 2;
}

.programmes-module-detail-layout--reversed .programmes-module-detail-image {
order: 1;
}

.programmes-module-number-badge {
font-family: var(--font-heading);
font-size: 3rem;
color: color-mix(in oklch, var(--color-coral), white 65%);
line-height: 1;
margin-bottom: var(--space-xs);
}

.programmes-module-detail-lead {
font-size: 1.1rem;
color: var(--color-ink);
font-weight: 500;
margin-bottom: var(--space-md);
line-height: 1.6;
}

.programmes-module-detail-content p {
color: var(--color-ink-light);
margin-bottom: var(--space-sm);
font-size: 0.97rem;
}

.programmes-module-detail-image {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-elevated);
}

.programmes-module-detail-image img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
transition: transform var(--transition-slow);
}

.programmes-module-detail-image:hover img {
transform: scale(1.03);
}

.programmes-module-detail-topics {
background: color-mix(in oklch, var(--color-sand), white 30%);
border-radius: var(--radius-md);
padding: var(--space-md);
margin-top: var(--space-md);
border-left: 3px solid var(--color-coral);
}

.programmes-module-detail-topics h4 {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-coral);
margin-bottom: var(--space-sm);
}

.programmes-module-detail-topics ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.programmes-module-detail-topics ul li {
font-size: 0.9rem;
color: var(--color-ink-light);
padding-left: 1.2rem;
position: relative;
}

.programmes-module-detail-topics ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
}

.programmes-enquire-section {
background: var(--color-ink);
}

.programmes-enquire-inner {
text-align: center;
}

.programmes-enquire-inner p {
color: color-mix(in oklch, var(--color-white), transparent 30%);
max-width: 520px;
margin: 0 auto var(--space-lg);
font-size: 1.05rem;
}


.gallery-main-section {
background: var(--color-white);
}

.gallery-filter-bar {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
}

.gallery-filter-label {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-ink-muted);
white-space: nowrap;
}

.gallery-filter-button-group {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.gallery-filter-button {
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 700;
padding: 0.45rem 1rem;
border-radius: var(--radius-sm);
border: 1.5px solid color-mix(in oklch, var(--color-ink), white 70%);
background: transparent;
color: var(--color-ink-muted);
cursor: pointer;
transition: all var(--transition-fast);
min-height: 36px;
}

.gallery-filter-button:hover,
.gallery-filter-button--active {
background: var(--color-coral);
border-color: var(--color-coral);
color: var(--color-white);
}

.gallery-masonry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 260px;
gap: var(--space-sm);
}

.gallery-masonry-item--wide {
grid-column: span 2;
}

.gallery-image-wrapper {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
height: 100%;
}

.gallery-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow), opacity var(--transition-slow);
display: block;
}

.gallery-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-sm) var(--space-md);
background: linear-gradient(transparent, color-mix(in oklch, var(--color-ink), transparent 20%));
display: flex;
align-items: flex-end;
justify-content: space-between;
opacity: 0;
transition: opacity var(--transition-med);
}

.gallery-image-wrapper:hover img {
transform: scale(1.06);
}

.gallery-image-wrapper:hover .gallery-image-overlay {
opacity: 1;
}

.gallery-image-caption {
font-size: 0.85rem;
color: var(--color-white);
font-weight: 500;
}

.gallery-image-tag {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--color-coral);
color: var(--color-white);
padding: 0.2rem 0.5rem;
border-radius: 3px;
}

.gallery-masonry-item.gallery-hidden {
display: none;
}

.gallery-cta-section {
background: var(--color-sand);
}

.gallery-cta-inner {
text-align: center;
}

.gallery-cta-inner p {
color: var(--color-ink-light);
max-width: 560px;
margin: 0 auto var(--space-lg);
font-size: 1.05rem;
}


.contact-main-section {
background: var(--color-white);
}

.contact-main-layout {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--space-2xl);
align-items: flex-start;
}

.contact-form-intro-text {
color: var(--color-ink-light);
margin-bottom: var(--space-lg);
font-size: 1rem;
}

.contact-enquiry-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}

.contact-form-field-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}

.contact-form-field-label {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-ink);
}

.contact-form-field-required {
color: var(--color-coral);
}

.contact-form-field-input {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-ink);
background: var(--color-white);
border: 1.5px solid color-mix(in oklch, var(--color-ink), white 75%);
border-radius: var(--radius-sm);
padding: 0.75rem var(--space-sm);
width: 100%;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
outline: none;
}

.contact-form-field-input:focus {
border-color: var(--color-ocean);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ocean), transparent 80%);
}

.contact-form-field-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230d1f2d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
cursor: pointer;
}

.contact-form-field-textarea {
resize: vertical;
min-height: 130px;
}

.contact-form-privacy-group {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}

.contact-form-privacy-label {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.88rem;
color: var(--color-ink-light);
cursor: pointer;
line-height: 1.5;
}

.contact-form-privacy-checkbox {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--color-coral);
cursor: pointer;
}

.contact-form-privacy-label a {
color: var(--color-ocean);
}

.contact-form-error-message {
color: var(--color-coral);
font-size: 0.85rem;
font-weight: 700;
min-height: 1.2em;
}

.contact-form-submit-button {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
background: var(--color-coral);
color: var(--color-white);
border: none;
border-radius: var(--radius-sm);
padding: 0.9rem 2rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
align-self: flex-start;
transition: all var(--transition-fast);
box-shadow: 0 4px 16px color-mix(in oklch, var(--color-coral), transparent 50%);
}

.contact-form-submit-button:hover {
background: color-mix(in oklch, var(--color-coral), black 12%);
transform: translateY(-2px);
box-shadow: 0 8px 24px color-mix(in oklch, var(--color-coral), transparent 40%);
}

.contact-info-card {
background: var(--color-sand);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-md);
}

.contact-info-card-heading {
font-family: var(--font-heading);
font-size: 1.4rem;
color: var(--color-ink);
margin-bottom: var(--space-md);
}

.contact-info-address-block {
font-style: normal;
display: flex;
flex-direction: column;
gap: var(--space-md);
}

.contact-info-address-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}

.contact-info-address-item i {
color: var(--color-coral);
font-size: 1.1rem;
margin-top: 3px;
width: 20px;
text-align: center;
}

.contact-info-address-item div {
display: flex;
flex-direction: column;
gap: 0.15rem;
}

.contact-info-address-item strong {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-ink-muted);
}

.contact-info-address-item span,
.contact-info-address-item a {
font-size: 0.95rem;
color: var(--color-ink);
text-decoration: none;
transition: color var(--transition-fast);
}

.contact-info-address-item a:hover {
color: var(--color-ocean);
}

.contact-map-wrapper {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-card);
}

.contact-google-map-iframe {
display: block;
width: 100%;
border: none;
}

.contact-directions-section {
background: var(--color-sand);
}

.contact-directions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-top: var(--space-xl);
}

.contact-directions-card {
background: var(--color-white);
border-radius: var(--radius-md);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-directions-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-elevated);
}

.contact-directions-card-icon {
width: 48px;
height: 48px;
background: color-mix(in oklch, var(--color-ocean), white 85%);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--color-ocean);
margin-bottom: var(--space-sm);
}

.contact-directions-card h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
color: var(--color-ink);
margin-bottom: 0.5rem;
}

.contact-directions-card p {
font-size: 0.9rem;
color: var(--color-ink-light);
line-height: 1.65;
}


.legal-page-main-content {
background: var(--color-white);
}

.legal-page-content-container {
max-width: 800px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg);
}

.legal-page-header-section {
margin-bottom: var(--space-xl);
border-bottom: 2px solid var(--color-sand-dark);
padding-bottom: var(--space-lg);
}

.legal-page-main-heading {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--color-ink);
margin-bottom: var(--space-xs);
line-height: 1.15;
}

.legal-page-date-notice {
font-size: 0.85rem;
color: var(--color-ink-muted);
margin-top: var(--space-sm);
}

.legal-page-narrative-body {
display: flex;
flex-direction: column;
gap: var(--space-md);
}

.legal-page-narrative-body p {
color: var(--color-ink-light);
font-size: 0.97rem;
line-height: 1.75;
}

.legal-page-narrative-body h2 {
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--color-ink);
margin-top: var(--space-sm);
}

.legal-page-narrative-body strong {
color: var(--color-ink);
font-weight: 700;
}


@media (max-width: 1024px) {
.homepage-modules-grid {
grid-template-columns: repeat(2, 1fr);
}

.main-footer-inner {
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}

.instructor-profile-card,
.instructor-profile-card--reversed {
grid-template-columns: 260px 1fr;
}

.programmes-module-detail-layout,
.programmes-module-detail-layout--reversed {
gap: var(--space-lg);
}
}

@media (max-width: 768px) {
.main-navigation-links-list { display: none; }
.main-navigation-hamburger-button { display: flex; }

.homepage-section-container {
padding: var(--space-xl) var(--space-sm);
}

.homepage-intro-section .homepage-section-container {
grid-template-columns: 1fr;
gap: var(--space-lg);
}

.homepage-intro-image {
height: 300px;
}

.homepage-modules-grid {
grid-template-columns: 1fr;
}

.homepage-sticky-visual-layout {
grid-template-columns: 1fr;
}

.homepage-sticky-visual-image-panel {
position: relative;
height: 300px;
}

.homepage-sticky-visual-content-panel {
padding: var(--space-xl) var(--space-sm);
}

.homepage-comparison-layout {
grid-template-columns: 1fr;
}

.homepage-approach-grid {
grid-template-columns: 1fr;
}

.homepage-gallery-preview-grid {
grid-template-columns: 1fr;
}

.homepage-gallery-preview-item--large img,
.homepage-gallery-preview-item img {
height: 220px;
}

.homepage-location-strip-inner {
flex-direction: column;
gap: var(--space-md);
text-align: center;
}

.homepage-location-strip-divider {
width: 40px;
height: 1px;
}

.main-footer-inner {
grid-template-columns: 1fr;
gap: var(--space-lg);
}

.main-footer-bottom-bar {
flex-direction: column;
text-align: center;
}

.main-footer-legal-links {
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
}

.instructor-profile-card,
.instructor-profile-card--reversed {
grid-template-columns: 1fr;
}

.instructor-profile-card--reversed .instructor-profile-image-wrapper {
order: 1;
}

.instructor-profile-card--reversed .instructor-profile-content {
order: 2;
}

.instructor-profile-image-wrapper img {
height: 260px;
}

.instructors-approach-highlight-inner {
flex-direction: column;
text-align: center;
}

.programmes-module-detail-layout,
.programmes-module-detail-layout--reversed {
grid-template-columns: 1fr;
}

.programmes-module-detail-layout--reversed .programmes-module-detail-content {
order: 1;
}

.programmes-module-detail-layout--reversed .programmes-module-detail-image {
order: 2;
}

.programmes-module-detail-image img {
height: 260px;
}

.gallery-masonry-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}

.gallery-masonry-item--wide {
grid-column: span 1;
}

.gallery-image-wrapper {
height: 220px;
}

.contact-main-layout {
grid-template-columns: 1fr;
}

.contact-directions-grid {
grid-template-columns: 1fr;
}

.homepage-hero-section {
min-height: 80vh;
padding: var(--space-lg) var(--space-sm);
}

.homepage-hero-main-heading {
font-size: clamp(2.2rem, 8vw, 3.5rem);
}

.back-to-top-button {
right: var(--space-sm);
bottom: var(--space-sm);
}
}

@media (max-width: 480px) {
.homepage-hero-button-group {
flex-direction: column;
}

.homepage-hero-primary-button,
.homepage-hero-secondary-button {
width: 100%;
justify-content: center;
}

.homepage-comparison-card {
padding: var(--space-md);
}

.contact-form-submit-button {
width: 100%;
justify-content: center;
}
}