/* ==========================================================================
   Simple Search — theme stylesheet
   Ported from the brand design system (tokens + foundation + page patterns).
   Enqueued as a single file by functions.php. Do not rely on theme.json
   alone for colour/type — most component styling lives here so the visual
   fidelity of the original design is preserved exactly.
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * Design tokens
 * ---------------------------------------------------------------------- */
:root {
  /* base ink / neutrals */
  --c-ink-900: #1c271f;
  --c-ink-700: #36433a;
  --c-ink-500: #5f6c62;
  --c-line-200: #ebe9e1;
  --c-line-300: #ddd9cd;
  --c-white: #ffffff;
  --c-off-white: #f6f7f2;

  /* brand hues */
  --c-amber-600: #d97829;
  --c-amber-700: #bd6318;
  --c-amber-100: #fbeede;
  --c-green-600: #2f7d4f;
  --c-green-100: #e7f0ea;
  --c-forest-900: #232f27;
  --c-cream-100: #f3efe2;

  /* semantic aliases */
  --ink: var(--c-ink-900);
  --ink-soft: var(--c-ink-700);
  --muted: var(--c-ink-500);
  --line: var(--c-line-200);
  --line-strong: var(--c-line-300);

  --page-bg: var(--c-white);
  --surface: var(--c-white);
  --surface-2: var(--c-off-white);

  /* primary accent — reserved for CTAs / calls to action */
  --accent: var(--c-amber-600);
  --accent-press: var(--c-amber-700);
  --accent-ink: var(--c-white);
  --accent-soft: var(--c-amber-100);
  --accent-ring: rgba(217, 120, 41, .22);

  /* secondary accent — everything else that isn't a CTA */
  --accent-2: var(--c-green-600);
  --accent-2-soft: var(--c-green-100);
  --accent-2-ring: rgba(47, 125, 79, .20);

  /* dark-glass surfaces (hero, CTA band) */
  --hero-dark: var(--c-forest-900);
  --hero-cream: var(--c-cream-100);

  --grad: linear-gradient(135deg, #e08a3a 0%, var(--c-amber-600) 100%);

  --shadow-sm: 0 1px 2px rgba(28, 39, 31, .05), 0 6px 16px rgba(28, 39, 31, .05);
  --shadow-lg: 0 2px 6px rgba(28, 39, 31, .07), 0 26px 56px -22px rgba(28, 39, 31, .26);

  --font-head: "Newsreader", Georgia, serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --head-tracking: -0.01em;
  --head-weight: 500;

  --text-hero: clamp(48px, 8vw, 104px);
  --text-h1: clamp(40px, 6.4vw, 76px);
  --text-h2: clamp(30px, 4.4vw, 46px);
  --text-h3: 20px;
  --text-lede: clamp(17px, 2vw, 21px);
  --text-body: 15.5px;
  --text-small: 13px;
  --text-eyebrow: 12.5px;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --radius: 18px;
  --radius-sm: 12px;
  --r-pill: 999px;
  --btn-radius: 10px;
  --card-radius: 16px;

  --ring: 0 0 0 4px var(--accent-ring);
  --t: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------------- *
 * Foundation — resets + shared utility classes
 * ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip, not hidden - per spec, an element with one axis set to
   a non-visible value and the other left visible has that visible axis
   silently promoted to auto, which was turning html/body into their own
   scroll containers. That broke every position:sticky element on the
   page (including the post sidebar and the text-image block) - sticky
   sticks relative to the nearest scroll-container ancestor, and this
   phantom body-level one wasn't the one actually driving the page's
   real scroll. clip suppresses the overflow the same as hidden without
   establishing a scroll container, so sticky resolves against the real
   viewport again. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  /* html's overflow-x:clip alone doesn't stop the page scrolling
     sideways - body itself defaults to overflow-x:visible, so it can
     still grow wider than the viewport (e.g. the news-slider carousel's
     intentionally-wide track, meant to scroll only within its own
     .news-slider-viewport) and become the thing that actually scrolls.
     Needs overflow-x:clip here too to actually clip it. */
  overflow-x: clip;
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent-press); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.08; letter-spacing: var(--head-tracking); font-weight: var(--head-weight); }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* Visually hidden but still available to screen readers - e.g. text
   alternatives for decorative glyphs like star ratings. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Page templates (see templates/page.html) wrap post-content in a Group
   constrained to a 760px contentSize, which was designed for plain text
   pages (Legal, Privacy Policy). Our ACF section blocks manage their own
   max-width via .wrap above, so every block sharing the .section class
   breaks out to full viewport width here regardless of what template or
   contentSize constraint it's placed inside. This keeps section blocks
   (Team, Contact info, Text, Text & Image, About, FAQ, etc.) matching the
   full-width design on every page automatically — new blocks that reuse
   .section don't need a bespoke breakout rule added for them. */
.section { padding-block: 75px; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* Editor-facing "Background" choice (group_ss_section_background.json) -
   white needs no class since it's every section's existing plain
   background; only the non-default choice needs a rule. */
.section-bg-green { background: var(--accent-2-soft); }
/* The breakout above only escapes the Group's horizontal contentSize —
   templates/page.html also gives that Group 64px of padding-top/bottom
   (needed for plain-text pages like Legal/Privacy). When a .section is the
   first or last block in the content, that vertical padding shows through
   as a stray white band between its background and the header/footer.
   Pull the section up/down into that padding with a matching negative
   margin so full-bleed backgrounds (e.g. the dark cta-dotted band) reach
   edge to edge, then pad by the section's own normal amount alone (not
   64px + that amount) - the negative margin already fully cancels the
   Group's 64px, so adding it a second time here just made the first/last
   section's gap much bigger than every other section's, instead of
   matching it. */
.entry-content > .section:first-child { margin-top: -64px; padding-top: 75px; }
.entry-content > .section:last-child { margin-bottom: -64px; padding-bottom: 75px; }
/* The homepage (templates/front-page.html) has no such Group wrapping
   its content at all, so the last-child compensation above - designed
   to pull into a 64px Group padding that doesn't exist there - just
   overlaps the footer by ~64px instead of closing a gap. Reset back to
   plain padding on the homepage specifically. */
.home .entry-content > .section:last-child { margin-bottom: 0; padding-bottom: 75px; }
.muted { color: var(--muted); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700; font-size: var(--text-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); margin: 0 0 16px;
  display: inline-flex; align-items: center; gap: 9px;
}

.shead { max-width: 640px; margin-bottom: clamp(28px, 3.6vw, 44px); }
.shead h1, .shead h2 { font-size: var(--text-h2); margin-bottom: 16px; }
.shead p, .shead > div { font-size: clamp(16px, 1.6vw, 18.5px); color: var(--muted); }

/* ---------- scroll reveal (fade-up on scroll into view) ----------
   Add class="reveal" to any section-level wrapper to fade+rise it in
   as it enters the viewport. Add class="reveal-stagger" to a grid/list
   container to fade its direct children in one after another instead.
   theme.js wires up the IntersectionObserver that toggles .is-inview —
   no extra JS needed per-block. Apply this convention to any new
   section or template going forward. */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
}
/* transform: none (not translateY(0)) once settled - a non-none transform,
   even at zero offset, creates a new containing block for descendant
   position:fixed elements (e.g. the reCAPTCHA badge), trapping them inside
   the section instead of docking to the real viewport corner. */
.reveal.is-inview { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
.reveal-stagger.is-inview > * { opacity: 1; transform: none; }
.reveal-stagger.is-inview > *:nth-child(1) { transition-delay: .04s; }
.reveal-stagger.is-inview > *:nth-child(2) { transition-delay: .11s; }
.reveal-stagger.is-inview > *:nth-child(3) { transition-delay: .18s; }
.reveal-stagger.is-inview > *:nth-child(4) { transition-delay: .25s; }
.reveal-stagger.is-inview > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.is-inview > *:nth-child(6) { transition-delay: .39s; }
.reveal-stagger.is-inview > *:nth-child(n+7) { transition-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- reCAPTCHA badge: collapse to icon, peek on hover ----------
   Google's own badge does not auto-collapse - it sits fully expanded
   ("protected by reCAPTCHA") in the corner permanently unless overridden.
   Force it collapsed to just the icon and reveal the full badge on
   hover/focus, matching the classic pattern Google documents for sites
   that want a quieter default. !important is required since Google's
   script re-applies its own inline "right" value. */
.grecaptcha-badge {
  right: -186px !important;
  transition: right .25s ease !important;
}
.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within {
  right: 14px !important;
}

/* Complianz's persistent "Manage Consent" re-open tab sits fixed at the
   same bottom-right corner as the reCAPTCHA badge above, so the two stack
   on top of each other (worst on mobile, where there's no room to offset
   them apart). Hidden here - the footer's "Manage Cookies" link
   (.js-manage-cookies, wired up in theme.js) reopens the same preferences
   modal by proxy-clicking this button, so it stays in the DOM (just
   invisible) rather than being removed outright. */
#cmplz-manage-consent { display: none !important; }

/* Inside the block editor canvas there's no real scrolling, so the
   IntersectionObserver that reveals .reveal/.reveal-stagger never fires.
   Force everything visible there so editors always see their content. */
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
}

/* The editor canvas doesn't get any of the .entry-content/.post-content-body
   prose spacing rules further down this file - those only apply on the
   front end, since the block editor renders core blocks under its own
   wrapper (.editor-styles-wrapper) with plain WordPress block classes, not
   the wrapper classes our templates add. Without this, paragraphs, headings
   and tables all sit at the browser/reset default spacing while editing,
   which reads as cramped compared to the published post. Mirror the same
   rhythm here so editing feels like a preview of the real page. */
.editor-styles-wrapper { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.editor-styles-wrapper .wp-block-paragraph,
.editor-styles-wrapper .wp-block-heading,
.editor-styles-wrapper .wp-block-list,
.editor-styles-wrapper .wp-block-quote,
.editor-styles-wrapper .wp-block-image,
.editor-styles-wrapper .wp-block-table,
.editor-styles-wrapper .wp-block-separator { margin-top: 1.4em; margin-bottom: 0; }
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper > .wp-block-paragraph:first-child,
.editor-styles-wrapper > .wp-block-heading:first-child { margin-top: 0; }
.editor-styles-wrapper h1.wp-block-heading { font-size: var(--text-h1); color: var(--ink); margin-top: 1.9em; }
.editor-styles-wrapper h2.wp-block-heading { font-size: var(--text-h2); color: var(--ink); margin-top: 1.9em; }
.editor-styles-wrapper h3.wp-block-heading { font-size: var(--text-h3); color: var(--ink); margin-top: 1.5em; }
.editor-styles-wrapper h4.wp-block-heading,
.editor-styles-wrapper h5.wp-block-heading,
.editor-styles-wrapper h6.wp-block-heading { font-size: 17px; color: var(--ink); margin-top: 1.4em; font-weight: var(--head-weight); }
.editor-styles-wrapper .wp-block-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.editor-styles-wrapper .wp-block-table th, .editor-styles-wrapper .wp-block-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
.editor-styles-wrapper .wp-block-table tr > th:last-child, .editor-styles-wrapper .wp-block-table tr > td:last-child { border-right: none; }
.editor-styles-wrapper .wp-block-table tr:last-child > td { border-bottom: none; }
.editor-styles-wrapper .wp-block-table th { background: var(--accent-2-soft); color: var(--accent-2); font-weight: 700; }
.editor-styles-wrapper .wp-block-table tbody tr:nth-child(even) td { background: var(--surface-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; border-radius: var(--btn-radius);
  padding: 14px 22px; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), color var(--t), background-color var(--t);
  white-space: nowrap;
}
.btn-primary { background-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background-color: var(--accent-press); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent-2); color: var(--accent-2); }
.btn-ghost-on-dark { background: rgba(255,255,255,.06); color: var(--hero-cream); border-color: rgba(243,239,226,.24); padding: 10px 18px; font-size: 14.5px; backdrop-filter: blur(4px); }
.btn-ghost-on-dark:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,.1); }
.btn-ghost-on-dark svg { flex-shrink: 0; }
.btn-lg { padding: 17px 28px; font-size: 16.5px; }
.btn-block { width: 100%; }
/* Every "big" primary CTA site-wide (cta-band, provider-cta, post-content/
   post-body inline CTAs, provider-hero, page-banner, text-block, text-image,
   care-section) uses this same .btn-primary.btn-lg combo, so one rule here
   covers all of them rather than needing a per-block override. */
@media (max-width: 640px) { .btn-primary.btn-lg { width: 100%; } }
.btn:disabled { opacity: .65; cursor: default; }
/* Buttons rendered inside a page's Post Content wrapper (any page, including
   the homepage) sit under ".entry-content a" further down this file, which
   sets an underline + green link color for prose links and ties or beats
   these single-class rules on specificity. Doubling the class here keeps our
   button component's own colors and no-underline style winning without
   changing that prose-link rule at all - every ".btn" on the site is
   protected by this, not just the ones that happen to have an extra
   wrapping class like ".cta-band .btn-primary" already did. */
.btn.btn { text-decoration: none; }
.btn.btn-primary { color: var(--accent-ink); }
.btn.btn-primary:hover { color: var(--accent-ink); }
.btn.btn-ghost { color: var(--ink); }
.btn.btn-ghost:hover { color: var(--accent-2); }
.btn.btn-ghost-on-dark { color: var(--hero-cream); }
.btn.btn-ghost-on-dark:hover { color: var(--accent); }

/* ---------- badges / pills ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft); box-shadow: var(--shadow-sm);
}
.badge svg { color: var(--accent-2); }
.stars { color: #f0b34a; letter-spacing: 1px; font-size: 15px; }

/* ---------- form-shell (used to frame a forms-plugin shortcode) ---------- */
.formcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow-lg); }
.wrap .formcard h2, .wrap .formcard h3 { font-size: clamp(24px, 2.8vw, 30px); margin-top: 0; margin-bottom: 4px; }
.formcard .sub { color: var(--muted); font-size: 14.5px; margin-bottom: 6px; }
.form-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.form-foot svg { color: var(--accent-2); }
.form-shortcode-placeholder { border: 1.5px dashed var(--line-strong); border-radius: 11px; padding: 18px; text-align: center; color: var(--muted); font-size: 13.5px; }
.formcard.on-dark .form-shortcode-placeholder { border-color: rgba(243,239,226,.28); color: rgba(243,239,226,.7); }

/* dark-glass variant — sits on the dotted dark-green background (hero, CTA band) */
.formcard.on-dark {
  position: relative;
  background: linear-gradient(158deg, rgba(46,64,52,.78), rgba(26,37,30,.66));
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(243,239,226,.16);
  box-shadow: 0 34px 70px -28px rgba(0,0,0,.62), inset 0 1px 0 rgba(243,239,226,.08);
  color: var(--hero-cream);
  --laser: 0;
  transition: box-shadow var(--t), border-color var(--t);
}
.formcard.on-dark::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--angle, 0deg), #ffd6a3 0deg, var(--accent) 16deg, transparent 46deg, transparent 314deg, var(--accent) 344deg, #ffd6a3 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--laser); transition: opacity .35s ease; pointer-events: none; z-index: 3;
}
.formcard.on-dark:hover { border-color: rgba(243,239,226,.05); box-shadow: 0 34px 70px -26px rgba(0,0,0,.66), 0 0 30px -6px rgba(217,120,41,.28), inset 0 1px 0 rgba(243,239,226,.1); }
.formcard.on-dark > * { position: relative; z-index: 1; }
.formcard.on-dark h2, .formcard.on-dark h3 { color: var(--hero-cream); }
.formcard.on-dark .sub { color: rgba(243,239,226,.72); }

/* ---------- Forminator forms (styled to match .formcard) ----------
   Forminator ships with no visual styling of its own, so every rule below
   targets its actual output classes directly (.forminator-row/-col/-field/
   -label/-input/-select/-checkbox/-radio/-button-submit etc.) - there's
   nothing to opt into on the Forminator side, this just re-skins whatever
   markup it renders. Written as light-card defaults first (matches
   .formcard on the Contact page), then overridden under .formcard.on-dark
   for the dark-glass callback card (hero, CTA band), the same split the
   rest of the theme uses for on-dark component variants.

   Forminator ships each form with its own generated stylesheet
   (/wp-content/uploads/forminator/{id}_.../css/style-{id}.css) that targets
   #forminator-module-{id} - an ID selector, which outranks any class-based
   override here regardless of load order. The layout/visual properties
   below use !important to guarantee this skin wins over that per-form CSS
   on every field type and on both the light (.formcard) and dark
   (.formcard.on-dark) card variants. */
.formcard .forminator-ui { color: inherit; }
.formcard .forminator-ui > br { display: none; }
.formcard .forminator-ui:not(:has(.forminator-row)) { display: none; }
.formcard .forminator-response-message:empty { display: none; margin: 0; }
.formcard .forminator-row { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; margin: 0 0 10px !important; }
.formcard .forminator-row.forminator-no-margin,
.formcard .forminator-row.forminator-row-last { margin: 0 !important; }
/* Forminator's own responsive grid gives non-last columns (e.g. the First
   Name / Last Name split inside its combined "Name" field type) a
   margin-bottom that's meant to create spacing once they stack on narrow
   viewports - but it's unconditional (not gated by a wrapping row's own
   gap), so it stacks on top of our row gap and doubles up the spacing.
   Zeroed here; the parent .forminator-row's gap already handles the space
   between stacked columns. Padding is zeroed too: the Name field type
   nests an inner .forminator-row/-col split inside its own outer
   .forminator-col wrapper, so Forminator's 15px column padding (meant to
   apply once, as a row gutter) applies twice there - once on the outer
   wrapper, once on each inner sub-column - insetting First/Last Name
   from the row edges that single-field rows like Email/Phone sit flush
   with. Our gap already provides the spacing padding was meant for. */
/* Most Forminator fields carry both "forminator-col" and a numbered
   "forminator-col-N" class, so the rule above already covers them - but
   the captcha field's wrapper only ever gets "forminator-col-12" alone.
   Under our forced flex row that leaves it with no basis, and it
   collapses to near-zero width (its consent-placeholder button then wraps
   into a tall, near-invisible sliver and reads as a large blank gap). */
.formcard .forminator-col,
.formcard .forminator-col-12 { flex: 1 1 0 !important; min-width: 160px !important; margin: 0 !important; padding: 0 !important; }
.formcard .forminator-field { margin-bottom: 10px !important; }
.formcard .forminator-row-last .forminator-field { margin-bottom: 0 !important; }

.formcard .forminator-label {
  display: block; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--ink); margin-bottom: 4px !important; letter-spacing: -.005em;
}
.formcard .forminator-required { color: var(--accent); margin-left: 2px; }
.formcard .forminator-description { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.formcard .forminator-input,
.formcard select.forminator-select,
.formcard .forminator-textarea-input,
.formcard .forminator-textarea {
  display: block; width: 100%; appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-size: 15px; color: var(--ink) !important;
  background: var(--surface-2) !important; border: 1.5px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 14px !important; transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.formcard select.forminator-select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%235f6c62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.formcard .forminator-textarea-input,
.formcard .forminator-textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.formcard .forminator-input::placeholder,
.formcard .forminator-textarea-input::placeholder,
.formcard .forminator-textarea::placeholder { color: var(--muted); opacity: 1; }
.formcard .forminator-input:focus,
.formcard select.forminator-select:focus,
.formcard .forminator-textarea-input:focus,
.formcard .forminator-textarea:focus {
  outline: none; border-color: var(--accent-2) !important; box-shadow: var(--ring); background: var(--surface) !important;
}
.formcard .forminator-has-error .forminator-input,
.formcard .forminator-has-error select.forminator-select,
.formcard .forminator-has-error .forminator-textarea-input,
.formcard .forminator-has-error .forminator-textarea { border-color: #c4453a !important; }
.formcard .forminator-error-message { display: block; font-size: 12.5px; color: #c4453a; margin-top: 6px; }

/* checkbox / radio - Forminator wraps each option in its own
   .forminator-checkbox / .forminator-radio row for RADIO fields, but a
   CONSENT/checkbox field renders a different structure: .forminator-field >
   .forminator-label ("Consent *") + .forminator-checkbox__wrapper, where the
   wrapper holds label.forminator-checkbox (native input + inert
   .forminator-checkbox-box span) as ONE sibling and a separate
   div.forminator-checkbox__label (the actual consent text/link) as another.
   The redundant "Consent *" label above the wrapper is hidden, and the
   native input is given a custom small-square appearance since accent-color
   alone reads too big/generic next to the tightened field spacing. */
.formcard .forminator-radio {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
}
.formcard .forminator-radio:last-child { margin-bottom: 0; }
.formcard .forminator-radio input[type="radio"] {
  width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--accent-2); cursor: pointer;
}
.formcard .forminator-radio label {
  font-size: 13.5px; line-height: 1.55; color: var(--muted); cursor: pointer;
}
.formcard .forminator-radio label a { color: var(--accent-2); text-decoration: underline; }

.formcard .forminator-field:has(> .forminator-checkbox__wrapper) > .forminator-label { display: none; }
.formcard .forminator-checkbox__wrapper {
  display: flex !important; align-items: flex-start !important; gap: 7px !important;
}
.formcard label.forminator-checkbox {
  display: flex !important; align-items: flex-start !important; flex: none; margin: 0 !important; cursor: pointer;
}
/* Forminator visually-hides the real <input type=checkbox> (1x1px, absolute
   - a standard accessible-hidden-input pattern) and renders the *visible*
   box as its sibling .forminator-checkbox-box span, drawing the check mark
   itself via a ::before with content:"✓" that Forminator's own CSS flips
   from opacity 0 -> 1 on :checked. So the native input is left alone here;
   only .forminator-checkbox-box is restyled to match the design. */
.formcard .forminator-checkbox-box {
  width: 17px !important; height: 17px !important; flex: 0 0 17px !important;
  border-radius: 4px !important; margin-top: 2px !important; position: relative;
  transition: border-color var(--t), background-color var(--t);
}
.formcard .forminator-checkbox-box:before { font-size: 11px !important; }
.formcard label.forminator-checkbox input:focus-visible + .forminator-checkbox-box {
  outline: none !important; box-shadow: var(--ring);
}
.formcard .forminator-checkbox__label {
  flex: 1 1 auto !important; min-width: 0 !important;
  font-size: 12px !important; line-height: 1.5 !important; color: var(--muted) !important;
}
.formcard .forminator-checkbox__label a { color: var(--accent-2); text-decoration: underline; }
/* Forminator's per-form generated stylesheet colours .forminator-checkbox-box
   via an ID-scoped selector (#forminator-module-{formID}...), which no
   class selector can out-rank on specificity no matter how many !important
   flags are stacked on it - so the box's colours have to be scoped to each
   form's actual module ID too. 295 = homepage/CTA callback form (on-dark),
   307 = contact-page "send us a message" form (light). If either form is
   ever recreated in Forminator (new module ID), update the IDs below. */
#forminator-module-307 .forminator-checkbox.forminator-consent .forminator-checkbox-box,
#forminator-module-307 .forminator-checkbox-box {
  border-color: var(--line-strong) !important;
  background-color: var(--surface-2) !important;
  color: var(--surface-2) !important;
}
#forminator-module-307 .forminator-checkbox input:checked + .forminator-checkbox-box {
  border-color: var(--accent-2) !important;
  background-color: var(--accent-2) !important;
  color: #fff !important;
}
#forminator-module-295 .forminator-checkbox.forminator-consent .forminator-checkbox-box,
#forminator-module-295 .forminator-checkbox-box {
  border-color: rgba(243,239,226,.3) !important;
  background-color: rgba(0,0,0,.22) !important;
  color: rgba(0,0,0,.22) !important;
}
#forminator-module-295 .forminator-checkbox input:checked + .forminator-checkbox-box {
  border-color: var(--accent) !important;
  background-color: var(--accent) !important;
  color: #fff !important;
}

.formcard .forminator-button-submit {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important;
  border: none !important; border-radius: var(--radius-sm) !important; background: var(--accent) !important; color: var(--accent-ink) !important;
  font-family: var(--font-body) !important; font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: -.005em;
  padding: 13px 24px !important; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.formcard .forminator-button-submit:hover { background: var(--accent-press) !important; box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.formcard .forminator-button-submit:disabled { opacity: .65; cursor: default; transform: none; }

/* dark-glass card variant (hero / CTA band callback form) */
.formcard.on-dark .forminator-label { color: var(--hero-cream); }
.formcard.on-dark .forminator-required { color: var(--accent); }
.formcard.on-dark .forminator-description { color: rgba(243,239,226,.62); }
.formcard.on-dark .forminator-input,
.formcard.on-dark select.forminator-select,
.formcard.on-dark .forminator-textarea-input,
.formcard.on-dark .forminator-textarea {
  background: rgba(0,0,0,.22) !important; border-color: rgba(243,239,226,.16) !important; color: var(--hero-cream) !important;
}
.formcard.on-dark select.forminator-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23f3efe2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.formcard.on-dark .forminator-input::placeholder,
.formcard.on-dark .forminator-textarea-input::placeholder,
.formcard.on-dark .forminator-textarea::placeholder { color: rgba(243,239,226,.45); }
.formcard.on-dark .forminator-input:focus,
.formcard.on-dark select.forminator-select:focus,
.formcard.on-dark .forminator-textarea-input:focus,
.formcard.on-dark .forminator-textarea:focus {
  border-color: var(--accent); background: rgba(0,0,0,.32);
  box-shadow: 0 0 0 4px rgba(217,120,41,.22);
}
.formcard.on-dark .forminator-radio label { color: rgba(243,239,226,.72); }
.formcard.on-dark .forminator-radio label a { color: var(--accent); }
.formcard.on-dark .forminator-radio input[type="radio"] { accent-color: var(--accent); }
.formcard.on-dark .forminator-checkbox__label { color: rgba(243,239,226,.62); }
.formcard.on-dark .forminator-checkbox__label a { color: var(--accent); }

/* Padding gets its own wider breakpoint (640px) separate from the rest of
   this compacting - the 480px cutoff below left plenty of phones (>480px
   logical width) stuck with the full desktop clamp(20-28px) card padding,
   which read as oversized next to the tightened field spacing. */
@media (max-width: 640px) { .formcard { padding: 16px !important; } }
@media (max-width: 480px) {
  .formcard h2, .formcard h3 { font-size: 21px !important; }
  .formcard .sub { margin-bottom: 5px !important; }
  .formcard .forminator-row { gap: 8px !important; margin: 0 0 8px !important; }
  .formcard .forminator-row.forminator-no-margin { gap: 8px !important; }
  .formcard .forminator-col { flex-basis: 100%; }
  .formcard .forminator-field { margin-bottom: 8px !important; }
  .formcard .forminator-label { margin-bottom: 3px !important; }
  .formcard .forminator-input,
  .formcard select.forminator-select,
  .formcard .forminator-textarea-input,
.formcard .forminator-textarea { padding: 9px 12px !important; }
  .formcard .forminator-textarea-input,
.formcard .forminator-textarea { min-height: 70px; }
  .formcard .forminator-button-submit { padding: 11px 20px !important; }
}

/* ---------- cards: step / value / review ---------- */
.steps, .values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.step { position: relative; padding: 30px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.step .num { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--accent-2); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-2-soft); margin-bottom: 20px; }
.step h3 { font-size: var(--text-h3); margin-bottom: 9px; }
.step p, .step .step-desc { color: var(--muted); font-size: 15px; }
.step .step-desc p + ul { margin-top: 12px; }
.step .step-desc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.step .step-desc li { position: relative; padding-left: 19px; }
.step .step-desc li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.step .step-desc strong { color: var(--ink); font-weight: 600; }

.value { padding: 4px; }
.value .ico { width: 50px; height: 50px; border-radius: 13px; background: var(--accent-2-soft); color: var(--accent-2); display: grid; place-items: center; margin-bottom: 18px; }
.value h3 { font-size: 19px; margin-bottom: 8px; }
.value p, .value .value-desc { color: var(--muted); font-size: 15px; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); padding: 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; }
.review .stars { font-size: 16px; }
.review p, .review .review-quote { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }
.review .who { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.review .who .av { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; text-align: center; line-height: 1; font-weight: 700; font-family: var(--font-head); font-size: 15px; flex: none; }
.review .who b { font-size: 14px; }
.review .who span { font-size: 12.5px; color: var(--muted); display: block; }

@media (max-width: 1040px) { .steps, .values, .review-grid { grid-template-columns: 1fr; } }

/* ---------- team grid ---------- */
/* Full-bleed width now handled globally by the shared .section rule above. */
.team-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 34px); }
.team-pill { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: 13.5px; font-weight: 600; transition: background var(--t), border-color var(--t), color var(--t); }
.team-pill:hover { border-color: var(--accent-2); color: var(--accent-2); }
.team-pill.is-active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 30px); }
@media (max-width: 1040px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }
/* .team-card is a <button> (opens the member's modal) styled to look
   exactly like the plain card it replaced - the reset properties below
   undo the browser's default button chrome (appearance, font, text-align,
   border/background) rather than being their own design choice. */
.team-card { display: block; width: 100%; appearance: none; font: inherit; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t), opacity var(--t); }
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.team-card.is-hidden { display: none; }
.team-card-photo { aspect-ratio: 1 / 1; background: var(--surface-2); position: relative; overflow: hidden; }
/* aspect-ratio on the img itself (height:auto), not a percentage height
   against this wrapper's aspect-ratio-derived size - percentage heights
   aren't guaranteed to resolve in that situation (confirmed live on the
   near-identical .news-tile-media case), so the img would intermittently
   fall back to its own intrinsic size instead of filling the box. */
.team-card-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.team-card-photo.no-image { display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--accent-2-soft), var(--surface-2)); }
.team-photo-fallback { color: var(--accent-2); opacity: .55; display: inline-flex; }
.team-card-body { padding: 18px 20px 22px; }
.team-card-name { font-size: 18px; margin-bottom: 3px; }
.team-card-role { color: var(--muted); font-size: 13.5px; font-weight: 600; }

/* ---------- team member profile modal ----------
   .team-modal-dialog reuses .formcard.on-dark wholesale (dark-glass
   background, blur, border, and the pointer-tracking "laser" edge - see
   that class further up) instead of duplicating the look - theme.js just
   extends the same pointermove listener to include it. This block only
   adds the modal-specific overlay/positioning/photo/contact layout. */
/* align-items:flex-start + padding-top:100px (rather than centering
   vertically) leaves the top 100px showing the underlying page, like a
   window opening over it rather than a centered popup. overflow-y:auto
   lives on this outer fixed layer, not the dialog itself below - so a
   bio too tall for the viewport scrolls the whole "window" naturally
   instead of trapping the text in its own small nested scrollbar. */
.team-modal {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center;
  padding: 100px 24px 40px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity var(--t), visibility 0s linear var(--t);
}
.team-modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--t); }
.team-modal-overlay { position: absolute; inset: 0; background: rgba(10,14,11,.68); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.team-modal-dialog {
  position: relative; z-index: 1; width: 100%; max-width: var(--maxw);
  display: flex; gap: 24px; align-items: flex-start; text-align: left;
  transform: scale(.96) translateY(8px); transition: transform var(--t);
}
.team-modal.is-open .team-modal-dialog { transform: scale(1) translateY(0); }
/* Back inside .team-modal-dialog, top-right corner of the card itself.
   position:absolute needs !important here: .team-modal-dialog also carries
   .formcard.on-dark, and ".formcard.on-dark > *" (further up, specificity
   0,2,0) was quietly beating this rule's plain ".team-modal-close"
   (0,1,0) and forcing it back to position:relative - which is why it was
   previously rendering in-flow as the dialog's first flex item (up at the
   photo's top-left) instead of positioned at the corner at all. */
.team-modal-close {
  position: absolute !important; top: 6px; right: 6px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--hero-cream); opacity: .8;
  transition: opacity var(--t);
}
.team-modal-close:hover { opacity: 1; }
.team-modal-photo { flex: 0 0 180px; width: 180px; height: 180px; border-radius: var(--card-radius); overflow: hidden; background: var(--surface-2); position: relative; }
.team-modal-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.team-modal-photo.no-image { display: flex; align-items: center; justify-content: center; background: rgba(243,239,226,.08); }
.team-modal-photo.no-image .team-photo-fallback { color: var(--hero-cream); opacity: .6; }
.team-modal-body { flex: 1; min-width: 0; }
.team-modal-bio { margin-top: 14px; }
.team-modal-bio p { color: rgba(243,239,226,.82); font-size: 14.5px; line-height: 1.65; margin: 0 0 10px; }
.team-modal-bio p:last-child { margin-bottom: 0; }
.team-modal-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px 20px; margin-top: 18px; }
/* text AND icon both the same light cream at rest, !important because a
   plain ".team-modal-contact a" rule here was still losing to something
   and rendering the base theme's green link colour - only shifting to the
   accent colour on hover, as an interaction cue rather than the resting
   colour. */
.team-modal-contact a, .team-modal-contact a svg { color: var(--hero-cream) !important; }
.team-modal-contact a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; opacity: .88; text-decoration: none; transition: opacity var(--t), color var(--t); }
.team-modal-contact a svg { flex: none; transition: color var(--t); }
.team-modal-contact a:hover { opacity: 1; }
.team-modal-contact a:hover, .team-modal-contact a:hover svg { color: var(--accent) !important; }
.team-modal-linkedin { width: 36px; height: 36px; border-radius: 50%; justify-content: center; background: rgba(243,239,226,.08); border: 1px solid rgba(243,239,226,.18); }
.team-modal-linkedin:hover { background: rgba(243,239,226,.14); border-color: var(--accent); }
@media (max-width: 560px) {
  .team-modal-dialog { flex-direction: column; align-items: center; text-align: center; }
  .team-modal-photo { margin: 0 auto; }
  .team-modal-contact { justify-content: center; }
}
/* Smaller top gap on narrow screens - keeps a hint of the "window over
   the page" effect without eating too much of a short mobile viewport. */
@media (max-width: 480px) { .team-modal { padding: 40px 14px 24px; } }
@media (prefers-reduced-motion: reduce) { .team-modal, .team-modal-dialog { transition: none; } }
body.team-modal-open { overflow: hidden; }

/* ---------- FAQ accordion ---------- */
.faq-list { display: flex; flex-direction: column; gap: 0; max-width: 860px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 4px; font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(17px, 1.9vw, 21px); color: var(--ink); transition: color var(--t); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-2); }
.faq-mark { position: relative; flex: none; width: 22px; height: 22px; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--accent-2); border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.faq-mark::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.faq-mark::after { top: 2px; left: 10px; width: 2px; height: 18px; }
.faq-item[open] summary { color: var(--accent-2); }
.faq-item[open] .faq-mark::after { transform: scaleY(0); opacity: 0; }
.faq-a { padding: 0 44px 24px 4px; }
.faq-a p, .faq-a { color: var(--muted); font-size: 15.5px; line-height: 1.65; max-width: 70ch; }

/* ---------- nav ---------- */
/* Hide-on-scroll-down slides this whole wrapper (utility bar + nav), not
   just .nav - .nav is only the lower of the two stacked bars, so sliding
   it alone always left the utility bar stuck at the top and the header
   never actually cleared the viewport. */
header.wp-block-template-part:has(#nav) { position: sticky; top: 0; z-index: 50; transform: translateY(0); transition: transform var(--t); }
header.wp-block-template-part:has(#nav).nav-hidden { transform: translateY(-100%); }
.nav { position: relative; z-index: 1; background: var(--hero-dark); border-bottom: 1px solid rgba(243,239,226,.05); transition: background var(--t); }
.nav.scrolled { background: var(--hero-dark); }
.nav .wrap { display: flex; align-items: center; gap: 20px; padding-block: 15px; max-width: none; padding-inline: clamp(18px, 3.5vw, 52px); transition: padding-block var(--t); }
.nav.scrolled .wrap { padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--hero-cream); flex: none; white-space: nowrap; }
/* The new lockup SVG (assets/logo/simple-search-lockup-v2.svg) is cropped
   tight to its artwork with no internal padding, unlike the previous file
   which had ~30% empty margin baked into its viewBox. Heights below are
   tuned for that tight crop so the full wordmark reads at a proportionate
   size next to nav/footer text, rather than the old numbers which assumed
   a mostly-empty bounding box. */
.wordmark { height: 24px; width: auto; display: block; transition: height var(--t); }
.nav.scrolled .wordmark { height: 20px; }
.footer .wordmark { height: 26px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* Scoped to "> ul > li > a" (top-level items only), not a bare ".nav-links a"
   descendant selector - the mega menu's own links (.nav-mega-list,
   .nav-mega-preview) live many levels deeper inside .nav-item-mega and need
   their own dark-on-light colours (they sit on the light green panel, not
   the dark nav bar), which a descendant selector here would otherwise force
   into this light-on-dark cream via !important with no way to win it back. */
.nav-links > ul > li > a, .nav-links .wp-block-navigation-item > a { padding: 9px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: rgba(243,239,226,.82) !important; white-space: nowrap; transition: background var(--t), color var(--t); }
.nav-links > ul > li > a:hover, .nav-links .wp-block-navigation-item > a:hover { background: rgba(243,239,226,.1); color: #fff !important; }

/* ---------- nav mega menu ("Medical Insurance") ----------
   .nav-item-mega is deliberately left position:static so .nav-mega's
   position:absolute resolves against .nav (the nearest positioned
   ancestor, and already edge-to-edge) instead of the <li> itself - using
   the <li> as the containing block was tried and reverted: left:50% is
   50% of THAT element's own (small, off-centre) box, not the viewport, so
   the panel ended up positioned off to wherever the trigger happened to
   sit rather than spanning/centred on the page. Anchoring to .nav instead
   means top:100% starts right at the bottom of the whole nav bar (so it
   reliably appears below it, not overlapping) and left:0/right:0 span its
   full width with no viewport-width hack needed.

   That reintroduces a small vertical gap between the trigger link and the
   panel below it (nav bar padding), which is the classic reason a hover
   dropdown "closes if you move the mouse toward it" - crossing the gap
   drops :hover before the pointer reaches the panel. That's handled by
   JS's close-delay instead (.is-open, cancelled if the pointer/focus comes
   back anywhere in .nav-item-mega before it fires - see the "nav mega
   menu" block in theme.js), which comfortably absorbs crossing a gap that
   small. :hover/:focus-within stay on as a no-JS fallback. JS also handles
   swapping which .nav-mega-preview-panel is shown as each .nav-mega-list
   link is hovered/focused. */
.nav-mega-trigger-icon { display: inline-flex; margin-left: 2px; transform: rotate(-90deg); transition: transform var(--t); }
.nav-item-mega:hover .nav-mega-trigger-icon, .nav-item-mega:focus-within .nav-mega-trigger-icon, .nav-item-mega.is-open .nav-mega-trigger-icon { transform: rotate(90deg); }
.nav-mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--accent-2-soft); border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility 0s linear var(--t);
}
.nav-item-mega:hover .nav-mega, .nav-item-mega:focus-within .nav-mega, .nav-item-mega.is-open .nav-mega {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--t), transform var(--t);
}
/* Replicates the generic .wrap class's own centering (width/max-width/
   margin-inline/padding-inline) directly rather than actually using that
   class - .nav-mega-inner sits inside .nav, and ".nav .wrap" (higher
   specificity: 2 classes vs. this rule's 1) was silently overriding
   almost everything here, including align-items - centre wasn't just a
   fallback, it was actively winning over the stretch this needed to match
   .nav-mega-list's height. */
.nav-mega-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: stretch; gap: clamp(32px, 4vw, 64px); padding-block: 36px; }
.nav-mega-list { flex: 0 0 260px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-mega-list li { width: 100%; }
.nav-mega-list a { display: block; width: 100%; padding: 11px 14px; text-align: left; color: var(--ink); font-weight: 600; font-size: 15px; transition: padding-left var(--t), color var(--t); }
.nav-mega-list a:hover, .nav-mega-list a:focus, .nav-mega-list a.is-active { padding-left: 22px; color: var(--accent-2); }
.nav-mega-preview { flex: 1; position: relative; min-height: 168px; }
/* height:100% cascades the row's stretched height (set by .nav-mega-list,
   the taller of the two columns) down through .nav-mega-preview - itself
   stretched to that height by .nav-mega-inner's default flex stretch -
   so .nav-mega-preview-media has something definite to match via
   align-self:stretch below, rather than sizing to a fixed aspect-ratio
   that left it shorter than the link list next to it. */
.nav-mega-preview-panel { display: none; height: 100%; gap: 24px; align-items: center; }
.nav-mega-preview-panel.is-active { display: flex; }
/* align-self:stretch (not the panel's inherited align-items:center) so the
   image alone fills that full height while .nav-mega-preview-body keeps
   its natural, vertically-centred size. */
.nav-mega-preview-media { flex: 0 0 200px; align-self: stretch; position: relative; border-radius: var(--card-radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
/* position:absolute + inset:0 (same pattern as .news-tile-media) rather
   than a percentage height on the img - guarantees it fills the box
   exactly regardless of the source image's own intrinsic aspect ratio. */
/* top/left only, not the inset:0 shorthand - inset:0 sets all four offsets,
   which combined with explicit width/height over-constrains a replaced
   element (img) and gets resolved by miscomputing the height instead of
   just using it, ending up sized off the image's own intrinsic aspect
   ratio rather than the box. top+left (leaving right/bottom auto) isn't
   over-constrained, so width/height:100% resolve correctly. */
.nav-mega-preview-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-mega-preview-media.no-image { display: grid; place-items: center; color: var(--accent-2); }
.nav-mega-preview-body .nav-mega-preview-title { font-size: 19px; margin: 0 0 8px; color: var(--ink); font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.08; letter-spacing: var(--head-tracking); }
.nav-mega-preview-body p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav .btn-primary { transition: padding var(--t), font-size var(--t), background-color var(--t); }
.nav.scrolled .nav-cta .btn-primary { padding: 9px 16px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(243,239,226,.18); border-radius: 10px; background: rgba(243,239,226,.08); color: var(--hero-cream); align-items: center; justify-content: center; }
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
  .nav-search-toggle { margin-left: auto; }
}

.util { background: var(--hero-dark); color: #fff; font-size: 13px; letter-spacing: .01em; border-bottom: 1px solid rgba(243,239,226,.12); }
.util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 9px; max-width: none; padding-inline: clamp(20px, 4vw, 56px); }
.util-left { display: flex; align-items: center; gap: 10px; opacity: .92; min-width: 0; flex: 1 1 auto; }
.util-right { display: flex; align-items: center; gap: 20px; flex: none; }
.util a { display: inline-flex; align-items: center; gap: 7px; opacity: .92; transition: opacity var(--t); color: inherit; }
.util a:hover { opacity: 1; }
.util .dot { width: 6px; height: 6px; border-radius: 50%; background: #59e0a8; box-shadow: 0 0 0 3px rgba(89,224,168,.22); flex: none; }
.fca-line { white-space: nowrap; }
.fca-ticker { display: block; overflow: hidden; min-width: 0; flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fca-ticker-track { display: flex; align-items: center; width: max-content; gap: 14px; animation: ticker-scroll 28s linear infinite; }
.fca-ticker-track span { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fca-ticker-track { animation: none; } }

/* ---------- mobile utility / nav compacting ---------- */
@media (max-width: 640px) {
  .hide-mobile { display: none; }
  .util-right { gap: 14px; }
  .util-right svg { width: 20px; height: 20px; }
  /* Hide the whole .nav-cta wrapper, not just the button inside it - an
     empty-but-present flex item still eats a gap slot in .nav .wrap, which
     was shoving the search icon away from the burger next to it. */
  .nav-cta { display: none; }
}

/* ---------- nav search (icon toggle, replaces nav-links when open) ---------- */
.nav-search {
  display: none; align-items: center; gap: 0; min-width: 0;
  background: rgba(243,239,226,.08); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(243,239,226,.2); border-radius: var(--btn-radius); padding: 3px; box-shadow: var(--shadow-sm);
}
.nav.search-open .nav-search { display: flex; flex: 0 1 440px; min-width: 0; max-width: 440px; margin-left: auto; }
.nav.search-open .nav-links { display: none; }
.nav-search input[type="search"] {
  flex: 1; min-width: 0; appearance: none; -webkit-appearance: none;
  background: transparent; border: none;
  border-radius: calc(var(--btn-radius) - 3px) 0 0 calc(var(--btn-radius) - 3px);
  padding: 9px 12px; font-size: 14.5px; font-family: inherit; color: var(--hero-cream);
  transition: background var(--t);
}
.nav-search input[type="search"]::placeholder { color: rgba(243,239,226,.5); }
.nav-search input[type="search"]:focus { outline: none; background: rgba(243,239,226,.1); }
.nav-search-submit {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 37px; border: none;
  border-radius: calc(var(--btn-radius) - 3px); background: var(--accent); color: #fff;
  transition: background var(--t);
}
.nav-search-submit:hover { background: var(--accent-press); }
.nav-search-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border: 1px solid transparent; border-radius: var(--btn-radius);
  background: transparent; color: var(--hero-cream); transition: background var(--t), border-color var(--t);
}
.nav-search-toggle:hover { background: rgba(243,239,226,.1); }
.nav-search-toggle-icon.icon-close { display: none; }
.nav.search-open .nav-search-toggle .icon-search { display: none; }
.nav.search-open .nav-search-toggle .icon-close { display: inline-flex; }
@media (max-width: 1040px) {
  .nav.search-open .nav-cta, .nav.search-open .burger { display: none; }
  .nav.search-open .nav-search {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0; max-width: none; flex-basis: auto;
    padding: 10px clamp(18px, 3.5vw, 52px); border-radius: 0; border-left: none; border-right: none; border-top: 1px solid rgba(243,239,226,.14);
    background: var(--hero-dark); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

.mobile-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 49;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px);
  background: var(--hero-dark); border-bottom: 1px solid rgba(243,239,226,.08);
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease .04s, transform .3s ease .04s;
  pointer-events: none;
}
@media (max-width: 1040px) {
  .mobile-menu.open { max-height: 640px; opacity: 1; transform: translateY(0); overflow-y: auto; pointer-events: auto; }
  .mobile-menu .wrap { display: flex; flex-direction: column; gap: 2px; padding-block: 12px; }
  .mobile-menu a, .mobile-menu .wp-block-navigation-item > a { padding: 13px 8px; font-size: 16px; font-weight: 500; border-radius: 9px; color: var(--hero-cream) !important; display: block; }
  .mobile-menu a:hover, .mobile-menu .wp-block-navigation-item > a:hover { background: rgba(243,239,226,.08); }
  .mobile-menu-cta { align-self: flex-start; width: auto; margin-top: 10px; padding-left: 26px !important; padding-right: 26px !important; }

  /* "Medical Insurance" etc. on mobile - a native <details> disclosure
     instead of the desktop hover mega menu, so it stays simple (plain
     links, no image/excerpt preview) and works without JS. */
  .mobile-submenu summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 8px; font-size: 16px; font-weight: 500; color: var(--hero-cream); border-radius: 9px; cursor: pointer; list-style: none; }
  .mobile-submenu summary::-webkit-details-marker { display: none; }
  .mobile-submenu summary:hover { background: rgba(243,239,226,.08); }
  .mobile-submenu-icon { display: inline-flex; flex: none; transform: rotate(-90deg); transition: transform var(--t); }
  .mobile-submenu[open] .mobile-submenu-icon { transform: rotate(90deg); }
  .mobile-submenu ul { list-style: none; margin: 0; padding: 2px 0 6px; }
  .mobile-submenu ul a { padding-left: 24px; font-size: 15px; opacity: .88; }
}

/* ---------- breadcrumbs ---------- */
.ss-breadcrumbs { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ss-breadcrumbs .wrap { padding-block: 12px; }
.ss-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.ss-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.ss-breadcrumbs li:not(:first-child)::before { content: "/"; color: var(--line-strong); }
.ss-breadcrumbs a { color: var(--muted); text-decoration: none; }
.ss-breadcrumbs a:hover { color: var(--accent-2); text-decoration: underline; }
.ss-breadcrumbs span[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */
.footer { background: var(--hero-dark); color: #cdd6c9; padding-block: clamp(48px, 6vw, 72px) 32px; }
.footer .top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer .brand { color: #fff; margin-bottom: 16px; }
.footer .blurb { font-size: 14.5px; max-width: 320px; line-height: 1.6; opacity: .8; }
.footer h3 { font-family: var(--font-body); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 16px; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { font-size: 14.5px; color: inherit; opacity: .85; transition: opacity var(--t); }
.footer ul a:hover { opacity: 1; color: #fff; }
.footer .legal { padding-top: 26px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; opacity: .62; line-height: 1.6; }
.footer-search { display: flex; align-items: center; gap: 0; margin-top: 20px; max-width: 300px; }
.footer-search input[type="search"] {
  flex: 1; min-width: 0; appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-right: none;
  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
  padding: 10px 13px; font-size: 13.5px; font-family: inherit; color: #fff;
  transition: background var(--t), border-color var(--t);
}
.footer-search input[type="search"]::placeholder { color: rgba(255,255,255,.42); }
.footer-search input[type="search"]:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.1); }
.footer-search button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 39px; border: 1px solid rgba(255,255,255,.16); border-left: none;
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0; background: var(--accent); color: #fff;
  transition: background var(--t);
}
.footer-search button:hover { background: var(--accent-press); }
.footer-social { margin-top: 26px; }
.footer-social h3 { margin-bottom: 12px; }
.footer-social-links { display: flex; gap: 10px; }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.78);
  transition: border-color var(--t), color var(--t), background var(--t), transform var(--t);
}
.footer-social-link:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,.06); transform: translateY(-2px); }
@media (max-width: 1040px) { .footer .top { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 600px) { .footer .top { grid-template-columns: 1fr; } }

/* ---------- ticker (auto-scrolling logo/review rows) ---------- */
.ticker { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker-track { display: flex; align-items: center; width: max-content; gap: clamp(18px, 3vw, 48px); will-change: transform; }
.ticker-track.is-anim { animation: ticker-scroll var(--tk-dur, 40s) linear infinite; }
.ticker:hover .ticker-track.is-anim { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.plogo { font-family: var(--font-head); font-weight: 600; font-size: clamp(13px, 1.5vw, 16px); color: var(--ink-soft); letter-spacing: -.01em; opacity: .72; transition: opacity var(--t), color var(--t); white-space: nowrap; flex: none; display: flex; align-items: center; justify-content: center; width: 120px; height: 52px; }
.plogo:hover { opacity: 1; color: var(--accent-2); }
.plogo small { font-weight: 500; font-size: .55em; letter-spacing: .04em; vertical-align: super; opacity: .7; }

/* ---------- dark dotted-grid backdrop + breathing dots ---------- */
.dotted-grid, .hero, .cta-dotted {
  background:
    radial-gradient(rgba(243,239,226,.09) 1.6px, transparent 1.7px) 0 0 / 26px 26px,
    radial-gradient(120% 90% at 88% -10%, #2c3a30 0%, rgba(44,58,48,0) 55%),
    var(--hero-dark);
}
.hero, .cta-dotted, .news-banner, .post-banner, .page-banner { position: relative; overflow: clip; }
.breath-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.breath-dot { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: scale(.5); opacity: .3; transform-origin: center; animation: breath var(--dur, 5s) ease-in-out var(--delay, 0s) infinite; }
@keyframes breath { 0%, 100% { transform: scale(.45); opacity: .22; } 50% { transform: scale(1.5); opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .breath-dot, .extra, .cta-band::before, .formcard.on-dark::before { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------------- *
 * Page-composition patterns (per-section, homepage-specific)
 * ---------------------------------------------------------------------- */

/* ---------- hero (estate direction) ---------- */
.hero-estate .wrap { padding-block: clamp(52px, 7vw, 92px); display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(34px, 5vw, 76px); align-items: center; position: relative; }
/* The page's real <h1> for SEO - small and orange like the sitewide
   .eyebrow style, but using --accent (amber) instead of .eyebrow's own
   --accent-2 (green), since amber is otherwise reserved for CTAs only.
   Deliberate one-off here: this text is never a call to action, but it
   needs to visually read as "not the main heading" even though it's the
   semantic one, and the brand's two accent colours are the only two
   available - amber contrasts better against the dark hero than green
   does at this small size. */
.hero-estate .estate-h1-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--text-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.hero-estate .estate-pre { font-family: var(--font-body); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); color: var(--hero-cream); opacity: .82; margin-bottom: 6px; }
.hero-estate .estate-title { font-family: var(--font-head); font-weight: 500; color: var(--hero-cream); font-size: var(--text-hero); line-height: .96; letter-spacing: -.02em; margin: 0; position: relative; display: inline-block; }
.hero-estate .estate-title .dot { color: var(--accent); }
.hero-estate .estate-title .pmi { font-family: var(--font-body); font-weight: 700; font-size: .26em; letter-spacing: .08em; color: var(--accent); vertical-align: middle; margin-left: .35em; text-transform: uppercase; }
.hero-estate .estate-sub { color: rgba(243,239,226,.78); font-size: clamp(16px, 1.7vw, 19px); max-width: 44ch; margin: 22px 0 0; line-height: 1.6; }
.hero-estate .badges { margin-top: 28px; }
.hero-estate .badge { background: rgba(255,255,255,.07); border-color: rgba(243,239,226,.16); color: var(--hero-cream); box-shadow: none; backdrop-filter: blur(4px); }
.hero-estate .badge svg { color: var(--accent); }
.hero-estate .formcard { justify-self: end; width: 100%; max-width: 446px; }
@media (max-width: 880px) { .hero-estate .wrap { grid-template-columns: 1fr; } .hero-estate .formcard { justify-self: stretch; max-width: 560px; } }

/* ---------- providers strip ---------- */
.providers { border-block: 1px solid var(--line); }
.providers .wrap { padding-block: 30px 18px; }
.providers .lead { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.providers .ticker-track { padding-inline: clamp(4px, 1vw, 12px); gap: clamp(24px, 8vw, 56px); }
/* Full width of .wrap (equal margins both sides, matching the "We
   compare..." lead text on the left and the wrap's own right edge) rather
   than a narrower centered box - more logos are welcome to fill that width
   (see theme.js/ss_field for the providers list). Tighter mask stops than
   the base .ticker so the fade hugs this box's own edges instead of eating
   a big chunk of it - kept scoped here rather than changed on .ticker so
   the reviews ticker elsewhere keeps its wider fade. */
.providers .ticker {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
.providers-caption { text-align: left; font-size: 13px; color: var(--muted); margin: 22px 0 0; }

/* ---------- reviews header ---------- */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.tp-summary { display: flex; align-items: center; gap: 13px; }
.tp-stars { display: inline-flex; gap: 3px; }
.tp-stars span { width: 25px; height: 25px; background: #00b67a; color: #fff; display: grid; place-items: center; font-size: 14px; border-radius: 3px; line-height: 1; }
.tp-meta { line-height: 1.35; }
.tp-score { font-size: 15px; color: var(--ink); }
.tp-score strong { font-weight: 700; }
.tp-by { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tp-name { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink); }
.reviews-ticker .ticker-track { padding: 8px clamp(8px,1.5vw,14px); }
.reviews-ticker .review { flex: none; width: min(360px, 80vw); }

/* ---------- care / photography ---------- */
.care .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.care .care-media { display: block; height: 100%; }
.care .care-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow-lg); }
.care .care-text h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.care .care-text > p, .care .care-text .care-desc { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); margin-bottom: 26px; max-width: 46ch; }
.care .points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.care .points li { display: flex; gap: 14px; align-items: flex-start; }
.care .points .pin { flex: none; width: 38px; height: 38px; border-radius: 8px; background: var(--accent-2-soft); color: var(--accent-2); display: grid; place-items: center; }
.care .points b { display: block; font-family: var(--font-head); font-size: 18px; font-weight: var(--head-weight); margin-bottom: 2px; }
.care .points span { color: var(--muted); font-size: 15px; }
@media (max-width: 880px) {
  .care .wrap { grid-template-columns: 1fr; }
  .care .care-media { order: 2; height: auto; }
  .care .care-media img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
}

/* ---------- text block (single column) ---------- */
/* Cap the copy's own width rather than .wrap's - .wrap still inherits the
   base .wrap's margin-inline:auto, so shrinking max-width there recenters
   this narrower box in the middle of the page instead of keeping it flush
   with the full-width .wrap every other section around it uses. */
.text-block h2, .text-block-body { max-width: 760px; }
.text-block h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.text-block .eyebrow { display: block; margin-bottom: 10px; }
.text-block-body { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); }
.text-block-body p:last-child { margin-bottom: 0; }
.text-block .btn { margin-top: 24px; }

/* ---------- text & image ---------- */
/* .text-image-text stays at its own natural/intrinsic height (default
   align-items: start) - that's what theme.js's matchTextImageHeight
   measures to compute the image's clamped height. If text stretched to
   the row too, measuring it would pick up the already-stretched height
   instead of its real content height - a feedback loop where a
   previously-tall image keeps the row (and thus the measured "text"
   height) tall even after the text itself gets shorter.
   position: sticky goes on .text-image-media - the grid ITEM - rather
   than on the <img>/placeholder inside it. Per the grid spec, a sticky
   grid item's containing block is its grid AREA (the full row height),
   regardless of the item's own align-self - so it doesn't need
   align-self:stretch to have room to move; sticking the <img> itself
   (a descendant, not the grid item) doesn't get that same grid-area
   containing block and silently doesn't stick at all - confirmed live,
   the "stuck" image just scrolled normally, 1:1 with the page.
   The image/placeholder's own height is set in px by theme.js, clamped
   between --tim-min/--tim-max below (a plain height:100% works fine for
   stretch-to-match, but height:clamp(MIN,100%,MAX) proved unreliable -
   some browsers fall back to the <img>'s intrinsic aspect ratio instead
   of resolving the percentage against the grid row - hence clamping in
   JS against a measured pixel value instead). Once text is taller than
   --tim-max, the sticky media column holds the image in view (offset by
   the same 96px used for the post sidebar's sticky offset elsewhere)
   while the text keeps scrolling past it. */
.text-image .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: start; --tim-min: 360px; --tim-max: 640px; }
.text-image-media { position: sticky; top: 96px; }
.text-image.is-image-right .text-image-media { order: 2; }
.text-image.is-image-right .text-image-text { order: 1; }
.text-image.is-image-left .text-image-media { order: 1; }
.text-image.is-image-left .text-image-text { order: 2; }
.text-image-media img,
.text-image-placeholder {
	height: var(--tim-min); /* JS overrides this with the measured/clamped px value once it runs */
}
.text-image-media img { width: 100%; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow-lg); display: block; }
.text-image-placeholder { background: var(--surface-2); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
.text-image-text h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.text-image-text .eyebrow { display: block; margin-bottom: 10px; }
.text-image-body { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); }
.text-image-body p:last-child { margin-bottom: 0; }
.text-image .btn { margin-top: 24px; }
@media (max-width: 880px) {
	.text-image .wrap { grid-template-columns: 1fr; }
	.text-image-media, .text-image.is-image-right .text-image-media, .text-image.is-image-left .text-image-media { order: 2; }
	.text-image-text, .text-image.is-image-right .text-image-text, .text-image.is-image-left .text-image-text { order: 1; }
	/* Stacked, there's no text column left to match height to, and no room
	   for the image to stick within - swap both for a fixed 16:9 ratio. */
	.text-image-media { position: static; }
	.text-image-media img, .text-image-placeholder { height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- contact info ---------- */
.contact-info .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-info h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.contact-info-intro { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); margin-bottom: 28px; max-width: 46ch; }
.contact-facts { list-style: none; margin: 0 0 clamp(28px, 3.4vw, 40px); padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-facts li { display: flex; gap: 14px; align-items: flex-start; }
.contact-facts .pin { flex: none; width: 38px; height: 38px; border-radius: 8px; background: var(--accent-2-soft); color: var(--accent-2); display: grid; place-items: center; }
.contact-facts b { display: block; font-family: var(--font-head); font-size: 15.5px; font-weight: var(--head-weight); margin-bottom: 2px; }
.contact-facts address, .contact-facts a { color: var(--muted); font-size: 15px; font-style: normal; }
.contact-facts a { text-decoration: none; }
.contact-facts a:hover { color: var(--accent-2); }
.contact-hours { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); padding: clamp(20px, 2.6vw, 28px); }
.contact-hours-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.contact-hours-head h3 { font-size: 18px; margin: 0; }
.hours-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; }
.hours-status .dot { width: 8px; height: 8px; border-radius: 50%; }
.hours-status.is-open { background: var(--accent-2-soft); color: var(--accent-2); }
.hours-status.is-open .dot { background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-2-soft); }
.hours-status.is-closed { background: var(--surface-2); color: var(--muted); }
.hours-status.is-closed .dot { background: var(--muted); }
.hours-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hours-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--muted); padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.hours-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.hours-list .day { color: var(--ink); font-weight: 600; }
.hours-list li.is-today .day, .hours-list li.is-today .time { color: var(--accent-2); font-weight: 700; }
.contact-form-card { position: sticky; top: 100px; }
@media (max-width: 880px) { .contact-info .wrap { grid-template-columns: 1fr; } .contact-form-card { position: static; } }

/* ---------- cost estimate calculator ---------- */
.calc { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(20px,3vw,34px); align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); padding: clamp(22px,3vw,38px); box-shadow: var(--shadow-lg); }
.calc-form { display: flex; flex-direction: column; gap: 20px; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-field { display: flex; flex-direction: column; gap: 9px; }
.calc-label { display: flex; align-items: center; justify-content: space-between; }
.calc-label label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.calc-label output { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--accent-2); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--accent-2-soft); outline: none; accent-color: var(--accent-2); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-2); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-2); border: 3px solid #fff; cursor: pointer; }
.select { width: 100%; border: 1.5px solid var(--line-strong); border-radius: 11px; padding: 13px 14px; font-size: 15.5px; font-family: inherit; color: var(--ink); background: var(--surface); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235d7088' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; transition: border-color var(--t), box-shadow var(--t); }
.select:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--ring); }
.segmented { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; gap: 4px; }
.segmented button { flex: 1; border: none; background: transparent; padding: 10px 12px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--muted); transition: var(--t); white-space: nowrap; }
.segmented button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); padding: 8px 14px 8px 10px; border-radius: 999px; position: relative; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .tg { width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; transition: var(--t); flex: none; }
.toggle .tg::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition: var(--t); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.toggle input:checked + .tg { background: var(--accent-2); }
.toggle input:checked + .tg::after { transform: translateX(16px); }
.toggle input:focus-visible + .tg { box-shadow: 0 0 0 4px var(--accent-2-ring); }
.toggles { display: flex; gap: 12px; flex-wrap: wrap; }
.info { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.4px solid var(--muted); color: var(--muted); font-size: 10px; font-weight: 700; font-style: italic; font-family: Georgia, serif; line-height: 1; cursor: help; position: relative; margin-left: 5px; vertical-align: middle; transition: var(--t); }
.info:hover, .info:focus-visible { background: var(--accent-2); border-color: var(--accent-2); color: #fff; outline: none; }
.info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); width: 218px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; font-style: normal; font-family: var(--font-body); letter-spacing: normal; text-transform: none; line-height: 1.45; padding: 10px 12px; border-radius: 9px; opacity: 0; visibility: hidden; transition: var(--t); z-index: 30; box-shadow: var(--shadow-lg); pointer-events: none; }
.info::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); opacity: 0; visibility: hidden; transition: var(--t); z-index: 30; }
.info:hover::after, .info:focus-visible::after, .info:hover::before, .info:focus-visible::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; }
.extra { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 13px 15px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color var(--t), background var(--t), box-shadow var(--t); }
.extra input { position: absolute; opacity: 0; pointer-events: none; }
.extra-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.extra-sub { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.extra:hover { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.extra:has(input:checked) { border-color: var(--accent-2); background: var(--accent-2-soft); box-shadow: inset 0 0 0 1px var(--accent-2); }
.extra:has(input:checked)::after { content: "\2713"; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-2); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.18); animation: extraPop .26s cubic-bezier(.34,1.56,.64,1); }
.extra:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--accent-2-ring); }
@keyframes extraPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.extras-tally { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--muted); transition: color .25s ease; }
.extras-tally.is-live { color: var(--accent-2); }
.calc-result { position: sticky; top: 96px; perspective: 1800px; }
.flip { position: relative; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform .62s cubic-bezier(.46,.03,.24,1), min-height .5s cubic-bezier(.46,.03,.24,1); }
.calc-result.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--accent-2-soft); border-radius: 10px; padding: clamp(22px,2.5vw,30px); }
.flip-face.front { position: relative; text-align: center; }
.flip-face.back { position: absolute; inset: 0; transform: rotateY(180deg); text-align: left; overflow: hidden; }
.flip-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--accent-2); }
.flip-back:hover { color: var(--accent-press); }
.quote-recap { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 4px 0 18px; display: flex; flex-direction: column; gap: 7px; }
.qr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.qr-row span { color: var(--muted); }
.qr-row strong { font-family: var(--font-head); font-weight: 700; color: var(--ink); text-align: right; }
.calc-cap { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; }
.calc-figure { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px,5vw,46px); color: var(--ink); line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.calc-dash { color: var(--muted); font-weight: 400; }
.calc-per { font-size: 13px; color: var(--muted); margin: 8px 0 18px; }
.calc-note { display: flex; gap: 9px; text-align: left; font-size: 12px; color: var(--muted); line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.calc-note svg { flex: none; color: var(--accent-2); margin-top: 1px; }
.calc-foot { font-size: 12px; color: var(--muted); margin-top: 10px; }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } .calc-result { position: static; } }

/* ---------- CTA band (dark glass tile on dark grid section) ---------- */
.cta-band { position: relative; border-radius: var(--card-radius); padding: clamp(40px, 6vw, 72px); overflow: hidden;
  background: var(--hero-dark);
  border: 1px solid rgba(243,239,226,.16);
  box-shadow: 0 34px 70px -28px rgba(0,0,0,.62), inset 0 1px 0 rgba(243,239,226,.08);
  color: var(--hero-cream); --laser: 0; transition: box-shadow var(--t), border-color var(--t);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--angle, 0deg), #ffd6a3 0deg, var(--accent) 16deg, transparent 46deg, transparent 314deg, var(--accent) 344deg, #ffd6a3 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--laser); transition: opacity .35s ease; pointer-events: none; z-index: 4;
}
.cta-band:hover { border-color: rgba(243,239,226,.05); box-shadow: 0 34px 70px -26px rgba(0,0,0,.55), 0 0 34px -6px rgba(217,120,41,.3), inset 0 1px 0 rgba(243,239,226,.1); }
.cta-band > * { position: relative; z-index: 1; }
/* Specificity bumped (.cta-dotted .cta-band h2, not just .cta-band h2) so this
   keeps winning against the newer generic ".entry-content h2" prose-heading
   rule below, which ties on specificity and otherwise wins on source order
   whenever this block is rendered inside a page's Post Content wrapper
   (e.g. the homepage) — without that, the CTA heading goes near-invisible
   dark text on its own dark background. */
.cta-dotted .cta-band h2 { font-size: clamp(23px, 2.6vw, 30px); margin-bottom: 14px; color: var(--hero-cream); }
.cta-band p, .cta-band .cta-sub { color: rgba(243,239,226,.82); font-size: 18px; max-width: 520px; margin: 0 0 28px; }
.cta-band .btn-primary { background-color: var(--accent); color: #fff; }
/* Same specificity as the base .btn-primary:hover (two class selectors each)
   and declared later in the file, so without its own hover rule this flatly
   overrode the hover background-color on every load - hovering never
   changed anything. */
.cta-band .btn-primary:hover { background-color: var(--accent-press); color: #fff; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cta-band .phone-alt { color: var(--hero-cream); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 640px) {
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-band .phone-alt { justify-content: center; }
}
.cta-breath { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* ---------- wp_nav_menu() list resets (menus render <ul><li><a>) ---------- */
.nav-links ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links li { list-style: none; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mobile-menu li { list-style: none; }

/* ---------- search results page ---------- */
.search-refine { margin-bottom: 32px; }
.search-refine-row { display: flex; gap: 10px; flex-wrap: wrap; }
.search-refine-row input[type="search"] {
  flex: 1; min-width: 220px; appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--line-strong); border-radius: 11px; padding: 13px 16px;
  font-size: 15.5px; font-family: inherit; color: var(--ink); background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
}
.search-refine-row input[type="search"]:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--ring); }

.search-results-list { display: flex; flex-direction: column; gap: 16px; }
.search-result-card {
  display: flex; gap: 22px; align-items: flex-start; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t);
}
.search-result-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.search-result-thumb { flex: none; width: 130px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result-body { min-width: 0; }
.search-result-type { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; }
.search-result-card h2 { font-size: 21px; margin-bottom: 8px; }
.search-result-card h2 a { color: var(--ink); }
.search-result-card h2 a:hover { color: var(--accent-2); }
.search-result-excerpt { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
.search-result-link { font-size: 14px; font-weight: 600; color: var(--accent-2); display: inline-flex; align-items: center; gap: 5px; }
.search-result-link svg { transform: scaleX(-1); }
@media (max-width: 640px) {
  .search-result-card { flex-direction: column; }
  .search-result-thumb { width: 100%; height: 170px; }
}

.search-pagination, .news-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.news-pagination { margin-bottom: 75px; }
.search-pagination .page-numbers, .news-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-soft); font-size: 14px; font-weight: 600; transition: border-color var(--t), color var(--t), background var(--t);
}
.search-pagination .page-numbers.current, .news-pagination .page-numbers.current { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.search-pagination .page-numbers.dots, .news-pagination .page-numbers.dots { border-color: transparent; background: transparent; }
.search-pagination a.page-numbers:hover, .news-pagination a.page-numbers:hover { border-color: var(--accent-2); color: var(--accent-2); }

.search-empty { text-align: center; padding: clamp(36px, 5vw, 56px); }
.search-empty h2 { font-size: var(--text-h3); margin-bottom: 10px; }
.search-empty p { color: var(--muted); margin: 0 auto 22px; max-width: 46ch; }

/* ---------- news archive ---------- */
.news-banner { padding-block: clamp(56px, 7vw, 96px) clamp(36px, 4.5vw, 56px); }
.news-banner-head { max-width: 720px; }
.news-banner-head .eyebrow { color: var(--accent); }
.news-banner .news-banner-head h1 { color: var(--hero-cream); font-size: var(--text-h1); }
.news-banner-sub, .news-banner-sub p { color: rgba(243,239,226,.78); font-size: var(--text-lede); max-width: 640px; margin-top: 14px; }

.news-filters { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(28px, 3.5vw, 40px); padding-top: 26px; border-top: 1px solid rgba(243,239,226,.14); }
.news-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.news-banner .news-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid rgba(243,239,226,.2); color: rgba(243,239,226,.78); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background var(--t), border-color var(--t), color var(--t); }
.news-banner .news-pill:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.news-banner .news-pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.news-sort { display: flex; align-items: center; gap: 10px; }
.news-sort label { font-size: 13px; font-weight: 600; color: rgba(243,239,226,.6); white-space: nowrap; }
.news-sort select {
  appearance: none; -webkit-appearance: none;
  background: rgba(243,239,226,.08); border: 1px solid rgba(243,239,226,.2); border-radius: 10px;
  padding: 9px 34px 9px 14px; font-size: 13.5px; font-family: inherit; color: var(--hero-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f3efe2' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}
.news-sort select:focus { outline: none; border-color: var(--accent); }
.news-sort select option { color: var(--ink); }
@media (max-width: 700px) { .news-filters { flex-direction: column; align-items: flex-start; } }

/* ---------- post banner (single post template) ---------- */
.post-banner { padding-block: clamp(52px, 6.5vw, 84px) clamp(40px, 5vw, 64px); }
.post-banner .post-banner-head h1 { color: var(--hero-cream); font-size: var(--text-h1); max-width: 920px; }
.post-back-link { margin-top: clamp(20px, 2.6vw, 30px); }
.post-back-link svg { color: currentColor; }

/* ---------- page banner (default banner for generic pages) ---------- */
.page-banner { padding-block: clamp(52px, 6.5vw, 84px) clamp(40px, 5vw, 64px); }
.page-banner-head { max-width: 760px; }
.page-banner .page-banner-head h1 { color: var(--hero-cream); font-size: var(--text-h1); }
.page-banner-sub { color: rgba(243,239,226,.78); font-size: var(--text-lede); max-width: 640px; margin-top: 14px; }
.page-banner-cta { margin-top: clamp(24px, 3vw, 32px); }

/* ---------- service hero (Service single-page banner) ----------
   Shorter than the home hero (--text-h1 not --text-hero) and, like it, a
   2-column layout with the form on the right.

   The right column (.service-hero-form-col) is a flex column stretched to
   the grid row's full height, with the collapsed form (0 height) ahead of
   the button in source order and justify-content:flex-end - so at rest the
   button sits pinned to the bottom of the column (aligned with the bottom
   of the copy column) with the form invisible above it, and opening the
   form grows it upward from there. Growing the form is normal content
   inside an auto-sized grid row, so the row - and the whole banner - just
   grows to fit it, no separate height logic needed.

   At the 880px breakpoint (matching hero-estate's own) the grid stacks to
   one column and flex-direction flips to column-reverse, which puts the
   button back on top with the form opening downward below it instead - a
   more familiar accordion feel once there's no side-by-side row to open
   "into". */
.service-hero .wrap { padding-block: clamp(40px, 5.5vw, 64px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px); align-items: start; position: relative; }
.service-hero-head .eyebrow { color: var(--accent); }
.service-hero-head h1 { color: var(--hero-cream); font-size: var(--text-h1); }
.service-hero-sub { color: rgba(243,239,226,.78); font-size: var(--text-lede); max-width: 46ch; margin-top: 14px; }
.service-hero-head .badges { margin-top: 18px; }
.service-hero-head .badge { background: rgba(255,255,255,.07); border-color: rgba(243,239,226,.16); color: var(--hero-cream); box-shadow: none; backdrop-filter: blur(4px); }
.service-hero-head .badge svg { color: var(--accent); }
.service-hero-form-col { justify-self: end; align-self: stretch; width: 100%; max-width: 460px; display: flex; flex-direction: column; justify-content: flex-end; }
/* Featured image, shown at rest above the (collapsed) form. max-height
   .is-open collapse below is deliberately a generous fixed cap rather than
   a JS-measured value like the form uses - unlike the form's content, this
   is always exactly one image at a predictable aspect ratio, so a fixed
   "big enough" number (same trick as .mobile-menu's max-height) is simpler
   and doesn't need re-measuring on resize. It's timed to match
   .service-hero-form-wrap's own transition so the two read as one
   "image wipes up, form takes its place" motion rather than two unrelated
   animations - see the "service hero" block in theme.js, which toggles
   .is-open on .service-hero itself (not just the form-wrap) so this,
   a sibling rather than a descendant of the form-wrap, has something to
   key off too. */
.service-hero-image {
  overflow: hidden; border-radius: var(--card-radius); box-shadow: var(--shadow-sm);
  max-height: 500px; opacity: 1; transform: translateY(0); margin-bottom: 16px;
  transition: max-height .45s cubic-bezier(.2, .7, .3, 1), opacity .3s ease, transform .45s cubic-bezier(.2, .7, .3, 1), margin-bottom .45s cubic-bezier(.2, .7, .3, 1);
}
.service-hero-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.service-hero.is-open .service-hero-image { max-height: 0; opacity: 0; transform: translateY(-16px); margin-bottom: 0; }
.service-hero-toggle { width: 100%; }
.service-hero-toggle-icon { display: inline-flex; transform: rotate(90deg); transition: transform var(--t); }
.service-hero-toggle[aria-expanded="true"] .service-hero-toggle-icon { transform: rotate(-90deg); }
/* max-height (not height/auto) so it's transitionable - theme.js measures
   the inner element's natural height and animates to that pixel value. The
   spacing that should disappear on collapse lives on .service-hero-form-inner,
   not this element, since a margin on the clipped element itself wouldn't
   be clipped by its own overflow:hidden. */
.service-hero-form-wrap { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(.2, .7, .3, 1), opacity .3s ease; }
.service-hero-form-wrap.is-open { opacity: 1; }
.service-hero-form-inner { padding-bottom: clamp(16px, 2.5vw, 24px); }
@media (max-width: 880px) {
  .service-hero .wrap { grid-template-columns: 1fr; }
  .service-hero-form-col { justify-self: stretch; max-width: 560px; flex-direction: column-reverse; }
  .service-hero-toggle-icon { transform: rotate(-90deg); }
  .service-hero-toggle[aria-expanded="true"] .service-hero-toggle-icon { transform: rotate(90deg); }
  .service-hero-form-inner { padding-bottom: 0; padding-top: clamp(24px, 3.5vw, 32px); }
  /* column-reverse above puts the image last in visual order (button,
     form, image) - margin needs to flip to the top edge to still land
     between the image and the form-wrap next to it. */
  .service-hero-image { margin-bottom: 0; margin-top: 16px; }
  .service-hero.is-open .service-hero-image { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .service-hero-form-wrap, .service-hero-image { transition: none; } }

.news-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.news-cat-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent-2-soft); color: var(--accent-2); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

.news-read-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent-2); }
.news-read-more:hover { color: var(--accent-press); }
.news-read-more svg { transform: scaleX(-1); }

.news-featured-media.no-image, .news-tile-media.no-image {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--accent-2-soft), var(--surface-2));
}
.news-media-fallback { color: var(--accent-2); opacity: .55; display: inline-flex; }

.news-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--shadow-lg); overflow: hidden; margin-bottom: clamp(40px, 5vw, 64px); }
.news-featured-media { display: block; position: relative; height: 100%; min-height: 260px; background: var(--surface-2); overflow: hidden; }
/* position:absolute + top/left (not a plain percentage height in normal
   flow) - confirmed live that height:100% on this img doesn't reliably
   resolve even though the wrapper's own height is a definite, correctly-
   stretched 100% of the grid row (same underlying issue as
   .news-tile-media img, just via CSS Grid stretch here rather than
   aspect-ratio). Absolute positioning resolves against the containing
   block directly instead of going through that normal-flow percentage
   dependency. top+left only, not the inset:0 shorthand, which
   over-constrains a replaced element when explicit width/height are also
   set (see .news-tile-media img's own note). */
.news-featured-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.news-featured-body { padding: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px) 0; display: flex; flex-direction: column; justify-content: center; }
.news-featured-body h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 14px; }
.news-featured-body h2 a { color: var(--ink); text-decoration: none; }
.news-featured-body h2 a:hover { color: var(--accent-2); text-decoration: none; }
.news-featured .news-excerpt { color: var(--muted); font-size: 16px; line-height: 1.65; margin-bottom: 18px; max-width: 52ch; }
@media (max-width: 880px) {
  .news-featured { grid-template-columns: 1fr; }
  .news-featured-media { min-height: 220px; }
  .news-featured-body { padding: 28px; }
}

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); }
.news-tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
/* hover:hover - real hover devices only. :hover on touch has no true
   mouse-leave, so it can visually "stick" after a tap; here it would also
   need the ~60px of shadow-clearance padding .news-slider-viewport was
   deliberately shrunk on mobile to close an oversized gap (see comment
   below), so letting it fire there just clips the shadow off anyway. */
@media (hover: hover) {
  .news-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
/* aspect-ratio lives on BOTH this wrapper (so the no-image fallback state,
   which has no img to size it, still takes up the right amount of space)
   AND the img itself below (confirmed live in devtools: percentage height
   doesn't reliably resolve against a parent whose own height comes from
   aspect-ratio - the image kept rendering at ~2x the box's real height,
   with position:absolute/inset making no difference either way). Giving
   the img the same ratio directly - width:100%, height:auto - sizes it
   from its own width with no dependency on the parent's height at all,
   sidestepping that resolution bug entirely. Both values must be kept in
   sync with each other (and with .services-tile's override below). */
.news-tile-media { display: block; aspect-ratio: 3 / 2; background: var(--surface-2); overflow: hidden; }
.news-tile-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.services-tile .news-tile-media,
.services-tile .news-tile-media img { aspect-ratio: 4 / 3; }
.news-tile-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.news-tile-body h3 { font-size: 18.5px; }
.news-tile-body h3 a { color: var(--ink); text-decoration: none; }
.news-tile-body h3 a:hover { color: var(--accent-2); text-decoration: none; }
.news-tile-body .news-read-more { margin-top: auto; padding-top: 14px; }
@media (max-width: 1040px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- news slider block (reuses .news-tile from the archive grid) ---------- */
.news-slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.news-slider-head .shead { margin-bottom: 0; }
.news-slider-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.news-slider-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: border-color var(--t), color var(--t), background-color var(--t), transform var(--t);
  flex-shrink: 0;
}
.news-slider-arrow:hover { border-color: var(--accent-2); color: var(--accent-2); }
.news-slider-arrow:active { transform: scale(.94); }
.news-slider-arrow:disabled { opacity: .4; cursor: default; transform: none; border-color: var(--line-strong); color: var(--ink); }
.news-slider-next svg { transform: scaleX(-1); }
/* overflow-x:auto forces overflow-y to compute to "auto" too (a scroll
   container can't be visible on one axis and auto/scroll on the other) - so
   no separate overflow-y is needed. Box-shadow doesn't add to scrollable
   overflow, so it's never clipped as long as the box itself isn't shorter
   than the shadow's reach; padding-block below just gives the hover shadow
   (--shadow-lg, which grows ~60px below the tile) room to breathe.
   Horizontal inset is intentionally NOT padding on this element: browsers
   don't reliably render inline-start padding on a scroll container as a
   visual gap before the content (it only pads the scrollable range, not the
   initial resting position), so it's applied to .news-slider-track instead
   - a plain flex child isn't a scroll container and pads normally. */
/* overscroll-behavior-x: contain stops the horizontal swipe from
   "chaining" into the page's own scroll/bounce once you hit either end
   of the track - without it, Safari on macOS/trackpad lets a continued
   swipe past the last card carry on as if scrolling the page itself. */
.news-slider-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline-end: calc(-1 * var(--pad)); padding-block: 16px 48px; }
.news-slider-viewport::-webkit-scrollbar { display: none; }
/* The viewport's own 48px bottom padding already provides breathing room
   below the cards, so when the services slider is immediately followed
   by the how-it-works section, skip that section's top padding too -
   otherwise the two stack and leave an oversized gap (viewport pad +
   this section's bottom pad + next section's top pad). Scoped to #how
   specifically (not a general ".news-slider + .section" rule) since the
   homepage has a second, unrelated news-slider instance ("Latest news")
   later in the page, immediately followed by the #contact CTA band - a
   broader selector would zero that section's top padding too. */
.section.news-slider + #how { padding-top: 0; }
.news-slider-track { display: flex; gap: clamp(18px, 2.2vw, 26px); width: max-content; padding-inline-end: var(--pad); }
.news-slider-track .news-tile { flex: 0 0 clamp(260px, 26vw, 340px); scroll-snap-align: start; }
@media (max-width: 1040px) { .news-slider-track .news-tile { flex-basis: clamp(240px, 42vw, 320px); } }
@media (max-width: 880px) {
  .news-slider-arrow { display: none; }
  .news-slider-head { align-items: center; }
  .news-slider-track .news-tile { flex-basis: 78vw; }
}
@media (max-width: 480px) {
  .news-slider-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
  .news-slider-track .news-tile { flex-basis: 86vw; }
  /* .news-slider-viewport's 16px/48px padding-block exists to give the
     desktop hover shadow room to breathe (see comment above) - touch
     devices never trigger hover, so on mobile that reserved space just
     stacks with the section's own padding and reads as an oversized gap
     both above the cards and (more visibly) below them, before whatever
     follows. */
  .news-slider-viewport { padding-block: 4px 16px; }
}

/* ---------- post template (single post body) ---------- */
.post-layout-section { padding-block: 75px; }
.post-layout { display: grid; grid-template-columns: minmax(240px, 27%) 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: start; }

/* Grid items default to min-width:auto, which refuses to shrink a track
   below its content's intrinsic min-content width (e.g. a wide table).
   Without min-width:0 the whole .post-layout column - and everything in
   it, sidebar included - gets stretched wider than the viewport on
   narrow screens instead of the content wrapping/scrolling internally. */
.post-sidebar, .post-content-col { min-width: 0; }

.post-sidebar { position: sticky; top: 96px; }
.post-sidebar-inner { display: flex; flex-direction: column; gap: 30px; }
.post-sidebar-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.post-share-links { display: flex; gap: 10px; }
.post-share-link {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  transition: border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t); box-shadow: var(--shadow-sm);
}
.post-share-link:hover { border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-2px); }
.post-sidebar-cat .news-cat-pill { font-size: 12.5px; }
.post-related-list { display: flex; flex-direction: column; gap: 18px; }
.post-related-list .news-tile-media { aspect-ratio: 3 / 2; }
.post-related-list .news-tile-body { padding: 16px; }
.post-related-list .news-tile-body h3 { font-size: 15.5px; }

.post-featured-media { border-radius: var(--card-radius); overflow: hidden; margin-bottom: clamp(28px, 3.5vw, 40px); box-shadow: var(--shadow-sm); }
/* Some other plugin's front-end CSS sets an explicit (non-auto) height on
   post-thumbnail <img> tags, which wins over aspect-ratio here since our
   rule doesn't declare height at all (relying on the auto default) - the
   image was rendering at its raw upload height (e.g. a 1024x1024 square)
   instead of being cropped to 3:2. Forcing height back to auto restores
   aspect-ratio's control over sizing without touching whatever the other
   plugin's rule is for (unknown, so not worth chasing down and editing). */
.post-featured-media img { width: 100%; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.post-content-body { font-size: 17px; line-height: 1.75; color: var(--ink-soft); max-width: 72ch; }
.post-content-body > * { margin: 1.4em 0 0; }
.post-content-body > *:first-child { margin-top: 0; }
.post-content-body h2 { font-size: var(--text-h2); color: var(--ink); margin-top: 1.9em; }
.post-content-body h3 { font-size: var(--text-h3); color: var(--ink); margin-top: 1.5em; }
.post-content-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.post-content-body a:hover { color: var(--accent-press); }
.post-content-body ul, .post-content-body ol { padding-left: 1.4em; }
.post-content-body li + li { margin-top: .5em; }
.post-content-body blockquote { border-left: 3px solid var(--accent-2); padding-left: 20px; font-style: italic; color: var(--ink); }
.post-content-body img { max-width: 100%; height: auto; border-radius: var(--card-radius); }
.post-content-body figure { margin: 1.4em 0 0; }
.post-content-body hr { border: none; border-top: 1px solid var(--line); }
.post-content-body code { background: var(--surface-2); padding: .15em .4em; border-radius: 5px; font-size: .92em; }
/* Same brand table treatment as .entry-content (see that block for why
   border-separate + overflow:hidden is needed for rounded corners) - blog
   posts had no table styling at all before this, so default Gutenberg
   tables in post content rendered with plain unstyled browser borders. */
/* Default (auto) table layout sizes columns off cell content, which can
   report a min-content width wider than the viewport on mobile - scroll
   the table itself horizontally rather than let it push the whole page
   wide (the same failure mode min-width:0 above guards against, but
   originating inside the table's own layout algorithm instead of the
   grid track). */
.post-content-body .wp-block-table { overflow-x: auto; }
.post-content-body table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.post-content-body th, .post-content-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
.post-content-body tr > th:last-child, .post-content-body tr > td:last-child { border-right: none; }
.post-content-body tr:last-child > td { border-bottom: none; }
.post-content-body th { background: var(--accent-2-soft); color: var(--accent-2); font-weight: 700; }
.post-content-body tbody tr:nth-child(even) td { background: var(--surface-2); }

/* inline callback CTA, spliced into the content flow - no section background, just the dark glass tile */
.post-inline-cta { margin: 2.4em 0 !important; }
.post-inline-cta .cta-band { padding: clamp(30px, 4vw, 48px); }
.post-inline-cta .cta-band h2 { margin-top: 0; color: var(--hero-cream); font-size: clamp(23px, 2.6vw, 30px); }

@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; order: 2; }
  .post-content-col { order: 1; }
  .post-related-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .post-related-list .news-tile { min-width: 240px; }
}

/* ---------- page content (default Gutenberg blocks on plain-text pages —
   Privacy Notice, Terms of Business, etc.) ----------
   templates/page.html renders wp:post-content straight into a Group
   constrained to 760px, with no wrapper class of its own beyond WordPress's
   default .entry-content. The global reset above (h1–h4, p { margin: 0 })
   otherwise leaves default Heading/Paragraph/List blocks with no spacing
   at all, so restore it here — mirrors the same rhythm used for blog posts
   in .post-content-body, just scoped to .entry-content instead. */
.entry-content { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.entry-content > * { margin: 1.4em 0 0; }
.entry-content > *:first-child { margin-top: 0; }
/* The generic prose spacing above is meant for default Heading/Paragraph/List
   blocks; our full-bleed ACF section blocks (.section) already manage their
   own vertical rhythm via padding-block and don't need it stacked on top -
   left in place it was adding an extra ~24px gap between every section on
   any page (homepage included). Specificity here (.entry-content > .section,
   2 classes) beats the rule above (1 class + 1 universal selector) outright,
   and still loses on purpose to the more specific :first-child/:last-child
   edge-alignment rules near the top of this file. */
/* The rule above (".entry-content > * { margin: 1.4em 0 0; }") is a 3-value
   margin shorthand, so it also sets margin-left/margin-right to 0 on every
   direct child - including our .section blocks, which rely on negative
   margin-left/margin-right (calc(50% - 50vw)) to break out to full viewport
   width. Both rules tie on specificity for a plain ".section" element, so
   the entry-content rule (later in the file) was winning and silently
   cancelling the breakout on every "page" template (Contact, Team, FAQ,
   etc. - anywhere post-content sits in the narrower 760px Group), leaving
   sections positioned/sized incorrectly and causing horizontal overflow.
   Re-declare the breakout here at ".entry-content > .section" specificity
   (2 classes) so it always wins regardless of source order. */
.entry-content > .section { margin-top: 0; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* A handful of full-bleed blocks (Hero, Providers ticker, News banner, Post
   banner) use their own class instead of ".section" and manage width
   differently, so the rule above doesn't reach them - but they're still
   "<section>" elements directly inside .entry-content wherever a template
   places post-content around them, and still picked up the same unwanted
   margin-top from ".entry-content > *" (e.g. a ~24px gap between the Hero
   and the Providers logo ticker on the homepage). Targeting the element
   type here (1 class + 1 element, beats 1 class + universal) resets
   margin-top for every direct-child section uniformly, so this doesn't
   need to be re-applied by name each time a new full-bleed block is added. */
.entry-content > section { margin-top: 0; }
/* Same fix, same reason, for the breadcrumb bar - it's a <nav>, not a
   <section>, so the rule above doesn't reach it. */
.entry-content > nav.ss-breadcrumbs { margin-top: 0; }
.entry-content h1 { font-size: var(--text-h1); color: var(--ink); margin-top: 1.9em; }
.entry-content h2 { font-size: var(--text-h2); color: var(--ink); margin-top: 1.9em; }
.entry-content h3 { font-size: var(--text-h3); color: var(--ink); margin-top: 1.5em; }
.entry-content h4, .entry-content h5, .entry-content h6 { font-size: 17px; color: var(--ink); margin-top: 1.4em; font-weight: var(--head-weight); }
/* Headings inside our custom section blocks (.section - Contact info, FAQs,
   Team, Steps, CTA band, etc.) already get correct spacing from
   component-specific rules (.shead margin-bottom, card padding, and so on).
   The generic prose rules just above are meant for default Heading blocks
   on plain pages (Legal, Privacy Policy) but were leaking through here too,
   since these headings sit several levels deep inside .section rather than
   as direct children - "h2" with no combinator matches at any depth. That
   added a large, unwanted margin-top above every eyebrow+heading pair
   sitewide (e.g. "Contact us", "Frequently asked questions"). Reset it back
   to 0 for any heading nested inside .section; specificity (2 classes + 1
   element) beats the prose rules above regardless of source order.
   The banner-style blocks (Hero, News banner, Post banner, Page banner)
   use their own class instead of ".section" (see the shared dotted-grid
   rule further up), so they need the same reset listed separately here -
   without it the News page's H1 sat ~160px below its "eyebrow" label. */
.entry-content .section h1,
.entry-content .section h2,
.entry-content .section h3,
.entry-content .section h4,
.entry-content .hero h1,
.entry-content .news-banner h1,
.entry-content .post-banner h1,
.entry-content .page-banner h1 { margin-top: 0; }
.entry-content a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--accent-press); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: .5em; }
.entry-content li > ul, .entry-content li > ol { margin-top: .5em; }
.entry-content blockquote { border-left: 3px solid var(--accent-2); padding-left: 20px; font-style: italic; color: var(--ink); }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--card-radius); }
.entry-content figure { margin: 1.4em 0 0; }
.entry-content hr { border: none; border-top: 1px solid var(--line); }
.entry-content code { background: var(--surface-2); padding: .15em .4em; border-radius: 5px; font-size: .92em; }
.entry-content address { font-style: normal; }
/* border-collapse:collapse ignores border-radius on the <table> itself in
   every browser but Safari, so rounded corners need border-separate (with
   spacing:0, so cells still look joined) plus overflow:hidden on the table
   to clip the cell borders to the radius. Header row picks up the brand
   green rather than a plain grey so default Gutenberg tables read as part
   of the site instead of a bare browser default. */
.entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.entry-content th, .entry-content td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
.entry-content tr > th:last-child, .entry-content tr > td:last-child { border-right: none; }
.entry-content tr:last-child > td { border-bottom: none; }
.entry-content th { background: var(--accent-2-soft); color: var(--accent-2); font-weight: 700; }
.entry-content tbody tr:nth-child(even) td { background: var(--surface-2); }

/* ---------------------------------------------------------------------- *
 * Provider CPT (single-provider.html + archive-provider.html)
 * Every provider page shares one rigid template - these rules style the
 * new provider-* blocks. Reuses existing components (.steps/.step,
 * .values/.value, .faq-list, .entry-content table, .news-pill/.news-cats)
 * wherever the shape already matches, and adds a handful of new,
 * narrowly-scoped classes for the shapes that don't have an existing match.
 * ---------------------------------------------------------------------- */

/* ---------- provider-hero: banner grid (copy left, big logo right) ---------- */
.provider-banner-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.provider-banner-head { max-width: none; }
.provider-banner-media-col { display: flex; flex-direction: column; }
.provider-banner-logo-col { display: flex; justify-content: center; align-items: center; }
.provider-banner-logo { width: 100%; max-width: 280px; aspect-ratio: 1; border-radius: 28px; background: rgba(243,239,226,.94); display: flex; align-items: center; justify-content: center; padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-lg); }
.provider-banner-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.provider-standfirst { color: rgba(243,239,226,.82); font-size: var(--text-lede); max-width: 560px; margin-top: 14px; }
.provider-banner-actions { margin-top: clamp(24px, 3vw, 34px); }
.provider-last-reviewed { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: rgba(243,239,226,.6); font-size: 13px; }
.provider-last-reviewed svg { flex: none; }
.provider-back-link { margin-bottom: clamp(22px, 3vw, 32px); }
@media (max-width: 900px) {
  .provider-banner-grid { grid-template-columns: 1fr; }
  /* display:contents lets .provider-banner-head's own children (back link,
     h1, standfirst, actions/button, last-reviewed) become direct items of
     .provider-banner-grid, so they can be individually reordered against
     .provider-banner-media-col below - the wrapper div stays in the DOM
     (its class is still needed by ".post-banner .post-banner-head h1" in
     the shared post-banner rules above), it just stops generating its own
     box for layout purposes. */
  .provider-banner-head { display: contents; }
  .provider-banner-head h1 { order: 1; }
  .provider-standfirst { order: 2; }
  /* Half the base margins: 20px top (from the shared .post-back-link
     rule) and 22px bottom (from .provider-back-link's own base rule). */
  .provider-back-link { order: 3; margin-top: 10px; margin-bottom: 11px; }
  .provider-banner-media-col { order: 4; min-width: 0; }
  /* Half the normal logo-to-button space: the grid's own row gap (28px)
     plus this element's base margin-top (24px) put 52px between them, so
     pull it up by the difference to land on ~26px total. */
  .provider-banner-actions { order: 5; margin-top: -2px; }
  .provider-last-reviewed { display: none; }
  /* .btn's base white-space:nowrap is fine on desktop (plenty of room),
     but with display:contents above, this button shares the same single
     grid column/track as everything else including the logo - its
     un-wrappable text (e.g. "Get a Freedom Health Insurance quote") was
     forcing that whole shared column, and everything sized as a
     percentage of it, wider than the viewport. Let it wrap here instead. */
  .provider-banner-toggle { white-space: normal; text-align: center; }
  .provider-banner-logo-col { justify-content: flex-start; }
  /* Full width of the content column (same side margins as the button/
     text above and below it), not a full-bleed edge-to-edge break-out -
     aspect-ratio:auto overrides the square 1:1 desktop ratio, which at
     this width would make it far taller than the logo needs. */
  .provider-banner-logo {
    width: 100%; max-width: 100%; aspect-ratio: auto;
    border-radius: var(--radius-sm); box-shadow: none; padding: 28px clamp(20px, 5vw, 36px);
  }
  .provider-banner-logo img { max-height: 100px; }
}

/* ---------- provider-hero: collapsible "Get a quote" form ----------
   Same expand/collapse pattern as .service-hero (see that block's own
   comment above for the mechanics) - the toggle button stays put in the
   copy column while the logo, in the media column, wipes away as the form
   grows in its place. Driven by the same "hero: collapsible quote form"
   block in theme.js, which matches both .service-hero and .provider-banner. */
.provider-banner.is-open .provider-banner-grid { align-items: start; }
.provider-banner-logo-col {
  overflow: hidden; margin-bottom: 16px;
  max-height: 400px; opacity: 1; transform: translateY(0);
  transition: max-height .45s cubic-bezier(.2, .7, .3, 1), opacity .3s ease, transform .45s cubic-bezier(.2, .7, .3, 1), margin-bottom .45s cubic-bezier(.2, .7, .3, 1);
}
.provider-banner.is-open .provider-banner-logo-col { max-height: 0; opacity: 0; transform: translateY(-16px); margin-bottom: 0; }
.provider-banner-toggle-icon { display: inline-flex; transform: rotate(90deg); transition: transform var(--t); margin-left: 6px; }
.provider-banner-toggle[aria-expanded="true"] .provider-banner-toggle-icon { transform: rotate(-90deg); }
.provider-banner-form-wrap { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(.2, .7, .3, 1), opacity .3s ease; }
.provider-banner-form-wrap.is-open { opacity: 1; }
.provider-banner-form-inner { padding-top: clamp(16px, 2.5vw, 24px); }
@media (prefers-reduced-motion: reduce) { .provider-banner-form-wrap, .provider-banner-logo-col { transition: none; } }

/* ---------- "at a glance" fact panel: bordered icon cards, 2 neat rows ---------- *
 * Fixed at 4 columns (not auto-fill) so a standard 8-fact set always lands
 * as two clean rows instead of a ragged "4 + 4 + 1" leftover row. Values
 * use the body font at a lighter weight (not the bold serif heading font,
 * which read heavier than the section's own H2) and every card leads with
 * a small keyword-matched icon for a bit of visual variety. */
.glance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.glance-fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.gf-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-2-soft); color: var(--accent-2); display: flex; align-items: center; justify-content: center; }
.gf-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-2); }
.gf-value { font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 1040px) { .glance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .glance-grid { grid-template-columns: 1fr; } }

/* ---------- provider-plans: 1 full width, 2/3 split evenly, 4+ wraps to 2 cols ---------- */
.provider-plan-grid { grid-template-columns: repeat(var(--plan-cols, 2), 1fr); }
.provider-plan-card h3 { margin-bottom: 8px; }
@media (max-width: 1040px) { .provider-plan-grid { grid-template-columns: 1fr; } }

/* ---------- provider-cover: three checklist columns ---------- */
.cover-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 2.6vw, 32px); align-items: start; }
.cover-col h3 { font-size: 18px; margin-bottom: 16px; }
.cover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cover-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.cover-list .pin { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; margin-top: 1px; }
.cover-list.is-yes .pin { background: var(--accent-2-soft); color: var(--accent-2); }
.cover-list.is-no .pin { background: rgba(196,69,58,.1); color: #c4453a; }
.cover-list.is-addon .pin { background: var(--accent-soft); color: var(--accent-press); }
@media (max-width: 900px) { .cover-columns { grid-template-columns: 1fr; } }

/* ---------- provider-standout: reuse .values/.value ---------- */
.provider-standout-grid { margin-top: 0; }

/* ---------- provider-network-cost: two independently-optional columns ---------- */
.network-cost-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); }
.network-cost-col h2 { font-size: var(--text-h3); margin-bottom: 14px; }
.network-cost-grid:has(.network-cost-col:only-child) { grid-template-columns: 1fr; }
.network-cost-grid:has(.network-cost-col:only-child) .network-cost-col .entry-content,
.network-cost-grid:has(.network-cost-col:only-child) .network-cost-col p { max-width: 70ch; }
@media (max-width: 900px) { .network-cost-grid { grid-template-columns: 1fr; } }

/* ---------- provider-reviews: prose + pros/cons table ---------- */
.provider-reviews-body { margin-bottom: clamp(36px, 4.5vw, 56px); }
.provider-proscons-head { margin-top: 0; }
.provider-table-wrap { max-width: none; }
.provider-proscons-table { table-layout: fixed; width: 100%; }
.provider-proscons-table th, .provider-proscons-table td { width: 50%; }
.provider-proscons-table th:first-child { color: var(--accent-2); }
.provider-proscons-table th:last-child { background: rgba(196,69,58,.1); color: #c4453a; }

/* ---------- provider archive: filter pills + card grid ---------- */
.provider-filters + .provider-filters { margin-top: 14px; padding-top: 14px; border-top: none; }
.provider-listing { padding-block: clamp(48px, 6vw, 72px); }
/* Set on [data-provider-listing] while an AJAX filter/pagination request
   (see theme.js) is in flight, so a slow connection doesn't read as the
   click having done nothing. */
[data-provider-listing][aria-busy="true"] { opacity: .5; pointer-events: none; transition: opacity var(--t); }
.provider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 30px); }
.provider-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t); }
.provider-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.provider-card-logo { display: flex; align-items: center; justify-content: center; padding: 30px 26px; min-height: 96px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
/* border-radius:0 to override .entry-content img's rounded corners for
   regular post/page content images - this archive grid also sits inside
   .entry-content, so that rule was rounding (and visually cutting into)
   these logos too. Same fix .plogo img already has for the homepage
   ticker's logos, just never applied here. */
.provider-card-logo img { max-height: 44px; max-width: 78%; width: auto; object-fit: contain; border-radius: 0; }
.provider-card-fallback { font-family: var(--font-head); font-weight: 600; font-size: 19px; color: var(--ink); text-align: center; }
.provider-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.provider-card-body h3 { font-size: var(--text-h3); margin-top: auto; }
.provider-card-body h3 a { color: var(--ink); }
.provider-card-body h3 a:hover { color: var(--accent-2); }
.provider-card-body .news-read-more { padding-top: 4px; }
/* Compare-providers block: same .provider-card as the Our Providers
   archive's grid above, but laid out as a .news-slider-track (horizontal,
   arrow-nav, flex layout already defined there) instead - card sizing
   needs its own flex-basis/scroll-snap here rather than touching
   .provider-grid, which the archive still uses as a plain wrapping grid. */
.provider-slider-track .provider-card { flex: 0 0 clamp(260px, 26vw, 320px); scroll-snap-align: start; }
@media (max-width: 1040px) { .provider-slider-track .provider-card { flex-basis: clamp(240px, 42vw, 300px); } }
@media (max-width: 640px) { .provider-slider-track .provider-card { flex-basis: 78vw; } }
.news-cat-pill.is-feature { background: var(--surface-2); color: var(--ink-soft); }
.news-cat-pill.is-more { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
@media (max-width: 1040px) { .provider-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .provider-grid { grid-template-columns: 1fr; } .cover-columns { grid-template-columns: 1fr; } }

/* ---------- providers-ticker: logos now come from Provider posts ---------- */
/* Fixed box (set on .plogo above) + object-fit: contain gives every logo the
   same visual weight regardless of its native file's aspect ratio, and the
   explicit border-radius: 0 overrides the generic .entry-content img rule
   that was otherwise rounding these corners on the homepage. */
.plogo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 0; }

/* ---------- provider quick-links (jump nav) ---------- */
/* Breaks out to full viewport width the same way .section does (it isn't
   a .section itself - that class also carries a big vertical padding this
   slim bar doesn't want) - without it, .quicknav stays boxed in by
   whatever contentSize the surrounding template's Group constrains
   post-content to, sitting inset from every other full-width section
   around it instead of matching their content width. */
.quicknav { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--surface); border-bottom: 1px solid var(--line); }
.quicknav .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 16px; }
.quicknav-label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Single row, never wraps - on any screen narrow enough that the pills
   don't all fit, the row scrolls horizontally instead (a plain native
   overflow-x scroller, so touch drag "just works" the same way the News
   slider's viewport does), rather than folding onto a second line. The
   scrollbar is deliberately left visible (just restyled thin) rather than
   hidden, as the only visual hint on touch devices that there's more to
   scroll to - it only ever actually renders once the row overflows, so it
   doesn't show at all on wide screens where every pill already fits. */
.quicknav-list {
  display: flex; flex-wrap: nowrap; gap: 8px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; padding-bottom: 8px; margin-bottom: -8px;
  scrollbar-width: thin; scrollbar-color: var(--accent-2) transparent;
}
.quicknav-list::-webkit-scrollbar { height: 5px; }
.quicknav-list::-webkit-scrollbar-track { background: transparent; }
.quicknav-list::-webkit-scrollbar-thumb { background: var(--accent-2); border-radius: 3px; }
/* Selectors are prefixed with .quicknav (not bare .quicknav-pill) so these
   win specificity over ".entry-content a" / ".entry-content a:hover" when a
   quicknav sits inside post content (e.g. the anchor-nav block on a
   provider page) - otherwise that generic prose-link styling's underline
   and amber hover color leak through. */
.quicknav .quicknav-pill { display: inline-flex; align-items: center; flex: none; padding: 7px 15px; border-radius: 9px; background: var(--accent-2-soft); color: var(--accent-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color var(--t), color var(--t); }
.quicknav .quicknav-pill:hover { background: var(--accent-2); color: #fff; text-decoration: none; }

/* ---------- provider about: short overview + accordion ---------- */
.provider-overview { margin-bottom: clamp(22px, 3vw, 32px); max-width: 70ch; }
.provider-accordion { max-width: none; }
.provider-accordion .faq-a p { margin: 0; }
.provider-accordion .faq-a p + p { margin-top: .9em; }

/* ---------- cover table (sticky-left / scrolling-right "what's covered") ---------- */
.cover-table-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.cover-table-head { position: sticky; top: 100px; max-width: 40ch; }
.cover-table-head h2 { font-size: var(--text-h2); margin-bottom: 14px; }
.cover-table-intro { color: var(--muted); font-size: 16px; line-height: 1.65; }
.cover-table-list { border-top: 1px solid var(--line); }
.cover-table-row { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: clamp(16px, 3vw, 32px); padding-block: 22px; border-bottom: 1px solid var(--line); }
.cover-table-benefit { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--ink); }
.cover-table-benefit svg { color: var(--accent-2); flex: none; margin-top: 2px; }
.cover-table-desc { color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 880px) {
  .cover-table-grid { grid-template-columns: 1fr; }
  .cover-table-head { position: static; max-width: none; margin-bottom: 28px; }
  .cover-table-row { grid-template-columns: 1fr; gap: 6px; padding-block: 18px; }
}

/* ---------- feature slider (icon-card variant of the News/Services slider) ---------- */
.news-slider-track .feature-tile { flex: 0 0 clamp(230px, 24vw, 280px); scroll-snap-align: start; }
.feature-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform var(--t), box-shadow var(--t); }
/* hover:hover only - same reasoning as .news-tile:hover above, this card
   lives in the same .news-slider-viewport scroll container. */
@media (hover: hover) {
  .feature-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
.feature-tile-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-2-soft); color: var(--accent-2); display: grid; place-items: center; flex: none; }
.feature-tile h3 { font-size: 17px; }
.feature-tile p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- quote form band (standalone form section, further down a page) ---------- */
.quote-form-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.quote-form-band-copy h2 { font-size: var(--text-h2); margin-bottom: 14px; }
.quote-form-band-body { color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 46ch; margin-bottom: 18px; }
.quote-form-band-copy .phone-alt { color: var(--ink); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.quote-form-band-copy .phone-alt svg { color: var(--accent-2); }
.quote-form-band-card { justify-self: end; width: 100%; max-width: 460px; }
@media (max-width: 880px) {
  .quote-form-band .wrap { grid-template-columns: 1fr; }
  .quote-form-band-card { justify-self: stretch; max-width: 560px; }
}

/* ---------- quote hero, full width (dedicated Get a Quote page) ---------- */
.quote-hero-full .wrap { padding-block: clamp(13px, 1.75vw, 23px) clamp(52px, 7vw, 92px); display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vw, 44px); position: relative; text-align: center; }
.quote-hero-full-copy { max-width: 620px; }
.quote-hero-full-copy .eyebrow { color: var(--accent); justify-content: center; }
.quote-hero-full-copy h2 { font-family: var(--font-head); font-weight: 500; color: var(--hero-cream); font-size: var(--text-h1); line-height: 1.04; letter-spacing: -.02em; }
.quote-hero-full-sub { color: rgba(243,239,226,.78); font-size: clamp(16px, 1.7vw, 19px); margin-top: 14px; line-height: 1.6; }
.quote-hero-full-copy .phone-alt { color: var(--hero-cream); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; margin-top: 20px; }
.quote-hero-full-copy .phone-alt svg { color: var(--accent); }
.quote-hero-full-form { width: 100%; max-width: 720px; }
@media (max-width: 560px) { .quote-hero-full-copy .phone-alt { flex-wrap: wrap; justify-content: center; } }
/* The Get a Quote page (templates/page-get-a-quote.html) wraps post-content
   in a Group constrained to 760px (see the .section breakout comment
   above), with no page banner and no top padding, so this hero sits right
   under the header. Break it out to full viewport width the same way
   .section does. */
.entry-content > .hero#get-a-quote {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}