/* Homepage component consistency & interaction states.
   One system for every action and control: three emphasis levels, one set of
   state rules, one timing, one focus ring, one line and icon weight.
   Layout, copy, destinations, fonts, palette and entrance motion come from the
   earlier layers and are untouched; nothing here changes an element's box.

   Emphasis
     primary    solid pill: booking actions (cream on dark, ink on light)
     secondary  outlined pill: exploring actions ("Learn More", "See the Resource
                Library", the hero's second choice, "Watch on YouTube" over media)
     tertiary   text: navigation, therapy paths, footer, description toggles
   States (identical recipe at every level)
     hover      tone shift only; arrows nudge inside the pill (no lift, no scale)
     pressed    a deeper step of the same tone
     focus      2px ring, 3px offset; gold on dark surfaces, ink on light ones
   Hover styling applies only on devices that really hover, so touch never keeps
   a stuck hover; pressed feedback works for touch and pointer alike. */
.elementor-86 .sv-home{
  --sv-dur-state:.2s;                 /* hover / press / focus colour changes */
  --sv-dur-toggle:.28s;               /* open / close / tab switch (matches JS) */
  --sv-ease-state:var(--sv-ease,cubic-bezier(.22,1,.36,1));
  --sv-line:1px;
  --sv-focus-width:2px;
  --sv-focus-offset:3px;
  --sv-focus-on-dark:var(--sv-gold);  /* 7:1 against the plum surfaces */
  --sv-focus-on-light:var(--sv-ink);  /* gold is only 2.4:1 on cream */
  --sv-icon-stroke:1.5px;             /* rendered stroke of every line icon */
  --sv-arrow-nudge:3px;
  /* Primary */
  --sv-primary-light-hover:color-mix(in srgb,var(--sv-light) 86%,var(--sv-gold));
  --sv-primary-light-press:color-mix(in srgb,var(--sv-light) 74%,var(--sv-gold));
  --sv-primary-ink-hover:color-mix(in srgb,var(--sv-ink) 55%,#3a1c63);
  --sv-primary-ink-press:var(--sv-dark);
  /* Secondary & tertiary tints */
  --sv-outline-on-dark:rgba(247,241,232,.5);
  --sv-outline-on-dark-strong:rgba(247,241,232,.8);
  --sv-outline-on-light:rgba(24,11,48,.4);
  --sv-outline-on-light-strong:rgba(24,11,48,.7);
  --sv-tint-hover-dark:rgba(247,241,232,.08);
  --sv-tint-press-dark:rgba(247,241,232,.14);
  --sv-tint-hover-light:rgba(24,11,48,.06);
  --sv-tint-press-light:rgba(24,11,48,.11);
  --sv-outline-disabled:rgba(247,241,232,.2);
  --sv-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --sv-icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* ---------- Shared timing: every state change uses the same curve ---------- */
.elementor-86 .sv-home.sv-home :is(.sv-button,.sv-text-cta,.sv-watch-link,.sv-nav-book,.sv-library-route,.sv-media-unavailable,.sv-nav-desktop a,.sv-menu a,.sv-menu summary,.sv-therapy-tab,.sv-therapy-paths a,.sv-footer a,.sv-description-toggle,.sv-film-play,.sv-faq-list details,.sv-faq-list summary){
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--sv-dur-state) var(--sv-ease-state),color var(--sv-dur-state) var(--sv-ease-state),
    box-shadow var(--sv-dur-state) var(--sv-ease-state),border-color var(--sv-dur-state) var(--sv-ease-state),
    text-decoration-color var(--sv-dur-state) var(--sv-ease-state)}
.elementor-86 .sv-home.sv-home :is(.sv-button,.sv-text-cta,.sv-watch-link,.sv-nav-book,.sv-library-route,.sv-therapy-paths a) svg,
.elementor-86 .sv-home.sv-home .sv-route .sv-button::after{transition:transform var(--sv-dur-state) var(--sv-ease-state)}

/* ---------- Pills: one shape, height, padding and label ---------- */
.elementor-86 .sv-home.sv-home :is(.sv-button,.sv-text-cta,.sv-watch-link,.sv-nav-book,.sv-library-route,.sv-media-unavailable){
  min-height:44px;padding:0 24px;border-radius:var(--sv-pill);font-size:15px;font-weight:500;letter-spacing:0;line-height:1;text-transform:none}
.elementor-86 .sv-home.sv-home .sv-nav-desktop a.sv-nav-book{padding:0 24px}
.elementor-86 .sv-home.sv-home .sv-library-item .sv-media-unavailable{padding:0 24px}
/* Arrows: 18px, 8px after the label, same stroke everywhere. */
.elementor-86 .sv-home.sv-home :is(.sv-button,.sv-text-cta,.sv-watch-link,.sv-nav-book,.sv-library-route) svg{width:18px;height:18px;margin-left:8px;flex:none;stroke-width:calc(var(--sv-icon-stroke) * 24 / 18)}
/* The closing booking actions were the only content "Book a Session" pills
   without the arrow; drawn decoratively so markup and label stay native. */
.elementor-86 .sv-home.sv-home .sv-route .sv-button::after{content:"";width:18px;height:18px;margin-left:8px;flex:none;background:currentColor;
  -webkit-mask:var(--sv-arrow-right) center/18px no-repeat;mask:var(--sv-arrow-right) center/18px no-repeat}
/* No lift on hover anywhere (it read as layout movement); the play button keeps only its centring. */
.elementor-86 .sv-home.sv-home :is(a,button):not(.sv-film-play):is(:hover,:active){transform:none}

/* Primary on dark (cream) */
.elementor-86 .sv-home.sv-home :is(.sv-nav-book,.sv-hero-action-row a:first-child,.sv-film-copy .sv-text-cta,.sv-doctor-copy .sv-text-cta,.sv-route-dark .sv-button,.sv-menu summary){background:var(--sv-light);color:var(--sv-ink);box-shadow:none}
/* Primary on light (ink) */
.elementor-86 .sv-home.sv-home :is(.sv-faq-heading .sv-text-cta,.sv-route-light .sv-button){background:var(--sv-ink);color:var(--sv-light);box-shadow:none}
/* Secondary on dark */
.elementor-86 .sv-home.sv-home :is(.sv-hero-action-row a:nth-child(2),.sv-library-route){background:transparent;color:var(--sv-light);box-shadow:inset 0 0 0 var(--sv-line) var(--sv-outline-on-dark)}
/* Secondary on light */
.elementor-86 .sv-home.sv-home .sv-service-copy .sv-button{background:transparent;color:var(--sv-ink);box-shadow:inset 0 0 0 var(--sv-line) var(--sv-outline-on-light)}
/* Secondary over media: keeps its legibility fill, gains the shared outline */
.elementor-86 .sv-home.sv-home .sv-watch-link{background:rgba(24,11,48,.85);color:var(--sv-light);box-shadow:inset 0 0 0 var(--sv-line) var(--sv-outline-on-dark)}
/* Unavailable media: quieter than secondary, clearly inert */
.elementor-86 .sv-home.sv-home .sv-media-unavailable{background:transparent;border:0;color:rgba(247,241,232,.6);box-shadow:inset 0 0 0 var(--sv-line) var(--sv-outline-disabled);cursor:not-allowed}

/* ---------- Hover (real hover devices only) ---------- */
@media (hover:hover){
  .elementor-86 .sv-home.sv-home :is(.sv-nav-book,.sv-hero-action-row a:first-child,.sv-film-copy .sv-text-cta,.sv-doctor-copy .sv-text-cta,.sv-route-dark .sv-button,.sv-menu summary):hover{background:var(--sv-primary-light-hover);color:var(--sv-ink)}
  .elementor-86 .sv-home.sv-home :is(.sv-faq-heading .sv-text-cta,.sv-route-light .sv-button):hover{background:var(--sv-primary-ink-hover);color:var(--sv-light)}
  .elementor-86 .sv-home.sv-home :is(.sv-hero-action-row a:nth-child(2),.sv-library-route):hover{background:var(--sv-tint-hover-dark);box-shadow:inset 0 0 0 var(--sv-line) var(--sv-outline-on-dark-strong)}
  .elementor-86 .sv-home.sv-home .sv-service-copy .sv-button:hover{background:var(--sv-tint-hover-light);box-shadow:inset 0 0 0 var(--sv-line) var(--sv-outline-on-light-strong)}
  .elementor-86 .sv-home.sv-home .sv-watch-link:hover{background:rgba(24,11,48,.95);box-shadow:inset 0 0 0 var(--sv-line) var(--sv-outline-on-dark-strong)}
  .elementor-86 .sv-home.sv-home :is(.sv-button,.sv-text-cta,.sv-library-route,.sv-nav-book):hover svg:not(.sv-arrow-diagonal),
  .elementor-86 .sv-home.sv-home .sv-route .sv-button:hover::after{transform:translateX(var(--sv-arrow-nudge))}
  .elementor-86 .sv-home.sv-home :is(.sv-watch-link,.sv-therapy-paths a):hover svg.sv-arrow-diagonal{transform:translate(2px,-2px)}
  /* Tertiary */
  .elementor-86 .sv-home.sv-home :is(.sv-nav-desktop a:not(.sv-nav-book),.sv-menu a:not(.sv-nav-book)):hover{background:var(--sv-tint-hover-dark)}
  .elementor-86 .sv-home.sv-home .sv-therapy-paths a:hover{text-decoration-color:currentColor}
  .elementor-86 .sv-home.sv-home .sv-description-toggle:hover{text-decoration-color:currentColor}
  .elementor-86 .sv-home.sv-home .sv-footer a:not(.sv-nav-book):hover{color:var(--sv-light)}
  /* Controls */
  .elementor-86 .sv-therapy .sv-therapy-tab[aria-selected=false]:hover{background:var(--sv-tint-hover-light)}
  .elementor-86 .sv-home.sv-home .sv-faq-list details:has(>summary:hover){background:#fff;border-color:var(--sv-outline-on-light)}
  .elementor-86 .sv-home.sv-home .sv-provider-film .sv-film-play:hover{background:var(--sv-primary-light-hover)}
}

/* ---------- Pressed (touch and pointer) ---------- */
.elementor-86 .sv-home.sv-home :is(.sv-nav-book,.sv-hero-action-row a:first-child,.sv-film-copy .sv-text-cta,.sv-doctor-copy .sv-text-cta,.sv-route-dark .sv-button,.sv-menu summary):active{background:var(--sv-primary-light-press);color:var(--sv-ink)}
.elementor-86 .sv-home.sv-home :is(.sv-faq-heading .sv-text-cta,.sv-route-light .sv-button):active{background:var(--sv-primary-ink-press);color:var(--sv-light)}
.elementor-86 .sv-home.sv-home :is(.sv-hero-action-row a:nth-child(2),.sv-library-route,.sv-nav-desktop a:not(.sv-nav-book),.sv-menu a:not(.sv-nav-book)):active{background:var(--sv-tint-press-dark)}
.elementor-86 .sv-home.sv-home .sv-service-copy .sv-button:active,
.elementor-86 .sv-therapy .sv-therapy-tab[aria-selected=false]:active{background:var(--sv-tint-press-light)}
.elementor-86 .sv-home.sv-home .sv-watch-link:active{background:var(--sv-ink)}
.elementor-86 .sv-home.sv-home :is(.sv-therapy-paths a,.sv-description-toggle):active{text-decoration-color:currentColor;opacity:.72}
.elementor-86 .sv-home.sv-home .sv-footer a:not(.sv-nav-book):active{color:var(--sv-light)}
.elementor-86 .sv-home.sv-home .sv-faq-list details:has(>summary:active){background:color-mix(in srgb,#fff 80%,var(--sv-light))}
/* Play: same tone steps as a cream pill; no scale (provider motion keeps the centring transform). */
.elementor-86 .sv-home.sv-home .sv-provider-film .sv-film-play:active{background:var(--sv-primary-light-press)}
.elementor-86 .sv-home.sv-home .sv-provider-film .sv-film-play:is(:hover,:active),
.elementor-86 .sv-home.sv-home .sv-provider-film[data-sv-intro-motion] .sv-film-play:is(:hover,:active){transform:translate(-50%,-50%);
  transition:background-color var(--sv-dur-state) var(--sv-ease-state),color var(--sv-dur-state) var(--sv-ease-state)}

/* ---------- Focus: one ring, contrast-matched to its surface ---------- */
.elementor-86 .sv-home.sv-home :where(a,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:var(--sv-focus-width) solid var(--sv-focus-on-dark);outline-offset:var(--sv-focus-offset)}
.elementor-86 .sv-home.sv-home :is(.sv-therapy,.sv-faq,.sv-route-light) :where(a,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:var(--sv-focus-on-light)}
/* Therapy panel (focusable tabpanel): the large-surface ring sits just inside the frame edge. */
.elementor-86 .sv-home.sv-home .sv-therapy .sv-service-panel:focus-visible{outline-offset:8px;border-radius:var(--sv-r-feature,var(--sv-r-card))}
/* FAQ: ring the whole card rather than a square inside its rounded corners. */
.elementor-86 .sv-home.sv-home .sv-faq-list summary:focus-visible{outline:none}
.elementor-86 .sv-home.sv-home .sv-faq-list details:has(>summary:focus-visible){outline:var(--sv-focus-width) solid var(--sv-focus-on-light);outline-offset:var(--sv-focus-offset)}
.elementor-86 .sv-home.sv-home .sv-faq-list details{scroll-margin-block:96px}

/* ---------- Tertiary links: one underline treatment ---------- */
.elementor-86 .sv-home.sv-home :is(.sv-therapy-paths a,.sv-description-toggle){text-decoration-line:underline;text-decoration-thickness:var(--sv-line);text-underline-offset:4px;text-decoration-color:var(--sv-gold)}
.elementor-86 .sv-home.sv-home .sv-description-toggle{color:var(--sv-on-dark)}
.elementor-86 .sv-home.sv-home .sv-therapy-paths svg{width:16px;height:16px;flex:none;stroke-width:calc(var(--sv-icon-stroke) * 24 / 16)}
.elementor-86 .sv-home.sv-home .sv-footer a.sv-nav-book:is(:hover,:active,:focus-visible){color:var(--sv-ink)}

/* ---------- FAQ disclosure icon: a line icon at the shared weight ---------- */
.elementor-86 .sv-home.sv-home .sv-faq-list summary::after{content:"";width:18px;height:1.6em;margin-inline:-2.5px;flex:none;background:var(--sv-gold);font-size:24px;
  /* same 13px x 38.4px footprint as the "+" glyph it replaces, so rows keep their height and wrapping */
  -webkit-mask:var(--sv-icon-plus) center/18px no-repeat;mask:var(--sv-icon-plus) center/18px no-repeat;
  transition:transform var(--sv-dur-toggle) var(--sv-ease-state)}
.elementor-86 .sv-home.sv-home .sv-faq-list details[data-sv-faq-state=open] summary::after,
.elementor-86 .sv-home.sv-home .sv-faq-list details[open]:not([data-sv-faq-state]) summary::after{transform:rotate(45deg)}
.elementor-86 .sv-home.sv-home .sv-faq-list details[data-sv-faq-state=closed] summary::after{transform:none}

/* ---------- Lines: 1px everywhere; neutral rules for structure,
   gold reserved for the vertical accent rules beside copy ---------- */
.elementor-86 .sv-home.sv-home .sv-header{border:var(--sv-line) solid var(--sv-rule-on-dark,rgba(247,241,232,.16))}
.elementor-86 .sv-therapy .sv-service-panels{border-top:var(--sv-line) solid var(--sv-rule-on-light,rgba(24,11,48,.14))}
.elementor-86 .sv-home.sv-home .sv-faq-list details{border:var(--sv-line) solid var(--sv-rule-on-light,rgba(24,11,48,.14))}

/* ---------- Radii: comparable media and cards share one corner per width ---------- */
/* At 861–1100px the large media sat at 24px (film, therapy) beside 26.6px
   (portrait, feature video, closing cards); one value for the single column. */
@media(max-width:1100px){
  .elementor-86 .sv-home{--sv-r-feature:var(--sv-r-card)}
}

/* ---------- Reduced motion: state colours change instantly, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .elementor-86 .sv-home.sv-home :is(.sv-button,.sv-text-cta,.sv-watch-link,.sv-nav-book,.sv-library-route,.sv-therapy-paths a) svg,
  .elementor-86 .sv-home.sv-home .sv-route .sv-button::after{transform:none!important}
}