/*
 * Styles for behavior that used to come from the Elementor/jQuery frontend.
 * Loaded after the captured CSS so these rules win where they overlap.
 * Everything here is additive: with JavaScript disabled the page stays fully
 * readable and every panel of content remains reachable.
 */

[hidden] {
  display: none !important;
}

/* Conversion pages and first-party forms. These render in the initial HTML,
 * so there is no third-party hydration flicker or blank first paint. */
.fo-demo-page,
.fo-demo-chooser {
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
  padding: clamp(80px, 9vw, 140px) 0 clamp(72px, 8vw, 120px);
}

.fo-demo-page__intro,
.fo-demo-chooser__intro {
  max-width: 850px;
  margin: 0 auto clamp(42px, 6vw, 72px);
  text-align: center;
}

.fo-demo-page__intro > span,
.fo-demo-chooser__intro > span {
  color: #3156d8;
  font: 700 13px/1.2 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.fo-healthcare-theme .fo-demo-page__intro > span,
.fo-healthcare-theme .fo-demo-chooser__intro > span {
  color: #087f72;
}

.fo-demo-page h1,
.fo-demo-chooser h1 {
  margin: 16px 0 20px;
  color: #0f2342;
  font: 500 clamp(42px, 6vw, 72px)/.98 var(--fo-font-serif, "Yrsa", serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.fo-demo-page__intro p,
.fo-demo-chooser__intro p {
  max-width: 720px;
  margin-inline: auto;
  color: #506078;
  font: 400 clamp(17px, 1.5vw, 20px)/1.65 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-demo-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  gap: 28px;
  align-items: start;
  justify-content: center;
}

.fo-demo-page__grid.is-scheduling { grid-template-columns: minmax(0, 900px); }
.fo-demo-calendar h2[tabindex="-1"]:focus { outline: none; }

.fo-demo-page__grid > section,
.fo-demo-chooser__cards > a {
  border: 1px solid #dce3ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(15, 35, 66, .08);
}

.fo-demo-page__grid > section { padding: clamp(24px, 3vw, 38px); }
.fo-demo-page__grid h2 { margin: 0 0 24px; color: #0f2342; font: 600 26px/1.15 var(--fo-font-serif, "Yrsa", serif); }

.fo-demo-form-embed .hs-form-html { min-height: 520px; }
.fo-demo-form-embed noscript { color: #506078; font: 400 16px/1.6 var(--fo-font-sans, "Inter", sans-serif); }

.fo-demo-form { display: grid; gap: 18px; }
.fo-demo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fo-demo-form label { display: grid; gap: 7px; color: #1d2e49; font: 600 14px/1.3 var(--fo-font-sans, "Inter", sans-serif); }
.fo-demo-form label span { color: #6d788a; font-weight: 400; }
.fo-demo-form input,
.fo-demo-form textarea,
.fo-newsletter-form input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #ccd5e2;
  border-radius: 12px;
  background: #fff;
  color: #14243c;
  font: 400 16px/1.3 var(--fo-font-sans, "Inter", sans-serif);
}
.fo-demo-form input:focus,
.fo-demo-form textarea:focus,
.fo-newsletter-form input:focus { border-color: #416bfa; outline: 3px solid rgba(65, 107, 250, .18); }
.fo-demo-form textarea { min-height: 116px; resize: vertical; }
.fo-demo-form__choice { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; border: 0; }
.fo-demo-form__choice legend { width: 100%; margin-bottom: 7px; color: #1d2e49; font: 600 14px/1.3 var(--fo-font-sans, "Inter", sans-serif); }
.fo-demo-form__choice legend span { color: #6d788a; font-weight: 400; }
.fo-demo-form__choice label { display: inline-flex; grid-template-columns: auto 1fr; gap: 9px; align-items: center; min-height: 44px; }
.fo-demo-form__choice input { width: 20px; min-height: 20px; margin: 0; box-shadow: none; }
.fo-demo-form button,
.fo-newsletter-form button {
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: #3156d8;
  color: #fff;
  font: 700 15px/1.2 var(--fo-font-sans, "Inter", sans-serif);
  cursor: pointer;
}
.fo-healthcare-theme .fo-demo-form button { background: #087f72; color: #fff; }
.fo-demo-form button:disabled,
.fo-newsletter-form button:disabled { cursor: wait; opacity: .7; }
.fo-demo-form__privacy,
.fo-form-status { margin: 0; color: #69758a; font: 400 12px/1.5 var(--fo-font-sans, "Inter", sans-serif); }
.fo-form-status:not(:empty) { padding: 10px 12px; border-radius: 9px; background: #f0f4ff; color: #213c88; }
.fo-healthcare-theme .fo-form-status:not(:empty) { background: #e9f7f4; color: #075f56; }
.fo-demo-calendar iframe { display: block; width: 100%; height: 720px; border: 0; border-radius: 14px; background: #f6f8fb; }
.fo-demo-calendar > p { margin: 14px 0 0; text-align: center; font: 400 13px/1.5 var(--fo-font-sans, "Inter", sans-serif); }
.fo-demo-calendar > p.fo-demo-calendar__success { margin: 0 0 10px; color: #2446b8; font-size: 15px; font-weight: 700; }
.fo-healthcare-theme .fo-demo-calendar > p.fo-demo-calendar__success { color: #087f72; }
.fo-demo-calendar a,
.fo-demo-form a { color: #3156d8; text-decoration: underline; text-underline-offset: 3px; }
.fo-demo-calendar a.fo-demo-calendar__direct {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid #3156d8;
  border-radius: 999px;
  color: #2446b8;
  font-weight: 700;
  text-decoration: none;
}
.fo-healthcare-theme .fo-demo-calendar a.fo-demo-calendar__direct { border-color: #087f72; color: #087f72; }

.fo-demo-chooser__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fo-demo-chooser__cards > a { display: grid; gap: 12px; min-height: 250px; padding: clamp(30px, 4vw, 48px); color: #0f2342; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.fo-demo-chooser__cards > a:hover { transform: translateY(-3px); box-shadow: 0 24px 70px rgba(15, 35, 66, .13); }
.fo-demo-chooser__cards span { color: #3156d8; font: 700 12px/1.2 var(--fo-font-sans, "Inter", sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.fo-demo-chooser__cards strong { font: 600 clamp(30px, 4vw, 44px)/1 var(--fo-font-serif, "Yrsa", serif); }
.fo-demo-chooser__cards small { color: #58667d; font: 400 16px/1.55 var(--fo-font-sans, "Inter", sans-serif); }
.fo-demo-chooser__cards > a:last-child span { color: #087f72; }

.fo-integration-status { width: min(100% - 40px, 1180px); margin: 28px auto 80px; padding: clamp(34px, 5vw, 62px); border-radius: 24px; background: #f5f8ff; color: #0f2342; }
.fo-integration-status > div:first-child { max-width: 760px; }
.fo-integration-status span { color: #087f72; font: 700 12px/1.2 var(--fo-font-sans, "Inter", sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.fo-integration-status h2 { margin: 14px 0 18px; font: 600 clamp(34px, 4vw, 52px)/1.02 var(--fo-font-serif, "Yrsa", serif); }
.fo-integration-status p { color: #52627b; font: 400 16px/1.65 var(--fo-font-sans, "Inter", sans-serif); }
.fo-integration-status__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.fo-integration-status__grid article { padding: 24px; border: 1px solid #dbe3f0; border-radius: 16px; background: #fff; }
.fo-integration-status__grid h3 { margin: 0 0 10px; font: 600 25px/1.1 var(--fo-font-serif, "Yrsa", serif); }

.fo-custody-workflow { width: min(100% - 40px, 1180px); margin: clamp(64px, 8vw, 108px) auto; color: #0f2342; }
.fo-custody-workflow > header { max-width: 820px; margin-bottom: 46px; }
.fo-custody-workflow > header > span { color: #3156d8; font: 700 12px/1.2 var(--fo-font-sans, "Inter", sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.fo-custody-workflow h2 { margin: 13px 0 18px; font: 600 clamp(38px, 5vw, 60px)/1 var(--fo-font-serif, "Yrsa", serif); letter-spacing: -.025em; }
.fo-custody-workflow p { color: #53627a; font: 400 17px/1.65 var(--fo-font-sans, "Inter", sans-serif); }
.fo-custody-workflow__reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 72px; }
.fo-custody-workflow__reasons > h2,
.fo-custody-workflow__stages > h2 { grid-column: 1 / -1; font-size: clamp(32px, 4vw, 46px); }
.fo-custody-workflow__reasons article,
.fo-custody-workflow__stages article { padding: clamp(24px, 3vw, 34px); border: 1px solid #dce3ef; border-radius: 18px; background: #f8faff; }
.fo-custody-workflow h3 { margin: 0 0 12px; font: 600 25px/1.1 var(--fo-font-serif, "Yrsa", serif); }
.fo-custody-workflow__stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.fo-custody-workflow__stages article > span { display: block; margin-bottom: 18px; color: #3156d8; font: 700 13px/1 var(--fo-font-sans, "Inter", sans-serif); }

.fo-article-cta { margin: clamp(48px, 7vw, 88px) 0 0; padding: clamp(28px, 5vw, 52px); border-radius: 20px; background: #eef3ff; color: #0f2342; }
.fo-article-cta h2 { margin: 0 0 12px; font: 600 clamp(32px, 4vw, 46px)/1 var(--fo-font-serif, "Yrsa", serif); }
.fo-article-cta p { max-width: 680px; color: #52627b; }
.fo-article-cta div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fo-article-cta a { display: inline-flex; min-height: 46px; align-items: center; padding: 11px 18px; border-radius: 999px; background: #3156d8; color: #fff; font-weight: 700; text-decoration: none; }
.fo-article-cta a + a { border: 1px solid #3156d8; background: transparent; color: #213f9f; }

.fo-clinical-practice__detail { width: min(100% - 40px, 1180px); margin: 0 auto clamp(64px, 8vw, 104px); padding: clamp(34px, 5vw, 62px); border-radius: 24px; background: #eef8f6; color: #0f3d38; }
.fo-clinical-practice__detail > div:first-child { max-width: 800px; }
.fo-clinical-practice__detail h2 { margin: 12px 0 18px; font: 600 clamp(36px, 5vw, 56px)/1 var(--fo-font-serif, "Yrsa", serif); letter-spacing: -.025em; }
.fo-clinical-practice__detail p { color: #496660; font: 400 17px/1.65 var(--fo-font-sans, "Inter", sans-serif); }
.fo-clinical-practice__detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.fo-clinical-practice__detail-grid article { padding: 26px; border: 1px solid #cde5df; border-radius: 16px; background: #fff; }
.fo-clinical-practice__detail-grid h3 { margin: 0 0 10px; color: #0f3d38; font: 600 26px/1.1 var(--fo-font-serif, "Yrsa", serif); }
.fo-clinical-practice__note { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid #cde5df; }

.fo-footer-newsletter-form .hs-form-html { min-height: 68px; }

@media (max-width: 767px) {
  .fo-demo-page,
  .fo-demo-chooser { width: min(100% - 28px, 1240px); padding-top: 58px; }
  .fo-demo-page__grid,
  .fo-demo-chooser__cards { grid-template-columns: 1fr; }
  .fo-demo-form__row { grid-template-columns: 1fr; }
  .fo-demo-calendar iframe { height: 660px; }
  .fo-integration-status { width: min(100% - 28px, 1180px); }
  .fo-integration-status__grid { grid-template-columns: 1fr; }
  .fo-custody-workflow { width: min(100% - 28px, 1180px); }
  .fo-custody-workflow__reasons,
  .fo-custody-workflow__stages { grid-template-columns: 1fr; }
  .fo-clinical-practice__detail { width: min(100% - 28px, 1180px); }
  .fo-clinical-practice__detail-grid { grid-template-columns: 1fr; }
}

/* Company leadership and advisory directory */
.fo-company-directory {
  background: linear-gradient(180deg, var(--fo-surface-subtle) 0, var(--fo-surface) 28%, var(--fo-surface-subtle) 100%);
  color: var(--fo-text);
  padding: clamp(5rem, 8vw, 8rem) 1.5rem;
}

.fo-company-directory__inner {
  margin: 0 auto;
  max-width: 1240px;
}

.fo-company-directory__eyebrow,
.fo-company-team__label {
  color: var(--fo-brand-dark);
  font: 700 0.78rem/1.3 var(--fo-font-sans);
  letter-spacing: 0.14em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.fo-company-directory h1 {
  color: var(--fo-text);
  font: 600 clamp(3.25rem, 7vw, 6.75rem)/0.9 var(--fo-font-display);
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 900px;
}

.fo-company-directory h1 em {
  color: var(--fo-brand);
  font-weight: inherit;
}

.fo-company-team {
  border-top: 1px solid var(--fo-border);
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

.fo-company-team__intro {
  display: grid;
  gap: 1rem 3rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  margin-bottom: 2.5rem;
}

.fo-company-team__intro .fo-company-team__label {
  grid-column: 1 / -1;
  margin: 0;
}

.fo-company-team__intro h2 {
  color: var(--fo-text);
  font: 600 clamp(2.35rem, 4vw, 4rem)/0.98 var(--fo-font-display);
  letter-spacing: -0.025em;
  margin: 0;
}

.fo-company-team__intro > p:last-child {
  align-self: end;
  color: var(--fo-text-secondary);
  font: 400 1rem/1.65 var(--fo-font-sans);
  margin: 0;
}

.fo-company-grid {
  display: grid;
  gap: 2rem 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fo-person-card {
  min-width: 0;
}

.fo-person-card > a {
  display: block;
}

.fo-person-card img {
  aspect-ratio: 437 / 420;
  background: var(--fo-surface-subtle);
  border-radius: 18px;
  display: block;
  height: auto;
  object-fit: cover;
  transition: transform 180ms ease, box-shadow 180ms ease;
  width: 100%;
}

.fo-person-card a:hover img,
.fo-person-card a:focus-visible img {
  box-shadow: var(--fo-shadow-md);
  transform: translateY(-3px);
}

.fo-person-card h3 {
  color: var(--fo-text);
  font: 600 1.65rem/1.05 var(--fo-font-display);
  margin: 1rem 0 0.35rem;
}

.fo-person-card p {
  color: var(--fo-text-muted);
  font: 400 0.88rem/1.45 var(--fo-font-sans);
  margin: 0;
}

@media (max-width: 900px) {
  .fo-company-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fo-company-team__intro {
    grid-template-columns: 1fr;
  }

  .fo-company-team__intro .fo-company-team__label {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .fo-company-directory {
    padding-inline: 1rem;
  }

  .fo-company-grid {
    gap: 1.5rem 0.75rem;
  }

  .fo-person-card h3 {
    font-size: 1.35rem;
  }
}

/* ----------------------------------------------- top-level brand hero art */

/*
 * A quiet visual bridge between the legal and healthcare sides of the
 * business. The generated source PNG is retained with the site assets; the
 * 20KB WebP is delivered here so the hero does not pay the 1.3MB source cost.
 * The artwork sits in its own layer so the headline, body copy, and CTA remain
 * crisp and fully selectable.
 */
.fo-brand-hero-page .fo-brand-hero.fo-brand-hero {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: calc(100vh - 84px);
  min-height: calc(100svh - 84px);
  background-color: #f9f9f9;
}

.fo-brand-hero-page .fo-brand-hero.fo-brand-hero::before {
  content: "";
  position: absolute;
  inset: -84px 0 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
  background-color: #f9f9f9;
  background-image: url("/wp-content/uploads/2026/08/home-hero-legal-healthcare-connection.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.82;
}

.fo-brand-hero-page .fo-brand-hero.fo-brand-hero > .e-con-inner {
  position: relative;
  z-index: 1;
  justify-content: center;
}

/* Keep the primary action above the fold on common 768px-tall laptops. The
 * full-size type remains intact; only the inherited 100px/50px edge padding is
 * tightened for the shorter canvas. */
@media (min-width: 768px) and (max-height: 820px) {
  .fo-brand-hero-page .fo-brand-hero.fo-brand-hero {
    --padding-top: 40px;
    --padding-bottom: 30px;
  }
}

/* Phones use a clean hero field; the generated neural artwork is intentionally
 * reserved for tablet and desktop where it has enough room to stay subtle. */
@media (max-width: 767px) {
  .fo-brand-hero-page .fo-brand-hero.fo-brand-hero {
    min-height: calc(100vh - 102px);
    min-height: calc(100svh - 102px);
  }

  .fo-brand-hero-page .fo-brand-hero.fo-brand-hero::before {
    display: none;
  }
}

/* -------------------------------- August 27 editorial and proof pass */

.home .fo-home-video-proof-block {
  border-block-start: 1px solid color-mix(in srgb, var(--fo-navy, #12233f) 16%, transparent);
  margin: clamp(28px, 3vw, 44px) auto 0;
  padding-block-start: clamp(22px, 2.4vw, 34px);
  margin-inline: auto;
  width: min(100% - 48px, 1472px);
}

.home .fo-home-video-proof-heading {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.home .fo-home-video-proof-heading h2 {
  font: 550 clamp(30px, 3.2vw, 44px)/1.04 var(--fo-font-serif, "Yrsa", Georgia, serif);
  margin: 0;
}

.home .fo-home-video-proof-heading h2 em {
  color: var(--fo-accent, #416bfa);
  font-weight: 500;
}

.home .fo-home-case-studies-link {
  align-items: center;
  background: var(--fo-navy, #12233f);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font: 700 14px/1 var(--fo-font-sans, "Inter", sans-serif);
  gap: 10px;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  text-decoration: none;
}

.home .fo-home-case-studies-link:hover,
.home .fo-home-case-studies-link:focus-visible {
  background: var(--fo-accent, #416bfa);
  color: #fff;
}

.home .fo-home-video-proof-cta a {
  color: var(--fo-navy, #12233f);
  text-decoration-color: var(--fo-accent, #416bfa);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.home .fo-home-video-proof-cta {
  color: var(--fo-text-muted, #56647a);
  font: 600 clamp(18px, 1.55vw, 22px)/1.45 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0 0 clamp(42px, 5vw, 72px);
}

.home .fo-video-card__bio {
  color: var(--fo-text-muted, #56647a);
  font: 500 14px/1.5 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0 0 12px;
}

.home .fo-home-trust .fo-video-proof--rail .fo-video-card__frame {
  aspect-ratio: 16 / 9;
}

.home .fo-home-trust .fo-video-proof--rail .fo-video-card--playing .fo-video-card__video {
  object-fit: contain;
}

.fo-workers-compensation .fo-hero-proof--quote > .fo-we-care-logo {
  display: block;
  margin-block-end: 26px;
}

.fo-workers-compensation .fo-hero-proof--quote > .fo-we-care-logo img {
  display: block;
  height: auto;
  max-width: 270px;
  object-fit: contain;
  width: 100%;
}

.fo-workers-compensation .fo-story-avatar img.fo-we-care-logo-inline {
  background: #fff;
  border-radius: 0;
  height: auto;
  object-fit: contain;
  padding: 4px;
  width: 150px;
}

.fo-workers-compensation .fo-story-avatar:has(.fo-we-care-logo-inline) {
  width: 150px;
}

.fo-expert-witnesses .fo-brand-hero--with-proof > .e-con-inner {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.68fr);
}

.fo-expert-witnesses .fo-pillars--equal > .e-con {
  flex: 1 1 0;
  min-width: 0;
}

.fo-pro-discover .fo-brand-hero--with-proof > .e-con-inner {
  gap: clamp(34px, 4vw, 64px);
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.86fr);
}

.fo-pro-discover .fo-brand-hero--with-proof .fo-video-proof--hero {
  justify-self: start;
  max-width: 480px;
}

.fo-security-refresh .elementor-399 {
  display: none;
}

.fo-security-hub {
  background: linear-gradient(145deg, #f7f9fd 0%, #fff 58%, #edf3ff 100%);
  color: var(--fo-navy, #12233f);
  padding: clamp(84px, 10vw, 150px) 24px clamp(96px, 11vw, 164px);
}

.fo-security-hub__shell {
  margin-inline: auto;
  width: min(100%, 1180px);
}

.fo-security-hub__eyebrow,
.fo-careers-openings__eyebrow,
.fo-faq-refresh-page__intro > p {
  color: var(--fo-accent, #416bfa);
  font: 750 12px/1.3 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.13em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.fo-security-hub h1 {
  font: 500 clamp(58px, 7.5vw, 104px)/0.92 var(--fo-font-serif, "Yrsa", Georgia, serif);
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 940px;
  text-wrap: balance;
}

.fo-security-hub__intro {
  color: var(--fo-text-muted, #56647a);
  font: 400 clamp(19px, 2vw, 25px)/1.5 var(--fo-font-sans, "Inter", sans-serif);
  margin: 32px 0 clamp(56px, 7vw, 90px);
  max-width: 720px;
}

.fo-security-directory {
  border-block-start: 1px solid rgba(18, 35, 63, 0.18);
}

.fo-security-directory a {
  align-items: baseline;
  border-block-end: 1px solid rgba(18, 35, 63, 0.18);
  color: inherit;
  display: grid;
  gap: 16px 28px;
  grid-template-columns: 44px minmax(180px, 0.7fr) minmax(280px, 1.3fr) 30px;
  padding-block: 30px;
  text-decoration: none;
}

.fo-security-directory a > span {
  color: var(--fo-accent, #416bfa);
  font: 700 13px/1 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-security-directory strong {
  font: 550 clamp(28px, 3vw, 40px)/1 var(--fo-font-serif, "Yrsa", Georgia, serif);
}

.fo-security-directory p {
  color: var(--fo-text-muted, #56647a);
  font: 400 16px/1.55 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0;
}

.fo-security-directory b {
  color: var(--fo-accent, #416bfa);
  font-size: 24px;
}

.fo-careers-openings,
.fo-faq-refresh-page {
  padding: clamp(74px, 9vw, 130px) 24px;
}

.fo-careers-openings__shell,
.fo-faq-refresh-page__shell {
  margin-inline: auto;
  width: min(100%, 1180px);
}

.fo-careers-openings h2,
.fo-faq-refresh-page__intro h2 {
  color: var(--fo-navy, #12233f);
  font: 500 clamp(44px, 5.5vw, 72px)/0.98 var(--fo-font-serif, "Yrsa", Georgia, serif);
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 880px;
  text-wrap: balance;
}

.fo-careers-role-list {
  border-block-start: 1px solid rgba(18, 35, 63, 0.18);
  display: grid;
  margin-block-start: clamp(48px, 6vw, 80px);
}

.fo-careers-role-list article {
  align-items: baseline;
  border-block-end: 1px solid rgba(18, 35, 63, 0.18);
  display: grid;
  gap: 14px 32px;
  grid-template-columns: minmax(240px, 0.8fr) minmax(300px, 1fr) auto;
  padding-block: 28px;
}

.fo-careers-role-list h3 {
  color: var(--fo-navy, #12233f);
  font: 550 clamp(28px, 3vw, 38px)/1.05 var(--fo-font-serif, "Yrsa", Georgia, serif);
  margin: 0;
}

.fo-careers-role-list p {
  color: var(--fo-text-muted, #56647a);
  font: 400 16px/1.55 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0;
}

.fo-careers-role-list a {
  color: var(--fo-accent, #416bfa);
  font: 700 14px/1.4 var(--fo-font-sans, "Inter", sans-serif);
  text-decoration: none;
  white-space: nowrap;
}

.fo-faq-refresh .elementor-306 > .e-parent:not(:first-child) {
  display: none;
}

.fo-faq-refresh-page {
  background: #f7f9fd;
}

.fo-faq-refresh-page__intro {
  display: grid;
  gap: 18px 60px;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1.55fr);
  margin-block-end: clamp(48px, 7vw, 88px);
}

.fo-faq-refresh-page__intro > p {
  margin: 8px 0 0;
}

.fo-faq-refresh-page .e-n-accordion {
  border-block-start: 1px solid rgba(18, 35, 63, 0.18);
}

.fo-faq-refresh-page details {
  border-block-end: 1px solid rgba(18, 35, 63, 0.18);
  padding: 0;
}

.fo-faq-refresh-page summary {
  align-items: center;
  color: var(--fo-navy, #12233f);
  cursor: pointer;
  display: flex;
  font: 600 clamp(23px, 2.5vw, 32px)/1.15 var(--fo-font-serif, "Yrsa", Georgia, serif);
  justify-content: space-between;
  list-style: none;
  padding-block: 26px;
}

.fo-faq-refresh-page summary::-webkit-details-marker {
  display: none;
}

.fo-faq-refresh-page summary > span {
  color: var(--fo-accent, #416bfa);
  font: 400 30px/1 var(--fo-font-sans, "Inter", sans-serif);
  margin-inline-start: 24px;
  transition: transform 180ms ease;
}

.fo-faq-refresh-page details[open] summary > span {
  transform: rotate(45deg);
}

.fo-faq-refresh-page .elementor-widget-text-editor {
  color: var(--fo-text-muted, #56647a);
  font: 400 17px/1.65 var(--fo-font-sans, "Inter", sans-serif);
  max-width: 820px;
  padding-block: 0 28px;
}

.fo-faq-refresh-page .elementor-widget-text-editor p {
  margin: 0;
}

@media (min-width: 1101px) {
  /* The captured child theme hid the final item as a legacy placeholder. The
     final item is now the real Company menu, so keep it in the desktop bar. */
  .mega-head ul.e-n-menu-heading > li:last-child {
    display: flex !important;
  }

  .fo-header-logo-col.fo-header-logo-col.fo-header-logo-col.fo-header-logo-col {
    --width: 24%;
  }

  .fo-header-nav-col.fo-header-nav-col.fo-header-nav-col.fo-header-nav-col {
    --width: 51%;
  }

  .fo-header-nav-col .e-n-menu-title {
    padding-inline: 14px;
  }
}

@media (max-width: 900px) {
  .fo-security-directory a,
  .fo-careers-role-list article,
  .fo-faq-refresh-page__intro {
    grid-template-columns: 1fr;
  }

  .fo-security-directory a {
    grid-template-columns: 32px 1fr 24px;
  }

  .fo-security-directory a p {
    grid-column: 2 / -1;
  }

  .fo-security-directory a b {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 767px) {
  .home .fo-home-video-proof-block {
    width: min(100% - 32px, 1472px);
  }

  .home .fo-home-video-proof-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .home .fo-home-case-studies-link {
    min-height: 44px;
  }

  .fo-security-hub h1 {
    font-size: clamp(48px, 14vw, 66px);
  }

  .fo-security-directory a {
    gap: 10px 14px;
    padding-block: 24px;
  }

  .fo-careers-role-list article {
    padding-block: 24px;
  }

  .fo-careers-role-list a {
    white-space: normal;
  }

  .fo-faq-refresh-page summary {
    font-size: 23px;
  }
}

/* First-party proof library: an editorial contact sheet, not a carousel. */
.fo-video-proof {
  --fo-proof-line: color-mix(in srgb, var(--fo-navy, #12233f) 16%, transparent);
  margin-inline: auto;
  padding-block: clamp(64px, 8vw, 120px);
  width: min(100% - 48px, 1480px);
}

.fo-proof-heading {
  margin-inline: auto;
  padding-block-start: clamp(70px, 9vw, 130px);
  width: min(100% - 48px, 1480px);
}

.fo-proof-heading h2 {
  color: var(--fo-navy, #12233f);
  font: 500 clamp(38px, 5vw, 72px)/0.98 var(--fo-font-serif, "Source Serif 4", serif);
  margin: 14px 0 22px;
  max-width: 980px;
}

.fo-proof-heading > p:last-child {
  color: var(--fo-text-muted, #56647a);
  max-width: 760px;
}

.fo-video-proof__intro {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr);
  margin-block-end: clamp(34px, 5vw, 64px);
}

.fo-video-proof__eyebrow,
.fo-video-card__category {
  color: var(--fo-accent, #416bfa);
  font: 700 12px/1.25 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fo-video-proof__filters {
  border-block: 1px solid var(--fo-proof-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-block-end: 40px;
  padding-block: 14px;
}

.fo-video-proof__filter {
  background: transparent;
  border: 0;
  color: var(--fo-text-muted, #56647a);
  cursor: pointer;
  font: 600 14px/1.4 var(--fo-font-sans, "Inter", sans-serif);
  padding: 7px 0;
}

.fo-video-proof__filter[aria-pressed="true"] {
  color: var(--fo-navy, #12233f);
  text-decoration: underline;
  text-decoration-color: var(--fo-accent, #416bfa);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.fo-video-proof__grid {
  display: grid;
  gap: clamp(28px, 3vw, 48px) clamp(18px, 2vw, 32px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fo-video-proof--featured .fo-video-proof__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.fo-video-proof--featured .fo-video-card {
  grid-column: span 4;
}

.fo-video-card {
  border-block-start: 1px solid var(--fo-proof-line);
  min-width: 0;
  padding-block-start: 14px;
}

.fo-video-card[hidden] {
  display: none;
}

.fo-video-card__frame {
  aspect-ratio: 9 / 16;
  background: #081426;
  margin-block: 14px 24px;
  overflow: hidden;
  position: relative;
}

.fo-video-card__frame--landscape {
  aspect-ratio: 16 / 9;
}

.fo-video-card__poster,
.fo-video-card__video {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
}

.fo-video-card--playing .fo-video-card__poster {
  display: none;
}

.fo-video-card__play {
  align-items: center;
  background: color-mix(in srgb, #071426 88%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font: 700 14px/1 var(--fo-font-sans, "Inter", sans-serif);
  gap: 10px;
  inset: auto auto 22px 22px;
  min-height: 46px;
  padding: 0 18px;
  position: absolute;
}

.fo-video-card__play::before {
  content: none;
}

.fo-video-card__title {
  color: var(--fo-navy, #12233f);
  font: 600 clamp(22px, 2vw, 30px)/1.08 var(--fo-font-serif, "Source Serif 4", serif);
  margin: 8px 0 14px;
  overflow-wrap: anywhere;
}

.fo-personal-injury .fo-video-card__title {
  overflow-wrap: normal;
  text-wrap: balance;
}

.fo-video-card__guest,
.fo-video-card__meta,
.fo-video-card__summary,
.fo-video-card__relationship {
  color: var(--fo-text-muted, #56647a);
  font: 400 15px/1.55 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0 0 10px;
}

.fo-video-card__guest {
  color: var(--fo-navy, #12233f);
  font-weight: 650;
}

body.home .fo-video-card__body {
  display: grid;
  grid-template-rows: auto auto minmax(4.8em, auto) minmax(5.2em, auto);
  align-content: start;
}

body.home .fo-video-card__title { min-height: 2.2em; }
body.home .fo-video-card__bio,
body.home .fo-video-card__summary { margin: 0 0 12px; }

.fo-video-card__meta {
  color: #56647a;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
}

.fo-video-card__relationship {
  font-size: 13px;
}

/* Page-specific proof belongs beside the promise, not several scrolls later. */
.fo-practice-page .fo-brand-hero--with-proof > .e-con-inner {
  align-items: center;
  display: grid;
  gap: clamp(44px, 6vw, 96px);
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
}

.fo-practice-page .fo-brand-hero--with-proof .elementor-element.fo-hero-copy {
  --width: 100%;
}

.fo-practice-page .fo-brand-hero--with-proof .fo-hero-copy > .elementor-element {
  --align-self: flex-start;
  max-width: 760px;
  text-align: left;
}

.fo-practice-page .fo-brand-hero--with-proof .fo-hero-copy > .elementor-element.elementor-widget-icon-list {
  max-width: 760px;
}

.fo-practice-page .fo-brand-hero--with-proof .fo-hero-copy .elementor-icon-list-items {
  justify-content: flex-start;
}

.fo-practice-page .fo-brand-hero--with-proof .fo-hero-copy .elementor-button-wrapper {
  text-align: left;
}

.fo-practice-page .fo-brand-hero--with-proof .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(64px, 6vw, 94px);
  line-height: 0.92;
}

.fo-video-proof--hero {
  justify-self: end;
  margin: 0;
  max-width: 390px;
  padding: 0;
  width: 100%;
}

.fo-video-proof--hero:has(.fo-video-card__frame--landscape) {
  max-width: 540px;
}

.fo-video-proof--hero .fo-video-proof__grid {
  display: block;
}

.fo-video-proof--hero .fo-video-card {
  border-block-start: 0;
  padding-block-start: 0;
}

.fo-video-proof--hero .fo-video-card__frame {
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(18, 35, 63, 0.16);
  margin: 0 0 22px;
}

.fo-video-proof--hero .fo-video-card__frame:not(.fo-video-card__frame--landscape) {
  aspect-ratio: 4 / 5;
}

.fo-video-proof--hero .fo-video-card--playing .fo-video-card__video {
  background: #081426;
  object-fit: contain;
}

.fo-video-proof--hero .fo-video-card__body {
  padding-inline: 4px;
}

.fo-video-proof--hero .fo-video-card__title {
  font-size: clamp(27px, 2.4vw, 36px);
}

.fo-video-proof--hero .fo-video-card__body > p:last-child {
  color: var(--fo-text-muted, #56647a);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.fo-video-proof--hero .fo-video-card__summary {
  display: none;
}

.fo-hero-proof {
  align-self: center;
  background: color-mix(in srgb, var(--fo-surface, #fff) 94%, transparent);
  border-block-start: 4px solid var(--fo-accent, #416bfa);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 26px 70px rgba(18, 35, 63, 0.13);
  justify-self: end;
  max-width: 470px;
  padding: clamp(26px, 3vw, 40px);
  width: 100%;
}

.fo-hero-proof blockquote,
.fo-hero-proof figure,
.fo-hero-proof p {
  margin: 0;
}

.fo-hero-proof blockquote p {
  color: var(--fo-navy, #12233f);
  font: 500 clamp(24px, 2.1vw, 34px)/1.14 var(--fo-font-serif, "Source Serif 4", serif);
}

.fo-hero-proof blockquote footer {
  color: var(--fo-text-muted, #56647a);
  display: grid;
  font: 500 14px/1.5 var(--fo-font-sans, "Inter", sans-serif);
  gap: 2px;
  margin-block-start: 22px;
}

.fo-hero-proof--quote > img {
  border-radius: 50%;
  height: 86px;
  margin-block-end: 24px;
  object-fit: cover;
  width: 86px;
}

.fo-hero-proof--expert figure {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: 112px 1fr;
  margin-block-end: 26px;
}

.fo-hero-proof--expert figure img {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  height: auto;
  object-fit: cover;
  width: 112px;
}

.fo-hero-proof--expert figcaption {
  color: var(--fo-navy, #12233f);
  font: 650 17px/1.35 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-hero-proof > a,
.fo-case-study-proof a {
  color: var(--fo-accent, #416bfa);
  display: inline-block;
  font: 700 14px/1.4 var(--fo-font-sans, "Inter", sans-serif);
  margin-block-start: 24px;
  text-decoration: none;
}

.fo-hero-proof > a:hover,
.fo-hero-proof > a:focus-visible,
.fo-case-study-proof a:hover,
.fo-case-study-proof a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.fo-hero-proof__eyebrow {
  color: var(--fo-accent, #416bfa);
  font: 750 12px/1.3 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fo-hero-proof--case-study h2 {
  color: var(--fo-navy, #12233f);
  font: 550 clamp(32px, 3vw, 46px)/1.02 var(--fo-font-serif, "Source Serif 4", serif);
  margin: 16px 0 20px;
}

.fo-hero-proof--case-study > p:not(.fo-hero-proof__eyebrow) {
  color: var(--fo-text-muted, #56647a);
  font: 400 17px/1.65 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-clinical-video-heading {
  margin: 0 auto;
  padding-block: clamp(70px, 9vw, 124px) 30px;
  width: min(100% - 48px, 1120px);
}

.fo-clinical-video-heading h2 {
  color: var(--fo-navy, #12233f);
  font: 500 clamp(38px, 5vw, 68px)/1 var(--fo-font-serif, "Source Serif 4", serif);
  margin: 14px 0 0;
  max-width: 900px;
}

.fo-video-proof--spotlight {
  padding-block: 0 clamp(74px, 9vw, 126px);
  width: min(100% - 48px, 1120px);
}

.fo-video-proof--spotlight .fo-video-proof__grid {
  display: block;
}

.fo-video-proof--spotlight .fo-video-card {
  align-items: center;
  border-block-start: 1px solid var(--fo-proof-line);
  display: grid;
  gap: clamp(30px, 5vw, 74px);
  grid-template-columns: minmax(240px, 340px) 1fr;
  padding-block-start: 26px;
}

.fo-video-proof--spotlight .fo-video-card__frame {
  border-radius: 18px;
  margin: 0;
}

.fo-video-proof--spotlight .fo-video-card__title {
  font-size: clamp(32px, 4vw, 54px);
}

.fo-case-study-proof-grid {
  display: grid;
  gap: clamp(28px, 4vw, 54px);
  grid-template-columns: 1.2fr 0.8fr;
  margin: 0 auto;
  padding-block: clamp(76px, 9vw, 132px) 30px;
  width: min(100% - 48px, 1320px);
}

.fo-case-study-proof {
  border-block-start: 4px solid var(--fo-accent, #416bfa);
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  padding-block-start: 28px;
}

.fo-case-study-proof--portrait {
  grid-template-columns: minmax(160px, 0.55fr) minmax(0, 1.45fr);
}

.fo-case-study-proof--portrait > img {
  border-radius: 18px;
  height: auto;
  width: 100%;
}

.fo-case-study-proof--clinical {
  --fo-accent: #008777;
  align-content: start;
}

.fo-case-study-proof h2 {
  color: var(--fo-navy, #12233f);
  font: 550 clamp(32px, 3.3vw, 50px)/1.02 var(--fo-font-serif, "Source Serif 4", serif);
  margin: 14px 0 20px;
}

.fo-case-study-proof p,
.fo-case-study-proof blockquote {
  color: var(--fo-text-muted, #56647a);
  font: 400 16px/1.65 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0 0 18px;
}

.fo-case-study-proof blockquote {
  color: var(--fo-navy, #12233f);
  font: 500 24px/1.2 var(--fo-font-serif, "Source Serif 4", serif);
}

.fo-case-study-proof .fo-case-study-proof__attribution {
  color: var(--fo-navy, #12233f);
  font-weight: 700;
}

.fo-pro-discover .fo-brand-hero--with-proof > .e-con-inner > :first-child,
.fo-pro-discover .fo-brand-hero--with-proof > .e-con-inner > :nth-child(2) {
  grid-column: 1;
}

.fo-pro-discover .fo-brand-hero--with-proof > .e-con-inner > :first-child {
  align-self: end;
}

.fo-pro-discover .fo-brand-hero--with-proof > .e-con-inner > :nth-child(2) {
  align-self: start;
  max-width: 640px;
  width: 100%;
  --width: 100%;
}

.fo-pro-discover .fo-brand-hero--with-proof > .e-con-inner > :nth-child(2) .elementor-widget-text-editor {
  color: #56647a !important;
  font: 400 clamp(17px, 1.35vw, 20px)/1.58 var(--fo-font-sans, "Inter", sans-serif);
  max-width: 620px;
}

.fo-pro-discover .fo-video-proof--hero .fo-video-card__body > p:last-child {
  color: #56647a !important;
}

.fo-pro-discover .fo-brand-hero--with-proof .fo-video-proof--hero {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Narrative blocks sourced from the post-4pm practice-area roadmap review. */
.fo-roadmap-narrative {
  margin-inline: auto;
  padding-block: clamp(76px, 9vw, 132px) clamp(54px, 7vw, 100px);
  width: min(100% - 48px, 1320px);
}

.fo-roadmap-narrative__intro {
  border-block-end: 1px solid color-mix(in srgb, var(--fo-navy, #12233f) 18%, transparent);
  display: grid;
  gap: 18px clamp(32px, 6vw, 92px);
  grid-template-columns: minmax(220px, 0.72fr) minmax(320px, 1.28fr);
  padding-block-end: clamp(44px, 6vw, 78px);
}

.fo-roadmap-narrative__eyebrow,
.fo-proof-heading__eyebrow {
  color: var(--fo-accent, #416bfa);
  font: 700 12px/1.25 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fo-proof-heading h2.fo-proof-heading__eyebrow {
  font: 700 12px/1.25 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0;
  max-width: none;
}

.fo-home .fo-proof-heading__eyebrow {
  color: var(--fo-brand-dark, #3451db);
}

@media (prefers-reduced-motion: reduce) {
  .fo-person-card img {
    transition: none;
  }

  .fo-person-card a:hover img,
  .fo-person-card a:focus-visible img {
    transform: none;
  }
}

.fo-roadmap-narrative h2 {
  color: var(--fo-navy, #12233f);
  font: 500 clamp(42px, 5.4vw, 76px)/0.98 var(--fo-font-serif, "Source Serif 4", serif);
  grid-column: 2;
  margin: 0;
}

.fo-roadmap-narrative__lead {
  color: var(--fo-text-muted, #56647a);
  font: 400 clamp(18px, 1.8vw, 24px)/1.55 var(--fo-font-sans, "Inter", sans-serif);
  grid-column: 2;
  margin: 0;
}

.fo-roadmap-narrative__section {
  border-block-end: 1px solid color-mix(in srgb, var(--fo-navy, #12233f) 14%, transparent);
  display: grid;
  gap: 28px clamp(42px, 8vw, 140px);
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  padding-block: clamp(38px, 5vw, 68px);
}

.fo-roadmap-narrative__section span {
  color: var(--fo-accent, #416bfa);
  display: block;
  font: 700 12px/1 var(--fo-font-sans, "Inter", sans-serif);
  margin-block-end: 14px;
}

.fo-roadmap-narrative__section h3 {
  color: var(--fo-navy, #12233f);
  font: 500 clamp(28px, 3vw, 43px)/1.08 var(--fo-font-serif, "Source Serif 4", serif);
  margin: 0;
}

.fo-roadmap-narrative__section > p,
.fo-roadmap-narrative__section ol {
  color: var(--fo-text-muted, #56647a);
  font: 400 clamp(17px, 1.45vw, 21px)/1.65 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0;
}

.fo-roadmap-narrative__section ol {
  columns: 2;
  padding-inline-start: 24px;
}

.fo-roadmap-narrative__section li {
  break-inside: avoid;
  margin-block-end: 12px;
  padding-inline-start: 4px;
}

.fo-roadmap-narrative__cta {
  background: var(--fo-accent, #416bfa);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font: 650 15px/1 var(--fo-font-sans, "Inter", sans-serif);
  margin-block-start: 42px;
  padding: 18px 25px;
}

.fo-clinical-roadmap {
  margin-inline: auto;
  padding-block: clamp(72px, 9vw, 132px);
  width: min(100% - 48px, 1320px);
}

.fo-clinical-roadmap__intro {
  display: grid;
  gap: 20px clamp(36px, 7vw, 100px);
  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
  margin-block-end: clamp(38px, 6vw, 72px);
}

.fo-clinical-roadmap__intro h2,
.fo-clinical-roadmap__comparison h2 {
  color: var(--fo-navy, #12233f);
  font: 500 clamp(40px, 5vw, 70px)/1 var(--fo-font-serif, "Source Serif 4", serif);
  margin: 0;
}

.fo-clinical-roadmap__intro h2,
.fo-clinical-roadmap__intro > p:last-child {
  grid-column: 2;
}

.fo-clinical-roadmap__intro > p:last-child {
  color: var(--fo-text-muted, #56647a);
  font: 400 clamp(18px, 1.6vw, 22px)/1.6 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-clinical-roadmap__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fo-clinical-roadmap__benefits article {
  border-block: 1px solid color-mix(in srgb, var(--fo-accent, #008777) 24%, transparent);
  min-width: 0;
  padding: 30px clamp(20px, 3vw, 42px) 38px 0;
}

.fo-clinical-roadmap__benefits article + article {
  border-inline-start: 1px solid color-mix(in srgb, var(--fo-accent, #008777) 24%, transparent);
  padding-inline-start: clamp(20px, 3vw, 42px);
}

.fo-clinical-roadmap__benefits span,
.fo-clinical-roadmap__flow span {
  color: var(--fo-accent, #008777);
}

.fo-clinical-roadmap__benefits h3 {
  color: var(--fo-navy, #12233f);
  font: 500 clamp(27px, 2.7vw, 40px)/1.08 var(--fo-font-serif, "Source Serif 4", serif);
}

.fo-clinical-roadmap__benefits p,
.fo-clinical-roadmap__comparison p {
  color: var(--fo-text-muted, #56647a);
  font: 400 17px/1.6 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-clinical-roadmap__flow {
  align-items: center;
  background: color-mix(in srgb, var(--fo-accent, #008777) 7%, #fff);
  display: grid;
  font: 650 clamp(16px, 1.8vw, 22px)/1.25 var(--fo-font-sans, "Inter", sans-serif);
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  margin-block: clamp(56px, 8vw, 100px);
  padding: 30px;
  text-align: center;
}

.fo-clinical-roadmap__flow > * + *::before {
  content: "→";
  margin-inline-end: 24px;
}

.fo-clinical-roadmap__comparison {
  display: grid;
  gap: 28px;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
}

.fo-clinical-roadmap__comparison article {
  border-block-start: 3px solid var(--fo-accent, #008777);
  padding-block-start: 22px;
}

.fo-clinical-roadmap--compact {
  padding-block-end: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .fo-video-card,
  .fo-video-card__play,
  .fo-video-proof__filter {
    transition: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .fo-video-proof--hero {
    max-width: 340px;
  }

  .fo-video-proof--hero:has(.fo-video-card__frame--landscape) {
    max-width: 480px;
  }
}

@media (max-width: 1024px) {
  .fo-practice-page .fo-brand-hero--with-proof > .e-con-inner {
    grid-template-columns: 1fr;
  }

  .fo-video-proof--hero,
  .fo-video-proof--hero:has(.fo-video-card__frame--landscape),
  .fo-hero-proof {
    justify-self: center;
    max-width: 620px;
  }

  .fo-pro-discover .fo-brand-hero--with-proof > .e-con-inner > :first-child,
  .fo-pro-discover .fo-brand-hero--with-proof > .e-con-inner > :nth-child(2),
  .fo-pro-discover .fo-brand-hero--with-proof .fo-video-proof--hero {
    grid-column: 1;
    grid-row: auto;
  }

  .fo-case-study-proof-grid {
    grid-template-columns: 1fr;
  }

  .fo-video-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fo-video-proof--featured .fo-video-card {
    grid-column: span 6;
  }
}

@media (max-width: 767px) {
  .fo-practice-page .fo-brand-hero--with-proof > .e-con-inner {
    gap: 38px;
  }

  .fo-practice-page .fo-brand-hero--with-proof .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
    font-size: 54px;
    line-height: 0.95;
  }

  .fo-video-proof--hero .fo-video-card__frame,
  .fo-hero-proof,
  .fo-hero-proof--expert figure img {
    border-radius: 14px;
  }

  .fo-hero-proof {
    padding: 24px;
  }

  .fo-video-proof--spotlight,
  .fo-clinical-video-heading,
  .fo-case-study-proof-grid {
    width: min(100% - 32px, 1320px);
  }

  .fo-video-proof--spotlight .fo-video-card,
  .fo-case-study-proof--portrait {
    grid-template-columns: 1fr;
  }

  .fo-case-study-proof--portrait > img {
    max-width: 260px;
  }

  .fo-video-proof {
    width: min(100% - 32px, 1480px);
  }

  .fo-proof-heading {
    width: min(100% - 32px, 1480px);
  }

  .fo-video-proof__intro,
  .fo-video-proof__grid,
  .fo-video-proof--featured .fo-video-proof__grid {
    grid-template-columns: 1fr;
  }

  .fo-video-proof--featured .fo-video-card {
    grid-column: auto;
  }

  .fo-roadmap-narrative {
    width: min(100% - 32px, 1320px);
  }

  .fo-roadmap-narrative__intro,
  .fo-roadmap-narrative__section {
    grid-template-columns: 1fr;
  }

  .fo-roadmap-narrative h2,
  .fo-roadmap-narrative__lead {
    grid-column: auto;
  }

  .fo-roadmap-narrative__section ol {
    columns: 1;
  }

  .fo-clinical-roadmap {
    width: min(100% - 32px, 1320px);
  }

  .fo-clinical-roadmap__intro,
  .fo-clinical-roadmap__benefits,
  .fo-clinical-roadmap__comparison,
  .fo-clinical-roadmap__flow {
    grid-template-columns: 1fr;
  }

  .fo-clinical-roadmap__intro h2,
  .fo-clinical-roadmap__intro > p:last-child {
    grid-column: auto;
  }

  .fo-clinical-roadmap__benefits article + article {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .fo-clinical-roadmap__flow > * + *::before {
    display: block;
    margin: 0 0 16px;
    transform: rotate(90deg);
  }
}

/* ----------------------------------------------------------------- menus */

/*
 * Compact (hamburger) drawer.
 *
 * The captured stylesheet only hides the menu wrapper below 1100px and shows
 * the toggle; Elementor's JavaScript was what turned the horizontal bar into a
 * stacked panel. Without this the open drawer lays its items out in a row and
 * pushes the page sideways.
 */
.e-n-menu.fo-menu-open > .e-n-menu-wrapper {
  /* Fixed to the viewport rather than to `.e-n-menu`, which in compact mode is
   * only as wide as the toggle button. The runtime supplies the offset. */
  position: fixed;
  inset: var(--fo-menu-top, 4rem) 0 auto;
  z-index: 90;
  max-height: calc(100vh - var(--fo-menu-top, 4rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fo-surface, #fff);
  border-top: 1px solid var(--fo-border, #d1d5e4);
  box-shadow: var(--fo-shadow-md, 0 12px 32px rgb(15 23 42 / 12%));
}

/*
 * Drawer label and caret colour.
 *
 * The pairing only breaks here. Each captured template sets its menu title and
 * dropdown-indicator colour to suit its own header: #000000 on light (125),
 * #FFFFFF on dark (386) and brand (406), which is correct on desktop, where the
 * dropdown panel is dark. The compact drawer's white ground is ours — the
 * `background` two rules above — so below 1100px the dark and brand themes put
 * white text on a white panel and the labels and carets disappear. Measured at
 * 1.00:1 contrast on all three compact widths, on 39 of 88 routes.
 *
 * Set the two custom properties rather than `color` and `fill` directly. The
 * captured rules read them —
 *   .e-n-menu-title-text      { color: var(--n-menu-title-color-normal) }
 *   .e-n-menu-dropdown-icon svg { fill: var(--n-menu-dropdown-indicator-color-normal,
 *                                            var(--n-menu-title-color-normal)) }
 * — so one block covers labels and carets, and it survives those rules changing
 * shape. Both are needed: dark and brand set the indicator colour explicitly, so
 * the fallback to the title colour never fires.
 *
 * The toggle icon is deliberately untouched. `--n-menu-toggle-icon-color` is
 * also #FFFFFF on dark and brand, but the toggle sits on the header bar, not on
 * the drawer, so white is right and overriding it would break it.
 *
 * There is an older mechanism doing half of this job, and it cannot be removed.
 * The captured Astra child sheet
 * (src/live/wp-content/themes/astra-child/stylesheet.css, lines 288-301, inside
 * its own `@media (max-width:1100px)`) patches the same bug for exactly two
 * pages, by page id: `.page-id-311` is /media/ and `.page-id-399` is
 * /security/, each forcing #000 with `!important`. It never generalised, so the
 * other 37 dark routes were left broken. It also misses two of the three titles
 * on the pages it does cover, because it matches `.e-n-menu-title a span` and
 * `fixDeadAnchors` turns the two destination-less titles into <button>. That
 * file is captured and not ours to edit, so the block stays. The rules below
 * supersede it. If you find both mechanisms, these are the live ones.
 */
.e-n-menu.fo-menu-open {
  --n-menu-title-color-normal: var(--fo-text) !important;
  --n-menu-dropdown-indicator-color-normal: var(--fo-text) !important;
}

/*
 * The custom properties above cover every route through the captured rules that
 * read them. They cannot reach the two page-id patches, though: those set
 * `color` and `fill` directly, skipping the variables entirely, and redefining a
 * variable does not compete with a declaration that never consults it. Without
 * these three selectors /media/ and /security/ render a two-tone drawer — the
 * <button> titles at var(--fo-text), the remaining <a> title and the carets at
 * the patches' #000.
 *
 * These win on specificity, both sides being `!important`: (0,3,0) and (0,3,1)
 * against the patches' (0,2,2).
 */
.e-n-menu.fo-menu-open .e-n-menu-title-text,
.e-n-menu.fo-menu-open .e-n-menu-dropdown-icon span {
  color: var(--fo-text) !important;
}

.e-n-menu.fo-menu-open .e-n-menu-dropdown-icon svg {
  fill: var(--fo-text) !important;
}

.e-n-menu.fo-menu-open > .e-n-menu-wrapper > .e-n-menu-heading {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
}

/* The item is a flex row on desktop, where the panel is positioned out of flow
 * and never participates. In the drawer the panel IS in flow, so without this
 * it becomes a second column beside its own label. */
.e-n-menu.fo-menu-open .e-n-menu-item {
  width: 100%;
  flex-direction: column;
}

/* The panel's own columns are a desktop row; stack them in the drawer. */
.elementor-widget-n-menu .e-n-menu.fo-menu-open .e-n-menu-content .e-con-inner {
  flex-direction: column;
  flex-wrap: nowrap;
}

.elementor-widget-n-menu .e-n-menu.fo-menu-open .e-n-menu-content .e-con-inner > .e-con {
  --width: 100%;

  width: 100%;
}

.e-n-menu.fo-menu-open .e-n-menu-title {
  justify-content: space-between;
  width: 100%;
}

/* Dropdown panels are authored at desktop width; inside the drawer they have
 * to fold back into the column.
 *
 * The wrapper needs it as much as the panel. Elementor positions
 * `.e-n-menu-content` absolutely and drops it below the bar with `top: 100%`,
 * which in a drawer either covers the menu list (top: 0) or lands past the end
 * of it. Static puts the submenu back in normal flow, directly under the item
 * it belongs to, inside the drawer's own scroll area. The selector carries the
 * widget class so it outweighs the captured rule it overrides. */
.elementor-widget-n-menu .e-n-menu.fo-menu-open .e-n-menu-content {
  position: static;
  width: 100%;
}

.e-n-menu.fo-menu-open .e-n-menu-content > .e-con.e-active {
  position: static;
  width: 100%;
  max-width: 100%;
}

/* Subtle entrance/exit for the mega-menu panels. The captured CSS shows a
 * panel with display, which cannot transition, so appearing is a keyframe on
 * .e-active and disappearing plays on .fo-menu-closing while site.js briefly
 * holds .e-active in place (see setOpen). Movement is deliberately used
 * without an opacity fade so the navy panel never flashes transparent over
 * the page beneath it. Wrapped in a motion query so reduced-motion users get
 * the old instant toggle. */
@media (prefers-reduced-motion: no-preference) {
  /* `!important` because every captured page carries the old site's blanket
   * `.elementor * { animation: none !important }`; with both important, the
   * more specific selector here wins. */
  .e-n-menu:not(.fo-menu-open) .e-n-menu-content > .e-con.e-active {
    animation: fo-menu-in 180ms ease !important;
  }

  .e-n-menu:not(.fo-menu-open) .e-n-menu-content > .e-con.e-active.fo-menu-closing {
    animation: fo-menu-out 140ms ease forwards !important;
  }
}

@keyframes fo-menu-in {
  from {
    translate: 0 -8px;
  }
}

@keyframes fo-menu-out {
  to {
    translate: 0 -8px;
  }
}

.e-n-menu-dropdown-icon {
  background: none;
  border: 0;
  cursor: pointer;
}

/* The captured markup rotates the caret through a class the old JS toggled. */
.e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-opened {
  transform: rotate(180deg);
}

.e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-opened {
  transition: transform 200ms ease;
}

/* ------------------------------------------------------------- carousels */

.fo-carousel-ready {
  overflow: hidden;
}

.fo-carousel-ready > .swiper-wrapper {
  display: flex;
  will-change: transform;
}

.fo-carousel-ready > .swiper-wrapper > .swiper-slide {
  flex: 0 0 100%;
  width: 100%;
}

/* Before the runtime boots (or without JS) the slides simply stack, so every
 * testimonial stays readable rather than collapsing to a zero-height strip. */
.e-n-carousel:not(.fo-carousel-ready) > .swiper-wrapper {
  display: block;
}

.swiper-pagination-bullet {
  border: 0;
  cursor: pointer;
}

/* Controls we add when the capture shipped a carousel without any. */
.fo-carousel-control {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgb(255 255 255 / 90%);
  box-shadow: var(--fo-shadow-sm, 0 1px 3px rgb(15 23 42 / 8%));
}

.fo-carousel-control::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 2px solid var(--fo-text, #1a1f36);
  border-right: 2px solid var(--fo-text, #1a1f36);
}

.fo-carousel-prev {
  left: 0.75rem;
}

.fo-carousel-prev::before {
  translate: -30% -50%;
  rotate: 225deg;
}

.fo-carousel-next {
  right: 0.75rem;
}

.fo-carousel-next::before {
  translate: -70% -50%;
  rotate: 45deg;
}

/* The capture shipped its own arrow chrome on some carousels
 * (.elementor-swiper-button); it never worked without Swiper, and next to
 * our injected pair it read as duplicate arrows. One pair, ours.
 * `!important` because e-swiper.min.css re-displays these through vendor
 * selectors we cannot edit. */
.fo-carousel-ready .elementor-swiper-button {
  display: none !important;
}

/* The captured sheets place .swiper-pagination absolutely — shrink-to-fit
 * and, on the nested-carousel widget, re-centred with a translate() that
 * assumes that shrunk width. Applied to our full-width in-flow row that
 * translate shoves the dots half a container off centre, so the transform
 * is neutralised along with the positioning. The three-class selector
 * out-specifies the vendor rules, which load after site.css. */
.fo-carousel-ready > .swiper-pagination.fo-carousel-dots {
  position: static;
  width: 100%;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding-block: 1rem;
  transform: none;
}

/* .e-n-carousel is itself a flex row; once the dots are in flow they would
 * share that row with the wrapper and squeeze it narrower than its slides.
 * Wrapping puts them on their own line under the slides instead. */
.e-n-carousel.fo-carousel-ready {
  flex-wrap: wrap;
}

.e-n-carousel.fo-carousel-ready > .swiper-wrapper {
  flex: 0 0 100%;
}

.fo-carousel-dots .swiper-pagination-bullet {
  width: 0.6rem;
  height: 0.6rem;
  margin: 0; /* the captured sheet adds 4px side margins on top of our gap */
  border-radius: 50%;
  background: var(--fo-border, #d1d5e4);
  opacity: 1;
}

.fo-carousel-dots .swiper-pagination-bullet-active {
  background: var(--fo-brand, #4a6cf7);
}

.fo-carousel-ready {
  position: relative;
}

/* /testimonials/ video carousel: post-272.css caps the widget at 1100px,
 * which squeezes the video pane until the poster reads as cropped. Let it
 * take the width the reference layout used, centred, without touching the
 * captured sheet. */
.elementor-272 .elementor-element-cbcdea0.elementor-widget-n-carousel {
  width: min(1360px, calc(100vw - 3rem));
  max-width: min(1360px, calc(100vw - 3rem));
  --container-widget-width: min(1360px, calc(100vw - 3rem));
  margin-inline: auto;
}

/* The blue slide cards ship with zero container padding, leaving their
 * columns flush against the rounded top and bottom edges. Padding on the
 * container grows the card around the columns — nothing inside shrinks. The
 * extra .e-con class outweighs post-272.css, which loads after this sheet. */
.elementor-272 .e-con.elementor-element.elementor-element-8725468,
.elementor-272 .e-con.elementor-element.elementor-element-a159be5,
.elementor-272 .e-con.elementor-element.elementor-element-b406aa5 {
  --padding-top: clamp(24px, 3vw, 44px);
  --padding-bottom: clamp(24px, 3vw, 44px);
  /* The video pane is shorter than the text column and was top-anchored,
   * which piled all of the new breathing room under it. Centring the row
   * splits it evenly. */
  --align-items: center;
}

/* --------------------------------------------------------- video facades */

.fo-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--fo-navy-dark, #1e2a6e) center / cover no-repeat;
  border-radius: var(--fo-radius-md, 12px);
}

.fo-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fo-video::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 4.5rem;
  height: 3.2rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(transparent, transparent) padding-box,
    rgb(0 0 0 / 62%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: background-color 180ms ease;
}

.fo-video::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -35% -50%;
  z-index: 1;
  border-style: solid;
  border-width: 0.75rem 0 0.75rem 1.25rem;
  border-color: transparent transparent transparent #fff;
}

.fo-video:hover::after,
.fo-video:focus-visible::after {
  background-color: var(--fo-brand, #4a6cf7);
}

.fo-video-playing::before,
.fo-video-playing::after {
  content: none;
}

.fo-video-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------- post cards */

/*
 * Post-card thumbnails: drop the ratio well Elementor's JS used to fill.
 *
 * The posts widget ships a padding-bottom aspect-ratio box on
 * `.elementor-post__thumbnail` (`calc( 0.8 * 100% )` on /media/ and the article
 * "more insights" strip, `0.66` elsewhere). That box only works together with
 * `elementor-has-item-ratio`, a class Elementor's widget handler added to
 * `.elementor-posts-container` at runtime and which the sibling rules key off
 * to take the image out of flow:
 *
 *   .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img
 *     { position: absolute; ... }
 *
 * With the handler gone the class is never added, so the image stays in normal
 * flow and its height *adds* to the ratio padding: a 1200x630 card image renders
 * 225px tall inside a 568px box, leaving ~340px of empty card under every
 * thumbnail.
 *
 * Restoring the class instead would crop every card image to 0.8 — wrong for
 * the 1.9:1 blog graphics. The ratio is meaningless without the handler, so
 * remove it and let the box be exactly as tall as the image it holds.
 *
 * The per-page rules are (0,5,0) — `.elementor-element.elementor-element-<id>`
 * is two classes on one compound — so this is written to (0,6,0) and wins on
 * specificity rather than on load order. It covers all four widgets that carry
 * a ratio: /media/ (0.8), the article "more insights" strip (0.8), and the two
 * classic-skin strips (0.66); `.elementor-post__card` is deliberately not in
 * the chain because two of those four use the classic skin, which has no card.
 * The `:not()` keeps this inert if the ratio class is ever reintroduced.
 */
.elementor-widget-posts
  .elementor-posts-container.elementor-posts.elementor-grid:not(.elementor-has-item-ratio)
  .elementor-post__thumbnail {
  padding-bottom: 0;
}

/* ---------------------------------------------------------------- sticky */

/* Elementor's setting was `sticky_on: [desktop, tablet, mobile]`, so this
 * carries no breakpoint of its own — the header pins at every width. */
[data-fo-sticky] {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* On selected top-level pages, the unscrolled header is part of the opening
 * composition: the hero artwork extends behind it, while the header's captured
 * inner surface becomes transparent. Once the existing sticky state activates,
 * an opaque white surface restores separation from the content moving beneath.
 */
.fo-brand-hero-page [data-fo-sticky][data-fo-sticky] > .e-con.e-con {
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fo-brand-hero-page [data-fo-sticky][data-fo-sticky]:not(.fo-stuck) > .e-con.e-con {
  background-color: transparent;
}

.fo-brand-hero-page [data-fo-sticky][data-fo-sticky].fo-stuck > .e-con.e-con {
  background-color: #fff;
}

[data-fo-sticky].fo-stuck {
  box-shadow: var(--fo-shadow-sm, 0 1px 3px rgb(15 23 42 / 8%));
  backdrop-filter: saturate(140%) blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .fo-brand-hero-page [data-fo-sticky][data-fo-sticky] > .e-con.e-con {
    transition: none;
  }
}

/* A pinned header would otherwise cover whatever an in-page anchor lands on
 * (the skip link, the tab deep links). The runtime measures the header and
 * publishes the height; the fallback keeps the behaviour without JavaScript. */
html {
  scroll-padding-top: var(--fo-sticky-height, 5rem);
}

/* --------------------------------------------------------- accessibility */

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fo-brand, #4a6cf7);
  outline-offset: 2px;
}

/* The required Elective Medicine/Legal and referral choices on the HubSpot forms
 * were unreachable by keyboard and absent from the accessibility tree — a
 * WCAG 2.1.1 / 4.1.2 failure on the one action the site exists to produce.
 *
 * HubSpot renders the radios; it does not hide them. Its own sheet sets only
 * `appearance: none; position: relative; margin: 0`, the ordinary custom-radio
 * setup. The hiding is ours: `wp-custom-css` carries
 *
 *   .hsfc-RadioFieldGroup__Options input[type="radio"] {
 *     opacity: 0; visibility: hidden; position: absolute; }
 *
 * byte-identical in all 89 captured pages. `visibility: hidden` is the half
 * that does the damage — it drops the input out of the accessibility tree and
 * makes it unfocusable. `opacity: 0` alone would have been survivable.
 *
 * Overridden here rather than edited in the pages: this sheet loads after
 * `wp-custom-css`, so an identical-specificity selector wins on cascade order
 * with no `!important`, and one block covers the eight routes that render a
 * form plus the 81 dormant copies waiting for the next embed. Both hiding
 * declarations must be named explicitly — the original rule still applies, so
 * omitting either would let it through.
 *
 * The visible control is an unclassed `<span>` that follows the input inside
 * `.hsfc-FieldLabel`, which is why the ring is drawn with `~ span` — the same
 * combinator the capture's own `input:checked ~ span` uses to fill the pill.
 * `:focus-visible` keeps it to keyboard focus, so mouse and touch render
 * exactly as before. 2px at 2px offset in `--fo-brand` matches the rule above;
 * it measures 4.39:1 on the unselected pill, 3.77:1 on the selected navy and
 * 3.05:1 on the group border, all clear of the 3.0:1 that WCAG 1.4.11 asks. */
.hsfc-RadioFieldGroup__Options input[type="radio"] {
  position: absolute;
  visibility: visible;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 1;
}

.hsfc-FieldLabel input[type="radio"]:focus-visible ~ span {
  outline: 2px solid var(--fo-brand, #4a6cf7);
  outline-offset: 2px;
}

/* The capture ships decorative anchors with no destination; the build turns
 * them into buttons, which must not inherit link underlines.
 *
 * padding and margin matter as much as the rest: Elementor styles this class
 * for display/gap/typography but never sets either, so a button falls back to
 * the UA's `1px 6px` and pushes the dropdown chevron away from its label. */
button.e-n-menu-title-container {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

/* --------------------------------------------------- homepage testimonials */

/*
 * The homepage testimonials are two static cards, not a carousel.
 *
 * Elementor built them as an `n-carousel` whose slide sizing was done at
 * runtime by Swiper's JavaScript — removed with the rest of the WordPress
 * runtime. The captured CSS still records the intent on the widget
 * (`--e-n-carousel-swiper-slides-to-display: 2`, dropping to 1 at 1100px and
 * again at 767px, with a 10px gap), but the only rule that consumes it targets
 * `.swiper--slide`, a class this markup never used — so nothing sized the
 * slides. The shared runtime then treated it as a generic carousel and pinned
 * every slide to `flex: 0 0 100%`, leaving one full-width testimonial with
 * injected arrows and dots.
 *
 * The markup no longer carries the swiper classes, so the runtime skips it and
 * these rules lay the two cards out directly. The widths and breakpoints are
 * not authored here: they are read back from the captured custom properties
 * above, using Elementor's own formula, so the section keeps the site's
 * responsive behaviour without introducing a value or a breakpoint of its own.
 */
.fo-testimonials-track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-n-carousel-swiper-slides-gap, 10px);
  align-items: stretch;
}

.fo-testimonial {
  --fo-testimonial-gaps: calc(var(--e-n-carousel-swiper-slides-to-display, 1) - 1);

  flex: 1 1 calc(
    (100% - var(--e-n-carousel-swiper-slides-gap, 10px) * var(--fo-testimonial-gaps))
    / var(--e-n-carousel-swiper-slides-to-display, 1)
  );
  min-width: 0;
}


/* ------------------------------------------------- new-page components */

/*
 * These three rules serve /family-law/, the first page built from
 * captured components rather than captured from WordPress. Markup we add has
 * no per-element Elementor CSS behind it, so it is styled here rather than by
 * inventing an `elementor-element-*` class.
 */

/*
 * FAQ accordion.
 *
 * The accordion's structure comes from Elementor's own
 * `widget-nested-accordion.min.css` (5 KB, shared, generic) — everything below
 * is the *theme* layer that `post-306.css` supplies on
 * /frequently-asked-questions/. Reproducing the dozen custom properties here
 * instead of shipping that 65 KB page stylesheet keeps the page light while
 * rendering identically; the two must be compared side by side after any change.
 *
 * The literal colours and sizes are deliberate: they are the captured values,
 * and the acceptance test is pixel agreement with the existing FAQ page. Only
 * the tokens that match it exactly are referenced symbolically.
 */
.fo-faq {
  --n-accordion-title-font-size: 25px;
  --n-accordion-title-justify-content: space-between;
  --n-accordion-title-flex-grow: 1;
  --n-accordion-title-icon-order: initial;
  --n-accordion-item-title-space-between: 12px;
  --n-accordion-item-title-distance-from-content: 0px;
  --n-accordion-border-radius: 10px 10px 10px 10px;
  --n-accordion-icon-size: 15px;
  --n-accordion-icon-normal-color: #4e5df9;
  --n-accordion-icon-hover-color: #4e5df9;
  --n-accordion-icon-active-color: #4e5df9;
  --n-accordion-padding: 20px 15px 20px 15px;
}

.fo-faq > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title {
  background-color: var(--fo-surface, #fff);
  border-style: none;
}

:where(.fo-faq > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header) > .e-n-accordion-item-title-text {
  font-family: var(--fo-font-display, "Yrsa", Georgia, serif);
  font-weight: 300;
}

/* The answer panel. `margin-top: -15px` closes the gap the title's own bottom
 * padding leaves behind — same value the captured page uses. */
.fo-faq > .e-n-accordion > .e-n-accordion-item > .e-con {
  --display: flex;
  --border-radius: 10px 10px 10px 10px;
  --padding-top: 20px;
  --padding-bottom: 15px;
  --padding-left: 15px;
  --padding-right: 15px;
  --margin-top: -15px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-right: 0px;

  background-color: var(--fo-surface, #fff);
  border-style: none;
  --border-style: none;
}

.fo-faq > .e-n-accordion > .e-n-accordion-item > .e-con .elementor-widget-text-editor {
  font-family: var(--fo-font-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 400;
  color: #727277;
}

/* The hero heading is the /family-playbooks/ one, which carries
 * `text-transform: capitalize` — harmless on the two words "Family Law", but it
 * would retitle this page's headline word by word ("Room For Real Strategy").
 * Specificity has to match the captured rule exactly to win on source order. */
.elementor-160 .elementor-element.fo-hero-title .elementor-heading-title {
  text-transform: none;
}

/* Six-stage grid.
 *
 * The cards come from /family-playbooks/, but the grid container is now the
 * one /meet-saxon/ uses for its own 3-up card grid (post-12 `b74c198`), which
 * already authors `--flex-wrap:wrap` and a 20px gap. That matters: post-160's
 * grid authors a 30px column gap, and at --width:32% three cards plus two 30px
 * gaps came to 1365px inside a 1360px content box — five pixels over, so the
 * third card wrapped and the row rendered 2-up with dead space on the right.
 * Only the card width is set here; the container supplies the rest. */
@media (min-width: 768px) {
  .fo-stage-grid > .e-con {
    --width: 32%;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .fo-stage-grid > .e-con {
    --width: 48%;
  }
}

/* Feature spotlight rows — centre the text column against the image.
 *
 * post-12 already centres a spotlight column vertically: the three image
 * columns (`731a8be`, `7e2c205`, `e2a7b15`) each author
 * `--justify-content:center`. The text columns author nothing, because on
 * /meet-saxon/ they carry six or seven widgets — eyebrow, heading, two
 * paragraphs, a bulleted list and a button — and fill the row exactly, so
 * there is no free space to distribute.
 *
 * This page's spotlights are three widgets each, so the stretched column left
 * 323px, 238px and 369px of dead space below the copy. Applying the same
 * declaration the model already uses on the opposite column centres it. It is
 * inert once the row stacks below 768px, where the column height collapses to
 * its content and there is no free space to centre within. */
.fo-spotlight-text {
  --justify-content: center;
}

/* Pillar cards — make the three read as a set.
 *
 * post-12 hand-tunes each of the three heading slots for the copy /meet-saxon/
 * happens to have: slots 1 and 2 get `margin-top:80px; line-height:55px` for a
 * one-line heading, slot 3 gets `50px/44px` because its heading wraps to two.
 * This page's copy is the other way round — two-line, two-line, one-line — so
 * that compensation lands on the wrong card and pushes card 3's heading, body
 * and divider ~100px above the others.
 *
 * Normalising to the 80px/55px pair the other two already use gives all three
 * headings the same start; the min-height of two lines gives the body copy the
 * same start; and `margin-top:auto` pins the dividers to the bottom of cards
 * that are already equal height, so uneven body lengths cannot unalign them.
 * No new values are introduced — each is one post-12 already authors. */
.elementor-12 .fo-pillars .elementor-element.elementor-widget-heading {
  margin-top: 80px;
  min-height: 110px;
}

.elementor-12 .fo-pillars .elementor-element.elementor-widget-heading .elementor-heading-title {
  line-height: 55px;
}

.fo-pillars > .e-con > .elementor-widget-image:last-child {
  margin-top: auto;
}

/* Hero lifecycle strip — the six case stages.
 *
 * Uses Elementor's inline icon-list (`elementor-inline-items`), the pattern
 * already used on 40 pages in this repo: it is flex + wrap, so the strip
 * reflows within the text column and stacks on narrow screens without needing
 * a breakpoint of its own. Type and size are inherited from the icon-list
 * widget so this adds no new type values. */
.fo-lifecycle {
  --e-icon-list-icon-size: 10px;
}

.fo-lifecycle .elementor-icon-list-item {
  margin-block: 4px;
}

.fo-lifecycle .elementor-icon-list-icon svg {
  fill: var(--fo-brand, #4a6cf7);
}

.fo-lifecycle .elementor-icon-list-text {
  color: var(--fo-text-secondary, #4a5568);
}

/* -------------------------------------- practice-area page treatment */

/*
 * Client-requested deviation from the inherited Elementor scale, shared by the
 * practice-area pages and by nothing else: everything below is scoped to
 * `.fo-practice-page`, a class each of those pages carries on its Elementor
 * root alongside its own `.fo-<page>` hook — /family-law/ and
 * /medical-malpractice/ today. That scope also fences off the
 * `.elementor-160` block those pages borrow from /family-playbooks/, which
 * must keep its own type on its own page.
 *
 * site.css is the last stylesheet in <head>, so a selector that merely matches
 * a captured rule's specificity already wins on source order — the same
 * convention the rules above rely on. Where a captured rule sizes
 * `.elementor-heading-title` at (0,4,0), the rules below add the element type
 * (`h2`/`h3`) to clear it outright, because they also have to beat the
 * per-breakpoint copies of that rule.
 */

/* Hero — one centred column.
 *
 * The media column is gone, so post-12's `--width:50%` would leave the copy in
 * a half-width column with dead space beside it. At full width it is the only
 * child of the row container and the hero reads as a single block.
 *
 * The centring is the homepage's (post-184) mechanism unchanged: `--align-self`
 * on each widget, `text-align` for the inline content, and Elementor's own
 * `elementor-align-center` on the button and the inline icon-list. The homepage
 * also caps its centred copy (900px on the headline, 600px on the subhead) so a
 * centred paragraph does not run the full container width; this subhead is much
 * longer than the homepage's one-liner, so it takes the wider of the two. */
.fo-practice-page .elementor-element.fo-hero-copy {
  --width: 100%;
}

.fo-practice-page .fo-hero-copy > .elementor-element {
  --align-self: center;
  text-align: center;
}

.fo-practice-page .fo-hero-copy > .elementor-element.elementor-widget-icon-list {
  max-width: 900px;
}

/* Eyebrows — a bordered label, not a second heading.
 *
 * All six sit at 30px in the capture, close enough to a section title to
 * compete with it. They drop to 20px and gain a pill outline so they read as a
 * tag: still 6:1 against the hero h1 and 2.9:1 against a section title, but
 * large enough to read as a label rather than fine print. Two widget types are
 * involved — five heading widgets whose title is a `<span>`, and one
 * text-editor whose content is a `<p>` — so both get `display:inline-block`,
 * which is what makes the border hug the text instead of spanning the column. */
.fo-practice-page .fo-eyebrow.elementor-element .elementor-heading-title,
.fo-practice-page .fo-eyebrow.elementor-element p {
  display: inline-block;
  margin: 0;
  padding: 6px 18px;
  border: 1px solid var(--fo-border, #d1d5e4);
  /* A radius larger than the box is the standard pill; no token covers it. */
  border-radius: 999px;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.02em;
}

/* The hero eyebrow and the h1 read as one stack at the container's own 16px
 * flex row-gap, which is all that separates them: Elementor zeroes widget
 * margins inside a container (`.e-con .elementor-widget:not(:last-child)` sets
 * `--kit-widget-spacing:0px`), so a margin here adds cleanly on top of the gap
 * and moves only this one boundary. h1 -> subhead -> strip -> button keep the
 * 16px they already had. */
.fo-practice-page .fo-hero-copy > .elementor-element.fo-eyebrow {
  margin-block-end: 32px;
}

/* The hero CTA needs the same breathing room the eyebrow gets above the h1.
 * Elementor zeroes widget margins inside a container, so the button sat on the
 * container's own 16px flex row-gap — the same gap that separates the h1 from
 * the subhead, which reads as no separation at all before a call to action.
 * The value is the eyebrow's own, mirrored: 32px here, 20px at the mobile step,
 * so the hero opens and closes on the same interval. */
.fo-practice-page .fo-hero-copy > .elementor-element.elementor-widget-button {
  margin-block-start: 32px;
}

/* A section eyebrow sitting directly on its title.
 *
 * The spotlight eyebrows clear their heading by the 16px row-gap of the
 * container they share. The Verification block is post-12's `bed9518`, which
 * authors `--gap: 0px`, so its eyebrow and title touch at 0px. Restoring the
 * same 16px on the title's leading edge leaves the eyebrow pill untouched and
 * matches the interval the other eyebrows already sit at. The adjacent-sibling
 * selector matches only this pair: it is the one eyebrow on either page whose
 * next element is a `.fo-section-title`. */
.fo-practice-page .fo-eyebrow.elementor-element + .fo-section-title.elementor-element {
  margin-block-start: 16px;
}

/* Hero h1 desktop leading — a deliberate divergence from post-12.css.
 *
 * post-12 gives the h1 120px/89px (0.742). That sheet is shared with
 * /meet-saxon/, so the value is overridden here, page-scoped, rather than
 * edited at source: 136px on 120px is 1.133, and /meet-saxon/ keeps 0.742.
 *
 * `min-width:1101px` is what keeps this to desktop. At (0,5,1) an unguarded
 * base rule would outrank post-12's own (0,4,0) 767px step — which sets
 * font-size but would lose its line-height — and put 58px mobile type on a
 * 104px line. The three bands are now exactly complementary: >=1101px here,
 * 768-1100px below, <=767px still post-12's own. */
@media (min-width: 1101px) {
  .fo-practice-page .fo-hero-copy .elementor-element.elementor-widget-heading h1.elementor-heading-title {
    line-height: 0.92;
  }
}

/* The h1 steps down at 767px but nowhere above it, so from 768px to 1100px it
 * held its full 120px inside a container capped at 1024px and wrapped past its
 * hard breaks into four and five lines. 75px is the step the comparable
 * heroes all use — post-7, post-203, post-212, post-399 and post-160 each land
 * on it from a different desktop size.
 *
 * Those pages need no line-height here because theirs is `0.8em`, which
 * rescales itself. This one is an absolute 89px, so leaving it would put 75px
 * type on an 89px line (1.19) — looser than anything on the site. 56px holds
 * the 0.742 the page inherits from post-12.css, shared with /meet-saxon/.
 *
 * `min-width` is load-bearing. Bare `max-width:1100px` would match at 390px
 * too, and at (0,5,1) it would outrank post-12's own (0,4,0) 767px rule and
 * silently replace the mobile step instead of adding to it. */
@media (max-width: 1100px) and (min-width: 768px) {
  .fo-practice-page .fo-hero-copy .elementor-element.elementor-widget-heading h1.elementor-heading-title {
    font-size: 75px;
    line-height: 56px;
  }
}

/* Hero headline — two lines from 768px up, three below it.
 *
 * The h1 is authored with two hard breaks. "Full Coverage of the File." wants to
 * be one line, and it fits everywhere the type is large: measured against the
 * self-hosted Yrsa Light it is 1161px inside a 1400px content box at 1920 and
 * 1600, 1161px inside 1331px at 1366, and 725px inside 1024px across the tablet
 * band. So the first break is suppressed and the headline reads as two lines.
 *
 * Below 768px it cannot: the h1 is 58px in a ~370px box, where that line
 * measures 561px and must wrap however it is authored. Left to soft-wrap it
 * splits as "Full Coverage of / the File."; keeping the authored break there
 * splits it as "Full Coverage / of the File." — the same three-segment stack the
 * page renders today. Hence a break that is present in the markup and hidden
 * above the breakpoint, rather than deleted outright. */
@media (min-width: 768px) {
  .fo-practice-page .fo-hero-copy .fo-hero-break-sm {
    display: none;
  }
}

/* Body copy — 16px and 18px both go to 18px on a 28px line. */
.fo-practice-page .elementor-element.elementor-widget-text-editor {
  font-size: 18px;
  line-height: 28px;
}

/* The hero subhead keeps a step on the rest of the body copy, as it did at
 * 20px. It is matched after the rule above, so it needs the extra class. */
.fo-practice-page .fo-hero-copy > .elementor-element.elementor-widget-text-editor {
  max-width: 900px;
  font-size: 22px;
  line-height: 32px;
}

/* The FAQ answers are sized by this file's own `.fo-faq` block at (0,5,0), so
 * carrying the new body size into the accordion takes a longer selector. */
.fo-practice-page .fo-faq > .e-n-accordion > .e-n-accordion-item > .e-con .elementor-element.elementor-widget-text-editor {
  font-size: 18px;
  line-height: 28px;
}

/* Section titles — "Why Family Law Attorneys Choose FasterOutcomes",
 * "Verify Everything, Trust What Holds Up", "Questions and Answers". */
.fo-practice-page .fo-section-title.elementor-element h2.elementor-heading-title {
  font-size: 58px;
}

/* "Six Stages, One Case File." — the only h2 in the borrowed post-160 block,
 * and the one section title the capture left at the kit's own 55px. */
.fo-practice-page .elementor-160 .elementor-element.elementor-widget-heading h2.elementor-heading-title {
  font-size: 48px;
}

/* The three feature spotlights. */
.fo-practice-page .fo-spotlight-text .elementor-element.elementor-widget-heading h2.elementor-heading-title {
  font-size: 50px;
  line-height: 48px;
}

/* The closing CTA, the largest heading on the page after the h1. */
.fo-practice-page .fo-cta-title.elementor-element h2.elementor-heading-title {
  font-size: 76px;
  line-height: 66px;
}

/* Pillar card headings.
 *
 * Only the type changes here. The `margin-top:80px` and `min-height:110px` that
 * align the three cards stay exactly as they are: at a 44px line the two-line
 * headings measure 88px, still under the 110px floor, so all three headings and
 * all three bodies keep the same start. */
.fo-practice-page .fo-pillars .elementor-element.elementor-widget-heading h3.elementor-heading-title {
  font-size: 36px;
  line-height: 44px;
}

/* Stage card headings. */
.fo-practice-page .fo-stage-grid .elementor-element.elementor-widget-heading h3.elementor-heading-title {
  font-size: 38px;
  line-height: 42px;
}

/* The capture steps this page's type at 1100px and 767px. Every override above
 * has to be restated at both, or a base-level rule from this file would beat
 * the captured breakpoint rule it replaced and freeze the desktop size. */
@media (max-width: 1100px) {
  .fo-practice-page .fo-section-title.elementor-element h2.elementor-heading-title {
    font-size: 52px;
    line-height: 48px;
  }

  .fo-practice-page .fo-spotlight-text .elementor-element.elementor-widget-heading h2.elementor-heading-title {
    font-size: 42px;
    line-height: 40px;
  }

  .fo-practice-page .fo-cta-title.elementor-element h2.elementor-heading-title {
    font-size: 54px;
    line-height: 48px;
  }

  .fo-practice-page .fo-pillars .elementor-element.elementor-widget-heading h3.elementor-heading-title {
    font-size: 30px;
    line-height: 34px;
  }
}

@media (max-width: 767px) {
  /* 48px of separation is generous under a 58px h1; 36px keeps the proportion. */
  .fo-practice-page .fo-hero-copy > .elementor-element.fo-eyebrow {
    margin-block-end: 20px;
  }

  .fo-practice-page .fo-hero-copy > .elementor-element.elementor-widget-button {
    margin-block-start: 20px;
  }

  .fo-practice-page .fo-hero-copy > .elementor-element.elementor-widget-text-editor {
    font-size: 17px;
    line-height: 26px;
  }

  .fo-practice-page .fo-section-title.elementor-element h2.elementor-heading-title {
    font-size: 42px;
    line-height: 40px;
  }

  .fo-practice-page .elementor-160 .elementor-element.elementor-widget-heading h2.elementor-heading-title {
    font-size: 30px;
  }

  .fo-practice-page .fo-spotlight-text .elementor-element.elementor-widget-heading h2.elementor-heading-title {
    font-size: 36px;
    line-height: 34px;
  }

  .fo-practice-page .fo-cta-title.elementor-element h2.elementor-heading-title {
    font-size: 40px;
    line-height: 38px;
  }

  .fo-practice-page .fo-stage-grid .elementor-element.elementor-widget-heading h3.elementor-heading-title {
    font-size: 28px;
    line-height: 32px;
  }

  /* The source cards carry desktop alignment floors that become large empty
   * blocks once every card stacks. Let their content determine height on
   * phones and keep a compact, consistent inner rhythm. */
  .fo-practice-page .fo-pillars > .e-con,
  .fo-practice-page .fo-stage-grid > .e-con {
    --min-height: 0;
    --padding-top: 28px;
    --padding-bottom: 28px;
    min-height: 0;
  }

  .fo-practice-page .fo-pillars .elementor-element.elementor-widget-heading {
    min-height: 0;
    margin-top: 28px;
  }

  /* Login is a secondary action on phones. A white treatment reduces the
   * two-button visual wall and clears AA contrast at the inherited 15px type. */
  .elementor-125 .fo-header-mobile-login.fo-header-mobile-login {
    background-color: #fff !important;
    border: 1px solid #d8deea;
  }

  .elementor-125 .fo-header-mobile-login .elementor-heading-title {
    color: #0e2046 !important;
  }

  /* The source background token for the companion CTA is not present on
   * every new static route. Pin the shared mobile action to brand blue with a
   * white label so it never becomes white-on-white. */
  .elementor-125 .fo-header-mobile-demo.fo-header-mobile-demo {
    background-color: #3156d8 !important;
  }

  .elementor-125 .fo-header-mobile-demo .elementor-heading-title {
    color: #fff !important;
  }

  /* Up-right arrows conventionally mean "opens elsewhere". These destinations
   * are internal, so the compact drawer uses a simple disclosure chevron. */
  .end-arrow .elementor-icon-list-icon {
    display: none;
  }

  .end-arrow a::after {
    content: "\203A";
    margin-inline-start: auto;
    font-size: 22px;
    line-height: 1;
  }
}

/* ------------------------------------------- /family-law/ hero strip */

/*
 * The hero lifecycle strip wraps 5 + 1, which leaves "Resolution & Hearing"
 * alone on a second line. The strip is an inline icon-list, so where it breaks
 * is decided by the width it is given and nothing else — the shared rule caps
 * it at 900px, and these six labels fit five across inside that.
 *
 * Measured against the self-hosted Inter at this size, with the 8px each side
 * that `.elementor-inline-items` puts on every item: the first four items
 * occupy 721px and the first five 884px, and the `ul` runs 16px wider than the
 * strip (`margin-inline: -8px`). So any cap from 705px to 867px breaks after
 * the fourth item. 800px sits near the middle of that window — 95px of slack
 * before four stop fitting, 68px before five start — so a font-metric shift
 * cannot flip the split either way.
 *
 * Scoped to this page: /medical-malpractice/ has its own six labels, they
 * measure 845px, and they already sit on one line. Capping the shared rule
 * would re-wrap that page too.
 *
 * Desktop only in effect, without a breakpoint of its own: from 768px down the
 * container is already narrower than this cap (728px at 768, 350px at 390), so
 * the rule never applies there and those layouts are untouched.
 */
.fo-family-law .fo-hero-copy > .elementor-element.elementor-widget-icon-list {
  max-width: 800px;
}


/* --------------------------- practice-page customer story / testimonial */

/*
 * Used by /workers-compensation/ (as a Customer Story, with an eyebrow,
 * headline and body above it) and by /personal-injury/ (as a bare testimonial,
 * card only). The hooks are unscoped by design, so any practice page can take
 * the block or just its lower half.
 *
 * The quote card is the homepage testimonial card, reused. Its
 * ids are the homepage's own (`e6eb8dd`, `c016e9b`, `c6795d7`, `fc76d23`,
 * `40fc6d8`, `9dc03e7`), but every one of them is scoped to post-7.css — the
 * homepage's page stylesheet, 47 KB, which this page has no other reason to
 * load. So the handful of declarations that card actually carries are restated
 * here instead, the same trade already made for `.fo-faq` against post-306.
 *
 * These values are measured off the rendered homepage card rather than read
 * from the sheet, because the computed radius (40px) and padding (30px) differ
 * from what post-7 authors. They are the only authored values on this page.
 *
 * The avatar's circle is the one deliberate departure: on the homepage it is
 * baked into the WebP asset, with `border-radius: 0`. A rule here means the
 * crop no longer depends on how the image happens to arrive.
 *
 * The two container hooks carry `.e-con` because `.e-con.e-flex` sets
 * `--flex-direction` at (0,2,0); a bare class loses to it whatever the order.
 *
 * Placed after the shared block so it wins on source order — `.fo-story-quote`
 * has to beat `.fo-practice-page .elementor-element.elementor-widget-text-editor`
 * at equal specificity.
 */
.fo-story-card.e-con {
  --display: flex;
  --flex-direction: column;
  --gap: 5px 16px;
  --padding-top: 30px;
  --padding-bottom: 30px;
  --padding-left: 30px;
  --padding-right: 30px;
  --border-radius: 40px 40px 40px 40px;

  /* `--align-self` is the same mechanism the shared hero uses to centre its
   * widgets; without it the capped card sits hard left under centred copy. */
  --align-self: center;

  max-width: 900px;
  background-color: var(--fo-surface, #fff);
}

.fo-story-attribution.e-con {
  --display: flex;
  --flex-direction: row;
  --gap: 16px 16px;
  --align-items: center;
}

/* The widget is a flex child of the attribution row, so without this it
 * shrinks and the circle turns into an ellipse. */
.fo-story-avatar {
  flex-shrink: 0;
}

.fo-story-avatar img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}

.fo-practice-page .fo-story-quote.elementor-element.elementor-widget-text-editor {
  font-size: 16px;
  line-height: 27px;
  color: #202020;
}

.fo-story-name .elementor-heading-title {
  font-family: var(--fo-font-display, "Yrsa", Georgia, serif);
  font-size: 30px;
  font-weight: 300;
  line-height: 30px;
}

.fo-practice-page .fo-story-role.elementor-element.elementor-widget-text-editor {
  font-family: var(--fo-font-display, "Yrsa", Georgia, serif);
  font-size: 19px;
  font-weight: 300;
  line-height: 26px;
  color: #808080;
}


/* --------------------------------- practice-page hero trust strip */

/*
 * The trust strip follows the hero CTA, and at the container's own 16px flex
 * row-gap it pressed straight up against the button — the same complaint the
 * client raised about the CTA itself on the earlier pages.
 *
 * Both values are the ones the shared block already uses above that button:
 * 32px, and 20px at its mobile step. Nothing new is authored, and the hero now
 * opens and closes on one interval throughout. The selector mirrors the button
 * rule exactly, so the two sit at the same (0,4,0) and behave the same way.
 *
 * Scoped to `.fo-practice-page` rather than to one page: the homepage and
 * /personal-injury/ both carry a trust strip today, and the hook is generic so
 * any practice page adding one should inherit the same spacing.
 */
.fo-practice-page .fo-hero-copy > .elementor-element.fo-trust-strip {
  margin-block-start: 32px;
}

@media (max-width: 767px) {
  .fo-practice-page .fo-hero-copy > .elementor-element.fo-trust-strip {
    margin-block-start: 20px;
  }
}


/* ------------------------------ /business-corporate/ hero headline */

/*
 * "AI-Driven Deal Intelligence / for Business & Corporate Law" is the two-line
 * headline the artifact renders, and it holds down to 1367px: the second line
 * measures 1248px inside a 1347px content box there, and 1400px above it.
 *
 * Below that it cannot. The practice-page h1 keeps its full 120px until 1100px,
 * so from 1366 down to 1101 the container narrows past that line and the
 * browser soft-wraps it, stranding "Law" alone — 177px on its own line at 1280
 * and again at 1200. That is the wrap the client already objected to on the
 * Family Law headline.
 *
 * So the headline carries a second break that is hidden above the point where
 * it is not needed: two lines where the artifact shows two, three below. Same
 * mechanism as `.fo-hero-break-sm` on /family-law/, one band higher.
 *
 * Measured across the whole range: no stranded word from 1920 to 768, and 480
 * and 390 are unchanged from the two-line markup, so mobile does not regress.
 * The breakpoint is 1366, which is already one of the four required test
 * viewports rather than a number picked for this page.
 */
@media (min-width: 1367px) {
  .fo-practice-page .fo-hero-copy .fo-hero-break-md {
    display: none;
  }
}


/* ----------------------------------------- /meet-colette/ card pairs */

/*
 * Two grids on this page hold two and four cards rather than six: the practice
 * types and the clinical-AI comparison. Measured in the existing grid at its
 * own `--width: 32%`, four cards land 3+1 at every desktop width from 1280 up —
 * the stranded-last-card shape the client has objected to twice already.
 *
 * 48% is not a new value: it is the one the block already applies to these same
 * cards across the tablet band. Carrying it up to every width from 768 gives a
 * balanced 2-across for the pair and 2+2 for the comparison, with equal card
 * widths, and leaves the mobile 1-up untouched. No breakpoint is added.
 */
@media (min-width: 768px) {
  .fo-colette-pair > .e-con {
    --width: 48%;
  }
}

/* The pill row is a flex container, so the hero's `--align-self: center` centres
 * the row but not the pills inside it. `center` is the value the hero already
 * uses for its own alignment; this applies it on the row's main axis. */
.fo-compliance.e-con {
  --justify-content: center;
}

/*
 * The featured comparison card is dark. Nothing on the site is dark at rest,
 * but this exact treatment already exists as the hover state of this very card:
 * post-160 fills it #222D63 on hover, and astra-child's
 * `.box-hover:hover h3, p, li span` inverts the text to #fff. The featured card
 * simply holds that state, so both values are the component's own.
 */
/* post-160 sets the resting fill at (0,4,0) with a :not() guard, so the hook
 * has to match that weight to win on source order. */
.elementor-160 .elementor-element.fo-colette-featured.e-con {
  background-color: #222D63;
}

.fo-practice-page .fo-colette-featured h3.elementor-heading-title,
.fo-practice-page .fo-colette-featured .elementor-widget-text-editor {
  color: #fff;
}


/* ------------------------------------- /aesthetic-clinics/ hero strip */

/*
 * Same defect and same fix as /family-law/ above. These six labels measure
 * 904px against post-12's own 900px cap on the widget, so the strip misses by
 * four pixels and drops "Renewal & Expansion" alone onto a second line — 5 + 1.
 *
 * No new value is authored: 800px is the cap /family-law/ already uses, and it
 * resolves this page's labels to 4 + 2 at 1920, 1440, 1280 and 1100, which is
 * the split the page already renders at 768px on its own.
 *
 * Scoped to this page rather than added to the family-law selector, so neither
 * page can move the other. Below 768px the container is already narrower than
 * the cap, so the rule has no effect there.
 */
.fo-aesthetic-clinics .fo-hero-copy > .elementor-element.elementor-widget-icon-list {
  max-width: 800px;
}


/* ------------------------------- /knowledge/ role cards (five across) */

/*
 * Five cards in the shared pair grid land 2 + 2 + 1 at every desktop width —
 * the stranded-last-card shape the client has objected to before.
 *
 * Swept 15-50% with this page's own copy. The window for each arrangement is
 * identical at 1920, 1440 and 1280 and one point narrower at 1100:
 * five across 15-18%, 4 + 1 19-23%, 3 + 2 24-31%, 2 + 2 + 1 32-49%.
 *
 * Five across does not survive the copy: at 17% and 1440 each card is 231px
 * with a 171px text column, "Staff & Administration" and "In-House Legal
 * Teams" both run to three lines, bodies to six or eight, and the cards stand
 * 467px tall. At 1100 that becomes 167px cards and 745px of height.
 *
 * 27% is the middle of the 24-31% window common to all four widths, and it is
 * the integer that renders all five cards at equal height (309px) at 1920 and
 * 1440. Measured there: 367px cards, a 307px text column, titles on one or two
 * lines, bodies on three or four.
 *
 * Scoped to this page. The Saxon page's five practice-area cards will need the
 * same value in a rule of their own; a width is only worth promoting to the
 * shared block once a third page needs it.
 *
 * Desktop only, from 1101px. Carrying 27% down into the tablet band was
 * measured and rejected: at 768 it gives 188px cards, four-line titles and
 * 597px of height, against 335px and 337px at the block's own 48%. The band
 * therefore keeps 48% and its 2 + 2 + 1, which is exactly how `.fo-stage-grid`
 * above already steps from 32% to 48% across the same breakpoint. Below 768
 * the block stacks these cards 1-up on its own.
 */
@media (min-width: 1101px) {
  .fo-knowledge .fo-role-cards > .e-con {
    --width: 31%;
  }
}

/*
 * The grid is left-packed, because post-12 gives `b74c198` `--display:flex`,
 * `--flex-direction:row`, `--gap:20px` and `--flex-wrap:wrap` but never sets
 * `--justify-content`, so it computes to `normal`. With five cards that left
 * every row short on the right — measured at 1440, row one ended 228px from
 * the edge and row two 616px, which is the lopsided gap the client saw.
 *
 * Centring is not a new value: `.fo-compliance.e-con` above already uses
 * `--justify-content: center` for the same reason. It applies at every width
 * because it only moves rows that do not fill: on mobile the cards are full
 * width and nothing shifts.
 *
 * The width above went 27% -> 31% with it. Both sit inside the 24-31% window
 * measured for 3 + 2, and 31% is the end of that window, so row one now spans
 * all but 38px of the container at 1440 instead of 228px. 32% was measured too
 * and fills another 21px, but leaves only 11px of slack at 1101 against 26px
 * at 31% — too close to the point where the row breaks to want the pixels.
 */
.fo-knowledge .fo-role-cards.e-con {
  --justify-content: center;
}

/*
 * astra-child inverts card text on hover with
 * `.box-hover:hover h3, .box-hover:hover p, .box-hover:hover li span`
 * (themes/astra-child/stylesheet.css). The feature-card eyebrow is a bare
 * `span` inside a heading widget and not inside an `li`, so it is the one
 * piece of card text that rule misses: measured on hover the card fills
 * #222D63 and the h3 and p turn #fff while the pill stays rgb(0,0,0).
 *
 * `#fff` is that rule's own value, finishing the set rather than introducing
 * one. Scoped by nesting rather than a new class: of the twelve `box-hover`
 * cards on this page only the four feature cards hold a `.fo-eyebrow`, so the
 * selector cannot reach the role or comparison cards, and `.fo-knowledge`
 * keeps it off every other page. Focus states are included so the pill still
 * reads if these cards are ever linked; only the colour changes.
 */
.fo-knowledge .box-hover:hover .fo-eyebrow .elementor-heading-title,
.fo-knowledge .box-hover:focus .fo-eyebrow .elementor-heading-title,
.fo-knowledge .box-hover:focus-visible .fo-eyebrow .elementor-heading-title,
.fo-knowledge .box-hover:focus-within .fo-eyebrow .elementor-heading-title {
  color: #fff;
}


/* ------------------------- /personal-injury/ spotlight image inset */

/*
 * The three feature-block images sit edge to edge in their column. post-12
 * gives these columns `--padding-top/bottom: 30px` but `--padding-left/right:
 * 0px` above 1100px, so the image fills the full width while the top and
 * bottom are inset: measured 605px wide in a 605px column at 1366 and 1920.
 *
 * Matching the horizontal padding to the vertical one the column already
 * carries makes the inset uniform on all four sides. 30px is that column's own
 * value, so nothing new is authored. Measured, the images go to 561, 556 and
 * 561px inside their 605 and 600px columns.
 *
 * Desktop only. From 1100px down post-12 already authors its own horizontal
 * padding (10px, then 20px at the mobile step), so those bands are untouched.
 * The fourth image is a smaller asset than the space available and stays at its
 * native 446px, centred, as it already was.
 */
@media (min-width: 1101px) {
  .fo-practice-page.fo-personal-injury .elementor-element.elementor-element-731a8be,
  .fo-practice-page.fo-personal-injury .elementor-element.elementor-element-7e2c205,
  .fo-practice-page.fo-personal-injury .elementor-element.elementor-element-e2a7b15 {
    --padding-left: 30px;
    --padding-right: 30px;
  }
}

/* Footer nav sub-headings ---------------------------------------------------
 *
 * The Law Firms and Elective Medicine Practices columns group their links under
 * "Products" and "Practice Areas". Shared chrome, so this renders on all 87
 * routes that carry the footer.
 *
 * The type is not authored here. The label carries `elementor-element-5942507`,
 * the footer's own secondary-text treatment (Lato 14px/400 at #FFFFFFD9, the
 * "By subscribing you agree with our Privacy Policy" line), which is the only
 * treatment in the footer that sits below the 16px full-white column title.
 * That id rule is on the widget wrapper, so the label element *is* the wrapper —
 * an <h4>, so a screen reader navigating by heading hears the structure inside
 * a column, not just the four column titles. Two things the id rule cannot
 * supply on its own:
 *
 *   line-height  the captured rule sets family, size, weight and colour but no
 *                line-height, and a bare <h4> takes the theme's 49.5px. The
 *                column already computes 26px, which is what the <p> this
 *                replaces was resolving to, so `inherit` reproduces it exactly.
 *
 *   margin       the column is a flex column with a 25px row gap, applied
 *                uniformly. That left the label the same distance from the list
 *                it labels as from the one above it, so it read as a stray link
 *                rather than a group label. 12px is the icon-list's own item
 *                spacing in this footer (post-133, `calc(12px/2)` top and
 *                bottom), and the difference against the column's 25px is
 *                written as-is so both existing values stay visible. Measured,
 *                the gap below closes 25px -> 12px and the 25px above is
 *                unchanged.
 *
 * Specificity: the id class is in the selector because .elementor-133 plus the
 * hook alone (0,2,0) loses the margin to Elementor's own widget reset.
 */
.elementor-133 .elementor-element.elementor-element-5942507.fo-footer-subhead {
  line-height: inherit;
  margin: 0 0 calc(12px - 25px);
}

/* /healthcare-practices/ — the uneven benefit grid --------------------------
 *
 * V14 asks for one large panel with the other two benefits stacked beside it.
 * `.fo-colette-pair` cannot express that on its own, and the reason is worth
 * recording, because a width value looks like it should have been enough:
 * the grid is `display:flex; flex-wrap:wrap`, so a third card at 32% does not
 * sit under the second one, it wraps to a new row and starts at the left edge,
 * under the first. Measured at 64/32/32 it lands 2+1 at 1920, 1366, 1100 and
 * 768 — the stranded-last-card shape, not the requested layout. Flex-wrap has
 * no way to say "two items stacked in the second column".
 *
 * So the second column is a wrapper element, `.fo-uneven-stack`, holding
 * benefits 2 and 3. It is an ordinary `.e-con e-child`, and its vertical
 * stacking and 16px gap come free from Elementor's own container defaults —
 * nothing is authored for either.
 *
 * That leaves two widths. 32% is not new: it is `.fo-stage-grid`'s own value
 * further up this file. 64% is the one new number on this page. Measured with
 * the wrapper in place: 870 + 435 at 1920 and 829 + 415 at 1366, with the
 * stacked cards at 415 and 395 inside their column.
 *
 * The 1101px floor is the site's own breakpoint, not a new one — it already
 * appears three times above. Below it nothing is authored: the two children
 * fall back to `.fo-colette-pair`'s 48% and render as an even two-column with
 * the pair stacked in the right-hand one (472 + 472 at 1100, 335 + 335 at
 * 768), then stack outright below 768. The floor is 1101 rather than 768
 * because at 768 a 32% column measures 223px and squeezes the stacked cards to
 * 203px.
 *
 * One thing for whoever edits this copy next: the stacked column drives the
 * panel's height. At V14's lengths it balances — 542px against 522px — but
 * much longer copy in benefits 2 and 3 will stretch benefit 1 to match.
 */
@media (min-width: 1101px) {
  .fo-healthcare-practices .fo-uneven > .e-con:first-child {
    --width: 64%;
  }

  .fo-healthcare-practices .fo-uneven > .fo-uneven-stack {
    --width: 32%;
  }
}

/* /healthcare-practices/ — the Meet Colette journey section ----------------
 *
 * The section holds two eyebrow labels ("Without Colette" / "With Colette")
 * and a secondary CTA. All three sat hard left while the heading, the intro
 * and both journey strips above them were centred: the strips carry
 * Elementor's own `elementor-align-center`, but a heading widget and a button
 * widget have no equivalent class, so they inherited the container's `start`.
 *
 * Centred here the same way the hero centres its own children a few hundred
 * lines above — `--align-self: center` plus `text-align: center`. No new
 * mechanism, and nothing is authored: the two declarations are lifted from
 * `.fo-practice-page .fo-hero-copy > .elementor-element`.
 *
 * The section also closed flush against the next one, because post-12 gives
 * `2a8bbe7` a 70px top padding and none at the bottom, which reads as cramped
 * once the CTA is the last thing in it. Matching the bottom to the top is not
 * a new value either — 70px is this section's own `--padding-top`.
 *
 * Scoped through `.fo-journey` rather than the element id because `2a8bbe7`
 * appears twice on this page: this section and "Works With the Systems You
 * Already Run", which wants neither the centring nor the extra padding.
 */
.fo-healthcare-practices .fo-journey.e-con {
  --padding-bottom: 70px;
}

.fo-healthcare-practices .fo-journey .fo-eyebrow,
.fo-healthcare-practices .fo-journey .elementor-widget-button {
  --align-self: center;

  text-align: center;
}

/* Verify-section fine print ------------------------------------------------
 *
 * The compliance line that closes the Verify section on seven pages. It is the
 * same `fc1a91b` text-editor widget as the paragraph above it, so at 18px on
 * 28px with no gap the two read as one block, which is what made the section
 * end heavily.
 *
 * Three things were asked for: space above it, a smaller size, and italic.
 * Italic was already true — the markup is `<p><em>` and computes to
 * font-style: italic on all seven — so only the first two are set here.
 *
 * Nothing is authored. 16px is the size `.fo-faq` already gives its answer
 * text further up this file, which is the same quieter-secondary-copy role.
 * 26px is the line-height already paired with a reduced size in the hero
 * rule below. 16 on 26 is a ratio of 1.63 against the 1.56 it replaces, so it
 * reads as a step down rather than a different rhythm. 32px is this block's
 * own separation interval — the hero uses it three times to push an element
 * away from what precedes it — where 16px is the pairing interval used to
 * draw two elements together.
 *
 * Deliberately not greyed. The FAQ pairs 16px with #727277, but muting
 * compliance text is a decision rather than a formatting change and was not
 * among the three things asked for.
 *
 * Scoped through `fo-fine-print` rather than position. On /meet-saxon/,
 * /meet-colette/, /expert-witnesses/ and /child-custody-evaluators/ the
 * element above is another `fc1a91b`, but on /practice-areas/,
 * /healthcare-practices/ and /knowledge/ it is the `b98f1e8` ledger, so an
 * adjacent-sibling selector would silently miss three of the seven. All seven
 * pages carry `fo-practice-page`, knowledge included.
 */
.fo-practice-page .elementor-element.fo-fine-print {
  margin-block-start: 32px;
}

.fo-practice-page .elementor-element.fo-fine-print,
.fo-practice-page .elementor-element.fo-fine-print p {
  font-size: 16px;
  line-height: 26px;
}


/* --------------------------- /practice-areas/ product pair CTA placement
 *
 * The Saxon and Knowledge CTAs sit inside the same text-editor widget as the
 * body copy, so nothing separates them: measured flush at 0px on both cards at
 * every width. The two also sat 28px apart vertically, because one body runs to
 * three lines and the other to four, and each button follows its own paragraph.
 *
 * Making the text widget a stretching column lets the button take
 * `margin-block-start: auto` and land on the card's own floor. Both cards are
 * already equal height, so both buttons then start on the same line — measured
 * identical at 1920, 1366 and 1200. The 32px floor on the paragraph is what
 * guarantees separation on the tighter card once the auto margin has nothing
 * left to give; it is the interval this file already uses twice on these pages,
 * for the hero trust strip and the Verify fine print, so no new value is
 * introduced. With the container's own 5px row gap it computes to 37px on the
 * shorter card and 65px on the longer one.
 *
 * Below 1100 the buttons wrap to two lines at different points, so they align
 * on their bottom edge rather than their top; below 768 the cards stack and
 * alignment stops applying. Both are the flex behaviour, not something to
 * correct.
 *
 * Scoped to /practice-areas/ deliberately. The same button-inside-body shape
 * exists on the homepage doors and on /healthcare-practices/, and both were
 * reviewed at 0px and left there; widening this rule would change them too.
 */
.fo-practice-areas .fo-colette-pair > .e-con > .elementor-widget-text-editor {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fo-practice-areas .fo-colette-pair > .e-con > .elementor-widget-text-editor > p {
  margin-block-end: 32px;
}

.fo-practice-areas .fo-colette-pair .elementor-widget-button {
  margin-block-start: auto;
}


/* --------------------------------- homepage door cards: eyebrow on hover
 *
 * Same gap as the one patched for /knowledge/ further up: astra-child inverts
 * card text on hover with `.box-hover:hover h3, .box-hover:hover p,
 * .box-hover:hover li span`, and the eyebrow is a bare span inside a heading
 * widget and not inside an li, so it is the one piece of card text that rule
 * misses. Measured on hover the card fills rgb(34,45,99) and the h3 and body
 * turn #fff while the pill stays rgb(0,0,0) — 1.62:1, which fails AA outright.
 *
 * The colour here is the border the pill already draws, `--fo-border`, so the
 * label and its outline match: 8.84:1 on the hovered fill. /knowledge/ uses
 * #fff for the same repair; that difference is deliberate and requested, not
 * drift, but the two pages now treat this component differently.
 */
.fo-home .box-hover:hover .fo-eyebrow .elementor-heading-title,
.fo-home .box-hover:focus .fo-eyebrow .elementor-heading-title,
.fo-home .box-hover:focus-visible .fo-eyebrow .elementor-heading-title,
.fo-home .box-hover:focus-within .fo-eyebrow .elementor-heading-title {
  color: var(--fo-border, #d1d5e4);
}


/* --------------------------------- homepage door cards: CTA placement
 *
 * The same shape, and the same fix, as the /practice-areas/ product pair
 * above: the CTA lives in the last text-editor widget alongside the
 * practice-area line, so nothing separates them — measured flush at 0px on
 * both cards at every width — and the two buttons sat up to 56px apart because
 * each follows its own copy.
 *
 * Stretching that last widget lets the button take the card floor. Both cards
 * are equal height above 767px, so both buttons then start on the same line:
 * measured identical at 1920, 1366, 1200 and 768. The 32px floor is the
 * interval already used for the hero trust strip and the Verify fine print;
 * with the container's 5px row gap it computes to 37px on the tighter card.
 *
 * `:last-of-type` rather than a bare descendant selector, because these cards
 * carry two text-editor widgets — the body and the practice-area line — and
 * only the second one holds the button.
 */
.fo-home .fo-colette-pair > .e-con > .elementor-widget-text-editor:last-of-type {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fo-home .fo-colette-pair > .e-con > .elementor-widget-text-editor:last-of-type > p {
  margin-block-end: 32px;
}

.fo-home .fo-colette-pair .elementor-widget-button {
  margin-block-start: auto;
}


/* ----------------------------- header chrome: 2026-08-25 review fixes */

/*
 * Hamburger tap target (every route, compact mode).
 *
 * The captured toggle is exactly its icon: --n-menu-toggle-icon-size is 20px on
 * all three templates and the widget CSS strips the button's own padding
 * (`padding:initial`), so the rendered hit area measured 20x20 at 390px —
 * less than half the 44px WCAG 2.5.8/platform guideline. The minimums enlarge
 * the hit area; the negative block margin gives back exactly what the minimum
 * added ((icon - 44) / 2 = -12px at the current 20px icon), so the header bar
 * keeps its measured 102px height and the icon's rendered centre stays at the
 * same pixel it was — verified before/after at 390.
 *
 * Two knock-ons are neutralised rather than left to surprise:
 *
 *   border-radius / box-shadow   Astra's global `button` styling puts a 1px/2px
 *                                shadow on every button and the kit rounds them
 *                                at 50px. Invisible on a 20px transparent
 *                                button, but at 44px it rendered as a faint
 *                                grey circle behind the hamburger.
 *
 *   span.e-close svg             the captured close icon is sized
 *                                `height:100%` of the button, which was the
 *                                icon size only because the button was the
 *                                icon. At 44px it would render a 44px X against
 *                                a 20px hamburger, so it is pinned to the same
 *                                icon variable the open state uses.
 *
 * site.js reads the toggle's rect bottom for the drawer offset, so the drawer
 * now opens at the button's true edge — measured 104px against the header's
 * 102px, i.e. flush under the bar instead of 10px into it.
 */
.elementor-widget-n-menu .e-n-menu-toggle {
  min-width: 44px;
  min-height: 44px;
  margin-block: calc((var(--n-menu-toggle-icon-size, 20px) - 44px) / 2);
  justify-content: center;
  align-items: center;
  border-radius: 0;
  box-shadow: none;
}

.elementor-widget-n-menu .e-n-menu-toggle span.e-close svg {
  width: var(--n-menu-toggle-icon-size, 20px);
  height: var(--n-menu-toggle-icon-size, 20px);
}

/*
 * Log In / Book a Demo separation on phones.
 *
 * The compact CTA strip (the only element in the header hidden on both desktop
 * and tablet, which is what the selector keys on) authors `--column-gap: 0px`,
 * so the two full-bleed halves met at a shared edge — measured 0px at 390 on
 * every route. 10px is the header row's own gap (the parent container authors
 * `--gap: 10px 10px`), so no new interval is introduced; the 5px row gap the
 * strip already authors is kept.
 */
.elementor-location-header .e-con.elementor-hidden-desktop.elementor-hidden-tablet {
  --gap: 5px 10px;
  --row-gap: 5px;
  --column-gap: 10px;
}

/*
 * Mega-menu column lists that hang 10px below their neighbours.
 *
 * Three of the four captured lists under the panels' uppercase column headings
 * author `margin-top: -10px` against the column's 20px row gap, landing 10px
 * under their heading. The Resources list (80abc24) and the restored
 * APIs & Connections list (994ead5) author no margin, so their first rows sat
 * 10px lower than the Practice Areas rows beside them — measured 159 vs 169 at
 * 1920, which is the "not lined properly" the review flagged. The hook carries
 * the same -10px the sibling lists already use; nothing else changes.
 */
.elementor-location-header .fo-menu-list-align {
  margin-block-start: -10px;
}

/* ------------------------------------- button type: mobile step (site-wide) */

/*
 * The kit pins every `.elementor-button` at 16px with no breakpoint step, and
 * each widget restates that 16px per element, so on most pages button text is
 * the one run of type that never responds while the body steps down at 767px
 * (18px -> 17px on the practice pages, the site's dominant body ramp — a
 * 0.944 step). 15px is 16px on that same step, so buttons scale in proportion
 * with the body instead of holding their desktop size. Padding is untouched,
 * so the tap target keeps its ~48px height.
 *
 * Scoped to page bodies via data-elementor-type; the header and footer carry
 * their own types, so chrome buttons (drawer, footer subscribe) keep their
 * captured size. The per-element selectors this must beat are (0,4,0), which
 * this matches and wins on load order — including the handful of captured
 * per-page mobile steps at 14px, which unify up to 15px rather than sitting
 * one notch below every other button (the "shrink noticeably" cases from the
 * same review). The two :not() exclusions keep their own authored mobile
 * sizes: the 22px Yrsa CTA pair on /legal-experts-evaluators-for-child/ steps
 * to 19px by design, and /media/'s platform pill (1386835) authors 16px with
 * its own padding.
 */
@media (max-width: 767px) {
  [data-elementor-type="wp-page"] .elementor-element.elementor-widget-button:not(.elementor-element-6b3f767):not(.elementor-element-53e8c2a):not(.elementor-element-1386835) .elementor-button,
  [data-elementor-type="wp-post"] .elementor-element.elementor-widget-button .elementor-button,
  [data-elementor-type="single-post"] .elementor-element.elementor-widget-button .elementor-button {
    font-size: 15px;
  }
}

/* ------------------------------------------------ editorial reading measure
 * Legacy article templates let body copy run nearly the full desktop canvas
 * and scale section headings almost as large as the page title. A controlled
 * reading measure and a calmer responsive type ramp make long-form guidance
 * easier to scan without changing the captured archive/card treatments. */
.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor {
  width: min(100%, 74ch);
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.72;
}

.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor > h2 {
  margin-block: 1.35em 0.45em;
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.08;
}

.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor > h3 {
  margin-block: 1.2em 0.4em;
  font-size: clamp(27px, 2.4vw, 34px);
  line-height: 1.12;
}

.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor :is(p, li) {
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .single-post .elementor-widget-theme-post-content .elementor-widget-text-editor {
    font-size: 17px;
    line-height: 1.68;
  }
}

/* The kit's blanket `.elementor-kit-6 button` rule (padding:13px 30px;
   border-radius:50px) out-specifies .fo-video and squeezes the poster inside
   the 16:9 facade; hover and focus re-apply the radius, so cover those too. */
button.fo-video.fo-video,
button.fo-video.fo-video:hover,
button.fo-video.fo-video:focus {
  padding: 0;
  border-radius: var(--fo-radius-md, 12px);
}

/* The same kit rule pads the injected carousel controls into 60x49.5 ovals. */
button.fo-carousel-control.fo-carousel-control {
  padding: 0;
}

/* On /testimonials/ the boxed slide cards span the full widget width (the kit
   max-width of 1400px exceeds the widget's own 1360px), so there is no gutter
   for the arrows to sit in and they land on the client logo and the video.
   Reserve one: after the padding reset the arrow occupies 13.5-63px from the
   card edge, so a 64px minimum clears it at every viewport. */
.elementor-272 .e-con.elementor-element.elementor-element-8725468,
.elementor-272 .e-con.elementor-element.elementor-element-a159be5,
.elementor-272 .e-con.elementor-element.elementor-element-b406aa5 {
  --padding-left: clamp(64px, 6vw, 88px);
  --padding-right: clamp(64px, 6vw, 88px);
}

/* Pagination dots render at 10.8px, well under the 24px WCAG 2.2 minimum.
   Keep the dot's visual size and grow only its hit area, which content-box
   clipping preserves through the 50% radius. */
.fo-carousel-dots .swiper-pagination-bullet {
  box-sizing: content-box;
  padding: 17px;
  background-clip: content-box;
}

.fo-carousel-ready > .swiper-pagination.fo-carousel-dots {
  gap: 0;
}

/* Keep the three-item desktop navigation balanced between the brand and the
   action buttons. Below the tablet breakpoint the menu becomes a drawer. */
@media (min-width: 1101px) {
  .fo-header-logo-col.fo-header-logo-col.fo-header-logo-col.fo-header-logo-col {
    --width: 24%;
  }

  .fo-header-nav-col.fo-header-nav-col.fo-header-nav-col.fo-header-nav-col {
    --width: 51%;
  }
}

@media (min-width: 1101px) and (max-width: 1440px) {
  .fo-header-nav-col .e-n-menu-title {
    padding-inline: 14px;
  }
}

@media (min-width: 1101px) and (max-width: 1180px) {
  .fo-header-nav-col .e-n-menu-title {
    padding-inline: 10px;
  }
}

/* ---------------------------------------- professional heading scale */

/* Elementor's migrated templates used six different hero widget ids but the
 * same oversized 100-120px desktop treatment. Keep their editorial display
 * face while applying one restrained scale: a 96px ceiling on wide screens,
 * a fluid tablet step, and a 44px phone ceiling. The ids are template hooks,
 * not route hooks, so copied legal and healthcare pages remain consistent. */
.elementor.elementor .elementor-element.elementor-element-b80b702 h1.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-d20e801 h1.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-fbc47f9 h1.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-223a1bc h1.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-86b0797 h1.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-7653964c h1.elementor-heading-title {
  font-size: clamp(62px, 7vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

/* Large section and conversion headings should support the page hierarchy,
 * not compete with its hero. This brings the inherited 76-108px variants
 * into a shared 64px ceiling while preserving card and article headings. */
.elementor.elementor .elementor-element.elementor-element-b80b702 h2.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-a132d06 h2.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-73ed641 h2.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-229cfd1 h2.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-37baa56 h2.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-6fabd5a h2.elementor-heading-title,
.elementor.elementor .elementor-element.elementor-element-f0cdb9a h2.elementor-heading-title {
  font-size: clamp(46px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

/* Blog-card titles are navigation labels, not page heroes. */
.archive.category-blog h2.entry-title {
  font-size: clamp(36px, 3.1vw, 42px);
  line-height: 1.08;
  text-wrap: pretty;
}

/* The captured archive blue missed AA for normal-size metadata by a fraction.
 * The darker brand blue clears the threshold and the 12px floor keeps author
 * and date links legible without making metadata compete with the title. */
.archive.category-blog .ast-taxonomy-container a,
.archive.category-blog .entry-meta a,
.archive.category-blog .entry-meta .author-name,
.archive.category-blog .entry-meta .published {
  color: var(--fo-brand-dark, #3451db) !important;
  font-size: max(12px, 1em);
}

.fo-platform .elementor-element-fe1e827 .elementor-button {
  background-color: var(--fo-brand-dark, #3451db) !important;
}

@media (max-width: 767px) {
  .elementor.elementor .elementor-element.elementor-element-b80b702 h1.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-d20e801 h1.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-fbc47f9 h1.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-223a1bc h1.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-86b0797 h1.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-7653964c h1.elementor-heading-title {
    font-size: clamp(38px, 10.8vw, 44px);
    line-height: 0.98;
  }

  .elementor.elementor .elementor-element.elementor-element-b80b702 h2.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-a132d06 h2.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-73ed641 h2.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-229cfd1 h2.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-37baa56 h2.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-6fabd5a h2.elementor-heading-title,
  .elementor.elementor .elementor-element.elementor-element-f0cdb9a h2.elementor-heading-title {
    font-size: clamp(34px, 9.5vw, 40px);
    line-height: 1.04;
  }

  .archive.category-blog h2.entry-title {
    font-size: 34px;
    line-height: 1.08;
  }

  /* A final set of migrated section-title widgets carried isolated 45-55px
   * phone rules. They all sit below a page H1, so a common 40px cap restores
   * hierarchy without touching compact card headings. */
  .elementor.elementor .elementor-element:is(
    .elementor-element-39812071,
    .elementor-element-94ac7ea,
    .elementor-element-099712b,
    .elementor-element-c4d32d0,
    .elementor-element-b4a9c3d,
    .elementor-element-c0948a2,
    .elementor-element-7b52d72d,
    .elementor-element-47c1c77,
    .elementor-element-30d0445,
    .elementor-element-79c79cd,
    .elementor-element-00afa94,
    .elementor-element-b99d90f,
    .elementor-element-ff68d37,
    .elementor-element-a20599d,
    .elementor-element-d73e446,
    .elementor-element-8d6c0bf,
    .elementor-element-0f48dba,
    .elementor-element-75b1e18,
    .elementor-element-3612c22,
    .elementor-element-13c34c7,
    .elementor-element-f5c4b69,
    .elementor-element-9dd1b24,
    .elementor-element-e522656
  ) h2 {
    font-size: 40px;
    line-height: 1.08;
    text-wrap: balance;
  }
}

/* --------------------------------------- audience gateway + theme system */

/* The homepage uses the complete shared navigation so visitors can move
 * directly into the platform, profession and company sections. */

.fo-home-gateway-page .fo-home-hero .fo-hero-copy {
  align-items: center;
  margin-inline: auto;
  text-align: center;
  width: min(100%, 1180px);
  gap: clamp(14px, 1.6vw, 22px);
}

.fo-home-gateway-page .fo-home-hero .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
  max-width: 1120px;
  color: #0d2344;
  font-size: clamp(64px, 5.4vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.fo-home-gateway-page .fo-home-hero .fo-hero-copy > .elementor-widget-text-editor {
  margin-inline: auto;
  width: min(100%, 820px);
  max-width: 820px;
  color: #26364f;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}

.fo-home-audience-gateway {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  width: min(100%, 1040px);
  margin: clamp(4px, 1vh, 12px) auto 0;
  text-align: left;
}

.fo-home-audience-card {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgb(13 35 68 / 14%);
  border-radius: 20px;
  background: rgb(255 255 255 / 84%);
  box-shadow: 0 18px 48px rgb(13 35 68 / 9%);
  backdrop-filter: blur(10px);
}

.fo-home-audience-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--fo-audience-accent);
}

.fo-home-audience-card--legal {
  --fo-audience-accent: var(--fo-brand, #4a6cf7);
  --fo-audience-ink: var(--fo-navy-dark, #1e2a6e);
  --fo-audience-tint: rgb(74 108 247 / 10%);
}

.fo-home-audience-card--healthcare {
  --fo-audience-accent: var(--fo-healthcare-teal, #0d9488);
  --fo-audience-ink: var(--fo-healthcare-teal-dark, #0b7c72);
  --fo-audience-tint: rgb(13 148 136 / 10%);
}

.fo-home-audience-card p,
.fo-home-audience-card h2 {
  margin: 0;
}

.fo-home-audience-card .fo-home-audience-label {
  margin-block-end: 6px;
  color: var(--fo-audience-ink);
  font: 700 12px/1.25 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fo-home-audience-card h2 {
  color: #132647;
  font: 500 clamp(26px, 2vw, 34px)/1.05 var(--fo-font-display, "Yrsa", Georgia, serif);
  letter-spacing: -0.015em;
}

.fo-home-audience-card > p:not(.fo-home-audience-label) {
  margin-block-start: 8px;
  color: #4a5870;
  font: 400 15px/1.45 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-home-audience-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-block-start: 16px;
}

.fo-home-audience-links a {
  min-height: 44px;
  font: 650 14px/1 var(--fo-font-sans, "Inter", sans-serif);
  text-decoration: none;
}

.fo-home-audience-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  color: #fff;
  background: var(--fo-audience-ink);
}

.fo-home-audience-secondary {
  display: inline-flex;
  align-items: center;
  color: var(--fo-audience-ink);
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, var(--fo-audience-accent) 50%, transparent) !important;
  text-underline-offset: 4px;
}

.fo-home-audience-card:hover,
.fo-home-audience-card:focus-within {
  border-color: color-mix(in srgb, var(--fo-audience-accent) 42%, transparent);
  box-shadow: 0 22px 54px rgb(13 35 68 / 13%);
}

/* Strategy principles: an open editorial band between customer trust and
 * customer proof. The vertical rules create rhythm without turning each
 * principle into another card. */
.fo-home-principles {
  padding: clamp(64px, 7.5vw, 112px) max(24px, calc((100vw - 1440px) / 2));
  border-block: 1px solid rgb(13 35 68 / 10%);
  background:
    linear-gradient(115deg, rgb(74 108 247 / 4%), transparent 40%),
    #fbfcff;
}

.fo-home-principles-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 1440px);
  margin-inline: auto;
}

.fo-home-principle {
  min-width: 0;
  padding-inline: clamp(24px, 3vw, 48px);
}

.fo-home-principle + .fo-home-principle {
  border-inline-start: 1px solid rgb(13 35 68 / 12%);
}

.fo-home-principle-icon {
  width: 52px;
  height: 52px;
  margin-block-end: clamp(24px, 2.5vw, 36px);
  color: var(--fo-brand, #4a6cf7);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fo-home-principle:nth-child(even) .fo-home-principle-icon {
  color: var(--fo-healthcare-teal-dark, #0b7c72);
}

.fo-home-principle h2,
.fo-home-principle p {
  margin: 0;
}

.fo-home-principle h2 {
  max-width: 12ch;
  min-height: 3.24em;
  color: #132647;
  font: 600 clamp(24px, 2vw, 31px)/1.08 var(--fo-font-display, "Yrsa", Georgia, serif);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.fo-home-principle p {
  max-width: 31ch;
  margin-block-start: 16px;
  color: #4a5870;
  font: 400 clamp(15px, 1.15vw, 17px)/1.62 var(--fo-font-sans, "Inter", sans-serif);
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .fo-home-principles-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 52px;
  }

  .fo-home-principle,
  .fo-home-principle:first-child,
  .fo-home-principle:last-child {
    padding-inline: clamp(20px, 4vw, 40px);
  }

  .fo-home-principle:nth-child(odd) {
    border-inline-start: 0;
  }
}

@media (max-width: 600px) {
  .fo-home-principles {
    padding-block: 60px;
  }

  .fo-home-principles-inner {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .fo-home-principle,
  .fo-home-principle:first-child,
  .fo-home-principle:last-child,
  .fo-home-principle:nth-child(even) {
    padding: 0;
    border-inline-start: 0;
  }

  .fo-home-principle + .fo-home-principle {
    margin-block-start: 36px;
    padding-block-start: 36px;
    border-block-start: 1px solid rgb(13 35 68 / 12%);
  }

  .fo-home-principle-icon {
    width: 46px;
    height: 46px;
    margin-block-end: 20px;
  }

  .fo-home-principle h2,
  .fo-home-principle p {
    max-width: 34ch;
  }

  .fo-home-principle h2 {
    min-height: 0;
  }
}

/* Meet Saxon: an editorial case-record narrative. The page alternates between
 * long-form argument and product evidence, keeping attorney review visible at
 * every stage. */
.fo-meet-saxon-v2 {
  --saxon-ink: #10213f;
  --saxon-blue: #416bfa;
  --saxon-paper: #f6f2e9;
  --saxon-line: rgb(16 33 63 / 16%);
  color: #33415a;
  background: #fff;
}

.fo-meet-saxon-v2 :where(h1, h2, h3, p, ol, figure, blockquote) {
  margin: 0;
}

.fo-saxon-shell {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

.fo-saxon-kicker,
.fo-saxon-chapter-number {
  color: var(--saxon-blue);
  font: 700 12px/1.2 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fo-saxon-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(88px, 10vw, 156px);
  border-bottom: 1px solid var(--saxon-line);
  background:
    radial-gradient(circle at 84% 20%, rgb(65 107 250 / 15%), transparent 29%),
    linear-gradient(115deg, #fff 0 58%, #f4f7ff 58% 100%);
}

.fo-saxon-hero::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(16 33 63 / 4%) 1px, transparent 1px);
  background-size: 100% 48px;
  content: "";
  pointer-events: none;
}

.fo-saxon-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, 0.58fr);
  gap: clamp(64px, 8vw, 132px);
  align-items: center;
}

.fo-saxon-hero h1 {
  max-width: 10ch;
  margin-block: 18px 28px;
  color: var(--saxon-ink);
  font: 400 clamp(68px, 8.5vw, 132px)/0.84 var(--fo-font-display, "Yrsa", Georgia, serif);
  letter-spacing: -0.055em;
}

.fo-saxon-trademark {
  margin-inline-start: 0.04em;
  font-family: var(--fo-font-sans, "Inter", sans-serif);
  font-size: 0.22em;
  font-weight: 700;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: super;
}

.fo-saxon-hero-intro {
  max-width: 780px;
  padding-inline-start: clamp(22px, 3vw, 42px);
  border-inline-start: 2px solid var(--saxon-blue);
}

.fo-saxon-hero-intro p {
  color: #34435c;
  font: 400 clamp(18px, 1.45vw, 22px)/1.65 var(--fo-font-sans, "Inter", sans-serif);
  text-wrap: pretty;
}

.fo-saxon-hero-intro .fo-saxon-declaration {
  margin-block-start: 20px;
  color: var(--saxon-ink);
  font-weight: 700;
}

.fo-saxon-button {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  margin-block-start: 36px;
  padding: 15px 22px;
  border: 1px solid var(--saxon-ink);
  color: #fff;
  background: var(--saxon-ink);
  font: 700 14px/1 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: translate 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.fo-saxon-button:hover,
.fo-saxon-button:focus-visible {
  color: #fff;
  background: var(--saxon-blue);
  box-shadow: 6px 6px 0 rgb(16 33 63 / 14%);
  translate: -2px -2px;
}

.fo-saxon-hero-record {
  position: relative;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--saxon-line);
  box-shadow: 18px 18px 0 rgb(65 107 250 / 9%);
  background: rgb(255 255 255 / 92%);
}

.fo-saxon-hero-record::before {
  position: absolute;
  inset: 12px;
  border: 1px solid rgb(16 33 63 / 8%);
  content: "";
  pointer-events: none;
}

.fo-saxon-record-label {
  display: block;
  padding-block-end: 22px;
  border-bottom: 1px solid var(--saxon-line);
  color: #65718a;
  font: 700 11px/1.2 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fo-saxon-hero-record ol {
  padding: 0;
  list-style: none;
}

.fo-saxon-hero-record li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding-block: 18px;
  border-bottom: 1px solid var(--saxon-line);
  color: var(--saxon-ink);
  font: 600 15px/1.4 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-saxon-hero-record li span {
  color: var(--saxon-blue);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.fo-saxon-hero-record > p {
  margin-block-start: 24px;
  color: #66728a;
  font: italic 400 17px/1.5 var(--fo-font-display, "Yrsa", Georgia, serif);
}

.fo-saxon-chapter {
  padding-block: clamp(88px, 10vw, 154px);
  background: var(--saxon-paper);
}

.fo-saxon-chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(60px, 8vw, 132px);
  align-items: center;
}

.fo-saxon-chapter-grid-reverse .fo-saxon-chapter-copy {
  grid-column: 2;
}

.fo-saxon-chapter-grid-reverse .fo-saxon-product-frame {
  grid-row: 1;
  grid-column: 1;
}

.fo-saxon-chapter h2 {
  max-width: 15ch;
  margin-block: 18px 32px;
  color: var(--saxon-ink);
  font: 500 clamp(46px, 5vw, 76px)/0.98 var(--fo-font-display, "Yrsa", Georgia, serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.fo-saxon-chapter-copy > p:not(.fo-saxon-chapter-number) {
  max-width: 68ch;
  color: #414b5f;
  font: 400 clamp(16px, 1.25vw, 19px)/1.76 var(--fo-font-sans, "Inter", sans-serif);
  text-wrap: pretty;
}

.fo-saxon-chapter-copy > p + p {
  margin-block-start: 24px;
}

.fo-saxon-chapter blockquote {
  max-width: 23ch;
  margin-block-start: 36px;
  padding-inline-start: 24px;
  border-inline-start: 3px solid var(--saxon-blue);
  color: var(--saxon-ink);
  font: italic 500 clamp(25px, 2.2vw, 34px)/1.15 var(--fo-font-display, "Yrsa", Georgia, serif);
}

.fo-saxon-product-frame {
  padding: 14px;
  border: 1px solid var(--saxon-line);
  box-shadow: 18px 18px 0 rgb(16 33 63 / 8%);
  background: #fff;
}

.fo-saxon-product-frame img {
  display: block;
  width: 100%;
  max-height: 690px;
  object-fit: cover;
  object-position: top;
}

.fo-saxon-product-frame figcaption {
  padding: 16px 8px 4px;
  color: #647089;
  font: 500 12px/1.5 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.02em;
}

.fo-saxon-chapter-dark {
  color: #e8edf8;
  background: var(--saxon-ink);
}

.fo-saxon-chapter-dark h2,
.fo-saxon-chapter-dark blockquote {
  color: #fff;
}

.fo-saxon-chapter-dark .fo-saxon-chapter-copy > p:not(.fo-saxon-chapter-number) {
  color: #c3cbda;
}

.fo-saxon-product-frame-dark {
  border-color: rgb(255 255 255 / 20%);
  box-shadow: 18px 18px 0 rgb(65 107 250 / 30%);
  background: #fff;
}

.fo-saxon-lifecycle {
  padding-block: clamp(76px, 8vw, 120px);
  border-bottom: 1px solid var(--saxon-line);
  background: #fff;
}

.fo-saxon-lifecycle h2,
.fo-saxon-section-heading h2,
.fo-saxon-standards h2,
.fo-saxon-practices h2,
.fo-saxon-faq h2,
.fo-saxon-cta h2 {
  margin-block-start: 16px;
  color: var(--saxon-ink);
  font: 500 clamp(42px, 4.8vw, 70px)/0.98 var(--fo-font-display, "Yrsa", Georgia, serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.fo-saxon-lifecycle h2 {
  max-width: 15ch;
}

.fo-saxon-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-block-start: clamp(46px, 6vw, 80px);
  padding: 0;
  border-block: 1px solid var(--saxon-line);
  list-style: none;
}

.fo-saxon-stages li {
  min-width: 0;
  padding: 24px 20px 28px;
  color: var(--saxon-ink);
  font: 650 15px/1.25 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-saxon-stages li + li {
  border-inline-start: 1px solid var(--saxon-line);
}

.fo-saxon-stages span {
  display: block;
  margin-block-end: 24px;
  color: var(--saxon-blue);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.fo-saxon-inside {
  padding-block: clamp(92px, 11vw, 164px);
  background: #f7f9fe;
}

.fo-saxon-section-heading {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px clamp(52px, 8vw, 120px);
  align-items: end;
  margin-block-end: clamp(64px, 8vw, 112px);
}

.fo-saxon-section-heading .fo-saxon-kicker {
  grid-column: 1 / -1;
}

.fo-saxon-section-heading h2 {
  max-width: 13ch;
}

.fo-saxon-section-heading > p:last-child {
  max-width: 48ch;
  color: #56647b;
  font: 400 18px/1.7 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-saxon-modules {
  display: grid;
  gap: clamp(56px, 7vw, 92px);
}

.fo-saxon-module {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(430px, 1.22fr);
  gap: clamp(48px, 7vw, 108px);
  align-items: center;
  padding-block-start: clamp(42px, 5vw, 68px);
  border-top: 1px solid var(--saxon-line);
}

.fo-saxon-module-reverse > div {
  grid-column: 2;
}

.fo-saxon-module-reverse > img {
  grid-row: 1;
  grid-column: 1;
}

.fo-saxon-module-index {
  display: block;
  margin-block-end: 62px;
  color: rgb(16 33 63 / 32%);
  font: 400 46px/1 var(--fo-font-display, "Yrsa", Georgia, serif);
}

.fo-saxon-module h3 {
  max-width: 14ch;
  margin-block: 14px 24px;
  color: var(--saxon-ink);
  font: 500 clamp(34px, 3vw, 48px)/1.02 var(--fo-font-display, "Yrsa", Georgia, serif);
  letter-spacing: -0.025em;
}

.fo-saxon-module div > p:last-of-type {
  max-width: 48ch;
  color: #536178;
  font: 400 16px/1.72 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-saxon-module a,
.fo-saxon-standards-copy a {
  display: inline-flex;
  gap: 12px;
  margin-block-start: 26px;
  color: var(--saxon-blue);
  font: 700 14px/1.3 var(--fo-font-sans, "Inter", sans-serif);
  text-decoration: none;
}

.fo-saxon-module a:hover,
.fo-saxon-module a:focus-visible,
.fo-saxon-standards-copy a:hover,
.fo-saxon-standards-copy a:focus-visible {
  color: var(--saxon-ink);
}

.fo-saxon-module img {
  display: block;
  width: 100%;
  border: 1px solid var(--saxon-line);
  box-shadow: 14px 14px 0 rgb(65 107 250 / 10%);
}

.fo-saxon-standards {
  padding-block: clamp(84px, 9vw, 136px);
  color: #e7edf8;
  background: #172b4d;
}

.fo-saxon-standards-grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(58px, 9vw, 144px);
}

.fo-saxon-standards h2 {
  max-width: 10ch;
  color: #fff;
}

.fo-saxon-standards-copy {
  padding-inline-start: clamp(28px, 4vw, 54px);
  border-inline-start: 1px solid rgb(255 255 255 / 22%);
}

.fo-saxon-standards-copy p {
  max-width: 58ch;
  color: #c4ccdb;
  font: 400 17px/1.76 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-saxon-standards-copy p + p {
  margin-block-start: 24px;
}

.fo-saxon-standards-copy a {
  color: #9eb2ff;
}

.fo-saxon-standards-copy a:hover,
.fo-saxon-standards-copy a:focus-visible {
  color: #fff;
}

.fo-saxon-practices {
  padding-block: clamp(84px, 9vw, 136px);
  background: var(--saxon-paper);
}

.fo-saxon-practices h2 {
  max-width: 14ch;
}

.fo-saxon-practice-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: clamp(50px, 6vw, 78px);
  border-top: 1px solid var(--saxon-line);
}

.fo-saxon-practice-links a {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--saxon-line);
  color: var(--saxon-ink);
  font: 600 clamp(19px, 1.7vw, 24px)/1.25 var(--fo-font-display, "Yrsa", Georgia, serif);
  text-decoration: none;
}

.fo-saxon-practice-links a:nth-child(odd) {
  padding-inline-end: clamp(28px, 4vw, 60px);
}

.fo-saxon-practice-links a:nth-child(even) {
  padding-inline-start: clamp(28px, 4vw, 60px);
  border-inline-start: 1px solid var(--saxon-line);
}

.fo-saxon-practice-links a:hover,
.fo-saxon-practice-links a:focus-visible {
  color: var(--saxon-blue);
}

.fo-saxon-faq {
  padding-block: clamp(84px, 9vw, 136px);
  background: #fff;
}

.fo-saxon-faq-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(54px, 9vw, 144px);
  align-items: start;
}

.fo-saxon-faq h2 {
  max-width: 11ch;
}

.fo-saxon-faq details {
  border-top: 1px solid var(--saxon-line);
}

.fo-saxon-faq details:last-child {
  border-bottom: 1px solid var(--saxon-line);
}

.fo-saxon-faq summary {
  position: relative;
  padding: 26px 48px 26px 0;
  color: var(--saxon-ink);
  font: 650 17px/1.45 var(--fo-font-sans, "Inter", sans-serif);
  cursor: pointer;
  list-style: none;
}

.fo-saxon-faq summary::-webkit-details-marker {
  display: none;
}

.fo-saxon-faq summary::after {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 4px;
  color: var(--saxon-blue);
  content: "+";
  font: 400 25px/1 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-saxon-faq details[open] summary::after {
  content: "−";
}

.fo-saxon-faq details p {
  max-width: 62ch;
  padding: 0 38px 28px 0;
  color: #56647a;
  font: 400 16px/1.7 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-saxon-cta {
  padding-block: clamp(92px, 11vw, 164px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgb(65 107 250 / 45%), transparent 42%),
    var(--saxon-ink);
}

.fo-saxon-cta h2 {
  max-width: 13ch;
  margin-inline: auto;
  color: #fff;
}

.fo-saxon-cta > .fo-saxon-shell > p:not(.fo-saxon-kicker) {
  max-width: 50ch;
  margin: 26px auto 0;
  color: #c5cddd;
  font: 400 18px/1.7 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-saxon-button-light {
  border-color: #fff;
  color: var(--saxon-ink);
  background: #fff;
}

.fo-saxon-button-light:hover,
.fo-saxon-button-light:focus-visible {
  color: #fff;
  background: var(--saxon-blue);
}

@media (max-width: 1024px) {
  .fo-saxon-hero-grid,
  .fo-saxon-chapter-grid,
  .fo-saxon-section-heading,
  .fo-saxon-standards-grid,
  .fo-saxon-faq-grid {
    grid-template-columns: 1fr;
  }

  .fo-saxon-hero-record {
    width: min(100%, 620px);
  }

  .fo-saxon-chapter-grid-reverse .fo-saxon-chapter-copy,
  .fo-saxon-chapter-grid-reverse .fo-saxon-product-frame,
  .fo-saxon-section-heading .fo-saxon-kicker {
    grid-row: auto;
    grid-column: auto;
  }

  .fo-saxon-product-frame {
    width: min(100%, 720px);
  }

  .fo-saxon-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fo-saxon-stages li:nth-child(4) {
    border-inline-start: 0;
  }

  .fo-saxon-stages li:nth-child(n + 4) {
    border-top: 1px solid var(--saxon-line);
  }

  .fo-saxon-section-heading {
    align-items: start;
  }

  .fo-saxon-module {
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  }

  .fo-saxon-standards-copy {
    padding: 36px 0 0;
    border-block-start: 1px solid rgb(255 255 255 / 22%);
    border-inline-start: 0;
  }
}

@media (max-width: 767px) {
  .fo-saxon-shell {
    width: min(100% - 32px, 1320px);
  }

  .fo-saxon-hero {
    padding-block: 72px 80px;
    background: linear-gradient(155deg, #fff 0 64%, #f3f6ff 64% 100%);
  }

  .fo-saxon-hero-grid,
  .fo-saxon-chapter-grid {
    gap: 46px;
  }

  .fo-saxon-hero h1 {
    font-size: clamp(62px, 21vw, 92px);
  }

  .fo-saxon-hero-intro {
    padding-inline-start: 18px;
  }

  .fo-saxon-hero-intro p {
    font-size: 17px;
    line-height: 1.65;
  }

  .fo-saxon-hero-record {
    padding: 28px;
    box-shadow: 10px 10px 0 rgb(65 107 250 / 9%);
  }

  .fo-saxon-chapter,
  .fo-saxon-inside,
  .fo-saxon-standards,
  .fo-saxon-practices,
  .fo-saxon-faq {
    padding-block: 76px;
  }

  .fo-saxon-chapter h2,
  .fo-saxon-lifecycle h2,
  .fo-saxon-section-heading h2,
  .fo-saxon-standards h2,
  .fo-saxon-practices h2,
  .fo-saxon-faq h2,
  .fo-saxon-cta h2 {
    font-size: clamp(40px, 13vw, 58px);
  }

  .fo-saxon-product-frame {
    padding: 8px;
    box-shadow: 10px 10px 0 rgb(16 33 63 / 8%);
  }

  .fo-saxon-product-frame-dark {
    box-shadow: 10px 10px 0 rgb(65 107 250 / 30%);
  }

  .fo-saxon-stages {
    grid-template-columns: 1fr 1fr;
  }

  .fo-saxon-stages li:nth-child(odd) {
    border-inline-start: 0;
  }

  .fo-saxon-stages li:nth-child(even) {
    border-inline-start: 1px solid var(--saxon-line);
  }

  .fo-saxon-stages li:nth-child(n + 3) {
    border-top: 1px solid var(--saxon-line);
  }

  .fo-saxon-module,
  .fo-saxon-module-reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .fo-saxon-module-reverse > div,
  .fo-saxon-module-reverse > img {
    grid-row: auto;
    grid-column: auto;
  }

  .fo-saxon-module-index {
    margin-block-end: 36px;
  }

  .fo-saxon-practice-links {
    grid-template-columns: 1fr;
  }

  .fo-saxon-practice-links a:nth-child(odd),
  .fo-saxon-practice-links a:nth-child(even) {
    padding-inline: 4px;
    border-inline-start: 0;
  }

  .fo-saxon-cta {
    padding-block: 88px;
  }
}

/* Legal pages use warm editorial surfaces and blue/navy emphasis. The body
 * hook is intentionally narrow so healthcare can carry a genuinely different
 * teal/mint language without changing shared components or route behavior. */
.fo-legal-theme {
  background: var(--fo-legal-paper, #faf9f5);
}

.fo-legal-theme .fo-brand-hero .fo-eyebrow .elementor-heading-title {
  border-color: rgb(42 57 144 / 22%);
  color: var(--fo-navy-dark, #1e2a6e);
  background: rgb(255 255 255 / 62%);
}

.fo-legal-theme .fo-brand-hero .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
  max-width: 1180px;
  color: #0d2344;
  font-size: clamp(62px, 5.8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

.fo-legal-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(calc(100% - 60px), 1400px);
  margin: clamp(44px, 5vw, 72px) auto;
  overflow: hidden;
  border: 1px solid rgb(30 42 110 / 14%);
  border-radius: 22px;
  background: rgb(30 42 110 / 12%);
  box-shadow: 0 22px 60px rgb(30 42 110 / 8%);
}

.fo-legal-proof-strip > div {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: clamp(24px, 2.7vw, 38px);
  background: var(--fo-legal-paper, #faf9f5);
}

.fo-legal-proof-strip strong {
  color: var(--fo-navy-dark, #1e2a6e);
  font: 650 17px/1.25 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-legal-proof-strip span {
  color: #566078;
  font: 400 15px/1.5 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-legal-proof-strip a {
  color: var(--fo-brand-dark, #3451db);
  font-weight: 650;
  text-underline-offset: 3px;
}

.fo-legal-theme .fo-practice-areas > .elementor-element-0615e71 {
  background-color: var(--fo-legal-paper-strong, #f3f1eb) !important;
}

/* Elective Medicine pages carry a quieter clinical palette: deep teal for decisions,
 * pale mint for working surfaces, and navy for shared brand continuity. The
 * existing page structure stays intact so every interaction and route keeps
 * the same behavior as the proven static site. */
.fo-healthcare-theme {
  --fo-accent: var(--fo-healthcare-teal-dark, #0b7c72);
  --fo-brand: var(--fo-healthcare-teal, #0d9488);
  --fo-brand-light: #14a89c;
  --fo-brand-dark: var(--fo-healthcare-teal-dark, #0b7c72);
  --e-global-color-primary: var(--fo-healthcare-teal-dark, #0b7c72);
  --e-global-color-accent: var(--fo-healthcare-teal, #0d9488);
  background: var(--fo-healthcare-mint, #f3faf8);
}

.fo-healthcare-theme :focus-visible {
  outline-color: var(--fo-healthcare-teal-dark, #0b7c72);
}

.fo-healthcare-theme main .elementor-button {
  border-color: var(--fo-healthcare-teal-dark, #0b7c72) !important;
  background-color: var(--fo-healthcare-teal-dark, #0b7c72) !important;
}

.fo-healthcare-theme main .elementor-button:hover,
.fo-healthcare-theme main .elementor-button:focus-visible {
  border-color: #075e57 !important;
  background-color: #075e57 !important;
}

.fo-healthcare-theme .fo-brand-hero .fo-eyebrow .elementor-heading-title {
  border-color: rgb(13 148 136 / 25%);
  color: var(--fo-healthcare-teal-dark, #0b7c72);
  background: rgb(255 255 255 / 68%);
}

.fo-healthcare-theme .fo-brand-hero .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
  max-width: 1160px;
  color: #0d2344;
  font-size: clamp(60px, 5.6vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

.fo-healthcare-theme .fo-brand-hero .fo-hero-copy h1 span {
  color: var(--fo-healthcare-teal-dark, #0b7c72) !important;
  font-style: italic;
}

/* The captured legal CTA blue (#416bfa) lands just below WCAG AA for the
 * 15px white button label (4.46:1). This adjacent brand shade clears the
 * threshold without changing the visual language. */
.fo-legal-theme .outer-come-bg.outer-come-bg:not(.outer-come-bg-two) .elementor-button.elementor-button-link {
  border-color: #3f65f0 !important;
  background-color: #3f65f0 !important;
  color: #fff !important;
}

.fo-legal-theme .outer-come-bg.outer-come-bg:not(.outer-come-bg-two) .elementor-button.elementor-button-link .elementor-button-text {
  color: #fff !important;
}

/* Captured Elementor body/link colors narrowly miss AA on the site's soft
 * gray surfaces. Keep body copy calm but decisively readable. */
.fo-practice-page .fo-pillars .elementor-widget-text-editor p {
  color: #4b5563 !important;
}

.fo-legal-theme .elementor-widget-text-editor a:not(.elementor-button) {
  color: #3458d4;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.fo-healthcare-theme .outer-come-bg .elementor-button,
.fo-healthcare-theme .fo-brand-hero .elementor-button {
  border-color: var(--fo-healthcare-teal-dark, #0b7c72) !important;
  background-color: var(--fo-healthcare-teal-dark, #0b7c72) !important;
  color: #fff !important;
}

.fo-healthcare-theme .outer-come-bg .elementor-button:hover,
.fo-healthcare-theme .outer-come-bg .elementor-button:focus-visible,
.fo-healthcare-theme .fo-brand-hero .elementor-button:hover,
.fo-healthcare-theme .fo-brand-hero .elementor-button:focus-visible {
  border-color: #075e57 !important;
  background-color: #075e57 !important;
}

.fo-healthcare-theme .outer-come-bg .elementor-button svg path,
.fo-healthcare-theme .fo-brand-hero .elementor-button svg path {
  fill: currentcolor !important;
}

.fo-healthcare-theme .fo-compliance {
  gap: 10px;
  margin-block-start: 6px;
}

.fo-healthcare-theme .fo-compliance .fo-eyebrow .elementor-heading-title {
  border: 1px solid rgb(13 148 136 / 24%);
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
  color: #315c58;
}

.fo-healthcare-theme .fo-journey,
.fo-healthcare-theme .fo-healthcare-practices > .elementor-element-0615e71 {
  background-color: var(--fo-healthcare-mint-strong, #e7f4f0) !important;
}

.fo-healthcare-theme .fo-section-title h2,
.fo-healthcare-theme .fo-spotlight-text h2,
.fo-healthcare-theme .fo-pillars h3 {
  color: #163c3a;
}

.fo-healthcare-theme .fo-pillars > .e-con,
.fo-healthcare-theme .fo-colette-pair > .e-con,
.fo-healthcare-theme .fo-stage-grid > .e-con {
  border-color: rgb(13 148 136 / 14%);
  box-shadow: 0 18px 44px rgb(13 94 87 / 7%);
}

.fo-healthcare-theme .fo-fine-print a,
.fo-healthcare-theme .elementor-widget-text-editor a {
  color: var(--fo-healthcare-teal-dark, #0b7c72);
  text-decoration-color: rgb(13 148 136 / 38%);
}

.fo-healthcare-theme .elementor-element-59bea6f .elementor-element-ed6fcde {
  background: linear-gradient(125deg, #0b7c72 0%, #164e63 100%) !important;
}

.fo-healthcare-theme .elementor-element-59bea6f .elementor-element-ed6fcde h2,
.fo-healthcare-theme .elementor-element-59bea6f .elementor-element-ed6fcde p {
  color: #fff;
}

.fo-healthcare-product-page .elementor-element-41fdf1d {
  background-color: var(--fo-healthcare-mint, #f3faf8) !important;
}

.fo-healthcare-product-page .elementor-element-41fdf1d h1 span {
  color: var(--fo-healthcare-teal-dark, #0b7c72) !important;
}

.fo-healthcare-product-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-block-start: 22px;
  font: 650 15px/1.3 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-healthcare-product-actions a {
  min-height: 46px;
  color: var(--fo-healthcare-teal-dark, #0b7c72);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fo-healthcare-product-actions .fo-healthcare-product-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--fo-healthcare-teal-dark, #0b7c72);
  color: #fff;
  text-decoration: none;
}

/* A few captured product-page text widgets carry hard-coded legal blue. The
 * healthcare theme replaces those isolated values with a darker teal that
 * clears AA against the mint and gray surfaces. */
.fo-healthcare-product-page .elementor-element-459f31e,
.fo-healthcare-product-page a[href="/trust/"] {
  color: #086b65 !important;
}

.fo-healthcare-product-page a[href="/trust/"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The source blue is fractionally under AA at the header's 15px type. Use the
 * slightly deeper interaction blue for both sides of the primary pair. */
.fo-header-desktop-login .elementor-button {
  color: #3156d8 !important;
}

.fo-header-desktop-demo .elementor-button {
  background-color: #3156d8 !important;
}

/* The clinical distinction begins below the shared chrome. Keeping the header
 * and footer in the established blue system avoids a half-blue, half-teal
 * brand treatment; solid buttons always carry a high-contrast white label. */
.fo-healthcare-theme .elementor-location-header,
.fo-healthcare-theme .fo-footer {
  --fo-brand: #416bfa;
  --fo-brand-dark: #3156d8;
  --e-global-color-primary: #3156d8;
  --e-global-color-accent: #416bfa;
}

.fo-healthcare-theme .elementor-location-header .elementor-button,
.fo-healthcare-theme .fo-header-desktop-login .elementor-button {
  border-color: #3156d8 !important;
  background-color: #3156d8 !important;
  color: #fff !important;
}

.fo-healthcare-theme .elementor-location-header .elementor-button .elementor-button-text {
  color: #fff !important;
}

.fo-healthcare-theme .elementor-location-header .elementor-button:hover,
.fo-healthcare-theme .elementor-location-header .elementor-button:focus-visible {
  border-color: #2446bd !important;
  background-color: #2446bd !important;
}

/* Resource-card timestamps were inherited at #979797, which is too faint on
 * the near-white cards. Keep them quiet without sacrificing legibility. */
.fo-resource-hub .elementor-widget-heading h2:has(small) {
  color: #5f6673 !important;
}

.fo-resource-hub .e-n-tab-title[aria-selected="true"] {
  background: #3156d8 !important;
}

/* New hub pages reuse captured text widgets whose legacy gray and link blue
 * sit just below AA. Scope the stronger tones to the affected hub content. */
.fo-platform .elementor-element-a98d408 .elementor-element-1cbabd7,
.fo-case-studies .elementor-element-40fc6d8,
.fo-case-studies .elementor-element-1cbabd7 {
  color: #5f6673 !important;
}

.fo-platform p > a {
  color: #3156d8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fo-platform .fo-story-role {
  color: #5f6673 !important;
}

.fo-healthcare-product-page .elementor-element-34f68c8 img {
  display: block;
  width: 100%;
  max-height: min(38vw, 500px);
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 767px) {
  .fo-healthcare-product-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .fo-healthcare-product-actions a {
    display: inline-flex;
    align-items: center;
  }

  .fo-healthcare-product-page .elementor-element-34f68c8 img {
    max-height: 280px;
  }
}

/* The captured cards used #777 on #f9f9f9, which misses AA by a small but real
 * margin. These audience hubs are already being intentionally redesigned, so
 * use the stronger body tone here rather than carrying that legacy debt into
 * the new experience. */
.fo-home .fo-pillars .elementor-widget-text-editor,
.fo-legal-theme .fo-pillars .elementor-widget-text-editor,
.fo-home .elementor-element-40fc6d8.elementor-widget-text-editor,
.fo-home .elementor-element-15e3165.elementor-widget-text-editor,
.fo-legal-theme .fo-story-role.elementor-widget-text-editor {
  color: #566078;
}

.fo-home .elementor-element.elementor-element-de67a9e.elementor-widget-button .elementor-button {
  background-color: var(--fo-brand-dark, #3451db);
}

.fo-legal-theme .fo-fine-print a {
  color: #294fcf;
}

.fo-home .elementor-element-40fc6d8.elementor-widget-text-editor p,
.fo-home .elementor-element-15e3165.elementor-widget-text-editor p,
.fo-legal-theme .fo-story-role.elementor-widget-text-editor p {
  color: #566078;
}

@media (min-width: 768px) and (max-height: 820px) {
  .fo-home-gateway-page .fo-brand-hero.fo-brand-hero {
    --padding-top: 22px;
    --padding-bottom: 18px;
  }

  .fo-home-gateway-page .fo-home-hero .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(58px, 5.4vw, 78px);
  }

  .fo-home-audience-card {
    padding: 15px 20px;
  }

  .fo-home-audience-links {
    margin-block-start: 10px;
  }
}

@media (max-width: 767px) {
  /* Astra's archive row keeps a -7.5px desktop gutter on each side at phone
   * widths, making the blog archive seven pixels wider than the viewport. */
  .archive.category-blog .ast-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .fo-home-gateway-page .fo-brand-hero.fo-brand-hero {
    min-height: calc(100vh - 72px);
    min-height: calc(100svh - 72px);
    --padding-top: 18px;
    --padding-bottom: 18px;
  }

  .fo-home-gateway-page .fo-brand-hero.fo-brand-hero::before {
    inset-block-start: -72px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000 52%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, #000 52%, #000 84%, transparent 100%);
  }

  .fo-home-gateway-page .fo-home-hero .fo-hero-copy {
    gap: 12px;
  }

  .fo-home-gateway-page .fo-home-hero .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(40px, 10.8vw, 46px);
    line-height: 0.93;
  }

  .fo-home-gateway-page .fo-home-hero .fo-hero-copy > .elementor-widget-text-editor {
    font-size: 16px;
    line-height: 1.4;
  }

  .fo-home-audience-gateway,
  .fo-legal-proof-strip {
    grid-template-columns: 1fr;
  }

  .fo-home-audience-card {
    padding: 14px 18px;
    border-radius: 16px;
  }

  .fo-home-audience-card h2 {
    font-size: 24px;
  }

  .fo-home-audience-links {
    justify-content: space-between;
    gap: 8px 14px;
    margin-block-start: 8px;
  }

  .fo-home-audience-links a {
    min-height: 40px;
    font-size: 13px;
  }

  .fo-home-audience-primary {
    padding: 10px 14px;
  }

  .fo-legal-theme .fo-brand-hero .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(40px, 11vw, 46px);
    line-height: 0.92;
  }

  .fo-legal-theme .fo-brand-hero.fo-brand-hero {
    --padding-top: 30px;
    --padding-bottom: 30px;
  }

  .fo-healthcare-theme .fo-brand-hero .fo-hero-copy .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(40px, 10.8vw, 46px);
    line-height: 0.94;
  }

  .fo-healthcare-theme .fo-brand-hero.fo-brand-hero {
    --padding-top: 30px;
    --padding-bottom: 30px;
  }

  .fo-legal-proof-strip {
    width: calc(100% - 36px);
    margin-block: 36px;
  }
}

/* -------------------------------- homepage customer proof strip */

/* The restored customer-logo asset is 1472px wide, but Elementor's kit caps
   boxed containers at 1400px. Give this homepage-only band the asset's natural
   ceiling while retaining the container's 15px responsive gutters. */
.home .elementor-7 .fo-home-trust.fo-home-trust {
  --content-width: 1472px;
}

/* Keep the proof statement at section-heading scale without inheriting the
   kit's fixed 55px h2 on a 390px screen. The explicit steps preserve a clear
   hierarchy and avoid a narrow, multi-line mobile block. */
.home .elementor-7 .fo-home-trust .fo-home-trust-title.elementor-element h2.elementor-heading-title {
  font-size: 58px;
  line-height: 1.05;
  text-align: center;
}

.home .elementor-7 .fo-home-trust .fo-home-logo-strip {
  position: relative;
  width: 100%;
  max-width: 1472px;
  align-self: center;
}

.home .elementor-7 .fo-home-trust .fo-video-proof--rail {
  padding-block: clamp(24px, 3vw, 40px) clamp(18px, 2vw, 30px);
  width: 100%;
}

.home .elementor-7 .fo-home-trust .fo-home-logo-grid {
  display: block;
  width: 100%;
  height: auto;
}

.fo-home-logo-replacement {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 58.3333%;
  display: flex;
  width: 16.6667%;
  align-items: center;
  justify-content: center;
  padding-inline: 0.8%;
  background: #fff;
}

.home .elementor-7 .fo-home-trust .fo-home-logo-replacement img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.62;
  filter: grayscale(1);
}

@media (max-width: 1100px) {
  .home .elementor-7 .fo-home-trust .fo-home-trust-title.elementor-element h2.elementor-heading-title {
    font-size: 48px;
  }
}

@media (max-width: 767px) {
  .home .elementor-7 .fo-home-trust .fo-home-trust-title.elementor-element h2.elementor-heading-title {
    font-size: 36px;
  }

  .fo-home-logo-replacement {
    padding-inline: 0.4%;
  }
}

/* Product-led proof on the homepage. The published product screenshots are
 * shown before the persona/product naming layer so buyers can understand the
 * work itself first. This is intentionally a quiet editorial section rather
 * than another Elementor card grid: fewer ornaments, stronger hierarchy. */
.fo-home-product-proof {
  padding: clamp(72px, 8vw, 124px) 30px;
  background: #f4f6fb;
  color: #152044;
}

.fo-home-product-proof-inner {
  width: min(100%, 1400px);
  margin-inline: auto;
}

.fo-home-product-proof-header {
  width: min(100%, 850px);
  margin: 0 auto clamp(38px, 5vw, 64px);
  text-align: center;
}

.fo-home-product-proof-eyebrow,
.fo-home-product-card-label {
  margin: 0 0 12px;
  color: #345be0;
  font: 700 13px/1.3 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fo-home-product-proof-header h2 {
  margin: 0;
  color: #152044;
  font: 300 clamp(42px, 4.8vw, 68px)/0.98 var(--fo-font-display, "Yrsa", Georgia, serif);
  text-wrap: balance;
}

.fo-home-product-proof-header > p:last-child {
  width: min(100%, 700px);
  margin: 22px auto 0;
  color: #48536f;
  font: 400 clamp(17px, 1.4vw, 20px)/1.6 var(--fo-font-sans, "Inter", sans-serif);
  text-wrap: pretty;
}

.fo-home-product-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 38px);
}

.fo-home-product-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgb(21 32 68 / 12%);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(21 32 68 / 9%);
}

.fo-home-product-card figure {
  overflow: hidden;
  aspect-ratio: 1.72 / 1;
  margin: 0;
  border-bottom: 1px solid rgb(21 32 68 / 10%);
  background: #e6e8ee;
}

.fo-home-product-card figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.fo-home-product-card-copy {
  padding: clamp(26px, 3.2vw, 42px);
}

.fo-home-product-card-copy h3 {
  margin: 0 0 14px;
  color: #152044;
  font: 400 clamp(30px, 2.8vw, 42px)/1.04 var(--fo-font-display, "Yrsa", Georgia, serif);
  text-wrap: balance;
}

.fo-home-product-card-copy > p:not(.fo-home-product-card-label) {
  margin: 0 0 24px;
  color: #4a556f;
  font: 400 17px/1.62 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-home-product-card-copy a,
.fo-home-product-proof-note a {
  color: #294fcf;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* The right-hand product card is the healthcare entry point. Carry its
 * mint/teal vocabulary through the proof section so the two audiences remain
 * visually distinct after the opening gateway. */
.fo-home-product-card:nth-child(2) {
  border-color: rgb(14 125 119 / 20%);
  background: #f4fbf9;
  box-shadow: 0 24px 70px rgb(14 125 119 / 10%);
}

.fo-home-product-card:nth-child(2) figure {
  border-bottom-color: rgb(14 125 119 / 14%);
  background: #dff3ed;
}

.fo-home-product-card:nth-child(2) .fo-home-product-card-label,
.fo-home-product-card:nth-child(2) a {
  color: #0e7d77;
}

.fo-home-product-proof-note {
  margin: 30px 0 0;
  color: #4a556f;
  font: 400 16px/1.5 var(--fo-font-sans, "Inter", sans-serif);
  text-align: center;
}

@media (max-width: 820px) {
  .fo-home-product-proof-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .fo-home-product-proof {
    padding-inline: 18px;
  }

  .fo-home-product-card {
    border-radius: 18px;
  }
}

/* Trust commitments -------------------------------------------------------
 * Turn the migrated text islands into compact, scannable evidence rows. The
 * copy and claims are unchanged; only their hierarchy and nearby proof links
 * are strengthened. */
.fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) {
  padding-block: 14px !important;
  background: #fff !important;
}

.fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) > .e-con-inner {
  border: 1px solid rgb(14 32 70 / 12%);
  border-radius: 24px;
  background: #f7f8fc;
  box-shadow: 0 18px 44px rgb(14 32 70 / 7%);
}

.fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) .elementor-element-bed9518 {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  gap: 12px 56px;
  padding: 44px 48px;
  text-align: left;
}

.fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) .fo-section-title {
  grid-row: 1 / span 4;
  align-self: start;
}

.fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) .fo-section-title h2 {
  text-align: left;
}

.fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) .elementor-widget-text-editor {
  grid-column: 2;
  max-width: 760px;
}

.fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) .elementor-widget-text-editor p {
  margin-block: 0 10px;
  font-size: 15px;
  line-height: 1.55;
}

.fo-case-studies [hidden] {
  display: none !important;
}

/* Case-study hub -----------------------------------------------------------
 * A single orientation strip immediately follows the hero, so visitors can
 * move directly to written outcomes, featured voices, or the full library.
 * Tight vertical rhythm removes the empty migration gap between sections. */
.fo-case-studies .fo-brand-hero.fo-brand-hero {
  min-height: 0;
  padding-block: clamp(72px, 8vw, 116px);
}

.fo-case-study-nav {
  border-block: 1px solid rgb(18 35 63 / 14%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  width: min(100% - 48px, 1480px);
}

.fo-case-study-nav a {
  align-items: baseline;
  color: var(--fo-navy, #12233f);
  display: flex;
  font: 650 15px/1.35 var(--fo-font-sans, "Inter", sans-serif);
  gap: 12px;
  min-height: 76px;
  padding: 24px clamp(14px, 2vw, 28px);
  text-decoration: none;
}

.fo-case-study-nav a + a {
  border-inline-start: 1px solid rgb(18 35 63 / 14%);
}

.fo-case-study-nav a:hover,
.fo-case-study-nav a:focus-visible {
  background: #f3f6ff;
}

.fo-case-study-nav span {
  color: var(--fo-accent, #416bfa);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.fo-case-studies .fo-case-study-proof-grid {
  padding-block: clamp(56px, 7vw, 96px);
}

.fo-case-studies .fo-proof-heading {
  padding-block-start: clamp(52px, 6vw, 86px);
}

.fo-case-studies .fo-proof-heading + .fo-video-proof {
  padding-block-start: clamp(32px, 4vw, 52px);
}

@media (max-width: 900px) {
  .fo-case-study-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fo-case-study-nav a:nth-child(3) {
    border-inline-start: 0;
    border-block-start: 1px solid rgb(18 35 63 / 14%);
  }

  .fo-case-study-nav a:nth-child(4) {
    border-block-start: 1px solid rgb(18 35 63 / 14%);
  }
}

@media (max-width: 560px) {
  .fo-case-study-nav {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 1480px);
  }

  .fo-case-study-nav a + a,
  .fo-case-study-nav a:nth-child(3) {
    border-block-start: 1px solid rgb(18 35 63 / 14%);
    border-inline-start: 0;
  }
}

/* Elective-medicine practice-area pages ------------------------------------
 * These routes share a quiet clinical editorial system: green for the page
 * content, blue for the global chrome, and product evidence beside the claim. */
.fo-clinical-practice {
  background: #fff;
  color: var(--fo-navy, #12233f);
}

.fo-clinical-practice__hero {
  background: linear-gradient(125deg, #effaf6 0%, #f8fbff 62%, #fff 100%);
  padding: clamp(76px, 9vw, 138px) 30px;
}

.fo-clinical-practice__hero-inner,
.fo-clinical-practice__section,
.fo-clinical-practice__cta {
  margin-inline: auto;
  width: min(100%, 1360px);
}

.fo-clinical-practice__hero-inner {
  align-items: center;
  display: grid;
  gap: clamp(42px, 7vw, 104px);
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
}

.fo-clinical-practice__eyebrow {
  color: var(--fo-healthcare-teal-dark, #0e7d77);
  font: 750 12px/1.3 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.13em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.fo-clinical-practice h1 {
  color: var(--fo-navy, #12233f);
  font: 400 clamp(48px, 6vw, 84px)/0.96 var(--fo-font-serif, "Yrsa", serif);
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  max-width: 820px;
  text-wrap: balance;
}

.fo-clinical-practice__lede {
  color: #44546a;
  font: 400 clamp(18px, 1.55vw, 22px)/1.58 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0;
  max-width: 720px;
}

.fo-clinical-practice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-block-start: 34px;
}

.fo-clinical-practice__actions a,
.fo-clinical-practice__cta a {
  background: var(--fo-healthcare-teal-dark, #0e7d77);
  border: 1px solid var(--fo-healthcare-teal-dark, #0e7d77);
  border-radius: 999px;
  color: #fff;
  font: 700 15px/1 var(--fo-font-sans, "Inter", sans-serif);
  padding: 17px 24px;
  text-decoration: none;
}

.fo-clinical-practice__actions a + a {
  background: transparent;
  color: var(--fo-healthcare-teal-dark, #0e7d77);
}

.fo-clinical-practice__proof {
  background: #fff;
  border: 1px solid rgb(14 125 119 / 18%);
  box-shadow: 0 30px 84px rgb(18 35 63 / 12%);
  margin: 0;
  overflow: hidden;
}

.fo-clinical-practice__proof img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  object-position: top left;
  width: 100%;
}

.fo-clinical-practice__proof figcaption {
  padding: 28px 30px 32px;
}

.fo-clinical-practice__proof strong {
  display: block;
  font: 600 27px/1.08 var(--fo-font-serif, "Yrsa", serif);
  margin-block-end: 10px;
}

.fo-clinical-practice__proof span {
  color: #526176;
  font: 400 15px/1.55 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-clinical-practice__section {
  padding: clamp(72px, 8vw, 116px) 30px;
}

.fo-clinical-practice__section-header {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 0.75fr) minmax(340px, 1.25fr);
  margin-block-end: clamp(48px, 6vw, 78px);
}

.fo-clinical-practice__section h2,
.fo-clinical-practice__cta h2 {
  color: var(--fo-navy, #12233f);
  font: 400 clamp(38px, 4.5vw, 64px)/1 var(--fo-font-serif, "Yrsa", serif);
  margin: 0;
  text-wrap: balance;
}

.fo-clinical-practice__section-header p {
  color: #526176;
  font: 400 18px/1.65 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0;
}

.fo-clinical-practice__outcomes {
  border-block: 1px solid rgb(18 35 63 / 14%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fo-clinical-practice__outcome {
  padding: 34px clamp(20px, 3vw, 42px) 38px;
}

.fo-clinical-practice__outcome + .fo-clinical-practice__outcome {
  border-inline-start: 1px solid rgb(18 35 63 / 14%);
}

.fo-clinical-practice__outcome span {
  color: var(--fo-healthcare-teal-dark, #0e7d77);
  font: 700 11px/1 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.12em;
}

.fo-clinical-practice__outcome h3 {
  color: var(--fo-navy, #12233f);
  font: 600 28px/1.08 var(--fo-font-serif, "Yrsa", serif);
  margin: 42px 0 14px;
}

.fo-clinical-practice__outcome p {
  color: #526176;
  font: 400 16px/1.6 var(--fo-font-sans, "Inter", sans-serif);
  margin: 0;
}

.fo-clinical-practice__cta-wrap {
  background: #e8f7f2;
  padding: clamp(64px, 8vw, 108px) 30px;
}

.fo-clinical-practice__cta {
  align-items: center;
  display: flex;
  gap: 44px;
  justify-content: space-between;
}

.fo-clinical-practice__cta h2 {
  max-width: 860px;
}

@media (max-width: 900px) {
  .fo-clinical-practice__hero-inner,
  .fo-clinical-practice__section-header {
    grid-template-columns: 1fr;
  }

  .fo-clinical-practice__outcomes {
    grid-template-columns: 1fr;
  }

  .fo-clinical-practice__outcome + .fo-clinical-practice__outcome {
    border-block-start: 1px solid rgb(18 35 63 / 14%);
    border-inline-start: 0;
  }

  .fo-clinical-practice__cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .fo-clinical-practice__hero,
  .fo-clinical-practice__section,
  .fo-clinical-practice__cta-wrap {
    padding-inline: 18px;
  }
}

@media (max-width: 767px) {
  .fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) .elementor-element-bed9518 {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 28px 24px;
  }

  .fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) .fo-section-title,
  .fo-trust > .elementor-element-7b2658c:not(:has(.fo-compliance)) .elementor-widget-text-editor {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Editorial footer directory -------------------------------------------------
 *
 * The shared footer uses the warm, open visual language of the approved legal
 * concept. Brand, newsletter and all five directory groups stay in one row on
 * wide screens; the groups collapse progressively without changing semantics.
 */
.fo-footer {
  --fo-footer-ink: #292834;
  --fo-footer-muted: #686774;
  --fo-footer-line: #dedbd4;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgb(65 107 250 / 4%), transparent 28%),
    radial-gradient(circle at 8% 70%, rgb(65 107 250 / 3%), transparent 30%),
    #faf9f6;
  color: var(--fo-footer-ink);
}

.fo-footer,
.fo-footer * {
  box-sizing: border-box;
}

.fo-footer-shell {
  width: min(100% - 48px, 1760px);
  margin-inline: auto;
  padding-block: clamp(64px, 6vw, 96px) 28px;
}

.fo-footer a {
  color: inherit;
  text-decoration: none;
}

.fo-footer a:hover {
  color: #3156d8;
}

.fo-footer a:focus-visible {
  border-radius: 3px;
  outline: 3px solid #416bfa;
  outline-offset: 4px;
}

.fo-footer-main {
  display: grid;
  grid-template-columns: minmax(330px, 1.85fr) minmax(0, 4.15fr);
  gap: clamp(48px, 5vw, 92px);
  align-items: start;
  padding: 0 0 clamp(66px, 7vw, 104px);
}

.fo-footer-intro {
  min-width: 0;
}

.fo-footer-brand {
  display: inline-block;
  width: min(100%, 326px);
}

.fo-footer-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.fo-footer-positioning {
  max-width: 36ch;
  margin: 24px 0 32px;
  color: var(--fo-footer-muted);
  font: 400 clamp(16px, 1.15vw, 19px)/1.65 var(--fo-font-sans, "Inter", sans-serif);
  text-wrap: pretty;
}

.fo-footer .fo-footer-intro h2 {
  max-width: 34ch;
  margin: 0 0 16px;
  color: var(--fo-footer-ink);
  font: 650 clamp(17px, 1.2vw, 20px)/1.4 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: -0.012em;
}

.fo-footer-newsletter-form {
  width: min(100%, 430px);
}

.fo-footer-newsletter-form > p {
  margin: 12px 0 0;
  color: #888690;
  font: 400 13px/1.5 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-footer-newsletter-form > p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fo-footer-newsletter-form > .fo-footer-recaptcha-notice {
  margin-top: 4px;
  color: #9997a0;
  font-size: 10px;
  line-height: 1.45;
}

.fo-footer-newsletter-form label.hsfc-FieldLabel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.fo-footer-newsletter-form .hsfc-Step__Content {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch !important;
}

/* HubSpot's configured post-submit rich text carries an inline white color
 * from the legacy dark footer. The current footer is light, so override both
 * the paragraphs and their inline spans to keep the confirmation readable. */
.fo-footer-newsletter-form .hsfc-Step__Content p,
.fo-footer-newsletter-form .hsfc-Step__Content p span {
  color: var(--fo-footer-ink) !important;
}

.fo-footer-newsletter-form .hsfc-Row:has(.hsfc-EmailField) {
  grid-row: 1 !important;
  grid-column: 1 !important;
  margin: 0 !important;
}

.fo-footer-newsletter-form .hsfc-NavigationRow {
  display: contents !important;
}

.fo-footer-newsletter-form .hsfc-NavigationRow__Alerts {
  grid-row: 2 !important;
  grid-column: 1 / -1 !important;
  margin: 8px 0 0 !important;
}

.fo-footer-newsletter-form .hsfc-Step__Content:has(.hsfc-EmailField .hsfc-ErrorAlert) .hsfc-NavigationRow__Alerts {
  display: none !important;
}

.fo-footer-newsletter-form .hsfc-NavigationRow__Buttons {
  grid-row: 1 !important;
  grid-column: 2 !important;
  align-self: start !important;
  height: 52px !important;
}

.fo-footer-newsletter-form .hsfc-Row:has(.hsfc-ReCaptchaV2) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.fo-footer-newsletter-form .grecaptcha-badge {
  visibility: hidden !important;
}

.fo-footer-newsletter-form .hsfc-TextInput {
  min-height: 52px !important;
  border: 1px solid var(--fo-footer-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--fo-footer-ink) !important;
  font: 400 15px/1.3 var(--fo-font-sans, "Inter", sans-serif) !important;
}

.fo-footer-newsletter-form .hsfc-Button {
  min-height: 52px !important;
  margin: 0 !important;
  padding: 13px 20px !important;
  border-radius: 12px !important;
  background: #3156d8 !important;
  color: #fff !important;
  font: 700 14px/1.2 var(--fo-font-sans, "Inter", sans-serif) !important;
}

.fo-healthcare-theme .fo-footer .hsfc-Button {
  background: #3156d8 !important;
  color: #fff !important;
}

.fo-footer-directory {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px clamp(22px, 2.4vw, 46px);
  min-width: 0;
}

.fo-footer-group {
  min-width: 0;
}

.fo-footer-group > summary {
  list-style: none;
  pointer-events: none;
}

.fo-footer-group > summary::-webkit-details-marker {
  display: none;
}

.fo-footer .fo-footer-group h2 {
  margin: 0 0 24px;
  color: var(--fo-footer-ink);
  font: 700 14px/1.3 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.fo-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-footer-list li + li {
  margin-top: 14px;
}

.fo-footer-list a {
  overflow-wrap: anywhere;
  color: var(--fo-footer-muted);
  font: 400 clamp(14px, 1vw, 16px)/1.5 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-footer-disclaimer {
  padding: 34px 0 26px;
  border-top: 1px solid var(--fo-footer-line);
  color: #898792;
  font: 400 13px/1.62 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-footer-disclaimer p {
  max-width: none;
  margin: 0;
}

.fo-footer-utility {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  align-items: center;
  justify-content: space-between;
  padding-top: 0;
  color: #85838e;
  font: 400 14px/1.5 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-footer-utility p {
  margin: 0;
}

.fo-footer-utility nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

@media (max-width: 1024px) {
  .fo-footer-main {
    grid-template-columns: 1fr;
  }

  .fo-footer-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fo-footer-intro {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
    gap: 8px 56px;
    align-items: start;
  }

  .fo-footer-brand,
  .fo-footer-positioning {
    grid-column: 1;
  }

  .fo-footer .fo-footer-intro h2,
  .fo-footer-newsletter-form {
    grid-column: 2;
  }

  .fo-footer .fo-footer-intro h2 {
    grid-row: 1;
    margin-top: 4px;
  }

  .fo-footer-newsletter-form {
    grid-row: 2 / span 2;
  }
}

@media (max-width: 767px) {
  .fo-footer-shell {
    width: min(100% - 32px, 1760px);
    padding-block-start: 58px;
  }

  .fo-footer-main {
    gap: 42px;
    padding-bottom: 52px;
  }

  .fo-footer-intro {
    display: block;
  }

  .fo-footer-brand {
    width: min(100%, 280px);
  }

  .fo-footer-positioning {
    margin-block: 22px 30px;
  }

  .fo-footer-directory {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fo-footer-group {
    border-bottom: 1px solid var(--fo-footer-line);
  }

  .fo-footer-group > summary {
    position: relative;
    min-height: 58px;
    padding: 19px 42px 15px 0;
    cursor: pointer;
    pointer-events: auto;
  }

  .fo-footer-group > summary::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 4px;
    color: #416bfa;
    content: "+";
    font: 400 22px/1 var(--fo-font-sans, "Inter", sans-serif);
    transform: translateY(-50%);
  }

  .fo-footer-group[open] > summary::after {
    content: "−";
  }

  .fo-footer .fo-footer-group > summary h2 {
    margin: 0;
  }

  .fo-footer-group > .fo-footer-list {
    padding: 2px 0 24px;
  }

  .fo-footer-disclaimer {
    padding-top: 28px;
  }

  .fo-footer-utility {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
 * Responsive QA hardening and clinical owner story.
 * ----------------------------------------------------------------------- */

/* Some captured pages place the FAQ outside the Elementor root. Keep the
 * answer panel's padding inside its declared width in either DOM shape. */
.fo-faq > .e-n-accordion > .e-n-accordion-item > .e-con {
  box-sizing: border-box;
  max-width: 100%;
}

.calendly-inline-widget,
.calendly-inline-widget iframe {
  min-width: 0 !important;
  max-width: 100%;
  width: 100% !important;
}

.fo-clinic-owner-story {
  padding: clamp(72px, 8vw, 126px) 24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(17, 131, 116, 0.14), transparent 30%),
    #f3f8f7;
}

.fo-clinic-owner-story__inner {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: start;
  width: min(100%, 1180px);
  margin: 0 auto;
}

.fo-clinic-owner-story__eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 -18px;
  color: #087f72;
  font: 700 13px/1.3 var(--fo-font-sans, "Inter", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fo-clinic-owner-story h2 {
  margin: 0;
  color: #102442;
  font: 400 clamp(38px, 4.3vw, 64px)/0.98 var(--fo-font-display, "Yrsa", Georgia, serif);
  letter-spacing: -0.025em;
}

.fo-clinic-owner-story blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  color: #40516c;
  font: 400 clamp(18px, 1.5vw, 22px)/1.55 var(--fo-font-sans, "Inter", sans-serif);
}

.fo-clinic-owner-story blockquote p {
  margin: 0;
}

.fo-clinic-owner-story blockquote p + p {
  margin-top: 1em;
}

.fo-clinic-owner-story blockquote footer {
  margin-top: 28px;
  color: #102442;
  font: 700 15px/1.4 var(--fo-font-sans, "Inter", sans-serif);
}

@media (max-width: 767px) {
  /* The captured post widget sizes the link at 16px but its visible label at
   * 20px, clipping “Previous.” Keep both measurements in agreement. */
  body.single-post .elementor-widget-post-navigation.elementor-element .elementor-post-navigation span.post-navigation__prev--label,
  body.single-post .elementor-widget-post-navigation.elementor-element .elementor-post-navigation span.post-navigation__next--label {
    font-size: 16px;
    line-height: 1.4;
  }

  body.single-post .elementor-widget-post-navigation.elementor-element,
  body.single-post .elementor-widget-post-navigation.elementor-element .elementor-post-navigation {
    width: 100%;
    max-width: 100%;
  }

  /* Elementor's page kit gives bare h3 elements a fixed 50px size on
   * /meet-saxon/. Match that selector's specificity so proof-card titles keep
   * their compact mobile scale. */
  .elementor-kit-6 h3.fo-video-card__title {
    font-size: clamp(22px, 7vw, 28px);
    line-height: 1.1;
  }

  /* Blog articles retain a deliberately narrow reading measure on phones.
   * Scale display subheads with that column so long brand and product names
   * cannot create page-level horizontal scroll. */
  body.single-post.elementor-kit-6 .elementor-widget-text-editor.elementor-element h2 {
    font-size: clamp(28px, 9vw, 34px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  /* Imported article tables can arrive with a chat-thread minimum width.
   * Contain that utility inside the reading column and let cell copy wrap. */
  body.single-post [class^="_tableContainer_"],
  body.single-post [class*=" _tableContainer_"] {
    max-width: 100%;
    overflow-x: auto;
  }

  body.single-post [class^="_tableWrapper_"],
  body.single-post [class*=" _tableWrapper_"] {
    width: 100%;
    max-width: 100%;
  }

  body.single-post table[class*="min-w-(--thread-content-width)"] {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  body.single-post table[class*="min-w-(--thread-content-width)"] :is(th, td) {
    overflow-wrap: anywhere;
  }

  .fo-clinic-owner-story {
    padding-inline: 20px;
  }

  .fo-clinic-owner-story__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .fo-clinic-owner-story__eyebrow {
    grid-column: auto;
    margin-bottom: -10px;
  }
}