/*
 * 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.
 */

/* ----------------------------------------------------------------- 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). `forwards` keeps the final
 * transparent frame until the class is stripped. 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 {
    opacity: 0;
    translate: 0 -8px;
  }
}

@keyframes fo-menu-out {
  to {
    opacity: 0;
    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;
}

/* ---------------------------------------------------------------- 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;
}

[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);
}

/* 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 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: 110px;
  }
}

/* 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;
  }
}

/* ------------------------------------------- /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 Healthcare 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 /mental-health-professionals/ 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;
}