.about-page { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; color: var(--brand-dark, #07142e); }
.about-page *, .about-admin * { box-sizing: border-box; }
.about-page h1, .about-page h2, .about-page h3 { overflow-wrap: anywhere; text-wrap: balance; }
.about-hero { position: relative; padding: clamp(28px, 6vw, 72px); border-radius: 28px; color: #fff; background: radial-gradient(ellipse at 100% 0, #0b63ce 0, transparent 55%), linear-gradient(140deg, #07142e, #123a4b); overflow: hidden; }
.about-hero::after { content: ''; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(8,209,216,.28); border-radius: 50%; right: -100px; bottom: -130px; pointer-events: none; }
.about-hero h1 { font-size: .85rem; letter-spacing: .2em; color: #87f2f0; margin: 0 0 20px; }
.about-deck { font-size: clamp(1.2rem, 3vw, 1.9rem); line-height: 1.3; font-weight: 650; margin: 12px 0 24px; text-wrap: balance; }
.about-hero .about-deck { font-size: clamp(2.2rem, 6vw, 4.5rem); max-width: 780px; letter-spacing: -.04em; }
.about-copy { line-height: 1.8; font-size: 1rem; overflow-wrap: anywhere; }
.about-copy p { margin: 0 0 1.2em; white-space: pre-line; }
.about-copy p:last-child { margin-bottom: 0; }
.about-hero .about-copy { max-width: 740px; color: #e3eef5; }
.about-hero .about-copy p:nth-child(2) { font-size: 1.2rem; font-weight: 550; color: #fff; }
.about-story { padding: 40px 8px; border-bottom: 1px solid rgba(7,20,46,.12); }
.about-story h2, .about-team h2, .about-closing h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -.03em; margin: 0 0 20px; }
.about-team { padding: 48px 0; }
.about-team > .about-section-heading { max-width: 680px; margin-bottom: 32px; padding: 0 8px; }
.about-team-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.about-person { min-width: 0; }
.about-portrait { aspect-ratio: 4 / 5; position: relative; overflow: hidden; border-radius: 22px; background: radial-gradient(ellipse at 80% 10%, rgba(8,209,216,.3), transparent 65%), linear-gradient(145deg,#07142e,#163951); }
.about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(4rem, 10vw, 7rem); font-weight: 650; letter-spacing: -.05em; color: #cdf8f5; }
.about-person-copy { padding: 24px 8px 0; }
.about-person h3 { font-size: 1.65rem; letter-spacing: -.035em; margin: 0 0 6px; }
.about-role { color: #17576a; font-size: .95rem; font-weight: 700; margin: 0 0 20px; }
.about-closing { background: #e6f5f4; border-radius: 24px; padding: clamp(28px, 5vw, 56px); }
.about-closing .about-deck { font-size: .85rem; letter-spacing: .08em; }
.about-closing .form-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.about-admin .about-portrait-preview { aspect-ratio: 4 / 5; max-width: 360px; margin-bottom: 20px; }
.about-admin input:not([type=checkbox]), .about-admin textarea { max-width: 100%; min-width: 0; }
.about-admin .form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 700px) { .about-page { padding: 40px 24px 80px; } .about-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; padding: 56px 16px; } .about-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; } }
@media (min-width: 1100px) { .about-team-grid { gap: 56px 64px; } .about-person { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: start; gap: 22px; } .about-person-copy { padding: 8px 0 0; } .about-person h3 { font-size: 1.5rem; } .about-person .about-copy { font-size: .94rem; line-height: 1.7; } }