/* KLVR finishing system: paper, light and purposeful movement. */
::selection { background: var(--blue); color: white; }
[hidden] { display: none !important; }
html { scroll-padding-top: 7rem; }
button, summary { font-family: var(--sans); cursor: pointer; }
button, input, select, textarea { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.skip-link { position: fixed; z-index: 120; left: 1rem; top: 1rem; padding: 1rem 1.5rem; border-radius: 99px; color: white; background: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.nav { position: sticky; top: 0; z-index: 50; background: rgba(245,242,235,.91); backdrop-filter: blur(20px); transition: box-shadow .3s; }
.nav.is-scrolled { box-shadow: 0 8px 30px rgba(11,11,13,.045); }
.reading-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform: scaleX(var(--progress,0)); transform-origin: left; background: linear-gradient(90deg,var(--coral),var(--violet),var(--blue)); pointer-events: none; }
.nav-links a { padding: .8rem 0; }
.nav-links a::after { bottom: .3rem; }
.nav-links a[aria-current="location"]::after { right: 0; background: var(--blue); }
.menu { width: auto; min-width: 5.6rem; gap: .6rem; padding: 0 1rem; list-style: none; user-select: none; }
.menu::-webkit-details-marker { display: none; }
.menu-lines i { transition: transform .3s; }
.site-menu[open] .menu-lines i:first-child { transform: translateY(2.5px) rotate(45deg); }
.site-menu[open] .menu-lines i:last-child { transform: translateY(-2.5px) rotate(-45deg); }
.menu-panel { position: absolute; top: calc(100% + .65rem); right: var(--gutter); width: min(28rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 7rem); overflow-y: auto; padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: 1.3rem; background: var(--paper); box-shadow: 0 1.5rem 4rem rgba(11,11,13,.18); }
.menu-panel > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem .3rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; transition: color .2s; }
.menu-panel > a:hover, .menu-panel > a:focus-visible { color: var(--blue); }
.menu-panel > a > span:last-child { font-size: .72rem; }
.menu-panel .menu-brief { color: var(--blue); font-weight: 800; }
.menu-panel .menu-email { border: 0; font-size: .8rem; }
.button span[aria-hidden], .package-link span:last-child { display: inline-block; transition: transform .3s var(--ease); }
.button:hover > span[aria-hidden], .button:focus-visible > span[aria-hidden], .package-link:hover span:last-child { transform: translate(2px,-2px); }
.button.dark:hover { background: var(--blue); border-color: var(--blue); }
.hero { overflow: clip; }
.hero-kicker { position: relative; z-index: 4; color: #56534f; }
.hero::before, .hero::after { border-radius: 50%; width: min(55vw,48rem); height: min(50vw,42rem); max-height: none; top: 22%; opacity: .13; animation: ambient-drift 18s ease-in-out infinite alternate; }
.hero::after { animation-delay: -9s; }
.hero-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.orbit { position: absolute; left: 50%; top: 48%; width: 95%; height: 50%; border: 1px solid rgba(85,73,140,.1); border-radius: 50%; transform: translate(-50%,-50%) rotate(-16deg); animation: orbit-drift 26s ease-in-out infinite alternate; }
.orbit-two { width: 110%; height: 65%; transform: translate(-50%,-50%) rotate(16deg); animation-direction: alternate-reverse; animation-delay: -8s; }
.orbit-three { width: 80%; height: 78%; border-color: rgba(85,73,140,.065); animation-delay: -16s; }
.light-point { position: absolute; width: .5rem; aspect-ratio: 1; background: var(--violet); border-radius: 50%; opacity: .5; box-shadow: 0 0 0 .5rem rgba(138,92,255,.07); animation: ambient-drift 16s ease-in-out infinite alternate; }
.point-one { left: 14%; top: 36%; }
.point-two { right: 16%; bottom: 19%; background: var(--coral); animation-delay: -8s; }
@keyframes ambient-drift { to { transform: translate3d(5vw,3vw,0) scale(1.13); } }
@keyframes orbit-drift { to { transform: translate(-50%,-50%) rotate(9deg) scale(1.07); } }
.fan { transition: transform .65s var(--ease); transform: rotateX(var(--fan-x,0deg)) rotateY(var(--fan-y,0deg)); }
.scene { animation-fill-mode: backwards; transition: transform .65s var(--ease), box-shadow .4s; }
.scene:hover, .scene:focus-visible { transform: translate3d(var(--x),calc(var(--y) - 1.15rem),calc(var(--z) + 40px)) rotateY(var(--r)); box-shadow: 0 2rem 4rem rgba(16,15,18,.32); z-index: 4; }
.scene::after { content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg,transparent 25%,rgba(255,255,255,.15),transparent 65%); opacity: 0; transition: opacity .4s; }
.scene:hover::after, .scene:focus-visible::after { opacity: 1; }
.outcomes { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1rem; white-space: normal; line-height: 1.6; }
.outcomes span { display: inline-flex; align-items: center; gap: 1rem; }
.outcomes span + span::before { content: ''; width: 3px; height: 3px; background: currentColor; opacity: .4; border-radius: 50%; }
.hero-utility { margin-top: 2.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .65rem; color: #625e58; }
.motion-toggle { border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.5); min-height: 2.75rem; padding: .5rem .9rem; display: inline-flex; gap: .5rem; align-items: center; color: var(--ink); font-size: .65rem; }
.motion-symbol { font-size: 1rem; }
.chapter, .care, .work-section, .brief { position: relative; isolation: isolate; overflow: clip; }
.chapter::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 86% 20%,rgba(138,92,255,.12),transparent 55%); }
.tile { position: relative; overflow: hidden; }
.tile::after { content: '↗'; position: absolute; right: 1rem; top: 1rem; font-family: var(--sans); opacity: .6; transition: transform .4s; }
.tile:hover::after { transform: translate(3px,-3px); }
.package { transition: background .4s, color .4s, box-shadow .4s, opacity .75s, transform .75s var(--ease); }
.package p, .care-card p { opacity: .8; }
.package-no, .package-price span { opacity: .72; }
.package:nth-child(3):hover { background: #6940d5; }
.package:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.package-link { min-height: 3rem; opacity: 1; }
.package, .care-card { background-image: radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.16),transparent 70%); }
.care-card { transition: box-shadow .4s, border-color .4s; }
.care-card:hover { border-color: rgba(36,92,255,.45); box-shadow: 0 .8rem 2.5rem rgba(11,11,13,.065); }
.section-head .eyebrow, .scope-note { color: #69655f; }
.eyebrow, .commerce .eyebrow, .work-section .section-head .eyebrow { color: #adaab3; }
.section-head .eyebrow { color: #69655f; }
.work-section .section-head .eyebrow { color: #adaab3; }
.commerce::before, .commerce::after, .ai-shell::before { pointer-events: none; animation: ambient-drift 20s ease-in-out infinite alternate; }
.commerce::after { animation-delay: -10s; }
.product::before { animation: product-turn 13s ease-in-out infinite alternate; }
.product:nth-child(3n)::before { animation-delay: -5s; }
.product:nth-child(3n + 1)::before { animation-delay: -9s; }
@keyframes product-turn { to { transform: rotate(35deg) scale(.9); border-radius: 58% 42% 35% 65%; } }
.product-count { animation: badge-float 7s ease-in-out infinite; }
@keyframes badge-float { 50% { transform: translateY(-10px) rotate(3deg); } }
.call-status { color: #b6bcca; }
.call-demo::after { content: ''; position: absolute; width: 17rem; height: 17rem; border: 1px solid rgba(128,163,255,.18); border-radius: 50%; left: 50%; top: 44%; transform: translate(-50%,-50%); animation: signal-ring 4s ease-out infinite; pointer-events: none; }
@keyframes signal-ring { from { opacity: .7; transform: translate(-50%,-50%) scale(.55); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.3); } }
.case { transition: border-color .4s; border: 1px solid rgba(255,255,255,.09); }
.case:hover, .case:focus-visible { border-color: rgba(255,255,255,.4); }
.case-top { color: #c1bdc9; align-items: start; }
.case-bottom span { color: #bbb7c2; }
.case::after { position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%); pointer-events: none; font-family: var(--serif); font-size: clamp(4rem,8vw,9rem); letter-spacing: -.07em; color: rgba(255,255,255,.84); transition: transform .7s var(--ease); }
.music-case::after { content: 'CHEFF'; }
.shop-case::after { content: 'ESTRA'; color: #fff8ee; }
.case:hover::after { transform: translate(-50%,-50%) rotate(-3deg) scale(1.04); }
.brief::before { content: ''; position: absolute; z-index: -1; width: 55vw; height: 55vw; right: -25vw; top: -25vw; border: 1px solid rgba(11,11,13,.13); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(11,11,13,.03),0 0 0 10rem rgba(11,11,13,.025); }
.field { min-width: 0; }
.field label { color: #bbbcc3; font-size: .68rem; }
.field input, .field select, .field textarea { transition: border-color .25s, background .25s; }
.field input::placeholder, .field textarea::placeholder { color: #93939e; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--acid); }
.field select { padding-right: 1.25rem; text-overflow: ellipsis; }
.form-note { margin: 1rem 0 0; color: #aaaab4; font-size: .75rem; text-align: center; line-height: 1.6; }
.form-note a { color: white; text-decoration: underline; text-underline-offset: 4px; }
.form-status { margin: 1.25rem 0 0; padding: 1rem; border: 1px solid rgba(199,255,48,.4); border-radius: .65rem; color: #e3ff95; font-size: .85rem; line-height: 1.6; }
.form-status[data-state="error"] { color: #ffd0c8; border-color: rgba(255,113,88,.5); }
.brief-form button:disabled { opacity: .65; cursor: wait; }
.foot a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.foot a:hover { color: var(--acid); }
.reveal, .reveal.in { opacity: 1; transform: none; filter: none; }
.reveal.reveal-ready { opacity: 0; transform: translateY(1.5rem); }
.reveal.reveal-ready.in { opacity: 1; transform: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after, .motion-offscreen, .motion-offscreen *, .motion-offscreen::before, .motion-offscreen::after, .motion-offscreen *::before, .motion-offscreen *::after { animation-play-state: paused !important; }
.motion-paused .scene { animation: none; }
.motion-paused .fan { transform: none; }
.motion-paused .reveal { opacity: 1; transform: none; transition: none; }
.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { transition-duration: .01ms !important; }
@media (min-width: 1600px) { :root { --gutter: max(3rem,calc((100vw - 1500px)/2)); } }
@media (max-width: 1100px) {
  .ai-shell, .brief-wrap { grid-template-columns: minmax(0,1fr); }
  .ai-copy h2, .brief h2 { max-width: 15ch; }
  .call-demo { min-height: 31rem; }
  .case-bottom { align-items: start; flex-direction: column; }
  .case-bottom span { text-align: left; }
  .foot { grid-template-columns: auto 1fr; }
  .foot-nav { flex-wrap: wrap; justify-content: end; gap: .3rem 1rem; }
  .foot-email { grid-column: 1 / -1; }
}
@media (max-width: 850px) { .chapter-grid, .section-head { grid-template-columns: minmax(0,1fr); gap: 2rem; } .chapter-copy { padding-top: 0; } .care-grid { grid-template-columns: minmax(0,1fr); } .care-card { min-height: 20rem; } }
@media (max-width: 720px) {
  html { scroll-padding-top: 6rem; }
  .hero-stage { height: 21rem; }
  .fan, .motion-paused .fan { transform: translateX(-.2rem) scale(.78); }
  .outcomes { overflow: visible; padding: .8rem; font-size: .57rem; gap: .35rem .75rem; border-radius: 1.15rem; }
  .outcomes span { gap: .75rem; }
  .hero-utility { flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; text-align: center; }
  .hero-utility > span { width: 100%; }
  .orbit { width: 150%; }
  .hero::before, .hero::after { width: 75vw; height: 75vw; filter: blur(30px); }
  .section-title, .chapter h2, .commerce h2, .ai-copy h2, .brief h2 { font-size: clamp(2.6rem,11vw,5rem); }
  .commerce-wrap, .section-head, .chapter-grid { grid-template-columns: minmax(0,1fr); }
  .product-count { right: 0; width: 6.5rem; }
  .product-count strong { font-size: 1.7rem; }
  .call-demo { min-height: 28rem; }
  .call-inner { width: 86%; }
  .call-outcome { font-size: .6rem; line-height: 1.6; }
  .case { min-height: 31rem; }
  .case::before { bottom: 8rem; }
  .foot { grid-template-columns: 1fr; }
  .foot > a { justify-self: center; }
  .foot-nav { justify-content: center; }
  .foot-email { grid-column: auto; }
}
@media (max-width: 440px) { .nav { gap: 1rem; } .nav .button { width: auto; } .hero-stage { height: 19rem; } .tiles { grid-template-columns: 1fr 1fr; gap: .6rem; } .tile strong { font-size: 1.65rem; } .tile span { font-size: .57rem; } .tile::after { top: .65rem; right: .65rem; } .case-top { font-size: .57rem; letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .reveal.reveal-ready { opacity: 1; transform: none; } }