/* =========================================================================
   FRANCO STAPASOLLA — Portfolio
   Editorial / experimental.
   Type system:  Helvetica  = structure, system, clarity
                 Trovical   = personality, expression, interruption
   ========================================================================= */

/* ---------- Fonts (local) ---------- */
@font-face {
  font-family: "Trovical";
  src: url("../assets/fonts/trovical-regular.otf") format("opentype"),
       url("../assets/fonts/trovical-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Trovical";
  src: url("../assets/fonts/trovical-italic.otf") format("opentype"),
       url("../assets/fonts/trovical-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Palette */
  --paper: #EBF1F5;
  --paper-2: #DDE5EA;
  --ink: #010B13;
  --ink-soft: rgba(1, 11, 19, .62);
  --ink-faint: rgba(1, 11, 19, .34);
  --line: rgba(1, 11, 19, .13);
  --night: #010B13;
  --mist: #EBF1F5;

  /* Type */
  --f-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-expr: "Trovical", "Bodoni 72", Didot, Georgia, serif;
  --track-tight: -.045em;     /* large Helvetica */

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* expo-out */
  --ease-io: cubic-bezier(.77, 0, .18, 1);      /* strong in-out */
  --ease-soft: cubic-bezier(.33, 1, .68, 1);

  /* Layout */
  --pad: clamp(16px, 3.2vw, 56px);
  --nav-h: 76px;
  --stroke: clamp(1px, .08vw, 1.4px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px dashed var(--ink); outline-offset: 4px; }

/* Helvetica = structure */
.label {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.display { font-family: var(--f-sans); font-weight: 500; letter-spacing: var(--track-tight); }

/* Trovical = expression. Use <em> inside headlines for the italic moments */
em, .tv {
  font-family: var(--f-expr); font-style: italic; font-weight: 400;
  letter-spacing: -.005em; text-transform: none;
}
.tv--roman { font-style: normal; }

/* text for screen readers only */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mask reveal system ---------- */
.mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mask > span { display: block; }
.js [data-reveal] .mask > span,
.js .project .mask > span,
.js .menu .mask > span {
  transform: translate3d(0, 115%, 0);
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms + var(--d, 0ms));
}
.js [data-reveal].is-in .mask > span,
.js .project.is-content .mask > span,
.js .menu.is-open .mask > span { transform: none; }

.js [data-reveal].sec-head { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-io); }
.js [data-reveal].sec-head.is-in { clip-path: inset(0 0 0 0); }

/* ---------- Typeface swap (Helvetica → Trovical italic, letter by letter) ----------
   Built by JS from any [data-swap] element. Triggered by the parent states below. */
.sw { position: relative; display: inline-block; vertical-align: top; padding: .14em 0 .2em; margin: -.14em 0 -.2em; clip-path: inset(0 -40vw 0 -40vw); }
.sw__a, .sw__b { display: block; white-space: pre; }
.sw__b {
  position: absolute; left: 0; top: .14em;
  font-family: var(--f-expr); font-style: italic; font-weight: 400; letter-spacing: -.005em;
  font-size: 1.02em;
}
.sw .c { display: inline-block; white-space: pre; transition: transform .75s var(--ease-out); transition-delay: calc(var(--i) * 14ms); }
.sw__b .c { transform: translate3d(0, 135%, 0); }
:is(.work.is-active, .skill:hover, .skill.is-swap, .menu__links a:hover, a:hover > .sw, .is-swap > .sw) .sw__a .c { transform: translate3d(0, -135%, 0); }
:is(.work.is-active, .skill:hover, .skill.is-swap, .menu__links a:hover, a:hover > .sw, .is-swap > .sw) .sw__b .c { transform: none; }

/* ---------- Global layers ---------- */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-1%, 3%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); }
}
.gridlines {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  display: flex; justify-content: space-between; padding: 0 var(--pad);
}
.gridlines i { width: 1px; height: 100%; background: var(--line); opacity: .5; }
.dusk { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: var(--night); opacity: calc(var(--dusk, 0) * .55); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 95; background: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; padding: var(--pad);
  clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-io);
}
.loader.is-out { clip-path: inset(0 0 100% 0); }
.loader__top { display: flex; justify-content: space-between; }
.loader__count { font-family: var(--f-expr); font-style: italic; font-size: clamp(110px, 20vw, 340px); line-height: .82; color: var(--ink); font-variant-numeric: tabular-nums; }
.loader__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) * .6); height: 1px; background: var(--line); }
.loader__bar span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
html:not(.js) .loader { display: none; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: none; }
.fine .cursor { display: block; }
.fine body, .fine a, .fine button { cursor: none; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ink); transition: opacity .3s, background .4s; }
.cursor__ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1px solid var(--ink-faint);
  display: grid; place-items: center;
  transition: width .6s var(--ease-out), height .6s var(--ease-out), margin .6s var(--ease-out), background .5s, border-color .5s;
}
.cursor__label { font-family: var(--f-expr); font-style: italic; font-size: 17px; color: var(--paper); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s var(--ease-out); }
.cursor.is-link .cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--ink); }
.cursor.is-view .cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--ink); border-color: transparent; }
.cursor.is-view .cursor__label { opacity: 1; transform: none; }
.cursor.is-view .cursor__dot { opacity: 0; }
.cursor.is-hidden { opacity: 0; }
.theme-dark .cursor__dot { background: var(--mist); }
.theme-dark .cursor__ring { border-color: rgba(235, 241, 245, .4); }
.theme-dark .cursor.is-view .cursor__ring { background: var(--mist); }
.theme-dark .cursor.is-view .cursor__label { color: var(--night); }

/* ---------- Microinteractions ---------- */
/* roll text (nav links, small buttons) */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll__a, .roll__b { display: block; white-space: pre; }
.roll__b { position: absolute; left: 0; top: 100%; }
.rc { display: inline-block; transition: transform .6s var(--ease-out); transition-delay: calc(var(--i) * 16ms); }
:is(a, button):hover .roll .rc { transform: translate3d(0, -100%, 0); }

/* underline that draws in from the left and leaves to the right */
.uline { position: relative; width: max-content; }
.uline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease-out);
}
.uline:hover::after { transform: scaleX(1); transform-origin: left; }

/* circular arrow: the arrow exits right while its twin enters from the left */
.arrow-c {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); overflow: hidden;
  color: var(--ink); font-size: 14px;
  transition: background .5s var(--ease-out), border-color .5s, color .5s;
}
.arrow-c > span { display: block; text-shadow: -38px 0 currentColor; transition: transform .7s var(--ease-out); }
:is(a, button, .work.is-active):hover .arrow-c > span, .work.is-active .arrow-c > span { transform: translateX(38px); }
:is(a, button):hover .arrow-c, .work.is-active .arrow-c { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.theme-dark .arrow-c { border-color: rgba(235, 241, 245, .25); color: var(--mist); }
.theme-dark :is(a, button):hover .arrow-c { background: var(--mist); color: var(--night); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pad);
  color: var(--ink);
}
.nav.is-hidden { transform: translate3d(0, -110%, 0); }
.theme-dark .nav { color: var(--mist); }
.nav__logo { justify-self: start; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.nav__icon { width: 15px; height: 18px; fill: currentColor; transition: transform .9s var(--ease-out); }
.nav__logo:hover .nav__icon { transform: rotate(-180deg); }
.nav__name { overflow: hidden; }
.nav__links { position: relative; display: flex; gap: clamp(18px, 2.6vw, 44px); }
.nav__links a, .nav__meta { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.nav__links a { position: relative; display: inline-flex; align-items: flex-start; gap: 5px; }
.nav__links sup { font-size: 8px; opacity: .5; margin-top: -2px; }
.nav__dot {
  position: absolute; left: 0; top: calc(100% + 8px); width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  transform: translateX(var(--x, 0)) scale(var(--s, 0)); transition: transform .8s var(--ease-out);
}
.nav__meta { justify-self: end; display: flex; gap: 26px; align-items: center; }
.nav__status { display: inline-flex; align-items: center; gap: 8px; opacity: .8; }
.nav__status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2.4s var(--ease-soft) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.7); } }
.nav__clock b { font-weight: 500; font-variant-numeric: tabular-nums; }
.nav__burger { display: none; justify-self: end; width: 40px; height: 40px; position: relative; }
.nav__burger span { position: absolute; left: 8px; right: 8px; height: 1.5px; background: currentColor; transition: transform .6s var(--ease-out); }
.nav__burger span:first-child { top: 16px; }
.nav__burger span:last-child { top: 23px; }
.menu-open .nav__burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .nav__burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 6vh) var(--pad) var(--pad);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .9s var(--ease-io), visibility 0s .9s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease-io), visibility 0s; }
.menu__links a { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: 15vw; line-height: 1; letter-spacing: var(--track-tight); color: var(--ink); }
.menu__links sup { font-size: 11px; letter-spacing: 0; color: var(--ink-soft); margin-top: 1.2em; }
.menu .mask > span { --d: 250ms; }

/* ---------- Fixed indicators ---------- */
.indicator {
  position: fixed; left: var(--pad); bottom: 22px; z-index: 50;
  display: flex; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.indicator__name { overflow: hidden; display: inline-block; height: 1.5em; }
.indicator__name span { display: block; transition: transform .6s var(--ease-out), opacity .4s; }
.indicator__name.is-swap span { transform: translateY(-110%); opacity: 0; transition-duration: .3s; }
.theme-dark .indicator { color: rgba(235, 241, 245, .6); }
.pill {
  position: fixed; left: 50%; bottom: 18px; z-index: 50;
  width: 68px; height: 22px; margin-left: -34px; border-radius: 20px;
  background: var(--ink);
}
.pill__fill { position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px; background: rgba(235, 241, 245, .25); border-radius: 2px; overflow: hidden; }
.pill__fill::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform-origin: left; transform: scaleX(var(--progress, 0)); }
.theme-dark .pill { background: rgba(235, 241, 245, .18); }
.nav, .indicator, .pill { transition: opacity 1s .4s, transform .8s var(--ease-out), color .5s, background .5s; }
.is-loading .nav, .is-loading .indicator, .is-loading .pill { opacity: 0; }

/* =========================================================================
   01 · HERO — the portrait as an editorial object
   ========================================================================= */
.hero {
  --pw: min(60vh, 74vw);
  position: relative; height: 100vh; height: 100svh; min-height: 620px;
  overflow: clip;
}
.hero__stage-wrap {
  position: absolute; left: 50%; top: 47%;
  width: var(--pw); height: var(--pw);
  margin: calc(var(--pw) / -2) 0 0 calc(var(--pw) / -2);
  will-change: transform;
}
.hero__stage { width: 100%; height: 100%; perspective: 1100px; }
.hero__3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.hero__portrait { position: absolute; inset: 0; transform: translateZ(0); }
.hero__reveal {
  /* portrait PNG is already cut out with its own soft fade, so no mask is needed */
  position: absolute; inset: 0;
  clip-path: inset(0 50% 100% 50%);
  transition: clip-path 1.7s var(--ease-io) .7s;
}
.hero__reveal img {
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) contrast(1.06) brightness(1.05) blur(14px);
  transform: scale(1.18);
  transition: filter 1.8s var(--ease-out) 1s, transform 2.6s var(--ease-out) .7s;
}
.is-ready .hero__reveal { clip-path: inset(0 0 0 0); }
.is-ready .hero__reveal img { filter: grayscale(1) contrast(1.06) brightness(1.05) blur(0); transform: scale(1); }

/* text ring orbiting at eye level; *words* in the data-text become Trovical italic */
.ring { position: absolute; left: 50%; top: 30.5%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-10deg) rotateZ(-6deg); }
.ring__ch {
  position: absolute; left: 0; top: 0;
  height: calc(var(--pw) * .058);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--pw) * .028); font-weight: 500; line-height: 1; letter-spacing: .02em;
  color: var(--paper); background: var(--ink);
  backface-visibility: visible; will-change: transform, opacity;
  opacity: 0;
}
.ring__ch.is-tv { font-family: var(--f-expr); font-style: italic; font-weight: 400; font-size: calc(var(--pw) * .04); }

.hl {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  opacity: 0; transform: translateY(10px);
  will-change: transform;
}
.hl > span { transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); }
.is-ready .hl { opacity: 1; transition: opacity 1.2s var(--ease-out) 1.6s; }
.hl--tl { top: calc(var(--nav-h) + 9vh); left: var(--pad); }
.hl--ml { top: 58%; left: calc(var(--pad) + 9vw); }
.hl--mr { top: 30%; right: var(--pad); text-align: right; align-items: flex-end; max-width: 18ch; }
.hl--bl { bottom: 64px; left: var(--pad); flex-direction: row; gap: 10px; }
.hl__arrow { animation: nudge 2.2s var(--ease-soft) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.hl__coord { font-variant-numeric: tabular-nums; }

.hero__name { position: absolute; right: var(--pad); bottom: 54px; text-align: right; z-index: 2; }
.hero__title { font-weight: 500; font-size: clamp(52px, 7.4vw, 156px); line-height: .92; letter-spacing: var(--track-tight); color: var(--ink); }
.hero__line { display: block; white-space: nowrap; }
.hero__line.is-masked { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hc { display: inline-block; white-space: pre; will-change: transform; }
.hc__in { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i) * 32ms + 250ms); }
.is-ready .hc__in { transform: none; }
.hero__sub {
  margin-top: 18px; display: flex; justify-content: flex-end; align-items: baseline; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.hero__sub em { font-size: 30px; line-height: 1; color: var(--ink); letter-spacing: 0; }
.hero__sub > span { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 1.5s); }
.is-ready .hero__sub > span { opacity: 1; transform: none; }

/* =========================================================================
   02 · STATEMENT — outline fills while pinned
   ========================================================================= */
.powered { position: relative; height: 260vh; }
.powered__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
}
.powered__label { position: absolute; top: calc(var(--nav-h) + 4vh); left: var(--pad); }
.powered__label--r { left: auto; right: var(--pad); }
.powered__title {
  position: relative; text-align: center;
  font-weight: 500; letter-spacing: var(--track-tight);
  font-size: clamp(54px, 9.6vw, 210px); line-height: .95; color: var(--ink);
  transform: scale(var(--s, .9)); will-change: transform;
}
.powered__title em { font-size: 1.32em; line-height: .9; letter-spacing: -.01em; }
.powered__layer { display: block; }
.powered__fill { clip-path: inset(0 calc(var(--clip, 1) * 100%) 0 0); }
.powered__outline { position: absolute; inset: 0; color: transparent; -webkit-text-stroke: var(--stroke) var(--ink); }
.powered__title .mask:nth-child(2) > span { --i: 1; }
.powered__sub { position: absolute; bottom: 12vh; left: 50%; transform: translate(-50%, calc((1 - var(--sub, 0)) * 20px)); text-align: center; opacity: var(--sub, 0); }

/* =========================================================================
   03 · SELECTED WORKS — Helvetica list that turns into Trovical on focus
   ========================================================================= */
.works { position: relative; padding: 20vh var(--pad) 26vh; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.works__list li { position: relative; border-bottom: 1px solid var(--line); }
.works__list li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right; transition: transform .9s var(--ease-out);
}
.works__list li:hover::after { transform: scaleX(1); transform-origin: left; }

.work {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 5.2vw 1fr auto 56px; align-items: center; column-gap: 1vw;
  padding: clamp(18px, 2.4vw, 40px) 0 clamp(16px, 2vw, 34px);
  color: var(--ink);
}
.work__idx { font-size: 11px; font-weight: 500; color: var(--ink-faint); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.work__title {
  display: block; font-weight: 500;
  font-size: clamp(40px, 5.6vw, 118px); line-height: 1; letter-spacing: var(--track-tight); white-space: nowrap;
  clip-path: inset(-.2em -40vw -.25em -40vw);
}
.work__rv { display: block; transition: transform 1.2s var(--ease-out); }
.js .works__list li:not(.is-in) .work__rv { transform: translate3d(0, 120%, 0); }
.work__mv { position: relative; display: inline-block; will-change: transform; transition: letter-spacing .9s var(--ease-out); }
.work .sw__b { font-size: 1.04em; }
.works__list.is-hovering .work:not(.is-active) .work__mv { opacity: .3; }
.work__mv { transition: opacity .6s var(--ease-out); }

.work__meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  transition: transform .8s var(--ease-out), color .4s;
}
.work__meta span:last-child { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.work__arrow { justify-self: end; }
.work.is-active .work__meta { transform: translateX(-12px); color: var(--ink); }

/* ---------- Behance archive: minimal 3-column grid, B&W → colour on hover ---------- */
.archive { margin-top: 24vh; }
.archive__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5vh clamp(10px, 1.2vw, 20px);
  margin-top: 4vh;
}
.arc__link { display: block; }
.arc__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-io); transition-delay: calc(var(--i, 0) * 90ms); }
.arc__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04); transform: scale(1.02);
  transition: filter .8s var(--ease-out), transform 1.2s var(--ease-out);
}
.js .arc:not(.is-in) .arc__img { clip-path: inset(100% 0 0 0); }
.js .arc:not(.is-in) .arc__img img { transform: scale(1.2); }
.arc__link:hover .arc__img img, .arc.is-active .arc__img img { filter: grayscale(0) contrast(1); transform: scale(1.05); }
.arc__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px;
  font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.arc__title::before { content: "[ "; }
.arc__title::after { content: " ]"; }
.arc__title { transition: color .5s; }
.arc__link:hover .arc__title { color: var(--ink); }
.arc__go { opacity: 0; transform: translate(-4px, 4px); transition: opacity .5s, transform .7s var(--ease-out); }
.arc__link:hover .arc__go { opacity: 1; transform: none; }
.works__more {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding: clamp(36px, 4vw, 64px) 0 0; color: var(--ink);
}
.works__more-title { display: inline-flex; align-items: center; gap: 18px; font-weight: 500; font-size: clamp(28px, 3.2vw, 60px); line-height: 1; letter-spacing: var(--track-tight); }
.works__more-title em { font-size: 1.15em; }

/* touch devices: inline thumbnail revealed for the row crossing the screen centre */
.work__thumb { display: none; }
.touch .work__thumb {
  display: block; position: absolute; right: 12vw; top: 50%; z-index: -1;
  width: clamp(100px, 13vw, 180px); aspect-ratio: 1 / 1.414; transform: translateY(-50%);
  overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease-io);
}
.touch .work__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform 1.2s var(--ease-out); }
.touch .work.is-active .work__thumb { clip-path: inset(0 0 0 0); }
.touch .work.is-active .work__thumb img { transform: scale(1); }

.preview { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; width: clamp(210px, 17vw, 300px); aspect-ratio: 1 / 1.414; will-change: transform; }
.preview__inner {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  transform: scale(.55); opacity: 0;
  transition: transform .8s var(--ease-out), opacity .45s var(--ease-out);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}
.preview.is-visible .preview__inner { transform: scale(1); opacity: 1; }
.preview__img { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .8s var(--ease-io); background: var(--night); }
.preview__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transition: transform 1.2s var(--ease-out); }
.preview__img.is-active { clip-path: inset(0 0 0 0); z-index: 2; }
.preview__img.is-active img { transform: scale(1); }
.preview__img.is-prev { clip-path: inset(0 0 0 0); z-index: 1; transition: none; }

/* =========================================================================
   04 · MARQUEE
   ========================================================================= */
.marquees { position: relative; height: clamp(300px, 40vw, 600px); overflow: clip; }
.marquee { position: absolute; left: -10vw; width: 120vw; top: 50%; overflow: hidden; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group {
  display: flex; align-items: center; flex-shrink: 0;
  font-weight: 500; font-size: clamp(44px, 5.8vw, 124px); line-height: 1.1; letter-spacing: var(--track-tight); white-space: nowrap;
}
.marquee__group em { font-size: 1.2em; margin-left: .22em; }
.marquee__group i { font-style: normal; font-size: .5em; margin: 0 .7em; }
.marquee--band {
  z-index: 2; background: var(--ink); color: var(--paper);
  transform: translateY(-50%) rotate(-3.2deg);
  padding: clamp(8px, .8vw, 16px) 0;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6);
}
.marquee--ghost {
  z-index: 1; color: transparent; -webkit-text-stroke: var(--stroke) var(--ink-faint);
  transform: translateY(-50%) rotate(4.5deg);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(6px, .6vw, 12px) 0;
}

/* =========================================================================
   05 · EXPERTISE — Franco's creative universe (scroll-driven camera)
   ========================================================================= */
.expertise { position: relative; height: 440vh; }
.expertise__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.expertise__head { position: absolute; z-index: 3; top: calc(var(--nav-h) + 8px); left: var(--pad); right: var(--pad); border-bottom: 0; }
.expertise__count b { font-weight: 500; color: var(--ink); }
.expertise__coords { font-variant-numeric: tabular-nums; }
.board {
  position: absolute; left: 0; top: 0; width: 260vw; height: 200vh;
  will-change: transform;
  background-image: radial-gradient(circle, rgba(1, 11, 19, .18) 1px, transparent 1.4px);
  background-size: 6.5vw 6.5vw; background-position: 3.25vw 3.25vw;
}
.board__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.board__lines path { fill: none; stroke: var(--ink-faint); stroke-width: 1; }
.board__mark { position: absolute; left: var(--x); top: var(--y); font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.board__big { position: absolute; left: var(--x); top: var(--y); font-family: var(--f-expr); font-style: italic; font-size: 26vw; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; }
.board__word { position: absolute; left: var(--x); top: var(--y); font-family: var(--f-expr); font-style: italic; font-size: clamp(28px, 2.6vw, 54px); color: var(--ink-faint); pointer-events: none; }

.skill { position: absolute; left: var(--x); top: var(--y); width: max-content; max-width: 34vw; will-change: transform; }
.skill__dot { position: relative; display: block; width: 9px; height: 9px; margin: 0 0 3.2vh 6vw; border-radius: 50%; background: var(--ink); transform: scale(.55); transition: transform .8s var(--ease-out); }
.skill__dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--ink-faint); opacity: 0; transform: scale(.4); transition: opacity .6s, transform .9s var(--ease-out); }
.skill__num { display: block; font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 6px; }
.skill__title {
  font-weight: 500; font-size: clamp(36px, 3.9vw, 82px); line-height: 1; letter-spacing: var(--track-tight); color: var(--ink);
  opacity: .42; transition: opacity .8s var(--ease-out);
}
.skill__desc { margin-top: 12px; max-width: 26ch; font-size: 13px; line-height: 1.5; color: var(--ink-soft); opacity: .4; transform: translateY(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.skill.is-active .skill__title { opacity: 1; }
.skill.is-active .skill__desc { opacity: 1; transform: none; }
.skill.is-active .skill__dot { transform: scale(1); }
.skill.is-active .skill__dot::after { opacity: 1; transform: scale(1); }
.skill__img { position: absolute; left: calc(100% + 2.4vw); top: 22%; width: clamp(120px, 10vw, 190px); aspect-ratio: 1 / 1.414; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-io); }
.skill__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transition: transform 1.6s var(--ease-out); }
.skill.is-active .skill__img { clip-path: inset(0 0 0 0); }
.skill.is-active .skill__img img { transform: scale(1); }

.minimap { position: absolute; z-index: 3; right: var(--pad); bottom: 60px; width: 150px; }
.minimap__board { position: relative; width: 100%; aspect-ratio: var(--ratio, 1.6); border: 1px solid var(--line); background: rgba(235, 241, 245, .6); backdrop-filter: blur(6px); }
.minimap__dot { position: absolute; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--ink-faint); transition: background .4s, transform .4s; }
.minimap__dot.is-active { background: var(--ink); transform: scale(1.8); }
.minimap__view { position: absolute; left: 0; top: 0; border: 1px solid var(--ink); background: rgba(1, 11, 19, .06); will-change: transform; }

/* =========================================================================
   06 · "I WAS CREATED TO CREATE" — handwritten (Permanent Marker), written on scroll
   ========================================================================= */
.hand { position: relative; padding: 18vh var(--pad) 24vh; text-align: center; overflow: clip; }
.hand__type { display: inline-block; font-family: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive; font-size: clamp(62px, 9.6vw, 200px); line-height: .98; color: var(--ink); transform: rotate(-4deg); }
.hand__line { display: block; will-change: clip-path; }
.hand__line:nth-child(1) { transform: translateX(-6%); }
.hand__line:nth-child(2) { transform: translateX(10%) rotate(1deg); }
.hand__line:nth-child(3) { transform: translateX(-3%); }
.js .hand__line { clip-path: inset(-25% 100% -25% -8%); }
.hand__stroke { display: block; width: min(560px, 62vw); height: 34px; margin: 2vh auto 0; overflow: visible; }
.hand__stroke path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--draw, 1); }
.hand__sign { margin-top: 12vh; letter-spacing: .2em; }
.hand__sign .mask:nth-child(2) > span { --i: 1; }

/* =========================================================================
   07 · CLIENTS
   ========================================================================= */
.clients { position: relative; padding: 12vh var(--pad) 30vh; }
.clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 24px); margin-top: 5vh; perspective: 1200px; }
.logo-card {
  position: relative; aspect-ratio: 16 / 8.4;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .32); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 40px -30px rgba(0, 0, 0, .35);
  transition: transform .9s var(--ease-out), background .5s, box-shadow .6s, opacity .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
  transform-style: preserve-3d;
}
.js .clients__grid:not(.is-in) .logo-card { opacity: 0; transform: translate3d(0, 50px, 0) rotate(var(--r, 0deg)); }
.logo-card.is-tilting { transition: transform .25s linear, background .5s, box-shadow .6s; transition-delay: 0s; }
.logo-card:hover { background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 50px -30px rgba(0, 0, 0, .45); }
/* logos are rendered as flat monochrome marks (brightness(0) = brand black) */
.logo-card__img {
  max-width: 56%; max-height: 42%; width: auto; height: auto; object-fit: contain;
  filter: brightness(0); opacity: .55; transform: translateZ(24px);
  transition: opacity .5s var(--ease-out), transform .8s var(--ease-out);
}
.logo-card__img--tall { max-height: 58%; }
.logo-card__img--xl { max-height: 92%; max-width: 70%; } /* marks with lots of built-in padding */
.logo-card:hover .logo-card__img { opacity: 1; }
.logo-card--partner { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 16px 18px; background: transparent; }
.logo-card--partner:hover { background: rgba(255, 255, 255, .5); }
.logo-card__name { font-weight: 500; font-size: clamp(20px, 1.9vw, 34px); line-height: 1; letter-spacing: -.03em; color: var(--ink); transform: translateZ(24px); }
.logo-card__name em { font-size: 1.15em; }

/* =========================================================================
   08 · CTA / FOOTER
   ========================================================================= */
.cta {
  position: relative; z-index: 6; overflow: hidden;
  background: var(--night); color: var(--mist);
  clip-path: inset(var(--ci-y, 0px) var(--ci-x, 0px) 0px var(--ci-x, 0px) round var(--ci-r, 0px) var(--ci-r, 0px) 0 0);
}
.cta__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55vw 45vw at var(--gx, 35%) var(--gy, 40%), rgba(255, 255, 255, .09), transparent 62%),
    linear-gradient(180deg, #010B13 0%, #05121C 45%, #0A1824 70%, #010B13 100%);
}
.cta__inner { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 8vh) var(--pad) 5vh; }
.cta .label { color: rgba(235, 241, 245, .55); }
.cta__top { display: flex; justify-content: space-between; margin-bottom: 9vh; }
.cta__title { font-weight: 500; font-size: clamp(52px, 8.6vw, 184px); line-height: .98; letter-spacing: var(--track-tight); color: var(--mist); }
.cta__line { display: block; white-space: nowrap; }
.cta__line--tv { font-family: var(--f-expr); font-style: italic; font-weight: 400; font-size: 1.32em; line-height: .92; letter-spacing: -.01em; padding-left: 6vw; }
.ch { display: inline-block; opacity: var(--o, .14); transform: translate3d(0, calc((1 - var(--o, .14)) * .12em), 0); transition: opacity .25s linear; white-space: pre; }
.btn-cta {
  position: relative; display: inline-flex; align-items: center; gap: 18px; width: max-content;
  margin-top: 6vh; margin-bottom: 14vh; padding: 0;
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mist);
}
.btn-cta .arrow-c { width: 54px; height: 54px; }
.cta__info {
  margin-top: auto; padding-top: 3vh;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw;
  border-top: 1px solid rgba(235, 241, 245, .16);
  font-size: 14px;
}
.cta__col { display: flex; flex-direction: column; gap: 6px; }
.cta__col .label { margin-bottom: 8px; }
.cta__col--end { align-items: flex-end; justify-content: flex-end; }
.cta__time, .cta__copy { color: rgba(235, 241, 245, .55); font-size: 12px; }
.cta__giant {
  position: relative; display: block; text-align: center; white-space: nowrap;
  font-family: var(--f-expr); font-style: italic; font-size: 24vw; line-height: .8; margin-bottom: -.12em;
  color: transparent; -webkit-text-stroke: 1px rgba(235, 241, 245, .16);
  will-change: transform;
}

/* =========================================================================
   PROJECT PREVIEW (overlay)
   ========================================================================= */
.project {
  position: fixed; inset: 0; z-index: 80; background: var(--paper);
  visibility: hidden; overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(100% 0 0 0);
}
.project.is-open { visibility: visible; }
.project.is-anim { transition: clip-path 1.05s var(--ease-io); }
.project__grid {
  min-height: 100%;
  display: grid; grid-template-columns: auto 1fr; gap: 0 5vw; align-items: center;
  padding: 7vh var(--pad) 7vh 15vw;
}
.project__media { position: relative; height: 84vh; width: min(59.4vh, 40vw); } /* KVs are A-format (1 : 1.414) */
.project__imgs { position: absolute; inset: 0; overflow: hidden; background: var(--night); }
.p-img { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 0); }
.p-img__in { position: absolute; inset: 0; animation: drift 16s ease-in-out infinite alternate; }
.p-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.5s var(--ease-out), filter 1.1s var(--ease-io); will-change: transform; }
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -1.5%); } }
.p-img.from-bottom { clip-path: inset(100% 0 0 0); }
.p-img.from-right { clip-path: inset(0 0 0 100%); }
.p-img.from-left { clip-path: inset(0 100% 0 0); }
.p-img.from-bottom img, .p-img.from-right img, .p-img.from-left img { transform: scale(1.3); }
.p-img.is-on { clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--ease-io); }
.p-img.is-on img { transform: scale(1.06); }
.p-img.is-leaving img { transform: scale(.94); filter: brightness(.45); }
.project__counter { position: absolute; left: 0; bottom: -30px; }
.project__counter b { color: var(--ink); font-weight: 500; }

.project__info { position: relative; height: 84vh; display: flex; flex-direction: column; justify-content: center; }
.project__close { position: absolute; top: 0; right: 0; color: var(--ink); padding: 6px 0; }
.project__cat { color: var(--ink); }
.project__sel { margin-top: 10px; color: var(--ink-faint); }
.project__years { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 5vh; width: max-content; }
.yr {
  position: relative; z-index: 1; padding: 8px 16px; border-radius: 30px;
  font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--ink-soft);
  transition: color .5s var(--ease-out), opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms + 250ms);
}
.yr:hover { color: var(--ink); }
.yr.is-active { color: var(--paper); }
.js .project:not(.is-content) .yr { opacity: 0; transform: translateY(10px); }
.project__years-ind {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--w, 0); border-radius: 30px; background: var(--ink);
  transform: translateX(var(--x, 0)); transition: transform .7s var(--ease-out), width .7s var(--ease-out), opacity .6s;
}
.js .project:not(.is-content) .project__years-ind { opacity: 0; }
.project__title {
  position: relative; z-index: 2;
  margin-left: -9vw;
  font-weight: 500; font-size: clamp(52px, 6.6vw, 140px); line-height: 1; letter-spacing: var(--track-tight);
  color: var(--ink);
  --ov: 4vw;  /* = grid gap − negative margin: the part of the title lying over the image */
}
.project__title em { font-size: 1.28em; line-height: .9; }
/* title turns paper-coloured exactly where it crosses the image */
.project__title .mask > span {
  background: linear-gradient(90deg, var(--paper) var(--ov), var(--ink) var(--ov));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.project__title .mask > span { --d: 120ms; }
.project__swap { margin-top: 4vh; max-width: 54ch; }
.project__logo { height: 44px; margin-bottom: 4vh; }
.project__logo img { height: 100%; width: auto; max-width: 220px; object-fit: contain; object-position: left center; filter: brightness(0); opacity: .85; }
.project.is-single .project__sel, .project.is-single .project__years, .project.is-single .project__counter { display: none; }
.project.is-single .project__title { margin-top: 3vh; }
.project__hl { font-size: 15px; font-weight: 500; color: var(--ink); }
.project__desc, .project__role { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.project__role { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.project__swap .mask > span { --d: 350ms; transition-duration: .9s; }
.project__swap.is-out .mask > span,
.project__title.is-out .mask > span { transform: translate3d(0, -115%, 0) !important; transition: transform .45s var(--ease-io); transition-delay: calc(var(--i, 0) * 40ms); }
.project__swap.is-pre .mask > span,
.project__title.is-pre .mask > span { transform: translate3d(0, 115%, 0) !important; transition: none !important; }
.project__nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; }
.project__nav button { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); padding: 6px 0; }
.project__prev .arrow-c > span { transform: scaleX(-1); text-shadow: 38px 0 currentColor; }
.project__prev:hover .arrow-c > span { transform: scaleX(-1) translateX(38px); }
.project__close, .project__nav { opacity: 0; transition: opacity .8s var(--ease-out) .5s; }
.project.is-content .project__close, .project.is-content .project__nav { opacity: 1; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .nav__status { display: none; }
  .work { grid-template-columns: 6vw 1fr auto 44px; }
  .skill__title { font-size: clamp(32px, 4.8vw, 62px); }
  .project__grid { padding-left: 8vw; }
}

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__links, .nav__meta { display: none; }
  .nav__burger { display: block; }
  .gridlines i:nth-child(2), .gridlines i:nth-child(4) { display: none; }
}

@media (max-width: 767px) {
  body { font-size: 14px; }
  .pill { display: none; }
  .indicator { bottom: 16px; }

  /* Hero: prioritise face & censored-eye detail */
  .hero { --pw: min(112vw, 64vh); min-height: 560px; }
  .hero__stage-wrap { top: 42%; }
  .hl--ml, .hl--mr, .hl--bl { display: none; }
  .hl--tl { top: calc(var(--nav-h) + 2vh); }
  .hero__name { left: var(--pad); right: var(--pad); bottom: 44px; text-align: left; }
  .hero__title { font-size: 15.5vw; }
  .hero__sub { justify-content: flex-start; flex-wrap: wrap; }

  .powered { height: 220vh; }
  .powered__title { font-size: 13vw; }
  .powered__sub { bottom: 14vh; width: 80%; }

  /* Works: tap-first list, thumbnails appear for the centred row */
  .works { padding: 14vh var(--pad) 16vh; }
  .work { grid-template-columns: 1fr auto; grid-template-areas: "idx arrow" "title title" "meta meta"; row-gap: 8px; padding: 22px 0 18px; }
  .work__idx { grid-area: idx; }
  .work__arrow { grid-area: arrow; }
  .work__arrow .arrow-c { width: 32px; height: 32px; }
  .work__title { grid-area: title; font-size: clamp(36px, 11vw, 72px); white-space: normal; }
  .work__meta { grid-area: meta; flex-direction: row; gap: 14px; align-items: center; }
  .touch .work__thumb { right: 0; top: 14px; transform: none; width: 24vw; }
  .work.is-active .work__meta { transform: none; }
  .archive { margin-top: 14vh; }
  .archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works__more { flex-direction: column; align-items: flex-start; }
  .preview { display: none; }

  .marquees { height: 62vw; min-height: 260px; }
  .marquee__group { font-size: 11vw; }

  /* Expertise: vertical "map" instead of the 2D board */
  .expertise { height: auto; padding: 14vh 0 10vh; }
  .expertise__sticky { position: relative; height: auto; overflow: visible; }
  .expertise__head { position: relative; top: auto; left: auto; right: auto; margin: 0 var(--pad) 8vh; border-bottom: 1px solid var(--line); }
  .board { position: relative; width: auto; height: auto; transform: none !important; background: none; padding: 0 var(--pad); }
  .board__lines, .board__mark, .board__big, .board__word, .minimap, .expertise__coords { display: none; }
  .skill { position: relative; left: auto; top: auto; max-width: none; margin-bottom: 9vh; transform: none !important; }
  .skill:nth-of-type(even) { margin-left: 22vw; }
  .skill:nth-of-type(3n) { margin-left: 8vw; }
  .skill__dot { margin: 0 0 2vh 0; }
  .skill__title { font-size: 11vw; }
  .skill__img { position: relative; left: auto; top: auto; width: 46vw; margin-top: 3vh; }

  .hand { padding: 10vh var(--pad) 16vh; }
  .hand__type { font-size: 15vw; }

  .clients { padding: 10vh var(--pad) 20vh; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); }

  .cta__inner { padding-top: calc(var(--nav-h) + 6vh); }
  .cta__title { font-size: 12vw; }
  .cta__line { white-space: normal; }
  .cta__line--tv { padding-left: 0; }
  .cta__info { grid-template-columns: 1fr 1fr; row-gap: 5vh; margin-top: 12vh; }
  .cta__col--end { align-items: flex-start; }
  .cta__giant { font-size: 30vw; }

  .project__grid { grid-template-columns: 1fr; padding: calc(var(--nav-h) + 8px) var(--pad) 48px; align-items: start; }
  .project__media { width: 100%; height: 60vh; }
  .project__info { height: auto; padding-top: 7vh; padding-bottom: 70px; }
  .project__close { position: fixed; top: 20px; right: var(--pad); z-index: 3; background: var(--paper); padding: 8px 12px; border-radius: 30px; }
  .project__title { margin-left: 0; font-size: 13vw; --ov: 0px; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .grain { animation: none; }
  .js .hand__line { clip-path: none; }
}