/* Rojak Bytes — Concept 3 "In Motion"
   Clean corporate: white + black, red accent, Montserrat only.
   Motion only switches on when html has .motion (JS running + no prefers-reduced-motion + no ?motion=0).
   1.1.0: nothing pins the scroll and there is no page-change curtain. Reveals hide content only once site.js
   has added html.rv, so if the script fails nothing stays hidden; fades are .3s.
   1.2.0: no booking form. The contact sheet, the big WhatsApp / email options, the "Not ready yet?" block, the
   service, contact and privacy pages, the EN | BM switch. Small text on the CI red is black (4.5:1 and up).
   1.3.0 (Mirzan, 7 Nov 2026): soft CI pastel background (light blue #CAFFFF and salmon #F7BCC1 washes that drift);
   every menu item in a smaller top bar that folds into the hamburger on scroll; the hero R carries the ROJAK / BYTES
   wordmark on the title's row; play-button icons in the ticker. Salmon stays at or under 50% so grey text keeps 4.5:1.
   1.4.0 (Mirzan, 7 Nov 2026): a 35% bigger hero R with ROJAK BYTES on one line under it, smaller hero buttons, an
   icon per service in the ticker, slow steady marquees, photo service cards with "More info", exact view counts per
   platform under every video card (smaller cards instead of the plain list), round social icons, a still contact
   strip at the top of the footer.
   1.4.1 (Mirzan, 7 Nov 2026): the hero R at 40% of the page width, "As of today" on the counter, the 1.3.0 ticker
   icons back, a smaller centred "As featured in", one page with no grey bands between sections, a soft pixel
   gradient background (.bgpix), a glitch instead of the bubble on the R, round social icons on the contact page and
   a new Services page (practice tiles, photo cards, the public affairs panel). */

:root{
  --pixg:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2080%20100%27%20preserveAspectRatio=%27none%27%3E%3Crect%20x=%2730%27%20y=%270%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.37%27/%3E%3Crect%20x=%2740%27%20y=%270%27%20width=%279%27%20height=%279%27%20fill=%27%23CAFFFF%27%20opacity=%270.53%27/%3E%3Crect%20x=%2760%27%20y=%270%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.55%27/%3E%3Crect%20x=%2770%27%20y=%270%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.65%27/%3E%3Crect%20x=%2730%27%20y=%2710%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.52%27/%3E%3Crect%20x=%2760%27%20y=%2710%27%20width=%279%27%20height=%279%27%20fill=%27%232a6f73%27%20opacity=%270.37%27/%3E%3Crect%20x=%2770%27%20y=%2710%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.49%27/%3E%3Crect%20x=%2740%27%20y=%2720%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.46%27/%3E%3Crect%20x=%2770%27%20y=%2720%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.51%27/%3E%3Crect%20x=%2750%27%20y=%2730%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.48%27/%3E%3Crect%20x=%2760%27%20y=%2730%27%20width=%279%27%20height=%279%27%20fill=%27%232a6f73%27%20opacity=%270.57%27/%3E%3Crect%20x=%2770%27%20y=%2730%27%20width=%279%27%20height=%279%27%20fill=%27%232a6f73%27%20opacity=%270.48%27/%3E%3Crect%20x=%270%27%20y=%2740%27%20width=%279%27%20height=%279%27%20fill=%27%23ED1C24%27%20opacity=%270.52%27/%3E%3Crect%20x=%2710%27%20y=%2740%27%20width=%279%27%20height=%279%27%20fill=%27%23F7BCC1%27%20opacity=%270.44%27/%3E%3Crect%20x=%2770%27%20y=%2740%27%20width=%279%27%20height=%279%27%20fill=%27%2366F8FF%27%20opacity=%270.39%27/%3E%3Crect%20x=%270%27%20y=%2750%27%20width=%279%27%20height=%279%27%20fill=%27%23F7BCC1%27%20opacity=%270.4%27/%3E%3Crect%20x=%2720%27%20y=%2750%27%20width=%279%27%20height=%279%27%20fill=%27%23ED1C24%27%20opacity=%270.46%27/%3E%3Crect%20x=%270%27%20y=%2760%27%20width=%279%27%20height=%279%27%20fill=%27%23F7BCC1%27%20opacity=%270.57%27/%3E%3Crect%20x=%2710%27%20y=%2770%27%20width=%279%27%20height=%279%27%20fill=%27%23ED1C24%27%20opacity=%270.37%27/%3E%3Crect%20x=%2720%27%20y=%2780%27%20width=%279%27%20height=%279%27%20fill=%27%23a8141a%27%20opacity=%270.64%27/%3E%3Crect%20x=%2730%27%20y=%2780%27%20width=%279%27%20height=%279%27%20fill=%27%23a8141a%27%20opacity=%270.44%27/%3E%3Crect%20x=%270%27%20y=%2790%27%20width=%279%27%20height=%279%27%20fill=%27%23ED1C24%27%20opacity=%270.77%27/%3E%3Crect%20x=%2710%27%20y=%2790%27%20width=%279%27%20height=%279%27%20fill=%27%23ED1C24%27%20opacity=%270.54%27/%3E%3Crect%20x=%2730%27%20y=%2790%27%20width=%279%27%20height=%279%27%20fill=%27%23ED1C24%27%20opacity=%270.49%27/%3E%3C/svg%3E"); /* 1.4.1: the logo pixel gradient (cyan top right, red bottom left), for cards and panels */
  --ink:#0a0a0a; --paper:#fff; --soft:#f3f3f0; --soft2:#e9e9e5; --line:#e2e2de; --muted:#5f5f5f;
  --red:#ED1C24; --red-t:#C8141B; --cyan:#66F8FF;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --pad:clamp(16px,4vw,56px); --max:1400px; --hdr:84px; --r:24px;
  --sky:#CAFFFF; --salmon:#F7BCC1;
  --play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2.6.5 12.9 6.6c1.1.7 1.1 2.1 0 2.8L2.6 15.5C1.5 16.2.2 15.4.2 14.1V1.9C.2.6 1.5-.2 2.6.5Z'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{background:var(--paper)}
body{margin:0;background:transparent;color:var(--ink);font:400 16px/1.65 Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;font-weight:700}
.skip:focus{top:12px}
::selection{background:var(--red);color:#fff}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--red);flex:none}
.dark .eyebrow,.on-ink .eyebrow{color:#a9a9a9}
.d1{font-size:clamp(min(48px,13.5vw),10.5vw,176px);font-weight:900;line-height:.86;letter-spacing:-.045em;text-transform:uppercase}
.d2{font-size:clamp(40px,7.4vw,124px);font-weight:900;line-height:.88;letter-spacing:-.04em;text-transform:uppercase}
.h2{font-size:clamp(30px,4.4vw,64px);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.h3{font-size:clamp(20px,2vw,28px);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;font-weight:500;color:#2c2c2c;max-width:40em}
.dark .lede,.on-ink .lede{color:#cfcfcf}
.red{color:var(--red)}
.src{font-size:12.5px;color:var(--muted);line-height:1.5}
.dark .src,.on-ink .src{color:#9a9a9a}
.out{-webkit-text-stroke:2px currentColor;color:transparent}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(72px,9vw,140px) 0}
.sec.tight{padding:clamp(56px,7vw,110px) 0}
/* 1.4.2 (Mirzan, 7 Nov 2026: "awkward space between ..."): since 1.4.1 the sections are see-through, so the space
   under one section and the space over the next added up to a 230-260 px empty strip. When two light sections
   meet, the second one starts close to the line, so the gap is only the first one's space. Dark bands keep theirs. */
.sec:not(.on-ink) + .sec:not(.on-ink),
:is(.reel,.svc,.feat3,.sec:not(.on-ink)) + :is(.svc,.cta,.reel){padding-top:clamp(10px,1.4vw,22px)}
.sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(36px,5vw,72px)}
.sec-h > div{max-width:860px;display:grid;gap:18px}
.on-ink{background:var(--ink);color:#fff}
.on-soft{background:transparent} /* 1.4.1 (Mirzan: "It should look like one page"): no grey bands, the page background runs through */

/* ---------- buttons, tags, links ---------- */
.btn{--b:var(--ink);--f:#fff;position:relative;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 10px 0 24px;border-radius:99px;background:var(--b);color:var(--f);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);border-radius:inherit;transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn .ar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--f);color:var(--b);transition:transform .45s var(--ease),background .35s,color .35s}
.btn:hover .ar{transform:rotate(-45deg);background:#fff;color:var(--red)}
.btn .ar svg{width:14px;height:14px}
.btn.light{--b:#fff;--f:var(--ink)}
.btn.light:hover{color:#fff}
.btn.ghost{--b:transparent;--f:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost .ar{background:var(--ink);color:#fff}
.btn.ghost:hover{color:#fff;box-shadow:none}
.btn.ghost.l{--f:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn.ghost.l .ar{background:#fff;color:var(--ink)}
.btn.lg{min-height:60px;font-size:14px;padding-left:28px}
.btn.lg .ar{width:40px;height:40px}
.btn.wa{--b:var(--red);--f:#fff}
.btn.wa::before{background:var(--ink)}
.btn.wa .ar{color:var(--red)}
.btn.wa .ar svg{width:17px;height:17px}
.btn.wa:hover .ar{transform:none;color:var(--ink)}
.btn.rd{--b:var(--red);--f:#fff}
.btn.rd::before{background:var(--ink)}
.btn.rd .ar{color:var(--red)}
.btn.rd:hover .ar{color:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;border:1.5px solid currentColor;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.tag.fill{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag.r{color:var(--red-t)}
.ulink{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:4px;transition:background-size .45s var(--ease),color .3s}
.ulink:hover{background-size:0 1.5px;background-position:100% 100%;color:var(--red-t)}
.on-ink .ulink:hover,.dark .ulink:hover{color:var(--cyan)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:8px 14px;border-radius:99px;background:var(--soft);font-size:13px;font-weight:600;line-height:1.3}
.on-ink .chips span{background:#1c1c1c;color:#eee}
.on-soft .chips span{background:#fff}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:120;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);transition:transform .5s var(--ease);pointer-events:none}
.hdr > *{pointer-events:auto}
.hdr.hide{transform:translateY(-110%)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .3s}
.hdr.solid::before{opacity:1}
.hdr.dark::before{background:rgba(10,10,10,.82)}
.brand{position:relative;display:block;flex:none;height:40px}
.brand img{height:40px;width:auto;transition:opacity .3s}
.brand .rev{position:absolute;left:0;top:0;opacity:0}
.hdr.dark .brand .rev,.menu-open .hdr .brand .rev{opacity:1}
.hdr.dark .brand .std,.menu-open .hdr .brand .std{opacity:0}
.hdr-r{display:flex;align-items:center;gap:10px}
.mbtn{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 5px 0 18px;border-radius:99px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px var(--ink)}
.mbtn i{position:relative;display:block;width:34px;height:34px;border-radius:50%;background:var(--ink)}
.mbtn i::before,.mbtn i::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:#fff;border-radius:2px;transition:transform .45s var(--ease)}
.mbtn i::before{top:13px}.mbtn i::after{top:19px}
.menu-open .mbtn i::before{transform:translateY(3px) rotate(45deg)}
.menu-open .mbtn i::after{transform:translateY(-3px) rotate(-45deg)}
.hdr.dark .mbtn,.menu-open .mbtn{box-shadow:none}
.hdr .btn{min-height:40px;padding:0 8px 0 18px;font-size:12.5px}
.hdr .btn .ar{width:30px;height:30px}
.hdr .btn.hs{padding:0 18px}
.hdr.dark .btn,.menu-open .hdr .btn{--b:#fff;--f:var(--ink)}
.hdr.dark .btn:hover,.menu-open .hdr .btn:hover{color:#fff}
.hdr .btn.ghost{background:rgba(255,255,255,.7)}
.hdr.dark .btn.ghost,.menu-open .hdr .btn.ghost{--b:transparent;--f:#fff;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.brand picture{display:contents}
/* EN | BM: the current language sits in the black pill, the other one is the link */
.lsw{display:inline-flex;align-items:center;height:40px;padding:0 4px;border-radius:99px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12.5px;font-weight:800;letter-spacing:.08em;line-height:1;white-space:nowrap}
.lsw span:not(.sr){display:grid;place-items:center;min-width:34px;height:32px;padding:0 8px;border-radius:99px;transition:background .25s,color .25s}
.lsw .on{background:var(--ink);color:#fff}
.lsw i{display:none}
.lsw:hover span:not(.on):not(.sr){background:var(--red);color:#fff}
.hdr.dark .lsw,.menu-open .hdr .lsw{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.hdr.dark .lsw .on,.menu-open .hdr .lsw .on{background:#fff;color:var(--ink)}
@media (max-width:560px){
  :root{--hdr:68px}
  .brand,.brand img{height:32px}
  .hdr{gap:10px}
  .hdr-r{gap:5px}
  .hdr .btn,.hdr .btn.hs{padding:0 10px;min-height:40px;font-size:11px;letter-spacing:.03em}
  .hdr .btn .ar,.hdr .hx{display:none}
  .lsw{height:40px;padding:0 2px;font-size:11px;letter-spacing:.04em}
  .lsw span.on{display:none}
  .lsw span:not(.sr){min-width:34px;height:34px;padding:0 6px}
  .mbtn{height:40px;padding:0 3px;gap:0}
  .mbtn i{width:32px;height:32px}
  .mbtn i::before{top:12px}.mbtn i::after{top:18px}
  .mbtn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
/* narrow phones: the pixel R instead of the wordmark (the <picture> swaps the file), so all four controls fit */
@media (max-width:480px){.brand,.brand img{height:34px}}
@media (max-width:350px){.hdr{padding:0 12px;gap:8px}.brand,.brand img{height:30px}.hdr-r{gap:4px}.hdr .btn,.hdr .btn.hs{padding:0 7px;font-size:10px;letter-spacing:0}.lsw span:not(.sr){min-width:30px;padding:0 4px}}

/* ---------- full-screen menu ---------- */
.menu{position:fixed;inset:0;z-index:110;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:calc(var(--hdr) + 24px) var(--pad) 28px;overflow-y:auto;visibility:hidden;clip-path:circle(0 at calc(100% - 60px) 42px);transition:clip-path .45s var(--ease-io),visibility 0s .45s}
.menu-open .menu{visibility:visible;clip-path:circle(150vmax at calc(100% - 60px) 42px);transition:clip-path .5s var(--ease-io),visibility 0s}
.menu nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;max-width:var(--max);width:100%;margin:0 auto}
.menu nav a{display:flex;align-items:baseline;gap:clamp(10px,2vw,18px);font-size:min(clamp(40px,8.4vh,108px),12.5vw);font-weight:900;line-height:1.02;letter-spacing:-.04em;text-transform:uppercase;overflow:hidden}
.menu nav a span{display:inline-block;transform:translateY(110%);transition:transform .45s var(--ease),color .3s}
.menu nav a small{font-size:12px;font-weight:700;letter-spacing:.14em;color:#8b8b8b;transform:translateY(200%);transition:transform .45s var(--ease)}
.menu-open .menu nav a span,.menu-open .menu nav a small{transform:none;transition-delay:calc(.1s + var(--i,0) * .035s)}
.menu nav a:hover span,.menu nav a[aria-current] span{color:var(--red)}
.menu nav a:hover span{transform:translateX(.08em)}
.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;max-width:var(--max);width:100%;margin:24px auto 0;padding-top:22px;border-top:1px solid #2a2a2a;font-size:14px;opacity:0;transition:opacity .5s}
.menu-open .menu-foot{opacity:1;transition-delay:.25s}
.menu-foot div{display:flex;flex-wrap:wrap;gap:8px 22px}
.menu-foot a{color:#d6d6d6}
.menu-foot a:hover{color:#fff}
.menu-open{overflow:hidden}

/* ---------- cursor label + hover preview ---------- */
.cur{position:fixed;left:0;top:0;z-index:130;pointer-events:none;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transform:scale(0);transition:transform .35s var(--ease)}
.cur.on{transform:scale(1)}
.peek{position:fixed;left:0;top:0;z-index:105;pointer-events:none;width:clamp(220px,20vw,320px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--soft);opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-6deg);transition:opacity .3s,transform .45s var(--ease);box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
.peek.on{opacity:1;transform:translate(-50%,-50%)}
.peek img{width:100%;height:100%;object-fit:cover}
.peek.logo{display:grid;place-items:center}
.peek.logo img{width:50%;height:auto;aspect-ratio:1;border-radius:18px;object-fit:cover;box-shadow:0 20px 40px -16px rgba(0,0,0,.4)}
@media (hover:none),(pointer:coarse){.cur,.peek{display:none}}

/* ---------- reveal animations: site.js adds html.rv after showing whatever is already on screen ---------- */
.motion.rv [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.motion.rv [data-split] .w > span{display:inline-block;transform:translateY(108%);transition:transform .3s var(--ease);transition-delay:min(calc(var(--i,0) * 18ms),.12s)}
.motion.rv [data-split].in .w > span{transform:none}
.motion.rv [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .3s var(--ease);transition-delay:min(var(--d,0s),.15s)}
.motion.rv [data-reveal].in{opacity:1;transform:none}
.motion.rv [data-mask]{clip-path:inset(100% 0 0 0 round var(--r));transition:clip-path .3s var(--ease-io);transition-delay:min(var(--d,0s),.15s)}
.motion.rv [data-mask] img{transform:scale(1.08);transition:transform .4s var(--ease);transition-delay:min(var(--d,0s),.15s)}
.motion.rv [data-mask].in{clip-path:inset(0 0 0 0 round var(--r))}
.motion.rv [data-mask].in img{transform:none}

/* ---------- marquee ---------- */
.mq{overflow:hidden;white-space:nowrap;display:flex}
.mq > div{display:flex;flex:none;animation:mq var(--t,38s) linear infinite;will-change:transform}
.mq.rev > div{animation-direction:reverse}
@keyframes mq{to{transform:translateX(-100%)}}
.band{border-block:1.5px solid var(--ink);background:rgba(255,255,255,.72);padding:14px 0;font-size:clamp(15px,1.5vw,20px);font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.band span{display:inline-flex;align-items:center;gap:28px;padding-right:28px}
/* 1.4.0: an icon for each service (the logo's play button when a word has none), alternating CI red and cyan */
.band span i{--ic:var(--play);display:inline-block;flex:none;width:.78em;height:.86em;background:var(--red);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.band span i.c{background:var(--cyan)}

/* =========================================================
   HOME (1.1.0): say what we do, prove it, then ask. Nothing pins the scroll.
   ========================================================= */
/* -- hero: one screen, readable at once; the pixel R assembles once in under a second -- */
.hero{position:relative}
.hero .stick{position:relative;min-height:100vh;min-height:100svh;background:transparent;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hdr) + 22px) var(--pad) 0}
.hero-top{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3.6vw,64px);margin:auto 0;padding:clamp(10px,2vh,24px) 0 clamp(22px,3.4vh,40px)}
.hero-mark{--mw:min(40vw,760px);position:relative;z-index:1;width:var(--mw);margin-bottom:calc(var(--mw) * .12)} /* 1.4.1 (Mirzan: "40% size of the page"): 40% of the page width */
.hero-copy{display:grid;gap:clamp(22px,3.4vh,38px);align-content:center;min-width:0}
.hero-copy .hero-foot{padding-bottom:0}
.hero-r-box{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.hero-img{width:94%;height:auto}
/* 1.4.0 (Mirzan, 7 Nov 2026): ROJAK BYTES on one line, small, right under the R and exactly as wide as it. The pixel R
   fills the middle 93.6% of its box and stops 10% above the box's bottom, so the line hangs from there; the text and
   the red dot sit at the two ends. Only the R's box counts for the layout, so the R itself lines up with the title. */
.hero-wm{position:absolute;left:3.2%;right:3.2%;top:calc(90% + var(--mw) * .03);display:flex;align-items:center;justify-content:space-between;font-size:calc(var(--mw) * .0953);font-weight:400;line-height:1;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.hero-wm i{flex:none;width:.28em;height:.28em;border-radius:50%;background:var(--red)}
.hero-r{display:none}
.motion .hero-r{display:block;position:absolute;left:-30%;top:-30%;width:160%;height:160%;pointer-events:none}
.motion.has-canvas .hero-img{visibility:hidden}
.hero h1{position:relative;z-index:2;margin:0;font-size:clamp(32px,min(4.7vw,8.6vh),92px);font-weight:900;line-height:.9;letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.hero h1 .red{color:var(--red)}
.hero-foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;padding-bottom:26px}
.hero-foot .lede{font-size:clamp(16px,1.35vw,20px);max-width:34em}
.hero-foot .ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero .band{position:relative;z-index:3;margin:0 calc(-1 * var(--pad))}
@media (max-width:700px){
  .hero .stick{padding-top:calc(var(--hdr) + 14px)}
  .hero-top{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:18px}
  /* phones: the R with its one-line wordmark above the title */
  .hero-mark{--mw:40vw;order:-1;justify-self:start;margin-bottom:calc(var(--mw) * .14)}
  .hero h1{font-size:clamp(30px,9.4vw,54px)}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:22px}
  .hero-copy{gap:18px}
  .hero-copy .hero-foot{padding-bottom:4px}
  .hero-foot .lede{font-size:15.5px}
  .hero .band{padding:10px 0;font-size:14px}
}

/* 1.4.0 (Mirzan, 7 Nov 2026): the counter between the buttons and the ticker, "as of today" (the date the views were
   read): total views, videos made, clients. The numbers count up from 0 when the page opens (site.js, [data-count-now]);
   without motion they just show. The view numbers come from [rojak_c3_views], so they match the cards */
.hstats{position:relative;z-index:3;border-top:1px solid var(--line);padding:16px 0 24px}
.hs-asof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 14px;font-size:12px;font-weight:800;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hs-asof .live{flex:none;width:9px;height:9px;background:var(--red)}
.hs-asof .hs-src{font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.motion .hs-asof .live{animation:hsPulse 1.8s ease-out infinite}
@keyframes hsPulse{0%{box-shadow:0 0 0 0 rgba(237,28,36,.55)}70%{box-shadow:0 0 0 9px rgba(237,28,36,0)}100%{box-shadow:0 0 0 0 rgba(237,28,36,0)}}
.hs-list{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr) minmax(0,.75fr)}
.hs{container-type:inline-size;min-width:0;padding:0 clamp(14px,2vw,32px);border-left:1px solid var(--line)}
.hs:first-child{padding-left:0;border-left:0}
.hs b{display:block;font-size:clamp(40px,6vw,92px);font-weight:900;line-height:.95;letter-spacing:-.035em;white-space:nowrap;color:var(--ink)}
.hs b i{font-style:normal}
.hs > span{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hs > span::before{content:"";flex:none;width:8px;height:8px;background:var(--red)}
/* short laptop screens (1280x720, 1366x768): keep the ticker on the first screen */
@media (min-width:701px) and (max-height:820px){
  .hero-foot{padding-bottom:18px}
  .hstats{padding:12px 0 16px}
  .hs-asof{margin-bottom:8px}
  .hs b{font-size:clamp(40px,min(6vw,9vh),92px)}
  .hs > span{margin-top:6px}
}
@media (max-width:700px){
  .hstats{padding:14px 0 20px}
  .hs-asof{margin-bottom:12px}
  .hs-asof .hs-src{font-size:12.5px}
  .hs-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 0}
  .hs:first-child{grid-column:1 / -1}
  .hs:nth-child(2){padding-left:0;border-left:0}
  .hs b{font-size:clamp(34px,11vw,56px)}
  .hs:first-child b{font-size:clamp(44px,14.5vw,76px)}
}

/* -- proof strip: client logos, three 2025 numbers, press -- */
.proof{padding:clamp(52px,6.4vw,100px) 0 clamp(44px,5.4vw,84px)}
.proof-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:clamp(20px,2.6vw,34px)}
.logos{display:grid;gap:12px}
.logos .mq > div{gap:12px;padding-right:12px}
.ltile{flex:none;width:clamp(92px,8.6vw,132px);aspect-ratio:1;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.ltile img{width:100%;height:100%;object-fit:cover}
.ltile.txt{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:900;font-size:clamp(12px,1.05vw,15px);letter-spacing:-.01em;text-transform:uppercase;text-align:center;padding:10px;line-height:1.05;white-space:normal}
.pnums{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(26px,3.4vw,48px);padding:clamp(24px,3.2vw,48px);border-radius:32px;background:var(--ink);color:#fff}
.pnums .rays,.pnums canvas{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pnums .rays{background:radial-gradient(60% 70% at 50% 130%,rgba(237,28,36,.3),transparent 70%),radial-gradient(30% 40% at 88% 20%,rgba(102,248,255,.1),transparent 70%)}
.pnums .eyebrow{color:#bdbdbd}
.pn-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pn-list .num b{display:block;font-size:clamp(30px,7vw,120px);font-weight:900;line-height:.88;letter-spacing:-.05em;white-space:nowrap}
.pn-list .num > span{display:block;margin-top:10px;font-size:clamp(12.5px,1.25vw,18px);font-weight:600;color:#d4d4d4;line-height:1.3}
.pnums .src{color:#a9a9a9}
.press-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;max-width:980px;margin:clamp(22px,2.6vw,36px) auto 0;padding-top:20px;border-top:1px solid var(--line);text-align:center} /* 1.4.1: smaller, centred */
.press-line .eyebrow{flex-basis:100%;justify-content:center;margin-bottom:2px}
.press-line b{font-size:clamp(14px,1.15vw,17px);font-weight:800;letter-spacing:-.02em;color:#5f5f5f;transition:color .3s}
.press-line b:hover{color:var(--ink)}

/* -- services (1.4.0, Mirzan 7 Nov 2026): one photo card per service, from our own shoots (the Behind the scenes
   folder). The whole card opens the service page and "More info" says so. A dark wash under the text keeps the
   white type readable on any photo. -- */
.svc{padding:clamp(64px,8vw,130px) 0}
.svc .sec-h{margin-bottom:clamp(26px,3.4vw,52px)}
.svc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.svc-card{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;min-height:clamp(350px,31vw,450px);padding:clamp(20px,1.9vw,28px);border-radius:24px;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.svc-card .ph{position:absolute;inset:0;z-index:-2;display:block}
.svc-card .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform 1.1s var(--ease)}
.svc-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.5) 0,rgba(10,10,10,.08) 22%,rgba(10,10,10,.3) 40%,rgba(10,10,10,.84) 60%,rgba(10,10,10,.94) 100%);transition:opacity .45s}
.svc-card:hover .ph img,.svc-card:focus-within .ph img{transform:scale(1.06)}
.svc-card h3 a::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit}
.svc-card h3 a:focus-visible{outline:none}
.svc-card:has(h3 a:focus-visible){outline:3px solid var(--red);outline-offset:3px}
.svc-card .no{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.svc-card h3{margin-top:auto;font-size:clamp(19px,1.6vw,25px);font-weight:900;line-height:1.08;letter-spacing:-.025em;text-transform:uppercase;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.svc-card p{font-size:14px;line-height:1.5;font-weight:500;color:#ececec}
.svc-card .tag{align-self:flex-start;font-size:10.5px;padding:5px 10px;background:#fff;color:var(--ink);box-shadow:none}
.svc-card .go{position:relative;z-index:1;pointer-events:none;margin-top:6px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 6px 0 16px;border-radius:99px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .3s,color .3s}
.svc-card .go .ar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;transition:transform .45s var(--ease),background .3s,color .3s}
.svc-card .go .ar svg{width:13px;height:13px}
.svc-card:hover .go,.svc-card:focus-within .go{background:var(--red);color:#fff}
.svc-card:hover .go .ar,.svc-card:focus-within .go .ar{background:#fff;color:var(--red);transform:rotate(-45deg)}
.svc-more{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px}
@media (max-width:1100px){.svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .svc-cards{grid-template-columns:minmax(0,1fr);gap:10px}
  .svc-card{min-height:236px;gap:6px;padding:16px 16px 14px;border-radius:20px}
  .svc-card h3{font-size:18px}
  .svc-card p{font-size:13.5px;line-height:1.45}
  .svc-card .go{margin-top:4px;min-height:34px;font-size:11px}
  .svc-card .go .ar{width:24px;height:24px}
}

/* -- pick your path: three tiles into the filtered work list -- */
.paths{padding:0 0 clamp(64px,8vw,130px)}
.paths .sec-h{margin-bottom:clamp(22px,3vw,40px)}
.ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ptile{position:relative;display:flex;flex-direction:column;gap:12px;min-height:clamp(190px,19vw,280px);padding:clamp(22px,2.4vw,34px);border-radius:28px;background:var(--soft);overflow:hidden}
.ptile small{font-size:12px;font-weight:800;letter-spacing:.14em;opacity:.7}
.ptile b{font-size:clamp(30px,3.5vw,56px);font-weight:900;line-height:.92;letter-spacing:-.04em;text-transform:uppercase;transition:transform .5s var(--ease)}
.ptile span{font-size:14.5px;font-weight:600;line-height:1.45;max-width:26em;opacity:.86}
.ptile .ar{margin-top:auto;align-self:flex-end;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;display:grid;place-items:center;transition:transform .5s var(--ease),background .3s,color .3s,box-shadow .3s}
.ptile .ar svg{width:18px;height:18px}
.ptile:hover b{transform:translateX(8px)}
.ptile:hover .ar{transform:rotate(-45deg);background:var(--ink);color:#fff;box-shadow:none}
.ptile.k{background:var(--ink);color:#fff}
.ptile.k:hover .ar{background:var(--red)}
.ptile.r{background:var(--red);color:#fff}
.ptile.r:hover .ar{background:#fff;color:var(--red)}
.ptile.r span,.ptile.r small{color:var(--ink);opacity:1}
@media (max-width:800px){
  .ptiles{grid-template-columns:minmax(0,1fr);gap:8px}
  .ptile{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:16px 18px;border-radius:22px}
  .ptile small{display:none}
  .ptile b{font-size:clamp(24px,7.4vw,34px)}
  .ptile span{grid-column:1;font-size:13.5px}
  .ptile .ar{grid-column:2;grid-row:1/3;align-self:center;width:42px;height:42px;margin:0}
  .paths .sec-h{margin-bottom:18px}
}

/* -- the reel: our 1M+ videos, from data/videos.php (cards link to TikTok, no in-page player) -- */
.reel{padding:clamp(64px,8vw,130px) 0}
.proof + .reel{padding-top:clamp(14px,1.8vw,28px)} /* 1.4.0: no big empty band under "As featured in" */
.vchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.vchips[hidden]{display:none}
.vchips button{padding:10px 16px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:13px;font-weight:700;letter-spacing:.03em;transition:background .25s,color .25s,box-shadow .25s}
.vchips button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.vchips button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.vitem{display:grid;gap:9px;align-content:start;min-width:0}
.vitem[hidden]{display:none}
.vcard{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;container-type:inline-size}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.vcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 24%,transparent 34%,rgba(0,0,0,.62) 54%,rgba(0,0,0,.94) 100%)}
.vcard:hover img{transform:scale(1.06)}
.vcard .rk{position:absolute;left:16px;top:14px;z-index:2;font-size:12px;font-weight:800;letter-spacing:.14em}
.vcard .pl{position:absolute;right:12px;top:10px;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;transition:background .3s,transform .45s var(--ease)}
.vcard .pl svg{width:16px;height:16px}
.vcard:hover .pl{background:var(--red);transform:rotate(-45deg)}
.vcard .cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:grid;gap:4px}
/* 1.4.0: the exact total ("22,863,538"), sized to the card so nine digits fit; its label stays on one line */
.vcard .cap b{font-size:24px;font-size:max(16px,min(44px,calc((100cqi - 32px) / 6.2)));font-weight:900;line-height:.95;letter-spacing:-.04em;white-space:nowrap;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.vcard .cap i{font-style:normal;margin-bottom:6px;font-size:10px;font-size:min(10.5px,calc((100cqi - 32px) / 16.6));font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#e6e6e6}
.vcard .cap span{font-size:14px;font-weight:700;line-height:1.3}
.vcard .cap small{font-size:12.5px;color:#d6d6d6}
.vmeta{font-size:12px;line-height:1.4;font-weight:600;color:var(--muted)}
.vmeta b{font-weight:800;color:var(--ink)}
.on-soft .vmeta{color:#555}
/* 1.4.0: each platform's own exact count, under the card */
.vplat{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.vplat li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:3px;border-top:1px solid var(--line);font-size:12px;line-height:1.3;font-weight:600;color:var(--muted)}
.vplat li:first-child{border-top:0;padding-top:0}
.vplat b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.on-soft .vplat li{color:#555}
.vcard .noimg{position:absolute;inset:0;background:radial-gradient(70% 50% at 30% 20%,rgba(102,248,255,.22),transparent 70%),radial-gradient(60% 50% at 80% 70%,rgba(237,28,36,.3),transparent 70%),var(--ink)}
.vlist + .src{margin-top:20px}
.vmore{margin-top:22px}
.vmore + .src{margin-top:16px}
/* 1.4.0: [rojak_c3_videos layout="rows"], the rest of a case's videos as smaller cards (Mirzan: "thumbnails for all") */
.vrows{margin-top:clamp(40px,5vw,64px)}
.sec-h + .vrows{margin-top:0}
.vrows-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding-bottom:18px}
.vrows-h h3{font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.vrows-h p{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.on-soft .vrows-h p{color:#555}
.vlist.vsm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px}
.vsm .vcard{border-radius:18px}
.vsm .vcard .rk{left:12px;top:11px;font-size:11px}
.vsm .vcard .pl{right:9px;top:8px;width:34px;height:34px}
.vsm .vcard .pl svg{width:13px;height:13px}
.vsm .vcard .cap{left:12px;right:12px;bottom:12px}
.vsm .vcard .cap b{font-size:max(15px,min(30px,calc((100cqi - 24px) / 6.2)))}
.vsm .vcard .cap i{font-size:min(10px,calc((100cqi - 24px) / 16.6))}
.vsm .vcard .cap span{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vsm .vcard .cap small{font-size:11.5px}
.vrows-more{margin-top:0}
.vrows-more > summary{list-style:none;cursor:pointer;margin:22px 0 4px}
.vrows-more > summary::-webkit-details-marker{display:none}
.vrows-more > summary .c,.vrows-more[open] > summary .o{display:none}
.vrows-more[open] > summary .c{display:inline}
.vrows-more[open] > summary .ar{transform:rotate(45deg)}
.vrows-more[open] > summary{margin-bottom:22px}
@media (max-width:560px){.vlist.vsm{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}}
.vsec{scroll-margin-top:calc(var(--hdr) + 12px)}
@media (min-width:1024px){.vlist.row{grid-template-columns:repeat(var(--n),minmax(0,1fr))}}
@media (min-width:701px) and (max-width:1023px){.vlist.row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .vlist.swipe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .vlist.swipe::-webkit-scrollbar{display:none}
  .vlist.swipe .vitem{flex:none;width:min(46vw,190px);scroll-snap-align:start}
  .vchips{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--pad)) 16px;padding:0 var(--pad) 4px;scrollbar-width:none}
  .vchips::-webkit-scrollbar{display:none}
  .vchips button{flex:none;padding:9px 14px}
  .reel .sec-h,.feat3 .sec-h,.svc .sec-h{margin-bottom:22px}
  .vlist:not(.swipe){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* -- featured campaigns: three cards, then the full list -- */
.feat3{padding:0 0 clamp(64px,8vw,130px)}
.fcases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ccard{position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:var(--soft);isolation:isolate}
.ccard.k{background:var(--ink);color:#fff}
.ccard.r{background:var(--red);color:#fff}
.ccard .media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--soft2)}
.ccard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ccard:hover .media img{transform:scale(1.05)}
.ccard .body{flex:1;display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.2vw,30px)}
.ccard .who{display:flex;align-items:center;gap:12px}
.ccard .who img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.ccard .who b{display:block;font-size:16.5px;font-weight:800;line-height:1.2}
.ccard .who small{display:block;font-size:13px;opacity:.78}
.ccard .tag{align-self:flex-start}
.ccard .big b{display:block;font-size:clamp(46px,5vw,84px);font-weight:900;line-height:.86;letter-spacing:-.05em}
.ccard .big span{display:block;margin-top:8px;font-size:14.5px;font-weight:600;max-width:22em}
/* red card: the small text is black (4.5:1 and up); the big number stays white */
.ccard.r .who b,.ccard.r .who small,.ccard.r .big span{color:var(--ink);opacity:1}
.ccard .go{margin-top:auto;align-self:flex-start}
@media (max-width:900px){
  .fcases{grid-template-columns:minmax(0,1fr);gap:12px}
  .ccard{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .ccard .media{aspect-ratio:auto;min-height:100%}
  .ccard .body{gap:10px;padding:16px}
  .ccard .who img{width:36px;height:36px}
  .ccard .who b{font-size:14.5px}
  .ccard .who small{font-size:12px}
  .ccard .tag{display:none}
  .ccard .big b{font-size:clamp(36px,10vw,64px)}
  .ccard .big span{font-size:13px}
}
@media (max-width:700px){
  .fcases{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none}
  .fcases::-webkit-scrollbar{display:none}
  .ccard{flex:none;width:min(78vw,300px);display:flex;scroll-snap-align:start}
  .ccard .media{aspect-ratio:16/10;min-height:0}
}

/* -- last call: the two contact options straight on the page -- */
.cta{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,8vw,130px) var(--pad)}
.cta .eyebrow{justify-content:center}
.cta h2{margin:22px auto 0;max-width:12ch}
.cta .lede{margin:22px auto 0}
.cta .copts{max-width:920px;margin:clamp(26px,3vw,40px) auto 0}
.cta .lines{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin-top:36px;font-weight:700}
.cta .lines a{border-bottom:1.5px solid currentColor;padding-bottom:2px}
.cta .lines a:hover{color:var(--red-t)}

/* -- 2025 in numbers (now on /work/): a normal section, no pinned scene -- */
.nums{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;padding:clamp(70px,9vw,140px) 0}
.nums .rays,.nums canvas{position:absolute;inset:0;z-index:-1;pointer-events:none}
.nums .rays{background:radial-gradient(60% 50% at 50% 115%,rgba(237,28,36,.24),transparent 70%),radial-gradient(30% 30% at 82% 45%,rgba(102,248,255,.08),transparent 70%)}
.nums .sec-h{margin-bottom:clamp(30px,4vw,56px)}
.nums-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
i[data-count]{font-style:normal}
.num b{display:block;font-size:clamp(48px,7.4vw,124px);font-weight:900;line-height:.9;letter-spacing:-.05em}
.num b em{font-style:normal;color:var(--red)}
.num > span{display:block;margin-top:12px;font-size:clamp(14px,1.4vw,20px);font-weight:600;color:#d4d4d4}
.nums .src{margin-top:clamp(30px,4vw,48px)}
@media (max-width:700px){.nums-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.nums .num b{font-size:clamp(40px,13vw,64px)}}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#fff;padding-top:clamp(36px,4vw,56px);overflow:hidden}
/* 1.4.0 (Mirzan, 7 Nov 2026): the big moving email / WhatsApp line is now a small still strip */
.fcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-bottom:clamp(26px,3vw,40px)}
.fcta-h{font-size:clamp(22px,2.2vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1;text-transform:uppercase}
.fcta-l{display:flex;flex-wrap:wrap;gap:10px}
.fpill{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:7px 22px 7px 7px;border-radius:99px;background:#1a1a1a;box-shadow:inset 0 0 0 1px #2f2f2f;color:#fff;transition:background .3s,box-shadow .3s}
.fpill svg{flex:none;width:40px;height:40px;padding:10px;border-radius:50%;background:var(--red);color:#fff;transition:transform .45s var(--ease)}
.fpill.em svg{background:#fff;color:var(--ink)}
.fpill > span{display:grid;gap:2px;font-size:15px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.fpill small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9d9d9d}
.fpill:hover,.fpill:focus-visible{background:#242424;box-shadow:inset 0 0 0 1px var(--red)}
.fpill:hover svg,.fpill:focus-visible svg{transform:rotate(-8deg) scale(1.05)}
@media (max-width:520px){.fcta-l{display:grid;width:100%}.fpill > span{font-size:14px}}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-top:40px;padding-bottom:40px;border-top:1px solid #262626}
.fgrid .fh{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8b8b8b;margin-bottom:14px}
.fgrid ul{display:grid;gap:8px;font-size:15px;font-weight:500}
.fgrid a{color:#e6e6e6;transition:color .25s}
.fgrid a:hover{color:var(--red)}
.fgrid .fb img{height:44px;width:auto}
.fgrid .fb p{margin-top:16px;color:#bdbdbd;max-width:26em;font-size:14.5px}
.legal{border-top:1px solid #262626;padding-top:22px;padding-bottom:28px;font-size:12.5px;color:#8b8b8b;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.legal .lg-r{display:flex;flex-wrap:wrap;gap:8px 22px}
.legal a{color:#bdbdbd}
.legal a:hover{color:#fff}
@media (max-width:900px){.fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fgrid .fb{grid-column:1/-1}}

/* =========================================================
   INNER PAGES
   ========================================================= */
.phero{padding:calc(var(--hdr) + clamp(60px,9vw,130px)) 0 clamp(50px,6vw,90px)}
.phero .wrap{display:grid;gap:26px}
.phero .crumbs{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.phero .crumbs a:hover{color:var(--red-t)}
.phero .meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.phero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.phero .ctas,.side-btns{display:flex;flex-wrap:wrap;gap:10px}
.stat-inline{display:flex;flex-wrap:wrap;gap:12px 40px}
.stat-inline div b{display:block;font-size:clamp(34px,3.6vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1}
.stat-inline div span{font-size:13px;font-weight:600;color:var(--muted)}

/* -- work index -- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tabs button{padding:11px 18px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:13px;font-weight:700;letter-spacing:.04em;transition:background .25s,color .25s,box-shadow .25s}
.tabs button em{font-style:normal;color:var(--muted);margin-left:6px;font-weight:600}
.tabs button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.tabs button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.tabs button[aria-pressed=true] em{color:#bdbdbd}
.wlist{border-top:1.5px solid var(--ink)}
.wrow{position:relative;display:grid;grid-template-columns:64px minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr) 48px;align-items:center;gap:20px;padding:26px 8px;border-bottom:1px solid var(--line);isolation:isolate;transition:color .35s}
.wrow::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease)}
.wrow:hover{color:#fff}
.wrow:hover::before{transform:none}
.wrow .n{font-size:12.5px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.wrow .c{font-size:clamp(24px,3.2vw,48px);font-weight:900;line-height:1;letter-spacing:-.035em;text-transform:uppercase;transition:transform .5s var(--ease)}
.wrow:hover .c{transform:translateX(10px)}
.wrow .c small{display:block;margin-top:8px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.wrow .s{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.wrow .k b{display:block;font-size:clamp(22px,2.4vw,36px);font-weight:900;letter-spacing:-.04em;line-height:1}
.wrow .k span{font-size:12.5px;color:var(--muted);line-height:1.35;display:block;margin-top:4px}
.wrow:hover .n,.wrow:hover .c small,.wrow:hover .k span{color:#b3b3b3}
.wrow .ar{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;display:grid;place-items:center;transition:transform .5s var(--ease),background .3s}
.wrow:hover .ar{transform:rotate(-45deg);background:var(--red);box-shadow:none}
.wrow .ar svg{width:16px;height:16px}
.wrow .th{display:none}
.wrow[hidden]{display:none}
@media (max-width:900px){
  .wrow{grid-template-columns:72px minmax(0,1fr) 40px;gap:6px 16px;padding:18px 0}
  .wrow .th{display:block;grid-row:1/4;width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--soft)}
  .wrow .th img{width:100%;height:100%;object-fit:cover}
  .wrow .th b{display:grid;place-items:center;height:100%;padding:4px;background:var(--ink);color:#fff;font-size:11px;font-weight:900;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;text-align:center}
  .wrow .n{display:none}
  .wrow .c{grid-column:2;font-size:22px}
  .wrow .c small{font-size:12px;margin-top:4px}
  .wrow .s{grid-column:2;font-size:11px}
  .wrow .k{grid-column:2}
  .wrow .k b{font-size:22px;display:inline}
  .wrow .k span{display:inline;margin-left:6px}
  .wrow .ar{grid-column:3;grid-row:1/4;width:38px;height:38px}
  .wrow::before{display:none}
  .wrow:hover{color:inherit}
}
/* industries chart */
.bars{display:grid;gap:22px}
.bar .t{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:10px}
.bar .t span{font-weight:700;font-size:clamp(15px,1.3vw,18px)}
.bar .t b{font-size:clamp(24px,2.4vw,36px);font-weight:900;letter-spacing:-.04em;line-height:1}
.bar .track2{height:14px;border-radius:99px;background:#1f1f1f;overflow:hidden}
.bar .fill{height:100%;width:var(--w);min-width:6px;border-radius:99px;background:var(--red)}
.bar:nth-child(2) .fill{background:var(--cyan)}
.bar:nth-child(n+3) .fill{background:#fff}
.motion.rv .bars .fill{transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.motion.rv .bars.in .fill{transform:none}
.motion.rv .bars.in .bar:nth-child(2) .fill{transition-delay:.05s}
.motion.rv .bars.in .bar:nth-child(3) .fill{transition-delay:.1s}
.motion.rv .bars.in .bar:nth-child(4) .fill{transition-delay:.15s}
.motion.rv .bars.in .bar:nth-child(5) .fill{transition-delay:.2s}
.split2{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(36px,6vw,100px);align-items:start}
@media (max-width:900px){.split2{grid-template-columns:minmax(0,1fr)}}
/* milestones strip */
.miles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mile{display:grid;gap:12px}
.mile .im{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--soft)}
.mile .im img{width:100%;height:100%;object-fit:cover}
.mile .im.t{display:grid;place-items:center;background:var(--ink);color:#fff;text-align:center;padding:16px;font-size:clamp(18px,1.6vw,24px);font-weight:900;letter-spacing:-.03em;line-height:1.05;text-transform:uppercase}
.mile .im.t.r{background:var(--red)}
/* 1.4.1 (Mirzan, 7 Nov 2026: the "Invited on Astro Awani" milestone "has no thumbnail"): no photo of the appearance is
   in our files yet, so it is a drawn card: an on-air screen in the CI pixel gradient with the channel's name, split
   cyan and red like the logo. Swap in a photo (an <img> in .im) when there is one. */
.mile .im.tv{position:relative;isolation:isolate;align-content:center;gap:14px;background:#0a0a0a}
.mile .im.tv::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),var(--pixg) center/100% 100% no-repeat}
.mile .im.tv .nm{font-size:clamp(20px,1.8vw,28px);text-shadow:2px -1px 0 rgba(102,248,255,.9),-2px 1px 0 rgba(237,28,36,.9)}
.mile .im.tv .on{display:inline-flex;align-items:center;gap:7px;justify-self:center;padding:5px 11px;border-radius:99px;background:#fff;color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.16em}
.mile .im.tv .on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.motion .mile .im.tv .on::before{animation:hsPulse 1.8s ease-out infinite}
.mile small{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mile b{font-size:16px;font-weight:800;line-height:1.25}
@media (max-width:1000px){.miles{grid-template-columns:repeat(5,minmax(200px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:thin}.mile{scroll-snap-align:start}}

/* -- case pages -- */
.case-h h1{font-size:clamp(min(44px,11.8vw),8.6vw,146px);font-weight:900;line-height:.86;letter-spacing:-.045em;text-transform:uppercase;overflow-wrap:anywhere}
.cmedia.artonly{height:min(62vh,580px)}
.nextcase.s b{font-size:clamp(28px,4.4vw,68px);line-height:1.02;letter-spacing:-.035em;text-transform:none;max-width:22ch}
.glabel{margin:24px 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.case-h .role{font-size:clamp(17px,1.6vw,22px);font-weight:600;color:#333}
.cmedia{display:grid;grid-template-columns:1.6fr 1fr;grid-auto-rows:1fr;gap:16px;height:min(76vh,720px)}
.cmedia figure{position:relative;border-radius:var(--r);overflow:hidden;background:var(--soft);min-height:0}
.cmedia figure:first-child{grid-row:span 2}
.cmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmedia.one{grid-template-columns:minmax(0,1fr)}
.cmedia.one figure:first-child{grid-row:auto}
.cmedia.two{grid-template-columns:1.6fr 1fr}
.cmedia.two figure:first-child{grid-row:auto}
.cmedia.port{grid-template-columns:repeat(4,1fr)}
.cmedia.port figure:first-child{grid-row:auto}
.cmedia .art{display:grid;place-items:center}
.cmedia .art canvas{position:absolute;inset:0;width:100%;height:100%}
.cmedia .art .lg{position:relative;z-index:1;width:clamp(170px,19vw,270px);aspect-ratio:1;border-radius:26px;background:#fff;display:grid;place-items:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);overflow:hidden}
.cmedia .art .lg img{position:static;width:100%;height:100%;object-fit:cover}
.art.ink{background:var(--ink)}.art.red{background:var(--red)}.art.cyan{background:var(--cyan)}.art.soft{background:var(--soft2)}
@media (max-width:900px){
  .cmedia{height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:auto}
  .cmedia figure{aspect-ratio:1}
  .cmedia figure:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .cmedia.one figure:first-child{aspect-ratio:4/3}
  .cmedia.port{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmedia.port figure,.cmedia.port figure:first-child{grid-column:auto;aspect-ratio:9/14}
  .cmedia .art{aspect-ratio:4/3}
  .cmedia.artonly{height:auto} /* 1.4.2: the 62vh box left a 300 px empty strip under the 4:3 art on phones */
}
.kpi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,6vw,100px);align-items:end}
.kpi .hm b{display:block;font-size:clamp(56px,15vw,250px);font-weight:900;line-height:.82;letter-spacing:-.06em}
.kpi .hm span{display:block;margin-top:18px;font-size:clamp(17px,1.7vw,24px);font-weight:700;max-width:20em}
.mets{border-top:1.5px solid currentColor}
.mets li{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(127,127,127,.35)}
.mets li b{font-size:clamp(30px,3.2vw,48px);font-weight:900;letter-spacing:-.04em;line-height:1}
.mets li span{font-weight:600;color:inherit;opacity:.85}
.kpi .about{margin-top:24px;font-size:17px;max-width:40em}
/* 1.4.2 (Mirzan: "This also need to be smaller ... make it into 5 lines only"): the "What we did" paragraph on a case
   page runs the full width at a smaller size, so it takes about 5 lines on a laptop screen */
.did{display:grid;gap:18px}
.did .h2{font-size:clamp(21px,2.45vw,36px);line-height:1.2;letter-spacing:-.02em;max-width:none}
@media (max-width:900px){.kpi{grid-template-columns:minmax(0,1fr)}}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.rcard{display:grid;gap:14px;align-content:start}
.rcard .im{aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--soft)}
.rcard .im img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.rcard:hover .im img{transform:scale(1.05)}
.rcard time{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rcard h3{font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.01em;transition:color .25s}
.rcard:hover h3{color:var(--red-t)}
.solinks{display:flex;flex-wrap:wrap;gap:10px}
.nextcase{display:block;position:relative;padding:clamp(70px,10vw,150px) 0;background:var(--ink);color:#fff;overflow:hidden}
.nextcase .eyebrow{color:#a9a9a9}
.nextcase b{display:block;margin-top:20px;font-size:clamp(46px,10vw,170px);font-weight:900;line-height:.86;letter-spacing:-.05em;text-transform:uppercase;transition:transform .7s var(--ease),color .3s}
.nextcase:hover b{transform:translateX(16px);color:var(--red)}
.nextcase .sub{display:flex;align-items:center;gap:14px;margin-top:22px;font-weight:600;color:#cfcfcf}

/* -- services page -- */
.practice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,100px);align-items:start}
.practice .side{position:sticky;top:calc(var(--hdr) + 24px);display:grid;gap:22px}
.practice .pnum{font-size:clamp(90px,13vw,210px);font-weight:900;line-height:.8;letter-spacing:-.06em;color:var(--soft2)}
.on-ink .practice .pnum{color:#2a2a2a}
.practice .pics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.practice .pics.w{grid-template-columns:minmax(0,1fr)}
.practice .pics figure{border-radius:16px;overflow:hidden;aspect-ratio:9/16;background:var(--soft)}
.practice .pics.w figure{aspect-ratio:16/10}
.practice .pics img{width:100%;height:100%;object-fit:cover}
.slist{border-top:1.5px solid currentColor}
.slist a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;border-bottom:1px solid rgba(127,127,127,.35);font-size:clamp(19px,2vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.2;transition:color .3s,padding .5s var(--ease)}
.slist a small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .5s var(--ease);white-space:nowrap}
.slist a:hover{color:var(--red);padding-left:14px}
.on-ink .slist a:hover{color:var(--cyan)}
.slist a:hover small,.slist a:focus-visible small{opacity:1;transform:none}
@media (max-width:900px){.practice{grid-template-columns:minmax(0,1fr)}.practice .side{position:static}.slist a small{display:none}}
@media (max-width:480px){.btn{white-space:normal;line-height:1.25;padding-top:8px;padding-bottom:8px}}
.ws-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(30px,5vw,80px);align-items:center}
.ws-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.ws-logos span{display:grid;gap:8px;justify-items:center;text-align:center;font-size:12.5px;font-weight:700}
.ws-logos .lgo{width:100%;aspect-ratio:1;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.ws-logos .lgo img{width:100%;height:100%;object-fit:cover}
.ws-logos .lgo.t{background:var(--ink);color:#fff;border-color:var(--ink)}
.ws-logos .lgo i{font-style:normal;font-weight:900;font-size:15px;letter-spacing:-.02em;text-transform:uppercase;padding:8px;line-height:1.1}
@media (max-width:900px){.ws-strip{grid-template-columns:minmax(0,1fr)}}
/* -- services page, 1.4.1 (Mirzan, 7 Nov 2026: "The service page needs a revamp. Why not do something like in the main
   page to make it interactive and dynamic"). The home page's parts: a big title, two practice tiles (the first one's
   photos change every 4 s), the counter, the ticker, photo cards, the 1M+ videos row, then the public affairs panel and a moving row of workshop logos. Every part reads fine without motion. -- */
.sx-hero{padding:calc(var(--hdr) + clamp(34px,5vw,80px)) 0 0}
.sx-hero .crumbs{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sx-hero .crumbs a:hover{color:var(--red-t)}
.sx-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(26px,4vw,72px);align-items:center;margin-top:clamp(16px,2.2vw,28px)}
.sx-copy{display:grid;gap:clamp(20px,2.6vw,32px);align-content:center;min-width:0}
.sx-copy h1{margin:0;font-size:clamp(40px,min(6.4vw,11.5vh),116px);font-weight:900;line-height:.88;letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance}
.sx-copy h1 .red{color:var(--red)}
.sx-copy .lede{max-width:34em}
.sx-copy .ctas{display:flex;flex-wrap:wrap;gap:10px}
.sx-tiles{display:grid;gap:12px}
.sx-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;min-height:clamp(170px,16vw,240px);padding:clamp(18px,1.8vw,26px);border-radius:24px;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff}
.sx-tile .ph{position:absolute;inset:0;z-index:-2}
.sx-tile .ph picture{position:absolute;inset:0;opacity:0}
.sx-tile .ph picture:first-child{opacity:1}
.sx-tile .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform 1.1s var(--ease)}
.sx-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,10,.9) 0,rgba(10,10,10,.62) 48%,rgba(10,10,10,.15) 100%)}
.sx-tile::after{content:"";position:absolute;right:0;bottom:0;z-index:-1;width:38%;height:70%;background:var(--pixg) right bottom/100% 100% no-repeat;opacity:.55;transform:scaleX(-1);transition:opacity .4s}
.sx-tile.k::after{transform:none;left:auto}
.sx-tile .no{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#d6d6d6}
.sx-tile b{font-size:clamp(22px,2.2vw,34px);font-weight:900;line-height:1;letter-spacing:-.03em;text-transform:uppercase;max-width:12em}
.sx-tile .tag{font-size:10.5px;padding:5px 10px;background:#fff;color:var(--ink);box-shadow:none}
.sx-tile .ar{position:absolute;top:clamp(14px,1.5vw,22px);right:clamp(14px,1.5vw,22px);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--ink);transition:transform .45s var(--ease),background .3s,color .3s}
.sx-tile .ar svg{width:15px;height:15px;transform:rotate(90deg)}
.sx-tile:hover .ar,.sx-tile:focus-visible .ar{background:var(--red);color:#fff;transform:translateY(4px)}
.sx-tile:hover .ph img,.sx-tile:focus-visible .ph img{transform:scale(1.06)}
.sx-tile:hover::after{opacity:.9}
.sx-tile:hover b{text-shadow:2px -1px 0 rgba(102,248,255,.85),-2px 1px 0 rgba(237,28,36,.85)}
.motion .sx-tile .ph.cyc picture{animation:sxCyc 12s infinite}
.motion .sx-tile .ph.cyc picture:nth-child(2){animation-delay:4s}
.motion .sx-tile .ph.cyc picture:nth-child(3){animation-delay:8s}
@keyframes sxCyc{0%{opacity:0}4%{opacity:1}33%{opacity:1}38%{opacity:0}100%{opacity:0}}
.sx-hero .hstats{margin-top:clamp(28px,3.4vw,50px)}
.sx-hero .band{margin-top:0}
/* the two practices */
.sx-prac{padding:clamp(64px,8vw,130px) 0 0}
.sx-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,26em);align-items:end;gap:12px clamp(18px,2.6vw,44px);margin-bottom:clamp(26px,3.4vw,52px)}
.sx-head .pnum{font-size:clamp(72px,10vw,170px);font-weight:900;line-height:.8;letter-spacing:-.06em;padding-bottom:.04em;background:linear-gradient(120deg,var(--red) 10%,#f7bcc1 48%,var(--cyan) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 0 transparent);transition:filter .2s}
.sx-head:hover .pnum{filter:drop-shadow(4px -2px 0 rgba(102,248,255,.55)) drop-shadow(-4px 2px 0 rgba(237,28,36,.55))}
.sx-head .eyebrow{margin-bottom:10px}
.sx-head .lede{font-size:clamp(15px,1.2vw,18px)}
/* 1.4.2: BM "KANDUNGAN" (722 px at 1440) ran 66 px past its column into the lede's; the title is capped by its column */
.sx-head > div{container-type:inline-size}
.sx-head .d2{font-size:min(clamp(40px,7.4vw,124px),14.5cqi)}
.svc-card.ask{background:var(--red)}
.svc-card.ask::before{background:var(--pixg) right top/62% 58% no-repeat;opacity:.9;transform:scaleX(-1)}
.svc-card.ask .no{font-size:30px;line-height:.8;letter-spacing:0}
.svc-card.ask h3{text-shadow:none}
.svc-card.ask p{color:#fff}
.svc-card.ask ul{display:grid;gap:8px;margin-top:6px}
.svc-card.ask li a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:4px 6px 4px 16px;border-radius:99px;background:#fff;color:var(--ink);font-size:13px;font-weight:800;line-height:1.2;transition:background .3s,color .3s}
.svc-card.ask li a .ar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .45s var(--ease)}
.svc-card.ask li a .ar svg{width:13px;height:13px}
.svc-card.ask li a:hover,.svc-card.ask li a:focus-visible{background:var(--ink);color:#fff}
.svc-card.ask li a:hover .ar{background:var(--red);transform:rotate(-45deg)}
.sx-reel{padding-bottom:0}
/* public affairs: one dark panel */
.pa-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4.6vw,76px);padding:clamp(24px,4.4vw,72px);border-radius:32px;background:var(--ink);color:#fff}
.pa-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 60% at 100% 0,rgba(102,248,255,.14),transparent 70%),radial-gradient(50% 60% at 0 100%,rgba(237,28,36,.24),transparent 70%)}
.pa-panel::after{content:"";position:absolute;top:0;right:0;z-index:-1;width:min(34%,300px);height:min(42%,380px);background:var(--pixg) right top/100% 100% no-repeat;opacity:.35}
.pa-side{display:grid;gap:22px;align-content:start}
.pa-side .sx-head{grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:0}
.pa-side .eyebrow{color:#bdbdbd}
.pa-side .lede{color:#d8d8d8}
.pa-ph{border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:#1b1b1b}
.pa-ph img{width:100%;height:100%;object-fit:cover}
.pa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.pa-grid a{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:10px;height:100%;min-height:124px;padding:16px 18px;border-radius:18px;background:#151515;border:1px solid #2c2c2c;font-size:clamp(15px,1.25vw,18px);font-weight:800;letter-spacing:-.015em;line-height:1.2;transition:background .3s,border-color .3s,transform .45s var(--ease)}
.pa-grid a i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#8d8d8d}
.pa-grid a small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .4s var(--ease)}
.pa-grid a:hover,.pa-grid a:focus-visible{background:#1d1d1d;border-color:var(--cyan);transform:translateY(-3px)}
.pa-grid a:hover span{text-shadow:2px -1px 0 rgba(102,248,255,.75),-2px 1px 0 rgba(237,28,36,.75)}
.motion .pa-grid a:hover span{animation:paGl .32s steps(2) 1}
@keyframes paGl{0%{text-shadow:5px -2px 0 rgba(102,248,255,.85),-5px 2px 0 rgba(237,28,36,.85)}50%{text-shadow:-3px 1px 0 rgba(102,248,255,.85),3px -1px 0 rgba(237,28,36,.85)}}
.pa-grid a:hover small,.pa-grid a:focus-visible small{opacity:1;transform:none}
@media (hover:none){.pa-grid a small{opacity:1;transform:none}}
/* workshops: the logos move like the home page's */
.sx-ws{padding:clamp(64px,8vw,130px) 0 0}
.sx-ws .sec-h{margin-bottom:clamp(22px,3vw,40px)}
.sx-ws-r{display:grid;gap:14px;justify-items:start;max-width:30em}
.sx-ws .logos .mq > div{gap:12px;padding-right:12px}
.sx-cta{padding-top:clamp(64px,8vw,130px)}
@media (max-width:1000px){
  .sx-top{grid-template-columns:minmax(0,1fr)}
  .sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-head{grid-template-columns:auto minmax(0,1fr)}
  .sx-head .lede{grid-column:1 / -1}
  .pa-panel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .sx-copy h1{font-size:clamp(34px,11vw,56px)}
  .sx-tiles{grid-template-columns:minmax(0,1fr)}
  .sx-tile{min-height:150px}
  .sx-head{grid-template-columns:minmax(0,1fr);gap:10px} /* the number above the title, so BM "KANDUNGAN" fits at 320 px */
  .sx-head .pnum{font-size:64px}
  .pa-grid{grid-template-columns:minmax(0,1fr)}
  .pa-grid a{min-height:0;grid-template-rows:auto auto}
  .pa-grid a small{display:none}
}
/* service pages (1.4.1): the service's own photo next to "What's included", and the other services as small cards */
.sdet.ph3{grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr) minmax(0,1fr)}
.sd-ph{position:relative;min-height:300px;border-radius:28px;overflow:hidden;background:var(--ink);isolation:isolate}
.sd-ph picture,.sd-ph img{position:absolute;inset:0;width:100%;height:100%}
.sd-ph img{object-fit:cover;object-position:50% 35%;transition:transform 1.1s var(--ease)}
.sd-ph::after{content:"";position:absolute;left:0;bottom:0;z-index:1;width:46%;height:42%;background:var(--pixg) left bottom/100% 100% no-repeat;opacity:.6;pointer-events:none}
.sd-ph:hover img{transform:scale(1.06)}
.sd-box.k{position:relative;isolation:isolate;overflow:hidden}
.sd-box.k::after{content:"";position:absolute;top:0;right:0;z-index:-1;width:42%;height:60%;background:var(--pixg) right top/100% 100% no-repeat;opacity:.3;transform:scaleX(-1)}
.svc-cards.mini .svc-card{min-height:clamp(220px,19vw,290px)}
.svc-cards.mini .svc-card h3{font-size:clamp(17px,1.35vw,21px)}
.svc-card.all{background:var(--ink)}
.svc-card.all::before{background:var(--pixg) right top/70% 60% no-repeat;opacity:.7}
@media (max-width:1000px){.sdet.ph3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sd-ph{grid-row:span 2}}
@media (max-width:800px){.sdet.ph3{grid-template-columns:minmax(0,1fr)}.sd-ph{grid-row:auto;min-height:0;aspect-ratio:4/3}}
@media (max-width:600px){.svc-cards.mini{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-cards.mini .svc-card{min-height:170px;padding:14px}.svc-cards.mini .svc-card h3{font-size:15px}
  /* 1.4.2: at 15 px "COLLABORATIONS" (146 px) was cut off in a 111 px card on a 320 px phone; the title now fits the card */
  .svc-cards.mini .svc-card{container-type:inline-size}.svc-cards.mini .svc-card h3{font-size:min(15px,10.2cqi)}.svc-cards.mini .svc-card .go span:first-child{display:none}.svc-cards.mini .svc-card .go{padding:0 4px}}
.partner-band{display:grid;grid-template-columns:auto 1fr auto;gap:28px 48px;align-items:center;padding:clamp(30px,4vw,56px);border-radius:32px;background:var(--soft)}
.duo{display:flex;align-items:center;gap:16px}
.duo img{height:72px;width:auto}
.duo span{font-size:28px;font-weight:300;color:var(--muted)}
@media (max-width:900px){.partner-band{grid-template-columns:minmax(0,1fr)}}

/* -- clients page -- */
.ccat{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:clamp(40px,5vw,70px) 0;border-top:1.5px solid var(--ink)}
.ccat .side{position:sticky;top:calc(var(--hdr) + 24px);align-self:start;display:grid;gap:10px}
.ccat h2{font-size:clamp(28px,3vw,44px);font-weight:900;letter-spacing:-.035em;line-height:1;text-transform:uppercase}
/* 1.4.2: "MULTINATIONALS" was 393 px wide in the 320 px side column at 1440 and ran into the first logo card; every
   category title is now capped by the column's width, so they all stay the same size and inside it */
.ccat .side{container-type:inline-size}
.ccat h2{font-size:min(clamp(28px,3vw,44px),10.6cqi)}
.ccat .cn{font-size:clamp(60px,7vw,110px);font-weight:900;line-height:.8;letter-spacing:-.06em;color:var(--red)}
.ccat .side p{font-size:14.5px;color:var(--muted);max-width:24em}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lc{position:relative;display:grid;grid-template-rows:1fr auto;gap:10px;justify-items:center;padding:24px 14px 16px;background:#fff;border:1px solid var(--line);border-radius:20px;text-align:center;transition:background .3s,border-color .3s}
.lc .lim{width:96px;height:96px;display:grid;place-items:center}
.lc .lim img{width:96px;height:96px;object-fit:cover;border-radius:18px;box-shadow:0 0 0 1px var(--line);transition:transform .6s var(--ease)}
.lc:hover .lim img{transform:scale(1.07) rotate(-2deg)}
.lc .lim i{font-style:normal;display:grid;place-items:center;width:96px;height:96px;border-radius:18px;background:var(--ink);color:#fff;font-weight:900;font-size:15px;letter-spacing:-.02em;text-transform:uppercase;line-height:1.05;padding:8px;transition:background .3s}
.lc:hover .lim i{background:var(--red)}
.lc .n{font-size:13px;font-weight:700;line-height:1.3}
.lc .x{position:absolute;right:10px;top:8px;font-size:13px;opacity:0;transition:opacity .3s}
a.lc:hover .x{opacity:1}
a.lc:hover{background:var(--soft)}
@media (max-width:900px){.ccat{grid-template-columns:minmax(0,1fr)}.ccat .side{position:static}.lgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.lc .lim,.lc .lim img,.lc .lim i{width:76px;height:76px}.lc .lim i{font-size:12px}}
.jump{display:flex;flex-wrap:wrap;gap:8px}
.jump a{padding:10px 16px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:13px;font-weight:700;transition:box-shadow .25s,background .25s,color .25s}
.jump a:hover{background:var(--ink);color:#fff;box-shadow:none}
.jump a em{font-style:normal;color:var(--muted);margin-left:6px}
.jump a:hover em{color:#bbb}

/* -- news page -- */
.feat{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.feat .side{display:grid;gap:20px}
.fcard{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--ink);color:#fff;min-height:260px;isolation:isolate}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.fcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85))}
.fcard:hover img{transform:scale(1.05)}
.fcard .tx{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,34px);display:grid;gap:10px}
.fcard time{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d0d0d0}
.fcard h3{font-size:clamp(20px,2vw,30px);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.feat > .fcard{min-height:min(70vh,620px)}
.feat > .fcard h3{font-size:clamp(26px,3.2vw,46px)}
@media (max-width:900px){.feat{grid-template-columns:minmax(0,1fr)}.feat > .fcard{min-height:420px}}
.year{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(20px,4vw,60px);border-top:1.5px solid var(--ink);padding-top:22px;margin-top:40px}
.year h3{position:sticky;top:calc(var(--hdr) + 20px);align-self:start;font-size:clamp(46px,6vw,96px);font-weight:900;letter-spacing:-.05em;line-height:.85}
.year h3 small{display:block;margin-top:10px;font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--muted)}
.nrow{display:grid;grid-template-columns:120px minmax(0,1fr) auto 36px;gap:18px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);transition:color .25s,padding .5s var(--ease)}
.nrow:first-child{padding-top:4px}
.nrow time{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.nrow b{font-size:clamp(17px,1.6vw,22px);font-weight:800;line-height:1.3;letter-spacing:-.01em}
.nrow .tag{font-size:10.5px;padding:5px 11px;color:var(--muted)}
.nrow .ar{font-size:20px;transition:transform .4s var(--ease)}
.nrow:hover{color:var(--red-t);padding-left:12px}
.nrow:hover .ar{transform:translateX(6px)}
@media (max-width:900px){.year{grid-template-columns:minmax(0,1fr)}.year h3{position:static}.nrow{grid-template-columns:minmax(0,1fr) 28px;gap:6px 14px}.nrow .tag{white-space:normal}.nrow time{grid-column:1}.nrow b{grid-column:1}.nrow .tag{grid-column:1;justify-self:start}.nrow .ar{grid-column:2;grid-row:1/4}}
.outlets{font-size:clamp(40px,6.6vw,110px);font-weight:900;line-height:1;letter-spacing:-.045em;text-transform:uppercase;padding:12px 0}
.outlets span{display:inline-flex;align-items:center;gap:.35em;padding-right:.35em}
.outlets span i{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--red)}
.outlets.o span{color:#3b3b3b}
.outlets.o span i{background:var(--cyan)}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:#262626;border:1px solid #262626;border-radius:24px;overflow:hidden}
.clip{display:flex;flex-direction:column;gap:14px;padding:26px;background:var(--ink);min-height:230px;transition:background .3s}
.clip:hover{background:#151515}
.clip .o{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.clip .hl{font-size:18px;font-weight:700;line-height:1.35;color:#f2f2f2}
.clip .links{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;font-weight:700}
.clip .links a{color:#cfcfcf;border-bottom:1px solid #555;padding-bottom:2px}
.clip .links a:hover{color:#fff;border-color:var(--red)}

/* -- contact page: the dark box with phone, email, place and socials -- */
.cbox{display:grid;gap:14px;padding:26px;border-radius:24px;background:var(--ink);color:#fff}
.cbox .cl{display:grid;gap:2px}
.cbox .cl span{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9b9b9b}
.cbox .cl a{font-size:clamp(18px,1.7vw,24px);font-weight:800;letter-spacing:-.02em}
.cbox .cl a:hover{color:var(--cyan)}
.soc{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px;border-top:1px solid #2a2a2a}
.soc a{font-size:13px;font-weight:700;padding:8px 12px;border-radius:99px;background:#1c1c1c;color:#ddd;transition:background .25s,color .25s}
.soc a:hover{background:var(--red);color:#fff}

/* -- strategic counsel -- */
.sc-hero .duo{gap:clamp(14px,2vw,26px)}
.sc-hero .duo img{height:clamp(70px,9vw,120px)}
.sc-hero .duo span{font-size:clamp(30px,4vw,56px)}
.motion .sc-hero .duo img:first-child{animation:inl .45s var(--ease) both}
.motion .sc-hero .duo img:last-child{animation:inr .45s var(--ease) both}
.motion .sc-hero .duo span{animation:fadein .3s .2s both}
@keyframes inl{from{transform:translateX(-60px);opacity:0}}
@keyframes inr{from{transform:translateX(60px);opacity:0}}
@keyframes fadein{from{opacity:0}}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2a2a2a;border-radius:28px;overflow:hidden}
.facts div{background:var(--ink);padding:clamp(24px,3vw,44px);display:grid;gap:10px;align-content:start;container-type:inline-size} /* 1.4.1: the exact views shrink to fit */
.facts b{font-size:clamp(56px,7vw,110px);font-weight:900;letter-spacing:-.06em;line-height:.85}
.facts span{font-weight:600;color:#d0d0d0}
.facts small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8c8c8c}
@media (max-width:800px){.facts{grid-template-columns:minmax(0,1fr)}}
.props{display:grid;grid-template-columns:minmax(120px,200px) 1fr;border-top:1.5px solid var(--ink)}
.props dt,.props dd{padding:16px 0;border-bottom:1px solid var(--line)}
.props dt{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:19px}
.props dd{font-weight:600}
.props a{border-bottom:1.5px solid currentColor}
.props a:hover{color:var(--red-t)}
@media (max-width:560px){.props{grid-template-columns:minmax(0,1fr)}.props dt{border-bottom:0;padding-bottom:0}}
.hgal{display:flex;gap:16px;overflow:hidden}
.hgal figure{flex:none;width:min(62vw,760px);aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--soft)}
.hgal figure img{width:100%;height:100%;object-fit:cover}
.hgal .in2{display:flex;gap:16px;will-change:transform}
@media (max-width:700px){.hgal{overflow-x:auto;scroll-snap-type:x mandatory}.hgal figure{width:84vw;scroll-snap-align:start}}
.duo-svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.duo-svc > div{padding:clamp(24px,3vw,40px);border-radius:24px;background:var(--soft);display:grid;gap:18px;align-content:start}
.duo-svc > div.k{background:var(--ink);color:#fff}
.duo-svc > div.k .chips span{background:#1f1f1f;color:#eee}
.duo-svc > div:not(.k) .chips span{background:#fff}
@media (max-width:800px){.duo-svc{grid-template-columns:minmax(0,1fr)}}

/* -- story (article) pages -- */
.rprog{position:fixed;left:0;top:0;z-index:125;height:3px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
.art-h{padding:calc(var(--hdr) + clamp(50px,7vw,100px)) 0 clamp(30px,4vw,56px)}
.art-h .wrap{max-width:1100px;display:grid;gap:22px}
.art-h h1{font-size:clamp(32px,5.4vw,80px);font-weight:900;line-height:.98;letter-spacing:-.04em;overflow-wrap:break-word}
.phero h1,.nextcase b{overflow-wrap:break-word}
/* service page titles: as big as the d2 size, but never wider than the screen for their longest word (--lw letters) */
.fitw{font-size:clamp(26px,min(7.4vw,calc((100vw - 2 * var(--pad)) / (var(--lw,10) * .8))),124px)}
.art-h .crumbs{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.art-h .crumbs a:hover{color:var(--red-t)}
.art-hero{max-width:1100px;margin:0 auto;padding:0 var(--pad)}
.art-hero figure{border-radius:var(--r);overflow:hidden;background:var(--soft)}
.art-hero img{width:100%;max-height:78vh;object-fit:cover}
.art-body{max-width:760px;margin:0 auto;padding:clamp(40px,5vw,70px) var(--pad) 0;font-size:18px;line-height:1.75}
.art-body p,.art-body ul{margin:0 0 1.2em}
.art-body ul{padding-left:1.2em;list-style:disc}
.art-body li{margin-bottom:.4em}
.art-body h2{font-size:clamp(24px,2.4vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.15;margin:1.6em 0 .6em}
.art-body a{color:var(--red-t);border-bottom:1.5px solid currentColor}
.art-body a.btn{color:var(--f);border:0}
.art-body .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.6em 0}
.art-body .gal figure{border-radius:18px;overflow:hidden;background:var(--soft)}
.art-body .gal img{width:100%;height:100%;object-fit:cover}
.art-body figure.hero{display:none}
.art-body .links{display:flex;flex-wrap:wrap;gap:10px;margin:2em 0 0}

/* -- shared CTA band on inner pages -- */
.band-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(30px,4vw,60px);border-radius:32px;background:var(--red);color:#fff}
.band-cta h2{font-size:clamp(min(32px,7.4vw),4.6vw,72px);overflow-wrap:anywhere;font-weight:900;letter-spacing:-.045em;line-height:.92;text-transform:uppercase}
.band-cta .eyebrow{color:var(--ink)}
.band-cta .eyebrow::before{background:#fff}
.cb-svc{font-size:15px;font-weight:700;color:var(--ink)}
.cb-svc a{border-bottom:1.5px solid currentColor}
.cb-svc a:hover{color:#fff}

/* =========================================================
   1.2.0: CONTACT, "NOT READY YET?", SERVICE / CONTACT / PRIVACY PAGES
   ========================================================= */
/* -- the two big options: WhatsApp (red) and email (black); the fill sweeps up on hover like the buttons -- */
.copts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left}
.copt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:92px;padding:16px 16px 16px 18px;border-radius:24px;background:var(--red);color:#fff;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease)}
.copt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .45s var(--ease)}
.copt:hover::before,.copt:focus-visible::before{transform:none}
.copt.em{background:var(--ink)}
.copt.em::before{background:var(--red)}
.copt .ic{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#fff;color:var(--red);flex:none}
.copt.em .ic{color:var(--ink)}
.copt .ic svg{width:25px;height:25px}
.copt .tx{display:grid;gap:3px;min-width:0}
.copt small{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#cfcfcf;transition:color .3s}
.copt.wa small{color:var(--ink)}
.copt.wa:hover small,.copt.wa:focus-visible small{color:#cfcfcf}
.copt.em:hover small,.copt.em:focus-visible small{color:var(--ink)}
.copt b{font-size:clamp(19px,1.9vw,24px);font-weight:900;letter-spacing:-.025em;line-height:1.1;overflow-wrap:anywhere}
.copt .ar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);transition:transform .45s var(--ease)}
.copt:hover .ar,.copt:focus-visible .ar{transform:rotate(-45deg)}
.copt .ar svg{width:15px;height:15px}
@media (max-width:640px){.copts{grid-template-columns:minmax(0,1fr);gap:10px}.copt{min-height:78px;gap:12px;padding:14px}.copt .ic{width:44px;height:44px;border-radius:14px}.copt .ar{width:38px;height:38px}}
/* phones: the email address stays on one line (smaller type; the arrow goes under 400px) */
/* 1.4.0: the address stays on one line (it broke as "hello@rojakbytes.co / m") */
.copt.em b{font-size:clamp(16px,1.5vw,21px);letter-spacing:-.03em;overflow-wrap:normal;white-space:nowrap}
@media (max-width:640px){.copt.em b,.ctc .copt.em b{font-size:clamp(14px,4.4vw,19px);letter-spacing:-.035em}}
@media (max-width:400px){.copt{grid-template-columns:auto minmax(0,1fr)}.copt .ar{display:none}}

/* -- the contact sheet: a bottom sheet on phones, a card in the middle on bigger screens -- */
.csheet{position:fixed;inset:auto 0 0;width:min(560px,100%);max-width:100%;max-height:min(92vh,92svh,720px);margin:auto auto 0;padding:0;border:0;border-radius:28px 28px 0 0;background:#fff;color:var(--ink);box-shadow:0 -24px 60px -24px rgba(0,0,0,.5);overflow:auto;overscroll-behavior:contain}
.csheet::backdrop{background:rgba(10,10,10,.64);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.csheet[open]{animation:cs-in .32s var(--ease)}
@keyframes cs-in{from{transform:translateY(36px);opacity:0}}
@media (min-width:700px){.csheet{inset:0;margin:auto;border-radius:30px;max-height:min(88vh,700px)}}
.cs-in{position:relative;display:grid;gap:16px;padding:26px clamp(18px,4vw,30px) calc(24px + env(safe-area-inset-bottom))}
/* the pixel strip along the top edge: red, cyan, black */
.cs-in::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--red) 0 54%,#fff 54% 56%,var(--cyan) 56% 66%,#fff 66% 68%,var(--ink) 68% 100%)}
.cs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.cs-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--soft);flex:none;transition:background .25s,color .25s,transform .45s var(--ease)}
.cs-x:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.cs-x svg{width:16px;height:16px}
.cs-h{font-size:clamp(32px,6.4vw,48px);font-weight:900;line-height:.92;letter-spacing:-.045em;text-transform:uppercase;text-shadow:-2px 0 var(--cyan),2px 0 var(--red)}
.cs-svc{font-size:14.5px;font-weight:600;color:var(--muted)}
.cs-svc[hidden]{display:none}
.cs-svc b{color:var(--ink);font-weight:800}
.csheet .copts{grid-template-columns:minmax(0,1fr);gap:10px}
.csheet .copt{min-height:80px}
.cs-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 16px;border-radius:18px;background:var(--soft);font-weight:700;font-size:15px}
.copy{min-height:44px;padding:0 18px;border-radius:99px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:background .25s,color .25s}
.copy:hover{background:var(--red)}
.cs-fine{font-size:14px;font-weight:500;color:var(--muted)}
.cs-fine a{color:var(--ink);font-weight:800;border-bottom:1.5px solid currentColor}
.cs-fine a:hover{color:var(--red-t)}
.cs-st{font-size:13.5px;font-weight:700}
.cs-st:empty{display:none}

/* -- "Not ready yet?" before the footer: follow us, and the two extras when they are switched on -- */
.follow{padding:clamp(56px,7vw,110px) 0;background:rgba(243,243,240,.6);border-top:1.5px solid var(--ink)}
.fl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:26px clamp(30px,5vw,80px);align-items:end}
.fl-h{display:grid;gap:14px}
.fl-soc{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
/* 1.4.0: round icon buttons, one per platform */
.fsoc{display:grid;place-items:center;width:clamp(58px,5.2vw,72px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:#fff;transition:background .3s,transform .45s var(--ease)}
.fsoc svg{width:42%;height:42%}
.fsoc:hover,.fsoc:focus-visible{background:var(--red);transform:translateY(-4px)}
.fl-x{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding-top:24px;border-top:1px solid #d6d6d1}
.fl-opt{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.fl-opt p{font-size:16px;font-weight:600;max-width:36em}
.fl-pdf{margin:0}
@media (max-width:900px){.fl{grid-template-columns:minmax(0,1fr);align-items:start}.fl-soc{justify-content:flex-start}}
@media (max-width:400px){.fl-soc{gap:10px}.fsoc{width:54px}}

/* -- service pages -- */
.sdet{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:stretch}
.sd-box{display:grid;gap:18px;align-content:start;padding:clamp(24px,3vw,44px);border-radius:28px;background:var(--soft)}
.sd-box.k{background:var(--ink);color:#fff}
.sd-list{border-top:1.5px solid currentColor}
.sd-list li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(127,127,127,.35);font-size:clamp(18px,1.8vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.sd-list li::before{content:"";flex:none;width:10px;height:10px;background:var(--red);transform:rotate(45deg)}
.sd-who{font-size:clamp(24px,2.6vw,38px);font-weight:900;letter-spacing:-.035em;line-height:1.05}
@media (max-width:800px){.sdet{grid-template-columns:minmax(0,1fr)}}

/* -- contact page -- */
.ctc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.ctc .copts{grid-template-columns:minmax(0,1fr)}
.ctc .copt{min-height:clamp(96px,10vw,132px)}
.ctc .copt b{font-size:clamp(22px,2.4vw,32px)}
.ctc-box .cl b{font-size:clamp(16px,1.5vw,20px);font-weight:800;letter-spacing:-.01em}
.cpy{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ctc-box .copy{min-height:36px;padding:0 14px;background:#fff;color:var(--ink);font-size:11px}
.ctc-box .copy:hover{background:var(--red);color:#fff}
/* 1.4.1 (Mirzan, 7 Nov 2026): the contact page lists WhatsApp and email once (the two big options); the box under them
   has the social accounts as round icons and the copy button, and the footer's "Talk to us" strip stays off this page */
.soc.ico{gap:10px;padding-top:12px}
.soc.ico a{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;background:#1c1c1c;color:#fff;transition:background .25s,transform .35s var(--ease)}
.soc.ico a:hover,.soc.ico a:focus-visible{background:var(--red);color:#fff;transform:translateY(-3px)}
.soc.ico svg{width:20px;height:20px}
.ctc-copy{padding-top:14px;border-top:1px solid #2a2a2a}
body:has(.ctc-box) .fcta{display:none}
.entity{grid-column:1/-1;margin-top:10px;font-size:15px;font-weight:500;color:var(--muted);max-width:52em}
.ctc-more{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;font-weight:600}
@media (max-width:900px){.ctc{grid-template-columns:minmax(0,1fr)}}

/* -- privacy notice -- */
.prose{max-width:820px;display:grid;gap:14px;font-size:17px;line-height:1.7}
.prose h2{margin-top:24px}
.prose h2:first-child{margin-top:0}
.prose a{color:var(--red-t);font-weight:600;border-bottom:1.5px solid currentColor}

/* ---------- WhatsApp button that stays on screen on phones (footer part, every page) ---------- */
.wa-float{display:none}
@media (max-width:768px){
  .wa-float{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:100;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border-radius:99px;background:var(--red);color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 12px 28px -12px rgba(0,0,0,.55),0 0 0 2px #fff;transition:opacity .2s,transform .3s var(--ease)}
  .wa-float svg{width:20px;height:20px;flex:none}
  .menu-open .wa-float,.wa-off .wa-float{opacity:0;pointer-events:none;transform:translateY(16px)}
  .sheet-open .wa-float{opacity:0;pointer-events:none}
  .ftr .legal{padding-bottom:calc(28px + 66px + env(safe-area-inset-bottom))}
}

/* ---------- draft notes (stripped from the upload) ---------- */
.tbc{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px dashed #b26b00;border-radius:10px;background:#fff7e6;color:#6b3f00;font-size:12.5px;font-weight:600;line-height:1.35}
.tbc::before{content:"Decide";font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#b26b00}
.tbcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.review{position:fixed;left:12px;bottom:12px;z-index:115;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;border-radius:99px;background:#fff7e6;border:1.5px dashed #b26b00;color:#6b3f00;font-size:12.5px;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.3)}
.review button{padding:8px 14px;border-radius:99px;background:#6b3f00;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.clean .tbc,.clean .tbcs{display:none}
.clean .review{opacity:.55}
@media (max-width:560px){.review span{display:none}}

/* ---------- 1.3.0: the CI pastel background ----------
   Two fixed washes behind everything. They move with transform only (cheap) and stand still for reduced motion. */
body::before,body::after{content:"";position:fixed;z-index:-2;pointer-events:none;inset:-12vmax}
/* 1.4.1: the pixel layer (site.js bgPixels) sits on the washes and under everything else */
.bgpix{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
@media print{.bgpix{display:none}}
body::before{background:radial-gradient(52vmax 40vmax at 18% 20%,var(--sky),rgba(202,255,255,0) 72%),radial-gradient(46vmax 38vmax at 84% 86%,rgba(202,255,255,.9),rgba(202,255,255,0) 72%),radial-gradient(30vmax 24vmax at 52% 50%,rgba(202,255,255,.45),rgba(202,255,255,0) 70%)}
body::after{background:radial-gradient(46vmax 36vmax at 84% 18%,rgba(247,188,193,.5),rgba(247,188,193,0) 72%),radial-gradient(48vmax 36vmax at 16% 84%,rgba(247,188,193,.44),rgba(247,188,193,0) 72%)}
.motion body::before{animation:wash1 38s ease-in-out infinite alternate}
.motion body::after{animation:wash2 46s ease-in-out infinite alternate}
@keyframes wash1{to{transform:translate3d(8vmax,6vmax,0) rotate(8deg)}}
@keyframes wash2{to{transform:translate3d(-9vmax,-5vmax,0) rotate(-10deg)}}

/* ---------- 1.3.0: top bar ----------
   Wide screens: Work, Services, Clients, News, Strategic Counsel, Contact us and EN | BM in the bar, no hamburger.
   Scrolling down (site.js adds .mini past 140px) folds them all into the hamburger, which then floats alone.
   Up to 1100px the items don't fit, so the hamburger is always there and the bar keeps Contact us and EN | BM. */
.tnav{display:flex;align-items:center;gap:clamp(14px,1.5vw,26px);margin-left:auto;margin-right:clamp(6px,1vw,16px);transition:opacity .3s,transform .45s var(--ease),visibility 0s}
.tnav a{position:relative;padding:8px 0;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:color .25s}
.tnav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tnav a:hover::after,.tnav a[aria-current]::after{transform:none}
.tnav a[aria-current]{color:var(--red-t)}
.hdr.dark .tnav a{color:#fff}
.hdr.dark .tnav a[aria-current]{color:#fff}
.brand,.hdr-r > a{transition:opacity .3s,transform .45s var(--ease),visibility 0s}
.mbtn{transition:opacity .3s,transform .45s var(--ease),box-shadow .3s}
@media (min-width:1101px){
  html:not(.menu-open) .hdr:not(.mini) .mbtn{position:absolute;right:var(--pad);opacity:0;transform:scale(.6);pointer-events:none;visibility:hidden}
}
@media (max-width:1100px){.tnav{display:none}}
.hdr.mini::before{opacity:0}
.hdr.mini .brand,.hdr.mini .tnav,.hdr.mini .hdr-r > a{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .45s var(--ease),visibility 0s .3s}
.hdr.mini .tnav,.hdr.mini .hdr-r > a{transform:translateX(30px) scale(.94)}
.hdr.mini .brand{transform:translateY(-8px)}
.hdr.mini .mbtn{box-shadow:inset 0 0 0 1.5px var(--ink),0 10px 26px -10px rgba(0,0,0,.35)}
.menu-open .hdr.mini .brand,.menu-open .hdr.mini .hdr-r > a{opacity:1;visibility:visible;transform:none}

/* ---------- reduced motion: nothing moves on its own ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mq{flex-wrap:wrap;white-space:normal}
  .mq > div{animation:none;flex-wrap:wrap}
  .mq > div[aria-hidden]{display:none}
}

/* 1.4.0: exact view counts. [rojak_c3_views fit="1"] gives the number its length (--c); it shrinks to fit its box
   (Montserrat 900 digits and commas are about .53em each), and short numbers keep the full size */
.kpi .hm,.mets,.ccard .body{container-type:inline-size}
i[data-count][style*="--c"]{font-style:normal;white-space:nowrap;font-size:min(1em,calc(100cqi * var(--xf,1) / (var(--c) * .53)))}
.mets li i[data-count][style*="--c"]{--xf:.5}
:lang(ms) .vcard .cap i{font-size:min(10.5px,calc((100cqi - 32px) / 19.8))}

/* 1.4.3 (Mirzan, 8 Nov 2026: "remove any awkward gaps", "also look at other pages for the awkward gaps and spaces"):
   a tighter rhythm on every page. The space at the top and bottom of a section is about a third smaller (about 84 px
   instead of 130 at 1440, 48 instead of 72 on a phone), and a heading sits closer to what it introduces. The 1.4.2
   rule above still starts the second of two light sections close to the line, so two sections are about 100 px apart. */
.sec{padding:clamp(48px,6vw,84px) 0}
.sec.tight{padding:clamp(40px,4.5vw,64px) 0}
:is(.svc,.reel,.cta){padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(48px,6vw,84px)}
:is(.paths,.feat3){padding-bottom:clamp(48px,6vw,84px)}
:is(.sx-prac,.sx-ws){padding-top:clamp(48px,6vw,84px)}
.nums{padding-top:clamp(56px,6.5vw,96px);padding-bottom:clamp(56px,6.5vw,96px)}
.nextcase{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.follow{padding-top:clamp(40px,4.5vw,64px);padding-bottom:clamp(40px,4.5vw,64px)}
.sec-h{margin-bottom:clamp(24px,3vw,44px)}
.sx-reel{padding-bottom:0} /* the services page's Works row stays right above "Practice 02", as before */
.art-h + .art-body{padding-top:clamp(4px,1vw,14px)} /* a story with no top photo: the text starts under the date */