/* ===================== ABOUT PAGE ===================== */
  .ab-root{--sage:#6E9E63; --script:'Caveat','Segoe Script',cursive}
  .ab-scr{font-family:var(--script);font-weight:700;color:var(--orange);line-height:.9}

  /* placeholder photo */
  .ab-ph{position:relative;overflow:hidden;border-radius:22px;background:
    linear-gradient(140deg,#FCEFD8 0%,#F7E2C6 52%,#F1D2AE 100%);display:flex;align-items:center;justify-content:center}
  .ab-ph .em{font-size:clamp(40px,7vw,64px);filter:drop-shadow(0 8px 14px rgba(150,90,20,.18))}
  /* a real photo fills the placeholder tile; the gradient stays as the loading backdrop */
  .ab-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .ab-ph .leaf{position:absolute;width:46%;height:46%;right:-6%;bottom:-8%;color:#fff;opacity:.34;transform:rotate(-12deg)}
  .ab-ph .cap{position:absolute;left:12px;bottom:12px;background:rgba(65,43,23,.82);color:#FFF3E2;font-family:var(--display);
    font-weight:600;font-size:11px;padding:5px 11px;border-radius:999px;letter-spacing:.02em;backdrop-filter:blur(2px)}

  /* hero */
  .ab-hero{position:relative;overflow:hidden;padding:124px 0 74px;
    background:radial-gradient(125% 130% at 82% -6%,#FFF7E8 0%,#FBF1DF 42%,var(--bg) 100%)}
  .ab-hero::after{content:"";position:absolute;left:-120px;bottom:-140px;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle,rgba(110,158,99,.16),transparent 68%);pointer-events:none}
  .ab-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center}
  .ab-hero .eyebrow{justify-content:flex-start}
  .ab-hero .ab-eyebrow{color:var(--sage);background:rgba(110,158,99,.13);
    border:1px solid rgba(110,158,99,.28);padding:7px 15px;border-radius:999px;width:fit-content}
  .ab-hero .ab-eyebrow svg{color:currentColor}
  .ab-hero h1{font-family:var(--display);font-weight:700;font-size:60px;line-height:1.02;letter-spacing:-.02em;margin:14px 0 0;color:var(--espresso)}
  .ab-hero h1 .ab-scr{display:block;font-size:84px;margin-top:2px;transform:rotate(-2deg)}
  .ab-hero p{color:var(--soft);font-size:17px;line-height:1.6;max-width:48ch;margin:20px 0 0}
  .ab-hero .since{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--display);font-weight:600;
    font-size:13px;color:var(--espresso);background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:999px;box-shadow:0 10px 24px -16px rgba(80,50,20,.5)}
  .ab-hero .since b{color:var(--sage)}

  .ab-collage{position:relative;height:452px}
  .ab-collage .card{position:absolute;border-radius:24px;box-shadow:0 28px 50px -26px rgba(80,50,20,.5);border:5px solid #fff}
  .ab-collage .c1{width:60%;height:74%;left:0;top:6%;transform:rotate(-5deg);z-index:2}
  .ab-collage .c2{width:50%;height:56%;right:0;top:0;transform:rotate(4deg);z-index:3}
  .ab-collage .c3{width:46%;height:46%;right:8%;bottom:0;transform:rotate(-3deg);z-index:4}
  .ab-collage .doodle{position:absolute;left:1%;bottom:2%;z-index:5;font-family:var(--script);font-weight:700;color:var(--sage);
    font-size:34px;transform:rotate(-8deg)}
  .ab-collage .spin{position:absolute;left:-18px;top:-18px;z-index:6;width:78px;height:78px}

  /* manifesto band */
  .ab-belief{background:var(--espresso);color:#fff;position:relative;overflow:hidden}
  .ab-belief::before{content:"";position:absolute;right:-80px;top:-90px;width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,145,0,.32),transparent 66%)}
  .ab-belief .wrap{position:relative;z-index:2;padding:70px 22px;text-align:center;max-width:980px}
  .ab-belief .k{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#FFC98A}
  .ab-belief h2{font-family:var(--display);font-weight:700;font-size:40px;line-height:1.18;margin:16px auto 0;letter-spacing:-.01em}
  .ab-belief h2 .ab-scr{color:#FFB047;font-size:1.32em;vertical-align:-2px}

  /* sections */
  .ab-sec{padding:74px 0}
  .ab-head{max-width:640px}
  .ab-head.center{margin:0 auto;text-align:center}
  .ab-head .eyebrow{justify-content:flex-start;margin-bottom:8px}
  .ab-head.center .eyebrow{justify-content:center}
  .ab-head h2{font-family:var(--display);font-weight:700;font-size:36px;color:var(--espresso);letter-spacing:-.015em;line-height:1.08}
  .ab-head h2 .ab-scr{font-size:1.18em}
  .ab-head p{color:var(--soft);font-size:16px;line-height:1.6;margin-top:10px}

  /* story chapters */
  .ab-story{display:grid;grid-template-columns:1fr;gap:0;margin-top:40px;position:relative}
  .ab-chap{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;padding:36px 0;border-top:1px solid var(--line)}
  .ab-chap:first-child{border-top:0;padding-top:8px}
  .ab-chap:nth-child(even) .ab-ph{order:-1}
  .ab-chap .no{display:flex;align-items:baseline;gap:11px;margin-bottom:13px}
  .ab-chap .no i{font-style:normal;font-family:var(--display);font-weight:700;font-size:50px;line-height:.8;
    color:transparent;-webkit-text-stroke:1.6px var(--almond)}
  .ab-chap .no b{font-family:var(--display);font-weight:700;font-size:12px;color:var(--sage);letter-spacing:.16em}
  .ab-chap h3{font-family:var(--display);font-weight:700;font-size:25px;color:var(--espresso);margin-bottom:9px}
  .ab-chap p{color:var(--soft);font-size:15.5px;line-height:1.65}
  .ab-chap .ab-ph{height:auto;width:100%}
  .ab-chap .ab-ph img{position:static;width:100%;height:auto;object-fit:fill}

  .ab-box{background:linear-gradient(180deg,#FFFBF1,var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .iem-rows{display:flex;flex-direction:column;gap:56px;margin-top:52px}
  .iem-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .iem-rail{position:absolute;left:0;right:0;top:72px;height:92px;z-index:0;pointer-events:none;
    border:2px solid #E7DAC1;border-bottom:0;border-radius:48px 48px 0 0}
  .iem-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
  .iem-ic{width:144px;height:144px;border-radius:50%;display:grid;place-items:center;background:var(--fill);
    box-shadow:0 0 0 7px #FFFDF8,0 16px 30px -16px rgba(80,50,20,.42)}
  .iem-ic img{width:74px;height:74px;object-fit:contain;display:block}
  .iem-dot{width:14px;height:14px;border-radius:50%;background:var(--dot);margin-top:15px}
  .iem-item h3{font-family:var(--display);font-weight:700;font-size:21px;color:var(--espresso);margin-top:15px;letter-spacing:-.005em}
  .iem-item p{color:var(--soft);font-size:15px;line-height:1.55;margin-top:9px}
  .ab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
  .ab-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;transition:transform .2s ease,box-shadow .2s ease;position:relative}
  .ab-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(80,50,20,.5)}
  .ab-card .ic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:15px;color:#fff}
  .ab-card .ic svg{width:25px;height:25px}
  .ab-card h4{font-family:var(--display);font-weight:700;font-size:18.5px;color:var(--espresso);margin-bottom:7px}
  .ab-card p{color:var(--soft);font-size:14px;line-height:1.6}

  .ab-scrap{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px}
  .ab-scrap .ab-ph{flex:var(--ar) 1 calc(var(--ar) * 260px);border:6px solid #fff;border-radius:22px;
    box-shadow:0 20px 38px -24px rgba(80,50,20,.5)}
  .ab-scrap .ab-ph img{position:static;width:100%;height:auto;object-fit:fill}

  .ab-scrap.js-story .ab-ph{opacity:0;transform:translateY(30px) scale(.965)}
  .ab-scrap.js-story .ab-ph img{transform:scale(1.075)}
  .ab-scrap.js-story .ab-ph{transition:opacity .75s ease,transform .95s cubic-bezier(.22,1,.36,1)}
  .ab-scrap.js-story .ab-ph img{transition:transform 1.7s cubic-bezier(.22,1,.36,1)}
  .ab-scrap.js-story.telling .ab-ph{opacity:1;transform:none}
  .ab-scrap.js-story.telling .ab-ph img{transform:none}
  .ab-scrap.js-story .ab-ph:nth-child(1),.ab-scrap.js-story .ab-ph:nth-child(1) img{transition-delay:0ms}
  .ab-scrap.js-story .ab-ph:nth-child(2),.ab-scrap.js-story .ab-ph:nth-child(2) img{transition-delay:190ms}
  .ab-scrap.js-story .ab-ph:nth-child(3),.ab-scrap.js-story .ab-ph:nth-child(3) img{transition-delay:380ms}
  .ab-scrap.js-story .ab-ph:nth-child(4),.ab-scrap.js-story .ab-ph:nth-child(4) img{transition-delay:570ms}
  .ab-scrap.js-story .ab-ph:nth-child(5),.ab-scrap.js-story .ab-ph:nth-child(5) img{transition-delay:760ms}
  @media(prefers-reduced-motion:reduce){
    .ab-scrap.js-story .ab-ph,.ab-scrap.js-story .ab-ph img{opacity:1;transform:none;transition:none}
  }

  /* stats */
  /* stat band: icon over figure over label, columns separated by hairline rules */
  .ab-stats{background:var(--espresso);color:#fff;padding:0}
  .ab-stats .wrap{padding:26px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
  .ab-stat{display:flex;flex-direction:column;align-items:center;padding:6px 18px}
  .ab-stat+.ab-stat{border-inline-start:1px solid rgba(231,214,188,.22)}
  .ab-stat .si{width:42px;height:42px;object-fit:contain;display:block;margin-bottom:9px}
  /* tabular figures if the font has them. the display font does not, so the
     width is reserved in js instead */
  .ab-stat .n{font-family:var(--display);font-weight:700;font-size:34px;line-height:1;color:#fff;display:inline-flex;align-items:baseline;gap:2px;
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  .ab-stat .n .suf{color:var(--orange);font-size:23px}
  .ab-stat .l{margin-top:7px;color:#E7D6BC;font-size:13px;font-family:var(--display);font-weight:500}

  .ab-founder .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:42px;align-items:center}
  [dir="rtl"] .ab-founder .wrap{align-items:start}
  .ab-founder .ab-ph{height:auto;border:0;border-radius:20px;overflow:hidden;
    box-shadow:0 30px 56px -30px rgba(80,50,20,.5)}
  .ab-founder .ab-ph img{position:static;width:100%;height:auto;object-fit:fill}
  .ab-founder .eyebrow{justify-content:flex-start;margin-bottom:14px}
  .fd-card{background:#FFFDF8;border-radius:22px;padding:28px 30px;
    box-shadow:0 26px 48px -32px rgba(80,50,20,.45)}
  .fd-card h2{font-family:var(--display);font-weight:700;font-size:33px;line-height:1.14;
    color:var(--espresso);letter-spacing:-.015em;margin:0}
  .fd-card h2 span{color:var(--orange)}
  /* the photographic leaf used elsewhere on the site, not the flat wordmark glyph */
  .fd-card .fd-leaf{width:26px;height:26px;object-fit:contain;vertical-align:6px;margin-inline-start:7px;
    transform:rotate(8deg)}
  .fd-card p{color:var(--soft);font-size:15px;line-height:1.68;margin:15px 0 0}
  .ab-founder .sign{margin-top:22px;font-family:var(--script);font-weight:700;font-size:40px;color:var(--sage);line-height:1}
  .ab-founder .sign .fd-heart{color:var(--orange);font-size:22px;vertical-align:14px;margin-inline-start:7px}
  .ab-founder .role{margin-top:6px;color:var(--soft);font-size:13.5px;font-family:var(--display);font-weight:600}

  /* cta: photo panel flush against a cream copy panel, both inside one rounded card */
  .ab-cta{background:var(--bg)}
  .ab-cta .wrap{padding:0 22px}
  .cta-card{position:relative;overflow:hidden;border-radius:26px;display:grid;
    grid-template-columns:.46fr .54fr;background:linear-gradient(150deg,#FDF6E9 0%,#F9EEDC 100%);
    box-shadow:0 34px 64px -34px rgba(80,50,20,.5)}
  /* faint leaf watermark in the bottom corner, behind the copy */
  .cta-card::after{content:"";position:absolute;inset-inline-end:-40px;bottom:-60px;width:280px;height:280px;z-index:0;
    background:url('../../imgs/leaves/leaf-small.webp') center/contain no-repeat;opacity:.13;transform:rotate(-18deg)}
  .cta-photo{position:relative;z-index:1;min-height:100%}
  .cta-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 50%;display:block}
  .cta-copy{position:relative;z-index:2;padding:44px 46px}
  .ab-cta h2{font-family:var(--display);font-weight:700;font-size:38px;line-height:1.12;
    letter-spacing:-.02em;color:var(--espresso);margin:0}
  /* the script line carries a hand-drawn underline, same language as the hero marker */
  .ab-cta h2 .cta-scr{font-family:var(--script);font-weight:700;color:var(--orange);font-size:1.16em;
    position:relative;display:inline-block;line-height:1.2}
  .ab-cta h2 .cta-scr::after{content:"";position:absolute;inset-inline:2% 4%;bottom:-2px;height:2.5px;
    border-radius:999px;background:var(--orange);opacity:.55;transform:rotate(-.8deg)}
  .ab-cta .cta-leaf{width:24px;height:24px;object-fit:contain;vertical-align:22px;margin-inline-start:4px;transform:rotate(10deg)}
  .ab-cta .cta-sub{color:var(--soft);font-size:15px;line-height:1.62;margin:16px 0 0;max-width:46ch}
  .cta-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px}
  .cta-feats .cf{padding:0 16px}
  .cta-feats .cf+.cf{border-inline-start:1px solid rgba(120,90,50,.16)}
  .cta-feats .cf:first-child{padding-inline-start:0}
  .cta-feats .ic{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);
    display:grid;place-items:center;box-shadow:0 8px 18px -10px rgba(80,50,20,.4)}
  .cta-feats .ic img{width:23px;height:23px;object-fit:contain;display:block}
  .cta-feats b{display:block;margin-top:10px;font-family:var(--display);font-weight:700;font-size:14px;color:var(--espresso)}
  .cta-feats .d{display:block;margin-top:5px;color:var(--soft);font-size:12.5px;line-height:1.5}
  .ab-cta .row{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
  .ab-cta .b1{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;
    font-family:var(--display);font-weight:700;font-size:15.5px;padding:14px 28px;border-radius:13px;
    text-decoration:none;transition:.2s;box-shadow:0 14px 28px -14px rgba(226,98,10,.75)}
  .ab-cta .b1:hover{transform:translateY(-2px)}
  .ab-cta .b2{display:inline-flex;align-items:center;gap:9px;background:transparent;
    border:1.6px solid rgba(120,90,50,.32);color:var(--espresso);font-family:var(--display);font-weight:700;
    font-size:15.5px;padding:14px 26px;border-radius:13px;text-decoration:none;transition:.2s}
  .ab-cta .b2:hover{background:rgba(255,255,255,.7)}
  .ab-cta .row svg{width:17px;height:17px}
  .cta-tag{margin-top:26px;font-family:var(--script);font-weight:700;font-size:24px;color:#D89A3C}
  .cta-tag .hrt{color:var(--orange);font-size:14px;vertical-align:6px;margin-inline-start:6px}
  [dir="rtl"] .ab-cta .row svg{transform:scaleX(-1)}
  /* Caveat has no Arabic glyphs, so the script lines fall back to an ugly cursive */
  [dir="rtl"] .cta-tag,[dir="rtl"] .ab-founder .sign{font-family:'Cairo','Tajawal',sans-serif;font-size:22px}
  [dir="rtl"] .ab-cta h2 .cta-scr{font-family:'Cairo','Tajawal',sans-serif;font-size:1em;line-height:1.3}
  [dir="rtl"] .ab-cta h2 .cta-scr::after{bottom:-6px}
  [dir="rtl"] .fd-card .fd-leaf{vertical-align:-2px}
  [dir="rtl"] .ab-cta .cta-leaf{vertical-align:-2px}

  /* responsive */
  @media(max-width:920px){
    .ab-hero .wrap{grid-template-columns:1fr;gap:34px}
    .ab-hero h1{font-size:46px}.ab-hero h1 .ab-scr{font-size:64px}
    .ab-collage{height:360px;width:100%;max-width:460px;margin-inline:auto}
    .ab-belief h2{font-size:31px}
    .ab-chap{grid-template-columns:1fr;gap:18px}
    .ab-chap .ab-ph{order:0 !important;height:auto}
    .ab-grid{grid-template-columns:repeat(2,1fr)}
    .iem-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 20px}
    .iem-row{display:contents}
    .iem-rail{display:none}
    .iem-dot{display:none}
    .iem-ic{width:104px;height:104px}
    .iem-ic img{width:54px;height:54px}
    .ab-scrap .ab-ph{flex-basis:calc(var(--ar) * 190px)}
    /* two per row: the rule belongs between the pair, not before the first of row two */
    .ab-stats .wrap{grid-template-columns:repeat(2,1fr);gap:28px 0}
    .ab-stat+.ab-stat{border-inline-start:0}
    .ab-stat:nth-child(even){border-inline-start:1px solid rgba(231,214,188,.22)}
    .ab-founder .wrap{grid-template-columns:1fr;gap:0}
    .ab-founder .fd-copy{display:contents}
    .ab-founder .fd-copy .eyebrow{order:-1;margin-bottom:6px}
    .ab-founder .fd-photo{margin-bottom:24px}
    .ab-founder .ab-ph{height:auto;max-width:none}
    .ab-founder .sign{margin-top:12px}
    .fd-card h2{font-size:28px}
    /* photo stacks above the copy; it keeps a fixed band so it never becomes a tall column */
    .cta-card{grid-template-columns:1fr}
    .cta-photo{height:auto;min-height:0;position:relative;overflow:hidden;isolation:isolate;
      display:flex;align-items:center;justify-content:center;padding:26px;
      background:url('../../imgs/about/cta-gym.webp') center/cover no-repeat}
    .cta-photo::before{content:"";position:absolute;inset:-14px;z-index:-1;background:inherit;
      filter:blur(26px) brightness(.7) saturate(1.15)}
    .cta-photo img{width:auto;height:auto;max-width:100%;max-height:400px;border-radius:14px;object-fit:contain;
      box-shadow:0 20px 44px -20px rgba(0,0,0,.6)}
    .cta-copy{padding:30px 26px}
    .ab-cta h2{font-size:32px}
  }
  @media(max-width:560px){
    .ab-hero{padding:106px 0 56px}
    .ab-hero h1{font-size:38px}.ab-hero h1 .ab-scr{font-size:52px}
    .ab-hero p{font-size:15.5px}
    .ab-sec{padding:54px 0}
    .ab-belief .wrap{padding:54px 20px}.ab-belief h2{font-size:26px}
    .ab-head h2{font-size:28px}
    .ab-grid{grid-template-columns:1fr}
    .iem-rows{display:grid;grid-template-columns:1fr 1fr;gap:30px 16px;margin-top:34px}
    .iem-row{display:contents}
    .iem-ic{width:86px;height:86px}
    .iem-ic img{width:46px;height:46px}
    .iem-dot{display:none}
    .iem-item h3{font-size:16px;margin-top:12px}
    .iem-item p{font-size:12.5px;margin-top:6px}
    /* one per row on phones: any pairing makes the portrait too narrow to read */
    .ab-scrap .ab-ph{flex-basis:100%}
    .ab-stats .wrap{grid-template-columns:1fr 1fr}
    .ab-stat .n{font-size:42px}
    /* phones: edge-to-edge full photo (whole portrait, no crop) */
    .cta-photo{padding:0;display:block;min-height:0}
    .cta-photo img{width:100%;max-width:none;max-height:none;height:auto;border-radius:0;object-fit:contain}
    .cta-copy{padding:24px 20px}
    .ab-cta h2{font-size:25px}
    .ab-cta .cta-sub{font-size:14px;margin-top:12px}
    .cta-feats{grid-template-columns:1fr;gap:0;margin-top:18px}
    .cta-feats .cf{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center;padding:12px 0}
    .cta-feats .cf+.cf{border-inline-start:0;border-top:1px solid rgba(120,90,50,.16)}
    .cta-feats .ic{grid-column:1;grid-row:1/3}
    .cta-feats b{grid-column:2;margin-top:0}
    .cta-feats .d{grid-column:2;margin-top:2px}
    .ab-cta .row{flex-direction:column;gap:11px;margin-top:22px}
    .ab-cta .row .b1,.ab-cta .row .b2{width:100%;flex:none;justify-content:center}
    .cta-tag{margin-top:20px;font-size:22px}
    .ab-chap .no i{font-size:40px}
    .ab-founder .sign{font-size:29px}
    .ab-founder .sign .fd-heart{font-size:16px;vertical-align:8px;margin-inline-start:5px}
  }