/* ===== About Us page (about-us.html) =====
   Loaded after sections.css, whose "Who We Are" (.about) and "Achievements" (.stats) sections this page re-uses.
   Everything new is prefixed ab-. Palette and Plus Jakarta Sans apply to the page content only (header and footer keep the site look). */

.about-page{
  --ab-navy:#091B42; --ab-deep:#061633; --ab-gold:#D6A32E; --ab-gold-hi:#F0CB73; --ab-bg:#F8F9FC; --ab-text:#536078; --ab-line:#E8D3AD;
  --ab-gold-grad:linear-gradient(135deg,#F0CB73 0%,#D6A32E 55%,#B98417 100%);
  --ab-font:'Plus Jakarta Sans','Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
.about-page main{--sans:var(--ab-font);--serif:var(--ab-font);font-family:var(--ab-font);color:var(--ab-text)}
.about-page main{overflow-x:clip}
.about-page main .title{color:var(--ab-navy);font-weight:800;font-size:clamp(1.62rem,3.6vw,2.55rem);line-height:1.12;letter-spacing:-.02em}
.about-page main .label{color:#B98417;font-weight:700;font-size:.78rem;letter-spacing:.2em}
.about-page main .label::before{background:var(--ab-gold-grad)}
.about-page main .lead{color:var(--ab-text);font-size:clamp(1rem,1.3vw,1.1rem)}
.about-page .stats{--sans:var(--ab-font)}
/* "Who We Are" keeps the site's normal font and heading style (Manrope, same sizes as the homepage), not the About-page font */
.about-page main .about{--sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--serif:var(--sans);font-family:var(--sans);color:var(--text)}
.about-page main .about .about-title{font-size:calc(54 * var(--u));font-weight:800;line-height:calc(62 / 54);letter-spacing:-.02em;color:var(--navy)}
.about-page main .about .label{color:var(--gold-ink);font-weight:600;letter-spacing:.22em}
.about-page main .about .label::before{background:var(--gold-grad)}
@media (max-width:560px){.about-page main .about .about-title{font-size:clamp(1.75rem,7.4vw,2.4rem);line-height:1.15}}
.ab-wrap{width:min(1280px,100% - 3rem);margin-inline:auto}
.ab-gold{background:var(--ab-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ab-head{margin-bottom:2rem}
.ab-head-left{max-width:none}
.js:not(.no-anim) [data-ab]{opacity:0}
.js:not(.no-anim) [data-clip]{clip-path:inset(0 100% 0 0)}
/* hero entrance starting states: set in CSS so nothing flashes before the script runs (visibility, not transform, so GSAP does not read a pixel offset) */
.js:not(.no-anim) .ab-hero-title .ab-line>span{visibility:hidden}
.js:not(.no-anim) [data-ab-guard]{opacity:0}
.js:not(.no-anim) [data-clip].is-revealed{clip-path:none}

/* ---- 1. hero ---- */
.ab-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(540px,45vw,640px);overflow:hidden;color:#fff;background:var(--ab-deep)}
.ab-hero-bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.ab-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:30% 52%;transform-origin:25% 50%;transform:scale(1.42);animation:abZoom 26s ease-out both}
@keyframes abZoom{from{transform:scale(1.58)}to{transform:scale(1.42)}}
.ab-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(100deg,#061633 6%,rgba(9,27,66,.93) 40%,rgba(9,27,66,.55) 72%,rgba(6,22,51,.7))}
.ab-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;height:4px;background:var(--ab-gold-grad)}
.ab-hero-line{position:absolute;z-index:-1;top:-10%;bottom:-10%;width:1px;background:linear-gradient(transparent,rgba(214,163,46,.8),transparent);transform:rotate(16deg) scaleY(0);transform-origin:top;animation:abLine 1.6s .5s var(--ease-out) forwards}
.ab-hero-line-1{left:56%}.ab-hero-line-2{left:60.5%;animation-delay:.75s;opacity:.55}
@keyframes abLine{to{transform:rotate(16deg) scaleY(1)}}
.ab-hero-shape{position:absolute;z-index:-1;right:-6%;bottom:-30%;width:46%;aspect-ratio:1;border:1px solid rgba(214,163,46,.4);border-radius:50%}
.ab-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:2rem;min-height:inherit}
.ab-hero-copy{align-self:center;padding-block:3.2rem 4rem}
.ab-crumbs ol{display:flex;gap:.5rem;margin:0 0 1.8rem;font:600 .78rem/1 var(--ab-font);letter-spacing:.12em;text-transform:uppercase;color:#B9C5DA}
.ab-crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--ab-gold)}
.ab-crumbs a:hover{color:var(--ab-gold-hi)}
.ab-crumbs [aria-current]{color:var(--ab-gold-hi)}
.ab-eyebrow{display:flex;align-items:center;gap:.9rem;margin:0 0 1.1rem;font:700 .78rem/1 var(--ab-font);letter-spacing:.3em;text-transform:uppercase;color:var(--ab-gold-hi)}
.ab-eyebrow::before{content:"";width:2.6rem;height:2px;background:var(--ab-gold-grad)}
.ab-hero-title{margin:0 0 1.2rem;font:800 clamp(2.3rem,4.6vw,4rem)/1.1 var(--ab-font);letter-spacing:-.025em;color:#fff}
.ab-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ab-line>span{display:block}
/* only the moving inner span carries the gold gradient: if the masked wrapper had it too, a second copy of the text would stay at the final position while the first one rises (the "double text") */
.ab-line.ab-gold{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:initial;color:inherit}
.ab-line.ab-gold>span{display:block;background:var(--ab-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ab-hrule{display:block;width:5rem;height:3px;margin-bottom:1.4rem;background:var(--ab-gold-grad);transform-origin:left}
.ab-hero-text{max-width:34rem;margin:0;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.75;color:#D5DDEC}
.ab-hero-visual{position:relative;align-self:end;justify-self:center;width:min(100%,480px)}
.ab-hero-ring{position:absolute;left:8%;right:8%;bottom:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 28%,rgba(240,203,115,.28),rgba(9,27,66,0) 68%);box-shadow:inset 0 0 0 1px rgba(214,163,46,.55)}
.ab-hero-visual img{position:relative;display:block;width:100%;height:auto;max-height:600px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45));-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}

/* ---- 3. story ---- */
.ab-story{background:#fff}
.ab-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(2.5rem,6vw,6rem)}
.ab-story-media{position:relative;margin:0;padding:0 0 1.6rem 1.6rem}
.ab-frame{position:absolute;left:0;bottom:0;width:78%;height:82%;border:2px solid var(--ab-gold);border-radius:18px}
.ab-story-photo{position:relative;overflow:hidden;aspect-ratio:4/3.3;border-radius:18px;box-shadow:0 36px 60px -34px rgba(9,27,66,.6)}
.ab-story-photo img{width:100%;height:100%;object-fit:cover}
.ab-float-label{position:absolute;right:-.6rem;top:1.6rem;padding:.7rem 1.2rem;font:700 .74rem/1 var(--ab-font);letter-spacing:.2em;text-transform:uppercase;color:var(--ab-navy);background:var(--ab-gold-grad);border-radius:8px;box-shadow:0 14px 24px -12px rgba(185,132,23,.8)}
.ab-timeline-v{position:relative;display:grid;gap:1.4rem;margin:0;padding-left:0}
.ab-timeline-v::before{content:"";position:absolute;left:25px;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--ab-gold),rgba(214,163,46,.1));transform-origin:top;transform:scaleY(var(--ab-p,1))}
.ab-timeline-v li{position:relative;display:flex;gap:1.1rem;align-items:flex-start}
.ab-tv-ico{position:relative;display:grid;place-items:center;flex:none;width:52px;height:52px;color:var(--ab-gold);background:#fff;border:1.5px solid var(--ab-gold);border-radius:50%}
.ab-tv-ico .ico{width:1.4rem;height:1.4rem}
.ab-timeline-v h3{margin:.15rem 0 .25rem;font-size:0.95rem;font-weight:700;color:var(--ab-navy)}
.ab-timeline-v p{margin:0;font-size:.95rem}

/* ---- 4. mission, vision & values: follows the supplied design (1672 x 941). --u is one pixel of that design at the current screen width.
   The background carries the world dots, shield and gold lines; the three cards are live (their own pictures + text). ---- */
.pp{--u:clamp(.34px,calc(100vw / 1672),1px);position:relative;overflow:hidden;background:#F8F9FC url(../img/about/purpose-bg.webp) center/100% 100% no-repeat}
@media (min-width:1673px){.pp{background-size:cover}}
.pp-stage{position:relative;width:calc(1672 * var(--u));height:calc(770 * var(--u));margin:0 auto}   /* a compact version of the design: 941 -> 770 */
.pp-head{position:absolute;left:calc(105 * var(--u));top:calc(46 * var(--u))}
.pp-eyebrow{display:flex;align-items:center;gap:calc(19 * var(--u));margin:0}
.pp-eline{width:calc(46 * var(--u));height:max(2px,calc(3 * var(--u)));background:#D6A32E}
.pp-chip{padding:calc(6 * var(--u)) calc(60 * var(--u)) calc(6 * var(--u)) calc(13 * var(--u));font:800 calc(12.8 * var(--u))/calc(14 * var(--u)) var(--ab-font);letter-spacing:.34em;text-transform:uppercase;color:#091B42;background:linear-gradient(90deg,#EDC768,rgba(240,205,120,.55) 70%,rgba(240,205,120,0))}
.pp-title{margin:calc(2 * var(--u)) 0 0 calc(3 * var(--u));font:800 calc(57 * var(--u))/calc(72 * var(--u)) var(--ab-font);letter-spacing:-.05em;white-space:nowrap}
.pp-navy{color:#091B42}
.pp-gold,.pp-card h3 .pp-gold{background:linear-gradient(95deg,#D9A62C,#EDBE47 55%,#CD9B22);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.pp-card{position:absolute;background:var(--pp-fix,linear-gradient(transparent,transparent)) padding-box,var(--pp-img) padding-box 50% var(--pp-y,100%)/cover no-repeat,linear-gradient(135deg,#F0CB73,#E6C27A 50%,#D6A32E) border-box;border:max(1px,calc(1.5 * var(--u))) solid transparent;transition:translate .35s var(--ease),box-shadow .35s}
.pp-card::before{content:"";position:absolute;left:0;top:calc(-2 * var(--u));width:var(--acc,18%);height:max(2px,calc(3 * var(--u)));background:linear-gradient(90deg,#D6A32E,rgba(214,163,46,0));border-radius:3px}
.pp-card::after{content:"";position:absolute;inset:calc(-3 * var(--u));padding:max(1.5px,calc(2.5 * var(--u)));border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);background:conic-gradient(from var(--ring,0deg),transparent 0 55%,#D6A32E 78%,#F0CB73 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pp-card:hover{translate:0 -6px}
.pp-card:hover::after{opacity:1;animation:ringSpin 4s linear infinite}
.pp-card h3{position:absolute;margin:0;font:800 calc(33 * var(--u))/calc(38 * var(--u)) var(--ab-font);letter-spacing:-.03em;color:#091B42}
.pp-card p{position:absolute;margin:0;font-family:var(--ab-font)}
.pp-icon{position:absolute;display:grid;place-items:center;color:#D6A32E;border-radius:50%;transition:transform .7s var(--ease-out),box-shadow .4s}
.pp-icon .ico{width:44%;height:44%;stroke-width:1.5}
.pp-card:hover .pp-icon{transform:rotate(-10deg) scale(1.07)}

/* 01 mission (dark) */
.pp-mission{--pp-img:url(../img/about/purpose-mission.jpg);--pp-fix:radial-gradient(ellipse 22% 20% at 88% 11%,rgba(8,24,60,.9),rgba(8,24,60,0));--acc:29%;--pp-y:22%;left:calc(77 * var(--u));top:calc(184 * var(--u));width:calc(812 * var(--u));height:calc(546 * var(--u));border-radius:calc(26 * var(--u));box-shadow:0 calc(34 * var(--u)) calc(60 * var(--u)) calc(-26 * var(--u)) rgba(9,27,66,.55)}
.pp-mission h3{left:calc(43 * var(--u));top:calc(224 * var(--u));font-size:calc(45 * var(--u));line-height:calc(52 * var(--u));color:#fff;letter-spacing:-.035em}
.pp-mission p{left:calc(43 * var(--u));top:calc(288 * var(--u));width:calc(478 * var(--u));font-size:calc(18.4 * var(--u));font-weight:500;line-height:calc(28 * var(--u));color:#E8EDF7;letter-spacing:-.003em}
.pp-mission .pp-icon{left:calc(38 * var(--u));top:calc(110 * var(--u));width:calc(84 * var(--u));height:calc(84 * var(--u));background:radial-gradient(circle,#10285A,#0A1C45) padding-box,conic-gradient(from 210deg,#F0CB73,rgba(214,163,46,.25) 55%,#D6A32E) border-box;border:max(1.5px,calc(2 * var(--u))) solid transparent;box-shadow:0 0 calc(30 * var(--u)) rgba(214,163,46,.18)}
.pp-bar{position:absolute;left:calc(43 * var(--u));top:calc(210 * var(--u));width:calc(60 * var(--u));height:max(2px,calc(3 * var(--u)));background:linear-gradient(90deg,#D6A32E,#F0CB73)}

/* 02 vision, 03 values (light) */
.pp-vision,.pp-values{--acc:18%;--pp-fix:radial-gradient(ellipse 24% 36% at 91% 16%,#fff,rgba(255,255,255,0));left:calc(913 * var(--u));width:calc(682 * var(--u));border-radius:calc(22 * var(--u));box-shadow:0 calc(26 * var(--u)) calc(46 * var(--u)) calc(-30 * var(--u)) rgba(120,100,50,.4)}
.pp-vision{--pp-img:url(../img/about/purpose-vision.jpg);top:calc(189 * var(--u));height:calc(240 * var(--u))}
.pp-values{--pp-img:url(../img/about/purpose-values.jpg);top:calc(446 * var(--u));height:calc(284 * var(--u))}
.pp-vision .pp-icon,.pp-values .pp-icon{left:calc(34 * var(--u));top:calc(28 * var(--u));width:calc(66 * var(--u));height:calc(66 * var(--u));background:#fff;border:max(1.5px,calc(1.8 * var(--u))) solid #D6A32E;box-shadow:0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-10 * var(--u)) rgba(184,146,31,.5)}
.pp-vision h3{left:calc(34 * var(--u));top:calc(106 * var(--u))}
.pp-vision p{left:calc(34 * var(--u));top:calc(152 * var(--u));width:calc(540 * var(--u));font-size:calc(15.3 * var(--u));font-weight:500;line-height:calc(25 * var(--u));color:#6B7388;letter-spacing:-.003em}
.pp-values h3{left:calc(34 * var(--u));top:calc(106 * var(--u))}
.pp-chips{position:absolute;left:calc(34 * var(--u));top:calc(160 * var(--u));display:flex;flex-wrap:wrap;gap:calc(10 * var(--u));width:calc(620 * var(--u));margin:0;padding:0}
.pp-chips li{display:flex;align-items:center;height:calc(40 * var(--u));padding:0 calc(18 * var(--u));font:700 calc(13.6 * var(--u))/1 var(--ab-font);color:#091B42;background:linear-gradient(#fff,#FCFAF5);border:max(1px,calc(1.3 * var(--u))) solid #EBD9AA;border-radius:99px;box-shadow:0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-10 * var(--u)) rgba(184,146,31,.45);transition:transform .3s var(--ease),border-color .3s,background .3s}
.pp-chips li:hover{transform:translateY(-3px);border-color:#D6A32E;background:#FBF1D9}
/* ---- 6. why choose ---- */
.ab-why{background:#fff}
.ab-why-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
.ab-why-media{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:520px;overflow:hidden;border-radius:200px 24px 24px 24px;background:linear-gradient(165deg,#0B2554,#061633)}
.ab-why-media::before{content:"";position:absolute;left:-10%;top:12%;width:120%;height:1px;background:linear-gradient(90deg,transparent,rgba(214,163,46,.8),transparent);transform:rotate(-24deg)}
.ab-why-disc{position:absolute;left:12%;right:12%;bottom:10%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(214,163,46,.6);background:radial-gradient(circle at 50% 25%,rgba(240,203,115,.25),transparent 70%)}
.ab-why-media img{position:relative;width:min(88%,430px);height:auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.ab-why-list{display:grid;margin:0}
.ab-why-list li{position:relative;display:flex;align-items:center;gap:1.1rem;padding:1.05rem 1rem;border-bottom:1px solid var(--ab-line);border-radius:12px;transition:background .3s,transform .35s var(--ease)}
.ab-why-list li:last-child{border-bottom:0}
.ab-why-list li:hover{background:var(--ab-bg);transform:translateX(8px)}
.ab-no{flex:none;width:2.2rem;font:800 1.15rem/1 var(--ab-font);background:var(--ab-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-why-ico{display:grid;place-items:center;flex:none;width:50px;height:50px;color:var(--ab-gold-hi);background:var(--ab-navy);border-radius:50%;transition:background .3s,color .3s,transform .6s var(--ease-out)}
.ab-why-ico .ico{width:1.35rem;height:1.35rem}
.ab-why-list li:hover .ab-why-ico{background:var(--ab-gold-grad);color:var(--ab-navy);transform:rotate(360deg)}
.ab-why-list h3{margin:0 0 .15rem;font-size:0.92rem;font-weight:700;color:var(--ab-navy)}
.ab-why-list p{margin:0;font-size:.93rem}

/* ---- 7. process: follows the supplied design (1828 x 860). --u is one pixel of that design at the current screen width.
   The picture only carries the buildings, shield and dots; the wave line, nodes, connectors and cards are live and animate on scroll (about.js). ---- */
.pw{--u:clamp(.34px,calc(100vw / 1828),1px);position:relative;overflow:hidden;background:#FBFCFE url(../img/about/approach-bg.webp) center/100% 100% no-repeat}
@media (min-width:1829px){.pw{background-size:cover}}
.pw-stage{position:relative;width:calc(1828 * var(--u));height:calc(860 * var(--u));margin:0 auto}
.pw-head{position:absolute;left:0;right:0;top:calc(12 * var(--u));text-align:center}
.pw-eyebrow{display:flex;align-items:center;justify-content:center;gap:calc(17 * var(--u));margin:0}
.pw-eline{width:calc(55 * var(--u));height:max(1.5px,calc(2.4 * var(--u)));background:linear-gradient(90deg,rgba(214,163,46,.15),#D6A32E)}
.pw-eline:last-child{background:linear-gradient(270deg,rgba(214,163,46,.15),#D6A32E)}
.pw-chip{padding:calc(6 * var(--u)) calc(16 * var(--u));font:800 calc(17 * var(--u))/calc(14 * var(--u)) var(--ab-font);letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;color:#091B42;background:linear-gradient(180deg,#F5CD60,#E9BA40);border-radius:calc(6 * var(--u))}
.pw-title{margin:calc(14 * var(--u)) 0 0;font:800 calc(52.4 * var(--u))/calc(58 * var(--u)) var(--ab-font);letter-spacing:-.012em;color:#091B42}
.pw-title span{display:block}
.pw-gold{font:inherit;background:linear-gradient(95deg,#D9A62C,#EDBE47 55%,#CD9B22);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.08em}
.pw-lead{width:calc(760 * var(--u));max-width:100%;margin:calc(10 * var(--u)) auto 0;font:500 calc(18.4 * var(--u))/calc(25 * var(--u)) var(--ab-font);letter-spacing:0;color:#6B7388}

/* the wave line */
.pw-wave{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pw-dec path{fill:none;stroke:#E9ECF3;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.pw-ring{fill:none;stroke:#D6A32E;stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 9;opacity:.8}
.pw-track{fill:none;stroke:rgba(9,27,66,.07);stroke-width:4;stroke-linecap:round}
.pw-line{fill:none;stroke-width:4.5;stroke-linecap:round}
.pw-line-gold{stroke:url(#pwg-gold)}
.pw-line-navy{stroke:url(#pwg-navy)}
.pw-chev circle{fill:#091B42;filter:drop-shadow(0 4px 6px rgba(9,27,66,.35))}
.pw-chev path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pw-end path{fill:none;stroke:#D6A32E;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.js:not(.no-anim) .pw-chev,.js:not(.no-anim) .pw-end,.js:not(.no-anim) .pw-ring,.js:not(.no-anim) .pw-dec{opacity:0;transition:opacity .6s,transform .6s var(--ease-out)}
.js:not(.no-anim) .pw-chev{transform:scale(.4);transform-box:fill-box;transform-origin:center}
.js:not(.no-anim) .pw-chev.is-lit{opacity:1;transform:none}
.js:not(.no-anim) .pw-end.is-lit,.js:not(.no-anim) .pw-ring.is-lit,.js:not(.no-anim) .pw-dec.is-lit{opacity:1}
.js:not(.no-anim) .pw-ring.is-lit{opacity:.8}

/* steps: card + connector + numbered node, placed from the design's own coordinates (--cx --cy --cw --ch --nx --ny) */
.pw-steps{margin:0;padding:0}
.pw-step{display:contents}
.pw-card{position:absolute;left:calc(var(--cx) * var(--u));top:calc(var(--cy) * var(--u));width:calc(var(--cw) * var(--u));height:calc(var(--ch) * var(--u));display:flex;align-items:flex-start;gap:calc(15 * var(--u));padding:calc(20 * var(--u)) calc(12 * var(--u)) 0 calc(20 * var(--u));background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#F0CB73,#EBDCBC 45%,#D6A32E) border-box;border:max(1px,calc(1.6 * var(--u))) solid transparent;border-radius:calc(22 * var(--u));box-shadow:0 calc(16 * var(--u)) calc(34 * var(--u)) calc(-20 * var(--u)) rgba(120,100,50,.4);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),translate .3s var(--ease),box-shadow .3s}
.pw-card:hover{translate:0 -6px;box-shadow:0 calc(24 * var(--u)) calc(40 * var(--u)) calc(-20 * var(--u)) rgba(184,146,31,.5)}
.pw-ico{flex:none;width:calc(72 * var(--u));height:calc(72 * var(--u));border-radius:50%;transition:transform .8s var(--ease-out)}
.pw-card:hover .pw-ico{transform:rotate(-8deg) scale(1.06)}
.pw-body{min-width:0;padding-top:calc(-2 * var(--u))}
.pw-no{display:block;font:800 calc(25 * var(--u))/calc(29 * var(--u)) var(--ab-font);letter-spacing:.01em;background:linear-gradient(180deg,#E9B93F,#CD9B22);-webkit-background-clip:text;background-clip:text;color:transparent}
.pw-dash{display:block;width:calc(24 * var(--u));height:max(1.5px,calc(2 * var(--u)));margin:calc(5 * var(--u)) 0 calc(7 * var(--u));background:#091B42}
.pw-body h3{margin:0;font:800 calc(19 * var(--u))/calc(23 * var(--u)) var(--ab-font);color:#091B42}
.pw-body p{margin:calc(4 * var(--u)) 0 0;font:500 calc(13.4 * var(--u))/calc(20 * var(--u)) var(--ab-font);letter-spacing:0;color:#6B7388}
.pw-link{position:absolute;left:calc(var(--nx) * var(--u) - 1px);width:2px;background:linear-gradient(var(--dir,180deg),rgba(214,163,46,.15),#D6A32E);transition:transform .6s var(--ease-out)}
.is-up .pw-link{top:calc((var(--cy) + var(--ch)) * var(--u));height:calc((var(--ny) - 46 - var(--cy) - var(--ch)) * var(--u));transform-origin:bottom}
.is-down .pw-link{--dir:0deg;top:calc((var(--ny) + 46) * var(--u));height:calc((var(--cy) - var(--ny) - 46) * var(--u));transform-origin:top}
.pw-node{position:absolute;left:calc((var(--nx) - 46) * var(--u));top:calc((var(--ny) - 46) * var(--u));display:grid;place-items:center;width:calc(92 * var(--u));height:calc(92 * var(--u));border:calc(6 * var(--u)) solid transparent;border-radius:50%;background:radial-gradient(circle at 35% 28%,#17397A,#091B42 72%) padding-box,linear-gradient(135deg,#F9DD8A,#D6A32E 55%,#B98417) border-box;box-shadow:0 0 0 calc(10 * var(--u)) rgba(240,203,115,.22),0 calc(16 * var(--u)) calc(30 * var(--u)) calc(-8 * var(--u)) rgba(185,132,23,.55);transition:transform .7s var(--ease-out),filter .6s,box-shadow .6s}
.pw-node b{font:800 calc(32 * var(--u))/1 var(--ab-font);letter-spacing:.02em;color:#fff}
.pw-node::after{content:"";position:absolute;inset:calc(-6 * var(--u));border-radius:50%;border:2px solid #F0CB73;opacity:0;pointer-events:none}
.pw-step.is-lit .pw-node::after{animation:pwPing 2.8s var(--ease-out) 2}
@keyframes pwPing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

/* animation states (only while GSAP drives the scroll; otherwise everything is simply visible) */
.js:not(.no-anim) .pw-step:not(.is-lit) .pw-node{transform:scale(.82);filter:grayscale(.85) brightness(1.3);box-shadow:none}
.js:not(.no-anim) .pw-step:not(.is-lit) .pw-card{opacity:0}
.js:not(.no-anim) .pw-step.is-up:not(.is-lit) .pw-card{transform:translateY(calc(26 * var(--u)))}
.js:not(.no-anim) .pw-step.is-down:not(.is-lit) .pw-card{transform:translateY(calc(-26 * var(--u)))}
.js:not(.no-anim) .pw-step:not(.is-lit) .pw-link{transform:scaleY(0)}
/* ---- 8. commitment ---- */
.ab-commit{background:#fff}
.ab-commit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2.5rem,6vw,6rem)}
.ab-commit-media{position:relative;margin:0}
.ab-commit-photo{overflow:hidden;aspect-ratio:1/.9;border-radius:220px 24px 220px 24px;box-shadow:0 40px 64px -36px rgba(9,27,66,.65)}
.ab-commit-photo img{width:100%;height:100%;object-fit:cover}
.ab-commit-shield{position:absolute;right:-1.2rem;bottom:-1.4rem;width:clamp(96px,11vw,150px);fill:none;stroke:var(--ab-gold);stroke-width:.6;stroke-linejoin:round;filter:drop-shadow(0 10px 16px rgba(185,132,23,.35));animation:abSway 9s ease-in-out infinite}
@keyframes abSway{50%{transform:rotate(5deg) translateY(-6px)}}
.ab-points{display:grid;gap:.9rem;margin:0}
.ab-points li{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;font-weight:700;color:var(--ab-navy);background:#fff;border:1px solid var(--ab-line);border-radius:12px;box-shadow:0 14px 26px -22px rgba(9,27,66,.5);transition:transform .3s var(--ease),border-color .3s}
.ab-points li:hover{transform:translateY(-4px);border-color:var(--ab-gold)}
.ab-pt-ico{display:grid;place-items:center;flex:none;width:48px;height:48px;color:var(--ab-gold);border:1.5px solid var(--ab-gold);border-radius:50%;transition:transform .6s var(--ease-out)}
.ab-points li:hover .ab-pt-ico{transform:rotate(360deg)}
.ab-pt-ico .ico{width:1.3rem;height:1.3rem}

/* ---- 9. presence: a compact version of the supplied design (1981 px wide). --u is one pixel of that design at the current screen width;
   the background picture is squeezed to the shorter height so the whole map and city panel stay in view. ---- */
.ab-presence{--u:clamp(.5px,calc(100vw / 1981),1px);position:relative;overflow:hidden;min-height:calc(640 * var(--u));background:#FCFDFE url(../img/about/presence-bg.webp) center/100% 100% no-repeat}
@media (min-width:1982px){.ab-presence{background-size:cover}}
.pres-copy{position:relative;padding:calc(62 * var(--u)) 0 calc(40 * var(--u)) calc(100 * var(--u))}
.pres-eyebrow{display:flex;align-items:center;gap:calc(14 * var(--u));margin:0 0 calc(16 * var(--u))}
.pe-line{width:calc(46 * var(--u));height:max(2px,calc(2.5 * var(--u)));background:#D6A32E}
.pe-chip{padding:calc(5 * var(--u)) calc(6 * var(--u));font:800 calc(17.5 * var(--u))/calc(16 * var(--u)) var(--ab-font);letter-spacing:.115em;text-transform:uppercase;color:#091B42;background:linear-gradient(180deg,#F5CD60,#E9BA40)}
.pres-title{margin:0;font:800 calc(57 * var(--u))/calc(63 * var(--u)) var(--ab-font);letter-spacing:.007em;color:#091B42}
.pres-title span{display:block}
.pt-gold{background:linear-gradient(95deg,#D9A62C,#E6B843 50%,#CD9B22);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.1em}
.pres-lead{width:calc(860 * var(--u));max-width:100%;margin:calc(12 * var(--u)) 0 calc(28 * var(--u));font:500 calc(21.5 * var(--u))/calc(30 * var(--u)) var(--ab-font);letter-spacing:.022em;color:#6B7388}
.pres-cards{display:flex;gap:calc(24 * var(--u));margin:0 0 calc(34 * var(--u));padding:0}
.pres-card{position:relative;display:flex;align-items:center;gap:calc(28 * var(--u));height:calc(122 * var(--u));padding:0 calc(23 * var(--u));overflow:hidden;background:linear-gradient(#fff,#FCFBF8);border:max(1px,calc(1.3 * var(--u))) solid #EBE3D3;border-radius:calc(14 * var(--u));box-shadow:0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-14 * var(--u)) rgba(120,100,50,.28);transition:translate .3s var(--ease),border-color .3s,box-shadow .3s}
.pres-card:nth-child(1){width:calc(262 * var(--u))}.pres-card:nth-child(2){width:calc(270 * var(--u));gap:calc(24 * var(--u));padding-left:calc(20 * var(--u))}.pres-card:nth-child(3){width:calc(308 * var(--u));gap:calc(23 * var(--u));padding-left:calc(19 * var(--u))}
.pres-card::before{content:"";position:absolute;left:0;bottom:0;width:calc(56 * var(--u));height:calc(29 * var(--u));background:linear-gradient(135deg,#EDC259,#D6A32E);clip-path:polygon(0 0,18% 55%,100% 100%,0 100%)}
.pres-card:hover{translate:0 -5px;border-color:#E3C468;box-shadow:0 calc(18 * var(--u)) calc(28 * var(--u)) calc(-14 * var(--u)) rgba(184,146,31,.45)}
.pc-ico{flex:none;width:calc(72 * var(--u));height:calc(72 * var(--u));border-radius:50%}
.pc-text{display:block;margin-top:calc(-12 * var(--u));white-space:nowrap}
.pc-text b{display:block;font:800 calc(43 * var(--u))/calc(46 * var(--u)) var(--ab-font);letter-spacing:-.01em;background:linear-gradient(180deg,#E9B93F,#CD9B22);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-cap{position:relative;display:block;margin-top:calc(5 * var(--u));padding-bottom:calc(10 * var(--u));font:700 calc(16.5 * var(--u))/calc(19 * var(--u)) var(--ab-font);letter-spacing:.075em;text-transform:uppercase;color:#091B42}
.pc-cap::after{content:"";position:absolute;left:0;bottom:0;width:calc(55 * var(--u));height:max(2px,calc(2.2 * var(--u)));background:#D6A32E}
.pres-btn{height:calc(58 * var(--u));padding:0 calc(34 * var(--u));gap:calc(18 * var(--u));font:600 calc(16 * var(--u))/1 var(--ab-font);letter-spacing:.05em;color:#fff;background:linear-gradient(180deg,#0E2455,#061633);border:max(1.5px,calc(2.2 * var(--u))) solid #D6A32E;border-radius:calc(9 * var(--u));box-shadow:0 calc(12 * var(--u)) calc(22 * var(--u)) calc(-10 * var(--u)) rgba(9,27,66,.6)}
.pres-btn .ico{width:calc(20 * var(--u));height:calc(20 * var(--u))}
/* ---- presence map: the pins are highlighted with a soft gold glow and ripples (overlay aligned to the background picture; same positions at every size) ---- */
.pres-fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.pres-copy{z-index:2}
.pres-fx{container-type:size}   /* lets the skyline tile be sized in the picture's own units (cqh) so its loop is seamless at every size */
.pres-sky{position:absolute;left:26%;width:41.4%;bottom:0;height:26.23%;background:url(../img/about/skyline-loop.webp) 0 100%/auto 100% repeat-x;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 88%,transparent 100%);animation:skyLoop 26s linear infinite;animation-play-state:paused}
.pres-fx.is-live .pres-sky{animation-play-state:running}
@keyframes skyLoop{to{background-position:-78.18cqh 100%}}   /* one tile = 78.18% of the picture height (the 620 x 208 seamless image shown 26.23cqh tall) */
@media (prefers-reduced-motion:reduce){.pres-sky{animation:none}}
.pf-pin{position:absolute;width:0;height:0}
.pf-pin::before,.pf-pin::after{content:"";position:absolute;left:calc(-37 * var(--u));top:calc(-15 * var(--u));width:calc(74 * var(--u));height:calc(30 * var(--u));border:max(1.5px,calc(2.4 * var(--u))) solid rgba(232,176,48,.9);border-radius:50%;opacity:0}
.pf-halo{position:absolute;left:calc(-58 * var(--u));top:calc(-87 * var(--u));width:calc(116 * var(--u));height:calc(116 * var(--u));border-radius:50%;background:radial-gradient(circle,rgba(255,218,120,.95) 0%,rgba(244,186,60,.5) 36%,rgba(244,186,60,0) 70%);opacity:0;transform:scale(.6)}
.pres-fx.is-live .pf-pin::before{animation:pfRipple 2.8s var(--ease-out) var(--d,0s) infinite}
.pres-fx.is-live .pf-pin::after{animation:pfRipple 2.8s var(--ease-out) calc(var(--d,0s) + 1.4s) infinite}
.pres-fx.is-live .pf-halo{animation:pfHalo 2.8s ease-in-out var(--d,0s) infinite}
@keyframes pfRipple{0%{opacity:.95;transform:scale(.3)}70%{opacity:0}100%{opacity:0;transform:scale(2.1)}}
@keyframes pfHalo{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.12)}}
@media (max-width:1100px){
  /* stacked layout: the picture is a header strip anchored right; the overlay uses the same strip size */
  .ab-presence{--strip:clamp(190px,42vw,340px)}
  .ab-presence::before{height:var(--strip)}
  .pres-fx{inset:auto;top:0;right:0;height:var(--strip);width:auto;aspect-ratio:1981/793}
  .pres-fx{--k:calc(var(--strip) / 793)}   /* one design pixel on the strip */
  .pf-pin::before,.pf-pin::after{left:calc(-37 * var(--k));top:calc(-15 * var(--k));width:calc(74 * var(--k));height:calc(30 * var(--k));border-width:1.5px}
  .pf-halo{left:calc(-58 * var(--k));top:calc(-87 * var(--k));width:calc(116 * var(--k));height:calc(116 * var(--k))}
}
@media (min-width:1982px){.pres-fx{inset:auto;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:1981/793;height:auto}}
@media (prefers-reduced-motion:reduce){.pf-pin::before,.pf-pin::after{display:none}.pf-halo{animation:none!important;opacity:.7;transform:none}}
/* ---- 10. closing CTA over the building photograph ---- */
.ab-cta{background:linear-gradient(rgba(6,22,51,.9),rgba(6,22,51,.93)),url(../img/about/about-bg.jpg) 30% 50%/cover}
.ab-cta h2{font-family:var(--ab-font);font-weight:800}
.ab-cta .btn-gold{background:var(--ab-gold-grad)}

/* ---- responsive ---- */
@media (max-width:1100px){
  /* mission / vision / values: one column of cards */
  .pp{--u:1px;padding:2rem 0 2.4rem;background:#F8F9FC url(../img/about/purpose-bg.webp) right top/900px auto no-repeat}
  .pp-stage{width:calc(100% - 2rem);max-width:720px;height:auto;display:grid;gap:.8rem}
  .pp-head{position:static;margin-bottom:.6rem}
  .pp-eyebrow{gap:.7rem}
  .pp-eline{width:2.4rem}
  .pp-chip{padding:.4rem 2.4rem .4rem .7rem;font-size:.7rem}
  .pp-title{margin:.4rem 0 0;font-size:clamp(1.32rem,6.8vw,2.12rem);line-height:1.1;letter-spacing:-.035em;white-space:normal}
  .pp-card{position:relative;left:auto;top:auto;width:auto;height:auto;padding:1.1rem 1.1rem 1.2rem;border-radius:18px}
  .pp-card h3,.pp-card p,.pp-icon,.pp-bar,.pp-chips{position:static}
  .pp-icon{width:48px;height:48px;margin-bottom:.7rem}
  .pp-card h3{margin:0 0 .4rem;font-size:clamp(1.06rem,5.2vw,1.44rem);line-height:1.15}
  .pp-card p{font-size:.9rem;line-height:1.6}
  .pp-mission{min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;padding-top:6.5rem;background:linear-gradient(180deg,rgba(7,22,55,.1),rgba(7,22,55,.82) 55%,rgba(7,22,55,.92)) padding-box,var(--pp-img) padding-box 70% center/cover no-repeat,linear-gradient(135deg,#F0CB73,#E6C27A 50%,#D6A32E) border-box}
  .pp-mission h3{font-size:clamp(1.27rem,6.2vw,1.78rem)}
  .pp-mission p{width:auto;font-size:.92rem}
  .pp-mission .pp-icon{position:absolute;left:1.1rem;top:1.1rem;margin:0}
  .pp-bar{display:block;width:46px;margin:0 0 .65rem}
  .pp-vision,.pp-values{padding-top:1.1rem;background:#fff padding-box,linear-gradient(135deg,#F0CB73,#E6C27A 50%,#D6A32E) border-box}
  .pp-vision p{width:auto;font-size:.9rem}
  .pp-chips{display:flex;flex-wrap:wrap;gap:.4rem;width:auto;margin-top:.7rem}
  .pp-chips li{height:34px;padding:0 .8rem;font-size:.78rem}
}@media (max-width:1100px){
  .ab-why-grid{grid-template-columns:1fr}
  .ab-why-media{min-height:440px;max-width:560px;margin-inline:auto;width:100%}
}
@media (max-width:1100px){
  /* stacked: the picture (map + city panel) becomes a header, then the content on white */
  .ab-presence{--u:clamp(.62px,calc(100vw / 1100),1px);min-height:0;background:#FCFDFE}
  .ab-presence::before{content:"";display:block;height:clamp(190px,42vw,340px);background:url(../img/about/presence-bg.webp) right top/auto 100% no-repeat}
  .pres-copy{padding:1.4rem 1.25rem 2.2rem}
  .pres-eyebrow{gap:.7rem;margin-bottom:1rem}
  .pe-line{width:2.2rem;height:2px}
  .pe-chip{padding:.35rem .6rem;font-size:.74rem;letter-spacing:.14em}
  .pres-title{font-size:clamp(1.19rem,5.4vw,1.78rem);line-height:1.15}
  .pres-lead{width:auto;margin:.7rem 0 1.1rem;font-size:clamp(.85rem,2.3vw,.98rem);line-height:1.6;letter-spacing:0}
  .pres-cards{flex-direction:column;gap:.6rem;margin-bottom:1.2rem}
  .pres-card,.pres-card:nth-child(n){width:100%;height:auto;min-height:72px;gap:.9rem;padding:.6rem .9rem;border-radius:12px}
  .pc-ico{width:50px;height:50px}
  .pc-text{margin-top:0}
  .pc-text b{font-size:clamp(1.5rem,5.6vw,1.9rem);line-height:1.05}
  .pc-cap{margin-top:.15rem;padding-bottom:.4rem;font-size:.7rem;letter-spacing:.09em}
  .pc-cap::after{width:38px}
  .pres-btn{height:46px;padding:0 1.3rem;font-size:.7rem;gap:.7rem;border-radius:8px}
  .pres-btn .ico{width:1.1rem;height:1.1rem}
}@media (max-width:980px){
  /* process: the wave becomes a plain vertical timeline */
  .pw{--u:1px;background:#FBFCFE url(../img/about/approach-bg.webp) center bottom/100% auto no-repeat;padding:3rem 0 2.6rem}
  .pw-stage{width:calc(100% - 2rem);max-width:640px;height:auto}
  .pw-head{position:static}
  .pw-eyebrow{gap:.7rem}
  .pw-eline{width:clamp(26px,8vw,60px)}
  .pw-chip{padding:.4rem .8rem;font-size:.72rem;line-height:1}
  .pw-title{margin-top:.9rem;font-size:clamp(1.32rem,6.2vw,1.95rem);line-height:1.15}
  .pw-title span{display:inline}
  .pw-lead{width:auto;margin-top:.8rem;font-size:clamp(.88rem,2.4vw,1rem);line-height:1.6}
  .br-d{display:none}
  .pw-wave{display:none}
  .pw-steps{position:relative;display:grid;gap:1.1rem;margin-top:2rem}
  .pw-steps::before,.pw-steps::after{content:"";position:absolute;left:27px;top:30px;bottom:30px;width:3px;border-radius:3px;background:rgba(9,27,66,.12)}
  .pw-steps::after{background:linear-gradient(var(--ab-gold),#B98417);transform-origin:top;transform:scaleY(var(--pw-p,1))}
  .pw-step{position:relative;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:.9rem}
  .pw-node{position:relative;left:auto;top:auto;flex:none;width:58px;height:58px;border-width:4px;z-index:1;box-shadow:0 0 0 5px rgba(240,203,115,.22),0 10px 18px -6px rgba(185,132,23,.5)}
  .pw-node b{font-size:1.05rem}
  .pw-link{display:none}
  .pw-card{position:relative;left:auto;top:auto;flex:1;width:auto;height:auto;gap:.9rem;padding:1rem 1rem 1.05rem;border-radius:16px}
  .pw-ico{width:56px;height:56px}
  .pw-no{font-size:1.2rem;line-height:1.1}
  .pw-dash{width:20px;margin:.3rem 0 .4rem}
  .pw-body h3{font-size:0.89rem;line-height:1.25}
  .pw-body p{margin-top:.3rem;font-size:.86rem;line-height:1.5}
  .js:not(.no-anim) .pw-step.is-up:not(.is-lit) .pw-card,.js:not(.no-anim) .pw-step.is-down:not(.is-lit) .pw-card{transform:translateY(18px)}
}
@media (max-width:420px){
  .pw-card{flex-direction:column;gap:.6rem}
}@media (max-width:900px){
  .ab-hero-grid{grid-template-columns:1fr;gap:0}
  .ab-hero-copy{padding-block:2.6rem 1rem}
  .ab-hero-visual{width:min(300px,76%)}
  .ab-hero-line,.ab-hero-shape{display:none}
  .ab-story-grid,.ab-commit-grid{grid-template-columns:1fr}
  .ab-story-media{max-width:560px;margin-inline:auto;width:100%}
  .ab-commit-media{max-width:520px;margin-inline:auto;width:100%}
  /* (process timeline: see the 980px block below) */
}
@media (max-width:600px){
  .ab-wrap{width:calc(100% - 2rem)}
  .ab-why-list li{flex-wrap:wrap;gap:.8rem}
  .ab-float-label{right:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .pw-step.is-lit .pw-node::after{animation:none}
  .ab-hero-bg img{animation:none}
  .ab-hero-line{animation:none;transform:rotate(16deg)}
  .ab-commit-shield{animation:none}
  .js [data-ab]{opacity:1!important}
  .js [data-clip]{clip-path:none!important}
}


/* presence: soft white fade over the hard cut under the map tip so the picture blends into the page */
@media (min-width:1101px){.ab-presence::after{content:"";position:absolute;z-index:1;left:56%;width:36%;top:79%;bottom:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 70%,transparent);background:linear-gradient(180deg,rgba(252,253,254,0) 0,rgba(252,253,254,.92) 45%,#FCFDFE 70%)}}

/* ===== "Who We Are" (redesigned, About page only): photo collage on the left, copy and four tiles on the right ===== */
.wwa{position:relative;isolation:isolate;overflow:hidden;padding:clamp(3.5rem,6vw,5.5rem) 0;background:#fff;font-family:'Manrope',system-ui,sans-serif;color:var(--text)}
.wwa-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 60% at 0% 0%,rgba(212,175,55,.12),transparent 70%),radial-gradient(45% 60% at 100% 100%,rgba(6,70,168,.07),transparent 70%),linear-gradient(120deg,#FFFDF8,#fff 50%,#F6F8FC)}
.wwa-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(2.5rem,6vw,6rem);width:min(1280px,100% - 3rem);margin-inline:auto}
.wwa-visual{position:relative;padding:0 0 3.5rem 2rem}
.wwa-ring{position:absolute;left:-1.5rem;top:-2rem;width:70%;aspect-ratio:1;border:2px dashed rgba(212,175,55,.6);border-radius:50%;animation:wwaSpin 70s linear infinite}
@keyframes wwaSpin{to{rotate:360deg}}
.wwa-main{position:relative;margin:0;aspect-ratio:5/4;border-radius:26px 120px 26px 26px;background:var(--navy);box-shadow:0 44px 70px -40px rgba(7,26,61,.8)}
.wwa-main::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(0deg,rgba(7,26,61,.45),transparent 45%);pointer-events:none}
.wwa-pic{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.wwa-pic img{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.wwa-small{position:absolute;right:-1.2rem;bottom:0;width:38%;aspect-ratio:1;margin:0;overflow:hidden;background:var(--navy);border-radius:50%;box-shadow:0 0 0 6px #fff,0 0 0 8px var(--gold),0 30px 50px -22px rgba(7,26,61,.8)}
.wwa-small img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.wwa-years{position:absolute;left:0;bottom:1.2rem;display:flex;align-items:center;gap:.4rem;padding:.9rem 1.2rem;background:linear-gradient(135deg,#0A1F4B,#061432);border:2px solid var(--gold);border-radius:16px;box-shadow:0 26px 40px -20px rgba(2,9,28,.85);animation:wwaFloat 6s ease-in-out infinite}
@keyframes wwaFloat{50%{translate:0 -8px}}
.wwa-years .ab-laurel{position:static;display:block;width:34px;height:54px;flex:none;color:var(--gold);fill:var(--gold);stroke:none;opacity:1}
.wwa-years p{display:grid;justify-items:center;margin:0;line-height:1.1;color:#fff;text-align:center}
.wwa-years b{font:800 2.4rem/1 var(--sans);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wwa-years p>span{margin-top:.25rem;font:700 .66rem/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.wwa-logo{position:absolute;left:2.2rem;top:1.2rem;width:clamp(110px,12vw,150px);filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.wwa-label{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 .9rem;font:700 .74rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.wwa-label::before{content:"";width:2.4rem;height:2px;background:var(--gold-grad)}
.wwa-title{margin:0 0 1.1rem;font-size:clamp(1.62rem,3.5vw,2.55rem);font-weight:800;line-height:1.1;letter-spacing:-.035em;color:var(--navy)}
.wwa-title span{display:block;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.wwa-lead{margin:0 0 .9rem;font-size:1.05rem;line-height:1.75;color:#3B4965}
.wwa-text{margin:0 0 1.6rem;line-height:1.75;color:var(--muted)}
.wwa-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-bottom:1.8rem}
.wwa-points li{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;box-shadow:0 20px 36px -30px rgba(7,26,61,.55);transition:transform .45s var(--ease),box-shadow .45s}
.wwa-points li:hover{transform:translateY(-4px);box-shadow:0 30px 46px -30px rgba(7,26,61,.6)}
.wwa-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--gold-hi);background:var(--navy);border-radius:50%;box-shadow:0 0 0 3px rgba(212,175,55,.4)}
.wwa-ico .ico{width:1.25rem;height:1.25rem}
.wwa-points h3{margin:0 0 .2rem;font-size:0.81rem;font-weight:800;line-height:1.25}
.wwa-points p{margin:0;font-size:.82rem;line-height:1.45;color:var(--muted)}
.wwa-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.wwa-link{font:700 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.wwa-link span{padding-bottom:.45rem;background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 2px no-repeat;transition:background-size .5s var(--ease-out),color .3s}
.wwa-link:hover span{color:var(--royal);background-size:40% 2px}
.js:not(.no-anim) [data-wwa-mask]{clip-path:inset(0 100% 0 0)}
.js:not(.no-anim) [data-wwa-mask].is-revealed{clip-path:none}
.js:not(.no-anim) [data-wwa-pop]{opacity:0}
@media (max-width:1000px){.wwa-wrap{grid-template-columns:1fr}.wwa-visual{max-width:620px;padding-left:1rem}}
@media (max-width:600px){.wwa-wrap{width:calc(100% - 2rem)}.wwa-points{grid-template-columns:1fr}.wwa-visual{padding:0 0 3rem 0}.wwa-small{right:0;width:42%}.wwa-years{padding:.6rem .8rem}.wwa-years b{font-size:1.9rem}.wwa-logo{left:1rem}.wwa-actions .btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.wwa-ring,.wwa-years{animation:none}}