/* About page: reference-led composition with responsive content grids. */
.about-page { color: #526482; font-family: "Open Sans", Arial, sans-serif; font-size: 15px; line-height: 1.5; background: #fff; }
.about-container { width: 88%; max-width: 1280px; margin: auto; }
.about-page h1, .about-page h2, .about-page h3 { color: #0b1946; font-family: "Poppins", Arial, sans-serif; font-weight: 700; letter-spacing: -.035em; }
.about-page h1 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.08; margin: 0 0 10px; }
.about-page h2 { font-size: clamp(27px, 2.7vw, 36px); line-height: 1.2; margin: 0 0 10px; }
.about-page h3 { font-size: 16px; line-height: 1.35; margin: 0 0 15px; }
.about-page p { margin: 0 0 16px; }
.about-page .about-eyebrow { color: #0065ff; text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: .15em; margin: 0 0 12px; }
.about-dark { color: #fff; background-color: #001626; }
.about-dark h1, .about-dark h2, .about-dark h3 { color: #fff; }
.about-dark .about-eyebrow { color: #00d4ff; }
.about-hero { background-image: linear-gradient(90deg, #001626 0%, rgba(0,22,38,.94) 30%, rgba(0,22,38,.22) 65%, rgba(0,22,38,.6)), url('/assets/img/dc3/server-aisle.jpg'); background-size: cover; background-position: center 48%; }
.about-banner-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 46px 0 38px; min-height: 365px; }
.about-hero-copy { max-width: 450px; margin-left: 3%; }
.about-hero-copy > p:not(.about-eyebrow) { max-width: 395px; font-size: 17px; line-height: 1.4; }
.about-page .about-side-note { border-left: 2px solid #00d4ff; padding: 0 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; margin: 0; flex-shrink: 0; }
.about-side-note::after { content: ""; display: block; width: 38px; height: 2px; background: #00d4ff; margin-top: 18px; }
.about-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 13px 25px; min-height: 44px; border: 1px solid #0065ff; border-radius: 4px; background: #0065ff; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.about-button:hover { background: #004dcc; color: #fff; }
.about-button:focus-visible { outline: 3px solid #00d4ff; outline-offset: 4px; }
.about-button-outline { background: transparent; border-color: #fff; }
.about-button-outline:hover { background: #ffffff20; }
.about-purpose { padding: 28px 0 38px; }
.about-purpose-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.about-page .about-intro { color: #0b1946; font-size: 17px; line-height: 1.45; }
.about-network-photo { display: block; width: 100%; height: 100%; min-height: 270px; max-height: 320px; object-fit: cover; border-radius: 5px; }
.about-principles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 32px -16px 0; padding: 24px 14px; border: 1px solid #eef3fb; box-shadow: 0 3px 16px #1b5eaa12; border-radius: 8px; }
.about-principle { display: flex; gap: 20px; padding: 0 18px; border-right: 1px solid #e4edf9; }
.about-principle:last-child { border: 0; }
.about-principle > i, .about-steps > li > i { flex-shrink: 0; color: #0065ff; font-size: 38px; width: 42px; text-align: center; }
.about-principle h3 { min-height: 43px; }
.about-principle p, .about-steps p { font-size: 13px; line-height: 1.5; margin: 0; }
.about-beliefs { padding: 38px 0 32px; background-image: linear-gradient(90deg, rgba(0,19,35,.48), rgba(0,19,35,.14)), url('/assets/img/about-earth-night.png'); background-size: cover; background-position: center; }
.about-beliefs-intro { font-size: 18px; }
.about-beliefs-grid { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr .65fr; gap: 50px; margin-top: 36px; align-items: start; }
.about-beliefs-grid article > i { display: block; color: #0072ff; font-size: 46px; margin-bottom: 12px; }
.about-beliefs-grid h3 { font-size: 19px; margin-bottom: 10px; }
.about-beliefs-grid article p { max-width: 270px; margin: 0; }
.about-beliefs-grid .about-side-note { align-self: end; margin-bottom: 6px; }
.about-beliefs-grid .about-side-note::after { display: none; }
.about-process { padding: 42px 0 54px; }
.about-process-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; }
.about-process-heading h2 { font-size: clamp(26px, 2.5vw, 32px); }
.about-process-heading > p { font-size: 14px; margin: 0; }
.about-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 44px; list-style: none; padding: 0; margin: 48px 0 0; }
.about-steps > li { display: flex; gap: 20px; position: relative; }
.about-steps > li:not(:last-child)::after { content: ""; width: 26px; height: 2px; background: #0065ff; position: absolute; right: -35px; top: 18px; }
.about-steps h3 { margin: 8px 0 16px; }
.about-contact { background-image: linear-gradient(90deg, rgba(0,20,38,.97) 0%, rgba(0,20,38,.9) 34%, rgba(0,20,38,.22) 72%, rgba(0,20,38,.6)), url('/assets/img/dc3/scalable.jpg?v=20260921'); background-size: cover; background-position: center 48%; }
.about-contact .about-banner-inner { min-height: 290px; padding: 44px 12px 38px; }
.about-contact-copy { max-width: 575px; }
.about-contact-copy > p:not(.about-eyebrow) { font-size: 17px; }
.about-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.about-view .main-header .nav-link.active { text-underline-offset: 8px; text-decoration: underline; text-decoration-color: #0065ff; text-decoration-thickness: 2px; }
@media (max-width: 1100px) {
    .about-principle { gap: 12px; padding: 0 12px; }
    .about-principle > i { font-size: 30px; width: 32px; }
    .about-principle h3 { font-size: 14px; }
    .about-purpose-grid { gap: 32px; }
    .about-beliefs-grid { gap: 28px; }
    .about-steps { gap: 30px; }
    .about-steps > li { gap: 12px; }
    .about-steps > li:not(:last-child)::after { width: 18px; right: -24px; }
}
@media (max-width: 800px) {
    .about-principles, .about-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
    .about-principle:nth-child(2) { border: 0; }
    .about-principle h3 { min-height: 0; }
    .about-principle > i { font-size: 36px; width: 42px; }
    .about-steps > li::after { display: none; }
    .about-process-heading { grid-template-columns: 1fr; gap: 15px; }
    .about-beliefs-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .about-beliefs-grid .about-side-note { display: none; }
}
@media (max-width: 600px) {
    .about-container { width: 89%; }
    .about-banner-inner { min-height: 0; padding: 38px 0; }
    .about-hero-copy { margin-left: 0; }
    .about-side-note { display: none; }
    .about-hero { background-position: 60% center; }
    .about-purpose { padding: 30px 0; }
    .about-purpose-grid { grid-template-columns: 1fr; gap: 24px; }
    .about-network-photo { height: 220px; min-height: 0; }
    .about-principles { margin: 26px 0 0; grid-template-columns: 1fr; padding: 22px 18px; gap: 22px; }
    .about-principle { border: 0; padding: 0 0 20px; border-bottom: 1px solid #e4edf9; gap: 18px; }
    .about-principle:nth-child(2) { border-bottom: 1px solid #e4edf9; }
    .about-principle:last-child { padding-bottom: 0; }
    .about-principle h3 { font-size: 16px; margin-bottom: 8px; }
    .about-beliefs { padding: 34px 0; background-position: 65% center; background-image: linear-gradient(90deg, rgba(0,19,35,.88), rgba(0,19,35,.64)), url('/assets/img/about-earth-night.png'); }
    .about-beliefs-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
    .about-beliefs-grid article p { max-width: none; }
    .about-beliefs-grid article > i { font-size: 36px; }
    .about-process { padding: 34px 0; }
    .about-steps { grid-template-columns: 1fr; margin-top: 28px; gap: 25px; }
    .about-steps > li { gap: 20px; }
    .about-steps h3 { margin-top: 0; margin-bottom: 8px; }
    .about-contact .about-banner-inner { padding: 36px 0; min-height: 0; }
}
