/* ---------- Legacy page template (templates/page-legacy.html) ---------- */
/* Generic fallback for old pre-migration Cornerstone/X-theme pages (raw
   x-section/x-row/x-col/x-text markup, zero matching CSS of its own). Visual
   language (fonts/colors/spacing) carried over from the Our Story page
   (our-story-page.css .pg-story-*). The x-* wrapper divs themselves are left
   entirely unstyled on purpose — they carry no visual meaning, only the real
   text-bearing elements inside them are targeted below. */

/* ---------- Hero (breadcrumb + eyebrow + H1, matches .pg-story-hero) ---------- */
.pg-legacy-hero { background: radial-gradient(130% 120% at 84% -10%, #16294C 0%, #0E1B3A 42%, #0A1430 100%); border-bottom: 1px solid #0A1430; color: #fff; position: relative; overflow: hidden; }
.pg-legacy-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 78%); -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 78%); pointer-events: none; }
.pg-legacy-hero-inner { max-width: 1240px; margin: 0 auto; padding: 74px 64px 70px; position: relative; }
.pg-legacy-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font: 500 12.5px/1 'Hanken Grotesk', sans-serif; color: #8FA0BE; }
.pg-legacy-breadcrumb a { color: #8FA0BE; text-decoration: none; }
.pg-legacy-breadcrumb a:hover { color: #fff; }
.pg-legacy-breadcrumb .sep { opacity: .5; }
.pg-legacy-breadcrumb .current { color: #fff; }
.pg-legacy-eyebrow-pill { font: 700 12.5px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .16em; color: #fff; margin-bottom: 24px; }
.pg-legacy-h1 { font: 700 52px/1.08 'Bricolage Grotesque', sans-serif; letter-spacing: -0.025em; margin: 0; max-width: 900px; color: #fff; text-wrap: pretty; }

/* ---------- Prose body (width matches .pg-story-section: 1240px, same side padding) ---------- */
.pg-legacy-body { max-width: 1240px; margin: 0 auto; padding: 64px 64px 96px; }

/* The legacy content's own embedded <h1> (always the first thing inside the
   raw markup, carrying this exact Cornerstone class) is hidden now that the
   hero above already shows the page title — avoids a visible duplicate.
   Scoped to the h1+class combination specifically, not a bare h1, so any
   future legacy page that *doesn't* use this class still gets a normal,
   visible, styled h1 via the rule below. */
.pg-legacy-body h1.x-text-content-text-primary { display: none; }

.pg-legacy-body h1, .pg-legacy-body h2, .pg-legacy-body h3, .pg-legacy-body h4, .pg-legacy-body h5, .pg-legacy-body h6,
.pg-legacy-body .x-text-content-text-primary { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #14161E !important; margin: 0 0 18px !important; text-wrap: pretty; }
.pg-legacy-body h1 { font-size: 42px !important; line-height: 1.12 !important; margin-bottom: 22px !important; }
.pg-legacy-body h2, .pg-legacy-body h2.x-text-content-text-primary { font-size: 30px !important; line-height: 1.18 !important; margin-top: 46px !important; }
.pg-legacy-body h3, .pg-legacy-body h3.x-text-content-text-primary { font-size: 23px !important; line-height: 1.25 !important; margin-top: 36px !important; }
.pg-legacy-body h4, .pg-legacy-body h5, .pg-legacy-body h6 { font-size: 18px !important; margin-top: 28px !important; }

.pg-legacy-body p,
.pg-legacy-body .x-content,
.pg-legacy-body .x-text-content-text:not(:has(h1, h2, h3, h4, h5, h6)) { font: 400 17px/1.75 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0 0 20px; max-width: 860px; }
.pg-legacy-body p:empty { display: none; }
.pg-legacy-body strong, .pg-legacy-body b { color: #14161E; font-weight: 700; }
.pg-legacy-body em, .pg-legacy-body i { font-style: italic; }
.pg-legacy-body a:not([class]) { color: #CB0E2A; text-decoration: underline; text-underline-offset: 2px; }
.pg-legacy-body a:not([class]):hover { color: #9E0A20; }

.pg-legacy-body ul, .pg-legacy-body ol { font: 400 17px/1.75 'Hanken Grotesk', sans-serif; color: #4D5260; margin: 0 0 20px; padding-left: 22px; max-width: 860px; }
.pg-legacy-body li { margin-bottom: 8px; }
.pg-legacy-body li::marker { color: #CB0E2A; }

.pg-legacy-body blockquote { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 3px solid #CB0E2A; font: 500 19px/1.55 'Bricolage Grotesque', sans-serif; color: #14161E; letter-spacing: -0.01em; }

.pg-legacy-body img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0 26px; display: block; }

.pg-legacy-body table { width: 100%; border-collapse: collapse; margin: 10px 0 26px; font: 400 15px/1.6 'Hanken Grotesk', sans-serif; }
.pg-legacy-body table th, .pg-legacy-body table td { border: 1px solid #ECEEF2; padding: 10px 14px; text-align: left; }
.pg-legacy-body table th { background: #F7F8FA; font-weight: 700; color: #14161E; }

.pg-legacy-body hr, .pg-legacy-body .x-line { border: none; border-top: 1px solid #E2E6EC; margin: 30px 0; }

/* Space consecutive legacy "row" blocks out so headings/paragraphs don't run together */
.pg-legacy-body .x-row { margin-bottom: 8px; }
.pg-legacy-body .x-section { margin-bottom: 6px; }

/* ---------- Closing CTA (same copy/pattern as every other page type) ---------- */
.pg-legacy-cta { position: relative; overflow: hidden; background: radial-gradient(120% 150% at 78% -10%, #E11D33 0%, #CB0E2A 46%, #9E0A20 100%); color: #fff; }
.pg-legacy-cta-glow { position: absolute; top: -130px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); border-radius: 50%; }
.pg-legacy-cta-inner { max-width: 1100px; margin: 0 auto; padding: 84px 64px; position: relative; text-align: center; }
.pg-legacy-cta-inner h2 { font: 700 44px/1.08 'Bricolage Grotesque', sans-serif !important; letter-spacing: -0.026em; margin: 0 auto 18px !important; max-width: 780px; color: #fff !important; }
.pg-legacy-cta-inner p { font: 400 18px/1.6 'Hanken Grotesk', sans-serif !important; color: #FCE3E7 !important; max-width: 620px; margin: 0 auto 38px !important; text-wrap: pretty; }
.pg-legacy-cta-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #CB0E2A; padding: 19px 40px; border-radius: 5px; font: 700 16px/1 'Hanken Grotesk', sans-serif; box-shadow: 0 18px 44px rgba(0,0,0,.26); transition: transform .16s ease; }
.pg-legacy-cta-btn:hover { transform: translateY(-3px); }

@media (max-width: 900px) {
	.pg-legacy-hero-inner { padding: 56px 40px 50px; }
	.pg-legacy-body { padding: 48px 40px 72px; }
}
@media (max-width: 600px) {
	.pg-legacy-hero-inner { padding: 40px 30px !important; }
	.pg-legacy-h1 { font-size: 34px !important; }
	.pg-legacy-body { padding: 40px 24px 60px; }
	.pg-legacy-body h1 { font-size: 30px !important; }
	.pg-legacy-body h2, .pg-legacy-body h2.x-text-content-text-primary { font-size: 25px !important; }
	.pg-legacy-cta-inner { padding: 60px 30px !important; }
	.pg-legacy-cta-inner h2 { font-size: 30px !important; }
}