.about-hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 60% 80% at 85% 20%, #0f3358 0%, transparent 65%), linear-gradient(180deg, #061a2e, #031426); border-bottom: 1px solid #1d4a73; }
.about-capitol { position: absolute; left: 0; top: 0; z-index: 0; width: min(34%, 460px); height: 100%; max-width: none; object-fit: cover; object-position: center top; opacity: .2; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 100%), linear-gradient(0deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, #000 20%, transparent 100%), linear-gradient(0deg, transparent 0, #000 35%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.about-hero-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 48px 7.5% 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy media" "chips media" "quote media"; grid-template-rows: auto auto auto; column-gap: clamp(32px, 5vw, 80px); row-gap: 0; align-content: center; align-items: center; }
.about-hero-copy { grid-area: copy; align-self: end; }
.about-focus { grid-area: chips; }
.about-quote { grid-area: quote; align-self: start; }
.about-hero-media { grid-area: media; }
.about-hero-copy .eyebrow { margin-bottom: 16px; font-size: 13px; letter-spacing: 1.8px; }
.about-hero h1 { font-family: Exo, Arial, sans-serif; margin-bottom: 20px; }
.about-hero h1 > span { display: block; }
.about-hero h1 em { font-style: normal; color: #53c6f6; }
.about-hero h1 > span:last-child em { color: #279cec; }
.about-lead { max-width: 560px; font-size: 20px; line-height: 1.55; color: #e4eef9; }
.about-principles { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.about-principles > li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid #5b95c633; border-radius: 999px; background: #ffffff08; font-size: 14px; font-weight: 600; color: #dcebf8; }
.about-principles img { width: 20px; height: 22px; object-fit: contain; }
.about-quote { max-width: 440px; margin-top: 30px; padding-left: 18px; border-left: 2px solid #53c6f6; font-size: 15px; line-height: 1.7; letter-spacing: .6px; text-transform: uppercase; color: #cfe3f6; }

.about-hero-media { position: relative; margin: 0; padding-bottom: 56px; }
.about-campus-frame { position: relative; container-type: inline-size; border-radius: 14px; overflow: hidden; border: 1px solid #5b95c640; box-shadow: 0 26px 52px #0008; }
.about-campus-scene { position: relative; transform: none; }
.about-campus { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.campus-sign { position: absolute; left: 58.3%; top: 32.6%; width: 10.8%; transform: translateX(-50%) skewY(-27deg); padding: 0; filter: drop-shadow(0 1px 1px #0009) drop-shadow(0 0 4px #8be86a44); }
.campus-sign .brand { display: block; }
.campus-sign .brand.brand-legacy > img { display: block; width: 100%; max-width: none; height: auto; }
.about-team { position: absolute; left: -28px; bottom: 0; width: min(52%, 340px); margin: 0; border: 1px solid #5b95c64d; border-radius: 12px; overflow: hidden; background: #031426; box-shadow: 0 18px 40px #000a; }
.about-team > img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; }
.about-team figcaption { position: absolute; left: 14px; bottom: 10px; color: #bfe8ff; text-transform: uppercase; font-size: 11px; line-height: 1.7; letter-spacing: 1.2px; font-weight: 700; text-shadow: 0 1px 6px #00111f; }
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; }
.about-story .text-link { margin-top: 25px; }
.about-story .lifecycle { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.about-story .lifecycle > li { padding: 9px 16px; border: 1px solid #5b95c640; border-radius: 999px; background: #ffffff08; font-size: 14px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #dcebf8; }
.about-story .lifecycle > li::before, .about-story .lifecycle > li::after { content: none; }
.about-story .about-copy p { font-size: 17px; line-height: 1.75; }
.about-story .text-link { font-size: 15px; }

@media (max-width: 1000px) {
  .about-hero-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "chips" "quote" "media"; grid-template-rows: auto; row-gap: 0; padding: 40px 5% 40px; }
  .about-hero-copy { align-self: auto; }
  .about-hero-media { margin-top: 30px; }
  .about-hero-media { max-width: 700px; }
  .about-team { left: 16px; }
  .about-story { gap: 5%; padding-top: 45px; padding-bottom: 50px; }
}
@media (max-width: 640px) {
  .about-hero-inner { padding: 32px 22px 44px; }
  .about-hero-media { margin-top: 26px; }
  .about-lead { font-size: 18px; }
  .about-principles > li { font-size: 13.5px; padding: 8px 13px 8px 10px; }
  .about-quote { font-size: 13.5px; }
  .about-hero-media { padding-bottom: 0; }
  .about-team { position: relative; left: auto; bottom: auto; width: auto; margin: -36px 14px 0; }
  .about-story { grid-template-columns: 1fr; gap: 25px; padding-top: 40px; padding-bottom: 40px; }
  .about-story .text-link { font-size: 11px; }
}

/* About the company and certifications */
.about-company, .about-certifications { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line); }
.about-company { background: radial-gradient(ellipse 60% 70% at 0% 0%, #0b3a6655, transparent 70%), linear-gradient(180deg, #031322, #041a30 55%, #031322); }
.about-certifications { background: radial-gradient(ellipse 55% 60% at 100% 0%, #0f4a7a55, transparent 70%), radial-gradient(ellipse 50% 45% at 0% 100%, #2a2f8a33, transparent 70%), #020f1d; }
.about-company::before, .about-certifications::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 22%, #cfeaff 50%, transparent 51%), radial-gradient(1px 1px at 68% 14%, #9fd8ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 84% 62%, #e6f5ff 50%, transparent 51%), radial-gradient(1px 1px at 32% 78%, #9fd8ff 50%, transparent 51%), radial-gradient(1px 1px at 52% 44%, #cfeaff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 58%, #bfe4ff 50%, transparent 51%), radial-gradient(1px 1px at 93% 30%, #cfeaff 50%, transparent 51%);
  background-size: 420px 300px; animation: about-twinkle 6s ease-in-out infinite alternate; }
.about-company::after, .about-certifications::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(#3fa3ff0d 1px, transparent 1px), linear-gradient(90deg, #3fa3ff0d 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%); }
.magic-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.magic-sky > span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; animation: about-drift 18s ease-in-out infinite alternate; }
.magic-sky > span:nth-child(1) { width: 420px; height: 420px; left: -120px; top: 8%; background: #1f7fe0; }
.magic-sky > span:nth-child(2) { width: 360px; height: 360px; right: -90px; top: 35%; background: #34c6f4; opacity: .28; animation-duration: 22s; animation-delay: -6s; }
.magic-sky > span:nth-child(3) { width: 300px; height: 300px; left: 42%; bottom: -160px; background: #5a4ee8; opacity: .25; animation-duration: 26s; animation-delay: -11s; }
.about-company .section-intro, .about-certifications .section-intro { max-width: 760px; margin-bottom: 40px; }
.about-company .section-intro h2:not(.eyebrow), .about-certifications .section-intro h2 { background: linear-gradient(100deg, #ffffff 10%, #a9e4ff 45%, #4fb3ff 75%, #ffffff 95%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: about-sheen 9s linear infinite; }
.about-certifications .section-intro h2 { font-size: 44px; letter-spacing: -1px; }
.about-company .section-intro h2.eyebrow { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.4; margin-bottom: 16px; }
.company-lead { margin-top: 4px; max-width: 760px; font-size: 18px; line-height: 1.7; color: #dcebf8; }
.about-company .eyebrow, .about-certifications .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.about-company .eyebrow::before, .about-certifications .eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, #53c6f6); }

/* Glass cards with gradient borders */
.company-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.company-card, .cert-card { position: relative; border: 1px solid transparent; border-radius: 14px;
  background: linear-gradient(160deg, #0b2846f2, #061a2ff2 60%, #071426f2) padding-box, linear-gradient(150deg, #5fd0ff99, #1d5d9a44 35%, #0d2a4a33 60%, #7b6dff77) border-box;
  box-shadow: 0 18px 40px #00070f99, inset 0 1px 0 #ffffff12;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.company-card { padding: 32px 28px 30px; overflow: hidden; }
.company-card::before, .cert-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(420px circle at 50% 0%, #4fc3ff26, transparent 60%); }
.company-card:hover, .cert-card:hover { transform: translateY(-6px); box-shadow: 0 26px 55px #000a, 0 0 0 1px #53c6f655, 0 0 40px #279cec33; }
.company-card:hover::before, .cert-card:hover::before { opacity: 1; }
.company-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2f8fe0, #0b3a66 70%); box-shadow: 0 0 0 1px #6fd3ff55, 0 0 26px #279cec66, inset 0 0 14px #9fe0ff44; }
.company-icon > img { width: 28px; height: 28px; filter: brightness(1.6) drop-shadow(0 0 6px #9fe0ff); }
.company-card h3 { font-family: Exo, Arial, sans-serif; font-size: 22px; margin-bottom: 12px; }
.company-card p { font-size: 14px; line-height: 1.8; color: #c6d8ea; }
.company-card p + p { margin-top: 12px; }
.company-card--principle { background: linear-gradient(160deg, #0f3460f5, #082445f5 55%, #0a1a3cf5) padding-box, linear-gradient(120deg, #64e0ff, #3b8cff 40%, #8b7dff 70%, #64e0ff) border-box; background-size: 100% 100%, 300% 300%; animation: about-border 8s ease infinite; box-shadow: 0 22px 50px #000b, 0 0 50px #279cec2e; }
.company-card .company-principle { font-family: Exo, Arial, sans-serif; font-size: 19px; line-height: 1.45; font-weight: 700; background: linear-gradient(90deg, #9fe7ff, #5cb8ff 60%, #b6a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Certifications */
.cert-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cert-card { display: flex; flex-direction: column; padding: 22px 24px 28px; }
.cert-logo { position: relative; overflow: hidden; height: 156px; margin-bottom: 22px; padding: 16px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; box-shadow: 0 10px 26px #0009, 0 0 0 1px #ffffff40; }
.cert-logo::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #ffffffcc, transparent); opacity: 0; pointer-events: none; }
.cert-card:hover .cert-logo::after { animation: about-shine .9s ease forwards; }
.cert-logo > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .4s ease; }
.cert-card:hover .cert-logo > img { transform: scale(1.04); }
.cert-card h3 { font-family: Exo, Arial, sans-serif; font-size: 23px; letter-spacing: -.3px; }
.cert-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8fd4ff; }
.cert-tag { display: inline-block; padding: 3px 10px; border: 1px solid #53c6f6aa; border-radius: 20px; font-size: 10px; letter-spacing: 1px; color: #d4f4ff; background: linear-gradient(90deg, #0d3a5a, #1b2f6e); box-shadow: 0 0 12px #34c6f433; }
.cert-card > p:not(.cert-scope) { font-size: 13px; line-height: 1.75; color: #b9cde0; }
.cert-card > p + p:not(.cert-scope) { margin-top: 10px; }

/* Cards rise in as they scroll into view, where the browser supports it */
@supports (animation-timeline: view()) {
  .company-card, .cert-card { animation: about-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  .company-card--principle { animation: about-rise linear both, about-border 8s ease infinite; animation-timeline: view(), auto; animation-range: entry 0% entry 55%, normal; }
}
@keyframes about-rise { from { opacity: 0; translate: 0 36px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes about-twinkle { from { opacity: .3; } to { opacity: .7; } }
@keyframes about-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -40px) scale(1.15); } }
@keyframes about-sheen { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@keyframes about-border { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
@keyframes about-shine { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .about-company::before, .about-certifications::before, .magic-sky > span, .company-card, .cert-card, .company-card--principle, .about-company .section-intro h2, .about-certifications .section-intro h2, .cert-card:hover .cert-logo::after { animation: none !important; }
  .company-card, .cert-card, .cert-logo > img { transition: none; }
  .company-card:hover, .cert-card:hover, .cert-card:hover .cert-logo > img { transform: none; }
}
@media (max-width: 1080px) {
  .company-grid { gap: 18px; }
  .company-card { padding: 28px 22px; }
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-certifications .section-intro h2 { font-size: 38px; }
}
@media (max-width: 900px) {
  .company-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .about-company .section-intro, .about-certifications .section-intro { margin-bottom: 26px; }
  .about-certifications .section-intro h2 { font-size: 32px; }
  .company-lead { font-size: 16px; }
  .cert-grid { grid-template-columns: 1fr; gap: 18px; }
  .cert-logo { height: 132px; }
  .company-card h3, .cert-card h3 { font-size: 20px; }
  .magic-sky > span { filter: blur(50px); }
  .magic-sky > span:nth-child(1) { width: 260px; height: 260px; }
  .magic-sky > span:nth-child(2) { width: 220px; height: 220px; }
}

/* Tighter vertical rhythm between sections */
.about-company, .about-certifications, .about-story { padding-top: 48px; padding-bottom: 48px; }
.about-company .section-intro, .about-certifications .section-intro { margin-bottom: 28px; }
.about-company .section-intro h2.eyebrow { margin-bottom: 10px; }
.company-grid, .cert-grid { gap: 20px; }
.about-hero-media { padding-bottom: 40px; }
@media (max-width: 640px) {
  .about-company, .about-certifications, .about-story { padding-top: 34px; padding-bottom: 34px; }
  .about-company .section-intro, .about-certifications .section-intro { margin-bottom: 20px; }
  .about-hero-inner { padding-bottom: 34px; }
}

/* Wide screens: the five focus items stack vertically between the text and the photo */
@media (min-width: 1360px) {
  .about-hero-inner { padding-left: 4%; padding-right: 4%; grid-template-columns: minmax(490px, 1fr) 236px minmax(0, 1.25fr); grid-template-areas: "copy chips media" "quote chips media"; grid-template-rows: auto auto; column-gap: clamp(20px, 2.4vw, 40px); }
  .about-principles { flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-self: end; gap: 12px; margin: 0 0 24px; padding-left: 18px; border-left: 2px solid #53c6f655; }
  .about-principles > li { width: 100%; }
}

/* Keep the building's entrance clear: the analysts photo overlaps only the photo's lower edge */
@media (min-width: 1001px) {
  .about-hero-media { padding-bottom: 96px; }
  .about-team { width: min(44%, 300px); }
}

/* Focus panel: the analysts photo sits behind the five focus items */
.about-focus { position: relative; isolation: isolate; overflow: hidden; margin-top: 28px; padding: 18px; border: 1px solid #5b95c640; border-radius: 14px; box-shadow: 0 18px 40px #0008; }
.about-focus-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 55% center; }
.about-focus::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0314269e 0%, #03142640 50%, #031426d9 100%); }
.about-focus .about-principles { margin: 0; }
.about-focus .about-principles > li { background: #04192ea6; border-color: #7cc4f54d; backdrop-filter: blur(3px); }
.about-focus-caption { margin-top: 16px; font-size: 12px; font-weight: 700; line-height: 1.7; letter-spacing: 1.4px; text-transform: uppercase; color: #bfe8ff; text-shadow: 0 1px 6px #00111f; }
.about-hero-media, .about-hero-media:last-child { padding-bottom: 0; }
@media (min-width: 1001px) { .about-hero-media { padding-bottom: 0; } }
@media (min-width: 1360px) {
  .about-focus { align-self: center; margin: 0; padding: 22px 20px 18px; }
  .about-focus .about-principles { padding-left: 0; border-left: 0; }
  .about-focus-bg { object-position: 62% center; }
  .about-hero h1 > span { white-space: nowrap; }
}

/* Building photo and focus panel read as one unit */
.about-showcase { display: contents; }
@media (min-width: 1360px) {
  .about-hero-inner { grid-template-columns: minmax(460px, .9fr) minmax(0, 1.6fr); grid-template-areas: "copy show" "quote show"; column-gap: clamp(28px, 3vw, 52px); }
  .about-showcase { grid-area: show; align-self: center; display: flex; align-items: stretch; overflow: hidden; border: 1px solid #5b95c640; border-radius: 14px; box-shadow: 0 26px 52px #0008; }
  .about-focus { flex: 0 0 232px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 18px 18px 16px; border: 0; border-right: 1px solid #5b95c640; border-radius: 0; box-shadow: none; }
  .about-focus .about-principles { gap: 8px; }
  .about-focus .about-principles > li { padding: 7px 14px 7px 11px; }
  .about-focus-caption { margin-top: 12px; }
  .about-focus-bg { object-position: 50% center; }
  .about-hero-media { flex: 1 1 auto; min-width: 0; align-self: center; }
  .about-campus-frame { border: 0; border-radius: 0; box-shadow: none; }
}

/* Professional finish (2026-10-27): solid focus panel, Industries row, no decorative glow effects */
.about-focus { background: linear-gradient(180deg, #0c223a, #081a2e); }
.about-focus::before { content: none; }
.about-focus .about-principles > li { background: #ffffff08; border-color: #5b95c633; backdrop-filter: none; }
.about-focus-caption { color: #8fc6f2; text-shadow: none; }

.about-industries { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 7.5% 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.about-industries-label { font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #8fc6f2; }
.about-industries ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.about-industries a { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border: 1px solid #5b95c633; border-radius: 999px; background: #ffffff06; font-size: 14.5px; font-weight: 600; color: #dcebf8; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.about-industries a:hover { border-color: #7cc4f5; background: #ffffff10; color: #fff; }
.about-industries a:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 3px; }
.about-industries img { width: 20px; height: 20px; object-fit: contain; }
@media (min-width: 1360px) { .about-industries { padding-left: 4%; padding-right: 4%; } }
@media (max-width: 1000px) { .about-industries { padding: 0 5% 36px; } }
@media (max-width: 640px) { .about-industries { padding: 0 22px 30px; } .about-industries a { font-size: 14px; padding: 7px 12px 7px 10px; } }

/* Calm, institutional sections: no star fields, drifting glows or animated gradients */
.about-company::before, .about-certifications::before, .about-company::after, .about-certifications::after { content: none; }
.about-company { background: #061a2e; }
.about-certifications { background: #031322; }
.about-company .section-intro h2:not(.eyebrow), .about-certifications .section-intro h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; animation: none; }
.company-card, .cert-card { background: #0b2038; border: 1px solid #5b95c633; box-shadow: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.company-card::before, .cert-card::before { content: none; }
.company-card:hover, .cert-card:hover { transform: translateY(-3px); border-color: #7cc4f580; box-shadow: 0 12px 28px #0007; }
.company-card--principle { background: #0e2846; border-color: #53c6f6; animation: none; box-shadow: none; }
.company-card .company-principle { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #8fd4ff; }
.company-icon { background: #12355a; box-shadow: 0 0 0 1px #5b95c655; }
.company-icon > img { filter: none; }
.cert-logo { box-shadow: none; }
.cert-logo::after { content: none; }
.cert-card:hover .cert-logo > img { transform: none; }
.cert-tag { background: #12355a; box-shadow: none; }
@supports (animation-timeline: view()) {
  .company-card--principle { animation: about-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}
@media (prefers-reduced-motion: reduce) { .company-card--principle { animation: none; } }

/* Focus list sits on the building photo instead of a solid panel */
.about-focus { background: linear-gradient(180deg, #031426b3, #03142659 55%, #031426cc), url('../images/about-campus.webp') 0% 12% / 240% auto no-repeat, #061a2e; }
.about-focus .about-principles > li { background: #04192ebf; border-color: #7cc4f54d; backdrop-filter: blur(4px); }
.about-focus-caption { color: #bfe8ff; text-shadow: 0 1px 6px #00111f; }
@media (min-width: 1360px) {
  .about-showcase { position: relative; display: block; }
  .about-hero-media { width: 100%; }
  .about-focus { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 248px; padding: 22px 24px 18px; border-right: 0; background: linear-gradient(90deg, #031426c7 0%, #03142680 60%, transparent 100%); }
}

/* Industries row: centered, no label (the nav keeps an accessible name) */
.about-industries { justify-content: center; }
.about-industries ul { justify-content: center; }
@media (min-width: 1360px) { .about-industries { padding-left: 7.5%; padding-right: 7.5%; } }

/* People / Technology / Mission: one line above the focus list */
.about-focus-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 0 7px; margin: 0 0 14px 4px; font-size: 11px; letter-spacing: 1px; line-height: 1.4; white-space: nowrap; }
.about-focus-caption > span + span::before { content: "·"; margin-right: 7px; color: #53c6f6; font-weight: 700; }
@media (min-width: 1360px) {
  .about-focus { width: 264px; }
  .about-focus-caption { flex-wrap: nowrap; gap: 0 6px; margin-left: 2px; font-size: 10.5px; letter-spacing: .8px; }
  .about-focus-caption > span + span::before { margin-right: 6px; }
}
@media (min-width: 1360px) { .about-focus { width: 292px; } .about-focus-caption { font-size: 10px; letter-spacing: .6px; gap: 0 5px; } .about-focus-caption > span + span::before { margin-right: 5px; } }
@media (min-width: 1360px) { .about-focus .about-principles { align-self: stretch; } }

/* Tablet and phone: same look as desktop - one card, the list on the building photo's sky */
@media (max-width: 1359px) {
  .about-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy show" "quote show"; row-gap: 0; }
  .about-showcase { grid-area: show; align-self: center; display: block; position: relative; overflow: hidden; border: 1px solid #5b95c640; border-radius: 14px; background: #001642; box-shadow: 0 26px 52px #0008; }
  .about-focus { position: relative; z-index: 2; margin: 0; padding: 22px 22px 8px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .about-focus .about-principles { padding: 0; border: 0; }
  .about-hero-media { margin: 0; padding: 0; width: 100%; max-width: none; }
  .about-campus-frame { border: 0; border-radius: 0; box-shadow: none; }
  .about-campus { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
}
@media (max-width: 1000px) {
  .about-hero-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "quote" "show"; }
  .about-quote { margin-bottom: 26px; }
  .about-showcase { margin-top: 0; }
}
@media (max-width: 640px) {
  .about-focus { padding: 18px 16px 4px; }
  .about-quote { margin-bottom: 22px; }
}
/* Hero side padding matches the sections below */
@media (min-width: 1360px) { .about-hero-inner { padding-left: 7.5%; padding-right: 7.5%; } }
/* Shorter hero: "About the company" shows above the fold. The photo trims empty sky; the sign stays on the wall. */
.about-campus-frame { aspect-ratio: 16 / 9; }
.about-campus-scene { position: absolute; left: 0; right: 0; bottom: 0; }
@media (min-width: 1001px) { .about-hero-inner { padding-top: 28px; padding-bottom: 28px; } }