/* QTech — shared styles. Scale: 1rem = 100px at 1440px (desktop) / 390px (mobile). */
/* Inter Tight (self-hosted variable font, OFL) — one file per alphabet covers weights 400–600 */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-tight-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-tight-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-tight-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Fluid scale: 1rem = 100px at 1440px wide (desktop) and at 390px wide (mobile), like the reference site. */
html { font-size: 6.944vw; box-sizing: border-box; }
@media (max-width: 768px) { html { font-size: 25.641vw; overflow-x: hidden; } }
*, *::before, *::after { box-sizing: inherit; }
:root { color-scheme: dark;
  --grey: #767676; --dim: #434343; --soft: #1d1d1d;
  --e-btn: cubic-bezier(.51,.01,.2,1);
  --p1io: cubic-bezier(.45,0,.55,1);
  --p3io: cubic-bezier(.65,0,.35,1);
  --expo: cubic-bezier(.16,1,.3,1);
}
body, h1, h2, h3, h4, p, ul { margin: 0; padding: 0; font-weight: normal; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
body { background: #000; color: #fff; font-family: "Inter Tight", system-ui, sans-serif; font-size: .2rem; line-height: .24rem; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.container { width: 100%; max-width: 13.4rem; margin: auto; }
@media (max-width: 768px) { .container { padding-left: .1489rem; padding-right: .1489rem; } }

/* ---------- type scale (values from the reference) ---------- */
.a5, h1 { font-size: 1.08rem; line-height: .9; letter-spacing: -.02em; font-weight: 600; }
.a4 { font-size: .8rem; line-height: .72rem; letter-spacing: -.016rem; font-weight: 600; }
.a3 { font-size: .54rem; line-height: .486rem; letter-spacing: -.0054rem; font-weight: 600; }
.a2 { font-size: .4rem; line-height: .392rem; letter-spacing: -.004rem; font-weight: 600; }
.a1 { font-size: .24rem; line-height: .2208rem; letter-spacing: .004em; }
.b0, p { font-size: .22rem; line-height: .264rem; letter-spacing: -.0022rem; }
.b1 { font-size: .18rem; line-height: .216rem; letter-spacing: -.0018rem; }
.b2, .btn { font-size: .14rem; line-height: .1568rem; letter-spacing: -.0014rem; }
.fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; }
@media (max-width: 768px) {
  .a5, h1 { font-size: .44rem; line-height: .418rem; letter-spacing: -.0044rem; }
  .a4, .a3, .a2 { font-size: .32rem; line-height: .304rem; letter-spacing: -.0032rem; }
  .a1 { font-size: .2rem; line-height: .19rem; }
  .b0, p, .b1 { font-size: .16rem; line-height: .1952rem; letter-spacing: -.0032rem; }
  .b2, .btn { font-size: .14rem; line-height: .168rem; }
}

/* ---------- buttons ---------- */
.btn { display: inline-block; color: #fff; padding: .17rem .26rem; border: 2px solid var(--soft); border-radius: .7rem; font-weight: 500; position: relative; transition: .3s var(--e-btn); }
.btn .fill { position: absolute; inset: 0; border-radius: .7rem; background: var(--soft); transform: scale(0); transition: transform .3s var(--e-btn); z-index: 1; }
.btn span { position: relative; z-index: 2; }
.btn:hover .fill { transform: scale(1); }
.circle { width: .5rem; height: .5rem; border-radius: 50%; background: var(--soft); position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .3s var(--e-btn); }
.circle .ov { position: absolute; inset: 0; border-radius: 50%; background: var(--dim); transform: scale(0); transition: transform .3s var(--e-btn); z-index: 1; }
.circle svg { width: .14rem; height: auto; position: relative; z-index: 2; }
.arrow-btn:hover .circle, .link-btn:hover .circle { transform: scale(1.08); }
.arrow-btn:hover .circle .ov, .link-btn:hover .circle .ov { transform: scale(1); }
.arrow-btn { transition: opacity .3s; }
.arrow-btn.prev svg { transform: scaleX(-1); }
.arrow-btn.disabled { opacity: .35; pointer-events: none; }
.arrows { display: flex; gap: .05rem; align-items: center; }
.link-btn { display: flex; align-items: center; width: fit-content; font-weight: 500; margin-top: .4rem; }
.link-btn .circle { margin-left: .3rem; }
@media (max-width: 768px) { .circle { width: .4rem; height: .4rem; } .title-arrows .arrows { display: none; } }

/* ---------- reveal helpers ---------- */
.split-lines { overflow: hidden; padding-bottom: .15em; margin-bottom: -.15em; }
.js [data-line-reveal]:not(.ready) { visibility: hidden; }
.js [data-fade-reveal] { opacity: 0; }
@media (max-width: 768px) { .js [data-fade-reveal] { opacity: 1; } }

/* ---------- preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 1099; pointer-events: none; }
.preloader .bg { position: absolute; inset: 0; background: #fff; transform-origin: top; }
.preloader .logo-outer { padding-top: .21rem; position: relative; }
.preloader .logo-preload { width: fit-content; overflow: hidden; transform: translateY(calc(50vh - 50% - .21rem)); }
.preloader .logo-preload .brand { color: #000; transform: translateY(150%); }
.preloader .logo-preload .brand img { filter: invert(1); }

/* ---------- header ---------- */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #000; padding: .21rem 0 .34rem; transition: transform .3s ease-in-out; }
.scroll-down header { transform: translateY(-100%); }
body:not(.scroll-past-top) header { transform: translateY(0); }
header.hide-header { z-index: 0; }
header .container { display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; height: .24rem; font-weight: 600; font-size: .31rem; letter-spacing: -.02em; line-height: 1; }
.brand img { height: .24rem; width: auto; margin-right: .01rem; }
.brand sup { font-size: .13rem; font-weight: 500; align-self: flex-start; margin-left: .02rem; margin-top: -.04rem; line-height: 1; }
.main-nav ul { display: flex; gap: .2rem; align-items: center; }
.main-nav .nav-link { position: relative; font-weight: 500; }
.main-nav .hover-line { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.main-nav .nav-link:hover .hover-line { transform: scaleX(1); transform-origin: left; }
.main-nav .btn { padding: .1rem .2rem; }
.hamburger { display: none; }
.mobile-nav { display: none; }
@media (max-width: 768px) {
  .brand { height: .23rem; font-size: .29rem; } .brand img { height: .23rem; }
  .main-nav { display: none; }
  .hamburger { display: block; padding: .12rem; margin: -.12rem -.12rem -.12rem 0; position: relative; top: -.02rem; }
  .hamburger .wrap { display: flex; flex-direction: column; justify-content: space-between; width: .25rem; height: .09rem; }
  .hamburger span { display: block; height: .02rem; width: 100%; background: #fff; transition: transform .2s ease-out; }
  .hamburger.close span:first-child { transform: rotateZ(45deg) translate(.02rem, .03rem); }
  .hamburger.close span:last-child { transform: rotateZ(-45deg) translate(.02rem, -.03rem); }
  .mobile-nav { display: flex; flex-direction: column; justify-content: flex-end; gap: .04rem; position: fixed; inset: 0; z-index: 998; background: #000; padding: 0 .1489rem .4rem; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
  .mobile-nav.open { opacity: 1; visibility: visible; }
  .mobile-nav a { font-weight: 600; transform: translateY(.3rem); opacity: 0; transition: transform .6s var(--expo), opacity .6s; }
  .mobile-nav.open a { transform: none; opacity: 1; }
  .mobile-nav.open a:nth-child(2) { transition-delay: .05s; } .mobile-nav.open a:nth-child(3) { transition-delay: .1s; }
  .mobile-nav.open a:nth-child(4) { transition-delay: .15s; } .mobile-nav.open a:nth-child(5) { transition-delay: .2s; }
}

/* ---------- placeholder media (replace with your videos / images) ---------- */
.media { position: relative; overflow: hidden; background: #111; border-radius: .05rem; contain: paint; }
.media .ph { position: absolute; inset: 0; }
.media .tag { position: absolute; left: .14rem; bottom: .12rem; font-size: .1rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); padding: .02rem .05rem; border-radius: .02rem; z-index: 2; }
@media (max-width: 768px) { .media .tag { font-size: .09rem; left: .1rem; bottom: .08rem; } }
@keyframes gridMove { to { transform: translate(.34rem, .34rem); } }
@keyframes stripeMove { from { transform: translateX(-.4857rem); } to { transform: none; } }
/* Placeholders animate only while on screen, posters only while hovered/active.
   animation-name:none (not just paused) so the browser drops their GPU layers. */
.media:not(.inview) .ph *, .poster:not(.playing) .ph * { animation-name: none !important; }
@keyframes spinS { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-8%); } }
@keyframes tubes { 50% { transform: translateY(-14%); } }
/* "poster" state: placeholders sit still until hovered / active — like a video that plays on hover */

/* ---------- 1. hero title ---------- */
.hero_title { padding-top: 1.82rem; padding-bottom: .6rem; }
.hero_title .title { overflow: hidden; padding-bottom: .082rem; }
.flip-anim { display: inline-block; position: relative; color: transparent; }
.span-flip { position: absolute; top: 0; left: 0; width: max-content; color: #fff; padding-right: .26rem; }
.span-flip .ch { display: inline-block; position: relative; }
.span-flip .ch.last::after { content: "®"; position: absolute; left: 100%; top: .06rem; margin-left: .02rem; font-size: .2rem; line-height: 1; font-weight: 500; letter-spacing: 0; } /* a text glyph, not a mask/image: those force a repaint every frame while the word moves */
@media (max-width: 768px) {
  .hero_title { padding-top: 1.4rem; padding-bottom: .3rem; }
  .hero_title .a5 { letter-spacing: -.01em; }
  .flip-anim { display: block; overflow: hidden; padding-bottom: .15em; margin-bottom: -.15em; }
  .flip-anim.inline { display: inline-block; overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .span-flip .ch.last::after { font-size: .12rem; top: .03rem; }
}

/* ---------- 2. showreel ---------- */
.video_module { padding-bottom: 1rem; }
.video_module .video-wrapper { position: relative; aspect-ratio: 16 / 9; cursor: none; }
.video_module .video-wrapper .media { position: absolute; inset: 0; }
.video_module .animation-overlay { position: absolute; inset: 0; z-index: 3; background: #000; transform-origin: top; pointer-events: none; }
.reel-ph { background: #e9e9e6; display: flex; justify-content: center; gap: 2.2%; padding: 0 12%; }
.reel-ph i { flex: 1; border-radius: 999px; height: 140%; margin-top: -10%; animation: tubes 6s ease-in-out infinite; animation-delay: calc(var(--k) * -.7s); box-shadow: inset 0 0 .4rem rgba(255,255,255,.55), inset -.12rem 0 .3rem rgba(0,0,0,.18); }
.reel-ph b { position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #555 45%, #111 75%); animation: bob 4s ease-in-out infinite; }
.video_module .text-overlay { display: none; }
@media (max-width: 768px) {
  .video_module { padding-bottom: .9rem; }
  .video_module .video-wrapper { aspect-ratio: 390 / 350; cursor: pointer; }
  .video_module .text-overlay { position: absolute; left: 0; bottom: 0; width: 100%; padding: .15rem .2rem; display: flex; align-items: center; justify-content: space-between; z-index: 2; color: #000; }
  .video_module .text-overlay .video-text { font-weight: 500; }
  .video_module .text-overlay .duration { opacity: .5; }
  .video_module .play-button { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
  .video_module .play-button svg { width: .16rem; height: .12rem; }
}
.fullscreen-video { position: fixed; inset: 0; z-index: 1000; background: #000; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.fullscreen-video.show { opacity: 1; visibility: visible; }
.fullscreen-video .media { position: absolute; inset: 0; border-radius: 0; }
.fullscreen-video .close-btn { position: absolute; top: .3rem; right: .5rem; z-index: 3; }
.fullscreen-video .close-btn .circle { background: rgba(29,29,29,.8); }
.fullscreen-video .close-btn:hover .circle { transform: scale(1.08); }
.fullscreen-video .close-btn:hover .ov { transform: scale(1); }
@media (max-width: 768px) { .fullscreen-video .close-btn { top: .15rem; right: .15rem; } }

/* ---------- 3. featured work slider ---------- */
.featured_work_slider { padding-bottom: 2.2rem; }
.title-arrows { display: flex; justify-content: space-between; align-items: center; padding-bottom: .6rem; }
.slider { margin-left: .5rem; cursor: pointer; }
.slider-track { display: flex; gap: .26rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-right: .5rem; overscroll-behavior-x: contain; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track.dragging { scroll-snap-type: none; user-select: none; }
.slider-track > * { flex-shrink: 0; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
.case { width: 4.27rem; display: block; }
.case .media { aspect-ratio: 4.27 / 5.337; }
.case .text { padding-top: .3rem; }
.case .work-name { font-weight: 500; }
.case .work-description { color: var(--grey); margin-top: .05rem; }
@media (max-width: 768px) {
  .featured_work_slider { padding-bottom: 1.2rem; }
  .title-arrows { padding-bottom: .3rem; }
  .slider { margin-left: .1489rem; }
  .slider-track { gap: .15rem; padding-right: .1489rem; }
  .case { width: 2.9rem; }
  .case .text { padding-top: .15rem; }
}

/* ---------- 4. simple text ---------- */
.simple_text { padding-bottom: 1rem; }
.simple_text .big-title { max-width: 12.23rem; }
@media (max-width: 768px) { .simple_text { padding-bottom: .8rem; } .simple_text .big-title { max-width: 2.98rem; } }

/* ---------- 5. rotating clients ring ---------- */
.rotating_slider { padding-bottom: 2.2rem; }
.rotating_slider .wrapper { display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; gap: .57rem; }
.rotating_slider .column { width: 4.1rem; margin-left: 2.18rem; }
.rotating_slider .column.video { width: 6.55rem; margin-left: 0; }
.ring { position: relative; aspect-ratio: 6.55 / 5.458; }
/* 3D tumbling ring of logos (like the reference video), all on the GPU:
   .ring-tilt tilts AND spins the ring in ONE animation (two nested animations would fall back to the main thread),
   each logo runs the exact inverse so it always faces the viewer; perspective makes near logos bigger and
   lets them cover the far ones. Keyframes are pre-computed (smooth sine tilt + steady spin, 20s loop). */
.ring { perspective: 6rem; perspective-origin: 55% 50%; --R: 1.45rem; --S: 1.24rem; }
.ring-tilt, .ring .bub { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.ring-tilt { left: 55%; top: 50%; width: 0; height: 0; animation: ringTumble 20s linear infinite; }
.ring .bub { transform: rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a))); }
.ring .bub b { position: absolute; left: calc(var(--S) / -2); top: calc(var(--S) / -2); width: var(--S); height: var(--S); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 600; font-size: .15rem; letter-spacing: -.01em;
  background: var(--c); color: var(--t, #fff); animation: ringFace 20s linear infinite; }
.ring:not(.inview) .ring-tilt, .ring:not(.inview) .bub b { animation-play-state: paused; }
@keyframes ringTumble {
  0% { transform: rotateX(42.00deg) rotateY(17.87deg) rotateZ(0.00deg); }
  2.78% { transform: rotateX(46.17deg) rotateY(21.72deg) rotateZ(10.00deg); }
  5.56% { transform: rotateX(50.21deg) rotateY(21.02deg) rotateZ(20.00deg); }
  8.33% { transform: rotateX(54.00deg) rotateY(15.86deg) rotateZ(30.00deg); }
  11.11% { transform: rotateX(57.43deg) rotateY(6.86deg) rotateZ(40.00deg); }
  13.89% { transform: rotateX(60.39deg) rotateY(-4.91deg) rotateZ(50.00deg); }
  16.67% { transform: rotateX(62.78deg) rotateY(-18.01deg) rotateZ(60.00deg); }
  19.44% { transform: rotateX(64.55deg) rotateY(-30.86deg) rotateZ(70.00deg); }
  22.22% { transform: rotateX(65.64deg) rotateY(-41.93deg) rotateZ(80.00deg); }
  25% { transform: rotateX(66.00deg) rotateY(-49.87deg) rotateZ(90.00deg); }
  27.78% { transform: rotateX(65.64deg) rotateY(-53.72deg) rotateZ(100.00deg); }
  30.56% { transform: rotateX(64.55deg) rotateY(-53.02deg) rotateZ(110.00deg); }
  33.33% { transform: rotateX(62.78deg) rotateY(-47.86deg) rotateZ(120.00deg); }
  36.11% { transform: rotateX(60.39deg) rotateY(-38.86deg) rotateZ(130.00deg); }
  38.89% { transform: rotateX(57.43deg) rotateY(-27.09deg) rotateZ(140.00deg); }
  41.67% { transform: rotateX(54.00deg) rotateY(-13.99deg) rotateZ(150.00deg); }
  44.44% { transform: rotateX(50.21deg) rotateY(-1.14deg) rotateZ(160.00deg); }
  47.22% { transform: rotateX(46.17deg) rotateY(9.93deg) rotateZ(170.00deg); }
  50% { transform: rotateX(42.00deg) rotateY(17.87deg) rotateZ(180.00deg); }
  52.78% { transform: rotateX(37.83deg) rotateY(21.72deg) rotateZ(190.00deg); }
  55.56% { transform: rotateX(33.79deg) rotateY(21.02deg) rotateZ(200.00deg); }
  58.33% { transform: rotateX(30.00deg) rotateY(15.86deg) rotateZ(210.00deg); }
  61.11% { transform: rotateX(26.57deg) rotateY(6.86deg) rotateZ(220.00deg); }
  63.89% { transform: rotateX(23.61deg) rotateY(-4.91deg) rotateZ(230.00deg); }
  66.67% { transform: rotateX(21.22deg) rotateY(-18.01deg) rotateZ(240.00deg); }
  69.44% { transform: rotateX(19.45deg) rotateY(-30.86deg) rotateZ(250.00deg); }
  72.22% { transform: rotateX(18.36deg) rotateY(-41.93deg) rotateZ(260.00deg); }
  75% { transform: rotateX(18.00deg) rotateY(-49.87deg) rotateZ(270.00deg); }
  77.78% { transform: rotateX(18.36deg) rotateY(-53.72deg) rotateZ(280.00deg); }
  80.56% { transform: rotateX(19.45deg) rotateY(-53.02deg) rotateZ(290.00deg); }
  83.33% { transform: rotateX(21.22deg) rotateY(-47.86deg) rotateZ(300.00deg); }
  86.11% { transform: rotateX(23.61deg) rotateY(-38.86deg) rotateZ(310.00deg); }
  88.89% { transform: rotateX(26.57deg) rotateY(-27.09deg) rotateZ(320.00deg); }
  91.67% { transform: rotateX(30.00deg) rotateY(-13.99deg) rotateZ(330.00deg); }
  94.44% { transform: rotateX(33.79deg) rotateY(-1.14deg) rotateZ(340.00deg); }
  97.22% { transform: rotateX(37.83deg) rotateY(9.93deg) rotateZ(350.00deg); }
  100% { transform: rotateX(42.00deg) rotateY(17.87deg) rotateZ(360.00deg); }
}
@keyframes ringFace {   /* exact inverse of ringTumble */
  0% { transform: rotateZ(-0.00deg) rotateY(-17.87deg) rotateX(-42.00deg); }
  2.78% { transform: rotateZ(-10.00deg) rotateY(-21.72deg) rotateX(-46.17deg); }
  5.56% { transform: rotateZ(-20.00deg) rotateY(-21.02deg) rotateX(-50.21deg); }
  8.33% { transform: rotateZ(-30.00deg) rotateY(-15.86deg) rotateX(-54.00deg); }
  11.11% { transform: rotateZ(-40.00deg) rotateY(-6.86deg) rotateX(-57.43deg); }
  13.89% { transform: rotateZ(-50.00deg) rotateY(4.91deg) rotateX(-60.39deg); }
  16.67% { transform: rotateZ(-60.00deg) rotateY(18.01deg) rotateX(-62.78deg); }
  19.44% { transform: rotateZ(-70.00deg) rotateY(30.86deg) rotateX(-64.55deg); }
  22.22% { transform: rotateZ(-80.00deg) rotateY(41.93deg) rotateX(-65.64deg); }
  25% { transform: rotateZ(-90.00deg) rotateY(49.87deg) rotateX(-66.00deg); }
  27.78% { transform: rotateZ(-100.00deg) rotateY(53.72deg) rotateX(-65.64deg); }
  30.56% { transform: rotateZ(-110.00deg) rotateY(53.02deg) rotateX(-64.55deg); }
  33.33% { transform: rotateZ(-120.00deg) rotateY(47.86deg) rotateX(-62.78deg); }
  36.11% { transform: rotateZ(-130.00deg) rotateY(38.86deg) rotateX(-60.39deg); }
  38.89% { transform: rotateZ(-140.00deg) rotateY(27.09deg) rotateX(-57.43deg); }
  41.67% { transform: rotateZ(-150.00deg) rotateY(13.99deg) rotateX(-54.00deg); }
  44.44% { transform: rotateZ(-160.00deg) rotateY(1.14deg) rotateX(-50.21deg); }
  47.22% { transform: rotateZ(-170.00deg) rotateY(-9.93deg) rotateX(-46.17deg); }
  50% { transform: rotateZ(-180.00deg) rotateY(-17.87deg) rotateX(-42.00deg); }
  52.78% { transform: rotateZ(-190.00deg) rotateY(-21.72deg) rotateX(-37.83deg); }
  55.56% { transform: rotateZ(-200.00deg) rotateY(-21.02deg) rotateX(-33.79deg); }
  58.33% { transform: rotateZ(-210.00deg) rotateY(-15.86deg) rotateX(-30.00deg); }
  61.11% { transform: rotateZ(-220.00deg) rotateY(-6.86deg) rotateX(-26.57deg); }
  63.89% { transform: rotateZ(-230.00deg) rotateY(4.91deg) rotateX(-23.61deg); }
  66.67% { transform: rotateZ(-240.00deg) rotateY(18.01deg) rotateX(-21.22deg); }
  69.44% { transform: rotateZ(-250.00deg) rotateY(30.86deg) rotateX(-19.45deg); }
  72.22% { transform: rotateZ(-260.00deg) rotateY(41.93deg) rotateX(-18.36deg); }
  75% { transform: rotateZ(-270.00deg) rotateY(49.87deg) rotateX(-18.00deg); }
  77.78% { transform: rotateZ(-280.00deg) rotateY(53.72deg) rotateX(-18.36deg); }
  80.56% { transform: rotateZ(-290.00deg) rotateY(53.02deg) rotateX(-19.45deg); }
  83.33% { transform: rotateZ(-300.00deg) rotateY(47.86deg) rotateX(-21.22deg); }
  86.11% { transform: rotateZ(-310.00deg) rotateY(38.86deg) rotateX(-23.61deg); }
  88.89% { transform: rotateZ(-320.00deg) rotateY(27.09deg) rotateX(-26.57deg); }
  91.67% { transform: rotateZ(-330.00deg) rotateY(13.99deg) rotateX(-30.00deg); }
  94.44% { transform: rotateZ(-340.00deg) rotateY(1.14deg) rotateX(-33.79deg); }
  97.22% { transform: rotateZ(-350.00deg) rotateY(-9.93deg) rotateX(-37.83deg); }
  100% { transform: rotateZ(-360.00deg) rotateY(-17.87deg) rotateX(-42.00deg); }
}
@media (max-width: 768px) {
  .rotating_slider { padding-bottom: 1.2rem; }
  .rotating_slider .wrapper { flex-direction: column; gap: .4rem; }
  .rotating_slider .column, .rotating_slider .column.video { width: 100%; margin-left: 0; }
  .rotating_slider .description { max-width: 2.9rem; }
  .rotating_slider .link-btn { margin-top: .2rem; }
  .ring { --R: .82rem; --S: .74rem; perspective: 3.6rem; }
  .ring .bub b { font-size: .1rem; }
}

/* ---------- 6. services ---------- */
.services_module { padding-bottom: 2.2rem; }
.services_module .wrapper { position: relative; }
.services_module .label { position: absolute; left: 0; top: 0; font-weight: 500; }
.single-service { position: relative; }
.single-service .service-video { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5.41rem; height: 4.06rem; opacity: 0; transition: opacity .3s ease-in; pointer-events: none; z-index: 1; }
.single-service:nth-child(2) .service-video { top: .47rem; transform: none; }
.single-service:nth-child(3) .service-video { top: -.25rem; transform: none; }
.single-service:nth-child(4) .service-video { top: -.97rem; transform: none; }
.single-service:nth-last-child(3) .service-video { top: auto; bottom: -1.44rem; transform: none; }
.single-service:nth-last-child(2) .service-video { top: auto; bottom: -.72rem; transform: none; }
.single-service:nth-last-child(1) .service-video { top: auto; bottom: 0; transform: none; }
.single-service .service-name { padding-left: 6.85rem; color: var(--dim); line-height: .74rem; transition: .3s ease-in-out; pointer-events: none; width: fit-content; position: relative; }
.single-service .service-name .reg-mark { position: absolute; width: .17rem; height: .17rem; right: -.2rem; top: .08rem; }
.single-service::before { content: ""; position: absolute; top: 20%; left: 0; width: 100%; height: 80%; }
@media (hover: hover) and (min-width: 769px) {
  .single-service:hover .service-name { transform: translateX(.8rem); color: #fff; }
  .single-service:hover .service-video { opacity: 1; }
}
@media (max-width: 768px) {
  .services_module { padding-bottom: 1.2rem; }
  .services_module .wrapper, .single-service { position: static; }
  .services_module .label { position: static; padding-bottom: .2rem; }
  .single-service .service-video { position: fixed; width: 2.35rem; height: 1.8rem; top: auto !important; bottom: .3rem !important; left: auto; right: .15rem; transform: none !important; visibility: hidden; z-index: 9; transition: opacity .3s ease-in, visibility .3s; }
  .single-service .service-name { padding-left: 0; font-size: .4rem; line-height: .418rem; letter-spacing: -.0044rem; transition: color .2s; }
  .single-service .service-name .reg-mark { width: .1rem; height: .1rem; right: -.12rem; top: .05rem; }
  .single-service::before { display: none; }
  .single-service.active .service-name { color: #fff; }
  .single-service.active .service-video { opacity: 1; visibility: visible; }
}

/* ---------- 7. slider with text ---------- */
.slider_with_text { padding-bottom: 2.2rem; }
.slider_with_text .slider-track { gap: .3rem; }
.slider_with_text .shot { height: 5.34rem; }
.slider_with_text .boxes { display: flex; justify-content: space-between; padding-top: .6rem; }
.slider_with_text .boxes .arrows { padding-top: .1rem; align-self: flex-start; }
.slider_with_text .boxes-extra { display: flex; flex-wrap: wrap; gap: 0 .3rem; max-width: 8.82rem; }
.slider_with_text .box { max-width: 4.25rem; margin-top: .1rem; font-weight: 500; }
@media (max-width: 768px) {
  .slider_with_text { padding-bottom: 1.2rem; }
  .slider_with_text .slider-track { gap: .15rem; }
  .slider_with_text .shot { height: 3.85rem; }
  .slider_with_text .boxes { padding-top: .4rem; }
  .slider_with_text .boxes .arrows { display: none; }
  .slider_with_text .boxes-extra { flex-direction: column; }
  .slider_with_text .box { max-width: 2.9rem; margin-top: 0; }
}

/* ---------- 8. CTA ---------- */
.background_video_cta_variation { padding-bottom: 2.2rem; }
.cta-wrapper { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .05rem; overflow: hidden; cursor: none; background: #f2f2ef; }
.cta-wrapper .float { position: absolute; left: 50%; top: 50%; width: 1.5rem; aspect-ratio: 3 / 4; animation: orbit 14s linear infinite; animation-delay: var(--dl); }
.cta-wrapper .float .media { width: 100%; height: 100%; transform: rotate(var(--tilt)); box-shadow: 0 .2rem .5rem rgba(0,0,0,.25); }
@keyframes orbit { from { transform: translate(-50%, -50%) rotate(0deg) translateX(2.4rem) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg) translateX(2.4rem) rotate(-360deg); } }
.cta-wrapper .text-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 9.45rem; display: flex; flex-direction: column; align-items: center; mix-blend-mode: difference; z-index: 2; }
.cta-wrapper .title { width: 9.45rem; text-align: center; }
.cta-wrapper .btn-pill { display: none; }
@media (max-width: 768px) {
  .background_video_cta_variation { padding-bottom: 1.2rem; }
  .background_video_cta_variation .container { padding: 0; }
  .cta-wrapper { aspect-ratio: 4 / 5; border-radius: 0; cursor: pointer; }
  .cta-wrapper .float { width: .8rem; }
  @keyframes orbit { from { transform: translate(-50%, -50%) rotate(0deg) translateX(1.3rem) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg) translateX(1.3rem) rotate(-360deg); } }
  .cta-wrapper .text-wrapper { width: 100%; padding: .1489rem; }
  .cta-wrapper .title { width: auto; max-width: 2.98rem; }
  .cta-wrapper .btn-pill { display: block; margin-top: .2rem; padding: .05rem .15rem .07rem; border-radius: .6rem; background: rgba(255,255,255,.91); color: #000; font-weight: 500; }
}

/* ---------- 9. footer ---------- */
footer { padding-top: .6rem; padding-bottom: .1rem; }
.social-networks ul { display: flex; justify-content: space-between; border-top: 1px solid var(--dim); }
.social-networks a { display: block; position: relative; padding: .2rem .3rem 0; font-weight: 500; transition: color .3s ease-in-out; }
.social-networks li:first-child a { padding-left: 0; }
.social-networks li:last-child a { padding-right: 0; }
.social-networks .hover-item { position: absolute; top: 0; left: 50%; width: 3.1rem; aspect-ratio: 16 / 9; transform: translate(-50%, .5rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease-in-out, visibility .3s; z-index: 5; }
.social-networks li:first-child .hover-item { left: 0; transform: translate(0, .5rem); }
.social-networks li:last-child .hover-item { left: auto; right: 0; transform: translate(0, .5rem); }
@media (hover: hover) and (min-width: 769px) { .social-networks a:hover .hover-item { opacity: 1; visibility: visible; } }
.lower-wrapper { padding-top: 2.2rem; }
.giant { display: block; white-space: nowrap; font-weight: 600; letter-spacing: -.055em; line-height: .76; width: max-content; }
.giant img { display: inline-block; height: .72em; width: auto; vertical-align: baseline; margin-right: .015em; }
.upper-wrapper { display: flex; justify-content: space-between; padding-top: .12rem; }
.upper-wrapper .info-text { max-width: 3rem; }
.upper-wrapper .info-text p, .gdpr-menu span { color: var(--grey); font-size: .14rem; line-height: .1568rem; letter-spacing: -.01em; }
.gdpr-menu ul { display: flex; gap: .2rem; }
.gdpr-menu span { transition: color .3s ease-in-out; }
.gdpr-menu a:hover span { color: #fff; }
@media (max-width: 768px) {
  .social-networks ul { display: block; border: 0; }
  .social-networks li:not(:last-child) { padding-bottom: .04rem; }
  .social-networks a, .social-networks li:first-child a, .social-networks li:last-child a { padding: 0; font-size: .2rem; line-height: .19rem; letter-spacing: -.01em; opacity: .2; transition: opacity .3s; }
  .social-networks li.active a { opacity: 1; }
  .social-networks .hover-item, .social-networks li:first-child .hover-item, .social-networks li:last-child .hover-item { left: auto; right: 0; top: 50%; width: 2.35rem; height: 1.32rem; transform: translate(0, -50%); }
  .social-networks li.active .hover-item { opacity: 1; visibility: visible; }
  .mobile_layout_shifter { display: flex; flex-direction: column; padding-top: 1.2rem; }
  .lower-wrapper { padding-top: 0; padding-bottom: .2rem; border-bottom: 1px solid var(--dim); }
  .upper-wrapper { padding-top: .1rem; flex-wrap: wrap; }
  .upper-wrapper .info-text { padding-bottom: .2rem; }
  .upper-wrapper .info-text p { font-size: .13rem; line-height: .16rem; letter-spacing: 0; }
  .gdpr-menu { width: 100%; }
  .gdpr-menu ul { gap: 0; justify-content: space-between; }
  .gdpr-menu span { font-size: .13rem; }
}

/* ---------- cursor follower (Play reel / Drag / CTA pill) ---------- */
.mouse-frame { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 9999; } /* zero-size: no full-screen layer */
.mouse-follower { position: absolute; top: 0; left: 0; will-change: transform; }
.mouse-video { position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; background: #fff; color: #000; font-weight: 600; display: flex; align-items: center; justify-content: center; opacity: 0; transition: .3s var(--e-btn); }
.mouse-slider, .mouse-cta { position: absolute; width: max-content; border-radius: .6rem; opacity: 0; visibility: hidden; transition: opacity .3s ease-in-out, visibility .3s, scale .3s var(--e-btn); }
.mouse-slider { padding: .11rem .2rem; background: #fff; color: #000; font-weight: 500; transform: translate(.2rem, -.4rem); }
.mouse-cta { padding: .07rem .15rem; background: rgba(0,0,0,.1); color: #000; line-height: 1; transform: translate(.1rem, .3rem); font-weight: 500; }
.mouse-frame.active .mouse-video { opacity: .9; transform: translate(-50%, -50%) scale(1); }
.mouse-frame.active-slider .mouse-slider { opacity: 1; visibility: visible; }
.mouse-frame.active-slider-small .mouse-slider { scale: .85; }
.mouse-frame.active-cta .mouse-cta { opacity: 1; visibility: visible; }
@media (hover: none), (max-width: 768px) { .mouse-frame { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .preloader { display: none; }
}

/* =====================================================================
   Shared bits for the inner pages
   ===================================================================== */
:root { --reg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Ccircle cx='8.5' cy='8.5' r='7.75' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M5.9 12.6V4.4h3.4c1.8 0 2.8.9 2.8 2.4 0 1.1-.6 1.9-1.6 2.2l1.9 3.6h-1.7l-1.7-3.4H7.4v3.4zm1.5-4.7h1.8c1 0 1.4-.4 1.4-1.1s-.5-1.1-1.4-1.1H7.4z' fill='white'/%3E%3C/svg%3E"); }
.reg-mark { display: block; background: currentColor; -webkit-mask: var(--reg) center / contain no-repeat; mask: var(--reg) center / contain no-repeat; }
.main-nav .nav-link.active .hover-line { transform: scaleX(1); }
.mobile-nav a.active { color: var(--grey); }

/* static hero titles ("Portfolio®", "Built to last®") — ® sits top-right of the last line */
.title .tail { display: inline-block; position: relative; padding-right: .26rem; }
.title .tail .reg-mark { position: absolute; right: 0; top: .1rem; width: .2rem; height: .2rem; }
@media (max-width: 768px) { .title .tail { padding-right: .14rem; } .title .tail .reg-mark { width: .11rem; height: .11rem; top: .04rem; } }

/* ---------- portfolio (work page) ---------- */
.hero_title.portfolio-hero { padding-top: 2.54rem; }
.portfolio_module { padding-bottom: 1rem; margin-top: -1.2rem; }
.categories-static { display: flex; justify-content: flex-end; margin-bottom: .6rem; position: relative; z-index: 9; }
.categories-static .wrapper { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem; max-width: 8.2rem; } /* never runs into the big title; extra filters wrap */
.cat { position: relative; padding: .14rem .25rem; border: 2px solid var(--soft); border-radius: 1.4rem; font-weight: 500; transition: .3s var(--e-btn); white-space: nowrap; }
.cat .fill { position: absolute; left: -.04rem; top: -.04rem; width: calc(100% + .08rem); height: calc(100% + .08rem); border-radius: 1.4rem; background: var(--dim); transform: scale(0); transition: transform .3s var(--e-btn); z-index: 1; }
.cat span { position: relative; z-index: 2; transition: color .3s var(--e-btn); }
.cat:hover .fill, .cat.active .fill { transform: scale(1); }
.cat.active .fill { background: #fff; }
.cat.active span { color: #000; }
.categories-float { position: fixed; top: .36rem; right: .5rem; z-index: 990; padding: .15rem .2rem; background: rgba(0,0,0,.9); border-radius: .4rem; display: flex; gap: .25rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, top .3s ease-in-out; }
.categories-float.on { opacity: 1; visibility: visible; }
.scroll-up .categories-float { top: 1rem; }
.categories-float button { position: relative; font-weight: 500; padding-bottom: .02rem; }
.categories-float .hover-line { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.categories-float button:hover .hover-line, .categories-float button.active .hover-line { transform: scaleX(1); transform-origin: left; }
.cards-wrapper { display: flex; flex-wrap: wrap; gap: .36rem .29rem; transition: opacity .3s var(--e-btn); }
.cards-wrapper.out { opacity: 0; }
.work-card { display: block; width: 4.27rem; }
.work-card .media { aspect-ratio: 4.27 / 5.337; }
.work-card .text { padding-top: .2rem; }
.work-card .work-name { font-weight: 500; }
.work-card .work-description { color: var(--grey); margin-top: .05rem; }
@media (max-width: 768px) {
  .hero_title.portfolio-hero { padding-top: 1.4rem; }
  .portfolio_module { padding-bottom: .9rem; margin-top: 0; }
  .categories-static { margin: 0 -.1489rem .3rem; justify-content: flex-start; }
  .categories-static .wrapper { overflow-x: auto; scrollbar-width: none; padding: 0 .1489rem; flex-wrap: nowrap; justify-content: flex-start; max-width: none; }
  .categories-static .wrapper::-webkit-scrollbar { display: none; }
  .cat { border-color: var(--dim); }
  .categories-float { display: none; }
  .cards-wrapper { gap: .4rem; }
  .work-card { width: 100%; }
  .work-card .text { padding-top: .15rem; }
}

/* ---------- big CTA with text bottom-left (background_video_cta) ---------- */
.background_video_cta { padding-bottom: 2.2rem; }
.bg-cta { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .05rem; overflow: hidden; }
.bg-cta > .media { position: absolute; inset: 0; border-radius: 0; }
.bg-cta .text-wrapper { position: absolute; left: 0; bottom: 0; width: 100%; padding: .6rem; z-index: 2; }
.bg-cta .title { max-width: 7.09rem; }
.bg-cta .button { display: flex; gap: .3rem; align-items: center; margin-top: .4rem; font-weight: 500; }
.bg-cta .button .circle { background: #f5f5f5; }
.bg-cta .button .circle .ov { background: #fff; }
.bg-cta .button .circle svg path { fill: #000; }
.bg-cta:hover .button .circle { transform: scale(1.08); }
.bg-cta:hover .button .circle .ov { transform: scale(1); }
@media (max-width: 768px) {
  .background_video_cta { padding-bottom: 1.2rem; }
  .background_video_cta .container { padding: 0; }
  .bg-cta { aspect-ratio: 4 / 5; border-radius: 0; }
  .bg-cta .text-wrapper { padding: .1489rem; }
  .bg-cta .title { max-width: 2.98rem; }
  .bg-cta .button { margin-top: .3rem; }
}

/* ---------- big numbers (Founded 2019 / Team of 40) ---------- */
.a6 { font-size: 3.6rem; line-height: 2.88rem; letter-spacing: -.216rem; font-weight: 600; }
@media (max-width: 768px) { .a6 { font-size: 1rem; line-height: .9rem; letter-spacing: -.05rem; } }
.big-titles { display: flex; justify-content: space-between; padding-bottom: .6rem; padding-right: .5rem; }
.big-titles .column { display: flex; flex-direction: column; }
.big-titles .a6 .split-lines { padding-bottom: 0; margin-bottom: 0; padding-right: .2rem; margin-right: -.2rem; }
.featured_work_slider .big-title { max-width: 8.83rem; }
@media (max-width: 768px) { .big-titles { padding-right: 0; padding-bottom: .3rem; justify-content: flex-start; gap: .4rem; } .featured_work_slider .big-title { max-width: 2.4rem; font-weight: 600; } }
.person { width: 4.27rem; display: block; }
.person .media { aspect-ratio: 4 / 5; }
.person .text { padding-top: .3rem; }
.person .work-name { font-weight: 500; }
.person .work-description { color: var(--grey); margin-top: .05rem; }
@media (max-width: 768px) { .person { width: 2.9rem; } .person .text { padding-top: .15rem; } }

/* ---------- accordions (Recognition / Open positions / Engagement models) ---------- */
.accordions-section { padding-bottom: 2.2rem; }
.accordions-section .main-wrapper { max-width: 8.83rem; margin-left: auto; }
.accordions-section .main-wrapper > .title { padding-bottom: .6rem; }
.accordion-item { border-bottom: 1px solid var(--dim); }
.accordion-item:first-child .accordion-header { border-top: 1px solid var(--dim); }
.accordion-header { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: .3rem .15rem .3rem 0; cursor: pointer; }
.accordion-header .count-name { display: flex; align-items: center; position: relative; }
.accordion-header .count { position: absolute; left: 0; }
.accordion-header .header-title { padding-left: 1.1rem; font-weight: 500; }
.accordion-btn svg { width: .16rem; height: .16rem; display: block; }
.accordion-btn path:first-child { transition: opacity .3s ease-in-out; }
.accordion-item.active .accordion-btn path:first-child { opacity: 0; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.accordion-content-wrapper { padding: .3rem 0 .6rem; }
.single-award { display: flex; align-items: center; position: relative; cursor: pointer; }
.single-award .award-image { position: absolute; left: 0; width: .84rem; aspect-ratio: 4 / 3; opacity: 0; transition: opacity .3s ease-in-out; }
.single-award .name-and-year { width: 100%; padding-left: 1.1rem; display: flex; justify-content: space-between; color: var(--dim); transition: color .3s ease-in-out; }
.single-award .name { padding-right: .3rem; }
.single-award .year-placement { display: flex; min-width: 2.6rem; }
.single-award .year { min-width: .3rem; }
.single-award .placement { margin-left: .2rem; }
.single-award:hover .award-image { opacity: 1; }
.single-award:hover .name-and-year { color: #fff; }
.accordion-content .desc { padding-left: 1.1rem; max-width: 6.4rem; color: #fff; padding-top: .3rem; }
.accordion-content .link-btn { margin-left: 1.1rem; }
@media (max-width: 768px) {
  .accordions-section { padding-bottom: 1.2rem; }
  .accordions-section .main-wrapper > .title { padding-bottom: .4rem; }
  .accordion-header { padding: .2rem 0; }
  .accordion-header .header-title { padding-left: .4rem; }
  .accordion-content-wrapper { padding: .2rem 0 .4rem; }
  .single-award .award-image { display: none; }
  .single-award .name-and-year { padding-left: .4rem; color: #fff; }
  .single-award .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .1rem; max-width: 1.7rem; }
  .single-award .year-placement { min-width: 1.3rem; }
  .single-award .year { min-width: .2rem; }
  .single-award .placement { margin-left: .15rem; }
  .accordion-content .desc, .accordion-content .link-btn { padding-left: 0; margin-left: .4rem; }
}

/* ---------- contact blocks ---------- */
.contact_blocks { padding-bottom: 1.6rem; }
.single-contact { display: flex; justify-content: space-between; position: relative; padding: .3rem 0 .6rem; border-top: 1px solid var(--dim); cursor: none; }
.single-contact:last-child { border-bottom: 1px solid var(--dim); }
.single-contact .info { color: var(--dim); transition: color .3s ease-in-out; }
.single-contact:hover .info { color: #fff; }
@media (max-width: 768px) {
  .contact_blocks { padding-bottom: .8rem; }
  .single-contact { flex-direction: column; padding: .2rem 0 .4rem; cursor: pointer; }
  .single-contact .label { padding-bottom: .2rem; }
  .single-contact .info { color: #fff; }
}
.copy-pill { position: absolute; left: 0; top: 0; padding: .11rem .2rem; background: #fff; color: #000; width: max-content; border-radius: .6rem; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: opacity .3s ease-in-out, visibility .3s; font-weight: 500; }
.mouse-frame.active-copy .copy-pill { opacity: 1; visibility: visible; }

/* ---------- case study blocks ---------- */
.hero_title .columns { display: none; }
.single-work .video_module { padding-bottom: 1rem; }
.single-work .featured_work_slider { padding-top: 2rem; }
.intro-block { padding-bottom: 1rem; }
.intro-block .columns { display: flex; justify-content: space-between; }
.intro-block .column.one { max-width: 6rem; }
.intro-block .column.two { max-width: 6.55rem; }
.intro-block .small, .hero_title .columns .small { color: var(--grey); margin-bottom: .05rem; }
.intro-block .client-wrap { padding-bottom: .3rem; }
.full-width-block { padding-bottom: .3rem; }
.full-width-block .media { aspect-ratio: 16 / 9; }
.full-width-block.tall .media { aspect-ratio: 16 / 10; }
.two-column-content { padding-bottom: 1rem; }
.two-column-content.small { padding-bottom: .3rem; }
.two-column-content .wrapper { display: flex; justify-content: space-between; align-items: flex-start; }
.two-column-content .wrapper.end { align-items: flex-end; }
.two-column-content .column { width: 6.55rem; }
.two-column-content .column .media { aspect-ratio: 4 / 5; }
.two-column-content .column .media.sq { aspect-ratio: 1; }
.two-column-content .text-wrap { max-width: 5.41rem; }
.simple-text-block-label { padding: 1rem 0; }
.simple-text-block-label .wrapper { display: flex; justify-content: space-between; }
.simple-text-block-label .text { max-width: 8.83rem; }
.image-automatic-sliders { margin: .3rem 0; overflow: hidden; }
.marquee { display: flex; width: max-content; animation: marquee 49s linear infinite; }
.marquee-piece { display: flex; gap: .3rem; padding-right: .3rem; }
.marquee-piece .media { height: 6.55rem; flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 768px) {
  .single-work .hero_title { padding-bottom: .4rem; }
  .single-work .hero_title .columns { display: flex; padding-top: .4rem; }
  .single-work .hero_title .columns .column { width: 50%; }
  .single-work .video_module { padding-bottom: .4rem; }
  .single-work .featured_work_slider { padding-top: 1rem; }
  .intro-block { padding-bottom: .9rem; }
  .intro-block .column.one { display: none; }
  .full-width-block { padding-bottom: .2rem; }
  .two-column-content { padding-bottom: .9rem; }
  .two-column-content .wrapper { flex-direction: column; }
  .two-column-content .column { width: 100%; }
  .two-column-content .column.first { padding-bottom: .9rem; }
  .two-column-content.fifty-fifty .wrapper { display: block; }
  .two-column-content.fifty-fifty .column.first { padding-bottom: 0; }
  .two-column-content.fifty-fifty .column:not(:last-child) { margin-bottom: .2rem; }
  .simple-text-block-label { padding: 0 0 .9rem; }
  .simple-text-block-label .wrapper { flex-direction: column; }
  .simple-text-block-label .label { padding-bottom: .2rem; }
  .image-automatic-sliders { margin: .2rem 0; }
  .marquee-piece { gap: .15rem; padding-right: .15rem; }
  .marquee-piece .media { height: 3.6rem; }
}

/* tablets / small laptops (769–1100px): the fluid scale makes small text too tiny — keep it readable */
@media (min-width: 769px) {
  .b2, .btn, .mouse-video, .upper-wrapper .info-text p, .gdpr-menu span, .media .tag { font-size: max(.14rem, 11px); line-height: 1.15; }
  .b1 { font-size: max(.18rem, 12px); line-height: 1.2; }
  .b0, p { font-size: max(.22rem, 13px); line-height: 1.2; }
  .a1 { font-size: max(.24rem, 14px); line-height: .92; }
  .media .tag { font-size: max(.1rem, 9px); }
}

/* CTA cards orbit only while the CTA is on screen */
.cta-wrapper:not(.inview) .float { animation-name: none; }

/* real photos inside media boxes */
.media.photo { background: #fff; }
.media.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; user-select: none; -webkit-user-drag: none; }

/* real images / videos inside media boxes (case pages, case cards) */
.media.real > img, .media.real > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.media.real.contain > img, .media.real.contain > video { object-fit: contain; }
.media.real .hover-video { opacity: 0; transition: opacity .5s ease; }
.media.real.vid-on .hover-video { opacity: 1; }
.fullscreen-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* YouTube film shown like our own video: the YouTube player sits under the poster and never gets a click */
.media.yt { cursor: none; }
/* the player is 40% taller than the frame: YouTube's title bar (top) and logo (bottom) fall outside and are cut off; the film fills the frame exactly */
.media.yt iframe { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; border: 0; pointer-events: none; opacity: 0; transform: scale(1.04); transition: opacity .5s ease; } /* scale: trims a thin white edge baked into this film */
.media.yt.yt-on iframe { opacity: 1; }
@media (max-width: 768px) { .media.yt { cursor: pointer; } }

/* ---------- our full-screen player ---------- */
.qp { position: absolute; inset: 0; background: #000; overflow: hidden; }
.qp-stage, .qp-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
/* YouTube: a 16:9 box fitted to the screen; the player inside is taller and cropped, so none of YouTube's interface is ever on screen */
.qp-ytbox { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); overflow: hidden; }
.qp-ytbox iframe { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; border: 0; pointer-events: none; opacity: 0; transform: scale(1.04); transition: opacity .4s ease; }
.qp.yt-live .qp-ytbox iframe { opacity: 1; }
.qp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; transition: opacity .6s ease; pointer-events: none; }
.qp.is-ready .qp-poster { opacity: 0; }
.qp.yt .qp-poster { opacity: 1; } .qp.yt.yt-live .qp-poster { opacity: 0; }   /* YouTube is only visible while it is really playing */
.qp-hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }   /* catches every click and hover: nothing reaches YouTube */
.qp-big { position: absolute; left: 50%; top: 50%; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(255,255,255,.92); z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: .3s var(--e-btn); }
.qp-big svg, .qp .qp-big .i-play { display: block; width: .3rem; height: .3rem; margin-left: .04rem; } .qp-big path { fill: #000; }
.qp.is-ready.is-paused .qp-big { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.qp-bar { position: absolute; left: .5rem; right: .5rem; bottom: .4rem; z-index: 3; display: flex; align-items: center; gap: .2rem; transition: opacity .4s ease; }
.qp.idle .qp-bar { opacity: 0; } .qp.idle .qp-hit { cursor: none; }
.qp-btn .circle { background: rgba(29,29,29,.85); }
.qp-btn:hover .circle { transform: scale(1.08); } .qp-btn:hover .ov { transform: scale(1); }
.qp-btn svg { width: .16rem; height: .16rem; }
.qp .i-play, .qp .i-off { display: none; }
.qp.is-paused .qp-play .i-play, .qp.is-muted .i-off { display: block; }
.qp.is-paused .qp-play .i-pause, .qp.is-muted .i-on { display: none; }
.qp-track { flex: 1; height: max(.04rem, 3px); background: rgba(255,255,255,.25); border-radius: 1rem; position: relative; cursor: pointer; }
.qp-track::before { content: ""; position: absolute; inset: -.12rem 0; }   /* bigger click area */
.qp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 1rem; }
.qp-time { color: #fff; min-width: 1rem; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { .qp-bar { left: .15rem; right: .15rem; bottom: .25rem; gap: .12rem; } .qp-big { width: .8rem; height: .8rem; } .qp-big svg { width: .2rem; height: .2rem; } }

/* ---------- case: brand board (logo construction + palette) ---------- */
.brand-board { padding: .3rem 0 .3rem; }
.bb-logo { background: #fff; border-radius: .05rem; padding: .9rem 1.1rem; margin-bottom: .2rem; }
.bb-mark { display: block; width: 100%; height: auto; overflow: visible; }
.bb-lines path { fill: none; stroke: #191720; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1); }
.bb-dots circle { fill: #fff; stroke: #191720; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .4s ease, transform .6s var(--e-btn); transition-delay: calc(1.4s + var(--d)); }
.bb-logo.drawn .bb-lines path { stroke-dashoffset: 0; }
.bb-logo.done .bb-lines path { stroke-dasharray: none; transition: none; }
.bb-logo.drawn .bb-dots circle { opacity: 1; transform: none; }
.bb-gradient { height: 4.2rem; border-radius: .05rem; }
.bb-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem; padding-top: .2rem; }
.bb-sw { background: var(--c); color: #fff; border-radius: .05rem; padding: .24rem .24rem .3rem; min-height: 2.2rem; display: flex; flex-direction: column; justify-content: space-between; }
.bb-sw:first-child { border: 1px solid var(--dim); }
.bb-sw.light { color: #000; }
.bb-name { font-size: .26rem; line-height: 1; }
.bb-sw dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .06rem .16rem; }
.bb-sw dt { opacity: .6; font-weight: 500; } .bb-sw dd { margin: 0; }
@media (max-width: 768px) {
  .bb-logo { padding: .3rem .2rem; margin-bottom: .1rem; }
  .bb-gradient { height: 1.6rem; }
  .bb-swatches { grid-template-columns: 1fr 1fr; gap: .1rem; padding-top: .1rem; }
  .bb-sw { min-height: 1.3rem; padding: .14rem; }
  .bb-sw:first-child { grid-column: 1 / -1; }
  .bb-name { font-size: .18rem; }
  .bb-dots circle { r: .35; }
}
@media (prefers-reduced-motion: reduce) { .bb-lines path { stroke-dasharray: none; } .bb-dots circle { opacity: 1; transform: none; } }

/* ---------- case: printer (cups on a belt, Ripples stamp, prints in the foam) ---------- */
.rp { position: relative; aspect-ratio: 1340 / 480; background: #d96e2e; border-radius: .05rem; overflow: hidden; --cup: 2.05rem; --sp: 2.6rem; }
.rp-belt { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.rp-cup { position: absolute; left: 50%; top: 50%; width: var(--cup); height: var(--cup); margin: calc(var(--cup) / -2) 0 0 calc(var(--cup) / -2); transform: translateX(calc(var(--slot) * var(--sp))); transition: transform 1s cubic-bezier(.65,0,.35,1); }
.rp-cup.jump, .rp-cup.jump * { transition: none !important; }
.rp-handle { position: absolute; left: 50%; top: 40%; width: 64%; height: 20%; transform-origin: 0 50%; transform: rotate(var(--r)); }
.rp-handle::before { content: ""; position: absolute; right: 0; top: 0; width: 34%; height: 100%; background: #fff; border-radius: 0 1rem 1rem 0; box-shadow: .03rem .06rem .08rem rgba(0,0,0,.2), inset 0 0 0 1px #e4e4e4; }
.rp-body { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 55%, #ececec 100%); box-shadow: .05rem .13rem .2rem rgba(70,25,0,.35), inset 0 0 0 1px #e2e2e2; }
.rp-foam { position: absolute; inset: 7.5%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #f8f1e8 0 38%, #efdfcb 56%, #dcb995 74%, #b77b47 90%, #9c6234 100%); box-shadow: inset 0 .02rem .05rem rgba(0,0,0,.28); }
.rp-foam::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 2px solid rgba(123,69,32,.4); opacity: 0; }
.rp-cup.printed .rp-foam::after { animation: rp-ring 1s cubic-bezier(.2,.7,.2,1); }
.rp-print { position: absolute; inset: 17%; color: #7b4520; fill: currentColor; mix-blend-mode: multiply; opacity: 0; filter: blur(4px); clip-path: circle(0% at 50% 50%); transition: opacity .5s, filter 1.2s, clip-path 1.2s cubic-bezier(.2,.7,.2,1); }
.rp-cup.printed .rp-print { opacity: .9; filter: blur(.4px); clip-path: circle(75% at 50% 50%); }
.rp-print svg, .rp-print i { display: block; width: 100%; height: 100%; }
.rp-print i { background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.rp-head { position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(var(--cup) * .5); height: calc(var(--cup) * .5); margin: calc(var(--cup) * -.25) 0 0 calc(var(--cup) * -.25); filter: drop-shadow(0 .04rem .06rem rgba(0,0,0,.22)); opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .45s cubic-bezier(.3,0,.2,1); }
.rp-head.show { opacity: 1; transform: none; }
.rp-head img { position: relative; display: block; width: 100%; height: 100%; }
.rp-head::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #f16063; opacity: 0; }
.rp-head.press img { animation: rp-pulse .5s cubic-bezier(.3,0,.2,1); }
.rp-head.press::before { animation: rp-wave .9s cubic-bezier(.2,.7,.2,1); }
@keyframes rp-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 60% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes rp-wave { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes rp-ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.15); } }
@media (max-width: 768px) {
  .rp { aspect-ratio: 4 / 3; --cup: 1.3rem; --sp: 1.6rem; }
  .rp-belt { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
}

/* printer captions */
.rp-cap { position: absolute; z-index: 3; margin: 0; color: #fff; }
.rp-tl { left: .3rem; top: .26rem; font-weight: 500; }
.rp-br { right: .3rem; bottom: .26rem; opacity: .85; }
.rp-count { font-variant-numeric: tabular-nums; font-weight: 500; }
/* brand colours: staggered reveal, copy feedback */
.bb-sw { cursor: none; position: relative; transition: transform .5s var(--e-btn); }
.js .brand-board .bb-sw { opacity: 0; transform: translateY(.3rem); transition: opacity .6s ease, transform .8s var(--e-btn); }
.js .brand-board.bb-in .bb-sw { opacity: 1; transform: none; }
.brand-board.bb-in .bb-sw:nth-child(2) { transition-delay: .08s; } .brand-board.bb-in .bb-sw:nth-child(3) { transition-delay: .16s; }
.brand-board.bb-in .bb-sw:nth-child(4) { transition-delay: .24s; } .brand-board.bb-in .bb-sw:nth-child(5) { transition-delay: .32s; }
.bb-sw::after { content: "Copied"; position: absolute; right: .2rem; top: .24rem; font-size: .14rem; font-weight: 500; opacity: 0; transition: opacity .3s; }
.bb-sw.copied::after { opacity: 1; }
.bb-gradient { transform-origin: left; }
.js .brand-board .bb-gradient { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.65,0,.35,1); }
.js .brand-board.bb-in .bb-gradient { transform: none; }
@media (max-width: 768px) { .rp-tl { left: .14rem; top: .12rem; } .rp-br { right: .14rem; bottom: .12rem; } .bb-sw::after { right: .12rem; top: .14rem; font-size: .12rem; } }
@media (prefers-reduced-motion: reduce) { .js .brand-board .bb-sw, .js .brand-board .bb-gradient { opacity: 1; transform: none; } }

.media.reel { cursor: none; }