@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&display=swap');

/* ============================================================
   MOCKUP PREVIEW OVERRIDES  (loads AFTER style.css)
   Jeff's picks 2026-06-16:
     • Colour : 01 Sage & Terracotta
     • Type   : 05 Modern & human — Hanken Grotesk (all-sans)
     • Section: C Flat outlined pills
     • Flat   : no shadows, no gradients
   Non-destructive — live style.css is untouched.
   ============================================================ */

/* Pin mobile text rendering — stops iOS Safari from auto-inflating body text */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root{
  --cream:        #FAF6EF;   /* ivory — page bg */
  --cream-deep:   #EFE4D5;   /* warm sand — soft sections */
  --blush:        #F0E1D4;   /* pale clay — empathy / notes bg (replaces rose) */
  --oxblood:      #3E5147;   /* deep sage — primary anchor */
  --oxblood-deep: #2E3B33;   /* deep forest — contact bg */
  --ink:          #2E2A24;   /* bark — body text */
  --ink-soft:     #6E635A;
  --copper:       #C0714C;   /* terracotta — accent */
  --hairline:     rgba(62, 81, 71, 0.20);

  --serif: "Hanken Grotesk", system-ui, sans-serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
}

/* ---- all-sans heading weights (Hanken needs more weight + tighter tracking than Fraunces) ---- */
h1 { font-weight: 700 !important; letter-spacing: -0.028em; }
h2 { font-weight: 640 !important; letter-spacing: -0.022em; }
h3 { font-weight: 620 !important; letter-spacing: -0.015em; }

/* ---- FLAT: remove every shadow site-wide ---- */
*, *::before, *::after { box-shadow: none !important; }

/* ---- FLAT: kill gradients, use solid warm fills ---- */
.hero::before { background: none !important; }
.about-creds { background: #F4EADC !important; border: 1px solid var(--hairline); }
.contact { background: var(--oxblood-deep) !important; }

/* ---- section blocks recoloured for Sage & Terracotta ---- */
.services    { background: #38473D !important; }  /* deep sage block, cream text kept */
.site-footer { background: #2B2722 !important; }  /* deep bark — distinct from the greens */

/* ---- service numbers 01–04: clean sans, terracotta (was Fraunces italic) ---- */
.service-num {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--copper) !important;
}

/* ---- services: age eyebrow + intake sub-price (on the dark sage block) ---- */
.service-age {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D79A77;
  margin-bottom: 0.45rem;
}
.service-intake {
  font-size: 0.85rem;
  color: rgba(251, 246, 239, 0.62);
  margin-top: 0.25rem;
}

/* empathy: photos dropped → centred text on a deep-green block that pops */
.empathy { background: #2E3B33 !important; border-top: none !important; border-bottom: none !important; }
.empathy-inner { display: block !important; max-width: 960px; margin: 0 auto; text-align: center; }
.empathy-text { max-width: none !important; }
.empathy h2 { color: var(--cream) !important; font-size: clamp(1.6rem, 3.2vw, 2.35rem) !important; }
.empathy-text p { color: rgba(251, 246, 239, 0.9) !important; max-width: 940px; margin-left: auto; margin-right: auto; }

/* getting-started photo: laughing-boy photo, centred on the boy (show more of the right) */
.begin-photo img { object-position: 62% 30% !important; }

/* about: story on the left with a small portrait below it; registration card spans the right */
.about-inner { grid-template-columns: minmax(0, 1fr) clamp(300px, 36%, 400px) !important; align-items: start !important; column-gap: clamp(1.5rem, 4vw, 3.5rem) !important; row-gap: clamp(1.5rem, 3vw, 2.5rem) !important; padding-bottom: clamp(2.25rem, 5vw, 4.25rem) !important; }
.about-main  { grid-column: 1 !important; grid-row: 1 !important; }
.about-creds { grid-column: 2 !important; grid-row: 1 !important; position: static !important; top: auto !important; margin-top: 0 !important; }
.about-photo { grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self: end !important; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0 !important; position: static; max-width: 300px; }
.about-photo img { width: 100%; border-radius: 0; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; display: block; }
@media (max-width: 760px){
  .about-inner { grid-template-columns: 1fr !important; }
  .about-main, .about-photo, .about-creds { grid-column: 1 !important; grid-row: auto !important; }
  .about-photo { max-width: 300px; }
}

/* ---- "What I work with": flat OUTLINED pills (option C) ---- */
.works-list li {
  background: #C0897A !important;
  border: 1px solid #C0897A !important;
  color: var(--cream) !important;
}

/* ---- keepsake note cards: drop the white mat/frame, show the photo directly ---- */
.note-card { background: transparent !important; padding: 0 !important; border: none !important; }
.note-card img { border-radius: 12px; }


/* ============================================================
   ROUND 2 TWEAKS (2026-06-16)
   ============================================================ */

/* (1) distinct backgrounds so adjacent sections read as separate */
.notes { background: #ECDFCF !important; }  /* warm sand */
.works { background: #FAF6EF !important; }   /* ivory — clearly lighter than notes above it */
.faq   { background: #F1E7DA !important; }   /* soft sand — distinct from the ivory works above */

/* (2) hero photo: clean rounded rectangle, large like the reference */
.hero-inner { grid-template-columns: 1.1fr 0.9fr !important; gap: clamp(2rem, 5vw, 4rem) !important; }
.hero-text h1 { font-size: clamp(2rem, 4.2vw, 3.15rem) !important; }  /* fits the text column cleanly */
.hero-photo { width: min(100%, 470px); }
.arch { border-radius: 999px 999px 44px 44px !important; }   /* arch top + softened bottom corners */
.arch img { aspect-ratio: 17 / 20 !important; object-position: 50% 18% !important; }
.arch-shadow { display: none !important; }   /* drop the offset frame for a clean, flat look */
/* mobile: stack the hero (was forced to 2 columns by the !important above) */
@media (max-width: 760px){
  .hero-inner { grid-template-columns: 1fr !important; gap: clamp(1.5rem, 6vw, 2.5rem) !important; }
  .hero-photo { width: 100% !important; max-width: 340px; justify-self: center !important; margin-left: auto; margin-right: auto; }
  .hero-text h1 { font-size: clamp(2.1rem, 9vw, 2.9rem) !important; }
}

/* play-therapy "who it's for" tags → outlined, matching the home-page pills */
.pt-tags li {
  background: #C0897A !important;
  border: 1px solid #C0897A !important;
  color: var(--cream) !important;
}

/* facts: tidy 2×2 grid (Ages | Duration / Format | Parent consultation) */
.pt-facts {
  display: grid !important;
  grid-template-columns: max-content max-content;
  column-gap: clamp(2.5rem, 7vw, 5.5rem);
  row-gap: clamp(1.6rem, 4vw, 2.4rem);
}

/* "Who it's for" → two columns, photo on the right */
.pt-who-inner { max-width: var(--max-w) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(340px, 40%, 480px); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.pt-who-photo { margin: 0; }
.pt-who-photo img { width: 100%; border-radius: 18px; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 980px){
  .pt-who-inner { grid-template-columns: 1fr !important; }   /* stack earlier so tags flow full-width */
  .pt-who-photo { max-width: 380px; }
}
/* smaller fact values (3 to 11, 45 minutes, …) */
.pt-fact { font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important; }
/* first-session (intake) note under Fees — smaller, muted */
.pt-fact-sub { display: block; margin-top: 0.3rem; font-size: 0.72em; font-weight: 400; line-height: 1.35; color: var(--ink-soft, #8a8278); white-space: nowrap; }

/* playroom feature photo: smaller, aligned under the step text, less gap below */
.pt-feature { margin-top: clamp(2rem, 4vw, 3rem) !important; margin-left: clamp(2.4rem, 6.3vw, 5rem); max-width: 560px; }
.pt-process-inner { padding-bottom: clamp(1.75rem, 4vw, 3rem) !important; }
@media (max-width: 640px){ .pt-feature { margin-left: 0; } }
.pt-feature figcaption { margin-top: 0.7rem; font-size: 0.82rem; color: var(--ink-soft); text-align: left; letter-spacing: 0.02em; }

/* tag spacing — tighter, less crowded; more room above the pills */
.pt-tags { gap: 0.55rem 0.6rem !important; margin-top: 1.8rem !important; }
.pt-tags li { padding: 0.5rem 1.15rem !important; }
/* forced row break: drops Anxiety to the next row, beside Trauma (all widths) */
.pt-tags .tag-break { flex-basis: 100%; width: 100%; height: 0; padding: 0 !important; margin: 0 !important; border: 0; }

/* who-it's-for photo placeholder (until a real photo is supplied) */
.pt-who-photo.placeholder { background: #E4D7C8; aspect-ratio: 4 / 5; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.pt-who-photo.placeholder span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #9a8e81; }

/* (4) terracotta primary buttons + nav CTA (deep shade = AA contrast w/ cream) */
/* button base + nav CTA (terracotta) */
.btn-solid       { background: #A95B39 !important; color: var(--cream) !important; border-color: transparent !important; }
.btn-solid:hover { background: #8F4A2C !important; }
.nav-cta         { background: #A95B39 !important; color: var(--cream) !important; }
.nav-cta:hover   { background: #8F4A2C !important; }

/* HERO → two terracotta buttons (filled + outline) */
.hero-actions .btn-solid { background: #A95B39 !important; color: var(--cream) !important; }
.hero-actions .btn-ghost { background: transparent !important; color: #A95B39 !important; border: 1px solid #A95B39 !important; }
.hero-actions .btn-ghost:hover { background: rgba(169, 91, 57, 0.08) !important; }

/* GETTING STARTED → two green buttons (filled + outline) */
.begin-cta .btn-solid       { background: var(--oxblood) !important; color: var(--cream) !important; }
.begin-cta .btn-solid:hover { background: var(--oxblood-deep) !important; }
.begin-cta .btn-ghost       { background: transparent !important; color: var(--oxblood) !important; border: 1px solid var(--oxblood) !important; }
.begin-cta .btn-ghost:hover { background: rgba(62, 81, 71, 0.06) !important; }

/* (3) getting-started now carries the two contact buttons + email line */
.begin-cta   { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.begin-email { margin-top: 1.1rem; font-size: 0.95rem; color: var(--ink-soft); }
.begin-email a { color: #A95B39; text-decoration: underline; text-underline-offset: 2px; }

/* (6) play-therapy link drops to its own line under the description (no orphan) */
.service-desc .service-link { display: inline-block; margin-top: 0.55rem; }

/* ============================================================
   LANGUAGE SWITCHER (EN · 繁 · 简) — added 2026-06-18
   Lives in the header, right-grouped with the nav, and stays
   visible on mobile (sits beside the hamburger).
   ============================================================ */
.wordmark { margin-right: auto; }   /* keep wordmark left, group nav + lang right */
.wordmark-sub { white-space: nowrap; }  /* never wrap "…& PLAY / THERAPY" into an orphan on mobile */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
.lang-switch a {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.28rem 0.5rem;
  border-radius: 7px;
  transition: color 0.2s ease, background 0.2s ease;
}
.lang-switch a:hover { color: var(--oxblood); }
.lang-switch a[aria-current="page"] {
  color: var(--oxblood);
  background: rgba(62, 81, 71, 0.10);
}
.lang-switch .lang-sep {
  color: var(--hairline);
  font-size: 0.7rem;
  user-select: none;
}
@media (max-width: 720px) {
  .lang-switch { margin-left: auto; margin-right: 0.25rem; }
}
@media (max-width: 380px) {
  .lang-switch a { padding: 0.28rem 0.38rem; font-size: 0.78rem; }
}

/* ============================================================
   PLAY-THERAPY STEPS — "for parents" / "for child" cue
   So readers instantly see who each step is for.
   ============================================================ */
.pt-step-for {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
}
.pt-for-parent { color: #3E5147; background: rgba(62, 81, 71, 0.10); }
.pt-for-child  { color: #A95B39; background: rgba(169, 91, 57, 0.12); }

/* footer trilingual line — kill the 0.04em tracking that over-spaces the Chinese */
.footer-bottom p:last-child { letter-spacing: normal; }

/* Chinese hero on mobile: style.css hides h1 <br> ≤720px (for the EN headline),
   which breaks the intended 3-line Chinese hero — restore it + size to fit 8 chars/line */
@media (max-width: 760px) {
  html[lang^="zh"] .hero-text h1 { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; }
  html[lang^="zh"] .hero-text h1 br { display: inline !important; }
}

/* centered Chinese intro/sub paragraphs — auto-balanced lines (no ragged long-then-short, no orphans) */
.empathy-text p, .works-intro, .steps p, .pt-who-text > p { text-wrap: balance; }
/* longer paragraphs — avoid single-character orphan on the last line */
.about-copy p, .service-desc, .pt-step-body p, .pt-intro-text p, .pt-outcomes-lede, .pt-outcome p { text-wrap: pretty; }

/* ============================================================
   OUTCOMES — "what change can look like" (added 2026-06-27)
   Shared by the child, adult and parenting service pages: a warm,
   hopeful close that paints the picture of where the work leads.
   ============================================================ */
.pt-outcomes { background: #F4EADC; border-top: 1px solid var(--hairline); }
.pt-outcomes-inner { max-width: var(--max-w); margin: 0 auto; padding: var(--space-section) var(--pad-x); }
.pt-outcomes h2 { margin-bottom: 1.1rem; }
.pt-outcomes-lede {
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.6;
}
.pt-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.4rem) clamp(2rem, 6vw, 4.5rem);
}
.pt-outcome { border-top: 1px solid var(--hairline); padding-top: 1.05rem; }
.pt-outcome h3 { font-size: 1.18rem; margin-bottom: 0.4rem; color: var(--oxblood); }
.pt-outcome p { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.6; max-width: 44ch; }
.pt-outcomes-close {
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--oxblood);
  max-width: 54ch;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .pt-outcome-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ============================================================
   SERVICES DROPDOWN (added 2026-06-27)
   "Services" nav item reveals: For children / teenagers / adults / parents.
   Hover (or keyboard focus) on desktop; expands inline in the mobile drawer.
   ============================================================ */
.has-dropdown { position: relative; }
.nav-services { display: inline-flex; align-items: center; }
.nav-caret {
  display: inline-block;
  width: 0.4em; height: 0.4em;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.42em; margin-bottom: 0.18em;
  transition: transform 0.2s ease;
}
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret { transform: rotate(-135deg); margin-bottom: 0; }

/* invisible bridge so the cursor can cross the gap without closing the menu */
.has-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
}
.dropdown {
  list-style: none;
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(2px);
  min-width: 212px;
  background: #FBF7F3;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 0.45rem;
  box-shadow: 0 20px 44px -22px rgba(46, 61, 52, 0.42);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1100;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(12px);
}
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: 0.58rem 0.85rem;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.dropdown a::after { display: none !important; }
.dropdown a:hover { background: rgba(62, 81, 71, 0.08); color: var(--oxblood); }
.dropdown a[aria-current="page"] { color: var(--oxblood); background: rgba(62, 81, 71, 0.10); }

@media (max-width: 720px) {
  .has-dropdown { width: 100%; }
  .has-dropdown::after { display: none; }
  .nav-caret { display: none; }
  .dropdown {
    position: static;
    transform: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent;
    border: none;
    border-left: 2px solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    margin: 0.45rem 0 0 0.2rem;
    padding: 0 0 0 0.7rem;
  }
  .dropdown a { padding: 0.4rem 0; }
}

/* ============================================================
   "WHAT I WORK WITH" — grouped by theme (added 2026-06-28)
   Replaces the pill list on the home page with labelled groups.
   ============================================================ */
.works-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3.5vw, 2.4rem) clamp(2rem, 6vw, 4rem);
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.works-grp h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--hairline);
}
.works-grp ul { list-style: none; margin: 0; padding: 0; }
.works-grp li { color: var(--ink); font-size: 1rem; padding: 0.32rem 0; }
@media (max-width: 640px) {
  .works-groups { grid-template-columns: 1fr; gap: 1.7rem; }
}

/* ============================================================
   SERVICE PAGES "who it's for" tags → EDITORIAL CHECKLIST (2026-06-28)
   Replaces the pills with a 2-column list, copper dot + row dividers
   (matching the home "What I work with" Option A treatment).
   ============================================================ */
.pt-tags {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 clamp(1.4rem, 3vw, 2.4rem) !important;
  margin-top: clamp(1.4rem, 3vw, 1.9rem) !important;
  margin-bottom: clamp(1.9rem, 4vw, 2.6rem) !important;
}
.pt-tags li {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  display: flex !important;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.62rem 0 !important;
  font-size: 0.95rem !important;
}
.pt-tags li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--copper);
  margin-top: 0.5em;
}
@media (max-width: 520px) {
  .pt-tags { grid-template-columns: 1fr !important; }
}

/* ---- photo placeholders for pages awaiting real images (adult + parenting) ---- */
.pt-intro-photo.placeholder,
.pt-feature.placeholder {
  background: #E4D7C8;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 22px 54px -26px rgba(46, 61, 52, 0.4);
}
.pt-intro-photo.placeholder { aspect-ratio: 4 / 5; }
.pt-feature.placeholder { aspect-ratio: 16 / 10; max-width: 560px; }
.pt-intro-photo.placeholder span,
.pt-feature.placeholder span {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a8e81;
  text-align: center;
  padding: 1rem;
}

/* mobile-only manual breaks — hand-tuned phone layout that should NOT force on desktop */
.br-m { display: none; }
@media (max-width: 760px) { .br-m { display: inline; } }

/* English About copy — slightly tighter line spacing (Chinese keeps roomier CJK spacing) */
html[lang="en"] .about-copy p { line-height: 1.5; }

/* ===== Outcome icons (Squiggles, hand-drawn marks above each point) ===== */
.pt-oc-ic { height: 64px; width: auto; display: block; margin: 0 0 14px; }
@media (max-width: 640px) { .pt-oc-ic { height: 56px; } }


/* ---- play therapy: intro kicker line above the H1 ---- */
.pt-intro .pt-kicker {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--copper) !important;
  letter-spacing: -0.005em;
  margin: 0 0 0.9rem;
  max-width: none !important;
}
.pt-intro .pt-kicker span { display: block; }