/* Hayk Babayan — portfolio v2. Loader from nakatomiagency.com; structure from rachelchen.tech. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; scroll-behavior: auto; } .lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--hk-paper); color: var(--hk-ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.55; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-loading { overflow: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--hk-accent); outline-offset: 3px; }
::selection { background: transparent; color: var(--hk-accent); }
::-moz-selection { background: transparent; color: var(--hk-accent); }
img, video, svg { user-select: none; -webkit-user-drag: none; } img::selection, video::selection { background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type (bold display: Archivo) ---------- */
.giant { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" 112; font-size: clamp(52px, 8.6vw, 128px); line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; }
.giant em { font-style: normal; color: var(--hk-accent); }
.display { font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" 110; font-size: clamp(40px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.display em { font-style: normal; color: var(--hk-accent); }
.h2 { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 105; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; }
.h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; }
.feature { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.tile-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.body { font-size: 17px; line-height: 1.6; }
.body-s { font-family: var(--font-small); font-size: 15px; line-height: 1.55; }
.label { font-family: var(--font-small); font-size: 15px; font-weight: 500; line-height: 1.3; }
.mono { font-family: var(--font-small); font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; }
.mono-s { font-family: var(--font-small); font-size: 11px; font-weight: 400; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; }
.soft { color: var(--hk-ink-soft); } .muted { color: var(--hk-ink-muted); }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Loader (Nakatomi) ---------- */
.loader { position: fixed; inset: 0 0 -22vh 0; z-index: 100; padding-bottom: 22vh; background: var(--hk-accent); color: var(--hk-accent-ink); display: grid; place-items: center; overflow: hidden; }
.loader__word { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(48px, 9.6vw, 156px); line-height: 1; letter-spacing: -0.045em; white-space: nowrap; display: flex; margin-top: .12em; }
.loader__word span { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(0.15em); }
.loader__word.in span { animation: l-in 0.55s var(--ease-expo) forwards; animation-delay: calc(var(--i) * 55ms); }
.loader__word.out span { animation: l-out 0.35s var(--ease-expo) forwards; animation-delay: calc(var(--i) * 25ms); }
@keyframes l-in { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes l-out { to { opacity: 0; filter: blur(10px); transform: translateY(-0.2em); } }
.loader__bar { position: absolute; left: 0; bottom: 22vh; height: 2px; width: 100%; background: var(--hk-accent-ink); transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease-out); }
.loader.is-done { animation: l-lift 1.15s cubic-bezier(.76, 0, .24, 1) forwards; }
.loader.is-done .loader__word { visibility: hidden; } .loader.is-done .loader__bar { opacity: 0; }
/* the last word detaches and flies into the hero title while the curtain lifts */
.hero__title.loader__fly { position: fixed !important; left: 0; top: 0; margin: 0; z-index: 101; transform-origin: 0 0; pointer-events: none; will-change: transform; white-space: nowrap; }
/* hero settles from a slight zoom as the curtain clears */
@property --zoom { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero { --zoom: 0; transition: --zoom 1.8s cubic-bezier(.16, 1, .3, 1); }
body.is-loading .hero { --zoom: 0.16; transition: none; }
.hero__title.no-rise .l { transition: none; }
@keyframes l-lift { 0% { transform: translateY(0); border-radius: 0 0 0 0 / 0 0 0 0; } 40% { border-radius: 0 0 50% 50% / 0 0 22vh 22vh; } 100% { transform: translateY(-122vh); border-radius: 0 0 50% 50% / 0 0 22vh 22vh; } }
.loader.is-gone { display: none; }

/* ---------- Nav: floating black pill (nubo.framer.website) ---------- */
.pill { position: fixed; top: 30px; left: 50%; translate: -50% 0; z-index: 60; width: 190px; height: 52px; border-radius: 26px; overflow: hidden; background: #000; color: #fff;
  box-shadow: 0 6px 13px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.21), 0 -14px 10px rgba(0,0,0,.04);
  transition: width .55s var(--ease-expo), height .55s var(--ease-expo), border-radius .55s var(--ease-expo), transform .4s var(--ease-out); }
.pill.is-open { width: 300px; height: var(--pill-h, 380px); border-radius: 28px; }
.pill.is-hidden:not(.is-open) { transform: translateY(-120px); }
.pill__bar { position: absolute; inset: 0 0 auto 0; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 24px; }
.pill__logo { font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; display: inline-flex; }
/* liquid-chrome sheen sweeping through the wordmark (Nubo's logo effect) */
.pill__logo b { font-weight: inherit; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, #fff 0%, #ffffff 18%, #9a9a9a 30%, #ffffff 42%, #ffd6c2 52%, #ff8a55 58%, #ffffff 68%, #8d8d8d 80%, #fff 92%, #fff 100%);
  background-size: 320% 100%; -webkit-background-clip: text; background-clip: text; animation: sheen 5.5s linear infinite; }
@keyframes sheen { 0% { background-position: 100% 0; } 100% { background-position: -220% 0; } }
.pill__logo span { color: var(--hk-accent); }
.pill__toggle { position: relative; width: 24px; height: 24px; display: block; }
.pill__toggle span { position: absolute; right: 0; height: 2px; background: #fff; border-radius: 2px; transition: transform .45s var(--ease-expo), width .45s var(--ease-expo), top .45s var(--ease-expo); }
.pill__toggle span:first-child { top: 8px; width: 20px; }
.pill__toggle span:last-child { top: 15px; width: 12px; }
.pill.is-open .pill__toggle span { top: 11px; width: 20px; }
.pill.is-open .pill__toggle span:first-child { transform: rotate(45deg); }
.pill.is-open .pill__toggle span:last-child { transform: rotate(-45deg); }
.pill__menu { position: absolute; left: 0; right: 0; top: 52px; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 22px 24px 30px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.pill.is-open .pill__menu { opacity: 1; visibility: visible; transition: opacity .35s ease .15s, visibility 0s; }
.pill__links { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pill__links li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo); transition-delay: 0s; }
.pill.is-open .pill__links li { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * 55ms); }
.roll { display: block; overflow: hidden; height: 1.15em; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; }
.roll span { display: block; transition: transform .45s var(--ease-expo); }
.roll span::after { content: attr(data-t); display: block; color: var(--hk-accent); }
.roll:hover span, .roll:focus-visible span { transform: translateY(-50%); } /* span is two lines tall (text + ::after copy), so half = one line */
.pill__foot { display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,.55); text-align: center; }
.pill__foot > span + a { margin-top: 2px; }
.pill__status { display: inline-flex; align-items: center; gap: 8px; }
.pill__foot a { color: #fff; } .pill__foot a:hover { color: var(--hk-accent); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hk-accent); box-shadow: 0 0 0 0 rgba(255,77,0,.5); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,0,.45); } 100% { box-shadow: 0 0 0 10px rgba(255,77,0,0); } }
.pill__scrim { position: fixed; inset: 0; z-index: 55; background: rgba(17,17,17,.18); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.pill__scrim.is-on { opacity: 1; pointer-events: auto; }
@media (max-width: 900px) { .pill { top: 16px; } .pill.is-open { width: min(300px, calc(100vw - 32px)); } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.w { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); transition-delay: calc(var(--i) * 40ms); }
.in .w { opacity: 1; transform: none; }

/* ---------- Hero: cinematic sky + hill, name in the sky, 3D mark on the hilltop (Superintelligent / BridgeAI / Unreal refs) ---------- */
.hero-track { height: 230svh; position: relative; }                       /* pins the hero while the fly-through plays */
.hero { position: sticky; top: 0; height: max(640px, 100svh); padding: 0 var(--gutter); overflow: clip; --mx: 0; --my: 0; --p: 0; color: var(--hk-ink); }
.hero__media { position: absolute; inset: 0; z-index: 0; user-select: none; pointer-events: none; transform: translate3d(calc(var(--mx) * 5px), 0, 0) scale(calc(1.06 + var(--p) * 0.1 + var(--zoom))); transform-origin: 50% 100%; will-change: transform; }
/* hill cutout: fastest layer, in FRONT of the title — the name sinks behind the hill as you scroll */
.hero__hill { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translate3d(calc(var(--mx) * -14px), 0, 0) scale(calc(1.06 + var(--p) * 0.22 + var(--zoom) * 1.4)); transform-origin: 50% 100%; will-change: transform; }
.hero__hill > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__media video { opacity: 0; transition: opacity 1s ease; } .hero__media video.is-ready { opacity: 1; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18)); }

/* HUD: thin ring + frame + crosshairs (Unreal poster) */
.hero__hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: rgba(255,255,255,.55); transform: translate3d(0, calc(var(--p) * 18vh), 0) scale(calc(1 + var(--p) * 0.6)); opacity: calc(1 - var(--p) * 1.6); transform-origin: 50% 50%; will-change: transform, opacity; }
.hud__ring { position: absolute; left: 50%; top: 50%; width: min(78vh, 70vw); height: min(78vh, 70vw); translate: -50% -50%; border: 1px solid currentColor; border-radius: 50%; opacity: .7; }
.hud__frame { position: absolute; inset: 96px var(--gutter) 34px; border: 1px solid currentColor; opacity: .35; }
.hud__x { position: absolute; font: 400 22px/1 var(--font-sans); opacity: .8; }
.hud__x--tl { left: calc(var(--gutter) - 6px); top: 86px; } .hud__x--tr { right: calc(var(--gutter) - 6px); top: 86px; }
.hud__x--bl { left: calc(var(--gutter) - 6px); bottom: 24px; } .hud__x--br { right: calc(var(--gutter) - 6px); bottom: 24px; }

/* title in the sky */
.hero__center { position: absolute; left: 0; right: 0; top: 22%; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 0 var(--gutter); pointer-events: none;
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -7px + var(--p) * 46vh), 0) scale(calc((1 - var(--p) * 0.35) * var(--tscale, 1))); transform-origin: 50% 0; opacity: calc(1.15 - var(--p) * 1.15); will-change: transform, opacity; }
.hero__title { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(48px, 9.6vw, 156px); line-height: 0.95; letter-spacing: -0.045em; color: var(--hk-ink); white-space: nowrap; }
.hero__title .lw { overflow: hidden; padding: 0.08em 0.05em 0.1em; margin: -0.08em -0.05em -0.1em; }
.hero__title { position: relative; }
.hero__title sup, .loader__word sup { position: absolute; left: 100%; top: -0.05em; margin-left: 0.1em; font-size: 0.32em; line-height: 1; letter-spacing: 0; vertical-align: 0; color: var(--hk-accent-ink); transform: rotate(0deg); transform-origin: 50% 48%; }   /* origin = the glyph's ink centre, not the box centre */
/* on landing: one full turn, slow → fast → slow (sharp velocity spike), black → orange */
.hero__title.is-landed sup { color: var(--hk-accent); transform: rotate(360deg); transition: transform 1.5s cubic-bezier(.85, 0, .15, 1), color 1.5s cubic-bezier(.85, 0, .15, 1); }
.is-static .hero__title sup { color: var(--hk-accent); }
.loader__word { position: relative; }
.loader__word sup { opacity: 0; filter: blur(10px); }
.loader__word.in sup { animation: l-in 0.55s var(--ease-expo) forwards; animation-delay: calc(var(--n, 12) * 55ms); }
.loader__word.out sup { animation: l-out 0.35s var(--ease-expo) forwards; }
.lw { display: inline-block; white-space: nowrap; }
.hero__title .l { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-expo); transition-delay: calc(var(--i) * 35ms); }
.hero__title.in .l { transform: none; }
.hero__sub { max-width: 520px; color: var(--hk-ink); opacity: .78; font-size: 17px; line-height: 1.5; }
.hero__copy .hero__sub { display: none; }


/* bottom row */
.hero__row { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 36px; transform: translate3d(0, calc(var(--p) * 120px), 0); opacity: calc(1 - var(--p) * 2.5); will-change: transform, opacity; }
.hero__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero__tag { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hero__tag i { width: 6px; height: 6px; background: var(--hk-accent); } .hero__tag i:first-child { margin-right: 0; }
.hero__cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--hk-ink-bg); color: var(--hk-on-ink); transition: transform .25s var(--ease-out), background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-1px); background: var(--hk-accent); color: #fff; }
.btn--accent { background: var(--hk-accent); color: #fff; } .btn--accent:hover { background: var(--hk-ink-bg); }
.btn--ghost { background: var(--hk-card); color: var(--hk-ink); box-shadow: inset 0 0 0 1px var(--hk-line); } .btn--ghost:hover { background: var(--hk-tint); color: var(--hk-ink); }
.btn--glass { background: rgba(255,255,255,.55); color: var(--hk-ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); } .btn--glass:hover { background: rgba(255,255,255,.85); color: var(--hk-ink); }
.hero__card { display: flex; flex-direction: column; gap: 10px; width: clamp(180px, 15vw, 220px); padding: 10px 10px 12px; border-radius: 18px; background: rgba(255,255,255,.42); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 12px 32px -12px rgba(0,0,0,.3); color: var(--hk-ink); transition: transform .3s var(--ease-out); }
.hero__card:hover { transform: translateY(-3px); }
.hero__card__thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--hk-ink); }
.hero__card__thumb img, .hero__card__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__card__thumb video { opacity: 0; transition: opacity .6s ease; } .hero__card__thumb video.is-ready { opacity: 1; }
.hero__card__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--hk-ink); display: grid; place-items: center; font-size: 12px; padding-left: 3px; }
.hero__card__cap { padding: 0 4px; color: rgba(17,17,17,.75); }
.hero__scroll { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 0 4px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45); z-index: 3; }
.hero__scroll::before { content: ""; width: 10px; height: 16px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; }
.hero__scroll::after { content: ""; position: absolute; top: 4px; width: 2px; height: 4px; border-radius: 1px; background: currentColor; animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(6px); opacity: 0; } 100% { opacity: 0; } }
.hero__scroll:hover { color: var(--hk-accent); }
.hero__year { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }

@media (max-width: 900px) {
  .hero { height: max(600px, 100svh); }
  .hero-track { height: 180svh; }
  .hero__center { top: 20%; gap: 12px; }
  .hero__title { font-size: clamp(40px, 12.5vw, 72px); white-space: normal; line-height: 1; }
  .hero__sub { max-width: 320px; }
  .hud__frame { inset: 80px 16px 16px; } .hud__x { display: none; }
  .hero__row { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 20px; }
  .hero__scroll { display: none; } .hero__year { display: none; }
  .hero__tag { flex-wrap: wrap; gap: 8px; }
}

/* experience list (now in About) */
.exp { display: flex; flex-direction: column; }
.exp li { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 10px 0; align-items: baseline; border-top: 1px solid var(--hk-line); }
.exp li .muted { color: var(--hk-ink-muted); }

@media (max-width: 900px) { .exp li { grid-template-columns: 120px 1fr; gap: 12px; } }

/* ---------- Sheet: everything after the hero rides up over it on a rounded paper panel ---------- */
.sheet { position: relative; z-index: 5; background: var(--hk-paper); border-radius: 36px 36px 0 0; margin-top: -36px; box-shadow: 0 -30px 80px -20px rgba(0,0,0,.35); }

/* ---------- Clients strip (right under the hero, on the sheet) ---------- */
.clients { padding: 40px var(--gutter) 8px; }
.clients__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; padding: 22px 0; border-bottom: 1px solid var(--hk-line); }
.clients__item { font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 1.35vw, 20px); letter-spacing: -0.02em; text-transform: uppercase; color: var(--hk-ink-muted); transition: color .3s ease; }
.clients__row:hover .clients__item { color: var(--hk-ink-muted); } .clients__item:hover { color: var(--hk-ink) !important; }

/* ---------- Showcase (scroll-driven expand to full bleed) ---------- */
.showcase { padding: 24px 0 64px; display: grid; place-items: center; }
.showcase__frame { position: relative; width: min(1000px, calc(100% - 2 * var(--gutter))); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--hk-ink); box-shadow: var(--shadow-tile); transform-origin: center top; will-change: transform, border-radius; }
.showcase__frame video, .showcase__frame img { width: 100%; height: 100%; object-fit: cover; }
.showcase__frame video { opacity: 0; transition: opacity .8s ease; } .showcase__frame video.is-ready { opacity: 1; }
.showcase__caption { position: absolute; left: 24px; bottom: 20px; color: var(--hk-on-ink); opacity: .8; }
.is-static .showcase__frame { transform: none !important; }
@media (max-width: 767px) { .showcase__frame { border-radius: 10px; } }

/* ---------- Nature touches ---------- */
.daisy { width: .42em; height: .42em; margin: 0 .1em; vertical-align: -.02em; }
.about__photo { position: relative; display: block; width: 150px; margin-top: 18px; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-tile); transform: rotate(-3deg); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__photo .mono-s { position: absolute; left: 10px; bottom: 10px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.work__head::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 18px; background: linear-gradient(90deg, var(--hk-line), rgba(120,170,60,.45), var(--hk-line)); }

/* ---------- Statement: words paint in as you scroll through a pinned block ---------- */
.statement { padding: 0 var(--gutter); }
.statement__track { height: 160vh; }
.statement__text { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; margin: 0 auto; max-width: 1100px; }
.statement__inner { display: block; }
.h3-xl { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -0.03em; }
.sw { color: var(--hk-ink); opacity: .14; transition: opacity .25s linear, color .3s ease; }
.sw.on { opacity: 1; } .sw.hot { color: var(--hk-accent); }

/* ---------- Marquee (speed + skew follow scroll velocity) ---------- */
.marquee { overflow: hidden; padding: 28px 0; border-top: 1px solid var(--hk-line); border-bottom: 1px solid var(--hk-line); }
.marquee__track { display: flex; gap: 0; width: max-content; will-change: transform; }
.marquee__item { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 5.6vw, 84px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--hk-ink); }
.marquee__item:nth-child(odd) { color: var(--hk-ink); -webkit-text-stroke: 0; }
.marquee__item i { font-style: normal; color: var(--hk-accent); -webkit-text-stroke: 0; font-size: .6em; }

.work { padding: 120px var(--gutter); }
.work__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 40px; }
.tile { display: flex; flex-direction: column; gap: 14px; }
.grid .tile { transform: translate3d(0, calc(var(--ty, 0) * 1px), 0); will-change: transform; }
.grid .tile:nth-child(even) { --lag: 1; }
.tile__media img, .tile__media video { transform: scale(1.12) translate3d(0, calc(var(--py, 0) * 1%), 0); will-change: transform; }
.tile__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--hk-ink); box-shadow: var(--shadow-tile); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.tile:hover .tile__media { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(0,0,0,.18); }
.tile__media video, .tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__media video { opacity: 0; transition: opacity .6s ease; }
.tile__media video.is-ready { opacity: 1; }
/* stills get a slow push-in so every card has motion; uses `scale` so it never fights the scroll parallax on `transform` */
.tile__media--still img { animation: tile-drift 18s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes tile-drift { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
/* flat: graphic key-art that must stay whole — no base zoom/parallax, just a gentle centred drift */
.tile__media--flat img { transform: none !important; animation: tile-drift-flat 20s ease-in-out infinite; }
@keyframes tile-drift-flat { 0%, 100% { scale: 1; } 50% { scale: 1.02; } }
.tile__badge { position: absolute; left: 16px; bottom: 16px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(8px); }
.tile__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.tile__cap .mono { white-space: nowrap; }
@media (max-width: 767px) { .work { padding: 64px var(--gutter); } .grid { grid-template-columns: 1fr; gap: 40px; } .tile__cap { flex-direction: column; gap: 6px; } }

/* ---------- About ---------- */
.about { padding: 80px var(--gutter) 120px; border-top: 1px solid var(--hk-line); display: grid; grid-template-columns: 240px 1fr; gap: 80px; }
.about__side { display: flex; flex-direction: column; gap: 12px; }
.about__main { display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
.facts { display: flex; gap: 48px; flex-wrap: wrap; }
.facts div { display: flex; flex-direction: column; gap: 6px; }
.awards { display: flex; flex-direction: column; gap: 8px; color: var(--hk-ink-soft); }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 24px; padding: 48px var(--gutter) 64px; } .facts { gap: 24px; } }

/* ---------- Contact / footer ---------- */
.contact { padding: 160px var(--gutter) 96px; display: flex; flex-direction: column; gap: 32px; background: var(--hk-ink-bg); color: var(--hk-on-ink); border-radius: 36px 36px 0 0; margin-top: 60px; }
.contact .soft { color: rgba(247,245,240,.6); } .contact .display .w { transition-duration: 1.2s; }
.contact .btn { background: var(--hk-accent); color: #fff; }
.contact__links { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.footer { position: relative; background: var(--hk-ink-bg); color: var(--hk-on-ink); padding: 0 var(--gutter) 28px; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; padding: 24px 0 64px; border-top: 1px solid rgba(247,245,240,.12); align-items: start; }
.footer__cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer__cta__mail { display: inline-flex; }
.footer__cta .mono { color: rgba(247,245,240,.55); }
.footer__cta__mail { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -0.02em; line-height: 1.05; text-transform: uppercase; background-image: linear-gradient(var(--hk-accent), var(--hk-accent)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--ease-expo); padding-bottom: 6px; }
.footer__cta:hover .footer__cta__mail { background-size: 100% 3px; }
.footer__cta__arrow { font-size: 28px; color: var(--hk-accent); transition: transform .4s var(--ease-out); } .footer__cta:hover .footer__cta__arrow { transform: translate(6px, -6px); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__cols > div { display: flex; flex-direction: column; gap: 10px; }
.footer__cols .muted { color: rgba(247,245,240,.4); margin-bottom: 4px; }
.footer__cols a { transition: color .2s ease; } .footer__cols a:hover { color: var(--hk-accent); }
.footer__clock { font-variant-numeric: tabular-nums; color: var(--hk-accent); }
/* giant name: outlined, with a solid copy revealed through a spotlight that follows the cursor */
.footer__giant { position: relative; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); height: 0.78em; font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" 112; font-size: var(--gfs, 10vw); line-height: 0.82; letter-spacing: -0.035em; white-space: nowrap; text-transform: uppercase; user-select: none; --sx: 50%; --sy: 50%; --r: 0px; }
.footer__giant span { position: absolute; left: var(--gutter); top: 0; display: block; transform: translate3d(0, calc(var(--fy, 0) * 1px), 0); will-change: transform; }
.footer__giant i { font-style: normal; color: var(--hk-accent); -webkit-text-stroke: 0; font-size: .55em; vertical-align: .18em; margin: 0 .12em; }
.footer__giant__fill i { color: var(--hk-on-ink); }
.footer__giant__line { color: transparent; -webkit-text-stroke: 1.5px rgba(247,245,240,.55); }
.footer__giant__fill { color: var(--hk-accent); z-index: 2; -webkit-text-stroke: 1.5px var(--hk-accent); -webkit-mask-image: radial-gradient(circle var(--r) at var(--sx) var(--sy), #000 0%, #000 60%, transparent 100%); mask-image: radial-gradient(circle var(--r) at var(--sx) var(--sy), #000 0%, #000 60%, transparent 100%); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(247,245,240,.12); color: rgba(247,245,240,.6); }
.footer__bottom .muted { color: rgba(247,245,240,.4); }
.footer__top-btn { padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(247,245,240,.25); transition: background-color .2s ease, color .2s ease; }
.footer__top-btn:hover { background: var(--hk-accent); color: #fff; }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr; gap: 32px; } .footer__cols { grid-template-columns: 1fr 1fr; } .footer__giant { height: .85em; } }
@media (max-width: 767px) { .contact { padding: 64px var(--gutter); } }

/* ---------- Case study ---------- */
.cs { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0 0 120px; }
/* ambient brand waves (Izanami): the paper-cut motif drifting behind the page */
.cs__waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.cs > *:not(.cs__waves) { position: relative; z-index: 1; }
.cs__wave { position: absolute; width: 40vw; max-width: 620px; height: auto; opacity: .5; filter: saturate(1.05); will-change: transform; }
.cs__wave.w1 { top: 9%; right: -8vw; transform: rotate(8deg); }
.cs__wave.w2 { top: 27%; left: -6vw; width: 26vw; transform: rotate(-12deg) scaleX(-1); opacity: .4; }
.cs__wave.w3 { top: 45%; right: -10vw; width: 34vw; transform: rotate(-150deg); opacity: .38; }
.cs__wave.w4 { top: 64%; left: -7vw; width: 30vw; transform: rotate(160deg); opacity: .4; }
.cs__wave.w5 { top: 82%; right: -9vw; width: 38vw; transform: rotate(190deg) scaleX(-1); opacity: .36; }
@media (max-width: 700px) { .cs__wave { opacity: .3 !important; width: 60vw; } }
.cs__cover { position: relative; height: max(560px, 82svh); overflow: clip; color: #fff; }
.cs__cover__media { position: absolute; inset: 0; } .cs__cover__media img, .cs__cover__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs__cover__media video { opacity: 0; transition: opacity .8s ease; } .cs__cover__media video.is-ready { opacity: 1; }
.cs__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6)); }
/* a composed cover: flat brand ground + the vector mark bleeding off the right */
.cs__cover__media--art { overflow: hidden; }
.cs__cover__media--art::before { content: ""; position: absolute; right: 2%; top: 4%; width: 42vw; height: 42vw; max-width: 680px; max-height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(205,255,34,.14), rgba(205,255,34,0) 64%); }
.cs__cover__media--art .cs__art { position: absolute; inset: 9% 6% auto auto; translate: none; height: min(50%, 27vw); width: auto; max-width: none; object-fit: contain; }
@media (max-width: 900px) { .cs__cover__media--art .cs__art { height: 30%; inset: 12% 6% auto auto; } }

.cs__cover__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.cs__back { position: fixed; left: var(--gutter); top: 42px; z-index: 55; color: #fff; mix-blend-mode: difference; opacity: .85; } .cs__back:hover { opacity: 1; }
.cs__eyebrow { opacity: .8; }
.cs__title { text-shadow: 0 2px 40px rgba(0,0,0,.6); font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" 108; font-size: clamp(40px, 7.4vw, 120px); line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; max-width: 14ch; overflow: hidden; padding: 0.06em 0.06em 0.1em; margin: -0.06em -0.06em -0.1em; }
.cs__title .l { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-expo); transition-delay: calc(var(--i) * 25ms); } .cs__title.in .l { transform: none; }
.cs__intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px 80px; padding: 72px var(--gutter) 24px; align-items: start; }
.cs__intro .h3 { max-width: 20ch; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; padding: 6px 0 0; }
.meta div { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--hk-line); }
.cs__content { display: flex; flex-direction: column; gap: 72px; padding: 48px var(--gutter) 0; }
.sec { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 24px 80px; scroll-margin-top: 100px; }
.sec__main { display: flex; flex-direction: column; gap: 16px; } .sec .body { color: var(--hk-ink-soft); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.features div { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 14px; background: var(--hk-card); box-shadow: inset 0 0 0 1px var(--hk-line); }
.features .body-s { color: var(--hk-ink-soft); }
.facts--cs { padding: 32px 0; border-top: 1px solid var(--hk-line); border-bottom: 1px solid var(--hk-line); }
.media { display: flex; flex-direction: column; gap: 12px; }
.media__frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--hk-tint); box-shadow: inset 0 0 0 1px var(--hk-line); aspect-ratio: 16 / 10; }
.media__frame img, .media__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.media--pair .media__frame { aspect-ratio: 4 / 3; }
.media__badge { position: absolute; left: 16px; bottom: 16px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; }
.media figcaption { color: var(--hk-ink-muted); }
/* --- the mark draws itself, then floods with colour --- */
.markdraw { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.markdraw__stage { position: relative; display: grid; place-items: center; padding: clamp(40px, 7vw, 96px) 0; border-radius: 14px; background: var(--hk-card); box-shadow: inset 0 0 0 1px var(--hk-line); overflow: hidden; }
.markdraw__stage::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hk-accent) 22%, transparent), transparent 62%); opacity: 0; transition: opacity 1s ease .8s; }
.markdraw.in .markdraw__stage::after { opacity: 1; }
.markdraw__svg { width: clamp(120px, 15vw, 210px); height: auto; overflow: visible; }
/* only the outer silhouette is stroked — the second path is an overlapping shape whose
   boundary would otherwise be traced straight through the middle of the mark */
.markdraw__svg path { fill: transparent; transition: fill .7s ease 1.45s; }
.markdraw__svg path:first-of-type { stroke: var(--hk-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1), stroke .5s ease 1.6s, fill .7s ease 1.45s; }
.markdraw.in .markdraw__svg path { fill: var(--hk-accent); }
.markdraw:not(.markdraw--ink).in .markdraw__svg path:first-of-type { stroke-dashoffset: 0; stroke: transparent; }
/* ink mode: every path draws as a gold stroke and stays a stroke (open line-art, e.g. the katana) */
.markdraw--ink .markdraw__svg { width: clamp(180px, 26vw, 380px); }
.markdraw--ink .markdraw__svg path { fill: none !important; stroke: var(--hk-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s cubic-bezier(.6, 0, .35, 1); }
.markdraw--ink .markdraw__svg path:nth-child(2) { transition-delay: .12s; }
.markdraw--ink .markdraw__svg path:nth-child(3) { transition-delay: .24s; }
.markdraw--ink .markdraw__svg path:nth-child(4) { transition-delay: .36s; }
.markdraw--ink.in .markdraw__svg path { stroke-dashoffset: 0; stroke: var(--hk-accent); }

/* --- speed streaks: the brand at velocity --- */
.streaks { position: relative; display: grid; place-items: center; min-height: clamp(260px, 34vw, 420px); padding: clamp(32px, 5vw, 64px); border-radius: 14px; background: var(--hk-card); box-shadow: inset 0 0 0 1px var(--hk-line); overflow: hidden; text-align: center; }
.streaks__fx { position: absolute; inset: 0; pointer-events: none; }
.streaks__fx i { position: absolute; left: -40%; height: 2px; width: 38%; border-radius: 2px;
  top: calc(8% + var(--n) * 10.5%);
  background: linear-gradient(90deg, transparent, var(--hk-accent), transparent);
  opacity: .5; filter: blur(.4px);
  animation: streak 2.6s cubic-bezier(.45,0,.3,1) infinite;
  animation-delay: calc(var(--n) * -0.42s); }
.streaks__fx i:nth-child(even) { height: 1px; opacity: .3; width: 26%; animation-duration: 3.4s; }
@keyframes streak { 0% { transform: translateX(0); } 100% { transform: translateX(380%); } }
.streaks__copy { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 46ch; }
.streaks__copy .body { color: var(--hk-ink-soft); }

/* --- before / after slider: drag to reveal the retouch --- */
.ba { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ba__frame { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: min(100%, 92svh); margin-inline: auto; border-radius: 14px; overflow: hidden; background: var(--hk-tint); box-shadow: inset 0 0 0 1px var(--hk-line); touch-action: pan-y; cursor: ew-resize; --split: 50%; user-select: none; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 44px; translate: -50% 0; display: grid; place-items: center; background: none; cursor: ew-resize; touch-action: none; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 0 18px rgba(0,0,0,.35); }
.ba__handle i { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); display: grid; place-items: center; transition: transform .25s var(--ease-out); }
.ba__handle i::before, .ba__handle i::after { content: ""; position: absolute; width: 0; height: 0; border: 5px solid transparent; }
.ba__handle i::before { border-right-color: var(--hk-ink); left: 9px; }
.ba__handle i::after { border-left-color: var(--hk-ink); right: 9px; }
.ba__frame:hover .ba__handle i, .ba__handle:focus-visible i { transform: scale(1.08); }
.ba__handle:focus-visible { outline: none; } .ba__handle:focus-visible i { box-shadow: 0 4px 14px rgba(0,0,0,.3), 0 0 0 3px var(--hk-accent); }
.ba__tag { position: absolute; top: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.ba__tag--l { left: 14px; } .ba__tag--r { right: 14px; }
.ba__cap { display: flex; flex-direction: column; gap: 6px; max-width: min(100%, 92svh); margin-inline: auto; width: 100%; }
.ba__label { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.ba__cap .body-s { color: var(--hk-ink-soft); max-width: 60ch; }
.ba__frame.is-hint .ba__before { transition: clip-path .9s var(--ease-out); } .ba__frame.is-hint .ba__handle { transition: left .9s var(--ease-out); }
@media (max-width: 700px) { .ba__frame { max-width: 100%; } }

.cans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.can { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.can__stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 16px; background: var(--hk-card); box-shadow: inset 0 0 0 1px var(--hk-line); overflow: hidden; }
.can__stage::after { content: ""; position: absolute; left: 50%; top: 60%; translate: -50% 0; width: 66%; aspect-ratio: 3 / 1; background: radial-gradient(ellipse, rgba(0,0,0,.13), transparent 70%); }
.can__stage img { position: relative; height: 82%; width: auto; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.14)); transition: transform .45s var(--ease-out); }
.can:hover .can__stage img { transform: translateY(-8px) scale(1.03); }
.can__cap { color: var(--hk-ink-soft); }
@media (max-width: 760px) { .cans { grid-template-columns: repeat(2, 1fr); } }

/* falling sakura petals (ambient) */
.petals { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.petal { position: absolute; top: -8%; width: var(--s); height: auto; opacity: var(--o); will-change: transform; animation: petal-fall var(--dur) linear infinite; animation-delay: var(--delay); }
.petal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 3px rgba(180,120,130,.2)); }
@keyframes petal-fall { 0% { transform: translate3d(0, -12vh, 0) rotate(0deg); } 100% { transform: translate3d(var(--drift), 112vh, 0) rotate(var(--rot)); } }
@media (prefers-reduced-motion: reduce) { .petals { display: none; } }

/* palette chips + trio grid (branding case studies) */
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.chip { display: flex; flex-direction: column; gap: 10px; }
.chip__swatch { display: block; height: 128px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hk-line); }
.chip__name { color: var(--hk-ink); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio figure { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.trio .media__frame { aspect-ratio: 5 / 4; background: #171311; }
.trio figcaption { color: var(--hk-ink-muted); }
@media (max-width: 900px) { .palette { grid-template-columns: repeat(2, 1fr); } .trio { grid-template-columns: 1fr; } }

/* a themed case study wears the client's palette */
.cs--themed .media__frame { background: var(--hk-card); }
.cs--themed .cs__cover::after { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 22%, rgba(0,0,0,.45) 52%, rgba(0,0,0,.88) 100%); }
.cs--themed .cs__eyebrow { color: var(--hk-accent); opacity: 1; }
.cs--themed .features div { background: var(--hk-card); box-shadow: inset 0 0 0 1px var(--hk-line); }
.cs--themed .facts--cs .h2 { color: var(--hk-accent); }
.cs--themed .cs__next { box-shadow: inset 0 0 0 1px var(--hk-line); }

.cs__next { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; margin: 96px var(--gutter) 0; padding: 32px; border-radius: 22px; background: var(--hk-ink-bg); color: var(--hk-on-ink); overflow: hidden; }
.cs__next__media { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; } .cs__next__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.cs__next:hover .cs__next__media img { transform: scale(1.04); }
.cs__next__text { display: flex; flex-direction: column; gap: 14px; } .cs__next__text .display { font-size: clamp(28px, 3.4vw, 52px); }
.cs__next__text .muted { color: rgba(247,245,240,.5); }
.nf { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 140px var(--gutter) 80px; }
@media (max-width: 1000px) { .cs__back { top: 20px; } .cs__intro { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; } .sec { grid-template-columns: 1fr; gap: 12px; } .features { grid-template-columns: 1fr; } .media--pair { grid-template-columns: 1fr; } .cs__next { grid-template-columns: 1fr; margin-top: 64px; } .cs__cover { height: max(480px, 70svh); } }

html.is-dark body { background: var(--hk-ink-bg); } html.is-dark .sheet { background: transparent; }
body { transition: background-color .6s ease; }

/* static/reduced-motion: no pinning, no fly-through */
.is-static .hero-track, .is-static .statement__track { height: auto; }
.is-static .hero, .is-static .statement__text { position: relative; }
.is-static .tile__media--still img { animation: none; }
.is-static .streaks__fx i { animation: none; }
.is-static .markdraw__svg path { fill: var(--hk-accent); stroke: transparent; }
.is-static .markdraw--ink .markdraw__svg path { fill: none !important; stroke: var(--hk-accent); stroke-dashoffset: 0; }
.is-static .ba__before { clip-path: inset(0 50% 0 0); }
.is-static .petals { display: none; }
.is-static .sw { opacity: 1; } .is-static .grid .tile, .is-static .tile__media img, .is-static .tile__media video { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .hero-track, .statement__track { height: auto; } .hero, .statement__text { position: relative; } .sw { opacity: 1; } .hero__media, .hero__hill, .hero__center, .hero__hud, .hero__row { transform: none !important; opacity: 1 !important; filter: none !important; } }

/* ---------- Static / reduced motion ---------- */
.is-static .loader { display: none; }
.is-static .cs__cover { height: 560px; }   /* svh breaks tall full-page screenshots */
.is-static .reveal, .is-static .w { opacity: 1 !important; transform: none !important; transition: none !important; }
.is-static .stage-in, .is-static .hero__title .l, .is-static .cs__title .l { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.is-static .hero__obj img { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader { display: none; }
  .reveal, .w { opacity: 1; transform: none; transition: none; }
  .pill__dot, .pill__logo b { animation: none; }
  .hero__obj img, .hero__scroll::after { animation: none; }
  .stage-in, .hero__title .l, .cs__title .l { opacity: 1; transform: none; filter: none; transition: none; }
}

/* fit cover: light key-art shown whole at its own aspect, no scrim, title set below in ink */
.cs__cover--fit, .is-static .cs__cover--fit { height: auto; color: var(--hk-ink); }
.cs__cover--fit::after, .cs--themed .cs__cover--fit::after { display: none; }
.cs__cover--fit .cs__cover__media { position: relative; aspect-ratio: var(--cover-ar); }
.cs__cover--fit .cs__cover__text { position: relative; left: auto; right: auto; bottom: auto; padding: 40px var(--gutter) 0; }
.cs__cover--fit .cs__title { text-shadow: none; }