/* #####################################################################
PART 1 + 2 — REBUILT PAGES  (home, about)
##################################################################### */
.hp {
	/* motion */
	--e: cubic-bezier(0.22, 1, 0.36, 1);
	--e-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* spacing — one scale, used everywhere */
	--s1: clamp(0.5rem, 1vw, 0.75rem);
	--s2: clamp(1rem, 2vw, 1.5rem);
	--s3: clamp(1.75rem, 3.5vw, 2.75rem);
	--s4: clamp(3rem, 6vw, 3.5rem);
	--s5: clamp(4.5rem, 10vw, 8rem);

	--r: 20px;
	--r-sm: 12px;

	--shell: min(100% - 2.5rem, 1240px);
	--shell-wide: min(100% - 2.5rem, 1480px);

	--sh1: 0 2px 10px -5px rgba(0, 0, 0, 0.2);
	--sh2: 0 24px 50px -28px rgba(0, 0, 0, 0.42);
	--sh3: 0 44px 90px -42px rgba(0, 0, 0, 0.55);

	/* One family, headings and body alike. --display and --ui are kept as
	separate names because the rules below still use them to mean "the
	heading voice" and "the label voice"; they differ now by weight,
	size and letter-spacing rather than by typeface. */
	--display: "Figtree", sans-serif;
	--ui: "Josefin Sans", sans-serif;

	background: var(--cream);
	color: var(--ink);
	font-family: var(--ui);
	/* Josefin Sans runs light for its weight: its 300 is nearly hairline at
	body sizes and loses effective contrast, so running text sits at 400. */
	font-weight: 400;
	line-height: 1.75;
	display: block;
	overflow-x: clip;
}

.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp img { max-width: 100%; display: block; }
.hp a { color: inherit; text-decoration: none; }
.hp ul { list-style: none; margin: 0; padding: 0; }
.hp button { font-family: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
.hp ::selection { background: var(--gold); color: var(--green-deep); }

/* ---------- shell ---------- */
.hp .shell { width: var(--shell); margin-inline: auto; }
.hp .shell-wide { width: var(--shell-wide); margin-inline: auto; }
.hp .band { padding-block: var(--s5); position: relative; }

.hp h1, .hp h2, .hp h3, .hp h4 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--green-deep);
	margin: 0;
	text-wrap: balance;
}

.hp .pgb__sub.d3{    line-height: 42px;}

.lead{
	font-weight:400;
}
.hp .d1 { font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -0.022em; }
.hp .d2 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.015em; }
.hp .d3 { font-size: clamp(1.2rem, 1.8vw, 2.5rem); letter-spacing: -0.008em; }

.hp .em {
	font-style: italic;
	font-weight: 500;
	color: var(--khaki);
}

.hero__in.shell .em,
.pgb .em{
	color:#E9E4BC;
} 

.inner-header{
	
}

/* micro-label — the counterweight to the serif. This pairing is the system. */
.hp .kicker {
	font-family: var(--ui);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--khaki-text);
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 var(--s2);
}
.hp .kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.8; flex: none; }

.hp p { margin: 0 0 1rem;text-wrap: pretty; }
.hp .lead { font-size: clamp(1.02rem, 1.35vw, 1.18rem); }

.hp .btn2 {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.5;
	padding: 10px 30px;
	border-radius: 50px;

	background: var(--beige);
	color: var(--green);
	text-align: center;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: all 0.5s ease;
	will-change: transform;
}
.hp .btn2 > * { position: relative; z-index: 2; }

button:focus{
	outline: none;
}

.hp .btn2::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--khaki);
	opacity: 0;
	transition: opacity 0.45s var(--e);
	z-index: 1;
}
.hp .btn2:hover { color: #fff; background-color: #000; }

/* scale is tiny on purpose — a big pop on a premium CTA reads cheap */
.hp .btn2:active { transform: translateY(-1px) scale(0.986); }



/* on the dark bands the header's borderless look is kept as-is */
.hp :where(.pgb, .feat, .visit, .delivery, .quotes, .enq, .phours, .press, .pairs) .btn2 {
	border-color: transparent;
}



.hp .btn2--gold,
.hp .btn2--ghost {
	background: var(--beige);
	color: var(--green);
	border-color: transparent;
	border-radius: 50px;
}
.hp .btn2--gold:hover,
.hp .btn2--ghost:hover{
	background-color: #000; color: #fff!important;;
}



.hp .btn2--gold.br-white:hover,
.hp .btn2--ghost.br-white:hover{
	background-color: #fff; color: #000!important;
}

.hp .btn2--gold.br-white:hover svg,
.hp .btn2--ghost.br-white:hover svg,
.hp .btn2:hover svg{
	fill: #000;
}


.hp .btn2--gold svg,
.hp .btn2--ghost svg,
.hp .btn2 svg{
	fill: var(--green);
}

.hp .btn2--gold:hover svg,
.hp .btn2--ghost:hover svg,
.hp .btn2:hover svg{
	fill: #fff;
}

.hp .btn2--gold::before,
.hp .btn2--ghost::before { background: var(--khaki); }
.hp .btn2--ghost:hover { color: var(--green-deep); border-color: transparent; }

.hp .tlink {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--green); padding-bottom: 3px; position: relative;
}
.hp .tlink::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background: currentColor; transform: scaleX(0.3); transform-origin: left;
	transition: transform 0.5s var(--e);
}
.hp .tlink:hover::after { transform: scaleX(1); }

/* =====================================================================
1. HERO — full-bleed video, editorial type block
===================================================================== */
.hp .hero { position: relative; min-height: min(92svh, 900px); display: grid; align-items: end; overflow: hidden; background: var(--green-deep); }
.hp .hero__media { position: absolute; inset: 0; z-index: 0; }
.hp .hero__media video, .hp .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hp .hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.25) 40%,
			rgba(0, 0, 0, 0.92) 100%
		),
		radial-gradient(
			90% 70% at 15% 85%,
			rgba(0, 0, 0, 0.70) 0%,
			rgba(0, 0, 0, 0) 70%
		);
}
.hp .hero__in { position: relative; z-index: 2; padding-block: var(--s5) var(--s4); }
.hp .hero .kicker { color: var(--star); }
.hp .hero h1 { color: var(--cream); max-width: 16ch; }
.hp .hero__sub { color: rgba(243,241,231,0.86); font-size: 1.05rem; max-width: 46ch; margin-top: var(--s2); }
.hp .hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: var(--s3); }

/* scroll cue */
.hp .hero__cue {
	position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
	z-index: 3; width: 1px; height: 46px; background: rgba(243,241,231,0.28); overflow: hidden;
}
.hp .hero__cue::after {
	content: ''; position: absolute; inset: 0; background: #fff;
	transform: translateY(-100%); animation: hpCue 2.2s var(--e) infinite;
}
@keyframes hpCue { 0% { transform: translateY(-100%);} 60%,100% { transform: translateY(100%);} }

/* =====================================================================
2. DELIVERY STRIP — quiet logos on a dark band
===================================================================== */
.hp .delivery { background: var(--green-deep); padding-block: var(--s4); border-top: 1px solid rgba(201,164,92,0.16); }
.hp .delivery__in { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center; }
.hp .delivery h2 { color: var(--cream); font-size: clamp(1.8rem, 2.2vw, 2rem); max-width: 14ch; }
.hp .delivery__logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); justify-content: flex-end; }
.hp .delivery__logos a { display: block; }
.hp .delivery__logos img {
	height: clamp(22px, 2.4vw, 30px); width: auto;
	filter: grayscale(1) brightness(0) invert(1); opacity: 0.5;
	transition: opacity 0.4s var(--e), filter 0.4s var(--e), transform 0.4s var(--e-out);
}
.hp .delivery__logos a:hover img { opacity: 1; filter: none; transform: translateY(-2px); }

/* =====================================================================
3. STORY — asymmetric, sticky copy, overlapping plates
===================================================================== */
.hp .story { background: var(--cream); }
.hp .story__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.hp .story__media { position: relative; }
.hp .story__media .plate {
	border-radius: var(--r); overflow: hidden; box-shadow: var(--sh3);
	background: color-mix(in srgb, var(--khaki) 12%, var(--cream));
}
.hp .story__media .plate img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
/* second plate overlaps — depth without a carousel */
.hp .story__media .plate--float {
	position: absolute; right: -6%; bottom: -8%; width: 46%;
	border-radius: var(--r-sm); box-shadow: var(--sh3);
	border: 6px solid var(--cream);
}
.hp .story__media .plate--float img { aspect-ratio: 1/1; }
.hp .story__badge {
	position: absolute; left: -4%; top: 6%;
	background: var(--gold); color: var(--green-deep);
	border-radius: 999px; padding: 0.7rem 1.2rem; text-align: center;
	box-shadow: var(--sh2); font-family: var(--ui);
}
.hp .story__badge span { display: block; font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.8; }
.hp .story__badge strong { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.01em; }

/* =====================================================================
4. FEATURED — 4 offerings as tall editorial tiles
===================================================================== */
.hp .feat {
	background: var(--green-deep);
	/* a whisper of warmth from the top so the band isn't a flat slab */
	background-image: radial-gradient(120% 80% at 50% 0%, rgba(0, 0, 0,0.55) 0%, rgba(0, 0, 0,0) 65%);
}
.hp .feat h2, .hp .feat .d2 { color: var(--cream); }

.hp .feat__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.6vw, 1.5rem);
	margin-top: var(--s4);
	align-items: start;
}

@media (min-width: 1101px) {
	.hp .tile:nth-child(even) { margin-top: clamp(1.5rem, 3vw, 3rem); }
}

.hp .tile {
	position: relative;
	border-radius: var(--r);
	overflow: hidden;

	min-height: clamp(400px, 34vw, 560px);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	transition: transform 0.7s var(--e-out), box-shadow 0.7s var(--e-out);
	will-change: transform;
}

.hp .tile img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0;
	/* rests very slightly scaled so the hover zoom has somewhere to go
	without the edges ever showing through */
	transform: scale(1.02);
	transition: transform 1.4s var(--e-out), filter 0.8s var(--e);
	will-change: transform;
}

.hp .tile::before {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0,0.18) 0%,
		rgba(0, 0, 0,0.10) 26%,
		rgba(0, 0, 0,0.58) 52%,
		rgba(0, 0, 0,0.88) 74%,
		rgba(0, 0, 0,0.97) 100%
	);
	transition: opacity 0.7s var(--e);
}

.hp .tile::after {
	content: ''; position: absolute; inset: 10px; z-index: 2;
	border: 1px solid rgba(243,241,231,0.16);
	border-radius: calc(var(--r) - 8px);
	pointer-events: none;
	transition: border-color 0.6s var(--e), inset 0.6s var(--e);
}
.hp .tile:hover::after { border-color: rgba(255,255,255,1); }

.hp .tile__body {
	position: relative; z-index: 3;
	padding: clamp(1.3rem, 2vw, 1.9rem);
	width: 100%;
}

.hp .tile__tag {
	display: inline-flex; align-items: center; gap: 0.55rem;
	font-family: var(--ui);
	font-size: 0.7rem; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase;
	color:#fff;
	line-height: 1.4;
}


.hp .btn2.green{
	background-color:#21523E;
	color:#fff;
}

.hp .btn2.green:hover{
	background-color:#000;
}

.hp .btn2.green svg{
	fill:#fff;
}

.hp .tile h3 {
	color: var(--cream);
	margin: 0.7rem 0 0;
	font-size: clamp(1.5rem, 1.5vw, 1.55rem);
	letter-spacing: -0.018em;
}


.hp .tile p {
	color: #fff!important;
	font-size: 1rem; line-height: 1.6;
	margin: 0.65rem 0 0;
	max-width: 38ch;
}

.hp .tile__cta {
	display: inline-flex; align-items: center; gap: 0.5rem;
	margin-top: 1.1rem;
	font-family: var(--ui);
	font-size: 0.72rem; font-weight: 500;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--star);
	position: relative;
}
/* underline sweeps in from the left */
.hp .tile__cta__t { position: relative; padding-bottom: 3px; }
.hp .tile__cta__t::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform 0.55s var(--e);
}
.hp .tile:hover .tile__cta__t::after { transform: scaleX(1); }
.hp .tile__cta__a { transition: transform 0.55s var(--e-out); }
.hp .tile:hover .tile__cta__a { transform: translateX(5px); }

.hp .tile:hover { transform: translateY(-8px); box-shadow: var(--sh3); }
.hp .tile:hover img { transform: scale(1.09); }
.hp .tile:hover::before { opacity: 0.94; }

/* =====================================================================
5. MENU — tabbed, classic two-column listing
===================================================================== */
.hp .menu { background: var(--cream); }
.hp .menu__head { text-align: center; }
.hp .menu__head .d2 { margin-inline: auto; }

.hp .tabs2 {
	display: flex; gap: 0.4rem; flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--s3); padding-bottom: var(--s3);
	border-bottom: 1px solid rgba(0, 0, 0,0.12);
}
.hp .tab2 {
	font-family: var(--ui); font-size: 0.72rem; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase;
	padding: 0.7rem 1.2rem; border-radius: 999px; color: #5b6659;
	border: 1px solid transparent;
	transition: background-color 0.35s var(--e), color 0.35s var(--e), border-color 0.35s var(--e);
	white-space: nowrap;
}
.hp .tab2:hover { border-color: rgba(0, 0, 0,0.2); color: var(--green-deep); }
.hp .tab2[aria-selected="true"] { background: var(--green); color: var(--cream); border-color: var(--green); }

.hp .panel { display: none; }
.hp .panel.is-on { display: block; }

/* two columns, generous column-gap so the two lists read as separate menus */
.hp .dishes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 5vw, 5rem);
	row-gap: clamp(1.6rem, 2.6vw, 2.2rem);
	margin-top: var(--s4);
	align-items: start;
}

/* [thumb] [name ···· price / description] */
.hp .dish {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(0.9rem, 1.6vw, 1.4rem);
	align-items: center;
}

.hp .dish__plate {
	position: relative;
	/* round, per the reference. 1:1 also matches the source art exactly
	(1200x1200; the smash renders are 956x826), so nothing is cropped. */
	width: clamp(64px, 6vw, 84px);
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
	background: color-mix(in srgb, var(--khaki) 10%, var(--cream));
	flex: none;
}
.hp .dish__plate img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.9s var(--e-out); will-change: transform;
}
.hp .dish:hover .dish__plate img { transform: scale(1.08); }
.hp .dish__plate::after {
	content: ''; position: absolute; inset: 0;
	border: 1px solid transparent; border-radius: 50%;
	transition: border-color 0.5s var(--e); pointer-events: none;
}
.hp .dish:hover .dish__plate::after { border-color: rgba(201,164,92,0.6); }

/* name ···· price, baseline-aligned so the leader sits on the type baseline */
.hp .dish__row {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	width: 100%;
}
.hp .dish__name {
	font-size: clamp(1rem, 1.25vw, 2rem);
	margin: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	flex: 0 1 auto;
	min-width: 0;           /* lets long names wrap instead of shoving the price out */
}
/* the dotted leader: a flexible rule that eats the gap between name and price */
.hp .dish__dots {
	flex: 1 1 auto;
	min-width: 1.5rem;
	align-self: center;
	border-bottom: 1px dotted var(--khaki);
	opacity: 0.65;
	transform: translateY(-2px);
}
.hp .dish__price {
	flex: none;
	font-family: var(--ui);
	font-size: clamp(0.95rem, 1.1vw, 1.08rem);
	font-weight: 500;
	color: var(--green-deep);
	transition: color 0.35s var(--e);
}
.hp .dish:hover .dish__price { color: var(--khaki); }

.hp .dish__desc {
	font-size: 18px;
	line-height: 1.5;
	margin: 0.3rem 0 0;
	max-width: 46ch;
}

.hp .dish__tags { display: inline-flex; gap: 0.3rem; flex: none; }
.hp .dish__tags img { height: 15px; width: auto; display: inline-block; }

/* =====================================================================
8. VISIT — hours on a dark band
===================================================================== */
.hp .visit { background: var(--green-deep); }
.hp .visit h2, .hp .visit .d2 { color: #fff; }
.hp .visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); margin-top: var(--s4); }
.hp .visit__addr { color: #fff!important; }
.hp .hours { border-top: 1px solid rgba(201,164,92,0.22); }
.hp .hours h3 { color: #fff; font-family: "Figtree", sans-serif; font-size: 24px; text-transform: uppercase; font-weight: 500; margin: var(--s2) 0 0.6rem; }
.hp .hours__row { display: flex; justify-content: space-between; gap: var(--s2); padding: 0.65rem 0; border-bottom: 1px solid rgba(243,241,231,0.08); }
.hp .hours__row span { color: #fff; font-size: 1rem; }
.hp .hours__row b { color: #fff; font-weight: 500; font-size: 1rem; text-align: right; }
.hp .visit__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--s3); justify-content: center;}

/* =====================================================================
FOCUS — the theme ships none.
Green by default (light page). Star on dark bands: star-on-cream is
1.71:1, an invisible ring is worse than none.
===================================================================== */
.hp :where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px;
}
.hp :where(.hero, .feat, .visit, .delivery) :where(a, button, [tabindex]):focus-visible { outline-color: var(--star); }

/* =====================================================================
REVEAL — .rv is applied BY JS only. If GSAP fails, nothing hides.
===================================================================== */
.hp .rv { opacity: 0; transform: translateY(22px); will-change: opacity, transform; }

/* =====================================================================
RESPONSIVE — mobile-first guards
===================================================================== */
@media (max-width: 1100px) {
	.hp .feat__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	/* the two-column listing collapses to one; two narrow menu columns force
	the dotted leader down to a few pixels and the descriptions to wrap hard */
	.hp .dishes { grid-template-columns: 1fr; }
	.hp .story__grid { grid-template-columns: 1fr; }
	.hp .story__media { max-width: 520px; }
	.hp .story__media .plate--float { width: 40%; right: 0; }
	.hp .visit__grid { grid-template-columns: 1fr; }
	.hp .delivery__in { grid-template-columns: 1fr; gap: var(--s2); }
	.hp .delivery__logos { justify-content: flex-start;     display: grid;
    grid-template-columns: repeat(2, 1fr); }
	.hp .pgb__sub.d3{
		    line-height: 24px!important;
	}
}
@media (max-width: 640px) {
	.hp .feat__grid { grid-template-columns: 1fr; }
	/* a 3:4.35 portrait is too tall once it spans the full width */
	.hp .tile { min-height: 380px; }
	.hp .dish__name { font-size: 0.95rem; }
	.hp .dish__desc { font-size: 0.78rem; }
	/* below ~420px the leader has no room to read as a leader — drop it and
	let the price sit at the end of the name row */
	.hp .dish__dots { display: none; }
	.hp .dish__row { gap: 0.5rem; justify-content: space-between; }
	.hp .hero { min-height: 88svh; }
	.hp .story__media .plate--float { position: relative; right: auto; bottom: auto; width: 60%; margin: -18% 0 0 auto; }
	.hp .story__badge { left: 0; }
	.hp .pgb__sub.d3{
		    line-height: 24px!important;
	}
}
@media (hover: none) {
	.hp .tile:hover, .hp .dish:hover { transform: none; }
	.hp .tile:hover img, .hp .dish:hover .dish__plate img { transform: none; }
	.hp .delivery__logos img { opacity: 1; filter: grayscale(1) brightness(0) invert(1); }
	/* copy is always visible now; just pin the accents that hover would give */
	.hp .tile::after { border-color: rgba(201,164,92,0.45); }
	.hp .tile__cta__t::after { transform: scaleX(1); }
}

/* =====================================================================
ABOUT PAGE
Reuses the shared system above (.band/.shell/.d1-.d3/.kicker/.em/.btn2,
plus .story__* from the home story block). Only what is unique lives here.
===================================================================== */

/* ---------- page banner ---------- */
.hp .pgb {
	position: relative; min-height: min(56svh, 520px);
	display: grid; align-items: end; overflow: hidden; background: var(--green-deep);
}
.hp .pgb__media { position: absolute; inset: 0; z-index: 0; }
.hp .pgb__media img { width: 100%; height: 100%; object-fit: cover; }
.hp .pgb__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: rgba(0, 0, 0, 0.65);
}
.hp .pgb__in { position: relative; z-index: 2; padding-block: var(--s5) var(--s4); }
.hp .pgb h1 { color: var(--cream); }

.hp .crumb {
	display: flex; align-items: center; gap: 0.6rem;
	font-family: var(--ui); font-size: 0.7rem; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: rgba(243,241,231,0.6); margin-bottom: var(--s2);
}
.hp .crumb a { color: #fff; transition: color 0.3s var(--e); }
.hp .crumb a:hover { color: var(--cream); }
.hp .crumb [aria-current] { color: rgba(243,241,231,0.9); }

/* ---------- story: press note ---------- */
.hp .press-note {
	font-size: 1rem; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: #000!important; margin: 0 0 1.1rem;
}

/* ---------- why: 8 bullets, 2 columns ---------- */
.hp .why { background: color-mix(in srgb, var(--khaki) 13%, var(--cream)); }
.hp .why__list {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0;
	margin-top:15px;
}
.hp .why__list li {
	display: flex; align-items: baseline; gap: 0.85rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(0, 0, 0,0.12);
	font-size: clamp(0.95rem, 1.1vw, 1rem);
	color: var(--green-deep);
}
/* gold rule as the bullet — replaces the theme's inline SVG dot */
.hp .why__list li::before {
	content: ''; flex: none; width: 14px; height: 1px;
	background: var(--khaki); transform: translateY(-4px);
}

/* ---------- ingredients ---------- */
.hp .ings { background: var(--cream); }
.hp .ings__grid {
	display: grid; grid-template-columns: 1.25fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.hp .ings__list { margin-top: var(--s3); }
.hp .ing {
	padding: 1.4rem 0;
	border-top: 1px solid rgba(0, 0, 0,0.12);
}
.hp .ing:first-child { border-top: 0; padding-top: 0; }
.hp .ing h3 { font-size:32px; margin-bottom: 15px; }
.hp .ing p { font-size: 1rem; margin: 0; max-width: 56ch; }
.hp .ings__media {
	position: sticky; top: 96px;
	border-radius: var(--r); overflow: hidden; box-shadow: var(--sh3);
}
.hp .ings__media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* ---------- culture: full-bleed band ---------- */
.hp .culture { display: block; background: var(--green-deep); }
.hp .culture img { width: 100%; height: auto; display: block; }

/* ---------- press ---------- */
.hp .press { background: var(--green-deep); }
.hp .press :where(h2, .d2) { color: #fff; }
.hp .press p { color: #fff!important; }
.hp .press .kicker { color: var(--star); }
.hp .press__grid {
	display: grid; grid-template-columns: 1fr 1.15fr;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hp .press__media { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh3); }
.hp .press__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.hp .press__quote {
	font-family: var(--display); font-style: italic;
	font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5;
	color: #fff; margin: 1.4rem 0 0.8rem; padding-left: 1.2rem;
	border-left: 2px solid #947748;
	max-width: 40ch;
}
.hp .press__src {
	font-family: var(--ui); font-size: 0.72rem; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--khaki-text) !important; margin-bottom: 1.2rem;
}

/* ---------- experience: 4 cards ---------- */
/* .hp .xps { background: color-mix(in srgb, var(--khaki) 13%, var(--cream)); } */
.hp .xps__grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.6vw, 1rem); margin-top: var(--s4);
}
.hp .xp {
	background: var(--cream); 
	border-radius: var(--r); padding: clamp(1rem, 2.2vw, 1rem);
	box-shadow: var(--sh1);
	transition: transform 0.55s var(--e-out), box-shadow 0.55s var(--e-out);
	will-change: transform;
	position: relative;
}

.hp .xp:hover { transform: translateY(-5px);  }
.hp .xp:hover::before { transform: scaleY(1); }
.hp .xp h3 { font-size: 26px; margin-bottom: 15px; }
.hp .xp p { font-size: 18px; line-height: 1.5; margin: 0; }
.hp .xps__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--s3); justify-content: center;}

/* ---------- about responsive ---------- */
@media (max-width: 1000px) {
	.hp .xps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.hp .why__list { grid-template-columns: 1fr; }
	.hp .ings__grid, .hp .press__grid { grid-template-columns: 1fr; }
	.hp .ings__media { position: static; max-width: 520px; }
	.hp .press__media { max-width: 460px; }
}
@media (max-width: 600px) {
	.hp .xps__grid { grid-template-columns: 1fr; }
	.hp .pgb { min-height: 44svh; }
}
@media (hover: none) {
	.hp .xp:hover { transform: none; }
	.hp .xp::before { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
	.hp .xp:hover { transform: none; }
	.hp .xp::before { transform: scaleY(1); }
}

/* =====================================================================
BOOK EVENTS PAGE
Reuses the shared system (.band/.shell/.d1-.d3/.kicker/.em/.btn2/.pgb/
.crumb/.press-note). Only what is unique to this page lives here.
===================================================================== */

/* ---------- intro ---------- */
.hp .intro { background: var(--cream); text-align: center; }
.hp .intro .d2, .hp .intro .lead { margin-inline: auto; }
.hp .intro .lead { max-width: 80ch; }
.hp .intro .press-note { justify-content: center; display: block; }
.hp .intro__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: var(--s3); }

/* ---------- venue ---------- */
.hp .venue { background: color-mix(in srgb, var(--khaki) 13%, var(--cream)); }
.hp .venue__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hp .venue__list { margin: 0; }
.hp .venue__list li {
	display: flex; align-items: baseline; gap: 0.85rem;
	padding: 0.95rem 0; border-bottom: 1px solid rgba(0, 0, 0,0.12);
	font-size: clamp(0.92rem, 1.05vw, 1.02rem); color: var(--green-deep);
}
.hp .venue__list li::before {
	content: ''; flex: none; width: 14px; height: 1px;
	background: var(--khaki); transform: translateY(-4px);
}

/* ---------- testimonials ---------- */
.hp .quotes { background: var(--green-deep); text-align: center; }
.hp .quotes :where(h2, .d2) { color: var(--cream); }
.hp .quotes .d2 { margin-inline: auto; }
.hp .quotes__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem); margin-top: var(--s4); text-align: left;
}
.hp .quote {
	margin: 0; padding: clamp(1.5rem, 2.4vw, 2.1rem);
	border: 1px solid rgba(201,164,92,0.28); border-radius: var(--r);
	background: rgba(243,241,231,0.03);
	display: flex; flex-direction: column; gap: 1rem;
	transition: border-color 0.5s var(--e), transform 0.5s var(--e-out);
}
.hp .quote:hover { border-color: rgba(201,164,92,0.7); transform: translateY(-4px); }
.hp .quote blockquote {
	margin: 0; font-family: var(--display); font-style: italic;
	font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.6; color: var(--cream);
}
.hp .quote figcaption {
	font-family: var(--ui); font-size: 0.72rem; font-weight: 500;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--star);
	margin-top: auto;
}
.hp .quotes__cta { margin-top: var(--s3); }
.hp .press-strip { margin: var(--s4) auto 0; max-width: 760px; }
.hp .press-strip img { width: 100%; border-radius: var(--r); }
.hp .press-strip figcaption {
	font-family: var(--ui); font-size: 16px;     color: var(--cream);
	margin-top: 0.8rem;
}

/* ---------- feature cards (9) ---------- */
.hp .feats { background: var(--cream); text-align: center; }
.hp .feats .d2, .hp .feats .lead { margin-inline: auto; }
.hp .feats .lead { max-width: 80ch; }
.hp .feats__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2.25rem); margin-top: var(--s4); text-align: center;
}
.hp .fcard__media {
	border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3;
	background: color-mix(in srgb, var(--khaki) 10%, var(--cream));
}
.hp .fcard__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.9s var(--e-out); will-change: transform;
}
.hp .fcard:hover .fcard__media img { transform: scale(1.06); }
.hp .fcard h3 { margin: 1.1rem 0 0.4rem; font-size: 26px; }
.hp .fcard p { font-size: 18px;  margin: 0 auto; max-width: 34ch; }

/* ---------- event categories (video tiles) ---------- */
.hp .evs { background: color-mix(in srgb, var(--khaki) 13%, var(--cream)); text-align: center; }
.hp .evs .d2 { margin-inline: auto; }
.hp .evs__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem); margin-top: var(--s4);
}
.hp .ev__media {
	position: relative; border-radius: var(--r); overflow: hidden;
	aspect-ratio: 6/5; background: var(--green-deep);
}
.hp .ev__media video {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 1s var(--e-out); will-change: transform;
}
.hp .ev:hover .ev__media video { transform: scale(1.05); }
.hp .ev__media::after {
	content: ''; position: absolute; inset: 0;
	border: 1px solid transparent; border-radius: var(--r);
	transition: border-color 0.5s var(--e); pointer-events: none;
}
.hp .ev:hover .ev__media::after { border-color: rgba(201,164,92,0.6); }
.hp .ev h3 { margin: 1rem 0; font-size: 26px; }
.hp .evs__cta { margin-top: var(--s3); }

#event_type{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	width: 100%;
	padding: 14px 48px 14px 16px;
	border: 1px solid #ccc;
	border-radius: 8px;


	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	cursor: pointer;
}


#event_type{
	color: #fff;
}
#event_date::-webkit-calendar-picker-indicator {
	filter: invert(1);
	cursor: pointer;
}
#event_type::-ms-expand{
	display: none; /* IE */
}

.select-wrapper{
	position: relative;
}

.select-wrapper select{
	width:100%;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	padding-right:45px;
}

.select-wrapper i{
	position:absolute;
	right:15px;
	top:50%;
	transform:translateY(-50%);
	pointer-events:none;
	font-size:12px;
}
/* ---------- enquiry ---------- */
.hp .enq { background: var(--green-deep); }
.hp .enq :where(h2, .d2, .d3) { color: #fff; }
.hp .enq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hp .enq__list { margin: 1rem 0 0; }
.hp .enq__list li { padding: 0.6rem 0; border-bottom: 1px solid rgba(243,241,231,0.1); }
.hp .enq__list a { color: #fff; font-size: 0.92rem; transition: color 0.3s var(--e); }
.hp .enq__hours { margin-top: 0.8rem; }
.hp .hrow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(243,241,231,0.08); }
.hp .hrow span { color: #fff; font-size: 0.84rem; }
.hp .hrow b { color: var(--cream); font-weight: 500; font-size: 0.84rem; text-align: right; }

.hp .enq__form { background: rgba(243,241,231,0.04); border: 1px solid rgba(255,255,255,1); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.5rem); }
.hp .frm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin:15px 0; }
.hp .fld--full { grid-column: 1 / -1; }
.hp .fld label {
	display: block; font-size: 0.68rem; font-weight: 500;
	letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin-bottom: 0.45rem;
}
.hp .fld :where(input, select, textarea) {
	width: 100%; font-family: var(--ui); font-size: 1rem;
	background: rgba(0, 0, 0,0.5); color: var(--cream);
	border: 1px solid rgba(255,255,255,1)!important; border-radius: var(--r-sm);
	padding: 0.8rem 0.9rem;
	transition: border-color 0.3s var(--e), box-shadow 0.3s var(--e);
}
.hp .fld :where(input, select, textarea):focus {
	outline: none; border-color: var(--star);
	box-shadow: 0 0 0 3px rgba(232,178,58,0.16);
}
.hp .fld select option { background: var(--green-deep); color: var(--cream); }

/* ---------- FAQ accordion ---------- */
.hp .bfaq { background: var(--pearl); }
.hp .bfaq__list { margin-top: var(--s4); }
.hp .fq { border-bottom: 1px solid rgba(0, 0, 0,0.13); }
.hp .fq__q {
	width: 100%; display: flex; align-items: center; gap: 1rem;
	padding: 1.35rem 0; text-align: left;
}
.hp .fq__n {
	flex: none; font-family: var(--ui); font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.14em; color: var(--khaki-text);
}
.hp .fq__t {
	flex: 1; font-family: var(--display); font-weight: 600;
	font-size: 24px; color: var(--green-deep);

	transition: color 0.3s var(--e);
}
.hp .fq__q:hover .fq__t { color: var(--khaki); }
.hp .fq__ic {
	flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid rgba(0, 0, 0,0.22);
	transition: background-color 0.35s var(--e), border-color 0.35s var(--e);
}
.hp .fq__ic::before, .hp .fq__ic::after {
	content: ''; position: absolute; top: 50%; left: 50%; background: var(--green-deep);
	transform: translate(-50%, -50%);
}
.hp .fq__ic::before { width: 11px; height: 1.5px; }
.hp .fq__ic::after { width: 1.5px; height: 11px; transition: transform 0.4s var(--e); }
.hp .fq__q[aria-expanded="true"] .fq__ic { background: var(--green); border-color: var(--green); }
.hp .fq__q[aria-expanded="true"] .fq__ic::before,
.hp .fq__q[aria-expanded="true"] .fq__ic::after { background: var(--cream); }
.hp .fq__q[aria-expanded="true"] .fq__ic::after { transform: translate(-50%, -50%) scaleY(0); }
.hp .fq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--e); }
.hp .fq__q[aria-expanded="true"] + .fq__a { grid-template-rows: 1fr; }
.hp .fq__a > div { overflow: hidden; }
.hp .fq__a p { padding: 0 0 1.35rem 2.4rem; margin: 0; font-size: 18px; }
.hp .fq__a a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- book-events responsive ---------- */
@media (max-width: 1000px) {
	.hp .feats__grid, .hp .evs__grid, .hp .quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp .venue__grid, .hp .enq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.hp .feats__grid, .hp .evs__grid, .hp .quotes__grid { grid-template-columns: 1fr; }
	.hp .frm__grid { grid-template-columns: 1fr; }
	.hp .fq__a p { padding-left: 0; }
}
@media (hover: none) {
	.hp .quote:hover, .hp .ev:hover .ev__media video, .hp .fcard:hover .fcard__media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hp .quote:hover { transform: none; }
}

/* =====================================================================
GALLERY PAGE
===================================================================== */
.hp .gal { background: var(--cream); }
.hp .gal__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.6rem, 1.2vw, 1rem);
	grid-auto-flow: dense;   /* lets the 2x2 tiles slot in without leaving holes */
}
.hp .gtile {
	position: relative;
	aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: var(--r-sm);
	padding: 0;
	background: color-mix(in srgb, var(--khaki) 10%, var(--cream));
	cursor: zoom-in;
	isolation: isolate;
	transition: transform 0.5s var(--e-out), box-shadow 0.5s var(--e-out);
	will-change: transform;
}
.hp .gtile--big { grid-column: span 2; grid-row: span 2; }

.hp .gtile img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.9s var(--e-out); will-change: transform;
}
.hp .gtile:hover { transform: translateY(-3px); box-shadow: var(--sh2); z-index: 2; }
.hp .gtile:hover img { transform: scale(1.06); }

/* green wash + zoom cue on hover */
.hp .gtile::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0,0) 40%, rgba(0, 0, 0,0.55) 100%);
	opacity: 0; transition: opacity 0.5s var(--e); pointer-events: none;
}
.hp .gtile:hover::after, .hp .gtile:focus-visible::after { opacity: 1; }
.hp .gtile__ic {
	position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 2;
	width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid rgba(243,241,231,0.6);
	opacity: 0; transform: scale(0.85);
	transition: opacity 0.45s var(--e), transform 0.45s var(--e-out);
}
.hp .gtile__ic::before, .hp .gtile__ic::after {
	content: ''; position: absolute; top: 50%; left: 50%; background: var(--cream);
	transform: translate(-50%, -50%);
}
.hp .gtile__ic::before { width: 11px; height: 1.5px; }
.hp .gtile__ic::after { width: 1.5px; height: 11px; }
.hp .gtile:hover .gtile__ic, .hp .gtile:focus-visible .gtile__ic { opacity: 1; transform: scale(1); }

/* ---------- lightbox (outside .hp) ---------- */
.lb {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	gap: clamp(0.5rem, 2vw, 2rem);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(6px);
}
.lb[hidden] { display: none; }
.lb__stage { margin: 0; max-width: min(92vw, 1000px); text-align: center; }
.lb__img {
	max-width: 100%; max-height: 76vh; width: auto; height: auto;
	border-radius: 10px; display: block; margin-inline: auto;
	box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
}
.lb__cap {
	margin-top: 1rem;  font-family: "Jost", sans-serif;
	display: flex; flex-direction: column; gap: 0.35rem; align-items: center;
}
.lb__count { font-size: 0.72rem; letter-spacing: 0.24em; color: #fff; }
.lb__alt { font-size: 0.84rem; color: rgba(243,241,231,0.72); max-width: 62ch; line-height: 1.55; }

.lb__close, .lb__nav {
	flex: none; border-radius: 50%;
	border: 1px solid rgba(243,241,231,0.28);
	background: rgba(243,241,231,0.06);
	color: #F3F1E7; cursor: pointer; line-height: 1;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.lb__nav { width: 48px; height: 48px; font-size: 1.9rem; }
.lb__close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 42px; height: 42px; font-size: 1.5rem; }
.lb__close:hover, .lb__nav:hover { background: rgba(201,164,92,0.9); border-color: transparent; color: var(--green-deep); }
.lb__close:focus-visible, .lb__nav:focus-visible { outline: 2px solid #E8B23A; outline-offset: 3px; }

@media (max-width: 900px) {
	.hp .gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.hp .gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* a 2x2 feature inside a 2-col grid would be the whole width — drop it */
	.hp .gtile--big { grid-column: span 1; grid-row: span 1; }
	.lb__nav { width: 40px; height: 40px; font-size: 1.5rem; }
	.lb__img { max-height: 64vh; }
}
@media (hover: none) {
	.hp .gtile:hover { transform: none; }
	.hp .gtile:hover img { transform: none; }
	.hp .gtile__ic { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.hp .gtile:hover, .hp .gtile:hover img { transform: none; }
	.lb { backdrop-filter: none; }
}

/* =====================================================================
REVIEWS PAGE — the 3 long-form testimonials
(The #brr slider above them is stock; only its typography is touched,
further down in the "STOCK REVIEWS + FAQ" block.)
===================================================================== */

.hp .rvs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
}
.hp .tcard {
	background: #fff; border: 1px solid rgba(0, 0, 0,0.08);
	border-radius: var(--r); padding: clamp(1.6rem, 2.6vw, 2.4rem);
	box-shadow: var(--sh1);
	display: flex; flex-direction: column; gap: 1rem;
	transition: transform 0.55s var(--e-out), box-shadow 0.55s var(--e-out);
	will-change: transform;
	position: relative;
}
.hp .tcard::before {
	content: ''; position: absolute; left: 0; top: clamp(1.6rem, 2.6vw, 2.4rem);
	width: 2px; height: 28px; background: var(--gold);
	transform: scaleY(0); transform-origin: top;
	transition: transform 0.5s var(--e);
}
.hp .tcard:hover { transform: translateY(-5px); box-shadow: var(--sh2); }
.hp .tcard:hover::before { transform: scaleY(1); }

.hp .tcard__top { display: flex; flex-direction: column; gap: 0.6rem; }
.hp .tcard h2 { font-size: 26px; }
.hp .tcard__stars { display: flex; gap: 2px; color: var(--star); }
.hp .tcard__stars svg { width: 15px; height: 15px; fill: currentColor; }
.hp .tcard__body { font-size: 16px; line-height: 1.5;  margin: 0; max-width: none; }
.hp .tcard__who {
	display: flex; align-items: center; gap: 0.7rem;
	margin-top: auto; padding-top: 0.9rem;
	border-top: 1px solid rgba(0, 0, 0,0.08);
}
.hp .tcard__av {
	flex: none; width: 34px; height: 34px; border-radius: 50%;
	background: #21523E; color:#fff;
	display: grid; place-items: center;
	font-family: var(--ui); font-size: 0.78rem; font-weight: 600;
}
.hp .tcard__name { display: block;font-family: var(--display); font-weight: 600; font-size: 0.86rem; color: #21523E; }
.hp .tcard__loc { display: block; font-family: var(--ui); font-size: 0.74rem; color: var(--muted); }
.hp .rvs__cta { margin-top: var(--s3); text-align: center; }

@media (hover: none) {
	.hp .tcard:hover { transform: none; }
	.hp .tcard::before { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
	.hp .tcard:hover { transform: none; }
	.hp .tcard::before { transform: scaleY(1); }
}

/* =====================================================================
CONTACT PAGE
Reuses .pgb/.crumb/.band/.shell/.d2-.d3/.em/.btn2 and the .frm/.fld form
styles defined in the Book Events block above.
===================================================================== */
.hp .con { background: var(--cream); }
.hp .con__intro { text-align: center; margin-bottom: var(--s4); }
.hp .con__intro .lead { margin-inline: auto; max-width: 60ch; }
.hp .con__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.hp .con__list { margin: 1rem 0 0; }
.hp .con__list li {
	padding: 0.7rem 0; border-bottom: 1px solid rgba(0, 0, 0,0.12);
	font-size: 1rem; color: var(--green-deep);
}
.hp .con__list a { color: var(--green-deep); transition: color 0.3s var(--e); }
.hp .con__list a:hover { color: var(--khaki); }
.hp .con__hours { margin-top: 0.9rem; }
.hp .con__hours .hrow { border-bottom-color: rgba(0, 0, 0,0.1); }
.hp .con__hours .hrow span { color: var(--green-deep); }
.hp .con__hours .hrow b { color: var(--green-deep); }

/* the form sits on cream here, not on the dark band it uses on book-events */
.hp .con__form {
	background: #fff; border: 1px solid rgba(0, 0, 0,0.1);
	border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--sh1);
}
.hp .con__form .fld label { color: var(--khaki-text); }
.hp .con__form .fld :where(input, select, textarea) {
	background: transparent; border:1px solid #000!important; color: var(--ink);
	border-color: rgba(0, 0, 0,0.16);
}
.hp .con__form .fld :where(input, textarea):focus {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(0, 0, 0,0.12);
}

/* ---------- map ---------- */
.hp .map { display: block; line-height: 0; background: var(--green-deep); }
.hp .map iframe {
	width: 100%;
	/* the stock embed is a fixed 600x450 box; full-bleed and responsive here */
	height: clamp(320px, 42vw, 520px);
	border: 0; display: block;
	/* the embed is a bright Google map dropped between two brand-coloured
	bands — a light touch of the brand keeps it from fighting the palette */
	filter: saturate(0.9) contrast(1.02);
}

@media (max-width: 900px) {
	.hp .con__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
HOOKAH PAGE
===================================================================== */

/* this banner carries a sub-head, lead and two CTAs, not just a title */
.hp .pgb--tall { min-height: min(78svh, 760px); }
.hp .pgb__sub { color: #fff!important; margin: 0.9rem 0 0; }
.hp .pgb__lead {
	color: #fff!important; max-width: 56ch;
	margin: 1rem 0 0; font-size: 18px;
}
.hp .pgb__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--s2); }

/* ---------- lounge ---------- */
.hp .lounge { background: var(--cream); }
.hp .lounge__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hp .lounge__list { margin: 0; }
.hp .lounge__list li {
	display: flex; align-items: baseline; gap: 0.85rem;
	padding: 0.95rem 0; border-bottom: 1px solid rgba(0, 0, 0,0.12);
	font-size: clamp(0.92rem, 1.05vw, 1.02rem); color: var(--green-deep);
}
.hp .lounge__list li::before {
	content: ''; flex: none; width: 14px; height: 1px;
	background: var(--khaki); transform: translateY(-4px);
}

/* ---------- patio hours ---------- */
.hp .phours { background: var(--green-deep); }
.hp .phours :where(h2, .d2) { color: var(--cream); }
.hp .phours__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hp .phours__media { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh3); }
.hp .phours__media img { width: 100%; aspect-ratio: 5/5; object-fit: cover; }
.hp .phours__rows { margin-top: var(--s2); }
.hp .phours .hrow { border-bottom-color: rgba(243,241,231,0.1); padding: 0.8rem 0; }
.hp .phours .hrow span { color: #fff; font-size: 1rem; }
.hp .phours .hrow b {     color: #fff; font-weight: 500; font-size: 1rem; }
.hp .phours__note {
	color:#fff!important; font-size: 1rem;
	margin: 0.9rem 0 0; max-width: 55ch;
}

/* ---------- food on patio ---------- */

.hp .pfood__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hp .pfood .kicker { color: var(--khaki); }
.hp .pfood__media { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh2); background: #fff; }
.hp .pfood__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
/* (This section used to re-colour its ghost button for the light background.
Removed: every button now uses the single header style, so a per-section
override would be exactly the inconsistency we were asked to remove.) */

@media (max-width: 900px) {
	.hp .lounge__grid, .hp .phours__grid, .hp .pfood__grid { grid-template-columns: 1fr; }
	.hp .phours__media, .hp .pfood__media { max-width: 480px; }
	/* the media sits first on mobile in both of these */
	.hp .pfood__media { order: -1; }
}
@media (max-width: 600px) {
	.hp .pgb--tall { min-height: 70svh; }
}

/* =====================================================================
PAKISTANI NASHTA PAGE
Reuses .pgb/.pgb--tall/.crumb/.lounge/.phours/.pfood/.fq from the Hookah
and Book Events blocks above. Only the menu rows and add-on chips are new.
===================================================================== */

/* ---------- nashta menu rows ---------- */
.hp .nmenu { background: var(--cream); }
.hp .nmenu__head { text-align: center; max-width: 760px; margin-inline: auto; }
.hp .nmenu__head .kicker { justify-content: center; }
.hp .nmenu__head .lead { margin-inline: auto; }
.hp .nmenu__list {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0;
	margin-top: var(--s4);
}
/* These four have no photography in the source — so they are set as a
proper menu listing (name · leader · price) rather than padded into
card shapes around an image that does not exist. */
.hp .nrow { padding: 1.5rem 0; border-bottom: 1px solid rgba(0, 0, 0,0.12); }
.hp .nrow__head { display: flex; align-items: baseline; gap: 0.7rem; }
.hp .nrow__name {
	flex: 0 1 auto; min-width: 0; margin: 0;
	font-size: clamp(1.2rem, 1.3vw, 1.5rem);
}
.hp .nrow__dots {
	flex: 1 1 auto; min-width: 1.5rem; align-self: center;
	border-bottom: 1px dotted var(--khaki); opacity: 0.65; transform: translateY(-2px);
}
.hp .nrow__price {
	flex: none; font-family: var(--ui); font-weight: 500;
	font-size: clamp(0.98rem, 1.1vw, 1.1rem); color: var(--green-deep);
}
.hp .nrow__desc { font-size: 1rem; line-height: 1.5; margin: 0.5rem 0 0; max-width: 52ch; }
.hp .nmenu__cta { margin-top: var(--s3); text-align: center; }

/* ---------- add-on chips ---------- */
.hp .addons { background: color-mix(in srgb, var(--khaki) 13%, var(--cream)); }
.hp .addons__grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.7rem, 1.2vw, 1rem); margin-top:30px;
}
.hp .chip2 {
	display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
	background: #fff; border: 1px solid rgba(0, 0, 0,0.1);
	border-radius: 999px; padding: 0.8rem 1.2rem;
	box-shadow: var(--sh1);
	transition: border-color 0.35s var(--e), transform 0.35s var(--e-out);
}
.hp .chip2:hover { border-color: rgba(201,164,92,0.6); transform: translateY(-2px); }
.hp .chip2__n {  font-size: 1.15rem; color: var(--green-deep); }
.hp .chip2__p {  font-size: 1rem; font-weight: 600; color: var(--khaki-text); flex: none; }
.hp .chip2--free .chip2__p { color: var(--green); }

@media (max-width: 900px) {
	.hp .nmenu__list { grid-template-columns: 1fr; }
	.hp .addons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.hp .addons__grid { grid-template-columns: 1fr; }
	.hp .nrow__dots { display: none; }
	.hp .nrow__head { justify-content: space-between; }
}
@media (hover: none) { .hp .chip2:hover { transform: none; } }

/* =====================================================================
SMASH BURGERS PAGE
===================================================================== */

.hp .bmenu { background: var(--cream); }
.hp .bmenu__grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem); margin-top: var(--s4);
	align-items: start;
}
.hp .bcard { display: flex; flex-direction: column; }
.hp .bcard__plate {
	position: relative; border-radius: var(--r); overflow: hidden;
	/* 1:1 — the burger renders are 956x826 / square; a wider frame would crop */
	aspect-ratio: 1/1;
	background: color-mix(in srgb, var(--khaki) 10%, var(--cream));
}
.hp .bcard__plate img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.9s var(--e-out); will-change: transform;
}
.hp .bcard:hover .bcard__plate img { transform: scale(1.06); }
.hp .bcard__plate::after {
	content: ''; position: absolute; inset: 0; border: 1px solid transparent;
	border-radius: var(--r); transition: border-color 0.5s var(--e); pointer-events: none;
}
.hp .bcard:hover .bcard__plate::after { border-color: rgba(201,164,92,0.55); }

.hp .bcard__body { padding-top: var(--s2); }
.hp .bcard__top { display: flex; align-items: baseline; gap: 0.6rem; }
.hp .bcard__name {
	flex: 0 1 auto; min-width: 0; margin: 0;
	font-size: 24px;
}
.hp .bcard__dots {
	flex: 1 1 auto; min-width: 1rem; align-self: center;
	border-bottom: 1px dotted var(--khaki); opacity: 0.65; transform: translateY(-2px);
}
.hp .bcard__price {
	flex: none; font-family: var(--ui); font-weight: 500;
	font-size: 0.98rem; color: var(--green-deep);
	transition: color 0.35s var(--e);
}
.hp .bcard:hover .bcard__price { color: var(--khaki); }
.hp .bcard__desc { font-size: 1rem; line-height: 1.5; margin: 0.45rem 0 0; }

/* ---------- pairings ---------- */
.hp .pairs { background: var(--green-deep); }
.hp .pairs :where(h2, .d2) { color: var(--cream); }
.hp .pairs .lead { color: rgba(243,241,231,0.82); }
.hp .pairs .kicker { color: var(--star); }
.hp .pairs__grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: var(--s4);
}
.hp .pair {
	border: 1px solid rgba(201,164,92,0.28); border-radius: var(--r);
	padding: clamp(1.3rem, 2vw, 1.8rem);
	background: rgba(243,241,231,0.03);
	transition: border-color 0.5s var(--e), transform 0.5s var(--e-out);
}
.hp .pair:hover { border-color: rgba(201,164,92,0.7); transform: translateY(-4px); }
.hp .pair h3 { color: var(--cream); font-size: clamp(1rem, 1.15vw, 1.12rem); margin-bottom: 0.5rem; }
.hp .pair p { color: rgba(243,241,231,0.78); font-size: 0.85rem; line-height: 1.6; margin: 0; }

@media (max-width: 1000px) {
	.hp .bmenu__grid, .hp .pairs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.hp .bmenu__grid, .hp .pairs__grid { grid-template-columns: 1fr; }
	.hp .bcard__dots { display: none; }
	.hp .bcard__top { justify-content: space-between; }
}
@media (hover: none) {
	.hp .bcard:hover .bcard__plate img, .hp .pair:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hp .pair:hover { transform: none; }
}

/* =====================================================================
8b. FOLLOW US — image strip
===================================================================== */
.hp .follow { background: color-mix(in srgb, var(--khaki) 13%, var(--cream)); text-align: center; }
.hp .follow .d2 { margin-inline: auto; }
.hp .follow .em { transition: color 0.35s var(--e); }
.hp .follow .em:hover { color: var(--khaki); }
.hp .follow__strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(0.6rem, 1.2vw, 1rem);
	margin-top: var(--s4);
}
.hp .follow__strip figure {
	margin: 0; overflow: hidden; border-radius: var(--r-sm);
	aspect-ratio: 1/1; background: var(--cream);
}
.hp .follow__strip img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.9s var(--e-out), filter 0.5s var(--e);
	will-change: transform;
}
.hp .follow__strip figure:hover img { transform: scale(1.07); }
@media (max-width: 700px) {
	/* 5-up would put each tile under ~60px wide on a phone */
	.hp .follow__strip { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
9. STOCK REVIEWS (#brr) + FAQ (#faq) — TYPOGRAPHY ONLY
===================================================================== */

/* Matches the .d2 step of the .hp ramp above — same family, same numbers. */
#brr .brr__title,
#faq .faq__title {

	font-size: clamp(2rem, 3.6vw, 3rem) !important;

	text-transform: none;
	text-wrap: balance;
}
/* the theme puts these spans in `kinescope`; the accent is now carried by
the italic cut. Colour is left to the theme's own .text-khaki — fonts only. */




/* --- the two places the redesign runs text at quote/question size --- */

#faq .acc__q {

	font-size: clamp(1rem, 1.35vw, 1.5rem) !important;
}

/* the decorative opening quote is Georgia in the theme — bring it into the
family so it matches the quotes it sits above */
#brr .brr__qmark {

	font-style: italic;
}

/* =====================================================================
REDUCED MOTION
===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hp *, .hp *::before, .hp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.hp .rv { opacity: 1 !important; transform: none !important; }
	.hp .hero__cue { display: none; }
	/* focus ring is navigation, not decoration — it must survive */
	.hp :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
}


/* #####################################################################
PART 3 — NOT-YET-REBUILT PAGES
##################################################################### */
:root {
	--rd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--rd-s1: clamp(0.75rem, 1.4vw, 1.1rem);
	--rd-s2: clamp(1.5rem, 3vw, 2.4rem);
	--rd-s3: clamp(3rem, 6vw, 5rem);
	--rd-s4: clamp(5rem, 11vw, 9rem);

	--rd-r: 18px;   /* the theme is hard-cornered; rounding is a big part of the reset */
	--rd-r-sm: 10px;

	/* elevation tinted green — a neutral grey shadow over cream reads dirty */
	--rd-sh-1: 0 2px 12px -6px rgba(0, 0, 0, 0.22);
	--rd-sh-2: 0 26px 55px -30px rgba(0, 0, 0, 0.45);
	--rd-sh-3: 0 44px 90px -40px rgba(0, 0, 0, 0.55);

	--rd-display: "Jost", sans-serif;
	--rd-ui: "Jost", sans-serif;
}

/* =====================================================================
1. TYPOGRAPHY — the single biggest visual change
===================================================================== */


/* the theme's 120px abolition h1 → a controlled fluid serif */
section .main-title-h1 {
	font-size: clamp(2.6rem, 6.4vw, 5.4rem) !important;
	line-height: 0.98;
	letter-spacing: -0.035em;
}

section .main-title {
	font-size: clamp(2rem, 4.4vw, 3rem) !important;
	line-height: 1.04;
}

/* the theme sets .main-title span in `kinescope`; make it the accent —
italic, gold, and the one place WONK is allowed */


/* micro-label: tracked uppercase Jost. This + the serif is the whole system. */
section .sub-title {
	font-family: var(--rd-ui) !important;
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.42em !important;
	line-height: 1.6 !important;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}
section .sub-title::before {
	content: '';
	width: 30px;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
	flex: none;
}

section p, section li {
	font-family: var(--rd-ui);
	line-height: 1.5;
	text-wrap: pretty;
}


/* =====================================================================
2. RHYTHM — air. The theme packs sections tight with bootstrap utils.
===================================================================== */
section.about-sec, section.menu-sec, section.press-sec, section.review-sec,
section.faq-sec, section.hours-sec, section.experience-sec,
section.delivery-sec, section.culture-img-sec, section.about-bottom {
	padding-block: var(--rd-s4) !important;
}
/* .item-sec (social feed) and .banner-sec (hero) keep their own padding —
the hero is full-height and the feed is a flush edge-to-edge strip. */

/* =====================================================================
3. SURFACES
===================================================================== */


/* green sections go deep + immersive rather than flat mid-green */
.bg-green {
	background-color: var(--green-deep) !important;
	background-image: radial-gradient(
		120% 90% at 50% 0%,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0) 70%
	);
	color: var(--cream);
}
.bg-green :where(h1, h2, h3, h4, .main-title, .main-title-h1) { color: var(--cream) !important; }
.bg-green :where(p, li) { color: rgba(243, 241, 231, 0.84) !important; }
.bg-green .sub-title { color: var(--star) !important; }

/* hairline seam between bands instead of a hard edge */

.bg-green + .bg-green, .bg-khaki + .bg-khaki { border-top: none; }

/* =====================================================================
4. PAGE BANNER (.pgbanner — 8 of 9 pages)
===================================================================== */
.pgbanner { overflow: hidden; }
.pgbanner__bg { transform: scale(1.08); will-change: transform; }
.pgbanner__ov {
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0.32) 0%,
		rgba(0, 0, 0, 0.66) 52%,
		rgba(0, 0, 0, 0.9) 100%) !important;
}
.pgbanner__inner { position: relative; z-index: 2; }
.pgbanner__kicker {
	font-family: var(--rd-ui) !important;
	letter-spacing: 0.42em !important;
	text-transform: uppercase;
	/* --star not --gold: gold on this scrim measures under 4.5:1 */
	color: var(--star) !important;
}
.pgbanner__rule { background: var(--gold) !important; }
.pgbanner :where(h1, h2, .main-title, .main-title-h1) { color: var(--cream) !important; }
.pgbanner p { color: rgba(243, 241, 231, 0.82) !important; }

/* =====================================================================
5. MENU CARDS (.item — 46 across the site)
Structure (verified):
.item > div[broken class] > img
> .cbp-item-wrapper > h3 + p + .menu-btm > .menu-item-tag > a.tras-btn

The image wrapper has NO usable class: a PHP warning renders into its
class attribute on the live site ("Undefined array key 0 in …index.php
on line 376"), so it is targeted structurally via .item > div:first-child.
===================================================================== */
section .item {
	position: relative;
	height: 100%;
	padding: 0 0 var(--rd-s1);
	border-radius: var(--rd-r);
	background: transparent;
	transition: transform 0.6s var(--rd-ease-out);
	will-change: transform;
}

/* image frame — the wrapper div, addressed structurally */
section .item > div:first-child {
	position: relative;
	overflow: hidden;
	border-radius: var(--rd-r);
	background: color-mix(in srgb, var(--khaki) 10%, var(--cream));
	/* 1:1 because the source art IS square — measured: the menu shots are
	1200x1200, and the smash renders 956x826 (1.16:1). A 4:3 frame would
	crop ~13% off the top and bottom of every dish. Square crops nothing. */
	aspect-ratio: 1 / 1;
	display: block;
}
section .item > div:first-child img {
	/* the grey box is set INLINE on the img, so this needs !important */
	border: 0 !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--rd-r);
	transition: transform 1s var(--rd-ease-out);
	will-change: transform;
}
section .item:hover > div:first-child img { transform: scale(1.07); }
section .item:hover { transform: translateY(-6px); }

/* gold ring on hover — no layout shift */
section .item > div:first-child::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	border-radius: var(--rd-r);
	transition: border-color 0.55s var(--rd-ease);
	pointer-events: none;
}
section .item:hover > div:first-child::after { border-color: rgba(201, 164, 92, 0.55); }

section .item .cbp-item-wrapper { padding: var(--rd-s2) var(--rd-s1) 0 !important; }

section .item h3 {
	font-size: clamp(1.15rem, 1.5vw, 1.45rem) !important;
	letter-spacing: -0.012em;
	margin-bottom: 0.45rem;
}
section .item p {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--muted);
	max-width: 46ch;
}

/* price chip — from bordered button to a solid gold pill */
section .item .tras-btn,
section .menu-item-tag .tras-btn {
	border: 0 !important;
	background: var(--gold) !important;
	color: var(--green-deep) !important;   /* 5.29:1 — measured */
	border-radius: 999px !important;
	padding: 0.5rem 1.1rem !important;
	font-family: var(--rd-ui) !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.04em;
	box-shadow: var(--rd-sh-1);
	transition: background-color 0.35s var(--rd-ease), transform 0.35s var(--rd-ease-out);
}
section .item:hover .tras-btn { background: var(--star) !important; transform: translateY(-1px); }

section .menu-item-tag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-s1);
}
section .menu-btm { margin-top: auto; }

/* =====================================================================
6. BUTTONS
===================================================================== */
section :where(.btn-rounded, .header-btn, .banner-btn) {
	border-radius: 999px !important;
	font-family: var(--rd-ui) !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.74rem !important;
	padding: 1rem 2rem !important;
	transition: transform 0.4s var(--rd-ease-out), box-shadow 0.4s var(--rd-ease-out),
		background-color 0.35s var(--rd-ease);
	will-change: transform;
}
/* scale is tiny on purpose — a big pop on a premium CTA reads cheap */
section :where(.btn-rounded, .header-btn, .banner-btn):hover {
	transform: translateY(-2px);
	box-shadow: var(--rd-sh-2);
}
section :where(.btn-rounded, .header-btn, .banner-btn):active { transform: translateY(-1px) scale(0.985); }


/* =====================================================================
7. REVIEW CARDS (.brr__card)
===================================================================== */
.brr__card {
	border-radius: var(--rd-r) !important;
	background: var(--card);
	box-shadow: var(--rd-sh-1);
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition: transform 0.55s var(--rd-ease-out), box-shadow 0.55s var(--rd-ease-out);
}
.brr__card:hover { transform: translateY(-4px); box-shadow: var(--rd-sh-2); }
.brr__quote {
	font-family: var(--rd-display) !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
	color: var(--ink);
}
.brr__name { font-family: var(--rd-ui); font-weight: 600; letter-spacing: 0.02em; }
.brr__role, .brr__source { font-family: var(--rd-ui); color: var(--muted); font-size: 0.78rem; }
.brr__stars { color: var(--star); }
.brr__qmark {
	font-family: var(--rd-display) !important;
	color: rgba(201, 164, 92, 0.28) !important;
	font-style: italic;
}

.faq__layout .acc__q{
	font-family: "Figtree", sans-serif!important;
}

/* =====================================================================
8. FAQ / ACCORDION (.faq2-*, .acc__*)
===================================================================== */
.faq2-item, .acc__item {
	border-radius: var(--rd-r-sm) !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
	background: transparent !important;
	transition: background-color 0.4s var(--rd-ease);
}
.faq2-item:hover, .acc__item:hover { background: rgba(201, 164, 92, 0.05) !important; }
.faq2-btn, .acc__q {
	font-family: var(--rd-display) !important;
	font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
	font-weight: 600 !important;
	letter-spacing: -0.008em;
	color: var(--green-deep) !important;
}
.faq2-num { font-family: var(--rd-ui) !important; color: var(--khaki-text) !important; letter-spacing: 0.2em; }
.faq2-a, .acc__a, .acc__bodyinner { font-family: var(--rd-ui); color: var(--ink); }
.faq2-line { background: rgba(0, 0, 0, 0.12) !important; }

/* =====================================================================
9. DELIVERY LOGOS (.logo-item) — quiet until hovered
===================================================================== */


/* =====================================================================
10. GALLERY (cubeportfolio)
===================================================================== */
.cbp-item { border-radius: var(--rd-r); overflow: hidden; }
.cbp-item img { transition: transform 1s var(--rd-ease-out); will-change: transform; }
.cbp-item:hover img { transform: scale(1.07); }
.cbp-caption-activeWrap { background: rgba(0, 0, 0, 0.74) !important; }

/* =====================================================================
11. FORMS
===================================================================== */
section :where(input, select, textarea) {
	border-radius: var(--rd-r-sm) !important;
	border: 1px solid rgba(0, 0, 0, 0.16) !important;
	font-family: var(--rd-ui);
	padding: 0.85rem 1rem;
	transition: border-color 0.35s var(--rd-ease), box-shadow 0.35s var(--rd-ease);
}
section :where(input, select, textarea):focus {
	border-color: var(--green) !important;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
	outline: none;
}

/* =====================================================================
12. KEYBOARD FOCUS
The theme ships no focus styles at all. Ring defaults to GREEN because
the site is predominantly light: star on cream measures 1.71:1 — an
invisible focus ring is worse than none. Dark surfaces flip to star.
===================================================================== */
section :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.cbp-item:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
	border-radius: 3px;
}
.bg-green :where(a, button, [tabindex]):focus-visible,
.pgbanner :where(a, button, [tabindex]):focus-visible { outline-color: var(--star); }

/* =====================================================================
12b. LAYOUT — the actual structural redesign
---------------------------------------------------------------------
Everything above is skin. The LAYOUT lives in the Bootstrap grid in the
markup (.row + .col-lg-*), so this section overrides that grid.

Bootstrap cols are `flex: 0 0 N%; max-width: N%`. To re-lay-out a row we
flip the .row to CSS Grid and neutralise the col widths, letting grid
place the children instead.

SCOPED DELIBERATELY: there are 141 .row containers site-wide. A blanket
`.row { display: grid }` would detonate the whole site, including the
header/footer we are told not to touch. Every rule below names its
section.
===================================================================== */

/* shared: neutralise Bootstrap column sizing inside re-gridded rows.
NOTE: .item-sec is deliberately absent. Despite the name it is NOT the
menu — it is the social/Instagram feed at the foot of the page
(home.html lines 4171-4207, containing .item-list.owl-carousel). Gridding
it would break the Owl carousel. The menu is .menu-sec (lines 1820-3436). */
.menu-sec .row.w-100 > [class*='col-'],
.about-sec .row:has(.about-area) > [class*='col-'],
.experience-sec .row > [class*='col-'],
.press-sec .row > [class*='col-'] {
	flex: none !important;
	max-width: none !important;
	width: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---------------------------------------------------------------------
MENU — from a rigid 4-up col-lg-3 grid to a fluid auto-fit grid.
Also fixes a real bug: the cards are col-md-12, so between 768px and
991px the menu currently renders ONE card per row. auto-fit removes it.

Targets `.row.w-100` specifically: that is the class the 14 menu-category
card rows carry. The section's other rows (its title rows at 1822/1835)
must keep their normal flow, so a blanket `.menu-sec .row` is wrong.
--------------------------------------------------------------------- */
.menu-sec .row.w-100 {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 22vw, 280px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin: 0 !important;
	width: 100% !important;
	align-items: start;
}

/* editorial stagger — every 2nd card drops, breaking the flat tabular line
that makes a card grid look like a spreadsheet. Off below lg, where a
vertical offset just looks like a mistake. */
@media (min-width: 992px) {
	.menu-sec .row.w-100 > [class*='col-']:nth-child(even) { transform: translateY(clamp(1.5rem, 3vw, 3rem)); }
}

/* ---------------------------------------------------------------------
ABOUT / STORY — break the symmetric 50/50.
Asymmetric 7:5 with the text column sticky, so the image scrolls against
held copy. This is the single biggest departure from the stock template.
--------------------------------------------------------------------- */
@media (min-width: 992px) {
	/* Scoped with :has(.about-area) — ONLY the two-column story rows.
	.about-sec also contains 4-up card rows (e.g. "Why Burns Road" =
	4x col-lg-3.col-md-6); a blanket `.about-sec .row` would fold those
	four cards into a 2-col grid. Verified: exactly one .about-area per
	.about-sec on every page (counts match 1:1). */
	.about-sec .row:has(.about-area) {
		display: grid !important;
		grid-template-columns: 1.35fr 1fr;
		gap: clamp(2.5rem, 6vw, 6rem);
		align-items: center;
		margin: 0 !important;
	}
	/* the theme uses order-lg-1 / order-lg-2 to alternate image/text sides —
	honour it so alternating sections keep alternating */
	.about-sec .row:has(.about-area) > .order-lg-1 { order: 1; }
	.about-sec .row:has(.about-area) > .order-lg-2 { order: 2; }

	/* text holds while the image scrolls past it */
	.about-sec .about-area { position: sticky; top: 96px; }

	.about-sec .row:has(.about-area) img { width: 100%; border-radius: var(--rd-r); }
}

/* :has() is unsupported on Safari <15.4 / Firefox <121. There the rows just
keep Bootstrap's 50/50 — degraded, not broken. */

/* ---------------------------------------------------------------------
PRESS / EXPERIENCE / DELIVERY — even auto-fit rows instead of fixed cols
--------------------------------------------------------------------- */
@media (min-width: 768px) {
	.press-sec .row,
	.experience-sec .row {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: clamp(1.5rem, 3vw, 2.5rem);
		margin: 0 !important;
		align-items: stretch;
	}

}

/* ---------------------------------------------------------------------
FULL-BLEED — let the green + image bands run edge to edge.
Sections inside a fixed container read as a brochure; full-bleed bands
are what give a modern page its rhythm.
--------------------------------------------------------------------- */
.culture-img-sec,
.culture-img-sec .row,
.culture-img-sec [class*='col-'] { padding-left: 0 !important; padding-right: 0 !important; }
.culture-img-sec img { width: 100%; border-radius: 0 !important; }

/* =====================================================================
13. SCROLL REVEAL
Paired with js/redesign.js. `.rd-reveal` is applied BY JS only, never in
markup — if GSAP fails, nothing is ever left hidden.
===================================================================== */
.rd-reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }

/* =====================================================================
14. RESPONSIVE
===================================================================== */
@media (max-width: 991px) {
	section.about-sec, section.menu-sec, section.press-sec, section.review-sec,
	section.faq-sec, section.hours-sec, section.experience-sec,
	section.delivery-sec, section.culture-img-sec, section.about-bottom {
		padding-block: var(--rd-s3) !important;
	}
	section p { max-width: none; }
}
@media (max-width: 575px) {
	.hp .chip2__n{
		justify-content: space-between!important;
		width: 100%!important;
	}
}
/* no hover on touch — don't strand cards mid-transform */
@media (hover: none) {
	section .item:hover { transform: none; }
	section .item:hover > div:first-child img,
	.cbp-item:hover img { transform: none; }
	.logo-item img { filter: none; opacity: 1; }
}

/* =====================================================================
15. REDUCED MOTION
===================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.rd-reveal { opacity: 1 !important; transform: none !important; }
	.pgbanner__bg { transform: none; }
	section .item:hover, .brr__card:hover { transform: none; }
	/* the focus ring is navigation, not decoration — it must survive */
	section :where(a, button, input, select, textarea, [tabindex]):focus-visible {
		outline: 2px solid var(--green);
		outline-offset: 3px;
	}
}


/* =====================================================================
BLOG PAGE  (appended — nothing above this line is modified)
Reuses the shared system: .band/.shell/.pgb/.crumb/.kicker/.em/.d1-.d3.
Because it reuses .em and the shared tokens, any tuning done to those
(e.g. the accent colour) flows through here automatically.
===================================================================== */
.hp .blog2 { background: var(--cream); }
.hp .blog2__intro { text-align: center; max-width: 760px; margin: 0 auto var(--s4); }
.hp .blog2__intro .kicker { justify-content: center; }
.hp .blog2__intro .lead { margin-inline: auto; }

/* ---------- shared "Read Article" link ---------- */
.hp .more {
	display: inline-flex; align-items: center; gap: 0.45rem;
	font-family: "Figtree", sans-serif;; font-size: 1rem; font-weight: 600;
	color: var(--green-deep); margin-top: auto; padding-top: 1rem;
	position: relative;
}
.hp .more span { position: relative; padding-bottom: 2px; }
.hp .more span::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform 0.45s var(--e);
}
.hp .more svg { width: 13px; height: 13px; fill: currentColor; transition: transform 0.45s var(--e-out); }
.hp .more:hover span::after { transform: scaleX(1); }
.hp .more:hover svg { transform: translateX(4px); }

/* ---------- lead article ---------- */
.hp .feat-post {
	display: grid; grid-template-columns: 1.1fr 1fr;
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: center;
	background: #fff;
	border: 1px solid rgba(0, 0, 0,0.08);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--sh1);
	transition: box-shadow 0.5s var(--e-out);
}
.hp .feat-post:hover { box-shadow: var(--sh2); }
.hp .feat-post__media { display: block; overflow: hidden; aspect-ratio: 4/3; background: color-mix(in srgb, var(--khaki) 10%, var(--cream)); }
.hp .feat-post__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.9s var(--e-out); will-change: transform;
}
.hp .feat-post:hover .feat-post__media img { transform: scale(1.05); }
.hp .feat-post__body { padding: clamp(1.4rem, 2.6vw, 2.4rem) clamp(1.4rem, 2.6vw, 2.4rem) clamp(1.4rem, 2.6vw, 2.4rem) 0; display: flex; flex-direction: column; }
.hp .feat-post__meta,
.hp .post2__meta {
	font-size: 0.85rem; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase; color: var(--khaki-text);
	margin-bottom: 0.7rem;
}
.hp .feat-post__title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.024em; margin: 0 0 0.7rem; }
.hp .feat-post__title a,
.hp .post2__title a { transition: color 0.3s var(--e); }
.hp .feat-post__title a:hover,
.hp .post2__title a:hover { color: var(--khaki); }
.hp .feat-post__excerpt { line-height: 1.5;  margin: 0; max-width: 52ch; }

/* ---------- post grid ---------- */
.hp .posts2 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.hp .post2 {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0, 0, 0,0.08);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--sh1);
	transition: transform 0.5s var(--e-out), box-shadow 0.5s var(--e-out);
	will-change: transform;
}
.hp .post2:hover { transform: translateY(-5px); }
.hp .post2__media { display: block; overflow: hidden; aspect-ratio: 3/2; background: color-mix(in srgb, var(--khaki) 10%, var(--cream)); }
.hp .post2__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.9s var(--e-out); will-change: transform;
}
.hp .post2:hover .post2__media img { transform: scale(1.06); }
.hp .post2__body { padding: clamp(1.2rem, 2vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.hp .post2__title { font-size: clamp(1.5rem, 1.25vw, 1.5rem); margin: 0 0 0.5rem; letter-spacing: -0.012em; }
.hp .post2__excerpt { font-size: 16px; line-height: 1.65;  margin: 0; }

@media (max-width: 1000px) {
	.hp .posts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.hp .feat-post { grid-template-columns: 1fr; }
	.hp .feat-post__media { aspect-ratio: 16/9; }
	.hp .feat-post__body { padding: 0 clamp(1.2rem, 4vw, 1.8rem) clamp(1.4rem, 4vw, 1.8rem); }
}
@media (max-width: 620px) {
	.hp .posts2 { grid-template-columns: 1fr; }
}
@media (hover: none) {
	.hp .post2:hover { transform: none; }
	.hp .post2:hover .post2__media img,
	.hp .feat-post:hover .feat-post__media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hp .post2:hover { transform: none; }
}


/* =====================================================================
BLOG POST (single)  — appended; nothing above this line is modified
Reuses .band/.shell/.pgb/.crumb/.em/.d1-.d3 and the .follow strip.
===================================================================== */
.hp .single { background: var(--cream); }
.hp .single__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}

/* long titles must not run at hero scale */
.hp .post__h1 { font-size: clamp(1.9rem, 4vw, 3.2rem); max-width: 18ch; }

/* ---------- article ---------- */
.hp .prose { max-width: 68ch; }
.hp .prose__lead {
	font-family: var(--display);
	font-size: clamp(1.15rem, 1.6vw, 1.42rem);
	line-height: 1.6; color: var(--green-deep);
	margin: 0 0 var(--s3);
	padding-left: 1.1rem;
	border-left: 2px solid var(--khaki);
	max-width: none;
}
.hp .prose h2 {
	margin: var(--s3) 0 0.7rem;
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	letter-spacing: -0.018em;
}
.hp .prose h2:first-of-type { margin-top: 0; }
.hp .prose p {
	font-size: 1rem; line-height: 1.8; color: #5b6659;
	margin: 0 0 1.1rem; max-width: none;
}
/* the closing line reads as a sign-off, not another body paragraph */
.hp .prose p:last-child {
	margin-top: var(--s2);
	padding-top: var(--s2);
	border-top: 1px solid rgba(0, 0, 0,0.12);
	font-family: var(--display);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--green-deep);
}

/* ---------- sidebar ---------- */
.hp .side { position: sticky; top: 96px; }
.hp .side__box {
	background: #fff; border: 1px solid rgba(0, 0, 0,0.08);
	border-radius: var(--r); padding: clamp(1.3rem, 2vw, 1.7rem);
	box-shadow: var(--sh1);
}
.hp .side__h {
	font-size: 1.1rem; margin: 0 0 1.1rem; padding-bottom: 0.8rem;
	border-bottom: 1px solid rgba(0, 0, 0,0.12);
}
.hp .side__list { margin: 0; }
.hp .rp {
	display: grid; grid-template-columns: 64px minmax(0, 1fr);
	gap: 0.9rem; align-items: center;
	padding: 0.85rem 0; border-bottom: 1px solid rgba(0, 0, 0,0.08);
}
.hp .rp:last-child { border-bottom: 0; padding-bottom: 0; }
.hp .rp:first-child { padding-top: 0; }
.hp .rp__media {
	display: block; width: 64px; height: 64px; border-radius: var(--r-sm);
	overflow: hidden; background: color-mix(in srgb, var(--khaki) 10%, var(--cream));
}
.hp .rp__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.6s var(--e-out); will-change: transform;
}
.hp .rp:hover .rp__media img { transform: scale(1.08); }
.hp .rp__title {
	display: block; font-family: var(--display); font-weight: 600;
	font-size: 0.9rem; line-height: 1.4; color: var(--green-deep);
	letter-spacing: -0.008em;
	transition: color 0.3s var(--e);
}
.hp .rp:hover .rp__title { color: var(--khaki); }
.hp .rp__date {
	display: block; margin-top: 0.25rem;
	font-family: var(--ui); font-size: 0.7rem; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

@media (max-width: 900px) {
	.hp .single__grid { grid-template-columns: 1fr; }
	.hp .side { position: static; }
	.hp .side__box { max-width: 520px; }
}
@media (hover: none) {
	.hp .rp:hover .rp__media img { transform: none; }
}

/* ===== Theme tokens ===== */

.xps *, .xps *::before, .xps *::after { box-sizing: border-box; }

/* ===== Shell + heading ===== */
.xps__shell { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }

.xps__head { text-align: center; }
.xps__eyebrow {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--khaki-text);
}
.xps__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--green-deep);
	font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}
.xps .em { font-style: italic; font-weight: 500; color: var(--khaki); }

/* ===== Cards ===== */
.xps__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.7vw, 1.7rem);
	margin-top: var(--s4);
	counter-reset: xp;
}

.xp {
	counter-increment: xp;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 2.5vw, 2.5rem);
	border-radius: var(--r);
	background: linear-gradient(180deg, #ffffff 0%,
		color-mix(in srgb, var(--cream) 60%, #fff) 100%);
	border: 1px solid var(--line);
	box-shadow: var(--sh1);
	transition:
		transform 0.6s var(--e-out),
		box-shadow 0.6s var(--e-out),
		border-color 0.6s var(--e-out),
		background 0.6s var(--e-out);
	will-change: transform;
}

.xp__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	color: var(--gold);
	background: linear-gradient(160deg, rgba(201, 164, 92, .18), rgba(201, 164, 92, .05));
	border: 1px solid rgba(201, 164, 92, .3);
	transition: color .45s var(--e), background .45s var(--e), transform .55s var(--e-out);
}
.xp__icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #765E35;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.xp:hover .xp__icon svg{
	    stroke:#fff;
}

.xp__meta {
	margin-top: auto;
	display: flex;
	    justify-content: center;
	align-items: center;
	gap: .55rem;
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #765E35;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
}


.xp__top {
	margin-bottom: 1.4rem;
}

.xp:hover .xp__icon {
	color: #fff;
	background: linear-gradient(160deg, var(--gold), #b98f45);
	transform: scale(1.05);
}

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

	.xps--lux .xp__icon,
	{ transition: none; }
	{ transform: none; }
}

/* faint editorial index numeral (01–04), decorative */
.xp::after {
	content: counter(xp, decimal-leading-zero);
	position: absolute;
	top: clamp(0.9rem, 1.8vw, 1.4rem);
	right: clamp(1rem, 1.9vw, 1rem);
	z-index: 0;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(2.3rem, 3.4vw, 3.2rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--khaki);
	opacity: 0.13;
	pointer-events: none;
	transition: opacity 0.6s var(--e-out), color 0.6s var(--e-out), transform 0.6s var(--e-out);
}

/* gold accent rule on the top edge */
.xp::before {
	content: '';
	position: absolute;
	left: clamp(1.75rem, 2.5vw, 2.5rem);
	top: 0;
	z-index: 2;
	width: 46px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background:#000;
	transform: scaleX(0.5);
	transform-origin: left;
	transition: transform 0.55s var(--e);
}

.xp__title {
	position: relative;
	z-index: 1;
	margin: 0 0 0.85rem;
	padding-right: 2.4rem;
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--green-deep);
	font-size: clamp(1.15rem, 1.4vw, 1.55rem);
}
.xp p {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(0.98rem, 1.05vw, 1.07rem);
	line-height: 1.72;
	color: #5c6455;
}

/* hover */
.xp:hover {
	transform: translateY(-8px);

	background: linear-gradient(180deg, #ffffff 0%,
		color-mix(in srgb, var(--beige) 32%, #fff) 100%);
}
.xp:hover::before { transform: scaleX(1); }
.xp:hover::after  { opacity: 0.24; transform: translateY(-2px); }

/* ===== CTAs ===== */
.xps__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: var(--s4);
	justify-content: center;
}
.btn2 {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ui);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	padding: 12px 30px;
	border-radius: 50px;
	background: var(--beige);
	color: var(--green);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.45s var(--e), color 0.45s var(--e), transform 0.45s var(--e);
}
.btn2 svg { fill: var(--green); transition: fill 0.45s var(--e), transform 0.45s var(--e); }
.btn2:hover { background: var(--green-deep); color: #fff; }
.btn2:hover svg { fill: #fff; transform: translateX(3px); }
.btn2:active { transform: translateY(-1px) scale(0.986); }

/* ===== Reveal (JS toggles .is-in) ===== */
.xps [data-rv],
.xps [data-rv-group] > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.85s var(--e-out), transform 0.85s var(--e-out);
	will-change: opacity, transform;
}
.xps [data-rv].is-in,
.xps [data-rv-group].is-in > * { opacity: 1; transform: none; }
/* stagger the grid children */
.xps [data-rv-group].is-in > *:nth-child(1) { transition-delay: 0s; }
.xps [data-rv-group].is-in > *:nth-child(2) { transition-delay: 0.08s; }
.xps [data-rv-group].is-in > *:nth-child(3) { transition-delay: 0.16s; }
.xps [data-rv-group].is-in > *:nth-child(4) { transition-delay: 0.24s; }

/* ===== Responsive ===== */
@media (max-width: 1000px) { .xps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .xps__grid { grid-template-columns: 1fr; } }

@media (hover: none) {
	.xp:hover { transform: none; }
	.xp::before { transform: scaleX(1); }
	.xp::after  { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
	.xp:hover { transform: none; }
	.xp::before { transform: scaleX(1); }
	.xps [data-rv], .xps [data-rv-group] > * { opacity: 1; transform: none; transition: none; }
}


.hp .chip2 {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
	padding: 0.85rem 1.3rem;
	border-radius: 999px;
	background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--cream) 55%, #fff) 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: var(--sh1);
	overflow: hidden;
	isolation: isolate;
	transition: border-color 0.4s var(--e), transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
/* soft gold wash that fades in on hover */
.hp .chip2::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(201, 164, 92, 0.12), rgba(201, 164, 92, 0.03));
	opacity: 0; transition: opacity 0.45s var(--e);
}
.hp .chip2:hover { border-color: rgba(201, 164, 92, 0.6); transform: translateY(-3px); box-shadow: var(--sh2); }
.hp .chip2:hover::before { opacity: 1; }

.hp .chip2:not(:has(.chip2__p)) { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
	.hp .chip2, .hp .chip2::before, .hp .chip2__n::before { transition: none !important; }
	.hp .chip2:hover { transform: none; }

}

.hp .chip2__n {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--ui);
	font-size: clamp(1rem, 1.1vw, 1.12rem);
	font-weight: 500; line-height: 1.2;
	color: var(--green-deep);
}
.hp .chip2__n::before {
	content: '+';
	flex: none;
	display: grid; place-items: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: rgba(201, 164, 92, 0.14);
	border: 1px solid rgba(201, 164, 92, 0.4);
	color: var(--khaki-text);
	font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1;
	transition: background-color 0.4s var(--e), color 0.4s var(--e), border-color 0.4s var(--e), transform 0.5s var(--e-out);
}
.hp .chip2:hover .chip2__n::before {
	background: var(--gold); border-color: var(--gold); color: #fff; transform: scale(1.06);
}

.hp .chip2--free .chip2__n::before {
	background: rgba(33, 82, 62, 0.10); border-color: rgba(33, 82, 62, 0.3); color: var(--green);
}
.hp .chip2--free:hover .chip2__n::before { background: var(--green); border-color: var(--green); color: #fff; }



/* ---------- reviews marquee: two rows, opposite directions (NEW) ---------- */
.hp .rmq { position: relative; overflow: hidden; }
.hp .rmq__head { text-align: center; }
.hp .rmq__head .kicker { justify-content: center; }
.hp .rmq__head .lead { margin-inline: auto; max-width: 60ch; }

.hp .rmq__rows {
	margin-top: var(--s4);
	display: flex; flex-direction: column;
	gap: clamp(1rem, 1.6vw, 1.5rem);
}
.hp .rmq__row {
	position: relative;
	padding-block: clamp(0.6rem, 1.2vw, 1rem);   /* room for the card shadow */
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.hp .rmq__track {
	display: flex; align-items: stretch;
	width: max-content; will-change: transform;
}
/* the gap is baked into each card so translateX(-50%) wraps seamlessly */
.hp .rmq__track .tcard {
	flex: none;
	width: clamp(290px, 78vw, 360px);
	margin-right: clamp(1rem, 1.6vw, 1.5rem);
}
.hp .rmq__row--ltr { --rmq-dur: 48s; }   /* top row  → scrolls left to right */
.hp .rmq__row--rtl { --rmq-dur: 40s; }   /* bottom row → scrolls right to left */
.hp .rmq__row--ltr .rmq__track { animation: rmqRight var(--rmq-dur) linear infinite; }
.hp .rmq__row--rtl .rmq__track { animation: rmqLeft  var(--rmq-dur) linear infinite; }
@keyframes rmqLeft  { from { transform: translate3d(0,0,0); }    to { transform: translate3d(-50%,0,0); } }
@keyframes rmqRight { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

/* pause the row a visitor is reading */
.hp .rmq__row:hover .rmq__track { animation-play-state: paused; }
/* keep cards flat inside the marquee (a lift would clip against the row);
your gold accent bar still animates on hover */
.hp .rmq .tcard:hover { transform: none; box-shadow: var(--sh1); }

/* ---------- source badge (Yelp / Google) — NEW, optional ---------- */
.hp .tcard__src-row { margin-bottom: -0.2rem; }
.hp .tcard__src {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.3rem 0.7rem; border-radius: 999px;
	font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; line-height: 1;
}
.hp .tcard__src svg { width: 14px; height: 14px; display: block; }
.hp .tcard__src--google {padding:0; color: #3c4043; }
.hp .tcard__src--yelp img{
	width:60px;
}

@media (max-width: 560px) { .hp .rmq__track .tcard { width: 82vw; } }
@media (prefers-reduced-motion: reduce) {
	.hp .rmq__track { animation: none !important; transform: none !important; }
	.hp .rmq__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.hp .rmq__track [aria-hidden="true"] { display: none; }   /* hide loop clones */
}


.hp .hero .btn2.green:hover:hover{
	    background-color: #fff!important;
	color:#000!important;
}

.hp .hero .btn2.green:hover svg{
	    fill: #000!important;

}