:root{
  --bg-a:#f7edec;--bg-b:#fbfaf8;--ink:#141414;--ink-soft:#2b2b2b;--muted:#7c7779;
  --coral:#ec6e4e;--coral-soft:#f29c7d;--square-grey:#e3e3e3;
  --line:rgba(20,20,20,.14);--ring:rgba(20,20,20,.055);--nav:#1c1c1c;
  --font-display:"Poppins",system-ui,sans-serif;--font-body:"Jost",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--ink);min-height:100vh;
  background:radial-gradient(120% 120% at 100% 0%, var(--bg-b) 0%, transparent 55%),linear-gradient(135deg, var(--bg-b) 0%, #faf4f3 45%, var(--bg-a) 100%);
  overflow-x:hidden;}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* PRELOADER */.preloader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--coral);transition:opacity .6s var(--ease),visibility .6s var(--ease)}
.preloader.hide{opacity:0;visibility:hidden}
.spinner{width:52px;height:52px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* SHELL / NAV */.wrap{max-width:1480px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.nav{display:flex;align-items:center;gap:24px;padding:26px 0 8px;position:relative;z-index:20;opacity:0;transform:translateY(-14px)}
.is-loaded .nav{animation:fadeDown .7s var(--ease) .15s both}
.brand{display:flex;align-items:center;height:46px}
.brand-logo{height:44px;width:auto;object-fit:contain}
.brand-fallback{display:none;align-items:center;height:44px;padding:0 20px;border:1.5px dashed var(--line);border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:#a2a0a1;letter-spacing:.02em}
.menu{display:flex;align-items:center;gap:26px;margin-left:26px}
.menu a{position:relative;font-size:.95rem;font-weight:500;color:#e8e8e8;display:inline-flex;align-items:center;gap:5px;padding:6px 0}
.menu a .caret{width:9px;height:9px;opacity:.7;transition:transform .3s var(--ease)}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--coral);transition:width .3s var(--ease)}
.menu a:hover{color:#fff}
.menu a:hover::after{width:100%}
.menu a:hover .caret{transform:rotate(180deg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.socials{display:flex;align-items:center;gap:16px}
.socials a{color:#8a8a8a;transition:color .25s var(--ease),transform .25s var(--ease)}
.socials a:hover{color:var(--coral);transform:translateY(-2px)}
.socials svg{width:16px;height:16px}
.search{display:flex;align-items:center;gap:9px;color:#6f6f6f;font-size:.92rem}
.search svg{width:17px;height:17px}
.grid-btn{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.grid-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid-btn svg{width:18px;height:18px}
.burger{display:none}
/* HERO */.hero{position:relative;padding:8px 0 40px;min-height:calc(100vh - 120px);display:flex;align-items:center}
.bg-rings{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ring{position:absolute;border:1px solid var(--ring);border-radius:50%}
.ring.big{width:1180px;height:1180px;left:-360px;top:50%;transform:translateY(-50%)}
.ring.mid{width:230px;height:230px;left:-70px;top:26px;border-color:rgba(20,20,20,.08);transform:none}
.is-loaded .ring.mid{animation:ringInPlain 1.1s var(--ease) .25s both}
.is-loaded .ring.big{animation:ringInBig 1.1s var(--ease) .25s both}
.hero-inner{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(340px,1fr) 1.35fr;gap:clamp(24px,4vw,60px);align-items:center}
.figure{position:relative;justify-self:center;width:min(460px,42vw);aspect-ratio:1}
.figure .circle{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 30px 80px -30px rgba(60,20,10,.25);opacity:0;transform:scale(.86);clip-path:circle(50% at 50% 50%);background:linear-gradient(150deg,#f7b79f 0%,var(--coral) 55%,#d8543a 100%);font-size:0}
.is-loaded .figure .circle{animation:photoIn 1s var(--ease) .3s both}
.figure .circle img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.02)}
.figure .arc{position:absolute;width:118%;height:118%;left:-9%;top:-9%;border-radius:50%;border:1px solid var(--line);opacity:0;transform:none}
.is-loaded .figure .arc{animation:ringIn 1.1s var(--ease) .45s both}
.content{position:relative;max-width:720px}
.quote{font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.7;color:var(--muted);max-width:430px;margin-bottom:clamp(14px,2.2vw,26px);opacity:0;transform:translateY(16px)}
.is-loaded .quote{animation:fadeUp .8s var(--ease) .5s both}
.title{font-family:var(--font-display);font-weight:800;color:var(--ink);line-height:.92;letter-spacing:-.02em;font-size:clamp(3.4rem,9.2vw,8.4rem)}
.title .row{display:block;white-space:nowrap}
.title .row.solution{margin-top:.02em;padding-left:.28em}
.char{display:inline-block;opacity:0;white-space:pre}
.is-loaded .h-creative .char{animation:charIn .66s var(--ease) both;animation-delay:calc(.72s + var(--i) *.045s)}
.is-loaded .h-solution .char{animation:charIn .66s var(--ease) both;animation-delay:calc(1.28s + var(--i) *.045s)}
.h-solution{color:transparent;-webkit-text-stroke:2px var(--ink);text-stroke:2px var(--ink)}
.squares{position:absolute;right:-2%;top:26%;z-index:-1;pointer-events:none}
.sq{position:absolute;opacity:0}
.sq.coral{width:64px;height:64px;background:var(--coral-soft);left:-8px;top:0}
.sq.grey{width:78px;height:78px;background:var(--square-grey);left:44px;top:52px}
.is-loaded .sq.coral{animation:sqIn .7s var(--ease) 1.6s both,float 6s ease-in-out 2.4s infinite}
.is-loaded .sq.grey{animation:sqIn .7s var(--ease) 1.72s both,float 7s ease-in-out 2.6s infinite reverse}
.tagline{display:flex;align-items:center;gap:26px;margin-top:clamp(26px,4vw,48px)}
.arrow{width:64px;height:64px;flex:none;color:var(--ink);opacity:0;transform:translateY(18px) rotate(-8deg)}
.is-loaded .arrow{animation:arrowIn .8s var(--ease) 1.85s both}
.arrow:hover{color:var(--coral);transform:translate(4px,-4px)}
.arrow svg{width:100%;height:100%}
.sub{opacity:0;transform:translateY(14px)}
.is-loaded .sub{animation:fadeUp .8s var(--ease) 1.95s both}
.sub p{font-size:clamp(1.02rem,1.4vw,1.3rem);font-weight:500;color:var(--ink);line-height:1.35}
.sub .underline{height:1.5px;background:var(--ink);margin-top:12px;width:220px;max-width:70%;transform-origin:left;transform:scaleX(0)}
.is-loaded .sub .underline{animation:wipe .7s var(--ease) 2.15s both}

/* KEYFRAMES */
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}
to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:none}}
@keyframes charIn{from{opacity:0;transform:translateY(.4em);filter:blur(6px)}
to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes photoIn{from{opacity:0;transform:scale(.86)}
to{opacity:1;transform:scale(1)}}
@keyframes ringIn{from{opacity:0;transform:scale(.9)}
to{opacity:1;transform:scale(1)}}
@keyframes ringInPlain{from{opacity:0;transform:scale(.9)}
to{opacity:1;transform:scale(1)}}
@keyframes ringInBig{from{opacity:0;transform:scale(.9) translateY(-50%)}
to{opacity:1;transform:scale(1) translateY(-50%)}}
@keyframes sqIn{from{opacity:0;transform:translateY(20px) scale(.6)}
to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}}
@keyframes arrowIn{from{opacity:0;transform:translateY(18px) rotate(-8deg)}
to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes wipe{to{transform:scaleX(1)}}
/* CELEBRATION BAND */.band{position:relative;width:100%;padding:0;display:flex;justify-content:center}
.band-dot{position:absolute;top:clamp(8px,2.4vw,30px);left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--ink);z-index:3;opacity:0;transition:opacity .6s var(--ease) .1s}
.band-dot.in-view{opacity:1}
.band-media{position:relative;width:100%;height:clamp(320px,46vw,760px);border-radius:0;overflow:hidden;background:url('../images/work-1.jpg') center/cover no-repeat fixed;font-size:0}
.band-media img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;transform:scale(1.18);transition:transform 1.4s var(--ease),clip-path 1.2s var(--ease);clip-path:inset(8% 0 8% 0 round 34px)}
.band-media.reveal.in-view img{transform:scale(1);clip-path:inset(0 0 0 0 round 34px)}
/* SHARED REVEAL UTILITIES */.rise{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rise.in-view{opacity:1;transform:none}
.reveal-words .word,.reveal-chars .char2{display:inline-block;white-space:pre;opacity:0}
.reveal-words.in-view .word{animation:charIn .7s var(--ease) both;animation-delay:calc(var(--i) *.06s)}
.reveal-chars.in-view .char2{animation:charIn .6s var(--ease) both;animation-delay:calc(var(--i) *.04s)}
.media-fallback{background:linear-gradient(135deg,#f2937a,var(--coral) 60%,#d8543a);font-size:0}
.img-reveal{overflow:hidden}
.img-reveal img{width:100%;height:100%;object-fit:cover;display:block;clip-path:inset(0 100% 0 0);transform:scale(1.3);transition:clip-path .55s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.img-reveal.in-view img{clip-path:inset(0 0 0 0);transform:scale(1)}
.section-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--ink);z-index:3;opacity:0;transition:opacity .6s var(--ease)}
.section-dot.in-view{opacity:1}
/* WE BRIDGE THE GAP (STATS) */.bridge{padding:clamp(60px,9vw,140px) 0 clamp(40px,6vw,90px)}
.bridge-top{position:relative;margin-bottom:clamp(40px,6vw,80px)}
.bridge-title{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:clamp(2rem,4.6vw,4.3rem);line-height:1.08;letter-spacing:-.01em;max-width:16ch}
.deco-squares{position:absolute;top:-6px;right:0;width:150px;height:150px}
.dsq{position:absolute;border-radius:2px}
.dsq.coral{width:92px;height:92px;background:var(--coral-soft);left:0;top:0}
.dsq.black{width:92px;height:92px;background:var(--ink);left:58px;top:58px}
.bridge-grid{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:clamp(28px,4vw,64px);align-items:start}
.bridge-photo{border-radius:6px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 70px -40px rgba(40,20,10,.35)}
.bridge-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bridge-copy{color:var(--muted);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.85;margin-bottom:clamp(28px,4vw,48px)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.stat{border:1px solid #e7e7e7;border-radius:8px;padding:26px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff}
.stat-label{font-size:.98rem;color:var(--ink);line-height:1.35;display:flex;align-items:flex-start;gap:9px}
.bull{width:8px;height:8px;border-radius:50%;background:var(--ink);margin-top:6px;flex:none}
.stat-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,3.6vw,3.4rem);color:var(--ink);white-space:nowrap}
/* EXCLUSIVE SERVICES */.services{position:relative;padding:clamp(60px,9vw,130px) 0 clamp(50px,7vw,110px)}
.services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(40px,5vw,70px)}
.eyebrow{display:inline-block;border:1px solid #d8d8d8;border-radius:8px;padding:8px 16px;font-size:.92rem;color:#6f6b6c;margin-bottom:22px}
.services-title{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.02em;max-width:14ch}
.more-services{flex:none;width:170px;height:170px;border-radius:50%;border:1px solid #d3d3d3;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;color:var(--ink);font-size:1.05rem;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.more-services svg{width:26px;height:26px;transition:transform .35s var(--ease)}
.more-services:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.more-services:hover svg{transform:translate(3px,-3px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.scard{background:#fff;border:1px solid #ececec;border-radius:10px;padding:clamp(26px,2.6vw,40px);transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity .8s var(--ease)}
.scard.in-view:hover{transform:translateY(-8px);box-shadow:0 40px 80px -50px rgba(30,20,15,.4)}
.scard h3{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--ink);margin-bottom:16px}
.scard>p{color:var(--muted);font-size:1rem;line-height:1.7;max-width:26ch}
.letter-wrap{position:relative;display:grid;place-items:center;height:210px;margin:6px 0 10px}
.arc-dash{position:absolute;inset:auto 0 10px;width:100%;height:150px}
.letter{position:relative;font-family:var(--font-display);font-weight:800;font-size:clamp(120px,13vw,180px);line-height:.78;background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.feat{list-style:none;display:grid;gap:16px;margin-top:6px}
.feat li{position:relative;padding-left:30px;font-size:1.05rem;color:var(--ink)}
.feat li::before{content:"+";position:absolute;left:0;top:-1px;font-weight:600;color:var(--ink)}
/* OUR WORK */.portfolio{padding:clamp(30px,5vw,70px) 0 clamp(70px,10vw,150px);overflow-x:hidden}
.port-title{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:clamp(2.2rem,12.7vw,13.5rem);line-height:.95;letter-spacing:-.03em;text-align:center;white-space:nowrap;margin-bottom:clamp(30px,4vw,60px)}
.port-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.pcard{position:relative;border-radius:8px;overflow:hidden;grid-column:span 3;aspect-ratio:16/10;display:block;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.pcard.big{grid-column:span 4;aspect-ratio:16/9}
.pcard.view-all{grid-column:span 2}
.pcard.img-reveal.in-view:hover img{transform:scale(1.06)}
.pcap{position:absolute;left:20px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:3px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pcap b{font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.pcap i{font-style:normal;font-size:.9rem;opacity:.85}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%);opacity:0;transition:opacity .4s var(--ease);z-index:1}
.pcard:hover .pcap{opacity:1;transform:none}
.pcard:hover::after{opacity:1}
.pcircle{position:absolute;top:50%;left:50%;z-index:3;width:120px;height:120px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;text-align:center;font-size:.95rem;font-weight:500;line-height:1.25;transform:translate(calc(-50% + var(--cx,0px)),calc(-50% + var(--cy,0px))) scale(var(--s,.5));opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .25s var(--ease)}
.pcard:hover .pcircle{opacity:1;--s:1}
.pcard.view-all{background:transparent;display:grid;place-items:center}
.va-inner{border:1px solid #d3d3d3;border-radius:50%;width:min(78%,190px);height:min(78%,190px);display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;color:var(--ink);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.va-inner svg{width:24px;height:24px;transition:transform .35s var(--ease)}
.pcard.view-all:hover .va-inner{background:var(--ink);color:#fff;border-color:var(--ink)}
.pcard.view-all:hover .va-inner svg{transform:translate(3px,-3px)}
/* OUR CREATIVE TEAM (dark) */.team{position:relative;background:#0d0d0d;color:#fff;overflow:hidden;padding:clamp(70px,9vw,130px) 0 0}
.team-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:110px 110px;mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 90%)}
.team-glow{position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);width:90%;height:62%;background:radial-gradient(ellipse at center,rgba(220,110,60,.42),rgba(220,110,60,.14) 40%,transparent 68%)}
.team .wrap{position:relative;z-index:2}
.team-head{text-align:center;margin-bottom:clamp(40px,5vw,70px)}
.pill-dark{display:inline-block;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:9px 18px;font-size:.95rem;color:#fff;margin-bottom:26px}
.team-title{font-family:var(--font-body);font-weight:400;font-size:clamp(2.2rem,5.2vw,4.6rem);letter-spacing:-.01em;color:#fff}
.team-cards{display:grid;grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto;gap:26px}
.tcard{position:relative;background:#161616;border:1px solid rgba(255,255,255,.08);border-top-left-radius:14px;border-top-right-radius:14px;padding:34px 34px 0;min-height:420px;overflow:hidden;transition:transform .4s var(--ease),opacity .8s var(--ease)}
.tcard.in-view:hover{transform:translateY(-6px)}
.role{color:#9a9a9a;font-size:1rem}
.tcard h3{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:#fff;margin-top:8px}
.swoosh{position:absolute;left:0;bottom:0;width:100%;height:70%;background:radial-gradient(120% 100% at 15% 100%,rgba(255,255,255,.06),transparent 60%)}
.tphoto{position:absolute;left:0;right:0;bottom:0;height:66%;display:flex;align-items:flex-end;justify-content:center}
.tc-li{position:relative;z-index:3;display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 14px;border:1px solid rgba(255,255,255,.26);border-radius:999px;color:#fff;text-decoration:none;font-size:.86rem;font-weight:500;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tc-li svg{width:15px;height:15px;flex:none}
.tc-li:hover,.tc-li:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
.tphoto img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* AWARDS */.awards{position:relative;padding:clamp(60px,8vw,120px) 0 clamp(70px,9vw,140px)}
.awards-top{position:relative;margin-bottom:clamp(50px,6vw,90px)}
.awards-title{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:clamp(1.9rem,4vw,3.8rem);line-height:1.12;max-width:15ch}
.awards-top .deco-squares{position:absolute;top:0;right:0;width:150px;height:150px}
.awards-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:end;min-height:420px}
.awards-line{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.award{position:relative;z-index:1}
.a1{align-self:end}
.a2{align-self:center;margin-bottom:40px}
.a3{align-self:start}
.acircle{position:relative;width:clamp(140px,15vw,210px);height:clamp(140px,15vw,210px);border-radius:50%;border:1px solid #e2e2e2;display:grid;place-items:center;background:#fff;margin-bottom:26px}
.acircle.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.anum{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-weight:600;font-size:.95rem;color:inherit}
.acircle:not(.dark) .anum{color:#333}
.abadge{font-family:var(--font-display);font-weight:800;line-height:.9;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.b-best{color:#fff;font-size:2rem}
.b-best small{font-weight:500;font-size:.6rem;line-height:1.1;margin-top:4px}
.b-press{color:#222;font-size:.85rem}
.b-press b{font-size:.7rem;letter-spacing:.15em;color:#888}
.b-press i{font-style:normal;font-weight:800;font-size:1.05rem}
.b-press small{font-weight:500;font-size:.6rem;color:#999}
.b-fwa{color:#111;font-size:1.4rem;letter-spacing:.05em}
.b-fwa small{font-size:.7rem}
.ameta{position:relative}
.ychip{display:inline-block;border:1px solid #dcdcdc;border-radius:20px;padding:5px 14px;font-size:.85rem;color:#555;margin-bottom:12px}
.ameta h4{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,1.7vw,1.7rem);color:var(--ink);line-height:1.15}
.uline{display:block;height:1px;background:#111;width:78%;margin-top:16px}
.ameta p{color:var(--muted);font-size:1rem;line-height:1.7;margin-top:14px;max-width:26ch}
/* WORD OF MOUTH */.testimonials{position:relative;padding-top:clamp(20px,3vw,40px)}
.people-band{position:relative;width:100%;height:clamp(360px,42vw,620px);overflow:hidden}
.tst-title{position:absolute;left:0;right:0;bottom:-2px;z-index:2;text-align:center;font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(2.4rem,12.4vw,12.5rem);line-height:.8;letter-spacing:-.03em;white-space:nowrap;pointer-events:none}
.testimonials .wrap{position:relative}
.squares-tst{position:absolute;top:0;right:clamp(20px,4vw,56px);width:150px;height:150px;z-index:4}
.tst-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:clamp(-60px,-4vw,-40px);padding-bottom:clamp(60px,8vw,120px)}
.tst-left{padding-top:clamp(60px,8vw,120px);display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.tst-dots{display:flex;align-items:center;gap:16px}
.tdot{background:none;border:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:#c7c2c1;transition:color .3s var(--ease)}
.tdot.active{color:var(--ink)}
.tdot-track{flex:1;max-width:120px;height:2px;background:#e0dcdb;position:relative;border-radius:2px}
.tdot-fill{position:absolute;inset:0 auto 0 0;width:40%;background:var(--coral);border-radius:2px;transition:width .4s var(--ease)}
.faq-btn{align-self:flex-start;border:1px solid #d8d8d8;border-radius:8px;padding:12px 22px;color:var(--ink);font-size:1rem;transition:background .3s var(--ease),color .3s var(--ease)}
.faq-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.tst-card-wrap{position:relative;justify-self:end;width:min(560px,100%)}
.tst-card{position:relative;background:#fff;border-radius:4px;padding:clamp(30px,3vw,48px);box-shadow:0 30px 70px -50px rgba(0,0,0,.5)}
.tst-card::before,.tst-card::after{content:"";position:absolute;inset:0;background:#fff;border-radius:4px;z-index:-1;box-shadow:0 20px 50px -40px rgba(0,0,0,.4)}
.tst-card::before{transform:translate(10px,10px) rotate(0);opacity:.7}
.tst-card::after{transform:translate(20px,20px);opacity:.4}
.tquote{color:var(--coral);font-family:Georgia,serif;font-size:5rem;line-height:.6;display:block;height:44px}
.tst-text{color:var(--ink);font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.55;margin:10px 0 22px}
.tst-stars{color:var(--coral);font-size:1.2rem;letter-spacing:2px}
.tst-stars span.tst-metric{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:clamp(.92rem,1.15vw,1.08rem);color:var(--coral);letter-spacing:.01em;line-height:1.4;margin-left:0}
.tst-stars span{color:#888;font-size:.95rem;margin-left:8px;letter-spacing:0}
.tst-author{position:relative;background:var(--ink);color:#fff;display:flex;align-items:center;gap:16px;padding:18px 24px;margin:14px 24px 0;border-radius:2px}
.tst-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;font-size:0}
.tst-avatar img{width:100%;height:100%;object-fit:cover}
.tst-who i{display:block;font-style:normal;color:#b7b7b7;font-size:.9rem}
.tst-who b{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
/* FAQ */.faq{padding:clamp(60px,8vw,120px) 0}
.faq-head{position:relative;margin-bottom:clamp(30px,4vw,54px)}
.faq-title{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.05;margin-top:20px}
.faq-list{border:1px solid #ececec;border-radius:6px;overflow:hidden;background:#fff}
.faq-item{border-bottom:1px solid #ececec}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(24px,3vw,40px) clamp(20px,3vw,44px);text-align:left}
.faq-n{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,4vw,3.6rem);color:#eaeaea;line-height:1;flex:none;min-width:1.6em}
.faq-txt{flex:1;font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,1.8vw,1.7rem);color:var(--ink)}
.faq-ic{position:relative;width:26px;height:26px;flex:none}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--ink);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.faq-ic::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%)}
.faq-ic::after{top:0;left:50%;height:100%;width:2px;transform:translateX(-50%)}
.faq-item.open .faq-ic::after{opacity:0;transform:translateX(-50%) rotate(90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{color:var(--muted);font-size:clamp(1rem,1.2vw,1.2rem);line-height:1.9;padding:0 clamp(20px,3vw,44px) clamp(26px,3vw,40px)}
.faq-item.open .faq-a{max-height:440px}
/* BLOG */.blog{padding:clamp(50px,7vw,110px) 0}
.blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(36px,4vw,60px)}
.blog-title{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:clamp(2rem,4.4vw,4rem);line-height:1.03;max-width:16ch}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.bpost{display:flex;flex-direction:column}
.bimg{border-radius:6px;overflow:hidden;aspect-ratio:16/11;margin-bottom:22px}
.bmeta{color:var(--muted);font-size:.95rem;margin-bottom:12px}
.bpost h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,1.8vw,1.7rem);color:var(--ink);line-height:1.25;margin-bottom:20px}
.read-more{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;transition:color .3s var(--ease)}
.read-more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.read-more:hover{color:var(--ink)}
.read-more:hover svg{transform:translate(3px,-3px)}
/* TRUSTED CLIENTS */.clients{position:relative;padding:clamp(50px,7vw,110px) 0 clamp(70px,9vw,140px)}
.clients-head{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;margin-bottom:clamp(30px,4vw,50px)}
.clients-title{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:clamp(2.2rem,5vw,4.4rem);line-height:1}
.clients-copy{color:var(--muted);font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.85;max-width:40ch;justify-self:end}
.clients-body{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(30px,4vw,60px);border-top:1px solid #e6e6e6;padding-top:clamp(30px,4vw,50px)}
.clients-left{display:flex;flex-direction:column;gap:40px}
.avatars{display:flex;align-items:center}
.av{width:66px;height:66px;border-radius:50%;overflow:hidden;border:3px solid #f6eeee;margin-left:-18px;font-size:0}
.av:first-child{margin-left:0}
.av img{width:100%;height:100%;object-fit:cover}
.av-plus{width:66px;height:66px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:1.8rem;margin-left:-18px}
.clients-count{display:flex;align-items:flex-end;gap:6px}
.ccount{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,7vw,7rem);color:#e6e2e2;line-height:.85}
.clients-count b{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--ink);margin-bottom:14px}
.clients-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dcdcdc}
.clogo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:clamp(150px,15vw,210px);border:1px solid #dcdcdc;margin:-.5px;color:#8a8a8a;font-family:var(--font-display);text-align:center;transition:background .3s var(--ease)}
.clogo:hover{background:#faf7f7}
.clogo b{font-weight:700;font-size:1.9rem;line-height:.95;letter-spacing:.02em}
.clogo i{font-style:normal;font-size:.55rem;letter-spacing:.25em;margin-top:2px}
.ci-ds{display:block;width:34px;height:34px;border:2px solid #9a9a9a;border-radius:50%;margin-bottom:8px;background:conic-gradient(#9a9a9a 0 50%,transparent 0)}
.ci-violet{letter-spacing:.15em;border:2px solid #9a9a9a;padding:6px 12px}
.ci-kd{font-size:1.1rem;letter-spacing:.15em;border:1px solid #9a9a9a;padding:14px 18px}
.ci-bistro{font-size:1.5rem;letter-spacing:.08em}
.clients-dot{width:12px;height:12px;border-radius:50%;background:var(--ink);margin:clamp(30px,4vw,50px) auto 0}
/* CONTACT / LET'S MARQUEE CTA */.cta{position:relative;background:#0b0b0b;overflow:hidden;padding:clamp(200px,21vw,330px) 0 clamp(70px,10vw,150px);display:flex;align-items:center;justify-content:center}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:90px 90px}
.cta .section-dot{top:auto;bottom:26px}
.marquee{position:relative;width:100%;overflow:hidden;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 26s linear infinite;font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,9vw,9rem);line-height:1}
.m-item{display:inline-flex;align-items:center;gap:.35em;padding-right:.35em}
.m-out{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85);text-stroke:1.5px rgba(255,255,255,.85)}
.m-fill{color:var(--coral-soft)}
.m-arrow{width:.7em;height:.7em;color:#fff;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}
.cta-badge{position:absolute;top:clamp(58px,6.8vw,110px);left:50%;transform:translateX(-50%);z-index:3;width:clamp(120px,15vw,200px);height:clamp(120px,15vw,200px);border-radius:50%;background:rgba(16,16,16,.92);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;box-shadow:0 20px 60px rgba(0,0,0,.55);transition:transform .4s var(--ease)}
.cta-badge:hover{transform:translateX(-50%) scale(1.06)}
.cta-logo{height:44px;width:auto;object-fit:contain}
.cta-mark{width:48px;height:48px}
/* FOOTER */.footer{position:relative;background:#0b0b0b;color:#fff;overflow:hidden;padding:clamp(60px,8vw,110px) 0 40px}
.footer .wrap{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(30px,4vw,60px)}
.f-intro p{color:#b5b5b5;line-height:1.85;max-width:34ch;margin-bottom:40px}
.f-news{position:relative;max-width:360px}
.f-news input{width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.25);padding:12px 40px 12px 0;color:#fff;font-size:1.05rem;font-family:var(--font-body)}
.f-news input::placeholder{color:#8a8a8a}
.f-news input:focus{outline:none;border-bottom-color:var(--coral)}
.f-news button{position:absolute;right:0;top:8px;background:none;border:none;color:#fff;cursor:pointer;transition:transform .3s var(--ease),color .3s var(--ease)}
.f-news button svg{width:24px;height:24px}
.f-news button:hover{color:var(--coral);transform:translate(3px,-3px)}
.f-col h4{font-family:var(--font-display);font-weight:700;font-size:1.6rem;margin-bottom:30px}
.f-col ul{list-style:none;display:grid;gap:18px}
.f-col a{color:#b5b5b5;transition:color .3s var(--ease)}
.f-col a:hover{color:#fff}
.f-off .off-role{color:#9a9a9a;font-size:.95rem;margin-top:22px}
.f-off .off-role:first-of-type{margin-top:0}
.f-off .off-city{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-top:6px;line-height:1.4}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:clamp(40px,5vw,70px);padding-top:26px;display:flex;justify-content:space-between;color:#8a8a8a;font-size:.9rem;flex-wrap:wrap;gap:10px}
/* ======= SHARED STICKY SITE HEADER ======= */.site-header{position:sticky;top:0;left:0;right:0;z-index:60;width:100%;background:#0b0b0b;transition:box-shadow .35s var(--ease),background .35s var(--ease)}
.site-header .nav{display:flex;align-items:center;gap:24px;padding:14px 0;opacity:0;transform:translateY(-14px)}
.is-loaded .site-header .nav{animation:fadeDown .7s var(--ease) .15s both}
.site-header.scrolled{box-shadow:0 12px 34px -20px rgba(0,0,0,.75);background:rgba(11,11,11,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-header .menu a.active{color:#fff}
.site-header .menu a.active::after{width:100%}
.nav-dark .menu a{color:#e8e8e8}
.nav-dark .menu a:hover{color:#fff}
.nav-dark .brand-fallback{color:#e8e8e8;border-color:rgba(255,255,255,.32)}
.nav-dark .search{color:#cfcfcf}
.nav-dark .socials a{color:#c2c2c2}
.nav-dark .socials a:hover{color:var(--coral)}
.nav-dark .grid-btn{border-color:rgba(255,255,255,.3);color:#fff}
.nav-dark .grid-btn:hover{background:#fff;color:#111;border-color:#fff}
.nav-dark .burger{border-color:rgba(255,255,255,.3);color:#fff}

/* RESPONSIVE */
@media (max-width:1080px){.menu,.search{display:none}
.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%}
.burger svg{width:20px;height:20px}
}
@media (max-width:860px){.figure{width:min(300px,72vw)}
.hero{display:block;min-height:auto;padding:16px 0 64px;text-align:center}
.hero-inner{grid-template-columns:1fr;text-align:center;gap:34px}
.content{max-width:100%;margin-inline:auto}
.quote{margin-inline:auto}
.title .row{white-space:normal}
.title .row.solution{padding-left:0}
.tagline{justify-content:center}
.squares{display:none}
.socials{display:none}
.band-media{border-radius:0;height:clamp(240px,58vw,420px);background-attachment:scroll}
.band-media img{clip-path:inset(6% 0 6% 0 round 22px)}
.band-media.reveal.in-view img{clip-path:inset(0 0 0 0 round 22px)}
.bridge-grid{grid-template-columns:1fr;gap:30px}
.bridge-photo{aspect-ratio:16/11;max-height:360px}
.bridge-photo img{object-fit:contain;background:#fdfcf7}
.stats{grid-template-columns:1fr}
.services-head{flex-direction:column;align-items:flex-start}
.cards{grid-template-columns:1fr}
.port-grid{grid-template-columns:1fr}
.pcard,.pcard.big,.pcard.view-all{grid-column:span 1}
.pcard.view-all{aspect-ratio:16/9}
.team-cards{grid-template-columns:1fr}
.tcard{min-height:380px}
.awards-row{grid-template-columns:1fr;gap:60px;min-height:0}
.a1,.a2,.a3{align-self:start;margin-bottom:0}
.awards-line{display:none}
.tst-body{grid-template-columns:1fr;gap:24px;margin-top:20px}
.tst-left{padding-top:0;order:2}
.tst-card-wrap{justify-self:stretch;width:100%;order:1}
.tst-title{font-size:clamp(2.2rem,13vw,6rem)}
.faq-q{gap:16px;padding:20px 18px}
.blog-head{flex-direction:column;align-items:flex-start}
.blog-grid{grid-template-columns:1fr;gap:36px}
.clients-head{grid-template-columns:1fr;gap:18px}
.clients-copy{justify-self:start}
.clients-body{grid-template-columns:1fr;gap:36px}
.clients-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr;gap:40px 30px}
.f-intro{grid-column:1 / -1}
}

/* Accessibility: honour reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
.char,.quote,.nav,.figure .circle,.figure .arc,.ring,.sq,.arrow,.sub,.sub .underline{opacity:1!important;transform:none!important;filter:none!important}
.band-media img{transform:none!important;clip-path:inset(0 0 0 0 round 34px)!important}
.band-dot{opacity:1!important}
.rise,.section-dot,.word,.char2,.pcard.rise{opacity:1!important;transform:none!important;filter:none!important}
.img-reveal img{clip-path:inset(0 0 0 0)!important;transform:none!important}
.awards-line{opacity:1!important}
.faq-item.open .faq-a{max-height:600px!important}
.sub .underline{transform:scaleX(1)!important}
}
/* awards dashed line fades in when row enters view */.awards-line{opacity:0;transition:opacity 1s var(--ease) .35s}
.awards-row.in-view .awards-line{opacity:1}
/* Brand lockup: white chip keeps the navy/yellow logo legible on dark bars */.site-header .brand{background:#fff;border-radius:12px;padding:6px 14px;height:auto;transition:transform .3s var(--ease)}
.site-header .brand:hover{transform:translateY(-1px)}
.brand-logo{height:46px;width:auto;object-fit:contain}
.cta-badge{background:#fff;border-color:rgba(0,0,0,.08)}
.cta-logo{height:auto;width:62%;object-fit:contain}
@media (max-width:560px){.site-header.brand{padding:5px 10px}
.brand-logo{height:38px} }
/* ===== PERFORMANCE PASS =====================================
   1. content-visibility lets the browser skip layout/paint for
      off-screen sections entirely — the single biggest scroll win.
   2. backdrop-filter on a sticky element repaints the whole area
      every frame, so the scrolled header uses a solid colour.
   3. The marquee gets one promoted layer instead of a mask that
      forces a repaint of the masked region each frame.
   ========================================================== */.section,.services,.portfolio,.team,.awards,.testimonials,.faq,.blog,.clients,.bridge,.who,.wamexi,.services-list,.gallery,.team2,.stories,.blog2,.videoband{
  content-visibility:auto;
  contain-intrinsic-size:auto 720px;
}
.site-header.scrolled{background:#0b0b0b;backdrop-filter:none;-webkit-backdrop-filter:none}
.marquee{-webkit-mask-image:none;mask-image:none}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#0b0b0b,rgba(11,11,11,0))}
.marquee::after{right:0;background:linear-gradient(270deg,#0b0b0b,rgba(11,11,11,0))}
.marquee-track,.tagmq-track{transform:translateZ(0);backface-visibility:hidden}
/* Remove decorative section dots site-wide */.section-dot,.band-dot,.clients-dot,.wamexi-dot{display:none!important}
/* Pause continuous animations while they're off-screen.
   Stroked marquee text is very expensive to repaint each frame. */.anim-paused,.anim-paused *{animation-play-state:paused!important}
.band,.cta,.footer,.videoband,.tagmq{content-visibility:auto;contain-intrinsic-size:auto 600px}
.cta{contain-intrinsic-size:auto 520px}
.footer{contain-intrinsic-size:auto 560px}
/* ===== Services dropdown ===== */.has-drop{position:relative}
.drop{position:absolute;top:calc(100% + 14px);left:-18px;min-width:264px;background:#fff;border:1px solid #ececec;border-radius:14px;padding:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s var(--ease);z-index:80}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.drop a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:9px;color:var(--ink);font-size:.98rem;transition:background .22s var(--ease),color .22s var(--ease)}
.drop a::after{content:"\2192";opacity:0;transform:translateX(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.drop a:hover{background:var(--ink);color:#fff}
.drop a:hover::after{opacity:1;transform:none}
.menu .has-drop>a::after{display:none}
/* mobile drawer sub-list */.mm-sub{display:grid;gap:4px;margin:4px 0 10px}
.mm-sub a{font-size:1.05rem!important;color:#b9b9b9!important;font-family:var(--font-body)!important;font-weight:400!important;padding:6px 0!important}
.mm-sub a:hover{color:#fff!important}

/* ===== Dynamic cursor (desktop only) ===== */
@media (hover:hover) and (pointer:fine){.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cur-dot{width:7px;height:7px;background:#fff;transform:translate(-50%,-50%)}
.cur-ring{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.75);transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease)}
.cur-ring.is-hot{width:66px;height:66px;border-color:var(--coral)}
.cur-ring.is-hidden,.cur-dot.is-hidden{opacity:0}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button,body.has-cursor input,body.has-cursor select,body.has-cursor textarea{cursor:none}
}
/* Contain wide decorative elements (giant nowrap headlines, marquees) */.cta,.testimonials,.portfolio,.band,.tagmq,.marquee,.people-band{overflow:hidden}
html,body{overflow-x:hidden;max-width:100%}
/* ============ FIXES ============ */
/* 1. Dropdown text was inheriting the dark-nav light colour on a white card */.site-header .menu .drop a,.nav-dark .menu .drop a{color:var(--ink)!important}
.site-header .menu .drop a:hover,.nav-dark .menu .drop a:hover{color:#fff!important;background:var(--ink)}
.drop a::after{color:inherit}
/* 2. content-visibility stopped IntersectionObserver firing, which stopped
      lazy images loading, which stopped reveals. Removed entirely. */.section,.services,.portfolio,.team,.awards,.testimonials,.faq,.blog,.clients,.bridge,.who,.wamexi,.services-list,.gallery,.team2,.stories,.blog2,.videoband,.band,.cta,.footer,.tagmq,img{content-visibility:visible!important;contain-intrinsic-size:auto!important}
/* 3. Images fade in smoothly once decoded */.img-reveal img,.tm-photo img,.pf-media img,.post-media img{background:#efeae9}

/* 4. Smoother cursor */
@media (hover:hover) and (pointer:fine){.cur-dot{transition:opacity .2s var(--ease)}
.cur-ring{transition:width .28s var(--ease),height .28s var(--ease),border-color .28s var(--ease),opacity .2s var(--ease)}
}
/* ---- FIX: dropdown links must beat.nav-dark .menu a (0,2,1) ---- */.site-header .drop a,.site-header .drop a:visited{color:var(--ink)!important;background:transparent}
.site-header .drop a:hover{background:var(--ink);color:#fff!important}
.site-header .drop{background:#fff}
.site-header .mm-sub a{color:#c8c8c8!important}
.site-header .mm-sub a:hover{color:#fff!important}
.mobile-menu .mm-sub a{color:#c8c8c8!important}
.mobile-menu .mm-sub a:hover{color:#fff!important}
/* ---- FIX: never let content-visibility hide images ---- */
img{content-visibility:visible!important}
/* ---- Paartivi letters filled with imagery ---- */.wamexi-word{
  background-image:url('../images/fill-word.jpg')!important;
  background-size:cover!important;background-position:center!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  /* Outline each letter: the photo fill has light areas that dissolve into the
     peach band behind it, so the glyph edges need defining. Coral is the brand
     accent and sits in the same hue family as the band. */
  -webkit-text-stroke:clamp(1.5px,.32vw,5px) var(--coral)!important;
  paint-order:stroke fill;
}
/* Service card letters (B/U/D) keep imagery too */.letter{background-blend-mode:normal}
/* ---- Broken-image safety net ---- */
img.img-failed{opacity:0}
.media-fallback.is-failed{background:linear-gradient(135deg,#16247a,#3a56c8 45%,#ec6e4e)}
/* ===== HEADLINE SYSTEM — one style everywhere =====
   All display headings use Poppins 700/800 with tight tracking. */
h1,h2,h3,h4,.page-h1,.section-title,.bridge-title,.services-title,.awards-title,.team-title,.faq-title,.blog-title,.clients-title,.who-title,.team2-title,.stories-title,.blog2-title,.port-title,.tst-title,.wamexi-word,.feat-post h2,.svc-main h3,.pf-body h3,.post-card h3,.b2title,.tm-name,.step h4,.f-col h4,.story-quote{
  font-family:var(--font-display)!important;
  font-weight:700!important;
  letter-spacing:-.02em;
}
.page-h1,.port-title,.tst-title,.wamexi-word,.marquee-track{font-weight:800!important}
.section-title,.bridge-title,.services-title,.awards-title,.team-title,.faq-title,.blog-title,.clients-title,.who-title,.team2-title,.stories-title,.blog2-title{
  line-height:1.04;
}
.story-quote{font-weight:600!important;letter-spacing:-.01em}
/* ---- Big band headline must always fit its line ---- */.tst-title{
  font-size:clamp(1.9rem,9.4vw,9.6rem)!important;
  letter-spacing:-.035em;
  padding:0 clamp(12px,3vw,40px);
}
@media (max-width:860px){.tst-title{font-size:clamp(1.6rem,10vw,4.4rem)!important} }
/* ---- Certification badges in the trust row ---- */.b-cert{display:grid;place-items:center;width:74%;height:74%}
.cert-img{max-width:100%;max-height:100%;object-fit:contain}
.b-cert small{font-weight:600;font-size:.72rem;line-height:1.25;color:#9a9a9a;text-align:center}
.acircle.dark .b-cert small{color:#cfcfcf}
.b-cert{display:grid;place-items:center;gap:6px;text-align:center;width:78%;height:78%}
.b-cert b{font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.2;color:#8d8d8d}
.b-cert small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#b3b3b3}
.acircle.dark .b-cert b{color:#f0f0f0}
.acircle.dark .b-cert small{color:#9d9d9d}
.b-cert img{max-width:100%;max-height:100%;object-fit:contain}
/* ===== Certifications grid ===== */.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.cert-card{background:#fff;border:1px solid #ececec;border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity .7s var(--ease)}
.cert-card.in-view:hover{transform:translateY(-6px);box-shadow:0 40px 80px -55px rgba(30,20,15,.45)}
.cert-shot{display:block;background:#f6f4f3;border-bottom:1px solid #f0eeed;aspect-ratio:16/11;overflow:hidden}
.cert-shot img{width:100%;height:100%;object-fit:cover;object-position:center}
.cert-offline{display:grid;place-items:center;gap:6px;text-align:center}
.cert-offline b{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--ink)}
.cert-offline small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cert-meta{padding:22px 24px 26px}
.cert-issuer{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.cert-meta h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--ink);margin:8px 0 8px;line-height:1.25}
.cert-meta p{color:var(--muted);font-size:.9rem;line-height:1.6}
@media (max-width:1080px){.cert-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:660px){.cert-grid{grid-template-columns:1fr} }
.certs .section-head{align-items:flex-start;gap:clamp(20px,3vw,48px)}
.certs .section-title{margin-bottom:6px}
/* certificate inside the trust circles */.acircle .b-cert{width:82%;height:82%;display:grid;place-items:center}
.acircle .b-cert img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:6px;background:#fff;padding:4px}
.acircle.dark .b-cert img{background:#fff}
/* Academy 09 (no certificate image) card */.cert-offline{background:linear-gradient(135deg,#12184a,#2b3a9c 60%,#ec6e4e);color:#fff}
.cert-offline b{color:#fff;font-size:1.35rem;letter-spacing:-.01em}
.cert-offline small{color:rgba(255,255,255,.75);letter-spacing:.18em}
/* ===== TYPE SYSTEM =====
   Plus Jakarta Sans for headings (refined, professional),
   Inter for body. Weights kept at 500-600 so nothing shouts. */
:root{
  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
}
body{font-family:var(--font-body);font-size:16px;letter-spacing:-.005em}
h1,h2,h3,h4,.page-h1,.section-title,.bridge-title,.services-title,.awards-title,.team-title,.faq-title,.blog-title,.clients-title,.who-title,.team2-title,.stories-title,.blog2-title,.port-title,.tst-title,.wamexi-word,.feat-post h2,.svc-main h3,.pf-body h3,.post-card h3,.b2title,.tm-name,.step h4,.f-col h4,.story-quote,.cert-meta h3,.scard h3,.ameta h4,.faq-txt,.tcard h3{
  font-family:var(--font-display)!important;
  font-weight:600!important;
  letter-spacing:-.022em;
}
/* Calmer heading scale */.page-h1{font-size:clamp(2.1rem,5.6vw,4.4rem)!important;line-height:1.04;font-weight:600!important}
.section-title,.bridge-title,.services-title,.awards-title,.team-title,.faq-title,.blog-title,.clients-title,.who-title,.team2-title,.stories-title,.blog2-title{
  font-size:clamp(1.65rem,3.1vw,2.9rem)!important;line-height:1.12;font-weight:600!important;
}
.title{font-size:clamp(2.6rem,7vw,6.2rem)!important;font-weight:700!important;letter-spacing:-.03em}
.port-title{font-size:clamp(1.8rem,9vw,8.6rem)!important;font-weight:700!important}
.tst-title{font-size:clamp(1.6rem,7.6vw,7.6rem)!important;font-weight:700!important}
.wamexi-word{font-size:clamp(3.4rem,16vw,15rem)!important;font-weight:700!important}
.marquee-track{font-size:clamp(2.4rem,7vw,7rem)!important;font-weight:700!important}
.tagmq-item .tg{font-size:clamp(1.4rem,3.4vw,3rem)!important;font-weight:600!important}
.scard h3,.svc-main h3{font-size:clamp(1.2rem,1.6vw,1.45rem)!important}
.pf-body h3,.post-card h3,.b2title{font-size:clamp(1.12rem,1.4vw,1.35rem)!important}
.tm-name,.tcard h3{font-size:clamp(1.15rem,1.5vw,1.4rem)!important}
.f-col h4{font-size:1.05rem!important;letter-spacing:.01em}
.stat-num{font-size:clamp(1.6rem,2.4vw,2.3rem)!important;font-weight:700!important}
.step-n{font-size:clamp(1.8rem,2.8vw,2.4rem)!important;font-weight:700!important}
.faq-n{font-size:clamp(1.5rem,2.4vw,2.1rem)!important;font-weight:600!important}
.faq-txt{font-size:clamp(1rem,1.25vw,1.15rem)!important}
.story-quote{font-size:clamp(1rem,1.15vw,1.12rem)!important;font-weight:500!important;line-height:1.6}
.ccount{font-size:clamp(2.6rem,4.4vw,4.2rem)!important;font-weight:700!important}
.page-lead,.section-sub,.bridge-copy,.who-copy,.clients-copy{font-size:clamp(.98rem,1.05vw,1.08rem)!important;line-height:1.8}
.menu a{font-size:.92rem;letter-spacing:.002em}
.eyebrow{font-size:.85rem;letter-spacing:.01em}
.to-top{position:fixed;right:22px;bottom:22px;z-index:50;width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid #e6e6e6;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 16px 38px -18px rgba(0,0,0,.38);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s var(--ease),visibility .35s var(--ease),transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.to-top svg{width:20px;height:20px}
@media (max-width:860px){.to-top{right:14px;bottom:14px;width:46px;height:46px} }
.section-title,.bridge-title,.services-title,.awards-title,.team-title,.faq-title,.blog-title,.clients-title,.who-title,.team2-title,.stories-title,.blog2-title{
  font-size:clamp(1.55rem,2.6vw,2.35rem)!important;letter-spacing:-.018em;
}
.page-h1{font-size:clamp(2rem,4.8vw,3.6rem)!important}
.title{font-size:clamp(2.4rem,6vw,5.2rem)!important}
/* ===== FINAL TYPE SIZING ===== */.section-title,.bridge-title,.services-title,.awards-title,.team-title,.faq-title,.blog-title,.clients-title,.who-title,.team2-title,.stories-title,.blog2-title{
  font-size:clamp(1.9rem,3.5vw,3.15rem)!important;line-height:1.08;letter-spacing:-.022em;
}
.page-h1{font-size:clamp(2.3rem,5.4vw,4.2rem)!important}
/* Full-bleed band words */.tst-title{font-size:clamp(1.9rem,10.4vw,11rem)!important;letter-spacing:-.035em;padding:0 clamp(10px,2vw,26px)}
.port-title{font-size:clamp(1.9rem,10.6vw,10.6rem)!important;letter-spacing:-.035em}
.wamexi-word{font-size:clamp(3.1rem,16.8vw,16.4rem)!important;letter-spacing:.018em;white-space:nowrap}
.wamexi .wrap{overflow:visible}
@media (max-width:860px){.tst-title{font-size:clamp(1.5rem,11vw,4.6rem)!important}
.port-title{font-size:clamp(1.6rem,11vw,4.6rem)!important}
.wamexi-word{font-size:clamp(2.6rem,20vw,7rem)!important}
}
/* never let a word break mid-way */
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word;word-break:normal;hyphens:none}
/* ===== Team portraits: show the full face, no tight crop ===== */.tphoto{height:70%;background:#111}
.tphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.tm-photo{background:#efeaea}
.tm-photo img{object-position:50% 18%}
/* ===== Capability strip (fills the empty space beside stats) ===== */.cap-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cap-chip{border:1px solid #e2dddc;background:#fff;border-radius:30px;padding:9px 18px;font-size:.9rem;color:var(--muted)}
.cap-note{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid #e8e3e2;color:var(--muted);font-size:.96rem;line-height:1.7}
.cap-note b{font-family:var(--font-display);font-weight:600;color:var(--ink);display:block;margin-bottom:4px}
.cap-mark{width:44px;height:44px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;flex:none;font-family:var(--font-display);font-weight:700}
.tst-title{font-size:clamp(1.85rem,9.9vw,10.4rem)!important}
.wamexi-word{font-size:clamp(3.2rem,16.8vw,16.2rem)!important}
@media (max-width:860px){.tst-title{font-size:clamp(1.4rem,10.4vw,4.4rem)!important}
.wamexi-word{font-size:clamp(2.4rem,17.5vw,6.5rem)!important}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.f-bottom{padding-right:clamp(70px,7vw,110px)}
@media (max-width:860px){.f-bottom{padding-right:0} }


/* ===== Service cards: peach surface, solid coral letters ===== */
.scard{background:linear-gradient(180deg,#fdf3ef 0%,#fae7de 100%)!important;border-color:#f3ddd2!important}
.scard .letter{
  background-image:none!important;
  background:linear-gradient(160deg,#f9a888 0%,var(--coral) 55%,#d8543a 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 10px 22px rgba(216,84,58,.22));
}
.scard:hover{box-shadow:0 40px 80px -55px rgba(216,84,58,.5)}
.scard .arc-dash path{stroke:#e6bfae}

/* ===== Paartivi word band: peach background ===== */
.wamexi{background:linear-gradient(180deg,#f8ddd0 0%,#f2c4ac 55%,#f7d8c8 100%)}


/* ---------- MOBILE FIXES ---------- */
@media (max-width:820px){
  /* Decorative squares are 150px and pinned top-right with no mobile rule, so
     they sat on top of headings once the text wrapped. They add nothing on a
     phone. */
  .deco-squares{display:none!important}
  /* Safety net: real content always sits above decoration. */
  h1,h2,h3,.page-h1,.section-title,.bridge-title,.services-title,.faq-title,
  .blog-title,.clients-title,.who-title,.team2-title,.stories-title,.tst-title,
  .port-title,.blog2-title,p,.sub{position:relative;z-index:2}
  /* Let a portrait image show in full instead of being letterboxed into a
     landscape box. */
  .bridge-photo{aspect-ratio:auto!important;max-height:none!important}
  .bridge-photo img{object-fit:contain!important;width:100%!important;height:auto!important;background:transparent!important}
}

/* Tap targets: several links and controls were 19-27px tall on a phone, which
   is below the 44px comfortable minimum. Padding is added rather than font size,
   so the visual design is unchanged. */
@media (max-width:820px){
  .read-more,.arrow-link,.b2more{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .tdot,.sdot{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .mm-close,.burger,.grid-btn,.to-top{min-width:44px;min-height:44px}
  .socials a,.f-social a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .mobile-menu a,.mm-links a{padding:12px 0;min-height:44px;display:flex;align-items:center}
  .footer a,.f-col a{padding:6px 0;display:inline-block}
}

@media (max-width:820px){
  /* Footer link lists, the newsletter submit and the contact details were all
     just under a comfortable tap size. */
  .footer li a,.f-col li a{padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
  .f-news button,.f-news .btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .info-block a{padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
}

/* Mobile drawer — this markup and CSS existed only on the 21 pages that load
   style.css. Home and About had neither, so the menu and grid buttons had
   nothing to open. */
/* Mobile drawer */
.mobile-menu{position:fixed;inset:0;z-index:70;background:rgba(11,11,11,.98);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s var(--ease)}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{color:#eee;font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,7vw,2.4rem);padding:10px 0;opacity:0;transform:translateY(14px)}
.mobile-menu.open a{animation:fadeUp .5s var(--ease) both;animation-delay:calc(var(--i) * .05s)}
.mobile-menu a.active{color:var(--coral)}
.mm-close{position:absolute;top:22px;right:clamp(20px,4vw,56px);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.mm-close svg{width:20px;height:20px}
/* mobile drawer sub-list */
.mm-sub{display:grid;gap:4px;margin:4px 0 10px}
.mm-sub a{font-size:1.05rem!important;color:#b9b9b9!important;font-family:var(--font-body)!important;font-weight:400!important;padding:6px 0!important}
.mm-sub a:hover{color:#fff!important}
.site-header .mm-sub a{color:#c8c8c8!important}
.site-header .mm-sub a:hover{color:#fff!important}
.mobile-menu .mm-sub a{color:#c8c8c8!important}
.mobile-menu .mm-sub a:hover{color:#fff!important}

/* Blank-page failsafe — see the inline script in <head>. */
html.pv-force-visible .rise,html.pv-force-visible .reveal,html.pv-force-visible .reveal-words,
html.pv-force-visible .reveal-chars,html.pv-force-visible .img-reveal,html.pv-force-visible .story,
html.pv-force-visible .tm,html.pv-force-visible .gitem,html.pv-force-visible .svc-row,
html.pv-force-visible .pf-card,html.pv-force-visible .post-card,html.pv-force-visible .section-dot,
html.pv-force-visible .band-dot,html.pv-force-visible .awards-row,html.pv-force-visible .srow,
html.pv-force-visible .char,html.pv-force-visible .char2,html.pv-force-visible .word{
  opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
html.pv-force-visible .img-reveal img,html.pv-force-visible .band-media img{
  clip-path:none!important;transform:none!important}
html.pv-force-visible .preloader{display:none!important}

/* Menu button — one appearance on every page. The hover inversion is limited to
   real pointers, because on a phone the hover state latches after a tap and the
   button stayed white. */
.site-header .grid-btn{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);color:#fff;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.site-header .grid-btn svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .site-header .grid-btn:hover{background:#fff;color:#111;border-color:#fff}
}
.site-header .grid-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.site-header .grid-btn:active{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5)}

/* CTA badge / marquee separation — the badge is pinned in the top zone and the
   marquee is pushed clear of it, so the logo can never sit on the moving text
   regardless of viewport. */
.cta{padding-top:clamp(210px,22vw,340px)!important}
.cta-badge{top:clamp(40px,4.5vw,72px)!important}
@media (max-width:560px){
  .cta{padding-top:200px!important;padding-bottom:60px!important}
  .cta-badge{top:34px!important;width:120px!important;height:120px!important}
  .marquee{margin-top:0!important}
}

/* Honeypot for the footer newsletter (hidden from people, visible to bots) */
.pv-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}