/* Toner M&E — brand palette: Pantone 5405 #10597C · Pantone 552 #C0D7DE · Process Black #231F20 */
:root{
  --ink:#231F20; --ink2:#1A1718;
  --steel:#10597C; --acc:#1B79A4; --acc2:#C0D7DE; --deep:#0B415C;
  --bg:#F6F9FA; --surf:#FFFFFF; --tx:#231F20; --mut:#5D6E77;
  --line:rgba(16,89,124,.16); --grid:rgba(16,89,124,.05);
  --em:#10597C; --head:#231F20; --frame:#F6F9FA;
  --dk-tx:#CBD6DB; --dk-mut:#9AA8AF; --dk-dim:#8C979C;
  --ff-d:'Fraunces',serif; --ff-b:'Manrope',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="night"]{
  --bg:#111A1F; --surf:#1A272E; --tx:#E7EEF1; --mut:#96A9B2;
  --line:rgba(192,215,222,.16); --grid:rgba(192,215,222,.05);
  --em:#C0D7DE; --head:#E7EEF1; --frame:#111A1F;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:var(--ff-b);color:var(--tx);background:var(--bg);line-height:1.65;font-size:16px;overflow-x:hidden;transition:background-color .5s,color .5s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--steel);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- blueprint texture ---------- */
.bp{position:relative}
.bp::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px}
.bp>*{position:relative}

/* ---------- scroll progress ---------- */
#pbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;background:linear-gradient(90deg,var(--deep),var(--acc),var(--acc2));transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:200;background:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .6s var(--ease),visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader .llogo{position:relative;width:min(340px,72vw);overflow:hidden;animation:lin 1.1s var(--ease) both}
#loader .llogo img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 24px rgba(192,215,222,.22))}
@keyframes lin{from{opacity:0;transform:translateY(16px) scale(.93)}to{opacity:1;transform:none}}
#loader .sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);transform:translateX(-130%);animation:sheen 1.7s .55s cubic-bezier(.4,0,.2,1) infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes sheen{55%,100%{transform:translateX(130%)}}
#loader svg{width:min(240px,60vw);height:44px;overflow:visible;margin-top:-4px}
#loader .arc{fill:none;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;animation:draw 1.1s var(--ease) forwards}
#loader .a1{stroke:var(--steel);stroke-width:7}
#loader .a2{stroke:var(--acc2);stroke-width:6;animation-delay:.18s}
@keyframes draw{to{stroke-dashoffset:0}}
#loader small{color:var(--dk-dim);letter-spacing:.3em;text-transform:uppercase;font-size:10px}

/* ---------- ray cursor (logo swoosh) ---------- */
.ray{position:fixed;top:0;left:0;pointer-events:none;z-index:150;will-change:transform}
.ray svg{display:block;overflow:visible}
.spark{position:fixed;pointer-events:none;z-index:149;width:5px;height:5px;border-radius:50%;animation:spk .55s var(--ease) forwards}
@keyframes spk{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@media(pointer:coarse){.ray{display:none}}
body.fine,body.fine a,body.fine button{cursor:none}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px clamp(20px,4vw,54px);transition:background .4s,box-shadow .4s,padding .4s}
nav.scrolled{background:rgba(26,23,24,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06);padding:9px clamp(20px,4vw,54px)}
nav .brand img{height:64px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));transition:height .4s var(--ease)}
nav.scrolled .brand img{height:48px}
nav .right{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
nav .links{display:flex;gap:clamp(14px,2vw,28px);align-items:center}
nav .links a{color:#E3E9EC;font-size:13.5px;font-weight:600;letter-spacing:.06em;position:relative;padding:4px 0;white-space:nowrap}
nav .links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:linear-gradient(90deg,var(--steel),var(--acc2));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
nav .links a:hover::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-b);font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;padding:14px 26px;border-radius:2px;border:0;position:relative;overflow:hidden;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s}
.btn-acc{background:linear-gradient(120deg,var(--deep) 0%,var(--steel) 55%,var(--deep) 100%);background-size:200% 100%;color:#fff}
.btn-acc:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,89,124,.45);background-position:100% 0}
.btn-ghost{background:transparent;color:#EFF4F6;border:1px solid rgba(239,244,246,.35)}
.btn-ghost:hover{border-color:var(--acc2);color:var(--acc2);transform:translateY(-2px)}
nav .links .btn{padding:11px 18px;font-size:12.5px}
#thm{background:rgba(255,255,255,.08);border:1px solid rgba(239,244,246,.25);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .3s,transform .4s var(--ease)}
#thm:hover{border-color:var(--acc2);transform:rotate(30deg)}
#thm svg{width:17px;height:17px;stroke:#EFF4F6;fill:none;stroke-width:1.8}
#thm .moon{display:none}
html[data-theme="night"] #thm .sun{display:none}
html[data-theme="night"] #thm .moon{display:block}
#burger{display:none;background:none;border:0;width:40px;height:34px;position:relative;z-index:120;flex-shrink:0}
#burger span{position:absolute;left:7px;right:7px;height:2px;background:#EFF4F6;transition:.35s var(--ease)}
#burger span:nth-child(1){top:10px}#burger span:nth-child(2){top:17px}#burger span:nth-child(3){top:24px}
body.menu-open #burger span:nth-child(1){top:17px;transform:rotate(45deg)}
body.menu-open #burger span:nth-child(2){opacity:0}
body.menu-open #burger span:nth-child(3){top:17px;transform:rotate(-45deg)}
#mmenu{position:fixed;inset:0;z-index:110;background:rgba(26,23,24,.97);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;visibility:hidden;transition:.45s var(--ease)}
body.menu-open #mmenu{opacity:1;visibility:visible}
#mmenu a{font-family:var(--ff-d);font-size:28px;color:#EFF4F6;padding:7px;opacity:0;transform:translateY(14px);transition:.4s var(--ease)}
body.menu-open #mmenu a{opacity:1;transform:none}
#mmenu a:hover{color:var(--acc2)}
#mmenu a.btn{margin-top:18px;font-family:var(--ff-b);font-size:13.5px}

/* ---------- hero ---------- */
header{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--ink2)}
header.short{min-height:72svh}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s var(--ease) both;transform-origin:60% 40%}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,23,24,.55) 0%,rgba(26,23,24,.25) 40%,rgba(26,23,24,.9) 88%),linear-gradient(100deg,rgba(26,23,24,.6) 0%,transparent 60%)}
/* brand swoosh arcs, scaled up from the logo */
.swoosh{position:absolute;pointer-events:none}
.swoosh path{fill:none;stroke-linecap:round}
.swoosh .base{stroke:rgba(192,215,222,.15)}
.swoosh .flow{stroke:var(--acc2);stroke-dasharray:40 900;stroke-dashoffset:940;animation:flow 8s linear infinite;filter:drop-shadow(0 0 6px rgba(192,215,222,.85))}
.swoosh .flow.f2{stroke:var(--acc);animation-duration:11s;animation-delay:2s}
@keyframes flow{to{stroke-dashoffset:0}}
.hero-swoosh{inset:auto 0 0 0;height:46%;opacity:.6;width:100%}
.hero-in{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:140px clamp(20px,4vw,54px) clamp(48px,7vh,84px)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--acc2)}
.eyebrow::before{content:"";width:36px;height:1px;background:linear-gradient(90deg,var(--acc2),transparent);display:inline-block}
.eyebrow.duo::after{content:"";width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--acc2));display:inline-block}
header h1{font-family:var(--ff-d);font-weight:300;font-size:clamp(42px,7.2vw,96px);line-height:1.04;margin:20px 0 10px;letter-spacing:-.01em}
header.short h1{font-size:clamp(38px,5.6vw,72px)}
header h1 em{font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--acc2),#7FB3CB 55%,#4E93B5);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
header p.lede{max-width:580px;color:var(--dk-tx);font-size:clamp(15px,1.4vw,18px);font-weight:400}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(24px,5vw,72px);margin-top:clamp(36px,6vh,60px);padding-top:26px;border-top:1px solid rgba(239,244,246,.18);width:fit-content}
.hero-stats.three{grid-template-columns:repeat(3,auto)}
.hero-stats .n{font-family:var(--ff-d);font-weight:400;font-size:clamp(26px,3vw,40px);color:#fff}
.hero-stats .n b{color:var(--acc2);font-weight:400}
.hero-stats .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dk-mut);font-weight:700;margin-top:2px}
.scroll-hint{position:absolute;right:clamp(20px,4vw,54px);bottom:clamp(48px,7vh,84px);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--dk-mut);font-size:10px;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-hint::after{content:"";width:1px;height:56px;background:linear-gradient(180deg,var(--acc2),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{background:var(--ink2);color:var(--dk-dim);padding:26px 0;border-top:1px solid rgba(255,255,255,.05);overflow:hidden;position:relative}
.marquee .cap{text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dk-dim);margin-bottom:18px;font-weight:700}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
@keyframes mq{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{font-family:var(--ff-d);font-size:clamp(17px,1.8vw,22px);font-weight:300;white-space:nowrap;padding:0 26px;color:#C2CFD5;display:flex;align-items:center;gap:52px;transition:color .3s,text-shadow .3s}
.mq-track span:hover{color:var(--acc2);text-shadow:0 0 18px rgba(192,215,222,.5)}
.mq-track span::after{content:"◆";font-size:7px;color:var(--acc2)}

/* ---------- shared ---------- */
section{padding:clamp(72px,10vw,130px) clamp(20px,4vw,54px)}
.wrap{max-width:1280px;margin:0 auto}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{font-family:var(--ff-d);font-weight:300;font-size:clamp(32px,4.6vw,58px);line-height:1.08;margin:16px 0 18px;letter-spacing:-.01em;color:var(--head)}
.sec-head h2 em{font-style:italic;color:var(--em)}
.sec-head p{color:var(--mut);font-size:17px;max-width:600px}
.dark .sec-head h2{color:#F2F5F6}
.dark .sec-head h2 em{color:var(--acc2)}
.dark .sec-head p{color:var(--dk-mut)}
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- about ---------- */
#about .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
#about .imgs{position:relative;padding-bottom:70px}
#about .imgs .i1{border-radius:3px;box-shadow:0 30px 60px rgba(35,31,32,.22);overflow:hidden}
#about .imgs .i1 img{aspect-ratio:4/3.4;object-fit:cover;width:100%;transition:transform 1.2s var(--ease)}
#about .imgs:hover .i1 img{transform:scale(1.05)}
#about .imgs .i2{position:absolute;right:-4%;bottom:0;width:52%;border:6px solid var(--frame);border-radius:3px;box-shadow:0 24px 48px rgba(35,31,32,.25);overflow:hidden;transition:border-color .5s}
#about .imgs .i2 img{aspect-ratio:4/3;object-fit:cover;width:100%}
#about .imgs .est{position:absolute;left:-8px;top:-18px;background:var(--ink);color:var(--acc2);font-family:var(--ff-d);padding:14px 20px;border-radius:2px;font-size:14px;letter-spacing:.1em;box-shadow:0 14px 30px rgba(35,31,32,.3)}
#about .txt p{margin-bottom:16px;color:var(--mut)}
#about .txt p b{color:var(--em)}
.tline{display:flex;gap:0;margin-top:34px;border-top:1px solid var(--line);padding-top:24px}
.tline div{flex:1;padding-right:18px}
.tline .yr{font-family:var(--ff-d);font-size:26px;color:var(--head)}
.tline .yr sup{color:var(--steel);font-size:12px;margin-left:2px}
.tline small{display:block;color:var(--mut);font-size:12.5px;line-height:1.5;margin-top:4px}

/* ---------- values ---------- */
#values .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vcard{background:var(--surf);border:1px solid var(--line);border-radius:3px;padding:30px 28px;position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .5s}
.vcard::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--steel),var(--acc2));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.vcard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(35,31,32,.13)}
.vcard:hover::before{transform:scaleX(1)}
.vcard .vic{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:50%;padding:9px;margin-bottom:16px;transition:transform .4s var(--ease)}
.vcard:hover .vic{transform:scale(1.08)}
.vcard h3{font-family:var(--ff-d);font-weight:500;font-size:20px;margin-bottom:6px;color:var(--head)}
.vcard p{font-size:14px;color:var(--mut)}
.vcard .idx{position:absolute;right:18px;top:16px;font-family:var(--ff-d);font-size:13px;color:var(--line)}

/* ---------- sectors ---------- */
#sectors{background:var(--ink);color:#fff}
#sectors .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scard{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:3/3.9;display:flex;align-items:flex-end}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter 1.1s var(--ease);filter:saturate(.85)}
.scard:hover img{transform:scale(1.07);filter:saturate(1.05)}
.scard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,23,24,.1) 30%,rgba(26,23,24,.85) 100%)}
.scard .in{position:relative;z-index:2;padding:26px;width:100%}
.scard h3{font-family:var(--ff-d);font-weight:400;font-size:26px}
.scard .ln{width:44px;height:1.5px;background:var(--acc2);margin:10px 0 8px;transform-origin:left;transition:transform .5s var(--ease),width .5s var(--ease)}
.scard:hover .ln{width:78px}
.scard p{font-size:13.5px;color:var(--dk-tx);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s .1s}
.scard:hover p{max-height:80px;opacity:1}

/* ---------- projects / case studies ---------- */
.proj{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(30px,4.5vw,70px);align-items:center;margin-bottom:clamp(64px,8vw,110px)}
.proj:last-child{margin-bottom:0}
.proj:nth-child(even) .pwrap{order:2}
.cs .proj{margin-bottom:0}
.cs{padding-bottom:clamp(56px,7vw,90px);margin-bottom:clamp(56px,7vw,90px);border-bottom:1px solid var(--line)}
.cs:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
.cs:nth-of-type(even) .proj .pwrap{order:2}
.cs:nth-of-type(odd) .proj .pwrap{order:0}
.pwrap{perspective:900px}
.pimg{position:relative;border-radius:3px;overflow:hidden;box-shadow:0 32px 64px rgba(35,31,32,.2);transition:transform .25s ease-out;transform-style:preserve-3d}
.pimg img{aspect-ratio:16/11;width:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.proj:hover .pimg img{transform:scale(1.05)}
.pimg .tag{position:absolute;top:16px;left:16px;background:rgba(26,23,24,.78);backdrop-filter:blur(6px);color:var(--acc2);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;border-radius:2px;display:flex;align-items:center;gap:8px;z-index:2}
.pimg .tag i{width:7px;height:7px;border-radius:50%;background:var(--acc2);animation:blink 1.8s infinite}
.pimg .tag.done i{animation:none;background:#4FBF8B;box-shadow:0 0 8px rgba(79,191,139,.7)}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 8px var(--acc2)}50%{opacity:.35;box-shadow:none}}
.ptxt .num{font-family:var(--ff-d);font-style:italic;color:var(--acc);font-size:15px;letter-spacing:.08em}
.ptxt h3{font-family:var(--ff-d);font-weight:400;font-size:clamp(26px,3vw,38px);margin:8px 0 14px;line-height:1.12;color:var(--head)}
.ptxt .meta,.dpcard .meta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden;margin:18px 0}
.ptxt .meta div,.dpcard .meta div{background:var(--surf);padding:12px 16px;transition:background-color .5s}
.ptxt .meta small,.dpcard .meta small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ptxt .meta span,.dpcard .meta span{font-size:14.5px;font-weight:600;color:var(--em)}
.ptxt p{color:var(--mut);font-size:15px;margin-bottom:12px}
.ptxt .pkg{border-left:2px solid var(--steel);padding:4px 0 4px 18px;color:var(--mut);font-size:14px}
.ptxt .pkg b{color:var(--em);display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
/* design-appointment cards (no site photography yet — drawn, not built) */
.dpgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dpcard{background:var(--surf);border:1.5px dashed rgba(16,89,124,.45);border-radius:3px;padding:30px 28px;position:relative;transition:transform .4s var(--ease),box-shadow .4s,background-color .5s}
.dpcard:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(35,31,32,.12)}
.dpcard .dtag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--em);margin-bottom:14px}
.dpcard .dtag i{width:7px;height:7px;border-radius:50%;background:var(--steel);animation:blink 1.8s infinite}
.dpcard h3{font-family:var(--ff-d);font-weight:400;font-size:clamp(22px,2.2vw,27px);line-height:1.15;color:var(--head)}
.dpcard p{color:var(--mut);font-size:14.5px}

/* case-study photo strip */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:clamp(18px,2.5vw,28px)}
.gal img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:2px;filter:saturate(.85);transition:transform .5s var(--ease),filter .5s,box-shadow .5s}
.gal img:hover{transform:scale(1.06);filter:saturate(1.05);box-shadow:0 10px 24px rgba(35,31,32,.25);z-index:2;position:relative}

/* ---------- delivered grid ---------- */
#delivered,#also{background:var(--ink);color:#fff}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dcard{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:4/3.1;display:block}
.dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .9s;filter:saturate(.8)}
.dcard:hover img{transform:scale(1.08);filter:saturate(1.05)}
.dcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,23,24,.9))}
.dcard .in{position:absolute;bottom:0;left:0;right:0;padding:16px;z-index:2;transform:translateY(6px);transition:transform .5s var(--ease)}
.dcard:hover .in{transform:none}
.dcard h3{font-family:var(--ff-d);font-weight:400;font-size:17px;line-height:1.2;color:#fff}
.dcard small{color:var(--acc2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:0;transition:opacity .5s .08s}
.dcard:hover small{opacity:1}
.dcard .go{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(26,23,24,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:var(--acc2);font-size:15px;opacity:0;transform:translateY(-6px);transition:.4s var(--ease);z-index:2}
a.dcard:hover .go{opacity:1;transform:none}
@media(pointer:coarse){a.dcard .go{opacity:1;transform:none}}
.dmore{display:flex;justify-content:center;margin-top:clamp(30px,4vw,44px)}
.dgrid.three{grid-template-columns:repeat(3,1fr)}

/* ---------- reviews slider ---------- */
#voices{background:linear-gradient(180deg,var(--ink) 0%,var(--ink2) 100%);color:#fff;position:relative;overflow:hidden}
#voices .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.2;pointer-events:none}
#voices .o1{width:420px;height:420px;background:var(--steel);top:-120px;right:-80px;animation:float 11s ease-in-out infinite}
#voices .o2{width:340px;height:340px;background:var(--acc2);bottom:-140px;left:-60px;animation:float 13s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,26px)}}
.rslider{position:relative;max-width:880px;margin:0 auto}
.rmask{overflow:hidden}
.rtrack{display:flex;transition:transform .65s var(--ease);touch-action:pan-y}
.quote{flex:0 0 100%;padding:0 clamp(4px,2vw,24px);text-align:center;user-select:none}
.quote .qm{font-family:var(--ff-d);font-size:80px;line-height:.6;color:var(--acc2);display:block;margin-bottom:26px}
.quote p{font-family:var(--ff-d);font-weight:300;font-size:clamp(20px,2.4vw,29px);line-height:1.5;color:#EFF3F5;font-style:italic}
.quote footer{margin-top:28px;display:flex;align-items:center;justify-content:center;gap:14px}
.quote .av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--deep),var(--steel));display:flex;align-items:center;justify-content:center;font-family:var(--ff-d);color:var(--acc2);font-size:16px;flex-shrink:0}
.quote b{display:block;font-size:15px;color:#fff;text-align:left}
.quote small{color:var(--dk-mut);font-size:12.5px;letter-spacing:.04em;display:block;text-align:left}
.rnav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:38px}
.rbtn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.rbtn:hover{border-color:var(--acc2);background:rgba(192,215,222,.12);transform:scale(1.08)}
.rbtn svg{width:17px;height:17px;stroke:#EFF4F6;fill:none;stroke-width:2}
.rdots{display:flex;gap:9px}
.rdot{width:8px;height:8px;border-radius:8px;border:0;background:rgba(255,255,255,.25);transition:width .4s var(--ease),background .4s;padding:0}
.rdot.on{width:26px;background:var(--acc2)}

/* ---------- team ---------- */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tcard{background:var(--surf);border:1px solid var(--line);border-radius:3px;padding:26px 24px;transition:transform .4s var(--ease),box-shadow .4s,background-color .5s}
.tcard:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(35,31,32,.13)}
.tcard .mono{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--ink),var(--steel));color:var(--acc2);font-family:var(--ff-d);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:16px;position:relative}
.tcard .mono::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(16,89,124,.45);opacity:0;transform:scale(.85);transition:.45s var(--ease)}
.tcard:hover .mono::after{opacity:1;transform:scale(1)}
.tcard h3{font-size:16.5px;font-weight:700;color:var(--head)}
.tcard .role{color:var(--steel);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:2px 0 14px}
html[data-theme="night"] .tcard .role{color:var(--acc2)}
.tcard .row{display:flex;align-items:center;gap:4px}
.tcard a{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);padding:3px 0;transition:color .3s;min-width:0}
.tcard a:hover{color:var(--em)}
.tcard a svg,.copy svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.copy{background:none;border:0;color:var(--mut);padding:4px;border-radius:3px;position:relative;transition:color .3s,transform .2s var(--ease)}
.copy:hover{color:var(--acc);transform:scale(1.15)}
.copy.ok{color:#3FBF7F}
.copy::after{content:"Copied ✓";position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ink);color:var(--acc2);font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:4px 9px;border-radius:3px;opacity:0;pointer-events:none;transition:.3s var(--ease);white-space:nowrap}
.copy.ok::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- accreditation ---------- */
#accred{padding-top:0}
#accred .strip{display:flex;align-items:center;justify-content:center;gap:clamp(28px,6vw,90px);border:1px solid var(--line);background:var(--surf);border-radius:3px;padding:34px clamp(20px,4vw,60px);flex-wrap:wrap;transition:background-color .5s}
#accred img{height:64px;width:auto;filter:grayscale(.25);transition:filter .4s,transform .4s var(--ease)}
#accred img:hover{filter:none;transform:scale(1.06)}
#accred .t{max-width:340px}
#accred .t b{font-family:var(--ff-d);font-weight:500;font-size:19px;color:var(--head);display:block;margin-bottom:4px}
#accred .t span{font-size:13.5px;color:var(--mut)}

/* ---------- contact ---------- */
#contact{background:var(--ink2);color:#fff;position:relative;overflow:hidden}
.contact-swoosh{inset:0;opacity:.4;width:100%;height:100%}
#contact .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);position:relative}
#contact h2{font-family:var(--ff-d);font-weight:300;font-size:clamp(34px,4.6vw,58px);line-height:1.08;margin:16px 0 18px}
#contact h2 em{font-style:italic;color:var(--acc2)}
#contact .sub{color:var(--dk-mut);max-width:440px;margin-bottom:36px}
.cline{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.cline svg{width:20px;height:20px;stroke:var(--acc2);fill:none;stroke-width:1.6;margin-top:3px;flex-shrink:0}
.cline b{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dk-mut);margin-bottom:3px}
.cline a,.cline span{color:#EFF3F5;font-size:16px}
.cline a:hover{color:var(--acc2)}
form{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:clamp(24px,3vw,40px);backdrop-filter:blur(8px)}
form .fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form label{display:block;margin-bottom:14px}
form label span{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--dk-mut);margin-bottom:7px}
form input,form textarea{width:100%;background:rgba(26,23,24,.6);border:1px solid rgba(255,255,255,.14);color:#fff;padding:13px 15px;border-radius:2px;font-family:var(--ff-b);font-size:15px;transition:border-color .3s,box-shadow .3s}
form input:focus,form textarea:focus{outline:none;border-color:var(--acc2);box-shadow:0 0 0 3px rgba(192,215,222,.18)}
form textarea{min-height:120px;resize:vertical}
form .btn{width:100%;justify-content:center;margin-top:6px}
#formok{display:none;color:var(--acc2);font-size:14px;margin-top:14px;text-align:center}

/* ---------- finale + footer ---------- */
#finale{background:var(--ink2);color:#fff;text-align:center;padding-top:clamp(56px,7vw,84px);padding-bottom:clamp(60px,8vw,100px);position:relative;overflow:hidden}
#finale .fin-swoosh{position:relative;width:min(420px,70%);margin:0 auto clamp(56px,7vw,84px);height:64px}
#finale .fin-swoosh svg{width:100%;height:100%;overflow:visible}
#finale .fin-swoosh path{fill:none;stroke-linecap:round}
#finale .fin-swoosh .b1{stroke:rgba(16,89,124,.55);stroke-width:5}
#finale .fin-swoosh .b2{stroke:rgba(192,215,222,.4);stroke-width:4}
#finale .fin-swoosh .p1{stroke:var(--acc2);stroke-width:4;stroke-dasharray:34 300;stroke-dashoffset:334;animation:flow 3.8s var(--ease) infinite;filter:drop-shadow(0 0 7px rgba(192,215,222,.9))}
#finale h2{font-family:var(--ff-d);font-weight:300;font-size:clamp(30px,4.4vw,54px)}
#finale h2 em{font-style:italic;color:var(--acc2)}
footer.site{background:var(--ink2);color:var(--dk-dim);padding:clamp(48px,6vw,72px) clamp(20px,4vw,54px);border-top:1px solid rgba(255,255,255,.06)}
footer.site .in{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;font-size:12.5px}
footer.site img{height:52px}
footer.site a:hover{color:var(--acc2)}
.hwcred{display:inline-flex;align-items:center;gap:9px;color:var(--dk-dim);font-size:12.5px;letter-spacing:.02em;transition:color .3s}
.hwcred:hover{color:var(--acc2)}
.hwcred svg{width:17px;height:17px;flex-shrink:0;animation:hwspin 14s linear infinite}
@keyframes hwspin{to{transform:rotate(360deg)}}

/* ---------- LinkedIn bubble ---------- */
#lifab{position:fixed;right:18px;bottom:18px;z-index:140;display:flex;align-items:center;gap:12px}
#lifab .bub{position:relative;background:var(--surf);color:var(--tx);border:1px solid var(--line);box-shadow:0 14px 38px rgba(35,31,32,.22);border-radius:12px;padding:12px 34px 12px 16px;font-size:13px;font-weight:600;line-height:1.4;max-width:230px;opacity:0;transform:translateY(10px) scale(.96);transition:.5s var(--ease);pointer-events:none}
#lifab.show .bub{opacity:1;transform:none;pointer-events:auto}
#lifab .bub a{color:var(--em);display:block}
#lifab .bub a:hover{text-decoration:underline}
#lifab .bub .x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--mut);font-size:15px;line-height:1;padding:4px;transition:color .3s}
#lifab .bub .x:hover{color:var(--em)}
#lifab .ln{position:relative;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--deep),var(--steel));display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(16,89,124,.4);transition:transform .35s var(--ease),box-shadow .35s;flex-shrink:0}
#lifab .ln:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 16px 38px rgba(16,89,124,.55)}
#lifab .ln svg{width:24px;height:24px;fill:#fff}
#lifab .ln::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--steel);animation:lipulse 2.6s var(--ease) infinite;pointer-events:none}
@keyframes lipulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  #values .vgrid{grid-template-columns:repeat(2,1fr)}
  .dgrid,.dgrid.three{grid-template-columns:repeat(3,1fr)}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  #sectors .sgrid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .scard{aspect-ratio:16/10}
  .scard p{max-height:80px;opacity:1}
}
@media(max-width:880px){
  nav .links{display:none}
  #burger{display:block}
  nav .brand img{height:54px}
  nav.scrolled .brand img{height:44px}
  #about .grid,.proj,#contact .cgrid,.dpgrid{grid-template-columns:1fr}
  #about .imgs .i2{right:0}
  .proj:nth-child(even) .pwrap,.cs:nth-of-type(even) .proj .pwrap{order:0}
  .hero-stats,.hero-stats.three{grid-template-columns:repeat(2,1fr);width:100%}
  .scroll-hint{display:none}
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  .dgrid{grid-template-columns:repeat(2,1fr)}
  .dgrid.three{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .tgrid{grid-template-columns:1fr}
  #values .vgrid{grid-template-columns:1fr}
  form .fr{grid-template-columns:1fr}
  .tline{flex-direction:column;gap:18px}
  header h1 em{white-space:normal}
  header h1{font-size:clamp(34px,10vw,42px)}
  header.short h1{font-size:clamp(30px,9vw,38px)}
  .hero-stats{gap:18px 28px;margin-top:30px;padding-top:20px}
  .hero-cta{margin-top:26px}
  .eyebrow{letter-spacing:.18em;font-size:11px}
  footer.site .in{flex-direction:column;justify-content:center;text-align:center;gap:12px}
  #lifab{right:12px;bottom:12px}
  #lifab .bub{max-width:190px;font-size:12.5px}
  #lifab .ln{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .ray{display:none}
}