/* ABOUT PAGE — extends the locked Home V5 design tokens; no homepage selectors overridden. */
.about-page{isolation:isolate}.about-page h1,.about-page h2,.about-page h3{font-family:var(--font-serif)}
.about-page h2{font-size:clamp(30px,3.5vw,50px);line-height:1.19;margin:9px 0 22px;font-weight:700;letter-spacing:-.035em}.about-page h2 em,.about-page h1 em{color:var(--gold);font-style:normal}
.about-page .section-padding{padding:96px 0}.about-page .eyebrow{font-size:10px;letter-spacing:.19em;font-weight:850;text-transform:uppercase;color:var(--gold)}
.about-hero{position:relative;overflow:hidden;min-height:620px;background:linear-gradient(111deg,#0a3026 3%,#124637 56%,#1a4634);color:#fff;isolation:isolate;padding-top:var(--nav-h)}
.about-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;background-image:url('../patterns/heritage-geometry.svg');background-size:220px}
.about-hero:after{content:"";position:absolute;right:0;top:-40px;width:56%;height:110%;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(243,204,117,.22),transparent 66%)}
.about-hero-glow{position:absolute;right:18%;top:13%;width:450px;height:450px;background:#d7ad60;filter:blur(135px);opacity:.15;pointer-events:none}
.about-hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:45px;min-height:540px}
.about-hero-copy{padding:52px 0 75px;max-width:610px}.about-crumb{display:flex;align-items:center;gap:10px;font-size:11px;color:#d4deca;margin-bottom:45px}.about-crumb a{transition:color .25s}.about-crumb a:hover{color:#fbd88c}.about-crumb .icon{width:12px;height:12px}
.about-hero h1{font:700 clamp(47px,5.2vw,77px)/1.11 var(--font-serif);letter-spacing:-.046em;margin:12px 0 23px}.about-hero h1 em{color:#f1ca75}.about-lead{font-size:16px;line-height:1.9;color:#e6eee7;max-width:535px}.about-hero-pills{display:flex;flex-wrap:wrap;gap:18px 27px;margin:27px 0 30px}.about-hero-pills>span{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;color:#f1e9d5}.about-hero-pills .icon{color:#e9c46b;width:18px;height:18px}.about-hero-actions{display:flex;flex-wrap:wrap;gap:12px}.about-hero-actions .btn{min-height:47px}
.about-hero-portrait{position:relative;align-self:end;display:flex;justify-content:center;align-items:end;min-width:0;height:min(550px,100%);padding-top:30px}.portrait-halo{position:absolute;width:min(88%,480px);height:82%;bottom:0;border-radius:52% 52% 0 0 / 48% 48% 0 0;border:1px solid rgba(245,210,139,.44);box-shadow:inset 0 0 55px rgba(235,194,105,.1),0 0 80px rgba(221,178,86,.1);background:linear-gradient(155deg,rgba(232,188,93,.11),rgba(13,57,46,.12) 60%,rgba(6,28,23,.6));clip-path:polygon(0 8%,18% 0,82% 0,100% 8%,100% 100%,0 100%)}
.portrait-frame{position:relative;height:100%;width:min(100%,480px);display:flex;align-items:end;justify-content:center;overflow:hidden;mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,.9) 86%,transparent 100%)}
.portrait-frame img{height:100%;width:100%;object-fit:cover;object-position:center 20%;filter:saturate(.93) contrast(1.035)}
.portrait-name{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);width:min(92%,390px);text-align:center;padding:13px 22px;background:rgba(7,36,28,.9);border:1px solid rgba(241,202,120,.6);border-radius:14px;box-shadow:0 17px 33px rgba(0,0,0,.2);backdrop-filter:blur(12px)}
.portrait-name span{display:block;font-size:9px;font-weight:850;letter-spacing:.16em;color:#eac56c}.portrait-name strong{display:block;font-size:16px;line-height:1.3;margin-top:3px;color:#fff}
.about-hero-edge{position:absolute;bottom:0;inset-inline:0;height:24px;background:linear-gradient(to bottom,transparent,rgba(3,22,16,.18));pointer-events:none}
/* Story: image user provided untouched except compression */
.about-story{background:var(--page)}.story-layout{display:grid;grid-template-columns:.91fr 1.09fr;gap:clamp(45px,7vw,115px);align-items:center}.story-art{position:relative;max-width:490px;margin:auto;width:100%;border:1px solid rgba(191,146,58,.42);padding:9px;border-radius:155px 155px 24px 24px;background:linear-gradient(145deg,#e6cd8f,#fff8de 25%,#f8f1df 65%,#cba760);box-shadow:0 22px 62px rgba(21,52,40,.12)}
.story-art>img{width:100%;height:540px;border-radius:146px 146px 15px 15px;object-fit:cover;object-position:center 40%}.story-art-caption{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);width:85%;padding:13px;background:rgba(6,46,33,.86);border:1px solid rgba(244,215,146,.56);border-radius:10px;color:white;text-align:center;backdrop-filter:blur(9px)}.story-art-caption span{display:block;color:#ecd08f;font-size:9px;letter-spacing:.21em}.story-art-caption strong{font:600 14px/1.5 var(--font-serif)}
.story-copy p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.94;margin:0 0 21px}.story-signature{display:flex;align-items:center;gap:12px;margin:27px 0;color:var(--forest);font:600 17px var(--font-serif)}.story-signature>span:first-child{color:var(--gold);font-size:27px}.text-link{display:inline-flex;align-items:center;gap:10px;color:var(--forest);font-size:13px;font-weight:800;border-bottom:1px solid var(--gold);padding-bottom:8px}.text-link .icon{width:16px;height:16px}.text-link:hover{color:var(--gold)}html[data-theme=dark] .story-signature,html[data-theme=dark] .text-link{color:var(--gold-light)}
/* Founder section */
.about-founder{background:var(--surface-2);border-block:1px solid var(--line)}.founder-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,6.5vw,105px);align-items:center}.founder-copy{max-width:650px}.founder-copy h2{margin-bottom:10px}.founder-copy p:not(.eyebrow){color:var(--muted);font-size:14.5px;line-height:1.9;margin:14px 0}.founder-position{font-weight:750!important;color:var(--gold)!important}.founder-tags{display:flex;flex-wrap:wrap;gap:9px;margin:23px 0 30px}.founder-tags span{font-size:11px;border:1px solid rgba(179,138,65,.29);background:var(--surface);padding:7px 12px;border-radius:100px;color:var(--ink)}
.founder-visual{position:relative;max-width:480px;width:100%;justify-self:end}.founder-photo{height:485px;border:8px solid var(--surface);outline:1px solid var(--line);border-radius:235px 235px 25px 25px;overflow:hidden;background:#dad9d3;box-shadow:var(--shadow)}.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 14%}.founder-seal{position:absolute;left:-25px;bottom:32px;display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#124738,#0a2c23);border:1px solid rgba(238,192,96,.6);border-radius:15px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:13px 16px;color:#f3d38c;font-size:12px;font-weight:750}.founder-seal .icon{width:23px;height:23px}
/* Four values: short naturally balanced content */
.about-values{background:var(--page)}.values-heading{text-align:center;max-width:700px;margin:0 auto 38px}.values-heading h2{margin-bottom:9px}.values-heading>p:last-child{color:var(--muted);font-size:14px}.values-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.value-card{padding:30px 24px;background:var(--surface);border:1px solid var(--line);border-radius:17px;box-shadow:0 9px 22px rgba(9,50,31,.04);transition:transform .55s var(--ease),box-shadow .55s,border-color .35s;min-width:0}.value-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(185,141,51,.48)}.value-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;background:linear-gradient(140deg,#0c402e,#1e6749);color:#f0d083;margin-bottom:22px;box-shadow:0 8px 18px rgba(0,55,36,.14)}.value-icon .icon{width:26px;height:26px}.value-card h3{margin:0 0 10px;font-size:17px;line-height:1.3}.value-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.75}
/* Mission/Vision */
.about-mission{padding-top:20px!important;background:var(--page)}.mission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.mission-card{position:relative;overflow:hidden;min-height:260px;border:1px solid rgba(158,189,143,.29);padding:35px 38px;border-radius:20px;background:linear-gradient(125deg,#dcead5,#f7f7e9 65%,#f0e9ca)}.mission-card:after{content:"✦";position:absolute;right:-40px;bottom:-105px;font:230px Georgia;color:rgba(71,121,75,.075);pointer-events:none}.mission-card-vision{background:linear-gradient(135deg,#f5e8c9,#f9f5e9 65%,#dcebd6)}.mission-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#0e4030;color:#f4d58b;margin-bottom:14px}.mission-icon .icon{width:22px;height:22px}.mission-card h2{font-size:clamp(26px,2.3vw,36px);margin:5px 0 12px;color:#133b2e}.mission-card p:last-child{color:#465d4f;font-size:13.5px;line-height:1.85;margin:0;max-width:480px}.mission-card .eyebrow{color:#996e27}
html[data-theme=dark] .mission-card{background:linear-gradient(135deg,#123c2f,#1d4d3b);border-color:rgba(242,206,131,.19)}html[data-theme=dark] .mission-card-vision{background:linear-gradient(140deg,#223d31,#153a2e)}html[data-theme=dark] .mission-card h2{color:#f7efdf}html[data-theme=dark] .mission-card p:last-child{color:#d3e0d2}
/* Ending CTA */
.about-end{padding:55px 0 90px!important;background:var(--page)}.about-end-panel{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:43px 49px;border-radius:21px;border:1px solid rgba(241,197,101,.32);background:linear-gradient(110deg,#0b3a2d,#1b5440 70%,#164437);color:white}.about-end-panel:after{content:"";position:absolute;right:8%;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(235,189,91,.09);filter:blur(30px);pointer-events:none}.about-end-panel>*{position:relative;z-index:1}.about-end-panel h2{font-size:clamp(27px,3vw,40px);margin:7px 0}.about-end-panel p:last-child{font-size:13px;color:#dae8d9;line-height:1.7;margin:0}.about-end-panel>.btn{flex:none}
/* Urdu page typography using same shared fonts */
html[lang=ur] .about-page h1,html[lang=ur] .about-page h2,html[lang=ur] .about-page h3,html[lang=ur] .about-page p,html[lang=ur] .about-page span:not(.eyebrow),html[lang=ur] .about-page .about-crumb{font-family:'Noto Nastaliq Urdu',serif;letter-spacing:0;line-height:1.9}
html[lang=ur] .about-page h1{font-size:clamp(34px,4vw,62px)}html[lang=ur] .about-page h2{font-size:clamp(26px,2.8vw,40px)}html[lang=ur] .about-page .eyebrow{font-family:'DM Sans','Noto Nastaliq Urdu',sans-serif;letter-spacing:0;font-size:12px}
html[lang=ur] .about-hero-copy{max-width:650px}html[lang=ur] .about-hero h1{line-height:1.7}html[lang=ur] .portrait-name span,html[lang=ur] .portrait-name strong{line-height:1.8}
@media(max-width:1100px){.about-hero-layout{gap:18px}.about-hero h1{font-size:clamp(43px,5vw,62px)}.about-hero-portrait{height:490px}.values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.founder-layout{gap:36px}}
@media(max-width:820px){.about-page .section-padding{padding:68px 0}.about-hero-layout{grid-template-columns:1fr 0.8fr;gap:6px;min-height:540px}.about-hero-copy{padding:60px 0 85px}.about-hero h1{font-size:clamp(39px,5.2vw,52px)}.about-lead{font-size:13px}.about-hero-portrait{height:450px}.portrait-name{bottom:30px;padding:11px}.portrait-name strong{font-size:12px}.portrait-name span{font-size:8px}.story-art>img{height:460px}.story-layout,.founder-layout{gap:30px}.founder-photo{height:420px}}
@media(max-width:640px){.about-page .section-padding{padding:59px 0}.about-hero{padding-top:var(--nav-h);min-height:0}.about-hero-layout{grid-template-columns:1fr;min-height:0;gap:0}.about-hero-copy{padding:40px 0 22px;max-width:none}.about-crumb{margin-bottom:20px}.about-hero h1{font-size:clamp(38px,9vw,53px);max-width:580px}.about-lead{font-size:13px;line-height:1.85}.about-hero-pills{margin:19px 0;gap:13px}.about-hero-pills>span{font-size:10px}.about-hero-actions .btn{font-size:11px;flex:1;min-width:135px;padding:9px 10px}.about-hero-portrait{height:330px;padding-top:0}.portrait-frame{width:min(87%,345px)}.portrait-halo{width:min(82%,335px);height:96%}.portrait-name{bottom:12px;width:min(90%,320px)}.story-layout,.founder-layout{grid-template-columns:1fr}.story-art{max-width:350px}.story-art>img{height:410px}.story-copy{order:-1}.founder-visual{max-width:360px;justify-self:center}.founder-photo{height:440px}.values-grid{gap:10px}.value-card{padding:20px 15px}.value-card h3{font-size:15px}.value-card p{font-size:11px}.value-icon{height:44px;width:44px;border-radius:14px;margin-bottom:14px}.value-icon .icon{width:23px;height:23px}.mission-grid{grid-template-columns:1fr;gap:14px}.mission-card{min-height:0;padding:28px}.about-end{padding:28px 0 65px!important}.about-end-panel{flex-direction:column;align-items:stretch;text-align:center;padding:28px 23px}.about-end-panel>.btn{align-self:center}.founder-seal{left:3px;bottom:20px}}
@media(max-width:360px){.about-hero h1{font-size:35px}.about-hero-portrait{height:300px}.portrait-name strong{font-size:11px}.about-hero-actions{gap:8px}.about-hero-actions .btn{font-size:10px;padding-inline:8px}.values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.value-card{padding:15px 12px}.value-card h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){.about-page .reveal{opacity:1!important;transform:none!important}}
/* Small finishing touches specific to About, without modifying Home. */
.about-hero .btn-outline{color:#f9f7ec;border-color:rgba(244,206,124,.82);background:rgba(5,43,32,.27)}
.about-hero .btn-outline:hover{background:rgba(247,206,119,.19);color:#fff;box-shadow:0 7px 24px rgba(0,0,0,.15)}
.portrait-frame{border-radius:46% 46% 8px 8px / 29% 29% 8px 8px}
/* Keep the story card visually composed in RTL, while respecting reading order. */
html[dir=rtl] .about-hero-portrait,html[dir=rtl] .story-art,html[dir=rtl] .founder-visual{direction:ltr}

/* ===========================================
   ABOUT HERO REFINEMENT — matched to locked Home V5
   Scoped to About only. All Home CSS and markup remain identical.
   =========================================== */
.about-hero {
  min-height: 630px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 85% 55%, rgba(191,221,189,.57) 0%, rgba(218,234,211,.26) 32%, transparent 62%),
    linear-gradient(108deg,#fcfcf6 1%,#faf9f2 42%,#e4efdf 100%);
  border-bottom: 1px solid rgba(158,173,130,.18);
}
.about-hero::before {
  opacity:.035;
  background-size:245px;
}
.about-hero::after {
  inset:auto 2% -24% auto;
  width:54%;
  height:110%;
  border-radius:50%;
  background:radial-gradient(ellipse at 52% 46%,rgba(234,204,134,.23),rgba(204,224,198,.18) 44%,transparent 70%);
}
.about-hero-glow{right:10%;top:28%;opacity:.06;filter:blur(125px)}
.about-hero-layout {grid-template-columns:1fr 1fr;min-height:535px;gap:clamp(15px,2.5vw,54px)}
.about-hero-copy {position:relative;z-index:3;max-width:650px;padding:60px 0 72px}
.about-crumb {color:#617268;margin-bottom:38px}
.about-crumb a:hover{color:#9c752f}
.about-hero h1 {color:#122f27;font-size:clamp(45px,5.1vw,73px)}
.about-hero h1 em {color:#b58332}
.about-lead {color:#53685c;max-width:535px}
.about-hero-pills>span {color:#345044}
.about-hero-pills .icon{color:#bd9042}
.about-hero .btn-outline {color:#173d31;border-color:rgba(163,121,47,.62);background:rgba(255,255,255,.4)}
.about-hero .btn-outline:hover {background:rgba(226,239,218,.7);color:#12382b;box-shadow:0 8px 26px rgba(26,78,47,.1)}
.about-hero-portrait {height:535px;align-self:end;justify-self:stretch;min-width:0;padding-top:0;z-index:1}
.portrait-halo {
  width:min(96%,515px);
  height:88%;
  bottom:-1px;
  border-radius:49% 49% 0 0 / 38% 38% 0 0;
  border:1px solid rgba(184,139,57,.25);
  box-shadow:inset 0 0 55px rgba(233,207,153,.085),0 10px 70px rgba(61,106,71,.06);
  background:linear-gradient(150deg,rgba(241,230,195,.15),rgba(160,200,158,.08));
  clip-path:none;
}
.portrait-frame {
  width:min(100%,520px);
  height:100%;
  border-radius:0;
  overflow:visible;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);
}
.portrait-frame img {
  object-fit:contain;
  object-position:center bottom;
  filter:saturate(.98) contrast(1.02);
}
.portrait-name{bottom:14px}
.about-hero-edge {background:linear-gradient(to bottom,transparent,rgba(166,195,163,.07))}
/* Dark mode remains deliberately deep emerald, with Home's familiar gold accents. */
html[data-theme=dark] .about-hero {
  color:#fcf8ed;
  border-color:rgba(203,173,102,.18);
  background:
    radial-gradient(ellipse at 82% 50%,rgba(40,92,66,.56),transparent 57%),
    linear-gradient(108deg,#09291f 0%,#0d362b 57%,#174434 100%);
}
html[data-theme=dark] .about-hero:before{opacity:.09}
html[data-theme=dark] .about-hero::after{background:radial-gradient(ellipse at 50% 50%,rgba(225,176,86,.18),transparent 70%)}
html[data-theme=dark] .about-hero-glow{opacity:.12}
html[data-theme=dark] .about-hero h1{color:#fef9ed}
html[data-theme=dark] .about-hero h1 em{color:#f0ca77}
html[data-theme=dark] .about-lead{color:#dde9dc}
html[data-theme=dark] .about-crumb{color:#d1e0d5}
html[data-theme=dark] .about-hero-pills>span{color:#f0e7d4}
html[data-theme=dark] .about-hero-pills .icon{color:#ebc56f}
html[data-theme=dark] .about-hero .btn-outline{color:#fff7e7;border-color:#d6ae5d;background:rgba(9,40,31,.26)}
html[data-theme=dark] .about-hero .btn-outline:hover{color:#fff;background:rgba(237,199,117,.16)}
html[data-theme=dark] .portrait-halo{border-color:rgba(240,208,135,.26);background:linear-gradient(155deg,rgba(227,175,83,.1),rgba(15,55,40,.22))}
/* The transition is visible on About arrival, so Home needs no modification. */
@keyframes aboutPageArrive {from{opacity:0;transform:translate3d(-20px,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes aboutPhotoArrive {from{opacity:0;transform:translate3d(16px,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.about-page .about-hero-copy.is-visible{animation:aboutPageArrive 1s cubic-bezier(.2,.75,.2,1) both}
.about-page .about-hero-portrait.is-visible{animation:aboutPhotoArrive 1.15s .12s cubic-bezier(.2,.75,.2,1) both}
@media(max-width:1100px) {
  .about-hero-layout{grid-template-columns:1.03fr .97fr;gap:10px}
  .about-hero-portrait{height:490px}
  .about-hero-copy{padding:50px 0 65px}
  .about-hero h1{font-size:clamp(38px,4.6vw,61px)}
}
@media(max-width:820px) and (min-width:641px){
  .about-hero{min-height:550px}
  .about-hero-layout{grid-template-columns:1fr .9fr;min-height:470px}
  .about-hero-copy{padding:35px 0 56px}
  .about-hero h1{font-size:clamp(34px,4.7vw,47px)}
  .about-hero-portrait{height:440px}
  .about-crumb{margin-bottom:28px}
  .about-lead{font-size:12.5px}
}
/* MOBILE — portrait is part of the hero scene behind text, never a separate card. */
@media(max-width:640px){
  .about-hero{
    min-height:0;
    overflow:hidden;
    background:
      radial-gradient(ellipse at 86% 70%,rgba(214,232,205,.6),transparent 66%),
      linear-gradient(140deg,#fffdf8 0%,#f8f9f1 56%,#e8f0e3 100%);
  }
  .about-hero::before{opacity:.025}
  .about-hero::after{right:-36%;top:24%;bottom:auto;width:98%;height:85%;opacity:.5}
  .about-hero-glow{display:none}
  .about-hero-layout{
    display:block;
    position:relative;
    min-height:605px;
    isolation:isolate;
  }
  .about-hero-layout::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:0 -17px 0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,253,248,.98) 0%,rgba(255,253,248,.92) 31%,rgba(255,253,248,.59) 52%,rgba(255,253,248,.05) 100%);
  }
  .about-hero-copy{position:relative;z-index:3;padding:38px 0 220px;max-width:none}
  .about-crumb{margin-bottom:24px;color:#65776b}
  .about-hero h1{font-size:clamp(37px,9.1vw,53px);max-width:400px;line-height:1.15;letter-spacing:-.038em;margin:12px 0 20px}
  .about-lead{font-size:12.8px;line-height:1.84;max-width:340px;color:#405b4c}
  .about-hero-pills{margin:19px 0 22px;gap:12px 17px}
  .about-hero-pills>span{font-size:10.5px}
  .about-hero-actions{max-width:385px}
  .about-hero-portrait{
    position:absolute;
    z-index:1;
    inset:auto -15% 0 auto;
    width:82%;
    height:430px;
    padding:0;
    overflow:visible;
    opacity:.98;
    pointer-events:none;
  }
  .portrait-halo,.portrait-name{display:none}
  .portrait-frame{height:100%;width:100%;max-width:none;overflow:visible;border-radius:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 77%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 77%,transparent 100%);
  }
  .portrait-frame img{object-fit:contain;object-position:center bottom;filter:saturate(.94)}
  html[data-theme=dark] .about-hero-layout::before{
    background:linear-gradient(90deg,rgba(8,37,28,.98) 0%,rgba(8,37,28,.89) 30%,rgba(8,37,28,.47) 56%,rgba(8,37,28,.03) 100%);
  }
  html[data-theme=dark] .about-hero{background:linear-gradient(125deg,#082b21 0%,#10372b 62%,#1a4a37 100%)}
  html[data-theme=dark] .about-lead{color:#f0f4e9}
  html[data-theme=dark] .about-crumb{color:#cddfcf}
  html[data-theme=dark] .about-hero-pills>span{color:#f5ecd6}
}
@media(max-width:375px){
  .about-hero-layout{min-height:600px}
  .about-hero-copy{padding-bottom:204px}
  .about-hero h1{font-size:clamp(34px,9vw,41px)}
  .about-hero-portrait{width:84%;height:415px;right:-17%}
  .about-hero-pills{gap:9px}
}
/* RTL mobile retains the face on the open/right side to protect the content. */
html[dir=rtl] .about-hero-portrait{direction:ltr}
@media(prefers-reduced-motion:reduce){
 .about-page .about-hero-copy.is-visible,.about-page .about-hero-portrait.is-visible{animation:none!important}
}

/* Face-safe composition on narrow viewports: never let the portrait obscure the introduction. */
@media(max-width:640px){
  .about-hero-layout{min-height:665px}
  .about-hero-copy{padding-bottom:235px}
  .about-hero-portrait{width:68%;height:365px;right:-11%;bottom:0}
  .about-hero-layout::before{
    background:linear-gradient(90deg,rgba(255,253,248,.99) 0%,rgba(255,253,248,.96) 37%,rgba(255,253,248,.78) 56%,rgba(255,253,248,.08) 100%);
  }
  html[data-theme=dark] .about-hero-layout::before{
    background:linear-gradient(90deg,rgba(8,37,28,.99) 0%,rgba(8,37,28,.96) 35%,rgba(8,37,28,.74) 55%,rgba(8,37,28,.05) 100%);
  }
  html[dir=rtl] .about-hero-portrait{right:auto;left:-11%}
  html[dir=rtl] .about-hero-layout::before{
    background:linear-gradient(270deg,rgba(255,253,248,.99) 0%,rgba(255,253,248,.96) 37%,rgba(255,253,248,.78) 56%,rgba(255,253,248,.08) 100%);
  }
  html[dir=rtl][data-theme=dark] .about-hero-layout::before{
    background:linear-gradient(270deg,rgba(8,37,28,.99) 0%,rgba(8,37,28,.96) 35%,rgba(8,37,28,.74) 55%,rgba(8,37,28,.05) 100%);
  }
}
@media(max-width:375px){
  .about-hero-layout{min-height:660px}
  .about-hero-portrait{width:71%;height:345px;right:-12%}
  html[dir=rtl] .about-hero-portrait{left:-12%;right:auto}
}

/* ==========================================================
  V6 — Home-like portrait composition on mobile only.
  The cutout lives BEHIND the hero text from its first line onward,
  not as a secondary block at the bottom. The gradient protects
  contrast, and all downstream sections retain their V5 layout.
  ========================================================== */
@media (max-width:640px) {
  .about-page .about-hero{
    overflow:hidden;
  }
  .about-page .about-hero-layout{
    min-height: min(610px, max(570px, 94svh));
    position:relative;
    isolation:isolate;
  }
  .about-page .about-hero-portrait{
    position:absolute;
    inset: 4px -18% 0 auto;
    width: 108%;
    height: calc(100% - 4px);
    margin:0;
    padding:0;
    display:block;
    opacity:1;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
    transform:none;
  }
  .about-page .about-hero-portrait .portrait-frame{
    display:block;
    width:100%;height:100%;
    margin:0;
    border:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 81%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 81%,transparent 100%);
  }
  .about-page .about-hero-portrait img{
    width:100%;height:100%;
    display:block;
    object-fit:contain;
    object-position:right bottom;
    filter:saturate(.97) contrast(1.02);
  }
  .about-page .about-hero-layout::before{
    z-index:2;
    inset:0 -18px;
    background:linear-gradient(90deg,
      rgba(255,253,248,.98) 0%,
      rgba(255,253,248,.95) 28%,
      rgba(255,253,248,.81) 49%,
      rgba(255,253,248,.15) 80%,
      rgba(255,253,248,.03) 100%);
  }
  .about-page .about-hero-copy{
    position:relative;
    z-index:3;
    padding:clamp(31px,8vw,40px) 0 30px;
    max-width:none;
  }
  .about-page .about-crumb{margin-bottom:clamp(17px,4vw,26px)}
  .about-page .about-hero h1{
    font-size:clamp(35px,9.15vw,52px);
    max-width:345px;
    margin-bottom:15px;
  }
  .about-page .about-lead{
    font-size:clamp(11.6px,3.1vw,13.2px);
    line-height:1.75;
    max-width:min(92%,315px);
    color:#395448;
    text-shadow:0 1px 10px rgba(255,253,248,.8);
  }
  .about-page .about-hero-pills{margin:17px 0 21px;max-width:320px}
  .about-page .about-hero-actions{max-width:355px}
  .about-page .about-hero-actions .btn{min-height:42px}
  html[data-theme=dark] .about-page .about-hero-layout::before{
    background:linear-gradient(90deg,
      rgba(8,37,28,.99) 0%,
      rgba(8,37,28,.95) 28%,
      rgba(8,37,28,.80) 49%,
      rgba(8,37,28,.27) 80%,
      rgba(8,37,28,.08) 100%);
  }
  html[data-theme=dark] .about-page .about-lead{color:#ebf1e7;text-shadow:0 1px 10px rgba(5,25,17,.9)}
  html[dir=rtl] .about-page .about-hero-portrait{left:-18%;right:auto}
  html[dir=rtl] .about-page .about-hero-portrait img{object-position:left bottom}
  html[dir=rtl] .about-page .about-hero-layout::before{
    background:linear-gradient(270deg,rgba(255,253,248,.99) 0%,rgba(255,253,248,.93) 29%,rgba(255,253,248,.77) 50%,rgba(255,253,248,.11) 82%,transparent 100%);
  }
  html[dir=rtl][data-theme=dark] .about-page .about-hero-layout::before{
    background:linear-gradient(270deg,rgba(8,37,28,.99) 0%,rgba(8,37,28,.95) 29%,rgba(8,37,28,.79) 50%,rgba(8,37,28,.24) 82%,rgba(8,37,28,.05) 100%);
  }
}
@media(max-width:375px) {
  .about-page .about-hero-layout{min-height:580px}
  .about-page .about-hero-portrait{width:115%;right:-24%}
  html[dir=rtl] .about-page .about-hero-portrait{left:-24%;right:auto}
  .about-page .about-hero h1{font-size:clamp(33px,9vw,37px)}
  .about-page .about-hero-actions{gap:7px}
  .about-page .about-hero-actions .btn{font-size:9.5px;min-width:0;padding-inline:9px}
}
@media(prefers-reduced-motion:reduce){
  .about-page .about-hero-portrait,.about-page .about-hero-copy{animation:none!important}
}
/* Final narrow-screen framing: face remains right of the readable text column. */
@media (max-width:640px){
  .about-page .about-hero-portrait{
    inset:-93px -24% auto auto;
    height:calc(100% + 93px);
  }
  .about-page .about-lead{max-width:min(72%,285px)}
  .about-page .about-hero-layout::before{
    background:linear-gradient(90deg,
      rgba(255,253,248,.99) 0%,
      rgba(255,253,248,.97) 39%,
      rgba(255,253,248,.75) 58%,
      rgba(255,253,248,.16) 85%,transparent 100%);
  }
  html[data-theme=dark] .about-page .about-hero-layout::before{
    background:linear-gradient(90deg,
      rgba(8,37,28,.99) 0%,
      rgba(8,37,28,.97) 39%,
      rgba(8,37,28,.81) 58%,
      rgba(8,37,28,.23) 85%,rgba(8,37,28,.06) 100%);
  }
  html[dir=rtl] .about-page .about-hero-portrait{left:-24%;right:auto}
  html[dir=rtl] .about-page .about-hero-layout::before{
    background:linear-gradient(270deg,rgba(255,253,248,.99),rgba(255,253,248,.97) 39%,rgba(255,253,248,.75) 58%,rgba(255,253,248,.16) 85%,transparent);
  }
  html[dir=rtl][data-theme=dark] .about-page .about-hero-layout::before{
    background:linear-gradient(270deg,rgba(8,37,28,.99),rgba(8,37,28,.97) 39%,rgba(8,37,28,.81) 58%,rgba(8,37,28,.23) 85%,rgba(8,37,28,.06));
  }
}
@media(max-width:375px){
  .about-page .about-hero-portrait{right:-28%;height:calc(100% + 93px)}
  html[dir=rtl] .about-page .about-hero-portrait{left:-28%;right:auto}
}
/* Readability polish: hero CTAs retain strong contrast over the portrait. */
@media(max-width:640px){
 .about-page .about-hero .btn-outline{background:rgba(255,254,248,.89);color:#123b2d;border-color:#b9934e;box-shadow:0 5px 17px rgba(25,65,40,.07)}
 html[data-theme=dark] .about-page .about-hero .btn-outline{background:rgba(6,37,28,.91);color:#fff6df;border-color:#e2bc70;box-shadow:0 5px 20px rgba(0,0,0,.22)}
 .about-page .about-hero-layout::before{
    background:linear-gradient(90deg,rgba(255,253,248,.99) 0%,rgba(255,253,248,.98) 35%,rgba(255,253,248,.77) 57%,rgba(255,253,248,.04) 79%,transparent 100%);
 }
 html[data-theme=dark] .about-page .about-hero-layout::before{
    background:linear-gradient(90deg,rgba(8,37,28,.99) 0%,rgba(8,37,28,.97) 35%,rgba(8,37,28,.80) 57%,rgba(8,37,28,.10) 80%,rgba(8,37,28,.03) 100%);
 }
 html[dir=rtl] .about-page .about-hero-layout::before{
    background:linear-gradient(270deg,rgba(255,253,248,.99),rgba(255,253,248,.98) 35%,rgba(255,253,248,.77) 57%,rgba(255,253,248,.04) 79%,transparent);
 }
 html[dir=rtl][data-theme=dark] .about-page .about-hero-layout::before{
    background:linear-gradient(270deg,rgba(8,37,28,.99),rgba(8,37,28,.97) 35%,rgba(8,37,28,.80) 57%,rgba(8,37,28,.10) 80%,rgba(8,37,28,.03));
 }
}

/* =========================================================
   V7 — CONTENT-SIZED MOBILE HERO (ABOUT ONLY)
   No forced empty photo area: portrait and intro share the same
   content-driven height. Desktop and Home remain unchanged.
   ========================================================= */
@media (max-width: 640px) {
  .about-page .about-hero,
  .about-page .about-hero-layout {
    min-height: 0;
  }
  .about-page .about-hero-layout {
    display: block;
    height: auto;
    isolation: isolate;
  }
  .about-page .about-hero-copy {
    position: relative;
    z-index: 3;
    padding: clamp(27px, 7vw, 39px) 0 clamp(26px, 7vw, 37px);
  }
  .about-page .about-hero-portrait {
    position: absolute;
    inset: 0 -13% 0 auto;
    height: 100%;
    width: 94%;
    display: flex;
    align-items: end;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    transform: none;
  }
  .about-page .about-hero-portrait .portrait-frame {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);
    mask-image: linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);
  }
  .about-page .about-hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }
  .about-page .about-hero-layout::before {
    z-index: 2;
    background: linear-gradient(90deg,
      rgba(255,253,248,.99) 0%,
      rgba(255,253,248,.96) 30%,
      rgba(255,253,248,.72) 52%,
      rgba(255,253,248,.04) 88%,
      transparent 100%);
  }
  html[data-theme=dark] .about-page .about-hero-layout::before {
    background: linear-gradient(90deg,
      rgba(8,37,28,.99) 0%,
      rgba(8,37,28,.96) 30%,
      rgba(8,37,28,.76) 52%,
      rgba(8,37,28,.08) 88%,
      rgba(8,37,28,.02) 100%);
  }
  html[dir=rtl] .about-page .about-hero-portrait {
    inset: 0 auto 0 -13%;
  }
  html[dir=rtl] .about-page .about-hero-portrait img {
    object-position: left bottom;
  }
  html[dir=rtl] .about-page .about-hero-layout::before {
    background: linear-gradient(270deg,rgba(255,253,248,.99),rgba(255,253,248,.96) 30%,rgba(255,253,248,.72) 52%,rgba(255,253,248,.04) 88%,transparent);
  }
  html[dir=rtl][data-theme=dark] .about-page .about-hero-layout::before {
    background: linear-gradient(270deg,rgba(8,37,28,.99),rgba(8,37,28,.96) 30%,rgba(8,37,28,.76) 52%,rgba(8,37,28,.08) 88%,rgba(8,37,28,.02));
  }
}

/* V7 final composition: keep the reading column clear of the portrait. */
@media (max-width:640px) {
  .about-page .about-hero-portrait {right:-19%;}
  .about-page .about-lead {max-width:min(70%,270px);}
  .about-page .about-hero-pills {max-width:245px;row-gap:10px;}
  .about-page .about-hero-pills>span {max-width:100%;}
  html[dir=rtl] .about-page .about-hero-portrait {right:auto;left:-19%;}
}
@media(max-width:640px) {
  /* Give the longer RTL headings their own high-contrast reading space. */
  html[dir=rtl] .about-page .about-hero-portrait {left:-26%;}
  html[dir=rtl] .about-page .about-hero-layout::before {
    background:linear-gradient(270deg,rgba(255,253,248,.99),rgba(255,253,248,.97) 39%,rgba(255,253,248,.82) 72%,rgba(255,253,248,.18));
  }
  html[dir=rtl][data-theme=dark] .about-page .about-hero-layout::before {
    background:linear-gradient(270deg,rgba(8,37,28,.99),rgba(8,37,28,.97) 39%,rgba(8,37,28,.84) 72%,rgba(8,37,28,.18));
  }
}