/* ============================================================
   Franktown — "Growing Together" marriage seminar landing page
   ------------------------------------------------------------
   A campaign identity, NOT the house design system. The church
   DS is navy + gold + Nunito/Playfair; this weekend deliberately
   runs coral→magenta with Yellowtail + Space Grotesk (client
   approved — do not "correct" it back).

   Everything is scoped under .ftk-gt so the campaign palette and
   type never leak into the rest of the site. Tokens live on the
   wrapper, not :root, for the same reason.
   ============================================================ */

.ftk-gt {
	/* Campaign palette */
	--gt-coral:        #FF8A5B;
	--gt-coral-solid:  #FF7A53;
	--gt-coral-red:    #FF6A6E;
	--gt-magenta:      #F5478F;
	--gt-pink:         #E0457F;
	--gt-maroon:       #7A1F4F;
	--gt-maroon-hover: #5E1640;
	--gt-gold:         #FFE14D;
	--gt-gold-hover:   #FFD21F;
	--gt-gold-deep:    #FFC94D;
	--gt-cream:        #FFF6EC;
	--gt-cream-ondark: #FFF3E6;
	--gt-offwhite:     #FFF7EF;
	--gt-border:       #F0DDC8;
	--gt-body:         #4A313A;
	--gt-ink:          #3A2128;
	--gt-muted:        #8A6B59;
	--gt-muted-card:   #7A6253;
	--gt-citation:     #C77B3A;
	--gt-footer-bg:    #2A1219;
	--gt-video-bg:     #2A1118;

	--gt-grad-invite:   linear-gradient(160deg, #FF8A5B 0%, #FF6A6E 52%, #F5478F 100%);
	--gt-grad-register: linear-gradient(155deg, #FF8A5B 0%, #FF6A6E 50%, #F5478F 100%);

	--gt-script: 'Yellowtail', 'Brittany Signature', cursive;
	--gt-sans:   'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* FTK_Render::logo() styles its wordmark with var(--font-sans). The house
	   stylesheet isn't loaded here, so define it — the logo stays on-brand
	   (Nunito Sans) while everything else runs the campaign face. */
	--font-sans: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

	--gt-gutter: 44px;

	font-family: var(--gt-sans);
	color: var(--gt-ink);
	background: var(--gt-cream);
	-webkit-font-smoothing: antialiased;
}

/* Full-screen route mode: the seminar page is served as its own bare
   document, so it owns the body. (Shortcode mode inherits the theme's.) */
body.ftk-seminar-body {
	margin: 0;
	background: #FFF6EC;
}

/* Smooth in-page anchors, only on documents that actually host the page. */
:root:has(.ftk-gt) { scroll-behavior: smooth; }

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

.ftk-gt section { scroll-margin-top: 80px; }
.ftk-gt a { text-decoration: none; }
.ftk-gt img { max-width: 100%; }

/* Wrapped in :where() so the reset never out-specifies the component rules
   below — a plain `.ftk-gt p { margin: 0 }` beats every single-class
   selector in this file and silently flattens the whole page's rhythm. */
.ftk-gt :where(p, h1, h2, h3, h4, figure, blockquote, ul, ol) {
	margin: 0;
	padding: 0;
}
.ftk-gt :where(h1, h2, h3) { font-weight: 700; }

/* Focus is visible everywhere — the design only ever specified hover. */
.ftk-gt a:focus-visible,
.ftk-gt button:focus-visible {
	outline: 3px solid var(--gt-gold);
	outline-offset: 3px;
	border-radius: 4px;
}
.gt-about a:focus-visible,
.gt-schedule a:focus-visible,
.gt-hosts a:focus-visible,
.gt-about button:focus-visible,
.gt-schedule button:focus-visible,
.gt-hosts button:focus-visible { outline-color: var(--gt-pink); }

/* ---------- Shared bits ---------- */

.gt-wrap {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--gt-gutter);
}
.gt-wrap--hero     { max-width: 1160px; padding: 30px var(--gt-gutter) 70px; }
.gt-wrap--invite   { max-width: 1000px; text-align: center; }
.gt-wrap--about    { max-width: 760px;  text-align: center; }
.gt-wrap--schedule { max-width: 1120px; }
.gt-wrap--hosts    { max-width: 980px; }
.gt-wrap--register { max-width: 760px; }
.gt-wrap--foot     { max-width: 1120px; }

.gt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
	border: 2px solid transparent;
	font-family: var(--gt-sans);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.gt-btn--gold {
	background: var(--gt-gold);
	color: var(--gt-maroon);
	padding: 18px 32px;
	font-size: 16px;
}
.gt-btn--gold:hover { background: var(--gt-gold-hover); }
.gt-btn--ghost {
	background: transparent;
	color: var(--gt-cream-ondark);
	border-color: rgba(255, 243, 230, .7);
	padding: 16px 30px;
	font-size: 16px;
}
.gt-btn--ghost:hover { background: rgba(255, 243, 230, .16); }
.gt-btn--maroon {
	background: var(--gt-maroon);
	color: var(--gt-cream-ondark);
	padding: 18px 32px;
	font-size: 16px;
}
.gt-btn--maroon:hover { background: var(--gt-maroon-hover); }
.gt-btn--lg { padding: 19px 38px; font-size: 17px; }
.gt-btn--ghost.gt-btn--lg { padding: 17px 34px; }

.gt-btn__glyph {
	width: 14px;
	height: 14px;
	flex: none;
	fill: currentColor;
}

.gt-kicker {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gt-pink);
}
.gt-script {
	font-family: var(--gt-script);
	line-height: 1;
	font-weight: 400;
}

/* The logo ships as SVG mark + wordmark; the campaign wants it fully
   reversed on the coral hero and the near-black footer. */
.gt-logo {
	display: inline-block;
	filter: brightness(0) invert(1);
}

/* ---------- 1. Hero ---------- */

.gt-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 94vh;
	background: var(--gt-coral-solid);
}
@supports (height: 100svh) {
	.gt-hero { min-height: 94svh; }
}

.gt-hero__slides { position: absolute; inset: 0; }
.gt-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s ease-in-out;
}
/* The template marks slide 1 active, so with no JS the hero is simply that
   one photo — nothing here depends on the script having run. */
.gt-hero__slide.is-active { opacity: 1; }

/* Blurred bleed. Oversized so the blur has pixels to sample past the edges
   instead of fading to nothing in the corners. */
.gt-hero__wash {
	position: absolute;
	inset: -8%;
	width: 116%;
	height: 116%;
	object-fit: cover;
	object-position: center;
	filter: blur(38px) saturate(1.12) brightness(.78);
}
/* The photograph itself, held clear of the type. Every couple in this set is
   framed centre or left in their own picture, so anchoring right is what
   actually keeps faces out from under the headline — a scrim only made the
   text readable on top of them. */
.gt-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	width: 62%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%; /* per-slide value comes from the template */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .6) 12%, #000 30%);
	        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .6) 12%, #000 30%);
}

.gt-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(60, 24, 12, .72) 0%, rgba(90, 36, 40, .34) 42%, rgba(255, 122, 83, .12) 70%, rgba(245, 71, 143, .30) 100%);
}
/* The hero type is left-aligned, and the photo behind it now changes — so
   legibility can't depend on any one crop. This darkens the left column
   only, fading out well before the right edge so the photograph still reads. */
.gt-hero__textscrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(38, 16, 22, .62) 0%,
		rgba(38, 16, 22, .50) 26%,
		rgba(38, 16, 22, .26) 48%,
		rgba(38, 16, 22, .06) 64%,
		transparent 76%);
}
.gt-orbs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.gt-orb { position: absolute; border-radius: 50%; }
.gt-orb--a {
	width: 160px;
	height: 160px;
	top: 120px;
	right: 180px;
	background: radial-gradient(circle at 40% 40%, rgba(255, 238, 196, .30), transparent 70%);
	filter: blur(4px);
}
.gt-orb--b {
	width: 70px;
	height: 70px;
	bottom: 180px;
	left: 120px;
	background: radial-gradient(circle at 40% 40%, rgba(255, 244, 210, .5), transparent 66%);
	filter: blur(2px);
}

.gt-header {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px var(--gt-gutter);
}
.gt-nav {
	display: flex;
	align-items: center;
	gap: 34px;
}
.gt-nav__links {
	display: flex;
	align-items: center;
	gap: 34px;
}
.gt-nav__link {
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .04em;
	color: rgba(255, 243, 230, .92);
	transition: color .2s ease;
}
.gt-nav__link:hover { color: #fff; }
.gt-nav__cta {
	padding: 13px 22px;
	font-size: 14px;
	letter-spacing: .04em;
}

/* Mobile menu button — hidden until the links collapse. */
.gt-navtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 2px solid rgba(255, 243, 230, .7);
	border-radius: 999px;
	background: transparent;
	color: var(--gt-cream-ondark);
	cursor: pointer;
	transition: background-color .2s ease;
}
.gt-navtoggle:hover { background: rgba(255, 243, 230, .16); }
.gt-navtoggle svg { width: 20px; height: 20px; }
.gt-navtoggle .gt-navtoggle__close,
.gt-navtoggle[aria-expanded="true"] .gt-navtoggle__open { display: none; }
.gt-navtoggle[aria-expanded="true"] .gt-navtoggle__close { display: block; }

.gt-hero__body {
	position: relative;
	z-index: 4;
	flex: 1;
	display: flex;
	align-items: center;
}
.gt-eyebrow {
	display: inline-flex;
	background: rgba(255, 255, 255, .82);
	color: var(--gt-pink);
	padding: 11px 22px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.gt-hero__title {
	margin-top: 22px;
	font-weight: 400;
}
.gt-hero__t1,
.gt-hero__t2 { display: block; font-family: var(--gt-script); }
.gt-hero__t1 {
	font-size: 150px;
	line-height: .84;
	color: var(--gt-offwhite);
}
.gt-hero__t2 {
	font-size: 124px;
	line-height: .86;
	color: var(--gt-gold);
	margin-top: 4px;
	margin-left: 40px; /* deliberate stagger on line 2 */
}
.gt-hero__sub {
	margin-top: 26px;
	max-width: 560px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gt-cream-ondark);
}
.gt-hero__sub strong { font-weight: 700; }
.gt-hero__meta {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.gt-datechip {
	background: var(--gt-maroon);
	color: var(--gt-cream-ondark);
	padding: 14px 26px;
	border-radius: 14px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}
.gt-hero__loc {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--gt-cream-ondark);
}
.gt-ctarow {
	margin-top: 34px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---------- 2. Video invite ---------- */

.gt-invite {
	background: var(--gt-grad-invite);
	padding: 96px 0;
}
.gt-invite__script {
	font-size: 58px;
	color: var(--gt-gold);
}
.gt-invite__deck {
	margin: 10px auto 0;
	max-width: 560px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
	color: var(--gt-cream-ondark);
}
.gt-video {
	position: relative;
	margin-top: 42px;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(90, 20, 50, .4);
	aspect-ratio: 16 / 9;
	background: var(--gt-video-bg);
}
.gt-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 56% 30%;
	filter: saturate(.95) brightness(.7);
}
.gt-video__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40, 17, 24, .25), rgba(40, 17, 24, .55));
}
.gt-video__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	width: 100%;
}
button.gt-video__center { cursor: pointer; }
/* The poster and scrim are absolutely positioned, so they'd paint over any
   static sibling. Position the play button and caption too, so tree order
   puts them on top. */
.gt-play {
	position: relative;
	width: 96px;
	height: 96px;
	flex: none;
	border-radius: 50%;
	background: var(--gt-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: transform .2s ease;
}
/* Sized so the triangle itself lands at the reference's 30x36px — the glyph
   sits well inside its own viewBox, which also optically centres it. */
.gt-play svg {
	width: 59px;
	height: 59px;
	fill: var(--gt-maroon);
}
button.gt-video__center:hover .gt-play,
button.gt-video__center:focus-visible .gt-play { transform: scale(1.06); }
.gt-video__cap {
	position: relative;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gt-cream-ondark);
}
/* Swapped in on click — the third-party player never loads on first paint. */
.gt-video iframe,
.gt-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: var(--gt-video-bg);
}

/* ---------- 3. About ---------- */

.gt-about {
	background: var(--gt-cream);
	padding: 104px 0;
}
.gt-about__script {
	font-size: 46px;
	color: var(--gt-pink);
}
.gt-about__title {
	margin-top: 8px;
	font-size: 40px;
	line-height: 1.15;
	color: var(--gt-maroon);
}
.gt-about__intro {
	margin-top: 26px;
	font-size: 19px;
	line-height: 1.7;
	color: var(--gt-body);
}
.gt-about__body {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--gt-body);
}
.gt-about__body + .gt-about__body { margin-top: 16px; }
.gt-scripture {
	margin: 46px auto 0;
	max-width: 560px;
	border-top: 2px solid var(--gt-border);
	border-bottom: 2px solid var(--gt-border);
	padding: 28px 0;
}
.gt-scripture__quote {
	font-size: 23px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.5;
	color: var(--gt-maroon);
}
.gt-scripture__ref {
	display: block;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gt-citation);
}

/* ---------- 4. Schedule ---------- */

.gt-schedule {
	background: #fff;
	padding: 96px 0;
}
.gt-schedule__head { text-align: center; }
.gt-schedule__title {
	margin-top: 12px;
	font-size: 40px;
	line-height: 1.15;
	color: var(--gt-maroon);
}
.gt-cards {
	margin-top: 44px;
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}
.gt-card {
	flex: 1;
	min-width: 260px; /* what makes the row stack on narrow screens */
	background: var(--gt-cream);
	border: 1px solid var(--gt-border);
	border-radius: 20px;
	padding: 30px 28px;
}
.gt-card__time {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gt-pink);
}
.gt-card__title {
	margin-top: 12px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--gt-maroon);
}
.gt-card__desc {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--gt-muted-card);
}

/* ---------- 5. Hosts ---------- */

.gt-hosts {
	background: var(--gt-cream);
	padding: 104px 0;
}
.gt-wrap--hosts {
	display: flex;
	align-items: center;
	gap: 56px;
	flex-wrap: wrap;
	justify-content: center;
}
.gt-heart {
	position: relative;
	width: 280px;
	height: 260px;
	flex: none;
	/* a filter, not box-shadow — so the shadow follows the heart silhouette */
	filter: drop-shadow(0 14px 28px rgba(120, 30, 60, .26));
}
.heart-shape {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='29.6' viewBox='0 0 32 29.6'><path d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-8.8,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='29.6' viewBox='0 0 32 29.6'><path d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-8.8,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z'/></svg>");
	-webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
	-webkit-mask-position: center;   mask-position: center;
}
.gt-heart__ring {
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--gt-gold), var(--gt-gold-deep));
}
.gt-heart__inner {
	position: absolute;
	inset: 9px; /* the inset is what creates the gold ring */
	background: #fff;
	overflow: hidden;
}
.gt-heart__img {
	position: absolute;
	inset: 0;
	top: -6%;
	width: 100%;
	height: 120%; /* oversized + nudged so faces sit in the upper lobes */
	object-fit: cover;
	object-position: 50% 12%;
}
.gt-hosts__text {
	flex: 1;
	min-width: 300px;
}
.gt-hosts__title {
	margin-top: 12px;
	font-size: 38px;
	line-height: 1.15;
	color: var(--gt-maroon);
}
.gt-hosts__intro {
	margin-top: 18px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--gt-body);
}
.gt-hosts__bio {
	margin-top: 14px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--gt-body);
}
.gt-hosts__bio + .gt-hosts__bio { margin-top: 14px; }

/* ---------- 6. Register ---------- */

.gt-register {
	background: var(--gt-grad-register);
	color: var(--gt-cream-ondark);
	padding: 104px 0;
	text-align: center;
}
.gt-register__script {
	font-size: 52px;
	color: var(--gt-gold);
}
.gt-register__title {
	margin-top: 8px;
	font-size: 44px;
	line-height: 1.12;
	color: #fff;
}
.gt-register__details {
	margin: 20px auto 0;
	max-width: 520px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--gt-cream-ondark);
}
.gt-register__details a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s ease;
}
.gt-register__details a:hover { color: #fff; }
.gt-register__ctas {
	margin-top: 34px;
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.gt-register__fine {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 243, 230, .85);
}

/* ---------- 7. Share ----------
   The register block above runs the full coral to magenta gradient, so this
   one sits on cream. Two loud gradient sections back to back would read as
   one long slab and the register CTA would stop being the loudest thing on
   the page. Cream also lets the three graphics carry the colour, which is
   the whole point of the section.
   ------------------------------- */
.gt-share {
	background: var(--gt-cream);
	padding: 96px 0;
	text-align: center;
}
.gt-wrap--share { max-width: 1060px; }
.gt-share__script { font-size: 46px; color: var(--gt-citation); }
.gt-share__title {
	margin-top: 6px;
	font-size: 40px;
	line-height: 1.14;
	color: var(--gt-ink);
	letter-spacing: -0.01em;
}
.gt-share__deck {
	margin: 14px auto 0;
	max-width: 52ch;
	font-size: 18px;
	line-height: 1.55;
	color: var(--gt-body);
}

.gt-sharerow {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.gt-sharebtn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	border: 1.5px solid var(--gt-border);
	border-radius: 999px;
	background: #fff;
	color: var(--gt-ink);
	font-family: var(--gt-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.gt-sharebtn svg { width: 18px; height: 18px; flex: none; }
.gt-sharebtn:hover { transform: translateY(-2px); border-color: var(--gt-magenta); color: var(--gt-pink); }
/* Brand colour on hover only. Five saturated logos sitting in a row would
   fight the artwork below, which is what the section is actually selling. */
.gt-sharebtn--fb:hover   { background: #1877F2; border-color: #1877F2; color: #fff; }
.gt-sharebtn--wa:hover   { background: #25D366; border-color: #25D366; color: #fff; }
.gt-sharebtn--x:hover    { background: #000;    border-color: #000;    color: #fff; }
.gt-sharebtn--mail:hover,
.gt-sharebtn--copy:hover { background: var(--gt-maroon); border-color: var(--gt-maroon); color: #fff; }
.gt-sharebtn.is-copied   { background: var(--gt-maroon); border-color: var(--gt-maroon); color: #fff; }

.gt-share__or {
	position: relative;
	margin: 46px 0 26px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gt-muted);
}
.gt-share__or::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--gt-border);
}
.gt-share__or span { position: relative; padding: 0 16px; background: var(--gt-cream); }

.gt-kit {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	text-align: left;
}
.gt-kit__item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--gt-border);
	border-radius: 18px;
	overflow: hidden;
}
.gt-kit__fig {
	margin: 0;
	background: var(--gt-offwhite);
	border-bottom: 1px solid var(--gt-border);
	/* One window of a fixed height for all three, so a 9:16 story and a
	   1.91:1 banner share a row without it growing to fit the tallest.
	   The artwork is centred and always shown whole, never cropped. */
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.gt-kit__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(58, 33, 40, .16);
}
.gt-kit__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gt-kit__label { font-size: 16px; font-weight: 700; color: var(--gt-ink); line-height: 1.25; }
.gt-kit__size {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--gt-citation);
	font-variant-numeric: tabular-nums;
}
.gt-kit__note { font-size: 14px; line-height: 1.45; color: var(--gt-muted-card); margin-bottom: 14px; }
.gt-kit__dl {
	/* Pushed to the bottom so the three buttons line up across the row even
	   when one card's note wraps to an extra line. */
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--gt-maroon);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .16s ease, transform .16s ease;
}
.gt-kit__dl svg { width: 16px; height: 16px; }
.gt-kit__dl:hover { background: var(--gt-maroon-hover); transform: translateY(-1px); }

@media (max-width: 900px) { .gt-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
	.gt-share { padding: 68px 0; }
	.gt-share__script { font-size: 38px; }
	.gt-share__title { font-size: 31px; }
	.gt-kit { grid-template-columns: minmax(0, 1fr); }
	.gt-sharebtn { padding: 11px 16px; font-size: 14px; }
}

/* ---------- 8. Footer ---------- */

.gt-foot {
	background: var(--gt-footer-bg);
	color: var(--gt-cream-ondark);
	padding: 52px 0;
}
.gt-wrap--foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.gt-foot__tag {
	margin-top: 14px;
	font-family: var(--gt-script);
	font-size: 26px;
	line-height: 1;
	color: var(--gt-gold-deep);
}
.gt-foot__contact {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	color: rgba(255, 243, 230, .78);
	text-align: right;
}
.gt-foot__contact a {
	color: inherit;
	transition: color .2s ease;
}
.gt-foot__contact a:hover { color: #fff; }

/* ---------- Responsive ---------- */

/* The drawer is progressive enhancement: without JS the links stay a plain
   wrapped row rather than a panel that can never be opened. */
@media (max-width: 980px) {
	.gt-nav { gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
	.gt-nav__links { gap: 18px; flex-wrap: wrap; justify-content: flex-end; }

	.gt-nav--js .gt-navtoggle { display: inline-flex; }
	.gt-nav--js .gt-nav__links {
		position: absolute;
		top: calc(100% + 10px);
		right: var(--gt-gutter);
		left: var(--gt-gutter);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px;
		border-radius: 18px;
		background: var(--gt-footer-bg);
		box-shadow: 0 18px 44px rgba(40, 12, 24, .38);
	}
	.gt-nav--js .gt-nav__links[hidden] { display: none; }
	.gt-nav--js .gt-nav__link {
		padding: 15px 16px;
		border-radius: 12px;
		font-size: 16px;
	}
	.gt-nav--js .gt-nav__link:hover { background: rgba(255, 243, 230, .1); }
	/* The header CTA stays put at every width — losing it was the one real
	   gap in the reference's mobile behaviour. */
	.gt-nav__cta { order: -1; }
}

@media (max-width: 820px) {
	.gt-hero__t1 { font-size: 104px; }
	.gt-hero__t2 { font-size: 88px; }
}

@media (max-width: 700px) {
	.ftk-gt { --gt-gutter: 22px; }
	.gt-header { padding: 18px var(--gt-gutter); }
	/* No room to hold the photo off to one side here — the headline already
	   spans the frame. Go full-bleed, and lift the crop so the couple's faces
	   sit above where the headline starts rather than behind it. */
	.gt-hero__photo {
		width: 100%;
		height: 120%;
		top: -17%;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	/* Narrow screens give the headline the full width, so a left-hand scrim
	   protects nothing — carry the wash across the whole frame instead. */
	.gt-hero__textscrim {
		background: linear-gradient(180deg,
			rgba(38, 16, 22, .52) 0%,
			rgba(38, 16, 22, .66) 46%,
			rgba(38, 16, 22, .52) 100%);
	}
	.gt-wrap--hero { padding: 20px var(--gt-gutter) 54px; }
	.gt-invite, .gt-schedule { padding: 64px 0; }
	.gt-about, .gt-hosts, .gt-register { padding: 68px 0; }
	.gt-foot { padding: 40px 0; }
	.gt-wrap--foot { justify-content: flex-start; }
	.gt-foot__contact { text-align: left; }
	.gt-orb--a { top: 80px; right: -30px; }
	.gt-orb--b { bottom: 120px; left: -20px; }
	.gt-hero__sub { font-size: 19px; }
	.gt-datechip { font-size: 20px; padding: 12px 20px; }
	.gt-invite__script { font-size: 44px; }
	.gt-register__script { font-size: 40px; }
	.gt-about__script { font-size: 36px; }
	.gt-about__title, .gt-schedule__title { font-size: 32px; }
	.gt-register__title { font-size: 34px; }
	.gt-hosts__title { font-size: 30px; }
	.gt-play { width: 72px; height: 72px; }
	.gt-play svg { width: 44px; height: 44px; }
	.gt-btn--gold, .gt-btn--ghost, .gt-btn--maroon { padding: 16px 26px; font-size: 15px; }
	.gt-btn--lg { padding: 17px 30px; font-size: 16px; }
	.gt-btn--ghost.gt-btn--lg { padding: 15px 28px; }
}

@media (max-width: 560px) {
	.gt-hero__t1 { font-size: 74px; }
	.gt-hero__t2 { font-size: 62px; margin-left: 24px; }
	.gt-eyebrow { font-size: 11px; letter-spacing: .12em; padding: 10px 16px; }
	/* Logo + nav no longer fit on one line — give the nav its own row. */
	.gt-header { flex-wrap: wrap; }
	.gt-nav { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   Motion
   ------------------------------------------------------------
   The house system asks for quiet motion and the campaign voice
   is unhurried, so nothing here announces itself. The page
   settles rather than performs: the headline assembles the way
   handwriting does, photographs drift while they hold, sections
   rise as you reach them.

   Every hidden state is gated on .gt-motion, which the script
   adds only when the visitor hasn't asked for reduced motion.
   With no JS, a failed script, or reduced motion, nothing is
   ever hidden — the same guard the welcome hub uses.
   ============================================================ */

.ftk-gt { --gt-ease: cubic-bezier(.22, .68, .24, 1); }

/* ---- Hero: the headline assembles, one line after the other ---- */

@keyframes gt-settle {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.gt-motion .gt-header,
.gt-motion .gt-hero__body .gt-eyebrow,
.gt-motion .gt-hero__t1,
.gt-motion .gt-hero__t2,
.gt-motion .gt-hero__sub,
.gt-motion .gt-hero__meta,
.gt-motion .gt-ctarow {
	animation: gt-settle .78s var(--gt-ease) both;
}
.gt-motion .gt-hero__t1   { animation-delay: .10s; }
.gt-motion .gt-hero__t2   { animation-delay: .22s; } /* line 2 follows line 1 */
.gt-motion .gt-hero__sub  { animation-delay: .38s; }
.gt-motion .gt-hero__meta { animation-delay: .48s; }
.gt-motion .gt-ctarow     { animation-delay: .58s; }

/* ---- The photographs drift while they hold ---- */

@keyframes gt-drift {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}
/* Runs on every slide continuously rather than restarting on .is-active.
   Tying it to the active class meant a photo swapped out mid-drift snapped
   back to scale(1) while it was still half-visible through the crossfade. */
.gt-motion .gt-hero__photo {
	animation: gt-drift 19s ease-in-out infinite alternate;
}

/* ---- Sections rise as you reach them ---- */

.gt-motion .gt-rise {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--gt-ease), transform .7s var(--gt-ease);
	transition-delay: var(--gt-d, 0ms);
}
.gt-motion .gt-rise.is-in { opacity: 1; transform: none; }

/* ---- Scripture: the rules draw outward around the verse ---- */

.gt-motion .gt-scripture {
	position: relative;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
.gt-motion .gt-scripture::before,
.gt-motion .gt-scripture::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--gt-border);
	transform: translateX(-50%);
	transition: width 1.1s var(--gt-ease) .15s;
}
.gt-motion .gt-scripture::before { top: -2px; }
.gt-motion .gt-scripture::after  { bottom: -2px; }
.gt-motion .gt-scripture.is-in::before,
.gt-motion .gt-scripture.is-in::after { width: 100%; }

/* ---- Micro-interactions ---- */

.gt-btn { transition: background-color .2s ease, color .2s ease, transform .2s var(--gt-ease); }
.gt-btn--gold:hover,
.gt-btn--ghost:hover,
.gt-btn--maroon:hover { transform: translateY(-2px); }
.gt-btn:active { transform: translateY(0); }

/* A hairline sweeping out from the left, rather than a blunt underline. */
.gt-nav__link { position: relative; padding-bottom: 4px; }
.gt-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--gt-ease);
}
.gt-nav__link:hover::after,
.gt-nav__link:focus-visible::after { transform: scaleX(1); }
/* In the drawer these are stacked rows, where an underline reads as a
   divider rather than a hover state. */
.gt-nav--js .gt-nav__links .gt-nav__link::after { display: none; }

.gt-card {
	transition: transform .35s var(--gt-ease), box-shadow .35s var(--gt-ease), border-color .35s ease;
}
.gt-card:hover {
	transform: translateY(-4px);
	border-color: #E7CDB2;
	box-shadow: 0 14px 30px rgba(122, 31, 79, .10);
}

.gt-heart { transition: transform .5s var(--gt-ease); }
.gt-heart:hover { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
	:root:has(.ftk-gt) { scroll-behavior: auto; }
	.ftk-gt *,
	.ftk-gt *::before,
	.ftk-gt *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	button.gt-video__center:hover .gt-play,
	button.gt-video__center:focus-visible .gt-play { transform: none; }
	.gt-btn:hover, .gt-card:hover, .gt-heart:hover { transform: none; }
}