/**
 * SEO New Landing — RISS Productions
 * Stylesheet for seonewlanding.php
 *
 * Sections, in template order:
 *  01 Banner + form + ratings   07 Cinematic films      13 Venues
 *  02 About + trust + stats     08 Real weddings        14 Contact
 *  03 Services (tabs)           09 Testimonials         15 Blog
 *  04 Process timeline          10 Packages             16 Instagram
 *  05 Featured in               11 Why choose RISS      17 FAQs
 *  06 Gallery                   12 Areas + map          + footer / overlays
 */

/* =======================================================================
 * TOKENS
 * ==================================================================== */
.sl-landing {
	--sl-ink: #14110f;
	--sl-ink-soft: #1e1a17;
	--sl-ink-2: #2a2521;
	--sl-ivory: #faf6f0;
	--sl-cream: #f2ebe0;
	--sl-paper: #ffffff;
	/* Replaces the black section backgrounds. */
	--sl-sand: rgb(250, 247, 242);
	--sl-gold: #b3924f;
	--sl-gold-lt: #d8c193;
	/* Deeper gold reserved for filled buttons: white on #b3924f is only
	 * ~2.9:1, which fails WCAG AA. #85692f clears 5:1. */
	--sl-gold-deep: #85692f;
	--sl-gold-deep-h: #6f5726;

	/* Type colours — heading + body, matched to the main site. */
	--sl-heading: rgb(28, 24, 19);
	--sl-body: rgb(95, 95, 102);
	--sl-body-light: rgba(250, 246, 240, .72);
	--sl-line: rgba(20, 17, 15, .12);
	--sl-line-light: rgba(250, 246, 240, .18);

	/* Type stack — same as rissproductions.com.au. */
	--sl-display: "kudryashev-d-contrast-sans", Georgia, serif;
	--sl-sans: "Work Sans", sans-serif;

	--sl-heading-size: 45px;
	--sl-body-size: 16px;
	--sl-body-lh: 25.6px;

	--sl-shell: 1240px;
	--sl-gap: clamp(20px, 4vw, 48px);
	--sl-pad: clamp(56px, 8vw, 118px);
	--sl-radius: 2px;
	--sl-ease: cubic-bezier(.22, .61, .36, 1);
}

/* =======================================================================
 * BASE
 * ==================================================================== */
.sl-landing * { box-sizing: border-box; }

/* Cover-cropped media anchors slightly above centre. In wedding photography
 * the subject's head sits in the upper third, so when a source image doesn't
 * match its frame's aspect ratio the crop should eat the floor, not the face.
 * Components can override per-case. */
.sl-panel__media img,
.sl-step__media img,
.sl-film__btn img,
.sl-rw__media img,
.sl-post__media img,
.sl-about__media img { object-position: center 32%; }

/* Gallery cells range from 0.66 (tall) to 2.79 (wide). Tall cells crop on
 * width so Y is a no-op there; wide cells crop hard on height, so the anchor
 * sits higher to keep faces above the cut line. */
.sl-grid__btn img { object-position: center 10%; }

body.sl-landing {
	margin: 0;
	padding: 0;
	background: var(--sl-ivory);
	color: var(--sl-body);
	font-family: var(--sl-sans);
	font-size: var(--sl-body-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sl-body-lh);
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Element resets use :where() so they carry ZERO specificity. Written as
 * `.sl-landing a` they would score (0,1,1) and beat every single-class
 * component rule (0,1,0) — silently forcing buttons back to the inherited
 * body colour and stripping padding off list-based components. */
:where(.sl-landing) img { max-width: 100%; height: auto; display: block; }
:where(.sl-landing) a { color: inherit; text-decoration: none; }

/* Headings — kudryashev-d-contrast-sans, 24px / 500 / rgb(28,24,19). */
.sl-landing h1,
.sl-landing h2,
.sl-landing h3,
.sl-landing h4,
.sl-landing h5,
.sl-landing h6 {
	margin: 0;
	font-family: var(--sl-display);
	font-size: var(--sl-heading-size);
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--sl-heading);
}

/* Body copy — Work Sans, 16px / 400 / 25.6px / rgb(95,95,102).
 * Written with :where() so it stays the *default*: utility paragraphs that
 * carry their own class (eyebrows, dates, meta lines, fine print) keep the
 * size and colour their component needs. */
:where(.sl-landing) p {
	margin: 0 0 1.1em;
	font-family: var(--sl-sans);
	font-size: var(--sl-body-size);
	font-style: normal;
	font-weight: 400;
	line-height: var(--sl-body-lh);
	letter-spacing: normal;
	color: var(--sl-body);
}
:where(.sl-landing) ul,
:where(.sl-landing) ol { margin: 0; padding: 0; list-style: none; }
:where(.sl-landing) button { font: inherit; color: inherit; }
:where(.sl-landing) em { font-style: italic; }

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

.sl-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--sl-ink);
	color: var(--sl-ivory);
	padding: 12px 20px;
}
.sl-skip:focus { left: 12px; top: 12px; }

.sl-shell {
	width: min(100% - 2 * clamp(18px, 5vw, 56px), var(--sl-shell));
	margin-inline: auto;
}

.sl-center { text-align: center; margin: 46px 0 0; }

/* Shared type ------------------------------------------------------- */
.sl-eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--sl-gold);
}
.sl-eyebrow--light { color: var(--sl-gold-lt); }

/* Section headings inherit the global heading spec; only colour varies. */
.sl-landing .sl-h2 em { font-style: italic; color: var(--sl-gold); }
.sl-landing .sl-h2--light { color: var(--sl-ivory); }
.sl-landing .sl-h2--light em { color: var(--sl-gold-lt); }

/* Services, Films and Why Choose moved from black to --sl-sand, so their
 * "light" modifiers have to invert back to ink. The hero and contact are
 * still light-on-photo, so the base modifiers above stay as they are. */
.sl-services .sl-eyebrow--light,
.sl-films .sl-eyebrow--light,
.sl-why .sl-eyebrow--light { color: var(--sl-gold-deep); }

.sl-landing .sl-services .sl-h2--light,
.sl-landing .sl-films .sl-h2--light,
.sl-landing .sl-why .sl-h2--light { color: var(--sl-heading); }

.sl-landing .sl-services .sl-h2--light em,
.sl-landing .sl-films .sl-h2--light em,
.sl-landing .sl-why .sl-h2--light em { color: var(--sl-gold-deep); }

.sl-services .sl-sechead__intro--light,
.sl-films .sl-sechead__intro--light,
.sl-why .sl-sechead__intro--light { color: var(--sl-body); }

.sl-sechead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 48px;
	margin-bottom: clamp(36px, 5vw, 64px);
}
.sl-sechead--center {
	display: block;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}
.sl-sechead__intro {
	max-width: 560px;
	margin: 16px 0 0;
}
.sl-sechead--center .sl-sechead__intro { margin-inline: auto; }
.sl-sechead__intro--light { color: var(--sl-body-light); }

.sl-chip {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 14px;
	border: 1px solid var(--sl-gold);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--sl-gold-lt);
}

/* Buttons ----------------------------------------------------------- */
.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 34px;
	border: 1px solid transparent;
	border-radius: var(--sl-radius);
	font-family: var(--sl-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .3s var(--sl-ease), color .3s var(--sl-ease), border-color .3s var(--sl-ease), transform .3s var(--sl-ease);
}
.sl-btn:hover { transform: translateY(-2px); }
.sl-btn--gold { background: var(--sl-gold-deep); color: #fff; }
.sl-btn--gold:hover { background: var(--sl-gold-deep-h); color: #fff; }
/* "--dark" kept as a class name for compatibility but styled gold — black is not
   part of the brand palette (#c19a4b / #fff / #faf7f2). */
.sl-btn--dark { background: #c19a4b; color: #fff; }
.sl-btn--dark:hover { background: var(--sl-gold-deep); color: #fff; }
.sl-btn--outline { border-color: #c19a4b; color: var(--sl-gold-deep); background: transparent; }
.sl-btn--outline:hover { background: #c19a4b; color: #fff; }
.sl-btn--ghost { border-color: rgba(255, 255, 255, .7); color: #fff; background: rgba(255, 255, 255, .1); }
.sl-btn--ghost:hover { background: #fff; color: var(--sl-ink); }
.sl-btn--sm { padding: 12px 24px; font-size: 12px; }
.sl-btn--block { width: 100%; }

.sl-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sl-gold-deep);
}
/* Contact is still light-on-photo, where the deep gold would go muddy. */
.sl-contact .sl-link { color: var(--sl-gold-lt); }
.sl-link__arrow { transition: transform .3s var(--sl-ease); }
.sl-link:hover .sl-link__arrow { transform: translateX(6px); }

/* Reveal on scroll --------------------------------------------------
 * Scoped to .sl-js (set on <html> by the inline flag in seonewlanding.php).
 * The starting "hidden" state therefore only applies when JavaScript is
 * actually running to add .is-in. With JS disabled, blocked, or broken the
 * content is simply visible — which is what crawlers and JS-less visitors
 * get, instead of a blank page.
 * ------------------------------------------------------------------ */
.sl-js .sl-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--sl-ease), transform .8s var(--sl-ease);
}
.sl-js .sl-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sl-landing *,
	.sl-landing *::before,
	.sl-landing *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	/* Must stay .sl-js-scoped to outrank the hidden state above. */
	.sl-js .sl-reveal { opacity: 1; transform: none; }
}

/* =======================================================================
 * HEADER
 * ==================================================================== */
.sl-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 90;
	background: #fff;
	transition: box-shadow .35s var(--sl-ease);
}
.sl-header.is-stuck { box-shadow: 0 4px 20px rgba(20, 17, 15, .1); }

/* Gold rule across the very top, as on the main site. */
.sl-header__bar { height: 7px; background: var(--sl-gold); }

/* 1fr / auto / 1fr keeps the menu centred on the page rather than centred in
 * the space left over beside the logo. */
.sl-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 12px 0;
}
.sl-header__logo { justify-self: start; }
.sl-header__logo img {
	height: 52px;
	width: auto;
	transition: height .35s var(--sl-ease);
}
.sl-header.is-stuck .sl-header__logo img { height: 44px; }

.sl-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 2.2vw, 36px);
}
.sl-nav__link {
	position: relative;
	font-family: var(--sl-display);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sl-heading);
	padding: 6px 0;
	transition: color .3s var(--sl-ease);
}
.sl-nav__link:hover { color: var(--sl-gold-deep); }
.sl-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--sl-gold);
	transition: width .3s var(--sl-ease);
}
.sl-nav__link:hover::after,
.sl-nav__link.is-current::after { width: 100%; }

.sl-burger {
	justify-self: end;
	display: none;
	width: 40px;
	height: 34px;
	padding: 6px 4px;
	background: none;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
}
.sl-burger span {
	display: block;
	height: 1.5px;
	width: 100%;
	background: var(--sl-ink);
	transition: transform .3s var(--sl-ease), opacity .3s var(--sl-ease);
}
.sl-burger.is-open span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.sl-burger.is-open span:nth-child(2) { opacity: 0; }
.sl-burger.is-open span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* =======================================================================
 * 01. BANNER
 * ==================================================================== */
.sl-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: clamp(130px, 16vh, 190px) 0 clamp(70px, 10vh, 110px);
	overflow: hidden;
}
.sl-hero__bg { position: absolute; inset: 0; overflow: hidden; }
/* Crossfading slideshow: opacity swaps slides, while every slide shares a
   continuous slow Ken Burns zoom so the fade never snaps mid-scale. */
.sl-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.5s var(--sl-ease);
	animation: sl-zoom 22s ease-in-out infinite alternate;
	will-change: opacity, transform;
}
.sl-hero__slide.is-active { opacity: 1; }
@keyframes sl-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
	.sl-hero__slide { animation: none; transition: none; }
}

.sl-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(12, 10, 9, .88) 0%, rgba(12, 10, 9, .68) 46%, rgba(12, 10, 9, .34) 100%),
		linear-gradient(180deg, rgba(12, 10, 9, .6) 0%, rgba(12, 10, 9, 0) 34%);
}

/* Form removed from the hero — single centred column; the CTA row links down
   to the contact form (#sl-contact) instead. */
.sl-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	text-align: center;
}
.sl-hero__copy { max-width: 1100px; width: 100%; }

.sl-landing .sl-hero__title {
	color: #fff;
	font-size: clamp(34px, 4.6vw, 58px);
	line-height: 1.12;
	margin-bottom: 24px;
}
.sl-landing .sl-hero__title em { font-style: italic; color: var(--sl-gold-lt); }

.sl-hero__text {
	max-width: 64ch;
	color: rgba(255, 255, 255, .85);
	margin: 0 auto 38px;
}

.sl-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 54px; }

/* Ratings row */
.sl-ratings {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	max-width: 900px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, .2);
	padding-top: 34px;
}
.sl-rating { display: flex; flex: 1 1 150px; justify-content: center; padding-right: clamp(22px, 3.5vw, 48px); }
.sl-rating + .sl-rating { padding-left: clamp(22px, 3.5vw, 48px); border-left: 1px solid rgba(255, 255, 255, .16); }

/* Bottom-aligned so the item without a score ("Est. 2010") still lines its
 * label up with "Google Reviews" / "Easy Weddings" instead of floating to
 * the top of the row. */
.sl-rating__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
}
a.sl-rating__inner:hover .sl-rating__label { color: var(--sl-gold-lt); }

.sl-rating__score {
	display: block;
	font-family: var(--sl-display);
	font-size: 34px;
	line-height: 1;
	color: #fff;
}
.sl-rating__stars {
	display: block;
	margin: 4px 0 6px;
	font-size: 13px;
	letter-spacing: .16em;
	color: #e8b53c;
}
.sl-rating__label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	transition: color .3s var(--sl-ease);
}
.sl-rating__note {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.45;
	/* Reserve two lines in every column so the bottom alignment above stays
	 * true whether a note wraps or not. */
	min-height: 2.9em;
	color: rgba(255, 255, 255, .68);
	letter-spacing: .02em;
}

/* Form card */
.sl-formcard {
	background: rgba(250, 246, 240, .97);
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--sl-radius);
	padding: clamp(24px, 3vw, 38px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.sl-formcard__title {
	margin-bottom: 8px;
	text-align: center;
}
.sl-formcard__note {
	text-align: center;
	margin-bottom: 22px;
}
.sl-formcard__fine {
	margin: 14px 0 0;
	font-size: 11.5px;
	text-align: center;
	color: #8a827c;
}

.sl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sl-field { display: block; margin-bottom: 14px; }
.sl-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sl-ink);
}
.sl-field__label span { color: var(--sl-gold); margin-left: 2px; }

.sl-field input,
.sl-field select,
.sl-field textarea {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	font-family: var(--sl-sans);
	font-size: 14.5px;
	font-weight: 300;
	color: var(--sl-ink);
	transition: border-color .25s var(--sl-ease), box-shadow .25s var(--sl-ease);
}
.sl-field textarea { resize: vertical; min-height: 96px; }
.sl-field input:focus,
.sl-field select:focus,
.sl-field textarea:focus {
	outline: none;
	border-color: var(--sl-gold);
	box-shadow: 0 0 0 3px rgba(179, 146, 79, .16);
}
.sl-field.is-invalid input,
.sl-field.is-invalid select { border-color: #c0392b; }

.sl-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.sl-alert {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 3px solid;
	font-size: 13.5px;
	line-height: 1.55;
}
.sl-alert--success { background: rgba(96, 141, 90, .12); border-color: #608d5a; color: #38562f; }
.sl-alert--error { background: rgba(192, 57, 43, .1); border-color: #c0392b; color: #8f2b20; }

/* Now a <button>: clicking it steps to the next banner slide. */
.sl-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 3;
	width: 26px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 14px;
	transform: translateX(-50%);
	cursor: pointer;
	transition: border-color .3s var(--sl-ease);
}
.sl-hero__scroll:hover { border-color: var(--sl-gold-lt); }
.sl-hero__scroll span {
	position: absolute;
	left: 50%;
	top: 9px;
	width: 3px;
	height: 7px;
	margin-left: -1.5px;
	background: #fff;
	border-radius: 2px;
	animation: sl-scroll 1.8s var(--sl-ease) infinite;
}
@keyframes sl-scroll {
	0% { opacity: 0; transform: translateY(0); }
	40% { opacity: 1; }
	100% { opacity: 0; transform: translateY(16px); }
}

/* =======================================================================
 * 02. ABOUT + TRUST + STATS
 * ==================================================================== */
.sl-about { padding: var(--sl-pad) 0; background: #fff; }
.sl-about__inner {
	display: grid;
	grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
	gap: clamp(30px, 5vw, 72px);
	align-items: center;
}
.sl-about__media { margin: 0; position: relative; }
.sl-about__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--sl-radius);
}
.sl-about__media::after {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 1px solid var(--sl-gold);
	z-index: -1;
}
.sl-about__p:last-of-type { margin-bottom: 26px; }

.sl-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 26px;
	margin: 0 0 32px;
	padding: 26px 0;
	border-top: 1px solid var(--sl-line);
	border-bottom: 1px solid var(--sl-line);
}
.sl-trust__item { display: flex; gap: 12px; align-items: flex-start; }
.sl-trust__tick {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	border-radius: 50%;
	border: 1px solid var(--sl-gold);
	position: relative;
}
.sl-trust__tick::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 4px;
	width: 5px;
	height: 9px;
	border: solid var(--sl-gold);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
.sl-trust__item strong {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--sl-ink);
}
.sl-trust__item em {
	display: block;
	font-style: normal;
	font-size: 13px;
	line-height: 1.55;
	margin-top: 2px;
}

.sl-about__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.sl-about__mail {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--sl-gold-deep);
	border-bottom: 1px solid rgba(133, 105, 47, .45);
	padding-bottom: 2px;
}
.sl-about__mail:hover { color: var(--sl-ink); border-color: var(--sl-ink); }

/* =======================================================================
 * 03. SERVICES (TABS)
 * ==================================================================== */
.sl-services {
	padding: var(--sl-pad) 0;
	background: var(--sl-sand);
	color: var(--sl-body);
	/* The sand tone is close to the neighbouring ivory sections, so a hairline
	 * keeps the section rhythm the black background used to provide. */
	border-block: 1px solid var(--sl-line);
}
.sl-services__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 48px;
	margin-bottom: 34px;
}
.sl-services__intro { max-width: 440px; margin: 0; color: var(--sl-body); }

.sl-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 4px;
	border-top: 1px solid var(--sl-line);
	border-bottom: 1px solid var(--sl-line);
	scrollbar-width: none;
}
.sl-tabs::-webkit-scrollbar { display: none; }
.sl-tabs__btn {
	position: relative;
	flex: 1 0 auto;
	padding: 18px 22px;
	background: none;
	border: 0;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #948d87;
	cursor: pointer;
	transition: color .3s var(--sl-ease), background .3s var(--sl-ease);
}
.sl-tabs__btn::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--sl-gold);
	transition: width .35s var(--sl-ease);
}
.sl-tabs__btn:hover { color: var(--sl-heading); }
.sl-tabs__btn.is-active { background: #c19a4b; color: #fff; }
.sl-tabs__btn.is-active:hover { color: #fff; }
.sl-tabs__btn.is-active::after { width: 100%; }

.sl-panels { position: relative; margin-top: clamp(30px, 4vw, 54px); }
.sl-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(26px, 4vw, 62px);
	align-items: center;
	animation: sl-fade .6s var(--sl-ease) both;
}
.sl-panel[hidden] { display: none; }
@keyframes sl-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sl-panel__media { position: relative; margin: 0; overflow: hidden; }
.sl-panel__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 1s var(--sl-ease);
}
.sl-panel__media:hover img { transform: scale(1.04); }
.sl-panel__no {
	position: absolute;
	left: 12px;
	top: 6px;
	font-family: var(--sl-display);
	font-size: clamp(64px, 9vw, 128px);
	line-height: 1;
	color: rgba(255, 255, 255, .3);
	pointer-events: none;
}
.sl-panel__chip {
	position: absolute;
	left: 18px;
	bottom: 18px;
	padding: 8px 18px;
	background: #c19a4b;
	border: 1px solid rgba(255, 255, 255, .45);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
}

.sl-landing .sl-panel__title {
	color: var(--sl-heading);
	margin-bottom: 18px;
}
.sl-panel__text { color: var(--sl-body); margin-bottom: 24px; }

.sl-panel__list { margin-bottom: 30px; }
.sl-panel__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sl-line);
	font-size: 14px;
	color: var(--sl-body);
}
.sl-panel__list li span {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border: 1px solid var(--sl-gold);
	border-radius: 50%;
	position: relative;
}
.sl-panel__list li span::after {
	content: "";
	position: absolute;
	left: 5.5px;
	top: 3.5px;
	width: 4px;
	height: 8px;
	border: solid var(--sl-gold);
	border-width: 0 1.4px 1.4px 0;
	transform: rotate(45deg);
}

.sl-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sl-panel__count { font-size: 12px; letter-spacing: .2em; color: #9a938c; }

/* =======================================================================
 * 04. PROCESS TIMELINE
 * ==================================================================== */
.sl-process { padding: var(--sl-pad) 0; background: var(--sl-paper); }

.sl-steps { position: relative; }
.sl-steps::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--sl-line);
	transform: translateX(-.5px);
}

.sl-step {
	display: grid;
	grid-template-columns: 1fr 78px 1fr;
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
	padding: clamp(22px, 3vw, 40px) 0;
}
.sl-step:nth-child(even) .sl-step__copy { order: 3; text-align: left; }
.sl-step:nth-child(even) .sl-step__marker { order: 2; }
.sl-step:nth-child(even) .sl-step__media { order: 1; }
.sl-step:nth-child(odd) .sl-step__copy { text-align: right; }

.sl-step__title {
	margin-bottom: 14px;
}
.sl-step__text { margin: 0; }

.sl-step__marker { display: flex; justify-content: center; }
.sl-step__marker span {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--sl-paper);
	border: 1px solid var(--sl-gold);
	font-family: var(--sl-display);
	font-size: 20px;
	color: var(--sl-gold);
}
.sl-step:nth-child(even) .sl-step__marker span { background: var(--sl-gold); color: #fff; }

.sl-step__media { margin: 0; overflow: hidden; }
.sl-step__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 1s var(--sl-ease);
}
.sl-step__media:hover img { transform: scale(1.05); }

/* =======================================================================
 * 05. FEATURED IN
 * ==================================================================== */
.sl-featured {
	padding: clamp(44px, 6vw, 76px) 0;
	background: var(--sl-cream);
	text-align: center;
	border-block: 1px solid var(--sl-line);
}
.sl-featured__title { margin-bottom: 6px; }
.sl-featured__label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--sl-gold);
	margin-bottom: 34px;
}
.sl-featured__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 4vw, 56px);
}
.sl-featured__item img { max-height: 46px; width: auto; opacity: .7; filter: grayscale(1); transition: opacity .3s var(--sl-ease), filter .3s var(--sl-ease); }
.sl-featured__item:hover img { opacity: 1; filter: none; }
.sl-featured__word {
	font-family: var(--sl-display);
	font-size: clamp(17px, 1.9vw, 23px);
	letter-spacing: .05em;
	color: rgba(20, 17, 15, .55);
	transition: color .3s var(--sl-ease);
}
.sl-featured__item:hover .sl-featured__word { color: var(--sl-ink); }

/* =======================================================================
 * 06. GALLERY
 * ==================================================================== */
.sl-gallery { padding: var(--sl-pad) 0; background: var(--sl-ivory); }

.sl-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 220px;
	gap: 14px;
	/* Dense backfills any cell a wide/tall item had to skip. Without it the
	 * default sparse flow leaves holes, and the holes move around as soon as
	 * anyone reorders the repeater in ACF. */
	grid-auto-flow: dense;
}
.sl-grid__item { margin: 0; overflow: hidden; position: relative; }
.sl-grid__item--wide { grid-column: span 2; }
.sl-grid__item--tall { grid-row: span 2; }

.sl-grid__btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: var(--sl-cream);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.sl-grid__btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--sl-ease), filter .5s var(--sl-ease);
}
.sl-grid__btn:hover img { transform: scale(1.07); }

.sl-grid__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 44px 18px 16px;
	text-align: left;
	background: linear-gradient(180deg, rgba(20, 17, 15, 0) 0%, rgba(20, 17, 15, .8) 100%);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s var(--sl-ease), transform .4s var(--sl-ease);
	padding-left:18px !important;
}
.sl-grid__btn:hover .sl-grid__cap,
.sl-grid__btn:focus-visible .sl-grid__cap { opacity: 1; transform: none; }
.sl-grid__name {
	display: block;
	font-family: var(--sl-display);
	font-size: 21px;
	color: #fff;
}
.sl-grid__loc {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sl-gold-lt);
}

/* =======================================================================
 * 07. CINEMATIC FILMS
 * ==================================================================== */
.sl-films {
	padding: var(--sl-pad) 0;
	background: var(--sl-sand);
	border-block: 1px solid var(--sl-line);
}

.sl-films__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}
.sl-film { margin: 0; }
.sl-film__btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--sl-cream);
	cursor: pointer;
	overflow: hidden;
}
.sl-film__btn[disabled] { cursor: default; }
.sl-film__btn img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	opacity: .94;
	transition: transform 1s var(--sl-ease), opacity .4s var(--sl-ease);
}
.sl-film__btn:hover img { transform: scale(1.05); opacity: 1; }

.sl-film__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 78px;
	height: 78px;
	margin: -39px 0 0 -39px;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(3px);
	transition: background .3s var(--sl-ease), transform .3s var(--sl-ease);
}
.sl-film__play::after {
	content: "";
	position: absolute;
	left: 31px;
	top: 26px;
	border-style: solid;
	border-width: 13px 0 13px 20px;
	border-color: transparent transparent transparent #fff;
}
.sl-film__btn:hover .sl-film__play { background: var(--sl-gold); transform: scale(1.08); }

.sl-film__len {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 4px 10px;
	background: rgba(0, 0, 0, .6);
	font-size: 11px;
	letter-spacing: .1em;
	color: #fff;
}

.sl-film__meta { padding: 16px 2px 0; }
.sl-landing .sl-film__title { color: var(--sl-heading); }
.sl-film__venue {
	margin: 4px 0 0;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sl-gold-deep);
}

/* =======================================================================
 * 08. REAL WEDDINGS
 * ==================================================================== */
.sl-real { padding: var(--sl-pad) 0; background: var(--sl-paper); }
.sl-real__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.6vw, 34px);
}
.sl-rw { margin: 0; }
.sl-rw__media { margin: 0; overflow: hidden; }
.sl-rw__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 1s var(--sl-ease);
}
.sl-rw__link:hover .sl-rw__media img { transform: scale(1.05); }
.sl-rw__body { padding: 20px 0 0; }
.sl-rw__venue {
	margin: 0 0 8px;
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--sl-gold);
}
.sl-rw__title { margin-bottom: 10px; }
.sl-rw__text { margin-bottom: 14px; }

/* =======================================================================
 * 09. TESTIMONIALS
 * ==================================================================== */
.sl-reviews { padding: var(--sl-pad) 0; background: var(--sl-cream); }

.sl-slider { position: relative; }
.sl-slider__viewport { overflow: hidden; }
.sl-slider__track {
	display: flex;
	gap: 20px;
	transition: transform .55s var(--sl-ease);
	touch-action: pan-y;
	cursor: grab;
}
.sl-slider__track.is-dragging { transition: none; cursor: grabbing; }
.sl-slide { flex: 0 0 calc((100% - 60px) / 4); }

.sl-review {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 26px 24px;
	background: var(--sl-paper);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	transition: box-shadow .35s var(--sl-ease), transform .35s var(--sl-ease);
}
.sl-review:hover { box-shadow: 0 18px 40px rgba(20, 17, 15, .1); transform: translateY(-4px); }

.sl-review__head { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.sl-review__stars {
	font-size: 14px;
	line-height: 1;
	letter-spacing: .14em;
	/* Trailing letter-spacing hangs off the last star — pull it back so the
	 * badge sits a consistent distance from the row. */
	margin-right: -.14em;
	color: #e8b53c;
}
.sl-review__badge {
	position: relative;
	flex: none;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #2f7cf6;
	line-height: 1;
}
/* Checkmark drawn from a rotated border: always dead-centre, no font
 * dependency (Work Sans has no U+2713, so the glyph fell back to another
 * face and shifted). */
.sl-review__badge::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3.5px;
	height: 7px;
	margin: -4.5px 0 0 -2px;
	border: solid #fff;
	border-width: 0 1.6px 1.6px 0;
	transform: rotate(45deg);
}

.sl-review__body { flex: 1; }
.sl-review__text {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sl-review.is-open .sl-review__text { -webkit-line-clamp: unset; overflow: visible; }
.sl-review__more {
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sl-gold-deep);
	cursor: pointer;
	transition: color .25s var(--sl-ease);
}
.sl-review__more:hover { color: var(--sl-ink); }
.sl-review__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sl-line); }
.sl-review__name { display: block; font-size: 13.5px; font-weight: 500; color: var(--sl-ink); }
.sl-review__date { display: block; margin-top: 2px; font-size: 12px; color: #8a827c; }

.sl-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	display: grid;
	place-items: center;
	background: var(--sl-paper);
	border: 1px solid var(--sl-line);
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	color: var(--sl-ink);
	cursor: pointer;
	transition: background .3s var(--sl-ease), color .3s var(--sl-ease);
}
.sl-slider__nav:hover { background: var(--sl-gold-deep); border-color: var(--sl-gold-deep); color: #fff; }
.sl-slider__nav--prev { left: -18px; }
.sl-slider__nav--next { right: -18px; }
.sl-slider__nav[disabled] { opacity: .3; cursor: default; }

.sl-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.sl-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 1px solid var(--sl-gold);
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background .3s var(--sl-ease), width .3s var(--sl-ease);
}
.sl-slider__dot.is-active { background: var(--sl-gold); width: 22px; border-radius: 4px; }

/* =======================================================================
 * 10. PACKAGES
 * ==================================================================== */
.sl-packages { padding: var(--sl-pad) 0; background: var(--sl-ivory); }
.sl-pkg__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
	align-items: stretch;
}
.sl-pkg {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
	background: var(--sl-paper);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	transition: transform .35s var(--sl-ease), box-shadow .35s var(--sl-ease);
}
.sl-pkg:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(20, 17, 15, .1); }
.sl-pkg--featured { background: #c19a4b; border-color: #c19a4b; }
.sl-pkg--featured .sl-pkg__name,
.sl-pkg--featured .sl-pkg__price { color: #fff; }
.sl-pkg--featured .sl-pkg__summary,
.sl-pkg--featured .sl-pkg__list li { color: rgba(255, 255, 255, .92); }
.sl-pkg--featured .sl-pkg__list li { border-color: rgba(255, 255, 255, .35); }
.sl-pkg--featured .sl-pkg__list li::before { background: #fff; }
/* On the gold card the gold button would vanish — invert it to white. */
.sl-pkg--featured .sl-btn--gold { background: #fff; color: #a9823a; }
.sl-pkg--featured .sl-btn--gold:hover { background: #faf7f2; color: #85692f; }

.sl-pkg__flag {
	position: absolute;
	right: 18px;
	top: -11px;
	padding: 5px 14px;
	background: var(--sl-gold-deep);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
}
.sl-pkg__name { margin-bottom: 6px; }
.sl-pkg__price {
	margin: 0 0 14px;
	font-family: var(--sl-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--sl-gold);
}
.sl-pkg__summary { margin-bottom: 18px; }
.sl-pkg__list { flex: 1; margin-bottom: 26px; }
.sl-pkg__list li {
	position: relative;
	padding: 10px 0 10px 20px;
	border-bottom: 1px solid var(--sl-line);
	font-size: 13.5px;
}
.sl-pkg__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 8px;
	height: 1px;
	background: var(--sl-gold);
}

/* =======================================================================
 * 11. WHY CHOOSE RISS
 * ==================================================================== */
.sl-why {
	padding: var(--sl-pad) 0;
	background: var(--sl-sand);
	border-block: 1px solid var(--sl-line);
}
.sl-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--sl-line);
	border: 1px solid var(--sl-line);
}
.sl-why__item {
	padding: clamp(26px, 3vw, 42px);
	background: var(--sl-sand);
	transition: background .35s var(--sl-ease);
}
.sl-why__item:hover { background: var(--sl-cream); }
.sl-why__no {
	display: block;
	font-family: var(--sl-display);
	font-size: 34px;
	line-height: 1;
	color: var(--sl-gold);
	margin-bottom: 16px;
}
.sl-landing .sl-why__title { color: var(--sl-heading); margin-bottom: 10px; }
.sl-why__text { color: var(--sl-body); margin: 0; }

/* =======================================================================
 * 12. AREAS + MAP
 * ==================================================================== */
.sl-areas { padding: var(--sl-pad) 0; background: var(--sl-paper); }
.sl-areas__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(30px, 4vw, 64px);
	/* Top-aligned now the list runs to 27 entries — centring left the map
	 * floating in the middle of a very tall column. */
	align-items: start;
}
.sl-areas__intro { margin-bottom: 24px; }
.sl-areas__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin-bottom: 24px;
}
.sl-areas__list li { border-bottom: 1px solid var(--sl-line); }

/* Each area is a button that re-pins the map. */
.sl-area {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 10px 4px 10px 0;
	background: none;
	border: 0;
	text-align: left;
	font-size: 14px;
	line-height: 1.45;
	color: var(--sl-body);
	cursor: pointer;
	transition: color .25s var(--sl-ease);
}
.sl-area em { font-style: normal; font-size: 12.5px; color: #9a938c; }
.sl-area:hover { color: var(--sl-heading); }

/* Teardrop pin, filled once the area is the one on the map. */
.sl-area__pin {
	position: relative;
	flex: none;
	width: 11px;
	height: 11px;
	margin-top: 6px;
	border: 1px solid var(--sl-gold);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	transition: background .25s var(--sl-ease), border-color .25s var(--sl-ease);
}
.sl-area:hover .sl-area__pin { background: var(--sl-gold-lt); }

.sl-area.is-active { color: var(--sl-heading); font-weight: 500; }
.sl-area.is-active .sl-area__pin {
	background: var(--sl-gold-deep);
	border-color: var(--sl-gold-deep);
}
.sl-areas__addr { margin: 0; }
.sl-areas__addr strong { color: var(--sl-ink); font-weight: 500; }

.sl-areas__map {
	/* Sticky also establishes the containing block for the caption below. */
	position: sticky;
	top: 110px;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--sl-line);
	overflow: hidden;
}
.sl-areas__canvas { width: 100%; height: 100%; }
.sl-areas__canvas .leaflet-container { background: var(--sl-cream); }

/* Teardrop pin, matching the list markers. */
.sl-pin { background: none; border: 0; }
.sl-pin__dot {
	display: block;
	width: 18px;
	height: 18px;
	background: var(--sl-gold-deep);
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(20, 17, 15, .35);
	transition: background .2s var(--sl-ease);
}
.leaflet-marker-icon:hover .sl-pin__dot { background: var(--sl-gold); }

.sl-areas__canvas .leaflet-popup-content-wrapper {
	border-radius: 2px;
	font-family: var(--sl-sans);
}
.sl-areas__canvas .leaflet-popup-content { margin: 12px 16px; font-size: 13px; line-height: 1.5; }
.sl-areas__canvas .leaflet-popup-content strong { font-size: 14px; color: var(--sl-heading); }
.sl-areas__canvas .leaflet-tooltip {
	font-family: var(--sl-sans);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sl-areas__canvas .leaflet-control-attribution { font-size: 10px; }
.sl-map-reset a { font-size: 18px; line-height: 26px; text-align: center; }

/* Announces the pinned area — visible caption and an aria-live region. */
/* Bottom-LEFT pill, clear of Leaflet's attribution strip (bottom-right),
 * which the OSM/CARTO terms require to stay visible. */
.sl-areas__pinned {
	position: absolute;
	left: 10px;
	bottom: 24px;
	z-index: 500;
	margin: 0;
	padding: 8px 14px;
	background: rgba(255, 255, 255, .95);
	border: 1px solid var(--sl-line);
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba(20, 17, 15, .12);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sl-heading);
	pointer-events: none;
}
.sl-areas__pinned:empty { display: none; }

/* =======================================================================
 * 13. VENUES
 * ==================================================================== */
.sl-venues { padding: var(--sl-pad) 0; background: var(--sl-cream); }

/* Embla carousel — 4 cards per view, gap-based track. The viewport clips,
 * the container is the transformed flex row, the slides are fixed-basis. */
.sl-embla { position: relative; }
.sl-embla__viewport { overflow: hidden; }
.sl-embla__container {
	display: flex;
	gap: clamp(14px, 2vw, 26px);
	touch-action: pan-y pinch-zoom;
	backface-visibility: hidden;
}
.sl-venues__slider .sl-embla__slide {
	/* 4 up: subtract the 3 gaps before dividing. */
	flex: 0 0 calc((100% - 3 * clamp(14px, 2vw, 26px)) / 4);
	min-width: 0;
}
/* Lift on hover needs room to travel, and the dots need clearance from the
 * cards — the viewport is only clipping horizontally in spirit, so pad it. */
.sl-venues__slider .sl-embla__viewport { padding: 6px 0 10px; margin: -6px 0 -10px; }
.sl-venues__slider .sl-slider__dots:empty { display: none; }

.sl-venue {
	background: var(--sl-paper);
	border: 1px solid var(--sl-line);
	overflow: hidden;
	transition: transform .35s var(--sl-ease), box-shadow .35s var(--sl-ease);
}
.sl-venue:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(20, 17, 15, .12); }
.sl-venue__media { margin: 0; overflow: hidden; }
.sl-venue__media img {
	width: 100%;
	/* Square, not 4:3 — the venue set is a mix of portrait and landscape
	 * source shots, and a square frame is the ratio that crops the least
	 * from both. At 4:3 the portrait venues lost half their height. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* Five of these venues only exist as 2:3 portraits, so the square frame
	 * drops 33% of their height. Anchoring at 12% means the visible slice
	 * runs 4%-71% of the source — the crop comes off the bottom and heads
	 * stay in. At the global 32% it started 10.7% down and clipped them.
	 * Landscape sources crop on width here, so Y is a no-op for those. */
	object-position: center 12%;
	transition: transform 1s var(--sl-ease);
}
.sl-venue:hover .sl-venue__media img { transform: scale(1.07); }
.sl-venue__body { padding: 18px 20px 22px; }
.sl-venue__name { margin-bottom: 4px; }
.sl-venue__area {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sl-gold);
}

/* =======================================================================
 * 14. CONTACT
 * ==================================================================== */
.sl-contact {
	position: relative;
	padding: var(--sl-pad) 0;
	background-color: var(--sl-ink);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.sl-contact__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 12, 10, .93) 0%, rgba(14, 12, 10, .82) 55%, rgba(14, 12, 10, .68) 100%);
}
.sl-contact__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr);
	gap: clamp(30px, 5vw, 70px);
	align-items: center;
}
.sl-contact__text { color: var(--sl-body-light); max-width: 52ch; margin-bottom: 26px; }
.sl-contact__details { display: grid; gap: 10px; }
.sl-contact__details li {
	padding-left: 18px;
	position: relative;
	font-size: 15px;
	color: rgba(250, 246, 240, .88);
}
.sl-contact__details li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 8px;
	height: 1px;
	background: var(--sl-gold);
}
/* Explicit colour: the theme's global link colour otherwise paints these
   tel:/mailto: links dark and unreadable on the dark background. */
.sl-landing .sl-contact__details a { color: rgba(250, 246, 240, .92); text-decoration: none; }
.sl-landing .sl-contact__details a:hover { color: var(--sl-gold-lt); }

.sl-formcard--contact { background: var(--sl-ivory); }

/* =======================================================================
 * 15. BLOG
 * ==================================================================== */
.sl-blog { padding: var(--sl-pad) 0; background: var(--sl-ivory); }
.sl-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.6vw, 34px);
}
.sl-post { margin: 0; }
.sl-post__media { margin: 0; overflow: hidden; background: var(--sl-cream); }
.sl-post__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 1s var(--sl-ease);
}
.sl-post__link:hover .sl-post__media img { transform: scale(1.05); }
.sl-post__body { padding: 18px 0 0; }
.sl-post__date {
	margin: 0 0 8px;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sl-gold);
}
.sl-post__title { margin-bottom: 10px; }
.sl-landing .sl-post__link:hover .sl-post__title { color: var(--sl-gold); }
.sl-post__excerpt { margin-bottom: 14px; }

/* =======================================================================
 * 16. INSTAGRAM
 * ==================================================================== */
.sl-insta { padding: var(--sl-pad) 0 0; background: var(--sl-paper); }
/* Shortcode feed (e.g. Smash Balloon) — edge-to-edge, with breathing room
   below (the manual tile grid sits flush to the section edge instead). */
.sl-insta__shortcode {
	width: 100%;
	margin-top: clamp(30px, 4vw, 50px);
	padding-bottom: clamp(44px, 6vw, 84px);
}
.sl-insta__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-top: clamp(30px, 4vw, 50px);
}
.sl-insta__item a {
	position: relative;
	display: block;
	overflow: hidden;
}
.sl-insta__item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform .8s var(--sl-ease), filter .4s var(--sl-ease);
}
.sl-insta__item a:hover img { transform: scale(1.08); filter: brightness(.6); }
.sl-insta__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid #fff;
	border-radius: 8px;
	opacity: 0;
	transition: opacity .35s var(--sl-ease);
}
.sl-insta__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: 2px solid #fff;
	border-radius: 50%;
}
.sl-insta__item a:hover .sl-insta__icon { opacity: 1; }

/* =======================================================================
 * 17. FAQS
 * ==================================================================== */
.sl-faq { padding: var(--sl-pad) 0; background: var(--sl-ivory); }
.sl-faq__list { max-width: 900px; margin-inline: auto; border-top: 1px solid var(--sl-line); }
.sl-faq__item { border-bottom: 1px solid var(--sl-line); }
.sl-faq__q { margin: 0; }
.sl-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 22px 4px;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--sl-display);
	font-size: var(--sl-heading-size);
	font-weight: 500;
	line-height: 1.3;
	color: var(--sl-heading);
	cursor: pointer;
	transition: color .3s var(--sl-ease);
}
.sl-faq__btn:hover { color: var(--sl-gold); }
.sl-faq__icon {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
}
.sl-faq__icon::before,
.sl-faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--sl-gold);
	transition: transform .3s var(--sl-ease);
}
.sl-faq__icon::before { width: 16px; height: 1px; margin: 0 0 0 -8px; }
.sl-faq__icon::after { width: 1px; height: 16px; margin: -8px 0 0 0; }
.sl-faq__btn[aria-expanded="true"] .sl-faq__icon::after { transform: rotate(90deg); }

.sl-faq__a { overflow: hidden; }
.sl-faq__a p {
	margin: 0;
	padding: 0 60px 24px 4px;
}

/* =======================================================================
 * FOOTER + OVERLAYS
 * ==================================================================== */
.sl-footer {
	padding: clamp(40px, 5vw, 64px) 0 90px;
	background: #fff;
}

/* Row 1 — logo left, menu right, rule underneath */
.sl-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding-bottom: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--sl-line);
}
.sl-footer__logo img { height: 58px; width: auto; }

.sl-footer__nav { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.2vw, 34px); }
.sl-footer__nav a {
	font-size: 16px;
	color: var(--sl-heading);
	transition: color .25s var(--sl-ease);
}
.sl-footer__nav a:hover { color: var(--sl-gold-deep); }

/* Row 2 — address left, phone + email right */
.sl-footer__mid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px 40px;
	padding: clamp(26px, 3.4vw, 42px) 0 clamp(24px, 3vw, 38px);
}
.sl-footer__address {
	display: grid;
	gap: 8px;
	font-style: normal;
	color: var(--sl-heading);
}
.sl-footer__reach { display: grid; gap: 8px; text-align: right; }
.sl-footer__reach a {
	color: var(--sl-heading);
	transition: color .25s var(--sl-ease);
}
.sl-footer__reach a:hover { color: var(--sl-gold-deep); }

/* Row 3 — legal links left, social circles right */
.sl-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding-bottom: clamp(22px, 3vw, 34px);
}
.sl-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.sl-footer__legal a {
	color: var(--sl-heading);
	transition: color .25s var(--sl-ease);
}
.sl-footer__legal a:hover { color: var(--sl-gold-deep); }

.sl-footer__social { display: flex; align-items: center; gap: 14px; }
.sl-footer__social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	color: var(--sl-ink);
	box-shadow: 0 2px 12px rgba(20, 17, 15, .16);
	transition: background .25s var(--sl-ease), color .25s var(--sl-ease), transform .25s var(--sl-ease);
}
.sl-footer__social a:hover {
	background: var(--sl-gold-deep);
	color: #fff;
	transform: translateY(-2px);
}
.sl-footer__social svg { width: 18px; height: 18px; display: block; }

/* Row 4 — copyright left, credit right */
.sl-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 32px;
}
.sl-footer__copy,
.sl-footer__credit {
	margin: 0;
	font-size: 13px;
	color: #9a938c;
}
.sl-footer__credit a { color: inherit; transition: color .25s var(--sl-ease); }
.sl-footer__credit a:hover { color: var(--sl-gold-deep); }

/* Sticky mobile CTA */
.sl-sticky {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 80;
	display: none;
	gap: 1px;
	background: var(--sl-line-light);
}
.sl-sticky a {
	flex: 1;
	padding: 15px 10px;
	text-align: center;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.sl-sticky__call { flex: 0 0 34% !important; background: var(--sl-ink); color: var(--sl-ivory); }
.sl-sticky__cta { background: var(--sl-gold-deep); color: #fff; font-weight: 600; }

/* Back to top */
.sl-top {
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 70;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--sl-ink);
	color: var(--sl-ivory);
	border: 1px solid var(--sl-gold);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .3s var(--sl-ease), transform .3s var(--sl-ease), background .3s var(--sl-ease);
}
.sl-top.is-shown { opacity: 1; pointer-events: auto; transform: none; }
.sl-top:hover { background: var(--sl-gold); }

/* The trx_addons plugin (chroma theme) injects its own scroll-to-top button
   via wp_footer — hide it here, the landing page has its own (.sl-top). */
.sl-landing .trx_addons_scroll_to_top { display: none !important; }

/* Lightbox */
.sl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 70px;
	background: rgba(10, 8, 7, .95);
	opacity: 0;
	transition: opacity .3s var(--sl-ease);
}
.sl-lightbox.is-open { opacity: 1; }
.sl-lightbox[hidden] { display: none; }
.sl-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.sl-lightbox__figure img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	margin-inline: auto;
	object-fit: contain;
}
.sl-lightbox__figure figcaption {
	margin-top: 16px;
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--sl-gold-lt);
}
.sl-lightbox__close,
.sl-vmodal__close {
	position: absolute;
	right: 24px;
	top: 20px;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	transition: background .3s var(--sl-ease);
}
.sl-lightbox__close:hover,
.sl-vmodal__close:hover { background: var(--sl-gold); border-color: var(--sl-gold); }

.sl-lightbox__nav {
	position: absolute;
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	background: none;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	font-size: 24px;
	color: #fff;
	cursor: pointer;
	transition: background .3s var(--sl-ease);
}
.sl-lightbox__nav:hover { background: var(--sl-gold); border-color: var(--sl-gold); }
.sl-lightbox__nav--prev { left: 18px; }
.sl-lightbox__nav--next { right: 18px; }

/* Film modal */
.sl-vmodal {
	position: fixed;
	inset: 0;
	z-index: 210;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
	background: rgba(10, 8, 7, .96);
	opacity: 0;
	transition: opacity .3s var(--sl-ease);
}
.sl-vmodal.is-open { opacity: 1; }
.sl-vmodal[hidden] { display: none; }
.sl-vmodal__stage {
	width: min(1080px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
}
.sl-vmodal__stage iframe,
.sl-vmodal__stage video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: contain;
}

body.sl-noscroll { overflow: hidden; }

/* =======================================================================
 * RESPONSIVE
 * ==================================================================== */
@media (max-width: 1180px) {
	.sl-slide { flex-basis: calc((100% - 40px) / 3); }
	.sl-venues__slider .sl-embla__slide { flex-basis: calc((100% - 2 * clamp(14px, 2vw, 26px)) / 3); }
	.sl-slider__nav--prev { left: 4px; }
	.sl-slider__nav--next { right: 4px; }
}

@media (max-width: 1024px) {
	.sl-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(320px, 84vw);
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 20px;
		padding: 96px 34px;
		background: #fff;
		border-left: 1px solid var(--sl-line);
		box-shadow: -14px 0 40px rgba(20, 17, 15, .12);
		transform: translateX(100%);
		transition: transform .4s var(--sl-ease);
		z-index: 95;
	}
	.sl-nav.is-open { transform: none; }
	.sl-nav__link { font-size: 21px; }
	.sl-burger { display: flex; z-index: 96; }

	.sl-hero { min-height: 0; }
	.sl-about__inner,
	.sl-areas__map { position: relative; top: auto; }
	.sl-areas__inner,
	.sl-contact__inner { grid-template-columns: 1fr; }
	.sl-about__media::after { display: none; }
	.sl-panel { grid-template-columns: 1fr; }
	.sl-panel__media img { aspect-ratio: 16 / 10; }
	.sl-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-real__grid,
	.sl-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-pkg__grid { grid-template-columns: 1fr; }
	.sl-insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sl-contact { background-attachment: scroll; }
	.sl-grid { grid-auto-rows: 180px; }
}

@media (max-width: 860px) {
	.sl-slide { flex-basis: calc((100% - 20px) / 2); }
	.sl-venues__slider .sl-embla__slide { flex-basis: calc((100% - clamp(14px, 2vw, 26px)) / 2); }
	.sl-films__grid { grid-template-columns: 1fr; }

	/* Process timeline collapses to a single left rail */
	.sl-steps::before { left: 30px; }
	.sl-step {
		grid-template-columns: 62px minmax(0, 1fr);
		grid-template-areas: "marker media" "marker copy";
		gap: 0 20px;
		align-items: start;
	}
	.sl-step__marker,
	.sl-step:nth-child(even) .sl-step__marker { grid-area: marker; order: 0; justify-content: flex-start; }
	.sl-step__media,
	.sl-step:nth-child(even) .sl-step__media { grid-area: media; order: 0; margin-bottom: 18px; }
	.sl-step__copy,
	.sl-step:nth-child(even) .sl-step__copy,
	.sl-step:nth-child(odd) .sl-step__copy { grid-area: copy; order: 0; text-align: left; }
}

@media (max-width: 700px) {
	.sl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 44vw;
	}
	.sl-grid__item--wide,
	.sl-grid__item--tall { grid-column: auto; grid-row: auto; }
	.sl-grid__cap { opacity: 1; transform: none; }

	.sl-real__grid,
	.sl-blog__grid { grid-template-columns: 1fr; }
	.sl-trust { grid-template-columns: 1fr; }
	.sl-areas__list { grid-template-columns: 1fr; }
	.sl-why__grid { grid-template-columns: 1fr; }
	.sl-form__row { grid-template-columns: 1fr; gap: 0; }
	.sl-ratings { gap: 16px 0; }
	.sl-rating { flex-basis: 100%; padding: 0; }
	.sl-rating + .sl-rating { padding: 16px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
	.sl-sticky { display: flex; }
	.sl-footer { padding-bottom: 96px; }
	.sl-footer__reach { text-align: left; }
	.sl-footer__top,
	.sl-footer__mid,
	.sl-footer__row,
	.sl-footer__base { justify-content: flex-start; }
	.sl-top { bottom: 76px; right: 14px; }
	.sl-lightbox { padding: 70px 16px; }
	.sl-lightbox__nav--prev { left: 6px; }
	.sl-lightbox__nav--next { right: 6px; }
	.sl-slide { flex-basis: 100%; }
	.sl-venues__slider .sl-embla__slide { flex-basis: 82%; }
	.sl-insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-faq__a p { padding-right: 10px; }
}
.sl-contact__inner{
	display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
    text-align: left;
    max-width: 1550px;
    width: 100%;
}
.sl-step__title,h3.sl-film__title ,.sl-rw__title, .sl-pkg__name,h3.sl-post__title{   
    font-size: 28px !important;
}
.sl-pkg__price{
	font-size: 16px;
    letter-spacing: 1.2px;
}
.sl-faq__q span{
	font-size:20px;
}
h3.sl-why__title {
    font-size: 22px !important;
}
h3.sl-venue__name{
	   font-size: 24px !important;
}