/* ================================================================ VYLEW
   Brand v3, Obsidian on White, laid out the Kudos way: a visible
   four-column hairline grid, every section opening with label | headline |
   lead, Mist cards, pill buttons. No accent colour, no gradients, no
   shadows, no blur, no italics. Light type, heavy meaning. */
/* fonts, self-hosted (Geist and Geist Mono, OFL) */
@font-face { font-family: Geist; src: url("../fonts/geist-latin.woff2") format("woff2"); font-weight: 200 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Geist; src: url("../fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 200 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --paper: #FFFFFF; --mist: #F4F4F5; --cloud: #EAEAEC; --silver: #E2E2E4;
  --smoke: #A1A1A6; --ash: #6E6E73; --charcoal: #3A3A3C; --obsidian: #0B0B0C;
  --line-strong: #8E8E93; --line-dark: #232325;
  --sans: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --g: clamp(16px, 4.4vw, 64px);   /* outer gutter: 64 desktop, 16 phone */
  --gap: 24px;                     /* between columns; the hairlines sit in it */
  --nav: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--paper); color: var(--obsidian); font: 400 16px/1.6 var(--sans); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--obsidian); color: var(--paper); }
:focus-visible { outline: 2px solid var(--obsidian); outline-offset: 2px; }
main { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- type */
.label { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.sym { width: 9px; height: 13px; fill: currentColor; flex: 0 0 auto; }
.h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 300; line-height: .98; letter-spacing: -.05em; }
.h3 { font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
.lead { font-size: 19px; line-height: 1.5; letter-spacing: -.01em; color: var(--ash); max-width: 52ch; }
.tone { color: var(--ash); }

/* ---------------------------------------------------------------- grid */
.wrap { width: 100%; max-width: 1568px; margin-inline: auto; padding-inline: var(--g); }
.gridlines { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.gridlines .wrap { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.gridlines i { position: relative; }
.gridlines i::before, .gridlines i:last-child::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--silver); }
.gridlines i::before { left: calc(var(--gap) / -2); }
.gridlines i:last-child::after { right: calc(var(--gap) / -2); }
.gridlines--dark { position: absolute; z-index: 0; }
.gridlines--dark i::before, .gridlines--dark i:last-child::after { background: var(--line-dark); }

/* ------------------------------------------------------------- buttons */
/* Buttons. Primary = split pill: label + a white chip whose arrow turns on
   hover. Secondary = liquid glass, a light following the cursor inside.
   Both lean toward the cursor (magnetic) and spread an ink circle from
   the point you press. */
.btn { position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 6px 0 24px; border-radius: 999px; background: var(--obsidian); color: var(--paper);
  font: 500 15px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background-color .35s var(--ease), color .35s var(--ease); }
.btn__in { display: inline-flex; align-items: center; gap: 14px; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.btn.is-near, .btn.is-near .btn__in { transition-duration: .12s, .35s, .35s; transition-timing-function: linear, var(--ease), var(--ease); }
.btn__chip { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--paper); color: var(--obsidian); transition: transform .4s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }
.btn__chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.btn:hover .btn__chip { transform: rotate(-45deg); }
.btn--sm { min-height: 44px; padding: 0 4px 0 18px; font-size: 14px; }
.btn--sm .btn__in { gap: 12px; }
.btn--sm .btn__chip { width: 36px; height: 36px; }
.btn--glass { padding: 0 24px; color: var(--obsidian); background: rgba(255,255,255,.4); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(11,11,12,.1), 0 8px 24px rgba(0,0,0,.08); }
.btn__lg { position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: #fff; filter: blur(16px); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.btn--glass:hover .btn__lg { opacity: .95; }
.ink { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255,255,255,.26); transform: scale(0); pointer-events: none; animation: ink .65s var(--ease) forwards; }
.btn--glass .ink, .fly.inv .ink { background: rgba(11,11,12,.12); }
@keyframes ink { to { transform: scale(1); opacity: 0; } }
/* send → done, for forms: pill to circle, spinner, a drawn check */
.btn[data-morph] { transition: width .45s cubic-bezier(.65, 0, .35, 1), padding .45s cubic-bezier(.65, 0, .35, 1); }
.btn[data-morph] .btn__in { transition: opacity .2s; }
.btn__sp, .btn__ck { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; opacity: 0; transition: opacity .2s; }
.btn__sp { border: 1.6px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn__ck { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.btn.is-busy, .btn.is-done { padding: 0; }
.btn.is-busy .btn__in, .btn.is-done .btn__in { opacity: 0; }
.btn.is-busy .btn__sp { opacity: 1; }
.btn.is-done .btn__ck { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease) .1s, opacity .1s; }
@keyframes spin { to { transform: rotate(360deg); } }
/* links: the label rolls up and a fresh copy rolls in */
.roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; vertical-align: bottom; }
.roll > span { display: block; transition: transform .5s var(--ease); }
.roll > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
a:hover > .roll > span, a:focus-visible > .roll > span { transform: translateY(-100%); }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--sans); padding-bottom: 6px; border-bottom: 1px solid var(--obsidian); width: fit-content; }
.arrow-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; transition: transform .24s var(--ease); }
.arrow-link:hover svg { transform: translate(2px, -2px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--cloud); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal); }

/* ------------------------------------------------------------------ nav
   No bar. Wordmark slot left, links centre, Book slot right. The wordmark
   and the Book button are separate flying layers that land in the slots.
   Once you scroll, the links become a liquid-glass pill (the one place the
   brand's no-glass rule is broken, on purpose). */
.nav { position: fixed; z-index: 80; top: 0; left: 0; right: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.nav__in { height: var(--nav); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.nav__mark { justify-self: start; display: block; width: 120px; aspect-ratio: 4270 / 716; pointer-events: auto; }
.nav__links { justify-self: center; display: flex; gap: 10px; padding: 5px; border-radius: 999px; pointer-events: auto;
  background: rgba(255,255,255,0); box-shadow: inset 0 0 0 1px rgba(255,255,255,0); -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%);
  transition: gap .55s var(--ease), background-color .55s var(--ease), box-shadow .55s var(--ease), backdrop-filter .55s var(--ease), -webkit-backdrop-filter .55s var(--ease); }
.nav__links a { position: relative; padding: 10px 14px; border-radius: 999px; font-size: 14px; line-height: 1; color: var(--obsidian); opacity: .62; transition: opacity .24s var(--ease), color .4s var(--ease), background-color .3s var(--ease); }
.nav__links a:hover, .nav__links a.is-on { opacity: 1; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav__cta { visibility: hidden; }
.nav__menu { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--obsidian); cursor: pointer; pointer-events: auto;
  transition: background-color .55s var(--ease), box-shadow .55s var(--ease), color .4s var(--ease); }
.nav__menu i { position: relative; width: 16px; height: 6px; }
.nav__menu i::before, .nav__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__menu i::before { top: 0; } .nav__menu i::after { top: 4.5px; }
.menu-open .nav__menu i::before { top: 2.25px; transform: rotate(45deg); }
.menu-open .nav__menu i::after { top: 2.25px; transform: rotate(-45deg); }

/* liquid glass: frosted, saturated, a bright rim on top, a faint one below */
.is-glass .nav__links, .is-glass .nav__menu { gap: 2px; background: rgba(255,255,255,.46); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.4), 0 8px 28px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08); }
.is-glass .nav__links a.is-on { background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
/* over the dark section the glass tints dark and the type turns white */
.is-glass.on-dark .nav__links, .is-glass.on-dark .nav__menu { background: rgba(28,28,30,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 28px rgba(0,0,0,.3); }
.is-glass.on-dark .nav__links a, .is-glass.on-dark .nav__menu { color: var(--paper); }
.is-glass.on-dark .nav__links a.is-on { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }

/* the wordmark that travels: inverts against what is under it */
.bm { position: fixed; z-index: 85; left: 0; top: 0; width: 1000px; transform-origin: 0 0; pointer-events: none; color: #fff; mix-blend-mode: difference; will-change: transform; }
.bm__in { display: flex; transform-origin: 0 0; }
.bm .lw { display: block; }
.bm .lw svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the Book button that travels: the split pill, inverted over the dark section */
.btn.fly { position: fixed; z-index: 86; left: 0; top: 0; min-height: 48px; padding: 0 5px 0 20px; font-size: 14px; transform-origin: 0 0; will-change: transform;
  transition: opacity .8s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }
.fly .btn__chip { width: 38px; height: 38px; }
.fly:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.fly.inv { background: var(--paper); color: var(--obsidian); }
.fly.inv .btn__chip { background: var(--obsidian); color: var(--paper); }
[data-cta-slot] { visibility: hidden; }

/* phones: the menu */
.menu { display: block; position: fixed; z-index: 75; inset: 0; background: var(--paper); clip-path: inset(0 0 100% 0); transition: clip-path .7s cubic-bezier(.76, 0, .24, 1); }
.menu[hidden] { display: block; visibility: hidden; transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .7s; }
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s cubic-bezier(.76, 0, .24, 1); }
.menu-open .nav__menu { color: var(--obsidian) !important; }
.menu__in { height: 100%; display: grid; grid-template-columns: 1fr; row-gap: 32px; align-content: end; padding-top: calc(var(--nav) + 40px); padding-bottom: 40px; }
.menu__links { display: grid; border-top: 1px solid var(--silver); }
.menu__links a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--silver); font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -.05em; }
.menu__side { display: grid; gap: 14px; justify-items: start; }
.menu__mail { font-size: 22px; font-weight: 300; letter-spacing: -.03em; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
  /* once the page scrolls, a glass strip sits behind the logo and buttons so they never sit on top of a headline */
  .nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--nav); background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 1px 0 rgba(11,11,12,.06); opacity: 0; transition: opacity .4s var(--ease), background-color .4s var(--ease); }
  .nav.is-glass::before { opacity: 1; }
  .nav__in { position: relative; }
  .nav.is-glass.on-dark::before { background: rgba(11,11,12,.62); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
  .nav__mark { width: 96px; }
  .nav__in { grid-template-columns: auto 1fr; }
}
/* ------------------------------------------------------------- 01 hero
   One composition at the mockup's 1376 x 768 proportions, fitted under the
   nav and anchored to the bottom; every layer is placed in % of it. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--cloud); }
.hero__comp { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: min(100%, (100svh - var(--nav)) * 1.7917); aspect-ratio: 1376 / 768; }
.hero__shape { position: absolute; z-index: 1; left: 25.07%; top: 13.41%; width: 49.85%; height: 57.42%; overflow: visible; transform-origin: 50% 50%; }
.hero__shape rect { fill: none; stroke: var(--charcoal); stroke-width: 1.5; }
.hero__me { position: absolute; z-index: 2; left: 28.71%; top: 5.47%; width: 44.76%; height: auto; will-change: transform; }
.hero__mark { position: absolute; z-index: 3; left: 10.1%; top: 24.5%; width: 26.1%; aspect-ratio: 4270 / 716; }
.hero__card { position: absolute; z-index: 4; left: 66%; top: 57%; width: clamp(270px, 20.5%, 350px);   /* overlaps the arm so the frost has something to blur */ display: grid; gap: 16px; padding: 18px; border-radius: 22px;
  /* liquid glass, same recipe as the nav pill */
  background: rgba(255,255,255,.44); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.45), 0 12px 36px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); }
.hero__card p { font-size: 15px; line-height: 1.5; color: var(--charcoal); }
.hero__btns { display: grid; gap: 8px; justify-items: start; }
.hero__card .btn { min-height: 48px; font-size: 14px; }
.hero__card .btn:not(.btn--glass) { padding: 0 5px 0 20px; }
.hero__card .btn__chip { width: 38px; height: 38px; }
.hero__card .btn--glass { padding: 0 20px; }

/* editorial cover lines: two labels up top, the services along the
   bottom edge (they turn white where they cross the photo), a name pill
   above the wordmark and one mixed-weight line beneath it */
.hero__cover { position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--nav) + 14px); display: flex; justify-content: space-between; }
.hero__cover .label { color: var(--charcoal); }
.hero__svc { position: absolute; z-index: 5; left: 0; right: 0; bottom: 22px; display: flex; justify-content: space-between; color: #fff; mix-blend-mode: difference; }
.hero__svc span { font: 300 clamp(15px, 1.3vw, 20px)/1 var(--sans); letter-spacing: -.01em; }
.hero__pill { position: absolute; z-index: 3; left: 10.1%; top: 17.5%; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong); background: rgba(255,255,255,.35); font: 500 12px/1 var(--sans); color: var(--charcoal); white-space: nowrap; }
.hero__pill img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1); }
.hero__line { position: absolute; z-index: 3; left: 10.1%; top: 36%; width: 16%; font: 300 clamp(18px, 1.75vw, 26px)/1.12 var(--sans); letter-spacing: -.035em; color: var(--charcoal); }
.hero__line b { font-weight: 500; color: var(--obsidian); }
@media (max-width: 1180px) { .hero__card { top: 50%; } }   /* the card grows relative to the frame here; lift it clear of the services row */

/* opening: states the script steps through */
.hero__shape rect { stroke-dasharray: var(--len, 4000); stroke-dashoffset: 0; }
.hero__me { transition: opacity 1s var(--ease), translate 1.2s var(--ease); }
.hero__card { transition: opacity .8s var(--ease), translate 1s var(--ease); }
/* opening: the E's growth bars rise left to right, then the other letters arrive */
.is-intro .bm .lw svg { opacity: 0; }
.is-intro .bm .lw:nth-child(4) svg { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; }
.is-intro.letters-in .bm .lw svg { opacity: 1; transition: opacity .7s var(--ease); transition-delay: calc(.55s + var(--i) * 70ms); }
.is-intro.letters-in .bm .lw:nth-child(4) svg { transform: none; transition: transform .8s cubic-bezier(.65, 0, .35, 1); transition-delay: 0s; }
.is-intro .hero__shape rect { stroke-dashoffset: var(--len, 4000); }
.is-intro.shape-in .hero__shape rect { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1); }
.is-intro .hero__me { opacity: 0; translate: 0 28px; }
.is-intro.me-in .hero__me { opacity: 1; translate: 0 0; }
.is-intro .hero__card { opacity: 0; translate: 0 18px; }
.hero__cover, .hero__svc, .hero__pill, .hero__line { transition: opacity .9s var(--ease); }
.is-intro .hero__cover, .is-intro .hero__svc, .is-intro .hero__pill, .is-intro .hero__line { opacity: 0; }
.is-intro.card-in .hero__cover, .is-intro.card-in .hero__svc, .is-intro.card-in .hero__pill, .is-intro.card-in .hero__line { opacity: 1; }
.is-intro.card-in .hero__card { opacity: 1; translate: 0 0; }
.is-intro .nav, .is-intro .fly { opacity: 0; }
html.intro-nav .nav, html.intro-nav .fly { opacity: 1; }
/* after the opening: the outline breathes, the card floats */
.is-live .hero__shape { animation: breathe 7s ease-in-out infinite alternate; }
.is-live .hero__card { animation: float 6s ease-in-out infinite alternate; }
.hero-off .hero__shape, .hero-off .hero__card { animation-play-state: paused; }   /* nothing loops off screen */
@keyframes breathe { from { scale: 1; } to { scale: 1.018; } }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* portrait screens: you fill the frame, wordmark over the outline, card at the foot */
@media (max-width: 759px), (max-aspect-ratio: 5/4) {
  /* portrait: labels on top, then the frame (starting below them), the
     wordmark inside the frame's top, you filling the rest, the card at the foot */
  .hero { --lab: calc(var(--nav) + 10px); --frame: calc(var(--nav) + 42px); --mk: calc(var(--nav) + 70px); }
  .hero__comp { position: static; width: auto; aspect-ratio: auto; translate: none; }
  .hero__cover { top: var(--lab); }
  .hero__shape { left: var(--g); right: auto; width: calc(100% - 2 * var(--g)); top: var(--frame); height: 46%; }   /* explicit width: an svg won't stretch from left/right alone */
  .hero__mark { left: 50%; top: var(--mk); width: min(78vw, 560px); translate: -50% 0; }
  .hero__me { left: 50%; top: auto; bottom: 0; width: auto; height: calc(100% - var(--mk) - min(78vw, 560px) * .168 - 30px); max-width: none; translate: -50% 0; }
  .is-intro .hero__me { translate: -50% 28px; }
  .is-intro.me-in .hero__me { translate: -50% 0; }
  .hero__card { left: var(--g); right: var(--g); top: auto; bottom: 16px; width: auto; max-width: 520px; margin-inline: auto; padding: 16px; }
  .hero__card { background: rgba(255,255,255,.64); }   /* sits over the dark shirt here: a little more frost keeps the text readable */
  .hero__svc, .hero__pill, .hero__line { display: none; }   /* only the two top labels; the rest would crowd the wordmark */
  .hero__btns { grid-template-columns: 1fr; justify-items: start; }   /* stacked: side by side would overflow; natural width keeps the flight to the nav true */
}

/* ------------------------------------------------------- 02 manifesto */
.mf { position: relative; background: var(--obsidian); color: var(--paper); padding: clamp(96px, 16vh, 160px) 0; overflow: hidden; }
.mf__in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 7vh, 80px); }
.mf .label { color: var(--smoke); align-self: start; padding-top: .9em; }
.mf__h { grid-column: 2 / 5; font-size: clamp(40px, 5.6vw, 84px); font-weight: 300; line-height: 1; letter-spacing: -.05em; }
.mf__p { color: var(--smoke); font-size: 17px; line-height: 1.55; max-width: 34ch; }
.mf__p--1 { grid-column: 3; } .mf__p--2 { grid-column: 4; }
.strike { position: relative; }
.strike::after { content: ""; position: absolute; left: -.02em; right: -.02em; top: 55%; height: .045em; background: currentColor; transform: scaleX(var(--s, 0)); transform-origin: 0 50%; }
[data-fill] .w { opacity: var(--o, .2); transition: opacity .25s linear; }
/* section headlines: each word comes into focus in turn */
[data-sharpen] .sw { display: inline-block; opacity: 0; filter: blur(8px); }
[data-sharpen].is-in .sw { opacity: 1; filter: none; transition: opacity .7s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i) * 60ms); }

/* ------------------------------------------------------------ sections */
.sec { position: relative; padding: 96px 0; border-top: 1px solid var(--silver); }
.shead { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; margin-bottom: 48px; }
.shead .label { grid-column: 1; align-self: start; padding-top: .7em; }
.shead .h1 { grid-column: 2 / 4; }
.shead .lead { grid-column: 4; align-self: end; font-size: 17px; }

/* ------------------------------------------------------- 03 services
   Sticky story, scrubbed: the photo frame holds still on the left while
   the four services scroll past. Everything follows scroll position (js):
   the next photo rises with the scroll, the number slides, the rail fills,
   the service in the middle is full ink. */
.sb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.sb__media { grid-column: 1 / 3; position: sticky; top: calc(var(--nav) + 20px); height: calc(100vh - var(--nav) - 60px); height: calc(100svh - var(--nav) - 60px); max-height: 760px; align-self: start; display: flex; gap: 18px; }
.sb__frame { position: relative; flex: 1; border-radius: 20px; overflow: hidden; background: var(--obsidian); }
.sb__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: clip-path, transform; }
.sb__frame img + img { clip-path: inset(100% 0 0 0); }
.sb__num { position: absolute; z-index: 5; left: 22px; bottom: 16px; color: var(--paper); font: 200 clamp(64px, 7vw, 112px)/1 var(--sans); letter-spacing: -.06em; }
.sb__roll { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.sb__roll > span { display: block; }
.sb__roll i { display: block; height: 1em; font-style: normal; }
.sb__rail { position: relative; width: 1px; background: var(--silver); }
.sb__rail i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--obsidian); transform-origin: top; transform: scaleY(0); }
.sb__rail b { position: absolute; left: -3px; width: 7px; height: 1px; background: var(--obsidian); }
.sb__list { grid-column: 3 / 5; }
.sb__item { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; padding-block: 48px; }
.sb__item h3 { margin: 16px 0 18px; font-size: clamp(44px, 5.4vw, 88px); font-weight: 300; letter-spacing: -.055em; line-height: .95; }
.sb__item p { max-width: 36ch; color: var(--ash); font-size: 18px; line-height: 1.5; }
.sb__item ul { margin: 26px 0 0; padding: 0; list-style: none; max-width: 420px; }
.sb__item li { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--silver); font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sb__ph { display: none; }
#services { position: relative; }

/* --------------------------------------------------------- 04 results
   "52 Mondays": a year as 52 hairline ticks, one per weekly report. The
   section pins; scrolling lights the weeks and, at each milestone, the big
   figure rolls to what changed by then (js). overflow: clip, not hidden,
   or the sticky pin stops working. */
.wk { position: relative; overflow: clip; height: 300vh; background: var(--obsidian); color: var(--paper); }
.wk .label { color: var(--smoke); }
/* background stairs: pinned with the section, fades out before the figure and ticks */
.wk__bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none; }
.wk__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 82%); mask-image: linear-gradient(to bottom, #000 40%, transparent 82%); }
@media (max-width: 700px) { .wk__bg img { object-position: 80% 0; } }
.wk > .wk__pin { position: sticky; z-index: 1; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding-block: calc(var(--nav) + 28px) 56px; }
.wk__top { display: flex; justify-content: space-between; gap: 16px; white-space: nowrap; }
.wk__mid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: end; }
.wk__fig { grid-column: 1 / 4; font: 200 clamp(88px, 17vw, 280px)/1 var(--sans); letter-spacing: -.06em; }
.wk__cap { grid-column: 4; padding-bottom: 1.2em; }
.wk__cap b { display: block; margin-top: 10px; font-size: 22px; font-weight: 300; letter-spacing: -.02em; line-height: 1.25; }
.wk__ticks { display: flex; height: 64px; align-items: flex-end; margin-top: 40px; }
.wk__ticks i { position: relative; flex: 1; height: 26px; }
.wk__ticks i::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 100%; background: var(--charcoal); transition: background .25s; }
.wk__ticks i.on::before { background: var(--paper); }
.wk__ticks i.m { height: 52px; }
.wk__ticks i.m::after { content: attr(data-w); position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--ash); }
.wk__ticks i.m.on::after { color: var(--paper); }
@media (max-width: 900px) { .wk__mid { grid-template-columns: 1fr; } .wk__fig, .wk__cap { grid-column: 1; } .wk__cap { padding-bottom: 0; } }

/* reel: digits roll like an odometer; an "X" placeholder rolls too and
   lands on X. A hidden copy keeps the baseline; clip-path (not overflow)
   clips, so the text still aligns. */
.rl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl__d { position: relative; display: inline-block; line-height: 1; clip-path: inset(0); }
.rl__ph { visibility: hidden; }
.rl__s { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; transition: transform 1.4s cubic-bezier(.2, 1.06, .3, 1); }
.rl__s i { display: block; height: 1em; font-style: normal; text-align: center; }
.rl__c { opacity: 0; transition: opacity .6s var(--ease) .4s; }
.rl.is-on .rl__c { opacity: 1; }

/* ------------------------------------------------------------ 05 work */
.cases { display: grid; gap: 64px; }
.case { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
.case__media { grid-column: 1 / 4; display: block; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; background: var(--mist); }
.case__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.1s var(--ease); }
.case__media:hover img { transform: scale(1.05); }
.case__info { grid-column: 4; display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.case__sub { color: var(--ash); font-size: 15px; margin-top: 4px; }
.case__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); }
.case__dl div { display: grid; gap: 6px; }
.case__dl dd { font-size: 15px; }
.case__p { color: var(--charcoal); font-size: 15px; line-height: 1.6; }
.case__m { margin-top: auto; display: grid; gap: 6px; }
.case__v { font-size: 56px; font-weight: 200; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- 06 approach
   "The loop": a stadium track (the hero frame's shape) on a Mist stage with
   a fine dot grid. A liquid-glass capsule carrying the step's name rides
   the track with scroll and frosts the dots under it (js). Small marks are
   the four stops; click one to jump. Phones: stacked glass cards. */
.lps { position: relative; overflow: hidden; border-radius: 28px; background: var(--mist); padding: 56px 0; }
.lps__dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.lps__dots circle { fill: #CFCFD3; }
.lp { position: relative; z-index: 1; height: clamp(420px, 54vh, 540px); margin-inline: clamp(72px, 7vw, 120px); }
.lp__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp__track { fill: none; stroke: #C9C9CD; stroke-width: 1; }
.lp__trail { fill: none; stroke: var(--obsidian); stroke-width: 1.5; }
.lp__cap, .lp__start, .lp__list li { background: rgba(255,255,255,.44); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.45), 0 12px 36px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); }
.lp__cap { position: absolute; z-index: 3; left: 0; top: 0; height: 54px; padding: 0 22px; translate: -50% -50%; border-radius: 999px; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 16px; pointer-events: none; will-change: transform; }
.lp__cap .label { color: var(--obsidian); }
.lp__mk { -webkit-appearance: none; appearance: none; position: absolute; z-index: 2; width: 9px; height: 9px; padding: 0; border: 0; translate: -50% -50%; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--obsidian); cursor: pointer; transition: background .3s; }
.lp__mk::before { content: ""; position: absolute; inset: -14px; }   /* bigger hit area */
.lp__mk.on { background: var(--obsidian); }
.lp__mk i { position: absolute; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); white-space: nowrap; font-style: normal; transition: opacity .25s var(--ease); }
.lp__mk.is-under i { opacity: 0; }
.lp__mk:nth-of-type(1) i { left: 50%; bottom: 16px; translate: -50% 0; }
.lp__mk:nth-of-type(2) i { left: 16px; top: 50%; translate: 0 -50%; }
.lp__mk:nth-of-type(3) i { left: 50%; top: 16px; translate: -50% 0; }
.lp__mk:nth-of-type(4) i { right: 16px; top: 50%; translate: 0 -50%; }
.lp__mid { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: min(460px, 56%); text-align: center; display: grid; }
.lp__panel { grid-area: 1 / 1; opacity: 0; translate: 0 8px; transition: opacity .4s var(--ease), translate .6s var(--ease); }
.lp__panel.on { opacity: 1; translate: none; transition-delay: .1s; }
.lp__panel h3, .lp__list h3 { margin: 12px 0; font-size: clamp(38px, 4vw, 60px); font-weight: 300; letter-spacing: -.055em; line-height: 1; }
.lp__panel p, .lp__list p { color: var(--charcoal); font-size: 16px; line-height: 1.5; }
.lp__start { position: relative; z-index: 2; display: flex; gap: 14px; align-items: center; justify-content: center; width: fit-content; margin: 40px auto 0; padding: 12px 20px; border-radius: 999px; font-size: 15px; }
.lp__start b { font-weight: 400; }
.lp__list { display: none; }
@media (max-width: 860px) {
  .lps { padding: 20px 12px 24px; }
  .lp { display: none; }
  .lp__list { position: relative; z-index: 1; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .lp__list li { padding: 22px 20px; border-radius: 20px; }
  .lp__list h3 { margin: 8px 0 6px; font-size: 30px; }
  .lp__list p { font-size: 15px; }
  .lp__start { margin-top: 16px; flex-wrap: wrap; justify-content: flex-start; border-radius: 18px; }
}

/* --------------------------------------------------------- 07 founder */
.fn { position: relative; border-radius: 28px; background: var(--cloud); padding: clamp(24px, 5vw, 80px); display: grid; grid-template-columns: 34% 1fr; align-items: center; }
.fn__pic { aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #1b1b1c; }
.fn__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* the sheet overlaps the portrait so the frost has something to blur */
.fn__note { position: relative; margin-left: -10%; padding: clamp(28px, 3.6vw, 56px); border-radius: 26px;
  background: rgba(255,255,255,.44); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.45), 0 12px 36px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); }
.fn__note h3 { margin: 18px 0 22px; font-size: clamp(30px, 3vw, 46px); font-weight: 300; letter-spacing: -.045em; line-height: 1.05; }
.fn__body { max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--charcoal); }
.fn__body + .fn__body { margin-top: 14px; }
.fn__sign { display: flex; align-items: end; justify-content: space-between; gap: 20px 32px; margin-top: 34px; flex-wrap: wrap; }
.fn__name { position: relative; font-size: 34px; font-weight: 300; letter-spacing: -.05em; line-height: 1; padding-bottom: 10px; }
.fn__name svg { position: absolute; left: -4px; bottom: -6px; width: 150px; height: 18px; overflow: visible; }
.fn__name path { fill: none; stroke: var(--obsidian); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .6s; }
.fn.is-in .fn__name path { stroke-dashoffset: 0; }
.fn__facts { display: flex; gap: 24px; flex-wrap: wrap; }
.fn__facts div { display: grid; gap: 6px; }
.fn__facts strong { font-size: 26px; font-weight: 300; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .fn { grid-template-columns: 1fr; padding: 14px; } .fn__pic { aspect-ratio: 4 / 5; } .fn__note { margin: -72px 10px 0; } }

/* ------------------------------------------------------------ footer
   Tier 1, the ask: Cloud, "Let's talk." beside a numbered liquid-glass form
   (spend in USD, picked with pills). Tier 2, the panel: an inset Obsidian
   card with the wordmark cropped faintly by its top edge. */
.ft { position: relative; z-index: 1; }
.fa { position: relative; background: var(--cloud); padding: clamp(80px, 10vw, 128px) 0 clamp(72px, 9vw, 112px); }
.fa__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.fa__ask { grid-column: 1 / 3; display: grid; gap: 22px; align-content: start; }
.fa__big { font-size: clamp(64px, 8.6vw, 148px); font-weight: 200; letter-spacing: -.065em; line-height: .9; margin-top: 8px; }
.fa__big span { color: var(--smoke); }
.fa__line { font-size: clamp(22px, 2vw, 30px); font-weight: 300; letter-spacing: -.035em; line-height: 1.2; max-width: 22ch; margin-top: 10px; }
.fa__note { color: var(--ash); font-size: 15px; line-height: 1.55; max-width: 38ch; }
.fa__form { grid-column: 3 / 5; display: grid; gap: 2px; padding: 24px; border-radius: 24px;
  background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.45), 0 12px 36px rgba(0,0,0,.10); }
.fa__f { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(11,11,12,.12); transition: border-color .24s var(--ease); }
.fa__f:focus-within { border-color: var(--obsidian); }
.fa__f--last { border-bottom: 0; }
.fa__n { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--ash); }
.fa__f input { width: 100%; min-width: 0; padding: 8px 0; border: 0; background: none; outline: none; font: 400 17px/1.3 var(--sans); color: var(--obsidian); }
.fa__f input::placeholder { color: var(--smoke); }
.fa__f.is-bad { border-color: var(--obsidian); }
.fa__f.is-bad .fa__n { color: var(--obsidian); }
.fa__spend { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.fa__spend .label { display: flex; width: 100%; margin-bottom: 4px; }
.fa__spend button { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; height: 34px; padding: 0 14px; border-radius: 999px; font: 500 12px/1 var(--sans); color: var(--obsidian); background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--silver); transition: background-color .24s var(--ease), color .24s var(--ease); }
.fa__spend button.on { background: var(--obsidian); color: var(--paper); box-shadow: none; }
.fa__send { justify-self: start; margin-top: 14px; }
.fa__err { min-height: 1.2em; font-size: 13px; color: var(--charcoal); }

.fp-wrap { background: var(--cloud); padding: 0 12px 12px; }
.fp { position: relative; overflow: hidden; border-radius: 28px; background: var(--obsidian); color: var(--paper); padding: clamp(100px, 12vw, 170px) 0 28px; }
.fp .label { color: var(--ash); }
.fp__ghost { position: absolute; left: 3%; right: 3%; top: 0; color: #1C1C1E; line-height: 0; translate: 0 -40%; pointer-events: none; transition: translate 1.6s var(--ease); }
.fp__ghost svg { display: block; width: 100%; height: auto; }
.ft.is-in .fp__ghost { translate: 0 -46%; }
.fp__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.fp__say { grid-column: 1 / 3; font-size: clamp(24px, 2.4vw, 36px); font-weight: 300; line-height: 1.16; letter-spacing: -.035em; color: #5A5A5E; max-width: 22ch; }
.fp__say b { font-weight: 400; color: var(--paper); }
.fp__links { grid-column: 3; display: grid; align-content: start; }
.fp__links a { width: fit-content; font-size: clamp(20px, 1.8vw, 28px); font-weight: 300; letter-spacing: -.03em; line-height: 1.5; }
.fp__side { grid-column: 4; display: grid; align-content: start; gap: 28px; border-left: 1px dotted var(--charcoal); padding-left: var(--gap); }
.fp__side .label { display: flex; margin-bottom: 10px; }
.fp__side a { display: block; width: fit-content; font-size: 15px; line-height: 1.9; color: #C9C9CD; transition: color .24s var(--ease); }
.fp__side a:hover { color: var(--paper); }
.fp__mail { grid-column: 1 / 3; margin-top: 48px; display: grid; gap: 14px; }
.fp__mail a { width: fit-content; font-size: clamp(30px, 3.8vw, 60px); font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.fp__mail .label { display: flex; }
.fp__legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.fp__up { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--paper); box-shadow: inset 0 0 0 1px var(--charcoal); transition: box-shadow .24s var(--ease); }
.fp__up:hover { box-shadow: inset 0 0 0 1px var(--paper); }
.fp__up svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 860px) {
  .fa__in, .fp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa__ask, .fa__form, .fp__say, .fp__mail { grid-column: 1 / -1; }
  .fp__links { grid-column: 1; } .fp__side { grid-column: 2; }
  .fp__mail { margin-top: 0; }
}

/* ------------------------------------------------------------ cursor
   A small liquid-glass lens that trails the pointer and stretches the way
   you move; a fine dot marks the exact point (it inverts over dark). It
   grows over anything clickable. Fine pointers only; touch is untouched. */
html.cur-on, html.cur-on * { cursor: none !important; }
.cur { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
html.cur-on .cur.is-in { opacity: 1; }
.cur__lens, .cur__dot { position: fixed; left: 0; top: 0; will-change: transform; }
.cur__lens { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(3px) saturate(180%) contrast(1.1); backdrop-filter: blur(3px) saturate(180%) contrast(1.1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.4), 0 6px 18px rgba(0,0,0,.16);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease); }
.cur.is-hot .cur__lens { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cur.is-down .cur__lens { width: 44px; height: 44px; margin: -22px 0 0 -22px; transition-duration: .12s; }
.cur__dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }

/* reveals: fade and a 12px rise, 600ms */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- tablet: 2 cols */
@media (max-width: 1023px) {
  .gridlines .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gridlines i:nth-child(n+3) { display: none; }
  .gridlines i:nth-child(2)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; right: calc(var(--gap) / -2); background: var(--silver); }
  .gridlines--dark i:nth-child(2)::after { background: var(--line-dark); }
  .shead, .mf__in, .case { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shead .h1, .mf__h { grid-column: 1 / -1; }
  .shead .lead { grid-column: 2; }
  .shead .label { grid-column: 1 / -1; padding-top: 0; }
  .mf .label { grid-column: 1 / -1; padding-top: 0; }
  .mf__p--1 { grid-column: 1; } .mf__p--2 { grid-column: 2; }
  .case__media { grid-column: 1 / -1; }
  .case__info { grid-column: 1 / -1; padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .case__info > * { grid-column: auto; }
}
/* --------------------------------------------------------- phone: 1 col */
@media (max-width: 759px) {
  :root { --gap: 16px; --nav: 64px; }
  .gridlines .wrap { grid-template-columns: 1fr; }
  .gridlines i:nth-child(n+2) { display: none; }
  .gridlines i:first-child::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; right: calc(var(--gap) / -2); background: var(--silver); }
  .gridlines--dark i:first-child::after { background: var(--line-dark); }
  .shead, .mf__in, .case { grid-template-columns: 1fr; }
  .shead .lead, .mf__p--1, .mf__p--2 { grid-column: 1; }
  .shead .h1 { font-size: 40px; }
  .case__info { grid-template-columns: 1fr; }
  .sb { grid-template-columns: 1fr; } .sb__media { display: none; } .sb__list { grid-column: 1; }
  .sb__item { min-height: 0; padding-block: 28px 44px; border-top: 1px solid var(--silver); opacity: 1 !important; }
  .sb__item h3 { font-size: 44px; }
  .sb__ph { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; margin-bottom: 20px; }
  .sec { padding: 72px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__me, .hero__card { transition: none; }
  .is-live .hero__shape, .is-live .hero__card { animation: none; }
  [data-fill] .w { opacity: 1; }
  .fn__name path { stroke-dashoffset: 0; transition: none; }
  [data-sharpen] .sw { opacity: 1; filter: none; }
  .btn, .btn__in, .btn__chip { transition: none; }
}