/* Direction A — header chrome + hero. Mobile-first; min-width queries up.
   Breakpoints: 375 / 768 / 1280 / 1440 (checked at 1920). */

/* Reset the review scaffold from main.css on this template */
body.direction-a {
	font-family: var(--acs-font-body);
	color: var(--acs-ink);
	background: var(--acs-bg);
}

body.direction-a main {
	display: block;
	place-items: unset;
	min-height: 0;
	padding: 0;
	text-align: initial;
}

body.direction-a :focus-visible {
	outline: 2px solid var(--acs-red);
	outline-offset: 2px;
}

/* Buttons */
body.direction-a .acs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--acs-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--acs-radius);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

body.direction-a .acs-btn--primary {
	background: var(--acs-red);
	color: var(--acs-white);
}

body.direction-a .acs-btn--primary:hover {
	background: var(--acs-red-deep);
}

/* ---------- Header ---------- */

/* Mobile: only the location bar is pinned (fixed); the header box keeps
   its room so the logo row simply scrolls away. Desktop pins the whole bar. */
body.direction-a .acs-header {
	position: relative;
	padding-top: var(--acs-sticky-h);
	z-index: 50;
	background: var(--acs-bg);
}

/* The pinned bar ends in the paper-cut edge instead of a straight line:
   the hero's exported top strip, used as a mask so it tears in the bar's
   own colour. Phones: the location bar, once scrolled. Desktop: the header
   always carries it (the heroes under it drop their own top edge), so the
   tear stays with the bar as the page scrolls. */
body.direction-a .acs-header__topbar::after,
body.direction-a .acs-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - 1px);
	height: clamp(1.25rem, 3.2vw, 3rem);
	-webkit-mask: url("media/masks/hero-top.png") 0 0 / 100% 100% no-repeat;
	mask: url("media/masks/hero-top.png") 0 0 / 100% 100% no-repeat;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

body.direction-a .acs-header__topbar::after {
	background: var(--acs-ground);
}

body.direction-a .acs-header::after {
	display: none;
	background: var(--acs-white);
}

body.direction-a.acs-scrolled .acs-header__topbar::after,
body.direction-a.acs-scrolled .acs-header::after {
	opacity: 1;
}

body.direction-a.acs-scrolled .acs-header__topbar .acs-loc-chip--wide {
	border-bottom-color: transparent;
}

/* Mobile top bar: full-width location chip row. One continuous surface with
   the logo row below it — the chip carries its own soft-grey pill. Hidden on
   desktop (chip moves inline in .acs-header__utils at 1024+). */
body.direction-a .acs-header__topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	height: var(--acs-sticky-h);
	padding: 0;
	background: transparent; /* shows the header behind it; paper once pinned over the page */
}

body.direction-a.acs-scrolled .acs-header__topbar {
	background: var(--acs-ground);
}

/* Full-bleed bar: flush to the top and both edges, flat 5% grey, no rounding.
   Scoped to the topbar so it outranks the base .acs-loc-chip pill. */
body.direction-a .acs-header__topbar .acs-loc-chip--wide {
	display: flex;
	width: 100%;
	justify-content: center;
	background: transparent;                 /* outline only: the yellow line, no fill */
	border: 0;
	border-bottom: 1px solid var(--acs-yellow);
	border-radius: 0;
	padding: 0 var(--acs-gutter);
	min-height: 1.875rem;
	font-size: 0.875rem;
}

body.direction-a .acs-loc-chip--wide .acs-loc-chip__pin {
	margin-right: 0.5rem;
}

body.direction-a .acs-loc-chip--wide .acs-loc-chip__caret {
	margin-left: 0.5rem;
}

body.direction-a .acs-header__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	height: var(--acs-logo-row);
	padding: 0 var(--acs-gutter);
}

/* The logo sits entirely inside its row (client's call: no hanging over
   the hero), centred with a little room above and below. */
body.direction-a .acs-header__logo {
	display: inline-flex;
	flex-shrink: 0;
	align-self: center;
	margin-top: 0;
}

body.direction-a .acs-header__logo img {
	width: auto;
	height: calc(var(--acs-logo-row) - 0.75rem);
}

/* Primary nav: hidden until desktop */
body.direction-a .acs-nav {
	display: none;
}

/* Mobile: hide the desktop utilities row entirely — order + burger + chip
   all live in the mobile top bar or the fixed bottom nav. */
body.direction-a .acs-header__utils {
	display: none;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

/* Location chip: hidden on mobile (top-bar variant covers it) */
body.direction-a .acs-header__utils > .acs-loc-chip {
	display: none;
}

body.direction-a .acs-loc-chip {
	align-items: center;
	gap: 0.5rem;
	font-family: var(--acs-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--acs-ink);
	background: transparent;
	border: 1px solid var(--acs-yellow); /* outline only, no fill (client, 2026-09-28) */
	border-radius: var(--acs-radius-chip);
	padding: 0 0.875rem;
	min-height: 2.375rem;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.direction-a .acs-loc-chip:hover {
	background: transparent;
}

body.direction-a .acs-loc-chip__caret {
	opacity: 0.7;
}

/* Two static states, switched by the body class (no logic this phase) */
body.direction-a .acs-loc-chip__label--selected {
	display: none;
}

body.direction-a.acs-has-location .acs-loc-chip__label--default {
	display: none;
}

body.direction-a.acs-has-location .acs-loc-chip__label--selected {
	display: inline;
}

/* Mobile keeps the 44px tap minimum; desktop tightens to the design's
   38px in the 1024 query below. */
body.direction-a .acs-header__order {
	font-size: 0.8125rem;
	padding: 0 1rem;
	min-height: 2.75rem;
}

body.direction-a .acs-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: none;
	color: var(--acs-ink);
	cursor: pointer;
}

body.direction-a .acs-header__burger .acs-burger-close {
	display: none;
}

body.direction-a.acs-drawer-open .acs-header__burger .acs-burger-open {
	display: none;
}

body.direction-a.acs-drawer-open .acs-header__burger .acs-burger-close {
	display: block;
}

/* ---------- Drawer (mobile) ---------- */

body.direction-a .acs-drawer {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: var(--acs-cream);
	padding: 0 0 calc(var(--acs-nav-clear) + env(safe-area-inset-bottom));
	overflow-y: auto;
	animation: acs-drawer-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Drawer nav keeps the side gutter the full-bleed chip drops */
body.direction-a .acs-drawer__nav {
	padding-inline: var(--acs-gutter);
}

@keyframes acs-drawer-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

body.direction-a .acs-drawer__list > li {
	opacity: 0;
	animation: acs-drawer-item-in 0.4s ease forwards;
}

@keyframes acs-drawer-item-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

body.direction-a .acs-drawer__list > li:nth-child(1) { animation-delay: 0.06s; }
body.direction-a .acs-drawer__list > li:nth-child(2) { animation-delay: 0.10s; }
body.direction-a .acs-drawer__list > li:nth-child(3) { animation-delay: 0.14s; }
body.direction-a .acs-drawer__list > li:nth-child(4) { animation-delay: 0.18s; }
body.direction-a .acs-drawer__list > li:nth-child(5) { animation-delay: 0.22s; }
body.direction-a .acs-drawer__list > li:nth-child(6) { animation-delay: 0.26s; }

/* Drawer chip: the same full-bleed flat 5% grey bar as the mobile top bar */
body.direction-a .acs-drawer__chip {
	display: flex;
	width: 100%;
	justify-content: center;
	/* White 40px box sitting above the menu, inset like the menu rows */
	width: calc(100% - 2 * var(--acs-gutter));
	height: 2.5rem;
	min-height: 0;
	margin: var(--acs-gutter) var(--acs-gutter) 1rem;
	padding-inline: 1rem;
	background: transparent; /* outline only, as the header chip */
	border: 1px solid var(--acs-line);
	border-radius: var(--acs-radius-chip);
}

body.direction-a .acs-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.direction-a .acs-drawer__list > li > a {
	display: flex;
	align-items: center;
	min-height: 4.25rem;
	font-family: var(--acs-font-display);
	font-size: 1.6875rem;                     /* 10% under the first pass */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--acs-ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--acs-yellow-line);
}

body.direction-a .acs-drawer__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0 0.5rem 1.25rem;
}

body.direction-a .acs-drawer.is-enhanced .acs-drawer__list > .menu-item-has-children {
	position: relative;
}

body.direction-a .acs-drawer.is-enhanced .acs-drawer__list > .menu-item-has-children > a {
	padding-right: 3.25rem;
}

body.direction-a .acs-drawer__toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 4.25rem;                          /* matches a menu row */
	border: 0;
	background: none;
	color: var(--acs-ink);
	cursor: pointer;
}

body.direction-a .acs-drawer__toggle svg {
	transition: transform 0.2s ease;
}

body.direction-a .acs-drawer__list > .is-open > .acs-drawer__toggle svg {
	transform: rotate(180deg);
}

body.direction-a .acs-drawer.is-enhanced .acs-drawer__list > li > .sub-menu {
	display: none;
}

body.direction-a .acs-drawer.is-enhanced .acs-drawer__list > li.is-open > .sub-menu {
	display: block;
}

body.direction-a .acs-drawer__list .sub-menu a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--acs-ink-soft);
	text-decoration: none;
}

/* ---------- Mobile bottom nav (fixed) ---------- */

body.direction-a .acs-mobile-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background: var(--acs-white);
	border-top: 1px solid var(--acs-line);
	padding: 0 0.375rem env(safe-area-inset-bottom);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
}

body.direction-a .acs-mobile-nav__order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(9rem, 42%);
	margin: -1.1875rem auto 0.5rem;
	height: 2.375rem;
	min-height: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

body.direction-a.acs-cta-armed .acs-mobile-nav__order {
	transition:
		height 0.3s ease,
		margin 0.3s ease,
		opacity 0.2s ease,
		transform 0.3s ease;
}

/* The bar's CTA only rides between the hero and the footer (the hero has
   its own call to action, the footer is the page end), and always floats
   while the menu is open. */
body.direction-a.acs-cta-hidden:not(.acs-drawer-open) .acs-mobile-nav__order {
	height: 0;
	margin-top: 0;
	margin-bottom: 0;
	opacity: 0;
	transform: translateY(0.75rem);
	box-shadow: none;
	pointer-events: none;
}

body.direction-a .acs-mobile-nav__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
}

body.direction-a .acs-mobile-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.375rem 0.25rem;
	color: var(--acs-ink);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 400;
	min-height: 3rem;
}

body.direction-a .acs-mobile-nav__item svg {
	color: var(--acs-ink-soft);
	transition: color 0.15s ease;
}

body.direction-a .acs-mobile-nav__item:hover svg,
body.direction-a .acs-mobile-nav__item:focus-visible svg {
	color: var(--acs-red);
}

body.direction-a .acs-mobile-nav__label {
	line-height: 1;
}

/* More tab: menu icon by default, cross while the drawer is open */
body.direction-a .acs-mobile-nav__ico-close {
	display: none;
}

body.direction-a.acs-drawer-open .acs-mobile-nav__ico-open {
	display: none;
}

body.direction-a.acs-drawer-open .acs-mobile-nav__ico-close {
	display: block;
}

body.direction-a.acs-drawer-open .acs-mobile-nav__item--more svg {
	color: var(--acs-red);
}

/* Reserve room at the page end for the fixed bar only: the Order now CTA is
   always hidden over the footer, so the crab can sit right on the bar. */
body.direction-a {
	padding-bottom: calc(var(--acs-nav-h) + env(safe-area-inset-bottom));
}

/* The goodtime panel starts rounded and inset; its tear follows the corners */
body.direction-a .a-goodtime__panel::before {
	border-radius: var(--gt-radius, 0px) var(--gt-radius, 0px) 0 0;
}

/* ---------- Section rhythm ---------- */

/* One fixed gap between every section; sections carry no outer padding. */
body.direction-a main > section + section,
body.direction-a .acs-footer {
	margin-top: var(--acs-section-gap);
}

/* Phones and tablets: the footer sits closer to the last section (40px, not
   the 60px section gap), on every page (designer, 2026-09-29). The element
   selector outranks page sheets that reset the footer's gap. */
@media (max-width: 1023px) {
	body.direction-a footer.acs-footer {
		margin-top: 2.5rem;
	}
}

/* ---------- Ground ---------- */

/* The whole layout sits on the flat paper colour. The sticky chrome repeats
   it so nothing shows through where those bars overlap the page. */
body.direction-a,
body.direction-a .acs-header,
body.direction-a .a-reviews {
	background: var(--acs-ground);
}

@media (prefers-reduced-motion: reduce) {
	body.direction-a .acs-drawer,
	body.direction-a .acs-drawer__list > li {
		animation: none;
		opacity: 1;
	}

	body.direction-a.acs-cta-armed .acs-mobile-nav__order {
		transition: none;
	}
}

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

body.direction-a .a-hero {
	position: relative;
	box-sizing: border-box;                   /* min-height includes the padding */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Mobile: 84% of the video window between the stacked header (~7.5rem)
	   and the fixed bottom nav (~6.5rem) (the original 70% + 4.5rem, grown
	   20% at the designer's call). Desktop restores its own height below. */
	min-height: calc((100svh - 14rem) * 0.84 + 5.4rem);
	/* Tucked just under the short logo row: the tear shows below the bar
	   and crosses the overhanging logo, whose plank sits on the video */
	margin-top: -0.5rem;
	/* The logo hangs ~3rem into the hero; 4rem either side keeps the copy
	   centred and clear of it, and on short screens the hero grows instead
	   of the logo covering the headline. */
	padding: 4rem var(--acs-gutter);
	overflow: hidden;
}

/* Paper-cut edges: the client's exported strips (media/masks), the ground
   colour tearing to transparent, so any full-bleed image or colour block
   reads as paper ripped out of the page. Hero, the good-time band and the
   Got a crowd stack all use the same pair, top and bottom. */
body.direction-a .a-hero::before,
body.direction-a .a-hero::after,
body.direction-a .a-goodtime__panel::before,
body.direction-a .a-goodtime__panel::after,
body.direction-a .a-crowd__row:first-child::before,
body.direction-a .a-crowd__row:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
	height: clamp(1.25rem, 3.2vw, 3rem);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

body.direction-a .a-hero::before,
body.direction-a .a-goodtime__panel::before,
body.direction-a .a-crowd__row:first-child::before {
	top: -1px;
	background-image: url("media/masks/hero-top.png");
}

body.direction-a .a-hero::after,
body.direction-a .a-goodtime__panel::after,
body.direction-a .a-crowd__row:last-child::after {
	bottom: -1px;
	background-image: url("media/masks/hero-bottom.png");
}

/* Media stack: placeholder field under the video, flat scrim above it,
   red blend riding the bottom edge. */
body.direction-a .a-hero__media {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 30%, var(--acs-placeholder) 0%, var(--acs-placeholder-deep) 100%);
}

body.direction-a .a-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Flat scrim plus a black fade at the bottom edge, per the reference */
body.direction-a .a-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 32%),
		linear-gradient(var(--acs-overlay), var(--acs-overlay));
}

body.direction-a .a-hero__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 46rem;
}

body.direction-a .a-hero__title {
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 1.05rem + 6.2vw, 4.375rem);
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--acs-white);
	text-wrap: balance;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 28px rgba(0, 0, 0, 0.55);
}

body.direction-a .a-hero__sub {
	margin: 1.25rem 0 0;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.1875rem);
	line-height: 1.5;
	color: var(--acs-white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.direction-a .a-hero__cta {
	margin-top: 1.75rem;
	font-size: 0.9375rem;
	padding: 0 1.625rem;
	min-height: 2.875rem;
}

/* ---------- 768 ---------- */

@media (min-width: 768px) {
	body.direction-a .acs-header__order {
		font-size: 0.875rem;
		padding: 0 1.375rem;
	}
}

/* ---------- 1024: full desktop chrome ---------- */

@media (min-width: 1024px) {
	/* Desktop: hide the mobile top-bar and restore the inline utilities row */
	body.direction-a .acs-header__topbar {
		display: none;
	}

	body.direction-a .acs-header {
		position: sticky;
		top: 0;
		padding-top: 0;
	}

	body.direction-a .acs-header__inner {
		justify-content: flex-start;
		height: var(--acs-header-h);
		padding-inline: var(--acs-gutter);
	}

	/* Logo hangs out of the bar and over the top of the hero, at the same
	   size whether or not the page is scrolled. */
	body.direction-a .acs-header__logo {
		position: relative;
		z-index: 1;
		align-self: center;
		margin-top: 0;
	}

	/* Inside the bar: its height less a little room above and below */
	body.direction-a .acs-header__logo img {
		height: calc(var(--acs-header-h) - 0.75rem);
	}

	/* Scrolled: the bar turns white with a soft lift, and the chip greys
	   until hovered */
	body.direction-a .acs-header {
		transition: box-shadow 0.2s ease;
	}

	/* The torn edge sits where the hero's top edge was (the hero is tucked
	   1.75rem under the bar), in the bar's colour */
	body.direction-a .acs-header::after {
		display: block;
		z-index: -1; /* under the chip, button and logo; the bar's own colour */
		/* Starts right at the bar's bottom: the strip's semi-transparent
		   fibres would otherwise end the solid bar in a straight line */
		top: calc(100% - 1px);
		background: var(--acs-bg);
		opacity: 1;
	}

	body.direction-a .a-hero::before {
		display: none;
	}

	/* Scrolled: the bar and its torn edge turn white together */
	body.direction-a.acs-scrolled .acs-header,
	body.direction-a.acs-scrolled .acs-header::after {
		background: var(--acs-white);
	}

	body.direction-a.acs-scrolled .acs-header__utils > .acs-loc-chip,
	body.direction-a.acs-scrolled .acs-header__utils > .acs-loc-chip:hover {
		background: transparent; /* still outline only once the bar turns white */
	}

	body.direction-a .acs-header__utils {
		display: flex;
	}

	body.direction-a .acs-mobile-nav {
		display: none;
	}

	body.direction-a {
		padding-bottom: 0;
	}

	/* The menu sits at the left, beside the logo */
	body.direction-a .acs-nav {
		display: block;
		margin-left: 2.5rem;
	}

	body.direction-a .acs-nav__list {
		display: flex;
		align-items: center;
		gap: 1.75rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	body.direction-a .acs-nav__list a {
		white-space: nowrap;
		font-size: 0.9375rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: var(--acs-ink);
		text-decoration: none;
	}

	body.direction-a .acs-nav__list a:hover {
		color: var(--acs-red);
	}

	/* About us dropdown */
	body.direction-a .acs-nav__list > .menu-item-has-children {
		position: relative;
	}

	body.direction-a .acs-nav__list > .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 0.5em;
		height: 0.5em;
		margin-left: 0.4em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-0.15em) rotate(45deg);
	}

	body.direction-a .acs-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		min-width: 11rem;
		list-style: none;
		margin: 0;
		padding: 0.5rem 0;
		background: var(--acs-white);
		border: 1px solid var(--acs-line);
		border-radius: var(--acs-radius);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease;
	}

	body.direction-a .acs-nav__list .menu-item-has-children:hover > .sub-menu,
	body.direction-a .acs-nav__list .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	body.direction-a .acs-nav__list .sub-menu a {
		display: block;
		margin: 0 0.375rem;
		padding: 0.5rem 0.625rem;
		text-transform: none;
		letter-spacing: 0;
		font-weight: 400;
		font-size: 0.9375rem;
		border-radius: 0.375rem;
		transition: background-color 0.12s ease;
	}

	body.direction-a .acs-nav__list .sub-menu a:hover {
		background: var(--acs-hover);
		color: var(--acs-ink);
	}

	body.direction-a .acs-header__utils > .acs-loc-chip {
		display: inline-flex;
	}

	/* Chip and Order now share the design's 38px height on desktop */
	body.direction-a .acs-header__order {
		min-height: 2.375rem;
		padding: 0 1.125rem;
	}

	body.direction-a .acs-header__burger,
	body.direction-a .acs-drawer {
		display: none;
	}

	/* Desktop hero: no fixed bottom bar and a short single-row header, so
	   restore the full-height hero and its original content nudge. */
	body.direction-a .a-hero {
		/* Tucked up under the bar so the torn edge rises to the logo's plank
		   and the logo overlaps the video; height grows by the same amount. */
		margin-top: -1.75rem;
		min-height: calc(100svh - var(--acs-header-h) + 9.75rem);
		padding: 4rem var(--acs-gutter);
	}

	/* Copy centred in the video, clear of the overhanging logo */
	body.direction-a .a-hero__content {
		max-width: 50rem;
	}
}

/* The chip keeps the shack, drops the hours, until there is room */
@media (min-width: 1024px) and (max-width: 1279px) {
	body.direction-a .acs-header__utils .acs-loc-chip__hours {
		display: none;
	}
}

/* ---------- 1024-1439: logo-left bar, tightened to fit ---------- */

@media (min-width: 1024px) and (max-width: 1439px) {
	body.direction-a .acs-nav {
		margin-left: 1rem;
	}

	body.direction-a .acs-nav__list {
		gap: 1rem;
	}

	body.direction-a .acs-nav__list a {
		font-size: 0.8125rem;
	}


	body.direction-a .acs-header__order {
		padding: 0 0.875rem;
	}
}

/* ---------- 1440 and up: a bigger bar (designer's call) ---------- */

@media (min-width: 1440px) {
	body.direction-a {
		--acs-header-h: 6.25rem; /* 100px */
	}

	body.direction-a .acs-header__utils > .acs-loc-chip,
	body.direction-a .acs-header__order {
		min-height: 2.75rem;
		font-size: 0.9375rem;
	}

	body.direction-a .acs-header__order {
		padding: 0 1.375rem;
	}
}

/* 1024-1279, the narrowest bar: gaps close up so the order button stays
   inside the margin (after the block above so these win) */
@media (min-width: 1024px) and (max-width: 1279px) {
	body.direction-a .acs-nav {
		margin-left: 0.75rem;
	}

	body.direction-a .acs-nav__list {
		gap: 0.5rem;
	}

	body.direction-a .acs-nav__list a {
		font-size: 0.75rem;
	}

	body.direction-a .acs-header__utils {
		gap: 0.5rem;
	}

	/* The six items, chip and order button need the last of the room at
	   1024, so the bar's side margins close to 1.5rem here. */
	body.direction-a .acs-header__inner {
		padding-inline: 1.5rem;
	}
}

/* Dropdowns sit 10px below their item; an invisible bridge over the gap
   keeps the hover alive while the pointer crosses it. The 14-item Menu
   dropdown runs in two columns, anchored to its item. */
@media (min-width: 1024px) {
	body.direction-a .acs-nav__list .sub-menu {
		top: calc(100% + 10px);
	}

	body.direction-a .acs-nav__list .sub-menu::before {
		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		right: 0;
		height: 10px;
	}

	body.direction-a .acs-nav__list > li:first-child > .sub-menu {
		display: grid;
		grid-template-columns: repeat(2, auto);
		column-gap: 0.25rem;
		left: 0;
		transform: none;
	}

	body.direction-a .acs-nav__list .sub-menu a {
		white-space: nowrap;
	}
}

/* ---------- 1920 check: chrome holds, nothing stretches ---------- */

@media (min-width: 1920px) {
	body.direction-a .acs-header__inner {
		max-width: 120rem;
		margin-inline: auto;
	}
}

/* Chip: the place name reads uppercase, per the design */
body.direction-a .acs-loc-chip__place {
	text-transform: uppercase;
}

/* ============ Specials ("Only at your shack") ============ */

/* Three static cards (client's call: the slider is gone). Phones and
   tablets swipe through them one at a time with dots underneath; from 1024
   they sit in a row of three. The hover lift on the bowl and the badge
   wobble stay. */

body.direction-a .a-offers {
	background: var(--acs-ground);
	padding: 0 var(--acs-gutter);
	overflow-x: clip;
}

body.direction-a .a-offers__title {
	margin: 0 0 clamp(2rem, 1.2rem + 3vw, 3.5rem);
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	color: var(--acs-ink);
}

body.direction-a .a-offers__viewport {
	position: relative;
}

/* Phones and tablets: a snapping swipe row that bleeds to both edges */
body.direction-a .a-offers__track {
	display: flex;
	gap: 1rem;
	margin: 0 calc(-1 * var(--acs-gutter));
	/* A sideways scroller clips vertically too: room above for the badge
	   and the torn top edge, below for the torn bottom edge */
	padding: 1.5rem var(--acs-gutter) 1.25rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

body.direction-a .a-offers__track::-webkit-scrollbar {
	display: none;
}

body.direction-a .a-offers__slide {
	flex: 0 0 86%;
	box-sizing: border-box;
	scroll-snap-align: center;
}

/* Torn parchment card */
body.direction-a .offer-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* equal room above the dish and below the button */
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	gap: 1rem; /* dish to copy */
	padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem) clamp(1.5rem, 1rem + 4vw, 2.5rem);
	/* More room under the button: the top padding plus about 10% of the card */
	padding-bottom: calc(clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem) + clamp(2.4rem, 1.3rem + 2.5vw, 3.25rem));
	/* The client's exported card edges: each strip is the page's paper on
	   its outer side tearing into transparency, laid flush on the card's
	   edge so the wood blends out under the tear on all four sides. */
	background:
		url("media/masks/offer-left.png") left center / 1.75rem 100% no-repeat,
		url("media/masks/offer-right.png") right -3px center / 1.75rem 100% no-repeat, /* its outer columns are transparent */
		url("media/offer-wood-horizontal.webp") center top / auto 17.5rem repeat-y; /* horizontal planks, about 28px each */
	text-align: center;
}

body.direction-a .offer-card::before,
body.direction-a .offer-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: 1.75rem;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

body.direction-a .offer-card::before {
	top: -4px;
	background-image: url("media/masks/offer-top.png");
}

body.direction-a .offer-card::after {
	bottom: -4px;
	background-image: url("media/masks/offer-bottom.png");
}

body.direction-a .offer-card__media {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	/* One box size on every card, so all three cards match; each dish
	   (cropped tight, media/offer-dishes) fits inside it and sits on its
	   bottom edge, keeping the 16px gap to the copy the same */
	width: clamp(12.9rem, 6.6rem + 23.8vw, 21.75rem); /* 10% larger */
	max-width: 100%;
	height: clamp(9.9rem, 5.06rem + 18.3vw, 16.7rem); /* 13:10 of the width */
	align-items: flex-end;
}

/* Dish centred in its box, no shadow. It lifts
   on hover; JS adds the idle float and a pointer parallax. */
body.direction-a .offer-card__media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
	will-change: transform;
}

body.direction-a .offer-card:hover .offer-card__media img,
body.direction-a .offer-card:focus-within .offer-card__media img {
	transform: translateY(-10px) scale(1.05);
}

body.direction-a .offer-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.direction-a .offer-card__date {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--acs-ink);
}

body.direction-a .offer-card__heading {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem);
	line-height: 1.05;
	color: var(--acs-ink);
}

body.direction-a .offer-card__desc {
	margin: 0.85rem 0 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
	color: var(--acs-ink);
}

body.direction-a .offer-card__cta {
	margin-top: 1.5rem;
	font-size: 0.8125rem;
	padding: 0 1.25rem;
	min-height: 2.375rem;                     /* 38px on phones */
}

/* Yellow scalloped price badge */
body.direction-a .offer-card__badge {
	position: absolute;
	z-index: 2;                               /* over the card's torn edges */
	top: -0.5rem;
	right: -0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	gap: 0.15rem;
	color: var(--acs-ink);
	line-height: 1.05;
	transform: rotate(6deg);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: transform;
}

/* Badge pops and wiggles when the card is hovered */
body.direction-a .offer-card:hover .offer-card__badge {
	transform: rotate(6deg) scale(1.12);
	animation: acs-badge-wobble 0.9s ease-in-out;
}

@keyframes acs-badge-wobble {
	0%   { transform: rotate(6deg) scale(1.12); }
	30%  { transform: rotate(-4deg) scale(1.12); }
	55%  { transform: rotate(10deg) scale(1.12); }
	80%  { transform: rotate(3deg) scale(1.12); }
	100% { transform: rotate(6deg) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	body.direction-a .offer-card__media img,
	body.direction-a .offer-card__badge {
		transition: none;
	}
	body.direction-a .offer-card:hover .offer-card__badge {
		animation: none;
		transform: rotate(6deg);
	}
}

body.direction-a .offer-card__badge-pre {
	font-size: 0.75rem;
	font-weight: 700;
}

body.direction-a .offer-card__badge-price {
	font-size: 1.25rem;
	font-weight: 700;
}

/* Dots under the swipe row (hidden once the three cards are in a row) */
body.direction-a .a-offers__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

body.direction-a .a-offers__controls {
	gap: 1rem;
}

body.direction-a .a-offers__dots {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

/* Round arrows either side of the dots, faded at the ends */
body.direction-a .a-offers__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--acs-ctrl-line);
	border-radius: 50%;
	background: var(--acs-ctrl-bg);
	color: var(--acs-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

body.direction-a .a-offers__arrow:hover:not(:disabled) {
	background: var(--acs-white);
}

body.direction-a .a-offers__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

body.direction-a .a-offers__dot {
	width: 1.125rem;                          /* 18 x 10 pill */
	height: 0.625rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--acs-ctrl-line);
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}

body.direction-a .a-offers__dot.is-active {
	width: 2rem;                              /* 32 x 10 */
	background: var(--acs-ctrl-active);
}

@media (min-width: 640px) {
	body.direction-a .a-offers__slide {
		flex-basis: 58%;
	}
}

@media (min-width: 768px) {
	body.direction-a .a-offers__slide {
		flex-basis: 44%;
	}

	body.direction-a .offer-card__badge {
		width: 6rem;
		height: 6rem;
		top: -1rem;
		right: -1rem;
		gap: 0.35rem;
	}

	body.direction-a .offer-card__badge-pre {
		font-size: 0.8125rem;
	}

	body.direction-a .offer-card__badge-price {
		font-size: 1.625rem;
	}

	body.direction-a .offer-card__cta {
		margin-top: 2rem;
		font-size: 0.9375rem;
		padding: 0 1.625rem;
		min-height: 2.875rem;
	}
}

/* ---- Desktop: the three cards in one row, no swiping ---- */

@media (min-width: 1024px) {
	body.direction-a .a-offers__track {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
		max-width: 94rem;
		margin-inline: auto;
		padding: 0;
		overflow: visible;
	}

	body.direction-a .a-offers__slide {
		flex: none;
	}

	body.direction-a .a-offers__controls {
		display: none;
	}
}

/* ================= "Start your order" category grid ================= */

body.direction-a .a-cats {
	background: var(--acs-ground);
	padding: 0 var(--acs-gutter);
}

body.direction-a .a-cats__head {
	text-align: center;
	margin: 0 auto clamp(2rem, 1.2rem + 3vw, 3.5rem);
	max-width: 40rem;
}

body.direction-a .a-cats__title {
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--acs-ink);
}

body.direction-a .a-cats__sub {
	margin: 0.6rem 0 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	color: var(--acs-ink);
}

/* Phones: one item per row, the dish at the left and a big name beside it
   (client's call; two to a row read too small) */
body.direction-a .a-cats__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 94rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

body.direction-a .a-cats__link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: 0.9375rem 0; /* 15px above and below each dish, so rows never overlap */
	text-decoration: none;
	color: var(--acs-ink);
}

body.direction-a .a-cats__media {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Phones: the dish about 1.6x its old size (a wider box, the photo drawn
	   past its own transparent margins), centred on the name beside it */
	flex: 0 0 50%;
	max-width: 15rem;
	aspect-ratio: 16 / 10;
}

body.direction-a .a-cats__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	scale: 1.17;
	transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
	will-change: transform;
}

/* Grey stand-in until the dish photo arrives (CLAUDE.md rule 5) */
body.direction-a .a-cats__placeholder {
	width: 100%;
	height: 100%;
	border-radius: 0.75rem;
	background: rgba(0, 0, 0, 0.06);
}

body.direction-a .a-cats__label {
	flex: 1;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.4375rem, 1.15rem + 1.4vw, 1.75rem); /* phones: sized to sit with the dish, not over it */
	line-height: 1.15;
	text-align: left;
	color: var(--acs-ink);
}

/* Hover: the dish lifts and grows a touch */
body.direction-a .a-cats__link:hover .a-cats__media img,
body.direction-a .a-cats__link:focus-visible .a-cats__media img {
	transform: translateY(-10px) scale(1.06);
}

/* Scroll-in reveal: enhanced only when JS arms it; visible by default */
body.direction-a .a-cats.is-armed .a-cats__item {
	opacity: 0;
	transform: translateY(28px);
}

body.direction-a .a-cats.is-armed .a-cats__item.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- 768: back to the tile grid, three across ---- */
@media (min-width: 768px) {
	body.direction-a .a-cats__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
	}

	body.direction-a .a-cats__link {
		flex-direction: column;
		gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
		padding: 0;
	}

	body.direction-a .a-cats__media {
		flex: none;
		width: 100%;
		max-width: none;
		aspect-ratio: 13 / 8;
	}

	body.direction-a .a-cats__media img {
		object-position: center bottom;
		scale: none;
	}

	body.direction-a .a-cats__label {
		flex: none;
		font-size: clamp(0.9375rem, 0.8rem + 0.8vw, 1.25rem);
		text-align: center;
	}
}

/* ---- 1024: four across, matching the design ---- */
@media (min-width: 1024px) {
	body.direction-a .a-cats__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.direction-a .a-cats__media img {
		transition: none;
	}
	body.direction-a .a-cats.is-armed .a-cats__item {
		opacity: 1;
		transform: none;
	}
}

/* ============ "This is what a good time looks like" (red panel) ============ */

body.direction-a .a-goodtime {
	position: relative;
	background: var(--acs-ground);
	overflow-x: clip;                 /* clip the horizontal expand, keep photos' vertical overflow */
}

body.direction-a .a-goodtime__panel {
	position: relative;
	background: var(--acs-red);
	padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--acs-gutter) 0;
	margin-inline: var(--gt-inset, 0px);
	border-radius: var(--gt-radius, 0px);
	transition: none;
}

/* JS start state: inset with rounded corners, scrubbed to full-bleed. */
body.direction-a .a-goodtime.is-expandable .a-goodtime__panel {
	--gt-inset: 5vw;
	--gt-radius: 2rem;
}

/* Hanging crab badge: string starts at the panel's very top edge and the
   whole pendant swings gently to and fro around that point. */
body.direction-a .a-goodtime__hanger {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
	margin-inline: auto;
	margin-top: calc(-1 * clamp(2.5rem, 1.5rem + 4vw, 5rem));
	transform-origin: top center;
	animation: acs-hanger-swing 3.6s ease-in-out infinite;
}

@keyframes acs-hanger-swing {
	0%, 100% { transform: rotate(4.5deg); }
	50% { transform: rotate(-4.5deg); }
}

@media (prefers-reduced-motion: reduce) {
	body.direction-a .a-goodtime__hanger {
		animation: none;
	}
}

body.direction-a .a-goodtime__string {
	width: 1px;
	height: clamp(1.5rem, 1rem + 3vw, 4rem);
	background: rgba(255, 255, 255, 0.55);
}

body.direction-a .a-goodtime__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(4.25rem, 3.5rem + 2vw, 5.5rem);
	height: clamp(4.25rem, 3.5rem + 2vw, 5.5rem);
	background: var(--acs-white);
	border-radius: 50%;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

body.direction-a .a-goodtime__badge img {
	width: 72%;
	height: 72%;
	object-fit: contain;
}

body.direction-a .a-goodtime__head {
	text-align: center;
	max-width: 44rem;
	margin: clamp(1.25rem, 0.5rem + 3vw, 2.5rem) auto 0;
}

body.direction-a .a-goodtime__title {
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.1rem + 3.8vw, 3.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--acs-white);
	text-wrap: balance;
}

body.direction-a .a-goodtime__sub {
	margin: 1rem 0 0;
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
	color: rgba(255, 255, 255, 0.92);
}

/* Photo mosaic marquee. The group is a fixed 2000x930-unit stage scaled
   by --acs-gtu (1 unit = 1/2000 of the viewport, floored so phones keep
   photos readable). Every photo is placed by coordinates traced from the
   design, so the arrangement matches it at any width; the stage repeats
   and scrolls as a marquee, cropped at the left, right and bottom. */
body.direction-a .a-goodtime__collage {
	--acs-gtu: max(calc(100vw / 2000), 0.3px);
	margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
	margin-inline: calc(-1 * var(--acs-gutter));
	height: calc(930 * var(--acs-gtu));
	overflow: hidden;
}

body.direction-a .a-goodtime__track {
	display: flex;
	width: max-content;
	animation: acs-goodtime-marquee 70s linear infinite;
	will-change: transform;
}

@keyframes acs-goodtime-marquee {
	to { transform: translateX(-50%); }
}

body.direction-a .a-goodtime__group {
	position: relative;
	flex: 0 0 auto;
	width: calc(2000 * var(--acs-gtu));
	height: calc(930 * var(--acs-gtu));
	list-style: none;
	margin: 0;
	padding: 0;
}

body.direction-a .a-goodtime__photo {
	position: absolute;
	left: calc(var(--x) * var(--acs-gtu));
	top: calc(var(--y) * var(--acs-gtu));
	width: calc(var(--wu) * var(--acs-gtu));
	border: calc(9 * var(--acs-gtu)) solid var(--acs-white);
	background: var(--acs-white);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
	transform: rotate(var(--r, 0deg));
	z-index: var(--z, 1);
}

body.direction-a .a-goodtime__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Coordinate map traced from the design (repeats every 8):
   x / y / width in stage units, rotation, stacking */
body.direction-a .a-goodtime__photo:nth-child(8n + 1) { --x: -35; --y: 165; --wu: 690; --r: -8deg; --z: 2; }
body.direction-a .a-goodtime__photo:nth-child(8n + 2) { --x: 555; --y: 50; --wu: 810; --r: 2deg; --z: 3; }
body.direction-a .a-goodtime__photo:nth-child(8n + 3) { --x: 1285; --y: 60; --wu: 770; --r: -6deg; --z: 4; }
body.direction-a .a-goodtime__photo:nth-child(8n + 4) { --x: -50; --y: 640; --wu: 380; --r: 2deg; --z: 6; }
body.direction-a .a-goodtime__photo:nth-child(8n + 5) { --x: 245; --y: 450; --wu: 570; --r: 3deg; --z: 6; }
body.direction-a .a-goodtime__photo:nth-child(8n + 6) { --x: 750; --y: 535; --wu: 510; --r: -2deg; --z: 6; }
body.direction-a .a-goodtime__photo:nth-child(8n + 7) { --x: 1190; --y: 275; --wu: 390; --r: 2deg; --z: 5; }
body.direction-a .a-goodtime__photo:nth-child(8n + 8) { --x: 1500; --y: 530; --wu: 545; --r: 6deg; --z: 5; }

@media (prefers-reduced-motion: reduce) {
	body.direction-a .a-goodtime__track {
		animation: none;
	}
}

/* ============ Reviews ("Don't take our word for it") ============ */

body.direction-a .a-reviews {
	/* No tinted ground: the cards sit straight on the page */
	padding: 0;
	overflow-x: clip;
}

body.direction-a .a-reviews__head {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto clamp(2rem, 1.2rem + 3vw, 3.5rem);
	padding-inline: var(--acs-gutter);
}

body.direction-a .a-reviews__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
	line-height: 1.05;
	color: var(--acs-ink);
	text-wrap: balance;
}

body.direction-a .a-reviews__sub {
	margin: 0.75rem 0 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	font-weight: 400;
	color: var(--acs-ink);
}

/* Card marquee, cropped at both edges */
body.direction-a .a-reviews__marquee {
	overflow: hidden;
}

body.direction-a .a-reviews__track {
	display: flex;
	align-items: stretch; /* every card as tall as the tallest */
	width: max-content;
	list-style: none;
	margin: 0;
	padding: 1rem 0 1.5rem;
	animation: acs-goodtime-marquee 120s linear infinite; /* four copies: twice the distance, same speed */
	will-change: transform;
}

body.direction-a .a-reviews__marquee:hover .a-reviews__track {
	animation-play-state: paused;
}

body.direction-a .a-review {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 16.5rem;
	min-height: 21.75rem;                     /* fits the longest review at 13px */
	margin-right: 1.25rem;
	background: var(--acs-white);
	/* Figma: fill FFFFFF, inside stroke 000000 17% 1px, shadow X10 Y14 333333 10% */
	border: 1px solid rgba(0, 0, 0, 0.17);
	border-radius: 1.25rem;                   /* 20px */
	box-shadow: 10px 14px 0 0 rgba(51, 51, 51, 0.1);
	padding: 1.25rem 1.25rem 0;
}

/* The text is cut at the same line count on every card, Read more under it */
body.direction-a .a-review__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 9;
	overflow: hidden;
}

body.direction-a .a-review__more {
	align-self: flex-start;
	margin: -0.5rem 0 1.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--acs-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* Short reviews that fit need no Read more (direction.js hides it) */
body.direction-a .a-review__more[hidden] {
	display: none;
}

/* Opened: the card keeps its height and the full review scrolls inside it.
   The scrollbar always shows (overlay scrollbars hide it until touched) and
   the text fades at the bottom until the end is reached, as a hint. */
body.direction-a .a-review.is-open .a-review__text {
	display: block;
	flex: 1 1 0;
	min-height: 0;
	padding-right: 0.625rem;
	overflow-y: scroll;
	overscroll-behavior: contain;
	-webkit-line-clamp: none;
	scrollbar-width: thin;
	scrollbar-color: var(--acs-ctrl-line) var(--acs-line);
	-webkit-mask-image: linear-gradient(#000 75%, transparent);
	mask-image: linear-gradient(#000 75%, transparent);
}

body.direction-a .a-review.is-open.is-end .a-review__text {
	-webkit-mask-image: none;
	mask-image: none;
}

body.direction-a .a-review.is-open .a-review__text::-webkit-scrollbar {
	width: 5px;
}

body.direction-a .a-review.is-open .a-review__text::-webkit-scrollbar-track {
	border-radius: 999px;
	background: var(--acs-line);
}

body.direction-a .a-review.is-open .a-review__text::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--acs-ctrl-line);
}

/* The marquee holds still while a review is open */
body.direction-a .a-reviews__track.is-paused {
	animation-play-state: paused;
}

body.direction-a .a-review__more:hover {
	color: var(--acs-red);
}

body.direction-a .a-review__foot {
	margin-top: auto;
}

body.direction-a .a-review__stars {
	display: flex;
	gap: 0.25rem;
	color: #fad60a;
}

body.direction-a .a-review__text {
	margin: 1rem 0 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	font-weight: 700;
	color: var(--acs-ink);
}

body.direction-a .a-review__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--acs-line);
	padding: 1rem 0 1.25rem;
}

body.direction-a .a-review__name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--acs-ink);
}

@media (min-width: 1024px) {
	body.direction-a .a-review {
		width: 19.6875rem;                    /* 315px per the design */
		min-height: 25rem;                    /* 400px */
		margin-right: 2rem;
		padding: 1.5rem 1.5rem 0;
	}

	body.direction-a .a-review__text { font-size: 1rem; line-height: 1.55; }
	body.direction-a .a-review__name { font-size: 1.0625rem; }
}

body.direction-a .a-review__g {
	width: 1.5rem;
	height: 1.5rem;
}

body.direction-a .a-reviews__more-wrap {
	text-align: center;
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

body.direction-a .a-reviews__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.75rem;
	background: var(--acs-white);
	color: var(--acs-ink);
	font-weight: 700;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid var(--acs-line);
	border-radius: 0.625rem;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.direction-a .a-reviews__more:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

@media (prefers-reduced-motion: reduce) {
	body.direction-a .a-reviews__track {
		animation: none;
	}
}

/* Offers: draggable */
body.direction-a .a-offers__viewport {
	cursor: grab;
	touch-action: pan-y;
}

body.direction-a .a-offers__viewport.is-dragging {
	cursor: grabbing;
}

body.direction-a .a-offers__viewport img {
	-webkit-user-drag: none;
	user-select: none;
}

/* ================= "Got a crowd?" stacked event rows ================= */

body.direction-a .a-crowd__head {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto;
	padding: 0 var(--acs-gutter) clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

body.direction-a .a-crowd__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
	line-height: 1.05;
	color: var(--acs-ink);
}

body.direction-a .a-crowd__sub {
	margin: 0.75rem 0 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	color: var(--acs-ink);
}

/* Each row is sticky, so the next slides up and overlaps it on scroll */
body.direction-a .a-crowd__row {
	position: sticky;
	top: var(--acs-pin-h); /* clear of the chrome's torn edge */
	display: grid;
	/* Mobile: each row exactly fills the window between the pinned location
	   bar and the bottom nav, so it is read whole before the next covers it. */
	grid-template-rows: minmax(0, 1fr) auto;
	height: calc(100svh - var(--acs-pin-h) - var(--acs-nav-clear) - env(safe-area-inset-bottom));
	overflow: hidden;
}

body.direction-a .a-crowd__row--red {
	background: var(--acs-red);
}

body.direction-a .a-crowd__row--light {
	background: var(--acs-ground);
}

body.direction-a .a-crowd__media {
	position: relative;
	overflow: hidden;
}

body.direction-a .a-crowd__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.direction-a .a-crowd__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(2rem, 1rem + 4vw, 4rem) var(--acs-gutter) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}


body.direction-a .a-crowd__heading {
	margin: 1.25rem 0 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
	line-height: 1.05;
}

body.direction-a .a-crowd__row--red .a-crowd__heading,
body.direction-a .a-crowd__row--red .a-crowd__body {
	color: var(--acs-white);
}

body.direction-a .a-crowd__row--light .a-crowd__heading,
body.direction-a .a-crowd__row--light .a-crowd__body {
	color: var(--acs-ink);
}

body.direction-a .a-crowd__body {
	margin: 1rem 0 0;
	max-width: 26rem;
	font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
	line-height: 1.55;
}

body.direction-a .a-crowd__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.75rem;
	min-height: 2.75rem;
	padding: 0 1.5rem;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--acs-radius);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

body.direction-a .a-crowd__cta:hover {
	transform: translateY(-2px);
}

body.direction-a .a-crowd__cta--red {
	background: var(--acs-yellow);
	color: var(--acs-ink);
}

body.direction-a .a-crowd__cta--light {
	background: var(--acs-red);
	color: var(--acs-white);
}

/* ---- 900+: photo and panel side by side, 50/50 like the design ---- */

@media (min-width: 900px) {
	body.direction-a .a-crowd__row {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
		height: auto;
		min-height: calc(100svh - var(--acs-pin-h) - var(--acs-nav-clear));
	}

	body.direction-a .a-crowd__row--flip .a-crowd__media {
		order: 2;
	}

	body.direction-a .a-crowd__row--flip .a-crowd__panel {
		order: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Rows still stack, they just arrive without the overlap drama */
}

/* ================= Footer ================= */

body.direction-a .acs-footer {
	position: relative;
	background: var(--acs-ground);
	overflow: hidden;
}

/* Crab border, looping */
/* No crab border; the columns start one section gap below */
body.direction-a .acs-footer__border {
	display: none;
	overflow: hidden;
	padding: 1.25rem 0;
	border-bottom: 1px solid transparent;
}

body.direction-a .acs-footer__border-track {
	display: flex;
	width: max-content;
	animation: acs-goodtime-marquee 40s linear infinite;
}

body.direction-a .acs-footer__border-group {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 2rem + 2vw, 5rem);
	padding-right: clamp(2.5rem, 2rem + 2vw, 5rem);
}

body.direction-a .acs-footer__border-group img {
	width: clamp(2rem, 1.75rem + 1vw, 2.75rem);
	height: auto;
}

/* Link columns + franchise card */
body.direction-a .acs-footer__main {
	display: grid;
	gap: 2.5rem;
	max-width: 94rem;
	margin: 0 auto;
	padding: 0 var(--acs-gutter);
}

body.direction-a .acs-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

/* Mobile accordions; from 1024 the columns are always open (global.js) */
body.direction-a .acs-footer__col {
	border-bottom: 1px solid var(--acs-line);
}

body.direction-a .acs-footer__col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.25rem;
	list-style: none;
	cursor: pointer;
}

body.direction-a .acs-footer__col-head::-webkit-details-marker {
	display: none;
}

body.direction-a .acs-footer__col-caret {
	color: var(--acs-ink-soft);
	transition: transform 0.2s ease;
}

body.direction-a .acs-footer__col[open] .acs-footer__col-caret {
	transform: rotate(180deg);
}

body.direction-a .acs-footer__col .acs-footer__links {
	padding-bottom: 1.25rem;
}

body.direction-a .acs-footer__col-title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--acs-ink);
}

body.direction-a .acs-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

body.direction-a .acs-footer__links a {
	color: var(--acs-ink-soft);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
}

body.direction-a .acs-footer__links a:hover {
	color: var(--acs-red);
}

/* A specials card torn out of the paper: the offer card's exported edges on
   all four sides, its top level with the link columns' headings. */
body.direction-a .acs-footer__franchise {
	position: relative;
	align-self: start;
	padding: 3rem clamp(1.75rem, 1rem + 2vw, 2.75rem); /* the torn edges eat into the block padding */
	background:
		url("media/masks/offer-left.png") left center / 1.75rem 100% no-repeat,
		url("media/masks/offer-right.png") right -3px center / 1.75rem 100% no-repeat, /* its outer columns are transparent */
		var(--acs-red);
	color: var(--acs-white);
	text-align: center;
}

body.direction-a .acs-footer__franchise::before,
body.direction-a .acs-footer__franchise::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1.75rem;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

body.direction-a .acs-footer__franchise::before {
	top: -4px;
	background-image: url("media/masks/offer-top.png");
}

body.direction-a .acs-footer__franchise::after {
	bottom: -4px;
	background-image: url("media/masks/offer-bottom.png");
}


body.direction-a .acs-footer__franchise-title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	color: var(--acs-white);
}

body.direction-a .acs-footer__franchise-sub {
	margin: 0.75rem 0 1.5rem;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--acs-white);
	max-width: 30rem;
	margin-inline: auto;
	text-wrap: balance; /* centred lines of even length, not one long + two words */
}

/* Yellow on the red card */
body.direction-a .acs-footer__franchise-cta {
	font-size: 0.875rem;
	padding: 0 1.375rem;
	min-height: 2.75rem;
	background: var(--acs-yellow);
	color: var(--acs-ink);
}

body.direction-a .acs-footer__franchise-cta:hover {
	background: var(--acs-white);
	color: var(--acs-ink);
}

/* Big crab, cycling its costume on hover. The exported frames are
   already the design's 484x289 clipped composition, so they render at
   that exact size with no further cropping (shrinking only on narrow
   screens). */
body.direction-a .acs-footer__crab {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

body.direction-a .acs-footer__crab img {
	width: min(387px, 74vw); /* 20% smaller than the old frames */
	height: auto;
}

/* Bottom bar: stacked above the crab below 1280; from 1280 it overlays the
   crab's flanks, anchored to the footer's bottom edge so the crab's crop
   line is exactly the page end. */
body.direction-a .acs-footer__bottom {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	margin: 3rem auto 0;
	padding: 0 var(--acs-gutter) 1.5rem;
	pointer-events: none;
}

body.direction-a .acs-footer__bottom a,
body.direction-a .acs-footer__social a {
	pointer-events: auto;
}

body.direction-a .acs-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(1.25rem, 1rem + 1vw, 2.5rem);
}

body.direction-a .acs-footer__legal a {
	color: var(--acs-ink-soft);
	text-decoration: none;
	font-size: 0.9375rem;
}

body.direction-a .acs-footer__legal a:hover {
	color: var(--acs-red);
}

body.direction-a .acs-footer__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1.5rem;
}

body.direction-a .acs-footer__social {
	order: -1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
}

body.direction-a .acs-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background: var(--acs-yellow);
	color: var(--acs-ink);
	transition: transform 0.15s ease;
}

body.direction-a .acs-footer__social a:hover {
	transform: translateY(-2px);
}

body.direction-a .acs-footer__note {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--acs-ink-soft);
}

/* Side-by-side bottom bar only where it clears the crab (checked 1280+);
   narrower screens keep the stacked layout above the crab. */
@media (min-width: 1280px) {
	body.direction-a .acs-footer__bottom {
		position: absolute;
		bottom: 1.5rem;
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			". social"
			"legal note";
		align-items: end;
		row-gap: 1.25rem;
		max-width: 94rem;
		margin: 0 auto;
		padding-bottom: 0;
	}

	body.direction-a .acs-footer__legal { grid-area: legal; }
	body.direction-a .acs-footer__social { grid-area: social; justify-self: end; }
	body.direction-a .acs-footer__note { grid-area: note; }
}

@media (min-width: 1024px) {
	body.direction-a .acs-footer__cols {
		grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
		gap: 2rem;
	}

	body.direction-a .acs-footer__col {
		border-bottom: 0;
	}

	body.direction-a .acs-footer__col-head {
		min-height: 0;
		margin-bottom: 1.25rem;
		cursor: default;
	}

	body.direction-a .acs-footer__col-caret {
		display: none;
	}

	body.direction-a .acs-footer__col .acs-footer__links {
		padding-bottom: 0;
	}

	body.direction-a .acs-footer__franchise {
		text-align: left;
	}

	body.direction-a .acs-footer__franchise-sub {
		margin-inline: 0;
		text-wrap: wrap; /* left-aligned on desktop */
	}

	body.direction-a .acs-footer__main {
		grid-template-columns: 1.3fr 1fr;
		gap: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.direction-a .acs-footer__border-track {
		animation: none;
	}
}

/* PARKED (designer, 2026-09-10): dropdown lists are hidden in the bar and
   the phone menu; the parents keep their chevrons and the items stay in the
   WordPress menu. Delete this rule to bring the dropdowns back. */
body.direction-a .acs-nav__list .sub-menu,
body.direction-a .acs-drawer__list .sub-menu {
	display: none !important;
}

/* Good time: the optional yellow button under the heading (gift cards,
   blog), and the photos, which start below the collage's bottom edge until
   direction.js lifts them in (no JS: they sit in place). */
body.direction-a .a-goodtime__cta {
	margin-top: 1.5rem;
	padding: 0.875rem 1.5rem;
	background: var(--acs-yellow);
	color: var(--acs-ink);
	font-size: 0.875rem;
}

body.direction-a .a-goodtime__cta:hover {
	background: var(--acs-white);
	transform: translateY(-2px);
}

body.direction-a .a-goodtime .a-goodtime__photo {
	translate: 0 var(--gt-rise, 0%);
}

/* ---------- A white bar pinned under the header ---------- */

/* The locations search pins flush under the header, so the two whites read
   as one block: the header's own torn edge steps aside and the pinned bar
   tears into the page instead. (The location template's jump bar pins as
   its own box under the header, and moves the header's torn edge down
   below itself instead: location.css; designer, 2026-10-06.) */
body.direction-a.acs-bar-pinned .acs-header::after,
body.direction-a.acs-bar-pinned .acs-header__topbar::after {
	opacity: 0;
}

body.direction-a .lx-search-bar.is-stuck::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - 1px);
	height: var(--acs-tear-h);
	background: var(--acs-white);
	-webkit-mask: url("media/masks/hero-top.png") 0 0 / 100% 100% no-repeat;
	mask: url("media/masks/hero-top.png") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

/* Home and Locations, desktop: the header row centres on the paper the eye reads (the bar plus the solid part of its torn edge, about 0.68 of --acs-tear-h), not on the bar alone */
@media (min-width: 1024px) {
	body.direction-a.page-template-direction-a .acs-header__inner,
	body.direction-a.page-template-locations .acs-header__inner,
	body.direction-a.page-template-locations-b .acs-header__inner,
	body.direction-a.page-template-location .acs-header__inner,
	body.direction-a.page-template-location-b .acs-header__inner,
	body.direction-a.page-template-gift-cards .acs-header__inner,
	body.direction-a.page-template-partners .acs-header__inner,
	body.direction-a.blog .acs-header__inner,
	body.direction-a.category .acs-header__inner,
	body.direction-a.single-post .acs-header__inner,
	body.direction-a.acs-404 .acs-header__inner,
	body.direction-a.page-template-styleguide .acs-header__inner,
	body.direction-a.page-template-press .acs-header__inner {
		transform: translateY(calc(var(--acs-tear-h) * 0.34));
	}

	/* The logo sits centred in the solid paper around it: the space above it matches the space down to where the torn edge's fringe begins (designer, 2026-09-29; it rose 3px before and still touched the fringe), about 10px each side at 1440 */
	body.direction-a.page-template-direction-a .acs-header__logo,
	body.direction-a.page-template-locations .acs-header__logo,
	body.direction-a.page-template-locations-b .acs-header__logo,
	body.direction-a.page-template-location .acs-header__logo,
	body.direction-a.page-template-location-b .acs-header__logo,
	body.direction-a.page-template-gift-cards .acs-header__logo,
	body.direction-a.page-template-partners .acs-header__logo,
	body.direction-a.blog .acs-header__logo,
	body.direction-a.category .acs-header__logo,
	body.direction-a.single-post .acs-header__logo,
	body.direction-a.acs-404 .acs-header__logo,
	body.direction-a.page-template-styleguide .acs-header__logo,
	body.direction-a.page-template-press .acs-header__logo {
		top: calc(var(--acs-tear-h) * -0.21);
	}
}

/* Home and Locations from 1440: the bar back to 90px (the locked chrome in START-HERE), the logo kept at its 88px */
@media (min-width: 1440px) {
	body.direction-a.page-template-direction-a,
	body.direction-a.page-template-locations,
	body.direction-a.page-template-locations-b,
	body.direction-a.page-template-location,
	body.direction-a.page-template-location-b,
	body.direction-a.page-template-gift-cards,
	body.direction-a.page-template-partners,
	body.direction-a.blog,
	body.direction-a.category,
	body.direction-a.single-post,
	body.direction-a.acs-404,
	body.direction-a.page-template-styleguide,
	body.direction-a.page-template-press {
		--acs-header-h: 5.625rem;
	}

	body.direction-a.page-template-direction-a .acs-header__logo img,
	body.direction-a.page-template-locations .acs-header__logo img,
	body.direction-a.page-template-locations-b .acs-header__logo img,
	body.direction-a.page-template-location .acs-header__logo img,
	body.direction-a.page-template-location-b .acs-header__logo img,
	body.direction-a.page-template-gift-cards .acs-header__logo img,
	body.direction-a.page-template-partners .acs-header__logo img,
	body.direction-a.blog .acs-header__logo img,
	body.direction-a.category .acs-header__logo img,
	body.direction-a.single-post .acs-header__logo img,
	body.direction-a.acs-404 .acs-header__logo img,
	body.direction-a.page-template-styleguide .acs-header__logo img,
	body.direction-a.page-template-press .acs-header__logo img {
		height: 5.5rem;
	}
}

/* ---------- Buttons: text centred on the container (style guide) ----------
   Line height is the font size + 8px. Measured on the rendered baseline (padding removed),
   Century Gothic's capitals sit 0.125em above the middle of the line in every
   button, at every size, so the content moves down by exactly that (the top
   padding runs 0.25em over the bottom) and any icon moves back up, leaving
   only the text shifted. Every button keeps its height. */
body.direction-a .acs-btn,
body.direction-a .a-reviews__more {
	box-sizing: border-box; /* the min-height (or height) includes the nudge, so heights hold */
	line-height: calc(1em + 8px);
	padding-top: 0.25em;
	padding-bottom: 0;
}

/* The shack chips carry their text in a label inside a button, which sits
   lower than bare button text (measured 0.3 to 0.8px high): the label itself
   moves down 0.04em, so no padding is needed and the 30px phone bar keeps
   its height */
body.direction-a .acs-loc-chip,
body.direction-a .acs-header__topbar .acs-loc-chip--wide {
	line-height: calc(1em + 8px);
}

body.direction-a .acs-loc-chip__label {
	position: relative;
	top: 0.04em;
}

/* Read more on Google has a 1px border outside its 48px: content-box, and the
   nudge comes off its min-height, so it stays 50px */
body.direction-a .a-reviews__more {
	box-sizing: content-box;
	min-height: calc(3rem - 0.25em);
}

/* The phone bar's Order now folds to nothing between the hero and footer */
body.direction-a.acs-cta-hidden:not(.acs-drawer-open) .acs-mobile-nav__order {
	padding-top: 0;
}

/* The one padded button in this family: 45px tall at 14px, as before */
body.direction-a .a-goodtime__cta {
	padding-top: calc(0.71875rem + 0.125em);
	padding-bottom: calc(0.71875rem - 0.125em);
}

body.direction-a .acs-btn svg,
body.direction-a .a-reviews__more svg {
	position: relative;
	top: -0.125em;
}

/* ---------- Home: the style guide applied (2026-09-29) ----------
   Every text role takes the scale in assets/css/tokens.css, fluid from the
   phone value at 375 to the desktop value at 1440 (/styleguide/). Button
   labels, menu links and the shack chip are UI labels and keep their sizes.
   Scoped to the home template; the same blocks on inner pages follow once
   those pages move to the scale (the header logo and footer on Locations,
   and the shared sections, footer and logo on the location template, gift
   cards, partners, press, Locations B and the blog listing and its category
   pages, follow from 2026-09-29). */
body.direction-a.page-template-styleguide .a-hero__title,
body.direction-a.page-template-direction-a .a-hero__title {
	font-size: var(--acs-h1-size);
	line-height: var(--acs-h1-lh);
}

body.direction-a.page-template-styleguide .a-offers__title,
body.direction-a.page-template-direction-a .a-offers__title,
body.direction-a.page-template-styleguide .a-cats__title,
body.direction-a.page-template-direction-a .a-cats__title,
body.direction-a.blog .a-cats__title,
body.direction-a.category .a-cats__title,
body.direction-a.page-template-press .a-cats__title,
body.direction-a.page-template-location .a-cats__title,
body.direction-a.page-template-styleguide .a-goodtime__title,
body.direction-a.page-template-direction-a .a-goodtime__title,
body.direction-a.blog .a-goodtime__title,
body.direction-a.category .a-goodtime__title,
body.direction-a.page-template-press .a-goodtime__title,
body.direction-a.page-template-partners .a-goodtime__title,
body.direction-a.page-template-gift-cards .a-goodtime__title,
body.direction-a.page-template-styleguide .a-reviews__title,
body.direction-a.page-template-direction-a .a-reviews__title,
body.direction-a.page-template-location-b .a-reviews__title,
body.direction-a.page-template-location .a-reviews__title,
body.direction-a.page-template-styleguide .a-crowd__title,
body.direction-a.page-template-direction-a .a-crowd__title,
body.direction-a.page-template-location .a-crowd__title {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

body.direction-a.page-template-styleguide .a-crowd__heading,
body.direction-a.page-template-direction-a .a-crowd__heading,
body.direction-a.page-template-location .a-crowd__heading {
	font-size: var(--acs-h3-size);
	line-height: var(--acs-h3-lh);
}

body.direction-a.page-template-styleguide .offer-card__heading,
body.direction-a.page-template-direction-a .offer-card__heading,
body.direction-a.page-template-styleguide .acs-footer__franchise-title,
body.direction-a.page-template-direction-a .acs-footer__franchise-title,
body.direction-a.page-template-location-b .acs-footer__franchise-title,
body.direction-a.page-template-locations-b .acs-footer__franchise-title,
body.direction-a.blog .acs-footer__franchise-title,
body.direction-a.category .acs-footer__franchise-title,
body.direction-a.single-post .acs-footer__franchise-title,
body.direction-a.acs-404 .acs-footer__franchise-title,
body.direction-a.page-template-press .acs-footer__franchise-title,
body.direction-a.page-template-partners .acs-footer__franchise-title,
body.direction-a.page-template-gift-cards .acs-footer__franchise-title,
body.direction-a.page-template-location .acs-footer__franchise-title,
body.direction-a.page-template-locations .acs-footer__franchise-title {
	font-size: var(--acs-h4-size);
	line-height: var(--acs-h4-lh);
}

body.direction-a.page-template-styleguide .acs-footer__col-title,
body.direction-a.page-template-direction-a .acs-footer__col-title,
body.direction-a.page-template-location-b .acs-footer__col-title,
body.direction-a.page-template-locations-b .acs-footer__col-title,
body.direction-a.blog .acs-footer__col-title,
body.direction-a.category .acs-footer__col-title,
body.direction-a.single-post .acs-footer__col-title,
body.direction-a.acs-404 .acs-footer__col-title,
body.direction-a.page-template-press .acs-footer__col-title,
body.direction-a.page-template-partners .acs-footer__col-title,
body.direction-a.page-template-gift-cards .acs-footer__col-title,
body.direction-a.page-template-location .acs-footer__col-title,
body.direction-a.page-template-locations .acs-footer__col-title,
body.direction-a.page-template-styleguide .a-cats__label,
body.direction-a.page-template-direction-a .a-cats__label,
body.direction-a.blog .a-cats__label,
body.direction-a.category .a-cats__label,
body.direction-a.page-template-press .a-cats__label,
body.direction-a.page-template-location .a-cats__label {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.direction-a.page-template-styleguide .a-hero__sub,
body.direction-a.page-template-direction-a .a-hero__sub {
	font-size: var(--acs-text-xl-size);
	line-height: var(--acs-text-xl-lh);
}

body.direction-a.page-template-styleguide .a-cats__sub,
body.direction-a.page-template-direction-a .a-cats__sub,
body.direction-a.blog .a-cats__sub,
body.direction-a.category .a-cats__sub,
body.direction-a.page-template-press .a-cats__sub,
body.direction-a.page-template-location .a-cats__sub,
body.direction-a.page-template-styleguide .a-goodtime__sub,
body.direction-a.page-template-direction-a .a-goodtime__sub,
body.direction-a.blog .a-goodtime__sub,
body.direction-a.category .a-goodtime__sub,
body.direction-a.page-template-press .a-goodtime__sub,
body.direction-a.page-template-partners .a-goodtime__sub,
body.direction-a.page-template-gift-cards .a-goodtime__sub,
body.direction-a.page-template-styleguide .a-reviews__sub,
body.direction-a.page-template-direction-a .a-reviews__sub,
body.direction-a.page-template-location-b .a-reviews__sub,
body.direction-a.page-template-location .a-reviews__sub,
body.direction-a.page-template-styleguide .a-crowd__sub,
body.direction-a.page-template-direction-a .a-crowd__sub,
body.direction-a.page-template-location .a-crowd__sub {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.direction-a.page-template-styleguide .a-crowd__body,
body.direction-a.page-template-direction-a .a-crowd__body,
body.direction-a.page-template-location .a-crowd__body,
body.direction-a.page-template-styleguide .offer-card__desc,
body.direction-a.page-template-direction-a .offer-card__desc,
body.direction-a.page-template-styleguide .a-review__text,
body.direction-a.page-template-direction-a .a-review__text,
body.direction-a.page-template-location-b .a-review__text,
body.direction-a.page-template-location .a-review__text,
body.direction-a.page-template-styleguide .a-review__name,
body.direction-a.page-template-direction-a .a-review__name,
body.direction-a.page-template-location-b .a-review__name,
body.direction-a.page-template-location .a-review__name,
body.direction-a.page-template-styleguide .acs-footer__franchise-sub,
body.direction-a.page-template-direction-a .acs-footer__franchise-sub,
body.direction-a.page-template-location-b .acs-footer__franchise-sub,
body.direction-a.page-template-locations-b .acs-footer__franchise-sub,
body.direction-a.blog .acs-footer__franchise-sub,
body.direction-a.category .acs-footer__franchise-sub,
body.direction-a.single-post .acs-footer__franchise-sub,
body.direction-a.acs-404 .acs-footer__franchise-sub,
body.direction-a.page-template-press .acs-footer__franchise-sub,
body.direction-a.page-template-partners .acs-footer__franchise-sub,
body.direction-a.page-template-gift-cards .acs-footer__franchise-sub,
body.direction-a.page-template-location .acs-footer__franchise-sub,
body.direction-a.page-template-locations .acs-footer__franchise-sub,
body.direction-a.page-template-styleguide .acs-footer__links a,
body.direction-a.page-template-direction-a .acs-footer__links a,
body.direction-a.page-template-location-b .acs-footer__links a,
body.direction-a.page-template-locations-b .acs-footer__links a,
body.direction-a.blog .acs-footer__links a,
body.direction-a.category .acs-footer__links a,
body.direction-a.single-post .acs-footer__links a,
body.direction-a.acs-404 .acs-footer__links a,
body.direction-a.page-template-press .acs-footer__links a,
body.direction-a.page-template-partners .acs-footer__links a,
body.direction-a.page-template-gift-cards .acs-footer__links a,
body.direction-a.page-template-location .acs-footer__links a,
body.direction-a.page-template-locations .acs-footer__links a {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.direction-a.page-template-styleguide .offer-card__date,
body.direction-a.page-template-direction-a .offer-card__date,
body.direction-a.page-template-styleguide .a-review__more,
body.direction-a.page-template-direction-a .a-review__more,
body.direction-a.page-template-location-b .a-review__more,
body.direction-a.page-template-location .a-review__more,
body.direction-a.page-template-styleguide .acs-footer__note,
body.direction-a.page-template-direction-a .acs-footer__note,
body.direction-a.page-template-location-b .acs-footer__note,
body.direction-a.page-template-locations-b .acs-footer__note,
body.direction-a.blog .acs-footer__note,
body.direction-a.category .acs-footer__note,
body.direction-a.single-post .acs-footer__note,
body.direction-a.acs-404 .acs-footer__note,
body.direction-a.page-template-press .acs-footer__note,
body.direction-a.page-template-partners .acs-footer__note,
body.direction-a.page-template-gift-cards .acs-footer__note,
body.direction-a.page-template-location .acs-footer__note,
body.direction-a.page-template-locations .acs-footer__note,
body.direction-a.page-template-styleguide .acs-footer__legal a,
body.direction-a.page-template-direction-a .acs-footer__legal a,
body.direction-a.page-template-location-b .acs-footer__legal a,
body.direction-a.page-template-locations-b .acs-footer__legal a,
body.direction-a.blog .acs-footer__legal a,
body.direction-a.category .acs-footer__legal a,
body.direction-a.single-post .acs-footer__legal a,
body.direction-a.acs-404 .acs-footer__legal a,
body.direction-a.page-template-press .acs-footer__legal a,
body.direction-a.page-template-partners .acs-footer__legal a,
body.direction-a.page-template-gift-cards .acs-footer__legal a,
body.direction-a.page-template-location .acs-footer__legal a,
body.direction-a.page-template-locations .acs-footer__legal a {
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

body.direction-a.page-template-styleguide .offer-card__badge-pre,
body.direction-a.page-template-direction-a .offer-card__badge-pre {
	font-size: var(--acs-text-sm-size-mobile);
	line-height: var(--acs-text-sm-lh-mobile);
}

/* Colours: the review stars in the brand yellow (secondary), not an
   off-palette gold */
body.direction-a.page-template-styleguide .a-review__stars,
body.direction-a.page-template-direction-a .a-review__stars,
body.direction-a.page-template-location-b .a-review__stars,
body.direction-a.page-template-location .a-review__stars {
	color: var(--acs-yellow);
}

/* Got a crowd's buttons are buttons too: text centred like the rest, height
   (the 44px min-height) as before */
body.direction-a .a-crowd__cta {
	box-sizing: border-box;
	line-height: calc(1em + 8px);
	padding-top: 0.25em;
	padding-bottom: 0;
}

/* The specials price on the scale: H5's size and line height, in the badge's
   own bold face */
body.direction-a.page-template-styleguide .offer-card__badge-price,
body.direction-a.page-template-direction-a .offer-card__badge-price {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

/* The last colours off the palette: the review card border (was black at
   17%), the good-time line (white at 92%), and the unseen text colour of the
   logo link and the carousel dots */
body.direction-a.page-template-styleguide .a-review,
body.direction-a.page-template-direction-a .a-review,
body.direction-a.page-template-location-b .a-review,
body.direction-a.page-template-location .a-review {
	border-color: var(--acs-line);
}

body.direction-a.page-template-styleguide .a-goodtime__sub,
body.direction-a.page-template-direction-a .a-goodtime__sub,
body.direction-a.blog .a-goodtime__sub,
body.direction-a.category .a-goodtime__sub,
body.direction-a.page-template-press .a-goodtime__sub,
body.direction-a.page-template-partners .a-goodtime__sub,
body.direction-a.page-template-gift-cards .a-goodtime__sub {
	color: var(--acs-white);
}

body.direction-a.page-template-styleguide .acs-header__logo,
body.direction-a.page-template-direction-a .acs-header__logo,
body.direction-a.page-template-location-b .acs-header__logo,
body.direction-a.page-template-locations-b .acs-header__logo,
body.direction-a.blog .acs-header__logo,
body.direction-a.category .acs-header__logo,
body.direction-a.single-post .acs-header__logo,
body.direction-a.acs-404 .acs-header__logo,
body.direction-a.page-template-press .acs-header__logo,
body.direction-a.page-template-partners .acs-header__logo,
body.direction-a.page-template-gift-cards .acs-header__logo,
body.direction-a.page-template-location .acs-header__logo,
body.direction-a.page-template-locations .acs-header__logo,
body.direction-a.page-template-styleguide .a-offers__dot,
body.direction-a.page-template-direction-a .a-offers__dot {
	color: var(--acs-ink);
}

/* ---------- Got a crowd: panel copy centred in the colour the eye sees ----------
   The heading carried a 1.25rem top margin and the bottom padding was
   0.5rem more than the top, but the last row's torn bottom edge (and, from
   900, the first row's torn top edge, which runs across the panel too)
   covers 0.668 of --acs-tear-h, so the copy sat 16px low on phones and 30px
   high over the torn edge. The heading loses its margin, the padding is even
   (0.25rem more below for the heading's ink starting under its box), and
   the torn rows add exactly what their edge covers. The line under each
   heading wraps evenly (no one-word last line). Every page with the stack. */
body.direction-a .a-crowd__panel {
	--a-crowd-pad: clamp(2rem, 1rem + 4vw, 4rem);
	padding-top: var(--a-crowd-pad);
	padding-bottom: calc(var(--a-crowd-pad) + 0.25rem);
}

body.direction-a .a-crowd__heading {
	margin-top: 0;
}

body.direction-a .a-crowd__row:last-child .a-crowd__panel {
	padding-bottom: calc(var(--a-crowd-pad) + 0.25rem + var(--acs-tear-h) * 0.668);
}

@media (min-width: 900px) {
	body.direction-a .a-crowd__row:first-child .a-crowd__panel {
		padding-top: calc(var(--a-crowd-pad) + var(--acs-tear-h) * 0.668);
	}
}

body.direction-a .a-crowd__body {
	text-wrap: balance;
}

/* ---------- Skip to content (rule 9), on the style guide ----------
   Off screen until a keyboard user reaches it; it then shows as the yellow
   button at the top left, never the browser's link blue */
body.direction-a .skip-link {
	color: var(--acs-ink);
	font-family: var(--acs-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: calc(1em + 8px);
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

body.direction-a .skip-link:focus {
	top: 0.5rem;
	left: 0.5rem;
	z-index: 200;
	padding: calc(0.75rem + 0.125em) 1.25rem calc(0.75rem - 0.125em);
	border-radius: var(--acs-radius);
	background: var(--acs-yellow);
	color: var(--acs-ink);
	outline: 2px solid var(--acs-ink);
	outline-offset: 2px;
}