/* =============================================
   HATCHWAY SOUND · STYLESHEET v4 (UptoData demo)
   "Original" look: the dark, kinetic style of the first version of this demo, brought back for Hatchway Sound.
   Fonts: Bebas Neue (display), Crimson Pro (body), Space Mono (nav, labels, meta, prices).
   Palette: near-black, off-white, amber accent; coral / teal / purple only in the split bar,
   orbs and cover art. Readability fixes over the original: body text 400 weight and 18px+,
   no small text under 12px, every text colour 4.5:1 or better, and a calmer, clearer hero on phones.
   ============================================= */
:root {
  --black: #0D0B09;        /* page */
  --black-2: #13110E;      /* alternate sections */
  --panel: #1C1915;        /* cards, table, inputs */
  --mid: #2A2520;          /* player, sticker card */
  --off-white: #F2EDE4;    /* 17.1:1 on page */
  --text: #DCD6CB;         /* body copy, 13.6:1 on page */
  --muted: #BDB6AA;        /* 9.6:1 on page, 7.4:1 on mid */
  --line: rgba(242,237,228,0.12);
  --line-strong: #8A847A;  /* input borders, 4.6:1 on panel */
  --amber: #E8A020;        /* 8.9:1 on page, 7.9:1 on panel */
  --amber-dark: #C98A14;
  --teal: #1DA882;
  --coral: #D94F2A;
  --purple: #7B5CF0;
  --error: #FF8A6B;        /* 8.6:1 on panel */
  --focus: var(--amber);
  --font-head: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --nav-h: 72px;
  --player-h: 0px;
  --pad: clamp(4rem, 8vw, 6rem);
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --ud-bar-bg: #1C1915; --ud-bar-fg: #F2EDE4; --ud-bar-link: #E8A020; --ud-bar-line: #2A2520;
  --ud-chat-bg: #E8A020; --ud-chat-fg: #0D0B09; --ud-chat-line: #E8A020;
  --ud-pill-lift: var(--player-h);
}

/* === UPTODATA DEMO FURNITURE v1 (4 Oct 2026) ==========================================
   Identical block in every demo's style.css. Do not restyle per site: only set the tokens
   in that site's :root. Text, sizes and positions are the same on all demos.
     --ud-bar-bg / --ud-bar-fg / --ud-bar-link / --ud-bar-line   demo bar colours (AA checked per site)
     --ud-chat-bg / --ud-chat-fg / --ud-chat-line                chat pill colours (AA checked per site)
   --ud-pill-lift (optional) lifts the pill above a fixed bottom bar (Hatchway's audio player).
   Sets --bar-h (34px desktop, 44px on phones) and --safe-bottom.
   ===================================================================================== */
:root { --bar-h: 34px; --ud-font: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --safe-bottom: env(safe-area-inset-bottom, 0px); }
.demo-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 101; height: var(--bar-h);
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: var(--ud-bar-bg); color: var(--ud-bar-fg); border-bottom: 1px solid var(--ud-bar-line);
  font: 400 12.5px/1.2 var(--ud-font); letter-spacing: 0.01em; text-transform: none;
}
.demo-bar a { color: var(--ud-bar-link); display: inline-flex; align-items: center; min-height: var(--bar-h); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.demo-bar a:hover { text-decoration-thickness: 2px; }
.footer-demo { font: 400 13px/1.5 var(--ud-font); letter-spacing: 0; text-transform: none; }
.footer-demo a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.chat-pill {
  position: fixed; right: 1.5rem; bottom: calc(1.5rem + var(--safe-bottom) + var(--ud-pill-lift, 0px)); z-index: 90;
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.2rem;
  background: var(--ud-chat-bg); color: var(--ud-chat-fg); border: 1px solid var(--ud-chat-line); border-radius: 999px;
  font: 600 14.5px/1 var(--ud-font); letter-spacing: 0; text-transform: none; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,0.22);
}
.chat-pill svg { color: currentColor; }
.chat-pill:hover { filter: brightness(1.08); }
.chat-pill[aria-expanded="true"] { display: none; }
@media (max-width: 600px) {
  :root { --bar-h: 44px; }
  .demo-bar > span { display: none; }
  .demo-bar a::before { content: 'Demo site by UptoData · '; color: var(--ud-bar-fg); white-space: pre; text-decoration: none; display: inline-block; }
  .chat-pill { right: 1rem; bottom: calc(1rem + var(--safe-bottom) + var(--ud-pill-lift, 0px)); }
  /* Keep-clear zone: the pill (48px + 16px) never sits over the last button in the first screen or the footer. */
  .ud-keep-clear { padding-bottom: 5rem !important; }
}
/* === END UPTODATA DEMO FURNITURE v1 === */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); background: var(--black); color-scheme: dark; }
body { font-family: var(--font-body); font-size: 1.2rem; line-height: 1.6; color: var(--text); background: var(--black); overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { --ud-pill-lift: var(--player-h); }
body.player-open { --player-h: 80px; padding-bottom: var(--player-h); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--off-white); }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 0.95; color: var(--off-white); letter-spacing: 0.02em; }
h2 { font-size: clamp(2.6rem, 5vw, 3.6rem); margin-bottom: 1rem; }
h3 { font-size: 1.6rem; letter-spacing: 0.03em; }
p + p { margin-top: 1rem; }
strong { color: var(--off-white); font-weight: 500; }

/* --- FOCUS --- */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--amber); color: var(--black); padding: 0.75rem 1rem; font: 700 0.9rem var(--font-mono); text-decoration: none; }
.skip-link:focus-visible { top: 1rem; outline-color: var(--off-white); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.section { background: var(--black); padding: var(--pad) 0; border-top: 1px solid var(--line); }
.section-alt { background: var(--black-2); }
.section-head { max-width: 720px; margin-bottom: 2.5rem; }
.label, .hero-eyebrow { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.1rem; }
.lead { color: var(--text); font-size: 1.25rem; }
.small-note { font-size: 1.02rem; color: var(--muted); margin-top: 1.5rem; }

/* --- NAV (small mono caps with the amber underline, as in the original) --- */
#nav { position: fixed; top: var(--bar-h); left: 0; right: 0; z-index: 100; height: var(--nav-h); background: rgba(13,11,9,0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: top 0.3s ease, background 0.3s ease; }
#nav.scrolled { top: 0; background: rgba(13,11,9,0.96); }
#nav.menu-open { z-index: 102; top: 0; background: var(--black); }
.nav-inner { max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-logo { display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; color: var(--off-white); }
.nav-logo:hover { color: var(--off-white); }
.logo-main { font-family: var(--font-head); font-size: 1.85rem; line-height: 1; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 0.55rem; }
.logo-main::before { content: ''; width: 22px; height: 22px; flex: none; background:
  linear-gradient(var(--amber), var(--amber)) 0 50% / 3px 36% no-repeat, linear-gradient(var(--amber), var(--amber)) 5px 50% / 3px 80% no-repeat,
  linear-gradient(var(--amber), var(--amber)) 10px 50% / 3px 55% no-repeat, linear-gradient(var(--amber), var(--amber)) 15px 50% / 3px 100% no-repeat,
  linear-gradient(var(--amber), var(--amber)) 20px 50% / 2px 40% no-repeat; }
.logo-sub { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-left: 30px; margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 0.1rem; }
.nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem; font: 400 0.78rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--off-white); text-decoration: none; }
.nav-links a::after { content: ''; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 8px; height: 1px; background: var(--amber); transform: scaleX(0); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-links a:hover { color: var(--off-white); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links .nav-cta { background: var(--amber); color: var(--black); margin-left: 0.6rem; padding: 0 1.2rem; border-radius: 999px; font-weight: 700; }
.nav-links .nav-cta::after { display: none; }
.nav-links .nav-cta:hover { background: var(--off-white); color: var(--black); }
.burger { display: none; min-height: 44px; min-width: 44px; padding: 0 0.9rem; gap: 0.55rem; align-items: center; background: transparent; color: var(--off-white); border: 1px solid var(--line-strong); border-radius: 2px; cursor: pointer; font: 400 0.8rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; }
.burger .bars { display: inline-flex; flex-direction: column; gap: 4px; }
.burger .bars span { display: block; width: 16px; height: 2px; background: var(--amber); transition: transform 0.25s ease, opacity 0.2s ease; }
.burger.open .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open .bars span:nth-child(2) { opacity: 0; }
.burger.open .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 101; background: var(--black); background-image: linear-gradient(rgba(242,237,228,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(242,237,228,0.035) 1px, transparent 1px); background-size: 40px 40px; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; }
.mobile-menu.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.mobile-menu ul { text-align: left; min-width: 17rem; padding-top: var(--nav-h); }
.mobile-menu li { border-bottom: 1px solid var(--line); }
.mobile-menu a { display: flex; align-items: center; min-height: 60px; padding: 0 0.25rem; font-family: var(--font-head); font-size: 2.3rem; letter-spacing: 0.03em; color: var(--off-white); text-decoration: none; }
.mobile-menu a:hover { color: var(--amber); }

/* --- BUTTONS: the original shiny amber pill and the thin link pill --- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.8rem 1.8rem; font: 700 0.8rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; }
.btn-amber { background: var(--amber); border-color: var(--amber); color: var(--black); box-shadow: 0 8px 24px rgba(232,160,32,0.3); }
.btn-amber::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-20deg); transition: left 0.7s ease; pointer-events: none; }
.btn-amber:hover { color: var(--black); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(232,160,32,0.45); }
.btn-amber:hover::after { left: 130%; }
.btn-amber:focus-visible { outline-color: var(--off-white); }
.btn-ghost { border-color: var(--line-strong); color: var(--off-white); background: transparent; border-radius: 2px; }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); background: rgba(232,160,32,0.07); }
.btn-outline { border-color: var(--amber); color: var(--amber); background: transparent; border-radius: 2px; }
.btn-outline:hover { background: var(--amber); color: var(--black); }
.btn.full { width: 100%; }

/* --- HERO: grid, drifting glow orbs, particle field, solid amber + outlined name --- */
.hero { position: relative; overflow: hidden; background: var(--black); min-height: min(820px, 100vh); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--bar-h) + var(--nav-h) + 2.5rem) 0 3rem; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.orb1 { width: 420px; height: 420px; background: var(--amber); top: 40px; right: -60px; opacity: 0.5; animation: drift1 8s ease-in-out infinite; }
.orb2 { width: 300px; height: 300px; background: var(--purple); bottom: -40px; left: 30px; opacity: 0.28; animation: drift2 10s ease-in-out infinite; }
.orb3 { width: 220px; height: 220px; background: var(--teal); top: 52%; right: 26%; opacity: 0.26; animation: drift3 12s ease-in-out infinite; }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 20px) scale(1.08); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -25px) scale(0.95); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-15px, 18px); } }
.hero-grid-lines { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(242,237,228,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(242,237,228,0.04) 1px, transparent 1px); background-size: 40px 40px; }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-content { position: relative; z-index: 2; max-width: 1340px; width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.hero-eyebrow { margin-bottom: 1.1rem; }
.hero-name { font-family: var(--font-head); font-weight: 400; font-size: clamp(4.5rem, 11vw, 9.5rem); line-height: 0.9; letter-spacing: 0.02em; color: var(--off-white); margin-bottom: 1.6rem; }
.hn-line { display: block; }
.hn-solid { color: var(--amber); text-shadow: 0 0 14px rgba(232,160,32,0.45), 0 0 42px rgba(232,160,32,0.2); animation: hn-in 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hn-outline { color: transparent; -webkit-text-stroke: 2px var(--off-white); animation: hn-float-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; transition: -webkit-text-stroke-color 0.45s ease, text-shadow 0.45s ease; }
.hn-outline:hover { -webkit-text-stroke-color: var(--amber); text-shadow: 0 0 30px rgba(232,160,32,0.35); }
@keyframes hn-in { from { opacity: 0; transform: translateY(0.3em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes hn-float-in { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
.hero-title { display: block; margin-top: 1.4rem; max-width: 22em; font-family: var(--font-body); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15; letter-spacing: 0; color: var(--off-white); }
.hero-title .hl { font-style: italic; color: var(--amber); }
.hero-tagline { font-size: clamp(1.2rem, 1.5vw, 1.32rem); color: var(--text); margin-bottom: 2rem; max-width: 36em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.8rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { font: 400 0.78rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 0.9rem; border: 1px solid rgba(242,237,228,0.24); border-radius: 2px; color: var(--muted); background: rgba(13,11,9,0.55); }
.tag-a { border-color: var(--amber); color: var(--amber); }

/* --- SPLIT BAR + MARQUEE --- */
.split-bar { display: flex; height: 6px; }
.sb1 { flex: 5; background: var(--amber); } .sb2 { flex: 1; background: var(--coral); } .sb3 { flex: 1; background: var(--teal); } .sb4 { flex: 1; background: var(--purple); }
.marquee-row { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--black); }
.marquee { flex: 1; min-width: 0; overflow: hidden; padding: 0.95rem 0; }
.marquee-track { display: flex; align-items: center; gap: 2.2rem; white-space: nowrap; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track, .motion-off .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-head); font-size: 1.3rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.marquee-track i { font-style: normal; color: var(--amber); font-size: 0.8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.motion-toggle { order: -1; flex: none; min-height: 44px; margin: 0.3rem 0.5rem 0.3rem var(--gutter); padding: 0 1rem; font: 400 0.75rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--off-white); background: var(--black); border: 1px solid var(--line-strong); border-radius: 2px; cursor: pointer; }
.motion-toggle:hover { border-color: var(--amber); color: var(--amber); }
.motion-toggle[hidden] { display: none; }

/* --- TRACKS: 3D coverflow --- */
.tracks-section { padding: var(--pad) 0 3rem; background: var(--black); }
.sec-header { max-width: 720px; }
.sec-header h2 { margin-bottom: 0.6rem; }
.tracks-lead { color: var(--text); font-size: 1.2rem; }
.coverflow-wrap { position: relative; margin: 2.5rem 0 1rem; overflow: hidden; overflow: clip; touch-action: pan-y; }
.coverflow { position: relative; display: flex; gap: 1rem; overflow-x: auto; padding: 1.5rem var(--gutter); scroll-snap-type: x mandatory; }
.cf-item { position: relative; flex: none; width: 250px; height: 320px; scroll-snap-align: center; }
/* perspective on the list, no preserve-3d: each cover is drawn flat in z-index order, so side covers never cut into the middle one */
.cf-ready .coverflow { display: block; overflow: visible; height: 380px; padding: 0; perspective: 1400px; }
.cf-ready .cf-item { position: absolute; top: 30px; left: 50%; margin-left: -125px; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.cf-ready .cf-item.no-anim { transition: none; }
.track-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; text-align: left; font: inherit; color: var(--off-white); background: var(--mid); border: 1px solid rgba(242,237,228,0.14); border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 18px 40px rgba(0,0,0,0.55); transition: box-shadow 0.4s ease, border-color 0.3s ease; }
.track-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 10px; }
.cf-active .track-btn { box-shadow: 0 26px 60px rgba(0,0,0,0.7); border-color: rgba(232,160,32,0.5); }
.track-btn[aria-pressed="true"] { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 26px 60px rgba(0,0,0,0.7); }
.tile-art { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 2.4rem; }
.tile-art::after { content: ''; position: absolute; inset: 0; background: rgba(13,11,9,0.45); transition: opacity 0.4s ease; }
.cf-active .tile-art::after, .track-btn:hover .tile-art::after { opacity: 0; }
.tile-letter { position: relative; z-index: 1; font-family: var(--font-head); font-size: 7rem; line-height: 1; color: rgba(242,237,228,0.92); text-shadow: 0 6px 24px rgba(0,0,0,0.5); }
.art-amber .tile-art { background: radial-gradient(120% 120% at 20% 15%, #E8A020 0%, #7a4d0e 45%, #1a140c 100%); }
.art-dusk  .tile-art { background: radial-gradient(120% 120% at 80% 20%, #7B5CF0 0%, #2c2158 50%, #141021 100%); }
.art-teal  .tile-art { background: radial-gradient(120% 120% at 25% 80%, #1DA882 0%, #0e4d3c 55%, #0a1a15 100%); }
.art-ember .tile-art { background: radial-gradient(120% 120% at 75% 75%, #D94F2A 0%, #6e2412 50%, #1c0f0a 100%); }
.track-icon { position: absolute; z-index: 2; top: 0.9rem; right: 0.9rem; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: var(--black); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.track-icon .i-pause, .track-btn.playing .track-icon .i-play { display: none; }
.track-btn.playing .track-icon .i-pause { display: block; }
.tile-meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: block; padding: 0.85rem 1rem 0.8rem; background: rgba(13,11,9,0.94); border-top: 1px solid rgba(242,237,228,0.08); }
.track-text { display: flex; flex-direction: column; gap: 0.25rem; padding-right: 1.6rem; }
.track-title { font: 700 0.82rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--off-white); }
.track-meta { font: 400 0.76rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.track-wave { position: relative; display: block; height: 22px; margin-top: 0.6rem; --p: 0; }
.track-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.track-wave .w-base path { fill: #5E5850; }
.track-wave .w-fill path { fill: var(--amber); }
.track-wave .w-fill { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.track-state { display: none; position: absolute; top: 0.95rem; right: 1rem; height: 16px; width: 20px; }
.track-btn.playing .track-state { display: block; background: linear-gradient(var(--amber), var(--amber)) 0 100% / 4px 60% no-repeat, linear-gradient(var(--amber), var(--amber)) 8px 100% / 4px 100% no-repeat, linear-gradient(var(--amber), var(--amber)) 16px 100% / 4px 40% no-repeat; animation: eq 1s steps(3) infinite; }
@keyframes eq { 0% { background-size: 4px 60%, 4px 100%, 4px 40%; } 50% { background-size: 4px 100%, 4px 45%, 4px 80%; } 100% { background-size: 4px 40%, 4px 75%, 4px 100%; } }
.cf-nav { position: absolute; top: 150px; z-index: 20; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(13,11,9,0.8); border: 1px solid var(--line-strong); color: var(--off-white); font: 400 1.7rem/1 var(--font-mono); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.cf-nav[hidden] { display: none; }
.cf-nav:hover { background: var(--amber); border-color: var(--amber); color: var(--black); }
.cf-prev { left: max(1rem, 6vw); }
.cf-next { right: max(1rem, 6vw); }
.hero-note { margin-top: 1rem; }
.demo-note { max-width: 820px; font-size: 1.05rem; color: var(--muted); border-left: 3px solid var(--amber); padding: 0.4rem 0 0.4rem 1rem; }

/* --- PRICES --- */
.table-wrap { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; overflow: hidden; }
.price-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.9rem; }
.price-table th, .price-table td { padding: 1.05rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.price-table thead th { background: var(--black); color: var(--amber); font-size: 0.76rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; }
.price-table tbody th { font-family: var(--font-head); font-size: 1.6rem; font-weight: 400; letter-spacing: 0.03em; line-height: 1; color: var(--off-white); }
.price-table td { color: var(--text); }
.price-table td:nth-child(2) { font-weight: 700; color: var(--amber); white-space: nowrap; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table tbody tr { transition: background 0.15s; }
.price-table tbody tr:hover { background: rgba(232,160,32,0.05); }
.facts { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.fact, .bio-stat { border-left: 3px solid rgba(242,237,228,0.2); padding: 0.4rem 0 0.4rem 1.2rem; }
.fact:first-child, .bio-stat:first-of-type { border-left-color: var(--amber); }
.fact h3 { font-size: 1.5rem; margin-bottom: 0.45rem; }
.fact p { font-size: 1.08rem; color: var(--text); }

/* --- SERVICES --- */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.service-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--amber); border-radius: 4px; padding: 1.8rem 1.6rem 1.6rem; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.service-card:nth-child(2) { border-top-color: var(--coral); }
.service-card:nth-child(3) { border-top-color: var(--teal); }
.service-card h3 { font-size: 2.6rem; }
.service-price { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--amber); margin: 0.5rem 0 0.6rem; }
.service-price span { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.ticks { margin: 0.5rem 0 1.2rem; flex: 1; }
.ticks li { position: relative; padding: 0.5rem 0 0.5rem 1.6rem; border-bottom: 1px solid var(--line); font-size: 1.1rem; line-height: 1.45; }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: ''; position: absolute; left: 0.15rem; top: 0.95rem; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(-45deg); }
.card-note { margin: 0 0 1.1rem; font-size: 1.02rem; color: var(--muted); }

/* --- WHAT TO SEND (track-row style list) --- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.send-list { counter-reset: s; }
.send-list li { counter-increment: s; position: relative; padding: 1rem 0.75rem 1rem 3.6rem; border-top: 1px solid var(--line); border-radius: 4px; transition: background 0.15s; }
.send-list li:last-child { border-bottom: 1px solid var(--line); }
.send-list li::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); transform: scaleY(0); transition: transform 0.2s; }
.send-list li:hover { background: rgba(232,160,32,0.05); }
.send-list li:hover::after { transform: scaleY(1); }
.send-list li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0.9rem; top: 1.15rem; font: 400 0.85rem var(--font-mono); color: var(--amber); }
.sticker-photo { position: relative; margin: 3rem 0 0; max-width: 420px; transform: rotate(-2deg); border: 1px solid rgba(232,160,32,0.35); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.sticker-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 60%; filter: saturate(0.85); }
.sticker-tape { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 120px; height: 28px; background: rgba(232,160,32,0.85); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }

/* --- REMOTE OR IN PERSON --- */
.split-img { grid-template-columns: 1fr 1fr; align-items: center; }
.studio-photo { margin: 0; }
.studio-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.studio-photo figcaption { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); margin-top: 0.6rem; }
#studio h2 { margin-bottom: 1.4rem; }
#studio .accent { color: transparent; -webkit-text-stroke: 1.5px var(--amber); }
#studio .bio-stat { margin-bottom: 1.2rem; }
#studio .bio-stat h3 { margin-bottom: 0.35rem; }
.steps-title { margin: 1.6rem 0 0.5rem; }
.steps { counter-reset: st; }
.steps li { counter-increment: st; position: relative; padding: 0.4rem 0 0.4rem 2.6rem; }
.steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 0.6rem; font: 400 0.85rem var(--font-mono); color: var(--amber); }

/* --- BOOK / CONTACT: sticker card --- */
.cta-section { background: var(--black-2); }
.cta-title { font-size: clamp(3rem, 7vw, 4.6rem); }
.cta-sub { font-size: 1.25rem; color: var(--text); }
.contact-details { margin-top: 1.8rem; border-top: 1px solid var(--line); }
.contact-details div { padding: 0.8rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
.contact-details dt { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.35rem; }
.contact-details dd { color: var(--off-white); }
.contact-details a { display: inline-flex; align-items: center; min-height: 44px; margin: -0.6rem 0; color: var(--amber); font-weight: 500; overflow-wrap: anywhere; }
.sticker-card { position: relative; background: var(--mid); border: 1px solid rgba(232,160,32,0.35); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.sticker-card .sticker-tape { top: -14px; }
.form-demo { font-size: 1.02rem; color: var(--off-white); background: var(--black); border-left: 3px solid var(--amber); padding: 0.6rem 0.85rem; margin-bottom: 1.4rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.form-group { margin-bottom: 1.15rem; }
.form-group label { display: block; font: 400 0.78rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.45rem; color: var(--off-white); }
.opt { text-transform: none; letter-spacing: 0; color: var(--muted); }
.form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; font: 400 1.1rem var(--font-body); color: var(--off-white); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 2px; color-scheme: dark; }
.form-group select option { background: var(--panel); color: var(--off-white); }
.form-group input::placeholder { color: #A39C90; }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--amber); }
.form-group input[type="date"]:focus, .form-group input[type="date"]:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.form-group [aria-invalid="true"] { border-color: var(--error); }
.field-error { display: block; color: var(--error); font-size: 1.02rem; margin-top: 0.3rem; }
.field-error:empty { display: none; }
.field-hint { display: block; font-size: 1rem; color: var(--muted); margin-top: 0.35rem; }
.form-note:empty { display: none; }
.form-note { margin-top: 1rem; padding: 0.85rem 1rem; background: var(--black); border: 1px solid var(--amber); color: var(--off-white); font-weight: 500; }

/* --- FOOTER --- */
.footer { background: #080706; color: var(--muted); padding: 0 0 calc(5.5rem + var(--safe-bottom) + var(--player-h)); font-size: 1.05rem; }
.footer .split-bar { margin-bottom: 3.5rem; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; }
.footer-logo { font-family: var(--font-head); font-size: 2.4rem; letter-spacing: 0.04em; line-height: 1; color: var(--off-white); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: start; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; color: var(--off-white); font: 400 0.78rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; }
.footer-links a:hover { color: var(--amber); }
.footer-small { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.footer-small p + p { margin-top: 0.5rem; }
.footer-small a { color: var(--amber); display: inline-flex; align-items: center; min-height: 44px; }
.footer-demo a { color: var(--amber); }

/* --- PLAYER (bottom bar, original colours) --- */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 92; min-height: 80px; padding: 0.7rem var(--gutter) calc(0.7rem + var(--safe-bottom)); display: grid; grid-template-columns: 52px minmax(0, 14rem) minmax(0, 1fr) 48px; align-items: center; gap: 1.2rem; background: var(--mid); color: var(--off-white); border-top: 1px solid rgba(232,160,32,0.4); --focus: var(--amber); }
.player[hidden] { display: none; }
.pl-btn { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--amber); background: var(--amber); color: var(--black); cursor: pointer; }
.pl-btn .i-play { display: none; }
.pl-btn.paused { background: transparent; color: var(--amber); }
.pl-btn.paused .i-play { display: block; }
.pl-btn.paused .i-pause { display: none; }
.pl-close { width: 48px; height: 48px; background: transparent; color: var(--off-white); border: 1px solid var(--line-strong); font-size: 1.6rem; line-height: 1; }
.pl-close:hover { border-color: var(--amber); color: var(--amber); }
.pl-title { font-family: var(--font-body); font-style: italic; font-size: 1.2rem; color: var(--off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sub { font: 400 0.75rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0 !important; }
.pl-seek { display: flex; align-items: center; gap: 0.75rem; }
.pl-time { font: 400 0.8rem var(--font-mono); color: var(--off-white); font-variant-numeric: tabular-nums; min-width: 2.8rem; }
.pl-seek input { flex: 1; min-width: 0; height: 44px; accent-color: var(--amber); background: transparent; cursor: pointer; }

/* --- CHAT PANEL (pill: UptoData furniture block) --- */
.chat-panel { position: fixed; right: 1.5rem; bottom: calc(1.5rem + var(--safe-bottom) + var(--player-h)); z-index: 95; width: 370px; height: min(560px, calc(100vh - 6rem - var(--player-h))); display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid rgba(232,160,32,0.45); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.6); --focus: var(--amber); }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.75rem 0.75rem 1rem; border-bottom: 1px solid var(--line); background: var(--black); }
.chat-head strong { display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.03em; line-height: 1.1; color: var(--off-white); }
.chat-status { display: block; font: 400 0.75rem var(--font-mono); color: var(--muted); }
.chat-close { width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; background: none; border: 0; color: var(--off-white); cursor: pointer; }
.chat-close:hover { color: var(--amber); }
.chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; overscroll-behavior: contain; }
.msg { max-width: 88%; padding: 0.65rem 0.85rem; font-size: 1.05rem; line-height: 1.45; white-space: pre-wrap; border-radius: 8px; }
.msg.bot { align-self: flex-start; background: var(--mid); color: var(--off-white); }
.msg.user { align-self: flex-end; background: var(--amber); color: var(--black); }
.msg.typing { display: inline-flex; gap: 4px; }
.msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: blink 1.2s infinite ease-in-out; }
.msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.chat-suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.chat-suggest button { min-height: 44px; padding: 0.5rem 0.9rem; text-align: left; font: 1rem var(--font-body); background: transparent; color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; cursor: pointer; }
.chat-suggest button:hover { background: var(--amber); color: var(--black); }
.chat-input { display: flex; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; min-width: 0; min-height: 48px; padding: 0 1rem; font: 1.05rem var(--font-body); background: var(--black); color: var(--off-white); border: 0; }
.chat-input input::placeholder { color: #A39C90; }
.chat-input input:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.chat-input button { width: 52px; background: var(--amber); color: var(--black); border: 0; cursor: pointer; }
.chat-input button:hover { background: var(--off-white); }
.chat-input button:disabled { opacity: 0.6; cursor: wait; }
.chat-foot { padding: 0.45rem 1rem 0.6rem; font-size: 0.92rem; color: var(--muted); }

/* --- FILM GRAIN (desktop only, very light) --- */
@media (min-width: 861px) {
  body::after { content: ''; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 120px 120px; }
}

/* --- MOTION OFF (Pause motion button) --- */
.motion-off .hero-orb, .motion-off .track-btn.playing .track-state { animation-play-state: paused; }

/* --- RESPONSIVE --- */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
  .service-grid { grid-template-columns: 1fr; max-width: 640px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .split, .split-img { grid-template-columns: 1fr; }
  .sticker-photo { display: none; }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100%; }
  .price-table tbody tr { border-bottom: 1px solid var(--line); padding: 0.5rem 0; }
  .price-table tbody tr:last-child { border-bottom: 0; }
  .price-table th, .price-table td { border-bottom: 0; padding: 0.4rem 1.1rem; }
  .price-table td[data-label] { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .price-table td[data-label]::before { content: attr(data-label); font-weight: 400; color: var(--muted); text-align: left; }
  .player { grid-template-columns: 52px minmax(0, 1fr) 48px; gap: 0.4rem 0.75rem; }
  .pl-seek { grid-column: 1 / -1; grid-row: 2; }
  body.player-open { --player-h: 132px; }
}
@media (max-width: 600px) {
  /* Phones: the original was too dark and murky here (name at the bottom of a screen of fog and
     particles). Keep the look, but start the content at the top, shrink and lift the glows away from
     the text, thin out the particles (kinetic.js) and use solid amber for the outlined accents. */
  body { font-size: 1.15rem; }
  .hero { min-height: 0; justify-content: flex-start; padding-top: calc(var(--bar-h) + var(--nav-h) + 1.75rem); padding-bottom: 2.25rem; }
  .orb1 { width: 230px; height: 230px; top: 70px; right: -110px; opacity: 0.34; }
  .orb2 { width: 200px; height: 200px; left: -120px; bottom: 30px; opacity: 0.2; }
  .orb3 { display: none; }
  .hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; line-height: 1.6; }
  .hero-name { font-size: clamp(4rem, 21vw, 5.6rem); margin-bottom: 1.2rem; }
  .hn-solid { text-shadow: 0 0 12px rgba(232,160,32,0.35); }
  .hero-title { font-size: 1.7rem; margin-top: 1rem; }
  .hero-tagline { margin-bottom: 1.5rem; }
  .hero-actions .btn { flex: 1 1 0; padding: 0.8rem 0.8rem; letter-spacing: 0.1em; }
  .hero-actions { margin-bottom: 1.4rem; }
  .tag { font-size: 0.75rem; padding: 0.5rem 0.75rem; }
  .logo-main { font-size: 1.6rem; }
  .logo-sub { font-size: 0.75rem; letter-spacing: 0.08em; }
  .marquee-track span { font-size: 1.15rem; }
  .motion-toggle { margin-left: 0.75rem; padding: 0 0.7rem; }
  .tracks-section { padding-top: 2.75rem; }
  .coverflow-wrap { margin-top: 1.25rem; }
  .cf-item { width: 220px; height: 280px; }
  .cf-ready .coverflow { height: 300px; }
  .cf-ready .cf-item { margin-left: -110px; top: 10px; }
  .tile-letter { font-size: 6rem; }
  /* Both arrows bottom-left on phones, well away from the chat pill (bottom-right). */
  .cf-prev { left: var(--gutter); }
  .cf-next { left: calc(var(--gutter) + 64px); right: auto; }
  .cf-nav { top: auto; bottom: 0; transform: none; }
  .cf-ready .coverflow { margin-bottom: 0; }
  .coverflow-wrap { padding-bottom: 60px; }
  .facts { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .service-card { padding: 1.4rem 1.15rem; }
  .contact-details div { grid-template-columns: 1fr; gap: 0.2rem; }
  .footer-inner { grid-template-columns: 1fr; }
  #studio .accent { color: var(--amber); -webkit-text-stroke: 0; }
  .chat-panel { right: 0.5rem; left: 0.5rem; bottom: calc(0.5rem + var(--safe-bottom) + var(--player-h)); width: auto; height: min(560px, calc(100svh - 5rem - var(--player-h))); }
}

/* --- REDUCED MOTION: no movement at all (orbs, marquee, particles, covers, shine, entrance) --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hn-solid, .hn-outline { opacity: 1; transform: none; clip-path: none; }
  .btn-amber::after { display: none; }
  .msg.typing span { opacity: 0.8; }
}