/* ==========================================================================
   sahityapooja.com — main stylesheet
   --------------------------------------------------------------------------
   Brand palette
     Deep Plum      #4A4063  — body text, buttons, high-contrast elements
     Muted Lavender #B3A8D9  — decorative shapes, icon fills, borders
     Periwinkle     #9A9AD6  — accents, decorative only (too light for text)
     Blush Pink     #F5C3C4  — soft accent backgrounds
     Lavender Mist  #EBE7F5  — page background
   Typography: Lora (headings) / Manrope (body & UI), self-hosted in /fonts
   --------------------------------------------------------------------------
   CONTENTS
     1.  Fonts
     2.  Design tokens & reset
     3.  Typography & shared elements
     4.  Buttons
     5.  Header & navigation
     6.  Hero
     7.  How it works
     8.  Section scaffolding (eyebrows, headings, cards)
     9.  About + credentials
     10. Therapeutic approach
     11. What I can help with / expertise chips
     12. Offerings
     13. Testimonials
     14. FAQ
     15. Booking (Calendly + WhatsApp + fees)
     16. Corporate page (enquiry form, sectors)
     17. NRI page
     18. Footer
     19. Mobile sticky CTA bar
     20. Utilities, animation, accessibility
   ========================================================================== */

/* ==========================================================================
   1. FONTS (self-hosted, variable weight, font-display: swap)
   ========================================================================== */
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-latin-italic-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
/* latin-ext subset mainly so the rupee sign (₹, U+20B9) renders in Manrope */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. DESIGN TOKENS & RESET
   ========================================================================== */
:root {
  --plum: #4A4063;
  --plum-dark: #3A3350;
  --lavender: #B3A8D9;
  --periwinkle: #9A9AD6;
  --blush: #F5C3C4;
  --mist: #EBE7F5;
  --white: #FFFFFF;

  --text: var(--plum);
  --text-soft: #675D82;          /* 4.5:1+ on mist and white */
  --border-soft: #D9D2EC;

  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 24px rgba(74, 64, 99, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(74, 64, 99, 0.14);

  --container: 1280px;
  --section-pad: clamp(3.5rem, 8vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keeps anchored sections clear of the sticky header */
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--mist);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

/* ==========================================================================
   3. TYPOGRAPHY & SHARED ELEMENTS
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--plum);
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--plum); text-decoration-color: var(--lavender); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--plum); }

ul, ol { padding-left: 1.3em; margin: 0 0 1.1em; }
li { margin-bottom: 0.4em; }

.lede { font-size: 1.15rem; color: var(--text-soft); }
.small { font-size: 0.9rem; }
.muted { color: var(--text-soft); }

::selection { background: var(--lavender); color: var(--plum-dark); }

:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-header :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--plum);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: 0 0 12px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   4. BUTTONS  (pill-shaped per brand guide)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.85em 1.7em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* Primary: Deep Plum fill + white text (AA contrast; the pastel fills fail 4.5:1) */
.btn-primary {
  background-color: var(--plum);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--plum-dark);
  box-shadow: 0 6px 20px rgba(74, 64, 99, 0.3);
}

/* Secondary: outline variant */
.btn-outline {
  background-color: rgba(255, 255, 255, 0.75);
  border-color: var(--plum);
  color: var(--plum);
}
.btn-outline:hover { background-color: #fff; box-shadow: 0 6px 18px rgba(74, 64, 99, 0.16); }

.btn-lg { font-size: 1.08rem; padding: 1em 2em; }

/* On-plum: solid light fill + plum text, for buttons sitting on the dark header */
.btn-on-plum {
  background-color: #fff;
  border-color: #fff;
  color: var(--plum);
}
.btn-on-plum:hover { background-color: var(--mist); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }

/* WhatsApp: outline style with the recognisable green glyph */
.btn-whatsapp .wa-icon { color: #128C50; } /* darkened WhatsApp green, AA on white */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--plum);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); }

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Wordmark — Pooja's name is the identity (no borrowed logo mark) */
.wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  color: #fff;
  text-decoration: none;
  line-height: 1.1;
}
.wordmark small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #C9C0E0;
}

.site-nav { margin-left: auto; }
.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  padding: 0.3em 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--periwinkle); }

.header-cta { flex: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  color: #fff;
}

@media (max-width: 980px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 18px 30px rgba(74, 64, 99, 0.18);
    display: none;
    padding: 1rem 1.5rem 1.4rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .site-nav a { color: var(--plum); display: block; padding: 0.55em 0; font-size: 1.05rem; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--lavender); }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; }
  .header-cta { display: none; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  /* On tablet/desktop the copy is vertically centred in the space below
     the header; the portrait is anchored to the bottom so the curved
     divider cuts cleanly across it (matching the live site), rather than
     the portrait floating with a gap under it. Mobile falls back to plain
     stacked padding, see the media query below. */
  position: relative;
  /* A touch less than the full viewport so the top of the next section
     always peeks in below the fold, a visual cue that there's more to
     scroll. No bottom padding: the portrait runs to the section's edge
     and the wave overlays its lower edge. */
  padding-block: 2rem 0;
  min-height: calc(100vh - 84px - 5rem);
  min-height: calc(100svh - 84px - 5rem);
  display: flex;
  align-items: stretch;
  background: var(--mist);
}

/* Curved divider into the next (white) section — cuts across both the
   background and the portrait at the same clean edge, instead of a flat
   color-change line. Sits above everything else in the hero (z-index),
   full width, anchored to the section's true bottom regardless of how
   tall the row ends up (portrait height, viewport, etc.). */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(40px, 5vw, 68px);
  z-index: 2;
  pointer-events: none;
}

/* Sits inside the normal site container like every other section — the
   portrait is not cropped or bled to the edge, so there's no need for the
   full-bleed grid tricks a contained photo doesn't require. */
.hero-inner {
  display: grid;
  /* Copy takes the remaining space (capped by its own max-width); the
     portrait column sizes to the image so it never overflows into the
     copy on narrower tablet widths. */
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}

.hero-copy { max-width: 580px; align-self: center; }

.hero h1 {
  color: var(--plum-dark);
  font-size: clamp(2.1rem, 3.6vw, 2.75rem);
  margin-bottom: 1.3rem;
}

/* the only paragraph in the hero — now short enough (2 sentences) to just
   flow within the column width and land at 2–3 lines on its own, rather
   than needing a tight character cap to avoid running long */
.hero .lede { margin-bottom: 2rem; }

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.hero-cta .btn { width: 100%; }

/* Portrait: never cropped, and NO drop-shadow. It sits on the section's
   bottom edge (align-self: end) so the wave divider slices across its
   lower edge, the way the live site's hero reads. A shadow here would
   cast onto the white section below the wave as an ugly grey box, so it's
   a clean cutout instead — matching the live site's shadowless portrait. */
.hero-figure {
  margin: 0;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.hero-figure img {
  width: auto;
  height: auto;
  max-width: clamp(300px, 34vw, 500px);
}

@media (min-width: 560px) {
  .hero-cta { flex-direction: row; align-items: center; }
  .hero-cta .btn { width: auto; }
}

/* Mobile: portrait moves to the end (below the proof line) at a reduced
   scale, so the message and CTAs are visible without scrolling past a
   large image. The viewport-centering trick above is desktop/tablet-only
   — stacking text above a full portrait makes "center the whole block"
   unpredictable, so mobile falls back to straightforward top padding. */
@media (max-width: 780px) {
  /* Matches the live site's mobile hero, measured precisely via DOM
     inspection (375px viewport): portrait leads, centered heading/copy
     below — reversed from the desktop/tablet order (text first, small
     shadowed portrait after) on purpose. The live portrait is NOT
     full-bleed and NOT cropped — it's the full uncropped photo shown
     small (~70% of viewport width, centered), which is what keeps the
     heading in the same first screen. This is a mobile-only layout, not
     a smaller version of the desktop one. */
  .hero { min-height: auto; padding-block: 1.5rem 2.5rem; }
  .hero-inner { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .hero-copy { max-width: none; text-align: center; order: 1; }
  .hero-cta { align-items: center; justify-content: center; }
  .hero-figure { order: -1; justify-content: center; align-self: auto; }
  .hero-figure img { width: 70%; max-width: 300px; height: auto; filter: none; }
}

/* ==========================================================================
   7. HOW IT WORKS  (icon-box layout matching the live site: large plum
      icons, centered text, thin dividers between columns instead of
      card chrome — no numbered badges)
   ========================================================================== */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.journey-step { padding: 0 1.5rem; }
.journey-step:not(:first-child) { border-left: 1px solid var(--border-soft); }
.journey-icon {
  display: inline-flex;
  color: var(--plum);
  margin-bottom: 1.2rem;
}
.journey-icon svg { width: 50px; height: auto; fill: currentColor; }
.journey-step h3 { font-size: 1.4rem; margin: 0 0 0.6em; }
.journey-step p { font-size: 1rem; line-height: 1.7; color: var(--text-soft); }

@media (max-width: 780px) {
  .journey-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .journey-step:not(:first-child) { border-left: none; border-top: 1px solid var(--border-soft); padding-top: 2.5rem; }
}

/* ==========================================================================
   8. SECTION SCAFFOLDING
   ========================================================================== */
.section { padding-block: var(--section-pad); }
.section-white { background: var(--white); }
.section-tint { background: linear-gradient(180deg, var(--mist) 0%, #F4F1FA 100%); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.container-narrow { max-width: 820px; }

.eyebrow {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--text-soft);
  margin: 0 0 0.8rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--periwinkle);
  margin-right: 0.6em;
  vertical-align: middle;
}

.section-intro { max-width: 46em; }

.card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.8rem 1.7rem;
}

/* soft call-to-action band used after emotionally resonant sections */
.cta-band {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.8rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.cta-band p { margin: 0; max-width: 32em; }
.cta-band .cta-row { flex: 0 1 auto; min-width: 0; }

/* ==========================================================================
   9. ABOUT + CREDENTIALS
   ========================================================================== */
/* .about-grid / .credentials-stack are also used on the corporate and NRI
   pages (a text column + a credentials sidebar) — kept here for those.
   The home About section below no longer uses this layout; see the
   "Home About section" block further down for its full-width bands. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}

.credentials-stack { display: grid; gap: 1.2rem; }
.credentials-stack .card { padding: 1.4rem 1.5rem; }
.credentials-stack h3 {
  font-size: 0.85rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  margin-bottom: 0.7em;
}
.credentials-stack ul { list-style: none; padding: 0; margin: 0; }
.credentials-stack li {
  padding: 0.32em 0 0.32em 1.4em;
  position: relative;
  font-size: 0.95rem;
  margin: 0;
}
.credentials-stack li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lavender);
}

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

/* ---- Home About section: stacked full-width bands, no sidebar ----
   The cards never share a column with the collapsing text below, so
   there's nothing for the expand/collapse to misalign against. */

/* Intro (left, capped to a comfortable reading width) + pull-quote
   (right) — balances the empty space next to short intro text on
   desktop, rather than the intro stretching the full container width. */
.about-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-intro p { font-size: 1.05rem; }
/* Lead credential line: highlighted with a left accent bar + slight right indent. */
.about-intro .about-lead {
  border-left: 4px solid var(--plum);
  padding-left: 1.25rem;
}

/* Quiet, held-breath statement — Lora, muted, restrained. Italics used
   deliberately here (brand guide: sparingly, pull-quotes only). Stays
   put whether the narrative below is expanded or collapsed. */
.about-pullquote { margin: 0; }
.about-pullquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--lavender);
  opacity: 0.45;
  margin-bottom: 0.05em;
}
.about-pullquote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.3vw, 1.85rem);
  line-height: 1.5;
  color: var(--plum-dark);
  margin: 0;
  max-width: 36ch;
}

/* Below ~1024px the 68ch intro column leaves the quote too little room to
   read well beside it, so drop to one column and let the quote sit full
   width under the intro (flow: lead, intro paras, quote, Read more). */
@media (max-width: 1024px) {
  .about-top-grid { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .about-pullquote { max-width: 46ch; }
  .about-pullquote::before { font-size: 2.75rem; margin-bottom: 0; }
  .about-pullquote p { font-size: 1.3rem; max-width: none; }
}

/* About and Credentials are two separate <section>s (so the collapse in
   About never affects anything else), but read as one continuous unit —
   tighten the seam between them rather than stacking two full section
   gaps back to back. */
.about-section { padding-bottom: 1.5rem; }
/* Muted-lavender field (distinct from the white About/My-approach fade above).
   Flat color, no gradient — a gradient here looked muddy against the
   approach-quote box's own gradient right above it. */
.credentials-section {
  padding-top: 1.5rem;
  background: var(--lavender);
}

/* Credential cards as a horizontal, glanceable band. White cards lift off the
   lavender field with a border + hover treatment matching .approach-technique
   for a consistent card language across the page.
   Mobile-first: cards wrap naturally (1 or 2 per row, whatever fits) —
   grid takes over with exact column counts from tablet width up. */
.about-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.about-cards .card {
  flex: 1 1 220px;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.about-cards .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}
.about-cards h3 {
  font-size: 0.92rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--plum);
  margin-bottom: 0.8em;
}
.about-cards ul { list-style: none; padding: 0; margin: 0; }
.about-cards li {
  padding: 0.32em 0 0.32em 1.3em;
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}
.about-cards li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.9em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--periwinkle);
}

@media (min-width: 561px) {
  .about-cards { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 861px) {
  .about-cards { grid-template-columns: repeat(4, 1fr); }
}

/* Read-more toggle + collapse. This is the last thing in the section —
   nothing sits below it, so its height changing on expand/collapse never
   pushes other content around. The paragraphs are always present in the
   HTML (crawlers/AI engines read the full story); only the visible
   height is toggled, by js/main.js, using a measured max-height so the
   transition is smooth regardless of content length. */
.about-toggle-icon { transition: transform 0.25s ease; }
.about-toggle[aria-expanded="true"] .about-toggle-icon { transform: rotate(180deg); }

.about-collapse {
  max-width: 62ch;
  max-height: 0;
  padding-top: 1.6rem;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .about-collapse { transition: none; }
  .about-toggle-icon { transition: none; }
}

/* ==========================================================================
   10. THERAPEUTIC APPROACH
   ========================================================================== */
/* My approach sits on a Lavender Mist field (distinct from the white About
   above), fading in smoothly from white at the top so there's no hard seam. */
.approach-section {
  background: linear-gradient(180deg, var(--white) 0, var(--mist) 200px);
}

/* Three techniques (not steps) — icon-led cards, softly linked by a dotted
   connector across the gaps on desktop. No numbered badges, so they read as
   approaches drawn on by context rather than a fixed sequence. */
.approach-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.approach-technique {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 1.8rem 1.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.approach-technique:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}
/* dotted connector sitting in the gap, centred on the icon row (desktop only) */
.approach-technique:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(1.8rem + 1.6rem);   /* padding-top + half icon height */
  right: -1.5rem;
  width: 1.5rem;
  border-top: 2px dotted var(--lavender);
}
.approach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem; height: 3.2rem;
  border-radius: 50%;
  background: var(--mist);
  color: var(--plum);
  margin-bottom: 1rem;
}
.approach-icon svg { width: 1.6rem; height: 1.6rem; }
.approach-technique h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.approach-technique p { font-size: 0.96rem; color: var(--text-soft); line-height: 1.7; margin: 0; }
.approach-method {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  background: var(--mist);
  border-radius: var(--radius-pill);
  padding: 0.25em 0.9em;
  margin-bottom: 0.8em;
}

/* Signature feature panel for the Eric Berne quote: deep-plum field (stands out
   against the lavender section) carrying a lavender motif and a blush quotation
   mark. Light text on plum clears AA comfortably. Italics reserved for the quote. */
.approach-quote {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.2rem);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--lavender) 0%, #9E93CB 100%);
  color: var(--plum-dark);
  /* A signature panel needs more lift than a plain content card — flat
     with no shadow read as "thin"/pasted-on against the section. */
  box-shadow: 0 20px 48px rgba(74, 64, 99, 0.28);
}
/* Half lotus mark bleeding off the right edge, covering the panel height.
   translateX(50%) hangs exactly half of it past the edge (clipped by the
   panel's overflow:hidden), regardless of the panel's width. */
.approach-quote-lotus {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  height: 100%;
  width: auto;
  max-width: none;   /* override the global img max-width so height drives size */
  /* Deep-plum watermark: darken the mark to solid, then multiply it into the
     panel's own purple gradient so it reads as a faint embossed tonal motif
     rather than a bright white shape competing with the near-white quote. */
  filter: brightness(0);
  mix-blend-mode: multiply;
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}
/* Centered composition matching the live site precisely (measured via DOM
   inspection): quote + mark + citation all centered, quote set in near-
   white (--mist) upright text (not the italic/dark treatment used
   elsewhere) — the light-on-lavender contrast is what gives this panel its
   presence, not text weight. .approach-quote-note stays left-aligned/dark,
   matching the live site's own asymmetry between quote and note. */
.approach-quote-mark {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 4.5rem;
  line-height: 0.6;
  color: var(--plum-dark);
}
.approach-quote blockquote { position: relative; z-index: 1; margin: 0.5rem 0 0; text-align: center; }
.approach-quote blockquote p {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  /* Tablet/desktop size — this was shrunk to fix mobile line-wrapping (see
     the mobile override below), but the smaller size reads too thin against
     this large panel on wider screens, so it's normalised back up here. */
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.5;
  max-width: 42ch;
  margin: 0 auto;
  color: var(--mist);
}
.approach-quote figcaption {
  margin-top: 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
}
.approach-quote-note {
  position: relative;
  z-index: 1;
  max-width: 62ch;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--plum-dark);
}

@media (max-width: 860px) {
  .approach-flow { grid-template-columns: 1fr; }
  .approach-technique:not(:last-child)::after { display: none; }
  /* Narrower side padding here gives the quote more width to wrap into,
     closer to the live site's line count for the same sentence (was
     wrapping to roughly double the lines at the wider desktop padding). */
  .approach-quote { padding: 2rem 1.5rem; }
  /* Smaller quote text only below this breakpoint — at the tablet/desktop
     size above, this exact sentence wraps to roughly double the line count
     on a narrow phone screen. */
  .approach-quote blockquote p { font-size: clamp(1rem, 1.8vw, 1.25rem); }
  /* The 4.5rem desktop quote mark was sized for the much wider panel there;
     kept at full size on mobile it dwarfed the now-tighter card. */
  .approach-quote-mark { font-size: 2.75rem; }
  /* Split the card into two zones instead of one long purple slab: the note
     (the longest piece of content) drops onto the section's own mist tone
     with normal body padding, instead of sharing the dark purple field and
     tight card padding with the quote above it. Negative margins cancel
     .approach-quote's own padding (2rem 1.5rem, set above) so the mist
     background bleeds to the card's real edges — overflow:hidden on the
     card clips it to the same rounded corners automatically. This is what
     actually shrinks the purple portion of the box and breaks up what was
     reading as one dense slab. */
  /* Compound selector needed here, not just .approach-quote-note — the
     global `p:last-child { margin-bottom: 0; }` reset (this note IS the
     last child of the figure) outranks a single class and was silently
     cancelling the negative bottom margin below. */
  .approach-quote .approach-quote-note {
    background: var(--mist);
    margin: 1.5rem -1.5rem -2rem;
    padding: 1.25rem 1.5rem 2rem;
    /* Body copy in this narrow light band reads better left-aligned; the
       centered treatment is desktop/tablet-only where it sits in the wide
       purple panel below the centered quote. */
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  /* The lotus used to anchor to the whole card's bottom-right corner, which
     after the split above is now the note's mist band, not the purple
     field it was designed to sit on (white art at low opacity would just
     vanish against near-white). No stable anchor point exists for it
     against the new, variable-height two-zone layout, so it's dropped on
     mobile rather than left effectively invisible. Desktop/tablet keep it. */
  .approach-quote-lotus { display: none; }
}

/* ==========================================================================
   11. WHAT I CAN HELP WITH / EXPERTISE CHIPS
   ========================================================================== */
/* Credentials above is flat --lavender with no fade (see its own comment) —
   that leaves a hard seam at THIS section's top, which was never addressed.
   Easing just the first 140px from lavender into this section's own
   mist tint (rather than a full-section gradient, which read muddy when
   tried above Credentials) keeps the fix short and crisp. */
#help { background: linear-gradient(180deg, var(--lavender) 0, var(--mist) 140px, #F4F1FA 100%); }

/* Outcome cards: 4:3 photo, title, muted subline. 7 total, so the last row
   has 3 — flex + justify-content:center (not a rigid grid) centers that
   incomplete row under the one above instead of leaving it flush-left with
   a gap on the right (a plain grid was tried first and rejected for exactly
   this reason — see the equivalent note on the testimonial carousel). Each
   card's flex-basis is a computed quarter/half/full width (not a fixed px
   value) so it shares the row's gap math cleanly at every breakpoint. */
/* Intro deliberately smaller/narrower than the sitewide .section-intro
   default (1.0625rem body size, 46em wide) — at full size it competed with
   the cards below for visual weight; the cards are meant to be the focus. */
#help .section-intro { max-width: 66ch; font-size: 0.98rem; }
.help-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3rem;
}
/* Every card's total height is fixed by construction, not by cross-row
   flex-stretch (align-items:stretch only equalizes within ONE wrapped flex
   line, so it can't make row 2 match row 1 — that needs the row heights to
   already agree). Instead every zone inside a card has a deterministic
   height: image is aspect-ratio-locked to a fixed card width, the title
   and subline both reserve worst-case 2-line space, and the two image→
   title/title→subline gaps are fixed margins. Sum those and every card
   lands on the exact same total height everywhere, in any row. */
.help-card {
  flex: 1 1 calc((100% - 3 * 2.5rem) / 4);
  max-width: calc((100% - 3 * 2.5rem) / 4);
  text-align: center;
  transition: transform 0.25s ease;
}
.help-card:hover { transform: translateY(-3px); }
.help-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease;
}
.help-card:hover img { box-shadow: var(--shadow-card-hover); }
.help-card h3 {
  font-size: 1.1rem;
  font-weight: 600; /* matches the sitewide h1-h4 weight — same weight on all 7, none reads lighter for being shorter */
  line-height: 1.3;
  /* Reserved height for 2 lines (1.1rem × 1.3 × 2) — a 1-line title still
     occupies exactly this much box, so the subline below always starts at
     the same fixed offset from the image regardless of title length (that
     only depends on this box's total height, not on how the text sits
     inside it). Vertically centering the text — rather than the earlier
     top-aligned version — splits the leftover space in a 1-line title
     above AND below the text instead of dumping it all as one big gap
     right before the subline, which read as too loose. */
  min-height: 2.86rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 0;
}
.help-card-sub {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text-soft);
  /* Same reserved-space treatment as the title, sized for 2 lines even
     though none of the current sublines actually wrap at these widths —
     insurance against future copy edits reintroducing the same jitter. */
  min-height: 2.4rem;
  margin: 0.15rem 0 0;
}

@media (max-width: 1023px) {
  .help-card { flex-basis: calc((100% - 2.5rem) / 2); max-width: calc((100% - 2.5rem) / 2); }
}
@media (max-width: 640px) {
  /* Full-width single column, not squeezed to 2-up — a phone-width photo
     card is small enough already without halving it again. */
  .help-card { flex-basis: 100%; max-width: 100%; }
  /* Height-matching only matters when cards sit side by side — stacked
     one-per-row there's no neighbour to line up against, and the reserved
     2-line gap just reads as loose empty space under a short title. Let
     title/subline sit at their natural height here instead. */
  .help-card h3, .help-card-sub { min-height: 0; }
}

/* Areas of expertise — full-width photo band (matches the live site's
   treatment): a B&W blossom-branch photo, tinted plum via a gradient
   overlay, with a centered heading and a white two-column ring-bullet list.
   Image is decorative (empty alt) — the content is fully present as text. */
.expertise-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  color: #FFFFFF;
}
.expertise-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.expertise-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(58, 51, 80, 0.88), rgba(74, 64, 99, 0.8));
  z-index: 1;
}
.expertise-band .container { position: relative; z-index: 2; }
.expertise-heading {
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: #FFFFFF;
  text-align: center;
  margin: 0 0 2.5rem;
}
.expertise-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 3rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}
.expertise-list li {
  position: relative;
  padding-left: 2em;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
}
.expertise-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 1.1em; height: 1.1em;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}
.expertise-list li::after {
  content: "";
  position: absolute;
  left: 0.33em; top: 0.63em;
  width: 0.44em; height: 0.44em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
  .expertise-list { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* ==========================================================================
   12. OFFERINGS
   ========================================================================== */
.offerings-group { margin-top: 2.4rem; }
.offerings-group > h3 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  margin-bottom: 1.1rem;
}
.offerings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
/* White cards need real contrast against the section's own tint (was sitting
   on white before — barely visible). Border + hover lift matches the card
   language established by .approach-technique / .about-cards .card. */
.offering-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.offering-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}
.offering-card .icon {
  width: 3.2rem; height: 3.2rem;
  border-radius: 14px;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--plum);
}
.offering-card p { font-size: 0.98rem; color: var(--text-soft); }
.offering-card h4 { font-size: 1.3rem; }
.offering-card .offering-link { margin-top: auto; padding-top: 0.8rem; font-weight: 700; font-size: 0.95rem; }

.sector-note {
  margin-top: 1.2rem;
  font-size: 0.92rem;
  color: var(--text-soft);
}

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
/* Sliding-window carousel (arrows + dots), matching the live site's card
   slider. All 9 testimonials sit in one flex track; js/main.js translates
   the track and builds the dots. Falls back to a plain wrapping row with
   no JS — see html:not(.js) below. */
.testimonial-carousel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.testimonial-viewport { flex: 1 1 auto; overflow: hidden; min-width: 0; }
.testimonial-track {
  display: flex;
  gap: 1.4rem;
  transition: transform 0.45s ease;
}
.testimonial-track .testimonial { flex: 0 0 calc((100% - 2 * 1.4rem) / 3); min-width: 0; }

.carousel-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-soft);
  color: var(--plum);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.carousel-arrow:hover { background: var(--plum); color: #FFFFFF; border-color: var(--plum); }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 1.6rem;
}
.carousel-dot {
  width: 24px; height: 24px;
  padding: 0;
  border: 8px solid transparent;
  border-radius: 50%;
  background: var(--border-soft);
  background-clip: padding-box;
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
.carousel-dot[aria-current="true"] { background: var(--plum); background-clip: padding-box; width: 38px; border-radius: 12px; }

@media (max-width: 1023px) {
  .testimonial-track .testimonial { flex-basis: calc((100% - 1.4rem) / 2); }
  /* Below 1024px there are only 1-2 cards per view, so arrows sitting
     beside the card as flex siblings eat a disproportionate share of a
     narrow screen's width — confirmed against the live site, whose arrows
     overlap the card instead and cost zero layout width, letting its card
     run close to the full container width. Match that here: arrows float
     over the card's edges instead of squeezing it. top:50% relative to
     the now-relatively-positioned carousel keeps them vertically centered
     on the card regardless of how many lines the quote wraps to. */
  .testimonial-carousel { position: relative; gap: 0; }
  .testimonial-viewport { flex-basis: 100%; }
  /* First attempt inset the arrows 0.5rem onto the card, which meant
     giving the card ~3.25rem of side padding so text could never render
     underneath them — that clawed back most of the width this whole
     change was meant to win. Straddling the edge instead (half the button
     on the card, half hanging off onto the section background) needs far
     less clearance: half of a 2.6rem button is 1.3rem, comfortably inside
     the card's own *unmodified* 1.6rem padding, so no padding override is
     needed at all. Same half-off technique already used for the lotus
     mark on the approach-quote panel. */
  .carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    /* Needs more lift than the desktop border-only treatment — half of
       it sits on top of the white card now, not fully beside it on the
       tinted section background, so it needs a real shadow to read as
       separate from the card underneath. */
    box-shadow: var(--shadow-card-hover);
  }
  .carousel-prev { left: 0; transform: translate(-50%, -50%); }
  .carousel-next { right: 0; transform: translate(50%, -50%); }
}
@media (max-width: 640px) {
  .testimonial-track .testimonial { flex-basis: 100%; }
  .carousel-arrow { width: 2.2rem; height: 2.2rem; }
}

/* No-JS fallback: static wrapping row, no sliding track, controls hidden */
html:not(.js) .testimonial-track { flex-wrap: wrap; transform: none !important; }
html:not(.js) .testimonial-track .testimonial { flex-basis: 300px; }
html:not(.js) .carousel-arrow, html:not(.js) .carousel-dots { display: none; }

.testimonial {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.6rem 1.4rem;
}
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { font-size: 0.95rem; line-height: 1.65; }
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p:last-of-type::after { content: "\201D"; }
.testimonial footer {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.testimonial footer::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blush);
  border: 2px solid var(--lavender);
  flex: none;
}

/* Static masonry wall (used on the corporate and NRI pages, not the home
   carousel). CSS columns with break-inside guarded so cards don't split. */
.testimonial-wall { columns: 2 340px; column-gap: 1.4rem; }
.testimonial-wall .testimonial { break-inside: avoid; margin-bottom: 1.4rem; }

/* ==========================================================================
   14. FAQ
   ========================================================================== */
/* Periwinkle Accent field. Offerings above and Testimonials below both end/
   start on a near-white tint, so a flat periwinkle block hard-cut against
   both edges. Eased 140px in/out of periwinkle at each edge (not a
   full-section gradient — the FAQ cards in the middle still sit on full-
   strength periwinkle for contrast). The small eyebrow/date labels default
   to --text-soft, which is too low-contrast on this mid-tone purple, so
   they're bumped to --plum-dark here; the h2 stays default (large/bold
   text clears AA). */
.faq-section {
  background: linear-gradient(180deg, #F4F1FA 0, var(--periwinkle) 140px, var(--periwinkle) calc(100% - 140px), var(--mist) 100%);
}
.faq-section .eyebrow,
.faq-section .last-updated { color: var(--plum-dark); }
.faq-section .eyebrow::before { background: var(--plum-dark); }
.faq-list { margin-top: 1.8rem; display: grid; gap: 0.9rem; }
.faq-item {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--plum);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding: 0 1.4rem 1.3rem;
  font-size: 0.98rem;
  color: var(--text-soft);
}

.last-updated {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-top: 0.4rem;
}

/* ==========================================================================
   15. BOOKING (Calendly + WhatsApp + fees)
   ========================================================================== */
.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.8rem;
  align-items: start;
  margin-top: 2rem;
}

.calendly-shell {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 700px;
  position: relative;
}
.calendly-inline-widget { min-width: 280px; height: 700px; }
.calendly-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}
.calendly-shell.is-loaded .calendly-fallback { display: none; }

.booking-aside { display: grid; gap: 1.2rem; }
.fee-card ul { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.fee-card li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55em 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 0.95rem;
  margin: 0;
}
.fee-card li:last-child { border-bottom: none; }
.fee-card li strong { text-align: right; }

@media (max-width: 860px) {
  .booking-grid { grid-template-columns: 1fr; }
  /* Calendar first on mobile; the "prefer to chat first" / fees cards
     follow it, below the booking widget and its fallback link. */
}

/* ==========================================================================
   16. CORPORATE PAGE
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.page-hero::before {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 168, 217, 0.45), rgba(179, 168, 217, 0) 70%);
  top: -160px; right: -120px;
  pointer-events: none;
}
.page-hero .container { position: relative; }
.breadcrumbs {
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}
.breadcrumbs ol { list-style: none; display: flex; gap: 0.5em; padding: 0; margin: 0; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.5em; color: var(--text-soft); }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.proof-strip .card { text-align: center; padding: 1.4rem 1rem; }
.proof-strip .stat {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--plum);
  display: block;
}
.proof-strip .stat-label { font-size: 0.9rem; color: var(--text-soft); }

/* ---- "How an engagement starts" numbered steps: match the site's card
   language (white card, soft border) with a plum number disc. ---- */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 0; margin: 0; }
.steps li { counter-increment: step; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 1.6rem 1.5rem; margin: 0; }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--plum); color: #fff; font-weight: 700; font-family: var(--font-body); margin-bottom: 0.9rem; }
.steps h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.steps p { font-size: 0.95rem; color: var(--text-soft); margin: 0; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; gap: 1rem; } }

/* ---- enquiry form ---- */
.form-card { padding: clamp(1.6rem, 4vw, 2.5rem); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.92rem; }
.form-field .optional { font-weight: 500; color: var(--text-soft); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--plum);
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 12px;
  padding: 0.75em 1em;
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 3px solid rgba(154, 154, 214, 0.55);
  outline-offset: 0;
  border-color: var(--periwinkle);
}
.form-note { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.9rem; }

/* honeypot — visually removed but present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status { margin-top: 1rem; font-weight: 600; }
.form-status.is-error { color: #8A2F3B; }

.form-success { text-align: center; padding: 2.5rem 1.5rem; }
.form-success .tick {
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--mist);
  color: var(--plum);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

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

/* ==========================================================================
   17. NRI PAGE
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}
.feature-grid .card h3 { font-size: 1.12rem; }
.feature-grid .card p { font-size: 0.95rem; color: var(--text-soft); }

/* ==========================================================================
   17b. LEGAL PAGES
   ========================================================================== */
.legal-content h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.legal-content h3 { font-size: 1.08rem; margin-top: 1.4rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { font-size: 0.98rem; }

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--plum);
  color: var(--mist);
  padding: 3.5rem 0 0;
  margin-top: var(--section-pad);
}
.site-footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); }
.site-footer a:hover { text-decoration-color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1fr;
  gap: 2.2rem;
}
.footer-grid h2 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.55em; font-size: 0.95rem; }
.footer-wordmark {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.footer-about { font-size: 0.95rem; color: #D8D1EA; max-width: 30em; }

.crisis-note {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 1.4rem 0;
  font-size: 0.85rem;
  color: #CFC7E6;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 1.2rem 0 1.4rem;
  font-size: 0.85rem;
  color: #CFC7E6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ==========================================================================
   19. MOBILE STICKY CTA BAR
   ========================================================================== */
.mobile-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: none;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem calc(0.5rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -4px 20px rgba(74, 64, 99, 0.18);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-cta-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s ease;
}
.mobile-cta-bar .btn {
  flex: 1;
  font-size: 0.82rem;
  padding: 0.6em 0.7em;
  white-space: nowrap;
}
/* the primary label is longer, so give it the wider share to stay one line */
.mobile-cta-bar .btn-primary { flex: 1.7; }

@media (max-width: 780px) {
  .mobile-cta-bar { display: flex; }
  .site-footer { padding-bottom: 5.5rem; }
}

/* ==========================================================================
   20. UTILITIES, ANIMATION, ACCESSIBILITY
   ========================================================================== */
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.text-center { text-align: center; }

/* gentle reveal-on-scroll; only active when JS adds .js to <html> */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .help-card, .btn, .mobile-cta-bar { transition: none; }
}