/**
 * components.css — reusable pieces.
 *
 * Every value comes from variables.css. If two pages share a class and only
 * one needs changing, add a second class to that instance rather than
 * overriding the shared one here.
 */

/* ----------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--btn-gap);
	min-height: var(--btn-h);
	padding-inline: var(--btn-px);
	border: var(--border-w-strong) solid transparent;
	border-radius: var(--btn-radius);
	font-family: var(--font-body);
	font-size: var(--btn-fs);
	font-weight: var(--btn-fw);
	line-height: 1.3;
	letter-spacing: var(--ls-button);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

.btn__icon {
	flex: 0 0 auto;
	transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__icon {
	transform: translate(2px, -2px);
}

.btn--primary {
	background: var(--deep-teal);
	border-color: var(--deep-teal);
	color: var(--white);
}

.btn--primary:hover {
	background: var(--teal-800);
	border-color: var(--teal-800);
	color: var(--white);
}

.btn--light {
	background: var(--white);
	border-color: var(--white);
	color: var(--deep-teal);
}

.btn--light:hover {
	background: var(--teal-050);
	color: var(--deep-teal);
}

.btn--ghost {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

.btn--ghost:hover {
	background: var(--ink);
	color: var(--white);
}

.btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: var(--white);
}

.btn--ghost-light:hover {
	background: var(--white);
	border-color: var(--white);
	color: var(--deep-teal);
}

.btn--ochre {
	background: var(--ochre);
	border-color: var(--ochre);
	color: var(--ink);
}

.btn--ochre:hover {
	background: var(--ochre-700);
	border-color: var(--ochre-700);
	color: var(--white);
}

.btn--sm {
	min-height: var(--btn-h-sm);
	padding-inline: var(--space-5);
	font-size: var(--btn-fs-sm);
}

.btn--block {
	width: 100%;
}

.btn[aria-disabled="true"],
.btn:disabled {
	opacity: .5;
	pointer-events: none;
}

/* Text link with an arrow. */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.link-arrow svg {
	transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover svg {
	transform: translate(3px, -3px);
}

/* ----------------------------------------------------------------------
 * Labels and eyebrows
 * ------------------------------------------------------------------- */

.eyebrow {
	display: block;
	margin-bottom: var(--space-5);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-label);
	line-height: 1.4;
	text-transform: uppercase;
}

.on-dark .eyebrow,
.eyebrow--ochre {
	color: var(--ochre);
}

.pill {
	display: inline-flex;
	align-items: center;
	min-height: var(--pill-h);
	padding-inline: var(--pill-px);
	border: var(--border-w-strong) solid var(--ink);
	border-radius: var(--radius-pill);
	font-size: var(--pill-fs);
	font-weight: var(--fw-bold);
	line-height: 1.4;
}

.pill--light {
	border-color: rgba(255, 255, 255, .55);
	color: var(--white);
}

.pill--solid {
	background: var(--ochre-100);
	border-color: transparent;
	font-weight: var(--fw-medium);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: var(--teal-100);
	color: var(--deep-teal);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.badge--vacancy { background: var(--sage-100); color: var(--teal-800); }
.badge--waitlist { background: var(--ochre-100); color: var(--ochre-700); }
.badge--full { background: #F1F1F1; color: var(--muted); }

/* ----------------------------------------------------------------------
 * Section heading block
 * ------------------------------------------------------------------- */

.sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-9);
	margin-bottom: var(--space-11);
}

.sec-head__title {
	max-width: 22ch;
}

.sec-head__lead {
	max-width: 46ch;
	text-align: right;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--text-body);
}

.on-dark .sec-head__lead {
	color: var(--text-on-dark-soft);
}

.sec-head--stacked {
	flex-direction: column;
	align-items: flex-start;
}

.sec-head--stacked .sec-head__lead {
	text-align: left;
}

.sec-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sec-head--center .sec-head__lead {
	text-align: center;
}

/* ----------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------- */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--card-pad);
	border: var(--border-w) solid var(--card-border);
	border-radius: var(--card-radius);
	background: var(--card-bg);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.card--hover:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--shadow-md);
}

.card--flush {
	padding: 0;
	overflow: hidden;
}

.card--teal {
	background: var(--deep-teal);
	border-color: var(--deep-teal);
	color: var(--text-on-dark);
}

.card--cream {
	background: var(--cream);
	border-color: transparent;
}

.card--sage {
	background: var(--sage);
	border-color: transparent;
	color: var(--white);
}

.card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--stone-200);
	aspect-ratio: 3 / 2;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.card--hover:hover .card__media img {
	transform: scale(1.04);
}

.card__title {
	font-size: var(--fs-h5);
	color: var(--text-heading-alt);
}

.card--teal .card__title,
.card--sage .card__title {
	color: var(--white);
}

.card__text {
	color: var(--text-body);
}

.card--teal .card__text,
.card--sage .card__text {
	color: var(--text-on-dark-soft);
}

.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Circular icon backing used on cards and list items. */

.icon-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--icon-chip);
	height: var(--icon-chip);
	border-radius: var(--radius-circle);
	background: var(--ochre-100);
	color: var(--ochre-600);
}

.icon-chip--lg {
	width: var(--icon-chip-lg);
	height: var(--icon-chip-lg);
}

.icon-chip--teal { background: var(--deep-teal); color: var(--white); }
.icon-chip--sage { background: var(--sage-100); color: var(--teal-700); }
.icon-chip--white { background: var(--white); color: var(--ochre-600); }

/* ----------------------------------------------------------------------
 * Image placeholder — an unfilled slot still reads as design.
 * ------------------------------------------------------------------- */

.ic-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: var(--stone-200);
	color: #7B6F60;
	text-align: center;
}

.ic-placeholder__icon {
	width: 40px;
	height: 40px;
}

.ic-placeholder__label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

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

/* Organic mask used on hero and feature imagery. */

.media-organic {
	overflow: hidden;
	border-radius: var(--radius-organic);
	background: var(--stone-200);
}

.media-organic--alt {
	border-radius: var(--radius-organic-alt);
}

.media-organic img,
.media-organic .ic-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ----------------------------------------------------------------------
 * Header and navigation
 * ------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--white);
	border-bottom: var(--border-w) solid var(--border);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.site-header.is-hidden {
	transform: translateY(-100%);
}

.site-header.is-stuck {
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-7);
	min-height: var(--header-h);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.site-brand img {
	width: auto;
	max-height: 84px;
}

.site-brand__text {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--deep-teal);
	line-height: 1.1;
}

.site-brand__tagline {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--ochre);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-7);
}

.header-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-h5);
	font-weight: var(--fw-bold);
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.header-phone:hover {
	color: var(--deep-teal);
}

.nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-7);
}

.nav__item {
	position: relative;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: var(--space-2);
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	color: var(--ink);
	text-decoration: none;
}

.nav__link:hover,
.nav__item.is-current > .nav__link {
	color: var(--deep-teal);
}

.nav__item.is-current > .nav__link {
	box-shadow: inset 0 -2px 0 var(--ochre);
}

.nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--ink);
}

.nav__chevron {
	transition: transform var(--dur-fast) var(--ease-out);
}

.nav__toggle[aria-expanded="true"] .nav__chevron {
	transform: rotate(180deg);
}

.nav__submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: var(--z-drawer);
	min-width: 260px;
	padding: var(--space-3);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius-md);
	background: var(--white);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		visibility var(--dur-base);
}

.nav__item.has-dropdown:hover > .nav__submenu,
.nav__item.has-dropdown:focus-within > .nav__submenu,
.nav__item.has-dropdown.is-open > .nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav__submenu .nav__link {
	display: block;
	width: 100%;
	padding: var(--space-3);
	border-radius: var(--radius-xs);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
}

.nav__submenu .nav__link:hover {
	background: var(--teal-050);
}

.nav__cta {
	display: none;
	margin-top: var(--space-8);
}

.nav__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-5);
	font-size: var(--fs-h5);
	font-weight: var(--fw-bold);
	color: var(--deep-teal);
	text-decoration: none;
}

.nav-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius-xs);
	color: var(--ink);
}

/* ----------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

.site-footer {
	background: var(--deep-teal);
	color: var(--text-on-dark);
}

.site-footer a {
	color: var(--white);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--ochre);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-9);
	padding-block: var(--space-13) var(--space-11);
}

.site-footer__col-title {
	margin-bottom: var(--space-6);
	color: var(--ochre);
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.site-footer__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	color: var(--white);
}

.site-footer__item svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--ochre);
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-6);
	border-top: var(--border-w) solid var(--border-dark);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, .7);
}

.socials {
	display: flex;
	gap: var(--space-3);
}

.socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: var(--border-w) solid var(--border-dark);
	border-radius: var(--radius-circle);
}

.socials a:hover {
	background: var(--ochre);
	border-color: var(--ochre);
	color: var(--deep-teal);
}

/* ----------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------- */

.field {
	margin-bottom: var(--space-6);
}

.field__label {
	display: block;
	margin-bottom: var(--space-3);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	color: var(--ink);
}

.field__required {
	color: var(--ochre-700);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
	width: 100%;
	min-height: var(--field-h);
	padding: 0 var(--space-5);
	border: var(--border-w-strong) solid var(--field-border);
	border-radius: var(--field-radius);
	background: var(--field-bg);
	font-size: var(--field-fs);
	color: var(--ink);
	transition: border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.field textarea {
	min-height: 140px;
	padding: var(--space-4) var(--space-5);
	line-height: var(--lh-body);
	resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
	color: #8A8F96;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--deep-teal);
	box-shadow: 0 0 0 3px var(--teal-100);
	outline: none;
}

.field--error input,
.field--error textarea,
.field--error select {
	border-color: var(--error);
}

.field__error {
	margin-top: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--error);
}

.field-row {
	display: grid;
	grid-template-columns: var(--grid-2);
	gap: var(--space-5);
}

/* Choice chips. */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding-inline: var(--space-5);
	border: var(--border-w-strong) solid #C9C2B7;
	border-radius: var(--radius-pill);
	background: var(--white);
	font-size: var(--fs-xs);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.chip:has(input:checked) {
	background: var(--deep-teal);
	border-color: var(--deep-teal);
	color: var(--white);
}

.chip:has(input:focus-visible) {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Checkboxes. */

.check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--fs-xs);
	line-height: 1.5;
	cursor: pointer;
}

.check input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--deep-teal);
}

.check-grid {
	display: grid;
	grid-template-columns: var(--grid-2);
	gap: var(--space-3) var(--space-5);
}

.form-note {
	margin-top: var(--space-4);
	font-size: var(--fs-xs);
	color: var(--text-muted);
	text-align: center;
}

.form-message {
	margin-bottom: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
}

.form-message--ok { background: var(--sage-100); color: var(--teal-800); }
.form-message--error { background: #FDEDEC; color: var(--error); }

/* Honeypot — never visible, never announced. */

.hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ----------------------------------------------------------------------
 * Accordion
 * ------------------------------------------------------------------- */

.accordion__item {
	border-bottom: var(--border-w) solid var(--border);
}

.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	width: 100%;
	padding: var(--space-6) 0;
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
	color: var(--text-heading-alt);
	text-align: left;
}

.accordion__trigger:hover {
	color: var(--deep-teal);
}

.accordion__icon {
	flex: 0 0 auto;
	transition: transform var(--dur-base) var(--ease-out);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
	transform: rotate(180deg);
}

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.accordion__panel[data-open="true"] {
	grid-template-rows: 1fr;
}

.accordion__inner {
	overflow: hidden;
}

.accordion__panel[data-open="true"] .accordion__inner {
	padding-bottom: var(--space-6);
}

/* ----------------------------------------------------------------------
 * Pagination and breadcrumbs
 * ------------------------------------------------------------------- */

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-11);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding-inline: var(--space-3);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius-xs);
	color: var(--ink);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--deep-teal);
	border-color: var(--deep-teal);
	color: var(--white);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.breadcrumbs a {
	color: var(--text-muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--deep-teal);
}

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

@media (max-width: 1100px) {
	.sec-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
	}

	.sec-head__lead {
		text-align: left;
	}

	.site-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.nav-burger {
		display: inline-flex;
	}

	.site-nav {
		position: fixed;
		inset: var(--header-h) 0 0;
		z-index: var(--z-drawer);
		padding: var(--space-7) var(--gutter) var(--space-12);
		background: var(--white);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
	}

	.site-nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav__item--depth-0 {
		border-bottom: var(--border-w) solid var(--border);
	}

	.nav__item--depth-0 > .nav__link {
		padding-block: var(--space-5);
		font-size: var(--fs-h5);
	}

	.nav__toggle {
		position: absolute;
		top: 50%;
		right: 0;
		width: 44px;
		height: 44px;
		transform: translateY(-50%);
	}

	.nav__submenu {
		position: static;
		min-width: 0;
		padding: 0 0 var(--space-4);
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.nav__item.is-open > .nav__submenu {
		display: block;
	}

	.header-phone span {
		display: none;
	}

	.header-cta {
		display: none;
	}

	.nav__cta {
		display: block;
	}

	.site-header__actions {
		gap: var(--space-4);
	}
}

@media (max-width: 600px) {
	.field-row,
	.check-grid {
		grid-template-columns: 1fr;
	}

	.site-footer__top {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}