/* Homepage typography & spacing polish. Type roles, measure and vertical rhythm
   only: layouts, fonts, colours, imagery and motion come from the earlier layers.

   Rhythm is optical, not numerical. DM Sans metrics (ascender .992, cap .70,
   descender .31) mean a heading's box sits ~.17em above its cap line and ~.19em
   below its baseline, so gaps subtract those insets to give the same *visible*
   distance whatever the heading size.
   A site-wide stylesheet forces h2/h3 leading to 1.05 !important. That suits
   display h2s; titles need more air, so the h3 roles below override it here only. */
.elementor-86 .sv-home{
  /* Roles */
  --sv-h2-section:clamp(32px,3.3vw,52px);
  --sv-lh-display:1.05;         /* site-wide !important h2 leading; kept */
  --sv-h3-card:clamp(24px,2vw,30px);
  --sv-lh-title:1.12;
  --sv-title-small:20px;
  --sv-lh-title-small:1.25;
  --sv-lh-body:1.6;
  --sv-meta-size:14px;
  --sv-action-size:15px;
  --sv-measure:34em;            /* ≈65–70 characters of 18px body copy */
  /* Metric insets */
  --sv-cap-inset:.17em;         /* heading box top → cap line */
  --sv-descent-inset:.19em;     /* heading baseline → box bottom */
  --sv-eyebrow-descent:6px;     /* 14px uppercase label, 1.6 leading */
  --sv-body-cap-inset:8px;      /* 18px body box top → cap line */
  --sv-body-descent:8px;        /* 18px body baseline → box bottom */
  /* Visible distances */
  --sv-see-label:28px;          /* label baseline → heading cap line */
  --sv-see-heading:34px;        /* heading baseline → body cap line */
  --sv-space-stack:16px;        /* paragraph → list within one block */
  --sv-space-item:12px;         /* list item → list item */
  --sv-space-action:28px;       /* body box → pill edge */
  --sv-space-card-action:16px;  /* card copy → card action */
}

/* ---------- Type roles ---------- */
.elementor-86 .sv-home :is(.sv-film-copy,.sv-therapy-heading,.sv-faq-heading,.sv-doctor-copy-inner,.sv-library-header) h2{
  font-size:var(--sv-h2-section);letter-spacing:-.04em;text-wrap:balance}
.elementor-86 .sv-home .sv-closing-top h2{text-wrap:balance}
.elementor-86 .sv-home :is(.sv-feature-video-copy,.sv-route) h3{font-size:var(--sv-h3-card);line-height:var(--sv-lh-title)!important;text-wrap:balance}
.elementor-86 .sv-home .sv-service-copy h3{line-height:var(--sv-lh-title)!important;text-wrap:balance}
.elementor-86 .sv-home :is(.sv-library-item h3,.sv-fact strong){
  font-size:var(--sv-title-small);font-weight:500;letter-spacing:-.02em;line-height:var(--sv-lh-title-small)!important;text-wrap:balance}
.elementor-86 .sv-home .sv-hero h1>span{text-wrap:balance}
.elementor-86 .sv-home .sv-footer-tagline{text-wrap:balance}
/* Body copy: one leading for paragraphs, list items and credential lines. */
.elementor-86 .sv-home :is(.sv-service-copy p,.sv-faq-heading p,.sv-faq-answer-inner,.sv-doctor-intro,.sv-fact span,.sv-feature-video-copy>p:not(.sv-media-status),.sv-resource-description,.sv-route>p){
  line-height:var(--sv-lh-body);text-wrap:pretty}
.elementor-86 .sv-home :is(.sv-film-points li,.sv-service-copy li){line-height:var(--sv-lh-body)}
.elementor-86 .sv-home .sv-faq-list summary{text-wrap:balance}
/* Short bullets: even two-line items instead of a stranded hyphenated tail. */
.elementor-86 .sv-home :is(.sv-film-points li,.sv-service-copy li){text-wrap:balance}
.elementor-86 .sv-home :is(.sv-film-points,.sv-service-copy ul){gap:var(--sv-space-item)}
/* Labels: one weight for every uppercase label, including "Now playing". */
.elementor-86 .sv-home .sv-now-playing{font-weight:400}
/* Captions & metadata share one size. */
.elementor-86 .sv-home :is(.sv-film-caption,.sv-portrait-caption,.sv-resource-duration,.sv-media-status){font-size:var(--sv-meta-size)}
/* Action labels share one size (the supporting "Watch Video" pills were 14px). */
.elementor-86 .sv-home .sv-library-item .sv-media-unavailable{font-size:var(--sv-action-size)}
/* Hero: the Playfair "S" carries a wide side bearing; pull it onto the text edge. */
.elementor-86 .sv-home .sv-hero h1>span:first-child{margin-left:-.05em}

/* ---------- Measure ---------- */
.elementor-86 .sv-home :is(.sv-faq-answer-inner>*,.sv-doctor-intro,.sv-fact span,.sv-service-copy p,.sv-feature-video-copy>p:not(.sv-media-status),.sv-resource-description p){max-width:var(--sv-measure)}

/* ---------- Vertical rhythm: label → heading → body → action ---------- */
.elementor-86 .sv-home :is(.sv-film-copy,.sv-therapy-heading,.sv-service-copy,.sv-faq-heading,.sv-doctor-copy-inner,.sv-library-header>div){gap:0}
.elementor-86 .sv-home :is(.sv-film-copy,.sv-therapy-heading,.sv-service-copy,.sv-faq-heading,.sv-doctor-copy-inner,.sv-library-header>div,.sv-closing-top>div)>*{margin-block:0}
.elementor-86 .sv-home .sv-eyebrow + :is(h2,h3){margin-top:calc(var(--sv-see-label) - var(--sv-eyebrow-descent) - var(--sv-cap-inset))}
.elementor-86 .sv-home :is(.sv-film-copy,.sv-service-copy,.sv-faq-heading,.sv-doctor-copy-inner)>:is(h2,h3):not(:last-child){
  margin-bottom:calc(var(--sv-see-heading) - var(--sv-body-cap-inset) - var(--sv-descent-inset))}
.elementor-86 .sv-home :is(.sv-film-copy,.sv-service-copy,.sv-faq-heading,.sv-doctor-copy-inner)>:is(p,ul)+:is(p,ul){margin-top:var(--sv-space-stack)}
.elementor-86 .sv-home :is(.sv-film-copy,.sv-service-copy,.sv-faq-heading,.sv-doctor-copy-inner)>:is(a,.sv-button,.sv-text-cta){margin-top:var(--sv-space-action)}
/* Cards: copy → action → status. */
.elementor-86 .sv-home .sv-feature-video-copy>:is(button,a){margin-top:calc(var(--sv-space-card-action) - 8px)}
.elementor-86 .sv-home .sv-library-item .sv-media-unavailable{margin-top:calc(var(--sv-space-card-action) - 6px)}
.elementor-86 .sv-home .sv-library-item h3{margin-bottom:2px}

/* ---------- Footer: keep the email on whole segments ---------- */
@media(min-width:761px) and (max-width:1100px){
  .elementor-86 .sv-home .sv-footer-top{grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:clamp(28px,4vw,40px)}
}

/* ---------- Tablet portrait & phone ---------- */
/* Landscape tablet: section h2s share one size small enough for the narrow
   FAQ heading column to set "Common Questions / About Therapy" on two lines. */
@media(min-width:861px) and (max-width:1100px){
  .elementor-86 .sv-home{--sv-h2-section:32px}
  /* keep the 2:3 split; a slightly tighter gutter gives the heading column the
     few pixels "Common Questions" needs (720px frame, so constant here) */
  .elementor-86 .sv-faq-grid{column-gap:32px}
}
@media(max-width:860px){
  .elementor-86 .sv-home{--sv-h2-section:clamp(32px,4.6vw,40px)}
}
@media(max-width:560px){
  .elementor-86 .sv-home{--sv-see-label:26px;--sv-see-heading:30px;--sv-space-action:24px}
}