/* Next Level Counseling — site styles.
   Mobile-first (< 768px = Mobile Concept), tablet 768–1023, desktop ≥ 1024px (Desktop Concept).
   Values come from the inline styles in the approved concept files. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/libre-baskerville-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/libre-baskerville-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/libre-baskerville-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --navy: #1c3a5e; --navy-deep: #10314f; --navy-hover: #16304e;
  --teal: #2f7d6d; --teal-hover: #27695c;
  --mint: #8fd3c2; --mint-bright: #6fcfbc;
  --mint-tint: #eef6f3; --mint-border: #d3e5df; --mint-rule: #cfe0d9;
  --cream: #f2efe8; --cream-card: #f8f7f3;
  --border: #e6e2d8; --border-input: #dcd7cb; --border-outline: #cfd8e2;
  --text: #33465d; --text-2: #55677d; --text-meta: #637287; /* one shade darker for readability (Carlos, 2026-10-14, A6; was #7c8a9b) */ --text-placeholder: #96a2b0;
  --on-navy: #b9d8d0; --on-navy-muted: #8fa6bd;
  --required: #b4553f;
  --serif: 'Libre Baskerville', 'Baskerville', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-card: 18px; --radius-btn: 14px; --radius-video: 20px;
  --header-h: 66px;
  --shade-video: rgba(15,39,64,0.24);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #fff; }
body { margin: 0; font-family: var(--sans); color: var(--navy); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, picture, svg, video { max-width: 100%; display: block; }
picture { display: contents; }
a { color: var(--navy); }
a:hover { color: var(--teal); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--navy); color: #fff; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Cross-document page transitions (View Transitions API; degrades to a normal navigation).
   A plain, even cross-fade: the old page fades out exactly as the new one fades in (same length,
   same easing, plus-lighter blending), so there is no dip, no flash, and no movement. The header is
   deliberately NOT given its own view-transition-name — morphing it separately looked like a flicker. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 280ms ease both; }
  ::view-transition-new(root) { animation: vt-in 280ms ease both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; } }
}

.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 20px; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); font-weight: 700; font-family: var(--sans); }
.rule { width: 40px; height: 2px; background: var(--mint-rule); margin: 0 auto 14px; }
.rule--left { margin: 0 0 10px; }
.dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--teal); }
.link-teal, .blurb__more, .featured__all, .related__all { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.link-teal { font-size: 16px; font-weight: 700; color: var(--teal); text-decoration: none; }
.link-teal:hover { color: var(--teal-hover); }
.pill-lic { padding: 5px 11px; border-radius: 999px; background: var(--mint-tint); color: var(--teal); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.icon { flex: 0 0 auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; height: 54px; padding: 0 26px; border-radius: var(--radius-btn); background: var(--teal); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: background 180ms ease, color 180ms ease; }
.btn:hover { background: var(--teal-hover); color: #fff; }
.btn--lg { height: 54px; }
.btn--xl { height: 56px; }
.btn--md { height: 52px; font-size: 16.5px; font-weight: 600; }
.btn--pill { height: 46px; padding: 0 14px; font-size: 15.5px; }
.btn--outline { background: transparent; border: 1.5px solid var(--border-outline); color: var(--navy); font-weight: 600; }
.btn--outline:hover { background: var(--cream-card); color: var(--navy); }
.btn--navy { background: var(--navy); }
.btn--navy:hover { background: var(--navy-hover); }
.btn--mint { background: var(--mint-bright); color: var(--navy-deep); }
.btn--mint:hover { background: var(--mint); color: var(--navy-deep); }
.btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.3); color: #fff; font-weight: 600; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
.btn--glass { background: transparent; border: 1.5px solid rgba(255,255,255,0.55); color: #fff; font-weight: 600; }
.btn--glass:hover { background: rgba(255,255,255,0.12); }
.btn__tri { font-size: 13px; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.header__inner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo__img { height: 48px; width: auto; }
.logo__light { display: none; }
.nav { display: none; }
.header__cta { flex: 0 0 auto; margin-left: auto; }
.burger { width: 46px; height: 46px; border-radius: 14px; background: var(--navy); border: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; flex: 0 0 auto; cursor: pointer; padding: 0; }
.burger span { width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.burger:hover { background: var(--navy-hover); }

/* Mobile menu */
.menu { position: fixed; inset: 0; z-index: 100; background: var(--navy); color: #fff; overflow: auto; opacity: 0; transition: opacity 220ms ease; }
.menu.is-open { opacity: 1; }
.menu__panel { min-height: 100%; display: flex; flex-direction: column; transform: translateY(-12px); transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu.is-open .menu__panel { transform: none; }
/* Opening: fade in + slide down a touch; closing: the reverse (site.js waits for the fade before hiding). "Reduce motion" users get the instant version via the global rule above. */
.menu__top { padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 18px; display: flex; align-items: center; gap: 12px; }
.menu__logo { width: 147px; height: 46px; object-fit: contain; object-position: left center; }
.menu__close { margin-left: auto; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,0.12); border: 0; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.menu__close:hover { background: rgba(255,255,255,0.2); }
.menu__links { flex: 1; padding: 8px 20px 0; display: flex; flex-direction: column; }
.menu__link { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.14); font-family: var(--serif); font-size: 21px; color: #fff; text-decoration: none; }
.menu__link[aria-current="page"] { color: var(--mint); }
.menu__link:hover { color: var(--mint); }
.menu__link--portal { color: var(--mint); }
.menu__actions { padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.menu__actions .btn { height: 50px; }
body.menu-open { overflow: hidden; }

/* ---------- Home: hero ---------- */
.hero { padding: 26px 20px 24px; background: linear-gradient(180deg, var(--mint-tint) 0%, #fff 100%); text-align: center; }
.hero__media { display: none; }
.hero__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; margin: 0 0 10px; text-wrap: pretty; }
.hero__name { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.hero__tagline { font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--text-2); margin: 0 0 20px; }
.hero__actions { display: flex; flex-direction: column; gap: 14px; }
.hero__book { width: 100%; }
.hero__watch { display: none; }

/* Topic chips */
.topics .wrap { padding-inline: 16px; }
.chips { display: flex; gap: 8px; justify-content: center; padding: 2px 0 14px; }
.chip { flex: 1 1 0; min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 6px; border-radius: 999px; background: var(--cream); color: var(--navy); border: 1.5px solid var(--border); font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.chip:hover { border-color: var(--teal); }
.chip[aria-selected="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }
.blurb { margin: 0 4px 22px; padding: 15px 17px 16px; border-radius: 16px; background: var(--mint-tint); border: 1px solid var(--mint-border); }
.blurb p { font-size: 15.5px; line-height: 1.58; color: var(--text); }
.blurb__more { margin-top: -2px; margin-bottom: -12px; font-size: 15.5px; font-weight: 700; color: var(--teal); text-decoration: none; }

/* Welcome copy */
.welcome .wrap { padding: 0 20px 28px; }
.welcome p { font-size: 16.5px; line-height: 1.62; color: var(--text); }
.welcome__eyebrow { display: block; margin-bottom: 10px; } /* shown on phones too (Carlos, 2026-10-02) */
.welcome__more { display: none; }
.welcome__more p { margin-top: 14px; }
.welcome.is-open .welcome__more { display: block; }
.welcome__toggle { margin-top: 14px; font-size: 16px; font-weight: 700; color: var(--teal); background: none; border: 0; padding: 0; min-height: 44px; display: flex; align-items: center; cursor: pointer; }

/* Video poster */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0f2740; }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video__poster img { width: 100%; height: 100%; object-fit: cover; }
.video__shade { position: absolute; inset: 0; background: rgba(15,39,64,0.22); display: flex; align-items: center; justify-content: center; }
.play { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; color: var(--teal); transition: transform 160ms ease; }
.play__tri { width: 19px; height: 24px; margin-left: 4px; }
.video__poster:hover .play { transform: scale(1.05); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-wrap { padding: 0 20px 26px; scroll-margin-top: calc(var(--header-h) + 16px); }

/* Quote band */
.quote-band { margin: 0 20px 30px; padding: 24px 22px; border-radius: 18px; background: var(--navy); color: #fff; }
.quote-band__text { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; margin: 0 0 12px; }
.quote-band__by { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }

/* Meet your counselor */
.meet { padding: 0 20px 30px; }
.meet__text .eyebrow { margin-bottom: 12px; }
.meet__grid { display: flex; flex-direction: column; }
.meet__media { order: 2; }
.meet__text { display: contents; }
.meet__text .eyebrow { order: 1; }
.meet__h2 { order: 3; font-size: 24px; margin: 16px 0 6px; }
.meet__cred { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.meet__cred span:first-child { font-size: 15.5px; line-height: 1.4; color: var(--text-2); }
.meet__cred--mobile { order: 4; margin: 0 0 18px; }
.meet__cred--desktop { display: none; }
.rows { order: 5; border-top: 1px solid var(--border); }
.meet__photo { width: 100%; height: 260px; object-fit: cover; object-position: 50% 25%; border-radius: 16px; }
.row { border-bottom: 1px solid var(--border); }
.row__h { margin: 0; font-family: var(--sans); font-weight: 600; }
.row__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 14px 0; font-size: 16.5px; font-weight: 600; color: var(--navy); background: none; border: 0; text-align: left; cursor: pointer; }
.row__btn:hover { color: var(--teal); }
.row__sign { color: var(--teal); font-size: 22px; line-height: 1; }
.entries { margin: 2px 0 18px; display: flex; flex-direction: column; gap: 14px; }
.entries li { display: flex; gap: 11px; align-items: flex-start; }
.entry__title { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.entry__sub { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.tiles { margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 10px; border-radius: 12px; background: var(--cream); color: var(--text); border: 1.5px solid var(--border); font-size: 14.5px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.tile:hover { border-color: var(--teal); }
.tile[aria-selected="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }
.tile-blurb { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--mint-tint); border: 1px solid var(--mint-border); font-size: 15.5px; line-height: 1.58; color: var(--text); }
.meet__video { margin-top: 22px; }

/* Two ways to meet */
.ways { padding: 0 20px 30px; display: flex; flex-direction: column; gap: 16px; }
.card { border-radius: 18px; background: var(--cream-card); border: 1px solid var(--border); padding: 18px; }
.card__h3 { font-size: 21px; margin: 0 0 6px; }
.card__p { font-size: 15.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 10px; }
.card__addr { font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--text); margin: 0 0 12px; }

/* Article cards / rows */
.post-card { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform 200ms ease, box-shadow 200ms ease; }
.post-card__img { flex: 0 0 auto; width: 96px; height: 74px; border-radius: 12px; object-fit: cover; background: var(--border); }
.post-card__body { flex: 1; min-width: 0; }
.post-card__title { font-size: 17.5px; line-height: 1.3; margin: 0 0 6px; text-wrap: pretty; }
.post-card__meta { font-size: 13.5px; color: var(--text-meta); }
.post-card:hover .post-card__title { color: var(--teal); }

/* Featured articles (home) */
.featured { padding: 0 0 30px; }
.featured__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; }
.featured__all { font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.featured__all-desktop { display: none; }
.featured__scroller { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; scroll-padding-right: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.featured__scroller::-webkit-scrollbar { display: none; }
.featured__grid { display: flex; gap: 14px; padding: 4px 20px 8px; }
.post-card--featured { flex: 0 0 240px; scroll-snap-align: start; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #fff; text-decoration: none; color: inherit; display: block; padding: 0; }
.post-card--featured .post-card__img { width: 100%; height: 130px; object-fit: cover; border-radius: 0; }
.post-card--featured .post-card__body { padding: 14px 14px 16px; }

/* CTA */
.cta { padding: 32px 20px 36px; background: var(--cream-card); border-top: 1px solid var(--border); }
.cta__h2 { font-size: 26px; margin: 0 0 10px; text-align: center; }
.cta__p { max-width: 306px; margin: 0 auto 22px; text-align: center; text-wrap: balance; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.cta .btn { width: 100%; }

/* Hero video modal */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15,32,52,0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 280ms ease; }
.modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 1060px; opacity: 0; transform: translateY(14px) scale(0.975); transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__still { position: absolute; inset: 0; width: 100%; height: 100%; }
.modal__still img { width: 100%; height: 100%; object-fit: cover; }
.modal__player iframe { opacity: 0; transition: opacity 400ms ease; }
.modal__player.is-ready iframe { opacity: 1; }
.modal__player::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: modal-spin 0.9s linear infinite; }
.modal__player.is-ready::after { display: none; }
@keyframes modal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .modal__backdrop, .modal__dialog, .modal__player iframe { transition: none; } .modal__player::after { animation: none; } }
.modal__bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.modal__close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.modal__close:hover { background: rgba(255,255,255,0.26); }
.modal__player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-video); overflow: hidden; background: #0f2740; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7); }
.modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.modal-open { overflow: hidden; }

/* "Thanks for reaching out" pop-up after the contact form is sent (Carlos, 2026-10-06) */
.sentpop { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sentpop__backdrop { position: absolute; inset: 0; background: rgba(15,39,64,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 220ms ease; }
.sentpop__card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 34px 26px 30px; text-align: center; box-shadow: 0 30px 80px -30px rgba(15,39,64,0.6); opacity: 0; transform: translateY(14px) scale(0.975); transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1); outline: none; }
.sentpop.is-open .sentpop__backdrop { opacity: 1; }
.sentpop.is-open .sentpop__card { opacity: 1; transform: none; }
.sentpop__check { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; transform: scale(0.6); opacity: 0; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms, opacity 200ms ease 120ms; }
.sentpop.is-open .sentpop__check { transform: none; opacity: 1; }
.sentpop__h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--navy); margin: 0 0 10px; }
.sentpop__p { font-size: 16.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 22px; }
.sentpop__btn { width: 100%; height: 50px; }
@media (prefers-reduced-motion: reduce) { .sentpop__backdrop, .sentpop__card, .sentpop__check { transition: none; } }
body.sentpop-open { overflow: hidden; }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: #fff; padding: 28px 20px 42px; }
.footer__inner { display: flex; flex-direction: column; gap: 12px; }
.footer__col--about { display: flex; flex-direction: column; gap: 12px; }
.footer__name { font-family: var(--serif); font-size: 19px; }
.footer__tagline { display: none; }
.ftiles--desktop { display: none; }
.ftiles--mobile { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ftile { border-radius: 14px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); color: #fff; text-decoration: none; transition: background 160ms ease; }
.ftile:hover { background: rgba(255,255,255,0.16); color: #fff; }
.ftile .icon { color: var(--mint); }
.ftile--m { min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 14px; font-weight: 600; }
.finfo__toggle { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.28); background: none; font-size: 15.5px; font-weight: 600; color: #fff; cursor: pointer; }
.finfo__caret { color: var(--mint); font-size: 15px; }
.finfo__body { display: flex; flex-direction: column; gap: 10px; padding: 12px 2px 2px; }
.finfo__body a { font-size: 15.5px; line-height: 1.5; color: var(--on-navy); text-decoration: none; }
.finfo__body a:hover { color: #fff; }
.footer__quick { display: flex; flex-direction: column; margin-top: 2px; border-top: 1px solid rgba(255,255,255,0.14); }
.footer__quick a { display: flex; align-items: center; min-height: 46px; font-size: 15.5px; font-weight: 600; color: var(--on-navy); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer__quick a:hover { color: #fff; }
.footer__mlinks { display: flex; align-items: center; gap: 18px; }
.footer__mlinks a { font-size: 15.5px; font-weight: 600; color: var(--mint); text-decoration: none; }
.footer__mlinks a:hover { color: #fff; }
.footer__col--links { display: none; }

/* ---------- Interior page hero ---------- */
.phero__media { position: relative; }
.phero__img { width: 100%; height: 170px; object-fit: cover; }
.phero__shade { display: none; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,32,52,0.66) 0%, rgba(15,32,52,0.58) 50%, rgba(15,32,52,0.70) 100%); }
.phero__text { padding: 24px 20px 0; }
.phero__eyebrow { margin-bottom: 10px; }
.phero__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; text-wrap: pretty; margin: 0; }
.text-col p { font-size: 16.5px; line-height: 1.62; color: var(--text); }
.text-col p + p { margin-top: 14px; }
.cta-band { display: none; }

/* My approach */
.approach__intro { padding: 14px 20px 22px; }
.approach__intro p { display: block; font-size: 16.5px; line-height: 1.62; color: var(--text); }
.approach__intro p.approach__lead { font-family: var(--serif); font-size: 22px; line-height: 1.4; color: var(--navy); margin: 0 0 12px; text-wrap: pretty; }
.navy-band { margin: 0 20px 26px; padding: 22px; border-radius: 18px; background: var(--navy); color: #fff; }
.navy-band__text { font-family: var(--serif); font-size: 20px; line-height: 1.45; }
.navy-band__sub { margin-top: 14px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.86); }
.principles { padding: 0 20px 26px; }
.principles__grid { display: flex; flex-direction: column; gap: 22px; }
.principle__num { width: 38px; height: 38px; border-radius: 11px; background: var(--mint-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 18px; margin-bottom: 12px; }
.principle__h2 { font-size: 24px; margin: 0 0 8px; }
.principle__p { font-size: 16.5px; line-height: 1.62; color: var(--text); }
.photo-quote { position: relative; margin: 0 0 26px; min-height: 260px; display: flex; align-items: center; justify-content: center; }
.photo-quote__media { position: absolute; inset: 0; }
.photo-quote__img { width: 100%; height: 100%; object-fit: cover; }
.photo-quote__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,32,52,0.52) 0%, rgba(15,32,52,0.38) 50%, rgba(15,32,52,0.58) 100%); }
.photo-quote__text { position: relative; z-index: 2; padding: 40px 26px; text-align: center; color: #fff; }
.photo-quote__q { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 23px; line-height: 1.42; margin: 0 0 12px; text-shadow: 0 2px 20px rgba(10,24,40,0.3); }
.photo-quote__by { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); font-weight: 700; }
.closing { margin: 0 20px 26px; padding: 20px; border-radius: 18px; background: var(--cream-card); border: 1px solid var(--border); }
.closing__p { font-size: 16.5px; line-height: 1.62; color: var(--text); margin: 0 0 16px; }
.closing .btn { width: 100%; }

/* Online counseling */
.online { display: flex; flex-direction: column; padding: 0; }
.online__intro { order: 1; padding: 14px 20px 22px; }
.online__video { order: 2; padding: 0 20px 26px; }
.online__areas { order: 3; padding: 0 20px 26px; }
.inperson { order: 4; margin: 0 20px 26px; padding: 20px; display: block; }
.online__cta { order: 5; margin: 0 20px 26px; }
.online__cta .btn { width: 100%; }
.inperson__h2 { font-size: 24px; margin: 0 0 8px; }
.inperson__p { font-size: 15.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 10px; }
.inperson__addr { font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--text); margin: 0 0 14px; }
.inperson__btn { display: none; }
.online__areas .eyebrow { margin-bottom: 12px; }
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.area { min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 10px; border-radius: 12px; background: var(--cream); border: 1.5px solid var(--border); font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--text); }

/* Insurance & pricing */
.pricing { padding: 0; }
.pricing__intro { padding: 14px 20px 22px; }
.pricing__grid { display: flex; flex-direction: column; }
.pricing__insurers, .pricing__rates { padding: 0 20px 26px; }
.pricing__grid .eyebrow { margin-bottom: 12px; }
.bullets { display: flex; flex-direction: column; gap: 12px; }
.bullets li { display: flex; gap: 11px; align-items: flex-start; }
.bullets li span:not(.dot), .bullets li p { font-size: 16.5px; line-height: 1.4; color: var(--text); }
.rates { border-radius: 18px; background: var(--cream-card); border: 1px solid var(--border); overflow: hidden; }
.rate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.rate:last-child { border-bottom: 0; }
.rate__label { font-size: 16px; line-height: 1.4; color: var(--text); }
.rate__price { font-family: var(--serif); font-size: 22px; color: var(--navy); }
.pricing__gfe { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.pricing__gfe .link-teal, .gfe__bullets .link-teal { font-size: inherit; font-weight: 600; display: inline; margin: 0; }
.pricing__cta { margin: 0 20px 30px; }
.pricing__cta .btn { width: 100%; }

/* Articles index */
.articles { padding: 0; }
.articles__sub { padding: 10px 20px 16px; font-size: 16.5px; line-height: 1.62; color: var(--text-2); }
.post-grid { display: flex; flex-direction: column; padding: 8px 20px 0; }
.articles__more { padding: 22px 20px 30px; }
.articles__more .btn { width: 100%; }

/* Blog post */
.post { display: flex; flex-direction: column; }
.post > .wrap { width: 100%; }
.post__hero { order: 2; }
.post__hero-media { display: none; }
.post__hero-text { padding: 4px 20px 16px; }
.post__eyebrow { display: none; }
.post__title { font-size: 30px; line-height: 1.22; margin: 0 0 12px; text-wrap: pretty; }
.post__author-m { display: flex; align-items: center; gap: 10px; }
.post__author-m .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.post__author-name { font-size: 15px; font-weight: 600; color: var(--text); }
.post__read { font-size: 13.5px; color: var(--text-meta); }
.post__back { order: 1; padding: 20px 20px 0; }
.back { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; font-size: 15.5px; font-weight: 600; color: var(--teal); text-decoration: none; }
.back span { font-size: 19px; line-height: 1; }
.post__cover-m { order: 3; }
.post__cover-img { width: 100%; height: 200px; object-fit: cover; background: var(--border); }
.post__layout { order: 4; padding: 22px 20px 8px; }
.post__side { display: none; }
.post__body { display: flex; flex-direction: column; gap: 16px; }
.post__lead { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--navy); text-wrap: pretty; }
.post__p { font-size: 16.5px; line-height: 1.72; color: var(--text); }
.post__h { margin: 8px 0 0; }
.post__h .rule { width: 38px; }
.post__h h2 { font-size: 23px; line-height: 1.24; }
.post__li { display: flex; gap: 11px; align-items: flex-start; }
.post__li .dot { margin-top: 9px; }
.post__li-title { font-size: 16.5px; font-weight: 700; line-height: 1.42; color: var(--navy); margin-bottom: 3px; }
.note { padding: 16px 18px; border-radius: 16px; background: var(--mint-tint); border: 1px solid var(--mint-border); }
.note__label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 6px; }
.note p { font-size: 16px; line-height: 1.65; color: var(--text); }
.related { order: 5; padding: 36px 20px 30px; }
.related__head { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.related__all { display: inline-flex; font-size: 16px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.related__all:hover { color: var(--teal); }
.related__grid { display: flex; flex-direction: column; }
.post-card--related { padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 0; }
.post-card--related .post-card__img, .post-card--related .post-card__meta { display: none; }
.post-card--related .post-card__title { font-size: 17.5px; line-height: 1.35; margin: 0; }

/* Contact */
.contact__intro { padding: 14px 20px 20px; }
.contact__intro p { font-size: 16.5px; line-height: 1.62; color: var(--text); }
.contact-band { padding: 26px 20px 34px; background: var(--cream-card); border-top: 1px solid var(--border); }
.contact-band__h2 { font-size: 26px; margin: 0 0 10px; text-align: center; }
.contact-band .rule { margin-bottom: 20px; }
.form-card { scroll-margin-top: calc(var(--header-h) + 12px); }
.cform { display: flex; flex-direction: column; gap: 12px; }
.cform__prompt { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--navy); margin: 4px 0 2px; }
.cform__prompt--2 { margin: 12px 0 2px; }
.field { display: block; position: relative; border-radius: 14px; border: 1.5px solid var(--border-input); background: #fff; padding: 10px 16px 12px; transition: border-color 160ms ease; }
.field:focus-within { border-color: var(--teal); }
.field__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal); line-height: 1.5; }
.req { color: var(--required); }
.field input, .field textarea, .field select { display: block; width: 100%; margin-top: 3px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 16.5px; color: var(--text); outline: none; border-radius: 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
.field textarea { min-height: 66px; line-height: 1.5; resize: vertical; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 28px; color: var(--text); cursor: pointer; }
.field select:invalid, .field select option[value=""] { color: var(--text-placeholder); }
.select-wrap { position: relative; display: block; }
.field__caret { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.field.is-invalid { border-color: var(--required); }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-meta); margin-left: 2px; }
fieldset.field { margin: 0; min-width: 0; }
fieldset.field legend.field__label { float: left; width: 100%; padding: 0; }
.choices { clear: both; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.choice { position: relative; flex: 1 1 0; min-width: 84px; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border-input); font-size: 16px; font-weight: 600; color: var(--text); background: #fff; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.choice input:hover + span { border-color: var(--teal); }
.choice input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.cform__note { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); text-align: center; }
.field-row { display: contents; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__error { font-size: 15px; line-height: 1.5; color: var(--required); }
.cform__submit { width: 100%; height: 54px; margin-top: 6px; }
.form-sent { display: none; padding: 30px 22px; border-radius: 18px; background: var(--mint-tint); border: 1px solid var(--mint-border); text-align: center; }
.form-card.is-sent .cform, .form-card:has(#sent:target) .cform { display: none; }
.form-card.is-sent .form-sent, .form-card:has(#sent:target) .form-sent { display: block; }
.form-sent__check { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; }
.form-sent__h3 { font-size: 24px; color: var(--navy); margin: 0 0 8px; }
.form-sent__p { font-size: 16px; line-height: 1.55; color: var(--text-2); margin: 0 0 16px; }
.form-sent__again { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 15.5px; font-weight: 700; color: var(--teal); text-decoration: none; }

/* Good Faith Estimate */
.gfe-hero__media { display: none; position: relative; }
.gfe-hero__img { width: 100%; height: 100%; object-fit: cover; }
.gfe-hero__text { padding: 26px 20px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gfe-hero__round { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; margin-bottom: 16px; }
.gfe-hero__round-img { width: 100%; height: 100%; object-fit: cover; }
.gfe-hero__eyebrow { margin-bottom: 10px; }
.gfe-hero__title { font-size: 30px; line-height: 1.2; margin: 0 0 10px; }
.gfe { padding: 0; }
.lang-pill { display: none; }
.gfe__intro { padding: 0 20px 8px; text-align: center; font-size: 16.5px; line-height: 1.62; color: var(--text-2); }
.gfe__bullets { padding: 12px 20px 26px; gap: 14px; }
.gfe__bullets .dot { margin-top: 8px; }
.gfe__bullets li p { font-size: 16px; line-height: 1.62; color: var(--text); }


/* 404 */
.nf { padding: 70px 20px 80px; }
.nf__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.nf__h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.16; margin: 12px 0 14px; }
.nf__p { font-size: 17px; line-height: 1.7; color: var(--text-2); margin: 0 0 26px; }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ==================================================================
   TABLET (768–1023) and DESKTOP (≥1024): Desktop Concept structure
   ================================================================== */
@media (min-width: 768px) {
  :root { --header-h: 76px; }
  .wrap { padding-inline: clamp(24px, 3vw, 40px); }
  .eyebrow { font-size: 13px; }
  .rule { width: 52px; }
  .dot { width: 8px; height: 8px; margin-top: 9px; }
  .link-teal { font-size: 17px; }
  .pill-lic { padding: 6px 13px; font-size: 13px; }
  .btn { height: 54px; }
  .btn--lg { height: 58px; padding: 0 32px; }
  .btn--xl { height: 60px; padding: 0 34px; }
  .btn--md { height: 56px; padding: 0 34px; font-size: 17px; }
  .text-col p { font-size: 17px; line-height: 1.7; }
  .text-col p + p { margin-top: 20px; }

  /* Header: fixed; transparent over the home hero until scrolled */
  .header { position: fixed; left: 0; right: 0; top: 0; background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background 240ms ease, border-color 240ms ease; }
  .header__inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); height: 76px; gap: clamp(10px, 1.6vw, 26px); transition: height 240ms ease; }
  .logo__img { height: clamp(46px, 5.6vw, 70px); }
  .nav { display: flex; flex: 1; align-items: center; justify-content: flex-end; flex-wrap: wrap; row-gap: 4px; column-gap: clamp(10px, 1.4vw, 24px); min-width: 0; }
  .nav__link { font-size: clamp(13px, 1.15vw, 15.5px); font-weight: 600; white-space: nowrap; color: var(--navy); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color 240ms ease, border-color 240ms ease; }
  .nav__link:hover { color: var(--teal); }
  .nav__link.is-active { color: var(--teal); border-color: var(--teal); }
  .header__cta { margin-left: 0; height: 46px; padding: 0 clamp(14px, 1.6vw, 22px); font-size: clamp(14px, 1.2vw, 16px); }
  .burger { display: none; }
  .main { padding-top: 76px; }
  .page--home .main { padding-top: 0; }
  .header--home:not(.is-solid) { background: rgba(15,32,52,0); border-color: transparent; }
  .header--home:not(.is-solid) .nav__link { color: #fff; }
  .header--home:not(.is-solid) .nav__link:hover { color: var(--mint); }
  .header--home:not(.is-solid) .nav__link.is-active { color: #fff; border-color: var(--mint); }
  .header--home:not(.is-solid) .logo__img { display: none; }
  /* Same header height and logo size as every other page — only the colours change over the hero. */
  .header--home:not(.is-solid) .logo__light { display: block; height: clamp(46px, 5.6vw, 70px); width: auto; }
  .form-card { scroll-margin-top: 96px; }

  /* Home hero */
  .hero { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; color: #fff; }
  .hero__media { display: block; position: absolute; inset: 0; }
  .hero__img { width: 100%; height: 100%; object-fit: cover; }
  .hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,32,52,0.62) 0%, rgba(15,32,52,0.42) 45%, rgba(15,32,52,0.66) 100%); }
  .hero__content { position: relative; z-index: 2; max-width: 1000px; padding: 76px 40px 0; text-align: center; }
  .hero__title { font-size: clamp(40px, 4.9vw, 62px); line-height: 1.12; margin: 0 0 22px; text-wrap: balance; text-shadow: 0 2px 24px rgba(10,24,40,0.35); }
  .hero__name { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
  .hero__tagline { max-width: 720px; margin: 0 auto 34px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.86); text-wrap: balance; }
  .hero__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 14px; }
  .hero__book { width: auto; height: 58px; padding: 0 30px; }
  .hero__watch { display: inline-flex; height: 58px; padding: 0 30px; }

  /* Chips */
  .topics .wrap { padding: 54px clamp(24px, 3vw, 40px) 0; }
  .chips { gap: 12px; padding: 0; }
  .chip { flex: 0 0 auto; min-width: 210px; height: 56px; padding: 0 26px; font-size: 16px; color: var(--text-2); }
  .chip[aria-selected="true"] { color: #fff; }
  .blurb { margin: 18px auto 0; max-width: 880px; padding: 22px 28px 24px; border-radius: 18px; text-align: center; }
  .blurb p { max-width: 700px; margin: 0 auto; font-family: var(--serif); font-size: 17.5px; line-height: 1.65; color: var(--navy); text-wrap: pretty; }
  .blurb__more { margin-top: 0; font-size: 16px; }

  /* Welcome */
  /* Desktop: a small eyebrow, the opening paragraph as a centered serif lead, then the rest in a
     narrower centered column (~75 characters a line) so it reads like a note rather than a text block. */
  .welcome .wrap { padding: 66px clamp(24px, 3vw, 40px) 72px; text-align: center; }
  .wrap--text > *, .wrap--text .welcome__more { max-width: 720px; margin-inline: auto; }
  .welcome__eyebrow { display: block; margin-bottom: 18px; }
  .welcome p { font-size: 17px; line-height: 1.7; text-wrap: pretty; }
  .welcome p.welcome__lead { max-width: 860px; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.52; color: var(--navy); }
  .welcome__more { display: block; margin-top: 22px; }
  .welcome__more p { margin-top: 0; }
  .welcome__more p + p { margin-top: 20px; }
  .welcome__toggle { display: none; }

  /* Video */
  .video { border-radius: var(--radius-video); box-shadow: 0 24px 60px -30px rgba(15,39,64,0.45); }
  .video__shade { background: var(--shade-video); }
  .play { width: 84px; height: 84px; }
  .play__tri { width: 26px; height: 32px; margin-left: 6px; }
  .video-wrap { padding: 0 clamp(24px, 3vw, 40px) 76px; }
  .video-wrap .video { max-width: 760px; margin: 0 auto; } /* same size as the "Meet your counselor" video */

  /* Quote band */
  .quote-band { margin: 0; padding: 76px 32px; border-radius: 0; }
  .quote-band__inner { max-width: 960px; margin: 0 auto; text-align: center; }
  .quote-band__text { font-weight: 400; font-size: 32px; margin: 0 0 18px; text-wrap: balance; }
  .quote-band__by { font-size: 14px; letter-spacing: 0.16em; font-weight: 600; }

  /* Meet */
  .meet { padding: 86px clamp(24px, 3vw, 40px) 0; }
  .meet__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .meet__media { order: 0; }
  .meet__text { display: block; }
  .meet__text .eyebrow { margin-bottom: 14px; }
  .meet__h2 { font-size: 38px; line-height: 1.18; margin: 0 0 26px; }
  .meet__cred--mobile { display: none; }
  .meet__cred--desktop { display: flex; margin-top: 20px; gap: 10px; }
  .meet__cred span:first-child { font-size: 16px; }
  .meet__photo { height: 460px; object-position: 50% 22%; border-radius: 20px; }
  .row__btn { min-height: 66px; padding: 18px 0; font-size: 17.5px; }
  .row__sign { font-size: 26px; }
  .entries { margin: 2px 0 26px; gap: 18px; }
  .entries li { gap: 13px; }
  .entry__title { font-size: 16px; line-height: 1.4; }
  .entry__sub { margin-top: 4px; font-size: 16px; line-height: 1.6; }
  .tiles { margin: 0 0 16px; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .tile { min-height: 54px; padding: 10px 12px; border-radius: 14px; background: var(--cream-card); font-size: 16px; line-height: 1.28; }
  .tile-blurb { margin: 0 0 26px; padding: 18px 22px; border-radius: 16px; font-size: 16px; line-height: 1.62; }
  .meet__video { margin: 56px auto 0; max-width: 760px; }

  /* Ways */
  .ways { padding: 90px clamp(24px, 3vw, 40px) 0; gap: 0; }
  .ways__eyebrow { text-align: center; margin-bottom: 34px; }
  .ways__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .card { border-radius: 20px; padding: 34px 34px 36px; }
  .card__h3 { font-size: 25px; margin: 0 0 12px; }
  .card__p { font-size: 16px; line-height: 1.62; margin: 0 0 16px; }
  .card__addr { font-size: 16.5px; line-height: 1.6; margin: 0 0 20px; }

  /* Featured */
  .featured { padding: 90px 0 0; }
  .featured__head { margin-bottom: 26px; padding-bottom: 0; }
  .featured__all { font-size: 16px; }
  .featured__all-desktop { display: inline; }
  .featured__all-mobile { display: none; }
  .featured__scroller { overflow: visible; }
  .featured__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; padding-block: 0; }
  .post-card--featured { flex: none; border-radius: 18px; }
  .post-card--featured .post-card__img { height: 186px; }
  .post-card--featured .post-card__body { padding: 22px 22px 26px; }

  /* Cards */
  .post-card { display: block; padding: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fff; }
  .post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(15,39,64,0.4); }
  .post-card:hover .post-card__title { color: inherit; }
  .post-card__img { width: 100%; height: 176px; border-radius: 0; }
  .post-card__body { padding: 22px 22px 26px; }
  .post-card__title { font-size: 19.5px; line-height: 1.34; margin: 0 0 10px; }
  .post-card__meta { font-size: 14.5px; }

  /* CTA */
  .cta { margin-top: 96px; padding: 82px 32px 90px; }
  .cta__inner { max-width: 780px; margin: 0 auto; text-align: center; }
  .cta__h2 { font-size: 44px; line-height: 1.16; margin: 0 0 16px; }
  .cta .rule { margin-bottom: 22px; }
  .cta__p { max-width: none; margin: 0 0 32px; font-size: 19px; line-height: 1.68; text-wrap: pretty; }
  .cta .btn { width: auto; }

  .modal { padding: 40px; }

  /* Footer */
  .footer { padding: 64px clamp(24px, 3vw, 40px) 46px; }
  .footer__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 56px; align-items: start; }
  .footer__col--about { gap: 0; }
  .footer__name { font-size: 24px; margin-bottom: 10px; }
  .footer__tagline { display: block; margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--on-navy-muted); }
  .ftiles--desktop { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
  .ftiles--desktop .ftile { min-height: 84px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; }
  .ftile__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .ftile__label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy-muted); font-weight: 700; transition: color 160ms ease; }
  .ftile.is-copied .ftile__label { color: var(--mint); }
  .ftile__value { font-size: 15.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
  .ftiles--mobile, .finfo, .footer__quick, .footer__mlinks { display: none; }
  .footer__col--links { display: flex; flex-direction: column; gap: 13px; }
  .footer__head { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); font-weight: 700; margin-bottom: 4px; }
  .footer__col--links a { font-size: 16px; color: var(--on-navy); text-decoration: none; }
  .footer__col--links a:hover { color: #fff; }
  .footer__col--links .footer__portal { font-weight: 600; color: var(--mint); }

  /* Interior hero */
  .phero { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; }
  .phero__media { position: absolute; inset: 0; }
  .phero__img { height: 100%; }
  .phero__shade { display: block; }
  .phero__text { position: relative; z-index: 2; max-width: 980px; padding: 0 40px; text-align: center; color: #fff; }
  .phero__eyebrow { color: #fff; letter-spacing: 0.2em; margin-bottom: 16px; text-shadow: 0 1px 12px rgba(10,24,40,0.5); }
  .phero__title { font-size: clamp(36px, 4vw, 50px); line-height: 1.14; text-wrap: balance; text-shadow: 0 2px 24px rgba(10,24,40,0.32); }
  .cta-band { display: block; margin-top: 74px; padding: 66px 32px 74px; background: var(--cream-card); border-top: 1px solid var(--border); text-align: center; }

  /* Approach */
  .approach__intro { padding: 76px clamp(24px, 3vw, 40px) 0; max-width: 1020px; text-align: center; }
  .approach__intro p { display: block; }
  .approach__intro p.approach__lead { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 29px); line-height: 1.46; color: var(--navy); margin: 0 0 20px; text-wrap: pretty; }
  .approach__sub { max-width: 700px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
  .navy-band { margin: 72px 0 0; padding: clamp(56px, 6vw, 80px) 40px; border-radius: 0; }
  .navy-band__inner { max-width: 900px; margin: 0 auto; text-align: center; }
  .navy-band__text { font-size: clamp(23px, 2.4vw, 31px); line-height: 1.45; text-wrap: pretty; }
  .navy-band__sub { margin: 20px auto 0; max-width: 760px; font-size: 18px; line-height: 1.65; text-wrap: pretty; }
  .principles { padding: clamp(64px, 7vw, 90px) clamp(24px, 3vw, 40px) 0; }
  .principles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 4vw, 56px); }
  .principle__num { width: 46px; height: 46px; border-radius: 12px; font-size: 21px; margin-bottom: 20px; }
  .principle__h2 { font-size: clamp(24px, 2.1vw, 29px); line-height: 1.24; margin: 0 0 14px; }
  .principle__p { font-size: 17px; line-height: 1.7; }
  .photo-quote { margin: clamp(64px, 7vw, 90px) 0 0; min-height: 420px; }
  .photo-quote__shade { background: linear-gradient(180deg, rgba(15,32,52,0.62) 0%, rgba(15,32,52,0.56) 50%, rgba(15,32,52,0.68) 100%); }
  .photo-quote__text { max-width: 820px; padding: 60px 40px; }
  .photo-quote__q { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.4; margin: 0 0 16px; text-shadow: 0 2px 24px rgba(10,24,40,0.3); }
  .photo-quote__by { font-size: 13px; color: #fff; text-shadow: 0 1px 12px rgba(10,24,40,0.5); }
  .closing { margin: 0; padding: clamp(60px, 6vw, 78px) 40px; border-radius: 0; border: 0; border-top: 1px solid var(--border); }
  .closing__inner { max-width: 780px; margin: 0 auto; text-align: center; }
  .closing__p { font-size: 19px; line-height: 1.68; margin: 0 0 30px; text-wrap: pretty; }
  .closing .btn { width: auto; }

  /* Online */
  .online { padding: 70px clamp(24px, 3vw, 40px) 0; }
  .online__intro { padding: 0; max-width: 900px; margin: 0 auto 54px; width: 100%; }
  .online__video { order: 2; padding: 0; max-width: 900px; margin: 0 auto 62px; width: 100%; }
  .online__areas { order: 3; padding: 0; margin-bottom: 56px; }
  .online__areas .eyebrow { margin-bottom: 20px; }
  .areas { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .area { min-height: 60px; padding: 12px 16px; border-radius: 14px; font-size: 16px; }
  .inperson { order: 4; margin: 0; padding: 36px 40px; border-radius: 20px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
  .inperson__h2 { font-size: 27px; margin: 0 0 10px; }
  .inperson__p { font-size: 16px; line-height: 1.62; max-width: 560px; margin: 0 0 12px; }
  .inperson__addr { font-size: 16.5px; line-height: 1.6; margin: 0; }
  .inperson__link-mobile { display: none; }
  .inperson__btn { display: inline-flex; height: 54px; padding: 0 26px; font-size: 17px; }
  .inperson__btn:hover { background: #fff; }
  .online__cta { display: none; }

  /* Pricing */
  .pricing { padding: 70px clamp(24px, 3vw, 40px) 0; }
  .pricing__intro { padding: 0; max-width: 900px; margin: 0 auto 54px; }
  .pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
  .pricing__insurers, .pricing__rates { padding: 0; }
  .pricing__grid .eyebrow { margin-bottom: 20px; }
  .bullets { gap: 16px; }
  .bullets li { gap: 13px; }
  .bullets li span:not(.dot), .bullets li p { font-size: 17px; line-height: 1.45; }
  .rates { border-radius: 20px; }
  .rate { padding: 22px 26px; gap: 16px; }
  .rate__label { font-size: 16.5px; }
  .rate__price { font-size: 28px; }
  .pricing__gfe { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; }
  .pricing__cta { display: none; }
  .page--pricing .cta-band { margin-top: 78px; }

  /* Articles */
  .articles { padding: 62px clamp(24px, 3vw, 40px) 90px; }
  .articles__sub { padding: 0; max-width: 800px; margin: 0 auto 44px; text-align: center; font-size: 19px; line-height: 1.62; }
  .post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 0; }
  .articles__more { display: flex; justify-content: center; margin-top: 40px; padding: 0; }
  .articles__more .btn { width: auto; }

  /* Post */
  .post__hero { order: 1; position: relative; height: 400px; display: flex; align-items: center; justify-content: center; }
  .post__hero-media { display: block; position: absolute; inset: 0; }
  .post__hero-img { width: 100%; height: 100%; object-fit: cover; }
  .post__hero-text { position: relative; z-index: 2; max-width: 980px; padding: 0 40px; text-align: center; color: #fff; }
  .post__eyebrow { display: block; color: #fff; letter-spacing: 0.2em; margin-bottom: 16px; text-shadow: 0 1px 12px rgba(10,24,40,0.5); }
  .post__title { font-size: clamp(40px, 4.5vw, 54px); line-height: 1.12; margin: 0; text-wrap: balance; text-shadow: 0 2px 24px rgba(10,24,40,0.32); }
  .post__author-m { display: none; }
  .post__back { order: 2; padding: 30px clamp(24px, 3vw, 40px) 0; }
  .back { min-height: 44px; gap: 6px; font-size: 16px; }
  .back span { font-size: 20px; }
  .post__cover-m { display: none; }
  .post__layout { order: 3; padding: 10px clamp(24px, 3vw, 40px) 0; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .post__side { display: flex; flex-direction: column; gap: 22px; }
  .author-card { padding: 24px; border-radius: 18px; background: var(--cream-card); border: 1px solid var(--border); }
  .author-card .avatar { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; }
  .author-card__name { font-size: 16.5px; font-weight: 700; color: var(--navy); }
  .author-card__cred { margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
  .author-card__hr { margin: 16px 0; height: 1px; border: 0; background: var(--border); }
  .author-card__read { font-size: 14px; color: var(--text-meta); }
  .book-card { display: block; padding: 20px 22px; border-radius: 18px; background: var(--navy); color: #fff; text-decoration: none; transition: background 160ms ease; }
  .book-card:hover { background: var(--navy-hover); color: #fff; }
  .book-card__q { font-family: var(--serif); font-size: 18px; line-height: 1.34; margin-bottom: 8px; }
  .book-card__cta { font-size: 15px; font-weight: 700; color: var(--mint); }
  .post__body { max-width: 760px; gap: 26px; }
  .post__lead { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.58; }
  .post__p { font-size: 17.5px; line-height: 1.8; }
  .post__h { margin: 22px 0 0; }
  .post__h .rule { width: 46px; margin-bottom: 14px; }
  .post__h h2 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.22; }
  .post__li { gap: 14px; }
  .post__li .dot { margin-top: 12px; }
  .post__li-title { font-size: 17.5px; line-height: 1.45; margin-bottom: 4px; }
  .note { padding: 24px 28px; border-radius: 18px; }
  .note__label { margin-bottom: 8px; }
  .note p { font-size: 17px; line-height: 1.72; }
  .related { order: 4; padding: clamp(64px, 7vw, 88px) clamp(24px, 3vw, 40px) 90px; }
  .related__head { margin-bottom: 24px; }
  .related__all { display: inline; }
  .related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
  .post-card--related { padding: 0; border: 1px solid var(--border); }
  .post-card--related .post-card__img { display: block; height: 152px; }
  .post-card--related .post-card__meta { display: block; font-size: 14px; }
  .post-card--related .post-card__body { padding: 20px 22px 24px; }
  .post-card--related .post-card__title { font-size: 19px; line-height: 1.32; margin: 0 0 8px; }

  /* Contact */
  .contact__intro { padding: 62px clamp(24px, 3vw, 40px) 0; }
  .contact__intro p { max-width: 860px; margin: 0 auto; text-align: center; font-size: 19px; line-height: 1.68; text-wrap: pretty; }
  .contact-band { margin-top: 62px; padding: 66px 32px 84px; }
  .contact-band__inner { max-width: 820px; margin: 0 auto; }
  .contact-band__h2 { font-size: 38px; margin: 0 0 12px; }
  .contact-band .rule { margin-bottom: 34px; }
  .form-card { padding: 40px 42px 44px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 24px 60px -40px rgba(15,39,64,0.4); }
  .cform { gap: 14px; }
  .cform__prompt { font-size: 19px; margin: 0 0 4px; }
  .cform__prompt--2 { margin: 14px 0 0; }
  .field { padding: 12px 18px 14px; }
  .field input, .field textarea, .field select { margin-top: 4px; }
  .field textarea { min-height: 78px; line-height: 1.55; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .field-row--found:not(.is-split) { grid-template-columns: 1fr; } /* "How did you find me?" is full width until a referral/Other opens the "More info" box */
  .cform__submit { height: 58px; margin-top: 8px; }
  .choice { flex: 0 1 140px; }
  .cform__note { font-size: 15px; }
  .form-sent { padding: 40px 30px; }
  .form-sent__check { width: 64px; height: 64px; margin-bottom: 18px; }
  .form-sent__h3 { font-size: 30px; margin: 0 0 10px; }
  .form-sent__p { font-size: 16.5px; line-height: 1.6; margin: 0 0 20px; }
  .form-sent__again { font-size: 16px; }

  /* GFE */
  .gfe-hero { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; }
  .gfe-hero__media { display: block; position: absolute; inset: 0; }
  .gfe-hero__text { position: relative; z-index: 2; max-width: 980px; padding: 0 40px; color: #fff; }
  .gfe-hero__round { display: none; }
  .gfe-hero__eyebrow { color: #fff; letter-spacing: 0.2em; margin-bottom: 16px; text-shadow: 0 1px 12px rgba(10,24,40,0.5); }
  .gfe-hero__title { font-size: clamp(40px, 4.5vw, 54px); line-height: 1.12; margin: 0; text-wrap: balance; text-shadow: 0 2px 24px rgba(10,24,40,0.32); }
  .gfe { padding: 70px clamp(24px, 3vw, 40px) 90px; }
  .gfe__inner { max-width: 860px; margin: 0 auto; }
  .lang-pill { display: flex; justify-content: center; margin-bottom: 34px; }
  .lang-pill__group { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--cream); border: 1px solid var(--border); gap: 4px; }
  .lang-pill__opt { min-height: 44px; padding: 0 22px; border-radius: 999px; display: flex; align-items: center; font-size: 15.5px; font-weight: 600; color: var(--text-2); text-decoration: none; }
  .lang-pill__opt:hover { color: var(--navy); }
  .lang-pill__opt.is-active { background: var(--navy); color: #fff; }
  .gfe__intro { padding: 0; margin: 0 0 30px; text-align: left; font-size: 17px; line-height: 1.7; color: var(--text); }
  .gfe__bullets { padding: 32px 36px; gap: 16px; border-radius: 20px; background: var(--cream-card); border: 1px solid var(--border); }
  .gfe__bullets .dot { margin-top: 9px; }
  .gfe__bullets li p { font-size: 17px; line-height: 1.62; }
}

@media (min-width: 768px) {
  /* the language pill is a rounded group */
  .lang-pill { display: flex; justify-content: center; }
  .lang-pill > .lang-pill__opt:first-child { margin-left: 0; }
}

/* ==================================================================
   DESKTOP (≥1024): full Desktop Concept layout
   ================================================================== */
@media (min-width: 1024px) {
  .hero { height: 660px; }
  .hero__title { font-size: 62px; }
  .meet__grid { grid-template-columns: 440px 1fr; gap: 72px; }
  .meet__media { position: sticky; top: 118px; }
  .post-grid { grid-template-columns: 1fr 1fr 1fr; }
  .post__layout { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(32px, 4vw, 68px); }
  .post__side { position: sticky; top: 116px; }
  .phero__title, .post__title, .gfe-hero__title { font-size: 50px; }
  /* Home hero: text block on the left so the person in the photo stays clear (Carlos, 2026-10-14, A2) */
  .hero { justify-content: flex-start; }
  .hero__content { text-align: left; padding-left: clamp(40px, 7vw, 120px); padding-right: 40px; max-width: 820px; }
  .hero__tagline { margin-left: 0; }
  .hero__actions { justify-content: flex-start; }
}

/* Tablet-only adjustments (768–1023) */
@media (min-width: 768px) and (max-width: 1023px) {
  .post__side { flex-direction: row; }
  .post__side > * { flex: 1; }
  .inperson { grid-template-columns: 1fr; }
  .inperson__btn { justify-self: start; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__col--about { grid-column: 1 / -1; }
}

/* ---------- FAQ (native details/summary) ---------- */
.faq { padding: 30px 20px 30px; scroll-margin-top: calc(var(--header-h) - 6px); } /* heading lands ~24px below the header; 30px under the last card on phones (Carlos, 2026-10-15, B3; was 6px) */
.faq__h2 { font-size: 26px; margin: 0 0 10px; text-align: center; }
.faq .rule { margin-bottom: 18px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__item { border-radius: 16px; background: var(--cream-card); border: 1px solid var(--border); }
.faq__item[open] { background: #fff; border-color: var(--mint-border); }
.faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; min-height: 54px; cursor: pointer; font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--navy); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 16px; }
.faq__sign { position: relative; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--mint-tint); border: 1px solid var(--mint-border); }
.faq__sign::before, .faq__sign::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--teal); transform: translate(-50%, -50%); border-radius: 2px; }
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 160ms ease; }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 18px 18px; }
.faq__a p, .faq__a li { font-size: 16px; line-height: 1.62; color: var(--text); }
.faq__a ul { margin: 10px 0; padding-left: 22px; display: grid; gap: 4px; }
.faq__a a { color: var(--teal); font-weight: 600; }
/* Phone numbers: tap-to-call on phones, but plain text on desktop (Carlos: it looks like a link and does nothing there). */
@media (min-width: 768px) {
  .faq__a a.tel-link, .facts__row dd a.tel-link { color: inherit; font-weight: inherit; text-decoration: none; pointer-events: none; cursor: text; }
}

/* ---------- Practice details (About + Contact) ---------- */
.facts { padding: 30px 20px 34px; }
.facts__h2 { font-size: 26px; margin: 0 0 10px; text-align: center; }
.facts .rule { margin-bottom: 18px; }
.facts__list { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; }
.facts__row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; border-top: 1px solid var(--border); }
.facts__row:first-child { border-top: 0; }
.facts__row dt { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal); }
.facts__row dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.facts__row dd a { color: var(--navy); font-weight: 600; text-decoration: none; }
.facts__row dd a:hover { color: var(--teal); }
.facts__links { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); text-align: center; }
.facts__links a { color: var(--teal); font-weight: 600; text-decoration: none; }

/* ---------- My Approach: "What I help with" ---------- */
.helpwith { padding: 30px 20px 6px; }
.helpwith__h2 { font-size: 26px; margin: 0 0 10px; text-align: center; }
.helpwith .rule { margin-bottom: 16px; }
.helpwith__p { font-size: 16.5px; line-height: 1.62; color: var(--text); text-align: center; margin: 0 0 16px; }
.chips--cond { flex-wrap: wrap; padding: 8px 0 0; }
.chips--cond .chip { flex: 1 1 calc(50% - 4px); }
.cond-panels { margin-top: 14px; }
.cond { position: relative; padding: 18px 18px 6px; border-radius: 16px; background: var(--mint-tint); border: 1px solid var(--mint-border); margin-bottom: 12px; }
.cond__anchor { position: absolute; top: calc(-1 * var(--header-h) - 12px); }
.cond__h3 { font-size: 23px; line-height: 1.25; margin: 0 0 10px; }
.cond__intro { font-size: 16.5px; line-height: 1.6; color: var(--text); margin: 0 0 16px; }
.cond__eyebrow { margin-bottom: 10px; }
.cond__approach p { font-size: 16px; line-height: 1.62; color: var(--text); }
.cond__approach p + p { margin-top: 12px; }
.cond__more { margin-top: 14px !important; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.cond__more a { color: var(--teal); font-weight: 600; text-decoration: none; }
.cond__more a:hover { text-decoration: underline; }
.cond__side { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mint-border); }
.cond__list { margin-bottom: 12px; }
.contact-band__p { max-width: 420px; margin: -6px auto 18px; text-align: center; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.contact-band__p--wide { max-width: 640px; }
.cta--form .cta__p { margin-bottom: 20px; }
.cta--form .form-card { text-align: left; }

/* ---------- About page ---------- */
.about__intro { padding: 14px 20px 26px; }
.about__grid { display: flex; flex-direction: column; gap: 20px; }
.about__photo { width: 100%; height: auto; border-radius: 22px; display: block; }
.about__media .meet__cred { margin-top: 12px; }
.about__video { padding: 0 20px 26px; }
.about__cols { display: flex; flex-direction: column; gap: 6px; padding: 0 20px 6px; }
.about__h2 { margin: 0 0 12px; }
.about__pages { font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: -8px 0 22px; }
.about__pages .link-teal { display: inline; margin: 0; font-size: inherit; }
.about .closing { margin-top: 10px; }

@media (min-width: 768px) {
  .faq { padding: 74px clamp(24px, 3vw, 40px) 0; scroll-margin-top: calc(var(--header-h) - 50px); }
  .faq__inner { max-width: 820px; margin: 0 auto; }
  .faq__h2 { font-size: 38px; margin: 0 0 12px; }
  .faq .rule { margin-bottom: 30px; }
  .faq__list { gap: 12px; }
  .faq__q { padding: 20px 24px; font-size: 20px; }
  .faq__a { padding: 0 24px 22px; }
  .faq__a p, .faq__a li { font-size: 16.5px; line-height: 1.68; }
  .faq__a p { max-width: 70ch; }

  .facts { padding: 74px clamp(24px, 3vw, 40px) 0; }
  .facts__inner { max-width: 820px; margin: 0 auto; }
  .facts__h2 { font-size: 38px; margin: 0 0 12px; }
  .facts .rule { margin-bottom: 30px; }
  .facts__row { grid-template-columns: 190px 1fr; gap: 16px; padding: 14px 22px; align-items: baseline; }
  .facts__row dt { font-size: 12.5px; padding-top: 3px; }
  .facts__row dd { font-size: 16.5px; }
  .facts__links { margin-top: 18px; font-size: 15.5px; }

  .helpwith { padding: 80px clamp(24px, 3vw, 40px) 0; max-width: 1100px; }
  .helpwith__h2 { font-size: 38px; margin: 0 0 12px; }
  .helpwith .rule { margin-bottom: 22px; }
  .helpwith__p { max-width: 760px; margin: 0 auto 24px; font-size: 18px; line-height: 1.68; text-wrap: pretty; }
  .chips--cond { justify-content: center; gap: 12px; padding: 4px 0 0; }
  .chips--cond .chip { flex: 0 0 auto; min-width: 0; padding: 0 28px; }
  .cond-panels { margin-top: 28px; }
  .cond { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); padding: 40px clamp(28px, 3.5vw, 48px) 36px; border-radius: 22px; margin: 0; }
  .cond__h3 { font-size: clamp(26px, 2.3vw, 31px); line-height: 1.22; margin: 0 0 14px; text-wrap: balance; }
  .cond__intro { font-size: 17.5px; line-height: 1.65; margin: 0 0 24px; text-wrap: pretty; }
  .cond__approach p { font-size: 16.5px; line-height: 1.68; }
  .cond__side { margin: 0; padding: 0 0 0 clamp(24px, 3vw, 40px); border-top: 0; border-left: 1px solid var(--mint-border); }
  .cond__list { margin-bottom: 0; }
  .contact-band__p { font-size: 17.5px; margin: -10px auto 28px; max-width: 520px; }
  .contact-band__p--wide { max-width: 720px; line-height: 1.68; }
  .cta--form .cta__inner { max-width: 820px; }
  .cta--form .form-card { background: #fff; padding: 40px 42px 44px; border-radius: 22px; border: 1px solid var(--border); box-shadow: 0 24px 60px -40px rgba(15,39,64,0.4); }

  .about__intro { padding: 70px clamp(24px, 3vw, 40px) 0; }
  .about__grid { display: grid; grid-template-columns: 440px 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; max-width: 1180px; margin: 0 auto; }
  .about__photo { border-radius: 26px; }
  .about__text p:first-child { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; color: var(--navy); text-wrap: pretty; }
  .about__video { padding: 70px clamp(24px, 3vw, 40px) 0; max-width: 840px; margin: 0 auto; width: 100%; }
  .about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); padding: 70px clamp(24px, 3vw, 40px) 0; max-width: 1180px; margin: 0 auto; width: 100%; }
  .about__h2 { margin: 0 0 16px; }
  .about__pages { margin: -6px 0 30px; font-size: 16px; }
  .about .closing { margin-top: 74px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .about__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- "If you need help now" (crisis lines) ---------- */
/* Phones: no photo — the headline and the 911 / 988 buttons are the first thing on screen. */
.phero--help .phero__media { display: none; }
.phero--help .phero__text { padding-top: 22px; }
.help { padding: 16px 20px 44px; }
.help__inner { max-width: 760px; margin: 0 auto; }
.help__intro { font-size: 16.5px; line-height: 1.6; color: var(--text); margin: 0 0 20px; text-wrap: pretty; }
.help__quick { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 30px; }
.help__quick-item { display: flex; flex-direction: column; justify-content: center; min-height: 68px; padding: 12px 18px; border-radius: 16px; background: var(--teal); color: #fff; text-decoration: none; }
.help__quick-item:hover { background: var(--teal-hover); color: #fff; }
.help__quick-label { font-size: 21px; font-weight: 700; line-height: 1.2; }
.help__quick-sub { margin-top: 3px; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.35; }
/* Sections are plain: a serif heading, then one block per service. No boxes or dividers — spacing does the grouping. */
.help__card { margin: 0 0 32px; padding-top: 26px; border-top: 1px solid var(--border); }
.help__h2 { font-size: 23px; line-height: 1.25; margin: 0 0 16px; text-wrap: pretty; }
.help__item { display: block; }
.help__item + .help__item { margin-top: 22px; }
.help__name { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.3; margin: 0 0 3px; }
.help__contact { display: flex; flex-direction: column; align-items: flex-start; }
.help__num { font-family: var(--sans); font-size: 22px; font-weight: 700; color: var(--teal); text-decoration: none; letter-spacing: 0.01em; line-height: 1.45; }
.help__num--text { font-size: 20px; }
/* The website is a real link: body-size, underlined, with an arrow — on its own line under the number. */
.help__site { display: inline-block; margin: 1px 0 2px; padding: 3px 0; font-size: 16.5px; font-weight: 600; color: var(--teal); text-decoration: underline; text-decoration-color: rgba(47,125,109,0.45); text-decoration-thickness: 1.5px; text-underline-offset: 3px; line-height: 1.4; }
.help__site:hover { color: var(--teal-hover); text-decoration-color: currentColor; }
.help__ext { display: inline-block; margin-left: 4px; font-size: 13px; text-decoration: none; }
.help__desc { margin: 3px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.help__desc a { color: var(--teal); font-weight: 600; }
.help__list { list-style: disc; margin: 6px 0 0; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.help__list li { margin: 2px 0; }
.help__list strong { color: var(--navy); font-weight: 600; }
.help__list a { color: var(--teal); font-weight: 600; }
.help__small { margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.help__addr { margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.help__addr-link { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(47,125,109,0.45); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.help__addr-link:hover { color: var(--teal-hover); text-decoration-color: currentColor; }
.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; }
.help__note { margin: 10px 0 0; font-size: 15px; color: var(--text-2); }
.help__after { margin: 0; padding-top: 26px; border-top: 1px solid var(--border); font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--navy); text-wrap: pretty; }
.help__after a { color: var(--teal); }
.help__checked { margin: 14px 0 0; font-size: 13.5px; color: var(--text-meta); }
.help__checked a { color: inherit; }
.cform__help { color: var(--teal); font-weight: 700; text-decoration: none; white-space: nowrap; }
.cform__help:hover { color: var(--teal-hover); }
@media (min-width: 768px) {
  .phero--help .phero__media { display: block; }
  .phero--help .phero__text { padding-top: 0; }
  .help { padding: 56px clamp(24px, 3vw, 40px) 88px; }
  .help__inner { max-width: 880px; }
  .help__intro { max-width: 720px; font-size: 18px; line-height: 1.7; margin-bottom: 26px; }
  .help__quick { grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 44px; }
  /* Desktop: the two big numbers are information, not buttons (clicking a phone number does nothing there). */
  .help__quick-item { min-height: 92px; padding: 18px 24px; border-radius: 20px; pointer-events: none; cursor: default; }
  .help__quick-label { font-size: 26px; }
  .help__quick-sub { font-size: 15px; }
  /* Two columns: the section heading on the left, the services on the right, a hairline between sections. */
  .help__card { display: grid; grid-template-columns: 250px 1fr; column-gap: 56px; align-items: start; margin: 0; padding: 36px 0 40px; border-top: 1px solid var(--border); }
  .help__h2 { font-size: 25px; line-height: 1.25; margin: 4px 0 0; }
  .help__item + .help__item { margin-top: 26px; }
  .help__name { font-size: 18.5px; margin-bottom: 3px; }
  .help__num { font-size: 24px; }
  .help__num--text { font-size: 22px; }
  .help__site { font-size: 17px; }
  .help__desc, .help__list, .help__small, .help__addr { font-size: 16.5px; line-height: 1.6; }
  .help__small, .help__addr { font-size: 16px; }
  .help a.help__num.tel-link { color: var(--teal); pointer-events: none; cursor: text; } /* big number stays teal on desktop; still tap-to-call on phones */
  .help__after { font-size: 21px; margin-top: 0; padding-top: 36px; }
}

/* About: "Also listed on" line standing alone (the practice-details table was removed from About, 2026-09-30) */
.about__listed { padding: 26px 20px 0; }
.about__listed-p { margin: 0; }
@media (min-width: 768px) { .about__listed { padding: 56px clamp(24px, 3vw, 40px) 0; } }

/* My Approach → "who I am" section (merged from the old About page, 2026-10-02) */
.about__eyebrow { margin-bottom: 10px; }
.about__h2--edu { margin-top: 22px; }
#about { scroll-margin-top: calc(var(--header-h) + 16px); }
.approach__intro { padding-top: 10px; }
@media (min-width: 768px) {
  .about__h2--edu { margin-top: 28px; }
  .about__text .about__listed-p { margin-top: 22px; text-align: left; }
  .approach__intro { padding-top: 76px; }
}

/* Online counseling → Areas of treatment: the home-page tiles; centered at the same width on desktop (Carlos, 2026-10-02) */
.online__areas .tiles { margin-bottom: 10px; }
.online__areas .tile-blurb { margin-bottom: 0; }
@media (min-width: 768px) { .online__areas { text-align: center; } .online__areas .tiles { max-width: 760px; margin-left: auto; margin-right: auto; } .online__areas .tile-blurb { max-width: 760px; margin-left: auto; margin-right: auto; text-align: left; } }

/* Contact: the page ends after the form with the "Also listed on" line */
.contact__listed { padding-bottom: 36px; }
@media (min-width: 768px) { .contact__listed { padding: 40px clamp(24px, 3vw, 40px) 80px; } }

/* Author box at the end of every article (Batch 13) */
.authorbox { margin: 16px 0 0; padding: 20px; border-radius: 18px; background: var(--cream-card); border: 1px solid var(--border); }
.authorbox__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.authorbox .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.authorbox__eyebrow { margin-bottom: 4px; }
.authorbox__name { font-family: var(--serif); font-size: 20px; color: var(--navy); line-height: 1.25; }
.authorbox__p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.authorbox__links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.authorbox__links a { color: var(--teal); font-weight: 600; text-decoration: none; font-size: 15px; }
.authorbox__links a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .authorbox { margin: 24px 0 0; padding: 24px 28px; display: grid; grid-template-columns: 88px 1fr; column-gap: 22px; }
  .authorbox__head { display: contents; }
  /* the <picture> itself is the grid item (not its <source>/<img> children), so the photo spans the
     three text rows and the links row stays in the wide column — fixed 2026-10-07 */
  .authorbox__head > picture { display: block; grid-row: 1 / span 3; width: 88px; height: 88px; }
  .authorbox .avatar { width: 88px; height: 88px; }
  .authorbox__head > div { margin-bottom: 8px; }
  .authorbox__name { font-size: 22px; }
  .authorbox__p { font-size: 16.5px; }
}

/* OCD therapy page (Batch 13) — reuses the help-page section layout */
.ocd__p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.ocd__p:last-child { margin-bottom: 0; }
.ocd__p a { color: var(--teal); font-weight: 600; text-decoration: none; }
.ocd__p a:hover { text-decoration: underline; }
.ocd__list { color: var(--text); font-size: 16px; }
.ocd__list strong { color: var(--navy); font-weight: 600; }
.ocd .help__card:first-of-type { border-top: 1px solid var(--border); padding-top: 26px; }
.cond__more--page { margin-top: 16px !important; }
.cond__more--page + .cond__more { margin-top: 6px !important; }
@media (min-width: 768px) { .ocd__p, .ocd__list { font-size: 16.5px; } .ocd .help__card:first-of-type { padding-top: 36px; } }

.ocd-intro { padding-top: 30px; }
@media (min-width: 768px) { .ocd-intro { padding-top: 76px; } }

/* Bigger touch areas, no visible change (Carlos, 2026-10-14, A4). An invisible layer around the link catches taps;
   the text and spacing stay exactly where they were. On the Help page the phone number's touch area grows upward and
   the website link's grows downward, so the two never overlap. */
.help__num, .help__site, .authorbox__links a { position: relative; }
.help__num::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 0; height: 44px; }
.help__site::after { content: ''; position: absolute; left: -4px; right: -4px; top: 0; height: 44px; }
.authorbox__links { row-gap: 24px; } /* if the two links wrap onto two lines, their touch areas still don't overlap */
.authorbox__links a::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }

/* Very small phones (≤340px, e.g. the first iPhone SE): the Spanish/English button on the Good Faith Estimate pages
   pushed the header 1–2px past the screen edge. Slightly tighter header spacing there only (2026-10-14). */
@media (max-width: 340px) { .header__inner { gap: 6px; padding-left: 10px; padding-right: 10px; } }

/* Page hero with a subtitle (OCD page, Carlos 2026-10-14, A7). Phones: short title, the rest as a smaller line under it,
   a little more air before the intro. Laptops: unchanged — one sentence, "Treatment for OCD — in Raleigh, …". */
@media (max-width: 767px) {
  .phero__dash { display: none; }
  .phero__sub { display: block; font-family: var(--sans); font-size: 16.5px; line-height: 1.5; color: var(--text-2); margin-top: 8px; }
  .phero__sub::first-letter { text-transform: uppercase; }
  .ocd-intro { padding-top: 40px; }
}

/* ---------- Pressed look on phones (Carlos, 2026-10-15, B1) ----------
   Phones flash a gray box (iPhone) or a blue one (Android) over whatever is tapped. Instead, buttons, chips, tiles,
   rows and cards show their own pressed look while the finger is on them; plain text links get a soft green flash.
   site.js adds an empty touchstart listener: iPhones only show these pressed looks when one exists. */
:root { --teal-press: #1f5a4e; --navy-press: #10263f; --mint-press: #5bbfab; }
html { -webkit-tap-highlight-color: rgba(47,125,109,0.18); }
.btn, .burger, .menu__close, .modal__close, .chip, .tile, .choice input, .row__btn, .faq__q, .welcome__toggle,
.finfo__toggle, .ftile, .help__quick-item, .video__poster, .post-card, .menu__link, .book-card { -webkit-tap-highlight-color: transparent; }
.btn:active { background: var(--teal-press); color: #fff; transition-duration: 0s; }
.btn--outline:active { background: var(--mint-tint); border-color: var(--teal); color: var(--navy); }
.btn--navy:active, .burger:active, .book-card:active { background: var(--navy-press); transition-duration: 0s; }
.btn--mint:active { background: var(--mint-press); color: var(--navy-deep); }
.btn--ghost:active, .btn--glass:active, .menu__close:active, .modal__close:active, .finfo__toggle:active { background: rgba(255,255,255,0.22); }
.chip:active, .tile:active, .choice input:active + span { background: var(--mint-tint); border-color: var(--teal); transition-duration: 0s; }
.chip[aria-selected="true"]:active, .tile[aria-selected="true"]:active, .choice input:checked:active + span { background: var(--teal-press); border-color: var(--teal-press); }
.row__btn:active, .faq__q:active { color: var(--teal); }
.welcome__toggle:active { color: var(--teal-press); }
.ftile:active { background: rgba(255,255,255,0.2); transition-duration: 0s; }
.help__quick-item:active { background: var(--teal-press); color: #fff; }
.video__poster:active .play { transform: scale(0.94); }
.post-card:active .post-card__title { color: var(--teal); }
.menu__link:active { color: var(--mint); }

/* My Approach tabs: "Read more:" article links one per line on phones, no dot (Carlos, 2026-10-15, B4).
   Laptops keep them on one line with the dot. */
@media (max-width: 767px) {
  .cond__more:not(.cond__more--page) a { display: block; width: fit-content; margin-top: 6px; }
  .cond__sep { display: none; }
}

/* My Approach wave photo on phones: the quote at the top and a closer crop of the same photo (ocean-waves-m),
   so the surfer shows below the words instead of behind them (Carlos, 2026-10-15, B5). Laptops unchanged. */
@media (max-width: 767px) {
  .photo-quote { align-items: flex-start; }
  .photo-quote__text { padding: 24px 26px 0; }
  .photo-quote__img { object-position: center bottom; }
}

/* Phone footer: "Client Portal ↗" and "Facebook ↗" respond in a 44px-tall area, like the rows above them.
   Invisible layer only: nothing moves (Carlos, 2026-10-15, B7; same technique as the Help page, A4). */
.footer__mlinks a { position: relative; }
.footer__mlinks a::after { content: ''; position: absolute; left: -9px; right: -9px; top: 50%; height: 44px; transform: translateY(-50%); }

/* Logo files: right sizes per screen (Carlos, 2026-10-15, B8). The phone-menu logo now sits in a <picture>; make that
   one flex item so the menu's 12px gap isn't added around its <source> tags (pictures are display: contents site-wide). */
.menu__top > picture { display: flex; }

/* Home "Articles" cards on phones: all the same height, with the reading time at the bottom of each card, so the
   spare space sits under the title and the reading times line up (Carlos, 2026-10-15, B9 option B). */
@media (max-width: 767px) {
  .post-card--featured { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .post-card--featured .post-card__body { flex: 1; display: flex; flex-direction: column; }
  .post-card--featured .post-card__meta { margin-top: auto; }
}

/* Home on phones: a photo strip at the top, like the other pages (Carlos, 2026-10-15, C1). Phones get a phone-sized
   copy of the photo (hero-mountain-m). Laptops and tablets unchanged. */
@media (max-width: 767px) {
  .hero { padding-top: 0; }
  .hero__media { display: block; position: relative; margin: 0 -20px 24px; }
  .hero__img { display: block; width: 100%; height: 170px; object-fit: cover; }
  .hero__shade { display: none; }
}

/* Laptop menu: "OCD Therapy" shows from 1024px up; on an iPad held upright (768–1023px) the menu has no room for it,
   so there it stays as before — the OCD page is in the footer (Carlos, 2026-10-16, C3). */
@media (max-width: 1023px) { .nav__link--wide { display: none; } }

/* Article pages on laptops: the sidebar and the article are centered as a pair (equal space on both sides), and
   "All articles" stays lined up with the sidebar (Carlos, 2026-10-16, C4). 1010px = 250px sidebar + 760px text. */
@media (min-width: 1024px) {
  .post__layout, .post__back { max-width: calc(1010px + clamp(32px, 4vw, 68px) + 2 * clamp(24px, 3vw, 40px)); }
  .post__layout { grid-template-columns: minmax(0, 250px) minmax(0, 760px); }
}

/* Articles: Carlos's photo and name (sidebar card on laptops, line under the title on phones) link to the "about me"
   part of My Approach. Same look at rest; the name turns green on hover / while pressed (Carlos, 2026-10-16). */
.author-card__link, a.post__author-m { color: inherit; text-decoration: none; }
.author-card__link { display: block; }
a.post__author-m { width: fit-content; }
.author-card__link:hover .author-card__name, .author-card__link:active .author-card__name,
a.post__author-m:hover .post__author-name, a.post__author-m:active .post__author-name { color: var(--teal); }

/* Older iPads held upright (768–789px): a few pixels less spacing so the laptop-style menu fits on one line
   ("Client Portal" was dropping to a second line). 790px and up unchanged (Carlos, 2026-10-16). */
@media (min-width: 768px) and (max-width: 789px) {
  .header__inner { padding: 0 16px; gap: 10px; }
  .nav { column-gap: 9px; }
}