/* About Us page — scoped to .page-about */
body:has(.page-about) {
    background: #FFF8EF !important;
  }

  .page-about {
    --bg: #FFF8EF;
    --bg-soft: #FFF1DE;
    --surface: #FFFFFF;
    --ink: #21304A;
    --ink-muted: rgba(33,48,74,0.64);
    --ink-faint: rgba(33,48,74,0.42);
    --orange: #FF6B35;
    --orange-dark: #E2541F;
    --orange-light: rgba(255,107,53,0.13);
    --teal: #1FB6A6;
    --teal-light: rgba(31,182,166,0.13);
    --yellow: #FFC93C;
    --yellow-light: rgba(255,201,60,0.18);
    --navy-deep: #16233B;
    --navy-deep-2: #0F1A2C;
    --border: rgba(33,48,74,0.10);
    --r-card: 22px;
    --r-btn: 14px;
    --r-pill: 999px;
    --shadow-soft: 0 14px 34px rgba(33,48,74,0.09);
    --shadow-pop: 0 18px 40px rgba(255,107,53,0.22);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
  }

  .page-about img{max-width:100%; display:block;}
  .page-about a{color:inherit; text-decoration:none;}
  .page-about ul{list-style:none;}
  .page-about h1, .page-about h2, .page-about h3, .page-about h4{
      font-family:'Baloo Bhaijaan 2', 'Tajawal', sans-serif;
      font-weight:700;
      color:var(--ink);
      line-height:1.3;
    }
  .page-about .container{
      width:100%;
      max-width:1180px;
      margin:0 auto;
      padding:0 28px;
    }
  .page-about .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      font-weight:800;
      letter-spacing:0.06em;
      color:var(--orange-dark);
      background:var(--orange-light);
      padding:8px 18px;
      border-radius:var(--r-pill);
      margin-bottom:18px;
    }
  .page-about .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--orange);}
  .page-about .section-label{
      font-size:14px;
      font-weight:800;
      letter-spacing:0.08em;
      color:var(--teal);
      text-transform:uppercase;
      margin-bottom:10px;
      display:block;
    }
  .page-about .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-family:'Tajawal', sans-serif;
      font-weight:800;
      font-size:16px;
      padding:15px 30px;
      border-radius:var(--r-btn);
      cursor:pointer;
      border:none;
      transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
      white-space:nowrap;
    }
  .page-about .btn-primary{
      background:var(--orange);
      color:#fff;
      box-shadow:var(--shadow-pop);
    }
  .page-about .btn-primary:hover{
      background:var(--orange-dark);
      transform:translateY(-3px);
    }
  .page-about .btn-secondary{
      background:#fff;
      color:var(--ink);
      border:2px solid var(--border);
    }
  .page-about .btn-secondary:hover{
      border-color:var(--teal);
      color:var(--teal);
      transform:translateY(-3px);
    }
  .page-about .btn-ghost-light{
      background:rgba(255,255,255,0.12);
      color:#fff;
      border:2px solid rgba(255,255,255,0.35);
    }
  .page-about .btn-ghost-light:hover{
      background:rgba(255,255,255,0.22);
      transform:translateY(-3px);
    }
  .page-about .btn-sm{padding:10px 20px; font-size:14px;}
  .page-about .brand-mark img{width:130%; height:130%; object-fit:cover; object-position:top center; transform:translateY(8%);}
  .page-about .brand-name span{color:var(--orange);}
  .page-about .hero{
      position:relative;
      padding:84px 0 60px;
      overflow:hidden;
    }
  .page-about .hero::before{
      content:"";
      position:absolute;
      top:-160px; left:-120px;
      width:420px; height:420px;
      background:var(--yellow);
      opacity:.35;
      border-radius:50%;
      filter:blur(110px);
      z-index:0;
    }
  .page-about .hero::after{
      content:"";
      position:absolute;
      bottom:-180px; right:-140px;
      width:460px; height:460px;
      background:var(--teal);
      opacity:.25;
      border-radius:50%;
      filter:blur(120px);
      z-index:0;
    }
  .page-about .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.1fr 0.9fr;
      gap:50px;
      align-items:center;
    }
  .page-about .hero h1{
      font-size:clamp(2.1rem, 4.2vw, 3.2rem);
      margin-bottom:20px;
    }
  .page-about .hero h1 .hl{
      color:var(--orange);
    }
  .page-about .hero p.lead{
      font-size:18px;
      font-weight:700;
      color:var(--ink);
      margin-bottom:14px;
    }
  .page-about .hero p.body-text{
      font-size:16px;
      color:var(--ink-muted);
      margin-bottom:30px;
      max-width:560px;
    }
  .page-about .hero-ctas{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-bottom:34px;
    }
  .page-about .hero-proof{
      display:flex;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
    }
  .page-about .hero-proof .item{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:14px;
      font-weight:700;
      color:var(--ink-muted);
    }
  .page-about .hero-proof .item .num{
      font-family:'Baloo Bhaijaan 2', sans-serif;
      font-size:20px;
      color:var(--orange);
    }
  .page-about .hero-visual{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }
  .page-about .hero-blob{
      position:relative;
      width:100%;
      max-width:400px;
      aspect-ratio:1/1;
      border-radius:42% 58% 60% 40% / 48% 42% 58% 52%;
      background:linear-gradient(160deg, var(--yellow-light), var(--orange-light));
      border:2px dashed rgba(255,107,53,0.35);
      display:flex;
      align-items:center;
      justify-content:center;
      animation:floaty 6s ease-in-out infinite;
    }
  @keyframes floaty{
      0%,100%{transform:translateY(0px) rotate(0deg);}
      50%{transform:translateY(-14px) rotate(1.5deg);}
    }
  .page-about .hero-blob img{
      width:78%;
      filter:drop-shadow(0 18px 26px rgba(33,48,74,0.18));
    }
  .page-about .hero-chip{
      position:absolute;
      background:#fff;
      border-radius:16px;
      box-shadow:var(--shadow-soft);
      padding:10px 14px;
      display:flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      font-weight:800;
    }
  .page-about .hero-chip.c1{top:6%; right:-4%;}
  .page-about .hero-chip.c2{bottom:8%; left:-6%;}
  .page-about .hero-chip .ic{width:22px; height:22px; flex-shrink:0;}
  .page-about .story{
      padding:90px 0;
      position:relative;
    }
  .page-about .story-head{
      text-align:center;
      max-width:680px;
      margin:0 auto 50px;
    }
  .page-about .story-head h2{
      font-size:clamp(1.7rem, 3vw, 2.4rem);
      margin-bottom:14px;
    }
  .page-about .story-head p{
      color:var(--ink-muted);
      font-size:16px;
    }
  .page-about .story-compare{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      gap:28px;
      align-items:stretch;
    }
  .page-about .compare-card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--r-card);
      padding:32px 28px;
    }
  .page-about .compare-card.before{opacity:.85;}
  .page-about .compare-card.after{
      background:linear-gradient(165deg, #fff, var(--teal-light));
      border:1px solid rgba(31,182,166,0.3);
      box-shadow:var(--shadow-soft);
    }
  .page-about .compare-tag{
      display:inline-block;
      font-size:12px;
      font-weight:800;
      letter-spacing:.04em;
      padding:6px 14px;
      border-radius:var(--r-pill);
      margin-bottom:16px;
    }
  .page-about .compare-card.before .compare-tag{background:rgba(33,48,74,0.08); color:var(--ink-muted);}
  .page-about .compare-card.after .compare-tag{background:var(--teal); color:#fff;}
  .page-about .compare-card ul{display:flex; flex-direction:column; gap:14px;}
  .page-about .compare-card li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      font-size:15px;
      color:var(--ink-muted);
    }
  .page-about .compare-card.after li{color:var(--ink); font-weight:600;}
  .page-about .compare-card li .mark{flex-shrink:0; margin-top:3px;}
  .page-about .story-arrow{
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--orange);
    }
  .page-about .story-quote{
      margin-top:46px;
      text-align:center;
      max-width:740px;
      margin-inline:auto;
      font-family:'Baloo Bhaijaan 2', sans-serif;
      font-size:clamp(1.15rem, 2.2vw, 1.5rem);
      font-weight:600;
      color:var(--ink);
      position:relative;
      padding:0 30px;
    }
  .page-about .story-quote .qmark{
      font-size:60px;
      color:var(--orange-light);
      line-height:0;
      display:block;
      margin-bottom:6px;
      font-family:Georgia, serif;
    }
  .page-about .vm{
      padding:90px 0;
      background:var(--bg-soft);
      position:relative;
    }
  .page-about .vm-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:28px;
    }
  .page-about .vm-card{
      background:var(--surface);
      border-radius:var(--r-card);
      padding:38px 34px;
      border:1px solid var(--border);
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
  .page-about .vm-card .vm-icon{
      width:56px; height:56px;
      border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      margin-bottom:22px;
    }
  .page-about .vm-card.vision .vm-icon{background:var(--orange-light); color:var(--orange);}
  .page-about .vm-card.mission .vm-icon{background:var(--teal-light); color:var(--teal);}
  .page-about .vm-card h3{font-size:22px; margin-bottom:14px;}
  .page-about .vm-card p{color:var(--ink-muted); font-size:15.5px;}
  .page-about .vm-card .vm-tag{
      position:absolute;
      top:30px; left:30px;
      font-size:12px;
      font-weight:800;
      letter-spacing:.05em;
      color:var(--ink-faint);
    }
  .page-about .why{
      padding:90px 0;
    }
  .page-about .why-head{
      text-align:center;
      max-width:720px;
      margin:0 auto 54px;
    }
  .page-about .why-head h2{font-size:clamp(1.7rem, 3vw, 2.4rem); margin-bottom:14px;}
  .page-about .why-head p{color:var(--ink-muted); font-size:16px;}
  .page-about .why-grid{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:22px;
    }
  .page-about .why-card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--r-card);
      padding:30px 24px;
      transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
  .page-about .why-card:hover{
      transform:translateY(-8px);
      box-shadow:var(--shadow-soft);
      border-color:rgba(255,107,53,0.3);
    }
  .page-about .why-card .ic-wrap{
      width:54px; height:54px;
      border-radius:15px;
      background:var(--orange-light);
      color:var(--orange);
      display:flex; align-items:center; justify-content:center;
      margin-bottom:20px;
    }
  .page-about .why-card:nth-child(2) .ic-wrap{background:var(--teal-light); color:var(--teal);}
  .page-about .why-card:nth-child(3) .ic-wrap{background:var(--yellow-light); color:var(--orange-dark);}
  .page-about .why-card:nth-child(4) .ic-wrap{background:var(--orange-light); color:var(--orange);}
  .page-about .why-card h4{font-size:17.5px; margin-bottom:10px;}
  .page-about .why-card p{font-size:14.5px; color:var(--ink-muted);}
  .page-about .partners{
      padding:90px 0;
      background:var(--navy-deep);
      color:#fff;
      position:relative;
      overflow:hidden;
    }
  .page-about .partners::before{
      content:"";
      position:absolute;
      top:-120px; right:-100px;
      width:380px; height:380px;
      background:var(--teal);
      opacity:.18;
      border-radius:50%;
      filter:blur(120px);
    }
  .page-about .partners-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:0.9fr 1.1fr;
      gap:54px;
      align-items:center;
    }
  .page-about .partners-intro{
      display:flex;
      flex-direction:column;
      gap:0;
      align-items:flex-start;
    }
  .page-about .partners .section-label{
      color:var(--yellow);
      margin-bottom:10px;
    }
  .page-about .partners h2{
      color:#fff !important;
      font-size:clamp(1.7rem, 3vw, 2.3rem);
      margin-bottom:18px;
    }
  .page-about .partners-intro p{
      color:rgba(255,255,255,0.72);
      font-size:16px;
      margin-bottom:26px;
    }
  .page-about .about-partners-static{
      display:flex !important;
      flex-direction:row !important;
      flex-wrap:nowrap !important;
      align-items:center;
      justify-content:flex-start;
      gap:16px;
      margin-top:8px;
    }
  .page-about .about-partners-carousel{
      margin-top:8px;
      width:100%;
      max-width:100%;
    }
  .page-about .swiper-about-partners{
      overflow:hidden;
      padding:4px 0;
    }
  .page-about .swiper-about-partners .swiper-wrapper{
      align-items:center;
    }
  .page-about .swiper-about-partners .swiper-slide{
      width:64px !important;
      flex-shrink:0;
    }
  .page-about .about-partner-logo{
      flex:0 0 64px;
      width:64px;
      height:64px;
      min-width:64px;
      min-height:64px;
      border-radius:50%;
      background:#fff;
      box-shadow:0 8px 20px rgba(0,0,0,0.16);
      overflow:hidden;
      display:inline-flex !important;
      align-items:center;
      justify-content:center;
      padding:10px;
      box-sizing:border-box;
      transition:transform .25s ease, box-shadow .25s ease;
    }
  .page-about .about-partner-logo:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 24px rgba(0,0,0,0.2);
    }
  .page-about .about-partner-logo img{
      width:100%;
      height:100%;
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      display:block;
    }
  .page-about .partners-list{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
  .page-about .partner-item{
      display:flex;
      gap:16px;
      align-items:flex-start;
      background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:18px;
      padding:22px;
      transition:background .25s ease, border-color .25s ease;
    }
  .page-about .partner-item:hover{
      background:rgba(255,255,255,0.09);
      border-color:rgba(255,201,60,0.4);
    }
  .page-about .partner-item .pi-icon{
      width:42px; height:42px;
      border-radius:12px;
      background:rgba(255,201,60,0.16);
      color:var(--yellow);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
  .page-about .partner-item h4{color:#fff !important; font-size:16px; margin-bottom:6px;}
  .page-about .partner-item p{color:rgba(255,255,255,0.65); font-size:14.5px;}
  .page-about .partner-item .nawat{color:var(--yellow); font-weight:800;}
  .page-about .testi{
      padding:90px 0;
    }
  .page-about .testi-head{
      text-align:center;
      max-width:600px;
      margin:0 auto 50px;
    }
  .page-about .testi-head h2{font-size:clamp(1.7rem, 3vw, 2.3rem); margin-bottom:12px;}
  .page-about .testi-head p{color:var(--ink-muted);}
  .page-about .testi-carousel-wrap{
      position:relative;
      padding:0 2px;
      --testi-card-height:320px;
    }
  .page-about .swiper-about-testi{
      overflow:hidden;
      padding-bottom:4px;
    }
  .page-about .swiper-about-testi .swiper-wrapper{
      align-items:stretch;
    }
  .page-about .swiper-about-testi .swiper-slide{
      height:var(--testi-card-height);
      display:flex;
      box-sizing:border-box;
    }
  .page-about .testi-card{
      background:var(--surface);
      border:none;
      border-radius:18px;
      padding:30px 28px 24px;
      width:100%;
      height:var(--testi-card-height);
      min-height:var(--testi-card-height);
      max-height:var(--testi-card-height);
      display:flex;
      flex-direction:column;
      overflow:hidden;
      box-shadow:0 10px 28px rgba(33,48,74,0.08);
      transition:box-shadow .3s ease;
    }
  .page-about .testi-card:hover{box-shadow:0 14px 34px rgba(33,48,74,0.12);}
  .page-about .testi-card .stars{
      color:var(--yellow);
      font-size:14px;
      margin-bottom:16px;
      letter-spacing:3px;
      flex:0 0 auto;
      text-align:start;
    }
  .page-about .testi-body{
      flex:1 1 0;
      min-height:0;
      overflow-x:hidden;
      overflow-y:auto;
      font-size:15px;
      color:var(--ink-muted);
      line-height:1.8;
      text-align:start;
      padding-inline-end:8px;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:thin;
      scrollbar-color:rgba(33,48,74,0.22) transparent;
    }
  .page-about .testi-body::-webkit-scrollbar{width:5px;}
  .page-about .testi-body::-webkit-scrollbar-thumb{
      background:rgba(33,48,74,0.22);
      border-radius:999px;
    }
  .page-about .testi-body p{
      margin-bottom:10px;
      color:var(--ink-muted);
    }
  .page-about .testi-body p:last-child{margin-bottom:0;}
  .page-about .testi-footer{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:12px;
      margin-top:auto;
      padding-top:16px;
    }
  .page-about .testi-author-name{
      font-family:'Baloo Bhaijaan 2', 'Tajawal', sans-serif;
      font-size:15px;
      font-weight:700;
      color:var(--ink);
      line-height:1.2;
    }
  .page-about .testi-avatar{
      width:40px;
      height:40px;
      border-radius:50%;
      display:inline-block;
      flex-shrink:0;
      box-shadow:0 4px 10px rgba(33,48,74,0.12);
    }
  .page-about .testi-avatar--gold{background:#F0B429;}
  .page-about .testi-avatar--teal{background:#1FB6A6;}
  .page-about .testi-avatar--orange{background:#FF6B35;}
  .page-about .testi-carousel-dots{
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top:12px;
    }
  .page-about .swiper-about-testi .swiper-pagination{
      position:static;
      width:auto;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
  }
  .page-about .swiper-about-testi .swiper-pagination-bullet{
      width:8px;
      height:8px;
      background:rgba(33,48,74,0.2);
      opacity:1;
      transition:transform .2s ease, background .2s ease;
  }
  .page-about .swiper-about-testi .swiper-pagination-bullet-active{
      background:var(--orange);
      transform:scale(1.2);
  }
  .page-about .cta-final{
      padding:100px 0 110px;
      position:relative;
      overflow:hidden;
    }
  .page-about .cta-final-inner{
      position:relative;
      background:linear-gradient(135deg, var(--orange) 0%, #FF8C5A 100%);
      border-radius:32px;
      padding:64px 50px;
      text-align:center;
      overflow:hidden;
      box-shadow:0 30px 60px rgba(255,107,53,0.3);
    }
  .page-about .cta-final-inner::before{
      content:"";
      position:absolute;
      width:300px; height:300px;
      background:rgba(255,255,255,0.12);
      border-radius:50%;
      top:-120px; left:-80px;
    }
  .page-about .cta-final-inner::after{
      content:"";
      position:absolute;
      width:220px; height:220px;
      background:rgba(255,255,255,0.1);
      border-radius:50%;
      bottom:-100px; right:-60px;
    }
  .page-about .cta-final h2{
      position:relative;
      color:#fff !important;
      font-size:clamp(1.8rem, 3.4vw, 2.7rem);
      margin-bottom:16px;
    }
  .page-about .cta-final p{
      position:relative;
      color:rgba(255,255,255,0.92);
      font-size:17px;
      max-width:540px;
      margin:0 auto 36px;
    }
  .page-about .cta-final-btns{
      position:relative;
      display:flex;
      justify-content:center;
      gap:16px;
      flex-wrap:wrap;
    }
  .page-about .cta-final a.btn-primary,
  .page-about .cta-final .btn.btn-primary{
      background:#fff !important;
      background-color:#fff !important;
      border:2px solid #fff !important;
      border-color:#fff !important;
      color:var(--orange) !important;
      box-shadow:0 14px 30px rgba(0,0,0,0.18) !important;
      filter:none !important;
    }
  .page-about .cta-final a.btn-primary:hover,
  .page-about .cta-final .btn.btn-primary:hover{
      background:#FFF4EC !important;
      background-color:#FFF4EC !important;
      border-color:#FFF4EC !important;
      color:var(--orange-dark) !important;
      filter:none !important;
      transform:translateY(-3px);
    }
  .page-about .cta-final a.btn-ghost-light,
  .page-about .cta-final .btn.btn-ghost-light{
      background:transparent !important;
      background-color:transparent !important;
      border:2px solid rgba(255,255,255,0.85) !important;
      border-color:rgba(255,255,255,0.85) !important;
      color:#fff !important;
      filter:none !important;
    }
  .page-about .cta-final a.btn-ghost-light:hover,
  .page-about .cta-final .btn.btn-ghost-light:hover{
      background:rgba(255,255,255,0.15) !important;
      background-color:rgba(255,255,255,0.15) !important;
      border-color:#fff !important;
      color:#fff !important;
      filter:none !important;
      transform:translateY(-3px);
    }
  .page-about .mascot-peek{
      position:absolute;
      bottom:-6px;
      left:36px;
      width:120px;
      z-index:2;
      display:none;
    }
  .page-about .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
  .page-about .reveal.visible{opacity:1; transform:translateY(0);}
  @media (max-width: 980px){.page-about .hero-grid{grid-template-columns:1fr; text-align:center;}.page-about .hero p.body-text{margin-inline:auto;}.page-about .hero-ctas{justify-content:center;}.page-about .hero-proof{justify-content:center;}.page-about .hero-visual{order:-1; margin-bottom:10px;}.page-about .story-compare{grid-template-columns:1fr; gap:18px;}.page-about .story-arrow{transform:rotate(90deg); padding:6px 0;}.page-about .vm-grid{grid-template-columns:1fr;}.page-about .why-grid{grid-template-columns:repeat(2, 1fr);}.page-about .partners-grid{grid-template-columns:1fr; gap:34px;}.page-about .partners-intro{align-items:center;}.page-about .about-partners-static{justify-content:center !important;}}
  @media (max-width: 560px){.page-about .why-grid{grid-template-columns:1fr;}.page-about .cta-final-inner{padding:46px 24px;}.page-about .hero{padding:60px 0 40px;}}