/* =========================================================
   About page — /about/
   Transcribed from design_files/about.html.
   ========================================================= */

.ab-hero { background: var(--char); color: #fff; padding: 60px 0 76px; }
.ab-hero .eyebrow { color: var(--hivis); margin-bottom: 18px; }
.ab-hero h1 { font-family: var(--anton); text-transform: uppercase; font-size: clamp(40px, 6.5vw, 78px); margin: 0 0 18px; letter-spacing: .01em; line-height: .9; }
.ab-hero h1 .hl { color: var(--hivis); }
.ab-hero .lede { font-size: 18px; line-height: 1.6; color: #BFC1C8; max-width: 62ch; margin: 0; }

.story { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.story h2 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 18px; }
.story p { font-size: 16px; line-height: 1.7; color: #43454c; margin: 0 0 16px; }
.story .si-note { font-size: 14.5px; color: var(--muted); border-left: 3px solid var(--hivis); padding-left: 16px; margin-top: 24px; }
.story-img { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }

.val-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.val { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.val h3 { font-family: var(--anton); text-transform: uppercase; font-size: 19px; margin: 0 0 10px; letter-spacing: .01em; }
.val p { margin: 0; font-size: 14.5px; color: #43454c; line-height: 1.55; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.tm { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; text-align: center; }
.tm-av { width: 72px; height: 72px; border-radius: 50%; background: var(--hivis); color: var(--char); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; margin-bottom: 14px; }
.tm-n { font-family: var(--anton); text-transform: uppercase; font-size: 18px; letter-spacing: .01em; }
.tm-r { font-size: 13px; color: var(--muted); margin-top: 3px; font-weight: 600; }

@media (max-width: 900px) {
	.story { grid-template-columns: 1fr; gap: 28px; }
	.story-img { order: -1; aspect-ratio: 16 / 10; }
}