/* Haven Psychology mobile-responsive layer. Preserves all existing routes, forms, matcher logic, dialogs, maps, Journal tools, and scheduling links. */
:root{--mobile-gutter:clamp(1rem,4.8vw,1.4rem);--mobile-safe-bottom:env(safe-area-inset-bottom,0px);} html,body{max-width:100%;overflow-x:clip;} img,video,iframe,svg{max-width:100%;} button,a,input,select,textarea,summary{touch-action:manipulation;} @media (max-width:980px){:root{--header-height:74px;} .container,.container-wide{width:min(calc(100% - (var(--mobile-gutter) * 2)),var(--container-wide)) !important;} .section,.section-tight{padding-block:clamp(3.8rem,9vw,5.5rem) !important;} .site-header{min-height:var(--header-height) !important;background:rgba(251,248,243,.97) !important;border-bottom-color:rgba(23,51,47,.10) !important;box-shadow:0 8px 28px rgba(18,42,37,.06);} .site-header.is-scrolled{min-height:66px !important;} .site-header .header-inner{grid-template-columns:minmax(0,1fr) auto !important;gap:.75rem !important;} .site-header .brand,.landing-header .brand{min-width:0 !important;overflow:hidden;} .haven-logo-full{width:min(270px,68vw) !important;max-height:66px !important;object-position:left center !important;} .menu-toggle{flex:0 0 auto;width:46px !important;height:46px !important;border-color:rgba(23,51,47,.16) !important;background:rgba(255,253,249,.96) !important;box-shadow:0 8px 20px rgba(23,51,47,.06);} .primary-nav{inset:calc(100% + 1px) 0 auto !important;max-height:calc(100svh - var(--header-height) - 1px);overflow-y:auto;overscroll-behavior:contain;padding:.55rem var(--mobile-gutter) calc(1rem + var(--mobile-safe-bottom)) !important;background:rgba(251,248,243,.985) !important;box-shadow:0 26px 50px rgba(14,39,36,.16) !important;backdrop-filter:blur(18px) saturate(130%);} .primary-nav a{min-height:52px;display:flex;align-items:center;padding:.8rem .15rem !important;font-size:1rem !important;line-height:1.25;} .page-hero-grid,.v3-page-hero-grid,.v3-journal-hero-grid,.v3-service-summary-grid,.v3-location-details,.contact-grid,.article-layout,.v4-home-location-grid,.v4-location-map-grid,.v4-library-intro,.v4-studio-grid,.landing-hero-grid{grid-template-columns:minmax(0,1fr) !important;} .page-hero-actions,.hero-actions,.service-modal-actions,.v5-dbt-actions{align-items:stretch;} .page-hero-actions .button,.hero-actions .button{min-height:50px;} .therapist-carousel,.directory-grid,.matcher-results,.v3-full-results .matcher-results{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} .v3-service-grid,.v6-inline-service-grid,.insurance-cards,.v4-foundation-grid,.v4-studio-outcomes{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} .v3-full-matcher,.matcher-shell,.v3-matcher-layout{grid-template-columns:minmax(0,1fr) !important;} .v3-full-matcher-form,.matcher-panel,.v3-matcher-copy,.v3-service-consult,.v4-pipeline,.sticky-sidebar,.article-share{position:static !important;} .v5-state-options{max-height:min(46svh,340px) !important;overscroll-behavior:contain;} .service-modal,.v5-dbt-modal,.modal-shell{width:min(calc(100% - 1rem),920px) !important;max-height:calc(100dvh - 1rem) !important;} .service-modal-grid,.v5-dbt-modal-grid,.provider-modal-content{grid-template-columns:minmax(0,1fr) !important;} .service-modal-visual,.v5-dbt-modal-visual{max-height:min(36svh,330px);overflow:hidden;} .service-modal-visual img,.v5-dbt-modal-visual img{width:100% !important;height:100% !important;min-height:0 !important;aspect-ratio:16 / 9 !important;object-fit:cover !important;} .provider-modal-photo{min-height:0 !important;max-height:min(48svh,480px) !important;} .modal-close{position:sticky;top:.7rem;right:auto;margin:.7rem .7rem -3.3rem auto;width:46px;height:46px;} .fee-table-wrap,.directory-filter-row,.journal-filter-row{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;} .directory-filter-row,.journal-filter-row{width:100%;display:flex !important;flex-wrap:nowrap !important;gap:.55rem !important;overflow-x:auto;padding:.1rem .05rem .55rem;scrollbar-width:none;scroll-snap-type:x proximity;} .directory-filter-row::-webkit-scrollbar,.journal-filter-row::-webkit-scrollbar{display:none;} .filter-chip{flex:0 0 auto;min-height:44px;scroll-snap-align:start;} .v4-map-card,.v4-full-map,.v4-map-card iframe,.v4-full-map iframe{min-height:clamp(320px,62vw,420px) !important;} .faq-question{min-height:58px;}} @media (max-width:760px){body{padding-bottom:calc(72px + var(--mobile-safe-bottom)) !important;font-size:1rem;} .prototype-ribbon{min-height:28px;flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;padding:.35rem var(--mobile-gutter) !important;font-size:0.75rem !important;line-height:1.25;white-space:nowrap;scrollbar-width:none;} .prototype-ribbon::-webkit-scrollbar{display:none;} .prototype-label{display:none !important;} .haven-logo-full{width:min(230px,66vw) !important;max-height:58px !important;} .site-header,.site-header.is-scrolled{min-height:66px !important;} .site-header .header-inner{min-height:66px !important;} .primary-nav{max-height:calc(100svh - 94px);} .section,.section-tight{padding-block:clamp(3.4rem,13vw,4.8rem) !important;} .section-title,.page-title{max-width:100% !important;font-size:clamp(2.25rem,10.5vw,3.5rem) !important;line-height:.98 !important;} .lede{font-size:1rem !important;line-height:1.65 !important;} .button{min-height:50px;padding-inline:1.15rem;} .hero-actions,.page-hero-actions{width:100%;display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:.65rem !important;} .hero-actions .button,.page-hero-actions .button{width:100% !important;} .v3-hero.v4-video-hero{min-height:clamp(610px,90svh,720px) !important;align-items:end !important;} .v4-video-hero .v3-hero-image,.v4-video-hero .v4-hero-video,.v4-video-hero .v4-hero-poster{object-position:64% center !important;} .v4-video-hero .v3-hero-wash{background:linear-gradient(180deg,rgba(247,245,239,.34) 0%,rgba(247,245,239,.58) 28%,rgba(247,245,239,.92) 66%,rgba(247,245,239,.985) 100%),linear-gradient(90deg,rgba(247,245,239,.84),rgba(247,245,239,.08)) !important;} .v4-video-hero .container.v3-hero-inner{width:min(calc(100% - (var(--mobile-gutter) * 2)),680px) !important;padding-top:5.1rem !important;padding-bottom:clamp(8.2rem,25vw,10rem) !important;} .v3-hero-copy{max-width:100% !important;} .v3-display{max-width:8.2ch !important;margin-bottom:1.1rem !important;font-size:clamp(3.55rem,16vw,5rem) !important;line-height:.84 !important;letter-spacing:-.055em !important;} .v3-display em{display:block;} .v3-hero-lede{max-width:34ch !important;margin-bottom:1.35rem !important;font-size:1rem !important;line-height:1.58 !important;}  .v4-video-hero::after{height:138px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 150' preserveAspectRatio='none'%3E%3Cpath fill='%23f1efe9' d='M0 128 C170 118 305 111 430 116 C548 120 636 100 694 64 C720 48 744 32 760 16 L760 150 L0 150 Z'/%3E%3C/svg%3E") !important;} .v6-quote-section,.v3-quote-section.v6-quote-section{padding-block:4.75rem !important;} .v6-quote-section .v3-quote-inner,.v3-quote-section.v6-quote-section .v3-quote-inner{padding-inline:0 !important;} .v6-quote-section .v6-welcome-copy p,.v3-quote-section.v6-quote-section .v6-welcome-copy p{font-size:clamp(1.65rem,7.8vw,2.25rem) !important;line-height:1.13 !important;text-wrap:pretty !important;} .v3-story-grid,.v6-story-grid{gap:2.2rem !important;} .v3-story-images{min-height:clamp(320px,94vw,430px) !important;} .v3-story-copy h2{font-size:clamp(2.55rem,12vw,4rem) !important;line-height:.96 !important;} .v3-service-grid,.v6-inline-service-grid,.insurance-cards,.v4-foundation-grid,.v4-studio-outcomes{grid-template-columns:minmax(0,1fr) !important;gap:.85rem !important;} button.v3-service-card,button.v3-service-tile,.v3-service-card.service-card-modal-trigger,.v3-service-tile.service-card-modal-trigger{min-height:0 !important;padding:1.25rem !important;border-radius:1.35rem !important;} .v3-service-card h3,.v3-service-tile h2{font-size:clamp(1.45rem,7vw,1.9rem) !important;} .service-card-modal-trigger p{max-width:none !important;font-size:.94rem !important;line-height:1.58 !important;} .v3-matcher-section{padding-top:4.2rem !important;padding-bottom:4.6rem !important;border-radius:0 !important;} .v3-matcher-layout{display:grid !important;gap:2.25rem !important;} .v3-matcher-copy h2{max-width:8.8ch;font-size:clamp(3rem,14vw,4.5rem) !important;line-height:.9 !important;} .v3-matcher-copy>p:not(.eyebrow):not(.v3-privacy-note){font-size:.98rem !important;line-height:1.65 !important;} .v3-quick-form{grid-template-columns:minmax(0,1fr) !important;gap:.85rem !important;} .v3-quick-form .button{grid-column:auto !important;width:100% !important;} .v3-quick-results-wrap{min-width:0;} .v3-quick-results-head{align-items:flex-start !important;gap:.65rem !important;} .v3-quick-results-head a{flex:0 0 auto;} .v3-quick-results{width:calc(100% + var(--mobile-gutter));display:flex !important;gap:.85rem !important;overflow-x:auto !important;padding:.15rem var(--mobile-gutter) .85rem 0 !important;scroll-padding-inline:0 var(--mobile-gutter);scroll-snap-type:x mandatory;scrollbar-width:none;} .v3-quick-results::-webkit-scrollbar{display:none;} .v3-quick-card{flex:0 0 min(84vw,340px) !important;scroll-snap-align:start;scroll-snap-stop:always;} .v3-quick-photo,.therapist-photo{border-radius:1.15rem 1.15rem 0 0 !important;} .v3-journal-head{align-items:flex-start !important;flex-direction:column !important;gap:.85rem !important;} .v3-journal-layout,.blog-grid,.blog-index-grid,.journal-index-grid{grid-template-columns:minmax(0,1fr) !important;} .v3-journal-feature{min-height:clamp(410px,112vw,520px) !important;border-radius:1.4rem !important;} .v3-journal-feature h3{font-size:clamp(2rem,9vw,3rem) !important;} .v3-journal-card{min-height:0 !important;padding:1.25rem !important;} .v4-home-location-grid,.v4-location-map-grid{gap:1.5rem !important;} .v4-map-card,.v4-full-map,.v4-map-card iframe,.v4-full-map iframe{min-height:320px !important;border-radius:1.25rem !important;} .v3-final-cta{min-height:390px !important;border-radius:1.5rem !important;} .v3-final-cta>div{padding:1.3rem !important;} .v3-final-cta h2{font-size:clamp(2.5rem,12vw,3.8rem) !important;} .page-hero,.v3-page-hero,.v3-journal-hero,.landing-hero{padding-block:3.5rem !important;} .page-hero-grid,.v3-page-hero-grid,.v3-journal-hero-grid,.landing-hero-grid{gap:2rem !important;} .page-title,.v3-page-hero h1,.v3-journal-hero h1,.landing-hero .display-title{max-width:100% !important;font-size:clamp(2.8rem,12.8vw,4.4rem) !important;line-height:.94 !important;} .v3-page-hero figure,.v3-journal-hero figure{min-height:0 !important;height:auto !important;aspect-ratio:4 / 3 !important;border-radius:1.4rem !important;} .v3-service-tile,.v3-service-tile:nth-child(even){grid-template-columns:minmax(0,1fr) !important;min-height:0 !important;border-radius:1.35rem !important;} .v3-service-tile:nth-child(even) img{order:0 !important;} .v3-service-tile img{height:auto !important;aspect-ratio:16 / 10 !important;} .v3-service-tile>div{padding:1.35rem !important;} .v3-bullet-cards,.v5-dbt-components,.v4-form-grid,.v4-cover-selector,.v4-studio-status-row{grid-template-columns:minmax(0,1fr) !important;} .directory-toolbar{width:100%;align-items:stretch !important;flex-direction:column !important;gap:.65rem !important;} .directory-count{margin:0 !important;} .therapist-carousel,.directory-grid,.matcher-results,.v3-full-results .matcher-results{grid-template-columns:minmax(0,1fr) !important;gap:1rem !important;} .v3-full-matcher-form{padding:1.25rem !important;border-radius:1.3rem !important;} .v3-office-gallery{grid-template-columns:minmax(0,1fr) !important;} .v3-office-gallery figure,.v3-office-gallery figure:first-child{grid-column:auto !important;min-height:0 !important;aspect-ratio:4 / 3;border-radius:1.25rem !important;} .article-hero-inner{padding-block:3.6rem !important;} .article-title{font-size:clamp(2.6rem,12vw,4.1rem) !important;line-height:.98 !important;} .article-byline{justify-content:flex-start !important;gap:.45rem .9rem !important;} .article-body{min-width:0;} .article-body img,.article-body iframe,.article-body video{max-width:100%;height:auto;} .contact-card{align-items:flex-start !important;} .contact-card a,.contact-card p{overflow-wrap:anywhere;} .modal-backdrop{place-items:end center !important;padding:.45rem !important;} .modal-shell,.service-modal,.v5-dbt-modal{width:100% !important;max-height:calc(100dvh - .45rem) !important;border-radius:1.35rem 1.35rem .4rem .4rem !important;} .provider-modal-copy,.v5-dbt-modal-copy,.service-modal{padding:1.25rem !important;} .provider-modal-copy h2,.v5-dbt-modal-copy h2,.service-modal-copy h2{font-size:clamp(2.2rem,11vw,3.25rem) !important;} .provider-modal-photo{max-height:min(42svh,390px) !important;} .service-modal-bullets{grid-template-columns:minmax(0,1fr) !important;} .newsletter-modal{padding:3.7rem 1.15rem 1.6rem !important;} .newsletter-row{grid-template-columns:minmax(0,1fr) !important;} .newsletter-row .button{width:100%;} .mobile-consult-cta{min-height:calc(64px + var(--mobile-safe-bottom)) !important;padding:.85rem var(--mobile-gutter) calc(.85rem + var(--mobile-safe-bottom)) !important;} .v5-journal-tab{left:.65rem !important;bottom:calc(76px + var(--mobile-safe-bottom)) !important;max-width:calc(100vw - 1.3rem);} .site-footer{padding-bottom:calc(2rem + var(--mobile-safe-bottom)) !important;} .footer-grid,.footer-bottom,.footer-contact-column,.footer-contact-column address{grid-template-columns:minmax(0,1fr) !important;} .footer-brand-column,.footer-contact-column{grid-column:auto !important;} .footer-legal{justify-content:flex-start !important;flex-wrap:wrap;} .faq-question{padding-block:1rem !important;font-size:1.25rem !important;line-height:1.25;} .faq-answer{padding:0 0 1.2rem !important;}} @media (max-width:480px){:root{--mobile-gutter:.95rem;} .prototype-ribbon{font-size:0.75rem !important;} .haven-logo-full{width:min(205px,66vw) !important;max-height:54px !important;} .menu-toggle{width:44px !important;height:44px !important;} .v3-hero.v4-video-hero{min-height:clamp(590px,88svh,680px) !important;} .v4-video-hero .container.v3-hero-inner{padding-top:4.4rem !important;padding-bottom:8.2rem !important;} .v3-display{font-size:clamp(3.25rem,16.5vw,4.3rem) !important;}  .v3-story-images{min-height:310px !important;} .v3-quick-results-head{flex-direction:column !important;} .v3-quick-card{flex-basis:min(88vw,330px) !important;} .v3-journal-feature{min-height:410px !important;} .fee-table{min-width:620px !important;} .modal-backdrop{padding:0 !important;} .modal-shell,.service-modal,.v5-dbt-modal{max-height:100dvh !important;border-radius:1.2rem 1.2rem 0 0 !important;} .provider-modal-copy,.v5-dbt-modal-copy,.service-modal{padding:1.1rem !important;}} @media (max-width:760px) and (orientation:landscape){.v3-hero.v4-video-hero{min-height:620px !important;} .modal-shell,.service-modal,.v5-dbt-modal{max-height:100dvh !important;} .provider-modal-content,.service-modal-grid{grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr) !important;} .provider-modal-photo,.service-modal-visual{max-height:100dvh !important;}} @media (prefers-reduced-motion:reduce){.v3-quick-results,.directory-filter-row,.journal-filter-row{scroll-behavior:auto !important;}}

/* Mobile-only hero video impact — START */
@media (max-width: 760px) {
  /* Shift the 16:9 footage toward the open shoreline instead of the grass-heavy right edge. */
  .v4-video-hero .v3-hero-image,
  .v4-video-hero .v4-hero-video,
  .v4-video-hero .v4-hero-poster {
    object-position: 44% 50% !important;
    transform: scale(1.01) !important;
    filter: saturate(1.06) contrast(1.06) brightness(.94) !important;
  }

  /* Keep text readable while allowing the moving sky, horizon, surf, and beach to remain visible. */
  .v4-video-hero .v3-hero-wash {
    background:
      linear-gradient(180deg,
        rgba(247,244,237,.02) 0%,
        rgba(247,244,237,.08) 25%,
        rgba(247,244,237,.34) 52%,
        rgba(247,244,237,.78) 72%,
        rgba(247,244,237,.97) 100%),
      linear-gradient(90deg,
        rgba(247,244,237,.28) 0%,
        rgba(247,244,237,.02) 78%) !important;
  }

  /* Preserve the existing content and actions while giving the video more breathing room above them. */
  .v4-video-hero .container.v3-hero-inner {
    padding-top: 6.3rem !important;
  }

  .v4-video-hero .v3-display,
  .v4-video-hero .v3-hero-lede {
    text-shadow: 0 1px 18px rgba(255,253,249,.48);
  }
}
/* Mobile-only hero video impact — END */

/* Mobile quote and footer refinement - START */
@media (max-width: 760px) {
  .v6-quote-section .v3-quote-inner,
  .v3-quote-section.v6-quote-section .v3-quote-inner {
    width: 100% !important;
    max-width: 38rem !important;
    margin-inline: auto !important;
    padding-inline: var(--mobile-gutter) !important;
    text-align: center !important;
  }

  .v6-quote-section .v3-quote-mark,
  .v3-quote-section.v6-quote-section .v3-quote-mark {
    display: block !important;
    width: max-content !important;
    margin: 0 auto .85rem !important;
    text-align: center !important;
  }

  .v6-quote-section blockquote,
  .v3-quote-section.v6-quote-section blockquote {
    width: 100% !important;
    max-width: 34rem !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .v6-quote-section blockquote p,
  .v3-quote-section.v6-quote-section blockquote p,
  .v6-quote-section blockquote cite,
  .v3-quote-section.v6-quote-section blockquote cite {
    text-align: center !important;
  }

  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2rem 1rem !important;
    align-items: start !important;
  }

  .site-footer .footer-brand-column,
  .site-footer .footer-contact-column {
    grid-column: 1 / -1 !important;
  }

  .site-footer .footer-list {
    gap: .45rem !important;
  }

  .site-footer .footer-list a {
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
  }

  .site-footer .footer-heading {
    margin-bottom: .75rem !important;
    /* 0.78rem lands at 10.9px here, which is small for the label naming a
       column of links. Uppercase and letterspacing carry some of it, but not
       that much. */
    font-size: .84rem !important;
  }
}
/* Mobile quote and footer refinement - END */

/* Mobile hero playback repair - START */
@media (max-width: 760px) {
  .v4-video-hero .v4-hero-video {
    object-position: 50% 50% !important;
    transform: none !important;
    filter: saturate(1.05) contrast(1.04) brightness(.96) !important;
  }

  .v4-video-hero .v4-hero-poster {
    object-position: 44% 50% !important;
    transform: scale(1.01) !important;
  }

  .v4-video-hero video::-webkit-media-controls,
  .v4-video-hero video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
  }
}
/* Mobile hero playback repair - END */

/* Homepage header / hero integration — mobile - START */
/* The mobile header rules above set background/border with !important, so the
   transparent-at-top state has to answer in kind. */
@media (max-width: 980px) {
  body.is-home .site-header:not(.is-scrolled) {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* The hamburger keeps a frosted disc so it stays readable and tappable
     against the moving footage. */
  body.is-home .site-header:not(.is-scrolled) .menu-toggle {
    background: rgba(255, 253, 249, .74) !important;
    border-color: rgba(23, 51, 47, .22) !important;
    backdrop-filter: blur(10px);
  }

  /* An open menu restores the solid header behind it. */
  body.is-home .site-header:not(.is-scrolled):has([aria-expanded="true"]) {
    background: rgba(251, 248, 243, .97) !important;
    border-bottom-color: rgba(23, 51, 47, .10) !important;
  }
}

@media (max-width: 760px) {
  /* Header is 66px + 1px border below this breakpoint. */
  :root { --hero-header-offset: 67px; }

  body.is-home .v4-video-hero .container.v3-hero-inner {
    padding-top: calc(3.4rem + var(--hero-header-offset)) !important;
  }
}

@media (max-width: 480px) {
  body.is-home .v4-video-hero .container.v3-hero-inner {
    padding-top: calc(2.4rem + var(--hero-header-offset)) !important;
  }
}
/* Homepage header / hero integration — mobile - END */

/* Mobile refinements — MB batch - START */
@media (max-width: 980px) {
  /* MB-01: full lockup at rest, compact once the visitor starts reading. */
  .site-header .haven-logo-full { transition: max-height 220ms ease, width 220ms ease; }
  .site-header.is-scrolled .haven-logo-full { max-height: 46px !important; width: min(188px, 54vw) !important; }

  /* MB-10: footer links stay at a comfortable reading size. */
  .site-footer .footer-list a,
  .site-footer .footer-contact-column address a { font-size: .84rem !important; line-height: 1.5 !important; }
  .site-footer .footer-list { gap: .6rem !important; }
}

@media (max-width: 760px) {
  /* MB-04: a shorter hero still lands, and reaches the next section sooner. */
  .v3-hero.v4-video-hero { min-height: clamp(560px, 80svh, 650px) !important; }
  .v4-video-hero .container.v3-hero-inner { padding-bottom: clamp(6.4rem, 19vw, 8rem) !important; }

  /* MB-03: never let iOS render a play affordance over a decorative hero. */
  .v4-video-hero video::-webkit-media-controls-panel,
  .v4-video-hero video::-webkit-media-controls-overlay-play-button,
  .v4-video-hero video::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; }

  /* MB-11: facts and the action come before the long description, so a card is
     usable with one thumb without scrolling past prose to reach the button. */
  .therapist-content { display: flex; flex-direction: column; }
  .therapist-content h3 { order: 0; }
  .therapist-content .therapist-role { order: 1; }
  .therapist-content .therapist-credential { order: 2; }
  .therapist-content .match-explanation { order: 3; margin-top: .5rem; }
  .therapist-content .tag-list { order: 4; }
  .therapist-content .therapist-meta { order: 5; }
  .therapist-content .therapist-blurb { order: 6; min-height: 0 !important; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
}

@media (max-width: 480px) {
  .v3-hero.v4-video-hero { min-height: clamp(540px, 78svh, 620px) !important; }
}
/* Mobile refinements — MB batch - END */

/* MB-04 / MB-15: short handsets (iPhone SE and similar) need the hero to fit
   the screen, not just be shorter. Trim the surrounding space further and let
   the section size to its content. */
@media (max-width: 760px) and (max-height: 720px) {
  .v3-hero.v4-video-hero { min-height: 0 !important; }
  body.is-home .v4-video-hero .container.v3-hero-inner {
    padding-top: calc(1.5rem + var(--hero-header-offset)) !important;
    padding-bottom: 4.8rem !important;
  }
  .v4-video-hero .v3-display { font-size: clamp(3rem, 14vw, 4.2rem) !important; margin-bottom: .8rem !important; }
  .v4-video-hero .v3-hero-lede { margin-bottom: 1rem !important; }
  .hero-cta-note { margin-top: .7rem !important; font-size: 0.75rem !important; }
}

/* ==========================================================================
   MB-11 / MB-15 — one-hand usability. The 320–430px sweep found interactive
   controls below the WCAG 2.2 AA target-size minimum (2.5.8, 24x24 CSS px):
   footer links resolved to 116x15, therapist "View profile" buttons to
   105x22, "Meet the full team" to 188x27, and the matcher clear control to
   131x29. Text under 12px was flagged in the same pass. These rules raise
   the touch area without changing any visual weight the design relies on.
   ========================================================================== */
@media (max-width: 980px) {
  /* Footer link rows become full-width targets rather than bare text. */
  .site-footer .footer-list a,
  .site-footer .footer-contact-column address a {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
  }
  .site-footer .footer-list { gap: .1rem !important; }

  /* Card and inline actions: comfortable targets, still visually light. */
  .v3-quick-card button[data-provider-open],
  .therapist-content button[data-provider-open],
  .therapist-card button[data-provider-open] {
    min-height: 44px !important;
    padding: .6rem 1.05rem !important;
  }
  .text-link,
  .matcher-clear-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .path-card .text-link { min-height: 44px !important; }

  /* Directory filter chips were rendering at 11.5px — below the sweep floor. */
  .filter-chip,
  .directory-filter-row button {
    font-size: .78rem !important;
    min-height: 36px !important;
    padding: .45rem .95rem !important;
  }
}

@media (max-width: 760px) {
  /* No body copy below 12px anywhere in the mobile experience. */
  .hero-cta-note { font-size: .78rem !important; }
}

@media (max-width: 760px) and (max-height: 720px) {
  .hero-cta-note { font-size: .78rem !important; }
}

/* The same 24x24 minimum applies to the footer legal row, the client-portal
   link, and the matcher preview link, which the first pass missed. */
@media (max-width: 980px) {
  .footer-legal a,
  .footer-portal a,
  .v3-quick-results-head a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
  }
  .footer-legal { gap: .2rem 1.2rem !important; }
}

/* The contact cards render phone and email as bare inline links (100x15 and
   199x15). They are standalone controls rather than links inside a sentence,
   so the 24px minimum applies to them too. */
@media (max-width: 980px) {
  .contact-card a[href^="tel:"],
  .contact-card a[href^="mailto:"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
  }
}

/* ==========================================================================
   Stacked brand lockup — mobile header treatment (owner request, Aug 17)

   The stacked logo needs a little more bar height than the old horizontal
   lockup. The drawer submenu for Therapy Services renders inline (always
   expanded) so every service page stays one tap away; the chevron toggle is
   desktop/touch-nav furniture and hides in the drawer.
   ========================================================================== */
@media (max-width: 980px) {
  :root { --header-height: 104px; }
  .site-header { min-height: 104px !important; }
  .site-header.is-scrolled { min-height: 84px !important; }
  .site-header .header-inner { min-height: 0 !important; }
  .site-header .haven-logo-stacked { width: 94px !important; max-height: none !important; transition: width 200ms ease; }
  .site-header.is-scrolled .haven-logo-stacked { width: 72px !important; }

  .primary-nav .nav-item.has-submenu { display: block; position: static; }
  .primary-nav .has-submenu > a { border-bottom: 0 !important; }
  .submenu-toggle { display: none !important; }
  .nav-submenu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
    padding: 0 0 .5rem .95rem !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .nav-submenu a {
    min-height: 46px !important;
    padding: .5rem .15rem !important;
    font-size: .93rem !important;
    border-bottom: 0 !important;
  }
}

@media (max-width: 760px) {
  /* Header is 94px + 1px border at handset sizes with the stacked logo. */
  :root { --hero-header-offset: 95px; }
  .site-header, .site-header.is-scrolled { min-height: 94px !important; }
  .site-header .header-inner { min-height: 94px !important; }
  .site-header .haven-logo-stacked { width: 86px !important; }
  .site-header.is-scrolled .haven-logo-stacked { width: 68px !important; }
}

@media (max-width: 480px) {
  .site-header .haven-logo-stacked { width: 80px !important; }
}

/* The drawer previously relied on backdrop-filter frosting over a .985 alpha
   background; devices without backdrop-filter support showed page content
   ghosting through the menu. A fully opaque background degrades nowhere. */
@media (max-width: 980px) {
  .primary-nav { background: rgb(251, 248, 243) !important; }
}

/* ── Intermediate widths (the half-screen band) ───────────────────────────
   The site was tuned at full desktop and at phone width; between roughly
   760px and 1100px several layouts broke. These rules cover that band. */

/* Three steps stay on one row. Previously .steps-grid collapsed to two
   columns at 980px, which left the third step beside an empty cell. */
@media (max-width:1024px){
  .steps-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .steps-grid .step-card{min-height:0 !important;padding:1.15rem 1rem 1.3rem !important;}
  .steps-grid .step-number{font-size:2.3rem !important;}
  .steps-grid .step-card h3{margin:1rem 0 .5rem !important;font-size:1.08rem !important;line-height:1.25;}
  .steps-grid .step-card p{font-size:.8rem !important;line-height:1.5;}
  .steps-grid .step-card::after{display:none !important;}
}
@media (max-width:700px){
  .steps-grid{grid-template-columns:minmax(0,1fr) !important;gap:.85rem !important;}
  .steps-grid .step-card{padding:1.25rem !important;}
  .steps-grid .step-number{font-size:2.6rem !important;}
  .steps-grid .step-card h3{font-size:1.25rem !important;}
}

/* The closing consultation card put its copy and its buttons in a
   "1fr auto" grid that only collapsed at 760px. In between, the button
   column took the space it needed and squeezed the paragraph into a
   column a few words wide. */
@media (max-width:1080px){
  .cta-band-inner{grid-template-columns:minmax(0,1fr) !important;gap:1.5rem !important;}
  .cta-band h2{max-width:22ch !important;}
  .cta-actions{display:flex !important;flex-wrap:wrap;gap:.7rem;}
  .cta-actions .button{flex:0 1 auto;}
}
@media (max-width:560px){
  .cta-actions{flex-direction:column;align-items:stretch;}
  .cta-actions .button{width:100%;}
}

/* The drawer laid its items out with justify-content:flex-end. Once the
   content was taller than the panel the overflow went upward, off the top
   of the scroll container, where scrolling cannot reach it — the panel
   reported no overflow at all. Start-aligned, the overflow goes downward
   and overflow-y:auto works. */
@media (max-width:980px){
  .site-header .primary-nav{justify-content:flex-start !important;}
  /* Below the desktop breakpoint the submenu had no styling at all, so it
     rendered permanently expanded and pushed the rest of the menu out of
     view. It now behaves as a disclosure. */
  /* A plain disclosure. The grid 0fr/1fr collapse only sizes the first
     explicit row, so the remaining links kept their auto height and the
     panel stayed open. */
  .site-header .primary-nav .nav-submenu{display:none !important;padding-left:.9rem;}
  .site-header .primary-nav .has-submenu.is-open .nav-submenu{display:block !important;}
  .site-header .primary-nav .nav-submenu a{padding-block:.55rem !important;min-height:46px;}
  .site-header .primary-nav .nav-item.has-submenu{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  }
  .site-header .primary-nav .nav-submenu{flex:1 0 100%;}
  .submenu-toggle{flex:0 0 auto;width:44px;height:44px;}
}

/* The homepage hero runs behind the header here as it does on the desktop,
   so the logo and the menu button sit over the footage rather than on a bar
   above it (owner request).

   This used to be turned off, for two reasons that have both since expired.
   The pull-up was a fixed 75px while the header rendered taller than that,
   which left a strip of page background above the hero — but the offset is
   measured from the header now, and re-measured whenever it changes size, so
   it cannot be short. And the header was opaque at these widths, so there was
   nothing to see through anyway; it is transparent at the top of the
   homepage now.

   The inner column pays back what the hero borrows, or the headline would
   start underneath the bar. */
@media (max-width:980px){
  body.is-home .v4-video-hero{margin-top:calc(var(--hero-header-offset) * -1) !important;}
  .v4-video-hero .container.v3-hero-inner{
    padding-top:calc(clamp(2.6rem,5vw,4rem) + var(--hero-header-offset)) !important;
  }
}

/* iOS Safari zooms the whole page when a form control smaller than 16px takes
   focus, and leaves it zoomed — so tapping the age dropdown or the state
   search on the matcher threw the layout sideways and the visitor had to
   pinch back out mid-task. The three controls that did it are on the two
   paths that matter most: the therapist matcher and Journal search. 16px is
   the threshold, not a preference; the boxes are 48-52px tall so the larger
   type costs nothing. */
@media (max-width: 980px) {
  select,
  input[type="search"],
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  .v5-state-combobox input,
  .journal-search-input { font-size: 16px !important; }
}