/* ===== ABOUT PAGE — page-specific layout (story/timeline driven, not card-grid) ===== */

  .about-hero{
    background:var(--bg);
    padding:64px 0 0;
    position:relative;
    overflow:hidden;
  }
  .breadcrumb{
    font-size:0.84rem; color:var(--ink-soft); margin-bottom:22px;
    display:flex; align-items:center; gap:8px;
  }
  .breadcrumb a:hover{color:var(--blue);}
  .breadcrumb .sep{color:#C3CCDC;}
  .about-hero-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:end;
    padding-bottom:50px;
  }
  .about-hero h1{font-size:clamp(2rem, 3.6vw, 3rem); max-width:14ch; margin-bottom:18px;}
  .about-hero .lede{color:var(--ink-soft); font-size:1.06rem; max-width:48ch;}
  .about-hero-figure{
    background:var(--navy-deep); border-radius:18px; padding:30px;
    color:#fff; position:relative; overflow:hidden;
  }
  .about-hero-figure::after{
    content:''; position:absolute; width:140px; height:140px; border-radius:50%;
    background:var(--gold); opacity:0.14; bottom:-50px; right:-50px;
  }
  .about-hero-figure .num{font-family:var(--display); font-size:2.6rem; font-weight:700; color:var(--gold); line-height:1;}
  .about-hero-figure .lab{font-size:0.86rem; color:#CBD5E1; margin-top:6px;}
  .about-hero-figure .divider{height:1px; background:rgba(255,255,255,0.12); margin:20px 0;}

  /* Founding story — vertical narrative line, since order/time genuinely matters here */
  .story{background:var(--paper); padding:90px 0;}
  .story-head{max-width:600px; margin:0 auto 60px; text-align:center;}
  .timeline{
    position:relative; max-width:760px; margin:0 auto;
    padding-left:36px;
    border-left:2px solid var(--line);
  }
  .tl-item{position:relative; padding-bottom:46px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-item::before{
    content:''; position:absolute; left:-43px; top:2px;
    width:14px; height:14px; border-radius:50%;
    background:var(--gold); border:3px solid var(--paper);
    box-shadow:0 0 0 2px var(--navy);
  }
  .tl-year{font-family:var(--display); font-weight:700; color:var(--navy); font-size:1.1rem; margin-bottom:6px;}
  .tl-item h4{font-size:1.12rem; margin-bottom:8px;}
  .tl-item p{color:var(--ink-soft); font-size:0.96rem; max-width:58ch;}

  /* Mission / Vision — asymmetric two-panel, not identical cards */
  .mv{background:var(--bg); padding:90px 0;}
  .mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:20px; overflow:hidden; box-shadow:0 24px 56px -20px rgba(15,23,42,0.16);}
  .mv-panel{padding:48px;}
  .mv-panel.mission{background:var(--navy-deep); color:#fff;}
  .mv-panel.vision{background:var(--gold); color:var(--navy-deep);}
  .mv-panel .mv-icon{font-size:1.6rem; margin-bottom:18px; display:block;}
  .mv-panel h3{font-size:1.5rem; margin-bottom:16px;}
  .mv-panel.mission h3{color:#fff;}
  .mv-panel p{font-size:0.98rem; line-height:1.75;}
  .mv-panel.mission p{color:#CBD5E1;}
  .mv-panel.vision p{color:rgba(15,23,42,0.78);}

  /* Values — numbered, but justified: these are five ordered operating principles, read top to bottom */
  .values{background:var(--paper); padding:90px 0;}
  .values-list{max-width:820px; margin:0 auto;}
  .v-row{
    display:grid; grid-template-columns:70px 1fr; gap:24px;
    padding:28px 0; border-bottom:1px solid var(--line);
    align-items:flex-start;
  }
  .v-row:first-child{padding-top:0;}
  .v-row:last-child{border-bottom:none;}
  .v-num{font-family:var(--display); font-size:1.6rem; font-weight:700; color:var(--gold-deep);}
  .v-row h4{font-size:1.12rem; margin-bottom:6px;}
  .v-row p{color:var(--ink-soft); font-size:0.94rem; max-width:62ch;}

  /* Team — distinct from home's review-card pattern */
  .team{background:var(--bg); padding:90px 0;}
  .team-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
  .team-card{text-align:center;}
  .team-photo{
    width:100%; aspect-ratio:1; border-radius:16px; margin-bottom:16px;
    background:linear-gradient(150deg, var(--blue) 0%, var(--navy) 100%);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-family:var(--display); font-size:2.2rem; font-weight:700;
    position:relative; overflow:hidden;
  }
  .team-photo::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.25), transparent 50%);
  }
  .team-card h4{font-size:1.02rem; margin-bottom:4px;}
  .team-card .role{font-size:0.82rem; color:var(--blue); font-weight:600;}

  /* Certifications strip */
  .creds{background:var(--navy-deep); padding:50px 0; color:#fff;}
  .creds-row{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
  .creds-row .label{font-size:0.84rem; color:#9FB1D6; max-width:220px;}
  .creds-badges{display:flex; gap:28px; flex-wrap:wrap;}
  .creds-badges .badge{
    display:flex; align-items:center; gap:10px;
    font-size:0.88rem; font-weight:600; color:#E2E8F0;
  }
  .creds-badges .badge .ico{
    width:38px; height:38px; border-radius:9px; background:rgba(255,222,89,0.12);
    display:flex; align-items:center; justify-content:center; color:var(--gold);
  }

  @media (max-width:1024px){
    .about-hero-grid{grid-template-columns:1fr; gap:30px;}
    .team-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:768px){
    .mv-grid{grid-template-columns:1fr;}
    .v-row{grid-template-columns:50px 1fr;}
    .creds-row{flex-direction:column; text-align:center;}
  }