
:root {
  color-scheme: dark;
  --bg: #040711;
  --panel: #0a101d;
  --panel-2: #111827;
  --text: #f4f8fb;
  --muted: #a9b8c7;
  --dim: #718293;
  --line: rgba(208, 239, 255, .18);
  --cyan: #6df1ff;
  --pink: #ff5bc2;
  --gold: #ffd06a;
  --max: 1240px;
  --nav-h: 78px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
body::selection { background: var(--pink); color: #fff; }
a { color: inherit; }
img, svg, video { max-width: 100%; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 9999; background: #fff; color: #000; padding: .8rem 1rem; border-radius: .5rem; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.site-header { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; background: linear-gradient(180deg, rgba(3,6,14,.9), rgba(3,6,14,.4), transparent); transition: background .3s, border-color .3s, backdrop-filter .3s; }
.site-header.is-scrolled, .interior .site-header { background: rgba(4,7,17,.84); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); }
.nav-wrap { width: min(var(--max), calc(100% - 40px)); margin: auto; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: max-content; }
.brand img { width: 34px; height: 34px; }
.brand-name { font-weight: 780; letter-spacing: -.04em; font-size: 1.05rem; }
.brand-name span { color: var(--cyan); }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.main-nav a { text-decoration: none; color: rgba(244,248,251,.82); font-size: .9rem; letter-spacing: .03em; position: relative; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:linear-gradient(90deg,var(--cyan),var(--pink)); transition:right .25s var(--ease); }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current="page"]::after { right:0; }
.main-nav a:hover, .main-nav a:focus-visible { color:#fff; }
.nav-cta { border: 1px solid rgba(109,241,255,.45); padding: .65rem 1rem; border-radius: 999px; }
.nav-cta::after { display:none; }
.menu-button { display:none; margin-left:auto; border:0; color:#fff; background:transparent; width:44px; height:44px; border-radius:50%; }
.menu-button span, .menu-button::before, .menu-button::after { content:""; display:block; width:22px; height:1px; background:#fff; margin:5px auto; transition:.25s; }
.hero { min-height: 100svh; position: relative; overflow: hidden; background:#02040b; }
.hero-slides, .hero-slide { position:absolute; inset:0; }
.hero-slide { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 1.6s var(--ease), visibility 0s 1.6s; overflow:hidden; }
.hero-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; z-index:1; transition:opacity 1.6s var(--ease), visibility 0s; }
.hero-art { position:absolute; inset:-4%; background-position:center; background-size:cover; transform:scale(1.04); animation: driftA 13s ease-in-out both; }
.hero-slide:nth-child(even) .hero-art { animation-name:driftB; }
.hero-slide.is-active .hero-art { animation-play-state:running; }
.hero-slide:not(.is-active) .hero-art { animation-play-state:paused; }
@keyframes driftA { from { transform:scale(1.04) translate3d(-1.2%,0,0); } to { transform:scale(1.13) translate3d(1.2%,-1.2%,0); } }
@keyframes driftB { from { transform:scale(1.05) translate3d(1.4%,0,0); } to { transform:scale(1.14) translate3d(-1.2%,1%,0); } }
.hero::before { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(2,4,11,.42) 0%, transparent 25%, transparent 46%, rgba(2,4,11,.18) 59%, rgba(2,4,11,.95) 100%), linear-gradient(90deg,rgba(2,4,11,.45),transparent 48%,rgba(2,4,11,.14)); }
.hero-noise { position:absolute; z-index:4; inset:0; opacity:.22; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.hero-brandline { position:absolute; z-index:5; left:max(24px, calc((100vw - var(--max))/2)); top:clamp(118px,16vh,180px); max-width:880px; }
.eyebrow { margin:0 0 14px; display:flex; align-items:center; gap:12px; color:var(--cyan); font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow::before { content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan)); }
.hero-brandline h1 { margin:0; max-width:850px; font-size:clamp(3.8rem,8.7vw,9rem); letter-spacing:-.075em; line-height:.83; text-wrap:balance; }
.hero-brandline h1 em { display:block; font-style:normal; font-weight:300; color:rgba(255,255,255,.62); }
.hero-brandline .manifesto { margin:28px 0 0; max-width:650px; font-size:clamp(1rem,1.45vw,1.23rem); color:rgba(240,248,252,.72); }
.hero-caption { position:absolute; z-index:6; left:max(24px, calc((100vw - var(--max))/2)); right:max(24px, calc((100vw - var(--max))/2)); bottom:clamp(34px,7vh,72px); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:28px; }
.slide-copy { max-width:760px; opacity:0; transform:translateY(16px); transition:opacity .8s .3s, transform .8s .3s; }
.hero-slide.is-active .slide-copy { opacity:1; transform:none; }
.slide-label { color:var(--gold); font-size:.73rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; }
.slide-copy h2 { margin:.45rem 0 .55rem; font-size:clamp(1.85rem,4vw,4rem); line-height:1; letter-spacing:-.05em; }
.slide-copy p { margin:0; max-width:650px; color:rgba(243,248,252,.73); font-size:clamp(.95rem,1.2vw,1.08rem); }
.slide-actions { margin-top:1.15rem; display:flex; gap:10px; flex-wrap:wrap; }
.text-link { color:#fff; text-decoration:none; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; font-weight:750; }
.text-link::after { content:" →"; color:var(--cyan); }
.slide-nav { display:flex; align-items:center; gap:9px; }
.slide-dot { border:0; padding:0; width:34px; height:3px; background:rgba(255,255,255,.22); cursor:pointer; position:relative; overflow:hidden; }
.slide-dot::after { content:""; position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--cyan),var(--pink)); transition:right .3s; }
.slide-dot.is-active::after { right:0; }
.audio-dock { position:fixed; right:28px; bottom:28px; z-index:120; display:flex; align-items:center; flex-direction:row-reverse; }
.audio-toggle { width:48px; height:48px; border:1px solid rgba(255,255,255,.24); border-radius:50%; color:#fff; background:rgba(6,10,19,.74); backdrop-filter:blur(16px); display:grid; place-items:center; cursor:pointer; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.audio-toggle svg { width:20px; height:20px; }
.volume-panel { width:0; opacity:0; overflow:hidden; transition:width .28s var(--ease), opacity .2s; }
.audio-dock:hover .volume-panel, .audio-dock:focus-within .volume-panel { width:160px; opacity:1; }
.volume-panel-inner { margin-right:10px; width:150px; height:44px; display:flex; align-items:center; gap:8px; padding:0 14px; background:rgba(6,10,19,.82); border:1px solid rgba(255,255,255,.18); border-radius:999px; backdrop-filter:blur(18px); }
.volume-panel label { font-size:.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.volume-panel input { width:86px; accent-color:var(--cyan); }
.autoplay-note { position:fixed; z-index:121; left:50%; bottom:30px; transform:translate(-50%,20px); background:rgba(4,7,17,.88); border:1px solid var(--line); border-radius:999px; padding:.75rem 1rem; color:var(--muted); font-size:.79rem; opacity:0; pointer-events:none; transition:.3s; backdrop-filter:blur(18px); }
.autoplay-note.is-visible { opacity:1; transform:translate(-50%,0); }
.section { padding:clamp(80px,11vw,150px) 0; position:relative; }
.container { width:min(var(--max),calc(100% - 40px)); margin:auto; }
.section-kicker { color:var(--cyan); font-weight:800; text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; }
.display { margin:.65rem 0 1.2rem; max-width:1000px; font-size:clamp(2.6rem,6.7vw,6.4rem); line-height:.94; letter-spacing:-.065em; text-wrap:balance; }
.lead { max-width:790px; font-size:clamp(1.08rem,1.75vw,1.45rem); color:var(--muted); }
.home-intro { background:radial-gradient(circle at 80% 20%,rgba(109,241,255,.09),transparent 30rem),#050914; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.principle { border-top:1px solid var(--line); padding-top:22px; }
.principle b { display:block; font-size:1rem; margin-bottom:.65rem; }
.principle p { margin:0; color:var(--muted); font-size:.94rem; }
.project-ribbon { overflow:hidden; background:#070b14; border-block:1px solid var(--line); }
.project-ribbon-track { display:flex; width:max-content; animation:marquee 30s linear infinite; }
.project-ribbon span { display:inline-flex; align-items:center; gap:32px; padding:18px 32px; color:rgba(255,255,255,.72); text-transform:uppercase; letter-spacing:.17em; font-size:.75rem; white-space:nowrap; }
.project-ribbon span::after { content:"✦"; color:var(--pink); }
@keyframes marquee { to { transform:translateX(-50%); } }
.feature-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:52px; }
.feature-card { grid-column:span 6; min-height:430px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:#07101b; text-decoration:none; isolation:isolate; }
.feature-card:nth-child(3n) { grid-column:span 12; min-height:500px; }
.feature-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .8s; filter:saturate(.85) brightness(.74); }
.feature-card::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(3,6,13,.12) 50%,rgba(3,6,13,.94)); }
.feature-card-copy { position:absolute; z-index:2; left:28px; right:28px; bottom:25px; }
.feature-card-copy small { color:var(--gold); text-transform:uppercase; letter-spacing:.16em; font-size:.67rem; font-weight:800; }
.feature-card h3 { margin:.35rem 0 .45rem; font-size:clamp(1.7rem,3vw,3rem); letter-spacing:-.045em; }
.feature-card p { max-width:650px; margin:0; color:var(--muted); }
.feature-card:hover img, .feature-card:focus-visible img { transform:scale(1.045); filter:saturate(1.05) brightness(.87); }
.feature-card:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.cta-band { padding:80px 0; background:linear-gradient(120deg,rgba(109,241,255,.11),rgba(255,91,194,.08),rgba(255,208,106,.08)); border-block:1px solid var(--line); }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta-inner h2 { margin:0; font-size:clamp(2rem,5vw,4.6rem); line-height:1; letter-spacing:-.055em; max-width:800px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.8rem 1.25rem; border-radius:999px; border:1px solid rgba(109,241,255,.48); background:rgba(109,241,255,.09); color:#fff; text-decoration:none; font-weight:750; font-size:.85rem; letter-spacing:.04em; white-space:nowrap; transition:.25s; }
.button:hover, .button:focus-visible { background:var(--cyan); color:#041018; box-shadow:0 0 34px rgba(109,241,255,.28); }
.button.secondary { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.page-hero { padding:calc(var(--nav-h) + 90px) 0 80px; min-height:540px; display:flex; align-items:flex-end; position:relative; overflow:hidden; background:#050914; border-bottom:1px solid var(--line); }
.page-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%,rgba(109,241,255,.16),transparent 28rem),radial-gradient(circle at 10% 80%,rgba(255,91,194,.12),transparent 26rem); }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { margin:.5rem 0 1rem; font-size:clamp(3.2rem,9vw,8.6rem); line-height:.84; letter-spacing:-.075em; max-width:1150px; }
.project-list { display:grid; gap:110px; }
.project-section { display:grid; grid-template-columns:1.05fr .95fr; gap:68px; align-items:center; scroll-margin-top:120px; }
.project-section:nth-child(even) .project-media { order:2; }
.project-media { border:1px solid var(--line); border-radius:26px; overflow:hidden; background:#090f18; box-shadow:0 30px 80px rgba(0,0,0,.25); }
.project-media img { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; }
.project-copy h2 { margin:.35rem 0 .85rem; font-size:clamp(2.3rem,5vw,5rem); line-height:.95; letter-spacing:-.06em; }
.project-copy p { color:var(--muted); }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.tag { padding:.38rem .65rem; border:1px solid var(--line); border-radius:999px; color:#d5e1eb; font-size:.72rem; letter-spacing:.05em; }
.link-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.studio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
.studio-card { min-height:280px; padding:28px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); }
.studio-card strong { color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; }
.studio-card h3 { font-size:1.55rem; margin:.8rem 0; letter-spacing:-.03em; }
.studio-card p { color:var(--muted); font-size:.94rem; }
.media-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:50px; }
.media-card { border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--panel); }
.video-shell { position:relative; padding-top:56.25%; background:#02040a; }
.video-shell iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.media-copy { padding:24px; }
.media-copy h2 { margin:0 0 .5rem; font-size:1.5rem; }
.media-copy p { color:var(--muted); margin:0; }
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
.contact-panel { border:1px solid var(--line); border-radius:26px; padding:30px; background:rgba(255,255,255,.025); }
.contact-list { display:grid; gap:18px; margin-top:30px; }
.contact-list a { text-decoration:none; color:var(--cyan); word-break:break-word; }
.contact-form { display:grid; gap:15px; }
.field { display:grid; gap:7px; }
.field label { color:var(--muted); font-size:.8rem; }
.field input, .field textarea, .field select { width:100%; color:#fff; background:#060b14; border:1px solid var(--line); border-radius:12px; padding:.85rem .95rem; }
.field textarea { min-height:160px; resize:vertical; }
.form-note { color:var(--dim); font-size:.78rem; }
.legal-copy { max-width:820px; }
.legal-copy h2 { margin-top:3rem; font-size:1.6rem; }
.legal-copy p, .legal-copy li { color:var(--muted); }
.site-footer { padding:70px 0 28px; border-top:1px solid var(--line); background:#03060d; }
.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:40px; }
.footer-brand p { color:var(--muted); max-width:440px; }
.footer-col h3 { font-size:.72rem; text-transform:uppercase; letter-spacing:.17em; color:var(--gold); }
.footer-col a { display:block; color:var(--muted); text-decoration:none; padding:.25rem 0; font-size:.9rem; }
.footer-col a:hover { color:#fff; }
.footer-bottom { margin-top:55px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--dim); font-size:.75rem; }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }
@media (max-width: 900px) {
  :root { --nav-h:68px; }
  .menu-button { display:block; }
  .main-nav { position:fixed; inset:var(--nav-h) 0 auto 0; display:grid; gap:0; padding:12px 20px 26px; background:rgba(4,7,17,.96); border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .3s var(--ease); }
  .main-nav.is-open { transform:none; }
  .main-nav a { padding:12px 0; }
  .main-nav a::after { display:none; }
  .nav-cta { border:0; }
  .hero-brandline { top:110px; right:24px; }
  .hero-brandline h1 { font-size:clamp(3.7rem,15vw,7.6rem); }
  .hero-caption { grid-template-columns:1fr; }
  .slide-nav { display:none; }
  .principles, .studio-grid { grid-template-columns:1fr; }
  .feature-card, .feature-card:nth-child(3n) { grid-column:span 12; min-height:420px; }
  .project-section { grid-template-columns:1fr; gap:30px; }
  .project-section:nth-child(even) .project-media { order:initial; }
  .media-grid, .contact-grid { grid-template-columns:1fr; }
  .cta-inner { align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px) {
  .nav-wrap, .container { width:min(100% - 28px,var(--max)); }
  .brand-name { font-size:.96rem; }
  .hero-brandline { left:18px; right:18px; top:100px; }
  .hero-brandline h1 { font-size:clamp(3.2rem,18vw,5.6rem); }
  .hero-brandline .manifesto { margin-top:18px; font-size:.94rem; max-width:92%; }
  .hero-caption { left:18px; right:74px; bottom:30px; }
  .slide-copy h2 { font-size:2rem; }
  .slide-copy p { display:none; }
  .audio-dock { right:16px; bottom:18px; }
  .autoplay-note { bottom:76px; width:calc(100% - 32px); text-align:center; }
  .feature-card, .feature-card:nth-child(3n) { min-height:370px; }
  .feature-card-copy { left:20px; right:20px; bottom:20px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .project-ribbon-track { animation:none; }
  .reveal { opacity:1; transform:none; }
}

/* Landing-page legibility and sound-consent refinements */
:root { --nav-h: 94px; }
.site-header { min-height: var(--nav-h); }
.nav-wrap { width:min(1340px,calc(100% - 52px)); gap:40px; }
.brand { gap:15px; }
.brand img { width:44px; height:44px; }
.brand-name { font-size:1.34rem; letter-spacing:-.045em; }
.main-nav { gap:34px; }
.main-nav a { font-size:.98rem; font-weight:650; letter-spacing:.025em; }
.nav-cta { padding:.78rem 1.2rem; }

.hero::before { display:none; }
.hero-slide::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,4,11,.48) 0%,transparent 24%,transparent 45%,rgba(2,4,11,.18) 58%,rgba(2,4,11,.94) 100%),
    linear-gradient(90deg,rgba(2,4,11,.48),transparent 48%,rgba(2,4,11,.16));
}
.hero-art { z-index:0; }
.hero-slide > .hero-caption { z-index:2; }
.hero-noise { z-index:3; }
.hero-brandline { z-index:5; isolation:isolate; padding:28px 34px 30px; margin:-28px -34px -30px; }
.hero-brandline::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 28% 46%,rgba(2,5,12,.76),rgba(2,5,12,.43) 48%,transparent 76%);
  filter:blur(1px);
}
.hero-brandline .manifesto {
  color:rgba(247,251,255,.91);
  text-shadow:0 2px 14px rgba(0,0,0,.88),0 1px 3px rgba(0,0,0,.95);
}
.hero-slide > .hero-caption .slide-copy {
  position:relative;
  isolation:isolate;
  padding:18px 22px 20px;
  margin:-18px -22px -20px;
}
.hero-slide > .hero-caption .slide-copy::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:20px;
  background:linear-gradient(90deg,rgba(2,4,11,.74),rgba(2,4,11,.38) 68%,transparent);
  filter:blur(.2px);
}
.slide-copy p { color:rgba(247,251,255,.88); text-shadow:0 2px 10px rgba(0,0,0,.9); }

.audio-dock { gap:0; }
.volume-panel { width:0; opacity:0; overflow:hidden; transition:width .28s var(--ease),opacity .2s; }
.audio-dock:hover .volume-panel,.audio-dock:focus-within .volume-panel { width:222px; opacity:1; }
.volume-panel-inner {
  box-sizing:border-box;
  margin-right:10px;
  width:212px;
  height:48px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:0 16px;
}
.volume-panel label { white-space:nowrap; }
.volume-panel input { width:100%; min-width:0; margin:0; }

.sound-prompt {
  position:fixed;
  z-index:119;
  top:calc(var(--nav-h) + 18px);
  right:26px;
  width:min(390px,calc(100% - 36px));
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px 14px;
  padding:16px;
  color:#fff;
  background:rgba(5,9,18,.88);
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.42);
  backdrop-filter:blur(20px);
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.sound-prompt[hidden] { display:none; }
.sound-prompt.is-visible { opacity:1; transform:none; pointer-events:auto; }
.sound-prompt-wave { height:38px; display:flex; align-items:center; justify-content:center; gap:3px; border-radius:50%; background:rgba(109,241,255,.09); border:1px solid rgba(109,241,255,.2); }
.sound-prompt-wave i { width:2px; height:8px; border-radius:4px; background:var(--cyan); animation:soundWave 1s ease-in-out infinite alternate; }
.sound-prompt-wave i:nth-child(2),.sound-prompt-wave i:nth-child(4){ animation-delay:-.35s; height:16px; }
.sound-prompt-wave i:nth-child(3){ animation-delay:-.7s; height:23px; }
@keyframes soundWave { to { transform:scaleY(.45); opacity:.6; } }
.sound-prompt-copy { min-width:0; }
.sound-prompt-copy strong { display:block; font-size:.94rem; letter-spacing:-.01em; }
.sound-prompt-copy span { display:block; margin-top:2px; color:var(--muted); font-size:.78rem; line-height:1.45; }
.sound-prompt-actions { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.sound-prompt-actions button { border:0; cursor:pointer; }
.sound-enable { padding:.6rem .82rem; border-radius:999px!important; color:#031017; background:linear-gradient(90deg,var(--cyan),#b8f8ff); font-size:.75rem; font-weight:800; }
.sound-later,.sound-never { padding:.45rem .3rem; color:var(--muted); background:transparent; font-size:.72rem; }
.sound-later:hover,.sound-never:hover,.sound-later:focus-visible,.sound-never:focus-visible { color:#fff; }

@media (max-width:900px) {
  :root { --nav-h:78px; }
  .nav-wrap { width:min(100% - 34px,1340px); }
  .brand img { width:38px; height:38px; }
  .brand-name { font-size:1.14rem; }
  .main-nav a { font-size:1rem; }
}
@media (max-width:620px) {
  :root { --nav-h:72px; }
  .nav-wrap { width:min(100% - 24px,1340px); }
  .brand { gap:10px; }
  .brand img { width:34px; height:34px; }
  .brand-name { font-size:1.02rem; }
  .hero-brandline { padding:20px 18px 22px; margin:-20px -18px -22px; }
  .hero-brandline::before { border-radius:20px; }
  .hero-slide > .hero-caption .slide-copy { padding:14px 16px 16px; margin:-14px -16px -16px; }
  .sound-prompt { top:calc(var(--nav-h) + 10px); right:12px; width:calc(100% - 24px); }
  .audio-dock:hover .volume-panel,.audio-dock:focus-within .volume-panel { width:min(218px,calc(100vw - 84px)); }
  .volume-panel-inner { width:calc(100% - 10px); }
}
@media (max-width:620px) {
  .sound-prompt {
    top:auto;
    right:12px;
    bottom:78px;
    width:calc(100% - 24px);
    grid-template-columns:34px 1fr;
    gap:9px 11px;
    padding:12px 13px;
    border-radius:15px;
  }
  .sound-prompt-wave { width:34px; height:34px; }
  .sound-prompt-copy strong { font-size:.86rem; }
  .sound-prompt-copy span { font-size:.72rem; }
  .sound-prompt-actions { gap:7px; }
  .sound-enable { padding:.52rem .72rem; }
  .sound-prompt-open .hero-slide > .hero-caption { bottom:190px; }
}


/* Final responsive type-scale refinement */
:root { --nav-h: 108px; }
.site-header { height: var(--nav-h); min-height: var(--nav-h); }
.nav-wrap { width:min(1460px,calc(100% - 56px)); gap:44px; }
.brand { gap:17px; }
.brand img { width:54px; height:54px; }
.brand-name { font-size:1.56rem; font-weight:790; letter-spacing:-.047em; }
.main-nav { gap:36px; }
.main-nav a { font-size:1.08rem; font-weight:680; }
.nav-cta { padding:.88rem 1.36rem; font-size:1.02rem!important; }

.hero-brandline {
  max-width:min(1180px,calc(100vw - 80px));
}
.hero-brandline h1 {
  max-width:none;
  font-size:clamp(4.25rem,8vw,8.7rem);
  text-wrap:nowrap;
}
.hero-title-line,
.hero-brandline h1 em {
  display:block;
  white-space:nowrap;
}
.eyebrow {
  margin-bottom:18px;
  gap:14px;
  font-size:.96rem;
  letter-spacing:.16em;
}
.eyebrow::before { width:44px; }
.slide-label,
.section-kicker {
  font-size:.9rem;
  letter-spacing:.16em;
}

@media (max-width:1100px) and (min-width:901px) {
  .nav-wrap { gap:30px; }
  .brand { gap:13px; }
  .brand img { width:48px; height:48px; }
  .brand-name { font-size:1.4rem; }
  .main-nav { gap:24px; }
  .main-nav a { font-size:1rem; }
  .nav-cta { padding:.76rem 1.05rem; font-size:.94rem!important; }
  .hero-brandline h1 { font-size:clamp(4.35rem,8vw,5.8rem); }
}

@media (max-width:900px) {
  :root { --nav-h:84px; }
  .nav-wrap { width:min(100% - 34px,1460px); }
  .brand { gap:12px; }
  .brand img { width:43px; height:43px; }
  .brand-name { font-size:1.25rem; }
  .main-nav a { font-size:1.08rem; }
  .hero-brandline {
    max-width:calc(100vw - 48px);
    top:clamp(104px,14vh,132px);
  }
  .hero-brandline h1 { font-size:clamp(3.8rem,11.5vw,6.4rem); }
  .eyebrow { font-size:.86rem; }
  .slide-label,
  .section-kicker { font-size:.84rem; }
}

@media (max-width:620px) {
  :root { --nav-h:78px; }
  .nav-wrap { width:min(100% - 24px,1460px); }
  .brand img { width:38px; height:38px; }
  .brand-name { font-size:1.1rem; }
  .hero-brandline {
    max-width:none;
    left:18px;
    right:18px;
    top:96px;
  }
  .hero-brandline h1 {
    font-size:clamp(2.9rem,14vw,4.8rem);
    line-height:.86;
    letter-spacing:-.072em;
  }
  .eyebrow {
    margin-bottom:14px;
    gap:10px;
    font-size:.76rem;
    letter-spacing:.14em;
  }
  .eyebrow::before { width:28px; }
  .slide-label,
  .section-kicker {
    font-size:.78rem;
    letter-spacing:.14em;
  }
}

/* Restored cinematic background movement
   Motion is attached only while a frame is active so every transition begins
   a fresh, slow Ken Burns pass instead of resuming a hidden animation. */
.hero-art {
  animation: none;
  transform: scale(1.035) translate3d(0,0,0);
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
.hero-slide.is-active .hero-art {
  animation: cinematicDrift1 11.5s cubic-bezier(.18,.56,.25,1) both;
}
.hero-slide:nth-child(2).is-active .hero-art {
  animation-name: cinematicDrift2;
  transform-origin: 62% 42%;
}
.hero-slide:nth-child(3).is-active .hero-art {
  animation-name: cinematicDrift3;
  transform-origin: 42% 58%;
}
.hero-slide:nth-child(4).is-active .hero-art {
  animation-name: cinematicDrift4;
  transform-origin: 68% 50%;
}
.hero-slide:nth-child(5).is-active .hero-art {
  animation-name: cinematicDrift5;
  transform-origin: 38% 44%;
}
.hero-slide:nth-child(6).is-active .hero-art {
  animation-name: cinematicDrift6;
  transform-origin: 56% 62%;
}
.hero-slide:nth-child(7).is-active .hero-art {
  animation-name: cinematicDrift7;
  transform-origin: 46% 38%;
}

@keyframes cinematicDrift1 {
  from { transform: scale(1.035) translate3d(-1.1%, .25%, 0); }
  to   { transform: scale(1.115) translate3d(1.35%, -1.05%, 0); }
}
@keyframes cinematicDrift2 {
  from { transform: scale(1.045) translate3d(1.15%, -.4%, 0); }
  to   { transform: scale(1.12) translate3d(-1.25%, .9%, 0); }
}
@keyframes cinematicDrift3 {
  from { transform: scale(1.035) translate3d(-.45%, -1%, 0); }
  to   { transform: scale(1.11) translate3d(1.25%, .85%, 0); }
}
@keyframes cinematicDrift4 {
  from { transform: scale(1.05) translate3d(1%, .7%, 0); }
  to   { transform: scale(1.125) translate3d(-1.4%, -.8%, 0); }
}
@keyframes cinematicDrift5 {
  from { transform: scale(1.04) translate3d(-1.25%, .8%, 0); }
  to   { transform: scale(1.115) translate3d(.85%, -1.15%, 0); }
}
@keyframes cinematicDrift6 {
  from { transform: scale(1.045) translate3d(.6%, -1.05%, 0); }
  to   { transform: scale(1.12) translate3d(-.95%, 1.15%, 0); }
}
@keyframes cinematicDrift7 {
  from { transform: scale(1.04) translate3d(-.85%, -.65%, 0); }
  to   { transform: scale(1.115) translate3d(1.25%, .95%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-art {
    animation: none !important;
    transform: scale(1.04) !important;
  }
}


/* brand tri-color refinement */
.brand-name {
  display:inline-flex;
  align-items:baseline;
  gap:0;
  white-space:nowrap;
}
.brand-name .brand-sorry { color: var(--pink); }
.brand-name .brand-need { color: rgba(255,255,255,.98); }
.brand-name .brand-boost { color: var(--cyan); }


/* Projects navigation popover */
.nav-projects {
  position:relative;
  display:flex;
  align-items:center;
  align-self:stretch;
}
.nav-projects-link {
  display:inline-flex;
  align-items:center;
  gap:.48rem;
  white-space:nowrap;
}
.nav-projects-chevron {
  width:.42rem;
  height:.42rem;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-.12rem) rotate(45deg);
  transition:transform .22s var(--ease), color .22s;
  color:var(--cyan);
}
.projects-popover {
  position:absolute;
  top:calc(100% - 7px);
  left:-22px;
  z-index:140;
  width:min(340px,calc(100vw - 32px));
  padding:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  border:1px solid rgba(208,239,255,.2);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(12,18,32,.98),rgba(4,8,18,.98)),
    radial-gradient(circle at 12% 0,rgba(255,91,194,.15),transparent 15rem);
  box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 0 1px rgba(109,241,255,.035) inset;
  backdrop-filter:blur(24px) saturate(1.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,-8px,0) scale(.985);
  transform-origin:24% 0;
  transition:opacity .2s var(--ease),transform .24s var(--ease),visibility 0s linear .24s;
}
.projects-popover::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:18px;
}
.projects-popover::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--pink),rgba(255,255,255,.88),var(--cyan)) top/100% 1px no-repeat;
  opacity:.78;
}
.nav-projects:hover .projects-popover,
.nav-projects:focus-within .projects-popover,
.nav-projects.is-open .projects-popover {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition-delay:0s;
}
.nav-projects:hover .nav-projects-chevron,
.nav-projects:focus-within .nav-projects-chevron,
.nav-projects.is-open .nav-projects-chevron {
  transform:translateY(.08rem) rotate(225deg);
}
.projects-popover a {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:68px;
  padding:10px 12px!important;
  border:1px solid transparent;
  border-radius:11px;
  background:rgba(255,255,255,.018);
  color:rgba(244,248,251,.86)!important;
  line-height:1.25;
  transition:background .2s,border-color .2s,transform .2s,color .2s;
}
.projects-popover a::after { display:none!important; }
.projects-popover a:hover,
.projects-popover a:focus-visible {
  background:rgba(109,241,255,.07);
  border-color:rgba(109,241,255,.18);
  color:#fff!important;
  transform:translateY(-1px);
  outline:none;
}
.projects-popover strong {
  font-size:.9rem;
  font-weight:760;
  letter-spacing:-.015em;
}
.projects-popover small {
  margin-top:4px;
  color:var(--dim);
  font-size:.66rem;
  letter-spacing:.055em;
  text-transform:uppercase;
}

@media (max-width:900px) {
  .nav-projects {
    display:block;
    align-self:auto;
    border-bottom:1px solid rgba(208,239,255,.1);
  }
  .nav-projects-link {
    width:100%;
    justify-content:space-between;
  }
  .nav-projects-chevron { display:none; }
  .projects-popover {
    position:static;
    width:100%;
    padding:0 0 12px 14px;
    grid-template-columns:1fr 1fr;
    gap:3px 12px;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:none;
  }
  .projects-popover::before,
  .projects-popover::after { display:none; }
  .projects-popover a {
    min-height:0;
    padding:7px 8px!important;
    background:none;
    border:0;
  }
  .projects-popover a:hover,
  .projects-popover a:focus-visible {
    transform:none;
    background:rgba(109,241,255,.055);
  }
  .projects-popover strong { font-size:.82rem; }
  .projects-popover small { font-size:.59rem; }
}

@media (max-width:520px) {
  .projects-popover { grid-template-columns:1fr; }
  .projects-popover a { padding:6px 8px!important; }
}
