/* ==========================================================================
   Components: buttons, badges, cards, forms, chips, notices.
   ========================================================================== */

/* ----------------------------------------------------------------- buttons */

.wt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wt-space-2);
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--wt-radius);
	font-family: var(--wt-font-body);
	font-size: var(--wt-text-base);
	font-weight: var(--wt-weight-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wt-duration-fast) var(--wt-ease),
	            border-color var(--wt-duration-fast) var(--wt-ease),
	            color var(--wt-duration-fast) var(--wt-ease),
	            transform var(--wt-duration-fast) var(--wt-ease),
	            box-shadow var(--wt-duration-fast) var(--wt-ease);
}

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

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

.wt-btn--sm { padding: 0.5rem 1rem; font-size: var(--wt-text-sm); }
.wt-btn--lg { padding: 1rem 2rem; font-size: var(--wt-text-md); }

/* Primary: orange fill with a contrast-safe dark label. */
.wt-btn--primary {
	background: var(--wt-accent);
	border-color: var(--wt-accent);
	color: var(--wt-accent-label);
	box-shadow: var(--wt-shadow-sm);
}

.wt-btn--primary:hover {
	background: var(--wt-accent-hover);
	border-color: var(--wt-accent-hover);
	color: var(--wt-accent-label);
	box-shadow: var(--wt-shadow);
}

.wt-btn--primary:active {
	background: var(--wt-accent-active);
	border-color: var(--wt-accent-active);
}

.wt-btn--primary:disabled,
.wt-btn--primary[aria-disabled="true"] {
	background: var(--wt-accent-disabled);
	border-color: var(--wt-accent-disabled);
	color: var(--wt-accent-label);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

/* Secondary: navy fill on light, white outline on dark. */
.wt-btn--secondary {
	background: var(--wt-navy);
	border-color: var(--wt-navy);
	color: var(--wt-white);
}

.wt-btn--secondary:hover {
	background: var(--wt-navy-900);
	border-color: var(--wt-navy-900);
	color: var(--wt-white);
}

.wt-section--dark .wt-btn--secondary,
.wt-section--navy .wt-btn--secondary,
.wt-hero .wt-btn--secondary {
	background: transparent;
	border-color: var(--wt-line-light-70);
	color: var(--wt-white);
}

.wt-section--dark .wt-btn--secondary:hover,
.wt-section--navy .wt-btn--secondary:hover,
.wt-hero .wt-btn--secondary:hover {
	background: var(--wt-fill-light);
	border-color: var(--wt-white);
}

.wt-btn--ghost {
	background: transparent;
	border-color: var(--wt-border-strong);
	color: var(--wt-navy);
}

.wt-btn--ghost:hover {
	border-color: var(--wt-navy);
	background: var(--wt-navy-100);
	color: var(--wt-navy);
}

/* Alert: red. Reserved for confirmed offers, low stock and important notices
   only. Never a general-purpose button. */
.wt-btn--alert {
	background: var(--wt-alert);
	border-color: var(--wt-alert);
	color: var(--wt-white);
}

.wt-btn--block {
	display: flex;
	width: 100%;
}

.wt-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

/* ------------------------------------------------------------------ badges */

.wt-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.25em 0.7em;
	border-radius: var(--wt-radius-pill);
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.wt-badge--navy   { background: var(--wt-navy-100); color: var(--wt-navy); }
.wt-badge--steel  { background: var(--wt-steel-100); color: var(--wt-text-muted); }
.wt-badge--good   { background: var(--wt-good-bg); color: var(--wt-good); }
.wt-badge--alert  { background: var(--wt-alert-bg); color: var(--wt-alert); }
.wt-badge--accent { background: var(--wt-orange-100); color: var(--wt-accent-text); }
.wt-badge--muted  { background: var(--wt-steel-200); color: var(--wt-text-muted); }

/* ------------------------------------------------------------------- cards */

.wt-card {
	display: flex;
	flex-direction: column;
	background: var(--wt-bg-raised);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	overflow: hidden;
	transition: transform var(--wt-duration) var(--wt-ease),
	            box-shadow var(--wt-duration) var(--wt-ease),
	            border-color var(--wt-duration) var(--wt-ease);
}

.wt-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wt-shadow);
	border-color: var(--wt-border-strong);
}

.wt-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--wt-steel-100);
	overflow: hidden;
}

.wt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wt-card__badges {
	position: absolute;
	inset-inline-start: var(--wt-space-3);
	inset-block-start: var(--wt-space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-2);
}

.wt-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wt-space-2);
	padding: var(--wt-space-4);
	flex: 1;
}

.wt-card__brand {
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
	color: var(--wt-text-muted);
}

.wt-card__title {
	font-size: var(--wt-text-lg);
	margin: 0;
}

.wt-card__title a {
	text-decoration: none;
	color: inherit;
}

.wt-card__size {
	font-family: var(--wt-font-body);
	font-variant-numeric: tabular-nums;
	color: var(--wt-text-muted);
	font-size: var(--wt-text-sm);
	margin: 0;
}

/* Price is prominent but deliberately not louder than the reserve action. */
.wt-card__price {
	font-family: var(--wt-font-price);
	font-size: var(--wt-text-lg);
	font-weight: var(--wt-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--wt-navy);
	margin: 0;
}

.wt-card__price small {
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-regular);
	color: var(--wt-text-muted);
}

.wt-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-2);
	margin-top: auto;
	padding-top: var(--wt-space-3);
}

/* ------------------------------------------------------------------- forms
   Labels are always visible. A placeholder is never used as a label. */

.wt-field {
	display: flex;
	flex-direction: column;
	gap: var(--wt-space-2);
	margin-bottom: var(--wt-space-4);
}

.wt-field__label {
	font-weight: var(--wt-weight-bold);
	font-size: var(--wt-text-sm);
	color: var(--wt-graphite);
}

.wt-field__required {
	color: var(--wt-alert);
	margin-inline-start: 0.15em;
}

.wt-field__hint {
	font-size: var(--wt-text-sm);
	color: var(--wt-text-muted);
	margin: 0;
}

.wt-field__error {
	font-size: var(--wt-text-sm);
	font-weight: var(--wt-weight-bold);
	color: var(--wt-alert);
	margin: 0;
}

.wt-input,
.wt-select,
.wt-textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	background: var(--wt-white);
	border: 1px solid var(--wt-border-strong);
	border-radius: var(--wt-radius);
	color: var(--wt-graphite);
	transition: border-color var(--wt-duration-fast) var(--wt-ease),
	            box-shadow var(--wt-duration-fast) var(--wt-ease);
}

.wt-textarea {
	min-height: 8rem;
	resize: vertical;
}

.wt-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D838A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.1rem;
	padding-inline-end: 2.5rem;
}

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

.wt-input[aria-invalid="true"],
.wt-select[aria-invalid="true"],
.wt-textarea[aria-invalid="true"] {
	border-color: var(--wt-alert);
}

.wt-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--wt-space-3);
	font-size: var(--wt-text-sm);
}

.wt-checkbox input {
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.15rem;
	flex: none;
	accent-color: var(--wt-navy);
}

/* Fluent Forms inherits the theme controls so forms match the site without a
   second stylesheet. Selectors are kept shallow so a plugin update cannot
   silently break the styling. */
.fluentform .ff-el-input--label label {
	font-weight: var(--wt-weight-bold);
	font-size: var(--wt-text-sm);
	color: var(--wt-graphite);
}

.fluentform .ff-el-form-control {
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wt-border-strong);
	border-radius: var(--wt-radius);
	font: inherit;
	color: var(--wt-graphite);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wt-navy-500);
	box-shadow: 0 0 0 3px var(--wt-navy-100);
	outline: none;
}

.fluentform .ff-btn-submit {
	background: var(--wt-accent);
	border: 2px solid var(--wt-accent);
	border-radius: var(--wt-radius);
	color: var(--wt-accent-label);
	font-weight: var(--wt-weight-bold);
	min-height: 48px;
	padding: 0.75rem 1.75rem;
}

.fluentform .ff-btn-submit:hover {
	background: var(--wt-accent-hover);
	border-color: var(--wt-accent-hover);
}

.fluentform .ff-btn-submit:disabled,
.fluentform .ff-btn-submit[aria-disabled="true"] {
	background: var(--wt-accent-disabled);
	border-color: var(--wt-accent-disabled);
	color: var(--wt-accent-label);
	cursor: not-allowed;
}

/* ------------------------------------------------------------------- chips */

.wt-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wt-space-2);
	padding: 0.35rem 0.5rem 0.35rem 0.85rem;
	background: var(--wt-navy-100);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-pill);
	font-size: var(--wt-text-sm);
	color: var(--wt-navy);
}

.wt-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--wt-radius-pill);
	color: inherit;
	cursor: pointer;
}

.wt-chip__remove:hover {
	background: var(--wt-fill-navy);
}

/* ----------------------------------------------------------------- notices */

.wt-notice {
	display: flex;
	gap: var(--wt-space-3);
	padding: var(--wt-space-4);
	border: 1px solid var(--wt-border);
	border-inline-start: 4px solid var(--wt-navy);
	border-radius: var(--wt-radius);
	background: var(--wt-white);
	font-size: var(--wt-text-sm);
}

.wt-notice--alert {
	border-inline-start-color: var(--wt-alert);
}

.wt-notice p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- accordion */

.wt-accordion {
	border-top: 1px solid var(--wt-border);
}

.wt-accordion__item {
	border-bottom: 1px solid var(--wt-border);
}

.wt-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-space-4);
	width: 100%;
	padding: var(--wt-space-4) 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--wt-font-display);
	font-size: var(--wt-text-lg);
	font-weight: var(--wt-weight-bold);
	color: var(--wt-navy);
	cursor: pointer;
}

.wt-accordion__trigger .wt-icon {
	transition: transform var(--wt-duration) var(--wt-ease);
	flex: none;
}

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

.wt-accordion__panel {
	padding-bottom: var(--wt-space-4);
}

.wt-accordion__panel[hidden] {
	display: none;
}

/* ------------------------------------------------- media placeholder (base)
   Rendered wherever authentic photography is still outstanding. For a customer
   this is a neutral, correctly-proportioned surface, so the layout is stable
   and nothing looks broken. Signed-in editors additionally get the hatched
   marker and label from placeholders.css. */

.wt-placeholder-media {
	background: var(--wt-steel-100);
	border-radius: var(--wt-radius);
	width: 100%;
}

.wt-placeholder-media--square { aspect-ratio: 1 / 1; }
.wt-placeholder-media--wide   { aspect-ratio: 16 / 9; }
.wt-placeholder-media--tall   { aspect-ratio: 3 / 4; }

/* ==========================================================================
   V6 COMPONENTS
   Shared by the homepage and every interior template, so the site speaks one
   visual language end to end.
   ========================================================================== */

/* ----------------------------------------------------------- search form
   Lives here rather than in pages.css because the mobile drawer renders it on
   every route, including the front page. */

.wt-searchform {
	display: flex;
	gap: var(--wt-space-2);
	width: 100%;
	max-width: 34rem;
}

.wt-searchform__field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.wt-searchform__field .wt-icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0.9rem;
	transform: translateY(-50%);
	width: 1.15rem;
	height: 1.15rem;
	color: var(--wt-text-muted);
	pointer-events: none;
}

.wt-searchform input[type="search"] {
	width: 100%;
	min-height: 3.15rem;
	padding: 0.7rem 0.9rem 0.7rem 2.75rem;
	border: 2px solid var(--wt-border-strong);
	border-radius: var(--wt-radius-pill);
	background: var(--wt-white);
	color: var(--wt-graphite);
	appearance: none;
}

.wt-searchform input[type="search"]:focus {
	border-color: var(--wt-blue-bright);
	box-shadow: 0 0 0 3px var(--wt-blue-100);
	outline: none;
}

/* ------------------------------------------------------- shared: hours table
   Used by the homepage location section and by the interior page aside, so it
   cannot live in home.css. */

.wt-hours {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wt-text-sm);
}

.wt-hours th,
.wt-hours td {
	padding: var(--wt-space-2) 0;
	text-align: left;
	border-bottom: 1px solid var(--wt-border);
}

.wt-hours td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- shared: map fallback
   Shown when no map embed is configured. Rendered by the homepage location
   section and by the contact page panel. */

.wt-map-card {
	display: flex;
	height: 100%;
	min-height: 20rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: var(--wt-space-7);
	text-align: center;
	text-decoration: none;
	background:
		linear-gradient(var(--wt-fill-navy), var(--wt-fill-navy)),
		repeating-linear-gradient(45deg, var(--wt-white), var(--wt-white) 22px, var(--wt-navy-100) 22px, var(--wt-navy-100) 44px);
}

.wt-map-card__pin {
	display: grid;
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--wt-space-3);
	place-items: center;
	border-radius: 50%;
	background: var(--wt-orange);
	color: var(--wt-navy-charcoal);
	box-shadow: var(--wt-shadow);
}

.wt-map-card__pin .wt-icon {
	width: 2rem;
	height: 2rem;
}

.wt-map-card strong {
	color: var(--wt-navy);
	font-family: var(--wt-font-display);
	font-size: var(--wt-text-xl);
}

.wt-map-card small {
	margin-top: var(--wt-space-3);
	font-weight: var(--wt-weight-bold);
	color: var(--wt-accent-text);
}

/* ------------------------------------------------------------- card grid */

.wt-card-grid {
	display: grid;
	gap: var(--wt-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.wt-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.wt-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------- sidewall decoder */

.wt-decoder {
	position: relative;
	margin-block: var(--wt-space-8);
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--wt-line-light-soft);
	border-radius: var(--wt-radius-2xl);
	background:
		radial-gradient(circle at 88% 6%, var(--wt-fill-blue), transparent 22rem),
		radial-gradient(circle at 6% 94%, var(--wt-fill-orange), transparent 20rem),
		linear-gradient(150deg, var(--wt-navy-charcoal), var(--wt-navy-900) 60%, var(--wt-navy));
	color: var(--wt-text-on-dark);
	overflow: hidden;
	isolation: isolate;
}

.wt-decoder::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--wt-tread-dark);
	mask-image: linear-gradient(200deg, var(--wt-graphite), transparent 70%);
}

.wt-decoder__intro {
	max-width: 46rem;
	margin-bottom: var(--wt-space-6);
}

.wt-decoder__title {
	margin-bottom: var(--wt-space-3);
	color: var(--wt-white);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	letter-spacing: -0.02em;
}

.wt-decoder__text {
	margin: 0;
	color: var(--wt-text-on-dark-muted);
}

.wt-decoder .wt-eyebrow {
	border-color: var(--wt-line-light-soft);
	background: var(--wt-fill-light);
	color: var(--wt-orange-gold);
}

.wt-decoder__stage {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.wt-decoder__stage {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	}
}

.wt-decoder__figure svg {
	width: 100%;
	height: auto;
	max-width: 20rem;
	margin-inline: auto;
	filter: drop-shadow(0 1.4rem 2.4rem var(--wt-shadow-decoder));
}

/* Bands light up when their segment is active. */
.wt-decoder__band {
	transition: opacity var(--wt-duration) var(--wt-ease),
	            filter var(--wt-duration) var(--wt-ease);
}

.wt-decoder.is-focused .wt-decoder__band {
	opacity: 0.35;
}

.wt-decoder.is-focused .wt-decoder__band.is-active {
	opacity: 1;
	filter: drop-shadow(0 0 0.75rem var(--wt-glow-orange));
}

/* The worked example. Tabular figures keep the digits aligned. */
.wt-decoder__string {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.28rem;
	margin: 0 0 var(--wt-space-5);
	font-family: var(--wt-font-display);
	font-size: clamp(2.1rem, 6vw, 3.4rem);
	font-weight: var(--wt-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	line-height: 1;
}

.wt-decoder__seg {
	padding: 0.16em 0.34em;
	border: 2px solid transparent;
	border-radius: 0.55rem;
	background: var(--wt-fill-light);
	color: var(--wt-white);
	text-decoration: none;
	transition: background-color var(--wt-duration-fast) var(--wt-ease),
	            color var(--wt-duration-fast) var(--wt-ease),
	            transform var(--wt-duration-fast) var(--wt-ease);
}

.wt-decoder__seg:hover,
.wt-decoder__seg:focus-visible,
.wt-decoder__seg.is-active {
	transform: translateY(-2px);
	background: var(--wt-orange);
	color: var(--wt-accent-label);
}

.wt-decoder__sep {
	color: var(--wt-steel);
	font-weight: var(--wt-weight-regular);
}

.wt-decoder__defs {
	display: grid;
	gap: var(--wt-space-2);
	margin: 0 0 var(--wt-space-5);
}

.wt-decoder__def {
	padding: var(--wt-space-3) var(--wt-space-4);
	border: 1px solid transparent;
	border-radius: var(--wt-radius);
	transition: background-color var(--wt-duration) var(--wt-ease),
	            border-color var(--wt-duration) var(--wt-ease);
	scroll-margin-top: calc(var(--wt-adminbar-h) + 7rem);
}

.wt-decoder__def dt {
	display: flex;
	align-items: center;
	gap: var(--wt-space-3);
	color: var(--wt-white);
	font-family: var(--wt-font-display);
	font-size: var(--wt-text-md);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
}

.wt-decoder__def dd {
	margin: 0.35rem 0 0 3.15rem;
	color: var(--wt-text-on-dark-muted);
	font-size: var(--wt-text-sm);
}

.wt-decoder__chip {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	padding: 0.2rem 0.5rem;
	border-radius: var(--wt-radius-sm);
	background: var(--wt-fill-light);
	color: var(--wt-orange-gold);
	font-variant-numeric: tabular-nums;
}

/* With JavaScript the definitions dim except the selected one. Without it they
   all stay fully legible, which is why the dimming class is added by script. */
.wt-decoder.is-focused .wt-decoder__def {
	opacity: 0.45;
}

.wt-decoder.is-focused .wt-decoder__def.is-active {
	opacity: 1;
	border-color: var(--wt-line-light-strong);
	background: var(--wt-fill-light);
}

.wt-decoder.is-focused .wt-decoder__def.is-active .wt-decoder__chip {
	background: var(--wt-orange);
	color: var(--wt-accent-label);
}

.wt-decoder__note {
	max-width: 46ch;
	margin: 0 0 var(--wt-space-5);
	color: var(--wt-text-on-dark-muted);
	font-size: var(--wt-text-sm);
}

/* ------------------------------------------------------- contact channels */

.wt-contact-panel {
	margin-top: var(--wt-space-8);
}

.wt-contact-panel__title {
	margin-bottom: var(--wt-space-5);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.wt-channel-grid {
	display: grid;
	gap: var(--wt-space-4);
	grid-template-columns: 1fr;
	margin-bottom: var(--wt-space-6);
}

@media (min-width: 640px) {
	.wt-channel-grid {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}
}

.wt-channel {
	display: grid;
	gap: 0.3rem;
	padding: var(--wt-space-5);
	border: var(--wt-rule, 1px solid var(--wt-border));
	border-radius: var(--wt-radius-xl);
	background: var(--wt-white);
	box-shadow: var(--wt-shadow-sm);
	text-decoration: none;
	transition: transform var(--wt-duration) var(--wt-ease),
	            border-color var(--wt-duration) var(--wt-ease),
	            box-shadow var(--wt-duration) var(--wt-ease);
}

.wt-channel:hover {
	transform: translateY(-4px);
	border-color: var(--wt-orange);
	box-shadow: var(--wt-shadow-float);
}

.wt-channel__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--wt-space-2);
	border-radius: 0.95rem;
	background: linear-gradient(135deg, var(--wt-orange), var(--wt-orange-gold));
	color: var(--wt-navy-charcoal);
	box-shadow: 0 0 0 0.35rem var(--wt-orange-100);
}

.wt-channel__label {
	font-size: var(--wt-text-xs);
	font-weight: var(--wt-weight-bold);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
	color: var(--wt-text-muted);
}

.wt-channel__value {
	color: var(--wt-navy);
	font-family: var(--wt-font-display);
	font-size: var(--wt-text-lg);
	font-weight: var(--wt-weight-bold);
}

.wt-channel__note {
	font-size: var(--wt-text-sm);
	color: var(--wt-text-muted);
}

.wt-contact-panel__map {
	min-height: 20rem;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-xl);
	overflow: hidden;
	background: var(--wt-steel-100);
}

.wt-contact-panel__map iframe {
	width: 100%;
	height: 100%;
	min-height: 20rem;
	border: 0;
}

/* ------------------------------------------------------------ route cards */

.wt-route-cards {
	margin-top: var(--wt-space-9);
	padding-top: var(--wt-space-7);
	border-top: 1px solid var(--wt-border);
}

.wt-route-cards__title {
	margin-bottom: var(--wt-space-5);
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
}

.wt-route-cards__grid {
	display: grid;
	gap: var(--wt-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.wt-route-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wt-route-card {
	--wt-route-accent: var(--wt-orange);
	position: relative;
	display: grid;
	gap: 0.4rem;
	padding: var(--wt-space-5);
	padding-inline-end: 3.25rem;
	border: 1px solid color-mix(in srgb, var(--wt-route-accent) 20%, var(--wt-border));
	border-radius: var(--wt-radius-xl);
	background: var(--wt-white);
	box-shadow: var(--wt-shadow-sm);
	text-decoration: none;
	transition: transform var(--wt-duration) var(--wt-ease),
	            border-color var(--wt-duration) var(--wt-ease),
	            box-shadow var(--wt-duration) var(--wt-ease);
}

.wt-route-card:nth-child(2) { --wt-route-accent: var(--wt-blue-bright); }
.wt-route-card:nth-child(3) { --wt-route-accent: var(--wt-orange-gold); }
.wt-route-card:nth-child(4) { --wt-route-accent: var(--wt-blue-electric); }

.wt-route-card:hover {
	transform: translateY(-4px);
	border-color: var(--wt-route-accent);
	box-shadow: var(--wt-shadow-float);
}

.wt-route-card__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--wt-space-2);
	border-radius: 0.85rem;
	background: color-mix(in srgb, var(--wt-route-accent) 14%, var(--wt-white));
	color: var(--wt-route-accent);
}

.wt-route-card__title {
	color: var(--wt-navy);
	font-family: var(--wt-font-display);
	font-size: var(--wt-text-lg);
	font-weight: var(--wt-weight-bold);
}

.wt-route-card__text {
	font-size: var(--wt-text-sm);
	color: var(--wt-text-muted);
}

.wt-route-card__go {
	position: absolute;
	inset-inline-end: var(--wt-space-5);
	inset-block-start: var(--wt-space-5);
	color: var(--wt-route-accent);
	transition: transform var(--wt-duration) var(--wt-ease);
}

.wt-route-card:hover .wt-route-card__go {
	transform: translateX(0.3rem);
}

@media (prefers-reduced-motion: reduce) {
	.wt-channel,
	.wt-route-card,
	.wt-route-card__go,
	.wt-decoder__seg,
	.wt-decoder__band,
	.wt-decoder__def {
		transition: none !important;
		transform: none !important;
	}
}