/* ============================================================
   PINK TANK — "ENGINEERED" design system (shared)
   Extracted from the Design D concept in ../index.html and
   rescoped from #d -> .eng so it can drive standalone pages.
   ============================================================ */

:root{
  --pink:#00A9E0;        /* brand teal */
  --pink-soft:#B2DDF4;
  --accent-rgb:0,169,224;
  --ink:#0b0b0d;
  --paper:#ffffff;
  --line:#e6e6e3;
  --muted:#54545c;
  --muted-2:#6b6b73;
  /* spacing scale (8px base) — use these instead of ad-hoc values */
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;--s-8:128px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background: #F1EDE3;background: linear-gradient(90deg,rgba(241, 237, 227, 1) 0%, rgba(178, 221, 244, 1) 100%);} /* brand gradient shows through during the page fade */
body.eng{font-family:'Stack Sans Text',sans-serif;font-weight:300;background:#fff;color:#0b0b0d;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:clip}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* scroll reveal (gated on .js so content shows if JS fails) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- primitives ---------- */
.eng .wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.eng .mono{font-family:'Stack Sans Text',sans-serif;font-size:12px;font-weight:200;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.eng .rule{height:1px;background:var(--line)}
@keyframes dblink{0%,48%{opacity:1}49%,100%{opacity:0}}
.eng .u{color:var(--pink);animation:dblink 3.05s steps(2) infinite}

/* ---------- nav ---------- */
.eng nav{display:flex;align-items:center;justify-content:space-between;padding:var(--s-3) 0}
.eng nav .logo img{height:40px;width:auto}
.eng nav .links{display:flex;gap:30px;font-size:14.5px;font-weight:500}
.eng nav .links a:hover{color:var(--pink)}
.eng nav .links a.current{color:var(--pink)}
.eng .navcta{font-size:13.5px;font-weight:600;border:1.5px solid #0b0b0d;padding:11px 22px;border-radius:2px;transition:.25s}
.eng .navcta:hover{background:var(--pink);border-color:var(--pink);color:#fff}
/* hamburger-only nav (all breakpoints): inline links stay in the markup as the no-JS fallback */
.js .eng nav .links,.js .eng nav .navcta{display:none}
/* pages without the dark home hero: the white icon logo becomes ink */
body.eng:not(:has(.dhero)) nav .logo img{filter:invert(1)}

/* ---------- home hero ---------- */
.eng .dhero{position:relative;min-height:92vh;display:flex;align-items:flex-end;background:#0b0b0d;overflow:hidden}
.eng .dhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
/* frosted-glass treatment over the hero video */
.eng .dhero .scrim{position:absolute;inset:0;z-index:1;
  -webkit-backdrop-filter:blur(7px) saturate(120%) brightness(1.02);
  backdrop-filter:blur(7px) saturate(120%) brightness(1.02);
  background:rgba(255,255,255,.045);
  /*background:linear-gradient(180deg,rgba(11,11,13,.35) 0%,rgba(11,11,13,.55) 55%,rgba(11,11,13,.9) 100%)*/}
.eng .dhero .scrim::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;mix-blend-mode:overlay;opacity:.08}
.eng .dhero .inner{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:0 40px 64px;color:#fff}
.eng .dhero .mono{color:#fff;opacity:.8;font-weight:200;margin-bottom:var(--s-3)}
.eng .dhero h1{font-family:'Stack Sans Text',sans-serif;font-size:clamp(50px,9.5vw,148px);line-height:.92;font-weight:700;letter-spacing:-.035em}
.eng .dhero .row{display:flex;align-items:center;gap:26px;margin-top:46px;flex-wrap:wrap;visibility:hidden;padding-bottom:78px;}
.eng .playbtn{display:inline-flex;align-items:center;gap:14px;background:none;border:none;color:#fff;cursor:pointer;font-family:'Stack Sans Text',sans-serif;font-size:15px}
.eng .playbtn .circ{width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;transition:.25s}
.eng .playbtn:hover .circ{background:var(--pink);border-color:var(--pink)}
.eng .playbtn .circ svg{width:16px;height:16px;fill:#fff;margin-left:2px}
.eng .dhero .about{color:#fff;font-size:15px;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px}
.eng .dhero .about:hover{color:var(--pink);border-color:var(--pink)}
/* two-column hero: headline left, full logo right (centred to the headline) */
.eng .herogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:center;gap:var(--s-5)}
.eng .herogrid h1{font-size:clamp(44px,8vw,112px)}
.eng .herologo{display:flex;align-items:center;justify-content:center}
.eng .herologo img{width:100%;max-width:180px;height:auto}
@media(max-width:980px){
  .eng .herogrid{grid-template-columns:1fr;gap:0}
  .eng .herologo{display:none}
  .eng .herogrid h1{font-size:clamp(40px,12vw,148px)}
}
/* mobile-only full logo shown between the hero and the first section */
.eng .mobilelogo{display:none}
@media(max-width:980px){
  .eng .mobilelogo{display:flex;justify-content:center;padding:var(--s-5) 22px 4px}
  .eng .mobilelogo img{width:62%;max-width:180px;height:auto}
}

/* ---------- interior page hero ---------- */
.eng .phero{padding:var(--s-7) 0 var(--s-6)}
.eng .phero .crumb{font-family:'Stack Sans Text',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.eng .phero .crumb a:hover{color:var(--pink)}
.eng .phero h1{font-family:'Stack Sans Text',sans-serif;font-size:clamp(40px,6.5vw,86px);font-weight:700;letter-spacing:-.03em;line-height:.98;margin:20px 0 0}
.eng .phero .lede{margin-top:26px;font-size:clamp(18px,2.1vw,22px);line-height:1.55;color:var(--muted);max-width:760px}

/* ---------- generic section ---------- */
.eng .dsec{padding:var(--s-7) 0}
.eng .dsec.tight{padding:var(--s-6) 0}
.eng .dsec .lab{margin-bottom:var(--s-3)}
.eng .dsec h2{font-family:'Stack Sans Text',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.06;max-width:980px}
.eng .dsec .intro{margin-top:24px;font-size:18px;line-height:1.62;color:var(--muted);max-width:680px}
.eng .dsec .intro-list{list-style:none;margin-top:16px;max-width:680px}
.eng .dsec .intro-list li{position:relative;padding-left:24px;font-size:18px;line-height:1.55;color:var(--muted);margin-top:12px}
.eng .dsec .intro-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.eng .dsec .head-link{display:inline-flex;gap:8px;margin-top:var(--s-4);font-weight:600;font-size:14.5px}
.eng .dsec .head-link:hover{color:var(--pink)}

/* prose */
.eng .prose{max-width:760px}
.eng .prose p{font-size:17px;line-height:1.72;color:var(--muted);margin-top:22px}
.eng .prose p:first-child{margin-top:0}
.eng .prose p.big{font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:#1a1a20}

/* ---------- work cards ---------- */
.eng .works{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:var(--s-5)}
@media(max-width:820px){.eng .works{grid-template-columns:1fr}}
.eng .wcard{cursor:pointer}
.eng .wcard .img{aspect-ratio:16/10;border-radius:4px;overflow:hidden;position:relative;background:#0b0b0d}
.eng .wcard .img img{width:100%;height:100%;object-fit:cover;transition:.6s cubic-bezier(.2,.7,.2,1)}
.eng .wcard:hover .img img{transform:scale(1.05)}
.eng .wcard .tags{display:flex;gap:8px;margin:20px 0 12px;flex-wrap:wrap}
.eng .wcard .tags span{font-family:'Stack Sans Text',sans-serif;font-size:11px;text-transform:lowercase;color:var(--muted-2);border:1px solid #e0e0db;border-radius:999px;padding:4px 12px}
.eng .wcard h3{font-family:'Stack Sans Text',sans-serif;font-size:23px;font-weight:600;line-height:1.26;transition:.2s}
.eng .wcard:hover h3{color:var(--pink)}
.eng .wcard .client{margin-top:9px;font-size:14px;font-weight:200;color:var(--muted-2)}

/* ---------- difference / services 4-up ---------- */
.eng .diff{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:var(--s-5)}
@media(max-width:720px){.eng .diff{grid-template-columns:1fr}}
.eng .diff .cell{padding:var(--s-5) 40px var(--s-5) 0;border-bottom:1px solid var(--line)}
.eng .diff .cell:nth-child(odd){padding-right:48px}
.eng .diff .cell:nth-child(even){padding-left:48px;border-left:1px solid var(--line)}
@media(max-width:720px){.eng .diff .cell:nth-child(even){padding-left:0;border-left:none}}
.eng .diff .n{font-family:'Stack Sans Text',sans-serif;font-size:12px;color:var(--pink)}
.eng .diff h3{font-family:'Stack Sans Text',sans-serif;font-size:22px;font-weight:600;margin:14px 0 12px}
.eng .diff p{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:460px}

/* ---------- statement ---------- */
.eng .statement h2{font-family:'Stack Sans Text',sans-serif;font-size:clamp(30px,4.8vw,58px);font-weight:700;line-height:1.04;letter-spacing:-.028em;max-width:1040px}
.eng .statement .cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-5);max-width:920px}
@media(max-width:720px){.eng .statement .cols{grid-template-columns:1fr;gap:22px}}
.eng .statement .cols p{font-size:16px;line-height:1.68;color:var(--muted)}
.eng .statement .colstack p + p{margin-top:18px}

/* ---------- dual image band ---------- */
.eng .dual{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.eng .dual{grid-template-columns:1fr}}
.eng .dual img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.eng .dual-text{max-width:720px;margin:var(--s-5) auto 0;text-align:center}
.eng .dual-text h3{font-family:'Stack Sans Text',sans-serif;font-size:clamp(24px,3.2vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.eng .dual-text p{margin-top:20px;font-size:16px;line-height:1.65;color:var(--muted)}

/* ---------- greyscale photography ----------
   Photography sits in greyscale and resolves to full colour on hover, matching the
   behaviour the logo walls already have (.clogos / .clientgrid, further down).
   Opt a page in with class="photos-gs" on <body>. Brand marks are deliberately NOT
   included — this replaces a blanket img{filter:grayscale(1)} that also greyed the
   nav, hero, mobile and footer logos and had no hover state at all.
   .wcard/.pcard images inherit their filter transition from the .6s rule on the
   card image itself; .dual images need their own. */
.eng.photos-gs .wcard .img img,
.eng.photos-gs .pcard .img img{filter:grayscale(1)}
.eng.photos-gs .dual img{filter:grayscale(1);transition:filter .5s ease}
.eng.photos-gs .wcard:hover .img img,
.eng.photos-gs .pcard:hover .img img,
.eng.photos-gs .dual img:hover{filter:none}
/* touch devices have no hover, so never leave them stranded in greyscale */
@media(hover:none){
  .eng.photos-gs .wcard .img img,
  .eng.photos-gs .pcard .img img,
  .eng.photos-gs .dual img{filter:none}
}
.eng .dual-text a{display:inline-flex;gap:8px;margin-top:26px;font-weight:600;font-size:14.5px}
.eng .dual-text a:hover{color:var(--pink)}

/* ---------- feature cards row ---------- */
.eng .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
@media(max-width:820px){.eng .feat{grid-template-columns:1fr}}
.eng .fcard{border:1px solid var(--line);border-radius:4px;padding:32px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;transition:.3s;cursor:pointer}
.eng .fcard:hover{background:#0b0b0d;border-color:#0b0b0d;color:#fff}
.eng .fcard h3{font-family:'Stack Sans Text',sans-serif;font-size:21px;font-weight:600;line-height:1.25;margin-top:18px}
.eng .fcard .go{font-family:'Stack Sans Text',sans-serif;font-size:12px;color:var(--pink)}
.eng .fcard:hover .mono{color:var(--pink)}

/* ---------- partner bios ---------- */
.eng .bio{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;padding:64px 0;border-top:1px solid var(--line);align-items:start}
@media(max-width:820px){.eng .bio{grid-template-columns:1fr;gap:26px}}
.eng .bio .photo{aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:linear-gradient(135deg,#0b0b0d,var(--pink))}
.eng .bio .photo img{width:100%;height:100%;object-fit:cover}
.eng .bio .role{font-family:'Stack Sans Text',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.eng .bio h2{font-family:'Stack Sans Text',sans-serif;font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;margin:12px 0 6px}
.eng .bio .lead{font-size:18px;line-height:1.55;color:#1a1a20;margin-top:14px}
.eng .bio p{font-size:15.5px;line-height:1.7;color:var(--muted);margin-top:18px}
/* partners — text only, co-founders side by side */
.eng .partners-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:var(--s-5)}
@media(max-width:820px){.eng .partners-grid{grid-template-columns:1fr;gap:var(--s-5)}}
.eng .partner .role{font-family:'Stack Sans Text',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.eng .partner h3{font-family:'Stack Sans Text',sans-serif;font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.02em;margin:10px 0 0}
.eng .partner .lead{font-size:18px;line-height:1.55;color:#1a1a20;margin-top:14px}
.eng .partner p{font-size:15.5px;line-height:1.7;color:var(--muted);margin-top:16px}

/* ---------- services offering list ---------- */
.eng .offer{border-top:1px solid var(--line);margin-top:var(--s-5)}
.eng .offer .row{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline}
@media(max-width:640px){.eng .offer .row{grid-template-columns:1fr;gap:8px}}
.eng .offer .n{font-family:'Stack Sans Text',sans-serif;font-size:13px;color:var(--pink)}
.eng .offer h3{font-family:'Stack Sans Text',sans-serif;font-size:clamp(20px,2.6vw,28px);font-weight:600;letter-spacing:-.01em}

/* ---------- projects grid + pop-ups ---------- */
.eng .pgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-3);margin-top:var(--s-5)}
@media(max-width:980px){.eng .pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.eng .pgrid{grid-template-columns:1fr}}
.eng .pcard{cursor:pointer;text-align:left;background:none;border:none;font-family:inherit;color:inherit;padding:0;display:flex;flex-direction:column;align-items:stretch}
.eng .pcard .img{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:transparent;position:relative}
.eng .pcard .img img{width:100%;height:100%;object-fit:cover;transition:.6s cubic-bezier(.2,.7,.2,1)}
.eng .pcard:hover .img img{transform:scale(1.05)}
.eng .pcard .img .plus{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;background:rgba(11,11,13,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;transition:.25s}
.eng .pcard:hover .img .plus{background:var(--pink)}
.eng .pcard .yr{font-family:'Stack Sans Text',sans-serif;font-size:12px;color:var(--pink);margin:18px 0 8px}
.eng .pcard h3{font-family:'Stack Sans Text',sans-serif;font-size:20px;font-weight:600;line-height:1.28;transition:.2s}
.eng .pcard:hover h3{color:var(--pink)}

/* modal */
.eng .modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.eng .modal.open{display:flex}
.eng .modal .veil{position:absolute;inset:0;background:rgba(11,11,13,.62);backdrop-filter:blur(4px)}
.eng .modal .box{position:relative;z-index:2;background:#fff;border-radius:6px;max-width:680px;width:100%;max-height:86vh;overflow:auto;padding:var(--s-5)}
.eng .modal .box .yr{font-family:'Stack Sans Text',sans-serif;font-size:12px;color:var(--pink);text-transform:uppercase;letter-spacing:.06em}
.eng .modal .box h3{font-family:'Stack Sans Text',sans-serif;font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;margin:14px 0 18px;line-height:1.1}
.eng .modal .box p{font-size:16px;line-height:1.7;color:var(--muted);margin-top:16px}
.eng .modal .box .x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:.2s}
.eng .modal .box .x:hover{background:#0b0b0d;color:#fff;border-color:#0b0b0d}

/* ---------- about ---------- */
.about.eng .dsec.pt-0{padding:0 0 84px 0}

/* ---------- clients ---------- */
.eng .clogos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:40px}
.eng .clogos div{/*height:88px;*/border-radius:4px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;padding:16px;}
.eng .clogos div img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(100%);opacity:.6;transition:.25s}
.eng .clogos div:hover img{filter:none;opacity:1}

/* ---------- contact ---------- */
.eng .contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
@media(max-width:820px){.eng .contact{grid-template-columns:1fr;gap:36px}}
.eng .cinfo h3{font-family:'Stack Sans Text',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin:26px 0 8px}
.eng .cinfo h3:first-child{margin-top:0}
.eng .cinfo a,.eng .cinfo p{font-size:17px;line-height:1.5;color:#1a1a20}
.eng .cinfo a:hover{color:var(--pink)}
.eng form .field{margin-bottom:20px}
.eng form label{display:block;font-family:'Stack Sans Text',sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.eng form input,.eng form textarea{width:100%;border:1px solid var(--line);border-radius:3px;padding:14px 16px;font-family:'Stack Sans Text',sans-serif;font-size:15px;color:#0b0b0d;background:#fff;transition:.2s}
.eng form input:focus,.eng form textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.eng form textarea{resize:vertical;min-height:130px}
.eng form button{background:var(--pink);color:#fff;border:none;padding:15px 34px;border-radius:2px;font-weight:600;font-size:15px;cursor:pointer;transition:.25s}
.eng form button:hover{transform:translateY(-2px)}

/* ---------- dark CTA ---------- */
.eng .dcta{background:#1a1a1a;color:#fff;padding:var(--s-8) 40px;text-align:center}
.eng .dcta .mono{color:var(--pink);margin-bottom:var(--s-3)}
.eng .dcta h2{font-family:'Stack Sans Text',sans-serif;font-size:clamp(38px,6.4vw,92px);font-weight:700;letter-spacing:-.032em;line-height:.97}
.eng .dcta a{display:inline-block;margin-top:var(--s-4);background:var(--pink);color:#fff;padding:18px 42px;border-radius:2px;font-weight:600;font-size:15.5px;transition:.25s}
.eng .dcta a:hover{transform:translateY(-3px)}

/* ---------- footer ---------- */
.eng .dfoot{background:#1a1a1a;color:#fff;padding:var(--s-7) 0 var(--s-5)}
.eng .dfoot .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){.eng .dfoot .top{grid-template-columns:1fr 1fr}}
.eng .dfoot .brand img{height:64px;width:auto;margin-bottom:20px}
.eng .dfoot .brand p{font-size:14px;line-height:1.6;color:#9a9aa2;max-width:300px}
.eng .dfoot .socials{display:flex;gap:14px;margin-top:22px}
.eng .dfoot .socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:#cfcfd6;transition:.2s;font-family:'Stack Sans Text',sans-serif}
.eng .dfoot .socials a:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.eng .dfoot h5{font-family:'Stack Sans Text',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px}
.eng .dfoot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.eng .dfoot ul a{font-size:14px;color:#cfcfd6;transition:.2s}
.eng .dfoot ul a:hover{color:var(--pink)}
.eng .dfoot .bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:var(--s-6);padding-top:var(--s-3);border-top:1px solid rgba(255,255,255,.12);color:var(--muted-2);font-size:13px}
.eng .motionbtn{display:inline-flex;align-items:center;gap:12px;background:none;border:none;color:#cfcfd6;cursor:pointer;font-family:'Stack Sans Text',sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.eng .motionbtn .sw{width:42px;height:22px;border-radius:999px;background:var(--pink);position:relative;transition:.25s}
.eng .motionbtn .sw .kn{position:absolute;top:2px;left:22px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s}
.eng .motionbtn.off .sw{background:#3a3a42}
.eng .motionbtn.off .sw .kn{left:2px}

/* motion off */
.eng.motion-off *{animation:none !important;transition:none !important}
.eng.motion-off .reveal{opacity:1 !important;transform:none !important}
.eng.motion-off .rword > span{transform:none !important}
.eng.motion-off .clogos.marquee .mtrack{animation:none !important}

/* ============================================================
   FINAL TOUCHES / ENHANCEMENTS (01–10)
   ============================================================ */

/* 10 — selection + focus polish */
::selection{background:var(--pink);color:#fff}
.eng a:focus-visible,.eng button:focus-visible,.eng input:focus-visible,.eng textarea:focus-visible{
  outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}

/* 07 — condensing sticky nav (wrapper injected by JS) — inverted dark bar */
.eng .navbar{position:absolute;width:100vw;/*position:sticky*/;top:0;z-index:60;background:/*#1a1a1a*/transparent;transition:box-shadow .3s ease, background .3s ease}
.eng .navbar.scrolled{background:rgba(26,26,26,.94);backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(0,0,0,.32)}
.eng .navbar .links a{color:#fff}
.eng .navbar .links a:hover,.eng .navbar .links a.current{color:var(--pink)}
.eng .navbar .navcta{border-color:#fff;color:#fff}
.eng .navbar .navcta:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.eng .navbar nav{transition:padding .3s ease}
.eng .navbar.scrolled nav{padding:12px 0}
.eng .navbar nav .logo img{transition:height .3s ease}
.eng .navbar.scrolled nav .logo img{height:30px}

/* 01 — headline split-reveal (rwords built by JS, animated by CSS) */
.eng .rword{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.15em}
.js .eng .rword > span{display:inline-block;transform:translateY(115%);animation:rwordUp .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rwordUp{to{transform:translateY(0)}}

/* 02 — typewriter caret on mono labels */
.eng .tw-caret{display:inline-block;width:.55ch;height:1em;background:var(--pink);vertical-align:-.14em;margin-left:1px;animation:dblink 3.05s steps(2) infinite}

/* 03 — magnetic buttons */
.eng .playbtn,.eng .navcta,.eng .dcta a{will-change:transform}

/* 04 — count-up stat band */
.eng .statband{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}
@media(max-width:640px){.eng .statband{grid-template-columns:1fr}}
.eng .statband .s{padding:var(--s-5) 16px;text-align:center}
.eng .statband .s + .s{border-left:1px solid var(--line)}
@media(max-width:640px){.eng .statband .s + .s{border-left:none;border-top:1px solid var(--line)}}
.eng .statband .v{font-family:'Stack Sans Text',sans-serif;font-size:clamp(40px,6vw,70px);font-weight:700;letter-spacing:-.02em;line-height:1}
.eng .statband .v i{color:var(--pink);font-style:normal}
.eng .statband .l{font-family:'Stack Sans Text',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-top:14px}

/* 05 — client-logo marquee (built by JS from .clogos).
   Full-bleed: breaks out of the .wrap container to span the whole viewport width.
   (Requires overflow-x:clip on the body, set on body.eng, to avoid a h-scrollbar.) */
.eng .clogos.marquee{display:block;overflow:hidden;width:100vw;
  margin:48px calc(50% - 50vw) 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.eng .clogos.marquee .mtrack{display:flex;gap:22px;width:max-content;margin:0;animation:cmarq 36s linear infinite}
.eng .clogos.marquee:hover .mtrack{animation-play-state:paused}
@keyframes cmarq{to{transform:translateX(-50%)}}
.eng .clogos.marquee .mtrack > div{height:150px;min-width:300px;border:1px solid var(--line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;background:#fff;padding:22px;flex:0 0 auto}
.eng .clogos.marquee .mtrack img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(100%);opacity:.72;transition:.25s}
.eng .clogos.marquee .mtrack > div:hover img{filter:none;opacity:1}

/* 05b — static clients grid (clients page): all logos visible, zoom + colour on hover */
/* 4 tiles per row. The tile's HEIGHT is what sizes a logo here, not its width: the artwork
   is 2.2:1, so in any box wider than ~2.2x its height it is height-bound and extra width is
   just gutter. Hence 150px tall with tighter padding — widening alone changes nothing. */
.eng .clientgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:40px 0}
.eng .clientgrid > div{height:150px;border:1px solid var(--line);border-radius:4px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
.eng .clientgrid > div img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(100%);opacity:.72;transition:filter .3s ease,opacity .3s ease}
.eng .clientgrid > div:hover{transform:scale(1.5);z-index:6;box-shadow:0 22px 55px rgba(11,11,13,.22);border-color:#e0e0db}
.eng .clientgrid > div:hover img{filter:none;opacity:1}
@media(max-width:600px){
  .eng .clientgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:32px 4px 0}
  .eng .clientgrid > div:hover{transform:scale(1.3)}
}

/* 06 — work / project image parallax */
.eng .wcard .img img,.eng .pcard .img img{will-change:transform}

/* 08 — refined project modal (overrides the base show/hide above) */
.eng .modal{display:flex;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s ease, visibility 0s linear .3s}
.eng .modal.open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .3s ease}
.eng .modal .veil{opacity:0;transition:opacity .35s ease}
.eng .modal.open .veil{opacity:1}
.eng .modal .box{transform:scale(.92) translateY(10px);transition:transform .42s cubic-bezier(.2,.9,.3,1.1)}
.eng .modal.open .box{transform:none}
.eng .modal .box .yr,.eng .modal .box h3,.eng .modal .box [data-modal-body]{
  opacity:0;transform:translateY(12px);transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.eng .modal.open .box .yr{transition-delay:.12s}
.eng .modal.open .box h3{transition-delay:.2s}
.eng .modal.open .box [data-modal-body]{transition-delay:.28s}
.eng .modal.open .box .yr,.eng .modal.open .box h3,.eng .modal.open .box [data-modal-body]{opacity:1;transform:none}

/* 09 — page transition. Overlay lives on <html>.
   EXIT  = video fades in over the leaving page, plays, then fades to black, navigate.
   ENTER = new page fades up from that same black (no video → intro animations show).
   Video only ever plays on EXIT, so there's no exit/enter video cut, and the
   black→black join across the navigation gap is seamless.
   To REVERT to the white→brand-gradient fade: comment out the .pvideo + entering
   rules below and uncomment the gradient block underneath (also swap the JS
   handler). The html gradient background + body{min-height} are already in place. */
.pvideo{position:fixed;inset:0;z-index:9999;background:#0b0b0d;opacity:0;pointer-events:none}
.pvideo video{width:100%;height:100%;object-fit:cover;opacity:0}
.pvideo::after{content:"";position:absolute;inset:0;background:rgba(11,11,13,.28)}

/* EXIT: overlay covers (black); video fades up, plays, fades back to black, then we navigate */
.pvideo.exiting{animation:pvExit .9s ease forwards}
@keyframes pvExit{from{opacity:0}25%{opacity:1}to{opacity:1}}
.pvideo.exiting video{animation:exitVid .9s ease forwards}
@keyframes exitVid{0%{opacity:0}28%{opacity:1}68%{opacity:1}100%{opacity:0}}

/* ENTER: content fades up from black (held by .pt-in until the fade completes) */
@keyframes pageEnter{from{opacity:0}to{opacity:1}}
body.eng.entering{animation:pageEnter .7s ease forwards}
/* no-flash guard: a tiny inline <head> script adds .pt-in when arriving via a
   transition, so the new page is hidden (over a dark backdrop matching the
   video) until JS takes over — prevents a flash of the finished page. */
html.pt-in{background:#0b0b0d}
html.pt-in body.eng{opacity:0}

/* 09 (alternative) — white→brand-gradient fade. Uncomment to use instead.
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body.eng{animation:pageIn .45s ease}
body.eng.leaving{opacity:0;transition:opacity .34s ease}
*/

/* 10 — cursor accent (injected by JS): replaces the native cursor */
.eng.cursor-active,.eng.cursor-active *{cursor:none !important}
.eng .eng-cursor{position:fixed;top:0;left:0;width:28px;height:28px;border:1.5px solid var(--pink);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:9998;opacity:0;
  transition:opacity .25s ease, width .2s ease, height .2s ease, background .2s ease}
.eng .eng-cursor::after{content:'';position:absolute;top:50%;left:50%;width:4px;height:4px;border-radius:50%;
  background:var(--pink);transform:translate(-50%,-50%)}
.eng .eng-cursor.show{opacity:1}
.eng .eng-cursor.big{width:54px;height:54px;background:rgba(var(--accent-rgb),.12)}
@media(hover:none){.eng .eng-cursor{display:none}}

/* reduced-motion: respect user preference */
@media (prefers-reduced-motion: reduce){
  .eng *,.eng *::before,.eng *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .eng .clogos.marquee .mtrack{animation:none !important}
  .eng .rword > span{transform:none !important}
  .eng .eng-cursor{display:none !important}
}

/* ============================================================
   MOBILE NAV (hamburger) + RESPONSIVE REFINEMENTS
   ============================================================ */

/* hamburger toggle (injected by JS into the nav row; shown at every breakpoint).
   Sits inside the nav so it aligns to the container edge, not the screen edge.
   Negative margin keeps the 44px hit area without inflating the 40px nav row. */
.eng .navtoggle{display:flex;position:relative;z-index:2;
  width:44px;height:44px;margin:-2px 0;border:none;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0}
/* Bar colour is set explicitly per context (NOT mix-blend — the toggle lives inside
   the navbar's own stacking context, so blending against the page behind is unreliable):
   white by default (over the dark home hero), ink on the white interior pages,
   white again while the dark full-screen menu is open. */
.eng .navtoggle span{background:#fff}
body.eng:not(:has(.dhero)) .navtoggle span{background:#0b0b0d}
body.eng.menu-open .navtoggle span{background:#fff}
/* while the full-screen menu is open, lift the nav above it so the X stays clickable,
   and neutralise the interior-page logo invert so the mark reads on the dark menu */
.eng.menu-open .navbar{z-index:90}
body.eng.menu-open nav .logo img{filter:none}
.eng .navtoggle span{display:block;width:24px;height:2px;background:#fff;transition:transform .3s ease, opacity .2s ease, background .2s ease}
.eng .navtoggle.open span{background:#fff}
.eng .navtoggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.eng .navtoggle.open span:nth-child(2){opacity:0}
.eng .navtoggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* full-screen mobile menu (injected by JS) */
.eng .mobilemenu{position:fixed;inset:0;z-index:80;background:#0b0b0d;color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s ease, visibility 0s linear .35s}
.eng .mobilemenu.open{opacity:1;visibility:visible;transition:opacity .35s ease}
.eng .mobilemenu .mm-inner{display:flex;flex-direction:column;gap:4px;text-align:center;padding:24px}
.eng .mobilemenu a{font-family:'Stack Sans Text',sans-serif;font-size:clamp(28px,8vw,42px);font-weight:700;letter-spacing:-.02em;
  color:#fff;padding:8px 0;opacity:0;transform:translateY(16px);transition:color .2s ease, opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.eng .mobilemenu.open a{opacity:1;transform:none}
.eng .mobilemenu a:hover,.eng .mobilemenu a.current{color:var(--pink)}
.eng .mobilemenu .mm-cta{margin-top:22px;font-family:'Stack Sans Text',sans-serif;font-size:14px;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;border:1.5px solid var(--pink);color:var(--pink);border-radius:2px;padding:14px 28px}
.eng .mobilemenu .mm-cta:hover{background:var(--pink);color:#fff}
body.menu-open{overflow:hidden}

@media(max-width:900px){
  .eng .navbar.scrolled nav .logo img{height:34px}
}

/* spacing pass for phones */
@media(max-width:600px){
  .eng .wrap{padding:0 22px}
  .eng .dhero .inner{padding:0 22px 44px}
  .eng .dhero h1{font-size:clamp(40px,12vw,148px)}
  .eng .dsec{padding:var(--s-6) 0}
  .eng .dsec.tight{padding:var(--s-5) 0}
  .eng .bio{padding:var(--s-5) 0}
  .eng .statband .s{padding:var(--s-4) 12px}
  .eng .dcta{padding:var(--s-7) 22px}
  .eng .modal{padding:16px}
  .eng .modal .box{padding:30px 22px}
  .eng .dfoot{padding:var(--s-6) 0 var(--s-5)}
}
@media(max-width:520px){
  .eng .dfoot .top{grid-template-columns:1fr;gap:30px}
}

/* ============================================================
   HOMEPAGE A/B SAMPLES (home-a.html / home-b.html)
   New classes only — the live pages are untouched.
   ============================================================ */

/* full-bleed breakouts use 100vw; clip so they can never cause a horizontal scrollbar */
.eng.sample{overflow-x:clip}

/* dark color-blocked band around the difference 4-up */
.eng .diffband{background:#101116;color:#eef0f4;padding:112px 0}
.eng .diffband .lab{margin-bottom:22px}
.eng .diffband h2{font-family:'Stack Sans Text',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.06;max-width:980px;color:#fff}
.eng .diffband .diff{border-top:1px solid rgba(255,255,255,.14)}
.eng .diffband .diff .cell{border-bottom:1px solid rgba(255,255,255,.14)}
.eng .diffband .diff .cell:nth-child(even){border-left:1px solid rgba(255,255,255,.14)}
@media(max-width:720px){.eng .diffband .diff .cell:nth-child(even){border-left:none}}
.eng .diffband .diff h3{color:#fff}
.eng .diffband .diff p{color:rgba(238,240,244,.62)}

/* full-bleed variant of the dual image band */
.eng .dual.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);gap:14px}
.eng .dual.bleed img{border-radius:0;aspect-ratio:16/9}

/* three-up flagship row (smaller cards, NEP + Al Jadaara lead) */
.eng .works.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.eng .works.three{grid-template-columns:1fr}}

/* hero pause pill — replaces the showreel-style play circle */
.eng .pausebtn{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:rgba(255,255,255,.88);cursor:pointer;font-family:'Stack Sans Text',sans-serif;font-size:12px;letter-spacing:.07em;text-transform:uppercase;padding:11px 20px;transition:.25s}
.eng .pausebtn:hover{border-color:#fff;color:#fff}
.eng .pausebtn svg{width:11px;height:11px;fill:currentColor}

/* trimmed footer: one link column + contact details */
.eng .dfoot .top.slim{grid-template-columns:1.5fr 1fr 1.2fr}
@media(max-width:820px){.eng .dfoot .top.slim{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.eng .dfoot .top.slim{grid-template-columns:1fr}}
.eng .dfoot ul li{font-size:14px;color:#cfcfd6;line-height:1.6}

/* ---------- back to top ----------
   Injected by engineered.js on every page; fades in once you are a screen or so down.
   Sits below the mobile menu (z-index 80) and hides outright while it is open. */
.eng .totop{position:fixed;right:26px;bottom:26px;z-index:70;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(14,15,19,.86);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,background .25s ease,border-color .25s ease}
.eng .totop.show{opacity:1;visibility:visible;transform:none}
.eng .totop:hover{background:var(--pink);border-color:var(--pink)}
.eng .totop svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eng .totop:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
body.eng.menu-open .totop{opacity:0;visibility:hidden}
@media(max-width:600px){.eng .totop{right:16px;bottom:16px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.eng .totop{transform:none;transition:opacity .2s ease,visibility .2s}}