/* Import CSS partials here.
 * Example: @import 'partials/footer.css';
 */

/* ==========================================================================
   Global — prevent horizontal scrollbar from 100vw breakout elements
   100vw includes scrollbar width, so elements using calc(-50vw + 50%)
   or width:100vw can overflow when a vertical scrollbar is present.
   ========================================================================== */

html,
body {
	overflow-x: clip;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.nowrap-heading {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.nowrap-heading {
		white-space: normal !important;
	}
}

/* ==========================================================================
   Link Underline Style - Paragraph Style Variation
   Uses theme.json tokens for all values except underline-offset (not supported)
   ========================================================================== */

.wp-block-paragraph.is-style-link-underline a,
.is-style-link-underline a {
	text-decoration: underline;
	text-decoration-color: var(--wp--custom--color--text--link-underline--underline);
	text-underline-offset: var(--wp--custom--link-underline--underline-offset);
	text-decoration-thickness: var(--wp--custom--link-underline--underline-thickness);
}

.wp-block-paragraph.is-style-link-underline a:hover,
.is-style-link-underline a:hover {
	text-decoration-color: var(--wp--custom--color--text--link-underline--hover--underline);
}

/* ==========================================================================
   Vertical Divider - Block Style Variation
   Used in flex layouts for vertical separators between items
   ========================================================================== */

.wp-block-group.is-style-vertical-divider {
	align-self: stretch;
	width: 0;
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--theme-04) 30%, transparent);
}

/* ==========================================================================
   Services Grid with Dividers
   Adds vertical dividers between kindling grid items
   ========================================================================== */

.services-grid-with-dividers {
	position: relative;
}

.services-grid-with-dividers > .wp-block-kindling-grid-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: color-mix(in srgb, var(--wp--preset--color--theme-04) 30%, transparent);
}

/* Ensure grid items have relative positioning for pseudo-element */
.services-grid-with-dividers > .wp-block-kindling-grid-item {
	position: relative;
}

/* Force service grid headings to 2 lines at wide viewports for equal card heights */
.wp-block-group.is-nowrap:has(.is-style-vertical-divider) h3.has-xxx-large-font-size {
	max-width: 7em;
}

/* ==========================================================================
   Home — Reduce gap between services grid and Dr. Marks section
   The kindling/section around the services grid has spacing-70 bottom padding
   (~72px); tighten it so the two sections feel more connected.
   ========================================================================== */

.wp-block-kindling-section:has(.services-grid-with-dividers) {
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* ==========================================================================
   Meet Dr. Marks Section
   ========================================================================== */

.meet-dr-marks-section {
	position: relative;
	overflow: visible;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

.meet-dr-marks-section > .wp-block-columns {
	overflow: visible;
	align-items: flex-start;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

.meet-dr-marks-section .wp-block-column:first-child {
	overflow: visible;
	z-index: 2;
	margin-left: calc(-50vw + 50%);
	padding-left: 0;
}

.meet-dr-marks-section .wp-block-column.meet-dr-marks-text-column {
	z-index: 1;
	position: relative;
	align-self: flex-start;
	padding-top: var(--wp--preset--spacing--70);
	padding-left: var(--wp--preset--spacing--90);
}

/* Remove duplicate underline from CTA link */
.meet-dr-marks-cta a {
	text-decoration: none;
}

.meet-dr-marks-photo {
	position: relative;
	min-height: 32.5rem;
	overflow: visible;
}

/* Zen sand background image - fixed width with clear right edge */
.meet-dr-marks-photo .meet-dr-marks-sand {
	position: absolute;
	top: 0;
	left: 0;
	width: 55%;
	height: 100%;
	margin: 0;
	z-index: 0;
	overflow: hidden;
}

.meet-dr-marks-photo .meet-dr-marks-sand img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* Portrait photo - centered, overlapping sand edge and cream background */
.meet-dr-marks-photo .meet-dr-marks-portrait {
	position: absolute;
	bottom: 0;
	left: 25%;
	z-index: 2;
	margin: 0;
}

.meet-dr-marks-photo .meet-dr-marks-portrait img {
	max-width: none;
	width: 25rem;
	height: auto;
}

/* Badge positioning - at top of portrait */
.meet-dr-marks-photo .meet-dr-marks-badge {
	position: absolute;
	top: 0;
	left: calc(25% + 7.5rem);
	width: 9.125rem;
	height: 9.125rem;
	z-index: 3;
}

/* Grey decorative circle - between portrait and text */
.meet-dr-marks-photo::after {
	content: '';
	position: absolute;
	width: 5.625rem;
	height: 5.625rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--theme-02) 17%, transparent);
	border-radius: var(--wp--custom--border--rounded-full);
	right: -2.8125rem;
	top: 35%;
	z-index: 1;
}

/* CTA underline - 9.5625rem wide as per Figma */
.meet-dr-marks-cta {
	display: inline-block;
}

.meet-dr-marks-underline {
	display: block;
	width: 9.5625rem;
	height: 1px;
}

/* ==========================================================================
   Button Outline Inverse - For dark backgrounds
   Uses theme.json tokens for colors
   ========================================================================== */

.wp-block-button.is-style-outline-inverse .wp-block-button__link {
	background-color: var(--wp--custom--color--button--outline-inverse--background);
	color: var(--wp--custom--color--button--outline-inverse--text);
	border: 1px solid var(--wp--custom--color--button--outline-inverse--border);
	border-radius: 0;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--custom--color--button--outline--hover--background);
	color: var(--wp--custom--color--button--outline--hover--text);
	border-color: var(--wp--custom--color--button--outline--hover--border);
}

.wp-block-button.is-style-outline-inverse .wp-block-button__link:hover,
.wp-block-button.is-style-outline-inverse .wp-block-button__link:focus {
	background-color: var(--wp--custom--color--button--outline-inverse--hover--background);
	color: var(--wp--custom--color--button--outline-inverse--hover--text);
	border-color: var(--wp--custom--color--button--outline-inverse--hover--background);
}

/* ==========================================================================
   Testimonials Carousel - Edge to Edge Right Bleed
   ========================================================================== */

.testimonials-edge-bleed {
	overflow-x: clip;
	overflow-y: visible;
}

/* Clip left overflow so cards vanish at carousel edge; keep right bleed visible.
   Left inset is -2rem to keep the ::before quote icon (left: -0.9375rem) visible
   on the first card. The parent overflow-x:clip hides cards scrolled further left. */
.testimonials-edge-bleed .wp-block-kindling-carousel {
	overflow: visible;
	clip-path: inset(-2rem -100vw -2rem -2rem);
}

.testimonials-edge-bleed .splide {
	overflow: visible;
}

.testimonials-edge-bleed .splide__track {
	overflow: visible;
}

.testimonials-edge-bleed .splide__list {
	overflow: visible;
}

/* Testimonial cards - flex layout with attribution at bottom */
.testimonials-edge-bleed .splide__slide {
	height: auto;
}

.testimonials-edge-bleed .testimonial-card {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	height: 31.5625rem !important;
	box-sizing: border-box;
	overflow: visible;
}

/* Quote SVG - positioned offset outside the card */
.testimonials-edge-bleed .testimonial-quote-svg {
	position: absolute;
	top: -1.25rem;
	left: -0.9375rem;
	width: 4.8125rem;
	height: 3.3125rem;
	color: var(--wp--preset--color--theme-03);
	z-index: 10;
}

/* Attribution section - pushed to bottom */
.testimonials-edge-bleed .testimonial-bottom {
	margin-top: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Attribution name - flexbox right alignment */
.testimonials-edge-bleed .testimonial-name {
	margin: 0;
	align-self: flex-end;
}

/* Attribution underline */
.testimonials-edge-bleed .testimonial-line {
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--theme-03);
}

/* ==========================================================================
   Booking Form Section - Gravity Forms Styling
   Shared form styles apply to both .booking-form-column and .contact-form-wrapper
   Layout-specific rules (breakout, absolute positioning) are booking-form-column only
   ========================================================================== */

/* Booking section wrapper - break out of any container to full viewport width */
.wp-block-kindling-section:has(.booking-form-column) {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Booking section - columns container - positioning context for absolute image */
.wp-block-columns:has(.booking-form-column) {
	position: relative !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 120rem !important;
	margin: 0 auto !important;
	min-height: 44.375rem !important;
	padding: 0 !important;
	display: block !important; /* Override flexbox to allow absolute positioning */
}

/* Image column - full width background layer spanning entire container */
.booking-image-column {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Override inline flex-basis style */
.booking-image-column[style*="flex-basis"] {
	flex-basis: unset !important;
}

.booking-image-column .wp-block-cover {
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.booking-image-column .wp-block-cover img,
.booking-image-column .wp-block-cover__image-background {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/* Form column - teal box overlaid 160px from left edge of background */
.booking-form-column {
	position: relative !important;
	z-index: 2 !important;
	width: 40.5rem !important;
	min-width: 40.5rem !important;
	height: 44.375rem !important;
	min-height: 44.375rem !important;
	padding: var(--wp--preset--spacing--70) !important;
	margin-left: var(--wp--preset--spacing--90) !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
	flex: 0 0 40.5rem !important;
	display: block !important;
}

/* Override inline flex-basis style */
.booking-form-column[style*="flex-basis"] {
	flex-basis: unset !important;
}

/* Form wrapper - content width (form column minus padding) */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper {
	margin-top: var(--wp--preset--spacing--40);
	width: 32.5rem !important;
	overflow: visible !important;
}

/* Hide all field labels - use placeholders instead */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield_label,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform-field-label,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield_label_before_complex,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield_required,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform-field-label--type-sub,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .ginput_complex label {
	display: none !important;
}

/* Ensure checkbox inline labels are visible */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform-field-label--type-inline {
	display: inline !important;
	color: white !important;
}

/* Form inputs styling */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper input[type="text"],
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper input[type="email"],
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper input[type="tel"],
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper textarea,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper select {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid white !important;
	border-radius: 0 !important;
	color: white !important;
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 500 !important;
	letter-spacing: 0.6px !important;
	padding: var(--wp--custom--spacing--12) var(--wp--custom--spacing--4) !important;
	width: 100% !important;
	box-shadow: none !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper input::placeholder,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper textarea::placeholder {
	color: white !important;
	opacity: 1 !important;
}

/* Select dropdown styling */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='white' stroke-width='2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right var(--wp--custom--spacing--4) center !important;
	background-color: transparent !important;
	padding-right: var(--wp--custom--spacing--24) !important;
	height: auto !important;
	min-height: 2.75rem !important;
	line-height: var(--wp--custom--spacing--20) !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper select option {
	color: var(--wp--preset--color--theme-02) !important;
	background: white !important;
}

/* Field spacing - reduced to fit 582px height */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield {
	margin-bottom: 0 !important;
}

/* Form container - content width (form column minus padding), row/col gap */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform_fields {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
	width: 32.5rem !important;
	max-width: 100% !important;
}

/* Half width fields (email/phone row) - calc half minus gap */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--width-half {
	flex: 0 0 14.75rem !important;
	width: 14.75rem !important;
	max-width: 14.75rem !important;
}

/* Full width fields (Services of Interest, Message) */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--width-full {
	flex: 0 0 32.5rem !important;
	width: 32.5rem !important;
	max-width: 100% !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--width-full select,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--width-full textarea {
	width: 32.5rem !important;
	max-width: 100% !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper textarea {
	height: 7.875rem !important;
	min-height: 7.875rem !important;
	resize: none !important;
}

/* Name field - full width container */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--type-name {
	flex: 0 0 32.5rem !important;
	width: 32.5rem !important;
	max-width: 100% !important;
}

/* Name field complex input layout - each span half width with gap */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .ginput_complex {
	display: flex !important;
	gap: var(--wp--preset--spacing--50) !important;
	width: 32.5rem !important;
	margin: 0 !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .ginput_complex > span {
	flex: 0 0 14.75rem !important;
	width: 14.75rem !important;
	padding: 0 !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .ginput_complex > span input {
	width: 14.75rem !important;
}

/* Checkbox styling */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--type-checkbox label,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gchoice label,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform-field-label--type-inline {
	color: white !important;
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 500 !important;
	letter-spacing: 0.6px !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 1.75rem !important;
	height: 1.75rem !important;
	min-width: 1.75rem !important;
	border: 2px solid white !important;
	border-radius: 0 !important;
	background: transparent !important;
	margin-right: var(--wp--custom--spacing--20) !important;
	margin-left: 0 !important;
	vertical-align: middle !important;
	cursor: pointer !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper input[type="checkbox"]:checked {
	background: white !important;
}

/* Character counter and descriptions */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield_description,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .charleft,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .ginput_counter {
	color: color-mix(in srgb, white 60%, transparent) !important;
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: var(--wp--preset--font-size--small) !important;
}

/* Submit button styling */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform_button,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper input[type="submit"],
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper button[type="submit"],
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform-button {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--wp--preset--color--theme-05) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--theme-05) !important;
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 700 !important;
	letter-spacing: var(--wp--custom--letter-spacing--cta) !important;
	text-transform: uppercase !important;
	padding: 0 0 var(--wp--custom--spacing--8) 0 !important;
	cursor: pointer !important;
	display: inline-block !important;
	line-height: var(--wp--custom--line-height--none) !important;
}

:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform_button:hover,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper input[type="submit"]:hover,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper button[type="submit"]:hover {
	color: var(--wp--preset--color--theme-06) !important;
	border-bottom-color: var(--wp--preset--color--theme-06) !important;
}

/* Remove default GF footer styling */
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform_footer,
:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform-footer {
	margin-top: var(--wp--preset--spacing--50) !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* Booking form heading */
:is(.booking-form-column, .contact-form-wrapper) .wp-block-heading {
	font-size: var(--wp--preset--font-size--display-small) !important;
	line-height: var(--wp--custom--line-height--none) !important;
	font-weight: 300 !important;
}

/* ==========================================================================
   About Page Hero - Gradient Overlay
   ========================================================================== */

.about-hero {
	position: relative;
	max-width: var(--wp--custom--layout--hero-content-size) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.about-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(266.65deg, transparent 10.03%, color-mix(in srgb, var(--wp--preset--color--theme-02) 56%, transparent) 95.3%);
	z-index: 1;
	pointer-events: none;
}

.about-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	padding-top: 20.875rem; /* Position content below header area - based on Figma y=442 minus header */
}

/* About hero image positioning */
.about-hero .wp-block-cover__image-background {
	object-position: center top;
}

/* ==========================================================================
   About Page - Mission/Values Card Alignment
   Cards stretch to fill column height so Our Vision bottom aligns with team photo
   ========================================================================== */

/* Left column: push team photo to bottom of column */
.about-mission-section > .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
}

.about-mission-section > .wp-block-column:first-child > .wp-block-image {
	margin-top: auto !important;
}

/* Right column: cards stretch to fill, distributed with space-between */
.about-values-cards {
	flex: 1;
	justify-content: space-between !important;
}

/* ==========================================================================
   Meet Dr. Marks Section - Photo with Spinning Badge
   ========================================================================== */

.dr-marks-photo-wrapper {
	position: relative;
}

.dr-marks-portrait {
	margin: 0;
}

.dr-marks-portrait img {
	width: 100%;
	height: auto;
}

/* Badge positioned at top-right of photo — rotates on scroll via JS */
.dr-marks-spinning-badge {
	position: absolute !important;
	top: 6rem;
	right: -4.5625rem;
	margin: 0 !important;
	z-index: 10;
	will-change: transform;
}

/* ==========================================================================
   Dr. Marks Section — portrait overflow (cover clips by default)
   Tokens: --wp--custom--layout--dr-marks-portrait-offset (229px)
           --wp--custom--layout--dr-marks-sand-width (804px)
   ========================================================================== */

.dr-marks-section,
.dr-marks-section > .wp-block-group:first-child,
.dr-marks-section > .wp-block-group:first-child .wp-block-cover,
.dr-marks-section > .wp-block-group:first-child .wp-block-cover__inner-container {
	overflow: visible !important;
}

.dr-marks-section > .wp-block-group:first-child {
	z-index: 2;
	position: relative;
}

.dr-marks-section .dr-marks-portrait {
	margin-right: calc(-1 * var(--wp--custom--layout--dr-marks-portrait-offset)) !important;
}

.dr-marks-section > .wp-block-group:last-child {
	z-index: 1;
	position: relative;
	flex: 1;
	padding-left: calc(var(--wp--custom--layout--dr-marks-portrait-offset) + var(--wp--preset--spacing--90)) !important;
}

.dr-marks-section .dr-marks-text-content {
	overflow: visible;
}

/* Heading stays at natural position, one line */
.dr-marks-section .dr-marks-text-content h2 {
	white-space: nowrap;
}

/* Body text and CTA indented right of heading */
.dr-marks-section .dr-marks-text-content > :not(h2):not(.wp-block-heading) {
	margin-left: var(--wp--custom--layout--dr-marks-text-indent);
	max-width: var(--wp--custom--layout--dr-marks-text-width);
}

@media (max-width: 781px) {
	.dr-marks-section {
		flex-direction: column !important;
	}
	.dr-marks-section > .wp-block-group:first-child {
		flex: none !important;
		width: 100% !important;
	}
	.dr-marks-section .dr-marks-portrait {
		margin-right: 0 !important;
	}
	.dr-marks-section > .wp-block-group:last-child {
		padding-left: var(--wp--preset--spacing--50) !important;
	}
	.dr-marks-section .dr-marks-text-content h2 {
		white-space: normal;
	}
	.dr-marks-section .dr-marks-text-content > :not(h2):not(.wp-block-heading) {
		margin-left: 0;
		max-width: 100%;
	}
}

/* ==========================================================================
   Services Page Hero - Gradient Overlay
   ========================================================================== */

.services-hero .wp-block-cover__background {
	background: linear-gradient(267deg, transparent 10%, color-mix(in srgb, var(--wp--preset--color--theme-02) 56%, transparent) 95%) !important;
	opacity: 1 !important;
}

/* Services page — nav tabs break out to full viewport width, wrap when needed */
.services-nav-tabs {
	flex-wrap: wrap !important;
	justify-content: center !important;
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	box-sizing: border-box;
	padding: 0 var(--wp--preset--spacing--70);
}

/* Nav tabs — smaller text to fit within viewport */
.services-nav-tabs .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium) !important;
	letter-spacing: var(--wp--custom--letter-spacing--wide) !important;
	padding: 0.875rem 1.5rem !important;
	white-space: nowrap;
}

/* Filter tabs — match nav tab sizing */
.services-filter-tabs .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium) !important;
	letter-spacing: var(--wp--custom--letter-spacing--wide) !important;
	padding: 0.875rem 1.5rem !important;
}

/* Service tag — smaller padding and text for category tags */
.service-category .is-style-service-tag .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium) !important;
	letter-spacing: var(--wp--custom--letter-spacing--wide) !important;
	padding: 0.875rem 1.5rem;
}

/* Service categories list — full width container */
.service-categories-list {
	width: 100%;
}

/* Service category rows — image fixed width, tags column shrinks to fit */
.service-category > .wp-block-image {
	flex: 0 0 376px;
	width: 376px;
	height: 386px;
	overflow: hidden;
}

.service-category > .wp-block-image figure,
.service-category > .wp-block-image.wp-block-image {
	margin: 0;
}

/* Tags column — shrink into remaining space beside image */
.service-category > .wp-block-group {
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

.service-category > .wp-block-image img {
	width: 100% !important;
	height: 386px !important;
	object-fit: cover !important;
	object-position: center center;
}

/* Services page — contain nav/filter tabs at tablet */
@media (max-width: 1200px) {
	.services-nav-tabs {
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 var(--wp--preset--spacing--40) !important;
		gap: 10px !important;
	}

	.services-filter-tabs {
		padding: 0 var(--wp--preset--spacing--40) !important;
	}
}

/* Services page — category image stacks at tablet */
@media (max-width: 1024px) {
	.service-category {
		flex-wrap: wrap !important;
	}

	.service-category > .wp-block-image {
		flex: 0 0 100% !important;
	}

	.service-category > .wp-block-image img {
		width: 100% !important;
		height: 280px;
	}

	.service-category .wp-block-buttons {
		gap: 20px !important;
	}
}

@media (max-width: 600px) {
	/* Tighter gaps on small screens */
	.service-category .wp-block-buttons {
		gap: 12px !important;
	}

	/* Smaller tag padding on mobile, allow text to wrap */
	.service-category .is-style-service-tag .wp-block-button__link {
		padding: 0.875rem 1.25rem;
		white-space: normal;
		max-width: 100%;
	}

	/* Ensure buttons don't exceed container */
	.service-category .wp-block-button {
		max-width: 100%;
	}
}

/* Service category cards - fixed cover tiles */
.services-grid-card {
	width: 23.5rem;
	height: 24.125rem;
}

.services-grid-card a {
	text-decoration: none;
}

@media (max-width: 781px) {
	.services-grid-card {
		width: 100%;
		height: 18.75rem;
	}
}

/* ==========================================================================
   Signature Way Horizontal - Services Page Variant
   Full-width flower bg image with teal panel overlaid right, 160px from edge
   Mirrors the booking-form pattern structure
   ========================================================================== */

/* Columns container - positioning context */
.signature-way-horizontal .wp-block-columns {
	position: relative !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 120rem !important;
	margin: 0 auto !important;
	min-height: 57.3125rem !important;
	padding: 0 !important;
	display: block !important;
}

/* Image column - absolute full-width background layer */
.signature-way-horizontal .signature-way-image-column {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.signature-way-horizontal .signature-way-image-column[style*="flex-basis"] {
	flex-basis: unset !important;
}

.signature-way-horizontal .signature-way-image-column .wp-block-cover {
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.signature-way-horizontal .signature-way-image-column .wp-block-cover img,
.signature-way-horizontal .signature-way-image-column .wp-block-cover__image-background {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Content column - teal panel overlaid right, offset from right edge */
.signature-way-horizontal .signature-way-content-column {
	position: relative !important;
	z-index: 2 !important;
	width: var(--wp--custom--layout--signature-way-card) !important;
	min-width: var(--wp--custom--layout--signature-way-card) !important;
	min-height: 57.3125rem !important;
	margin-left: auto !important;
	margin-right: var(--wp--custom--layout--signature-way-offset) !important;
	box-sizing: border-box !important;
	flex: 0 0 var(--wp--custom--layout--signature-way-card) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

.signature-way-horizontal .signature-way-content-column[style*="flex-basis"] {
	flex-basis: unset !important;
}

/* Full viewport width breakout */
.wp-block-group.signature-way-horizontal {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
}

/* ==========================================================================
   Footer — Remove text-decoration underlines from non-hover state
   Subtle buttons keep their border-bottom (design treatment);
   only the CSS text-decoration is removed.
   ========================================================================== */

footer a {
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

/* Footer copyright heart icon — uses theme accent color */
.footer-copyright .footer-heart {
	color: var(--wp--preset--color--theme-05);
}

/* Footer copyright links — inherit text color, underline on hover */
.footer-copyright a {
	color: inherit;
}

/* Footer nav links — match Figma: DM Sans Regular, sentence case */
footer .wp-block-button.is-style-subtle .wp-block-button__link {
	text-transform: none;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	line-height: var(--wp--custom--line-height--none);
	border-bottom: none;
	padding: 0;
}

footer .wp-block-button.is-style-subtle .wp-block-button__link:hover {
	text-decoration: underline;
	border-bottom: none;
}

/* Footer button list gaps — Figma: Quick Links gap, 0px Contact */
footer .footer-links .wp-block-buttons {
	gap: var(--wp--preset--spacing--30) !important;
}

footer .footer-contact .wp-block-buttons {
	gap: 0 !important;
}

/* Footer "Contact Us" heading — styled as link with upperspaced appearance */
footer .wp-block-button.footer-contact__heading .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--extra-wide);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--theme-03);
}

/* Footer contact links — adequate mobile touch targets (WCAG 2.5.8) */
@media (max-width: 768px) {
	footer .footer-contact .wp-block-button__link {
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
	}
}


/* ==========================================================================
   Home — Services Grid Mobile Stack
   The 3-column flex group with vertical dividers needs to wrap at mobile
   ========================================================================== */

@media (max-width: 781px) {
	.wp-block-group.is-nowrap:has(.is-style-vertical-divider) {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--50) !important;
	}

	.wp-block-group.is-nowrap:has(.is-style-vertical-divider) > .is-style-vertical-divider {
		display: none !important;
	}

	.wp-block-group.is-nowrap:has(.is-style-vertical-divider) > .wp-block-group:not(.is-style-vertical-divider) {
		flex-basis: 100% !important;
	}
}

@media (max-width: 1023px) {
	.signature-way-horizontal .wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
		min-height: auto !important;
	}
	.signature-way-horizontal .signature-way-image-column {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 25rem !important;
	}
	.signature-way-horizontal .signature-way-content-column {
		width: 100% !important;
		min-width: 100% !important;
		min-height: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		flex: none !important;
	}
	.wp-block-group.signature-way-horizontal {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ==========================================================================
   Fix 1: About Page — Mobile Layout Adjustments
   Reduce hero padding, handle team photo positioning, carousel overflow
   ========================================================================== */

@media (max-width: 781px) {
	.about-hero .wp-block-cover__inner-container {
		padding-top: var(--wp--preset--spacing--80) !important;
	}

	/* Team member photo absolute positioning — stack on mobile */
	.dr-marks-spinning-badge {
		top: var(--wp--preset--spacing--40) !important;
		right: var(--wp--preset--spacing--20) !important;
	}

	/* About mission section — stack columns */
	.about-mission-section > .wp-block-column:first-child > .wp-block-image {
		margin-top: var(--wp--preset--spacing--50) !important;
	}
}

/* Office carousel — prevent overflow */
.about-office-carousel,
.about-office-carousel .wp-block-kindling-carousel {
	overflow: hidden;
}

/* ==========================================================================
   Fix 2: Booking Form — Responsive Layout
   ========================================================================== */

@media (max-width: 1024px) {
	/* Booking form tablet adjustments */
	.booking-form-column {
		width: 100% !important;
		min-width: unset !important;
		margin-left: 0 !important;
	}
}

@media (max-width: 781px) {
	/* Booking form mobile adjustments */
	.booking-form-column {
		height: auto !important;
		padding: var(--wp--preset--spacing--50) !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper {
		width: 100% !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .ginput_complex {
		width: 100% !important;
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--40) !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .ginput_complex > span {
		flex: 0 0 100% !important;
		width: 100% !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .ginput_complex > span input {
		width: 100% !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gform_fields {
		width: 100% !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--width-half {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--width-full {
		flex: 0 0 100% !important;
		width: 100% !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--width-full select,
	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--width-full textarea {
		width: 100% !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) .gform_wrapper .gfield--type-name {
		flex: 0 0 100% !important;
		width: 100% !important;
	}

	:is(.booking-form-column, .contact-form-wrapper) h2 {
		font-size: var(--wp--preset--font-size--xx-large) !important;
	}
}

/* ==========================================================================
   Fix 3: Hero Cover Blocks — Responsive Inner Container
   ========================================================================== */

@media (max-width: 781px) {
	.wp-block-cover__inner-container {
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   Footer Social Icons — CSS mask approach for exact color control
   ========================================================================== */

.footer-social-icon__link {
	display: block;
	width: 27px;
	height: 27px;
	min-width: 2.75rem;
	min-height: 2.75rem;
	background-color: var(--wp--preset--color--theme-03);
	transition: background-color 0.3s ease;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.footer-social-icon__link:hover {
	background-color: var(--wp--preset--color--theme-06);
}

.footer-social-icon--instagram .footer-social-icon__link {
	-webkit-mask-image: url("/wp-content/themes/kindling/assets/images/footer/icon-instagram.svg");
	mask-image: url("/wp-content/themes/kindling/assets/images/footer/icon-instagram.svg");
}

.footer-social-icon--facebook .footer-social-icon__link {
	width: 25px;
	height: 25px;
	-webkit-mask-image: url("/wp-content/themes/kindling/assets/images/footer/icon-facebook.svg");
	mask-image: url("/wp-content/themes/kindling/assets/images/footer/icon-facebook.svg");
}

.footer-social-icon--x .footer-social-icon__link {
	width: 25px;
	height: 25px;
	-webkit-mask-image: url("/wp-content/themes/kindling/assets/images/footer/icon-x.svg");
	mask-image: url("/wp-content/themes/kindling/assets/images/footer/icon-x.svg");
}

.footer-social-icon--tiktok .footer-social-icon__link {
	width: 25px;
	height: 25px;
	-webkit-mask-image: url("/wp-content/themes/kindling/assets/images/footer/icon-tiktok.svg");
	mask-image: url("/wp-content/themes/kindling/assets/images/footer/icon-tiktok.svg");
}

/* ==========================================================================
   Staff Profile Page — Two-column layout: image left, text right
   ========================================================================== */

.staff-profile-header {
	padding-top: clamp(10rem, 8rem + 8vw, 25rem) !important;
}

/* Photo displays at natural aspect ratio, not stretched to match text column */
.staff-profile-columns {
	align-items: flex-start !important;
}

.staff-profile-columns .staff-profile-photo {
	margin: 0;
}

.staff-profile-columns .staff-profile-photo img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Mobile: stack columns, image first */
@media (max-width: 781px) {
	.staff-profile-columns .staff-profile-photo {
		height: auto;
		max-height: 28rem;
	}
}

/* ==========================================================================
   About Page — Team Member Grid Alignment
   Ensures equal-width cards and aligned images/names at all viewport widths
   ========================================================================== */

.team-grid {
	align-items: flex-start !important;
}

.team-grid > .wp-block-group {
	flex: 1 1 0 !important;
	min-width: 0;
}

.team-grid .wp-block-image img {
	width: 100%;
}

/* ==========================================================================
   Service Anchor Nav — Responsive Wrap/Stack
   Ghost button nav row on individual service pages (e.g., Men's Face & Body,
   Face & Neck Surgery). The nowrap flex container overflows at narrow viewports;
   override to wrap and stack.
   ========================================================================== */

.service-anchor-nav .wp-block-buttons {
	flex-wrap: wrap !important;
	justify-content: center;
}

.service-anchor-nav .wp-block-button__link {
	white-space: nowrap;
}