/* =========================================================
   ABOUT PAGES  (Our Story · Our Team · Legal & Transparency)
   Uses the tokens from style.css: magenta #EC008C, plum, white. No gold, no gradients.
   ========================================================= */
:root{
  --ab-plum:#202121; --ab-plum-2:#202121; --ab-pink:#EC008C; --ab-blush:#FDE3F0; --ab-mist:#FFF5FA;
}
.ab-main{position:relative; overflow:clip}
.ab-main h1,.ab-main h2,.ab-main h3{letter-spacing:-.01em}
.ab-kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta-deep); margin-bottom:16px}
.ab-kicker::before{content:""; width:28px; height:2px; background:var(--magenta); border-radius:2px}
.ab-kicker.light{color:var(--magenta-deep)}
.ab-kicker.light::before{background:var(--magenta)}

/* ---------- reveal system ---------- */
.ab-js [data-a]{opacity:0; transition:opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.1s var(--ease); transition-delay:var(--dl,0ms); will-change:transform,opacity}
.ab-js [data-a="up"]{transform:translateY(34px)}
.ab-js [data-a="down"]{transform:translateY(-26px)}
.ab-js [data-a="left"]{transform:translateX(-46px)}
.ab-js [data-a="right"]{transform:translateX(46px)}
.ab-js [data-a="zoom"]{transform:scale(.88)}
.ab-js [data-a="mask"]{opacity:1; clip-path:inset(0 0 100% 0); transform:scale(1.04)}
.ab-js [data-a].is-in{opacity:1; transform:none}
.ab-js [data-a="mask"].is-in{clip-path:inset(0 0 0 0)}
/* failsafe: if the script never runs, show everything after 3s */
.ab-js:not(.ab-ready) [data-a]{animation:abShow .01s 3s forwards}
@keyframes abShow{to{opacity:1; transform:none; clip-path:inset(0 0 0 0)}}

/* ---------- buttons ---------- */
.ab-btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:600; font-size:.96rem; padding:15px 28px; border-radius:100px; border:2px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s, border-color .25s; cursor:pointer}
.ab-btn .ic{width:18px; height:18px; transition:transform .25s var(--ease)}
.ab-btn:hover .ic{transform:translateX(4px)}
.ab-btn-primary{background:var(--magenta); color:#fff; box-shadow:0 16px 32px -14px rgba(236,0,140,.7)}
.ab-btn-primary:hover{background:#202121}
.ab-btn-line{border-color:var(--navy); color:var(--navy)}
.ab-btn-line:hover{background:var(--navy); color:#fff}
.ab-cta .ab-btn-line{border-color:rgba(255,255,255,.7); color:#fff}
.ab-cta .ab-btn-line:hover{background:#fff; color:var(--magenta-deep)}
.ab-btn-white{background:#fff; color:var(--magenta-deep); box-shadow:0 16px 32px -16px rgba(0,0,0,.45)}
.ab-btn-white:hover{transform:translateY(-3px)}
.ab-btn-dark{border-color:var(--navy); color:var(--navy)}
.ab-btn-dark:hover{background:var(--magenta); border-color:var(--magenta); color:#fff}

/* =========================================================
   HERO
   ========================================================= */
.ab-hero{position:relative; background:var(--ab-mist); color:var(--navy); border-bottom:1px solid var(--line); padding:72px 0 96px; isolation:isolate; overflow:hidden}
.ab-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; min-height:480px}
.ab-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.84rem; color:#202121; margin:0 0 26px}
.ab-crumbs a{transition:color .2s} .ab-crumbs a:hover{color:var(--magenta-deep)}
.ab-crumbs .ic{width:12px; height:12px; opacity:.6}
.ab-hero h1{color:var(--navy); font-size:clamp(2.2rem,4.4vw,3.6rem); font-weight:800; line-height:1.08; margin-bottom:24px}
.ab-hero h1 .ln{display:block; overflow:hidden; padding-bottom:.24em; margin-bottom:-.16em}
.ab-hero h1 .w{display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); transition-delay:calc(var(--i)*70ms + 150ms)}
.ab-ready .ab-hero h1 .w{transform:none}
.ab-hero h1 em{font-style:normal; color:var(--magenta); position:relative}
.ab-hero h1 .ul{position:absolute; left:0; right:0; bottom:-.12em; width:100%; height:.28em; overflow:visible}
.ab-hero h1 .ul path{fill:none; stroke:var(--magenta); stroke-width:5; stroke-linecap:round; stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 1.4s var(--ease) 1.1s}
.ab-ready .ab-hero h1 .ul path{stroke-dashoffset:0}
.ab-lead{font-size:1.1rem; line-height:1.75; color:#202121; max-width:540px; margin-bottom:34px}
.ab-hero-btns{display:flex; flex-wrap:wrap; gap:14px}
.ab-hero-copy{padding-top:6px}
.ab-hero .ab-kicker{margin-bottom:18px}

/* hero visuals */
.hv{position:relative; height:480px; perspective:1000px}
.hv [data-depth]{will-change:transform; transition:transform .25s ease-out, opacity .9s var(--ease), clip-path 1.1s var(--ease)}
.hv-photo{position:absolute; margin:0; border-radius:26px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(43,10,36,.45); border:5px solid rgba(255,255,255,.95)}
.hv-photo img{width:100%; height:100%; object-fit:cover; transform:scale(1.12); animation:abKen 14s ease-in-out infinite alternate}
@keyframes abKen{to{transform:scale(1.02) translateY(-1.5%)}}
.hv-story .p1{left:0; top:20px; width:68%; height:340px; border-radius:26px 26px 90px 26px}
.hv-story .p2{right:0; bottom:10px; width:44%; height:300px; border-radius:90px 26px 26px 26px}
.hv-badge{position:absolute; background:#fff; color:var(--navy); border-radius:20px; padding:14px 20px; box-shadow:0 22px 40px -18px rgba(0,0,0,.55); display:flex; align-items:center; gap:12px; font-family:var(--font-head)}
.hv-badge .bi{width:42px; height:42px; border-radius:14px; background:var(--ab-blush); color:var(--magenta); display:grid; place-items:center}
.hv-badge .bi .ic{width:22px; height:22px}
.hv-badge small{display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta-deep); font-weight:600}
.hv-badge b{display:block; font-size:1.55rem; font-weight:800; line-height:1.1; color:var(--navy)}
.hv-badge.b1{left:8%; bottom:26px; animation:abBob 5s ease-in-out infinite}
.hv-badge.b2{right:6%; top:0; animation:abBob 6s ease-in-out infinite .8s}
.hv-badge.b2 b{font-size:.95rem}
@keyframes abBob{0%,100%{translate:0 0} 50%{translate:0 -10px}}
.hv-ring{position:absolute; border-radius:50%; border:2px dashed rgba(255,138,201,.55); animation:abSpin 30s linear infinite; pointer-events:none}
.hv-ring.r1{width:210px; height:210px; right:34%; top:-10px}
.hv-ring.r2{width:120px; height:120px; left:46%; bottom:-6px; animation-direction:reverse; border-style:solid; border-color:rgba(236,0,140,.3)}
@keyframes abSpin{to{transform:rotate(360deg)}}

/* legal hero: shield */
.hv-shield{display:grid; place-items:center}
.sh{position:relative; width:min(420px,100%); aspect-ratio:1}
.sh .pulse{position:absolute; inset:18%; border-radius:50%; border:2px solid rgba(255,138,201,.55); animation:abRipple 4s ease-out infinite}
.sh .pulse.p2{animation-delay:1.33s} .sh .pulse.p3{animation-delay:2.66s}
@keyframes abRipple{0%{transform:scale(.7); opacity:.9} 100%{transform:scale(1.55); opacity:0}}
.sh .txt{position:absolute; inset:0; animation:abSpin 40s linear infinite}
.sh .txt text{font-family:var(--font-head); font-weight:700; font-size:15px; fill:var(--magenta-deep)}
.sh .shield{position:absolute; inset:25%; filter:drop-shadow(0 26px 34px rgba(236,0,140,.45))}
.sh .shield .body{fill:var(--magenta)}
.sh .shield .edge{fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.6}
.sh .shield .tick{fill:none; stroke:#fff; stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:70; stroke-dashoffset:70; transition:stroke-dashoffset 1s var(--ease) 1.2s}
.ab-ready .sh .shield .tick{stroke-dashoffset:0}
.sh .chip{position:absolute; background:#fff; color:var(--navy); font-family:var(--font-head); font-weight:700; font-size:.82rem; padding:9px 16px; border-radius:100px; border:1px solid var(--line); box-shadow:0 16px 30px -14px rgba(0,0,0,.6); display:flex; align-items:center; gap:8px}
.sh .chip .ic{width:15px; height:15px; color:var(--magenta); stroke-width:2.6}
.sh .chip.c1{left:-2%; top:22%; animation:abBob 5s ease-in-out infinite}
.sh .chip.c2{right:-2%; top:40%; animation:abBob 6s ease-in-out infinite .6s}
.sh .chip.c3{left:10%; bottom:10%; animation:abBob 5.5s ease-in-out infinite 1.2s}

/* =========================================================
   TAB STRIP (between the three pages)
   ========================================================= */
.ab-tabs{position:relative; z-index:5; margin-top:0; padding:56px 0 64px; background:#fff}
.ab-tabs-in{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:#fff; border-radius:100px; padding:8px; box-shadow:0 30px 60px -28px rgba(43,10,36,.5); border:1px solid var(--line); max-width:880px; margin:0 auto}
.ab-tab{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 18px; border-radius:100px; font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--navy); transition:color .3s}
.ab-tab i{font-style:normal; font-size:.72rem; letter-spacing:.1em; color:var(--magenta); transition:color .3s}
.ab-tab.is-active, .ab-tab.is-hover{color:#fff}
.ab-tab.is-active i, .ab-tab.is-hover i{color:var(--ab-blush)}
/* when the pink pill moves to another tab, the current tab must stay readable */
.ab-tabs-in.is-away .ab-tab.is-active:not(.is-hover){color:var(--navy)}
.ab-tabs-in.is-away .ab-tab.is-active:not(.is-hover) i{color:var(--magenta)}
.ab-tab-ind{position:absolute; z-index:0; top:8px; bottom:8px; left:0; width:0; border-radius:100px; background:var(--magenta); box-shadow:0 14px 26px -12px rgba(236,0,140,.7); transition:left .45s var(--ease), width .45s var(--ease)}

/* =========================================================
   GENERIC SECTIONS
   ========================================================= */
.ab-sec{padding:104px 0; position:relative}
.ab-sec.tint{background:var(--ab-mist)}
.ab-h2{font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:800; margin-bottom:18px}
.ab-h2 em{font-style:normal; color:var(--magenta)}
.ab-p{font-size:1.07rem; line-height:1.8; color:#202121; margin-bottom:18px}
.ab-split{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.ab-head{max-width:680px; margin:0 auto 56px; text-align:center}
.ab-head .ab-kicker{justify-content:center}

/* since-year */
.since{position:relative; display:grid; place-items:center; min-height:420px}
.since-disc{position:relative; width:min(380px,100%); aspect-ratio:1; border-radius:50%; background:var(--magenta); display:grid; place-items:center; animation:abSpin 26s linear infinite}
.since-in{position:absolute; inset:12px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; animation:abSpin 26s linear infinite reverse}
.since-in small{display:block; font-family:var(--font-head); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; color:var(--magenta-deep)}
.since-in b{display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(3.6rem,8vw,5.6rem); line-height:1; color:var(--navy); font-variant-numeric:tabular-nums}
.since-in span{display:block; margin-top:10px; font-size:.9rem; color:#202121; max-width:180px; margin-inline:auto}
.since-dot{position:absolute; width:18px; height:18px; border-radius:50%; background:var(--magenta); box-shadow:0 0 0 8px rgba(236,0,140,.18)}
.since-dot.d1{top:8%; right:16%; animation:abBob 4s ease-in-out infinite}
.since-dot.d2{bottom:12%; left:8%; width:12px; height:12px; background:var(--ab-pink); animation:abBob 5s ease-in-out infinite .7s}
.since-dot.d3{top:46%; right:-2%; width:10px; height:10px; animation:abBob 4.5s ease-in-out infinite 1.1s}
.ab-lede{font-family:var(--font-head); font-weight:600; font-size:1.25rem; line-height:1.5; color:var(--navy); margin-bottom:20px}

/* focus tiles */
.focus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.ft{position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:24px; padding:30px 28px 28px; isolation:isolate; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s}
.ft::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--magenta); transform:translateY(101%); transition:transform .55s var(--ease)}
.ft:hover{transform:translateY(-8px); box-shadow:0 30px 50px -26px rgba(236,0,140,.6); border-color:transparent}
.ft:hover::before{transform:none}
.ft .fi{width:56px; height:56px; border-radius:18px; background:var(--ab-blush); color:var(--magenta); display:grid; place-items:center; margin-bottom:22px; transition:background .4s, color .4s, transform .5s var(--ease)}
.ft .fi .ic{width:26px; height:26px; stroke-width:1.9}
.ft:hover .fi{background:rgba(255,255,255,.2); color:#fff; transform:rotate(-8deg) scale(1.08)}
.ft h3{font-size:1.2rem; margin-bottom:8px; transition:color .3s}
.ft p{font-size:.95rem; color:#202121; line-height:1.65; transition:color .3s}
.ft .no{position:absolute; right:22px; top:16px; font-family:var(--font-head); font-weight:800; font-size:2.6rem; color:rgba(236,0,140,.08); transition:color .4s}
.ft:hover h3,.ft:hover p{color:#fff} .ft:hover .no{color:#FFFFFF}

/* marquee */
.ab-marq{background:var(--magenta); color:#fff; overflow:hidden; padding:14px 0; margin:0; position:relative; z-index:2; box-shadow:0 20px 40px -24px rgba(236,0,140,.7)}
.ab-marq-track{display:flex; width:max-content; animation:abMarq 32s linear infinite}
.ab-marq:hover .ab-marq-track{animation-play-state:paused}
.ab-marq span{display:inline-flex; align-items:center; gap:34px; padding-right:34px; font-family:var(--font-head); font-weight:700; font-size:clamp(1.05rem,2vw,1.4rem); white-space:nowrap}
.ab-marq span::after{content:""; width:12px; height:12px; border-radius:50%; background:var(--ab-blush)}
@keyframes abMarq{to{transform:translateX(-50%)}}

/* direction quote (words light up while scrolling) */
.dir{background:#fff; overflow:hidden}
.dir-q{font-family:var(--font-head); font-weight:700; font-size:clamp(1.7rem,3.8vw,3rem); line-height:1.3; max-width:1000px; margin:0 auto; text-align:center; color:var(--navy)}
.dir-q .wd{opacity:.14; transition:opacity .35s, color .35s}
.dir-q .wd.on{opacity:1}
.dir-q .wd.hl.on{color:var(--magenta)}
html:not(.ab-js) .dir-q .wd{opacity:1}
.dir-mark{width:70px; height:70px; margin:0 auto 26px; color:var(--magenta); display:grid; place-items:center; border-radius:50%; background:var(--ab-blush)}
.dir-mark .ic{width:32px; height:32px}
.dir-by{text-align:center; margin-top:34px; font-size:.95rem; color:#202121}

/* =========================================================
   CTA band
   ========================================================= */
.ab-cta{position:relative; background:var(--magenta); color:#fff; text-align:center; padding:104px 0; overflow:hidden; isolation:isolate}
.ab-cta h2{color:#fff; font-size:clamp(1.9rem,4vw,3.1rem); font-weight:800; max-width:820px; margin:0 auto 18px}
.ab-cta-text{max-width:640px; margin:0 auto 34px; font-size:1.1rem; line-height:1.75; color:#FFFFFF}
.ab-cta-btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.ab-cta-ring{position:absolute; border-radius:50%; border:2px solid rgba(255,255,255,.22); z-index:-1; left:50%; top:50%; translate:-50% -50%; animation:abRipple2 9s ease-out infinite}
.ab-cta-ring.r1{width:420px; height:420px} .ab-cta-ring.r2{width:420px; height:420px; animation-delay:3s} .ab-cta-ring.r3{width:420px; height:420px; animation-delay:6s}
@keyframes abRipple2{0%{transform:scale(.4); opacity:.9} 100%{transform:scale(3.2); opacity:0}}

/* profile cards */
.pf-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.pf{position:relative; background:#fff; border:1px solid var(--line); border-radius:26px; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease); transform-style:preserve-3d}
.pf:hover{transform:translateY(-8px); box-shadow:0 34px 56px -28px rgba(236,0,140,.5)}
.pf-photo{position:relative; aspect-ratio:4/4.4; background:var(--ab-blush); overflow:hidden; display:grid; place-items:center}
.pf-photo img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.pf:hover .pf-photo img{transform:scale(1.07)}
.pf-photo .ini{font-family:var(--font-head); font-weight:800; font-size:3.4rem; color:var(--magenta)}
.pf-body{padding:22px 22px 24px}
.pf-body h3{font-size:1.15rem; margin-bottom:4px}
.pf-role{font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--magenta-deep); margin-bottom:10px}
.pf-area{display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.04em; background:var(--ab-blush); color:var(--magenta-deep); padding:4px 11px; border-radius:100px; margin-bottom:12px}
.pf-body p{font-size:.92rem; line-height:1.65; color:#202121}
.pf-li{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--navy); border-bottom:2px solid var(--magenta); padding-bottom:2px}
.pf-li .ic{width:14px; height:14px}

/* =========================================================
   LEGAL PAGE
   ========================================================= */
.lg-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
.lg-stat{background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px 24px; transition:transform .4s var(--ease), box-shadow .4s}
.lg-stat:hover{transform:translateY(-6px); box-shadow:0 26px 44px -26px rgba(236,0,140,.5)}
.lg-stat b{display:block; font-family:var(--font-head); font-weight:800; font-size:2.4rem; color:var(--magenta); line-height:1}
.lg-stat span{display:block; margin-top:8px; font-size:.9rem; color:#202121}
.cert-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:24px}
.cert{grid-column:span 2}
.cert{position:relative; background:#fff; border:1px solid var(--line); border-radius:28px; padding:22px 22px 26px; display:flex; flex-direction:column; transition:box-shadow .5s var(--ease), border-color .3s; transform-style:preserve-3d; will-change:transform}
.cert:hover{box-shadow:0 40px 60px -30px rgba(236,0,140,.55); border-color:rgba(236,0,140,.35)}
.cert-doc{position:relative; height:230px; border-radius:18px; background:var(--ab-blush); overflow:hidden; display:grid; place-items:center; margin-bottom:22px}
.cert-paper{position:relative; height:84%; aspect-ratio:3/4; background:#fff; border-radius:8px; box-shadow:0 20px 34px -16px rgba(43,10,36,.45); padding:14% 12%; transform:rotate(-4deg); transition:transform .6s var(--ease)}
.cert:hover .cert-paper{transform:rotate(0deg) translateY(-8px) scale(1.04)}
.cert-paper i{display:block; height:5px; border-radius:3px; background:#EBDCE6; margin-bottom:9px}
.cert-paper i:nth-child(1){width:60%; background:var(--magenta); height:6px; margin-bottom:14px}
.cert-paper i:nth-child(3){width:82%} .cert-paper i:nth-child(5){width:70%}
.cert-seal{position:absolute; right:10%; bottom:8%; width:34%; aspect-ratio:1; border-radius:50%; background:var(--magenta); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--magenta)}
.cert-seal .ic{width:52%; height:52%; stroke-width:2.6}
.cert-ribbon{position:absolute; left:14px; top:14px; background:#fff; border-radius:100px; padding:6px 13px; font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.08em; color:var(--magenta-deep); box-shadow:0 8px 16px -8px rgba(43,10,36,.4)}
.cert h3{font-size:1.28rem; margin-bottom:6px}
.cert-sub{font-size:.9rem; color:#202121; margin-bottom:20px}
.cert-actions{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}
.cert-btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:.9rem; padding:12px 22px; border-radius:100px; border:2px solid var(--magenta); background:var(--magenta); color:#fff; cursor:pointer; transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s}
.cert-btn:hover{background:#202121; border-color:#202121; transform:translateY(-2px); box-shadow:0 14px 24px -12px rgba(236,0,140,.7)}
.cert-btn .ic{width:16px; height:16px}
.cert-btn.ghost{background:transparent; color:var(--magenta-deep); padding:12px; width:46px; height:46px; justify-content:center}
.cert-btn.ghost:hover{background:var(--ab-blush); color:var(--magenta-deep); box-shadow:none}
.cert-actions .cert-btn.cert-btn-alt{background:#fff; color:var(--magenta-deep); border-color:var(--magenta)}
.cert-actions .cert-btn.cert-btn-alt:hover{background:var(--ab-blush); color:var(--magenta-deep); box-shadow:none}
@media (max-width:680px){ .cert-actions{flex-wrap:nowrap} .cert-actions .cert-btn{flex:1 1 0; min-width:0; justify-content:center; padding:12px 10px} }
.cert-btn[disabled]{background:#F1E6EE; border-color:#F1E6EE; color:#202121; cursor:not-allowed; transform:none; box-shadow:none}

/* trust statement */
.trust{background:var(--ab-plum); color:#fff; position:relative; overflow:hidden; isolation:isolate}
.trust-in{display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center; max-width:980px; margin:0 auto}
.trust-badge{position:relative; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); display:grid; place-items:center}
.trust-badge::after{content:""; position:absolute; inset:-14px; border-radius:50%; border:2px dashed rgba(255,138,201,.5); animation:abSpin 24s linear infinite}
.trust-badge .ic{width:64px; height:64px; color:var(--ab-pink); stroke-width:1.5}
.trust h2{color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; margin-bottom:16px}
.trust p{font-size:1.12rem; line-height:1.8; color:#FFFFFF}
.trust-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.trust-list span{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); padding:8px 15px; border-radius:100px; font-size:.86rem; font-weight:600}
.trust-list .ic{width:15px; height:15px; color:var(--ab-pink); stroke-width:2.6}

/* certificate viewer */
.vw{position:fixed; inset:0; z-index:600; display:grid; place-items:center; padding:20px; background:rgba(29,6,24,.78); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s}
.vw.open{opacity:1; visibility:visible}
.vw-box{position:relative; width:min(980px,100%); height:min(86vh,820px); background:#fff; border-radius:24px; overflow:hidden; display:flex; flex-direction:column; transform:translateY(30px) scale(.94); transition:transform .5s var(--ease); box-shadow:0 50px 90px -30px rgba(0,0,0,.7)}
.vw.open .vw-box{transform:none}
.vw-bar{display:flex; align-items:center; gap:14px; padding:14px 18px 14px 24px; border-bottom:1px solid var(--line); background:var(--ab-mist)}
.vw-bar h3{flex:1; font-size:1.05rem; margin:0}
.vw-bar a, .vw-bar button{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:.85rem; padding:9px 16px; border-radius:100px; border:1.5px solid var(--magenta); color:var(--magenta-deep); background:#fff; cursor:pointer; transition:background .2s, color .2s}
.vw-bar a:hover{background:var(--magenta); color:#fff}
.vw-bar .x{width:40px; height:40px; padding:0; justify-content:center; border-color:var(--line); color:var(--navy)}
.vw-bar .x:hover{background:var(--navy); color:#fff}
.vw-bar .ic{width:16px; height:16px}
.vw-stage{position:relative; flex:1; background:#f4eef2}
.vw-stage iframe, .vw-stage img{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; background:#fff}
.vw-load{position:absolute; inset:0; display:grid; place-items:center; color:var(--magenta-deep); font-family:var(--font-head); font-weight:600}
.vw-load::before{content:""; width:42px; height:42px; border-radius:50%; border:4px solid var(--ab-blush); border-top-color:var(--magenta); animation:abSpin .8s linear infinite; margin-right:14px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1020px){
  .ab-hero-grid{grid-template-columns:1fr; gap:30px}
  .ab-hero{padding-top:44px}
  .hv{height:420px; max-width:520px; margin:0 auto; width:100%}
  .ab-split{grid-template-columns:1fr; gap:44px}
  .focus-grid{grid-template-columns:repeat(2,1fr)}
  .cert-grid{grid-template-columns:repeat(2,1fr)}
  .cert, .cert:nth-child(n+4){grid-column:auto}
  .cert:last-child:nth-child(odd){grid-column:span 2}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .ab-sec{padding:68px 0}
  .ab-hero{padding:34px 0 72px}
  .ab-tabs-in{border-radius:26px; grid-template-columns:1fr}
  .ab-tab-ind{border-radius:20px}
  .ab-tab i{display:none}
  .hv{height:360px}
  .hv-shield .sh{width:88%}
  .hv-story .p1{height:270px} .hv-story .p2{height:230px}
  .hv-badge b{font-size:1.2rem}
  .focus-grid,.cert-grid,.pf-grid,.lg-stats{grid-template-columns:1fr}
  .cert:last-child{grid-column:auto}
  .trust-in{grid-template-columns:1fr; text-align:center; justify-items:center}
  .trust-list{justify-content:center}
  .vw-box{height:90vh; border-radius:18px} .vw-bar{flex-wrap:wrap}
  .ab-marq{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .ab-js [data-a]{opacity:1 !important; transform:none !important; clip-path:none !important}
  .ab-hero h1 .w{transform:none}
  .ab-hero h1 .ul path, .sh .shield .tick{stroke-dashoffset:0}
  .dir-q .wd{opacity:1}
}

/* team profile groups */
.pf-group + .pf-group{margin-top:64px}
.pf-title{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.pf-title h3{font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:800}
.pf-title::after{content:""; flex:1; height:1px; background:var(--line)}
.pf-grid.n2{grid-template-columns:repeat(2,minmax(0,360px))}

/* organisation details (legal page) */
.det{display:grid; grid-template-columns:repeat(2,1fr); background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden}
.det > div{padding:24px 28px; border-bottom:1px solid var(--line)}
.det > div:nth-child(even){border-left:1px solid var(--line)}
.det > div.full{grid-column:1/-1; border-left:0}
.det > div:last-child, .det > div:nth-last-child(2):nth-child(even){border-bottom:0}
.det dt{font-family:var(--font-head); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta-deep); margin-bottom:6px}
.det dd{margin:0; color:var(--navy); line-height:1.65}
.det dd small{display:block; color:#202121; margin-top:4px}
.det a{border-bottom:2px solid var(--ab-blush)} .det a:hover{border-color:var(--magenta)}
@media (max-width:1020px){ .pf-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){
  .pf-grid.n2{grid-template-columns:1fr}
  .det{grid-template-columns:1fr}
  .det > div, .det > div:nth-child(even){border-left:0; border-bottom:1px solid var(--line)}
  .det > div:last-child{border-bottom:0}
}

/* team page: text-only hero, starts straight into the team details */
.ab-hero.simple{padding:76px 0 132px}
.ab-hero.simple .ab-hero-copy{max-width:760px}

/* profile cards: polished + animated */
.pf-photo .ini{position:relative; display:grid; place-items:center; width:116px; height:116px; border-radius:50%; background:#fff; font-size:2.5rem; box-shadow:0 18px 34px -18px rgba(236,0,140,.6); transition:transform .6s var(--ease)}
.pf-photo .ini::before{content:""; position:absolute; inset:-12px; border-radius:50%; border:2px dashed rgba(236,0,140,.45); animation:abSpin 20s linear infinite}
.pf:hover .pf-photo .ini{transform:scale(1.08)}
.pf::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:var(--magenta); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.pf:hover::after{transform:scaleX(1)}
.pf-body{padding:24px 24px 28px}
.pf-role{margin-bottom:0}
.pf-body h3 + .pf-role + p{margin-top:12px}
.ab-js .pf-title::after{transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease) .25s}
.ab-js .pf-title.is-in::after{transform:none}
.pf-title h3{position:relative; padding-left:18px}
.pf-title h3::before{content:""; position:absolute; left:0; top:.28em; bottom:.28em; width:5px; border-radius:4px; background:var(--magenta)}
@media (prefers-reduced-motion:reduce){ .pf-photo .ini::before{animation:none} .ab-js .pf-title::after{transform:none} }
@media (max-width:680px){ .ab-hero.simple{padding:40px 0 112px} }

/* after the reveal finishes: instant, snappy hover transitions (no leftover stagger delay) */
.ab-js [data-a].done:not([data-depth]){transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s, background-color .3s, color .3s; transition-delay:0ms}

/* =========================================================
   SCROLL PROGRESS BAR (starts empty at the top, fills to the end)
   ========================================================= */
.ab-progress{position:fixed; left:0; top:0; width:100%; height:4px; z-index:400; pointer-events:none}
.ab-progress i{display:block; width:100%; height:100%; background:var(--navy); transform:scaleX(0); transform-origin:left; will-change:transform}

/* =========================================================
   TEAM PAGE: hero count visual
   ========================================================= */
.ab-hero.simple .ab-hero-grid{min-height:340px}
.tm-stats{position:relative; height:340px; max-width:460px; width:100%; margin:0 auto}
.tm-ring{position:absolute; border-radius:50%; border:2px dashed rgba(236,0,140,.4); animation:abSpin 28s linear infinite}
.tm-ring.r1{width:300px; height:300px; right:6%; top:6%}
.tm-ring.r2{width:170px; height:170px; left:4%; bottom:2%; animation-direction:reverse; border-style:solid; border-color:rgba(236,0,140,.22)}
.tm-stat{position:absolute; display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:18px 26px; min-width:178px; box-shadow:0 26px 44px -24px rgba(43,10,36,.4); animation:abBob 5s ease-in-out infinite}
.tm-stat b{font-family:var(--font-head); font-weight:800; font-size:2.8rem; line-height:1; color:var(--magenta); font-variant-numeric:tabular-nums}
.tm-stat span{font-family:var(--font-head); font-weight:600; font-size:.86rem; color:var(--navy)}
.tm-stat.s1{left:2%; top:6%}
.tm-stat.s2{right:0; top:34%; background:var(--magenta); border-color:var(--magenta); animation-delay:-1.6s}
.tm-stat.s2 b, .tm-stat.s2 span{color:#fff}
.tm-stat.s3{left:10%; bottom:2%; animation-delay:-3.2s}

/* =========================================================
   TEAM PAGE: livelier cards
   ========================================================= */
.ab-js .pf[data-a]{transform:translateY(60px) scale(.94)}
.ab-js .pf[data-a].is-in{transform:none}
.pf{cursor:pointer}
.pf:focus-visible,.pf-feature:focus-visible{outline:3px solid var(--magenta); outline-offset:4px}
.pf-photo .ini{animation:abBob 5s ease-in-out infinite}
.pf:nth-child(2) .ini{animation-delay:-1.2s} .pf:nth-child(3) .ini{animation-delay:-2.4s} .pf:nth-child(4) .ini{animation-delay:-3.6s}
.pf-body{display:flex; flex-direction:column}
.pf-more{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--magenta-deep)}
.pf-more .ic{width:15px; height:15px; transition:transform .35s var(--ease)}
.pf:hover .pf-more .ic{transform:translateX(5px)}
.pf-count{margin-left:auto; order:3; font-family:var(--font-head); font-weight:600; font-size:.82rem; color:var(--magenta-deep); background:var(--ab-blush); padding:6px 14px; border-radius:100px; white-space:nowrap}
.pf-count b{font-weight:800}
.pf-title::after{order:2}

/* Chairman & Founder: big featured panel */
.pf-feature{position:relative; display:grid; grid-template-columns:minmax(260px,.78fr) 1.6fr; background:#fff; border:2px solid var(--line); border-radius:34px; overflow:hidden; cursor:pointer; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s}
.pf-feature:hover{transform:translateY(-8px); border-color:var(--magenta); box-shadow:0 44px 70px -36px rgba(236,0,140,.55)}
.pff-media{position:relative; min-height:380px; background:var(--ab-blush); display:grid; place-items:center; overflow:hidden}
.pff-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.pf-feature:hover .pff-media img{transform:scale(1.06)}
.pff-media .ini{position:relative; display:grid; place-items:center; width:180px; height:180px; border-radius:50%; background:#fff; color:var(--magenta-deep); font-family:var(--font-head); font-weight:800; font-size:4rem; box-shadow:0 26px 50px -24px rgba(236,0,140,.65); animation:abBob 5.5s ease-in-out infinite}
.pff-media .ini::before,.pff-media .ini::after{content:""; position:absolute; border-radius:50%; border:2px dashed rgba(236,0,140,.5); animation:abSpin 22s linear infinite}
.pff-media .ini::before{inset:-16px}
.pff-media .ini::after{inset:-38px; border-style:solid; border-color:rgba(236,0,140,.2); animation-direction:reverse; animation-duration:34s}
.pff-body{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:52px clamp(28px,4vw,60px)}
.pff-tag{display:inline-block; background:var(--magenta); color:#fff; font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; padding:7px 16px; border-radius:100px; margin-bottom:18px}
.pff-body h3{font-size:clamp(1.9rem,3.6vw,3rem); font-weight:800; margin-bottom:14px}
.pff-lead{font-size:1.08rem; line-height:1.8; color:#202121; max-width:640px; margin-bottom:22px}
.pff-chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px}
.pff-chips span{display:inline-flex; align-items:center; gap:8px; background:var(--ab-mist); border:1px solid rgba(236,0,140,.25); color:var(--navy); font-size:.88rem; font-weight:600; padding:8px 15px; border-radius:100px}
.pff-chips .ic{width:15px; height:15px; color:var(--magenta); stroke-width:2.6}
.pff-btn{display:inline-flex; align-items:center; gap:10px; background:var(--magenta); color:#fff; font-family:var(--font-head); font-weight:600; padding:14px 28px; border-radius:100px; transition:background .25s}
.pff-btn .ic{width:18px; height:18px; transition:transform .35s var(--ease)}
.pf-feature:hover .pff-btn{background:#202121}
.pf-feature:hover .pff-btn .ic{transform:translateX(5px)}

/* =========================================================
   TEAM DETAILS POPUP
   ========================================================= */
.tmv{position:fixed; inset:0; z-index:600; display:grid; place-items:center; padding:20px; background:rgba(32,33,33,.74); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s}
.tmv.open{opacity:1; visibility:visible}
.tmv-box{position:relative; width:min(880px,100%); max-height:92vh; overflow:auto; display:grid; grid-template-columns:300px 1fr; background:#fff; border-radius:30px; box-shadow:0 60px 100px -34px rgba(0,0,0,.7); opacity:0; transform:translateY(40px) scale(.92); transition:transform .55s var(--ease), opacity .4s}
.tmv.open .tmv-box{opacity:1; transform:none}
.tmv-x{position:absolute; right:16px; top:16px; z-index:3; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--navy); display:grid; place-items:center; cursor:pointer; transition:background .25s, color .25s, transform .35s var(--ease)}
.tmv-x:hover{background:var(--navy); color:#fff; transform:rotate(90deg)}
.tmv-x .ic{width:18px; height:18px}
.tmv-side{background:var(--magenta); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; padding:48px 24px; text-align:center}
.tmv-av{position:relative; flex:none; width:150px; height:150px; border-radius:50%; background:#fff; color:var(--magenta-deep); display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:3rem}
.tmv-av::before{content:""; position:absolute; inset:-14px; border-radius:50%; border:2px dashed rgba(255,255,255,.7); animation:abSpin 20s linear infinite}
.tmv-av img{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 20%}
.tmv-group{font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase}
.tmv-main{display:flex; flex-direction:column; padding:52px 44px 30px}
.tmv-kicker{font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta-deep); margin-bottom:10px; padding-right:48px}
.tmv-main h3{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; margin-bottom:6px}
.tmv-role{font-family:var(--font-head); font-weight:600; color:var(--magenta-deep); margin-bottom:16px}
.tmv-bio{line-height:1.8; color:#202121; margin-bottom:18px}
.tmv-points{display:grid; gap:10px; margin-bottom:26px}
.tmv-points:empty{display:none}
.tmv-points li{display:flex; align-items:flex-start; gap:12px; color:var(--navy); font-weight:500; line-height:1.5}
.tmv-points .tk{flex:none; width:24px; height:24px; border-radius:50%; background:var(--ab-blush); color:var(--magenta); display:grid; place-items:center}
.tmv-points .tk .ic{width:13px; height:13px; stroke-width:3}
.tmv-foot{margin-top:auto; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.tmv-nav{display:flex; align-items:center; gap:12px}
.tmv-nav button{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--magenta); background:#fff; color:var(--magenta-deep); display:grid; place-items:center; cursor:pointer; transition:background .25s, color .25s}
.tmv-nav button:hover{background:var(--magenta); color:#fff}
.tmv-nav .ic{width:18px; height:18px}
.tmv-count{font-family:var(--font-head); font-weight:600; font-size:.9rem; color:#202121; min-width:48px; text-align:center}
@keyframes tmvIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.tmv-main.swap > *{animation:tmvIn .55s var(--ease) both}
.tmv-main.swap > :nth-child(2){animation-delay:.05s} .tmv-main.swap > :nth-child(3){animation-delay:.1s} .tmv-main.swap > :nth-child(4){animation-delay:.15s} .tmv-main.swap > :nth-child(5){animation-delay:.2s} .tmv-main.swap > :nth-child(6){animation-delay:.25s}
.tmv-side.swap .tmv-av{animation:abZoomIn .6s var(--ease) both}
@keyframes abZoomIn{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}

@media (max-width:1020px){
  .tm-stats{height:300px}
  .pf-feature{grid-template-columns:1fr}
  .pff-media{min-height:260px}
}
@media (max-width:680px){
  .tm-stats{height:280px}
  .tm-stat{min-width:150px; padding:14px 20px} .tm-stat b{font-size:2.2rem}
  .tm-ring.r1{width:220px; height:220px}
  .pff-body{padding:34px 24px}
  .pff-media .ini{width:130px; height:130px; font-size:3rem}
  .pf-count{display:none}
  .tmv-box{grid-template-columns:1fr; border-radius:24px}
  .tmv-side{flex-direction:row; padding:24px; gap:18px; text-align:left; justify-content:flex-start}
  .tmv-av{width:84px; height:84px; font-size:1.8rem; flex:none}
  .tmv-main{padding:28px 24px 24px}
  .tmv-x{background:#fff}
}
@media (prefers-reduced-motion:reduce){
  .tm-stat,.pf-photo .ini,.pff-media .ini{animation:none}
  .tmv-main.swap > *,.tmv-side.swap .tmv-av{animation:none}
}

/* hover lift for revealed cards (the reveal rule would otherwise keep transform:none) */
.ab-js .ft.is-in:hover{transform:translateY(-8px)}
.ab-js .lg-stat.is-in:hover{transform:translateY(-6px)}
.ab-js .pf-feature.is-in:hover{transform:translateY(-8px)}

/* Smaller closing sections (the last three before the page switcher) */
.ab-sec.dir,#details,.ab-sec.trust{padding:64px 0}
.dir-q{font-size:clamp(1.4rem,2.8vw,2.1rem)}
.dir-mark{width:56px; height:56px; margin-bottom:18px}
.ab-cta{padding:64px 0}
.ab-cta h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.ab-cta-text{margin-bottom:26px; font-size:1.02rem; line-height:1.65}
#details .ab-head,.ab-sec.trust .ab-head{margin-bottom:32px}

/* Tab strip at the bottom of the About pages: tinted band so the white pill is clearly visible */
.ab-tabs{background:var(--ab-mist); border-top:1px solid var(--line); padding:44px 0 52px}
.ab-tabs-h{text-align:center; font-size:clamp(1.4rem,2.8vw,2rem); font-weight:800; color:var(--navy); margin:0 0 22px}
.ab-tabs-h a{display:inline-flex; align-items:center; gap:10px; color:var(--magenta); border-bottom:3px solid var(--magenta); padding-bottom:3px}
.ab-tabs-h .ic{width:.9em; height:.9em; fill:none; stroke:currentColor; stroke-width:2.4; transition:transform .3s var(--ease)}
.ab-tabs-h a:hover .ic{transform:translateX(5px)}
.ab-tabs-h a:focus-visible{outline:3px solid var(--navy); outline-offset:4px; border-radius:4px}
.ab-tabs .ab-tabs-in{border:1px solid #D9C9D3; box-shadow:0 18px 36px -24px rgba(43,10,36,.45)}

/* Pink backgrounds: all text and accents on them must be white, never pink */
.ab-cta .ab-kicker,.ab-cta .ab-kicker.light{color:#fff}
.ab-cta .ab-kicker::before,.ab-cta .ab-kicker.light::before{background:#fff}
.ab-cta em,.ab-cta a:not(.ab-btn-white){color:#fff}
.ab-marq,.ab-marq span{color:#fff}
.tm-stat.s2,.tm-stat.s2 b,.tm-stat.s2 span{color:#fff}
.tmv-side,.tmv-group{color:#fff}
.pff-tag,.pff-btn,.ab-btn-primary,.cert-btn:not(.ghost){color:#fff}
.ft:hover h3,.ft:hover p,.ft:hover .fi,.ft:hover .no{color:#fff}

.pf-feature + .pf-feature{margin-top:24px}

/* Team: keep faces in frame on mobile */
.pff-media img{object-position:50% 20%}
@media (max-width:680px){
  .pf-feature + .pf-feature{margin-top:18px}
  .pff-media{min-height:300px}
  .pff-body h3{font-size:1.7rem}
  .pff-chips span{font-size:.82rem}
  .ft h3{overflow-wrap:anywhere}
}

/* Team popup: force a perfect circle photo (overrides anything else, incl. inline styles) */
#tmvAv{
  position:relative !important;
  width:150px !important; height:150px !important;
  min-width:150px !important; min-height:150px !important;
  flex:0 0 150px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  padding:0 !important; margin:0 !important;
}
#tmvAv img{
  position:absolute !important; inset:0 !important;
  display:block !important;
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:50% 18% !important;
}
@media (max-width:680px){
  #tmvAv{width:84px !important; height:84px !important; min-width:84px !important; min-height:84px !important; flex-basis:84px !important}
}
/* Our Story cards: icon on the left, title beside it, text below */
.ft{display:grid; grid-template-columns:56px 1fr; column-gap:16px; align-items:center; align-content:start}
.ft .fi{margin-bottom:0; grid-column:1; grid-row:1}
.ft h3{grid-column:2; grid-row:1; margin:0; padding-right:48px}
.ft p{grid-column:1 / -1; grid-row:2; margin-top:16px}

/* ---- Chairman's message (Our Team) ---- */
.cm-msg{margin:32px 0 0;padding:clamp(24px,4vw,44px);border-radius:24px;background:#fff;border:1px solid rgba(32,33,33,.12);box-shadow:0 20px 50px -30px rgba(32,33,33,.35);position:relative}
.cm-msg::before{content:"\201C";position:absolute;top:6px;right:26px;font-size:7rem;line-height:1;color:rgba(236,0,140,.14);font-family:Georgia,serif;pointer-events:none}
.cm-head h3{margin:6px 0 18px;font-size:clamp(1.4rem,2.6vw,2rem)}
.cm-msg blockquote{margin:0;padding:0;border:0}
.cm-msg blockquote p{font-size:1.04rem;line-height:1.75;margin:0 0 14px;max-width:78ch}
.cm-sign{display:flex;flex-direction:column;gap:2px;margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(32,33,33,.12)}
.cm-sign strong{color:#EC008C;font-size:1.05rem}
.cm-sign span{font-size:.92rem;opacity:.85}