:root { --about-red: #ed1019; --about-ink: #101114; --about-gray: #626872; --about-line: #dcdde0; --about-dark: #1c1e22; }
* { box-sizing: border-box; }
.about-page { color: var(--about-ink); background: #fff; }
.about-page .site-header { min-height: 94px; grid-template-columns: minmax(310px, 1.15fr) auto minmax(215px, .8fr); padding-inline: clamp(24px, 3vw, 58px); }
.about-page .brand__logo { width: 72px; height: 72px; }
.about-page .main-nav { gap: clamp(24px, 3vw, 48px); }
.about-page .main-nav a { padding-block: 36px 31px; }
.about-page .main-nav a.is-active::after { left: 0; right: 0; }
.about-shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.about-eyebrow { margin: 0; color: var(--about-red); font-size: 14px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.about-button { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; padding: 0 32px; font-size: 15px; font-weight: 800; text-transform: uppercase; }
.about-button--red { color: #fff; background: var(--about-red); }
.about-button--outline { min-width: 280px; color: #fff; border: 1px solid #fff; }

.about-hero { position: relative; min-height: 620px; overflow: hidden; }
.about-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 25%, rgba(255,255,255,.84) 43%, rgba(255,255,255,.1) 64%, transparent 78%); }
.about-hero__inner { position: relative; min-height: 620px; display: flex; align-items: center; }
.about-hero__content { width: min(555px, 50%); padding-block: 64px; }
.about-hero h1 { max-width: 650px; margin: 28px 0 27px; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: clamp(48px, 4.25vw, 67px); font-weight: 800; line-height: 1.04; letter-spacing: 0; text-transform: uppercase; }
.about-hero__content > p:not(.about-eyebrow) { max-width: 530px; margin: 0 0 34px; color: #292d32; font-size: 18px; line-height: 1.65; }

.about-breadcrumbs { border-bottom: 1px solid var(--about-line); }
.about-breadcrumbs > div { min-height: 56px; display: flex; align-items: center; gap: 13px; color: #454950; font-size: 13px; }
.about-breadcrumbs svg { width: 15px; height: 15px; }
.about-breadcrumbs > div > svg { width: 12px; color: #969a9f; }

.about-company { padding: 66px 0 62px; }
.about-company__grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); }
.about-company__copy { padding-right: clamp(48px, 6vw, 92px); }
.about-company h2, .about-details h2 { margin: 0; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: clamp(31px, 3vw, 44px); font-weight: 800; line-height: 1.12; text-transform: uppercase; }
.about-company__copy p { max-width: 545px; margin: 28px 0 0; color: #30343a; font-size: 16px; line-height: 1.58; }
.about-company__facts { padding-left: clamp(38px, 5vw, 72px); border-left: 1px solid var(--about-line); }
.about-company__facts article { min-height: 116px; display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 28px; padding: 20px 0; }
.about-company__facts article + article { border-top: 1px solid var(--about-line); }
.about-company__facts svg { width: 52px; height: 52px; color: var(--about-red); stroke-width: 1.3; }
.about-company__facts h3 { margin: 0 0 8px; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: 21px; line-height: 1.18; text-transform: uppercase; }
.about-company__facts p { margin: 0; color: #4d525a; font-size: 14px; line-height: 1.45; }

.about-principles { padding: 35px 0 42px; color: #fff; background: radial-gradient(circle at 50% 0, #292c31, var(--about-dark) 64%); }
.about-principles h2 { margin: 0 0 30px; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: 34px; text-align: center; text-transform: uppercase; }
.about-principles__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.about-principles article { min-height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; text-align: center; }
.about-principles article + article { border-left: 1px solid rgba(255,255,255,.23); }
.about-principles span { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 18px; }
.about-principles svg { width: 58px; height: 58px; color: #fff; stroke-width: 1.35; }
.about-principles article:nth-child(odd) svg { color: var(--about-red); }
.about-principles h3 { margin: 0; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: 19px; text-transform: uppercase; }

.about-details { padding: 42px 0 0; }
.about-details h2 { margin-bottom: 24px; font-size: 34px; }
.about-details__table { margin: 0; border-top: 1px solid var(--about-line); }
.about-details__table > div { min-height: 42px; display: grid; grid-template-columns: 42% 58%; border-bottom: 1px solid var(--about-line); }
.about-details dt, .about-details dd { display: flex; align-items: center; margin: 0; padding: 9px 22px; font-size: 15px; line-height: 1.35; }
.about-details dd { border-left: 1px solid var(--about-line); }
.about-details__contacts { min-height: 94px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.about-details__contacts a { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--about-ink); font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: 25px; font-weight: 800; }
.about-details__contacts a + a { border-left: 1px solid var(--about-line); }
.about-details__contacts svg { width: 25px; color: var(--about-red); }

.about-cta { color: #fff; background: var(--about-red); }
.about-cta__inner { min-height: 92px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 24px; }
.about-cta__inner > svg { width: 48px; height: 48px; stroke-width: 1.35; }
.about-cta h2 { margin: 0; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: clamp(25px, 2.4vw, 36px); text-transform: uppercase; }

.about-footer { color: #e9eaec; background: #191b1f; }
.about-footer__grid { display: grid; grid-template-columns: 1.25fr .7fr 1fr; gap: 80px; padding-block: 42px 34px; }
.about-footer__brand { display: grid; grid-template-columns: 96px 1fr; align-items: start; gap: 24px; }
.about-footer__brand img { width: 96px; height: 96px; object-fit: contain; }
.about-footer__brand strong { font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: 23px; line-height: 1.2; text-transform: uppercase; }
.about-footer__brand p, .about-footer__contacts p { color: #aeb2b9; font-size: 13px; line-height: 1.5; }
.about-footer h2 { margin: 0 0 17px; color: #fff; font-size: 14px; text-transform: uppercase; }
.about-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.about-footer nav a, .about-footer__contacts a { color: #c6c9ce; font-size: 13px; }
.about-footer__contacts a, .about-footer__contacts p { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; }
.about-footer__contacts svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--about-red); }
.about-footer__bottom { min-height: 60px; display: flex; align-items: center; border-top: 1px solid #44474c; color: #9da1a8; font-size: 12px; }

@media (max-width: 1100px) {
  .about-page .site-header { grid-template-columns: minmax(270px, 1fr) auto minmax(190px, .7fr); gap: 16px; padding-inline: 24px; }
  .about-page .main-nav { gap: 20px; }
  .about-hero, .about-hero__inner { min-height: 540px; }
  .about-hero__content { width: 55%; }
  .about-hero h1 { font-size: 48px; }
  .about-company__copy { padding-right: 42px; }
  .about-company__facts { padding-left: 38px; }
  .about-footer__grid { gap: 42px; }
}

@media (max-width: 900px) {
  .about-page .site-header { min-height: 80px; }
  .about-shell { width: min(100% - 40px, 740px); }
  .about-hero, .about-hero__inner { min-height: 500px; }
  .about-hero__image { object-position: 61% center; }
  .about-hero__shade { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 37%, rgba(255,255,255,.68) 58%, transparent 84%); }
  .about-hero__content { width: 58%; }
  .about-hero h1 { font-size: 41px; }
  .about-hero__content > p:not(.about-eyebrow) { font-size: 16px; }
  .about-company__grid { grid-template-columns: 1fr; }
  .about-company__copy { padding-right: 0; }
  .about-company__copy p { max-width: 680px; }
  .about-company__facts { margin-top: 42px; padding-left: 0; border-top: 1px solid var(--about-line); border-left: 0; }
  .about-principles__grid { grid-template-columns: repeat(2, 1fr); }
  .about-principles article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.23); }
  .about-principles article:nth-child(4) { border-top: 1px solid rgba(255,255,255,.23); }
  .about-footer__grid { grid-template-columns: 1.15fr .7fr 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  .about-shell { width: calc(100% - 32px); }
  .about-hero { min-height: 690px; background: #fff; }
  .about-hero__inner { min-height: 690px; align-items: flex-start; }
  .about-hero__image { inset: auto 0 0; height: 330px; object-position: 68% center; }
  .about-hero__shade { background: linear-gradient(180deg, #fff 0%, #fff 49%, rgba(255,255,255,.95) 58%, rgba(255,255,255,.18) 72%, transparent 86%); }
  .about-hero__content { width: 100%; padding: 38px 0 0; }
  .about-hero h1 { margin-block: 20px; font-size: clamp(35px, 9.4vw, 44px); }
  .about-hero__content > p:not(.about-eyebrow) { max-width: 590px; margin-bottom: 24px; font-size: 15px; line-height: 1.52; }
  .about-button { min-height: 52px; padding-inline: 23px; font-size: 13px; }
  .about-breadcrumbs > div { min-height: 50px; }
  .about-company { padding-block: 44px; }
  .about-company h2 { font-size: 31px; }
  .about-company__copy p { margin-top: 20px; font-size: 15px; }
  .about-company__facts { margin-top: 32px; }
  .about-company__facts article { grid-template-columns: 58px 1fr; gap: 18px; }
  .about-company__facts svg { width: 42px; height: 42px; }
  .about-company__facts h3 { font-size: 18px; }
  .about-details { padding-top: 36px; }
  .about-details h2 { font-size: 29px; }
  .about-details__table > div { grid-template-columns: 38% 62%; }
  .about-details dt, .about-details dd { padding-inline: 12px; font-size: 13px; overflow-wrap: anywhere; }
  .about-details__contacts { min-height: 110px; }
  .about-details__contacts a { gap: 10px; font-size: 18px; }
  .about-cta__inner { min-height: 120px; grid-template-columns: 44px 1fr; gap: 8px 14px; padding-block: 18px; }
  .about-cta__inner > svg { width: 38px; height: 38px; }
  .about-cta h2 { font-size: 24px; }
  .about-button--outline { min-width: 0; grid-column: 1 / -1; width: 100%; }
  .about-footer__grid { grid-template-columns: 1fr 1fr; }
  .about-footer__contacts { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .about-hero, .about-hero__inner { min-height: 660px; }
  .about-hero__image { height: 285px; object-position: 64% center; }
  .about-hero h1 { font-size: 35px; }
  .about-principles { padding-block: 32px; }
  .about-principles h2 { font-size: 28px; }
  .about-principles article { min-height: 132px; padding-inline: 10px; }
  .about-principles svg { width: 48px; height: 48px; }
  .about-principles h3 { font-size: 15px; }
  .about-details__table > div { grid-template-columns: 1fr; padding-block: 8px; }
  .about-details dt, .about-details dd { padding: 3px 0; }
  .about-details dt { color: #777c83; font-size: 12px; }
  .about-details dd { border-left: 0; font-size: 14px; }
  .about-details__contacts { grid-template-columns: 1fr; padding-block: 10px; }
  .about-details__contacts a { min-height: 54px; justify-content: flex-start; }
  .about-details__contacts a + a { border-top: 1px solid var(--about-line); border-left: 0; }
  .about-footer__grid { grid-template-columns: 1fr; }
  .about-footer__contacts { grid-column: auto; }
}