/* HUM · Silence, engineered. */
@font-face { font-family: 'Red Hat Display'; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/hum__fonts-redhatdisplay-var.woff2) format('woff2'); font-weight: 300 500; font-display: swap; }
@font-face { font-family: 'Be Vietnam Pro'; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/hum__fonts-bevietnampro-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Be Vietnam Pro'; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/hum__fonts-bevietnampro-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cutive Mono'; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/hum__fonts-cutivemono-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --graphite: #050F14;
  --fog: #DCDCE6;
  --volt: #CDEB46;
  --violet: #550AE1;
  --white: #FFFFFF;
  --black: #000000;
  --fog-72: rgba(220, 220, 230, .72);
  --fog-50: rgba(220, 220, 230, .5);
  --fog-18: rgba(220, 220, 230, .18);
  --fog-10: rgba(220, 220, 230, .1);
  --gr-72: rgba(5, 15, 20, .72);
  --gr-16: rgba(5, 15, 20, .16);
  --gr-10: rgba(5, 15, 20, .1);
  --wh-72: rgba(255, 255, 255, .72);
  --wh-24: rgba(255, 255, 255, .24);
  --f-title: 'Red Hat Display', ui-sans-serif, system-ui, sans-serif;
  --f-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'Cutive Mono', ui-monospace, Menlo, monospace;
  --m: 4vw;
  --gut: 24px;
  --q: 0;            /* quiet amount 0..1 (ANC switch) */
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--graphite); color: var(--fog); font-family: var(--f-ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: 1px solid var(--volt); outline-offset: 4px; }

.label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.dimmable { opacity: calc(1 - .45 * var(--q)); transition: opacity .2s linear; }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line__inner { display: block; will-change: transform; }

/* every photo dims with the switch */
:where(#hero, #anatomy, #sound, #colours, #voices) img, .foot img { filter: saturate(calc(1 - .45 * var(--q))) brightness(calc(1 - .15 * var(--q))); }
img.is-broken { visibility: hidden; }

/* film grain that fades as the page gets quieter */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- mark + switch + pills ---------- */
.mark { width: 34px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.sw { --w: 44px; --h: 24px; --k: 16px; display: inline-flex; align-items: center; flex: none; }
.sw__track { position: relative; width: var(--w); height: var(--h); border-radius: 999px; border: 1px solid currentColor; transition: background-color .5s cubic-bezier(.65,0,.35,1), border-color .5s; }
.sw__knob { position: absolute; top: 50%; left: 3px; width: var(--k); height: var(--k); margin-top: calc(var(--k) / -2); border-radius: 50%; background: currentColor; transition: transform .5s cubic-bezier(.65,0,.35,1), background-color .5s, box-shadow .5s; }
.sw__knob::after { content: ''; position: absolute; left: 50%; top: 22%; bottom: 22%; width: 1px; margin-left: -.5px; background: var(--graphite); opacity: 0; transition: opacity .3s; }
.sw[aria-checked="true"] .sw__track { border-color: var(--volt); background: rgba(205, 235, 70, .14); }
.sw[aria-checked="true"] .sw__knob { transform: translateX(calc(var(--w) - var(--k) - 8px)); background: var(--volt); box-shadow: 0 0 0 1px var(--graphite); }
.sw[aria-checked="true"] .sw__knob::after { opacity: 1; }
.sw--lg { --w: 64px; --h: 32px; --k: 24px; }
.sw--onvolt { color: var(--graphite); }
.sw--onvolt[aria-checked="true"] .sw__track { border-color: var(--graphite); background: var(--graphite); }

.pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; transition: background-color .35s, color .35s, border-color .35s; }
.pill--volt { border: 1px solid var(--volt); color: var(--fog); }
.pill--volt:hover { background: var(--volt); color: var(--graphite); }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--volt); }
.pill--volt:hover .pill__dot { background: var(--graphite); }
.pill--fog { border: 1px solid var(--fog-50); }
.pill--fog:hover { background: var(--fog); color: var(--graphite); border-color: var(--fog); }
.pill--ink { background: var(--graphite); color: var(--fog); }
.pill--ink:hover { background: var(--black); }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--graphite); display: grid; place-items: center; }
.intro__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__inner { position: relative; display: grid; justify-items: center; text-align: center; width: min(340px, 78vw); }
.intro__mark { width: 52px; height: 20px; color: var(--fog); stroke-width: 2.6; }
.intro__word { font-family: var(--f-title); font-weight: 400; font-size: 22px; letter-spacing: .02em; margin-top: 8px; }
.intro__status { display: grid; justify-items: center; gap: 14px; margin-top: 64px; color: var(--fog-72); }
.intro__bar { width: 128px; height: 8px; border-radius: 99px; border: 1px solid var(--fog-50); padding: 1px; }
.intro__bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--fog); transform-origin: 0 50%; transform: scaleX(0); }
.intro__gate { position: absolute; top: 108px; left: 0; right: 0; display: grid; justify-items: center; gap: 14px; opacity: 0; visibility: hidden; }
.intro__title { font-family: var(--f-title); font-weight: 300; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
.intro__gate p { font-size: 14px; color: var(--fog-72); max-width: 260px; margin-bottom: 10px; }
.intro__skip { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fog-50); padding: 6px; }
.intro__skip:hover { color: var(--fog); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); padding: 0 var(--m); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--fog); transition: color .45s; }
.nav[data-theme="light"], .nav[data-theme="volt"] { color: var(--graphite); }
.nav[data-theme="violet"] { color: var(--white); }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-title); font-size: 20px; font-weight: 400; letter-spacing: .01em; justify-self: start; }
.nav__links { display: flex; gap: 32px; font-size: 14px; }
.nav__links a { position: relative; opacity: .8; transition: opacity .3s; }
.nav__links a:hover { opacity: 1; }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 20px; }
.meter { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.meter__bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.meter__bars i { width: 2px; background: currentColor; opacity: .2; transition: opacity .25s; }
.meter__bars i:nth-child(1) { height: 3px; } .meter__bars i:nth-child(2) { height: 4px; } .meter__bars i:nth-child(3) { height: 5px; }
.meter__bars i:nth-child(4) { height: 6px; } .meter__bars i:nth-child(5) { height: 7px; } .meter__bars i:nth-child(6) { height: 8px; }
.meter__bars i:nth-child(7) { height: 9px; } .meter__bars i:nth-child(8) { height: 10px; } .meter__bars i:nth-child(9) { height: 10px; }
.meter__bars i:nth-child(10) { height: 11px; } .meter__bars i:nth-child(11) { height: 12px; } .meter__bars i:nth-child(12) { height: 12px; }
.meter__bars i.on { opacity: .95; }
.meter__num { min-width: 5.2ch; text-align: right; }
.nav__cta { font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 99px; border: 1px solid currentColor; transition: background-color .3s, color .3s; }
.nav__cta:hover { background: var(--volt); border-color: var(--volt); color: var(--graphite); }

/* ---------- grid rows of small type ---------- */
.grid-row { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gut); }

/* ---------- 1 · hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 20px) var(--m) 28px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.hero__wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__gl { position: absolute; top: 6%; right: 1vw; width: 52vw; height: 88%; }
.hero__gl canvas { width: 100% !important; height: 100% !important; display: block; }
.hero__top { position: relative; padding-top: 14px; border-top: 1px solid var(--fog-18); color: var(--fog-72); }
.hero__body { position: relative; align-self: center; max-width: 54vw; padding: 4vh 0; }
.hero__title { font-family: var(--f-title); font-weight: 300; font-size: clamp(54px, 8.6vw, 168px); line-height: .96; letter-spacing: -.045em; }
.hero__deck { font-size: 17px; margin-top: 28px; color: var(--fog-72); max-width: 30ch; }
.hero__switch { display: flex; align-items: center; gap: 18px; margin-top: 44px; flex-wrap: wrap; }
.hero__switch .sw { cursor: pointer; }
.hero__switch-txt { display: grid; gap: 2px; margin-right: 18px; }
.hero__switch-txt b { font-weight: 400; color: var(--fog); }
.sw[aria-checked="true"] ~ .hero__switch-txt b, .is-quiet .hero__switch-txt b { color: var(--volt); }
.hero__hint { font-size: 13px; color: var(--fog-50); }
.hero__spec { position: relative; padding-top: 14px; border-top: 1px solid var(--fog-18); }
.hero__spec div { display: flex; flex-direction: column-reverse; gap: 4px; }
.hero__spec dt { color: var(--fog-50); }
.hero__spec dd { font-family: var(--f-title); font-weight: 300; font-size: clamp(26px, 2.6vw, 44px); letter-spacing: -.02em; line-height: 1; }

/* ---------- 2 · anatomy ---------- */
.anat { position: relative; height: 500vh; background: var(--fog); color: var(--graphite); }
.anat__sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gut); padding: calc(var(--nav-h) + 24px) var(--m) 40px; overflow: hidden; }
.anat__list { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.anat__eyebrow { margin-bottom: 22px; color: var(--gr-72); }
.anat__item { display: grid; grid-template-columns: 112px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--gr-16); opacity: .4; transition: opacity .5s cubic-bezier(.215,.61,.355,1); }
.anat__item:last-child { border-bottom: 1px solid var(--gr-16); }
.anat__item.is-active { opacity: 1; }
.anat__item img { width: 112px; height: 84px; object-fit: cover; background: var(--gr-10); }
.anat__item .label { color: var(--gr-72); }
.anat__item h3 { font-family: var(--f-title); font-weight: 400; font-size: clamp(19px, 1.55vw, 26px); letter-spacing: -.015em; line-height: 1.2; margin: 4px 0 6px; }
.anat__item > div { transform: translateY(13px); transition: transform .5s cubic-bezier(.215,.61,.355,1); }
.anat__item.is-active > div { transform: none; }
.anat__item p { font-size: 14px; line-height: 1.5; color: var(--gr-72); max-width: 40ch; }
.anat__stage { position: relative; min-height: 0; }
.anat__gl { position: absolute; inset: 0; }
.anat__gl canvas { width: 100% !important; height: 100% !important; display: block; }
.anat__fig { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); pointer-events: none; color: var(--fog); padding: 22px; display: flex; align-items: flex-end; }
.anat__steps { position: absolute; right: 0; top: 50%; display: grid; gap: 8px; transform: translateY(-50%); }
.anat__steps i { width: 1px; height: 28px; background: var(--gr-16); transition: background-color .4s; }
.anat__steps i.on { background: var(--graphite); }

/* ---------- 3 · sound ---------- */
.sound { position: relative; height: 290vh; background: var(--graphite); }
.sound__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sound__glow { position: absolute; left: 50%; top: 55%; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(85, 10, 225, .34), rgba(85, 10, 225, .12) 45%, rgba(85, 10, 225, 0) 72%); will-change: transform; }
.sound__gl { position: absolute; inset: 0; }
.sound__gl canvas { width: 100% !important; height: 100% !important; display: block; }
.sound__head { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 0 var(--m); will-change: transform, opacity; }
.sound__head .label { color: var(--fog-72); margin-bottom: 18px; }
.sound__head h2 { font-family: var(--f-title); font-weight: 300; font-size: clamp(40px, 6vw, 112px); line-height: 1; letter-spacing: -.04em; }
.sound__sub { max-width: 40ch; margin: 22px auto 0; color: var(--fog-72); font-size: 16px; }
.sound__modes { position: absolute; left: var(--m); right: var(--m); bottom: 7vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); }
.mode { grid-column: span 3; text-align: left; display: grid; gap: 6px; opacity: 0; transform: translateY(40px); padding-bottom: 6px; border-bottom: 1px solid var(--fog-18); transition: border-color .4s; }
.mode:nth-child(1) { grid-column: 2 / span 3; } .mode:nth-child(2) { grid-column: 6 / span 3; } .mode:nth-child(3) { grid-column: 10 / span 3; }
.mode img { width: 100%; height: min(42vh, 27vw); object-fit: cover; margin-bottom: 10px; background: var(--fog-10); }
.mode .label { color: var(--fog-50); }
.mode strong { font-family: var(--f-title); font-weight: 400; font-size: 22px; letter-spacing: -.01em; }
.mode__txt { font-size: 14px; color: var(--fog-72); }
.mode.is-on { border-color: var(--volt); }
.mode.is-on .label { color: var(--volt); }

/* ---------- 4 · colours ---------- */
.col { position: relative; background: var(--fog); color: var(--graphite); padding-bottom: 12vh; overflow: hidden; }
.col__hero { position: relative; height: 100vh; min-height: 640px; }
.col__name { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); overflow: hidden; }
.col__track { display: flex; width: max-content; will-change: transform; }
.col__word { position: relative; font-family: var(--f-title); font-weight: 300; font-size: 23vw; line-height: .9; letter-spacing: -.055em; white-space: nowrap; padding-bottom: .06em; }
.col__ghost { display: block; color: var(--gr-10); }
.col__ink { position: absolute; left: 0; top: 0; color: var(--graphite); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.col__gl { position: absolute; left: 50%; top: 50%; width: min(78vh, 70vw); height: min(78vh, 70vw); transform: translate(-50%, -50%); }
.col__gl canvas { width: 100% !important; height: 100% !important; display: block; }
.col__cap { position: absolute; left: var(--m); bottom: 5vh; color: var(--gr-72); }
.col__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); padding: 0 var(--m); }
.cw { text-align: left; display: grid; gap: 14px; }
.cw__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--white); outline: 1px solid var(--gr-16); outline-offset: -1px; overflow: hidden; transition: outline-color .35s; }
.cw__media--dark { background: var(--graphite); }
.cw__media img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform .7s cubic-bezier(.215,.61,.355,1); }
.cw:hover .cw__media img { transform: scale(1.04); }
.cw__meta { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--gr-16); padding-top: 10px; }
.cw__meta strong { font-family: var(--f-title); font-weight: 400; font-size: 20px; }
.cw__meta .label { color: var(--gr-72); }
.cw.is-active .cw__media { outline: 1px solid var(--graphite); }
.cw.is-active .cw__meta strong::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 1px var(--graphite); margin-right: 10px; vertical-align: 2px; }
.col__banner { position: relative; margin: 14vh var(--m) 0; height: 64vh; overflow: hidden; background: var(--gr-10); }
.col__banner img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.col__banner figcaption { position: absolute; left: 22px; bottom: 18px; color: var(--fog); }

/* ---------- 5 · voices ---------- */
.voices { position: relative; background: var(--violet); color: var(--white); padding: 22vh var(--m) 18vh; }
.voices__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: center; }
.voices__label { grid-column: 1 / span 2; align-self: start; color: var(--wh-72); }
.voices__quotes { grid-column: 3 / span 6; display: grid; }
.q { grid-area: 1 / 1; visibility: hidden; }
.q.is-active { visibility: visible; }
.q__text { font-family: var(--f-title); font-weight: 300; font-size: clamp(28px, 3.1vw, 54px); line-height: 1.12; letter-spacing: -.025em; }
.q figcaption { margin-top: 30px; color: var(--wh-72); overflow: hidden; }
.voices__visual { grid-column: 10 / span 3; position: relative; aspect-ratio: 1; }
.voices__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; clip-path: circle(0% at 50% 50%); }
.voices__visual img.is-on { clip-path: circle(50% at 50% 50%); }
.voices__ctrl { grid-column: 3 / span 10; display: flex; align-items: center; gap: 22px; margin-top: 9vh; }
.voices__ticks { display: flex; gap: 6px; margin-right: auto; }
.voices__ticks i { width: 36px; height: 1px; background: var(--wh-24); position: relative; overflow: hidden; }
.voices__ticks i.is-on { background: var(--white); }
.voices__btn { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 0; border-bottom: 1px solid var(--wh-24); }
.voices__btn:hover { border-color: var(--white); }

/* ---------- 6 · footer ---------- */
.foot { position: relative; background: var(--graphite); color: var(--fog); padding-bottom: 28px; }
.cta { background: var(--volt); color: var(--graphite); padding: 9vh var(--m); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.cta h2 { font-family: var(--f-title); font-weight: 300; font-size: clamp(48px, 7vw, 128px); line-height: .95; letter-spacing: -.045em; }
.cta p { margin-top: 18px; max-width: 46ch; font-size: 16px; }
.cta__r { display: flex; align-items: center; gap: 22px; }
.foot__mark { display: block; width: 100%; height: 56vw; margin-top: 6vh; }
.foot__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: 6vh var(--m) 0; }
.foot__addr { grid-column: 1 / span 3; font-style: normal; color: var(--fog-72); }
.foot__links { grid-column: 5 / span 8; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); }
.foot__links a { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--fog-18); font-size: 15px; transition: color .3s; }
.foot__links a:hover { color: var(--volt); }
.foot__small { display: flex; justify-content: space-between; gap: 16px; padding: 7vh var(--m) 0; color: var(--fog-50); flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { gap: 22px; }
  .meter__label { display: none; }
}
@media (max-width: 900px) {
  :root { --m: 20px; --gut: 16px; --nav-h: 56px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__right { gap: 14px; }
  .nav__cta { display: none; }
  .meter__bars { display: none; }

  .hero { padding-top: calc(var(--nav-h) + 8px); grid-template-rows: auto auto auto auto; }
  .hero__gl { position: relative; top: auto; right: auto; width: 100%; height: 42vh; order: 2; margin: 4px 0 -2vh; }
  .hero__top { order: 1; grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .hero__body { order: 3; max-width: none; padding: 0 0 4vh; }
  .hero__spec { order: 4; grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .hero__title { font-size: 15.5vw; }
  .hero__deck { margin-top: 18px; font-size: 16px; }
  .hero__switch { margin-top: 26px; gap: 14px; }
  .hero__switch-txt { margin-right: 0; }

  .anat { height: auto; }
  .anat__sticky { position: relative; top: auto; height: auto; display: flex; flex-direction: column; padding: 0 var(--m) 10vh; overflow: visible; }
  .anat__stage { order: -1; position: sticky; top: 0; height: calc(50vh + var(--nav-h)); border-top: var(--nav-h) solid var(--fog); z-index: 2; background: var(--fog); margin: 0 calc(var(--m) * -1); }
  .anat__eyebrow { margin: 4vh 0 10px; }
  .anat__item { grid-template-columns: 84px 1fr; gap: 14px; min-height: 52vh; align-content: start; padding-top: 18px; }
  .anat__item img { width: 84px; height: 63px; }
  .anat__item:last-child { min-height: 62vh; }
  .anat__steps { right: 12px; }

  .sound { height: 300vh; }
  .sound__head h2 { font-size: 11vw; }
  .sound__sub { font-size: 15px; }
  .sound__modes { left: 0; right: 0; bottom: 5vh; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--m); padding: 0 var(--m); scrollbar-width: none; }
  .sound__modes::-webkit-scrollbar { display: none; }
  .mode { flex: 0 0 68vw; scroll-snap-align: start; }
  .mode img { height: 40vh; }

  .col__word { font-size: 34vw; }
  .col__gl { width: 92vw; height: 92vw; }
  .col__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--m); scrollbar-width: none; }
  .col__cards::-webkit-scrollbar { display: none; }
  .cw { flex: 0 0 72vw; scroll-snap-align: start; }
  .col__banner { height: 48vh; margin-top: 9vh; }

  .voices { padding: 14vh var(--m) 12vh; }
  .voices__grid { display: flex; flex-direction: column; align-items: stretch; }
  .voices__label { margin-bottom: 26px; }
  .voices__visual { order: -1; width: 62vw; margin: 0 0 8vh; align-self: flex-start; }
  .q__text { font-size: 7.4vw; }
  .voices__ctrl { margin-top: 6vh; }

  .cta { padding: 8vh var(--m); align-items: flex-start; }
  .cta h2 { font-size: 16vw; }
  .foot__mark { height: 62vw; margin-top: 6vh; }
  .foot__grid { display: flex; flex-direction: column; gap: 34px; }
  .foot__links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .anat__item, .anat__item > div, .sw__knob, .sw__track { transition: none; }
}

/* anatomy wireframe panel (wipes up from the bottom behind the canvas) */
.anat__panel { position: absolute; inset: 0; background: var(--graphite); clip-path: inset(100% 0 0 0); }

/* WordPress / Elementor compatibility, inert in a plain browser.
   1. The active WordPress theme styles <body> and every heading too (Twenty Twenty-Five: body weight 300 and -0.1px
      tracking; h1-h6 weight 400, -0.1px tracking, line-height 1.125 and preset sizes). Restore what this page relies on.
   2. The Elementor container that holds the sections can pick up the kit's default padding and gap (seen at phone
      widths); the sections must sit edge to edge, so zero them.
   3. Elementor flattens every <figure> margin inside a widget (frontend.min.css, specificity 0,4,1); figures that
      carry their own margin get it back with the same prefix (0,5,1).
   Twenty Twenty-Five also sets text-wrap: pretty on blockquote, caption, figcaption, h1-h6 and p, which moves
   line breaks; the text-wrap rule puts back the browser default.
   The container rule also pins display: block: once Elementor generates the page's post CSS it turns that
   container into a wrapping flex column, which can shrink a section below its content. */
html body .elementor .e-con.e-parent:has(> .elementor-element [class^="uichemy-"]) { --display: block; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --row-gap: 0px; --column-gap: 0px; --gap: 0px 0px; }
html body { font-weight: 400; letter-spacing: normal; }
html body :is(h1, h2, h3, h4, h5, h6) { letter-spacing: inherit; line-height: inherit; }
html body h1 { font-size: 2em; }
html body h2 { font-size: 1.5em; }
html body h3 { font-size: 1.17em; }
html body :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; }
.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) .col__banner { margin: 14vh var(--m) 0; }
@media (max-width: 900px) { .elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) .col__banner { margin-top: 9vh; } }
html body :is(blockquote, caption, figcaption, h1, h2, h3, h4, h5, h6, p) { text-wrap: wrap; }