/* ============================================================
   Arielle Katz, LMFT — shared styles (multi-page redesign, Aug 2026)
   Palette + type per the original design handoff; layout per Zach's
   Claude Design revision. Contrast rule: on #F1F4F3 / #E6EDEC small text
   must be #143246 #1E3F52 #3D5A64 #37545F #4E6B75 #28505F #1A5A69.
   ============================================================ */

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  color-scheme: light;
}
section, footer, header { scroll-margin-top: 96px; }
a, button {
  -webkit-tap-highlight-color: rgba(46,125,140,.12);
  touch-action: manipulation;
}
::selection { background: #8FC3C9; color: #143246; }
body {
  margin: 0;
  background: #F1F4F3;
  color: #143246;
  font-family: Outfit, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* NOTE: no overflow-x here. Setting it on <body> as well as <html> turns the
     body into its own scroll container, which silently kills the sticky header
     in every browser. The guard on <html> propagates to the viewport already. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: #1A5A69; text-decoration: none; }
img, svg { max-width: 100%; }
input, textarea, select, button { font-family: Outfit, system-ui, sans-serif; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

@keyframes floatIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes photoIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.page-fade { animation: pageIn .5s ease both; }

/* Accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #143246; color: #F1F4F3; padding: 12px 20px;
  border-radius: 0 0 10px 0; font-size: 14px;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #2E7D8C;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(143,195,201,.35);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(241,244,243,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(46,125,140,.12);
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled {
  background: rgba(241,244,243,.97);
  box-shadow: 0 8px 30px -18px rgba(20,50,70,.25);
}
.headbar {
  max-width: 1180px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.lockup { display: flex; align-items: center; gap: 14px; }
.lockup svg { width: 42px; height: 42px; display: block; flex-shrink: 0; }
.lockup-text { border-left: 1px solid #C9DCDE; padding-left: 14px; display: block; }
.lockup-name {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500; font-size: 22px; line-height: 1; color: #143246;
}
.lockup-tag {
  display: block; font-size: 9.5px; letter-spacing: .32em;
  text-transform: uppercase; color: #1A5A69; margin-top: 5px;
}
.main-nav { display: flex; align-items: center; gap: 26px; font-size: 13.5px; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nav-link { color: #37545F; transition: color .18s ease; }
.nav-link:hover { color: #143246; }
.nav-underline {
  display: block; height: 1.5px; width: 100%; background: #2E7D8C;
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.nav-item:hover .nav-underline { transform: scaleX(.6); }
.nav-item.active .nav-underline, .nav-item.active:hover .nav-underline { transform: scaleX(1); }
.nav-item.active .nav-link { color: #143246; }
.lang-pill {
  display: flex; align-items: center; background: #F1F4F3;
  border: 1px solid rgba(46,125,140,.3); border-radius: 999px; padding: 3px;
}
.lang-opt {
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px;
  letter-spacing: .08em; color: #4E6B75;
  transition: background .2s ease, color .2s ease;
}
.lang-opt.active { background: #143246; color: #F1F4F3; }
.btn-cta {
  background: #1A5A69; color: #F1F4F3; padding: 11px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 500; box-shadow: 0 2px 14px rgba(46,125,140,.22);
  transition: background .2s ease;
}
.btn-cta:hover { background: #143246; color: #fff; }
.mob-nav { display: none; align-items: center; gap: 14px; }
.mob-cta {
  background: #1A5A69; color: #F1F4F3; padding: 12px 19px; border-radius: 999px;
  font-size: 13px; font-weight: 500; display: inline-flex; align-items: center;
  transition: background .2s ease;
}
.mob-cta:hover { background: #143246; color: #fff; }
.menu-btn {
  cursor: pointer; background: none;
  border: 1px solid rgba(46,125,140,.3); border-radius: 999px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.menu-lines {
  display: block; width: 18px; height: 12px;
  border-top: 1.5px solid #2E7D8C; border-bottom: 1.5px solid #2E7D8C; position: relative;
}
.menu-lines::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1.5px;
  background: #2E7D8C; transform: translateY(-50%);
}
.mobile-menu {
  display: none;
  border-top: 1px solid rgba(46,125,140,.14);
  background: #F1F4F3;
  padding: 10px 24px 22px;
  flex-direction: column; gap: 2px;
  animation: floatIn .28s ease both;
}
.mobile-menu.open { display: flex; }
.mm-link {
  color: #143246; font-size: 16px; padding: 14px 4px;
  border-bottom: 1px solid rgba(46,125,140,.1);
}
.mm-link.active { color: #1A5A69; font-weight: 500; }
.mm-lang { color: #1A5A69; font-size: 16px; padding: 14px 4px; display: block; }

/* ============================================================
   Shared bits
   ============================================================ */
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.wrap--narrow { max-width: 900px; }
.eyebrow {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #4E6B75;
}
.btn-primary {
  display: inline-block; background: #143246; color: #F1F4F3;
  padding: 16px 28px; border-radius: 999px; font-size: 15px; font-weight: 500;
  box-shadow: 0 2px 18px rgba(20,50,70,.18); border: 0; cursor: pointer;
  transition: background .2s ease;
}
.btn-primary:hover { background: #1A5A69; color: #fff; }
.btn-primary--sm { padding: 15px 26px; box-shadow: none; }
.btn-primary--nowrap { white-space: nowrap; }
.btn-light {
  display: inline-block; background: #F1F4F3; color: #143246;
  padding: 15px 26px; border-radius: 999px; font-size: 15px; font-weight: 500;
  transition: background .2s ease;
}
.btn-light:hover { background: #8FC3C9; color: #143246; }
.text-link {
  font-size: 14.5px; color: #1A5A69;
  border-bottom: 1px solid rgba(46,125,140,.35); padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.text-link:hover { color: #143246; border-color: #143246; }
.more-link {
  font-size: 14px; color: #1A5A69;
  border-bottom: 1px solid rgba(46,125,140,.3);
  align-self: flex-start; padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.more-link:hover, a:hover .more-link { color: #143246; border-color: #143246; }
.free-note { font-size: 14px; color: #4E6B75; }

/* Page headers (interior pages) */
.page-head { padding-top: 62px; }
.page-head .eyebrow { margin-bottom: 16px; }
.page-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(36px, 4vw, 54px); line-height: 1.06; letter-spacing: -.018em;
  margin: 0 0 20px; color: #143246; max-width: 22ch; text-wrap: balance;
}
.page-lead {
  font-size: 17.5px; line-height: 1.68; color: #37545F;
  max-width: 58ch; margin: 0 0 44px; text-wrap: pretty;
}

/* Wide image bands + placeholder pattern for photos still to come */
.band-img { border-radius: 18px; overflow: hidden; background: #DCE9E9; }
.band-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-soon {
  width: 100%; height: 100%; background: #DCE9E9;
  display: flex; align-items: center; justify-content: center;
}
.img-soon svg { width: 120px; height: auto; opacity: .45; overflow: visible; }

/* Section footer CTA rows */
.foot-cta {
  border-top: 1px solid rgba(46,125,140,.2); padding-top: 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.foot-cta-note { font-size: 15.5px; line-height: 1.6; color: #3D5A64; max-width: 52ch; }
.foot-cta-note strong, .rate-note strong { font-weight: 500; color: #1E3F52; }

/* ============================================================
   Hero (home)
   ============================================================ */
.hero {
  max-width: 1180px; margin: 0 auto; padding: 62px 32px 0;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: start;
}
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #1A5A69; background: #DCE9E9; border-radius: 999px;
  padding: 7px 15px; margin-bottom: 30px;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #5DA3AB; display: inline-block; }
.hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(42px, 4.6vw, 68px); line-height: 1.03; letter-spacing: -.02em;
  margin: 0 0 14px; color: #143246; text-wrap: balance;
}
.hero h1 .divider { color: #5DA3AB; }
.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(23px, 2.1vw, 30px); line-height: 1.38; color: #1E3F52;
  margin: 0; max-width: 30ch; text-wrap: pretty;
}
.rule {
  height: 2px; width: 210px; background: #5DA3AB; opacity: .6;
  transform-origin: left;
  animation: drawLine 1.1s .35s cubic-bezier(.2,.7,.2,1) both;
  margin: 26px 0 26px;
}
.hero-sub {
  font-size: 18.5px; line-height: 1.62; color: #37545F;
  max-width: 37ch; margin: 0 0 34px; text-wrap: pretty;
}
.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.trust-row {
  display: flex; gap: 26px; flex-wrap: wrap; font-size: 12.5px; color: #4E6B75;
  border-top: 1px solid rgba(46,125,140,.14); padding-top: 18px;
}
.hero-photo { position: relative; padding-top: 8px; }
.arch {
  position: relative; border-radius: 240px 240px 18px 18px; overflow: hidden;
  background: #DCE9E9; aspect-ratio: 4/5;
  box-shadow: 0 26px 70px -30px rgba(20,50,70,.45);
}
.arch img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  display: block; animation: photoIn .9s ease both;
}
.float-card {
  position: absolute; left: -30px; bottom: 34px;
  background: #F1F4F3; border: 1px solid rgba(46,125,140,.14);
  border-radius: 14px; padding: 15px 19px;
  box-shadow: 0 14px 40px -18px rgba(20,50,70,.4);
  /* Fixed rather than max-width: with a short body the card would otherwise
     shrink-wrap to one line and read as an undersized tooltip. */
  width: 238px;
}
.float-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; color: #143246; margin-bottom: 4px; }
.float-body { font-size: 13px; line-height: 1.55; color: #4E6B75; }

/* ============================================================
   Home: door cards ("Where to start")
   ============================================================ */
.doors-section { max-width: 1180px; margin: 0 auto; padding: 84px 32px 0; }
.doors-section .eyebrow { margin-bottom: 22px; }
.door-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.door-card {
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; color: #143246;
  transition: transform .25s ease, box-shadow .25s ease;
}
.door-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -24px rgba(20,50,70,.35); }
.door-card--tint { background: #DCE9E9; }
.door-card--panel { background: #FBFCFC; border: 1px solid rgba(46,125,140,.16); }
.door-body { padding: 26px 28px 26px; display: flex; flex-direction: column; flex: 1; }
.door-body h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 27px; line-height: 1.18; margin: 0 0 12px; color: #143246;
}
.door-body p { font-size: 15px; line-height: 1.68; color: #3D5A64; margin: 0 0 20px; }
.door-body .more-link { margin-top: auto; }

/* Topics chip panel */
.topics { max-width: 1180px; margin: 0 auto; padding: 56px 32px 0; }
.topics-panel {
  background: #FBFCFC; border: 1px solid rgba(46,125,140,.16);
  border-radius: 18px; padding: 32px 34px 34px;
}
.topics-panel .eyebrow { margin-bottom: 22px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.topic-chip {
  border: 1px solid rgba(46,125,140,.24); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; color: #28505F; background: #F1F4F3;
}
.chip-more { font-size: 14px; margin-left: 6px; }

/* Home: compact Español teaser band */
.es-teaser { margin-top: 76px; background: #143246; color: #F1F4F3; }
.es-teaser-grid {
  max-width: 1180px; margin: 0 auto; padding: 54px 32px;
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center;
}
.es-teaser .eyebrow { color: #8FC3C9; margin-bottom: 16px; }
.es-teaser h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; margin: 0 0 14px;
  color: #F1F4F3; max-width: 24ch;
}
.es-teaser p { font-size: 16.5px; line-height: 1.7; color: rgba(241,244,243,.78); margin: 0; max-width: 52ch; text-wrap: pretty; }
.es-teaser .btn-light { justify-self: start; }

/* Home: closing CTA */
.cta-close { max-width: 1180px; margin: 0 auto; padding: 72px 32px 90px; text-align: center; }
.cta-close h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; margin: 0 auto 18px;
  color: #143246; max-width: 24ch; text-wrap: balance;
}
.cta-close p { font-size: 16.5px; line-height: 1.68; color: #3D5A64; margin: 0 auto 30px; max-width: 52ch; text-wrap: pretty; }

/* ============================================================
   Who I help: audience cards
   ============================================================ */
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aud-card {
  border-radius: 16px; padding: 34px 34px 30px;
  display: flex; flex-direction: column;
  transition: transform .25s ease;
}
.aud-card:hover { transform: translateY(-3px); }
.aud-card--tint { background: #DCE9E9; }
.aud-card--panel { background: #FBFCFC; border: 1px solid rgba(46,125,140,.18); }
.aud-card h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 27px; line-height: 1.2; margin: 0 0 14px; color: #143246; text-wrap: balance;
}
.aud-card p { font-size: 15.5px; line-height: 1.7; color: #3D5A64; margin: 0; }
.es-strip {
  margin-top: 24px; background: #1A5A69; border-radius: 16px;
  padding: 24px 30px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.es-strip-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #DCEEEF; margin-bottom: 6px; }
.es-strip-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; color: #F1F4F3; }
.es-strip a { font-size: 14.5px; color: #F1F4F3; border-bottom: 1px solid rgba(241,244,243,.5); padding-bottom: 2px; white-space: nowrap; transition: color .18s ease, border-color .18s ease; }
.es-strip a:hover { color: #8FC3C9; border-color: #8FC3C9; }

/* ============================================================
   Approach page
   ============================================================ */
.approach-page { background: #E6EDEC; border-bottom: 1px solid rgba(46,125,140,.1); }
.approach-inner { max-width: 1180px; margin: 0 auto; padding: 62px 32px 76px; }
.approach-head { text-align: center; padding-bottom: 46px; }
.approach-head .eyebrow { margin-bottom: 16px; }
.approach-head .page-title { margin: 0 auto 22px; max-width: none; }
.approach-head .lead {
  font-size: 17px; line-height: 1.68; color: #3D5A64;
  margin: 0 auto; max-width: 62ch; text-wrap: pretty;
}
.approach-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.a-card {
  border: 1px solid rgba(46,125,140,.32); border-radius: 16px;
  padding: 26px 26px 28px; background: transparent;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.a-card:hover {
  transform: translateY(-3px);
  border-color: rgba(46,125,140,.55);
  background: rgba(251,252,252,.45);
}
.a-card svg { width: 30px; height: auto; display: block; overflow: visible; }
.a-card h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 24px; line-height: 1.2; color: #143246; margin: 16px 0 10px;
  text-wrap: balance;
}
.a-card p { font-size: 15px; line-height: 1.68; color: #3D5A64; margin: 0; text-wrap: pretty; }
.a-card strong { font-weight: 500; color: #1E3F52; }
.approach-inner .foot-cta { margin-top: 44px; }

/* ============================================================
   About page
   ============================================================ */
.about-grid {
  display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: 64px; align-items: start;
}
.about-photo-frame {
  border-radius: 14px; overflow: hidden; aspect-ratio: 1/1; background: #DCE9E9;
  box-shadow: 0 22px 56px -30px rgba(20,50,70,.42);
}
.about-photo-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  display: block; transform: scale(1.45); transform-origin: 50% 52%;
}
.namerow {
  display: flex; align-items: center; gap: 13px; padding: 18px 0 22px;
  border-bottom: 1px solid rgba(46,125,140,.22);
}
.namerow svg { width: 38px; height: auto; display: block; flex-shrink: 0; overflow: visible; }
.namerow-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; line-height: 1.2; color: #143246; }
.namerow-sub { font-size: 12px; letter-spacing: .04em; color: #4E6B75; margin-top: 3px; }
.cred-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid rgba(46,125,140,.16);
}
.cred-label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #4E6B75; flex-shrink: 0;
}
.cred-value { font-size: 14.5px; color: #1E3F52; line-height: 1.45; text-align: right; }
.about-right .eyebrow { margin-bottom: 18px; }
.about-right .page-title { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.015em; margin-bottom: 28px; }
.serif-lead {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 1.5;
  color: #1E3F52; margin: 0 0 26px; max-width: 38ch; text-wrap: pretty;
}
.about-p { font-size: 16.5px; line-height: 1.78; color: #3D5A64; margin: 0 0 20px; max-width: 50ch; text-wrap: pretty; }
.about-p--last { margin-bottom: 34px; }
.about-right .cta-row { margin-bottom: 0; }

/* ============================================================
   Español pages
   ============================================================ */
.es-band { background: #143246; color: #F1F4F3; }
.es-grid {
  max-width: 1180px; margin: 0 auto; padding: 66px 32px 76px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.es-band .eyebrow { color: #8FC3C9; margin-bottom: 18px; }
.es-band .page-title {
  font-size: clamp(30px, 3.1vw, 44px); line-height: 1.1; letter-spacing: 0;
  margin-bottom: 20px; color: #F1F4F3; max-width: 20ch;
}
.es-p { font-size: 16.5px; line-height: 1.7; color: rgba(241,244,243,.78); margin: 0 0 16px; max-width: 48ch; text-wrap: pretty; }
.es-p--last { margin-bottom: 30px; }
.es-points {
  border-left: 1px solid rgba(241,244,243,.18); padding-left: 44px;
  display: flex; flex-direction: column; gap: 22px;
}
.es-point-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; color: #F1F4F3; margin-bottom: 6px; }
.es-point-b { font-size: 14.5px; line-height: 1.62; color: rgba(241,244,243,.65); }
.es-second { max-width: 1180px; margin: 0 auto; padding: 56px 32px 90px; }
.es-second h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.14; margin: 0 0 14px;
  color: #143246; max-width: 22ch;
}
.es-second p { font-size: 16px; line-height: 1.7; color: #3D5A64; margin: 0 0 24px; max-width: 44ch; text-wrap: pretty; }

/* ============================================================
   Rates page
   ============================================================ */
.rates-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; max-width: 640px; }
.rate-card {
  border-radius: 16px; padding: 34px 34px 30px;
  display: flex; flex-direction: column;
}
.rate-card--tint { background: #DCE9E9; }
.rate-card--panel { background: #FBFCFC; border: 1px solid rgba(46,125,140,.18); }
.rate-card .card-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 16px; color: #1A5A69; opacity: .8;
}
.rate-card h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 31px; line-height: 1.18; margin: 0 0 24px; color: #143246;
}
.rate-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid rgba(46,125,140,.22);
}
.rate-name { font-size: 15.5px; color: #3D5A64; }
.rate-price { font-size: 17px; font-weight: 500; color: #143246; font-variant-numeric: tabular-nums; }
.rate-sub {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 22px; color: #143246; margin: 26px 0 6px;
}
.rate-emdr { font-size: 14.5px; line-height: 1.65; color: #4E6B75; margin: 0 0 4px; }
.rate-small { font-size: 14.5px; line-height: 1.65; color: #4E6B75; margin: 18px 0 0; }
.rate-note { font-size: 14.5px; line-height: 1.7; color: #37545F; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(46,125,140,.22); }
.rate-card--panel .rate-note { border-top-color: rgba(46,125,140,.18); margin-top: 20px; }
.check-list { display: flex; flex-direction: column; flex: 1; }
.check-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid rgba(46,125,140,.18);
}
.check-item .tick { color: #2E7D8C; font-size: 15px; }
.check-item span:last-child { font-size: 15.5px; line-height: 1.6; color: #3D5A64; }

/* ============================================================
   FAQ page (native details)
   ============================================================ */
.faq-list { border-top: 1px solid rgba(46,125,140,.16); }
.faq-list details { border-bottom: 1px solid rgba(46,125,140,.16); }
.faq-list summary {
  padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; color: #143246;
  transition: color .18s ease;
}
.faq-list summary:hover { color: #1A5A69; }
.faq-sign { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px;
  background: #1A5A69; transform: translateY(-50%);
}
.faq-sign::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform .3s ease, opacity .3s ease;
}
details[open] .faq-sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq-list details p {
  margin: 0; padding: 0 60px 24px 4px;
  font-size: 15.5px; line-height: 1.7; color: #3D5A64; text-wrap: pretty;
}
details[open] p { animation: floatIn .35s ease both; }
.faq-list p a { border-bottom: 1px solid rgba(46,125,140,.35); }
.faq-cta { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-band { background: #E6EDEC; }
.contact-grid {
  max-width: 1180px; margin: 0 auto; padding: 62px 32px 90px;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start;
}
.contact-left .eyebrow { margin-bottom: 18px; }
.contact-left .page-title { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; letter-spacing: 0; margin-bottom: 18px; }
.contact-lead { font-size: 16.5px; line-height: 1.68; color: #3D5A64; margin: 0 0 26px; max-width: 42ch; text-wrap: pretty; }
.contact-links { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; align-items: flex-start; }
.fine-print {
  font-size: 12.5px; line-height: 1.65; color: #4E6B75; max-width: 38ch;
  border-top: 1px solid rgba(46,125,140,.2); padding-top: 16px;
}
.form-card {
  background: #FBFCFC; border: 1px solid rgba(46,125,140,.14);
  border-radius: 18px; padding: 38px 38px 34px;
  box-shadow: 0 24px 64px -34px rgba(20,50,70,.35);
}
.f-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.f-grid2 + .f-grid2, .f-block { margin-top: 20px; }
/* <label> is inline by default, so the .f-block top margin below would be
   dropped and the field would collide with whatever sits above it. */
.f-field { display: block; }
.f-label {
  display: block; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: #4E6B75; margin-bottom: 8px;
}
.f-label--chips { margin-bottom: 9px; }
.input {
  width: 100%; font-size: 15px; color: #143246; background: #fff;
  border: 1px solid rgba(46,125,140,.3); border-radius: 9px; padding: 13px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus {
  outline: none; border-color: #1A5A69;
  box-shadow: 0 0 0 3px rgba(143,195,201,.35);
}
textarea.input { line-height: 1.6; resize: vertical; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  cursor: pointer; font-size: 13.5px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(46,125,140,.3); background: #fff; color: #28505F;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.chip.selected { background: #1A5A69; border-color: #1A5A69; color: #F1F4F3; }
.check-row { display: flex; gap: 11px; align-items: flex-start; margin-top: 24px; cursor: pointer; }
.check-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: #1A5A69; flex-shrink: 0; }
.check-row span { font-size: 13px; line-height: 1.6; color: #4E6B75; }
.submit-btn {
  margin-top: 26px; width: 100%; cursor: pointer; border: 0;
  font-size: 15.5px; font-weight: 500; background: #143246; color: #F1F4F3;
  padding: 17px 28px; border-radius: 999px;
  transition: background .2s ease, opacity .2s ease;
}
.submit-btn:hover { background: #1A5A69; }
.submit-btn[disabled] { opacity: .7; cursor: default; }
.submit-note { margin-top: 13px; text-align: center; font-size: 12.5px; color: #4E6B75; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-err { display: none; font-size: 12.5px; color: #A03B2E; margin-top: 7px; }
.invalid .f-err { display: block; }
.invalid .input { border-color: #A03B2E; }
.form-fail {
  display: none; margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: #A03B2E;
  background: rgba(160,59,46,.06); border: 1px solid rgba(160,59,46,.25);
  border-radius: 10px; padding: 12px 16px;
}
.form-fail.show { display: block; }
.form-fail a { color: #A03B2E; text-decoration: underline; }
.success-card {
  display: none; background: #FBFCFC; border: 1px solid rgba(46,125,140,.14);
  border-radius: 18px; padding: 56px 44px; text-align: center;
}
.success-card.show { display: block; animation: floatIn .45s ease both; }
.success-card svg { width: 84px; height: 84px; display: block; margin: 0 auto 22px; }
.success-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 33px;
  line-height: 1.15; color: #143246; margin-bottom: 12px;
}
.success-body { font-size: 15.5px; line-height: 1.7; color: #3D5A64; margin: 0 auto; max-width: 44ch; }

/* Contact: privacy / crisis policy cards */
.policies { max-width: 1180px; margin: 0 auto; padding: 0 32px 84px; }
.policies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.policy-card {
  background: #FBFCFC; border: 1px solid rgba(46,125,140,.16);
  border-radius: 16px; padding: 28px 30px;
}
.policy-card h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: 22px; line-height: 1.2; color: #143246; margin: 0 0 12px;
}
.policy-card p { font-size: 14px; line-height: 1.7; color: #4E6B75; margin: 0; text-wrap: pretty; }

/* FAQ: resources & support */
.resources { margin-top: 56px; border-top: 1px solid rgba(46,125,140,.16); padding-top: 36px; }
.resources h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: 28px; line-height: 1.15; color: #143246; margin: 0 0 8px;
}
.res-lead { font-size: 15px; line-height: 1.6; color: #4E6B75; margin: 0 0 24px; }
.res-group { margin-bottom: 24px; }
.res-group h3 {
  font-family: Outfit, system-ui, sans-serif; font-weight: 400;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #4E6B75; margin: 0 0 10px;
}
.res-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 15px; line-height: 1.6; color: #3D5A64;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: #143246; color: rgba(241,244,243,.62); }
.foot-grid {
  max-width: 1180px; margin: 0 auto; padding: 56px 32px 30px;
  display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.3fr; gap: 44px; align-items: start;
}
.foot-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.foot-lockup svg { width: 52px; height: 52px; display: block; flex-shrink: 0; }
.foot-name {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500; font-size: 22px; line-height: 1; color: #EAF3F3;
}
.foot-tag {
  display: block; font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: #8FC3C9; margin-top: 6px;
}
.foot-blurb { font-size: 13px; line-height: 1.7; color: rgba(241,244,243,.6); max-width: 30ch; }
.foot-col-label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #8FC3C9; margin-bottom: 16px;
}
.foot-links { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.foot-links a { color: rgba(241,244,243,.72); transition: color .18s ease; }
.foot-links a:hover { color: #8FC3C9; }
.crisis { font-size: 13px; line-height: 1.7; color: rgba(241,244,243,.72); margin-bottom: 8px; }
.crisis strong { color: #EAF3F3; font-weight: 500; }
.crisis-alt { font-size: 12.5px; line-height: 1.7; color: rgba(241,244,243,.5); }
.foot-bottom-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.foot-bottom {
  border-top: 1px solid rgba(234,243,243,.14); padding: 20px 0 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: rgba(241,244,243,.45);
}
.foot-bottom a { color: rgba(241,244,243,.45); transition: color .18s ease; }
.foot-bottom a:hover { color: #8FC3C9; }

/* ============================================================
   Custom cursor (dot + easing ring)
   ============================================================ */
/* Only hide the native cursor once site.js has confirmed it can draw its own —
   otherwise a JS failure leaves a desktop visitor with no pointer at all. */
@media (pointer: fine) {
  body.custom-cursor,
  body.custom-cursor a,
  body.custom-cursor button,
  body.custom-cursor [role="button"],
  body.custom-cursor summary { cursor: none; }
}
.cursor {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px;
  background: #F1F4F3; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .26s cubic-bezier(.2,.7,.2,1), height .26s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 36px; height: 36px;
  border: 1.5px solid #2E7D8C; border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%); opacity: .75;
  transition: width .3s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1),
              border-color .3s ease, background .3s ease, opacity .3s ease;
}
.cursor.expand { width: 4px; height: 4px; }
.cursor-ring.expand {
  width: 72px; height: 72px;
  border-color: #2E7D8C; background: rgba(143,195,201,.14); opacity: 1;
}
.cursor.hide, .cursor-ring.hide { opacity: 0; }
@media (pointer: coarse) { .cursor, .cursor-ring { display: none; } }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .cursor, .cursor-ring { display: none !important; }
  body { cursor: auto !important; }
  a, button, [role="button"], summary { cursor: pointer !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1440px) {
  .hero { gap: 52px; }
}
@media (max-width: 1120px) {
  .main-nav { gap: 18px; font-size: 12.5px; }
}
@media (max-width: 980px) {
  .main-nav { display: none; }
  .mob-nav { display: flex; flex-shrink: 0; }
  /* Footer + menu links need a real touch target once the pointer is a thumb. */
  .foot-links { gap: 2px; }
  .foot-links a { padding: 11px 0; }
  .contact-links { gap: 4px; }
  .contact-links a { padding: 7px 0; }
  .foot-bottom a { padding: 14px 0; }
  /* Underlined inline links can't take vertical padding without pushing the
     underline off the text, so the target is grown with an invisible overlay. */
  .text-link, .more-link, .es-strip a { position: relative; }
  .text-link::after, .more-link::after, .es-strip a::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
  /* Padding + matching negative margin: bigger hit area, same header height. */
  .lockup { padding: 5px 0; margin: -5px 0; }
  .hero, .about-grid, .es-grid, .contact-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .hero { padding-top: 40px; gap: 34px; }
  .hero-photo { order: -1; padding-top: 0; max-width: 420px; }
  .arch { border-radius: 200px 200px 16px 16px; }
  .door-grid, .approach-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rates-grid, .policies-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .es-points { border-left: 0; border-top: 1px solid rgba(241,244,243,.18); padding-left: 0; padding-top: 30px; }
  .about-photo-col { max-width: 420px; }
  .chip, .mob-cta { min-height: 44px; }
  .es-teaser-grid { grid-template-columns: 1fr; gap: 24px; }
  .doors-section { padding-top: 64px; }
}
/* phones: 16px inputs so iOS never zooms on focus */
@media (max-width: 760px) {
  input, textarea, select { font-size: 16px !important; }
  input, select { padding-top: 14px !important; padding-bottom: 14px !important; }
}
@media (max-width: 640px) {
  .wrap, .hero, .doors-section, .topics, .es-teaser-grid, .cta-close,
  .approach-inner, .es-grid, .es-second, .contact-grid, .foot-grid, .policies,
  .foot-bottom-wrap, .headbar { padding-left: 20px !important; padding-right: 20px !important; }
  /* Audience cards hold their two columns down to phone width, so a tablet
     doesn't get one lone column while every other card grid stays paired. */
  .door-grid, .approach-cards, .aud-grid, .f-grid2 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
  .topic-chip { padding: 12px 17px; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
  .hero h1 { font-size: clamp(36px, 10vw, 46px); }
  .page-title { font-size: clamp(32px, 8.5vw, 44px); }
  /* position:relative (not static) so the card paints ABOVE the arch photo —
     .arch is positioned, so a static sibling ends up underneath it and the
     card's title gets swallowed by the bottom of the image. */
  .float-card {
    position: relative; z-index: 2; left: auto; bottom: auto;
    margin-top: -28px; width: auto; max-width: none;
    box-shadow: 0 14px 40px -18px rgba(20,50,70,.25);
  }
  .hero-photo { max-width: 330px; margin-left: auto; margin-right: auto; }
  .about-photo-col { max-width: none; }
  .btn-primary, .submit-btn, .mob-cta, .btn-light { min-height: 48px; }
  .band-img { border-radius: 14px; }
  .faq-list details p { padding-right: 20px; }
  .trust-row { gap: 6px 18px; }
  footer { padding-bottom: env(safe-area-inset-bottom); }

  /* Roomier cards: 30–38px of side padding on a 320px screen leaves almost
     nothing for the content itself. */
  .form-card { padding: 26px 20px 28px; border-radius: 16px; }
  .success-card { padding: 40px 22px; }
  .success-card svg { width: 68px; height: 68px; }
  .topics-panel { padding: 26px 22px 28px; }
  .aud-card { padding: 26px 22px 24px; }
  .rate-card { padding: 26px 22px 24px; }
  .policy-card { padding: 24px 22px; }
  .a-card { padding: 22px 22px 24px; }
  .door-body { padding: 24px 22px; }
  .es-strip { padding: 22px 24px; }

  /* Smallest labels get a nudge up — 9–10px uppercase is rough on a phone. */
  .foot-tag { font-size: 10px; letter-spacing: .22em; }
  .foot-col-label { font-size: 11px; }
  .cred-label { font-size: 11px; }
  .f-label { font-size: 11.5px; }
  .eyebrow, .card-eyebrow, .es-strip-sub { font-size: 12px; }
  .check-row input { width: 20px; height: 20px; }
}

/* ------------------------------------------------------------
   Phone header. At the shipped sizes the lockup + CTA + menu
   button don't fit a phone: "Let's talk" / "Hablemos" wrapped to
   two lines, "LMFT · Therapy" wrapped, the bar grew to ~100–145px
   tall, and on a 320px screen the menu button ran off the edge.
   Everything below exists to keep it on one line.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .headbar { padding: 12px 20px; gap: 12px; }
  .lockup { gap: 10px; min-width: 0; }
  .lockup svg { width: 36px; height: 36px; }
  .lockup-text { padding-left: 11px; }
  .lockup-name { font-size: 19px; white-space: nowrap; }
  .lockup-tag { font-size: 9px; letter-spacing: .2em; margin-top: 4px; white-space: nowrap; }
  .mob-nav { gap: 10px; }
  .mob-cta { white-space: nowrap; padding: 12px 16px; }
  .menu-btn { width: 42px; height: 42px; }
  .mobile-menu { padding: 8px 20px 20px; }
}
@media (max-width: 400px) {
  .headbar { padding: 10px 16px; gap: 8px; }
  .lockup { gap: 9px; }
  .lockup svg { width: 32px; height: 32px; }
  .lockup-text { border-left: 0; padding-left: 0; }
  .lockup-name { font-size: 17.5px; }
  .lockup-tag { font-size: 8px; letter-spacing: .15em; margin-top: 3px; }
  .mob-cta { padding: 12px 14px; font-size: 12.5px; }
  .menu-btn { width: 40px; height: 40px; }
  .mobile-menu { padding: 8px 16px 18px; }
}

/* Phone in landscape: a 72px sticky bar plus 40–62px of section padding
   eats most of a 390px-tall viewport. */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  .headbar { padding-top: 8px; padding-bottom: 8px; }
  .hero { padding-top: 26px; }
  .page-head { padding-top: 34px; }
  .approach-inner, .contact-grid, .es-grid { padding-top: 34px; }
}

/* ============================================================
   One-page flow (Sep 2026): quote band + "who I help" letter
   ============================================================ */
.quote-band { margin-top: 84px; background: #143246; padding: 76px 32px; text-align: center; }
.quote-band blockquote {
  margin: 0 auto; max-width: 30ch; color: #F1F4F3;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(27px, 3.1vw, 40px); line-height: 1.3; text-wrap: balance;
}
.quote-band blockquote::before, .quote-band blockquote::after { color: #8FC3C9; }
.quote-band blockquote::before { content: "\201C"; }
.quote-band blockquote::after { content: "\201D"; }
.who-section { padding-top: 84px; }
.who-title { max-width: 26ch; }
.who-lead { max-width: 44ch; margin-bottom: 34px; }
.letter { max-width: 64ch; margin: 0 0 56px; padding-left: 26px; border-left: 2px solid #8FC3C9; }
.letter p { font-size: 16.5px; line-height: 1.8; color: #3D5A64; margin: 0 0 20px; text-wrap: pretty; }
.letter .letter-close {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; line-height: 1.45;
  color: #143246; margin: 30px 0 0;
}
.cards-label { font-weight: 400; margin: 0 0 20px; }
#rates .page-title, #faq .page-title { margin-top: 0; }
@media (max-width: 640px) {
  .quote-band { margin-top: 56px; padding: 56px 16px; }
  .who-section { padding-top: 56px; }
  .letter { padding-left: 18px; }
}

/* ============================================================
   Design system pass (Sep 2026, one-page)
   One spacing rhythm, one card system, one button system,
   plus the playful layer: wavy section edges, wave eyebrows,
   squiggle underlines, a sticker, gentle hover motion.
   ============================================================ */
:root { --sec: 104px; --gutter: 32px; --radius: 20px; --sand: #F6E7D4; }

/* ---- Section rhythm ---- */
.page-head { padding-top: var(--sec); }
.quote-band { margin-top: var(--sec); }
#who-i-help, #a-quien-acompano { padding-top: var(--sec); }
.who-section + .topics, .topics { padding-top: 32px; padding-bottom: var(--sec); }
.approach-inner { padding: var(--sec) var(--gutter); }
.approach-page { border-bottom: 0; }
#about .about-grid { align-items: start; }
#faq, #preguntas { max-width: 1180px; padding-bottom: var(--sec); }
.faq-list, .faq-cta, .resources { max-width: 860px; }
.es-teaser { margin-top: 0; }
.es-teaser-grid { padding: 72px var(--gutter); }
.contact-grid { padding: var(--sec) var(--gutter) 72px; }
.policies { padding-bottom: var(--sec); }

/* ---- Section headings: eyebrow + title + squiggle, same everywhere ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px !important; }
.eyebrow::before {
  content: ""; width: 24px; height: 10px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 20'%3E%3Cpath d='M2 6q5.5-5 11 0t11 0 11 0 11 0' fill='none' stroke='%232e7d8c' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M2 14q5.5-5 11 0t11 0 11 0 11 0' fill='none' stroke='%238fc3c9' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.es-teaser .eyebrow::before, .quote-band .eyebrow::before { filter: brightness(1.6); }
.page-title { margin-bottom: 20px; }
.page-title::after {
  content: ""; display: block; width: 72px; height: 10px; margin-top: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M2 5q4.25-4 8.5 0t8.5 0 8.5 0 8.5 0 8.5 0 8.5 0 8.5 0 8.5 0' fill='none' stroke='%235da3ab' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
.approach-head .page-title::after { margin-left: auto; margin-right: auto; }
.approach-head { padding-bottom: 48px; }
.who-title { max-width: 24ch; }
.rule {
  height: 10px; width: 216px; opacity: 1; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath d='M0 5q4.5-4 9 0t9 0 9 0 9 0' fill='none' stroke='%235da3ab' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 36px 10px;
}

/* ---- Wavy edges on the colored bands ---- */
.quote-band, .approach-page, .contact-band, .es-teaser { position: relative; }
.quote-band::before, .approach-page::before, .contact-band::before, .es-teaser::before,
.quote-band::after, .approach-page::after, .contact-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 20px; z-index: 2;
  pointer-events: none; background-repeat: repeat-x; background-size: 160px 20px;
}
.quote-band::before, .approach-page::before, .contact-band::before, .es-teaser::before { top: -19px; }
.quote-band::after, .approach-page::after, .contact-band::after { bottom: -19px; }
.quote-band::before, .es-teaser::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C20 0 60 0 80 10S140 20 160 10V20Z' fill='%23143246'/%3E%3C/svg%3E");
}
.quote-band::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0V10C20 20 60 20 80 10S140 0 160 10V0Z' fill='%23143246'/%3E%3C/svg%3E");
}
.approach-page::before, .contact-band::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C20 0 60 0 80 10S140 20 160 10V20Z' fill='%23E6EDEC'/%3E%3C/svg%3E");
}
.approach-page::after, .contact-band::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0V10C20 20 60 20 80 10S140 0 160 10V0Z' fill='%23E6EDEC'/%3E%3C/svg%3E");
}
/* Quote band: slow drifting swell behind the words */
.quote-band {
  padding: 88px var(--gutter);
  background-color: #143246;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 20q30-14 60 0t60 0 60 0 60 0' fill='none' stroke='%238fc3c9' stroke-opacity='.10' stroke-width='2'/%3E%3Cpath d='M0 44q30-14 60 0t60 0 60 0 60 0' fill='none' stroke='%235da3ab' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 240px 60px;
  animation: swell 26s linear infinite;
}
@keyframes swell { from { background-position: 0 0; } to { background-position: 240px 0; } }

/* ---- One card system ---- */
.aud-card, .rate-card, .topics-panel, .policy-card, .a-card, .form-card, .success-card { border-radius: var(--radius); }
.aud-card, .rate-card, .topics-panel, .policy-card { padding: 32px; }
.a-card { padding: 28px; }
.form-card { padding: 36px; }
.aud-grid, .approach-cards, .policies-grid, .rates-grid { gap: 24px; }
.aud-card h2, .rate-card h2 { font-size: 26px; line-height: 1.2; margin: 0 0 12px; }
.a-card h2, .policy-card h2 { font-size: 24px; line-height: 1.2; margin: 16px 0 10px; }
.policy-card h2 { margin-top: 0; }
.aud-card p, .a-card p, .rate-body, .rate-emdr, .policy-card p, .faq-list details p {
  font-size: 15.5px; line-height: 1.7; color: #3D5A64;
}
.rate-card h2 { margin-bottom: 16px; }
.rate-body { margin: 0; text-wrap: pretty; }
.rates-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: none; align-items: stretch; }
.rate-card { position: relative; }
.card-cta { margin-top: auto; padding-top: 28px; }
/* Approach cards: three soft tints so a row of six has a rhythm */
.a-card { background: #FBFCFC; border-color: rgba(46,125,140,.2); }
.a-card:nth-child(3n+2) { background: #DCE9E9; }
.a-card:nth-child(3n) { background: #EEF4F3; }
.a-card:hover { transform: translateY(-4px) rotate(-.4deg); background: #fff; }
.a-card:hover svg { animation: bob 1.2s ease-in-out infinite; }
.aud-card:hover { transform: translateY(-4px) rotate(.3deg); }
@keyframes bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
/* Topic chips wobble a little, alternately */
.topic-chip { transition: transform .22s ease, background .22s ease, border-color .22s ease; }
.topic-chip:hover { background: #DCE9E9; border-color: rgba(46,125,140,.4); transform: translateY(-2px) rotate(-2deg); }
.topic-chip:nth-child(even):hover { transform: translateY(-2px) rotate(2deg); }
/* Sticker on the rate card */
.sticker {
  position: absolute; top: -14px; right: 24px; transform: rotate(5deg);
  background: var(--sand); color: #143246; border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(20,50,70,.35); transition: transform .25s ease;
}
.rate-card:hover .sticker { transform: rotate(-3deg) scale(1.04); }

/* ---- One button system ---- */
.btn-primary, .btn-primary--sm, .btn-light, .submit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; font-size: 15px; font-weight: 500; line-height: 1.2;
  border-radius: 999px; box-shadow: none; text-align: center;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover, .btn-light:hover, .submit-btn:hover:not([disabled]) {
  transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(20,50,70,.55);
}
.submit-btn { display: flex; width: 100%; }
.cta-row { gap: 24px; }

/* ---- Who I help: letter (+ photo when ?photos) ---- */
.letter { max-width: 62ch; }
.who-lead { max-width: 44ch; }

/* ---- Photo placeholders: only with ?photos in the URL ---- */
.photo-slot, .photo-band, .photo-pair { display: none; }
html.show-photos .photo-slot { display: block; }
html.show-photos .photo-band { display: block; }
html.show-photos .photo-pair { display: grid; }
html.show-photos .who-row {
  display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 64px; align-items: start;
}
html.show-photos .who-row .photo-slot { position: sticky; top: 112px; }
.photo-band { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) var(--sec); }
.photo-pair { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; margin-top: 48px; }
.photo-slot {
  margin: 0; background: #FBFCFC; padding: 12px 12px 16px; border-radius: var(--radius);
  box-shadow: 0 20px 48px -26px rgba(20,50,70,.4); transform: rotate(-1.5deg);
  transition: transform .3s ease;
}
.photo-slot--wide + .photo-slot--wide, .photo-slot--square { transform: rotate(1.5deg); }
.photo-slot--band { transform: rotate(-.4deg); }
.photo-slot:hover { transform: rotate(0) translateY(-3px); }
.ps-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 28px 24px; border-radius: 12px;
  border: 2px dashed rgba(46,125,140,.4); background: #DCE9E9;
}
.photo-slot--tall .ps-inner { aspect-ratio: 4/5; }
.photo-slot--band .ps-inner { aspect-ratio: 21/9; }
.photo-slot--wide .ps-inner { aspect-ratio: 4/3; }
.photo-slot--square { max-width: 300px; margin-bottom: 28px; }
.photo-slot--square .ps-inner { aspect-ratio: 1/1; padding: 20px; }
.ps-inner svg { width: 44px; height: auto; overflow: visible; }
.ps-tag {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #1A5A69;
  background: var(--sand); border-radius: 999px; padding: 5px 11px;
}
.ps-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 23px; line-height: 1.2; color: #143246; }
.ps-rec { font-size: 14px; line-height: 1.6; color: #3D5A64; max-width: 44ch; text-wrap: pretty; }
.ps-spec { font-size: 12px; letter-spacing: .08em; color: #4E6B75; }

@media (max-width: 980px) {
  :root { --sec: 84px; }
  html.show-photos .who-row { grid-template-columns: 1fr; gap: 8px; }
  html.show-photos .who-row .photo-slot { position: static; max-width: 420px; }
  .rates-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  :root { --sec: 64px; --gutter: 20px; }
  .quote-band { padding: 64px var(--gutter); }
  .aud-card, .rate-card, .topics-panel, .policy-card { padding: 26px 22px; }
  .a-card { padding: 24px 22px; }
  .form-card { padding: 26px 20px 28px; }
  .photo-band { padding-left: 20px; padding-right: 20px; }
  .photo-pair { grid-template-columns: 1fr; gap: 24px; }
  .photo-slot--band .ps-inner { aspect-ratio: 4/3; }
  .btn-primary, .btn-light { width: 100%; }
  .cta-row .text-link { margin: 0 auto; }
  .foot-cta .btn-primary, .card-cta .btn-primary { width: 100%; }
  .sticker { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-band, .a-card:hover svg { animation: none !important; }
  .a-card:hover, .aud-card:hover, .topic-chip:hover, .photo-slot:hover,
  .btn-primary:hover, .btn-light:hover, .submit-btn:hover { transform: none !important; }
}