/* ============================================================
   Johnny Willz Media Solutions — Motion & Agency Layer
   Loaded AFTER style.css on every page. Remove the <link> and the
   motion.js <script> to return to the previous look.
   Every animated start-state is gated behind html.js so the site
   is fully readable if scripts fail, and prefers-reduced-motion
   switches everything off (see bottom of file).
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ink:#0a0a0a;
}

html.is-loading,
html.is-loading body{overflow:hidden;}

/* ---------- Film grain (injected by JS) ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;z-index:250;pointer-events:none;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift .9s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0);}
  17%{transform:translate(-4%,3%);}
  33%{transform:translate(3%,-5%);}
  50%{transform:translate(-5%,-2%);}
  67%{transform:translate(4%,4%);}
  83%{transform:translate(-2%,5%);}
  100%{transform:translate(0,0);}
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;width:100%;height:3px;z-index:300;pointer-events:none;
  background:var(--red);
  transform-origin:left center;transform:scaleX(var(--p,0));
}

/* ---------- Custom cursor (fine pointers only, JS adds html.has-cursor) ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;display:none;will-change:transform;}
html.has-cursor .cursor-dot,
html.has-cursor .cursor-ring{display:block;}
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor [data-cursor],
html.has-cursor input,html.has-cursor select,html.has-cursor textarea,html.has-cursor label{cursor:none;}
.cursor-dot i{
  display:block;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;
}
.cursor-ring b{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:1.5px solid #fff;mix-blend-mode:difference;
  font:700 .66rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:transparent;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .3s,border-color .3s,color .2s;
}
.cursor-ring.is-link b{width:78px;height:78px;margin:-39px 0 0 -39px;background:#fff;}
.cursor-ring.is-view b{
  width:96px;height:96px;margin:-48px 0 0 -48px;
  background:var(--red);border-color:var(--red);color:#fff;mix-blend-mode:normal;
}
.cursor-ring.is-down b{transform:scale(.82);}
.cursor-ring.is-hidden,.cursor-dot.is-hidden{opacity:0;}
.cursor-dot.is-view{opacity:0;}

/* ---------- Preloader ---------- */
.preloader{
  display:none;
  position:fixed;inset:0;z-index:10000;background:var(--ink);color:#fff;
  align-items:center;justify-content:center;
  border-radius:0 0 50% 50% / 0 0 0 0;
  transition:transform .95s var(--ease-io),border-radius .95s var(--ease-io);
  animation:preloaderFailsafe .01s linear 8s forwards;
}
.preloader.is-done{transform:translateY(-102%);border-radius:0 0 50% 50% / 0 0 9vw 9vw;}
html.js:not(.no-preload) .preloader{display:flex;}
html.no-preload .preloader{display:none !important;}
.preloader__inner{width:min(440px,78vw);display:flex;flex-direction:column;gap:2rem;align-items:flex-start;}
.preloader__inner img{height:84px;width:auto;opacity:0;animation:fadeUp .8s var(--ease-out) .1s forwards;}
.preloader__count{
  font-family:var(--font-display);font-weight:900;line-height:.9;
  font-size:clamp(5rem,16vw,10rem);font-variant-numeric:tabular-nums;
  display:flex;align-items:flex-start;
}
.preloader__count i{font-style:normal;color:var(--red);font-size:.38em;margin:.25em 0 0 .08em;}
.preloader__bar{width:100%;height:2px;background:rgba(255,255,255,.18);overflow:hidden;}
.preloader__bar span{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--load,0));}
@keyframes preloaderFailsafe{to{visibility:hidden;opacity:0;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ---------- Page transition ---------- */
.pt{position:fixed;inset:0;z-index:9990;pointer-events:none;visibility:hidden;}
.pt__panel{position:absolute;inset:0;transform:translateY(101%);}
.pt__panel--a{background:var(--red);}
.pt__panel--b{background:var(--ink);}
.pt.is-leaving{visibility:visible;pointer-events:all;}
.pt.is-leaving .pt__panel--a{transform:translateY(0);transition:transform .6s var(--ease-io);}
.pt.is-leaving .pt__panel--b{transform:translateY(0);transition:transform .6s var(--ease-io) .1s;}
/* arrival: pure-CSS cover that wipes away (no JS needed, so it can never get stuck) */
html.pt-enter::before,
html.pt-enter::after{
  content:'';position:fixed;inset:0;pointer-events:none;
  animation:ptReveal .7s var(--ease-io) forwards;
}
html.pt-enter::before{background:var(--ink);z-index:9992;animation-delay:.12s;}
html.pt-enter::after{background:var(--red);z-index:9991;animation-delay:.24s;}
@keyframes ptReveal{from{transform:translateY(0);}to{transform:translateY(-101%);visibility:hidden;}}

/* ---------- Header behaviour ---------- */
.brand,.nav-toggle{position:relative;z-index:101;}
body.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;box-shadow:none;}
.site-header{transition:background var(--transition),padding var(--transition),box-shadow var(--transition),transform .5s var(--ease-out);}
.site-header.is-hidden{transform:translateY(-115%);}
body.nav-open .site-header.is-hidden{transform:none;}
.brand img{transition:transform .5s var(--ease-out);}
.brand:hover img{transform:scale(1.04) rotate(-1.5deg);}
.main-nav a{overflow:hidden;}
.main-nav a::after{height:3px;bottom:0;}
.nav-toggle span{transition:transform .35s var(--ease-out),opacity .2s;}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Buttons: fill-wipe + magnetic ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn::before{
  content:'';position:absolute;inset:-1px;z-index:-1;
  transform:translateY(102%);border-radius:inherit;
  transition:transform .45s var(--ease-io);
}
.btn:hover::before{transform:translateY(0);}
.btn-primary::before{background:var(--ink);}
.btn-primary:hover{background:var(--red);}
.btn-dark::before{background:var(--red);}
.btn-dark:hover{background:var(--ink);}
.btn-outline::before{background:#fff;}
.btn-outline:hover{background:transparent;color:var(--ink);}
.cta-band .btn-dark::before{background:#fff;}
.cta-band .btn-dark:hover{color:var(--ink);}
.btn:hover{transform:none;}
[data-magnetic]{will-change:transform;}
.btn-arrow::after{transition:transform .35s var(--ease-out);}
.btn-arrow:hover::after{transform:translateX(5px);}

/* ---------- Word-mask heading reveal ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .1em;margin:-.06em -.02em -.1em;}
.wi{display:inline-block;will-change:transform;}
html.js [data-split] .wi,
html.js .hero-title .wi{
  transform:translateY(112%);
  animation:wiFallback .01s linear 9s forwards;
}
html.js [data-split].is-in .wi,
html.js .hero-title.is-in .wi{
  transform:none;animation:none;
  transition:transform .95s var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms);
}
@keyframes wiFallback{to{transform:none;}}

/* ---------- Generic reveal helpers ---------- */
html.js .rv{opacity:0;translate:0 38px;animation:rvFallback .01s linear 9s forwards;}
html.js .rv.is-in{
  opacity:1;translate:0 0;animation:none;
  transition:opacity .9s ease,translate .95s var(--ease-out);
  transition-delay:var(--d,0s);
}
@keyframes rvFallback{to{opacity:1;translate:0 0;}}
/* a 0.4% sliver stays "visible" to IntersectionObserver (fully clipped elements never report as intersecting); opacity hides it */
html.js .cr{clip-path:inset(0 0 99.6% 0);opacity:0;animation:crFallback .01s linear 9s forwards;}
html.js .cr.is-in{clip-path:inset(0 0 0 0);opacity:1;animation:none;transition:clip-path 1.2s var(--ease-io),opacity .2s ease;transition-delay:var(--d,0s);}
@keyframes crFallback{to{clip-path:inset(0 0 0 0);opacity:1;}}
html.js .hero-fade{opacity:0;translate:0 24px;animation:rvFallback .01s linear 9s forwards;}
html.js.hero-in .hero-fade{
  opacity:1;translate:0 0;animation:none;
  transition:opacity .9s ease,translate .9s var(--ease-out);transition-delay:var(--d,0s);
}

/* ---------- HERO (home) ---------- */
.hero{min-height:100vh;min-height:100svh;}
.hero__media{inset:-4% -2%;will-change:transform;}
.hero__media::after{
  background:
    linear-gradient(0deg, rgba(6,6,6,.88) 0%, rgba(6,6,6,.5) 40%, rgba(6,6,6,.28) 70%, rgba(6,6,6,.5) 100%),
    radial-gradient(120% 80% at 80% 20%, rgba(179,18,42,.28), transparent 60%);
}
.hero__content{padding-block:9rem 3.4rem;will-change:transform,opacity;}
.hero .eyebrow{margin-bottom:1.4rem;}
.hero-title{
  font-size:clamp(2.7rem,8.1vw,8.4rem);
  line-height:.9;letter-spacing:-.012em;max-width:none;margin-bottom:2rem;
}
.hero-title .line{display:block;}
.hero-title .line--outline .wi{
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.95);letter-spacing:.04em;
}
.hero__row{display:flex;gap:2rem 4rem;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;}
.hero__row .lead{max-width:46ch;margin:0;font-size:1.08rem;}
.hero__badge{
  position:absolute;right:max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));bottom:12rem;z-index:3;
  width:150px;height:150px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,.55);backdrop-filter:blur(6px);
  color:#fff;
}
.hero__badge svg{position:absolute;inset:0;width:100%;height:100%;animation:badgeSpin 18s linear infinite;}
.hero__badge text{font-family:var(--font-body);font-weight:700;font-size:13.5px;fill:#fff;letter-spacing:.06em;}
.hero__badge-arrow{
  width:54px;height:54px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  transition:transform .4s var(--ease-out);
}
.hero__badge:hover .hero__badge-arrow{transform:translateY(5px) scale(1.08);}
@keyframes badgeSpin{to{transform:rotate(360deg);}}

/* ---------- Marquee (JS-driven; native CSS fallback = static row) ---------- */
.mq{overflow:hidden;white-space:nowrap;position:relative;user-select:none;}
.mq__track{display:flex;width:max-content;will-change:transform;}
.mq__group{display:flex;align-items:center;flex:none;}
.mq span{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,6.4rem);line-height:1;padding-block:1.4rem .8rem;
}
.mq span{margin-inline:clamp(1.6rem,3.6vw,3.6rem);}
.mq span.o{color:transparent;-webkit-text-stroke:2px currentColor;}
.mq--red{background:var(--red);color:#fff;}
.mq--red span.o{color:inherit;-webkit-text-stroke:0;}
.mq--ghost{color:rgba(255,255,255,.14);}
.mq--ghost span{font-size:clamp(5rem,15vw,15rem);padding-block:0;}
.mq--ghost span.o{-webkit-text-stroke:2px rgba(255,255,255,.28);}

/* ---------- Showreel ---------- */
.showreel{position:relative;}
.showreel h2{font-size:clamp(2.2rem,5.2vw,4.8rem);}
.showreel .video-embed{box-shadow:0 40px 90px rgba(0,0,0,.55);}

/* ---------- Statement + scrubbed words ---------- */
.statement{background:var(--cream);padding-block:clamp(5rem,11vw,10rem) clamp(2rem,4vw,3rem);}
.statement__text{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.9rem,4.7vw,4.5rem);line-height:1.04;letter-spacing:-.01em;max-width:24ch;
  color:var(--ink);
}
.scrub-text .sw{transition:none;}
html.js .scrub-text .sw{opacity:var(--o,.14);}
.craft{background:var(--cream);}
.craft .split{align-items:start;}
.craft .split p{font-size:1.08rem;}
.craft .split img{aspect-ratio:4/5;object-fit:cover;}
.section--dark .split p,.section--charcoal .split p{color:var(--gray-300);}
.pillars span{transition:background var(--transition),color var(--transition),border-color var(--transition),transform .4s var(--ease-out);}
.pillars span:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px) rotate(-2deg);}

/* ---------- Stat strip ---------- */
.stat-strip{position:relative;overflow:hidden;}
.stat-grid{padding-block:clamp(3rem,6vw,5rem);}
.stat-num{font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.95;letter-spacing:-.02em;}
.stat-label{font-size:.78rem;letter-spacing:.14em;margin-top:.8rem;font-weight:700;}
.stat-grid div{transition:transform .5s var(--ease-out);}
.stat-grid div:hover{transform:translateY(-6px);}

/* ---------- Services list ---------- */
.svc-list{border-top:2px solid var(--ink);}
.svc-row{
  position:relative;display:grid;grid-template-columns:3.2rem 4.6rem 1.2fr 1fr 3rem;
  gap:1rem 2rem;align-items:center;
  padding:clamp(1.4rem,2.6vw,2.2rem) 0;border-bottom:1px solid var(--gray-300);
  isolation:isolate;overflow:hidden;
  transition:color .35s ease;
}
.svc-row::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease-io);
}
.svc-row:hover{color:#fff;}
.svc-row:hover::before{transform:scaleY(1);}
.svc-num{font-family:var(--font-display);font-weight:900;color:var(--red);transition:color .3s,transform .5s var(--ease-out);padding-left:.2rem;}
.svc-icon{
  width:clamp(44px,4.4vw,64px);height:auto;aspect-ratio:1;object-fit:contain;justify-self:start;
  transition:filter .35s ease,transform .6s var(--ease-out);
}
.svc-row:hover .svc-icon{filter:brightness(0) invert(1);transform:scale(1.14) rotate(-6deg);}
.svc-title{font-size:clamp(1.3rem,2.6vw,2.4rem);line-height:1;transition:transform .55s var(--ease-out);}
.svc-desc{font-size:.98rem;color:var(--gray-700);transition:color .3s,transform .55s var(--ease-out);max-width:46ch;}
.svc-arrow{
  font-size:1.9rem;line-height:1;justify-self:end;padding-right:.4rem;
  transition:transform .5s var(--ease-out);
}
.svc-row:hover .svc-num{color:#fff;transform:translateX(.9rem);}
.svc-row:hover .svc-title{transform:translateX(1.4rem);}
.svc-row:hover .svc-desc{color:rgba(255,255,255,.92);transform:translateX(.8rem);}
.svc-row:hover .svc-arrow{transform:translateX(-.5rem) rotate(-45deg);}



/* ---------- Horizontal work scroller ---------- */
.hscroll{position:relative;background:var(--ink);color:#fff;}
.hscroll__sticky{position:relative;padding-block:clamp(3.5rem,8vw,6rem);}
.hscroll__track{
  display:flex;gap:1.4rem;align-items:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-left:max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));padding-right:var(--gutter);padding-bottom:1.6rem;
  scroll-padding-left:max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));
  scrollbar-width:thin;
}
.hscroll__intro{
  flex:none;width:min(82vw,420px);scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding-right:1.4rem;
}
.hscroll__intro h2{font-size:clamp(2.4rem,5vw,4.6rem);}
.hscroll__intro p{color:var(--gray-300);max-width:30ch;}
.hscroll__intro .btn{align-self:flex-start;margin-top:.6rem;}
.hcard{flex:none;width:min(74vw,340px);scroll-snap-align:start;display:flex;flex-direction:column;gap:1rem;}
.hcard__img{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--charcoal-2);}
.hcard__img img{
  position:absolute;top:0;left:-12%;width:124%;height:100%;max-width:none;object-fit:cover;
  transform:translate3d(var(--px,0px),0,0) scale(var(--sc,1.02));
  transition:filter .6s ease;
  filter:saturate(.92) contrast(1.02);
}
.hcard:hover .hcard__img img{--sc:1.1;filter:saturate(1.15) contrast(1.05);}
.hcard__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(179,18,42,.55),transparent 55%);
  opacity:0;transition:opacity .5s ease;
}
.hcard:hover .hcard__img::after{opacity:1;}
.hcard__meta{display:flex;gap:1rem;align-items:baseline;}
.hcard__no{font-family:var(--font-display);font-weight:900;color:var(--red-light);font-size:1rem;}
.hcard__meta h3{font-size:clamp(1.15rem,1.6vw,1.5rem);text-transform:none;letter-spacing:0;transition:transform .5s var(--ease-out),color .3s;}
.hcard:hover .hcard__meta h3{transform:translateX(.5rem);color:var(--red-light);}
.hcard__tag{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);margin-top:.35rem;font-weight:700;}
.hcard--end{
  background:var(--red);justify-content:space-between;padding:2rem;aspect-ratio:3/4;width:min(74vw,340px);
  transition:background .4s ease;
}
.hcard--end:hover{background:#fff;color:var(--ink);}
.hcard__end-num{font-family:var(--font-display);font-weight:900;font-size:clamp(5rem,12vw,9rem);line-height:.85;}
.hcard__end-label{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.5rem;line-height:1.05;}
.hcard__end-cta{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;display:flex;gap:.6rem;align-items:center;}
.hcard__end-cta i{font-style:normal;transition:transform .4s var(--ease-out);}
.hcard--end:hover .hcard__end-cta i{transform:translateX(8px);}
.hscroll__progress{display:none;}

/* pinned (desktop, set by JS) */
.hscroll.is-pinned{height:var(--hs-h,300vh);}
.hscroll.is-pinned .hscroll__sticky{
  position:sticky;top:0;height:100vh;height:100svh;padding-block:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.hscroll.is-pinned .hscroll__track{
  overflow:visible;scroll-snap-type:none;width:max-content;padding-bottom:0;
  transform:translate3d(var(--hx,0px),0,0);will-change:transform;
  padding-top:clamp(4.5rem,9vh,6.5rem);
}
.hscroll.is-pinned .hscroll__intro{width:clamp(320px,32vw,520px);}
.hscroll.is-pinned .hcard,
.hscroll.is-pinned .hcard--end{width:clamp(260px,min(24vw,46vh),420px);}
.hscroll.is-pinned .hscroll__progress{
  display:block;position:absolute;left:max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));right:var(--gutter);bottom:2.2rem;height:2px;background:rgba(255,255,255,.18);
}
.hscroll.is-pinned .hscroll__progress span{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--hp,0));}

/* ---------- Offer cards / diff / masonry polish ---------- */
.offer-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--ease-out);will-change:transform;}
.offer-card::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red);z-index:3;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-io);
}
.offer-card:hover::before{transform:scaleX(1);}
.offer-card__body{transition:transform .5s var(--ease-out);}
.offer-card:hover .offer-card__body{transform:translateY(-6px);}

.diff-item .mark{font-size:2rem;line-height:1;width:3.6rem;-webkit-text-stroke:1.5px var(--red);color:transparent;transition:color .4s;}
.diff-item:hover .mark{color:var(--red);}
.diff-item{transition:padding-left .45s var(--ease-out);}
.diff-item:hover{padding-left:.8rem;}

.masonry-card{will-change:clip-path;}
.masonry-card img{
  transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1.14));
  transition:filter .6s ease;
  height:100%;
}
.masonry-card:hover img{--sc:1.22;transform:translate3d(0,var(--py,0px),0) scale(var(--sc));filter:saturate(1.15);}
.masonry-card::before{
  content:'\2197';position:absolute;top:1.1rem;right:1.1rem;z-index:3;
  width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  transform:scale(0) rotate(-90deg);transition:transform .5s var(--ease-out);
}
.masonry-card:hover::before{transform:scale(1) rotate(0);}
.masonry-card .mc-caption h3{transition:transform .5s var(--ease-out);}
.masonry-card:hover .mc-caption h3{transform:translateY(-4px);}

.service-card{position:relative;overflow:hidden;}
.service-card::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-io);
}
.service-card:hover::after{transform:scaleY(1);}

.client-strip{background:var(--off-white);}
.logo-tile{transition:background var(--transition),transform .4s var(--ease-out);}
.logo-tile:hover{transform:scale(1.04);z-index:2;}

/* ---------- CTA (home) ---------- */
.cta-giant{
  position:relative;overflow:hidden;background:var(--red);color:#fff;
  padding-block:clamp(4rem,9vw,8rem);text-align:center;
}
.cta-giant .mq--ghost{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;}
.cta-giant .mq--ghost .mq__track{align-items:center;}
.cta-giant .mq--ghost{color:rgba(10,10,10,.22);}
.cta-giant .mq--ghost span.o{-webkit-text-stroke:2px rgba(10,10,10,.3);}
.cta-giant .cta-giant__inner{position:relative;z-index:2;}
.cta-giant h2{font-size:clamp(2.3rem,5.6vw,5.2rem);max-width:17ch;margin-inline:auto;line-height:.98;}
.cta-giant p{margin-top:1.2rem;font-size:1.15rem;opacity:.95;}
.cta-giant__actions{margin-top:2.6rem;display:flex;gap:1.6rem 2.4rem;justify-content:center;align-items:center;flex-wrap:wrap;}
.cta-orb{
  width:170px;height:170px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.15rem;line-height:1.05;
  position:relative;isolation:isolate;overflow:hidden;
  transition:color .4s ease;
}
.cta-orb::before{
  content:'';position:absolute;inset:0;border-radius:50%;background:#fff;z-index:-1;
  transform:scale(0);transition:transform .55s var(--ease-io);
}
.cta-orb:hover{color:var(--ink);}
.cta-orb:hover::before{transform:scale(1.05);}
.cta-phone{font-weight:700;font-size:1.15rem;border-bottom:2px solid rgba(255,255,255,.55);padding-bottom:.2rem;transition:border-color .3s;}
.cta-phone:hover{border-color:#fff;}

/* inner-page CTA band */
.cta-band{position:relative;overflow:hidden;}
.cta-band h2{font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1;}

/* ---------- Footer ---------- */
.footer-mark{
  overflow:hidden;white-space:nowrap;user-select:none;pointer-events:none;
  padding-block:2.4rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:1.4rem;
}
.footer-mark span{
  display:inline-block;font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.6rem,9.2vw,8.4rem);line-height:.86;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.2);
  transform:translate3d(var(--fm,0px),0,0);
}
.to-top{
  font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-300);
  display:inline-flex;gap:.5rem;align-items:center;
}
.to-top:hover{color:var(--red-light);}
.to-top i{font-style:normal;transition:transform .4s var(--ease-out);}
.to-top:hover i{transform:translateY(-4px);}
.footer-col a{display:inline-block;transition:color var(--transition),transform .4s var(--ease-out);}
.footer-col a:hover{transform:translateX(5px);}

/* ---------- Inner pages ---------- */
.page-hero{min-height:62vh;display:flex;align-items:flex-end;}
.page-hero .container{width:100%;}
.page-hero__media{overflow:hidden;}
.page-hero__media img{
  height:118%;transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1.08));
  transition:none;
}
.page-hero h1{font-size:clamp(2.4rem,6.6vw,6rem);max-width:18ch;line-height:.95;}
.page-hero .eyebrow,.page-hero .breadcrumb,.page-hero p.lead{opacity:0;translate:0 20px;}
html:not(.js) .page-hero .eyebrow,html:not(.js) .page-hero .breadcrumb,html:not(.js) .page-hero p.lead{opacity:1;translate:none;}
.page-hero.is-in .breadcrumb,.page-hero.is-in .eyebrow,.page-hero.is-in p.lead{
  opacity:1;translate:0 0;transition:opacity .8s ease,translate .9s var(--ease-out);transition-delay:var(--d,0s);
}
.page-hero.is-in .breadcrumb{--d:.05s;}
.page-hero.is-in .eyebrow{--d:.12s;}
.page-hero.is-in p.lead{--d:.55s;}
.page-hero .eyebrow,.page-hero .breadcrumb,.page-hero p.lead{animation:rvFallback .01s linear 9s forwards;}

.cs-block .cs-label{position:sticky;top:7.5rem;align-self:start;}
.cs-gallery a{position:relative;}
.cs-gallery a::after{
  content:'';position:absolute;inset:0;background:var(--red);mix-blend-mode:multiply;opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.cs-gallery a:hover::after{opacity:.28;}
.service-detail{position:relative;transition:background .5s ease,padding-left .5s var(--ease-out);}
.service-detail:hover{padding-left:1rem;}
.service-detail__num{transition:transform .5s var(--ease-out);}
.service-detail:hover .service-detail__num{transform:translateX(.6rem);}
.work-filters button{transition:background var(--transition),color var(--transition),border-color var(--transition),transform .35s var(--ease-out);}
.work-filters button:hover{transform:translateY(-3px);}
.field input,.field select,.field textarea{transition:border-color .3s,box-shadow .3s,transform .3s var(--ease-out);}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 10px 30px rgba(179,18,42,.12);transform:translateY(-2px);}

/* ---------- Mobile menu: staggered links ---------- */
@media (max-width:760px){
  body.nav-open .main-nav li{opacity:0;translate:0 24px;animation:menuIn .7s var(--ease-out) forwards;}
  body.nav-open .main-nav li:nth-child(1){animation-delay:.12s;}
  body.nav-open .main-nav li:nth-child(2){animation-delay:.18s;}
  body.nav-open .main-nav li:nth-child(3){animation-delay:.24s;}
  body.nav-open .main-nav li:nth-child(4){animation-delay:.3s;}
  body.nav-open .main-nav li:nth-child(5){animation-delay:.36s;}
  body.nav-open .main-nav a{font-family:var(--font-display);font-weight:900;font-size:2.4rem;line-height:1.1;}
  .hero__badge{display:none;}
  .hero__content{padding-block:7.5rem 7rem;}
  .hero-title{font-size:clamp(2.2rem,10.2vw,4rem);}
  .hero-title .line--outline .wi{-webkit-text-stroke:1.5px #fff;}
  .svc-row{grid-template-columns:2.2rem 2.8rem 1fr 1.6rem;gap:.8rem 1rem;}
  .svc-desc{grid-column:3 / 4;}
  .svc-arrow{grid-row:1;grid-column:4;}
  .svc-icon{width:2.8rem;}
  .cta-orb{width:140px;height:140px;font-size:1rem;}
  .page-hero{min-height:52vh;}
  .cs-block .cs-label{position:static;}
}
@keyframes menuIn{to{opacity:1;translate:0 0;}}
@media (max-width:1024px){
  .cs-block .cs-label{position:static;}
  .masonry-card::before{display:none;}
}

/* ---------- Reduced motion: switch it all off ---------- */
@media (prefers-reduced-motion: reduce){
  .grain,.preloader,.pt,.cursor-dot,.cursor-ring,.scroll-progress{display:none !important;}
  html.pt-enter::before,html.pt-enter::after{display:none !important;}
  html.js [data-split] .wi,html.js .hero-title .wi{transform:none !important;transition:none !important;animation:none !important;}
  html.js .rv,html.js .hero-fade{opacity:1 !important;translate:none !important;transition:none !important;animation:none !important;}
  html.js .cr{clip-path:none !important;opacity:1 !important;transition:none !important;animation:none !important;}
  html.js .scrub-text .sw{opacity:1 !important;}
  .page-hero .eyebrow,.page-hero .breadcrumb,.page-hero p.lead{opacity:1 !important;translate:none !important;animation:none !important;}
  .hero__badge svg{animation:none !important;}
  .svc-row::before,.btn::before,.cta-orb::before{transition:none !important;}
  .hscroll.is-pinned{height:auto !important;}
  .hscroll.is-pinned .hscroll__sticky{position:relative;height:auto;padding-block:clamp(3.5rem,8vw,6rem);}
  .hscroll.is-pinned .hscroll__track{transform:none !important;width:auto;overflow-x:auto;}
}


/* ---- Case study: point lists + deliverables table (Tikwere) ---- */
.cs-points{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.15rem;counter-reset:pt;}
.cs-points li{position:relative;padding-left:3.1rem;font-size:1.02rem;line-height:1.7;color:var(--gray-700);}
.cs-points li::before{counter-increment:pt;content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:.12rem;font-family:var(--font-display);font-weight:900;font-size:.9rem;letter-spacing:.06em;color:var(--red);}
.cs-points strong{display:block;color:var(--black);font-weight:700;margin-bottom:.1rem;}
.cs-block--dark .cs-points li{color:var(--gray-300);}
.cs-block--dark .cs-points li::before{color:var(--red-light);}
.cs-block--dark .cs-points strong{color:var(--white);}
.cs-deliver{margin-top:1.8rem;border-top:2px solid var(--black);}
.cs-deliver__row{display:grid;grid-template-columns:1.15fr .85fr 1.6fr;gap:1.2rem;padding:1.05rem 0;border-bottom:1px solid var(--gray-100);align-items:baseline;transition:background .3s ease,padding .3s ease;}
.cs-deliver__row span:first-child{font-weight:700;color:var(--black);}
.cs-deliver__row em{font-style:normal;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--red);}
.cs-deliver__row span:last-child{color:var(--gray-700);line-height:1.6;font-size:.98rem;}
@media (hover:hover){.cs-deliver__row:hover{background:var(--gray-50,#f6f6f6);padding-inline:.9rem;}}
@media (max-width:760px){.cs-deliver__row{grid-template-columns:1fr;gap:.25rem;}}

/* Work grid: let later cards back-fill gaps beside the tall featured cards */
@media (min-width:1025px){.masonry-grid{grid-auto-flow:dense;}}