/* ==========================================================================
   Goody Blocks — section widget styles.

   The brand lives here, not in Elementor controls. Editors get content fields and
   a handful of semantic variants; every colour, face and radius is fixed below so
   a page cannot drift off-brand.

   Depends on goody-tokens.css for custom properties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section shell
   -------------------------------------------------------------------------- */

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

.goody-section {
	position: relative;
	font-family: var(--goody-font-body);
	color: var(--goody-text-body);
}

/* Elementor wraps every widget; strip the wrapper so section bands go edge to edge. */
.elementor-widget-goody-hero .elementor-widget-container,
.elementor-widget-goody-trust-bar .elementor-widget-container,
.elementor-widget-goody-benefits .elementor-widget-container,
.elementor-widget-goody-pricing .elementor-widget-container,
.elementor-widget-goody-commitment .elementor-widget-container,
.elementor-widget-goody-promise .elementor-widget-container,
.elementor-widget-goody-financing-banner .elementor-widget-container,
.elementor-widget-goody-services-list .elementor-widget-container,
.elementor-widget-goody-referral-banner .elementor-widget-container,
.elementor-widget-goody-faq .elementor-widget-container,
.elementor-widget-goody-locations .elementor-widget-container,
.elementor-widget-goody-contact-form .elementor-widget-container {
	padding: 0;
	margin: 0;
}

.goody-container {
	max-width: var(--goody-container-max);
	margin-inline: auto;
	padding-inline: var(--goody-container-pad);
}

/* ---- surfaces: cream page, warm panel, and the solid colour bands ---- */
.goody-surface--page { background: var(--goody-cream-100); }
.goody-surface--panel { background: var(--goody-cream-50); }
.goody-surface--dark { background: var(--goody-teal-700); }
.goody-surface--teal { background: var(--goody-teal-500); }
.goody-surface--sand { background: var(--goody-gray-250); }
.goody-surface--none { background: transparent; }

/* The recurring "elevated panel" motif — a rounded warm rectangle inside a section. */
.goody-panel {
	background: var(--goody-cream-50);
	border-radius: var(--goody-radius-xl);
	padding: 56px clamp(20px, 4vw, 60px);
}

/* --------------------------------------------------------------------------
   2. Shared typography atoms
   -------------------------------------------------------------------------- */

/* Eyebrow: tracked uppercase label with the 3px gold rule. Always paired with a heading. */
.goody-eyebrow {
	margin: 0 0 10px;
	width: fit-content;
	padding-bottom: 7px;
	border-bottom: 3px solid var(--goody-gold-300);
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: var(--goody-text-eyebrow);
	letter-spacing: var(--goody-tracking-eyebrow);
	color: var(--goody-teal-700);
	text-transform: uppercase;
}

.goody-heading {
	margin: 12px 0 8px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: var(--goody-text-h2);
	line-height: var(--goody-leading-heading);
	letter-spacing: var(--goody-tracking-normal);
	color: var(--goody-teal-700);
	text-wrap: pretty;
}

/* Used where the heading itself carries the gold rule instead of an eyebrow. */
.goody-heading--underlined {
	width: fit-content;
	margin: 0 auto 14px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--goody-gold-300);
}

.goody-section__intro {
	margin: 0;
	font-size: var(--goody-text-body-lg);
	line-height: var(--goody-leading-body-loose);
	color: var(--goody-gray-800);
}

.goody-subtitle {
	margin: 0 0 20px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: 20px;
	color: var(--goody-teal-700);
}

.goody-body {
	margin: 0 0 20px;
	font-size: var(--goody-text-body-lg);
	line-height: var(--goody-leading-body-loose);
	color: var(--goody-gray-800);
}

.goody-section__header { margin-bottom: 42px; }
.goody-section__header--center { text-align: center; }
.goody-section__header--center .goody-eyebrow { margin-inline: auto; }
.goody-section__header--left { text-align: left; }

/* On dark bands the trio flips to gold + white + warm gray. */
.goody-section__header--on-dark .goody-eyebrow { color: var(--goody-gold-300); }
.goody-section__header--on-dark .goody-heading { color: var(--goody-white); }
.goody-section__header--on-dark .goody-section__intro { color: var(--goody-gray-250); }

/* --------------------------------------------------------------------------
   3. Buttons

   Hover is a colour change only — no lift. (Cards lift; buttons never do.)
   -------------------------------------------------------------------------- */

.goody-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: 1.5px solid transparent;
	border-radius: var(--goody-radius-md);
	padding: 16px 28px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: var(--goody-text-button);
	line-height: 1.1;
	letter-spacing: var(--goody-tracking-normal);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--goody-duration-fast) ease,
	            border-color var(--goody-duration-fast) ease,
	            color var(--goody-duration-fast) ease,
	            filter var(--goody-duration-fast) ease;
}

.goody-btn svg { flex: 0 0 auto; }

.goody-btn--primary {
	background: var(--goody-rust-600);
	border-color: var(--goody-rust-600);
	color: var(--goody-white);
}
.goody-btn--primary:hover,
.goody-btn--primary:focus-visible {
	background: var(--goody-orange-500);
	border-color: var(--goody-orange-500);
	color: var(--goody-white);
}

.goody-btn--dark {
	background: var(--goody-teal-700);
	border-color: var(--goody-teal-700);
	color: var(--goody-white);
}
.goody-btn--dark:hover,
.goody-btn--dark:focus-visible {
	background: var(--goody-teal-500);
	border-color: var(--goody-teal-500);
	color: var(--goody-white);
}

.goody-btn--light {
	background: var(--goody-white);
	border-color: var(--goody-white);
	color: var(--goody-teal-700);
}
.goody-btn--light:hover,
.goody-btn--light:focus-visible { filter: brightness(0.94); }

.goody-btn--outline {
	background: transparent;
	border-color: var(--goody-teal-700);
	color: var(--goody-teal-700);
}
.goody-btn--outline:hover,
.goody-btn--outline:focus-visible {
	background: var(--goody-teal-700);
	color: var(--goody-white);
}

.goody-btn--sm {
	padding: 10px 18px;
	border-radius: var(--goody-radius-sm);
	font-size: 14.5px;
	font-weight: 700;
}

.goody-btn--block {
	display: flex;
	width: 100%;
	padding: 13px;
	font-size: 16px;
	font-weight: 700;
	border-radius: 8px;
}

.goody-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* --------------------------------------------------------------------------
   4. Icon tiles — pastel tint behind a saturated icon.
      The class carries both tint and icon colour, so no hex is ever inlined.
   -------------------------------------------------------------------------- */

.goody-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: var(--goody-radius-sm);
}

.goody-icon-tile--sand   { background: var(--goody-accent-sand-tint);   color: var(--goody-accent-sand); }
.goody-icon-tile--teal   { background: var(--goody-accent-teal-tint);   color: var(--goody-accent-teal); }
.goody-icon-tile--red    { background: var(--goody-accent-red-tint);    color: var(--goody-accent-red); }
.goody-icon-tile--orange { background: var(--goody-accent-orange-tint); color: var(--goody-accent-orange); }
.goody-icon-tile--rust   { background: var(--goody-accent-rust-tint);   color: var(--goody-accent-rust); }

/* Solid navy tile used inside benefit cards — larger, gold icon, no tint. */
.goody-icon-tile--dark {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var(--goody-teal-700);
	color: var(--goody-gold-300);
}

/* An uploaded icon image, drawn into the same box a library SVG would occupy. The size
   comes through as --goody-icon-size from the widget, so one rule covers every call site
   (17px trust bar → 42px values tile). `contain` keeps non-square artwork undistorted, and
   max-width:none plus the .goody-section prefix are both needed to beat Elementor's
   `.elementor img` rule — see the image-specificity note further down. */
.goody-section .goody-icon-img {
	width: var(--goody-icon-size, 18px);
	height: var(--goody-icon-size, 18px);
	max-width: none;
	flex: 0 0 auto;
	display: block;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.goody-section--hero {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding-block: 72px;
}

/* No photo chosen yet — fall back to the scrim colour so text stays legible. */
.goody-section--hero-nobg { background-color: var(--goody-teal-900); }

.goody-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: 56px;
	align-items: center;
}

.goody-hero__kicker {
	margin: 0 0 18px;
	font-family: var(--goody-font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: var(--goody-tracking-normal);
	color: var(--goody-white);
}

.goody-hero__heading {
	margin: 0 0 22px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: var(--goody-text-h1);
	line-height: var(--goody-leading-tight);
	letter-spacing: var(--goody-tracking-normal);
	color: var(--goody-white);
	text-wrap: pretty;
}

.goody-hero__sub {
	margin: 0 0 30px;
	font-size: var(--goody-text-body-xl);
	line-height: var(--goody-leading-body);
	color: var(--goody-white);
}

.goody-hero__rule {
	height: 1px;
	max-width: 665px;
	margin: 30px 0 20px;
	background: var(--goody-gray-400);
}

.goody-hero__rating {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* .goody-section prefix required — see the image-specificity note above. Without it
   Elementor's `height:auto` wins and the logo renders at its natural size. */
.goody-section .goody-hero__rating-logo {
	height: 30px;
	width: auto;
	max-width: none;
	display: block;
	flex: 0 0 auto;
}

.goody-hero__rating-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* The brand uses the Unicode star glyph, never an icon or emoji. */
.goody-hero__stars {
	color: var(--goody-gold-300);
	font-size: 22px;
	letter-spacing: 2px;
	line-height: 1;
}

.goody-hero__rating-count {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--goody-white);
}

/* IMPORTANT — image specificity.
   Elementor ships `.elementor img { border-radius:0; height:auto; max-width:100% }` in
   custom-frontend.css, at specificity (0,1,1) and loaded AFTER this file. A single class
   like `.goody-hero__media img` therefore loses. Every rule below that targets an <img>
   is prefixed with `.goody-section` to clear that bar — do the same for any new image
   rule, or it will silently have no effect. Corner rounding additionally lives on the
   wrapper so it also covers the placeholder. */
.goody-hero__media {
	border-radius: 18px;
	overflow: hidden;
}

.goody-section .goody-hero__media img,
.goody-hero__media-placeholder {
	width: 100%;
	display: block;
}

.goody-hero__media-placeholder {
	aspect-ratio: 512 / 435;
	min-height: 300px;
	background: var(--goody-gray-350);
}

.goody-section .goody-hero__media img {
	height: auto;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   6. Trust bar
   -------------------------------------------------------------------------- */

.goody-section--trust-bar { padding-block: 16px; }

.goody-trust-bar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goody-trust-bar__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.goody-trust-bar__label {
	font-family: var(--goody-font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--goody-white);
}

/* --------------------------------------------------------------------------
   7. Benefits grid
   -------------------------------------------------------------------------- */

.goody-section--benefits { padding-block: 40px; }

.goody-benefits__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--goody-card-min, 280px), 1fr));
	gap: 26px;
}

/* Flat at rest on the tinted panel — the shadow exists only on hover. */
.goody-card {
	background: var(--goody-surface-card);
	border-radius: var(--goody-radius-md);
	padding: 24px;
	transition: transform var(--goody-duration-standard) ease,
	            box-shadow var(--goody-duration-standard) ease;
}

.goody-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--goody-shadow-card-hover);
}

.goody-card__title {
	margin: 18px 0 10px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: var(--goody-text-h3);
	color: var(--goody-teal-700);
}

.goody-card__body {
	margin: 0 0 20px;
	font-size: var(--goody-text-body-md);
	line-height: var(--goody-leading-body);
	color: var(--goody-gray-600);
}

/* --------------------------------------------------------------------------
   8. Pricing
   -------------------------------------------------------------------------- */

.goody-section--pricing { padding-block: 78px; }
.goody-section--pricing .goody-section__header { margin-bottom: 46px; }

.goody-pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 34px;
	align-items: start;
}

.goody-plan {
	position: relative;
	background: var(--goody-surface-card);
	border-radius: var(--goody-radius-lg);
	padding: 32px 30px;
	transition: transform var(--goody-duration-standard) ease;
}

.goody-plan:hover { transform: translateY(-4px); }

/* Inset shadow rather than a real border, so the featured card doesn't shift 2px. */
.goody-plan--featured { box-shadow: inset 0 0 0 2px var(--goody-gold-300); }

.goody-plan__badge {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--goody-rust-600);
	border-radius: var(--goody-radius-sm);
	padding: 7px 14px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--goody-white);
	white-space: nowrap;
}

.goody-plan__title {
	margin: 0 0 8px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: 23px;
	color: var(--goody-teal-700);
}

.goody-plan__tagline {
	margin: 0 0 14px;
	font-family: var(--goody-font-display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: var(--goody-teal-700);
}

.goody-plan__price {
	margin: 0 0 4px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.1;
	color: var(--goody-teal-700);
}

.goody-plan__unit {
	font-size: 17px;
	font-weight: 600;
	color: var(--goody-gray-700);
}

.goody-plan__note {
	margin: 0 0 24px;
	font-size: var(--goody-text-body-sm);
	color: var(--goody-gray-600);
}

.goody-plan__features {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.goody-plan__features li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: var(--goody-text-body-md);
	color: var(--goody-gray-900);
}

.goody-plan__features svg {
	flex: 0 0 auto;
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   9. Media + text split
   -------------------------------------------------------------------------- */

.goody-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: 60px;
	align-items: center;
}

.goody-split__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.goody-split--media-right .goody-split__media { order: 2; }

.goody-section .goody-split__image {
	width: 100%;
	height: auto;
	display: block;
}

/* A YouTube thumbnail stands in when no image was chosen. hqdefault (the only size YouTube
   guarantees) is 4:3 with letterbox bars, so crop to 16:9 — that matches maxresdefault and
   keeps the box the same height whichever file the fallback lands on. */
.goody-section .goody-video-poster {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.goody-split__placeholder {
	width: 100%;
	aspect-ratio: 610 / 560;
	min-height: 320px;
	background: var(--goody-gray-100);
}

/* A real <button> — it opens a dialog, so it must be focusable and keyboard-operable.

   IMPORTANT — button specificity. hello-elementor's reset.css styles bare buttons:
     [type=submit],button { background:transparent; border:1px solid #c36; border-radius:3px; padding:.5rem 1rem }
     button:focus, button:hover { background-color:#c36; color:#fff }
   That hover/focus rule is (0,1,1), which outranks a single class. So every rule for our
   icon buttons is scoped through its parent — (0,2,0) — and hover/focus are restated
   explicitly rather than inherited. Do the same for any new <button> in these widgets. */
.goody-split__media .goody-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--goody-rust-600);
	color: var(--goody-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	white-space: normal;
	-webkit-appearance: none;
	appearance: none;
	/* Icon-only buttons scale instead of lifting. */
	transition: transform var(--goody-duration-standard) ease,
	            background var(--goody-duration-fast) ease;
}

.goody-split__media .goody-play:hover,
.goody-split__media .goody-play:focus,
.goody-split__media .goody-play:focus-visible {
	background: var(--goody-orange-500);
	border: 0;
	color: var(--goody-white);
	transform: translate(-50%, -50%) scale(1.08);
}

.goody-split__media .goody-play:focus-visible {
	outline: 3px solid var(--goody-gold-300);
	outline-offset: 3px;
}

/* Focus without keyboard (i.e. after the modal closes and hands focus back) should not
   show the ring, but must still not inherit the theme's pink. */
.goody-split__media .goody-play:focus:not(:focus-visible) { outline: none; }

/* Visually hidden but present for screen readers — the play button's accessible name. */
.goody-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   9b. Video lightbox

   The iframe / <video> is injected on open and removed on close, so nothing is
   requested from YouTube until a visitor asks for it, and closing genuinely stops
   playback instead of hiding a still-playing element.
   -------------------------------------------------------------------------- */

.goody-video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
}

.goody-video-modal[hidden] { display: none; }

.goody-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 58, 53, .88);
	border: 0;
}

.goody-video-modal__panel {
	position: relative;
	width: 100%;
	max-width: 1100px;
}

.goody-video-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--goody-radius-lg);
	overflow: hidden;
}

/* .goody-section prefix is not available here (the modal sits outside it), so these are
   scoped by the modal class instead — still (0,2,1), which clears `.elementor img`. */
.goody-video-modal__frame iframe,
.goody-video-modal__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	display: block;
}

/* Scoped through .goody-video-modal for the same button-specificity reason as .goody-play. */
.goody-video-modal .goody-video-modal__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	width: 44px;
	height: 44px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--goody-rust-600);
	color: var(--goody-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--goody-duration-fast) ease;
}

.goody-video-modal .goody-video-modal__close:hover,
.goody-video-modal .goody-video-modal__close:focus,
.goody-video-modal .goody-video-modal__close:focus-visible {
	background: var(--goody-orange-500);
	border: 0;
	color: var(--goody-white);
}

.goody-video-modal .goody-video-modal__close:focus-visible {
	outline: 3px solid var(--goody-gold-300);
	outline-offset: 2px;
}

.goody-video-modal .goody-video-modal__close:focus:not(:focus-visible) { outline: none; }

@media (max-width: 600px) {
	/* Keep the close button on-screen once the panel reaches the viewport edge. */
	.goody-video-modal__close {
		top: -52px;
		right: 0;
	}
}

/* Set while a modal is open so the page behind cannot scroll. */
body.goody-modal-open { overflow: hidden; }

.goody-section--commitment .goody-heading {
	margin: 16px 0 12px;
	font-size: var(--goody-text-h2-lg);
}

.goody-section--commitment .goody-section__header { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. Promise / values
   -------------------------------------------------------------------------- */

.goody-section--promise .goody-panel { padding: 64px clamp(20px, 4vw, 56px); }

.goody-promise__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 46px;
}

.goody-section--promise .goody-heading--underlined { font-size: var(--goody-text-h2-lg); }

.goody-promise__header .goody-section__intro {
	font-size: var(--goody-text-body-lg);
	line-height: 1.55;
}

.goody-promise__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 34px;
}

.goody-promise__tile {
	background: var(--goody-teal-700);
	border-radius: 8px;
	min-height: 200px;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	transition: transform var(--goody-duration-standard) ease;
}

.goody-promise__item:hover .goody-promise__tile { transform: translateY(-4px); }

.goody-promise__title {
	margin: 0;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: var(--goody-text-h3);
	color: var(--goody-white);
	text-align: center;
}

/* The caption sits below the tile — this is what separates values from benefit cards. */
.goody-promise__body {
	margin: 22px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--goody-gray-800);
	text-align: center;
}

/* --------------------------------------------------------------------------
   11. Financing banner — the system's only gradient, used once per page.
   -------------------------------------------------------------------------- */

.goody-banner {
	background: var(--goody-gradient-banner);
	border-radius: 16px;
	padding: 34px clamp(24px, 3vw, 44px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

.goody-banner__price {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1.1;
	color: var(--goody-gold-300);
}

.goody-banner__unit {
	font-size: 19px;
	font-weight: 600;
	color: var(--goody-white);
}

.goody-banner__copy {
	flex: 1 1 380px;
	min-width: 280px;
}

.goody-banner__heading {
	margin: 0 0 8px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: 25px;
	color: var(--goody-white);
}

.goody-banner__body {
	margin: 0;
	font-size: 16px;
	line-height: var(--goody-leading-body);
	color: var(--goody-gray-100);
}

.goody-banner .goody-btn { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   12. Services list
   -------------------------------------------------------------------------- */

.goody-section--services .goody-section__header { margin-bottom: 44px; }

.goody-services__list {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px 60px;
}

.goody-services__item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.goody-services__item svg { flex: 0 0 auto; }

.goody-services__item span {
	font-family: var(--goody-font-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--goody-gray-900);
}

/* --------------------------------------------------------------------------
   13. Referral banner
   -------------------------------------------------------------------------- */

.goody-referral {
	background: var(--goody-teal-700);
	border-radius: var(--goody-radius-xl);
	padding: 60px clamp(24px, 4vw, 60px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 50px;
	align-items: center;
}

.goody-referral__heading {
	margin: 0 0 24px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: clamp(30px, 3vw, 42px);
	line-height: var(--goody-leading-heading);
	letter-spacing: var(--goody-tracking-normal);
	color: var(--goody-white);
}

.goody-referral__body {
	margin: 0 0 20px;
	font-size: var(--goody-text-body-lg);
	line-height: var(--goody-leading-body-loose);
	color: var(--goody-gray-100);
}

/* Rounding on the wrapper, not the <img> — see the note on .goody-hero__media. */
.goody-referral__media {
	border-radius: var(--goody-radius-lg);
	overflow: hidden;
}

.goody-section .goody-referral__image,
.goody-referral__placeholder {
	width: 100%;
	display: block;
}

.goody-section .goody-referral__image { height: auto; }

.goody-referral__placeholder {
	aspect-ratio: 16 / 10;
	background: var(--goody-teal-900);
}

/* --------------------------------------------------------------------------
   14. FAQ accordion

   Native <details>/<summary>: works without JS, keyboard and SR accessible for
   free. The JS only enforces one-open-at-a-time.
   -------------------------------------------------------------------------- */

.goody-faq {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 60px;
	align-items: start;
}

.goody-section--faq .goody-heading {
	margin: 18px 0 20px;
	font-size: var(--goody-text-h2-lg);
}

.goody-section--faq .goody-section__header { margin-bottom: 0; }

.goody-faq__pitch {
	margin: 0 0 32px;
	font-family: var(--goody-font-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.45;
	color: var(--goody-gray-600);
}

.goody-faq__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.goody-faq__item {
	background: var(--goody-cream-50);
	border-radius: var(--goody-radius-md);
	overflow: hidden;
}

/* The open item takes a slightly darker warm fill. */
.goody-faq__item[open] { background: var(--goody-gray-150); }

.goody-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	cursor: pointer;
	font-family: var(--goody-font-body);
	font-size: var(--goody-text-body-xl);
	color: var(--goody-gray-900);
	list-style: none;
}

/* Kill the native disclosure triangle in every engine. */
.goody-faq__q::-webkit-details-marker { display: none; }
.goody-faq__q::marker { content: ''; }

.goody-faq__q:focus-visible {
	outline: 3px solid var(--goody-gold-300);
	outline-offset: -3px;
}

/* +/– glyph, never a chevron. */
.goody-faq__sign {
	flex: 0 0 auto;
	font-family: var(--goody-font-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	color: var(--goody-gray-900);
}

.goody-faq__sign::before { content: '+'; }
.goody-faq__item[open] .goody-faq__sign::before { content: '\2013'; }

.goody-faq__a {
	padding: 20px 26px 24px;
	border-top: 1px solid rgba(42, 36, 29, .18);
	font-size: var(--goody-text-body-lg);
	line-height: 1.55;
	color: var(--goody-gray-800);
}

/* --------------------------------------------------------------------------
   15. Locations
   -------------------------------------------------------------------------- */

.goody-locations__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
}

.goody-location {
	position: relative;
	min-height: 265px;
	padding: 26px;
	border-radius: 12px;
	overflow: hidden;
	/* Scrim + photo are set inline; this is the no-photo fallback. */
	background-color: var(--goody-teal-900);
	background-size: cover;
	background-position: center;
	transition: transform var(--goody-duration-standard) ease;
}

.goody-location:hover { transform: translateY(-4px); }

.goody-location__city {
	margin: 0 0 12px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.02em;
	color: var(--goody-white);
}

.goody-location__name,
.goody-location__address,
.goody-location__phone {
	margin: 0 0 12px;
	font-family: var(--goody-font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--goody-white);
}

.goody-location__address { line-height: 1.4; }

.goody-location__phone a,
.goody-location__map {
	color: var(--goody-white);
	text-decoration: none;
	font-family: var(--goody-font-display);
	font-weight: 700;
	font-size: 16px;
	transition: color var(--goody-duration-fast) ease;
}

.goody-location__phone a:hover,
.goody-location__map:hover,
.goody-location__map:focus-visible { color: var(--goody-gold-300); }

/* --------------------------------------------------------------------------
   16. Contact + booking form panel
   -------------------------------------------------------------------------- */

.goody-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 60px;
	align-items: start;
}

.goody-section--contact .goody-heading {
	margin: 18px 0 20px;
	font-size: var(--goody-text-h2-lg);
}

.goody-section--contact .goody-section__header { margin-bottom: 0; }

.goody-form-panel {
	background: var(--goody-teal-500);
	border-radius: var(--goody-radius-form);
	padding: 36px clamp(20px, 3vw, 40px);
	scroll-margin-top: 100px;
}

.goody-form-panel__heading {
	margin: 0 0 4px;
	text-align: center;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: clamp(26px, 2.4vw, 33px);
	color: var(--goody-gold-300);
}

.goody-form-panel__desc {
	margin: 0 0 24px;
	text-align: center;
	font-family: var(--goody-font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--goody-white);
}

.goody-form-panel__notice {
	margin: 0;
	padding: 18px;
	border: 1px dashed var(--goody-gold-300);
	border-radius: var(--goody-radius-md);
	text-align: center;
	font-size: var(--goody-text-body-md);
	color: var(--goody-white);
}

/* ---- WPForms inside the panel -----------------------------------------
   The plugin owns the markup; these rules re-skin it to the design's borderless
   fields with a gold focus ring. Scoped to .goody-form-panel so forms elsewhere
   on the site are untouched.
   ---------------------------------------------------------------------- */

.goody-form-panel .wpforms-container,
.goody-form-panel .wpforms-container-full { margin: 0; }

.goody-form-panel .wpforms-form .wpforms-field {
	padding: 0 0 16px;
}

/* Labels are visually hidden, not removed: the design shows placeholders only, but
   the label must stay in the accessibility tree. */
.goody-form-panel .wpforms-form .wpforms-field-label,
.goody-form-panel .wpforms-form .wpforms-field-sublabel {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.goody-form-panel .wpforms-form input[type='text'],
.goody-form-panel .wpforms-form input[type='email'],
.goody-form-panel .wpforms-form input[type='tel'],
.goody-form-panel .wpforms-form input[type='url'],
.goody-form-panel .wpforms-form input[type='number'],
.goody-form-panel .wpforms-form select,
.goody-form-panel .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: 8px;
	padding: 16px 18px;
	background: var(--goody-white);
	font-family: var(--goody-font-body);
	font-size: var(--goody-text-body-lg);
	color: var(--goody-gray-900);
	box-shadow: none;
	outline: none;
}

.goody-form-panel .wpforms-form textarea { resize: vertical; }

.goody-form-panel .wpforms-form input:focus,
.goody-form-panel .wpforms-form select:focus,
.goody-form-panel .wpforms-form textarea:focus {
	box-shadow: 0 0 0 3px var(--goody-gold-300);
	outline: none;
}

.goody-form-panel .wpforms-form ::placeholder {
	color: var(--goody-gray-500);
	opacity: 1;
}

/* Two fields side by side when WPForms is set to 50% columns. */
.goody-form-panel .wpforms-form .wpforms-one-half { width: calc(50% - 8px); }
.goody-form-panel .wpforms-form .wpforms-first { margin-left: 0; margin-right: 16px; }

/* Consent checkbox: dense fine print, well under body size — the one place the tone
   shifts from marketing to compliance. */
.goody-form-panel .wpforms-form .wpforms-field-checkbox label,
.goody-form-panel .wpforms-form .wpforms-field-checkbox .wpforms-field-label-inline {
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--goody-gray-100);
}

.goody-form-panel .wpforms-form input[type='checkbox'] {
	width: 17px;
	height: 17px;
	margin: 2px 8px 0 0;
	accent-color: var(--goody-gold-300);
}

.goody-form-panel .wpforms-form .wpforms-submit-container {
	display: flex;
	justify-content: center;
	padding: 6px 0 0;
}

.goody-form-panel .wpforms-form button[type='submit'] {
	border: 0;
	background: var(--goody-rust-600);
	border-radius: var(--goody-radius-md);
	padding: 16px 34px;
	font-family: var(--goody-font-display);
	font-weight: 800;
	font-size: 19px;
	color: var(--goody-white);
	cursor: pointer;
	transition: background var(--goody-duration-fast) ease;
}

.goody-form-panel .wpforms-form button[type='submit']:hover,
.goody-form-panel .wpforms-form button[type='submit']:focus-visible {
	background: var(--goody-orange-500);
}

/* Validation + confirmation messages legible on the teal panel. */
.goody-form-panel .wpforms-form .wpforms-error,
.goody-form-panel .wpforms-form label.wpforms-error {
	font-size: 13px;
	color: var(--goody-gold-300);
}

.goody-form-panel .wpforms-confirmation-container-full {
	background: rgba(255, 255, 255, .12);
	border: 1px solid var(--goody-gold-300);
	border-radius: var(--goody-radius-md);
	color: var(--goody-white);
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.goody-container { padding-inline: var(--goody-container-pad-tablet); }

	.goody-hero__grid,
	.goody-split,
	.goody-faq,
	.goody-contact { gap: 40px; }
}

@media (max-width: 880px) {
	/* Below this the auto-fit minmax values would otherwise force a horizontal
	   overflow, so drop every two-column section to one column explicitly. */
	.goody-hero__grid,
	.goody-split,
	.goody-faq,
	.goody-contact,
	.goody-referral {
		grid-template-columns: 1fr;
	}

	/* Media returns above the copy on mobile regardless of desktop side. */
	.goody-split--media-right .goody-split__media { order: 0; }

	.goody-trust-bar__list { justify-content: flex-start; }
}

@media (max-width: 600px) {
	.goody-container { padding-inline: var(--goody-container-pad-mobile); }

	.goody-panel { padding: 36px 20px; }
	.goody-referral { padding: 40px 20px; }
	.goody-banner { padding: 28px 20px; }
	.goody-plan { padding: 28px 22px; }

	.goody-section--hero { padding-block: 48px; }

	.goody-ctas { gap: 12px; }
	.goody-ctas .goody-btn { flex: 1 1 100%; }

	.goody-form-panel .wpforms-form .wpforms-one-half {
		width: 100%;
		margin-right: 0;
	}

	.goody-faq__q { padding: 18px 20px; }
	.goody-faq__a { padding: 16px 20px 20px; }
}

/* Respect a reduced-motion preference — all our motion is decorative hover polish. */
@media (prefers-reduced-motion: reduce) {
	.goody-card,
	.goody-plan,
	.goody-location,
	.goody-promise__tile,
	.goody-play,
	.goody-btn {
		transition: none;
	}

	.goody-card:hover,
	.goody-plan:hover,
	.goody-location:hover,
	.goody-promise__item:hover .goody-promise__tile {
		transform: none;
	}

	.goody-play:hover,
	.goody-play:focus-visible { transform: translate(-50%, -50%); }
}