/* ==========================================================================
   Encino homepage redesign — ClickUp 868kuxxcp
   Values transcribed from Figma vrPBNHpIispsd8rnVdIxd8, frame 12:96.
   Scoped to .edc-home so nothing here can leak into other pages.
   ========================================================================== */
.edc-home.edc-home {
	/* --- colour, from Figma variables + raw fills ------------------------ */
	--edc-ink:      #2b1c13;   /* Neutral / 900 */
	--edc-paper:    #ffffff;   /* Neutral / 100 */
	--edc-cream:    #f1e6df;   /* warm alt-section ground */
	--edc-border:   rgba(43, 28, 19, .2);   /* pill + tab outlines */
	--edc-rule:     rgba(43, 28, 19, .1);   /* faq dividers, footer line */
	--edc-muted:    rgba(43, 28, 19, .4);   /* attribution, footer headings */
	--edc-input:    #cccccc;

	/* --- type ------------------------------------------------------------ */
	--edc-display: 'EDC Mirage', 'MADE Mirage', 'Mirage', Georgia, 'Times New Roman', serif;
	--edc-body:    'EDC Albert', 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* --- metrics --------------------------------------------------------- */
	--edc-max:      1440px;
	--edc-gutter:   64px;
	--edc-section:  100px;
	--edc-radius:   16px;
	--edc-radius-lg: 20px;
	--edc-gap:      16px;

	background: var(--edc-paper);
	color: var(--edc-ink);
	font-family: var(--edc-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	overflow-x: clip;
}
.edc-home *,
.edc-home *::before,
.edc-home *::after { box-sizing: border-box; }

/* Any layout `display` we set would otherwise beat the [hidden] UA rule, which
   is what collapses tab panels and accordion bodies. Keep [hidden] authoritative. */
.edc-home [hidden] { display: none !important; }

/* No descendant may exceed its container. Several blocks carry a fixed px width
   taken straight from the Figma frame; this keeps them from forcing a
   horizontal scrollbar on narrow screens. */
.edc-home img,
.edc-home video,
.edc-home iframe { max-width: 100%; }
.edc-home .edc-inner,
.edc-home .edc-hero__content,
.edc-home .edc-advantages__inner,
.edc-home .edc-quote__inner,
.edc-home .edc-testimonials__slide,
.edc-home .edc-faq__inner,
.edc-home .edc-area__inner,
.edc-home .edc-stack__txts { max-width: 100%; min-width: 0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.edc-home .edc-section {
	padding: var(--edc-section) var(--edc-gutter);
}
.edc-home .edc-section--flush { padding: 0; }
/*
 * Two sections lay their columns out with Elementor container controls instead
 * of .edc-inner, so nothing was constraining them to the 1440 grid: past that
 * width the hero copy and the whole callback row stayed pinned to the left edge
 * while every other section centred. The callback row was also 36px off its own
 * design at 1440 — Figma 20:1242 insets it 100 on the left and 64 on the right,
 * not 64/64.
 *
 * Padding rather than max-width, so the hero photograph and the section's
 * background stay full-bleed. !important because Elementor emits per-element
 * padding at a specificity a class cannot beat.
 */
@media (min-width: 881px) {
	.edc-home #hero {
		padding-left:  max(64px, calc((100% - var(--edc-max)) / 2 + 64px)) !important;
		padding-right: max(64px, calc((100% - var(--edc-max)) / 2 + 64px)) !important;
	}
	.edc-home #callback {
		padding-left:  max(100px, calc((100% - var(--edc-max)) / 2 + 100px)) !important;
		padding-right: max(64px,  calc((100% - var(--edc-max)) / 2 + 64px)) !important;
	}
}

.edc-home .edc-inner {
	max-width: calc(var(--edc-max) - (var(--edc-gutter) * 2));
	margin-inline: auto;
	width: 100%;
}
.edc-home .edc-bg-cream { background: var(--edc-cream); }
.edc-home .edc-bg-ink { background: var(--edc-ink); color: var(--edc-paper); }
.edc-home .edc-bg-paper { background: var(--edc-paper); }

/* --------------------------------------------------------------------------
   Type scale — sizes/leading/tracking lifted directly from Figma
   -------------------------------------------------------------------------- */
/* Figma node 12:63: the closing phrase is Albert Sans ExtraBold Italic (800).
   The hero copy is an Elementor text-editor widget, so the emphasis arrives as
   <em><strong>; `bolder` against the paragraph's 300 resolves to 400, which is
   both too light and narrow enough to change where the line wraps. */
.edc-home #edc-hero-col em,
.edc-home #edc-hero-col em strong { font-weight: 800; font-style: italic; }

/* hello-elementor gives every <p> a .9rem block-end margin. Inside the hero's
   txts group that adds 14px under the lead and pushes the whole column 14px
   past Figma's 332px. */
.edc-home #edc-hero-txts p { margin: 0; }

.edc-home .edc-h1 {
	font-family: var(--edc-display); font-weight: 500;
	font-size: 72px; line-height: 80px; letter-spacing: -.02em;
	margin: 0;
}
.edc-home .edc-h2 {
	font-family: var(--edc-display); font-weight: 500; color: var(--edc-ink);
	font-size: 48px; line-height: 56px; letter-spacing: -.02em;
	margin: 0;
}
.edc-home .edc-h3 {
	font-family: var(--edc-display); font-weight: 500; color: var(--edc-ink);
	font-size: 24px; line-height: 32px; letter-spacing: -.01em;
	margin: 0;
}
.edc-home .edc-display-quote {
	font-family: var(--edc-display); font-weight: 500;
	font-size: 56px; line-height: 64px; letter-spacing: -.02em;
	margin: 0;
}
.edc-home .edc-display-quote strong { font-weight: 700; }
.edc-home .edc-eyebrow { font-size: 16px; line-height: 24px; font-weight: 300; margin: 0; }
.edc-home .edc-lead { font-size: 20px; line-height: 28px; font-weight: 300; margin: 0; }
.edc-home .edc-body-md { font-size: 18px; line-height: 26px; font-weight: 300; margin: 0; }
.edc-home .edc-body { font-size: 16px; line-height: 24px; font-weight: 300; margin: 0; }
.edc-home .edc-small { font-size: 14px; line-height: 22px; font-weight: 300; margin: 0; }
.edc-home .edc-body-md em,
.edc-home .edc-body em,
.edc-home .edc-lead em {
	font-style: italic; font-weight: 800;
}

/* --------------------------------------------------------------------------
   Buttons / links
   -------------------------------------------------------------------------- */
.edc-home .edc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 18px 24px; border-radius: var(--edc-radius); border: 0;
	font-family: var(--edc-body); font-weight: 600; font-size: 14px; line-height: 22px;
	letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
	cursor: pointer; transition: opacity .2s ease, transform .2s ease;
}
/*
 * hello-elementor's reset paints every <button> #c36 with white text on hover
 * and focus. That rule is `[type=button]:hover, button:hover` — specificity
 * 0,2,0, the same as our own `.edc-home .edc-x` rules, and it loads later, so
 * it won the tie on five controls: the FAQ questions, the service-area
 * disclosures, the icon buttons, the carousel arrows and the mobile burger.
 * The kit also flipped .edc-btn's label to black. Each resting appearance is
 * re-asserted here for hover and focus so nothing turns pink.
 */
.edc-home .edc-faq__q:hover,        .edc-home .edc-faq__q:focus,
.edc-home .edc-area__toggle:hover,  .edc-home .edc-area__toggle:focus,
.edc-home .edc-header__burger:hover,.edc-home .edc-header__burger:focus {
	background-color: transparent; color: var(--edc-ink);
}
.edc-home .edc-iconbtn:hover, .edc-home .edc-iconbtn:focus {
	background-color: var(--edc-paper); color: var(--edc-ink);
}
.edc-home .edc-btn--ink:hover,     .edc-home .edc-btn--ink:focus     { background: var(--edc-ink);   color: var(--edc-paper); }
.edc-home .edc-btn--paper:hover,   .edc-home .edc-btn--paper:focus   { background: var(--edc-paper); color: var(--edc-ink); }
.edc-home .edc-btn--outline:hover, .edc-home .edc-btn--outline:focus { color: var(--edc-paper); }
.edc-home .edc-btn:hover { opacity: .85; }
.edc-home .edc-btn:active { transform: translateY(1px); }
.edc-home .edc-btn--ink { background: var(--edc-ink);   color: var(--edc-paper); }
.edc-home .edc-btn--paper { background: var(--edc-paper); color: var(--edc-ink); }
.edc-home .edc-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.edc-home .edc-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600; font-size: 16px; line-height: 24px;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--edc-ink); text-decoration: none;
}
.edc-home .edc-link svg { width: 20px; height: 20px; }
.edc-home .edc-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.edc-home .edc-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 8px; border-radius: 100px;
	background: var(--edc-paper); border: 0; cursor: pointer;
	transition: transform .2s ease;
}
/* The centred play buttons carry translate(-50%,-50%) in their own rule, and a
   bare `transform: scale()` here replaces it outright — on hover they jumped
   half their own size down and right. Scale via a custom property instead, so
   the translate survives. */
.edc-home .edc-iconbtn { --edc-btn-scale: 1; }
.edc-home .edc-iconbtn:hover { --edc-btn-scale: 1.08; transform: scale(var(--edc-btn-scale)); }
.edc-home .edc-band__play:hover,
.edc-home .edc-video__play:hover { transform: translate(-50%, -50%) scale(var(--edc-btn-scale)); }
.edc-home .edc-iconbtn svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   1 — Hero (Figma 9:240, 1440x656)
   -------------------------------------------------------------------------- */
.edc-home .edc-hero {
	position: relative; min-height: 656px;
	display: flex; align-items: center;
	padding: 0 var(--edc-gutter);
	overflow: hidden;
}
.edc-home .edc-hero__media { position: absolute; inset: 0; z-index: 0; }
.edc-home .edc-hero__media img,
.edc-home .edc-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Unused: the hero is a native Elementor container and carries this overlay via
   its own background_overlay_* settings. Kept for reference only. */
.edc-home .edc-hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(111.81deg, rgba(0,0,0,.4) 7.09%, rgba(0,0,0,0) 88.15%) !important;
}
.edc-home .edc-hero__content {
	position: relative; z-index: 2;
	width: 537px; max-width: 100%;
	display: flex; flex-direction: column; gap: 40px; align-items: flex-start;
	color: var(--edc-paper);
}
.edc-home .edc-hero__txts { display: flex; flex-direction: column; gap: 8px; }
.edc-home .edc-hero .edc-h1 { color: var(--edc-paper); }

/* --------------------------------------------------------------------------
   2 — Trust logo strip (Figma 13:358). Brief calls for a single muted tone.
   -------------------------------------------------------------------------- */
.edc-home .edc-trust { padding: 40px var(--edc-gutter); background: var(--edc-paper); }
.edc-home .edc-trust__row {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: 0;
	max-width: calc(var(--edc-max) - (var(--edc-gutter) * 2)); margin-inline: auto;
}
.edc-home .edc-trust__item { padding: 16px 12px; display: flex; align-items: center; flex: 0 1 auto; }
/* Figma paints each logo as a flat silhouette in the ink colour at 40%.
   mask-image reproduces that exactly and works whatever colour the source
   logo happens to be. */
/* Each logo sits in a fixed box and scales to fit via mask-size:contain, which
   preserves its aspect ratio. The box is sized so all eight fit one row at
   1312px — Figma varies each logo's height to the same effect. */
.edc-home .edc-trust__logo {
	display: block; width: 120px; height: 32px;
	background-color: var(--edc-ink); opacity: .4;
	-webkit-mask-image: var(--edc-logo); mask-image: var(--edc-logo);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
	transition: opacity .25s ease;
}
.edc-home .edc-trust__item:hover .edc-trust__logo { opacity: .7; }
/* Fallback for anything still rendered as a plain <img>. */
.edc-home .edc-trust__item img {
	max-height: 32px; width: auto; display: block;
	filter: grayscale(1) opacity(.55);
}

/* --------------------------------------------------------------------------
   3 — Advantages split (Figma 15:612, 720/720)
   -------------------------------------------------------------------------- */
.edc-home .edc-advantages { display: grid; grid-template-columns: 1fr 1fr; }
.edc-home .edc-advantages__text {
	background: var(--edc-cream);
	padding: var(--edc-section) var(--edc-gutter);
	display: flex; align-items: center; justify-content: center;
}
.edc-home .edc-advantages__inner {
	display: flex; flex-direction: column; gap: 48px; align-items: center;
	width: 592px; max-width: 100%; min-width: 0;
}
.edc-home .edc-advantages .edc-h2 { text-align: center; }
.edc-home .edc-advantages__items { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.edc-home .edc-advantage {
	display: flex; align-items: center; gap: 16px;
	font-size: 18px; line-height: 26px; font-weight: 300;
}
.edc-home .edc-advantage__icon {
	flex: 0 0 38px; width: 38px; height: 38px; border-radius: 100px;
	border: 1px solid var(--edc-border);
	display: inline-flex; align-items: center; justify-content: center;
}
.edc-home .edc-advantage__icon svg { width: 18px; height: 18px; }
.edc-home .edc-advantages__media { position: relative; min-height: 660px; overflow: hidden; }
/* 15:621 carries the same navigation component as the image band. */
.edc-home .edc-advantages__media.edc-band--carousel .edc-band__slides { position: absolute; inset: 0; }
.edc-home .edc-advantages__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   4 — Rumi quote (Figma 17:655)
   -------------------------------------------------------------------------- */
.edc-home .edc-quote { text-align: center; }
.edc-home .edc-quote__inner {
	width: 870px; max-width: 100%; margin-inline: auto;
	display: flex; flex-direction: column; gap: 56px; align-items: center;
}
.edc-home .edc-quote__mark { width: 39px; height: 32px; color: var(--edc-ink); }

/* --------------------------------------------------------------------------
   5 — Full-bleed image bands (Figma 17:683 / 19:1105 / 44:523 / 45:632)
   -------------------------------------------------------------------------- */
.edc-home .edc-band { position: relative; height: 600px; overflow: hidden; }
.edc-home .edc-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carousel band (Figma 19:1105). Slides stack in one box so the 600px height
   never shifts; only [hidden] moves between them. Navigation matches the 15:621
   component — two 40px white circles, 8px apart, 24px up from the bottom. */
.edc-home .edc-band--carousel .edc-band__slides { position: absolute; inset: 0; }
.edc-home .edc-band__slide {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s;
}
.edc-home .edc-band__slide.is-current { opacity: 1; visibility: visible; }
.edc-home .edc-band__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edc-home .edc-band__nav {
	position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
	display: flex; align-items: center; gap: 8px; z-index: 2;
}
.edc-home .edc-band__arrow--prev svg { transform: rotate(180deg); }
.edc-home .edc-band__dots {
	position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%);
	display: flex; align-items: center; gap: 8px; z-index: 2;
}
.edc-home .edc-band__dot {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 100px;
	background: rgba(255, 255, 255, .5); cursor: pointer; transition: background .2s ease;
}
.edc-home .edc-band__dot.is-current { background: #fff; }
.edc-home .edc-band__dot:hover { background: rgba(255, 255, 255, .8); }
.edc-home .edc-band__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 56px; height: 56px; padding: 12px;
}
.edc-home .edc-band__play svg { width: 32px; height: 32px; }
/* The Vimeo player fills the poster's box once a play button is used. */
.edc-home .edc-video__frame {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}

/* Lightbox for the image band's film — 16:9 over a dimmed backdrop, so the
   2.4:1 band does not letterbox it. Scoped to body, not .edc-home, because the
   overlay is appended to the document. */
.edc-lightbox {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center; padding: 40px;
	background: rgba(19, 12, 8, .88);
}
.edc-lightbox__stage {
	position: relative; width: 100%; max-width: 1120px; aspect-ratio: 16 / 9;
	border-radius: 16px; overflow: hidden; background: #000;
}
.edc-lightbox__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.edc-lightbox__close {
	position: absolute; top: 24px; right: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 100px;
	background: #fff; color: #2b1c13; cursor: pointer;
}
@media (max-width: 880px) {
	.edc-lightbox { padding: 16px; }
	.edc-lightbox__close { top: 12px; right: 12px; }
}

/* --------------------------------------------------------------------------
   6 — Care / gallery (Figma 19:832)
   -------------------------------------------------------------------------- */
.edc-home .edc-care { display: grid; grid-template-columns: 648px 1fr; gap: 80px; align-items: center; }
.edc-home .edc-care__gallery { display: flex; flex-direction: column; gap: 8px; }
.edc-home .edc-care__main {
	position: relative; height: 568px; border-radius: var(--edc-radius); overflow: hidden;
}
.edc-home .edc-care__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edc-home .edc-care__thumbs { display: flex; gap: 8px; }
.edc-home .edc-care__thumb {
	flex: 1; height: 148px; border-radius: var(--edc-radius); overflow: hidden;
	opacity: .7; cursor: pointer; border: 0; padding: 0; background: none;
	transition: opacity .25s ease;
}
.edc-home .edc-care__thumb[aria-current="true"],
.edc-home .edc-care__thumb:hover { opacity: 1; }
.edc-home .edc-care__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edc-home .edc-care__content { display: flex; flex-direction: column; gap: 48px; }

/* --------------------------------------------------------------------------
   7 — Approach pillars (Figma 19:1075)
   -------------------------------------------------------------------------- */
.edc-home .edc-approach { display: grid; grid-template-columns: 608px 1fr; gap: 16px; align-items: start; }
.edc-home .edc-approach__txts { display: flex; flex-direction: column; gap: 16px; }
.edc-home .edc-approach__cards {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px 32px; padding: 40px;
}
/* The card is a left-aligned stack: icon, then title, then body. `align-items:
   center` centred the shrink-to-fit SVG over full-width, left-reading text, so
   the icon floated in the middle of the column. Card heights were already right
   (176/200/200/200 per 19:1079) — only the cross-axis alignment was wrong. */
.edc-home .edc-approach__card { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.edc-home .edc-approach__card svg { width: 32px; height: 32px; }
.edc-home .edc-approach__card .edc-approach__txt { display: flex; flex-direction: column; gap: 8px; }

/* --------------------------------------------------------------------------
   8 — Callback form (Figma 20:1242)
   -------------------------------------------------------------------------- */
.edc-home .edc-form { display: grid; grid-template-columns: 548px 1fr; gap: 80px; align-items: center; }
.edc-home .edc-form__col { display: flex; flex-direction: column; gap: 48px; }
.edc-home .edc-form__txts { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.edc-home .edc-form__media { height: 708px; border-radius: var(--edc-radius); overflow: hidden; }
.edc-home .edc-form__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Skin whatever form plugin renders inside, so it matches the Figma Input component. */
.edc-home #edc-form-col input[type="text"],
.edc-home #edc-form-col input[type="email"],
.edc-home #edc-form-col input[type="tel"],
.edc-home #edc-form-col textarea,
.edc-home #edc-form-col select,
.edc-home #edc-form-col .gform_wrapper input[type="text"],
.edc-home #edc-form-col .gform_wrapper input[type="email"],
.edc-home #edc-form-col .gform_wrapper input[type="tel"],
.edc-home #edc-form-col .gform_wrapper textarea {
	width: 100%; padding: 16px 24px;
	border: 1px solid var(--edc-input); border-radius: var(--edc-radius);
	background: var(--edc-paper); color: var(--edc-ink);
	font-family: var(--edc-body); font-weight: 300; font-size: 16px; line-height: 24px;
}
.edc-home .edc-form__fields { display: flex; flex-direction: column; gap: 8px; }
.edc-home #edc-form-col .gform_wrapper .gform_fields { row-gap: 8px !important; }
/* Labels are clipped rather than removed: the design has no visible label above
   its 56px inputs, but screen readers still need them, and their text is copied
   into the placeholder so sighted users can tell the fields apart. */
.edc-home #edc-form-col .gform_wrapper .gfield_label,
.edc-home #edc-form-col .gform_wrapper .ginput_complex label,
.edc-home #edc-form-col .gform_wrapper .gform-field-label--type-sub {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Gravity Forms prints the form's own title ("Contact") and description above
   the fields. Figma 20:1243 has only the txts block we render ourselves, so the
   duplicate heading has to go — it was adding 72px to the column. */
.edc-home #edc-form-col .gform_wrapper .gform_heading,
.edc-home #edc-form-col .gform_wrapper .gform_title,
.edc-home #edc-form-col .gform_wrapper .gform_description,
.edc-home #edc-form-col .gform_wrapper .gform_required_legend { display: none; }
/* The column is centred by the parent container; its own padding pushed the
   section 131px taller than the 708px image that should govern it. */
.edc-home #edc-form-col { padding-top: 0; padding-bottom: 0; }

/* Figma 20:1242: four 56px inputs at an 8px gap (248), 48px to the button, and
   the button is 58 — 176 + 48 + 248 + 48 + 58 = 578 for the whole column.
   Gravity Forms' orbital theme supplies its own sizing, hence the id scoping. */
.edc-home #edc-form-col .gform_wrapper input[type="text"],
.edc-home #edc-form-col .gform_wrapper input[type="email"],
.edc-home #edc-form-col .gform_wrapper input[type="tel"],
.edc-home #edc-form-col .gform_wrapper select {
	height: 56px; padding: 0 24px; line-height: 54px;
}
.edc-home #edc-form-col .gform_wrapper .gform_fields { grid-row-gap: 8px; row-gap: 8px; }
/* Figma 20:1243 draws the Insurance Type field as a select with a caret on the
   right; the browser's own arrow is replaced so it matches the other inputs. */
.edc-home #edc-form-col .gform_wrapper select {
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%232b1c13'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 24px center; background-size: 20px 20px;
	padding-right: 56px;
}
.edc-home #edc-form-col .gform_wrapper select:not(:valid),
.edc-home #edc-form-col .gform_wrapper select option[value=""] { color: rgba(43, 28, 19, .5); }
.edc-home #edc-form-col .gform_wrapper .gfield { margin: 0; padding: 0; }
/*
 * Form 4's submit carries the site owner's anti-spam conditional logic: it only
 * appears once "Security Question: 2+2" is answered. That is deliberate, so the
 * button is not forced visible — its 58px row is reserved instead, which both
 * matches Figma 20:1252 and stops the column jumping when the button appears.
 */
.edc-home #edc-form-col .gform_wrapper .gform_footer {
	margin: 48px 0 0; padding: 0; min-height: 58px;
}
/* The name field is a complex field: First and Last each carry a 19px sublabel,
   making the row 83 instead of the 56 every other input measures. */

.edc-home #edc-form-col .gform_wrapper .ginput_complex { row-gap: 0; }
/* Figma 20:1253: the image column is 648 wide, not the full remaining track. */
/* Figma 20:1253: the image is 648x708 and it — not the 578-tall form column —
   sets the section height (708 + 100 + 100 = 908). The old rules targeted
   .edc-form__media, which this markup never produces, so the image ran to its
   natural 839 and pushed the section 131px past the design. */
.edc-home #edc-form-media, .edc-home #edc-form-media.e-con {
	flex: 0 1 648px; width: 648px; min-width: 0; height: 708px;
	border-radius: var(--edc-radius); overflow: hidden;
}
.edc-home #edc-form-col { min-width: 0; }
/* 648 is the desktop measure only — below that the pair has to share the row,
   then stack, or the image runs off the side. */
@media (max-width: 1200px) {
	.edc-home #edc-form-media, .edc-home #edc-form-media.e-con { flex: 1 1 0; width: auto; }
}
@media (max-width: 880px) {
	.edc-home #edc-form-media, .edc-home #edc-form-media.e-con { flex: 1 1 100%; width: 100%; height: 320px; }
}
.edc-home #edc-form-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edc-home #edc-form-col .gform_wrapper .gform_button { margin-top: 0 !important; height: 58px !important; padding: 0 24px !important; }
/*
 * The submit is swapped for the page's own .edc-btn markup so it can carry the
 * arrow, which means it is no longer a .gform_button and picks up Gravity
 * Forms' theme button instead — blue, 3px radius, shrink-to-fit. The site's
 * global !important button rule applies here too, so these match it.
 */
.edc-home #edc-form-col .edc-form__submit {
	display: flex !important; width: 100% !important; height: 58px !important;
	align-items: center !important; justify-content: center !important; gap: 8px !important;
	background: var(--edc-ink) !important; color: var(--edc-paper) !important;
	border: 0 !important; border-radius: var(--edc-radius) !important;
	padding: 18px 24px !important; margin: 0 !important;
	font-family: var(--edc-body) !important; font-weight: 600 !important;
	font-size: 14px !important; line-height: 22px !important;
	letter-spacing: .04em !important; text-transform: uppercase !important;
	cursor: pointer;
}
.edc-home #edc-form-col .edc-form__submit svg { width: 20px; height: 20px; flex: 0 0 20px; }
.edc-home #edc-form-col .gform_wrapper .gform_validation_errors,
.edc-home #edc-form-col .gform_wrapper .gfield_description { margin: 0; }
/*
 * The site carries a global `.gform_button` rule that marks every declaration
 * !important — grey #e5ebe8, a 50px pill, 18px bold. Importance beats
 * specificity, so matching Figma 20:1252 here means answering in kind. Scoped
 * to this page's form only; every other form on the site keeps that styling.
 */
.edc-home #edc-form-col .gform_wrapper .gform_button {
	width: 100% !important; margin-top: 40px;
	background: var(--edc-ink) !important; color: var(--edc-paper) !important;
	padding: 18px 24px !important; border: 0 !important;
	border-radius: var(--edc-radius) !important;
	font-family: var(--edc-body) !important; font-weight: 600 !important;
	font-size: 14px !important; line-height: 22px !important;
	letter-spacing: .04em !important; text-transform: uppercase !important;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   9 — Treatment program cards, hover-reveal (Figma 21:1511 + 21:1292/21:1294)
   -------------------------------------------------------------------------- */
.edc-home .edc-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--edc-gap); }
.edc-home .edc-progcard {
	position: relative; height: 408px; border-radius: var(--edc-radius);
	overflow: hidden; display: block; text-decoration: none; color: inherit;
	background: var(--edc-paper);
}
.edc-home .edc-progcard__media { position: absolute; inset: 0; }
.edc-home .edc-progcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Figma default state: gradient from transparent at 74% to solid black at 100% */
/* Elementor's background lazy-load prints
   `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
    { background-image: none !important }`, and only containers it actually
   observes ever get `.e-lazyloaded` — 7 of 25 here, so the rest would keep the
   gradient suppressed forever. That selector targets elements, not pseudo
   elements, so the gradient lives on ::before where it cannot be reached. */
.edc-home .edc-progcard__scrim {
	position: absolute; inset: 0;
	transition: opacity .35s ease;
}
.edc-home .edc-progcard__scrim::before {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: linear-gradient(180deg, rgba(0,0,0,0) 73.6%, rgba(0,0,0,.3) 100%);
}

.edc-home .edc-progcard__face {
	position: absolute; inset: 0; display: flex; align-items: flex-end;
	padding: 12px 20px; transition: opacity .3s ease;
}
.edc-home .edc-progcard__face .edc-h3 { color: #fff; flex: 1; }
.edc-home .edc-progcard__face svg { width: 24px; height: 24px; color: #fff; flex: 0 0 24px; }
/* Hover state: white card, centred icon + copy + link */
.edc-home .edc-progcard__reveal {
	position: absolute; inset: 0; background: var(--edc-paper);
	padding: 48px 50px; display: flex; flex-direction: column;
	align-items: center; justify-content: space-between; text-align: center;
	opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.edc-home .edc-progcard__reveal svg { width: 32px; height: 32px; color: var(--edc-ink); }
.edc-home .edc-progcard:hover .edc-progcard__reveal,
.edc-home .edc-progcard:focus-visible .edc-progcard__reveal { opacity: 1; pointer-events: auto; }
.edc-home .edc-progcard:hover .edc-progcard__face,
.edc-home .edc-progcard:hover .edc-progcard__scrim,
.edc-home .edc-progcard:focus-visible .edc-progcard__face { opacity: 0; }

/* --------------------------------------------------------------------------
   10 — What We Treat, tab rail (Figma 25:1712)
   -------------------------------------------------------------------------- */
.edc-home .edc-treat__content { display: grid; grid-template-columns: 427px 426px 1fr; gap: var(--edc-gap); }
.edc-home .edc-treat__tabs { display: flex; flex-direction: column; gap: 8px; }
.edc-home .edc-tab {
	display: flex; align-items: center; justify-content: center;
	padding: 12px 32px; border-radius: var(--edc-radius);
	border: 1px solid var(--edc-border); background: transparent; color: var(--edc-ink);
	font-family: var(--edc-body); font-weight: 600; font-size: 14px; line-height: 22px;
	letter-spacing: .04em; text-transform: uppercase; text-align: center;
	cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.edc-home .edc-tab:hover { border-color: var(--edc-ink); }
.edc-home .edc-tab[aria-selected="true"] {
	background: var(--edc-ink); border-color: var(--edc-ink); color: var(--edc-paper);
}
.edc-home .edc-treat__panel {
	background: var(--edc-cream); border-radius: var(--edc-radius);
	padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
	min-height: 440px;
}
/*
 * The panel card (Figma 25:1726, 426x440) puts its heading and body at the top
 * and "Learn more" on the bottom edge. `justify-content: space-between` was on
 * the wrapper, which holds one visible panel and seven display:none ones — a
 * single flex item, so it did nothing, and the link sat 172px above the floor
 * instead of 48px. The rule belongs on the panel itself.
 */
.edc-home .edc-treat__panel > [data-panel] {
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 36px; flex: 1 1 auto; min-height: 0;
}
.edc-home .edc-treat__panel-txts { display: flex; flex-direction: column; gap: 8px; }
/* Panels stay in the DOM — hidden ones keep their text for crawlers;
   the global [hidden] rule above does the collapsing. */
.edc-home .edc-treat__media { border-radius: var(--edc-radius); overflow: hidden; min-height: 440px; }
.edc-home .edc-treat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   11 — Team cards, greyscale to colour (Figma 29:1842)
   -------------------------------------------------------------------------- */
.edc-home .edc-teamcard {
	position: relative; height: 408px; border-radius: var(--edc-radius);
	overflow: hidden; display: block; text-decoration: none;
}
.edc-home .edc-teamcard img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: grayscale(1); transition: filter .4s ease;
}
.edc-home .edc-teamcard:hover img,
.edc-home .edc-teamcard:focus-visible img { filter: grayscale(0); }
.edc-home .edc-teamcard__scrim {
	position: absolute; inset: 0;
	opacity: 0; transition: opacity .4s ease;
}
.edc-home .edc-teamcard__scrim::before {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	background: linear-gradient(180deg, rgba(0,0,0,0) 63.9%, rgba(0,0,0,.5) 100%);
}

.edc-home .edc-teamcard:hover .edc-teamcard__scrim,
.edc-home .edc-teamcard:focus-visible .edc-teamcard__scrim { opacity: 1; }
.edc-home .edc-teamcard__meta {
	position: absolute; inset: auto 0 0 0; padding: 12px 20px;
	display: flex; align-items: flex-start; gap: 12px;
	opacity: 0; transition: opacity .4s ease; color: #fff;
}
.edc-home .edc-teamcard:hover .edc-teamcard__meta,
.edc-home .edc-teamcard:focus-visible .edc-teamcard__meta { opacity: 1; }
.edc-home .edc-teamcard__meta .edc-h3 { color: #fff; }
.edc-home .edc-teamcard__meta svg { width: 24px; height: 24px; flex: 0 0 24px; }

/* --------------------------------------------------------------------------
   12 — Testimonial slider (Figma 32:1959)
   -------------------------------------------------------------------------- */
.edc-home .edc-testimonials {
	display: flex; align-items: center; justify-content: space-between; gap: var(--edc-gap);
}
.edc-home .edc-testimonials__track { flex: 1 1 auto; width: 100%; min-width: 0; text-align: center; }
/* hello-elementor's `p { margin-block-end: .9rem }` adds 14px under the
   attribution, making the slide 442 against Figma 32:1960's 428. */
.edc-home .edc-testimonials__slide p { margin: 0; }
.edc-home .edc-testimonials__slide {
	display: none; flex-direction: column; gap: 56px; align-items: center;
	width: 870px; max-width: 100%; margin-inline: auto;
}
.edc-home .edc-testimonials__slide.is-active { display: flex; }
.edc-home .edc-testimonials__attr {
	font-size: 20px; line-height: 28px; font-weight: 500; color: var(--edc-muted);
}
.edc-home .edc-testimonials .edc-iconbtn { flex: 0 0 40px; }

/* --------------------------------------------------------------------------
   13 — Video testimonials, inverted (Figma 32:2013)
   -------------------------------------------------------------------------- */
.edc-home .edc-videos { display: grid; grid-template-columns: 427px 1fr; gap: 126px; align-items: start; }
.edc-home .edc-videos__txts { display: flex; flex-direction: column; gap: 16px; }
.edc-home .edc-videos__list { display: flex; flex-direction: column; gap: var(--edc-gap); }
.edc-home .edc-video {
	position: relative; height: 440px; border-radius: var(--edc-radius); overflow: hidden;
}
.edc-home .edc-video img,
.edc-home .edc-video iframe,
.edc-home .edc-video video {
	width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.edc-home .edc-video__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 56px; height: 56px; padding: 12px;
}
.edc-home .edc-video__play svg { width: 32px; height: 32px; }

/* --------------------------------------------------------------------------
   14 — Insurance (Figma 32:2254)
   -------------------------------------------------------------------------- */
.edc-home .edc-insurance { display: grid; grid-template-columns: 537px 1fr; gap: 126px; align-items: start; }
.edc-home .edc-insurance__content { display: flex; flex-direction: column; gap: 40px; }
.edc-home .edc-insurance__txts { display: flex; flex-direction: column; gap: 16px; }
.edc-home .edc-insurance__logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.edc-home .edc-insurance__logo {
	height: 64px; display: flex; align-items: center; justify-content: center;
}
.edc-home .edc-insurance__logo img {
	max-width: 100%; max-height: 32px; width: auto; display: block;
	filter: grayscale(1) opacity(.55); transition: filter .25s ease;
}
.edc-home .edc-insurance__logo:hover img { filter: grayscale(1) opacity(.9); }

/* --------------------------------------------------------------------------
   15 — FAQ accordion (Figma 33:2540) — hairline rules, + / − toggle
   -------------------------------------------------------------------------- */
.edc-home .edc-faq__inner { width: 1090px; max-width: 100%; margin-inline: auto; }
.edc-home .edc-faq__txts { display: flex; flex-direction: column; gap: 16px; text-align: center; margin-bottom: 80px; }
.edc-home .edc-faq__list { display: flex; flex-direction: column; }
.edc-home .edc-faq__item {
	border-bottom: 1px solid var(--edc-rule);
	padding: 24px 34px;            /* Figma 33:2546 frame padding */
}
.edc-home .edc-faq__item:first-child { border-top: 1px solid var(--edc-rule); }
/* Figma component 33:2547: 34/24 padding, and the +/- is a 44px bordered circle
   (12px padding around a 20px Plus), not a bare glyph. That circle — not the
   32px text — sets the row height, which is why every collapsed row is 94px
   including its 1px rule. min-height carries the last pixel of that 94. */
.edc-home .edc-faq__q {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 0; min-height: 45px;  /* the 44px circle sets the row; 24+45+24+1 = 94 */
	background: none; border: 0; cursor: pointer; text-align: left;
	font-family: var(--edc-display); font-weight: 500;
	font-size: 24px; line-height: 32px; letter-spacing: -.01em; color: var(--edc-ink);
}
/* Both disclosure buttons are flex rows: label + sign. A flex item defaults to
   min-width:auto, so the label refuses to shrink below its max-content width.
   The theme also sets `white-space: nowrap` on buttons, so even once the label
   can shrink the text runs under the +/- sign rather than wrapping. Both have
   to be undone or long questions collide with the sign on narrow phones. */
.edc-home .edc-faq__q,
.edc-home .edc-area__toggle,
.edc-home .edc-faq__q > span:first-child,
.edc-home .edc-area__toggle > span:first-child { min-width: 0; white-space: normal; }

.edc-home .edc-faq__sign {
	position: relative; flex: 0 0 44px; width: 44px; height: 44px;
	border: 1px solid var(--edc-border); border-radius: 600px;
}
.edc-home .edc-faq__sign::before,
.edc-home .edc-faq__sign::after {
	content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
	margin: -1px 0 0 -10px; background: var(--edc-ink);
	transition: transform .3s ease, opacity .3s ease;
}
.edc-home .edc-faq__sign::after { transform: rotate(90deg); }
.edc-home .edc-faq__q[aria-expanded="true"] .edc-faq__sign::after {
	transform: rotate(0deg); opacity: 0;
}
/* Figma: 16px gap under the question row, answer inset 80px on the right only,
   Albert Sans Light 16/24 — not the 18/26 body size. */
.edc-home .edc-faq__a { margin-top: 16px; padding: 0 80px 0 0; }
.edc-home .edc-faq__a .edc-body-md { font-size: 16px; line-height: 24px; font-weight: 300; }
.edc-home .edc-faq__cta {
	background: var(--edc-ink); color: var(--edc-paper);
	border-radius: var(--edc-radius); margin-top: 100px;
	padding: 100px 64px; text-align: center;
	display: flex; flex-direction: column; gap: 40px; align-items: center;
}
.edc-home .edc-faq__cta .edc-h2 { color: var(--edc-paper); }
.edc-home .edc-faq__cta-txts { display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------------------------
   16 — Service area (Figma 43:373 / 45:1229)
   -------------------------------------------------------------------------- */
.edc-home .edc-area__inner {
	width: 718px; max-width: 100%; margin-inline: auto; text-align: center;
	display: flex; flex-direction: column; gap: 40px;
}
.edc-home .edc-area__txts { display: flex; flex-direction: column; gap: 16px; }
.edc-home .edc-area__disclosure { background: var(--edc-cream); border-radius: var(--edc-radius); text-align: left; }
.edc-home .edc-area__toggle {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 24px 34px; background: none; border: 0; cursor: pointer;
	font-family: var(--edc-display); font-weight: 500;
	font-size: 24px; line-height: 32px; letter-spacing: -.01em; color: var(--edc-ink);
}
.edc-home .edc-area__caret {
	flex: 0 0 46px; width: 46px; height: 46px; border-radius: 600px;
	border: 1px solid var(--edc-border);
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .3s ease;
}
.edc-home .edc-area__caret svg { width: 20px; height: 20px; }
.edc-home .edc-area__toggle[aria-expanded="true"] .edc-area__caret { transform: rotate(180deg); }
.edc-home .edc-area__cols {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
	padding: 0 34px 24px;
}
.edc-home .edc-area__cols ul { list-style: none; margin: 0; padding: 0; }
.edc-home .edc-area__cols li { font-size: 16px; line-height: 24px; font-weight: 300; }

/* --------------------------------------------------------------------------
   17 — Resources (Figma 45:536)
   -------------------------------------------------------------------------- */
.edc-home .edc-rescard {
	position: relative; height: 408px; border-radius: var(--edc-radius-lg);
	overflow: hidden; display: block; text-decoration: none;
}
.edc-home .edc-rescard img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s ease;
}
.edc-home .edc-rescard:hover img { transform: scale(1.04); }
.edc-home .edc-rescard__scrim {
	position: absolute; inset: 0;
}
.edc-home .edc-rescard__scrim::before {
	content: ''; position: absolute; inset: 0; border-radius: inherit;
	/* Figma ends this scrim at 40% black, matching 30% on the programme cards
	   and 50% on the team cards — it was opaque, so the card foot went solid. */
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
}

.edc-home .edc-rescard__meta {
	position: absolute; inset: auto 0 0 0; padding: 12px 20px;
	display: flex; align-items: flex-start; gap: 12px; color: #fff;
}
.edc-home .edc-rescard__meta .edc-h3 { color: #fff; flex: 1; }
.edc-home .edc-rescard__meta svg { width: 24px; height: 24px; flex: 0 0 24px; }

/* Shared stacked-section helper. Rows fill the column; the intro block and any
   trailing button size to their content and stay centred. */
.edc-home .edc-stack { display: flex; flex-direction: column; gap: 80px; align-items: center; }
.edc-home .edc-stack > * { width: 100%; }
.edc-home .edc-stack__txts { display: flex; flex-direction: column; gap: 12px; text-align: center; max-width: 720px; width: auto; }
/* Each stacked intro has its own measure in Figma, and the measure decides how
   many lines the body wraps to — which is what sets the section height.
   21:1512 = 544, 25:1713 = 702, 29:1843 = 740 with a 16px gap. */
.edc-home .edc-stack--programs .edc-stack__txts { max-width: 544px; }
.edc-home .edc-stack--treat    .edc-stack__txts { max-width: 702px; }
.edc-home .edc-stack--team     .edc-stack__txts { max-width: 740px; gap: 16px; }
/* 29:1843 sits at y=0 inside block-team: the section carries bottom padding only. */
.edc-home .edc-section--team { padding-top: 0; }
.edc-home .edc-stack > .edc-btn { width: auto; align-self: center; }

/* --------------------------------------------------------------------------
   Responsive — the Figma is desktop-only at 1440, so these are our decisions.
   Breakpoints match Elementor's defaults so the two systems agree.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.edc-home.edc-home { --edc-gutter: 40px; --edc-section: 80px; }
	.edc-home .edc-h1 { font-size: 56px; line-height: 64px; }
	.edc-home .edc-h2 { font-size: 40px; line-height: 48px; }
	.edc-home .edc-display-quote { font-size: 40px; line-height: 48px; }
	.edc-home .edc-care { grid-template-columns: 1fr 1fr; gap: 40px; }
	.edc-home .edc-approach { grid-template-columns: 1fr; gap: 40px; }
	.edc-home .edc-form { grid-template-columns: 1fr 1fr; gap: 40px; }
	.edc-home .edc-treat__content { grid-template-columns: 300px 1fr; }
	.edc-home .edc-treat__media { display: none; }
	.edc-home .edc-videos { grid-template-columns: 1fr; gap: 40px; }
	.edc-home .edc-insurance { grid-template-columns: 1fr; gap: 40px; }
	.edc-home .edc-approach__cards { padding: 0; }
}

@media (max-width: 880px) {
	.edc-home.edc-home { --edc-gutter: 24px; --edc-section: 64px; }
	.edc-home .edc-h1 { font-size: 40px; line-height: 48px; }
	.edc-home .edc-h2 { font-size: 32px; line-height: 40px; }
	.edc-home .edc-h3 { font-size: 20px; line-height: 28px; }
	.edc-home .edc-display-quote { font-size: 28px; line-height: 36px; }
	.edc-home .edc-lead { font-size: 18px; line-height: 26px; }
	.edc-home .edc-hero { min-height: 520px; padding-block: 64px; }
	.edc-home .edc-hero__content { width: 100%; gap: 24px; }
	/* A grid item's min-width is auto, so a child with a fixed px width sets the
	   column's floor. Relax the width itself — max-width alone will not do it. */
	.edc-home .edc-advantages { grid-template-columns: 1fr; }
	.edc-home .edc-advantages__text { min-width: 0; }
	.edc-home .edc-advantages__inner { width: 100%; }
	.edc-home .edc-advantages__media { min-height: 320px; }
	.edc-home .edc-care,
	.edc-home .edc-form { grid-template-columns: 1fr; }
	.edc-home .edc-care__main { height: 320px; }
	.edc-home .edc-care__thumb { height: 88px; }
	.edc-home .edc-form__media { height: 320px; }
	.edc-home .edc-cards3 { grid-template-columns: 1fr; }
	.edc-home .edc-approach__cards { grid-template-columns: 1fr; gap: 24px; }
	.edc-home .edc-band { height: 320px; }

	/* Tabs become a horizontal scroller on narrow screens. */
	/* min-width:0 on both the grid item and the scroller — without it the
	   overflow-x container sizes to its content and scrolls the page instead. */
	.edc-home .edc-treat__content { grid-template-columns: 1fr; min-width: 0; }
	.edc-home .edc-treat__tabs {
		flex-direction: row; overflow-x: auto; gap: 8px; min-width: 0; max-width: 100%;
		padding-bottom: 8px; scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	.edc-home .edc-tab { white-space: nowrap; flex: 0 0 auto; }
	.edc-home .edc-treat__panel { min-height: 0; padding: 32px; }

	/* Touch has no hover — program cards reveal on tap via .is-open (home.js). */
	.edc-home .edc-progcard__reveal { padding: 32px 24px; }
	.edc-home .edc-progcard.is-open .edc-progcard__reveal { opacity: 1; pointer-events: auto; }
	.edc-home .edc-progcard.is-open .edc-progcard__face,
	.edc-home .edc-progcard.is-open .edc-progcard__scrim { opacity: 0; }
	/* …and team cards show their name permanently rather than on hover. */
	.edc-home .edc-teamcard img { filter: grayscale(0); }
	.edc-home .edc-teamcard__scrim,
	.edc-home .edc-teamcard__meta { opacity: 1; }
	.edc-home .edc-testimonials { flex-direction: column; gap: 32px; }
	.edc-home .edc-testimonials__nav { display: flex; gap: 12px; }
	.edc-home .edc-faq__item { padding: 20px 0; }
	.edc-home .edc-faq__q { padding: 0; min-height: 0; font-size: 20px; line-height: 28px; }
	.edc-home .edc-faq__sign { flex: 0 0 36px; width: 36px; height: 36px; }
	.edc-home .edc-faq__a { margin-top: 12px; padding: 0; }
	.edc-home .edc-faq__cta { padding: 48px 24px; margin-top: 64px; }
	.edc-home .edc-area__toggle { padding: 20px; font-size: 20px; line-height: 28px; }
	.edc-home .edc-area__cols { grid-template-columns: 1fr; gap: 8px; padding: 0 20px 20px; }
	.edc-home .edc-insurance__logos { grid-template-columns: repeat(2, 1fr); }
	.edc-home .edc-stack { gap: 48px; }
	.edc-home .edc-videos { gap: 32px; }
	.edc-home .edc-video { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
	.edc-home *,
	.edc-home *::before,
	.edc-home *::after {
		transition-duration: .01ms !important; animation-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Elementor container bridging
   Containers ignore `_css_classes`, so the two mixed sections are targeted by
   `_element_id` instead. Elementor emits --width for them correctly; a flex
   item still shrinks past it unless pinned, which is all these rules do.
   -------------------------------------------------------------------------- */
.edc-home #edc-hero-col { flex: 0 0 auto; max-width: 100%; }
.edc-home #edc-form-col { flex: 0 0 var(--width, 548px); min-width: 0; }
.edc-home #edc-form-media { flex: 1 1 auto; min-width: 0; }

/* Elementor adds margin between stacked widgets; inside our sections the gap
   is owned by flex/grid, so neutralise it. */
.edc-home .elementor-widget-html .elementor-widget-container > * { margin: 0; }

/* --------------------------------------------------------------------------
   Missing-image placeholder
   Deliberately loud: an unassigned slot must be impossible to miss in review.
   Sizing is inherited from the slot it sits in, so it never inflates a row.
   -------------------------------------------------------------------------- */
.edc-home .edc-placeholder {
	display: flex; align-items: center; justify-content: center; text-align: center;
	width: 100%; height: 100%; min-height: 100%; padding: 12px;
	background: repeating-linear-gradient(45deg, #f1e6df, #f1e6df 10px, #e6d8cf 10px, #e6d8cf 20px);
	color: var(--edc-ink);
	font: 600 12px/1.4 var(--edc-body); letter-spacing: .04em; text-transform: uppercase;
}
/* Contexts with a known box: keep the placeholder inside it. */
.edc-home .edc-trust__item { min-height: 64px; }
.edc-home .edc-trust__item    .edc-placeholder { min-height: 32px; font-size: 10px; padding: 4px; }
.edc-home .edc-insurance__logo .edc-placeholder { min-height: 32px; font-size: 10px; padding: 4px; }
.edc-home .edc-progcard .edc-placeholder,
.edc-home .edc-teamcard .edc-placeholder,
.edc-home .edc-rescard  .edc-placeholder { min-height: 408px; }
.edc-home .edc-band     .edc-placeholder { min-height: 600px; }

@media (max-width: 880px) {
	.edc-home #edc-form-col,
	.edc-home #edc-form-media { flex: 1 1 auto; width: 100%; max-width: 100%; }
}

/* ==========================================================================
   Header — Figma 12:217
   ========================================================================== */
.edc-home .edc-header { background: var(--edc-paper); }
.edc-home .edc-header__inner {
	max-width: var(--edc-max); margin-inline: auto;
	padding: 16px var(--edc-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.edc-home .edc-header__logo { display: block; flex: 0 0 auto; }
.edc-home .edc-header__logo img { display: block; width: 137px; height: auto; }
.edc-home .edc-header__nav { display: flex; align-items: center; gap: 56px; }
.edc-home .edc-nav {
	display: flex; align-items: center; gap: 28px;
	list-style: none; margin: 0; padding: 0;
}
.edc-home .edc-nav__item > a {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--edc-body); font-weight: 300; font-size: 16px; line-height: 24px;
	color: var(--edc-ink); text-decoration: none; white-space: nowrap;
}
.edc-home .edc-nav__item > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.edc-home .edc-nav__caret { display: inline-flex; }
.edc-home .edc-nav__caret svg { width: 16px; height: 16px; }
/* The header pill is smaller than the page buttons: 12/16 padding, 12px text. */
.edc-home .edc-header__cta {
	padding: 12px 16px; gap: 8px;
	font-size: 12px; line-height: 20px; letter-spacing: .04em;
}
.edc-home .edc-header__cta svg { width: 14px; height: 14px; flex: 0 0 14px; }
.edc-home .edc-header__burger {
	display: none; flex-direction: column; gap: 5px;
	background: none; border: 0; padding: 8px; cursor: pointer;
}
.edc-home .edc-header__burger span {
	display: block; width: 22px; height: 2px; background: var(--edc-ink);
	transition: transform .3s ease, opacity .3s ease;
}
.edc-home .edc-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.edc-home .edc-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.edc-home .edc-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Closing CTA — Figma 45:632
   ========================================================================== */
.edc-home .edc-cta { position: relative; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.edc-home .edc-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.edc-home .edc-cta__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.edc-home .edc-cta__content {
	position: relative; z-index: 1; width: 716px; max-width: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 40px;
	padding: 64px var(--edc-gutter); text-align: center;
}
.edc-home .edc-cta__heading {
	font-family: var(--edc-display); font-weight: 500;
	font-size: 56px; line-height: 64px; letter-spacing: -.02em;
	color: var(--edc-paper); margin: 0;
}
.edc-home .edc-cta__btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.edc-home .edc-cta__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.edc-home .edc-btn--outline {
	background: transparent; color: var(--edc-paper);
	border: 1px solid var(--edc-paper);
}
.edc-home .edc-btn--outline:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.edc-home .edc-cta__caption {
	font-size: 14px; line-height: 20px; font-weight: 400;
	color: var(--edc-paper); margin: 0;
}

/* ==========================================================================
   Footer — Figma 45:1071
   ========================================================================== */
.edc-home .edc-footer { background: var(--edc-paper); }
.edc-home .edc-footer__inner {
	max-width: var(--edc-max); margin-inline: auto;
	padding: 64px var(--edc-gutter) 40px;
}
.edc-home .edc-footer__top { display: flex; justify-content: space-between; gap: 64px; padding-bottom: 40px; }
.edc-home .edc-footer__brand { display: flex; flex-direction: column; gap: 64px; }
.edc-home .edc-footer__logo { display: block; width: 221px; height: auto; }
.edc-home .edc-footer__socials { display: flex; gap: 8px; }
.edc-home .edc-footer__social {
	width: 48px; height: 48px; border-radius: 100px;
	border: 1px solid var(--edc-border); color: var(--edc-ink);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .25s ease, color .25s ease;
}
.edc-home .edc-footer__social:hover { background: var(--edc-ink); color: var(--edc-paper); }
.edc-home .edc-footer__social svg { width: 20px; height: 20px; }
.edc-home .edc-footer__cols { display: flex; gap: 64px; flex: 1 1 auto; justify-content: space-between; }
.edc-home .edc-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.edc-home .edc-footer__heading {
	font-family: var(--edc-display); font-weight: 500;
	font-size: 24px; line-height: 32px; color: var(--edc-muted);
	margin: 0 0 24px;
}
.edc-home .edc-footer__col a,
.edc-home .edc-footer__col span {
	font-size: 16px; line-height: 24px; font-weight: 300;
	color: var(--edc-ink); text-decoration: none;
}
.edc-home .edc-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.edc-home .edc-footer__contact li { display: flex; align-items: flex-start; gap: 12px; }
.edc-home .edc-footer__contact svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
.edc-home .edc-footer__email { text-decoration: underline; text-underline-offset: 3px; }
/* Figma 45:1071 stacks the footer at a 40px gap: logo-items, the service-area
   bar, the rule, then the trust row. The bar had no space above it at all. */
.edc-home .edc-footer__areas { margin-top: 40px; margin-bottom: 40px; }
/* 45:1036 is py-24 around a 44px circle = 92, without the FAQ row's extra pixel. */
.edc-home .edc-footer__areas .edc-area__toggle { min-height: 44px; padding: 24px 34px; }
.edc-home .edc-footer__rule { border: 0; border-top: 1px solid var(--edc-rule); height: 4px; margin: 0 0 40px; }
.edc-home .edc-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.edc-home .edc-footer__legal p { max-width: 537px; margin: 0; }
.edc-home .edc-footer__badges { display: flex; align-items: center; gap: 24px; }
/* Figma sizes these to a common 61px WIDTH, not height — their heights vary
   (61x66, 61x61, 61x38.6, 61x13). Constraining height instead blows the wide
   DHCS mark up to several times the others. */
.edc-home .edc-footer__badges img { display: block; width: 61px; height: auto; max-height: 66px; object-fit: contain; }

@media (max-width: 1200px) {
	.edc-home .edc-footer__top { flex-direction: column; gap: 40px; }
	.edc-home .edc-footer__cols { flex-wrap: wrap; gap: 40px; }
}

/* The desktop nav needs ~1230px before it collides with the viewport edge, so
   the burger has to take over well above the old 880px breakpoint. Measured:
   the nav's right edge sits at 1230px — clean at 1280, overflowing below. */
@media (max-width: 1279px) {
	/* Header collapses to a burger; the nav becomes a drop-down panel. */
	.edc-home .edc-header__inner { position: relative; }
	.edc-home .edc-header__burger { display: flex; }
	.edc-home .edc-header__nav {
		display: none; position: absolute; inset: 100% 0 auto 0; z-index: 20;
		flex-direction: column; align-items: stretch; gap: 16px;
		background: var(--edc-paper); padding: 16px var(--edc-gutter) 24px;
		border-top: 1px solid var(--edc-rule);
		box-shadow: 0 12px 24px rgba(43, 28, 19, .08);
	}
	.edc-home .edc-header__nav.is-open { display: flex; }
	.edc-home .edc-nav { flex-direction: column; align-items: stretch; gap: 4px; }
	.edc-home .edc-nav__item > a { justify-content: space-between; padding: 10px 0; }
	.edc-home .edc-header__cta { justify-content: center; }

}

@media (max-width: 880px) {
	.edc-home .edc-cta__heading { font-size: 32px; line-height: 40px; }
	.edc-home .edc-cta__content { gap: 24px; padding: 48px var(--edc-gutter); }
	.edc-home .edc-cta__group { flex-direction: column; width: 100%; }
	.edc-home .edc-cta__group .edc-btn { width: 100%; }
	.edc-home .edc-footer__cols { flex-direction: column; gap: 32px; }
	.edc-home .edc-footer__brand { gap: 32px; }
	.edc-home .edc-footer__legal { flex-direction: column; align-items: flex-start; gap: 24px; }
	.edc-home .edc-footer__badges { flex-wrap: wrap; gap: 16px; }
	.edc-home .edc-footer__badges img { width: 52px; }
}

/* Dropdown parents carry no destination in the site menu, so they render as
   text rather than a link to "#". Keep them visually identical to the links. */
.edc-home .edc-nav__label {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--edc-body); font-weight: 300; font-size: 16px; line-height: 24px;
	color: var(--edc-ink); white-space: nowrap; cursor: default;
}
@media (max-width: 880px) {
	.edc-home .edc-nav__label { justify-content: space-between; padding: 10px 0; }
}