/* Our studio — a story-led page in the studio's own language. */
.about-page { --abt-pad: max(28px, calc((100vw - 1220px) / 2)); --abt-navy: #153747; --abt-muted: #55707b; --abt-line: #17313f24; color-scheme: light; }
body.about-page { margin: 0; color: var(--abt-navy); background: #edf3f3; font-family: "Inter Tight", system-ui, sans-serif; }
.about-page :is(h1, h2, h3, p, dl, dd, blockquote, figure) { margin: 0; }
.about-page h2 { font: 500 clamp(34px, 4vw, 58px)/1.06 "Inter Tight", sans-serif; letter-spacing: -.045em; text-wrap: balance; }
.about-page em { color: #648a99; font-style: normal; }
.about-page main :focus-visible { outline: 2px solid #558ba0; outline-offset: 5px; }
.abt-eyebrow { margin-bottom: 22px !important; color: var(--abt-muted); font: 500 10.5px/1.6 "IBM Plex Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
.abt-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: inherit; font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.abt-link span { font-size: 19px; transition: transform 200ms ease; }
.abt-link:hover span { transform: translate(2px, -2px); }
.abt-link[href^="#"]:hover span { transform: translateY(3px); }
.abt-button { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 15px 24px; border-radius: 8px; color: #f2fbfd; background: #14323f; font-size: 15.5px; font-weight: 600; text-decoration: none; transition: background 200ms ease, transform 200ms ease; }
.abt-button:hover { background: #0e2734; transform: translateY(-2px); }

/* Hero */
.abt-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 40px 64px; padding: 168px var(--abt-pad) 92px; background: radial-gradient(ellipse at 82% 40%, #bcdde699, transparent 58%), #edf3f3; }
.abt-hero h1 { font: 500 clamp(50px, 6.2vw, 92px)/.98 "Inter Tight", sans-serif; letter-spacing: -.055em; }
.abt-hero__lede { max-width: 48ch; margin-top: 28px !important; color: var(--abt-muted); font-size: 18px; line-height: 1.62; }
.abt-hero__copy .abt-link { margin-top: 30px; }
.abt-card { position: relative; display: grid; gap: 22px; padding: 32px 30px 28px; border: 1px solid #b6d0d8; border-radius: 18px; background: #f9fcfcd9; box-shadow: 0 28px 54px -36px #17384966; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.abt-card__mark { color: #6fa8bb; font-size: 22px; line-height: 1; }
.abt-card dl { display: grid; gap: 16px; }
.abt-card dl > div { display: grid; gap: 5px; padding-bottom: 16px; border-bottom: 1px solid var(--abt-line); }
.abt-card dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.abt-card dt { color: var(--abt-muted); font: 500 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
.abt-card dd { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.abt-card__note { color: var(--abt-muted); font-size: 13px; line-height: 1.55; }

/* Story */
.abt-story { padding: 96px var(--abt-pad); background: #f8fbfb; border-top: 1px solid #ccdee2; }
.abt-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; }
.abt-story h2 { font-size: clamp(30px, 3.2vw, 44px); }
.abt-story__body { display: grid; gap: 18px; color: var(--abt-muted); font-size: 16.5px; line-height: 1.72; }
.abt-quote { margin-top: 64px !important; padding-top: 44px; border-top: 1px solid #ccdee2; }
.abt-quote p { max-width: 24ch; color: var(--abt-navy); font: 400 clamp(28px, 3.4vw, 46px)/1.16 "Iowan Old Style", "Baskerville", Georgia, serif; letter-spacing: -.03em; }

/* Values */
.abt-mission { padding: 96px var(--abt-pad); background: #14323f; color: #e9f5f9; }
.abt-mission .abt-eyebrow { color: #7fb4c7; }
.abt-mission__head h2 { max-width: 20ch; }
.abt-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid #38606f; }
.abt-values article { display: grid; align-content: start; gap: 12px; padding: 32px 28px 36px; border-right: 1px solid #38606f; }
.abt-values article:first-child { padding-left: 0; }
.abt-values article:last-child { padding-right: 0; border-right: 0; }
.abt-values b { color: #77b6cc; font: 500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .18em; }
.abt-values h3 { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.abt-values p { color: #a3c5d2; font-size: 14px; line-height: 1.6; }

/* Process */
.abt-process { padding: 96px var(--abt-pad); background: #edf3f3; }
.abt-process__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: 24px 64px; }
.abt-process__head .abt-eyebrow { grid-column: 1 / -1; }
.abt-process__head > p { color: var(--abt-muted); font-size: 15.5px; line-height: 1.65; }
.abt-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 52px 0 0; padding: 0; list-style: none; }
.abt-steps li { display: grid; align-content: start; gap: 11px; padding: 28px 24px 30px; border: 1px solid #c2d5da; border-radius: 14px; background: #fbfdfd; }
.abt-steps b { color: #6e97a6; font: 500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .18em; }
.abt-steps h3 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.abt-steps p { color: var(--abt-muted); font-size: 14px; line-height: 1.6; }

/* Work + proof */
.abt-proof { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 44px 72px; padding: 96px var(--abt-pad); background: #f8fbfb; border-top: 1px solid #ccdee2; }
.abt-proof__copy > p { max-width: 52ch; margin-top: 24px !important; color: var(--abt-muted); font-size: 16px; line-height: 1.68; }
.abt-proof__copy .abt-link { margin-top: 30px; }
.abt-testimonial { display: grid; gap: 20px; padding: 34px 32px; border: 1px solid #c2d5da; border-radius: 16px; background: #eef5f6; }
.abt-testimonial blockquote p { color: var(--abt-navy); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; letter-spacing: -.02em; }
.abt-testimonial figcaption { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--abt-line); }
.abt-testimonial strong { font-size: 15.5px; font-weight: 600; }
.abt-testimonial span { color: var(--abt-muted); font-size: 13px; }

/* Place + facts */
.abt-place { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; gap: 40px 72px; padding: 96px var(--abt-pad); background: #e6eff0; border-top: 1px solid #c3d6d9; }
.abt-place__copy > p { max-width: 54ch; margin-top: 24px !important; color: var(--abt-muted); font-size: 16px; line-height: 1.68; }
.abt-facts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #b9cfd4; }
.abt-facts li { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 20px 0; border-bottom: 1px solid #b9cfd4; }
.abt-facts span { color: var(--abt-muted); font: 500 10px/1.4 "IBM Plex Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
.abt-facts :is(a, b) { color: var(--abt-navy); font-size: 16.5px; font-weight: 500; text-decoration: none; }
.abt-facts a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Close */
.abt-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: 34px 64px; padding: 92px var(--abt-pad); background: #cce6eb; }
.abt-cta h2 { font-size: clamp(42px, 5vw, 74px); }
.abt-cta > div > p { max-width: 42ch; margin-top: 24px !important; color: #3f6472; font-size: 16px; line-height: 1.65; }
.abt-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; justify-self: start; }
.about-page .brand-footer { color: #eaf5f8; background: #102633; }

@media (max-width: 1100px) {
    .abt-hero { grid-template-columns: 1fr; padding-top: 140px; }
    .abt-card { max-width: 460px; }
    .abt-story__grid, .abt-process__head, .abt-proof, .abt-place, .abt-cta { grid-template-columns: 1fr; }
    .abt-values, .abt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abt-values article { border-bottom: 1px solid #38606f; }
    .abt-values article:nth-child(even) { border-right: 0; }
    .abt-values article:nth-child(odd) { padding-left: 0; }
    .abt-cta__actions { justify-self: start; }
}
@media (max-width: 740px) {
    .about-page { --abt-pad: 24px; }
    .abt-hero { padding: 118px var(--abt-pad) 62px; gap: 32px; }
    .abt-hero h1 { font-size: clamp(44px, 12.5vw, 62px); }
    .abt-hero__lede { font-size: 16px; margin-top: 22px !important; }
    .abt-story, .abt-mission, .abt-process, .abt-proof, .abt-place, .abt-cta { padding-block: 62px; }
    .abt-story__grid { gap: 22px; }
    .abt-story__body { font-size: 15.5px; }
    .abt-quote { margin-top: 44px !important; padding-top: 32px; }
    .abt-values, .abt-steps { grid-template-columns: 1fr; }
    .abt-values { margin-top: 36px; }
    .abt-values article, .abt-values article:first-child, .abt-values article:last-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid #38606f; }
    .abt-steps { margin-top: 32px; gap: 12px; }
    .abt-facts li { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
    .abt-testimonial { padding: 26px 24px; }
    .abt-cta__actions { width: 100%; }
    .about-page .brand-footer { padding-inline: var(--abt-pad); }
}
@media (prefers-reduced-motion: reduce) { .abt-link span, .abt-button { transition: none; } }