.about-page { --paper: #fff; --paper-bright: #fff; background: #fff; }
.about-page .main-nav a[aria-current="page"] { background: rgba(255,255,255,.1); color: var(--white); }

.about-page-hero { min-height: 40rem; position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--white); }
.about-page-hero > img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: about-hero-settle 1600ms var(--ease) both; }
.about-page-hero__overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.64) 48%,rgba(0,0,0,.2) 78%),linear-gradient(0deg,rgba(0,0,0,.88),transparent 55%); }
.about-page-hero__inner { min-height: 40rem; padding-top: 6.5rem; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(17rem,.55fr); align-items: center; gap: 5rem; }
.about-page-hero__copy { max-width: 48rem; }
.about-page-hero h1 { max-width: 47rem; font-size: 5rem; line-height: 1.05; }
.about-page-hero__copy > p:not(.overline) { max-width: 38rem; margin: 1.75rem 0 2rem; color: rgba(255,253,248,.78); font-size: .95625rem; line-height: 1.6; }
.about-page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.about-page-hero__address { max-width: 38rem; margin: 1.25rem 0 0; display: flex; align-items: flex-start; gap: .5rem; color: rgba(255,253,248,.72); font-size: .75rem; font-style: normal; line-height: 1.55; }
.about-page-hero__address svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; margin-top: .0625rem; color: var(--red-hot); }
.about-page-hero__facts { margin: 0; padding: 0; align-self: end; margin-bottom: 3rem; }
.about-page-hero__facts div { padding: 1rem 0; border-top: .0625rem solid rgba(255,255,255,.28); }
.about-page-hero__facts dt { color: rgba(255,253,248,.55); font-family: "DM Mono",monospace; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.about-page-hero__facts dd { margin: .25rem 0 0; font-size: .9375rem; font-weight: 700; }
@keyframes about-hero-settle { from { transform: scale(1.06); opacity: .7; } to { transform: scale(1.01); opacity: 1; } }

.about-metrics { padding: 1.5rem 0 1.75rem; background: var(--paper-bright); }
.about-metrics .metrics { margin-top: 0; }

.about-story { padding: 4.5rem 0 3rem; }
.about-story__grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3rem; }
.about-story__copy h2 { font-size: 3rem; line-height: 1.15; text-wrap: wrap; }
.about-story__copy > p:not(.overline) { max-width: 34rem; margin: 1.75rem 0 0; color: var(--ink-soft); font-size: .95625rem; line-height: 1.6; }
.about-story__images { min-height: 39rem; position: relative; }
.about-story__main-image { position: absolute; inset: 0 0 4rem 11%; margin: 0; overflow: hidden; border-radius: .5rem; background: var(--black); }
.about-story__main-image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 .0625rem rgba(255,255,255,.18); pointer-events: none; }
.about-story__main-image img,.about-story__detail-image img { width: 100%; height: 100%; object-fit: cover; }
.about-story__detail-image { width: 43%; height: 15rem; position: absolute; left: 0; bottom: 0; margin: 0; padding: .375rem; background: var(--paper); border-radius: .5rem; }
.about-story__detail-image img { border-radius: .25rem; }
.about-story__detail-image figcaption { width: 12.5rem; position: absolute; left: calc(100% + 1.25rem); bottom: 1rem; font-family: "DM Mono",monospace; font-size: .625rem; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }

.about-values { padding: 4.5rem 0; background: #fff; }
.about-values__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
.about-values__intro { grid-column: 1; grid-row: 1; text-align: center; }
.about-values__intro .overline { justify-content: center; }
.about-values__intro h2 { max-width: 30rem; margin-inline: auto; font-size: 3rem; line-height: 1.15; }
.about-values__intro-text { max-width: 34rem; margin: 1.5rem auto 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.6; }
.about-values__list { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(3,1fr); border-top: .0625rem solid rgba(10,10,10,.16); }
.about-values__item { min-height: 12rem; padding: 1.5rem 1.5rem 1.5rem 0; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; border-bottom: .0625rem solid rgba(10,10,10,.16); }
.about-values__item:not(:last-child) { margin-right: 1.5rem; padding-right: 1.5rem; border-right: .0625rem solid rgba(10,10,10,.16); }
.about-values__item > div { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: .75rem; text-align: center; }
.about-values__index { color: var(--red); font-family: "DM Mono",monospace; font-size: .625rem; letter-spacing: .1em; }
.about-values__item h3 { margin: 0; font-size: 1.375rem; }
.about-values__item p { max-width: 31rem; margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; text-align: center; }

.about-principles { position: relative; isolation: isolate; padding: 8rem 0; overflow: hidden; background: var(--black); color: var(--white); }
.about-principles::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(7,7,7,.82),rgba(7,7,7,.87)),url("../assets/logit-planta-blueprint.avif") center / cover; }
.about-principles > .container { position: relative; z-index: 1; }
.about-principles__head { display: grid; grid-template-columns: 1fr; align-items: start; gap: .75rem; }
.about-principles__head .overline { margin-bottom: 0; }
.about-principles__head h2 { max-width: 52rem; font-size: 3rem; line-height: 1.15; }
.about-principles__grid { margin-top: 5rem; display: grid; grid-template-columns: repeat(4,1fr); }
.about-principles__grid article { min-height: 15.5rem; padding: 2rem 1.5rem 2rem 0; display: flex; flex-direction: column; }
.about-principles__grid article:not(:first-child) { padding-left: 1.5rem; }
.about-principles__grid svg { width: 3rem; height: 3rem; align-self: flex-start; padding: .625rem; color: var(--red-hot); border: .0625rem solid rgba(255,255,255,.16); border-radius: .375rem; background: rgba(0,0,0,.68); }
.about-principles__grid h3 { margin: 1.25rem 0 .625rem; font-size: 1.125rem; }
.about-principles__grid p { margin: 0; color: rgba(255,253,248,.58); font-size: .85rem; line-height: 1.6; }

.about-location { padding: 0; scroll-margin-top: 7rem; }
.about-location__grid { min-height: 42rem; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.about-location__map { min-height: 100%; position: relative; overflow: hidden; background: #e5e8ea; }
.about-location__map iframe { width: 100%; height: 100%; position: absolute; inset: 0; border: 0; pointer-events: none; }
.about-location__map.is-map-active iframe { pointer-events: auto; }
.about-location__copy { max-width: none; padding: 6rem clamp(2rem,5vw,7rem); display: flex; flex-direction: column; justify-content: center; }
.about-location__copy h2 { font-size: 3rem; line-height: 1.15; }
.about-location__copy > p:not(.overline):not(.about-location__routes-title) { max-width: 45rem; margin: 1.75rem 0 0; color: var(--ink-soft); font-size: .95625rem; line-height: 1.6; }
.about-location__routes-title { margin: 1.5rem 0 0; color: var(--ink); font-size: 1.75rem; font-weight: 700; }
.about-location__actions { margin-top: .625rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.about-location__actions .button { min-height: 3rem; padding: .375rem 1.25rem; gap: .5625rem; white-space: nowrap; }
.about-location__actions .button img { width: 1.5rem; height: 1.5rem; object-fit: contain; }

.about-cta { position: relative; overflow: hidden; padding: 5rem 0; background: #141313; color: var(--white); }
.about-cta::before { content: "LOGIT"; position: absolute; right: -1rem; top: 50%; color: rgba(255,255,255,.025); font-size: clamp(9rem,20vw,20rem); font-weight: 800; letter-spacing: -.08em; line-height: .7; transform: translateY(-50%); pointer-events: none; }
.about-cta__inner { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.about-cta h2 { max-width: 43rem; font-size: 3rem; line-height: 1.15; }
.about-cta .button { flex: 0 0 auto; }

@media (max-width:67.5rem) {
  .about-page-hero h1 { font-size: 4rem; }
  .about-story__copy h2,.about-principles__head h2,.about-location__copy h2,.about-cta h2 { font-size: 2.4rem; }
  .about-page-hero__copy > p:not(.overline),.about-story__copy > p:not(.overline),.about-location__copy > p:not(.overline):not(.about-location__routes-title) { font-size: .85rem; }
  .about-page-hero__inner { grid-template-columns: 1fr 15rem; gap: 3rem; }
  .about-story__grid { gap: 2.5rem; }
  .about-values__grid { gap: 3rem; }
  .about-values__intro h2 { font-size: 2.4rem; }
  .about-principles__grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width:51.25rem) {
  .about-page-hero h1 { font-size: 3.25rem; }
  .about-page-hero,.about-page-hero__inner { min-height: 40rem; }
  .about-page-hero__inner { padding-top: 6.5rem; grid-template-columns: 1fr; align-content: center; gap: 2rem; }
  .about-page-hero__facts { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
  .about-story { padding: 4rem 0 3rem; }
  .about-story__grid,.about-principles__head,.about-location__grid { grid-template-columns: 1fr; }
  .about-story__images { min-height: 34rem; }
  .about-values { padding: 3rem 0; }
  .about-values__grid { gap: 2.5rem; }
  .about-values__intro,.about-values__list { grid-column: auto; grid-row: auto; }
  .about-values__intro { position: static; }
  .about-values__list { display: block; }
  .about-values__item:not(:last-child) { margin-right: 0; padding-right: 2rem; border-right: 0; }
  .about-principles { padding: 6rem 0; }
  .about-principles__head { gap: .75rem; }
  .about-location__grid { min-height: 0; }
  .about-location__map { min-height: 29rem; }
  .about-location__copy { padding: 4.5rem 1rem; }
  .about-cta__inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width:35rem) {
  .about-page-hero,.about-page-hero__inner { min-height: 39rem; }
  .about-page-hero__inner { padding-top: 6.25rem; }
  .about-page-hero h1 { font-size: 2.75rem; line-height: 1.08; }
  .about-story__copy h2,.about-principles__head h2,.about-location__copy h2,.about-cta h2 { font-size: 2.1rem; }
  .about-values__intro h2 { font-size: 2.1rem; }
  .about-page-hero__copy > p:not(.overline) { font-size: .85rem; }
  .about-page-hero__facts { grid-template-columns: 1fr; gap: 0; }
  .about-page-hero__facts div { padding: .65rem 0; }
  .about-page-hero__facts dd { font-size: .6875rem; }
  .about-story__images { min-height: 27rem; }
  .about-values__item { min-height: 0; display: grid; grid-template-columns: 1fr; gap: .5rem; padding-right: 2rem; }
  .about-values__item > div { gap: .625rem; }
  .about-story__main-image { inset: 0 0 3rem 5%; }
  .about-story__detail-image { height: 10rem; }
  .about-story__detail-image figcaption { width: 8.75rem; left: calc(100% + .75rem); font-size: .5rem; }
  .about-principles__grid { grid-template-columns: 1fr; margin-top: 3rem; }
  .about-principles__grid article,.about-principles__grid article:not(:first-child) { min-height: 14rem; padding: 1.5rem 0; }
  .about-location { padding: 0; }
  .about-location__map { min-height: 22rem; }
  .about-location__actions { width: 100%; flex-wrap: nowrap; gap: .5rem; }
  .about-location__actions .button { min-width: 0; min-height: 3.75rem; flex: 1 1 50%; padding-inline: .5rem; font-size: 1.125rem; }
  .about-cta .button { width: 100%; justify-content: space-between; }
  .about-page-hero__copy > p:not(.overline), .about-page-hero__address,
  .about-page-hero__facts dt, .about-page-hero__facts dd,
  .about-story__detail-image figcaption, .about-values__index,
  .about-principles__grid p, .about-location__copy > p:not(.overline):not(.about-location__routes-title) { font-size: .9375rem; }
  .about-page .overline, .about-page-hero__facts dd, .about-story__detail-image figcaption,
  .about-values__index { font-size: .9375rem; }
  .about-location__actions .button { font-size: 1.125rem; }
}

@media (prefers-reduced-motion:reduce) { .about-page-hero > img { animation: none; } }
