/* Landing page — Figma 3020:211 */

/* ---------- Hero ---------- */
.landing-hero { position: relative; height: clamp(520px, 47.6vw, 686px); overflow: hidden; }
.landing-hero__media, .landing-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-hero__media img { object-fit: cover; object-position: center 35%; }
.landing-hero__scrim { position: absolute; inset: 0; background: rgba(35, 40, 48, 0.95); mix-blend-mode: multiply; }
.landing-hero__copy {
	position: relative; z-index: 2; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(40px, 5.8vw, 84px);
	color: var(--white); text-align: center; padding: 90px var(--gutter) 0;
}
.landing-hero__copy h1 { max-width: 873px; }
.landing-hero__copy p { max-width: 795px; }

/* ---------- Statement ---------- */
.landing-statement {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: clamp(40px, 5vw, 80px);
	padding-top: clamp(90px, 11.5vw, 165px); padding-bottom: clamp(80px, 10vw, 146px);
	color: var(--navy);
}
.landing-statement h2 { max-width: 1052px; }

/* ---------- Tools band (dark green) ---------- */
.landing-tools {
	background: var(--green); color: var(--white);
	border-radius: 50px 50px 0 0;
	/* Bottom padding is deep on purpose: wrightwoodadvisory.com leaves ~269px of
	   green under the last link at 1920, and the band below overlaps into the
	   last --band-overlap of it. Top padding (~84px) already matches the parent. */
	padding: clamp(56px, 6vw, 84px) var(--gutter) clamp(115px, 14vw, 269px);
}
.landing-tools .eyebrow--dot { color: var(--white); }
.landing-tools__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5.8vw, 84px);
	margin-top: clamp(48px, 5.5vw, 76px);
}
@media (max-width: 1100px) and (min-width: 641px) {
	/* Tablet: two comfortable columns instead of three squeezed ones */
	.landing-tools__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
	.tool-card h3, .tool-card p { min-height: 0; }
}
.tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 387px; }
.tool-card h3 { min-height: 2em; }
.tool-card hr { width: 100%; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.6); margin: 0; }
.tool-card p { font-family: var(--font-body); font-size: 16px; line-height: 1.2; min-height: 3.6em; }
.tool-card .ulink { color: var(--white); }
.tool-card .ulink > span { text-decoration-color: var(--gold); }
.tool-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ---------- Access band (photo) ---------- */
.landing-access {
	/* Pull up over the green band: the rounded top corners then reveal green
	   instead of the white page. Same treatment (and same -45px against a 50px
	   radius) the parent site uses between every stacked band. */
	margin-top: calc(-1 * var(--band-overlap));
	position: relative; border-radius: 50px; overflow: hidden;
	min-height: clamp(620px, 59vw, 849px); display: flex; align-items: center;
	padding-inline: var(--gutter);
}
.landing-access__media, .landing-access__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-access__media img { object-fit: cover; }
.landing-access__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); mix-blend-mode: multiply; }
.landing-access__copy {
	position: relative; z-index: 2; color: var(--white);
	padding: clamp(56px, 7vw, 100px) 0;
	display: flex; flex-direction: column; align-items: flex-start; gap: 34px; max-width: 720px;
}
.landing-access__copy h2 { max-width: 500px; }
.landing-access__body { font-family: var(--font-body); font-size: 16px; line-height: 1.2; max-width: 500px; }
.landing-access__form { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; width: 100%; }
.landing-access__input {
	height: 50px; width: min(447px, 100%); border: 0; border-radius: 30px;
	background: rgba(217, 217, 217, 0.75); backdrop-filter: blur(4px);
	padding: 0 50px; color: var(--black);
	font-family: var(--font-ui); font-weight: 500; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
}
.landing-access__input::placeholder { color: var(--black); opacity: 1; }
.landing-access__input:focus { outline: 2px solid var(--olive); }
.landing-access__submit { color: var(--white); align-self: flex-start; margin-top: 6px; }

@media (max-width: 640px) {
	.landing-tools__grid { grid-template-columns: 1fr; }
	.tool-card h3, .tool-card p { min-height: 0; }
}
@media (max-width: 960px) {
	.landing-access { border-radius: 28px; }
}

/* The cream CTA band closes the same stack. Landing-only: elsewhere it follows
   white content, where its rounded corners reveal white either way and pulling
   it up would just eat that page's bottom spacing. Here it covers the access
   band's bottom corners, which otherwise notch white against the photo. */
.page-landing .cta-band { margin-top: calc(-1 * var(--band-overlap)); }