/* About CYE. Shared type, spacing, colours and buttons come from the homepage. */
.cye-about-page { overflow-wrap: anywhere; }
.cye-about-page .about-page-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface); }
.cye-about-page .about-page-hero-media { position: absolute; z-index: -2; inset: 0; }
.cye-about-page .about-page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--about-page-image-focus, center); }
.cye-about-page .about-page-hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(4,17,15,.97) 0%, rgba(4,17,15,.87) 36%, rgba(4,17,15,.45) 69%, rgba(4,17,15,.18) 100%), linear-gradient(0deg, rgba(4,17,15,.45), transparent 45%); }
.cye-about-page .about-page-hero-inner { min-height: 620px; display: flex; align-items: center; padding-block: var(--section-space); }
.cye-about-page .about-page-hero-copy { max-width: 800px; min-width: 0; }
.cye-about-page .about-page-hero h1 { font-size: var(--heading-feature); line-height: 1.06; font-weight: 800; letter-spacing: -.04em; }
.cye-about-page .about-page-hero h1 span { display: block; color: var(--green); }
.cye-about-page .about-page-hero-intro { max-width: 590px; margin-top: 24px; color: #e2eae6; }
.cye-about-page .about-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.cye-about-page .about-page-actions .button-outline { background: rgba(4,17,15,.55); }
.cye-about-page .about-page-section-intro { max-width: 800px; margin-bottom: var(--heading-space); }
.cye-about-page .about-page-section-intro > p:last-child { max-width: 680px; margin-top: 18px; }

.cye-about-page .about-page-story { scroll-margin-top: 120px; }
.cye-about-page .about-page-story-grid { display: grid; gap: 64px; align-items: stretch; }
.cye-about-page .about-page-story-grid.has-image { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.cye-about-page .about-page-story-copy { max-width: 800px; min-width: 0; }
.cye-about-page .about-page-story-text { margin-top: 24px; }
.cye-about-page .about-page-story-text p + p { margin-top: 20px; }
.cye-about-page .about-page-story-copy > .button { margin-top: 28px; }
/* The text sets the desktop row height; the photograph fills that height. */
.cye-about-page .about-page-story-media { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--raised); }
.cye-about-page .about-page-story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--about-page-story-focus, center); }
.cye-about-page .about-page-strengths { background: #071713; }
.cye-about-page .about-page-strength-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.cye-about-page .about-page-strength { min-width: 0; padding: var(--card-pad); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.cye-about-page .about-page-strength-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 24px; color: var(--green); border: 1px solid #24d18645; border-radius: 8px; background: #24d1860a; }
.cye-about-page .about-page-strength h3 { font-size: var(--heading-card); line-height: 1.25; }
.cye-about-page .about-page-strength p { margin-top: 16px; }
.cye-about-page .about-page-client-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cye-about-page .about-page-client { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 128px; padding: 20px 16px; }
.cye-about-page .about-page-client + .about-page-client::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60px; background: var(--line-strong); }
.cye-about-page .about-page-client-mark { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 208px; height: 80px; }
.cye-about-page .about-page-client-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 80px; border-radius: var(--radius); }
.cye-about-page .about-page-client-link:hover .client-project-arrow, .cye-about-page .about-page-client-link:focus-visible .client-project-arrow { opacity: 1; }
.cye-about-page .about-page-client-mark img { display: block; width: var(--about-logo-size); height: auto; max-width: 100%; max-height: 80px; object-fit: contain; }
.cye-about-page .about-page-client-1 { --about-logo-size: 78%; }
.cye-about-page .about-page-client-2 { --about-logo-size: 62%; }
.cye-about-page .about-page-client-3 { --about-logo-size: 76%; }
.cye-about-page .about-page-client-4 { --about-logo-size: 88%; }
.cye-about-page .about-page-client-5 { --about-logo-size: 78%; }
.cye-about-page .about-page-client-6 { --about-logo-size: 100%; }
.cye-about-page .about-page-closing { background: #0b261c; border-top: 1px solid #24d18635; }
.cye-about-page .about-page-closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.cye-about-page .about-page-closing-inner > div { max-width: 800px; min-width: 0; }
.cye-about-page .about-page-closing-intro { max-width: 650px; margin-top: 20px; }
.cye-about-page .about-page-closing-inner > .button { flex-shrink: 0; }


@media (max-width: 1100px) {
    .cye-about-page .about-page-story-grid { gap: 40px; }
    .cye-about-page .about-page-closing-inner { gap: 32px; }
}
@media (max-width: 1000px) {
    .cye-about-page .about-page-client-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
    .cye-about-page .about-page-client:nth-child(3n + 1)::before { display: none; }
    .cye-about-page .about-page-closing-inner { display: block; }
    .cye-about-page .about-page-closing-inner > .button { margin-top: 28px; }
}
@media (max-width: 900px) {
    .cye-about-page .about-page-hero-inner { min-height: 560px; }
    .cye-about-page .about-page-hero::after { background: linear-gradient(90deg, rgba(4,17,15,.92), rgba(4,17,15,.58)), linear-gradient(0deg, rgba(4,17,15,.5), transparent); }
    .cye-about-page .about-page-story-grid.has-image { grid-template-columns: 1fr; }
    .cye-about-page .about-page-story-media { aspect-ratio: 3 / 2; }
    .cye-about-page .about-page-strength-grid { grid-template-columns: 1fr; }
    .cye-about-page .about-page-strength { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 24px; }
    .cye-about-page .about-page-strength-icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
    .cye-about-page .about-page-strength h3, .cye-about-page .about-page-strength p { grid-column: 2; }
}
@media (max-width: 700px) {
    .cye-about-page .about-page-hero-inner { min-height: 540px; }
    .cye-about-page .about-page-hero-copy { width: 100%; }
    .cye-about-page .about-page-hero-intro { margin-top: 20px; }
    .cye-about-page .about-page-actions { align-items: stretch; gap: 12px; margin-top: 28px; }
    .cye-about-page .about-page-actions > .button { width: 100%; }
    .cye-about-page .about-page-story-grid { gap: 32px; }
    .cye-about-page .about-page-story-copy > .button { width: 100%; }
    .cye-about-page .about-page-client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .cye-about-page .about-page-client { min-height: 108px; padding: 16px 12px; }
    .cye-about-page .about-page-client:nth-child(3n + 1)::before { display: block; }
    .cye-about-page .about-page-client:nth-child(2n + 1)::before { display: none; }
    .cye-about-page .about-page-client-mark { height: 64px; }
    .cye-about-page .about-page-client-link { min-height: 64px; }
    .cye-about-page .about-page-client-mark img { max-height: 64px; }
    .cye-about-page .about-page-closing-inner > .button { width: 100%; }
}
@media (max-width: 400px) {
    .cye-about-page .about-page-strength { display: block; }
    .cye-about-page .about-page-strength-icon { margin-bottom: 20px; }
}