/**
 * Sarrahs art direction — 1:1 port of the Sarrah's Cafe Trinbago prototype design
 * (coconut cream, teal, mango, pepper; Bricolage Grotesque display + Manrope body).
 */

.art-sarrahs {
	--sr-coconut: #fffdf7;
	--sr-paper: #ffffff;
	--sr-ink: #17372f;
	--sr-muted: #526b64;
	--sr-teal: #13a69f;
	--sr-teal-deep: #0b7772;
	--sr-teal-footer: #075f5b;
	--sr-mango: #ffc928;
	--sr-mango-deep: #f1b817;
	--sr-pepper: #e44830;
	--sr-pepper-deep: #b83222;
	--sr-plantain: #fff0be;
	--sr-mist: #eef8f4;
	--sr-line: #dce8e2;
	--sr-input: #9eb7ae;
	--sr-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--sr-ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
	--sr-font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
	--sr-font-body: "Manrope", "Avenir Next", "Segoe UI", Arial, sans-serif;
	background: var(--sr-coconut);
	color: var(--sr-ink);
	font-family: var(--sr-font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.art-sarrahs ::selection { background: var(--sr-mango); color: var(--sr-ink); }
.art-sarrahs :where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--sr-teal);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--sr-paper);
}
.art-sarrahs a { text-underline-offset: 4px; }
.art-sarrahs img { display: block; }

/* ------- type primitives ------- */
.art-sarrahs .sr-eyebrow {
	color: var(--sr-pepper-deep);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.35;
	text-transform: uppercase;
}
.art-sarrahs .sr-eyebrow--teal { color: var(--sr-teal-deep); }
.art-sarrahs .sr-display,
.art-sarrahs .sr-section-title,
.art-sarrahs .sr-page-title,
.art-sarrahs .sr-hero__title {
	font-family: var(--sr-font-display);
	font-weight: 800;
	margin: 0;
}
.art-sarrahs .sr-display { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.05; }
.art-sarrahs .sr-section-title { max-width: 800px; margin-top: 0.75rem; font-size: clamp(2.6rem, 5vw, 5.15rem); letter-spacing: -0.055em; line-height: 0.92; }
.art-sarrahs .sr-page-title { margin-top: 1rem; color: var(--sr-pepper); font-size: clamp(3rem, 7vw, 6.6rem); letter-spacing: -0.06em; line-height: 0.9; }

/* ------- buttons + links ------- */
.art-sarrahs .sr-button {
	display: inline-flex;
	min-height: 3.35rem;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	border: 0;
	border-radius: 0.9rem;
	padding: 0.88rem 1.35rem;
	font-family: var(--sr-font-body);
	font-size: 0.94rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 220ms var(--sr-ease), box-shadow 220ms var(--sr-ease), background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.art-sarrahs .sr-button--primary { background: var(--sr-mango); color: var(--sr-ink); box-shadow: 0 8px 0 rgba(23, 55, 47, 0.12); }
.art-sarrahs .sr-button--primary:hover { background: var(--sr-mango-deep); box-shadow: 0 11px 0 rgba(23, 55, 47, 0.14); }
.art-sarrahs .sr-button--secondary { border: 1px solid rgba(23, 55, 47, 0.32); background: var(--sr-paper); color: var(--sr-ink); }
.art-sarrahs .sr-button--secondary:hover { border-color: var(--sr-teal); background: var(--sr-mist); color: var(--sr-teal-deep); }
.art-sarrahs .sr-button--pepper { background: var(--sr-pepper-deep); color: var(--sr-paper); box-shadow: 0 8px 0 rgba(144, 37, 25, 0.14); }
.art-sarrahs .sr-button--pepper:hover { background: #952719; }
.art-sarrahs .sr-button:active { transform: scale(0.985); }
@media (hover: hover) {
	.art-sarrahs .sr-button:hover { transform: translateY(-2px); }
}
.art-sarrahs .sr-textlink {
	display: inline-flex;
	min-height: 3rem;
	align-items: center;
	gap: 0.5rem;
	color: var(--sr-teal-deep);
	font-weight: 800;
	text-decoration: none;
}
.art-sarrahs .sr-textlink:hover { text-decoration: underline; }
.art-sarrahs .sr-arrow { display: inline-block; }

/* ------- layout helpers ------- */
.art-sarrahs .sr-container { max-width: 1280px; margin-inline: auto; }
.art-sarrahs .sr-section-head {
	display: grid;
	gap: 1.25rem;
	border-bottom: 1px solid var(--sr-line);
	padding-bottom: 2rem;
}
.art-sarrahs .sr-section-note { max-width: 26rem; color: var(--sr-muted); font-size: 0.95rem; font-weight: 600; line-height: 1.6; }
.art-sarrahs .sr-section-note p { margin: 0 0 0.5rem; }
.art-sarrahs .sr-section-note__links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
@media (min-width: 900px) {
	.art-sarrahs .sr-section-head { grid-template-columns: 1fr auto; align-items: end; }
	.art-sarrahs .sr-section-note { text-align: right; }
	.art-sarrahs .sr-section-note__links { justify-content: flex-end; }
}

/* ------- header ------- */
.art-sarrahs .sr-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--sr-line);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 26px rgba(23, 55, 47, 0.08);
	backdrop-filter: blur(8px);
}
.art-sarrahs .sr-announce { background: var(--sr-mango); text-align: center; }
.art-sarrahs .sr-announce a {
	display: inline-flex;
	min-height: 1.75rem;
	align-items: center;
	gap: 0.5rem;
	padding-inline: 1rem;
	color: var(--sr-ink);
	font-size: 0.69rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-decoration: none;
	text-transform: uppercase;
}
.art-sarrahs .sr-header__inner {
	display: flex;
	height: 62px;
	max-width: 1440px;
	margin-inline: auto;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-inline: 1rem;
}
.art-sarrahs .sr-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--sr-ink); }
.art-sarrahs .sr-brand__logo { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border: 1px solid var(--sr-line); border-radius: 999px; object-fit: contain; }
.art-sarrahs .sr-brand__word { display: none; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.12; text-transform: uppercase; }
.art-sarrahs .sr-brand__word em { color: var(--sr-teal-deep); font-style: normal; }
.art-sarrahs .sr-header__actions { display: flex; align-items: center; gap: 0.6rem; }
.art-sarrahs .sr-header__order { min-height: 2.75rem; padding: 0.6rem 1rem; font-size: 0.85rem; }
.art-sarrahs .sr-nav__list { display: none; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.art-sarrahs .sr-nav__link {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	border-bottom: 3px solid transparent;
	color: var(--sr-muted);
	font-size: 0.79rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 180ms ease, border-color 180ms ease;
}
.art-sarrahs .sr-nav__link:hover,
.art-sarrahs .sr-nav__link.is-current { border-color: var(--sr-pepper); color: var(--sr-ink); }
.art-sarrahs .sr-nav__drawer-order,
.art-sarrahs .sr-nav__drawer-call,
.art-sarrahs .sr-nav__drawer-address { display: none; }
.art-sarrahs .sr-nav-toggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--sr-input);
	border-radius: 0.75rem;
	background: var(--sr-paper);
	color: var(--sr-ink);
	cursor: pointer;
	place-items: center;
}
.art-sarrahs .spotros-nav-toggle-bars { display: grid; gap: 5px; }
.art-sarrahs .spotros-nav-toggle-bars span { width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

@media (min-width: 640px) {
	.art-sarrahs .sr-header__inner { height: 70px; padding-inline: 1.5rem; }
	.art-sarrahs .sr-brand__word { display: block; }
	.art-sarrahs .sr-announce a { font-size: 0.75rem; }
}
@media (min-width: 1280px) {
	.art-sarrahs .sr-nav__list { display: flex; }
	.art-sarrahs .sr-header__inner { padding-inline: 2.5rem; }
}
@media (max-width: 1279.98px) {
	.art-sarrahs .sr-header[data-nav-js="ready"] .sr-nav-toggle { display: grid; }
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav {
		position: fixed;
		inset: 0;
		z-index: 55;
		display: block;
		overflow-y: auto;
		padding: 5.5rem 1.5rem 2.5rem;
		background: var(--sr-coconut);
	}
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__list {
		display: flex;
		width: min(100%, 520px);
		margin-inline: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__list > li { border-bottom: 1px solid var(--sr-line); }
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__link {
		width: 100%;
		min-height: 3rem;
		border-bottom: 0;
		padding: 0.4rem 0.5rem;
		color: var(--sr-ink);
		font-size: 1.15rem;
		letter-spacing: -0.01em;
		text-transform: none;
	}
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__link:hover { color: var(--sr-pepper-deep); }
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__drawer-order { display: block; order: -1; margin-bottom: 0.75rem; border-bottom: 0; }
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__drawer-order a {
		display: flex;
		min-height: 3.5rem;
		align-items: center;
		justify-content: space-between;
		border-radius: 0.75rem;
		background: var(--sr-mango);
		padding-inline: 1rem;
		color: var(--sr-ink);
		font-weight: 800;
		text-decoration: none;
	}
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__drawer-call,
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__drawer-address { display: block; }
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__drawer-call a,
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__drawer-address a {
		display: flex;
		min-height: 2.75rem;
		align-items: center;
		padding: 0.4rem 0.5rem;
		color: var(--sr-muted);
		font-size: 0.95rem;
		font-weight: 700;
		text-decoration: none;
	}
	.art-sarrahs .sr-header[data-nav-open="true"] .sr-nav__drawer-call a { color: var(--sr-ink); font-weight: 800; }
}

/* ------- hero ------- */
.art-sarrahs .sr-hero { position: relative; overflow: hidden; background: var(--sr-coconut); }
.art-sarrahs .sr-hero__ring {
	position: absolute;
	top: 3.5rem;
	left: -6rem;
	width: 16rem;
	height: 16rem;
	border: 44px solid var(--sr-plantain);
	border-radius: 999px;
	opacity: 0.7;
}
.art-sarrahs .sr-hero__inner {
	display: grid;
	max-width: 1440px;
	margin-inline: auto;
	align-items: center;
	gap: 2.25rem;
	padding: 1.75rem 1.25rem 2.5rem;
}
.art-sarrahs .sr-hero__copy { position: relative; z-index: 1; max-width: 650px; }
.art-sarrahs .sr-hero__title { margin-top: 1rem; font-size: clamp(2.65rem, 6vw, 6.35rem); letter-spacing: -0.065em; line-height: 0.89; }
.art-sarrahs .sr-hero__tagline { max-width: 570px; margin: 1.1rem 0 0; color: var(--sr-muted); font-size: 1.05rem; font-weight: 500; line-height: 1.7; }
.art-sarrahs .sr-hero__actions { display: grid; gap: 0.5rem; margin-top: 1.4rem; }
.art-sarrahs .sr-hero__meta { display: flex; gap: 0.5rem; margin: 1rem 0 0; color: var(--sr-muted); font-size: 0.85rem; font-weight: 700; line-height: 1.5; }
.art-sarrahs .sr-hero__media { position: relative; width: 100%; max-width: 790px; margin-inline: auto; padding-bottom: 0.75rem; }
.art-sarrahs .sr-portal { isolation: isolate; }
.art-sarrahs .sr-portal::before,
.art-sarrahs .sr-portal::after {
	content: "";
	position: absolute;
	z-index: -1;
	border: 2px solid rgba(255, 201, 40, 0.92);
	border-radius: 999px;
	pointer-events: none;
}
.art-sarrahs .sr-portal::before { inset: 4% -5% -5% 12%; }
.art-sarrahs .sr-portal::after { inset: 10% -9% -10% 4%; border-color: rgba(228, 72, 48, 0.52); }
.art-sarrahs .sr-hero__frame {
	overflow: hidden;
	border-radius: 2rem 5rem 2rem 5rem;
	background: var(--sr-teal);
	padding: 0.5rem;
}
.art-sarrahs .sr-hero__frame img,
.art-sarrahs .sr-hero__img {
	width: 100%;
	height: 100%;
	min-height: 245px;
	max-height: 350px;
	border-radius: 1.55rem 4.5rem 1.55rem 4.5rem;
	object-fit: cover;
	object-position: center;
}
.art-sarrahs .sr-hero__chip {
	position: absolute;
	bottom: -0.25rem;
	left: 0.25rem;
	border-radius: 1rem;
	background: var(--sr-mango);
	box-shadow: 0 10px 24px rgba(23, 55, 47, 0.15);
	padding: 0.75rem 1rem;
	color: var(--sr-ink);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
@media (min-width: 640px) {
	.art-sarrahs .sr-hero__inner { padding: 2.5rem 2rem 3.5rem; }
	.art-sarrahs .sr-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
	.art-sarrahs .sr-hero__frame { border-radius: 3.3rem 8rem 3.3rem 8rem; padding: 0.75rem; }
	.art-sarrahs .sr-hero__frame img,
	.art-sarrahs .sr-hero__img { max-height: none; aspect-ratio: 3 / 2; border-radius: 2.7rem 7.4rem 2.7rem 7.4rem; }
	.art-sarrahs .sr-hero__chip { left: 2rem; padding-inline: 1.25rem; }
}
@media (min-width: 1280px) {
	.art-sarrahs .sr-hero__inner { min-height: 650px; grid-template-columns: 0.92fr 1.08fr; gap: 3rem; padding-block: 4rem; }
	.art-sarrahs .sr-hero__ring { width: 20rem; height: 20rem; }
	.art-sarrahs .sr-hero__frame img,
	.art-sarrahs .sr-hero__img { aspect-ratio: 16 / 11; }
}

/* ------- utility strip ------- */
.art-sarrahs .sr-utility { border-block: 1px solid var(--sr-line); background: var(--sr-paper); }
.art-sarrahs .sr-utility__inner { display: grid; max-width: 1440px; margin-inline: auto; grid-template-columns: 1fr 1fr; }
.art-sarrahs .sr-utility__item {
	display: flex;
	min-height: 58px;
	align-items: center;
	gap: 0.75rem;
	border-left: 1px solid var(--sr-line);
	padding-inline: 1rem;
	color: var(--sr-ink);
	font-size: 0.88rem;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 180ms ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.art-sarrahs .sr-utility__item:first-child { border-left: 0; }
.art-sarrahs .sr-utility__item:hover { background: var(--sr-mist); }
.art-sarrahs .sr-utility__item--wide { display: none; }
.art-sarrahs .sr-utility__dot { width: 0.65rem; height: 0.65rem; flex-shrink: 0; border-radius: 999px; }
.art-sarrahs .sr-utility__dot--pepper { background: var(--sr-pepper); }
.art-sarrahs .sr-utility__dot--teal { background: var(--sr-teal); }
@media (min-width: 900px) {
	.art-sarrahs .sr-utility__inner { grid-template-columns: repeat(3, 1fr); }
	.art-sarrahs .sr-utility__item { min-height: 68px; padding-inline: 1.75rem; }
	.art-sarrahs .sr-utility__item--wide { display: flex; }
}

/* ------- favorites ------- */
.art-sarrahs .sr-favorites { background: var(--sr-mist); padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-favorites .sr-section-head { border-bottom: 0; padding-bottom: 0; }
.art-sarrahs .sr-favorites__row {
	display: flex;
	gap: 1rem;
	margin: 2rem -1.25rem 0;
	padding: 0 1.25rem 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.art-sarrahs .sr-favorites__row::-webkit-scrollbar { display: none; }
.art-sarrahs .sr-food-card {
	min-width: 84vw;
	overflow: hidden;
	border: 1px solid var(--sr-line);
	border-radius: 1.35rem;
	background: var(--sr-paper);
	box-shadow: 0 16px 40px rgba(23, 55, 47, 0.08);
	scroll-snap-align: start;
}
.art-sarrahs .sr-food-card__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sr-line); }
.art-sarrahs .sr-food-card__photo img,
.art-sarrahs .sr-food-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 620ms var(--sr-ease); }
.art-sarrahs .sr-food-card:hover .sr-food-card__img { transform: scale(1.025); }
.art-sarrahs .sr-food-card__splash {
	position: relative;
	display: flex;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sr-mango);
	padding: 1.5rem;
	color: var(--sr-ink);
}
.art-sarrahs .sr-food-card__ring { position: absolute; border-radius: 999px; }
.art-sarrahs .sr-food-card__ring--white { top: -3rem; right: -3rem; width: 11rem; height: 11rem; border: 26px solid rgba(255, 255, 255, 0.5); }
.art-sarrahs .sr-food-card__ring--pepper { bottom: -5rem; left: -2.5rem; width: 13rem; height: 13rem; border: 34px solid rgba(228, 72, 48, 0.25); }
.art-sarrahs .sr-food-card__shout {
	position: relative;
	max-width: 9ch;
	margin: auto 0 0;
	font-family: var(--sr-font-display);
	font-size: clamp(2.45rem, 4vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.065em;
	line-height: 0.82;
}
.art-sarrahs .sr-food-card__body { padding: 1.35rem; }
.art-sarrahs .sr-food-card__marker { margin: 0; color: var(--sr-pepper-deep); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.art-sarrahs .sr-food-card__name { margin: 0.5rem 0 0; font-family: var(--sr-font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
.art-sarrahs .sr-food-card__note { margin: 0.75rem 0 0; color: var(--sr-muted); font-size: 0.9rem; line-height: 1.55; }
@media (min-width: 640px) {
	.art-sarrahs .sr-favorites { padding: 5rem 2rem; }
	.art-sarrahs .sr-favorites__row { display: grid; margin-inline: 0; padding-inline: 0; grid-template-columns: repeat(3, 1fr); overflow: visible; }
	.art-sarrahs .sr-food-card { min-width: 0; }
}
@media (min-width: 1024px) {
	.art-sarrahs .sr-favorites { padding-block: 6rem; }
	.art-sarrahs .sr-favorites__row { gap: 1.5rem; margin-top: 2.75rem; }
}

/* ------- VIP band ------- */
.art-sarrahs .sr-vipband { background: var(--sr-coconut); padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-vipband__card {
	display: grid;
	max-width: 1180px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--sr-line);
	border-radius: 1.8rem;
	background: var(--sr-paper);
	box-shadow: 0 20px 60px rgba(23, 55, 47, 0.1);
}
.art-sarrahs .sr-vipband__pitch { position: relative; overflow: hidden; background: var(--sr-teal-deep); padding: 1.75rem; color: #ffffff; }
.art-sarrahs .sr-vipband__pitch p { position: relative; max-width: 28rem; line-height: 1.7; color: #ffffff; }
.art-sarrahs .sr-vipband__pitch .sr-display { position: relative; margin-top: 0.75rem; font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -0.045em; line-height: 0.94; }
.art-sarrahs .sr-vipband__ring { position: absolute; top: -2.5rem; right: -2.5rem; width: 12rem; height: 12rem; border: 30px solid rgba(255, 201, 40, 0.8); border-radius: 999px; }
.art-sarrahs .sr-vipband__kicker { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.art-sarrahs .sr-vipband__punch { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 800; }
.art-sarrahs .sr-vipband__slot { display: grid; align-content: center; gap: 0.75rem; padding: 1.5rem; }
.art-sarrahs .sr-vipband__slot p { margin: 0; color: var(--sr-muted); }
.art-sarrahs .sr-vipband__slot .sr-button { justify-self: start; }
@media (min-width: 1024px) {
	.art-sarrahs .sr-vipband { padding: 5rem 2.5rem 4rem; }
	.art-sarrahs .sr-vipband__card { grid-template-columns: 0.8fr 1.2fr; }
	.art-sarrahs .sr-vipband__pitch { padding: 3rem; }
	.art-sarrahs .sr-vipband__slot { padding: 3rem; }
}

/* ------- menu preview ------- */
.art-sarrahs .sr-menupreview { background: var(--sr-coconut); padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-menupreview__card {
	margin-top: 2rem;
	border: 1px solid var(--sr-line);
	border-radius: 1.5rem;
	background: var(--sr-paper);
	box-shadow: 0 16px 45px rgba(23, 55, 47, 0.07);
	padding: 1rem;
}
.art-sarrahs .sr-menupreview__tabs { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--sr-line); }
.art-sarrahs .sr-menupreview__tabs button {
	min-height: 3.25rem;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	padding-inline: 0.75rem;
	color: var(--sr-muted);
	font-family: var(--sr-font-body);
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.15;
	cursor: pointer;
}
.art-sarrahs .sr-menupreview__tabs button[aria-selected="true"] { border-color: var(--sr-pepper); color: var(--sr-ink); }
.art-sarrahs .sr-menupreview__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--sr-line);
	margin-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.art-sarrahs .sr-menupreview__meta p { margin: 0; color: var(--sr-muted); font-size: 0.9rem; }
.art-sarrahs .sr-menuline {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: 1rem;
	border-bottom: 1px solid var(--sr-line);
	padding-block: 1.5rem;
}
.art-sarrahs .sr-menuline__num { padding-top: 0.25rem; color: var(--sr-teal-deep); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; }
.art-sarrahs .sr-menuline__name { margin: 0; font-family: var(--sr-font-display); font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.art-sarrahs .sr-menuline__desc { max-width: 36rem; margin: 0.5rem 0 0; color: var(--sr-muted); font-size: 0.94rem; line-height: 1.55; }
@media (min-width: 768px) {
	.art-sarrahs .sr-menupreview { padding: 5rem 2rem; }
	.art-sarrahs .sr-menupreview__card { padding: 1.75rem 2.5rem 2.5rem; }
	.art-sarrahs .sr-menupreview__tabs { display: flex; }
	.art-sarrahs .sr-menupreview__tabs button { min-height: 3.5rem; flex: 1; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
	.art-sarrahs .sr-menupreview__items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* ------- promotion feature ------- */
.art-sarrahs .sr-promo { background: var(--sr-paper); padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-promo__card { display: grid; margin-top: 2.25rem; overflow: hidden; border: 1px solid var(--sr-line); border-radius: 1.8rem; }
.art-sarrahs .sr-promo__main { position: relative; overflow: hidden; background: var(--sr-mango); padding: 1.75rem; }
.art-sarrahs .sr-promo__shout {
	max-width: 700px;
	margin: 2rem 0 0;
	font-family: var(--sr-font-display);
	font-size: clamp(2.5rem, 5vw, 5.6rem);
	font-weight: 800;
	letter-spacing: -0.055em;
	line-height: 0.9;
}
.art-sarrahs .sr-promo__main p { max-width: 36rem; margin: 1.25rem 0 0; color: rgba(23, 55, 47, 0.8); font-weight: 600; line-height: 1.65; }
.art-sarrahs .sr-promo__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; position: relative; z-index: 1; }
.art-sarrahs .sr-promo__ring { position: absolute; right: -3rem; bottom: -5rem; width: 15rem; height: 15rem; border: 38px solid rgba(255, 255, 255, 0.3); border-radius: 999px; }
.art-sarrahs .sr-promo__aside { display: flex; flex-direction: column; justify-content: flex-end; background: var(--sr-mist); padding: 1.75rem; color: var(--sr-ink); }
.art-sarrahs .sr-promo__kicker { margin: 3rem 0 0; color: var(--sr-pepper-deep); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.art-sarrahs .sr-promo__line { margin: 0.75rem 0 0; font-family: var(--sr-font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.art-sarrahs .sr-promo__fine { margin: 1rem 0 0; color: var(--sr-muted); font-size: 0.9rem; line-height: 1.55; }
@media (min-width: 900px) {
	.art-sarrahs .sr-promo { padding: 5rem 2rem 6rem; }
	.art-sarrahs .sr-promo__card { grid-template-columns: 1.18fr 0.82fr; }
	.art-sarrahs .sr-promo__main { padding: 3.5rem; }
	.art-sarrahs .sr-promo__aside { padding: 3.5rem; }
}

/* ------- CTA band ------- */
.art-sarrahs .sr-ctaband { background: var(--sr-teal-deep); padding: 2.75rem 1.25rem; color: #ffffff; }
.art-sarrahs .sr-ctaband__inner { display: flex; max-width: 1280px; margin-inline: auto; flex-direction: column; justify-content: space-between; gap: 1.75rem; }
.art-sarrahs .sr-ctaband__kicker { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.art-sarrahs .sr-ctaband .sr-display { max-width: 760px; margin-top: 0.5rem; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.045em; line-height: 1.1; }
.art-sarrahs .sr-ctaband .sr-button { flex-shrink: 0; }
@media (min-width: 900px) {
	.art-sarrahs .sr-ctaband { padding: 3.5rem 2.5rem; }
	.art-sarrahs .sr-ctaband__inner { flex-direction: row; align-items: center; }
}

/* ------- catering ------- */
.art-sarrahs .sr-catering { background: var(--sr-mist); padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-catering__card {
	display: grid;
	max-width: 1280px;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 1.8rem;
	background: var(--sr-paper);
	box-shadow: 0 22px 65px rgba(23, 55, 47, 0.1);
}
.art-sarrahs .sr-catering__media { display: grid; grid-template-rows: 1fr auto; gap: 0.5rem; min-height: 430px; background: var(--sr-teal); padding: 0.5rem; }
.art-sarrahs .sr-catering__photo { position: relative; overflow: hidden; border-radius: 1.35rem 1.35rem 0 0; background: var(--sr-plantain); margin: 0; }
.art-sarrahs .sr-catering__photo img,
.art-sarrahs .sr-catering__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 700ms var(--sr-ease); }
.art-sarrahs .sr-catering__photo:hover img { transform: scale(1.025); }
.art-sarrahs .sr-catering__chip {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 10px 24px rgba(23, 55, 47, 0.2);
	padding: 0.5rem 1rem;
	color: var(--sr-ink);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.art-sarrahs .sr-catering__splash { position: relative; display: flex; min-height: 9rem; align-items: flex-end; overflow: hidden; border-radius: 0 0 1.35rem 1.35rem; background: var(--sr-mango); padding: 1.25rem; color: var(--sr-ink); }
.art-sarrahs .sr-catering__ring { position: absolute; top: -4rem; right: -2.5rem; width: 12rem; height: 12rem; border: 28px solid rgba(255, 255, 255, 0.45); border-radius: 999px; }
.art-sarrahs .sr-catering__shout { position: relative; max-width: 11ch; margin: 0; font-family: var(--sr-font-display); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.9; }
.art-sarrahs .sr-catering__body { display: flex; flex-direction: column; justify-content: center; padding: 1.75rem; }
.art-sarrahs .sr-catering__title { margin: 1rem 0 0; font-family: var(--sr-font-display); font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.92; }
.art-sarrahs .sr-catering__body > p { max-width: 36rem; margin: 1.5rem 0 0; color: var(--sr-muted); line-height: 1.65; }
.art-sarrahs .sr-catering__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.art-sarrahs .sr-catering__fine { margin: 1.25rem 0 0; color: var(--sr-muted); font-size: 0.78rem; font-weight: 600; }
@media (min-width: 1024px) {
	.art-sarrahs .sr-catering { padding: 6rem 2.5rem; }
	.art-sarrahs .sr-catering__card { grid-template-columns: 1.08fr 0.92fr; }
	.art-sarrahs .sr-catering__media { min-height: 570px; }
	.art-sarrahs .sr-catering__body { padding: 3.5rem; }
}

/* ------- visit + hours ------- */
.art-sarrahs .sr-visit { background: var(--sr-plantain); padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-visit__inner { display: grid; max-width: 1280px; margin-inline: auto; gap: 2.25rem; }
.art-sarrahs .sr-visit__address { margin-top: 1.75rem; font-style: normal; }
.art-sarrahs .sr-visit__address a {
	display: flex;
	min-height: 4rem;
	max-width: 36rem;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-block: 1px solid rgba(23, 55, 47, 0.2);
	padding-block: 1rem;
	color: var(--sr-ink);
	font-weight: 800;
	text-decoration: none;
}
.art-sarrahs .sr-visit__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.art-sarrahs .sr-visit__hours { border: 1px solid rgba(23, 55, 47, 0.12); border-radius: 1.5rem; background: var(--sr-paper); box-shadow: 0 18px 50px rgba(23, 55, 47, 0.08); padding: 1.5rem; }
.art-sarrahs .sr-visit__hours-head { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--sr-line); padding-bottom: 1.25rem; }
.art-sarrahs .sr-visit__hours-icon { display: grid; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 999px; background: var(--sr-teal); }
.art-sarrahs .sr-visit__hours-kicker { margin: 0; color: var(--sr-pepper-deep); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.art-sarrahs .sr-visit__hours-title { margin: 0; font-weight: 800; }
.art-sarrahs .sr-visit__hours-grid { display: grid; margin: 0.75rem 0 0; font-size: 0.9rem; }
.art-sarrahs .sr-visit__hours-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; border-bottom: 1px solid var(--sr-line); padding-block: 0.9rem; }
.art-sarrahs .sr-visit__hours-row dt { font-weight: 800; }
.art-sarrahs .sr-visit__hours-row dd { margin: 0; color: var(--sr-muted); }
.art-sarrahs .sr-visit__hours-row dd.is-closed { color: var(--sr-pepper-deep); font-weight: 800; }
.art-sarrahs .sr-visit__hours-fine { margin: 1.25rem 0 0; color: var(--sr-muted); font-size: 0.78rem; line-height: 1.5; }
@media (min-width: 1024px) {
	.art-sarrahs .sr-visit { padding: 6rem 2.5rem; }
	.art-sarrahs .sr-visit__inner { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; }
	.art-sarrahs .sr-visit__hours { padding: 2.25rem; }
	.art-sarrahs .sr-visit__hours-grid { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* ------- footer ------- */
/* The bottom padding clears the fixed mobile dock, so it is derived from the same
   two conditions that decide whether the dock is displayed at all, rather than
   restating them as a number. They had drifted: the dock goes display:none at
   768px and on the order page, while the footer went on reserving 7rem for it
   until 900px — 72px of dead teal under the legal line at 768-899px on every
   page, and at every width below 900 on /order/. Below 768 the clearance is real:
   none of the primary buttons fall inside the last viewport, so the dock does
   un-hide over the end of the page. */
.art-sarrahs { --sr-dock-clearance: 4.5rem; }
@media (min-width: 768px) { .art-sarrahs { --sr-dock-clearance: 0rem; } }
.art-sarrahs.page-order { --sr-dock-clearance: 0rem; }
.art-sarrahs .sr-footer { border-top: 6px solid var(--sr-mango); background: var(--sr-teal-footer); padding: 3.5rem 1.25rem calc(2.5rem + var(--sr-dock-clearance)); color: #ffffff; }
/* :not(.sr-button) is load-bearing. `.art-sarrahs .sr-footer a` is (0,2,1) and
   out-specifies `.art-sarrahs .sr-button--primary` (0,2,0) whatever the source
   order, so `color: inherit` was winning on the footer's own call to action and
   painting it white on the mango fill — 1.54:1, against 8.4:1 for the identical
   button everywhere else on the site. The hover rule did the same and added an
   underline no other button has. Footer links want the footer's ink; buttons
   bring their own. */
.art-sarrahs .sr-footer a:not(.sr-button) { color: inherit; text-decoration: none; }
.art-sarrahs .sr-footer a:not(.sr-button):hover { color: #ffffff; text-decoration: underline; }
.art-sarrahs .sr-footer__grid { display: grid; max-width: 1280px; margin-inline: auto; gap: 3rem; }
.art-sarrahs .sr-footer__logo { width: 82px; height: 82px; border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 999px; object-fit: contain; }
.art-sarrahs .sr-footer__lead .sr-display { max-width: 28rem; margin-top: 1.5rem; font-size: clamp(1.9rem, 3.5vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.15; }
.art-sarrahs .sr-footer__lead .sr-button { margin-top: 1.75rem; }
.art-sarrahs .sr-footer__label { margin: 0 0 1rem; color: var(--sr-mango); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.art-sarrahs .sr-footer__visit { font-size: 0.9rem; font-style: normal; }
/* :not() keeps this off the shared footer-map link, which is a card rather than
   a contact row — left alone it was forced to display:flex with a 2.75rem
   min-height, the same kind of broad-descendant capture that turned the footer
   CTA white. */
.art-sarrahs .sr-footer__visit a:not(.spotros-footer-map__link),
.art-sarrahs .sr-footer__visit p { display: flex; min-height: 2.75rem; align-items: center; gap: 0.75rem; margin: 0; }
.art-sarrahs .sr-footer__explore { font-size: 0.9rem; }
.art-sarrahs .sr-footer__explore a { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.art-sarrahs .sr-footer__explore a:last-child { border-bottom: 0; }
.art-sarrahs .sr-footer__legal {
	display: flex;
	max-width: 1280px;
	margin: 3.5rem auto 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 1.5rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.78rem;
}
.art-sarrahs .sr-footer__legal p { margin: 0; }
.art-sarrahs .sr-footer__legal-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
/* 620, not 900. Below this the footer is a single stacked column, and at 900 that
   meant an 812x375 landscape phone — with plenty of width and almost no height —
   was served 1355px of stacked footer, 3.6 screens of it. Three columns fit far
   lower than the prototype assumed: measured on the live site the footer drops to
   582px at 812 and 768, and the columns hold down to about 620, below which the
   address starts breaking to four ragged lines. So the layout now switches where
   it actually stops fitting rather than at a round number.

   The bottom padding must keep the --sr-dock-clearance token rather than restating
   2.5rem as a literal. At 900 a literal was harmless, because the clearance already
   zeroes at 768. At 620 it is not: 620-767px is three columns while the dock is
   STILL displayed, so a flat 2.5rem would drop the dock onto the legal row.

   Six other `@media (min-width: 900px)` blocks in this file have nothing to do with
   the footer (116, 372, 543, 556, 812, 1164). This number must be edited by hand.
   Its partner is the centring block's max-width, which has to stay exactly 0.02
   below it. */
@media (min-width: 620px) {
	.art-sarrahs .sr-footer { padding: 5rem 2.5rem calc(2.5rem + var(--sr-dock-clearance)); }
	.art-sarrahs .sr-footer__grid { grid-template-columns: 1.45fr 1fr 1fr; }
}

/* ------- mobile dock ------- */
.art-sarrahs .sr-mobile-dock {
	position: fixed;
	right: 0.5rem;
	bottom: max(0.5rem, env(safe-area-inset-bottom));
	left: 0.5rem;
	z-index: 40;
	display: grid;
	grid-template-columns: 1.85fr 1fr;
	gap: 0.4rem;
	border: 1px solid var(--sr-line);
	border-radius: 1rem;
	background: var(--sr-paper);
	box-shadow: 0 12px 34px rgba(23, 55, 47, 0.22);
	padding: 0.4rem;
	font-size: 0.78rem;
	font-weight: 800;
	transition: transform 300ms ease, opacity 300ms ease;
}
.art-sarrahs .sr-mobile-dock[hidden] { display: none; }
.art-sarrahs .sr-mobile-dock a { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; text-decoration: none; }
.art-sarrahs .sr-mobile-dock__order { background: var(--sr-mango); color: var(--sr-ink); }
.art-sarrahs .sr-mobile-dock__alt { background: var(--sr-mist); color: var(--sr-teal-deep); }
@media (min-width: 768px) {
	.art-sarrahs .sr-mobile-dock { display: none !important; }
}

/* ------- page scaffolding shared by inner pages ------- */
.art-sarrahs .sr-page-hero { border-bottom: 1px solid var(--sr-line); padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-page-hero__inner { display: grid; max-width: 1280px; margin-inline: auto; gap: 2rem; }
.art-sarrahs .sr-page-hero__lede { max-width: 36rem; color: var(--sr-muted); font-size: 1.1rem; line-height: 1.75; }
.art-sarrahs .sr-page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 1024px) {
	.art-sarrahs .sr-page-hero { padding: 6rem 2.5rem; }
	.art-sarrahs .sr-page-hero__inner { grid-template-columns: 0.85fr 1.15fr; align-items: end; }
}

/* ------- motion ------- */
@media (prefers-reduced-motion: no-preference) {
	.art-sarrahs .sr-hero__media { animation: sr-hero-arrive 720ms var(--sr-ease-emph) both; }
	.art-sarrahs .sr-hero__copy { animation: sr-copy-arrive 620ms var(--sr-ease-emph) both; }
	@keyframes sr-hero-arrive { from { transform: scale(1.015); } to { transform: scale(1); } }
	@keyframes sr-copy-arrive { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
	.art-sarrahs *,
	.art-sarrahs *::before,
	.art-sarrahs *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.art-sarrahs .sr-hero__title-accent { display: block; margin-top: 0.25rem; color: var(--sr-pepper); }

/* ------- icons ------- */
.art-sarrahs .sr-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.art-sarrahs .sr-icon--lg { width: 1.75rem; height: 1.75rem; }
.art-sarrahs .sr-icon--xl { width: 2rem; height: 2rem; }
.art-sarrahs .sr-icon--pepper { color: var(--sr-pepper); }
.art-sarrahs .sr-icon--teal { color: var(--sr-teal-deep); }
.art-sarrahs .sr-icon--mango { color: var(--sr-mango); }
.art-sarrahs .sr-icon--white { color: #ffffff; }
.art-sarrahs .sr-utility__item .sr-icon--teal { color: var(--sr-teal); }
.art-sarrahs .sr-vipband__pitch > .sr-icon--lg { position: relative; }
.art-sarrahs .sr-promo__main > .sr-icon--xl,
.art-sarrahs .sr-promo__aside > .sr-icon--xl { display: block; }
.art-sarrahs .sr-food-card__chip {
	position: relative;
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 8px rgba(23, 55, 47, 0.12);
}
.art-sarrahs .sr-food-card--type .sr-food-card__splash { flex-direction: column; justify-content: space-between; display: flex; }
.art-sarrahs .sr-visit__hours-icon { place-items: center; }
.art-sarrahs .sr-vipband__punch .sr-icon { vertical-align: -2px; }

/* ------- inner pages ------- */
.art-sarrahs .sr-main--mist { background: var(--sr-mist); }
.art-sarrahs .sr-main--plantain { background: var(--sr-plantain); }
.art-sarrahs .sr-page-hero--plantain { background: var(--sr-plantain); }
.art-sarrahs .sr-page-hero--borderless { border-bottom: 0; }

.art-sarrahs .sr-menupage { padding: 3.5rem 1.25rem 5rem; }
.art-sarrahs .sr-menupage__groups { display: grid; gap: 2rem; margin-top: 2.5rem; }
.art-sarrahs .sr-menugroup {
	overflow: hidden;
	border: 1px solid var(--sr-line);
	border-radius: 1.5rem;
	background: var(--sr-paper);
	box-shadow: 0 16px 45px rgba(23, 55, 47, 0.07);
}
.art-sarrahs .sr-menugroup__head { display: grid; gap: 0.75rem; border-bottom: 1px solid var(--sr-line); background: var(--sr-mist); padding: 1.5rem; }
.art-sarrahs .sr-menugroup__title { margin: 0; font-family: var(--sr-font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.art-sarrahs .sr-menugroup__note { display: flex; margin: 0; align-items: center; gap: 0.5rem; color: var(--sr-teal-deep); font-size: 0.85rem; font-weight: 800; }
.art-sarrahs .sr-menugroup__items { display: grid; }
.art-sarrahs .sr-menugroup .sr-menuline { margin-inline: 1.5rem; }
.art-sarrahs .sr-menugroup .sr-menuline:last-child { border-bottom: 0; }
.art-sarrahs .sr-menupage__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	border: 1px solid var(--sr-line);
	border-radius: 1.5rem;
	background: var(--sr-teal-deep);
	padding: 1.75rem;
	color: #ffffff;
}
.art-sarrahs .sr-menupage__cta p { margin: 0; font-weight: 700; }
@media (min-width: 900px) {
	.art-sarrahs .sr-menupage { padding: 5rem 2rem 6rem; }
	.art-sarrahs .sr-menugroup__head { grid-template-columns: 1fr auto; align-items: end; padding: 2rem; }
	.art-sarrahs .sr-menugroup__items { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; padding-inline: 0.5rem; }
}

.art-sarrahs .sr-abouthero { padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-abouthero__inner { display: grid; max-width: 1280px; margin-inline: auto; gap: 2.5rem; }
.art-sarrahs .sr-abouthero__lede { max-width: 36rem; margin-top: 1.75rem; color: rgba(23, 55, 47, 0.8); font-size: 1.1rem; font-weight: 600; line-height: 1.75; }
.art-sarrahs .sr-abouthero__photos { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: end; gap: 1rem; }
.art-sarrahs .sr-abouthero__photo { overflow: hidden; margin: 0; border-radius: 1.5rem; background: var(--sr-plantain); box-shadow: 0 18px 48px rgba(23, 55, 47, 0.1); }
.art-sarrahs .sr-abouthero__photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.art-sarrahs .sr-abouthero__photo--tall img { aspect-ratio: 4 / 5; }
.art-sarrahs .sr-aboutfood { background: var(--sr-mist); padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-aboutfood__inner { display: grid; max-width: 1180px; margin-inline: auto; gap: 2rem; }
.art-sarrahs .sr-aboutfood__cards { display: grid; gap: 1rem; }
.art-sarrahs .sr-aboutfood__card {
	display: flex;
	gap: 1rem;
	border: 1px solid var(--sr-line);
	border-radius: 1.2rem;
	background: var(--sr-paper);
	box-shadow: 0 12px 32px rgba(23, 55, 47, 0.06);
	padding: 1.35rem;
}
.art-sarrahs .sr-aboutfood__card p { margin: 0; color: var(--sr-muted); font-weight: 600; line-height: 1.65; }
.art-sarrahs .sr-aboutfood__q { color: var(--sr-ink) !important; font-weight: 800 !important; margin-bottom: 0.35rem !important; }
.art-sarrahs .sr-aboutfood__spark {
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
	place-items: center;
	border-radius: 999px;
	background: var(--sr-mango);
}

.art-sarrahs .sr-aboutvisit { background: var(--sr-plantain); padding: 2.75rem 1.25rem; }
.art-sarrahs .sr-aboutvisit__inner { display: flex; max-width: 1180px; margin-inline: auto; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.art-sarrahs .sr-aboutvisit__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 1024px) {
	.art-sarrahs .sr-abouthero { padding: 6rem 2.5rem; }
	.art-sarrahs .sr-abouthero__inner { grid-template-columns: 0.88fr 1.12fr; align-items: center; }
	.art-sarrahs .sr-aboutfood { padding: 6rem 2.5rem; }
	.art-sarrahs .sr-aboutfood__inner { grid-template-columns: 0.78fr 1.22fr; align-items: start; }
	.art-sarrahs .sr-aboutvisit__inner { flex-direction: row; align-items: center; }
}

.art-sarrahs .sr-cateringpage__panel { display: grid; gap: 1.25rem; }
.art-sarrahs .sr-cateringpage__card {
	border: 1px solid var(--sr-line);
	border-top: 4px solid var(--sr-teal);
	border-radius: 1.5rem;
	background: var(--sr-paper);
	box-shadow: 0 18px 50px rgba(23, 55, 47, 0.08);
	padding: 1.75rem;
}
.art-sarrahs .sr-cateringpage__card p { color: var(--sr-muted); line-height: 1.65; }
.art-sarrahs .sr-cateringpage__kicker { margin-top: 1.75rem; color: var(--sr-teal-deep); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.art-sarrahs .sr-cateringpage__details { display: grid; margin: 1rem 0 0; padding: 0; gap: 0.75rem; list-style: none; }
.art-sarrahs .sr-cateringpage__details li {
	display: flex;
	min-height: 3.5rem;
	align-items: center;
	gap: 0.75rem;
	border-radius: 0.85rem;
	background: var(--sr-mist);
	padding: 0.75rem 1rem;
	font-size: 0.88rem;
	font-weight: 800;
}
.art-sarrahs .sr-cateringpage__tips { display: grid; gap: 1rem; border-radius: 1.5rem; background: var(--sr-ink); padding: 1.5rem; color: rgba(255, 255, 255, 0.85); }
.art-sarrahs .sr-cateringpage__tips p { margin: 0; font-size: 0.88rem; font-weight: 600; line-height: 1.55; }
@media (min-width: 640px) {
	.art-sarrahs .sr-cateringpage__details { grid-template-columns: 1fr 1fr; }
	.art-sarrahs .sr-cateringpage__tips { grid-template-columns: repeat(3, 1fr); padding: 2rem; }
}

.art-sarrahs .sr-locationpage__cards { display: grid; gap: 1.25rem; }
.art-sarrahs .sr-locationpage__card {
	border: 1px solid rgba(23, 55, 47, 0.12);
	border-radius: 1.5rem;
	background: var(--sr-paper);
	box-shadow: 0 18px 50px rgba(23, 55, 47, 0.08);
	padding: 1.75rem;
	font-style: normal;
}
.art-sarrahs .sr-locationpage__kicker { margin: 0 0 0.5rem; color: var(--sr-pepper-deep); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.art-sarrahs .sr-locationpage__address { display: inline-flex; align-items: flex-start; gap: 0.5rem; color: var(--sr-ink); font-size: 1.2rem; font-weight: 800; line-height: 1.4; text-decoration: none; }
.art-sarrahs .sr-locationpage__address:hover { color: var(--sr-teal-deep); }
.art-sarrahs .sr-locationpage__phone { display: flex; min-height: 2.75rem; align-items: center; gap: 0.75rem; border-top: 1px solid var(--sr-line); margin-top: 1.25rem; padding-top: 1.25rem; color: var(--sr-ink); font-weight: 800; text-decoration: none; }

.art-sarrahs .sr-vippage { padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-vippage__card {
	display: grid;
	max-width: 1180px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--sr-line);
	border-radius: 1.8rem;
	background: var(--sr-paper);
	box-shadow: 0 22px 65px rgba(23, 55, 47, 0.1);
}
.art-sarrahs .sr-vippage__list { display: grid; margin: 1.75rem 0 0; padding: 0; gap: 0.75rem; list-style: none; font-size: 0.88rem; font-weight: 800; }
.art-sarrahs .sr-vippage__list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.art-sarrahs .sr-vippage__slot { display: grid; align-content: center; padding: 1.5rem; }
.art-sarrahs .sr-vippage__fallback h2 { margin-bottom: 0.75rem; }
.art-sarrahs .sr-vippage__fallback p { color: var(--sr-muted); line-height: 1.65; margin-bottom: 1.25rem; }
.art-sarrahs .sr-vippage__promoband { background: var(--sr-plantain); padding: 2.75rem 1.25rem; }
@media (min-width: 1024px) {
	.art-sarrahs .sr-vippage { padding: 6rem 2.5rem; }
	.art-sarrahs .sr-vippage__card { grid-template-columns: 0.82fr 1.18fr; }
	.art-sarrahs .sr-vippage__slot { padding: 3rem; }
}

.art-sarrahs .sr-contactpage { padding: 3.5rem 1.25rem; }
.art-sarrahs .sr-contactpage__inner { display: grid; max-width: 1200px; margin-inline: auto; gap: 2.5rem; }
.art-sarrahs .sr-contactpage__lines { display: grid; border-top: 1px solid var(--sr-line); margin-top: 2rem; }
.art-sarrahs .sr-contactpage__lines a {
	display: flex;
	min-height: 4rem;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid var(--sr-line);
	color: var(--sr-ink);
	font-weight: 800;
	text-decoration: none;
}
.art-sarrahs .sr-contactpage__lines a:hover { color: var(--sr-teal-deep); }
.art-sarrahs .sr-contactpage__card {
	border: 1px solid var(--sr-line);
	border-top: 4px solid var(--sr-teal);
	border-radius: 1.5rem;
	background: var(--sr-paper);
	box-shadow: 0 18px 50px rgba(23, 55, 47, 0.08);
	padding: 1.75rem;
}
.art-sarrahs .sr-contactpage__card > p { color: var(--sr-muted); margin: 0.75rem 0 1.5rem; line-height: 1.65; }
@media (min-width: 1024px) {
	.art-sarrahs .sr-contactpage { padding: 6rem 2.5rem; }
	.art-sarrahs .sr-contactpage__inner { grid-template-columns: 0.78fr 1.22fr; }
	.art-sarrahs .sr-contactpage__card { padding: 3rem; }
}

.art-sarrahs .sr-formframe { width: 100%; min-height: 520px; border: 1px solid var(--sr-line); border-radius: 1rem; background: var(--sr-paper); }
.art-sarrahs .sr-embedframe { border: 1px solid var(--sr-line); border-radius: 1.6rem; background: var(--sr-coconut); padding: 1rem; }
.art-sarrahs .sr-embedframe__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0.5rem 1rem; }
.art-sarrahs .sr-embedframe__bar p { margin: 0; font-weight: 800; }
.art-sarrahs .sr-embedframe iframe { width: 100%; min-height: 520px; border: 0; border-radius: 1rem; background: var(--sr-paper); }

.art-sarrahs .sr-orderpage { padding: 2rem 1rem 4rem; }
.art-sarrahs .sr-orderpage__inner { max-width: 1440px; margin-inline: auto; }
.art-sarrahs .sr-orderpage__frame { width: 100%; min-height: 78vh; border: 1px solid var(--sr-line); border-radius: 1.25rem; background: var(--sr-paper); }
.art-sarrahs .sr-orderpage__alt { margin-top: 1rem; text-align: right; }
.art-sarrahs .sr-orderpage__pickup { margin-top: 0.75rem; font-size: 0.9rem; font-weight: 800; }
.art-sarrahs .sr-orderpage__fallback {
	max-width: 640px;
	margin-inline: auto;
	border: 1px solid var(--sr-line);
	border-radius: 1.5rem;
	background: var(--sr-paper);
	box-shadow: 0 18px 50px rgba(23, 55, 47, 0.08);
	padding: 2.5rem;
	text-align: center;
}
.art-sarrahs .sr-orderpage__fallback p { color: var(--sr-muted); margin: 0.75rem 0 1.5rem; }
.art-sarrahs .sr-orderpage__fallback .sr-page-hero__actions { justify-content: center; }

.art-sarrahs .sr-specialslanes { padding: 3.5rem 1.25rem 5rem; }
.art-sarrahs .sr-specialslanes__grid { display: grid; gap: 1rem; margin-top: 2.25rem; }
.art-sarrahs .sr-specialslanes__card {
	display: flex;
	gap: 1rem;
	border: 1px solid var(--sr-line);
	border-radius: 1.4rem;
	background: var(--sr-paper);
	box-shadow: 0 14px 38px rgba(23, 55, 47, 0.07);
	padding: 1.5rem;
}
.art-sarrahs .sr-specialslanes__title { margin: 0 0 0.5rem; font-family: var(--sr-font-display); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.art-sarrahs .sr-specialslanes__card p { margin: 0; color: var(--sr-muted); font-size: 0.9rem; line-height: 1.55; }
.art-sarrahs .sr-specialslanes__vip {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
	border-radius: 1.5rem;
	background: var(--sr-teal-deep);
	padding: 1.75rem;
	color: #ffffff;
}
.art-sarrahs .sr-specialslanes__kicker { margin: 0 0 0.5rem; color: var(--sr-mango); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.art-sarrahs .sr-specialslanes__vip .sr-button { justify-self: start; align-self: center; }
@media (min-width: 768px) {
	.art-sarrahs .sr-specialslanes__grid { grid-template-columns: 1fr 1fr; }
	.art-sarrahs .sr-specialslanes__vip { grid-template-columns: 1fr auto; padding: 2.25rem; }
}

.art-sarrahs .sr-vipband__pending { margin: 0 0 0.75rem; color: var(--sr-pepper-deep); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.art-sarrahs .sr-vipband__slot .sr-display { margin-bottom: 0.5rem; }
.art-sarrahs .sr-visit__addrline { display: inline-flex; align-items: center; gap: 0.6rem; }
.art-sarrahs .sr-hero__meta .sr-icon { margin-top: 0.1rem; }

.art-sarrahs .sr-menugroup__eyebrow { margin: 0 0 0.5rem; color: var(--sr-pepper-deep); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }

.art-sarrahs .sr-cateringpage__helpful { border-block: 1px solid var(--sr-line); margin-top: 2.25rem; padding: 1.35rem 0; }
.art-sarrahs .sr-cateringpage__helpful p { margin: 0.5rem 0 0; color: var(--sr-muted); line-height: 1.6; }
.art-sarrahs .sr-cateringpage__helpful .sr-cateringpage__kicker { margin-top: 0; }
.art-sarrahs .sr-cateringpage__tip { display: flex; gap: 0.75rem; align-items: flex-start; }
.art-sarrahs .sr-cateringpage__tip .sr-icon { margin-top: 0.2rem; }

.art-sarrahs .sr-vippage__title { font-size: clamp(2.8rem, 5vw, 3.9rem); letter-spacing: -0.055em; line-height: 0.9; }
.art-sarrahs .sr-vippage__slot { gap: 1.25rem; align-content: start; }
.art-sarrahs .sr-vippage__intro { display: flex; gap: 1rem; border-radius: 1.2rem; background: var(--sr-mist); padding: 1.35rem; }
.art-sarrahs .sr-vippage__intro p { margin: 0.35rem 0 0; color: var(--sr-muted); line-height: 1.6; }
.art-sarrahs .sr-vippage__chip { display: grid; width: 2.75rem; height: 2.75rem; flex-shrink: 0; place-items: center; border-radius: 999px; background: var(--sr-mango); color: var(--sr-ink); }
.art-sarrahs .sr-vippage__pendingcard { border: 1px solid var(--sr-line); border-radius: 1.2rem; background: rgba(238, 248, 244, 0.55); padding: 1.5rem; }
.art-sarrahs .sr-vippage__pendingcard p { color: var(--sr-muted); line-height: 1.6; }
.art-sarrahs .sr-vippage__pendingcard h3 { margin: 0.25rem 0 0.5rem; }
.art-sarrahs .sr-vippage__pendingcard .sr-button { margin-top: 0.75rem; }

.art-sarrahs .sr-specialslanes__chip { display: grid; width: 3rem; height: 3rem; flex-shrink: 0; place-items: center; border-radius: 999px; background: var(--sr-mango); }

.art-sarrahs .sr-locationpage__row { display: flex; gap: 1rem; align-items: flex-start; }
.art-sarrahs .sr-locationpage__row--rule { border-bottom: 1px solid var(--sr-line); padding-bottom: 1.25rem; margin-bottom: 0.5rem; }
.art-sarrahs .sr-locationpage__chip { display: grid; width: 3rem; height: 3rem; flex-shrink: 0; place-items: center; border-radius: 999px; background: var(--sr-teal); }

/* ------- neutralize base theme chrome (flat prototype header, no pill) ------- */
.art-sarrahs .spotros-site-header { position: sticky; padding: 0; }
.art-sarrahs .spotros-site-header-inner {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	flex-wrap: nowrap;
	padding: 0 1rem;
}
.art-sarrahs .spotros-stack > * + * { margin-top: 0; }
@media (min-width: 640px) {
	.art-sarrahs .spotros-site-header-inner { padding: 0 1.5rem; }
}
@media (min-width: 1280px) {
	.art-sarrahs .spotros-site-header-inner { padding: 0 2.5rem; }
}

/* ------- mobile copy variants + compact header ------- */
.art-sarrahs .sr-desktop-only { display: none; }
.art-sarrahs .sr-mobile-only { display: inline; }
.art-sarrahs .sr-header__order-short { display: inline; }
.art-sarrahs .sr-header__order-full { display: none; }
@media (min-width: 640px) {
	.art-sarrahs .sr-desktop-only { display: inline; }
	.art-sarrahs .sr-mobile-only { display: none; }
	.art-sarrahs .sr-header__order-short { display: none; }
	.art-sarrahs .sr-header__order-full { display: inline; }
}
@media (max-width: 639.98px) {
	.art-sarrahs .sr-hero__actions .sr-button--secondary { display: none; }
}

/* ------- drawer: prototype right-side sheet (overrides base overlay) ------- */
.art-sarrahs { --spotros-background: var(--sr-coconut); }
.art-sarrahs .sr-nav__sheet-head { display: none; }
@media (max-width: 1279.98px) {
	.art-sarrahs .spotros-site-header[data-nav-js="ready"] .sr-nav-toggle { display: grid; }
	.art-sarrahs .spotros-site-header[data-nav-js="ready"] .spotros-nav { display: none; }
	.art-sarrahs .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		inset: 0 0 0 auto;
		width: min(85vw, 380px);
		z-index: 60;
		background: var(--sr-coconut);
		box-shadow: -24px 0 64px rgba(23, 55, 47, 0.28);
		border-left: 1px solid var(--sr-line);
		padding: 0;
		overflow-y: auto;
		align-items: stretch;
		justify-content: flex-start;
	}
	.art-sarrahs .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sr-nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		max-width: none;
		gap: 0;
		margin: 0;
		padding: 1.25rem 1.5rem 2.5rem;
		text-align: left;
	}
	.art-sarrahs .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sr-nav__sheet-head {
		display: grid;
		gap: 0.35rem;
		border-bottom: 1px solid var(--sr-line);
		padding: 1.25rem 0.25rem 1.5rem;
		margin-bottom: 0.75rem;
	}
	.art-sarrahs .sr-nav__sheet-title { font-family: var(--sr-font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
	.art-sarrahs .sr-nav__sheet-desc { color: var(--sr-muted); font-size: 0.9rem; font-weight: 600; }
	.art-sarrahs .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sr-nav__list > li { border-bottom: 1px solid var(--sr-line); }
	.art-sarrahs .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sr-nav__list > li.sr-nav__sheet-head,
	.art-sarrahs .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sr-nav__list > li.sr-nav__drawer-order { border-bottom: 0; }
	.art-sarrahs .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sr-nav__link {
		width: 100%;
		min-height: 3rem;
		border-bottom: 0;
		padding: 0.4rem 0.5rem;
		color: var(--sr-ink);
		font-size: 1.15rem;
		letter-spacing: -0.01em;
		text-transform: none;
	}
	.art-sarrahs .spotros-site-header[data-nav-open="true"] .sr-nav-toggle {
		position: fixed;
		top: 3rem;
		right: 1rem;
		z-index: 70;
		background: var(--sr-paper);
		box-shadow: 0 6px 18px rgba(23, 55, 47, 0.18);
	}
}

/* backdrop-filter creates a containing block that traps the fixed drawer — drop it while open */
.art-sarrahs .spotros-site-header[data-nav-open="true"] {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: #ffffff;
}

.art-sarrahs .spotros-site-header[data-nav-open="true"] .sr-nav__sheet-head { order: -2; }
@media (max-width: 1279.98px) {
	.art-sarrahs .spotros-site-header[data-nav-open="true"] .sr-nav-toggle { top: 0.85rem; right: 0.85rem; }
}

/* ------- compact order hero: menu above the fold ------- */
.art-sarrahs .sr-page-hero--compact { padding: 1rem 1.25rem; }
.art-sarrahs .sr-page-hero__inner--compact { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.art-sarrahs .sr-page-title--compact { margin-top: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.04em; line-height: 1; }
.art-sarrahs .sr-page-hero--compact .sr-orderpage__pickup { margin: 0; font-size: 0.85rem; }
.art-sarrahs .sr-orderpage { padding: 1rem 1rem 2.5rem; }
.art-sarrahs .sr-orderpage__frame { min-height: calc(100vh - 220px); }
	/* dvh tracks the visible viewport on mobile Safari, where 100vh is the
	   large viewport and puts the frame's bottom under the browser chrome. */
	.art-sarrahs .sr-orderpage__frame { min-height: calc(100dvh - 220px); }
@media (min-width: 900px) {
	.art-sarrahs .sr-page-hero--compact { padding: 1.1rem 2.5rem; }
	.art-sarrahs .sr-orderpage { padding: 1.25rem 2.5rem 3rem; }
}

.art-sarrahs.page-order .sr-mobile-dock { display: none !important; }

/* Pin Bricolage's variable axes to the prototype's wide/round cut — the browser's
   automatic optical sizing condenses it at display sizes and hurts legibility. */
.art-sarrahs .sr-display,
.art-sarrahs .sr-section-title,
.art-sarrahs .sr-page-title,
.art-sarrahs .sr-hero__title,
.art-sarrahs .sr-food-card__shout,
.art-sarrahs .sr-food-card__name,
.art-sarrahs .sr-menugroup__title,
.art-sarrahs .sr-menuline__name,
.art-sarrahs .sr-promo__shout,
.art-sarrahs .sr-promo__line,
.art-sarrahs .sr-catering__title,
.art-sarrahs .sr-catering__shout,
.art-sarrahs .sr-specialslanes__title,
.art-sarrahs .sr-nav__sheet-title {
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14, "wdth" 100;
}

/* ------- platform embeds ------- */
.art-sarrahs .sr-formframe { display: block; width: 100%; min-height: 520px; border: 1px solid var(--sr-line); border-radius: 1rem; background: var(--sr-paper); }
.art-sarrahs .sr-embedframe__frame { display: block; width: 100%; min-height: 520px; border: 0; border-radius: 1rem; background: var(--sr-paper); }
.art-sarrahs .sr-embedframe__title { margin: 0; font-family: var(--sr-font-body); font-size: 1rem; font-weight: 800; }
.art-sarrahs .sr-vippage__direct { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.art-sarrahs .sr-vippage__policy { flex-basis: 100%; margin: 0.25rem 0 0; color: var(--sr-muted); font-size: 0.78rem; }
.art-sarrahs .sr-vippage__policy a { color: var(--sr-teal-deep); }

/* Contact page — other guest routes. The page deliberately has no form of its own,
   so these send anyone who wants the VIP list, catering or ordering to the page that
   handles it instead of leaving them at a phone number. Reuses the contact line
   treatment; only the two-line label/note stacking is new. */
.art-sarrahs .sr-contactpage__routes { margin-top: 2.25rem; }
.art-sarrahs .sr-contactpage__routes .sr-contactpage__lines { margin-top: 0.75rem; }
/* The shared line style is a horizontal flex row, right for a phone number but
   wrong for a label with a note under it — the two ended up side by side. */
.art-sarrahs .sr-contactpage__routes .sr-contactpage__lines a {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	padding: 0.9rem 0;
}
.art-sarrahs .sr-contactpage__route-note {
	margin-top: 0.15rem;
	color: var(--sr-muted);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.45;
}

/* Popup palette. Structure is shared in main.css; this is the only thing this
   direction needs to own, and it reproduces the colours the popups shipped with. */
.art-sarrahs .spotros-pop {
	--pop-surface: var(--sr-coconut);
	--pop-text: var(--sr-ink);
	--pop-muted: var(--sr-muted);
	--pop-hover: var(--sr-mist);
	--pop-media-bg: var(--sr-mist);
	--pop-offer-bg: var(--sr-plantain);
	--pop-scrim: rgba(11, 43, 37, 0.62);
	--pop-shadow: 0 28px 70px rgba(11, 43, 37, 0.34);
	--pop-radius: 20px;
	--pop-radius-sm: 16px;
	--pop-font-display: var(--sr-font-display);
	--pop-ease: var(--sr-ease);
	--pop-ease-emph: var(--sr-ease-emph);
}

.art-sarrahs .spotros-promopop .spotros-pop__close {
	background: rgba(255, 253, 247, 0.92);
	box-shadow: 0 2px 10px rgba(11, 43, 37, 0.22);
}

/* ===========================================================================
   FOOTER — CENTRED WHILE STACKED

   Below 900px .sr-footer__grid collapses to one column and everything in it —
   mark, headline, CTA, the Visit rows, the Explore list — sat hard against the
   left gutter, which reads as content that has slumped into the corner rather
   than a composed sign-off. Centred on a single axis while it is a single
   column; the three-column layout at 900px and up is untouched, because columns
   aligning to their own left edges is what a column grid is for.
   =========================================================================== */
@media (max-width: 619.98px) {
	/* 3rem between five stacked sections is desktop rhythm applied to a phone. */
	.art-sarrahs .sr-footer__grid { gap: 2.25rem; text-align: center; }

	/* Both of these are block-level and width-constrained, so text-align cannot
	   move them — the headline is capped at 28rem and the mark is a fixed 82px
	   block. Auto margins are what put them on the axis; without them the mark
	   stayed pinned to the left gutter while everything around it centred. */
	.art-sarrahs .sr-footer__lead .sr-display,
	.art-sarrahs .sr-footer__logo { margin-inline: auto; }

	.art-sarrahs .sr-footer__visit a,
	.art-sarrahs .sr-footer__visit p { justify-content: center; }

	/* Two up, not eight down. Eight full-width rows at 44px each made the Explore
	   list 380px — a quarter of the whole footer — and stacking links one per line
	   is the single biggest reason the portrait footer ran to 1.75 screens. Two
	   columns halves it to 204px and the tap targets stay 44px tall by 156px wide
	   at 375, which is comfortably past the 44px floor. */
	.art-sarrahs .sr-footer__explore {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
	}

	.art-sarrahs .sr-footer__explore .sr-footer__label { grid-column: 1 / -1; }

	/* The hairlines have to go once this is a grid, and NOT because they look
	   busy. `.sr-footer__explore a:last-child { border-bottom: 0 }` clears the
	   rule under the last item only — in a two-column grid that is the bottom
	   RIGHT cell, so the bottom left keeps a hairline underlining nothing. There
	   is no count-independent CSS selector for "last row", and the link count is
	   merchant-configurable, so any nth-child fix would be right for eight links
	   and wrong for seven. Dropping the rules removes the orphan by construction;
	   the two columns already do the structuring the hairlines were there for. */
	.art-sarrahs .sr-footer__explore a {
		justify-content: center;
		gap: 0.55rem;
		border-bottom: 0;
	}

	.art-sarrahs .sr-footer__legal { justify-content: center; text-align: center; }
	.art-sarrahs .sr-footer__legal-links { justify-content: center; }
}

/* The map card is width-capped, so auto margins are what put it on the axis in
   the centred stack. text-align cannot move it — the host direction may have
   redeclared its display. */
@media (max-width: 619.98px) {
	.art-sarrahs .spotros-footer-map__link { margin-inline: auto; }
}

/* The card takes Sarrah's own corner radius rather than the shared default, so
   it sits in the same family as the buttons and the dock. */
.art-sarrahs .spotros-footer-map__frame { border-radius: 0.9rem; }