@layer tokens, base, components;

/*
 * Breakpoints (min-width, mobile-first):
 *   25rem     / 400px  — brand tagline, full-text CTA
 *   34rem     / 544px  — desktop hero crop, 2-up gallery, footer row
 *   40rem     / 640px  — hero arrows, lightbox arrows at the sides
 *   50rem     / 800px  — two-column branches, two-column info grid
 *   53.75rem  / 860px  — inline nav, drawer off
 *   56.25rem  / 900px  — 4-up gallery
 */

/* ===================== TOKENS ===================== */
@layer tokens {
	:root {
		/* Brand */
		--red: #e31e24;
		--red-soft: #ff8b8e;
		--navy: #0d2340;
		--navy-dark: #0a1a30;

		/* Text */
		--ink: #1a1a1a;
		--body: #3a3f47;
		--muted: #6b7280;

		/* Surfaces */
		--white: #fff;
		--surface: #fff;
		--bg: #f2f3f5;
		--line: #e4e6ea;
		--line-hover: #c7cbd1;
		--hero-bg: #0d1220;

		/* On dark backgrounds */
		--on-dark: #cfd7e3;
		--footer-text: #a9b4c4;
		--on-dark-soft: rgb(255 255 255 / 0.72);
		--on-dark-faint: rgb(255 255 255 / 0.5);
		--on-dark-dim: rgb(255 255 255 / 0.4);
		--glass: rgb(255 255 255 / 0.12);
		--glass-soft: rgb(255 255 255 / 0.08);
		--glass-hover: rgb(255 255 255 / 0.24);

		/* Scrims and controls */
		--scrim: rgb(0 0 0 / 0.45);
		--scrim-strong: rgb(0 0 0 / 0.88);
		--control: rgb(0 0 0 / 0.35);
		--control-hover: rgb(0 0 0 / 0.55);
		--control-navy: rgb(13 35 64 / 0.55);

		/* Shadows */
		--shadow-header: 0 0.125rem 0.75rem rgb(0 0 0 / 0.07);
		--shadow-float: 0 0.375rem 1.125rem rgb(0 0 0 / 0.28);
		--shadow-tip: 0 0.25rem 0.875rem rgb(0 0 0 / 0.15);

		/* Status */
		--ok: #1c8a3c;
		--ok-bg: #e9f8ee;
		--warn: #b26a00;
		--warn-bg: #fff4e5;
		--alert: #b5171c;
		--alert-bg: #fdecec;

		/* Ratings */
		--star: #f5a623;
		--star-empty: #d9dce1;

		/* Third-party brand */
		--whatsapp: #25d366;
		--whatsapp-hover: #1ebe5a;
		--whatsapp-glow: rgb(37 211 102 / 0.5);

		/* Type */
		--ff-body: "Barlow", system-ui, sans-serif;
		--ff-head: "Barlow Condensed", var(--ff-body);

		--fs-xs: 0.7rem;
		--fs-sm: 0.75rem;
		--fs-md: 0.85rem;
		--fs-base: 0.9rem;
		--fs-lg: 1rem;
		--fs-xl: 1.375rem;

		/* Layout */
		--wrap: 82.5rem;
		--gutter: clamp(1rem, 4vw, 1.25rem);
		--header-h: 3.625rem;
		--radius: 0.25rem;
		--ease: cubic-bezier(0.4, 0, 0.2, 1);

		--z-float: 150;
		--z-overlay: 190;
		--z-header: 200;
		--z-drawer: 300;
	}

	@media (min-width: 53.75rem) {
		:root {
			--header-h: 4rem;
		}
	}
}

/* ===================== BASE ===================== */
@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		scroll-behavior: smooth;
		/* Sticky header must not cover anchor targets. */
		scroll-padding-top: var(--header-h);
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			transition-duration: 0.01ms !important;
		}
	}

	body {
		font-family: var(--ff-body);
		background: var(--bg);
		color: var(--ink);
		-webkit-font-smoothing: antialiased;
	}

	body.is-nav-open {
		overflow: hidden;
	}

	img,
	svg {
		display: block;
		max-width: 100%;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	button {
		font: inherit;
		cursor: pointer;
	}

	a:focus-visible,
	button:focus-visible {
		outline: 0.125rem solid var(--red);
		outline-offset: 0.1875rem;
		border-radius: 0.125rem;
	}

	.screen-reader-text {
		position: absolute;
		width: 0.0625rem;
		height: 0.0625rem;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.skip-link {
		position: absolute;
		top: -6.25rem;
		left: var(--gutter);
		z-index: 999;
		padding: 0.625rem 1rem;
		background: var(--navy);
		color: var(--white);
		font-weight: 600;
		border-radius: 0 0 var(--radius) var(--radius);
	}

	.skip-link:focus {
		top: 0;
	}

	.wrap {
		max-width: var(--wrap);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}
}

/* ===================== COMPONENTS ===================== */
@layer components {

	/* ---------- Button ---------- */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-family: var(--ff-head);
		font-weight: 700;
		font-size: var(--fs-md);
		letter-spacing: 0.02em;
		white-space: nowrap;
		padding: 0.625rem 1.125rem;
		border: 0.0625rem solid var(--line);
		border-radius: var(--radius);
		background: var(--surface);
		color: var(--body);
		transition: background 0.15s var(--ease),
					border-color 0.15s var(--ease),
					color 0.15s var(--ease);
	}

	.btn:hover {
		border-color: var(--line-hover);
	}

	.btn--dark {
		background: var(--navy);
		border-color: var(--navy);
		color: var(--white);
	}

	.btn--dark:hover {
		background: var(--navy-dark);
		border-color: var(--navy-dark);
	}

	.btn--whatsapp {
		background: var(--whatsapp);
		border-color: var(--whatsapp);
		color: var(--white);
	}

	.btn--whatsapp:hover {
		background: var(--whatsapp-hover);
		border-color: var(--whatsapp-hover);
	}

	/* ---------- Header ---------- */
	.site-header {
		position: sticky;
		top: 0;
		z-index: var(--z-header);
		background: var(--surface);
		border-bottom: 0.0625rem solid var(--line);
		transition: box-shadow 0.2s var(--ease);
	}

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

	.site-header__inner {
		max-width: var(--wrap);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--gutter);
		padding-right: var(--gutter);
		height: var(--header-h);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.site-header__actions {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		flex-shrink: 0;
	}

	/* Icon-only CTA is the small-screen default. */
	.site-header__cta {
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
	}

	.site-header__cta-text {
		position: absolute;
		width: 0.0625rem;
		height: 0.0625rem;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.site-header__cta-icon {
		display: block;
		width: 1.125rem;
		height: 1.125rem;
		fill: currentColor;
	}

	/* ---------- Brand ---------- */
	.brand {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		min-width: 0;
	}

	.brand__mark {
		background: var(--red);
		color: var(--white);
		font-family: var(--ff-head);
		font-weight: 900;
		font-size: var(--fs-lg);
		line-height: 1;
		letter-spacing: 0.03em;
		padding: 0.25rem 0.5rem;
		border-radius: 0.125rem;
		flex-shrink: 0;
	}

	.brand__text {
		font-family: var(--ff-head);
		line-height: 1.2;
		min-width: 0;
	}

	.brand__name {
		display: block;
		font-weight: 700;
		font-size: var(--fs-md);
		color: var(--navy);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.brand__tagline {
		display: none;
		font-weight: 500;
		font-size: var(--fs-xs);
		color: var(--muted);
		white-space: nowrap;
	}

	.brand--image img {
		height: auto;
		width: auto;
		max-height: calc(var(--header-h) - 1.25rem);
	}

	.custom-logo-link {
		display: block;
	}

	/* ---------- Nav: drawer is the default ---------- */
	.site-nav {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: var(--z-drawer);
		width: min(18.75rem, 82vw);
		background: var(--surface);
		padding: calc(var(--header-h) + 1.25rem) 1.5rem 1.5rem;
		transform: translateX(100%);
		transition: transform 0.28s var(--ease);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

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

	.site-nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.site-nav__item + .site-nav__item {
		border-top: 0.0625rem solid var(--line);
	}

	.site-nav__link {
		display: block;
		padding-top: 0.875rem;
		padding-bottom: 0.875rem;
		font-size: var(--fs-lg);
		font-weight: 600;
		color: var(--body);
		transition: color 0.15s var(--ease);
	}

	/* Anchor menus have no server-side current state — JS sets is-active. */
	.site-nav__link:hover,
	.site-nav__link.is-active {
		color: var(--red);
	}

	/* ---------- Toggle ---------- */
	.nav-toggle {
		display: inline-flex;
		width: 2.5rem;
		height: 2.5rem;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0.0625rem solid var(--line);
		border-radius: var(--radius);
		padding: 0;
		flex-shrink: 0;
		z-index: 999;
	}

	.nav-toggle__bars {
		position: relative;
		width: 1.125rem;
		height: 0.125rem;
		background: var(--navy);
		transition: background 0.2s var(--ease);
	}

	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 0.125rem;
		background: var(--navy);
		transition: transform 0.25s var(--ease);
	}

	.nav-toggle__bars::before {
		top: -0.375rem;
	}

	.nav-toggle__bars::after {
		top: 0.375rem;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
		background: transparent;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
		transform: translateY(0.375rem) rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
		transform: translateY(-0.375rem) rotate(-45deg);
	}

	/* ---------- Overlay ---------- */
	.nav-overlay {
		position: fixed;
		inset: 0;
		z-index: var(--z-overlay);
		background: var(--scrim);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s var(--ease),
					visibility 0.28s var(--ease);
	}

	.nav-overlay.is-visible {
		opacity: 1;
		visibility: visible;
	}

	/* ---------- Hero ---------- */
	.hero {
		position: relative;
		background: var(--hero-bg);
		overflow: hidden;
		width: 100%;
		aspect-ratio: 33 / 14;
	}

	.hero__track {
		position: absolute;
		inset: 0;
	}

	.hero__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 0.8s var(--ease);
		pointer-events: none;
	}

	.hero__slide.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	.hero__link {
		display: block;
		width: 100%;
		height: 100%;
	}

	.hero__img {
		width: 100%;
		height: 100%;
	}

	/* Portrait crop wins on small screens when one is set. */
	.hero__img--mobile {
		display: block;
	}

	.hero__slide:has(.hero__img--mobile) .hero__img:not(.hero__img--mobile) {
		display: none;
	}

	.hero__arrow {
		display: none;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		width: 2.375rem;
		height: 2.375rem;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: var(--control);
		color: var(--white);
		padding: 0;
		transition: background 0.15s var(--ease);
	}

	.hero__arrow:hover {
		background: var(--control-hover);
	}

	.hero__arrow svg {
		width: 1.5rem;
		height: 1.5rem;
		fill: currentColor;
	}

	.hero__arrow--prev {
		left: 1rem;
	}

	.hero__arrow--next {
		right: 1rem;
	}

	.hero__dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 1rem;
		z-index: 3;
		display: flex;
		justify-content: center;
		gap: 0.5rem;
	}

	.hero__dot {
		width: 0.5625rem;
		height: 0.5625rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--on-dark-faint);
		transition: background 0.2s var(--ease),
					width 0.2s var(--ease);
	}

	.hero__dot.is-active {
		background: var(--white);
		width: 1.375rem;
		border-radius: 0.3125rem;
	}

	/* ---------- Section shell ---------- */
	.section {
		padding-top: 2.375rem;
		padding-bottom: 2.375rem;
	}

	.section__head {
		margin-bottom: 1.125rem;
	}

	.section__eyebrow {
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--red);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		margin-bottom: 0.125rem;
	}

	.section__title {
		font-family: var(--ff-head);
		font-size: 1.5625rem;
		font-weight: 800;
		color: var(--navy);
	}

	/* ---------- Branches ---------- */
	.branches {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.branch {
		display: flex;
		flex-direction: column;
		background: var(--surface);
		border: 0.0625rem solid var(--line);
		border-radius: 0.375rem;
		padding: 1.25rem 1.125rem;
	}

	.branch__status {
		display: none;
		align-items: center;
		gap: 0.375rem;
		width: fit-content;
		font-size: 0.72rem;
		font-weight: 700;
		padding: 0.25rem 0.625rem;
		border-radius: 1.25rem;
		margin-bottom: 0.625rem;
	}

	/* Only rendered once the script resolves a state. */
	.branch__status.is-ready {
		display: inline-flex;
	}

	.branch__status::before {
		content: "";
		width: 0.4375rem;
		height: 0.4375rem;
		border-radius: 50%;
		background: currentColor;
		flex-shrink: 0;
	}

	.branch__status--open {
		color: var(--ok);
		background: var(--ok-bg);
	}

	.branch__status--soon {
		color: var(--warn);
		background: var(--warn-bg);
	}

	.branch__status--closed {
		color: var(--alert);
		background: var(--alert-bg);
	}

	.branch__title {
		font-family: var(--ff-head);
		font-size: 1.125rem;
		font-weight: 800;
		color: var(--navy);
		margin-bottom: 0.375rem;
	}

	.branch__subline {
		font-size: var(--fs-md);
		color: var(--body);
		margin-bottom: 0.125rem;
	}

	.branch__address {
		font-size: var(--fs-md);
		color: var(--muted);
		margin-bottom: 0.875rem;
	}

	.branch__rating {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		font-size: var(--fs-md);
		color: var(--body);
		margin-bottom: 0.875rem;
	}

	.branch__phone {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		font-size: var(--fs-base);
		color: var(--body);
		margin-bottom: 0.875rem;
	}

	.branch__socials {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		list-style: none;
		padding: 0;
		margin: 0 0 1rem;
	}

	.branch__socials a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.875rem;
		height: 1.875rem;
		border-radius: 50%;
		background: var(--bg);
		color: var(--body);
		transition: background 0.15s var(--ease),
					color 0.15s var(--ease);
	}

	.branch__socials a:hover {
		background: var(--navy);
		color: var(--white);
	}

	.branch__socials svg {
		width: 0.9375rem;
		height: 0.9375rem;
		fill: currentColor;
	}

	.branch__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.625rem;
		margin-top: auto;
	}

	/* ---------- Stars ---------- */
	.stars {
		position: relative;
		display: inline-block;
		font-size: 1rem;
		line-height: 1;
		letter-spacing: 0.0625rem;
		white-space: nowrap;
	}

	.stars__base {
		color: var(--star-empty);
	}

	/* Clipped copy layered over the grey row. */
	.stars__fill {
		position: absolute;
		top: 0;
		left: 0;
		width: var(--fill, 0%);
		overflow: hidden;
		color: var(--star);
	}

	/* ---------- Departments ---------- */
	.depts {
		border-top: 0.0625rem solid var(--line);
		margin-bottom: 1rem;
	}

	.depts__toggle {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.75rem 0;
		font-family: var(--ff-head);
		font-size: var(--fs-md);
		font-weight: 700;
		letter-spacing: 0.02em;
		color: var(--navy);
		cursor: pointer;
		list-style: none;
	}

	.depts__toggle::-webkit-details-marker {
		display: none;
	}

	.depts__toggle:hover {
		color: var(--red);
	}

	.depts__count {
		font-family: var(--ff-body);
		font-size: 0.72rem;
		font-weight: 600;
		color: var(--muted);
		background: var(--bg);
		padding: 0.125rem 0.4375rem;
		border-radius: 0.75rem;
	}

	.depts__chev {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
		margin-left: auto;
		transition: transform 0.2s var(--ease);
	}

	.depts[open] .depts__chev {
		transform: rotate(180deg);
	}

	.depts__list {
		list-style: none;
		padding: 0 0 0.75rem;
		margin: 0;
	}

	.depts__row {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		padding: 0.5rem 0;
		border-top: 0.0625rem solid var(--line);
	}

	.depts__row:first-child {
		border-top: 0;
	}

	.depts__label {
		font-size: 0.82rem;
		color: var(--muted);
	}

	.depts__nums {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 0.75rem;
	}

	.depts__num {
		font-size: 0.88rem;
		font-weight: 600;
		color: var(--navy);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.depts__num:hover {
		color: var(--red);
	}

	/* ---------- Gallery carousel ---------- */
	.gallery {
		position: relative;
		--gallery-per-view: 1;
		--gallery-gap: 1rem;
		--gallery-ratio: 1 / 1;
	}

	.gallery__track {
		display: flex;
		gap: var(--gallery-gap);
		list-style: none;
		padding: 0;
		margin: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.gallery__track::-webkit-scrollbar {
		display: none;
	}

	.gallery__track:focus-visible {
		outline: 0.125rem solid var(--red);
		outline-offset: 0.25rem;
		border-radius: 0.5rem;
	}

	.gallery__item {
		flex: 0 0 calc(
			(100% - (var(--gallery-per-view) - 1) * var(--gallery-gap))
			/ var(--gallery-per-view)
		);
		scroll-snap-align: start;
		--gallery-ratio: 4 / 3;
	}

	.gallery__btn {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
		border-radius: 0.5rem;
		overflow: hidden;
		background: var(--line);
		aspect-ratio: var(--gallery-ratio);
	}

	.gallery__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		transition: transform 0.35s var(--ease);
	}

	.gallery__btn:hover .gallery__img {
		transform: scale(1.03);
	}

	/* Arrows appear only once the script confirms there is overflow. */
	.gallery__arrow {
		display: none;
		position: absolute;
		top: calc(50% - 1.5rem);
		transform: translateY(-50%);
		z-index: 2;
		width: 2.375rem;
		height: 2.375rem;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: var(--control-navy);
		color: var(--white);
		padding: 0;
		transition: background 0.15s var(--ease),
					opacity 0.15s var(--ease);
	}

	.gallery.is-scrollable .gallery__arrow {
		display: flex;
	}

	.gallery__arrow:hover {
		background: var(--navy);
	}

	.gallery__arrow:disabled {
		opacity: 0.35;
		cursor: default;
	}

	.gallery__arrow svg {
		width: 1.5rem;
		height: 1.5rem;
		fill: currentColor;
	}

	.gallery__arrow--prev {
		left: 0.5rem;
	}

	.gallery__arrow--next {
		right: 0.5rem;
	}

	/* ---------- Dots, shared by gallery and lightbox ---------- */
	.gallery__dots,
	.lightbox__dots {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		margin-top: 1rem;
	}

	.gallery__dots:empty,
	.lightbox__dots:empty {
		display: none;
	}

	.gallery__dot,
	.lightbox__dot {
		width: 0.5625rem;
		height: 0.5625rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		transition: background 0.2s var(--ease),
					width 0.2s var(--ease);
	}

	.gallery__dot {
		background: var(--line-hover);
	}

	.gallery__dot.is-active {
		background: var(--navy);
		width: 1.375rem;
		border-radius: 0.3125rem;
	}

	/* ---------- Lightbox ---------- */
	.lightbox {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		overflow: hidden;
	}

	.lightbox::backdrop {
		background: var(--hero-bg);
	}

	.lightbox__inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 3.5rem 1rem 5.5rem;
	}

	.lightbox__figure {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		max-width: 100%;
		max-height: 100%;
		margin: 0;
	}

	.lightbox__img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: calc(100vh - 10rem);
		object-fit: contain;
		border-radius: 0.375rem;
	}

	.lightbox__caption {
		font-size: var(--fs-md);
		color: var(--on-dark-soft);
		text-align: center;
	}

	.lightbox__caption:empty {
		display: none;
	}

	.lightbox__close,
	.lightbox__arrow {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: var(--glass);
		color: var(--white);
		padding: 0;
		transition: background 0.15s var(--ease);
	}

	.lightbox__close:hover,
	.lightbox__arrow:hover {
		background: var(--glass-hover);
	}

	.lightbox__close {
		top: 1rem;
		right: 1rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	.lightbox__close svg {
		width: 1.375rem;
		height: 1.375rem;
		fill: currentColor;
	}

	/* Arrows sit low on small screens, beside the image from 640px up. */
	.lightbox__arrow {
		bottom: 12.5rem;
		width: 2.75rem;
		height: 2.75rem;
	}

	.lightbox__arrow svg {
		width: 1.625rem;
		height: 1.625rem;
		fill: currentColor;
	}

	.lightbox__arrow--prev {
		left: calc(50% - 4.5rem);
	}

	.lightbox__arrow--next {
		right: calc(50% - 4.5rem);
	}

	.lightbox__dots {
		position: absolute;
		bottom: 10rem;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		max-width: calc(100% - 2rem);
		flex-wrap: wrap;
	}

	.lightbox__dot {
		background: var(--on-dark-dim);
	}

	.lightbox__dot.is-active {
		background: var(--white);
		width: 1.375rem;
		border-radius: 0.3125rem;
	}

	/* ---------- About ---------- */
	.about {
		background: var(--navy);
		color: var(--white);
		padding-top: 2.375rem;
		padding-bottom: 2.375rem;
	}

	.about__eyebrow {
		font-size: var(--fs-sm);
		font-weight: 700;
		color: var(--red-soft);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		margin-bottom: 0.375rem;
	}

	.about__title {
		font-family: var(--ff-head);
		font-size: 1.375rem;
		font-weight: 800;
		line-height: 1.2;
		margin-bottom: 0.75rem;
	}

	.about__text {
		max-width: 60rem;
		font-size: var(--fs-base);
		line-height: 1.8;
		color: var(--on-dark);
		text-wrap: pretty;
	}

	.about__text p + p {
		margin-top: 0.875rem;
	}

	.about__text a {
		color: var(--white);
		text-decoration: underline;
		text-underline-offset: 0.1875rem;
		transition: color 0.15s var(--ease);
	}

	.about__text a:hover {
		color: var(--red-soft);
	}

	.about__text strong {
		color: var(--white);
	}

	/* ---------- Services and tags ---------- */
	.info {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.625rem;
	}

	.info__title {
		font-family: var(--ff-head);
		font-size: 1.0625rem;
		font-weight: 800;
		color: var(--navy);
		margin-bottom: 0.75rem;
	}

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

	.chips__item {
		font-size: 0.78rem;
		color: var(--body);
		background: var(--surface);
		border: 0.0625rem solid var(--line);
		border-radius: 0.3125rem;
		padding: 0.5rem 0.875rem;
	}

	/* ---------- Footer ---------- */
	.site-footer {
		background: var(--navy-dark);
		color: var(--footer-text);
		padding-top: 1.625rem;
		padding-bottom: 1.625rem;
	}

	.site-footer__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		font-size: 0.78rem;
		text-align: center;
	}

	.site-footer__socials {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.625rem;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.site-footer__socials a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.875rem;
		height: 1.875rem;
		border-radius: 50%;
		background: var(--glass-soft);
		color: var(--white);
		transition: background 0.15s var(--ease);
	}

	.site-footer__socials a:hover {
		background: var(--red);
	}

	.site-footer__socials svg {
		width: 0.9375rem;
		height: 0.9375rem;
		fill: currentColor;
	}

	/* ---------- Floating WhatsApp ---------- */
	.wa-float {
		position: fixed;
		right: 1.125rem;
		bottom: 1.125rem;
		z-index: var(--z-float);
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}

	.wa-float__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.25rem;
		height: 3.25rem;
		border-radius: 50%;
		background: var(--whatsapp);
		color: var(--white);
		box-shadow: var(--shadow-float);
		animation: wa-pulse 2.4s var(--ease) infinite;
		transition: background 0.15s var(--ease);
	}

	.wa-float__btn:hover {
		background: var(--whatsapp-hover);
	}

	.wa-float__btn svg {
		width: 1.75rem;
		height: 1.75rem;
		fill: currentColor;
	}

	/* Tooltip is hover-only, so it never shows on touch. */
	.wa-float__tip {
		order: -1;
		font-size: var(--fs-md);
		font-weight: 600;
		color: var(--ink);
		background: var(--white);
		padding: 0.5625rem 0.875rem;
		border-radius: 0.375rem;
		box-shadow: var(--shadow-tip);
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s var(--ease);
	}

	.wa-float:hover .wa-float__tip {
		opacity: 1;
	}

	@keyframes wa-pulse {
		0%,
		100% {
			box-shadow: var(--shadow-float), 0 0 0 0 var(--whatsapp-glow);
		}
		50% {
			box-shadow: var(--shadow-float), 0 0 0 0.625rem transparent;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.wa-float__btn {
			animation: none;
		}
	}

		/* ---------------------------------------------------------------
	 * Reviews section wrapper.
	 * --------------------------------------------------------------- */
	.reviews {
		background: var(--surface);
		border: 0.0625rem solid var(--line);
		border-radius: 0.5rem;
		padding: 1.25rem 1.125rem;
	}

	/* ---------------------------------------------------------------
	 * Rich Showcase plugin overrides.
	 *
	 * Scoped to .reviews so nothing leaks elsewhere. Only the plugin's
	 * semantic .wp-google-* classes are targeted — its .rpi-* utility
	 * classes are layout internals that change between versions.
	 *
	 * If a plugin update breaks this block, delete it. The section
	 * falls back to the plugin's own styling and stays readable.
	 * --------------------------------------------------------------- */

	.reviews .wp-gr {
		--star-color: var(--star);
		--name-color: var(--navy);
	}

	/* Header */
	.reviews .grw-header {
		padding-bottom: 1rem;
		margin-bottom: 0.25rem;
		border-bottom: 0.0625rem solid var(--line);
	}

	.reviews .wp-google-based {
		font-size: var(--fs-md);
		color: var(--muted);
	}

	.reviews .wp-google-powered {
		font-size: var(--fs-xs);
		color: var(--muted);
	}

	/* "review us on Google" button */
	.reviews .wp-google-wr a {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		font-family: var(--ff-head);
		font-weight: 700;
		font-size: var(--fs-md);
		letter-spacing: 0.02em;
		padding: 0.5rem 1rem;
		border-radius: var(--radius);
		background: var(--navy);
		color: var(--white);
		transition: background 0.15s var(--ease);
	}

	.reviews .wp-google-wr a:hover {
		background: var(--navy-dark);
	}

	/* Review rows */
	.reviews .wp-google-review {
		padding-top: 0.875rem;
		padding-bottom: 0.875rem;
		border-bottom: 0.0625rem solid var(--line);
	}

	.reviews .wp-google-review:last-of-type {
		border-bottom: 0;
	}

	.reviews .wp-google-review .wp-google-name {
		font-family: var(--ff-head);
		font-weight: 700;
		font-size: var(--fs-lg);
	}

	.reviews .wp-google-time {
		font-size: var(--fs-xs);
		color: var(--muted);
	}

	.reviews .wp-google-text {
		font-size: var(--fs-md);
		line-height: 1.65;
		color: var(--body);
	}

	/* Avatars, sized to match the branch social icons */
	.reviews .grw-img {
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 50%;
		object-fit: cover;
	}

	/* "See All Reviews" */
	.reviews .wp-google-url {
		display: inline-block;
		margin-top: 2rem !important;
		font-family: var(--ff-head);
		font-weight: 700;
		font-size: var(--fs-md);
		color: var(--navy);
		transition: color 0.15s var(--ease);
	}

	.reviews .wp-google-url:hover {
		color: var(--red);
	}

	/* ===================== 400px and up ===================== */
	@media (min-width: 25rem) {
		.site-header__inner {
			gap: 1rem;
		}

		.brand__tagline {
			display: block;
		}

		.site-header__cta {
			width: auto;
			height: auto;
			padding: 0.625rem 0.75rem;
			font-size: var(--fs-sm);
		}

		.site-header__cta-text {
			position: static;
			width: auto;
			height: auto;
			clip-path: none;
		}

		.site-header__cta-icon {
			display: none;
		}
	}

	/* ===================== 544px and up ===================== */
	@media (min-width: 34rem) {
		.site-header__cta {
			padding-left: 1.125rem;
			padding-right: 1.125rem;
			font-size: var(--fs-md);
		}

		.brand__mark {
			font-size: var(--fs-xl);
			padding: 0.3125rem 0.625rem;
		}

		.brand__name {
			font-size: var(--fs-base);
		}

		/* Landscape banner takes over. */
		.hero__img--mobile {
			display: none;
		}

		.hero__slide:has(.hero__img--mobile) .hero__img:not(.hero__img--mobile) {
			display: block;
		}

		.branch {
			padding: 1.375rem 1.5rem;
		}

		.branch__title {
			font-size: 1.25rem;
		}

		.depts__row {
			flex-direction: row;
			align-items: baseline;
			justify-content: space-between;
			gap: 1rem;
		}

		.depts__label {
			flex-shrink: 0;
		}

		.depts__nums {
			justify-content: flex-end;
		}

		.gallery {
			--gallery-per-view: 2;
		}

		.site-footer__inner {
			flex-direction: row;
			justify-content: space-between;
			text-align: left;
		}

		.wa-float {
			right: 1.375rem;
			bottom: 1.375rem;
		}

		.wa-float__btn {
			width: 3.75rem;
			height: 3.75rem;
		}

		.wa-float__btn svg {
			width: 2rem;
			height: 2rem;
		}

		.reviews {
			padding: 1.5rem;
		}
	}

	/* ===================== 640px and up ===================== */
	@media (min-width: 40rem) {
		.hero__arrow {
			display: flex;
		}

		.lightbox__inner {
			padding: 3.5rem 5rem 4.5rem;
		}

		.lightbox__img {
			max-height: calc(100vh - 9rem);
		}

		.lightbox__arrow {
			top: 50%;
			bottom: auto;
			transform: translateY(-50%);
		}

		.lightbox__arrow--prev {
			left: 1.5rem;
		}

		.lightbox__arrow--next {
			right: 1.5rem;
		}

		.lightbox__dots {
			bottom: 1.5rem;
		}
	}

	/* ===================== 800px and up ===================== */
	@media (min-width: 50rem) {
		.branches {
			grid-template-columns: repeat(2, 1fr);
		}

		.info {
			grid-template-columns: 1fr 1.4fr;
			gap: 2.25rem;
		}
	}

	/* ===================== 860px and up: drawer off ===================== */
	@media (min-width: 53.75rem) {
		.nav-toggle {
			display: none;
		}

		.site-nav {
			position: static;
			width: auto;
			padding: 0;
			background: none;
			transform: none;
			overflow: visible;
		}

		.site-nav__list {
			flex-direction: row;
			align-items: center;
			gap: 1.75rem;
		}

		.site-nav__item + .site-nav__item {
			border-top: 0;
		}

		.site-nav__link {
			display: inline;
			padding-top: 0;
			padding-bottom: 0;
			font-size: var(--fs-base);
		}
	}

	/* ===================== 900px and up ===================== */
	@media (min-width: 56.25rem) {
		.gallery {
			--gallery-per-view: 4;
		}
	}
}