/*
 * Frontend stylesheet entry point.
 *
 * Import order matches the previous Laravel Mix `webpack.mix.js` pipeline:
 *   - Base files in their explicit (non-alphabetical) order
 *   - Templates, components, post-types, and block styles in alphabetical order
 *
 * Note: `base/editor.css` is intentionally excluded here — it is only loaded
 * by the block editor entry (`editor.css`).
 */

/* Base */

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

html {
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji'; /* 1 */
	line-height: 1.15; /* 2 */
	-webkit-text-size-adjust: 100%; /* 3 */
	tab-size: 4; /* 4 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

/* Reset all input types */

input,
select,
textarea {
  /* Remove default styles */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* Reset basic properties */
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

/* Remove specific input type styles */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove search input decoration */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* Remove select arrow */

select::-ms-expand {
  display: none;
}

/* Reset checkbox and radio */

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  vertical-align: middle;
}

/* Reset file input */

input[type="file"] {
  cursor: pointer;
}

/* Reset placeholder styles */

::placeholder {
  color: inherit;
  opacity: 1;
}

:root {
    --c-neutral-1000: #00140F;
    --c-neutral-900: #1A2C27;
    --c-neutral-800: #33433F;
    --c-neutral-700: #4D5B57;
    --c-neutral-600: #66726F;
    --c-neutral-500: #808A87;
    --c-neutral-400: #99A19F;
    --c-neutral-300: #B3B9B7;
    --c-neutral-200: #CCD0CF;
    --c-neutral-100: #E6E8E7;
    --c-neutral-50: #EBEDEC;
    --c-neutral-25: #F0F1F1;
    --c-neutral-20: #F5F6F5;
    --c-neutral-15: #FAFAFA;

    --c-neutral-alpha-20: rgb(0 20 15 / 0.60);
    
    --c-white: #FFFFFF;
    --c-white-alpha-80: rgb(255 255 255 / 0.80);
    --c-white-alpha-60: rgb(255 255 255 / 0.60);
    --c-white-alpha-20: rgb(255 255 255 / 0.20);
    --c-white-alpha-15: rgb(255 255 255 / 0.15);
    --c-white-alpha-10: rgb(255 255 255 / 0.10);
    --c-white-alpha-5: rgb(255 255 255 / 0.05);

    --c-accent-1000: #00291E;
    --c-accent-1000-alpha-20: rgb(0 41 30 / 0.20);
    --c-accent-900: #00523C;
    --c-accent-800: #00CC96;
    --c-accent-800-alpha-20: rgb(0 204 150 / 0.20);
    --c-accent-700: #1AD1A1;
    --c-accent-600: #33D6AB;
    --c-accent-500: #4DDBB6;
    --c-accent-400: #66E0C0;
    --c-accent-300: #80E6CB;
    --c-accent-200: #99EBD5;
    --c-accent-100: #B3F0E0;
    --c-accent-50: #CCF5EA;
    --c-accent-25: #E6FAF5;

    --c-dark-green-50: #CCDDD9;

    --c-semantic-danger: #dc2626;
    --c-semantic-danger-bg: #fce9e9;
}

/* Accent Colors */

.color--accent-800 {
    color: var(--c-accent-800);
}

.color--accent-700 {
    color: var(--c-accent-700);
}

.color--accent-600 {
    color: var(--c-accent-600);
}

.color--accent-500 {
    color: var(--c-accent-500);
}

.color--accent-400 {
    color: var(--c-accent-400);
}

.color--accent-300 {
    color: var(--c-accent-300);
}

.color--accent-200 {
    color: var(--c-accent-200);
}

.color--accent-100 {
    color: var(--c-accent-100);
}

.color--accent-50 {
    color: var(--c-accent-50);
}

.color--accent-25 {
    color: var(--c-accent-25);
}

/* Black Colors */

.color--black-800 {
    color: var(--c-neutral-800);
}

.color--black-700 {
    color: var(--c-neutral-700);
}

.color--black-600 {
    color: var(--c-neutral-600);
}

.color--black-500 {
    color: var(--c-neutral-500);
}

.color--black-400 {
    color: var(--c-neutral-400);
}

.color--black-300 {
    color: var(--c-neutral-300);
}

.color--black-200 {
    color: var(--c-neutral-200);
}

.color--black-100 {
    color: var(--c-neutral-100);
}

.color--black-50 {
    color: var(--c-neutral-50);
}

.color--black-25 {
    color: var(--c-neutral-25);
}

/* Accent Backgrounds */

.bg--accent-800 {
    background-color: var(--c-accent-800);
}

.bg--accent-700 {
    background-color: var(--c-accent-700);
}

.bg--accent-600 {
    background-color: var(--c-accent-600);
}

.bg--accent-500 {
    background-color: var(--c-accent-500);
}

.bg--accent-400 {
    background-color: var(--c-accent-400);
}

.bg--accent-300 {
    background-color: var(--c-accent-300);
}

.bg--accent-200 {
    background-color: var(--c-accent-200);
}

.bg--accent-100 {
    background-color: var(--c-accent-100);
}

.bg--accent-50 {
    background-color: var(--c-accent-50);
}

.bg--accent-25 {
    background-color: var(--c-accent-25);
}

/* Black Backgrounds */

.bg--black-800 {
    background-color: var(--c-neutral-800);
}

.bg--black-700 {
    background-color: var(--c-neutral-700);
}

.bg--black-600 {
    background-color: var(--c-neutral-600);
}

.bg--black-500 {
    background-color: var(--c-neutral-500);
}

.bg--black-400 {
    background-color: var(--c-neutral-400);
}

.bg--black-300 {
    background-color: var(--c-neutral-300);
}

.bg--black-200 {
    background-color: var(--c-neutral-200);
}

.bg--black-100 {
    background-color: var(--c-neutral-100);
}

.bg--black-50 {
    background-color: var(--c-neutral-50);
}

.bg--black-25 {
    background-color: var(--c-neutral-25);
}

.theme--dark * { 
    color: var(--c-white);
}

/*
 * Self-hosted variable fonts.
 *
 * Each family needs TWO @font-face blocks: one upright, one italic.
 * The browser consults a single face per (family, style, weight) combo,
 * so the comma-separated `src:` fallback syntax can't be used to register
 * italics — that's a fallback chain ("try A, fall back to B"), not a
 * variant list.
 *
 * `font-weight` is declared as a *range* because these are variable fonts:
 *   - EB Garamond: wght axis is 400–800
 *   - Jost:        wght axis is 100–900
 * A single value (e.g. font-weight: 400) would tell the browser the font
 * only renders that one weight, forcing synthetic bold for everything else.
 *
 * Files live at the theme root under assets/fonts/<family>/. The relative
 * path goes up three levels from this file (src/css/base/) to reach the
 * theme root, then back down into assets/fonts/.
 */

@font-face {
    font-family: 'EB Garamond';
    src: url('./eb-garamond-variable-BUNBP5ar.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('./eb-garamond-variable-italic-B2EO8eH-.woff2') format('woff2');
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Jost';
    src: url('./jost-variable-CXCmvRRs.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost';
    src: url('./jost-variable-italic-Sdk8nxZF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/*
 * Type scale — derived from textStyles.json (Figma export).
 *
 * All sizes are in rem (base = 16px). Letter-spacing is in em so it
 * scales proportionally with font-size. To make the entire scale
 * responsive later, change `html { font-size }` at breakpoints — every
 * rem-based value will follow automatically.
 *
 * The scale has three tiers:
 *   - Display (6.5rem–3rem):  hero headlines, marketing splashes.
 *     Available via utility classes only (.display-2xl, etc.).
 *   - Heading (2.5rem–1.25rem): section headings. Mapped to h1–h4
 *     by default; also available as .h1–.h4 class aliases for
 *     accessibility (e.g. <h2 class="h4"> for semantic+visual split).
 *   - Body (1.125rem–0.625rem): body text. h5/h6 default to the
 *     top two body sizes; the rest are utility classes.
 */

:root {
    --body-font-stack: 'Jost', sans-serif;
    --header-font-stack: 'EB Garamond', serif;

    /* Display sizes (104–48px) */
    --text-display-2xl: 6.5rem;
    --text-display-xl: 5.5rem;
    --text-display-lg: 4.5rem;
    --text-display-md: 3.75rem;
    --text-display-sm: 3rem;

    /* Heading sizes (40–20px) */
    --text-heading-xl: 2.5rem;
    --text-heading-lg: 2rem;
    --text-heading-md: 1.6rem;
    --text-heading-sm: 1.3rem;

    /* Body sizes (18–10px) */
    --text-body-lg: 1.125rem;
    --text-body-md: 1rem;
    --text-body-sm: 0.875rem;
    --text-body-xs: 0.75rem;
    --text-body-xxs: 0.625rem;
}

/* ---- Base ---- */

html {
    font-family: var(--body-font-stack);
    font-weight: 400;
    font-size: 16px; /* rem anchor — do NOT set this in rem */
    line-height: 1.6;
    color: var(--c-neutral-800);
}

/* ---- Shared heading / display margin ---- */

/*
 * All heading elements, heading class aliases, and display utility classes
 * get the same proportional bottom margin. Using `em` (not `rem`) so the
 * spacing scales with each element's own font-size — a 104px display
 * heading gets more breathing room than an h6 at 16px.
 */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading-xl, .heading-lg, .heading-md, .heading-sm,
.display-2xl, .display-xl, .display-lg, .display-md, .display-sm {
    margin-top: 0;
    margin-bottom: 0.75em;
}

/* ---- Heading element defaults ---- */

h1, h2, h3, h4 {
    font-family: var(--header-font-stack);
    font-weight: 400;
    line-height: 1;
}

h1 { font-size: var(--text-heading-xl); letter-spacing: -0.05em; }

h2 { font-size: var(--text-heading-lg); letter-spacing: -0.031em; }

h3 { font-size: var(--text-heading-md); letter-spacing: -0.042em; }

h4 { font-size: var(--text-heading-sm); }

h5, h6 {
    font-weight: 400;
    line-height: 1.3;
}

h5 { font-size: var(--text-body-lg); }

h6 { font-size: var(--text-body-md); }

/* ---- Heading class aliases (for accessibility / semantic overrides) ---- */

.h1 { font-size: var(--text-heading-xl); letter-spacing: -0.05em; }

.h2 { font-size: var(--text-heading-lg); letter-spacing: -0.031em; }

.h3 { font-size: var(--text-heading-md); letter-spacing: -0.042em; }

.h4 { font-size: var(--text-heading-sm); }

.h5 { font-size: var(--text-body-lg); }

.h6 { font-size: var(--text-body-md); }

/* ---- Heading utility classes (by scale name — self-contained, apply to any element) ---- */

.heading-xl { font-family: var(--header-font-stack); font-size: var(--text-heading-xl); letter-spacing: -0.05em;  line-height: 1.1; }

.heading-lg { font-family: var(--header-font-stack); font-size: var(--text-heading-lg); letter-spacing: -0.031em; line-height: 1.1; }

.heading-md { font-family: var(--header-font-stack); font-size: var(--text-heading-md); letter-spacing: -0.042em; line-height: 1.1; }

.heading-sm { font-family: var(--header-font-stack); font-size: var(--text-heading-sm);                           line-height: 1.1; }

/* ---- Display utility classes ---- */

.display-2xl { font-family: var(--header-font-stack); font-size: var(--text-display-2xl); letter-spacing: -0.058em; line-height: 1; }

.display-xl  { font-family: var(--header-font-stack); font-size: var(--text-display-xl);  letter-spacing: -0.057em; line-height: 1; }

.display-lg  { font-family: var(--header-font-stack); font-size: var(--text-display-lg);  letter-spacing: -0.042em; line-height: 1; }

.display-md  { font-family: var(--header-font-stack); font-size: var(--text-display-md);  letter-spacing: -0.05em;  line-height: 1; }

.display-sm  { font-family: var(--header-font-stack); font-size: var(--text-display-sm);  letter-spacing: -0.042em; line-height: 1; }

/* ---- Body size utility classes ---- */

.body-lg  { font-size: var(--text-body-lg); }

.body-md  { font-size: var(--text-body-md); }

.body-sm  { font-size: var(--text-body-sm); }

.body-xs  { font-size: var(--text-body-xs); }

.body-xxs { font-size: var(--text-body-xxs); }

/* ---- Weight utility classes ---- */

.font-regular  { font-weight: 400; }

.font-medium   { font-weight: 500; }

.font-semibold { font-weight: 600; }

.font-bold     { font-weight: 700; }

/* ---- Existing utilities ---- */

.upper {
    text-transform: uppercase;
}

/* ---- Responsive scaling ---- */

/*
 * Two layers of responsive scaling:
 *
 * 1. `html { font-size }` drops from 16px to 14px at the breakpoint.
 *    This uniformly scales the ENTIRE rem-based type system by ~87.5%.
 *    Heading and body sizes are well-served by this uniform reduction.
 *
 * 2. Display sizes get ADDITIONAL overrides on top of that, because a
 *    uniform 87.5% reduction still leaves them too large for small
 *    screens (e.g. display-2xl goes from 104px to 91px — still way
 *    too big for a 375px phone). The overrides below compress the
 *    display tier into a phone-appropriate range (~28–49px).
 *
 * Heading and body sizes are NOT overridden here — the uniform html
 * font-size reduction handles them well. Only the display tier needs
 * the extra compression.
 *
 * Old: --text-display-2xl: 3.5rem;   
 *      --text-display-xl: 3rem;     
 *      --text-display-lg: 2.5rem;    
 *      --text-display-md: 2.25rem;   
 *      --text-display-md: 2.5rem;  
 *      --text-display-sm: 2rem;     
 */

@media screen and (max-width: 996px) {
    :root {
        /* --text-heading-md: 2rem;   22.75px (was 21px implicit) */
    }
}

@media screen and (max-width: 996px) {
    :root {
        --text-display-2xl: 4rem;   /* 49px (was 91px) */
        --text-display-xl: 3.5rem;      /* 42px (was 77px) */
        --text-display-lg: 3rem;    /* 35px (was 63px) */
        --text-display-md: 2.5rem;   /* 31.5px (was 52.5px) */
        --text-display-sm: 2.25rem;      /* 28px (was 42px) */
    }

    .body-sm  { 
        font-size: var(--text-body-md);
    }

    html {
        /* font-size: 14px; */
    }
}

:root {
    --container-width--lg: 1300px;
    --container-width--md: 1100px;
    --container-width--sm: 700px;
}

.contained,
.contained--lg,
.contained--md,
.contained--sm {
    max-width: var(--container-width--md);
    width: 100%;
    margin: 0 auto;
    z-index: 0;
    position: relative;
}

.contained--lg {
    max-width: var(--container-width--lg);
}

.contained--sm {
    max-width: var(--container-width--sm);
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-main {
    min-height: 500px;
}

.error-404 {
    max-width: 600px;
    margin: 0 auto;
}

@media screen and (max-width: 1300px) {
    .contained {
        max-width: 100%;
        padding: 0 60px;
    }
}

@media screen and (max-width: 996px) {
   .contained {
        padding: 0 50px;
    } 
}

@media screen and (max-width: 768px) {
    .contained {
        padding: 0 20px;
    }
}

@media screen and (max-width: 450px) {}

a {
    color: var(--c-neutral-800);
    text-decoration: none;
}

a:not(.btn) {
    text-decoration: none;
}

a:hover {
    cursor: pointer;
    color: var(--c-accent-800);
}

a:not(.btn):hover {
    color: var(--c-accent-500);
}

.form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group,
.form-group__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.form-group label,
.form-group > p {
    font-weight: 500;
    margin-bottom: 0;
}

.form-label--required::after {
    content: "*";
    color: var(--c-semantic-danger);
    margin-left: 4px;
}

.form-group--row {
    flex-direction: row;   
}

:not(.wp-admin) fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Basic Inputs */

:not(.wp-admin) input,
:not(.wp-admin) textarea,
:not(.wp-admin) select {
    padding: 10px 12px;
    border: 1px solid var(--c-neutral-25);
    border-radius: 6px;
}

:not(.wp-admin) input:not([type="checkbox"])
                    :not([type="radio"])
                    :not([type="submit"]) {
    min-width: 250px;
}

:not(.wp-admin) input::placeholder,
:not(.wp-admin) textarea::placeholder,
:not(.wp-admin) select::placeholder {
    opacity: 0.4;
}

:not(.wp-admin) input:focus,
:not(.wp-admin) textarea:focus,
:not(.wp-admin) select:focus {
    outline: 2px solid var(--c-accent-800);
}

/* Radio Buttons */

.form-item__checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

:not(.wp-admin) input[type="radio"],
:not(.wp-admin) input[type="checkbox"] {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-right: 6px;
    /* Darker than the text-input border (neutral-25) — at 20px these
       controls vanish against light backgrounds without it. */
    border-color: var(--c-neutral-200);
}

:not(.wp-admin) input[type="radio"] + label,
:not(.wp-admin) input[type="checkbox"] + label {
    font-weight: 400;
}

:not(.wp-admin) input[type="radio"]:checked + label,
:not(.wp-admin) input[type="checkbox"]:checked + label {
    /* font-weight: 500; */
}

:not(.wp-admin) input[type="radio"] {
    border-radius: 10px;
}

:not(.wp-admin) input[type="radio"]::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 4px;
    transform: scale(0);
    transition: transform 0.15s ease-in-out;
    background-color: var(--c-accent-800);
}

:not(.wp-admin) input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Checkbox Buttons */

:not(.wp-admin) input[type="checkbox"] {
    /* border-radius: 3px; */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" fill="none"><path d="M5 18L12 25L28 9" stroke="%23B5B5BA" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

:not(.wp-admin) input[type="checkbox"]:checked {
    background-color: var(--c-accent-800);
    border-color: var(--c-accent-800);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M5 18L12 25L28 9" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

/* Select Inputs */

:not(.wp-admin) select {
    position: relative;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M26 12L16 22L6 12" stroke="%23090819" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); /* Chevron */
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    /* Add padding to prevent text from going under arrow */
    padding-right: 32px;
    min-width: 200px;
}

:not(.wp-admin) select::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M26 12L16 22L6 12" stroke="%23090819" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); /* Chevron */
    position: absolute;
    right: 0px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
}

/* Submit Buttons */

:not(.wp-admin) input[type="submit"],
:not(.wp-admin) button[type="submit"] {
    display: inline-flex;
    align-items: center;
    background-color: var(--c-neutral-1000);
    border: 1px solid var(--c-neutral-1000);
    color: var(--c-white);
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 400;
    width: fit-content;
}

:not(.wp-admin) button[type="submit"]:hover,
:not(.wp-admin) input[type="submit"]:hover {
    cursor: pointer;
    opacity: 0.8;
}

@media screen and (max-width: 500px) {
    .form-group--row {
        flex-direction: column;   
    }

    input, select, textarea {
        max-width: 100%;
        width: 100%;
    }
}

:root {
    --shadow-sm: 0 0 2px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px 0 rgba(17, 17, 26, 0.05), 0 4px 16px 0 rgba(17, 17, 26, 0.05);
    --shadow-inner: 0 -6px 100px 0 rgba(0, 0, 0, 0.10) inset;
}

/*
 * Block spacing tokens + override utility classes.
 *
 * Each block's root selector reads its vertical spacing via
 *   padding-top: var(--pt, <block-default>);
 *   padding-bottom: var(--pb, <block-default>);
 *   margin-top: var(--mt, <block-default>);
 *   margin-bottom: var(--mb, <block-default>);
 *
 * Utility classes set those variables rather than the properties themselves.
 * When no utility class is applied, var() falls back to the block's own
 * default — so unset overrides preserve existing designs cleanly, and set
 * overrides win via the normal cascade without needing !important.
 */

:root {
    --space-none: 0;
    --space-sm:   30px;
    --space-md:   60px;
    --space-lg:   80px;
    --space-xl:   100px;
    --space-xxl:  150px;
}

@media screen and (max-width: 700px) {
    :root {
        --space-sm:   20px;
        --space-md:   40px;
        --space-lg:   60px;
        --space-xl:   80px;
        --space-xxl:  100px;
    }
}

/* Padding top */

.pt-none { --pt: var(--space-none); }

.pt-sm   { --pt: var(--space-sm); }

.pt-md   { --pt: var(--space-md); }

.pt-lg   { --pt: var(--space-lg); }

.pt-xl   { --pt: var(--space-xl); }

.pt-xxl  { --pt: var(--space-xxl); }

/* Padding bottom */

.pb-none { --pb: var(--space-none); }

.pb-sm   { --pb: var(--space-sm); }

.pb-md   { --pb: var(--space-md); }

.pb-lg   { --pb: var(--space-lg); }

.pb-xl   { --pb: var(--space-xl); }

.pb-xxl  { --pb: var(--space-xxl); }

/* Margin top */

.mt-none { --mt: var(--space-none); }

.mt-sm   { --mt: var(--space-sm); }

.mt-md   { --mt: var(--space-md); }

.mt-lg   { --mt: var(--space-lg); }

.mt-xl   { --mt: var(--space-xl); }

.mt-xxl  { --mt: var(--space-xxl); }

/* Margin bottom */

.mb-none { --mb: var(--space-none); }

.mb-sm   { --mb: var(--space-sm); }

.mb-md   { --mb: var(--space-md); }

.mb-lg   { --mb: var(--space-lg); }

.mb-xl   { --mb: var(--space-xl); }

.mb-xxl  { --mb: var(--space-xxl); }

/*
 * Negative margin — single opt-in token (`neg`) tied to the `lg` step.
 * Lets a block pull up over its previous sibling (mt-neg) or the next one
 * pull up over it (mb-neg) for "floating card on top of hero" effects.
 *
 * Author flow: add a `neg` choice to the margin_top / margin_bottom ACF
 * select fields. block_spacing_classes() concatenates `mt-` / `mb-` to
 * whatever token the field holds, so `mt-neg` / `mb-neg` light up
 * automatically.
 *
 * Stacking gotcha: for the overlapping block to render *above* its
 * neighbour, it usually needs `position: relative` to establish its own
 * stacking context. Most theme blocks already set that.
 */

.mt-neg { --mt: calc(-1 * var(--space-lg)); }

.mb-neg { --mb: calc(-1 * var(--space-lg)); }

* { 
    /* outline: 1px solid red; */
}

.no-scroll {
    overflow: hidden;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.text-center {
    text-align: center;
}

.accent {
    color: var(--c-accent-800);
}

.italic {
    font-style: italic;
}

.fancy-underline {
    position: relative;
}

.fancy-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0px;
    height: 16px;
    z-index: -1;
    transform: rotate(-2.5deg);
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='326' height='18' viewBox='0 0 326 18' fill='none'%3E%3Cpath d='M264.886 5.62029C266.25 7.32837 267.171 8.47395 268.338 9.93003C272.161 6.9583 275.731 3.78548 279.778 10.2985C280.629 11.6773 286.564 9.71545 289.863 9.34412C292.674 10.3302 295.686 12.0082 298.827 12.3583C307.524 13.3206 316.281 13.701 325.02 14.3183C324.99 15.2502 324.959 16.2004 324.929 17.1323C321.027 17.168 317.131 17.369 313.225 17.2031C274.647 15.5772 236.074 13.3838 197.47 12.3788C156.921 11.3096 116.341 11.1906 75.766 10.9988C53.6271 10.9003 31.4723 11.5333 9.332 11.7094C7.23787 11.7263 4.84661 11.3925 3.15267 10.3022C1.62901 9.33375 -0.105871 7.05001 0.00482974 5.48272C0.102658 4.09768 2.58654 1.85553 4.09457 1.77889C20.4147 0.935261 36.7425 -0.017691 53.0733 0.0002451C70.0475 0.0269924 87.0003 1.11453 103.973 1.6723C119.713 2.19799 135.469 2.76137 151.208 3.04889C164.017 3.29424 176.84 2.82628 189.632 3.30855C194.592 3.49404 199.416 5.84948 204.402 6.42145C206.851 6.70429 211.071 10.0244 212.014 4.01037C212.049 3.77471 213.346 3.39011 213.704 3.63521C218.097 6.52793 223.213 2.98819 227.255 4.77552C231.746 6.77776 235.678 6.32289 240.085 5.48027C241.536 5.19813 243.242 6.87535 244.862 6.98976C246.819 7.12805 248.807 6.33444 250.795 6.30997C252.478 6.28235 254.67 6.14414 255.729 7.11634C259.193 10.2365 261.882 9.65721 264.85 5.61777L264.886 5.62029Z' fill='%2300CC96'/%3E%3C/svg%3E");
    background-size: cover;
    animation: slide-in 0.5s ease-in-out forwards;
    animation-play-state: paused;
}

.fancy-underline.is-in-view::after {
    animation-play-state: running;
}

.v-align {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.bg-image {
    background-size: cover;
    background-position: center;
}

.img-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    /* height: 100%; */
    /* background-color: var(--c-neutral-25); */
    border-radius: 10px;
}

.img-wrap img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

img.lazyload {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img.lazyload.loaded,
img.lazyload.load-error {
  opacity: 1;
}

/*
 * Preloaded images (rendered eagerly with real src + <link rel="preload">)
 * use the same fade-in pattern as lazy-loaded ones for visual consistency.
 * Trades a small LCP penalty (~300ms transition) for a smoother appearance
 * — a deliberate UX call. JS adds .is-loaded after the image's load event
 * fires (or via requestAnimationFrame for already-cached images).
 */

img.preload-fade {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img.preload-fade.is-loaded,
img.preload-fade.load-error {
    opacity: 1;
}

.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-inner {
    box-shadow: var(--shadow-inner);
}

.line-tight {
    line-height: 1;
}

.line-snug {
    line-height: 1.2;
}

/* Strip default list chrome (bullets, indentation, vertical margins). Pair
   with flex/grid utilities on the same element to lay out the items. */

.list-reset {
    list-style: none;
    padding: 0;
    padding-left: 0 !important;
    margin: 0;
    margin-bottom: 0 !important;
}

.list-reset li:last-child {
    margin-bottom: 0;
}

/* Fancy ordered list — colored, larger numbers offset from the text.
   Uses a CSS counter + ::before instead of ::marker so the number can be
   freely positioned (transform / top / margin / etc.) — ::marker is
   limited to typography properties and ignores positioning. */

.fancy-ol {
    list-style: none;             /* suppress the browser's built-in marker */
    counter-reset: fancy-counter;
    padding-left: 2rem !important;
}

.fancy-ol li {
    counter-increment: fancy-counter;
    position: relative;           /* containing block for the ::before */
    padding-left: 2rem;
    margin-bottom: 1.5rem !important;
}

.fancy-ol li::before {
    content: counter(fancy-counter) " /";
    position: absolute;
    left: -1.75rem;                /* horizontal placement of the number */
    top: 0;                     /* the nudge — tune to match baseline */
    color: var(--c-accent-800);
    font-size: var(--text-heading-lg);
    line-height: 1;
    font-family: var(--header-font-stack);
    opacity: 0.4;
}

.label {
    text-transform: uppercase;
    opacity: 0.6;
    letter-spacing: 1px;
    line-height: 1;
    font-weight: 450;
}

/* Shared keyframes */

@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes slide-in {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

.slide-in {
    animation: slide-in 1s ease-out forwards;
}

/* Scroll-trigger modifier. Pair with any animation utility (.slide-in, future
   .fade-in, etc.) — the animation stays paused at frame 0 until the JS module
   adds `.is-in-view` on intersection. animation-fill-mode: both ensures frame
   0 is rendered while paused AND the final frame sticks after running. */

.has-animation {
    animation-play-state: paused;
    animation-fill-mode: both;
}

.has-animation.is-in-view {
    animation-play-state: running;
}

/* Lazy load <div> background images. */

[data-bg-url] {
    position: relative;
    --bg-image: none;
    overflow: hidden;
}

[data-bg-url]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-image: var(--bg-image);
    /* background-image: linear-gradient(rgba(9, 8, 25, 0.7), rgba(9, 8, 25, 0.7)), var(--bg-image); */
    /* background-image: attr(data-bg-image); */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

[data-bg-url][data-bg-loaded="true"]::before {
    opacity: 1;
}

/*
 * Generic background panel.
 *
 * Full-bleed, rounded backdrop element that sits behind block content. Place
 * as a sibling of the content inside a positioned parent (typically the
 * block's outer <section>). DOM order matters — put the panel first so later
 * siblings render on top.
 *
 * Variants:
 *   .bg-panel--neutral  Light surface
 *   .bg-panel--dark     Dark surface
 *   .bg-panel--image    Dark surface + dimmed background image overlay; pair
 *                       with data-bg-url for lazy loading
 *
 * Blocks may scope per-instance overrides (z-index, height tweaks) via
 * `.<block> .bg-panel { ... }` in the block's own stylesheet.
 */

.bg-panel {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    /* pointer-events: none; */
}

.bg-panel--neutral {
    background: var(--c-neutral-15);
}

.theme--dark .bg-panel--neutral {
    background: var(--c-white);
    opacity: 0.05;
}

.bg-panel--dark {
    background: var(--c-neutral-1000);
}

.bg-panel--accent {
    /* background-color: var(--c-accent-25); */
    background:     
      linear-gradient(270deg,                                                  
          rgba(102, 224, 192, 0)     0%,                                        
          rgba(102, 224, 192, 0.188) 36.86%,
          rgba(102, 224, 192, 0.2)   59.78%,                                   
          rgba(102, 224, 192, 0)     100%                                                               
      )                                                                        
      var(--c-accent-25);  
}

/* Image variant overrides the generic [data-bg-url] rules above so the panel
   keeps its absolute positioning and the loaded image renders dimmed over the
   dark base instead of at full opacity. */

.bg-panel--image {
    position: absolute;
    background: var(--c-neutral-1000);
}

.bg-panel--image[data-bg-loaded="true"]::before {
    opacity: 0.2;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    /* margin-bottom: 1rem !important; */
}

.eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--c-neutral-100);
}

@media screen and (max-width: 1300px) {
    .bg-panel {
        width: calc(100% - 40px);
    }
}

@media screen and (max-width: 996px) {
    .v-align {
        flex-direction: column;
        gap: 48px;
        align-items: flex-start;
    }
}

@media screen and (max-width: 768px) {
    .fancy-underline::after {
        height: 10px;
    }

    .bg-panel {
        width: calc(100%);
        border-radius: 0;
    }
}

@media screen and (max-width: 450px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }

    .fancy-underline::after {
        height: 12px;
    }
}

/* Templates */

.error404 .page-header {
    margin-bottom: 120px;
}

@media screen and (max-width: 768px) {
    .error404 .page-header {
        margin-bottom: 0;
    }

    .error404 .site-footer {
        margin-top: 16px;
    }
}

.archive__filters {
    display: flex;
    /* flex-direction: column; */
    gap: 8px;
    align-items: center;
}

.filter--radio fieldset,
.filter--checkbox fieldset {
    display: flex;
    gap: 20px;
}

.filter--checkbox fieldset label,
.filter--radio fieldset label {
    display: flex;
    align-items: center;
}

/* Tabs filter: horizontal row of clickable tabs with one active at a time.
   Active state is toggled by JS on click (in fetch-posts.js). */

.filter--tabs {
    width: 100%;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--c-neutral-50);
}

.filter--tabs .tabs {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.filter--tabs .tab {
    background: none;
    border: 0;
    color: var(--c-neutral-800);
    /* padding: 8px 16px; */
    padding-bottom: 12px;
    cursor: pointer;
    font: inherit;
    font-size: var(--text-body-lg);
    line-height: 1.2;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.filter--tabs .tab:hover:not(.is-active) {
    color: var(--c-neutral-800);
    opacity: 0.6;
}

.filter--tabs .tab.is-active {
    color: var(--c-accent-800);
    position: relative;
}

.filter--tabs .tab.is-active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 100%;
    background-color: var(--c-accent-800);
}

.archive__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 40px;
}

/* Archive.php-only spacing. WP adds `.archive` to <body> only when the
   archive template handles the route (category/tag/author/CPT archives
   without a curated Page). Curated Pages that render a post-list block
   get body.page instead, so they aren't affected. */

body.archive .archive__list {
    margin-top: 120px;
    margin-bottom: 60px;
}

@media screen and (max-width: 996px) {
    .archive__filters {
        flex-wrap: wrap;
    }

    .archive__list {
        flex-wrap: wrap;
        column-gap: 16px;
        row-gap: 32px;
    }
    
    .archive__list .post-excerpt {
        max-width: calc(50% - 8px);
    }

    .archive__list .post-excerpt--featured {
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .archive__list {
        flex-direction: column;
    }

    .archive__list .post-excerpt {
        max-width: 100%;
    }
}

@media screen and (max-width: 450px) {
    .archive__filters {
        flex-direction: column;
    }

    .archive__list {
        gap: 36px;
    }

    .archive__filters .filter {
        max-width: 100%;
        width: 100%;
    }
}

/*
 * Front page (temporary "coming soon" placeholder).
 *
 * The hero background is loaded via the theme's lazy-loading helpers
 * (initLazyLoading() in src/js/modules/lazy-loading.js). The <main>
 * carries `data-bg-url`, `data-gradient`, and the `preload` class so
 * the JS loads it immediately on init (bypassing the IntersectionObserver).
 * When the image is fetched the JS sets the `--bg-image` custom property
 * as an inline style on .coming-soon and flips `data-bg-loaded="true"`,
 * which triggers the opacity transition on the ::before pseudo-element
 * below — giving a clean fade-in instead of the native progressive-render
 * look.
 *
 * The `<link rel="preload" as="image">` in front-page.php's <head> kicks
 * off the fetch via the browser's preload scanner before JS even runs,
 * so the JS-driven fade-in doesn't cost us LCP.
 *
 * Scoped to body.is-coming-soon so these styles never leak into other
 * pages. Delete this file (and the matching @import in src/css/app.css,
 * and front-page.php itself) when the real homepage launches.
 */

body.is-coming-soon {
    margin: 0;
    color: var(--c-white);
    background-color: var(--c-neutral-1000);
}

.coming-soon {
    position: relative;
    min-height: 100dvh;
    width: 100%;
    /* padding: 2rem; */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    /* background: url('../../images/bg-tji.svg') var(--c-neutral-1000) 0% 0% / 300px 300px repeat; */
    background: url('./bg-tji-CmRYCF5o.svg') var(--c-neutral-100) 0% 0% / 300px 300px repeat;
}

.coming-soon__container {
    position: relative; /* anchor for the orbital ::after pseudo-element */
    /* max-width: 1400px; */
    /* max-width: calc(100vw - 4rem); */
    max-width: calc(100vw);
    /* height: calc(100dvh - 4rem); */
    height: calc(100dvh);
    min-height: 750px;
    width: 100vw;
    /* border-radius: 24px; */
    /* border-radius: 42px; */
    border-radius: 0px;
    margin: 0 auto;
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 80px;
    background: var(--c-neutral-1000);
    box-shadow: 0 8px 32px 0 rgba(0, 204, 150, 0.25), 0 4px 16px 0 rgba(0, 204, 150, 0.25);
}

.coming-soon__container::before {
    border-radius: 0px;
}

/*
 * Perimeter "construction" glow.
 *
 * A 1px pseudo-element travels around the container's rounded-rectangle
 * perimeter via CSS Motion Path. Its only visible presence is its
 * box-shadow — a soft accent-coloured halo — so as the dot walks the edge,
 * the halo appears to surf along the container's outline, lingering both
 * just outside the edge (visible against the .coming-soon background) and
 * just inside (visible against the dark container background, beneath the
 * z-index: 1 content).
 *
 * `offset-path: inset(0 round 24px)` defines the path as the outline of a
 * rounded rectangle inset by 0 from the containing block (the container's
 * own padding box) with 24px corners — i.e. the container's exact
 * perimeter, including the curved corner segments. The browser handles
 * the perimeter math; we just animate `offset-distance` from 0% to 100%.
 *
 * Motion-path animations are GPU-composited like transform animations —
 * no paint/layout thrash per frame. The container's static box-shadow
 * above remains as the always-on ambient glow; this pseudo-element is
 * the moving accent that hints at construction happening behind the card.
 * z-index: 0 keeps it above the container's background but below
 * .coming-soon__content (which sits at z-index: 1).
 *
 * Note: if you ever change the container's `border-radius`, update the
 * `round 24px` value below to match — they should always be the same.
 */

.coming-soon__container::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    /* box-shadow: 0 0 120px 40px var(--c-accent-800); */
    box-shadow: 0 0 120px 60px var(--c-accent-800);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    offset-path: inset(-50px round 50px);
    offset-anchor: center;
    offset-rotate: 0deg;
    animation: coming-soon-trace 24s linear infinite;
}

@keyframes coming-soon-trace {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
}

/*
 * Respect users who've asked the OS for reduced motion. Freeze the orbital
 * glow at its starting position (a static halo on the right side of the
 * container) instead of continuously animating. The static ambient shadow
 * on .coming-soon__container is unaffected.
 */

@media (prefers-reduced-motion: reduce) {
    .coming-soon__container::after {
        /* animation: none; */
    }
}

.coming-soon__content {
    position: relative;
    z-index: 1; 
    /* max-width: 1100px; */
    max-width: 1200px;
    display: flex;
    gap: 60px;
    align-items: flex-end;
    height: 100%;
}

.coming-soon__left,
.coming-soon__right {
    height: 100%;
    display: flex;
}

.coming-soon__left {
    max-width: 650px;
    width: 100%;
    position: relative;
    align-items: flex-end;
}

.coming-soon__logo-wrapper {
    position: absolute;
    top: 0px;
    left: 50%;
    max-width: 1100px;
    width: 100%;
    transform: translateX(-50%);
}

.coming-soon__logo {
    width: 160px;
    height: 50px;
}

.coming-soon__right {
    max-width: 390px;
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
}

.coming-soon__headline {
    font-size: 88px;
    font-style: normal;
    line-height: 88px; /* 100% */
    letter-spacing: -5px;
}

.coming-soon__body {
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0 0 2rem;
    margin-bottom: 0px;
    /* opacity: 0.8; */
}

.coming-soon__contact {
    list-style: none;
    margin-top: 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.coming-soon__contact li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.coming-soon__contact a {
    color: var(--c-white);
    font-size: 1.125rem;
}

@media screen and (max-width: 1200px) {
    .coming-soon__content {
        max-width: 900px;
    }
}

@media screen and (max-width: 996px) {
    .coming-soon__content {
        flex-direction: column;
        /* text-align: center; */
        /* align-items: center; */
        gap: 24px;
        height: auto;
    }

    .coming-soon__headline {
        margin-top: 96px;
    }

    .coming-soon__left {
        flex-direction: column;
        align-items: flex-start;
        /* justify-content: flex-start; */
    }

    .coming-soon__right {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .coming-soon__container {
        padding: 60px 30px;
        position: relative;
        /* border-radius: 24px; */
        /* height: calc(100dvh - 2rem); */
        /* max-width: calc(100vw - 2rem); */
        min-height: 650px;
    }

    .coming-soon__container::before {
        background-position: 75%;
    }

    .coming-soon__logo-wrapper {
        top: 60px;
        left: 30px;
        transform: translateX(0px);
    }

    .coming-soon__logo {
        width: 150px;
    }

    .coming-soon__headline {
        font-size: 64px;
        line-height: 1;
    }

    .coming-soon__content {
        position: static;
    }

    .coming-soon {
        /* padding: 1rem; */
        /* height: calc(100dvh - 10%); */
    }

    .coming-soon__left,
    .coming-soon__right {
        align-items: flex-start;
        text-align: left;
    }

    .coming-soon__headline {
        margin-top: 120px;
        letter-spacing: -2px;
    }

    .coming-soon__contact {
        margin-top: 36px;
        margin-bottom: 0px;
        align-items: flex-start;
    }
}

@media screen and (max-width: 450px) {
    .coming-soon__headline {
        font-size: 56px;
    }

    .coming-soon__logo {
        width: 140px;
    }

    .coming-soon {
        padding: 0;
    }

    .coming-soon__container {
        max-width: calc(100vw);
        height: calc(100dvh);
        border-radius: 0px;
    }

    .coming-soon__container::before {
        border-radius: 0px;
    }
}

@media screen and (max-width: 375px) {
    .coming-soon__logo {
        width: 120px;
    }

    .coming-soon__headline {
        font-size: 48px;
    }
}

form.search-form {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 30px;
    margin-bottom: 40px;
    max-width: 550px;
}

form.search-form input[name="s"],
form.search-form label {
    width: 100%;
}

.search__results {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 40px;
}

/* Components */

/*
 * Shared CTA action group.
 *
 * Used wherever a block emits a row of one or more buttons. Owns the
 * universal "stack to a column on mobile, full-width buttons" responsive
 * behavior so each block doesn't have to redeclare it. Per-block specifics
 * (top margin, justify-content) stay in the block's own stylesheet via a
 * descendant selector (e.g. `.basic-cta .actions { ... }`).
 */

.actions {
    display: flex;
    gap: 6px;
}

@media (max-width: 450px) {
    .actions {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .actions > a {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }
}

/*
 * Breadcrumbs component — rendered by the breadcrumbs() helper. Structural
 * styles only (flex row, separator, current-page dim). Positional concerns
 * (e.g. spacing above or below the block) live on the caller's class
 * (`.page-header__breadcrumbs`, etc.) applied via the helper's `class` arg.
 */

.breadcrumbs {}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    border-bottom: 1px solid var(--c-neutral-50);
    padding-bottom: 16px;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    opacity: 0.8;
}

.breadcrumbs__item:hover {
    opacity: 1;
}

.breadcrumbs__item:hover > a {
    color: var(--c-neutral-800);
}

.breadcrumbs__item:not(:last-child)::after {
    content: '/';
    opacity: 0.4;
    /* margin-left: 8px; */
}

.breadcrumbs__item--current {
    opacity: 1;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    width: fit-content;
}

.btn--primary {
    background-color: var(--c-accent-800);
    border: 1px solid var(--c-accent-800);
    color: var(--c-neutral-800);
}

.btn--primary:hover,
.btn--primary:focus,
.btn--primary > a,
.btn--primary > a:hover,
.btn--primary > a:focus {
    color: var(--c-neutral-800);
}

.btn--secondary {
    background-color: var(--c-neutral-1000);
    border: 1px solid var(--c-neutral-1000);
    color: var(--c-white);
}

.theme--dark .btn--secondary {
    background-color: var(--c-white-alpha-5);
    border: 1px solid var(--c-white-alpha-20);
    backdrop-filter: blur(3.5px);
    color: var(--c-white);
}

.btn--secondary:hover {
    /* background-color: var(--c-white-alpha-10); */
}

.btn--secondary:hover,
.btn--secondary:focus,
.btn--secondary > a,
.btn--secondary > a:hover,
.btn--secondary > a:focus {
    color: var(--c-white);
}

.btn--secondary > a,
.btn--secondary > a:hover,
.btn--secondary > a:focus {
    color: var(--c-neutral-800);
}

.btn--secondary:hover {
    /* background-color: var(--c-white-alpha-10); */
}

.btn--tertiary {
    border: 1px solid var(--c-neutral-100);
}

.btn--tertiary:hover,
.btn--tertiary:focus,
.btn--tertiary > a,
.btn--tertiary > a:hover,
.btn--tertiary > a:focus {
    color: var(--c-neutral-800);
}

.btn--tertiary > a,
.btn--tertiary > a:hover,
.btn--tertiary > a:focus {
    color: var(--c-neutral-800);
}

.btn:hover {
    opacity: 0.8;
}

/* Core keeps galleries at 2 columns on mobile (its 600px media query never
   collapses below 2-up), and its column-width rules use an ID inside :not()
   (`figure.wp-block-image:not(#individual-image)`) for specificity, so
   !important is the only sane way to win against every columns-N variant. */

@media screen and (max-width: 768px) {
    .wp-block-gallery.has-nested-images figure.wp-block-image {
        width: 100% !important;
    }
}

/*
 * Gravity Forms styles — global stub.
 *
 * GF's bundled CSS is fully disabled via a filter in template-functions.php
 * (gform_disable_form_theme_css + the legacy stylesheet dequeues), so this
 * file is a from-scratch restyle. Plain class selectors are fine — there's
 * no GF specificity to fight.
 *
 * --- GF 2.5+ class reference ----------------------------------------------
 *   .gform_wrapper                Form's outer wrapper
 *   .gform_heading                Title + description (we hide via shortcode)
 *   .gform_body                   Body wrapper around the field list
 *   .gform_fields                 Field list
 *   .gfield                       Each field row
 *   .gfield--width-full           Field-row column-span modifiers — GF
 *   .gfield--width-half           still emits these classes; with GF's CSS
 *   .gfield--width-third          off you'll need your own grid here.
 *   .gfield_label                 Field label
 *   .gfield_required              Required-asterisk span
 *   .ginput_container             Wrapper around the actual input(s)
 *   .ginput_complex               Multi-input fields (e.g. Name first/last)
 *   .gfield_description           Help text under a field
 *   .gfield.gfield_error          Error-state field row
 *   .gfield_validation_message    Per-field error
 *   .gform_validation_errors      Top-of-form error summary
 *   .gform_footer                 Submit-button wrapper
 *   .gform_button                 Submit <input>
 *   .gform_confirmation_wrapper   Replaces the form on success
 *   .gform_confirmation_message   The success copy
 *   .gform_validation_container   Honeypot — keep visually hidden
 * -------------------------------------------------------------------------
 */

.gform_wrapper {
    /* Wrapper-level: max-width, base typography, etc. */
}

.gform_fields {
    /* Field list. With GF's grid CSS gone you'll need to reimplement
       multi-column layouts here if you use them — display: grid +
       per-modifier grid-column rules. */
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.gfield {
    /* Each field row — vertical spacing between rows. */
}

.gfield_label {
    /* Label typography (size, weight, color, spacing under the input). */
    display: block;
    font-size: var(--text-body-lg);
    margin-bottom: 6px;
    font-weight: 400;
}

.gform-field-label--type-sub {
    font-size: var(--text-body-md);
    opacity: 0.8;
}

.gfield_required {
    /* Required-asterisk span. Hide with `display: none` if your design
       conveys required-ness another way. */
    color: var(--c-semantic-danger);
    margin-left: 3px;
}

.ginput_container {
    display: flex;
    gap: 12px;
}

.gform-grid-col > *,
.ginput_container > * {                                                                        
    flex: 1 1 0;    
    min-width: 0;                                                                              
}

.ginput_container input[type="text"],
.ginput_container input[type="email"],
.ginput_container input[type="tel"],
.ginput_container input[type="url"],
.ginput_container input[type="number"],
.ginput_container textarea,
.ginput_container select {
    /* Inputs: border, padding, radius, font, focus state. */                                                                                                                                              
    background-color: var(--c-white);
    border: 0;
    box-shadow: var(--shadow-sm);
}

.gfield_checkbox,
.gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gfield_checkbox input[type="checkbox"] + label,
.gfield_radio input[type="radio"] + label {
    font-size: var(--text-body-lg);
    font-weight: 350;
}

.gfield_checkbox input[type="checkbox"] + label:hover,
.gfield_radio input[type="radio"] + label:hover {
    opacity: 0.8;
    cursor: pointer;
}

/* "Other" choice — the text input GF renders next to the last radio. */

.gfield_radio input.gchoice_other_control {
    margin-top: 6px;
}

.ginput_container_textarea {
    /* Textarea-specific: min-height, resize behaviour. */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ginput_container_textarea textarea {
    min-height: 200px;
    margin-top: 12px;
}

.ginput_container select {
    /* Select-specific: chevron icon, padding-right for the arrow. */
}

.ginput_complex {
    /* Multi-input fields (Name first/last, Address, etc.) — usually a
       flex/grid row of sub-inputs. */
}

/* Stack compound-field sub-inputs (Name first/last, Email + confirm)
   into their own rows on small screens. */

@media screen and (max-width: 996px) {
    .ginput_complex.ginput_container {
        flex-direction: column;
        /* Tighter than the 28px between field rows, so sub-fields of one
           compound field read as a group. */
        gap: 12px;
    }

    .ginput_complex .gform-grid-col {
        flex-basis: auto;
    }
}

.gfield_description {
    /* Help text typography (smaller, muted). */
    opacity: 0.8;
    margin-top: 6px;
}

.gfield_validation_message {
    color: var(--c-semantic-danger);
}

/* Per-field validation. GF adds .gfield_error to the row when invalid. */

.gfield.gfield_error .gfield_label,
.gfield_validation_message {
    /* Error label / message colour. */
}

.gform-grid-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gfield.gfield_error .ginput_container input,
.gfield.gfield_error .ginput_container textarea,
.gfield.gfield_error .ginput_container select {
    /* Error-state input border. */
}

/* Top-of-form summary, shown when at least one field fails validation. */

.gform_validation_errors {
    /* Tinted background, padding, border-radius. */
    color: var(--c-semantic-danger);
    background-color: var(--c-semantic-danger-bg);
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.gform_submission_error {
    font-family: var(--body-font-stack);
    letter-spacing: 0;
    font-size: var(--text-heading-sm);
    margin-bottom: 0;
}

.gform_validation_errors ol {
    display: none;
    padding-left: 22px;
}

.gform_validation_errors ol li {
    margin-bottom: 6px;
}

.gform_validation_error_link {
    color: var(--c-semantic-danger);
}

.gform_validation_error_link:hover {
    color: var(--c-semantic-danger) !important;
    opacity: 0.6;
}

.gform_footer {
    /* Submit-button wrapper: spacing above, alignment. */
}

.gform_button {
    /* Submit button. Cleanest: copy the rules from .btn / .btn--primary in
       components/buttons.css so the GF submit visually matches site CTAs.
       (GF won't accept a `class` attribute on the submit without form-level
       customization, so we restyle it directly here.) */
    margin-top: 32px;
    font-weight: 400;
}

/* Success state — replaces the form once the submission is accepted. */

.gform_confirmation_message {
    /* Confirmation copy treatment. */
    padding: 24px;
    background: var(--c-accent-50);
    border-radius: 16px;
    font-size: var(--text-body-lg);
}

/* Honeypot / hidden anti-spam field — keep visually hidden but accessible. */

.gform_validation_container {
    position: absolute;
    left: -9999px;
}

/* GF's "* indicates required" legend at the top of forms — we hide it
   because our individual labels carry the required indicator inline. */

.gform_required_legend {
    display: none;
}

.gf_clear {
    display: none;
}

.item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.item-list__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.item-list__icon {
    flex-shrink: 0;
    margin-top: 3px;
}

.item-list__text a {
    color: inherit;
}

.modal {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.is-active {
    opacity: 1;
    pointer-events: all;
    
}

.modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.modal__container {
    position: relative;
    background: white;
    /* Viewport-relative so the modal takes up most of the screen by
       default — leaves enough gutter on each side for the overlay to
       read as a frame, but gives embedded media (iframes, videos) room
       to breathe. max-* caps prevent absurd sizing on ultrawide. */
    width: 90vw;
    height: 85vh;
    max-width: 1200px;
    max-height: 90vh;
    transform: translateY(100px);
    transition: transform 0.3s;
    border-radius: 10px;
}

/* Iframe variant — shrink the container to hug the embed instead of
   taking the full almost-fullscreen default. Width is a sensible
   medium (the iframe inside uses width="100%" so it fills this — an
   explicit value is needed because width:auto would create a circular
   reference with the iframe's percentage width and collapse to 0).
   Height auto lets the container shrink-wrap the iframe's hardcoded
   557px height. 90vw / 90vh caps protect narrow screens. */

.modal--iframe .modal__container {
    width: 90vw;
    height: auto;
    max-width: 800px;
    max-height: 90vh;
}

/* <iframe> is display: inline by default — browsers reserve a few px of
   space below the element for descender characters on its imaginary
   text baseline. That whitespace becomes visible once the container
   shrink-wraps the iframe. Block-level removes the baseline reservation. */

.modal iframe {
    display: block;
}

/* "Click to unmute" hint over the iframe.
   - The overlay IS the call-to-action — a full-bleed translucent pane
     across the video area with the icon + message centered directly on
     it (no inner pill). Reads as "this entire area is clickable" rather
     than "click this small target".
   - Bounded above .controls (the bottom 60px) — that strip is the
     embed provider's controls bar, which swallows clicks without
     unmuting. Leaving it uncovered means the overlay area is the
     "safe click-through zone" aimed at the video element.
   - pointer-events: none — clicks pass straight through to the iframe
     (which is what actually unmutes the player). Inherited to children
     so icon/text are click-through too.
   - JS dismisses via window.blur (user clicks into iframe) or a 5s
     auto-fade fallback so the video isn't permanently obscured.
   - .is-active reveals; --dismissed fades back out.
   - Tune `bottom` (controls strip height) and `background-color`
     (overlay tint) per embed/design preference. */

.modal__iframe-hint {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3rem;
    gap: 0.75rem;
    /* background-color: rgba(0, 0, 0, 0.45); */
    background: linear-gradient(180deg, #1A2C27 0%, rgba(26, 44, 39, 0.50) 75%, rgba(26, 44, 39, 0.00) 100%);
    color: white;
    font-size: 1.1rem;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    /* Default transition — used for fade-out (dismiss + modal close).
       Snappy so the overlay clears out of the way quickly when the user
       has interacted or the modal is closing. The slower entrance
       transition is overridden on the .is-active rule below. */
    transition: opacity 0.3s ease;
    z-index: 2;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Entrance transition — slower and delayed so the iframe has a moment
   to start rendering before the overlay dims it. Without this, the
   overlay snaps in at the same instant the modal opens and the iframe
   pop-in feels jarring. The 300ms delay covers the iframe's initial
   paint; the 700ms fade is unhurried enough to read as deliberate. */

.modal.is-active .modal__iframe-hint {
    opacity: 1;
    transition: opacity 0.5s ease 2s;
}

/* Dismissed state — reverts to the base (snappy) transition so the
   overlay clears immediately when the user has interacted. The
   .modal.is-active scoping keeps the selector specific enough to
   beat the entrance rule above. */

.modal.is-active .modal__iframe-hint--dismissed {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.modal__iframe-hint__icon {
    flex-shrink: 0;
}

.modal__content {
    position: relative; /* containing block for .modal__iframe-hint */
}

.modal__title {
    margin-top: 0;
    margin-bottom: 0;
}

.modal.is-active .modal__container {
    transform: translateY(0px);
}

.modal__close {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -20px;
    top: -20px;
    border-radius: 30px;
    z-index: 2;
    padding: 15px;
    background-color: var(--c-neutral-800);
}

.modal__close > svg > rect {
    fill: var(--c-white);
}

.modal__close:hover {
    background-color: var(--c-neutral-600);
    cursor: pointer;
}

.modal__content {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* padding: 48px; */
    color: var(--c-neutral-800);
}

@media screen and (max-width: 1175px) {
    /* .modal__container {
        height: 382px;
        width: 675px;
    } */
}

@media screen and (max-width: 768px) {
    .modal__container {
        height: 70vh;
        width: 90vw;
    }
}

@media screen and (max-width: 450px) {
    .modal__close {
        top: 5px;
        right: 5px;
    }

    .modal__close > svg {
        width: 20px;
        height: 20px;
    }
}

/* Header */

.site-header {
    margin-bottom: 64px;
    /* Sticky header. Negative top equal to the contact bar's rendered
       height shifts the sticky pin point up — when sticky activates, the
       header pins at top: -60px, which puts the contact bar fully above
       the viewport leaving only the wrap visible. */
    position: sticky;
    top: -60px;
    z-index: 5;
}

/* Background + blur live on a pseudo-element instead of .site-header
   itself so .site-header doesn't become a containing block for fixed-
   positioned descendants. backdrop-filter (and transform/filter/
   perspective) on a real element promote it to a containing block,
   which would re-anchor the mobile .main-navigation (position: fixed)
   to .site-header's tiny bounds instead of the viewport. The pseudo-
   element provides the same visual without the side effect. */

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--c-white-alpha-80);
    backdrop-filter: blur(10px);
    transition: background-color ease-in-out 300ms;
    z-index: -1;
}

.site-header__contact {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--c-neutral-50);
}

.site-header__contact__right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.site-header__contact__right a:hover {
    color: var(--c-neutral-800);
    opacity: 0.6;
}

.site-header__wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 54px;
    margin-top: 16px;
    position: relative;
    z-index: 2;
    padding-bottom: 16px !important;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-branding--mobile {
    display: none;
}

.custom-logo-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-title > a {
    color: var(--c-color-black);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    opacity: 1;
}

.site-title > a:hover {
    opacity: 0.8;
}

.main-navigation {
    width: 100%;
}

.menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 32px;
    padding-left: 0;
}

.menu a {
    color: var(--c-neutral-800);
    font-size: var(--text-body-lg);
    text-decoration: none;
}

.menu a:hover {
    color: var(--c-neutral-800);
    opacity: 0.6;
}

/* Navigation buttons */

.menu-item.btn {
    background-color: transparent;
    padding: 0;
    border: none;
}

.menu-item.btn a {
    color: var(--c-white);
}

.menu-item.btn a {
    background-color: transparent;
    padding: 0;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

.menu-item.btn--primary a {
    background-color: var(--c-accent-800);
    border: 1px solid var(--c-accent-800);
    color: var(--c-white);
}

.menu-item.btn--secondary a {
    background-color: var(--c-accent-white);
    border: 1px solid var(--c-neutral-100);
    color: var(--c-neutral-800);
}

/* Dropdowns */

.menu-item-has-children {
    position: relative;
    padding-right: 26px;
    /* iOS / Android Chrome paint a translucent tap-highlight on whichever
       element has a JS click handler. The handler in navigation.js is
       attached to the <li>, so a tap on a link inside the open mega panel
       would flash the entire <li> (and the visually-rendered panel inside
       it). Disabling the highlight here removes the flash; the rule
       below restores a subtle one for actual links inside the panel. */
    -webkit-tap-highlight-color: transparent;
}

.mega-panel a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
}

.menu-item-has-children:hover {
    cursor: pointer;
}

.menu-item-has-children::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 30 24" fill="none"><path d="M26 12L16 22L6 12" stroke="%23090819" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>'); /* Chevron */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    transition: transform 0.2s;
}

.menu-item-has-children.active::after {
    transform: translateY(-50%) rotateZ(180deg);
}

.menu-item-has-children.active .sub-menu {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0px);
}

.sub-menu {
    position: absolute;
    display: flex;
    opacity: 0;
    pointer-events: none;
    gap: 12px;
    flex-direction: column;
    padding: 24px;
    border-radius: 10px;
    top: calc(100% + 12px);
    left: -15px;
    list-style: none;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
    transition: opacity 0.2s, transform 0.2s;
    transform: translateY(-20px);
}

.sub-menu li,
.sub-menu a {
    white-space: nowrap;
}

.sub-menu a {
    /* opacity: 0.8; */
    font-weight: 400;
}

/* Mega-menu panel — desktop styles only. Mobile UX/CSS is handled in a
   separate pass; the markup is identical so the mobile rules can target
   the same selectors. The visibility toggle reuses the same .active class
   on .menu-item-has-children that powers .sub-menu, so navigation.js
   needs no parent-selector branching. */

.mega-panel {
    position: absolute;
    display: flex;
    gap: 52px;
    top: calc(100% + 12px);
    left: -15px;
    padding: 32px;
    background-color: var(--c-white);
    /* background-color: var(--c-neutral-20); */
    /* background-color: var(--c-white-alpha-80); */
    /* backdrop-filter: blur(12px); */
    border-radius: 10px;
    /* box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); */
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: opacity 0.2s;
    min-width: 320px;
}

/* Transparent bridge that extends the panel's hit area up into the 12px
   visual gap above. Without it, the cursor briefly hovers over nothing
   when traversing from trigger to panel, which races the JS close timer
   in navigation.js. The bridge keeps mouseenter on the panel firing
   continuously across the gap. */

.mega-panel::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.menu-item-has-children.active .mega-panel {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* Right-anchored variant — flipped on by alignMegaPanel() in navigation.js
   when the default left-anchored panel would overflow the viewport's
   right edge. The bridge ::before uses left:0/right:0 so it follows the
   panel's edges automatically; no separate variant needed there. */

.mega-panel--align-right {
    left: auto;
    right: -15px;
}

/* `max-content` (rather than `1fr`) lets each track grow to fit its
   widest item — matters for nowrap link text. The 180px floor still
   holds via minmax. `1fr` would distribute "available space" but the
   panel is position: absolute with no defined width, so 1fr collapses
   to the floor and content overflows instead of expanding the panel. */

/* .mega-panel--cols-2 { grid-template-columns: repeat(2, minmax(180px, max-content)); }
.mega-panel--cols-3 { grid-template-columns: repeat(3, minmax(180px, max-content)); }
.mega-panel--cols-4 { grid-template-columns: repeat(4, minmax(180px, max-content)); } */

/* Sizing recipe: width anchors the preferred size to max-content (so the
   section is naturally as wide as its widest item, e.g. a nowrap link),
   while min-width acts as a true floor for short-content sections. CSS
   max() can't take intrinsic keywords like max-content, so the two
   intents have to live across the width and min-width properties. */

.mega-panel__section {
    width: max-content;
    min-width: 160px;
    max-width: 525px;
}

/* Link-list sections get extra room so two columns of long procedure
   names (360px cap each + 32px gap) stay on one line. Other section
   types (rich-content map embeds, post queries) keep the 525px cap. */

.mega-panel__section--links {
    max-width: 752px;
}

.mega-panel__section--no-heading {}

/* Grid with column-major auto-flow + 5 explicit rows: items 1-5 fill
   column 1, item 6 starts column 2, etc. Empty trailing rows have 0
   height so short lists don't visually inflate the section.
   row-gap is intentionally 0 (handled by margin-top on items below) so
   short lists don't accumulate gap between empty rows; column-gap is the
   only gutter the grid itself manages. */

.mega-panel__section__links {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-auto-columns: max-content;
    column-gap: 32px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mega-panel__section__link {
    white-space: normal;
    max-width: 360px; /* fits the longest procedure name on one line; wrap is a last resort */
}

/* Vertical spacing between items, except the first item in each column
   (positions 1, 6, 11, ...). Using margin instead of row-gap so that
   short lists don't carry trailing gaps between empty grid rows. */

.mega-panel__section__link:not(:nth-child(5n+1)) {
    margin-top: 10px;
}

.mega-panel__section__content {
    padding-top: 10px;
}

.mega-panel__section__content > p:first-child {
    margin-top: 0;
}

/* Footer */

.site-footer {
    background-color: var(--c-accent-1000);
    color: var(--c-white);
    padding: 72px 32px;
    padding-top: 125px;
    padding-bottom: 24px;
    margin-top: 80px;
    position: relative;
}

.site-footer__bg {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.site-footer__bg--grid {
    background-color: #00cc96;
    -webkit-mask: url('./bg-tji-CmRYCF5o.svg') 0% 0% / 300px 300px repeat;
            mask: url('./bg-tji-CmRYCF5o.svg') 0% 0% / 300px 300px repeat;
    opacity: 0.4;
}

.site-footer__bg--gradient {
    background: linear-gradient(270deg, rgba(0, 41, 30, 0.00) 0%, #00291E 8.51%, #00291E 43.35%, rgba(0, 41, 30, 0.00) 100%);
}

.site-footer__bg--highlight {
    opacity: 0.1;
    background: radial-gradient(50.04% 129.82% at 48.72% 9.77%, #00664B 0%, #00664B 64.48%, #00CC96 100%);
}

.site-footer__wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer__main {
    display: flex;
    gap: 60px;
    justify-content: space-between;
    padding-bottom: 48px;
}

.footer__sections {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 10px;
}

.footer__sections__top,
.footer__sections__bottom {
    display: flex;
    gap: 30px;
    justify-content: space-between;
}

.footer__locations {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    /* justify-content: space-between; */
}

.footer__location {
    min-width: 135px;
    max-width: 135px;
}

.footer__location > p {
    margin: 0;
    /* font-size: var(--text-body-sm); */
}

.footer__location__name {
    opacity: 1;
}

.footer__location__address,
.footer__location__city-state,
.footer__location__suite {
    opacity: 0.6;
}

.footer__section {
    min-width: 135px;
}

.footer__section:last-child {
    min-width: auto;
}

.footer__section__title {
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 450;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 16px;
    color: var(--c-accent-800);
}

.footer__brand {
    max-width: 416px;
    width: 100vw;
}

.footer__brand .item-list__item {
    /* font-size: var(--text-body-md); */
}

.footer__brand__logo {
    margin-top: 0;
    margin-bottom: 0;
}

.footer__statement {
    margin-top: 10px;
    margin-bottom: 0;
    opacity: 0.6;
}

.footer__brand .actions {
    margin-top: 24px;
}

.footer__brand .item-list {
    margin-top: 60px;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-menu a {
    color: var(--c-white);
    opacity: 0.6;
    font-weight: 400;
}

.footer-menu a:hover {
    color: var(--c-white);
    opacity: 1;
}

.site-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--c-accent-900);
    padding-top: 24px;
    z-index: 1;
}

.site-info__terms {
    display: flex;
    gap: 24px;
}

.site-info__copyright {
    opacity: 0.6;
}

.site-info a {
    color: var(--c-white);
    opacity: 1;
    text-decoration: none;
}

.site-info a:hover {
    opacity: 0.8;
    color: var(--c-white);
}

.site-info__social {
    display: flex;
    gap: 18px;
    align-items: center;
}

.site-info__social a {
    opacity: 0.4;
}

.mobile-nav-toggler {
    display: none;
    /* Reset native <button> chrome so the toggler renders as an icon-only
       control (it used to be an <a>). */
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    appearance: none;
}

@media screen and (min-width: 996px) {
    .site-header:hover::before {
        background-color: var(--c-white);
    }
}

@media screen and (max-width: 1300px) {
    .footer__sections__top {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .footer__sections__top .footer__section {
        width: 160px;
    }

    .site-header__wrap,
    .site-header__contact {
        padding: 0 20px;
    }
}

@media screen and (max-width: 1100px) {
    .main-navigation {
        position: fixed;
        background-color: var(--c-white);
        width: calc(100% - 32px);
        height: calc(100% - 32px);
        left: 16px;
        right: 16px;
        top: 16px;
        z-index: 2;
        padding-top: 32px;
        padding-bottom: 32px;
        border-radius: 16px;
        /* Hidden state: invisible + slightly translated downward. The
           open rule below removes the translation and brings opacity to
           1, producing a subtle fade-up reveal. pointer-events: none
           keeps the invisible panel from intercepting taps while it's
           visually absent. */
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        transition: opacity 200ms ease, transform 200ms ease;
        overflow: auto;
    }

    /* Mobile-menu backdrop. Real div in the markup (header.php, sibling
       of #page) rather than a pseudo-element — gives explicit control
       over the stacking order without fighting parent stacking contexts.
       Sits above page content but below .main-navigation (z-index: 2)
       so the menu floats over the dimmed surface. Always present at
       opacity 0; body.menu-open flips it to 1 over 200ms. Once the nav
       gets inset from the screen edges, the dimmer fills the gutters
       around it automatically. */
    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(26, 44, 39, 0.20);
        pointer-events: none;
        opacity: 0;
        transition: opacity 200ms ease;
        z-index: 1;
    }

    .site-header.menu-open .mobile-nav-backdrop {
        opacity: 1;
    }

    .main-navigation .menu {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 36px;
        padding: 0 20px;
        gap: 30px;
    }

    .site-title a {
        font-size: 1.6rem;
    }

    .main-navigation .menu li.menu-item {
        width: 100%;
        padding-right: 0;
    }

    .main-navigation .menu li.menu-item a {
        font-size: 1.4rem;
    }

    .site-branding--mobile {
        display: flex;
        margin: 0px 20px;
        justify-content: space-between;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--c-neutral-50);
    }

    .mobile-nav-toggler {
        display: flex;
        align-items: center;
    }

    .mobile-nav-toggler,
    .mobile-nav-toggler svg {
        width: 35px;
        height: 35px;
    }

    .menu-open .main-navigation {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .menu-item-has-children::after {
        top: 15px;
        right: 0;
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M26 12L16 22L6 12" stroke="%232C2C31" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    }

    .sub-menu {
        position: relative;
        box-shadow: inset 0px 0px 13px 0px rgba(0,0,0,0.1);
        width: 100%;
        left: 0px;
        margin-top: 24px;
        padding: 30px;
        gap: 24px;
        display: none;
    }

    .site-header__contact {
        padding: 6px 20px;
    }

    .site-header__wrap {
        justify-content: space-between;
        gap: initial;
        width: 100%;
    }

    .site-header__wrap .btn--primary {
        margin-left: auto;
        margin-right: 32px;
    }

    .menu-item-has-children.active .sub-menu {
        display: flex;
    }

    .mega-panel {
        box-shadow: none;
        background-color: var(--c-neutral-15);
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        transition: none;
        position: static;
        display: none;
        margin-top: 16px;
    }

    .menu-item-has-children.active .mega-panel {
        display: flex;
        gap: 24px;
    }

    .mega-panel__section {
        max-width: 100%;
    }

    .mega-panel__section__links {
        display: flex;
        flex-direction: column;
    }

    .mega-panel__section__link {
        margin-top: 10px;
    }
}

@media screen and (max-width: 996px) {
    .site-header {
        margin-bottom: 40px;
    }

    .footer__main {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .site-header__contact {
        justify-content: flex-start;
        padding: 18px 20px;
    }

    .site-header__contact__left {
        display: none;
    }

    .site-header__contact__right {
        font-size: var(--text-body-lg);
    }

    .site-header__wrap .btn--primary {
        margin-right: 16px;
    }

    .footer__brand {
        max-width: 100%;
    }

    .site-footer__wrap {
        padding: 0px;
    }

    .footer__sections {
        flex-wrap: wrap;
    }

    .footer__sections__top .footer__section {
        width: 135px;
    }

    .footer__main {
        flex-direction: column;
        gap: 64px;
    }

    .site-info {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 42px;
        padding-bottom: 12px;
        padding-left: 0;
        padding-right: 0;
        gap: 24px;
    }

    .site-info__terms {
        order: -1;
    }

    .site-info__copyright {
        margin: 0;
    }

    .site-info__social {
        order: -1;
    }

    .footer__brand__logo {
        font-size: var(--text-display-md);
    }
}

@media screen and (max-width: 450px) {
    .footer__sections {
        gap: 64px;
    }

    .footer__sections__top,
    .footer__locations {
        gap: 52px;
    }

    .site-header__contact {
        justify-content: flex-start;
    }
    
    .site-header__contact__right {
        font-size: var(--text-body-md);
        justify-content: flex-start;
    }

    .site-header__contact__right > a {
        /* white-space: nowrap; */
    }

    .menu-item.btn > a {
        max-width: 100%;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .site-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.pagination,
.pagination .nav-links {
    display: flex;
    gap: 8px;
    margin-top: 40px;
}

/* AJAX pagination is always rendered as the last child of `.archive__list`
   (which is itself flex-wrap: wrap). Without this, with only 2 posts in a
   3+ column row the pagination "squeezes" into the trailing empty cell.
   Forcing flex-basis: 100% kicks it onto its own row regardless of how
   many posts came before it. */

.pagination--ajax {
    flex-basis: 100%;
    width: 100%;
}

.pagination .page-numbers {
    /* background-color: var(--c-accent-50); */
    color: var(--c-neutral-800);
    min-width: 35px;
    padding: 0 8px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid var(--c-neutral-50);
}

.pagination .page-numbers.current {
    background-color: var(--c-neutral-800);
    color: var(--c-white);
    border-color: var(--c-neutral-800);
}

.pagination .page-numbers.next,
.pagination .page-numbers.prev {
    background-color: var(--c-white);
    color: var(--c-neutral-800);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.next:hover,
.pagination .page-numbers.prev:hover {
    background-color: var(--c-neutral-15);
    color: var(--c-neutral);
}

/*
 * Section header component.
 *
 * Shared markup emitted by the `section_header()` / `acf_section_header()`
 * helpers (see `inc/helpers.php`). Used by the standalone `section-header`
 * block and inlined inside any content block that wants the same header
 * treatment. No outer-wrapper rules live here — that's the caller's job.
 */

.section-header__wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 60px;
}

.section-header__wrap.show-separator {
    padding-bottom: 36px;
    border-bottom: 1px solid var(--c-neutral-100);
}

.theme--dark .section-header__wrap.show-separator {
    border-bottom: 1px solid var(--c-accent-900);
}

/* Vertical orientation: header stacked above body/actions. */

.section-header__wrap.text-orientation--vertical .section-header__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section-header__wrap.text-orientation--vertical.alignment--center,
.section-header__wrap.text-orientation--vertical.alignment--center .section-header__content {
    align-items: center;
    text-align: center;
}

/* Horizontal orientation: header on the left, body + actions on the right. */

.section-header__wrap.text-orientation--horizontal .section-header__content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}

.section-header__wrap.text-orientation--horizontal .section-header__body {
    flex: 1;
}

.theme--dark .section-header__body {
    opacity: 0.8;
}

.section-header__header {
    margin: 0 !important;
    font-weight: 400 !important;
    max-width: 500px;
}

/* No body copy below the heading → let it run wider since there's no
   adjacent paragraph that needs a measure-friendly column. Modifier
   class is set in section_header() (inc/helpers.php) when the body arg
   is empty. */

.section-header__wrap--no-body .section-header__header {
    max-width: 750px;
}

.section-header__wrap.text-orientation--vertical.alignment--center .section-header__header {
    max-width: 750px;
}

.section-header__body {
    max-width: 550px;
}

.section-header__body p {
    margin: 0;
}

.section-header__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

@media screen and (max-width: 996px) {
    .section-header__wrap.text-orientation--horizontal .section-header__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}

@media screen and (max-width: 450px) {
    .section-header__content .section-header__actions,
    .section-header__content .section-header__actions > a {
        width: 100%;
        justify-content: center;
    }
}

aside.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 300px;
}

.sidebar .wp-block-heading {
    font-size: 1.55rem;
    line-height: 1.3;
}

/* WP Latest Posts */

.wp-block-latest-posts__list li {
    margin-bottom: 5px;
}

/* WP Search */

.wp-block-search .wp-block-search__label {
    display: none;
}

.wp-block-search__inside-wrapper {
    gap: 6px;
}

.wp-block-search__button {
    margin-left: 0;
}

@media screen and (max-width: 850px) {
    aside.sidebar {
        max-width: 100%;
    }
}

/* Template: Contact Details
 *
 * Structured contact card used by the mega-panel `contact-details`
 * template (and reusable elsewhere — footer, location single, etc.).
 * Markup: optional map iframe wrapper + dl with row groups for
 * address / phone / email / hours.
 *
 * Prefix `template-` distinguishes this from generic components — all
 * mega-panel template partials follow the same naming convention.
 */

.mega-panel__section--template-contact-details {
    display: flex;
    align-items: center;
}

.template-contact-details {
    display: flex;
    gap: 24px;
}

/* Map wrapper. Border-radius + overflow:hidden clip the iframe to the
   rounded corners (iframes don't honor parent border-radius natively).
   The iframe's height attr is 240 by default; CSS doesn't override so
   the editor-rendered height stays predictable. */

.template-contact-details__map {
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--c-neutral-50);
}

.template-contact-details__map iframe {
    display: block;
    width: 100%;
}

.template-contact-details__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.template-contact-details__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-contact-details__row--hours {
    margin-bottom: 24px;
}

.template-contact-details__row p {
    margin: 0;
}

/* dt / dd defaults add margin and italic emphasis in some browsers —
   reset both. Typography (font-size, weight, color) comes from the
   `label` and `body-sm` utility classes already applied in the markup. */

.template-contact-details__label,
.template-contact-details__value {
    margin: 0;
    font-style: normal;
}

.template-contact-details__value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.template-contact-details__value p + p {
    margin-top: 4px;
}

.template-contact-details__value a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media screen and (max-width: 1110px) {
    .template-contact-details {
        margin-top: 16px;
    }

    .template-contact-details__row p {
        font-size: 1.4rem;
    }

    .template-contact-details__value__svg {
        width: 32px;
        height: 32px;
    }

    iframe.template-contact-details__map__iframe {
        width: 300px;
        height: 300px;
    }
}

@media screen and (max-width: 768px) {
    .template-contact-details {
        flex-direction: column;
    }

    iframe.template-contact-details__map__iframe {
        width: 100%;
        height: 250px;
    }
}

/* Post types */

body.page-template-default .site-main,
body.page-template-page-no-sidebar .site-main,
body.blog .site-main,
body.search .site-main {
    /* margin-top: 40px; */
    margin-bottom: 150px;
}

body.page-template-default .site-main__wrap {
    margin-top: 120px;
}

body.page .entry-header {
    margin-bottom: 80px;
}

body.page .entry-header.align--center {
    text-align: center;
}

body.page .entry-content.align--center {
    margin: 0 auto;
}

/* Page Template: Default */

.page-template-default .site-main__wrap {
    display: flex;
    gap: 40px;
}

.page-template-default .entry-content {
    width: 100%;
}

@media screen and (max-width: 850px) {
    .page-template-default .site-main__wrap {
        flex-direction: column;
    }

    .page-template-default .entry-content {
        margin-bottom: 24px;
    }
}

/* Page Template: Default (No Sidebar) */

/* Archive */

body.blog .page-title {
    margin-bottom: 50px;
}

/* Excerpt */

.post-excerpt {
    max-width: calc((100%/3) - 20px);
    border-bottom: 1px solid var(--c-neutral-50);
    padding-bottom: 20px;
    width: 100%;
}

.post-excerpt--location {
    padding-bottom: 0;
    border-bottom: 0px;
}

.post-excerpt__link {
    text-decoration: none;
    color: var(--c-neutral-800);
}

.post-excerpt__header > a {
    color: var(--c-neutral-800);
    text-decoration: none;
}

.post-excerpt__header > a:hover {
    color: var(--c-neutral-600);
}

.post-excerpt__header > a:hover .post-excerpt__thumbnail {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.post-excerpt__categories {
    margin-top: 16px;
}

.post-excerpt__category {
    color: var(--c-accent-800);
    opacity: 1;
}

.post-excerpt__title {
    margin-top: 16px;
}

.post-excerpt--condition .post-excerpt__title,
.post-excerpt--procedure .post-excerpt__title {
    margin-bottom: 12px;
}

.post-excerpt--location .post-excerpt__title {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-neutral-50);
}

.post-excerpt__thumbnail {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    background-color: var(--c-accent-800);
    box-shadow: none;
    transition: transform 300ms ease, box-shadow 300ms ease;
    will-change: transform, box-shadow;
}

.post-excerpt--location .post-excerpt__thumbnail {
    height: 350px;
}

.post-excerpt--location .post-excerpt__thumbnail {
    background-color: transparent;
}

.post-excerpt__thumbnail[data-bg-loaded]::before {
    opacity: 0.8;
}

.post-excerpt--location .post-excerpt__thumbnail[data-bg-loaded]::before {
    opacity: 1;
}

/* Brand-green tint on top of the location's thumbnail image. ::after
   sits above the ::before (which holds the lazy-loaded background
   image), so the overlay paints over the photo. Same token used by
   the page-header light-overlay variant. */

.post-excerpt--location .post-excerpt__thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    /* background-color: var(--c-accent-800-alpha-20); */
    pointer-events: none;
    border-radius: inherit;
}

.post-excerpt__thumbnail:hover a {
    opacity: 0.8;
}

.post-excerpt__excerpt {
    opacity: 0.8;
}

.post-excerpt__link {
    margin-top: 10px;
}

.post-excerpt__date {
    margin-top: auto;
}

.post-excerpt__address p {
    font-size: var(--text-body-lg);
    height: 86px;
}

.post-excerpt__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.post-excerpt__actions .btn {
    width: 100%;
    justify-content: center;
}

/* Featured variant */

.post-excerpt--featured {
    max-width: 100%;
    border-bottom: 0;
    padding-bottom: 0;
}

.post-excerpt--featured > a {
    display: flex;
    gap: 32px;
    max-width: 100%;
}

.post-excerpt--featured > a:hover {
    color: var(--c-neutral-800);
}

.post-excerpt--featured .post-excerpt__body {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-neutral-25);
}

.post-excerpt--featured > a:hover .post-excerpt__title {
    color: var(--c-neutral-600);
}

.post-excerpt--featured .post-excerpt__title {
    margin-bottom: 12px;
}

.post-excerpt--featured .post-excerpt__categories {
    margin-top: 0;
}

.post-excerpt--featured .post-excerpt__thumbnail {
    width: 550px;
    aspect-ratio: 550 / 360;
    overflow: hidden;
    height: auto;
}

.post-excerpt--featured .post-excerpt__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-excerpt--featured > a:hover .post-excerpt__thumbnail {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.post-excerpt__date {
    /* margin-top: auto; */
}

/* Single post — new structure driven by single.php.
   Named `.post-article` instead of `.single-post` because WordPress's
   body_class() adds `single-post` to <body> on single-post pages, so any
   `.single-post` rule here would also match the body. Legacy `.post__*`
   styles below are kept for content-post.php, which is no longer called
   from single.php but may be used elsewhere. */

.post-article {
    padding-top: 80px;
    padding-bottom: 80px;
}

.post-article__content {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.post-article__content__wrap {
    max-width: 700px;
}

/* Single (legacy — used by template-parts/content-post.php) */

.post__thumbnail {
    height: 450px;
    margin-top: 80px;
}

.post__metadata {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--c-neutral-50);
    margin-top: 24px;
    margin-bottom: 40px;
    padding-bottom: 24px;
}

.post__metadata .post__metadata__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post__metadata__item .img-wrap {
    width: auto;
}

.post__metadata__item .avatar {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

/* Links inside blog-post body content get underlines, unlike the global
   no-underline default. Scoped to body.single-post so pages and other
   CPTs that share .normalize-content are unaffected. */

body.single-post .normalize-content a:not(.btn) {
    text-decoration: underline;
}

/* Generic post content styles */

.normalize-content {
    font-size: var(--text-body-lg);
}

.normalize-content > * {
    max-width: 700px;
}

.normalize-content > *:first-child {
    margin-top: 0;
}

.normalize-content > .alignwide {
    max-width: var(--container-width--md);
}

.normalize-content > .alignfull {
    max-width: none;
}

/* Paragraphs — slightly more generous line-height than the base for
   sustained reading, with consistent vertical rhythm between blocks. */

.normalize-content p {
    margin-bottom: 1.5em;
    line-height: 1.7;
}

/* The WP editor's Bold button outputs <strong>/<b>. The default 700
   weight is too heavy for Jost at body sizes — use 500 (medium) for a
   subtler emphasis that still reads as "bolder than surrounding text." */

.normalize-content strong,
.normalize-content b {
    font-weight: 500;
}

/* Headings in prose get margin-top for section separation. This is the
   one context where margin-top on headings is appropriate — in flowing
   content there's no layout wrapper to put the spacing on. */

.normalize-content h1,
.normalize-content h2,
.normalize-content h3,
.normalize-content h4,
.normalize-content h5,
.normalize-content h6 {
    margin-top: 2em;
    font-weight: 500;
}

/* When a heading directly follows an image or figure, the image's bottom
   margin already provides the spacing. Strip the heading's top margin to
   avoid a double gap. */

.normalize-content img + h1,
.normalize-content img + h2,
.normalize-content img + h3,
.normalize-content img + h4,
.normalize-content img + h5,
.normalize-content img + h6,
.normalize-content figure + h1,
.normalize-content figure + h2,
.normalize-content figure + h3,
.normalize-content figure + h4,
.normalize-content figure + h5,
.normalize-content figure + h6 {
    margin-top: 0;
}

/* Lists */

.normalize-content ul,
.normalize-content ol {
    margin-top: 1em;
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.normalize-content li {
    margin-bottom: 0.35em;
}

/* Blockquotes */

.normalize-content blockquote {
    border-left: 6px solid var(--c-neutral-25);
    padding-left: 20px;
    margin-left: 0;
    margin-bottom: 1.5em;
}

/* Images */

.normalize-content img {
    border-radius: 6px;
    margin: 2em 0;
}

/* Horizontal rules */

.normalize-content hr {
    margin: 2em 0;
    border: none;
    border-top: 1px solid var(--c-neutral-50);
}

/* Code */

.normalize-content pre {
    margin-bottom: 1.5em;
    padding: 1em;
    background: var(--c-neutral-25);
    border-radius: 6px;
    overflow-x: auto;
}

.normalize-content code {
    font-size: 0.875em;
}

/* Figures */

.normalize-content figure {
    margin: 2em 0;
}

.normalize-content figure img {
    margin: 0.5rem 0;
}

.normalize-content figcaption {
    font-size: var(--text-body-md);
    color: var(--c-neutral-400);
    margin-top: 0.5em;
}

@media screen and (max-width: 996px) {
    /* Linear scale: width = 550px @ 996vw → 322px @ 768vw, capped at the
       550 max above and the 320 min below. Below 768px the stack rule
       overrides this with width: 100%. */
    .post-excerpt--featured .post-excerpt__thumbnail {
        width: clamp(320px, calc(100vw - 446px), 550px);
        max-width: 100%;
    }

    .post-excerpt__title {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 768px) {
    .post-excerpt--featured > a {
        flex-direction: column;
    }

    .post-excerpt--featured .post-excerpt__thumbnail {
        width: 100%;
    }

    .post-excerpt__date {
        margin-top: 24px;
    }
}

@media screen and (max-width: 550px) {
    .post__thumbnail {
        height: 350px;
    }
}

@media screen and (max-width: 450px) {}

@media screen and (max-width: 350px) {
    .post__metadata {
        flex-direction: column;
        gap: 12px;
    }
}

.archive[data-post-type="team-member"] {
    margin-top: 100px;
}

.archive[data-post-type="team-member"] .archive__list {
    /* gap: 30px; */
}

/* Default excerpt — fallback when no layout variant is requested. */

.team-member-excerpt {
    display: flex;
    gap: 12px;
    flex: 0 1 calc((100% / 3) - 20px);
}

.team-member-excerpt__photo {
    width: 100%;
    border-radius: 12px;
    background-color: var(--c-neutral-50);
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: visible;
    max-width: 325px;
}

.team-member-excerpt__photo .img-wrap {
    /* Explicit height ensures the wrap fills the photo container's
       aspect-ratio-derived height. Without this, the wrap's own inline
       aspect-ratio (set by acf_image) defines its size — fine when the
       image's natural ratio matches, but on shorter / different-ratio
       photos the wrap collapses and flex-end has nothing to align
       against, leaving the image floating mid-container. Pinning the
       wrap to 100% height guarantees a stable bottom edge for the
       image to anchor to. */
    height: 100%;
    align-items: flex-end;
}

.team-member-excerpt__photo img {
    transform: scale(1.1) translateX(-10px);
    transform-origin: 50% 100%;
}

.team-member-excerpt__name,
.team-member-excerpt__role,
.team-member-excerpt__credentials {
    margin: 0;
}

.team-member-excerpt__role {
    opacity: 0.6;
    margin-bottom: 20px;
}

/* Clinical variant — larger card, richer body, clickable photo + name. */

.team-member-excerpt--clinical {
    flex: 0 1 100%;
    gap: 60px;
}

.team-member-excerpt--clinical .team-member-excerpt__link {
    display: block;
}

.team-member-excerpt--clinical .team-member-excerpt__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 550px;
    padding-top: 12px;
}

.team-member-excerpt--clinical .team-member-excerpt__name a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}

.team-member-excerpt--clinical .team-member-excerpt__name a:hover {
    color: var(--c-accent-800);
}

.team-member-excerpt--clinical .team-member-excerpt__bio {
    margin-top: 4px;
}

/* Support variant — compact, denser grid; circular photo. */

.team-member-excerpt--support {
    max-width: 325px;
}

.team-member-excerpt--support .team-member-excerpt__photo {
    position: relative;
}

.team-member-excerpt--support .team-member-excerpt__meta {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: calc( 100% - 12px );
    background-color: var(--c-white);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-member-excerpt--support .team-member-excerpt__role {
    margin-bottom: 0;
}

@media screen and (max-width: 996px) {
    .team-member-excerpt--clinical {
        margin-bottom: 42px;
    }

    .team-member-excerpt--clinical .team-member-excerpt__photo .img-wrap {
        height: 100%;
    }

    .team-member-excerpt--support {
        max-width: 100%;
        flex: 0 1 calc((100% / 2) - 8px);
    }

    .team-member-excerpt--support .team-member-excerpt__photo {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .team-member-excerpt--clinical {
        flex-basis: 100%;
    }

    .team-member-excerpt--clinical {
        flex-direction: column;
        gap: 24px;
    }

    .team-member-excerpt__photo,
    .team-member-excerpt__photo .img-wrap {
        aspect-ratio: auto !important;
    }

    .team-member-excerpt--clinical .team-member-excerpt__photo {
        /* max-width: 250px; */
        max-width: 100%;
    }

    .team-member-excerpt--clinical .team-member-excerpt__photo img {
        max-width: 325px;
    }

    .team-member-excerpt--clinical .team-member-excerpt__role {
        margin-bottom: 0;
    }

    .team-member-excerpt__name {
        font-size: var(--text-heading-lg);
    }

    .team-member-excerpt--support .team-member-excerpt__photo img {
        max-width: 400px;
    }
}

@media screen and (max-width: 600px) {
    .team-member-excerpt--support {
        flex-basis: 100%;
    }

    .team-member-excerpt--support .team-member-excerpt__photo img {
        max-width: 325px;
    }
}

/* Blocks */

.basic-cta {
    position: relative;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 80px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
    width: 100%;
    margin: 0 auto;
    background-color: var(--c-neutral-50);
}

.basic-cta.theme--dark {
    background-color: var(--c-accent-1000);
}

.basic-cta.theme--light {
    background-color: var(--c-neutral-50);
}

.basic-cta__text {
    max-width: 650px;
    margin: 0 auto;
}

.basic-cta__header {
    margin-top: 0;
}

.basic-cta__body {
    margin: 0 auto;
    opacity: 0.9;
}

.basic-cta .item-list {
    margin-top: 48px;
}

.basic-cta .actions {
    justify-content: center;
    margin-top: 40px;
}

.basic-cta__pattern {
    opacity: 0.4;
    background-color: #00cc96;
    -webkit-mask: url('./bg-tji-CmRYCF5o.svg') 0% 0% / 300px 300px repeat;
            mask: url('./bg-tji-CmRYCF5o.svg') 0% 0% / 300px 300px repeat;
}

.basic-cta__gradient {
    opacity: 0.8;
    background: linear-gradient(270deg, rgba(0, 41, 30, 0.00) 0%, #00291E 8.51%, #00291E 43.35%, rgba(0, 41, 30, 0.00) 100%);
}

/* Text & Image variant: two-column row, text on the left, image on the right.
   The image column stretches to the section's full height, so the section's
   vertical padding is moved onto the text column — the image sits flush with
   the top and bottom edges instead. */

.basic-cta--type-text-and-image {
    padding-top: 0;
    padding-bottom: 0;
}

.basic-cta--type-text-and-image .basic-cta__wrap {
    display: flex;
    align-items: stretch;
    gap: 60px;
}

.basic-cta--type-text-and-image .basic-cta__text {
    flex: 1;
    max-width: none;
    margin: 0;
    padding-block: 80px;
}

.basic-cta--type-text-and-image .actions {
    justify-content: flex-start;
}

.basic-cta--type-text-and-image .basic-cta__image {
    /* flex: 0 0 515px;
    max-width: 515px; */
}

.basic-cta--type-text-and-image .basic-cta__image {                                                      
    flex: 0 0 clamp(280px, 40vw, 515px);
    min-width: 0;
    max-width: 100%;                                                                                     
}

/* Override the inline aspect-ratio on .img-wrap: when both width and height
   are explicit, aspect-ratio is ignored, so the wrap fills its column. */

.basic-cta--type-text-and-image .basic-cta__image .img-wrap {
    width: 100%;
    height: 100%;
    background-color: var(--c-accent-900);
}

.basic-cta--type-text-and-image .basic-cta__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.basic-cta--type-text-and-image .basic-cta__image img.loaded {
    opacity: 0.8;
}

/* Optional dark overlay (toggled via ACF show_image_overlay). The
   ::after sits above the <img> at 20% opacity to subtly mute the
   image — useful when the natural contrast leaves text or accent
   colors hard to read against it. pointer-events: none keeps the
   overlay interaction-neutral. border-radius: inherit so the overlay
   clips to whatever rounded shape the wrap has. */

.basic-cta__image--has-overlay {
    position: relative;
}

.basic-cta__image--has-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--c-accent-1000-alpha-20);
    pointer-events: none;
    border-radius: inherit;
}

@media screen and (max-width: 996px) {
    .basic-cta--type-text-and-image {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .basic-cta--type-text-and-image .basic-cta__wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .basic-cta--type-text-and-image .basic-cta__text {
        padding-block: 0;
    }

    .basic-cta--type-text-and-image .basic-cta__image {
        flex-basis: auto;
        max-width: 100%;
        aspect-ratio: 4 / 4;
        border-radius: 16px;
        overflow: hidden;
    }
}

@media screen and (max-width: 768px) {}

.carousel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: var(--pt, 150px);
    padding-bottom: var(--pb, 150px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
    position: relative;
}

.carousel__wrap {
    z-index: 0;
}

.carousel__images {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.carousel__image {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

.carousel__image,
.carousel__image::before {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

.carousel__image {
    opacity: 0;
}

.carousel__image.active {
    opacity: 1;
}

/* When image is loaded, fade in the pseudo-element */

/* .carousel__image[data-bg-loaded="true"]::before {
    opacity: 1;
} */

/* Only apply transition when removing */

.carousel__image.removing {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}

.carousel__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100vw;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 999;
}

.carousel__progress__tracker {
    height: 100%;
    width: 0;
    background-color: var(--c-accent-800);
}

.carousel__progress__tracker.animating {
    animation: carousel-progress 6000ms linear;
    animation-fill-mode: forwards;
}

.carousel__status__item.active {
    background-color: var(--c-accent-800);
    opacity: 1;
}

.carousel__text {
    max-width: 550px;
    color: var(--c-white);
    position: relative;
}

.carousel__eyebrow,
.carousel__header {
    margin-top: 0;
}

.carousel__body {
    opacity: 0.9;
}

.carousel .actions {
    margin-top: 40px;
}

.carousel__image img {
    max-width: 350px;
    border-radius: 6px;
    height: 467px;
}

@keyframes carousel-progress {
    0% {
        width: 0px;
    }

    /* 80% {
        width: 100%;
    } */

    100% {
        width: 100%;
    }
}

.contact-form {
    position: relative;
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.contact-form__columns {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.contact-form__form {
    background-color: var(--c-neutral-15);
    border-radius: 16px;
    padding: 42px;
    max-width: 650px;
    width: 100%;
}

.contact-form__form,
.contact-form__details {
    min-width: 0;
}

.contact-form__details-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 24px 0 0;
}

.contact-form__detail {
    display: flex;
    gap: 12px;
    align-items: center;
}

.contact-form__detail__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.contact-form__detail__text {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-form__detail__text p:first-child {
    margin-top: 0;
}

.contact-form__detail__text p:last-child {
    margin-bottom: 0;
}

.contact-form__details__header p {
    opacity: 0.8;
}

.contact-form__map {
    margin-top: 32px;
    border-radius: 16px;
    overflow: hidden;
}

.contact-form__map iframe {
    display: block;
    border: 0;
    width: 100%;
}

.contact-form__aside {
    margin-top: 12px;
    opacity: 0.8;
}

@media screen and (max-width: 700px) {
    .contact-form__columns {
        flex-direction: column;
        gap: 40px;
    }
}

.cta-group {
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 0);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 80px);
}

.cta-group--bg .cta::before {
    z-index: 0;
}

.cta-group--bg .cta[data-bg-loaded="true"]::before {
    opacity: 0.2;
}

.cta__blur {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(2px);
}

.cta__text-content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cta-group__list {
    display: flex;
    gap: 16px;
}

.cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
}

/* This is the alternate type where the image is used as a background instead */

.cta-group--bg .cta {
    height: 425px;
    background: var(--c-accent-1000);
    padding: 24px;
    justify-content: flex-end;
    position: relative;
}

.cta__header {
    margin-top: 5px;
    margin-bottom: 0;
}

.cta__body {
    margin: 0;
    opacity: 0.8;
}

.cta__image {
    max-width: 100%;
    border-radius: 10px;
}

.cta__link {
    margin-top: 24px;
}

@media screen and (max-width: 996px) {
    .cta-group__list {
        flex-wrap: wrap;
    }
    
    .cta {
        max-width: calc(50% - 8px);
    }
}

@media screen and (max-width: 768px) {
    .cta-group__list {
        flex-wrap: wrap;
    }

    .cta-group__list .cta {
        max-width: calc(50% - 16px);
    }
}

@media screen and (max-width: 600px) {
    .cta-group__list {
        gap: 24px;
    }
    
    .cta-group__list .cta {
        max-width: 100%;
    }

    .cta-group__list .cta span {
        max-width: 80%;
        height: auto;
    }
}

@media screen and (max-width: 400px) {
    .cta__link {
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }
}

.faq {
    padding-top: var(--pt, 100px);
    padding-bottom: var(--pb, 100px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.faq__layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}

.faq__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.faq__item {
    border-bottom: 1px solid var(--c-neutral-50);
    padding-bottom: 12px;
}

.faq__question {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
}

/* Interactive chevron — only applies inside a <summary> (disclosure variant).
   The static variant renders an <h3> with the same class, but no chevron and
   no pointer cursor, since there's nothing to toggle. */

summary.faq__question {
    cursor: pointer;
    list-style: none;
}

summary.faq__question::-webkit-details-marker {
    display: none;
}

summary.faq__question::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms ease;
}

.faq__item[open] summary.faq__question::after {
    transform: rotate(-135deg);
}

.faq__answer {
    padding: 0 0 12px;
    max-width: 700px;
}

.faq__answer a {
    text-decoration: underline;
}

.faq__answer > p:last-child {
    margin-bottom: 0;
}

/* Image-and-text variant: two-column row on wider screens. The image column
   stretches to match the FAQ list's height — the row's tallest child. */

.faq--type-image-and-text .faq__layout {
    flex-direction: row;
    align-items: stretch;
    gap: 60px;
}

.faq--type-image-and-text .faq__image {
    flex: 0 0 40%;
    max-width: 450px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--c-accent-1000);
}

/* Override the helper's inline aspect-ratio: when width + height are both
   explicit, aspect-ratio is ignored, so the wrap fills the column. */

.faq--type-image-and-text .faq__image .img-wrap {
    width: 100%;
    height: 100%;
}

.faq--type-image-and-text .faq__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.faq--type-image-and-text .faq__image img.loaded {
    opacity: 0.6;
}

/* Text-with-header variant: same column slot as the image, but an <h3> instead.
   Aligned to the top of the row rather than stretched — it's a heading, not a
   cropped visual element. */

.faq--type-text-with-header .faq__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
}

.faq--type-text-with-header .faq__side-header {
    flex: 0 0 40%;
    max-width: 450px;
}

.faq--type-text-with-header .faq__side-header__text {
    margin: 0;
}

@media screen and (max-width: 996px) {
    .faq--type-image-and-text .faq__layout {
        flex-direction: column;
    }

    .faq--type-image-and-text .faq__image {
        flex-basis: auto;
        max-width: 60%;
        aspect-ratio: 4 / 5;
    }
}

@media screen and (max-width: 768px) {
    .faq--type-text-with-header .faq__side-header {
        max-width: 100%;
    }
}

@media screen and (max-width: 450px) {
    .faq--type-image-and-text .faq__image {
        max-width: 100%;
    }
}

.faq-archive {
    padding-top: var(--pt, 20px);
    padding-bottom: var(--pb, 100px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.faq-archive__search {
    margin-top: 32px;
    margin-bottom: 60px;
    position: relative;
}

.faq-archive__search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

input.faq-archive__search-input {
    width: 100%;
    /* max-width: 600px; */
    padding: 20px 18px;
    padding-left: 72px;
    border: 1px solid var(--c-neutral-50);
    border-radius: 8px;
    background: var(--c-white);
    color: var(--c-neutral-900);
}

.faq-archive__search-input:focus {
    outline: none;
    border-color: var(--c-accent-800);
}

.faq-archive__sections {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Side-by-side row layout — mirrors the FAQ block's `text-with-header`
   variant (see .faq--type-text-with-header in inc/blocks/faq/style.css).
   Section name on the left, FAQ list on the right. Items reuse the FAQ
   block's `.faq__items` + `.faq__item` styling for the divider treatment. */

.faq-archive__section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
}

.faq-archive__section__header {
    flex: 0 0 40%;
    max-width: 450px;
}

.faq-archive__section__name {
    margin: 0;
}

.faq-archive__list {
    flex: 1;
    min-width: 0;
}

@media screen and (max-width: 700px) {
    .faq-archive__section {
        flex-direction: column;
        gap: 24px;
    }

    .faq-archive__section__header {
        flex-basis: auto;
        max-width: 100%;
    }
}

/* Search-active state — when filtering, hide section headers and collapse
   the row layout so matching items flow as one continuous list. Items
   stay in their parent .faq-archive__section divs (DOM-stable), the
   visuals just flatten. */

.faq-archive.is-searching .faq-archive__sections {
    gap: 0;
}

.faq-archive.is-searching .faq-archive__section {
    flex-direction: column;
    gap: 0;
}

.faq-archive.is-searching .faq-archive__section__header {
    display: none;
}

.faq-archive__item.is-hidden {
    display: none;
}

/* Empty-state copy — toggled via the `hidden` attribute by faq-search.js
   when no items match. */

.faq-archive__empty {
    margin-top: 40px;
    color: var(--c-neutral-400);
    text-align: center;
}

/* Footer CTA — "Got a question not listed here?" panel. Stays visible
   regardless of search state so the contact path is always available,
   especially when search returns nothing. */

.faq-archive__cta {
    margin-top: 100px;
    padding: 64px 0;
    padding-right: 64px;
    /* background-color: var(--c-neutral-15); */
    position: relative;
    z-index: 1;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-direction: column; */
    gap: 16px;
}

.faq-archive__cta .bg-panel {
    z-index: -1;
}

.faq-archive__cta__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 450px;
}

.faq-archive__cta__header {
    margin: 0;
}

.faq-archive__cta__body {
    margin: 0;
}

.faq-archive__cta .item-list {
    margin-top: 8px;
}

@media screen and (max-width: 700px) {
    .faq-archive__cta {
        padding: 32px 24px;
    }
}

.feature-list {
    position: relative;
    padding-top: var(--pt, 30px);
    padding-bottom: var(--pb, 30px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.feature-list__header {
    margin-top: 0;
}

.feature-list__text {
    max-width: 550px;
    margin: 0 auto;
    margin-bottom: 60px;
}

.feature-list__list {
    display: flex;
    gap: 24px;
    row-gap: 64px;
    flex-wrap: wrap;
    width: 100%;
}

.feature-list__feature {
    max-width: calc((100% / 3) - 16px);
    width: 100%;
}

.feature-list__feature__header {
    margin-top: 20px;
    margin-bottom: 15px;
}

.feature-list__feature__body {
    opacity: 0.8;
}

.feature-list__feature__image__wrap {
    background-color: var(--c-accent-800);
    border-radius: 10px;
    display: inline-flex;
    /* padding: 15px; */
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1;
}

img.feature-list__feature__image {
    fill: var(--c-accent-800);
    opacity: 0.8;
    height: 100%;
    object-fit: cover;
}

.feature-list__feature__link {
    /* display: inline-block; */
    margin-top: 10px;
}

@media screen and (max-width: 700px) {
    .feature-list__feature {
        max-width: calc((100% / 2) - 12px);
    }
}

@media screen and (max-width: 500px) {
    .feature-list__feature {
        max-width: 100%;
    }
}

.featured-brands {
    padding-top: var(--pt, 10px);
    padding-bottom: var(--pb, 0);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 100px);
}

.featured-brands__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    color: var(--c-neutral-50);
    margin-bottom: 40px;
    margin-top: 0px;
    letter-spacing: 2px;
}

.featured-brands__header::before,
.featured-brands__header::after {
    content: '';
    flex: 1;
    display: block;
    height: 1px;
    background-color: var(--c-neutral-25);
}

.featured-brands__list {
    display: flex;
    justify-content: center;
    gap: 50px;
    height: 54px;
}

.brand__image {
    max-width: 100px;
    height: 40px;
}

@media screen and (max-width: 700px) {
    .featured-brands__list {
        flex-wrap: wrap;
        height: auto;
    }

    .featured-brands__list > span {
        max-width: 100px;
    }
}

@media screen and (max-width: 400px) {}

.local-reviews {
    padding-top: var(--pt, 100px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
    overflow: hidden;
    background: radial-gradient(245.88% 86.33% at 50% -25.75%, rgba(0, 204, 150, 0.40) 0%, rgba(0, 204, 150, 0.00) 68.41%);
}

.local-reviews__marquee {
    margin-top: 60px;
    overflow: hidden;
    padding: 20px;
    /* Cap the marquee at the viewport width and break intrinsic min-content
       propagation. Without these the track's `width: max-content` leaks up
       the tree, the document picks up a horizontal scroll, and any
       `alignwide` block on the page (stepper, etc.) stretches to fill the
       inflated scroll area. `overflow: hidden` clips the visible overflow
       but doesn't stop the size cascade — only an explicit cap does. */
    max-width: 100%;
    min-width: 0;
    /* Soft fade at each edge so cards appear to enter/leave through a gradient
       rather than cutting off sharply. */
    mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}

.local-reviews__track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: local-reviews-scroll 100s linear infinite;
}

/* Pause on hover so a user can read a card they're interested in. Pause on
   focus-within covers keyboard users tabbing into any interactive element
   inside a card (future-proofs if cards become linked). */

.local-reviews__track:hover,
.local-reviews__track:focus-within {
    animation-play-state: paused;
}

.local-reviews__social-proof {
    justify-content: center;
    /* margin-bottom: 24px !important; */
}

@keyframes local-reviews-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Respect the user's motion preference — disable the animation entirely so
   cards sit still. The overflow cap means only the first few are visible,
   but that's the right default for users who asked for reduced motion. */

@media (prefers-reduced-motion: reduce) {
    .local-reviews__track {
        /* animation: none; */
    }
}

.local-reviews__card {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.local-reviews__text {
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.local-reviews__card__photo {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--c-neutral-100);
}

.local-reviews__card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Soft dark-green wash anchored to the bottom of photo cards. Improves
   legibility of the source chip (white text + icon) against bright or
   busy regions of the underlying image without darkening the subject's
   face at the top of the frame. Skipped on the initials variant — that
   sits on a solid background already, no scrim needed. The chip is
   z-indexed above so the gradient never paints over the text. */

.local-reviews__card__photo:not(.local-reviews__card__photo--initials)::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 51, 38, 0.55) 100%);
    pointer-events: none;
}

/* Initials fallback when a review has no photo. Muted neutral background
   with the patient's initials centered — readable trust signal without
   borrowing a stock face. */

.local-reviews__card__photo--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-accent-50);
    color: var(--c-accent-800);
}

.local-reviews__card__initials {
    line-height: 1;
    margin-bottom: 0;
}

/* Source attribution chip — lower-left of the photo, points back to the
   real review (Google, Healthgrades, etc.). Color flips based on what
   sits underneath: white over a photo (high contrast against arbitrary
   imagery), brand-800 over the muted brand-tinted initials background. */

.local-reviews__card__source {
    position: absolute;
    left: 16px;
    bottom: 16px;
    color: var(--c-white);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /* Subtle drop shadow so white text + icon stay legible against
       arbitrarily-bright regions of the underlying photo. text-shadow
       only paints the glyphs; filter: drop-shadow on the icon follows
       its stroke alpha so the shadow tracks the icon's silhouette. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: opacity 200ms ease;
    /* Sit above the bottom-of-photo gradient (::after pseudo on the
       photo wrapper). Without this the gradient would paint on top of
       the chip because pseudo-elements come after content in source. */
    z-index: 1;
}

.local-reviews__card__source__icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Initials variant sits on the solid accent-50 background — no
   underlying photo to compete with, so the shadow only adds noise. */

.local-reviews__card--initials .local-reviews__card__source {
    color: var(--c-brand-200);
    text-shadow: none;
}

.local-reviews__card--initials .local-reviews__card__source__icon {
    filter: none;
}

.local-reviews__card__source__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* The inlined SVG has hardcoded stroke="#00CC96" on each path. Force the
   strokes to currentColor so the icon tracks the chip's text color
   (white over a photo, brand-800 over the initials fallback) and the
   parent's hover opacity transition visibly carries through. Bump the
   stroke-width too — the source SVG ships at 2 which reads as hairline
   at our 16px display size. */

.local-reviews__card__source__icon path {
    stroke: currentColor;
    stroke-width: 3;
}

a.local-reviews__card__source:hover {
    color: var(--c-white);
    opacity: 0.8;
}

.local-reviews__card--initials .local-reviews__card__source:hover {
    color: var(--c-brand-800);
}

.local-reviews__card__stars {
    width: auto;
    height: 20px;
    margin-bottom: 32px;
    /* Don't let the default `align-items: stretch` on .local-reviews__text
       widen the SVG to the text container's intrinsic width. The stars
       SVG has preserveAspectRatio="xMidYMid", so a stretched box centers
       the glyphs — fine when the meta line is short ("Patient, 54") and
       the container hugs the stars, broken on cards with longer meta
       ("Review from Healthgrades") where the container grows and the
       stars visibly drift to center. flex-start keeps the SVG at its
       intrinsic width regardless of sibling text length. */
    align-self: flex-start;
}

.local-reviews__card__name,
.local-reviews__card__meta {
    margin: 0;
}

/* ---------------------------------------------------------------- */

/* Basic layout variant.                                            */

/*                                                                  */

/* Smaller round avatar + identity block on top, stars, then a body */

/* excerpt and source chip below. Intended as a stopgap while the   */

/* CPT is light on actual patient photos — when most reviews carry  */

/* real images we'll likely switch the default back to the full     */

/* photo card. Toggled via the block's `layout` ACF field.          */

/* ---------------------------------------------------------------- */

.local-reviews--basic .local-reviews__card {
    flex: 0 0 400px;
    padding: 42px 28px;
    gap: 36px;
    background-color: var(--c-white);
}

.local-reviews__card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.local-reviews__card__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--c-neutral-100);
}

.local-reviews__card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Initials in the small avatar — same brand-tinted look as the
   full-photo variant's initials block, sized down for the 56px disc. */

.local-reviews__card__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-accent-50);
    color: var(--c-accent-800);
}

.local-reviews__card__avatar--initials .local-reviews__card__initials {
    line-height: 1;
    margin: 0;
}

.local-reviews__card__identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.local-reviews--basic .local-reviews__card__stars {
    height: 24px;
    margin-bottom: 0;
}

/* Pin the identity block to the bottom of the card so attribution
   always lands at the same edge, regardless of how many lines the
   excerpt above wraps to. The marquee track defaults to align-items:
   stretch, so every card already matches the tallest card's height —
   margin-top: auto then pushes this element to the bottom of that
   shared height. Subtle hairline above separates the attribution
   from the excerpt on cards where the excerpt runs short and the
   header would otherwise sit floating with too much whitespace. */

.local-reviews--basic .local-reviews__card__header {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--c-neutral-50);
}

.local-reviews__card__excerpt {
    margin: 0;
    color: var(--c-neutral-800);
    /* Cap the excerpt visually so cards stay the same height. The PHP
       trim is the source of truth; this is a safety net for outliers
       and for cards whose stripped content lands awkwardly long. */
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Inline "Healthgrades" link inside the basic-layout meta. Just the
   platform name + icon are the clickable target — the preceding "from"
   stays as plain meta text. Underline is drawn with border-bottom (not
   text-decoration) so the line extends under both the label AND the
   external-link icon, reinforcing that the whole pill is interactive. */

.local-reviews__card__meta-source {
    color: var(--c-brand-800);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 200ms ease;
}

.local-reviews__card__meta-source:hover {
    opacity: 0.8;
}

.local-reviews__card__meta-source__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Same hardcoded-stroke override as the photo-overlay chip's icon. */

.local-reviews__card__meta-source__icon path {
    stroke: currentColor;
    stroke-width: 3;
}

@media screen and (max-width: 768px) {
    .local-reviews {
        overflow: hidden;
    }
}

@media screen and (max-width: 450px) {
    .local-reviews--image .local-reviews__card {
        flex: 0 0 200px;
    }

    .local-reviews__card__photo {
        width: 200px;
        height: 200px;
    }

    .local-reviews__text {
        padding: 16px 24px;
    }

    /* Basic cards can't shrink to 200px without breaking the excerpt
       paragraph — they hold real prose, not just avatar + label. Cap at
       300px so they still fit in the marquee on narrow screens. */
    .local-reviews--basic .local-reviews__card {
        flex: 0 0 300px;
        padding: 20px 22px;
    }
}

.media {
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
    position: relative;
}

/* Contained — single image / video preview inside the page measure. */

.media--type-contained .media__frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.media__frame .img-wrap,
.media__frame img,
.media__preview {
    width: 100%;
    height: auto;
    display: block;
}

/* Full-bleed — viewport-edge escape hatch on the bleed layer only.
   Text content (section header) stays inside `.contained` above. */

.media--type-full-bleed .media__bleed {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: var(--media-h, 500px);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    background-color: var(--c-accent-1000);
}

.media--type-full-bleed .media__bleed[data-bg-loaded="true"]::before {
    opacity: 0.6;
    border-radius: 0;
}

/* Preview video */

.media--type-full-bleed .media__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.media-h-sm { --media-h: 300px; }

.media-h-md { --media-h: 500px; }

.media-h-lg { --media-h: 700px; }

.media-h-xl { --media-h: 900px; }

/* Play-button overlay — absolutely centered on the media surface. */

.media__trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background-color: var(--c-accent-800);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, background 200ms ease;
    z-index: 2;
}

.media__trigger:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background-color: var(--c-accent-500);
    /* background: rgba(255, 255, 255, 1); */
}

.media__trigger-gradient {
    position: absolute;
    width: 500px;
    height: 644px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(50.02% 50.02% at 50% 50%, #1A2C27 0%, rgba(26, 44, 39, 0.00) 100%);
    opacity: 0.8;
}

/* Pure-CSS play triangle (avoids an SVG dependency for the scaffold). */

.media__trigger__icon {
    width: 0;
    height: 0;
    border-left: 22px solid var(--c-white, #000);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 6px;
}

/* Gallery — 3-column square grid. Each cell crops to 1/1 via the helper's
   .img-wrap (overridden below) so mixed-aspect uploads stay visually
   consistent. Subtle hover scale on the inner img signals interactivity
   for a future lightbox. */

.media--type-gallery .media__gallery {
    display: grid;
    grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
    gap: 20px;
    margin-top: 24px;
}

/* The helper writes `aspect-ratio: 1/1` inline (via the template's arg).
   We just need the wrap to fill its grid cell horizontally and clip the
   cropped image. Height comes from aspect-ratio, not an explicit value. */

.media--type-gallery .media__gallery .img-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.media--type-gallery .media__gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.media--type-gallery .media__gallery .img-wrap:hover img {
    transform: scale(1.04);
}

/* On smaller viewports the user-chosen column count is overridden via the
   variable so the same `repeat(var(--gallery-cols, 3), 1fr)` rule above
   responds without restating it. */

@media screen and (max-width: 900px) {
    .media--type-gallery {
        --gallery-cols: 2;
    }
}

@media screen and (max-width: 500px) {
    .media--type-gallery {
        --gallery-cols: 1;
    }
}

@media screen and (max-width: 700px) {
    .media-h-sm { --media-h: 220px; }
    .media-h-md { --media-h: 360px; }
    .media-h-lg { --media-h: 480px; }
    .media-h-xl { --media-h: 600px; }

    .media__trigger {
        width: 64px;
        height: 64px;
    }

    .media__trigger__icon {
        border-left-width: 18px;
        border-top-width: 11px;
        border-bottom-width: 11px;
    }
}

.text-and-image {
    position: relative;
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.text-and-image__wrap {
    display: flex;
    gap: 60px;
}

.text-and-image__header {
    margin-top: 0 !important;
    font-weight: 400 !important;
}

.text-and-image__text {
    max-width: 550px;
    width: 100%;
}

.text-and-image__body b,
.text-and-image__body strong {
    font-weight: 600;
}

.text-and-image__image {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 450px;
}

.text-and-image__image--single {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
}

.text-and-image__image--single > .img-wrap {
    width: 100%;
    height: 100%;
}

.text-and-image__statistics {
    margin-top: 46px;
}

.text-and-image__statistics .statistics__list {
    gap: 100px;
}

.text-and-image__statistics .statistics__stat {
    flex: initial;
}

.text-and-image__statistics .statistics__value {
    margin-bottom: 0;
}

.text-and-image__statistics .statistics__label {
    opacity: 0.6;
}

/* Preview video sits in place of the still image (same crop, same shape). */

.text-and-image__image--single .text-and-image__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play-button overlay — mirrors the media block's trigger styling so the
   visual language stays consistent across blocks that surface video. */

.text-and-image__trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background-color: var(--c-accent-800);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, background 200ms ease;
    z-index: 2;
}

.text-and-image__trigger:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background-color: var(--c-accent-500);
}

/* Pure-CSS play triangle — same trick used in the media block. */

.text-and-image__trigger__icon {
    width: 0;
    height: 0;
    border-left: 22px solid var(--c-white, #000);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 6px;
}

@media screen and (max-width: 700px) {
    .text-and-image__trigger {
        width: 64px;
        height: 64px;
    }

    .text-and-image__trigger__icon {
        border-left-width: 18px;
        border-top-width: 11px;
        border-bottom-width: 11px;
    }
}

/* Double mode needs a bit more room to fit a ~400px image plus the 60px flair. */

.text-and-image__image--double {
    max-width: 460px;
}

.text-and-image__gallery {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

/* The wrap becomes a flex row so the ::before / ::after flairs can sit beside
   the image. The aspect-ratio reservation acf_image puts inline on the wrap is
   overridden — the image itself now carries the 4/3 shape. */

.text-and-image__gallery > .img-wrap {
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: auto !important;
    gap: 10px;
}

.text-and-image__gallery > .img-wrap > img {
    flex: 1;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    margin: 0;
}

/* Decorative 60px flair: before the first image, after the second. */

.text-and-image__gallery > .img-wrap:first-child::before,
.text-and-image__gallery > .img-wrap:last-child::after {
    content: '';
    flex: 0 0 60px;
    align-self: stretch;
    background: var(--c-neutral-100);
    border-radius: 16px;
}

/* Override the .img-wrap img defaults from utility.css. */

.text-and-image__image--single .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optional tint overlay — toggled via ACF image_overlay field ('dark'
   or 'light'). Same pattern as basic-cta / page-header: ::after pseudo
   with pointer-events: none so clicks pass through to whatever's
   underneath (matters for video/iframe variants where the modal
   trigger button needs to stay clickable).
   isolation: isolate keeps the trigger button's z-index local so it
   can sit above the overlay without leaking out of this scope. */

.text-and-image__image--overlay-dark,
.text-and-image__image--overlay-light {
    position: relative;
    isolation: isolate;
}

.text-and-image__image--overlay-dark::after,
.text-and-image__image--overlay-light::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1; /* above the image, below the trigger */
}

.text-and-image__image--overlay-dark::after {
    background-color: var(--c-accent-1000-alpha-20);
}

.text-and-image__image--overlay-light::after {
    background-color: var(--c-white-alpha-20);
}

/* Keep the modal trigger above the overlay so the play button stays
   visible and obviously interactive on video / iframe variants. */

.text-and-image__image--overlay-dark .text-and-image__trigger,
.text-and-image__image--overlay-light .text-and-image__trigger {
    z-index: 2;
}

.text-and-image .actions {
    margin-top: 30px;
}

@media screen and (max-width: 996px) {
    /* Override .v-align (utility.css:295) which would otherwise flip to
       column here. text-and-image stays in row layout until 768px. */
    .text-and-image__wrap {
        flex-direction: row;
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    .text-and-image__wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .text-and-image__text,
    .text-and-image__image {
        max-width: 100%;
    }

    .text-and-image__header,
    .text-and-image__body {
        max-width: 650px;
    }

    .text-and-image__gallery span.img-wrap:nth-child(2) {
        display: none !important;
    }

    /* Moves any image content below the text on mobile */
    .text-and-image--right .text-and-image__text {
        order: -1;
    }

    .text-and-image__image--single {
        aspect-ratio: 10 / 10;
    }

    .text-and-image__statistics .statistics__list {
        gap: 56px;
    }
}

@media screen and (max-width: 450px) {
    .text-and-image__statistics .statistics__list {
        gap: 36px;
    }
}

.page-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    /* Per-instance override via the ACF `min_height` field (emitted as
       `--min-h` inline on the section). Unset → horizontal default 500px,
       vertical default 650px (via the more-specific rule below). */
    min-height: var(--min-h, 500px);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
    margin-top: var(--mt, 1.5rem);
    margin-bottom: var(--mb, 5.5rem);
}

.page-header.text-orientation--vertical {
    min-height: var(--min-h, 650px);
}

.page-header.text-orientation--vertical.alignment--center {
    align-items: center;
}

/* Page-header-specific overrides on the shared .bg-panel utility:
   sit behind content and extend below the section by 60px. */

.page-header .bg-panel {
    height: calc(100% + 120px);
    top: -60px;
    z-index: -1;
}

.page-header__pattern {
    /* Applied as a mask rather than background-image so the bg-panel
       doesn't qualify as an LCP candidate (the spec only counts
       background-image: url(...) — mask-image is excluded). The SVG is
       monochrome #00cc96 with alpha baked into its shapes; mask-image
       preserves that alpha, and background-color provides the fill. */
    background-color: #00cc96;
    -webkit-mask: url('./bg-tji-CmRYCF5o.svg') 0% 0% / 300px 300px repeat;
            mask: url('./bg-tji-CmRYCF5o.svg') 0% 0% / 300px 300px repeat;
}

.page-header__gradient {
    background: radial-gradient(68% 84% at 50% 50%, rgba(255, 255, 255, 0.00) 0%, var(--c-white) 100%);
}

.page-header__blur {
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(2px);
}

.page-header__flair-svg {
    pointer-events: none;
}

/* Background video — mirrors .bg-panel--image's recipe: dark base
   panel + dimmed media overlay so text on top stays legible. The
   utility CSS at src/css/base/utility.css:262-269 applies the same
   dark base + 0.2 opacity to the image variant; we replicate it here
   for the video panel + video element. Tune the .is-loaded opacity
   higher if a given video reads too dark. */

.bg-panel--video {
    background: var(--c-neutral-1000);
}

/* Starts hidden; the .is-loaded class is added by initBgVideoFades in
   lazy-loading.js once the video's `canplay` event fires. While the
   video downloads, the placeholder_image painted by .bg-panel--image
   (or the native <video poster>) is what the user sees, so the
   container is never empty. */

.page-header__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.page-header__bg-video.is-loaded {
    opacity: 0.2;
}

/* Once the video is playing, fade the placeholder image out. The image
   ::before keeps painting until the video is ready (so the container is
   never empty); after that the video becomes the canonical visible
   content and the image is redundant. The opacity transition on
   [data-bg-url]::before (in utility.css) makes this a smooth handoff. */

.bg-panel--video:has(.page-header__bg-video.is-loaded)::before {
    opacity: 0;
}

.page-header__wrap {
    gap: 60px;
    align-items: flex-end;
}

.page-header.alignment--center .page-header__wrap {
    justify-content: center;
}

.page-header__text {
    /* max-width: 650px; */
    display: flex;
    flex-direction: column;
    gap: 36px;
    /* Text is the flexible one: grows into available space, shrinks first
       as the row narrows. min-width: 0 defeats the default min-width: auto
       (which would refuse to shrink below the heading's content min-width). */
    flex: 1 1 0;
    min-width: 0;
}

.page-header__eyebrow,
.page-header__social-proof {
    margin-bottom: 12px;
}

/* Resource format: breadcrumbs above the title + author block beneath body.
   Structural breadcrumb styles live in src/css/components/breadcrumbs.css.
   This rule only handles positional spacing within the page-header. */

.page-header__breadcrumbs {
    margin-bottom: 50px;
}

.page-header__author {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.page-header__author__avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.page-header__meta-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.3;
}

.page-header__date {
    display: block;
}

.page-header__social-proof {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header__social-proof__separator {
    color: var(--c-dark-green-50);
}

.theme--dark .page-header__social-proof__separator {
    color: var(--c-white-alpha-20);
}

.page-header__social-proof__text {
    margin: 0;
    margin-bottom: 0 !important;
}

.page-header__social-proof__text a {
    /* color: var(--c-neutral-800); */
    text-decoration: underline;
}

.page-header.alignment--center .page-header__text {
    align-items: center;
}

.page-header.text-orientation--horizontal .page-header__text {
    flex-direction: row;
    align-items: flex-end;
    gap: 60px;
}

/* Resource format — stretch the text column to fill the section height,
   then use margin-top: auto on .page-header__top to split the column into
   two groups: breadcrumbs at the top, everything else (top cluster, body,
   author, cta) pushed to the bottom. Each stretch rule overrides its
   equivalent align-items: flex-end from the base page-header / wrap rules. */

.page-header--format-resource {
    align-items: stretch;
    /* padding-top: 60px; */
    --min-h: 600px;
}

.page-header--format-resource .page-header__wrap {
    align-items: stretch;
}

.page-header--format-resource .page-header__text {
    height: 100%;
}

.page-header--format-resource .page-header__image {
    /* min-width: 466px; */
}

.page-header--format-resource .page-header__image > span {
    height: 100%;
}

/* The auto top margin eats all available space, floating this cluster AND
   every sibling after it (body, author, cta) against the bottom edge. */

.page-header--format-resource .page-header__top {
    margin-top: auto;
}

.page-header.text-orientation--horizontal .page-header__body {
    margin-bottom: 12px;
}

.page-header__header {
    margin-top: 0;
    font-weight: 400 !important; /* Todo: Remove this */
    margin: 0 !important; /* Todo: Remove this */
    max-width: 650px;
    width: 100%;
}

.page-header.alignment--center .page-header__top {
    /* Match the heading's max-width — without this the flex parent
       caps the heading's effective width regardless of its own
       max-width because .page-header__text is align-items: center. */
    max-width: 700px;
    width: 100%;
}

.page-header.alignment--center .page-header__header {
    text-align: center;
    max-width: 700px;
}

.page-header__body {
    max-width: 550px;
}

.page-header.alignment--center .page-header__body {
    text-align: center;
}

.page-header__body p {
    margin: 0;
}

.page-header__cta-byline {
    margin-top: 14px;
    margin-bottom: 0 !important;
}

.page-header__image {
    /* Pinned width above 1200px (won't shrink). Below 1200px the rule
       inside the 1200px media query swaps flex-basis to a clamp so the
       image scales with viewport. Below 996px the .v-align column flip
       takes over and the rule inside that block resets sizing. */
    flex: 0 0 400px;
    min-width: 300px;
    border-radius: 16px;
    background-color: var(--c-accent-50);
    overflow: hidden;
}

.page-header__image > span {
    height: 500px;
}

.page-header__image img {
    /* max-width: 350px; */
    object-fit: cover;
    height: 100%;
    width: 100%;
}

/* Optional dark overlay (toggled via ACF show_image_overlay). Mirrors
   the basic-cta block's overlay pattern. Color token lives in
   src/css/base/colors.css for easy theme-wide tuning. */

.page-header__image--has-overlay {
    position: relative;
}

.page-header__image--has-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--c-accent-800-alpha-20);
    pointer-events: none;
    border-radius: inherit;
}

@media screen and (max-width: 1300px) {
    .page-header .bg-panel {
        /* left: -20px; */
        /* width: calc(100% - 40px); */
    }
}

@media screen and (max-width: 1100px) {
    .page-header--format-resource .page-header__header {
        max-width: 100%;
        width: 100%;
    }

    .page-header--format-resource .page-header__image {
        max-width: 400px;
    }
}

@media screen and (max-width: 1200px) {
    /* Image starts shrinking. Linear: 600px @ 1200vw → 350px @ 996vw,
       slope ≈ (600-350)/(1200-996) ≈ 1.225. Below 996px the v-align
       column flip + the image override below take over. */
    .page-header__image {
        flex-basis: clamp(350px, calc(122.5vw - 870px), 400px);
    }
}

@media screen and (max-width: 996px) {
    .page-header--format-resource {
        min-height: auto !important;
    }

    .page-header--format-resource {
        padding: 20px;
        margin-top: 0;
        margin-bottom: 24px;
    }

    .page-header .bg-panel {
        top: -20px;
        height: calc(100% + 60px);
    }

    .page-header__breadcrumbs {
        margin-bottom: 24px;
    }

    .page-header--format-resource .page-header__top {
        margin-top: 24px;
    }

    .page-header--format-resource .page-header__text {
        height: auto;
    }

    /* Reset both items to natural flex sizing now that .v-align is column.
       In column mode, flex-basis governs height — leaving 1 1 0 / 0 0 600px
       in place would make the text try to grow vertically and the image
       lose its width. */
    .page-header__text {
        flex: 0 1 auto;
        min-width: auto;
    }

    .page-header__image {
        flex: 0 1 auto;
        width: 100%;
        height: 450px;
    }

    .page-header.text-orientation--horizontal .page-header__text {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header__header {
        max-width: 650px;
    }

    .page-header__wrap {
        align-items: initial;
    }

    .page-header__top {
        margin-top: 60px;
    }
}

@media screen and (max-width: 768px) {
    .page-header--format-page {
        padding: 160px 20px;
        padding-bottom: 0px;
        --min-h: auto !important;
    }

    .page-header .bg-panel {
        width: calc(100% - 40px);
        border-radius: 16px;
    }

    .page-header__header {
        max-width: 400px;
        width: 100%;
    }

    .page-header__top {
        margin-top: 0;
    }

    .page-header__image {
        height: 350px;
        min-width: auto;
    }

    .page-header__text {
        max-width: 100%;
        gap: 24px !important;
    }

    .page-header.alignment--center .page-header__text {
        align-items: flex-start;
    }

    .page-header.alignment--center .page-header__header,
    .page-header.alignment--center .page-header__body {
        text-align: left;
    }

    .page-header__social-proof {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 450px) {
    .page-header__image {
        height: 250px;
    }

    .page-header__header {
        max-width: 100%;
        width: 100%;
    }
}

.patient-segments {
    padding-top: var(--pt, 40px);
    padding-bottom: var(--pb, 0);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
    overflow: hidden;
}

.patient-segments__marquee {
    margin-top: 0;
    overflow: hidden;
    padding: 20px;
    /* Soft fade at each edge so cards appear to enter/leave through a
       gradient rather than cutting off sharply. Same trick as local-reviews. */
    mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}

.patient-segments__track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: patient-segments-scroll 40s linear infinite;
}

/* Pause on hover / focus so users can read a card. */

.patient-segments__track:hover,
.patient-segments__track:focus-within {
    /* animation-play-state: paused; */
}

@keyframes patient-segments-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.patient-segments__card {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.patient-segments__card__photo {
    width: 300px;
    height: 400px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--c-neutral-100);
    position: relative;
}

.patient-segments__card__photo .img-wrap,
.patient-segments__card__photo img {
    width: 100%;
    height: 100%;
}

.patient-segments__card__photo img {
    object-fit: cover;
}

/* Gradient overlay sits between the image and the text. Pseudo-element
   approach because background-image on an <img> doesn't render — the
   element draws its src instead. pointer-events: none so the overlay
   doesn't intercept hover/clicks targeted at the image or text. */

.patient-segments__card__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 41, 30, 0) 0%, rgba(0, 41, 30, 0.25) 50%, #00291E 100%);
    pointer-events: none;
    z-index: 1;
}

.patient-segments__card__text {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.patient-segments__card__label,
.patient-segments__card__name {
    margin: 0;
}

.patient-segments__card__label {
    opacity: 0.6;
}

.post-list {
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 80px);
    position: relative;
    z-index: 0;
    margin-top: var(--mt, 60px);
    margin-bottom: var(--mb, 60px);
}

/* Note: post-list previously used `margin: 60px 0` (left/right 0). The
   shorthand is split into longhand above so each direction is overridable
   independently. Implicit margin-left/right: 0 still applies. */

.post-list__title {
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.post-list__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 15px;
}

.post-list__filters {
    display: flex;
    gap: 8px;
}

.post-list__posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 40px;
}

/*
 * Outer-wrapper styles for the standalone `section-header` block.
 * The shared inner markup lives in `src/css/components/section-header.css`.
 */

.section-header {
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.share {
    padding-top: var(--pt, 40px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.share__wrap {
    background: var(--c-neutral-15);
    border-radius: 16px;
    padding: 30px;
}

.contained--md.share__wrap,
.contained--lg.share__wrap {
    padding: 60px 50px;
}

.share__text {
    max-width: 500px;
}

.contained--md .share__text {
    max-width: 650px;
}

.share__heading {
    margin: 0 0 32px;
}

.contained--lg .share__heading,
.contained--md .share__heading {
    font-size: var(--text-display-sm);
}

.share__body {
    margin: 0;
    max-width: 560px;
    opacity: 0.8;
    margin-top: 16px;
}

.contained--md .share__body {
    max-width: 650px;
}

.share__link-copy {
    display: flex;
    gap: 6px;
    margin-top: 32px;
    max-width: 560px;
}

.contained--md .share__link-copy,
.contained--lg .share__link-copy {
    max-width: 100%;
}

input.share__url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--c-neutral-100);
    border-radius: 8px;
    background: var(--c-white);
    color: var(--c-neutral-800);
    font: inherit;
}

.share__copy {
    flex-shrink: 0;
    cursor: pointer;
}

.share__label {
    margin-top: 32px;
    margin-bottom: 16px;
}

.share__platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.share__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--c-white);
    box-shadow: var(--shadow-sm);
    border-radius: 6px;
    background: var(--c-white);
    color: var(--c-neutral-800);
    cursor: pointer;
    padding: 0;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 150ms ease;
}

.share__button:hover {
    /* background-color: var(--c-accent-800); */
    /* border-color: var(--c-accent-800); */
    color: var(--c-white);
    transform: translateY(-2px);
}

.share__icon {
    width: 28px;
    height: 28px;
}

.share__icon svg,
.share__button svg {
    display: block;
    /* width: 100%; */
    /* height: 100%; */
}

@media screen and (max-width: 768px) {
    .contained--md.share__wrap {
        padding: 60px 20px;
        border-radius: 0;
    }
}

@media screen and (max-width: 450px) {
    .share__link-copy {
        flex-direction: column;
    }

    .share__link-copy .btn {
        width: 100%;
        justify-content: center;
    }
}

.simple-text {
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
    position: relative;
}

.simple-text__body {
    max-width: 720px;
    margin: 0 auto;
}

/* Two-column layout — equal-width text columns with comfortable gutter.
   Stacks below 700px so each column gets its full readable measure. */

.simple-text__columns {
    display: flex;
    gap: 60px;
    margin-top: 24px;
}

.simple-text__column {
    flex: 1 1 0;
    min-width: 0;
}

.simple-text__content *:first-child {
    margin-top: 0;
}

.simple-text__content *:last-child {
    margin-bottom: 0;
}

.simple-text__content h1,
.simple-text__content h2,
.simple-text__content h3,
.simple-text__content h4,
.simple-text__content h5,
.simple-text__content h6 {
    /* Todo: Perhaps we need to remove the font weight from normalize-content */
    font-weight: 400;
}

@media screen and (max-width: 700px) {
    .simple-text__columns {
        flex-direction: column;
        gap: 30px;
    }
}

.statistics {
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.statistics__list {
    display: flex;
    gap: 60px;
    margin-top: 32px;
}

.statistics__stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.statistics__value,
.statistics__label,
.statistics__description {
    margin: 0;
}

.statistics__value {
    margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
    .statistics__list {
        flex-wrap: wrap;
        gap: 30px;
    }
}

.stepper {
    position: relative;
    padding-top: var(--pt, 100px);
    padding-bottom: var(--pb, 100px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.stepper.theme--dark {
    background-color: var(--c-neutral-900);
}

.stepper .page-header__pattern {
    opacity: 0.2;
}

.stepper .page-header__gradient {
    background: linear-gradient(270deg, rgba(0, 41, 30, 0.00) 0%, rgba(0, 41, 30, 0.94) 36.86%, #00291E 59.78%, rgba(0, 41, 30, 0.00) 100%);
}

.stepper__wrap {}

.stepper__items {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 80px;
}

.stepper__item {
    display: flex;
    gap: 60px;
    position: relative;
    z-index: 0;
    border-radius: 24px;
    /* align-items: center; */
}

.theme--dark .stepper__item:not(.stepper__item--has-bg) {
    background: linear-gradient(180deg, rgba(0, 41, 30, 0.50) 0%, rgba(0, 41, 30, 0.00) 100%);
}

.stepper__item .bg-panel {
    top: -40px;
    height: calc(100% + 80px);
    z-index: -2;
}

.stepper__item--has-bg {
    background: none;
}

/* Reverse rows put the image on the left without changing DOM order, so
   keyboard / screen-reader traversal stays consistent: text → image. */

.stepper__item--reverse {
    flex-direction: row-reverse;
}

.stepper__text {
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 0;
    min-width: 0;
}

.stepper__top {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Fixed 450×450 image column. flex-basis is 450px and grow/shrink are
   disabled so the image keeps its size regardless of how much the text
   column wants. The text column (flex: 1 1 0) absorbs the rest of the row. */

.stepper__image {
    flex: 0 0 450px;
    width: 450px;
    aspect-ratio: 1 / 1;
}

.stepper__image .img-wrap {
    border-radius: 16px;
    overflow: hidden;
}

.stepper__image .img-wrap {
    width: 100%;
    height: 100%;
    background-color: var(--c-accent-1000);
}

.stepper__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stepper__image img.loaded,
.stepper__image img.is-loaded {
    opacity: 0.6;
}

.stepper__eyebrow {
    margin: 0 0 8px;
}

.stepper__header {
    margin: 0 0 16px;
}

.stepper__body {
    margin: 0;
    opacity: 0.8;
}

.stepper__cta {
    margin-top: 24px;
}

@media screen and (max-width: 1300px) {
    .stepper__item .bg-panel {
        width: calc(100% + 60px);
    }
}

@media screen and (max-width: 996px) {
    .stepper__item {
        gap: 24px;
    }

    /* Linear scale: width = 450px @ 996vw → 250px @ 700vw. Both flex-basis
       and width need overriding because the base rule sets flex: 0 0 450px,
       which would otherwise pin the column at 450 regardless of width. */
    .stepper__image {
        flex-basis: clamp(250px, calc(67.6vw - 223px), 450px);
        width: clamp(250px, calc(67.6vw - 223px), 450px);
    }
}

@media screen and (max-width: 768px) {
    .stepper__wrap {
        gap: 48px;
    }

    /* Stack vertically on mobile. row-reverse from desktop is overridden
       so every item still places text above image — keeps the visual
       rhythm consistent regardless of alternating. */
    .stepper__item,
    .stepper__item--reverse {
        flex-direction: column;
        gap: 36px;
    }

    /* Image scales down within the column. Square ratio preserved by
       aspect-ratio above; max-width caps it at the desktop size on
       tablet-narrow viewports so it never grows past 450px. */
    .stepper__image {
        flex: 0 1 auto;
        width: 100%;
        max-width: 450px;
    }

    .stepper__text {
        padding: 0;
    }

    .stepper__header {
        font-size: var(--text-heading-lg);
    }

    .stepper__item .bg-panel {
        width: 100vw;
        border-radius: 0;
    }
}

.team-member-feature {
    position: relative;
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
}

.team-member-feature__wrap {
    display: flex;
    gap: 60px;
}

.team-member-feature__media {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    flex-shrink: 0;
    background-color: var(--c-neutral-100);
    overflow: visible;
}

.team-member-feature__identity {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: calc(100% - 12px);
    background-color: var(--c-white);
    border-radius: 16px;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-member-feature__name,
.team-member-feature__role {
    margin: 0 !important;
    font-weight: 400 !important;
}

.team-member-feature__media > .img-wrap {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.team-member-feature__media .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06) translateX(-20px);
    transform-origin: 50% 100%;
}

.team-member-feature__text {
    display: flex;
    flex-direction: column;
    max-width: 610px;
    width: 100%;
}

.team-member-feature__header {
    margin-top: 0 !important;
    font-weight: 400 !important;
}

.team-member-feature__bio {
    max-width: 550px;
}

.team-member-feature__bio p {
    margin: 0 0 12px;
}

.team-member-feature__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    margin-top: 64px;
}

.team-member-feature__stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0 !important;
}

.team-member-feature__stat:not(:last-child) {
    padding-right: 36px;
    position: relative;
}

.team-member-feature__stat:not(:last-child)::after {
    content: '';
    height: 50px;
    width: 1px;
    background-color: var(--c-neutral-100);
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.team-member-feature__stat-value {
    margin-bottom: 0;
}

@media screen and (max-width: 996px) {
    .team-member-feature__media {
        max-width: 100%;
        aspect-ratio: auto;
    }

    .team-member-feature__media .img-wrap {
        max-width: 400px;
    }

    .team-member-feature__media .img-wrap img {
        /* height: auto; */
    }
}

@media screen and (max-width: 768px) {
    .team-member-feature__media {
        max-width: 100%;
    }
}

.testimonial-feature {
    padding-top: var(--pt, 60px);
    padding-bottom: var(--pb, 60px);
    margin-top: var(--mt, 0);
    margin-bottom: var(--mb, 0);
    position: relative;
}

.testimonial-feature__carousel {
    position: relative;
}

.testimonial-feature__layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Stack pattern: every direct child occupies the same grid cell. The active
   one is visible, others are faded out and aria-hidden. Container height
   naturally follows the tallest item across all variants. */

.testimonial-feature__media-stack,
.testimonial-feature__quote-stack,
.testimonial-feature__text-stack {
    display: grid;
    grid-template-areas: "stack";
}

.testimonial-feature__media,
.testimonial-feature__quote,
.testimonial-feature__text {
    grid-area: stack;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-in-out;
}

.testimonial-feature__media.active,
.testimonial-feature__quote.active,
.testimonial-feature__text.active {
    opacity: 1;
    pointer-events: auto;
}

.testimonial-feature__media-stack {
    flex-shrink: 0;
    width: 100%;
    max-width: 450px;
    background-color: var(--c-accent-1000);
    border-radius: 16px;
    /* overflow: hidden; */
}

.testimonial-feature__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.testimonial-feature__media > .img-wrap {
    width: 100%;
    height: 100%;
}

.testimonial-feature__media .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.testimonial-feature__media .img-wrap img.loaded {
    opacity: 0.6;
}

/* Overlay-off variant: drop the dark accent background AND let the image
   render at full opacity. Toggled via the block's `image_overlay` ACF
   field — useful when the chosen photography already has its own mood
   and the wash would mute it. */

.testimonial-feature--no-image-overlay .testimonial-feature__media-stack {
    background-color: transparent;
}

.testimonial-feature--no-image-overlay .testimonial-feature__media .img-wrap img.loaded {
    opacity: 1;
}

.testimonial-feature__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    max-width: 560px;
    align-self: stretch;
    justify-content: space-between;
    padding: 30px 0;
}

.testimonial-feature__quote {
    margin: 0;
}

.testimonial-feature__attribution {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-feature__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.testimonial-feature__name,
.testimonial-feature__meta {
    margin: 0;
}

.testimonial-feature__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.testimonial-feature__controls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.testimonial-feature__prev,
.testimonial-feature__next {
    background: none;
    border: 0px;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--c-neutral-800);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.testimonial-feature__prev:hover,
.testimonial-feature__next:hover {
    background: none;
}

.testimonial-feature__prev:disabled,
.testimonial-feature__next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.testimonial-feature__progress {
    margin-bottom: 32px;
    height: 2px;
    background-color: var(--c-dark-green-50);
    border-radius: 999px;
    overflow: hidden;
}

.testimonial-feature__progress__tracker {
    height: 100%;
    width: 0;
    background-color: var(--c-accent-800);
}

.testimonial-feature__progress__tracker.animating {
    animation: testimonial-feature-progress 12000ms linear forwards;
}

@keyframes testimonial-feature-progress {
    from { width: 0; }
    to   { width: 100%; }
}

@media screen and (max-width: 996px) {
    /* Linear scale: 450px @ 996vw → 250px @ 768vw, where the 768 block
       below flips the layout to column. order: -1 carries through so the
       image lands above the text in the stacked variant. */
    .testimonial-feature__media-stack {
        order: -1;
        max-width: clamp(250px, calc(87.7vw - 423px), 450px);
    }

    .testimonial-feature__content {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .testimonial-feature {
        overflow: hidden;
    }

    .testimonial-feature__layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    /* Restore a roomy stacked treatment now that the image isn't competing
       with text for row width. 60% + auto margins centers it horizontally
       under the column flip (overriding align-items: flex-start above). */
    .testimonial-feature__media-stack {
        max-width: 60%;
        margin: 0 auto;
        position: relative;
    }

    .testimonial-feature__media-stack::before,
    .testimonial-feature__media-stack::after {
        content: '';
        border-radius: 16px;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: var(--c-accent-300);
    }

    .testimonial-feature__media-stack::before {
        content: '';
        position: absolute;
        left: calc(-100% - 20px);
    }

    .testimonial-feature__media-stack::after {
        content: '';
        position: absolute;
        right: calc(-100% - 20px);
        background-color: var(--c-accent-100);
    }

    .testimonial-feature__content {
        padding-top: 12px;
        padding-bottom: 0;
        gap: 64px;
    }
}

@media screen and (max-width: 450px) {
    .testimonial-feature__media-stack {
        max-width: 100%;
    }

    .testimonial-feature__media {
        aspect-ratio: 4 / 4;
    }
}