/* The company story uses the same paper, type, and fine rules as the portfolio. */
:root { --about-width: 1020px; --about-title: 1; --about-type: 16px; --about-space: 1; }
.about-shell { width: min(calc(100% - 10.8vw), var(--about-width)); margin-inline: auto; }
.about-hero { padding: calc(84px * var(--about-space)) 0 calc(92px * var(--about-space)); }
.about-eyebrow { font: 11px/1.5 var(--sans); letter-spacing: .075em; }
.about-hero h1 { margin: 27px 0 35px; font: calc(clamp(58px, 8vw, 112px) * var(--about-title))/1 var(--display-font); letter-spacing: -.045em; }
.about-intro { max-width: 710px; font: clamp(23px, 2.6vw, 35px)/1.35 var(--display-font); letter-spacing: -.018em; }
.about-belief { margin-top: 30px; font: 20px/1.5 var(--display-font); color: var(--muted); }
.about-section { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 52px; padding: calc(54px * var(--about-space)) 0 calc(62px * var(--about-space)); border-top: 1px solid var(--line); }
.about-section h2 { margin-top: 16px; font: clamp(32px, 3.2vw, 43px)/1.08 var(--display-font); letter-spacing: -.03em; }
.about-prose { min-width: 0; font: var(--about-type)/1.75 var(--sans); }
.about-prose > p + p { margin-top: 19px; }
.about-steps { margin: 32px 0; padding: 0; list-style: none; counter-reset: steps; }
.about-steps li { position: relative; padding: 17px 0 17px 36px; border-top: 1px solid var(--line); counter-increment: steps; }
.about-steps li::before { content: '0' counter(steps); position: absolute; top: 20px; left: 0; font: 10px/1.6 var(--sans); color: var(--muted); }
.about-steps h3 { font: 600 var(--about-type)/1.5 var(--sans); margin-bottom: 7px; }
.about-steps p { font-size: calc(var(--about-type) * .94); }
.about-link { display: inline-flex; gap: 20px; align-items: center; min-height: 44px; margin-top: 22px; font: 13px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 5px; }
.about-link span { transition: transform .2s; }
.about-link:hover span { transform: translateX(3px); }
.about-team { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.about-team h3 { font: 30px/1.2 var(--display-font); letter-spacing: -.02em; }
.about-team p { margin-top: 10px; font: 12px/1.5 var(--sans); color: var(--muted); }
.about-contact { padding-bottom: calc(80px * var(--about-space)); }
.about-email { display: inline-block; margin-top: 18px; min-height: 44px; font: clamp(25px, 3vw, 38px)/1.3 var(--display-font); letter-spacing: -.025em; text-decoration: underline; text-underline-offset: 6px; overflow-wrap: anywhere; }
.about-company-name { margin-top: 23px; font: 12px/1.5 var(--sans); color: var(--muted); }
[data-about-serif="on"] .about-prose { font-family: var(--display-font); font-size: calc(var(--about-type) * 1.15); }
@media(max-width: 760px) {
 .about-shell { width: calc(100% - 12vw); }
 .about-hero { padding: calc(54px * var(--about-space)) 0 calc(57px * var(--about-space)); }
 .about-hero h1 { font-size: calc(clamp(47px, 12vw, 78px) * var(--about-title)); margin: 23px 0 28px; }
 .about-intro { font-size: 25px; }
 .about-belief { font-size: 19px; }
 .about-section { grid-template-columns: 1fr; gap: 28px; padding: calc(37px * var(--about-space)) 0 calc(43px * var(--about-space)); }
 .about-section h2 { font-size: 34px; margin-top: 12px; }
 .about-section h2 br { display: none; }
 .about-prose { font-size: max(15px, calc(var(--about-type) * .94)); }
 .about-team { gap: 18px; }
 .about-team h3 { font-size: 28px; }
 .about-link { margin-top: 20px; }
}
@media print { .about-shell { width: 100%; } .about-hero { padding-top: 0; } .about-section { break-inside: avoid; } }