.about-page { background: var(--paper); color: var(--text); }
.about-hero { position: relative; min-height: 850px; overflow: hidden; background: var(--ink); color: #fff; }
.about-hero::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, #000, transparent 80%); }
.about-glow { position: absolute; border-radius: 50%; filter: blur(20px); pointer-events: none; }
.about-glow-one { width: 620px; height: 620px; right: -10%; top: -8%; background: rgba(60,72,255,.22); }
.about-glow-two { width: 360px; height: 360px; left: 24%; bottom: -20%; background: rgba(32,217,255,.12); }
.about-hero-grid { position: relative; z-index: 2; min-height: 850px; display: grid; grid-template-columns: 1.04fr .76fr; align-items: center; gap: 8vw; padding-top: 120px; padding-bottom: 80px; }
.about-hero-copy { min-width: 0; }
.about-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--cyan); font-size: .75rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.about-eyebrow span { width: 42px; height: 2px; background: currentColor; }
.about-hero h1 { max-width: 830px; margin-bottom: 30px; font-size: clamp(4rem,7vw,7.7rem); line-height: .92; }
.about-hero h1 em { color: #a9dcff; font-family: inherit; font-size: .8em; font-weight: inherit; font-style: normal; letter-spacing: inherit; -webkit-text-stroke: 0; }
.about-hero-copy > p:not(.about-eyebrow) { max-width: 680px; margin-bottom: 34px; color: #b9c9dd; font-size: 1.1rem; }
.about-portrait { position: relative; height: min(70vh,680px); margin: 0; overflow: visible; }
.about-portrait::before { content: ""; position: absolute; inset: -14px 18px 18px -14px; border: 1px solid rgba(79,174,255,.43); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; border: 1px solid rgba(133,190,255,.26); box-shadow: 0 48px 100px rgba(0,0,0,.4); }
.about-portrait figcaption { position: absolute; right: -24px; bottom: 28px; min-width: 250px; padding: 17px 20px; background: rgba(7,16,31,.9); border: 1px solid var(--line-dark); backdrop-filter: blur(14px); }
.about-portrait figcaption strong, .about-portrait figcaption span { display: block; }
.about-portrait figcaption span { margin-top: 3px; color: #91a6c1; font-size: .76rem; }

.about-facts { background: linear-gradient(90deg, var(--blue), #3454f1 58%, var(--violet)); color: #fff; }
.about-facts-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.about-facts-grid > div { min-width: 0; padding: 30px 28px; border-left: 1px solid rgba(255,255,255,.2); }
.about-facts-grid > div:last-child { border-right: 1px solid rgba(255,255,255,.2); }
.about-facts strong, .about-facts span { display: block; }
.about-facts strong { margin-bottom: 3px; font-size: 1.08rem; }
.about-facts span { color: #d8e7ff; font-size: .78rem; }

.about-story { background: #fff; }
.about-story-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 10vw; align-items: start; }
.about-story-grid > * { min-width: 0; }
.about-story-heading { position: sticky; top: 120px; }
.about-story-heading h2 { font-size: clamp(2.7rem,4.8vw,5rem); }
.about-story-copy { padding-top: 52px; color: var(--muted); font-size: 1.08rem; }
.about-story-copy p:last-child { margin: 38px 0 0; padding: 28px 0 0 28px; border-top: 1px solid var(--line); border-left: 4px solid var(--blue); color: var(--text); font: italic 1.5rem/1.4 Georgia,serif; }
.about-history-photo { margin-top: 78px; margin-bottom: 0; }
.about-history-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); box-shadow: 0 38px 90px rgba(4,15,35,.18); }
.about-history-photo figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; padding: 18px 0 0; color: var(--muted); }
.about-history-photo figcaption span { color: var(--blue); font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.about-history-photo figcaption strong { color: var(--text); font-size: .92rem; text-align: right; }

.about-timeline { background: var(--paper); }
.about-section-head { max-width: 860px; margin-bottom: 65px; }
.about-steps { position: relative; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.about-steps::before { content: ""; position: absolute; left: 43px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--blue),rgba(22,119,255,.1)); }
.about-steps li { position: relative; display: grid; grid-template-columns: 86px 1fr; gap: 32px; padding: 0 0 58px; }
.about-steps li:last-child { padding-bottom: 0; }
.about-steps li > span { position: relative; z-index: 1; width: 86px; height: 86px; display: grid; place-items: center; border: 1px solid rgba(22,119,255,.34); border-radius: 50%; background: #fff; color: var(--blue); font-size: .75rem; font-weight: 900; box-shadow: 0 14px 35px rgba(4,15,35,.08); }
.about-steps li > div { padding: 22px 30px 27px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(4,15,35,.06); }
.about-steps h3 { margin-bottom: 10px; font-size: 1.55rem; }
.about-steps p { margin: 0; color: var(--muted); }

.about-role { overflow: hidden; background: var(--ink); color: #fff; }
.about-role-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8vw; align-items: start; }
.about-role-grid > * { min-width: 0; }
.about-role-intro { position: sticky; top: 120px; }
.about-role-intro .kicker { color: var(--cyan); }
.about-role-intro h2 { font-size: clamp(2.7rem,4.6vw,5rem); }
.about-role-intro > p:not(.kicker) { color: #a8b9ce; font-size: 1.05rem; }
.about-role-cards { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.about-role-cards article { min-height: 300px; padding: 30px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: linear-gradient(145deg,rgba(255,255,255,.035),transparent); }
.about-role-cards span { display: block; margin-bottom: 70px; color: var(--cyan); font-size: .73rem; font-weight: 900; }
.about-role-cards h3 { margin-bottom: 13px; font-size: 1.45rem; }
.about-role-cards p { margin: 0; color: #9fb1c7; font-size: .93rem; }

.about-close { background: linear-gradient(135deg,#eef5ff,#fff); }
.about-close-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 10vw; align-items: start; }
.about-close-grid > * { min-width: 0; }
.about-close h2 { margin: 0; }
.about-close-grid > div:last-child { padding-top: 56px; color: var(--muted); font-size: 1.06rem; }
.about-signature { margin: 30px 0; color: var(--text); font: italic 1.45rem/1.4 Georgia,serif; }

@media (max-width: 900px) {
  .about-hero, .about-hero-grid { min-height: 0; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 55px; padding-top: 135px; padding-bottom: 100px; }
  .about-portrait { width: min(600px,100%); height: 650px; }
  .about-story-grid, .about-role-grid, .about-close-grid { grid-template-columns: 1fr; }
  .about-story-heading, .about-role-intro { position: static; }
  .about-story-copy, .about-close-grid > div:last-child { padding-top: 0; }
}

@media (max-width: 640px) {
  .about-hero-grid { gap: 34px; padding-top: 105px; padding-bottom: 70px; }
  .about-hero h1 { font-size: clamp(2.85rem,13vw,3.8rem); line-height: .98; }
  .about-hero h1 em { font-size: .8em; }
  .about-hero-copy > p:not(.about-eyebrow) { font-size: 1rem; line-height: 1.58; }
  .about-portrait { height: auto; aspect-ratio: 4 / 5; }
  .about-portrait::before { inset: -8px 8px 8px -8px; }
  .about-portrait figcaption { right: 0; bottom: 0; width: 100%; min-width: 0; }
  .about-facts-grid { grid-template-columns: 1fr; }
  .about-facts-grid > div, .about-facts-grid > div:last-child { padding: 22px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .about-story-heading h2, .about-role-intro h2 { font-size: clamp(2.25rem,10.5vw,3.1rem); }
  .about-story-copy { font-size: 1rem; }
  .about-story-copy p:last-child { padding: 21px 0 0 18px; font-size: 1.25rem; }
  .about-history-photo { margin-top: 44px; }
  .about-history-photo figcaption { align-items: flex-start; flex-direction: column; gap: 4px; padding-top: 13px; }
  .about-history-photo figcaption strong { text-align: left; }
  .about-section-head { margin-bottom: 38px; }
  .about-steps::before { left: 21px; }
  .about-steps li { grid-template-columns: 44px 1fr; gap: 14px; padding-bottom: 26px; }
  .about-steps li > span { width: 44px; height: 44px; }
  .about-steps li > div { padding: 20px 19px 22px; }
  .about-steps h3 { font-size: 1.3rem; }
  .about-role-cards { grid-template-columns: 1fr; }
  .about-role-cards article { min-height: 0; padding: 24px 22px; }
  .about-role-cards span { margin-bottom: 38px; }
  .about-signature { font-size: 1.25rem; }
}