/* About: a dusk photo opening (text on its dark left side), an editorial "why" column, the promises numbered large on
   charcoal, and one quiet line on reaching us. */

.ab-hero { position: relative; margin: 84px max(var(--gl), calc((100% - 1400px) / 2)) 0; border-radius: 30px; min-height: min(82vh, 780px); display: flex; align-items: flex-end; overflow: hidden; background: #14171B; color: #fff }
.ab-photo, .ab-photo img { position: absolute; inset: 0; width: 100%; height: 100% }
.ab-photo img { object-fit: cover; object-position: 62% 50% }
.ab-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,23,27,.88) 0%, rgba(20,23,27,.55) 45%, rgba(20,23,27,0) 75%), linear-gradient(0deg, rgba(20,23,27,.6), rgba(20,23,27,0) 40%) }
.ab-over { position: relative; z-index: 1; width: 100%; box-sizing: border-box; padding-top: 60px; padding-bottom: clamp(48px, 8vh, 90px) }
.ab-over .h-xl { max-width: 13ch; color: #fff }
.ab-over .lead { color: #D0D6DD; max-width: 30em }
.ab-over .kick { color: #7DD3FC }
.ab-over .crumbs ol, .ab-over .crumbs li + li::before { color: #A3ACB7 } .ab-over .crumbs a { color: #7DD3FC }

.ab-why { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 30px 6vw; padding-top: clamp(70px, 11vh, 130px); padding-bottom: clamp(60px, 9vh, 110px) }
.ab-col p { margin: 0 0 20px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.65; color: #2F3640; max-width: 34em }
.ab-col .ab-pull { margin-top: 34px; padding-left: 22px; border-left: 4px solid var(--sky); font: 800 clamp(24px, 2.2vw, 32px)/1.25 var(--font); letter-spacing: -0.02em; color: var(--ink) }

.ab-prom { padding: clamp(60px, 9vh, 110px) 0; background: var(--ink); color: #fff }
.ab-prom ol { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: pr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 50px }
.ab-prom ol li { counter-increment: pr; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: baseline; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; font-weight: 600 }
.ab-prom ol li::before { content: counter(pr, decimal-leading-zero); font: 800 34px/1 var(--font); color: #7DD3FC }
.ab-legal { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px }
.ab-legal a { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px; background: rgba(255,255,255,.07); color: #fff; text-decoration: none; transition: background .15s }
.ab-legal a:hover { background: rgba(255,255,255,.13) } .ab-legal a:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 2px }
.ab-legal b { font-size: 17px } .ab-legal span { color: #A3ACB7; font-size: 15px } .ab-legal .ic { width: 20px; height: 20px; color: #7DD3FC }

.ab-talk { padding-top: clamp(60px, 9vh, 100px); padding-bottom: clamp(70px, 11vh, 120px) }
.ab-talk h2 { margin: 0; font: 800 clamp(26px, 2.4vw, 36px)/1.1 var(--font); letter-spacing: -0.02em }
.ab-talk p { margin: 12px 0 0; font-size: 18px; color: var(--muted) }

@media (max-width: 860px) {
  .ab-hero { min-height: 600px; margin-top: 76px; border-radius: 22px } .ab-photo img { object-position: 90% 50% }
  .ab-hero::after { background: linear-gradient(0deg, rgba(20,23,27,.92) 0%, rgba(20,23,27,.6) 55%, rgba(20,23,27,.15) 100%) }
  .ab-why { grid-template-columns: 1fr }
  .ab-prom ol { grid-template-columns: 1fr } .ab-prom ol li { grid-template-columns: 48px 1fr } .ab-prom ol li::before { font-size: 26px }
  .ab-legal span { display: none }
}