/* =========================================================
   CONTACT · CAREER · CSR · FAQ  — built on about.css + about.js
   Brand tokens: change here to re-theme these four pages.
   ========================================================= */
:root{ --pg-accent:#EC008C; --pg-accent-d:#EC008C; --pg-deep:#202121; --pg-deep-2:#202121; --pg-soft:rgba(236,0,140,.05); --pg-green:#EC008C }

/* page transition (short, no loader) */
body{animation:pgIn .45s var(--ease) backwards}
body.pg-out{opacity:0; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease}
@keyframes pgIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* button shimmer (all ab-btn on these pages) */
.pg .ab-btn{position:relative; overflow:hidden}
.pg .ab-btn::after{content:""; position:absolute; top:0; left:0; width:36%; height:100%; background:rgba(255,255,255,.38); transform:translateX(-140%) skewX(-20deg); pointer-events:none}
.pg .ab-btn:hover::after{transform:translateX(380%) skewX(-20deg); transition:transform .9s var(--ease)}
.pg .ab-btn:hover{transform:translateY(-2px)}

/* hero extras */
.hv-badge.wide{left:4%; bottom:18px; max-width:300px}
.hv-badge.wide b{font-size:1.05rem}
.hv-badge.wide em{display:block; font-style:normal; font-size:.74rem; color:var(--navy-2); font-family:var(--font-body); margin-top:2px}
.hv-badge.b2.top{right:2%; top:-6px}
.hv-corp .p1{left:0; top:10px; width:50%; height:300px; border-radius:26px 26px 90px 26px}
.hv-corp .p2{left:36%; top:150px; width:34%; height:260px; border-radius:90px 26px 26px 26px; z-index:2}
.hv-corp .p3{right:0; top:30px; width:36%; height:300px; border-radius:26px 90px 26px 26px}
.hv-corp .hv-badge.wide{left:auto; right:4%; bottom:6px}
.pg-h2{font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:800; margin-bottom:18px}
.pg-h2 em{font-style:normal; color:var(--pg-accent)}
.pg-lede{font-size:1.08rem; line-height:1.75; color:#202121; max-width:560px}

/* organic section transitions */
.curve-t{border-radius:64px 64px 0 0; margin-top:-64px; position:relative; z-index:2}
.dk{background:var(--pg-deep); color:#fff; position:relative; overflow:hidden; isolation:isolate}
.dk h2,.dk h3{color:#fff}
.dk p{color:#FFFFFF}
.dk .ab-kicker{color:var(--pink-soft)} .dk .ab-kicker::before{background:var(--pink-soft)}
.fl{position:absolute; border-radius:50%; z-index:-1; animation:pgFloat 11s ease-in-out infinite}
.fl.a{width:340px; height:340px; right:-90px; top:-90px; background:rgba(236,0,140,.22)}
.fl.b{width:160px; height:160px; left:7%; bottom:12%; border:2px dashed rgba(255,138,201,.45); animation-duration:15s; animation-direction:reverse}
.fl.c{width:18px; height:18px; left:42%; top:22%; background:var(--pink-soft); animation-duration:8s}
.fl.d{width:10px; height:10px; right:24%; bottom:20%; background:#fff; opacity:.6; animation-duration:9s}
@keyframes pgFloat{50%{transform:translate3d(0,-22px,0) rotate(8deg)}}
.dk-cta{text-align:center; padding:112px 0}
.dk-cta h2{font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; max-width:820px; margin:0 auto 18px}
.dk-cta p{max-width:560px; margin:0 auto 34px; font-size:1.08rem}
.dk-cta .ab-cta-btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.dk .ab-btn-line{border-color:rgba(255,255,255,.6); color:#fff} .dk .ab-btn-line:hover{background:#fff; color:var(--pg-accent-d)}

/* ---------- CONTACT ---------- */
.qa-wrap{margin-top:-84px; position:relative; z-index:3; padding-bottom:40px}
.qa-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.qa{position:relative; background:#fff; border-radius:var(--r-lg); padding:34px 30px 30px; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s var(--ease); overflow:hidden; display:flex; flex-direction:column}
.qa.done:hover,.qa:hover{transform:translateY(-8px); box-shadow:0 34px 60px -26px rgba(32,33,33,.4)}
.qa::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:34px; background:var(--pg-accent); transition:width .5s var(--ease)}
.qa:hover::after{width:100%}
.qa-ic{width:56px; height:56px; border-radius:18px; background:var(--ab-blush); color:var(--pg-accent); display:grid; place-items:center; margin-bottom:20px; transition:transform .35s var(--ease)}
.qa:hover .qa-ic{transform:scale(1.12) rotate(-4deg)}
.qa-ic .ic{width:26px; height:26px}
.qa h3{font-size:1.2rem; margin-bottom:10px}
.qa p,.qa a.ln{font-size:1.02rem; line-height:1.7; color:#202121; display:block}
.qa a.ln:hover{color:var(--pg-accent-d)}
.qa .ab-btn{margin-top:auto; align-self:flex-start; padding:12px 22px; font-size:.9rem}
.qa p{margin-bottom:22px}
.cs{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center}
.cs-photo{position:relative; margin:34px 0 0; border-radius:26px 26px 110px 26px; overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow)}
.cs-photo img{width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 2.4s var(--ease)}
.is-in .cs-photo img,.cs-photo.is-in img{transform:scale(1)}
.cform{background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--r-lg); padding:38px; box-shadow:var(--shadow); position:relative}
.cform .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.fld{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.fld label{font-family:var(--font-head); font-weight:600; font-size:.84rem; color:var(--navy)}
.fld input,.fld select,.fld textarea{font:inherit; font-size:.98rem; padding:13px 15px; border-radius:12px; border:1.5px solid rgba(32,33,33,.25); background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s; width:100%}
.fld textarea{min-height:120px; resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0; border-color:var(--pg-accent); box-shadow:0 0 0 4px rgba(236,0,140,.14)}
.hp{position:absolute; left:-9999px; opacity:0}
.sbtn{width:100%; justify-content:center; background:var(--pg-accent); color:#fff; border:0; min-height:54px}
.sbtn .sp{display:none; width:20px; height:20px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:pgSpin .8s linear infinite}
.is-loading .sbtn .sp{display:inline-block} .is-loading .sbtn .ic,.is-loading .sbtn .tx{display:none}
@keyframes pgSpin{to{transform:rotate(360deg)}}
.fmsg{display:none; text-align:center; padding:40px 12px}
.fmsg .tick{width:72px; height:72px; border-radius:50%; background:var(--pg-green); color:#fff; display:grid; place-items:center; margin:0 auto 18px; transform:scale(0); transition:transform .6s var(--ease) .1s}
.fmsg .tick .ic{width:34px; height:34px; stroke:#fff; fill:none; stroke-width:2.6}
.fmsg h3{font-size:1.7rem; margin-bottom:8px}
.is-done .fmsg{display:block} .is-done .fmsg .tick{transform:scale(1)} .is-done .ffields{display:none}
.is-err .ferr{display:block} .ferr{display:none; color:#EC008C; font-size:.92rem; margin-top:12px; text-align:center}
.mapx{position:relative; height:560px; background:var(--ab-mist); overflow:hidden}
.mapx iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(1)}
.mcard{position:absolute; left:max(24px,calc((100% - 1200px)/2 + 24px)); top:50%; translate:0 -50%; background:#fff; border-radius:var(--r-lg); padding:30px; width:min(360px,calc(100% - 48px)); box-shadow:0 30px 60px -24px rgba(32,33,33,.5)}
.mcard h3{margin-bottom:6px} .mcard p{color:#202121; margin-bottom:18px}

/* ---------- CAREER ---------- */
.why{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.wc{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 26px; transition:transform .35s var(--ease), box-shadow .35s; position:relative; overflow:hidden}
.wc:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.wc::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:34px; background:var(--pg-accent); transition:width .5s var(--ease)} .wc:hover::after{width:100%}
.wc .qa-ic{margin-bottom:18px} .wc:hover .qa-ic{transform:scale(1.12)}
.wc h3{margin-bottom:8px; font-size:1.15rem} .wc p{color:#202121; font-size:.98rem}
.imgs{position:relative; min-height:620px; display:flex; align-items:center; overflow:hidden; background:var(--pg-deep)}
.imgs-img{position:absolute; left:0; top:-6%; width:62%; height:112%; border-radius:0 140px 140px 0; overflow:hidden}
.imgs-img img{width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 2.6s var(--ease)}
.imgs.is-in .imgs-img img{transform:scale(1)}
.imgs-txt{position:relative; margin-left:auto; width:min(560px,48%); margin-right:max(24px,calc((100% - 1200px)/2 + 24px)); background:#fff; border-radius:var(--r-lg); padding:44px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); z-index:2}
.imgs-txt p{color:#202121}
.jobs{max-width:820px; margin:0 auto; background:#fff; border:1.5px dashed rgba(236,0,140,.35); border-radius:var(--r-lg); padding:48px 40px; text-align:center}
.jobs h3{font-size:1.5rem; margin-bottom:8px} .jobs p{color:#202121; margin-bottom:24px}
.jobs .pulse{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:.82rem; color:var(--pg-accent-d); margin-bottom:14px}
.jobs .pulse i{width:9px; height:9px; border-radius:50%; background:var(--pg-accent); animation:pgPulse 2s infinite}
@keyframes pgPulse{50%{box-shadow:0 0 0 8px rgba(236,0,140,0)} 0%{box-shadow:0 0 0 0 rgba(236,0,140,.5)}}
.tl{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px}
.tl::before,.tl::after{content:""; position:absolute; top:27px; left:12%; height:3px; border-radius:3px}
.tl::before{right:12%; background:rgba(255,255,255,.18)}
.tl::after{width:0; background:var(--pink-soft); transition:width 2.2s var(--ease) .3s}
.tl.is-in::after{width:76%}
.tl-s{text-align:center; position:relative}
.tl-s i{width:56px; height:56px; border-radius:50%; background:var(--pg-deep-2); border:3px solid var(--pink-soft); display:grid; place-items:center; margin:0 auto 16px; font-style:normal; font-family:var(--font-head); font-weight:700; color:#fff}
.tl-s h3{font-size:1.2rem; margin-bottom:6px} .tl-s p{font-size:.95rem}
.stories{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.sc{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s}
.sc:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.sc-ph{aspect-ratio:4/3; background:var(--ab-blush); display:grid; place-items:center; overflow:hidden; clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease)}
.sc.is-in .sc-ph{clip-path:inset(0)}
.sc-ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)} .sc:hover .sc-ph img{transform:scale(1.05)}
.sc-ph b{font-family:var(--font-head); font-size:3.4rem; color:var(--pg-accent); font-weight:800}
.sc-b{padding:26px; display:flex; flex-direction:column; gap:10px; flex:1}
.sc-b small{color:var(--pg-accent-d); font-family:var(--font-head); font-weight:600; font-size:.78rem}
.sc-b h3{font-size:1.2rem} .sc-b p{color:#202121; font-size:.97rem}
.sc-more{margin-top:auto; background:none; border:0; padding:0; font-family:var(--font-head); font-weight:600; color:var(--pg-accent-d); display:inline-flex; gap:8px; align-items:center; align-self:flex-start}
.sc-more .ic{width:18px; height:18px; transition:transform .25s} .sc-more:hover .ic{transform:translateX(5px)}
.sc-full{display:none} .sc.open .sc-full{display:block}

/* ---------- CORPORATE ---------- */
.csr-trust{margin-top:-70px; position:relative; z-index:3; padding-bottom:30px}
.csr-trust-in{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--line); display:grid; grid-template-columns:1.4fr repeat(3,1fr); overflow:hidden}
.tc{padding:28px 26px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:4px; transition:background .3s}
.tc:last-child{border:0} .tc:hover{background:var(--pg-soft)}
.tc small{font-family:var(--font-head); font-weight:600; font-size:.72rem; letter-spacing:.12em; color:var(--pg-accent-d)}
.tc b{font-family:var(--font-head); font-size:1.35rem; color:var(--navy)}
.tc.big b{font-size:1.7rem; color:var(--pg-accent)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative}
.steps::before{content:""; position:absolute; top:44px; left:6%; width:0; height:2px; background:var(--pg-accent); transition:width 2.4s var(--ease) .2s}
.steps.is-in::before{width:88%}
.st{position:relative; background:transparent}
.st .n{display:grid; place-items:center; width:88px; height:88px; border-radius:50%; background:#fff; border:2px solid var(--pg-accent); font-family:var(--font-head); font-weight:800; font-size:1.9rem; color:var(--pg-accent); margin-bottom:18px; position:relative; z-index:1}
.st h3{margin-bottom:6px} .st p{color:#202121}
.fa{display:grid; grid-template-columns:repeat(6,1fr); gap:22px}
.fcard{grid-column:span 2; position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:380px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; isolation:isolate}
.fcard:nth-child(n+4){grid-column:span 3}
.fcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease)}
.fcard::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(32,33,33,.58); transition:background .5s}
.fcard:hover img{transform:scale(1.06)} .fcard:hover::before{background:rgba(32,33,33,.8)}
.fcard .no{position:absolute; top:22px; left:26px; font-family:var(--font-head); font-weight:800; font-size:3.2rem; color:#FFFFFF; line-height:1}
.fcard h3{color:#fff; font-size:1.4rem; margin-bottom:6px} .fcard p{color:#FFFFFF; font-size:.97rem; max-width:34ch}
.fcard .go{position:absolute; right:24px; top:24px; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--pg-accent); display:grid; place-items:center; transition:transform .3s var(--ease), background .3s, color .3s}
.fcard:hover .go{transform:translateX(6px); background:var(--pg-accent); color:#fff} .go .ic{width:20px; height:20px}
.models{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.mdl{display:flex; gap:20px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; transition:transform .35s var(--ease), box-shadow .35s; position:relative; overflow:hidden}
.mdl:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.mdl::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:34px; background:var(--pg-accent); transition:width .5s var(--ease)} .mdl:hover::after{width:100%}
.mdl .qa-ic{flex:none; margin:0} .mdl h3{font-size:1.15rem; margin-bottom:6px} .mdl p{color:#202121; font-size:.97rem}
.logos{--lg:5; display:flex; flex-wrap:wrap; justify-content:center; gap:22px}
.logos div{flex:0 0 calc((100% - (var(--lg) - 1) * 22px) / var(--lg)); background:#fff; border:1px solid var(--line); border-radius:20px; height:170px; display:grid; place-items:center; padding:24px 26px; transition:transform .3s var(--ease), box-shadow .3s}
.logos div:hover{transform:translateY(-5px); box-shadow:var(--shadow-sm)}
.logos img{width:100%; height:100%; object-fit:contain; transition:transform .4s var(--ease)} .logos div:hover img{transform:scale(1.06)}
.docs{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:900px; margin:0 auto}
.doc{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; transition:transform .4s var(--ease), box-shadow .4s; position:relative}
.doc:hover{transform:translateY(-8px) rotate(-.6deg); box-shadow:var(--shadow)}
.doc .pg{position:absolute; right:24px; top:24px; width:54px; height:70px; border-radius:6px 16px 6px 6px; background:var(--ab-blush); border:2px solid rgba(236,0,140,.35)}
.doc small{font-family:var(--font-head); font-weight:600; font-size:.74rem; letter-spacing:.12em; color:var(--pg-accent-d)}
.doc h3{margin:6px 0 4px; font-size:1.5rem} .doc p{color:#202121; margin-bottom:22px}
.csf{display:grid; grid-template-columns:.85fr 1.15fr}
.csf-l{padding:90px 56px 90px max(24px,calc((100vw - 1200px)/2 + 24px))}
.csf-r{background:#fff; padding:80px max(24px,calc((100vw - 1200px)/2 + 24px)) 80px 56px}
.csf-r .cform{box-shadow:none; border:0; padding:0; background:none; backdrop-filter:none}
.photo-cta{position:relative; min-height:560px; display:grid; place-items:center; text-align:center; color:#fff; overflow:hidden; isolation:isolate; padding:100px 24px}
.photo-cta>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; animation:pgZoom 24s ease-in-out infinite alternate}
.photo-cta::before{content:""; position:absolute; inset:0; background:rgba(32,33,33,.72); z-index:-1}
@keyframes pgZoom{to{transform:scale(1.12)}}
.photo-cta h2{color:#fff; font-size:clamp(2rem,4.4vw,3.4rem); max-width:820px; margin:0 auto 28px; font-weight:800}

/* ---------- FAQ ---------- */
.fsearch{position:relative; max-width:560px; margin-bottom:6px}
.fsearch input{width:100%; font:inherit; font-size:1.02rem; padding:18px 22px 18px 56px; border-radius:100px; border:2px solid rgba(236,0,140,.35); background:#fff; box-shadow:var(--shadow-sm); transition:border-color .25s, box-shadow .25s}
.fsearch input:focus{outline:0; border-color:var(--pg-accent); box-shadow:0 0 0 5px rgba(236,0,140,.14)}
.fsearch .ic{position:absolute; left:22px; top:50%; translate:0 -50%; width:22px; height:22px; color:var(--pg-accent); fill:none; stroke:currentColor; stroke-width:2}
.ftabs{position:sticky; top:72px; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.ftabs-in{display:flex; gap:8px; overflow-x:auto; padding:14px 0; scrollbar-width:none}
.ftabs-in::-webkit-scrollbar{display:none}
.ftab{flex:none; border:1.5px solid var(--line); background:#fff; border-radius:100px; padding:10px 20px; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--navy); transition:background .3s var(--ease), color .3s, border-color .3s, transform .2s}
.ftab:hover{border-color:var(--pg-accent); transform:translateY(-2px)}
.ftab.on{background:var(--pg-accent); border-color:var(--pg-accent); color:#fff}
.fq-list{max-width:900px; margin:0 auto}
.fq{border-bottom:1px solid var(--line); position:relative}
.fq::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--pg-accent); transition:width .6s var(--ease)}
.fq.open::before{width:100%}
.fq.hide{display:none}
.fq-q{width:100%; display:flex; align-items:center; gap:22px; text-align:left; background:none; border:0; padding:28px 4px; font-family:var(--font-head); font-weight:600; font-size:1.18rem; color:var(--navy)}
.fq-q .no{font-weight:800; color:var(--pg-accent); font-size:.95rem; min-width:28px}
.fq-q .tx{flex:1}
.fq-q .ch{width:42px; height:42px; border-radius:50%; background:var(--ab-blush); color:var(--pg-accent); display:grid; place-items:center; flex:none; transition:transform .45s var(--ease), background .3s, color .3s}
.fq-q:hover .ch{background:var(--pg-accent); color:#fff} .fq-q .ch .ic{width:20px; height:20px}
.fq.open .ch{transform:rotate(180deg); background:var(--pg-accent); color:#fff}
.fq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.fq.open .fq-a{grid-template-rows:1fr}
.fq-a>div{overflow:hidden}
.fq-a p{padding:0 70px 30px 54px; color:#202121; line-height:1.8; opacity:0; transform:translateY(12px); transition:opacity .5s .1s, transform .5s var(--ease) .1s}
.fq.open .fq-a p{opacity:1; transform:none}
.fq-a a{color:var(--pg-accent-d); text-decoration:underline}
.fq-empty{display:none; text-align:center; padding:60px 0; color:#202121} .fq-empty.on{display:block}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .qa-grid,.stories{grid-template-columns:1fr 1fr} .why{grid-template-columns:1fr 1fr}
  .cs{grid-template-columns:1fr; gap:36px}
  .imgs{flex-direction:column; align-items:stretch; min-height:0} .imgs-img{position:relative; width:100%; height:340px; top:0; border-radius:0 0 80px 80px}
  .imgs-txt{width:auto; margin:-60px 24px 56px}
  .csr-trust-in{grid-template-columns:1fr 1fr} .tc{border-bottom:1px solid var(--line)}
  .fa{grid-template-columns:1fr 1fr} .fcard,.fcard:nth-child(n+4){grid-column:span 1}
  .logos{--lg:3} .csf{grid-template-columns:1fr} .csf-l,.csf-r{padding:64px 24px}
}
@media (max-width:680px){
  .qa-grid,.why,.stories,.fa,.models,.docs{grid-template-columns:1fr}
  .qa-wrap{margin-top:-56px} .cform{padding:26px 20px} .cform .row{grid-template-columns:1fr}
  .hv-badge.wide{left:2%; bottom:6px; max-width:240px} .hv-corp .p1{height:200px} .hv-corp .p2{top:110px; height:190px} .hv-corp .p3{height:200px}
  .cs .ab-btn{width:100%; justify-content:center}
  .tl{grid-template-columns:1fr; gap:26px; text-align:left} .tl::before,.tl::after{display:none} .tl-s{display:flex; gap:16px; text-align:left} .tl-s i{margin:0; flex:none}
  .steps{grid-template-columns:1fr} .steps::before{display:none} .csr-trust-in{grid-template-columns:1fr}
  .logos{--lg:2} .mapx{height:620px} .mcard{top:auto; bottom:24px; translate:none; left:24px}
  .curve-t{border-radius:36px 36px 0 0; margin-top:-36px} .fl.a{width:200px;height:200px} .fl.b{display:none}
  .fq-q{font-size:1.04rem; gap:14px; padding:22px 0} .fq-a p{padding:0 0 24px 0} .ftabs{top:60px}
  .mdl{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  body{animation:none} .fl,.mapx svg.mp,.photo-cta>img,.jobs .pulse i{animation:none}
  .tl::after,.steps::before{transition:none; width:76%} .sc-ph{clip-path:none} .cs-photo img,.imgs-img img{transform:none}
  .fq-a,.fq-a p,.fq .ch{transition:none}
}
.csf-r p{color:#202121} .csf-r h3{color:var(--navy)}
.fq-q .tx{display:block}

/* contact topic chips (replace forms) */
.cs-r{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:38px; box-shadow:var(--shadow)}
.cs-r h3{font-size:1.4rem; margin-bottom:6px} .cs-r>p{color:#202121; margin-bottom:22px}
.chips{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.chip{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border:1.5px solid var(--line); border-radius:16px; font-family:var(--font-head); font-weight:600; color:var(--navy); position:relative; overflow:hidden; transition:transform .3s var(--ease), border-color .3s, background .3s, color .3s}
.chip .ic{width:18px; height:18px; transition:transform .3s var(--ease)}
.chip:hover{transform:translateY(-4px); border-color:var(--pg-accent); background:var(--pg-accent); color:#fff} .chip:hover .ic{transform:translateX(5px)}
.chip:last-child:nth-child(odd){grid-column:1/-1}
.csf{grid-template-columns:1fr} .csf-l{padding:96px 24px; max-width:1200px; margin:0 auto; text-align:center}
.csf-l .chips{max-width:760px; margin:34px auto 0; grid-template-columns:repeat(3,1fr); text-align:left}
.csf .chip{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff}
.csf .chip:hover{background:#fff; color:var(--pg-accent-d)}
@media (max-width:680px){.chips,.csf-l .chips{grid-template-columns:1fr} .cs-r{padding:26px 20px}}

/* ---- calm / flat overrides: no gradients, no spinning, no floating ---- */
.hv-ring,.fl{display:none}
.hv-badge{animation:none}
.hv-one{height:460px}
.hv-one .p1{left:4%; top:0; width:92%; height:430px; border-radius:26px 26px 110px 26px}
/* contact hero photo: show the whole picture (no zoom crop) and keep the rounded corners clean */
.hv-one .hv-photo img{transform:none; animation:none; object-fit:cover; object-position:60% 50%}
.hv-photo{isolation:isolate; background:#fff}
.hv-photo img{border-radius:inherit; backface-visibility:hidden; display:block}
.ab-js .hv-one .p1[data-a="mask"].is-in{clip-path:inset(0 round 26px 26px 110px 26px)}
.hv-one .hv-badge.wide{left:0; bottom:0}
.ab-hero{padding-bottom:96px}
.dk-cta{padding:72px 0} .dk-cta h2{font-size:clamp(1.7rem,3.4vw,2.6rem); margin-bottom:26px}
.dk-cta p{margin-top:-8px}
.qa-wrap{margin-top:-56px} .csr-trust{margin-top:-56px}
.ab-sec{padding:84px 0}
.mapbox{margin-top:30px; border-radius:26px 26px 90px 26px; overflow:hidden; box-shadow:var(--shadow); height:300px; border:1px solid var(--line)}
.mapbox iframe{width:100%; height:100%; border:0; display:block}
.t3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.sec-btn{margin-top:26px}
@media (max-width:1020px){.t3{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.t3{grid-template-columns:1fr} .hv-one{height:320px} .hv-one .p1{height:300px; width:100%; left:0; border-radius:22px 22px 70px 22px} .ab-js .hv-one .p1[data-a="mask"].is-in{clip-path:inset(0 round 22px 22px 70px 22px)} .ab-hero{padding-bottom:72px} .qa-wrap,.csr-trust{margin-top:-40px}}
.tl.light::before{background:rgba(32,33,33,.15)} .tl.light::after{background:var(--pg-accent)}
.tl.light .tl-s i{background:#fff; border-color:var(--pg-accent); color:var(--pg-accent)}
.tl.light .tl-s h3{color:var(--navy)} .tl.light .tl-s p{color:#202121}

/* palette on these pages: #EC008C magenta, #202121 charcoal, #FFFFFF white (tints = same colours at lower opacity) */
body.pg{--magenta:#EC008C; --magenta-deep:#EC008C; --pink-soft:#FFFFFF; --plum:#202121; --navy:#202121; --navy-2:#202121; --ab-plum:#202121; --ab-plum-2:#202121; --ab-pink:#EC008C; --ab-blush:rgba(236,0,140,.1); --ab-mist:rgba(236,0,140,.05); --orange:#EC008C; --orange-dark:#EC008C; --line:rgba(32,33,33,.15)}
.pg .ab-btn-primary{box-shadow:0 16px 32px -14px rgba(236,0,140,.7)}
a.nav-trigger{display:inline-flex; align-items:center; text-decoration:none}
.dk .ab-kicker{color:#fff} .dk .ab-kicker::before{background:#fff}

/* ---- clean-up pass ---- */
.fcard.plain{background:#202121}
.fcard.plain::before{display:none}
h1,h2,h3{text-wrap:balance}
.dk-cta h2{max-width:760px}
.qa{padding:30px 28px 34px} .qa p{margin-bottom:0}
.cs{align-items:start}
.t3 .qa,.why .wc{height:100%}
.csr-trust{padding-bottom:0}
.ab-sec{padding:72px 0}
.ab-head{margin-bottom:40px}
.ab-main .ab-sec + .ab-sec.tint, .ab-main .ab-sec.tint + .ab-sec{border-top:0}

/* ===== Annual Report (CSR page): three report covers with download badge ===== */
.ar-sec{background:linear-gradient(180deg,#FFF5FA 0%,#FFF5FA 100%)}
.ar-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); max-width:980px; margin:0 auto}
.ar-card{display:flex; flex-direction:column; align-items:center; gap:22px; text-decoration:none; color:inherit}
.ar-book{position:relative; display:block; width:min(100%,240px); aspect-ratio:3/4; background:#fff; box-shadow:0 18px 34px -14px rgba(32,33,33,.45), 0 2px 6px rgba(32,33,33,.12); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.ar-card:hover .ar-book,.ar-card:focus-visible .ar-book{transform:translateY(-8px); box-shadow:0 28px 44px -16px rgba(32,33,33,.5), 0 2px 6px rgba(32,33,33,.12)}
.ar-book > img{width:100%; height:100%; object-fit:cover; display:block}
.ar-cover{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-start; gap:4px; padding:22px 20px; background:linear-gradient(160deg,#fff 0%,#FDE3F0 100%); overflow:hidden}
.ar-cover small{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#202121; font-weight:600}
.ar-cover b{font-family:var(--font-head); font-size:1.15rem; color:#202121; margin-top:8px}
.ar-cover strong{font-family:var(--font-head); font-size:2rem; line-height:1.05; color:var(--magenta,#EC008C)}
.ar-cover i{position:absolute; left:-30%; right:-30%; bottom:-34%; height:62%; border-radius:50%; background:linear-gradient(120deg,#EC008C,#EC008C); opacity:.9}
.ar-dl{position:absolute; left:0; bottom:0; width:42px; height:42px; display:grid; place-items:center; background:var(--magenta,#EC008C); color:#fff; transition:background .25s, width .25s}
.ar-card:hover .ar-dl{background:#202121}
.ar-title{font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:#EC008C; text-align:center; transition:color .25s}
.ar-card:hover .ar-title{color:var(--magenta,#EC008C)}
@media (max-width:700px){.ar-grid{grid-template-columns:1fr; gap:34px}.ar-book{width:min(70%,240px)}}
@media (prefers-reduced-motion:reduce){.ar-book{transition:none}}
.docs.docs-3{grid-template-columns:repeat(3,1fr); max-width:1120px}
@media (max-width:980px){.docs.docs-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.docs.docs-3{grid-template-columns:1fr}}

/* ---------- CSR: How it works (4 connected step cards) ---------- */
.how{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; counter-reset:none}
.how::before{content:""; position:absolute; top:51px; left:12%; right:12%; height:2px; background:linear-gradient(90deg,var(--pg-accent) 0 50%,transparent 50% 100%) 0 0/12px 2px repeat-x; opacity:.55}
.how-s{position:relative; background:#fff; border:1px solid rgba(32,33,33,.08); border-radius:22px; padding:30px 22px 26px; text-align:center; box-shadow:0 14px 30px -22px rgba(43,10,36,.4); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s}
.how-s:hover{transform:translateY(-6px); border-color:var(--pg-accent); box-shadow:0 24px 40px -24px rgba(43,10,36,.45)}
.how-n{position:relative; z-index:1; width:42px; height:42px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--pg-accent); color:#fff; font:700 1.05rem var(--font-head); box-shadow:0 0 0 8px #fff, 0 0 0 9px rgba(32,33,33,.08)}
.how-s h3{font-size:1.2rem; margin:0 0 8px; color:var(--navy)}
.how-s p{margin:0; font-size:.95rem; line-height:1.55; color:#202121}
@media (max-width:900px){
  .how{grid-template-columns:1fr 1fr}
  .how::before{display:none}
}
@media (max-width:560px){
  .how{grid-template-columns:1fr; gap:14px}
  .how-s{display:grid; grid-template-columns:42px 1fr; column-gap:16px; text-align:left; padding:20px}
  .how-n{margin:0; grid-row:1 / span 2; box-shadow:none}
  .how-s h3{margin-bottom:4px}
}

/* ===== Mobile spacing fix: tighter gaps between the last content section, the dark CTA band and the footer =====
   Applies to every page that uses .ab-sec + includes/pg-cta.php (contact, career, corporate, donate, faq, gallery) */
@media (max-width:680px){
  .ab-main .ab-sec{padding:44px 0}
  .ab-main .ab-sec .ab-head{margin-bottom:24px}
  .ab-main .qa-wrap{padding-bottom:0}
  .ab-main .qa-wrap + .ab-sec{padding-top:36px}
  .ab-main .cs{gap:24px}
  .ab-main .cs-r{padding:22px 18px}
  .ab-main .cs-r>p{margin-bottom:16px}
  .ab-main .chips{gap:10px}
  .ab-main .chip{padding:13px 16px}
  .ab-main .mapbox{margin-top:20px; height:240px; border-radius:20px 20px 56px 20px}
  .ab-main .pg-lede{font-size:1rem; line-height:1.65}
  .ab-main .pg-h2{margin-bottom:12px}
  .ab-main .dk-cta{padding:44px 0}
  .ab-main .dk-cta h2{margin-bottom:20px}
  .ab-main .dk-cta p{margin-bottom:22px}
  .site-footer{padding-top:44px}
  .footer-rupee{margin-bottom:30px}
  .footer-grid{row-gap:26px; padding-bottom:32px}
  .footer-bottom{padding:18px 0}
}

/* Contact map: always visible (the reveal animation could leave it clipped and blank on phones) */
.mapbox,.mapbox[data-a]{opacity:1 !important; clip-path:none !important; transform:none !important}
.mapbox iframe{min-height:100%}