:root {
--mf-shell: 1180px;
--mf-measure: 780px;
--mf-gap: clamp(56px, 5vw, 76px);
}
.mf-shell {
max-width: var(--mf-shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
.mf-hero {
padding: calc(var(--topbar-h) + clamp(64px, 10vh, 132px)) 0 0;
background: var(--bg);
color: var(--fg);
}
.mf-hero .eyebrow {
margin-bottom: clamp(22px, 3vw, 34px);
}
.mf-hero h1 {
max-width: 17em;
margin-bottom: clamp(20px, 2.4vw, 32px);
}
.mf-hero-mission {
font-size: clamp(23px, 2.5vw, 33px);
line-height: 1.14;
max-width: 26em;
margin-bottom: clamp(30px, 3.6vw, 46px);
}
.mf-hero-lines {
padding-top: clamp(22px, 2.6vw, 32px);
border-top: 1px solid var(--line-strong);
}
body.isn .mf-rule {
border: 0;
border-top: 1px solid var(--i-line);
margin: var(--mf-gap) 0 0;
max-width: var(--mf-measure);
}
.mf-body {
padding: var(--mf-gap) 0 clamp(72px, 8vw, 104px);
background: var(--bg);
color: var(--fg);
}
.mf-move + .mf-move {
margin-top: var(--mf-gap);
}
.mf-move {
display: grid;
gap: clamp(16px, 1.4vw, 20px);
max-width: var(--mf-measure);
scroll-margin-top: calc(var(--topbar-h) + 40px);
}
.mf-p {
font-size: clamp(17px, 1.35vw, 19.5px);
line-height: 1.65;
letter-spacing: -0.003em;
color: var(--fg);
max-width: var(--mf-measure);
}
body.isn .mf-p,
body.isn .mf-lines {
font-size: clamp(18px, 1.42vw, 20.5px);
}
.mf-lines {
display: grid;
gap: 8px;
max-width: var(--mf-measure);
font-size: clamp(17px, 1.35vw, 19.5px);
line-height: 1.45;
color: var(--fg);
}
.mf-line {
display: block;
}
.mf-lines[data-tone='contrast'],
.mf-lines[data-tone='crescendo'] {
gap: 9px;
font-size: clamp(19px, 1.8vw, 24px);
font-weight: 500;
line-height: 1.26;
letter-spacing: -0.014em;
}
.mf-lines[data-tone='contrast'] .mf-line:not(:last-child) {
color: var(--fg-sub);
}
.mf-statement {
font-family: var(--font-display);
font-size: clamp(23px, 2.4vw, 32px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.02em;
max-width: 22em;
text-wrap: balance;
}
.mf-statement[data-tone='turn'] {
font-size: clamp(26px, 2.9vw, 38px);
max-width: 18em;
}
.mf-statement[data-tone='prominent'] {
font-size: clamp(25px, 2.7vw, 36px);
max-width: 20em;
}
body.isn .isn-section--final .isn-shell,
body.isn .isn-foot .isn-shell {
max-width: var(--mf-shell);
}
.footer {
padding-inline: 0;
}
.footer .shell {
max-width: var(--mf-shell);
padding-inline: var(--gutter);
}
.mf-cta h2 {
max-width: 20em;
margin-bottom: 22px;
}
.mf-cta-body {
font-size: var(--t-lead);
line-height: 1.55;
color: var(--fg-sub);
max-width: 30em;
margin-bottom: 34px;
}
.mf-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
body.isn {
--mf-measure: 840px;
}
body.isn .mf-hero h1 {
margin-bottom: clamp(26px, 3.2vw, 44px);
}
body.isn .mf-hero-intro {
display: grid;
gap: clamp(14px, 1.3vw, 18px);
max-width: 34em;
}
body.isn .mf-hero-intro p {
font-size: clamp(16.5px, 1.3vw, 19px);
line-height: 1.6;
letter-spacing: -0.003em;
color: var(--fg);
}
body.isn .mf-lines {
gap: 0.85em;
}
body.isn .mf-move--act {
border-top: 1px solid var(--i-line);
padding-top: clamp(30px, 3.4vw, 44px);
}
@media (max-width: 720px) {
:root {
--mf-gap: clamp(44px, 8vw, 56px);
}
.mf-hero {
padding-top: calc(var(--topbar-h) + 56px);
}
.mf-hero-mission,
.mf-statement,
.mf-statement[data-tone='turn'],
.mf-statement[data-tone='prominent'] {
max-width: none;
}
}