/* ==========================================================================
   Lorenzo Schmitt — Portfolio
   Quiet luxury · digital editorial · soft modernism
   ========================================================================== */

:root {
  --paper: #ECEBE7;
  --ink: #0E0E0D;
  --night: #0E0E0D;
  /* identity accent — a warm vermillion, used on ~5–10% of the page */
  --verm: #E1401D;
  --verm-lt: #FF6A47;

  --f-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Geist', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;

  --pad: clamp(16px, 2.5vw, 40px);
  --gut: clamp(12px, 1.4vw, 24px);
  --nav-h: 64px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.33, 0, .2, 1);
}

/* ---------- tone (body background follows the section in view) ---------- */
body {
  --bg: var(--paper);
  --fg: var(--ink);
  --acc: var(--verm);
}
body[data-tone="dark"] {
  --bg: var(--night);
  --fg: var(--paper);
  --acc: var(--verm-lt);
}

/* ---------- base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
[data-lenis-prevent] { overscroll-behavior: contain; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .9s var(--ease-soft), color .9s var(--ease-soft);
}
body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
em { font-style: normal; }
::selection { background: var(--verm); color: #fff; }

:focus-visible { outline: 1px solid var(--acc); outline-offset: 5px; }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  transform: translateY(-160%); transition: transform .4s var(--ease-out);
}
.skip:focus { transform: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
}

.label {
  font-family: var(--f-text);
  font-size: 11px;
  font-weight: 450;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* underline link — enters from the left, leaves to the right */
.ul-link { position: relative; display: inline-block; }
.ul-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease-out);
}
.ul-link:hover::after, .ul-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px var(--pad) 22px;
  background: var(--night); color: var(--paper);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease-io);
}
.html-no-loader .loader { display: none; }
.loader__row {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--f-text); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.loader__row > span:first-child { opacity: .55; }
.loader__row:first-child > span:first-child { opacity: 1; }
.loader__row:first-child > span:last-child { opacity: .55; }
.loader__center { display: flex; justify-content: center; }
.loader__mark {
  display: block; height: 1.1em; overflow: hidden;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1;
}
.loader__mark span {
  display: block; text-align: center;
  transform: translateY(calc(var(--step, 0) * -100%));
  transition: transform .7s var(--ease-io);
}
.loader__count {
  display: block; overflow: hidden;
  font-family: var(--f-display); font-weight: 300; letter-spacing: -.05em;
  font-size: clamp(4.5rem, 13vw, 12rem); line-height: .78;
  font-variant-numeric: tabular-nums;
  opacity: 1 !important;
}
.loader__count span { display: block; transition: transform .9s var(--ease-io); }
.loader__bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(236,235,231,.12); }
.loader__bar i { display: block; height: 100%; background: var(--verm-lt); transform-origin: left; transform: scaleX(0); }

.is-loaded .loader { clip-path: inset(0 0 100% 0); }
.is-loaded .loader__count span { transform: translateY(-105%); }
.is-loaded .loader__center, .is-loaded .loader__row span:not(.loader__count) { opacity: 0; transition: opacity .4s ease; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--nav-h);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  align-items: center;
  padding: 0 var(--pad);
  color: var(--nav-fg, var(--fg));
  transition: transform .8s var(--ease-out), color .6s var(--ease-soft), opacity .6s ease;
}
.nav[data-tone="light"] { --nav-fg: var(--ink); --nav-bg: var(--paper); }
.nav[data-tone="dark"] { --nav-fg: var(--paper); --nav-bg: var(--night); }
.nav::before {
  content: ''; position: absolute; inset: 0 0 -18px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--nav-bg, var(--paper)) 55%, transparent);
  opacity: 0; transition: opacity .6s ease;
}
.nav.is-solid::before { opacity: 1; }
.menu-open .nav::before { opacity: 0; }
.nav.is-hidden { transform: translateY(-100%); }
.js .nav { opacity: 0; }
.is-loaded .nav { opacity: 1; transition-delay: 0s, 0s, .9s; }
.pv-open .nav { opacity: 0; pointer-events: none; transition-delay: 0s; }

.nav__brand { grid-column: 1 / span 3; font-size: 14px; font-weight: 500; letter-spacing: -.01em; justify-self: start; }
.nav__role { grid-column: 4 / span 4; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .5; }
.nav__links {
  grid-column: 8 / span 5; justify-self: end;
  display: flex; gap: clamp(18px, 2.4vw, 40px);
  font-size: 11px; font-weight: 450; letter-spacing: .06em; text-transform: uppercase;
}
.nav__links a { display: inline-flex; align-items: baseline; }
.nav__n { font-size: 9px; opacity: .4; margin-right: 6px; letter-spacing: .02em; transition: opacity .4s ease; }
.nav__links a:hover .nav__n, .nav__links a.is-current .nav__n { opacity: 1; color: var(--nav-acc, currentColor); }
.nav__links a.is-current::after { transform: scaleX(1); }

.nav__menu { display: none; }

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */
.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 6vh) var(--pad) 28px;
  background: var(--night); color: var(--paper);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease-io);
  visibility: hidden;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-open .nav { --nav-fg: var(--paper) !important; color: var(--paper); transform: none; }
.menu__list { display: flex; flex-direction: column; }
.menu__link {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid rgba(236,235,231,.12);
}
.menu__n { font-size: 11px; letter-spacing: .06em; opacity: .45; width: 22px; }
.menu__t { display: block; overflow: hidden; }
.menu__t span {
  display: block; font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.6rem, 12vw, 5.2rem); line-height: .92; letter-spacing: -.055em;
  transform: translateY(105%); transition: transform .9s var(--ease-out);
}
.menu-open .menu__t span { transform: none; }
.menu-open .menu__link:nth-child(1) .menu__t span { transition-delay: .25s; }
.menu-open .menu__link:nth-child(2) .menu__t span { transition-delay: .31s; }
.menu-open .menu__link:nth-child(3) .menu__t span { transition-delay: .37s; }
.menu-open .menu__link:nth-child(4) .menu__t span { transition-delay: .43s; }
.menu__foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  opacity: 0; transition: opacity .6s ease;
}
.menu__foot a:first-child { grid-column: 1 / -1; text-transform: none; font-size: 16px; letter-spacing: 0; }
.menu__clock { grid-column: 1 / -1; opacity: .45; margin-top: 8px; }
.menu-open .menu__foot { opacity: 1; transition-delay: .5s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 2vh) var(--pad) 22px;
  overflow: hidden;
}
.hero__meta { align-items: start; }
.hero__meta .label { opacity: .5; }
.hero__meta-a { grid-column: 1 / span 3; }
.hero__meta-b { grid-column: 4 / span 3; }
.hero__meta-c { grid-column: 7 / span 3; }
.hero__meta-d { grid-column: 10 / span 3; justify-self: end; text-align: right; }
.hero__meta time, .menu__clock time { font-variant-numeric: tabular-nums; }

.hero__name {
  --fs: var(--fs-name, 17.2vw);
  margin: auto 0 0;
  padding-top: 4vh;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs);
  line-height: .8;
  letter-spacing: -.062em;
  text-transform: uppercase;
}
.hero__line { display: flex; align-items: flex-end; will-change: transform; }
.hero__line--1 { justify-content: space-between; }
.hero__line--2 { justify-content: space-between; margin-top: .015em; }
.hero__clip { flex: none; display: block; overflow: hidden; padding: .02em .06em .03em 0; margin-right: -.06em; }
.hero__word { display: block; }
.js .hero__word { transform: translateY(104%); transition: transform 1.5s var(--ease-out); }
.is-loaded .hero__line--1 .hero__word { transform: none; transition-delay: .35s; }
.is-loaded .hero__line--2 .hero__word { transform: none; transition-delay: .47s; }

.hero__aside {
  align-self: flex-start;
  display: flex; flex-direction: column; gap: 2px;
  margin-top: .09em;
  font-size: 11px; letter-spacing: .06em; line-height: 1.35;
  text-align: right;
}
.hero__aside-muted { opacity: .5; }

/* the portrait is set as an index entry: ( photo ) */
.hero__frame {
  flex: none;
  display: flex; align-items: center;
  height: calc(var(--fs) * .725);
  margin-bottom: .067em;
}
.hero__paren {
  display: block;
  font-weight: 200; font-size: .9em; line-height: 1; letter-spacing: 0;
  margin-top: -.06em;
}
.hero__paren:first-child { margin-right: .04em; }
.hero__paren:last-child { margin-left: .04em; }
.js .hero__paren { opacity: 0; transition: opacity 1.2s var(--ease-soft), transform 1.4s var(--ease-out); }
.js .hero__paren:first-child { transform: translateX(.08em); }
.js .hero__paren:last-child { transform: translateX(-.08em); }
.is-loaded .hero__paren { opacity: 1; transform: none; transition-delay: 1s; }

.hero__line--2 { position: relative; padding-right: .13em; }
.hero__reg {
  position: absolute; right: 0; top: .03em;
  font-size: .12em; font-weight: 400; letter-spacing: 0; line-height: 1;
}
.js .hero__reg { opacity: 0; transition: opacity 1s ease; }
.is-loaded .hero__reg { opacity: 1; transition-delay: 1.3s; }

.hero__photo {
  position: relative;
  flex: none;
  width: calc(var(--fs) * .6);
  height: 100%;
  overflow: hidden;
  background: #d9d8d3;
}
.js .hero__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-io); }
.is-loaded .hero__photo { clip-path: inset(0 0 0 0); transition-delay: .7s; }
.hero__photo img {
  position: absolute; left: -6%; top: -6%;
  width: 112%; height: 112%;
  object-fit: cover; object-position: 50% 52%;
  filter: grayscale(1) contrast(1.04) brightness(1.02);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--ps, 1.12));
  transition: filter 1.2s var(--ease-soft);
  will-change: transform;
}
.hero__photo:hover img { filter: grayscale(0) contrast(1) brightness(1); }

.hero__foot { align-items: end; margin-top: clamp(28px, 5vh, 56px); }
.hero__lede {
  grid-column: 1 / span 5;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.65vw, 1.6rem);
  line-height: 1.22; letter-spacing: -.02em; font-weight: 400;
  max-width: 28ch;
}
.hero__lede em, .about__statement em, .contact__title em, .pv em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  text-transform: none;
}
.hero__lede em { font-size: 1.1em; }
.hero__status { grid-column: 7 / span 3; display: inline-flex; align-items: center; gap: 10px; }
.pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--acc);
  animation: pulse 2.6s var(--ease-soft) infinite;
}
@keyframes pulse { 0% { transform: scale(.4); opacity: .8; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

.hero__scroll { grid-column: 11 / span 2; justify-self: end; display: inline-flex; align-items: flex-end; gap: 12px; }
.hero__scroll-line { position: relative; width: 1px; height: 46px; overflow: hidden; }
.hero__scroll-line::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: .18; }
.hero__scroll-line::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: currentColor; transform: translateY(-100%);
  animation: scrollcue 2.4s var(--ease-io) infinite;
}
@keyframes scrollcue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ==========================================================================
   SECTIONS — shared
   ========================================================================== */
main > section { position: relative; padding: clamp(96px, 12vw, 190px) var(--pad); }

.sec-head { position: relative; padding-top: 14px; align-items: start; }
.sec-head::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: currentColor; opacity: .16;
}
.sec-head .label:first-child { grid-column: 1 / span 2; color: var(--acc); }
/* index number slides in a few px, the rule draws across */
.js .sec-head .label:first-child { opacity: 0; transform: translateX(-10px); transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease-out); }
.js .sec-head.is-in .label:first-child { opacity: 1; transform: none; }
.js .sec-head::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-io); }
.js .sec-head.is-in::before { transform: scaleX(1); }

/* signature — (LS) */
.sig { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; text-transform: none; }
.nav__brand { display: inline-flex; align-items: baseline; gap: .7em; }
.nav__brand .sig { transition: color .4s ease; }
.nav__brand:hover .sig { color: var(--acc); }
.sec-head__name { grid-column: 3 / span 4; }
.sec-head__note { grid-column: 9 / span 4; justify-self: end; text-align: right; opacity: .5; }

/* reveal primitives (only when JS is on) */
.r-line { display: block; overflow: hidden; padding: 0 .14em .16em 0; margin-bottom: -.16em; }
/* right padding keeps italic overhang (e.g. "?") inside the clip */
.r-line > span { display: inline-block; padding-right: .14em; margin-right: -.14em; }
.js .r-line > span { transform: translateY(108%); transition: transform 1.3s var(--ease-out); }
.js .is-in .r-line > span { transform: none; }
.js .is-in .r-line:nth-child(2) > span { transition-delay: .08s; }
.js .is-in .r-line:nth-child(3) > span { transition-delay: .16s; }

.js .r-fade { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease-soft), transform 1.3s var(--ease-out); }
.js .r-fade.is-in { opacity: 1; transform: none; }

.r-rule { position: relative; }
.r-rule::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: currentColor; opacity: .16;
  transform-origin: left;
}
.js .r-rule::before { transform: scaleX(0); transition: transform 1.5s var(--ease-io); }
.js .r-rule.is-in::before { transform: scaleX(1); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__statement {
  margin: clamp(64px, 9vw, 150px) 0 clamp(64px, 8vw, 140px);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 8vw, 9.2rem);
  line-height: .86;
  letter-spacing: -.058em;
  text-transform: uppercase;
}
.about__statement .r-line:nth-child(2) { padding-left: calc((100% + var(--gut)) / 12 * 2); }
.about__statement .r-line:nth-child(3) { padding-left: calc((100% + var(--gut)) / 12 * 6); }
.about__statement em { color: var(--acc); letter-spacing: -.025em; font-size: 1.12em; }

.about__grid { align-items: start; row-gap: 64px; }
.about__bio { grid-column: 7 / span 5; }
.about__bio p {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.42vw, 1.42rem);
  line-height: 1.42; letter-spacing: -.012em;
  color: color-mix(in srgb, var(--fg) 64%, transparent);
}
.about__bio p + p { margin-top: 1.1em; }
.about__bio p:first-child { text-indent: calc((100% + var(--gut)) / 5); }
.about__bio .hl { color: var(--fg); }

.stats {
  grid-column: 1 / span 5; grid-row: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--gut);
}
.stat { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); }
.stat dt { opacity: .5; }
.stat dd { display: flex; align-items: flex-start; flex-wrap: wrap; margin-top: 22px; }
.stat__n {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(3.6rem, 6vw, 6.4rem); line-height: .8; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.stat sup { font-family: var(--f-display); font-size: 1.6rem; font-weight: 300; line-height: 1; margin-left: 4px; }
.stat__u { flex-basis: 100%; margin-top: 12px; font-size: 13px; opacity: .6; }

.tools { margin-top: clamp(80px, 10vw, 160px); align-items: start; }
.tools__label { grid-column: 1 / span 2; opacity: .5; padding-top: 22px; }
.tools__list { grid-column: 3 / span 10; }
.tools__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7fr) minmax(0, 3fr);
  align-items: baseline; column-gap: var(--gut);
  padding: 18px 0 20px;
}
.tools__row:last-child { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--fg) 16%, transparent); }
.tools__ab {
  font-family: var(--f-serif); font-style: italic; font-size: 1.35rem; line-height: 1;
  opacity: .45; transition: opacity .5s ease, color .5s ease;
}
.tools__name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 3.6rem); line-height: 1; letter-spacing: -.045em;
  transition: transform .9s var(--ease-out);
}
.tools__use { justify-self: end; text-align: right; opacity: .5; }
@media (hover: hover) {
  .tools__row:hover .tools__name { transform: translateX(.22em); }
  .tools__row:hover .tools__ab { opacity: 1; color: var(--acc); }
}

/* ==========================================================================
   PRACTICE (dark interlude)
   ========================================================================== */
.practice { padding-top: clamp(72px, 9vw, 140px) !important; padding-bottom: clamp(48px, 6vw, 96px) !important; }
.practice__text {
  margin: clamp(72px, 10vw, 170px) 0 clamp(72px, 9vw, 150px);
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.5rem, 6.6vw, 7.4rem);
  line-height: .98; letter-spacing: -.05em;
  text-indent: calc((100% + var(--gut)) / 12 * 3);
}
.practice__text .w { opacity: .16; transition: opacity .5s var(--ease-soft); }
.practice__text .w.is-on { opacity: 1; }
/* (1)–(5) — the "brief" list: poster scale, vermillion hairlines, tiny notes at the far edge */
.svc { margin-top: clamp(24px, 3vw, 48px); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--acc) 55%, transparent); }
.svc__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end; column-gap: .22em;
  padding: .12em 0 .06em;
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.3rem, 6.2vw, 7.2rem); line-height: .9; letter-spacing: -.058em;
}
.svc__row::before { background: var(--acc) !important; opacity: .55 !important; }
.svc__n { color: var(--acc); font-weight: 400; letter-spacing: -.04em; }
.svc__t { transition: transform 1s var(--ease-out); }
.svc__d {
  align-self: center; text-align: right;
  font-size: 10.5px; letter-spacing: .06em; line-height: 1.3; font-weight: 450;
  opacity: .5; transition: opacity .5s ease, color .5s ease;
}
@media (hover: hover) {
  .svc__row:hover .svc__t { transform: translateX(.1em); }
  .svc__row:hover .svc__d { opacity: 1; color: var(--acc); }
}

/* ==========================================================================
   EXPERIENCE
   ========================================================================== */
.experience { padding-top: clamp(64px, 8vw, 130px) !important; }
.exp__head { margin-top: clamp(64px, 8vw, 120px); padding-bottom: 14px; opacity: .4; }
.exp__head span:nth-child(1) { grid-column: 1 / span 2; }
.exp__head span:nth-child(2) { grid-column: 3 / span 4; }
.exp__head span:nth-child(3) { grid-column: 7 / span 2; }
.exp__head span:nth-child(4) { grid-column: 9 / span 4; }

.exp { border-bottom: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); }
.exp__row { padding: 30px 0 46px; align-items: baseline; transition: opacity .6s var(--ease-soft); }
.exp__period { grid-column: 1 / span 2; opacity: .55; }
.exp__company {
  grid-column: 3 / span 4;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.3vw, 3.4rem); line-height: .98; letter-spacing: -.045em;
}
.exp__company span { display: inline-block; transition: transform .9s var(--ease-out); }
.exp__role { grid-column: 7 / span 2; font-size: 13px; transition: color .5s ease; }
.exp__desc { grid-column: 9 / span 4; font-size: 15px; line-height: 1.55; opacity: .62; max-width: 46ch; }
@media (hover: hover) {
  .exp:hover .exp__row:not(:hover) { opacity: .32; }
  .exp__row:hover .exp__company span { transform: translateX(.3em); }
  .exp__row:hover .exp__role { color: var(--acc); }
}

/* ==========================================================================
   WORK — index + aperture stage (signature)
   ========================================================================== */
.work__title {
  margin: clamp(56px, 7vw, 120px) 0 clamp(56px, 7vw, 120px);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(4rem, 15vw, 16.5rem);
  line-height: .8; letter-spacing: -.068em;
  text-transform: uppercase;
}
.work__title .r-line:nth-child(2) { padding-left: calc((100% + var(--gut)) / 12 * 4); }
/* footnote asterisk — rotates a few degrees with scroll */
.ast {
  display: inline-block; vertical-align: top;
  margin: .06em 0 0 .04em;
  font-size: .42em; line-height: 1; font-weight: 500;
  color: var(--acc);
  transform: rotate(var(--rot, 0deg));
}
.work__note {
  max-width: 34ch; margin: 0 0 clamp(48px, 6vw, 100px) auto;
  text-align: right; opacity: .55;
}
.ast-s { color: var(--acc); margin-right: .3em; }

.work__body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  align-items: start;
}
.work__list { grid-column: 1 / span 7; border-bottom: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }

.wk { position: relative; }
.wk::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: currentColor; opacity: .14;
}
/* active row: a vermillion hairline draws over the neutral one */
.wk::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-io);
}
.wk__link {
  display: grid;
  grid-template-columns: 3.6em minmax(0, 1fr) auto;
  grid-template-areas: "num title cat" "num title tags";
  grid-template-rows: auto 1fr;
  column-gap: var(--gut);
  align-items: start;
  padding: clamp(16px, 1.7vw, 28px) 0 clamp(16px, 1.7vw, 28px);
}
.wk__num { grid-area: num; padding-top: .55em; font-size: 11px; letter-spacing: .02em; opacity: .45; font-variant-numeric: tabular-nums; transition: opacity .5s ease, color .5s ease; }
.wk__title {
  grid-area: title;
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.1rem, 3.9vw, 4.9rem);
  line-height: .9; letter-spacing: -.055em;
  transition: opacity .7s var(--ease-soft), transform 1s var(--ease-out);
}
.wk__t { display: inline; }
/* each word clips its own rolling characters, so titles may wrap between words */
.wk__t .wd { display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; padding: 0 .02em .08em 0; margin-bottom: -.08em; }
.wk__plain { display: none; }
.wk__t .c {
  display: inline-block;
  text-shadow: 0 1.12em 0 currentColor;
  transition: transform .75s var(--ease-io);
  transition-delay: calc(var(--i) * 16ms);
}
.wk__cat { grid-area: cat; justify-self: end; text-align: right; padding-top: .55em; transition: opacity .5s ease; }
.wk__tags {
  grid-area: tags; justify-self: end;
  display: flex; flex-direction: column; align-items: flex-end;
  margin-top: 4px;
  opacity: .45;
  transition: opacity .5s var(--ease-soft);
}
.wk__media { display: none; }

@media (hover: hover) and (min-width: 861px) {
  .work__list.has-active .wk:not(.is-active) .wk__title { opacity: .2; }
  .work__list.has-active .wk:not(.is-active) .wk__cat { opacity: .25; }
  .work__list.has-active .wk:not(.is-active) .wk__tags { opacity: 0; }
  .wk.is-active::after { transform: scaleX(1); }
  .wk.is-active .wk__title { transform: translateX(.12em); }
  .wk.is-active .wk__num { opacity: 1; color: var(--acc); }
  .wk.is-active .wk__tags { opacity: .8; }
  .wk.is-hover .wk__t .c { transform: translateY(-1.12em); }
}

/* stage */
.stage {
  grid-column: 8 / span 5;
  position: sticky; top: calc(var(--nav-h) + 1vh);
  height: calc(100vh - var(--nav-h) - 6vh);
  height: calc(100svh - var(--nav-h) - 6vh);
}
.stage__box { position: relative; width: 100%; height: 100%; }
.stage__aperture {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 1.05s var(--ease-io);
  will-change: clip-path;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.stage__img {
  position: absolute; left: 0; top: 0;
  object-fit: cover;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.08);
  transform-origin: 50% 100%;
  transition: clip-path 1.05s var(--ease-io), transform 1.6s var(--ease-out);
}
.stage__img.is-active { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); z-index: 2; }
.stage__img.is-prev { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); z-index: 1; transition: none; }
.stage__img.no-tr { transition: none !important; }

.stage__cap {
  position: absolute; left: 0; top: 0;
  display: flex; justify-content: space-between; gap: 18px;
  padding-top: 14px;
  transition: transform 1.05s var(--ease-io), width 1.05s var(--ease-io);
}
.stage__idx { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo { display: inline-block; height: 1.35em; overflow: hidden; }
.odo__strip { display: block; transition: transform .9s var(--ease-io); }
.odo__strip span { display: block; height: 1.35em; }
.stage__of { opacity: .45; }
.stage__cat { flex: 1; }
.stage__dim { opacity: .45; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { padding-bottom: 28px !important; }
.contact__main {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin: clamp(72px, 10vw, 170px) 0 clamp(72px, 9vw, 150px);
}
.contact__title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(3rem, 9.6vw, 11.2rem);
  line-height: .84; letter-spacing: -.062em;
  text-transform: uppercase;
}
.contact__title .r-line:nth-child(2) { padding-left: calc(var(--fs-indent, 1.4em)); }
.contact__title em { font-size: 1.14em; letter-spacing: -.03em; }

.cta {
  flex: none;
  position: relative;
  display: grid; place-items: center;
  width: clamp(140px, 13vw, 200px); aspect-ratio: 1;
  margin-bottom: 1.2vw;
  color: #fff;
  will-change: transform;
}
.cta::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--verm);
  transition: transform .8s var(--ease-out);
}
.cta:hover::before { transform: scale(1.07); }
.cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; will-change: transform; }
.cta__label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.3; }
.cta__arrow { transition: transform .7s var(--ease-out); }
.cta:hover .cta__arrow { transform: translate(3px, -3px); }

.channels { border-bottom: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); }
.channel {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  align-items: baseline;
  padding: 18px 0 22px;
}
.channel__k { grid-column: 1 / span 2; opacity: .5; }
.channel__v {
  grid-column: 3 / span 8; justify-self: start;
  display: inline-flex; align-items: baseline; gap: .35em;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.3vw, 3.4rem); line-height: 1.05; letter-spacing: -.045em;
  transition: color .5s ease;
}
@media (hover: hover) { .channel__v:hover { color: var(--acc); } }
.channel__copy { grid-column: 11 / span 2; justify-self: end; opacity: .55; transition: opacity .3s ease; }
.channel__copy:hover { opacity: 1; }

/* arrow swap — one leaves up-right, the twin arrives from bottom-left */
.arrow { position: relative; display: inline-block; width: .62em; height: .9em; overflow: hidden; font-size: .62em; vertical-align: .25em; }
.arrow i { position: absolute; left: 0; top: 0; font-style: normal; line-height: .9; transition: transform .6s var(--ease-io); }
.arrow i:last-child { transform: translate(-110%, 110%); }
.arrow-link:hover .arrow i:first-child { transform: translate(110%, -110%); }
.arrow-link:hover .arrow i:last-child { transform: none; }

/* text swap (copy feedback) */
.swap { display: inline-grid; height: 1.35em; overflow: hidden; }
.swap span { grid-area: 1 / 1; transition: transform .6s var(--ease-io); }
.swap span:last-child { transform: translateY(110%); }
.is-copied .swap span:first-child { transform: translateY(-110%); }
.is-copied .swap span:last-child { transform: none; }

.footer { margin-top: clamp(80px, 12vw, 200px); align-items: baseline; }
.footer .label { opacity: .5; }
.footer > :first-child { grid-column: 1 / span 4; }
.footer__mid { grid-column: 5 / span 4; }
.footer__top { grid-column: 9 / span 4; justify-self: end; }
.footer .label:hover { opacity: 1; }

/* ==========================================================================
   PROJECT VIEW (overlay)
   ========================================================================== */
.pv {
  position: fixed; inset: 0; z-index: 80;
  background: var(--paper); color: var(--ink);
  --fg: var(--ink); --acc: var(--verm);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease-io);
}
.pv[hidden] { display: none; }
.pv__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--nav-h); padding: 0 var(--pad);
  color: #fff; mix-blend-mode: difference;
  opacity: 0; transition: opacity .5s ease;
}
.pv.is-open .pv__bar { opacity: 1; transition-delay: .6s; }
.pv__close { justify-self: start; }
.pv__counter { font-variant-numeric: tabular-nums; }
.pv__nextbtn { justify-self: end; }
.pv__scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; outline: none; }
.pv__content { transition: opacity .55s var(--ease-soft), transform .8s var(--ease-out); }
.pv__content.is-leaving { opacity: 0; transform: translateY(-24px); }

.pvh { position: relative; padding: calc(var(--nav-h) + 12vh) var(--pad) 0; overflow: hidden; }
.pvh > * { position: relative; z-index: 1; }
/* oversized index number — sits behind the title, cropped by the right edge */
.pvh__num {
  position: absolute !important; z-index: 0 !important;
  right: -.06em; top: calc(var(--nav-h) + 12vh + 3.2vw);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(8rem, 25vw, 30rem); line-height: .74; letter-spacing: -.075em;
  color: var(--acc);
  transform: translate3d(0, var(--ny, 0px), 0);
  pointer-events: none;
}
.js .pvh__num { opacity: 0; transition: opacity 1.2s var(--ease-soft) .25s; }
.js .pvh.is-in .pvh__num { opacity: 1; }
.pvh__meta { row-gap: 18px; align-items: start; }
.pvh__meta > div { grid-column: span 3; padding-top: 12px; border-top: 1px solid rgba(14,14,13,.16); }
.pvh__meta dt { opacity: .5; margin-bottom: 8px; }
.pvh__meta dd { font-size: 14px; line-height: 1.4; }
.pvh__title {
  margin: clamp(56px, 9vw, 150px) 0 clamp(36px, 4vw, 64px);
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(3.2rem, 11.5vw, 13rem);
  line-height: .82; letter-spacing: -.065em;
}
.pvh__desc { align-items: start; }
.pvh__desc p {
  grid-column: 7 / span 5;
  font-family: var(--f-display); font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.38; letter-spacing: -.015em;
  text-indent: calc((100% + var(--gut)) / 5);
}
.pvh__desc .label { grid-column: 1 / span 3; opacity: .5; padding-top: .5em; }

.pvm { padding: clamp(80px, 10vw, 170px) 0 0; display: flex; flex-direction: column; gap: clamp(80px, 11vw, 190px); }
.fig { position: relative; }
.fig__in { position: relative; overflow: hidden; background: rgba(14,14,13,.05); }
.fig__in img { width: 100%; height: auto; }
.js .fig__in { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.js .fig__in img { transform: scale(1.1); transition: transform 1.8s var(--ease-out); }
.fig.is-in .fig__in { clip-path: inset(0 0 0 0); }
.fig.is-in .fig__in img { transform: none; }
.fig figcaption { display: flex; gap: 14px; margin-top: 12px; }
.fig figcaption span:first-child { opacity: .45; }

.fig--bleed figcaption { padding: 0 var(--pad); }
.fig--wide { width: min(66%, var(--nw)); margin-left: auto; margin-right: var(--pad); }
.fig--single { width: min(34%, var(--nw)); margin-left: calc(var(--pad) + (100% - var(--pad) * 2 + var(--gut)) / 12 * 2); }
.pvm__pair { padding: 0 var(--pad); align-items: start; }
.pvm__pair .fig:first-child { grid-column: 2 / span 5; }
.pvm__pair .fig:last-child { grid-column: 8 / span 5; margin-top: clamp(80px, 14vw, 240px); }

.pvn {
  display: block; position: relative;
  margin-top: clamp(120px, 14vw, 240px);
  padding: 16px var(--pad) clamp(48px, 6vw, 96px);
  color: var(--ink);
}
.pvn::before { content: ''; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 1px; background: currentColor; opacity: .16; }
.pvn__top { display: flex; justify-content: space-between; }
.pvn__top .label:last-child { opacity: .5; }
.pvn__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: clamp(40px, 6vw, 100px); }
.pvn__title {
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.8rem, 9.5vw, 10.5rem); line-height: .84; letter-spacing: -.065em;
  transition: transform 1s var(--ease-out);
}
.pvn__img { flex: none; width: clamp(140px, 20vw, 320px); overflow: hidden; }
.pvn__img img { width: 100%; height: auto; transform: scale(1.12); transition: transform 1.4s var(--ease-out); }
@media (hover: hover) {
  .pvn:hover .pvn__title { transform: translateX(.08em); }
  .pvn:hover .pvn__img img { transform: scale(1); }
}

/* ==========================================================================
   CURSOR (fine pointers only — enabled via JS)
   ========================================================================== */
.cursor { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; }
.cursor__dot, .cursor__ring, .cursor__label {
  position: fixed; left: 0; top: 0; pointer-events: none; will-change: transform;
}
.cursor__dot i, .cursor__ring i, .cursor__label i {
  position: absolute; display: block; border-radius: 50%;
  transition: transform .5s var(--ease-out), opacity .3s ease;
}
.cursor__dot, .cursor__ring { mix-blend-mode: difference; }
.cursor__dot i { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor__ring i { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(255,255,255,.55); }
.cursor__label i {
  width: 86px; height: 86px; margin: -43px 0 0 -43px;
  display: grid; place-items: center;
  background: var(--verm); color: #fff;
  font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  transform: scale(0);
}
.cursor.is-hover .cursor__ring i { transform: scale(1.55); }
.cursor.is-hover .cursor__dot i { transform: scale(0); }
.cursor.is-label .cursor__ring i, .cursor.is-label .cursor__dot i { transform: scale(0); }
.cursor.is-label .cursor__label i { transform: scale(1); }
.cursor.is-hidden i { transform: scale(0) !important; }
.cursor.is-down .cursor__ring i { transform: scale(.8); }
.cursor.is-off { opacity: 0; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .nav__role { display: none; }
  .nav__links { grid-column: 5 / span 8; }
  .about__bio { grid-column: 7 / span 6; }
  .stats { grid-column: 1 / span 5; }
  .exp__head span:nth-child(3), .exp__role { grid-column: 7 / span 2; }
}

@media (max-width: 860px) {
  :root { --nav-h: 58px; }
  .nav__role, .nav__links { display: none; }
  .nav__brand { grid-column: 1 / span 8; }
  .nav__menu {
    grid-column: 9 / span 4; justify-self: end;
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    height: 44px;
  }
  .nav__menu-label { display: inline-grid; height: 1.35em; overflow: hidden; }
  .nav__menu-label span { grid-area: 1 / 1; transition: transform .6s var(--ease-io); }
  .nav__menu-label span:last-child { transform: translateY(110%); }
  .menu-open .nav__menu-label span:first-child { transform: translateY(-110%); }
  .menu-open .nav__menu-label span:last-child { transform: none; }
  .nav__menu-icon { position: relative; width: 18px; height: 7px; }
  .nav__menu-icon::before, .nav__menu-icon::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
    transition: transform .6s var(--ease-io);
  }
  .nav__menu-icon::before { top: 0; }
  .nav__menu-icon::after { bottom: 0; }
  .menu-open .nav__menu-icon::before { transform: translateY(3px) rotate(45deg); }
  .menu-open .nav__menu-icon::after { transform: translateY(-3px) rotate(-45deg); }

  .hero__line { will-change: auto; transform: none !important; }
  .hero__frame {
    position: absolute; right: var(--pad); top: calc(var(--nav-h) + 9vh);
    height: min(56vw, 318px); margin: 0;
  }
  .hero__paren { display: none; }
  .hero__photo { width: min(44vw, 250px); }
  .hero__line--2 { position: static; padding-right: 0; }
  .hero__reg { position: static; align-self: flex-start; margin-top: .04em; }
  .hero__aside {
    position: absolute; left: var(--pad); top: calc(var(--nav-h) + 9vh);
    margin: 0; text-align: left; font-size: 11px; letter-spacing: .06em;
  }
  .hero__meta-a { grid-column: 1 / span 6; }
  .hero__meta-b { display: none; }
  .hero__meta-c { display: none; }
  .hero__meta-d { grid-column: 7 / span 6; }
  .hero__lede { grid-column: 1 / span 9; }
  .hero__status { display: none; }
  .hero__scroll { grid-column: 10 / span 3; }

  .sec-head__name { grid-column: 3 / span 6; }
  .sec-head__note { display: none; }

  .about__statement .r-line:nth-child(2) { padding-left: 8%; }
  .about__statement .r-line:nth-child(3) { padding-left: 30%; }
  .about__bio { grid-column: 1 / -1; grid-row: 1; }
  .stats { grid-column: 1 / -1; grid-row: 2; }
  .tools__label { grid-column: 1 / -1; padding-top: 0; margin-bottom: 14px; }
  .tools__list { grid-column: 1 / -1; }
  .tools__row { grid-template-columns: 2.2em minmax(0, 1fr) auto; }

  .practice__text { text-indent: 12%; }
  .svc__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "n t" ". d";
    font-size: clamp(2rem, 9.6vw, 4rem); padding: .16em 0 .3em;
  }
  .svc__n { grid-area: n; }
  .svc__t { grid-area: t; }
  .svc__d { grid-area: d; text-align: left; margin-top: 8px; font-size: 10px; }

  .exp__head { display: none; }
  .exp__row { row-gap: 10px; padding: 24px 0 34px; }
  .exp__period { grid-column: 1 / -1; order: -1; }
  .exp__company { grid-column: 1 / -1; }
  .exp__role { grid-column: 1 / -1; color: var(--acc); }
  .exp__desc { grid-column: 1 / -1; margin-top: 8px; }

  .work__title .r-line:nth-child(2) { padding-left: 18%; }
  .work__list { grid-column: 1 / -1; border-bottom: 0; }
  .stage { display: none; }
  .wk { padding-bottom: 56px; }
  .wk::before { display: none; }
  .wk__link {
    grid-template-columns: 2.8em minmax(0, 1fr) auto;
    grid-template-areas: "media media media" "num title title" ". tags tags";
    grid-template-rows: auto;
    column-gap: 0;
    padding: 0;
  }
  .wk__num { padding-top: .35em; }
  .wk__media { grid-area: media; display: block; position: relative; overflow: hidden; margin-bottom: 18px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
  .wk__media img { width: 100%; height: auto; }
  .js .wk__media { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-io); }
  .js .wk__media img { transform: scale(1.1); transition: transform 1.6s var(--ease-out); }
  .wk.is-in .wk__media { clip-path: inset(0 0 0 0); }
  .wk.is-in .wk__media img { transform: none; }
  .wk:nth-child(even) .wk__media { width: 78%; justify-self: end; }
  .wk:nth-child(odd) .wk__media { width: 100%; }
  .wk__title { font-size: clamp(1.9rem, 8.6vw, 3.4rem); }
  .wk__t { display: none; }
  .wk__plain { display: inline; }
  .wk__cat { display: none; }
  .wk__tags { justify-self: start; flex-direction: row; flex-wrap: wrap; gap: 2px 14px; opacity: .55; margin-top: 10px; }
  .pvh__num { top: calc(var(--nav-h) + 6vh + 90px); font-size: 46vw; }

  .contact__main { flex-direction: column; align-items: flex-start; }
  .cta { align-self: flex-end; margin: 0; }
  .channel { row-gap: 8px; }
  .channel__k { grid-column: 1 / span 6; }
  .channel__copy { grid-column: 7 / span 6; grid-row: 1; }
  .channel__v { grid-column: 1 / -1; }
  .footer { row-gap: 10px; }
  .footer > :first-child { grid-column: 1 / span 6; }
  .footer__mid { display: none; }
  .footer__top { grid-column: 7 / span 6; }

  .pvh { padding-top: calc(var(--nav-h) + 6vh); }
  .pvh__meta > div { grid-column: span 6; }
  .pvh__desc p { grid-column: 1 / -1; text-indent: 18%; }
  .pvh__desc .label { display: none; }
  .fig--wide { width: auto; margin: 0 var(--pad); }
  .fig--single { width: min(74%, var(--nw)); margin-left: var(--pad); }
  .pvm__pair { row-gap: 64px; }
  .pvm__pair .fig:first-child { grid-column: 1 / span 10; }
  .pvm__pair .fig:last-child { grid-column: 3 / span 10; margin-top: 0; }
  .pvn__row { flex-direction: column; align-items: flex-start; }
  .pvn__img { width: 46%; align-self: flex-end; }
}

@media (max-width: 480px) {
  .hero__scroll span { display: none; }
  .stats { gap: 32px 16px; }
  .stat__n { font-size: 3.4rem; }
  .tools__use { display: none; }
  .tools__row { grid-template-columns: 2em minmax(0, 1fr); }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  .js .hero__word, .js .r-line > span, .js .r-fade, .js .fig__in, .js .fig__in img,
  .js .wk__media, .js .wk__media img, .js .hero__photo { transform: none; opacity: 1; clip-path: none; }
  .js .r-rule::before, .js .sec-head::before { transform: none; }
  .js .hero__paren, .js .hero__reg, .js .sec-head .label:first-child, .js .pvh__num { opacity: 1; transform: none; }
  .practice__text .w { opacity: 1; }
}