.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);}/* 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);}
}