/* ONYX motion refinement. The original palette, type, content and gestures stay intact. */
:root { --gutter: clamp(1.25rem, 4.2vw, 4.5rem); --hairline: rgba(201,205,212,.16); }
body { isolation: isolate; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--phthalo-bright); outline-offset: 6px; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 80; padding: 1rem; background: var(--bone); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
section, footer, #hero-wrapper { scroll-margin-top: 6rem; }
#video-bg { z-index: -1; }
#video-bg .tint { background: linear-gradient(180deg,rgba(8,9,11,.30),rgba(8,9,11,.44) 45%,rgba(8,9,11,.70)); }
#video-canvas { transition: opacity .65s ease; }
#grain { inset: 0; width: 100%; height: 100%; opacity: .026; animation: none; z-index: 35; }
nav { padding: 1.15rem var(--gutter); min-height: 76px; gap: 1rem; border-bottom: 1px solid transparent; transition: background .35s ease,border-color .35s ease; }
nav.scrolled { background: transparent; border-color: transparent; }
.nav-link { min-height: 44px; display: inline-flex; align-items: center; color: rgba(232,230,225,.76); }
.nav-wordmark { min-height: 44px; display: inline-flex; align-items: center; }
.nav-link[aria-current="location"] { color: var(--bone); }
.nav-link[aria-current="location"]::after { transform: scaleX(1); }
#scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--phthalo); transform: scaleX(0); transform-origin: left; z-index: 45; pointer-events: none; }
#hero-wrapper { height: 280svh; }
#hero-sticky { height: 100svh; min-height: 32rem; }
#hero-main { width: 100%; padding: 5rem var(--gutter); }
.hero-title { width: 100%; font: inherit; }
.hero-line { display: block; font-size: clamp(2rem,7.6vw,6.6rem); line-height: .98; letter-spacing: -.045em; }
#text-bottom { margin-top: .15em; }
#hero-main .eyebrow { color: rgba(232,230,225,.72); margin-bottom: 2rem; }
#hero-subhead { max-width: 33rem; font-size: clamp(1rem,1.5vw,1.15rem); color: rgba(232,230,225,.82); margin-top: 1.8rem; text-wrap: pretty; }
#hero-ctas { margin-top: 2.1rem; gap: .9rem; }
#hero-reveal { filter: none; }
.hero-wordmark { font-family: 'Bricolage Grotesque',sans-serif; font-size: clamp(6rem,24vw,20rem); font-weight: 800; letter-spacing: -.065em; line-height: .9; color: rgba(232,230,225,.92); }
#hero-reveal p { color: rgba(232,230,225,.7); }
#meta-chip { left: var(--gutter); bottom: 2.25rem; font-size: .55rem; letter-spacing: .14em; }
#scroll-indicator { bottom: 2.2rem; }
#scroll-indicator svg { animation: bounce 2.4s var(--ease) infinite; }
.liquid-glass-btn,.ghost-btn { min-height: 50px; justify-content: center; font-size: .65rem; letter-spacing: .15em; padding: 1rem 1.65rem; }
.liquid-glass-btn { background: var(--bone); transition: transform .3s var(--ease),background .3s ease,color .3s ease; }
.liquid-glass-btn:hover { background: #d5e4dc; color: var(--ink); filter: none; }
.liquid-glass-btn:active,.ghost-btn:active { transform: scale(.98); filter: none; }
.ghost-btn { background: rgba(8,9,11,.3); color: var(--bone); }
.ghost-btn:hover { box-shadow: none; background: rgba(23,147,106,.12); }
/* Sweep with a compositor transform instead of moving layout coordinates. */
.liquid-glass-btn::before,.ghost-btn::before { left: -45%; transform: translateX(0) skewX(-22deg); transition: transform .8s var(--ease); }
.liquid-glass-btn:hover::before,.ghost-btn:hover::before { left: -45%; transform: translateX(490%) skewX(-22deg); }
.container { max-width: 84rem; padding-inline: var(--gutter); }
section { padding-block: clamp(5rem,9vw,9rem); }
.section-head { margin-bottom: 3rem; border-color: var(--hairline); }
.section-head h2 { line-height: 1.04; letter-spacing: -.04em; }
.label { color: rgba(201,205,212,.72); }
.reveal { opacity: 1; transform: none; filter: none; }
.motion-ready .reveal { opacity: 0; transform: translate3d(0,24px,0); transition: opacity .8s var(--ease),transform .8s var(--ease); }
.motion-ready .reveal.visible { opacity: 1; transform: none; }
.motion-ready .reveal-d1 { transition-delay: .08s; }
.motion-ready .reveal-d2 { transition-delay: .16s; }
#philosophy { background: linear-gradient(transparent,rgba(8,9,11,.28),transparent); }
#philosophy .grid { gap: clamp(2rem,6vw,6rem); }
#philosophy .body-copy { color: rgba(232,230,225,.86); }
#cards-trigger { position: relative; height: 165svh; }
#wipe-cards { position: sticky; top: 43svh; bottom: auto; z-index: auto; opacity: 1; padding: 2rem var(--gutter) 4rem; pointer-events: auto; }
#wipe-cards .grid { max-width: 75rem; gap: clamp(2rem,4vw,4rem); }
#wipe-cards .card { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
#wipe-cards .num { color: var(--phthalo-bright); margin-bottom: 1.5rem; }
#wipe-cards p { max-width: 34ch; font-size: .95rem; }
/* More opaque surfaces keep moving imagery legible without expensive live backdrop blurs. */
.liquid-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(145deg,rgba(25,28,32,.94),rgba(12,14,17,.89)); border-radius: 16px; border-color: rgba(201,205,212,.16); box-shadow: inset 0 1px rgba(255,255,255,.06),0 16px 40px -24px rgba(0,0,0,.6); }
.liquid-glass::before { opacity: .45; }
.liquid-glass:hover { box-shadow: inset 0 1px rgba(255,255,255,.1),0 20px 44px -24px rgba(0,0,0,.65); }
.liquid-glass-featured { border-color: rgba(109,154,136,.42); }
.tiers { gap: 1.2rem; }
.tier { padding: clamp(1.5rem,2.6vw,2.4rem); display: flex; flex-direction: column; }
.tier .fit { margin-top: auto; line-height: 1.8; color: rgba(201,205,212,.63); }
.tier-time { color: rgba(201,205,212,.65); letter-spacing: .1em; }
.tier ul { margin-bottom: 2rem; }
.addon { margin-top: 1.5rem; }
.works-grid { column-gap: 2.2rem; row-gap: 3.5rem; }
.work .frame { aspect-ratio: 16/10; border-radius: 8px; border: 1px solid var(--hairline); }
.work img { width: 100%; height: 100%; object-fit: cover; }
.work:hover img { transform: scale(1.025); }
.work .cat { color: rgba(201,205,212,.7); font-size: .6rem; line-height: 1.7; }
.work .meta { gap: 1rem; align-items: flex-start; }
.work .ext { min-width: 36px; min-height: 36px; align-items: center; justify-content: center; }
.grid-note { margin-top: -1.5rem; color: rgba(201,205,212,.72); max-width: 52rem; line-height: 1.7; }
#testimonial .quote-card { padding: clamp(1.5rem,6vw,5rem); }
#testimonial { padding-bottom: clamp(2rem, 4vw, 4rem); }
#big-reveal { min-height: auto; padding: clamp(3rem, 6vw, 6rem) var(--gutter) 6rem; }
footer { background: linear-gradient(transparent,rgba(8,9,11,.86) 30%); padding-bottom: max(2rem,env(safe-area-inset-bottom)); }
footer .grid { gap: clamp(2.5rem,7vw,7rem); }
.field input { min-height: 52px; font-size: 16px; background: rgba(17,19,24,.85); border-color: rgba(201,205,212,.22); }
.field input:focus-visible { outline: 2px solid var(--phthalo); outline-offset: 3px; }
.footer-bottom { gap: 1.5rem; border-top: 1px solid var(--hairline); padding-top: 2rem; }
.footer-bottom span { color: rgba(201,205,212,.64); line-height: 1.8; letter-spacing: .1em; }
@media (min-width: 900px) { .tiers { grid-template-columns: 1.12fr 1fr 1fr; } }
@media (min-width: 1100px) { .works-grid .work:nth-child(even) { margin-top: 4rem; } }
@media (max-width: 767px) {
    nav { min-height: 68px; padding-block: .7rem; padding-top: max(.7rem,env(safe-area-inset-top)); }
    .nav-wordmark { font-size: .72rem; letter-spacing: .18em; }
    .nav-links { gap: clamp(.85rem,4vw,1.5rem); }
    .nav-link { font-size: .61rem; letter-spacing: .1em; }
    #hero-wrapper { height: 220svh; }
    #hero-sticky { min-height: 30rem; }
    #hero-main { padding-inline: 1.25rem; }
    .hero-line { font-size: clamp(1.7rem,8.3vw,4rem); letter-spacing: -.045em; }
    #hero-main .eyebrow { font-size: .52rem; letter-spacing: .12em; margin-bottom: 1.7rem; }
    #hero-subhead { max-width: 29ch; font-size: 1rem; line-height: 1.65; margin-top: 1.5rem; }
    #hero-ctas { flex-direction: column; gap: .75rem; margin-top: 1.6rem; width: min(100%,22rem); }
    #hero-ctas a { width: 100%; min-height: 50px; padding-inline: .8rem; font-size: .6rem; letter-spacing: .12em; }
    #meta-chip { bottom: 1.25rem; font-size: .44rem; max-width: 65%; line-height: 1.6; }
    #scroll-indicator { left: auto; right: var(--gutter); bottom: 1.25rem; transform: none; }
    #cards-trigger { height: auto; padding-block: 1rem 3rem; }
    #wipe-cards { position: relative; top: auto; padding-bottom: 0; }
    #wipe-cards .grid { grid-template-columns: 1fr; gap: 2rem; }
    #wipe-cards .card { padding-top: 1.2rem; }
    #wipe-cards .num { margin-bottom: .85rem; }
    #wipe-cards h3 { font-size: 1.5rem; margin-bottom: .75rem; }
    #wipe-cards p { max-width: 42ch; font-size: .95rem; }
    .section-head { margin-bottom: 2.2rem; align-items: flex-start; gap: 1rem; }
    .section-head > .label { max-width: 10rem; text-align: right; line-height: 1.7; }
    .grid-note { margin-top: -.5rem; margin-bottom: 2rem; }
    .addon { padding: 1.5rem; }
    .services-cta { margin-top: 2.5rem; }
    .services-cta .liquid-glass-btn { font-size: .59rem; padding-inline: 1.15rem; }
    #testimonial .attribution { align-items: flex-start; }
    #testimonial .attribution .role { font-size: .58rem; line-height: 1.8; }
    #big-reveal { padding-bottom: 5rem; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-height: 560px) and (orientation: landscape) {
    #hero-sticky { min-height: 100svh; }
    #hero-main { padding-block: 5rem 3rem; }
    .hero-line { font-size: clamp(2rem,5vw,3rem); }
    #hero-main .eyebrow { margin-bottom: .8rem; }
    #hero-subhead { margin-top: .8rem; max-width: 40rem; font-size: .9rem; }
    #hero-ctas { margin-top: 1rem; flex-direction: row; width: auto; }
    #hero-ctas a { width: auto; min-height: 44px; }
    #meta-chip,#scroll-indicator { display: none; }
    #cards-trigger { height: auto; }
    #wipe-cards { position: relative; top: auto; }
}
@media (hover: none) { .work:hover img,.liquid-glass:hover { transform: none; } }
html.motion-reduced { scroll-behavior: auto; }
.motion-reduced #hero-wrapper { height: auto; }
.motion-reduced #hero-sticky { position: relative; }
.motion-reduced #hero-reveal,.motion-reduced #grain { display: none; }
.motion-reduced #cards-trigger { height: auto; }
.motion-reduced #wipe-cards { position: relative; top: auto; }
.motion-reduced .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation: none !important; transition: none !important; }
    #hero-wrapper { height: auto; }
    #hero-sticky { position: relative; }
    #hero-reveal { display: none; }
    #cards-trigger { height: auto; }
    #wipe-cards { position: relative; top: auto; }
    .motion-ready .reveal { opacity: 1; transform: none; }
}
.nav-wordmark .wm-ext { margin-left: .4em; }
@media (max-width: 767px) {
    #video-bg .tint { background: linear-gradient(180deg,rgba(8,9,11,.4),rgba(8,9,11,.54) 45%,rgba(8,9,11,.74)); }
}
.nav-link { min-width: 44px; justify-content: center; }

/* Project inquiry field; all scroll and animation rules remain unchanged. */
.field textarea {
    display: block; width: 100%; min-height: 132px; resize: vertical;
    padding: .85rem 1rem; border: 1px solid rgba(201,205,212,.22); border-radius: 6px;
    background: rgba(17,19,24,.85); color: var(--bone);
    font-family: 'Hanken Grotesk',sans-serif; font-size: 16px; line-height: 1.6;
}
.field textarea::placeholder { color: rgba(201,205,212,.4); }
.field textarea:focus-visible { outline: 2px solid var(--phthalo); outline-offset: 3px; }
.field textarea:not(:placeholder-shown) { background: var(--bone); color: var(--ink); border-color: rgba(237,232,221,.55); }
.form-footer { flex-wrap: wrap; gap: 1rem; }