/* ----- Variables (8px grid, Figma-style) ----- */
:root {
  --color-bg: #fafafa;
  --color-text: #1a1a1a;
  --color-text-muted: #666;
  --color-accent: #2c2c2c;
  --color-hero-bg: #1a1a1d;
  --color-btn-bg: #252528;
  --color-btn-text: #fff;
  --color-border: #ddd;
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Montserrat", sans-serif;
  --font-signature: "Poiret One", sans-serif;
  /* 8px base spacing scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --max-width: 72rem;
  --radius: 4px;
  /* Typography scale */
  --text-hero-size: clamp(2.75rem, 2.5vw, 4rem);
  --text-hero-height: 1.08;
  --text-hero-spacing: -0.01em;
  --text-h2-size: clamp(1.875rem, 3.5vw, 2.75rem);
  --text-h2-height: 1.12;
  --text-h2-spacing: -0.01em;
  --text-body-size: 1.0625rem;
  --text-body-height: 1.6;
  --text-body-spacing: 0;
  --text-lead-size: clamp(1.125rem, 1.75vw, 1.375rem);
  --text-lead-height: 1.55;
  --text-foot-size: 0.875rem;
  --text-foot-height: 1.5;
  --text-legal-size: 0.75rem;
  --text-legal-height: 1.5;
  --text-signature-size: 1.5rem;
  --text-signature-height: 1.2;
  /* Section viewport-fitting: scale with vh so content fits in 100vh */
  --section-min-height: 100vh;
  --section-padding-y: clamp(2rem, 8vh, 7.5rem);
  --section-padding-x: clamp(1.5rem, 5vw, 60px);
  --section-gap: clamp(1.25rem, 8vh, 120px);
  --section-heading-size: clamp(2rem, 10vh, 80px);
  --section-heading-line: 1.5;
  --blurred-cols-gap: clamp(1rem, 6vh, 72px);
  --blurred-cols-padding-x: clamp(1.5rem, 15vw, 240px);
  --space-paragraph-size: clamp(1rem, 3vh, 36px);
  --space-paragraph-padding-left: clamp(1.5rem, 30vw, 480px);
  --footer-padding-y: clamp(2rem, 10vh, 120px);
  --footer-padding-x: clamp(1.5rem, 5vw, 60px);
  --footer-gap: clamp(1.5rem, 5vh, var(--space-56));
}

/* ----- Reset & base ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto; /* Lenis handles smooth scrolling */
  overflow-x: clip; /* Changed to clip so position: sticky works */
}

/* Lenis recommended CSS – required for smooth scroll / glide to work correctly */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

body {
  margin: 0;
  overflow-x: clip; /* Changed to clip so position: sticky works */
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 400;
  line-height: var(--text-body-height);
  letter-spacing: var(--text-body-spacing);
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ----- Decoration (fixed on scroll) ----- */
.decoration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.5s ease;
}

body.in-footer .decoration {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.decoration__butterfly {
  position: absolute;
  /* Initial: directly above stone (no gap). Scroll: moves to top-right */
  left: calc(2.8vw + var(--butterfly-progress, 0) * 68vw);
  bottom: calc(7.9vh + 14vw + var(--butterfly-progress, 0) * 66vh - var(--butterfly-progress, 0) * 20vw);
  width: 16.833vw;
  height: auto;
  transform-origin: center center;
  transition: left 0.35s ease-out, bottom 0.35s ease-out;
}

/* When at top (progress = 0), delay butterfly so rope appears first */
.decoration[data-butterfly-progress="0"] .decoration__butterfly {
  transition-delay: 0.55s;
  transition-duration: 0.4s;
}

.decoration__stone {
  position: absolute;
  left: min(4vw, 40px);
  bottom: 8vh;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.decoration.decoration--stone-hidden .decoration__stone {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.decoration__stone img {
  width: 16.833vw;
  height: auto;
}

.decoration__rope {
  transform-origin: bottom center;
  transform: scaleY(1) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), 
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

.decoration__rope.decoration__rope--hidden {
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0) translateY(20px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1), 
              transform 0.35s cubic-bezier(0.4, 0, 1, 1),
              visibility 0s linear 0.35s;
}

@keyframes flutter {
  from { transform: rotateX(0); }
  to { transform: rotateX(80deg); }
}

/* ----- Header ----- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-8) var(--space-40);
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s ease;
}

body.in-footer .header {
  transform: translateY(-100%);
}

/* Hero: transparent background, white text (initial state when hero visible) */
.header[data-mode="hero"] {
  background: transparent;
}

.header[data-mode="hero"] .nav-link {
  color: #fff;
}

.header[data-mode="hero"] .menu-toggle {
  background: rgba(255, 255, 255, 0.15);
}

.header[data-mode="hero"] .menu-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
}

.header[data-mode="hero"] .menu-toggle span {
  background: #fff;
}

/* Dark mode: spacious / everyone sections – solid dark background */
.header[data-mode="dark"] {
  background: #1a1a1d;
}

.header[data-mode="dark"] .nav-link {
  color: #fff;
}

.header[data-mode="dark"] .menu-toggle {
  background: rgba(255, 255, 255, 0.15);
}

.header[data-mode="dark"] .menu-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
}

.header[data-mode="dark"] .menu-toggle span {
  background: #fff;
}

/* Light mode: other sections – white background, dark text */
.header[data-mode="light"] {
  background: #fff;
  border-bottom: none;
  box-shadow: none;
}

.header[data-mode="light"] .nav-link {
  color: var(--color-text);
}

.header[data-mode="light"] .menu-toggle {
  background: rgba(0, 0, 0, 0.08);
}

.header[data-mode="light"] .menu-toggle:hover {
  background: rgba(0, 0, 0, 0.12);
}

.header[data-mode="light"] .menu-toggle span {
  background: var(--color-text);
}

.logo {
  display: block;
  line-height: 0;
  justify-self: start;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide header logo when nav overlay is expanded */
body.nav-open .header .logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hide Coaching link when nav overlay is expanded */
body.nav-open .header .nav .nav-link[href="#coaching"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Force header to dark mode when nav overlay is open */
body.nav-open .header {
  background: transparent;
}

body.nav-open .header .nav-link {
  color: #fff;
}

body.nav-open .header .menu-toggle {
  background: rgba(255, 255, 255, 0.15);
}

body.nav-open .header .menu-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
}

body.nav-open .header .menu-toggle span {
  background: #fff;
}

body.nav-open--light .header .nav-link {
  color: #1a1a1d;
}

body.nav-open--light .header .menu-toggle {
  background: rgba(26, 26, 29, 0.15);
}

body.nav-open--light .header .menu-toggle:hover {
  background: rgba(26, 26, 29, 0.25);
}

body.nav-open--light .header .menu-toggle span {
  background: #1a1a1d;
}

.logo-img {
  display: block;
  height: 76px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* Light mode: show dark logo; dark mode: show light logo */
.header[data-mode="light"] .logo-img--light {
  display: none;
}
.header[data-mode="light"] .logo-img--dark {
  display: block;
}
.header[data-mode="hero"] .logo-img--dark,
.header[data-mode="dark"] .logo-img--dark {
  display: none;
}
.header[data-mode="hero"] .logo-img--light,
.header[data-mode="dark"] .logo-img--light {
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  justify-self: end;
}

.nav-link {
  font-size: 20px;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease, color 0.3s ease;
}

.nav-link:hover {
  opacity: 0.85;
}

.nav-link--center {
  justify-self: center;
  font-size: 24px;
  font-weight: 400;
}

.menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  transition: background 0.2s ease;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----- Hero (Cascaid-style: fixed while scroll drives background + text transition) ----- */
.hero-pin {
  height: 200vh;
  position: relative;
}

.hero-pin .hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: calc(80px + var(--space-80)) var(--space-40) var(--space-80);
  overflow: hidden;
}

/* Hero background – dark cloud image with subtle drift + transform animation + parallax */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: hero-bg-transform 50s ease-in-out infinite;
  will-change: transform, opacity;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-bg--dark {
  background-color: #08090c;
  background-image: url('images/hero-dark.png');
  opacity: 1;
}

.hero-bg--bright {
  background-color: #08090c;
  background-image: url('images/hero-bright.avif');
  opacity: 0;
}

@keyframes hero-bg-drift {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 25% 48%; }
  50% { background-position: 50% 52%; }
  75% { background-position: 75% 49%; }
}

@keyframes hero-bg-transform {
  0%, 100% {
    transform: translateX(0) translateY(0px) scale(1.5);
  }
  50% {
    transform: translateX(150px) translateY(25px) scale(1.5);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-bottom: 48px;
  will-change: transform;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.hero-title, .hero-title-2 {
  font-family: var(--font-heading);
  font-size: var(--text-hero-size);
  font-weight: 600;
  line-height: var(--text-hero-height);
  letter-spacing: var(--text-hero-spacing);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  margin: 0;
  text-align: center;
}

.hero-title {
  position: relative;
  z-index: 2;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  pointer-events: none;
  margin-bottom: var(--space-32);
}

.hero-title-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  opacity: 0;
  /* transform set by JS: translate(-50%, calc(-50% + Ypx)) for center + slide */
  transform: translate(-50%, calc(-50% + 100px));
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  pointer-events: none;
  margin: 0;
}

.hero-title-2 span {
  color: #08090cb5;
}

.hero-title span, .hero-title-2 span {
  font-size: 5.25vw;
  font-weight: 400;
  text-align: center;
  width: 100%;
}

/* Desktop + all non-480px: two lines for title, one line for subtitle (inline flow) */
.hero-title,
.hero-title-2 {
  display: block;
}

.hero-title span {
  display: inline;
}
.hero-title span:nth-child(2)::before {
  content: ' ';
}
.hero-title span:nth-child(2)::after {
  content: '\A';
  white-space: pre;
}
.hero-title span:nth-child(3) {
  margin-top: var(--space-32);
}
.hero-title span:nth-child(4)::before,
.hero-title span:nth-child(5)::before {
  content: ' ';
}

.hero-title-2 span {
  display: inline;
}
.hero-title-2 span:not(:first-child)::before {
  content: ' ';
}

.hero-title span:first-child, .hero-title span:nth-child(2) {
  font-size: 3.688vw;
  font-weight: 300;
  line-height: 200%;
}


/* ----- Floating CTA ----- */
.cta-floating {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 19px;
  background: #252528;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  /* Hidden on load: off-screen to the right */
  transform: translateX(calc(100% + 48px));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
}

.cta-floating.cta-floating--visible {
  transform: translateX(0);
  pointer-events: auto;
}

.cta-floating:hover {
  background: #1a1a1a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cta-floating.cta-floating--visible:hover {
  transform: translateY(-2px);
}

/* Light mode: when over section everyone / spacious (dark bg) – inverted colors */
.cta-floating.cta-floating--light {
  background: #fff;
  color: #252528;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cta-floating.cta-floating--light:hover {
  background: #f0f0f0;
  color: #1a1a1a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-24);
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  cursor: pointer;
  height: 60px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

a.btn {
  border-radius: 0;
}

.btn--primary {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: 2px solid var(--color-btn-bg);
}

.btn--primary:hover {
  background: #333;
  border-color: #333;
  transform: translateY(-1px);
}

.btn--outline {
  background: #fff;
  color: var(--color-text);
  border: 2px solid var(--color-text);
}

.btn--outline:hover {
  background: var(--color-text);
  color: #fff;
}

/* ----- Sections ----- */
/* Each section fits viewport height; padding, gap and font sizes scale with vh */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--section-min-height);
  gap: var(--section-gap);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  /* margin-left: 0; */
  /* margin-right: 0; */
  padding: var(--section-padding-y) var(--section-padding-x);
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}

.section.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.section-heading {
  font-family: var(--font-heading);
  font-size: var(--section-heading-size);
  font-weight: 500;
  line-height: var(--section-heading-line);
  letter-spacing: 0;
  color: rgba(25, 25, 23, 1);
  text-transform: capitalize;
  width: 100%;
  margin: 0;
  position: relative;
  display: inline-block;
  transform: translateY(60px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.section.is-in-view .section-heading {
  transform: translateY(0);
  opacity: 1;
}

/* Blurred Thinking ----- */
.section--blurred, .section--spacious, .section--aligned, .section--everyone  {
  position: relative;
  width: 100%;
  min-height: var(--section-min-height);
  max-width: none;
  justify-content: center;
}

.section--spacious {
  background-color: #1a1a1d;
}

.section--spacious .section-heading,
.section--spacious .space-paragraph {
  color: #fff;
}

.section--aligned, .section--blurred {
  background-color: #fff;
}

.section--aligned .section-heading,
.section--aligned .space-paragraph {
  color: rgba(25, 25, 23, 1);
}

.section--everyone {
  background-color: #1a1a1d;
}

.section--everyone .section-heading,
.section--everyone .space-paragraph {
  color: #fff;
}

.section--collage {
  background-color: #fff;
  flex-direction: column;
  align-items: center;
  padding: var(--space-100) var(--space-20);
}

.section--collage .section-heading {
  color: rgba(25, 25, 23, 1);
  width: 100%;
  margin-bottom: var(--space-40);
}

.blurred-cols {
  display: flex;
  gap: var(--blurred-cols-gap);
  width: 100%;
  margin-top: 0;
  padding-left: var(--blurred-cols-padding-x);
  padding-right: var(--blurred-cols-padding-x);
  justify-content: center;
  align-items: flex-start;
}

/* Space section ----- */
.space-paragraph {
  font-family: var(--font-body);
  font-size: var(--space-paragraph-size);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(25, 25, 23, 1);
  margin: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
} 

.space-paragraph .space-word {
  opacity: 0.3;
  transition: opacity 0.55s ease;
}

.space-paragraph.is-in-view .space-word {
  opacity: 1;
}

/* ----- Footer ----- */
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--section-min-height);
  background: #fff;
  padding: var(--footer-padding-y) var(--footer-padding-x);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}

.footer.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.footer-grid {
  width: 100%;
  max-width: none;
  margin: 0 auto var(--space-64);
  display: flex;
  flex-wrap: wrap;
  gap: var(--footer-gap);
  justify-content: space-between;
}

.footer-col {
  flex: 1 1 0;
  min-width: 0;
}

.footer-col--consultation {
  flex: 0 1 auto;
  max-width: calc(50% - var(--space-56) / 2);
}

.footer-col--right {
  flex: 0 1 auto;
  display: flex;
  gap: var(--space-80);
  max-width: calc(50% - var(--space-56) / 2);
  text-align: right;
  margin-left: auto;
}

.footer-col--right .footer-col {
  flex: 0 1 auto;
  text-align: right;
}

.footer-col--right .footer-heading {
  text-align: right;
}

.footer-col--right .footer-links {
  text-align: right;
}

.footer-col--right .footer-links li {
  text-align: right;
}

.footer-col--right .footer-links a {
  text-align: right;
  display: inline-block;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 300;
  line-height: var(--text-foot-height);
  letter-spacing: 0.02em;
  color: rgba(25, 25, 23, 1);
  margin: 0 0 var(--space-24);
}

.footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.footer-legal {
  font-size: var(--text-legal-size);
  line-height: var(--text-legal-height);
  color: var(--color-text-muted);
  margin: 0;
  width: 70%;
}

.footer-links a {
  display: inline-block;
  font-size: 20px;
  line-height: var(--text-foot-height);
  color: var(--color-text);
  padding: var(--space-4) 0;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-text-muted);
}

.footer-signature {
  width: 100%;
  font-family: var(--font-signature);
  font-size: 160px;
  font-weight: 400;
  line-height: var(--text-signature-height);
  color: rgba(25, 25, 23, 1);
  text-align: center;
  margin: 0;
  letter-spacing: 0.03em;
  transform: translateY(60px);
  opacity: 0;
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer.is-in-view .footer-signature {
  transform: translateY(0);
  opacity: 1;
}

/* ----- Nav overlay (mobile menu) – opens from top, staggered link animation ----- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--space-40);
  padding-right: var(--space-120);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

body.nav-open--dark .nav-overlay {
  background: #1a1a1d;
}

body.nav-open--light .nav-overlay {
  background: #fff;
}

.nav-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
}

.nav-overlay-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: center;
  line-height: 0;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.nav-overlay.is-open .nav-overlay-logo {
  opacity: 1;
  transform: translateX(0);
}

.nav-overlay-logo-img {
  height: 400px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.nav-overlay-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-32);
}

.nav-overlay-menu a {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 500;
  text-align: right;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

body.nav-open--dark .nav-overlay-menu a {
  color: #fff;
}

body.nav-open--light .nav-overlay-menu a {
  color: #1a1a1d;
}

/* Staggered delay only when opening – links animate in one by one */
.nav-overlay.is-open .nav-overlay-menu a:nth-child(1) { transition-delay: 0.08s; }
.nav-overlay.is-open .nav-overlay-menu a:nth-child(2) { transition-delay: 0.14s; }
.nav-overlay.is-open .nav-overlay-menu a:nth-child(3) { transition-delay: 0.2s; }
.nav-overlay.is-open .nav-overlay-menu a:nth-child(4) { transition-delay: 0.26s; }
.nav-overlay.is-open .nav-overlay-menu a:nth-child(5) { transition-delay: 0.32s; }

.nav-overlay.is-open .nav-overlay-menu a {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay-menu a:hover {
  opacity: 0.8;
}

/* ----- Responsive ----- */
/* Desktop 1360px and below */
@media (max-width: 1360px) {

  :root {
    --blurred-cols-padding-x: 120px;
    --section-padding-x: clamp(1.5rem, 8vw, 120px);
    --footer-padding-x: clamp(1.5rem, 8vw, 120px);
  }


  .header {
    padding: var(--space-24) var(--space-32);
  }

  .nav-overlay {
    padding-left: var(--space-40);
    padding-right: var(--space-96);
  }

  .hero {
    padding: calc(80px + var(--space-64)) var(--space-40) var(--space-64);
  }

  .hero-title, .hero-title-2 {
    gap: var(--space-24);
  }

  .hero-title {
    margin-bottom: var(--space-24);
  }

  .hero-title-2 {
    margin-bottom: var(--space-40);
  }

  .blurred-cols {
    gap: 56px;
    padding-left: 0;
    padding-right: 0;
  }

  .space-paragraph {
    font-size: var(--space-paragraph-size);
    gap: 0 0.32em;
  }

  .footer-grid {
    gap: var(--space-48);
    margin-bottom: var(--space-56);
  }

  .footer-heading {
    font-size: 26px;
    margin-bottom: var(--space-20);
  }

  .footer-signature {
    font-size: clamp(100px, 14vw, 140px);
  }

  .footer-links a {
    font-size: 19px;
  }

  .footer-legal {
    width: 75%;
  }

  .nav-overlay-menu {
    gap: var(--space-24);
  }

  .nav-overlay-menu a {
    font-size: 50px;
  }

  .nav-overlay-logo-img {
    height: 340px;
    max-width: 50vw;
  }

  .cta-floating {
    bottom: 22px;
    right: 22px;
    height: 61px;
    padding: 0 18px;
    font-size: 0.9rem;
  }

  .cta-floating.cta-floating--visible {
    transform: translateX(0);
  }

  .btn {
    padding: var(--space-12) var(--space-24);
    min-height: 48px;
    height: 56px;
    font-size: 16px;
  }
}

/* Smaller desktop */
@media (max-width: 1100px) {

  :root {
    --section-heading-size: clamp(2rem, 8vh, 60px);
  }

  .decoration__butterfly {
    bottom: calc(8vh + 21vw + var(--butterfly-progress, 0) * 66vh - var(--butterfly-progress, 0) * 20vw);
    width: 25.833vw;
  }
  
  .decoration__stone img {
    width: 25.833vw;
  }

  .blurred-cols {
    gap: 56px;
    padding-left: 0;
    padding-right: 0;
  }

  .space-paragraph {
    font-size: var(--space-paragraph-size);
    gap: 0 0.3em;
  }

  .footer-grid {
    gap: var(--space-40);
    margin-bottom: var(--space-48);
  }

  .footer-heading {
    font-size: 24px;
  }

  .footer-signature {
    font-size: clamp(80px, 15vw, 120px);
  }

  .footer-links a {
    font-size: 18px;
  }

  .nav-overlay-menu a {
    font-size: 44px;
  }

  .nav-overlay-logo-img {
    height: 280px;
    max-width: 55vw;
  }

  .cta-floating {
    bottom: 21px;
    right: 19px;
    height: 58px;
    padding: 0 16px;
    font-size: 16px;
  }
}

@media (max-width: 900px) {

  .decoration__butterfly {
    bottom: calc(8vh + 25vw + var(--butterfly-progress, 0) * 66vh - var(--butterfly-progress, 0) * 20vw);
    width: 30.833vw;
  }
  
  .decoration__stone img {
    width: 30.833vw;
  }

  .header {
    padding: var(--space-16) var(--space-24);
  }

  .nav-overlay {
    padding-left: var(--space-24);
    padding-right: var(--space-48);
  }

  .space-paragraph {
    font-size: var(--space-paragraph-size);
  }

  .footer-grid {
    flex-wrap: wrap;
    gap: var(--space-32);
    margin-bottom: var(--space-40);
  }

  .footer-col--consultation {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .footer-col--right {
    max-width: 100%;
    flex: 1 1 100%;
    flex-direction: row;
    margin-left: auto;
    gap: var(--space-48);
  }

  .footer-heading {
    font-size: 22px;
    margin-bottom: var(--space-16);
  }

  .footer-signature {
    font-size: clamp(64px, 12vw, 96px);
  }

  .footer-legal {
    width: 100%;
  }

  .nav-overlay-menu {
    gap: var(--space-24);
  }

  .nav-overlay-menu a {
    font-size: 36px;
  }

  .nav-overlay-logo-img {
    height: 200px;
    max-width: 60vw;
  }

  .cta-floating {
    bottom: 19px;
    right: 16px;
    height: 54px;
    padding: 0 14px;
    font-size: 16px;
  }

  .hero-title, .hero-title-2 {
    gap: var(--space-24);
  }

  .hero-title {
    margin-bottom: var(--space-24);
  }

  .hero-title-2 {
    margin-bottom: var(--space-32);
  }

  .hero-title span, .hero-title-2 span {
    font-size: 7vw;
  }

  
  .footer-col--right {
    flex-direction: row;
    gap: var(--space-24);
    text-align: left;
    justify-content: space-between;
  }

  .footer-col--right .footer-col {
    flex: 0 1 auto;
    text-align: left;
  }

  .footer-col--right .footer-heading {
    text-align: left;
  }

  .footer-col--right .footer-links,
  .footer-col--right .footer-links li,
  .footer-col--right .footer-links a {
    text-align: left;
  }

  .footer-signature {
    font-size: clamp(60px, 17vw, 120px);
  }

  .btn {
    padding: var(--space-12) var(--space-24);
    min-height: 44px;
    height: 52px;
    font-size: 16px;
  }
}

/* Mobile */
@media (max-width: 600px) {

  :root {
    --section-heading-size: clamp(2rem, 5vh, 48px);
    --space-paragraph-size: clamp(1rem, 2.5vh, 32px);
  }

  .decoration__butterfly {
    bottom: calc(8vh + 33vw + var(--butterfly-progress, 0) * 66vh - var(--butterfly-progress, 0) * 20vw);
    width: 40.833vw;
  }
  
  .decoration__stone img {
    width: 40.833vw;
  }

  .header {
    padding: var(--space-12) var(--space-16);
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .nav-link {
    display: none;
  }

  .nav-link--center {
    display: block;
  }

  @keyframes hero-bg-transform {
    0%, 100% {
      transform: translateX(0) translateY(0px) scale(1.5);
    }
    50% {
      transform: translateX(100px) translateY(25px) scale(1.5);
    }
  }

  .hero {
    padding: calc(60px + var(--space-48)) var(--space-16) var(--space-48);
    align-items: center;
  }

  .hero-title, .hero-title-2 {
    gap: var(--space-16);
  }

  .hero-title {
    text-align: center;
    margin-bottom: var(--space-16);
  }

  .hero-title-2 {
    margin-bottom: var(--space-24);
  }


  .hero-title span, .hero-title-2 span {
    font-size: clamp(1.25rem, 10vw, 14vw);
    line-height: 1.5;
  }

  .hero-title span:first-child, .hero-title span:nth-child(2) {
    font-size: clamp(1.125rem, 10vw, 14vw);
    line-height: 1.5;
    font-weight: 400;
  }

  .hero-content {
    padding-bottom: 32px;
  }

  .cta-floating {
    bottom: 16px;
    right: 10px;
    height: 51px;
    padding: 0 12px;
    font-size: 12px;
  }

  .blurred-cols {
    padding-left: 0;
    padding-right: 0;
    gap: var(--space-24);
    flex-direction: column;
  }

  .space-paragraph {
    gap: 0 0.3em;
    letter-spacing: 0.2px;
  }

  .footer-grid {
    gap: var(--space-24);
    margin-bottom: var(--space-32);
  }

  .footer-heading {
    font-size: 20px;
    margin-bottom: var(--space-24);
  }

  .footer-col--right {
    flex-direction: row;
    gap: var(--space-24);
    text-align: left;
    justify-content: space-between;
  }

  .footer-col--right .footer-col {
    flex: 0 1 auto;
    text-align: left;
  }

  .footer-col--right .footer-heading {
    text-align: left;
  }

  .footer-col--right .footer-links,
  .footer-col--right .footer-links li,
  .footer-col--right .footer-links a {
    text-align: left;
  }

  .footer-signature {
    font-size: clamp(48px, 16vw, 100px);
  }

  .footer-buttons {
    gap: var(--space-12);
    margin-bottom: var(--space-24);
  }

  .footer-links a {
    font-size: 16px;
    padding: var(--space-4) 0;
  }

  .footer-legal {
    font-size: 0.7rem;
    width: 100%;
  }

  .nav-overlay {
    padding-left: var(--space-16);
    padding-right: var(--space-24);
  }

  .nav-overlay-menu {
    gap: var(--space-16);
  }

  .nav-overlay-menu a {
    font-size: 28px;
  }

  .nav-overlay-logo-img {
    height: 140px;
    max-width: 70vw;
  }

  .footer-col--consultation {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .footer-col--right {
    max-width: 100%;
    flex: 1 1 100%;
    flex-direction: row;
    margin-left: auto;
    gap: var(--space-32);
  }

  .footer-col--right .footer-col {
    flex: 1 1 100%;
  }

  .footer-buttons {
    flex-direction: column;
  }

  .footer-buttons .btn {
    width: 100%;
  }

  .btn {
    padding: var(--space-12) var(--space-24);
    min-height: 44px;
    height: 48px;
    font-size: 15px;
  }
}

/* Small mobile */
@media (max-width: 480px) {

  :root {
    --section-heading-size: clamp(2rem, 5vh, 40px);
    --space-paragraph-size: clamp(1rem, 2.5vh, 24px);
  }

  .decoration__butterfly {
    left: calc(0vw + var(--butterfly-progress, 0) * 50vw);
    bottom: calc(8vh + 34vw + var(--butterfly-progress, 0) * 66vh - var(--butterfly-progress, 0) * 20vw);
    width: 45.833vw;
  }
  
  .decoration__stone img {
    width: 40.833vw;
  }

  .header {
    padding: var(--space-8) var(--space-12);
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .header .logo {
    justify-self: start;
  }

  .logo-img {
    height: 14vw;
    min-height: 36px;
    max-width: 42vw;
    width: auto;
    object-fit: contain;
  }

  .nav-link--center {
    display: block;
    justify-self: center;
    font-size: clamp(0.875rem, 4.2vw, 1.125rem);
  }

  .header .nav {
    justify-self: end;
  }

  .hero {
    padding: calc(50px + var(--space-40)) var(--space-12) var(--space-40);
    justify-content: center;
  }

  .hero-content {
    padding-bottom: 0;
  }

  @keyframes hero-bg-transform {
    0%, 100% {
      transform: translateX(0) translateY(0px) scale(1.5);
    }
    50% {
      transform: translateX(80px) translateY(25px) scale(1.5);
    }
  }
  

  .hero-title, .hero-title-2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .hero-title {
    margin-bottom: var(--space-12);
  }

  .hero-title span {
    display: block;
  }
  .hero-title span:nth-child(3) {
    margin-top: 0;
  }
  .hero-title span:nth-child(2)::before,
  .hero-title span:nth-child(2)::after,
  .hero-title span:nth-child(4)::before,
  .hero-title span:nth-child(5)::before {
    content: none;
  }

  .hero-title-2 {
    margin-bottom: var(--space-16);
  }

  .hero-title-2 span {
    display: block;
  }
  .hero-title-2 span:not(:first-child)::before {
    content: none;
  }

  .hero-title span, .hero-title-2 span {
    font-size: clamp(1.25rem, 11vw, 14vw);
    line-height: 1.2;
  }

  .hero-title span:first-child, .hero-title span:nth-child(2) {
    font-size: clamp(1.125rem, 11vw, 14vw);
    line-height: 1.2;
    font-weight: 400;
  }

  .section {
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: var(--space-40);
  }

  .blurred-cols {
    padding-left: 0;
    padding-right: 0;
    gap: var(--space-16);
    flex-direction: column;
  }

  .space-paragraph {
    font-size: var(--space-paragraph-size);
    gap: 0 0.3em;
    letter-spacing: 0.2px;
  }

  .footer {
    padding: var(--space-80) var(--space-24);
  }

  .footer-grid {
    gap: var(--space-40);
    margin-bottom: var(--space-24);
  }

  .footer-col--right {
    flex-direction: row;
    gap: var(--space-24);
    text-align: left;
    justify-content: space-between;
  }

  .footer-col--right .footer-col {
    flex: 0 1 auto;
    text-align: left;
  }

  .footer-col--right .footer-heading {
    text-align: left;
  }

  .footer-col--right .footer-links,
  .footer-col--right .footer-links li,
  .footer-col--right .footer-links a {
    text-align: left;
  }

  .footer-heading {
    font-size: 18px;
    margin-bottom: var(--space-8);
  }

  .footer-signature {
    font-size: clamp(40px, 16vw, 72px);
  }

  .nav-overlay {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-24);
    gap: var(--space-40);
  }

  .nav-overlay-logo {
    justify-content: center;
  }

  .nav-overlay-menu {
    align-items: center;
    gap: var(--space-20);
  }

  .nav-overlay-menu a {
    font-size: 24px;
    text-align: center;
  }

  .nav-overlay-logo-img {
    height: 100px;
    max-width: 80vw;
  }

  .cta-floating {
    bottom: 13px;
    right: 10px;
    height: 45px;
    padding: 0 11px;
    font-size: 12px;
  }

  .cta-floating.cta-floating--visible {
    transform: translateX(0);
  }

  .btn {
    padding: var(--space-12) var(--space-16);
    min-height: 42px;
    height: 44px;
    font-size: 14px;
  }
}

/* =====================================================
   ABOUT PAGE - EDITORIAL LAYOUT
===================================================== */

.ab-hero.section, .ab-section.section {
  max-width: 100%; /* Override default section max-width to make it full width */
}

.ab-hero {
  background: #fafafa;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 180px var(--section-padding-x) 100px;
}

.ab-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 400;
  color: #1a1a1d;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

.ab-hero__subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin: 0;
}

/* ── Split Layout Sections ── */
.ab-section {
  width: 100%;
  padding: 5rem var(--section-padding-x);
}

@media (min-width: 768px) {
  .ab-section {
    padding: 8rem var(--section-padding-x);
  }
}

.ab-section--light {
  background: #fff;
}

.ab-section--dark {
  background: #1a1a1d;
}

.ab-split {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .ab-split {
    grid-template-columns: repeat(12, 1fr);
    gap: 6vw;
  }
  
  .ab-split__left {
    grid-column: span 4;
    position: sticky;
    top: 8rem;
    align-self: start; /* Crucial for sticky behavior */
    z-index: 10;
  }
  
  .ab-split__right {
    grid-column: span 8;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
}

.ab-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

.ab-section--light .ab-heading { color: #1a1a1d; }
.ab-section--dark .ab-heading { color: #fff; }

.ab-text-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ab-lead {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  color: #1a1a1d;
  margin: 0;
}

.ab-text {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.8;
  margin: 0;
}

.ab-section--light .ab-text { color: rgba(26, 26, 29, 0.8); }
.ab-section--dark .ab-text { color: rgba(255, 255, 255, 0.7); }

/* ── Imagery ── */
.ab-image-wrapper {
  width: 100%;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 2px;
}

.ab-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  opacity: 0.8;
  transform: scale(1);
  transition: all 800ms ease-in-out;
}

.ab-image-wrapper:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.ab-section--dark .ab-image-wrapper img {
  mix-blend-mode: luminosity;
  opacity: 0.6;
}

.ab-section--dark .ab-image-wrapper:hover img {
  mix-blend-mode: normal;
  opacity: 1;
}

.ab-image--large {
  aspect-ratio: 16/9;
}

.ab-image--portrait {
  max-width: 75%;
  margin-left: auto;
  aspect-ratio: 4/5;
}

.ab-image--landscape {
  max-width: 85%;
  margin-right: auto;
  aspect-ratio: 3/2;
}

.ab-image-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ab-image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
  .ab-image-grid .ab-image-wrapper:nth-child(2) {
    margin-top: 6rem;
  }
}

.ab-image-grid .ab-image-wrapper:nth-child(1) { aspect-ratio: 4/5; }
.ab-image-grid .ab-image-wrapper:nth-child(2) { aspect-ratio: 4/5; }

/* ----- Coaching Page Styles ----- */
.section--coaching-hero {
  background: #fff;
  min-height: 60vh;
  max-width: none;
  width: 100%;
  padding: 160px var(--space-40) 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ============================= */
/* HERO COLLAGE BACKGROUND       */
/* ============================= */
.collage-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.collage-image {
  position: absolute;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  opacity: 0.1;
  pointer-events: none;
  mix-blend-mode: multiply;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}

/* Organic sizes and overlapping placements */
.collage-image--1 {
  width: 26vw; max-width: 360px; aspect-ratio: 3/4;
  top: -5%; left: 4%;
  transform: rotate(-4deg);
}

.collage-image--2 {
  width: 22vw; max-width: 300px; aspect-ratio: 1/1;
  top: 15%; right: 6%;
  transform: rotate(6deg);
}

.collage-image--3 {
  width: 24vw; max-width: 340px; aspect-ratio: 4/5;
  bottom: -8%; left: 28%;
  transform: rotate(-3deg);
}

.collage-image--4 {
  width: 18vw; max-width: 260px; aspect-ratio: 4/5;
  top: 40%; left: -4%;
  transform: rotate(8deg);
}

.collage-image--5 {
  width: 25vw; max-width: 350px; aspect-ratio: 2/3;
  bottom: 5%; right: -2%;
  transform: rotate(-6deg);
}

@media (max-width: 900px) {
  .collage-image {
    opacity: 0.03;
  }
  .collage-image--1 { width: 35vw; top: -2%; left: -2%; }
  .collage-image--2 { width: 32vw; top: 12%; right: -2%; }
  .collage-image--3 { width: 38vw; bottom: 2%; left: 20%; }
  .collage-image--4, .collage-image--5 { display: none; }
}

@media (max-width: 600px) {
  .collage-image { opacity: 0.025; }
  .collage-image--1 { width: 45vw; left: -5%; }
  .collage-image--2 { width: 40vw; right: -5%; }
  .collage-image--3 { width: 50vw; left: 10%; bottom: -5%; }
}

.coaching-hero-content {
  text-align: center;
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.coaching-hero-label {
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(25, 25, 23, 0.6);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-30);
}

.coaching-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 600;
  line-height: 1.1;
  color: rgba(25, 25, 23, 1);
  margin: 0;
}

/* Benefits Cards Grid */
.section--coaching-benefits {
  background-color: #fff;
  padding: var(--space-80) var(--space-20);
  min-height: auto;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-40);
  max-width: 1200px;
  margin: 0 auto;
}

.benefit-card {
  background: #f8f8f8;
  border-radius: 8px;
  padding: var(--space-40);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.benefit-card:hover {
  background: #f0f0f0;
  transform: translateY(-4px);
}

.benefit-icon {
  width: 48px;
  height: 48px;
  color: rgba(25, 25, 23, 0.7);
  margin-bottom: var(--space-20);
  flex-shrink: 0;
}

.benefit-icon svg {
  width: 100%;
  height: 100%;
}

.benefit-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--space-12) 0;
  color: rgba(25, 25, 23, 1);
}

.benefit-description {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(25, 25, 23, 0.7);
  margin: 0;
}

/* What is Coaching Section */
.section--coaching-definition {
  background-color: #fff;
  padding: var(--space-80) var(--space-20);
  min-height: auto;
}

.coaching-definition-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-60);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.coaching-definition-left .section-heading {
  margin-top: 0;
}

.coaching-definition-text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(25, 25, 23, 0.8);
  font-style: italic;
}

.coaching-definition-highlight {
  font-size: 16px;
  font-weight: 600;
  color: rgba(25, 25, 23, 1);
  display: block;
  margin-bottom: var(--space-24);
}

.coaching-definition-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.coaching-definition-checklist li {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  color: rgba(25, 25, 23, 0.8);
  line-height: 1.6;
  font-size: 14px;
}

.coaching-definition-checklist svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(25, 25, 23, 0.6);
}

/* How Coaching Makes a Difference Section */
.section--coaching-difference {
  background-color: rgba(25, 25, 23, 0.95);
  color: #fff;
  padding: var(--space-80) var(--space-20);
  min-height: auto;
}

.coaching-difference-content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.coaching-difference-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.2;
  margin: 0 0 var(--space-40) 0;
  color: #fff;
  font-weight: 600;
}

.coaching-difference-text {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-40);
}

.coaching-difference-quote {
  font-size: 16px;
  font-style: italic;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Responsive: 2-column grid becomes single column on mobile */
@media (max-width: 768px) {
  .coaching-definition-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

.coaching-hero-content {
  text-align: center;
  max-width: 900px;
}

.coaching-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-hero-size);
  font-weight: 600;
  line-height: var(--text-hero-height);
  letter-spacing: var(--text-hero-spacing);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  margin: 0 0 var(--space-40) 0;
}

.coaching-hero-title span {
  display: inline;
}

.coaching-hero-subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-lead-size);
  font-weight: 300;
  line-height: var(--text-lead-height);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin: 0;
}

/* Ensure Programs Hero Content is above collage */
.programs-hero__badge,
.programs-hero__title,
.programs-hero__sub {
  position: relative;
  z-index: 1;
}

/* Coaching Content Layout */
.coaching-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.coaching-text {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 400;
  line-height: var(--text-body-height);
  color: var(--color-text);
  margin: 0;
}

.coaching-text p {
  margin: 0 0 var(--space-24) 0;
}

.coaching-text p:last-child {
  margin-bottom: 0;
}

.coaching-text--light {
  color: #fff;
}

.coaching-text--light p {
  color: #fff;
}

.coaching-highlight {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-24) !important;
  color: inherit;
}

.coaching-promise {
  font-style: italic;
  font-weight: 500;
  margin-top: var(--space-32) !important;
  font-size: 1.125rem;
}

/* Coaching Lists */
.coaching-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-24) 0;
}

.coaching-list li {
  padding-left: var(--space-32);
  margin-bottom: var(--space-16);
  position: relative;
  font-size: var(--text-body-size);
  line-height: var(--text-body-height);
}

.coaching-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 600;
}

.coaching-list--light li {
  color: #fff;
}

.coaching-list--light li::before {
  color: #fff;
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--section-gap);
  width: 100%;
  margin-top: var(--section-gap);
}

.benefit-card {
  padding: var(--space-40);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.benefit-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}

.benefit-description {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--text-body-height);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Responsive: Coaching Page */
@media (max-width: 768px) {
  .coaching-hero-title {
    gap: var(--space-16);
    margin-bottom: var(--space-24);
  }

  .coaching-hero-title span {
    display: block;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .benefit-card {
    padding: var(--space-24);
  }
}

/* ============================= */
/* IMAGE COLLAGE                 */
/* ============================= */
.image-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Use 10 smaller rows to allow for precise portrait/landscape heights */
  grid-template-rows: repeat(10, 50px);
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ----- Base item ----- */
.collage-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #f5f5f5;
  min-height: 0;
}

/* ----- Image fitting ----- */
.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.collage-item:hover img {
  transform: scale(1.05);
}

/* ============================= */
/* DESKTOP LAYOUT                */
/* ============================= */

/* Item 1 (4.jpg): Top-Left (Landscape) */
.collage-item--1 {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
}

/* Item 2 (1.jpg): Center (Tall Portrait) */
.collage-item--2 {
  grid-column: 5 / 9;
  grid-row: 1 / 11;
}

/* Item 3 (3.jpg): Top-Right (Portrait) */
.collage-item--3 {
  grid-column: 9 / 13;
  grid-row: 1 / 7;
}

/* Item 4 (5.jpg): Bottom-Left (Portrait) */
.collage-item--4 {
  grid-column: 1 / 5;
  grid-row: 5 / 11;
}

.about-content {
  font-family: var(--font-heading);
}

/* Item 5 (2.jpg): Bottom-Right (Landscape/Square) */
.collage-item--5 {
  grid-column: 9 / 13;
  grid-row: 7 / 11;
}
/* ============================= */
/* TABLET (≤1024px)              */
/* ============================= */

@media (max-width: 1024px) {
  .image-collage {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 220px 220px 240px;
  }

  /* Row 1: item 1 wide, item 2 portrait (spans rows 1-2) */
  .collage-item--1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .collage-item--2 { grid-column: 3 / 5; grid-row: 1 / 3; }

  /* Row 2: item 3, item 4 */
  .collage-item--3 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .collage-item--4 { grid-column: 2 / 3; grid-row: 2 / 3; }

  /* Row 3: item 5 full width */
  .collage-item--5 { grid-column: 1 / 5; grid-row: 3 / 4; }
}

/* ============================= */
/* MOBILE (≤768px)               */
/* ============================= */

@media (max-width: 768px) {
  .image-collage {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 200px 200px 200px;
    gap: 12px;
  }

  .collage-item--1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .collage-item--2 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .collage-item--3 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .collage-item--4 { grid-column: 1 / 2; grid-row: 3 / 4; }
  .collage-item--5 { grid-column: 2 / 3; grid-row: 3 / 4; }

  /* Mobile collage: reduce opacity and hide some images */
  .collage-image {
    opacity: 0.04;
  }

  .collage-image--4,
  .collage-image--5 {
    display: none;
  }

  .collage-image--1 {
    width: 180px;
    height: 160px;
    top: 20px;
    left: 5%;
  }

  .collage-image--2 {
    width: 140px;
    height: 150px;
    top: 35%;
    right: 5%;
  }

  .collage-image--3 {
    width: 160px;
    height: 130px;
    bottom: 50px;
    left: 20%;
  }
}
/* ----- 2560px and up: cap fonts and spacing to 1920px-equivalent (no layout max-width) ----- */
@media (min-width: 2560px) {
  :root {
    --text-hero-size: 4.25rem;
    --text-h2-size: 2.75rem;
    --text-lead-size: 1.375rem;
  }

  .hero-title span,
  .hero-title-2 span {
    font-size: 7.5rem;
  }

  .hero-title span:first-child,
  .hero-title span:nth-child(2) {
    font-size: 5.625rem;
  }
}
/* ============================= */
/* COLLAGE HOVER EFFECTS         */
/* ============================= */

/* 1. When the container is hovered, push ALL items back slightly */
.image-collage:hover .collage-item {
  opacity: 0.4;
  filter: grayscale(100%);
  transform: scale(0.95);
}

/* ----- Base item ----- */
.collage-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #f5f5f5;
  min-height: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  will-change: transform, filter, opacity;
  /* Smooth transitions for the container hover effect */
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              filter 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. When a SPECIFIC item is hovered, pop it forward and restore color */
.image-collage .collage-item:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
  box-shadow: 0 30px 60px rgba(0,0,0,0.3); /* Deep luxury shadow */
  z-index: 10; /* Ensure it overlaps siblings */
}

/* ----- Image wrapper for parallax ----- */
.collage-image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ----- Image fitting ----- */
.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
  /* Image zooms slightly inside its container */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.collage-item:hover img {
  transform: scale(1.08); 
}


/* Disable hover effects and show full color on touch devices */
@media (hover: none) {
  /* Standard images */
  .ab-image-wrapper img {
    filter: grayscale(0%);
    opacity: 1;
  }

  /* Dark section images */
  .ab-section--dark .ab-image-wrapper img {
    mix-blend-mode: normal;
    opacity: 1;
  }
}



.nav-link {
  font-size: 20px; /* Original was 20px */
}

/* 3. The Large Overlay Menu (shown in your screenshot) */
.nav-overlay-menu a {
  font-size: 48px; /* Original was 56px */
}

/* 4. Responsive adjustments for the overlay menu so it scales down on mobile */
@media (max-width: 1360px) {
  .nav-overlay-menu a { font-size: 42px; } /* Original was 50px */
}
@media (max-width: 1100px) {
  .nav-overlay-menu a { font-size: 36px; } /* Original was 44px */
}
@media (max-width: 900px) {
  .nav-overlay-menu a { font-size: 30px; } /* Original was 36px */
}
@media (max-width: 600px) {
  .nav-overlay-menu a { font-size: 24px; } /* Original was 28px */
}
@media (max-width: 480px) {
  .nav-overlay-menu a { font-size: 20px; } /* Original was 24px */
}