/* Group Dining & Events (Umbraco 17 template). Plain CSS: no <style> tags. Settings > Stylesheets > venues/group-dining.css,
   loaded by the page's Brand Stylesheet field. Generated by build/build_v4.py; edit the generator, not this file.
   Every class is gd4- prefixed. Mobile first; all @media at the end.
   Editorial by default (restaurant rows, as on the Minamishima page); the finder grid only appears
   once a guest count or filter is set (.is-results). Spacing comes only from the --s scale.
   One accent: plum for the primary button and selected states. Links are ink with a thin underline. */
.gd4 {
	--gd4-paper: #f7f5f1;
	--gd4-white: #ffffff;
	--gd4-ink: #1a1a1a;
	--gd4-muted: #5f5a52;
	--gd4-line: #e2ded6;
	--gd4-plum: var(--sc-plum, #440b22);
	--gd4-plum-deep: #2e0717;
	--gd4-edge: #8c857a;
	--gd4-font: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 24px;
	--s6: 32px;
	--s7: 48px;
	--s8: 64px;
	--s9: 96px;
	--s10: 128px;
	--gd4-pad: var(--s4);
	--gd4-section: var(--s8);
	--gd4-head: var(--s5);
	background: var(--gd4-paper);
	color: var(--gd4-ink);
	font-family: var(--gd4-font);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
.gd4 *, .gd4 *::before, .gd4 *::after { box-sizing: border-box; }
/* :where() keeps these base rules at element specificity so component classes always win */
:where(.gd4) img { display: block; max-width: 100%; height: auto; }
:where(.gd4) p { margin: 0 0 1em; }
:where(.gd4) strong { font-weight: 600; color: var(--gd4-ink); }
:where(.gd4) a { color: inherit; }
:where(.gd4) h1, :where(.gd4) h2, :where(.gd4) h3 { font-family: var(--gd4-font); color: var(--gd4-ink); margin: 0; letter-spacing: 0; text-transform: none; }
.gd4 [hidden] { display: none !important; }

.gd4-wrap { max-width: 1168px; margin: 0 auto; padding-left: var(--gd4-pad); padding-right: var(--gd4-pad); }
.gd4-micro {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gd4-muted);
	margin: 0 0 var(--s3);
}
.gd4-h2 { font-size: 28px; line-height: 1.15; font-weight: 300; letter-spacing: -.02em; margin-bottom: var(--gd4-head); }
.gd4-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons and links. Height comes from height + inline-flex, never padding. */
.gd4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 var(--s5);
	line-height: 1;
	border: 1px solid var(--gd4-ink);
	border-radius: 2px;
	background: transparent;
	color: var(--gd4-ink);
	font-family: var(--gd4-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.gd4-btn:hover { background: var(--gd4-plum); border-color: var(--gd4-plum); color: var(--gd4-paper); }
.gd4-btn--solid { background: var(--gd4-plum); border-color: var(--gd4-plum); color: var(--gd4-paper); }
.gd4-btn--solid:hover { background: var(--gd4-plum-deep); border-color: var(--gd4-plum-deep); }
/* text link: ink, thin underline, 44px tall target */
.gd4-tlink, .gd4-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gd4-ink);
	font-family: var(--gd4-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: underline;
	text-decoration-color: var(--gd4-edge);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	cursor: pointer;
}
.gd4-tlink:hover, .gd4-link:hover { color: var(--gd4-plum); text-decoration-color: currentColor; }
.gd4 a:focus-visible, .gd4 button:focus-visible, .gd4 input:focus-visible, .gd4 summary:focus-visible {
	outline: 2px solid var(--gd4-plum);
	outline-offset: 3px;
}

/* Intro: the template renders the hero image and H1 above this block.
   The first sentence is set large and light, the way the inspiration sets its one quote. */
.gd4-intro { padding-top: var(--s7); }
.gd4-standfirst { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 300; letter-spacing: -.01em; }
.gd4-standfirst strong { font-weight: 500; }
.gd4-intro-sub { margin-top: var(--s5); max-width: 36rem; color: var(--gd4-muted); }
.gd4-intro-sub p:last-child { margin-bottom: 0; }
.gd4-intro-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }

/* Finder: one quiet line. Sticky only once results are showing. */
.gd4-find { padding-top: var(--gd4-section); }
.gd4-controls, .gd4-bar, .gd4-browse { display: none !important; }
.gd4.is-js .gd4-controls { display: block !important; }
.gd4.is-js .gd4-bar { display: flex !important; }
.gd4.is-js .gd4-browse { display: block !important; }
.gd4.is-js.is-filtered .gd4-browse { display: none !important; }
.gd4-bar-sentinel { height: 1px; margin-bottom: -1px; }

.gd4-bar {
	position: relative;
	z-index: 30;
	background: var(--gd4-paper);
	border-bottom: 1px solid transparent;
	margin-left: calc(var(--gd4-pad) * -1);
	margin-right: calc(var(--gd4-pad) * -1);
	padding: var(--s3) var(--gd4-pad);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	transition: border-color .2s;
}
.gd4.is-results .gd4-bar { position: sticky; top: 0; }
.gd4.is-results .gd4-bar.is-stuck { border-bottom-color: var(--gd4-line); }
.gd4-say { display: none; font-size: 18px; font-weight: 300; }
.gd4-field { position: relative; display: flex; align-items: center; }
/* Visible label notched into the field border on phones; on wider screens the sentence carries it. */
.gd4-float {
	position: absolute;
	top: -8px;
	left: var(--s2);
	z-index: 1;
	margin: 0;
	padding: 0 var(--s1);
	background: var(--gd4-paper);
	font-size: 11px;
	line-height: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gd4-muted);
}

.gd4-stepper { display: inline-flex; align-items: stretch; height: 46px; border: 1px solid var(--gd4-ink); border-radius: 2px; background: var(--gd4-white); }
.gd4-step {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--gd4-ink);
	font-family: var(--gd4-font);
	font-size: 22px;
	cursor: pointer;
}
.gd4-step:hover { background: var(--gd4-paper); }
/* 16px minimum on every input: iOS Safari zooms the page into anything smaller on focus. */
.gd4-guests {
	width: 54px;
	height: 44px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--gd4-line);
	border-right: 1px solid var(--gd4-line);
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--gd4-font);
	font-size: 16px;
	color: var(--gd4-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}
.gd4-guests::placeholder { color: var(--gd4-muted); opacity: 1; }

.gd4-seg { display: inline-flex; height: 46px; border: 1px solid var(--gd4-ink); border-radius: 2px; overflow: hidden; }
.gd4-seg button {
	height: 44px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--gd4-ink);
	font-family: var(--gd4-font);
	font-size: 13px;
	cursor: pointer;
}
.gd4-seg button + button { border-left: 1px solid var(--gd4-ink); }
.gd4-seg button[aria-pressed="true"] { background: var(--gd4-plum); color: var(--gd4-paper); }

.gd4-more-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	height: 46px;
	min-width: 46px;
	margin-left: auto;
	padding: 0 var(--s3);
	border: 1px solid var(--gd4-ink);
	border-radius: 2px;
	background: transparent;
	color: var(--gd4-ink);
	font-family: var(--gd4-font);
	font-size: 14px;
	cursor: pointer;
}
.gd4-more-txt { display: none; }
.gd4-ico { flex: none; }
.gd4-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--gd4-plum);
	color: var(--gd4-paper);
	font-size: 11px;
	letter-spacing: 0;
}
.gd4-browse { margin: var(--s1) 0 0; }

/* Panel: a bottom sheet on phones, a collapsible row under the bar on desktop (see @media). */
.gd4-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(26, 26, 26, .45);
	touch-action: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility .25s;
}
.gd4-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	background: var(--gd4-paper);
	border-radius: 10px 10px 0 0;
	transform: translateY(100%);
	visibility: hidden;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s;
}
.gd4.is-sheet-open .gd4-backdrop { opacity: 1; visibility: visible; }
.gd4.is-sheet-open .gd4-panel { transform: none; visibility: visible; }
.gd4-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s1) var(--s2) var(--s1) var(--gd4-pad);
	border-bottom: 1px solid var(--gd4-line);
}
.gd4-panel-title { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.gd4-sheet-sum { margin: 0 0 var(--s4); font-size: 14px; color: var(--gd4-muted); }
.gd4-close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var(--gd4-ink);
	font-size: 28px;
	cursor: pointer;
}
/* overscroll-behavior stops the page scrolling behind the sheet; an overflow lock on <html> distorted the mobile viewport */
.gd4-panel-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--s4) var(--gd4-pad) var(--s2); -webkit-overflow-scrolling: touch; }
.gd4-panel-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s3) var(--gd4-pad) calc(var(--s3) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--gd4-line);
	background: var(--gd4-paper);
}
.gd4-panel-foot .gd4-btn { flex: 1; max-width: 240px; }

.gd4-group { border: 0; margin: 0 0 var(--s5); padding: 0; min-width: 0; }
.gd4-group legend { padding: 0; }
.gd4-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gd4-chip {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 var(--s4);
	line-height: 1;
	border: 1px solid var(--gd4-edge);
	border-radius: 22px;
	background: var(--gd4-white);
	color: var(--gd4-ink);
	font-family: var(--gd4-font);
	font-size: 14px;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s;
}
.gd4-chip:hover { border-color: var(--gd4-ink); }
.gd4-chip[aria-pressed="true"] { background: var(--gd4-plum); border-color: var(--gd4-plum); color: var(--gd4-paper); }

.gd4-search {
	width: 100%;
	height: 46px;
	padding: 0 var(--s3);
	border: 1px solid var(--gd4-edge);
	border-radius: 2px;
	background: var(--gd4-white);
	font-family: var(--gd4-font);
	font-size: 16px;
	color: var(--gd4-ink);
}
.gd4-search:focus { border-color: var(--gd4-ink); }
.gd4-search::placeholder { color: var(--gd4-muted); opacity: 1; }

/* Results: hidden until a guest count or filter is set. Without script every card shows. */
.gd4.is-js .gd4-results { display: none; }
.gd4.is-js.is-results .gd4-results { display: block; }
.gd4.is-js.is-results .gd4-venues, .gd4.is-js.is-results:not(.gd4--grid) .gd4-interlude { display: none; }
.gd4-status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 var(--s4);
	margin: var(--s4) 0 var(--s2);
}
.gd4-status { margin: 0; font-size: 14px; color: var(--gd4-muted); }
.gd4-status strong { color: var(--gd4-ink); font-weight: 600; }

/* Cards: photo, name, one capacity line and a quiet action on the same line.
   The whole card is the tap target (the link stretches over it). */
.gd4-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s7) var(--s4);
}
.gd4-card { position: relative; margin: 0; display: flex; flex-direction: column; }
.gd4-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gd4-line); margin-bottom: var(--s3); }
/* A light, even grade so photos from different shoots sit together. Stopgap until a matched set exists. */
.gd4-card-img img, .gd4-row-img img, .gd4-interlude img { filter: saturate(.88) contrast(1.03); }
.gd4-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.gd4-card:hover .gd4-card-img img { transform: scale(1.03); }
.gd4-card .gd4-micro { margin-bottom: var(--s1); letter-spacing: .14em; }
.gd4-card-title { font-size: 15px; line-height: 1.3; font-weight: 600; margin-bottom: var(--s1); }
.gd4-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s3); margin: 0; }
.gd4-cap { font-size: 13px; line-height: 1.45; color: var(--gd4-muted); }
.gd4-cap-standing { display: none; }
.gd4.is-standing .gd4-cap-seated { display: none; }
.gd4.is-standing .gd4-cap-standing { display: inline; }
.gd4-card .gd4-link { min-height: 44px; font-size: 13px; color: var(--gd4-muted); text-decoration: none; }
.gd4-card .gd4-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gd4-card:hover .gd4-link { color: var(--gd4-plum); text-decoration: underline; }

.gd4-empty { padding: var(--s7) 0 var(--s5); max-width: 560px; }
.gd4-empty-title { font-size: 20px; font-weight: 600; margin-bottom: var(--s2); }
.gd4-empty-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

/* Restaurant rows: one large photo and a short text block, alternating sides. */
.gd4-venues { padding-top: var(--gd4-section); }
.gd4-row + .gd4-row { margin-top: var(--gd4-section); }
.gd4-row-img { aspect-ratio: 4 / 3; overflow: hidden; background: #2a2622; }
.gd4-row-img img { width: 100%; height: 100%; object-fit: cover; }
.gd4-row-text { padding-top: var(--s5); }
.gd4-row-name { font-size: 28px; line-height: 1.15; font-weight: 300; letter-spacing: -.02em; margin-bottom: var(--s2); }
.gd4-row-sum { margin: 0 0 var(--s4); font-size: 14px; color: var(--gd4-muted); }
.gd4-row-spaces { list-style: none; margin: 0 0 var(--s2); padding: 0; font-size: 14px; }
.gd4-row-spaces li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-top: 1px solid var(--gd4-line); }
.gd4-row-spaces li:last-child { border-bottom: 1px solid var(--gd4-line); }
.gd4-row-spaces li span:last-child { color: var(--gd4-muted); white-space: nowrap; text-align: right; }
.gd4-row-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: 0; }

/* Option A: typographic restaurant list under the grid, image-free so it stays short. */
.gd4-index { padding-top: var(--gd4-section); }
.gd4-index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gd4-line); }
.gd4-index-item {
	display: grid;
	grid-template-columns: 1fr;
	align-content: center;
	gap: 0 var(--s5);
	padding: var(--s4) 0;
	border-bottom: 1px solid var(--gd4-line);
}
.gd4-index-name { font-size: 20px; font-weight: 300; line-height: 1.3; }
.gd4-index-sum { margin: 0; font-size: 14px; color: var(--gd4-muted); }
.gd4-index-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: 0; }
/* in option A the grid shows from the start, so the browse link sits right under the status line */
.gd4--grid .gd4-results { padding-top: 0; }

/* Interlude: one full-bleed image between the two halves of the rows. */
.gd4-interlude { margin: var(--gd4-section) 0 0; }
.gd4-interlude-img { aspect-ratio: 3 / 2; overflow: hidden; background: #2a2622; }
.gd4-interlude-img img { width: 100%; height: 100%; object-fit: cover; }
.gd4-interlude figcaption { padding-top: var(--s3); }
.gd4-interlude figcaption .gd4-micro { margin: 0; }

/* Additional services: folded away, opened on demand. Copy is the live page's, word for word. */
.gd4-info { padding-top: var(--gd4-section); }
.gd4-disc { max-width: 760px; border-top: 1px solid var(--gd4-line); }
.gd4-disc:last-of-type { border-bottom: 1px solid var(--gd4-line); }
.gd4-disc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	cursor: pointer;
	list-style: none;
}
.gd4-disc summary::-webkit-details-marker { display: none; }
.gd4-disc summary::after { content: "+"; font-size: 22px; font-weight: 300; line-height: 1; color: var(--gd4-ink); }
.gd4-disc[open] summary::after { content: "\2212"; }
.gd4-h3 { font-size: 16px; font-weight: 600; margin: 0; }
.gd4-disc-body { padding: 0 0 var(--s5); }
.gd4-map { margin-top: var(--s5); aspect-ratio: 1188 / 723; background: var(--gd4-line); }

/* Closing CTA. Kept light: the site footer below is plum, so a dark band here would merge into it. */
.gd4-cta { padding-top: calc(var(--gd4-section) + var(--s6)); padding-bottom: var(--s8); text-align: center; }
.gd4-cta .gd4-h2 { margin-bottom: var(--s3); }
.gd4-cta a.gd4-mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--gd4-plum); font-weight: 600; text-underline-offset: 5px; }
.gd4-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s5); margin: var(--s4) 0 0; }

/* Option B browse rows: occasion, guests and features from the brief, as quiet plum-tinted chips. */
.gd4-browse-rows { display: grid; gap: var(--s4); margin: 0 0 var(--s3); }
.gd4-brow { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.gd4-brow-label { font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gd4-muted); }
.gd4-tchips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gd4-chip.gd4-tchip { border-color: transparent; background: #f1e8ea; color: var(--gd4-plum); font-weight: 500; }
.gd4-chip.gd4-tchip:hover { border-color: var(--gd4-plum); }
.gd4-chip.gd4-tchip[aria-pressed="true"] { background: var(--gd4-plum); border-color: var(--gd4-plum); color: var(--gd4-paper); }
/* the browse rows stay in view above the results, so the bar does not need to stick */
.gd4--browse.is-results .gd4-bar { position: relative; }

/* Planning steps: a plum band in the middle of the page. */
.gd4-steps { margin-top: var(--gd4-section); padding: var(--s8) 0; background: var(--gd4-plum); color: var(--gd4-paper); }
.gd4-steps .gd4-h2 { color: var(--gd4-paper); }
.gd4-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s6); counter-reset: none; }
.gd4-steps-n { display: block; font-size: 48px; line-height: 1; font-weight: 200; color: rgba(247, 245, 241, .55); margin-bottom: var(--s3); }
.gd4-steps-t { font-size: 16px; font-weight: 600; color: #ffffff; margin: 0 0 var(--s2); }
.gd4-steps-list p { margin: 0; color: rgba(247, 245, 241, .92); }

/* Guest quotes */
.gd4-quotes { padding-top: var(--gd4-section); padding-bottom: var(--s7); }
.gd4-quotes-list { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
.gd4-quotes figure { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--gd4-line); }
.gd4-quotes blockquote { margin: 0 0 var(--s3); font-size: 20px; line-height: 1.45; font-weight: 300; letter-spacing: -.01em; }
.gd4-quotes figcaption { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gd4-muted); }

/* Placeholders: anything not yet confirmed carries a dashed outline and a label until real content replaces it. */
.gd4-ph { position: relative; outline: 1px dashed var(--gd4-edge); outline-offset: 6px; }
.gd4-ph::before {
	content: attr(data-ph);
	position: absolute;
	top: -16px;
	right: 0;
	z-index: 2;
	padding: 2px 6px;
	background: var(--gd4-paper);
	color: var(--gd4-plum);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
}
section.gd4-ph { outline-offset: -12px; }
section.gd4-ph::before { top: 12px; right: 12px; }

.gd4-cta-lede { max-width: 36rem; margin: 0 auto; color: var(--gd4-muted); }
.gd4-cta-mail { margin: var(--s3) 0 0; }
.gd4-disc-list { margin: 0 0 1em; padding-left: 1.2em; }

/* 320 to 339px: the narrowest phones still get the bar on one row. Targets stay 44px tall. */
@media (max-width: 339px) {
	.gd4-bar { gap: var(--s1); }
	.gd4-step { width: 36px; }
	.gd4-guests { width: 44px; }
	.gd4-seg button { padding: 0 4px; font-size: 12px; }
	.gd4-more-btn { min-width: 44px; padding: 0 var(--s2); }
}

/* 340 to 374px: keep the bar on one row. */
@media (min-width: 340px) and (max-width: 374px) {
	.gd4-bar { gap: 6px; }
	.gd4-guests { width: 50px; }
	.gd4-seg button { padding: 0 5px; }
}

/* Below 1100px the per-space list is left out of the rows. The summary line carries it, and
   "See spaces" opens the full detail, which keeps each half of the rows under 2.5 screens. */
@media (max-width: 1099px) {
	.gd4-row-spaces { display: none; }
}

/* Phones: an odd last card spans both columns instead of sitting alone. */
@media (max-width: 767px) {
	.gd4-grid > .gd4-card.is-wide { grid-column: 1 / -1; }
	.gd4-grid > .gd4-card.is-wide .gd4-card-img { aspect-ratio: 16 / 9; }
}

@media (min-width: 640px) {
	.gd4 { --gd4-pad: var(--s5); }
	.gd4-standfirst { font-size: 28px; }
	.gd4-grid { gap: var(--s8) var(--s6); }
	.gd4-card-img { margin-bottom: var(--s4); }
	.gd4-card .gd4-micro { letter-spacing: .18em; }
	.gd4-card-title { font-size: 18px; }
	.gd4-cap, .gd4-card .gd4-link { font-size: 14px; }
	/* the sentence replaces the notched label */
	.gd4-say { display: inline; }
	.gd4-float { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.gd4-bar { gap: var(--s3); }
	.gd4-guests { width: 62px; }
	.gd4-seg button { padding: 0 14px; font-size: 14px; }
	.gd4-interlude-img { aspect-ratio: 21 / 9; }
	.gd4-row-img { aspect-ratio: 3 / 2; }
	.gd4-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s6); align-items: center; }
	.gd4-row-img { grid-column: 1 / 8; grid-row: 1; }
	.gd4-row-text { grid-column: 8 / 13; grid-row: 1; padding-top: 0; }
	.gd4-row--flip .gd4-row-img { grid-column: 6 / 13; }
	.gd4-row--flip .gd4-row-text { grid-column: 1 / 6; }
	.gd4-index-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.gd4-index-sum { grid-column: 1; }
	.gd4-index-links { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 768px) {
	.gd4 { --gd4-section: var(--s10); --gd4-head: var(--s6); }
	.gd4-h2 { font-size: 40px; }
	.gd4-intro { padding-top: var(--s8); }
	.gd4-find { padding-top: var(--s9); }
	.gd4-bar { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
	.gd4-more-txt { display: inline; }
	.gd4-more-btn { border-color: transparent; padding: 0 var(--s2); text-decoration: underline; text-decoration-color: var(--gd4-edge); text-underline-offset: 5px; }
	.gd4-more-btn .gd4-ico { display: none; }
	.gd4-more-btn .gd4-badge { position: static; }
	.gd4-backdrop, .gd4-panel-head, .gd4-panel-foot, .gd4-sheet-sum { display: none !important; }
	/* desktop: the filters fold out under the bar, aligned to the card columns */
	.gd4-panel {
		position: static;
		max-height: none;
		transform: none;
		visibility: visible;
		background: transparent;
		border-radius: 0;
		transition: none;
		display: none;
	}
	.gd4.is-panel-open .gd4-panel { display: block; }
	.gd4-panel-body {
		overflow: visible;
		padding: var(--s5) 0 var(--s2);
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s6);
	}
	.gd4-panel-body .gd4-group { margin-bottom: var(--s4); }
	.gd4-panel-body .gd4-group--search { grid-column: 1 / -1; max-width: 360px; }
	.gd4-cta .gd4-h2 { font-size: 40px; }
	.gd4-brow { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--s4); }
	.gd4-steps { padding: var(--s9) 0; }
	.gd4-steps-list, .gd4-quotes-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); }
	.gd4-steps-n { font-size: 64px; }
}

@media (min-width: 900px) {
	/* rows: photo across seven columns, text across four, offset down; every other row flips */
	.gd4-row-text { grid-column: 9 / 13; padding-top: var(--s8); }
	/* rows sit one step closer than sections, and photos run slightly wider, so short landscape screens stay under 2.5 screens a band */
	.gd4-row + .gd4-row { margin-top: var(--s9); }
	.gd4-row-img { aspect-ratio: 16 / 10; }
	.gd4-row--flip .gd4-row-img { grid-column: 6 / 13; }
	.gd4-row--flip .gd4-row-text { grid-column: 1 / 5; }
	.gd4-row-name { font-size: 36px; }
}

@media (min-width: 1024px) {
	.gd4-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gd4-panel-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gd4-panel-body .gd4-group--venue { grid-column: 2 / -1; }
	.gd4-index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); }
	/* intro: large standfirst across the page, the rest indented under it */
	.gd4-standfirst { font-size: 34px; max-width: 26em; }
	.gd4-intro-sub { margin-left: calc((100% + var(--s6)) * 5 / 12); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gd4 *, .gd4 *::before, .gd4 *::after { transition: none !important; }
	.gd4-card:hover .gd4-card-img img { transform: none; }
}

/* Option D: the supplied wireframe's layout, in SkyCity plum and gold, on the same --s spacing scale.
   Appended after v4.css. Gold roles are fixed: #b38d2f fills only (plum text on it, 5.1:1),
   #8a6a1e for gold text on cream or white, #c8a44a for gold text on plum (6.7:1).
   The --d-navy names are kept from the wireframe build; they now hold plum. */

.gd4--d {
	/* site.css master brand tokens win when present; the values after the comma are for the preview */
	--d-navy: var(--sc-plum, #440b22);
	--d-navy-2: #2e0717;
	--d-cream: #faf5ec;
	--d-line: #e5dbc7;
	--d-gold: var(--sc-gold, #b38d2f);
	--d-gold-ink: #8a6a1e;
	--d-gold-lt: #c8a44a;
	--gd4-paper: var(--d-cream);
	/* one section gap everywhere (panel round 3: gaps drifted between 24, 64, 80 and 128) */
	--gd4-section: var(--s8);
	--gd4-ink: var(--d-navy);
	background: var(--d-cream);
	color: var(--d-navy);
}
.gd4--d a:focus-visible, .gd4--d button:focus-visible, .gd4--d input:focus-visible, .gd4--d summary:focus-visible { outline-color: var(--d-gold-ink); }
/* on plum the dark gold ring is only 3.2:1, so the light gold is used there (6.7:1) */
.gd4d-intro a:focus-visible, .gd4d-intro button:focus-visible, .gd4d-cta a:focus-visible, .gd4-jump:focus-visible { outline-color: var(--d-gold-lt); }
.gd4--d .gd4d-box, .gd4--d .gd4d-panel { min-width: 0; overflow-wrap: anywhere; }

/* section headings: small caps label with a short gold rule under it, centred as in the wireframe */
.gd4d-head { margin: 0 0 var(--s4); font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: center; color: var(--d-navy); }
.gd4d-head::after { content: ""; display: block; width: 48px; height: 2px; margin: var(--s3) auto 0; background: var(--d-gold); }

.gd4d-btn-gold { background: var(--d-gold); border-color: var(--d-gold); color: var(--d-navy); }
.gd4d-btn-gold:hover { background: var(--d-gold-lt); border-color: var(--d-gold-lt); color: var(--d-navy); }
.gd4d-btn-line { background: transparent; border-color: var(--d-gold-lt); color: #ffffff; }
.gd4d-btn-line:hover { background: var(--d-navy-2); border-color: var(--d-gold-lt); color: #ffffff; }

/* intro band: photo first (above the words on phones), words on navy */
/* hero: never taller than 80% of the screen (svh, so mobile browser bars do not push it over) */
.gd4d-intro { display: grid; grid-template-columns: 1fr; background: var(--d-navy); color: #ffffff; }
/* the words, two buttons, the link row and padding need about 488px on a phone; the photo takes the rest of the 80% */
/* the photo stays above the title on phones, as a short strip so the guest pills land on the first screen */
.gd4d-intro-img { height: clamp(120px, 38vw, 220px); overflow: hidden; background: var(--d-navy-2); }
.gd4d-intro-img img { width: 100%; height: 100%; object-fit: cover; }
/* Hero video: a 16:9 YouTube frame sized off whichever side of the box is the constraint, so it covers
   the box at any shape (container units), centred. Invisible until YouTube reports it is playing, so
   the photo never flashes to black. Clicks pass through to nothing; it is decoration. */
.gd4d-intro-img { position: relative; container-type: size; }
.gd4d-intro-video { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; transform: translate(-50%, -50%) scale(1.02); pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.gd4d-intro-img.is-playing .gd4d-intro-video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gd4d-intro-video { display: none; } }
.gd4d-intro-text { padding: var(--s5) var(--gd4-pad) var(--s6); }
.gd4d-title { margin: 0 0 var(--s3); font-size: 30px; line-height: 1.1; font-weight: 300; letter-spacing: -.01em; color: #ffffff; }
.gd4d-title span { display: block; margin-top: var(--s2); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--d-gold-lt); }
.gd4d-tagline { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 300; letter-spacing: -.01em; color: #ffffff; }
.gd4d-intro-text p { color: rgba(255, 255, 255, .92); }
.gd4d-intro-text strong { color: #ffffff; }
.gd4d-intro-actions { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s5) 0 0; }

/* the live intro paragraphs, word for word, in a cream strip under the hero */
.gd4d-lede { padding-top: var(--gd4-section); }
.gd4d-lede-grid p:last-child { margin-bottom: 0; }
.gd4d-lede-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--s7); color: var(--gd4-muted); }
.gd4d-lede-grid strong { color: var(--d-navy); }
.gd4d-intro-actions .gd4-btn { width: 100%; }
.gd4d-intro-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin: var(--s2) 0 0; }
.gd4d-intro-links .gd4-tlink { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--gd4-font); text-decoration: underline; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--d-gold-lt); text-decoration-color: rgba(200, 164, 74, .5); }
.gd4d-intro-links .gd4-tlink:hover { color: #ffffff; }

/* finder */
.gd4--d .gd4-find { padding-top: var(--gd4-section); }
.gd4--d .gd4-find .gd4-h2 { text-align: center; }

/* browse by occasion: picture cards that act as filter toggles */
.gd4d-occ { margin-top: var(--s7); }
.gd4d-occ-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); -webkit-overflow-scrolling: touch; }
.gd4d-occ-card { scroll-snap-align: start; }
.gd4--d .gd4-chip.gd4d-occ-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: auto;
	padding: 0 0 var(--s4);
	border: 1px solid var(--d-line);
	border-radius: 6px;
	overflow: hidden;
	background: #ffffff;
	color: var(--d-navy);
	text-align: center;
	line-height: 1.4;
}
.gd4d-occ-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--d-line); }
.gd4d-occ-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.03); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.gd4d-occ-card:hover .gd4d-occ-img img { transform: scale(1.04); }
.gd4d-occ-name { display: block; margin: var(--s4) var(--s3) var(--s1); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.gd4d-occ-line { display: block; margin: 0 var(--s3); font-size: 13px; color: var(--gd4-muted); }
.gd4--d .gd4-chip.gd4d-occ-card:hover { border-color: var(--d-gold); }
.gd4--d .gd4-chip.gd4d-occ-card[aria-pressed="true"] { background: #ffffff; color: var(--d-navy); border-color: var(--d-gold); box-shadow: 0 0 0 2px var(--d-gold); }
.gd4--d .gd4-chip.gd4d-occ-card[aria-pressed="true"] .gd4d-occ-name { color: var(--d-gold-ink); }

/* browse by number of guests + features: one white panel, two columns on desktop */
.gd4d-panel { display: grid; grid-template-columns: 1fr; gap: var(--s7); margin-top: 0; padding: var(--s6) var(--s5); background: #ffffff; border: 1px solid var(--d-line); border-radius: 8px; }
.gd4d-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.gd4d-panel-col { min-width: 0; }
/* the em sets the wrap point: at 13px four fit down to 320, at large text sizes they go two by two */
.gd4d-pills { font-size: 13px; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(52px, 4em), 1fr)); gap: var(--s2); max-width: 480px; margin: 0 auto; }
/* guest pills match the feature tiles: same 76px height, a big number with a small label under it */
.gd4--d .gd4-chip.gd4d-pill { flex-direction: column; justify-content: center; gap: 2px; height: 76px; min-width: 0; padding: 0 var(--s1); border-radius: 4px; border-color: var(--gd4-edge); background: #ffffff; color: var(--d-navy); white-space: nowrap; line-height: 1.2; }
.gd4d-pill-n { font-size: 16px; font-weight: 600; }
.gd4d-pill-u { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.gd4--d .gd4-chip.gd4d-feat { flex-direction: column; justify-content: center; gap: var(--s1); height: 76px; min-width: 104px; padding: var(--s2) var(--s3); border-radius: 4px; border-color: var(--gd4-edge); background: #ffffff; color: var(--d-navy); font-size: 13px; }
.gd4d-feat svg { color: var(--d-gold-ink); }
.gd4--d .gd4-chip[aria-pressed="true"] { background: var(--d-navy); border-color: var(--d-navy); color: #ffffff; }
.gd4--d .gd4-chip.gd4d-feat[aria-pressed="true"] svg { color: var(--d-gold-lt); }
.gd4--d .gd4-seg button[aria-pressed="true"] { background: var(--d-navy); }
.gd4--d .gd4-badge { background: var(--d-navy); }
/* the controls read as a toolbar for the results, not loose on the cream */
.gd4--d .gd4-bar { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); background: #ffffff; border: 1px solid var(--d-line); border-radius: 8px; }
.gd4--d.is-js:not(.is-filtered) .gd4-browse { display: flex !important; }
.gd4--d .gd4-browse { margin: var(--s2) 0 0; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.gd4d-hint { font-size: 14px; color: var(--gd4-muted); }
.gd4--d .gd4-results-h:focus { outline: none; }
.gd4-tag { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--s4); border: 0; border-radius: 22px; background: #f1e8ea; color: var(--d-navy); font-family: var(--gd4-font); font-size: 14px; font-weight: 600; cursor: pointer; }
.gd4-active { display: inline-flex; flex-wrap: wrap; gap: var(--s2); margin-left: auto; }
.gd4-full-row { display: flex; justify-content: center; margin-top: var(--s7); }
/* Save on each result photo, and the shortlist it builds */
.gd4-card-img { position: relative; }
.gd4-save { position: absolute; z-index: 2; top: var(--s2); right: var(--s2); display: inline-flex; align-items: center; gap: var(--s1); height: 44px; padding: 0 var(--s3); border: 0; border-radius: 22px; background: rgba(255, 255, 255, .94); color: var(--d-navy); font-family: var(--gd4-font); font-size: 13px; font-weight: 600; cursor: pointer; }
.gd4-save[aria-pressed="true"] { background: var(--d-navy); color: #ffffff; }
.gd4-save[aria-pressed="true"] path { fill: currentColor; }
/* gold stays on the button only; the tray itself is quiet */
.gd4-shortlist { margin: var(--s5) 0; padding: var(--s5); background: #ffffff; border: 1px solid var(--d-line); border-radius: 8px; }
.gd4-shortlist-h { margin: 0 0 var(--s3); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--d-navy); }
.gd4-shortlist-n { font-weight: 400; color: var(--d-navy); }
.gd4-shortlist-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.gd4-shortlist-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border-bottom: 1px solid var(--d-line); font-size: 15px; color: var(--d-navy); }
.gd4-unsave { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--d-navy); font-size: 22px; cursor: pointer; }
.gd4-shortlist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: 0; }
.gd4d-saved { margin: var(--s3) 0 0; font-size: 14px; color: var(--d-gold-lt); }
/* Help me choose: one question per screen, in a native dialog; full screen on phones */
.gd4:not(.is-js) button[data-guide] { display: none; }
/* The dialog holds one height for every step: the question scrolls inside .gd4g-body and Back/Next sit
   on a bar pinned to the bottom, so the panel never re-centres and the thumb target never moves. */
.gd4g { width: min(760px, calc(100% - 32px)); height: min(720px, calc(100dvh - 64px)); max-height: calc(100dvh - 64px); margin: auto; padding: var(--s6) var(--s6) 0; border: 0; border-radius: 8px; background: var(--d-cream); color: var(--d-navy); font-family: var(--gd4-font); overflow: hidden; }
.gd4g[open] { display: flex; flex-direction: column; }
.gd4g::backdrop { background: rgba(46, 7, 23, .72); }
.gd4g-top { flex: none; display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s4); }
.gd4g-progress { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--d-gold-ink); }
.gd4g-close { width: 44px; height: 44px; margin: calc(var(--s3) * -1) calc(var(--s3) * -1) 0 auto; border: 0; background: none; color: var(--d-navy); font-size: 28px; line-height: 1; cursor: pointer; }
.gd4g-step:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* room under the last field so a focused input clears the on-screen keyboard */
.gd4g-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px var(--s6); margin: -2px -2px 0; scroll-padding-bottom: 96px; }
.gd4g-q { margin: 0 0 var(--s5); font-size: 28px; font-weight: 300; line-height: 1.15; color: var(--d-navy); }
.gd4g-q:focus { outline: none; }
.gd4g-hint { margin: calc(var(--s3) * -1) 0 var(--s4); font-size: 14px; color: var(--gd4-muted); }
.gd4g-opts { display: grid; gap: var(--s3); }
.gd4g-opts--occ, .gd4g-opts--pills, .gd4g-opts--two, .gd4g-opts--feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd4g-opts--months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd4g-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); min-height: 76px; padding: var(--s3); border: 1px solid var(--gd4-edge); border-radius: 6px; background: #ffffff; color: var(--d-navy); font-family: var(--gd4-font); font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.gd4g-pill { min-height: 56px; }
.gd4g-opt:hover { border-color: var(--d-gold); }
/* chosen = plum fill, the same on every kind of tile (a gold ring alone was too faint to read) */
.gd4g-opt[aria-pressed="true"] { border-color: var(--d-navy); background: var(--d-navy); color: #ffffff; }
.gd4g-opt[aria-pressed="true"] svg { color: var(--d-gold-lt); }
.gd4g-occ { padding: 0 0 var(--s3); overflow: hidden; }
.gd4g-img { display: block; width: 100%; aspect-ratio: 16 / 10; background: #e6ddd0; }
.gd4g-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd4g-feat svg { color: var(--d-gold-ink); }
.gd4g-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1); margin: var(--s2) 0 var(--s5); }
.gd4g-dow { padding: var(--s1) 0; font-size: 12px; font-weight: 600; text-align: center; color: var(--gd4-muted); }
.gd4g-day { min-height: 44px; border: 1px solid var(--d-line); border-radius: 6px; background: #ffffff; color: var(--d-navy); font-family: var(--gd4-font); font-size: 15px; font-weight: 600; cursor: pointer; }
.gd4g-day:hover:not(:disabled) { border-color: var(--d-gold); }
.gd4g-day[aria-pressed="true"] { border-color: var(--d-navy); background: var(--d-navy); color: #ffffff; }
.gd4g-day:disabled { background: transparent; border-color: transparent; color: #b5aca0; cursor: default; }
.gd4g-opts--times { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s2); }
.gd4g-time { min-height: 48px; }
.gd4g-nav [data-g-skip] + [data-g-next] { margin-left: var(--s4); }
.gd4g-year { font-size: 12px; font-weight: 500; opacity: .8; }
.gd4g-nav { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 calc(var(--s6) * -1); padding: var(--s3) var(--s6) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--d-line); background: var(--d-cream); }
.gd4g-nav .gd4-tlink { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s3); margin: 0 calc(var(--s3) * -1); }
.gd4g-nav [data-g-skip], .gd4g-nav [data-g-next], .gd4g-nav [data-g-restart] { margin-left: auto; }
.gd4g-nav [data-g-skip], .gd4g-nav [data-g-restart] { margin-right: calc(var(--s3) * -1); }
.gd4g-fields { display: grid; gap: var(--s4); max-width: 480px; margin: var(--s6) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--d-line); }
.gd4g-sub { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--d-navy); }
.gd4g-field { display: grid; gap: var(--s1); }
.gd4g-field > span, .gd4g-best legend { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--d-navy); }
.gd4g-field input { height: 48px; padding: 0 var(--s3); border: 1px solid var(--gd4-edge); border-radius: 6px; background: #ffffff; color: var(--d-navy); font-family: var(--gd4-font); font-size: 16px; }
.gd4g-field input[aria-invalid="true"] { border-color: #a12a2a; box-shadow: inset 0 0 0 1px #a12a2a; }
.gd4g-err { margin: calc(var(--s3) * -1) 0 0; font-size: 13px; color: #a12a2a; }
.gd4g-best { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: 0; border: 0; }
.gd4g-best legend { margin-bottom: var(--s2); padding: 0; }
.gd4g-radio { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: 15px; cursor: pointer; }
.gd4g-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--d-navy); }
.gd4g-privacy { margin: calc(var(--s2) * -1) 0 0; font-size: 13px; color: var(--gd4-muted); }
.gd4g-privacy a { color: var(--d-navy); }
.gd4g-sum { margin: calc(var(--s3) * -1) 0 var(--s5); font-size: 14px; color: var(--gd4-muted); }
.gd4g-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
/* photo, name, Save: the same Save pill as on the result cards, in its own column */
.gd4g-match { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: var(--s4); background: #ffffff; border: 1px solid var(--d-line); border-radius: 6px; overflow: hidden; }
.gd4g-match .gd4g-img { height: 100%; aspect-ratio: auto; min-height: 96px; }
.gd4g-match-body { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) 0; }
.gd4g-match .gd4g-name { font-size: 15px; font-weight: 600; }
.gd4g-cap { font-size: 13px; color: var(--gd4-muted); }
.gd4g-match .gd4-save { position: static; margin-right: var(--s3); border: 1px solid var(--d-line); }
.gd4g-none p { margin: 0 0 var(--s4); font-size: 15px; }
/* Umbraco Forms mode: the panel is the only way in, so its own Enquire now link goes */
.gd4.is-forms .gd4g-actions [data-enquire] { display: none; }
.gd4g-senderr { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border-left: 3px solid #a12a2a; background: #ffffff; font-size: 14px; color: #a12a2a; }
.gd4g-senderr a { color: var(--d-navy); }
.gd4g-actions [aria-disabled="true"] { opacity: .7; cursor: progress; }
/* sent: the question becomes "Thank you" and everything else on the screen steps aside */
.gd4g-step.is-sent .gd4g-body > :not(.gd4g-q):not(.gd4g-sent) { display: none; }
.gd4g-step.is-sent .gd4g-nav { display: none; }
.gd4g-sent-msg { margin: 0 0 var(--s5); font-size: 17px; line-height: 1.5; }
.gd4g-all { margin: var(--s4) 0 0; }
/* the outline button is drawn for plum bands; on the cream dialog it needs plum ink */
.gd4g .gd4d-btn-line { color: var(--d-navy); border-color: var(--d-navy); }
.gd4g-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; }
@media (max-width: 639px) {
	.gd4g { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: var(--s4) var(--s4) 0; border-radius: 0; }
	.gd4g-nav { margin: 0 calc(var(--s4) * -1); padding-left: var(--s4); padding-right: var(--s4); }
	.gd4g-q { font-size: 24px; }
	.gd4g-match { grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--s3); }
	.gd4g-actions .gd4-btn { width: 100%; }
}
/* narrow phones: the Save pill keeps its heart and drops the word, so names get the room */
@media (max-width: 399px) {
	.gd4g-match .gd4-save { width: 44px; padding: 0; justify-content: center; }
	.gd4g-match .gd4-save-t { display: none; }
}
@media (min-width: 640px) {
	.gd4g-opts--occ { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gd4g-opts--pills, .gd4g-opts--feats, .gd4g-opts--months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gd4g-opts--times { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
/* wider screens: calendar and start times side by side, so the question stays in view */
@media (min-width: 768px) {
	.gd4g-step[data-g-step="6"] .gd4g-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s6); align-content: start; }
	.gd4g-step[data-g-step="6"] .gd4g-q { grid-column: 1 / -1; }
	.gd4g-step[data-g-step="6"] .gd4g-cal-h { grid-column: 1; grid-row: 2; }
	.gd4g-step[data-g-step="6"] .gd4g-cal { grid-column: 1; grid-row: 3; margin-bottom: 0; }
	.gd4g-step[data-g-step="6"] #gd4g-time-h { grid-column: 2; grid-row: 2; }
	.gd4g-step[data-g-step="6"] .gd4g-opts--times { grid-column: 2; grid-row: 3; align-content: start; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* the floating results pill is a phone aid, and never shows over the flow */
@media (min-width: 768px) { .gd4-jump { display: none !important; } }
/* floating "Show N spaces": appears after a choice while the results are below the screen */
.gd4-jump { position: fixed; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 950; transform: translateX(-50%); display: inline-flex; align-items: center; height: 48px; padding: 0 var(--s5); border: 0; border-radius: 24px; background: var(--d-navy); color: #ffffff; font-family: var(--gd4-font); font-size: 14px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 8px 24px rgba(46, 7, 23, .3); cursor: pointer; }
.gd4-jump::after { content: ""; width: 8px; height: 8px; margin-left: var(--s3); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.gd4--d .gd4-tlink:hover, .gd4--d .gd4-link:hover, .gd4--d .gd4-card:hover .gd4-link { color: var(--d-gold-ink); }

/* planning steps beside featured venues */
.gd4d-duo { padding-top: var(--gd4-section); }
.gd4d-duo-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: start; }
.gd4d-box { position: relative; padding: var(--s6) var(--s5); background: #ffffff; border: 1px solid var(--d-line); border-radius: 8px; }
.gd4d-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.gd4d-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
.gd4d-steps li > :not(.gd4d-n) { grid-column: 2; }
.gd4d-n { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0; border-radius: 50%; background: var(--d-gold); color: var(--d-navy); font-size: 18px; font-weight: 600; }
.gd4d-steps h3 { margin: 0 0 var(--s2); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--d-navy); }
.gd4d-steps p { margin: 0; font-size: 14px; color: var(--gd4-muted); }
.gd4d-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.gd4d-tile { display: flex; flex-direction: column; height: 100%; border-radius: 6px; overflow: hidden; background: var(--d-navy); color: #ffffff; text-decoration: none; }
.gd4d-tile-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--d-navy-2); }
.gd4d-tile-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.03); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.gd4d-tile:hover .gd4d-tile-img img { transform: scale(1.04); }
.gd4d-tile-body { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s3) var(--s4); flex: 1; }
.gd4d-tile-r { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--d-gold-lt); }
.gd4d-tile-d { font-size: 14px; line-height: 1.45; color: #ffffff; }
.gd4d-tile-cap { margin-top: auto; padding-top: var(--s2); font-size: 12px; color: var(--d-gold-lt); }
.gd4d-more { margin: var(--s4) 0 0; text-align: center; }

/* parking, finishing touches, guest quotes */
.gd4d-info { padding-top: var(--gd4-section); }
.gd4d-info-grid { display: grid; grid-template-columns: 1fr; gap: 0; background: #ffffff; border: 1px solid var(--d-line); border-radius: 8px; }
.gd4d-info .gd4d-box { display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; }
.gd4d-info .gd4d-box + .gd4d-box { border-top: 1px solid var(--d-line); }
.gd4d-info .gd4d-box > :last-child { margin-bottom: 0; }
.gd4d-sub { margin: var(--s4) 0 var(--s2); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--d-navy); }
.gd4d-touches { margin-top: var(--s5); }
.gd4d-box p { margin: 0 0 var(--s4); }
.gd4d-info .gd4d-box > p { font-size: 15px; color: var(--gd4-muted); }
.gd4d-ticks { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.gd4d-ticks li { position: relative; padding: var(--s2) 0 var(--s2) var(--s6); font-size: 15px; border-bottom: 1px solid var(--d-line); }
.gd4d-ticks li::before { content: "\2713"; position: absolute; left: 4px; top: var(--s2); color: var(--d-gold-ink); font-weight: 600; }
.gd4d-small { font-size: 13px !important; margin: var(--s4) 0 0 !important; }
.gd4d-more-info { margin-top: var(--s2); }
.gd4d-more-info summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--d-navy); text-decoration: underline; text-decoration-color: var(--d-gold); text-underline-offset: 6px; cursor: pointer; list-style: none; }
.gd4d-more-info summary::-webkit-details-marker { display: none; }
.gd4d-more-info[open] summary { margin-bottom: var(--s3); }
.gd4d-more-info p { font-size: 15px; }
.gd4d-quotes figure { margin: 0 0 var(--s5); }
.gd4d-quotes figure:last-child { margin-bottom: 0; }
.gd4d-quotes blockquote { margin: 0 0 var(--s2); font-size: 16px; line-height: 1.5; font-weight: 300; color: var(--d-navy); }
.gd4d-quotes figcaption { font-size: 13px; font-weight: 600; color: var(--d-navy); }
.gd4d-quotes figcaption span { display: block; font-weight: 400; color: var(--gd4-muted); }

/* closing: navy band */
/* the deeper plum plus a gold edge keeps the band distinct from the plum site footer below */
.gd4d-cta { margin-top: var(--gd4-section); border-bottom: 2px solid var(--d-gold); padding: var(--s8) 0; background: var(--d-navy-2); color: #ffffff; }
.gd4d-cta-grid { display: grid; grid-template-columns: 1fr; gap: var(--s6); align-items: center; }
.gd4d-cta-h { margin: 0 0 var(--s3); font-size: 28px; line-height: 1.2; font-weight: 300; letter-spacing: -.01em; color: #ffffff; }
.gd4d-cta p { margin: 0; color: rgba(255, 255, 255, .92); }
.gd4d-contact { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-top: var(--s3) !important; }
.gd4d-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--d-gold-lt); text-underline-offset: 5px; }
.gd4d-cta-actions { display: flex; flex-direction: column; gap: var(--s3); }
.gd4d-cta-actions .gd4-btn { width: 100%; }

/* small phones: the four guest pills stay on one line */
@media (max-width: 374px) {
	.gd4d-pills { gap: var(--s1); }
	.gd4--d .gd4-chip.gd4d-pill { padding: 0 2px; }
	.gd4d-pill-n { font-size: 15px; }
}
@media (max-width: 339px) {
	.gd4d-pill-n { font-size: 14px; }
	.gd4d-pill-u { font-size: 10px; letter-spacing: .06em; }
}

/* short phones (SE, 320s): a thinner photo strip keeps the guest pills on the first screen */
@media (max-width: 639px) and (max-height: 760px) {
	.gd4d-intro-img { height: clamp(88px, 26vw, 140px); }
	.gd4d-intro-text { padding-top: var(--s4); }
	.gd4d-tagline { font-size: 17px; }
}

@media (min-width: 480px) {
	.gd4d-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
	.gd4d-pill-n { font-size: 17px; }
	.gd4d-occ-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); overflow: visible; padding-bottom: 0; }
	.gd4d-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
	.gd4d-steps li { grid-template-columns: 1fr; row-gap: var(--s3); }
	.gd4d-steps li > :not(.gd4d-n) { grid-column: 1; }
	.gd4d-intro-actions { max-width: 360px; }
	.gd4d-cta-actions { flex-direction: row; flex-wrap: wrap; }
	.gd4d-cta-actions .gd4-btn { width: auto; }
}

@media (min-width: 900px) {
	/* about half a screen: enough for the photo to sell it, short enough that the finder starts on the first screen */
	.gd4d-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(440px, 58vh, 580px); }
	.gd4d-intro-img { grid-column: 2; grid-row: 1; height: 100%; }
	.gd4d-lede { padding-top: var(--s8); }
	.gd4d-lede-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gd4d-lede-grid p { margin: 0; }
	.gd4d-intro-text { grid-column: 1; grid-row: 1; align-self: center; padding: var(--s7) var(--s8) var(--s7) max(var(--gd4-pad), calc((100vw - 1120px) / 2)); }
	.gd4d-title { font-size: 44px; }
	.gd4d-tagline { font-size: 22px; max-width: 24em; }
	.gd4d-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); padding: var(--s6); }
	/* one column per box, so the template (no placeholder quotes) gets two and the preview three */
	.gd4d-info-grid { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.gd4d-info .gd4d-box + .gd4d-box { border-top: 0; border-left: 1px solid var(--d-line); }
	.gd4d-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gd4d-cta-grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); }
	.gd4d-cta-h { font-size: 34px; }
}

@media (min-width: 1100px) {
	.gd4d-occ-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Brochures, always on show: a strip of restaurant chips above the results (the picked restaurant's chip fills
   plum and moves to the front) and a band of cards after the featured venues. Both read the same items. */
.gd4-brochures { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border: 1px solid #e3d6cc; border-radius: 6px; background: #faf6f1; }
.gd4-bro-h { display: inline-flex; align-items: center; gap: var(--s2); margin-right: var(--s2); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--d-navy); }
.gd4-bro-h svg { color: var(--d-gold-ink); }
.gd4-brochure { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--s4); border: 1px solid var(--d-navy); border-radius: 22px; background: #ffffff; color: var(--d-navy); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; }
.gd4-brochure:hover, .gd4-brochure.is-on { background: var(--d-navy); color: #ffffff; }
.gd4d-brochures { background: #f7f1ea; padding: var(--gd4-section) 0; }
.gd4d-bro-lede { max-width: 640px; margin: calc(var(--s4) * -1) auto var(--s5); text-align: center; font-size: 15px; line-height: 1.5; color: #4a423c; }
.gd4d-bro-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.gd4d-bro { display: flex; align-items: center; gap: var(--s3); min-height: 72px; height: 100%; padding: var(--s3) var(--s4); border: 1px solid #e3d6cc; border-radius: 6px; background: #ffffff; color: var(--d-navy); text-decoration: none; }
.gd4d-bro:hover { border-color: var(--d-gold); box-shadow: 0 0 0 2px var(--d-gold); }
.gd4d-bro svg { flex: none; color: var(--d-gold-ink); }
.gd4d-bro-name { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.gd4d-bro-sub { display: block; margin-top: 3px; font-size: 12px; color: #6b6259; }
@media (min-width: 700px) { .gd4d-bro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gd4d-bro-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .gd4d-bro { flex-direction: column; align-items: flex-start; gap: var(--s2); min-height: 0; padding: var(--s4); } }

/* Hero: what the page holds, and the first decision (guest numbers) without scrolling */
.gd4d-facts { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: var(--s3) 0 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #ffffff; }
.gd4d-facts span { white-space: nowrap; }
.gd4d-facts span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 var(--s4) 0 0; border-radius: 50%; background: var(--d-gold-lt); vertical-align: middle; }
/* phones: the two facts stack, so the dot never starts a line */
@media (max-width: 639px) { .gd4d-facts { flex-direction: column; } .gd4d-facts span + span::before { display: none; } }
/* features alone in the white panel now that guests are asked in the hero */
.gd4d-panel--feats { margin-top: var(--s7); }
@media (min-width: 900px) { .gd4d-panel.gd4d-panel--feats { grid-template-columns: 1fr; } }
.gd4d-quick { margin-top: var(--s5); }
.gd4d-quick-h { margin: 0 0 var(--s2); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--d-gold-lt); }
.gd4d-pills--hero { max-width: 480px; margin: 0; }
.gd4--d .gd4-chip.gd4d-pill--hero { height: auto; min-height: 52px; padding: var(--s1) 2px; white-space: normal; text-align: center; background: transparent; border-color: rgba(255, 255, 255, .6); color: #ffffff; }
.gd4--d .gd4-chip.gd4d-pill--hero:hover { border-color: var(--d-gold-lt); background: var(--d-navy-2); color: #ffffff; }
.gd4--d .gd4-chip.gd4d-pill--hero[aria-pressed="true"] { background: var(--d-gold); border-color: var(--d-gold); color: var(--d-navy); }
.gd4d-intro .gd4d-intro-actions { margin-top: var(--s5); }