/* ============================================
       ABOUT PAGE — HERO
       ============================================ */
    .about-hero {
      position: relative;
      padding: 200px 0 100px;
      overflow: hidden;
      color: #fff;
      min-height: 600px;
      display: flex;
      align-items: flex-end;
    }
    .about-hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .about-hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .about-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 71, 107,0.4) 0%, rgba(0, 71, 107,0.85) 70%, rgba(0, 71, 107,0.95) 100%);
    }
    .about-hero-inner {
      position: relative;
      z-index: 1;
    }
    .about-hero-inner > * {
      max-width: 820px;
    }
    .about-hero-label {
      display: inline-block;
      font-family: var(--font-label);
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      margin-bottom: 20px;
    }
    .about-hero-title {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 72px;
      line-height: 1.02;
      letter-spacing: -0.029em;
      margin-bottom: 24px;
    }
    .about-hero-sub {
      font-size: 20px;
      line-height: 32px;
      color: rgba(255,255,255,0.8);
      max-width: 600px;
    }

    /* ============================================
       MISSION STATEMENT
       ============================================ */
    .about-mission {
      padding: 100px 0;
      background: #fff;
    }
    .about-mission-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .about-mission-text {
      max-width: 540px;
    }
    .about-mission-label {
      display: inline-block;
      font-family: var(--font-label);
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #477080;
      margin-bottom: 16px;
    }
    .about-mission-title {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 44px;
      letter-spacing: -0.029em;
      line-height: 1.1;
      color: #00476b;
      margin-bottom: 24px;
    }
    .about-mission-body {
      font-size: 16px;
      line-height: 28px;
      color: #333333;
      opacity: 0.85;
    }
    .about-mission-body + .about-mission-body {
      margin-top: 16px;
    }
    .about-mission-photos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
      height: 520px;
    }
    .about-mission-photo {
      border-radius: 16px;
      overflow: hidden;
    }
    .about-mission-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .about-mission-photo:first-child {
      grid-row: span 2;
    }

    /* ============================================
       STORY TIMELINE
       ============================================ */
    .about-story {
      padding: 100px 0;
      background: #f8f9fa;
      border-top: 1px solid #e8e4e0;
    }
    .about-story-header {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 64px;
    }
    .about-story-title {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 44px;
      letter-spacing: -0.029em;
      color: #00476b;
      margin-bottom: 16px;
    }
    .about-story-desc {
      font-size: 16px;
      line-height: 28px;
      color: #333333;
      opacity: 0.75;
    }
    .timeline {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, #477080 0%, #e8e4e0 100%);
      transform: translateX(-50%);
    }
    .timeline-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 48px;
      position: relative;
    }
    .timeline-item:nth-child(odd) {
      flex-direction: row-reverse;
    }
    .timeline-item:nth-child(odd) .timeline-content {
      padding-left: 88px;
      padding-right: 0;
      text-align: left;
    }
    .timeline-item:nth-child(even) .timeline-content {
      padding-right: 88px;
      padding-left: 0;
      text-align: right;
    }
    .timeline-dot {
      position: absolute;
      left: 50%;
      top: 6px;
      width: 16px;
      height: 16px;
      background: #477080;
      border: 3px solid #fff;
      border-radius: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 0 3px #477080;
      z-index: 1;
    }
    .timeline-content {
      flex: 0 0 50%;
    }
    .timeline-year {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 28px;
      color: #477080;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .timeline-text {
      font-size: 15px;
      line-height: 24px;
      color: #333333;
      opacity: 0.8;
    }

    /* ============================================
       VALUES GRID
       ============================================ */
    .about-values {
      padding: 100px 0;
      background: #00476b;
      color: #fff;
    }
    .about-values-header {
      text-align: center;
      margin-bottom: 64px;
    }
    .about-values-label {
      font-family: var(--font-label);
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-bottom: 16px;
      display: block;
    }
    .about-values-title {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 44px;
      letter-spacing: -0.029em;
    }
    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    .value-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 40px 32px;
      transition: background 0.3s, border-color 0.3s;
    }
    .value-card:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.2);
    }
    .value-icon {
      width: 56px;
      height: 56px;
      background: rgba(255,255,255,0.08);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }
    .value-icon .material-symbols-rounded {
      font-size: 28px;
      color: rgba(255,255,255,0.7);
    }
    .value-title {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.016em;
      margin-bottom: 12px;
    }
    .value-desc {
      font-size: 14.5px;
      line-height: 24px;
      color: rgba(255,255,255,0.65);
    }

    /* ============================================
       BY THE NUMBERS
       ============================================ */
    .about-numbers {
      padding: 100px 0;
      background: #fff;
    }
    .about-numbers-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .about-numbers-image {
      border-radius: 20px;
      overflow: hidden;
      height: 480px;
    }
    .about-numbers-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .numbers-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .number-item {
      padding: 28px;
      background: #f0f4f8;
      border-radius: 16px;
      border: 1px solid #e0e9ef;
    }
    .number-value {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 48px;
      letter-spacing: -0.029em;
      color: #477080;
      line-height: 1;
      margin-bottom: 8px;
    }
    .number-label {
      font-size: 14px;
      line-height: 20px;
      color: #333333;
      opacity: 0.75;
    }

    /* ============================================
       TECHNOLOGY SECTION
       ============================================ */
    .about-tech {
      padding: 100px 0;
      background: #f8f9fa;
      border-top: 1px solid #e8e4e0;
    }
    .about-tech-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 56px;
    }
    .about-tech-title {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 40px;
      letter-spacing: -0.028em;
      color: #00476b;
      margin-bottom: 14px;
    }
    .about-tech-desc {
      font-size: 16px;
      line-height: 26px;
      color: #333333;
      opacity: 0.75;
    }
    .tech-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .tech-card {
      background: #fff;
      border: 1px solid #e8e4e0;
      border-radius: 20px;
      padding: 40px 32px;
      transition: box-shadow 0.3s, transform 0.2s;
    }
    .tech-card:hover {
      box-shadow: 0 12px 40px rgba(0, 71, 107,0.08);
      transform: translateY(-3px);
    }
    .tech-card-icon {
      width: 52px;
      height: 52px;
      background: #00476b;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }
    .tech-card-icon .material-symbols-rounded {
      font-size: 26px;
      color: rgba(255,255,255,0.7);
    }
    .tech-card h3 {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 20px;
      letter-spacing: -0.017em;
      color: #00476b;
      margin-bottom: 10px;
    }
    .tech-card p {
      font-size: 14px;
      line-height: 23px;
      color: #333333;
      opacity: 0.75;
    }

    /* ============================================
       TEAM APPROACH SPLIT
       ============================================ */
    .about-team {
      padding: 100px 0;
      background: #fff;
    }
    .about-team-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .about-team-inner.reverse {
      direction: rtl;
    }
    .about-team-inner.reverse > * {
      direction: ltr;
    }
    .about-team-photos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .about-team-photo {
      border-radius: 14px;
      overflow: hidden;
      height: 200px;
    }
    .about-team-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
    }
    .about-team-photo:first-child {
      grid-column: span 2;
      height: 260px;
    }
    .about-team-photos--single {
      display: block;
    }
    .about-team-photos--single .about-team-photo,
    .about-team-photos--single .about-team-photo:first-child {
      height: 360px;
    }
    .about-team-photos--single .about-team-photo img {
      object-position: center;
    }
    .about-team-text h2 {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 38px;
      letter-spacing: -0.026em;
      color: #00476b;
      margin-bottom: 20px;
      line-height: 1.12;
    }
    .about-team-text p {
      font-size: 16px;
      line-height: 28px;
      color: #333333;
      opacity: 0.85;
      margin-bottom: 16px;
    }
    .about-team-text .btn {
      margin-top: 12px;
    }

    /* Leadership feature: a staggered portrait wall, not a card grid */
    .about-leadership-feature {
      overflow: hidden;
    }
    .about-leadership-portraits {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      padding: 24px 34px 56px 12px;
      isolation: isolate;
    }
    .about-leadership-portraits::before {
      content: '';
      position: absolute;
      inset: 0 0 24px 34px;
      border-radius: 44px 18px 44px 18px;
      background: #eef5f8;
      z-index: -1;
    }
    .about-leadership-portraits::after {
      content: '';
      position: absolute;
      width: 92px;
      height: 92px;
      right: -14px;
      bottom: 2px;
      border: 1px solid rgba(94, 139, 158, 0.35);
      border-radius: 50%;
      z-index: -1;
    }
    .about-leadership-portrait {
      margin: 0;
      overflow: hidden;
      border: 4px solid #fff;
      border-radius: var(--radius-btn);
      background: #fff;
      box-shadow: 0 18px 38px rgba(0, 71, 107, 0.14);
    }
    .about-leadership-portrait:nth-child(even) {
      transform: translateY(32px);
    }
    .about-leadership-portrait img {
      display: block;
      width: 100%;
      aspect-ratio: 5 / 4;
      object-fit: cover;
      object-position: center 20%;
    }
    .about-leadership-portrait figcaption {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding: 11px 12px 12px;
      color: #00476b;
    }
    .about-leadership-portrait strong {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
    }
    .about-leadership-portrait span {
      flex: 0 0 auto;
      font-family: var(--font-label);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #477080;
    }
    .about-leadership-label {
      display: block;
      margin-bottom: 14px;
      font-family: var(--font-label);
      font-size: 11px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: #477080;
    }

    /* ============================================
       QUOTE / PULL SECTION
       ============================================ */
    .about-quote {
      padding: 80px 0;
      background: linear-gradient(135deg, #00476b 0%, #477080 100%);
      color: #fff;
      text-align: center;
    }
    .about-quote blockquote {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 36px;
      letter-spacing: -0.023em;
      line-height: 1.25;
      max-width: 900px;
      margin: 0 auto 20px;
    }
    .about-quote cite {
      font-style: normal;
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0.5px;
    }

    /* ============================================
       ABOUT RESPONSIVE
       ============================================ */
    @media (max-width: 1024px) {
      .about-hero { padding: 160px 0 80px; min-height: auto; }
      .about-hero-title { font-size: 52px; }
      .about-mission-inner,
      .about-numbers-inner,
      .about-team-inner { grid-template-columns: 1fr; gap: 48px; }
      .about-team-inner.reverse { direction: ltr; }
      .about-mission-photos { height: 380px; }
      .values-grid, .tech-cards { grid-template-columns: repeat(2, 1fr); }
      .timeline::before { left: 24px; }
      .timeline-item, .timeline-item:nth-child(odd) { flex-direction: row; text-align: left; }
      .timeline-dot { left: 24px; }
      .timeline-item .timeline-content,
      .timeline-item:nth-child(odd) .timeline-content { padding-left: 60px; padding-right: 0; flex: 1; }
    }
    @media (max-width: 768px) {
      .about-hero-title { font-size: 38px; letter-spacing: -1.5px; }
      .about-hero-sub { font-size: 16px; }
      .about-mission-title, .about-story-title, .about-values-title, .about-tech-title { font-size: 32px; }
      .about-mission-photos { height: 280px; }
      .values-grid, .tech-cards { grid-template-columns: 1fr; }
      .numbers-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
      .number-value { font-size: 36px; }
      .about-quote blockquote { font-size: 24px; }
      .about-team-text h2 { font-size: 30px; }
      .about-leadership-portraits {
        gap: 10px;
        padding: 14px 22px 38px 4px;
      }
      .about-leadership-portraits::before { inset: 0 0 14px 20px; }
      .about-leadership-portrait:nth-child(even) { transform: translateY(20px); }
      .about-leadership-portrait figcaption {
        display: block;
        padding: 9px 9px 10px;
      }
      .about-leadership-portrait strong {
        display: block;
        font-size: 12px;
      }
      .about-leadership-portrait span {
        display: block;
        margin-top: 3px;
        font-size: 8px;
      }
    }