body.company-page .brand-main { overflow-wrap: break-word; }body.company-page .brand-main h1, body.company-page .brand-main h2, body.company-page .brand-main p, body.company-page .brand-main figure, body.company-page .brand-main dl, body.company-page .brand-main dd { margin: 0; }body.company-page .brand-intro { padding-block-end: var(--screen-bottom); }body.company-page .brand-hero { position: relative; isolation: isolate; min-height: 440px; height: calc(100dvh - var(--header-height) - var(--screen-bottom)); margin-inline: var(--gutter); border-radius: 30px; overflow: clip; background: var(--ink); color: #fff; transform-origin: 50% 100%; animation: brand-depth-enter 1.1s cubic-bezier(.22,1,.36,1) both; }body.company-page .brand-slides, body.company-page .brand-slide, body.company-page .brand-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }body.company-page .brand-slide { object-fit: cover; object-position: 50% 48%; opacity: 0; transition: opacity 1000ms ease; }body.company-page .brand-slide.is-current { opacity: 1; }body.company-page .brand-hero-shade { pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / .68) 0%, rgb(0 0 0 / .38) 36%, transparent 76%), linear-gradient(0deg, rgb(0 0 0 / .7), transparent 34%); }body.company-page .brand-hero-copy { position: relative; z-index: 1; width: min(780px, 70%); padding: var(--content-inset); }body.company-page /* Exact hero heading scale from the approved homepage hero.css. */
.brand-hero-copy h1 { font-weight: 400; font-size: clamp(20px, min(2.35vw, 4.8dvh), 46px); letter-spacing: -.055em; line-height: 1.13; }body.company-page .brand-hero-copy p { max-width: 510px; margin-top: 28px; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.65; text-wrap: pretty; }body.company-page .brand-representative { position: absolute; z-index: 1; right: var(--content-inset); bottom: var(--content-inset); max-width: 450px; width: 34%; text-align: right; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; font-weight: 500; text-wrap: balance; }body.company-page .brand-section { margin-block-start: clamp(56px, 7vw, 120px); }body.company-page /* Section headings and paragraphs use the approved company.css scale. */
.brand-team-copy h2, body.company-page .brand-numbers h2 { font-size: clamp(30px, 2.75vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }body.company-page .brand-manifest { padding-block: clamp(16px, 2vw, 32px); scroll-margin-top: 32px; }body.company-page .brand-manifest-inner { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: calc(var(--gutter) + var(--content-inset)); }body.company-page /* A text-only manifesto: the site's existing medium heading scale. */
.brand-manifest h2 { max-width: 52ch; font-size: clamp(24px, 1.85vw, 34px); font-weight: 500; letter-spacing: -.035em; line-height: 1.4; text-wrap: pretty; }body.company-page .brand-manifest-story { max-width: 82ch; margin-top: 28px; }body.company-page .brand-manifest-story p, body.company-page .brand-manifest-ending { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.75; text-wrap: pretty; }body.company-page .brand-manifest-story p { color: #656565; }body.company-page .brand-manifest-story p + p { margin-top: 24px; }body.company-page .brand-manifest-ending { margin-top: 36px !important; padding-top: 28px; border-top: 1px solid #d5d5d5; }body.company-page .brand-manifest-ending strong { display: block; margin-top: 12px; color: var(--orange); font-size: clamp(24px, 1.85vw, 34px); font-weight: 500; line-height: 1.4; letter-spacing: -.035em; }body.company-page .brand-team { position: relative; scroll-margin-top: 24px; }body.company-page .brand-team-stage { position: sticky; top: 0; padding: var(--screen-bottom) var(--gutter); }body.company-page .brand-team-frame { position: relative; isolation: isolate; overflow: clip; border-radius: 30px; background: var(--ink); color: #fff; }body.company-page .brand-team-image { display: block; width: 100%; height: auto; }
@media (min-width: 1101px) and (min-height: 481px) {body.company-page .brand-team-image { height: min(calc(100dvh - 2 * var(--screen-bottom)), calc((100vw - 2 * var(--gutter)) * .6343333333)); object-fit: cover; object-position: 50% 65%; }
}body.company-page .brand-team-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(10 15 13 / .58), transparent 35%), linear-gradient(0deg, rgb(10 15 13 / .74), rgb(10 15 13 / .48) 24%, transparent 48%); }body.company-page .brand-team-copy { position: absolute; inset: 0; }body.company-page .brand-team-copy h2 { position: absolute; top: var(--content-inset); left: var(--content-inset); max-width: min(54%, 760px); }body.company-page .brand-team-intro { position: absolute; right: var(--content-inset); bottom: var(--content-inset); display: flex; flex-direction: column; align-items: flex-end; width: min(520px, 40%); }body.company-page .brand-team-intro p { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.65; text-wrap: pretty; }body.company-page .brand-team-intro p { width: 100%; }body.company-page .brand-team-intro p + p { margin-top: 16px; }body.company-page .brand-careers-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 54px; margin-top: 24px; padding: 16px 24px; border-radius: 14px; background: var(--orange); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.25; transition: background .2s; }body.company-page .brand-careers-link:hover { background: #ed5f14; }body.company-page .brand-careers-link svg { flex: 0 0 auto; transition: transform .25s; }body.company-page .brand-careers-link:hover svg { transform: translate(2px, -2px); }body.company-page /* Homepage service sequence: depth arrival, body.company-page shade, body.company-page then copy and CTA. */
.brand-team.team-motion { height: calc(var(--team-stage-height, 100dvh) + 130dvh); }body.company-page .team-motion .brand-team-frame { transform-origin: 50% 100%; transform: perspective(1200px) translate3d(0, var(--team-rise, 500px), var(--team-depth, -300px)) rotateX(var(--team-tilt, 5deg)) scale(var(--team-scale, .94)); opacity: var(--team-opacity, 0); }body.company-page .team-motion .brand-team-shade { opacity: 0; }body.company-page .team-motion .brand-team-copy, body.company-page .team-motion .brand-careers-link { opacity: 0; transform: translate3d(0, 20px, 0); }body.company-page .team-motion[data-motion-ready="true"] .brand-team-shade { transition: opacity .7s cubic-bezier(.22, 1, .36, 1); }body.company-page .team-motion[data-motion-ready="true"] .brand-team-copy, body.company-page .team-motion[data-motion-ready="true"] .brand-careers-link { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), background .2s; }body.company-page .team-motion[data-revealed="true"] .brand-team-shade { opacity: 1; }body.company-page .team-motion[data-revealed="true"] .brand-team-copy { opacity: 1; transform: none; transition-delay: .25s; }body.company-page .team-motion[data-revealed="true"] .brand-careers-link { opacity: 1; transform: none; transition-delay: .4s; }body.company-page .brand-numbers { margin-inline: var(--gutter); padding-block: clamp(40px, 5vw, 80px); border-radius: 30px; background: var(--paper); }body.company-page .brand-numbers-inner { max-width: 2200px; margin-inline: auto; padding-inline: var(--content-inset); }body.company-page .brand-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 48px); margin-top: clamp(32px, 4dvh, 48px) !important; }body.company-page /* One shared surface and the homepage company metric scale. */
.brand-figure { min-width: 0; padding-top: 24px; border-top: 1px solid #d5d5d5; }body.company-page .brand-figures dt { font-size: clamp(32px, 3vw, 58px); line-height: 1.1; font-weight: 500; letter-spacing: -.055em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }body.company-page .brand-figures dt span { display: inline; margin-left: .3em; font-size: .43em; letter-spacing: -.02em; }body.company-page .brand-figures dd { max-width: 28ch; margin-top: 16px !important; color: #656565; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.65; text-wrap: pretty; }body.company-page .brand-clients { margin-top: clamp(40px, 4vw, 64px); scroll-margin-top: 32px; }body.company-page .brand-clients .ending-heading { margin-bottom: 24px; }body.company-page .brand-clients .client-logos { padding-top: 0; gap: 12px 28px; }body.company-page .brand-clients .client-logos li { height: 54px; }body.company-page .brand-clients .client-logos img { max-height: 42px; }body.company-page .brand-projects { margin-top: clamp(40px, 4vw, 64px); scroll-margin-top: 32px; }body.company-page .brand-signature { margin-block: clamp(40px, 5vw, 80px) clamp(48px, 6vw, 96px); scroll-margin-top: 32px; }body.company-page .brand-signature-inner { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid #d5d5d5; }body.company-page .brand-signature-mark { display: block; width: 72px; height: auto; }body.company-page .brand-signature-copy h2 { font-size: clamp(30px, 2.75vw, 52px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; text-wrap: pretty; }body.company-page .brand-signature-copy p { max-width: 78ch; margin-top: 24px; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.65; color: #656565; text-wrap: pretty; }body.company-page .brand-signature-copy p + p { margin-top: 12px; }body.company-page .brand-signature-copy strong { color: var(--ink); font-weight: 500; }
@keyframes brand-depth-enter { from { opacity: 0; transform: perspective(1200px) translate3d(0, min(520px, 56dvh), -300px) rotateX(5deg) scale(.94); } to { opacity: 1; transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg) scale(1); } }
@media (max-width: 1100px) {body.company-page .brand-hero-copy { width: 82%; }body.company-page .brand-representative { width: 48%; }
}
@media (max-width: 1100px), (max-height: 480px) {body.company-page /* Keep the complete group visible when the photo is too short for all copy. */
  .brand-team-copy { position: static; display: block; padding: 24px var(--content-inset); }body.company-page .brand-team-copy h2 { position: absolute; top: 28px; left: var(--content-inset); max-width: calc(100% - 2 * var(--content-inset)); font-size: 30px; }body.company-page .brand-team-shade { bottom: auto; aspect-ratio: 3000 / 1903; background: linear-gradient(180deg, rgb(10 15 13 / .64), rgb(10 15 13 / .12) 58%, transparent); }body.company-page .brand-team-intro { position: static; width: auto; max-width: 62ch; margin-left: auto; }body.company-page .team-motion .brand-team-copy { transform: none; }
}
@media (max-width: 900px) {body.company-page .brand-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }body.company-page .brand-figures dt { font-size: clamp(34px, 6.5vw, 50px); }
}
@media (max-width: 720px) {body.company-page .brand-hero { border-radius: 22px; min-height: 500px; }body.company-page .brand-hero-copy { width: 100%; padding: 28px var(--content-inset); }body.company-page .brand-hero-copy h1 { font-size: clamp(18px, min(4.8vw, 4.8dvh), 32px); line-height: 1.16; }body.company-page .brand-hero-copy p { max-width: 460px; margin-top: 24px; font-size: 15px; }body.company-page .brand-slide { object-position: 52% 50%; }body.company-page .brand-hero-shade { background: linear-gradient(0deg, rgb(0 0 0 / .74), transparent 40%), linear-gradient(90deg, rgb(0 0 0 / .66), rgb(0 0 0 / .15)); }body.company-page .brand-representative { max-width: 300px; width: calc(100% - 2 * var(--content-inset)); right: var(--content-inset); bottom: 28px; font-size: 14px; }body.company-page .brand-section { margin-top: 56px; }body.company-page .brand-manifest { padding-block: 0; scroll-margin-top: 24px; }body.company-page .brand-manifest-story { margin-top: 24px; }body.company-page .brand-manifest-story p + p { margin-top: 20px; }body.company-page .brand-manifest-ending { margin-top: 28px !important; padding-top: 24px; }body.company-page .brand-team-frame { border-radius: 22px; }body.company-page .brand-team-copy h2 { top: 22px; font-size: 24px; }body.company-page .brand-numbers h2 { font-size: 30px; }body.company-page .brand-team-intro p { font-size: 15px; }body.company-page .brand-careers-link { padding-inline: 20px; font-size: 15px; min-height: 52px; }body.company-page .brand-numbers { padding-block: 32px; border-radius: 22px; }body.company-page .brand-figures { gap: 28px 20px; margin-top: 32px !important; }body.company-page .brand-figure { padding-top: 20px; }body.company-page .brand-clients .ending-heading { margin-bottom: 20px; }body.company-page .brand-clients .client-logos { gap: 10px 20px; }body.company-page .brand-clients .client-logos li { height: 44px; }body.company-page .brand-clients .client-logos img { max-height: 36px; }body.company-page .brand-signature { margin-block: 40px 56px; }body.company-page .brand-signature-inner { grid-template-columns: 1fr; gap: 24px; }body.company-page .brand-signature-mark { width: 56px; }body.company-page .brand-signature-copy h2 { font-size: 30px; }body.company-page .brand-signature-copy p { margin-top: 20px; }
}
@media (max-width: 600px) {body.company-page .brand-figures { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {body.company-page .brand-figures dt { font-size: clamp(29px, 8.5vw, 38px); }
}
@media (max-width: 380px) {body.company-page .brand-team-copy h2 { top: 16px; font-size: 22px; }
}
@media (max-height: 480px) and (min-width: 721px) {body.company-page .brand-hero-copy h1 { font-size: clamp(16px, min(2.35vw, 4.6dvh), 22px); }
}
@media (prefers-reduced-motion: reduce) {body.company-page .brand-hero { animation: none; }body.company-page .brand-team.team-motion { height: auto; }body.company-page .brand-team-stage { position: relative; }body.company-page .brand-team .brand-team-frame, body.company-page .brand-team .brand-team-copy, body.company-page .brand-team .brand-careers-link { transform: none !important; opacity: 1 !important; transition: none !important; }body.company-page .brand-team .brand-team-shade { opacity: 1 !important; transition: none !important; }
}