/* ==========================================================================
   OLIVE — THE MIND ATELIER · v8.0
   Warm, editorial design system: cream paper, sage & olive, serif display.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --cream:        #F7F3EA;
  --paper:        #FBF8F1;
  --cream-deep:   #EFE8D9;
  --cream-warm:   #F2EBDB;
  --ink:          #2C3227;
  --ink-soft:     #5A6350;
  --ink-faint:    #8A9080;
  --olive:        #4A5A3C;
  --olive-deep:   #34412B;
  --olive-dark:   #262f1f;
  --sage:         #97A681;
  --sage-soft:    #C9D2B9;
  --terracotta:   #B4714F;
  --line:         rgba(60, 70, 50, .16);
  --line-soft:    rgba(60, 70, 50, .09);
  --white:        #ffffff;

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 22px;
  --radius-lg: 34px;

  /* Motion */
  --ease: cubic-bezier(.22, .68, .24, 1);
  --shadow-soft: 0 24px 60px -34px rgba(44, 50, 39, .38);
  --shadow-card: 0 18px 44px -28px rgba(44, 50, 39, .42);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body.overflow-hidden { overflow: hidden; }

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

a { color: inherit; }
button { font: inherit; color: inherit; touch-action: manipulation; }
a { touch-action: manipulation; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, figure { margin: 0; }
figure { margin: 0; }

::selection { background: var(--sage-soft); color: var(--olive-deep); }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 4px;
}

.hidden { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  width: min(var(--maxw), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.section-padding { padding: clamp(4.5rem, 9vw, 8rem) 0; }

section[id] { scroll-margin-top: 92px; }

/* ---------- Typography helpers ---------- */
h1, h2, h3, .serif { font-family: var(--serif); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.6rem;
}
.section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.label-light { color: var(--sage-soft); }
.label-light::before { opacity: .7; }

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--ink);
}

.serif-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--olive);
}

p { color: var(--ink-soft); }

.section-header { max-width: 720px; margin-bottom: clamp(2.6rem, 5vw, 4rem); }

.inline-link {
  color: var(--olive);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(74, 90, 60, .45);
  transition: box-shadow .25s var(--ease), color .25s var(--ease);
  cursor: pointer;
}
.inline-link:hover { color: var(--olive-deep); box-shadow: inset 0 -1px 0 var(--olive-deep); }
button.inline-link { background: none; border: 0; padding: 0; font: inherit; }

/* ---------- Ambient background ---------- */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
}
.ambient-1 {
  width: 48vw; height: 48vw;
  top: -18vw; right: -12vw;
  background: radial-gradient(circle, rgba(151, 166, 129, .34), transparent 68%);
}
.ambient-2 {
  width: 42vw; height: 42vw;
  bottom: -16vw; left: -14vw;
  background: radial-gradient(circle, rgba(180, 113, 79, .14), transparent 70%);
}
.ambient-grain {
  position: absolute;
  inset: 0;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, .main-header, .main-footer, .mobile-overlay-nav, .modal-overlay {
  position: relative;
  z-index: 1;
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--sage), var(--olive));
  z-index: 100;
  transition: width .1s linear;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.btn svg { flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(2px); }

.btn-primary {
  background: var(--olive);
  color: var(--cream);
  box-shadow: 0 12px 26px -18px rgba(52, 65, 43, .9);
}
.btn-primary:hover {
  background: var(--olive-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -18px rgba(52, 65, 43, .85);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--olive); color: var(--olive); transform: translateY(-2px); }

.btn-outline {
  border-color: rgba(74, 90, 60, .38);
  color: var(--olive);
}
.btn-outline:hover { background: var(--olive); color: var(--cream); border-color: var(--olive); }

.btn-cream { background: var(--cream); color: var(--olive-deep); }
.btn-cream:hover { background: var(--white); transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(0,0,0,.55); }

.btn-ghost-light { border-color: rgba(247, 243, 234, .38); color: var(--cream); }
.btn-ghost-light:hover { background: rgba(247, 243, 234, .12); }

.btn-sm { padding: .62rem 1.25rem; font-size: .82rem; }
.btn-lg { padding: 1.05rem 2.1rem; font-size: .98rem; }
.btn-block { width: 100%; }


/* ---------- Announcement bar ---------- */
:root { --bar-h: 0px; }
html:not(.announce-off) { --bar-h: 44px; }

.announce-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 65;
  height: var(--bar-h);
  overflow: hidden;
  background: var(--olive-deep);
  color: var(--cream);
  transition: height .3s var(--ease), transform .4s var(--ease);
}
.announce-bar.is-hidden { transform: translateY(-100%); }
html.announce-off .announce-bar { display: none; }
.announce-inner {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 2.25rem;
}
.announce-inner p {
  margin: 0;
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(247, 243, 234, .92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announce-inner a { color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }
.announce-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(247, 243, 234, .75);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.announce-close:hover { background: rgba(247, 243, 234, .14); color: var(--cream); }

@media (max-width: 640px) {
  html:not(.announce-off) { --bar-h: 40px; }
  .announce-inner p { font-size: .68rem; }
  .announce-inner a { display: none; }
}

/* ---------- Header ---------- */
.main-header {
  position: fixed;
  inset: 0 0 auto 0;
  top: var(--bar-h);
  z-index: 60;
  transition: top .3s var(--ease);
  padding: 1.15rem 0;
  transition: padding .35s var(--ease), background .35s var(--ease),
              box-shadow .35s var(--ease), transform .45s var(--ease),
              border-color .35s var(--ease);
  background: rgba(247, 243, 234, .92);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid var(--line-soft);
}
.main-header.scrolled {
  padding: .6rem 0;
  box-shadow: 0 10px 30px -26px rgba(44, 50, 39, .5);
}
.main-header.header-hidden { transform: translateY(-104%); }

.header-container {
  width: min(var(--maxw), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  text-decoration: none;
}
.logo-img { height: 92px; width: auto; transition: height .35s var(--ease); }
.main-header.scrolled .logo-img { height: 70px; }
.logo-firm {
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--olive);
  line-height: 1;
  padding-left: .14em;
  transition: font-size .35s var(--ease);
}
.main-header.scrolled .logo-firm { font-size: .76rem; }

.desktop-nav ul { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.3rem); }
.desktop-nav a {
  position: relative;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: .35rem 0;
  transition: color .25s var(--ease);
}
.desktop-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.desktop-nav a:hover { color: var(--olive-deep); }
.desktop-nav a:hover::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: 1rem; }

.mobile-nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.mobile-nav-toggle span {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.mobile-nav-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.mobile-nav-toggle span:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
.mobile-nav-toggle.open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-nav-toggle.open span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Mobile overlay */
.mobile-overlay-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem 3rem;
  background: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.mobile-overlay-nav.open { opacity: 1; visibility: visible; }
.mobile-nav { text-align: center; width: 100%; max-width: 420px; }
.mobile-nav ul { display: grid; gap: .35rem; margin-bottom: 2.25rem; }
.mobile-nav-link {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: .25rem 0;
  transition: color .25s var(--ease);
}
.mobile-nav-link:hover { color: var(--olive); }
.mobile-book-btn { width: 100%; }
.mobile-nav-note {
  margin-top: 1.75rem;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

/* ---------- Hero ---------- */
.hero-section {
  position: relative;
  padding-top: calc(clamp(9.75rem, 15vw, 11.5rem) + var(--bar-h));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.eyebrow {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.6rem;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.1rem, 7.2vw, 6rem);
  line-height: .96;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 1.6rem;
}

.hero-lede {
  max-width: 33rem;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.9rem; }

.hero-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .55rem;
  font-size: .8rem;
  letter-spacing: .05em;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.hero-note .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(151, 166, 129, .18);
}
.hero-note .sep { opacity: .5; }

.hero-visual { position: relative; }

.hero-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 260px 260px 24px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--cream-deep);
}
.hero-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) sepia(.1);
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
}
.hero-figure:hover img { transform: scale(1.05); }
.hero-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 243, 234, .05) 40%, rgba(52, 65, 43, .18));
  pointer-events: none;
}

.hero-scroll-hint {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.hero-scroll-hint span {
  position: relative;
  width: 1px; height: 58px;
  background: linear-gradient(180deg, transparent, var(--line));
  overflow: hidden;
}
.hero-scroll-hint span::after {
  content: '';
  position: absolute;
  left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--olive);
  animation: scrollHint 2.6s var(--ease) infinite;
}
@keyframes scrollHint {
  0%   { top: -50%; opacity: 0; }
  30%  { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

/* ---------- Welcome note ---------- */
.welcome-section {
  padding: clamp(4.5rem, 9vw, 8rem) 0;
  background: var(--cream-deep);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.welcome-inner {
  max-width: 880px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.welcome-mark {
  font-family: var(--serif);
  font-size: clamp(6rem, 12vw, 9rem);
  line-height: .6;
  color: var(--sage);
  opacity: .45;
  margin: 1rem 0 0;
}
.welcome-copy { max-width: 660px; }
.welcome-copy p { margin-bottom: 1.2rem; }
.welcome-lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 1.6rem !important;
}

.concern-row {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
.concern-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.concern-chip {
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.concern-chip:hover {
  border-color: var(--olive);
  background: var(--olive);
  color: var(--cream);
  transform: translateY(-2px);
}

/* ---------- Philosophy / Atelier ---------- */
.atelier-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.atelier-visual { position: relative; }
.atelier-img-main {
  aspect-ratio: 4 / 5;
  border-radius: 24px 180px 24px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.atelier-img-main img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.03) sepia(.08); }

.atelier-content p { margin-bottom: 1.15rem; max-width: 34rem; }
.atelier-content .section-title { margin-bottom: 1.6rem; }

.atelier-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.atelier-values li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink-soft);
}
.atelier-values span {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--sage);
}

/* ---------- Meet Aarthi ---------- */
.aarthi-section { background: var(--paper); border-top: 1px solid var(--line-soft); }

.aarthi-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.aarthi-visual { position: relative; max-width: 460px; }
.aarthi-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  z-index: 1;
}
.aarthi-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); }
.aarthi-visual::before {
  content: '';
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--sage);
  border-radius: 22px;
  z-index: 0;
}
.aarthi-lead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.38rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--olive);
  margin-bottom: 1.5rem !important;
  max-width: 34rem;
}

.aarthi-content p { margin-bottom: 1.15rem; max-width: 36rem; }
.aarthi-content .section-title { margin-bottom: 1.65rem; }

.aarthi-creds {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.9rem 0 1.6rem;
}
.cred-chip {
  padding: .5rem .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--olive);
}

.about-langs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.langs-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: .35rem;
}
.lang-tag {
  padding: .38rem .8rem;
  border-radius: 999px;
  background: var(--cream-deep);
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---------- Quote band ---------- */
.quote-band {
  position: relative;
  padding: clamp(6rem, 13vw, 11rem) 0;
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
}
.quote-bg { position: absolute; inset: 0; z-index: -1; }
.quote-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(.95) sepia(.12); }
.quote-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(30, 38, 25, .92) 0%, rgba(44, 56, 36, .82) 45%, rgba(52, 65, 43, .64) 100%);
}
.quote-inner { max-width: 900px; text-align: center; }
.quote-text {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.28;
  font-weight: 400;
  color: var(--cream);
}
.quote-text .serif-italic { color: var(--sage-soft); }

/* ---------- How it works ---------- */
.how-section { background: var(--paper); }
.how-head {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.how-intro .section-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 1.3rem; }

.elephant-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 570px;
  justify-self: end;
}
.elephant-media {
  border-radius: 24px;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: inset 0 0 0 1px rgba(60, 70, 50, .06);
}
.elephant-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.elephant-caption {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
  color: var(--ink-faint);
  padding: .75rem 0 .35rem;
}

.how-steps { display: flex; align-items: stretch; gap: 1.25rem; }
.how-step {
  flex: 1 1 0;
  padding: 2rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.how-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--line); }
.how-num {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--sage);
  letter-spacing: .08em;
  margin-bottom: 1.1rem;
}
.how-step h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: .75rem;
  color: var(--ink);
}
.how-step p { font-size: .92rem; line-height: 1.7; }
.how-step p:last-child { margin-bottom: 0; }
.how-connector {
  flex: 0 0 34px;
  align-self: center;
  height: 1px;
  background: var(--line);
  position: relative;
}
.how-connector::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage);
  transform: translateY(-50%);
}

.how-reassure {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.6rem 2rem;
  border-left: 2px solid var(--sage);
  background: var(--cream-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.how-reassure p { margin: 0; font-size: .96rem; }
.how-reassure strong { color: var(--ink); }

/* ---------- Breathing ---------- */
.breathing-section {
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  background: var(--olive-deep);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.breathing-section::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 50vw; height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(151,166,129,.22), transparent 68%);
  pointer-events: none;
}
.breathing-wrapper {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  position: relative;
}
.breathing-copy h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.08;
  margin-bottom: 1.4rem;
  color: var(--cream);
}
.breathing-copy h2 .serif-italic { color: var(--sage-soft); }
.breathing-copy p { color: rgba(247, 243, 234, .76); max-width: 30rem; margin-bottom: 2rem; }

.breathing-controls { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }
.breathing-timer {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage-soft);
}

.breathing-stage { display: flex; justify-content: center; }
.breathing-circle-outer {
  position: relative;
  width: clamp(240px, 30vw, 320px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.breathing-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 210, 185, .3);
}
.breathing-ring::after {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px dashed rgba(201, 210, 185, .18);
}
.breathing-circle-inner {
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(201,210,185,.92), rgba(151,166,129,.55));
  box-shadow: 0 0 60px rgba(201, 210, 185, .28);
  transition: transform 1.2s var(--ease);
  display: grid;
  place-items: center;
}
.breathing-text {
  position: absolute;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--olive-deep);
  z-index: 2;
  pointer-events: none;
}

/* ---------- Services ---------- */
.services-section { background: var(--cream); }

.services-list { border-top: 1px solid var(--line); }
.service-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.service-row:hover .service-main h3 { color: var(--olive); }
.service-row:hover .service-index { color: var(--olive); }
.service-index {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--sage);
  padding-top: .2rem;
}
.service-main h3 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: .65rem;
  color: var(--ink);
}
.service-main p { font-size: .94rem; line-height: 1.72; max-width: 52rem; }
.service-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem 0;
}
.service-pill {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.workwith { margin-top: clamp(3rem, 6vw, 4.5rem); }
.workwith-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
  color: var(--ink);
}
.workwith-cloud { display: flex; flex-wrap: wrap; gap: .55rem; }
.workwith-cloud .focus-chip {
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.workwith-cloud .focus-chip:hover,
.workwith-cloud .focus-chip:focus-visible {
  border-color: var(--olive);
  background: var(--olive);
  color: var(--cream);
  transform: translateY(-1px);
}

/* ---------- Planner ---------- */
.planner-section { background: var(--cream-deep); }

.planner-container {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: stretch;
}
.planner-steps-col {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.planner-step h3 {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
}
.step-chip {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--cream);
  font-family: var(--serif);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0;
}

.toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.toggle-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.toggle-btn .icon { display: flex; color: var(--sage); line-height: 1; }
.toggle-btn .icon svg { width: 18px; height: 18px; }
.toggle-btn .label { font-size: .92rem; font-weight: 800; color: var(--ink); }
.toggle-btn .subtext { font-size: .72rem; color: var(--ink-faint); font-weight: 600; }
.toggle-btn:hover { border-color: var(--sage); }
.toggle-btn.active { border-color: var(--olive); background: var(--olive); }
.toggle-btn.active .icon,
.toggle-btn.active .label { color: var(--cream); }
.toggle-btn.active .subtext { color: rgba(247, 243, 234, .7); }

.form-control {
  width: 100%;
  padding: .95rem 2.6rem .95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6350' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}
.form-control:focus { border-color: var(--olive); outline: none; }

.planner-cta-note { font-size: .88rem; margin-bottom: 1.2rem; max-width: 26rem; }
.planner-step-cta { margin-top: auto; }
.planner-step-cta .btn { width: 100%; }

.planner-result-panel {
  background: var(--olive-deep);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.planner-result-panel::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(151,166,129,.2), transparent 70%);
}
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(247, 243, 234, .16);
  position: relative;
}
.result-header h4 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
}
.badge {
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(201, 210, 185, .16);
  border: 1px solid rgba(201, 210, 185, .3);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage-soft);
  white-space: nowrap;
}

.result-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(247, 243, 234, .16);
  position: relative;
}
.result-metric { display: flex; flex-direction: column; gap: .3rem; }
.metric-title {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, .55);
}
.metric-value { font-size: .92rem; font-weight: 700; color: var(--cream); }

.result-details { padding-top: 1.4rem; position: relative; }
.result-details h5 {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, .55);
  margin-bottom: .8rem;
}
.result-details ul { display: grid; gap: .7rem; }
.result-details li {
  position: relative;
  padding-left: 1.3rem;
  font-size: .86rem;
  line-height: 1.6;
  color: rgba(247, 243, 234, .82);
}
.result-details li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}
.result-footnote {
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: .76rem;
  line-height: 1.6;
  color: rgba(247, 243, 234, .55);
  position: relative;
}

/* ---------- FAQ ---------- */
.faq-section { background: var(--cream); }
.faq-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.faq-intro .section-title { font-size: clamp(1.95rem, 3.4vw, 2.85rem); margin-bottom: 1.4rem; }
.faq-intro p { max-width: 24rem; }

.faq-accordion-wrapper { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.45rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
  font-weight: 600;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.faq-trigger:hover { color: var(--olive); }
.faq-icon-plus {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.faq-icon-plus::before,
.faq-icon-plus::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--olive);
  transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.faq-icon-plus::before { width: 9px; height: 1.4px; }
.faq-icon-plus::after { width: 1.4px; height: 9px; }
.faq-item.open .faq-icon-plus { background: var(--olive); border-color: var(--olive); transform: rotate(180deg); }
.faq-item.open .faq-icon-plus::before,
.faq-item.open .faq-icon-plus::after { background: var(--cream); }
.faq-item.open .faq-icon-plus::after { opacity: 0; }

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.faq-content p {
  padding-bottom: 1.5rem;
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  max-width: 40rem;
}

/* ---------- Contact ---------- */
.contact-section { background: var(--cream-deep); }

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--olive-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.contact-info-panel { padding: clamp(2rem, 4.5vw, 3.5rem); color: var(--cream); min-width: 0; overflow-wrap: anywhere; }
.contact-info-panel h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.06;
  margin-bottom: 1.3rem;
  color: var(--cream);
}
.contact-info-panel h2 .serif-italic { color: var(--sage-soft); }
.contact-info-panel > p { color: rgba(247, 243, 234, .74); font-size: .94rem; max-width: 30rem; margin-bottom: 2rem; }

.contact-details-list { display: grid; gap: .75rem; margin-bottom: 2rem; }
.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.1rem;
  border: 1px solid rgba(247, 243, 234, .16);
  border-radius: 14px;
  text-decoration: none;
  color: var(--cream);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.contact-detail-item:hover { border-color: rgba(201, 210, 185, .55); background: rgba(247, 243, 234, .05); }
.contact-detail-item .icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(201, 210, 185, .14);
  color: var(--sage-soft);
}
.contact-detail-item strong {
  display: block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, .55);
  margin-bottom: .1rem;
}
.contact-detail-item span span { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }

.social-connect h5 {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, .55);
  margin-bottom: .8rem;
}
.social-links-row { display: flex; gap: .6rem; }
.social-links-row a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(247, 243, 234, .2);
  color: var(--cream);
  transition: all .25s var(--ease);
}
.social-links-row a:hover { background: var(--cream); color: var(--olive-deep); border-color: var(--cream); }

.contact-form-panel {
  background: var(--paper);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  display: flex;
  align-items: center;
}
#contact-form { display: flex; flex-direction: column; gap: 1.15rem; width: 100%; }
.form-group-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .45rem; }
.form-group label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label-soft { text-transform: none; letter-spacing: .02em; font-weight: 600; color: var(--ink-faint); }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .92rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.form-group select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6350' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-faint); opacity: .75; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--olive); background: #fff; outline: none; }

.form-status-message { display: none; margin-top: .5rem; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.form-status-message.success { color: var(--olive); }

/* ---------- Crisis ---------- */
.crisis-banner-section {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  background: var(--cream-deep);
  border-top: 1px solid var(--line-soft);
}
.crisis-container {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
}
.crisis-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(180, 113, 79, .12);
  color: var(--terracotta);
  font-size: 1.1rem;
}
.crisis-content { font-size: .9rem; line-height: 1.7; color: var(--ink-soft); }
.crisis-content strong { color: var(--ink); }
.crisis-content a { color: var(--terracotta); }

/* ---------- Footer ---------- */
.main-footer {
  background: var(--olive-deep);
  color: var(--cream);
  padding-top: clamp(4rem, 8vw, 6rem);
}
.footer-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid rgba(247, 243, 234, .14);
}
.footer-big-line {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  color: var(--cream);
}
.footer-big-line .serif-italic { color: var(--sage-soft); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .7fr 1.1fr;
  gap: 2.5rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.footer-logo-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  margin-bottom: 1rem;
}
.footer-logo { height: 104px; width: auto; filter: brightness(0) invert(1) opacity(.92); }
.footer-firm {
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, .9);
  line-height: 1;
}
.footer-desc { font-size: .88rem; color: rgba(247, 243, 234, .62); }
.footer-links h4,
.footer-contact h4 {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, .5);
  margin-bottom: 1.1rem;
}
.footer-links ul { display: grid; gap: .55rem; }
.footer-links a,
.footer-contact a,
.footer-contact p {
  font-size: .9rem;
  color: rgba(247, 243, 234, .78);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .25s var(--ease);
}
.footer-contact p { margin-bottom: .55rem; }
.footer-links a:hover,
.footer-contact a:hover { color: var(--cream); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid rgba(247, 243, 234, .14);
}
.footer-bottom p { font-size: .76rem; color: rgba(247, 243, 234, .45); margin: 0; }

/* ---------- Booking modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(38, 47, 31, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .3s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  width: min(980px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
  animation: modalRise .4s var(--ease);
}
@keyframes modalRise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal-close-btn {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 5;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.modal-close-btn:hover { background: var(--olive); color: var(--cream); border-color: var(--olive); }

.modal-grid { display: grid; grid-template-columns: 1fr 1fr; }

.modal-info-col { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.modal-service-badge {
  display: inline-block;
  padding: .32rem .8rem;
  border-radius: 999px;
  background: var(--cream-deep);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1rem;
}
.modal-info-col h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1.4rem;
  color: var(--ink);
}
.modal-details-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--cream-deep);
  border-radius: 14px;
  margin-bottom: 1.6rem;
}
.meta-item { display: flex; flex-direction: column; gap: .25rem; }
.meta-label {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.meta-value { font-size: .86rem; font-weight: 700; color: var(--ink); }

.modal-text-content h4 {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .55rem;
}
.modal-text-content p { font-size: .9rem; line-height: 1.7; margin-bottom: 1.4rem; }
.clinical-notes-title { margin-top: .5rem; }
#modal-service-points { display: grid; gap: .6rem; }
#modal-service-points li {
  position: relative;
  padding-left: 1.25rem;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
#modal-service-points li::before {
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage);
}

.modal-checker-col {
  background: var(--cream-deep);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
}
.book-panel { display: flex; flex-direction: column; width: 100%; }
.book-panel-emblem { width: 64px; margin-bottom: 1.2rem; }
.book-panel-emblem img { width: 100%; height: auto; }
.book-panel h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: .55rem;
  color: var(--ink);
}
.book-panel-lede { font-size: .88rem; line-height: 1.65; margin-bottom: 1.4rem; }

.book-panel-facts { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.book-panel-facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .8rem;
  color: var(--ink-faint);
}
.book-panel-facts li strong { color: var(--ink); font-weight: 700; text-align: right; }

.book-panel-cta { margin-bottom: .6rem; }
.book-panel .btn-block { margin-bottom: .6rem; }
.book-panel-note {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ---------- Reveal animations ---------- */
.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal-item.revealed { opacity: 1; transform: none; }

/* ---------- Elephant illustration animations ---------- */
.cloud-layer-1 { animation: cloudDrift 42s linear infinite; }
.cloud-layer-2 { animation: cloudDrift 58s linear infinite reverse; }
@keyframes cloudDrift {
  from { transform: translateX(-80px); }
  to   { transform: translateX(560px); }
}

.wind-path {
  stroke-dasharray: 46 240;
  animation: windFlow 9s linear infinite;
}
.wind-2 { animation-duration: 11s; animation-delay: -2s; }
.wind-3 { animation-duration: 13s; animation-delay: -4s; }
@keyframes windFlow {
  from { stroke-dashoffset: 286; }
  to   { stroke-dashoffset: 0; }
}

.breeze-leaf { transform-box: fill-box; transform-origin: center; }
.leaf-a { animation: leafFloat 7s ease-in-out infinite; }
.leaf-b { animation: leafFloat 9s ease-in-out infinite -2s; }
.leaf-c { animation: leafFloat 8s ease-in-out infinite -4s; }
@keyframes leafFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .55; }
  50%      { transform: translate(16px, -10px) rotate(24deg); opacity: .85; }
}

.elephant-ear { transform-box: fill-box; }
.ear-left  { transform-origin: right center; animation: earFlapLeft 3.4s ease-in-out infinite; }
.ear-right { transform-origin: left center;  animation: earFlapRight 3.4s ease-in-out infinite; }
@keyframes earFlapLeft {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(13deg); }
}
@keyframes earFlapRight {
  0%, 100% { transform: rotate(8deg); }
  50%      { transform: rotate(-13deg); }
}

.elephant-tail { transform-box: fill-box; transform-origin: top center; animation: tailSway 4s ease-in-out infinite; }
@keyframes tailSway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(6deg); }
}

.grass-cluster { transform-box: fill-box; transform-origin: bottom center; animation: grassSway 4.5s ease-in-out infinite; }
.grass-cluster-mid { animation-delay: -1.2s; }
.grass-cluster-right { animation-delay: -2.4s; }
@keyframes grassSway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2.5deg); }
}



/* ---------- Booking / contact (merged) ---------- */
.booking-section { background: var(--cream-deep); }

.booking-tabs {
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.booking-tab {
  padding: .62rem 1.3rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.booking-tab:hover { color: var(--olive); }
.booking-tab.is-active { background: var(--olive); color: var(--cream); }
.booking-panel { margin: 0; }

@media (max-width: 640px) {
  .booking-tabs { display: flex; width: 100%; }
  .booking-tab { flex: 1 1 0; padding: .7rem .8rem; font-size: .76rem; }
}


/* ---------- Full-bleed image bands ---------- */
.band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88vh;
  padding: clamp(6rem, 10vw, 9rem) 0;
  background-image: var(--band-image);
  background-size: cover;
  background-position: var(--band-pos, center);
  background-repeat: no-repeat;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  background-attachment: fixed;
}

/* iOS/WebKit ignores background-attachment: fixed -> JS pinned layer takes over */
html.is-ios .band {
  background-attachment: scroll;
  background-image: none;
}
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(26, 34, 21, .93) 0%, rgba(32, 41, 26, .74) 44%, rgba(38, 47, 31, .3) 100%);
}
.band--right::before {
  background: linear-gradient(265deg, rgba(26, 34, 21, .93) 0%, rgba(32, 41, 26, .74) 44%, rgba(38, 47, 31, .3) 100%);
}
.band-inner { position: relative; width: 100%; }
.band-copy { max-width: 620px; }
.band--right .band-copy { margin-left: auto; }

/* light variant (illustration video) */
.band--light { color: var(--ink); }
.band--light::before {
  background: linear-gradient(95deg, rgba(247, 243, 234, .93) 0%, rgba(247, 243, 234, .62) 46%, rgba(247, 243, 234, .16) 100%);
}
.band-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* typography inside dark bands */
.band .section-title,
.band .hero-title { color: var(--cream); }
.band .serif-italic { color: var(--sage-soft); }
.band .section-label { color: var(--sage-soft); }
.band p,
.band .hero-lede { color: rgba(247, 243, 234, .86); }
.band .eyebrow { color: var(--sage-soft); }
.band .hero-note { color: rgba(247, 243, 234, .72); }

.band--light .section-title { color: var(--ink); }
.band--light .serif-italic { color: var(--olive); }
.band--light .section-label { color: var(--olive); }
.band--light p { color: var(--ink-soft); }

/* dark-band component overrides */
.band .atelier-values { border-top-color: rgba(247, 243, 234, .25); }
.band .atelier-values li { color: rgba(247, 243, 234, .82); }
.band .atelier-values span { color: var(--sage-soft); }
.band .cred-chip { background: rgba(247, 243, 234, .12); border-color: rgba(247, 243, 234, .26); color: var(--cream); }
.band .about-langs { border-top-color: rgba(247, 243, 234, .22); }
.band .langs-label { color: rgba(247, 243, 234, .6); }
.band .lang-tag { background: rgba(247, 243, 234, .14); color: var(--cream); }

/* steps sitting on the video band */
.band--light .band-copy { max-width: 780px; }
.band--light .how-step {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(60, 70, 50, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.band--light .how-reassure {
  background: rgba(255, 255, 255, .74);
  border-left-color: var(--olive);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* hero band */
.band--hero { min-height: 100vh; min-height: 100svh; min-height: 100dvh; padding-top: calc(clamp(9rem, 14vw, 11.5rem) + var(--bar-h)); }
.band--hero .hero-title { font-size: clamp(3rem, 7vw, 5.6rem); margin-bottom: 1.5rem; }
.band--hero .hero-actions { margin-top: 2rem; }
.band-scroll {
  position: absolute;
  left: 50%;
  bottom: 2.25rem;
  transform: translateX(-50%);
  display: flex;
}
.band-scroll span {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(247, 243, 234, .55));
}
.band-scroll span::after {
  content: '';
  position: absolute;
  left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--cream);
  animation: scrollHint 2.6s var(--ease) infinite;
}

@media (max-width: 900px) {
  .band {
    min-height: auto;
    padding: clamp(4.5rem, 11vw, 6rem) 0;
  }
  .band--hero { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }
  .band { background-attachment: fixed; }
  html.is-ios .band { background-attachment: scroll; }
  .band-copy { max-width: none; }
  .band::before { background: linear-gradient(180deg, rgba(26, 34, 21, .92) 0%, rgba(32, 41, 26, .78) 100%); }
  .band--light::before { background: linear-gradient(180deg, rgba(247, 243, 234, .93) 0%, rgba(247, 243, 234, .6) 100%); }
  .band-scroll { display: none; }
}


/* ---------- Band refinements: mobile art direction, glass, dark sections ---------- */
.band--quote .quote-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.band--quote { min-height: 70vh; }

/* glass panel over the illustration video */
.glass-panel {
  max-width: 760px;
  padding: clamp(1.6rem, 3vw, 2.5rem) clamp(1.6rem, 3vw, 2.75rem);
  border-radius: 26px;
  background: rgba(255, 255, 255, .32);
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 30px 70px -45px rgba(30, 38, 25, .55);
}
.glass-panel .section-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 0; }

.band--video { min-height: 80vh; }
.band--video .band-video { object-position: center 62%; }
.band--video::before {
  background: linear-gradient(120deg, rgba(247, 243, 234, .88) 0%, rgba(247, 243, 234, .48) 42%, rgba(247, 243, 234, 0) 72%);
}

.how-section { background: var(--cream); }
.how-steps-wrap { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); }

/* reviews sitting on imagery */
.band--reviews .review-card p { color: var(--ink-soft); }
.band--reviews .review-quote { color: var(--ink); }
.band--reviews .review-author span:first-child { color: var(--olive); }
.band--reviews .review-name { color: var(--ink-faint); }
.band--reviews .review-tag { background: var(--cream-deep); color: var(--olive); }
.band--reviews .reviews-summary { color: rgba(247, 243, 234, .74); }
.band--reviews .reviews-summary .review-stars { color: var(--sage-soft); }
.band--reviews .reviews-arrow { border-color: rgba(247, 243, 234, .35); color: var(--cream); }
.band--reviews .reviews-arrow:hover { background: var(--cream); color: var(--olive-deep); border-color: var(--cream); }
.band--reviews .reviews-arrow:disabled { border-color: rgba(247, 243, 234, .15); color: rgba(247, 243, 234, .3); }
.band--reviews .reviews-count { color: rgba(247, 243, 234, .72); }
.band--reviews .reviews-dot { background: rgba(247, 243, 234, .3); }
.band--reviews .reviews-dot.is-active { background: var(--cream); }

@media (max-width: 900px) {
  .band {
    background-image: var(--band-image-mobile, var(--band-image));
    background-position: center;
  }
  .band--video .band-video { object-position: center 55%; }
  .band--video::before {
    background: linear-gradient(180deg, rgba(247, 243, 234, .9) 0%, rgba(247, 243, 234, .35) 55%, rgba(247, 243, 234, 0) 85%);
  }
  .glass-panel { max-width: none; }
  .band--quote { min-height: auto; }
}


/* Pinned background layer (JS driven, works on iOS where background-attachment: fixed does not) */
.band-pin {
  display: none;
}
html.is-ios .band-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -2;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ---------- Reviews ---------- */
.reviews-section { background: var(--cream); }

.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.reviews-heading .section-title { margin-bottom: 0; }

.reviews-nav { display: flex; align-items: center; gap: .7rem; }
.reviews-arrow {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.reviews-arrow:hover { background: var(--olive); border-color: var(--olive); color: var(--cream); }
.reviews-arrow:disabled { opacity: .3; cursor: default; background: transparent; color: var(--ink-soft); border-color: var(--line); }
.reviews-count {
  display: inline-flex; gap: .3rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em;
  color: var(--ink-faint);
}

.reviews-track {
  display: flex;
  gap: clamp(.85rem, 1.6vw, 1.35rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: .35rem;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 2px solid var(--olive); outline-offset: 6px; }

.review-card {
  flex: 0 0 clamp(260px, 62%, 700px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 260px;
  padding: clamp(1.6rem, 3.2vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.review-mark {
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: .55;
  color: var(--sage);
  opacity: .5;
}
.review-source {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.review-source svg { color: var(--sage); }
.review-quote {
  flex: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.review-footer {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin: 0;
}
.review-stars {
  color: var(--terracotta);
  font-size: .92rem;
  letter-spacing: .14em;
  line-height: 1;
}
.review-name {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.review-tag {
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--olive);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reviews-summary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.reviews-summary .review-stars { font-size: .8rem; }

.reviews-dots { display: flex; gap: .45rem; margin-top: 1.1rem; }
.reviews-dot {
  width: 8px; height: 8px;
  padding: 0; border: 0; border-radius: 999px;
  background: var(--line); cursor: pointer;
  transition: width .25s var(--ease), background .25s var(--ease);
}
.reviews-dot.is-active { width: 24px; background: var(--olive); }

/* ---------- Gallery ---------- */
.gallery-section { background: var(--paper); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.15rem);
}
.gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  height: clamp(220px, 28vw, 400px);
  background: var(--cream-deep);
  cursor: zoom-in;
}
.gallery-item.wide { grid-column: span 7; }
.gallery-item.tall { grid-column: span 5; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,47,31,0) 52%, rgba(38,47,31,.72));
  pointer-events: none;
}
.gallery-item figcaption {
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: .95rem;
  z-index: 2;
  color: var(--cream);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
}
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(30, 38, 25, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .25s var(--ease);
}
.lightbox img {
  max-width: min(1200px, 94vw);
  max-height: 86vh;
  width: auto; height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.lightbox-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(247,243,234,.35);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(247,243,234,.15); }
.lightbox-caption {
  position: absolute;
  left: 0; right: 0; bottom: 1.25rem;
  text-align: center;
  color: rgba(247,243,234,.8);
  font-size: .8rem;
  padding: 0 1.5rem;
}

/* ---------- Blog ---------- */
.blog-section { background: var(--cream-deep); }
.blog-empty {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  max-width: 780px;
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.blog-empty-mark {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--sage);
  flex: none;
}
.blog-empty-copy h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: .55rem;
}
.blog-empty-copy p { font-size: .95rem; line-height: 1.7; margin-bottom: 1rem; max-width: 34rem; }

/* ---------- Responsive ---------- */

/* Small laptops */
@media (max-width: 1200px) {
  .hero-grid { gap: clamp(2rem, 4vw, 3.25rem); }
  .atelier-grid, .aarthi-grid, .faq-grid { gap: clamp(2rem, 4.5vw, 4rem); }
}

/* Tablets (landscape) and below */
@media (max-width: 1024px) {
  .hero-section { padding-top: clamp(9.5rem, 16vw, 11rem); }
  .hero-grid { grid-template-columns: 1fr; gap: clamp(2.25rem, 5vw, 3.25rem); }
  .hero-visual { max-width: 540px; }
  .hero-figure { aspect-ratio: 4 / 4.6; }
  .hero-section { min-height: auto; }
  .hero-scroll-hint { display: none; }

  .breathing-wrapper { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(2.5rem, 6vw, 3.5rem); }
  .breathing-copy { display: flex; flex-direction: column; align-items: center; }
  .breathing-copy p { text-align: center; }
  .breathing-controls { justify-content: center; }

  .planner-container { grid-template-columns: 1fr; }
  .contact-container { grid-template-columns: 1fr; }
  .modal-grid { grid-template-columns: 1fr; }
}

/* Tablets (portrait) and below */
@media (max-width: 900px) {
  .atelier-grid, .aarthi-grid, .faq-grid { grid-template-columns: 1fr; gap: clamp(2.25rem, 5vw, 3rem); }
  .atelier-visual { max-width: 560px; width: 100%; }
  .atelier-img-main { border-radius: 22px 120px 22px 22px; }
  .aarthi-visual { max-width: 460px; width: 100%; }

  .how-head { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 2.75rem); }
  .elephant-card { justify-self: start; max-width: 480px; width: 100%; order: 2; }
  .how-steps { flex-direction: column; gap: 1rem; }
  .how-step { padding: 1.75rem 1.5rem; }
  .how-connector { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Nav switch + denser spacing */
@media (max-width: 820px) {
  .desktop-nav { display: none; }
  .mobile-nav-toggle { display: block; }
  .header-book-btn { display: none; }
  .eyebrow { display: none; }

  .main-header { padding: .9rem 0; }
  .logo-img { height: 78px; }
  .main-header.scrolled .logo-img { height: 62px; }
  .logo-firm { font-size: .76rem; letter-spacing: .26em; }
  .main-header.scrolled .logo-firm { font-size: .7rem; }

  .service-row { grid-template-columns: 64px 1fr; gap: .5rem 1.25rem; }
  .service-row:hover { padding-left: 0; }
  .service-meta {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: .5rem;
  }

  .section-header { margin-bottom: 2.5rem; }
}

/* Phones */
@media (max-width: 640px) {
  .container { width: calc(100% - 2.25rem); }
  .section-padding { padding: clamp(3.25rem, 10vw, 4.5rem) 0; }

  .hero-section { padding-top: clamp(8.5rem, 26vw, 9.5rem); padding-bottom: 2.5rem; }
  .hero-title { font-size: clamp(2.55rem, 11.6vw, 3.3rem); line-height: 1.02; }
  .hero-lede { font-size: 1rem; margin-bottom: 1.9rem; }
  .hero-actions { gap: .7rem; margin-bottom: 1.6rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-note .dot, .hero-note .sep { display: none; }
  .hero-note { gap: .2rem .5rem; font-size: .74rem; }
  .hero-visual { max-width: none; }
  .hero-figure { aspect-ratio: 4 / 4.9; border-radius: 190px 190px 20px 20px; }

  .main-header { padding: .7rem 0; }
  .logo-img { height: 68px; }
  .main-header.scrolled .logo-img { height: 56px; }
  .logo-firm { font-size: .62rem; letter-spacing: .22em; }

  .welcome-section { padding: 3.5rem 0; }
  .welcome-mark { font-size: 4.5rem; margin-top: .25rem; }
  .welcome-lead { font-size: 1.22rem; }

  .atelier-img-main { border-radius: 18px; }
  .aarthi-visual::before { inset: 1rem -1rem -1rem 1rem; }

  .how-step { padding: 1.5rem 1.25rem; }
  .how-step h3 { font-size: 1.35rem; }
  .how-reassure { padding: 1.35rem 1.35rem; }

  .breathing-circle-outer { width: min(280px, 78vw); }
  .breathing-text { font-size: 1.25rem; }

  .quote-band { padding: 4.5rem 0; }
  .quote-text { font-size: clamp(1.5rem, 6vw, 2rem); }

  .service-row { grid-template-columns: 1fr; gap: .3rem; padding: 1.55rem 0; }
  .service-index { display: none; }
  .service-meta { grid-column: auto; flex-direction: row; justify-content: space-between; padding-top: .85rem; }
  .service-main h3 { font-size: 1.4rem; }
  .service-main p { font-size: .92rem; }

  .planner-steps-col, .planner-result-panel { padding: 1.5rem; border-radius: 24px; }
  .result-header h4 { font-size: 1.2rem; }

  .form-group-row { grid-template-columns: 1fr; }
  .toggle-group { grid-template-columns: 1fr; }
  .result-metric-row { grid-template-columns: 1fr; gap: .85rem; }

  .contact-info-panel, .contact-form-panel { padding: 1.6rem; }
  .contact-info-panel h2 { font-size: 1.9rem; }

  .crisis-container { flex-direction: column; gap: 1rem; padding: 1.4rem 1.35rem; }

  .footer-cta-row { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: .35rem; }
  .footer-logo { height: 82px; }
  .footer-firm { font-size: .72rem; letter-spacing: .24em; }

  .modal-card { border-radius: 22px; max-height: 92vh; }
  .modal-info-col, .modal-checker-col { padding: 1.4rem; }
  .modal-details-meta { grid-template-columns: 1fr; }

  .concern-chip { padding: .7rem 1.05rem; font-size: .8rem; }
  .faq-trigger { padding: 1.2rem 0; font-size: 1.05rem; }
  .btn { min-height: 44px; }
  .mobile-nav-link { font-size: 1.75rem; }
}

/* Small phones */
@media (max-width: 380px) {
  .container { width: calc(100% - 1.75rem); }
  .hero-title { font-size: 2.4rem; }
  .hero-figure { border-radius: 160px 160px 18px 18px; }
  .logo-img { height: 62px; }
  .logo-firm { font-size: .58rem; }
}

/* Touch devices: no sticky hover states */
@media (hover: none) {
  .btn:hover, .how-step:hover, .concern-chip:hover,
  .service-row:hover, .workwith-cloud .focus-chip:hover { transform: none; }
  .btn-primary:hover { box-shadow: 0 12px 26px -18px rgba(52, 65, 43, .9); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal-item { opacity: 1; transform: none; }
}

/* ---------- Responsive: reviews / gallery / blog ---------- */
@media (max-width: 1240px) {
  .desktop-nav ul { gap: .85rem; }
  .desktop-nav a { font-size: .68rem; letter-spacing: .09em; }
  .header-cta .btn-sm { padding: .55rem 1rem; font-size: .74rem; }
}

/* Switch to the menu earlier so 7 items never crowd the logo */
@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .mobile-nav-toggle { display: block; }
  .eyebrow { display: none; }
}

@media (max-width: 900px) {
  .gallery-item.wide, .gallery-item.tall { grid-column: span 6; }
  .gallery-item { height: clamp(200px, 34vw, 320px); }
  .review-card { flex: 0 0 78%; }
}

@media (max-width: 640px) {
  .reviews-head { align-items: flex-start; gap: 1.25rem; }
  .reviews-nav { width: 100%; justify-content: space-between; }
  .reviews-arrow { width: 44px; height: 44px; }
  .review-card { flex: 0 0 88%; min-height: 0; padding: 1.4rem; }
  .review-quote { font-size: 1.15rem; }

  .gallery-grid { gap: .7rem; }
  .gallery-item.wide, .gallery-item.tall { grid-column: span 12; }
  .gallery-item { height: 250px; border-radius: 16px; }
  .gallery-item figcaption { font-size: .72rem; left: .9rem; right: .9rem; bottom: .8rem; }

  .blog-empty { flex-direction: column; gap: .85rem; padding: 1.4rem; }
}

/* ---------- White content sheets (reference-inspired) ---------- */
.sheet {
  background: #fff;
  border-radius: 8px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow: 0 40px 80px -55px rgba(20, 27, 16, .7);
}
.sheet .section-label { color: var(--olive); }
.sheet .section-label::before { background: var(--olive); }
.sheet .section-title { color: var(--ink); }
.sheet .serif-italic { color: var(--olive); }
.sheet p { color: var(--ink-soft); }
.sheet .atelier-values { border-top-color: var(--line); }
.sheet .atelier-values li { color: var(--ink-soft); }
.sheet .atelier-values span { color: var(--sage); }
.sheet .cred-chip { background: var(--cream); border-color: var(--line); color: var(--olive); }
.sheet .about-langs { border-top-color: var(--line); }
.sheet .langs-label { color: var(--ink-faint); }
.sheet .lang-tag { background: var(--cream-deep); color: var(--ink-soft); }
.sheet .faq-intro p { color: var(--ink-soft); }
.sheet .faq-intro .inline-link { color: var(--olive); box-shadow: inset 0 -1px 0 rgba(74, 90, 60, .45); }
.sheet .faq-accordion-wrapper { border-top-color: var(--line); }
.sheet .faq-item { border-bottom-color: var(--line); }
.sheet .faq-trigger { color: var(--ink); }
.sheet .faq-trigger:hover { color: var(--olive); }
.sheet .faq-icon-plus { border-color: var(--line); }
.sheet .faq-icon-plus::before,
.sheet .faq-icon-plus::after { background: var(--olive); }
.sheet .faq-item.open .faq-icon-plus { background: var(--olive); border-color: var(--olive); }
.sheet .faq-item.open .faq-icon-plus::before,
.sheet .faq-item.open .faq-icon-plus::after { background: var(--cream); }
.sheet .faq-content p { color: var(--ink-soft); }

/* give the sheets a little breathing room on the band */
.band .sheet { margin-block: 0; }

@media (max-width: 900px) {
  .sheet { padding: 1.5rem 1.35rem; border-radius: 6px; }
}

/* ---------- Clinical offering: audience cards ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.audience-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.audience-card:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
.audience-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}
.audience-card p { font-size: .92rem; line-height: 1.7; }
.audience-list {
  list-style: none;
  margin: .15rem 0 .9rem;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.audience-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .86rem;
  color: var(--ink-soft);
}
.audience-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage);
}
.audience-card .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 900px) {
  .audience-grid { grid-template-columns: 1fr; }
}

/* ---------- Calm breaks between image bands ---------- */
.band + .band { margin-top: clamp(2.5rem, 6vw, 5rem); }

/* centred copy variant */
.band--middle .band-copy {
  margin-inline: auto;
  max-width: 720px;
  text-align: center;
}
.band--middle .section-label { justify-content: center; }
.band--middle .section-label::before { display: none; }
.band--middle .atelier-values {
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: .85rem 2.5rem;
  max-width: none;
  margin-inline: auto;
}

/* ---------- Mobile smoothness: drop expensive compositing ---------- */
@media (max-width: 900px) {
  .ambient-glow,
  .ambient-grain { display: none; }

  .main-header,
  .main-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(247, 243, 234, .99);
  }
  .glass-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, .92);
  }
  .band--light .how-step { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .95); }
  .band--light .how-reassure { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .93); }
  .lightbox { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .band-pin { backface-visibility: hidden; }
}

/* ---------- Gentle-by-design: smaller panel, top-left, elephant clear ---------- */
.band--video {
  align-items: flex-start;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  min-height: 78vh;
}
.band--video .glass-panel {
  max-width: 520px;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2.2vw, 1.75rem);
}
.band--video .glass-panel .section-label { margin-bottom: .85rem; }
.band--video .glass-panel .section-title {
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.12;
}
.band--video .band-video { object-position: center 68%; }

@media (max-width: 900px) {
  .band--video { padding-top: 3rem; min-height: 70svh; }
  .band--video .glass-panel { max-width: none; }
  .band--video .glass-panel .section-title { font-size: clamp(1.5rem, 5vw, 1.9rem); }
}

/* ---------- Centred philosophy band: symmetric veil, decisive centring ---------- */
.band--middle { display: block; }
.band--middle::before {
  background: radial-gradient(ellipse 78% 72% at 50% 52%,
              rgba(24, 32, 19, .90) 0%,
              rgba(30, 39, 24, .78) 55%,
              rgba(38, 47, 31, .58) 100%);
}
.band--middle .band-inner {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.band--middle .band-copy {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 660px;
  text-align: center;
}
.band--middle .section-title { text-align: center; }
.band--middle .band-copy > p { text-align: center; }

/* ---------- Elephant band: smaller panel, bottom-left ---------- */
.band--video {
  align-items: flex-end;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
  min-height: 76vh;
}
.band--video .glass-panel {
  max-width: 380px;
  padding: .95rem 1.15rem;
  border-radius: 18px;
}
.band--video .glass-panel .section-label {
  font-size: .62rem;
  margin-bottom: .45rem;
}
.band--video .glass-panel .section-label::before { width: 18px; }
.band--video .glass-panel .section-title {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.18;
}
.band--video .band-video { object-position: center 62%; }

@media (max-width: 900px) {
  .band--middle .band-copy { max-width: none; }
  .band--video {
    align-items: flex-end;
    min-height: 72svh;
    padding-top: 2rem;
    padding-bottom: 1.25rem;
  }
  .band--video .band-video { object-position: 43% 56%; }
  .band--video .glass-panel { max-width: 232px; padding: .7rem .85rem; }
  .band--video .glass-panel .section-title { font-size: .92rem; line-height: 1.2; }
  .band--video .glass-panel .section-label { font-size: .52rem; letter-spacing: .16em; }
}

/* centred philosophy: the paragraph boxes themselves must be centred, not just their text */
.band--middle .band-copy p,
.band--middle .atelier-content p {
  margin-left: auto;
  margin-right: auto;
  max-width: 580px;
  text-align: center;
}

/* ==========================================================================
   v9 — ENQUIRY FLOW · ANIMATED IMAGERY · RICHER PALETTE · MOBILE PASS
   Added: olive + blue + brick + brown + plum palette, WhatsApp-first enquiry
   wizard, scroll-driven image motion, and a full mobile layout audit.
   ========================================================================== */

/* ---------- 1. Palette refresh (no pure white, deeper paper, new accents) ---------- */
:root {
  --cream:        #F4EFE3;
  --paper:        #FAF6EB;
  --sheet:        #FBF7EE;
  --cream-deep:   #E8E0CD;
  --cream-warm:   #EFE7D5;

  --ink:          #2A3028;
  --ink-soft:     #525C4A;
  --ink-faint:    #7D8472;

  --olive:        #4A5A3C;
  --olive-deep:   #333F2A;
  --olive-dark:   #212A1B;
  --sage:         #97A681;
  --sage-soft:    #C9D2B9;
  --terracotta:   #B4714F;

  /* new accents that sit beside olive */
  --blue:         #3E5C72;
  --blue-deep:    #2A4152;
  --blue-soft:    #A8C0CF;
  --brick:        #A5473A;
  --brick-deep:   #7C3329;
  --brick-soft:   #CE8B79;
  --brown:        #7A5A42;
  --brown-deep:   #553E2C;
  --brown-soft:   #C3A78D;
  --plum:         #6A4A69;
  --plum-deep:    #4D344D;
  --plum-soft:    #BEA2BD;

  --line:         rgba(52, 59, 44, .18);
  --line-soft:    rgba(52, 59, 44, .1);
  --white:        #FCFAF3;
}

/* Soft, tinted surfaces instead of stark white */
.sheet {
  background: var(--sheet);
  border: 1px solid rgba(52, 59, 44, .07);
}
.glass-panel {
  background: rgba(251, 247, 238, .9);
  border-color: rgba(251, 247, 238, .5);
}
.band--light .how-step { background: rgba(251, 247, 238, .92); }
.band--light .how-reassure { background: rgba(251, 247, 238, .84); }
.modal-card { background: var(--sheet); }

/* ---------- 2. Accent system ---------- */
.services-section .section-label { color: var(--blue); }
.services-section .section-label::before { background: var(--blue); }
.how-section .section-label { color: var(--brown); }
.how-section .section-label::before { background: var(--brown); }
.gallery-section .section-label { color: var(--brown); }
.gallery-section .section-label::before { background: var(--brown); }
.blog-section .section-label { color: var(--plum); }
.blog-section .section-label::before { background: var(--plum); }
.faq-grid .section-label { color: var(--plum); }
.faq-grid .section-label::before { background: var(--plum); }
.band--reviews .section-label { color: var(--brick-soft); }
.band--faq .section-label { color: var(--plum-soft); }
.enquiry-aside .section-label { color: var(--blue-soft); }

/* alternating accent per offering card */
.audience-card { --accent: var(--olive); position: relative; overflow: hidden; }
.audience-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  opacity: .85;
}
.audience-card:nth-child(6n + 1) { --accent: var(--olive); }
.audience-card:nth-child(6n + 2) { --accent: var(--blue); }
.audience-card:nth-child(6n + 3) { --accent: var(--brick); }
.audience-card:nth-child(6n + 4) { --accent: var(--brown); }
.audience-card:nth-child(6n + 5) { --accent: var(--plum); }
.audience-card:nth-child(6n + 6) { --accent: var(--terracotta); }
.audience-card h3 { color: var(--accent); }
.audience-card:hover { border-color: var(--accent); }

/* chips pick up the same warmth */
.concern-chip:hover,
.focus-chip:hover { border-color: var(--blue); color: var(--blue-deep); background: rgba(62, 92, 114, .08); }
.focus-chip:nth-child(5n + 2):hover { border-color: var(--brick); color: var(--brick-deep); background: rgba(165, 71, 58, .08); }
.focus-chip:nth-child(5n + 3):hover { border-color: var(--brown); color: var(--brown-deep); background: rgba(122, 90, 66, .1); }
.focus-chip:nth-child(5n + 4):hover { border-color: var(--plum); color: var(--plum-deep); background: rgba(106, 74, 105, .08); }

.review-card { border-top: 2px solid var(--brick); }
.review-card:nth-child(3n + 2) { border-top-color: var(--blue); }
.review-card:nth-child(3n + 3) { border-top-color: var(--olive); }
.review-stars { color: var(--brick); }

.faq-icon-plus::before,
.faq-icon-plus::after { background: var(--plum); }
.faq-item.open .faq-icon-plus { background: var(--plum); border-color: var(--plum); }

.section-wash {
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 60%, var(--cream) 100%);
}

/* ---------- 3. Animated imagery ---------- */
.band-drift {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.band .band-inner { z-index: 2; }

.drift-card {
  position: absolute;
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 44px 90px -46px rgba(0, 0, 0, .9);
  isolation: isolate;
}
.drift-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kb-drift 26s ease-in-out infinite alternate;
}
@keyframes kb-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.5%, -2%, 0); }
}

/* A: terracotta pottery — artisans' workshop, left edge */
.band--atelier .drift-card--a {
  width: clamp(130px, 12vw, 205px);
  aspect-ratio: 4 / 5;
  left: clamp(.75rem, 3.5vw, 4.5rem);
  top: 22%;
  rotate: -5deg;
  opacity: .78;
}
/* B: olive branch — right edge, mirrored */
.band--atelier .drift-card--b {
  width: clamp(110px, 9vw, 165px);
  aspect-ratio: 3 / 4;
  right: clamp(.75rem, 3.5vw, 4.5rem);
  bottom: 16%;
  rotate: 6deg;
  opacity: .62;
  border-radius: 999px 999px 22px 22px;
}
/* C: warm interior — reflections, behind the cards */
.band-drift--reviews .drift-card--c {
  width: clamp(150px, 15vw, 260px);
  aspect-ratio: 4 / 5;
  right: clamp(-3rem, -2vw, 1rem);
  top: 10%;
  rotate: 4deg;
  opacity: .34;
  filter: saturate(.85);
}

/* curtain reveal for photography */
.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease), opacity .9s var(--ease);
  opacity: .001;
}
.reveal-img.is-revealed {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* FAQ photograph */
.faq-photo {
  position: relative;
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream-deep);
}
.faq-photo img {
  width: 100%;
  height: clamp(170px, 21vw, 250px);
  object-fit: cover;
  object-position: 28% 55%;
  scale: 1.08;
  will-change: transform;
}
.faq-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1rem .7rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(251, 247, 238, .92);
  background: linear-gradient(0deg, rgba(28, 34, 24, .78), transparent);
}

@media (max-width: 1100px) {
  .band-drift { display: none; }
}

/* ---------- 4. Enquiry section ---------- */
.enquiry-section {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(120% 110% at 6% 0%, rgba(62, 92, 114, .62) 0%, rgba(62, 92, 114, 0) 58%),
    radial-gradient(110% 95% at 100% 100%, rgba(122, 90, 66, .55) 0%, rgba(122, 90, 66, 0) 62%),
    linear-gradient(158deg, #2B3828 0%, #26333A 55%, #33291F 100%);
}
.enquiry-glow {
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 55%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(106, 74, 105, .38), transparent 70%);
  pointer-events: none;
}
.enquiry-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: start;
}
.enquiry-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.9vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--cream);
  margin-bottom: 1.1rem;
}
.enquiry-title .serif-italic { color: var(--blue-soft); }
.enquiry-lede {
  font-size: .96rem;
  line-height: 1.75;
  color: rgba(244, 239, 227, .78);
  margin-bottom: 1.9rem;
  max-width: 30rem;
}

.enquiry-direct { display: grid; gap: .6rem; }
.enquiry-direct-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .78rem .95rem;
  border: 1px solid rgba(244, 239, 227, .18);
  border-radius: 14px;
  background: rgba(244, 239, 227, .045);
  color: var(--cream);
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.enquiry-direct-item:hover {
  background: rgba(244, 239, 227, .1);
  border-color: rgba(244, 239, 227, .38);
  transform: translateX(3px);
}
.enquiry-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--cream);
}
.enquiry-direct-item--wa .enquiry-icon { background: rgba(47, 107, 87, .9); }
.enquiry-direct-item--call .enquiry-icon { background: rgba(165, 71, 58, .88); }
.enquiry-direct-item--mail .enquiry-icon { background: rgba(62, 92, 114, .9); }
.enquiry-direct-copy { display: grid; gap: .05rem; min-width: 0; }
.enquiry-direct-copy strong {
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.enquiry-direct-copy > span {
  font-size: .78rem;
  color: rgba(244, 239, 227, .66);
  overflow-wrap: anywhere;
}
.enquiry-direct-go {
  margin-left: auto;
  font-size: 1rem;
  color: rgba(244, 239, 227, .5);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.enquiry-direct-item:hover .enquiry-direct-go { transform: translateX(3px); color: var(--cream); }

.enquiry-hours {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(244, 239, 227, .58);
}
.enquiry-hours-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px rgba(151, 166, 129, .22);
}

/* the wizard card */
.enquiry-card {
  background: var(--sheet);
  color: var(--ink);
  border-radius: 26px;
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
  box-shadow: 0 50px 110px -60px rgba(0, 0, 0, .95);
  border: 1px solid rgba(251, 247, 238, .6);
}

/* ---------- 5. Wizard internals ---------- */
.enq-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .8rem;
}
.enq-head-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--olive);
}
.enq-head-text {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
}
.enq-head-progress {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
.enq-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(52, 59, 44, .12);
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.enq-track span {
  display: block;
  height: 100%;
  width: 33.333%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--olive), var(--blue));
  transition: width .45s var(--ease);
}

.enq-step-title {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: .35rem;
}
.enq-step-note {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
}

.enq-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.enq-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .72rem .8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.enq-option:hover { border-color: var(--sage); color: var(--ink); }
.enq-option-mark {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.enq-option.is-selected {
  border-color: var(--olive);
  background: rgba(74, 90, 60, .09);
  color: var(--olive-deep);
}
.enq-option.is-selected .enq-option-mark {
  border-color: var(--olive);
  box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 9px var(--olive);
}

.enq-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.enq-field { display: grid; gap: .3rem; }
.enq-field--wide { grid-column: 1 / -1; }
.enq-field-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.enq-field-label em {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  opacity: .8;
}
.enq-field input,
.enq-field textarea {
  width: 100%;
  padding: .72rem .85rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.5;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.enq-field textarea { resize: vertical; min-height: 84px; }
.enq-field input::placeholder,
.enq-field textarea::placeholder { color: var(--ink-faint); opacity: .75; }
.enq-field input:focus,
.enq-field textarea:focus {
  outline: none;
  border-color: var(--olive);
  background: var(--sheet);
  box-shadow: 0 0 0 3px rgba(74, 90, 60, .14);
}
.enq-field.has-error input,
.enq-field.has-error textarea { border-color: var(--brick); }

.enq-error {
  margin: .7rem 0 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--brick);
  min-height: 0;
}

.enq-actions { margin-top: 1.25rem; }
.enq-actions--split {
  display: flex;
  gap: .6rem;
}
.enq-actions--split .btn:first-child { flex: 0 0 auto; }
.enq-actions--split .btn:last-child { flex: 1 1 auto; }
.enq-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }

.enq-summary {
  display: grid;
  gap: .1rem;
  margin-bottom: 1.1rem;
  padding: .9rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 13px;
  background: var(--paper);
}
.enq-summary-row {
  display: flex;
  gap: .75rem;
  padding: .32rem 0;
  font-size: .84rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--line-soft);
}
.enq-summary-row:last-child { border-bottom: 0; }
.enq-summary-row dt {
  flex: 0 0 6.5rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: .18rem;
}
.enq-summary-row dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.enq-summary-k {
  flex: 0 0 6.5rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: .18rem;
}
.enq-summary-v {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.enq-send {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.btn-wa {
  background: #2F6B57;
  border-color: #2F6B57;
  color: var(--cream);
}
.btn-wa:hover { background: #275948; border-color: #275948; color: #fffdf6; }
.btn-call {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--cream);
}
.btn-call:hover { background: var(--brick-deep); border-color: var(--brick-deep); color: #fffdf6; }

.enq-footnote {
  margin-top: .9rem;
  font-size: .76rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.enq-back-link {
  display: inline-block;
  margin-top: 1rem;
  padding: .2rem 0;
  border: 0;
  background: none;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.enq-back-link:hover { color: var(--olive); }

/* modal flavour of the wizard */
.modal-card--enquiry {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(88vh, 780px);
  overflow-y: auto;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border-radius: 24px;
}
.modal-top { margin-bottom: 1.2rem; padding-right: 2.4rem; }
.modal-top .section-label { margin-bottom: .7rem; }
.modal-top h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: .4rem;
}
.modal-top p { font-size: .86rem; line-height: 1.6; color: var(--ink-soft); }
.modal-form-slot .enq-track { margin-top: 0; }

/* ---------- 6. Mobile + tablet pass ---------- */
@media (max-width: 980px) {
  .enquiry-shell { grid-template-columns: 1fr; }
  .enquiry-aside { order: 2; }
  .enquiry-card { order: 1; }
  .enquiry-lede { max-width: none; }
  .enquiry-title { font-size: clamp(1.9rem, 5.4vw, 2.6rem); }

  .band { background-attachment: scroll; }
  .band--hero { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }
}

@media (max-width: 760px) {
  .enq-fields { grid-template-columns: 1fr; }
  .enq-send { grid-template-columns: 1fr; }
  .enq-option { padding: .8rem .85rem; font-size: .85rem; }
  .enquiry-card { border-radius: 20px; }
  .modal-card--enquiry {
    width: 100%;
    max-height: 92svh;
    border-radius: 20px 20px 0 0;
    align-self: flex-end;
  }
  .modal-overlay { align-items: flex-end; padding: 0; }
}

@media (max-width: 560px) {
  .enq-options { grid-template-columns: 1fr; }
  .enquiry-shell { gap: 1.75rem; }
  .enquiry-section { padding: 3rem 0; }
  .enquiry-direct-item { padding: .72rem .8rem; }
  .enq-summary-row { flex-direction: column; gap: .1rem; }
  .enq-summary-row dt,
  .enq-summary-k { flex: none; }
  .faq-photo img { height: 190px; }
  .enq-send .btn,
  .enq-actions .btn { white-space: normal; padding-inline: 1rem; font-size: .92rem; }
}

/* bands: cap the full-viewport heights that feel endless on a phone */
@media (max-width: 900px) {
  .band:not(.band--hero):not(.band--video) {
    min-height: auto;
    padding: clamp(3.25rem, 9vw, 4.5rem) 0;
  }
  .band--hero { min-height: 100vh; min-height: 100svh; min-height: 100dvh; padding-top: calc(clamp(7rem, 22vw, 9rem) + var(--bar-h)); }
  .band--quote { min-height: auto; padding: 3.75rem 0; }
  .band--reviews { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .band--middle .band-copy { padding-inline: .25rem; }
  .sheet { padding: 1.4rem 1.15rem; }

  .faq-grid.sheet { grid-template-columns: 1fr; }
  .reviews-track { gap: .75rem; }
  .review-card { flex: 0 0 86%; }
  .reviews-arrow { width: 42px; height: 42px; }
  .section-title { font-size: clamp(1.9rem, 6.2vw, 2.6rem); }
  .audience-card::before { width: 3px; }
}

/* phones: tighten type, spacing and tap targets */
@media (max-width: 640px) {
  .enquiry-title { font-size: clamp(1.75rem, 7.4vw, 2.2rem); }
  .enq-actions--split { flex-direction: column-reverse; }
  .enq-actions--split .btn { width: 100%; }
  .btn { min-height: 46px; }
  .footer-big-line { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .crisis-container { align-items: flex-start; }
  .welcome-lead { font-size: 1.15rem; }
  .atelier-values { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px) {
  .enq-option { font-size: .8rem; }
  .enq-head-text { font-size: .58rem; letter-spacing: .14em; }
}

/* keep motion accessible */
@media (prefers-reduced-motion: reduce) {
  .drift-card img { animation: none; }
  .reveal-img { clip-path: none; opacity: 1; }
  .enq-track span { transition: none; }
}

/* ==========================================================================
   v10 — TRANSPARENT HEADER OVER THE HERO · ATELIER SPLIT LAYOUT
   At the very top the header dissolves into the welcome photograph: the mark
   sits on the image and each nav word carries its own soft light chip.
   Scrolling past the hero brings back the solid bar.
   ========================================================================== */

/* ---------- Header that becomes part of the hero ---------- */
.logo-img { transition: height .35s var(--ease), filter .35s var(--ease), opacity .35s var(--ease); }
.desktop-nav a {
  transition: color .25s var(--ease), background .3s var(--ease),
              padding .3s var(--ease), box-shadow .3s var(--ease),
              border-radius .3s var(--ease);
}
.announce-bar { transition: height .3s var(--ease), transform .4s var(--ease), background .35s var(--ease); }

/* at the top of the page: no bar, no border — just the photograph */
html.is-at-top .main-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.is-at-top .logo-img {
  filter: brightness(0) invert(1) opacity(.94) drop-shadow(0 2px 10px rgba(12, 18, 10, .5));
}
html.is-at-top .logo-firm { color: var(--cream); }

/* each nav word gets its own light chip, not one long white strip */
html.is-at-top .desktop-nav ul { gap: .4rem; }
html.is-at-top .desktop-nav a {
  color: var(--olive-deep);
  background: rgba(251, 247, 238, .93);
  padding: .46rem .92rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px -10px rgba(12, 18, 10, .75);
}
html.is-at-top .desktop-nav a::after { display: none; }
html.is-at-top .desktop-nav a:hover {
  color: var(--olive);
  background: var(--white);
}

html.is-at-top .header-book-btn {
  background: var(--cream);
  color: var(--olive-deep);
  box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .85);
}
html.is-at-top .header-book-btn:hover {
  background: var(--white);
  color: var(--olive-deep);
}

html.is-at-top .mobile-nav-toggle {
  border-color: rgba(251, 247, 238, .55);
  background: rgba(20, 26, 16, .22);
}
html.is-at-top .mobile-nav-toggle span { background: var(--cream); }

/* the announcement strip also floats over the photograph */
html.is-at-top .announce-bar { background: transparent; }
html.is-at-top .announce-close:hover { background: rgba(251, 247, 238, .18); }

/* …but the menu overlay needs the bar solid again to stay legible */
html.nav-open .main-header {
  background: rgba(247, 243, 234, .97);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -26px rgba(44, 50, 39, .5);
}
html.nav-open .logo-img { filter: none; }
html.nav-open .logo-firm { color: var(--olive); }
html.nav-open .announce-bar { background: var(--olive-deep); }
html.nav-open .mobile-nav-toggle { border-color: var(--line); background: transparent; }
html.nav-open .mobile-nav-toggle span { background: var(--ink); }

/* ---------- Philosophy / atelier: picture left, words right ---------- */
.atelier-section {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  background:
    radial-gradient(85% 70% at 88% 4%, rgba(62, 92, 114, .09), transparent 62%),
    radial-gradient(70% 65% at 2% 98%, rgba(122, 90, 66, .12), transparent 64%),
    var(--cream);
  overflow: hidden;
}
.atelier-section .section-label { color: var(--brown); }
.atelier-section .section-label::before { background: var(--brown); }

.atelier-grid { align-items: center; }

.atelier-img-main {
  box-shadow: 0 40px 80px -46px rgba(30, 36, 24, .72);
}
.atelier-img-main img {
  scale: 1.08;
  transition: scale 1.2s var(--ease);
}
.atelier-img-main:hover img { scale: 1.12; }

/* small circular inset, so the section still carries a living image */
.atelier-img-inset {
  position: absolute;
  left: -1.1rem;
  bottom: 2.2rem;
  width: clamp(92px, 9.5vw, 138px);
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--cream);
  box-shadow: 0 26px 50px -26px rgba(30, 36, 24, .72);
  animation: float-soft 9s ease-in-out infinite alternate;
}
.atelier-img-inset img { width: 100%; height: 100%; object-fit: cover; }
@keyframes float-soft {
  from { transform: translateY(-6px) rotate(-3deg); }
  to   { transform: translateY(8px) rotate(3deg); }
}

.atelier-content { max-width: 40rem; }
.atelier-content .section-title { margin-bottom: 1.5rem; }
.atelier-content p { color: var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  html.is-at-top .desktop-nav ul { gap: .28rem; }
  html.is-at-top .desktop-nav a { padding: .38rem .6rem; }
}

@media (max-width: 900px) {
  .atelier-visual {
    max-width: 560px;
    width: 100%;
    justify-self: center;
  }
  .atelier-img-inset {
    left: auto;
    right: .4rem;
    bottom: -1rem;
  }
  .atelier-content { max-width: none; }
}

@media (max-width: 640px) {
  .atelier-section { padding: 3rem 0; }
  .atelier-img-inset {
    width: 84px;
    right: 0;
    bottom: -1.2rem;
    border-width: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-img-inset { animation: none; }
  .atelier-img-main img { transition: none; }
}

/* ==========================================================================
   v11 — MEDITERRANEAN MINIMALISM
   Whitewashed paper, crisp edges, generous air. Accents are sky blue,
   purple and burgundy; the olive stays as the quiet ground.
   ========================================================================== */

/* ---------- 1. Palette ---------- */
:root {
  --cream:        #FAF6ED;
  --paper:        #FDFBF6;
  --sheet:        #FEFCF8;
  --cream-deep:   #F2EBDD;
  --cream-warm:   #F7F1E5;
  --sand:         #F3E7D9;   /* matches the clay-sketch paper exactly */

  --ink:          #2B2A27;
  --ink-soft:     #58544D;
  --ink-faint:    #8A857B;

  --olive:        #4C5A3F;
  --olive-deep:   #37422D;
  --sage:         #9AA987;
  --sage-soft:    #D2DAC5;

  --sky:          #5D93BC;
  --sky-deep:     #2A6288;
  --sky-soft:     #D5E6F2;

  --purple:       #6B4E80;
  --purple-deep:  #4A3459;
  --purple-soft:  #D8C9E2;

  --burgundy:     #7C2F3A;
  --burgundy-deep:#5A1F27;
  --burgundy-soft:#D5AFB4;

  /* earlier accent names now resolve to the three-colour palette */
  --blue:        var(--sky);
  --blue-deep:   var(--sky-deep);
  --blue-soft:   var(--sky-soft);
  --brick:       var(--burgundy);
  --brick-deep:  var(--burgundy-deep);
  --brick-soft:  var(--burgundy-soft);
  --plum:        var(--purple);
  --plum-deep:   var(--purple-deep);
  --plum-soft:   var(--purple-soft);
  --brown:       #8E7059;
  --brown-deep:  #6B5343;
  --brown-soft:  #DCC8B4;

  --line:        rgba(43, 42, 39, .14);
  --line-soft:   rgba(43, 42, 39, .075);

  --radius:      8px;
  --radius-lg:   12px;
  --shadow-soft: 0 20px 45px -40px rgba(43, 42, 39, .55);
  --shadow-card: 0 14px 30px -28px rgba(43, 42, 39, .6);
}

/* hairline paper surfaces, no heavy shadows */
.main-header { background: rgba(250, 246, 237, .94); }
.audience-card {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  box-shadow: none;
}
.audience-card:hover { box-shadow: none; transform: none; border-color: var(--accent); }
.audience-card::before { width: 2px; }
.audience-card:nth-child(6n + 1) { --accent: var(--olive); }
.audience-card:nth-child(6n + 2) { --accent: var(--sky); }
.audience-card:nth-child(6n + 3) { --accent: var(--purple); }
.audience-card:nth-child(6n + 4) { --accent: var(--burgundy); }
.audience-card:nth-child(6n + 5) { --accent: var(--sky); }
.audience-card:nth-child(6n + 6) { --accent: var(--purple); }

.review-card { border-radius: 2px; background: var(--sheet); }
.sheet { border-radius: 3px; box-shadow: none; }
.section-title { font-weight: 400; letter-spacing: -.008em; }

/* ---------- 2. Philosophy: words left, sketch right ---------- */
.atelier-section {
  background: var(--sand);
  background-image: none;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}
.atelier-grid {
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.atelier-section .section-label { color: var(--burgundy); }
.atelier-section .section-label::before { background: var(--burgundy); }
.atelier-content { max-width: 34rem; }
.atelier-content .section-title { color: var(--ink); }
.atelier-content p { color: var(--ink-soft); }
.atelier-values span { color: var(--burgundy); }
.atelier-values { border-top-color: rgba(43, 42, 39, .16); }

.atelier-sketch { margin: 0; display: flex; justify-content: center; }
.atelier-sketch img {
  width: 100%;
  max-width: 620px;
  height: auto;
  display: block;
}

/* ---------- 3. Meet Aarthi: portrait shown whole, words beside ---------- */
.aarthi-section {
  background: var(--cream-warm);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}
.aarthi-grid {
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.aarthi-visual { max-width: 400px; width: 100%; }
.aarthi-frame {
  aspect-ratio: 3 / 4;          /* full portrait, no tight crop on the face */
  border-radius: 2px;
  box-shadow: var(--shadow-soft);
}
.aarthi-frame img { object-position: center; }
.aarthi-visual::before {
  inset: 1rem -1rem -1rem 1rem;
  border-color: var(--sky);
  border-radius: 2px;
  opacity: .45;
}
.aarthi-lead { color: var(--sky-deep); }
.aarthi-creds { margin-top: 1.6rem; }
.cred-chip { background: transparent; border-color: var(--line); border-radius: 2px; }
.lang-tag { background: transparent; border: 1px solid var(--line); border-radius: 2px; }

/* ---------- 4. Clinical offerings ---------- */
.services-section .section-label { color: var(--burgundy); }
.services-section .section-label::before { background: var(--burgundy); }
.audience-grid { gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.audience-list li::before { background: var(--accent); }

.workwith {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.workwith-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.workwith-cloud .focus-chip { border-radius: 2px; background: transparent; }

/* ---------- 5. Contact: flat Mediterranean blue ---------- */
.enquiry-section {
  background: var(--sky-deep);
  background-image: none;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.enquiry-glow { display: none; }
.enquiry-aside .section-label { color: var(--sky-soft); }
.enquiry-title .serif-italic { color: var(--sky-soft); }
.enquiry-direct-item { border-radius: 2px; }
.enquiry-card {
  background: var(--sheet);
  border-radius: 3px;
  border: 0;
  box-shadow: 0 40px 90px -60px rgba(10, 20, 30, .9);
}
.enq-option { border-radius: 2px; background: transparent; }
.enq-option.is-selected {
  border-color: var(--sky);
  background: rgba(93, 147, 188, .1);
  color: var(--sky-deep);
}
.enq-option.is-selected .enq-option-mark {
  border-color: var(--sky);
  box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 9px var(--sky);
}
.enq-head-dot { background: var(--burgundy); }
.enq-head-text { color: var(--burgundy); }
.enq-track span { background: linear-gradient(90deg, var(--sky), var(--purple)); }
.enq-field input,
.enq-field textarea { border-radius: 2px; background: var(--paper); }
.enq-summary { border-radius: 2px; }
.btn-wa { background: var(--sky); border-color: var(--sky); }
.btn-wa:hover { background: var(--sky-deep); border-color: var(--sky-deep); }
.btn-call { background: var(--burgundy); border-color: var(--burgundy); }
.btn-call:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); }

/* ---------- 6. Gallery: three photographs, one quiet row ---------- */
.gallery-item.wide,
.gallery-item.tall { grid-column: span 4; }
.gallery-item,
.gallery-item.wide,
.gallery-item.tall { border-radius: 2px; }

/* ---------- 7. FAQ: purple panel, no photograph behind ---------- */
.faq-section {
  background: var(--cream);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.faq-section .sheet {
  background: var(--purple-deep);
  border: 0;
  border-radius: 3px;
  box-shadow: none;
}
.faq-section .sheet .section-label { color: var(--purple-soft); }
.faq-section .sheet .section-label::before { background: var(--purple-soft); }
.faq-section .sheet .section-title { color: #FBF7F1; }
.faq-section .sheet .serif-italic { color: var(--purple-soft); }
.faq-section .sheet p { color: rgba(251, 247, 241, .78); }
.faq-section .sheet .inline-link {
  color: #FBF7F1;
  box-shadow: inset 0 -1px 0 rgba(251, 247, 241, .5);
}
.faq-section .sheet .faq-accordion-wrapper { border-top-color: rgba(251, 247, 241, .24); }
.faq-section .sheet .faq-item { border-bottom-color: rgba(251, 247, 241, .18); }
.faq-section .sheet .faq-trigger { color: #FBF7F1; }
.faq-section .sheet .faq-trigger:hover { color: var(--purple-soft); }
.faq-section .sheet .faq-icon-plus { border-color: rgba(251, 247, 241, .45); }
.faq-section .sheet .faq-icon-plus::before,
.faq-section .sheet .faq-icon-plus::after { background: #FBF7F1; }
.faq-section .sheet .faq-item.open .faq-icon-plus { background: #FBF7F1; border-color: #FBF7F1; }
.faq-section .sheet .faq-item.open .faq-icon-plus::before,
.faq-section .sheet .faq-item.open .faq-icon-plus::after { background: var(--purple-deep); }
.faq-section .sheet .faq-content p { color: rgba(251, 247, 241, .8); }

/* ---------- 8. Primary actions and progress in the new palette ---------- */
.btn-primary {
  background: var(--burgundy);
  color: #FBF7F1;
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--burgundy-deep);
  color: #FBF7F1;
  box-shadow: none;
}
.scroll-progress { background: linear-gradient(90deg, var(--sky), var(--burgundy)); }
.modal-card--enquiry { border-radius: 4px; }

/* ---------- 9. Small-screen adjustments ---------- */
@media (max-width: 900px) {
  .atelier-grid,
  .aarthi-grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  .atelier-content,
  .atelier-sketch { max-width: none; }
  .atelier-sketch { justify-content: flex-start; }
  .aarthi-visual { justify-self: center; max-width: 360px; }
  .aarthi-visual::before { inset: .7rem -.7rem -.7rem .7rem; }
  .gallery-item.wide,
  .gallery-item.tall { grid-column: span 6; }
  .faq-section .sheet { padding: 1.5rem 1.35rem; }
}

@media (max-width: 640px) {
  .atelier-section,
  .aarthi-section,
  .faq-section,
  .enquiry-section { padding: 2.75rem 0; }
  .gallery-item.wide,
  .gallery-item.tall { grid-column: span 12; }
  .atelier-sketch img { max-width: 100%; }
  .aarthi-visual { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-sketch img { transition: none; }
}

/* ==========================================================================
   v12 — CLEAN HEADER TYPE, INK HEADINGS, OVAL CHIPS, LIGHT REFLECTIONS
   The header no longer carries chips behind the nav words. Rectangles soften
   into pills. Coloured text gives way to a single ink tone.
   ========================================================================== */

/* ---------- 1. Header over the hero: plain white words, no chips ---------- */
html.is-at-top .desktop-nav ul { gap: clamp(1rem, 2vw, 1.9rem); }
html.is-at-top .desktop-nav a {
  color: var(--cream);
  background: transparent;
  padding: .35rem 0;
  box-shadow: none;
}
html.is-at-top .desktop-nav a::after { display: block; background: currentColor; }
html.is-at-top .desktop-nav a:hover { color: #FFFDF8; background: transparent; }

@media (max-width: 1240px) {
  html.is-at-top .desktop-nav ul { gap: .9rem; }
  html.is-at-top .desktop-nav a { padding: .35rem 0; }
}

/* ---------- 2. One ink tone for headings and labels ---------- */
.serif-italic { color: inherit; }
.band .serif-italic { color: inherit; }
.band--light .serif-italic { color: var(--ink); }

.section-label { color: var(--ink-faint); }
.services-section .section-label,
.gallery-section .section-label,
.blog-section .section-label,
.faq-grid .section-label,
.how-section .section-label,
.atelier-section .section-label,
.reviews-section .section-label { color: var(--ink-faint); }

.services-section .section-label::before,
.gallery-section .section-label::before,
.blog-section .section-label::before,
.faq-grid .section-label::before,
.how-section .section-label::before,
.atelier-section .section-label::before { background: var(--ink-faint); }

.aarthi-lead { color: var(--ink); }
.atelier-values span { color: var(--ink-faint); }

/* ---------- 3. Chips become clean ovals, no fill ---------- */
.cred-chip,
.lang-tag,
.focus-chip,
.concern-chip {
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  box-shadow: none;
}
.cred-chip:hover,
.lang-tag:hover { border-color: var(--ink-faint); color: var(--ink); }

.focus-chip { padding: .62rem 1.2rem; font-size: .84rem; }
.workwith-cloud .focus-chip:hover,
.workwith-cloud .focus-chip:focus-visible,
.focus-chip:hover,
.focus-chip:focus-visible,
.focus-chip:nth-child(5n + 2):hover,
.focus-chip:nth-child(5n + 3):hover,
.focus-chip:nth-child(5n + 4):hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
  transform: none;
}

/* ---------- 4. Softer corners everywhere ---------- */
.review-card,
.review-card:nth-child(3n + 2),
.review-card:nth-child(3n + 3) {
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--sheet);
  box-shadow: none;
}
.sheet { border-radius: 26px; }
.enquiry-card { border-radius: 26px; }
.modal-card--enquiry { border-radius: 22px; }
.gallery-item { border-radius: 16px; }
.enq-option { border-radius: 999px; padding: .8rem 1.15rem; }
.enq-field input { border-radius: 999px; padding-inline: 1.05rem; }
.enq-field textarea { border-radius: 20px; }
.enq-summary { border-radius: 20px; }
.enq-send .btn { border-radius: 999px; }
.enquiry-direct-item { border-radius: 999px; padding: .7rem 1.05rem; }

/* ---------- 5. Clinical offerings: two headings, then focus pills ---------- */
.services-section .section-header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.workwith {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.workwith-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--ink);
  margin-bottom: 1.35rem;
}
.workwith-cloud { gap: .55rem; max-width: 64rem; }

/* ---------- 6. Reflections: beige ground, ink words, no photograph ---------- */
.reviews-section {
  background: var(--cream-warm);
  color: var(--ink);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.reviews-section .section-title { color: var(--ink); }
.reviews-section .reviews-summary { color: var(--ink-faint); }
.reviews-section .review-stars { color: var(--burgundy); }
.reviews-section .reviews-arrow { border-color: var(--line); color: var(--ink-soft); }
.reviews-section .reviews-arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.reviews-section .reviews-arrow:disabled { opacity: .3; border-color: var(--line); color: var(--ink-faint); }
.reviews-section .reviews-count { color: var(--ink-faint); }
.reviews-section .reviews-dot { background: rgba(43, 42, 39, .22); }
.reviews-section .reviews-dot.is-active { background: var(--ink); }
.reviews-section .review-quote { color: var(--ink); }
.reviews-section .review-mark { color: var(--ink-faint); opacity: .35; }
.reviews-section .review-name { color: var(--ink-faint); }
.reviews-section .review-tag { background: var(--cream-deep); color: var(--ink-soft); }
.reviews-section .review-source { color: var(--ink-faint); }

@media (max-width: 900px) {
  .reviews-section { padding: 3rem 0; }
  .services-section .section-header { margin-bottom: 1.75rem; }
}

/* ==========================================================================
   v13 — WHITE GROUND, SKY BLUE, CENTRED OFFERINGS
   The cream is retired for a true white page, which lets the accent blue
   lift into a Mediterranean sky. Purple and burgundy carry the accents.
   ========================================================================== */

:root {
  --cream:      #FFFFFF;
  --paper:      #FBFBF9;
  --sheet:      #FFFFFF;
  --cream-deep: #F2F2EF;
  --cream-warm: #F7F7F4;

  --ink:        #201F1D;
  --ink-soft:   #56544E;
  --ink-faint:  #6E6B64;

  --sky:        #4A9BC9;
  --sky-deep:   #2478A3;
  --sky-soft:   #DCEEF8;

  --green:      #3F6B52;

  --line:       rgba(32, 31, 29, .14);
  --line-soft:  rgba(32, 31, 29, .08);
}

/* ---------- 1. White chrome ---------- */
.main-header { background: rgba(255, 255, 255, .94); }
.band--light::before {
  background: linear-gradient(95deg,
              rgba(255, 255, 255, .93) 0%,
              rgba(255, 255, 255, .6) 46%,
              rgba(255, 255, 255, .14) 100%);
}
.glass-panel { background: rgba(255, 255, 255, .9); }
.enquiry-section { background: var(--sky-deep); }

/* ---------- 2. Philosophy: equal halves, artwork as a mounted sheet ---------- */
.atelier-section { background: var(--cream); }
.atelier-grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.atelier-sketch {
  margin: 0;
  display: block;
  overflow: hidden;
  background: #F2E5D6;
  border: 1px solid rgba(32, 31, 29, .08);
  box-shadow: 0 30px 70px -52px rgba(32, 31, 29, .6);
}
.atelier-sketch img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}

/* ---------- 3. Clinical offerings: centred, no cards ---------- */
.services-section .section-header { text-align: center; }
.services-section .section-title { text-align: center; }
.workwith { text-align: center; }
.workwith-title { text-align: center; margin-inline: auto; }
.workwith-cloud {
  justify-content: center;
  max-width: 62rem;
  margin-inline: auto;
}

/* a chosen focus area turns green */
.focus-chip.is-active,
.focus-chip.is-active:hover,
.focus-chip.is-active:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: #FFFFFF;
}

/* ---------- 4. How it works: no boxes, just numbers and sentences ---------- */
.how-steps { gap: clamp(1.5rem, 3vw, 2.75rem); }
.how-step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1.4rem 0 0;
  box-shadow: none;
  transition: none;
}
.how-step:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
.how-num { color: var(--ink-faint); }
.how-connector { display: none; }
.how-reassure {
  background: transparent;
  border-left: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1.5rem 0 0;
}

/* ---------- 5. Small screens ---------- */
@media (max-width: 900px) {
  .main-header,
  .main-header.scrolled { background: rgba(255, 255, 255, .99); }
  .atelier-grid { grid-template-columns: 1fr; }
  .how-step { padding-top: 1.15rem; }
}

/* ==========================================================================
   v14 — TERRACOTTA · DEEP TEAL · BURGUNDY
   The paper-cut palette: sun-baked terracotta, deep Mediterranean teal and
   burgundy, on a white ground.
   ========================================================================== */

:root {
  --terracotta:      #C0694B;
  --terracotta-deep: #9C5236;
  --terracotta-tint: #FBF2ED;

  --teal:      #1C5560;
  --teal-deep: #123F48;
  --teal-soft: #CFE0E3;

  --burgundy-purple: #5F2B45;
  --purple-deep:     #5F2B45;   /* the FAQ panel becomes burgundy purple */
  --purple-soft:     #E4CFDA;
}

/* ---------- 1. The new wordmark ---------- */
.logo-img { height: 64px; width: auto; }
.main-header.scrolled .logo-img { height: 54px; }
.footer-logo { height: 70px; width: auto; filter: brightness(0) invert(1) opacity(.95); }
.footer-logo-group { gap: 0; }

/* ---------- 2. Warm action colour ---------- */
.btn-primary { background: var(--terracotta); color: #FFFFFF; }
.btn-primary:hover { background: var(--terracotta-deep); color: #FFFFFF; }
.scroll-progress { background: linear-gradient(90deg, var(--terracotta), var(--teal)); }

.section-label::before,
.services-section .section-label::before,
.gallery-section .section-label::before,
.blog-section .section-label::before,
.how-section .section-label::before,
.atelier-section .section-label::before { background: var(--terracotta); }

.how-num { color: var(--terracotta); }

/* ---------- 3. Deep teal grounds ---------- */
.breathing-section { background: var(--teal); }
.main-footer { background: var(--teal-deep); }

/* ---------- 4. Warm wash behind the reflections ---------- */
.reviews-section { background: var(--terracotta-tint); }

/* ---------- 5. The sketch floats: no frame, no seam ---------- */
.atelier-sketch {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

/* ---------- 6. Brand plate in the welcome note ---------- */
.brand-plate {
  width: 100%;
  max-width: 760px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 34px 70px -52px rgba(32, 31, 29, .55);
}
.brand-plate img { width: 100%; height: auto; display: block; }

/* ---------- 7. Header sizes on smaller screens ---------- */
@media (max-width: 820px) {
  .logo-img { height: 52px; }
  .main-header.scrolled .logo-img { height: 46px; }
  .footer-logo { height: 60px; }
}
@media (max-width: 640px) {
  .logo-img { height: 46px; }
  .main-header.scrolled .logo-img { height: 42px; }
}

/* ==========================================================================
   v15 — LOCKUP TYPE, SMALLER SKETCH, TRUE HALVES, NO RULES
   ========================================================================== */

/* ---------- 1. Logo: "The Mind Atelier" beneath the wordmark ---------- */
.logo-group { gap: .4rem; align-items: flex-start; }
.logo-img { height: 58px; width: auto; }
.main-header.scrolled .logo-img { height: 50px; }
.logo-firm {
  font-size: .66rem;
  letter-spacing: .26em;
  font-weight: 800;
  color: var(--olive);
  line-height: 1;
  padding-left: .1em;
}
.main-header.scrolled .logo-firm { font-size: .62rem; }
html.is-at-top .logo-firm { color: var(--cream); }
html.nav-open .logo-firm { color: var(--olive); }

/* ---------- 2. Artisan sketch: a little smaller, picture first on phones ---------- */
.atelier-sketch { max-width: 430px; margin-inline: auto; }

@media (max-width: 900px) {
  .atelier-sketch { order: -1; max-width: 340px; }
  .atelier-content { order: 2; }
}

/* ---------- 3. Meet Aarthi: the portrait owns the left half, uncropped ---------- */
.aarthi-grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.aarthi-visual { max-width: none; width: 100%; }
.aarthi-visual::before { display: none; }
.aarthi-frame {
  aspect-ratio: 3 / 4;     /* the photograph's own ratio — nothing cropped */
  height: auto;
  border-radius: 2px;
  box-shadow: var(--shadow-soft);
}
.aarthi-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.aarthi-content { max-width: none; }

@media (max-width: 900px) {
  .aarthi-visual { max-width: 420px; justify-self: center; }
}

/* ---------- 4. How it works: no rules, just the words ---------- */
.how-step {
  border-top: 0;
  padding-top: 0;
  border-radius: 0;
}
.how-reassure {
  border-top: 0;
  padding-top: 0;
}

/* ---------- 5. Clinical offerings centred ---------- */
.services-section .section-header,
.services-section .section-title,
.workwith,
.workwith-title { text-align: center; }
.workwith-cloud {
  justify-content: center;
  margin-inline: auto;
}

/* ==========================================================================
   v16 — TIGHTER NAV, LIGHTER HERO ACTIONS, TERRACOTTA SELECTION, WARMER PAUSE
   ========================================================================== */

/* ---------- 1. Navigation: smaller, tighter, pushed toward the right ---------- */
.desktop-nav {
  margin-left: auto;
  margin-right: clamp(.75rem, 1.8vw, 1.75rem);
}
.desktop-nav ul { gap: clamp(.7rem, 1.3vw, 1.15rem); }
.desktop-nav a { font-size: .72rem; letter-spacing: .1em; }

html.is-at-top .desktop-nav ul { gap: clamp(.7rem, 1.3vw, 1.15rem); }
html.is-at-top .desktop-nav a { font-size: .72rem; letter-spacing: .1em; }
@media (max-width: 1240px) {
  html.is-at-top .desktop-nav ul { gap: .6rem; }
  .desktop-nav ul { gap: .6rem; }
}

/* ---------- 2. Hero actions: a touch smaller ---------- */
.hero-actions { gap: .7rem; }
.hero-actions .btn {
  padding: .8rem 1.5rem;
  font-size: .88rem;
}
.hero-actions .btn svg { width: 14px; height: 14px; }

/* ---------- 3. Clinical offerings heading actually centred ---------- */
.services-section .section-header {
  margin-inline: auto;
  max-width: 760px;
}

/* ---------- 4. Focus pills: terracotta wash when chosen ---------- */
.focus-chip.is-active,
.focus-chip.is-active:hover,
.focus-chip.is-active:focus-visible {
  background: rgba(192, 105, 75, .14);
  border-color: var(--terracotta);
  color: var(--terracotta-deep);
}

/* ---------- 5. The breathing pause, in warm terracotta ---------- */
.breathing-section { background: #B4553A; }
.breathing-section .label-light { color: rgba(255, 250, 244, .78); }
.breathing-section .btn-ghost-light {
  border-color: rgba(255, 250, 244, .45);
  color: #FFFAF4;
}
.breathing-section .btn-ghost-light:hover { background: rgba(255, 250, 244, .14); }

/* ==========================================================================
   v17 — THE PAUSE, HARMONISED WITH TERRACOTTA
   ========================================================================== */

.breathing-section::before {
  background: radial-gradient(circle, rgba(255, 250, 244, .16), transparent 68%);
}
.breathing-ring { border-color: rgba(255, 250, 244, .34); }
.breathing-ring::after { border-color: rgba(255, 250, 244, .2); }
.breathing-circle-inner {
  background: radial-gradient(circle at 35% 30%, rgba(255, 252, 247, .96), rgba(255, 233, 221, .72));
  box-shadow: 0 0 60px rgba(255, 250, 244, .3);
}
.breathing-copy h2 .serif-italic { color: rgba(255, 250, 244, .84); }
.breathing-timer { color: rgba(255, 250, 244, .8); }
.breathing-text { color: #7A3A26; }

/* ==========================================================================
   v18 — TRUE HALVES, WHATSAPP + EMAIL ONLY, CONTACT CARD ACCENT
   ========================================================================== */

/* ---------- 1. Meet Aarthi: photograph half, words half, photo flush left ---------- */
.aarthi-section {
  padding: 0;
  background: var(--cream-warm);
  border-top: 0;
  border-bottom: 0;
}
.aarthi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  max-width: 1500px;
  margin-inline: auto;
}
.aarthi-frame {
  margin: 0;
  aspect-ratio: 3 / 4;      /* the photograph's own ratio — uncropped */
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: var(--cream-deep);
}
.aarthi-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.aarthi-panel {
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
}
.aarthi-content {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.aarthi-lead { margin-top: .25rem; }

@media (max-width: 900px) {
  .aarthi-split { grid-template-columns: 1fr; }
  .aarthi-panel { padding: 2.5rem 1.35rem 3rem; }
  .aarthi-content { max-width: none; }
}

/* ---------- 2. Contact card: a terracotta edge ties it to the site ---------- */
.enquiry-card {
  border-top: 3px solid var(--terracotta);
}
.enq-head-dot { background: var(--terracotta); }
.enq-head-text { color: var(--terracotta-deep); }

/* ---------- 3. Email as the second way to send ---------- */
.btn-mail {
  background: var(--sky-deep);
  border-color: var(--sky-deep);
  color: #FFFFFF;
}
.btn-mail:hover {
  background: #1B5A7E;
  border-color: #1B5A7E;
  color: #FFFFFF;
}

/* the two direct ways now sit as a pair */
.enquiry-direct-item--wa .enquiry-icon { background: rgba(37, 105, 82, .92); }
.enquiry-direct-item--mail .enquiry-icon { background: rgba(36, 120, 163, .92); }

/* ==========================================================================
   v19 — TIGHTER TYPE, SMALLER PORTRAIT, LESS AIR IN THE PAUSE AND REVIEWS
   ========================================================================== */

/* ---------- 1. Artisan workshop and bio copy: one notch down ---------- */
.atelier-content p { font-size: .9rem; line-height: 1.7; }
.atelier-values li { font-size: .8rem; }

.aarthi-content p { font-size: .9rem; line-height: 1.72; }
.aarthi-lead { font-size: clamp(1.05rem, 1.55vw, 1.2rem); }

/* ---------- 2. Portrait a little smaller; phone shows picture + words together ---------- */
.aarthi-split { grid-template-columns: .78fr 1.22fr; }

@media (max-width: 900px) {
  .aarthi-split { grid-template-columns: 1fr; }
  .aarthi-frame {
    aspect-ratio: auto;
    height: clamp(200px, 33vh, 300px);   /* short band, so the words start on the same screen */
  }
  .aarthi-frame img { object-position: center 24%; }
  .aarthi-panel { padding: 1.75rem 1.25rem 2.5rem; }
}

/* ---------- 3. The breathing pause: far less vertical space ---------- */
.breathing-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.breathing-copy h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); margin-bottom: 1rem; }
.breathing-copy p { font-size: .92rem; margin-bottom: 1.4rem; }
.breathing-circle-outer { width: clamp(180px, 20vw, 235px); }
.breathing-text { font-size: 1.25rem; }
.breathing-wrapper { gap: clamp(1.75rem, 4vw, 3rem); }

/* ---------- 4. Reflections: smaller block, smaller cards ---------- */
.reviews-section { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; }
.reviews-section .section-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.reviews-head { margin-bottom: 1.1rem; }
.reviews-summary { margin-top: .5rem; }

.review-card {
  flex: 0 0 clamp(225px, 42%, 500px);
  min-height: 0;
  padding: clamp(1.05rem, 1.9vw, 1.5rem);
  gap: .75rem;
}
.review-mark { font-size: 2.2rem; }
.review-quote { font-size: clamp(.98rem, 1.4vw, 1.18rem); line-height: 1.5; }
.review-tag { font-size: .58rem; }
.reviews-dots { margin-top: .75rem; }

@media (max-width: 900px) {
  .review-card { flex: 0 0 78%; }
  .reviews-section { padding: 2rem 0; }
}

/* ---------- 5. Contact: the number and the email, clearly highlighted ---------- */
.enquiry-direct-copy strong {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.enquiry-direct-copy > span {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .005em;
  color: #FFFFFF;
}
.enquiry-direct-item:hover .enquiry-direct-copy > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   v20 — QUIETER HERO, SMALLER PORTRAIT, COMPACTER CONTACT
   ========================================================================== */

/* ---------- 1. Hero actions: another step down ---------- */
.hero-actions { gap: .6rem; }
.hero-actions .btn {
  padding: .68rem 1.2rem;
  font-size: .82rem;
}
.hero-actions .btn svg { width: 13px; height: 13px; }

/* ---------- 2. Portrait: about three-quarters of its previous width ---------- */
.aarthi-split { grid-template-columns: .62fr 1.38fr; }

/* ---------- 3. "Not sure what to expect?" smaller ---------- */
.how-reassure p { font-size: .88rem; line-height: 1.65; }

/* ---------- 4. Contact: less type, less bulk ---------- */
.enquiry-section { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
.enquiry-title { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
.enquiry-lede { font-size: .88rem; line-height: 1.7; margin-bottom: 1.5rem; }
.enquiry-direct-copy > span { font-size: .88rem; }
.enquiry-direct-copy strong { font-size: .58rem; letter-spacing: .16em; }
.enquiry-hours { font-size: .7rem; margin-top: 1.15rem; }
.enquiry-direct-item { padding: .62rem .95rem; }
.enquiry-icon { width: 34px; height: 34px; border-radius: 50%; }

.enquiry-card { padding: clamp(1.1rem, 2vw, 1.7rem); }
.enq-head { margin-bottom: .6rem; }
.enq-head-text { font-size: .6rem; letter-spacing: .18em; }
.enq-head-progress { font-size: .62rem; }
.enq-track { margin-bottom: 1.1rem; }
.enq-step-title { font-size: clamp(1.12rem, 1.7vw, 1.38rem); }
.enq-step-note { font-size: .8rem; margin-bottom: .95rem; }
.enq-option { font-size: .8rem; padding: .66rem 1rem; }
.enq-field-label { font-size: .66rem; }
.enq-field input,
.enq-field textarea { font-size: .85rem; padding: .62rem .9rem; }
.enq-actions { margin-top: 1rem; }
.enq-summary-row { font-size: .8rem; }
.enq-footnote { font-size: .7rem; }
.enq-send .btn { font-size: .88rem; }

@media (max-width: 900px) {
  .aarthi-split { grid-template-columns: 1fr; }
  .enquiry-section { padding: 2.25rem 0; }
}

/* ==========================================================================
   v21 — HERO IS ONE LINE; A CLEAR GAP BESIDE THE PORTRAIT
   ========================================================================== */

/* ---------- 1. The welcome, on its own ---------- */
.band--hero .band-copy { padding-block: clamp(.5rem, 2vw, 1.5rem); }
.hero-title { margin-bottom: 0; }
.hero-title .serif-italic { display: inline; }

/* ---------- 2. Portrait left, words right, with breathing room between ---------- */
.aarthi-split {
  column-gap: clamp(1.5rem, 3.2vw, 3.25rem);
}
.aarthi-panel {
  padding-left: clamp(1rem, 2vw, 2.25rem);
}

@media (max-width: 900px) {
  .aarthi-split { column-gap: 0; }
  .aarthi-panel { padding-left: 1.25rem; }
}

/* ==========================================================================
   v22 — SMALLER PORTRAIT · WRITING FILLS THE RIGHT SIDE · SIDE-BY-SIDE ON PHONES
   ========================================================================== */

/* ---------- 1. Portrait smaller, words run from the right column to the edge ---------- */
.aarthi-split {
  grid-template-columns: .55fr 1.45fr;
  column-gap: clamp(1.25rem, 2.4vw, 2.5rem);
}
.aarthi-panel { padding-left: clamp(.75rem, 1.4vw, 1.5rem); }
.aarthi-content {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- 2. Phones: photograph beside the words, both in one screen ---------- */
@media (max-width: 900px) {
  .aarthi-split {
    grid-template-columns: .8fr 1.2fr;
    column-gap: .7rem;
    align-items: start;
  }
  .aarthi-frame {
    aspect-ratio: 3 / 4;
    height: auto;
  }
  .aarthi-frame img { object-position: center; }
  .aarthi-panel {
    align-items: flex-start;
    padding: 1.1rem .85rem 1.5rem .2rem;
  }
  .aarthi-content .section-title {
    font-size: clamp(1.15rem, 4.4vw, 1.5rem);
    margin-bottom: .9rem;
  }
  .aarthi-lead {
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: 1rem !important;
  }
  .aarthi-content p {
    font-size: .78rem;
    line-height: 1.62;
    margin-bottom: .8rem;
  }
  .aarthi-creds { margin: .9rem 0 .75rem; gap: .35rem; }
  .cred-chip { font-size: .6rem; padding: .32rem .6rem; }
  .about-langs { padding-top: .8rem; gap: .35rem; }
  .langs-label { font-size: .55rem; letter-spacing: .12em; }
  .lang-tag { font-size: .6rem; padding: .28rem .55rem; }
}

@media (max-width: 380px) {
  .aarthi-split { grid-template-columns: .78fr 1.22fr; }
  .aarthi-content p { font-size: .74rem; }
}

/* ==========================================================================
   v23 — FIX: the portrait was stretching to the row height, and its aspect
   ratio then computed a width wider than its grid track, spilling over the
   text. The frame now sizes from its column width only.
   ========================================================================== */

.aarthi-split {
  align-items: start;          /* was `stretch` — the cause of the overflow */
}

.aarthi-frame {
  width: 100%;
  height: auto;
  align-self: start;
  min-width: 0;
}

.aarthi-frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.aarthi-panel {
  align-items: flex-start;
  min-width: 0;
}

.aarthi-content {
  max-width: 42rem;
  min-width: 0;
}

@media (max-width: 900px) {
  .aarthi-split { align-items: start; }
  .aarthi-frame { width: 100%; height: auto; }
  .aarthi-content { max-width: none; }
}

/* ==========================================================================
   v24 — TERRACOTTA INVITATIONS, LARGER PORTRAIT, BOLD CREDENTIAL LINE
   ========================================================================== */

/* ---------- 1. A quiet terracotta invitation under the welcome ---------- */
.hero-book {
  display: inline-block;
  margin-top: 1.15rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #E08A6A;
  padding-bottom: .2rem;
  border-bottom: 1px solid rgba(224, 138, 106, .55);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.hero-book:hover {
  color: #F6C6B0;
  border-bottom-color: #F6C6B0;
}

/* ---------- 2. Header "Book a session" in terracotta too ---------- */
html.is-at-top .header-book-btn {
  background: var(--terracotta);
  color: #FFFFFF;
  box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .85);
}
html.is-at-top .header-book-btn:hover {
  background: var(--terracotta-deep);
  color: #FFFFFF;
}

/* ---------- 3. Portrait: stretches down the full column, a little wider ---------- */
.aarthi-split {
  grid-template-columns: .7fr 1.3fr;
  align-items: stretch;      /* the plate runs top-to-bottom beside the words */
}
.aarthi-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;        /* width stays fixed to the column — no overflow */
  min-height: 0;
  align-self: stretch;       /* overrides the earlier align-self: start */
}
.aarthi-frame img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.aarthi-panel {
  position: relative;
  z-index: 2;               /* text always paints above the photograph */
}

/* ---------- 4. The credential line: upright and bold ---------- */
.aarthi-lead {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 900px) {
  .aarthi-split { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .aarthi-frame { height: auto; aspect-ratio: 3 / 4; align-self: start; }
  .aarthi-lead { font-size: .84rem; line-height: 1.45; }
}

/* ==========================================================================
   v25 — DESKTOP: TRUE HALF AND HALF. MOBILE: CENTRED PHOTOGRAPH.
   ========================================================================== */

/* ---------- Desktop: photograph fills the left half, words fill the right ---------- */
.aarthi-split {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.aarthi-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  align-self: stretch;
}
.aarthi-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.aarthi-panel {
  padding: clamp(2.5rem, 4vw, 4.25rem) clamp(1.75rem, 3.5vw, 3.5rem);
}
.aarthi-content {
  max-width: none;        /* no dead space on the right any more */
  margin: 0;
}

/* ---------- Mobile: one column, photograph centred, words beneath ---------- */
@media (max-width: 900px) {
  .aarthi-split {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .aarthi-frame {
    height: auto;
    aspect-ratio: 3 / 4;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    align-self: center;
  }
  .aarthi-frame img { object-position: center 20%; }
  .aarthi-panel {
    padding: 1.75rem 1.25rem 2.5rem;
  }
  .aarthi-content { max-width: none; }
  .aarthi-content .section-label,
  .aarthi-content .section-title { text-align: center; }
  .aarthi-content .section-label { justify-content: center; }
  .aarthi-content .section-label::before { display: none; }
}

/* ==========================================================================
   v26 — CENTRED LABEL ON PHONES · TERRACOTTA FOR EVERY SELECTED OPTION
   ========================================================================== */

/* ---------- 1. Mobile: the whole heading block centred ---------- */
@media (max-width: 900px) {
  .aarthi-content { text-align: center; }
  /* body copy stays left-aligned — centred paragraphs are hard to read */
  .aarthi-content p:not(.aarthi-lead) { text-align: left; }
  .aarthi-creds,
  .about-langs { justify-content: center; }
  .aarthi-content .section-label { justify-content: center; }
}

/* ---------- 2. Terracotta selection, everywhere ---------- */
.focus-chip.is-active,
.focus-chip.is-active:hover,
.focus-chip.is-active:focus-visible,
.concern-chip.is-active,
.concern-chip.is-active:hover,
.concern-chip.is-active:focus-visible,
.enq-option.is-selected,
.enq-option.is-selected:hover,
.enq-option.is-selected:focus-visible {
  background: rgba(192, 105, 75, .14);
  border-color: var(--terracotta);
  color: var(--terracotta-deep);
}

/* instant feedback on press, before the enquiry opens */
.focus-chip:active,
.concern-chip:active {
  background: rgba(192, 105, 75, .22);
  border-color: var(--terracotta);
  color: var(--terracotta-deep);
}

.enq-option.is-selected .enq-option-mark {
  border-color: var(--terracotta);
  box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 9px var(--terracotta);
}

/* ==========================================================================
   v27 — ONE READING SIZE · NATURAL HEADLINE · TERRACOTTA ON HOVER
   ========================================================================== */

/* ---------- 1. Artisan workshop and profile read at the same size ---------- */
.atelier-content p,
.aarthi-content p {
  font-size: 1rem;
  line-height: 1.75;
}
.atelier-values li { font-size: .86rem; }

/* the credential line carries a little more weight of its own */
.aarthi-lead {
  font-size: clamp(1.1rem, 1.65vw, 1.28rem);
  line-height: 1.42;
}

/* ---------- 2. Terracotta on hover, not only after a click ---------- */
.focus-chip:hover,
.focus-chip:focus-visible,
.workwith-cloud .focus-chip:hover,
.workwith-cloud .focus-chip:focus-visible,
.concern-chip:hover,
.concern-chip:focus-visible {
  background: rgba(192, 105, 75, .12);
  border-color: var(--terracotta);
  color: var(--terracotta-deep);
  transform: none;
}

/* a pressed or chosen pill sits a shade deeper */
.focus-chip.is-active:hover,
.concern-chip.is-active:hover {
  background: rgba(192, 105, 75, .2);
}

/* ---------- 3. Mobile heading reads as one sentence ---------- */
@media (max-width: 900px) {
  .aarthi-content .section-title {
    font-size: clamp(1.3rem, 5vw, 1.7rem);
    line-height: 1.15;
    margin-bottom: 1rem;
  }
  .aarthi-content p,
  .atelier-content p { font-size: .95rem; line-height: 1.7; }
}

/* ==========================================================================
   v28 — BODY COPY DOWN ONE MORE STEP IN BOTH EDITORIAL SECTIONS
   ========================================================================== */

.atelier-content p,
.aarthi-content p {
  font-size: .9rem;
  line-height: 1.68;
}

.atelier-values li { font-size: .82rem; }

/* keep the credential line a step above the body copy */
.aarthi-lead {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .atelier-content p,
  .aarthi-content p { font-size: .85rem; line-height: 1.65; }
  .aarthi-lead { font-size: .92rem; }
}

/* ==========================================================================
   v29 — CLEAR WELCOME PHOTOGRAPH · PHOTOGRAPHIC GROUNDS
   Pink tiles behind the breathing pause, the blue door behind the enquiry,
   burgundy tiles behind the FAQ, an olive-branch shadow behind the footer.
   ========================================================================== */

/* ---------- 1. The welcome photograph, left clear ---------- */
.band--hero::before {
  background: linear-gradient(100deg,
              rgba(16, 22, 12, .5) 0%,
              rgba(16, 22, 12, .2) 40%,
              rgba(16, 22, 12, 0) 66%);
}
.band--hero .hero-title,
.band--hero .hero-book {
  text-shadow: 0 2px 26px rgba(0, 0, 0, .5);
}

/* ---------- 2. Take a slow breath — pink tiles ---------- */
.breathing-section {
  background-color: #5E2438;
  background-image:
    linear-gradient(180deg, rgba(74, 26, 44, .9) 0%, rgba(52, 20, 34, .94) 100%),
    url('assets/tiles-pink.jpg');
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
}

/* ---------- 3. Contact — the blue door ---------- */
.enquiry-section {
  background-color: var(--sky-deep);
  background-image:
    linear-gradient(180deg, rgba(14, 56, 82, .88) 0%, rgba(10, 40, 60, .94) 100%),
    url('assets/door-blue.jpg');
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
}

/* ---------- 4. FAQ — burgundy tiles, softly veiled ---------- */
.faq-section {
  background-color: var(--cream);
  background-image:
    linear-gradient(180deg, rgba(251, 247, 238, .6) 0%, rgba(246, 240, 231, .74) 100%),
    url('assets/tiles-burgundy.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* ---------- 5. Footer — olive-branch shadow on the wall ---------- */
.main-footer {
  background-color: var(--teal-deep);
  background-image:
    linear-gradient(180deg, rgba(9, 42, 50, .82) 0%, rgba(8, 34, 42, .9) 52%, rgba(8, 30, 38, .96) 100%),
    url('assets/olive-shadow.jpg');
  background-size: cover, cover;
  background-position: center, center 26%;
  background-repeat: no-repeat, no-repeat;
}

@media (max-width: 900px) {
  .band--hero::before {
    background: linear-gradient(180deg,
                rgba(16, 22, 12, .55) 0%,
                rgba(16, 22, 12, .25) 45%,
                rgba(16, 22, 12, .1) 100%);
  }
  .breathing-section { background-position: center, center 45%; }
  .main-footer { background-position: center, center 18%; }
}

/* ==========================================================================
   v30 — JUSTIFIED PROFILE · PHOTOGRAPHS ALLOWED TO SHOW · NEW HERO & CLIP
   ========================================================================== */

/* ---------- 1. "The person behind Olive." — every line ends on the same edge ---------- */
.aarthi-content p:not(.aarthi-lead) {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-justify: inter-word;
}

@media (max-width: 900px) {
  /* justified text falls apart in a narrow column */
  .aarthi-content p:not(.aarthi-lead) { text-align: left; hyphens: none; }
}

/* ---------- 2. Let the photographs be seen: much lighter veils ---------- */
.breathing-section {
  background-image:
    linear-gradient(180deg, rgba(74, 26, 44, .62) 0%, rgba(52, 20, 34, .74) 100%),
    url('assets/tiles-pink-v2.jpg');
}
.enquiry-section {
  background-image:
    linear-gradient(180deg, rgba(14, 56, 82, .58) 0%, rgba(10, 40, 60, .72) 100%),
    url('assets/door-blue-v2.jpg');
}
.faq-section {
  background-image:
    linear-gradient(180deg, rgba(251, 247, 238, .3) 0%, rgba(246, 240, 231, .46) 100%),
    url('assets/tiles-burgundy-v2.jpg');
}
.main-footer {
  background-image:
    linear-gradient(180deg, rgba(9, 42, 50, .62) 0%, rgba(8, 34, 42, .78) 52%, rgba(8, 30, 38, .9) 100%),
    url('assets/olive-shadow-v2.jpg');
}

/* ---------- 3. Type stays bold enough to read over the pictures ---------- */
.breathing-copy h2,
.breathing-copy p,
.breathing-timer { text-shadow: 0 1px 14px rgba(24, 8, 16, .55); }

.enquiry-title,
.enquiry-lede,
.enquiry-direct-copy,
.enquiry-hours { text-shadow: 0 1px 14px rgba(6, 26, 40, .5); }

.main-footer .footer-big-line,
.main-footer .footer-desc,
.main-footer .footer-links a,
.main-footer .footer-contact p,
.main-footer .footer-bottom p { text-shadow: 0 1px 12px rgba(4, 18, 24, .55); }

/* ---------- 4. The new welcome photograph sits calm and unfiltered ---------- */
.band--hero { background-position: center 42%; }
@media (max-width: 900px) {
  .band--hero { background-position: center 55%; }
}

/* ==========================================================================
   v31 — VIDEO UNCOVERED · PROFILE TYPE CORRECTED · LIGHTER FAQ PANEL
   ========================================================================== */

/* ---------- 1. Profile: upright heading, italic kicker, body font for the lead ---------- */
.aarthi-content p:not(.aarthi-lead) {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* "The person behind Olive." loses its italic half */
.aarthi-content .section-title .serif-italic { font-style: normal; }

/* "Meet Aarthi" becomes the italic element */
.aarthi-content .section-label {
  font-style: italic;
  letter-spacing: .18em;
}

/* the credential line now matches the body copy */
.aarthi-lead {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.68;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-bottom: 1.15rem !important;
  max-width: none;
}

/* ---------- 2. Portrait: framed further to the right ---------- */
.aarthi-frame img { object-position: 68% 22%; }

/* ---------- 3. Elephant video, uncovered and larger ---------- */
.band--light::before { background: none; }
.band--video {
  min-height: 90vh;
  background: transparent;
}
.band--video .band-video { object-position: center 58%; }

@media (max-width: 900px) {
  .band--video { min-height: 78svh; }
  .band--video .band-video { object-position: 50% 56%; }
}

/* ---------- 4. FAQ panel lets the tiles through, words heavier ---------- */
.faq-section .sheet {
  background: rgba(56, 36, 68, .76);
}
.faq-section .sheet .faq-trigger {
  font-weight: 700;
  text-shadow: 0 1px 10px rgba(20, 8, 26, .35);
}
.faq-section .sheet .section-title { font-weight: 600; }
.faq-section .sheet .faq-content p {
  font-weight: 500;
  color: rgba(252, 248, 243, .9);
}
.faq-section .sheet .faq-trigger span:first-child { letter-spacing: .002em; }

/* ---------- 5. No terracotta bar on the crisis note ---------- */
.crisis-container { border-left: 0; }
.crisis-icon { background: transparent; color: var(--ink-soft); }

/* ==========================================================================
   v33 — POLISH PASS
   One rhythm, one radius scale, one type scale, a calmer offerings section.
   ========================================================================== */

/* ---------- 1. A quiet line under "Clinical offerings" ---------- */
.services-lede {
  max-width: 34rem;
  margin: 1.15rem auto 0;
  text-align: center;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------- 2. Offerings in three calm groups ---------- */
.workwith { text-align: center; }
.focus-group { margin-top: clamp(1.6rem, 3vw, 2.35rem); }
.focus-group:first-of-type { margin-top: clamp(1.3rem, 2.4vw, 1.9rem); }
.focus-group-label {
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .85rem;
}
.focus-group-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  max-width: 58rem;
  margin-inline: auto;
}

/* ---------- 3. One radius scale ---------- */
.review-card,
.review-card:nth-child(3n + 2),
.review-card:nth-child(3n + 3) { border-radius: 18px; }

.sheet,
.enquiry-card,
.modal-card--enquiry { border-radius: 20px; }

.gallery-item,
.gallery-item.wide,
.gallery-item.tall { border-radius: 16px; }

/* ---------- 4. One vertical rhythm ---------- */
.welcome-section,
.atelier-section,
.services-section,
.gallery-section,
.faq-section,
.blog-section {
  padding-block: clamp(4rem, 7.5vw, 6.5rem);
}
.atelier-section + .aarthi-section,
.aarthi-section + .services-section {
  border-top: 1px solid var(--line-soft);
}

/* ---------- 5. One type scale for section headings and body copy ---------- */
.section-title,
.services-section .section-title,
.reviews-section .section-title,
.faq-intro .section-title,
.enquiry-title {
  font-size: clamp(1.85rem, 3.3vw, 2.75rem);
  line-height: 1.07;
}

.atelier-content p,
.aarthi-content p,
.how-step p,
.faq-content p {
  font-size: .9rem;
  line-height: 1.7;
}

/* ---------- 6. Selection colour in the site's own palette ---------- */
::selection {
  background: rgba(192, 105, 75, .22);
  color: var(--ink);
}

@media (max-width: 900px) {
  .welcome-section,
  .atelier-section,
  .services-section,
  .gallery-section,
  .faq-section,
  .blog-section { padding-block: 2.75rem; }
  .focus-group-label { margin-bottom: .7rem; }
}

/* ==========================================================================
   v34 — AREAS OF FOCUS BACK TO A SINGLE ROW
   ========================================================================== */

.workwith-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  max-width: 60rem;
  margin-inline: auto;
}

/* ==========================================================================
   v35 — SMALLER NAV TYPE · ANCHORS FOR ABOUT AND HOW IT WORKS
   ========================================================================== */

.desktop-nav a { font-size: .66rem; letter-spacing: .09em; }
html.is-at-top .desktop-nav a { font-size: .66rem; letter-spacing: .09em; }

@media (max-width: 1240px) {
  .desktop-nav a { font-size: .62rem; letter-spacing: .08em; }
  html.is-at-top .desktop-nav a { font-size: .62rem; letter-spacing: .08em; }
}

#how-details { scroll-margin-top: 96px; }

/* ==========================================================================
   v36 — CLOSE THE GAP BETWEEN THE BLOG AND THE CRISIS NOTE
   The blog's bottom padding and the banner's top padding were stacking into
   roughly 10rem of empty cream. Both are cut back.
   ========================================================================== */

.blog-section {
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.crisis-banner-section {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

@media (max-width: 900px) {
  .blog-section { padding-bottom: 1.25rem; }
  .crisis-banner-section { padding-top: 1rem; padding-bottom: 1.5rem; }
}

/* ==========================================================================
   v37 — A SLOWLY BREATHING SKETCH · ANNOUNCEMENT NUDGED RIGHT
   ========================================================================== */

/* the line drawing drifts, very slowly */
.atelier-sketch img {
  animation: sketch-float 16s ease-in-out infinite alternate;
}
@keyframes sketch-float {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}

/* the announcement sits right of centre rather than dead centre */
.announce-inner {
  justify-content: flex-end;
  padding: 0 3.25rem 0 2.25rem;
}
.announce-inner p { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .atelier-sketch img { animation: none; }
}

@media (max-width: 640px) {
  .announce-inner { padding-right: 2.6rem; }
}