/*
Landing page styles — Keep San Diego Affordable.

Rebuilt from the Elementor Kit (post-6.css) and page 107 (post-107.css). Every
number here came from one of those two files or from measuring the live page;
nothing is invented. Where the original was inconsistent, the inconsistency is
reproduced on purpose and flagged.

Breakpoints are the kit's own: 1200 and 725. Three rules the original authored
by hand use 767 instead — those are kept at 767 so they behave identically.

Loaded after the untouched Underscores style.css, which supplies the reset and
the #404040 body colour the page leans on.
*/

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Kit palette */
	--c-navy: #0F2F4A;      /* primary   */
	--c-sky: #6FAED9;       /* secondary */
	--c-gold: #E3B341;      /* accent    */
	--c-white: #FFFFFF;
	--c-mist: #E9EEF2;      /* testimonial band */
	--c-offwhite: #F4F4F4;  /* "why this fight matters" band */

	/* Values that bypassed the kit palette in the original */
	--c-body: #404040;      /* Underscores default, not black */
	--c-heading: #1A4058;   /* "Meet the hosts", "More hosts, more stories" */
	--c-button: #5B9DD6;    /* form submit + solution check icons */
	--c-dash: #B9C6D1;      /* placeholder card border */
	--c-rule: #CACACA;      /* divider */
	--c-quote: #3F444B;     /* blockquote text */

	--font: 'Inter', sans-serif;

	/* Per-section content widths */
	--content: 1140px;
	--content-facts: 1300px;
	--content-hosts: 1447px;
	--content-learn: 950px;

	--gap: 1.5rem;          /* Elementor --widgets-spacing */

	/* The kit's fluid typography tokens, by their original IDs */
	--fs-section: 2.25rem;  /* 0958300 — section headings */
	--fs-lead: 1.25rem;     /* cc7bd9d — lead paragraphs */
	--fs-body: 1.125rem;    /* 2ffb5c1 — list and description copy */
	--fs-button: 1.465rem;  /* accent — buttons */
	--lh-section: 1.4em;
}

@media (max-width: 1200px) {
	:root {
		/* The kit's container max-width steps 1140 -> 1024 -> 767. */
		--content: 1024px;
		--fs-section: 2rem;
		--fs-lead: 1.2rem;
		--fs-body: 1.1rem;
		--fs-button: 1.3rem;
	}
}

@media (max-width: 725px) {
	:root {
		--content: 767px;
		--fs-section: 1.5rem;
		--fs-lead: 1.1rem;
		--fs-body: 1rem;
		--fs-button: 1.1rem;
	}
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
	overscroll-behavior: none;
}

html,
body {
	overflow-x: hidden;
}

body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--font);
	font-size: 16px;
	line-height: 27px;
	color: var(--c-body);
}

/* The canvas behind the landing page, visible on overscroll. */
body.home {
	background-color: var(--c-navy);
}

.landing a,
.landing a:visited {
	color: var(--c-sky);
}

.landing img {
	max-width: 100%;
	height: auto;
}

.landing section {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

.eyebrow {
	width: 100%;
	margin: 0 0 0.5rem;
	font-family: var(--font);
	font-size: 0.9rem;
	font-weight: 800;
	/* Elementor's heading widget zeroes the leading; the band spacing depends on it. */
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--c-gold);
	text-align: start;
}

.eyebrow--center {
	text-align: center;
}

/* The hand-drawn gold underline behind a highlighted word. */
.marker {
	background-image: url('../../../../uploads/2026/01/yellowmarker.svg');
	background-position: center bottom;
	background-repeat: no-repeat;
	padding-bottom: 1rem;
}

.marker--lg {
	display: inline-block;
	background-image: url('../../../../uploads/2026/01/yellowmarkerlarge.svg');
}

/*
 * Buttons. The original has no hover state at all — the inherited
 * transition: all .3s does nothing. Kept as shipped.
 */
.button {
	display: inline-block;
	min-height: 40px;
	padding: 1rem 2rem;
	border: 0;
	border-radius: 3px;
	font-family: var(--font);
	font-size: var(--fs-button);
	font-weight: 800;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	cursor: pointer;
}

.landing .button,
.landing .button:hover,
.landing .button:focus,
.landing .button:visited {
	color: var(--c-white);
}

.button--primary {
	background-color: var(--c-gold);
}

.button--secondary {
	background-color: var(--c-sky);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
	padding-inline: 5%;
	background-color: var(--c-navy);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
	max-width: var(--content);
	margin-inline: auto;
	/* Resolves against the section's content box, as Elementor's did. */
	padding-block: 10%;
}

.hero__logo {
	display: block;
	width: 100%;
	line-height: 0;
	text-align: center;
}

/* 60% of the lockup's natural 971px. 85% at tablet, full width on phones. */
.hero__logo img {
	display: inline-block;
	width: 583px;
	max-width: 100%;
}

.hero__title {
	width: 100%;
	margin: 0.5rem 0 1.5rem;
	font-family: var(--font);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.3em;
	color: var(--c-white);
	text-align: center;
	text-wrap: balance;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
}

/* --------------------------------------------------------------------------
   Story + video
   -------------------------------------------------------------------------- */

.story {
	padding-inline: 3rem;
	background-color: var(--c-white);
}

.story__inner {
	display: flex;
	flex-direction: row;
	gap: 0;
	max-width: var(--content);
	margin-inline: auto;
	padding-block: 3rem;
}

.story__copy {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	width: 40%;
	padding: 1rem;
}

.story__title {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-section);
	font-weight: 700;
	/* The kit sets h4 italic globally and nothing un-sets it. */
	font-style: italic;
	line-height: var(--lh-section);
	color: var(--c-navy);
}

.story__body {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.4em;
	color: #000;
	text-align: start;
}

.story__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
	width: 60%;
	padding: 1rem;
}

.story__video {
	width: 100%;
}

.story__video video {
	/*
	 * Deliberately left inline, as Elementor had it: the baseline descender
	 * under the video is part of the gap above the caption.
	 */
	width: 100%;
	aspect-ratio: 1.77777;
	background: #000;
}

.story__caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
}

.story__chev {
	display: inline-flex;
	color: var(--c-navy);
}

.story__chev svg {
	display: block;
	width: 27px;
	height: 27px;
	fill: currentColor;
}

.story__caption-text {
	padding: 0 0.5rem;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--c-body);
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */

.facts {
	padding-inline: 3rem;
	background-color: var(--c-navy);
}

.facts__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	max-width: var(--content-facts);
	margin-inline: auto;
	padding-block: 3rem;
}

.facts__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
	width: 33.33%;
	padding: 1.5rem;
}

.facts__number {
	margin: 0 0 0.75rem;
	font-family: var(--font);
	font-size: 3.75rem;
	font-weight: 800;
	line-height: 1.1em;
	color: var(--c-gold);
	text-align: center;
}

.facts__text {
	max-width: 360px;
	margin: 0;
	font-family: var(--font);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--c-white);
	text-align: center;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Meet the hosts — the carousel
   -------------------------------------------------------------------------- */

.hosts {
	padding-inline: 5rem;
	background-color: var(--c-mist);
	/* Two whole cards plus the gap; the arrows are positioned off this. */
	--rail-w: 880px;
	--arrow-size: 48px;
	--arrow-gap: 24px;
}

.hosts__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5em;
	max-width: var(--content-hosts);
	margin-inline: auto;
	padding-block: 5rem;
}

.hosts__title {
	margin: 0 0 0.5rem;
	font-family: var(--font);
	font-size: var(--fs-section);
	font-weight: 700;
	line-height: var(--lh-section);
	color: var(--c-heading);
	text-align: center;
	text-wrap: balance;
}

/*
 * The rail is exactly two cards wide and centred, which leaves a clear gutter
 * on each side of the section. The arrows live there: they flank the cards
 * without covering one, and they add no height, so the band stays the height
 * the comp had.
 */
.hosts__carousel {
	position: relative;
	width: 100%;
}

.hosts__arrows {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	/*
	 * Sized off the rail, not the band, so the arrows sit a constant 24px
	 * outside the cards at every width instead of drifting to the far edges
	 * on a wide screen.
	 */
	width: min(100%, calc(var(--rail-w) + 2 * (var(--arrow-size) + var(--arrow-gap))));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Only the buttons should catch the pointer, not the strip between them. */
	pointer-events: none;
}

.hosts__arrows[hidden] {
	display: none;
}

.hosts__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--c-navy);
	border-radius: 50%;
	background: transparent;
	color: var(--c-navy);
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}

.hosts__arrow:hover:not(:disabled) {
	background-color: var(--c-navy);
	color: var(--c-white);
}

.hosts__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.hosts__lead {
	max-width: 760px;
	margin: 0;
	text-wrap: balance;
	font-family: var(--font);
	font-size: var(--fs-lead);
	font-weight: 400;
	line-height: 1.4em;
	color: var(--c-navy);
	text-align: center;
}

/*
 * A native scroll-snap rail. The arrows just scrollBy() one card; there is no
 * transform maths and no slide index to keep in sync. With JS off it is still
 * a plain horizontal scroller, so every card stays reachable.
 *
 * safe center keeps two cards centred the way the comp had them, and falls
 * back to flex-start as soon as the rail overflows.
 */
.hosts__rail {
	display: flex;
	justify-content: safe center;
	gap: 40px;
	width: 100%;
	/*
	 * Exactly two cards plus the gap. Sizing the viewport to whole cards is
	 * what stops the rail looking clipped: you see two complete cards in the
	 * position the comp put them, and the arrows page to the next whole one
	 * (460px, one card + gap) instead of nudging 60px to a cut-off edge.
	 */
	max-width: var(--rail-w);
	/* Centres the rail in the band. Must be the shorthand: a later
	   `margin: 0` silently undoes margin-inline. */
	margin: 0 auto;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hosts__rail::-webkit-scrollbar {
	display: none;
}

.hosts__rail:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 4px;
}

.hosts__item {
	display: flex;
	flex: 0 0 420px;
	scroll-snap-align: start;
}

.host-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	width: 100%;
}

/* ---- the photo, and the modal trigger it doubles as ---- */

.host-card__media {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
}

button.host-card__media {
	cursor: pointer;
}

.host-card__media img {
	display: block;
	width: 240px;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 4px 5px 9px 0 rgba(0, 0, 0, 0.5);
}

/*
 * The one element that did not exist in the Elementor build. Without it
 * nothing tells you the photo opens a video. Palette colours only.
 */
.play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s;
	pointer-events: none;
}

.play svg {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

button.host-card__media:hover .play,
button.host-card__media:focus-visible .play {
	transform: scale(1.08);
}

/* ---- quote ---- */

.host-card__quote {
	margin: 1.5rem 0 1rem;
	/*
	 * The original quote was an inline-block inside a 27px line box, which
	 * left 16px of space above it. Stated outright rather than re-derived
	 * from baseline alignment.
	 */
	padding: 16px 0 0;
	border: 0;
	background: none;
	color: var(--c-quote);
	text-align: center;
}

.host-card__quote p {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0 2rem;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 700;
	line-height: 27px;
	color: var(--c-quote);
	text-align: center;
	text-wrap: balance;
}

.host-card__quote p::before,
.host-card__quote p::after {
	position: absolute;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 4.5em;
	line-height: 1;
	color: var(--c-gold);
}

.host-card__quote p::before {
	content: '\201C';
	top: -0.1em;
	left: 0;
}

.host-card__quote p::after {
	content: '\201D';
	right: 0;
	bottom: -0.7em;
}

/* ---- name + role ---- */

.host-card__attribution {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
	width: 100%;
}

.host-card__name {
	margin: 0;
	font-family: var(--font);
	/* 1.75em against the 16px card context = 28px, as the original resolved. */
	font-size: 1.75em;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--c-body);
	text-align: center;
}

.host-card__role {
	max-width: 350px;
	margin: 0;
	padding: 12px;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 500;
	font-style: normal;
	line-height: 24px;
	color: var(--c-navy);
	text-align: center;
	text-wrap: balance;
}

/* ---- the "more hosts" card ---- */

.host-card--empty {
	justify-content: center;
	gap: var(--gap);
	min-height: 320px;
	padding: 2rem;
	border: 2px dashed var(--c-dash);
	border-radius: 12px;
}

.host-card__empty-title {
	margin: 0 0 0.75rem;
	font-family: var(--font);
	font-size: 1.5rem;
	font-weight: 700;
	/* Italic from the kit's global h4, same as the story heading. */
	font-style: italic;
	line-height: 1.3em;
	color: var(--c-heading);
	text-align: center;
}

.host-card__empty-body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5em;
	color: var(--c-navy);
	text-align: center;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Why this fight matters / We support effective solutions
   -------------------------------------------------------------------------- */

.learn {
	padding-inline: 2rem;
	background-color: var(--c-offwhite);
}

.learn__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: var(--content-learn);
	margin-inline: auto;
	padding-block: 5rem;
}

.learn__intro {
	width: 70%;
	padding-bottom: 1.5rem;
}

.learn .eyebrow,
.learn__list-wrap,
.learn .callout,
.learn__rule {
	width: 100%;
}

.learn__title {
	margin: 0 0 1rem;
	font-family: var(--font);
	font-size: var(--fs-section);
	font-weight: 700;
	line-height: var(--lh-section);
	color: var(--c-body);
}

.learn__title .arrow {
	display: inline;
	width: 100px;
	height: 17px;
	margin-left: 0.5rem;
	vertical-align: middle;
}

/*
 * The two intro paragraphs are NOT the same size in the original: the first
 * icon-box never got a description typography rule, so it fell through to the
 * 16px body, while the second is the 1.125rem token. Reproduced as shipped.
 */
.learn__desc {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 400;
	line-height: 27px;
	color: var(--c-body);
}

.learn__intro--solutions .learn__desc {
	font-size: var(--fs-body);
	line-height: 1.5em;
}

.learn__list-wrap {
	width: 100%;
}

.points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2.5rem;
	row-gap: 1.25rem;
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
}

.points__item {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
}

/*
 * The icon column is 32px wide, not 28: Elementor's icon list gives the SVG a
 * 0.25em right margin on top of the 0.75rem cell padding, and the text a 5px
 * inset. Those 9px decide whether the longest points wrap to three lines or
 * four, so they are not cosmetic.
 */
.points__icon {
	position: relative;
	top: 0.4rem;
	display: flex;
	flex-shrink: 0;
	padding-inline-end: 0.75rem;
	line-height: 0;
}

.points__icon svg {
	display: block;
	width: 1rem;
	height: 1rem;
	margin: 0 0.25rem 0 0;
	transition: fill 0.3s;
}

/* The problem icons carry their fill inline; the solution checks get it here. */
.points--solutions .points__icon svg {
	fill: var(--c-button);
}

.points__text {
	align-self: center;
	padding-inline-start: 5px;
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5em;
	color: var(--c-body);
	transition: color 0.3s;
}

.callout {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px 24px;
	width: 100%;
	margin: 0.5rem 0 1.5rem;
	padding: 1.5rem 2rem;
	border-radius: 10px;
	background-color: var(--c-gold);
}

.callout__number {
	width: auto;
	margin: 0;
	font-family: var(--font);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1em;
	color: var(--c-navy);
}

.callout__text {
	width: 75%;
	margin: 0;
	font-family: var(--font);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--c-navy);
	text-wrap: balance;
}

.learn__rule {
	width: 100%;
	height: 0;
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--c-rule);
}

/* --------------------------------------------------------------------------
   Join the movement
   -------------------------------------------------------------------------- */

.join {
	padding-inline: 5rem;
	background-color: var(--c-navy);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.join__inner {
	display: flex;
	flex-direction: row;
	gap: var(--gap);
	max-width: var(--content);
	margin-inline: auto;
	padding-block: 5rem;
}

.join__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	gap: var(--gap);
	width: 50%;
}

.join__lockup {
	display: block;
	line-height: 0;
}

.join__lockup img {
	display: block;
	width: 508px;
	max-width: 100%;
}

.join__title {
	width: 80%;
	margin: 0;
	font-family: var(--font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.5em;
	color: var(--c-white);
	text-align: center;
	text-wrap: balance;
}

.join__body {
	width: 80%;
	margin: 0.75rem 0 0;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--c-white);
	text-align: center;
	text-wrap: balance;
}

.join__form {
	align-self: center;
	width: 50%;
}

/* --------------------------------------------------------------------------
   Gravity Forms (form 1, "Sign The Petition")
   -------------------------------------------------------------------------- */

.join__form .gform_required_legend {
	display: none;
}

.join__form .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 2%;
	grid-row-gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.join__form .gfield--width-full {
	grid-column: span 12;
}

.join__form .gfield {
	margin: 0;
}

.join__form .gfield label,
.join__form .gfield legend {
	color: var(--c-white);
	font-size: 11px;
}

.join__form input[type='text'],
.join__form input[type='email'],
.join__form input[type='tel'],
.join__form input[type='number'],
.join__form textarea,
.join__form select {
	width: 100%;
	padding: 8px;
	border: 0;
	border-style: none;
	border-radius: 8px;
	box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.5);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
	color: #111;
	background: var(--c-white);
}

.join__form input::placeholder {
	text-transform: none;
	color: #6b6b6b;
}

.join__form .gfield--type-consent .gfield_consent_label,
.join__form .gfield--type-consent label {
	font-size: 11px;
	line-height: 1.2;
	color: var(--c-white);
}

.join__form .gfield--type-consent a,
.join__form .gfield--type-consent a:visited {
	color: var(--c-sky);
}

.join__form .gform_footer {
	padding: 16px 0 0;
	margin: 0;
}

.join__form .gform_button,
.join__form .gform-button {
	width: 100%;
	max-width: 100%;
	padding: 1rem 2rem;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.5);
	background-color: var(--c-button);
	color: var(--c-white);
	font-family: var(--font);
	font-size: var(--fs-button);
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.join__form .gform_confirmation_message {
	color: var(--c-white);
}

.join__form .gform_validation_errors {
	border: 0;
	box-shadow: none;
}

.join__form .ginput_container_phone .validation_message {
	display: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	padding-inline: 2rem;
	background-color: var(--c-gold);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	max-width: var(--content);
	margin-inline: auto;
	padding-block: 2rem;
}

.site-footer__disclaimer {
	font-family: var(--font);
	font-size: 16px;
	line-height: 27px;
	color: var(--c-white);
	text-align: center;
}

.site-footer__legal {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1;
	text-align: center;
}

.site-footer__legal a,
.site-footer__legal a:visited {
	color: var(--c-white);
}

/* --------------------------------------------------------------------------
   Video lightbox
   -------------------------------------------------------------------------- */

.lightbox {
	width: min(1100px, 92vw);
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.lightbox::backdrop {
	background: rgba(8, 20, 32, 0.84);
}

.lightbox__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	background: #000;
	overflow: hidden;
}

.lightbox__frame--vertical {
	width: min(500px, 92vw);
	margin-inline: auto;
	aspect-ratio: 9 / 16;
}

.lightbox__frame--square {
	width: min(720px, 92vw);
	margin-inline: auto;
	aspect-ratio: 1;
}

.lightbox .video__player {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.lightbox__close {
	position: absolute;
	top: -16px;
	right: -16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-navy);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Entrance animations
   Same names, durations and delays Elementor used: fadeIn 1.25s, zoomIn .75s.
   Progressive — without JS, or with reduced motion, everything is visible.
   -------------------------------------------------------------------------- */

html.has-reveal [data-reveal] {
	opacity: 0;
}

html.has-reveal [data-reveal].is-revealed {
	animation: ksda-fade 1.25s both;
	animation-delay: var(--reveal-delay, 0ms);
}

html.has-reveal [data-reveal='zoom'].is-revealed {
	animation-name: ksda-zoom;
	animation-duration: 0.75s;
}

@keyframes ksda-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ksda-zoom {
	from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	50%  { opacity: 1; }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html.has-reveal [data-reveal] {
		opacity: 1;
		transform: none;
		animation: none !important;
	}

	.hosts__rail {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   Tablet — the kit's own 1200px cutoff
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {

	.hero__inner {
		/* Elementor's default container padding steps 10% -> 15% -> 20%. */
		padding-block: 15%;
	}

	.hero__logo img {
		/* 85% of the lockup's natural 971px. */
		width: 825px;
	}

	.story {
		padding-inline: 1rem;
	}

	.story__inner {
		flex-direction: column;
		align-items: center;
		padding-block: 1rem;
	}

	.story__copy {
		width: 100%;
	}

	.story__media {
		width: 80%;
	}

	.facts__inner {
		flex-direction: column;
	}

	.facts__item {
		width: 100%;
	}

	.hosts__inner {
		gap: 2em;
		max-width: 656px;
	}

	.hosts {
		--rail-w: 420px;
	}

	.learn__intro {
		width: 100%;
	}

	/*
	 * The original leaves this a row at tablet with a 1600px basis on the
	 * copy column, so the two shrink proportionally rather than stacking.
	 * Odd, but it is what the page does, so it is what we do.
	 */
	.join__copy {
		width: 1600px;
	}

	.join__form {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Two lists and the pull-quote were hand-written against 767, not 725.
   Keeping the original cutoff so they break at the same width they always did.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.points {
		grid-template-columns: 1fr;
		row-gap: 1rem;
	}

	.host-card__quote p {
		display: block;
		padding: 0 0.25rem;
	}

	.host-card__quote p::before,
	.host-card__quote p::after {
		position: static;
		display: inline;
		font-size: 2.4em;
		line-height: 0;
		vertical-align: -0.35em;
	}

	.host-card__quote p::before {
		margin-right: 0.15em;
	}

	.host-card__quote p::after {
		margin-left: 0.15em;
	}
}

/* --------------------------------------------------------------------------
   Phone — the kit's own 725px cutoff
   -------------------------------------------------------------------------- */

@media (max-width: 725px) {

	.hero__inner {
		padding-block: 20%;
	}

	.hero__logo img {
		width: 971px;
	}

	.hero__title {
		font-size: 1.2rem;
	}

	.story__media {
		width: 100%;
	}

	.facts {
		padding-inline: 1rem;
	}

	.facts__inner {
		padding-block: 2rem;
	}

	.facts__number {
		font-size: 3rem;
	}

	.hosts {
		padding-inline: 1rem;
	}

	.hosts__inner {
		max-width: none;
		padding-block: 3rem;
	}

	.hosts {
		--rail-w: none;
	}

	.hosts__rail {
		max-width: none;
	}

	/* No gutter left at this width, so the arrows sit under the rail. */
	.hosts__arrows {
		position: static;
		width: auto;
		justify-content: center;
		gap: 1rem;
		margin-top: 1.25rem;
		transform: none;
	}

	.hosts__item {
		/* One card per view; the rail becomes a swipe. */
		flex-basis: 100%;
	}

	.host-card--empty {
		min-height: 0;
	}

	.learn {
		padding-inline: 1rem;
	}

	.callout {
		flex-direction: column;
		align-items: flex-start;
	}

	.callout__text {
		width: 100%;
	}

	.join {
		padding-inline: 2rem;
	}

	.join__inner {
		flex-direction: column;
		padding-block: 2rem;
	}

	.join__copy,
	.join__form {
		width: 100%;
	}

	.join__title {
		font-size: 22px;
	}

	.site-footer {
		padding-inline: 1rem;
	}

	.site-footer__inner {
		padding-block: 1rem;
	}
}