@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.
   ============================================================ */

: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: transparent !important;
  border: 1px solid rgba(62, 81, 71, 0.45) !important;
  color: var(--oxblood) !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: transparent !important;
  border: 1px solid rgba(62, 81, 71, 0.45) !important;
  color: var(--oxblood) !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 { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(340px, 42%, 500px); gap: clamp(2.75rem, 7vw, 5.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; }

/* 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; }