/* =============================================================================
   Corporate page (Claude Design Corporate.dc.html). Loaded on /corporate/ only.
   Shared pieces it reuses from theme.css: section head, buttons, stamp card, logo bar, the Home
   "how it works" steps, TestimonialCard, FAQ accordion. The quote card + form: assets/css/form.css.
   ============================================================================= */

.wsp-co-inner { max-width: var(--wp--custom--maxw--content); margin: 0 auto; }
.wsp-co-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.wsp-co-cover.is-pos-30 { object-position: 30% 50%; }
.wsp-co-btns { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---- Hero ----------------------------------------------------------------- */
.wsp-co-hero { padding-top: var(--s-20); padding-bottom: var(--s-24); }
.wsp-co-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); align-items: center; }
@media (min-width: 900px) { .wsp-co-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsp-co-hero .wsp-eyebrow { font-size: var(--fs-md); }
.wsp-co-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--h-1); line-height: 1.02;
	letter-spacing: var(--wp--custom--ls--hero); color: var(--c-navy); margin: 0 0 var(--s-6); text-wrap: balance;
}
.wsp-co-lede { font-size: var(--fs-body); line-height: 1.65; color: var(--c-body); max-width: var(--wp--custom--maxw--prose); margin: 0 0 var(--s-8); text-wrap: pretty; }
.wsp-co-hero-photo {
	position: relative; min-height: 460px; overflow: hidden;
	border: 3px solid var(--c-navy); box-shadow: var(--sh-hero); background: var(--c-sand);
}
.wsp-co-hero-photo .wsp-co-cover { position: absolute; inset: 0; }
.wsp-co-est { text-align: center; }
.wsp-co-est .wsp-stamp-label { margin: 0 0 var(--s-1); letter-spacing: var(--wp--custom--ls--button); }
@media (min-width: 641px) and (max-width: 899px) {
	.wsp-co-hero { padding: var(--s-16) var(--wp--custom--section--pad-x-tablet) var(--s-20); }
}
@media (max-width: 640px) {
	.wsp-co-hero { padding-top: var(--s-10); padding-bottom: var(--wp--custom--section--pad-y-mobile); }
}

/* ---- Outcomes ------------------------------------------------------------- */
/* 01 spans the row from 641; 02–05 are one column on a phone, 2 × 2 up to 1239, one row of four from wide (1240). */
.wsp-co-outcome-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 641px) { .wsp-co-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .wsp-co-outcome-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wsp-co-outcome {
	display: flex; flex-direction: column; background: var(--c-sand); border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--card);
	transition: transform var(--m-base) var(--e-std), box-shadow var(--m-base) var(--e-std);
}
.wsp-co-outcome:hover { transform: var(--lift-lg); box-shadow: var(--wp--custom--shadow--pink-9); }
.wsp-co-outcome-photo { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 3px solid var(--c-navy); }
.wsp-co-outcome-body { padding: var(--s-5) var(--s-5) var(--s-6); }
.wsp-co-outcome-num {
	display: inline-block; margin-bottom: var(--s-2); padding: calc(var(--s-1) / 2) var(--s-2);
	font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--tight); color: var(--c-pink-text); border: 1.5px solid var(--c-pink);
}
.wsp-co-outcome-text { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-body); line-height: 1.3; color: var(--c-navy); }
/* 01, the featured outcome: the same card, laid out from 641 px as two boxes side by side (photo | big number and
   text), spanning the row. On a phone it is just the first card, so it matches 02–05. */
@media (min-width: 641px) {
	.wsp-co-outcome.is-lead {
		grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6);
		background: none; border: 0; box-shadow: none;
	}
	.wsp-co-outcome.is-lead:hover { transform: none; box-shadow: none; }
	.wsp-co-outcome.is-lead .wsp-co-outcome-photo {
		position: relative; aspect-ratio: auto; min-height: 300px;
		background: var(--c-sand); border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--card);
	}
	.wsp-co-outcome.is-lead .wsp-co-outcome-photo .wsp-co-cover { position: absolute; inset: 0; }
	.wsp-co-outcome.is-lead .wsp-co-outcome-body {
		display: flex; flex-direction: column; justify-content: center; padding: var(--s-10);
		background: var(--c-sand); border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--card);
	}
	.wsp-co-outcome.is-lead .wsp-co-outcome-num {
		padding: 0; border: 0; margin-bottom: var(--s-4); letter-spacing: normal;
		font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1; color: var(--c-pink);
	}
	.wsp-co-outcome.is-lead .wsp-co-outcome-text { font-size: var(--fs-lg); line-height: 1.25; max-width: 420px; }
}

/* ---- How it works (Home's steps; content width; CTA to the quote form) ------ */
.wsp-co-how-cta { margin-top: var(--s-16); }

/* ---- Packages ------------------------------------------------------------- */
.wsp-co-packages-stack { display: flex; flex-direction: column; gap: var(--wp--custom--gap--grid); }
.wsp-co-packages-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12); align-items: center; margin-bottom: var(--s-3); }
.wsp-co-packages .wsp-eyebrow, .wsp-co-qeyebrow { font-size: var(--fs-md); }
.wsp-co-h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2-compact); line-height: 1.12; color: var(--c-navy); margin: 0 0 var(--s-4); }
.wsp-co-text { font-size: var(--fs-body); line-height: var(--wp--custom--lh--body); color: var(--c-muted); margin: 0; }
.wsp-co-packages-photo { position: relative; min-height: 280px; overflow: hidden; border: 3px solid var(--c-navy); box-shadow: var(--sh-hover-lg); }
.wsp-co-packages-photo .wsp-co-cover { position: absolute; inset: 0; }
.wsp-co-package-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--custom--gap--grid); }
@media (min-width: 900px) { .wsp-co-packages-intro, .wsp-co-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsp-co-package { background: var(--c-white); border: 3px solid var(--c-navy); box-shadow: var(--wp--custom--shadow--card); padding: var(--s-8); }
.wsp-co-package-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--wp--custom--lh--tight); color: var(--c-navy); margin: 0; }
.wsp-co-package-kicker { font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button); color: var(--c-pink-text); margin: var(--s-1) 0 var(--s-3); }
.wsp-co-package-text { font-size: var(--fs-button); line-height: 1.65; color: var(--c-body); margin: 0; }
.wsp-co-package.is-navy { background: var(--c-navy); color: var(--c-cream); box-shadow: var(--wp--preset--shadow--hover); }
.wsp-co-package.is-navy .wsp-co-package-title, .wsp-co-package.is-navy .wsp-co-package-text { color: var(--c-cream); }
.wsp-co-package.is-navy .wsp-co-package-kicker { color: var(--wp--custom--alpha--sand-80); }
.wsp-co-package.is-navy .wsp-co-package-text { max-width: var(--wp--custom--maxw--narrow); }
@media (max-width: 640px) { .wsp-co-package { padding: var(--s-6); } }

/* ---- Request a quote (teal band) ------------------------------------------ */
.wsp-co-quote { background-color: var(--c-teal); }
.wsp-co-qwrap { max-width: var(--wp--custom--maxw--content); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12); align-items: start; }
.wsp-co-qintro { color: var(--c-ink); min-width: 0; }
.wsp-co-qeyebrow {
	display: inline-block; font-family: var(--f-label); letter-spacing: var(--wp--custom--ls--label); text-transform: uppercase;
	border-bottom: 2px solid currentColor; padding-bottom: var(--s-1); margin-bottom: var(--s-3);
}
.wsp-co-qtitle { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--wp--custom--lh--heading); color: inherit; margin: 0 0 var(--s-4); }
.wsp-co-qtext { font-size: var(--fs-body); line-height: var(--wp--custom--lh--body); max-width: 440px; margin: 0; }
/* Side by side from desktop (900): intro left (sticky), the quote card right. Below wide the intro column is narrower,
   so the two-up form keeps room for its fields at 900. */
@media (min-width: 900px) {
	.wsp-co-qwrap { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: var(--s-12); }
	.wsp-co-qintro { position: sticky; top: calc(var(--s-24) + var(--s-5)); }
}
@media (min-width: 1240px) { .wsp-co-qwrap { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); } }
@media (max-width: 899px) { .wsp-co-qtext { max-width: var(--wp--custom--maxw--prose); } }

/* ---- FAQ ------------------------------------------------------------------ */
.wsp-co-faq-more { text-align: center; font-size: var(--fs-md); color: var(--c-muted); margin: var(--s-4) 0 0; }
.wsp-co-faq-more a { color: var(--c-pink-text); font-weight: 700; }
.wsp-co-faq-more a:hover { color: var(--c-navy); }

/* No partner strip between them (it renders only with real logos, G1): the white hero meets the white Outcomes section. */
.wsp-co-hero:has(+ .wsp-co-outcomes) { border-bottom: 3px dashed var(--c-navy); }