/* ============= 1. PAGE HEADER (split editorial hero) ============= */
.about-page-header{
  position:relative;
  background:var(--c-navy, #061122);
  color:#fff;
  padding:7rem 0 6rem;
  overflow:hidden;
  isolation:isolate;
}
.about-page-header::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/img/about/about.webp');
  background-size:cover;
  background-position:center right;
  opacity:.45;
  -webkit-mask-image:linear-gradient(to right, transparent 30%, #000 95%);
          mask-image:linear-gradient(to right, transparent 30%, #000 95%);
  z-index:-2;
}
.about-page-header::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 100% 30%, rgba(239,73,51,.30), transparent 55%),
    linear-gradient(90deg, rgba(6,17,34,.92) 0%, rgba(6,17,34,.55) 70%, rgba(6,17,34,.15) 100%);
  z-index:-1;
}
.about-page-header__inner{
  position:relative;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  gap:1.8rem;
}
.about-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  list-style:none;
  padding:.55rem 1.1rem;
  margin:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  border-radius:50px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.about-breadcrumb li{ display:inline-flex; align-items:center; gap:.6rem; }
.about-breadcrumb a{ color:rgba(255,255,255,.78); text-decoration:none; transition:color .2s; }
.about-breadcrumb a:hover{ color:#fff; }
.about-breadcrumb li + li::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--primary);
  margin-right:.2rem;
}
.about-breadcrumb .current{ color:var(--primary); }

.about-page-header h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  font-weight:900;
  margin:0;
  color:#fff;
  letter-spacing:-.02em;
  line-height:1;
  max-width:780px;
}
.about-page-header h1::after{
  content:"";
  display:block;
  width:90px;
  height:5px;
  background:var(--primary);
  margin:1.6rem 0 0;
  border-radius:3px;
}
.about-page-header__tagline{
  margin:1.5rem 0 0;
  font-size:1.05rem;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:520px;
}

/* Floating "since" badge – purely decorative */
.about-page-header__since{
  position:absolute;
  right:max(2rem, 6vw);
  bottom:-32px;
  display:none;
  align-items:center;
  gap:.7rem;
  background:var(--primary);
  color:#fff;
  padding:1rem 1.4rem;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(239,73,51,.35);
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.04em;
  z-index:5;
}
@media (min-width:1024px){ .about-page-header__since{ display:inline-flex; } }
.about-page-header__since strong{
  font-size:1.6rem;
  line-height:1;
}
.about-page-header__since span{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.92;
}

/* ============= 2. STATS – override .home-stats only on about page ============= */
.about-page .home-stats{
  background:linear-gradient(180deg, #fff 0%, var(--c-bg-alt) 100%);
  padding:5rem 0;
}
.about-page .home-stats__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.4rem;
}
.about-page .home-stats .stat-item{
  background:#fff;
  border:1px solid rgba(6,17,34,.06);
  border-left:4px solid var(--primary);
  border-radius:6px;
  padding:2rem 1.6rem;
  text-align:left;
  box-shadow:0 6px 18px rgba(6,17,34,.04);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}
.about-page .home-stats .stat-item::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:90px; height:90px;
  background:radial-gradient(circle at top right, rgba(239,73,51,.10), transparent 70%);
  pointer-events:none;
}
.about-page .home-stats .stat-item:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(6,17,34,.10);
}
.about-page .home-stats .stat-item__top{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:.9rem;
}
.about-page .home-stats .stat-icon{
  width:42px; height:42px;
  background:rgba(239,73,51,.10);
  border-radius:10px;
  padding:8px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.about-page .home-stats .stat-icon img{
  width:100%; height:100%;
  object-fit:contain;
  filter:none;
}
.about-page .home-stats .stat-numbers{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 4vw, 2.8rem);
  font-weight:900;
  line-height:1;
  color:var(--c-text);
  letter-spacing:-.02em;
}
.about-page .home-stats .stat-numbers .suffix{
  color:var(--primary);
  margin-left:.1em;
}
.about-page .home-stats .stat-item h5{
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:800;
  margin:0 0 .55rem;
  color:var(--c-text);
}
.about-page .home-stats .stat-item p{
  font-size:.88rem;
  line-height:1.55;
  color:var(--c-text-soft);
  margin:0;
}
@media (max-width:980px){ .about-page .home-stats__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .about-page .home-stats__grid{ grid-template-columns:1fr; } }

/* ============= 3. INTRO – sticky title + numbered tile bullets ============= */
.about-intro{
  background:#fff;
  padding:6rem 0 5rem;
  position:relative;
}
.about-intro::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:6px;
  background:linear-gradient(90deg, var(--primary) 0%, transparent 60%);
}
.about-intro__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  max-width:1180px;
  margin:0 auto;
  counter-reset:bullet;
}
.about-intro__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:.8rem;
}
.about-intro__eyebrow::before{
  content:"";
  width:36px; height:2px;
  background:var(--primary);
}
.about-intro h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight:800;
  margin:0 0 1.5rem;
  color:var(--c-text);
  line-height:1.25;
  letter-spacing:-.01em;
}
.about-intro h2 em{
  display:block;
  font-style:normal;
  font-weight:500;
  font-size:.65em;
  color:var(--c-text-soft);
  line-height:1.6;
  margin-top:1rem;
  padding-left:1.2rem;
  border-left:3px solid var(--primary);
}
.about-intro__lead{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--c-text);
  margin:.5rem 0 1.6rem;
  display:flex;
  align-items:center;
  gap:.8rem;
}
.about-intro__lead::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(6,17,34,.15), transparent);
}

.about-bullets{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.2rem;
  margin:1rem 0 2.5rem;
}
.about-bullet{
  position:relative;
  display:block;
  background:#fff;
  border:1px solid rgba(6,17,34,.08);
  border-radius:14px;
  padding:1.6rem 1.4rem 1.4rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  counter-increment:bullet;
  overflow:hidden;
}
.about-bullet::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:0; height:3px;
  background:var(--primary);
  transition:width .35s ease;
}
.about-bullet:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(6,17,34,.08);
  border-color:rgba(239,73,51,.35);
}
.about-bullet:hover::before{ width:100%; }

.about-bullet__check{
  width:48px;
  height:48px;
  border-radius:12px;
  background:transparent;
  color:var(--primary);
  border:2px solid currentColor;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.05rem;
  margin:0 0 1rem;
  box-shadow:none;
  letter-spacing:.02em;
}
.about-bullet__check i{ display:none; }
.about-bullet__check::before{
  content:counter(bullet, decimal-leading-zero);
}
.about-bullet:hover .about-bullet__check{
  background:var(--primary);
  color:#fff;
}

.about-bullet__body{ display:block; }
.about-bullet__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.02rem;
  color:var(--c-text);
  margin:0 0 .6rem;
  line-height:1.35;
}
.about-bullet ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.about-bullet li{
  font-size:.88rem;
  line-height:1.55;
  color:var(--c-text-soft);
  position:relative;
  padding-left:1rem;
}
.about-bullet li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
}

.about-intro__btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:transparent;
  color:var(--primary);
  border:2px solid var(--primary);
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
  padding:.95rem 1.8rem;
  border-radius:50px;
  text-decoration:none;
  transition:background .2s, color .2s, transform .2s;
}
.about-intro__btn:hover{
  background:var(--primary);
  color:#fff;
  transform:translateX(4px);
}
.about-intro__btn i{ transition:transform .25s; }
.about-intro__btn:hover i{ transform:translateY(3px); }

.about-us-more-btn{
      width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-us-more-btn a {

}

@media (max-width:920px){ .about-bullets{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .about-bullets{ grid-template-columns:1fr; } }

/* ============= 4. DETAIL BLOCKS – chapter / asymmetric editorial ============= */
.about-detail{
  padding:5.5rem 0;
  background:#fff;
  position:relative;
}
.about-detail.muted{
  background:var(--c-bg-alt);
}
.about-detail__grid{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:4rem;
  align-items:center;
}
.about-detail.reverse .about-detail__grid{
  grid-template-columns:6fr 5fr;
  direction:rtl;
}
.about-detail.reverse .about-detail__grid > *{ direction:ltr; }

/* Image with offset red outline frame */
.about-detail__img{
  position:relative;
  border-radius:0;
  overflow:visible;
  aspect-ratio:4/5;
  box-shadow:none;
  isolation:isolate;
}
.about-detail__img::before{
  content:"";
  position:absolute;
  top:18px; left:18px;
  width:100%; height:100%;
  border:3px solid var(--primary);
  border-radius:6px;
  z-index:-1;
  transition:top .3s ease, left .3s ease;
}
.about-detail__img::after{
  content:none;
}
.about-detail__img img{
  position:relative;
  z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:6px;
  box-shadow:0 24px 50px rgba(6,17,34,.15);
  transition:transform .5s ease;
}
.about-detail:hover .about-detail__img::before{
  top:10px; left:10px;
}
.about-detail:hover .about-detail__img img{
  transform:translate(-4px,-4px);
}

/* Text column */
.about-detail__text{
  position:relative;
  padding:.5rem 0;
}

/* Massive chapter number derived from existing pill */
.about-detail__pill{
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  gap:.6rem;
  background:transparent;
  color:var(--c-text-soft);
  padding:0;
  border-radius:0;
  margin:0 0 1.4rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:left;
  line-height:1.4;
}
.about-detail__pill .num{
  width:auto;
  height:auto;
  background:transparent;
  color:var(--primary);
  border-radius:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3.6rem, 8vw, 6rem);
  line-height:.85;
  letter-spacing:-.04em;
  display:inline-flex;
  align-items:flex-start;
  position:relative;
  padding-left:0;
}
.about-detail__pill .num::before{
  content:"0";
}
.about-detail__pill .num::after{
  content:"/05";
  font-size:.28em;
  color:var(--c-text-soft);
  font-weight:600;
  letter-spacing:.08em;
  margin-left:.4rem;
  margin-top:.5rem;
  align-self:flex-end;
  padding-bottom:.3em;
}

.about-detail__text h3{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 2.7vw, 2.1rem);
  font-weight:800;
  margin:0 0 1.2rem;
  color:var(--c-text);
  line-height:1.2;
  letter-spacing:-.01em;
  position:relative;
  padding-left:1.1rem;
}
.about-detail__text h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  bottom:.35em;
  width:4px;
  background:var(--primary);
  border-radius:3px;
}
.about-detail__text p{
  font-size:1rem;
  line-height:1.75;
  color:var(--c-text-soft);
  margin:0 0 1rem;
  padding-left:1.1rem;
}
.about-detail__text p:last-child{ margin-bottom:0; }

/* Subtle separator line between blocks */
.about-detail + .about-detail::before{
  content:"";
  display:block;
  width:60px;
  height:2px;
  background:var(--primary);
  margin:0 auto 1rem;
  position:relative;
  top:-2.5rem;
}

@media (max-width:900px){
  .about-detail{ padding:3.5rem 0; }
  .about-detail__grid,
  .about-detail.reverse .about-detail__grid{
    grid-template-columns:1fr;
    gap:2.2rem;
    direction:ltr;
  }
  .about-detail__img{ order:-1; aspect-ratio:5/4; }
  .about-detail__img::before{ top:10px; left:10px; }
}

/* ============= UTIL ============= */
.about-page main{ padding-top:0; }