: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:clamp(24px,5vw,64px) 0 clamp(40px,6vw,96px);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:min(1840px,96vw);height:clamp(320px,46vw,760px);border-radius:34px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(60,25,15,.4);background:linear-gradient(135deg,#f7b79f,var(--coral) 60%,#d8543a);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 PORTFOLIO */.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(3,1fr);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}
.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}
/* TESTIMONIALS */.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{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}
/* ======= EXCLUSIVE SERVICES (list style) ======= */.services-list{position:relative;padding:clamp(60px,9vw,130px) 0 clamp(40px,6vw,80px)}
.services-list .services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(30px,4vw,54px)}
.srow-list{display:grid;gap:24px}
.srow{display:grid;grid-template-columns:auto minmax(0,1.15fr) minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3.5vw,56px);border:1px solid #e7e7e7;border-radius:18px;padding:clamp(26px,3vw,44px) clamp(26px,3.4vw,54px);background:#fff;color:var(--ink);text-decoration:none;opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);transition-delay:var(--d,0s)}
.srow.in-view{opacity:1;transform:none}
.srow.in-view:hover{background:#0b0b0b;color:#fff;border-color:#0b0b0b;transform:translateY(-4px)}
.srow-num{font-family:var(--font-display);font-weight:500;font-size:1.1rem;color:#a2a2a2;align-self:center}
.srow-main h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.2vw,2rem);margin-bottom:14px}
.srow-main p{color:var(--muted);line-height:1.7;max-width:28ch}
.srow.in-view:hover .srow-main p{color:#b4b4b4}
.srow-feat{list-style:none;display:grid;gap:14px}
.srow-feat li{position:relative;padding-left:30px;font-size:1.05rem}
.srow-feat li::before{content:"+";position:absolute;left:0;top:-1px;font-weight:600;color:inherit}
.srow-arrow{width:clamp(58px,5vw,76px);height:clamp(58px,5vw,76px);border-radius:50%;border:1px solid #d3d3d3;display:grid;place-items:center;flex:none;color:inherit;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.srow-arrow svg{width:24px;height:24px;transition:transform .35s var(--ease)}
.srow.in-view:hover .srow-arrow{background:var(--coral);border-color:var(--coral);color:#fff}
.srow.in-view:hover .srow-arrow svg{transform:translate(3px,-3px)}
/* ======= GALLERY (hover caption) ======= */.gallery{padding:clamp(20px,3vw,40px) 0 clamp(60px,8vw,120px)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 clamp(12px,2vw,28px)}
.gitem{position:relative;overflow:hidden;display:block;aspect-ratio:3/4;border-radius:3px;opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.gitem.in-view{opacity:1;transform:none}
.gitem img{width:100%;height:100%;object-fit:cover;display:block;clip-path:inset(0 100% 0 0);transform:scale(1.3);transition:clip-path 1s var(--ease),transform 1.2s var(--ease)}
.gitem.in-view img{clip-path:inset(0 0 0 0);transform:scale(1)}
.gitem.in-view:hover img{transform:scale(1.06);transition:transform .6s var(--ease)}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 55%);opacity:0;transition:opacity .4s var(--ease);z-index:1}
.gitem:hover::after{opacity:1}
.gcap{position:absolute;left:24px;bottom:22px;z-index:2;display:flex;flex-direction:column;gap:4px;color:#fff;opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.gcap i{font-style:normal;font-size:.85rem;color:#f2b8a4}
.gcap b{font-family:var(--font-display);font-weight:600;font-size:1.2rem}
.gitem:hover .gcap{opacity:1;transform:none}
@media (max-width:860px){.srow{grid-template-columns:1fr;gap:20px;text-align:left}
.srow-arrow{justify-self:start}
.gallery-grid{grid-template-columns:1fr;gap:14px}
.gitem{aspect-ratio:4/3}
}
/* ===== SERVICE TAGS MARQUEE ===== */.tagmq{background:#fff;overflow:hidden;padding:clamp(28px,4.5vw,64px) 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
.tagmq-track{display:flex;align-items:center;width:max-content;animation:marquee 30s linear infinite}
.tagmq-item{display:inline-flex;align-items:center;gap:clamp(28px,4vw,56px);padding-right:clamp(28px,4vw,56px)}
.tagmq-item .tg{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,4.6vw,4.2rem);color:var(--ink);white-space:nowrap}
.tagmq-swirl{width:clamp(38px,3.6vw,58px);height:clamp(38px,3.6vw,58px);flex:none}
/* ===== TEAM (light) ===== */.team2{padding:clamp(60px,8vw,120px) 0}
.team2-head{text-align:center;margin-bottom:clamp(40px,5vw,68px)}
.team2-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.4vw,54px);max-width:900px;margin:0 auto}
.tm{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.tm.in-view{opacity:1;transform:none}
.tm-photo{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:1/1.12;background:linear-gradient(135deg,#efe9ea,#f6f2f2)}
.tm-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.tm:hover .tm-photo img{transform:scale(1.05)}
.tm-name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2vw,1.9rem);color:var(--ink);margin-top:22px}
.tm-role{color:var(--muted);margin-top:6px;font-size:1.02rem}
.tm-bio{color:var(--muted);margin-top:14px;font-size:.98rem;line-height:1.65;max-width:46ch}
.tm-li{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tm-li svg{width:16px;height:16px;flex:none}
.tm-li:hover,.tm-li:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ===== VIDEO BAND ===== */.videoband{position:relative;width:100%;height:clamp(340px,45vw,680px);overflow:hidden}
.videoband>img{width:100%;height:100%;object-fit:cover;display:block}
.vb-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(150px,15vw,210px);height:clamp(150px,15vw,210px);border-radius:50%;background:rgba(18,18,18,.55);backdrop-filter:blur(2px);display:grid;place-items:center}
.vb-badge .ring-text{position:absolute;inset:0;animation:spin 16s linear infinite}
.vb-badge .ring-text text{font-family:var(--font-body);font-size:14px;letter-spacing:2px;fill:#fff;text-transform:capitalize}
.vb-play{width:clamp(52px,5.5vw,74px);height:clamp(52px,5.5vw,74px);border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);transition:transform .35s var(--ease)}
.vb-badge:hover .vb-play{transform:scale(1.08)}
.vb-play svg{width:36%;height:36%;margin-left:3px}
/* ===== CLIENT STORIES (testimonials) ===== */.stories{padding:clamp(60px,8vw,120px) 0}
.story-rule{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--coral);letter-spacing:.06em}
.stories-head{text-align:center;margin-bottom:clamp(40px,5vw,68px)}
.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.5vw,34px)}
.story{background:linear-gradient(160deg,#efeaf3,#f7f1f0);border-radius:20px;padding:clamp(26px,2.4vw,38px);opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.story.in-view{opacity:1;transform:none}
.story-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.story-qmark{color:var(--coral);font-family:Georgia,serif;font-size:3.4rem;line-height:.5;height:26px}
.story-rate{display:flex;flex-direction:column;gap:4px}
.story-stars{color:var(--ink);letter-spacing:2px;font-size:1.05rem}
.story-rate small{color:var(--muted);font-size:.9rem}
.story-quote{background:#fff;border-radius:14px;padding:clamp(22px,2vw,30px);font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,1.4vw,1.4rem);line-height:1.45;color:var(--ink)}
.story-author{display:flex;align-items:center;gap:16px;margin-top:24px}
.story-author .av2{width:60px;height:60px;border-radius:50%;overflow:hidden;flex:none;background:#ddd}
.story-author .av2 img{width:100%;height:100%;object-fit:cover}
.story-who i{display:block;font-style:normal;color:var(--muted);font-size:.95rem}
.story-who b{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--ink)}
.stories-nav{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.sdot{background:none;border:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:#c3bec2;padding:4px 6px;border-radius:8px;transition:color .3s var(--ease)}
.sdot.active{color:var(--coral);border:1.5px solid var(--coral)}
.sdot-track{width:min(240px,30vw);height:2px;background:#e2dee0;position:relative;border-radius:2px}
.sdot-fill{position:absolute;inset:0 auto 0 0;height:2px;width:25%;background:var(--coral);border-radius:2px;transition:width .4s var(--ease)}
/* ===== BLOG (about) ===== */.blog2{padding:clamp(50px,7vw,110px) 0}
.blog2-head{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:clamp(36px,4vw,60px)}
.blog2-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(20px,2.5vw,34px);align-items:start}
.b2img{overflow:hidden;border-radius:6px;aspect-ratio:3/4}
.b2mid{display:flex;flex-direction:column;gap:18px}
.b2col{display:flex;flex-direction:column;gap:16px}
.b2meta{color:var(--muted);font-size:.95rem}
.b2title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2vw,2rem);line-height:1.2;color:var(--ink)}
.b2more{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;transition:color .3s var(--ease)}
.b2more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.b2more:hover{color:var(--ink)}
.b2more:hover svg{transform:translate(3px,-3px)}
.b2mid .b2img{aspect-ratio:16/10}
@media (max-width:860px){.team2-grid{grid-template-columns:1fr;gap:36px}
.stories-grid{grid-template-columns:1fr}
.blog2-head{flex-direction:column}
.blog2-grid{grid-template-columns:1fr;gap:26px}
.b2img{aspect-ratio:16/11}
}

/* 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:22px;height:clamp(240px,58vw,420px)}
.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}
.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}
/* ============ ABOUT HERO (dark wavy) ============ */.about-hero{position:relative;background:#0b0b0b;color:#fff;overflow:hidden;min-height:clamp(440px,72vh,780px);display:flex;flex-direction:column}
.about-hero .abg{position:absolute;inset:0;z-index:0}
.about-hero .abg img{width:100%;height:100%;object-fit:cover;opacity:.85}
.about-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 45%,rgba(0,0,0,.7))}
.about-hero>.wrap{position:relative;z-index:3;display:flex;flex-direction:column;flex:1}
.nav-dark .menu a{color:#eee}
.nav-dark .menu a:hover{color:#fff}
.nav-dark .brand-fallback{color:#e6e6e6;border-color:rgba(255,255,255,.32)}
.nav-dark .search{color:#cfcfcf}
.nav-dark .socials a{color:#b9b9b9}
.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}
.about-inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,6vw,70px) 0 clamp(50px,7vw,90px)}
.about-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,10.5vw,9.5rem);line-height:.92;letter-spacing:-.02em;margin-bottom:30px;opacity:0;transform:translateY(24px)}
.is-loaded .about-h1{animation:fadeUp .9s var(--ease) .5s both}
.breadcrumb{align-self:flex-start;display:inline-block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:15px 28px;font-size:1.05rem;color:#fff;opacity:0;transform:translateY(18px)}
.is-loaded .breadcrumb{animation:fadeUp .8s var(--ease) .72s both}
.breadcrumb b{font-weight:600}
/* ============ WHO WE ARE ============ */.who{position:relative;padding:clamp(60px,9vw,130px) 0 clamp(50px,7vw,100px)}
.who .deco-squares{position:absolute;top:clamp(30px,5vw,70px);right:0;width:150px;height:150px}
.who-grid{display:grid;grid-template-columns:minmax(260px,.82fr) 1.18fr;grid-template-rows:auto auto;gap:clamp(30px,4vw,56px) clamp(30px,5vw,70px);align-items:start}
.who-badgecol{grid-column:1;grid-row:1;display:flex;justify-content:center;align-items:center}
.who-photo{grid-column:1;grid-row:2;width:min(100%,380px);aspect-ratio:1;border-radius:50%;overflow:hidden;justify-self:center;box-shadow:0 30px 70px -45px rgba(40,20,10,.4)}
.who-head{grid-column:2;grid-row:1}
.who-body{grid-column:2;grid-row:2}
.who-title{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.01em;max-width:15ch;margin-top:20px}
.who-copy{color:var(--muted);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.9;margin-bottom:clamp(28px,4vw,44px)}
.rotate-badge{position:relative;width:clamp(160px,17vw,230px);height:clamp(160px,17vw,230px);border-radius:50%}
.rotate-badge .ring-text{position:absolute;inset:0;animation:spin 16s linear infinite}
.rotate-badge .ring-text text{font-family:var(--font-body);font-size:15px;letter-spacing:2px;fill:#2b2b2b;text-transform:uppercase}
.rotate-badge .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(56px,6vw,80px);height:clamp(56px,6vw,80px);border-radius:50%;background:var(--coral);display:grid;place-items:center;color:#fff;transition:transform .35s var(--ease)}
.rotate-badge .play:hover{transform:translate(-50%,-50%) scale(1.08)}
.rotate-badge .play svg{width:34%;height:34%;margin-left:3px}
/* ============ WAMEXI image-filled headline ============ */.wamexi{position:relative;padding:clamp(10px,3vw,40px) 0 clamp(50px,7vw,90px);overflow:hidden}
.wamexi .wrap{display:flex;flex-direction:column;align-items:center}
.wamexi-wrap{position:relative;display:inline-block;line-height:.9}
.wamexi-word{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(3.6rem,18vw,17rem);line-height:.95;letter-spacing:.018em;background-image:url('../images/who-photo.jpg'),linear-gradient(135deg,#3a3f46,#141414);background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wamexi-photo{position:absolute;left:2%;top:-26%;width:clamp(150px,20vw,300px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 26px 60px -40px rgba(40,20,10,.4)}
.wamexi-dot{width:12px;height:12px;border-radius:50%;background:var(--ink);margin:clamp(30px,4vw,50px) auto 0}

@media (max-width:860px){.about-inner{padding-top:20px}
.who-grid{display:block}
.who-badgecol{margin-bottom:26px}
.who-head{margin-bottom:22px}
.who-photo{width:min(100%,300px);margin:0 auto 26px}
.who .deco-squares{width:104px;height:104px;top:8px}
.who .dsq.coral,.who .dsq.black{width:66px;height:66px}
.who .dsq.black{left:40px;top:40px}
.wamexi-photo{width:clamp(100px,28vw,150px);top:-16%;border-width:4px}
}
/* 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 (same as home) */
.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}