/*
 * MIA Swim School brand layer
 *
 * The parent prints its properties and block styles inside the body, after
 * this file. Tokens use html:root and rules use a body prefix so they win.
 */

html:root {
	--mia-coral: #F35633;
	--mia-coral-deep: #C73E1D;
	--mia-ocean: #0B2A45;
	--mia-muted: #46607A;
	--mia-pool: #3FC1D4;
	--mia-pool-deep: #0C7195;
	--mia-foam: #F4F9FB;
	--mia-line: #D3E2EA;
	--mia-sun: #FFC83D;
	--mia-ext: var(--mia-ocean);
	--mia-logo: url(mia-logo.png);

	--font-main: Figtree, system-ui, sans-serif;
	--font-heading: Archivo, system-ui, sans-serif;

	--theme-black: var(--mia-ocean);
	--theme-background: var(--mia-foam);
	--theme-text: var(--mia-ocean);
	--theme-muted: var(--mia-muted);
	--theme-heading: var(--mia-ocean);
	--theme-border: var(--mia-line);
	--theme-field: #A8BFCC;
	--theme-shadow: var(--mia-ocean);
	--theme-primary: var(--mia-coral-deep);
	--theme-primary-alt: #A9331A;
	--theme-primary-text: #FFFFFF;
	--theme-secondary: var(--mia-ocean);
	--theme-secondary-alt: #071D30;
	--theme-secondary-text: #FFFFFF;
	--theme-tertiary: var(--mia-pool);
	--theme-tertiary-alt: #2EA9BB;
	--theme-tertiary-text: var(--mia-ocean);
	--theme-icon: var(--mia-ocean);
	--theme-link: var(--mia-pool-deep);
	--theme-error: var(--mia-coral-deep);
	--theme-warning: var(--mia-sun);

	--color-section: var(--mia-foam);

	--shadow-small: none;
	--shadow-regular: none;
	--shadow-large: none;

	--radius-small: 6px;
	--radius-regular: 12px;
	--radius-large: 20px;

	--size-content: 1.0625rem;
	--line-content: 1.65;
	--size-button: 0.9375rem;
}

body {
	background: var(--mia-foam);
	color: var(--mia-ocean);
	font-family: var(--font-main);
	font-size: 17px;
	line-height: 1.65;
}

body :focus-visible {
	outline: 3px solid var(--mia-pool-deep);
	outline-offset: 2px;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.01em;
}

body .caption {
	font-family: var(--font-heading);
	font-weight: 600;
	font-stretch: 125%;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mia-pool-deep);
}

body .box_light {
	--color-section: #FFFFFF;
	--color-background: var(--mia-foam);
}

body .box_dark {
	background: var(--mia-ocean);
	--mia-ext: var(--mia-pool);
	--color-section: var(--mia-ocean);
	--color-link: var(--mia-pool);
	--color-primary: var(--mia-pool);
	--color-primary-text: var(--mia-ocean);
}

body .box_dark .caption {
	color: var(--mia-pool);
}


/* Buttons: hard offset "extrusion", no blur */

body .button:not(.button_link) {
	border: 2px solid var(--mia-ocean);
	border-radius: 6px;
	box-shadow: 4px 4px 0 var(--mia-ext);
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s;
	--button-border: var(--mia-ocean);
	--button-base: var(--mia-coral-deep);
	--button-text: #FFFFFF;
	--button-border-active: var(--mia-ocean);
	--button-base-active: var(--mia-coral-deep);
	--button-text-active: #FFFFFF;
}

body .button:not(.button_link):hover {
	border-color: var(--mia-ocean);
	box-shadow: 6px 6px 0 var(--mia-ext);
	transform: translate(-2px, -2px);
}

body .button:not(.button_link):active {
	box-shadow: 2px 2px 0 var(--mia-ext);
	transform: translate(2px, 2px);
}

body .button.button_outline {
	--button-base: transparent;
	--button-text: var(--mia-ocean);
	--button-base-active: transparent;
	--button-text-active: var(--mia-ocean);
}

body .button.button_black {
	--button-base: var(--mia-ocean);
	--button-text: #FFFFFF;
	--button-base-active: var(--mia-ocean);
	--button-text-active: #FFFFFF;
}

body .box_dark .button:not(.button_link) {
	border-color: var(--mia-ocean);
}

body .box_dark .button.button_outline {
	border-color: #FFFFFF;
	--button-text: #FFFFFF;
	--button-text-active: #FFFFFF;
}

body .button.button_link {
	font-family: var(--font-heading);
	letter-spacing: 0.04em;
	color: var(--mia-ocean);
}

body .box_dark .button.button_link {
	color: #FFFFFF;
}

body .button.button_link:before {
	background: var(--mia-pool);
}


/* Header with the full-colour logo */

body .header_box {
	background: #FFFFFF;
	border-bottom: 2px solid var(--mia-ocean);
}

body .header_box.is_fixed {
	box-shadow: none;
}

body .header_box .logo,
body .footer_box .logo {
	width: 180px;
	height: 56px;
	background: var(--mia-logo) 0 50% / contain no-repeat transparent;
	-webkit-mask: none;
	mask: none;
}

body .header_box .menu {
	font-family: var(--font-heading);
	letter-spacing: 0.02em;
	color: var(--mia-ocean);
}

body .header_box .menu > li > a,
body .header_box > .fixed > .button {
	white-space: nowrap;
}

body .header_box .sub-menu {
	border: 2px solid var(--mia-ocean);
	border-radius: 0 0 12px 12px;
}

@media (min-width: 64.0625rem) {
	body .header_box .menu {
		box-shadow: none;
		background: transparent;
	}
}

@media (max-width: 64rem) {
	body .header_box .logo {
		width: 140px;
		height: 44px;
	}
}


/* Hero */

body .heading_box {
	background: var(--mia-foam);
	background-image: none;
}

body .heading_box:before {
	display: none;
}

body .heading_box h1 {
	font-weight: 900;
	font-style: italic;
	font-stretch: 118%;
	letter-spacing: -0.02em;
}

body .heading_box h1 em {
	color: var(--mia-coral);
	font-style: italic;
}

body .heading_box .image {
	padding: 0;
	margin-bottom: 0;
	border: 2px solid var(--mia-ocean);
	border-radius: 20px;
	background: none;
	box-shadow: 8px 8px 0 var(--mia-ocean);
	overflow: hidden;
}

body .heading_box .image img {
	border-radius: 0;
}

body h2 em {
	color: var(--mia-coral-deep);
	font-style: italic;
}

body .box_dark h2 em {
	color: var(--mia-coral);
}


/* Program cards */

body .services_box.box_dark {
	background: #FFFFFF;
	color: var(--mia-ocean);
	--mia-ext: var(--mia-ocean);
	--color-section: #FFFFFF;
	--color-background: #FFFFFF;
	--color-text: var(--mia-ocean);
	--color-muted: var(--mia-muted);
	--color-heading: var(--mia-ocean);
	--color-border: var(--mia-line);
	--color-link: var(--mia-pool-deep);
	--color-primary: var(--mia-coral-deep);
	--color-primary-text: #FFFFFF;
}

body .services_box.box_dark .caption {
	color: var(--mia-pool-deep);
}

body .services_box .item {
	overflow: hidden;
	padding: 0 0 var(--gap-card);
	border: 2px solid var(--mia-ocean);
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 6px 6px 0 var(--mia-ocean);
}

body .services_box .item > :not(.image) {
	margin-right: var(--gap-card);
	margin-left: var(--gap-card);
}

body .benefits_box h3,
body .team_box h3,
body .services_box .item h3 {
	font-weight: 800;
}

body .services_box .image {
	order: -1;
	height: auto;
	aspect-ratio: 3 / 2;
	margin: 0 0 var(--gap-contents);
	border-bottom: 2px solid var(--mia-ocean);
}

body .services_box .image:before {
	display: none;
}

body .services_box .image img {
	object-fit: cover;
}

body .services_box .link {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mia-pool-deep);
}


/* Other cards */

body .benefits_box .item,
body .team_box .item,
body .faq_box .item {
	border: 2px solid var(--mia-ocean);
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 6px 6px 0 var(--mia-ocean);
}

body .faq_box .item {
	border-radius: 12px;
	box-shadow: 4px 4px 0 var(--mia-ocean);
}

body .work_box .item {
	border: 2px solid var(--mia-pool);
	border-radius: 20px;
	background: rgb(255 255 255 / 4%);
	box-shadow: 6px 6px 0 var(--mia-pool);
}

body .work_box .number {
	color: var(--mia-pool);
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 900;
	font-style: italic;
	font-stretch: 118%;
}

body .team_box .tag {
	border-radius: 999px;
	background: var(--mia-pool);
	color: var(--mia-ocean);
}


/* Areas as pill chips */

body .offices_box .items {
	width: 100%;
	margin: 0;
	gap: 10px;
}

body .offices_box .items > .item {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 9px 18px 9px 16px;
	border: 1.5px solid var(--mia-line);
	border-radius: 999px;
	background: #FFFFFF;
	transition: transform 0.15s, box-shadow 0.15s;
}

body .offices_box .items > .item:hover {
	box-shadow: 3px 3px 0 var(--mia-pool);
	transform: translate(-1px, -1px);
}

body .offices_box .image {
	display: none;
}

body .offices_box .title {
	padding-left: 18px;
	color: var(--mia-ocean);
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25rem;
}

body .offices_box .title:before {
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
	background: var(--mia-pool);
}


/* CTA band */

body .message_box {
	background: var(--mia-foam);
	background-image: none;
}

body .message_box:before {
	display: none;
}

body .message_box > .fixed {
	padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 48px);
	border: 2px solid var(--mia-ocean);
	border-radius: 20px;
	background: var(--mia-coral);
	box-shadow: 8px 8px 0 var(--mia-ocean);
	--color-heading: var(--mia-ocean);
	--color-text: var(--mia-ocean);
	--color-link: var(--mia-ocean);
}

body .message_box h2 {
	color: var(--mia-ocean);
	font-weight: 900;
	font-style: italic;
	font-stretch: 118%;
}

body .message_box .content {
	color: var(--mia-ocean);
	font-weight: 500;
}

body .message_box .button:not(.button_link) {
	--mia-ext: #FFFFFF;
}


/* Footer */

body .footer_box {
	background: var(--mia-ocean);
	color: #FFFFFF;
	--color-heading: #FFFFFF;
	--color-text: rgb(255 255 255 / 82%);
	--color-muted: rgb(255 255 255 / 70%);
	--color-border: rgb(255 255 255 / 15%);
	--color-link: var(--mia-pool);
	--color-primary: var(--mia-pool);
}

body .footer_box .label {
	color: var(--mia-pool);
	font-family: var(--font-heading);
	font-stretch: 125%;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

body .footer_box .menu {
	font-family: var(--font-heading);
}

@media (max-width: 40rem) {
	body .footer_box .logo {
		width: 150px;
		height: 47px;
	}
}

@media (min-width: 64.0625rem) and (max-width: 77.5rem) {
	body .header_box .logo {
		width: 150px;
		height: 47px;
	}

	body .header_box .menu {
		font-size: 0.8125rem;
		letter-spacing: 0;
		--gap-grid: 9px;
	}

	body .header_box > .fixed > .button {
		padding: 0 14px;
		font-size: 0.8125rem;
	}
}

@media (max-width: 40rem) {
	body .header_box .logo {
		width: 120px;
		height: 38px;
	}

	body .header_box > .fixed > .button {
		min-height: 38px;
		padding: 0 12px;
		font-size: 0.75rem;
		box-shadow: 3px 3px 0 var(--mia-ext);
	}
}

body .benefits_box .items > .item,
body .work_box .items > .item,
body .team_box .items > .item {
	min-width: 0;
	max-width: calc(100% - var(--gap-grid-x));
}

body .heading_box.box_dark {
	background: var(--mia-ocean);
}

body .heading_box.box_dark h1 em {
	color: var(--mia-coral);
}

body .heading_box.box_dark .image {
	border-color: var(--mia-pool);
	box-shadow: 8px 8px 0 var(--mia-pool);
}

body .header_box .menu > li {
	flex-shrink: 0;
}

body .header_box .menu > .submenu > a {
	padding-right: calc(var(--gap-grid) + 20px);
}

/* Keep the header solid white on pages that ask for a transparent one */

body .header_box.is_transparent {
	background-color: #FFFFFF;
	color: var(--mia-ocean);
}

body .header_box.is_transparent + section {
	margin-top: 0;
	--offset-section-top: 0px;
}

/* White cards keep ocean text inside dark sections */

body .faq_box .item,
body .benefits_box .item,
body .team_box .item {
	color: var(--mia-ocean);
	--color-heading: var(--mia-ocean);
	--color-text: var(--mia-ocean);
	--color-muted: var(--mia-muted);
	--color-section: var(--mia-foam);
	--color-primary: var(--mia-coral-deep);
	--color-primary-text: #FFFFFF;
	--color-link: var(--mia-pool-deep);
}

body .faq_box .item h3,
body .faq_box .item .content {
	color: var(--mia-ocean);
}

body .team_box .image {
	border: 2px solid var(--mia-ocean);
	--height-icon: 120px;
}

body .team_box .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}


/* Contact bar above the header */

body .mia_topbar {
	position: relative;
	padding: 0 var(--gap-section-side);
	background: var(--mia-ocean);
	color: #FFFFFF;
	font-family: var(--font-main);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	z-index: 11;
}

body .mia_topbar .fixed {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 38px;
	gap: 24px;
}

body .mia_topbar .tagline {
	margin-right: auto;
	color: rgb(255 255 255 / 75%);
	font-weight: 500;
}

body .mia_topbar a {
	display: inline-flex;
	align-items: center;
	color: #FFFFFF;
	letter-spacing: 0.02em;
	white-space: nowrap;
	gap: 8px;
	transition: color 0.15s;
}

body .mia_topbar a:hover {
	color: var(--mia-pool);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .mia_topbar a:focus-visible {
	outline-color: var(--mia-pool);
}

body .mia_topbar a:before {
	content: '';
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background: var(--mia-pool);
	-webkit-mask: var(--mia-icon) 50% 50% / contain no-repeat;
	mask: var(--mia-icon) 50% 50% / contain no-repeat;
}

body .mia_topbar .phone {
	--mia-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

body .mia_topbar .email {
	--mia-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.4 7H4v.6l8 5.4 8-5.4V7h-.4z'/%3E%3C/svg%3E");
}

@media (max-width: 64rem) {
	body .mia_topbar .tagline {
		display: none;
	}

	body .mia_topbar .fixed {
		justify-content: center;
		gap: 18px;
	}
}

@media (max-width: 24rem) {
	body .mia_topbar {
		font-size: 0.75rem;
	}

	body .mia_topbar .fixed {
		gap: 12px;
	}
}

/* The parent sticky script would keep the bar height as a gap above the header */

body .header_box.is_sticky {
	top: var(--height-bar, 0px);
}

/* The parent pads #site for the admin bar; with the contact bar first, the bar takes that offset */

body .mia_topbar {
	margin-top: var(--height-bar, 0px);
}

body .mia_topbar ~ #site {
	padding-top: 0;
}


/* Form anchor: land below the sticky header */

body #book {
	scroll-margin-top: calc(var(--height-header) + var(--height-bar, 0px));
}


/* Contact page: compact contact cards so the form is close to the top */

body.page-id-75 .benefits_box {
	--gap-section: 40px;
	--gap-contents: 24px;
}

body.page-id-75 .benefits_box h1 {
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.15;
}

body.page-id-75 .benefits_box .item {
	flex-direction: row;
	align-items: center;
	min-height: 0;
	padding: 18px 20px;
	gap: 16px;
	box-shadow: 4px 4px 0 var(--mia-ocean);
}

body.page-id-75 .benefits_box .icon {
	position: relative;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 12px;
	background: var(--mia-foam);
	--height-icon: 48px;
}

body.page-id-75 .benefits_box .icon img {
	display: none;
}

body.page-id-75 .benefits_box .icon:before {
	content: '';
	position: absolute;
	inset: 12px;
	background: var(--mia-pool-deep);
	-webkit-mask: var(--mia-icon) 50% 50% / contain no-repeat;
	mask: var(--mia-icon) 50% 50% / contain no-repeat;
}

body.page-id-75 .benefits_box .item:nth-child(1) .icon:before {
	--mia-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

body.page-id-75 .benefits_box .item:nth-child(2) .icon:before {
	--mia-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.4 7H4v.6l8 5.4 8-5.4V7h-.4z'/%3E%3C/svg%3E");
}

body.page-id-75 .benefits_box .item:nth-child(3) .icon:before {
	background: var(--mia-coral);
	--mia-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

body.page-id-75 .benefits_box .details h3 {
	margin-bottom: 2px;
	font-size: 1.25rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

body.page-id-75 .benefits_box .details .text {
	font-size: 0.9375rem;
	line-height: 1.45;
}

body.page-id-75 .form_box {
	--gap-section: 56px;
}

@media (max-width: 64rem) {
	body.page-id-75 .benefits_box .items > .item {
		width: calc(100% - var(--gap-grid-x));
	}
}


/* Kept from Code Snippet #6 (disabled): form errors, pricing plans, reviews */

body .gform_validation_errors {
	padding: 16px;
	margin-bottom: 24px;
	border: 2px solid var(--mia-coral);
	border-radius: 12px;
	box-shadow: 4px 4px 0 var(--mia-coral);
}

body .plans_box .item {
	overflow: hidden;
	border: 1px solid rgb(11 42 69 / 10%);
	border-radius: 16px;
	background: #FFFFFF;
}

body .plans_box .item.item_featured {
	border: 2px solid var(--mia-ocean);
	box-shadow: 4px 4px 0 var(--mia-ocean);
}

body .cases_box .item {
	padding: 24px;
	border: 2px solid var(--mia-ocean);
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 6px 6px 0 var(--mia-ocean);
	color: var(--mia-ocean);
	--color-heading: var(--mia-ocean);
	--color-text: var(--mia-ocean);
}

body .cases_box .details h3 {
	color: var(--mia-ocean);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.35;
}

body .cases_box .details .links .link {
	color: var(--mia-pool-deep);
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 0.04em;
}


/* Comparison tables in page content: brand colours and horizontal scroll on phones.
   The cells carry inline styles, so these rules need !important. */

body .table-responsive {
	display: block;
	overflow-x: auto;
	width: 100%;
	max-width: 100%;
	margin: 1.5rem 0;
	border: 2px solid var(--mia-ocean);
	border-radius: 12px;
	box-shadow: 4px 4px 0 var(--mia-ocean);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

body .table-responsive table {
	width: 100% !important;
	min-width: 560px;
	margin: 0 !important;
	border-collapse: collapse !important;
	background: #FFFFFF;
	font-size: 0.9375rem;
	line-height: 1.5;
}

body .table-responsive thead tr {
	background: var(--mia-ocean) !important;
	color: #FFFFFF !important;
}

body .table-responsive th {
	padding: 12px 14px !important;
	border: 0 !important;
	border-right: 1px solid rgb(255 255 255 / 15%) !important;
	font-family: var(--font-heading);
	font-weight: 700;
	text-align: left;
	vertical-align: bottom;
}

body .table-responsive td {
	padding: 12px 14px !important;
	border: 0 !important;
	border-top: 1px solid var(--mia-line) !important;
	border-right: 1px solid var(--mia-line) !important;
	color: var(--mia-ocean);
	vertical-align: top;
}

body .table-responsive th:last-child,
body .table-responsive td:last-child {
	border-right: 0 !important;
}

body .table-responsive tbody tr:nth-child(even) td {
	background: var(--mia-foam);
}


/* Text-only cards: inner padding all round, and grids leave room for the offset shadow */

body .services_box .item:not(:has(> .image)) {
	padding: 28px 0;
}

body .services_box .item:not(:has(> .image)) > h3 {
	margin-top: 0;
}

@media (min-width: 64.0625rem) {
	body .services_box .items,
	body .benefits_box .items,
	body .team_box .items,
	body .work_box .items,
	body .cases_box .items {
		width: calc(100% + var(--gap-grid-x) - 6px);
	}
}

/* The parent sets --columns-count only from 64rem up, which leaves --width-item invalid on
   smaller screens and lets cards grow to their text width. Use the block's own value there. */

@media (max-width: 63.99rem) {
	body .items {
		--width-item: inherit;
	}
}

/* Long card links wrap instead of running past the card edge */

body .services_box .item .link {
	align-self: flex-start;
	width: fit-content;
	max-width: calc(100% - 2 * var(--gap-card));
	white-space: normal;
	text-wrap: balance;
}

/* Grids without an items_N class never get --columns-count, at any width */

body .items:not([class*="items_"]) {
	--width-item: inherit;
}

/* Review cards: space between cards (moved here from Customizer Additional CSS) */

body .cases_box .items {
	gap: 24px;
}

@media (min-width: 64.0625rem) {
	body .cases_box .items {
		width: calc(100% - 6px);
		margin: 0;
	}

	body .cases_box .items > .item {
		width: calc(50% - 12px);
		margin: 0;
	}
}

/* The mobile menu button belongs to phones and tablets only. Code Snippet #6 forces every
   button to display:inline-flex !important, so this needs !important to hold on desktop. */

@media (min-width: 64.0625rem) {
	body .header_box .menu_btn {
		display: none !important;
	}
}


/* Content sections with a card grid (from Code Snippet #6, now disabled):
   text on top, cards below in a brand-styled grid */

body .content_box .fixed:has(> .items, .items) {
	flex-direction: column;
	align-items: stretch;
}

body .content_box .fixed:has(.items) > .contents,
body .content_box .fixed:has(.items) .contents .content {
	width: 100%;
	max-width: var(--width-contents);
	margin-right: auto;
	margin-left: auto;
}

body .content_box .fixed:has(.items) > .contents {
	margin-bottom: 32px;
	text-align: center;
}

body .content_box .items {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 6px);
	margin: 0;
	gap: 24px;
}

body .content_box .items > .item {
	flex: 1 1 100%;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 24px;
	border: 2px solid var(--mia-ocean);
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 6px 6px 0 var(--mia-ocean);
	color: var(--mia-ocean);
	--color-heading: var(--mia-ocean);
	--color-text: var(--mia-ocean);
}

body .content_box .items > .item h3 {
	margin: 0 0 12px;
	font-size: 1.25rem;
	line-height: 1.3;
}

body .content_box .items > .item ul {
	margin-bottom: 0;
	padding-left: 1.25rem;
}

body .content_box .items > .item li {
	margin-bottom: 8px;
}

@media (min-width: 40rem) {
	body .content_box .items > .item {
		flex-basis: calc(50% - 12px);
	}
}

@media (min-width: 64.0625rem) {
	body .content_box .items_3 > .item {
		flex-basis: calc(33.333% - 16px);
	}

	body .content_box .items_4 > .item,
	body .content_box .items_5 > .item,
	body .content_box .items_6 > .item {
		flex-basis: calc(25% - 18px);
	}
}


/* Footer credit: sits in the bottom bar next to the copyright, same size and color */

body .footer_box .additional {
	flex-wrap: wrap;
}

body .footer_box .credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .footer_box .credit a:hover {
	color: var(--mia-pool);
}


/* Home hero: text and the Sunny Isles photo side by side on desktop, photo first on phones,
   so the beach is visible as soon as the page opens. Home page first heading block only. */

body.home .heading_box:first-of-type .image.mobile {
	display: none;
}

@media (min-width: 64.0625rem) {
	body.home .heading_box:first-of-type {
		--gap-section: 48px;
	}

	body.home .heading_box:first-of-type > .fixed {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 56px;
	}

	body.home .heading_box:first-of-type .contents {
		max-width: none;
		margin: 0;
		text-align: left;
	}

	body.home .heading_box:first-of-type .contents .content {
		max-width: none;
		margin-right: 0;
		margin-left: 0;
	}

	body.home .heading_box:first-of-type h1 {
		font-size: clamp(2.125rem, 3vw, 2.75rem);
		line-height: 1.1;
		text-wrap: balance;
	}

	body.home .heading_box:first-of-type .content {
		font-size: 1rem;
		line-height: 1.6;
	}

	body.home .heading_box:first-of-type .buttons {
		justify-content: flex-start;
	}

	body.home .heading_box:first-of-type .image.desktop {
		width: 100%;
		max-width: none;
		margin: 0;
		height: min(560px, calc(100vh - 220px));
		min-height: 360px;
	}

	body.home .heading_box:first-of-type .image.desktop img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
		object-position: 40% 50%;
	}
}

@media (max-width: 64rem) {
	body.home .heading_box:first-of-type {
		--gap-section: 28px;
	}

	body.home .heading_box:first-of-type > .fixed {
		display: flex;
		flex-direction: column;
	}

	body.home .heading_box:first-of-type .image.desktop {
		display: block;
		order: -1;
		width: 100%;
		height: clamp(220px, 34vw, 300px);
		margin: 0 0 28px;
		box-shadow: 6px 6px 0 var(--mia-ocean);
	}

	body.home .heading_box:first-of-type .image.desktop img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
		object-position: 40% 50%;
	}
}