/* ==========================================================================
   hfe-compat.css — Bridges Elementor / HFE widget markup to the original
   static design tokens so the header/footer render pixel-identical.

   IMPORTANT: Elementor prints per-element <style> blocks INSIDE the body
   (after this file in the <head>), and the Kit prints `.elementor-kit-N`
   rules. Those frequently TIE our class selectors and win on source order,
   or out-specify them. Where we must guarantee a value we therefore use
   targeted `!important` (the standard, accepted way to override Elementor
   from a child theme — this is organised bridge CSS, not inline spaghetti).
   ========================================================================== */

/* ==========================================================================
   1. HEADER
   ========================================================================== */

/* ---- Sticky ---------------------------------------------------------------
   The header markup is `#page > #masthead > .elementor-39 > .site-header`.
   `position:sticky` on .site-header fails because its parent (#masthead) is
   only as tall as the header. The correct sticky element is #masthead, whose
   parent (#page) spans the whole document. Ancestors must not clip it. */
#wrapper,
#page {
  overflow: visible;
}
/* MasterStudy parent sets `#wrapper #main{overflow:hidden}`. That clipping
   ancestor JAMS GSAP ScrollTrigger pins (the programs stacked-deck + the why
   scrollytelling), even though each section is itself overflow:visible — pinning
   inside any overflow-hidden ancestor freezes the scroll. Free it on Elementor-
   rendered pages (2 ids + class + !important beats the parent's `#wrapper #main`). */
body.elementor-page #wrapper #main {
  overflow: visible !important;
}
/* MasterStudy sets `#masthead{position:relative;z-index:99}` and loads after
   this file, so `!important` is required to win. (Verified via computed-style
   probe: without it #masthead stayed position:relative.) The only scrollable
   ancestor is <html> (the scroll root), which does NOT break sticky. */
#masthead {
  position: sticky !important;
  inset-block-start: 0 !important;
  top: 0 !important;
  z-index: var(--z-header) !important;
  margin: 0;
  padding: 0;
}

/* Header bar height (single boxed container -> content lives in .e-con-inner). */
.site-header,
.site-header > .e-con-inner {
  min-block-size: 76px;
}
.site-header > .e-con-inner {
  align-items: center;
}

/* Site Logo widget -> match .nav__logo img sizing. */
.nav__logo img,
.nav__logo .hfe-site-logo-img {
  block-size: 44px;
  inline-size: auto;
}

/* ---- Desktop navigation (HFE Navigation Menu) ---------------------------- */

/* Show the menu only from 920px up; below that the custom overlay is used. */
.site-header .nav__menu {
  display: none;
}
@media (min-width: 920px) {
  .site-header .nav__menu {
    display: flex;
    align-items: center;
  }
}

/* Item spacing via the list gap (links themselves get zero inline padding so
   the underline matches the text width exactly). */
.site-header .nav__menu ul.hfe-nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-lg);
}

/* Replicate .nav__link: 0.98rem, semibold, heading color, NO inline padding.
   Extra block padding leaves a clear gap between the text and the underline
   (line-height:1 previously glued the underline to the text). */
.site-header .nav__menu .menu-item a.hfe-menu-item {
  position: relative;
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 0.98rem !important;
  line-height: 1.4;
  color: var(--color-heading) !important;
  padding-inline: 0 !important;
  padding-block: 0.35rem 0.7rem !important; /* bottom gap = space under the underline text */
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header .nav__menu .menu-item a.hfe-menu-item:hover,
.site-header .nav__menu .menu-item.current-menu-item a.hfe-menu-item {
  color: var(--color-primary) !important;
}

/* Original micro-interaction: linear underline growing inline-start -> 100%,
   sized to the text because padding-inline is 0. */
.site-header .nav__menu .menu-item a.hfe-menu-item::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: inline-size var(--dur) var(--ease-out);
}
.site-header .nav__menu .menu-item a.hfe-menu-item:hover::after,
.site-header .nav__menu .menu-item.current-menu-item a.hfe-menu-item::after {
  inline-size: 100%;
}

/* ---- Primary CTA button -------------------------------------------------- */

.header-cta {
  display: none;
}
@media (min-width: 920px) {
  .header-cta {
    display: inline-flex;
  }
}

/* Icon strictly at the END of the text. The icon span is first in the DOM
   with flex-direction:row (RTL -> icon lands at the start). row-reverse puts
   the text first (start/right) and the arrow last (end/left), as in source. */
.header-cta .elementor-button-content-wrapper {
  flex-direction: row-reverse !important;
  align-items: center;
  gap: var(--space-2xs);
}
.header-cta .elementor-button-icon {
  margin: 0 !important;
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}
.header-cta .elementor-button-icon svg {
  inline-size: 18px;
  block-size: 18px;
}
.header-cta .elementor-button:hover .elementor-button-icon {
  transform: translateX(-4px); /* RTL: toward inline-start, as in components.css */
}

/* ---- Mobile navigation trigger (hamburger in the bar) -------------------- */
.mobile-nav-trigger {
  position: fixed;
  top: 16px;
  inset-inline-end: var(--gutter);
  z-index: var(--z-menu);
}

/* The Kit button preset targets raw `button`; restore the toggle controls. */
.nav__toggle.mobile-nav-trigger,
.nav__toggle.nav__toggle--close {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 !important;
  inline-size: 44px;
  block-size: 44px;
}
.nav__toggle.mobile-nav-trigger:hover,
.nav__toggle.nav__toggle--close:hover {
  background-color: rgba(30, 32, 83, 0.05) !important;
}

/* The mobile overlay CTA is an <a class="btn--primary">; the Kit sets link
   color = accent (= its own bg) which makes the text invisible. Force white. */
.mobile-menu .btn--primary,
.mobile-menu .btn--primary:hover {
  color: #fff !important;
}

/* Overlay links: the Kit's `a{color:accent}` overrides the original heading
   color. Restore .mobile-menu__link to its source colors. */
.mobile-menu .mobile-menu__link {
  color: var(--color-heading) !important;
}
.mobile-menu .mobile-menu__link:hover {
  color: var(--color-accent) !important;
}

/* ==========================================================================
   1b. PAGE-CONTENT BUTTONS — Elementor Button widgets carry marker classes on
   their wrapper (`cta cta--primary|secondary cta--lg`); we bridge those to the
   inner `.elementor-button`. The Kit Button preset already equals `.btn--primary`,
   so PRIMARY needs nothing extra — only secondary/lg/icon are overridden.
   ========================================================================== */
.cta--secondary .elementor-button {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  box-shadow: inset 0 0 0 2px var(--color-border-strong) !important;
}
.cta--secondary .elementor-button:hover {
  background-color: rgba(30, 32, 83, 0.04) !important;
  box-shadow: inset 0 0 0 2px var(--color-primary) !important;
}
.cta--lg .elementor-button {
  padding-block: 1.05rem !important;
  padding-inline: 2.25rem !important;
  font-size: var(--fs-lead) !important;
}
/* Arrow icon at the END of the text + the original .btn__arrow hover slide. */
.cta .elementor-button-content-wrapper {
  flex-direction: row-reverse !important;
  align-items: center;
  gap: var(--space-2xs);
}
.cta .elementor-button-icon {
  margin: 0 !important;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cta .elementor-button-icon svg {
  inline-size: 20px;
  block-size: 20px;
}
/* Button lift on hover (.btn:hover{translateY(-2px)}) — the Kit transition
   doesn't include transform, so add it explicitly. */
.cta .elementor-button {
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.cta .elementor-button:hover {
  transform: translateY(-2px);
}
.cta .elementor-button:active {
  transform: translateY(0);
}
.cta .elementor-button:hover .elementor-button-icon {
  transform: translateX(-4px);
}

/* ---- Home hero: restore source typography/layout the widgets override ----- */
/* Kit heading/text typography (printed in-body) targets the INNER node and
   beats home.css on the wrapper — restore the source values on the inner. */
.hero__title .elementor-heading-title {
  font-size: var(--fs-display) !important;
  font-weight: var(--fw-extrabold) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  color: var(--color-heading) !important;
}
.hero__subtitle,
.hero__subtitle p {
  font-size: var(--fs-lead) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
}
/* Trust badge: Text-editor widgets impose the body font-size; restore it. */
.hero__badge-num {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-primary) !important;
  line-height: 1 !important;
}
.hero__badge-label {
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-body) !important;
}
/* Badge shrinks to its content (Elementor containers default to width:100%). */
.hero__badge {
  inline-size: fit-content !important;
}
/* Portrait image fills the 4/5 frame with object-fit:cover (the widget +
   its container must stretch so the img's 100% height has a box to fill). */
.hero__portrait > .elementor-widget-image,
.hero__portrait .elementor-widget-image > .elementor-widget-container {
  block-size: 100%;
  inline-size: 100%;
}
.hero__portrait img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover !important;
  object-position: 50% 20%;
}

/* ---- Icon fidelity (GENERAL) --------------------------------------------
   Elementor force-fills SVG icons, turning OUTLINE (stroke) icons solid. Every
   svg_icon() is tagged .ic-line (outline) or .ic-solid (filled): keep outline
   icons unfilled (stroke only) and let solid icons fill. Children with their
   OWN fill attribute (e.g. the closing path dot) are untouched. */
.ic-line svg,
.ic-line svg path {
  fill: none !important;
}
.ic-solid svg,
.ic-solid svg path {
  fill: currentColor !important;
}
/* Service icon widgets: the box class (.sv-fit__check, .sv-stage__marker, …) sets
   `color`; make the Icon-widget glyph INHERIT it so stroke="currentColor" picks
   up the box colour (Elementor's .elementor-icon default colour otherwise wins —
   e.g. a primary glyph invisible on the primary stage marker). */
.elementor-widget-icon[class*="sv-"] .elementor-icon,
.elementor-widget-icon[class*="sv-"] .elementor-icon svg { color: inherit !important; }

/* ---- Generic section primitives (all home sections) ---------------------- */
/* Section title — kit h2 typography targets the inner node; restore source. */
.section-title .elementor-heading-title {
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important;
  letter-spacing: -0.01em;
}
.section-lead,
.section-lead span,
.section-lead p {
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
}

/* ---- Problem section ------------------------------------------------------ */
.problem__feelings-label,
.problem__feelings-label p {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
}
.problem__relief-q,
.problem__relief-q p {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important;
}
.problem__relief-final,
.problem__relief-final p {
  font-size: var(--fs-lead) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-heading) !important;
}
/* Feeling icon box keeps its 44px frame; size the SVG glyph at 22. */
.feeling__icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.feeling__icon svg {
  inline-size: 22px;
  block-size: 22px;
}
/* Relief rows are containers (not <li>): mirror .relief-list li / svg. */
.relief-row {
  gap: var(--space-xs);
}
.relief-text,
.relief-text span {
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
}
.relief-check .elementor-icon {
  color: var(--color-accent) !important;
}
.relief-check svg {
  inline-size: 20px;
  block-size: 20px;
  stroke: var(--color-accent);
}

/* ---- Method section ------------------------------------------------------- */
.method__intro-lead,
.method__intro-lead p {
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
}
/* Step pill icon: white glyph on the gradient (Elementor forces kit primary). */
.step__icon .elementor-icon,
.step__icon svg {
  color: #fff !important;
}
.step__icon svg {
  inline-size: 26px;
  block-size: 26px;
}
.method__statement,
.method__statement p {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-on-dark) !important;
  line-height: var(--lh-snug) !important;
}
.method__turtle-line,
.method__turtle-line p {
  font-size: var(--fs-lead) !important;
  color: var(--color-secondary) !important;
}
.method__turtle .elementor-icon,
.method__turtle svg {
  color: var(--color-secondary) !important;
}
.method__turtle svg {
  inline-size: 92px !important;
  block-size: auto !important;
}

/* ---- Services section ----------------------------------------------------- */
.service-card__title .elementor-heading-title {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
}
.service-card__slogan,
.service-card__slogan p {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-accent-600) !important;
}
.service-card__note,
.service-card__note p {
  font-size: var(--fs-small) !important;
  color: var(--color-accent-600) !important;
}
.service-card__icon .elementor-icon,
.service-card__icon svg {
  color: var(--color-primary) !important;
}
.service-card--featured .service-card__icon .elementor-icon,
.service-card--featured .service-card__icon svg {
  color: #fff !important;
}
.service-card__icon svg {
  inline-size: 28px;
  block-size: 28px;
}
.service-card__btn .elementor-button {
  inline-size: 100%;
}
.service-card__flag,
.service-card__flag span {
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: var(--fw-bold) !important;
}
/* Helper banner. */
.services__helper-icon .elementor-icon,
.services__helper-icon svg {
  color: #fff !important;
}
.services__helper-icon svg {
  inline-size: 24px;
  block-size: 24px;
}
.services__helper-text,
.services__helper-text span {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-heading) !important;
}
.services__helper-arrow .elementor-icon,
.services__helper-arrow svg {
  color: var(--color-accent) !important;
}
.services__helper-arrow svg {
  inline-size: 20px;
  block-size: 20px;
}
/* All card CTAs settle at the SAME bottom line: the body grows to push the
   "for"/note/button cluster down (Elementor sets flex-grow:0 -> force it). */
.service-card__body {
  flex-grow: 1 !important;
}
/* Match the source grid spacing (Elementor's container gap default is 20px). */
.services__grid {
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem) !important;
}
/* MOBILE slider: Elementor makes the track flex-COLUMN by default, so the
   cards stack as blocks. Force the horizontal rail, and reset the JS-built
   pagination dots (raw <button>s the Kit preset would paint as purple pills). */
@media (max-width: 767px) {
  /* Elementor defaults the container to flex-column + flex-wrap:wrap on
     mobile, so the 84% cards wrap onto separate lines (stacked). Force a
     single nowrap row so the slider rail works. */
  .services__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  /* Dots row (Elementor made the dots container flex-column). */
  .services__dots {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .services__dots .slider-dot {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-block-size: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-pill);
  }
}

/* Recorded "what you'll learn" rail — the track/viewport/slider are now native
   Elementor containers, which default to flex-direction:column. service.css sets
   display:flex but no direction, so column wins and the slides stack. Force the
   slider rail to a row at every breakpoint (G17). The slider is a vertical box
   (viewport over dots); only the TRACK must be a horizontal row of slides. */
.sv-learn__slider, .sv-learn__viewport { flex-direction: column !important; }
.sv-learn__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
.sv-learn__dots {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* ---- Why section (pinned scrollytelling) ---------------------------------- */
/* ScrollTrigger pins [data-why-stage]; pinning a flex CHILD is unreliable, so
   make the section a block box (like the source <section>) -> clean pin. */
.why.section {
  display: block !important;
}
.why.section > .why__stage {
  inline-size: 100%;
}
/* Pinned mode: vertically CENTER the content + breathing room from the top.
   Elementor forces the stage to flex-column (so its align-items centers
   horizontally) — switch to row so align-items centers vertically. */
@media (min-width: 768px) {
  .why--pinned .why__stage {
    flex-direction: row !important;
    align-items: center !important;
    padding-block: clamp(2rem, 1rem + 4vw, 4rem);
    /* Prevent any inherited transition from firing as ScrollTrigger toggles
       position on pin/unpin (a common cause of the release "flash"). */
    transition: none !important;
  }
}
.why__portrait > .elementor-widget-image,
.why__portrait .elementor-widget-image > .elementor-widget-container {
  block-size: 100%;
  inline-size: 100%;
}
.why__portrait img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover !important;
  object-position: 50% 80%;
}
.why__id-name,
.why__id-name span {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important;
}
.why__id-role-text,
.why__id-role-text span {
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-accent-600) !important;
}
.why__id-role-icon .elementor-icon,
.why__id-role-icon svg {
  color: var(--color-accent-600) !important;
}
.why__id-role-icon svg {
  inline-size: 16px;
  block-size: 16px;
}
.why__counter-now,
.why__counter-now span {
  font-size: var(--fs-h3) !important;
  color: var(--color-accent-600) !important;
}
.why__index,
.why__index span {
  color: var(--color-primary) !important;
}
.reason-panel__icon .elementor-icon,
.reason-panel__icon svg {
  color: #fff !important;
}
.reason-panel__icon svg {
  inline-size: 26px;
  block-size: 26px;
}
.reason-panel__title .elementor-heading-title {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
}
@media (min-width: 768px) {
  .reason-panel__title .elementor-heading-title {
    font-size: var(--fs-h2) !important;
  }
}
.reason-panel__text,
.reason-panel__text span {
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
}

/* ---- Numbers section (bento + count-up) ----------------------------------- */
.stat__icon .elementor-icon,
.stat__icon svg {
  color: var(--color-primary) !important;
}
.stat__icon svg {
  inline-size: 22px;
  block-size: 22px;
}
.stat--tint-coral .stat__icon .elementor-icon,
.stat--tint-coral .stat__icon svg {
  color: var(--color-accent-600) !important;
}
.stat--feature .stat__icon .elementor-icon,
.stat--feature .stat__icon svg {
  color: var(--color-secondary) !important;
}
/* Native Counter widget -> source .stat__num / .stat__label typography. */
.stat__counter .elementor-counter-number-wrapper {
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-primary) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
  justify-content: flex-start;
}
.stat__counter .elementor-counter-title {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-snug) !important;
  margin-block-start: var(--space-2xs);
  text-align: start;
}
.stat--feature .stat__counter .elementor-counter-number-wrapper {
  color: #fff !important;
  font-size: clamp(3rem, 2rem + 4vw, 4.75rem) !important;
}
.stat--feature .stat__counter .elementor-counter-title {
  color: var(--color-secondary) !important;
  font-size: var(--fs-lead) !important;
}
.numbers__note-lead,
.numbers__note-lead p {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
}
.numbers__note-fine,
.numbers__note-fine p {
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
}

/* ---- Beliefs — NATIVE Elementor Accordion styled as myth->truth cards ----- */
.beliefs__list .elementor-accordion-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  margin-block-end: var(--space-sm);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.beliefs__list .elementor-accordion-item:last-child {
  margin-block-end: 0;
}
/* Open item gets the accent rail + lift. */
.beliefs__list .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
  border-inline-start-color: var(--color-accent);
  box-shadow: var(--shadow-raised);
}
/* Head (myth) — X mark + title + chevron at the end. */
.beliefs__list .elementor-tab-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem) clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.beliefs__list .elementor-tab-title:hover {
  background-color: rgba(30, 32, 83, 0.025);
}
.beliefs__list .elementor-tab-title::before {
  content: "";
  order: 0;
  flex-shrink: 0;
  inline-size: 34px;
  block-size: 34px;
  background: url(../../images/belief-myth.svg) center / contain no-repeat;
}
.beliefs__list .elementor-accordion-title {
  order: 1;
  flex: 1;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
}
.beliefs__list .elementor-accordion-icon {
  order: 2;
  margin: 0;
  padding: 0;
  inline-size: auto;
  color: var(--color-muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.beliefs__list .elementor-accordion-icon svg {
  inline-size: 20px;
  block-size: 20px;
  fill: currentColor;
}
.beliefs__list .elementor-tab-title.elementor-active .elementor-accordion-icon {
  transform: rotate(180deg);
  color: var(--color-accent);
}
/* Remove the focus outline/shadow on click (reset.css adds a :focus-visible
   ring; the chevron + accent rail already signal state). */
.beliefs__list .elementor-tab-title:focus,
.beliefs__list .elementor-tab-title:focus-visible,
.beliefs__list .elementor-accordion-title:focus,
.beliefs__list .elementor-accordion-title:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* SMOOTH open/close: Elementor animates the content height with jQuery (janky,
   jumps). Neutralise that inline animation (height:auto!important beats the
   non-important inline height; display override beats display:none) and drive
   the reveal with a GPU-friendly CSS grid-template-rows transition (the same
   technique the source used) — no layout jump. */
.beliefs__list .elementor-tab-content {
  display: block !important;
  height: auto !important;          /* neutralise jQuery's inline px height */
  max-block-size: 0;                /* closed: fully collapsed */
  padding: 0 !important;
  overflow: hidden;
  transition: max-block-size var(--dur-slow) var(--ease-out);
}
.beliefs__list .elementor-tab-content::before,
.beliefs__list .elementor-tab-content::after {
  content: none !important;
}
.beliefs__list .elementor-accordion-item:has(.elementor-tab-title.elementor-active) .elementor-tab-content {
  max-block-size: 22rem;            /* open: larger than any answer */
}
.beliefs__list .elementor-tab-content p {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
  margin: 0;
  padding: 0 clamp(1rem, 0.85rem + 0.8vw, 1.5rem) clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
}
.beliefs__list .elementor-tab-content p::before {
  content: "";
  flex-shrink: 0;
  inline-size: 34px;
  block-size: 34px;
  background: url(../../images/belief-truth.svg) center / contain no-repeat;
}

/* ---- Closing section ------------------------------------------------------ */
.closing__badge .elementor-icon,
.closing__badge svg {
  color: var(--color-secondary) !important;
}
.closing__badge svg {
  inline-size: 56px !important;
  block-size: auto !important;
}
.closing__title .elementor-heading-title {
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.75rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: #fff !important;
  line-height: 1.4 !important;
}
.closing__text,
.closing__text p {
  font-size: var(--fs-lead) !important;
  color: var(--color-on-dark-muted) !important;
}
.closing__text--lead,
.closing__text--lead p {
  color: var(--color-secondary) !important;
  font-weight: var(--fw-semibold) !important;
}
.closing__path .elementor-icon,
.closing__path svg {
  color: var(--color-accent) !important;
}
.closing__path svg {
  inline-size: 280px !important;
  block-size: auto !important;
}
/* CTA icon-island (button-in-button). */
.closing__btn .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
}
.closing__btn:hover .elementor-button-icon {
  transform: translateX(-4px);
}
/* WhatsApp helper line. */
.closing__whatsapp-icon .elementor-icon,
.closing__whatsapp-icon svg {
  color: #fff !important;
}
.closing__whatsapp-icon svg {
  inline-size: 20px;
  block-size: 20px;
}
.closing__whatsapp-text,
.closing__whatsapp-text span {
  font-size: var(--fs-body) !important;
  color: var(--color-on-dark-muted) !important;
}

/* WhatsApp CTAs — clickable via a stretched overlay anchor (compat.js). */
.wa-cta,
.closing__whatsapp,
.pg-hero__hint {
  position: relative;
}
.wa-cta > .wa-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
}

/* ==========================================================================
   1c. PROGRAMS PAGE — pg-hero
   ========================================================================== */
.pg-hero__title .elementor-heading-title {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
}
.pg-hero__lead .dh-lead,
.pg-hero__lead p {
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
}
.pg-hero__hint-text,
.pg-hero__hint-text span {
  font-size: var(--fs-body) !important;
  color: inherit !important;
}
.pg-hero__hint-icon .elementor-icon,
.pg-hero__hint-icon svg {
  color: #fff !important;
}
.pg-hero__hint-icon svg {
  inline-size: 18px;
  block-size: 18px;
}
.pg-hero__frame > .elementor-widget-image,
.pg-hero__frame .elementor-widget-image > .elementor-widget-container {
  block-size: 100%;
  inline-size: 100%;
}
.pg-hero__frame img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover !important;
  object-position: 50% 58%;
}
/* Chip: stroked converging lines + filled goal (force over Elementor fill). */
.pg-hero__chip-line {
  fill: none !important;
  stroke: var(--color-primary) !important;
}
.pg-hero__chip-goal {
  fill: var(--color-accent) !important;
}
.pg-hero__chip svg {
  inline-size: 60px !important;
  block-size: auto !important;
}

/* ---- Programs — mindset (deep/dark) -------------------------------------- */
.mindset .section-title .elementor-heading-title { color: #fff !important; }
.mindset__intro p {
  font-size: var(--fs-lead) !important;
  color: var(--color-on-dark-muted) !important;
  line-height: var(--lh-body) !important;
}
.mindset__intro-strong,
.mindset__intro-strong p {
  color: var(--color-secondary) !important;
  font-weight: var(--fw-bold) !important;
}
.mindset__shift-lead,
.mindset__shift-lead p {
  font-size: var(--fs-lead) !important;
  font-weight: var(--fw-semibold) !important;
  color: #fff !important;
}
.shift { display: grid !important; }
.foundation { display: grid !important; }
.shift__state--from .shift__icon .elementor-icon,
.shift__state--from .shift__icon svg { color: var(--color-on-dark-muted) !important; }
.shift__state--to .shift__icon .elementor-icon,
.shift__state--to .shift__icon svg { color: #fff !important; }
.shift__icon svg { inline-size: 26px; block-size: 26px; }
.shift__state--from .shift__text,
.shift__state--from .shift__text span { color: var(--color-on-dark-muted) !important; }
.shift__state--to .shift__text,
.shift__state--to .shift__text span { color: #fff !important; font-weight: var(--fw-bold) !important; }
.shift__bridge .elementor-icon,
.shift__bridge svg { color: var(--color-secondary) !important; }
.shift__bridge svg { inline-size: 60px !important; block-size: auto !important; }
.mindset__belief-mark .elementor-icon,
.mindset__belief-mark svg { color: rgba(var(--color-accent-rgb), 0.65) !important; }
.mindset__belief-mark svg { inline-size: 26px; block-size: 26px; }
.mindset__belief-text,
.mindset__belief-text span {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-semibold) !important;
  color: #fff !important;
  line-height: var(--lh-body) !important;
}
.mindset__foundation-lead,
.mindset__foundation-lead p {
  font-size: var(--fs-lead) !important;
  font-weight: var(--fw-semibold) !important;
  color: #fff !important;
}
.foundation__icon .elementor-icon,
.foundation__icon svg { color: var(--color-secondary) !important; }
.foundation__icon svg { inline-size: 24px; block-size: 24px; }
.foundation__text,
.foundation__text span {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-on-dark) !important;
}
.mindset__close,
.mindset__close p {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  color: #fff !important;
  line-height: var(--lh-body) !important;
}

/* ---- Programs — question (if/then) --------------------------------------- */
.question__ask,
.question__ask p {
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-primary) !important;
  line-height: 1.4 !important;
}
.answer__if,
.answer__if span {
  font-size: var(--fs-body) !important;
  color: var(--color-body) !important;
}
.answer__then,
.answer__then span {
  font-size: var(--fs-lead) !important;
  color: var(--color-heading) !important;
}

/* ---- Programs — program cards (#cards) ----------------------------------- */
.programs__list {
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem) !important;
}
.program {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transform-origin: top center;
  scroll-margin-block-start: clamp(84px, 9vh, 112px);
}
.program:hover { box-shadow: var(--shadow-raised); }
/* Header — title bar (desktop) / accordion toggle (mobile). */
.program__head {
  gap: var(--space-sm) !important;
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem) clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) !important;
  cursor: default;
}
.program__chevron {
  flex-shrink: 0;
  display: none;
}
.program__chevron .elementor-icon,
.program__chevron svg { color: var(--color-accent-600) !important; }
.program__chevron svg {
  inline-size: 22px;
  block-size: 22px;
  transition: transform var(--dur) var(--ease-out);
}
/* Body — always open on desktop; collapsible accordion on mobile. */
.program__body { display: block !important; }
.program__body-inner {
  padding: 0 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) !important;
}
.program__grid { display: grid !important; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; }
@media (min-width: 860px) {
  .program__grid { grid-template-columns: 1.65fr 1fr; align-items: start; }
}
@media (max-width: 859px) {
  .program__head { cursor: pointer; }
  .program__head:hover { background: rgba(30, 32, 83, 0.025); }
  .program__chevron { display: inline-flex; }
  .program.is-open .program__chevron svg { transform: rotate(180deg); }
  .program__body {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out);
  }
  .program.is-open .program__body { grid-template-rows: 1fr; }
  .program__body-inner { overflow: hidden; }
  .program:not(.is-open) .program__body-inner { padding-bottom: 0 !important; }
}
.program__title,
.program__title span {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
  line-height: var(--lh-snug) !important;
}
/* Icon tile (main 60px; aside 64px white). */
.program__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  inline-size: 60px;
  block-size: 60px;
  border-radius: var(--radius);
  background: var(--color-secondary-200);
  margin-block-end: var(--space-md);
}
.program__icon .elementor-widget-container,
.program__icon .elementor-icon-wrapper,
.program__icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.program__icon .elementor-icon,
.program__icon svg { color: var(--color-primary) !important; }
.program__icon svg { inline-size: 28px; block-size: 28px; }
.program__aside .program__icon {
  inline-size: 64px;
  block-size: 64px;
  background: var(--color-surface);
  box-shadow: 0 8px 20px rgba(30, 32, 83, 0.1);
  margin-block-end: var(--space-sm);
}
.program__slogan,
.program__slogan p {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-accent-600) !important;
}
.program__main p {
  font-size: var(--fs-body) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
}
.program__note,
.program__note p {
  font-size: var(--fs-small) !important;
  color: var(--color-accent-600) !important;
  line-height: var(--lh-body) !important;
}
.program__note {
  margin-block-start: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent-200);
  border-radius: var(--radius);
}
.program__note-label { font-weight: var(--fw-bold) !important; }
/* Fit checklist sidebar (tinted card). */
.program__aside {
  gap: var(--space-sm) !important;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem) !important;
  background-image: linear-gradient(180deg, #f8f6fc 0%, #f1ecf6 100%) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  align-self: start;
}
.program__fit-label,
.program__fit-label p {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
}
.program__fit { gap: var(--space-2xs) !important; }
.program__fit-li,
.program__fit-li span {
  font-size: var(--fs-body) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-snug) !important;
}
.program__fit-li { position: relative; padding-inline-start: 1.75rem; }
.program__fit-li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.15em;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--radius-pill);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--color-primary);
}
.program__btn { margin-block-start: var(--space-2xs); }
.program__btn .elementor-button { inline-size: 100%; }
/* Featured (VIP). */
.program--featured {
  border-color: rgba(var(--color-accent-rgb), 0.45);
  box-shadow: 0 18px 48px rgba(var(--color-accent-rgb), 0.16);
}
.program--featured .program__icon { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-600) 100%); }
.program--featured .program__icon .elementor-icon,
.program--featured .program__icon svg { color: #fff !important; }
.program--featured .program__fit-li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--color-accent-600);
}
.program--featured .program__head { padding-block-start: 3rem !important; }
.program__flag,
.program__flag span {
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: var(--fw-bold) !important;
}
.program__flag {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  z-index: 2;
}

/* ---- Programs — matcher ("which service fits you?") (#match) ------------- */
.matcher.section { overflow: visible !important; }
/* Decorative blob clip layer must be absolute (Elementor makes containers
   relative+flex, which would push it into flow). */
.matcher__bg {
  position: absolute !important;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.matcher__blob { position: absolute !important; }
.matcher .container { position: relative; z-index: 1; }
/* Desktop 2x2 grid (Elementor default is flex). */
.matcher__grid {
  display: grid !important;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem) !important;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .matcher__grid { grid-template-columns: repeat(2, 1fr); }
}
.match-card {
  gap: var(--space-md) !important;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.match-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-raised); }
.match-card__quote,
.match-card__quote span {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
  line-height: var(--lh-snug) !important;
}
.match-card__quote { position: relative; padding-inline-start: 1.75rem; }
.match-card__quote::before {
  content: "\201D";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.35em;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-secondary-400);
  font-family: Georgia, "Times New Roman", serif;
}
.match-card__result {
  gap: 2px !important;
  padding: var(--space-sm) var(--space-md) !important;
  background-image: linear-gradient(135deg, #f8f4fb 0%, #f1eaf4 100%) !important;
  border-radius: var(--radius);
  border-inline-start: 3px solid var(--color-accent);
}
.match-card__result-label,
.match-card__result-label span {
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-muted) !important;
}
.match-card__service,
.match-card__service span {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-primary) !important;
}
.match-card__why,
.match-card__why span {
  font-size: var(--fs-body) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
}
.match-card__why-label { font-weight: var(--fw-bold) !important; color: var(--color-heading) !important; }
.matcher__close,
.matcher__close p {
  text-align: center !important;
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
  max-inline-size: 60ch !important;
  margin-inline: auto !important;
}
.matcher__close a {
  color: var(--color-accent-600) !important;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Programs — closeness degrees (#closeness) --------------------------- */
.closeness.section { overflow: hidden; }
.closeness__blob { position: absolute !important; }
.degrees { gap: var(--space-md) !important; }
.degree {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: var(--space-md) !important;
  align-items: stretch;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.degree:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.degree--l1 { --level: 1; }
.degree--l2 { --level: 2; }
.degree--l3 { --level: 3; }
.degree--l4 { --level: 4; }
/* Vertical proximity meter (fill height = --level/4). */
.degree__meter {
  position: relative;
  inline-size: 10px;
  min-inline-size: 10px;
  flex: 0 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-200);
  overflow: hidden;
}
.degree__fill {
  position: absolute !important;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: calc(var(--level) / 4 * 100%);
  border-radius: var(--radius-pill);
  background-image: linear-gradient(180deg, var(--color-accent) 0%, var(--color-primary) 100%);
  transform: scaleY(1);
  transform-origin: bottom;
  will-change: transform;
}
.degree--clarity .degree__fill {
  background-image: linear-gradient(180deg, #8e7bd6 0%, var(--color-primary) 100%);
}
.degree__body { gap: 4px !important; }
.degree__tier,
.degree__tier span {
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-accent-600) !important;
  letter-spacing: 0.01em;
}
.degree__name,
.degree__name .elementor-heading-title {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
}
.degree__desc,
.degree__desc p {
  font-size: var(--fs-body) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
}

/* ---- Programs — shared-method pillars (#approach) ------------------------ */
.approach.section { overflow: hidden; }
.approach__blob { position: absolute !important; }
.approach__intro { gap: var(--space-2xs) !important; margin-block-start: var(--space-md); }
.approach__intro p {
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
}
.approach__intro-strong,
.approach__intro-strong p { font-weight: var(--fw-bold) !important; color: var(--color-heading) !important; }
.pillars {
  display: grid !important;
  gap: var(--space-sm) !important;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 940px) {
  .pillars { gap: var(--space-md) !important; grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  gap: var(--space-sm) !important;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-raised); }
/* Icon tile: white outline glyph on primary gradient. */
.pillar__icon {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius);
  background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-300) 100%);
  box-shadow: 0 8px 18px rgba(30, 32, 83, 0.2);
}
.pillar__icon .elementor-widget-container,
.pillar__icon .elementor-icon-wrapper,
.pillar__icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.pillar__icon .elementor-icon,
.pillar__icon svg { color: #fff !important; }
.pillar__icon svg { inline-size: 22px; block-size: 22px; }
.pillar__text,
.pillar__text span {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-heading) !important;
  line-height: var(--lh-snug) !important;
}
.approach__close,
.approach__close p {
  text-align: center !important;
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
  max-inline-size: 64ch !important;
  margin-inline: auto !important;
}
.approach__close strong { color: var(--color-heading); font-weight: var(--fw-bold); }

/* ---- FAQ / Accordion — UNIFIED style (native Elementor + raw .faq-item) ----
   General accordion rules: NO border, NO title hover/active colour, NO underline
   in any state, and OUR OWN chevron icon (not Elementor's default FA). Also
   resets the raw `.faq-item__head` <button> from the Kit button preset (which
   was painting it as a purple pill on the service pages). */
.faq__list .elementor-accordion-item, .faq-item {
  background: var(--color-surface);
  border: 0 !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  margin-block-end: var(--space-sm);
  transition: box-shadow var(--dur) var(--ease-out);
}
.faq__list .elementor-accordion-item:last-child, .faq-item:last-child { margin-block-end: 0; }
.faq__list .elementor-accordion-item:has(.elementor-tab-title.elementor-active),
.faq-item.is-open { box-shadow: var(--shadow-raised); }
/* Title row */
.faq__list .elementor-tab-title, .faq-item__head {
  display: flex !important;
  align-items: center;
  gap: var(--space-sm);
  inline-size: 100%;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem) clamp(1rem, 0.85rem + 0.8vw, 1.5rem) !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--color-heading) !important;
  text-align: start;
  text-decoration: none !important;
  cursor: pointer;
  transition: none !important;
}
/* No hover / active / focus colour change; no underline; no outline (any state) */
.faq__list .elementor-tab-title:hover, .faq__list .elementor-tab-title:focus,
.faq__list .elementor-tab-title:focus-visible, .faq__list .elementor-tab-title.elementor-active,
.faq__list .elementor-accordion-title:focus, .faq__list .elementor-accordion-title:focus-visible,
.faq-item__head:hover, .faq-item__head:focus, .faq-item__head:focus-visible, .faq-item__head:active {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-heading) !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Title text */
.faq__list .elementor-accordion-title, .faq-item__q {
  order: 1;
  flex: 1;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
  text-decoration: none !important;
}
/* OWN chevron: hide Elementor's default FA icon and draw ours via ::after; the
   raw .faq-item already carries its own .faq-item__chevron SVG. Both rotate on open. */
.faq__list .elementor-accordion-icon { display: none !important; }
.faq__list .elementor-tab-title::after {
  content: "";
  order: 2;
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  margin-inline-start: auto;
  background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23767a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform var(--dur) var(--ease-out);
}
.faq__list .elementor-tab-title.elementor-active::after { transform: rotate(180deg); }
.faq-item__chevron { order: 2; flex-shrink: 0; color: var(--color-muted) !important; transition: transform var(--dur) var(--ease-out); }
.faq-item__chevron svg { inline-size: 20px; block-size: 20px; }
.faq-item.is-open .faq-item__chevron { transform: rotate(180deg); color: var(--color-muted) !important; }
/* Smooth open/close — neutralise Elementor's jQuery height animation; drive the
   reveal via max-block-size (compat.js sets the exact measured height inline). */
.faq__list .elementor-tab-content {
  display: block !important;
  height: auto !important;
  max-block-size: 0;
  padding: 0 !important;
  overflow: hidden;
  transition: max-block-size var(--dur-slow) var(--ease-out);
}
.faq__list .elementor-tab-content::before,
.faq__list .elementor-tab-content::after { content: none !important; }
.faq__list .elementor-accordion-item:has(.elementor-tab-title.elementor-active) .elementor-tab-content { max-block-size: 18rem; }
.faq__list .elementor-tab-content p {
  margin: 0;
  padding: 0 clamp(1rem, 0.85rem + 0.8vw, 1.5rem) clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
}

/* ---- Programs — final deep CTA (#contact) ------------------------------- */
.pcta {
  position: relative;
  padding-block: clamp(4rem, 3rem + 6vw, 7rem) !important;
  background-image: var(--grad-deep);
  color: var(--color-on-dark);
  overflow: hidden;
}
.pcta__glow {
  position: absolute !important;
  inset-block-start: -20%;
  inset-inline-start: -5%;
  inline-size: 55%;
  block-size: 150%;
  background-image: var(--grad-accent-glow);
  pointer-events: none;
  z-index: 0;
}
.pcta__inner {
  position: relative;
  z-index: 1;
  display: grid !important;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem) !important;
  align-items: center;
}
@media (min-width: 860px) {
  .pcta__inner { grid-template-columns: 1.3fr 1fr; }
}
.pcta__title,
.pcta__title .elementor-heading-title {
  font-size: clamp(1.7rem, 1.3rem + 2.2vw, 2.6rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: #fff !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em;
  max-inline-size: 18ch;
}
.pcta__text,
.pcta__text p {
  margin-block-start: var(--space-md);
  font-size: var(--fs-lead) !important;
  color: var(--color-on-dark-muted) !important;
  line-height: var(--lh-body) !important;
  max-inline-size: 52ch;
}
.pcta__text--lead,
.pcta__text--lead p { color: var(--color-secondary) !important; font-weight: var(--fw-semibold) !important; }
.pcta__action { gap: var(--space-sm) !important; align-items: flex-start; }
.pcta__btn .elementor-button {
  gap: var(--space-sm);
  /* Match the source .btn--lg size (the widget defaults to elementor-size-sm). */
  padding-block: 1.05rem !important;
  padding-inline: 2.25rem !important;
  font-size: var(--fs-lead) !important;
  font-weight: var(--fw-bold) !important;
  background-color: #25d366 !important;
  background-image: none !important;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.32);
  border-radius: var(--radius-pill);
  color: #fff !important;
}
.pcta__btn .elementor-button:hover { background-color: #1fbe5a !important; box-shadow: 0 18px 40px rgba(37, 211, 102, 0.4); }
.pcta__btn .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
  margin: 0;
}
.pcta__btn .elementor-button-icon svg { inline-size: 22px; block-size: 22px; fill: currentColor !important; }
.pcta__hint,
.pcta__hint span { font-size: var(--fs-body) !important; color: var(--color-on-dark-muted) !important; }

/* ---- Programs — compare table font (Text Editor cells lose the Kit font) -- */
.compare__table,
.compare__table th,
.compare__table td,
.compare__table thead th { font-family: var(--font-primary) !important; }

/* ==========================================================================
   PROGRAMS — MOBILE PARITY (G17: Elementor forces flex-column + wrap on
   mobile, which collapses every horizontal rail/row into a vertical stack).
   Mirror the source's mobile rules with the breakpoint-scoped !important the
   bridge needs to beat Elementor's per-element responsive styles.
   ========================================================================== */
@media (max-width: 767px) {
  /* Program card head: title + chevron stay a single inline row. */
  .program__head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .program__title { flex: 1 1 auto; }

  /* Matcher: the rail must be a single nowrap row so the GSAP hscroll can
     translate it (Elementor made .matcher__grid a wrapping column -> cards
     stacked vertically). inline-size:max-content gives the rail its overflow. */
  .matcher__grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    inline-size: max-content !important;
    gap: var(--space-md) !important;
  }
  .matcher__grid > .match-card {
    flex: 0 0 82vw !important;
    max-inline-size: 340px !important;
  }
  /* The sticky stage holds one child (the rail); keep it a centered flex box. */
  .matcher__hscroll.is-pinning .matcher__stage {
    display: flex !important;
    align-items: center !important;
  }

  /* Compare slider pagination dots: a centered nowrap row, reset from the Kit
     button preset (Elementor made the dots container a column of pill buttons). */
  .compare__dots {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xs);
  }
  .compare__dots .slider-dot {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-block-size: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-pill);
  }
}

/* ==========================================================================
   1e. HOW I WORK PAGE
   ========================================================================== */
/* ---- Hero (#top) ---------------------------------------------------------- */
.hiw-hero__inner {
  display: grid !important;
  gap: clamp(2.5rem, 1.4rem + 4vw, 4rem) !important;
  align-items: center;
}
@media (min-width: 768px) {
  .hiw-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}
.hiw-hero__content { align-items: flex-start; }
.hiw-hero__title,
.hiw-hero__title .elementor-heading-title {
  font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.01em;
  max-inline-size: 17ch;
}
.hiw-hero__lead { margin-block-start: var(--space-md); max-inline-size: 52ch; }
.hiw-hero__lead p {
  font-size: var(--fs-lead) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
}
.hiw-hero__cta { margin-block-start: var(--space-lg) !important; gap: var(--space-sm) !important; flex-wrap: wrap; }
.hiw-hero__media { position: relative; justify-self: center; inline-size: 100%; max-inline-size: 540px; }
/* Frame: portrait box; the Image widget + tint absolutely fill it. */
.hiw-hero__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 5 / 6;
  border: 6px solid var(--color-surface);
  box-shadow: var(--shadow-deep);
  background: var(--color-secondary-200);
}
.hiw-hero__frame-img { position: absolute !important; inset: 0; }
.hiw-hero__frame-img .elementor-widget-container,
.hiw-hero__frame-img .elementor-image,
.hiw-hero__frame-img figure { block-size: 100%; margin: 0; }
.hiw-hero__frame img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover;
  object-position: 50% 35%;
}
.hiw-hero__frame-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(30, 32, 83, 0.3) 0%, rgba(30, 32, 83, 0) 46%),
    linear-gradient(0deg, rgba(230, 216, 234, 0.55) 0%, rgba(230, 216, 234, 0) 40%);
}
/* Decorative wrappers (Text Editor holding pulse/chip) take no layout space;
   the pulse/chip inside are absolutely positioned against .hiw-hero__media. */
.hiw-hero__deco { position: static !important; margin: 0 !important; inline-size: 0; block-size: 0; }
.hiw-hero__deco .elementor-widget-container { padding: 0 !important; }

/* ---- Myth -> reality (#myth) --------------------------------------------- */
.myth__inner { display: grid !important; gap: clamp(2.5rem, 1.4rem + 4vw, 4.5rem) !important; align-items: center; }
@media (min-width: 600px) {
  .myth__inner { grid-template-columns: 1.05fr 0.95fr; }
  .myth__visual { order: -1; }
}
.myth__title,
.myth__title .elementor-heading-title { text-align: start !important; max-inline-size: 20ch; line-height: 1.34 !important; }
.myth__text { gap: var(--space-md) !important; margin-block-start: var(--space-lg); max-inline-size: 56ch; }
.myth__text p { font-size: var(--fs-body) !important; color: var(--color-body) !important; line-height: var(--lh-body) !important; }
.myth__visual {
  position: relative;
  inline-size: 100%;
  max-inline-size: 540px;
  justify-self: center;
  padding-block-start: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-inline-end: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.myth__shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 5px solid var(--color-surface);
  background: var(--color-secondary-200);
}
.myth__shot-img { position: absolute !important; inset: 0; margin: 0; }
.myth__shot-img .elementor-widget-container,
.myth__shot-img .elementor-image,
.myth__shot-img figure { block-size: 100%; margin: 0; }
.myth__shot img { display: block; inline-size: 100% !important; block-size: 100% !important; object-fit: cover; }
.myth__shot--stereotype {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 64%;
  aspect-ratio: 3 / 2;
  z-index: 1;
  transform: rotate(-4deg);
  box-shadow: var(--shadow-raised);
}
.myth__shot--stereotype img { filter: grayscale(0.7) contrast(0.95) brightness(0.9); }
.myth__shot-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(226, 106, 104, 0.45) 0%, rgba(30, 32, 83, 0.35) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}
.myth__shot--reality {
  position: relative;
  inline-size: 78%;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5rem);
  aspect-ratio: 4 / 3;
  z-index: 2;
  transform: rotate(2deg);
  box-shadow: var(--shadow-deep);
}
/* Icon tag badges (raw SVG in a Text Editor; the wrapper takes no space). */
.myth__tag-wrap { position: static !important; margin: 0 !important; inline-size: 0; block-size: 0; }
.myth__tag-wrap .elementor-widget-container { padding: 0 !important; }
.myth__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised);
  z-index: 3;
}
.myth__tag--stereotype {
  inset-block-start: 10px;
  inset-inline-start: 10px;
  background: rgba(30, 32, 83, 0.82);
  color: var(--color-accent-200);
  backdrop-filter: blur(4px);
}
.myth__tag--reality { inset-block-end: 12px; inset-inline-end: 12px; background: #fff; color: #3aa76d; }

/* ---- Three ideas (#ideas): one-per-slide carousel ------------------------ */
.ideas__viewport { overflow: hidden; }
/* The track is a horizontal rail on EVERY breakpoint (Elementor defaults
   containers to flex-column) — force a single nowrap row. */
.ideas__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  will-change: transform;
}
.idea {
  flex: 0 0 100% !important;
  inline-size: 100%;
  display: grid !important;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem) !important;
  align-items: center;
  padding-block: var(--space-xs) !important;
  padding-inline: clamp(0.25rem, 0.1rem + 1vw, 1.75rem) !important;
}
@media (min-width: 600px) {
  .idea { grid-template-columns: 0.95fr 1.05fr; }
  .idea--reverse .idea__media { order: 2; }
}
.idea__body { position: relative; }
.idea__index,
.idea__index span {
  display: inline-block;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
  font-weight: var(--fw-extrabold) !important;
  line-height: 1 !important;
  color: var(--color-accent) !important;
  opacity: 0.55;
  letter-spacing: 0.02em;
}
.idea__index { margin-block-end: var(--space-2xs); }
.idea__title,
.idea__title .elementor-heading-title {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
  line-height: var(--lh-snug) !important;
  margin-block-end: var(--space-sm);
}
.idea__body .idea__p p,
.idea__body p {
  font-size: var(--fs-body) !important;
  color: var(--color-body) !important;
  line-height: var(--lh-body) !important;
  max-inline-size: 56ch;
}
.idea__p + .idea__p { margin-block-start: var(--space-sm); }
.idea__media { justify-self: center; inline-size: 100%; max-inline-size: 420px; }
.idea__art {
  position: relative;
  display: grid !important;
  place-items: center;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2rem) !important;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.idea__art::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -30%;
  inline-size: 70%;
  block-size: 70%;
  background: radial-gradient(circle, rgba(230, 216, 234, 0.5), rgba(230, 216, 234, 0));
  filter: blur(10px);
  pointer-events: none;
}
.idea__art-svg { inline-size: 100%; }
.idea__art svg { inline-size: 100% !important; block-size: auto; display: block; }
/* Pagination dots: centered row, reset from the Kit button preset. */
.ideas__dots {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-block-start: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.ideas__dots .slider-dot {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-block-size: 0 !important;
  border: 0 !important;
}

/* ---- Honesty (#honesty): full-bleed parallax photo + dark copy ----------- */
.honesty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-on-dark);
  background: var(--color-primary-700);
  padding-block: clamp(4rem, 3rem + 6vw, 7.5rem) !important;
}
.honesty__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.honesty__media-img { position: absolute !important; inset: 0; margin: 0; }
.honesty__media-img .elementor-widget-container,
.honesty__media-img .elementor-image,
.honesty__media-img figure { block-size: 100%; margin: 0; }
.honesty__media img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -15%;
  inline-size: 100% !important;
  block-size: 130% !important;
  object-fit: cover;
  object-position: 50% 40%;
  will-change: transform;
}
.honesty__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to left, rgba(21, 22, 59, 0.94) 0%, rgba(21, 22, 59, 0.78) 42%, rgba(30, 32, 83, 0.4) 100%),
    linear-gradient(0deg, rgba(21, 22, 59, 0.5) 0%, rgba(21, 22, 59, 0) 45%);
}
.honesty__inner { position: relative; z-index: 1; }
.honesty__content { max-inline-size: 60ch; align-items: flex-start; }
@media (min-width: 768px) { .honesty__content { max-inline-size: 52ch; } }
.honesty__badge-wrap { position: static !important; margin: 0 !important; }
.honesty__badge-wrap .elementor-widget-container { padding: 0 !important; }
.honesty__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-pill);
  color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  margin-block-end: var(--space-md);
}
.honesty__title,
.honesty__title .elementor-heading-title {
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-bold) !important;
  color: #fff !important;
  line-height: var(--lh-snug) !important;
  max-inline-size: 24ch;
}
.honesty__text { gap: var(--space-md) !important; margin-block-start: var(--space-lg); }
.honesty__text p { font-size: var(--fs-body) !important; color: var(--color-on-dark-muted) !important; line-height: var(--lh-body) !important; }
.honesty__text-strong,
.honesty__text-strong p {
  color: #fff !important;
  font-weight: var(--fw-semibold) !important;
}
.honesty__text-strong { position: relative; padding-inline-start: var(--space-md); border-inline-start: 3px solid var(--color-accent); }

/* ---- Journey (#journey): sticky instrument panel + steps ----------------- */
.journey { position: relative; overflow: visible; padding-block: var(--space-section) !important; }
.journey__decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.journey__blob { position: absolute !important; }
.journey .container { position: relative; z-index: 1; }
.journey__layout { display: grid !important; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem) !important; }
@media (min-width: 768px) {
  .journey__layout { grid-template-columns: 0.8fr 1.2fr; align-items: stretch; }
  .journey__aside { display: block !important; }
}
.journey__aside { display: none; }
.journey__stage {
  position: sticky;
  inset-block-start: clamp(92px, 8vh, 120px);
  align-items: center;
  gap: var(--space-md) !important;
  block-size: clamp(360px, 56vh, 520px);
  padding: var(--space-lg) var(--space-md) !important;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}
/* Reveal the instrument's parts as DIRECT flex children of the sticky stage so
   the source's column/gap/spine:flex-1 layout applies through the widget. */
.journey__stage-inner,
.journey__stage-inner > .elementor-widget-container { display: contents !important; }
/* Steps */
.journey__steps { gap: clamp(1.75rem, 1rem + 3vw, 3rem) !important; list-style: none; }
.jstep { display: grid !important; grid-template-columns: auto 1fr; gap: var(--space-md) !important; align-items: start; }
.jstep__marker-wrap,
.jstep__marker-wrap > .elementor-widget-container { display: contents !important; }
.jstep__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  box-shadow: var(--shadow-soft);
}
.jstep.is-active .jstep__marker { background: var(--color-primary); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.jstep__title,
.jstep__title .elementor-heading-title {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-heading) !important;
  line-height: var(--lh-snug) !important;
  margin-block-end: var(--space-sm);
}
.jstep__body .jstep__p p,
.jstep__body p { font-size: var(--fs-body) !important; color: var(--color-body) !important; line-height: var(--lh-body) !important; }
.jstep__p + .jstep__p { margin-block-start: var(--space-sm); }

/* ---- Think (#think): contrast cards + arrow --------------------------------- */
.think__contrast { display: flex; flex-direction: column; align-items: center; gap: var(--space-md) !important; }
@media (min-width: 600px) {
  .think__contrast { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(1rem, 0.5rem + 1.5vw, 2rem) !important; }
}
.think-card { gap: var(--space-sm) !important; padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) !important; border-radius: var(--radius-lg); }
.think-card .think-card__p p { font-size: var(--fs-body) !important; color: var(--color-body) !important; line-height: var(--lh-body) !important; }
.think-card__head-wrap, .think-card__head-wrap > .elementor-widget-container { display: contents !important; }
.think-card__head { display: flex; align-items: center; gap: var(--space-sm); }
.think-card__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 46px; block-size: 46px; flex-shrink: 0; border-radius: var(--radius-pill); }
.think-card__tag { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.think-card--quick { background: rgba(118, 122, 147, 0.07); border: 1px solid var(--color-border); }
.think-card--quick .think-card__icon { background: rgba(118, 122, 147, 0.14); color: var(--color-muted); }
.think-card--quick .think-card__tag { color: var(--color-muted); }
.think-card--quick .think-card__p p { color: var(--color-muted) !important; }
.think-card--deep { background: var(--color-surface); border: 1px solid var(--color-border); border-block-start: 3px solid var(--color-accent); box-shadow: var(--shadow-raised); }
.think-card--deep .think-card__icon { background: var(--color-accent-200); color: var(--color-accent-600); }
.think-card--deep .think-card__tag { color: var(--color-primary); }
.think__arrow-wrap { display: flex; align-items: center; justify-content: center; }
.think__arrow { display: inline-flex; align-items: center; justify-content: center; align-self: center; inline-size: 44px; block-size: 44px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-accent); box-shadow: var(--shadow-soft); border: 1px solid var(--color-border); }
@media (max-width: 599px) { .think__arrow { transform: rotate(-90deg); } }
.think__close, .think__close p {
  margin-inline: auto; max-inline-size: 64ch; text-align: center !important;
  font-size: var(--fs-lead) !important; font-weight: var(--fw-medium) !important;
  color: var(--color-heading) !important; line-height: var(--lh-body) !important;
}
.think__close { margin-block-start: clamp(2rem, 1.25rem + 2vw, 3rem); padding-block-start: var(--space-md); border-block-start: 2px solid var(--color-secondary-400); }

/* ---- Manifesto (#note): calm elevated card ---------------------------------- */
.manifesto__card {
  position: relative; text-align: center; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised); align-items: center;
  padding: clamp(2rem, 1.25rem + 3.5vw, 4rem) clamp(1.5rem, 1rem + 3vw, 3.5rem) !important;
}
.manifesto__mark-wrap, .manifesto__peak-wrap { display: flex; justify-content: center; }
.manifesto__mark { display: inline-flex; color: var(--color-secondary-400); margin-block-end: var(--space-sm); }
.manifesto__title, .manifesto__title .elementor-heading-title {
  font-size: var(--fs-h2) !important; font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important; line-height: var(--lh-snug) !important;
  max-inline-size: 24ch; margin-inline: auto; text-align: center !important;
}
.manifesto__body { gap: var(--space-md) !important; margin-block-start: var(--space-lg); max-inline-size: 60ch; }
.manifesto__body p { font-size: var(--fs-lead) !important; color: var(--color-body) !important; line-height: var(--lh-body) !important; }
.manifesto__peak {
  margin-block-start: clamp(1.75rem, 1rem + 2vw, 2.75rem); display: inline-flex; flex-direction: column;
  align-items: center; gap: var(--space-xs); padding-block-start: var(--space-lg);
  border-block-start: 2px solid var(--color-secondary-400); max-inline-size: 36ch;
  font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-primary); line-height: var(--lh-snug);
}
.manifesto__peak-icon { color: var(--color-accent); }

/* ---- Final CTA (#contact): deep centered closing ---------------------------- */
.fcta {
  position: relative; overflow: hidden; background-image: var(--grad-deep);
  color: var(--color-on-dark); padding-block: clamp(4rem, 3rem + 6vw, 7.5rem) !important; text-align: center;
}
.fcta__glow {
  position: absolute; inset-block-start: -10%; inset-inline-start: 50%; transform: translateX(-50%);
  inline-size: min(640px, 90%); block-size: 360px; background-image: var(--grad-accent-glow); pointer-events: none;
}
.fcta__blob { position: absolute !important; }
.fcta__inner { position: relative; z-index: 1; max-inline-size: 760px; margin-inline: auto; align-items: center; }
.fcta__title, .fcta__title .elementor-heading-title {
  font-size: var(--fs-h2) !important; font-weight: var(--fw-extrabold) !important; color: #fff !important;
  line-height: var(--lh-snug) !important; max-inline-size: 22ch; margin-inline: auto; text-align: center !important;
}
.fcta__text { gap: var(--space-sm) !important; margin-block-start: var(--space-md); max-inline-size: 58ch; }
.fcta__text p { font-size: var(--fs-lead) !important; color: var(--color-on-dark-muted) !important; line-height: var(--lh-body) !important; }
.fcta__cta { margin-block-start: var(--space-xl); gap: var(--space-sm) !important; flex-wrap: wrap; justify-content: center; }
.cta--on-dark .elementor-button {
  background-color: transparent !important; background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important; color: #fff !important; box-shadow: none !important;
}
.cta--on-dark .elementor-button:hover { background-color: rgba(255, 255, 255, 0.1) !important; }
.fcta__whats-wrap { display: flex; justify-content: center; }
.fcta__whats {
  margin-block-start: var(--space-lg); display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding-block: 0.65rem; padding-inline: 1.1rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-on-dark); font-size: var(--fs-body); line-height: var(--lh-snug);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fcta__whats:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-2px); }
.fcta__whats-icon {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px;
  flex-shrink: 0; border-radius: var(--radius-pill); background: #25d366; color: #fff;
}

/* ==========================================================================
   1f. MY STORY PAGE
   ========================================================================== */
/* ---- Hero (#top): copy + portrait + signature chip ----------------------- */
.ms-hero__inner { display: grid !important; gap: clamp(2.5rem, 1.4rem + 4vw, 4rem) !important; align-items: center; }
@media (min-width: 768px) { .ms-hero__inner { grid-template-columns: 1.08fr 0.92fr; } }
.ms-hero__content { align-items: flex-start; }
.ms-hero__title,
.ms-hero__title .elementor-heading-title {
  font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.01em;
  max-inline-size: 18ch;
}
.ms-hero__lead { margin-block-start: var(--space-md); max-inline-size: 56ch; }
.ms-hero__lead p { font-size: var(--fs-lead) !important; color: var(--color-body) !important; line-height: var(--lh-body) !important; }
.ms-hero__cta { margin-block-start: var(--space-lg) !important; gap: var(--space-sm) !important; flex-wrap: wrap; }
.ms-hero__media { position: relative; justify-self: center; inline-size: 100%; max-inline-size: 440px; }
.ms-hero__frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5;
  border: 6px solid var(--color-surface); box-shadow: var(--shadow-deep); background: var(--color-secondary-200);
}
.ms-hero__frame-img { position: absolute !important; inset: 0; }
.ms-hero__frame-img .elementor-widget-container,
.ms-hero__frame-img .elementor-image,
.ms-hero__frame-img figure { block-size: 100%; margin: 0; }
.ms-hero__frame img { inline-size: 100% !important; block-size: 100% !important; object-fit: cover; object-position: 50% 18%; }
.ms-hero__frame-tint {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(30, 32, 83, 0.18) 0%, rgba(30, 32, 83, 0) 45%),
    linear-gradient(0deg, rgba(230, 216, 234, 0.45) 0%, rgba(230, 216, 234, 0) 38%);
}
.ms-hero__deco { position: static !important; margin: 0 !important; inline-size: 0; block-size: 0; }
.ms-hero__deco .elementor-widget-container { padding: 0 !important; }
.ms-hero__sign {
  position: absolute; inset-block-end: clamp(-14px, -1.4vw, -8px); inset-inline-start: clamp(-12px, -1.2vw, -6px);
  z-index: 2; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding-block: 0.65rem 0.5rem; padding-inline: 1rem; border-radius: var(--radius-lg);
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-raised);
}
.ms-hero__sign-name { font-size: var(--fs-h4); font-weight: var(--fw-extrabold); color: var(--color-primary); line-height: 1; }
.ms-hero__sign-line { color: var(--color-accent); display: block; }
@media (max-width: 767px) { .ms-hero__media { max-inline-size: 360px; } }

/* ---- Shared: flatten raw-component / badge / media wrappers -------------- */
/* Text-Editor wrappers holding bespoke raw markup (badges, timeline, route,
   cards, meta art) -> display:contents so the original component becomes a
   DIRECT flex/grid child and the page CSS (my-story.css) styles it 1:1. */
.ms-iconwrap, .ms-iconwrap > .elementor-widget-container,
.ms-meta-art-wrap, .ms-meta-art-wrap > .elementor-widget-container,
.ms-timeline-wrap, .ms-timeline-wrap > .elementor-widget-container,
.ms-obs-wrap, .ms-obs-wrap > .elementor-widget-container,
.ms-route-wrap, .ms-route-wrap > .elementor-widget-container,
.ms-turn-wrap, .ms-turn-wrap > .elementor-widget-container,
.ms-role-contrast-wrap, .ms-role-contrast-wrap > .elementor-widget-container,
.ms-role-answer-wrap, .ms-role-answer-wrap > .elementor-widget-container,
.ms-today-paths-wrap, .ms-today-paths-wrap > .elementor-widget-container { display: contents !important; }
/* Framed media: flatten the Image widget so my-story.css positions the <img>
   against .ms-*__media (absolute drift frames + the cover-fill today portrait). */
.ms-begin__media-img, .ms-begin__media-img > .elementor-widget-container,
.ms-found__media-img, .ms-found__media-img > .elementor-widget-container,
.ms-near__media-img, .ms-near__media-img > .elementor-widget-container,
.ms-today__media-img, .ms-today__media-img > .elementor-widget-container,
.ms-turtle__bg-img, .ms-turtle__bg-img > .elementor-widget-container { display: contents !important; }

/* ---- Two-column grids (Elementor forces flex-column) --------------------- */
.ms-begin__grid, .ms-found__grid, .ms-near__grid, .ms-today__grid {
  display: grid !important;
  gap: clamp(2rem, 1.2rem + 3.5vw, 4rem) !important;
  align-items: center;
}
@media (min-width: 768px) {
  .ms-begin__grid { grid-template-columns: 0.85fr 1.15fr; }
  .ms-found__grid { grid-template-columns: 1.15fr 0.85fr; }
  .ms-near__grid { grid-template-columns: 1.1fr 0.9fr; }
  .ms-today__grid { grid-template-columns: 0.85fr 1.15fr; }
}
.ms-meta { display: grid !important; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem) !important; align-items: center; }
@media (min-width: 768px) {
  .ms-meta { grid-template-columns: 0.8fr 1.2fr; }
  .ms-meta--bamboo { grid-template-columns: 1.2fr 0.8fr; }
}
@media (max-width: 767px) { .ms-meta__art { order: -1; } }
.ms-begin__text, .ms-found__text, .ms-near__text, .ms-today__text, .ms-meta__text { gap: var(--space-md) !important; }

/* ---- Section-title variants + dark-section titles (G9) ------------------- */
.ms-begin__title .elementor-heading-title,
.ms-near__title .elementor-heading-title,
.ms-today__title .elementor-heading-title { text-align: start !important; }
.ms-begin__title { max-inline-size: 24ch; }
.ms-near__title { max-inline-size: 20ch; margin-block-end: var(--space-lg); }
.ms-today__title { max-inline-size: 22ch; margin-block-end: var(--space-md); }
.ms-turtle__title, .ms-cta__title { max-inline-size: 22ch; margin-inline: auto; }
.ms-turtle__title .elementor-heading-title,
.ms-cta__title .elementor-heading-title {
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-extrabold) !important;
  color: #fff !important;
  text-align: center !important;
  line-height: var(--lh-snug) !important;
}
.ms-turtle__title { margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (max-width: 767px) {
  .ms-begin__title .elementor-heading-title,
  .ms-near__title .elementor-heading-title,
  .ms-today__title .elementor-heading-title { text-align: center !important; }
}

/* ---- Lead-sized / dark-context paragraphs (native Text Editors) ---------- */
.ms-why__reframe p, .ms-road__after p, .ms-near__myth p,
.ms-cta__text p, .ms-meta__text p, .section-lead p, .ms-role__bridge p {
  font-size: var(--fs-lead) !important;
  line-height: var(--lh-body) !important;
}
.ms-why__mission p { font-size: var(--fs-lead) !important; font-weight: var(--fw-semibold) !important; color: var(--color-heading) !important; }
.ms-road__punch p { font-size: var(--fs-h3) !important; font-weight: var(--fw-bold) !important; color: var(--color-primary) !important; }
.ms-meta__text p, .ms-cta__text p { color: var(--color-on-dark-muted) !important; }
.ms-near__myth p { color: var(--color-muted) !important; }
.ms-cta__text { gap: var(--space-sm) !important; }

/* ==========================================================================
   RAW <a class="btn"> TEXT COLOUR (parent-theme bleed)
   --------------------------------------------------------------------------
   The masterstudy parent colours every <a> with the brand link colour, which
   overrides our raw anchor buttons' text — turning a filled button's label the
   same colour as its fill (invisible). Restore the source button colours.
   (Elementor Button widgets are unaffected; this is only for raw .btn anchors
   used inside Text-Editor markup: contact WhatsApp CTAs, my-story path links…)
   ========================================================================== */
a.btn--primary, a.btn--on-dark { color: #fff !important; }
a.btn--secondary { color: var(--color-primary) !important; }
.ct-hero__wa, .ct-form__wa-btn, .ct-cta__btn { color: #fff !important; }
.ct-hero__alt { color: var(--color-primary) !important; }
.ms-path-link { color: var(--color-heading) !important; }
.fcta__whats { color: var(--color-on-dark) !important; }
.sv-note__btn { color: var(--color-on-dark) !important; } /* outline btn on a dark panel */

/* ==========================================================================
   1g. CONTACT PAGE
   ========================================================================== */
/* Flatten Text-Editor wrappers holding raw markup so the original component is a
   DIRECT flex/grid child (contact.css then styles it 1:1). */
.ct-hero__deco, .ct-hero__deco > .elementor-widget-container,
.ct-hero__cta-wrap, .ct-hero__cta-wrap > .elementor-widget-container,
.ct-hero__hint-wrap, .ct-hero__hint-wrap > .elementor-widget-container,
.ct-clarity__reasons-wrap, .ct-clarity__reasons-wrap > .elementor-widget-container,
.ct-steps-wrap, .ct-steps-wrap > .elementor-widget-container,
.ct-form__wa-wrap, .ct-form__wa-wrap > .elementor-widget-container,
.ct-cta__btn-wrap, .ct-cta__btn-wrap > .elementor-widget-container,
.ct-cta__hint-wrap, .ct-cta__hint-wrap > .elementor-widget-container,
.ct-hero__frame-img, .ct-hero__frame-img > .elementor-widget-container { display: contents !important; }

/* ---- Hero (#top) ---------------------------------------------------------- */
.ct-hero__inner { display: grid !important; gap: clamp(2.5rem, 1.4rem + 4vw, 4rem) !important; align-items: center; }
@media (min-width: 768px) { .ct-hero__inner { grid-template-columns: 1.08fr 0.92fr; } }
.ct-hero__content { align-items: flex-start; }
.ct-hero__title,
.ct-hero__title .elementor-heading-title {
  font-size: clamp(1.9rem, 1.35rem + 2.5vw, 2.9rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.01em;
  max-inline-size: 20ch;
}
.ct-hero__lead { margin-block-start: var(--space-md); max-inline-size: 54ch; }
.ct-hero__lead p { font-size: var(--fs-lead) !important; color: var(--color-body) !important; line-height: var(--lh-body) !important; }
.ct-hero__media { position: relative; justify-self: center; inline-size: 100%; max-inline-size: 440px; }
.ct-hero__frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5;
  border: 6px solid var(--color-surface); box-shadow: var(--shadow-deep); background: var(--color-secondary-200);
}
.ct-hero__frame img { inline-size: 100% !important; block-size: 100% !important; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 767px) { .ct-hero__media { max-inline-size: 360px; } }

/* ---- Clarity (#clarity) --------------------------------------------------- */
.ct-clarity__lead p, .ct-clarity__close p { font-size: var(--fs-lead) !important; line-height: var(--lh-body) !important; }
.ct-clarity__close p { font-weight: var(--fw-medium) !important; color: var(--color-heading) !important; }

/* ---- Form (#contact-form): CF7 styled via the original .ct-field classes -- */
.ct-form__grid { display: grid !important; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; align-items: start; }
@media (min-width: 860px) { .ct-form__grid { grid-template-columns: 1.35fr 0.65fr; } }
.ct-form__panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-raised);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem) !important;
}
.ct-form__panel .wpcf7 { margin: 0; }
.ct-form__panel .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 559px) { .ct-form__panel .wpcf7-form { grid-template-columns: 1fr; } }
.ct-form__panel .wpcf7-form > input[type="hidden"],
.ct-form__panel .wpcf7-form > .screen-reader-response { display: none; }
.ct-field .wpcf7-form-control-wrap, .ct-select .wpcf7-form-control-wrap { display: contents; }
/* Force the source input frame (the theme styles inputs at 1px). */
.ct-form__panel .ct-field input, .ct-form__panel .ct-field textarea, .ct-form__panel .ct-select select {
  border: 1.5px solid var(--color-border-strong) !important;
}
.ct-form__panel .ct-field input:focus, .ct-form__panel .ct-field textarea:focus, .ct-form__panel .ct-select select:focus {
  border-color: var(--color-accent) !important;
}
/* Select2 (the parent theme loads select2.js + auto-enhances the <select>):
   style its container to replicate the original .ct-select field 1:1 (§F).
   We keep the source .ct-select__chevron and hide select2's own arrow. */
.ct-select .select2-container { width: 100% !important; }
.ct-select .select2-container--default .select2-selection--single {
  height: auto !important;
  min-block-size: 0;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--color-bg) !important;
  padding-block: 0.62rem;
  padding-inline: 1rem 2.75rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ct-select .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  color: var(--color-heading) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  line-height: 1.4 !important;
}
.ct-select .select2-selection--single .select2-selection__arrow { display: none !important; }
/* Fixed width: a long selected option must NOT widen the field/grid column.
   Grid items default to min-width:auto (grow to fit content) — pin them to 0 so
   each field keeps its 1fr share, and ellipsis-truncate the select2 label. */
.ct-form__panel .wpcf7-form > .ct-field { min-inline-size: 0; }
.ct-select, .ct-select .select2, .ct-select .select2-container { min-inline-size: 0; max-inline-size: 100%; }
.ct-select .select2-selection--single .select2-selection__rendered {
  display: block;
  max-inline-size: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-select .select2-container--open .select2-selection--single,
.ct-select .select2-container--focus .select2-selection--single {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-200) !important;
}
/* Dropdown panel (select2 appends it to <body>). */
.select2-container--default .select2-dropdown {
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  font-family: var(--font-primary);
  overflow: hidden;
}
.select2-container--default .select2-results__option {
  font-size: var(--fs-body);
  color: var(--color-body);
  padding: 0.6rem 1rem;
  line-height: var(--lh-snug);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-accent) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--color-accent-200);
  color: var(--color-heading);
}
.ct-form__panel .wpcf7-response-output {
  grid-column: 1 / -1; margin: 0; padding: 0.75rem 1rem; border-radius: var(--radius);
  font-size: var(--fs-small); line-height: var(--lh-snug);
}
.wpcf7-not-valid-tip { color: var(--color-accent-600); font-size: var(--fs-small); margin-block-start: 0.25rem; }
.ct-field input.wpcf7-not-valid, .ct-field textarea.wpcf7-not-valid, .ct-select select.wpcf7-not-valid {
  border-color: var(--color-accent-600) !important; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18) !important;
}
/* Submit: components.css .btn--primary styles it; add the paper-plane glyph as
   a background image (an <input> can't hold a child SVG). */
.ct-form__submit {
  grid-column: 1 / -1; justify-self: start; align-self: flex-start; margin-block-start: var(--space-2xs);
  padding-inline-end: 2.75rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.1rem center;
}

/* ---- Final CTA (#start) --------------------------------------------------- */
.ct-cta { padding-block: clamp(4rem, 3rem + 6vw, 7.5rem) !important; }
.ct-cta__inner { align-items: center; }
.ct-cta__title, .ct-cta__title .elementor-heading-title {
  font-size: var(--fs-h2) !important; font-weight: var(--fw-extrabold) !important; color: #fff !important;
  text-align: center !important; line-height: var(--lh-snug) !important; max-inline-size: 22ch; margin-inline: auto;
}
.ct-cta__text p { font-size: var(--fs-lead) !important; color: var(--color-on-dark-muted) !important; line-height: var(--lh-body) !important; }
.ct-cta__text { max-inline-size: 60ch; margin-block-start: var(--space-md); }

/* ==========================================================================
   CENTERED SECTION-HEAD TITLES (global)
   --------------------------------------------------------------------------
   Elementor sets .elementor-heading-title to text-align:start, so layout.css's
   wrapper `text-align:center` never reaches the text — multi-line titles in
   centered section heads render left-ragged. Center the text directly. (Applies
   to every page's `.section-head--center`.)
   ========================================================================== */
.section-head--center .section-title .elementor-heading-title { text-align: center !important; }
.section-head--center .section-lead,
.section-head--center .section-lead p { text-align: center; }

/* ==========================================================================
   GENERAL: blockquotes, link focus outlines (parent-theme bleed)
   ========================================================================== */
/* Blockquotes use the brand font (the parent theme forces Montserrat) and never
   show the theme's injected quote-mark pseudo-elements. */
blockquote, blockquote p { font-family: var(--font-primary) !important; }
blockquote::before, blockquote::after { content: none !important; display: none !important; }
/* No outline / box-shadow ring on links in any focus/active state (the parent
   theme + reset.css add a focus-visible outline). */
a:focus, a:focus-visible, a:active { outline: none !important; box-shadow: none !important; }

/* ==========================================================================
   1h. SERVICE PAGES (sv-)
   ========================================================================== */
/* `display:contents` (below) makes raw block components flex-items of the
   Elementor container, so flex-column / inline-content ones SHRINK-WRAP to
   content instead of filling to their max-inline-size (e.g. .sv-diff__principles
   collapsing to ~373px). Restore full width — their own max-inline-size +
   margin:auto still cap and centre them. */
.sv-problem__intro, .sv-problem__typer, .sv-problem__text, .sv-problem__twist, .sv-problem__resolve,
.sv-fit__list, .sv-fit__note, .sv-arc__flow, .sv-arc__close, .sv-learn__slider,
.sv-stages__list, .sv-after__panel, .sv-after__support,
.sv-diff__questions, .sv-diff__pivot, .sv-diff__intro, .sv-diff__principles, .sv-diff__strong,
.sv-suit__compare, .sv-suit__note, .sv-honesty__real, .sv-honesty__body,
.sv-exp__grid, .sv-exp__support, .sv-bene__lead, .sv-bene__list, .sv-bene__strong,
.sv-note__panel, .sv-ways__pair, .sv-ways__text, .sv-ways__honest, .sv-ways__strong { inline-size: 100%; }

/* ---- Overview split (sv-feature) ----------------------------------------- */
.sv-feature__grid { display: grid !important; gap: clamp(2rem, 1.2rem + 3.5vw, 4rem) !important; align-items: center; }
@media (min-width: 768px) { .sv-feature__grid { grid-template-columns: 1.1fr 0.9fr; } }
.sv-feature__title { max-inline-size: 22ch; margin-block-end: var(--space-md); }
.sv-feature__title .elementor-heading-title { text-align: start !important; }
.sv-feature__text p { font-size: var(--fs-body) !important; color: var(--color-body) !important; line-height: var(--lh-body) !important; }
.sv-feature__quote p { font-size: var(--fs-h4) !important; font-weight: var(--fw-bold) !important; color: var(--color-heading) !important; }
@media (max-width: 767px) { .sv-feature__title .elementor-heading-title { text-align: center !important; } }
/* VIP 350K note panel: the raw <h2> title must stay white on the dark panel
   (the parent theme forces h2 to the heading colour). */
.sv-note__title, .sv-note__title .elementor-heading-title { color: #fff !important; }
.sv-note__panel p { color: var(--color-on-dark-muted) !important; }
/* Raw-markup wrappers -> display:contents so the bespoke components (styled
   directly by service.css) become DIRECT children of their containers. */
.sv-raw, .sv-raw > .elementor-widget-container,
.sv-hero__frame-img, .sv-hero__frame-img > .elementor-widget-container { display: contents !important; }

/* ---- Hero (#top) ---------------------------------------------------------- */
.sv-hero__inner { display: grid !important; gap: clamp(2.5rem, 1.4rem + 4vw, 4rem) !important; align-items: center; }
@media (min-width: 768px) { .sv-hero__inner { grid-template-columns: 1.08fr 0.92fr; } }
.sv-hero__content { align-items: flex-start; }
.sv-hero__title,
.sv-hero__title .elementor-heading-title {
  font-size: clamp(1.9rem, 1.35rem + 2.5vw, 2.9rem) !important;
  font-weight: var(--fw-extrabold) !important;
  color: var(--color-heading) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.01em;
  max-inline-size: 20ch;
}
.sv-hero__lead { margin-block-start: var(--space-md); max-inline-size: 56ch; }
.sv-hero__lead p { font-size: var(--fs-lead) !important; color: var(--color-body) !important; line-height: var(--lh-body) !important; }
.sv-hero__media { position: relative; justify-self: center; inline-size: 100%; max-inline-size: 440px; }
.sv-hero__frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5;
  border: 6px solid var(--color-surface); box-shadow: var(--shadow-deep); background: var(--color-secondary-200);
}
.sv-hero__frame img { inline-size: 100% !important; block-size: 100% !important; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 767px) { .sv-hero__media { max-inline-size: 360px; } }

/* ---- Shared section heads / leads (native widgets) ----------------------- */
.sv-problem .section-lead p, .sv-arc .section-lead p, .sv-after .section-lead p, .sv-diff .section-lead p {
  font-size: var(--fs-lead) !important; line-height: var(--lh-body) !important;
}
.sv-after .section-lead strong { color: var(--color-accent) !important; font-weight: var(--fw-extrabold) !important; }

/* ---- Learn slider dots: reset the Kit button preset ---------------------- */
.sv-learn__dots .slider-dot {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-block-size: 0 !important;
  border: 0 !important;
}

/* ---- Final CTA (#start) --------------------------------------------------- */
.sv-cta { padding-block: clamp(4rem, 3rem + 6vw, 7.5rem) !important; }
.sv-cta__inner { align-items: center; }
.sv-cta__title, .sv-cta__title .elementor-heading-title {
  font-size: var(--fs-h2) !important; font-weight: var(--fw-extrabold) !important; color: #fff !important;
  text-align: center !important; line-height: var(--lh-snug) !important; max-inline-size: 24ch; margin-inline: auto;
}
.sv-cta__text { gap: var(--space-sm) !important; margin-block-start: var(--space-md); max-inline-size: 60ch; }
.sv-cta__text p { font-size: var(--fs-lead) !important; color: var(--color-on-dark-muted) !important; line-height: var(--lh-body) !important; }

/* ==========================================================================
   2. FOOTER
   ========================================================================== */

/* Re-center any .container that Elementor pins with margin:0 (footer grid +
   bottom bar). `.elementor .container` (2 classes) beats `.e-con` (1). */
.elementor .container {
  margin-inline: auto;
}

/* 3-column grid over Elementor's default flex. */
.site-footer .footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 768px) {
  .site-footer .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* Brand logo -> white on dark, sized. */
.footer__brand img,
.footer__brand .hfe-site-logo-img {
  block-size: 52px;
  inline-size: auto;
  margin-block-end: var(--space-sm);
  filter: brightness(0) invert(1);
}

/* Tagline / paragraph color on the dark surface. */
.site-footer .footer__tagline,
.site-footer .footer__tagline p {
  color: var(--color-on-dark-muted) !important;
  max-inline-size: 38ch;
  line-height: var(--lh-body);
}

/* Column headings -> light color + correct (small) size, NOT the giant
   primary-typography default Elementor applies to heading widgets. */
.site-footer .footer__title .elementor-heading-title {
  color: var(--color-on-dark) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-snug) !important;
  margin-block-end: var(--space-sm);
}

/* Footer link list -> tight column with the ORIGINAL 0.5rem gap (HFE injects
   15px padding per link). DESKTOP = start-aligned (source); centered on mobile
   ONLY (see the <=767px block at the end), matching responsive.css. */
.site-footer .footer__links .hfe-nav-menu,
.site-footer .footer__links ul.hfe-nav-menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start; /* start (RTL: right) on desktop */
  gap: var(--space-2xs) !important; /* 0.5rem, matches .footer__links */
}
.site-footer .footer__links .menu-item {
  inline-size: auto;
}
.site-footer .footer__links .menu-item a.hfe-menu-item {
  color: var(--color-on-dark-muted) !important;
  font-family: var(--font-primary);
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-snug) !important;
  padding: 0 !important; /* original links have NO padding; the gap spaces them */
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer .footer__links .menu-item a.hfe-menu-item:hover,
.site-footer .footer__links .menu-item.current-menu-item a.hfe-menu-item {
  color: var(--color-secondary) !important; /* light, independent of bg */
}

/* Social icon buttons -> light glyph, soft pill, accent lift on hover. */
.site-footer .footer__social {
  gap: var(--space-sm);
}
.site-footer .footer__social .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-on-dark) !important;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.site-footer .footer__social .elementor-icon svg {
  inline-size: 20px;
  block-size: 20px;
  fill: var(--color-on-dark) !important;
}
.site-footer .footer__social .elementor-icon:hover {
  background-color: var(--color-accent) !important;
  transform: translateY(-3px);
}
.site-footer .footer__social .elementor-icon:hover svg {
  fill: #fff !important;
}

/* Bottom bar: full original layout — centered 1300 row, symmetric gutter,
   top divider, copyright at start / disclaimer at end. Elementor zeroed the
   top padding and pinned margin:0, so these are forced. */
.site-footer .footer__bottom {
  max-inline-size: var(--container-max);
  margin-inline: auto !important;
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md) !important;
  padding-block-end: 0 !important;
  padding-inline: var(--gutter) !important;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.site-footer .footer__bottom .elementor-widget-text-editor,
.site-footer .footer__bottom .footer__copy,
.site-footer .footer__bottom p {
  font-size: var(--fs-small) !important;
  color: var(--color-on-dark-muted) !important;
  margin: 0;
}

/* ---- Footer mobile centering (<=767px) ----------------------------------- */
@media (max-width: 767px) {
  .site-footer .footer__grid {
    text-align: center;
    justify-items: center;
  }
  .site-footer .footer__grid > .e-con {
    align-items: center;
  }
  .site-footer .footer__brand,
  .site-footer .footer__col {
    align-items: center;
    text-align: center;
  }
  /* Footer menus centered on MOBILE ONLY (desktop stays start-aligned). */
  .site-footer .footer__links .hfe-nav-menu,
  .site-footer .footer__links ul.hfe-nav-menu {
    align-items: center;
    text-align: center;
  }
  .site-footer .footer__links .menu-item,
  .site-footer .footer__links .menu-item a.hfe-menu-item {
    text-align: center;
  }
  .site-footer .footer__social {
    justify-content: center;
  }
  .site-footer .footer__bottom {
    flex-direction: column;
    gap: var(--space-2xs);
    text-align: center;
  }
}

/* ==========================================================================
   NATIVE SERVICE WIDGETS — fidelity bridges (2026-06-29)
   The 4 service pages are built from native Elementor widgets (Heading / Text
   Editor / Icon / Icon List / Image / Button / Container). These bridges map
   the widgets' real markup back to the original service.css design 1:1.
   ========================================================================== */

/* --- Headings: service.css sets typography on the SEMANTIC CLASS, which now
   lands on the Heading WIDGET WRAPPER; the visible <h*> is the inner
   .elementor-heading-title (and would otherwise take the Kit heading scale →
   "title too large"). Make the inner element inherit the wrapper's tokens. --- */
.sv-stage__name .elementor-heading-title,
.sv-learn__title .elementor-heading-title,
.sv-note__title .elementor-heading-title,
.sv-feature__title .elementor-heading-title {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  letter-spacing: inherit;
  margin: 0;
}

/* --- Hero stat chip: must hug its content, not stretch to the column. --- */
.sv-hero__stat { inline-size: fit-content !important; width: fit-content !important; }

/* --- ARC flow: native Containers default to flex-direction:column; the flow
   must wrap horizontally and each cell lays its step + chevron in a row. --- */
.sv-arc__flow { flex-direction: row !important; }
/* Cells are native Containers (width:100% by default → each wraps to its own
   row). Restore the source flex sizing so they sit 2-per-row (5 on desktop). */
.sv-arc__cell { flex-direction: row !important; flex: 1 1 calc(50% - 0.875rem) !important; width: auto !important; }
.sv-arc__cell--last { flex-basis: 100% !important; }
@media (min-width: 960px) {
  .sv-arc__cell, .sv-arc__cell--last { flex: 1 1 0 !important; }
}

/* --- STAGES: the row is a 2-col grid (marker | card); ensure it beats the
   container's default flex. --- */
.sv-stage { display: grid !important; grid-template-columns: 52px 1fr; }
@media (max-width: 480px) { .sv-stage { grid-template-columns: 44px 1fr; } }

/* --- LEARN slide: keep its per-view flex-basis (else the card shrinks). --- */
.sv-learn__slide { flex: 0 0 100% !important; }
@media (min-width: 600px) { .sv-learn__slide { flex-basis: 50% !important; } }
@media (min-width: 960px) { .sv-learn__slide { flex-basis: 33.333% !important; } }

/* --- DIFF principles: the items are native Containers (.sv-diff__no/__yes),
   not <li>, so the original `.sv-diff__principles li` padding/shape never
   reached them. Re-apply it to the containers. --- */
.sv-diff__principles > .sv-diff__no,
.sv-diff__principles > .sv-diff__yes {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  gap: var(--space-sm);
  align-items: center;
}

/* --- VIP 350K note button: kill the stray inset box-shadow service.css put on
   the Button WRAPPER (the real <a.elementor-button> border comes from
   .cta--on-dark). --- */
.sv-note__btn { box-shadow: none !important; }

/* --- Overview split (sv-feature) media: native Image widget. Flatten the
   widget wrapper chain so the <img> becomes a direct child of the framed,
   position:relative .sv-feature__media (so its absolute fill + parallax work). */
.sv-feature__media-img,
.sv-feature__media-img > .elementor-widget-container,
.sv-feature__media-img .elementor-image,
.sv-feature__media-img figure { display: contents !important; }

/* ==========================================================================
   ICON LIST widgets used for service-page lists. Elementor renders real <li>
   (.elementor-icon-list-item) inside .elementor-icon-list-items; reset its
   defaults and re-express each list's layout/bullets from service.css.
   ========================================================================== */
.sv-after__list .elementor-icon-list-items,
.sv-diff__questions .elementor-icon-list-items,
.sv-suit__col-list .elementor-icon-list-items,
.sv-stage__sub .elementor-icon-list-items,
.sv-typer__source .elementor-icon-list-items { padding: 0; margin: 0; width: 100%; }
.sv-after__list .elementor-icon-list-item,
.sv-diff__questions .elementor-icon-list-item,
.sv-suit__col-list .elementor-icon-list-item,
.sv-stage__sub .elementor-icon-list-item,
.sv-typer__source .elementor-icon-list-item {
  display: block; margin: 0; background: none;
}
/* kill Elementor's optional item divider */
.sv-after__list .elementor-icon-list-item:after,
.sv-diff__questions .elementor-icon-list-item:after,
.sv-suit__col-list .elementor-icon-list-item:after,
.sv-stage__sub .elementor-icon-list-item:after,
.sv-typer__source .elementor-icon-list-item:after { display: none !important; }
/* text span inherits the item's font/colour (set per list below) */
.sv-after__list .elementor-icon-list-text,
.sv-diff__questions .elementor-icon-list-text,
.sv-suit__col-list .elementor-icon-list-text,
.sv-stage__sub .elementor-icon-list-text,
.sv-typer__source .elementor-icon-list-text {
  font: inherit; color: inherit; padding: 0;
}

/* AFTER — 2-col grid, check-in-circle bullet (::before, as in the source). */
.sv-after__list .elementor-icon-list-items { display: grid; gap: var(--space-sm) var(--space-lg); }
@media (min-width: 600px) { .sv-after__list .elementor-icon-list-items { grid-template-columns: repeat(2, 1fr); } }
.sv-after__list .elementor-icon-list-item {
  position: relative;
  padding-inline-start: 1.9rem;
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-snug);
}
.sv-after__list .elementor-icon-list-item:before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.35em;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--radius-pill);
  background:
    var(--color-accent-200)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23393592' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* DIFF questions — bordered cards, no bullet, lead-sized. */
.sv-diff__questions .elementor-icon-list-items { display: flex; flex-direction: column; gap: var(--space-sm); }
.sv-diff__questions .elementor-icon-list-item {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-secondary-400);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}

/* SUIT columns — dot bullets, colour by column. */
.sv-suit__col-list .elementor-icon-list-items { display: flex; flex-direction: column; gap: var(--space-sm); }
.sv-suit__col-list .elementor-icon-list-item {
  position: relative;
  padding-inline-start: 1.4rem;
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-snug);
}
.sv-suit__col-list .elementor-icon-list-item:before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-pill);
}
.sv-suit__col--yes .sv-suit__col-list .elementor-icon-list-item:before { background: var(--color-accent); }
.sv-suit__col--maybe .sv-suit__col-list .elementor-icon-list-item:before { background: var(--color-secondary-400); }

/* STAGE sub-list — accent dot bullet. */
.sv-stage__sub .elementor-icon-list-items { display: flex; flex-direction: column; gap: var(--space-2xs); margin-block: var(--space-sm); }
.sv-stage__sub .elementor-icon-list-item {
  position: relative;
  padding-inline-start: 1.3rem;
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-snug);
}
.sv-stage__sub .elementor-icon-list-item:before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* TYPER source — the rotating quotes (Icon List); bubble styling per .sv-quote. */
.sv-typer__source .elementor-icon-list-items { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; }
.sv-typer__source .elementor-icon-list-item {
  position: relative;
  max-inline-size: 52ch;
  padding: var(--space-sm) var(--space-md);
  background: rgba(118, 122, 147, 0.07);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-muted);
  text-align: start;
}

/* ==========================================================================
   CONTACT (id 18) — NATIVE WIDGET bridges (2026-06-29 native rebuild).
   The CTA row, hero bubble, clarity reasons, step cards and WhatsApp panel are
   now native Containers/Icon/Heading/Text/Button widgets (no raw HTML).
   ========================================================================== */
/* Heading widgets: inner <h*> inherits the semantic-class typography. */
.ct-step__title .elementor-heading-title,
.ct-form__wa-title .elementor-heading-title {
  font-size: inherit !important; font-weight: inherit !important;
  line-height: inherit !important; color: inherit !important; margin: 0;
}
/* Icon widgets: glyph takes the box (wrapper) colour, not the Kit primary. */
.elementor-widget-icon[class*="ct-"] .elementor-icon,
.elementor-widget-icon[class*="ct-"] .elementor-icon svg { color: inherit !important; }

/* Steps grid (native Container). */
.ct-steps__list { display: grid !important; gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); }
@media (min-width: 768px) { .ct-steps__list { grid-template-columns: repeat(3, 1fr) !important; align-items: stretch; } }

/* Hero WhatsApp button (purple, green icon-circle, icon LEADS). */
.ct-hero__wa .elementor-button-content-wrapper { flex-direction: row !important; gap: var(--space-2xs); }
.ct-hero__wa .elementor-button-icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 26px; block-size: 26px; flex-shrink: 0; margin: 0;
  border-radius: var(--radius-pill); background: #25d366; color: #fff;
}
.ct-hero__wa .elementor-button-icon svg { inline-size: 16px; block-size: 16px; fill: currentColor !important; }
/* Hero "or fill the form" — native Button styled as a text link. */
.ct-hero__alt .elementor-button {
  background: transparent !important; background-image: none !important; box-shadow: none !important;
  padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
  color: var(--color-primary) !important; font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-border-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.ct-hero__alt .elementor-button:hover { text-decoration-color: var(--color-accent); }

/* Green WhatsApp buttons (form panel + final CTA). */
.ct-form__wa-btn .elementor-button,
.ct-cta__btn .elementor-button {
  background-color: #25d366 !important; background-image: none !important; color: #fff !important;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.4);
}
.ct-form__wa-btn .elementor-button:hover,
.ct-cta__btn .elementor-button:hover { background-color: #1fb959 !important; }
/* Final CTA WhatsApp icon LEADS (no green circle, just the glyph). */
.ct-cta__btn .elementor-button-content-wrapper { flex-direction: row !important; gap: var(--space-2xs); }
.ct-cta__btn .elementor-button-icon { margin: 0; }
.ct-cta__btn .elementor-button-icon svg { inline-size: 22px; block-size: 22px; fill: currentColor !important; }

/* ==========================================================================
   HOW I WORK (id 15) — NATIVE WIDGET bridges (2026-06-29 native rebuild).
   Bespoke/animated SVGs are native Icon widgets; decorative divs are Containers.
   ========================================================================== */
/* Illustration SVGs (idea scenes, hero chip): flatten the Icon-widget chain so
   the <svg> is a direct child and the page CSS sizes/paints it (multi-colour via
   its own .idea1-bar/.idea2-col/... classes — .ic-art adds no fill override). */
.idea__scene, .idea__scene > .elementor-widget-container, .idea__scene .elementor-icon,
.hiw-hero__chip-art, .hiw-hero__chip-art > .elementor-widget-container, .hiw-hero__chip-art .elementor-icon { display: contents !important; }
.idea__art svg { inline-size: 100% !important; block-size: auto !important; }
.hiw-hero__chip svg.hiw-hero__chip-svg { inline-size: 72px !important; block-size: 40px !important; }

/* Heading widgets: inner <h*> inherits the semantic-class typography. */
.idea__title .elementor-heading-title, .jstep__title .elementor-heading-title,
.honesty__title .elementor-heading-title, .manifesto__title .elementor-heading-title,
.myth__title .elementor-heading-title {
  font-size: inherit !important; font-weight: inherit !important;
  line-height: inherit !important; color: inherit !important; margin: 0;
}

/* Icon glyph takes the box (wrapper) colour, not the Kit primary. */
.jstep__marker .elementor-icon, .think-card__icon .elementor-icon, .think__arrow .elementor-icon,
.honesty__badge .elementor-icon, .manifesto__mark .elementor-icon, .manifesto__peak-icon .elementor-icon,
.myth__tag .elementor-icon, .hiw-hero__pulse-core .elementor-icon { color: inherit !important; }

/* Journey count: strong + span must align on one baseline (flatten the TE). */
.journey__count > .elementor-widget-container { display: contents !important; }
/* Journey spine ticks (positions, since native Containers can't take inline style). */
.journey__tick--1 { inset-block-start: 6%; }
.journey__tick--2 { inset-block-start: 28%; }
.journey__tick--3 { inset-block-start: 50%; }
.journey__tick--4 { inset-block-start: 72%; }
.journey__tick--5 { inset-block-start: 94%; }

/* Final-CTA WhatsApp pill (native Button styled as the source inline link). */
.fcta__whats .elementor-button {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding-block: 0.65rem; padding-inline: 1.1rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07) !important; background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: none !important;
  color: var(--color-on-dark) !important; font-size: var(--fs-body); font-weight: var(--fw-regular);
  line-height: var(--lh-snug); text-align: start;
}
.fcta__whats .elementor-button:hover { background: rgba(255, 255, 255, 0.13) !important; }
.fcta__whats .elementor-button-content-wrapper { flex-direction: row !important; gap: var(--space-2xs); align-items: center; }
.fcta__whats .elementor-button-text { white-space: normal; }
.fcta__whats .elementor-button-icon {
  display: inline-flex; align-items: center; justify-content: center; margin: 0;
  inline-size: 30px; block-size: 30px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: #25d366; color: #fff;
}
.fcta__whats .elementor-button-icon svg { inline-size: 20px; block-size: 20px; fill: currentColor !important; }

/* ==========================================================================
   MY STORY (id 16) — NATIVE WIDGET bridges (2026-06-29 native rebuild).
   Timeline/route/turn/cards are native Containers; SVGs native Icon widgets.
   ========================================================================== */
/* Turn-sequence destination figure: native Image widget. */
.ms-dest__media-img, .ms-dest__media-img > .elementor-widget-container,
.ms-dest__media-img .elementor-image, .ms-dest__media-img figure { display: contents !important; }

/* Illustration SVGs (signature, turtle, bamboo) — flatten the Icon-widget chain
   so the <svg> is a direct child and the page CSS sizes/paints it (multi-colour
   via its own classes; .ic-art adds no fill override). */
.ms-hero__sign-art, .ms-hero__sign-art > .elementor-widget-container, .ms-hero__sign-art .elementor-icon,
.ms-turtle__glyph-art, .ms-turtle__glyph-art > .elementor-widget-container, .ms-turtle__glyph-art .elementor-icon,
.ms-bamboo-art, .ms-bamboo-art > .elementor-widget-container, .ms-bamboo-art .elementor-icon { display: contents !important; }
.ms-hero__sign-line { inline-size: 120px !important; block-size: 18px !important; }
.ms-turtle__glyph { inline-size: 150px !important; block-size: 112px !important; }
.ms-bamboo { inline-size: 160px !important; block-size: 226px !important; }

/* Circle/marker icon glyphs take the box (wrapper) colour. */
.ms-node__dot .elementor-icon, .ms-stop__marker .elementor-icon, .ms-obs__icon .elementor-icon,
.ms-role__icon .elementor-icon, .ms-role__answer-icon .elementor-icon, .ms-tnode__marker .elementor-icon,
.ms-begin__quote-mark .elementor-icon { color: inherit !important; }

/* Program-path links — native Button styled as the source card link. */
.ms-path-link .elementor-button {
  display: flex; align-items: center; gap: var(--space-sm); inline-size: 100%;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  background: var(--color-surface) !important; background-image: none !important;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  color: var(--color-heading) !important; text-align: start; font-weight: var(--fw-bold);
}
.ms-path-link .elementor-button:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); border-color: var(--color-accent); }
.ms-path-link .elementor-button-content-wrapper { flex: 1; flex-direction: row !important; align-items: center; gap: var(--space-sm); }
.ms-path-link .elementor-button-icon {
  display: inline-flex; align-items: center; justify-content: center; margin: 0;
  inline-size: 42px; block-size: 42px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: var(--color-secondary-200); color: var(--color-primary);
}
.ms-path-link .elementor-button-icon svg { inline-size: 22px; block-size: 22px; }
.ms-path-link .elementor-button::after {
  content: ""; inline-size: 18px; block-size: 18px; flex-shrink: 0; color: var(--color-muted);
  background: currentColor;
  -webkit-mask: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   USER-REQUESTED EDITS BATCH (2026-06-29) — CSS-only, no rebuilds.
   ========================================================================== */

/* GLOBAL — hero trend chips must hug their content (native Container would
   otherwise stretch full-width). */
.hiw-hero__chip, .pg-hero__chip { inline-size: fit-content !important; width: fit-content !important; }

/* HOME — method philosophy: the source nests the CTA INSIDE .method__philosophy-body
   (turtle | [statement, line, cta]). The native build made .cta-row a SIBLING of
   the body (3 children), so a plain flex-row laid all three across. Use a grid so
   the turtle sits in col 1 (vertically centered) and the body + cta stack in col 2. */
.method__philosophy {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  row-gap: var(--space-lg);
  align-items: center;
}
.method__turtle { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.method__philosophy-body { grid-column: 2; grid-row: 1; }
.method__philosophy .cta-row { grid-column: 2; grid-row: 2; justify-content: flex-start; margin-block-start: 0 !important; }
@media (max-width: 767px) {
  .method__philosophy { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: var(--space-md); }
  .method__turtle { grid-row: auto; }
  .method__philosophy-body, .method__philosophy .cta-row { grid-column: 1; }
  .method__philosophy .cta-row { justify-content: center; }
}
/* services helper is now a WhatsApp CTA (compat.js adds the .wa-cta overlay). */
.services__helper { cursor: pointer; }

/* PROGRAMS + CONTACT — WhatsApp buttons: no icon slide on hover. */
.pcta__btn .elementor-button:hover .elementor-button-icon,
.ct-hero__wa .elementor-button:hover .elementor-button-icon,
.ct-cta__btn .elementor-button:hover .elementor-button-icon,
.ct-form__wa-btn .elementor-button:hover .elementor-button-icon { transform: none !important; }

/* MY STORY — timeline fill centered: the track has an explicit inset-inline
   span between the outer dots, but Elementor forces width:100% on the native
   Container, stretching it full-width. Let the inset control the width. */
.ms-timeline__track { inline-size: auto !important; width: auto !important; }
/* Route stop markers: ensure the 2-col grid (marker | card) holds + marker size. */
.ms-stop { display: grid !important; grid-template-columns: 52px 1fr; }
@media (max-width: 480px) { .ms-stop { grid-template-columns: 44px 1fr; } }
.ms-stop__marker { inline-size: 52px !important; block-size: 52px !important; flex-shrink: 0; }

/* HOW I WORK — myth tags: keep the icon badges absolutely positioned at the
   shot corners (native Icon widget wrapper would otherwise sit in flow). */
.myth__tag { position: absolute !important; }

/* CONTACT — text colour on the dark WhatsApp panel + final CTA (the inner <p>
   of a Text Editor takes the body colour → invisible on dark). */
.ct-form__wa-text, .ct-form__wa-text p { color: var(--color-on-dark-muted) !important; }
.ct-cta__hint, .ct-cta__hint p { color: var(--color-on-dark-muted) !important; }

/* SERVICE PAGES — learn slider cards equal height (stretch to the tallest). */
.sv-learn__track { align-items: stretch !important; }
.sv-learn__slide { align-items: stretch; }
.sv-learn__card { block-size: 100% !important; }

/* SERVICE PAGES — Icon List items render Elementor's DEFAULT fa-check icon when
   no per-item icon is set; that collides with the source CSS ::before bullet
   (= 2 markers). Hide the widget icon so only the source bullet shows. */
.sv-after__list .elementor-icon-list-icon,
.sv-diff__questions .elementor-icon-list-icon,
.sv-suit__col-list .elementor-icon-list-icon,
.sv-stage__sub .elementor-icon-list-icon,
.sv-typer__source .elementor-icon-list-icon { display: none !important; }
/* After list: keep the 2-column grid + block items so the bullet+text wrap
   cleanly (the source's two-column outcomes list). */
.sv-after__list .elementor-icon-list-items { display: grid !important; gap: var(--space-sm) var(--space-lg); }
@media (min-width: 600px) { .sv-after__list .elementor-icon-list-items { grid-template-columns: repeat(2, 1fr) !important; } }
.sv-after__list .elementor-icon-list-item,
.sv-diff__questions .elementor-icon-list-item,
.sv-suit__col-list .elementor-icon-list-item,
.sv-stage__sub .elementor-icon-list-item,
.sv-typer__source .elementor-icon-list-item { display: block !important; }
/* Tidy the per-item spacing (no Elementor vertical item padding; gap owns it). */
.sv-suit__col-list .elementor-icon-list-item,
.sv-stage__sub .elementor-icon-list-item,
.sv-after__list .elementor-icon-list-item { padding-block: 0 !important; }

/* MY STORY — hero signature chip must hug its content (native Container stretched it). */
.ms-hero__sign { inline-size: fit-content !important; width: fit-content !important; }

/* HOME — injected FAQ section background (scoped to the front page so it doesn't
   touch the how-i-work .faq section). */
body.home .faq.section { background: var(--grad-field); }

/* ==========================================================================
   BLOG ARCHIVE — RTL grid placement fix. In the WP RTL context, the bl-layout
   grid auto-placement put the main column into the 320px sidebar track (and the
   aside into the 1fr track). Pin them explicitly so the post grid gets the wide
   1fr column and the sidebar the fixed 320px one.
   ========================================================================== */
@media (min-width: 960px) {
  .bl-layout > .bl-main { grid-column: 1 / 2; min-inline-size: 0; }
  .bl-layout > .bl-aside { grid-column: 2 / 3; }
}
