.EForm {max-width: var(--e-measure);}
.EForm .EFormRow {display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 8px;}
.EForm label {display: block; padding: 20px 0 0; background: none; border: 0; border-bottom: 1px solid var(--e-hairline); border-radius: 0; cursor: text; transition: border-color 160ms;}
.EForm label > span, .EForm label > div {display: block; padding: 0 0 6px; font-family: var(--michroma); font-size: 12px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--font-color) 55%, transparent); transition: color 160ms;}
.EForm input, .EForm textarea {display: block; width: 100%; height: auto; padding: 0 0 14px; background: none; border: 0; outline: none; font-family: var(--raleway); font-size: 18px; line-height: 1.4; color: var(--font-color);}
.EForm textarea {min-height: 92px; resize: vertical;}
.EForm label:focus-within {border-color: var(--highlight-color);}
.EForm label:focus-within > span, .EForm label:focus-within > div {color: var(--highlight-color);}
.EFormFull {grid-column: 1 / -1;}
.EForm button, .EForm .Button {margin-top: 32px; min-width: 0; padding: 14px 36px; border-radius: 999px; border: 1px solid var(--highlight-color); background: color-mix(in srgb, var(--highlight-color) 14%, transparent); box-shadow: none; font-family: var(--michroma); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--highlight-color); cursor: pointer; transition: background-color 180ms, border-color 180ms;}
.EForm button:hover, .EForm .Button:hover {background: color-mix(in srgb, var(--highlight-color) 26%, transparent); border-color: var(--highlight-color); box-shadow: none; color: var(--highlight-color);}

@media (max-width: 640px) {
	.EForm .EFormRow {grid-template-columns: 1fr;}
}

.InquirySection {border-top: 1px solid var(--e-hairline, color-mix(in srgb, var(--font-color) 16%, transparent)); padding-top: 72px;}
.InquirySection .SignUpHeading {font-family: var(--raleway); font-weight: 800; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 18px; color: var(--font-color);}
.InquirySection .SignUpHeading .HighlightColor {color: var(--highlight-color);}
.InquirySection .SignUpSubheading {font-family: var(--raleway); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 24px 0 8px; color: var(--font-color);}
.InquirySection .SignUpText {font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--font-color); max-width: var(--e-measure, 720px); margin: 0 0 8px;}
.InquirySection .EForm {margin-top: 22px;}
.InquirySection .EForm .SignUpText {margin: 20px 0 0;}
.InquirySection .EFormMsg {display: block;}/* QuickContact - editorial contact block: hairline two-column grid (form | info), underline fields,
   michroma labels, pill submit. Used on Contact, Join and (scoped tighter) the homepage. Shared, so
   it lives in Design. Tokens come from Editorial.css (:root), with light-mode firming below. */

.QuickContact {max-width: none; margin: 0;}
.QuickContact h2 {font-family: var(--raleway); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--font-color);}

.QuickContactBoxes {display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; margin-top: 20px; align-items: stretch; border-top: 1px solid var(--e-hairline); border-left: 1px solid var(--e-hairline);}

.QuickContact .FormBox {padding: 40px clamp(24px, 3vw, 44px) 44px; border-right: 1px solid var(--e-hairline); border-bottom: 1px solid var(--e-hairline);}
.QuickContact .FormBox .Text {display: none;}
.QuickContact .FormBox > p {margin: 0 0 20px; max-width: 46ch; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--font-color);}

.QuickContactForm label {display: block; width: auto; height: auto; margin: 0; padding: 20px 0 0; background: none; border: 0; border-bottom: 1px solid var(--e-hairline); border-radius: 0; cursor: text; transition: border-color 160ms;}
.QuickContactForm label + label {margin-top: 0;}
.QuickContactForm label:has(textarea) {height: auto;}
.QuickContactForm label div {display: block; flex: none; padding: 0 0 6px; font-family: var(--michroma); font-size: 12px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in srgb, var(--font-color) 55%, transparent); transition: color 160ms;}
.QuickContactForm input, .QuickContactForm textarea {display: block; width: 100%; height: auto; padding: 0 0 14px; background: none; outline: none; border: 0; font-family: var(--raleway); font-size: 18px; line-height: 1.4; color: var(--font-color);}
.QuickContactForm textarea {min-height: 92px; resize: vertical;}
.QuickContactForm label:focus-within {border-color: var(--highlight-color);}
.QuickContactForm label:focus-within div {color: var(--highlight-color);}

.QuickContact .ButtonBox {text-align: left; padding-top: 32px;}
.QuickContact .ButtonBox button {min-width: 0; padding: 14px 36px; border-radius: 999px; border: 1px solid var(--highlight-color); background: color-mix(in srgb, var(--highlight-color) 14%, transparent); box-shadow: none; font-family: var(--michroma); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--highlight-color); cursor: pointer; transition: background-color 180ms, border-color 180ms;}
.QuickContact .ButtonBox button:hover {background: color-mix(in srgb, var(--highlight-color) 26%, transparent); border-color: var(--highlight-color); box-shadow: none; color: var(--highlight-color);}
.QuickContact .ButtonBox button:active {box-shadow: none;}

.QuickContact .InfoBoxes {display: flex; flex-direction: column; gap: 0; padding: 0; height: 100%; background: var(--e-soft); border-right: 1px solid var(--e-hairline); border-bottom: 1px solid var(--e-hairline);}
.QuickContact .InfoBox {min-width: 0; flex: 1; padding: 34px clamp(24px, 2.4vw, 40px); background: none; border: 0; border-radius: 0; font-size: 17px;}
.QuickContact .InfoBox + .InfoBox {border-top: 1px solid var(--e-hairline);}
.QuickContact .InfoBox .Heading {margin-bottom: 16px; font-family: var(--michroma); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--highlight-color);}
.QuickContact .InfoBox a {display: block; line-height: 1.7; color: var(--font-color);}
.QuickContact .InfoBox a:hover {color: var(--highlight-color); text-decoration: none;}
.QuickContact .InfoBox strong {font-weight: 700;}

@media (max-width: 860px) {
	.QuickContactBoxes {grid-template-columns: 1fr;}
	.QuickContact .FormBox {border-right: 1px solid var(--e-hairline);}
}

@media (prefers-color-scheme: light) {
	.QuickContact {--e-hairline: color-mix(in srgb, var(--font-color) 24%, transparent); --e-soft: color-mix(in srgb, var(--font-color) 5%, transparent);}
}/* Site footer - editorial: hairline top rule, michroma column headings, understated links. On every
   page, so it stays in Design. */
#Footer {margin-top: 120px; line-height: 160%; padding-top: 60px; border-top: 1px solid var(--e-hairline);}
#Footer > div {display: flex; align-items: start; flex-wrap: wrap; gap: 40px;}
#Footer > div > div {flex: 1; min-width: 200px;}

#Footer .Legal {flex: 0 0 100%; display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0.5; margin-top: 80px; font-family: var(--michroma); font-size: 12px; letter-spacing: 0.08em;}
#Footer .Legal nav {display: flex; gap: 10px;}

#Footer .Heading {font-family: var(--michroma); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--highlight-color); margin-bottom: 18px;}

#Footer .Explore ul {list-style: none; margin: 0; padding: 0;}
#Footer .Explore a {display: inline-block; padding: 5px 0;}

#Footer .LinkV {display: flex; align-items: center; justify-content: left; font-family: Syncopate, var(--raleway); gap: 20px; font-size: 22px; letter-spacing: 0.4em; font-weight: bold; text-decoration: none; margin-bottom: 40px;}
#Footer .LinkV img {width: 62px; height: auto;}

#Footer .Langs {display: flex; align-items: center; justify-content: left; flex-wrap: wrap; gap: 5px 10px; text-transform: uppercase; margin-top: 40px;}
#Footer .LangsH {flex: 0 0 100%; text-transform: none; font-weight: 500; opacity: 0.5; font-size: smaller; letter-spacing: 0.5px;}

#Footer a[href*="mailto"], #Footer a[href*="tel"] {display: block; width: max-content; padding: 5px 0;}
#Footer address {display: block; font-style: normal; margin-top: 25px;}

#Footer a {position: relative;}
#Footer a::after {display: block; content: ''; width: 0; height: 1px; background: var(--font-color); transition: width 0.1s; position: absolute; bottom: 0;}
#Footer a:hover::after {width: 100%;}
.FAQList {margin-top: 44px;}
.FAQObj {max-width: var(--e-measure);}
.FAQObj + .FAQObj {margin-top: 40px;}
.FAQObj h3 {font-family: var(--raleway); font-weight: 700; font-size: 21px; line-height: 1.3; margin: 0 0 12px; color: var(--font-color);}
.FAQObj h3::before {content: "\201C"; color: var(--highlight-color);}
.FAQObj h3::after {content: "\201D"; color: var(--highlight-color);}
.FAQObj p {font-size: 17px; line-height: 1.7; color: var(--font-color); margin: 0;}
.FAQObj p a {color: var(--highlight-color);}/* Article detail - below-the-fold prose, footer share pills and newsletter (deferred). */

.AEBody {margin-top: 60px; box-sizing: border-box;}
.AEProse {max-width: var(--ae-measure);}
.AEProse > :is(p, ul, ol, h2, h3, h4, blockquote) {max-width: var(--ae-measure);}
.AEProse :is(p, ul, ol) {font-size: 19px; line-height: 1.72; margin-bottom: 1.15em;}
.AEProse h2 {font-family: var(--raleway); font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.01em; margin: 1.6em 0 0.5em;}
.AEProse h3 {font-family: var(--raleway); font-weight: 700; font-size: 22px; line-height: 1.25; margin: 1.4em 0 0.4em;}
.AEProse blockquote {border-left: 3px solid var(--highlight-color); margin: 1.6em 0; padding: 4px 0 4px 28px; font-weight: 500; font-style: normal;}
.AEProse a {color: var(--highlight-color);}
/* data-heavy tables break past the reading measure, bounded to the body's visible width */
.AEProse {--ae-table-max: 940px; --text-table-width: min(var(--ae-table-max), calc(100vw - 2 * var(--tn-pad, clamp(20px, 5vw, 64px))));}
.AEProse > table {font-size: 17px;}

.AEFoot {max-width: var(--ae-measure); margin: 72px 0 40px; padding-top: 30px; border-top: 1px solid var(--ae-hairline);}
.AEFootAuthor {margin: 0 0 30px; font-family: var(--michroma); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-align: right; color: color-mix(in srgb, var(--font-color) 55%, transparent);}
.AEFootAuthor .HighlightColor {color: var(--highlight-color);}
.AEShare {display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px;}
.AEShareLabel {font-family: var(--michroma); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--highlight-color);}
.AEShareLinks {display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;}
.AEShareLink {display: inline-flex; align-items: center; padding: 7px 16px; border: 1px solid var(--ae-hairline); border-radius: 999px; font-family: var(--michroma); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--font-color) 72%, transparent); text-decoration: none; transition: color 180ms, border-color 180ms, background-color 180ms;}
.AEShareLink:hover {color: var(--highlight-color); border-color: color-mix(in srgb, var(--highlight-color) 52%, transparent); background: color-mix(in srgb, var(--highlight-color) 12%, transparent);}

.AENewsletter {margin-top: 24px; margin-bottom: 120px; padding-top: 56px; border-top: 1px solid var(--ae-hairline);}

@media (max-width: 1024px) {
	.AEBody {margin-top: 44px;}
	.AEProse :is(p, ul, ol) {font-size: 18px;}
	.AENewsletter {margin-bottom: 84px; padding-top: 44px;}
}
/* Newsletter sign-up. Self-contained so it looks identical wherever it is dropped (HP, article,
   anywhere). Uses the global editorial primitives (.Eyebrow / .Lede / .EForm from Editorial.css) and
   adds only the container, heading and the "Weekly" proof pill. Loaded after the document (.late). */
.Newsletter {--e-hairline: color-mix(in srgb, var(--font-color) 16%, transparent); --e-measure: 720px; max-width: var(--e-measure);}
.Newsletter h2 {font-family: var(--raleway); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; font-size: clamp(28px, 4.4vw, 48px); margin-bottom: 26px;}
.Newsletter .HighlightColor {color: var(--highlight-color);}
.NewsletterProof {display: inline-flex; align-items: center; gap: 11px; margin: 28px 0 0; padding: 6px 18px 6px 7px; border: 1px solid var(--e-hairline); border-radius: 999px; background: var(--e-soft); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--font-color);}
.NewsletterProofTag {display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: #41D857; color: #111; font-weight: 700; white-space: nowrap;}
.Newsletter .NewsletterForm {margin-top: 30px;}
.Newsletter .ButtonBox {text-align: left; padding-top: 8px;}

/* The global light theme flattens --highlight-color to translucent grey; the newsletter identity is
   green, so restore a readable brand green wherever the component appears. */
@media (prefers-color-scheme: light) {
	body:has(.Newsletter) {--highlight-color: #128A38;}
	.Newsletter {--e-hairline: color-mix(in srgb, var(--font-color) 24%, transparent);}
}