/**
 * Front-end styles for location pages.
 *
 * Deliberately restrained. This loads on top of whatever theme the client runs,
 * so it sets layout and spacing and inherits typography and colour from the theme
 * rather than fighting it. Everything is scoped under .sylp- and no element
 * selector is styled globally.
 *
 * Enqueued only on single location pages, and skipped entirely when the theme
 * supplies its own template — see TemplateLoader.
 *
 * @package SYLP
 */

/* ---------------------------------------------------------------------------
 * Tokens
 *
 * Overridable by a theme without touching this file:
 *   .sylp-location { --sylp-accent: #c8102e; }
 * ------------------------------------------------------------------------ */

.sylp-location {
	--sylp-accent: #1a5f9e;

	/*
	 * Two accent tokens, because one colour cannot do both jobs accessibly.
	 *
	 * --sylp-accent        the brand colour as a FILL. Never changed. Button
	 *                      backgrounds, badges, rules, dots and edges all keep
	 *                      the exact approved orange.
	 * --sylp-accent-text   the brand colour as TEXT on a light ground. The fill
	 *                      orange (#F36E23) measures 2.97:1 on white and 2.75:1
	 *                      on the #F6F6F6 card surface, both short of the 4.5:1
	 *                      WCAG AA needs. Darkening it to #B54E0E — the same hue,
	 *                      23° against the brand's 22° — reaches 5.17:1 and
	 *                      4.79:1 and passes on both.
	 * --sylp-accent-contrast  text ON the accent fill. White on the orange is the
	 *                      same 2.97:1 failure from the other direction, so this
	 *                      is the brand near-black instead: 5.49:1, with the
	 *                      orange itself untouched.
	 * --sylp-on-ink        text on the near-black hover fill, which must stay
	 *                      white and would otherwise inherit the value above.
	 *
	 * Dark sections opt back into the bright orange further down: on the hub's
	 * #1c1f24 it already measures 5.56:1 and needs no help.
	 */
	--sylp-accent-text: #b54e0e;
	--sylp-accent-contrast: #241f1b;
	--sylp-on-ink: #fff;
	--sylp-surface: #f7f8f9;
	--sylp-border: #e0e3e7;
	--sylp-muted: #5c6670;
	--sylp-radius: 8px;
	--sylp-gap: clamp( 1rem, 3vw, 2rem );

	/*
	 * Matches the Elementor kit's container width so our sections line up with
	 * the theme's header and footer. The kit sets `--container-max-width` on
	 * `.e-con`, which we cannot inherit from outside a container, so the same
	 * three values are mirrored here — including its breakpoints, or the bar
	 * would drift out of alignment on tablet and mobile.
	 */
	--sylp-max-width: 1250px;
	--sylp-gutter: 10px;
}

@media ( max-width: 1024px ) {

	.sylp-location {
		--sylp-max-width: 1024px;
	}
}

@media ( max-width: 767px ) {

	.sylp-location {
		--sylp-max-width: 767px;
	}
}

/* ---------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------ */

.sylp-location__body {
	display: grid;
	gap: var( --sylp-gap );
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr );
	max-width: var( --sylp-max-width );
	margin: 0 auto;
	padding: var( --sylp-gap ) 1rem;
}

/* minmax(0, …) above is load-bearing: without it a long unbroken string in a
   grid child forces the column wider than its track and breaks the layout. */

.sylp-section {
	margin-bottom: var( --sylp-gap );
}

.sylp-section__title {
	font-size: clamp( 1.25rem, 2.5vw, 1.6rem );
	margin: 0 0 0.75em;
}

/* ---------------------------------------------------------------------------
 * Breadcrumbs
 * ------------------------------------------------------------------------ */

/*
 * Its own row, full width, with real vertical room. Sharing a line with anything
 * else is what made the trail feel crowded under the navigation — five levels of
 * breadcrumb is a lot of text, and it has to be free to wrap without pushing
 * against a neighbour.
 */
.sylp-breadcrumbs {
	font-size: 0.82rem;
	margin: 0 auto;
	max-width: var( --sylp-max-width );
	padding: 0.85rem var( --sylp-gutter, 10px ) 0.25rem;
	width: 100%;
}

.sylp-breadcrumbs__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-breadcrumbs__item {
	color: var( --sylp-muted );
}

.sylp-breadcrumbs a {
	color: inherit;
}

.sylp-breadcrumbs__item + .sylp-breadcrumbs__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var( --sylp-muted );
}

/*
 * On the hero image. Light rather than muted grey, and with its own padding
 * removed — the hero's inner column already supplies the gutter.
 */
.sylp-breadcrumbs--hero {
	margin: 0 0 clamp( .75rem, 2vw, 1.35rem );
	max-width: none;
	padding: 0;
	width: auto;
}

.sylp-breadcrumbs--hero .sylp-breadcrumbs__item,
.sylp-breadcrumbs--hero .sylp-breadcrumbs__item + .sylp-breadcrumbs__item::before {
	color: rgb( 255 255 255 / 78%);
}

.sylp-breadcrumbs--hero a {
	color: rgb( 255 255 255 / 92%);
	text-decoration: none;
}

.sylp-breadcrumbs--hero a:hover,
.sylp-breadcrumbs--hero a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

/*
 * Full-bleed, and the first thing on the page.
 *
 * The site's header row sets `margin-bottom: -105px`, so it draws itself over
 * the top of whatever follows and its navigation is white on the assumption that
 * something dark is there to receive it. Boxing the hero inside the content
 * column — which is what this used to do — left the header sitting on the white
 * page background with white links on it, and put the breadcrumb trail
 * underneath the logo.
 *
 * --sylp-header-overlap is that pull-up, plus room for the header itself, so the
 * heading starts below the navigation instead of behind it.
 */
.sylp-hero {
	--sylp-header-overlap: 148px;

	margin: 0;
	max-width: none;
	padding: 0;
}

/*
 * A single-cell grid with the image and the overlay stacked in it.
 *
 * The overlay used to be absolutely positioned, which meant the band could not
 * grow: once the lede, the buttons and the trait chips moved onto the image the
 * content simply overflowed on narrow screens. Stacked in one grid cell, both
 * children fill the band, the gradient still covers the whole photograph, and
 * the band grows past its min-height whenever the content needs it to.
 */
.sylp-hero__media {
	display: grid;
	grid-template-areas: "stack";
	overflow: hidden;
	position: relative;

	/*
	 * Tall enough to hold the header, the trail, a badge, an H1, a tagline, a
	 * lede, two buttons and the trait bar. The floor keeps it workable on a
	 * phone; the ceiling stops it eating a laptop screen whole.
	 */
	min-height: clamp( 30rem, 50vw, 40rem );
}

.sylp-hero__media > * {
	grid-area: stack;
	min-width: 0;
}

/*
 * The gradient does the work of a scrim without behaving like one: dense enough
 * at the bottom edge to hold white text well past AA, gone by the upper third,
 * so a photograph still reads as a photograph rather than as a darkened panel.
 */
.sylp-hero__overlay {
	/*
	 * Dark at both ends now, not just the bottom. The top stop is what makes the
	 * site's white navigation legible over a photograph whose upper edge might be
	 * bright sky — which, for a collection of daytime street photography, it
	 * usually is.
	 */
	background: linear-gradient(
		to top,
		rgb( 12 14 17 / 88%) 0%,
		rgb( 12 14 17 / 62%) 30%,
		rgb( 12 14 17 / 34%) 58%,
		rgb( 12 14 17 / 46%) 82%,
		rgb( 12 14 17 / 72%) 100%
	);
	color: #fff;
	padding: var( --sylp-header-overlap ) 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 1;
}

/* The band bleeds; its contents line up with every other section on the page. */
.sylp-hero__overlay-inner {
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding: 0 var( --sylp-gutter, 10px ) clamp( 1.5rem, 3.5vw, 2.5rem );
	width: 100%;
}

/* --- Hero: badge, copy and actions on the image -------------------------- */

/*
 * An orange pill rather than a line of grey text. It names the kind of page
 * before anything else is read, and it is the one element that is identical
 * across the collection — everything below it is the neighbourhood's own.
 */
.sylp-hero__kicker {
	align-self: flex-start;
	background: var( --sylp-accent );
	border-radius: 999px;
	color: var( --sylp-accent-contrast );
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	margin: 0 0 0.9rem;
	padding: 0.32rem 0.8rem;
	text-transform: uppercase;
}

.sylp-hero__overlay .sylp-hero__eyebrow {
	color: rgb( 255 255 255 / 88%);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0.5rem 0 0;
}

.sylp-hero__overlay .sylp-hero__tagline {
	font-size: clamp( 1.05rem, 1.7vw, 1.3rem );
	font-weight: 600;
	margin: 0.55rem 0 0;
	max-width: 38ch;
}

.sylp-hero__overlay .sylp-hero__lede {
	color: rgb( 255 255 255 / 88%);
	margin-top: 0.9rem;
	max-width: 54ch;
	text-shadow: 0 1px 3px rgb( 0 0 0 / 45%);
}

.sylp-hero__overlay .sylp-hero__lede p {
	margin: 0;
}

.sylp-hero__overlay .sylp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/*
 * A third button treatment, for buttons that sit on a photograph. The outlined
 * secondary is orange-on-transparent, which is legible on white and disappears
 * against a dark image; this one is white-on-glass and holds up over any frame
 * of any photograph in the collection.
 */
.sylp-button--onimage {
	backdrop-filter: blur( 6px );
	background: rgb( 255 255 255 / 12%);
	border: 1px solid rgb( 255 255 255 / 55%);
	color: #fff;
}

.sylp-button--onimage:hover,
.sylp-button--onimage:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var( --sylp-ink );
}

/* --- Trait bar: the foot of the image ----------------------------------- */

/*
 * A darker strip across the bottom of the photograph, so the chips read as a
 * caption belonging to the image rather than as the first row of the page.
 */
.sylp-hero__traitbar {
	align-self: end;
	background: rgb( 8 10 13 / 62%);
	border-top: 1px solid rgb( 255 255 255 / 12%);
	grid-area: stack;
	position: relative;
	width: 100%;
	z-index: 2;
}

.sylp-hero__traitbar-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var( --sylp-max-width );
	padding: 0.85rem var( --sylp-gutter, 10px );
	width: 100%;
}

.sylp-hero__traitbar .sylp-hero__traits {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Legible against the strip, and small enough to stay a caption. */
.sylp-credit--onimage {
	color: rgb( 255 255 255 / 72%);
	margin: 0;
	padding: 0;
	max-width: none;
	width: auto;
}

.sylp-credit--onimage a {
	color: inherit;
}

.sylp-hero__traitbar .sylp-hero__trait {
	align-items: center;
	color: rgb( 255 255 255 / 92%);
	display: flex;
	font-size: 0.86rem;
	font-weight: 600;
	gap: 0.5rem;
	letter-spacing: 0.01em;
}

.sylp-hero__traitbar .sylp-hero__trait::before {
	background: var( --sylp-accent );
	border-radius: 50%;
	content: "";
	flex: 0 0 auto;
	height: 6px;
	width: 6px;
}

/* The overlay stops short of the trait bar so the two never overlap. */
.sylp-hero--has-traitbar .sylp-hero__overlay {
	padding-bottom: 3.4rem;
}

.sylp-hero__overlay .sylp-hero__eyebrow {
	color: rgb( 255 255 255 / 82%);
	margin: 0 0 0.35rem;
}

.sylp-hero__overlay .sylp-hero__title {
	color: #fff;
	margin: 0;
	max-width: 20ch;
	text-shadow: 0 1px 2px rgb( 0 0 0 / 35%);
	text-wrap: balance;
}

.sylp-hero__overlay .sylp-hero__tagline {
	color: rgb( 255 255 255 / 88%);
	margin: 0.4rem 0 0;
	max-width: 46ch;
	text-shadow: 0 1px 2px rgb( 0 0 0 / 30%);
}

/*
 * A grid item, not an absolutely positioned layer.
 *
 * Absolute positioning inside the stacking grid resolved the containing block
 * in a way that let `aspect-ratio: 16/7` win: the branded band came out 420px
 * tall inside a 676px hero and left a 256px strip of page background showing
 * through the overlay gradient as a grey bar across the middle of the hero.
 * As a grid item it simply stretches to the cell, in both directions, and the
 * ratio has nothing left to constrain.
 */
.sylp-hero__media .sylp-brandhero {
	aspect-ratio: auto;
	height: auto;
	inset: auto;
	/* `max-height: 420px` on the base rule was the actual constraint holding the
	   band at 420px inside a 676px hero; clearing the ratio alone did nothing. */
	max-height: none;
	min-height: 0;
	position: relative;
	width: auto;
}

/*
 * Also a grid item, for the same reason as the branded band above: the two have
 * to produce a band of identical height, so they are laid out identically.
 * `object-fit: cover` crops the photograph to whatever shape the cell resolves
 * to, which is what reserves the space and keeps layout shift at zero.
 */
.sylp-hero__image {
	display: block;
	height: 100%;
	object-fit: cover;
	position: relative;
	width: 100%;
}

.sylp-hero__title {
	margin: 0 0 0.5em;
	font-size: clamp( 1.75rem, 5vw, 2.75rem );
	line-height: 1.15;
}

.sylp-hero__location {
	color: var( --sylp-muted );
	margin: 0 0 1rem;
}

.sylp-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.sylp-hero__fact strong {
	display: block;
	font-size: 1.35rem;
	line-height: 1.2;
}

.sylp-hero__fact span {
	color: var( --sylp-muted );
	font-size: 0.875rem;
}

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

.sylp-button {
	display: inline-block;
	padding: 0.75em 1.5em;
	border-radius: var( --sylp-radius );
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
	transition: opacity 150ms ease;
	/* 44px minimum touch target. */
	min-height: 44px;
	box-sizing: border-box;
}

.sylp-button:hover,
.sylp-button:focus {
	opacity: 0.88;
}

/* Never remove the focus ring — keyboard users need it. */
.sylp-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.sylp-button--primary {
	background: var( --sylp-accent );
	color: var( --sylp-accent-contrast );
}

.sylp-button--secondary {
	background: transparent;
	color: var( --sylp-accent-text );
	box-shadow: inset 0 0 0 2px currentColor;
}

.sylp-button--block {
	display: block;
	text-align: center;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Chips and lists
 * ------------------------------------------------------------------------ */

.sylp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.sylp-chips__item {
	background: var( --sylp-surface );
	border: 1px solid var( --sylp-border );
	border-radius: 999px;
	padding: 0.35em 0.9em;
	font-size: 0.9rem;
}

.sylp-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.sylp-list__item {
	padding: 0.4em 0 0.4em 1.5em;
	position: relative;
}

.sylp-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var( --sylp-accent );
}

/* ---------------------------------------------------------------------------
 * Pricing table
 * ------------------------------------------------------------------------ */

.sylp-pricing {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

.sylp-pricing th,
.sylp-pricing td {
	text-align: left;
	padding: 0.75em 1em;
	border-bottom: 1px solid var( --sylp-border );
}

.sylp-pricing thead th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --sylp-muted );
}

.sylp-pricing__amount {
	font-weight: 700;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
}

.sylp-pricing__period {
	color: var( --sylp-muted );
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------------ */

.sylp-faq__item {
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	margin-bottom: 0.75rem;
	background: #fff;
}

.sylp-faq__question {
	cursor: pointer;
	padding: 1em 1.25em;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 3em;
}

/* Hide the default disclosure triangle in both engines. */
.sylp-faq__question::-webkit-details-marker {
	display: none;
}

.sylp-faq__question::after {
	content: "+";
	position: absolute;
	right: 1.25em;
	font-size: 1.4em;
	line-height: 1;
	color: var( --sylp-accent-text );
}

.sylp-faq__item[ open ] .sylp-faq__question::after {
	content: "\2212";
}

.sylp-faq__question:focus-visible {
	outline: 3px solid var( --sylp-accent );
	outline-offset: -3px;
}

.sylp-faq__answer {
	padding: 0 1.25em 1.25em;
}

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

.sylp-card {
	background: var( --sylp-surface );
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	padding: 1.5rem;
	margin-bottom: var( --sylp-gap );
}

.sylp-card__title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
}

.sylp-card__meta {
	color: var( --sylp-muted );
	font-size: 0.875rem;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Nearby locations
 * ------------------------------------------------------------------------ */

.sylp-section--nearby {
	max-width: var( --sylp-max-width );
	margin: 0 auto;
	padding: 0 1rem var( --sylp-gap );
}

.sylp-nearby {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-nearby__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85em 1em;
	background: var( --sylp-surface );
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	text-decoration: none;
	min-height: 44px;
	box-sizing: border-box;
}

.sylp-nearby__link:hover,
.sylp-nearby__link:focus-visible {
	border-color: var( --sylp-accent-text );
}

.sylp-nearby__distance {
	color: var( --sylp-muted );
	font-size: 0.8rem;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Prose
 * ------------------------------------------------------------------------ */

.sylp-prose > *:first-child {
	margin-top: 0;
}

.sylp-prose > *:last-child {
	margin-bottom: 0;
}

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

@media ( max-width: 860px ) {
	.sylp-location__body {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* The CTA is the page's conversion point; on narrow screens it belongs
	   above the supporting detail rather than at the very bottom. */
	.sylp-location__sidebar {
		order: -1;
	}
}

@media print {
	.sylp-button,
	.sylp-section--nearby,
	.sylp-breadcrumbs {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Neighbourhood template
 *
 * Extends the tokens above rather than introducing a second palette, so a brand
 * override set once in Settings reaches these sections too. No font-family is
 * declared anywhere: type comes from the theme, which is what keeps these pages
 * from reading as a separate site.
 * ------------------------------------------------------------------------ */

.sylp-section {
	margin-block: var( --sylp-gap );
}

.sylp-section__inner {
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding-inline: 1rem;
}

.sylp-section__title {
	margin-bottom: 0.75em;
}

.sylp-prose > * + * {
	margin-top: 0.9em;
}

/* Hero ------------------------------------------------------------------- */

.sylp-hero--neighborhood {
	position: relative;
	overflow: hidden;
}

/*
 * `aspect-ratio: 21/9` with `max-height: 420px` used to live here. Together they
 * are a width constraint in disguise: once the height was capped the ratio
 * resolved the width backwards to 980px, so the hero sat 270px narrower than the
 * 1250px container everything below it uses, and the whole page looked
 * misaligned at the top. The band is sized by min-height alone now.
 */
.sylp-hero__media {
	overflow: hidden;
}

.sylp-hero__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Same gutter as the overlay above it, or the lede starts 6px off the H1. */
.sylp-hero__inner {
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding: var( --sylp-gap ) var( --sylp-gutter, 10px );
}

.sylp-hero__lede {
	color: var( --sylp-muted );
	max-width: 60ch;
}

.sylp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

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

.sylp-button {
	border-radius: var( --sylp-radius );
	display: inline-block;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.75em 1.4em;
	text-decoration: none;
}

.sylp-button--primary {
	background: var( --sylp-accent );
	color: var( --sylp-accent-contrast );
}

.sylp-button--secondary {
	background: transparent;
	border: 2px solid var( --sylp-accent );
	color: var( --sylp-accent-text );
	padding: calc( 0.75em - 2px ) calc( 1.4em - 2px );
}

.sylp-button--ghost {
	background: transparent;
	color: inherit;
	text-decoration: underline;
}

.sylp-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

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

.sylp-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * A card carries its own bottom margin for the places it appears on its own.
 * Inside this grid the container already supplies the rhythm, and keeping both
 * gave rows a different gap from columns — the kind of half-millimetre
 * inconsistency that makes a set of cards look hand-assembled.
 */
.sylp-cards .sylp-card {
	margin-bottom: 0;
}

.sylp-card {
	align-items: center;
	background: var( --sylp-surface );
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	padding: 1rem 1.1rem;
	text-decoration: none;
}

/*
 * The CTA panel is a stack, not a row.
 *
 * It was inheriting the row layout above, which is right for the compact
 * "nearby location" cards it was written for and wrong for a panel holding a
 * heading, two full-width buttons and a phone line. In a 395px sidebar the row
 * put the heading and the phone number shoulder to shoulder and broke "Ready to
 * Get Started?" across three lines to make them fit.
 */
.sylp-card--cta {
	align-items: stretch;
	flex-direction: column;
	gap: 0.9rem;
	justify-content: flex-start;
}

.sylp-card:hover,
.sylp-card:focus-visible {
	border-color: var( --sylp-accent-text );
}

.sylp-card__title {
	font-weight: 600;
}

.sylp-card__cue {
	color: var( --sylp-accent-text );
}

/* Benefits --------------------------------------------------------------- */

.sylp-benefits {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-benefits__title {
	font-size: 1rem;
	margin: 0 0 0.25em;
}

.sylp-benefits__text {
	color: var( --sylp-muted );
	margin: 0;
}

/* Travel ----------------------------------------------------------------- */

.sylp-travel__list {
	margin: 0;
}

.sylp-travel__row {
	border-bottom: 1px solid var( --sylp-border );
	display: grid;
	gap: 0.25rem 1.5rem;
	padding-block: 0.75rem;
}

@media ( min-width: 40em ) {
	.sylp-travel__row {
		grid-template-columns: minmax( 12rem, 1fr ) 3fr;
	}
}

.sylp-travel__label {
	color: var( --sylp-muted );
	font-weight: 600;
	margin: 0;
}

.sylp-travel__value {
	margin: 0;
}

.sylp-travel__map {
	aspect-ratio: 16 / 9;
	border-radius: var( --sylp-radius );
	margin-top: var( --sylp-gap );
	overflow: hidden;
}

.sylp-travel__map iframe {
	border: 0;
	height: 100%;
	width: 100%;
}

/* Gallery ---------------------------------------------------------------- */

.sylp-gallery__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-gallery__image {
	aspect-ratio: 4 / 3;
	border-radius: var( --sylp-radius );
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Final CTA -------------------------------------------------------------- */

.sylp-final-cta {
	background: var( --sylp-surface );
	border-top: 1px solid var( --sylp-border );
	margin-bottom: 0;
	padding-block: calc( var( --sylp-gap ) * 1.5 );
}

.sylp-final-cta__inner {
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding-inline: 1rem;
	text-align: center;
}

.sylp-final-cta__text {
	color: var( --sylp-muted );
	margin-inline: auto;
	max-width: 60ch;
}

.sylp-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.5rem;
}

/*
 * "Call Now" carries the number on a second line, so the reader can see what
 * they are about to dial. The line-height is tightened because a two-line button
 * otherwise stands noticeably taller than its neighbours and breaks the row.
 */
.sylp-button__sub {
	display: block;
	font-size: 0.78em;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.25;
	opacity: 0.75;
}

.sylp-final-cta__actions .sylp-button {
	align-items: center;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	min-height: 3.25rem;
	line-height: 1.25;
}

/* Contact drops to a quiet text link beneath the buttons: it is the fallback
   action, not one of the four the section is built around. */
.sylp-final-cta__aside {
	font-size: 0.9rem;
	margin-top: 1.1rem;
}

.sylp-final-cta__aside a {
	color: var( --sylp-muted );
}

/* Respect reduced-motion and forced-colors rather than assuming a palette. */
@media ( prefers-reduced-motion: reduce ) {
	.sylp-card,
	.sylp-button {
		transition: none;
	}
}

/* Landmarks -------------------------------------------------------------- */

.sylp-landmarks__list {
	columns: 2;
	column-gap: 2rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

@media ( max-width: 34em ) {
	.sylp-landmarks__list {
		columns: 1;
	}
}

.sylp-landmarks__list .sylp-list__item {
	break-inside: avoid;
	padding-block: 0.35rem;
}

/* Insights --------------------------------------------------------------- */

.sylp-insights__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.sylp-insight {
	background: var( --sylp-surface );
	border-left: 3px solid var( --sylp-accent );
	border-radius: var( --sylp-radius );
	padding: 1.1rem 1.25rem;
}

.sylp-insight__question {
	font-size: 1rem;
	margin: 0 0 0.4em;
}

.sylp-insight__answer {
	color: var( --sylp-muted );
	margin: 0;
}

/* Grouped landmarks ------------------------------------------------------ */

.sylp-landmarks__group + .sylp-landmarks__group {
	margin-top: 1.75rem;
}

.sylp-landmarks__category {
	border-bottom: 1px solid var( --sylp-border );
	font-size: 1.05rem;
	margin: 0 0 0.75rem;
	padding-bottom: 0.35rem;
}

.sylp-landmarks__items {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-landmark {
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	padding: 1rem 1.1rem;
}

.sylp-landmark__name {
	font-size: 1rem;
	margin: 0 0 0.35em;
}

.sylp-landmark__description,
.sylp-landmark__importance {
	margin: 0 0 0.5em;
}

.sylp-landmark__importance {
	color: var( --sylp-muted );
}

.sylp-landmark__meta {
	color: var( --sylp-muted );
	font-size: 0.9em;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Master template v1.0 sections
 *
 * Extends the existing tokens; introduces no second palette. Colours here are
 * still the shipped defaults — the approved design is orange and exact hex
 * values have not been supplied, so --sylp-accent is deliberately unchanged
 * rather than guessed. Setting the brand tokens recolours all of this at once.
 * ------------------------------------------------------------------------ */

/* Snapshot bar ----------------------------------------------------------- */

/*
 * A utility strip, not a dashboard.
 *
 * The first version stacked a label above a five-column grid of title/value/note
 * blocks, which stood roughly 90px tall — nearly three times the height of the
 * theme's own utility bar above it — and pushed the hero down the page. Worse,
 * each cell reserved its space whether or not the feed behind it resolved, so a
 * degraded CBP response produced a row of blank gaps directly under the
 * navigation.
 *
 * It is now one baseline-aligned row that wraps, at the same width and gutter as
 * the theme's containers, and cells with no data are dropped by the template
 * rather than rendered empty. Typography follows the Elementor kit: Syne for the
 * label, Poppins for the readings.
 */

.sylp-snapshot {
	background: #14171a;
	color: #fff;
	font-family: "Poppins", -apple-system, "Segoe UI", roboto, sans-serif;
}

.sylp-snapshot__inner {
	align-items: baseline;
	column-gap: 1.15rem;
	display: flex;
	flex-wrap: wrap;
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding: 0.45rem var( --sylp-gutter, 10px );
	row-gap: 0.15rem;
}

.sylp-snapshot__label {
	font-family: "Syne", "Poppins", sans-serif;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	margin: 0;
	opacity: 0.55;
	text-transform: uppercase;
	white-space: nowrap;
}

.sylp-snapshot__items {
	align-items: baseline;
	column-gap: 0.9rem;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: 0.15rem;
}

.sylp-snapshot__item {
	align-items: baseline;
	display: flex;
	gap: 0.35rem;
	white-space: nowrap;
}

/* A hairline between readings, so they scan as separate figures on one line. */
.sylp-snapshot__item + .sylp-snapshot__item::before {
	color: rgb( 255 255 255 / 25% );
	content: "|";
	font-size: 0.7rem;
	margin-right: 0.55rem;
}

.sylp-snapshot__title {
	font-size: 0.72rem;
	opacity: 0.6;
}

.sylp-snapshot__value {
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/*
 * Below the kit's mobile breakpoint the label owns its own line: keeping it
 * inline pushed the first reading onto a second row anyway, which read as a
 * broken layout rather than a deliberate one.
 */
@media ( max-width: 767px ) {

	.sylp-snapshot__label {
		flex: 1 0 100%;
	}

	.sylp-snapshot__inner {
		padding-block: 0.4rem;
	}
}

.sylp-snapshot__value--pending,
.sylp-btc__cell--pending,
.sylp-btc__callout--pending,
.sylp-btc__rate--pending,
.sylp-trust__value--pending,
.sylp-trust__rating--pending {
	font-style: italic;
	font-weight: 400;
	opacity: 0.65;
}

.sylp-snapshot__note {
	font-size: 0.68rem;
	opacity: 0.45;
}

/* Shown in place of the readings when no feed resolves. */
.sylp-snapshot__quiet {
	font-size: 0.76rem;
	margin: 0;
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
 * Border Intelligence Center
 *
 * A dashboard, not a strip. Premium dark charcoal rather than pure black —
 * #000 against the page's white reads as a hole punched in the layout, while a
 * charcoal with a trace of warmth in it sits under the brand orange without
 * fighting it.
 *
 * The grid is auto-fit so the same markup gives four cards across on a desktop,
 * two on a tablet and one on a phone with no breakpoint bookkeeping, and every
 * card holds its shape whether its figure resolved or not.
 * ------------------------------------------------------------------------ */

/*
 * Sits in normal flow directly below the hero. No negative margin, no transform,
 * no absolute positioning, nothing that could ride over the section above it —
 * the separation is margin and nothing else, so it cannot collapse into an
 * overlap at some viewport width nobody tested.
 *
 * clamp() carries the responsive range in one declaration: 48px at the narrow
 * end, scaling with the viewport, ceiling 112px. The full-bleed dark band then
 * does the rest of the work, marking the boundary between the page's own subject
 * and the live data below it.
 */
.sylp-bic {
	--sylp-bic-ink: #1c1f24;
	--sylp-bic-card: #24282e;
	--sylp-bic-line: rgb( 255 255 255 / 9%);

	background: var( --sylp-bic-ink );
	color: #fff;
	font-family: "Poppins", -apple-system, "Segoe UI", roboto, sans-serif;
	margin-top: clamp( 3rem, 7vw, 7rem );
	position: static;
}

.sylp-bic__inner {
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding: 1.15rem var( --sylp-gutter, 10px ) 1.35rem;
}

.sylp-bic__head {
	align-items: baseline;
	column-gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0.85rem;
	row-gap: 0.15rem;
}

.sylp-bic__title {
	color: #fff;
	font-family: "Syne", "Poppins", sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0;
}

/* The accent earns its place here: it marks the live-data claim. */
.sylp-bic__source {
	color: var( --sylp-accent-text );
	font-size: 0.74rem;
	letter-spacing: 0.02em;
	margin: 0;
}

/*
 * Four across, not six.
 *
 * `auto-fit` with a 168px floor resolved to six columns at the container width,
 * which is the worst possible answer for seven cards: six in a row and a single
 * orphan stranded underneath. Four is the only column count that divides seven
 * into two rows that read as a set — four and three — and it gives each card
 * enough width that the labels stop wrapping.
 */
.sylp-bic__grid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

@media ( max-width: 767px ) {

	.sylp-bic__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 419px ) {

	.sylp-bic__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * Equal heights come from the grid stretching its items, not from a fixed
 * height: `justify-content: space-between` then pins the label to the top and
 * the figure to the bottom, so the numbers sit on one line across the row
 * whatever the labels above them wrap to.
 */
.sylp-bic__card {
	background: var( --sylp-bic-card );
	border: 1px solid var( --sylp-bic-line );
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	justify-content: space-between;
	min-width: 0;
	padding: 1rem 1rem 0.95rem;
	position: relative;
	transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sylp-bic__card:hover {
	background: #2a2f36;
	border-color: rgb( 255 255 255 / 18%);
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {

	.sylp-bic__card {
		transition: none;
	}

	.sylp-bic__card:hover {
		transform: none;
	}
}

.sylp-bic__icon {
	color: var( --sylp-accent-text );
	display: block;
	line-height: 0;
	margin-bottom: 0.35rem;
}

.sylp-bic__icon .sylp-icon {
	height: 1.15rem;
	width: 1.15rem;
}

/* Small label, large figure: the number is what a reader crossing today wants. */
.sylp-bic__label {
	color: rgb( 255 255 255 / 58%);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sylp-bic__value {
	font-size: 1.62rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-top: 0.35rem;
	/* A long port name must wrap inside its card rather than widen the track. */
	overflow-wrap: anywhere;
}

.sylp-bic__sub {
	color: rgb( 255 255 255 / 52%);
	font-size: 0.72rem;
}

/*
 * An unresolved card keeps its footprint and states the fact quietly. The grid
 * is the design; cards appearing and disappearing as feeds recover would be a
 * worse experience than an honest blank.
 */
.sylp-bic__card.is-quiet .sylp-bic__value {
	font-size: 0.92rem;
	font-weight: 500;
	opacity: 0.5;
}

.sylp-bic__card.is-quiet .sylp-bic__icon {
	opacity: 0.45;
}

/* Best crossing is the recommendation, so it carries the accent edge. */
.sylp-bic__card--best:not( .is-quiet ) {
	border-color: color-mix( in srgb, var( --sylp-accent ) 55%, transparent );
}

.sylp-bic__camera {
	aspect-ratio: 16 / 9;
	background: rgb( 0 0 0 / 35%);
	border-radius: 6px;
	display: block;
	margin-top: 0.4rem;
	object-fit: cover;
	width: 100%;
}

.sylp-bic__camera--empty {
	align-items: center;
	color: rgb( 255 255 255 / 48%);
	display: flex;
	font-size: 0.72rem;
	justify-content: center;
	padding: 0.5rem;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Hub detail
 *
 * The Travel Center's table and journey estimate, rendered inside the same
 * section behind a rule. It reads as the next part of one feature rather than
 * as a second panel, which is what stacking two equally weighted sections
 * produced before.
 * ------------------------------------------------------------------------ */

.sylp-bic__detail {
	border-top: 1px solid rgb( 255 255 255 / 12%);
	margin-top: 1.6rem;
	padding-top: 1.4rem;
}

.sylp-bic__detailtitle {
	color: rgb( 255 255 255 / 88%);
	font-family: "Syne", "Poppins", sans-serif;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 0.9rem;
}

/*
 * Nested, the Travel Center drops its own card chrome and inherits the hub's
 * dark ground: a light panel inside a dark band is exactly the seam this merge
 * was meant to remove.
 */
.sylp-bic__detail .sylp-btc,
.sylp-bic__detail .sylp-btc__panel {
	background: none;
	border: 0;
	box-shadow: none;
	margin: 0;
	max-width: none;
	padding: 0;
}

.sylp-bic__detail .sylp-btc__subtitle {
	color: rgb( 255 255 255 / 72%);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	margin: 1.3rem 0 0.55rem;
	text-transform: uppercase;
}

.sylp-bic__detail .sylp-btc__subtitle:first-of-type {
	margin-top: 0;
}

.sylp-bic__detail .sylp-btc__table {
	color: #fff;
	width: 100%;
}

.sylp-bic__detail .sylp-btc__table th,
.sylp-bic__detail .sylp-btc__table td {
	border-bottom: 1px solid rgb( 255 255 255 / 10%);
	color: inherit;
}

.sylp-bic__detail .sylp-btc__table thead th {
	color: rgb( 255 255 255 / 55%);
}

.sylp-bic__detail .sylp-btc__travelrow {
	border-bottom: 1px solid rgb( 255 255 255 / 10%);
}

.sylp-bic__detail .sylp-btc__travelrow dt {
	color: rgb( 255 255 255 / 62%);
}

.sylp-bic__detail .sylp-btc__disclaimer {
	color: rgb( 255 255 255 / 48%);
}

.sylp-bic__detail .sylp-btc__cell--pending,
.sylp-bic__detail .sylp-btc__rate--pending {
	color: rgb( 255 255 255 / 45%);
}

@media ( max-width: 767px ) {

	.sylp-bic__inner {
		padding-block: 0.95rem 1.1rem;
	}

	.sylp-bic__grid {
		gap: 0.5rem;
		grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	}

	.sylp-bic__value {
		font-size: 1.15rem;
	}
}

/* Border Travel Center --------------------------------------------------- */

.sylp-btc {
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding: var( --sylp-gap ) 1rem 0;
}

.sylp-btc__panel {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.06 );
	padding: 1.5rem;
}

.sylp-btc__header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.sylp-btc__title {
	margin: 0;
}

.sylp-btc__badge {
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.25em 0.75em;
	text-transform: uppercase;
}

.sylp-btc__badge--live {
	background: #1c7c40;
	color: #fff;
}

.sylp-btc__badge--pending {
	background: var( --sylp-surface );
	color: var( --sylp-muted );
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
}

.sylp-btc__subtitle {
	font-size: 0.95rem;
	margin: 1.25rem 0 0.5rem;
}

.sylp-btc__tablewrap {
	overflow-x: auto;
}

.sylp-btc__table {
	border-collapse: collapse;
	width: 100%;
}

.sylp-btc__table th,
.sylp-btc__table td {
	border-bottom: 1px solid var( --sylp-border );
	padding: 0.5rem 0.75rem;
	text-align: left;
}

.sylp-btc__table thead th {
	color: var( --sylp-muted );
	font-size: 0.8rem;
}

.sylp-btc__travel {
	margin: 0;
}

.sylp-btc__travelrow {
	border-bottom: 1px solid var( --sylp-border );
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding-block: 0.5rem;
}

.sylp-btc__travelrow dt,
.sylp-btc__travelrow dd {
	margin: 0;
}

.sylp-btc__travelrow dt {
	color: var( --sylp-muted );
}

.sylp-btc__travelrow--total {
	border-bottom: 0;
	font-weight: 700;
}

.sylp-btc__disclaimer {
	color: var( --sylp-muted );
	font-size: 0.85rem;
}

/* Hero additions --------------------------------------------------------- */

.sylp-hero__tagline {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0.25rem 0 0.75rem;
}

.sylp-hero__traits {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.sylp-hero__trait {
	color: var( --sylp-muted );
	font-size: 0.9rem;
	font-weight: 600;
}

/* Quick Facts ------------------------------------------------------------ */

.sylp-facts__title {
	margin-bottom: 0.75em;
}

.sylp-facts__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-fact {
	background: var( --sylp-surface );
	border-radius: var( --sylp-radius );
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.9rem 1rem;
}

.sylp-fact__label {
	color: var( --sylp-muted );
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sylp-fact__value {
	font-weight: 600;
}

/* Welcome ---------------------------------------------------------------- */

.sylp-welcome__inner {
	display: grid;
	gap: var( --sylp-gap );
}

/*
 * The business card was 1fr against 1.4fr of prose — roughly 42% of the row —
 * which left the address and the phone number wrapping mid-line. At 1.5fr it
 * takes about 52%, half again its old share, and now holds the NAP plus the
 * journey facts on their own lines.
 */
@media ( min-width: 48em ) {

	.sylp-welcome--has-image .sylp-welcome__inner {
		grid-template-columns: 1.5fr 1.4fr;
	}
}

.sylp-welcome__image {
	border-radius: var( --sylp-radius );
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Trust signals ---------------------------------------------------------- */

.sylp-trust {
	margin-top: var( --sylp-gap );
}

.sylp-trust__band {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-trust__block {
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.4rem 1.5rem;
}

.sylp-trust__block--blue { background: #1a5f9e; }
.sylp-trust__block--green { background: #1c7c40; }
.sylp-trust__block--orange { background: #c25200; }
.sylp-trust__block--purple { background: #5b3a8e; }

.sylp-trust__value {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
}

.sylp-trust__label {
	font-weight: 700;
}

.sylp-trust__note {
	font-size: 0.85rem;
	opacity: 0.9;
}

.sylp-trust__reviews {
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding: var( --sylp-gap ) 1rem 0;
	text-align: center;
}

.sylp-trust__rating {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Approved-layout parity
 *
 * Colours remain the shipped tokens by explicit instruction — the brand palette
 * will be refined later. Everything here is structural.
 * ------------------------------------------------------------------------ */

/* Marked placeholders ----------------------------------------------------- */

/*
 * Deliberately looks unfinished. A neutral grey block would read as a design
 * choice; hatching plus a label reads as outstanding work, which is the truth.
 * Never used to stand in for a photograph we could have obtained.
 */
.sylp-placeholder {
	align-items: center;
	background-color: var( --sylp-surface );
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		rgba( 0, 0, 0, 0.035 ) 10px,
		rgba( 0, 0, 0, 0.035 ) 20px
	);
	border: 1px dashed var( --sylp-border );
	border-radius: var( --sylp-radius );
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	justify-content: center;
	padding: 1.5rem;
	text-align: center;
}

.sylp-placeholder--hero {
	aspect-ratio: 21 / 9;
	max-height: 420px;
}

.sylp-placeholder--welcome {
	aspect-ratio: 4 / 3;
}

.sylp-placeholder__label {
	color: var( --sylp-muted );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sylp-placeholder__note {
	color: var( --sylp-muted );
	font-size: 0.85rem;
	max-width: 34ch;
}

/* Hero eyebrow and stacked title ----------------------------------------- */

.sylp-hero__eyebrow {
	color: var( --sylp-muted );
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 0.25rem;
}

.sylp-hero__title {
	/* Stacked, as in the approved design: the colonia name wraps rather than
	   shrinking, and the designation sits on its own line where it fits. */
	line-height: 1.05;
	margin: 0;
	max-width: 18ch;
}

.sylp-button__arrow {
	margin-left: 0.4em;
}

/* Ticked lists ----------------------------------------------------------- */

.sylp-ticks {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.sylp-ticks__item {
	padding-block: 0.3rem;
	padding-left: 1.6rem;
	position: relative;
}

.sylp-ticks__item::before {
	color: var( --sylp-accent-text );
	content: "\2713";
	font-weight: 700;
	left: 0;
	position: absolute;
}

.sylp-about__more {
	margin-top: 1.25rem;
}

/* Card containers -------------------------------------------------------- */

/*
 * The approved design puts each block in a white card on a light field. Applied
 * by section rather than universally so the hero, snapshot bar and trust band —
 * which are full-bleed by design — are untouched.
 */
.sylp-facts,
.sylp-welcome,
.sylp-map,
.sylp-about,
.sylp-insights,
.sylp-landmarks,
.sylp-why,
.sylp-services-grid,
.sylp-guides,
.sylp-cities,
.sylp-section--faq,
.sylp-section--nearby,
.sylp-border,
.sylp-times,
/*
 * Horizontal padding matches every other section's 1rem inset, so this card's
 * text sits on the same vertical line as the text above and below it. It was
 * 1.5rem, which pushed one section's content half a rem inward and made the
 * page look hand-assembled on a long scroll. The extra breathing room the card
 * needs is taken vertically instead, where nothing has to line up.
 */
.sylp-section--directions {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding: 1.5rem 1rem;
}

/* Sections that already own an inner wrapper must not double their padding. */
.sylp-facts,
.sylp-services-grid,
.sylp-guides,
.sylp-cities {
	padding-inline: 0;
}

.sylp-facts .sylp-section__inner,
.sylp-services-grid .sylp-section__inner,
.sylp-guides .sylp-section__inner,
.sylp-cities .sylp-section__inner {
	max-width: none;
}

/* Paired layouts --------------------------------------------------------- */

@media ( min-width: 60em ) {
	/* Welcome beside the map, as in the approved design. */
	.sylp-pair {
		align-items: start;
		display: grid;
		gap: var( --sylp-gap );
		grid-template-columns: 1fr 1fr;
		margin-inline: auto;
		max-width: var( --sylp-max-width );
	}

	.sylp-pair > * {
		margin: 0;
		max-width: none;
	}

	/* Guides, FAQ and Why Choose Us as a three-up row. */
	.sylp-triple {
		align-items: start;
		display: grid;
		gap: var( --sylp-gap );
		grid-template-columns: repeat( 3, 1fr );
		margin-inline: auto;
		max-width: var( --sylp-max-width );
	}

	.sylp-triple > * {
		margin: 0;
		max-width: none;
	}
}

/* Services grid ---------------------------------------------------------- */

@media ( min-width: 48em ) {
	.sylp-services-grid .sylp-cards {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* Service cards carry an image slot, ready for licensed photography. */
.sylp-card--service {
	align-items: flex-start;
	flex-direction: column;
	gap: 0.6rem;
}

.sylp-card__media {
	aspect-ratio: 16 / 10;
	border-radius: calc( var( --sylp-radius ) - 2px );
	overflow: hidden;
	width: 100%;
}

.sylp-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Section header icons --------------------------------------------------- */

/*
 * Icons inherit currentColor, so refining the brand palette later recolours them
 * with everything else — no icon assets to re-export.
 */
.sylp-icon {
	color: var( --sylp-accent-text );
	flex: 0 0 auto;
	height: 1.15em;
	vertical-align: -0.15em;
	width: 1.15em;
}

.sylp-section__title,
.sylp-facts__title,
.sylp-btc__title {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.sylp-fact {
	align-items: flex-start;
	flex-direction: row;
	gap: 0.7rem;
}

.sylp-fact__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

/*
 * Same size as every other icon. This variant used to be 1.4rem against the
 * base 1.15em — a different value in a different unit, so fact icons neither
 * matched the others nor scaled with their own text. Only the optical
 * alignment against a two-line fact remains.
 */
.sylp-icon--fact {
	margin-top: 0.1rem;
}

/* Hero / Travel Center: no overlap at any breakpoint --------------------- */

/*
 * The two are explicitly kept as separate stacked blocks. Nothing here uses
 * negative margins, absolute positioning or transforms, so the Travel Center
 * cannot ride over the hero at any viewport width — including the intermediate
 * tablet widths where a negative-margin overlap typically collides.
 */
.sylp-hero--neighborhood {
	position: static;
}

/*
 * The Travel Center now follows the Intelligence band rather than the hero, and
 * that band already supplies a hard visual boundary. Carrying the same large
 * clamp here would open a second gap of equal size between two sections that
 * belong together, so this keeps a normal section rhythm.
 */
.sylp-btc {
	margin-top: calc( var( --sylp-gap ) * 1.5 );
	position: static;
}

.sylp-btc__panel {
	margin-top: 0;
	transform: none;
}

/*
 * The dashed "pending" guide card and its "Coming soon" badge lived here. Guides
 * without a destination are no longer rendered at all, so both rules are gone
 * rather than left behind to be re-applied by accident.
 */

/* ---------------------------------------------------------------------------
 * Brand behaviour taken from the live site's Elementor kit (post-12.css)
 *
 *   a, .elementor-button        background/color  #F36E23
 *   .elementor-button:hover     background        #000000  color #FFFFFF
 *   border-radius                                 10px
 *
 * Read from the actual rules rather than inferred, so hover inverts to solid
 * black exactly as it does elsewhere on the site instead of darkening the
 * orange — which is what a generic hover would have done.
 * ------------------------------------------------------------------------ */

:root,
.sylp-location {
	/* Falls back to the shipped near-black when brand_ink is unset. */
	--sylp-ink: #14171a;
}

.sylp-button--primary:hover,
.sylp-button--primary:focus-visible {
	background: var( --sylp-ink );
	color: var( --sylp-on-ink );
}

.sylp-button--secondary:hover,
.sylp-button--secondary:focus-visible {
	background: var( --sylp-accent );
	border-color: var( --sylp-accent-text );
	color: var( --sylp-accent-contrast );
}

/* The snapshot band uses the same near-black as the site's button hover. */
.sylp-snapshot {
	background: var( --sylp-ink );
}

/* Brand orange leads the trust band; the other three stay distinct. */
.sylp-trust__block--orange {
	background: var( --sylp-accent );
	color: var( --sylp-accent-contrast );
}

/* ---------------------------------------------------------------------------
 * Branded hero fallback
 *
 * Used when no licence-verified photograph of the colonia exists. Deliberately
 * designed rather than apologetic: the visitor should see an intentional brand
 * graphic, not a hole where an image failed.
 *
 * Same aspect ratio as a real hero, so replacing it with a photograph later is
 * a data change with no layout consequence.
 * ------------------------------------------------------------------------ */

.sylp-brandhero {
	align-items: flex-end;
	aspect-ratio: 16 / 7;
	background: var( --sylp-ink );
	display: flex;
	max-height: 420px;
	min-height: 240px;
	overflow: hidden;
	position: relative;
}

/*
 * Street-grid suggestion: two sets of hairlines at an angle, echoing a map
 * without pretending to be one of any particular place. Kept very low contrast
 * so the colonia name always wins.
 */
.sylp-brandhero__grid {
	background-image:
		repeating-linear-gradient( 90deg, rgba( 255, 255, 255, .07 ) 0 1px, transparent 1px var( --sylp-hero-pitch, 64px ) ),
		repeating-linear-gradient( 0deg, rgba( 255, 255, 255, .07 ) 0 1px, transparent 1px var( --sylp-hero-pitch, 64px ) );
	inset: 0;
	position: absolute;
	transform: rotate( var( --sylp-hero-rot, -12deg ) ) scale( 1.9 );
	transform-origin: center;
}

/* A single warm sweep from the brand accent, anchored bottom-left behind the type. */
.sylp-brandhero::after {
	background: radial-gradient(
		120% 100% at var( --sylp-hero-x, 8% ) var( --sylp-hero-y, 100% ),
		color-mix( in srgb, var( --sylp-accent ) 52%, transparent ) 0%,
		transparent 62%
	);
	content: "";
	inset: 0;
	position: absolute;
}

/*
 * A quiet brand mark, bottom-right, so the band is not an empty rectangle. Two
 * concentric rings echoing the pin on the map section — deliberately faint: it
 * is texture, not a logo, and the heading beneath must stay the loudest thing
 * on the page.
 */
.sylp-brandhero__mark {
	aspect-ratio: 1;
	border: 2px solid rgba( 255, 255, 255, .13 );
	border-radius: 50%;
	bottom: -18%;
	display: block;
	height: 62%;
	position: absolute;
	right: -6%;
	z-index: 1;
}

.sylp-brandhero__mark::after {
	border: 2px solid rgba( 255, 255, 255, .1 );
	border-radius: 50%;
	content: "";
	inset: 22%;
	position: absolute;
}

/*
 * Six variants, chosen by a checksum of the colonia name so a page always gets
 * the same one. Every variant keeps the identical band height, radius and
 * spacing; only the direction of the accent wash and the angle and pitch of the
 * motif change. The point is that no two adjacent pages look copy-pasted, not
 * that they look unrelated.
 */

/* A vignette on every variant, so the band has depth rather than reading flat. */
.sylp-brandhero__mark,
.sylp-brandhero__grid {
	pointer-events: none;
}

/* color-mix is well supported but not universal; a flat tint is the fallback. */
@supports not ( background: color-mix( in srgb, red 50%, transparent ) ) {
	.sylp-brandhero::after {
		background: linear-gradient( 75deg, var( --sylp-accent ) 0%, transparent 58% );
		opacity: .5;
	}
}

/*
 * The variant selectors above are more specific than a bare
 * `.sylp-brandhero__grid`, so the reduced-motion reset has to match that
 * specificity or it silently loses the cascade.
 */
@media ( prefers-reduced-motion: reduce ) {

	.sylp-brandhero__grid,
	.sylp-brandhero[style] .sylp-brandhero__grid {
		transform: none;
	}
}

/* Attribution for licensed photography ----------------------------------- */

/*
 * CC BY-SA requires visible credit. Small, but never hidden and never
 * display:none — an attribution a user cannot see does not satisfy the licence.
 */
.sylp-credit {
	color: var( --sylp-muted );
	font-size: .78rem;
	margin: .4rem 0 0;
	padding-inline: 1rem;
}

/* The hero bleeds, so its credit line has to be brought back to the column. */
.sylp-hero > .sylp-credit {
	margin: .7rem auto 0;
	max-width: var( --sylp-max-width );
	padding-inline: var( --sylp-gutter, 10px );
	width: 100%;
}

.sylp-credit a {
	color: inherit;
}

/* Branded welcome card --------------------------------------------------- */

/*
 * Companion to the branded hero, used where no second photograph exists.
 * Quieter than the hero because it sits beside body copy, and it carries the
 * store's own details so the space does real work rather than apologising for
 * a missing image.
 */
/*
 * No fixed aspect ratio. It held the card to 4:3 regardless of what was in it,
 * which was survivable with four lines and is not now that the journey facts sit
 * underneath. A minimum height keeps it from collapsing on a short row while the
 * content decides the rest.
 */
.sylp-brandcard {
	align-items: stretch;
	background: var( --sylp-surface );
	border: 1px solid var( --sylp-border );
	border-left: 4px solid var( --sylp-accent );
	border-radius: var( --sylp-radius );
	display: flex;
	flex-direction: column;
	gap: .45rem;
	justify-content: center;
	min-height: 16rem;
	padding: clamp( 1.15rem, 3vw, 1.9rem );
}

/* Verified journey facts, in a two-column list that will not wrap mid-value. */
.sylp-brandcard__journey {
	border-top: 1px solid var( --sylp-border );
	display: grid;
	gap: 0.3rem 1rem;
	margin: 0.75rem 0 0;
	padding-top: 0.75rem;
}

.sylp-brandcard__row {
	align-items: baseline;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
}

.sylp-brandcard__row dt {
	color: var( --sylp-muted );
	font-size: 0.82rem;
}

.sylp-brandcard__row dd {
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.sylp-brandcard__label {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}

.sylp-brandcard__address {
	color: var( --sylp-muted );
	font-style: normal;
	line-height: 1.45;
}

.sylp-brandcard__meta {
	color: var( --sylp-muted );
	font-size: .9rem;
}

.sylp-brandcard__phone {
	font-weight: 600;
	margin-top: .2rem;
}

/* ---------------------------------------------------------------------------
 * Elementor kit interop
 *
 * The live site's global kit styles the bare elements this plugin renders, and
 * it does so with one class plus one element — `.elementor-kit-12 a`,
 * `.elementor-kit-12 h2` — which is specificity (0,1,1). Every rule above is
 * a single class, (0,1,0). The kit wins all of them, and the results are not
 * subtle:
 *
 *   - `a { color: var(--e-global-color-primary) }` painted the primary button's
 *     label the same orange as its own background. The text was present, sized
 *     and centred, and completely invisible. That is the empty orange button in
 *     the review screenshots.
 *   - `h1..h6 { color: ... }` forced near-black headings, so every heading on a
 *     dark section — the whole Border Information Hub — went black on charcoal.
 *   - `text-transform: capitalize` on the body reached every paragraph the
 *     plugin renders, turning sentences into Title Case: "Drive Time Is An
 *     Estimate; The Border Wait Is Live And Changes Through The Day."
 *
 * Doubling the class is a deliberate specificity bump to (0,2,1). It beats the
 * kit on merit rather than on source order, which matters because load order
 * between a plugin stylesheet and a kit is not something this file controls.
 * !important is avoided throughout so the operator can still override any of it.
 * ------------------------------------------------------------------------ */

/* --- Sentence case, as written ------------------------------------------- */

/*
 * Copy renders as authored. The uppercase labels below are set deliberately by
 * rules of their own further up and are re-asserted here so this reset cannot
 * flatten them.
 */
.sylp-location.sylp-location,
.sylp-location.sylp-location p,
.sylp-location.sylp-location li,
.sylp-location.sylp-location td,
.sylp-location.sylp-location th,
.sylp-location.sylp-location a,
.sylp-location.sylp-location h1,
.sylp-location.sylp-location h2,
.sylp-location.sylp-location h3,
.sylp-location.sylp-location h4,
.sylp-location.sylp-location h5,
.sylp-location.sylp-location h6 {
	text-transform: none;
}

.sylp-location.sylp-location .sylp-card__label,
.sylp-location.sylp-location .sylp-btc__label,
.sylp-location.sylp-location .sylp-section__eyebrow,
.sylp-location.sylp-location .sylp-bic__eyebrow,
.sylp-location.sylp-location .sylp-trust__label,
.sylp-location.sylp-location .sylp-facts__label {
	text-transform: uppercase;
}

/* --- Headings take their colour from their section ----------------------- */

/*
 * `inherit` rather than a fixed value: a heading on a white section picks up the
 * page ink, one inside the dark hub picks up the hub's white, and a section
 * added later is correct without a new rule.
 */
.sylp-location.sylp-location h1,
.sylp-location.sylp-location h2,
.sylp-location.sylp-location h3,
.sylp-location.sylp-location h4,
.sylp-location.sylp-location h5,
.sylp-location.sylp-location h6 {
	color: inherit;
}

/* --- Buttons keep their own contrast ------------------------------------- */

.sylp-location.sylp-location .sylp-button--primary {
	background: var( --sylp-accent );
	color: var( --sylp-accent-contrast );
}

.sylp-location.sylp-location .sylp-button--primary:hover,
.sylp-location.sylp-location .sylp-button--primary:focus-visible {
	background: var( --sylp-ink );
	color: var( --sylp-on-ink );
}

.sylp-location.sylp-location .sylp-button--secondary {
	background: transparent;
	color: var( --sylp-accent-text );
}

.sylp-location.sylp-location .sylp-button--secondary:hover,
.sylp-location.sylp-location .sylp-button--secondary:focus-visible {
	background: var( --sylp-accent );
	color: var( --sylp-accent-contrast );
}

/* Buttons that sit on a dark section invert instead of vanishing into it. */
.sylp-location.sylp-location .sylp-bic .sylp-button--secondary,
.sylp-location.sylp-location .sylp-snapshot .sylp-button--secondary {
	border-color: rgb( 255 255 255 / 45%);
	color: #fff;
}

/* --- Links in body copy -------------------------------------------------- */

/*
 * The kit's orange is the brand link colour and is kept. On the dark hub it
 * fails contrast against charcoal, so those links go white and stay underlined,
 * which is how a link on a dark ground is identified without colour.
 */
.sylp-location.sylp-location .sylp-bic a:not( .sylp-button ),
.sylp-location.sylp-location .sylp-snapshot a:not( .sylp-button ) {
	color: #fff;
	text-decoration: underline;
}

/* --- A type scale that survives the kit ---------------------------------- */

/*
 * The kit also sets heading *sizes*: h2 is 54px, h1 is 70px, site-wide. Those are
 * page-title sizes and they are correct for a page title. Applied to a section
 * heading inside a half-width column they are not: "Welcome to Colonia Federal,
 * Tijuana" broke over five lines in a 300px column, and "Map" — one word
 * labelling a small panel — rendered larger than the paragraph it introduced.
 *
 * So the scale below is re-asserted at a specificity the kit cannot reach. It is
 * the scale this stylesheet always intended; it just never won the cascade.
 */
.sylp-location.sylp-location h1 {
	font-size: clamp( 2.4rem, 5.4vw, 4.2rem );
	line-height: 1.06;
}

.sylp-location.sylp-location h2 {
	font-size: clamp( 1.45rem, 2.6vw, 1.9rem );
	line-height: 1.18;
}

.sylp-location.sylp-location h3 {
	font-size: clamp( 1.1rem, 1.8vw, 1.32rem );
	line-height: 1.25;
}

.sylp-location.sylp-location h4 {
	font-size: 1.05rem;
	line-height: 1.3;
}

.sylp-location.sylp-location h5,
.sylp-location.sylp-location h6 {
	font-size: 0.95rem;
	line-height: 1.35;
}

/*
 * The hub heading leads the page's one dark section, so it carries more weight
 * than a section title on white — but well short of the kit's 54px, which turned
 * a data dashboard into a billboard.
 */
.sylp-location.sylp-location .sylp-bic__title {
	font-size: clamp( 1.6rem, 3vw, 2.15rem );
	letter-spacing: -0.01em;
}

/* The wait-times table sits under the hub heading and must read as its child. */
.sylp-location.sylp-location .sylp-bic__detailtitle {
	font-size: clamp( 1.05rem, 1.7vw, 1.25rem );
}

/* Card figures are the point of the dashboard; labels introduce them quietly. */
.sylp-location.sylp-location .sylp-bic__value {
	font-size: clamp( 1.45rem, 2.4vw, 1.8rem );
	line-height: 1.1;
}

/*
 * Headings that label a card are card-sized, whatever the kit says about h2.
 * "Ready to Get Started?" is an H2 for document structure; it is not a section
 * title, and at section-title size it dominates the panel it sits in.
 */
.sylp-location.sylp-location .sylp-card__title,
.sylp-location.sylp-location .sylp-landmark__name,
.sylp-location.sylp-location .sylp-insight__question {
	font-size: 1.1rem;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * Sidebar behaviour
 *
 * The main column runs several thousand pixels; the sidebar holds a CTA and a
 * pricing panel and is done in about six hundred. The remainder used to be an
 * empty 395px channel running the whole length of the page.
 *
 * Making it sticky fills that space with the one thing worth keeping in view —
 * the conversion point — instead of with nothing. `align-self: start` is what
 * makes it work: a grid item stretches to its row by default, and an element
 * that is already as tall as its container has nowhere to stick to.
 * ------------------------------------------------------------------------ */

@media ( min-width: 60em ) {

	.sylp-location__sidebar {
		align-self: start;
		position: sticky;
		top: 1.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * Contrast on light surfaces
 *
 * The brand orange is #F36E23. Against the #F6F6F6 card surface it measures
 * 2.75:1 and against white 2.97:1 — both short of the 4.5:1 WCAG AA needs for
 * body text. That is fine for a button *background* and it is the site's link
 * colour, so neither is touched here.
 *
 * What is touched: the places where orange was carrying text that is not a
 * prose link. A card title inside a card that is itself a link does not need
 * link colour — the card, its border, its hover state and its cue arrow already
 * say it is clickable — so the title can be ink and become legible. The orange
 * stays exactly where it reads as brand: buttons, cues, and links in running
 * text.
 * ------------------------------------------------------------------------ */

.sylp-location.sylp-location a.sylp-card,
.sylp-location.sylp-location a.sylp-card .sylp-card__title {
	color: var( --sylp-ink );
}

.sylp-location.sylp-location .sylp-card__cue {
	color: var( --sylp-accent-text );
}

/*
 * Phone numbers keep an underline so they are still identifiable as something
 * to tap once the colour is no longer doing that job.
 */
.sylp-location.sylp-location .sylp-brandcard__phone,
.sylp-location.sylp-location .sylp-button__sub {
	color: var( --sylp-ink );
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.sylp-location.sylp-location .sylp-button--primary .sylp-button__sub {
	color: var( --sylp-accent-contrast );
}

/*
 * The same treatment for the two remaining orange-on-light links: the phone
 * number in the CTA card's footnote, and the "Call Now" ghost button whose
 * entire label is a phone number. Both are tap targets first and brand colour
 * second.
 */
.sylp-location.sylp-location .sylp-card__meta a,
.sylp-location.sylp-location .sylp-button--ghost {
	color: var( --sylp-ink );
}

.sylp-location.sylp-location .sylp-card__meta a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ===========================================================================
 * Design system, second pass
 *
 * Built from the three reference designs. What was taken from them is the
 * *structure* of a premium page — a section header that announces itself, cards
 * with real elevation, figures that carry weight, data that reads as data — and
 * not their content. Every number the references show (populations, founding
 * dates, review counts, years in business) is invented, and none of it appears
 * here. These pages only ever display what the location data actually holds.
 * ======================================================================== */

/* --- Section headers ----------------------------------------------------- */

/*
 * Icon, title, and a short accent rule beneath. The rule is what does most of
 * the work: it gives every section a definite start, which is the single
 * clearest difference between the reference pages and a stack of headings.
 */
.sylp-section__title,
.sylp-facts__title {
	font-weight: 750;
	letter-spacing: -0.015em;
	margin-bottom: 1.1rem;
	padding-bottom: 0.7rem;
	position: relative;
}

.sylp-section__title::after,
.sylp-facts__title::after {
	background: var( --sylp-accent );
	border-radius: 2px;
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 2.6rem;
}

/* The icon gets a tinted chip so it reads as deliberate rather than stray. */
.sylp-section__title .sylp-icon,
.sylp-facts__title .sylp-icon {
	background: color-mix( in srgb, var( --sylp-accent ) 12%, transparent );
	border-radius: 8px;
	box-sizing: content-box;
	height: 1.05em;
	padding: 0.36em;
	width: 1.05em;
}

/* --- Panels -------------------------------------------------------------- */

/*
 * One elevation for every panel on the page. The references are consistent
 * about this in a way the previous build was not: some sections had a border,
 * some a background, some neither, and the page read as assembled rather than
 * designed.
 */
.sylp-section,
.sylp-facts,
.sylp-welcome,
.sylp-map,
.sylp-landmarks,
.sylp-about,
.sylp-insights {
	--sylp-panel-shadow: 0 1px 2px rgb( 20 23 26 / 5%), 0 10px 26px -18px rgb( 20 23 26 / 28%);
}

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

/*
 * The reference border panel gives each card a coloured top edge and a status
 * dot, so the state of a crossing is readable before the number is. The colour
 * carries meaning here, not decoration: green is moving, amber is slow, red is
 * heavy, grey is unreported. It is never the only signal — the figure and its
 * caption always say the same thing in words.
 */
.sylp-bic__card {
	border-top: 3px solid var( --sylp-card-accent, transparent );
	position: relative;
	transition: transform .16s ease, border-color .16s ease;
}

.sylp-bic__card--wait { --sylp-card-accent: #3f9d6b; }
.sylp-bic__card--slow { --sylp-card-accent: #d08a1e; }
.sylp-bic__card--heavy { --sylp-card-accent: #c9503f; }
.sylp-bic__card--rate { --sylp-card-accent: #4f7fc4; }
.sylp-bic__card--best { --sylp-card-accent: var( --sylp-accent ); }
.sylp-bic__card--stamp { --sylp-card-accent: #6b7280; }
.sylp-bic__card.is-quiet { --sylp-card-accent: #4b5058; }

.sylp-bic__status {
	align-items: center;
	color: rgb( 255 255 255 / 62%);
	display: flex;
	font-size: 0.68rem;
	gap: 0.4rem;
	letter-spacing: 0.04em;
	margin-top: 0.6rem;
}

.sylp-bic__status::before {
	background: var( --sylp-card-accent, #6b7280 );
	border-radius: 50%;
	content: "";
	flex: 0 0 auto;
	height: 7px;
	width: 7px;
}

@media ( prefers-reduced-motion: no-preference ) {

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

/* --- Quick facts band ---------------------------------------------------- */

/*
 * A band of figures rather than a grid of boxes. The reference runs these as a
 * single strip directly under the hero, which is where a reader looks for the
 * page's headline numbers.
 */
.sylp-facts__grid {
	gap: 0;
}

.sylp-fact {
	border-left: 1px solid var( --sylp-border );
	padding: 0.15rem 1.1rem;
}

.sylp-fact:first-child {
	border-left: 0;
	padding-left: 0;
}

.sylp-fact__label {
	color: var( --sylp-muted );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sylp-fact__value {
	font-size: 1.02rem;
	font-weight: 650;
	line-height: 1.3;
}

@media ( max-width: 767px ) {

	.sylp-fact {
		border-left: 0;
		padding-inline: 0;
	}
}

/* --- Trust band ---------------------------------------------------------- */

.sylp-trust__block {
	padding: 1.35rem 1.25rem;
}

.sylp-trust__value {
	font-size: clamp( 1.5rem, 2.6vw, 2rem );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.sylp-trust__label {
	font-weight: 700;
	letter-spacing: 0.01em;
}

.sylp-trust__note {
	font-size: 0.84rem;
	opacity: 0.86;
}

/*
 * Labels that happen to be headings.
 *
 * "Estimated Total Travel Time" and "USD ⇄ MXN Exchange Rate" are H3s for
 * document structure, but they label a block of data rather than opening a
 * section. The kit-interop scale above sized and cased them as section headings,
 * which turned two quiet captions into two competing titles inside a panel that
 * already has one.
 */
.sylp-location.sylp-location .sylp-btc__subtitle {
	color: rgb( 255 255 255 / 72%);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The welcome heading spans both columns of its panel. */
.sylp-welcome__heading {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

/*
 * The map beside it is a fixed-ratio embed, so the welcome panel is the one
 * that benefits from the extra width. 1.15fr against 1fr gives the business
 * card and the prose about 40px each without squeezing the map below the point
 * where street names are readable.
 */
@media ( min-width: 60em ) {

	.sylp-pair {
		grid-template-columns: 1.15fr 1fr;
	}
}

/*
 * The ghost button inside the CTA card is a third action stacked under two real
 * buttons, and as an underlined text link it read as a stray sentence rather
 * than as the third item in a set. It keeps the lowest weight of the three — no
 * fill, a hairline outline — but it is unmistakably a button.
 */
.sylp-location.sylp-location .sylp-card--cta .sylp-button--ghost {
	border: 1px solid var( --sylp-border );
	text-decoration: none;
}

.sylp-location.sylp-location .sylp-card--cta .sylp-button--ghost:hover,
.sylp-location.sylp-location .sylp-card--cta .sylp-button--ghost:focus-visible {
	border-color: var( --sylp-ink );
}

/* The prose column starts at the top of the panel, beside the card, not centred
   against it — the card is always taller and the gap belongs at the bottom. */
.sylp-welcome__inner {
	align-items: start;
}

/*
 * The on-image button, added to the interop layer for the same reason as the
 * other two: `.elementor-kit-12 a` is (0,1,1) and a single class is (0,1,0), so
 * a new button variant is painted brand orange the moment it ships. Orange on a
 * translucent panel over a daylight photograph is exactly the low-contrast
 * result this whole layer exists to prevent.
 */
.sylp-location.sylp-location .sylp-button--onimage {
	color: #fff;
}

.sylp-location.sylp-location .sylp-button--onimage:hover,
.sylp-location.sylp-location .sylp-button--onimage:focus-visible {
	color: var( --sylp-ink );
}

/* ---------------------------------------------------------------------------
 * Border hub: official customs resource
 *
 * A single quiet row at the foot of the hub, beside Plan Your Trip. It is a
 * reference, not a call to action, so it takes the secondary treatment and none
 * of the orange — the page still has exactly one primary button.
 * ------------------------------------------------------------------------ */

.sylp-bic__resource {
	align-items: center;
	border-top: 1px solid var( --sylp-bic-line );
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	justify-content: space-between;
	margin-top: 1.5rem;
	padding-top: 1.4rem;
}

.sylp-bic__resourcetext {
	flex: 1 1 22rem;
	min-width: 0;
}

.sylp-bic__resourcetitle {
	align-items: center;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	font-weight: 700;
	gap: 0.6rem;
	margin: 0 0 0.3rem;
}

/*
 * Says outright that the destination is a government site. A visitor about to
 * be sent off a commercial page to read customs law should know whose page they
 * are landing on before they click, not after.
 */
.sylp-bic__official {
	background: rgb( 255 255 255 / 10%);
	border: 1px solid rgb( 255 255 255 / 22%);
	border-radius: 999px;
	color: rgb( 255 255 255 / 78%);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.16rem 0.5rem;
	text-transform: uppercase;
}

.sylp-bic__resourcebody {
	color: rgb( 255 255 255 / 72%);
	font-size: 0.9rem;
	margin: 0;
	max-width: 62ch;
}

/*
 * `flex: 0 0 auto` here overflowed a 390px phone by 20px: the label is long,
 * the button was forbidden to shrink, and the label had nowhere to wrap. It may
 * shrink now, and it is capped at the row width so it can never push the page
 * sideways again.
 */
.sylp-bic__resourcelink {
	flex: 0 1 auto;
	max-width: 100%;
	text-align: center;
}

.sylp-bic__ext {
	display: inline-block;
	margin-left: 0.15em;
}

/* ---------------------------------------------------------------------------
 * Accent on dark grounds
 *
 * The darker text-orange exists to survive a white or near-white background.
 * On the hub's #1c1f24 the brand orange already measures 5.56:1, so those
 * sections opt back into it and keep the accent looking exactly as approved
 * where it is most visible.
 * ------------------------------------------------------------------------ */

.sylp-bic,
.sylp-snapshot,
.sylp-hero__overlay,
.sylp-hero__traitbar {
	--sylp-accent-text: var( --sylp-accent );
}

/*
 * Prose links in the content sections.
 *
 * These carry no class of their own, so they were still inheriting the kit's
 * bright `.elementor-kit-12 a` orange — 2.97:1 on white — along with any arrow
 * span nested inside them. Scoped to `.sylp-section` and `.sylp-prose` on
 * purpose: it keeps the hero, the breadcrumb trail and the dark hub out of
 * range, all three of which set their own colours and already pass.
 */
.sylp-location.sylp-location .sylp-section a:not( .sylp-button ):not( .sylp-card ),
.sylp-location.sylp-location .sylp-prose a {
	color: var( --sylp-accent-text );
}

/* ===========================================================================
 * City neighbourhood directory
 *
 * Rendered by the [sylp_city_directory] shortcode, which is designed to be
 * dropped into the site's existing city page rather than to become a page of
 * its own. It therefore inherits whatever the host page provides and styles
 * only its own contents.
 * ======================================================================== */

.sylp-dir {
	--sylp-accent: #f36e23;
	--sylp-accent-text: #b54e0e;
	--sylp-ink: #14171a;
	--sylp-muted: #5c6670;
	--sylp-border: #e0e3e7;
	--sylp-surface: #f6f6f6;
	--sylp-radius: 10px;

	margin-inline: auto;
	max-width: 1250px;
	padding-inline: 10px;
}

.sylp-dir__title {
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
	padding-bottom: 0.7rem;
	position: relative;
}

.sylp-dir__title::after {
	background: var( --sylp-accent );
	border-radius: 2px;
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 2.6rem;
}

.sylp-dir__lede {
	color: var( --sylp-muted );
	margin: 0 0 2rem;
	max-width: 62ch;
}

.sylp-dir__block {
	margin-bottom: 2.5rem;
}

.sylp-dir__grouptitle {
	align-items: center;
	display: flex;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
}

.sylp-dir__count {
	background: var( --sylp-surface );
	border: 1px solid var( --sylp-border );
	border-radius: 999px;
	color: var( --sylp-muted );
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.1rem 0.5rem;
}

.sylp-dir__note {
	color: var( --sylp-muted );
	font-size: 0.9rem;
	margin: -0.4rem 0 1rem;
}

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

.sylp-dir__grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-dir__card {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	color: var( --sylp-ink );
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

@media ( prefers-reduced-motion: no-preference ) {

	.sylp-dir__card:hover,
	.sylp-dir__card:focus-visible {
		border-color: var( --sylp-accent );
		box-shadow: 0 10px 26px -18px rgb( 20 23 26 / 45%);
		transform: translateY( -2px );
	}
}

.sylp-dir__media {
	aspect-ratio: 16 / 9;
	display: block;
	overflow: hidden;
}

.sylp-dir__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*
 * The branded stand-in for a colonia with no licensed photograph. Same shape as
 * a real one, so a photograph dropping in later changes nothing about the grid.
 */
.sylp-dir__image--branded {
	background:
		radial-gradient( 120% 100% at 12% 100%, rgb( 243 110 35 / 45%) 0%, transparent 62% ),
		repeating-linear-gradient( 90deg, rgb( 255 255 255 / 7%) 0 1px, transparent 1px 58px ),
		var( --sylp-ink );
	display: block;
	height: 100%;
	width: 100%;
}

.sylp-dir__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.1rem 1.1rem;
}

.sylp-dir__name {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.sylp-dir__tagline {
	color: var( --sylp-muted );
	font-size: 0.9rem;
	line-height: 1.45;
}

.sylp-dir__meta {
	color: var( --sylp-muted );
	display: flex;
	flex-wrap: wrap;
	font-size: 0.78rem;
	gap: 0.3rem 0.9rem;
	margin-top: auto;
	padding-top: 0.6rem;
}

.sylp-dir__area {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sylp-dir__cue {
	color: var( --sylp-accent-text );
	font-size: 0.84rem;
	font-weight: 700;
	padding-top: 0.5rem;
}

/* --- Lists --------------------------------------------------------------- */

.sylp-dir__list {
	columns: 3 200px;
	column-gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sylp-dir__list li {
	break-inside: avoid;
	padding: 0.28rem 0;
}

.sylp-dir__list a {
	color: var( --sylp-accent-text );
	text-decoration: none;
}

.sylp-dir__list a:hover,
.sylp-dir__list a:focus-visible {
	text-decoration: underline;
}

@media ( max-width: 520px ) {

	.sylp-dir__list {
		columns: 1;
	}
}

/*
 * Kit interop for the directory.
 *
 * The shortcode lands on an ordinary page where `.elementor-kit-12` styles the
 * bare elements exactly as it does on a location page: Title Case on every
 * sentence, 54px headings, and brand orange on every link. The directory needs
 * the same treatment the location pages already have, scoped to its own class.
 */
.sylp-dir.sylp-dir,
.sylp-dir.sylp-dir p,
.sylp-dir.sylp-dir li,
.sylp-dir.sylp-dir a,
.sylp-dir.sylp-dir span,
.sylp-dir.sylp-dir h2,
.sylp-dir.sylp-dir h3,
.sylp-dir.sylp-dir h4 {
	text-transform: none;
}

.sylp-dir.sylp-dir .sylp-dir__area {
	text-transform: uppercase;
}

.sylp-dir.sylp-dir h2 {
	font-size: clamp( 1.45rem, 2.6vw, 1.9rem );
	line-height: 1.18;
}

.sylp-dir.sylp-dir h3 {
	font-size: clamp( 1.1rem, 1.8vw, 1.32rem );
	line-height: 1.25;
}

.sylp-dir.sylp-dir .sylp-dir__name {
	font-size: 1.05rem;
	line-height: 1.25;
}

.sylp-dir.sylp-dir h2,
.sylp-dir.sylp-dir h3,
.sylp-dir.sylp-dir h4 {
	color: inherit;
}

.sylp-dir.sylp-dir a {
	text-decoration: none;
}

.sylp-dir.sylp-dir .sylp-dir__card,
.sylp-dir.sylp-dir .sylp-dir__card .sylp-dir__name {
	color: var( --sylp-ink );
}

.sylp-dir.sylp-dir .sylp-dir__list a {
	color: var( --sylp-accent-text );
}

.sylp-dir.sylp-dir .sylp-dir__list a:hover,
.sylp-dir.sylp-dir .sylp-dir__list a:focus-visible {
	text-decoration: underline;
}

/* --- Directory: search, filters and index -------------------------------- */

.sylp-dir__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1rem;
	margin-bottom: 1rem;
}

.sylp-dir__controls[hidden] {
	display: none;
}

.sylp-dir__search {
	flex: 1 1 18rem;
	max-width: 26rem;
}

.sylp-dir__input {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	color: inherit;
	font: inherit;
	padding: 0.65rem 0.9rem;
	width: 100%;
}

.sylp-dir__input:focus-visible {
	border-color: var( --sylp-accent );
	outline: 2px solid var( --sylp-accent );
	outline-offset: 1px;
}

.sylp-dir__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.sylp-dir__chip {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: 999px;
	color: var( --sylp-muted );
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.34rem 0.8rem;
}

.sylp-dir__chip:hover {
	border-color: var( --sylp-accent );
	color: var( --sylp-ink );
}

.sylp-dir__chip.is-active {
	background: var( --sylp-accent );
	border-color: var( --sylp-accent );
	color: var( --sylp-accent-contrast );
}

.sylp-dir__countline {
	color: var( --sylp-muted );
	font-size: 0.86rem;
	font-weight: 600;
	margin: 0 0 1.1rem;
}

.sylp-dir__item[hidden] {
	display: none;
}

.sylp-dir__empty {
	background: var( --sylp-surface );
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	color: var( --sylp-muted );
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
}

.sylp-dir__index {
	border-top: 1px solid var( --sylp-border );
	margin-top: 2.5rem;
	padding-top: 1.6rem;
}

.sylp-dir__indextitle {
	margin: 0 0 0.9rem;
}

/*
 * Chips and the search field, against the kit.
 *
 * `.elementor-kit-12 button` fills every button with brand orange and uppercases
 * it, which turned all seven area filters into identical orange pills — the
 * active one indistinguishable from the six inactive ones. Same doubled-class
 * bump as everywhere else in this file.
 */
.sylp-dir.sylp-dir .sylp-dir__chip {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: 999px;
	color: var( --sylp-muted );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0;
	padding: 0.34rem 0.8rem;
	text-transform: none;
}

.sylp-dir.sylp-dir .sylp-dir__chip:hover {
	border-color: var( --sylp-accent );
	color: var( --sylp-ink );
}

.sylp-dir.sylp-dir .sylp-dir__chip.is-active {
	background: var( --sylp-accent );
	border-color: var( --sylp-accent );
	color: var( --sylp-accent-contrast );
}

.sylp-dir.sylp-dir .sylp-dir__input {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	color: var( --sylp-ink );
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
}

/*
 * Anchor landing.
 *
 * The site header is transparent and pulls itself 105px over whatever it sits
 * on, so a jump to #sylp-dir-tijuana would park the heading underneath the
 * navigation. This offsets the landing point by the header's own height.
 */
.sylp-dir {
	scroll-margin-top: 150px;
}

/* Breathing room when the directory is appended to a page builder's content. */
.sylp-dir-wrap {
	padding: clamp( 2.5rem, 6vw, 4.5rem ) 0 1rem;
}

/* ===========================================================================
 * Neighbourhood lookup
 *
 * A navigation control, not a section: quiet enough that it never competes with
 * the page's own content, prominent enough that someone on the wrong colonia
 * finds it without scrolling for it.
 * ======================================================================== */

.sylp-lookup {
	margin: clamp( 1.75rem, 4vw, 2.75rem ) 0;
}

.sylp-lookup__inner {
	background: var( --sylp-surface );
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	margin-inline: auto;
	max-width: var( --sylp-max-width );
	padding: clamp( 1.1rem, 3vw, 1.6rem );
	position: relative;
}

.sylp-lookup__title {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.02rem;
	font-weight: 700;
	gap: 0.55rem;
	margin: 0 0 0.25rem;
}

/* The Spanish sits beside the English rather than under it: the audience reads
   both, and stacking them would make the panel twice as tall for no gain. */
.sylp-lookup__es {
	color: var( --sylp-muted );
	font-size: 0.88rem;
	font-weight: 600;
}

.sylp-lookup__lede {
	color: var( --sylp-muted );
	font-size: 0.9rem;
	margin: 0 0 0.9rem;
}

.sylp-lookup__field {
	position: relative;
}

.sylp-lookup__field[hidden] {
	display: none;
}

.sylp-lookup__input {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	color: var( --sylp-ink );
	font: inherit;
	/* 16px on iOS or Safari zooms the whole page when the field is focused. */
	font-size: 1rem;
	padding: 0.7rem 0.95rem;
	width: 100%;
}

.sylp-lookup__input:focus-visible {
	border-color: var( --sylp-accent );
	outline: 2px solid var( --sylp-accent );
	outline-offset: 1px;
}

.sylp-lookup__results {
	background: #fff;
	border: 1px solid var( --sylp-border );
	border-radius: var( --sylp-radius );
	box-shadow: 0 12px 30px -14px rgb( 20 23 26 / 40%);
	list-style: none;
	margin: 0.35rem 0 0;
	max-height: 19rem;
	overflow-y: auto;
	padding: 0.3rem;
	position: absolute;
	width: 100%;
	z-index: 20;
}

.sylp-lookup__results[hidden] {
	display: none;
}

.sylp-lookup__result {
	border-radius: 7px;
}

.sylp-lookup__result.is-active,
.sylp-lookup__result:hover {
	background: var( --sylp-surface );
}

.sylp-location.sylp-location .sylp-lookup__link,
.sylp-lookup__link {
	align-items: baseline;
	color: var( --sylp-ink );
	display: flex;
	flex-wrap: wrap;
	font-weight: 600;
	gap: 0.2rem 0.6rem;
	/* A comfortable target on a phone without looking oversized on a desktop. */
	padding: 0.62rem 0.7rem;
	text-decoration: none;
}

.sylp-lookup__area {
	color: var( --sylp-muted );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.sylp-lookup__empty {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin: 0.75rem 0 0;
}

.sylp-lookup__empty[hidden] {
	display: none;
}

.sylp-lookup__emptytext {
	color: var( --sylp-muted );
	font-size: 0.92rem;
}

.sylp-lookup__emptytext span[lang="es"] {
	display: block;
}

.sylp-lookup__fallback {
	font-size: 0.88rem;
	margin: 0.8rem 0 0;
}

/* Kit interop, same doubled-class bump as everywhere else in this file. */
.sylp-lookup.sylp-lookup .sylp-lookup__title,
.sylp-lookup.sylp-lookup .sylp-lookup__lede,
.sylp-lookup.sylp-lookup .sylp-lookup__input,
.sylp-lookup.sylp-lookup .sylp-lookup__link,
.sylp-lookup.sylp-lookup .sylp-lookup__emptytext {
	text-transform: none;
}

.sylp-lookup.sylp-lookup .sylp-lookup__area {
	text-transform: uppercase;
}

.sylp-lookup.sylp-lookup .sylp-lookup__link {
	color: var( --sylp-ink );
	text-decoration: none;
}

/* ===========================================================================
 * Location finder
 *
 * Where this replaces the site's own HTML widget it inherits that widget's
 * styling through the shared .location-* classes. Everything below is either
 * the new third level or the prominence the brief asked for — never a
 * redefinition of what the site already draws.
 * ======================================================================== */

.sylp-finder {
	margin-inline: auto;
	max-width: var( --sylp-max-width, 1250px );
	padding-inline: 10px;
}

.sylp-finder__head {
	margin-bottom: 1.25rem;
	text-align: center;
}

.sylp-finder__title {
	letter-spacing: -0.015em;
	margin: 0 0 0.35rem;
}

.sylp-finder__lede {
	color: var( --sylp-muted, #5c6670 );
	margin: 0 auto;
	max-width: 52ch;
}

/*
 * Fallbacks only. Where the site's own widget CSS is present it wins, because
 * these are the same declarations it already makes; where this shortcode is
 * used on a page that never had that widget, the control still looks right.
 */
.sylp-finder__select {
	background: #fff;
	border: 1px solid var( --sylp-border, #e0e3e7 );
	border-radius: 10px;
	color: var( --sylp-ink, #14171a );
	font: inherit;
	/* 16px stops iOS zooming the page when the control takes focus. */
	font-size: 1rem;
	min-height: 46px;
	padding: 0 0.7rem;
	width: 100%;
}

.sylp-finder__select:disabled {
	background: var( --sylp-surface, #f6f6f6 );
	color: var( --sylp-muted, #5c6670 );
	cursor: not-allowed;
}

.sylp-finder__select:focus-visible {
	border-color: var( --sylp-accent, #f36e23 );
	outline: 2px solid var( --sylp-accent, #f36e23 );
	outline-offset: 1px;
}

.sylp-finder__btn[disabled] {
	cursor: not-allowed;
	opacity: 0.45;
}

.sylp-finder__hint {
	color: var( --sylp-muted, #5c6670 );
	font-size: 0.82rem;
	margin: 0.35rem 0 0;
	min-height: 1.1em;
}

/* The third level reads as the same family as the two above it. */
.sylp-finder__box--hood .location-label::after {
	background: var( --sylp-accent, #f36e23 );
	border-radius: 999px;
	content: "";
	display: inline-block;
	height: 6px;
	margin-left: 0.45rem;
	vertical-align: middle;
	width: 6px;
}

@media ( max-width: 767px ) {

	.sylp-finder__box,
	.sylp-finder__box .location-row {
		width: 100%;
	}

	.sylp-finder__btn {
		width: 100%;
	}
}