/* === SkyCity Global Stylesheet - site.css === */

/* ── Design tokens ───────────────────────────────────────── */
:root {
	/* Brand Gold */
	--sc-gold:             #DCB741;
	--sc-gold-80:          #E3C567;   /* button hover */
	--sc-gold-60:          #EAD48D;
	--sc-gold-40:          #F1E2B3;   /* button disabled */
	--sc-gold-active:      #B8943E;   /* button pressed */

	/* Brand Plum - dark brand SURFACE. Black #000 is online-casino UI only - never a brand surface. */
	--sc-plum:             #440B22;
	--sc-plum-80:          #693C4E;
	--sc-plum-60:          #8F6D7A;
	--sc-plum-40:          #B49DA7;
	--sc-plum-20:          #DACED3;

	/* Brand Red + functional (success/error for form validation only) */
	--sc-red:              #E0373F;
	--sc-alert:            #C8102E;   /* emergency / warning banner (sc-alert) */
	--sc-success:          #52AE32;
	--sc-error:            #E94F3D;

	/* Text / neutrals - --sc-dark retired: text uses --sc-text, dark surfaces use --sc-plum */
	--sc-text:             #333333;
	--sc-white:            #ffffff;
	/* One cream for both the FAQ surface and hotel card body - consume the token, never write the #F8F4E8 literal */
	--sc-cream:            #F8F4E8;
	/* FAQ role token kept separate so it can diverge. Must stay OPAQUE - it sits on grey and on white. */
	--sc-faq-surface:      var(--sc-cream);
	--sc-bg:               #ffffff;
	--sc-nav-height:       64px;
	--sc-search-height:    48px;
	--sc-alert-height:     var(--sc-search-height); /* alert band height = search bar; reserved only when an alert is present */
	--sc-breadcrumb-height: 0px;
	--sc-r20-height:       0px;
	--sc-max-width:        1400px;
	--sc-radius-card:      14px;
	--sc-radius-btn:       100px;
	--sc-font:             'Montserrat', sans-serif;

	/* Display font - Specter Black (Adobe kit bsg2bme) */
	--sc-font-display:     'specter', var(--sc-font);

	/* Plum gradient - ONE definition; use .sc-surface--grad or var(--sc-grad-plum), never a new gradient literal.
	   OPAQUE stops only (rgba renders differently on white/cream/plum). Stops in own var so angle modifiers reuse them. */
	--sc-grad-plum-stops:  #52152F 0%, #3A0C1F 45%, #1C0309 100%;
	--sc-grad-plum:        linear-gradient(180deg, var(--sc-grad-plum-stops));
}

/* ── Reset / base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Reduced motion: no smooth scroll. JS calls that hard-code 'smooth' must gate too - explicit 'smooth' overrides this. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	font-family: var(--sc-font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sc-text);
	background: var(--sc-bg);
	padding-top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-breadcrumb-height) + var(--sc-r20-height));
}

/* Alert banner present: reserve the taller fixed header. :has() kept in its own block. */
body:has(.sc-alert) {
	padding-top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-alert-height) + var(--sc-breadcrumb-height) + var(--sc-r20-height));
}

/* Breadcrumb renders inside fixed .sc-nav, so reserve its height. :has() in its own block. Not scoped away from
   branded pages (.sc-nav is opaque). Known limit: a crumb trail wrapping to two lines under-reserves. */
body:has(.sc-breadcrumb) {
	--sc-breadcrumb-height: 48px;
}

img, video, svg { max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ── Accessibility ───────────────────────────────────────── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.sc-skip-link {
	position: fixed;
	top: -100%;
	left: 1rem;
	z-index: 9999;
	padding: .5rem 1rem;
	background: var(--sc-plum);
	color: var(--sc-white);
	font-weight: 700;
	font-size: .875rem;
	border-radius: 0 0 var(--sc-radius-card) var(--sc-radius-card);
	text-decoration: none;
	transition: top .2s;
}

.sc-skip-link:focus { top: 0; outline: 2px solid var(--sc-gold); outline-offset: 2px; }

/* ── Buttons ─────────────────────────────────────────────── */
.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .875rem 2.25rem;
	border: 2px solid transparent;
	border-radius: var(--sc-radius-btn);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .107em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s, background .2s, color .2s, border-color .2s;
	white-space: nowrap;
}

.sc-btn:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }

/* Brand-mandated WCAG exception: white on gold #DCB741 = 1.93:1, signed off by brand owner.
   Do NOT darken the label or change the gold. Focus ring uses plum because gold-on-white was too low. */
.sc-btn--gold    { background: var(--sc-gold); color: var(--sc-white); border-color: var(--sc-gold); }
.sc-btn--gold:hover  { background: var(--sc-gold-80); }
.sc-btn--gold:active { background: var(--sc-gold-active); }
.sc-btn--gold:disabled,
.sc-btn--gold[aria-disabled="true"] { background: var(--sc-gold-40); cursor: not-allowed; }
.sc-btn--outline { background: transparent; color: var(--sc-plum); border-color: var(--sc-plum); }
.sc-btn--outline:hover { background: var(--sc-plum); color: var(--sc-white); }
.sc-btn--dark    { background: var(--sc-plum); color: var(--sc-white); border-color: var(--sc-plum); }
.sc-btn--dark:hover { opacity: .9; }

/* -- .sc-btn--book: in-content booking CTA (.sc-restaurant-overview__ctas only); header CTA stays .sc-btn--gold --
   Colour-identical to .sc-btn--dark on purpose (distinct role). Hover is opacity because the base is already plum. */
.sc-btn--book {
	--sc-btn-book-bg: var(--sc-plum);
	background: var(--sc-btn-book-bg);
	color: var(--sc-white);
	border-color: var(--sc-btn-book-bg);
}
.sc-btn--book:hover { opacity: .9; }
.sc-btn--book:focus-visible { outline-color: var(--sc-plum); }

/* Booking glyph: size with font-size, never width/height; drop opsz with it or it renders at 24px stroke weight. */
.sc-btn__icon {
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
	font-variation-settings: 'opsz' 20;
}

/* ── Layout helpers ──────────────────────────────────────── */
.sc-container { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; }
.sc-section { padding: 4rem 0; }
.sc-section--tight { padding: 2.5rem 0; }
.sc-section--dark { background: var(--sc-plum); color: var(--sc-white); }
.sc-section--gold { background: var(--sc-gold); color: var(--sc-text); }
.sc-section--grey { background: #f5f5f5; }

/* -- Plum gradient surface utility -- restates its own foregrounds (sits outside .sc-blk--bg-* / .sc-section--dark).
   Body copy uses opaque --sc-plum-20, never rgba white. Angle is a modifier, not a second token. */
.sc-surface--grad {
	background: var(--sc-grad-plum);
	color: var(--sc-plum-20);
}
.sc-surface--grad-diag { background: linear-gradient(135deg, var(--sc-grad-plum-stops)); }

/* Tier 1 defaults: :where() holds (0,1,0) so components on the band still win. p/li omitted on purpose (inherit).
   Each :where() rule in its OWN block - an engine that can't parse :where() drops the whole comma group. */
.sc-surface--grad :where(h1, h2, h3, h4, h5, h6) { color: var(--sc-white); }
.sc-surface--grad :where(a) { color: var(--sc-gold); }
.sc-surface--grad :where(a):hover { color: var(--sc-gold-80); }

/* Tier 2 real overrides at (0,2,0) - must win. Shared primitives only; consumers must check their own component foregrounds. */
/* .sc-section__eyebrow hard-codes plum (invisible on plum) - shared primitive, so it lives in this tier. */
.sc-surface--grad .sc-section__eyebrow { color: var(--sc-gold); }
.sc-surface--grad .sc-section-heading__title { color: var(--sc-white); }
.sc-surface--grad .sc-section-heading__eyebrow { color: var(--sc-gold); }
.sc-surface--grad .sc-section-heading__subtitle { color: var(--sc-plum-20); }
.sc-surface--grad .sc-prose a,
.sc-surface--grad .sc-rte a { color: var(--sc-gold); }
.sc-surface--grad .sc-btn--outline { color: var(--sc-white); border-color: var(--sc-white); }
.sc-surface--grad .sc-btn--outline:hover { background: var(--sc-white); color: var(--sc-plum); }
.sc-surface--grad .sc-btn:focus-visible { outline-color: var(--sc-gold); }

/* -- Page background -- base .sc-section is transparent so the per-page background (set on <main>) shows through. */
.sc-page-bg { width: 100%; }

/* ── Section heading ─────────────────────────────────────── */
.sc-section-heading { text-align: center; margin-bottom: 2.5rem; }
.sc-section-heading__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .5rem; }
.sc-section-heading__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: .75rem; }
.sc-section-heading__subtitle { font-size: 1.0625rem; color: rgba(0,0,0,.6); max-width: 640px; margin: 0 auto; line-height: 1.65; }
.sc-section--dark .sc-section-heading__subtitle { color: rgba(255,255,255,.6); }

/* ── Prose ───────────────────────────────────────────────── */
.sc-prose { max-width: 780px; }
/* .sc-prose--wide has no callers - deliberately kept for a future full-width page; do not delete. */
.sc-prose--wide { max-width: none; }
.sc-prose h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.sc-prose h3 { font-size: 1.1875rem; margin: 1.5rem 0 .5rem; }
.sc-prose p { line-height: 1.75; margin-bottom: 1.1rem; }
.sc-prose a { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-prose ul, .sc-prose ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 1rem; }
.sc-prose li { margin-bottom: .375rem; line-height: 1.65; }
.sc-prose img { border-radius: var(--sc-radius-card); margin: 1.5rem 0; }

/* ── RTE prose styles (sc-rte class applied to rich text output divs) ─── */
.sc-rte h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.sc-rte h3 { font-size: 1.1875rem; margin: 1.5rem 0 .5rem; }
.sc-rte h4 { font-size: 1.0625rem; margin: 1.25rem 0 .375rem; }
.sc-rte p { line-height: 1.75; margin-bottom: 1.1rem; }
.sc-rte a { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-rte ul, .sc-rte ol { list-style: revert; padding-left: 1.5rem; margin-bottom: 1rem; }
/* ol[type] fix: (0,2,1) beats every wrapper `ol { list-style: revert }` (0,1,1) regardless of file order.
   The `s`-flag rules MUST stay separate rules - Chrome rejects the s flag and drops the whole rule. */
:is(.sc-rte, .sc-prose, .sc-tcs__body, .sc-faq__answer, .sc-visit-hub__answer-body, .sc-article-body__inner) ol[type="a"] { list-style-type: lower-alpha; }
:is(.sc-rte, .sc-prose, .sc-tcs__body, .sc-faq__answer, .sc-visit-hub__answer-body, .sc-article-body__inner) ol[type="i"] { list-style-type: lower-roman; }
:is(.sc-rte, .sc-prose, .sc-tcs__body, .sc-faq__answer, .sc-visit-hub__answer-body, .sc-article-body__inner) ol[type="A" s] { list-style-type: upper-alpha; }
:is(.sc-rte, .sc-prose, .sc-tcs__body, .sc-faq__answer, .sc-visit-hub__answer-body, .sc-article-body__inner) ol[type="I" s] { list-style-type: upper-roman; }
.sc-rte li { margin-bottom: .375rem; line-height: 1.65; }

/* RTE inline buttons: .sc-rte a (0,1,1) beats .sc-btn--gold's colour; .sc-rte a.sc-btn (0,2,1) restores the buttons. */
.sc-rte a.sc-btn { text-decoration: none; }
.sc-rte a.sc-btn--gold { color: var(--sc-white); }
.sc-rte a.sc-btn--gold:hover { color: var(--sc-white); }
.sc-rte a.sc-btn--outline { color: var(--sc-plum); }
.sc-rte a.sc-btn--outline:hover { color: var(--sc-white); }
.sc-rte a.sc-btn--dark { color: var(--sc-white); }
.sc-rte a.sc-btn--dark:hover { color: var(--sc-white); }

/* ── RTE button style ─────────────────────────────────────── */
.btn a,
a .btn,
a.btn,
.sc-prose .btn a,
.sc-prose a .btn,
.sc-container .btn a,
.sc-container a .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.75rem;
	background: var(--sc-gold);
	color: var(--sc-text) !important;
	border: 2px solid var(--sc-gold);
	border-radius: var(--sc-radius-btn);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: opacity .2s;
	white-space: nowrap;
	margin: .25rem 0;
}
.btn a:hover, a .btn:hover, a.btn:hover,
.sc-prose .btn a:hover, .sc-prose a .btn:hover,
.sc-container .btn a:hover, .sc-container a .btn:hover { opacity: .88; }

.btn-outline a,
a .btn-outline,
a.btn-outline,
.sc-prose .btn-outline a,
.sc-prose a .btn-outline,
.sc-container .btn-outline a,
.sc-container a .btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.75rem;
	background: transparent;
	color: var(--sc-plum) !important;
	border: 2px solid var(--sc-gold);
	border-radius: var(--sc-radius-btn);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .2s, color .2s;
	white-space: nowrap;
	margin: .25rem 0;
}
.btn-outline a:hover, a .btn-outline:hover, a.btn-outline:hover,
.sc-prose .btn-outline a:hover, .sc-prose a .btn-outline:hover,
.sc-container .btn-outline a:hover, .sc-container a .btn-outline:hover {
	background: var(--sc-gold);
	color: var(--sc-text) !important;
}

/* -- RTE display classes .lead/.small/.callout/.regulatory -- site.css is the OWNER; rte-styles.css is the editor
   MIRROR (literals, no var()) - change one, change the other. Scoped to .sc-rte on purpose. RTE .btn dark-on-gold is deliberate. */
.sc-rte .lead {
	font-size: 1.125rem;
	line-height: 1.75;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.7);
}

.sc-rte .small {
	font-size: .8125rem;
	color: rgba(0, 0, 0, 0.55);
	line-height: 1.6;
}

/* Callout bg is translucent gold 10% - must stay rgba, not var(--sc-gold). The border is the token. */
.sc-rte .callout {
	background: rgba(220, 183, 65, 0.1);
	border-left: 3px solid var(--sc-gold);
	padding: 1rem 1.25rem;
	border-radius: 0 8px 8px 0;
	margin: 1rem 0;
}

.sc-rte .regulatory {
	font-size: .8125rem;
	color: rgba(0, 0, 0, 0.45);
	font-style: italic;
	line-height: 1.6;
}

/* ── Map ─────────────────────────────────────────────────── */
.sc-map-block { border-radius: var(--sc-radius-card); overflow: hidden; }
.sc-map { width: 100%; height: 400px; display: block; }

/* === R20 BAR === */

.sc-r20 {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1001;
	height: 36px;
	background: #111;
	border-bottom: 1px solid rgba(220,183,65,.25);
	display: flex;
	align-items: center;
}

.sc-r20__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 40px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sc-r20__left { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.sc-r20__icon { flex-shrink: 0; color: var(--sc-gold); }
.sc-r20__message { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-gold); white-space: nowrap; }
.sc-r20__detail { font-size: .6875rem; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-r20__detail a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .15s; }
.sc-r20__detail a:hover, .sc-r20__detail a:focus-visible { color: var(--sc-gold); outline: none; }
.sc-r20__right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.sc-r20__age { font-size: .6875rem; font-weight: 600; color: rgba(255,255,255,.4); letter-spacing: .04em; white-space: nowrap; }
.sc-r20__dismiss { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: none; border: none; color: rgba(255,255,255,.35); cursor: pointer; padding: 0; border-radius: 50%; transition: color .15s, background .15s; flex-shrink: 0; }
.sc-r20__dismiss:hover, .sc-r20__dismiss:focus-visible { color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); outline: none; }

/* === NAV === */

.sc-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(220,183,65,.18);
	display: flex;
	flex-direction: column;
}

.sc-nav__inner {
	display: flex;
	align-items: center;
	height: var(--sc-nav-height);
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
	gap: 2rem;
}

.sc-nav__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; }
.sc-nav__logo img { height: 36px; width: auto; display: block; }

.sc-nav__links {
	display: flex;
	align-items: center;
	gap: 40px;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
}

.sc-nav__link {
	display: flex;
	align-items: center;
	height: var(--sc-nav-height);
	color: #666;
	text-decoration: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .3s, border-color .3s;
}

.sc-nav__link:hover,
.sc-nav__link:focus-visible { color: var(--sc-plum); border-bottom-color: var(--sc-gold); outline: none; }
.sc-nav__link.is-active     { color: var(--sc-plum); border-bottom-color: var(--sc-gold); }

.sc-nav__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.sc-nav__login-btn {
	font-size: .75rem;
	padding: .45rem 1.1rem;
	letter-spacing: .06em;
	color: var(--sc-text);
	border-color: rgba(68,11,34,.25);
}
.sc-nav__login-btn:hover { background: var(--sc-plum); color: var(--sc-white); border-color: var(--sc-plum); }

/* SHOW by SkyCity logo login (desktop nav) — borderless image link */
.sc-nav__login-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: none;
	background: none;
	border-radius: 4px;
	text-decoration: none;
	transition: opacity .2s;
}
.sc-nav__login-logo:hover { opacity: .75; }
.sc-nav__login-logo:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; opacity: 1; }
.sc-nav__login-logo-img { height: 30px; width: auto; display: block; }
.sc-nav__login-logo-img--light { display: none; }

.sc-nav__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 2.25rem; height: 2.25rem; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; flex-shrink: 0; }
.sc-nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--sc-text); border-radius: 2px; transition: transform .25s, opacity .25s; }
.sc-nav__hamburger:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }

.sc-nav__search-bar {
	height: var(--sc-search-height);
	background: #f4f4f4;
	border-top: 1px solid rgba(0,0,0,.06);
	display: flex;
	align-items: center;
}

.sc-nav__search-form {
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
}

.sc-nav__search-icon { color: #999; flex-shrink: 0; }

.sc-nav__search-input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--sc-font);
	font-size: .875rem;
	color: var(--sc-text);
	outline: none;
	min-width: 0;
}

.sc-nav__search-input::placeholder { color: #aaa; }

/* -- Search clear button -- hide the native search cancel; replaced by #sc-search-clear (native is not keyboard-focusable). */
.sc-nav__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.sc-nav__search-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #999;
	cursor: pointer;
	line-height: 0;
	transition: color .2s, background .2s;
}

.sc-nav__search-clear .material-symbols-outlined { font-size: 18px; }
.sc-nav__search-clear:hover { color: var(--sc-plum); background: rgba(0,0,0,.06); }
.sc-nav__search-clear:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 2px; }

/* MUST come after the display rule above - an author display value beats the UA [hidden] rule. */
.sc-nav__search-clear[hidden] { display: none; }

.sc-nav__search-submit {
	font-size: .75rem;
	padding: .4rem 1.1rem;
	letter-spacing: .06em;
	flex-shrink: 0;
}

.sc-nav__item { list-style: none; }
.sc-nav__item--dropdown { position: relative; }

.sc-nav__dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	height: var(--sc-nav-height);
	color: #666;
	background: none;
	border: none;
	font-family: var(--sc-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .3s, border-color .3s;
	cursor: pointer;
	padding: 0;
}

.sc-nav__dropdown-toggle:hover,
.sc-nav__dropdown-toggle:focus-visible { color: var(--sc-plum); border-bottom-color: var(--sc-gold); outline: none; }
.sc-nav__dropdown-toggle.is-active     { color: var(--sc-plum); border-bottom-color: var(--sc-gold); }

.sc-nav__chevron { margin-top: 1px; flex-shrink: 0; transition: transform .25s; }
.sc-nav__dropdown-toggle[aria-expanded="true"] .sc-nav__chevron { transform: rotate(180deg); }

.sc-nav__dropdown {
	position: absolute;
	top: calc(var(--sc-nav-height) - 2px);
	right: -1rem;
	width: 420px;
	z-index: 999;
	background: var(--sc-white);
	border: 1px solid rgba(220,183,65,.2);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,.12);
	animation: sc-dropdown-in .2s ease;
}

.sc-nav__dropdown[hidden] { display: none; }

@keyframes sc-dropdown-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sc-nav__dropdown-inner { padding: 1.25rem 1.25rem 1rem; }
.sc-nav__dropdown-eyebrow { font-size: .625rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--sc-plum); margin: 0 0 1rem; }
.sc-nav__dropdown-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-bottom: 1.125rem; }

.sc-nav__dropdown-card {
	display: block;
	padding: 1.125rem 1.25rem;
	background: #f9f6f1;
	border: 1px solid rgba(220,183,65,.15);
	border-radius: 8px;
	text-decoration: none;
	color: var(--sc-text);
	transition: border-color .2s, background .2s;
}

.sc-nav__dropdown-card:hover { background: #f5ede0; border-color: rgba(220,183,65,.4); }
.sc-nav__dropdown-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-nav__dropdown-card-icon { font-size: 1.25rem; line-height: 1; display: block; margin-bottom: .625rem; }
.sc-nav__dropdown-card-title { display: block; font-size: .75rem; font-weight: 700; color: var(--sc-text); margin: 0 0 .3rem; }
.sc-nav__dropdown-card-desc { font-size: .6875rem; color: #6b5f50; line-height: 1.55; margin: 0; }
.sc-nav__dropdown-card-cta { display: block; font-size: .625rem; font-weight: 600; color: var(--sc-plum); margin-top: .5rem; }

.sc-nav__dropdown-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid rgba(220,183,65,.15); flex-wrap: wrap; }
.sc-nav__dropdown-tcs { font-size: .6875rem; color: #a09080; margin: 0; }
.sc-nav__dropdown-full-guide { font-size: .6875rem; font-weight: 700; color: var(--sc-plum); text-decoration: none; white-space: nowrap; transition: opacity .2s; }
.sc-nav__dropdown-full-guide:hover { opacity: .75; }

/* Plan Your Visit hub dropdown shell */
.sc-nav__dropdown--hub { width: 420px; }

/* Visit Quick Links — single-column accordion (page + nav-dropdown contexts) */
.sc-visit-hub__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.sc-visit-hub__item {
	border: 1px solid rgba(220,183,65,.22);
	border-radius: 10px;
	overflow: hidden;
	background: var(--sc-white);
	transition: border-color .2s, background .2s;
}
.sc-visit-hub__item:has(.sc-visit-hub__question[aria-expanded="true"]) {
	border-color: var(--sc-gold);
	background: #fbf8f2;
}
.sc-visit-hub__question {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.125rem;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--sc-font);
	font-size: 1rem;
	font-weight: 600;
	color: var(--sc-text);
	cursor: pointer;
	transition: color .2s, background .2s;
}
.sc-visit-hub__question:hover { color: var(--sc-plum); background: rgba(220,183,65,.06); }
.sc-visit-hub__question:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: -2px; }
.sc-visit-hub__question[aria-expanded="true"] { color: var(--sc-plum); }
.sc-visit-hub__icon { font-size: 1.5rem; line-height: 1; color: var(--sc-gold); flex-shrink: 0; }
.sc-visit-hub__question-text { flex: 1; line-height: 1.35; }
.sc-visit-hub__chevron { font-size: 1.25rem; line-height: 1; color: var(--sc-gold); flex-shrink: 0; transition: transform .25s; }
.sc-visit-hub__question[aria-expanded="true"] .sc-visit-hub__chevron { transform: rotate(180deg); }
.sc-visit-hub__answer {
	padding: 0 1.125rem 1.125rem;
	font-size: .9375rem;
	line-height: 1.7;
	color: rgba(0,0,0,.72);
}
.sc-visit-hub__answer[hidden] { display: none; }
.sc-visit-hub__answer-body p { margin: 0 0 .5rem; }
.sc-visit-hub__answer-body p:last-child { margin-bottom: 0; }
.sc-visit-hub__answer-body a { color: var(--sc-plum); text-decoration: underline; }
/* RTE answer lists — restore markers stripped by the global reset (not .sc-rte). */
.sc-visit-hub__answer-body ul, .sc-visit-hub__answer-body ol { list-style: revert; padding-left: 1.25rem; margin: 0 0 .5rem; }
.sc-visit-hub__answer-body li { margin-bottom: .25rem; }
.sc-visit-hub__answer-body ul:last-child, .sc-visit-hub__answer-body ol:last-child { margin-bottom: 0; }
.sc-visit-hub__cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .75rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-plum);
	text-decoration: none;
	transition: opacity .2s;
}
.sc-visit-hub__cta:hover { opacity: .75; }
.sc-visit-hub__cta-arrow { font-size: 1.125rem; line-height: 1; transition: transform .2s; }
.sc-visit-hub__cta:hover .sc-visit-hub__cta-arrow { transform: translateX(2px); }

/* Compact modifier — used inside the nav dropdown */
.sc-visit-hub__list--compact { gap: .375rem; margin-bottom: .25rem; }
.sc-visit-hub__list--compact .sc-visit-hub__item { border-radius: 8px; border-color: rgba(220,183,65,.18); }
.sc-visit-hub__list--compact .sc-visit-hub__question { gap: .75rem; padding: .75rem .875rem; font-size: .8125rem; }
.sc-visit-hub__list--compact .sc-visit-hub__icon { font-size: 1.25rem; }
.sc-visit-hub__list--compact .sc-visit-hub__chevron { font-size: 1.125rem; }
.sc-visit-hub__list--compact .sc-visit-hub__answer { padding: 0 .875rem .875rem; font-size: .75rem; line-height: 1.6; }
.sc-visit-hub__list--compact .sc-visit-hub__cta { margin-top: .65rem; font-size: .6875rem; }
.sc-visit-hub__list--compact .sc-visit-hub__cta-arrow { font-size: 1rem; }

/* More dropdown — simple vertical link list (reuses .sc-nav__dropdown shell) */
.sc-nav__dropdown--more { width: 240px; }
.sc-nav__more-list { list-style: none; margin: 0; padding: .5rem 0; }
.sc-nav__more-list li { margin: 0; }
.sc-nav__more-link {
	display: block;
	padding: .65rem 1.25rem;
	color: var(--sc-text);
	text-decoration: none;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background .2s, color .2s;
}
.sc-nav__more-link:hover,
.sc-nav__more-link:focus-visible {
	background: #f9f6f1;
	color: var(--sc-plum);
	outline: none;
}
.sc-nav__more-link.is-active { color: var(--sc-plum); }

/* === MOBILE DRAWER === */

.sc-drawer {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	background: var(--sc-plum);
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
	visibility: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* LOAD-BEARING a11y fix: visibility 0s on the OPEN state lets openDrawer() focus the close button instantly;
   the base visibility .3s still governs closing. Not duplication - do not move onto .sc-drawer or delete. */
.sc-drawer[aria-hidden="false"] { transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s; transform: translateX(0); visibility: visible; }
/* Header mirrors the <=1024px nav grid so the burger turns into close in place. Children placed explicitly by grid-column
   (DOM-order independent); column 3 deliberately empty. */
.sc-drawer__header { display: grid; grid-template-columns: 2.25rem 1fr 2.25rem; align-items: center; gap: 0; flex-shrink: 0; height: var(--sc-nav-height); padding: 0 1rem; border-bottom: 1px solid rgba(220,183,65,.2); }
.sc-drawer__logo { grid-column: 2; justify-self: center; display: flex; align-items: center; text-decoration: none; }
.sc-drawer__logo img { height: 32px; width: auto; }
.sc-drawer__close { grid-column: 1; justify-self: center; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: none; border: none; color: rgba(255,255,255,.85); cursor: pointer; border-radius: 50%; transition: color .2s, background .2s; padding: 0; }
.sc-drawer__close:hover, .sc-drawer__close:focus-visible { color: var(--sc-gold); background: rgba(220,183,65,.1); outline: none; }
.sc-drawer__nav { flex: 1; padding: .5rem 0; }
.sc-drawer__links { list-style: none; margin: 0; padding: 0; }

.sc-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .03em;
	border-bottom: 1px solid rgba(255,255,255,.06);
	transition: color .2s, background .2s;
}

.sc-drawer__link:hover, .sc-drawer__link:focus-visible { color: var(--sc-gold); background: rgba(220,183,65,.06); outline: none; }
.sc-drawer__link.is-active { color: var(--sc-gold); border-left: 3px solid var(--sc-gold); padding-left: calc(1.5rem - 3px); }
.sc-drawer__link svg { flex-shrink: 0; opacity: .4; transition: opacity .2s, transform .2s; }
.sc-drawer__link:hover svg, .sc-drawer__link.is-active svg { opacity: 1; transform: translateX(3px); }
.sc-drawer__footer { flex-shrink: 0; padding: 1.25rem 1.5rem; border-top: 1px solid rgba(220,183,65,.2); display: flex; flex-direction: column; gap: .75rem; }
.sc-drawer__show-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; text-align: center; }

/* Drawer "More" submenu (accordion) */
.sc-drawer__item--has-submenu { list-style: none; }
.sc-drawer__submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.5rem;
	background: none;
	border: none;
	color: rgba(255,255,255,.85);
	font-family: var(--sc-font);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-align: left;
	border-bottom: 1px solid rgba(255,255,255,.06);
	cursor: pointer;
	transition: color .2s, background .2s;
}
.sc-drawer__submenu-toggle:hover,
.sc-drawer__submenu-toggle:focus-visible {
	color: var(--sc-gold);
	background: rgba(220,183,65,.06);
	outline: none;
}
.sc-drawer__submenu-chevron {
	flex-shrink: 0;
	opacity: .4;
	transition: transform .25s, opacity .2s;
}
.sc-drawer__submenu-toggle:hover .sc-drawer__submenu-chevron,
.sc-drawer__submenu-toggle[aria-expanded="true"] .sc-drawer__submenu-chevron { opacity: 1; }
.sc-drawer__submenu-toggle[aria-expanded="true"] .sc-drawer__submenu-chevron { transform: rotate(180deg); }
.sc-drawer__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	background: rgba(0,0,0,.2);
	transition: max-height .3s ease;
}
.sc-drawer__submenu.is-open { max-height: 800px; }
.sc-drawer__sublink {
	display: block;
	padding: .85rem 1.5rem .85rem 2.5rem;
	color: rgba(255,255,255,.75);
	text-decoration: none;
	font-size: .9375rem;
	font-weight: 500;
	border-bottom: 1px solid rgba(255,255,255,.04);
	transition: color .2s, background .2s;
}
.sc-drawer__sublink:hover,
.sc-drawer__sublink:focus-visible {
	color: var(--sc-gold);
	background: rgba(220,183,65,.06);
	outline: none;
}
.sc-drawer__sublink.is-active { color: var(--sc-gold); }
.sc-drawer__search-form { display: flex; gap: .5rem; }
.sc-drawer__search-input { flex: 1; height: 2.75rem; padding: 0 1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(220,183,65,.4); border-radius: var(--sc-radius-btn); color: var(--sc-white); font-family: var(--sc-font); font-size: .9375rem; }
.sc-drawer__search-input::placeholder { color: rgba(255,255,255,.45); }
.sc-drawer__search-input:focus { outline: none; border-color: var(--sc-gold); background: rgba(255,255,255,.1); }
.sc-drawer__search-submit { height: 2.75rem; padding: 0 1.1rem; background: rgba(255,255,255,.1); color: var(--sc-white); border: 1px solid rgba(255,255,255,.2); border-radius: var(--sc-radius-btn); font-family: var(--sc-font); font-weight: 600; font-size: .875rem; cursor: pointer; transition: background .2s; }
.sc-drawer__search-submit:hover { background: rgba(255,255,255,.16); }

/* === FOOTER === */

/* Footer: plum gradient surface. Every foreground is OPAQUE on purpose - an rgba alpha shifts over a gradient. */
.sc-footer { background: var(--sc-grad-plum); color: var(--sc-plum-20); font-size: .875rem; margin-top: auto; }

.sc-footer__main {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 3.5rem 1.5rem 2.5rem;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2.5rem 3rem;
}

.sc-footer__heading { color: var(--sc-gold); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; }
.sc-footer__logo { display: inline-block; margin-bottom: 1rem; }
.sc-footer__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.sc-footer__tagline { margin: 0 0 1.25rem; line-height: 1.6; max-width: 260px; color: var(--sc-plum-20); }
.sc-footer__social { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.sc-footer__social-link { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7); text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.sc-footer__social-link:hover, .sc-footer__social-link:focus-visible { border-color: var(--sc-gold); color: var(--sc-gold); background: rgba(220,183,65,.08); outline: none; }
.sc-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.sc-footer__link { color: var(--sc-plum-20); text-decoration: none; line-height: 1.4; transition: color .2s; }
.sc-footer__link:hover, .sc-footer__link:focus-visible { color: var(--sc-gold); outline: none; }
.sc-footer__address { font-style: normal; line-height: 1.7; margin-top: .25rem; }
.sc-footer__address a { color: var(--sc-plum-20); text-decoration: none; transition: color .2s; }
.sc-footer__address a:hover { color: var(--sc-gold); }
/* Foot bands separated by --sc-plum-80 hairlines, not fill (a dark fill is invisible on the gradient). Never lighten the R20 compliance bar. */
.sc-footer__divider { border: none; border-top: 1px solid var(--sc-plum-80); margin: 0; }
.sc-footer__rg { background: transparent; padding: .875rem 1.5rem; }
.sc-footer__rg-inner { max-width: var(--sc-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sc-footer__rg-msg {
	margin: 0;
	text-align: center;
	font-size: .75rem;
	line-height: 1.5;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
}
.sc-footer__rg-msg p { margin: 0; }
.sc-footer__rg-msg p + p { margin-top: .25rem; }
.sc-footer__rg-msg a { color: var(--sc-white); font-weight: 600; text-decoration: none; }
.sc-footer__rg-msg a:hover { text-decoration: underline; }
.sc-footer__rg-detail { font-size: .75rem; color: var(--sc-plum-40); }
.sc-footer__rg-detail a { color: rgba(255,255,255,.65); text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.sc-footer__rg-detail a:hover { color: var(--sc-gold); }
.sc-footer__bottom { background: transparent; border-top: 1px solid var(--sc-plum-80); padding: 1rem 1.5rem; }
.sc-footer__bottom-inner { max-width: var(--sc-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sc-footer__copyright { font-size: .75rem; color: var(--sc-plum-40); margin: 0; }
.sc-footer__legal-links { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.sc-footer__legal-link { font-size: .75rem; color: var(--sc-plum-40); text-decoration: none; transition: color .2s; }
.sc-footer__legal-link:hover, .sc-footer__legal-link:focus-visible { color: var(--sc-white); outline: none; }

/* === BREADCRUMB === position: relative = stacking context, so brand-sheet pseudo-elements can never overlap it */

.sc-breadcrumb {
	position: relative;
	z-index: 1;
	padding: .875rem 0;
	border-bottom: 1px solid rgba(0,0,0,.07);
}
.sc-breadcrumb__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 40px; }
.sc-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.sc-breadcrumb__item { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: rgba(0,0,0,.45); }
.sc-breadcrumb__link { color: rgba(0,0,0,.5); text-decoration: none; font-weight: 500; transition: color .15s; }
.sc-breadcrumb__link:hover, .sc-breadcrumb__link:focus-visible { color: var(--sc-plum); outline: none; }
.sc-breadcrumb__item--current { color: var(--sc-text); font-weight: 600; }
.sc-breadcrumb__sep { color: rgba(0,0,0,.25); flex-shrink: 0; }

/* === PAGE HEADER (non-hero pages) === */

.sc-page-header { padding: 3rem 0 2.5rem; background: #f5f5f5; border-bottom: 1px solid rgba(0,0,0,.08); }
.sc-page-header__title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; color: var(--sc-text); margin: 0 0 .5rem; }
.sc-page-header__meta { font-size: .875rem; color: rgba(0,0,0,.5); margin: 0; }

/* === HERO (single fullscreen - inner pages) === */

.sc-hero { position: relative; width: 100%; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; background: var(--sc-plum); }
.sc-hero--tall { min-height: 680px; }
.sc-hero--standard { min-height: 320px; }
@media (max-width: 600px) { .sc-hero--standard { min-height: 240px; } }
/* Solid-colour header: template sets bg + heading colour inline; this plum shows only if the inline colour is absent. */
.sc-hero--solid { background-color: var(--sc-plum); }

/* Detail heroes share the hotel height */
.sc-hero--restaurant,
.sc-hero--skytower { min-height: 600px; }
.sc-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.03); transition: transform 6s ease-out; }
.sc-hero.is-visible .sc-hero__bg { transform: scale(1); }
.sc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sc-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(68,11,34,.82) 0%, rgba(68,11,34,.38) 50%, rgba(68,11,34,.12) 100%); }
.sc-hero__overlay--light { background: linear-gradient(to top, rgba(68,11,34,.58) 0%, rgba(68,11,34,.18) 60%, transparent 100%); }
.sc-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--sc-max-width); margin: 0 auto; padding: 3rem 40px 3.5rem; color: var(--sc-white); }
.sc-hero__eyebrow { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-gold); margin-bottom: .875rem; }
.sc-hero__heading { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; text-shadow: 0 2px 16px rgba(0,0,0,.4); max-width: 780px; margin-bottom: 1rem; }
.sc-hero__subheading { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 400; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 560px; margin-bottom: 1.75rem; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.sc-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Detail hero CTAs: from 768px let the CTA row escape the 580px text measure. Scoped to .sc-hero__inner (generic _Hero untouched). */
@media (min-width: 768px) {
	.sc-hero__inner .sc-hero__ctas { width: max-content; max-width: min(1180px, calc(100vw - 80px)); }
}
.sc-hero--home { height: 100svh; min-height: 540px; max-height: 900px; align-items: center; }
.sc-hero__media { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
/* Video header: plum surface + overlay scrim are the still fallback (no media / reduced motion). DOM order paints overlay over video. */
.sc-hero--video { background: var(--sc-plum); }
.sc-hero__video--embed { overflow: hidden; }
.sc-hero__video-frame { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	/* Reduced motion: site.js never activates the iframe, so hide its box; the <video> is paused by site.js. */
	.sc-hero__video--embed { display: none; }
}
.sc-hero__inner { max-width: 580px; }
.sc-hero__title { font-size: clamp(2rem, 5.5vw, 3.75rem); font-weight: 900; line-height: 1.05; color: var(--sc-white); margin: 0 0 1rem; }
.sc-hero__subtitle { font-size: clamp(.9375rem, 1.6vw, 1.125rem); font-weight: 400; color: rgba(255,255,255,.82); line-height: 1.6; margin: 0 0 2rem; }
.sc-hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .375rem; color: rgba(255,255,255,.5); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; animation: sc-bounce 2s infinite; }

@keyframes sc-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(6px); }
}

/* === HOMEPAGE - SHARED SECTION LAYOUT === */

.sc-hp-inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
}

.sc-hp-section-hdr {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.sc-hp-section-title {
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
	position: relative;
}

.sc-hp-section-title::after {
	content: '';
	display: block;
	width: 36px;
	height: 3px;
	background: var(--sc-gold);
	margin-top: 8px;
	border-radius: 2px;
}

.sc-viewall-btn {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-plum);
	/* Small-scale .sc-btn--outline pill. Size and letter-spacing deliberately unchanged (sits inline in headers) - do NOT merge into .sc-btn. */
	border: 1px solid var(--sc-plum);
	padding: 8px 20px;
	border-radius: var(--sc-radius-btn);
	text-decoration: none;
	transition: background .2s, border-color .2s, color .2s;
	white-space: nowrap;
	flex-shrink: 0;
}

.sc-viewall-btn:hover {
	background: var(--sc-plum);
	color: var(--sc-white);
	border-color: var(--sc-plum);
}

.sc-hp-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.sc-hp-grid4--3col {
	grid-template-columns: repeat(3, 1fr);
}

/* Sky Tower Experiences: 3-up grid collapses straight to one column so a third tile never orphans into 2 + 1. */
.sc-hp-grid-exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .sc-hp-grid-exp { grid-template-columns: 1fr; } }

/* === HOMEPAGE CARD (sc-hp-card) === */

.sc-hp-card {
	display: flex;
	flex-direction: column;
	background: #f8f8f8;
	border: 1px solid rgba(68,11,34,.08);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--sc-text);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.sc-hp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0,0,0,.14);
	border-color: rgba(220,183,65,.25);
}

.sc-hp-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-hp-card__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/10;
	background: #e8e8e8;
	flex-shrink: 0;
}

.sc-hp-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.sc-hp-card__cat {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-text);
	background: var(--sc-gold);
	padding: 4px 10px;
	border-radius: 3px;
}

.sc-hp-card__body {
	padding: 18px 22px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sc-hp-card__title {
	/* LOAD-BEARING: color: inherit stops .sc-surface--grad :where(h3) painting the title white on a cream card.
	   A no-op off the band - do not tidy it away. */
	color: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sc-hp-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: #999;
	margin-top: auto;
}

.sc-hp-meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #bbb;
	display: inline-block;
	flex-shrink: 0;
}

.sc-hp-card__excerpt {
	font-size: 13px;
	color: #666;
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* === HOMEPAGE BAND - homepage section on the plum gradient (consumes --sc-grad-plum, no new gradient literal) ===
   Consumer overrides: always scope to .sc-surface--grad, never bare .sc-hp-card (SkyTower uses it off the band). */
.sc-hp-band { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }

/* Heading has no colour of its own, so on the band it would take white from :where(h2); the comp wants pale gold. */
.sc-surface--grad .sc-hp-section-title { color: var(--sc-gold-40); }

.sc-surface--grad .sc-hp-card {
	background: var(--sc-cream);
	border-color: rgba(68,11,34,.12);
	color: var(--sc-plum);
}

/* Restated at (0,2,0) so it beats the `color: inherit` hardening on .sc-hp-card__title. */
.sc-surface--grad .sc-hp-card__title { color: var(--sc-plum); }
.sc-surface--grad .sc-hp-card__excerpt { color: var(--sc-plum-80); }
.sc-surface--grad .sc-hp-card:hover { border-color: rgba(220,183,65,.45); }
.sc-surface--grad .sc-hp-card:focus-visible { outline-color: var(--sc-gold); }

/* === HOMEPAGE EVENT CAROUSEL (sc-evc) === */

.sc-hp-carousel-wrap { position: relative; }

.sc-hp-carousel {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 8px;
}

.sc-hp-carousel::-webkit-scrollbar { display: none; }
/* Reduced motion: must stay AFTER the .sc-hp-carousel rule above (same specificity). */
@media (prefers-reduced-motion: reduce) {
	.sc-hp-carousel { scroll-behavior: auto; }
}

.sc-evc {
	min-width: 300px;
	max-width: 300px;
	background: #f8f8f8;
	border: 1px solid rgba(68,11,34,.08);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--sc-text);
	flex-shrink: 0;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.sc-evc:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0,0,0,.14);
	border-color: rgba(220,183,65,.25);
}

.sc-evc:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-evc__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/9;
	background: #e8e8e8;
}

.sc-evc__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.sc-evc__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(220,183,65,.3);
	border-radius: 6px;
	padding: 7px 13px;
	text-align: center;
	line-height: 1.1;
}

.sc-evc__badge-month {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-plum);
}

.sc-evc__badge-day {
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: var(--sc-text);
	margin-top: 2px;
}

.sc-evc__body { padding: 18px 20px 20px; }

.sc-evc__cat {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-plum);
	margin-bottom: 8px;
}

.sc-evc__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

.sc-evc__time {
	display: block;
	font-size: 12px;
	color: #999;
}

/* -- Carousel arrows -- in a flow row below the track (modifiers carry no positioning).
   [disabled] rules are a dormant hook - nothing sets the attribute yet (needs a site.js scroll listener). */
.sc-hp-arrows {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 20px;
}

.sc-hp-arr {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--sc-plum);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
	color: var(--sc-plum);
	padding: 0;
	flex-shrink: 0;
}

.sc-hp-arr:hover { background: var(--sc-plum); border-color: var(--sc-plum); color: var(--sc-white); }
.sc-hp-arr:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }
.sc-hp-arr[disabled] { border-color: var(--sc-plum-40); color: var(--sc-plum-40); cursor: default; }
.sc-hp-arr[disabled]:hover { background: transparent; color: var(--sc-plum-40); }

/* === HOMEPAGE FEATURED HERO BANNER (sc-hp-feat) === */

/* Bottom padding = top: the grey section below needs this tile's own white gap. */
.sc-hp-feat { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.sc-hp-feat__inner {
	display: block;
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	/* min-height is safe here only because no aspect-ratio is active on this component (a ratio would collapse the width).
	   Image is object-fit: cover, so the height IS the crop. */
	min-height: 330px;
	text-decoration: none;
	background: var(--sc-plum);
}

.sc-hp-feat__inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform .6s ease;
}

.sc-hp-feat__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 50%, transparent 100%);
	z-index: 1;
}

.sc-hp-feat__content {
	position: relative;
	z-index: 2;
	/* Flex column centres the copy vertically; safe for __content-inner (stretch caps at its 520px max-width, stays left). */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 56px;
	/* Kept in step with .sc-hp-feat__inner above — the two together are the hero's height. */
	min-height: 330px;
}

.sc-hp-feat__content-inner { max-width: 520px; }

.sc-hp-feat__label {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--sc-text);
	background: var(--sc-gold);
	padding: 6px 16px;
	border-radius: 3px;
	margin-bottom: 18px;
}

.sc-hp-feat__title {
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--sc-white);
	margin: 0 0 14px;
	max-width: 520px;
}

.sc-hp-feat__excerpt {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255,255,255,.72);
	margin: 0 0 24px;
	max-width: 480px;
}

.sc-hp-feat__cta {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sc-gold);
	border: 1px solid rgba(220,183,65,.5);
	padding: 12px 28px;
	/* Radius only - gold is the correct accent on this dark banner; colours untouched. */
	border-radius: var(--sc-radius-btn);
	transition: background .2s, border-color .2s;
}

.sc-hp-feat__inner:hover .sc-hp-feat__cta { background: rgba(220,183,65,.15); border-color: var(--sc-gold); }

/* ── Top row: mosaic (left ~2/3) + SHOW Feature Panel rail (right ~1/3) ── */
.sc-hp-toprow {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 16px 40px 0;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
	align-items: stretch;
}

/* Nested mosaic drops its own container styling — the toprow owns width + gutter */
.sc-hp-toprow .sc-mosaic {
	max-width: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

/* Inner grid fills the stretched cell so the mosaic grows to match the taller panel. */
.sc-hp-toprow .sc-mosaic__grid {
	height: 100%;
}

/* Panel-only state (no mosaic) - stay inside content width + gutter, not edge to edge. */
.sc-hp-panel-solo {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 16px 40px 0;
}

/* === HOMEPAGE FEATURED PANEL (sc-feature-panel) - SHOW by SkyCity widget === */

.sc-feature-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--sc-plum);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	color: var(--sc-white);
}

.sc-feature-panel__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	background: #1c1c1c;
	overflow: hidden;
}

.sc-feature-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sc-feature-panel__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 28px 30px 30px;
}

.sc-feature-panel__summary {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,.72);
	margin: 0 0 20px;
}

.sc-feature-panel__links {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.sc-feature-panel__link-item + .sc-feature-panel__link-item { border-top: 1px solid rgba(255,255,255,.1); }

.sc-feature-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	text-decoration: none;
	color: var(--sc-white);
	font-size: 14px;
	font-weight: 600;
	transition: color .2s ease, padding-left .2s ease;
}

.sc-feature-panel__link:hover,
.sc-feature-panel__link:focus-visible {
	color: var(--sc-gold);
	padding-left: 6px;
}

.sc-feature-panel__link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-feature-panel__link-icon {
	font-size: 20px;
	color: var(--sc-gold);
	flex-shrink: 0;
	transition: transform .2s ease;
}

.sc-feature-panel__link:hover .sc-feature-panel__link-icon { transform: translateX(4px); }

.sc-feature-panel__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 28px;
	border-radius: var(--sc-radius-btn);
	transition: background .2s ease, transform .2s ease;
}

.sc-feature-panel__cta:hover { background: #d9bd8d; transform: translateY(-2px); }
.sc-feature-panel__cta:focus-visible { outline: 2px solid var(--sc-white); outline-offset: 3px; }

/* Stack the top row on narrower viewports; the panel drops to image + CTA only */
@media (max-width: 900px) {
	.sc-hp-toprow {
		grid-template-columns: 1fr;
		padding: 16px 24px 0;
	}
	.sc-hp-panel-solo { padding: 16px 24px 0; }
	.sc-feature-panel__summary,
	.sc-feature-panel__links { display: none; }
	.sc-feature-panel__body { padding: 22px 24px 24px; }
}

@media (max-width: 640px) {
	.sc-hp-toprow,
	.sc-hp-panel-solo { padding: 12px 16px 0; }
}

/* === HOMEPAGE DUO CARDS (sc-hp-duo) === */

.sc-hp-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.sc-hp-duo {
	display: grid;
	grid-template-columns: 180px 1fr;
	background: var(--sc-white);
	border: 1px solid rgba(68,11,34,.08);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--sc-text);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	max-height: 140px;
}

.sc-hp-duo:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 180px 1fr; }

.sc-hp-duo:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.12); border-color: rgba(220,183,65,.25); }
.sc-hp-duo:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-hp-duo__img { position: relative; overflow: hidden; background: #e8e8e8; }
.sc-hp-duo__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }

.sc-hp-duo__body { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.sc-hp-duo__title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.sc-hp-duo__excerpt { font-size: 13px; line-height: 1.55; color: var(--sc-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Homepage responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
	.sc-hp-grid4 { grid-template-columns: repeat(2, 1fr); }
	.sc-hp-grid4--3col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.sc-hp-inner { padding: 0 24px; }
	.sc-hp-feat { padding-top: 2rem; padding-bottom: 2rem; }
}

@media (max-width: 860px) {
	.sc-hp-grid4--3col { grid-template-columns: repeat(2, 1fr); }
	.sc-hp-duo-grid { grid-template-columns: 1fr; }
	.sc-hp-duo, .sc-hp-duo:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: 140px 1fr; max-height: 120px; }
}

@media (max-width: 768px) {
	.sc-hp-grid4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.sc-hp-grid4--3col { grid-template-columns: repeat(2, 1fr); }
	/* .sc-hp-feat__inner MUST be restated here alongside the content min-height - the two move together; change them together. */
	.sc-hp-feat__inner { min-height: 300px; }
	.sc-hp-feat__content { padding: 32px 32px; min-height: 300px; }
	.sc-hp-feat__title { font-size: clamp(20px, 5vw, 28px); }
	.sc-hp-feat__excerpt { display: none; }
}

@media (max-width: 640px) {
	.sc-hp-inner { padding: 0 16px; }
	.sc-hp-grid4, .sc-hp-grid4--3col { grid-template-columns: 1fr; gap: 14px; }
	.sc-hp-duo-grid { grid-template-columns: 1fr; }
	.sc-hp-duo, .sc-hp-duo:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: 110px 1fr; max-height: 110px; }
	.sc-hp-feat { padding-top: 1.5rem; padding-bottom: 1.5rem; }
	.sc-hp-feat__inner { min-height: 280px; }
	.sc-hp-feat__content { padding: 24px 24px; min-height: 280px; }
	.sc-evc { min-width: 260px; max-width: 260px; }
}

/* === HOMEPAGE SECTIONS === */

.sc-section__inner { max-width: var(--sc-max-width); margin: 0 auto; }
.sc-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.sc-section__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .375rem; }
/* Kept separate from .sc-oh__title - DO NOT re-group: a comma group is a shared declaration, restyling one restyles all. */
.sc-section__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.15; margin: 0; }

/* .sc-oh__title: gold display face is legible only because the surface is plum. It is an h2, so no !important needed - add none. */
.sc-oh__title { font-family: var(--sc-font-display); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.01em; color: var(--sc-gold-60); margin: 0; }
.sc-oh__title { margin-bottom: 1.5rem; }
.sc-section--dark .sc-section__title { color: var(--sc-white); }
.sc-section__view-all { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-plum); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: .3rem; transition: gap .2s; }
.sc-section__view-all:hover { gap: .6rem; }

.sc-hotels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sc-hotel-card__name { font-size: 1.125rem; font-weight: 800; color: var(--sc-white); margin: 0 0 .375rem; line-height: 1.2; }
.sc-hotel-card__tagline { font-size: .8125rem; color: rgba(255,255,255,.75); margin: 0 0 .875rem; }

.sc-hotel-cards { display: grid; gap: 1.5rem; }
.sc-hotel-cards--4 { grid-template-columns: repeat(4, 1fr); }
.sc-hotel-cards--3 { grid-template-columns: repeat(3, 1fr); }
.sc-hotel-cards--2 { grid-template-columns: repeat(2, 1fr); }
.sc-hotel-cards--1 { grid-template-columns: 1fr; max-width: 480px; }

@media (max-width: 1024px) {
	.sc-hotel-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.sc-hotel-cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sc-hotel-cards--4,
	.sc-hotel-cards--3,
	.sc-hotel-cards--2 { grid-template-columns: 1fr; }
}

/* === CARD GRID === */

.sc-card-grid-section { padding: 4rem 0; }
.sc-card-grid-section--dark { background: var(--sc-plum); color: var(--sc-white); }
.sc-card-grid { display: grid; gap: 1.5rem; }
.sc-card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sc-card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sc-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.sc-card-grid-footer { text-align: center; margin-top: 2.5rem; }

/* === EVENT CARD === */

.sc-event-card { display: flex; flex-direction: column; border-radius: var(--sc-radius-card); overflow: hidden; background: var(--sc-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); text-decoration: none; color: var(--sc-text); transition: transform .22s, box-shadow .22s; }
.sc-event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sc-event-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-event-card__img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #e8e8e8; flex-shrink: 0; }
.sc-event-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sc-event-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .625rem; background: var(--sc-gold); color: var(--sc-text); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; }
.sc-event-card__category { position: absolute; top: .75rem; right: .75rem; padding: .25rem .625rem; background: rgba(0,0,0,.55); color: var(--sc-white); font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 50px; backdrop-filter: blur(4px); }
.sc-event-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.125rem 1.25rem 1.25rem; gap: .375rem; }
.sc-event-card__date { font-size: .75rem; font-weight: 600; color: var(--sc-plum); letter-spacing: .04em; }
.sc-event-card__title { font-size: 1rem; font-weight: 700; line-height: 1.3; margin: .125rem 0 .375rem; }
.sc-event-card__summary { font-size: .875rem; color: rgba(0,0,0,.6); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-event-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid rgba(0,0,0,.07); }
.sc-event-card__price { font-size: .8125rem; font-weight: 700; color: var(--sc-text); }
.sc-event-card__arrow { width: 1.75rem; height: 1.75rem; background: var(--sc-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s; }
.sc-event-card:hover .sc-event-card__arrow { transform: translateX(3px); }

/* === RESTAURANT CARD === */

.sc-restaurant-card { display: flex; flex-direction: column; border-radius: var(--sc-radius-card); overflow: hidden; background: var(--sc-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); text-decoration: none; color: var(--sc-text); transition: transform .22s, box-shadow .22s; height: 100%; }
.sc-restaurant-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sc-restaurant-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-restaurant-card__img-wrap { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #e8e8e8; flex-shrink: 0; }
.sc-restaurant-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sc-restaurant-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .625rem; background: var(--sc-gold); color: var(--sc-text); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; }
.sc-restaurant-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.125rem 1.25rem 1.25rem; }
.sc-restaurant-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.sc-restaurant-card__category { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-plum); }
.sc-restaurant-card__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.25); flex-shrink: 0; }
.sc-restaurant-card__price { font-size: .6875rem; font-weight: 600; color: rgba(0,0,0,.45); letter-spacing: .04em; }
.sc-restaurant-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin-bottom: .5rem; }
.sc-restaurant-card__summary { font-size: .875rem; color: rgba(0,0,0,.6); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-restaurant-card__footer { display: flex; align-items: center; gap: .625rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.07); }
.sc-restaurant-card__ctas { display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-restaurant-card__view { display: inline-flex; align-items: center; padding: .45rem 1rem; border: 2px solid rgba(0,0,0,.15); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--sc-text); transition: border-color .2s, background .2s; }
.sc-restaurant-card__view:hover { border-color: var(--sc-gold); background: rgba(220,183,65,.06); }
.sc-restaurant-card__book { display: inline-flex; align-items: center; padding: .45rem 1rem; background: var(--sc-gold); color: var(--sc-text); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; }
.sc-restaurant-card__book:hover { opacity: .88; }

/* === HOTEL CARD === */

.sc-hotel-card { display: flex; flex-direction: column; border-radius: var(--sc-radius-card); overflow: hidden; background: var(--sc-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); color: var(--sc-text); transition: transform .22s, box-shadow .22s; height: 100%; }
.sc-hotel-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sc-hotel-card__img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e8e8e8; flex-shrink: 0; }
.sc-hotel-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.sc-hotel-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .625rem; background: var(--sc-gold); color: var(--sc-text); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; }
.sc-hotel-card__img-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--sc-gold); opacity: 0; transition: opacity .25s; }
.sc-hotel-card:hover .sc-hotel-card__img-wrap::after { opacity: 1; }
.sc-hotel-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.sc-hotel-card__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .375rem; }
.sc-hotel-card__title { font-size: 1.125rem; font-weight: 800; line-height: 1.25; margin-bottom: .625rem; text-decoration: none; color: inherit; }
.sc-hotel-card__title a { text-decoration: none; color: inherit; }
.sc-hotel-card__summary { font-size: .875rem; color: rgba(0,0,0,.6); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-hotel-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid rgba(0,0,0,.07); flex-wrap: wrap; }
.sc-hotel-card__price { font-size: .8125rem; color: rgba(0,0,0,.5); }
.sc-hotel-card__price strong { font-size: 1rem; font-weight: 800; color: var(--sc-text); }
.sc-hotel-card__ctas { display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-hotel-card__view { display: inline-flex; align-items: center; padding: .45rem 1rem; border: 2px solid rgba(0,0,0,.15); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--sc-text); transition: border-color .2s, background .2s; }
.sc-hotel-card__view:hover { border-color: var(--sc-gold); background: rgba(220,183,65,.06); }
.sc-hotel-card__book { display: inline-flex; align-items: center; padding: .45rem 1rem; background: var(--sc-gold); color: var(--sc-text); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; }
.sc-hotel-card__book:hover { opacity: .88; }

/* === BLOG CARD === */

.sc-blog-card { display: flex; flex-direction: column; border-radius: var(--sc-radius-card); overflow: hidden; background: var(--sc-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); text-decoration: none; color: var(--sc-text); transition: transform .22s, box-shadow .22s; height: 100%; }
.sc-blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
.sc-blog-card:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-blog-card__img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #e8e8e8; flex-shrink: 0; }
.sc-blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.sc-blog-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .625rem; background: var(--sc-gold); color: var(--sc-text); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; }
.sc-blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.125rem 1.25rem 1.25rem; }
.sc-blog-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.sc-blog-card__category { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-plum); }
.sc-blog-card__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.25); flex-shrink: 0; }
.sc-blog-card__date { font-size: .6875rem; color: rgba(0,0,0,.45); font-weight: 500; }
.sc-blog-card__read-time { font-size: .6875rem; color: rgba(0,0,0,.35); }
.sc-blog-card__title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin-bottom: .5rem; }
.sc-blog-card__summary { font-size: .875rem; color: rgba(0,0,0,.6); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-blog-card__footer { display: flex; align-items: center; justify-content: flex-end; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid rgba(0,0,0,.07); }
.sc-blog-card__read-more { font-size: .8125rem; font-weight: 700; color: var(--sc-plum); text-decoration: none; display: flex; align-items: center; gap: .3rem; transition: gap .2s; }
.sc-blog-card:hover .sc-blog-card__read-more { gap: .55rem; }

/* === FAQ BLOCK === */

/* ONE source for the column width - button grid, answer indent and mobile override all derive from these. Change here only. */
.sc-faq {
	--faq-col: 44%;      /* number column — the comp puts the question ~44% across */
	--faq-pad: 2.5rem;   /* row horizontal padding — the comp's rows are generously inset */
	--faq-gap: 1rem;
	padding: 4rem 0;
	background: var(--sc-faq-surface);
}

/* FAQ surface must be painted on #faq (full-bleed section) as well as .sc-faq, or it renders as an inset two-tone panel.
   Every caller must keep id="faq" on its <section>. */
#faq { background: var(--sc-faq-surface); }
/* Panel fills its container (shared with _ArticleFaqs). A 1000px cap loses the full-width block - do not re-add it. */
.sc-faq__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; }
.sc-faq__heading-block { text-align: left; margin-bottom: 2.5rem; }
.sc-faq__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .5rem; }
.sc-faq__heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--sc-plum); }

.sc-faq__list { display: block; counter-reset: sc-faq; }

/* Divider between rows only: border-top on every row, removed on the first. Warm hairline because it sits on cream. */
/* LOAD-BEARING: horizontal padding lives on the ITEM, not the button - --faq-col is a %, so button and answer
   need the same containing block or the answer indent misaligns. */
.sc-faq__item { counter-increment: sc-faq; padding: 0 var(--faq-pad); border-top: 1px solid rgba(122,91,46,.18); border-radius: 12px; transition: background .2s; }
.sc-faq__item:first-child { border-top: 0; }

/* Open row: one flat fill on .sc-faq__item (button + answer); no hover colour on the question.
   Each :has() rule in its OWN block - an engine that can't parse :has() drops the whole comma group. */
.sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) { background: #EFD9A0; }
.sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) { border-top-color: transparent; }
.sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) + .sc-faq__item { border-top-color: transparent; }

/* Hover lives on the item, not the button (else a two-tone open row). Own block; suppressed while open. */
.sc-faq__item:hover { background: rgba(122,91,46,.05); }
.sc-faq__item:has(.sc-faq__question[aria-expanded="true"]):hover { background: #EFD9A0; }

/* Three-column grid: number | question | control. align-items: start keeps number + chevron on line one. */
.sc-faq__question { width: 100%; display: grid; grid-template-columns: var(--faq-col) 1fr auto; align-items: start; gap: var(--faq-gap); padding: 1.5rem 0; background: none; border: none; text-align: left; font-family: var(--sc-font); font-size: 1.0625rem; font-weight: 700; color: var(--sc-plum); cursor: pointer; }
.sc-faq__question:hover { background: none; }
.sc-faq__question:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: -2px; }

/* Numbers are CSS counters on purpose (kept out of the a11y tree and FAQPage JSON-LD). No opacity.
   currentColor, never hardcoded - brand sheets (grand.css) recolour it via .sc-faq__question's colour. */
.sc-faq__question::before { content: counter(sc-faq, decimal-leading-zero) "."; font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: .01em; color: currentColor; font-variant-numeric: tabular-nums; }

/* Box sized with width/height, glyph with font-size. overflow: hidden guards against the ligature name before the font loads.
   Translucent disc is a deliberate exception to the opaque rule - it must read on cream and on the open fill. */
.sc-faq__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(122,91,46,.12); font-size: 1.125rem; line-height: 1; color: var(--sc-plum); transition: transform .25s, color .2s, background .2s; }
.sc-faq__question[aria-expanded="true"] .sc-faq__icon { transform: rotate(180deg); background: rgba(255,255,255,.75); color: var(--sc-plum); }

/* Answer indent derives from --faq-col. 100ch cap and font-size are a pair (ch scales). Wide measure is deliberate - do not narrow. */
/* box-sizing: content-box is LOAD-BEARING: under border-box the 100ch cap includes the indent and the answer wraps short.
   Do not normalise back to border-box. */
.sc-faq__answer { box-sizing: content-box; padding: 0 0 1.5rem calc(var(--faq-col) + var(--faq-gap)); max-width: 100ch; font-size: .9375rem; line-height: 1.7; color: #5C3A45; }
.sc-faq__answer p:last-child { margin-bottom: 0; }
.sc-faq__answer a { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
/* RTE answer lists - the global reset strips markers and this wrapper isn't .sc-rte, so restore them. */
.sc-faq__answer ul, .sc-faq__answer ol { list-style: revert; padding-left: 1.25rem; margin: 0 0 1rem; }
.sc-faq__answer li { margin-bottom: .375rem; }
.sc-faq__answer ul:last-child, .sc-faq__answer ol:last-child { margin-bottom: 0; }

/* -- {{form:GUID}} trigger button (_FaqBlock + _ArticleFaqs) -- affordance only; the dialog is styled elsewhere.
   Carries .sc-btn--gold - its white-on-gold WCAG exception is brand-mandated; do not fix the contrast here. */
.sc-faq__form-trigger {
	/* .sc-btn is nowrap; let long editor labels wrap in the answer column on phones. */
	white-space: normal;
	max-width: 100%;
	margin: 1rem 0 .25rem;
	text-align: center;
}
/* No colour override needed: .sc-btn--gold declares its own colour later at (0,1,0), which already beats the answer's. */

/* Between phone and desktop, step --faq-col down rather than jumping straight to the mobile value. */
@media (max-width: 1100px) {
	.sc-faq { --faq-col: 30%; --faq-pad: 1.75rem; }
}

/* === MAP SECTION === */

/* === LOCATION & CONTACT (.sc-loc) === rendered by _LocationContact; replaces the dead .sc-map-section* rules */

.sc-loc__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
/* Two columns only when the map is actually there (.sc-loc--ready set by script). Never style the map column as present by default. */
.sc-loc--ready .sc-loc__grid { grid-template-columns: 1fr 1.9fr; gap: 48px; }
.sc-loc__mapcol { display: none; min-width: 0; }
.sc-loc--ready .sc-loc__mapcol { display: block; }

/* #8A6A38, NOT --sc-gold: brand gold fails contrast on the light surface; this deepened gold passes 4.5:1. Do not swap to the token. */
.sc-loc__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A6A38; margin-bottom: .625rem; }
.sc-loc__intro .sc-section__title { margin-bottom: 1.25rem; }
.sc-loc__address { font-style: normal; font-size: 1rem; line-height: 1.65; color: var(--sc-text); margin: 0 0 .5rem; max-width: 34ch; }
.sc-loc__precinct { font-size: .9375rem; color: rgba(0,0,0,.6); margin: 0 0 .5rem; }
.sc-loc__contact { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.sc-loc__contact a { color: var(--sc-text); text-decoration: none; font-size: .9375rem; transition: color .2s; }
.sc-loc__contact a:hover { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }

.sc-loc__social { display: flex; align-items: center; gap: .625rem; margin: 0 0 1.75rem; }
.sc-loc__social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; border: 1px solid rgba(68,11,34,.28); background: none; color: var(--sc-plum); cursor: pointer; padding: 0; transition: background .2s, color .2s, border-color .2s; }
.sc-loc__social-link:hover { background: var(--sc-plum); color: var(--sc-white); border-color: var(--sc-plum); }
.sc-loc__social-link:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }
.sc-loc__cta { align-self: flex-start; }
.sc-loc__cta .material-symbols-outlined { font-size: 1.125rem; }

.sc-loc__map { width: 100%; height: clamp(380px, 44vw, 600px); border-radius: var(--sc-radius-card); overflow: hidden; background: #3E1226; }

/* anchor: bottom (in JS) keeps the pin's point on the coordinate through pan/zoom */
.sc-loc__pin { cursor: pointer; line-height: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.sc-loc__pin:focus-visible { outline: 2px solid var(--sc-white); outline-offset: 3px; border-radius: 4px; }

/* MapLibre chrome restyled - these are third-party class names; recheck if MapLibre is bumped */

/* LOAD-BEARING specificity: maplibre-gl.css loads in <body> after our sheets, so .sc-loc ancestor (0,2,0) is needed.
   font-family only (keep maplibre's 12px/20px); button listed because controls don't inherit; leave Material Symbols alone */
.sc-loc .maplibregl-map,
.sc-loc .maplibregl-map button { font-family: var(--sc-font); }

.sc-loc__popup .maplibregl-popup-content { padding: 18px 20px 16px; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.28); background: var(--sc-white); }
.sc-loc__popup .maplibregl-popup-tip { border-top-color: var(--sc-white); }
.sc-loc__popup .maplibregl-popup-close-button { width: 28px; height: 28px; top: 12px; right: 12px; border-radius: 6px; font-size: 1.125rem; line-height: 1; color: var(--sc-plum); background: #F1EDEE; }
.sc-loc__popup .maplibregl-popup-close-button:hover { background: #E4DCDF; }
.sc-loc__card-name { font-size: 1.0625rem; font-weight: 700; color: var(--sc-plum); margin: 0 2rem .625rem 0; }
.sc-loc__card-row { display: flex; align-items: center; gap: .5rem; margin: 0 0 .375rem; font-size: .9375rem; }
.sc-loc__card-row .material-symbols-outlined { font-size: 1.125rem; color: #8A6A38; flex-shrink: 0; }
.sc-loc__card-row a { color: var(--sc-text); text-decoration: none; }
.sc-loc__card-row a:hover { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-loc__card-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-plum); text-decoration: none; }
.sc-loc__card-link .material-symbols-outlined { font-size: 1rem; }
.sc-loc__card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Mobile: stack intro over map - .sc-loc--ready .sc-loc__grid sets 2 columns with no media query, so override here */
@media (max-width: 900px) {
	.sc-loc--ready .sc-loc__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Zoom controls: capsule group of circular buttons by decision - do not restore the comp's square 4px/8px.
   Each declaration overrides a MapLibre rule (group radius, 29px buttons, button+button divider, focus corner radius) */
.sc-loc .maplibregl-ctrl-group { border-radius: var(--sc-radius-btn); padding: 3px; background: var(--sc-white); box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.sc-loc .maplibregl-ctrl-group button { width: 32px; height: 32px; border-radius: 50%; }
.sc-loc .maplibregl-ctrl-group button + button { border-top: 0; margin-top: 3px; }
.sc-loc .maplibregl-ctrl-group button:focus:first-child,
.sc-loc .maplibregl-ctrl-group button:focus:last-child,
.sc-loc .maplibregl-ctrl-group button:focus:only-child { border-radius: 50%; }
.sc-loc .maplibregl-ctrl-group button:hover { background: #F1EDEE; }
/* Attribution is required by OpenFreeMap - tone it down, never hide it. (0,3,0) on purpose: MapLibre's CSS loads after this sheet and its (0,2,0) 50% white would win. */
.sc-loc .maplibregl-ctrl.maplibregl-ctrl-attrib { font-size: 10px; background: rgba(255,255,255,.82); }
.sc-loc .maplibregl-ctrl-attrib a { color: #3A3A3A; }

/* === MENUS SECTION === */

.sc-menus { padding: 3rem 0 4rem; }
.sc-menus__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; }
.sc-menus__section { margin-bottom: 3.5rem; }
.sc-menus__section:last-child { margin-bottom: 0; }
.sc-menus__section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(220,183,65,.3); }
.sc-menus__section-title { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 800; color: var(--sc-text); }
.sc-menus__pdf-link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.125rem; border: 2px solid var(--sc-gold); border-radius: var(--sc-radius-btn); color: var(--sc-plum); font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; flex-shrink: 0; }
.sc-menus__pdf-link:hover { background: var(--sc-gold); color: var(--sc-text); }
.sc-menus__pdf-link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-menus__content { font-size: .9375rem; line-height: 1.75; color: rgba(0,0,0,.75); }
.sc-menus__content h3 { font-size: 1.0625rem; font-weight: 700; color: var(--sc-text); margin: 1.5rem 0 .375rem; }
.sc-menus__content h3:first-child { margin-top: 0; }
.sc-menus__content p { margin-bottom: .625rem; }
.sc-menus__content ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.sc-menus__content li { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .375rem 0; border-bottom: 1px dotted rgba(0,0,0,.12); }
.sc-menus__content li:last-child { border-bottom: none; }

/* === SECTION NAV === */

.sc-section-nav { position: sticky; top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-breadcrumb-height)); z-index: 500; background: var(--sc-white); border-bottom: 1px solid rgba(0,0,0,.1); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.sc-section-nav__inner { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sc-section-nav__inner::-webkit-scrollbar { display: none; }
.sc-section-nav__link { display: flex; align-items: center; padding: 0 1.125rem; height: 52px; font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(0,0,0,.5); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--sc-font); transition: color .2s, border-color .2s; flex-shrink: 0; }
.sc-section-nav__link:hover { color: var(--sc-text); border-bottom-color: rgba(220,183,65,.4); }
.sc-section-nav__link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: -2px; }
.sc-section-nav__link.is-active, .sc-section-nav__link[aria-selected="true"] { color: var(--sc-text); border-bottom-color: var(--sc-gold); }
.sc-section-nav__link--cta { margin-left: auto; background: var(--sc-gold); color: var(--sc-text); border-radius: var(--sc-radius-btn); border-bottom: none; padding: 0 1.25rem; margin-top: .625rem; margin-bottom: .625rem; height: 40px; transition: opacity .2s; }
.sc-section-nav__link--cta:hover { opacity: .88; }
.sc-section-nav__link--cta.is-active, .sc-section-nav__link--cta[aria-selected="true"] { border-bottom-color: transparent; }

/* === CASINO - info boxes ===
   Icon is free text: unknown ligatures render as literal text - do not add a width clamp to hide it */

.sc-infoboxes { padding-top: 0; }
.sc-infoboxes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }

.sc-infobox {
	background: var(--sc-plum-20);
	border-radius: 10px;
	padding: 1.75rem 1.5rem;
}

/* Size with font-size, never width/height; bring opsz down with it or the icon reads too heavy */
.sc-infobox__icon {
	font-size: 1.75rem;
	line-height: 1;
	color: var(--sc-plum);
	font-variation-settings: 'opsz' 24;
	display: block;
	margin-bottom: 1.25rem;
}

.sc-infobox__heading { font-size: 1.0625rem; font-weight: 700; color: var(--sc-plum); margin: 0 0 .625rem; }
.sc-infobox__body { font-size: .9375rem; line-height: 1.55; color: var(--sc-plum); }
.sc-infobox__body p { margin: 0; }
.sc-infobox__body p + p { margin-top: .5rem; }
.sc-infobox__body strong { font-weight: 700; }

@media (max-width: 900px) { .sc-infoboxes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sc-infoboxes__grid { grid-template-columns: 1fr; } }

/* Linked info box (optional infoLink): stretched link - the heading's anchor covers the whole box via ::after.
   Body links sit above the overlay so they stay clickable. Hover colour: plum on --sc-plum-40 = 6.32:1. */
.sc-infobox--link { position: relative; transition: background-color .2s; }
.sc-infobox--link:hover,
.sc-infobox--link:focus-within { background: var(--sc-plum-40); }
.sc-infobox__link { color: inherit; text-decoration: none; }
.sc-infobox__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.sc-infobox__link:focus-visible { outline: none; }
.sc-infobox__link:focus-visible::after { outline: 2px solid var(--sc-plum); outline-offset: 3px; }
.sc-infobox--link .sc-infobox__body a { position: relative; z-index: 2; }
/* opsz follows the smaller size (Material Symbols is a variable font) */
.sc-infobox__arrow {
	display: inline-block;
	font-size: 1.125rem;
	vertical-align: -0.2em;
	margin-left: .25rem;
	font-variation-settings: 'opsz' 20;
	transition: transform .2s;
}
.sc-infobox--link:hover .sc-infobox__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.sc-infobox--link,
	.sc-infobox__arrow { transition: none; }
	.sc-infobox--link:hover .sc-infobox__arrow { transform: none; }
}

/* === CASINO - "Don't have a card?" panel ===
   Trailing link is plum + underline, NOT gold (gold fails contrast on the translucent ID panel) - do not restore gold */

.sc-cardblk { padding: 0 0 3rem; }

.sc-cardblk__panel {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: var(--sc-grad-plum);
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem);
}

/* No-image state is the shipping state: template drops the column and the modifier drops the track.
   Image column uses min-height, never aspect-ratio + max-height (that collapses width) */
.sc-cardblk__grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr 1.25fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}
.sc-cardblk__grid--noimg { grid-template-columns: 1fr 1.25fr; }

.sc-cardblk__heading {
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4.6vw, 3.25rem);
	line-height: 1.05;
	color: var(--sc-gold-40);
	margin: 0;
}
.sc-cardblk__body { color: var(--sc-cream); font-size: 1rem; line-height: 1.6; margin: 1rem 0 0; }

/* Deliberately NOT .sc-btn--gold: pale fill + plum label; avoids importing the white-on-gold exception here */
.sc-cardblk__cta {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1.75rem;
	padding: .8rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--sc-radius-btn);
	background: var(--sc-gold-40);
	color: var(--sc-plum);
	font-family: var(--sc-font);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .107em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s;
}
.sc-cardblk__cta:hover { background: var(--sc-gold-60); }
.sc-cardblk__cta:focus-visible { outline: 2px solid var(--sc-cream); outline-offset: 3px; }
.sc-cardblk__cta .material-symbols-outlined { font-size: 1.125rem; font-variation-settings: 'opsz' 20; }

/* Tilted card: numbers matched to the comp - re-check before changing.
   +28deg assumes a FLAT asset; if a pre-rotated image is used, rotation must go back to 0deg */
.sc-cardblk__media { min-height: 200px; display: flex; align-items: center; justify-content: center; }
.sc-cardblk__media img {
	width: 78%;
	max-width: none;
	margin: 0 -10% 0 10%;
	transform: rotate(28deg);
	filter: drop-shadow(0 18px 34px rgba(0,0,0,.45));
}

/* Translucent ID panel - see contrast note at the top of this block */
.sc-cardblk__ids {
	background: rgba(255,255,255,.56);
	border-radius: 12px;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.sc-cardblk__ids-heading { font-size: 1rem; font-weight: 700; color: var(--sc-plum); margin: 0 0 1rem; }
.sc-cardblk__ids ul { list-style: none; margin: 0; padding: 0; }
.sc-cardblk__ids li { position: relative; padding-left: 2.5rem; margin-bottom: .875rem; color: var(--sc-plum); font-size: .9375rem; line-height: 1.45; }
.sc-cardblk__ids li:last-child { margin-bottom: 0; }
.sc-cardblk__ids li p { margin: 0; }

/* Tick is a PUA codepoint, not the `check` ligature - screen readers can announce ligature text */
.sc-cardblk__ids li::before {
	content: "\e5ca";
	font-family: 'Material Symbols Outlined';
	font-size: 1rem;
	line-height: 1;
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	color: var(--sc-plum);
}
/* Plum + underline, NOT gold - gold fails contrast on this panel */
.sc-cardblk__ids a { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.sc-cardblk__ids a:hover { color: var(--sc-plum-80); }

@media (max-width: 900px) {
	.sc-cardblk__grid,
	.sc-cardblk__grid--noimg { grid-template-columns: 1fr; }
	.sc-cardblk__media { order: -1; min-height: 0; }
	/* Stacked: rotation overflows into the heading; percentage vertical margin reserves the space as the card scales */
	.sc-cardblk__media img { width: 62%; margin: 12.5% 0; }
}

/* === RESTAURANT DETAIL PAGE === */

/* Intro: warm tokens used instead of the comp's cool greys (#6B7280/#E5E7EB) on purpose */
.sc-restaurant-overview { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
.sc-restaurant-overview__lead { font-size: 1.125rem; line-height: 1.6; color: var(--sc-plum); margin-bottom: 1.25rem; font-weight: 700; }
.sc-restaurant-overview__body { margin-bottom: 1.5rem; color: var(--sc-text); }

/* Heading/quote are styled as RTE h2/blockquote - do NOT target p:first-child or p:has(em); that hits every venue */
.sc-restaurant-overview__body h2,
.sc-restaurant-overview__body h3 {
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	color: var(--sc-plum);
	margin: 0 0 1rem;
}

/* Scoped on purpose - a bare blockquote rule would reach every RTE field on the estate */
.sc-restaurant-overview__body blockquote {
	margin: 1.5rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--sc-gold);
	font-style: italic;
	font-weight: 600;
	color: var(--sc-plum);
	line-height: 1.6;
}
.sc-restaurant-overview__body blockquote p { margin: 0; }
.sc-restaurant-overview__body blockquote p + p { margin-top: .75rem; }
.sc-restaurant-overview__features { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-restaurant-overview__features li { font-size: .8125rem; font-weight: 600; padding: .35rem .9rem !important; background: rgba(220,183,65,.1) !important; border: 1px solid rgba(220,183,65,.25) !important; border-radius: 50px !important; color: var(--sc-text) !important; }
.sc-restaurant-overview__dresscode { font-size: .9375rem; color: rgba(0,0,0,.6); margin-bottom: 1.25rem; }
.sc-restaurant-overview__ctas { display: flex; gap: .75rem; flex-wrap: wrap; }
/* Chef card: every child optional - spacing uses + selectors so absent items leave no gap; don't convert to margin-bottom */
.sc-restaurant-overview__chef { background: var(--sc-white); border: 1px solid rgba(68,11,34,.12); border-radius: 12px; padding: 2rem 1.75rem; }
.sc-restaurant-overview__chef-photo { width: 118px; height: 118px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.25rem; background: #ece7e8; box-shadow: 0 0 0 1px rgba(68,11,34,.14); }
.sc-restaurant-overview__chef-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-restaurant-overview__chef-name { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.625rem; line-height: 1.15; color: var(--sc-plum); text-align: center; margin: 0; }
.sc-restaurant-overview__chef-role { font-size: .8125rem; font-weight: 700; color: var(--sc-plum-80); text-align: center; margin: .375rem 0 0; }
.sc-restaurant-overview__chef-bio { font-size: .9375rem; color: var(--sc-text); line-height: 1.65; margin: 0; }
.sc-restaurant-overview__chef-name + .sc-restaurant-overview__chef-bio,
.sc-restaurant-overview__chef-role + .sc-restaurant-overview__chef-bio { margin-top: 1.25rem; }

.sc-restaurant-awards__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.sc-restaurant-awards__item { display: flex; align-items: center; text-decoration: none; }
/* Award logos are always full colour - no filter, no hover treatment */
.sc-restaurant-awards__item img { max-height: 80px; width: auto; object-fit: contain; }

.sc-gallery--lightbox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sc-gallery__item { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e8e8e8; display: block; text-decoration: none; cursor: pointer; }
.sc-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.sc-gallery__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); color: var(--sc-white); opacity: 0; transition: opacity .25s; }
.sc-gallery__item:hover .sc-gallery__zoom { opacity: 1; }
.sc-gallery__item:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: -3px; }

/* ── LIGHTBOX ── (markup built by site.js; gold text OK on the .95 black overlay)
   Icons are Material Symbols glyphs - size with font-size, never width/height */
.sc-lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 4.5rem 1rem 1rem; opacity: 0; pointer-events: none; transition: opacity .25s; }
.sc-lightbox.is-open { opacity: 1; pointer-events: all; }
/* img-wrap needs height:100% (with min-height:0 above) or max-height can't resolve and the strip is pushed off-screen */
.sc-lightbox__stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sc-lightbox__img-wrap { width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sc-lightbox__img { max-width: min(90vw, 100%); max-height: 100%; object-fit: contain; border-radius: 4px; }

.sc-lightbox__close { position: absolute; top: 1rem; right: 1rem; background: var(--sc-gold); border: none; color: var(--sc-plum); width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; z-index: 2; }
.sc-lightbox__close .material-symbols-outlined { font-size: 1.875rem; font-variation-settings: 'wght' 500; }
.sc-lightbox__close:hover { background: var(--sc-gold-80); transform: scale(1.06); }
.sc-lightbox__close:focus-visible { outline: 2px solid var(--sc-white); outline-offset: 3px; }

.sc-lightbox__prev, .sc-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); border: 1px solid rgba(220,183,65,.55); color: var(--sc-gold); width: 3.25rem; height: 3.25rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s; z-index: 2; }
.sc-lightbox__prev .material-symbols-outlined, .sc-lightbox__next .material-symbols-outlined { font-size: 2.25rem; font-variation-settings: 'wght' 500; }
.sc-lightbox__prev { left: 1rem; }
.sc-lightbox__next { right: 1rem; }
.sc-lightbox__prev:hover, .sc-lightbox__next:hover { background: var(--sc-gold); border-color: var(--sc-gold); color: var(--sc-plum); }
.sc-lightbox__prev:focus-visible, .sc-lightbox__next:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
/* [hidden] must beat display:flex above (single-image gallery hides the arrows) */
.sc-lightbox__prev[hidden], .sc-lightbox__next[hidden] { display: none; }

.sc-lightbox__bar { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.sc-lightbox__caption { max-width: min(90vw, 720px); margin: 0; padding: 0 1rem; text-align: center; color: rgba(255,255,255,.92); font-size: .9375rem; line-height: 1.5; }
.sc-lightbox__caption:empty { display: none; }
.sc-lightbox__counter { margin: 0; color: var(--sc-gold); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; }

/* Thumb strip scrolls horizontally; never wraps or squashes */
.sc-lightbox__thumbs { width: 100%; max-width: min(100%, var(--sc-max-width)); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(220,183,65,.5) transparent; }
.sc-lightbox__thumbs-track { display: flex; gap: .5rem; width: max-content; margin: 0 auto; padding: 3px; }
.sc-lightbox__thumb { flex: 0 0 auto; width: 76px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s; }
.sc-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-lightbox__thumb:hover { opacity: 1; }
.sc-lightbox__thumb:focus-visible { opacity: 1; outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-lightbox__thumb.is-active { opacity: 1; border-color: var(--sc-gold); }

.sc-restaurant-menus__note { font-size: .8125rem; color: rgba(0,0,0,.4); margin: -.5rem 0 1.5rem; font-style: italic; }
/* Menu blocks: multi-column (columns), not grid, so unequal-height blocks pack; reading order is column-major.
   Spacing is margin-bottom (wrapper pulls it back) - do not switch to margin-top or column tops misalign */
.sc-restaurant-menus { columns: 260px; column-gap: 2rem; margin-bottom: -2rem; }
.sc-restaurant-menus__category { background: var(--sc-cream); border-radius: 12px; padding: 1.5rem 1.5rem 1.25rem; break-inside: avoid; margin: 0 0 2rem; }
.sc-restaurant-menus__cat-title { font-size: 1.125rem; font-weight: 700; color: var(--sc-plum); margin: 0 0 .25rem; }
.sc-restaurant-menus__cat-subtitle { font-size: .8125rem; font-weight: 600; color: var(--sc-plum-80); margin: 0 0 .875rem; }
.sc-restaurant-menus__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
/* Rule stays on every row including the last - matches the comp; no :last-child removal */
.sc-restaurant-menus__item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 0; border-bottom: 2px solid var(--sc-gold); }
.sc-restaurant-menus__link { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--sc-text); text-decoration: none; flex: 1; transition: color .2s; }
.sc-restaurant-menus__link:hover { color: var(--sc-plum); }
.sc-restaurant-menus__icon { flex-shrink: 0; color: var(--sc-plum); }
.sc-restaurant-menus__badge { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .75rem; background: transparent; color: var(--sc-plum); border: 1px solid var(--sc-plum); border-radius: 50px; white-space: nowrap; flex-shrink: 0; transition: background .2s, color .2s; }

.sc-hours__note { font-size: .875rem; color: rgba(0,0,0,.5); margin-top: 1rem; font-style: italic; }

@media (max-width: 900px) {
	.sc-restaurant-overview { grid-template-columns: 1fr; }
	.sc-restaurant-overview__chef { order: -1; }
	.sc-gallery--lightbox { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.sc-gallery--lightbox { grid-template-columns: repeat(2, 1fr); }
	.sc-restaurant-menus { columns: 1; }
	.sc-lightbox { padding: 3.75rem .5rem .75rem; gap: .5rem; }
	.sc-lightbox__prev { left: .375rem; }
	.sc-lightbox__next { right: .375rem; }
	.sc-lightbox__prev, .sc-lightbox__next { width: 2.75rem; height: 2.75rem; }
	.sc-lightbox__prev .material-symbols-outlined, .sc-lightbox__next .material-symbols-outlined { font-size: 1.875rem; }
	.sc-lightbox__thumb { width: 58px; height: 40px; }
}

@media (max-width: 480px) {
	.sc-gallery--lightbox { grid-template-columns: 1fr; }
}

/* === HOMEPAGE MOSAIC === */

.sc-mosaic {
	padding: 16px 40px 0;
	max-width: var(--sc-max-width);
	margin: 0 auto;
}

.sc-mosaic__grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 12px;
	min-height: 560px;
	align-items: stretch;
}

.sc-mosaic__item {
	position: relative;
	display: block;
	text-decoration: none;
	color: var(--sc-white);
	background-color: var(--sc-plum);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	border-radius: 12px;
	transition: transform .5s ease;
}

.sc-mosaic__stack { display: flex; flex-direction: column; gap: 12px; }
.sc-mosaic__item--small { flex: 1 1 0; min-height: 0; }

.sc-mosaic__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(68,11,34,.84) 0%, rgba(68,11,34,.30) 50%, rgba(68,11,34,0) 100%);
	transition: background .3s ease;
	border-radius: 12px;
}

.sc-mosaic__item:hover .sc-mosaic__overlay {
	background: linear-gradient(to top, rgba(68,11,34,.92) 0%, rgba(68,11,34,.42) 55%, rgba(68,11,34,.10) 100%);
}

.sc-mosaic__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32px 28px 26px;
	z-index: 2;
}

.sc-mosaic__badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--sc-text);
	padding: 5px 12px;
	background: var(--sc-gold);
	border-radius: 3px;
	margin-bottom: 12px;
}

.sc-mosaic__title { color: var(--sc-white) !important; margin: 0 !important; line-height: 1.2 !important; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.sc-mosaic__title--hero { font-size: clamp(22px, 2.8vw, 38px) !important; font-weight: 800 !important; }
.sc-mosaic__title--small { font-size: clamp(14px, 1.5vw, 20px) !important; font-weight: 700 !important; }
.sc-mosaic__summary { color: rgba(255,255,255,.82) !important; font-size: 14px !important; margin: 10px 0 0 !important; line-height: 1.55 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1024px) {
	.sc-mosaic { padding: 12px 24px 0; }
	.sc-mosaic__grid { gap: 10px; min-height: 480px; }
}

@media (max-width: 768px) {
	.sc-mosaic { padding: 12px 16px 0; }
	.sc-mosaic__grid { grid-template-columns: 1fr; height: auto; }
	.sc-mosaic__item--hero { height: 300px; }
	.sc-mosaic__stack { flex-direction: column; height: auto; gap: 8px; }
	.sc-mosaic__item--small { height: 160px; flex: none; }
}

@media (max-width: 480px) {
	.sc-mosaic__item--hero { height: 240px; }
	.sc-mosaic__item--small { height: 130px; }
}

/* === TICKER === */

/* Plum band, gold label - solid colours only, no rgba */
.sc-ticker {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	margin: 2rem auto 0;
	max-width: calc(var(--sc-max-width) - 80px);
	background: var(--sc-plum);
	color: var(--sc-white);
}

/* Gold is a surface here, so text is plum - white-on-gold is the .sc-btn--gold exception only */
.sc-ticker__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: .75rem 1.25rem;
	background: var(--sc-gold);
	color: var(--sc-plum);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* min-width:0 is LOAD-BEARING: without it the flex child won't shrink and the marquee pushes the label off the band */
.sc-ticker__inner { flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* Duration is set by site.js from track width; this value is only the pre-script fallback */
.sc-ticker__track {
	display: flex;
	width: max-content;
	animation: sc-ticker-scroll var(--sc-ticker-duration, 26s) linear infinite;
	will-change: transform;
}

.sc-ticker__set { display: flex; }

.sc-ticker:hover .sc-ticker__track { animation-play-state: paused; }

.sc-ticker__item {
	flex-shrink: 0;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: .75rem 1.75rem;
	color: var(--sc-white);
	white-space: nowrap;
}

.sc-ticker__sep { flex-shrink: 0; color: var(--sc-gold); font-size: .625rem; line-height: 1; align-self: center; }

/* Moving-track copies are aria-hidden + tabindex=-1 (mouse only); the sr-only list carries the real links */
a.sc-ticker__item { text-decoration: none; }
a.sc-ticker__item:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Keyboard path: sr-only list shows as a static band while focused (WCAG 2.4.7).
   (0,3,0) beats .sr-only (0,1,0) regardless of order */
.sc-ticker:focus-within { position: relative; }
.sc-ticker .sc-ticker__list:focus-within {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 .5rem;
	clip: auto;
	overflow-x: auto;
	white-space: nowrap;
	list-style: none;
	background: var(--sc-plum);
}
.sc-ticker .sc-ticker__list:focus-within li {
	flex-shrink: 0;
	padding: .75rem 1rem;
	color: var(--sc-white);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.sc-ticker .sc-ticker__list a { color: var(--sc-white); text-decoration: none; }
.sc-ticker .sc-ticker__list a:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; text-decoration: underline; }

@media (max-width: 1024px) { .sc-ticker { max-width: calc(100% - 48px); } }

@media (max-width: 640px) {
	.sc-ticker { max-width: calc(100% - 32px); }
	.sc-ticker__header { padding: .75rem .85rem; letter-spacing: .1em; }
	.sc-ticker__item { padding: .75rem 1.25rem; }
}

/* Reduced motion: collapse to one set and stop - .sc-ticker__set wrappers exist for this rule */
@media (prefers-reduced-motion: reduce) {
	.sc-ticker__track { animation: none; }
	.sc-ticker__set + .sc-ticker__set { display: none; }
	.sc-ticker__set .sc-ticker__sep:last-child { display: none; }
	.sc-ticker__inner { overflow-x: auto; }
}

@keyframes sc-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-33.333%); }
}

/* === SITE ALERT BANNER (sc-alert) ===
   Message never wraps; site.js adds .is-scrolling only when it overflows */

.sc-alert {
	background: var(--sc-alert);
	color: var(--sc-white);
	min-height: var(--sc-alert-height);
	border-bottom: 1px solid rgba(0,0,0,.14);
	display: flex;
	align-items: center;
}

.sc-alert__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: .75rem;
	min-width: 0;
}

.sc-alert__icon {
	flex-shrink: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--sc-white);
}

.sc-alert__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.sc-alert__track {
	display: inline-flex;
	width: max-content;
	white-space: nowrap;
	will-change: transform;
}

.sc-alert.is-scrolling .sc-alert__track {
	animation: sc-alert-marquee var(--sc-alert-duration, 20s) linear infinite;
}

.sc-alert:hover .sc-alert__track,
.sc-alert:focus-within .sc-alert__track {
	animation-play-state: paused;
}

.sc-alert__msg {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--sc-white);
}

/* Original and JS clone both carry the gap so the two-copy track loops at translateX(-50%) */
.sc-alert.is-scrolling .sc-alert__msg { padding-right: 4rem; }

@keyframes sc-alert-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
	.sc-alert__inner { padding: 0 24px; }
}
@media (max-width: 640px) {
	.sc-alert__inner { padding: 0 16px; }
}

/* Reduced motion: no animation; overflow becomes horizontally scrollable */
@media (prefers-reduced-motion: reduce) {
	.sc-alert.is-scrolling .sc-alert__track { animation: none; }
	.sc-alert.is-scrolling .sc-alert__viewport { overflow-x: auto; }
}

.sc-section--flush { padding: 0; }

/* === HOTEL OVERVIEW === */

.sc-hotel__short-desc { font-size: 1.0625rem; line-height: 1.75; color: rgba(0,0,0,.7); margin-bottom: 1.5rem; }
.sc-hotel__quick-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.sc-hotel__quick-facts li { font-size: .9375rem; color: rgba(0,0,0,.65); }
.sc-hotel__quick-facts strong { color: var(--sc-text); }
.sc-hotel__amenities { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-hotel__amenities li { font-size: .8125rem; font-weight: 600; padding: .35rem .9rem; background: rgba(220,183,65,.1); border: 1px solid rgba(220,183,65,.25); border-radius: 50px; color: var(--sc-text); }
.sc-hotel__price { font-size: 1rem; color: rgba(0,0,0,.55); margin-bottom: 1.5rem; }
.sc-hotel__price-amount { font-size: 1.375rem; font-weight: 800; color: var(--sc-text); }

.sc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sc-gallery__item { aspect-ratio: 4/3; overflow: hidden; background: #e8e8e8; }
.sc-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }

/* === OPENING HOURS (_OpeningHours.cshtml) === */
/* Full-bleed band: the gradient is on the <section>, not the aside */
.sc-oh__layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
/* Aside sits on .sc-surface--grad: components below restate colours or they render plum-on-plum */
/* Sticky kept so the heading doesn't scroll away past a tall card stack */
.sc-oh__aside { position: sticky; top: calc(var(--sc-nav-height) + 24px); }
.sc-oh__cards { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* .sc-oh__card MUST restate its own color - the band's color would otherwise inherit into the card text */
.sc-oh__card { background: #F2F0EA; border: 0; border-radius: var(--sc-radius-card); padding: 22px 26px; color: var(--sc-text); }
.sc-oh__card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sc-oh__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.sc-oh__row:last-child { border-bottom: none; }
.sc-oh__left { flex: 0 1 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Opaque border + transparent fill so the pill reads the same on plain and active cards */
.sc-oh__pill { display: inline-block; background: transparent; border: 1px solid #C9AE72; color: #7A5B2E; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 6px 15px; border-radius: var(--sc-radius-btn); line-height: 1.3; white-space: nowrap; font-family: var(--sc-font); }
.sc-oh__days { font-size: .875rem; font-weight: 600; color: var(--sc-text); }
.sc-oh__hours { flex: 1; text-align: right; padding-left: 16px; font-size: .875rem; font-weight: 500; color: var(--sc-plum); line-height: 1.55; }
/* Closed state colour #6E6A62 chosen for AA contrast - do not revert to #a0a0a0 (fails) */
.sc-oh__hours--closed { font-weight: 600; color: #6E6A62; text-transform: uppercase; letter-spacing: .05em; font-size: .8125rem; }
.sc-oh__note { font-size: .9375rem; font-style: normal; color: var(--sc-white); line-height: 1.6; margin: 18px 0 0; max-width: 46ch; }

/* Active season card: site.js adds .is-active to the card. Subtle by instruction - fill change only, no border/shadow/scale */
.sc-oh__card--season.is-active { background: #F7F1E0; }
/* NOW chip always in markup, revealed only when active - keeps highlight a pure JS class toggle */
.sc-oh__now { display: none; flex-shrink: 0; background: #2A0512; color: var(--sc-white); font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--sc-radius-btn); }
.sc-oh__card--season.is-active .sc-oh__now { display: inline-block; }

/* Special hours: site.js adds .is-active / sets hidden by date. New blocks on purpose - don't merge into the season comma groups */
.sc-oh__card--special.is-active { background: #F7F1E0; }
.sc-oh__card--special.is-active .sc-oh__now { display: inline-block; }
/* Sits on the band, so it states its own colour */
.sc-oh__group-label { margin: 8px 0 -6px; font-family: var(--sc-font); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-gold-60); }
/* `hidden` must win even if a later rule gives these a display value */
.sc-oh__card[hidden],
.sc-oh__group-label[hidden] { display: none; }

/* Below 900px: stack and drop sticky. Plain @media - static file (never @@media) */
@media (max-width: 900px) {
	.sc-oh__layout { grid-template-columns: 1fr; gap: 28px; }
	.sc-oh__aside { position: static; }
}
@media (max-width: 600px) {
	.sc-oh__card { padding: 16px 18px; }
	.sc-oh__row { align-items: flex-start; flex-direction: column; gap: 6px; }
	.sc-oh__hours { text-align: left; padding-left: 0; }
}

.sc-hero--hotel { min-height: 600px; }
.sc-hero__eyebrow { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-gold); margin-bottom: .875rem; }
.sc-hero__stars { font-size: 1.25rem; color: var(--sc-gold); margin: 0 0 .75rem; letter-spacing: 2px; }
/* Half star: same glyph, right half clipped, so it inherits the star row's colour */
.sc-star--half { display: inline-block; clip-path: inset(0 50% 0 0); }
.sc-hero__tagline { font-size: 1.125rem; font-weight: 400; color: rgba(255,255,255,.82); margin: 0 0 1.75rem; line-height: 1.5; }

@media (max-width: 900px) { .sc-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.sc-gallery { grid-template-columns: repeat(2, 1fr); }
	.sc-hero--hotel { min-height: 480px; }
}

/* === RESPONSIVE - NAV BREAKPOINT (<=1024px) === */

@media (max-width: 1024px) {
	.sc-nav__links    { display: none; }
	.sc-nav__login-btn { display: none; }
	.sc-nav__login-logo { display: none; }
	.sc-nav__hamburger { display: flex; }

	.sc-nav__inner {
		display: grid;
		grid-template-columns: 2.25rem 1fr 2.25rem;
		align-items: center;
		gap: 0;
		padding: 0 1rem;
	}

	.sc-nav__hamburger { grid-column: 1; justify-self: start; }
	.sc-nav__logo { grid-column: 2; justify-self: center; }
	.sc-nav__actions { grid-column: 3; justify-self: end; }

	.sc-nav__search-form { padding: 0 1rem; }

	.sc-card-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.sc-hotels-grid { grid-template-columns: repeat(2, 1fr); }
	.sc-promos__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tight nav band - prevents SHOW logo clipping with the More dropdown */
@media (min-width: 1025px) and (max-width: 1280px) {
	.sc-nav__inner { gap: 1.25rem; padding: 0 24px; }
	.sc-nav__links { gap: 22px; }
	.sc-nav__link,
	.sc-nav__dropdown-toggle { font-size: 10px; letter-spacing: 1.5px; }
	.sc-nav__actions { gap: 8px; }
}

@media (min-width: 1025px) {
	.sc-drawer { display: none; }
}

@media (max-width: 900px) {
	.sc-card-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.sc-section { padding: 2.5rem 0; }
	.sc-container { padding: 0 1rem; }
	.sc-map { height: 280px; }
	.sc-footer__main { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
	.sc-section-nav__inner { padding: 0 1rem; }
	.sc-section-nav__link { padding: 0 .875rem; font-size: .75rem; }
	.sc-breadcrumb__inner { padding: 0 1rem; }
}

@media (max-width: 640px) {
	:root { --sc-search-height: 44px; }
	.sc-r20__detail { display: none; }
	.sc-r20__age { display: none; }
	.sc-card-grid--cols-2, .sc-card-grid--cols-3, .sc-card-grid--cols-4 { grid-template-columns: 1fr; }
	.sc-card-grid-section { padding: 2.5rem 0; }
	.sc-hotels-grid { grid-template-columns: 1fr; }
	.sc-promos__grid { grid-template-columns: 1fr; }
	/* Breakpoint only retunes the custom properties - --faq-col drives indent and grid, don't duplicate the number */
	.sc-faq {
		--faq-col: 2.25rem;
		--faq-pad: 1rem;
		--faq-gap: .75rem;
		padding: 2.5rem 0;
	}
	.sc-faq__inner { padding: 0 1rem; }
	.sc-faq__question { font-size: .9375rem; padding: 1.125rem 0; }
	.sc-faq__question::before { font-size: 1.125rem; }
	.sc-footer__rg-inner { flex-direction: column; align-items: flex-start; gap: .375rem; }
	.sc-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
	.sc-footer__legal-links { flex-wrap: wrap; gap: .75rem 1rem; }
	.sc-hero--home .sc-hero__ctas { flex-direction: column; }
	.sc-menus__inner { padding: 0 1rem; }
	.sc-menus { padding: 2rem 0 3rem; }
	.sc-menus__section-header { flex-direction: column; align-items: flex-start; }
	.sc-nav__search-form { padding: 0 1rem; }
	.sc-footer__main { grid-template-columns: 1fr; padding: 2rem 1rem 1.5rem; gap: 1.5rem; }
	.sc-r20__inner { padding: 0 1rem; }
}

@media (max-width: 600px) {
	.sc-hero { min-height: 420px; }
	.sc-hero--tall { min-height: 520px; }
	.sc-hero__content { padding: 2rem 1rem 2.5rem; }
	.sc-hero__ctas { flex-direction: column; }
	.sc-hero__ctas .sc-btn { width: 100%; justify-content: center; }
}

/* === UNIVERSAL FLEX GRID === */

:root {
	--g-gap: 1.5rem;
	--g-gap-sm: 1.25rem;
}

.sc-flex-grid { display: flex; flex-wrap: wrap; gap: var(--g-gap); margin-top: 1.5rem; }

.sc-flex-card {
	flex: 0 0 calc(25% - 1.125rem);
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--sc-white);
	border: 1px solid rgba(0,0,0,.08);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: var(--sc-text);
	transition: box-shadow .25s, transform .25s;
}

@media (min-width: 1101px) {
	/* Base 4-up; :nth-child(4n+1):nth-last-child(K) rebalances the tail into rows of 3 (K=3,6,9 for total%4=3,2,1) */

	/* total % 4 == 3  →  …+3 */
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(3),
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(3) ~ .sc-flex-card {
		flex: 0 0 calc(33.333% - 1rem);
	}

	/* total % 4 == 2  →  …+3+3 */
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(6),
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(6) ~ .sc-flex-card {
		flex: 0 0 calc(33.333% - 1rem);
	}

	/* total % 4 == 1  →  …+3+3+3 */
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(9),
	.sc-flex-grid > .sc-flex-card:nth-child(4n+1):nth-last-child(9) ~ .sc-flex-card {
		flex: 0 0 calc(33.333% - 1rem);
	}

	/* n=2 single row → 2-up (nothing above to balance against) */
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(2),
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(2) ~ .sc-flex-card {
		flex: 0 0 calc(50% - .75rem);
	}

	/* n=5 → 3+2 (only irreducible case; trailing pair sits at 50%) */
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(5),
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(5) ~ .sc-flex-card:nth-child(-n+3) {
		flex: 0 0 calc(33.333% - 1rem);
	}
	.sc-flex-grid > .sc-flex-card:first-child:nth-last-child(5) ~ .sc-flex-card:nth-child(n+4) {
		flex: 0 0 calc(50% - .75rem);
	}
}

.sc-subpage-grid { display: flex; flex-wrap: wrap; gap: var(--g-gap-sm); margin-top: 2rem; }

.sc-subpage-card {
	flex: 0 0 calc(25% - 0.9375rem);
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--sc-white);
	border-radius: var(--sc-radius-card);
	padding: 2rem 1.75rem 1.75rem;
	text-decoration: none;
	color: var(--sc-text);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

@media (min-width: 1101px) {
	/* Same tail-rebalancing as .sc-flex-grid: max 4 per row, tail in rows of 3 */
	/* total % 4 == 3  →  …+3 */
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(3),
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(3) ~ .sc-subpage-card {
		flex: 0 0 calc(33.333% - 0.84rem);
	}
	/* total % 4 == 2  →  …+3+3 */
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(6),
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(6) ~ .sc-subpage-card {
		flex: 0 0 calc(33.333% - 0.84rem);
	}
	/* total % 4 == 1  →  …+3+3+3 */
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(9),
	.sc-subpage-grid > .sc-subpage-card:nth-child(4n+1):nth-last-child(9) ~ .sc-subpage-card {
		flex: 0 0 calc(33.333% - 0.84rem);
	}
	/* n=2 single row (irreducible) */
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(2),
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(2) ~ .sc-subpage-card {
		flex: 0 0 calc(50% - 0.625rem);
	}
	/* n=5 → 3+2 (irreducible) */
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(5),
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(5) ~ .sc-subpage-card:nth-child(-n+3) {
		flex: 0 0 calc(33.333% - 0.84rem);
	}
	.sc-subpage-grid > .sc-subpage-card:first-child:nth-last-child(5) ~ .sc-subpage-card:nth-child(n+4) {
		flex: 0 0 calc(50% - 0.625rem);
	}
}

@media (min-width: 641px) and (max-width: 1100px) {
	.sc-subpage-card { flex: 0 0 calc(50% - 0.625rem); }
}

@media (max-width: 640px) {
	.sc-subpage-card { flex: 0 0 100%; }
}

.sc-flex-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); transform: translateY(-2px); }
.sc-flex-card__img-wrap { aspect-ratio: 16 / 10; overflow: hidden; flex-shrink: 0; }
.sc-flex-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; display: block; }
.sc-flex-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; gap: .5rem; }
.sc-flex-card__title { font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--sc-text); text-decoration: none; }
.sc-flex-card__desc { font-size: .875rem; line-height: 1.6; color: rgba(0,0,0,.6); margin: 0; text-decoration: none; }
.sc-flex-card__facts { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin-bottom: .25rem; }
.sc-flex-card__fact { display: flex; align-items: center; gap: .3rem; font-size: .8125rem; color: var(--sc-plum); text-decoration: none; }
.sc-flex-card__fact .material-symbols-outlined { font-size: 16px; color: var(--sc-gold); }
.sc-flex-card__price { font-size: .875rem; color: rgba(0,0,0,.55); margin: 0; text-decoration: none; }
.sc-flex-card__price strong { color: var(--sc-text); font-weight: 700; }
.sc-flex-card__cta { margin-top: auto; font-size: .8125rem; padding: .5rem 1.25rem; align-self: flex-start; text-decoration: none; }

.sc-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.sc-section-header__link { font-size: .875rem; font-weight: 600; color: var(--sc-plum); text-decoration: none; white-space: nowrap; transition: opacity .2s; }
.sc-section-header__link:hover { opacity: .75; }

.sc-hotel-brand--grand .sc-flex-card { background: var(--hotel-card-bg); border-color: var(--hotel-card-border); }
.sc-hotel-brand--grand .sc-flex-card__title { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-flex-card__desc { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-flex-card__fact { color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-flex-card__fact .material-symbols-outlined { color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-flex-card__price { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-flex-card__price strong { color: var(--hotel-text); }

@media (max-width: 1100px) {
	.sc-flex-card,
	.sc-flex-grid .sc-flex-card:first-child:nth-last-child(n),
	.sc-flex-grid .sc-flex-card:first-child:nth-last-child(n) ~ .sc-flex-card {
		flex: 0 0 calc(50% - .75rem);
	}
}

/* 2-up regime (641–1100px): a lone trailing tile fills the row. */
@media (min-width: 641px) and (max-width: 1100px) {
	.sc-flex-grid > .sc-flex-card:nth-child(2n+1):nth-last-child(1) {
		flex: 0 0 100%;
	}
}

@media (max-width: 640px) {
	.sc-flex-card,
	.sc-flex-grid .sc-flex-card:first-child:nth-last-child(n),
	.sc-flex-grid .sc-flex-card:first-child:nth-last-child(n) ~ .sc-flex-card {
		flex: 0 0 100%;
	}
}

@media (max-width: 480px) {
	.sc-nav__inner { padding: 0 1rem; }
	.sc-footer__main { grid-template-columns: 1fr; padding: 2.5rem 1rem 2rem; }
}

/* === CONTENT PAGE WITH SIDE NAVIGATION === */

.sc-content-with-sidenav {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 3rem;
	align-items: start;
	padding-top: 3rem;
	padding-bottom: 4rem;
}

.sc-sidenav-col {
	position: sticky;
	top: calc(var(--sc-nav-height) + var(--sc-search-height) + 1.5rem);
	max-height: calc(100vh - var(--sc-nav-height) - var(--sc-search-height) - 3rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(220,183,65,.3) transparent;
}

.sc-sidenav-col::-webkit-scrollbar { width: 4px; }
.sc-sidenav-col::-webkit-scrollbar-track { background: transparent; }
.sc-sidenav-col::-webkit-scrollbar-thumb { background: rgba(220,183,65,.3); border-radius: 2px; }

.sc-main-col {
	min-width: 0;
}

.sc-sidenav {
	font-family: var(--sc-font);
}

.sc-sidenav__heading {
	display: block;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sc-text);
	text-decoration: none;
	margin-bottom: 1.25rem;
	padding-bottom: .875rem;
	border-bottom: 2px solid rgba(220,183,65,.25);
	transition: color .15s;
}

.sc-sidenav__heading:hover { color: var(--sc-plum); }
.sc-sidenav__heading.is-active { color: var(--sc-plum); }

.sc-sidenav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sc-sidenav__item {
	border-bottom: 1px solid rgba(0,0,0,.06);
}

.sc-sidenav__item:last-child {
	border-bottom: none;
}

.sc-sidenav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .625rem 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(0,0,0,.55);
	text-decoration: none;
	transition: color .15s;
	width: 100%;
}

.sc-sidenav__link:hover { color: var(--sc-text); }
.sc-sidenav__link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; border-radius: 2px; }

.sc-sidenav__link.is-active {
	color: var(--sc-plum);
	font-weight: 700;
}

.sc-sidenav__indicator {
	flex-shrink: 0;
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1;
	color: rgba(0,0,0,.3);
	min-width: 1rem;
	text-align: right;
	transition: color .15s;
}

.sc-sidenav__link:hover .sc-sidenav__indicator,
.sc-sidenav__link.is-active .sc-sidenav__indicator {
	color: var(--sc-gold);
}

.sc-sidenav__sub {
	list-style: none;
	margin: 0 0 .5rem;
	padding: 0 0 0 .875rem;
	border-left: 2px solid rgba(220,183,65,.25);
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sc-sidenav__sub-item {
	border-bottom: none;
}

.sc-sidenav__sub-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .5rem 0;
	font-size: .8125rem;
	font-weight: 500;
	color: rgba(0,0,0,.5);
	text-decoration: none;
	transition: color .15s;
}

.sc-sidenav__sub-link:hover { color: rgba(0,0,0,.8); }
.sc-sidenav__sub-link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; border-radius: 2px; }

.sc-sidenav__sub-link.is-active {
	color: var(--sc-plum);
	font-weight: 700;
}

.sc-sidenav__sub--deep {
	padding-left: .75rem;
	border-left: 2px solid rgba(220,183,65,.12);
	margin-top: .125rem;
}

.sc-sidenav__sub--deep .sc-sidenav__sub-link {
	font-size: .75rem;
	font-weight: 400;
	padding: .375rem 0;
}

@media (max-width: 900px) {
	.sc-content-with-sidenav {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding-top: 2rem;
	}

	.sc-sidenav-col {
		position: static;
		max-height: none;
		overflow-y: visible;
		border-bottom: 2px solid rgba(0,0,0,.08);
		padding-bottom: 1.5rem;
	}
}

/* ── Side nav mobile collapse toggle (<=900px) ── panel opens via .is-open (site.js) */

/* Visual props live on the base so the mobile query only flips display */
.sc-sidenav__toggle {
	display: none;
	width: 100%;
	align-items: center;
	gap: .75rem;
	padding: .875rem 1rem;
	background: #faf7f1;
	border: 1px solid rgba(220,183,65,.3);
	border-radius: 10px;
	font-family: var(--sc-font);
	text-align: left;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.sc-sidenav__toggle:hover { background: #f5efe2; }
.sc-sidenav__toggle:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-sidenav__toggle[aria-expanded="true"] { background: #f5efe2; border-color: var(--sc-gold); }

.sc-sidenav__toggle-icon {
	font-size: 1.375rem;
	line-height: 1;
	color: var(--sc-gold);
	flex-shrink: 0;
}
.sc-sidenav__toggle-current {
	flex: 1;
	min-width: 0;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sc-plum);
}
.sc-sidenav__toggle-chevron {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--sc-plum);
	flex-shrink: 0;
	transition: transform .25s;
}
.sc-sidenav__toggle[aria-expanded="true"] .sc-sidenav__toggle-chevron { transform: rotate(180deg); }

@media (max-width: 900px) {
	.sc-sidenav__toggle { display: flex; }

	.sc-sidenav-col { border-bottom: none; padding-bottom: 0; }

	.sc-sidenav__panel { display: none; padding-top: 1.25rem; }
	.sc-sidenav.is-open .sc-sidenav__panel { display: block; }
}

/* === FLEX CARD EXTENSIONS (restaurant / dining landing) === */

.sc-flex-card__meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.sc-flex-card__category { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-plum); }
.sc-flex-card__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,.25); flex-shrink: 0; }
.sc-flex-card__price-range { font-size: .6875rem; font-weight: 600; color: rgba(0,0,0,.45); letter-spacing: .04em; }
.sc-flex-card__footer { display: flex; align-items: center; gap: .625rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.07); }
.sc-flex-card__ctas { display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-flex-card__view { display: inline-flex; align-items: center; padding: .45rem 1rem; border: 2px solid rgba(0,0,0,.15); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--sc-text); transition: border-color .2s, background .2s; cursor: pointer; }
.sc-flex-card__view:hover { border-color: var(--sc-gold); background: rgba(220,183,65,.06); }
.sc-flex-card__book { display: inline-flex; align-items: center; padding: .45rem 1rem; background: var(--sc-gold); color: var(--sc-text); border-radius: var(--sc-radius-btn); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; cursor: pointer; }
.sc-flex-card__book:hover { opacity: .88; }

/* Stretched-link card: Book/Order controls layered above - a SevenRooms trigger can't nest inside a navigating <a> */
.sc-flex-card { position: relative; }
.sc-flex-card__stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sc-flex-card__stretch:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }
.sc-flex-card__book,
.sc-flex-card__order { position: relative; z-index: 2; }
.sc-flex-card__book:focus-visible,
.sc-flex-card__order:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-flex-card__order {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem 1rem;
	background: transparent;
	color: var(--sc-plum);
	border: 2px solid var(--sc-gold);
	border-radius: var(--sc-radius-btn);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s, color .2s;
	cursor: pointer;
}
.sc-flex-card__order:hover { background: var(--sc-gold); color: var(--sc-text); }
.sc-flex-card__order .material-symbols-outlined { font-size: 16px; }

/* ── CONTENT-PAGE EMBED (Tumult Hype) ── aspect-ratio switches on the iframe's own width (container query) at 950px */

.sc-embed {
	width: 100%;
	margin: 2rem 0;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	container-type: inline-size;
}
.sc-embed__frame {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	aspect-ratio: 414 / 736;
}
@container (min-width: 950px) {
	.sc-embed__frame { aspect-ratio: 950 / 500; }
}
/* Two-column content layout (interim) */
.sc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sc-two-col > * { min-width: 0; }
@media (max-width: 768px) { .sc-two-col { grid-template-columns: 1fr; gap: 24px; } }

/* Specter Black on H1/hero only (kit bsg2bme ships 800). The ONLY font-family !important in the cascade -
   brand sheets must use !important to beat this bare h1, .sc-hero__heading, .sc-mosaic__title--hero rule */
h1,
.sc-hero__heading,
.sc-mosaic__title--hero {
	font-family: "specter", var(--sc-font) !important;
	font-weight: 800 !important;
}

/* ── Hero CTA + height consolidation ── */
/* Outline CTAs go white on heroes (plum-on-plum is invisible); elsewhere they stay plum */
.sc-hero .sc-btn--outline { color: var(--sc-white); border-color: var(--sc-white); }
.sc-hero .sc-btn--outline:hover { background: var(--sc-white); color: var(--sc-plum); }

/* Mobile: shorten heroes except those with stacked CTAs; :not(:has()) specificity beats per-variant heights (own block) */
@media (max-width: 600px) {
	.sc-hero:not(:has(.sc-hero__ctas .sc-btn)) { min-height: 280px; }
}

/* ── Nav More dropdown hover underline ── */
.sc-nav__more-link { position: relative; }
.sc-nav__more-link::after { content: ""; position: absolute; left: 1.25rem; bottom: .4rem; height: 2px; width: 0; background: var(--sc-gold); transition: width .2s ease; }
.sc-nav__more-link:hover::after,
.sc-nav__more-link:focus-visible::after { width: 1.5rem; }

/* ── Content-body h2 gold underline (h3 stays clean) ── */
.sc-rte h2::after,
.sc-prose h2::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: .6rem; background: var(--sc-gold); border-radius: 2px; }

/* ── Restaurant menus: whole row clickable via stretched title link ── */
.sc-restaurant-menus__item { position: relative; }
.sc-restaurant-menus__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sc-restaurant-menus__item:hover .sc-restaurant-menus__badge { background: var(--sc-plum); color: var(--sc-white); }

/* ── 404 page (NotFound.cshtml) ── */
.sc-404 { text-align: center; }
.sc-404__intro { max-width: 660px; margin: 0 auto; padding-top: 1.5rem; }
.sc-404__code { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .75rem; }
.sc-404__title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; color: var(--sc-text); margin: 0 0 1rem; }
.sc-404__lead { font-size: 1.0625rem; line-height: 1.7; color: rgba(0, 0, 0, .6); margin: 0 0 1.75rem; }
.sc-404__cta { justify-content: center; }
.sc-404__sections-title { font-size: 1.25rem; font-weight: 700; color: var(--sc-text); margin: 3rem 0 1.5rem; }
.sc-404__grid { text-align: left; }

.sc-404-card { position: relative; display: flex; align-items: flex-end; min-height: 150px; border-radius: var(--sc-radius-card); overflow: hidden; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); transition: transform .2s, box-shadow .2s; }
.sc-404-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); }
.sc-404-card:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }
.sc-404-card--media { background: var(--sc-plum); color: var(--sc-white); }
.sc-404-card--text { background: #f5f5f5; color: var(--sc-text); border: 1px solid rgba(0, 0, 0, .08); align-items: center; }
.sc-404-card__media { position: absolute; inset: 0; z-index: 0; }
.sc-404-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sc-404-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(68, 11, 34, .85), rgba(68, 11, 34, .15)); }
.sc-404-card__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: .625rem; width: 100%; padding: 1.25rem 1.4rem; }
.sc-404-card__icon { font-size: 1.5rem; color: var(--sc-plum); flex-shrink: 0; }
.sc-404-card__label { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.sc-404-card__arrow { margin-left: auto; font-size: 1.25rem; flex-shrink: 0; opacity: .85; transition: transform .2s; }
.sc-404-card:hover .sc-404-card__arrow { transform: translateX(3px); }

@media (max-width: 600px) {
	.sc-404__sections-title { margin-top: 2rem; }
}

/* === CAROUSEL (blockCarousel; JS: initCarousels) === */
.sc-carousel { position: relative; width: 100%; }
.sc-carousel__viewport {
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
.sc-carousel__viewport.is-dragging { cursor: grabbing; }
.sc-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	will-change: transform;
}

.sc-carousel__tile {
	position: relative;
	flex: 0 0 auto;
	width: 80vw;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	border-radius: var(--sc-radius-card, 14px);
	overflow: hidden;
	background: var(--sc-dark, #2a2a2a);
}
.sc-carousel__tile:has(.sc-carousel__face--back) { cursor: pointer; }
.sc-carousel__tile:focus-visible { outline: 3px solid var(--sc-gold, #c7a572); outline-offset: 2px; }

.sc-carousel__media {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
}
.sc-carousel__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.68) 100%);
}

.sc-carousel__face {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	padding: 1.5rem;
	text-align: center;
	transition: opacity .35s ease, visibility .35s ease;
}
.sc-carousel__face--front { opacity: 1; visibility: visible; padding: 0; }
.sc-carousel__face--back  { opacity: 0; visibility: hidden; }
.sc-carousel__tile.is-flipped .sc-carousel__face--front { opacity: 0; visibility: hidden; }
.sc-carousel__tile.is-flipped .sc-carousel__face--back  { opacity: 1; visibility: visible; }

.sc-carousel__logo {
	width: 100%; height: 100%;
	object-fit: contain;
	pointer-events: none;
}
.sc-carousel__text {
	margin: 0;
	color: var(--sc-white, #fff);
	font-family: var(--sc-font, 'Montserrat', sans-serif);
	font-size: clamp(.82rem, 1.5vw, 1rem);
	font-weight: 500;
	line-height: 1.45;
	max-height: 100%;
	overflow: auto;
}
a.sc-carousel__text--link { text-decoration: none; }
a.sc-carousel__text--link:hover { text-decoration: underline; }
a.sc-carousel__text--link:focus-visible { text-decoration: underline; }

@media (min-width: 768px) {
	.sc-carousel__tile { width: 42vw; }
}
@media (min-width: 1024px) {
	.sc-carousel__tile { width: 30vw; }
}
@media (min-width: 1280px) {
	.sc-carousel__tile { width: 23vw; max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-carousel__face { transition: none; }
}

/* === IMAGE-LINK HOVER - CARD LIFT SUPPRESSION ===
   Must stay after per-component :hover rules (equal specificity). Images have NO hover treatment - don't add one back */

.sc-hp-card:hover,
.sc-evc:hover,
.sc-hp-duo:hover,
.sc-flex-card:hover {
	transform: none !important;
	box-shadow: none !important;
}

.sc-event-card:hover,
.sc-restaurant-card:hover,
.sc-hotel-card:hover {
	transform: none !important;
	box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
}

.sc-404-card:hover {
	transform: none !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}

/* === TABLES - RTE content tables (front end) - mirror of rte-styles.css; change one, change the other ===
   Scoped to table:not([class]) (front-end only) - never add an unscoped table/th/td rule */
table:not([class]) {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--sc-text);
	background: var(--sc-white);
}
table:not([class]) th,
table:not([class]) td {
	padding: .7rem .95rem;
	border: 1px solid #e6e2da;
	text-align: left;
	vertical-align: top;
}
table:not([class]) th > p,
table:not([class]) td > p { margin: 0 0 .4rem; }
table:not([class]) th > p:last-child,
table:not([class]) td > p:last-child { margin-bottom: 0; }
table:not([class]) > thead > tr > th,
table:not([class]) > thead > tr > td {
	background: #f7f5f2;
	color: var(--sc-plum);
	font-weight: 700;
	border-bottom: 2px solid var(--sc-gold);
}
/* RTE tables with no <thead>: first row is header if it has a bold cell. :has() in its own block */
table:not([class]) > tbody > tr:first-child:has(> td > p > strong) > td {
	background: #f7f5f2;
	color: var(--sc-plum);
	font-weight: 700;
	border-bottom: 2px solid var(--sc-gold);
}
table:not([class]) > tbody > tr:nth-child(even) > td { background: #faf8f5; }
@media (hover: hover) {
	table:not([class]) > tbody > tr:hover > td { background: #f3efe8; }
}
@media (max-width: 600px) {
	table:not([class]) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: .875rem;
	}
	table:not([class]) th,
	table:not([class]) td { padding: .55rem .7rem; }
}

/* === FOOTER - SHIELDED WIDGET === (gated by showShielded in _Footer; logo served from shielded.co.nz) */
.sc-footer__social-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .9rem;
}
.sc-footer__shielded {
	display: inline-flex;
	align-items: center;
	padding-left: .9rem;
	border-left: 1px solid rgba(255,255,255,.14);
}
.sc-footer__shielded-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	border-radius: 8px;
	transition: opacity .2s;
}
.sc-footer__shielded-link:hover { opacity: .8; }
.sc-footer__shielded-link:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; opacity: 1; }
.sc-footer__shielded-link img { height: 2.25rem; width: 2.25rem; display: block; }

/* === OPENING HOURS - LIVE STATUS BADGE (initOpeningStatus) ===
   Slots ship hidden; JS reveals them. display:contents wrappers so an unfilled slot adds no flex gap */
.sc-oh__status,
.sc-tile-status,
.sc-oh__chip {
	align-items: center;
	gap: .4rem;
	font-family: var(--sc-font);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.sc-oh__status:not([hidden]),
.sc-tile-status:not([hidden]),
.sc-oh__chip:not([hidden]) {
	display: inline-flex;
}
.sc-oh__status::before,
.sc-tile-status::before,
.sc-oh__chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #a09b90;
}
.sc-oh__status[data-state="open"]::before,
.sc-tile-status[data-state="open"]::before,
.sc-oh__chip[data-state="open"]::before { background: #52AE32; }
.sc-oh__status[data-state="soon"]::before,
.sc-tile-status[data-state="soon"]::before,
.sc-oh__chip[data-state="soon"]::before { background: #EF9F27; }
.sc-oh__status[data-state="closed"]::before,
.sc-tile-status[data-state="closed"]::before,
.sc-oh__chip[data-state="closed"]::before { background: #a09b90; }
.sc-oh__status[data-state="open"],
.sc-tile-status[data-state="open"] { color: #3B6D11; }
.sc-oh__status[data-state="soon"],
.sc-tile-status[data-state="soon"] { color: #854F0B; }
.sc-oh__status[data-state="closed"],
.sc-tile-status[data-state="closed"] { color: #6b6b63; }
/* On the band the status is a pale-gold pill so the dark state colours stay legible.
   Scoped to .sc-oh__aside on purpose - not global */
.sc-oh__aside .sc-oh__status:not([hidden]) {
	margin-top: 22px;
	background: #EFE3B8;
	padding: .4rem .85rem;
	border-radius: var(--sc-radius-btn);
	font-size: .8125rem;
}
.sc-oh__aside .sc-oh__status[data-state="open"] { color: #2F5A0E; }
.sc-oh__aside .sc-oh__status[data-state="soon"] { color: #6E3F08; }
.sc-oh__aside .sc-oh__status[data-state="closed"] { color: #4A463F; }
.sc-oh__chip {
	background: rgba(255, 255, 255, .14);
	color: var(--sc-white);
	padding: .32rem .72rem;
	border-radius: 100px;
}
.sc-hero .sc-oh__chip { margin-bottom: 1.25rem; }
.sc-oh__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.sc-oh__head .sc-oh__title { margin-bottom: 0; }
/* .sc-oh__title inherits the band's white - adding a colour to it would break the aside */
.sc-tile-status-line,
.sc-oh__chip-slot { display: contents; }
/* Card heading for season or group name; highlight is on the card fill (.sc-oh__card--season.is-active), not here */
.sc-oh__season-head {
	font-family: var(--sc-font);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sc-plum);
}
.sc-oh__service {
	margin: .6rem 0 .1rem;
	font-family: var(--sc-font);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a6a38;
}
/* === TABLES - TIPTAP HEADER-ROW FIX + SCOPING ===
   Tiptap emits no <thead> (header row is tbody th); scoped to table:not([class]); mirror in rte-styles.css (unscoped there) */

/* Header row: <thead> (hand-authored) OR first tbody row of <th> (Tiptap emits no thead) */
table:not([class]) > thead > tr > th,
table:not([class]) > thead > tr > td,
table:not([class]) > tbody > tr:first-child > th {
	background: #f7f5f2;
	color: var(--sc-plum);
	font-weight: 700;
	border-bottom: 2px solid var(--sc-gold);
}

/* 2nd+ paragraphs in a header cell render as lighter sub-text - Tiptap strips <small>, so this is the only way */
table:not([class]) th > p ~ p {
	font-weight: 500;
	font-size: .8125rem;
	letter-spacing: 0;
	opacity: .75;
}

/* Zebra parity: Tiptap's header row sits in tbody and shifts striping - flip parity back.
   Isolated :has() blocks so engines without :has() keep default striping. */
table:not([class]):has(> tbody > tr:first-child > th) > tbody > tr:nth-child(even) > td {
	background: var(--sc-white);
}
table:not([class]):has(> tbody > tr:first-child > th) > tbody > tr:nth-child(odd) > td {
	background: #faf8f5;
}

/* Row hover !important beats the higher-specificity :has() parity rules; must stay scoped to table:not([class]) */
@media (hover: hover) {
	table:not([class]) > tbody > tr:hover > td { background: #f3efe8 !important; }
}

/* TABLES - NEUTRALISE TIPTAP COLUMN-RESIZER INLINE WIDTHS: !important is the only way to beat inline styles.
   Deliberately NOT mirrored in rte-styles.css; dragging a column in Tiptap has no effect on the live page. */
table:not([class]) { min-width: 0 !important; }
table:not([class]) > colgroup > col {
	width: auto !important;
	min-width: 0 !important;
}

/* === SEARCH PANEL === _SearchPanel.cshtml must carry NO inline <style> - it would out-rank this block */
.sc-search-panel {
	position: absolute;
	top: calc(var(--sc-nav-height) + var(--sc-search-height));
	left: 0;
	right: 0;
	z-index: 998;
	background: var(--sc-white);
	border-top: 2px solid var(--sc-gold);
	box-shadow: 0 8px 32px rgba(0,0,0,.12);
	max-height: 70vh;
	overflow-y: auto;
}
.sc-search-panel[hidden] { display: none; }

.sc-search-panel__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 1.5rem 40px 2rem;
}

/* --- Loading ------------------------------------------------ */
.sc-search-panel__loading {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: rgba(0,0,0,.5);
	font-size: .9375rem;
}
.sc-search-panel__spinner {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid rgba(220,183,65,.3);
	border-top-color: var(--sc-gold);
	border-radius: 50%;
	animation: sc-spin .7s linear infinite;
	flex-shrink: 0;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* MUST stay AFTER the __loading display:flex rule - author display beats UA [hidden], so the row never hides */
.sc-search-panel__loading[hidden],
.sc-search-panel__answer[hidden],
.sc-search-panel__error[hidden] { display: none; }

/* --- Answer body -------------------------------------------- */
.sc-search-panel__answer { font-size: .9375rem; line-height: 1.7; color: var(--sc-text); }
.sc-search-panel__answer p { margin: 0 0 .75rem; }
.sc-search-panel__answer p:last-child { margin-bottom: 0; }

/* --- AI summary ----------------------------------------------- */
/* Plain section, not a tinted card - no coloured panels or thick left border in search. __summary also serves /search page */
.sc-search-panel__summary-card,
.sc-search-panel__summary {
	padding: 0 0 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #ececec;
	width: 100%;
}
/* Rate-limited / unavailable: same section, plum eyebrow, no tint. */
.sc-search-panel__summary-card--unavailable,
.sc-search-panel__summary--unavailable { border-bottom-color: var(--sc-plum-20); }
/* Header text is Plum, not gold - gold text is only legible on plum/dark surfaces; gold only as the icon */
.sc-search-panel__summary-header {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-plum);
	margin-bottom: .75rem;
}
/* Material Symbols are font glyphs - size with font-size, not width/height */
.sc-search-panel__summary-icon {
	font-size: 1rem;
	line-height: 1;
	color: var(--sc-gold);
}
.sc-search-panel__summary-text { font-size: .9375rem; line-height: 1.6; color: var(--sc-text); }
.sc-search-panel__summary-text p { margin: 0 0 .5rem; }
.sc-search-panel__summary-text p:last-child { margin-bottom: 0; }

/* Contact links built by linkify(): same plum+underline as __facts-chip a. A class, not a descendant selector,
   so later anchors don't silently adopt it; beats global a { color: inherit }. */
.sc-search-panel__answer-link { color: var(--sc-plum); text-decoration: underline; overflow-wrap: anywhere; }
.sc-search-panel__answer-link:hover { text-decoration: none; }

/* --- Hits: top card, compact rows, footer --- */
/* Panel shape: summary, top hit card, up to two compact rows, 'See all N results'. __hit/__facts serve both panel and
   /search page. Cards are white + hairline border, never tinted, never a left border. */
.sc-search-panel__results-count {
	font-size: .875rem;
	color: rgba(0,0,0,.5);
	font-weight: 400;
}

.sc-search-panel__hits { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.sc-search-panel__hit {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	padding: 1.125rem 1.25rem;
	background-color: var(--sc-white);
	border: 1px solid #e2e2e2;
	border-radius: var(--sc-radius-card);
	min-width: 0;
}
.sc-search-panel__hit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sc-search-panel__hit-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #111;
	text-decoration: none;
}
.sc-search-panel__hit-title:hover { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-search-panel__hit-summary { margin: 0; font-size: .875rem; color: #6b6b6b; line-height: 1.5; }

/* Compact rows — bordered rows, not cards (a dense list). */
.sc-search-panel__rows { display: flex; flex-direction: column; }
.sc-search-panel__row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem .25rem;
	border-bottom: 1px solid #e6e6e6;
	color: var(--sc-text);
	text-decoration: none;
	min-width: 0;
}
.sc-search-panel__row:first-child { border-top: 1px solid #e6e6e6; }
.sc-search-panel__row:hover .sc-search-panel__row-title { color: var(--sc-plum); text-decoration: underline; text-underline-offset: 3px; }
.sc-search-panel__row-body { display: flex; flex-direction: column; gap: .125rem; flex: 1 1 auto; min-width: 0; }
.sc-search-panel__row-title { font-size: .9375rem; font-weight: 700; color: #111; }
.sc-search-panel__row-meta {
	font-size: .8125rem;
	color: #6b6b6b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sc-search-panel__row-icon { flex-shrink: 0; color: var(--sc-plum); font-size: 1.25rem; font-variation-settings: 'opsz' 20; }

.sc-search-panel__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}
.sc-search-panel__all { margin-left: auto; }

/* Action row: gold BOOK NOW + outline VIEW PAGE; outside __facts so a factless hit still gets its button */
.sc-search-panel__hit > .sc-search-panel__facts-actions { margin-top: .25rem; }
.sc-search-panel__facts-actions .sc-btn.sc-search-panel__facts-action--primary {
	padding: .5rem 1.25rem;
	font-size: .8125rem;
	letter-spacing: .06em;
	gap: .375rem;
}
.sc-search-panel__facts-actions .sc-btn.sc-search-panel__facts-action--primary .material-symbols-outlined { font-size: 1.125rem; }
/* 'See all N results' is .sc-btn.sc-btn--gold; this only spaces its arrow */
.sc-search-panel__all .material-symbols-outlined { font-size: 1.125rem; margin-left: .375rem; }

/* --- Structured facts card --- */
/* Facts markup rendered by _SearchPanel.cshtml (browser) and Views/Search.cshtml (server) - change one, change the other.
   No surface of its own (the hit card is); a one-fact card is the common case - every row must look deliberate alone. */
.sc-search-panel__facts {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: .625rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--sc-text);
}
/* Font glyph: size with font-size; bring opsz down with it or the 24px stroke reads too heavy */
.sc-search-panel__facts-icon {
	font-size: 1.125rem;
	line-height: 1.4;
	flex-shrink: 0;
	color: var(--sc-plum);
	font-variation-settings: 'opsz' 20;
}

/* Notice first: an ad-hoc closure outranks published hours. NEVER reorder these two rows. */
.sc-search-panel__facts-notice {
	display: flex;
	gap: .5rem;
	padding: .625rem .75rem;
	background-color: var(--sc-white);
	border: 1px solid var(--sc-plum-40);
	border-radius: 4px;
	font-weight: 600;
	color: var(--sc-plum);
}
.sc-search-panel__facts-notice .sc-search-panel__facts-icon { color: var(--sc-red); }

.sc-search-panel__facts-hours { display: flex; gap: .5rem; }
.sc-search-panel__facts-hours-line { display: block; }

.sc-search-panel__facts-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem 1.25rem;
}
/* overflow-wrap so a long address or menu list breaks instead of widening the panel */
.sc-search-panel__facts-chip {
	display: inline-flex;
	align-items: flex-start;
	gap: .375rem;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}
.sc-search-panel__facts-chip a { color: var(--sc-plum); text-decoration: underline; }
.sc-search-panel__facts-chip a:hover { text-decoration: none; }

.sc-search-panel__facts-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sc-search-panel__facts-action {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .375rem .875rem;
	border: 1px solid var(--sc-plum);
	border-radius: var(--sc-radius-btn);
	background-color: transparent;
	color: var(--sc-plum);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.sc-search-panel__facts-action .sc-search-panel__facts-icon { font-size: 1rem; color: inherit; }
.sc-search-panel__facts-action:hover { background-color: var(--sc-plum); color: var(--sc-white); }

/* Chips one-per-line on narrow screens - side by side they fragment into two-word columns */
@media (max-width: 640px) {
	.sc-search-panel__hit { padding: 1rem; }
	.sc-search-panel__facts-chips { flex-direction: column; gap: .375rem; }
	.sc-search-panel__all { margin-left: 0; }
}

/* --- /search results page (Views/Search.cshtml) --- */
/* Plum solid hero with the search form; body reuses the panel's summary, hit and facts classes */
.sc-search-page__form {
	display: flex;
	gap: .75rem;
	align-items: center;
	max-width: 640px;
	margin-top: 1.25rem;
}
.sc-search-page__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 3rem;
	padding: 0 1.25rem;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: var(--sc-radius-btn);
	background-color: var(--sc-white);
	color: var(--sc-text);
	font-family: var(--sc-font);
	font-size: 1rem;
}
.sc-search-page__input:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.sc-search-page__submit { flex-shrink: 0; }

.sc-search-page { padding-top: 2.5rem; padding-bottom: 4rem; }
/* Full-width container; blocks cap at 960px on the left gutter (like .sc-prose). Delete to run full 1400px. */
.sc-search-page > * { max-width: 960px; }
.sc-search-page__prompt { font-size: 1.0625rem; color: #6b6b6b; margin: 0; }
.sc-search-page__results-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .625rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--sc-gold);
}
.sc-search-page__results-title { margin: 0; font-size: 1.25rem; font-weight: 800; color: #111; }
.sc-search-page__results-meta { font-size: .8125rem; color: #6b6b6b; }
.sc-search-page__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }

@media (max-width: 640px) {
	.sc-search-page__form { flex-direction: column; align-items: stretch; }
	.sc-search-page { padding-top: 1.75rem; }
}

/* --- No results --------------------------------------------- */
.sc-search-panel__no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	color: rgba(0,0,0,.5);
}
.sc-search-panel__no-results-icon {
	font-size: 2.5rem;
	line-height: 1;
	color: var(--sc-gold);
	margin-bottom: 1rem;
}
.sc-search-panel__no-results-text {
	font-size: 1rem;
	font-weight: 600;
	color: var(--sc-text);
	margin: 0 0 .5rem;
}
/* Sub-line text comes from siteRoot.searchNoResultsHint via data-noresults-hint; blank falls back to partial default */
.sc-search-panel__no-results-hint {
	font-size: .875rem;
	color: rgba(0,0,0,.5);
	margin: 0;
}

/* --- Error -------------------------------------------------- */
.sc-search-panel__error { color: #c0392b; font-size: .9375rem; }

@media (max-width: 1024px) { .sc-search-panel__inner { padding: 1.25rem 24px 1.75rem; } }
@media (max-width: 640px)  { .sc-search-panel__inner { padding: 1rem 1rem 1.5rem; } }

/* HOMEPAGE 4-UP GRIDS - 2 ITEMS ON MOBILE: must be CSS (server can't know viewport). 640px must match .sc-hp-grid4's hinge.
   Scoped to --whatson/--news only (unscoped hides 3rd hotel); carousel deliberately excluded. */
@media (max-width: 640px) {
	.sc-hp-grid4--whatson > *:nth-child(n+3),
	.sc-hp-grid4--news > *:nth-child(n+3) {
		display: none;
	}
}

/* RTE document downloads (.sc-dl), built by site.js. Selectors are .sc-rte a.sc-dl (0,2,1) to beat .sc-rte a (0,1,1)
   - do not simplify. Solid surfaces only; gold only as glyph and hover border. */

.sc-rte a.sc-dl { text-decoration: none; color: var(--sc-plum); }
.sc-rte a.sc-dl:hover { text-decoration: none; }
.sc-rte a.sc-dl:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 2px; }

/* Equal specificity with .material-symbols-outlined - this sheet loads after the font link, so this font-size wins */
.sc-dl__icon { color: var(--sc-gold); font-size: 28px; line-height: 1; flex-shrink: 0; }
.sc-dl__text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.sc-dl__label { font-weight: 600; }
.sc-dl__meta { font-size: .8125rem; color: #6b6b6b; letter-spacing: .02em; }

/* ROW - the link is the whole block it sits in */
.sc-rte a.sc-dl--row {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: 1rem 1.25rem;
	background: #f4f4f4;
	border: 1px solid #e5e5e5;
	border-radius: var(--sc-radius-card);
}
.sc-rte a.sc-dl--row:hover { background: #ececec; border-color: var(--sc-gold); }
.sc-dl-host { margin-bottom: .5rem; }

/* Consecutive rows join into one panel. */
.sc-rte ul.sc-dl-list { list-style: none; padding-left: 0; margin-bottom: 1.1rem; }
.sc-dl-list .sc-dl-host { margin-bottom: 0; }
.sc-dl-list .sc-dl-host a.sc-dl--row { border-radius: 0; }
/* Rows overlap by 1px (not border-top:0) so a hovered mid-list row has all four gold sides; hovered row lifts above */
.sc-dl-list .sc-dl-host + .sc-dl-host { margin-top: -1px; }
.sc-rte .sc-dl-list a.sc-dl--row { position: relative; }
.sc-rte .sc-dl-list a.sc-dl--row:hover,
.sc-rte .sc-dl-list a.sc-dl--row:focus-visible { z-index: 1; }
.sc-dl-list .sc-dl-host:first-child a.sc-dl--row { border-radius: var(--sc-radius-card) var(--sc-radius-card) 0 0; }
.sc-dl-list .sc-dl-host:last-child a.sc-dl--row { border-radius: 0 0 var(--sc-radius-card) var(--sc-radius-card); }
.sc-dl-list .sc-dl-host:only-child a.sc-dl--row { border-radius: var(--sc-radius-card); }

/* Zero Tiptap's <p> margin in a row; (0,2,1) beats .sc-rte p (0,1,1) */
.sc-rte .sc-dl-host p { margin: 0; }

/* INLINE: must NOT be a button. display:inline, NOT inline-flex (inline-flex anchor can't wrap).
   Tag stays inline-flex - atomic inline is what keeps the anchor underline off it; do not simplify to inline. */
.sc-rte a.sc-dl--pill {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: 700;
	color: var(--sc-plum);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sc-rte a.sc-dl--pill:hover {
	background: none;
	color: var(--sc-plum);
	text-decoration-thickness: 2px;
}
.sc-dl__chip {
	display: inline-flex;
	align-items: center;
	gap: .28rem;
	margin-left: .35rem;
	padding: .1rem .4rem .12rem;
	background: #f0f0f0;
	border-radius: 5px;
	vertical-align: baseline;
	white-space: nowrap;
	font-weight: 600;
}
.sc-dl__chip .sc-dl__icon { font-size: 15px; color: var(--sc-gold); }
/* #5f5f5f on #f0f0f0 = 5.6:1 - passes AA */
.sc-dl__chip .sc-dl__meta {
	font-size: .6875rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #5f5f5f;
}
.sc-rte a.sc-dl--pill:hover .sc-dl__chip { background: #e2e2e2; }

@media (max-width: 600px) {
	.sc-rte a.sc-dl--row { padding: .875rem 1rem; gap: .75rem; }
	.sc-dl__icon { font-size: 24px; }
}

/* EXTERNAL LINK INDICATOR (.sc-ext), site.js-built. Root-agnostic on purpose, (0,2,1) beats .sc-rte a - do NOT scope to .sc-rte.
   display:inline-block is LOAD-BEARING (keeps anchor underline off the glyph). Colour is plum, never gold. */
a.sc-ext .sc-ext__icon {
	display: inline-block;
	font-size: .78em;
	line-height: 1;
	vertical-align: -.08em;
	color: inherit;
	text-decoration: none;
	font-variation-settings: 'wght' 400, 'opsz' 20;
}

/* RTE ICON HEADINGS (Table Games): selector-detected <h3><img>, no class. Unscoped - re-check no other pages use the shape.
   Icons sized by authored width attr only (no ?width=, resizing off). No indent on following copy, deliberately. */
.sc-rte h3:has(> img) {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin: 2.25rem 0 .625rem;
}
.sc-rte h3 > img {
	flex: 0 0 auto;
	height: auto;
}

/* SkyCare icon is its own <p><img></p>: close the gap under it. :only-child gives (0,2,2) to beat .sc-rte p */
.sc-rte p:has(> img:only-child) {
	margin-bottom: .5rem;
}

@media (max-width: 600px) {
	.sc-rte h3:has(> img) { gap: .625rem; margin-top: 1.75rem; }
}

/* === BACK TO TOP (.sc-totop) === state/threshold/focus live in site.js initBackToTop.
   z-index 900 is derived: above content, below nav/R20/drawer/lightbox - do not raise. Hide via opacity, not display. */
.sc-totop {
	position: fixed;
	right: 1rem;
	/* Clears the iOS home indicator; env() is 0px where there is no inset */
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px minimum touch target */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sc-plum);
	color: var(--sc-white);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,.28);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

.sc-totop.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.sc-totop:hover { background: var(--sc-plum-80); }

/* Matches the .sc-btn focus convention - gold-on-white was too low contrast */
.sc-totop:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }

/* Bring opsz down with font-size, as .sc-btn__icon does - Material Symbols opsz does not follow font-size */
.sc-totop__icon {
	font-size: 1.5rem;
	line-height: 1;
	font-variation-settings: 'opsz' 20;
}

@media (min-width: 768px) {
	.sc-totop {
		right: 1.5rem;
		bottom: max(1.5rem, env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-totop { transition: none; }
}

/* === WHATS ON (was whatson.css) - START === */

/* WHAT'S ON - LANDING & DETAIL PAGES */

/* LISTING LAYOUT - left filter rail + results column */

.sc-wo-listing { padding-top: 32px; }

.sc-wo-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* ── Left rail ───────────────────────────────────────────── */
.sc-wo-rail { position: sticky; top: calc(var(--sc-nav-height) + 24px); }

/* Rail ships as an OPEN <details> so no-JS gets filters; JS closes it on small screens; desktop hides the summary */
.sc-wo-rail__panel { border: 0; }
.sc-wo-rail__summary { display: none; }
.sc-wo-rail__title {
	font: 800 13px/1.2 var(--sc-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sc-text);
	margin: 0 0 22px;
}

.sc-wo-group { margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid #e8e8e8; }
.sc-wo-group:last-of-type { border-bottom: 0; }
.sc-wo-group__label {
	font: 700 11px/1 var(--sc-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin: 0 0 12px;
}

.sc-wo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sc-wo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sc-white);
	border: 1px solid #d8d8d8;
	border-radius: var(--sc-radius-btn);
	padding: 7px 14px;
	font: 700 11px/1 var(--sc-font);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sc-plum);
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}
.sc-wo-chip:hover { border-color: var(--sc-plum); }
.sc-wo-chip:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 2px; }
.sc-wo-chip.is-active {
	background: var(--sc-plum);
	border-color: var(--sc-plum);
	color: var(--sc-white);
}
.sc-wo-chip__icon { font-size: 15px; line-height: 1; }
.sc-wo-chip__label { line-height: 1; }

.sc-wo-rail__clear {
	display: inline-block;
	margin-top: 4px;
	font: 700 12px/1 var(--sc-font);
	letter-spacing: .06em;
	color: var(--sc-plum);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sc-wo-rail__clear:hover { color: var(--sc-text); }

/* ── Results column ──────────────────────────────────────── */
.sc-wo-count {
	font: 700 12px/1 var(--sc-font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6a6a6a;
	margin: 0 0 18px;
}

/* ── Tile grid — CSS Grid (equal height rows) ─────────────── */
.sc-wo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* ── Featured panel — full-width child of the tile grid ──── */
.sc-wo-feature {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	background: var(--sc-plum);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	margin: 8px 0;
}
.sc-wo-feature--nomedia { grid-template-columns: minmax(0, 1fr); }
.sc-wo-feature__media { position: relative; min-height: 260px; }
.sc-wo-feature__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sc-wo-feature__body {
	padding: 40px clamp(24px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.sc-wo-feature__eyebrow {
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sc-gold);
	margin: 0 0 12px;
}
.sc-wo-feature__heading {
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	line-height: 1.15;
	color: var(--sc-white);
	margin: 0 0 12px;
}
.sc-wo-feature__text {
	font: 400 15px/1.7 var(--sc-font);
	color: rgba(255,255,255,.82);
	margin: 0 0 24px;
	max-width: 46ch;
}
/* CTA is .sc-btn (nowrap); feature's overflow:hidden would clip a long label - allow wrapping and cap width */
.sc-wo-feature__cta { margin-top: 0; max-width: 100%; white-space: normal; }

/* Filling a row beside tiles: drop the band's vertical margin so edges align (spans live in Responsive section) */
.sc-wo-feature--fill3-1,
.sc-wo-feature--fill3-2,
.sc-wo-feature--fill2-1 { margin: 0; }

/* ── Tile — flex column so body stretches to fill height ─── */
.sc-wo-tile {
	display: flex;
	flex-direction: column;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: var(--sc-white);
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
	text-decoration: none;
	color: var(--sc-text);
	transition: transform .2s, box-shadow .2s;
	height: 100%;
}
.sc-wo-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.sc-wo-tile__img-wrap { position: relative; overflow: hidden; flex-shrink: 0; }
.sc-wo-tile__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s; }
.sc-wo-tile__badge {
	position: absolute; top: 12px; left: 12px;
	background: var(--sc-gold); color: var(--sc-text);
	font: 700 10px/1 var(--sc-font); letter-spacing: .08em;
	padding: 4px 10px; border-radius: 50px; text-transform: uppercase;
}
/* BADGE COLOUR MAP. Featured render points MUST emit both __badge and __badge--featured - base alone reads as Offer.
   #C4232B is a deliberate local darkening of --sc-red for 10px AA; do not repoint base, do not add FREE. */
.sc-wo-tile__badge--featured        { background: #C4232B;        color: var(--sc-white); }
.sc-wo-tile__badge--offer           { background: var(--sc-gold); color: var(--sc-plum); }
.sc-wo-tile__badge--category        { background: #FBE7E8;        color: #C4232B; }
.sc-wo-tile__badge--category-onimage { background: var(--sc-plum); color: var(--sc-white); }
/* COMING SOON: plum fill + gold label (gold only legible on plum); 1px gold ring keeps the edge on dark crops */
.sc-wo-tile__badge--coming-soon     { background: var(--sc-plum); color: var(--sc-gold); box-shadow: 0 0 0 1px var(--sc-gold); }
/* Homepage What's On cards: equal specificity to base .sc-hp-card__cat (earlier in site.css) - wins on source order */
.sc-hp-card__cat--coming-soon       { background: var(--sc-plum); color: var(--sc-gold); box-shadow: 0 0 0 1px var(--sc-gold); }

/* Body grows to fill remaining card height */
.sc-wo-tile__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sc-wo-tile__title { font: 700 15px/1.3 var(--sc-font); margin: 0 0 6px; color: var(--sc-text); }
.sc-wo-tile__date { font: 500 12px/1.4 var(--sc-font); color: var(--sc-plum); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }

/* Summary grows to push CTA to bottom */
.sc-wo-tile__summary { font: 400 13px/1.5 var(--sc-font); color: #555; margin: 0 0 12px; flex: 1; }
.sc-wo-tile__cta { display: flex; align-items: center; gap: 4px; font: 700 12px/1 var(--sc-font); color: var(--sc-plum); letter-spacing: .04em; margin-top: auto; }

/* ── Empty / error states ────────────────────────────────── */
.sc-wo-error,
.sc-wo-empty { font: 400 15px/1.6 var(--sc-font); color: #666; text-align: center; padding: 40px 0; }

/* ── Detail page ─────────────────────────────────────────── */
.sc-wo-rich-content { width: 100%; max-width: 100%; overflow-x: hidden; padding: 0 40px !important; box-sizing: border-box !important; }
.sc-wo-detail { max-width: 800px; }
.sc-wo-detail__date { font: 700 13px/1.4 var(--sc-font); color: var(--sc-plum); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.sc-wo-detail__time { font: 500 14px/1.4 var(--sc-font); color: #555; margin: 0 0 16px; }
.sc-wo-detail__locations { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; }
.sc-wo-detail__location-link { font: 600 13px/1 var(--sc-font); color: var(--sc-plum); text-decoration: none; }
.sc-wo-detail__location-link:hover { text-decoration: underline; }

/* Detail page: When (date + time) - above Location; each part self-suppresses */
.sc-wo-when { display: block; margin: 0 0 18px; }
.sc-wo-when__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-when__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-when__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sc-wo-when__pair { display: inline-flex; align-items: center; gap: 8px; }
.sc-wo-when__icon { font-size: 22px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-when__v { font: 700 20px/1.25 var(--sc-font); color: var(--sc-text); }

/* Detail page: Location(s) - single venue standfirst; --multi is a stepped-down middot list */
.sc-wo-loc { display: block; text-decoration: none; margin: 0 0 28px; }
.sc-wo-loc__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-loc__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-loc__row { display: flex; align-items: flex-start; gap: 10px; }
.sc-wo-loc__pin { font-size: 26px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-loc__venues { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.sc-wo-loc__venue {
	font: 700 24px/1.25 var(--sc-font);
	letter-spacing: -.01em;
	color: var(--sc-text);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .18s;
}
.sc-wo-loc__venue:hover { border-bottom-color: var(--sc-gold); }
.sc-wo-loc__sep { color: var(--sc-gold); font: 600 20px/1 var(--sc-font); padding: 0 2px; user-select: none; }

/* multi-venue: tidier, stepped-down list */
.sc-wo-loc--multi .sc-wo-loc__pin { font-size: 22px; transform: translateY(2px); }
.sc-wo-loc--multi .sc-wo-loc__venue { font-size: 19px; }
.sc-wo-loc--multi .sc-wo-loc__sep { font-size: 16px; }

/* Detail page: Price + Booking paired row - wraps on narrow; each part self-suppresses */
.sc-wo-pricing { display: block; margin: 0 0 28px; }
.sc-wo-pricing__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-pricing__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-pricing__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 24px;
}
.sc-wo-price { display: inline-flex; align-items: center; gap: 10px; }
.sc-wo-price__icon { font-size: 24px; color: var(--sc-gold); transform: translateY(1px); flex: none; }
.sc-wo-price__v { font: 700 22px/1.25 var(--sc-font); color: var(--sc-text); }
.sc-wo-pricing__cta { flex: none; }
/* Booking + pop-up form CTA grouped at the row's end (emitted only when both exist) */
.sc-wo-pricing__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ── Detail page: Tags — eyebrow + plum-tint pills (brand on-light accent) ── */
.sc-wo-tagblock { display: block; margin: 0 0 28px; }
.sc-wo-tagblock__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--sc-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #a8854f;
	margin: 0 0 7px;
}
.sc-wo-tagblock__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 40px;
	background: linear-gradient(90deg, var(--sc-gold), transparent);
}
.sc-wo-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sc-wo-tag {
	display: inline-block;
	background: rgba(68, 11, 34, .07);
	color: var(--sc-plum);
	font: 700 10px/1 var(--sc-font);
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 50px;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.sc-wo-tag:hover { background: var(--sc-plum); color: var(--sc-white); }

/* raw-HTML embed block (3rd-party iframes / widgets pasted into Body HTML raw) */
.sc-wo-embed { margin: 0 0 32px; }
.sc-wo-embed iframe { max-width: 100%; }

.sc-wo-detail__body { margin-bottom: 32px; }
.sc-wo-r20-block { border-top: 1px solid #e8e8e8; padding-top: 16px; margin-top: 24px; font: 400 12px/1.6 var(--sc-font); color: var(--sc-text); }
.sc-wo-r20-block p { margin: 0 0 4px; }
.sc-wo-detail__terms { margin-top: 32px; border-top: 1px solid #e8e8e8; padding-top: 16px; }
.sc-wo-detail__terms-toggle { font: 700 13px/1.4 var(--sc-font); cursor: pointer; color: var(--sc-text); letter-spacing: .03em; list-style: none; }
.sc-wo-detail__terms-toggle::-webkit-details-marker { display: none; }
.sc-wo-detail__terms-body { margin-top: 16px; font: 400 13px/1.6 var(--sc-font); color: #555; }

/* ── Responsive ──────────────────────────────────────────── */

/* Narrower rail before the grid gives up a column */
@media (max-width: 1180px) {
	.sc-wo-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 1024px) { .sc-wo-rich-content { padding: 0 24px !important; } }

/* Drop to 2 columns at 1100px while the rail is still alongside.
   The --fill3-N / --fill2-N span ranges below are scoped to these widths and MUST move with this breakpoint. */
@media (max-width: 1100px) {
	.sc-wo-grid { grid-template-columns: repeat(2, 1fr); }
	.sc-wo-feature { grid-template-columns: minmax(0, 1fr); }
	.sc-wo-feature__media { min-height: 200px; }
	.sc-wo-feature__body { padding: 28px 24px 32px; }
}

/* Rail stacks above the grid and becomes a collapsible disclosure */
@media (max-width: 900px) {
	.sc-wo-layout { grid-template-columns: 1fr; gap: 24px; }
	.sc-wo-rail { position: static; }
	.sc-wo-rail__panel {
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		background: var(--sc-white);
	}
	.sc-wo-rail__summary {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 18px;
		cursor: pointer;
		list-style: none;
		font: 700 12px/1 var(--sc-font);
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--sc-plum);
	}
	.sc-wo-rail__summary::-webkit-details-marker { display: none; }
	.sc-wo-rail__summary .material-symbols-outlined { font-size: 20px; }
	.sc-wo-rail__chevron { margin-left: auto; transition: transform .2s; }
	.sc-wo-rail__panel[open] .sc-wo-rail__chevron { transform: rotate(180deg); }
	.sc-wo-rail__inner { padding: 0 18px 18px; }
	.sc-wo-rail__title { display: none; }
}

@media (max-width: 600px) {
	.sc-wo-when__v { font-size: 18px; }
	.sc-wo-loc__venue { font-size: 20px; }
	.sc-wo-loc--multi .sc-wo-loc__venue { font-size: 17px; }
	.sc-wo-price__v { font-size: 18px; }
}

@media (max-width: 560px) {
	.sc-wo-grid { grid-template-columns: 1fr; }
	.sc-wo-rich-content { padding: 0 16px !important; }
	.sc-wo-feature__cta { width: 100%; text-align: center; }
}

/* Featured panel fills the tail of the last row via --fill3-N/--fill2-N.
   Ranges are deliberately NON-OVERLAPPING (both classes can be present) - do not convert to layered overrides. */
@media (min-width: 1101px) {
	.sc-wo-feature--fill3-2 { grid-column: span 2; }
	/* Single column too narrow for side-by-side: stack and give media a 4:3 tile ratio */
	.sc-wo-feature--fill3-1 {
		grid-column: span 1;
		grid-template-columns: minmax(0, 1fr);
	}
	.sc-wo-feature--fill3-1 .sc-wo-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
	.sc-wo-feature--fill3-1 .sc-wo-feature__body { padding: 24px 22px 26px; }
	/* Tile-width panel - same treatment the <=560px rule gives the full-width one */
	.sc-wo-feature--fill3-1 .sc-wo-feature__cta { width: 100%; text-align: center; }
}

@media (min-width: 561px) and (max-width: 1100px) {
	/* 2-col grid: already stacked by the max-width:1100px block above. */
	.sc-wo-feature--fill2-1 { grid-column: span 1; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__body { padding: 24px 22px 26px; }
	.sc-wo-feature--fill2-1 .sc-wo-feature__cta { width: 100%; text-align: center; }
}

/* IMAGE-LINK HOVER - no card lift, resting shadow kept, no image hover treatment. Must stay last to win. */
.sc-wo-tile:hover {
	transform: none;
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* DETAIL BODY - vertical spacing for inline RTE .btn in ContentAPI detail bodies; scoped to the detail body */
.sc-wo-detail__body .btn,
.sc-wo-detail__body .sc-btn {
	display: inline-block;
	margin: 24px 0 8px;
}

/* _WhatsOnWidget grid modifiers (.sc-wo-grid--cols-N): scoped to the widget only.
   Bare .sc-wo-grid is the landing's fixed 3-up - do not move these onto .sc-wo-grid itself. */

/* All --cols-N now map to four tracks (tiles capped at 1/4, short rows fill from left; n=5 is 4+1 deliberately).
   Do not reinstate the half-width n=1 rule or row balancing. The partial's cols calculation is now inert. */
.sc-wo-grid--cols-1,
.sc-wo-grid--cols-2,
.sc-wo-grid--cols-3,
.sc-wo-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* n = 1: one tile at quarter width, same as any tile in a 4-up row - a full-width lone tile reads as a poster.
   Scoped to --cols-* (widget only); the landing's bare .sc-wo-grid is unaffected. */
/* Tablet — 4-up is too tight below ~1100px; drop to 2 and let rows re-flow.
   3-up stays 3 down to the mobile breakpoint. */
@media (max-width: 1100px) {
	.sc-wo-grid--cols-1,
	.sc-wo-grid--cols-2,
	.sc-wo-grid--cols-3,
	.sc-wo-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	/* Redundant no-op: the 1100px rule above already puts every variant on two tracks */
	.sc-wo-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: single column for every variant, n = 1 included */
@media (max-width: 600px) {
	.sc-wo-grid--cols-1,
	.sc-wo-grid--cols-2,
	.sc-wo-grid--cols-3,
	.sc-wo-grid--cols-4 { grid-template-columns: 1fr; }
}

/* === WHATS ON (was whatson.css) - END ===
   === NEWS (was news.css) - START === */

/* News section styles */

/* ── Tag chip shared component ──────────────────────────────── */

.sc-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 50px;
	background: rgba(220,183,65, 0.15);
	color: var(--sc-plum);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sc-tag--sm {
	padding: 2px 8px;
	font-size: 0.68rem;
}

.sc-tag--light {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

a.sc-tag {
	text-decoration: none;
	transition: background 0.2s;
}

a.sc-tag:hover,
a.sc-tag:focus-visible {
	background: rgba(220,183,65, 0.3);
}

a.sc-tag--light:hover,
a.sc-tag--light:focus-visible {
	background: rgba(255, 255, 255, 0.35);
}

/* ── Blog hero ──────────────────────────────────────────────── */

.sc-blog-hero {
	position: relative;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--sc-plum);
	padding-top: var(--sc-nav-height);
}

.sc-blog-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.03);
}

.sc-blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(68,11,34,0.25) 0%, rgba(68,11,34,0.65) 100%);
}

.sc-blog-hero__overlay--solid {
	background: linear-gradient(135deg, #1a1a1a 0%, var(--sc-plum) 100%);
}

.sc-blog-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 2rem 1.5rem 2.5rem;
}

.sc-blog-hero__heading {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.15;
}

@media (min-width: 768px) {
	.sc-blog-hero {
		min-height: 320px;
	}

	.sc-blog-hero__content {
		padding: 3rem 2rem 3.5rem;
	}
}

@media (min-width: 1200px) {
	.sc-blog-hero__content {
		padding: 3rem 3rem 4rem;
	}
}

/* ── Blog intro text ────────────────────────────────────────── */

.sc-blog-intro {
	background: #fff;
	border-bottom: 1px solid #eee;
}

.sc-blog-intro__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

.sc-blog-intro__text {
	font-size: 1.1rem;
	color: #555;
	max-width: 900px;
	line-height: 1.7;
}

.sc-blog-intro__text > :first-child { margin-top: 0; }
.sc-blog-intro__text > :last-child  { margin-bottom: 0; }
.sc-blog-intro__text p              { margin: 0 0 1rem; }
.sc-blog-intro__text p:last-child   { margin-bottom: 0; }
.sc-blog-intro__text a              { color: var(--sc-plum); text-decoration: underline; }
.sc-blog-intro__text a:hover        { text-decoration: none; }

@media (min-width: 768px) {
	.sc-blog-intro__container {
		padding: 2.5rem 2rem;
	}
}

/* ── Tag filter ─────────────────────────────────────────────── */

.sc-tag-filter {
	background: #fff;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: var(--sc-nav-height);
	z-index: 10;
}

.sc-tag-filter__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.sc-tag-filter__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: 50px;
	border: 1.5px solid #ddd;
	background: transparent;
	color: #666;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	white-space: nowrap;
}

.sc-tag-filter__chip:hover,
.sc-tag-filter__chip:focus-visible {
	border-color: var(--sc-gold);
	color: var(--sc-plum);
}

.sc-tag-filter__chip.is-active {
	border-color: var(--sc-gold);
	background: var(--sc-gold);
	color: var(--sc-text);
}

@media (min-width: 768px) {
	.sc-tag-filter__inner {
		padding: 0.75rem 2rem;
	}
}

/* ── Featured article card ──────────────────────────────────── */

.sc-blog-featured {
	background: var(--sc-plum);
	padding: 2rem 0;
}

.sc-blog-featured__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sc-blog-featured__card {
	display: block;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: #1e1e1e;
	text-decoration: none;
	transition: transform 0.25s;
}

.sc-blog-featured__card:hover,
.sc-blog-featured__card:focus-visible {
	transform: translateY(-2px);
}

.sc-blog-featured__img-wrap {
	position: relative;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: #333;
}

.sc-blog-featured__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}

.sc-blog-featured__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--sc-plum), #3a3a3a);
}

.sc-blog-featured__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 50px;
}

.sc-blog-featured__body {
	padding: 1.5rem;
}

.sc-blog-featured__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}

/* Descendant override: featured card (#1e1e1e) is the one dark surface .sc-tag lands on - gold text on it.
   Never fix on base .sc-tag (shared with _BlogCard and AttractionItem on white). */
.sc-blog-featured__tags .sc-tag {
	color: var(--sc-gold);
}

.sc-blog-featured__title {
	font-size: clamp(1.3rem, 3vw, 2rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.75rem;
	line-height: 1.25;
}

.sc-blog-featured__summary {
	color: #aaa;
	margin: 0 0 1rem;
	line-height: 1.6;
	font-size: 0.95rem;
}

.sc-blog-featured__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

/* Date/meta on the dark #1e1e1e card: #aaa to match __summary (--sc-text is a light-surface foreground) */
.sc-blog-featured__date,
.sc-blog-featured__author {
	font-size: 0.82rem;
	color: #aaa;
}

.sc-blog-featured__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #666;
}

@media (min-width: 768px) {
	.sc-blog-featured {
		padding: 2.5rem 0;
	}

	.sc-blog-featured__container {
		padding: 0 2rem;
	}

	.sc-blog-featured__card {
		display: grid;
		grid-template-columns: 1fr 420px;
	}

	.sc-blog-featured__img-wrap {
		aspect-ratio: auto;
		height: 100%;
		min-height: 320px;
	}

	.sc-blog-featured__body {
		padding: 2.5rem 2rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media (min-width: 1200px) {
	.sc-blog-featured__container {
		padding: 0 3rem;
	}

	.sc-blog-featured__card {
		grid-template-columns: 1fr 500px;
	}

	.sc-blog-featured__body {
		padding: 3rem 2.5rem;
	}
}

/* ── Blog card grid ─────────────────────────────────────────── */

.sc-blog-grid {
	background: var(--sc-bg);
	padding: 2.5rem 0;
}

.sc-blog-grid__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sc-blog-grid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.sc-blog-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.sc-blog-grid__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.sc-blog-grid__container {
		padding: 0 2rem;
	}
}

@media (min-width: 1200px) {
	.sc-blog-grid__container {
		padding: 0 3rem;
	}
}

/* ── Blog card ──────────────────────────────────────────────── */

.sc-blog-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	transition: transform 0.25s, box-shadow 0.25s;
	height: 100%;
}

.sc-blog-card:hover,
.sc-blog-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.sc-blog-card__img-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f0f0f0;
	flex-shrink: 0;
}

.sc-blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}

.sc-blog-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e8e8e8, #d8d8d8);
}

.sc-blog-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 50px;
}

.sc-blog-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sc-blog-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
}

.sc-blog-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0 0 0.5rem;
	line-height: 1.35;
}

.sc-blog-card__summary {
	font-size: 0.85rem;
	color: #666;
	margin: 0 0 0.75rem;
	line-height: 1.55;
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.sc-blog-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

.sc-blog-card__date,
.sc-blog-card__author {
	font-size: 0.78rem;
	color: var(--sc-text);
}

.sc-blog-card__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #bbb;
	flex-shrink: 0;
}

.sc-blog-card__footer {
	padding-top: 0.75rem;
	margin-top: 0.5rem;
	border-top: 1px solid #f0f0f0;
}

.sc-blog-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--sc-plum);
	letter-spacing: 0.02em;
}

.sc-blog-card__read-more .material-symbols-outlined {
	font-size: 0.9rem;
	transition: transform 0.2s;
}

.sc-blog-card:hover .sc-blog-card__read-more .material-symbols-outlined {
	transform: translateX(3px);
}

/* ── Empty / no results state ───────────────────────────────── */

.sc-blog-empty {
	padding: 4rem 0;
	text-align: center;
}

.sc-blog-empty__container {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.sc-blog-empty__text {
	color: #777;
	font-size: 1rem;
	margin: 0;
}

/* ── Pagination ─────────────────────────────────────────────── */

.sc-pagination {
	padding: 2rem 0 3rem;
	background: var(--sc-bg);
}

.sc-pagination__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.sc-pagination__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 8px 20px;
	border-radius: var(--sc-radius-btn);
	border: 1.5px solid var(--sc-gold);
	background: transparent;
	color: var(--sc-plum);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	cursor: pointer;
}

.sc-pagination__btn:hover:not(.is-disabled),
.sc-pagination__btn:focus-visible:not(.is-disabled) {
	background: var(--sc-gold);
	color: var(--sc-text);
}

.sc-pagination__btn.is-disabled {
	border-color: #ddd;
	color: #ccc;
	cursor: default;
	pointer-events: none;
}

.sc-pagination__info {
	font-size: 0.85rem;
	color: var(--sc-text);
	min-width: 100px;
	text-align: center;
}

/* ── Article page — hero ────────────────────────────────────── */

.sc-article {
	background: var(--sc-bg);
}

.sc-article-hero {
	position: relative;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--sc-plum);
	padding-top: var(--sc-nav-height);
}

.sc-article-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.sc-article-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(68,11,34,0.2) 0%, rgba(68,11,34,0.75) 100%);
}

.sc-article-hero__overlay--solid {
	background: linear-gradient(135deg, #1a1a1a 0%, var(--sc-plum) 100%);
}

.sc-article-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 2rem 1.5rem 2.5rem;
}

.sc-article-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.sc-article-hero__heading {
	font-size: clamp(1.8rem, 4.5vw, 3rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.75rem;
	line-height: 1.2;
}

.sc-article-hero__subheading {
	font-size: 1.05rem;
	color: var(--sc-gold);
	margin: 0;
	font-weight: 500;
}

@media (min-width: 768px) {
	.sc-article-hero {
		min-height: 320px;
	}

	.sc-article-hero__content {
		padding: 3rem 1.5rem 3.5rem;
	}
}

@media (min-width: 1024px) {
	.sc-article-hero__content {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* ── Article meta row ───────────────────────────────────────── */

.sc-article-meta {
	background: #fff;
	border-bottom: 1px solid #eee;
}

.sc-article-meta__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0.85rem 1.5rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sc-article-meta__back {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--sc-plum);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.sc-article-meta__back .material-symbols-outlined {
	font-size: 1rem;
}

.sc-article-meta__back:hover {
	text-decoration: underline;
}

.sc-article-meta__sep {
	width: 1px;
	height: 14px;
	background: #ddd;
}

.sc-article-meta__date,
.sc-article-meta__author,
.sc-article-meta__read-time {
	font-size: 0.82rem;
	color: var(--sc-text);
}

.sc-article-meta__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #ccc;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.sc-article-meta__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* ── Share buttons ──────────────────────────────────────────── */

.sc-share {
	background: #fafafa;
	border-bottom: 1px solid #eee;
}

.sc-share__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sc-share__label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #999;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-right: 0.25rem;
}

.sc-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 6px 14px;
	border-radius: 50px;
	border: 1.5px solid #e0e0e0;
	background: #fff;
	color: #555;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	font-family: var(--sc-font);
}

.sc-share__btn:hover,
.sc-share__btn:focus-visible {
	border-color: var(--sc-gold);
	color: var(--sc-text);
	background: rgba(220,183,65,0.1);
}

.sc-share__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.sc-share__icon.material-symbols-outlined {
	font-size: 1rem;
}

.sc-share__btn-label {
	display: none;
}

@media (min-width: 480px) {
	.sc-share__btn-label {
		display: inline;
	}
}

@media (min-width: 1024px) {
	.sc-share__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* ── Article body typography ────────────────────────────────── */

.sc-article-body {
	padding: 2.5rem 0;
}

.sc-article-body__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #333;
}

.sc-article-body__inner h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 2rem 0 0.75rem;
}

.sc-article-body__inner h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 1.5rem 0 0.5rem;
}

.sc-article-body__inner p {
	margin: 0 0 1.25rem;
}

.sc-article-body__inner ul,
.sc-article-body__inner ol {
	list-style: revert;
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}

.sc-article-body__inner li {
	margin-bottom: 0.4rem;
}

.sc-article-body__inner a {
	color: var(--sc-plum);
	text-decoration: underline;
}

.sc-article-body__inner a:hover {
	color: var(--sc-text);
}

.sc-article-body__inner img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sc-radius-card);
	margin: 1rem 0;
}

.sc-article-body__inner blockquote {
	border-left: 3px solid var(--sc-gold);
	margin: 1.5rem 0;
	padding: 0.5rem 1.25rem;
	color: #555;
	font-style: italic;
}

.sc-article-body__inner figure {
	margin: 1.5rem 0;
}

.sc-article-body__inner figcaption {
	font-size: 0.82rem;
	color: var(--sc-text);
	margin-top: 0.4rem;
}

@media (min-width: 768px) {
	.sc-article-body {
		padding: 3rem 0;
	}

	.sc-article-body__inner {
		font-size: 1.1rem;
	}
}

@media (min-width: 1024px) {
	.sc-article-body__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* Article CTAs (articleCtas): first filled, rest outline, .sc-btn modifiers own the pill.
   Container mirrors .sc-article-body__inner exactly so buttons align with body copy. */
.sc-article-ctas {
	padding: 0 0 2.5rem;
}

.sc-article-ctas__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (min-width: 1024px) {
	.sc-article-ctas__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* Article FAQ deliberately has NO rules here - it uses the shared FAQ classes. Change it there; no parallel prefix. */

/* ── Related venues ─────────────────────────────────────────── */

.sc-article-venues {
	background: #f4f4f4;
	padding: 2.5rem 0;
	border-top: 1px solid #e8e8e8;
}

.sc-article-venues__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sc-article-venues__heading {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0 0 1.25rem;
}

.sc-article-venues__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.sc-article-venue-card {
	display: flex;
	gap: 1rem;
	align-items: center;
	background: #fff;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

.sc-article-venue-card:hover,
.sc-article-venue-card:focus-visible {
	box-shadow: 0 4px 18px rgba(0,0,0,0.1);
	transform: translateY(-1px);
}

.sc-article-venue-card__img-wrap {
	width: 100px;
	height: 80px;
	flex-shrink: 0;
	overflow: hidden;
	background: #eee;
}

.sc-article-venue-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sc-article-venue-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ddd, #ccc);
}

.sc-article-venue-card__body {
	padding: 0.75rem 1rem 0.75rem 0;
	flex: 1;
}

.sc-article-venue-card__name {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0 0 0.25rem;
}

.sc-article-venue-card__summary {
	font-size: 0.8rem;
	color: var(--sc-text);
	margin: 0 0 0.35rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.sc-article-venue-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sc-plum);
}

.sc-article-venue-card__link .material-symbols-outlined {
	font-size: 0.85rem;
}

@media (min-width: 480px) {
	.sc-article-venues__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.sc-article-venue-card__img-wrap {
		width: 120px;
		height: 90px;
	}
}

@media (min-width: 1024px) {
	.sc-article-venues__container {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* ── More news ──────────────────────────────────────────────── */

.sc-more-news {
	background: var(--sc-bg);
	padding: 3rem 0 4rem;
	border-top: 1px solid #eee;
}

.sc-more-news__container {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sc-more-news__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	gap: 1rem;
}

.sc-more-news__heading {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0;
}

.sc-more-news__all {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--sc-plum);
	text-decoration: none;
	white-space: nowrap;
}

.sc-more-news__all .material-symbols-outlined {
	font-size: 1rem;
	transition: transform 0.2s;
}

.sc-more-news__all:hover .material-symbols-outlined {
	transform: translateX(3px);
}

.sc-more-news__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.sc-more-news__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.sc-more-news__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.sc-more-news__container {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* IMAGE-LINK HOVER (News) - no card lift, resting shadow kept, no image hover. Must stay last to win
   (also overrides .sc-blog-card). Explicit focus outline replaces the old lift cue. */
.sc-blog-card:hover,
.sc-blog-card:focus-visible,
.sc-blog-featured__card:hover,
.sc-blog-featured__card:focus-visible,
.sc-article-venue-card:hover,
.sc-article-venue-card:focus-visible {
	transform: none;
}
.sc-blog-card:hover,
.sc-blog-card:focus-visible {
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.sc-blog-featured__card:hover,
.sc-blog-featured__card:focus-visible,
.sc-article-venue-card:hover,
.sc-article-venue-card:focus-visible {
	box-shadow: none;
}

/* Keyboard focus cue (replaces the removed lift/shadow) */
.sc-blog-card:focus-visible,
.sc-blog-featured__card:focus-visible,
.sc-article-venue-card:focus-visible {
	outline: 2px solid var(--sc-gold);
	outline-offset: 3px;
}

/* === NEWS (was news.css) - END ===
   === EXPLORE (was explore.css) - START === */

/* Explore SkyCity: scoped to .sc-explore-* / .sc-skybridge-*; reuses global section/container/prose/hero/accordion */

/* ── Opening blurb ───────────────────────────────────────── */
.sc-explore-intro {
	max-width: 880px;
}
.sc-explore-intro p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* ── Blended mosaic ──────────────────────────────────────── */
.sc-explore-mosaic {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sc-explore-mosaic__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--sc-radius-card);
	background-color: var(--sc-plum);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: var(--sc-white);
	isolation: isolate;
	transition: transform .35s ease;
}
.sc-explore-mosaic__item:hover {
	transform: translateY(-3px);
}
.sc-explore-mosaic__item:focus-visible {
	outline: 3px solid var(--sc-gold);
	outline-offset: 3px;
}

.sc-explore-mosaic__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(68,11,34,.78) 0%, rgba(68,11,34,.30) 45%, rgba(68,11,34,0) 75%);
	transition: background .3s ease;
}
.sc-explore-mosaic__item:hover .sc-explore-mosaic__overlay {
	background: linear-gradient(to top, rgba(68,11,34,.85) 0%, rgba(68,11,34,.45) 55%, rgba(68,11,34,.08) 100%);
}

.sc-explore-mosaic__body {
	position: relative;
	z-index: 2;
	height: 100%;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .5rem;
}

.sc-explore-mosaic__badge {
	align-self: flex-start;
	display: inline-block;
	background: var(--sc-gold);
	color: var(--sc-text);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 4px;
}

.sc-explore-mosaic__title {
	margin: 0;
	font-weight: 800;
	line-height: 1.15;
	font-size: 1.25rem;
}
.sc-explore-mosaic__title--hero {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}
.sc-explore-mosaic__title--sm {
	font-size: 1.0625rem;
}

.sc-explore-mosaic__summary {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(255,255,255,.9);
	max-width: 60ch;
}
.sc-explore-mosaic__summary--sm {
	font-size: .875rem;
}

/* Hero (row 1) */
.sc-explore-mosaic__hero {
	min-height: clamp(340px, 46vw, 560px);
}

/* Duo (row 2) */
.sc-explore-mosaic__duo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.sc-explore-mosaic__duo-item {
	min-height: 300px;
}

/* Row-balanced grid (rows 3+): ONE grid per row, each sized to its own count (--cols-1..4) so no gap is left.
   Deliberately diverges from _WhatsOnWidget's uniform grid - do not port either way. Row sizes are only ever 1-4. */
.sc-explore-mosaic__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

/* --cols-1 spreads full width (a half-width tile below the duo reads as an orphaned duo tile); its ratio keeps it a banner */
.sc-explore-mosaic__grid--cols-1 { grid-template-columns: 1fr; }
.sc-explore-mosaic__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sc-explore-mosaic__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sc-explore-mosaic__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Tile shape: a ratio per column count and NO min/max-height while a ratio is active - max-height collapses width,
   min-height overflows the cell. Each ratio lands <= 300px (duo height); keep that if retuning. The four rules are exhaustive. */
.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item { aspect-ratio: 1.45 / 1; }
.sc-explore-mosaic__grid--cols-3 .sc-explore-mosaic__grid-item { aspect-ratio: 1.65 / 1; }
.sc-explore-mosaic__grid--cols-2 .sc-explore-mosaic__grid-item { aspect-ratio: 2.25 / 1; }
.sc-explore-mosaic__grid--cols-1 .sc-explore-mosaic__grid-item { aspect-ratio: 4.4 / 1; }

/* Tablet: ONLY --cols-4 halves; --cols-3/2/1 keep their count (3 -> 2 would re-create the 2+1 gap) */
@media (max-width: 1023px) {
	.sc-explore-mosaic {
		padding: 0 1.5rem;
	}
	.sc-explore-mosaic__grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	/* --cols-4 renders 2-across here, so 1.45 would exceed the 300px duo height - 1.6 keeps it under.
	   Any breakpoint that changes a column count must re-check the ratio. */
	.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item {
		aspect-ratio: 1.6 / 1;
	}
}

/* <=730px: every grid row is ONE full-width tile; aspect-ratio:auto + min-height (safe - height ban applies only while a
   ratio is active). MUST stay AFTER the <=1023px block (same specificity). Hero and duo rows deliberately untouched. */
@media (max-width: 730px) {
	.sc-explore-mosaic__grid--cols-1,
	.sc-explore-mosaic__grid--cols-2,
	.sc-explore-mosaic__grid--cols-3,
	.sc-explore-mosaic__grid--cols-4 {
		grid-template-columns: 1fr;
	}
	.sc-explore-mosaic__grid--cols-1 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-2 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-3 .sc-explore-mosaic__grid-item,
	.sc-explore-mosaic__grid--cols-4 .sc-explore-mosaic__grid-item {
		aspect-ratio: auto;
		min-height: 260px;
	}
}
/* <=600px - hero and duo only; grid rows are already single-column from 730px, so their rules live there. */
@media (max-width: 600px) {
	.sc-explore-mosaic__duo {
		grid-template-columns: 1fr;
	}
	.sc-explore-mosaic__hero {
		min-height: 320px;
	}
	/* --grid-item must NEVER be added to this min-height rule: a height floor on a ratio'd tile becomes width and overflows. */
	.sc-explore-mosaic__duo-item {
		min-height: 240px;
	}
	.sc-explore-mosaic__body {
		padding: 1.25rem;
	}
}

/* ── Map accordions (reuse .sc-explorer-accordion shell) ─── */
.sc-explore-map {
	margin-bottom: 1rem;
}
.sc-explore-map .sc-explorer-accordion__body {
	padding: 0;
}
.sc-explore-map__frame {
	position: relative; /* containing block for MappedIn's absolutely-positioned #mappedin-map */
	width: 100%;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
	background: #ffffff;
}
@media (max-width: 600px) {
	.sc-explore-map__frame {
		height: 60vh;
		min-height: 420px;
	}
}

/* ── Sky Bridge ──────────────────────────────────────────── */
.sc-skybridge {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 2.5rem;
	align-items: center;
}
.sc-skybridge--full {
	grid-template-columns: 1fr;
}
.sc-skybridge__body {
	margin-bottom: 1.5rem;
	max-width: none;
}
.sc-skybridge__walks {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .25rem 2rem;
}
.sc-skybridge__walk {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.sc-skybridge__walk-dest {
	font-weight: 600;
}
.sc-skybridge__walk-time {
	color: var(--sc-gold);
	font-weight: 700;
	white-space: nowrap;
}
.sc-skybridge__note {
	font-size: .8125rem;
	color: rgba(0,0,0,.55);
	margin: .5rem 0 0;
}
.sc-skybridge__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sc-radius-card);
}

@media (max-width: 768px) {
	.sc-skybridge {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.sc-skybridge__walks {
		grid-template-columns: 1fr;
	}
	.sc-skybridge__media {
		order: -1;
	}
}

/* Image-link hover: no lift on mosaic tiles; the overlay-gradient shift is the hover cue. Must stay after the base tile rules. */
.sc-explore-mosaic__item:hover { transform: none; }

/* === SKY TOWER (was skytower.css) === */

/* Sky Tower: split hero, price tables (.sc-pt-*), Explorer accordion. Small-screen overrides at the foot must stay last. */

/* ── Split hero ──────────────────────────────────────────── */
.sc-skytower { position: relative; overflow: hidden; min-height: 480px; display: flex; align-items: center; }
.sc-skytower__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.sc-skytower__overlay { position: absolute; inset: 0; background: linear-gradient(to left, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.08) 100%); }
.sc-skytower__content { position: relative; max-width: var(--sc-max-width); margin: 0 auto; padding: 4rem 1.5rem; width: 100%; display: flex; justify-content: flex-end; }
.sc-skytower__inner { max-width: 480px; text-align: right; }
.sc-skytower__activities { display: flex; gap: .625rem; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 1.5rem; }
.sc-skytower__tag { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.9); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 50px; padding: .3rem .8rem; }

/* ── SKY TOWER PRICE TABLES (.sc-pt-*) ── */

/* minmax 360px sets the stack point (~780px) together with the gap and container padding - change any one, re-check. */
.sc-pt-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; margin: 2rem 0; }
.sc-pt-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--sc-radius-card); padding: 22px 24px; display: flex; flex-direction: column; }

/* Primary card is solid gold: plum is the only text colour here; every white-tuned child (incl. hairlines) needs an override below. */
.sc-pt-card--primary { background: var(--sc-gold); border-color: transparent; }
.sc-pt-card--primary .sc-pt-eyebrow { color: var(--sc-plum); opacity: .75; }
.sc-pt-card--primary .sc-pt-title { color: var(--sc-plum); }
.sc-pt-card--primary .sc-pt-rule { background: var(--sc-plum); }
.sc-pt-card--primary .sc-pt-table th { color: var(--sc-plum); border-bottom-color: rgba(68,11,34,.22); }
.sc-pt-card--primary .sc-pt-table td { color: var(--sc-plum); border-bottom-color: rgba(68,11,34,.22); }
.sc-pt-card--primary .sc-pt-note { color: rgba(68,11,34,.7); }

/* Explicit white, not left to the base rule - deliberate contrast with the gold primary. */
.sc-pt-card--secondary { background: #fff; }

.sc-pt-cta { margin-top: auto; padding-top: 18px; }
.sc-pt-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); font-weight: 600; margin: 0 0 4px; }
.sc-pt-title { font-size: 1.125rem; font-weight: 700; color: var(--sc-text); margin: 0 0 4px; font-family: var(--sc-font); }
.sc-pt-rule { width: 42px; height: 3px; background: var(--sc-gold); border-radius: 2px; margin: 0 0 14px; }
.sc-pt-table { width: 100%; border-collapse: collapse; }
.sc-pt-table th { text-align: left; font-weight: 500; color: var(--sc-text); font-size: .9375rem; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.07); vertical-align: top; }
.sc-pt-table td { text-align: right; font-weight: 700; color: var(--sc-plum); font-size: 1rem; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.07); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-pt-table tr:last-child th,
.sc-pt-table tr:last-child td { border-bottom: none; }
.sc-pt-note { display: block; font-size: .75rem; font-weight: 400; color: #6b6b6b; margin-top: 2px; }

/* Free pill: opaque outline, deliberately unconditional - correct on white AND gold. No per-surface variant. */
.sc-pt-free { display: inline-block; background: transparent; border: 1px solid var(--sc-plum); color: var(--sc-plum); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 50px; }

/* ── EXPLORER ACCORDION ── */

.sc-explorer-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; user-select: none; border: 1px solid rgba(0,0,0,.12); border-radius: var(--sc-radius-card); transition: background .15s; }
.sc-explorer-accordion__summary::-webkit-details-marker { display: none; }
.sc-explorer-accordion__summary:hover { background: #f9f6f1; }
.sc-explorer-accordion__title { font-family: var(--sc-font); font-size: 1.15rem; font-weight: 600; color: var(--sc-text); }
.sc-explorer-accordion__icon { font-size: 1.5rem; color: var(--sc-gold); transition: transform .25s ease; flex-shrink: 0; }
.sc-explorer-accordion[open] .sc-explorer-accordion__icon { transform: rotate(180deg); }
.sc-explorer-accordion__body { padding: .75rem 0 0; }
@media (max-width: 600px) { .sc-explorer-accordion__body { padding: .5rem 0 0; } }

/* ── TOWER LEVELS (.sc-tl*) - _TowerLevels.cshtml; Explorer accordion above is the fallback ──
   Leader lines drawn by site.js; marker positions are inline styles from the partial. */

.sc-tl__title { margin-bottom: 1.5rem; }
.sc-tl__intro { margin: -.5rem 0 1.5rem; max-width: 60ch; color: var(--sc-text); }

.sc-tl__layout { position: relative; }
.sc-tl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.sc-tl__level { position: relative; }

.sc-tl__head { display: flex; flex-direction: column; gap: .15rem; padding-bottom: .75rem; color: var(--sc-text); font-family: var(--sc-font); }
.sc-tl__num { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-plum); }
.sc-tl__name { font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--sc-text); }
.sc-tl__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--sc-gold); text-underline-offset: 3px; }
.sc-tl__name a:hover { color: var(--sc-plum); }
.sc-tl__note { font-size: .85rem; font-weight: 400; }
.sc-tl__height { font-size: .95rem; font-weight: 400; }
.sc-tl__summary { font-size: .95rem; font-weight: 400; }

.sc-tl__head a:focus-visible,
.sc-tl__more:focus-visible,
summary.sc-tl__head:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; border-radius: 4px; }

/* Disclosure — only when a level has a description */
summary.sc-tl__head { list-style: none; cursor: pointer; position: relative; padding-right: 2rem; }
summary.sc-tl__head::-webkit-details-marker { display: none; }
.sc-tl__chev { position: absolute; top: .1rem; right: 0; font-size: 1.5rem; color: var(--sc-plum); transition: transform .25s ease; }
.sc-tl__details[open] .sc-tl__chev { transform: rotate(180deg); }
.sc-tl__body { padding: 0 0 .75rem; color: var(--sc-text); }
.sc-tl__body p { margin: 0 0 .75rem; }
.sc-tl__more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--sc-plum); text-decoration: none; }
.sc-tl__more .material-symbols-outlined { font-size: 1.1rem; font-variation-settings: 'opsz' 20; }

/* Tower figure + markers */
.sc-tl__tower { position: relative; margin: 0; }
.sc-tl__tower img { display: block; width: 100%; height: auto; }
.sc-tl__dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--sc-plum); transform: translate(calc(-100% - 2px), -50%); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.sc-tl__dot.is-active { background: var(--sc-gold); box-shadow: 0 0 0 2px var(--sc-plum); transform: translate(calc(-100% - 2px), -50%) scale(1.25); }

/* Leader lines (drawn by site.js; decorative) */
.sc-tl__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sc-tl__lines path { fill: none; stroke: var(--sc-plum); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 6; opacity: .55; transition: opacity .2s ease; }
.sc-tl__lines path.is-active { opacity: 1; }

/* Phone: tower above the list, no lines */
@media (max-width: 719.98px) {
	.sc-tl__layout { display: flex; flex-direction: column; gap: 1.5rem; }
	.sc-tl__tower { order: -1; width: 100%; max-width: 180px; margin: 0 auto; }
	.sc-tl__lines { display: none; }
	.sc-tl__list { justify-content: flex-start; gap: 1rem; }
}

/* Tablet / desktop: list beside the tower, rows fanned over its full height */
@media (min-width: 720px) {
	.sc-tl__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); gap: 2rem; align-items: stretch; }
	.sc-tl__layout--noimg { grid-template-columns: minmax(0, 1fr); }
	.sc-tl__list { justify-content: space-between; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-tl__dot,
	.sc-tl__chev,
	.sc-tl__lines path { transition: none; }
}

/* Phone callouts: pill column with leader lines (site.js). Gated on :has() so phone layout only changes when the partial rendered pills. */
.sc-tl__callouts { display: none; }
.sc-tl__callout { display: inline-flex; align-items: center; min-height: 32px; max-width: 100%; padding: 0 .75rem; border: 1px solid var(--sc-plum); border-radius: var(--sc-radius-btn); background: var(--sc-white); color: var(--sc-plum); font-family: var(--sc-font); font-size: .75rem; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .2s ease, color .2s ease; }
.sc-tl__callout.is-active { background: var(--sc-plum); color: var(--sc-white); }
.sc-tl__level { scroll-margin-top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-alert-height) + var(--sc-breadcrumb-height) + var(--sc-r20-height) + 1rem); }
.sc-tl__level.is-flash { border-radius: 8px; animation: sc-tl-flash 1.8s ease-out; }
@keyframes sc-tl-flash {
	0%, 35% { background-color: var(--sc-gold-40); box-shadow: 0 0 0 .5rem var(--sc-gold-40); }
	100% { background-color: transparent; box-shadow: 0 0 0 .5rem transparent; }
}
@media (max-width: 719.98px) {
	.sc-tl__layout:has(.sc-tl__callouts) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px); grid-template-areas: "callouts tower" "list list"; column-gap: 1rem; row-gap: 1.5rem; }
	.sc-tl__layout:has(.sc-tl__callouts) .sc-tl__callouts { grid-area: callouts; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 8% 0; }
	.sc-tl__layout:has(.sc-tl__callouts) .sc-tl__tower { grid-area: tower; max-width: none; margin: 0; }
	.sc-tl__layout:has(.sc-tl__callouts) .sc-tl__list { grid-area: list; }
	.sc-tl__layout:has(.sc-tl__callouts) .sc-tl__lines { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.sc-tl__callout { transition: none; }
	.sc-tl__level.is-flash { animation: none; background-color: var(--sc-gold-40); box-shadow: 0 0 0 .5rem var(--sc-gold-40); }
}

/* ── Small screens ── */
@media (max-width: 640px) {
	.sc-skytower__inner { max-width: 100%; text-align: left; }
	.sc-skytower__activities { justify-content: flex-start; }
	.sc-skytower__overlay { background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 100%); }
}

/* Do NOT add a price-table insulation block here: if .sc-pt cards get borders/striping/hover, fix the unscoped table rule
   (content tables must be table:not([class])) at source. */

/* ── SKY TOWER: School Holidays panel, cream intro, stat boxes ──
   All colours map to existing tokens - add nothing to :root. */

/* ── Part B: the intro sits on cream ─────────────────────────────────────────── */
.sc-skytower-intro { background: var(--sc-cream); }

/* .sc-pt-card is white and vanishes on cream: plum hairline at (0,2,0) on purpose.
   --primary excluded: gold card with transparent border on purpose. */
.sc-skytower-intro .sc-pt-card:not(.sc-pt-card--primary) { border-color: rgba(68,11,34,.16); }

/* ── Part A: the School Holidays panel ───────────────────────────────────────── */
.sc-sh { padding: 3rem 0; }

/* Consumes --sc-grad-plum-stops; only the 90deg angle is new. Never re-declare the stop list outside :root. */
.sc-sh__panel {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(90deg, var(--sc-grad-plum-stops));
	isolation: isolate;
}

/* Both layers needed: masking the photo alone left the centred heading's tail on bare photo. Scrim = same plum ramp again, fading right.
   Scrim consumes --sc-grad-plum-stops (no second stop list); no mask support = opaque scrim, the safe direction. */
.sc-sh__bg {
	position: absolute;
	inset: 0 0 0 auto;
	width: 58%;
	z-index: 0;
	-webkit-mask-image: linear-gradient(270deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(270deg, #000 55%, transparent 100%);
}
.sc-sh__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-sh__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, var(--sc-grad-plum-stops));
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 96%);
	mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 96%);
}

.sc-sh__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
	max-width: 54rem;
	margin: 0 auto;
}

.sc-sh__heading {
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 4.2vw, 3rem);
	line-height: 1.1;
	color: var(--sc-gold-40);
	margin: 0;
}
.sc-sh__lead { color: var(--sc-cream); font-size: 1rem; line-height: 1.6; margin: .875rem auto 0; max-width: 46rem; }

/* NOT .sc-btn--gold on purpose: pale fill + plum label. Do not import the 1.93:1 brand exception onto this panel. */
.sc-sh__cta {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	margin-top: 1.75rem;
	padding: .75rem .875rem .75rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--sc-radius-btn);
	background: var(--sc-gold-40);
	color: var(--sc-plum);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .107em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.sc-sh__cta:hover { background: var(--sc-gold-60); }
.sc-sh__cta:focus-visible { outline: 2px solid var(--sc-cream); outline-offset: 3px; }

/* Stack = first four of schoolHolidaysGallery; ring is the button's own fill so they read as cut-outs. */
.sc-sh__stack { display: inline-flex; flex-shrink: 0; }
.sc-sh__stack img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	box-shadow: 0 0 0 2px var(--sc-gold-40);
}
.sc-sh__stack img + img { margin-left: -12px; }

@media (max-width: 640px) {
	.sc-sh__cta { padding-left: 1.25rem; letter-spacing: .06em; }
	.sc-sh__stack img { width: 28px; height: 28px; }
	.sc-sh__stack img + img { margin-left: -10px; }
	.sc-sh__bg { width: 100%; opacity: .45; }
}

/* ── Part C: the stat boxes ──────────────────────────────────────────────────── */
.sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.sc-stat {
	background: var(--sc-gold-40);
	border-radius: 10px;
	padding: 1.75rem 1.25rem;
	text-align: center;
}
/* Suffix raised by font-size + relative top, not vertical-align: super or <sup> - those open the line box and unequalise box heights. */
.sc-stat__value {
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 1;
	color: var(--sc-plum);
	display: block;
}
.sc-stat__suffix {
	font-size: .45em;
	font-weight: 800;
	position: relative;
	top: -.72em;
	letter-spacing: .02em;
}
.sc-stat__label {
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--sc-plum-80);
	margin: .75rem 0 0;
}

@media (max-width: 900px) { .sc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sc-stats { grid-template-columns: 1fr; } }

/* === HOTEL ROOMS (was room.css) === */

/* Rooms landing + room detail; Grand overrides resolve --hotel-* tokens from the brand sheet, which loads later. */

/* ── Rooms landing header ────────────────────────────────── */
.sc-rooms-landing-header { padding-bottom: 2rem; }
.sc-rooms-landing__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; margin-bottom: 1rem; }
.sc-rooms-landing__intro { font-size: 1.0625rem; line-height: 1.75; color: rgba(0,0,0,.65); max-width: 900px; margin-bottom: 1.5rem; }
.sc-hotel-brand--grand .sc-rooms-landing__title { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-rooms-landing__intro { color: var(--hotel-text-muted); }

/* ── HOTEL ROOM PAGE ── */

.sc-room-gallery {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3px;
	height: 480px;
	overflow: hidden;
}

.sc-room-gallery__hero { grid-row: 1 / 3; overflow: hidden; }
.sc-room-gallery__hero-img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.4s ease; }

.sc-room-gallery__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 3px;
}

.sc-room-gallery__thumb { overflow: hidden; position: relative; cursor: pointer; }
.sc-room-gallery__thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sc-room-gallery__more { position: absolute; inset: 0; background: rgba(0,0,0,.52); color: #fff; font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; letter-spacing: .03em; }
.sc-room-gallery__hero, .sc-room-gallery__thumb { display: block; text-decoration: none; color: inherit; }
.sc-room-gallery__hero:focus-visible, .sc-room-gallery__thumb:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: -3px; }

.sc-room-overview { padding: 3rem 0; }
.sc-room-overview__inner { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
.sc-room-overview__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: 1rem; color: var(--sc-text); }
.sc-room-overview__desc { font-size: 1.0625rem; line-height: 1.7; color: rgba(0,0,0,.65); margin-bottom: 1.5rem; }

.sc-room-amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,.1); }
.sc-room-amenities__item { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; color: var(--sc-text); }
.sc-room-amenities__icon { font-size: 20px; color: var(--sc-gold); flex-shrink: 0; }

.sc-room-sidebar { background: #f8f8f6; border: 1px solid rgba(0,0,0,.08); border-radius: var(--sc-radius-card); padding: 1.75rem; position: sticky; top: calc(var(--sc-nav-height) + 48px + 1rem); }
.sc-room-sidebar__price { display: flex; align-items: baseline; gap: .375rem; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.sc-room-sidebar__price-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(0,0,0,.45); }
.sc-room-sidebar__price-amount { font-size: 1.75rem; font-weight: 800; color: var(--sc-text); }
.sc-room-sidebar__price-night { font-size: .8125rem; color: rgba(0,0,0,.45); }
.sc-room-sidebar__facts { margin: 1.25rem 0; border-top: 1px solid rgba(0,0,0,.08); padding-top: 1.25rem; }
.sc-room-sidebar__fact { display: flex; justify-content: space-between; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: .9375rem; }
.sc-room-sidebar__fact dt { color: rgba(0,0,0,.5); font-weight: 500; }
.sc-room-sidebar__fact dd { color: var(--sc-text); font-weight: 600; text-align: right; }
.sc-room-sidebar__book-btn { width: 100%; text-align: center; margin-top: 1.25rem; display: block; }

.sc-room-hotel-section .sc-section__title { font-size: 1.25rem; margin-bottom: 1.5rem; }
.sc-room-hotel-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: .875rem 2rem; }
.sc-room-hotel-item { display: flex; align-items: flex-start; gap: .625rem; }
.sc-room-hotel-item__icon { font-size: 20px; color: var(--sc-gold); flex-shrink: 0; margin-top: 1px; }
.sc-room-hotel-item__text { display: flex; flex-direction: column; gap: .125rem; }
.sc-room-hotel-item__title { font-size: .9375rem; font-weight: 600; color: var(--sc-text); }
.sc-room-hotel-item__desc { font-size: .875rem; color: rgba(0,0,0,.55); }

.sc-room-back { padding: 1.5rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.sc-room-back__link { display: inline-flex; align-items: center; gap: .375rem; color: var(--sc-text); font-weight: 600; font-size: .9375rem; text-decoration: none; transition: color .2s; }
.sc-room-back__link:hover { color: var(--sc-gold); }
.sc-room-back .material-symbols-outlined { font-size: 18px; }

.sc-hotel-brand--grand .sc-room-overview__title { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-overview__desc { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-amenities__label { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-sidebar { background: var(--hotel-card-bg); border-color: var(--hotel-card-border); }
.sc-hotel-brand--grand .sc-room-sidebar__price-amount { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-sidebar__price-night { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-sidebar__fact dt { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-sidebar__fact dd { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-sidebar__fact { border-bottom-color: var(--hotel-divider); }
.sc-hotel-brand--grand .sc-room-sidebar__facts { border-top-color: var(--hotel-divider); }
.sc-hotel-brand--grand .sc-room-hotel-item__title { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-hotel-item__desc { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-back__link { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-back__link:hover { color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-room-back { border-top-color: var(--hotel-divider); }
.sc-hotel-brand--grand .sc-room-amenities { border-top-color: var(--hotel-divider); }

@media (max-width: 1024px) {
	.sc-room-overview__inner { grid-template-columns: 1fr; }
	.sc-room-sidebar { position: static; }
	.sc-room-gallery { height: 360px; }
}

@media (max-width: 768px) {
	.sc-room-gallery { grid-template-columns: 1fr; height: auto; }
	.sc-room-gallery__hero { grid-row: auto; height: 280px; }
	.sc-room-gallery__grid { display: none; }
	.sc-room-amenities { grid-template-columns: 1fr; }
	.sc-room-hotel-items { grid-template-columns: 1fr; }
}

/* Room gallery images have NO hover effect on purpose - do not add one back (focus outlines are the keyboard cue). */

/* === TERMS & CONDITIONS (was tcs.css) === */

.sc-tcs { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,.1); }
.sc-tcs__heading { font-size: 1.0625rem; font-weight: 700; color: var(--sc-text); margin: 0 0 .75rem; }
.sc-tcs__body { font-size: .8125rem; line-height: 1.65; color: rgba(0,0,0,.55); }
.sc-tcs__body p { margin: 0 0 .6rem; }
.sc-tcs__body p:last-child { margin-bottom: 0; }
.sc-tcs__body a { color: var(--sc-gold); text-decoration: underline; text-underline-offset: 2px; }
.sc-tcs__body ul, .sc-tcs__body ol { list-style: revert; padding-left: 1.25rem; margin: 0 0 .6rem; }
.sc-tcs__body li { margin-bottom: .25rem; }

/* === UMBRACO FORMS (was forms.css) === */

/* Default Umbraco Forms theme markup (_PageForm). Two layers: BASE first, then LAYOUT - layout must come after to win. */

/* ── LAYER 1 - BASE ── */

.sc-form {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 3rem 40px;
	width: 100%;
	font-family: var(--sc-font);
	color: var(--sc-text);
}

.sc-form__heading {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--sc-text);
	margin: 0 0 1.75rem;
}

/* ── Form shell ── */
.sc-form .umbraco-forms-form { margin: 0; }
.sc-form .umbraco-forms-page { margin: 0; }

.sc-form fieldset,
.sc-form .umbraco-forms-fieldset {
	border: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	min-width: 0;
}

.sc-form legend,
.sc-form .umbraco-forms-caption {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sc-text);
	margin: 0 0 1rem;
	padding: 0;
}

.sc-form .umbraco-forms-container { display: block; }

/* ── Individual fields ── */
.sc-form .umbraco-forms-field { margin: 0 0 1.25rem; }

.sc-form .umbraco-forms-label,
.sc-form label {
	display: block;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--sc-text);
	margin: 0 0 .4rem;
}

/* Mandatory indicator (default theme adds .mandatory / a *) */
.sc-form .umbraco-forms-field.mandatory .umbraco-forms-label::after,
.sc-form .field-required::after {
	content: " *";
	color: var(--sc-gold);
	font-weight: 700;
}

/* Hide the theme's own indicator span (a second, black asterisk); the gold ::after on .mandatory is the single source. */
.sc-form .umbraco-forms-indicator { display: none; }

.sc-form .umbraco-forms-field-wrapper { display: block; }

/* ── Text inputs / textarea / select ── */
.sc-form input[type="text"],
.sc-form input[type="email"],
.sc-form input[type="tel"],
.sc-form input[type="url"],
.sc-form input[type="number"],
.sc-form input[type="date"],
.sc-form input[type="password"],
.sc-form input.text,
.sc-form textarea,
.sc-form select {
	width: 100%;
	max-width: 540px;
	font-family: var(--sc-font);
	font-size: 1rem;
	color: var(--sc-text);
	background: var(--sc-white);
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 8px;
	padding: .75rem .9rem;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
}

.sc-form textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

.sc-form input:focus,
.sc-form textarea:focus,
.sc-form select:focus {
	outline: none;
	border-color: var(--sc-gold);
	box-shadow: 0 0 0 3px rgba(220,183,65,.25);
}

.sc-form input::placeholder,
.sc-form textarea::placeholder { color: rgba(0,0,0,.4); }

/* ── Radio / checkbox lists ── markup: list > one div per option (input then label); flex each wrapper. */
.sc-form .checkboxlist,
.sc-form .radiobuttonlist {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* Each option row: [box] [label] */
.sc-form .checkboxlist > div,
.sc-form .radiobuttonlist > div {
	display: flex;
	align-items: center;
	gap: .55rem;
}

.sc-form .checkboxlist label,
.sc-form .radiobuttonlist label {
	display: inline;
	font-weight: 500;
	margin: 0;
	cursor: pointer;
}

/* flex-shrink:0 stops a long label squashing the box (also covers standalone checkboxes, e.g. Data Consent). */
.sc-form input[type="radio"],
.sc-form input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	accent-color: var(--sc-gold);
	margin: 0;
}

/* Field help text */
.sc-form .umbraco-forms-tooltip,
.sc-form .help-text,
.sc-form small {
	display: block;
	font-size: .8125rem;
	color: rgba(0,0,0,.55);
	margin-top: .35rem;
}

/* ── Validation ── */
.sc-form .field-validation-error,
.sc-form .validation-summary-errors {
	color: #b3261e;
	font-size: .8125rem;
	font-weight: 600;
	margin-top: .35rem;
}
.sc-form .validation-summary-errors {
	background: rgba(179,38,30,.08);
	border: 1px solid rgba(179,38,30,.3);
	border-radius: 8px;
	padding: .85rem 1rem;
	margin: 0 0 1.5rem;
}
.sc-form .validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }
.sc-form input.input-validation-error,
.sc-form textarea.input-validation-error,
.sc-form select.input-validation-error {
	border-color: #b3261e;
}

/* ── Success message ── theme renders an inline <span>; display:block or box styles wrap per line. */
.sc-form .umbraco-forms-submitmessage {
	display: block;
	background: rgba(220,183,65,.12);
	border: 1px solid var(--sc-gold);
	border-radius: var(--sc-radius-card);
	padding: 1.5rem 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sc-text);
}

/* ── Submit button — mirror .sc-btn / .sc-btn--gold ── */
.sc-form .umbraco-forms-navigation { margin-top: 1.75rem; }

.sc-form button[type="submit"],
.sc-form input[type="submit"],
.sc-form .umbraco-forms-navigation .btn,
.sc-form .umbraco-forms-navigation input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.75rem;
	border: 2px solid var(--sc-gold);
	border-radius: var(--sc-radius-btn);
	background: var(--sc-gold);
	color: var(--sc-text);
	font-family: var(--sc-font);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s, background .2s, color .2s, border-color .2s;
	white-space: nowrap;
}

.sc-form button[type="submit"]:hover,
.sc-form input[type="submit"]:hover,
.sc-form .umbraco-forms-navigation .btn:hover {
	opacity: .88;
}

.sc-form button[type="submit"]:focus-visible,
.sc-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--sc-gold);
	outline-offset: 3px;
}

@media (max-width: 1024px) {
	.sc-form { padding: 2.5rem 1.5rem; }
}

@media (max-width: 600px) {
	.sc-form { padding: 2rem 1.5rem; }
	.sc-form__heading { font-size: 1.4rem; }
	.sc-form input[type="text"],
	.sc-form input[type="email"],
	.sc-form input[type="tel"],
	.sc-form input[type="url"],
	.sc-form input[type="number"],
	.sc-form input[type="date"],
	.sc-form input.text,
	.sc-form textarea,
	.sc-form select { max-width: 100%; }
	.sc-form button[type="submit"],
	.sc-form input[type="submit"],
	.sc-form .umbraco-forms-navigation .btn { width: 100%; }
}

/* ── LAYER 2 - LAYOUT ── */

/* ── Contain the form as a card, left-aligned to the body copy ── */
.sc-form {
	max-width: 820px;
	margin-left: 0;          /* overrides the base margin: 0 auto - card hugs the left edge of the content column */
	margin-right: auto;
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--sc-white);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--sc-radius-card);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}

/* ── Heading with a short gold rule beneath ──────────────── */
.sc-form__heading {
	position: relative;
	padding-bottom: .9rem;
	margin-bottom: 1.9rem;
}
.sc-form__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--sc-gold);
	border-radius: 2px;
}

/* ── Inputs fill their cell (overrides the base 540px cap) ── */
.sc-form input[type="text"],
.sc-form input[type="email"],
.sc-form input[type="tel"],
.sc-form input[type="url"],
.sc-form input[type="number"],
.sc-form input[type="date"],
.sc-form input[type="password"],
.sc-form input.text,
.sc-form textarea,
.sc-form select {
	max-width: 100%;
}

/* ── Beat the Forms DEFAULT theme sheet ── themes/default/style.min.css loads AFTER site.css on every form page (theme "skycity" too)
   and wins on order: input.text/textarea get padding 5px, width 95%, max-width 400px !important, margin .5em 0; select gets the margin
   only. So selects and date inputs rendered taller and off the row baseline. (0,3,1) beats its (0,2,1); !important only to beat its max-width. */
.sc-form .umbraco-forms-field input.text,
.sc-form .umbraco-forms-field input[type="date"],
.sc-form .umbraco-forms-field textarea,
.sc-form .umbraco-forms-field select {
	display: block;
	width: 100%;
	max-width: 100% !important;
	margin: 0;
	padding: .75rem .9rem;
	border: 1px solid rgba(0,0,0,.2);
}
/* One control height for every single-line field, whatever the browser's native select/date sizing. */
.sc-form .umbraco-forms-field input.text,
.sc-form .umbraco-forms-field input[type="date"],
.sc-form .umbraco-forms-field select {
	height: 3rem;
	line-height: 1.25;
}
/* Own chevron: native select chrome ignores padding/height in Safari. */
.sc-form .umbraco-forms-field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23440B22' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: 12px 8px;
	cursor: pointer;
}
/* The border shorthand above out-specifies the base focus/error colours - restate them at matching weight. */
.sc-form .umbraco-forms-field input:focus,
.sc-form .umbraco-forms-field textarea:focus,
.sc-form .umbraco-forms-field select:focus {
	border-color: var(--sc-gold);
}
.sc-form .umbraco-forms-field input.input-validation-error,
.sc-form .umbraco-forms-field textarea.input-validation-error,
.sc-form .umbraco-forms-field select.input-validation-error {
	border-color: #b3261e;
}

/* ── Two-column field layout ── grids .umbraco-forms-container; row-gap 0 (fields' own bottom margin spaces rows). */
@media (min-width: 768px) {
	.sc-form .umbraco-forms-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
		row-gap: 0;
		/* Bottom-align so inputs line up across a row when one field carries a help line. */
		align-items: end;
	}

	/* Textareas (.longanswer) always span full width. */
	.sc-form .umbraco-forms-field.longanswer {
		grid-column: 1 / -1;
	}

	/* Odd last field spans full width. No :has() here, so it survives engines that can't parse :has(). */
	.sc-form .umbraco-forms-field:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Own rule, never grouped: an engine that can't parse :has() drops the whole comma group. Keep :has() un-nested. */
	.sc-form .umbraco-forms-field:nth-child(odd):has(+ .umbraco-forms-field.longanswer) {
		grid-column: 1 / -1;
	}

	/* Fieldset-wrapped radio/checkbox lists span full width (else the group is squeezed into a half cell). */
	.sc-form .umbraco-forms-container > fieldset,
	.sc-form .umbraco-forms-field.checkboxlist,
	.sc-form .umbraco-forms-field.radiobuttonlist,
	.sc-form .umbraco-forms-field:has(.checkboxlist),
	.sc-form .umbraco-forms-field:has(.radiobuttonlist) {
		grid-column: 1 / -1;
	}

	/* Standalone single checkboxes (Data Consent) span full width. Class rule first, :has() fallback in a SEPARATE block - never group :has(). */
	.sc-form .umbraco-forms-field.dataconsent,
	.sc-form .umbraco-forms-field.checkbox {
		grid-column: 1 / -1;
	}
	.sc-form .umbraco-forms-field:has(> .umbraco-forms-field-wrapper input[type="checkbox"]):not(:has(.checkboxlist)):not(:has(.radiobuttonlist)) {
		grid-column: 1 / -1;
	}
}

/* ── Submit sits clear of the last field ─────────────────── */
.sc-form .umbraco-forms-navigation {
	margin-top: 2rem;
}

/* ── Mobile: card goes edge-to-edge so it never feels cramped ── */
@media (max-width: 600px) {
	.sc-form {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		box-shadow: none;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* ── Pop-up enquiry form (native <dialog>) ───────────────────── */
.sc-form-dialog {
	width: min(640px, calc(100vw - 2rem));
	max-height: 90vh;
	padding: 0;                  /* padding lives on the inner scroll wrapper */
	border: 0;
	border-radius: var(--sc-radius-card);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	position: relative;
	overflow: hidden;            /* clip the inner scrollbar so the rounded corners stay clean */
}
/* Closed <dialog> must stay display:none - any author display beats the UA hide, so flex applies only to [open]. */
.sc-form-dialog:not([open]) { display: none; }
.sc-form-dialog[open] { display: flex; flex-direction: column; }
.sc-form-dialog::backdrop { background: rgba(0, 0, 0, .6); }

/* Inner region scrolls, not the <dialog>: keeps the scrollbar clipped to the rounded corners and the close button pinned. */
.sc-form-dialog__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 2.75rem 1.75rem 2rem;
	scrollbar-gutter: stable;
}

.sc-form-dialog__close {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 3;                  /* above the scroll region and its scrollbar */
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--sc-white);  /* solid chip so it reads as intentional over content/scrollbar */
	color: var(--sc-text);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
	cursor: pointer;
}
.sc-form-dialog__close:hover { background: #f4f4f4; }

/* === PROMO TOOLS (was promo.css) === */

/* Promo pop-up (.sc-promo-popup) + countdown bar (.sc-countdown); cookie-gating/auto-open live in site.js. */

/* ── Pop-up dialog ───────────────────────────────────────── */
.sc-promo-popup {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(90vw, 760px);
	width: 100%;
	overflow: visible;
}
.sc-promo-popup::backdrop { background: rgba(0,0,0,.72); }

.sc-promo-popup__media {
	display: block;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.45);
	line-height: 0;
}
a.sc-promo-popup__media { cursor: pointer; }

.sc-promo-popup__media img,
.sc-promo-popup__media video {
	display: block;
	width: 100%;
	height: auto;
}

.sc-promo-popup__close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--sc-gold);
	color: var(--sc-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.35);
	transition: background .2s ease;
	z-index: 1;
}
.sc-promo-popup__close:hover { background: #b58b2f; }
.sc-promo-popup__close .material-symbols-outlined { font-size: 24px; }

/* Breadcrumb offset variable is owned by the body padding-top rules - do not reintroduce a copy here. */

/* ── Countdown bar ───────────────────────────────────────── */
.sc-countdown {
	background: var(--sc-plum);
	color: var(--sc-white);
	/* Stacking context above brand decorations (hotel arc z 99) and bleeding heroes; below the nav (1000). */
	position: relative;
	z-index: 990;
}
.sc-countdown__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 8px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	flex-wrap: wrap;
	font-size: .9375rem;
}
.sc-countdown__label {
	font-weight: 600;
	letter-spacing: .02em;
}
.sc-countdown__time {
	font-weight: 700;
	color: var(--sc-gold);
	font-variant-numeric: tabular-nums;
}
.sc-countdown__expired {
	font-weight: 600;
	color: var(--sc-gold);
}

/* ── Countdown bar - hotel pin ── sticky beneath the nav on body.sc-brand--hotels; top mirrors body padding-top. */
body.sc-brand--hotels .sc-countdown {
	position: sticky;
	top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-breadcrumb-height) + var(--sc-r20-height));
}

@media (max-width: 600px) {
	.sc-promo-popup { max-width: 94vw; }
	.sc-promo-popup__close { width: 38px; height: 38px; top: -14px; right: -14px; }
	.sc-promo-popup__close .material-symbols-outlined { font-size: 20px; }
	.sc-countdown__inner { padding: 7px 16px; font-size: .875rem; }
}

/* ── VENUE NOTICE BAR (.sc-venue-notice) ── deliberately NOT sticky (two sticky bars at one top would overlap).
   Plum in page flow, distinct from the red Site Alert - do not restyle toward red. */
.sc-venue-notice {
	background: var(--sc-plum);
	color: var(--sc-white);
	/* Gold hairline seam against the breadcrumb so the bar doesn't read as a second alert. */
	border-top: 2px solid var(--sc-gold);
	/* Match .sc-countdown: above brand decorations (hotel arc z 99), below the nav (1000). */
	position: relative;
	z-index: 990;
}
.sc-venue-notice__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 10px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
}
.sc-venue-notice__icon {
	font-size: 20px;
	/* Gold only on icon + border; message text stays white. */
	color: var(--sc-gold);
	flex-shrink: 0;
}
.sc-venue-notice__text {
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .01em;
}

@media (max-width: 600px) {
	/* Left-align and pin the icon to the first line - a centred icon against wrapped text looks broken. */
	.sc-venue-notice__inner {
		padding: 9px 16px;
		justify-content: flex-start;
		align-items: flex-start;
		gap: .5rem;
	}
	.sc-venue-notice__icon { font-size: 18px; }
	.sc-venue-notice__text { font-size: .875rem; }
}

/* === SITEMAP PAGE (was sitemap.css) === */

.sc-sitemap-page {
	padding: calc(var(--sc-nav-height) + 56px) 0 96px;
	min-height: 60vh;
	background: var(--sc-bg);
}

.sc-sitemap-inner {
	max-width: 800px;
}

.sc-sitemap-header {
	margin-bottom: 48px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--sc-gold);
}

.sc-sitemap-title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	color: var(--sc-text);
	margin: 0 0 10px;
	letter-spacing: -0.02em;
}

.sc-sitemap-intro {
	font-size: 1rem;
	color: #666;
	margin: 0;
}

.sc-sitemap-tree {
	position: relative;
}

.sc-sitemap-root {
	margin-bottom: 4px;
}

.sc-sitemap-root-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--sc-text);
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.2s;
}

.sc-sitemap-root-link:hover { color: var(--sc-gold); }

.sc-sitemap-root-link .material-symbols-outlined {
	font-size: 20px;
	color: var(--sc-gold);
}

.sc-sitemap-branch {
	position: relative;
	padding-left: 24px;
}

.sc-sitemap-branch::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #d8d0c4;
}

.sc-sitemap-branch--last::before {
	bottom: auto;
	height: 20px;
}

.sc-sitemap-branch::after {
	content: '';
	position: absolute;
	left: 0;
	top: 20px;
	width: 18px;
	height: 1px;
	background: #d8d0c4;
}

.sc-sitemap-node--section {
	padding: 6px 0 6px 8px;
}

.sc-sitemap-link--section {
	font-size: 1rem;
	font-weight: 700;
	color: var(--sc-text);
}

.sc-sitemap-children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-sitemap-child {
	position: relative;
}

.sc-sitemap-child--d1 { padding-left: 20px; }
.sc-sitemap-child--d2 { padding-left: 40px; }
.sc-sitemap-child--d3 { padding-left: 60px; }
.sc-sitemap-child--d4 { padding-left: 80px; }

.sc-sitemap-child::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e0d8d0;
}

.sc-sitemap-child--d1::before { left: 0; }
.sc-sitemap-child--d2::before { left: 20px; }
.sc-sitemap-child--d3::before { left: 40px; }
.sc-sitemap-child--d4::before { left: 60px; }

.sc-sitemap-child--last::before {
	bottom: auto;
	height: 16px;
}

.sc-sitemap-child::after {
	content: '';
	position: absolute;
	top: 16px;
	width: 14px;
	height: 1px;
	background: #e0d8d0;
}

.sc-sitemap-child--d1::after { left: 0; }
.sc-sitemap-child--d2::after { left: 20px; }
.sc-sitemap-child--d3::after { left: 40px; }
.sc-sitemap-child--d4::after { left: 60px; }

.sc-sitemap-link {
	display: inline-block;
	padding: 5px 4px;
	font-size: 0.9375rem;
	color: var(--sc-text);
	text-decoration: none;
	transition: color 0.15s;
}

.sc-sitemap-link:hover {
	color: var(--sc-gold);
}

.sc-sitemap-link--no-url {
	color: #999;
	cursor: default;
}

.sc-sitemap-link--no-url:hover {
	color: #999;
}

.sc-sitemap-child--d1 .sc-sitemap-link { font-size: 0.9375rem; }
.sc-sitemap-child--d2 .sc-sitemap-link { font-size: 0.875rem;  color: #444; }
.sc-sitemap-child--d3 .sc-sitemap-link { font-size: 0.8125rem; color: #666; }
.sc-sitemap-child--d4 .sc-sitemap-link { font-size: 0.8125rem; color: var(--sc-text); }

.sc-sitemap-child--d2 .sc-sitemap-link:hover,
.sc-sitemap-child--d3 .sc-sitemap-link:hover,
.sc-sitemap-child--d4 .sc-sitemap-link:hover { color: var(--sc-gold); }

@media (max-width: 600px) {
	.sc-sitemap-page { padding-top: calc(var(--sc-nav-height) + 32px); }
	.sc-sitemap-child--d2 { padding-left: 32px; }
	.sc-sitemap-child--d3 { padding-left: 48px; }
	.sc-sitemap-child--d4 { padding-left: 64px; }
	.sc-sitemap-child--d2::before { left: 16px; }
	.sc-sitemap-child--d3::before { left: 32px; }
	.sc-sitemap-child--d4::before { left: 48px; }
	.sc-sitemap-child--d2::after { left: 16px; }
	.sc-sitemap-child--d3::after { left: 32px; }
	.sc-sitemap-child--d4::after { left: 48px; }
}

/* === HERO PAGE / BLOCK GRID (was hero.css) === */

/* ── Hero detail tier (600px) — neutral class, not coupled to Sky Tower ── */
.sc-hero--hero { min-height: 600px; }
@media (max-width: 600px) { .sc-hero--hero { min-height: 460px; } }

/* ── Intro blurb ───────────────────────────────────────────── */
.sc-hero-intro { max-width: 80ch; }

/* ── BLOCK GRID - wrapper, bands, padding ── */
.sc-blk { padding-block: 1.5rem; }

/* Optional per-block vertical padding (blockSettings.paddingY) */
.sc-blk--pad-s { padding-block: 0.5rem; }
.sc-blk--pad-m { padding-block: 3rem; }
.sc-blk--pad-l { padding-block: 6rem; }

/* Optional background bands (blockSettings.background) */
.sc-blk--bg-grey { background: #f4f4f4; }
.sc-blk--bg-dark { background: var(--sc-plum); color: var(--sc-white); }
.sc-blk--bg-gold { background: var(--sc-gold); color: var(--sc-text); }

/* Readability on dark/gold bands - force colours, never assume inheritance. */
.sc-blk--bg-dark .sc-rte,
.sc-blk--bg-dark .sc-rte p,
.sc-blk--bg-dark .sc-rte li,
.sc-blk--bg-dark .sc-rte h2,
.sc-blk--bg-dark .sc-rte h3,
.sc-blk--bg-dark .sc-rte h4,
.sc-blk--bg-dark .sc-blk-heading__title,
.sc-blk--bg-dark .sc-blk-heading__sub,
.sc-blk--bg-dark .sc-blk-image__caption,
.sc-blk--bg-dark .sc-blk-gallery__caption,
.sc-blk--bg-dark .sc-blk-video__caption { color: var(--sc-white); }
.sc-blk--bg-dark .sc-rte a:not(.sc-btn) { color: var(--sc-gold); }

/* Dark-band menus (The District's MENUS band depends on this) */
.sc-blk--bg-dark .sc-menus,
.sc-blk--bg-dark .sc-menus__heading,
.sc-blk--bg-dark .sc-menus__note,
.sc-blk--bg-dark .sc-menus__category-title,
.sc-blk--bg-dark .sc-menus__category-subtitle { color: var(--sc-white); }
.sc-blk--bg-dark .sc-menus__link { color: var(--sc-white); }
.sc-blk--bg-dark .sc-menus__link:hover { color: var(--sc-gold); }

/* Gold band */
.sc-blk--bg-gold .sc-rte,
.sc-blk--bg-gold .sc-rte p,
.sc-blk--bg-gold .sc-rte li,
.sc-blk--bg-gold .sc-blk-heading__title,
.sc-blk--bg-gold .sc-blk-heading__sub { color: var(--sc-text); }
.sc-blk--bg-gold .sc-blk-heading__eyebrow { color: var(--sc-text); }
.sc-blk--bg-gold .sc-rte a:not(.sc-btn) { color: var(--sc-text); text-decoration: underline; }

/* ── Alignment helpers (rich text / heading / buttons) ───────── */
.sc-blk--align-center { text-align: center; }
.sc-blk--align-right { text-align: right; }
.sc-blk--align-center .sc-blk-heading__sub { margin-left: auto; margin-right: auto; }

/* ── ROW / COLUMNS (blockRow) ── */
.sc-blk-row {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
@media (min-width: 1024px) { .sc-blk-row { padding: 0 40px; } }

@media (min-width: 768px) {
	.sc-blk-row--50-50 { grid-template-columns: 1fr 1fr; }
	.sc-blk-row--60-40 { grid-template-columns: 3fr 2fr; }
	.sc-blk-row--40-60 { grid-template-columns: 2fr 3fr; }
	.sc-blk-row--70-30 { grid-template-columns: 7fr 3fr; }
	.sc-blk-row--30-70 { grid-template-columns: 3fr 7fr; }
	.sc-blk-row--33-33-33 { grid-template-columns: 1fr 1fr 1fr; }
	.sc-blk-row--3col { grid-template-columns: repeat(3, 1fr); }
	/* 4-col: 2-up on tablet (avoids cramped columns); full 4-up at desktop (below) */
	.sc-blk-row--4col { grid-template-columns: repeat(2, 1fr); }
}

/* 4-column rows reach full 4-up only at desktop width */
@media (min-width: 1024px) {
	.sc-blk-row--4col { grid-template-columns: repeat(4, 1fr); }
}

/* Inside a column, neutralise nested container gutters/max-width (no double gutters from recursion). */
.sc-blk-col .sc-container { max-width: none; padding-left: 0; padding-right: 0; }
.sc-blk-col .sc-blk-row { max-width: none; padding-left: 0; padding-right: 0; }
.sc-blk-col .sc-blk { padding-block: 0.75rem; }
.sc-blk-col > .sc-blk:first-child { padding-top: 0; }

/* ── RICH TEXT (blockRichText) ── */
.sc-blk-rte { max-width: 80ch; }
.sc-blk-rte.sc-blk--align-center { margin-left: auto; margin-right: auto; }

/* ── HEADING (blockHeading) ── */
.sc-blk-heading__eyebrow {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sc-plum);
	margin-bottom: .5rem;
}
.sc-blk-heading__title { font-size: 1.75rem; font-weight: 800; margin: 0 0 .5rem; line-height: 1.2; }
.sc-blk-heading__sub { font-size: 1.05rem; color: rgba(0,0,0,.6); margin: 0; max-width: 60ch; }

/* ── IMAGE (blockImage) ── */
.sc-blk-image-wrap--full { width: 100%; }
.sc-blk-image { margin: 0; }
.sc-blk-image__img { display: block; width: 100%; height: auto; border-radius: var(--sc-radius-card); }
.sc-blk-image-wrap--full .sc-blk-image__img { border-radius: 0; }
.sc-blk-image__caption { margin: .6rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); text-align: center; }

/* Uniform 4:3 card images, scoped to row columns only - standalone images keep their natural ratio. */
.sc-blk-row .sc-blk-col .sc-blk-image__img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}
.sc-blk-row .sc-blk-col .sc-blk-image__caption { min-height: 2.6em; }

/* ── GALLERY (blockGallery) - grid reuses .sc-gallery ── */
.sc-blk-gallery__caption { margin: .75rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); }

/* ── VIDEO (blockVideo) - responsive 16:9 facade iframe ── */
.sc-blk-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: #000;
}
.sc-blk-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sc-blk-video__caption { margin: .6rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); text-align: center; }

/* ── BUTTONS (blockButtons) ── */
.sc-blk-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.sc-blk-buttons.sc-blk--align-center { justify-content: center; }
.sc-blk-buttons.sc-blk--align-right { justify-content: flex-end; }

/* ── CARD GRID (blockCards) - cols-2 narrows the band so 2-up sits centred ── */
.sc-blk-cards__heading { font-size: 1.5rem; font-weight: 800; margin: 0; }
.sc-blk-cards--cols-2 { max-width: 920px; margin-inline: auto; }

/* ── EMBED (blockEmbed) - URL mode (raw code mode sizes itself) ── */
.sc-blk-embed {
	position: relative;
	width: 100%;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	background: #000;
}
.sc-blk-embed--16-9 { aspect-ratio: 16 / 9; }
.sc-blk-embed--4-3 { aspect-ratio: 4 / 3; }
.sc-blk-embed--1-1 { aspect-ratio: 1 / 1; }
.sc-blk-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sc-blk-embed-raw { width: 100%; }

/* ── SPACER / DIVIDER (blockSpacer) ── */
.sc-blk-spacer { display: flex; align-items: center; }
.sc-blk-spacer--s { height: 1rem; }
.sc-blk-spacer--m { height: 2.5rem; }
.sc-blk-spacer--l { height: 5rem; }
.sc-blk-spacer__rule { width: 100%; border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 0; }
.sc-blk--bg-dark .sc-blk-spacer__rule { border-top-color: rgba(255,255,255,.18); }

/* ── CONTEXTUAL NAV (_ContextualNav) ── */
.sc-ctxnav { background: var(--sc-white); border-bottom: 1px solid rgba(0,0,0,.1); }
.sc-ctxnav--sticky { position: sticky; top: var(--sc-nav-height); z-index: 500; }
.sc-ctxnav__inner {
	display: flex;
	gap: .25rem;
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.sc-ctxnav__inner::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .sc-ctxnav__inner { padding: 0 40px; } }
.sc-ctxnav__link {
	display: inline-block;
	white-space: nowrap;
	padding: 1rem .9rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-text);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .2s, border-color .2s;
}
.sc-ctxnav__link:hover { color: var(--sc-plum); }
.sc-ctxnav__link.is-active { color: var(--sc-plum); border-bottom-color: var(--sc-gold); }

/* ── AGE GATE (_AgeGate) ── */
.sc-agegate {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	color: var(--sc-white);
}
.sc-agegate::backdrop { background: rgba(10,10,10,.78); backdrop-filter: blur(6px); }
.sc-agegate__panel {
	background: var(--sc-plum);
	color: var(--sc-white);
	border: 1px solid var(--sc-gold);
	border-radius: var(--sc-radius-card);
	padding: 2.5rem 2rem;
	width: min(440px, calc(100vw - 2rem));
	text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.sc-agegate__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; color: var(--sc-white); }
.sc-agegate__body { color: rgba(255,255,255,.85); margin-bottom: 1.75rem; }
.sc-agegate__body p { margin: 0 0 .75rem; }
.sc-agegate__body p:last-child { margin-bottom: 0; }
.sc-agegate__actions { display: flex; flex-direction: column; gap: .75rem; }
.sc-agegate__actions .sc-btn { width: 100%; justify-content: center; }

.sc-agegate[open] { animation: scAgeGateIn .25s ease; }
@keyframes scAgeGateIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sc-agegate[open] { animation: none; }
}

/* ── FEATURE CARD (featureCard) ── white surface so text stays legible on any band; whole face is a stretched link when linked. */
.sc-feature-card {
	position: relative;                 /* containing block for the stretch overlay */
	display: flex;
	flex-direction: column;
	height: 100%;                       /* fill a stretched row column so a row is equal-height */
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	color: var(--sc-text);
	transition: box-shadow .25s, transform .25s;
}
/* Hover lift only when the card actually links somewhere */
.sc-feature-card--link:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); transform: translateY(-2px); }

.sc-feature-card__figure { margin: 0; overflow: hidden; background: #f4f4f4; }
.sc-feature-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }

.sc-feature-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: .5rem; padding: 1.25rem; }
.sc-feature-card__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-plum); }
.sc-feature-card__heading { font-family: var(--sc-font); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; margin: 0; color: var(--sc-text); }
.sc-feature-card__summary { font-size: .9rem; line-height: 1.6; color: rgba(51,51,51,.9); margin: 0; }

/* Decorative gold pill — the stretch link owns the click, so it must never intercept */
.sc-feature-card__cta {
	align-self: flex-start;
	margin-top: .35rem;
	pointer-events: none;
	display: inline-block;
	padding: .5rem 1.25rem;
	background: var(--sc-gold);
	color: var(--sc-white);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--sc-radius-btn);
}
.sc-feature-card--link:hover .sc-feature-card__cta { background: var(--sc-gold-80); }

/* Stretch link must be out of flow - in flow it became a grid item in --left and displaced the image. */
.sc-feature-card__stretch { position: absolute; inset: 0; z-index: 1; }
.sc-feature-card__stretch:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: -2px; }

/* --top: vertical — image (~3/2) then body */
.sc-feature-card--top .sc-feature-card__figure { aspect-ratio: 3 / 2; }

/* --left: image left / text right (~40/60) at ≥768px; stacks image-top below */
.sc-feature-card--left .sc-feature-card__figure { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
	.sc-feature-card--left { display: grid; grid-template-columns: 2fr 3fr; align-items: stretch; }
	.sc-feature-card--left .sc-feature-card__figure { aspect-ratio: auto; height: 100%; }
	.sc-feature-card--left .sc-feature-card__body { justify-content: center; padding: 1.75rem; }
}

/* Equal-height feature-card rows: opt card columns into stretch. Each :has() stays in its own rule. */
.sc-blk-row .sc-blk-col:has(.sc-feature-card) { align-self: stretch; }
.sc-blk-col:has(.sc-feature-card) > .sc-blk { height: 100%; }
.sc-blk-col:has(.sc-feature-card) > .sc-blk > .sc-container { height: 100%; }

/* Feature card hover: no lift, no shadow; images have no hover treatment. Stretch link keeps its focus outline. */
.sc-feature-card--link:hover {
	transform: none;
	box-shadow: none;
}

/* ── TRUSTEE PROFILE CARDS ── scoped entirely under [id^="trustee-"] (blockSettings.anchorId).
   Portrait rule repeats .sc-blk-row .sc-blk-col on purpose: (0,4,1) beats the 4:3 card rule; image block emits no object-position. */

/* padding-block at (0,2,1) so it survives the .sc-blk-row padding: 0 40px shorthand at >=1024px. */
[id^="trustee-"] .sc-blk-row {
	padding-block: 1.5rem;
	border: 1px solid var(--sc-plum-20);
	border-radius: var(--sc-radius-card);
	align-items: start;
}

/* Portrait-left proportions. */
@media (min-width: 768px) {
	[id^="trustee-"] .sc-blk-row--50-50 {
		grid-template-columns: minmax(0, 220px) 1fr;
	}
}

/* Lone column (photo removed). Own rule so a :has()-less engine drops only this. */
[id^="trustee-"] .sc-blk-row:has(> .sc-blk-col:only-child) {
	grid-template-columns: 1fr;
}

/* 4/5 portrait, 220px cap. object-position centre is deliberate - do not add an upward bias. */
[id^="trustee-"] .sc-blk-row .sc-blk-col .sc-blk-image__img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 50%;
}
[id^="trustee-"] .sc-blk-col .sc-blk-image {
	max-width: 220px;
}

/* <768px centre the FIGURE (the img already fills it; the col is symmetric). (0,2,1) beats .sc-blk-image margin:0. */
@media (max-width: 767px) {
	[id^="trustee-"] .sc-blk-col .sc-blk-image {
		margin-inline: auto;
	}
}

/* Captions deliberately blank (alt=""), so cancel the reserved caption height. */
[id^="trustee-"] .sc-blk-row .sc-blk-col .sc-blk-image__caption {
	min-height: 0;
}

/* Name + affiliation. The name is an <h3> inside blockRichText. */
[id^="trustee-"] .sc-blk-rte h3 {
	margin: 0 0 .35rem;
	font-size: 1.25rem;
	line-height: 1.25;
}

/* Affiliation line - a paragraph that is only an <em>. Own rule (:has()). */
[id^="trustee-"] .sc-blk-rte p:has(> em:only-child) {
	margin: 0 0 .75rem;
	color: var(--sc-plum);
	font-size: .9375rem;
}

/* === CORPORATE (was corporate.css) === */

/* Group landing site (skycity.co.nz): scoped to .sc-body--minimal / .sc-minhead / .sc-ptiles, inert elsewhere. */

/* --- Body: kill the fixed-nav padding-top (the minimal header is static) ---- */
.sc-body--minimal { padding-top: 0 !important; }

/* --- Logo-only header ------------------------------------------------------- */
.sc-minhead {
	background: var(--sc-white);
	padding: 1.5rem 1.25rem;
	border: 0;
}

.sc-minhead__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sc-minhead__logo {
	display: inline-flex;
	line-height: 0;
}

.sc-minhead__logo img {
	display: block;
	width: auto;
	height: 42px;
	max-width: 100%;
}

/* --- Property tiles: 4-up, fills the viewport below the header -------------- */
.sc-ptiles {
	background: var(--sc-plum);
}

.sc-ptiles__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	min-height: calc(100vh - 92px);
	gap: 0;
}

.sc-ptiles__tile {
	position: relative;
	overflow: hidden;
	min-height: 62vh;
	background: var(--sc-plum);
}

.sc-ptiles__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 2.5rem 2rem 3rem;
	overflow: hidden;
	color: var(--sc-white);
	text-decoration: none;
}

/* Image layer — separate element so it can scale on hover without moving text */
.sc-ptiles__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--tile-img);
	background-size: cover;
	background-position: var(--tile-pos, 50% 50%);
	background-repeat: no-repeat;
	transition: transform .6s ease, filter .6s ease;
}

/* Dark scrim over the image for label legibility (bottom-weighted) */
.sc-ptiles__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .72) 0%,
		rgba(0, 0, 0, .38) 34%,
		rgba(0, 0, 0, .05) 62%,
		rgba(0, 0, 0, 0) 100%
	);
}

.sc-ptiles__body {
	position: relative;
	z-index: 2;
	display: block;
}

.sc-ptiles__label {
	margin: 0 0 .6rem;
	font-family: var(--sc-font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
	line-height: 1.1;
	color: var(--sc-white);
	text-wrap: balance;
}

.sc-ptiles__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--sc-font);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-gold);
}

.sc-ptiles__more .material-symbols-outlined {
	font-size: 1.25rem;
	transition: transform .3s ease;
}

/* Hover - arrow nudge only; tile images have no hover effect (removed site-wide). */
.sc-ptiles__link:hover .sc-ptiles__more .material-symbols-outlined,
.sc-ptiles__link:focus-visible .sc-ptiles__more .material-symbols-outlined {
	transform: translateX(4px);
}

.sc-ptiles__link:focus-visible {
	outline: 3px solid var(--sc-gold);
	outline-offset: -3px;
}

/* --- Responsive: 2-up on tablet, stacked on mobile ------------------------- */
@media (max-width: 960px) {
	.sc-ptiles__grid {
		grid-template-columns: repeat(2, 1fr);
		min-height: 0;
	}
	.sc-ptiles__tile { min-height: 50vh; }
}

@media (max-width: 560px) {
	.sc-ptiles__grid { grid-template-columns: 1fr; }
	.sc-ptiles__tile { min-height: 56vw; }
	.sc-ptiles__link { padding: 2rem 1.5rem 2.25rem; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.sc-ptiles__link::before,
	.sc-ptiles__more .material-symbols-outlined {
		transition: none;
	}
	/* No ::before hover overrides here - they would add a brightness hover for reduced-motion users only. */
	.sc-ptiles__link:hover .sc-ptiles__more .material-symbols-outlined,
	.sc-ptiles__link:focus-visible .sc-ptiles__more .material-symbols-outlined {
		transform: none;
	}
}

/* ── CASINO REFRESH - featured promo tile, safety band, expandable sections (Casino / CasinoSection.cshtml) ── */

/* ── Featured promo ── tile background is plum so an item with no image still reads as a tile. */
.sc-casino-promo__tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%; /* LOAD-BEARING: aspect-ratio + max-height with no width makes Chrome derive width from the capped height - tile stops short. */
	aspect-ratio: 21 / 9;
	min-height: 300px;
	max-height: 520px;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	isolation: isolate;
	background: var(--sc-plum);
	color: var(--sc-white);
	text-decoration: none;
}
.sc-casino-promo__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}
.sc-casino-promo__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(68,11,34,.84) 0%, rgba(68,11,34,.30) 50%, rgba(68,11,34,0) 100%);
}
.sc-casino-promo__body {
	position: relative;
	z-index: 2;
	max-width: 62rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
/* Gold fill, plum label - no gold text on a light surface; same pair as .sc-wo-tile__badge--offer. */
.sc-casino-promo__pill {
	display: inline-block;
	margin-bottom: .875rem;
	padding: .5rem .875rem;
	border-radius: 6px;
	background: var(--sc-gold);
	color: var(--sc-plum);
	font: 700 .75rem/1 var(--sc-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sc-casino-promo__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--sc-white);
}
.sc-casino-promo__summary {
	margin: 0;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: var(--sc-white);
}
.sc-casino-promo__tile:hover .sc-casino-promo__img { transform: scale(1.03); }
.sc-casino-promo__tile:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: 3px; }

@media (max-width: 600px) {
	.sc-casino-promo__tile { aspect-ratio: auto; min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
	.sc-casino-promo__img { transition: none; }
	.sc-casino-promo__tile:hover .sc-casino-promo__img { transform: none; }
}

/* Up to three featured promos stack full-width in picker order. */
.sc-casino-promo__tile + .sc-casino-promo__tile { margin-top: 1.5rem; }

/* ── Safety tiles band ── after another grey section its top padding goes, so the two read as one band. */
.sc-section--grey + .sc-casino-safety { padding-top: 0; }

/* ── Expandable sections ── mirrors the _FaqBlock grouped panel; native <details>; open row changes only its fill. */
.sc-expand-group {
	margin: 1.5rem 0;
	border: 1px solid rgba(122,91,46,.18);
	border-radius: 12px;
	overflow: hidden;
}
.sc-expand { border-top: 1px solid rgba(122,91,46,.18); transition: background .2s; }
.sc-expand:first-child { border-top: 0; }
.sc-expand:hover { background: rgba(122,91,46,.05); }
.sc-expand[open] { background: #EFD9A0; }
.sc-expand[open]:hover { background: #EFD9A0; }

.sc-expand__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.75rem;
	cursor: pointer;
	list-style: none;
}
/* Own block: an engine that doesn't know the -webkit- pseudo drops the whole comma group. */
.sc-expand__summary::-webkit-details-marker { display: none; }
.sc-expand__summary:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: -2px; border-radius: 12px; }

/* (0,2,1) beats .sc-rte h2 (0,1,1) on specificity, not file order; the .sc-rte h2::after underline is dropped here. */
.sc-rte .sc-expand__summary h2 {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sc-plum);
}
.sc-rte .sc-expand__summary h2::after { content: none; }

.sc-expand__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(122,91,46,.12);
	font-size: 1.125rem;
	line-height: 1;
	color: var(--sc-plum);
	transition: transform .25s, background .2s;
}
.sc-expand[open] .sc-expand__icon { transform: rotate(180deg); background: rgba(255,255,255,.75); }

.sc-expand__body { padding: 0 1.75rem 1.5rem; }
.sc-expand__body > :first-child { margin-top: 0; }
.sc-expand__body > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.sc-expand__summary { padding: 1.125rem 1.25rem; }
	.sc-expand__body { padding: 0 1.25rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sc-expand,
	.sc-expand__icon { transition: none; }
}
/* Nested drop-down (an H4 inside an open section): white card on the gold panel. (0,2,0) beats the .sc-expand[open] gold fill. */
.sc-expand.sc-expand--nested {
	margin: .75rem 0 1.25rem;
	border: 1px solid rgba(122,91,46,.18);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.sc-expand.sc-expand--nested:hover { background: #fafafa; }
.sc-expand.sc-expand--nested[open] { background: #fff; }
.sc-expand--nested > .sc-expand__summary { padding: .875rem 1.25rem; }
.sc-rte .sc-expand--nested > .sc-expand__summary h4 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sc-plum);
}
.sc-expand--nested .sc-expand__icon { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
.sc-expand--nested[open] .sc-expand__icon { background: rgba(122,91,46,.12); }
.sc-expand--nested > .sc-expand__body { padding: 0 1.25rem 1rem; }

/* ── SHOW TIERS (.sc-tiers*) - _ShowTiers.cshtml via the {{showTiers}} token ──
   Inside .sc-rte (0,1,1): competing rules sit at (0,2,x). JOIN NOW is deliberately NOT .sc-btn--gold. */
.sc-tiers { margin: 1.5rem 0 2.5rem; }

.sc-tiers .sc-tiers__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sc-tiers .sc-tiers__item { margin: 0; line-height: 1.4; }

.sc-tiers .sc-tiers__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: .75rem .25rem .5rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
}
.sc-tiers .sc-tiers__card:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 4px; }

.sc-tiers .sc-tiers__img {
	display: block;
	width: 82%;
	height: auto;
	transform: rotate(10deg);
	filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .22));
	transition: transform .2s ease;
}
.sc-tiers .sc-tiers__card:hover .sc-tiers__img,
.sc-tiers .sc-tiers__card:focus-visible .sc-tiers__img { transform: translateY(-2px) rotate(10deg); }

.sc-tiers .sc-tiers__name {
	display: block;
	margin-top: 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sc-tier, var(--sc-text));
}
.sc-tiers .sc-tiers__more {
	display: block;
	margin-top: .5rem;
	font-size: .8rem;
	font-weight: 300;
	color: var(--sc-text);
}

/* ── Dialog ── padding 0 so the panel fills the box: site.js closes a dialog when its OWN element is clicked. */
.sc-tiers .sc-tiers__dialog {
	width: 100%;
	max-width: min(960px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	margin: auto;
	padding: 0;
	border: 1px solid #d8d8d8;
	border-radius: 0;
	background: var(--sc-white);
	color: var(--sc-text);
	overflow: auto;
}
.sc-tiers .sc-tiers__dialog::backdrop { background: rgba(0, 0, 0, .6); }
html:has(.sc-tiers__dialog[open]) { overflow: hidden; }

.sc-tiers .sc-tiers__panel {
	position: relative;
	display: grid;
	gap: 1.75rem;
	padding: 3.25rem 1.5rem 2rem;
}
.sc-tiers .sc-tiers__close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #666;
	cursor: pointer;
}
.sc-tiers .sc-tiers__close .material-symbols-outlined {
	font-size: 2.25rem;
	font-variation-settings: 'wght' 200, 'opsz' 40;
}
.sc-tiers .sc-tiers__close:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 2px; }

.sc-tiers .sc-tiers__dialog-img {
	display: block;
	justify-self: center;
	width: 100%;
	max-width: 280px;
	height: auto;
	margin: .5rem 0 1rem;
	transform: rotate(10deg);
	filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .22));
}

.sc-tiers .sc-tiers__body { min-width: 0; }
.sc-tiers .sc-tiers__title {
	margin: 0;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sc-tier, var(--sc-text));
}
.sc-tiers .sc-tiers__status {
	margin: .25rem 0 0;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--sc-text);
}
.sc-tiers .sc-tiers__intro {
	margin: 1.25rem 0 0;
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.5;
}
.sc-tiers .sc-tiers__benefits {
	margin-top: 1.25rem;
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.5;
}
.sc-tiers .sc-tiers__benefits h4 {
	margin: .5rem 0 0;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sc-text);
}
.sc-tiers .sc-tiers__benefits h4:first-child { margin-top: 0; }
.sc-tiers .sc-tiers__benefits ul { margin: 0; padding: 0; list-style: none; }
.sc-tiers .sc-tiers__benefits li { margin: 0; line-height: 1.5; }
.sc-tiers .sc-tiers__benefits p { margin: 0; line-height: 1.5; }

.sc-tiers a.sc-tiers__cta {
	display: inline-block;
	margin-top: 1.75rem;
	padding: .5rem 2.25rem;
	border-radius: 0;
	background: var(--sc-tier, var(--sc-plum));
	color: var(--sc-white);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter .15s ease;
}
.sc-tiers a.sc-tiers__cta:hover { color: var(--sc-white); filter: brightness(.9); }
.sc-tiers a.sc-tiers__cta:focus-visible { outline: 2px solid var(--sc-plum); outline-offset: 3px; }

/* ── No JS: every tier's content shows inline, one tier per row (site.js adds .is-ready). */
.sc-tiers:not(.is-ready) .sc-tiers__list { grid-template-columns: minmax(0, 1fr); }
.sc-tiers:not(.is-ready) .sc-tiers__card { cursor: default; }
.sc-tiers:not(.is-ready) .sc-tiers__dialog {
	position: static;
	display: block;
	max-width: none;
	max-height: none;
	margin: 1rem 0 0;
}
.sc-tiers:not(.is-ready) .sc-tiers__close { display: none; }

@media (min-width: 600px) {
	.sc-tiers .sc-tiers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
	.sc-tiers .sc-tiers__panel {
		grid-template-columns: 40% minmax(0, 1fr);
		align-items: center;
		gap: 2.5rem;
		padding: 2.5rem 3.5rem 2.5rem 2.5rem;
	}
	.sc-tiers .sc-tiers__dialog-img { max-width: none; margin: 0; }
	.sc-tiers .sc-tiers__body { align-self: start; }
}
@media (min-width: 960px) {
	.sc-tiers .sc-tiers__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
	.sc-tiers.is-ready .sc-tiers__dialog {
		max-width: 100%;
		max-height: 100%;
		height: 100%;
		margin: 0;
		border: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sc-tiers .sc-tiers__img,
	.sc-tiers a.sc-tiers__cta { transition: none; }
}