/* Hallmark · macrostructure: centered studio ensemble + alternating product sections · tone: calm, concrete product presentation · anchor hue: orange · user-directed film DNA · P4/H4/E4/S4/R4/V4 */
@import url('tokens.css');
* {
  box-sizing:border-box
}
html {
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  overflow-x:clip;
  background:var(--color-paper);
  color:var(--color-ink);
  font:400 var(--text-body)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  color:inherit
}
button,a {
  touch-action:manipulation
}
a {
  color:inherit;
  text-decoration:none
}
a,button {
  white-space:nowrap
}
button {
  background:none;
  border:0
}
img,video {
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-family:var(--font-display);
  font-style:normal;
  overflow-wrap:anywhere;
  min-width:0
}
h1,h2 {
  font-weight:650;
  letter-spacing:-.05em;
  line-height:1.05
}
h1 {
  font-size:clamp(2.25rem,9.5vw,4rem)
}
h2 {
  font-size:var(--text-section)
}
h3 {
  font-size:1.375rem;
  letter-spacing:-.035em;
  line-height:1.35
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible {
  outline:3px solid var(--color-focus);
  outline-offset:5px
}
button:disabled {
  opacity:.55;
  cursor:not-allowed
}
.text-link:active,.icon-button:active {
  opacity:.7
}
[hidden] {
  display:none!important
}
::selection {
  background:var(--color-accent);
  color:var(--color-device)
}
.container {
  width:100%;
  max-width:var(--page-width);
  margin-inline:auto;
  padding-inline:var(--page-gutter)
}
.accent {
  color:var(--color-accent-display)
}
.muted {
  color:var(--color-muted)
}
.section {
  padding-block:var(--space-2xl)
}
.lead {
  font-size:var(--text-lead);
  line-height:1.65;
  letter-spacing:-.025em
}
.skip-link {
  position:fixed;
  left:var(--space-md);
  top:var(--space-md);
  transform:translateY(-180%);
  padding:var(--space-sm) var(--space-lg);
  background:var(--color-ink);
  color:var(--color-paper);
  z-index:var(--z-modal);
  border-radius:var(--radius-control)
}
.skip-link:focus {
  transform:none
}
.button {
  min-height:44px;
  padding:10px 18px;
  background:var(--color-ink);
  background:color-mix(in srgb,var(--color-ink) 92%,var(--color-paper));
  color:var(--color-paper);
  border-radius:var(--radius-control);
  font-size:1rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  transition:transform var(--dur-micro) var(--ease-out),opacity var(--dur-short) var(--ease-out)
}
.button:hover {
  opacity:.84
}
.button:active {
  transform:translateY(1px)
}
.button span {
  font-size:1.0625rem;
  font-weight:400;
  line-height:1
}
.action-arrow {
  width:22px;
  height:22px;
  flex:none;
  vertical-align:middle
}
.button .action-arrow {
  width:20px;
  height:20px
}
.mobile-nav a[href="#kontakt"] {
  display:flex;
  align-items:center;
  gap:12px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:var(--space-lg);
  min-height:44px;
  padding:6px 0;
  border-bottom:1px solid var(--color-rule);
  font-weight:600;
  font-size:1rem
}
.text-link:hover {
  border-color:var(--color-accent)
}
.icon-button {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  flex:none
}
.icon-button:hover {
  background:var(--color-surface)
}
.icon-button svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.site-header {
  position:sticky;
  top:0;
  z-index:var(--z-sticky);
  background:var(--color-paper);
  border-bottom:var(--rule-width) solid var(--color-rule)
}
.nav-inner {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md)
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.375rem;
  letter-spacing:-.06em;
  min-height:44px
}
.brand img {
  flex:none
}
.desktop-nav {
  display:none;
  align-items:center;
  gap:32px;
  font-size:.9375rem;
  font-weight:500
}
.desktop-nav a {
  min-height:44px;
  display:flex;
  align-items:center
}
.desktop-nav a:hover {
  color:var(--color-accent-text)
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:6px
}
.nav-cta {
  display:none
}
.language-switch { display:flex; align-items:center; gap:1px; font-size:13px; white-space:nowrap }
.language-switch a { display:grid; place-items:center; min-width:28px; min-height:44px; color:var(--color-muted) }
.language-switch a[aria-current] { color:var(--color-ink); font-weight:700 }
.language-switch a:hover { color:var(--color-accent-text) }
.language-switch>span { opacity:.35 }
.geo-credit { flex-basis:100%; font-size:12px; color:var(--color-muted) }
@media(max-width:23rem) {
  .nav-inner { gap:4px }
  .nav-inner .brand { font-size:1.125rem; gap:7px }
  .nav-actions { gap:0 }
  .nav-actions .icon-button { width:40px; min-width:40px }
}
.theme-toggle .sun {
  display:none
}
[data-theme='dark'] .theme-toggle .sun {
  display:block
}
[data-theme='dark'] .theme-toggle .moon {
  display:none
}
.mobile-nav {
  padding-top:var(--space-sm);
  padding-bottom:var(--space-lg);
  display:grid;
  gap:var(--space-xs)
}
.mobile-nav a {
  padding:8px 0;
  font-size:1rem
}
.menu-toggle[aria-expanded='true'] {
  background:var(--color-surface)
}
.hero {
  padding-top:var(--space-xl);
  padding-bottom:var(--space-lg);
  display:grid;
  justify-items:center;
  gap:32px
}
.hero-copy {
  min-width:0;
  text-align:center
}
.hero h1 {
  font-size:clamp(2.2rem,6vw,5rem);
  line-height:1.08
}
.hero .lead {
  max-width:52ch;
  margin-inline:auto;
  margin-top:var(--space-md);
  color:var(--color-muted);
  font-size:clamp(1.0625rem,1.75vw,1.5rem);
  line-height:1.5
}
.hero-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px 28px
}
.connection-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-size:1rem;
  color:var(--color-muted)
}
.connection-link svg {
  width:20px;
  height:24px;
  fill:none;
  stroke:var(--color-accent-text);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.connection-link:hover {
  color:var(--color-ink)
}
.hero-product {
  position:relative;
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 20px
}
.mac-device {
  position:relative;
  filter:drop-shadow(0 20px 16px var(--color-shadow))
}
.mac-lid {
  background:var(--color-device);
  padding:1.3%;
  border:1px solid var(--color-device-edge);
  border-radius:2.8% 2.8% 1.3% 1.3%;
  overflow:hidden
}
.mac-lid img {
  width:100%;
  border-radius:1%;
  aspect-ratio:3024/1744;
  object-fit:cover
}
.mac-base {
  height:2.8%;
  min-height:9px;
  width:106%;
  margin-left:-3%;
  background:linear-gradient(var(--color-metal-top),var(--color-metal-bottom));
  border:1px solid var(--color-device-edge);
  border-radius:1px 1px 24px 24px;
  position:absolute;
  top:99.8%
}
.mac-base span {
  display:block;
  width:16%;
  height:40%;
  margin:auto;
  background:var(--color-metal-notch);
  border-radius:0 0 8px 8px
}
.hero-item {
  min-width:0;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 2
}
.hero-item-mac {
  grid-column:1 / -1;
  width:80%;
  justify-self:center
}
.hero-device-stage {
  min-width:0;
  align-self:center
}
.hero-item figcaption {
  margin-top:0;
  text-align:center
}
.hero-item figcaption a {
  display:block;
  min-height:52px;
  white-space:normal;
  line-height:1.5
}
.hero-item figcaption strong {
  display:block;
  font-size:clamp(1.125rem,1.6vw,1.375rem);
  font-weight:550
}
.hero-item figcaption a>span {
  color:var(--color-muted);
  font-size:1rem
}
.hero-item figcaption a:hover strong {
  color:var(--color-accent-text)
}
.hero-mac {
  width:94%;
  margin-inline:3%
}
.hero-mac .mac-base {
  min-height:4px
}
.ipad-device {
  background:var(--color-device);
  border:1px solid var(--color-device-edge);
  padding:2.2%;
  border-radius:5%;
  overflow:hidden;
  box-shadow:0 16px 24px var(--color-shadow)
}
.ipad-device img {
  width:100%;
  aspect-ratio:2360/1640;
  object-fit:cover;
  border-radius:2.8%
}
.hero-ipad {
  width:100%;
  padding:4%;
  border-radius:7%
}
.hero-sound {
  position:relative;
  width:100%;
  aspect-ratio:1.25;
  container-type:inline-size
}
.director-section {
  padding-top:var(--space-xl)
}
.section-intro {
  display:grid;
  gap:var(--space-lg);
  margin-bottom:var(--space-xl);
  align-items:end
}
.section-intro p {
  color:var(--color-muted);
  font-size:var(--text-lead);
  max-width:43ch;
  line-height:1.55;
  letter-spacing:-.02em
}
.product-tabs {
  display:flex;
  gap:var(--space-lg);
  margin-bottom:var(--space-lg);
  border-bottom:1px solid var(--color-rule)
}
.product-tabs button {
  padding:var(--space-sm) 0;
  font-size:1rem;
  border-bottom:2px solid transparent;
  position:relative;
  bottom:-1px;
  color:var(--color-muted)
}
.product-tabs button[aria-selected='true'] {
  border-color:var(--color-accent);
  color:var(--color-ink);
  font-weight:650
}
.app-capture {
  border-radius:10px;
  border:1px solid var(--color-device-edge);
  background:var(--color-device);
  overflow:hidden;
  aspect-ratio:3024/1744
}
.app-capture img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top
}
.tab-panels figure:focus-visible {
  outline-offset:8px
}
.tab-panels figcaption {
  display:grid;
  gap:4px;
  padding-top:var(--space-lg);
  font-size:var(--text-lead);
  line-height:1.55
}
.tab-panels figcaption strong {
  font-weight:550
}
.tab-panels figcaption span {
  color:var(--color-muted)
}
.tab-panels figure:not([hidden]) {
  animation:crossfade var(--dur-short) var(--ease-out)
}
.scope-note {
  color:var(--color-muted);
  font-size:clamp(1rem,1.35vw,1.125rem);
  margin-top:var(--space-lg);
  max-width:85ch
}
.reader-section {
  background:var(--color-surface)
}
.split {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-xl);
  align-items:center
}
.feature-copy {
  max-width:32rem
}
.feature-copy p {
  margin-top:var(--space-lg);
  font-size:var(--text-lead);
  letter-spacing:-.02em;
  line-height:1.55
}
.feature-copy .text-link {
  margin-top:var(--space-lg)
}
.accent-rule {
  display:block;
  width:32px;
  height:3px;
  background:var(--color-accent);
  margin-bottom:var(--space-lg)
}
.reader-visual {
  grid-row:2;
  min-width:0
}
.reader-ipad {
  width:100%;
  transform:perspective(1800px) rotateY(6deg) rotateZ(-1deg)
}
.reader-options {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-lg);
  margin-top:var(--space-lg)
}
.reader-options button {
  font-size:1rem;
  padding:8px 0;
  border-bottom:2px solid transparent;
  color:var(--color-muted);
  min-height:44px
}
.reader-options button[aria-pressed='true'] {
  border-color:var(--color-accent);
  color:var(--color-ink)
}
.sound-visual {
  position:relative;
  min-width:0;
  padding-bottom:130px;
  container-type:inline-size;
  margin-top:var(--space-md)
}
.sound-device {
  width:95%;
  background:var(--color-device);
  border:2px solid var(--color-device-edge);
  padding:3%;
  border-radius:5%;
  box-shadow:0 16px 24px var(--color-shadow);
  transform:perspective(1500px) rotateY(-5deg) rotateZ(1deg)
}
.guition-screen {
  width:100%;
  aspect-ratio:1280/800;
  border-radius:1.5%;
  object-fit:contain
}
.controller-cable {
  position:absolute;
  width:95%;
  top:calc(100% - 145px);
  left:0;
  height:100px;
  stroke:var(--color-device-edge);
  stroke-width:4;
  overflow:visible
}
.controller {
  position:absolute;
  right:4%;
  bottom:57px;
  width:140px;
  height:84px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--color-metal-top),var(--color-metal-bottom));
  border:2px solid var(--color-device-edge);
  box-shadow:0 8px 12px var(--color-shadow);
  transform:rotate(-9deg);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px
}
.screw {
  position:absolute;
  width:5px;
  height:5px;
  background:var(--color-metal-notch);
  border-radius:50%
}
.s1 {
  left:9px;
  top:8px
}
.s2 {
  right:9px;
  top:8px
}
.s3 {
  left:9px;
  bottom:8px
}
.s4 {
  right:9px;
  bottom:8px
}
.hardware-button {
  position:relative;
  display:block;
  width:44px;
  height:44px;
  padding:0;
  border:2px solid var(--color-device-edge);
  border-radius:50%;
  background:var(--color-red-edge)
}
.hardware-button>span {
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--color-red),var(--color-red-edge));
  transform:translateY(-5px);
  box-shadow:0 6px 0 var(--color-red-edge);
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)
}
.hardware-button.blue {
  background:var(--color-blue-edge)
}
.hardware-button.blue>span {
  background:linear-gradient(145deg,var(--color-blue),var(--color-blue-edge));
  box-shadow:0 6px 0 var(--color-blue-edge)
}
.hardware-button.red:active>span,.hardware-button.red.is-pressed>span {
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--color-red-edge)
}
.hardware-caption {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  gap:2px;
  color:var(--color-muted);
  font-size:.875rem;
  text-align:center
}
.hardware-caption small {
  font-size:.75rem
}
.workflow-section {
  background:var(--color-surface)
}
.workflow-list {
  list-style:none;
  padding:0;
  margin:var(--space-2xl) 0;
  display:grid;
  gap:var(--space-xl)
}
.workflow-list li {
  border-top:1px solid var(--color-rule);
  padding-top:var(--space-lg);
  min-width:0
}
.workflow-list li>span {
  display:block;
  font-size:clamp(2.5rem,4.5vw,3.75rem);
  font-weight:400;
  letter-spacing:-.05em;
  line-height:1.1;
  color:var(--color-accent-text);
  font-variant-numeric:tabular-nums
}
.workflow-list h3 {
  margin-top:var(--space-lg);
  font-size:clamp(1.375rem,1.9vw,1.625rem);
  font-weight:550
}
.workflow-list p {
  font-size:var(--text-body);
  line-height:1.55;
  color:var(--color-muted);
  margin-top:var(--space-sm);
  max-width:28ch
}
.workflow-note {
  display:grid;
  gap:var(--space-xl);
  padding-top:var(--space-2xl);
  border-top:1px solid var(--color-rule);
  font-size:var(--text-lead);
  line-height:1.55
}
.workflow-note h3 {
  font-size:clamp(2.125rem,3.6vw,3.25rem);
  font-weight:550;
  letter-spacing:-.04em;
  line-height:1.15
}
.workflow-note strong {
  display:block;
  margin-bottom:var(--space-xs);
  color:var(--color-ink);
  font-weight:550
}
.workflow-note p {
  color:var(--color-muted);
  max-width:48ch
}
.workflow-note p+p {
  margin-top:var(--space-lg)
}
.connection-art {
  margin-top:var(--space-lg);
  max-width:520px
}
.connection-art svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
.connection-path,.connection-symbol {
  stroke:var(--color-accent-text)
}
.connection-symbol-bg {
  fill:var(--color-surface);
  stroke:var(--color-rule)
}
.diagram-device {
  fill:var(--color-device);
  stroke:var(--color-device-edge);
  stroke-width:1
}
.diagram-metal {
  fill:var(--color-metal-top)
}
.diagram-screen {
  fill:var(--color-screen)
}
.diagram-timecode {
  fill:var(--color-screen-cue);
  font:15px ui-monospace,monospace
}
.diagram-tracks {
  stroke:var(--color-screen-muted);
  opacity:.7
}
.timecode-path {
  stroke:var(--color-muted)
}
.diagram-controller {
  stroke:var(--color-device-edge);
  stroke-width:1
}
.diagram-record {
  fill:var(--color-red)
}
.diagram-label .diagram-caption {
  font-size:13px
}
.diagram-label {
  fill:var(--color-muted);
  font-family:var(--font-body);
  font-size:16px
}
@media(max-width:39.999rem) {
  .diagram-label {
    font-size:22px
  }
  .diagram-label .diagram-caption {
    font-size:18px
  }
}
.studio-art {
  display:block;
  width:min(100%,460px);
  height:auto;
  margin:var(--space-xl) auto 0
}
.art-line {
  stroke:var(--color-muted)
}
.art-mic {
  fill:var(--color-surface);
  stroke:var(--color-muted);
  stroke-width:1.5
}
.art-paper {
  fill:var(--color-raised);
  stroke:var(--color-rule);
  stroke-width:1.5
}
.art-cue {
  fill:var(--color-accent);
  fill-opacity:.15
}
.art-accent {
  stroke:var(--color-accent-text)
}
.collaboration-heading .lead {
  margin-top:var(--space-lg);
  color:var(--color-muted)
}
.collaboration-options {
  display:grid;
  gap:var(--space-xl);
  margin-top:var(--space-2xl)
}
.collaboration-options article {
  border-top:1px solid var(--color-rule);
  padding-top:var(--space-lg)
}
.collaboration-options p {
  margin-top:var(--space-md);
  color:var(--color-muted);
  max-width:45ch;
  font-size:var(--text-body);
  line-height:1.6
}
.collaboration-options h3 {
  font-size:clamp(1.5rem,2.2vw,2rem);
  font-weight:550
}
.collaboration-options article {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.collaboration-options p {
  margin-bottom:var(--space-xl)
}
.collaboration-options .text-link,.collaboration-options .button {
  margin-top:auto
}
.email-link {
  font-size:1rem;
  color:var(--color-muted);
  border-bottom:1px solid var(--color-rule);
  padding-block:8px
}
.site-footer {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 24px;
  padding-block:var(--space-xl);
  font-size:.875rem;
  color:var(--color-muted)
}
.site-footer .brand {
  color:var(--color-ink);
  font-size:1.125rem
}
.site-footer p {
  flex-basis:100%
}
.footer-links {
  display:flex;
  flex-basis:100%;
  flex-wrap:wrap;
  gap:12px 24px
}
.footer-links a:hover { color:var(--color-ink) }
.site-footer .company-details { margin:0; line-height:1.7 }
[data-content-id] { white-space:pre-line }
.copyright {
  margin-right:auto
}
.back-top {
  padding-block:12px
}
.back-top:hover,.email-link:hover {
  color:var(--color-ink)
}
.film-section {
  padding-top:0
}
.film-layout {
  display:grid;
  gap:var(--space-xl);
  align-items:center;
  border-top:1px solid var(--color-rule);
  padding-top:var(--space-2xl)
}
.film-copy h2 {
  font-size:clamp(2rem,3.8vw,3.5rem)
}
.film-copy p {
  margin-top:var(--space-md);
  color:var(--color-muted);
  font-size:var(--text-body)
}
.film-preview {
  position:relative;
  display:block;
  padding:0;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:var(--color-paper)
}
.film-preview img {
  width:100%;
  height:100%;
  object-fit:cover
}
.film-preview-dark {
  display:none
}
[data-theme='dark'] .film-preview-light {
  display:none
}
[data-theme='dark'] .film-preview-dark {
  display:block
}
.film-preview-play {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:12px 20px;
  border-radius:var(--radius-control);
  background:var(--color-ink);
  color:var(--color-paper);
  font-size:1rem;
  transition:opacity var(--dur-short) var(--ease-out)
}
.film-preview-play svg {
  width:20px;
  height:20px;
  fill:currentColor
}
.film-preview:hover .film-preview-play {
  opacity:.82
}
@media(min-width:40rem) {
  .film-layout {
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:var(--space-2xl)
  }
}
.film-player {
  min-width:0
}
.film-stage {
  display:grid;
  aspect-ratio:16/9;
  border-radius:var(--radius-surface);
  background:var(--color-paper)
}
.film-stage > .film-preview,.film-stage > video {
  grid-area:1/1;
  width:100%;
  height:100%;
  min-width:0;
  aspect-ratio:16/9;
  border-radius:inherit;
  overflow:hidden;
  background:var(--color-paper)
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.video-error {
  font-size:.875rem;
  color:var(--color-muted);
  margin-top:var(--space-md)
}
.video-error a {
  text-decoration:underline
}
.noscript-note {
  padding:var(--space-md);
  text-align:center
}
.noscript-note a {
  text-decoration:underline
}
@keyframes crossfade {
  from {
    opacity:.25
  }
  to {
    opacity:1
  }
}
@media(min-width:40rem) {
  .hero {
    padding-top:var(--space-xl);
    padding-bottom:var(--space-lg)
  }
  .hero-product {
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.94fr);
    grid-template-rows:auto auto;
    gap:20px 28px;
    margin-top:var(--space-md)
  }
  .hero-item-mac {
    grid-column:auto;
    width:100%
  }
  .nav-cta {
    display:inline-flex
  }
  .workflow-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .tab-panels figcaption {
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
    gap:var(--space-xl)
  }
  .collaboration-options {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-2xl)
  }
  .sound-visual {
    max-width:680px;
    width:100%;
    margin-inline:auto
  }
  .controller {
    width:174px;
    height:104px;
    bottom:56px;
    gap:20px
  }
  .hardware-button {
    width:53px;
    height:53px
  }
  .hardware-button>span {
    transform:translateY(-7px)
  }
  .site-footer p {
    flex-basis:auto
  }
  .copyright {
    margin-left:auto;
    margin-right:0
  }
}
@media(min-width:64rem) {
  .desktop-nav {
    display:flex
  }
  .menu-toggle,.mobile-nav {
    display:none!important
  }
  .nav-inner {
    height:88px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)
  }
  .nav-actions {
    justify-self:end;
    gap:var(--space-sm)
  }
  .nav-inner>.brand {
    grid-column:2;
    grid-row:1;
    justify-self:center
  }
  .desktop-nav {
    grid-column:1;
    grid-row:1
  }
  .nav-actions {
    grid-column:3;
    grid-row:1
  }
  .director-section {
    padding-top:var(--space-xl);
    padding-bottom:var(--space-2xl)
  }
  .section-intro {
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--space-3xl);
    margin-bottom:var(--space-2xl)
  }
  .director-section .section-intro {
    grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
    gap:var(--space-xl);
    align-items:center;
    margin-bottom:var(--space-xl)
  }
  .product-tabs {
    gap:var(--space-xl)
  }
  .app-capture {
    border-radius:14px
  }
  .tab-panels figcaption {
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--space-3xl)
  }
  .split {
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:var(--space-2xl)
  }
  .split.reverse {
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:var(--space-3xl)
  }
  .reader-visual {
    grid-row:auto;
    width:108%;
    margin-left:-8%
  }
  .reader-section .feature-copy {
    padding-left:var(--space-lg)
  }
  .sound-visual {
    width:109%;
    max-width:none;
    margin:24px 0 0;
    padding-bottom:150px
  }
  .controller-cable {
    top:calc(100% - 165px);
    height:120px
  }
  .controller {
    bottom:60px;
    width:188px;
    height:112px
  }
  .hardware-caption {
    bottom:0
  }
  .workflow-list {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-xl);
    margin-block:var(--space-2xl) var(--space-2xl)
  }
  .workflow-note {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--space-2xl);
    align-items:center
  }
  .collaboration-intro {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    align-items:center;
    gap:var(--space-xl)
  }
  .studio-art {
    margin:0;
    width:100%
  }
  .collaboration-heading h2 {
    font-size:clamp(2.625rem,4.2vw,4rem)
  }
  .collaboration-options {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-2xl);
    margin-top:var(--space-2xl)
  }
  .site-footer {
    padding-block:var(--space-xl)
  }

}
/* Decorative opening ensemble: scale the same hardware model with its screen. */
.hero-sound .sound-device {
  width:100%;
  border-width:1px;
  transform:none
}
.hero-sound .controller-cable {
  width:100%;
  height:auto;
  top:76%;
  left:0
}
.hero-sound .controller {
  width:26%;
  height:auto;
  aspect-ratio:1.65;
  right:4%;
  bottom:0;
  border-width:1px;
  border-radius:9%;
  gap:10%
}
.hero-sound .hardware-button {
  width:30%;
  height:auto;
  aspect-ratio:1;
  border-width:1px
}
.hero-sound .hardware-button>span {
  inset:1px;
  transform:translateY(-1px);
  box-shadow:0 2px 0 var(--color-red-edge)
}
.hero-sound .hardware-button.blue>span {
  box-shadow:0 2px 0 var(--color-blue-edge)
}
.hero-sound .screw {
  width:3%;
  height:5%
}
.hero-sound .s1,.hero-sound .s3 {
  left:8%
}
.hero-sound .s2,.hero-sound .s4 {
  right:8%
}
.hero-sound .s1,.hero-sound .s2 {
  top:10%
}
.hero-sound .s3,.hero-sound .s4 {
  bottom:10%
}
/* Continuous canvas and fluid rhythm: keep the approved device-led composition. */
body,.site-header,.button,.film-preview,.film-preview-play {
  transition:background-color var(--dur-short) ease,color var(--dur-short) ease,border-color var(--dur-short) ease,opacity var(--dur-short) ease,transform var(--dur-short) var(--ease-out)
}
.site-header {
  border-bottom-color:transparent
}
.reader-section,.workflow-section {
  background:transparent
}
.section,.director-section {
  padding-block:var(--space-section)
}
.hero {
  gap:var(--space-flow);
  padding-bottom:var(--space-md)
}
.hero-product {
  column-gap:clamp(1rem,2.4vw,2rem)
}
.hero-item figcaption strong,.desktop-nav a,.connection-link {
  transition:color var(--dur-short) ease
}
.section-intro,.director-section .section-intro {
  gap:var(--space-flow);
  margin-bottom:var(--space-flow);
  align-items:center
}
.split,.split.reverse,.workflow-note,.collaboration-intro,.film-layout {
  gap:var(--space-columns)
}
.feature-copy {
  max-width:none
}
.accent-rule {
  display:none
}
.product-tabs,.reader-options {
  position:relative;
  column-gap:clamp(1.25rem,3.4vw,2.5rem)
}
.product-tabs {
  border-bottom:0;
  margin-bottom:var(--space-lg)
}
.product-tabs button,.reader-options button {
  transition:color var(--dur-short) ease
}
[data-indicator]::after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:var(--selection-width);
  transform:translateX(var(--selection-left));
  background:var(--color-accent-display);
  transition:transform var(--dur-long) var(--ease-out),width var(--dur-long) var(--ease-out);
  pointer-events:none
}
.product-tabs[data-indicator] button[aria-selected],.reader-options[data-indicator] button[aria-pressed] {
  border-bottom-color:transparent
}
.reader-options {
  flex-wrap:nowrap
}
.reader-options button {
  white-space:normal;
  line-height:1.4
}
.reader-ipad {
  display:grid
}
.reader-ipad img {
  grid-area:1 / 1;
  opacity:0;
  transition:opacity var(--dur-long) var(--ease-out)
}
.reader-ipad img.is-active {
  opacity:1
}
.tab-panels figcaption {
  column-gap:var(--space-columns);
  row-gap:var(--space-xs)
}
.workflow-list {
  gap:var(--space-flow);
  margin-block:var(--space-flow) var(--space-section)
}
.workflow-list li {
  border-top:0;
  padding-top:0
}
.workflow-note {
  border-top:0;
  padding-top:var(--space-flow)
}
.connection-symbol-bg {
  fill:var(--color-paper)
}
.collaboration-intro {
  display:grid;
  align-items:center
}
.collaboration-heading .lead {
  max-width:39ch;
  line-height:1.55
}
.contact-detail {
  max-width:48ch;
  margin-top:var(--space-md);
  color:var(--color-muted);
  line-height:1.6
}
.contact-cta {
  margin-top:var(--space-flow)
}
.studio-art {
  margin:0 auto;
  width:min(100%,380px)
}
.film-section {
  padding-top:0
}
.film-layout {
  border-top:0;
  padding-top:var(--space-flow)
}
.film-preview img {
  transition:transform var(--dur-long) var(--ease-out)
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .film-preview:hover img {
    transform:scale(1.025)
  }
}
@media(min-width:54rem) {
  .split,.split.reverse {
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)
  }
  .split.reverse {
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)
  }
  .reader-visual {
    grid-row:auto;
    width:100%;
    margin-left:0
  }
  .reader-section .feature-copy {
    padding-left:0
  }
  .sound-visual {
    width:100%;
    margin:0;
    max-width:none
  }
  .section-intro {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .director-section .section-intro {
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)
  }
  .workflow-note {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center
  }
  .collaboration-intro {
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)
  }
  .studio-art {
    width:100%
  }
}
/* Scroll-linked depth belongs to the hardware; captions and controls keep their layout. */
.sound-visual {
  padding-bottom:0
}
.sound-hardware {
  position:relative;
  padding-bottom:130px
}
@media(min-width:64rem) {
  .sound-hardware {
    padding-bottom:150px
  }
}
[data-scroll-drift] {
  --drift-distance:var(--scroll-drift-distance);
  translate:0 var(--device-drift-y,0px)
}
.hero-item [data-scroll-drift] {
  --drift-distance:var(--scroll-drift-hero)
}
[data-scroll-drift].is-drifting {
  will-change:translate
}
@media(max-width:39.999rem) {
  [data-scroll-drift],.hero-item [data-scroll-drift] {
    --drift-distance:var(--scroll-drift-mobile)
  }
}
/* User-requested scroll entrances. Content is fully visible without enhancement. */
[data-scroll-device] {
  --entrance-tilt:0deg;
  --entrance-delay:0ms;
  transform-origin:center center
}
[data-scroll-order='1'] {
  --entrance-delay:75ms
}
[data-scroll-order='2'] {
  --entrance-delay:150ms
}
[data-scroll-device='ipad'] {
  --entrance-tilt:-.5deg
}
[data-scroll-device='sound'] {
  --entrance-tilt:.5deg
}
[data-scroll-device='illustration'] {
  --entrance-travel:14px;
  --entrance-scale:1
}
@keyframes device-enter {
  from {
    opacity:.65;
    transform:translateY(var(--entrance-travel)) scale(var(--entrance-scale)) rotate(var(--entrance-tilt))
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1) rotate(0)
  }
}
@media(prefers-reduced-motion:no-preference) {
  [data-scroll-device].is-entering {
    animation:device-enter var(--dur-entrance) var(--ease-entrance) var(--entrance-delay) both;
    will-change:transform,opacity
  }
}
@media(max-width:39.999rem) {
  [data-scroll-device] {
    --dur-entrance:650ms;
    --entrance-travel:14px;
    --entrance-scale:.995;
    --entrance-tilt:0deg;
    --entrance-delay:0ms
  }
}
@media(prefers-reduced-motion:reduce) {
  [data-scroll-drift] {
    translate:none!important;
    will-change:auto
  }
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}

/* Contacts are loaded only after a deliberate click; both themes share the layout. */
.contact-values {
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  align-items:center;
  min-height:54px;
}
.contact-values[hidden], [data-contact-reveal] button[hidden] { display:none }
.contact-value {
  border-bottom:1px solid var(--color-rule);
  padding-block:8px;
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  color:var(--color-ink);
  overflow-wrap:anywhere;
}
.contact-value:hover { color:var(--color-accent) }
.contact-status {
  margin:8px 0 0;
  font-size:.875rem;
  color:var(--color-muted);
  line-height:1.5;
}
.contact-status:empty { display:none }
.footer-contact .contact-values { min-height:0; gap:8px 24px }
.footer-contact .contact-value { font-size:1rem }
.footer-contact .email-link { background:none; border:0; border-bottom:1px solid var(--color-rule); cursor:pointer }
[data-contact-reveal] button:disabled { cursor:wait; opacity:.7 }