/* =========================================================================
   HOME PAGE — overrides and new sections.
   Loaded after custom.css on index.html only, so other pages are untouched.

   01. Palette
   02. Base + soft section light
   03. Header wordmark
   04. Hero
   05. Recognition sequence
   06. Invitations carousel
   07. River band
   08. Writing + About
   09. FAQ (light) + glossary
   10. Footer
   11. Scroll blur band
   12. Reduced motion
   ========================================================================= */


/* ---------- 01. Palette --------------------------------------------------
   Pulled from the hero video: steel blue and mist lead, warm cream and
   amber carry the light. Olive is kept only for imagery. */
:root{
	--page          : #F6F1E7;  /* warm cream, the page itself          */
	--page-light    : #FBF8F2;
	--mist          : #E2E9ED;
	--mist-deep     : #CCD9E1;
	--steel         : #4E6E85;  /* buttons, accents                     */
	--steel-deep    : #2B4253;
	--ink           : #1C2B36;  /* headings: a blue-black, not pure black */
	--amber         : #C8924F;
	--amber-soft    : #EBD3B0;
	--olive         : #585E48;

	--feather       : 160px;    /* how far each section edge dissolves   */

	/* re-point the template's variables */
	--primary-color   : var(--ink);
	--secondary-color : var(--mist);
	--bg-color        : var(--page);
	--accent-color    : var(--steel);
	--text-color      : #56626B;
}


/* ---------- 02. Base + soft section light -------------------------------- */
body{
	background: var(--page);
}

::-webkit-scrollbar-thumb{ background: var(--steel); }

/* Every home section is see-through: the cream page shows through, and
   each section adds its own light with a ::before that fades to nothing
   before it reaches the section's edge. That's what removes the seams. */
.soft-section{
	position: relative;
	isolation: isolate;
}

.soft-section::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}


/* ---------- 03. Header wordmark ------------------------------------------
   Typeset stand-in until Jesse's handwritten signature arrives. To swap,
   replace the <span class="wordmark-text"> with
   <img class="wordmark-img" src="images/signature-white.png" alt="Jesse Wilson">. */
.wordmark{
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.wordmark-text{
	font-family: var(--header-font);
	font-style: italic;
	font-size: 27px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--white-color);
	white-space: nowrap;
}

.wordmark-img{
	display: block;
	height: 42px;
	width: auto;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--amber-soft);
}

.main-menu ul ul{
	background: var(--steel-deep);
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--amber-soft);
}

.slicknav_btn,
.slicknav_menu{
	background: var(--steel-deep);
}


/* ---------- 04. Hero ------------------------------------------------------ */
.hero-royal{
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 160px 0 calc(20vh + 40px);
}

.hero-royal.dark-section{
	background: #3A4A55;
}

/* Left-side shade keeps the headline readable. It's blue-black now, not black. */
.hero-royal::before{
	background:
		linear-gradient(90deg, rgba(22, 34, 44, 0.70) 0%, rgba(22, 34, 44, 0.30) 50%, rgba(22, 34, 44, 0) 80%),
		linear-gradient(180deg, rgba(22, 34, 44, 0.35) 0%, rgba(22, 34, 44, 0) 22%);
}

/* The dissolve: the bottom of the hero fades into the cream page,
   so it reads like fog lifting rather than a horizon line. */
.hero-royal::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(246, 241, 231, 0)    0%,
		rgba(246, 241, 231, 0.06) 22%,
		rgba(246, 241, 231, 0.20) 40%,
		rgba(246, 241, 231, 0.45) 58%,
		rgba(246, 241, 231, 0.74) 76%,
		rgba(246, 241, 231, 0.93) 90%,
		rgba(246, 241, 231, 1)    100%);
}

.hero-royal .container{
	z-index: 2;
}

.hero-content-royal .section-title h1{
	text-shadow: 0 2px 40px rgba(22, 34, 44, 0.35);
}

.hero-royal .hero-bg-video{
	overflow: hidden;
	background: #3A4A55 url('../images/poster-jesse.jpg') center / cover no-repeat;
}

/* Camera rule: every video gets a slow push and drift, even if the
   footage itself is still. */
.hero-royal .hero-bg-video video{
	transform-origin: 50% 50%;
	animation: camera-drift-hero 36s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes camera-drift-hero{
	0%   { transform: scale(1.05) translate3d(-1.0%,  0.5%, 0); }
	100% { transform: scale(1.11) translate3d( 1.0%, -0.6%, 0); }
}


/* ---------- 05. Recognition sequence -------------------------------------
   Lines live in js/home-content.js. The section is a tall scroll track
   with a sticky stage; js/home.js sets the track height and moves each
   line from blur to clarity and back as you scroll. */
.recognition{
	position: relative;
	margin-top: -1px;
}

.rec-stage{
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	isolation: isolate;
}

/* light sitting behind the words */
.rec-stage::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(closest-side at 50% 52%, rgba(235, 211, 176, 0.55), rgba(235, 211, 176, 0) 100%),
		radial-gradient(closest-side at 28% 70%, rgba(204, 217, 225, 0.55), rgba(204, 217, 225, 0) 100%);
}

.rec-line{
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(900px, calc(100% - 48px));
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -50%);
	will-change: opacity, filter, transform;
}

.rec-text{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--header-font);
	font-weight: 400;
	font-size: clamp(30px, 4.4vw, 58px);
	line-height: 1.22;
	color: var(--ink);
	text-align: center;
	cursor: default;
}

.rec-line.has-more .rec-text{
	cursor: pointer;
}

.rec-line.has-more .rec-text:focus-visible{
	outline: 1px dashed var(--steel);
	outline-offset: 10px;
	border-radius: 4px;
}

/* the fuller piece, folded shut until hover / tap */
.rec-more{
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	filter: blur(8px);
	transition: grid-template-rows 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s ease, filter 1.1s ease;
}

.rec-line.is-open .rec-more{
	grid-template-rows: 1fr;
	opacity: 1;
	filter: blur(0);
}

.rec-more-inner{
	position: relative;
	overflow: hidden;
	min-height: 0;
}

.rec-more-body{
	position: relative;
	max-width: 620px;
	margin: 0 auto;
	padding: 34px 10px 6px;
}

.rec-more-text{
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 18px;
	line-height: 1.75;
	color: var(--text-color);
	white-space: pre-line;
	max-height: 38vh;
	overflow: auto;
}

/* the handwritten version, faded and blurred behind the text */
.rec-hand{
	position: absolute;
	inset: 0 -4%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.16;
	filter: blur(1.4px);
	transform: rotate(-2.5deg) scale(1.06);
	font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Apple Chancery", cursive;
	font-size: 24px;
	line-height: 1.6;
	color: var(--steel-deep);
	white-space: pre-line;
	overflow: hidden;
}

.rec-hand img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rec-more-link{
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	color: var(--steel);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Reduced motion (or no sticky support): a plain, quiet list. */
.recognition.rec-static{
	height: auto !important;
	padding: 100px 0;
}

.recognition.rec-static .rec-stage{
	position: relative;
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 70px;
	padding: 60px 0;
}

.recognition.rec-static .rec-line{
	position: relative;
	left: auto;
	top: auto;
	margin: 0 auto;
	opacity: 1;
	visibility: visible;
	transform: none;
}


/* ---------- 06. Invitations carousel ------------------------------------- */
.invites{
	padding: 110px 0 120px;
}

/* mist-blue band with light behind it, feathered top and bottom so it
   dissolves into the cream on both sides */
.invites::before{
	inset: calc(var(--feather) * -1) 0;
	background:
		radial-gradient(closest-side at 70% 38%, rgba(235, 211, 176, 0.45), rgba(235, 211, 176, 0)),
		radial-gradient(closest-side at 20% 60%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
		linear-gradient(160deg, var(--mist) 0%, var(--mist-deep) 55%, var(--mist) 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
	        mask-image: linear-gradient(180deg, transparent 0, #000 var(--feather), #000 calc(100% - var(--feather)), transparent 100%);
}

.invites .section-row{
	margin-bottom: 60px;
}

.invite-slider .swiper{
	overflow: visible;
	padding-bottom: 70px;
}

.invite-slider{
	overflow: hidden;
	padding: 20px 0;
	margin: -20px 0;
}

.invite-slider .swiper-slide{
	height: auto;
}

.invite-card{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	min-height: 470px;
	padding: 40px;
	border-radius: 22px;
	overflow: hidden;
	color: var(--ink);
	background: linear-gradient(165deg, #FFFDF8 0%, #F4EFE5 100%);
	box-shadow: 0 30px 60px -40px rgba(28, 43, 54, 0.35);
	transform: scale(0.94);
	transition: transform 1s cubic-bezier(.2,.7,.2,1), box-shadow 1s ease;
}

.invite-card:hover{
	color: var(--ink);
}

.invite-num,
.invite-title,
.invite-text{
	position: relative;
	z-index: 2;
	transition: color .8s ease, filter .8s ease, opacity .8s ease;
}

.invite-num{
	font-family: var(--header-font);
	font-size: 20px;
}

.invite-body{
	border-top: 1px solid var(--divider-color);
	padding-top: 20px;
	transition: border-color .8s ease;
	position: relative;
	z-index: 2;
}

.invite-title{
	display: block;
	font-size: 24px;
	margin: 0;
	color: inherit;
}

.invite-text{
	display: block;
	margin: 12px 0 0;
	line-height: 1.6;
	color: var(--text-color);
	max-width: 32ch;
}

.invite-media{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 230px;
	height: 230px;
	border-radius: 50%;
	overflow: hidden;
	transform: translate(40px, 40px);
	transition: width 1s cubic-bezier(.2,.7,.2,1), height 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), border-radius 1s ease;
	z-index: 1;
}

.invite-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter .9s ease, transform 1.2s ease;
}

.invite-media::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 43, 54, 0.72) 0%, rgba(28, 43, 54, 0.30) 50%, rgba(28, 43, 54, 0.62) 100%);
	opacity: 0;
	transition: opacity .9s ease;
}

/* Unfocused (side) cards: titles stay sharp, everything else goes soft. */
.invite-slider .swiper-slide:not(.swiper-slide-active) .invite-media img{
	filter: blur(9px) saturate(0.8);
	transform: scale(1.12);
}

.invite-slider .swiper-slide:not(.swiper-slide-active) .invite-text{
	filter: blur(3.5px);
	opacity: 0.55;
}

.invite-slider .swiper-slide:not(.swiper-slide-active) .invite-num{
	filter: blur(2px);
	opacity: 0.6;
}

/* Centered card: the image opens to fill it, detail comes into focus. */
.invite-slider .swiper-slide-active .invite-card{
	transform: scale(1);
	box-shadow: 0 40px 80px -40px rgba(28, 43, 54, 0.55);
}

.invite-slider .swiper-slide-active .invite-media{
	width: 100%;
	height: 100%;
	border-radius: 0;
	transform: translate(0, 0);
}

.invite-slider .swiper-slide-active .invite-media::after{
	opacity: 1;
}

.invite-slider .swiper-slide-active .invite-num,
.invite-slider .swiper-slide-active .invite-title,
.invite-slider .swiper-slide-active .invite-text{
	color: var(--white-color);
}

.invite-slider .swiper-slide-active .invite-body{
	border-color: var(--dark-divider-color);
}

/* Hovering a side card brings its detail into focus too (desktop only). */
@media (hover: hover) and (pointer: fine){
	.invite-slider .swiper-slide:not(.swiper-slide-active) .invite-card:hover .invite-media img{
		filter: none;
		transform: scale(1.02);
	}
	.invite-slider .swiper-slide:not(.swiper-slide-active) .invite-card:hover .invite-text,
	.invite-slider .swiper-slide:not(.swiper-slide-active) .invite-card:hover .invite-num{
		filter: none;
		opacity: 1;
	}
	.invite-slider .swiper-slide:not(.swiper-slide-active) .invite-card:hover{
		transform: scale(0.96);
	}
}

.invite-pagination.swiper-pagination-bullets{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
}

.invite-pagination .swiper-pagination-bullet{
	width: 9px;
	height: 9px;
	margin: 0 5px !important;
	background: var(--steel);
	opacity: 0.25;
	transition: all .4s ease;
}

.invite-pagination .swiper-pagination-bullet-active{
	width: 26px;
	border-radius: 10px;
	opacity: 1;
}


/* ---------- 07. River band -----------------------------------------------
   A transition between sections, not a block: masked so both edges
   dissolve, and it slightly overlaps its neighbours. */
.river-band{
	position: relative;
	height: clamp(380px, 80vh, 860px);
	margin: -60px 0;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 28%, #000 72%, rgba(0,0,0,.35) 88%, transparent 100%);
	        mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 28%, #000 72%, rgba(0,0,0,.35) 88%, transparent 100%);
	background-color: var(--mist-deep);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.river-band video{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
	animation: camera-drift-river 28s ease-in-out infinite alternate;
	will-change: transform;
}

/* a breath of mist over the footage so it sits in the palette */
.river-band::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(226, 233, 237, 0.25), rgba(246, 241, 231, 0.10) 50%, rgba(226, 233, 237, 0.25));
}

@keyframes camera-drift-river{
	0%   { transform: scale(1.08) translate3d( 1.2%,  1.0%, 0); }
	100% { transform: scale(1.16) translate3d(-1.2%, -1.2%, 0); }
}


/* ---------- 08. Writing + About ------------------------------------------ */
.our-blog::before{
	background:
		radial-gradient(closest-side at 18% 40%, rgba(235, 211, 176, 0.45), rgba(235, 211, 176, 0)),
		radial-gradient(closest-side at 85% 70%, rgba(226, 233, 237, 0.9), rgba(226, 233, 237, 0));
}

.post-item{
	background: linear-gradient(170deg, var(--page-light) 0%, var(--mist) 100%);
}

.post-item-btn{
	border-color: rgba(78, 110, 133, 0.18);
}

.about-us-royal.soft-section::before{
	background:
		radial-gradient(closest-side at 75% 50%, rgba(235, 211, 176, 0.5), rgba(235, 211, 176, 0)),
		radial-gradient(closest-side at 25% 60%, rgba(204, 217, 225, 0.6), rgba(204, 217, 225, 0));
}

.btn-default{
	background: var(--steel);
}


/* ---------- 09. FAQ (light) + glossary -----------------------------------
   Smaller, airier, a little playful. Hide the whole section by setting
   data-show-faq="false" on <body> in index.html. */
body[data-show-faq="false"] #faq{
	display: none;
}

.faq-lite{
	padding: 60px 0 150px;
}

.faq-lite::before{
	background:
		radial-gradient(closest-side at 50% 45%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)),
		radial-gradient(closest-side at 80% 30%, rgba(226, 233, 237, 0.7), rgba(226, 233, 237, 0));
}

.faq-lite-inner{
	max-width: 720px;
	margin: 0 auto;
}

.faq-lite-head{
	text-align: center;
	margin-bottom: 40px;
}

.faq-lite-head h2{
	font-size: clamp(28px, 3vw, 38px);
	font-style: italic;
	font-weight: 400;
}

.faq-lite-head p{
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--steel);
}

.faq-lite details{
	border-top: 1px dashed rgba(78, 110, 133, 0.3);
}

.faq-lite details:last-of-type{
	border-bottom: 1px dashed rgba(78, 110, 133, 0.3);
}

.faq-lite summary{
	position: relative;
	display: block;
	list-style: none;
	padding: 22px 44px 22px 0;
	font-family: var(--header-font);
	font-size: 20px;
	line-height: 1.35;
	color: var(--ink);
	cursor: pointer;
	transition: color .3s ease, padding-left .4s ease;
}

.faq-lite summary::-webkit-details-marker{
	display: none;
}

.faq-lite summary::after{
	content: '+';
	position: absolute;
	right: 6px;
	top: 50%;
	font-family: var(--default-font);
	font-size: 24px;
	font-weight: 300;
	color: var(--steel);
	transform: translateY(-50%);
	transition: transform .5s cubic-bezier(.3,1.6,.5,1);
}

.faq-lite details[open] summary::after{
	transform: translateY(-50%) rotate(135deg);
}

.faq-lite summary:hover{
	color: var(--steel);
	padding-left: 6px;
}

.faq-lite-answer{
	padding: 0 0 24px;
	font-family: var(--header-font);
	font-style: italic;
	font-size: 18px;
	line-height: 1.6;
	color: var(--steel);
}

.faq-lite details[open] .faq-lite-answer{
	animation: faq-in .7s ease both;
}

@keyframes faq-in{
	from { opacity: 0; filter: blur(4px); transform: translateY(-4px); }
	to   { opacity: 1; filter: blur(0);   transform: none; }
}

.faq-lite-answer p{
	margin: 0;
}

.glossary{
	margin-top: 70px;
}

.glossary-title{
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--steel);
	font-family: var(--default-font) !important;
	font-weight: 600;
	margin-bottom: 20px;
	text-align: center;
}

.glossary dl{
	margin: 0;
}

.glossary-entry{
	padding: 26px 30px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(78, 110, 133, 0.12);
}

.glossary-entry + .glossary-entry{
	margin-top: 16px;
}

.glossary dt{
	font-family: var(--header-font);
	font-size: 26px;
	font-weight: 400;
	color: var(--ink);
}

.glossary dt small{
	font-family: var(--default-font);
	font-size: 14px;
	font-style: italic;
	color: var(--text-color);
	margin-left: 10px;
}

.glossary dd{
	margin: 10px 0 0;
	line-height: 1.65;
}


/* ---------- 10. Footer ---------------------------------------------------
   Steel-blue gradient. The top starts as the cream page and deepens, so
   there's no edge where the page meets the footer. */
.main-footer-royal.dark-section{
	position: relative;
	padding-top: 320px;
	background:
		radial-gradient(closest-side at 80% 85%, rgba(200, 146, 79, 0.14), rgba(200, 146, 79, 0)),
		linear-gradient(180deg,
			var(--page)        0px,
			#E9EDEB            80px,
			#C9D6DE            150px,
			#9DB2C0            215px,
			#6F8DA2            280px,
			#4E6E85            350px,
			var(--steel-deep)  520px,
			#1E303D            100%);
}

.footer-menu-royal ul li a:hover,
.footer-copyright-text-royal a:hover,
.footer-privacy-policy-royal ul li a:hover{
	color: var(--amber-soft);
}

.footer-line{
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.15;
}


/* ---------- 11. Scroll blur band -----------------------------------------
   A soft blur along the bottom tenth of the screen. Content entering from
   below is slightly out of focus and sharpens as it rises. Three stacked
   layers with stepped blur and overlapping masks make the ramp smooth. */
.scroll-blur{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10vh;
	height: 10svh;
	z-index: 90;
	pointer-events: none;
	transition: opacity .6s ease;
}

.scroll-blur.is-hidden{
	opacity: 0;
}

.scroll-blur > i{
	position: absolute;
	inset: 0;
}

.scroll-blur > i:nth-child(1){
	-webkit-backdrop-filter: blur(0.6px);
	        backdrop-filter: blur(0.6px);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}

.scroll-blur > i:nth-child(2){
	-webkit-backdrop-filter: blur(1.5px);
	        backdrop-filter: blur(1.5px);
	-webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 75%);
	        mask-image: linear-gradient(180deg, transparent 30%, #000 75%);
}

.scroll-blur > i:nth-child(3){
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
	-webkit-mask-image: linear-gradient(180deg, transparent 60%, #000 100%);
	        mask-image: linear-gradient(180deg, transparent 60%, #000 100%);
}


/* ---------- Responsive --------------------------------------------------- */
@media only screen and (max-width: 991px){
	.wordmark-text{
		font-size: 24px;
	}

	.invites{
		padding: 80px 0 90px;
	}

	.invite-card{
		min-height: 420px;
		padding: 32px;
	}

	.invite-media{
		width: 190px;
		height: 190px;
	}

	.main-footer-royal.dark-section{
		padding-top: 220px;
	}
}

@media only screen and (max-width: 767px){
	:root{
		--feather: 100px;
	}

	.wordmark-text{
		font-size: 22px;
	}

	.hero-royal{
		padding: 140px 0 calc(16vh + 30px);
	}

	.hero-royal::after{
		height: 34%;
	}

	.rec-text{
		font-size: clamp(26px, 7.4vw, 36px);
	}

	.rec-more-body{
		padding-top: 24px;
	}

	.rec-more-text{
		font-size: 16px;
		max-height: 42vh;
	}

	.rec-hand{
		font-size: 19px;
	}

	.invites .section-row{
		margin-bottom: 36px;
	}

	.invite-card{
		min-height: 400px;
		padding: 28px;
	}

	.invite-title{
		font-size: 22px;
	}

	.invite-media{
		width: 160px;
		height: 160px;
		transform: translate(30px, 30px);
	}

	.river-band{
		height: clamp(300px, 60vh, 520px);
		margin: -40px 0;
	}

	.faq-lite{
		padding: 40px 0 100px;
	}

	.faq-lite summary{
		font-size: 18px;
	}

	.faq-lite-answer{
		font-size: 17px;
	}

	.glossary-entry{
		padding: 22px;
	}

	.main-footer-royal.dark-section{
		padding-top: 200px;
	}
}


/* ---------- 12. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	.hero-royal .hero-bg-video video,
	.river-band video{
		animation: none;
		transform: scale(1.05);
	}

	.rec-more,
	.invite-card,
	.invite-media,
	.invite-media img{
		transition: none;
	}
}