:root {
  color-scheme:dark;
  --bg:#0d0d11;
  --surface:#15151b;
  --surface2:#1e1e25;
  --line:#ffffff14;
  --white:#fff;
  --muted:#a5a2ae;
  --purple:#7964b5;
  --lavender:#d0bcff;
  --font-body:'Segoe UI',Arial,sans-serif;
  --font-display:'Segoe UI',Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

.container {
  width:min(1140px,calc(100% - 64px));
  margin-inline:auto
}

.skip-link {
  position:absolute;
  top:-60px;
  left:16px;
  background:var(--lavender);
  color:#17131e;
  padding:10px 16px;
  z-index:20
}

.skip-link:focus {
  top:10px
}

.site-header {
  height:82px;
  border-bottom:1px solid #ffffff0b;
  position:relative;
  z-index:10;
  background:#0d0d11eF
}

.nav-wrap {
  width:min(1280px,calc(100% - 64px));
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font:600 17px var(--font-display);
  letter-spacing:-.7px
}

.brand-light {
  color:#ddd6ed
}

.brand small {
  display:block;
  font:600 8px var(--font-body);
  letter-spacing:2.7px;
  color:#9d97aa;
  margin-top:-2px
}

.brand-mark {
  width:28px;
  height:28px;
  border-radius:9px;
  background:#4b3e76;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  transform:rotate(-5deg)
}

.brand-mark i {
  display:block;
  width:4px;
  background:#fff;
  border-radius:3px;
  height:11px
}

.brand-mark i:nth-child(2) {
  height:16px;
  background:var(--lavender)
}

.brand-mark i:nth-child(3) {
  height:8px
}

.navigation {
  display:flex;
  align-items:center;
  gap:37px;
  font-size:13px;
  color:#b5b2bd
}

.navigation>a:not(.nav-cta):hover,.navigation>a.active {
  color:white
}

.nav-cta {
  padding:10px 15px;
  border:1px solid #ffffff23;
  border-radius:5px;
  color:#fff;
  font-size:12px;
  transition:.2s
}

.nav-cta:hover {
  background:#ffffff0e;
  border-color:#ffffff55
}

.nav-cta span {
  color:var(--lavender);
  margin-left:10px
}

.menu-toggle {
  display:none
}

.hero {
  min-height:665px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  position:relative;
  padding-top:12px
}

.hero-copy {
  position:relative;
  z-index:2;
  padding-bottom:34px
}

.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  font-weight:700;
  color:#aaa5b5;
  display:flex;
  align-items:center;
  gap:10px
}

.eyebrow-dot,.status-pulse {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#bc9aff;
  display:inline-block;
  box-shadow:0 0 14px #9b7bea
}

.hero h1,.page-hero h1 {
  font:600 clamp(54px,7vw,86px)/1.03 var(--font-display);
  letter-spacing:-5px;
  margin:25px 0 21px
}

.gradient-text {
  background:linear-gradient(110deg,#e2d5ff,#987bd0 76%);
  color:transparent;
  background-clip:text
}

.hero-lead,.page-hero>p {
  max-width:450px;
  color:#aaa7b1;
  font-size:16px;
  line-height:1.8
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:33px
}

.button {
  display:inline-flex;
  align-items:center;
  gap:25px;
  padding:14px 19px;
  border-radius:4px;
  font-size:12px;
  font-weight:600;
  transition:.2s
}

.button-primary {
  background:#4b3e76;
  color:white;
  box-shadow:0 8px 25px #4b3e7626
}

.button-primary:hover {
  background:#5b4b8d;
  transform:translateY(-2px)
}

.button span {
  font-size:17px;
  color:var(--lavender)
}

.text-link {
  font-size:12px;
  color:#ddd9e4
}

.text-link span {
  color:var(--lavender);
  padding-left:7px
}

.text-link:hover {
  color:var(--lavender)
}

.hero-note {
  display:flex;
  align-items:center;
  gap:12px;
  color:#777480;
  font-size:11px;
  margin-top:53px
}

.note-line {
  height:1px;
  width:30px;
  background:#715e9d
}

.hero-art {
  height:510px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:-35px
}

.art-orbit {
  border:1px solid #9d84d41a;
  border-radius:50%;
  position:absolute
}

.orbit-one {
  width:450px;
  height:450px
}

.orbit-two {
  width:350px;
  height:350px;
  border-style:dashed;
  animation:orbit 90s linear infinite
}

.art-glow {
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  background:#634a9a;
  filter:blur(110px);
  opacity:.18
}

.app-window {
  position:absolute;
  border:1px solid #ffffff18;
  border-radius:9px;
  background:#1b1a21eF;
  box-shadow:0 30px 90px #0008
}

.window-back {
  width:255px;
  height:250px;
  right:40px;
  top:117px;
  transform:rotate(8deg);
  padding:17px;
  opacity:.65
}

.window-dots {
  display:flex;
  gap:4px;
  margin-bottom:32px
}

.window-dots i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#777
}

.fake-line {
  height:6px;
  width:46%;
  border-radius:5px;
  background:#77717f;
  margin:12px 0
}

.fake-line.wide {
  width:72%;
  height:9px;
  background:#b1a4ce
}

.fake-card {
  height:82px;
  margin-top:25px;
  background:linear-gradient(120deg,#373042,#25232d);
  border-radius:5px
}

.window-front {
  width:340px;
  height:278px;
  left:42px;
  top:147px;
  padding:20px;
  transform:rotate(-3deg)
}

.window-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #ffffff10;
  padding-bottom:17px
}

.mini-mark {
  display:flex;
  gap:2px;
  align-items:center
}

.mini-mark i {
  height:9px;
  width:3px;
  border-radius:2px;
  background:#a18bc9
}

.mini-mark i:nth-child(2) {
  height:14px
}

.window-label {
  font-size:8px;
  letter-spacing:1.5px;
  color:#787380
}

.window-menu {
  color:#aaa;
  font-size:18px;
  letter-spacing:2px
}

.window-content {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:23px
}

.window-icon {
  width:38px;
  height:38px;
  background:#4b3e76;
  border-radius:8px;
  display:grid;
  place-items:center
}

.window-icon svg {
  width:19px;
  stroke:#e5d9ff;
  fill:none;
  stroke-width:1.5
}

.window-content strong,.window-content span {
  display:block
}

.window-content strong {
  font:600 14px var(--font-display)
}

.window-content span {
  font-size:10px;
  color:#918d98;
  margin-top:2px
}

.waveform {
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  margin-top:23px
}

.waveform i {
  width:3px;
  border-radius:3px;
  background:#9c84cf;
  height:calc(8px + (var(--i,1)*1px));
  opacity:.8
}

.waveform i:nth-child(4n) {
  height:28px
}

.waveform i:nth-child(3n) {
  height:19px
}

.waveform i:nth-child(5n) {
  height:35px
}

.player-row {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:10px
}

.play-button {
  height:26px;
  width:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#4b3e76;
  color:#e5d9ff;
  font-size:9px;
  padding-left:2px
}

.player-track {
  height:3px;
  background:linear-gradient(90deg,#a58bdf 42%,#ffffff1c 42%);
  flex:1;
  border-radius:3px
}

.player-time {
  font-size:9px;
  color:#918d98
}

.floating-tag {
  position:absolute;
  z-index:2;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #ffffff1b;
  background:#17161deF;
  padding:11px 14px;
  border-radius:6px;
  box-shadow:0 12px 40px #0005
}

.tag-top {
  top:93px;
  left:14px
}

.tag-bottom {
  right:1px;
  bottom:83px
}

.tag-icon {
  color:var(--lavender);
  font-size:19px
}

.floating-tag b,.floating-tag small {
  display:block
}

.floating-tag b {
  font-size:10px;
  font-weight:600
}

.floating-tag small {
  font-size:9px;
  color:#918d98;
  margin-top:1px
}

.status-pulse {
  width:7px;
  height:7px;
  background:#8fd4ac;
  box-shadow:0 0 12px #8fd4ac
}

.hero-scroll {
  position:absolute;
  bottom:22px;
  left:0;
  font-size:8px;
  letter-spacing:1.7px;
  color:#777480;
  display:flex;
  gap:12px;
  align-items:center
}

.hero-scroll span {
  height:23px;
  width:1px;
  background:#73678f
}

.trust-strip {
  border-block:1px solid #ffffff12;
  background:#101015
}

.trust-inner {
  display:flex;
  height:75px;
  align-items:center;
  justify-content:space-between;
  color:#777480;
  font-size:9px;
  letter-spacing:1.7px
}

.trust-inner>div {
  display:flex;
  align-items:center;
  gap:15px;
  letter-spacing:0;
  color:#dbd8e0;
  font-size:12px
}

.trust-inner>div i {
  height:3px;
  width:3px;
  border-radius:50%;
  background:#866eb9
}

.trust-inner>div b {
  font-weight:500
}

.trust-right span {
  color:#b59ae9;
  font-size:14px;
  padding-left:7px
}

.section {
  padding-top:110px;
  padding-bottom:115px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:42px
}

.section-heading h2,.studio-copy h2,.closing h2,.values-section h2,.about-end h2 {
  font:600 43px/1.13 var(--font-display);
  letter-spacing:-2px;
  margin:18px 0 0
}

.muted-heading {
  color:#777482
}

.arrow-link {
  font-size:11px;
  color:#c1bdc8;
  border-bottom:1px solid #71628d;
  padding-bottom:8px
}

.arrow-link span {
  color:var(--lavender);
  margin-left:20px;
  font-size:15px
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px
}

.product-card {
  min-height:310px;
  border:1px solid #ffffff13;
  border-radius:6px;
  background:linear-gradient(145deg,#18171e,#111115);
  padding:24px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:.25s
}

.product-card:hover {
  border-color:#9079c269;
  transform:translateY(-4px)
}

.product-card:before {
  content:'';
  position:absolute;
  width:170px;
  height:170px;
  border-radius:50%;
  right:-85px;
  top:-90px;
  background:#71579d12;
  filter:blur(10px)
}

.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.product-icon {
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font:600 15px var(--font-display);
  color:#e4dbf5;
  background:linear-gradient(145deg,#54447c,#292334);
  border:1px solid #ffffff1b
}

.product-icon.music {
  background:linear-gradient(145deg,#7855a8,#2e2741)
}

.product-icon.video {
  background:linear-gradient(145deg,#a14b69,#3d2736)
}

.product-icon.vely {
  background:linear-gradient(145deg,#3f7890,#24313c)
}

.product-icon.pdf {
  background:linear-gradient(145deg,#7863a8,#332b45)
}

.product-icon svg {
  width:19px;
  height:19px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5
}

.status-badge {
  font-size:8px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#b8a5dc;
  border:1px solid #a98be43a;
  border-radius:99px;
  padding:5px 9px
}

.product-card h3 {
  font:600 22px var(--font-display);
  margin:24px 0 5px;
  letter-spacing:-.5px
}

.product-card p {
  color:#97939e;
  font-size:12px;
  line-height:1.7;
  margin:0;
  max-width:285px
}

.platform-row {
  display:flex;
  gap:6px;
  margin-top:16px
}

.platform-tag {
  background:#ffffff0a;
  border-radius:3px;
  padding:4px 7px;
  color:#aaa6b1;
  font-size:9px
}

.card-link {
  border-top:1px solid #ffffff12;
  margin-top:auto;
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  color:#d8d4df;
  font-size:10px
}

.card-link span {
  color:var(--lavender);
  font-size:15px
}

.studio-band {
  border-block:1px solid #ffffff0c;
  background:#111115;
  overflow:hidden
}

.studio-inner {
  min-height:440px;
  display:grid;
  grid-template-columns:1.05fr 1.35fr .7fr;
  align-items:center;
  gap:50px;
  position:relative
}

.studio-symbol {
  height:280px;
  display:grid;
  place-items:center;
  position:relative
}

.symbol-ring {
  width:208px;
  height:208px;
  border:1px solid #866eb933;
  border-radius:50%;
  position:absolute
}

.symbol-ring:before,.symbol-ring:after {
  content:'';
  position:absolute;
  border:1px solid #866eb922;
  border-radius:50%;
  inset:20px
}

.symbol-ring:after {
  inset:41px;
  border-style:dashed
}

.symbol-core {
  height:82px;
  width:82px;
  border-radius:26px;
  background:linear-gradient(145deg,#5f4d8b,#292333);
  border:1px solid #b9a3e739;
  box-shadow:0 0 65px #7962ae35;
  display:grid;
  place-items:center;
  font:600 33px var(--font-display);
  transform:rotate(-9deg)
}

.symbol-star {
  position:absolute;
  color:#c7b0f8;
  right:calc(50% - 130px);
  top:44px;
  font-size:18px
}

.studio-copy h2 {
  font-size:39px
}

.studio-copy p {
  color:#9996a0;
  font-size:13px;
  line-height:1.85;
  max-width:405px;
  margin:19px 0 23px
}

.studio-coordinate {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-left:1px solid #ffffff13;
  padding:65px 0 55px 28px;
  color:#716e79;
  font-size:8px;
  letter-spacing:1.4px;
  line-height:1.8
}

.studio-coordinate span:nth-child(2) {
  color:#c7c1d0
}

.closing {
  min-height:345px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  overflow:hidden
}

.closing-orb {
  position:absolute;
  right:27%;
  font-size:140px;
  color:#a080d211;
  transform:rotate(-12deg);
  pointer-events:none
}

.closing h2 {
  font-size:38px;
  margin-top:14px
}

.closing p {
  color:#96929e;
  font-size:12px;
  margin-top:15px
}

.button-light {
  background:#e4dbf5;
  color:#201a2b
}

.button-light span {
  color:#4b3e76
}

.button-light:hover {
  background:#fff;
  transform:translateY(-2px)
}

.site-footer {
  border-top:1px solid #ffffff14;
  background:#0a0a0e
}

.footer-main {
  min-height:150px;
  display:grid;
  grid-template-columns:1.2fr 1.2fr 1fr .8fr;
  align-items:center;
  gap:25px
}

.footer-main>p {
  font-size:10px;
  color:#85818e;
  line-height:1.7
}

.footer-nav {
  display:flex;
  gap:20px;
  font-size:10px;
  color:#a8a4af
}

.footer-nav a:hover,.footer-bottom a:hover {
  color:var(--lavender)
}

.footer-location {
  font-size:8px;
  letter-spacing:1.2px;
  line-height:1.9;
  color:#716d79;
  justify-self:end
}

.footer-bottom {
  height:47px;
  border-top:1px solid #ffffff0d;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:1.3px;
  color:#67636e
}

.footer-bottom b {
  color:#a58cdb;
  font-size:12px;
  margin-left:4px
}

.page-hero {
  padding-top:105px;
  padding-bottom:54px;
  position:relative
}

.page-hero h1 {
  font-size:67px;
  margin:22px 0 18px
}

.page-hero>p {
  font-size:14px;
  max-width:530px
}

.catalogue-stats {
  display:flex;
  gap:50px;
  margin-top:52px;
  border-top:1px solid #ffffff13;
  padding-top:19px;
  color:#6e6b76;
  font-size:8px;
  letter-spacing:1.4px
}

.catalogue-stats b {
  font:500 17px var(--font-display);
  color:#d4cbe6;
  margin-right:8px;
  letter-spacing:0
}

.catalogue {
  padding-bottom:96px
}

.filter-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  border-bottom:1px solid #ffffff15;
  padding-bottom:19px;
  margin-bottom:27px
}

.filter-chip {
  background:transparent;
  border:1px solid #ffffff1b;
  color:#9995a0;
  border-radius:3px;
  padding:8px 13px;
  font-size:10px;
  cursor:pointer
}

.filter-chip:hover,.filter-chip.selected {
  background:#4b3e7638;
  border-color:#8c76c378;
  color:#eee8fa
}

.filter-chip span {
  color:var(--lavender);
  margin-left:6px
}

.catalogue-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}

.catalogue-grid .product-card {
  min-height:300px
}

.catalogue-footnote {
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:#77737e
}

.catalogue-footnote .eyebrow-dot {
  width:5px;
  height:5px
}

.catalogue-note {
  border-block:1px solid #ffffff12;
  background:#111115
}

.note-inner {
  min-height:280px;
  display:flex;
  align-items:center;
  gap:34px;
  position:relative
}

.note-icon {
  width:53px;
  height:53px;
  display:grid;
  place-items:center;
  border:1px solid #9b7cce4a;
  border-radius:14px;
  color:#d0bcff;
  font-size:25px;
  background:#4b3e762b
}

.note-inner h2,.simple-callout h2 {
  font:600 30px/1.2 var(--font-display);
  letter-spacing:-1px;
  margin:12px 0
}

.note-inner p,.simple-callout p {
  font-size:12px;
  color:#96929e;
  max-width:460px
}

.note-index {
  margin-left:auto;
  color:#6e6978;
  align-self:flex-end;
  padding-bottom:32px;
  font-size:9px;
  letter-spacing:1.5px
}

.about-hero {
  padding-bottom:105px
}

.about-story {
  border-block:1px solid #ffffff12;
  background:#111115
}

.story-grid {
  min-height:470px;
  display:grid;
  grid-template-columns:.8fr 1.4fr .8fr;
  align-items:center;
  gap:45px
}

.story-index {
  align-self:start;
  margin-top:80px;
  font:600 25px var(--font-display);
  color:#d7c9f3
}

.story-index span {
  display:block;
  font:600 8px var(--font-body);
  letter-spacing:1.5px;
  color:#77737e;
  margin-top:6px
}

.story-grid h2 {
  font:600 42px/1.12 var(--font-display);
  letter-spacing:-2px;
  margin:0 0 20px
}

.story-grid p {
  font-size:12px;
  line-height:1.9;
  color:#9c98a3;
  max-width:500px
}

.story-grid .text-link {
  display:inline-block;
  margin-top:12px
}

.story-mark {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  font-size:8px;
  letter-spacing:1.5px;
  color:#77737e;
  text-align:center
}

.mark-outer {
  width:176px;
  height:176px;
  border:1px solid #9278c54a;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative
}

.mark-outer:before {
  content:'';
  position:absolute;
  inset:16px;
  border:1px dashed #9278c533;
  border-radius:50%
}

.mark-inner {
  width:90px;
  height:90px;
  border-radius:27px;
  background:linear-gradient(145deg,#5e4d87,#292433);
  display:grid;
  place-items:center;
  font:600 38px var(--font-display);
  transform:rotate(8deg);
  position:relative
}

.mark-inner span {
  position:absolute;
  right:-18px;
  top:-8px;
  color:#d0bcff;
  font-size:17px
}

.values-section {
  padding-top:100px;
  padding-bottom:115px
}

.values-section h2 {
  margin:17px 0 40px
}

.values-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #ffffff16
}

.values-grid article {
  padding:25px 28px 10px 0;
  border-right:1px solid #ffffff16
}

.values-grid article+article {
  padding-left:28px
}

.values-grid article:last-child {
  border:0
}

.values-grid article>span {
  font-size:9px;
  color:#a58cdb
}

.values-grid h3 {
  font:600 19px var(--font-display);
  margin:16px 0 7px
}

.values-grid p {
  font-size:11px;
  color:#928e99;
  max-width:260px
}

.about-end {
  background:#111115;
  border-block:1px solid #ffffff12;
  padding:60px 0
}

.about-end h2 {
  font-size:34px;
  margin:14px 0 23px
}

.detail-page {
  min-height:650px;
  padding-top:35px;
  padding-bottom:90px
}

.back-link {
  display:inline-block;
  font-size:11px;
  color:#a7a2ae;
  padding:10px 0 30px
}

.back-link:hover {
  color:var(--lavender)
}

.detail-hero {
  padding:30px 0 55px;
  display:grid;
  grid-template-columns:1.5fr .8fr;
  gap:50px;
  align-items:center
}

.detail-title-row {
  display:flex;
  gap:20px;
  align-items:center
}

.detail-title-row .product-icon {
  width:58px;
  height:58px;
  font-size:19px
}

.detail-title-row h1 {
  font:600 54px/1 var(--font-display);
  letter-spacing:-3px;
  margin:0 0 8px
}

.detail-title-row .eyebrow {
  margin-top:5px
}

.detail-description {
  color:#aaa6b0;
  font-size:15px;
  max-width:560px;
  margin:25px 0;
  line-height:1.8
}

.detail-alert {
  padding:15px 17px;
  border:1px solid #a98be43a;
  background:#4b3e7620;
  border-radius:4px;
  color:#c2b5db;
  font-size:11px;
  max-width:560px
}

.detail-download {
  border:1px solid #ffffff17;
  background:#15141a;
  padding:23px;
  border-radius:5px
}

.detail-download h2 {
  font:600 16px var(--font-display);
  margin:0 0 8px
}

.detail-download p {
  font-size:11px;
  color:#918d98
}

.detail-download .button {
  margin-top:8px;
  opacity:.55;
  cursor:not-allowed
}

.detail-download .button:enabled {
  opacity:1;
  cursor:pointer
}

.detail-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-block:1px solid #ffffff15;
  margin:15px 0 45px
}

.detail-facts div {
  padding:20px 15px;
  border-right:1px solid #ffffff15
}

.detail-facts div:first-child {
  padding-left:0
}

.detail-facts div:last-child {
  border:0
}

.detail-facts dt {
  font-size:8px;
  color:#77727e;
  letter-spacing:1.3px
}

.detail-facts dd {
  margin:7px 0 0;
  font-size:12px;
  color:#d4cfdd
}

.detail-sections {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px
}

.detail-sections h2 {
  font:600 22px var(--font-display);
  margin:0 0 12px
}

.detail-sections p,.detail-sections li {
  font-size:12px;
  color:#9995a0;
  line-height:1.8
}

.detail-sections ul {
  padding-left:18px
}

.detail-sections li::marker {
  color:#a58cdb
}

.detail-missing {
  padding:20px;
  border-left:2px solid #826cae;
  background:#15141a;
  color:#97929d;
  font-size:11px
}

.simple-content {
  padding-top:0;
  padding-bottom:100px
}

.simple-callout {
  display:flex;
  align-items:flex-start;
  gap:25px;
  border:1px solid #ffffff15;
  background:#131218;
  padding:35px;
  max-width:800px
}

.simple-callout .note-icon {
  flex:none
}

.simple-callout h2 {
  font-size:24px
}

.simple-callout p {
  line-height:1.8
}

.simple-callout .text-link {
  display:inline-block;
  margin-top:12px
}

.detail-empty {
  color:#aaa
}

.detail-empty a {
  color:var(--lavender)
}

@keyframes orbit {
  to {
  transform:rotate(360deg)
}


}

@media(max-width:900px) {
  .hero {
  min-height:610px
}

.hero-art {
  transform:scale(.85);
  margin-left:-65px
}

.hero h1 {
  font-size:68px
}

.studio-inner {
  gap:25px;
  grid-template-columns:.9fr 1.35fr .6fr
}

.studio-coordinate {
  padding-left:17px
}

.footer-main {
  grid-template-columns:1fr 1fr;
  min-height:180px;
  padding-block:25px
}

.footer-location {
  justify-self:start
}

.detail-hero {
  grid-template-columns:1fr  .75fr;
  gap:25px
}

.story-grid {
  gap:25px;
  grid-template-columns:.6fr 1.4fr .7fr
}


}

@media(max-width:680px) {
  .container,.nav-wrap {
  width:calc(100% - 40px)
}

.site-header {
  height:70px
}

.brand {
  font-size:15px
}

.menu-toggle {
  display:flex;
  width:38px;
  height:38px;
  border:1px solid #ffffff20;
  background:transparent;
  border-radius:4px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px
}

.menu-toggle span {
  width:15px;
  height:1px;
  background:#ddd
}

.navigation {
  display:none;
  position:absolute;
  top:69px;
  left:0;
  right:0;
  background:#111115;
  border-bottom:1px solid #ffffff1c;
  padding:18px 20px 22px;
  align-items:stretch;
  gap:0;
  flex-direction:column
}

.navigation.open {
  display:flex
}

.navigation>a {
  padding:12px 4px
}

.navigation .nav-cta {
  margin-top:7px;
  text-align:center
}

.hero {
  min-height:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding-top:78px;
  padding-bottom:63px
}

.hero-copy {
  padding:0
}

.hero h1 {
  font-size:60px;
  letter-spacing:-3.5px;
  margin-top:20px
}

.hero-lead {
  font-size:14px;
  max-width:390px
}

.hero-actions {
  gap:16px;
  flex-wrap:wrap;
  margin-top:26px
}

.button {
  padding:13px 15px;
  gap:13px
}

.hero-note {
  margin-top:28px
}

.hero-art {
  height:360px;
  margin:12px -32px -5px;
  transform:scale(.82);
  transform-origin:center center
}

.window-front {
  left:calc(50% - 160px);
  top:91px
}

.window-back {
  right:calc(50% - 185px);
  top:50px
}

.tag-top {
  top:43px;
  left:calc(50% - 173px)
}

.tag-bottom {
  right:calc(50% - 173px);
  bottom:22px
}

.orbit-one {
  width:390px;
  height:390px
}

.orbit-two {
  width:310px;
  height:310px
}

.hero-scroll {
  display:none
}

.trust-inner {
  height:auto;
  min-height:73px;
  flex-wrap:wrap;
  gap:4px;
  padding-block:15px
}

.trust-inner>span {
  font-size:7px
}

.trust-inner>div {
  gap:8px;
  font-size:10px
}

.trust-right {
  display:none
}

.section {
  padding-top:74px;
  padding-bottom:78px
}

.section-heading {
  align-items:flex-start;
  gap:20px;
  flex-direction:column;
  margin-bottom:27px
}

.section-heading h2,.studio-copy h2,.closing h2,.values-section h2 {
  font-size:34px
}

.arrow-link {
  margin-top:0
}

.product-grid,.catalogue-grid {
  grid-template-columns:1fr
}

.product-card {
  min-height:280px
}

.studio-inner {
  padding-block:44px;
  grid-template-columns:1fr;
  gap:10px
}

.studio-symbol {
  height:200px
}

.symbol-ring {
  width:165px;
  height:165px
}

.studio-copy {
  padding-bottom:25px
}

.studio-copy h2 {
  font-size:34px
}

.studio-coordinate {
  border-left:0;
  border-top:1px solid #ffffff13;
  padding:18px 0;
  flex-direction:row;
  gap:10px
}

.studio-coordinate span:nth-child(2) {
  display:none
}

.closing {
  min-height:340px;
  padding-top:58px;
  padding-bottom:62px;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  gap:22px
}

.closing h2 {
  font-size:34px
}

.closing-orb {
  right:8%;
  top:34px;
  font-size:100px
}

.footer-main {
  grid-template-columns:1fr 1fr;
  gap:15px;
  padding-block:28px
}

.footer-main>p {
  font-size:9px
}

.footer-nav {
  grid-column:1/-1;
  order:4
}

.footer-location {
  font-size:7px
}

.footer-bottom {
  height:auto;
  min-height:54px;
  gap:8px;
  flex-wrap:wrap;
  font-size:7px
}

.page-hero {
  padding-top:75px;
  padding-bottom:38px
}

.page-hero h1 {
  font-size:54px;
  letter-spacing:-3px
}

.page-hero>p {
  font-size:13px
}

.catalogue-stats {
  gap:16px;
  justify-content:space-between;
  margin-top:37px
}

.catalogue-stats b {
  display:block;
  margin:0 0 4px
}

.catalogue {
  padding-bottom:68px
}

.filter-row {
  overflow-x:auto;
  white-space:nowrap
}

.filter-chip {
  flex:none
}

.catalogue-footnote {
  align-items:flex-start;
  line-height:1.7
}

.note-inner {
  padding-block:40px;
  align-items:flex-start;
  gap:18px
}

.note-icon {
  width:43px;
  height:43px;
  flex:none
}

.note-inner h2 {
  font-size:25px
}

.note-index {
  position:absolute;
  right:0;
  bottom:4px
}

.about-hero {
  padding-bottom:70px
}

.story-grid {
  padding-block:48px;
  grid-template-columns:1fr;
  gap:20px
}

.story-index {
  margin:0
}

.story-grid h2 {
  font-size:35px
}

.story-mark {
  display:none
}

.values-section {
  padding-block:75px
}

.values-grid {
  grid-template-columns:1fr
}

.values-grid article,.values-grid article+article {
  padding:20px 0;
  border-right:0;
  border-bottom:1px solid #ffffff16
}

.values-grid article:last-child {
  border:0
}

.values-grid p {
  max-width:none
}

.about-end {
  padding:50px 0
}

.detail-page {
  padding-top:15px
}

.detail-hero {
  grid-template-columns:1fr;
  padding-top:14px;
  gap:25px
}

.detail-title-row {
  gap:14px
}

.detail-title-row .product-icon {
  width:50px;
  height:50px
}

.detail-title-row h1 {
  font-size:42px
}

.detail-description {
  font-size:13px
}

.detail-facts {
  grid-template-columns:1fr 1fr
}

.detail-facts div {
  padding:15px 8px
}

.detail-facts div:first-child {
  padding-left:8px
}

.detail-facts div:nth-child(2) {
  border-right:0
}

.detail-facts div:last-child {
  border-top:1px solid #ffffff15
}

.detail-sections {
  grid-template-columns:1fr;
  gap:24px
}

.simple-content {
  padding-bottom:70px
}

.simple-callout {
  padding:24px 19px;
  gap:15px
}

.simple-callout h2 {
  font-size:21px
}


}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  scroll-behavior:auto!important;
  animation-duration:.01ms!important;
  transition-duration:.01ms!important
}


}



[hidden] {
  display:none!important
}


:focus-visible {
  outline:2px solid #d0bcff;
  outline-offset:4px;
  border-radius:3px
}


.button:disabled {
  opacity:.55;
  cursor:not-allowed;
  transform:none
}


.catalogue-empty {
  grid-column:1/-1;
  min-height:230px;
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:32px;
  border:1px solid #ffffff15;
  background:#131218
}


.catalogue-empty h2 {
  font:600 23px/1.2 var(--font-display);
  margin:0 0 10px
}


.catalogue-empty p {
  color:#96929e;
  font-size:12px;
  margin:0 0 15px
}


.catalogue-empty .note-icon {
  flex:none
}


@media(max-width:680px) {
  .catalogue-empty {
  padding:23px 18px;
  gap:14px
}

.catalogue-empty .note-icon {
  width:42px;
  height:42px
}


}



.hero-note,.hero-scroll,.trust-inner,.catalogue-stats,.catalogue-footnote,.note-index,.studio-coordinate,.footer-location,.footer-bottom,.story-index span,.values-grid article>span { color:#85818e; }