/* Homepage mobile & tablet refinement. Phones, tablets (≤1100px) and short
   landscape screens only; desktop composition untouched. No copy, order, colour,
   type-family or emphasis changes: arrangement, sizing and touch/keyboard comfort. */

/* Keyboard focus and in-page anchors land clear of the floating navigation.
   Browsers scroll a focused control just into view, which left it under the
   fixed header; the scroller's padding now reserves the header band (the old
   per-section 96px margins are folded into it so anchors do not double up). */
html:has(.elementor-86 .sv-home){scroll-padding-top:96px;scroll-padding-bottom:16px}
.elementor-86 .sv-home.sv-home>:is(#provider,#services,#faq,#doctor,#resources),
.elementor-86 .sv-home.sv-home :is(.sv-provider-film,.sv-therapy,.sv-faq-list details){scroll-margin-top:0;scroll-margin-bottom:0}

/* Hero proof row: on narrow phones the avatar stack shrank under its own
   images and "5000+ Patients Served" overlapped the last face. */
.elementor-86 .sv-home.sv-home .sv-hero-proof .sv-audience{flex-shrink:0}
.elementor-86 .sv-home.sv-home .sv-hero-proof>span{align-self:center;text-wrap:balance}

/* Portrait tablets (861–1100px wide): the desktop full-screen hero left a
   ~400px empty band under the content. Size it to its content, as at 768px. */
@media(min-width:861px) and (max-width:1100px) and (orientation:portrait){
  .elementor-86 .sv-home.sv-home .sv-hero{min-height:auto}
}

/* Phones: the "Watch on YouTube" pill covered John's face in a 350px frame
   wherever it sat. It moves just below the frame, right-aligned where it was,
   so the film stays unobstructed. The frame keeps its rounded clip on the media. */
@media(max-width:560px){
  .elementor-86 .sv-home.sv-home .sv-provider-film .sv-film-frame{overflow:visible;margin-bottom:56px}
  .elementor-86 .sv-home.sv-home .sv-provider-film .sv-film-frame>img,
  .elementor-86 .sv-home.sv-home .sv-provider-film .sv-film-shade,
  .elementor-86 .sv-home.sv-home .sv-provider-film .sv-film-frame::after{border-radius:inherit;overflow:hidden}
  .elementor-86 .sv-home.sv-home .sv-provider-film .sv-watch-link{top:calc(100% + 12px);right:0}
}

/* Phones: FAQ questions wrapped into narrow three-line stacks. Slightly tighter
   card insets (answer aligned to the question) give each question ~16px more. */
@media(max-width:430px){
  .elementor-86 .sv-home.sv-home .sv-faq-list summary{padding-inline:18px;gap:12px}
  .elementor-86 .sv-home.sv-home .sv-faq-list .sv-faq-answer-inner{padding-inline:18px}
}

/* Up-next videos wherever the list is narrow (phones, and the 861–1100px
   two-column library): thumbnail beside duration + title, then description and
   action at the full row width instead of a 150–230px column. */
@media(max-width:560px),(min-width:861px) and (max-width:1100px){
  .elementor-86 .sv-home.sv-home .sv-library-item{grid-template-columns:var(--sv-upnext-thumb,96px) minmax(0,1fr);column-gap:16px;row-gap:0;align-items:start}
  .elementor-86 .sv-home.sv-home .sv-library-item-copy{display:contents}
  .elementor-86 .sv-home.sv-home .sv-library-item .sv-resource-thumb{grid-column:1;grid-row:1/3;align-self:start}
  .elementor-86 .sv-home.sv-home .sv-library-item .sv-resource-duration{grid-column:2;grid-row:1;justify-self:start}
  .elementor-86 .sv-home.sv-home .sv-library-item h3{grid-column:2;grid-row:2;margin-top:2px}
  .elementor-86 .sv-home.sv-home .sv-library-item :is(.sv-resource-description,.sv-media-unavailable,.sv-media-status){grid-column:1/-1}
  .elementor-86 .sv-home.sv-home .sv-library-item .sv-resource-description{margin-top:16px}
  .elementor-86 .sv-home.sv-home .sv-library-item .sv-media-unavailable{margin-top:14px;justify-self:start}
  .elementor-86 .sv-home.sv-home .sv-library-item .sv-media-status{margin-top:6px}
}
@media(min-width:861px) and (max-width:1100px){.elementor-86 .sv-home{--sv-upnext-thumb:112px}}

/* Provider video dialog close: the × glyph inherited the cream fill colour and
   was invisible at every width (a blank disc). Ink glyph on the cream control. */
.elementor-86 .sv-modal.sv-modal .sv-modal-close{color:var(--sv-ink);font-size:24px}

/* Provider video dialog on touch-size screens: the close button sat over the
   video's top-right corner, and in landscape the video ran past the screen.
   Close gets its own band; the video is sized to fit the viewport height. */
@media(max-width:1100px),(max-height:500px){
  .elementor-86 .sv-modal.sv-modal{width:min(960px,calc(100% - 24px),calc((100dvh - 156px) * 16 / 9 + 28px))}
  .elementor-86 .sv-modal.sv-modal .sv-modal-panel{padding:60px 14px 14px}
  .elementor-86 .sv-modal.sv-modal .sv-modal-close{top:8px;right:8px}
}

/* Short landscape phones (≤500px tall): the navigation, display headline and
   full-width media were each sized for portrait and filled or exceeded the screen. */
@media(max-height:500px) and (orientation:landscape) and (max-width:1100px){
  html:has(.elementor-86 .sv-home){scroll-padding-top:80px}
  .elementor-86 .sv-home.sv-home .sv-header{top:8px}
  .elementor-86 .sv-home.sv-home .sv-brand img{height:44px;width:auto}
  .elementor-86 .sv-home.sv-home .sv-hero h1{font-size:min(var(--sv-hero-size),16svh)}
  .elementor-86 .sv-home.sv-home :is(.sv-film-frame,.sv-portrait-wrap),
  .elementor-86 .sv-home.sv-home .sv-therapy :is(.sv-service-media,.sv-service-image){max-height:calc(100svh - 108px)}
  .elementor-86 .sv-home.sv-home .sv-feature-video-media img{width:100%;max-height:calc(100svh - 108px);object-fit:cover}
}

/* Mobile scroll motion: the provider intro used a sideways slide and an image
   zoom (the only horizontal motion left on phones). Same short vertical settle
   as every other mobile entrance; content stays ≥ .94 opacity throughout. */
@media(prefers-reduced-motion:no-preference) and (max-width:760px){
  .elementor-86 .sv-home .sv-provider-film[data-sv-intro-motion="true"]:not([data-sv-intro-entered="true"]) .sv-film-frame{transform:translate3d(0,8px,0)}
  .elementor-86 .sv-home .sv-provider-film[data-sv-intro-motion="true"] .sv-film-frame{transition-duration:.48s}
  .elementor-86 .sv-home .sv-provider-film[data-sv-intro-motion="true"] .sv-film-frame>img{transform:none;transition:none}
  .elementor-86 .sv-home .sv-provider-film[data-sv-intro-motion="true"] .sv-film-copy>*{transition-delay:0s}
}