/* Fonts are served from this site (Archivo and IBM Plex Mono, SIL Open Font License). */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/archivo-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/archivo-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/plex-mono-400-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/plex-mono-400-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/plex-mono-500-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/plex-mono-500-latin.woff2) format('woff2');
  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;
}

/* Registered so the light can fade smoothly from one image's colors to the next. */
@property --a { syntax: "<color>"; inherits: true; initial-value: #2b2b30; }
@property --b { syntax: "<color>"; inherits: true; initial-value: #2b2b30; }
@property --c { syntax: "<color>"; inherits: true; initial-value: #2b2b30; }
@property --base { syntax: "<color>"; inherits: true; initial-value: #101012; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #e8e8e8; }

:root {
  /* Text colours: white on the room, the site black on the accent colour.
     Archivo: display headings (800, condensed, capitals) and reading text.
     IBM Plex Mono: labels and captions only (13px controls and captions, 12px labels, 11px micro; .1em capitals, .04em captions). */
  --ink: #0a0a0b;
  --white: #fff;
  --dim: rgba(255, 255, 255, .78);
  --hair: rgba(255, 255, 255, .28);
  --accent: #e8e8e8;
  --gutter: 4vw;
  --head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --h1: clamp(3rem, 9.4vw, 10rem);
  --h2: clamp(2.2rem, 4.8vw, 4.8rem);
  --h3: clamp(1.8rem, 3.6vw, 3.6rem);
  --h4: clamp(1.25rem, 2.28vw, 2rem);
  --header-h: 99px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --spring: cubic-bezier(.22, 1, .36, 1);
  transition: --accent 1.1s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--ink); color: var(--white); font: 400 16px/1.55 var(--head); overflow-x: clip; }
img, video, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, .h3, .h4 { margin: 0; font-family: var(--head); line-height: 1.02; }
h1, h2 { font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75, "wght" 800; text-transform: uppercase; letter-spacing: -.005em; line-height: .94; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); font-weight: 600; font-stretch: 85%; letter-spacing: -.01em; }
.h4 { font-size: var(--h4); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--ink); }

/* The room: light cast by whatever picture is in focus. Rendered at quarter size
   and scaled up, since soft gradients lose nothing and paint 16x cheaper. */
.ambient {
  position: fixed; left: 0; top: 0; width: 25vw; height: 25lvh; z-index: -2; pointer-events: none;
  transform: scale(4); transform-origin: 0 0; will-change: transform;
  background:
    radial-gradient(75% 85% at calc(16% + var(--mx, 0) * 12%) calc(22% + var(--my, 0) * 12%), var(--a) 0, transparent 72%),
    radial-gradient(70% 80% at calc(86% + var(--mx, 0) * 10%) calc(28% + var(--my, 0) * 10%), var(--b) 0, transparent 72%),
    radial-gradient(90% 75% at calc(52% - var(--mx, 0) * 12%) calc(98% - var(--my, 0) * 8%), var(--c) 0, transparent 74%),
    var(--base);
  transition: --a 1.1s ease, --b 1.1s ease, --c 1.1s ease, --base 1.1s ease;
}
/* Fine film grain, kept behind the content so photos stay untouched. */
.film {
  position: fixed; inset: -80px; z-index: -1; pointer-events: none; opacity: .13;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: film .7s steps(4) infinite;
}
@keyframes film { 25% { transform: translate(-30px, 22px); } 50% { transform: translate(24px, -36px); } 75% { transform: translate(-12px, -18px); } }

/* Opening: a camera iris, once per visit. */
.iris { display: none; }
html.opening .iris { display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; animation: gone 0s 2.8s forwards; }
.iris-spin { position: absolute; left: 50%; top: 50%; animation: iris-spin 1.45s 1.2s var(--ease) both; }
.iris-spin i { position: absolute; left: 0; top: -160vmax; width: 320vmax; height: 320vmax; background: #060607; border-left: 1px solid rgba(255, 255, 255, .22); transform-origin: 0 50%; transform: rotate(var(--t)) translateX(0); animation: blade 1.45s 1.2s var(--ease) forwards; }
.iris-logo { position: absolute; left: 50%; top: 50%; width: clamp(130px, 15vw, 230px); color: var(--white); transform: translate(-50%, -50%); animation: iris-logo .42s 1.08s ease forwards; }
@keyframes blade { to { transform: rotate(var(--t)) translateX(135vmax); } }
@keyframes iris-spin { to { transform: rotate(50deg); } }
@keyframes iris-logo { to { opacity: 0; transform: translate(-50%, -50%) scale(.82); } }
@keyframes gone { to { visibility: hidden; } }

/* The logo: three shapes that assemble, flinch and rebuild. */
.rs { display: block; width: 100%; height: auto; overflow: visible; }
.p { fill: currentColor; transform-box: fill-box; transform-origin: center; }
html.opening .rs.snap .p, html.landing .rs.snap .p { animation: rs-snap 1s var(--spring) calc(.25s + var(--dl)) both; }
html.opening .rs.snap .p { animation-delay: calc(2.5s + var(--dl)); }
.rs.jolt .p { animation: rs-jolt .7s var(--spring) var(--dl); }
.rs.draw .p { fill-opacity: 0; stroke: #fff; stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rs-draw 1s ease-in-out var(--dl) forwards; }
.rs.scrub .p { transform: translate(calc(var(--x) * var(--q, 0)), calc(var(--y) * var(--q, 0))) rotate(calc(var(--r) * var(--q, 0))) scale(calc(1 - var(--q, 0) * .45)); opacity: calc(1 - var(--q, 0)); }
@keyframes rs-snap { 0% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.5); } 24% { opacity: 1; } 74% { opacity: 1; transform: rotate(calc(var(--r) * -.09)) scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes rs-jolt { 30% { transform: translate(calc(var(--x) * .2), calc(var(--y) * .2)) rotate(calc(var(--r) * .45)) scale(.92); } 70% { transform: rotate(calc(var(--r) * -.09)) scale(1.05); } }
@keyframes rs-draw { 72% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; } }

/* Page change: a quick, quiet crossfade with the header held still. */
@view-transition { navigation: auto; }
.header { view-transition-name: header; }
::view-transition-group(header), ::view-transition-old(header), ::view-transition-new(header) { animation: none; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: page-in .3s ease both; }
@keyframes page-in { from { opacity: 0; } }

/* Pointer */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 1px solid #fff; mix-blend-mode: difference; display: grid; place-items: center; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--white); transition: width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease), opacity .2s, background .2s; opacity: 0; }
.cursor.live { opacity: 1; }
.cursor.link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cursor.off { opacity: 0; }

/* Scroll timecode */
.hud { position: fixed; right: 14px; top: 50%; z-index: 40; writing-mode: vertical-rl; transform: translateY(-50%); font: 400 11px/1 var(--mono); letter-spacing: .1em; color: var(--white); mix-blend-mode: difference; pointer-events: none; display: flex; gap: 12px; align-items: center; }
.hud b { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* Buttons */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-block; font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 18px 26px; border: 1px solid #fff; border-radius: 0; color: var(--white); text-decoration: none; cursor: pointer; background: none; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.btn::before { content: ""; position: absolute; inset: -2px -34%; z-index: -1; background: var(--accent); transform: translateX(-112%) skewX(-35deg); transition: transform .55s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: skewX(-35deg); }
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--accent); }
.btn:active { scale: .95; }

/* Hand-drawn underline: draws itself on when the words light up. */
.scribble {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7.5C50 3.5 96 9.5 150 6S252 3 298 6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% .34em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .12em;
}

/* Header */
.header { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; height: var(--header-h); padding: 0 var(--gutter); color: var(--white); transition: background .3s, height .3s, backdrop-filter .3s, transform .5s var(--ease); }
.header.tuck { transform: translateY(-110%); }
.header.solid { background: rgba(8, 8, 10, .46); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); height: 72px; }
.logo { display: block; width: 86px; transition: width .3s; }
.header.solid .logo { width: 62px; }
.nav { margin-left: auto; margin-right: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; gap: 34px; }
.nav a, .nav button { font: 400 13px/24px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.nav > ul > li { position: relative; }
.nav > ul > li > a, .nav > ul > li > button { position: relative; }
.nav > ul > li > a::after, .nav > ul > li > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav > ul > li:hover > a::after, .nav > ul > li:hover > button::after, .nav li.active > a::after, .nav li.active > button::after { transform: scaleX(1); }
.sub { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); min-width: 170px; margin-top: 8px !important; padding: 16px 20px !important; background: rgba(8, 8, 10, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease); text-align: center; }
.sub::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.sub li + li { margin-top: 8px; }
.sub a:hover { color: var(--accent); }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.head-right { display: flex; align-items: center; gap: 20px; }
.head-right .btn { padding: 14px 20px; }
.icon { display: block; width: 20px; height: 20px; color: inherit; transition: color .2s, transform .3s var(--ease); }
.icon:hover { color: var(--accent); transform: translateY(-2px); }
.burger { display: none; width: 44px; height: 44px; margin-left: auto; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; position: relative; z-index: 2; }
.burger span { position: absolute; left: 8px; right: 8px; height: 2px; background: currentColor; transition: transform .2s, top .2s; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* Kinetic headlines */
.js [data-kinetic]:not(.split) { visibility: hidden; animation: show 0s 2.5s forwards; }
@keyframes show { to { visibility: visible; } }
.kw { display: inline-block; white-space: nowrap; overflow: hidden; padding: .1em .02em .06em; margin: -.1em -.02em -.06em; vertical-align: top; }
.kl { display: inline-block; transform: translateY(115%); font-variation-settings: "wdth" 75, "wght" 800; transition: transform 1s var(--ease), font-variation-settings .22s ease-out; transition-delay: calc(var(--i) * 24ms), 0s; }
.in-view .kl { transform: none; }
html.opening .in-view .kl { transition-delay: calc(1.3s + var(--i) * 24ms), 0s; }

/* Heroes */
.hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; text-align: left; background: #000; }
.hero-small, .hero-medium { min-height: 86svh; }
.hero-home { min-height: 100svh; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero .bg { transform: translateY(calc(var(--scroll, 0) * 14%)) scale(1.06); }
.hero::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); pointer-events: none; }
.shade { position: absolute; inset: 0; background: #000; opacity: .22; }
.hero-text { position: relative; z-index: 1; padding: 40px var(--gutter) 42px; width: 100%; }
.hero-text h1 { max-width: 11em; }
.hero-text p { margin: 22px 0 0; max-width: 34em; font: 400 16px/1.55 var(--head); }
.hero-strip { position: absolute; z-index: 1; inset: auto var(--gutter) 26px; display: flex; justify-content: space-between; font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-strip a { text-decoration: none; }
.hero-strip a span { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* Home */
.light { position: relative; }
.intro { padding: 120px var(--gutter) 120px; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .36fr); gap: 7vw; align-items: start; }
.intro-text p { font: 500 clamp(1.5rem, 3.3vw, 3.1rem)/1.14 var(--head); font-stretch: 88%; font-variation-settings: "wdth" 88, "wght" 500; letter-spacing: -.012em; margin: 0 0 1.05em; }
.intro-text .btn { margin-top: 18px; }
.intro-side { text-align: center; position: sticky; top: 110px; }
.intro-side img { margin: 18px auto 0; width: 100%; max-width: 320px; transform: rotate(2deg); transition: transform .6s var(--ease); }
.intro-side:hover img { transform: rotate(-1.5deg) scale(1.03); }
.js [data-words] .w { opacity: .24; transition: opacity .35s linear; }
.js [data-words] .w.lit { opacity: 1; }
.logos { padding: 70px 0 90px; text-align: center; overflow: hidden; }
.logos h2 { padding: 0 var(--gutter); }
.marquee { display: flex; margin-top: 56px; }
.track { display: flex; flex: none; align-items: center; gap: 88px; padding-right: 88px; animation: slide 8s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.track a { display: block; flex: none; width: calc(var(--w) * .68); }
.track img { width: 100%; max-height: 74px; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; transition: opacity .25s, transform .4s var(--ease); }
.track img { transform: scale(var(--z, 1)); }
.track a:hover img { opacity: 1; transform: scale(calc(var(--z, 1) * 1.08)); }
.track a.boxed img { filter: grayscale(1) invert(1) contrast(1.5); mix-blend-mode: screen; }
.offer { padding: 90px var(--gutter); }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 5vw; align-items: center; }
.offer-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(255, 255, 255, .05); }
.offer-media img, .offer-media .typed { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0s linear 1.3s, transform 0s linear 1.3s; }
.offer-media img.on, .offer-media .typed.on { z-index: 2; opacity: 1; transform: none; transition: opacity 1.3s ease, transform 2.4s cubic-bezier(.2, .7, .2, 1); }
.offer-media .typed { display: flex; align-items: flex-end; padding: clamp(20px, 2.4vw, 32px); background: color-mix(in srgb, var(--accent) 13%, #2a2a2d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); }
.typed span { font: 800 clamp(2.6rem, 5.6vw, 6rem)/.94 var(--head); font-stretch: 75%; font-variation-settings: "wdth" 75, "wght" 800; text-transform: uppercase; }
.offer h2 { margin-bottom: 30px; }
.accordion details { display: flow-root; border-top: 1px solid var(--hair); }
.accordion details:last-child { border-bottom: 1px solid var(--hair); }
.accordion summary { display: flex; align-items: center; gap: 18px; list-style: none; cursor: pointer; padding: 18px 0; font: 600 var(--h4)/1.1 var(--head); font-stretch: 85%; transition: padding .6s cubic-bezier(.4, 0, .2, 1), color .4s ease; }
.accordion summary:hover, details[open] > summary { padding-left: 14px; }
.accordion summary:hover .t, details[open] > summary .t { color: var(--accent); }
.accordion summary .t { flex: 1; transition: color .25s; }
.accordion summary::-webkit-details-marker { display: none; }
.num { opacity: .75; }
.plus { position: relative; flex: 0 0 16px; height: 16px; }
.plus::before, .plus::after { content: ""; position: absolute; background: currentColor; transition: transform .3s var(--ease); }
.plus::before { left: 0; right: 0; top: 7.5px; height: 1px; }
.plus::after { top: 0; bottom: 0; left: 7.5px; width: 1px; }
details[open] .plus::after { transform: rotate(90deg); }
.accordion p { margin: 0 0 22px; padding-left: 14px; max-width: 34em; font-size: 16px; color: var(--dim); }
.contact { padding: 90px var(--gutter) 120px; }
.contact h2 { margin-bottom: 26px; }
.form { max-width: 460px; width: 100%; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend { padding: 0; margin-bottom: 8px; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.form label { display: block; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 26px; }
.form small { font-size: 11px; color: var(--dim); margin-left: 4px; text-transform: none; letter-spacing: .04em; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form input, .form textarea { display: block; width: 100%; margin-top: 8px; padding: 9px 0; background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; font: 16px/1.4 var(--head); color: var(--white); transition: border-color .25s; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.form textarea { resize: vertical; }
.hp { position: absolute !important; left: -9999px; }
.form-status { margin: 16px 0 0; font: 400 13px/1.4 var(--mono); letter-spacing: .04em; min-height: 1.4em; }
.explore { position: relative; display: flex; align-items: center; justify-content: center; min-height: 86svh; overflow: hidden; }
.explore-text { position: relative; text-align: center; padding: 40px var(--gutter); }
.explore-text .btn { margin-top: 44px; }

/* Footer */
.footer { padding: 56px var(--gutter) 22px; overflow: hidden; }
.foot-row { display: flex; justify-content: space-between; gap: 24px; margin-top: 26px; padding-right: 62px; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.foot-row p { margin: 0; }

/* About */
.about { padding: calc(var(--header-h) + 62px) var(--gutter) 90px; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 4vw; align-items: start; }
.about-left { position: sticky; top: 100px; }
.about-right { margin-top: 26vh; }
.about-copy h1 { margin-bottom: 42px; }
.about-copy p { margin: 0 0 1.05em; font: 500 clamp(1.18rem, 1.8vw, 1.7rem)/1.26 var(--head); font-stretch: 88%; font-variation-settings: "wdth" 88, "wght" 500; letter-spacing: -.012em; }

/* Picture reveal: a shutter sliding open. */
.js .tile img, .js .card img, .js .about-left img, .js .about-right img, .js .offer-media { clip-path: inset(0 0 100% 0); }
.js .tile img, .js .card img, .js .about-left img, .js .about-right img { transform: scale(1.18); }
.js .tile.in img, .js .card.in img, .js .about-left.in img, .js .about-right.in img, .js .offer-media.in { clip-path: inset(0); transform: none; transition: clip-path 1s var(--ease) var(--d, 0s), transform 1.3s var(--ease) var(--d, 0s); }
.js .reveal { opacity: 0; transform: translateY(34px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s var(--ease); }

/* Galleries */
.gallery { padding: 40px var(--gutter) 0; }
.gallery.first { padding-top: calc(var(--header-h) + 42px); }
main > .gallery:last-child { padding-bottom: 70px; }
.masonry { columns: 3; column-gap: 9px; position: relative; }
.tile { display: block; margin-bottom: 9px; break-inside: avoid; background: rgba(255, 255, 255, .05); overflow: hidden; transition: opacity .35s ease; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.masonry.ready { columns: auto; }
.masonry.ready .tile { position: absolute; left: 0; top: 0; margin: 0; }
a.tile { cursor: zoom-in; }
@media (hover: hover) {
  .masonry:has(.tile:hover) .tile:not(:hover) { opacity: .36; }
  .js .tile.in:hover img { transform: scale(1.045); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
}

/* Portrait cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px var(--gutter) 80px; }
.card { position: relative; display: block; overflow: hidden; text-decoration: none; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.card .h3 { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 18px; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75, "wght" 800; text-transform: uppercase; line-height: .95; transition: transform .5s var(--ease), font-variation-settings .5s var(--ease); }
.card:hover .h3, .card:focus-visible .h3 { font-variation-settings: "wdth" 100, "wght" 800; }
.js .card.in:hover img { transform: scale(1.05); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.pager { padding: 40px var(--gutter) 30px; }
.pager a { display: inline-block; text-decoration: none; }
.pager small { display: block; font: 400 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pager .h3 { font-weight: 800; text-transform: uppercase; font-stretch: 75%; transition: color .25s; }
.pager a:hover .h3 { color: var(--accent); }
.pager-next { text-align: right; }

/* Video pages */
.page-head { padding: calc(var(--header-h) + 72px) var(--gutter) 64px; }
.page-head h1 { max-width: 11em; }
.vsec { padding: 0 var(--gutter) 90px; }
.vsec > h2 { margin-bottom: 34px; }
.vsec > .label { margin-bottom: 26px; font: 400 13px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.vids { display: grid; gap: 36px 11px; margin: 0 auto 36px; }
.vids:last-child { margin-bottom: 0; }
.cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-left: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin-left: 0; }
.tall.cols-1 { max-width: 300px; }
.tall.cols-2 { max-width: 620px; margin-left: 0; }
.vid { margin: 0; }
.vid h3 { font: 400 13px/1.5 var(--mono); letter-spacing: .04em; margin-bottom: 10px; min-height: 1.5em; }
.frame { position: relative; background: #000; transition: box-shadow .5s ease; }
.vid:hover .frame { box-shadow: 0 0 70px -6px var(--accent); }
.frame iframe, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }

/* Motion: hero entrances */
.inner .hero img.bg { animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { scale: 1.09; } }
.js .hero-text p { animation: copy-in .55s ease .15s both; }
@keyframes copy-in { from { opacity: 0; transform: translateY(8px); } }
html:not(.opening):not(.landing) h1 .kl { transition-duration: .6s, .22s; transition-delay: calc(var(--i) * 10ms), 0s; }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 26%; pointer-events: none; background: linear-gradient(transparent, rgba(255, 255, 255, .075), transparent); animation: scan 7.5s linear infinite; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(480%); } }

/* Motion: viewfinder brackets on anything you can look at */
.tile, .frame { position: relative; }
.tile::after, .card::before, .frame::after {
  content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none; opacity: 0; transform: scale(1.09);
  transition: opacity .18s, transform .5s var(--spring);
  --a1: linear-gradient(#fff 0 0); --l: 24px; --t: 2px;
  background:
    var(--a1) 0 0 / var(--l) var(--t) no-repeat, var(--a1) 0 0 / var(--t) var(--l) no-repeat,
    var(--a1) 100% 0 / var(--l) var(--t) no-repeat, var(--a1) 100% 0 / var(--t) var(--l) no-repeat,
    var(--a1) 0 100% / var(--l) var(--t) no-repeat, var(--a1) 0 100% / var(--t) var(--l) no-repeat,
    var(--a1) 100% 100% / var(--l) var(--t) no-repeat, var(--a1) 100% 100% / var(--t) var(--l) no-repeat;
}
.tile:hover::after, .tile:focus-visible::after, .card:hover::before, .card:focus-visible::before, .frame:hover::after { opacity: 1; transform: none; }
.card { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--spring); }
.icon:active, .burger:active { scale: .85; }

/* Motion: underlines draw on, footer rises, accordion glides */
.js [data-words] .scribble, .js .reveal .scribble { background-size: 0 .34em; transition: background-size .9s var(--ease); }
.js [data-words] .scribble.drawn, .js .reveal.in .scribble { background-size: 100% .34em; }
.foot-mark { width: clamp(58px, 6vw, 84px); margin: 0 auto 30px; color: var(--accent); }
.form label:focus-within { color: var(--accent); }
/* Filmstrip: pinned and scroll-driven on desktop, swiped on phones */
.strip { position: relative; padding-top: 60px; }
.strip.first { padding-top: calc(var(--header-h) + 20px); }
.strip-stick { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.strip-track { position: relative; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); padding: 4px var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip-track::-webkit-scrollbar { display: none; }
.shot { --h: 74svh; position: relative; display: block; flex: none; height: var(--h); width: calc(var(--h) / var(--r)); overflow: hidden; scroll-snap-align: center; background: rgba(255, 255, 255, .05); cursor: zoom-in; transition: opacity .5s ease; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.js .shot { opacity: .42; }
.js .shot.on, .js .shot:hover, .js .shot:focus-visible { opacity: 1; }
.strip.pinned { padding-top: 0; }
.strip.pinned .strip-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.strip.pinned .strip-track { width: max-content; overflow: visible; scroll-snap-type: none; padding-left: calc(50vw - 24vh); padding-right: calc(50vw - 24vh); will-change: transform; }
.strip-foot { display: flex; align-items: center; gap: 18px; padding: 0 var(--gutter); font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.strip-foot a { text-decoration: none; }
.strip-bar { position: relative; flex: 1; height: 1px; background: var(--hair); }
.strip-bar::after { content: ""; position: absolute; inset: -1px 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.size-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 56px var(--gutter) 0; scroll-margin-top: 70px; font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sizes { display: flex; border: 1px solid var(--hair); }
.sizes button { padding: 10px 14px; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background .25s, color .25s; }
.sizes button:hover { color: var(--accent); }
.sizes button[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.size-bar + .gallery { padding-top: 22px; }
.tile::before { content: attr(data-n); position: absolute; z-index: 2; left: 6px; top: 6px; padding: 2px 4px; background: rgba(0, 0, 0, .55); font: 400 11px/1 var(--mono); letter-spacing: .1em; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tile:hover::before, .masonry[data-d="s"] .tile::before { opacity: 1; }
.masonry[data-d="s"] .tile::after { --l: 12px; inset: 5px; }
.shot::after { content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none; opacity: 0; transform: scale(1.09); transition: opacity .18s, transform .5s var(--spring); --a1: linear-gradient(#fff 0 0); --l: 24px; --t: 2px; background: var(--a1) 0 0 / var(--l) var(--t) no-repeat, var(--a1) 0 0 / var(--t) var(--l) no-repeat, var(--a1) 100% 0 / var(--l) var(--t) no-repeat, var(--a1) 100% 0 / var(--t) var(--l) no-repeat, var(--a1) 0 100% / var(--l) var(--t) no-repeat, var(--a1) 0 100% / var(--t) var(--l) no-repeat, var(--a1) 100% 100% / var(--l) var(--t) no-repeat, var(--a1) 100% 100% / var(--t) var(--l) no-repeat; }
.shot:hover::after, .shot:focus-visible::after { opacity: 1; transform: none; }

/* Contact: frosted glass over the room's light */
.contact { position: relative; display: flex; justify-content: center; padding: 110px var(--gutter) 130px; min-height: 0; }
.form.frosted { position: relative; isolation: isolate; width: min(100%, 620px); max-width: none; padding: clamp(26px, 3.8vw, 52px); background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17), inset 0 1px 0 rgba(255, 255, 255, .22), 0 30px 70px -28px rgba(0, 0, 0, .55); }
.form.frosted::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(380px circle at var(--sx, 25%) var(--sy, 15%), rgba(255, 255, 255, .07), transparent 72%); }
.frosted h2 { margin-bottom: 30px; }
.frosted input, .frosted textarea { border-bottom-color: rgba(255, 255, 255, .34); transition: border-color .25s; }
.frosted input:focus, .frosted textarea:focus { border-bottom-color: var(--accent); }
.send { display: flex; align-items: center; gap: 20px; }
.send .form-status { margin: 0; }
.also { margin: 24px 0 0; font: 400 13px/1.5 var(--mono); letter-spacing: .04em; }

/* Video tiles and cinema mode */
.frame { display: block; overflow: hidden; text-decoration: none; }
.frame img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.frame:hover img, .frame:focus-visible img { transform: scale(1.05); }
.frame video.preview { z-index: 1; object-fit: cover; opacity: 0; transition: opacity .35s; }
.frame video.preview.on { opacity: 1; }
.play { position: absolute; z-index: 2; left: 14px; bottom: 14px; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; color: var(--white); background: rgba(8, 8, 10, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s, color .25s, border-color .25s, transform .45s var(--spring); }
.play::before { content: ""; width: 14px; height: 16px; margin-left: 3px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.frame:hover .play, .frame:focus-visible .play { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: scale(1.12); }
.vsec { display: grid; grid-template-columns: minmax(0, .56fr) minmax(0, 1fr); gap: 3vw; align-items: start; }
.vsec-head { position: sticky; top: 100px; }
.num { font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.vsec-head h2 { margin: 12px 0 0; }
main > .sr + .vsec { padding-top: calc(var(--header-h) + 62px); }
.vsec-body .vids { margin: 0 0 36px; }
.vsec-body .vids:last-child { margin-bottom: 0; }
.vsec-body .cols-1 { max-width: min(100%, 118vh); }
.railsec { display: block; padding-left: 0; padding-right: 0; }
.rail-head { display: flex; align-items: flex-end; gap: 18px; padding: 0 var(--gutter); margin-bottom: 22px; }
.rail-head h2 { margin: 0; flex: 0 1 auto; }
.rail-head .num { flex: none; padding-bottom: .4em; margin-right: auto; }
.rail-btns { flex: none; display: flex; border: 1px solid var(--hair); }
.rail-btns button { width: 46px; height: 40px; background: none; border: 0; color: inherit; font: 400 16px/1 var(--mono); cursor: pointer; transition: background .25s, color .25s, opacity .25s; }
.rail-btns button + button { border-left: 1px solid var(--hair); }
.rail-btns button:hover:not(:disabled) { background: var(--accent); color: var(--ink); }
.rail-btns button:disabled { opacity: .35; cursor: default; }
.rail-track { display: flex; align-items: flex-end; gap: 11px; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track.dragging { scroll-snap-type: none; cursor: grabbing; }
.rail-track.dragging .frame { pointer-events: none; }
.rail .vid { flex: none; width: calc(62svh * 9 / 16); scroll-snap-align: start; scroll-margin-left: var(--gutter); }
.th-frame { position: relative; background: #000; box-shadow: 0 30px 140px rgba(0, 0, 0, .6); }
.th-frame iframe, .th-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.th-title { position: absolute; left: 22px; bottom: 22px; right: 90px; margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* Back to top: a button whose ring tracks how far down the page you are */
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(8, 8, 10, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, visibility .3s, transform .45s var(--spring); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 100%; height: 100%; overflow: visible; }
.t-track, .t-on { fill: none; stroke-width: 1.5; }
.t-track { stroke: var(--hair); }
.t-on { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transform: rotate(-90deg); transform-origin: center; }
.t-arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--spring); }
.to-top:hover .t-arrow { transform: translateY(-3px); }
.to-top:active { scale: .9; }

/* Legal + 404 */
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h) + 50px) var(--gutter) 60px; }
.legal h1 { margin-bottom: 26px; }
.legal h2 { font-size: var(--h4); margin: 2em 0 .6em; }
.legal li { margin-bottom: .4em; }
.notfound { min-height: 70vh; display: flex; flex-direction: column; gap: 28px; align-items: center; justify-content: center; text-align: center; padding: 120px var(--gutter) 40px; }

/* Photo viewer */
.lb { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: radial-gradient(75% 75% at 50% 50%, var(--g, #222) 0, #050506 78%); }
.lb[hidden] { display: none; }
.lb img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; box-shadow: 0 30px 120px rgba(0, 0, 0, .55); }
.lb button { position: absolute; background: none; border: 0; color: var(--white); font: 300 42px/1 var(--head); width: 64px; height: 64px; cursor: pointer; }
.lb .x { top: 8px; right: 8px; }
.lb .p { left: 8px; top: calc(50% - 32px); }
.lb .n { right: 8px; top: calc(50% - 32px); }
.lb-count { position: absolute; left: 22px; top: 28px; font: 400 12px/1 var(--mono); letter-spacing: .1em; }

@media (max-width: 800px) {
  :root { --gutter: 6vw; --header-h: 84px; --h1: clamp(2.8rem, 13vw, 6.4rem); }
  .header { gap: 12px; }
  .header.solid { height: 66px; }
  .burger { display: block; }
  .head-right { display: none; }
  .nav { position: fixed; inset: 0; z-index: 1; height: 100dvh; margin: 0; padding: 130px 8vw 40px; background: rgba(8, 8, 10, .97); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
  .nav.open { visibility: visible; opacity: 1; }
  .nav > ul { flex-direction: column; gap: 22px; align-items: flex-start; }
  .nav a, .nav button { font: 800 44px/1 var(--head); font-stretch: 75%; letter-spacing: 0; }
  .nav > ul > li > a::after, .nav > ul > li > button::after { display: none; }
  .sub { position: static; transform: none !important; opacity: 1; visibility: visible; display: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin: 0 !important; padding: 12px 0 0 !important; text-align: left; }
  .sub a { font: 400 15px/1.4 var(--mono); letter-spacing: .1em; }
  .has-sub.open .sub { display: block; }
  .logo { position: relative; z-index: 2; }
  .logo { width: 66px; }
  .header.solid .logo { width: 56px; }
  .nav.open > ul > li { animation: menu-in .7s var(--spring) both; }
  .nav.open > ul > li:nth-child(2) { animation-delay: .07s; }
  .nav.open > ul > li:nth-child(3) { animation-delay: .14s; }
  .nav.open > ul > li:nth-child(4) { animation-delay: .21s; }
  .hero-home { min-height: 56svh; }
  .hero-home .bg { transform: none; }
  .hero-strip { font-size: 11px; letter-spacing: .05em; white-space: nowrap; bottom: 16px; }
  .hero-small, .hero-medium { min-height: 74svh; }
  .intro { padding: 72px var(--gutter); }
  .contact { padding-top: 96px; padding-bottom: 76px; }
  .vsec { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .vsec-head { position: static; }
  .rail-btns { display: none; }
  .rail .vid { width: 58vw; }
  .strip-foot a { display: none; }
  .size-bar .sizes button { padding: 8px 9px; font-size: 11px; }
  .intro-grid, .offer-grid, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .intro-side { order: -1; position: static; }
  .intro-side img { max-width: 230px; }
  .intro-text p { font-size: clamp(1.45rem, 6.2vw, 2.2rem); }
  .about { padding-top: calc(var(--header-h) + 24px); }
  .about-left { position: static; order: -1; max-width: 60%; }
  .about-right { margin-top: 0; max-width: 70%; margin-left: auto; }
  .track { gap: 52px; padding-right: 52px; animation-duration: 6s; }
  .track a { width: calc(var(--w) * .46); }
  .track img { max-height: 54px; }
  .offer, .contact { padding-top: 60px; padding-bottom: 60px; }
  .masonry { columns: 2; column-gap: 4px; }
  .shot { --h: min(62svh, calc(84vw * var(--r))); }
  .strip { padding-top: 36px; }
  .strip.first { padding-top: calc(var(--header-h) + 8px); }
  .tile { margin-bottom: 4px; }
  .cols-2:not(.tall) { grid-template-columns: minmax(0, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr; }
  .foot-row { flex-direction: column; gap: 10px; }
}

@keyframes menu-in { from { opacity: 0; transform: translateX(-40px) rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before { display: none; }
  .rs .p { animation: none !important; transform: none !important; opacity: 1 !important; }
  .inner .hero img.bg, .js .hero-text p { animation: none; }
  .js [data-words] .scribble, .js .reveal .scribble { background-size: 100% .34em; }
  .film, .hud b, .hero-strip a span { animation: none; }
  .track { animation: none; }
  .marquee { flex-wrap: wrap; justify-content: center; }
  .marquee .track { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); gap: 34px 52px; }
  .marquee .track[aria-hidden] { display: none; }
  .js .tile img, .js .card img, .js .about-left img, .js .about-right img, .js .offer-media { clip-path: none; transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js [data-words] .w { opacity: 1; }
  .kl { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  * { transition: none !important; }
}