/* =============================================================
   AJK Welfare — About page
   Layout mirrors Figma frame "Desktop - 7" (1440 × 4800)
   Builds on home.css tokens, header, buttons, footer and reveal.
   ============================================================= */

.about-page .site-header{border-bottom-width:0}

/* -------------------------------------------------------------
   Shared eyebrow
   ------------------------------------------------------------- */.ab-eyebrow{
  margin:0;
  font-family:var(--font-display);
  font-size:14px;
  line-height:18px;
  font-weight:600;
  letter-spacing:1.12px;
  text-transform:uppercase;
  color:var(--brand);
}

/* -------------------------------------------------------------
   Hero
   ------------------------------------------------------------- */
.ab-hero{
  position:relative;
  height:670px;
  overflow:hidden;
  background:#fff;
}
.ab-hero-grid{
  position:absolute;
  top:-118px;
  left:calc(25% + 83.9px);
  width:996px;
  height:619px;
  background:url("img/latest/grid.svg") no-repeat center/100% 100%;
  pointer-events:none;
  z-index:0;
}
.ab-hero-inner{
  position:relative;
  height:100%;
  z-index:1;
}
.ab-hero-copy-wrap{display:contents}

.ab-hero .ab-eyebrow{
  position:absolute;
  top:72.9px;
  left:7px;
}
.ab-hero h1{
  position:absolute;
  top:92.9px;
  left:7px;
  width:680px;
  font-family:var(--font-display);
  font-size:80px;
  line-height:84px;
  letter-spacing:-2.4px;
  font-weight:600;
  color:var(--ink);
}
.ab-hero-copy{
  position:absolute;
  top:265.9px;
  left:7px;
  width:615px;
  font-size:21px;
  line-height:31px;
  letter-spacing:-.063px;
  color:var(--ink);
}
.ab-hero-copy p{margin:0}
.ab-hero .ab-hero-btn{
  position:absolute;
  top:496.9px;
  left:7px;
  padding:16px 24px;
  line-height:26px;
  font-size:17px;
}
.ab-hero-photo{
  position:absolute;
  top:28.6px;
  right:7.8px;
  width:495.4px;
  height:563px;
  margin:0;
  border-radius:48px;
  overflow:hidden;
  background:var(--soft);
}
.ab-hero-photo img{width:100%;height:100%;object-fit:cover}

/* -------------------------------------------------------------
   What Drives Us Forward
   ------------------------------------------------------------- */
.ab-drives{
  position:relative;
  height:817px;
  overflow:hidden;
  background:#0b0f14;
  color:#fff;
}
.ab-drives::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(90% 80% at -8% 55%, rgba(16,52,83,.85) 0%, rgba(11,15,20,0) 58%),
    radial-gradient(70% 60% at 108% 10%, rgba(18,44,67,.4) 0%, rgba(11,15,20,0) 60%);
  pointer-events:none;
}
.ab-star{
  position:absolute;
  left:-172px;
  top:-144px;
  width:486px;
  height:486px;
  transform:rotate(32.62deg);
  color:#0d2741;
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
.ab-star svg{display:block;width:100%;height:100%;fill:currentColor}

.ab-drives-inner{
  position:relative;
  height:100%;
  z-index:1;
}
.ab-drives h2{
  position:absolute;
  top:88px;
  left:533px;
  width:610px;
  margin:0;
  font-family:var(--font-display);
  font-size:56px;
  line-height:60px;
  letter-spacing:-1.4px;
  font-weight:600;
  color:#fff;
}
.ab-drives-photo{
  position:absolute;
  top:65.72px;
  left:1.87px;
  width:483.56px;
  height:645.48px;
  margin:0;
  border:2px solid #fff;
  border-radius:36px;
  overflow:hidden;
  background:#12202b;
  box-shadow:-16px -9px 40px rgba(0,0,0,.1),-65px -34px 73px rgba(0,0,0,.09);
}
.ab-drives-photo img{width:100%;height:100%;object-fit:cover}

.ab-drives-copy{
  position:absolute;
  top:191px;
  left:541px;
  width:775px;
}
.ab-drive-row{
  display:flex;
  align-items:flex-start;
  gap:28px;
}
.ab-drive-row + .ab-drive-row{
  margin-top:34px;
  padding-top:40px;
  border-top:1px solid rgba(255,255,255,.16);
}
.ab-drive-thumb{
  flex:none;
  width:165px;
  height:211px;
  margin:0;
  border-radius:22px;
  overflow:hidden;
  background:#12202b;
}
.ab-drive-thumb img{width:100%;height:100%;object-fit:cover}
.ab-drive-row > div{min-width:0}
.ab-drive-row h3{
  margin:0;
  font-family:var(--font-display);
  font-size:40px;
  line-height:46px;
  letter-spacing:-.8px;
  font-weight:600;
  color:#fff;
}
.ab-drive-row p{
  margin:8px 0 0;
  font-size:17px;
  line-height:26px;
  letter-spacing:-.034px;
  color:#fff;
}

/* -------------------------------------------------------------
   Our Values
   ------------------------------------------------------------- */
.ab-values{
  position:relative;
  display:flow-root;
  height:1128px;
  background:#fff;
}
.ab-values-panel{
  position:absolute;
  top:27px;
  left:8px;
  width:calc(100% - 16px);
  height:369px;
  border-radius:42px;
  background:var(--soft);
}
.ab-values h2{
  position:absolute;
  top:69px;
  left:0;
  right:0;
  margin:0;
  text-align:center;
  font-family:var(--font-display);
  font-size:56px;
  line-height:60px;
  letter-spacing:-1.4px;
  font-weight:600;
  color:#000;
}
.ab-values-grid{
  position:relative;
  margin:179px auto 0;
  width:min(1356px,calc(100% - 84px));
  display:grid;
  grid-template-columns:430fr 430fr 459fr;
  grid-template-rows:387px 387px;
  gap:28px 18px;
}
.ab-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:30px 28px;
  border:1px solid #fff;
  border-radius:42px;
  overflow:hidden;
  background:#f9f9f9;
  box-shadow:0 29px 14.5px rgba(0,0,0,.05),0 7px 8px rgba(0,0,0,.05);
}
.ab-card--blue{
  background:var(--brand);
  color:#fff;
  box-shadow:0 29px 14.5px rgba(0,0,0,.06),0 7px 8px rgba(0,0,0,.06);
}
.ab-card--tall{
  grid-column:3;
  grid-row:1 / span 2;
}
.ab-card-inner{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  min-height:0;
}
.ab-card--tall .ab-card-inner{justify-content:flex-start}
.ab-card h3{
  margin:0;
  font-family:var(--font-alt);
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.01em;
  color:#0e0e0e;
}
.ab-card--blue h3{color:#fff}
.ab-card p{
  margin:0;
  font-size:21px;
  line-height:31px;
  letter-spacing:-.063px;
  color:var(--ink);
}
.ab-card--blue p{color:#fff}
.ab-card-copy{margin-top:23px}
.ab-card-copy p + p{margin-top:31px}

.ab-arrow{
  position:absolute;
  top:26px;
  right:28px;
  display:grid;
  place-items:center;
  width:45.97px;
  height:45.97px;
  border-radius:50%;
  background:#fff;
  color:var(--brand);
}
.ab-arrow svg{width:18px;height:18px}

/* -------------------------------------------------------------
   Ongoing Projects / gallery collage
   ------------------------------------------------------------- */
.ab-work{
  position:relative;
  height:1058px;
  overflow:hidden;
  background:#fff;
}
.ab-gallery-wrap{position:relative}
.ab-gallery-frame{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(106.39vw,1532px);
  aspect-ratio:1532 / 1007;
}
.ab-tile{
  position:absolute;
  margin:0;
  overflow:hidden;
  border-radius:clamp(14px,2.22vw,32px);
  background:var(--soft);
}
.ab-tile img{width:100%;height:100%;object-fit:cover}

/* positions as a share of the 1532 × 1007 frame */
.t1{left:3.525%;top:1.092%;width:22.520%;height:41.311%}
.t2{left:3.590%;top:44.389%;width:22.520%;height:52.532%}
.t3{left:27.024%;top:19.762%;width:22.454%;height:28.004%}
.t4{left:27.024%;top:0;width:22.454%;height:17.776%}
.t5{left:50.522%;top:44.786%;width:22.454%;height:30.487%}
.t6{left:50.457%;top:2.185%;width:22.454%;height:41.311%}
.t7{left:26.893%;top:49.752%;width:22.454%;height:45.283%}
.t8{left:73.890%;top:2.185%;width:22.520%;height:41.311%}
.t9{left:73.956%;top:45.482%;width:22.520%;height:31.380%}

.ab-gallery-fade{
  position:absolute;
  left:0;
  right:0;
  top:43.496%;
  bottom:0;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 62.713%);
  pointer-events:none;
}
.ab-gallery-head{
  position:absolute;
  top:75.273%;
  left:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.ab-gallery-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.ab-gallery-title h2{
  margin:0;
  font-family:var(--font-display);
  font-size:56px;
  line-height:60px;
  letter-spacing:-1.4px;
  font-weight:600;
  color:#000;
}
.ab-gallery-sub{
  margin:0;
  font-size:21px;
  line-height:31px;
  letter-spacing:-.063px;
  color:var(--ink);
}
.ab-gallery-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:19px 25px;
  border:1px solid #0e0e0e;
  border-radius:100px;
  font-family:var(--font-alt);
  font-size:16px;
  line-height:1.2;
  font-weight:400;
  color:#0e0e0e;
  background:transparent;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.ab-gallery-btn:hover{
  background:#0e0e0e;
  color:#fff;
  transform:translateY(-1px);
}

/* -------------------------------------------------------------
   Join Our Journey
   ------------------------------------------------------------- */
.ab-cta{
  position:relative;
  height:494px;
  background:#fff;
}
.ab-cta-panel{
  position:relative;
  width:min(1308px,calc(100% - 132px));
  height:376px;
  margin:0 auto;
  border-radius:32px;
  overflow:hidden;
  background:var(--brand);
}
.ab-cta-panel > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ab-cta-copy{
  position:relative;
  z-index:1;
  padding-top:68px;
  text-align:center;
  color:#fff;
}
.ab-cta-copy h2{
  margin:0;
  font-family:var(--font-display);
  font-size:56px;
  line-height:60px;
  letter-spacing:-1.4px;
  font-weight:600;
  color:#fff;
}
.ab-cta-copy p{
  width:min(1156px,calc(100% - 96px));
  margin:21px auto 0;
  font-size:21px;
  line-height:31px;
  letter-spacing:-.063px;
  color:#fff;
}
.ab-cta .ab-cta-btn{
  margin-top:35px;
  padding:17px 20px;
  line-height:22px;
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.04);
}
.ab-cta .ab-cta-btn:hover{
  background:#fff;
  border-color:#fff;
  color:var(--brand);
}

/* -------------------------------------------------------------
   Footer tuning (About artboard)
   ------------------------------------------------------------- */
@media (min-width:1241px){
  .about-page .site-footer{
    padding-top:30px;
    min-height:515px;
  }
  .about-page .footer-gallery{margin-top:37px}
}
.about-page .footer-socials h3{color:var(--ink)}

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width:1240px){
  .ab-hero{
    height:auto;
    padding:56px 0 72px;
  }
  .ab-hero-grid{
    left:32%;
    width:75%;
    height:auto;
    aspect-ratio:996 / 619;
  }
  .ab-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,42%);
    align-items:center;
    gap:52px;
    height:auto;
  }
  .ab-hero-copy-wrap{display:block;min-width:0}
  .ab-hero .ab-eyebrow,
  .ab-hero h1,
  .ab-hero-copy,
  .ab-hero .ab-hero-btn,
  .ab-hero-photo{
    position:static;
    width:auto;
    right:auto;
  }
  .ab-hero h1{
    margin-top:8px;
    font-size:clamp(48px,5.6vw,68px);
    line-height:1.06;
    letter-spacing:-.03em;
  }
  .ab-hero-copy{
    margin-top:22px;
    max-width:615px;
    font-size:19px;
    line-height:1.5;
  }
  .ab-hero .ab-hero-btn{
    margin-top:30px;
    padding:14px 22px;
    line-height:24px;
  }
  .ab-hero-photo{
    width:100%;
    height:auto;
    aspect-ratio:495.4 / 563;
    border-radius:40px;
  }

  .ab-drives{
    height:auto;
    padding:64px 0 76px;
  }
  .ab-drives-inner{
    height:auto;
    display:grid;
    grid-template-columns:minmax(0,40%) minmax(0,1fr);
    align-items:start;
    gap:48px;
  }
  .ab-drives h2,
  .ab-drives-photo,
  .ab-drives-copy{
    position:static;
    width:auto;
  }
  .ab-drives h2{
    grid-column:1 / -1;
    margin-bottom:12px;
    font-size:clamp(38px,4.4vw,56px);
    line-height:1.07;
    letter-spacing:-.025em;
  }
  .ab-drives-photo{
    width:100%;
    max-width:440px;
    height:auto;
    aspect-ratio:483.56 / 645.48;
  }
  .ab-drives-copy{margin-top:0}
  .ab-drive-row + .ab-drive-row{
    margin-top:26px;
    padding-top:30px;
  }
  .ab-drive-row h3{font-size:34px;line-height:1.15}
  .ab-drive-row p{font-size:16px;line-height:1.6}

  .ab-values{
    height:auto;
    padding-top:69px;
    padding-bottom:80px;
  }
  .ab-values h2{
    position:relative;
    top:auto;
    z-index:1;
    margin-bottom:52px;
    font-size:clamp(40px,4.4vw,56px);
    line-height:1.07;
    letter-spacing:-.025em;
  }
  .ab-values-grid{
    margin-top:0;
    grid-template-rows:none;
    grid-auto-rows:auto;
    width:calc(100% - 88px);
  }
  .ab-card{min-height:330px}
  .ab-card--tall{grid-row:auto}
  .ab-card p{font-size:18px;line-height:28px}

  .ab-work{height:auto;padding-bottom:8px}
  .ab-gallery-head{
    position:relative;
    z-index:2;
    width:auto;
    margin:-9vw auto 0;
    padding:0 24px;
    gap:16px;
  }
  .ab-gallery-btn{padding:16px 23px}

  .ab-cta{
    height:auto;
    padding:56px 0 48px;
  }
  .ab-cta-panel{
    width:calc(100% - 88px);
    height:auto;
    padding:56px 0 60px;
  }
  .ab-cta-copy{padding-top:0}
  .ab-cta-copy h2{font-size:clamp(40px,4.6vw,52px);line-height:1.08}
  .ab-cta-copy p{
    width:min(860px,calc(100% - 96px));
    margin-top:18px;
    font-size:18px;
    line-height:1.55;
  }
  .ab-cta .ab-cta-btn{margin-top:28px}
}

@media (max-width:1240px){
  .ab-values-grid{
    grid-template-columns:1fr 1fr;
  }
  .ab-card--tall{
    grid-column:1 / -1;
    grid-row:auto;
    min-height:0;
  }
  .ab-card--tall .ab-card-inner{justify-content:flex-start}
}

@media (max-width:860px){
  .ab-hero{padding:44px 0 60px}
  .ab-hero-inner{
    grid-template-columns:1fr;
    gap:34px;
  }
  .ab-hero h1{font-size:clamp(40px,8.5vw,56px)}
  .ab-hero-copy{font-size:17px}
  .ab-hero-photo{border-radius:28px;max-width:560px;margin-inline:auto}

  .ab-drives{padding:56px 0 64px}
  .ab-drives-inner{
    grid-template-columns:1fr;
    gap:32px;
  }
  .ab-drives h2{margin-bottom:0}
  .ab-drives-photo{max-width:100%;aspect-ratio:483.56 / 560;border-radius:28px}
  .ab-drive-row{gap:20px}
  .ab-drive-thumb{width:140px;height:180px;border-radius:18px}
  .ab-drive-row h3{font-size:30px}

  .ab-values{padding-top:56px;padding-bottom:64px}
  .ab-values-panel{display:none}
  .ab-values h2{margin-bottom:36px}
  .ab-values-grid{
    width:calc(100% - 48px);
    grid-template-columns:1fr;
    gap:16px;
  }
  .ab-card{min-height:0;padding:26px 24px;border-radius:30px}
  .ab-card-inner{gap:26px}
  .ab-card h3{font-size:22px}
  .ab-arrow{top:22px;right:24px;width:42px;height:42px}
  .ab-card-copy{margin-top:20px}

  .ab-gallery-frame{
    left:auto;
    transform:none;
    width:100%;
    aspect-ratio:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:0 24px;
  }
  .ab-tile{
    position:static;
    width:auto;
    height:auto;
    aspect-ratio:4 / 5;
    border-radius:18px;
  }
  .t9{grid-column:1 / -1;aspect-ratio:16 / 9}
  .ab-gallery-fade{display:none}
  .ab-gallery-head{
    position:relative;
    z-index:2;
    grid-column:1 / -1;
    width:auto;
    margin-top:40px;
    padding:0 24px;
    gap:16px;
  }
  .ab-gallery-title h2{font-size:clamp(34px,7vw,44px);line-height:1.1}
  .ab-gallery-sub{font-size:17px;line-height:1.55}

  .ab-cta{padding:48px 0 40px}
  .ab-cta-panel{
    width:calc(100% - 48px);
    padding:44px 0 48px;
    border-radius:24px;
  }
  .ab-cta-copy h2{font-size:clamp(32px,7vw,42px);line-height:1.1}
  .ab-cta-copy p{
    width:calc(100% - 48px);
    font-size:16px;
    line-height:1.6;
  }
}

@media (max-width:560px){
  .ab-hero{padding:36px 0 52px}
  .ab-hero h1{font-size:clamp(34px,10.4vw,44px)}
  .ab-hero-copy{font-size:16px;margin-top:18px}
  .ab-hero .ab-hero-btn{margin-top:24px;font-size:15px;padding:13px 20px}

  .ab-drives{padding:48px 0 56px}
  .ab-drives h2{font-size:clamp(30px,8.6vw,38px)}
  .ab-drive-row{flex-direction:column;gap:16px}
  .ab-drive-thumb{width:120px;height:154px}
  .ab-drive-row h3{font-size:26px}
  .ab-drive-row p{font-size:15px;line-height:1.62}

  .ab-values{padding-top:48px;padding-bottom:56px}
  .ab-values h2{font-size:clamp(30px,8.6vw,38px);margin-bottom:28px}
  .ab-values-grid{width:calc(100% - 40px);gap:14px}
  .ab-card{padding:22px 20px;border-radius:24px}
  .ab-card p{font-size:16px;line-height:1.6}
  .ab-card-copy{margin-top:16px}
  .ab-card-copy p + p{margin-top:20px}

  .ab-gallery-frame{padding:0 20px;gap:10px}
  .ab-gallery-head{padding:0 20px;margin-top:32px}
  .ab-gallery-sub{font-size:16px}
  .ab-gallery-btn{padding:14px 22px;font-size:15px}

  .ab-cta{padding:40px 0 32px}
  .ab-cta-panel{width:calc(100% - 40px);padding:38px 0 40px;border-radius:20px}
  .ab-cta-copy h2{font-size:clamp(28px,8.4vw,34px)}
  .ab-cta-copy p{font-size:15px}
  .ab-cta .ab-cta-btn{margin-top:24px;font-size:15px;padding:14px 18px}
}

@media (prefers-reduced-motion:reduce){
  .ab-star{transform:rotate(32.62deg)}
}