/* ==========================================================================
   THEHEALINGDESK — Design Tokens
   A warm-neutral editorial wellness aesthetic. Sage + terracotta on ivory.
   ========================================================================== */

:root{
  /* Color */
  --ivory:        #F8F4EC;
  --cream:        #F1E8D9;
  --card:         #FCFAF5;
  --charcoal:     #2B2A26;
  --charcoal-70:  #55524A;
  --charcoal-45:  #86827A;
  --sage:         #8C9A7B;
  --sage-deep:    #66755A;
  --sage-tint:    #E4E9DD;
  --terracotta:   #C6875C;
  --terracotta-tint: #EFDCC9;
  --line:         #E2D6C2;
  --ivory-rgb:    248,244,236;

  /* Type */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Rhythm */
  --container: 1180px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 60px -30px rgba(43,42,38,0.25);
  --shadow-card: 0 12px 34px -18px rgba(43,42,38,0.22);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--charcoal);
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}

p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--sage-deep);
  outline-offset:3px;
  border-radius:4px;
}

/* ------------------------- Type scale ------------------------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--sage-deep);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:26px;
  height:1px;
  background:var(--terracotta);
  display:inline-block;
}

h1.display{ font-size:clamp(2.6rem, 5.6vw, 4.6rem); }
h2.section-title{ font-size:clamp(2rem, 4vw, 3rem); }
h3.card-title{ font-size:clamp(1.3rem,2vw,1.6rem); font-weight:500; }

.section-lede{
  font-size:1.08rem;
  color:var(--charcoal-70);
  max-width:640px;
  line-height:1.7;
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:52px;
}
.section-head.center{ align-items:center; text-align:center; margin-left:auto; margin-right:auto; }

/* ------------------------- Buttons ------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border-radius:100px;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.01em;
  border:1px solid transparent;
  transition:transform 0.4s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--charcoal);
  color:var(--ivory);
}
.btn-primary:hover{ background:var(--sage-deep); transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(43,42,38,0.45); }

.btn-outline{
  background:transparent;
  color:var(--charcoal);
  border-color:var(--charcoal-45);
}
.btn-outline:hover{ border-color:var(--charcoal); background:var(--charcoal); color:var(--ivory); transform:translateY(-2px); }

.btn-terracotta{
  background:var(--terracotta);
  color:#fff;
}
.btn-terracotta:hover{ background:var(--sage-deep); transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(198,135,92,0.55); }

.btn-sm{ padding:11px 22px; font-size:0.86rem; }
.btn-block{ width:100%; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:22px 0;
  transition:padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.solid{
  padding:14px 0;
  background:rgba(248,244,236,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -24px rgba(43,42,38,0.5);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--charcoal);
  display:inline-flex;
  align-items:baseline;
  gap:3px;
}
.logo-icon{
  width:34px; height:34px;
  border-radius:50%;
  object-fit:cover;
  margin-right:8px;
  box-shadow:0 2px 8px -2px rgba(43,42,38,0.3);
}
.footer-brand .logo-icon,.footer .logo-icon{ width:38px; height:38px; }
.logo .leaf-dot{
  width:7px; height:9px;
  border-radius:60% 40% 60% 40%/60% 60% 40% 40%;
  background:var(--terracotta);
  display:inline-block;
  transform:translateY(-6px);
}
.nav-links{
  display:none;
  align-items:center;
  gap:38px;
  font-size:0.94rem;
  font-weight:600;
  color:var(--charcoal-70);
}
.nav-links a{ position:relative; padding:4px 0; transition:color .3s; }
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:-2px;
  width:0; height:1.5px;
  background:var(--terracotta);
  transition:width .35s var(--ease);
}
.nav-links a:hover,.nav-links a.active{ color:var(--charcoal); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }

.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-cta{ display:none; }

.hamburger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;height:38px;
  border:none;background:none;
  padding:0;
}
.hamburger span{
  display:block; width:22px; height:2px; background:var(--charcoal);
  transition:transform .35s var(--ease), opacity .3s;
  margin:0 auto;
}
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed;
  inset:0;
  background:var(--ivory);
  z-index:99;
  display:flex;
  flex-direction:column;
  padding:110px 32px 48px;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{
  font-family:var(--font-display);
  font-size:2.1rem;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  color:var(--charcoal);
}
.mobile-menu .btn{ margin-top:30px; }
.mobile-menu .mm-meta{ margin-top:auto; color:var(--charcoal-45); font-size:0.85rem; }

@media(min-width:960px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .hamburger{ display:none; }
}

/* ==========================================================================
   Hero — full-bleed brand artwork background (icon + wash + leaves), text
   overlaid on top, fading seamlessly into the next section on scroll.
   ========================================================================== */
.hero{
  padding:150px 0 120px;
  position:relative;
  overflow:hidden;
  min-height:78vh;
  display:flex;
  align-items:center;
}
.hero-art{
  position:absolute; inset:0;
  background-image:url('../images/hero-bg.jpg');
  background-repeat:no-repeat;
  background-position:68% 40%;
  background-size:cover;
  z-index:0;
}
/* readable panel behind the text, easing into the artwork on the right so
   nothing feels like a hard-edged box */
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    var(--ivory) 0%,
    var(--ivory) 30%,
    rgba(248,244,236,0.86) 42%,
    rgba(248,244,236,0.45) 56%,
    rgba(248,244,236,0.08) 70%,
    transparent 82%);
  z-index:0;
}
/* fade the very bottom of the hero into the next section's background so the
   artwork never looks like it's "cut off" when the page scrolls past it */
.hero::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:220px;
  background:linear-gradient(to bottom, transparent, var(--ivory));
  pointer-events:none;
  z-index:0;
}
.hero-grid{ position:relative; z-index:1; width:100%; }
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  align-items:center;
}
.hero-copy{ max-width:640px; }
.hero-copy .eyebrow{ margin-bottom:22px; }
.hero-copy h1{ margin-bottom:22px; }
.hero-copy .section-lede{ margin-bottom:30px; max-width:520px; }
.hero-locations{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:0.86rem; color:var(--charcoal-70); margin-bottom:34px;
  font-weight:600; letter-spacing:0.02em;
}
.hero-locations .dot{ width:4px;height:4px;border-radius:50%; background:var(--terracotta); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }

/* .blob-frame is still used standalone on the About page for the portrait */
.blob-frame{
  position:relative;
  width:100%;
  max-width:460px;
  margin:0 auto;
  aspect-ratio:4/5;
}

@media(max-width:720px){
  /* Mobile hero: text already fills the screen nicely on its own, so keep
     the art as a quiet atmospheric wash behind it rather than trying to
     squeeze in the full icon composition (avoids collisions with buttons) */
  .hero{ min-height:0; padding:130px 0 70px; }
  .hero-art{
    background-size:auto 100%;
    background-position:30% 15%;
  }
  .hero-scrim{
    background:linear-gradient(180deg,
      var(--ivory) 0%,
      rgba(248,244,236,0.9) 55%,
      rgba(248,244,236,0.55) 80%,
      rgba(248,244,236,0.3) 100%);
  }
  .hero-grid{ padding-top:20px; padding-bottom:10px; }
  .hero::after{ height:120px; }
}
.blob-shape{
  position:absolute; inset:0;
  border-radius:44% 56% 62% 38% / 48% 42% 58% 52%;
  background:linear-gradient(155deg,var(--sage-tint) 0%, var(--cream) 55%, var(--terracotta-tint) 100%);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:blobMorph 16s ease-in-out infinite alternate;
}
@keyframes blobMorph{
  0%{ border-radius:44% 56% 62% 38% / 48% 42% 58% 52%; }
  50%{ border-radius:58% 42% 40% 60% / 40% 58% 42% 60%; }
  100%{ border-radius:50% 50% 38% 62% / 60% 44% 56% 40%; }
}
.blob-shape.brand-fill{
  position:relative;
  background:linear-gradient(155deg,var(--sage-tint) 0%, var(--card) 55%, var(--terracotta-tint) 100%);
}
.blob-shape.brand-fill .brand-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  filter:blur(22px) brightness(0.94) saturate(1.08);
  transform:scale(1.3);
  opacity:0.5;
}
.blob-shape.brand-fill .brand-fg{
  position:relative;
  z-index:1;
  width:76%;
  max-width:320px;
  object-fit:contain;
  filter:drop-shadow(0 16px 32px rgba(43,42,38,0.28));
}
.blob-shape .monogram{
  font-family:var(--font-display);
  font-size:6rem;
  color:var(--sage-deep);
  opacity:0.55;
  letter-spacing:0.02em;
}
.blob-shape img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 18%;
  mix-blend-mode:normal;
}
.blob-shape img,
.portrait-sm img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.portrait-sm{ overflow:hidden; }
.blob-caption{
  position:absolute;
  bottom:-34px; left:50%; transform:translateX(-50%);
  font-size:0.72rem;
  color:var(--charcoal-45);
  white-space:nowrap;
  letter-spacing:0.03em;
}
.blob-ring{
  position:absolute;
  border:1.5px solid var(--terracotta);
  border-radius:50%;
  opacity:0.35;
}
.blob-frame .r1{ width:70px;height:70px; top:-18px; right:-10px; }
.blob-frame .r2{ width:26px;height:26px; bottom:30px; left:-14px; background:var(--terracotta); opacity:0.9; border:none; }

@media(min-width:900px){
  .hero-grid{ grid-template-columns:1.05fr 0.95fr; gap:70px; }
}

/* ==========================================================================
   Sections / rhythm
   ========================================================================== */
.section{ padding:96px 0; position:relative; }
.section.tight{ padding:64px 0; }
.section-alt{ background:var(--cream); }
.section-dark{ background:var(--charcoal); color:var(--ivory); }
.section-dark h2,.section-dark h3{ color:var(--ivory); }
.section-dark .section-lede{ color:rgba(248,244,236,0.72); }

.wave-divider{
  width:100%; height:60px; display:block;
  margin-top:-1px;
}

/* two column generic */
.split{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:center;
}
@media(min-width:900px){ .split{ grid-template-columns:0.85fr 1.15fr; gap:72px; } }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }

.portrait-sm{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  border-radius:38% 62% 55% 45%/45% 40% 60% 55%;
  background:linear-gradient(160deg,var(--terracotta-tint),var(--cream) 60%,var(--sage-tint));
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.portrait-sm span{
  font-family:var(--font-display); font-size:4rem; color:var(--sage-deep); opacity:0.5;
}
.portrait-sm img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 14%;
}
.portrait-sm .tag{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.85); padding:6px 14px; border-radius:100px;
  font-size:0.68rem; color:var(--charcoal-70); letter-spacing:0.02em; white-space:nowrap;
}

.intro-copy h2{ margin-bottom:20px; }
.intro-copy p + p{ margin-top:16px; }
.intro-copy .btn{ margin-top:28px; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
@media(min-width:700px){ .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .card-grid.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:960px){ .card-grid.cols-4{ grid-template-columns:repeat(4,1fr);} }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:34px 28px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:transparent; }
.card-icon{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--sage-tint);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  color:var(--sage-deep);
}
.card h3{ margin-bottom:10px; }
.card p{ color:var(--charcoal-70); font-size:0.96rem; }
.card .card-meta{
  margin-top:16px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--terracotta); font-weight:700;
}

/* ==========================================================================
   Steps (how it works)
   ========================================================================== */
.steps{
  display:grid; grid-template-columns:1fr; gap:0;
  position:relative;
}
@media(min-width:860px){ .steps{ grid-template-columns:repeat(3,1fr); gap:36px; } }
.step{ position:relative; padding:0 0 0 0; }
.step-num{
  font-family:var(--font-display);
  font-size:3.4rem;
  color:var(--terracotta-tint);
  -webkit-text-stroke:1.4px var(--terracotta);
  line-height:1;
  margin-bottom:18px;
  display:block;
}
.step h3{ margin-bottom:10px; }
.step p{ color:var(--charcoal-70); font-size:0.96rem; }
.step-line{
  display:none;
}
@media(min-width:860px){
  .step:not(:last-child)::after{
    content:'';
    position:absolute; top:24px; left:calc(100% + 0px);
    width:36px; height:1px;
    background:repeating-linear-gradient(90deg, var(--terracotta) 0 6px, transparent 6px 12px);
    display:block;
  }
}

/* ==========================================================================
   Chips
   ========================================================================== */
.chip-row{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  padding:11px 20px;
  border-radius:100px;
  background:var(--card);
  border:1px solid var(--line);
  font-size:0.86rem;
  font-weight:600;
  color:var(--charcoal-70);
  transition:all .35s var(--ease);
}
.chip:hover{ background:var(--sage-tint); border-color:var(--sage); color:var(--charcoal); transform:translateY(-2px); }

/* ==========================================================================
   Locations
   ========================================================================== */
.loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(min-width:760px){ .loc-grid{ grid-template-columns:repeat(5,1fr); } }
.loc-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px 22px;
  text-align:center;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.loc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); }
.loc-icon{
  width:40px;height:40px;margin:0 auto 16px;
  border-radius:50%;
  background:var(--terracotta-tint);
  display:flex;align-items:center;justify-content:center;
  color:var(--terracotta);
}
.loc-card h3{ font-size:1.2rem; margin-bottom:6px; }
.loc-card p{ font-size:0.84rem; color:var(--charcoal-70); text-transform:uppercase; letter-spacing:0.06em; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.price-grid{ display:grid; grid-template-columns:1fr; gap:26px; max-width:900px; margin:0 auto; }
@media(min-width:760px){ .price-grid{ grid-template-columns:1fr 1fr; } }
.price-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:40px 34px;
  text-align:left;
  position:relative;
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.price-card::before{
  content:'';
  position:absolute; top:-60px; right:-60px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, var(--terracotta-tint) 0%, transparent 72%);
  opacity:0; transform:scale(0.6);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.price-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-card); border-color:var(--sage-deep); }
.price-card:hover::before{ opacity:1; transform:scale(1); }
.price-card .price-icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--sage-tint); color:var(--sage-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  transition:transform .45s var(--ease), background .45s var(--ease);
  position:relative; z-index:1;
}
.price-card:hover .price-icon{ transform:rotate(-8deg) scale(1.08); background:var(--terracotta-tint); color:var(--terracotta); }
.price-card.featured{ border-color:var(--sage-deep); background:linear-gradient(165deg,var(--card),var(--sage-tint)); }
.price-card .price-label{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--sage-deep); font-weight:700; margin-bottom:14px; display:block; position:relative; z-index:1; }
.price-card h3{ margin-bottom:8px; position:relative; z-index:1; }
.price-card .price-meta{ color:var(--charcoal-70); font-size:0.9rem; margin-bottom:22px; position:relative; z-index:1; }
.price-value{ font-family:var(--font-display); font-size:2.2rem; color:var(--charcoal); margin-bottom:26px; display:block; position:relative; z-index:1; }
.price-value small{ font-family:var(--font-body); font-size:0.9rem; color:var(--charcoal-45); font-weight:600; }
.price-card .btn{ position:relative; z-index:1; }

/* ==========================================================================
   Psychological Counselling Pricing Grid (services.html — Fees section)
   ========================================================================== */
.pricing-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}
@media(min-width:640px){
  .pricing-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1040px){
  .pricing-grid{ grid-template-columns:repeat(4,1fr); }
}

.pricing-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 28px 28px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pricing-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow-card);
  border-color:var(--sage);
}

/* Featured card — individual session */
.pricing-card--featured{
  border-color:var(--sage-deep);
  background:linear-gradient(160deg, var(--card) 0%, var(--sage-tint) 100%);
}
.pricing-card--featured:hover{ border-color:var(--sage-deep); box-shadow:0 16px 40px -18px rgba(102,117,90,0.4); }

/* Package card */
.pricing-card--package{
  border-color:var(--terracotta);
  background:linear-gradient(160deg, var(--card) 0%, var(--terracotta-tint) 100%);
}
.pricing-card--package:hover{ border-color:var(--terracotta); box-shadow:0 16px 40px -18px rgba(198,135,92,0.4); }

/* Assessment card — neutral */
.pricing-card--assessment{
  background:var(--card);
}

/* Package badge */
.pricing-card__badge{
  position:absolute;
  top:18px; right:18px;
  background:var(--terracotta);
  color:#fff;
  font-family:var(--font-body);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:100px;
}

/* Header row — label + duration pill */
.pricing-card__header{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;
}
.pricing-card__label{
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--sage-deep);
}
.pricing-card__duration{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.82rem;
  color:var(--charcoal-70);
  font-weight:500;
  line-height:1.4;
}
.pricing-card__duration svg{ flex:none; color:var(--terracotta); }

/* Price display */
.pricing-card__price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.pricing-card__amount{
  font-family:var(--font-display);
  font-size:2.4rem;
  font-weight:500;
  color:var(--charcoal);
  line-height:1;
  letter-spacing:-0.02em;
}
.pricing-card__amount--variable{
  font-size:1.8rem;
  color:var(--charcoal-70);
  font-style:italic;
}
.pricing-card__unit{
  font-family:var(--font-body);
  font-size:0.82rem;
  color:var(--charcoal-45);
  font-weight:600;
}

/* Description */
.pricing-card__desc{
  font-size:0.92rem;
  color:var(--charcoal-70);
  line-height:1.65;
  flex:1; /* push button to bottom */
  margin-bottom:24px;
}

/* Button is already btn-block */

/* ==========================================================================
   Sliding-Scale Support Section
   ========================================================================== */
.sliding-scale-section{ padding:72px 0; }
.sliding-scale-inner{
  display:flex;
  align-items:flex-start;
  gap:36px;
  max-width:820px;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:52px 48px;
  position:relative;
  overflow:hidden;
}
.sliding-scale-inner::before{
  content:'';
  position:absolute;
  top:-80px; right:-80px;
  width:240px; height:240px;
  border-radius:50%;
  background:radial-gradient(circle, var(--sage-tint) 0%, transparent 72%);
  pointer-events:none;
}
.sliding-scale-icon{
  flex:none;
  width:60px; height:60px;
  border-radius:50%;
  background:var(--sage-tint);
  color:var(--sage-deep);
  display:flex; align-items:center; justify-content:center;
  margin-top:4px;
  box-shadow:0 4px 14px -6px rgba(102,117,90,0.3);
}
.sliding-scale-body{
  flex:1;
}
.sliding-scale-text{
  font-size:1.05rem;
  color:var(--charcoal-70);
  line-height:1.75;
  max-width:600px;
  margin-top:14px;
}

@media(max-width:767px){
  .pricing-card{
    padding:26px 22px 22px;
    border-radius:var(--radius-md);
  }
  .pricing-card__amount{ font-size:2rem; }
  .pricing-card__amount--variable{ font-size:1.5rem; }
  .sliding-scale-inner{
    flex-direction:column;
    gap:20px;
    padding:32px 24px;
    border-radius:var(--radius-md);
  }
  .sliding-scale-icon{
    width:52px; height:52px;
  }
  .sliding-scale-section{ padding:48px 0; }
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.accordion{ max-width:820px; margin:0 auto; border-top:1px solid var(--line); }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px;
  background:none; border:none; text-align:left;
  font-family:var(--font-display);
  font-size:1.18rem;
  color:var(--charcoal);
}
.accordion-trigger .plus{
  flex:none; width:22px; height:22px; position:relative;
}
.accordion-trigger .plus::before,.accordion-trigger .plus::after{
  content:''; position:absolute; background:var(--terracotta); transition:transform .4s var(--ease);
}
.accordion-trigger .plus::before{ width:100%; height:1.5px; top:50%; left:0; transform:translateY(-50%); }
.accordion-trigger .plus::after{ width:1.5px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.accordion-item.open .accordion-trigger .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.accordion-item.open .accordion-panel{ grid-template-rows:1fr; }
.accordion-panel-inner{ overflow:hidden; min-height:0; }
.accordion-panel p{
  padding:0 4px 24px;
  color:var(--charcoal-70);
  font-size:0.98rem;
  max-width:680px;
}

/* ==========================================================================
   Final CTA band
   ========================================================================== */
.cta-band{
  background:var(--charcoal);
  color:var(--ivory);
  border-radius:36px;
  padding:70px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute; width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(198,135,92,0.35),transparent 70%);
  top:-140px; right:-100px;
}
.cta-band::after{
  content:'';
  position:absolute; width:280px;height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(140,154,123,0.3),transparent 70%);
  bottom:-140px; left:-80px;
}
.cta-band h2{ color:var(--ivory); margin-bottom:16px; position:relative; }
.cta-band p{ color:rgba(248,244,236,0.75); max-width:520px; margin:0 auto 32px; position:relative; }
.cta-band .hero-actions{ justify-content:center; position:relative; }
.cta-band .btn-outline{ border-color:rgba(248,244,236,0.4); color:var(--ivory); }
.cta-band .btn-outline:hover{ background:var(--ivory); color:var(--charcoal); border-color:var(--ivory); }

/* ==========================================================================
   Instagram
   ========================================================================== */
.insta-block{
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--card);
  padding:56px 40px 48px;
  text-align:center;
}
.insta-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:640px; margin:0 auto 34px;
}
@media(min-width:640px){
  .insta-grid{ grid-template-columns:repeat(4,1fr); max-width:100%; gap:20px; }
}
.insta-tile{
  aspect-ratio:1; border-radius:16px;
  background:linear-gradient(150deg,var(--sage-tint),var(--terracotta-tint));
  display:block;
  color:var(--sage-deep);
  overflow:hidden;
  position:relative;
  box-shadow:0 10px 24px -16px rgba(43,42,38,0.28);
  border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.insta-tile:hover,.insta-tile:focus-visible{ transform:translateY(-5px); box-shadow:var(--shadow-card); }
.insta-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.insta-tile:hover img,.insta-tile:focus-visible img{ transform:scale(1.05); }
.insta-tile .insta-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(43,42,38,0.28);
  color:#fff;
  opacity:0;
  transition:opacity .35s var(--ease);
}
.insta-tile:hover .insta-overlay,.insta-tile:focus-visible .insta-overlay{ opacity:1; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--cream);
  padding:80px 0 34px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid; grid-template-columns:1fr; gap:44px;
}
@media(min-width:800px){ .footer-grid{ grid-template-columns:1.4fr 0.8fr 0.8fr 0.8fr; } }
.footer-brand .logo{ margin-bottom:16px; }
.footer-tagline{ color:var(--charcoal-70); max-width:280px; font-size:0.94rem; }
.footer-col h4{
  font-family:var(--font-body); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--charcoal-45); margin-bottom:18px; font-weight:700;
}
.footer-col a,.footer-col li{ display:block; color:var(--charcoal-70); font-size:0.94rem; margin-bottom:12px; transition:color .3s; }
.footer-col a:hover{ color:var(--terracotta); }
.footer-bottom{
  margin-top:60px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:0.82rem; color:var(--charcoal-45);
}
.footer-bottom .legal{ display:flex; gap:22px; }

/* ==========================================================================
   Page hero (About/Services/Contact)
   ========================================================================== */
.page-hero{
  padding:150px 0 70px;
  text-align:center;
}
.page-hero .eyebrow{ justify-content:center; margin-bottom:18px; }
.page-hero h1{ margin-bottom:14px; }
.page-hero .role{ font-size:1.1rem; color:var(--sage-deep); font-weight:600; }
.page-hero p.section-lede{ margin:20px auto 0; text-align:center; }

/* ==========================================================================
   Timeline (About)
   ========================================================================== */
.timeline{ max-width:760px; margin:0 auto; border-left:1.5px solid var(--line); }
.timeline-item{ position:relative; padding:0 0 40px 34px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:-6.5px; top:4px;
  width:12px;height:12px; border-radius:50%;
  background:var(--terracotta); border:3px solid var(--ivory);
}
.timeline-item .t-eyebrow{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--sage-deep); font-weight:700; margin-bottom:6px; display:block; }
.timeline-item h3{ font-size:1.3rem; margin-bottom:4px; }
.timeline-item p{ color:var(--charcoal-70); font-size:0.94rem; }
.timeline-placeholder{
  text-align:center; padding:40px; color:var(--charcoal-45); font-size:0.94rem;
  border:1px dashed var(--line); border-radius:var(--radius-md);
}

/* ==========================================================================
   Services page detail rows
   ========================================================================== */
.service-row{ padding:70px 0; border-bottom:1px solid var(--line); }
.service-row:last-of-type{ border-bottom:none; }
.service-row .split{ align-items:start; }
.service-tag{ display:inline-block; margin-bottom:16px; }
.service-list{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.service-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--charcoal-70); font-size:0.96rem; }
.service-list li::before{
  content:''; width:6px;height:6px; border-radius:50%; background:var(--terracotta);
  margin-top:9px; flex:none;
}

/* ==========================================================================
   Contact page — form
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:56px; }
@media(min-width:980px){ .contact-grid{ grid-template-columns:1.15fr 0.85fr; } }

.form-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:40px;
}
.form-row{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:20px; }
@media(min-width:620px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.field label{
  display:block; font-size:0.82rem; font-weight:700; letter-spacing:0.03em;
  color:var(--charcoal-70); margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--ivory);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  font-family:var(--font-body);
  font-size:0.96rem;
  color:var(--charcoal);
  transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--sage-deep); outline:none;
}
.field textarea{ resize:vertical; min-height:110px; }
.radio-group{ display:flex; gap:12px; flex-wrap:wrap; }
.radio-pill{
  border:1px solid var(--line); border-radius:100px; padding:10px 18px;
  font-size:0.86rem; font-weight:600; color:var(--charcoal-70); cursor:pointer;
  transition:all .3s;
}
.radio-pill input{ display:none; }
.radio-pill.active,.radio-pill:has(input:checked){ background:var(--sage); border-color:var(--sage); color:#fff; }
.form-note{ font-size:0.8rem; color:var(--charcoal-45); margin-top:6px; }
.form-success{
  display:none; text-align:center; padding:50px 20px;
}
.form-success.show{ display:block; }
.form-success .icon{
  width:64px;height:64px;border-radius:50%; background:var(--sage-tint); color:var(--sage-deep);
  display:flex;align-items:center;justify-content:center; margin:0 auto 22px;
}
.form-success h3{ margin-bottom:10px; }
.form-success p{ color:var(--charcoal-70); max-width:400px; margin:0 auto 24px; }

.contact-side{ display:flex; flex-direction:column; gap:26px; }
.contact-block{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px;
}
.contact-block h4{ font-family:var(--font-body); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--charcoal-45); margin-bottom:16px; font-weight:700; }
.contact-line{ display:flex; align-items:center; gap:14px; padding:10px 0; font-size:0.96rem; }
.contact-line .ic{
  width:36px;height:36px; border-radius:50%; background:var(--card); color:var(--terracotta);
  display:flex;align-items:center;justify-content:center; flex:none;
}
.contact-line a{ font-weight:600; }
.contact-line a:hover{ color:var(--terracotta); }

/* ==========================================================================
   Sticky mobile book CTA
   ========================================================================== */
.sticky-cta{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  display:flex; justify-content:center;
  transform:translateY(120%);
  transition:transform .5s var(--ease);
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; box-shadow:0 16px 34px -14px rgba(43,42,38,0.5); }
@media(min-width:960px){ .sticky-cta{ display:none; } }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.14s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.23s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.32s; }

/* ==========================================================================
   About page — psychologist quote under portrait
   ========================================================================== */
.about-quote{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-style:italic;
  color:var(--charcoal);
  max-width:560px;
  margin:32px auto 0;
  line-height:1.4;
}

/* ==========================================================================
   Misc
   ========================================================================== */
.divider-space{ height:1px; background:var(--line); margin:0; }
.text-center{ text-align:center; }
.mt-lg{ margin-top:56px; }
.center-actions{ display:flex; justify-content:center; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--charcoal); color:var(--ivory);
  padding:12px 20px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   MOBILE OVERRIDES — all screens ≤ 767 px
   Touch-first layout, proper spacing and alignment for every section.
   ========================================================================== */

@media (max-width: 767px) {

  /* ── Container ─────────────────────────────────────────────── */
  .container {
    padding: 0 18px;
  }

  /* ── Base typography ────────────────────────────────────────── */
  .section-lede {
    max-width: 100%;
    font-size: 1rem;
  }
  .section-head.center .section-lede {
    max-width: 100%;
  }

  /* ── Buttons — touch targets & wrapping ─────────────────────── */
  .btn {
    white-space: normal;
    min-height: 48px;
    padding: 13px 24px;
    font-size: 0.92rem;
  }
  .btn-sm {
    padding: 11px 20px;
    min-height: 44px;
    font-size: 0.84rem;
  }

  /* ── Section rhythm ─────────────────────────────────────────── */
  .section {
    padding: 60px 0;
  }
  .section.tight {
    padding: 40px 0;
  }
  .section-head {
    margin-bottom: 36px;
  }
  .mt-lg {
    margin-top: 36px;
  }

  /* ── Hero (index.html) ──────────────────────────────────────── */
  .hero {
    padding: 100px 0 56px;
    min-height: 0;
  }
  .hero-art {
    background-size: auto 100%;
    background-position: 55% 20%;
  }
  .hero-scrim {
    background: linear-gradient(
      180deg,
      var(--ivory) 0%,
      rgba(248,244,236,0.95) 45%,
      rgba(248,244,236,0.6)  75%,
      rgba(248,244,236,0.25) 100%
    );
  }
  .hero::after {
    height: 100px;
  }
  .hero-grid {
    padding-top: 10px;
    padding-bottom: 6px;
    gap: 28px;
  }
  .hero-copy {
    max-width: 100%;
  }
  .hero-copy h1 {
    margin-bottom: 16px;
  }
  .hero-copy .section-lede {
    margin-bottom: 22px;
    max-width: 100%;
  }
  .hero-locations {
    margin-bottom: 28px;
    gap: 8px;
  }
  .hero-actions {
    flex-direction: column;
    gap: 12px;
  }
  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }

  /* ── Page hero (About / Services / Contact inner pages) ─────── */
  .page-hero {
    padding: 100px 0 44px;
  }
  .page-hero h1 {
    margin-bottom: 10px;
  }
  .page-hero .section-lede {
    font-size: 1rem;
    max-width: 100%;
  }

  /* ── Split layout + reverse fix ─────────────────────────────── */
  /* direction:rtl on .split.reverse scrambles mobile stacking;
     reset to normal flow so the image always sits above the copy. */
  .split {
    gap: 32px;
  }
  .split.reverse {
    direction: ltr;
  }
  .split.reverse > * {
    direction: ltr;
  }

  /* ── Portrait SM (service page images) ─────────────────────── */
  .portrait-sm {
    aspect-ratio: 4 / 3;
    max-height: 260px;
    border-radius: 20px;
  }

  /* ── Intro copy spacing ─────────────────────────────────────── */
  .intro-copy h2 {
    margin-bottom: 14px;
  }
  .intro-copy .btn {
    margin-top: 22px;
    width: 100%;
    text-align: center;
  }

  /* ── Cards ──────────────────────────────────────────────────── */
  .card {
    padding: 26px 22px;
  }

  /* ── Steps (How it works) ───────────────────────────────────── */
  .steps {
    gap: 0;
  }
  .step {
    padding-bottom: 28px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--line);
  }
  .step:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .step-num {
    font-size: 2.8rem;
    margin-bottom: 10px;
  }
  .step h3 {
    font-size: 1.2rem;
  }

  /* ── Mentorship chips ───────────────────────────────────────── */
  .chip-row {
    gap: 10px;
  }
  .chip {
    padding: 9px 16px;
    font-size: 0.82rem;
  }

  /* ── Location grid ──────────────────────────────────────────── */
  .loc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .loc-card {
    padding: 22px 16px;
  }

  /* ── Pricing ────────────────────────────────────────────────── */
  .price-card {
    padding: 30px 24px;
  }

  /* ── Service rows (services.html) ───────────────────────────── */
  .service-row {
    padding: 48px 0;
  }

  /* ── FAQ Accordion ──────────────────────────────────────────── */
  .accordion {
    max-width: 100%;
  }
  .accordion-trigger {
    min-height: 56px;
    padding: 16px 4px;
    font-size: 1.05rem;
    gap: 14px;
  }
  .accordion-panel p {
    font-size: 0.94rem;
    padding-bottom: 20px;
  }

  /* ── Final CTA band ─────────────────────────────────────────── */
  .cta-band {
    padding: 44px 24px;
    border-radius: 22px;
  }
  .cta-band h2 {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    margin-bottom: 12px;
  }
  .cta-band p {
    font-size: 0.97rem;
    margin-bottom: 26px;
  }
  .cta-band .hero-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .cta-band .hero-actions .btn {
    width: 100%;
  }

  /* ── Instagram block ────────────────────────────────────────── */
  .insta-block {
    padding: 36px 20px 32px;
    border-radius: 20px;
  }
  .insta-grid {
    gap: 12px;
    margin-bottom: 24px;
  }
  .insta-tile {
    border-radius: 12px;
  }

  /* ── Contact form card ──────────────────────────────────────── */
  .form-card {
    padding: 26px 18px;
    border-radius: 18px;
  }
  .form-row {
    gap: 16px;
    margin-bottom: 16px;
  }
  /* Two-col rows must stack on mobile */
  .form-row.two {
    grid-template-columns: 1fr;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;    /* prevents iOS auto-zoom on focus */
    padding: 13px 14px;
    border-radius: 8px;
  }
  .radio-group {
    gap: 10px;
  }
  .radio-pill {
    padding: 9px 16px;
    font-size: 0.84rem;
  }

  /* ── Contact side blocks ────────────────────────────────────── */
  .contact-block {
    padding: 22px 18px;
  }
  .contact-grid {
    gap: 36px;
  }

  /* ── Footer ─────────────────────────────────────────────────── */
  .footer {
    padding: 56px 0 28px;
  }
  .footer-grid {
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 40px;
    padding-top: 20px;
  }
  .footer-bottom .legal {
    gap: 16px;
  }
  /* footer span elements in location column need display:block */
  .footer-col span {
    display: block;
    color: var(--charcoal-70);
    font-size: 0.94rem;
    margin-bottom: 12px;
  }

  /* ── Sticky CTA bar ─────────────────────────────────────────── */
  .sticky-cta {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .sticky-cta .btn {
    font-size: 0.95rem;
    padding: 15px 20px;
  }

  /* ── About page quote ───────────────────────────────────────── */
  .about-quote {
    font-size: 1.25rem;
    margin: 22px auto 0;
    padding: 0 4px;
  }

  /* ── Timeline (About page) ──────────────────────────────────── */
  .timeline-item {
    padding: 0 0 30px 26px;
  }

  /* ── Pricing Cards (Psychological & Psychiatric) ───────────── */
  .pricing-grid {
    gap: 16px;
    max-width: 100%;
  }
  .psych-pricing-grid {
    gap: 16px;
    max-width: 100%;
  }
  .pricing-card {
    padding: 22px 18px 20px;
    border-radius: var(--radius-md);
  }
  .pricing-card__header {
    gap: 6px;
    margin-bottom: 14px;
  }
  .pricing-card__label {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
  }
  .pricing-card__duration {
    font-size: 0.78rem;
  }
  .pricing-card__price {
    margin-bottom: 12px;
    gap: 6px;
  }
  .pricing-card__amount {
    font-size: 1.85rem;
    line-height: 1.05;
  }
  .pricing-card__amount--variable {
    font-size: 1.45rem;
  }
  .pricing-card__unit {
    font-size: 0.78rem;
  }
  .pricing-card__desc {
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .pricing-card .btn {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 0.88rem;
  }
  .pricing-card__badge {
    top: 14px;
    right: 14px;
    font-size: 0.68rem;
    padding: 4px 10px;
  }

  /* ── Psychiatric Mode Badges ───────────────────────────────── */
  .psych-mode-badge {
    font-size: 0.68rem;
    padding: 4px 10px;
    margin-bottom: 12px;
  }

  /* ── Sliding-Scale Support Section ─────────────────────────── */
  .sliding-scale-section {
    padding: 40px 0;
  }
  .sliding-scale-inner {
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
    border-radius: var(--radius-md);
  }
  .sliding-scale-icon {
    width: 44px;
    height: 44px;
    margin-top: 0;
  }
  .sliding-scale-icon svg {
    width: 22px;
    height: 22px;
  }
  .sliding-scale-body .section-title {
    font-size: 1.35rem !important;
  }
  .sliding-scale-text {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-top: 10px;
  }

  /* ── Psychiatric Consultation Disclaimer ──────────────────── */
  .psych-disclaimer {
    margin-top: 22px;
    padding: 14px 16px;
    font-size: 0.82rem;
    line-height: 1.55;
    border-radius: var(--radius-sm);
  }

  /* ── Section Divider ────────────────────────────────────────── */
  .services-section-divider {
    padding: 6px 0;
  }

  /* ── Doctor Cards (About page) ─────────────────────────────── */
  .doctor-grid {
    gap: 20px;
    margin-top: 28px;
  }
  .doctor-card-body {
    padding: 20px 18px 18px;
    gap: 8px;
  }
  .doctor-name {
    font-size: 1.35rem;
  }
  .doctor-snippet {
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 2px 0 6px;
  }

  /* ── Doctor Modal (mobile popup) ───────────────────────────── */
  .doctor-modal {
    padding: 14px 10px;
    align-items: center;
  }
  .doctor-modal-box {
    max-height: 90vh;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
  }
  .doctor-modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    font-size: 1.25rem;
  }
  .doctor-modal-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .doctor-modal-img {
    height: 200px;
    flex: none;
  }
  .doctor-modal-content {
    padding: 22px 18px 24px;
    max-height: none;
    overflow-y: visible;
    gap: 10px;
  }
  .doctor-modal-name {
    font-size: 1.45rem;
  }
  .doctor-modal-content p {
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .modal-section-title {
    font-size: 1.08rem;
    margin: 12px 0 4px;
    padding-top: 12px;
  }
  .modal-list li {
    font-size: 0.86rem;
    line-height: 1.5;
  }
  .modal-cta {
    margin-top: 14px;
    padding-top: 14px;
  }
  .modal-cta .btn {
    width: 100%;
  }

} /* end @media (max-width: 767px) */

/* ==========================================================================
   Very small phones — 380 px and below
   ========================================================================== */
@media (max-width: 380px) {

  .container {
    padding: 0 14px;
  }
  .hero {
    padding: 88px 0 48px;
  }
  .page-hero {
    padding: 88px 0 36px;
  }
  .cta-band {
    padding: 36px 18px;
    border-radius: 18px;
  }
  .insta-block {
    padding: 28px 14px 26px;
  }
  .form-card {
    padding: 22px 14px;
  }
  .mobile-menu {
    padding: 100px 22px 40px;
  }
  .mobile-menu a {
    font-size: 1.75rem;
    padding: 12px 0;
  }
  .btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
  .section {
    padding: 50px 0;
  }

} /* end @media (max-width: 380px) */

/* ==========================================================================
   Layout adjustments (footer / contact / services after content removal)
   ========================================================================== */
@media(min-width:700px){ .card-grid.cols-2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:800px){ .footer-grid{ grid-template-columns:1.6fr 1fr; } }
.contact-grid{ max-width:760px; margin:0 auto; grid-template-columns:1fr !important; }
.service-row .split,.service-row .split.reverse{ grid-template-columns:1fr !important; max-width:820px; margin-left:auto; margin-right:auto; }

/* ==========================================================================
   DOCTOR CARDS — Meet Our Doctors section
   ========================================================================== */
.doctor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.doctor-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.doctor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(43,42,38,0.3);
}

.doctor-card-img {
  width: 100%;
  aspect-ratio: 3/3.5;
  overflow: hidden;
  background: var(--cream);
}
.doctor-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s var(--ease);
}
.doctor-card:hover .doctor-card-img img {
  transform: scale(1.03);
}

.doctor-card-body {
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.doctor-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.15;
  margin: 0;
}

.doctor-role {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0;
}

.doctor-snippet {
  font-size: 0.95rem;
  color: var(--charcoal-70);
  line-height: 1.65;
  margin: 4px 0 8px;
}

.doctor-readmore {
  align-self: flex-start;
  margin-top: auto;
}

/* ==========================================================================
   DOCTOR MODAL
   ========================================================================== */
.doctor-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.doctor-modal[hidden] {
  display: none;
}
.doctor-modal.open {
  display: flex;
}

.doctor-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 42, 38, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  z-index: 0;
}

.doctor-modal-box {
  position: relative;
  z-index: 1;
  background: var(--ivory);
  border-radius: var(--radius-lg);
  max-width: 820px;
  width: 100%;
  box-shadow: 0 40px 100px -30px rgba(43,42,38,0.45);
  overflow: hidden;
  margin: auto;
  animation: modalSlideIn 0.32s var(--ease);
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.doctor-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--ivory);
  color: var(--charcoal);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  z-index: 10;
}
.doctor-modal-close:hover {
  background: var(--cream);
  border-color: var(--terracotta);
  color: var(--terracotta);
}

.doctor-modal-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 500px;
}

.doctor-modal-img {
  background: var(--cream);
  overflow: hidden;
}
.doctor-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.doctor-modal-content {
  padding: 40px 36px 36px;
  overflow-y: auto;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doctor-modal-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.1;
  margin: 6px 0 0;
}

.doctor-modal-sub {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 8px;
}

.modal-section-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--charcoal);
  margin: 16px 0 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-list li {
  padding-left: 18px;
  position: relative;
  font-size: 0.93rem;
  color: var(--charcoal-70);
  line-height: 1.6;
}
.modal-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--terracotta);
  font-weight: 600;
}

.modal-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: none;
}
.modal-steps li {
  font-size: 0.93rem;
  color: var(--charcoal-70);
  line-height: 1.65;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--terracotta);
}

.modal-cta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* body overflow lock when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ==========================================================================
   MANOROG INSTAGRAM FOLLOW CTA
   ========================================================================== */
.insta-follow-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.insta-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  padding: 14px 28px;
}

.insta-handle-note {
  font-size: 0.82rem;
  color: var(--charcoal-45);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   RESPONSIVE — Doctor Grid & Modal
   ========================================================================== */
@media (max-width: 900px) {
  .doctor-modal-inner {
    grid-template-columns: 1fr;
  }
  .doctor-modal-img {
    height: 280px;
  }
  .doctor-modal-content {
    max-height: none;
    padding: 28px 24px 28px;
  }
}

@media (max-width: 700px) {
  .doctor-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .doctor-modal-box {
    border-radius: var(--radius-md);
  }
  .doctor-modal-name {
    font-size: 1.55rem;
  }
}

/* ==========================================================================
   CONTACT FORM — File upload & extras
   ========================================================================== */
.field-optional {
  font-size: 0.78rem;
  color: var(--charcoal-45);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   SERVICES PAGE — Section Divider (psychologist ↔ psychiatrist)
   ========================================================================== */
.services-section-divider {
  padding: 0;
}
.services-divider-line {
  height: 1px;
  background: var(--line);
  max-width: 1100px;
  margin: 0 auto;
}

/* ==========================================================================
   PSYCHIATRIC PRICING GRID
   Balanced structured layout:
   - 2 columns on tablet & desktop (Initial vs Follow-up side-by-side, Extended card spanning or centered)
   - 1 column on mobile
   ========================================================================== */
.psych-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 680px) {
  .psych-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .psych-pricing-grid .psych-pricing-card--extended {
    grid-column: 1 / -1;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
}

.psych-pricing-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.psych-pricing-card:hover {
  transform: translateY(-7px);
  border-color: var(--terracotta);
  box-shadow: 0 16px 40px -18px rgba(198,135,92,0.3);
}

.psych-pricing-card--extended {
  border-color: var(--terracotta);
  background: linear-gradient(160deg, var(--card) 0%, var(--terracotta-tint) 100%);
}
.psych-pricing-card--extended:hover {
  border-color: var(--terracotta);
  box-shadow: 0 16px 40px -18px rgba(198,135,92,0.45);
}

/* ==========================================================================
   PSYCHIATRIC MODE BADGES — Online / In Person
   ========================================================================== */
.psych-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  width: fit-content;
}
.psych-mode-badge--online {
  background: var(--sage-tint);
  color: var(--sage-deep);
}
.psych-mode-badge--inperson {
  background: var(--terracotta-tint);
  color: var(--terracotta);
}

/* ==========================================================================
   PSYCHIATRIC CONSULTATION DISCLAIMER
   ========================================================================== */
.psych-disclaimer {
  max-width: 780px;
  margin: 36px auto 0;
  padding: 20px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  color: var(--charcoal-45);
  line-height: 1.7;
  text-align: center;
}
@media (max-width: 767px) {
  .psych-disclaimer {
    padding: 16px 18px;
    font-size: 0.85rem;
    margin-top: 24px;
  }
}

/* ==========================================================================
   PSYCHIATRIC AREAS OF CARE — responsive grid (13 items)
   ========================================================================== */
.areas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
@media (min-width: 560px) {
  .areas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 860px) {
  .areas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.area-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 0.95rem;
  color: var(--charcoal-70);
  line-height: 1.5;
  font-weight: 500;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.area-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--sage);
}

.area-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--sage-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

@media (max-width: 767px) {
  .area-item {
    padding: 14px 16px;
    font-size: 0.92rem;
  }
  .area-icon {
    width: 32px;
    height: 32px;
  }
  .psych-pricing-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 380px) {
  .area-item {
    padding: 12px 14px;
  }
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
.testimonials-section {
  position: relative;
  background: var(--ivory);
  padding: 96px 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 680px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 992px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.testimonial-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--sage);
}

.testimonial-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.testimonial-card__category {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--sage-tint);
  color: var(--sage-deep);
  line-height: 1.35;
  word-wrap: break-word;
  max-width: 100%;
}

.testimonial-card__category--psychiatry {
  background: var(--terracotta-tint);
  color: #8C4B22;
}

.testimonial-card__quote-mark {
  flex-shrink: 0;
  color: var(--terracotta);
  opacity: 0.3;
  margin-top: 2px;
}

.testimonial-card__quote {
  flex: 1 1 auto;
  margin: 0 0 24px 0;
  padding: 0;
}

.testimonial-card__quote p {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.68;
  color: var(--charcoal-70);
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.testimonial-card__avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sage-tint);
  color: var(--sage-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  user-select: none;
}

.testimonial-card__avatar--alt {
  background: var(--terracotta-tint);
  color: #8C4B22;
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  font-style: normal;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-card__location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--charcoal-45);
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.2;
}

.testimonial-card__location svg {
  flex-shrink: 0;
  color: var(--terracotta);
}

.testimonials-note {
  max-width: 760px;
  margin: 36px auto 0;
  font-size: 0.82rem;
  color: var(--charcoal-45);
  line-height: 1.6;
  text-align: center;
  font-style: italic;
}

@media (max-width: 767px) {
  .testimonials-section {
    padding: 72px 0 80px;
  }
  .testimonials-grid {
    gap: 18px;
  }
  .testimonial-card {
    padding: 24px 20px;
    border-radius: var(--radius-sm);
  }
  .testimonial-card__quote p {
    font-size: 0.94rem;
    line-height: 1.62;
  }
  .testimonial-card__header {
    margin-bottom: 16px;
  }
  .testimonial-card__footer {
    padding-top: 16px;
  }
  .testimonials-note {
    margin-top: 28px;
    font-size: 0.8rem;
    padding: 0 10px;
  }
}

@media (max-width: 380px) {
  .testimonials-section {
    padding: 60px 0 72px;
  }
  .testimonial-card {
    padding: 20px 16px;
  }
  .testimonial-card__header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .testimonial-card__category {
    font-size: 0.7rem;
    padding: 4px 10px;
  }
  .testimonial-card__quote-mark {
    width: 22px;
    height: 18px;
  }
  .testimonial-card__avatar {
    width: 38px;
    height: 38px;
    font-size: 0.78rem;
  }
  .testimonial-card__name {
    font-size: 0.94rem;
  }
}