:root {
  --cream: #f2e8d1;
  --cream-hi: #fffaf0;
  --cream-lo: #dfceb0;
  --ink: #281f18;
  --muted: #75644f;
  --red: #d91e18;
  --red-dark: #740f0d;
  --char: #171a1b;
  --char-hi: #2e3335;
  --amber: #ee6c1e;
  --blue: #0039e8;
  --paper: #f7f1e5;
  --line: rgba(40, 31, 24, .18);
  --shadow: 0 30px 90px rgba(28, 18, 11, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); color: var(--ink); }
body { margin: 0; min-width: 300px; font-family: Avenir Next, Avenir, Inter, system-ui, sans-serif; background: linear-gradient(135deg, #fffaf1 0, var(--cream) 45%, #ead9bc 100%); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; }
.skip { position: fixed; z-index: 100; top: .75rem; left: .75rem; transform: translateY(-160%); padding: .75rem 1rem; border-radius: .4rem; background: var(--blue); color: white; }
.skip:focus { transform: none; }

.top { min-height: 76px; display: flex; align-items: center; gap: 2rem; padding: 0 clamp(1.2rem, 4vw, 4rem); border-bottom: 1px solid var(--line); background: rgba(247, 241, 229, .91); backdrop-filter: blur(20px); position: sticky; z-index: 40; top: 0; }
.logo { display: inline-flex; align-items: baseline; gap: .22em; text-decoration: none; font-family: Avenir Next Condensed, Arial Narrow, sans-serif; text-transform: uppercase; letter-spacing: -.04em; font-size: 1.45rem; }
.logo span { font-weight: 500; }
.logo strong { color: var(--red); letter-spacing: .03em; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); margin-left: auto; font-size: .83rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.desktop-nav a { text-decoration: none; border-bottom: 2px solid transparent; padding: 1.55rem 0 1.45rem; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { border-bottom-color: var(--red); }
.status-pill { padding: .42rem .7rem; border: 1px solid var(--red); border-radius: 999px; color: var(--red-dark); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.site-menu { display: none; margin-left: auto; }
.site-menu summary { cursor: pointer; list-style: none; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu i { display: inline-block; width: 18px; height: 12px; margin-left: .5rem; border-top: 2px solid; border-bottom: 2px solid; }
.site-menu nav { position: absolute; left: 1rem; right: 1rem; top: calc(100% + .4rem); display: grid; padding: .75rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--paper); box-shadow: var(--shadow); }
.site-menu nav a { padding: .85rem; text-decoration: none; font-weight: 750; }

.eyebrow { margin: 0 0 1rem; color: var(--red-dark); font-size: .72rem; line-height: 1.3; letter-spacing: .18em; font-weight: 900; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Avenir Next Condensed, Arial Narrow, sans-serif; font-weight: 800; letter-spacing: -.055em; line-height: .91; }
h1 { margin-bottom: 1.5rem; font-size: clamp(4rem, 8.5vw, 8rem); }
h2 { margin-bottom: 1.5rem; font-size: clamp(2.8rem, 6vw, 5.7rem); }
h1 em, h2 em { color: var(--red); font-style: normal; font-weight: 600; }
h3 { margin-bottom: .55rem; font-size: 1.18rem; line-height: 1.15; }
p { line-height: 1.65; }
.lede { max-width: 44rem; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.62; }

.hero { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(520px, 1.25fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; min-height: calc(100vh - 76px); padding: clamp(3.5rem, 8vw, 8rem) clamp(1.2rem, 5vw, 5rem); overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
.button { display: inline-flex; align-items: center; min-height: 50px; padding: .9rem 1.2rem; border: 1px solid rgba(40, 31, 24, .5); border-radius: .35rem; background: rgba(255, 250, 240, .5); text-decoration: none; font-weight: 850; }
.button:hover, .button:focus-visible { border-color: var(--red); transform: translateY(-2px); }
.button.primary { border-color: var(--red); background: var(--red); color: white; box-shadow: 0 11px 30px rgba(183, 24, 18, .24); }
.facts { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.facts li { padding: .5rem .68rem; border-radius: .3rem; background: rgba(255, 250, 240, .8); box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; font-weight: 750; }
.hero-product { margin: 0; position: relative; transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.hero-product::before { content: ""; position: absolute; inset: 8% -8% -10% 12%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(217, 30, 24, .35), rgba(238, 108, 30, .08) 44%, transparent 70%); filter: blur(28px); }
.hero-product img { border-radius: .6rem; box-shadow: 0 4px 0 #9d8f78, 0 38px 90px rgba(37, 22, 13, .3); }
.hero-product figcaption { margin-top: .9rem; color: var(--muted); text-align: right; font-size: .72rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }

.section { padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 6vw, 7rem); }
.section > header { display: grid; grid-template-columns: 1fr minmax(280px, 34rem); gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.section > header > p { font-size: 1.05rem; }
.sound-section { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sound-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.sound-grid article { padding: clamp(1rem, 2vw, 1.4rem); border: 1px solid var(--line); border-radius: .7rem; background: #fffaf0; box-shadow: 0 18px 50px rgba(63, 43, 28, .1); }
.sound-grid article > span { color: var(--red); font-family: Avenir Next Condensed, Arial Narrow, sans-serif; font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; }
.sound-grid article p { max-width: 38rem; min-height: 5.2rem; }
.sound-grid img { margin-top: 1.5rem; border-radius: .35rem; box-shadow: 0 14px 34px rgba(22, 18, 15, .2); }

.controls-section { color: var(--cream-hi); background: radial-gradient(circle at 18% 10%, #383f42 0, var(--char) 43%, #0e1011 100%); }
.controls-section .eyebrow { color: #ffad6a; }
.controls-section > header > p { color: #c9c1b4; }
.control-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.control-grid article { min-height: 230px; padding: 1.5rem; background: var(--char); }
.control-grid article:nth-child(2n) { background: #1d2122; }
.control-grid b { display: block; margin-bottom: 2.5rem; color: #ff9860; font-size: .7rem; letter-spacing: .16em; }
.control-grid h3 { font-family: Avenir Next Condensed, Arial Narrow, sans-serif; font-size: 1.7rem; text-transform: uppercase; }
.control-grid p { color: #cbc3b6; font-size: .92rem; }

.texture-section { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(2rem, 6vw, 7rem); background: linear-gradient(112deg, #f7eee0, #e5cfaa); }
.texture-copy { align-self: end; max-width: 42rem; }
.text-link { display: inline-block; margin-top: 1rem; color: var(--red-dark); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.texture-images { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.texture-images img { border-radius: .5rem; box-shadow: var(--shadow); }

.details-section { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(2rem, 7vw, 8rem); padding: clamp(5rem, 9vw, 8rem) clamp(1.2rem, 6vw, 7rem); background: var(--red); color: white; }
.details-section .eyebrow { color: #ffd1b5; }
.details-section dl { margin: 0; border-top: 1px solid rgba(255,255,255,.35); }
.details-section dl > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.35); }
.details-section dt { font-size: .75rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.details-section dd { margin: 0; line-height: 1.5; }

.close { padding: clamp(6rem, 12vw, 11rem) clamp(1.2rem, 12vw, 14rem); text-align: center; background: var(--cream-hi); }
.close h2 { margin-left: auto; margin-right: auto; max-width: 72rem; }
.close p:not(.eyebrow) { max-width: 49rem; margin-left: auto; margin-right: auto; font-size: 1.08rem; }
.close .actions { justify-content: center; }

.product-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 3rem clamp(1.2rem, 5vw, 5rem); border-top: 1px solid var(--line); background: #ece0c9; }
.product-footer p { margin: .5rem 0 0; color: var(--muted); }
.product-footer nav { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 1rem 1.6rem; }
.product-footer nav a { font-size: .8rem; font-weight: 800; }

.support-main { min-height: 70vh; }
.support-hero { padding: clamp(5rem, 11vw, 10rem) clamp(1.2rem, 10vw, 11rem) clamp(4rem, 8vw, 7rem); background: var(--char); color: white; }
.support-hero .eyebrow { color: #ff9860; }
.support-hero h1 { max-width: 64rem; }
.support-hero > p:not(.eyebrow) { max-width: 48rem; color: #d8d0c2; font-size: 1.12rem; }
.support-hero .button { border-color: rgba(255,255,255,.45); background: transparent; color: white; }
.support-hero .button.primary { border-color: var(--red); background: var(--red); }
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; background: var(--paper); }
.support-grid article { padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: .6rem; background: white; }
.support-grid h2 { font-size: clamp(2.4rem, 4vw, 4rem); }
.support-grid dl { margin: 2rem 0 0; }
.support-grid dl div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.support-grid dt { font-weight: 850; }
.support-grid dd { margin: 0; line-height: 1.5; }
.support-steps { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--char); color: white; }
.support-steps article { padding: clamp(2rem, 5vw, 4rem); border-right: 1px solid rgba(255,255,255,.15); }
.support-steps b { color: #ff9860; }
.support-steps h3 { margin-top: 2.5rem; font-size: 1.5rem; }
.support-steps p { color: #d5cec2; }

.tour-page { background: #101213; color: #eee6d9; }
.tour-toolbar { min-height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid rgba(255,255,255,.13); background: #151819; position: sticky; z-index: 40; top: 0; }
.tour-toolbar a { justify-self: start; color: white; text-decoration: none; font-weight: 800; }
.tour-toolbar strong { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.tour-toolbar span { justify-self: end; color: #ff9b5d; font-size: .7rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.tour-main { padding: clamp(2rem, 4vw, 4rem) clamp(.8rem, 4vw, 4rem) 5rem; }
.tour-intro { max-width: 62rem; margin: 0 auto 2.5rem; text-align: center; }
.tour-intro .eyebrow { color: #ff9b5d; }
.tour-intro h1 { margin-bottom: 1rem; font-size: clamp(3rem, 7vw, 6rem); }
.tour-intro p:not(.eyebrow) { max-width: 47rem; margin-left: auto; margin-right: auto; color: #c9c1b5; }
.tour-shell { max-width: 1200px; margin: 0 auto; }
.tour-face { position: relative; aspect-ratio: 1622 / 970; border: 1px solid rgba(255,255,255,.18); border-radius: .45rem; background: #202526; box-shadow: 0 32px 90px rgba(0,0,0,.5); overflow: hidden; }
.tour-face > img, .tour-face > svg, .direct-controls { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-face > img { object-fit: contain; transition: opacity .16s ease; }
.tour-face > svg { pointer-events: none; }
.direct-controls label, .direct-controls button { position: absolute; display: block; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: transparent; }
.direct-controls input { width: 100%; height: 100%; margin: 0; opacity: .001; cursor: ew-resize; }
.direct-controls button { cursor: pointer; }
.direct-controls label:focus-within, .direct-controls button:focus-visible { outline: 4px solid white; outline-offset: 3px; box-shadow: 0 0 0 8px rgba(217,30,24,.85); }
.tour-controls { max-width: 1200px; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1rem auto 0; }
.tour-controls > label, .tour-controls fieldset, .tour-presets { min-width: 0; padding: .9rem; border: 1px solid rgba(255,255,255,.14); border-radius: .4rem; background: #1c2021; }
.tour-controls label > span { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; font-size: .78rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.tour-controls output { color: #ff9b5d; font-variant-numeric: tabular-nums; }
.tour-controls input { width: 100%; accent-color: var(--red); }
.tour-controls fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.tour-controls legend { padding: 0 .35rem; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.tour-controls button { min-height: 36px; border: 1px solid rgba(255,255,255,.24); border-radius: .3rem; background: #272c2e; color: white; cursor: pointer; }
.tour-controls button.is-active, .tour-controls button[aria-pressed="true"] { border-color: #ff9b5d; background: #7c1712; }
.tour-presets { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; align-items: end; }
.tour-status { max-width: 1200px; margin: 1rem auto 0; padding: .85rem 1rem; border-left: 4px solid var(--red); background: #181b1c; color: #d7cfc1; font-variant-numeric: tabular-nums; }
.tour-note { max-width: 800px; display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; margin: 2rem auto; padding: 1.4rem; border: 1px solid rgba(255,255,255,.14); border-radius: .4rem; }
.tour-note p { margin: 0; color: #c7bfb2; }
.noscript-note { margin: 1rem; padding: 1rem; background: #ffe9bd; color: var(--ink); }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { max-width: 60rem; }
  .hero-product { transform: none; max-width: 1000px; }
  .control-grid { grid-template-columns: repeat(2, 1fr); }
  .tour-controls { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .top { min-height: 64px; gap: 1rem; padding: 0 1rem; }
  .desktop-nav { display: none; }
  .site-menu { display: block; }
  .status-pill { font-size: .6rem; }
  .hero { padding-top: 3rem; }
  .hero h1 { font-size: clamp(3.4rem, 18vw, 5.5rem); }
  .section > header { grid-template-columns: 1fr; align-items: start; }
  .sound-grid, .texture-images, .support-grid { grid-template-columns: 1fr; }
  .sound-grid article p { min-height: 0; }
  .texture-section, .details-section { grid-template-columns: 1fr; }
  .control-grid { grid-template-columns: 1fr; }
  .control-grid article { min-height: 190px; }
  .details-section dl > div, .support-grid dl div { grid-template-columns: 1fr; gap: .25rem; }
  .support-steps { grid-template-columns: 1fr; }
  .support-steps article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .product-footer { flex-direction: column; }
  .product-footer nav { justify-content: flex-start; }
  .tour-toolbar { grid-template-columns: 1fr auto; }
  .tour-toolbar strong { display: none; }
  .tour-main { padding-left: .5rem; padding-right: .5rem; }
  .tour-controls { grid-template-columns: 1fr; }
  .tour-note { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .logo { font-size: 1.18rem; }
  .status-pill { display: none; }
  .hero, .section, .details-section, .close { padding-left: 1rem; padding-right: 1rem; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; }
  .tour-toolbar { padding: 0 .75rem; }
  .tour-toolbar a { font-size: .78rem; }
  .tour-toolbar span { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .button:hover { transform: none; }
}