/* ============================================================
   Kabak Yehor — landing
   Figma: Personal web / Homepage (desktop 30:83, mobile 45:225)
   1rem = 10 design px.  Desktop base 1440 · Mobile base 390
   ============================================================ */

@font-face{
  font-family:'Switzer';
  src:url('../fonts/Switzer-Variable.woff2') format('woff2-variations'),
      url('../fonts/Switzer-Variable.woff2') format('woff2'),
      url('../fonts/Switzer-Variable.woff') format('woff');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --black:#141311;
  --grey600:#666562;
  --grey500:#8D8C88;
  --grey100:#E6E5E0;
  --grey50:#F0EFEB;
  --white:#F7F6F2;
  --accent:#5B75FF;
  --mut72:rgba(102,101,98,.72);
}

*,*::before,*::after{box-sizing:border-box;}

/* --u = one design px. The inline script in <head> sets it from clientWidth;
   the value here is the pre-script fallback. No cap — the page always fills
   the viewport, so there is never a gap at the sides. */
html{
  --u:calc(100vw / 1440);
  font-size:calc(var(--u) * 10);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
/* Lenis drives the scroll itself once it is up */
html.lenis{scroll-behavior:auto;}
html.lenis,html.lenis body{height:auto;}
.lenis [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-smooth iframe{pointer-events:none;}
.lenis.lenis-stopped{overflow:clip;}

body{
  position:relative;
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:'Switzer','Switzer Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

p,h1,h2{margin:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

/* ── stage ───────────────────────────────────────────────── */
.stage{
  position:relative;
  width:144rem;
  /* the hero is exactly one screen; everything under it shifts by the
     difference between that screen and the 750 px the frame assumes */
  --shift:calc(100svh - 75rem);
  height:calc(680.1rem + var(--shift));
  margin:0 auto;
}
.hero{position:absolute;left:0;top:0;width:100%;height:100svh;}
.below{position:absolute;left:0;top:var(--shift);width:100%;}

/* the Figma hero frame, scaled by whichever of width / height binds */
.hero-frame{
  --uh:min(var(--u), calc(100svh / 750));
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:calc(var(--uh) * 10);   /* 1em = 10 design px in here */
  width:144em;height:75em;
}

/* anchors clear the fixed header */
#about,#cases,#process,#contacts{scroll-margin-top:7.2rem;}

/* ── type scale ──────────────────────────────────────────── */
.t-h1{font-size:27.1rem;line-height:21.2rem;letter-spacing:-1.626rem;}
.t-h2{font-size:7.2rem;line-height:8rem;letter-spacing:-.216rem;}
.t-h3{font-size:4.4rem;line-height:4.8rem;letter-spacing:-.088rem;}
.t-h4{font-size:3.2rem;line-height:3.6rem;letter-spacing:-.032rem;}
.t-h5{font-size:2.4rem;line-height:2.8rem;letter-spacing:-.024rem;}
.t-b1{font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;}
.t-b2{font-size:1.4rem;line-height:2rem;letter-spacing:-.007rem;}
.t-b3{font-size:1.2rem;line-height:1.6rem;letter-spacing:0;}

/* ── scroll reveal ───────────────────────────────────────────
   JS splits a title into lines on its rendered <br>s and wraps each one.
   The clip is open at the top and cleared at the bottom, so tight leading
   (the 271/212 display type) is never cropped at rest. */
.rv-l{display:block;clip-path:inset(-.45em -.2em -.3em -.2em);}
.rv-l__i{
  display:block;
  transform:translateY(130%);
  opacity:0;
  transition:transform .95s cubic-bezier(.22,1,.36,1), opacity .5s linear;
  transition-delay:calc(var(--rv-i, 0) * 85ms + var(--rv-delay, 0ms));
}
.is-in > .rv-l > .rv-l__i{transform:none;opacity:1;}

/* second half of a two-element phrase trails the first */
.bigword--process,.footer__big--2{--rv-delay:130ms;}

@media (prefers-reduced-motion:reduce){
  .rv-l__i{transform:none;opacity:1;transition:none;}
}

/* ── icons ───────────────────────────────────────────────── */
.ico{position:relative;display:block;flex:none;}
.ico img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.ico--16{width:1.6rem;height:1.6rem;}
.ico--20{width:2rem;height:2rem;}
.ico--16 img{width:1.6rem;height:1.6rem;}
.ico--20 img{width:2rem;height:2rem;}
.rot90 img{transform:translate(-50%,-50%) rotate(90deg);}
.rot-90 img{transform:translate(-50%,-50%) rotate(-90deg);}
.rot180 img{transform:translate(-50%,-50%) rotate(180deg);}

/* ── keyed video (luma-key → real alpha) ─────────────────── */
/* --vw/--vh/--vx/--vy place the video frame so that the figure lands in the
   slot the design gives it (Frame 21 in the hero, Frame 48 in the footer). */
.vkey{position:absolute;overflow:hidden;pointer-events:none;}
/* Safari refuses to autoplay a media element it treats as invisible, and a
   1x1 box counts as exactly that. The element keeps the canvas's real size
   and sits under it painted at zero opacity, so nothing shows but WebKit
   still sees a normal, visible video. */
.vkey__video{
  position:absolute;left:var(--vx,0);top:var(--vy,0);
  width:var(--vw,100%);height:var(--vh,100%);
  opacity:0;pointer-events:none;object-fit:fill;
}
.vkey__canvas{
  position:absolute;display:block;
  left:var(--vx,0);top:var(--vy,0);width:var(--vw,100%);height:var(--vh,100%);
}
.vkey.is-fallback .vkey__canvas{display:none;}
.vkey.is-fallback .vkey__video{
  left:var(--vx,0);top:var(--vy,0);width:var(--vw,100%);height:var(--vh,100%);
  opacity:1;object-fit:fill;mix-blend-mode:darken;
}

/* ============================================================
   DESKTOP  (≥1024px)
   ============================================================ */

/* Layer order: the video is the backdrop of the page — every element sits on
   top of it.  0 plates · 3 video · 4 grey band · 10 content · 50 header */

/* grey band — Rectangle 174 */
.band-grey{position:absolute;left:0;top:75rem;width:144rem;height:80rem;background:var(--grey50);z-index:4;}

/* background words */
.bigword{
  position:absolute;z-index:1;
  will-change:transform;transform:translateZ(0);
  font-size:27.1rem;line-height:21.2rem;letter-spacing:-1.626rem;
  color:var(--grey50);word-break:break-word;
}
.bigword--design{left:3.2rem;top:436.7rem;width:137.6rem;}
.bigword--process{left:14.9rem;top:457.9rem;width:125.8rem;}

/* ── fixed header ────────────────────────────────────────── */
.topbar{
  position:fixed;left:50%;top:0;transform:translateX(-50%);
  width:144rem;height:5.2rem;z-index:50;pointer-events:none;
}
.topbar::before{               /* backdrop, fades in with the scroll */
  content:'';position:absolute;inset:0;background:var(--white);
  opacity:var(--hdr,0);
}
.topbar::after{                /* soft shadow under the bar */
  content:'';position:absolute;left:0;right:0;top:100%;height:2.4rem;
  background:linear-gradient(to bottom, rgba(20,19,17,.05), rgba(20,19,17,0));
  opacity:var(--hdr,0);
}
.topbar > *{pointer-events:auto;}

/* brand — starts as the hero H1, ends as the header logo */
.brand{
  position:absolute;left:3.2rem;top:5.4rem;z-index:2;margin:0;
  font-size:var(--brand-fs,27.1rem);
  line-height:.78229;
  letter-spacing:-.06em;
  font-weight:400;color:var(--black);white-space:nowrap;
  transform:translate3d(var(--brand-dx,0px),var(--brand-y,0px),0);
  transform-origin:left top;
  pointer-events:none;
}
.ht--2::before{content:' ';}

/* outlined wordmark: used instead of live text when assets/img/brand.svg
   exists. It spans edge to edge by construction (width is 100 % of the
   column) and the morph becomes a GPU transform instead of a font-size
   animation, so it stays crisp at every step. */
.brand__svg{display:none;}
html.brand-svg .brand{
  font-size:0;line-height:0;letter-spacing:0;
  width:calc(100% - 6.4rem);
  transform:translate3d(0,var(--brand-y,0px),0) scale(var(--brand-k,1));
  transform-origin:left top;
}
html.brand-svg .brand__svg{display:block;width:100%;height:auto;}
/* the real text stays in the DOM for search and screen readers */
html.brand-svg .brand__txt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.nav{position:absolute;left:79.3rem;top:1.6rem;display:flex;gap:4rem;align-items:center;z-index:40;}
.nav__item{
  display:flex;gap:.4rem;align-items:center;white-space:nowrap;
  font-size:1.6rem;line-height:2rem;font-weight:500;letter-spacing:-.016rem;color:var(--black);
}
/* hover: the label rolls up and its twin rolls in from below.
   The clip box is the line box, so nothing outside it is ever painted. */
.sr-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* The clip is opened downward by --roll-slack so descenders ('g' in the
   e-mail, in Digitalkit, in Enjoying Life) are not shaved off. It can stay
   open because the incoming copy's ink starts lower than the slack: at the
   72 px e-mail the next line's ascender sits ~13 px into its box against
   8.6 px of slack. An em value keeps that ratio at every size, and because
   the box height is untouched nothing in a flex row shifts. */
.roll{
  position:relative;display:block;height:var(--roll-h,2rem);
  overflow:visible;
  clip-path:inset(0 0 calc(var(--roll-slack,.12em) * -1) 0);
}
.roll--ico{width:2rem;}
.roll__i{display:block;height:var(--roll-h,2rem);transition:transform .42s cubic-bezier(.22,.61,.36,1);}
/* .roll-h marks whatever the pointer is actually over — a link, a card,
   the whole image — so the label and its icon roll together */
.roll-h:focus-visible .roll__i,
.roll-h.is-rolled .roll__i{transform:translateY(calc(var(--roll-h,2rem) * -1));}
/* guarded so a tap on a phone doesn't leave the label stuck half-rolled */
@media (hover:hover){
  .roll-h:hover .roll__i{transform:translateY(calc(var(--roll-h,2rem) * -1));}
}
@media (prefers-reduced-motion: reduce){
  .roll__i{transition:none;}
}

.dot{position:relative;display:block;width:1.6rem;height:1.6rem;flex:none;}
.dot::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.6rem;height:.6rem;background:var(--accent);}

.letscreate{
  position:absolute;right:3.2rem;top:1.6rem;z-index:40;
  display:flex;gap:.4rem;align-items:center;white-space:nowrap;
  font-size:1.6rem;line-height:2rem;font-weight:500;letter-spacing:-.016rem;color:var(--black);
}

/* burger — the Default export is three 20x3 bars at y 15/21/27 inside a
   44 box; Active is the same two bars crossed at 45 deg through the centre
   (22,22). So the open state is a pure rotate + slide of the outer bars
   with the middle one dropped, and nothing has to be swapped out. */
.burger{position:absolute;left:1.6rem;top:5.2rem;width:4.4rem;height:4.4rem;z-index:60;}
.burger span{
  position:absolute;left:1.2rem;width:2rem;height:.3rem;background:var(--black);
  transform-origin:50% 50%;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.burger span:nth-child(1){top:1.5rem;}
.burger span:nth-child(2){top:2.1rem;}
.burger span:nth-child(3){top:2.7rem;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.55rem) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4);}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.65rem) rotate(-45deg);}
@media (prefers-reduced-motion:reduce){
  .burger span{transition:none;}
}

/* ── hero ────────────────────────────────────────────────── */
.hero-media{left:0;top:0;width:144em;height:75em;z-index:3;}

.hero-intro{position:absolute;left:3.2rem;top:auto;bottom:3.2rem;width:33.9rem;z-index:10;}
.hero-intro__t{font-size:2.4rem;line-height:2.8rem;letter-spacing:-.024rem;color:var(--black);}
.hero-intro__d{margin-top:1.2rem;font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;color:var(--grey500);}

.scrollbar{
  position:absolute;right:0;top:auto;bottom:0;width:47.5rem;height:8.4rem;z-index:10;
  background:var(--grey50);display:flex;align-items:center;gap:1.6rem;padding:0 3.2rem;
}
.scrollbar span{
  flex:1 0 0;text-align:right;
  font-size:1.6rem;line-height:2rem;font-weight:500;letter-spacing:-.016rem;color:var(--accent);
}

/* ── lede ────────────────────────────────────────────────── */
.lede{position:absolute;left:3.2rem;top:88.6rem;width:90.9rem;height:14.4rem;z-index:10;}
.lede__a{position:absolute;left:11.7rem;top:0;width:79.2rem;font-size:4.4rem;line-height:4.8rem;letter-spacing:-.088rem;color:var(--black);}
.lede__a .mut{color:var(--mut72);}
.lede__b{position:absolute;left:0;top:4.8rem;width:90.9rem;font-size:4.4rem;line-height:4.8rem;letter-spacing:-.088rem;color:var(--black);}
.lede__b .mut,.lede__tail{color:var(--grey500);}

.lede-note{
  position:absolute;left:96.5rem;top:107.8rem;width:44.3rem;z-index:10;
  font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;color:var(--grey600);
}

/* ── values ──────────────────────────────────────────────── */
.values{position:absolute;left:3.2rem;top:131rem;width:137.6rem;height:47rem;z-index:10;}
.vcard{position:absolute;top:0;height:47rem;background:var(--white);border:1px solid var(--grey50);overflow:hidden;}
.vcard__bg{position:absolute;left:-.1rem;top:-.1rem;width:44.4rem;height:47.1rem;}
.vcard--2 .vcard__bg{width:44.3rem;height:47.5rem;}
.vcard--1{left:0;width:44.3rem;}
.vcard--2{left:46.7rem;width:44.2rem;background:var(--white);}
.vcard--3{left:93.3rem;width:44.3rem;}

.vcard__t{position:absolute;left:3.1rem;top:3.1rem;font-size:2.4rem;line-height:2.8rem;letter-spacing:-.024rem;color:var(--black);}
.vcard--1 .vcard__t{width:37.9rem;}
.vcard--3 .vcard__t{width:37.9rem;}
.vcard__ico{position:absolute;left:3.1rem;display:block;}
.vcard--1 .vcard__ico{top:25.7rem;width:15.7rem;height:18rem;}
.vcard--3 .vcard__ico{top:27.7rem;width:17.1rem;height:16rem;}
.vcard__ico img{width:100%;height:100%;}
/* The card exports carry the number in the corner already — on both
   breakpoints — so the live element only doubled it two pixels off and read
   as a smudge. It stays in the DOM for the reading order, out of the paint. */
.vcard__n{
  position:absolute;right:3.1rem;font-size:1.6rem;line-height:2.4rem;
  letter-spacing:-.008rem;color:var(--grey600);text-align:right;
  visibility:hidden;
}
.vcard--1 .vcard__n{top:41.3rem;}
.vcard--3 .vcard__n{top:41.3rem;}

.vcard--2__top{position:absolute;left:0;top:0;right:0;height:24rem;background:var(--white);}
.vcard--2__t{z-index:2;}
.vcard__t,.vcard__n{z-index:2;}
.vcard--2__t{position:absolute;left:1.6rem;top:13.6rem;width:41rem;font-size:3.2rem;line-height:3.6rem;letter-spacing:-.032rem;color:var(--black);}
.vcard--2__blue{position:absolute;left:0;right:0;top:23.6rem;bottom:-.1rem;background:var(--accent);overflow:hidden;}
.vcard--2__glyph{position:absolute;left:8.4rem;top:5.6rem;width:27.6rem;height:13.2rem;}
.vcard__n--inv{color:var(--white);top:41.7rem;right:3.1rem;}

/* ── quote blocks ────────────────────────────────────────── */
.quote{position:absolute;z-index:10;}
.quote--a{left:3.2rem;top:194rem;width:137.6rem;height:24.8rem;}
.quote--b{left:22.8rem;top:566.7rem;width:98.1rem;height:24.8rem;}

.quote__h{
  position:absolute;left:50%;top:0;transform:translateX(-50%);text-align:center;
  font-size:4.4rem;line-height:4.8rem;letter-spacing:-.088rem;color:var(--black);
}
.quote--a .quote__h{width:44.2rem;}
.quote--b .quote__h{width:max-content;white-space:nowrap;}

.quote__s{
  position:absolute;left:50%;top:12rem;transform:translateX(-50%);text-align:center;
  font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;color:var(--grey600);
}
.quote--a .quote__s{width:44.2rem;}
.quote--b .quote__s{width:max-content;white-space:nowrap;}

.quote__ico{position:absolute;left:50%;transform:translateX(-50%);display:block;width:3.2rem;height:3.2rem;}
.quote__ico img{position:static;transform:none;width:100%;height:100%;}
/* Icon_a is 33×33 in a 32 box — the design lets it overhang by half a px */
.quote--a .quote__ico img{width:3.3rem;height:3.3rem;margin:-.05rem 0 0 -.05rem;}
.quote--a .quote__ico{top:21.6rem;}
.quote--b .quote__ico{top:19.2rem;}

.quote__lbl{position:absolute;top:12rem;font-size:1.4rem;line-height:2rem;color:var(--black);}
.quote--a .quote__lbl--l{left:11.7rem;width:20.9rem;}
.quote--a .quote__lbl--r{right:11.7rem;width:20.9rem;text-align:right;}
.quote--b .quote__lbl--l{left:-7.9rem;width:14.4rem;}
.quote--b .quote__lbl--r{right:-8.2rem;width:14.5rem;text-align:right;}

/* ── case study ──────────────────────────────────────────── */
.cases{position:absolute;left:3.2rem;top:234.8rem;width:137.6rem;height:159.5rem;z-index:10;}
/* pinned while all three cases scroll past; max() keeps it clear of the header */
.cases__media{
  position:sticky;top:max(7.2rem, calc((100vh - 44.8rem) / 2));
  width:32.6rem;height:44.8rem;margin-top:5.7rem;
}
/* The row spans the full column, so it used to lie over the sticky photo and
   swallow both the click and the hover. Nothing in the row's copy is
   interactive, so the row itself lets the pointer through and only its real
   controls take it back. */
.case{position:absolute;left:0;width:137.6rem;height:50.5rem;pointer-events:none;}
.case a,.case button,.case [data-case-open]{pointer-events:auto;}
.case--1{top:0;}
.case--2{top:54.5rem;}
.case--3{top:109rem;}
.case__kicker{position:absolute;left:47.5rem;top:0;font-size:1.4rem;line-height:2rem;letter-spacing:-.007rem;color:var(--grey600);}
.case__count{position:absolute;left:133.1rem;top:0;font-size:1.4rem;line-height:2rem;letter-spacing:-.007rem;color:var(--grey600);}
.case__rule{position:absolute;left:46.7rem;top:3.3rem;width:90.9rem;height:.1rem;background:var(--grey100);}

.case__shot{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.case__shot--m{position:absolute;left:0;top:5.7rem;width:32.6rem;height:44.8rem;}
.case__shot-inner{position:absolute;inset:0;overflow:hidden;}
.case__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.case__btn{position:absolute;left:27.8rem;top:0;width:4.8rem;height:4.8rem;background:var(--accent);}
.case__btn .roll--ico{position:absolute;left:1.4rem;top:1.4rem;width:2rem;}

.case__title{
  position:absolute;left:46.8rem;top:5.7rem;
  font-size:7.2rem;line-height:8rem;letter-spacing:-.216rem;font-weight:400;color:var(--black);white-space:nowrap;
}
.case__brand{
  position:absolute;right:0;top:5.7rem;text-align:right;
  font-size:3.2rem;line-height:3.6rem;letter-spacing:-.032rem;color:var(--grey100);white-space:nowrap;
}
.case__lbl{position:absolute;top:32.9rem;font-size:1.2rem;line-height:1.6rem;color:var(--grey600);white-space:nowrap;}
.case__val{position:absolute;top:35.3rem;font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;color:var(--black);}
.case__lbl--role{left:46.7rem;}
.case__val--role{left:46.7rem;width:32.5rem;}
.case__lbl--srv{left:93.3rem;}
.case__val--srv{left:93.3rem;width:21rem;}
.case__lbl--ind{left:116.7rem;}
.case__val--ind{left:116.7rem;width:20.9rem;}

.discover{
  position:absolute;left:46.7rem;top:45.7rem;
  display:flex;align-items:center;gap:.8rem;height:2.4rem;
  font-size:1.6rem;line-height:2rem;font-weight:500;letter-spacing:-.016rem;color:var(--accent);
}

/* ── process ─────────────────────────────────────────────── */
.process{
  position:absolute;left:3.3rem;top:483.9rem;width:137.4rem;height:66.8rem;z-index:10;
  will-change:transform;transform:translateZ(0);
}
.pcard{position:absolute;width:44.2rem;height:32.2rem;background:var(--white);border:1px solid var(--grey50);overflow:hidden;}
.pcard--1{left:0;top:0;}
.pcard--2{left:93.2rem;top:0;}
.pcard--3{left:0;top:34.6rem;}
.pcard--4{left:46.6rem;top:34.6rem;}
.pcard__t{position:absolute;left:3.1rem;top:3.1rem;font-size:3.2rem;line-height:3.6rem;letter-spacing:-.032rem;color:var(--black);white-space:nowrap;}
.pcard__d{position:absolute;left:3.1rem;top:7.9rem;width:37.8rem;font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;color:var(--grey600);}
.pcard__n{position:absolute;left:3.1rem;top:18.1rem;font-size:27.1rem;line-height:21.2rem;letter-spacing:-1.626rem;color:var(--grey50);white-space:nowrap;}

/* the blue plate is part of the exported SVG; keeping it in CSS too means the
   cell still reads as a card while an illustration is missing */
.pfig{position:absolute;overflow:hidden;background:var(--accent);backface-visibility:hidden;}
.pfig img{transform:translateZ(0);}
.pfig--3{left:46.6rem;top:.6rem;width:44.2rem;height:31.6rem;}
.pfig--15{left:93.2rem;top:34.6rem;width:44.2rem;height:32.2rem;}
.pfig > img.only-d{width:100%;height:100%;}
/* Component 3 is one SVG on both breakpoints — cover keeps the burst round
   where the mobile cell is a different aspect than the desktop one */
.pfig--3 img{width:100%;height:100%;object-fit:cover;}

/* ── footer ──────────────────────────────────────────────── */
.footer{
  position:absolute;left:0;top:605.1rem;width:144rem;height:75rem;
  background:var(--grey50);overflow:hidden;z-index:10;
}
.footer__big{
  position:absolute;z-index:1;
  font-size:27.1rem;line-height:21.2rem;letter-spacing:-1.626rem;color:var(--grey100);
}
.footer__big--1{left:3.2rem;top:8rem;width:137.6rem;}
.footer__big--2{left:14.9rem;top:29.2rem;width:125.8rem;}

/* footer layers: 1 big words · 2 video · 4 everything else on top of it */
.footer-media{left:0;top:0;width:144rem;height:75rem;z-index:2;--vw:144rem;--vh:75rem;--vx:0;--vy:0;}

.contact{position:absolute;right:0;bottom:0;width:72rem;height:31.6rem;z-index:4;}
/* Rectangle 42 — white plate with the Download-CV notch cut out of its top-right */
.contact__plate{
  position:absolute;inset:0;background:var(--white);
  clip-path:polygon(0 0, 54.7rem 0, 54.7rem 8.4rem, 72rem 8.4rem, 72rem 31.6rem, 0 31.6rem);
}
.contact__t{position:absolute;left:3.2rem;top:3.2rem;font-size:2.4rem;line-height:2.8rem;letter-spacing:-.024rem;color:var(--black);white-space:nowrap;}
.contact__s{position:absolute;left:3.2rem;top:6.8rem;font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;color:var(--grey600);white-space:nowrap;}
.contact__mail{position:absolute;left:3.2rem;top:20.4rem;font-size:7.2rem;line-height:8rem;letter-spacing:-.216rem;color:var(--black);white-space:nowrap;}
/* the address rolls up and "copied" takes its place — same idiom as the
   header labels, one line box tall */
.roll--mail{--roll-h:8rem;}
.contact__mail.is-rolled .roll__i{transform:translateY(-8rem);}
.contact__mail .roll__i + .roll__i{color:var(--accent);}

.contact__cv{
  position:absolute;left:54.7rem;top:0;width:17.3rem;height:8.4rem;background:var(--accent);
}
.contact__cv .roll--ico{position:absolute;left:3.2rem;top:3.2rem;width:2rem;}
.contact__cv .roll--cv{
  position:absolute;left:5.6rem;top:3.2rem;
  font-size:1.6rem;line-height:2rem;font-weight:500;letter-spacing:-.016rem;color:var(--white);white-space:nowrap;
}

.footer__soc{
  position:absolute;top:38.2rem;z-index:4;text-align:right;
  font-size:1.6rem;line-height:2rem;font-weight:500;letter-spacing:-.016rem;color:var(--black);white-space:nowrap;
}
.footer__soc--ig{right:12.5rem;}
.footer__soc--in{right:3.2rem;}

.footer__meta{position:absolute;left:3.2rem;z-index:4;font-size:1.2rem;line-height:1.6rem;color:var(--grey600);white-space:nowrap;}
.footer__meta--1{top:68.6rem;}
.footer__meta--2{top:70.2rem;}

/* ── mobile menu — Figma 96:73 ────────────────────────────
   A 424 px panel drops from the top and the rest of the screen goes behind
   a blurred scrim. z-index sits under .topbar (50) on purpose: the burger
   and "Let's create" are already at the design's coordinates up there, so
   they stay put and the burger itself morphs into the ✕. */
.m-menu{position:fixed;inset:0;z-index:45;}
.m-menu[hidden]{display:none;}

/* Opening runs in three beats rather than one slab of movement: the plate
   drops, the rules draw out from the left under it, and the four rows come
   up one after another. --i is the row's place in that order.
   Closing is deliberately plainer — no stagger, everything leaves together
   and faster, so a second tap feels instant. */
.m-menu__panel{
  position:absolute;left:0;top:0;width:39rem;height:42.4rem;
  background:var(--white);
  transform:translateY(-100%);
  transition:transform .34s cubic-bezier(.4,0,.9,.35);      /* out */
  will-change:transform;
}
.m-menu__scrim{
  position:absolute;left:0;top:42.4rem;right:0;bottom:0;
  background:rgba(20,19,17,.26);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .28s ease;cursor:pointer;
}
.m-menu.is-open .m-menu__panel{
  transform:none;
  transition:transform .62s cubic-bezier(.16,1,.3,1);        /* in */
}
.m-menu.is-open .m-menu__scrim{opacity:1;transition:opacity .5s ease .1s;}

.m-menu__rule{
  position:absolute;left:1.6rem;width:35.8rem;height:.1rem;background:var(--grey100);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s ease;
}
.m-menu.is-open .m-menu__rule{
  transform:none;
  transition:transform .55s cubic-bezier(.22,1,.36,1) calc(.16s + var(--i,0) * .05s);
}
.m-menu__rule--0{top:10.8rem;--i:0;}
.m-menu__rule--1{top:20.1rem;--i:1;}
.m-menu__rule--2{top:26.6rem;--i:2;}
.m-menu__rule--3{top:33.1rem;--i:3;}

/* The row is the tap target, not just the label: it spans the rules and is
   44 px tall, while align-items keeps the type on the design's baseline. */
.m-menu__item{
  position:absolute;left:1.6rem;right:1.6rem;height:4.4rem;padding-left:.8rem;
  display:flex;align-items:center;gap:.8rem;
  font-size:1.8rem;line-height:2.4rem;font-weight:500;letter-spacing:-.018rem;
  color:var(--black);white-space:nowrap;
  opacity:0;transform:translateY(1.4rem);
  transition:opacity .16s ease, transform .22s ease;
}
.m-menu.is-open .m-menu__item{
  opacity:1;transform:none;
  transition:opacity .4s ease calc(.22s + var(--i,0) * .06s),
             transform .62s cubic-bezier(.16,1,.3,1) calc(.22s + var(--i,0) * .06s);
}
/* the dot lands a touch after its label */
.m-menu__item .dot{
  transform:scale(.4);opacity:0;
  transition:transform .2s ease, opacity .16s ease;
}
.m-menu.is-open .m-menu__item .dot{
  transform:none;opacity:1;
  transition:transform .5s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i,0) * .06s),
             opacity .3s ease calc(.3s + var(--i,0) * .06s);
}
.m-menu__item--1{top:14.7rem;--i:0;}
.m-menu__item--2{top:21.2rem;--i:1;}
.m-menu__item--3{top:27.7rem;--i:2;}
.m-menu__item--4{top:34.2rem;--i:3;}
@media (prefers-reduced-motion:reduce){
  .m-menu__panel,.m-menu__scrim,.m-menu__rule,.m-menu__item,.m-menu__item .dot{
    transition:none;
  }
  .m-menu__rule,.m-menu__item,.m-menu__item .dot{opacity:1;transform:none;}
}

/* ── breakpoint helpers ──────────────────────────────────── */
@media (min-width:1024px){ .only-m{display:none !important;} }

/* ============================================================
   MOBILE  (<1024px) — Figma frame 45:225, base 390
   ============================================================ */
@media (max-width:1023.98px){

  html{--u:calc(100vw / 390);}
  .stage{--shift:0px;height:753.7rem;}
  .hero{height:73.2rem;overflow:visible;}
  .hero-frame{--uh:var(--u);width:39em;height:73.2em;}
  .only-d{display:none !important;}

  .stage{width:39rem;}

  .band-grey{top:79.6rem;width:39rem;height:47.6rem;}

  /* big words */
  .bigword{font-size:8rem;line-height:7.2rem;letter-spacing:-.48rem;color:var(--grey100);white-space:nowrap;}
  .bigword--design{left:1.6rem;top:471.7rem;width:22.9rem;}
  .bigword--process{left:5.6rem;top:478.9rem;width:31.8rem;}

  /* header — scrolls with the page here, the logo morph is desktop-only */
  .topbar{position:absolute;width:39rem;height:9.6rem;}
  .topbar::before,.topbar::after{content:none;}
  /* with the menu open the bar is pinned so the ✕ and "Let's create" hold
     the design's 52 / 64, and the headline steps out from over the panel */
  body.menu-open .topbar{position:fixed;top:0;}
  body.menu-open .brand{visibility:hidden;}
  .letscreate{right:1.6rem;top:6.4rem;}

  /* hero */
  .brand{
    left:1.6rem;top:12.4rem;width:35.8rem;
    font-size:13.6rem;line-height:.82353;white-space:normal;
    transform:none;
  }
  .ht{display:block;}
  .ht--2::before{content:none;}

  /* video frame scaled so the figure fills Frame 21 (260×260 @ 65,288) */
  .hero-media{width:39em;height:73.2em;--vw:84.53em;--vh:44.02em;--vx:-22.74em;--vy:19.41em;}

  .hero-intro{left:1.6rem;top:auto;bottom:4.8rem;width:33.9rem;}
  .hero-intro__d{color:var(--grey600);}

  .scrollbar{right:0;top:73.2rem;bottom:auto;width:39rem;height:6.4rem;padding:0 3.2rem;}

  /* lede */
  .lede{left:1.6rem;top:86.8rem;width:35.8rem;height:11.2rem;}
  .lede__a{left:4rem;top:0;width:auto;white-space:nowrap;font-size:2.4rem;line-height:2.8rem;letter-spacing:-.048rem;}
  .lede__a .mut{color:var(--grey600);}
  .lede__b{left:0;top:2.8rem;width:35.8rem;font-size:2.4rem;line-height:2.8rem;letter-spacing:-.048rem;}
  .lede__b .mut{color:var(--grey600);}
  .lede__tail{color:var(--black);}

  .lede-note{left:11rem;top:102.8rem;width:26.4rem;font-size:1.4rem;line-height:2rem;letter-spacing:-.007rem;}

  /* values */
  .values{left:1.6rem;top:120rem;width:35.8rem;height:89.6rem;}
  .vcard{width:35.8rem;height:28.8rem;left:0;}
  .vcard--1{top:0;}
  .vcard--2{top:30.4rem;}
  .vcard--3{top:60.8rem;}

  /* the mobile card export carries the plate, the icon and the number,
     so the separate icon / number / blue-half elements stand down here */
  .vcard{border:0;}
  .vcard .vcard__bg,.vcard--2 .vcard__bg{left:0;top:0;width:35.8rem;height:28.8rem;}
  .vcard__ico,.vcard--2__top,.vcard--2__blue-m{display:none;}

  .vcard__t{left:1.5rem;top:1.5rem;width:31rem !important;font-size:1.8rem;line-height:2.4rem;letter-spacing:-.018rem;}
  .vcard--2__t{left:1.6rem;top:7.1rem;width:32.6rem;font-size:2.4rem;line-height:2.8rem;letter-spacing:-.024rem;}

  /* quotes */
  .quote{left:1.6rem;width:35.8rem;height:26rem;}
  .quote--a{top:220rem;}
  .quote--b{top:643.7rem;}

  .quote__h{top:3.8rem;width:35.8rem !important;white-space:normal !important;font-size:2.4rem;line-height:2.8rem;letter-spacing:-.048rem;}
  .quote__s{top:11rem;width:26.4rem !important;white-space:normal !important;font-size:1.2rem;line-height:1.6rem;letter-spacing:-.006rem;}
  .quote__ico{top:19rem !important;}
  .quote__lbl{top:0;left:50% !important;right:auto !important;width:auto !important;
    transform:translateX(-50%);text-align:center;font-size:1rem;line-height:1.4rem;white-space:nowrap;}
  .quote__lbl--r{top:24.6rem;}

  /* case */
  .cases{left:1.6rem;top:256.4rem;width:35.8rem;}
  .case{left:0;width:35.8rem;height:55.6rem;}
  .case--1{top:0;}
  .case--2{top:53.5rem;}
  .case--3{top:109rem;}
  .case__kicker{left:.8rem;font-size:1.2rem;line-height:1.6rem;letter-spacing:-.006rem;}
  .case__count{left:31.8rem;font-size:1.2rem;line-height:1.6rem;letter-spacing:-.006rem;}
  .case__rule{left:0;top:2.5rem;width:35.8rem;}

  .case__btn{left:13.9rem;top:0;width:3.2rem;height:3.2rem;}
  .case__btn .roll--ico{left:.8rem;top:.8rem;width:1.6rem;--roll-h:1.6rem;}
  .case__btn .ico{width:1.6rem;height:1.6rem;}
  .case__btn .ico img{width:1.6rem;height:1.6rem;}

  .case__title{left:18.7rem;top:5.7rem;white-space:normal;font-size:3.2rem;line-height:3.6rem;letter-spacing:-.096rem;}
  .case__brand{right:0;top:23.2rem;font-size:2.4rem;line-height:2.8rem;letter-spacing:-.024rem;}

  .case__lbl{font-size:1.2rem;line-height:1.6rem;letter-spacing:-.006rem;}
  .case__val{font-size:1.4rem;line-height:2rem;letter-spacing:-.007rem;}
  .case__lbl--role{left:0;top:30rem;}
  .case__val--role{left:0;top:32rem;width:35.8rem;}
  .case__lbl--srv{left:0;top:38.4rem;}
  .case__val--srv{left:0;top:40.4rem;width:17.1rem;}
  .case__lbl--ind{left:18.7rem;top:38.4rem;}
  .case__val--ind{left:18.7rem;top:40.4rem;width:17.1rem;}

  .discover{left:0;top:49.6rem;}
  /* only case 2's Role runs to three lines in Switzer, so only its grid
     drops by 20 — the gap under Role stays 24 in every row */
  .case--2 .case__lbl--srv,.case--2 .case__lbl--ind{top:40.4rem;}
  .case--2 .case__val--srv,.case--2 .case__val--ind{top:42.4rem;}
  .case--2 .discover{top:51.6rem;}

  /* logos */
  .logos{position:absolute;left:1.6rem;top:427.8rem;width:35.8rem;height:33.5rem;z-index:10;}
  .logos__lbl{position:absolute;left:50%;transform:translateX(-50%);font-size:1rem;line-height:1.4rem;color:var(--black);white-space:nowrap;}
  .logos__lbl--top{top:0;}
  .logos__lbl--bot{top:32.1rem;}
  .logos__rule{position:absolute;background:var(--grey100);}
  .logos__rule--h1{left:0;top:3.8rem;width:35.8rem;height:.1rem;}
  .logos__rule--h2{left:0;top:16.7rem;width:35.8rem;height:.1rem;}
  .logos__rule--h3{left:0;top:29.6rem;width:35.8rem;height:.1rem;}
  .logos__rule--v{left:17.9rem;top:3.9rem;width:.1rem;height:25.7rem;}
  .logos__cell{position:absolute;width:17.1rem;height:10.4rem;}
  .logos__name{top:4rem;font-size:1.6rem;line-height:2.4rem;letter-spacing:-.016rem;}
  .logos__name .roll{--roll-h:2.4rem;}
  .logos__ico{left:14.7rem;top:2.4rem;width:1.6rem;height:1.6rem;}
  .logos__ico img{width:1.6rem;height:1.6rem;}
  /* the design capitalises the link on mobile only */
  .discover .roll__i::first-letter{text-transform:uppercase;}
  .logos__cell--a{left:0;top:5.1rem;}
  .logos__cell--b{left:18.7rem;top:5.1rem;}
  .logos__cell--c{left:0;top:18rem;}
  .logos__cell--d{left:18.7rem;top:18rem;}

  /* process */
  .process{left:1.6rem;top:487.7rem;width:35.8rem;height:145.6rem;}
  .pcard{width:35.8rem;height:24.8rem;left:0;}
  .pcard--1{top:0;}
  .pcard--2{top:47.2rem;}
  .pcard--3{top:73.6rem;}
  .pcard--4{top:100rem;}
  .pcard__t{left:1.9rem;top:1.9rem;font-size:2.4rem;line-height:3.2rem;letter-spacing:-.024rem;}
  .pcard__d{left:1.9rem;top:5.9rem;width:31.8rem;font-size:1.4rem;line-height:2rem;letter-spacing:-.007rem;}
  .pcard__n{left:1.9rem;top:16.7rem;font-size:13.6rem;line-height:11.2rem;letter-spacing:-.816rem;}

  .pfig{left:0;width:35.8rem;height:19.2rem;background:var(--accent);}
  .pfig--3{top:26.4rem;}
  .pfig--15{top:126.4rem;}
  .pfig__m{position:absolute;inset:0;width:35.8rem;height:19.2rem;}

  /* footer */
  .footer{top:680.1rem;width:39rem;height:73.6rem;}
  .footer__big{font-size:13.6rem;line-height:11.2rem;letter-spacing:-.816rem;white-space:nowrap;}
  .footer__big--1{left:1.6rem;top:4.8rem;width:35.8rem;}
  .footer__big--2{left:5.6rem;top:16rem;width:35.9rem;}

  /* video frame scaled so the figure fills Frame 48 (264×308 @ 63,112) */
  .footer-media{width:39rem;height:73.6rem;--vw:86.79rem;--vh:45.19rem;--vx:-9.85rem;--vy:-1.24rem;}

  .contact{
    left:1.6rem;right:auto;bottom:auto;top:40.4rem;width:35.8rem;height:22.8rem;
  }
  .contact__plate{clip-path:none;}
  .contact__t{left:2.4rem;top:2.4rem;font-size:1.8rem;line-height:2.4rem;letter-spacing:-.018rem;}
  .contact__s{left:2.4rem;top:8.4rem;font-size:1.2rem;line-height:1.6rem;letter-spacing:-.006rem;}
  .contact__mail{left:2.4rem;top:16.8rem;width:31rem;font-size:3.2rem;line-height:3.6rem;letter-spacing:-.096rem;}
  .roll--mail{--roll-h:3.6rem;}
  .contact__mail.is-rolled .roll__i{transform:translateY(-3.6rem);}
  .contact__cv{left:20rem;top:0;width:15.8rem;height:6.4rem;}
  .contact__cv .roll--ico{left:2.4rem;top:2.2rem;}
  .contact__cv .roll--cv{left:4.8rem;top:2.3rem;font-size:1.4rem;line-height:1.8rem;letter-spacing:-.014rem;--roll-h:1.8rem;}

  .footer__soc{top:65.6rem;font-size:1.2rem;line-height:1.6rem;letter-spacing:-.012rem;font-weight:400;}
  .footer__soc .roll{--roll-h:1.6rem;}
  .footer__soc--ig{right:8.5rem;}
  .footer__soc--in{right:1.6rem;}

  .footer__meta{left:1.6rem;}
  .footer__meta--1{top:68.8rem;}
  .footer__meta--2{top:70.4rem;}
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* ============================================================
   CASE STUDY POPUP — Figma node 67:656 "Case A" (904 × 1433)
   ============================================================ */
.cm{position:fixed;inset:0;z-index:300;}
.cm[hidden]{display:none;}
.cm__backdrop{
  position:absolute;inset:0;
  background:rgba(20,19,17,.24);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s ease;
}
.cm__scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;padding:7.2rem 0;
}
.cm__sheet{
  position:relative;width:90.4rem;height:143.3rem;margin:0 auto;
  background:#F7F7F7;
  filter:drop-shadow(1px 5px 6px rgba(0,0,0,.06)) drop-shadow(2px 21px 10.5px rgba(0,0,0,.05)) drop-shadow(5px 48px 14.5px rgba(0,0,0,.03));
  opacity:0;transform:translateY(2.4rem);
  transition:opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.cm.is-open .cm__backdrop{opacity:1;}
.cm.is-open .cm__sheet{opacity:1;transform:none;}
/* content swap for "Next case" — the popup stays open */
.cm.is-open .cm__sheet.is-swapping{opacity:0;transform:translateY(1.2rem);transition-duration:.22s;}

.cm__kicker{
  position:absolute;left:2.4rem;top:2.4rem;
  font-size:1.8rem;line-height:2.4rem;font-weight:500;letter-spacing:-.018rem;color:#302F34;white-space:nowrap;
}
.cm__x{position:absolute;left:86rem;top:2.6rem;width:2rem;height:2rem;cursor:pointer;}
.cm__rule{position:absolute;left:0;top:7.2rem;width:90.4rem;height:.1rem;background:#D9D9D9;}
.cm__rule-v{position:absolute;left:83.5rem;top:0;width:.1rem;height:7.2rem;background:#D9D9D9;}

.cm__tile{position:absolute;width:41.6rem;height:38.4rem;overflow:hidden;}
.cm__tile img{width:100%;height:100%;object-fit:cover;}
.cm__tile--a{left:2.4rem;top:9.7rem;background:#D9D9D9;}
.cm__tile--b{left:46.4rem;top:9.7rem;background:var(--accent);}
/* every tile is a flat export from the frame now — the phone / window /
   card constructions the desktop used to draw are gone from the markup */
.cm__shot{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.cm__tile--c{left:2.4rem;top:50.5rem;background:none;}
.cm__tile--d{left:46.4rem;top:50.5rem;background:#D9D9D9;}
.cm__tile--e{left:2.4rem;top:91.3rem;width:85.6rem;background:var(--grey50);}

.cm__text{
  position:absolute;left:2.4rem;top:2.4rem;width:36.8rem;
  font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;color:var(--black);
}
/* the big grey word is the client's name, swapped per case */
.cm__big{
  position:absolute;left:2.4rem;top:29.6rem;
  font-size:6.4rem;line-height:6.4rem;letter-spacing:-.128rem;color:var(--grey100);white-space:nowrap;
}

/* b — two phone mockups */


/* footer bar */
.cm__foot{position:absolute;left:2.4rem;top:132.1rem;width:85.6rem;height:8.8rem;}
.cm__next{
  position:absolute;left:0;top:0;width:72.1rem;height:8.8rem;background:var(--accent);cursor:pointer;
}
.cm__next span{
  position:absolute;left:3.2rem;top:3.2rem;
  font-size:1.8rem;line-height:2.4rem;font-weight:500;letter-spacing:-.018rem;color:#F7F7F7;white-space:nowrap;
}
.cm__next .ico{position:absolute;left:66.9rem;top:3.4rem;}
.cm__close{
  position:absolute;right:0;top:0;width:11.1rem;height:8.8rem;
  border:.1rem solid var(--black);cursor:pointer;
  font-size:1.8rem;line-height:2.4rem;font-weight:500;letter-spacing:-.018rem;color:var(--black);
}

/* mobile popup — Figma 67:1346, sheet 358 x 1767 in the 390 frame.
   One column: the same five tiles, stacked with a 24 px rhythm, and the
   blue card and the browser window come in as flat exports instead of the
   CSS constructions the desktop builds them from. */
@media (max-width:1023.98px){
  .cm__scroll{padding:1.6rem 0;}
  /* padding, not a margin on the first tile — a margin would collapse
     through the sheet and pull the whole column up by 79 px */
  .cm__sheet{width:35.8rem;height:auto;padding:7.9rem 0 2.4rem;}
  .cm__kicker{left:1.6rem;top:1.6rem;font-size:1.6rem;line-height:2.4rem;}
  .cm__x{left:auto;right:1.6rem;top:2rem;width:1.6rem;height:1.6rem;}
  .cm__x .ico,.cm__x .ico img{width:1.6rem;height:1.6rem;}
  .cm__rule{width:35.8rem;top:5.4rem;}
  .cm__rule-v{left:30.9rem;height:5.4rem;}

  .cm__tile{position:relative;left:auto;top:auto;width:32.6rem;height:30rem;margin:2.4rem auto 0;}
  .cm__tile--a{margin-top:0;}
  .cm__tile--c{height:24.4rem;background:none;}
  .cm__tile--e{width:32.6rem;height:25rem;background:none;}

  .cm__text{left:0;top:0;width:32.6rem;font-size:1.4rem;line-height:2rem;letter-spacing:-.007rem;}
  .cm__big{left:0;top:17.2rem;font-size:6.4rem;line-height:7.2rem;letter-spacing:-.128rem;}

  .cm__foot{position:relative;left:auto;top:auto;width:32.6rem;height:14.2rem;margin:3.2rem auto 0;}
  .cm__next{width:32.6rem;height:6.4rem;}
  .cm__next span{left:2.4rem;top:2.2rem;font-size:1.6rem;line-height:2rem;letter-spacing:-.016rem;}
  .cm__next .ico{left:auto;right:2.4rem;top:2.2rem;}
  .cm__close{
    left:0;right:auto;top:7.6rem;width:32.6rem;height:6.6rem;
    font-size:1.6rem;line-height:2rem;letter-spacing:-.016rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .cm__backdrop,.cm__sheet{transition:none;}
}


/* ============================================================
   CASE STUDIES — scroll choreography
   ============================================================ */

/* the plate shows through while an image is still missing */
.case__shot-inner{background:#D9D9D9;}
.case__shot{cursor:pointer;}
.case__shot-inner .case__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  transform:scale(var(--case-img-s,1));
  transform-origin:center;
  will-change:transform;
}
.case__shot-inner .case__img.is-active{opacity:1;}
/* blue curtain — slides up and off, revealing the shot from the bottom */
.case__curtain{
  position:absolute;inset:0;z-index:1;
  background:var(--accent);
  transform:translateY(var(--case-curtain,100%));
  will-change:transform;
}
.case__btn{z-index:2;}

/* text: rule draws in, the rest lifts with a small stagger */
.case__rule{transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.22,1,.36,1);}
.case.is-shown .case__rule{transform:none;}
.case__kicker,.case__count,.case__brand,.case__lbl,.case__val,.case .discover{
  opacity:0;transform:translateY(1.2rem);
  transition:opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
}
.case.is-shown .case__kicker,
.case.is-shown .case__count,
.case.is-shown .case__brand,
.case.is-shown .case__lbl,
.case.is-shown .case__val,
.case.is-shown .discover{opacity:1;transform:none;}
.case__kicker{--d:60ms;} .case__count{--d:110ms;} .case__brand{--d:220ms;}
.case__lbl--role{--d:300ms;} .case__val--role{--d:340ms;}
.case__lbl--srv{--d:360ms;}  .case__val--srv{--d:400ms;}
.case__lbl--ind{--d:420ms;}  .case__val--ind{--d:460ms;}
.case .discover{--d:540ms;}

@media (prefers-reduced-motion:reduce){
  .case__curtain{transform:translateY(-100%);}
  .case__shot-inner .case__img{transform:none;}
  .case__rule{transform:none;}
  .case__kicker,.case__count,.case__brand,.case__lbl,.case__val,.case .discover{
    opacity:1;transform:none;transition:none;}
}

/* ── live projects row (Frame 136) — desktop ───────────────── */
@media (min-width:1024px){
  .logos{
    position:absolute;left:14.1rem;top:410.3rem;width:112.9rem;height:12.8rem;z-index:10;
  }
  .logos__lbl{
    position:absolute;top:5.6rem;transform:none;
    font-size:1.2rem;line-height:1.6rem;color:var(--black);white-space:nowrap;
  }
  .logos__lbl--top{left:.8rem;}
  .logos__lbl--bot{left:auto;right:0;top:5.6rem;}
  .logos__rule{position:absolute;top:1.2rem;width:.1rem;height:10.4rem;background:var(--grey100);}
  .logos__rule--h1{left:34.5rem;}
  .logos__rule--h2{left:57.9rem;}
  .logos__rule--h3{left:81.1rem;}
  .logos__rule--v{display:none;}
  .logos__cell{position:absolute;top:0;width:20.9rem;height:12.8rem;}
  .logos__cell--a{left:12.4rem;}
  .logos__cell--b{left:35.8rem;}
  .logos__cell--c{left:59.1rem;}
  .logos__cell--d{left:82.4rem;}
}


/* ── sticky case stack ─────────────────────────────────────── */
.cases__media .case__shot{cursor:pointer;}
/* mobile keeps a shot per row (that is how the mobile frame is drawn);
   there the curtain is a one-shot reveal tied to is-shown */
@media (max-width:1023.98px){
  .cases{height:163rem;}
  .cases__media{display:none;}
  .case__shot--m{left:0;top:4.1rem;width:17.1rem;height:23.5rem;}
  .case__shot--m .case__curtain{
    transform:translateY(0);
    transition:transform .9s cubic-bezier(.22,1,.36,1) .12s;
  }
  .case.is-shown .case__shot--m .case__curtain{transform:translateY(-100%);}
}


/* ── live project cells — Figma 42:889 Frame 141 ────────────
   The row carries client names as type now, not logo artwork: the name sits
   on the cell's optical centre and the arrow keeps the design's 181/28.
   Hover is unchanged — the plate lights up and the shadow follows. */
.logos__cell{
  display:block;overflow:visible;
  transition:background-color .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .6s cubic-bezier(.22,.61,.36,1);
}
.logos__name{
  position:absolute;left:0;right:0;
  font-weight:500;color:var(--black);white-space:nowrap;text-align:center;
}
.logos__ico{position:absolute;}
/* this block is declared after the mobile query, so its own geometry has to
   be scoped or it would win on source order and undo the mobile values */
@media (min-width:1024px){
  .logos__name{top:4.8rem;font-size:2rem;line-height:3.2rem;letter-spacing:-.02rem;}
  .logos__name .roll{--roll-h:3.2rem;}
  .logos__ico{left:18.1rem;top:2.8rem;}
}
.logos__cell:hover,.logos__cell:focus-visible{
  background:var(--white);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 4px rgba(0,0,0,.03),
             0 10px 6px rgba(0,0,0,.02), 0 18px 7px rgba(0,0,0,.01);
}
@media (prefers-reduced-motion:reduce){
  .logos__cell{transition:none;}
}

/* ============================================================
   404 — Figma 34:1310 (desktop) · 67:227 (mobile)
   ============================================================ */
/* The page sits on the grey plate, not the paper, and carries no wordmark:
   there is no hero here for it to scale out of. */
body.is-404{background:var(--grey50);}
body.is-404 .topbar{position:absolute;}

/* the headline runs off both edges by design, so the page clips it */
.e404{position:relative;width:144rem;min-height:100svh;margin:0 auto;overflow:hidden;}
.e404__big{
  position:absolute;left:-9.7rem;top:5.6rem;
  font-size:27.1rem;line-height:21.2rem;
  /* looser than the homepage's background words: solved against the frame's
     own 1634 px text box, which -.06em would undershoot by 162 px */
  letter-spacing:-.612rem;
  color:var(--grey100);white-space:nowrap;
}
/* figure and copy hang off the bottom edge so a taller screen opens up the
   gap under the headline instead of pushing the button off-screen */
.e404__fig{position:absolute;left:47.5rem;bottom:8.8rem;width:49rem;height:36.9rem;}
.e404__note{position:absolute;left:3.2rem;bottom:3.4rem;width:44.3rem;}
.e404__t{
  margin:0;font-size:2.4rem;line-height:2.6rem;font-weight:400;
  letter-spacing:-.024rem;color:var(--black);
}
.e404__d{
  margin:0;padding-top:1.2rem;
  font-size:1.8rem;line-height:2.6rem;letter-spacing:-.018rem;color:var(--grey600);
}
.e404__home{
  position:absolute;right:0;bottom:0;width:47.5rem;height:8.8rem;
  background:var(--accent);
}
.e404__home .ico{position:absolute;left:3.2rem;top:3.2rem;}
.e404__home .roll{
  position:absolute;right:3.2rem;top:3.2rem;--roll-h:2.4rem;
  font-size:1.8rem;line-height:2.4rem;font-weight:500;letter-spacing:-.018rem;
  color:#F7F7F7;white-space:nowrap;text-align:right;
}

@media (max-width:1023.98px){
  .e404{width:39rem;min-height:0;height:81rem;}
  .e404__big{left:-1.7rem;top:12.4rem;width:45.6rem;white-space:normal;
    font-size:13.6rem;line-height:11.2rem;letter-spacing:-.816rem;}
  .e404__fig{left:2.4rem;top:25.8rem;bottom:auto;width:34.2rem;height:25.7rem;}
  .e404__note{left:1.6rem;top:51.5rem;bottom:auto;width:35.8rem;}
  .e404__t{font-size:2.4rem;line-height:2.8rem;}
  .e404__d{padding-top:1.2rem;font-size:1.6rem;line-height:2.4rem;letter-spacing:-.008rem;}
  .e404__home{left:1.6rem;right:auto;top:65.1rem;bottom:auto;width:35.8rem;height:6.4rem;}
  .e404__home .ico{left:2.4rem;top:2.2rem;}
  .e404__home .roll{right:2.4rem;top:2.2rem;--roll-h:2rem;font-size:1.6rem;line-height:2rem;}
  /* the footer block follows the 404 content in the mobile frame */
  .e404__foot{position:relative;width:39rem;height:73.6rem;margin:0 auto;}
  .e404__foot .footer{top:0;}
}