.about-page { padding-top: 72px; }
    .about-hero { position: relative; overflow: hidden; min-height: 420px; aspect-ratio: 3 / 1; display: flex; align-items: center; padding: 80px 56px 70px; }
    .about-hero-bg { position: absolute; inset: 0; z-index: 0; }
    .about-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
    .about-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.58) 42%, rgba(10,10,10,.22) 72%, rgba(10,10,10,.06) 100%); }
    .about-hero-content { position: relative; z-index: 1; width: min(100%, 62ch); max-width: 62ch; }
    .about-hero h1 { font-family: 'Inter', sans-serif; font-size: 2.6rem; font-weight: 600; color: #fff; margin-bottom: 20px; line-height: 1.22; text-shadow: 0 2px 16px rgba(0,0,0,.3); }
    .about-hero p { color: rgba(255,255,255,.8); font-size: 1.04rem; font-weight: 300; line-height: 1.8; text-shadow: 0 1px 8px rgba(0,0,0,.2); }
    .about-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); z-index: 1; }
    .about-intro { padding: 80px 56px 34px; background: #fff; border-bottom: 1px solid var(--border); }
    .about-intro-inner, .about-pillars-inner, .about-team-inner, .trust-strip-inner, .about-mv-inner { max-width: 1200px; margin: 0 auto; }
    .about-intro h2, .about-pillars h2, .about-team h2 { font-family: 'Inter', sans-serif; font-size: 1.8rem; font-weight: 600; color: var(--black); margin-bottom: 18px; text-wrap: balance; }
    .about-intro p, .about-team-intro { font-size: .95rem; color: #555; line-height: 1.85; max-width: 72ch; }
    .about-intro p { margin-bottom: 16px; }
    .expertise-row { display: flex; flex-wrap: wrap; gap: 10px; }
    .expertise-tag { display: inline-flex; align-items: center; font-weight: 600; }
    .about-pillars { padding: 60px 56px; background: var(--grey); border-bottom: 1px solid var(--border); }
    .section-label { font-size: .92rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #0072CE; margin-bottom: 12px; }
    .pillars-anim { display: flex; align-items: center; justify-content: flex-start; gap: 48px; padding: 8px 0 24px; overflow: visible; min-height: 180px; }
    .pa-boxes { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; width: 136px; height: 136px; flex-shrink: 0; overflow: visible; padding-left: 4px; }
    .pa-box { border-radius: 8px; width: 64px; height: 64px; cursor: pointer; opacity: 0; transform: translateX(600px); transition: transform .2s ease; }
    .pa-box.arrived { opacity: 1; transform: translateX(0); transition: transform .8s cubic-bezier(.25,1,.5,1), opacity .5s ease; }
    .pa-box.hovered { transform: scale(1.06); transition: transform .2s ease; }
    .pa-box.b1 { background: #0072CE; } .pa-box.b2 { background: #E06F00; } .pa-box.b3 { background: #3F9C35; } .pa-box.b4 { background: #582B94; }
    .pa-tagline { opacity: 0; transition: opacity 1s ease; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; height: 136px; }
    .pa-tagline.show { opacity: 1; }
    .pa-tagline-name { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600; color: var(--black); letter-spacing: .05em; }
    .pa-tagline-sub { font-size: 14px; color: #888; letter-spacing: .08em; margin-top: 4px; }
    .pa-info { width: 240px; height: 136px; position: relative; flex-shrink: 0; display: flex; align-items: center; }
    .pa-card { position: absolute; top: 50%; transform: translateY(-50%) translateX(16px); width: 100%; opacity: 0; transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
    .pa-card.show { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.pa-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 7px; vertical-align: middle; flex-shrink: 0; }
.pa-dot--trust { background: #0072CE; }
.pa-dot--growth { background: #E06F00; }
.pa-dot--sustainability { background: #3F9C35; }
.pa-dot--quality { background: #582B94; }
    .pa-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--black); margin-bottom: 8px; display: flex; align-items: center; }
    .pa-desc { font-size: .88rem; color: #555; line-height: 1.75; }
    .about-mv { padding: 80px 56px; background: #fff; border-bottom: 1px solid var(--border); }
    .about-mv-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .mv-card { padding: 34px 30px 30px; background: linear-gradient(180deg, #f7f8fb 0%, #eef3f8 100%); border: 1px solid rgba(0,114,206,.1); }
    .mv-card.dark { background: linear-gradient(180deg, #121212 0%, #1a1a1a 100%); border-color: rgba(255,255,255,.08); }
    .mv-card.warm { background: linear-gradient(180deg, #fff8ef 0%, #fff2e2 100%); border-color: rgba(232,119,34,.16); }
    .mv-icon { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; margin-bottom: 22px; background: linear-gradient(180deg, rgba(0,114,206,.1) 0%, rgba(0,114,206,.045) 100%); color: #0072CE; border: 1px solid rgba(0,114,206,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); }
    .mv-icon svg { width: 30px; height: 30px; stroke-linecap: round; stroke-linejoin: round; }
    .mv-card.dark .mv-icon { background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.04) 100%); color: #fff; border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
    .mv-card.warm .mv-icon { background: linear-gradient(180deg, rgba(232,119,34,.14) 0%, rgba(232,119,34,.06) 100%); color: #d36714; border-color: rgba(232,119,34,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
    .mv-card h3 { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #0072CE; margin-bottom: 14px; }
    .mv-card.dark h3 { color: #a9cfff; } .mv-card.warm h3 { color: #d36714; }
    .mv-card p { font-size: .96rem; color: var(--black); line-height: 1.8; font-weight: 300; }
    .mv-card.dark p { color: rgba(255,255,255,.84); }
    .trust-strip { padding: 36px 56px; background: #0f1722; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
    .trust-strip-inner { display: grid; grid-template-columns: 1.1fr 1.9fr; gap: 28px; align-items: center; }
    .trust-strip-title { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 600; margin: 0; max-width: 520px; }
    .trust-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .trust-point { border-left: 1px solid rgba(255,255,255,.14); padding-left: 16px; }
    .trust-point strong { display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; color: #a9cfff; }
    .trust-point span { display: block; font-size: .9rem; line-height: 1.65; color: rgba(255,255,255,.8); }
    .about-team { padding: 80px 56px; background: var(--grey); }
    .about-team .section-label { margin-bottom: 14px; }
    .about-team-intro { margin-bottom: 20px; }
    .team-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 420px)); justify-content: start; gap: 28px; }
    .team-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid rgba(17,17,17,.06); box-shadow: 0 20px 48px rgba(18,26,38,.05); }
    .team-photo-wrap { width: 70%; aspect-ratio: 4 / 5; max-height: 284px; overflow: hidden; background: #dde3ea; position: relative; margin: 0 auto; }
    .team-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; display: block; transition: transform .45s ease, filter .45s ease; filter: saturate(.92) contrast(1.02); }
    .team-card:hover .team-photo { transform: scale(1.02); filter: saturate(1) contrast(1.03); }
.team-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #e0e0e0; font-size: 2.5rem; font-weight: 700; color: #bbb; }
.team-photo-placeholder[hidden] { display: none; }
    .team-card-info { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
    .team-card h3 { font-size: 1.22rem; font-weight: 600; color: var(--black); margin-bottom: 4px; }
    .team-card .role { font-size: .78rem; color: #0072CE; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
    .expertise-row { margin-top: 16px; margin-bottom: 18px; }
    .expertise-tag { min-height: 30px; padding: 0 10px; background: #f4f7fb; border: 1px solid rgba(0,114,206,.12); color: #1f568b; font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
    .team-card p { font-size: .89rem; color: #555; line-height: 1.75; margin-bottom: 0; }
    .team-contact { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .team-contact a { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--link-color); text-decoration: none; transition: color .2s; }
    .team-contact a:hover { color: #0072CE; }
    .team-contact a.linkedin { color: #0077b5; }
    .team-contact a.linkedin:hover { color: #005885; }
    .about-page a:focus-visible,
    .about-page button:focus-visible {
      outline: 2px solid #0072CE;
      outline-offset: 3px;
    }
    @media (max-width: 1024px) {
      .about-mv-inner, .trust-points { grid-template-columns: 1fr; }
      .trust-strip-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      .about-hero {
        padding: 56px 24px 48px;
        min-height: 380px;
        aspect-ratio: 4 / 3;
        align-items: flex-end;
      }
      .about-hero-content {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
      }
      .about-hero h1 { font-size: 1.8rem; }
      .about-hero p {
        max-width: 28ch;
        line-height: 1.65;
      }
      .about-intro, .about-pillars, .about-mv, .trust-strip, .about-team { padding-left: 24px; padding-right: 24px; }
      .team-grid, .about-mv-inner { grid-template-columns: 1fr; }
      .team-grid { justify-content: stretch; }
      .pillars-anim {
        display: grid;
        grid-template-columns: 136px minmax(0, 1fr);
        gap: 18px 28px;
        align-items: start;
      }
      .pa-boxes {
        grid-column: 1;
        grid-row: 1 / span 2;
      }
      .pa-info { grid-column: 2; grid-row: 2; width: 100%; height: auto; }
      .pa-tagline {
        grid-column: 1 / span 2;
        grid-row: 2;
        min-height: 56px;
        padding-left: 0;
        justify-content: flex-start;
      }
      .pa-info {
        grid-row: 1;
        padding-left: 0;
        align-self: start;
      }
      .pa-card { position: relative; top: auto; transform: none; max-width: 100%; }
      .pa-card.show { transform: none; }
    }
    @media (max-width: 600px) {
      .about-hero {
        min-height: 420px;
        padding: 44px 20px 40px;
      }
      .about-hero-content {
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
      }
      .about-hero h1 { font-size: 1.7rem; line-height: 1.15; }
      .about-hero p,
      .about-intro p,
      .about-team-intro,
      .mv-card p,
      .trust-point span,
      .team-card p { font-size: .9rem; line-height: 1.7; }
      .about-intro h2, .about-pillars h2, .about-team h2 { font-size: 1.5rem; }
      .mv-card { padding: 28px 22px 24px; }
      .trust-strip-title { font-size: 1rem; }
      .team-grid { grid-template-columns: 1fr; }
      .team-card-info { padding: 22px 20px 24px; }
      .team-photo-wrap { width: 100%; max-height: 284px; }
      .team-contact { gap: 12px; }
      .team-contact a { font-size: .78rem; }
      .pillars-anim {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px 16px;
      }
      .pa-boxes {
        width: 88px;
        height: 88px;
        gap: 6px;
        padding-left: 2px;
      }
      .pa-box {
        width: 41px;
        height: 41px;
        border-radius: 6px;
      }
      .pa-tagline,
      .pa-info { padding-left: 0; }
      .pa-card { max-width: 100%; }
    }