/* The NeuroAffirming SLP — static export
   Palette: navy #334e68, dusty mauve #b38a9a (accent; replaced terracotta
   #c27d62 per Renée's Design edit 2026-07-18), sage #a8b8a5, tan #c9b8a6,
   lavender highlight #d9d1e8, cream bg #faf7f2, ink #3e3a39
   Type: Fraunces (headings), Montserrat (body/UI), Caveat (accent
   pieces: hero-quote, subtitle-italic, pull-quote, footer-tagline —
   Caveat has no italic style of its own, so font-style: italic was
   dropped from these rather than left to fake-oblique). */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #faf7f2;
  color: #334e68;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}
a { color: #334e68; text-decoration-color: #b38a9a; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: #b38a9a; }
::selection { background: #a8b8a5; color: #334e68; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #334e68; color: #faf7f2; padding: 12px 20px;
  font-size: 14px; z-index: 200; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; outline: 3px solid #b38a9a; }

/* ---- Header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 100; background: #faf7f2; border-bottom: 1px solid rgba(51,78,104,0.15); }
.nav {
  max-width: 1200px; margin: 0 auto; padding: 8px clamp(20px,4vw,48px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 92px;
}
.logo-link { display: flex; align-items: center; min-height: 44px; }
.logo-link:focus-visible { outline: 3px solid #b38a9a; outline-offset: 3px; }
.logo-img { height: 75px; width: 283px; display: block; max-width: min(70vw,420px); object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: clamp(16px,2.5vw,32px); }
.nav-link { text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: #334e68; }
.nav-link:hover { color: #b38a9a; }
.nav-link:focus-visible { outline: 3px solid #d9d1e8; outline-offset: 3px; }
.btn-nav { font-size: 12px; padding: 12px 20px; }
.menu-toggle {
  display: none; background: none; border: 1px solid rgba(51,78,104,0.3); color: #334e68;
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 10px 16px; cursor: pointer; min-height: 44px;
}
.menu-toggle:focus-visible { outline: 3px solid #b38a9a; outline-offset: 3px; }
.mobile-menu {
  border-top: 1px solid rgba(51,78,104,0.15); padding: 12px clamp(20px,4vw,48px) 24px;
  display: flex; flex-direction: column; gap: 4px; background: #faf7f2;
}
.mobile-menu[hidden] { display: none; }
.mobile-link { text-decoration: none; font-size: 16px; font-weight: 500; padding: 12px 0; min-height: 44px; display: flex; align-items: center; color: #334e68; }
.mobile-link:hover { color: #b38a9a; }
.mobile-link:focus-visible { outline: 3px solid #d9d1e8; outline-offset: 3px; }
.mobile-cta { margin-top: 12px; text-align: center; justify-content: center; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-block; }
}
/* Pre-existing header overflow at narrow phone widths (down to 320px): the
   logo's own min(70vw,420px) cap plus the fixed 24px nav gap left no room for
   the Menu button, pushing it past the viewport edge. Tightening the gap and
   the logo's cap only below 480px closes that gap without touching the
   header at tablet/desktop widths or anywhere Renée's approved design is
   otherwise unaffected. */
@media (max-width: 480px) {
  .nav { gap: clamp(8px,3vw,24px); }
  .logo-img { max-width: min(58vw,190px); }
}
/* .btn-outline's white-space:nowrap (line 95) keeps short labels tidy on one
   line, but several approved buttons carry longer labels ("Explore
   Professional Resources", "Preview the Autism Diagnosis Conversation
   Toolkit", the relocated professional-hub card CTAs). At phone widths those
   labels are wider than any single-column container, causing real horizontal
   overflow. Allowing wrap only below 480px fixes every instance at once
   without changing color, border, padding, or position anywhere, and without
   touching tablet/desktop where the buttons already fit on one line. */
@media (max-width: 480px) {
  .btn-outline { white-space: normal; text-align: center; max-width: 100%; }
}

/* ---- Buttons ---- */
.btn-primary {
  text-decoration: none; background: #334e68; color: #faf7f2; font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 28px; display: inline-flex;
  align-items: center; min-height: 44px;
}
.btn-primary:hover { background: #b38a9a; color: #faf7f2; }
.btn-primary:focus-visible { outline: 3px solid #b38a9a; outline-offset: 3px; }
.btn-text {
  text-decoration: none; color: #334e68; font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 16px 20px; border-bottom: 2px solid #b38a9a; display: inline-flex;
  align-items: center; min-height: 44px;
}
.btn-text:hover { color: #b38a9a; }
.btn-text:focus-visible { outline: 3px solid #b38a9a; outline-offset: 3px; }
.btn-outline {
  text-decoration: none; border: 2px solid #334e68; color: #334e68; font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 28px; display: inline-flex;
  align-items: center; min-height: 44px; white-space: nowrap;
}
.btn-outline:hover { background: #334e68; color: #faf7f2; }
.btn-outline:focus-visible { outline: 3px solid #b38a9a; outline-offset: 3px; }
.btn-tan {
  text-decoration: none; background: #c9b8a6; color: #334e68; font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 28px; display: inline-flex;
  align-items: center; min-height: 44px;
}
.btn-tan:hover { background: #faf7f2; color: #334e68; }
.btn-tan:focus-visible { outline: 3px solid #b38a9a; outline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.inline-link:focus-visible { outline: 3px solid #b38a9a; outline-offset: 3px; }

/* ---- Shared type ---- */
.section { }
.h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2.5rem,5.5vw,4.25rem); line-height: 1.08; margin: 0 0 24px; letter-spacing: -0.01em; text-wrap: pretty; }
.h1-final { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2.1rem,4.5vw,3.4rem); line-height: 1.12; margin: 0 0 20px; text-wrap: pretty; }
.h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2rem,4vw,3rem); line-height: 1.12; margin: 0 0 24px; text-wrap: pretty; }
.h2-light { color: #faf7f2; margin: 0 0 8px; }
.h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.6rem,2.8vw,2.2rem); line-height: 1.15; margin: 0 0 8px; text-wrap: pretty; }
.eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #b38a9a; margin: 0 0 16px; }
.eyebrow-light { color: #a8b8a5; }
.body-copy { font-size: 1.05rem; line-height: 1.75; max-width: 60ch; }
.body-copy p, .body-copy-light p { margin: 0 0 20px; }
.body-copy p:last-child, .body-copy-light p:last-child { margin-bottom: 0; }
.body-copy-light { font-size: 1.05rem; line-height: 1.7; color: #faf7f2; max-width: 56ch; }
.body-copy-tight { font-size: 1.05rem; line-height: 1.7; margin: 0; max-width: 60ch; }
.fine-print { font-size: 0.85rem; color: #3e3a39; margin: 0; line-height: 1.5; }
.lede { font-size: clamp(1.05rem,1.6vw,1.2rem); line-height: 1.7; margin: 0 0 16px; max-width: 56ch; }
.credential { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: capitalize; color: #6D6968; margin: 0 0 32px; }
.credential-sub { font-weight: normal; }

/* ---- Image placeholders (replace with real photos) ---- */
.image-placeholder {
  position: relative; background: rgba(51,78,104,0.06); border: 2px dashed rgba(51,78,104,0.3);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #6D6968; font-size: 0.85rem; padding: 16px;
}
.image-placeholder::before { content: attr(data-placeholder); max-width: 80%; }

/* ---- Hero ---- */
.hero { max-width: 1200px; margin: 0 auto; padding: clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(40px,6vw,80px); }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: clamp(32px,5vw,72px); align-items: center; }
.hero-image-col { display: flex; justify-content: center; }
.hero-image-wrap { width: min(100%,400px); }
.hero-quote { font-family: 'Caveat', cursive; font-size: 1.35rem; color: #b38a9a; margin: 16px 0 0; text-align: right; }

/* ---- Reassurance ---- */
.reassurance { border-top: 1px solid rgba(51,78,104,0.15); }
.reassurance-grid { max-width: 1200px; margin: 0 auto; padding: clamp(48px,7vw,96px) clamp(20px,4vw,48px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: clamp(24px,4vw,64px); }
.reassurance-image {
  grid-column: 1 / -1; width: 100%; height: auto; display: block;
  border-radius: 20px; margin-top: clamp(8px,2vw,24px);
  object-fit: cover; object-position: center 65%;
}

/* ---- Compass intro (added with Compass integration; mirrors the
        Professionals section layout — no new colors, type, or spacing) ---- */
.compass-intro { max-width: none; margin: 0; padding: 0; border-top: 1px solid rgba(51,78,104,0.15); background: rgba(201,184,166,0.16); }
.compass-intro-inner { max-width: 1200px; margin: 0 auto; padding: clamp(56px,8vw,104px) clamp(20px,4vw,48px); }
.compass-intro-inner > * { max-width: 900px; }
.compass-intro-copy { max-width: 64ch; margin-bottom: 32px; }

/* ---- Playbook ---- */
.playbook { background: #334e68; color: #faf7f2; }
.playbook-grid { max-width: 1200px; margin: 0 auto; padding: clamp(56px,8vw,104px) clamp(20px,4vw,48px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: clamp(32px,5vw,72px); align-items: center; }
.playbook-cover-wrap { display: flex; justify-content: center; }
.playbook-cover { width: min(100%,340px); box-shadow: 12px 12px 0 rgba(168,184,165,0.35); }
.subtitle-italic { font-family: 'Caveat', cursive; font-size: clamp(1.25rem,2vw,1.6rem); color: #c9b8a6; margin: 0 0 24px; }
.intro { margin-bottom: 24px; }
.checklist { margin: 0 0 32px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 1rem; line-height: 1.6; color: #faf7f2; }
.checklist li { padding-left: 24px; position: relative; }
.checklist li::before { content: "—"; position: absolute; left: 0; color: #a8b8a5; }

/* ---- Beyond band ---- */
.beyond { background: #a8b8a5; border-bottom: 1px solid rgba(51,78,104,0.15); }
.beyond-inner { max-width: 1200px; margin: 0 auto; padding: clamp(32px,5vw,56px) clamp(20px,4vw,48px); display: flex; flex-wrap: wrap; gap: clamp(20px,3vw,48px); align-items: center; justify-content: space-between; }
.beyond-copy { flex: 1 1 480px; }

/* ---- Resources ---- */
.resources-inner { max-width: 1200px; margin: 0 auto; padding: clamp(56px,8vw,104px) clamp(20px,4vw,48px); }
.resources-intro { max-width: 720px; margin-bottom: clamp(32px,5vw,56px); }
.topic-list { display: flex; flex-direction: column; }
.topic-row { border-top: 1px solid rgba(51,78,104,0.25); padding: clamp(24px,3.5vw,40px) 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: clamp(12px,2.5vw,40px); align-items: baseline; }
.topic-row-last { border-bottom: 1px solid rgba(51,78,104,0.25); }
.topic-row p { margin: 0; font-size: 1rem; line-height: 1.7; }
.h3-num { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.5rem,2.4vw,2rem); line-height: 1.15; margin: 0; }
.num { color: #b38a9a; font-weight: 500; margin-right: 14px; }

/* ---- About ---- */
.about { background: rgba(168,184,165,0.22); }
.about-grid { max-width: 1200px; margin: 0 auto; padding: clamp(56px,8vw,104px) clamp(20px,4vw,48px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: clamp(32px,5vw,72px); align-items: start; }
.about-media { display: flex; flex-direction: column; gap: 24px; max-width: 440px; justify-self: center; }
.pull-quote { margin: 0; border-left: 3px solid #b38a9a; padding-left: 20px; }
.pull-quote p { font-family: 'Caveat', cursive; font-size: clamp(1.4rem,2.2vw,1.8rem); line-height: 1.35; margin: 0; color: #334e68; }

/* ---- Professionals ---- */
.professionals { max-width: 900px; margin: 0 auto; padding: clamp(56px,8vw,104px) clamp(20px,4vw,48px); }
.professionals-copy { max-width: 64ch; margin-bottom: 32px; }

/* ---- Final CTA ---- */
.final-cta { border-top: 1px solid rgba(51,78,104,0.15); }
.final-inner { max-width: 760px; margin: 0 auto; padding: clamp(64px,9vw,120px) clamp(20px,4vw,48px); text-align: center; }
.final-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 36px; }

/* ---- Footer ---- */
.site-footer { background: #334e68; color: #faf7f2; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: clamp(48px,6vw,72px) clamp(20px,4vw,48px); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: clamp(28px,4vw,56px); align-items: start; }
.footer-logo { height: 56px; width: auto; display: block; margin: 0 0 12px; }
.footer-name { font-size: 0.9rem; color: #c9b8a6; margin: 0; line-height: 1.6; }
.footer-tagline { font-family: 'Caveat', cursive; font-size: 1.15rem; color: #a8b8a5; margin: 16px 0 0; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem; }
.footer-link { color: #faf7f2; text-decoration-color: #a8b8a5; }
.footer-link:hover { color: #c9b8a6; }
.footer-link:focus-visible { outline: 3px solid #c9b8a6; outline-offset: 3px; }
.footer-disclaimer { font-size: 0.8rem; line-height: 1.65; color: #c9b8a6; margin: 0; max-width: 44ch; }
.footer-copyright { font-size: 0.8rem; color: #c9b8a6; margin: clamp(32px,4vw,48px) 0 0; padding-top: 24px; border-top: 1px solid rgba(250,247,242,0.2); }

/* ---- Flodesk inline form containers ----
   Flodesk renders and styles the form itself (fields, submit button,
   validation, confirmation message). These rules only manage the website
   container around it: width and the surrounding spacing that cannot be set
   inside Flodesk. Do not target Flodesk's internal classes here. */
/* Flodesk renders two different ways depending on the form: transparent
   (Compass) vs. a cream card (HEAR, on navy). A non-negative top margin keeps
   the block tidy in both without the card overlapping the text above it. */
.fd-embed { max-width: 480px; margin: 0 0 4px; }
.fd-embed:empty { min-height: 220px; margin-top: 8px; } /* reserve space while the async form loads */
/* Flodesk always renders an empty title/subtitle block and 30px of form top
   padding above the first field. These forms use the page heading instead, so
   collapse that top chrome to remove the gap above First name / Email. Scoped
   to our embeds; targets Flodesk's stable BEM hooks, no internal markup edits. */
.fd-embed [class*="__title"],
.fd-embed [class*="__subtitle"] { display: none !important; }
.fd-embed form { padding-top: 8px !important; }