/* ==========================================================================
   HERITAGE: The Founding Collection (/founding/)
   Loaded on that page only, after heritage.css.
   ========================================================================== */

.founding [id] { scroll-margin-top: calc(var(--header-h) + 8px); }

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

.founding-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.6s var(--ease);
}
.founding-hero__video.is-playing { opacity: 1; }

/* The drive is pale with mist on the left: a little more shade behind the words than the home hero needs. */
.founding-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(8, 26, 18, .66) 0%, rgba(8, 26, 18, .42) 36%, rgba(8, 26, 18, 0) 64%);
}
.founding-hero .hero__content { bottom: clamp(40px, 7vw, 96px); }
.founding-hero .eyebrow { text-shadow: 0 1px 14px rgba(8, 26, 18, .8); }
.founding-hero__title { max-width: 12ch; }
.founding-hero .hero__lede { margin-bottom: 18px; }
.founding-hero__plain {
	max-width: 520px;
	margin: 0 0 34px;
	padding-left: 18px;
	border-left: 1px solid var(--brass-soft);
	font-size: 17px;
	line-height: 1.55;
	color: rgba(244, 239, 230, .9);
}
.founding-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 36px;
}
.site-main .founding-hero__cta {
	background: var(--parchment);
	border-color: var(--parchment);
	color: var(--green-900);
	text-shadow: none;
}
.site-main .founding-hero__cta:hover { background: transparent; border-color: var(--parchment); color: var(--parchment); }
.founding-hero__imagery {
	position: absolute;
	z-index: 2;
	right: var(--gutter);
	bottom: 18px;
	margin: 0;
	font-family: var(--label);
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(244, 239, 230, .62);
}

/* --- The offer ladder ------------------------------------------------- */

.site-main > .founding-offers {
	padding-top: clamp(88px, 10vw, 150px);
	padding-bottom: clamp(88px, 10vw, 150px);
}
.founding-offers__lede {
	max-width: 620px;
	margin: 18px auto 0;
	font-style: italic;
	color: var(--ink-soft);
	font-size: 19px;
}
.founding-offers__notices { max-width: 760px; margin: 0 auto 40px; }
.founding-offers__notices ul {
	list-style: none;
	margin: 0;
	padding: 16px 20px;
	background: var(--linen);
	border-left: 2px solid var(--oxblood);
	font-style: italic;
}
.founding-offers__notices .woocommerce-message,
.founding-offers__notices .woocommerce-info { border-left-color: var(--green-700); }

.offer-ladder {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	align-items: stretch;
}
.offer {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(32px, 3.2vw, 48px) clamp(24px, 2.6vw, 40px) clamp(28px, 3vw, 40px);
	background: rgba(235, 228, 214, .45);
	border: 1px solid var(--stone);
}
.offer--featured {
	background: var(--green-800);
	border-color: var(--green-800);
	color: var(--parchment);
}
.offer__flag {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 8px 16px 7px;
	background: var(--brass-soft);
	color: var(--green-950);
	font-family: var(--label);
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	white-space: nowrap;
}
.offer__head { text-align: center; padding-bottom: 26px; border-bottom: 1px solid var(--stone); }
.offer--featured .offer__head { border-color: rgba(244, 239, 230, .18); }
.offer__head .eyebrow { margin-bottom: 12px; }
.offer--featured .eyebrow { color: var(--brass-soft); }
.offer__title { font-size: clamp(32px, 2.8vw, 42px); margin: 0 0 10px; }
.offer__price { margin: 0; font-size: 22px; line-height: 1.3; }
.offer__price .price-from { color: var(--ink-soft); }
.offer--featured .offer__price .price-from { color: rgba(244, 239, 230, .7); }
.offer__size {
	font-family: var(--label);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.offer__size::after { content: "·"; margin: 0 8px 0 10px; color: var(--brass); }

.offer__contents {
	list-style: none;
	display: grid;
	gap: 10px;
	padding: 24px 0 28px;
	font-size: 16.5px;
	line-height: 1.5;
	color: var(--ink-soft);
}
.offer--featured .offer__contents { color: rgba(244, 239, 230, .84); }
.offer__contents li { position: relative; padding-left: 18px; }
.offer__contents li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 6px;
	height: 1px;
	background: var(--brass);
}
.offer--featured .offer__contents li::before { background: var(--brass-soft); }

.offer__form { margin-top: auto; display: grid; gap: 22px; }
.offer__field { border: 0; margin: 0; padding: 0; min-width: 0; }
.offer__legend,
.pair-picker label {
	display: block;
	padding: 0;
	margin: 0 0 10px;
	font-family: var(--label);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.site-main .offer__button { width: 100%; padding: 0 20px; }
.site-main .offer--featured .offer__button { background: var(--parchment); border-color: var(--parchment); color: var(--green-900); }
.site-main .offer--featured .offer__button:hover { background: transparent; color: var(--parchment); }
.offer__button-price::before { content: "·"; margin: 0 10px; }
.offer__after {
	margin: -8px 0 0;
	text-align: center;
	font-style: italic;
	font-size: 15px;
	color: rgba(244, 239, 230, .7);
}
.offer__note { margin: -4px 0 0; font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--ink-soft); }

/* Choices: the radio is kept for keyboards and screen readers; the box beside it is what shows. */
.picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.picker__option { position: relative; display: block; cursor: pointer; }
.choice__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.choice {
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	padding: 11px 12px 10px;
	border: 1px solid var(--stone-dark);
	transition: border-color .3s, background-color .3s, color .3s;
}
.choice__main { font-family: var(--display); font-size: 19px; line-height: 1.2; }
.choice__sub { font-size: 14.5px; line-height: 1.3; color: var(--ink-soft); }
.picker__option:hover .choice { border-color: var(--green-800); }
.choice__input:focus-visible + .choice { outline: 1px solid var(--brass); outline-offset: 3px; }
.choice__input:checked + .choice { background: var(--green-800); border-color: var(--green-800); color: var(--parchment); }
.choice__input:checked + .choice .choice__sub { color: rgba(244, 239, 230, .75); }

.pair-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pair-picker__field { margin: 0; min-width: 0; }
.pair-picker label { margin-bottom: 6px; }
.pair-picker select {
	width: 100%;
	min-height: 50px;
	padding: 0 34px 0 12px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5f56' stroke-width='1.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
	border: 1px solid var(--stone-dark);
	border-radius: 0;
	font-family: var(--display);
	font-size: 18px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.pair-picker select:hover { border-color: var(--green-800); }

.founding-offers__foot {
	max-width: 760px;
	margin: clamp(40px, 5vw, 64px) auto 0;
	text-align: center;
}
.founding-offers__terms { font-style: italic; color: var(--ink-soft); font-size: 17px; }
.founding-offers__terms p { margin: 0 0 .6em; }
.founding-offers__fine {
	margin: 12px 0 0;
	font-family: var(--label);
	font-size: 10px;
	letter-spacing: .18em;
	line-height: 1.9;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* --- The Seasonal Box ------------------------------------------------- */

.site-main > .founding-membership {
	max-width: none;
	background: var(--linen);
	padding-top: clamp(80px, 9vw, 140px);
	padding-bottom: clamp(80px, 9vw, 140px);
	padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
	padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.founding-membership__inner {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(40px, 7vw, 120px);
	align-items: start;
}
.founding-membership__text h2 { font-size: clamp(38px, 4.2vw, 58px); }
.founding-membership__photo { display: block; max-width: 420px; margin: 0 0 36px; }
.founding-membership__photo img { display: block; width: 100%; height: auto; }
.founding-membership__lede { font-size: 20px; color: var(--ink-soft); max-width: 540px; }
.founding-membership__sub {
	margin: 36px 0 14px;
	font-family: var(--label);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--brass);
	font-weight: 400;
}
.founding-membership__list { list-style: none; display: grid; gap: 10px; max-width: 540px; }
.founding-membership__list li { position: relative; padding-left: 18px; color: var(--ink-soft); font-size: 17.5px; }
.founding-membership__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .78em;
	width: 6px;
	height: 1px;
	background: var(--brass);
}
.founding-membership__facts {
	background: var(--parchment);
	border: 1px solid var(--stone);
	padding: clamp(28px, 3.2vw, 48px);
}
.founding-membership__facts dl { margin: 0; display: grid; }
.founding-membership__facts dl > div { padding: 16px 0; border-bottom: 1px solid var(--stone); }
.founding-membership__facts dl > div:first-child { padding-top: 0; }
.founding-membership__facts dt {
	font-family: var(--label);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: 4px;
}
.founding-membership__facts dd { margin: 0; font-family: var(--display); font-size: 22px; line-height: 1.3; }
.founding-membership__per { font-family: var(--serif); font-size: 16px; color: var(--ink-soft); font-style: italic; margin-left: 6px; }
.founding-membership__choice { margin: 22px 0 0; font-style: italic; color: var(--ink-soft); font-size: 16.5px; }
.founding-membership__terms { margin-top: 18px; font-size: 14.5px; color: var(--ink-soft); border-top: 1px solid var(--stone); }
.founding-membership__terms summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0 0;
	font-family: var(--label);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink);
}
.founding-membership__terms summary::-webkit-details-marker { display: none; }
.founding-membership__terms summary .icon { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.founding-membership__terms[open] summary .icon { transform: rotate(45deg); }
.founding-membership__terms p { margin: 0 0 .6em; }
.site-main > .founding-membership--panel { max-width: var(--max); }

/* --- What happens next ------------------------------------------------ */

.site-main > .founding-next { padding-top: clamp(88px, 10vw, 150px); padding-bottom: clamp(40px, 5vw, 72px); }
.founding-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 clamp(20px, 2.6vw, 40px);
}
.founding-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.founding-steps__step { border-top: 1px solid var(--stone-dark); padding-top: 26px; }
.founding-steps__numeral {
	display: block;
	font-family: var(--display);
	font-style: italic;
	font-weight: 300;
	font-size: 44px;
	line-height: 1;
	color: var(--brass);
	margin-bottom: 18px;
}
.founding-steps__title { font-size: 27px; line-height: 1.15; margin-bottom: 10px; font-weight: 400; }
.founding-steps__step p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.55; margin: 0; }

/* --- The six memories ------------------------------------------------- */

.site-main > .founding-memories { padding-top: clamp(88px, 10vw, 150px); padding-bottom: clamp(64px, 8vw, 120px); }
.memory-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 40px clamp(14px, 1.6vw, 24px);
}
/* heritage.css styles .memory, .memory__media and .memory__img for the home page carousel (16:9, absolute, with a shade); undo that here. */
.memory-grid .memory { flex: none; aspect-ratio: auto; max-height: none; overflow: visible; background: none; scroll-snap-align: none; }
.memory-grid .memory::after { content: none; }
.memory-grid .memory__media { position: relative; inset: auto; height: auto; }
.memory-grid .memory__img { transform: none; }
.memory-grid .memory__line { font-family: inherit; margin: 0; }
.memory__link { display: block; text-align: center; }
.memory__media { display: block; position: relative; aspect-ratio: 7 / 9; overflow: hidden; background: var(--linen); margin-bottom: 18px; }
.memory__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.memory__link:hover .memory__media img { transform: scale(1.03); }
.memory__body { display: flex; flex-direction: column; gap: 4px; }
.memory__family { font-size: 9.5px; margin: 0 0 4px; }
.memory__name { font-family: var(--display); font-size: 23px; line-height: 1.15; }
.memory__line { font-style: italic; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }

.founding-consult { text-align: center; margin-top: clamp(64px, 8vw, 104px); }
.founding-consult__line {
	font-family: var(--display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.3;
	max-width: 24ch;
	margin: 0 auto 26px;
}

/* --- Questions -------------------------------------------------------- */

.site-main > .founding-faq {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(40px, 7vw, 120px);
	padding-top: clamp(64px, 8vw, 120px);
	padding-bottom: clamp(96px, 11vw, 160px);
}
.founding-faq__head h2 { font-size: clamp(34px, 3.6vw, 50px); }
.founding-faq__head p:not(.eyebrow) { color: var(--ink-soft); font-style: italic; }
.founding-faq .accordion__item summary { gap: 24px; font-size: 11.5px; line-height: 1.5; text-align: left; }
.founding-faq .accordion__item summary .icon { flex: none; }
.founding-faq .accordion__body a { border-bottom: 1px solid currentColor; }

/* --- Sticky bar (phones) ---------------------------------------------- */

.founding-sticky { display: none; }

@media (max-width: 900px) {
	.founding-sticky {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		padding: 10px max(var(--gutter), env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
		background: rgba(244, 239, 230, .96);
		-webkit-backdrop-filter: saturate(1.1) blur(10px);
		backdrop-filter: saturate(1.1) blur(10px);
		border-top: 1px solid rgba(185, 174, 155, .6);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform .5s var(--ease), visibility 0s linear .5s;
	}
	.founding-sticky[hidden] { display: none; }
	.founding-sticky.is-visible { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
	.founding-sticky form { margin: 0; }
	.site-main .founding-sticky__button,
	.founding-sticky__button { width: 100%; min-height: 50px; padding: 0 12px; font-size: 11px; letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) {
	.founding-sticky, .founding-sticky.is-visible { transition: none; }
	.founding-hero__video { display: none; }
}

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

@media (max-width: 1100px) {
	.offer-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
	.offer--featured { grid-column: 1 / -1; }
	.offer--featured .offer__contents { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	.offer--featured .offer__form { max-width: 420px; width: 100%; margin-left: auto; margin-right: auto; }
	.memory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 20px; }
	.founding-steps,
	.founding-steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 900px) {
	.founding-membership__inner,
	.site-main > .founding-faq { grid-template-columns: minmax(0, 1fr); }
	.founding-hero .hero__lede { font-size: 18px; }
	.founding-hero__plain { font-size: 16px; margin-bottom: 28px; }
}

@media (max-width: 700px) {
	.offer-ladder { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
	.offer--featured .offer__contents { grid-template-columns: minmax(0, 1fr); }
	.memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
	.memory__name { font-size: 21px; }
	.memory__line { font-size: 14.5px; }
	.founding-steps,
	.founding-steps--3 { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.founding-steps__step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding-top: 22px; }
	.founding-steps__numeral { grid-row: span 2; font-size: 36px; margin: 0; }
}

@media (max-width: 560px) {
	.founding-hero .hero__content { bottom: 44px; }
	.founding-hero__title { font-size: clamp(44px, 12.5vw, 60px); }
	.founding-hero .eyebrow { font-size: 10px; letter-spacing: .16em; }
	.founding-hero::before { background: linear-gradient(0deg, rgba(8, 26, 18, .88) 0%, rgba(8, 26, 18, .6) 48%, rgba(8, 26, 18, .15) 72%, rgba(8, 26, 18, 0) 100%); }
	.founding-hero--preorder .hero__lede { display: none; } /* The plain pre-order line matters more on a phone. */
	.founding-hero__actions { gap: 18px 28px; }
	.founding-hero__actions .button { width: 100%; }
	.founding-hero__imagery { bottom: 12px; font-size: 8.5px; }
	.offer { padding-left: 20px; padding-right: 20px; }
	.choice__main { font-size: 18px; }
	.pair-picker { grid-template-columns: minmax(0, 1fr); }
}

/* The membership plugin's own terms list, set small beneath the facts. */
.founding-membership__terms .hx-membership-terms { list-style: none; display: grid; gap: 8px; margin: 0; padding: 16px 0 0; }
.founding-membership__terms .hx-membership-terms li { position: relative; padding-left: 14px; line-height: 1.5; }
.founding-membership__terms .hx-membership-terms li::before { content: "·"; position: absolute; left: 0; color: var(--brass); }
.founding-membership__facts dd small { display: block; margin-top: 4px; font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--ink-soft); }