/* ==========================================================================
   LLP Counselling — Theme Stylesheet
   Tokens and styles transcribed 1:1 from Figma Make (figma-make/src/styles/)
   Do NOT hand-tune hex values here. Change tokens in :root and nothing else.
   ========================================================================== */

/* ---------- Fonts ---------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Light.ttf") format("truetype");
  font-style: normal; font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Medium.ttf") format("truetype");
  font-style: normal; font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
  font-style: normal; font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Italic.ttf") format("truetype");
  font-style: italic; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Forum";
  src: url("../fonts/forum/Forum-Regular.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}

/* ---------- Tokens --------------------------------------------------------- */
:root {
  /* Brand (warm sage) — from Figma Make theme.css */
  --brand-50:  #EEF6F0;
  --brand-100: #D2EAD9;
  --brand-200: #AECDB7;
  --brand-300: #82B193;
  --brand-400: #5B956E;
  --brand-500: #427A55;
  --brand-600: #336445;
  --brand-700: #3B6B4A;
  --brand-800: #2D5339;
  --brand-900: #1E3826;

  /* Stone — Tailwind stone-*, used everywhere in Make */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;

  /* Amber — crisis note */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-800: #92400E;
  --amber-900: #78350F;

  /* Red — emergency/000 callout */
  --red-50:  #FEF2F2;
  --red-200: #FECACA;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;

  /* Radii — from Make (--radius: 0.625rem base) */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px  — buttons */
  --radius-lg: 0.625rem;   /* 10px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px — cards */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);

  /* Containers */
  --container-3xl: 768px;
  --container-4xl: 896px;
  --container-5xl: 1024px;
  --container-6xl: 1152px;
  --container-7xl: 1280px;

  /* Typography scale (fluid) — matches Make @layer base */
  --h1-size: clamp(2.25rem, 4vw + 0.75rem, 3.75rem);   /* 36 → 60 */
  --h2-size: clamp(1.625rem, 2.5vw + 0.5rem, 2.5rem);  /* 26 → 40 */
  --h3-size: clamp(1.2rem, 1.5vw + 0.25rem, 1.625rem); /* 19 → 26 */
  --h4-size: 1.125rem;                                  /* 18 */

  /* Editor-friendly WP variable bridges (so theme.json color slugs match) */
  --wp--preset--color--brand: var(--brand-700);
  --wp--preset--color--brand-dark: var(--brand-900);
  --wp--preset--color--surface: #ffffff;
  --wp--preset--color--text: var(--stone-800);
  --wp--preset--color--muted: var(--stone-600);
}

/* ---------- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--stone-50);
  color: var(--stone-800);
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* WP block themes emit --wp--style--block-gap (default 24px) which adds a
   margin between the header / main / footer template parts. That gap shows
   through as the body background. Kill it at the root layout only; inner
   blocks are laid out by hand-written CSS so they don't need it. */
.wp-site-blocks > * + * { margin-block-start: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0; }
p + p { margin-top: 1em; }

/* Enforce 16px min text (Make rule) */
p, li, td, th, caption, figcaption, blockquote, small { font-size: max(1rem, 16px); }

/* ---------- Typography ----------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: "Forum", Georgia, serif;
  font-weight: 500;
  color: var(--stone-800);
}
h1 { font-size: var(--h1-size); line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: var(--h2-size); line-height: 1.2;  letter-spacing: -0.015em; }
h3 { font-size: var(--h3-size); line-height: 1.3;  letter-spacing: -0.01em; }
h4 { font-size: var(--h4-size); line-height: 1.4;  letter-spacing: -0.005em; }

/* ---------- Skip link ------------------------------------------------------ */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand-900); color: #fff;
  padding: 0.75rem 1rem; z-index: 9999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Layout primitives --------------------------------------------- */
.llp-page { min-height: 100vh; background: var(--stone-50); }
.llp-main { flex: 1 1 auto; min-width: 0; }

.llp-container {
  width: 100%;
  max-width: var(--container-6xl);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .llp-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .llp-container { padding-inline: 2rem; } }

.llp-container--3xl { max-width: var(--container-3xl); }
.llp-container--4xl { max-width: var(--container-4xl); }
.llp-container--5xl { max-width: var(--container-5xl); }
.llp-container--7xl { max-width: var(--container-7xl); }

/* Section backgrounds */
.llp-section { padding-block: 2.5rem; }
.llp-section--sm { padding-block: 2rem; }
@media (min-width: 768px) {
  .llp-section { padding-block: 4rem; }
  .llp-section--sm { padding-block: 3.5rem; }
}
.llp-section--bg-white   { background: #fff; }
.llp-section--bg-stone   { background: var(--stone-50); }
.llp-section--bg-brand   { background: var(--brand-50); }

/* Grid helpers (for page content) */
.llp-grid { display: grid; gap: 1.5rem; }
.llp-grid--2 { grid-template-columns: 1fr; }
.llp-grid--3 { grid-template-columns: 1fr; }
.llp-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .llp-grid--2 { grid-template-columns: 1fr 1fr; }
  .llp-grid--3 { grid-template-columns: 1fr 1fr; }
  .llp-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .llp-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .llp-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .llp-grid--hero { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
}

/* ---------- Buttons -------------------------------------------------------- */
.llp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1rem; font-weight: 500; line-height: 1.5;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.llp-btn--primary { background: var(--brand-700); color: #fff; }
.llp-btn--primary:hover { background: var(--brand-800); }

.llp-btn--secondary {
  background: transparent; color: var(--brand-700);
  border-color: var(--brand-200);
}
.llp-btn--secondary:hover { background: var(--brand-50); color: var(--brand-800); }

.llp-btn--white { background: #fff; color: var(--brand-700); }
.llp-btn--white:hover { background: var(--stone-100); }

.llp-btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

.llp-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--brand-700); font-weight: 500; font-size: 0.875rem;
  transition: color 150ms ease;
}
.llp-link:hover { color: var(--brand-800); }
/* The global `svg { display: block }` rule on line 132 means that when
 * `p .llp-link` (further down) flips a CTA link to `display: inline`, the
 * SVG icon breaks to its own line and left-aligns. Force inline-block so
 * the icon stays next to the text regardless of the link's display mode. */
.llp-link svg { width: 1rem; height: 1rem; display: inline-block; vertical-align: -0.15em; }

/* ---------- Eyebrow / kicker --------------------------------------------- */
.llp-eyebrow {
  color: var(--brand-600);
  font-size: 0.875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.llp-eyebrow--small { font-size: 0.75rem; letter-spacing: 0.1em; }

/* ---------- Header --------------------------------------------------------- */
.llp-header {
  background: #fff;
  border-bottom: 1px solid var(--stone-200);
  position: sticky; top: 0; z-index: 50;
}
.llp-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.llp-header__logo {
  display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0;
  color: inherit;
}
.llp-header__logo img { width: 56px; height: 56px; object-fit: contain; }
.llp-header__brand-name {
  font-family: "Forum", Georgia, serif;
  font-weight: 500; line-height: 1.1;
  color: var(--stone-800);
  font-size: 17px;
}
.llp-header__brand-sub {
  display: block;
  color: var(--stone-500); line-height: 1.1;
  font-size: 12px;
}
@media (min-width: 640px) {
  .llp-header__brand-name { font-size: 20px; }
  .llp-header__brand-sub  { font-size: 14px; }
}

.llp-nav { display: none; align-items: center; gap: 1.5rem; }
.llp-nav__link {
  color: var(--stone-600); font-size: 0.875rem; font-weight: 500;
  transition: color 150ms ease;
}
.llp-nav__link:hover, .llp-nav__link.is-active { color: var(--brand-700); }

.llp-nav__dropdown { position: relative; }
.llp-nav__dropdown-trigger {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--stone-600); font-size: 0.875rem; font-weight: 500;
  transition: color 150ms ease;
}
.llp-nav__dropdown-trigger svg { width: 0.875rem; height: 0.875rem; transition: transform 200ms ease; }
.llp-nav__dropdown[open] .llp-nav__dropdown-trigger { color: var(--brand-700); }
.llp-nav__dropdown[open] .llp-nav__dropdown-trigger svg { transform: rotate(180deg); }

.llp-nav__dropdown-panel {
  position: absolute; top: calc(100% + 0.75rem); left: 50%;
  transform: translateX(-50%);
  width: 20rem;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  ring: 1px solid var(--stone-200);
  border: 1px solid var(--stone-200);
  overflow: hidden;
  padding: 0;
}
.llp-nav__dropdown-panel::before {
  content: "";
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #fff;
  border-top: 1px solid var(--stone-200); border-left: 1px solid var(--stone-200);
}
.llp-nav__dropdown-item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem; color: var(--stone-700);
  transition: background-color 150ms ease, color 150ms ease;
}
.llp-nav__dropdown-item:hover { background: var(--brand-50); color: var(--brand-700); }
.llp-nav__dropdown-item__icon {
  width: 2rem; height: 2rem; border-radius: var(--radius-md);
  background: var(--brand-100); color: var(--brand-600);
  display: grid; place-items: center; flex-shrink: 0;
}
.llp-nav__dropdown-item:hover .llp-nav__dropdown-item__icon { background: var(--brand-200); color: var(--brand-700); }
.llp-nav__dropdown-item__icon svg { width: 1rem; height: 1rem; }
.llp-nav__dropdown-item__label { font-size: 0.875rem; font-weight: 500; display: block; }
.llp-nav__dropdown-item__desc  { font-size: 0.75rem; color: var(--stone-500); line-height: 1.4; display: block; }

.llp-header__cta {
  display: none; align-items: center; gap: 1.5rem;
}
.llp-header__contact-link {
  color: var(--stone-600); font-size: 0.875rem; font-weight: 500;
  transition: color 150ms ease;
}
.llp-header__contact-link:hover { color: var(--brand-700); }

.llp-header__toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--stone-600);
  border-radius: var(--radius-md);
  transition: color 150ms ease, background-color 150ms ease;
}
.llp-header__toggle:hover { color: var(--brand-700); background: var(--stone-50); }
.llp-header__toggle svg { width: 1.25rem; height: 1.25rem; }
.llp-header__toggle .icon-close { display: none; }
.llp-header[data-mobile-open="true"] .llp-header__toggle .icon-open { display: none; }
.llp-header[data-mobile-open="true"] .llp-header__toggle .icon-close { display: block; }

@media (min-width: 1024px) {
  .llp-nav { display: flex; }
  .llp-header__cta { display: flex; }
  .llp-header__toggle { display: none; }
}

/* Mobile menu */
/* Full-viewport drawer that drops in below the sticky 64px header. The
 * fixed positioning means it covers the page (rather than pushing content
 * down) so the inner column can flex its footer to the bottom on tall
 * phones. body.has-mobile-nav-open locks page scroll while it's open. */
.llp-mobile-menu {
  display: none;
  position: fixed; top: 64px; inset-inline: 0; bottom: 0;
  background: #fff;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.llp-header[data-mobile-open="true"] .llp-mobile-menu { display: block; }
@media (min-width: 1024px) { .llp-mobile-menu { display: none !important; } }

.llp-mobile-menu__inner {
  max-width: var(--container-6xl); margin-inline: auto;
  padding: 1.25rem 1.25rem 2rem;
  display: flex; flex-direction: column; gap: 0.375rem;
  min-height: 100%;
}

/* Top-level link. Larger tap target (~52px) and weightier type so the
 * drawer feels like primary nav, not a dropdown afterthought. */
.llp-mobile-menu__link {
  display: flex; align-items: center;
  padding: 0.875rem 1rem; border-radius: var(--radius-lg);
  color: var(--stone-800); font-size: 1.0625rem; font-weight: 500;
  line-height: 1.3;
  transition: color 150ms ease, background-color 150ms ease;
}
.llp-mobile-menu__link:hover,
.llp-mobile-menu__link:focus-visible { background: var(--stone-50); }
.llp-mobile-menu__link.is-active {
  color: var(--brand-800); background: var(--brand-50); font-weight: 600;
}

/* Submenu group: indent + soft brand wash so the visual nesting is clear
 * without the heavy left-border-rule the previous design used. */
.llp-mobile-menu__group {
  display: flex; flex-direction: column;
  margin: 0.25rem 0.5rem 0.5rem 1rem;
  padding: 0.25rem 0;
  border-left: 2px solid var(--brand-100);
  padding-left: 0.875rem;
}
.llp-mobile-menu__group .llp-mobile-menu__link {
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--stone-700);
}

.llp-mobile-menu__submenu-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0.875rem 1rem; border-radius: var(--radius-lg);
  color: var(--stone-800); font-size: 1.0625rem; font-weight: 500; line-height: 1.3;
  background: transparent;
  transition: color 150ms ease, background-color 150ms ease;
}
.llp-mobile-menu__submenu-trigger:hover,
.llp-mobile-menu__submenu-trigger:focus-visible { background: var(--stone-50); }
.llp-mobile-menu__submenu-trigger svg { width: 1.125rem; height: 1.125rem; opacity: 0.6; }

/* Footer pinned to the bottom of the drawer via margin-top:auto on a
 * flex-column .__inner. Always-visible CTA + lightweight secondary action +
 * the same "Ready when you are" copy used in the sticky bar so editors only
 * maintain one set of strings. */
.llp-mobile-menu__footer {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; flex-direction: column; gap: 0.875rem;
  border-top: 1px solid var(--stone-100);
}
.llp-mobile-menu__cta-meta {
  display: flex; flex-direction: column; gap: 0.125rem; padding-inline: 0.25rem;
}
.llp-mobile-menu__cta-meta-label {
  font-weight: 600; color: var(--brand-800); font-size: 0.9375rem;
}
.llp-mobile-menu__cta-meta-sub {
  color: var(--stone-600); font-size: 0.8125rem;
}
.llp-mobile-menu__footer .llp-btn--primary {
  padding-block: 0.875rem; font-size: 1rem;
}
.llp-mobile-menu__footer-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1rem; border-radius: var(--radius-lg);
  color: var(--brand-700); font-size: 0.9375rem; font-weight: 500;
  border: 1px solid var(--stone-200);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.llp-mobile-menu__footer-secondary:hover,
.llp-mobile-menu__footer-secondary:focus-visible {
  background: var(--stone-50); border-color: var(--stone-300);
}
.llp-mobile-menu__footer-secondary svg { width: 1rem; height: 1rem; opacity: 0.7; }

/* Lock page scroll behind the drawer so swipes don't bleed through. */
body.has-mobile-nav-open { overflow: hidden; }

/* ---------- Halaxy embed ---------------------------------------------------
   When the [llp_halaxy_embed] shortcode renders (i.e. an iframe/HTML snippet
   has been configured in Theme Settings), we hide the fallback placeholder.
   Selector precedence: .llp-halaxy-loaded is a sibling of the fallback, so
   the has() selector hides the fallback when the loaded embed exists.
   ------------------------------------------------------------------------- */
.llp-halaxy-embed:has([data-llp-halaxy-loaded]) [data-llp-halaxy-fallback] {
  display: none;
}
/* Halaxy is cross-origin so we can't auto-fit the iframe to its content
 * (browser security blocks reading inner height). Size it for the common
 * initial state (practitioner+service list) and let the iframe's own
 * scrollbar handle the taller calendar state — better than a tall empty
 * frame when the inner content is short. */
.llp-halaxy-iframe {
  width: 100%;
  min-height: 720px;
  border: 0;
  border-radius: var(--radius-lg, 14px);
  background: var(--stone-50);
  display: block;
}
@media (max-width: 640px) {
  .llp-halaxy-iframe { min-height: 800px; }
}

/* ---------- Mid-article CTA (blog posts) ---------------------------------- */
/* A soft conversion nudge dropped into long-form articles. Visually quieter
   than a full CTA section — it reads as an aside, not as an interruption. */
.llp-mid-cta {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--stone-50);
  border-inline-start: 4px solid var(--brand-600);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 1px 0 var(--stone-100);
}

/* Sidebar variant: dark brand card with inverted white button (matches Figma). */
.llp-sidebar .llp-mid-cta {
  margin: 0; padding: 1.25rem;
  background: var(--brand-700); color: #fff;
  border: 0; border-radius: var(--radius-2xl);
  box-shadow: none;
}
.llp-sidebar .llp-mid-cta__inner { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.llp-sidebar .llp-mid-cta__icon { display: none; }
.llp-sidebar .llp-mid-cta__body { flex: 0 1 auto; }
.llp-sidebar .llp-mid-cta__title {
  font-family: inherit; font-size: 0.9375rem; font-weight: 500;
  color: #fff; margin: 0;
}
.llp-sidebar .llp-mid-cta__copy {
  color: var(--brand-100); font-size: 0.75rem; line-height: 1.6; margin: 0;
}
.llp-sidebar .llp-mid-cta__btn {
  display: block; text-align: center;
  background: #fff; color: var(--brand-700);
  border: 0; border-radius: var(--radius-lg);
  padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500;
  transition: background 150ms ease;
}
.llp-sidebar .llp-mid-cta__btn:hover { background: var(--stone-100); color: var(--brand-700); }
.llp-mid-cta__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.llp-mid-cta__icon {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  background: var(--brand-100);
  color: var(--brand-700);
  border-radius: 999px;
  flex-shrink: 0;
}
.llp-mid-cta__body { flex: 1 1 15rem; min-width: 0; }
.llp-mid-cta__title {
  font-family: 'Forum', Georgia, serif;
  font-size: 1.125rem;
  color: var(--stone-800);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.llp-mid-cta__copy {
  color: var(--stone-600);
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}
.llp-mid-cta__btn { flex-shrink: 0; }
@media (max-width: 480px) {
  .llp-mid-cta__inner { flex-direction: column; align-items: flex-start; }
  .llp-mid-cta__btn { width: 100%; justify-content: center; }
}

/* ---------- Related articles (blog sidebar) ------------------------------- */
.llp-related__heading {
  color: var(--stone-700); font-weight: 500; font-size: 0.875rem;
  margin: 0 0 0.75rem;
}
.llp-related__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.llp-related__item {
  display: flex; align-items: flex-start; gap: 0.375rem;
  text-decoration: none;
  color: var(--brand-700); font-size: 0.875rem; line-height: 1.45;
  transition: color 150ms ease;
}
.llp-related__item:hover,
.llp-related__item:focus-visible { color: var(--brand-800); }
.llp-related__item svg {
  width: 0.75rem; height: 0.75rem; flex-shrink: 0; margin-top: 0.3rem;
}
.llp-related__title { flex: 1; min-width: 0; }
.llp-related__meta {
  color: var(--stone-400); font-size: 0.75rem; flex-shrink: 0;
  margin-left: 0.25rem; white-space: nowrap;
}

/* ---------- Author card (sidebar variant) -------------------------------- */
.llp-author-card--sidebar {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl); padding: 1.25rem;
}
.llp-author-card--sidebar .llp-author-card__label {
  color: var(--stone-700); font-weight: 500; font-size: 0.875rem;
  margin: 0 0 0.75rem;
}
.llp-author-card--sidebar .llp-author-card__head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.llp-author-card--sidebar .llp-author-card__avatar {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  border-radius: 9999px;
  background: var(--brand-50); color: var(--brand-700);
  display: grid; place-items: center;
  font-weight: 600; font-size: 1rem; letter-spacing: 0.02em;
}
/* Base styles for the author photo and avatar — applied regardless of
 * variant so a future use without the --sidebar modifier (or stale CSS
 * caches that hide the variant rule) still gets a properly round, sized
 * thumbnail rather than the raw image at natural ratio. */
.llp-author-card__photo {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  border-radius: 9999px; object-fit: cover;
}
.llp-author-card__avatar {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  border-radius: 9999px;
  background: var(--brand-50); color: var(--brand-700);
  display: grid; place-items: center;
  font-weight: 600; font-size: 1rem; letter-spacing: 0.02em;
}
.llp-author-card--sidebar .llp-author-card__photo {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  border-radius: 9999px; object-fit: cover;
}
.llp-author-card--sidebar .llp-author-card__identity { min-width: 0; }
.llp-author-card--sidebar .llp-author-card__name {
  color: var(--stone-700); font-weight: 500; font-size: 0.875rem;
  margin: 0; line-height: 1.35;
}
.llp-author-card--sidebar .llp-author-card__creds {
  color: var(--stone-400); font-size: 0.75rem;
  margin: 0.125rem 0 0; line-height: 1.4;
}
.llp-author-card--sidebar .llp-author-card__bio {
  color: var(--stone-500); font-size: 0.75rem; line-height: 1.65;
  margin: 0 0 0.75rem;
}
.llp-author-card--sidebar .llp-author-card__more {
  color: var(--brand-700); font-weight: 500; font-size: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
  transition: color 150ms ease;
}
.llp-author-card--sidebar .llp-author-card__more:hover { color: var(--brand-800); }
.llp-author-card--sidebar .llp-author-card__more svg { width: 0.75rem; height: 0.75rem; }

/* ---------- Sticky mobile CTA --------------------------------------------- */
/* Hidden by default. Shown on narrow viewports once the user scrolls past the
   hero so it does not compete with a visible above-the-fold CTA. The bar uses
   env(safe-area-inset-bottom) to sit above the iOS home indicator. */
.llp-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--stone-100);
  box-shadow: 0 -6px 20px -10px rgba(15, 23, 20, 0.18);
  transform: translate3d(0, 120%, 0);
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.llp-sticky-cta.is-visible {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
.llp-sticky-cta__inner {
  max-width: min(100%, 40rem);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.llp-sticky-cta__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.llp-sticky-cta__label { font-weight: 600; color: var(--brand-800); font-size: 0.9375rem; }
.llp-sticky-cta__sub { color: var(--stone-600); font-size: 0.75rem; margin-top: 0.125rem; }
.llp-sticky-cta__btn { flex: 0 0 auto; white-space: nowrap; }
.llp-sticky-cta__btn svg { margin-right: 0.25rem; }

/* Desktop: hidden. Desktop header already has an always-visible Book CTA. */
@media (min-width: 768px) {
  .llp-sticky-cta { display: none; }
}

/* When sticky CTA is visible we raise the footer's bottom padding via a
   body class so the last block isn't obscured by the bar. */
body.has-sticky-cta .llp-footer { padding-bottom: calc(2rem + 3.75rem + env(safe-area-inset-bottom, 0px)); }

/* ---------- Footer --------------------------------------------------------- */
.llp-footer { background: var(--brand-900); border-top: 3px solid var(--brand-700); color: var(--brand-100); }
.llp-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  padding-block: 3.5rem;
}
@media (min-width: 768px) { .llp-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .llp-footer__grid { grid-template-columns: repeat(4, 1fr); } }

.llp-footer__brand { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 1024px) { .llp-footer__brand { grid-column: span 2; } }
.llp-footer__brand-row { display: flex; align-items: center; gap: 0.75rem; }
.llp-footer__brand-row img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.llp-footer__brand-name {
  color: #fff; font-family: "Forum", Georgia, serif; font-size: 24px; line-height: 1.2;
}
.llp-footer__tagline { color: var(--brand-200); font-size: 0.875rem; line-height: 1.7; max-width: 24rem; }

.llp-footer__trust { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin-top: 0.25rem; }
.llp-footer__trust span {
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--brand-200); font-size: 0.75rem;
}
.llp-footer__trust span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-600); flex-shrink: 0;
}

.llp-footer__col { display: flex; flex-direction: column; gap: 2rem; }
.llp-footer__heading {
  color: var(--brand-300); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem;
}
.llp-footer__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.llp-footer__list a {
  color: var(--brand-100); font-size: 0.875rem;
  transition: color 150ms ease;
}
.llp-footer__list a:hover { color: #fff; }

.llp-footer__btn--small {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--brand-600); color: #fff;
  padding: 0.625rem 1.25rem; border-radius: var(--radius-lg);
  font-size: 0.875rem; font-weight: 500;
  transition: background-color 150ms ease;
}
.llp-footer__btn--small:hover { background: var(--brand-500); }
.llp-footer__btn--small svg { width: 1rem; height: 1rem; }

.llp-footer__meta {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--brand-500); font-size: 0.75rem;
}
.llp-footer__meta p { margin: 0; line-height: 1.5; }
@media (min-width: 640px) {
  .llp-footer__meta { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
}

/* ---------- Trust Strip ---------------------------------------------------- */
.llp-trust {
  background: var(--brand-100); color: var(--brand-900);
  padding-block: 1rem;
}
/* On phones, stack the credentials vertically and left-align them. Without
 * this, wide items (e.g. "M. Couns. | B. Soc. Sci. (Behav. Sci.)") take a
 * full row and visually sit left, while short items ("Australia-wide
 * telehealth") get centered — producing a ragged mixed alignment that
 * reads as broken. Above 640px the row form with center justification is
 * the intended look and stays unchanged. */
.llp-trust__inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .llp-trust__inner {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    align-items: center;
    gap: 0.75rem 2rem;
  }
}
.llp-trust__item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--brand-800); font-size: 0.875rem;
}
.llp-trust__item svg { width: 1rem; height: 1rem; color: var(--brand-600); flex-shrink: 0; }

/* ---------- Hero (home) --------------------------------------------------- */
.llp-hero { background: #fff; }
.llp-hero__inner { padding-block: 4rem; }
@media (min-width: 1024px) { .llp-hero__inner { padding-block: 6rem; } }
.llp-hero__grid {
  display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
}
@media (min-width: 1024px) { .llp-hero__grid { grid-template-columns: 1fr 1fr; } }

.llp-hero__title {
  color: var(--stone-800);
  font-size: clamp(1.875rem, 2vw + 1.25rem, 3rem);
  line-height: 1.15; margin-bottom: 1.25rem; font-weight: 500;
}
.llp-hero__body  { color: var(--stone-600); line-height: 1.7; margin-bottom: 2rem; }
.llp-hero__actions { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .llp-hero__actions { flex-direction: row; } }
.llp-hero__meta { color: var(--stone-600); font-size: 0.75rem; margin-top: 1rem; }

.llp-hero__media { position: relative; }
.llp-hero__media img {
  width: 100%; height: auto;
  border-radius: var(--radius-2xl);
}

.llp-hero__pill {
  position: absolute; bottom: 1rem; right: 1rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  padding: 0.75rem 1rem; box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: 0.625rem;
}
.llp-hero__pill p { color: var(--stone-700); font-size: 0.875rem; font-weight: 500; }
.llp-hero__pill-dot {
  position: relative; width: 0.5rem; height: 0.5rem; flex-shrink: 0;
}
.llp-hero__pill-dot::before,
.llp-hero__pill-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
.llp-hero__pill-dot::before { background: var(--brand-400); opacity: 0.75; animation: llp-ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
.llp-hero__pill-dot::after  { background: var(--brand-500); }
@keyframes llp-ping { 75%,100% { transform: scale(2); opacity: 0; } }

/* ---------- Page Hero (inner pages) --------------------------------------- */
.llp-pagehero { background: #fff; }
.llp-pagehero__inner { padding-block: 4rem; }
@media (min-width: 1024px) { .llp-pagehero__inner { padding-block: 5rem; } }
.llp-pagehero__grid {
  display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
}
/* Grid items default to `min-width: auto` (== min-content). For text columns
 * that's fine; for the image column the intrinsic image width can exceed the
 * viewport on mobile, forcing the whole grid (and the text inside it) wider
 * than the viewport — causing visible text clipping. min-width: 0 lets the
 * track shrink to fit the viewport. */
.llp-pagehero__grid > * { min-width: 0; }
.llp-pagehero__grid--with-image {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .llp-pagehero__grid--with-image { grid-template-columns: 1fr 1fr; }
}
.llp-pagehero__grid--no-image { max-width: 48rem; }
.llp-pagehero__title {
  color: var(--stone-800);
  /* Mirror .llp-hero__title's clamp so the H1 shrinks to 30px on narrow
   * viewports — the theme.json default (36px minimum) overflows below ~480px
   * for long titles like "Individual Counselling Online — A Safe Space...". */
  font-size: clamp(1.875rem, 2vw + 1.25rem, 3rem);
  line-height: 1.15; margin-bottom: 1.25rem; font-weight: 500;
}
.llp-pagehero__body  { color: var(--stone-600); line-height: 1.7; margin-bottom: 2rem; }
.llp-pagehero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.llp-pagehero__actions .llp-btn { padding: 0.5rem 1rem; font-size: 0.875rem; }
/* `position: relative` is required so the absolutely-positioned
 * `.llp-hero__pill` inside this wrapper anchors to the image card,
 * not the document body. */
.llp-pagehero__media { position: relative; }
.llp-pagehero__image {
  width: 100%; height: auto;
  border-radius: var(--radius-2xl);
}

/* Aspect-ratio variants — opt-in override for when the editor wants the
 * image cropped to a specific ratio (object-fit: cover) instead of its
 * natural shape. Without one of these classes, the image preserves its
 * uploaded aspect ratio. */
.llp-pagehero__image--3-4,
.llp-pagehero__image--4-5,
.llp-pagehero__image--1-1,
.llp-pagehero__image--3-2,
.llp-pagehero__image--4-3 {
  height: auto;
  object-fit: cover;
}
.llp-pagehero__image--3-4 { aspect-ratio: 3 / 4; }
.llp-pagehero__image--4-5 { aspect-ratio: 4 / 5; }
.llp-pagehero__image--1-1 { aspect-ratio: 1 / 1; }
.llp-pagehero__image--3-2 { aspect-ratio: 3 / 2; }
.llp-pagehero__image--4-3 { aspect-ratio: 4 / 3; }

/* ---------- Generic cards / card grid ------------------------------------- */
.llp-card {
  background: #fff;
  border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  display: flex; flex-direction: column;
}
.llp-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.llp-card--stone { background: var(--stone-50); }
.llp-card--brand { background: var(--brand-50); border-color: var(--brand-100); }
.llp-card--inset { padding: 1.25rem; }
.llp-card__icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xl);
  background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.llp-card__icon svg { width: 1.25rem; height: 1.25rem; }
.llp-card__icon--small {
  width: 2rem; height: 2rem; border-radius: var(--radius-md);
  background: var(--brand-50); color: var(--brand-600);
}
.llp-card__icon--small svg { width: 1rem; height: 1rem; }
.llp-card__title { color: var(--stone-800); font-weight: 500; margin-bottom: 0.5rem; font-size: 0.875rem; }
.llp-card__subtitle { color: var(--brand-700); font-weight: 500; margin-bottom: 0.5rem; font-size: 0.875rem; }
.llp-card__body  { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; }
.llp-card__meta  { color: var(--stone-500); font-size: 0.875rem; }

/* Service card (Home service trio) */
.llp-service-card {
  background: var(--stone-50);
  border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  display: flex; flex-direction: column;
}
.llp-service-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.llp-service-card__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.llp-service-card__icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xl);
  background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center; flex-shrink: 0;
}
.llp-service-card__icon svg { width: 1.5rem; height: 1.5rem; }
.llp-service-card__title { color: var(--stone-800); line-height: 1.25; margin: 0; font-size: 1.25rem; font-weight: 500; font-family: "Forum", Georgia, serif; }
.llp-service-card__desc { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; margin-bottom: 1.25rem; }
.llp-service-card__section { margin-bottom: 1rem; }
.llp-service-card__label {
  color: var(--stone-500); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem;
}
.llp-service-card__list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.llp-service-card__list li {
  display: flex; align-items: flex-start; gap: 0.625rem;
  color: var(--stone-600); font-size: 0.875rem; line-height: 1.4;
}
.llp-service-card__list svg { width: 1rem; height: 1rem; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
.llp-service-card__list--secondary svg { color: var(--brand-400); }
.llp-service-card__ctas {
  margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--stone-100);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.llp-service-card__ctas .llp-link { justify-content: center; width: 100%; padding-top: 0.5rem; }
.llp-service-card__ctas .llp-btn { width: 100%; font-size: 0.875rem; padding: 0.625rem 1rem; }

/* Check list (Forum-font list used on Home, service pages) */
.llp-checklist {
  background: #fff;
  border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl);
  padding: 2rem; box-shadow: var(--shadow-sm);
}
.llp-checklist__label {
  color: var(--stone-500); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem;
}
.llp-checklist__items { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.llp-checklist__items li {
  display: flex; align-items: flex-start; gap: 0.75rem;
}
.llp-checklist__items--forum li > span {
  font-family: "Forum", Georgia, serif;
  color: var(--stone-700); font-size: 1.25rem; line-height: 1.35;
}
.llp-checklist__items--large li > span {
  font-family: "Forum", Georgia, serif;
  color: var(--stone-700); font-size: 1.5rem; line-height: 1.35;
}
.llp-checklist__icon {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-600);
  display: grid; place-items: center; flex-shrink: 0; margin-top: 4px;
}
.llp-checklist__icon svg { width: 0.875rem; height: 0.875rem; }
.llp-checklist__icon--lg {
  width: 1.75rem; height: 1.75rem; background: transparent; color: var(--brand-500);
}
.llp-checklist__icon--lg svg { width: 1.75rem; height: 1.75rem; }
.llp-checklist__footer {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--stone-100);
  text-align: center; color: var(--stone-500); font-size: 0.875rem; line-height: 1.7;
}

/* Stone pill (grid of checklist items as chips) */
.llp-pill-list { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .llp-pill-list { grid-template-columns: 1fr 1fr; } }
.llp-pill {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--stone-50);
  border: 1px solid var(--stone-100);
  border-radius: var(--radius-xl);
  padding: 0.875rem 1rem;
  transition: border-color 150ms ease;
  color: var(--stone-700); font-size: 0.875rem; line-height: 1.4;
}
.llp-pill:hover { border-color: var(--brand-200); }
.llp-pill svg { width: 1rem; height: 1rem; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }

/* Process steps (numbered) */
.llp-steps { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .llp-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) {
  .llp-steps--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .llp-steps--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .llp-steps--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.llp-step {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl);
  padding: 1.5rem; text-align: center;
}
.llp-step__num {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--brand-700); color: #fff;
  display: grid; place-items: center; margin: 0 auto 1rem;
  font-weight: 500;
}
.llp-step__title { color: var(--stone-800); margin-bottom: 0.5rem; }
.llp-step__body  { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; }

/* Detailed steps (How It Works variant) */
.llp-step-row {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl); padding: 1.5rem;
}
.llp-step-row__inner { display: flex; align-items: flex-start; gap: 1rem; }
.llp-step-row__num {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--brand-700); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.875rem; font-weight: 500;
}
.llp-step-row__body { flex: 1; }
.llp-step-row__body h3 { color: var(--stone-800); margin-bottom: 0.5rem; }
.llp-step-row__body > p { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; margin-bottom: 0.75rem; }
.llp-step-row__list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.llp-step-row__list li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--stone-600); font-size: 0.875rem; }
.llp-step-row__list svg { width: 1rem; height: 1rem; color: var(--brand-500); flex-shrink: 0; margin-top: 2px; }
.llp-step-row__note { color: var(--stone-500); font-size: 0.875rem; font-style: italic; line-height: 1.7; }

/* Two-column split */
.llp-split {
  display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
}
@media (min-width: 1024px) { .llp-split { grid-template-columns: 1fr 1fr; } }
.llp-split--5col {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: stretch;
}
@media (min-width: 1024px) {
  /* Article + sidebar on blog posts. Sidebar is a fixed column so the
   * reading column grows with the viewport instead of widening on very
   * large screens. A larger inter-column gap detaches the sidebar
   * visually from the article card to its left. */
  .llp-split--5col { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
}
@media (min-width: 1280px) {
  .llp-split--5col { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3.5rem; }
}
.llp-split__image img {
  width: 100%; height: auto;
  border-radius: var(--radius-2xl);
}
/* Aspect-ratio variants — opt-in override for when the editor wants the
 * image cropped to a specific ratio (object-fit: cover) instead of its
 * natural shape. Without one of these classes, the image preserves its
 * uploaded aspect ratio. */
.llp-split__image--3-4 img,
.llp-split__image--4-5 img,
.llp-split__image--1-1 img,
.llp-split__image--3-2 img,
.llp-split__image--4-3 img {
  height: auto;
  object-fit: cover;
}
.llp-split__image--3-4 img { aspect-ratio: 3 / 4; }
.llp-split__image--4-5 img { aspect-ratio: 4 / 5; }
.llp-split__image--1-1 img { aspect-ratio: 1 / 1; }
.llp-split__image--3-2 img { aspect-ratio: 3 / 2; }
.llp-split__image--4-3 img { aspect-ratio: 4 / 3; }
.llp-split__body p { color: var(--stone-600); line-height: 1.7; }
.llp-split__body p + p { margin-top: 1rem; }
.llp-split__body p.is-emphasis { color: var(--brand-800); }

/* Pull quote card (Home "Our approach") */
.llp-pullquote {
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--brand-50) 30%, transparent));
  border: 1px solid rgba(174,205,183,0.6);
  border-radius: var(--radius-2xl);
  padding: 2rem; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
  /* Flex column so contents distribute across the full card height when
   * stretched to match the body column (.llp-split--5col uses align-items:
   * stretch). The icon sits at the top, the quote fills the middle, the CTA
   * settles at the bottom. */
  display: flex; flex-direction: column;
  gap: 1.5rem;
}
.llp-pullquote .llp-btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 768px) { .llp-pullquote { padding: 2.5rem; gap: 1.75rem; } }
/* Decorative oversized quote glyph in the background — fills the empty
 * canvas behind the quote text without competing with it. */
.llp-pullquote::before {
  content: "\201C";
  position: absolute;
  top: -3.5rem; right: -1rem;
  font-family: "Forum", Georgia, serif;
  font-size: 16rem; line-height: 1;
  color: var(--brand-100);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.llp-pullquote__icon {
  position: relative; z-index: 1;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-600);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.llp-pullquote__icon svg { width: 1.25rem; height: 1.25rem; }
.llp-pullquote__text {
  color: var(--brand-900); line-height: 1.55; font-style: italic;
  font-family: "Forum", Georgia, serif; font-size: 1.5rem; font-weight: 500;
  margin: 0;
  position: relative; z-index: 1;
}
@media (min-width: 1280px) {
  .llp-pullquote__text { font-size: 1.625rem; }
}

/* FAQ (native <details>) */
.llp-faq { display: flex; flex-direction: column; gap: 0.5rem; }
.llp-faq details {
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.llp-faq summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; cursor: pointer;
  color: var(--stone-800); list-style: none;
  transition: background-color 150ms ease;
}
.llp-faq summary::-webkit-details-marker { display: none; }
.llp-faq summary:hover { background: var(--stone-50); }
.llp-faq summary > span:first-child {
  font-size: clamp(1.2rem, 1.5vw + 0.25rem, 1.625rem);
  line-height: 1.3; padding-right: 1rem;
  font-family: "Forum", Georgia, serif;
}
.llp-faq summary svg {
  width: 1rem; height: 1rem; color: var(--brand-500); flex-shrink: 0;
  transition: transform 200ms ease;
}
.llp-faq details[open] summary svg { transform: rotate(180deg); }
.llp-faq__answer {
  padding: 1.25rem; color: var(--stone-600); font-size: 0.875rem; line-height: 1.7;
  border-top: 1px solid var(--brand-100);
}

/* CTA block */
.llp-cta { background: var(--brand-700); }
.llp-cta--light { background: var(--brand-50); }
.llp-cta__inner { padding: 4rem 1rem; }
.llp-cta__body {
  max-width: 48rem; margin: 0 auto; text-align: center;
}
.llp-cta__body h2 { color: #fff; margin-bottom: 1rem; }
.llp-cta__body p  { color: var(--brand-100); line-height: 1.7; margin-bottom: 2rem; }
.llp-cta--light .llp-cta__body h2 { color: var(--brand-900); }
.llp-cta--light .llp-cta__body p  { color: var(--brand-800); }
.llp-cta__actions {
  display: flex; flex-direction: column; gap: 0.75rem;
  justify-content: center; align-items: center;
}
@media (min-width: 640px) { .llp-cta__actions { flex-direction: row; } }
.llp-cta--dark .llp-btn--primary { background: #fff; color: var(--brand-700); border-color: #fff; }
.llp-cta--dark .llp-btn--primary:hover { background: var(--stone-100); }
.llp-cta__secondary {
  color: var(--brand-100); font-size: 0.875rem;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color 150ms ease;
}
.llp-cta__secondary:hover { color: #fff; }
.llp-cta--light .llp-cta__secondary { color: var(--brand-700); }
.llp-cta--light .llp-cta__secondary:hover { color: var(--brand-900); }

/* Crisis Note */
.llp-crisis {
  background: var(--amber-50);
  border-top: 1px solid var(--amber-100);
  border-bottom: 1px solid var(--amber-100);
  padding-block: 2.5rem;
}
.llp-crisis__inner { display: flex; gap: 1rem; align-items: flex-start; max-width: var(--container-5xl); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .llp-crisis__inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .llp-crisis__inner { padding-inline: 2rem; } }
.llp-crisis__icon {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-lg);
  background: var(--amber-100); color: var(--amber-600);
  display: grid; place-items: center; flex-shrink: 0; margin-top: 2px;
}
.llp-crisis__icon svg { width: 1.25rem; height: 1.25rem; }
.llp-crisis__title { color: var(--amber-900); font-weight: 500; margin-bottom: 0.25rem; }
.llp-crisis__body  { color: var(--amber-800); font-size: 0.875rem; line-height: 1.7; }
.llp-crisis__body > *:first-child { margin-top: 0; }
.llp-crisis__body > *:last-child  { margin-bottom: 0; }
.llp-crisis__body p { margin: 0.5em 0; }
.llp-crisis__body a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.llp-crisis__body a:hover { text-decoration: none; }
.llp-crisis__action { margin-top: 1rem; }
.llp-crisis__button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--amber-100); color: var(--amber-900);
  padding: 0.5rem 1rem; border-radius: var(--radius-lg);
  font-size: 0.875rem; font-weight: 500;
  transition: background-color 150ms ease;
}
.llp-crisis__button:hover { background: var(--amber-200); }
.llp-crisis__button svg { width: 1rem; height: 1rem; }

/* Inline amber banner (Crisis Support hero) */
.llp-amber-strip {
  background: var(--amber-50);
  border-bottom: 1px solid var(--amber-200);
  padding: 1.25rem 0;
}
.llp-amber-strip__inner {
  max-width: var(--container-4xl); margin-inline: auto;
  padding-inline: 1rem;
  display: flex; align-items: flex-start; gap: 0.75rem;
}
@media (min-width: 640px) { .llp-amber-strip__inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .llp-amber-strip__inner { padding-inline: 2rem; } }
.llp-amber-strip svg { width: 1.25rem; height: 1.25rem; color: var(--amber-600); flex-shrink: 0; margin-top: 2px; }
.llp-amber-strip p { color: var(--stone-700); font-size: 0.875rem; line-height: 1.7; }
.llp-amber-strip p strong { font-weight: 500; color: var(--amber-800); }
.llp-amber-strip a { font-weight: 500; color: var(--red-700); text-decoration: underline; text-underline-offset: 2px; }

/* Emergency "000" callout (Crisis Support) */
.llp-emergency {
  background: var(--red-50); border: 2px solid var(--red-200);
  border-radius: var(--radius-2xl); padding: 1.5rem;
}
.llp-emergency__label {
  color: var(--red-700); font-size: 0.875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem;
}
.llp-emergency__row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .llp-emergency__row { flex-direction: row; align-items: center; } }
.llp-emergency__body  { flex: 1; }
.llp-emergency__title { color: var(--stone-800); font-weight: 500; margin-bottom: 0.25rem; }
.llp-emergency__desc  { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; }
.llp-emergency__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--red-600); color: #fff;
  padding: 0.875rem 1.75rem; border-radius: var(--radius-xl);
  font-weight: 500; font-size: 1.25rem;
  transition: background-color 150ms ease;
  flex-shrink: 0;
}
.llp-emergency__btn:hover { background: var(--red-700); }
.llp-emergency__btn svg { width: 1.25rem; height: 1.25rem; }

/* Fees cards (pricing table) */
.llp-fees-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 640px) { .llp-fees-grid { grid-template-columns: repeat(3, 1fr); } }

/* Fee tabs — used on /fees/ to switch between Individual and Couples pricing.
 * Tablist is a centred pill row; tabpanels hold the same llp-fees-grid as a
 * standalone fee-cards block. Keyboard interactions handled by frontend.js. */
.llp-fee-tabs {
  margin-block: 1.5rem;
  display: flex; flex-direction: column; align-items: center;
}
.llp-fee-tabs > [role="tablist"] {
  display: inline-flex; background: var(--stone-100);
  padding: 4px; border-radius: 999px;
  margin: 0 auto 2rem; gap: 4px;
}
.llp-fee-tabs__btn {
  appearance: none; border: 0; background: transparent;
  padding: 0.55rem 1.25rem; border-radius: 999px;
  font: inherit; font-weight: 500; font-size: 0.9375rem;
  color: var(--stone-600); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  min-height: 40px;
}
.llp-fee-tabs__btn:hover { color: var(--stone-800); }
.llp-fee-tabs__btn.is-active {
  background: #fff; color: var(--brand-800);
  box-shadow: 0 1px 3px rgba(15, 23, 20, 0.08);
}
.llp-fee-tabs__btn:focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: 2px;
}
.llp-fee-tabpanel { width: 100%; }
.llp-fee-tabpanel[hidden] { display: none; }

.llp-fee-card {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl); padding: 1.5rem;
  text-align: center; display: flex; flex-direction: column;
}
.llp-fee-card__price {
  color: var(--brand-700); font-family: "Forum", Georgia, serif;
  font-size: 1.5rem; font-weight: 500; margin-bottom: 0.25rem;
}
.llp-fee-card__label { color: var(--stone-600); font-size: 0.875rem; }

.llp-fee-card--big {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  text-align: left;
}
.llp-fee-card--big .llp-card__icon { margin-bottom: 1.25rem; }
.llp-fee-card--big .llp-fee-card__label { color: var(--stone-500); font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; }
.llp-fee-card--big .llp-fee-card__price {
  color: var(--brand-700); font-size: 2.25rem; font-weight: 500;
  font-family: "Forum", Georgia, serif; line-height: 1;
}
.llp-fee-card--big .llp-fee-card__duration {
  color: var(--stone-600); font-size: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.25rem; margin-bottom: 1rem;
}
.llp-fee-card--big .llp-fee-card__duration svg { width: 0.875rem; height: 0.875rem; }
.llp-fee-card--big .llp-fee-card__desc { color: var(--stone-500); font-size: 0.875rem; line-height: 1.7; flex: 1; }

.llp-fee-card--highlight {
  background: var(--brand-700); border-color: var(--brand-700); color: #fff; position: relative;
}
.llp-fee-card--highlight .llp-card__icon { background: var(--brand-600); color: #fff; }
.llp-fee-card--highlight .llp-fee-card__label { color: var(--brand-100); }
.llp-fee-card--highlight .llp-fee-card__price { color: #fff; }
.llp-fee-card--highlight .llp-fee-card__duration,
.llp-fee-card--highlight .llp-fee-card__desc { color: var(--brand-200); }
.llp-fee-card--highlight .llp-fee-card__desc { color: var(--brand-100); }

.llp-fee-card__badge {
  position: absolute; top: -0.75rem; left: 1.25rem;
  display: inline-block;
  background: var(--brand-600); color: #fff;
  font-size: 0.75rem; font-weight: 500;
  padding: 0.25rem 0.75rem; border-radius: var(--radius-full);
}

/* Special / promo pricing — when a card has an original_price + offer_label,
 * the offer chip sits above the price block and the original price renders
 * struck through next to the special price. Works in both the default and
 * the highlight (brand-700 background) variants. */
.llp-fee-card__offer {
  align-self: flex-start;
  display: inline-block;
  background: var(--amber-100); color: var(--amber-900);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25rem 0.625rem; border-radius: var(--radius-full);
  margin-bottom: 0.25rem;
}
.llp-fee-card--big .llp-fee-card__price {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.llp-fee-card__price-was {
  color: var(--stone-400); font-size: 1.125rem; font-weight: 400;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  font-family: "Forum", Georgia, serif;
}
.llp-fee-card--highlight .llp-fee-card__offer {
  background: var(--amber-200); color: var(--amber-900);
}
.llp-fee-card--highlight .llp-fee-card__price-was { color: var(--brand-200); }

/* About — credential pill */
.llp-cred-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg); padding: 0.625rem 1rem;
  color: var(--stone-700); font-size: 0.875rem;
}
.llp-cred-pill svg { width: 1rem; height: 1rem; color: var(--brand-600); flex-shrink: 0; }

/* Booking step row (how-it-works "How to get started") */
.llp-booking-steps {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative;
}
@media (min-width: 768px) {
  .llp-booking-steps { grid-template-columns: repeat(3, 1fr); }
  .llp-booking-steps::before {
    content: ""; position: absolute; top: 2.5rem; left: calc(16.67% + 1.5rem); right: calc(16.67% + 1.5rem);
    height: 1px; background: var(--brand-200); z-index: 0;
  }
}
.llp-booking-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.llp-booking-step__icon {
  width: 5rem; height: 5rem;
  background: #fff; border: 2px solid var(--brand-200);
  border-radius: var(--radius-2xl);
  display: grid; place-items: center;
  margin-bottom: 1.25rem; box-shadow: var(--shadow-sm);
}
.llp-booking-step__icon svg { width: 2rem; height: 2rem; color: var(--brand-600); }
.llp-booking-step__meta {
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--brand-600); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem;
}
.llp-booking-step__meta > span:first-child {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--brand-700); color: #fff;
  display: grid; place-items: center; font-size: 0.75rem;
}
.llp-booking-step__title { color: var(--stone-800); margin-bottom: 0.5rem; }
.llp-booking-step__body { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; }

/* Sidebar module (contact, book) */
.llp-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.llp-sidebar__module {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl); padding: 1.25rem;
}
.llp-sidebar__module--brand {
  background: var(--brand-700); color: #fff;
}
.llp-sidebar__module--brand p { color: var(--brand-200); }
.llp-sidebar__module--brand .llp-sidebar__title { color: #fff; }
.llp-sidebar__title {
  color: var(--stone-800); font-weight: 500; font-size: 0.875rem; margin-bottom: 1rem;
}
.llp-sidebar__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.llp-sidebar__list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.llp-sidebar__list li > span {
  color: var(--stone-500); font-size: 0.875rem; line-height: 1.7;
}
.llp-sidebar__list .llp-pill-icon {
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md);
  background: var(--brand-50); color: var(--brand-600);
  display: grid; place-items: center; flex-shrink: 0; margin-top: 2px;
}
.llp-sidebar__list .llp-pill-icon svg { width: 1rem; height: 1rem; }

/* Placeholder for booking embed */
.llp-embed-placeholder {
  background: var(--stone-50);
  border: 2px dashed var(--stone-200);
  border-radius: var(--radius-2xl);
  padding: 5rem 2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1rem;
  min-height: 30rem;
}
.llp-embed-placeholder__icon {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-2xl);
  background: var(--brand-50); color: var(--brand-600);
  display: grid; place-items: center;
}
.llp-embed-placeholder__icon svg { width: 1.75rem; height: 1.75rem; }
.llp-embed-placeholder__title { color: var(--stone-700); font-weight: 500; margin-bottom: 0.25rem; }
.llp-embed-placeholder__desc  { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; max-width: 20rem; }
.llp-embed-placeholder__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; align-items: center; }

/* Crisis service card (Crisis Support page) */
.llp-crisis-service {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl); padding: 1.25rem;
  transition: border-color 150ms ease;
}
.llp-crisis-service:hover { border-color: var(--brand-200); }
.llp-crisis-service__row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .llp-crisis-service__row { flex-direction: row; align-items: flex-start; } }
.llp-crisis-service__body { flex: 1; }
.llp-crisis-service__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.25rem;
}
.llp-crisis-service__name { color: var(--stone-800); font-weight: 500; }
.llp-crisis-service__number { color: var(--brand-700); font-weight: 500; }
.llp-crisis-service__number:hover { color: var(--brand-800); }
.llp-crisis-service__availability { color: var(--stone-500); font-size: 0.75rem; margin-bottom: 0.5rem; }
.llp-crisis-service__desc { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; }
.llp-crisis-service__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }
.llp-crisis-service__call {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--brand-700); color: #fff;
  padding: 0.625rem 1rem; border-radius: var(--radius-lg);
  font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  transition: background-color 150ms ease;
}
.llp-crisis-service__call:hover { background: var(--brand-800); }
.llp-crisis-service__call svg { width: 0.875rem; height: 0.875rem; }
.llp-crisis-service__web {
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--stone-600); padding: 0.625rem 1rem; border-radius: var(--radius-lg);
  border: 1px solid var(--stone-200);
  font-size: 0.875rem; white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease;
}
.llp-crisis-service__web:hover { border-color: var(--brand-300); color: var(--brand-700); }
.llp-crisis-service__web svg { width: 0.75rem; height: 0.75rem; }

/* Fee card per-card footnote (under the description) */
.llp-fee-card__footnote {
  color: var(--stone-500); font-size: 0.75rem; line-height: 1.6;
  margin-top: 0.75rem; font-style: italic;
}

/* Callout panel (brand/stone inset card with icon + body + actions) */
.llp-callout { display: flex; gap: 1rem; padding: 1.5rem; align-items: flex-start; }
.llp-card--horizontal { flex-direction: row; }
.llp-callout__icon {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-700);
  border-radius: var(--radius-lg);
}
.llp-callout__icon svg { width: 1rem; height: 1rem; }
.llp-card.llp-card--stone .llp-callout__icon { background: var(--stone-100); color: var(--stone-700); }
.llp-callout__body { flex: 1; min-width: 0; }
.llp-callout__title { color: var(--stone-800); font-weight: 500; margin-bottom: 0.5rem; }
.llp-callout__copy  { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; margin-bottom: 1rem; }
.llp-callout__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Email spotlight — used on /contact/ to make the email address the obvious
 * focal point of the page. The address itself is rendered as a large serif
 * headline that doubles as a mailto link. */

/* ---------- Legal Embed (Termly / iubenda / third-party policy embeds) ------
 * Wrapper around editor-pasted policy HTML. Keeps the embed's own typography
 * (Termly ships its own <style> tags) but caps width, fixes anchor-jump
 * offset, and tames a few common embed-html ergonomics so the page reads
 * cleanly inside the site frame. */
.llp-legal-embed { max-width: 100%; color: var(--stone-700); }
.llp-legal-embed > div:first-child { margin-top: 0; }
.llp-legal-embed h1,
.llp-legal-embed h2,
.llp-legal-embed h3 { scroll-margin-top: 6rem; }
.llp-legal-embed ul,
.llp-legal-embed ol { padding-left: 1.5rem; }
.llp-legal-embed a { word-break: break-word; }
.llp-legal-embed__placeholder {
  padding: 1.5rem; text-align: center;
  background: var(--stone-50); border: 1px dashed var(--stone-300);
  border-radius: var(--radius-md); color: var(--stone-600);
  font-size: 0.875rem;
}

.llp-email-spotlight {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-2xl);
  padding: 3rem 1.5rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.llp-email-spotlight__icon {
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  background: #fff; color: var(--brand-700);
  border-radius: var(--radius-full);
  margin-bottom: 0.25rem;
}
.llp-email-spotlight__icon svg { width: 1.5rem; height: 1.5rem; }
.llp-email-spotlight__eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.75rem; font-weight: 500; color: var(--brand-700);
  margin: 0;
}
.llp-email-spotlight__address {
  font-family: "Forum", Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.2;
  color: var(--brand-800);
  text-decoration: none;
  word-break: break-word;
}
.llp-email-spotlight__address:hover { text-decoration: underline; }
.llp-email-spotlight__meta {
  color: var(--stone-600); font-size: 0.9375rem; line-height: 1.6;
  margin: 0; max-width: 32rem;
}
.llp-email-spotlight__cta { margin-top: 0.5rem; }

/* Icon card body wrapper (tall / horizontal icon cards) */
.llp-card { display: flex; flex-direction: column; gap: 0.75rem; }
.llp-card--horizontal { flex-direction: row; align-items: flex-start; }
.llp-card--horizontal .llp-card__icon { flex-shrink: 0; }
.llp-card__body-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.llp-card__list { list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.llp-card__list li {
  display: flex; align-items: flex-start; gap: 0.5rem;
  color: var(--stone-600); font-size: 0.875rem; line-height: 1.6;
}
.llp-card__list svg { width: 0.875rem; height: 0.875rem; color: var(--brand-500); flex-shrink: 0; margin-top: 3px; }

/* Timeline step list wrapper (wraps .llp-step-row articles) */
.llp-step-rows { display: flex; flex-direction: column; gap: 2rem; }

/* Embed + Sidebar layout */
.llp-embed-split__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) {
  .llp-embed-split__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .llp-embed-split__grid--left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.llp-embed-split__sidebar { display: flex; flex-direction: column; gap: 1rem; }
.llp-embed-split__module-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.llp-embed-split__module--plain { padding: 0; border: 0; background: transparent; }
/* Alert tone (amber) — for the booking sidebar's "Not a crisis service" notice
 * so the safety message reads as a warning rather than blending into the
 * surrounding info cards. */
.llp-embed-split__module--alert {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  color: var(--amber-900);
}
.llp-embed-split__module--alert .llp-embed-split__module-head svg { color: var(--amber-600); }
.llp-embed-split__module--alert .llp-embed-split__module-head { color: var(--amber-900); font-weight: 600; }
.llp-embed-split__module--alert p,
.llp-embed-split__module--alert li { color: var(--amber-900); }
.llp-embed-split__module--alert a { color: var(--amber-800); text-decoration: underline; }

/* Blog category pills */
.llp-category-tab {
  padding: 0.375rem 0.75rem; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 500; border: 1px solid var(--stone-200);
  background: #fff; color: var(--stone-600);
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.llp-category-tab:hover { border-color: var(--brand-300); color: var(--brand-700); }
.llp-category-tab.is-active {
  background: var(--brand-700); color: #fff; border-color: var(--brand-700);
}
.llp-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }

/* Section head — title row + chip bar */
.llp-section-head {
  display: flex; flex-direction: column;
  gap: 1rem; margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .llp-section-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
}
.llp-section-head h2 {
  color: var(--stone-800);
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
}

/* Blog post grid + card */
.llp-post-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px)  { .llp-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .llp-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.llp-post-grid > .wp-block-post { display: flex; }

.llp-post-card {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-2xl); overflow: hidden;
  display: flex; flex-direction: column; flex: 1;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.llp-post-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
/* Normalise featured image proportions across the grid so a portrait-orientation
 * upload doesn't sit at a different height than the landscape ones. */
.llp-post-card .wp-block-post-featured-image,
.llp-post-card .wp-block-post-featured-image a,
.llp-post-card .wp-post-image {
  display: block;
  width: 100%;
}
.llp-post-card .wp-post-image {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}
.llp-post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.llp-post-card__category {
  display: inline-block; align-self: flex-start;
  font-size: 0.75rem; font-weight: 500;
  color: var(--brand-600); background: var(--brand-50);
  padding: 0.25rem 0.625rem; border-radius: var(--radius-full);
  margin-bottom: 0.75rem;
}
.llp-post-card__category a { color: inherit; }
.llp-post-card__title { color: var(--stone-800); line-height: 1.25; margin-bottom: 0.5rem; }
.llp-post-card__title a { color: inherit; }
.llp-post-card__byline {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--stone-400); font-size: 0.75rem; margin-bottom: 0.75rem;
}
.llp-post-card__byline > .llp-post-card__author { color: var(--stone-500); font-weight: 500; }
.llp-post-card__byline > .llp-post-card__sep { color: var(--stone-300); }
.llp-post-card__byline .llp-post-card__readtime {
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.llp-post-card__byline svg { width: 0.75rem; height: 0.75rem; }
.llp-post-card__excerpt { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; flex: 1; margin-bottom: 1rem; }
.llp-post-card__read {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--brand-700); font-weight: 500; font-size: 0.875rem;
  transition: color 150ms ease;
  margin-top: auto;
}
.llp-post-card__read:hover { color: var(--brand-800); }
.llp-post-card__read svg { width: 1rem; height: 1rem; }

/* Glossary index */
.llp-glossary { display: block; }
.llp-glossary__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.375rem; margin-bottom: 3rem;
}
.llp-glossary__nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem; font-weight: 500;
  background: #fff; color: var(--stone-600);
  border: 1px solid var(--stone-200);
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.llp-glossary__nav-btn:hover {
  border-color: var(--brand-300); color: var(--brand-700);
}
.llp-glossary__nav-btn.is-disabled {
  color: var(--stone-300); border-color: transparent; background: transparent;
  cursor: default; pointer-events: none;
}

.llp-glossary__groups { display: flex; flex-direction: column; gap: 3rem; }
.llp-glossary__group { scroll-margin-top: 5rem; }
.llp-glossary__letter-row {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;
}
.llp-glossary__letter {
  color: var(--brand-700); font-weight: 600; line-height: 1;
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
}
.llp-glossary__rule {
  flex: 1; height: 1px; background: var(--brand-100);
}

.llp-glossary__grid {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem;
}
@media (min-width: 640px) {
  .llp-glossary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.llp-glossary__term {
  background: #fff; border: 1px solid var(--stone-100);
  border-radius: var(--radius-xl); padding: 1.25rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.llp-glossary__term:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.llp-glossary__term-name {
  color: var(--stone-800); font-weight: 500; line-height: 1.35;
  margin: 0 0 0.5rem;
  font-size: clamp(1rem, 1vw + 0.25rem, 1.125rem);
}
.llp-glossary__term-name a { color: inherit; }
.llp-glossary__term-name a:hover { color: var(--brand-700); }
.llp-glossary__term-def {
  color: var(--stone-500); font-size: 0.875rem; line-height: 1.6; margin: 0;
}

/* Glossary / link banner */
.llp-link-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: #fff; border: 1px solid var(--stone-200);
  border-radius: var(--radius-2xl); padding: 1.25rem 1.5rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.llp-link-banner:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.llp-link-banner__left { display: flex; align-items: center; gap: 1rem; }
.llp-link-banner__icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-xl);
  background: var(--brand-50); color: var(--brand-600);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background-color 150ms ease;
}
.llp-link-banner__icon svg { width: 1.25rem; height: 1.25rem; }
.llp-link-banner:hover .llp-link-banner__icon { background: var(--brand-100); }

/* Author byline (blog) */
.llp-author {
  display: flex; align-items: flex-start; gap: 1.5rem;
}
.llp-author__avatar {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center; font-weight: 600; font-size: 1.125rem;
  flex-shrink: 0;
}
.llp-author__name { color: var(--stone-800); font-weight: 600; margin-bottom: 0.125rem; }
.llp-author__creds { color: var(--stone-500); font-size: 0.75rem; margin-bottom: 0.75rem; }
.llp-author__summary { color: var(--stone-600); font-size: 0.875rem; line-height: 1.7; margin-bottom: 1rem; }
.llp-author__standards {
  margin-top: 1.25rem;
  display: flex; align-items: flex-start; gap: 0.625rem;
  background: var(--stone-50); border: 1px solid var(--stone-200);
  border-radius: var(--radius-xl); padding: 0.75rem 1rem;
}
.llp-author__standards svg { width: 1rem; height: 1rem; color: var(--brand-600); margin-top: 2px; flex-shrink: 0; }
.llp-author__standards p { color: var(--stone-500); font-size: 0.75rem; line-height: 1.7; }
.llp-author__standards p strong { font-weight: 500; color: var(--stone-600); }

/* Prose (Privacy, Terms) */
.llp-prose { color: var(--stone-600); line-height: 1.7; font-size: 0.875rem; }
.llp-prose h2 { color: var(--stone-800); margin-bottom: 0.75rem; margin-top: 2rem; }
.llp-prose h2:first-child { margin-top: 0; }
.llp-prose ul { margin-top: 0.5rem; margin-left: 1rem; list-style: disc; display: flex; flex-direction: column; gap: 0.25rem; }
/* Disclaimer / placeholder / "general information" callout.
 * Uses amber-900 (#78350F) on amber-50 (#FFFBEB) — contrast ~7.8:1, AAA. */
.llp-prose__note {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: var(--radius-md);
  padding: 1rem;
  color: var(--amber-900); font-size: 0.875rem; margin-bottom: 1.5rem;
}
.llp-prose__note a {
  color: var(--amber-900);
  text-decoration: underline;
}

/* Misc text helpers */
.llp-text-center { text-align: center; }
.llp-text-stone-500 { color: var(--stone-500); }
.llp-text-stone-600 { color: var(--stone-600); }
.llp-text-stone-700 { color: var(--stone-700); }
.llp-text-stone-800 { color: var(--stone-800); }
.llp-text-brand-500 { color: var(--brand-500); }
.llp-text-brand-600 { color: var(--brand-600); }
.llp-text-brand-700 { color: var(--brand-700); }

.llp-mb-0 { margin-bottom: 0; }
.llp-mb-1 { margin-bottom: 0.25rem; }
.llp-mb-2 { margin-bottom: 0.5rem; }
.llp-mb-3 { margin-bottom: 0.75rem; }
.llp-mb-4 { margin-bottom: 1rem; }
.llp-mb-5 { margin-bottom: 1.25rem; }
.llp-mb-6 { margin-bottom: 1.5rem; }
.llp-mb-8 { margin-bottom: 2rem; }
.llp-mb-10 { margin-bottom: 2.5rem; }

.llp-mt-0 { margin-top: 0; }
.llp-mt-2 { margin-top: 0.5rem; }
.llp-mt-3 { margin-top: 0.75rem; }
.llp-mt-4 { margin-top: 1rem; }
.llp-mt-6 { margin-top: 1.5rem; }
.llp-mt-8 { margin-top: 2rem; }
.llp-mt-10 { margin-top: 2.5rem; }

.llp-mx-auto { margin-inline: auto; }

.llp-py-6  { padding-block: 1.5rem; }
.llp-py-8  { padding-block: 2rem; }
.llp-py-12 { padding-block: 3rem; }
.llp-py-14 { padding-block: 3.5rem; }
.llp-py-16 { padding-block: 4rem; }
.llp-py-20 { padding-block: 5rem; }

.llp-max-w-sm  { max-width: 24rem; }
.llp-max-w-md  { max-width: 28rem; }
.llp-max-w-lg  { max-width: 32rem; }
.llp-max-w-xl  { max-width: 36rem; }
.llp-max-w-2xl { max-width: 42rem; }

.llp-text-sm { font-size: 0.875rem; }
.llp-text-xs { font-size: 0.75rem; }

.llp-leading-snug    { line-height: 1.35; }
.llp-leading-normal  { line-height: 1.5; }
.llp-leading-relaxed { line-height: 1.7; }
.llp-leading-loose   { line-height: 1.8; }

/*
 * When page templates use wp:group (tagName main/section/div) WP injects
 * "is-layout-flow wp-block-group-is-layout-flow" plus a global rule:
 *   .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }
 * That rule ties our rules on specificity and, depending on load order,
 * wipes vertical rhythm inside our content wrappers. Re-assert margins
 * using higher specificity (prose class + is-layout-flow) so our values
 * always win.
 */
.llp-prose.is-layout-flow > h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.llp-prose.is-layout-flow > h2:first-child { margin-top: 0; }
.llp-prose.is-layout-flow > p { margin-bottom: 1rem; }
.llp-prose.is-layout-flow > ul,
.llp-prose.is-layout-flow > ol { margin-top: 0.5rem; margin-bottom: 1rem; }
.llp-prose__note.is-layout-flow > p { margin: 0; }

/* Section intro (centered heading + body above a grid) */
.llp-section-intro { text-align: center; margin-bottom: 2.5rem; }
.llp-section-intro p { max-width: 36rem; margin-inline: auto; color: var(--stone-600); line-height: 1.7; }
.llp-section-intro h2 { margin-bottom: 0.75rem; }

/* Inline Email/Phone on Contact page */
.llp-contact-form-placeholder {
  border: 1px dashed var(--stone-300);
  background: var(--stone-50);
  border-radius: var(--radius-lg);
  padding: 2rem 1.25rem; text-align: center;
  color: var(--stone-500); font-size: 0.875rem; line-height: 1.7;
}

/* ============================================================
   Accessibility — WCAG 2.2 AA
   Covers: 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured (NEW),
           2.5.8 Target Size Minimum (NEW), and related.
   ============================================================ */

/* Screen-reader-only text. Keeps content in the a11y tree but invisible. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visibility (2.4.7). Uses :focus-visible so mouse clicks don't
   trigger a ring but keyboard navigation / programmatic focus does. The
   ring has >= 3:1 contrast against both the background and the element. */
:where(a, button, summary, [tabindex], [role="button"], [role="link"],
       input, textarea, select):focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Buttons: combine a subtle halo with the outline for stronger visibility
   against coloured button surfaces. */
.llp-btn:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(51, 100, 69, 0.25);
}
.llp-btn--primary:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(51, 100, 69, 0.55);
}
/* Amber / crisis buttons — keep ring visible over warm backgrounds. */
.llp-crisis__button:focus-visible {
  outline: 2px solid var(--amber-900);
  outline-offset: 3px;
}
/* Nav link focus (higher z so ring isn't clipped by neighbours). */
.llp-nav__link:focus-visible,
.llp-nav__dropdown-trigger:focus-visible,
.llp-nav__dropdown-item:focus-visible,
.llp-footer__link:focus-visible,
.llp-footer__list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Focus Not Obscured (2.4.11 — NEW in WCAG 2.2). Sticky header is 4.5rem;
   when anything receives focus via skip-link / keyboard / anchor jumps the
   browser must scroll the target below the header, not behind it. */
html {
  scroll-padding-top: 5.5rem; /* header ~4.5rem + breathing room */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
:target,
#llp-main {
  scroll-margin-top: 5.5rem;
}
/* Skip-link destination (the <main>) must be focusable for the bypass
   block (2.4.1) to actually move keyboard focus. tabindex="-1" is added
   on the element itself; this rule just removes the default outline when
   we programmatically land on the landmark (the ring would be redundant). */
#llp-main:focus { outline: none; }
#llp-main:focus-visible { outline: none; }

/* Target Size — Minimum (2.5.8, NEW in 2.2). AA requires 24x24 CSS px for
   any pointer input target unless it is inline in a sentence (exception).
   Nav/footer/button padding already satisfies this, but small arrow-link
   patterns in blog sidebars and inline "more" style links need a floor. */
.llp-footer__list a,
.llp-footer__link,
.llp-footer__btn--small {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
/* Blog-sidebar related-article arrow links render with a small 12px icon
   + 0.875rem text. Ensure the tap target meets 24px even though the visual
   size appears smaller. */
.llp-link[style*="0.875rem"],
.llp-link {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
/* Exception: inline text links inside prose paragraphs — these are inline
   in a sentence and 2.5.8 explicitly exempts them. Reset min-height there
   so we don't create weird vertical rhythm in body copy. */
p .llp-link,
li .llp-link:not(.llp-footer__link) {
  min-height: auto;
  display: inline;
}

/* High-contrast mode: use CSS system colours so focus indicators survive
   forced-colors mode (Windows High Contrast). */
@media (forced-colors: active) {
  :where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}

/* ---------- Classes referenced by templates/patterns that needed rules ---- */

/* Small container variant used on the 404 + narrow marketing sections */
.llp-container--2xl { max-width: 42rem; }

/* Outline button variant (used on 404 secondary action) */
.llp-btn--outline {
  background: transparent;
  color: var(--brand-700);
  border: 1px solid var(--brand-300);
}
.llp-btn--outline:hover { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-800); }

/* Single-line crisis strip (e.g. 404 inline note) */
.llp-crisis__text { color: var(--amber-900); font-size: 0.875rem; line-height: 1.7; margin: 0; }

/* CTA variant wrapped in a bordered card (used on the Glossary page) */
.llp-cta__card {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
  text-align: center;
  max-width: var(--container-3xl);
  margin-inline: auto;
}
.llp-cta__heading {
  font-family: "Forum", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  color: var(--stone-800);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

/* Mobile menu submenu — reset native <details> chrome so our own styling shows through */
.llp-mobile-menu__group-details { list-style: none; }
.llp-mobile-menu__group-details::-webkit-details-marker { display: none; }
.llp-mobile-menu__group-details > summary { list-style: none; cursor: pointer; }
.llp-mobile-menu__group-details > summary::-webkit-details-marker { display: none; }
.llp-mobile-menu__group-details[open] > summary svg { transform: rotate(180deg); }
.llp-mobile-menu__group-details > summary svg { transition: transform 150ms ease; }

/* ---------- Hide WP native bits we don't want on the hm pages ------------- */
/* Some wp-block chrome leaks into templates; belt-and-braces reset. */
.wp-block-template-part .llp-header ul { list-style: none; }

/* =========================================================================
   Entrance animations
   Soft, one-way, never repeat. Tuned for a mental-health context:
   - Short travel (10–14px), long ease (~700ms), cubic-bezier easeOutQuart
   - Hero animates on first paint; everything else animates on scroll enter
   - Fires once per element; IntersectionObserver unobserves after reveal
   - Fully disabled for prefers-reduced-motion + print + no-JS users
   ========================================================================= */

:root {
  --llp-anim-distance: 12px;
  --llp-anim-duration: 700ms;
  --llp-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --llp-anim-stagger: 90ms;
}

/* Shared selector list for entrance animations — kept in sync with the
   SCROLL_SELECTOR/HERO_SELECTOR constants in assets/js/frontend.js. */
html.js :is(
  .llp-hero .llp-eyebrow,
  .llp-hero__title,
  .llp-hero__body,
  .llp-hero__meta,
  .llp-hero__actions,
  .llp-hero__media,
  .llp-hero__pill,
  .llp-pagehero .llp-eyebrow,
  .llp-pagehero__title,
  .llp-pagehero__body,
  .llp-pagehero__actions,
  .llp-pagehero__cta,
  .llp-pagehero__image,
  .llp-card,
  .llp-step,
  .llp-trust__item,
  .llp-fee,
  .llp-fee-card,
  .llp-service,
  .llp-service-card,
  .llp-post-card,
  .llp-pill,
  .llp-cta__card,
  .llp-section-intro,
  .llp-faq details,
  .llp-checklist__items > li,
  .llp-split__body,
  .llp-split__image,
  .llp-split__media,
  .llp-embed-placeholder,
  .llp-section > .llp-container > h2,
  .llp-section > .llp-container > .llp-eyebrow
) {
  opacity: 0;
  transform: translate3d(0, var(--llp-anim-distance), 0);
  transition:
    opacity var(--llp-anim-duration) var(--llp-anim-ease),
    transform var(--llp-anim-duration) var(--llp-anim-ease);
  transition-delay: calc(var(--llp-anim-i, 0) * var(--llp-anim-stagger));
}

html.js :is(
  .llp-hero .llp-eyebrow,
  .llp-hero__title,
  .llp-hero__body,
  .llp-hero__meta,
  .llp-hero__actions,
  .llp-hero__media,
  .llp-hero__pill,
  .llp-pagehero .llp-eyebrow,
  .llp-pagehero__title,
  .llp-pagehero__body,
  .llp-pagehero__actions,
  .llp-pagehero__cta,
  .llp-pagehero__image,
  .llp-card,
  .llp-step,
  .llp-trust__item,
  .llp-fee,
  .llp-fee-card,
  .llp-service,
  .llp-service-card,
  .llp-post-card,
  .llp-pill,
  .llp-cta__card,
  .llp-section-intro,
  .llp-faq details,
  .llp-checklist__items > li,
  .llp-split__body,
  .llp-split__image,
  .llp-split__media,
  .llp-embed-placeholder,
  .llp-section > .llp-container > h2,
  .llp-section > .llp-container > .llp-eyebrow
).is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce), print {
  html.js :is(
    .llp-hero .llp-eyebrow,
    .llp-hero__title,
    .llp-hero__body,
    .llp-hero__meta,
    .llp-hero__actions,
    .llp-hero__media,
    .llp-hero__pill,
    .llp-pagehero .llp-eyebrow,
    .llp-pagehero__title,
    .llp-pagehero__body,
    .llp-pagehero__actions,
    .llp-pagehero__cta,
    .llp-pagehero__image,
    .llp-card,
    .llp-step,
    .llp-trust__item,
    .llp-fee,
    .llp-fee-card,
    .llp-service,
    .llp-service-card,
    .llp-post-card,
    .llp-pill,
    .llp-cta__card,
    .llp-section-intro,
    .llp-faq details,
    .llp-checklist__items > li,
    .llp-split__body,
    .llp-split__image,
    .llp-split__media,
    .llp-embed-placeholder,
    .llp-section > .llp-container > h2,
    .llp-section > .llp-container > .llp-eyebrow
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}