/* NOIRE AUDIO — website art direction for the graphite / steel design system.
   The static site uses only local assets and keeps Liquid Glass to navigation and controls. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --na-void: #0c0e0f;
  --na-graphite: #151719;
  --na-carbon: #202327;
  --na-steel: #30343a;
  --na-chalk: #e9e6e3;
  --na-muted: #aeb2b2;
  --na-dim: #82898b;
  --na-line: rgba(233, 230, 227, .14);
  --na-line-strong: rgba(233, 230, 227, .25);
  --na-green: #72b9a4;
  --na-amber: #d8a65c;
  --na-red: #d96668;
  --na-blue: #7ea8cc;
  --na-font-display: "Space Grotesk", "Arial", sans-serif;
  --na-font-body: "Inter", "Arial", sans-serif;
  --na-font-mono: "JetBrains Mono", Consolas, monospace;
  --na-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --na-max: 90rem;
  --na-fast: 180ms;
  --na-slow: 800ms;

  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  color-scheme: dark;
}

html { background: var(--na-void); }
body,
body.theme-dark,
body.theme-light {
  min-height: 100vh;
  color: var(--na-chalk);
  background: var(--na-void);
  font-family: var(--na-font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::after {
  position: fixed;
  z-index: 20;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

a { color: inherit; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--na-green); outline-offset: 4px; }
::selection { color: var(--na-void); background: var(--na-green); }

.theme-dark,
.theme-light,
:root {
  --surface: var(--na-void);
  --surface-raised: var(--na-graphite);
  --surface-sunken: #080909;
  --label: var(--na-chalk);
  --label-2: #c3c5c4;
  --label-3: #a3a8a8;
  --separator: var(--na-line);
  --link: var(--na-green);
  --signal: var(--na-green);
  --tile-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  --obsidian: var(--na-void);
  --porcelain: var(--na-chalk);
  --oxide: var(--na-steel);
  --stone: #aeb2b2;
  --taupe: #82898b;
  --sage: var(--na-green);
  --font-display: var(--na-font-display);
  --font-text: var(--na-font-body);
  --font-mono: var(--na-font-mono);
  color-scheme: dark;
  color: var(--na-chalk);
  background-color: var(--na-void);
}

.section,
.hero,
.site-footer,
.doc,
.notfound,
.support,
.about {
  color: var(--na-chalk);
  background-color: var(--na-void);
}
.section.theme-light,
.theme-light.section,
.theme-light .tile,
.theme-light .doc__toc,
.theme-light .doc__body,
.theme-light .faq__item {
  color: var(--na-chalk);
  background-color: var(--na-graphite);
}
.container,
.container--content,
.container--wide { width: min(var(--na-max), calc(100% - 2 * var(--na-gutter))); }

.skip-link {
  z-index: 1000;
  border: 1px solid var(--na-line-strong);
  border-radius: 3px;
  color: var(--na-chalk);
  background: var(--na-carbon);
}

/* Floating navigation: functional layer only, with a fixed glass highlight. */
.site-nav {
  position: fixed;
  z-index: 90;
  inset: 1rem var(--na-gutter) auto;
  width: min(var(--na-max), calc(100% - 2 * var(--na-gutter)));
  margin-inline: auto;
  color: var(--na-chalk);
}
.nav-capsule.glass,
.nav-sheet.glass,
.localnav__bar.glass,
.hero-pill.glass,
.segmented.glass,
.paddle.glass {
  color: var(--na-chalk);
  border: 1px solid rgba(233, 230, 227, .18);
  background:
    radial-gradient(110% 130% at 30% 0%, rgba(255, 255, 255, .105), transparent 57%),
    linear-gradient(150deg, rgba(39, 43, 45, .77), rgba(17, 19, 20, .72));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 18px 56px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
}
.nav-capsule {
  width: 100%;
  min-height: 4.1rem;
  padding: .35rem .55rem .35rem 1rem;
  border-radius: 1rem;
}
.nav-brand { gap: .65rem; color: var(--na-chalk); text-decoration: none; }
.nav-brand img { width: 2rem; height: 2rem; }
.nav-brand__wordmark,
.footer-brand__mark > span {
  display: grid;
  gap: .12rem;
  font-family: var(--na-font-display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: .95;
}
.nav-brand__audio,
.footer-brand__mark > span > span {
  color: var(--na-muted);
  font-family: var(--na-font-mono);
  font-size: .51rem;
  font-weight: 400;
  letter-spacing: .42em;
}
.nav-links { gap: clamp(.4rem, 1.5vw, 1.8rem); }
.nav-links a,
.nav-sheet a,
.lang-switch a,
.nav-shop {
  color: var(--na-muted);
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-links a[aria-current],
.nav-links a:hover,
.nav-sheet a:hover,
.lang-switch a[aria-current] { color: var(--na-chalk); }
.nav-links a[aria-current]::after { background: var(--na-green); }
.nav-shop { display: flex; align-items: center; gap: .55rem; color: var(--na-chalk); }
.status__dot,
.na-eyebrow__dot,
.na-status-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--na-green);
  box-shadow: 0 0 12px rgba(114,185,164,.35);
}
.lang-switch { padding: .2rem; border: 1px solid var(--na-line); border-radius: .5rem; background: rgba(4,5,6,.27); }
.lang-switch a { min-width: 2.1rem; min-height: 2rem; color: var(--na-muted); }
.lang-switch a[aria-current] { color: var(--na-void); background: var(--na-chalk); }
.nav-menu-button { border: 1px solid var(--na-line); border-radius: .55rem; background: rgba(8,9,10,.45); }
.nav-menu-button span { background: var(--na-chalk); }
.nav-sheet { padding: 1.2rem; border-radius: 1rem; }
.nav-sheet__tools { border-top: 1px solid var(--na-line); }
.nav-tone-light .nav-capsule.glass,
.nav-tone-light .localnav__bar.glass {
  color: var(--na-chalk);
  border-color: rgba(233, 230, 227, .18);
  background:
    radial-gradient(110% 130% at 30% 0%, rgba(255, 255, 255, .105), transparent 57%),
    linear-gradient(150deg, rgba(39, 43, 45, .77), rgba(17, 19, 20, .72));
}
.nav-tone-light .nav-links a,
.nav-tone-light .nav-shop,
.nav-tone-light .nav-brand,
.nav-tone-light .nav-brand__audio { color: var(--na-chalk); }
.nav-tone-light .lang-switch a[aria-current] { color: var(--na-void); }

.site-footer { border-top: 1px solid var(--na-line); }
.footer-brand { border-bottom-color: var(--na-line); }
.footer-brand__mark { color: var(--na-chalk); }
.footer-brand__mark img { width: 2.2rem; height: 2.2rem; }
.footer-brand p,
.footer-grid a,
.footer-grid span,
.footer-legal,
.footer-legal a { color: var(--na-muted); }
.footer-grid h2 { color: var(--na-chalk); }
.footer-grid a:hover,
.footer-legal a:hover { color: var(--na-chalk); }
.footer-legal { border-top-color: var(--na-line); }

.button,
.button--primary,
.button--secondary {
  min-height: 3rem;
  border: 1px solid var(--na-line-strong);
  border-radius: 3px;
  font-weight: 600;
  transition: color var(--na-fast), background var(--na-fast), border-color var(--na-fast), transform var(--na-fast);
}
.button--primary { color: var(--na-void); border-color: var(--na-chalk); background: var(--na-chalk); }
.button--primary:hover { color: var(--na-void); border-color: #fff; background: #fff; transform: translateY(-1px); }
.button--secondary { color: var(--na-chalk); border-color: var(--na-line-strong); background: transparent; }
.button--secondary:hover { border-color: var(--na-chalk); background: rgba(255,255,255,.05); }
.link-chevron,
.link-chevron::after { color: var(--na-green); }
.eyebrow,
.eyebrow--accent { color: var(--na-muted); font-family: var(--na-font-mono); font-size: .66rem; letter-spacing: .15em; }
.eyebrow--accent { color: var(--na-green); }
.display-hero,
.display,
.headline,
.title { color: var(--na-chalk); font-family: var(--na-font-display); font-weight: 500; letter-spacing: -.055em; }
.lead,
.intro-text,
.tile p,
.doc__body,
.faq__answer { color: var(--na-muted); }
.tile,
.faq__item,
.bento .tile,
.localnav__bar { border-color: var(--na-line); background: var(--na-graphite); box-shadow: none; }
.tile--link:hover { border-color: var(--na-line-strong); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.badge { color: var(--na-muted); border: 1px solid var(--na-line); background: rgba(255,255,255,.035); }
.badge--live { color: var(--na-void); border-color: var(--na-green); background: var(--na-green); }
.doc__toc,
.doc__body,
.support__sidebar,
.support__content { color: var(--na-chalk); background: var(--na-graphite); }
.doc__toc a,
.doc__body a,
.faq__answer a { color: var(--na-green); }
.doc__body h2,
.doc__body h3,
.support h2,
.support h3 { color: var(--na-chalk); }
.section-head .lead,
.hero__copy .lead { max-width: 44rem; }
.hero--stage { min-height: 46rem; background: radial-gradient(ellipse at 72% 46%, rgba(114,185,164,.09), transparent 46%), var(--na-void); }
.product-stage::before { background: radial-gradient(ellipse, rgba(114,185,164,.22), transparent 65%); }
.product-shot { border: 1px solid var(--na-line-strong); border-radius: 4px; }
.localnav__bar { border-radius: .8rem; }
.localnav__cta .status { color: var(--na-muted); }
.section { padding-block: clamp(4.5rem, 8vw, 8rem); }
.reveal { animation-duration: .8s; }

/* Brand pages */
.na-body { overflow-x: clip; }
.na-home,
.na-catalog,
.na-product-page { position: relative; isolation: isolate; }
.na-home::before,
.na-catalog::before,
.na-product-page::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 62rem;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 2%, rgba(218,225,225,.075), transparent 38%), linear-gradient(180deg, #0b0d0e 0%, var(--na-void) 82%);
}
.na-home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(22rem, .96fr);
  align-items: center;
  width: min(var(--na-max), 100%);
  min-height: min(58rem, 100svh);
  margin-inline: auto;
  padding: clamp(8.5rem, 14vh, 11rem) var(--na-gutter) 6.8rem;
  overflow: hidden;
}
.na-home-hero__copy { position: relative; z-index: 2; max-width: 44rem; padding-bottom: 3rem; animation: na-copy-arrive 900ms cubic-bezier(.18,.72,.3,1) both; }
.na-eyebrow,
.na-micro {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  color: var(--na-muted);
  font-family: var(--na-font-mono);
  font-size: .65rem;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.na-eyebrow__line { display: inline-block; width: 2rem; height: 1px; background: var(--na-line-strong); }
.na-home-hero h1,
.na-catalog-hero h1,
.na-product-hero h1 {
  margin: 1.5rem 0 1.7rem;
  color: var(--na-chalk);
  font-family: var(--na-font-display);
  font-size: clamp(3.8rem, 8vw, 8.4rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.075em;
  text-wrap: balance;
}
.na-home-hero h1 { max-width: 10ch; }
.na-home-hero__lead { max-width: 34rem; margin: 0; color: #c4c7c7; font-size: clamp(1.05rem, 1.4vw, 1.26rem); line-height: 1.55; text-wrap: pretty; }
.na-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.2rem; }
.na-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: 3.15rem;
  padding: .85rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--na-fast), border-color var(--na-fast), background var(--na-fast), color var(--na-fast);
}
.na-button:hover { transform: translateY(-2px); }
.na-button:active { transform: translateY(0); }
.na-button--light { color: var(--na-void); border-color: var(--na-chalk); background: var(--na-chalk); }
.na-button--light:hover { border-color: #fff; background: #fff; }
.na-button--outline { color: var(--na-chalk); border-color: var(--na-line-strong); background: rgba(255,255,255,.025); }
.na-button--outline:hover { border-color: var(--na-chalk); background: rgba(255,255,255,.075); }
.na-quiet-link,
.na-text-link { display: inline-flex; align-items: center; gap: .7rem; color: var(--na-chalk); font-size: .85rem; font-weight: 500; text-decoration: none; }
.na-quiet-link span,
.na-text-link span { color: var(--na-green); transition: transform var(--na-fast); }
.na-quiet-link:hover span,
.na-text-link:hover span { transform: translate(2px,-2px); }
.na-home-hero__spec { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: 3.4rem; padding-top: 1.2rem; border-top: 1px solid var(--na-line); color: var(--na-dim); font-family: var(--na-font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.na-home-hero__spec span + span::before { margin-right: 1.2rem; color: #586062; content: "·"; }
.na-home-hero__seal { position: relative; display: grid; place-items: center; width: min(100%, 42rem); aspect-ratio: 1; justify-self: end; perspective: 1100px; animation: na-seal-arrive 1400ms cubic-bezier(.2,.76,.28,1) both; }
.na-home-hero__seal::before,
.na-home-hero__seal::after { position: absolute; inset: 6%; border: 1px solid rgba(224,229,230,.12); border-radius: 50%; content: ""; transform: rotateX(69deg) rotateZ(-20deg); }
.na-home-hero__seal::after { inset: 14%; opacity: .62; transform: rotateX(69deg) rotateZ(26deg); }
.na-home-hero__seal picture { position: relative; z-index: 1; display: block; width: 86%; overflow: hidden; border-radius: 50%; transform: rotateY(-7deg) rotateX(2deg); }
.na-home-hero__seal img { width: 100%; height: auto; border-radius: 50%; mix-blend-mode: lighten; filter: drop-shadow(0 32px 46px rgba(0,0,0,.38)); }
.na-orbit { position: absolute; inset: 8%; border: 1px solid rgba(114,185,164,.16); border-radius: 50%; transform: rotateX(70deg) rotateZ(24deg); }
.na-orbit--two { inset: 18%; border-color: rgba(233,230,227,.1); transform: rotateX(70deg) rotateZ(-24deg); }
.na-home-hero__seal-label { position: absolute; z-index: 2; right: 0; bottom: 8%; color: var(--na-dim); font-family: var(--na-font-mono); font-size: .6rem; letter-spacing: .15em; }
.na-home-hero__seal-label i,
.na-screen-caption i { color: var(--na-green); font-style: normal; }
.na-home-hero__edge { position: absolute; right: var(--na-gutter); bottom: 2.4rem; left: var(--na-gutter); display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--na-line); color: var(--na-dim); font-family: var(--na-font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.na-home-hero__edge a { color: var(--na-muted); text-decoration: none; }
.na-home-hero__edge a span { margin-left: .55rem; color: var(--na-green); }

.na-statement { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 2.7rem var(--na-gutter); border-top: 1px solid var(--na-line); border-bottom: 1px solid var(--na-line); background: var(--na-graphite); }
.na-statement p { max-width: 20ch; margin: 0; color: var(--na-chalk); font-family: var(--na-font-display); font-size: clamp(1.55rem, 3vw, 2.65rem); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; }
.na-statement span { color: var(--na-dim); font-family: var(--na-font-mono); font-size: .61rem; letter-spacing: .12em; }

.na-featured { display: grid; grid-template-columns: minmax(15rem, .64fr) minmax(0, 1.36fr); align-items: center; gap: clamp(3rem, 7vw, 8rem); padding: clamp(5rem, 10vw, 9rem) var(--na-gutter); }
.na-featured__copy { max-width: 31rem; }
.na-featured__copy h2,
.na-section-intro h2,
.na-photo-story h2,
.na-principles h2,
.na-shop-callout h2,
.na-product-detail h2,
.na-product-specs h2 {
  margin: 1.1rem 0 1.25rem;
  color: var(--na-chalk);
  font-family: var(--na-font-display);
  font-size: clamp(2.4rem, 4.6vw, 4.8rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.na-featured__copy > p:not(.na-eyebrow) { margin: 0 0 1.6rem; color: var(--na-muted); font-size: 1rem; }
.na-featured__screen { position: relative; display: block; padding: .55rem; border: 1px solid var(--na-line); border-radius: 4px; overflow: hidden; background: linear-gradient(150deg, rgba(255,255,255,.055), transparent 56%), #0d0f10; box-shadow: 0 32px 80px rgba(0,0,0,.4); }
.na-featured__screen picture { display: block; overflow: hidden; border-radius: 2px; }
.na-featured__screen img { width: 100%; height: auto; transition: transform 700ms cubic-bezier(.2,.7,.25,1); }
.na-featured__screen:hover img { transform: scale(1.015); }
.na-screen-caption { display: block; padding: .75rem .5rem .25rem; color: var(--na-dim); font-family: var(--na-font-mono); font-size: .59rem; letter-spacing: .12em; text-transform: uppercase; }

.na-range,
.na-product-features { padding: clamp(5rem, 9vw, 8.5rem) var(--na-gutter); border-top: 1px solid var(--na-line); background: #111315; }
.na-section-intro { display: flex; align-items: end; justify-content: space-between; gap: 3rem; max-width: var(--na-max); margin: 0 auto 3.6rem; }
.na-section-intro h2 { margin-bottom: 0; }
.na-section-intro > p { max-width: 28rem; margin: 0 0 .35rem; color: var(--na-muted); }
.na-product-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: .65rem; width: min(var(--na-max), 100%); margin: 0 auto; }
.na-product-card { grid-column: span 4; min-width: 0; min-height: 28rem; border: 1px solid var(--na-line); border-radius: 4px; overflow: hidden; background: radial-gradient(ellipse at 60% 10%, rgba(216,225,226,.08), transparent 55%), #171a1c; transition: border-color 220ms, background-color 220ms; }
.na-product-card:nth-child(1) { grid-column: span 8; }
.na-product-card:nth-child(2) { grid-column: span 4; }
.na-product-card:nth-child(3) { grid-column: span 6; }
.na-product-card:nth-child(4) { grid-column: span 6; }
.na-product-card:nth-child(5) { grid-column: span 4; }
.na-product-card:nth-child(6) { grid-column: span 8; }
.na-product-card:hover { border-color: rgba(233,230,227,.34); background-color: #1b1e20; }
.na-product-card__link { display: grid; grid-template-rows: auto minmax(12rem,1fr) auto; height: 100%; min-height: inherit; padding: clamp(1.15rem,2vw,1.75rem); color: var(--na-chalk); text-decoration: none; }
.na-product-card__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.na-product-version { color: var(--na-dim); font-family: var(--na-font-mono); font-size: .58rem; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.na-product-card__art { display: grid; place-items: center; min-height: 15rem; margin: 1rem -1rem; overflow: hidden; }
.na-product-card__art img { width: 100%; max-height: 18rem; object-fit: contain; filter: drop-shadow(0 22px 28px rgba(0,0,0,.35)); }
.na-product-card:nth-child(1) .na-product-card__art img { max-height: 24rem; }
.na-product-card--console .na-product-card__art img,
.na-product-card--vox .na-product-card__art img,
.na-product-card--check .na-product-card__art img,
.na-product-card--resonance .na-product-card__art img,
.na-product-card--tune .na-product-card__art img { width: 96%; border: 1px solid var(--na-line); border-radius: 3px; }
.na-product-card__copy h3,
.na-product-card__copy h2 { margin: 0 0 .55rem; color: var(--na-chalk); font-family: var(--na-font-display); font-size: clamp(1.3rem,2.2vw,2rem); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; }
.na-product-card__copy p { max-width: 42rem; margin: 0 0 1.05rem; color: var(--na-muted); font-size: .9rem; line-height: 1.55; }
.na-product-card__copy .na-text-link { color: var(--na-chalk); font-size: .75rem; }
.na-range__foot { width: min(var(--na-max), 100%); margin: 1.15rem auto 0; color: var(--na-dim); font-size: .77rem; }

/* SVG-led artwork uses the palette as signal, not decoration. */

.na-photo-story { position: relative; display: grid; align-items: end; min-height: clamp(34rem, 64vw, 57rem); padding: var(--na-gutter); overflow: hidden; }
.na-photo-story__image,
.na-photo-story__shade { position: absolute; inset: 0; }
.na-photo-story__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; filter: grayscale(80%) contrast(1.08) brightness(.66); }
.na-photo-story__shade { background: linear-gradient(90deg, rgba(8,9,10,.88), rgba(8,9,10,.43) 47%, rgba(8,9,10,.16)), linear-gradient(0deg, rgba(8,9,10,.82), transparent 42%); }
.na-photo-story__copy { position: relative; z-index: 1; width: min(50rem, 100%); padding: clamp(1rem,4vw,3rem) 0; }
.na-photo-story h2 { max-width: 13ch; margin-block: 1.4rem; font-size: clamp(3rem,7vw,7rem); }
.na-photo-story__copy > p:not(.na-eyebrow) { max-width: 34rem; margin: 0; color: #d2d4d3; font-size: 1rem; }
.na-photo-story__caption { display: block; margin-top: 2rem; color: var(--na-muted); font-family: var(--na-font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }

.na-principles { display: grid; grid-template-columns: minmax(15rem,.8fr) minmax(0,1.2fr); gap: clamp(3rem,9vw,10rem); padding: clamp(5rem,10vw,9rem) var(--na-gutter); }
.na-principles__title { max-width: 38rem; }
.na-principles h2 { margin: 1.2rem 0; }
.na-principles__title > p:last-child { max-width: 33rem; margin: 0; color: var(--na-muted); }
.na-principles__list { border-top: 1px solid var(--na-line); }
.na-principles__list article { display: grid; grid-template-columns: minmax(9rem,.65fr) minmax(0,1fr); gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--na-line); }
.na-principles__list h3 { margin: 0; color: var(--na-chalk); font-family: var(--na-font-display); font-size: 1.15rem; font-weight: 400; letter-spacing: -.03em; }
.na-principles__list p { margin: 0; color: var(--na-muted); font-size: .87rem; }
.na-shop-callout { display: flex; align-items: end; justify-content: space-between; gap: 2.5rem; margin: 0 var(--na-gutter) clamp(4rem,8vw,7.5rem); padding: clamp(1.7rem,4vw,3.5rem); border: 1px solid var(--na-line); border-radius: 4px; background: linear-gradient(120deg, rgba(255,255,255,.045), transparent 55%), #131617; }
.na-shop-callout > div { max-width: 46rem; }
.na-shop-callout h2 { margin: .75rem 0 1rem; font-size: clamp(2.3rem,4vw,4rem); }
.na-shop-callout p:not(.na-eyebrow) { max-width: 38rem; margin: 0; color: var(--na-muted); font-size: .9rem; }
.na-shop-callout .na-button { flex: 0 0 auto; }

/* Catalog */
.na-catalog { padding-top: 8rem; }
.na-catalog-hero { width: min(var(--na-max), calc(100% - 2 * var(--na-gutter))); margin: 0 auto; padding: clamp(3.5rem,8vw,7rem) 0 2rem; }
.na-catalog-hero h1 { max-width: 12ch; margin: 1.4rem 0 1.3rem; font-size: clamp(3.5rem,8vw,8.4rem); }
.na-catalog-hero > p:not(.na-eyebrow) { max-width: 44rem; margin: 0; color: var(--na-muted); font-size: clamp(1rem,1.6vw,1.2rem); }
.na-family-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2.2rem; padding: .4rem; border: 1px solid var(--na-line); border-radius: 1rem; background: rgba(20,23,24,.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.na-family-nav a { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.5rem; padding: .55rem .85rem; border: 1px solid transparent; border-radius: .65rem; color: var(--na-muted); font-size: .76rem; text-decoration: none; transition: color var(--na-fast), border-color var(--na-fast), background var(--na-fast); }
.na-family-nav a:hover { color: var(--na-chalk); border-color: var(--na-line); background: rgba(255,255,255,.04); }
.na-family-nav a span { color: var(--na-green); }
.na-preview-note { width: min(var(--na-max), calc(100% - 2 * var(--na-gutter))); margin: 0 auto 1rem; padding-top: 1rem; border-top: 1px solid var(--na-line); color: var(--na-dim); font-size: .76rem; }
.na-product-grid--catalog { width: min(var(--na-max), calc(100% - 2 * var(--na-gutter))); margin-bottom: clamp(4rem,8vw,7rem); }
.na-product-grid--catalog .na-product-card { grid-column: span 6; min-height: 34rem; }
.na-product-grid--catalog .na-product-card:nth-child(2),
.na-product-grid--catalog .na-product-card:nth-child(5) { grid-column: span 6; }
.na-product-grid--catalog .na-product-card__art { min-height: 18rem; }
.na-product-grid--catalog .na-product-card__copy h2 { font-size: clamp(1.5rem,3vw,2.3rem); }
.na-product-grid--catalog + .na-shop-callout,
.na-shop-callout--compact { margin-top: 0; }

/* Individual product pages */
.na-product-page { padding-top: 7rem; }
.na-breadcrumb { display: flex; align-items: center; gap: .7rem; width: min(var(--na-max), calc(100% - 2 * var(--na-gutter))); margin: 0 auto; padding: 1.1rem 0; color: var(--na-dim); font-family: var(--na-font-mono); font-size: .61rem; letter-spacing: .08em; }
.na-breadcrumb a { color: var(--na-muted); text-decoration: none; }
.na-breadcrumb a:hover { color: var(--na-chalk); }
.na-product-hero { position: relative; display: grid; grid-template-columns: minmax(18rem,.74fr) minmax(0,1.26fr); align-items: center; gap: clamp(2rem,5vw,5rem); width: min(var(--na-max), calc(100% - 2 * var(--na-gutter))); min-height: 38rem; margin: 0 auto; padding: 3rem 0 4.3rem; }
.na-product-hero__copy { position: relative; z-index: 2; max-width: 35rem; }
.na-product-hero h1 { margin: 1.25rem 0 1.25rem; font-size: clamp(3.2rem,6vw,6.8rem); }
.na-product-hero__intro { margin: 0; color: var(--na-chalk); font-family: var(--na-font-display); font-size: clamp(1.25rem,2.3vw,2rem); line-height: 1.15; letter-spacing: -.04em; }
.na-product-hero__note { max-width: 34rem; margin: 1rem 0 0; color: var(--na-muted); font-size: .95rem; }
.na-product-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.7rem; }
.na-product-hero__shop { display: inline-flex; align-items: center; gap: .55rem; color: var(--na-muted); font-family: var(--na-font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.na-product-hero__build { display: flex; flex-wrap: wrap; gap: .4rem .65rem; margin: 1.55rem 0 0; color: var(--na-dim); font-family: var(--na-font-mono); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }
.na-product-hero__build span { color: var(--na-muted); }
.na-product-hero__build i { color: var(--na-green); font-style: normal; }
.na-product-hero__visual { position: relative; padding: .6rem; border: 1px solid var(--na-line-strong); border-radius: 4px; overflow: hidden; background: radial-gradient(ellipse at 65% 20%, rgba(114,185,164,.08), transparent 55%), #101213; box-shadow: 0 34px 85px rgba(0,0,0,.4); }
.na-product-hero__visual .na-art { display: grid; place-items: center; min-height: 25rem; margin: 0; }
.na-product-hero__visual img { width: 100%; max-height: 35rem; object-fit: contain; }
.na-product-hero__edge { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: .8rem 0; border-top: 1px solid var(--na-line); color: var(--na-dim); font-family: var(--na-font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.na-product-detail { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(16rem,.9fr); align-items: center; gap: clamp(3rem,8vw,8rem); padding: clamp(4rem,8vw,8rem) var(--na-gutter); border-top: 1px solid var(--na-line); background: #111315; }
.na-product-detail__image { position: relative; min-width: 0; padding: .55rem; border: 1px solid var(--na-line); border-radius: 4px; background: #0b0d0e; }
.na-product-detail__image picture { display: block; height: clamp(17rem,38vw,33rem); overflow: hidden; }
.na-product-detail__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(70%) contrast(1.05) brightness(.82); }
.na-product-detail__copy { max-width: 34rem; }
.na-product-detail__copy > p:not(.na-eyebrow) { margin: 0; color: var(--na-muted); font-size: 1rem; }
.na-product-features { border-top: 1px solid var(--na-line); }
.na-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; width: min(var(--na-max),100%); margin: 0 auto; border-top: 1px solid var(--na-line); border-bottom: 1px solid var(--na-line); }
.na-feature-point { min-height: 15rem; padding: 1.55rem clamp(1rem,2.5vw,2.35rem) 1.8rem; border-right: 1px solid var(--na-line); }
.na-feature-point:first-child { padding-left: 0; }
.na-feature-point:last-child { padding-right: 0; border: 0; }
.na-feature-point > .na-micro { color: var(--na-green); }
.na-feature-point h3 { margin: 1.1rem 0 .75rem; color: var(--na-chalk); font-family: var(--na-font-display); font-size: clamp(1.25rem,1.8vw,1.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; }
.na-feature-point p { margin: 0; color: var(--na-muted); font-size: .86rem; line-height: 1.6; }
.na-product-specs { display: grid; grid-template-columns: minmax(16rem,.8fr) minmax(0,1.2fr); gap: clamp(3rem,8vw,8rem); padding: clamp(4rem,8vw,8rem) var(--na-gutter); }
.na-product-specs__intro { max-width: 30rem; }
.na-product-specs h2 { font-size: clamp(2.5rem,4vw,4rem); }
.na-product-specs dl { margin: 0; border-top: 1px solid var(--na-line); }
.na-spec-row { display: grid; grid-template-columns: minmax(8rem,.55fr) minmax(0,1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--na-line); }
.na-spec-row dt { color: var(--na-dim); font-family: var(--na-font-mono); font-size: .63rem; letter-spacing: .07em; text-transform: uppercase; }
.na-spec-row dd { margin: 0; color: var(--na-chalk); font-size: .86rem; }
.na-product-note { display: flex; align-items: start; gap: 1rem; width: min(var(--na-max), calc(100% - 2 * var(--na-gutter))); margin: 0 auto clamp(3rem,7vw,6rem); padding: 1.2rem 0; border-top: 1px solid var(--na-line); border-bottom: 1px solid var(--na-line); }
.na-note-mark { flex: 0 0 1.25rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--na-blue); border-radius: 50%; color: var(--na-blue); font-family: var(--na-font-mono); font-size: .7rem; }
.na-product-note p { max-width: 58rem; margin: 0; color: var(--na-muted); font-size: .8rem; }
.na-product-page .na-shop-callout { margin-top: 0; }

@keyframes na-copy-arrive { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes na-seal-arrive { from { opacity: 0; transform: translate3d(1rem,1.2rem,0) scale(.97); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }

@media (max-width: 900px) {
  .na-home-hero { grid-template-columns: minmax(0,1fr) minmax(17rem,.75fr); min-height: 48rem; }
  .na-home-hero__seal { width: min(100%, 33rem); }
  .na-product-card:nth-child(n) { grid-column: span 6; }
  .na-product-card:nth-child(1),
  .na-product-card:nth-child(6) { grid-column: span 12; }
  .na-product-hero { grid-template-columns: minmax(17rem,.78fr) minmax(0,1.22fr); gap: 2rem; }
  .na-product-hero__visual .na-art { min-height: 21rem; }
}

@media (max-width: 700px) {
  :root { --na-gutter: 1.2rem; }
  .site-nav { inset: .55rem var(--na-gutter) auto; width: calc(100% - 2 * var(--na-gutter)); }
  .nav-capsule { min-height: 3.6rem; padding-left: .75rem; border-radius: .85rem; }
  .nav-brand img { width: 1.75rem; height: 1.75rem; }
  .nav-brand__wordmark { font-size: .8rem; }
  .na-home-hero { display: flex; flex-direction: column; align-items: stretch; min-height: auto; padding-top: 8.6rem; padding-bottom: 6rem; }
  .na-home-hero__copy { padding-bottom: 0; }
  .na-home-hero h1 { max-width: 9ch; margin: 1.2rem 0; font-size: clamp(3.55rem,15vw,6rem); }
  .na-home-hero__lead { max-width: 34rem; }
  .na-home-hero__seal { width: min(90vw,29rem); margin: -1.2rem auto -2rem; }
  .na-home-hero__seal-label { right: 2%; bottom: 5%; }
  .na-home-hero__edge { bottom: 1.5rem; font-size: .53rem; }
  .na-home-hero__spec { margin-top: 2rem; }
  .na-statement { display: grid; gap: 1.1rem; padding-block: 2rem; }
  .na-statement p { max-width: 16ch; }
  .na-statement span { font-size: .54rem; }
  .na-featured { grid-template-columns: 1fr; gap: 2.2rem; padding-block: 4.5rem; }
  .na-featured__copy h2,
  .na-section-intro h2,
  .na-product-detail h2 { font-size: clamp(2.55rem,11vw,4.2rem); }
  .na-section-intro { display: block; margin-bottom: 2.1rem; }
  .na-section-intro > p { margin-top: 1.1rem; }
  .na-product-grid { grid-template-columns: minmax(0,1fr); gap: .55rem; }
  .na-product-card:nth-child(n) { grid-column: auto; min-height: 27rem; }
  .na-product-card:nth-child(1) { min-height: 31rem; }
  .na-product-card__art { min-height: 14rem; }
  .na-product-card__art img { max-height: 17rem; }
  .na-photo-story { min-height: 41rem; padding: var(--na-gutter); }
  .na-photo-story__image img { object-position: 58% center; }
  .na-photo-story__shade { background: linear-gradient(90deg,rgba(8,9,10,.72),rgba(8,9,10,.22)),linear-gradient(0deg,rgba(8,9,10,.86),transparent 72%); }
  .na-photo-story h2 { max-width: 10ch; font-size: clamp(3.2rem,14vw,5.3rem); }
  .na-principles { grid-template-columns: 1fr; gap: 2.4rem; padding-block: 4.5rem; }
  .na-principles h2 { font-size: clamp(2.6rem,12vw,4rem); }
  .na-principles__list article { grid-template-columns: 1fr; gap: .5rem; }
  .na-shop-callout { align-items: start; flex-direction: column; margin-inline: var(--na-gutter); padding: 1.35rem; }
  .na-shop-callout h2 { font-size: clamp(2.4rem,10vw,3.6rem); }
  .na-catalog { padding-top: 5.7rem; }
  .na-catalog-hero { padding-block: 3rem 1.5rem; }
  .na-catalog-hero h1 { font-size: clamp(3.25rem,13vw,6rem); }
  .na-family-nav { gap: .15rem; border-radius: .8rem; }
  .na-family-nav a { min-height: 2.35rem; padding-inline: .6rem; font-size: .68rem; }
  .na-product-grid--catalog { grid-template-columns: minmax(0,1fr); }
  .na-product-grid--catalog .na-product-card:nth-child(n) { grid-column: auto; min-height: 29rem; }
  .na-product-page { padding-top: 5.6rem; }
  .na-breadcrumb { padding-block: .8rem; font-size: .54rem; }
  .na-product-hero { grid-template-columns: minmax(0,1fr); gap: 2rem; min-height: auto; padding-block: 2.2rem 4.2rem; }
  .na-product-hero h1 { max-width: 12ch; margin-block: 1.1rem; font-size: clamp(3.2rem,13vw,5.3rem); }
  .na-product-hero__visual { order: 2; }
  .na-product-hero__visual .na-art { min-height: 16rem; }
  .na-product-hero__visual img { max-height: 21rem; }
  .na-product-detail { grid-template-columns: 1fr; gap: 2.2rem; padding-block: 4rem; }
  .na-product-detail__image picture { height: 17rem; }
  .na-product-features { padding-block: 4.2rem; }
  .na-feature-grid { grid-template-columns: 1fr; }
  .na-feature-point,
  .na-feature-point:first-child,
  .na-feature-point:last-child { min-height: auto; padding: 1.3rem 0; border-right: 0; border-bottom: 1px solid var(--na-line); }
  .na-feature-point:last-child { border-bottom: 0; }
  .na-product-specs { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 4.2rem; }
  .na-product-specs h2 { font-size: clamp(2.6rem,11vw,3.9rem); }
  .na-spec-row { grid-template-columns: minmax(7rem,.7fr) minmax(0,1fr); }
  .na-product-grid--catalog + .na-shop-callout { margin: 0 var(--na-gutter) 3rem; }
}

@media (max-width: 420px) {
  .na-home-hero__spec { gap: .45rem .75rem; font-size: .52rem; }
  .na-home-hero__spec span + span::before { margin-right: .75rem; }
  .na-button { gap: .7rem; }
  .na-family-nav a { gap: .35rem; font-size: .62rem; }
}

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

@media (prefers-reduced-transparency: reduce) {
  .nav-capsule.glass,
  .nav-sheet.glass,
  .localnav__bar.glass,
  .hero-pill.glass,
  .segmented.glass,
  .paddle.glass,
  .na-family-nav { background: #151719; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (forced-colors: active) {
  .na-button,
  .na-product-card,
  .na-product-hero__visual,
  .na-featured__screen,
  .na-family-nav { border: 1px solid CanvasText; }
  .na-eyebrow__dot,
  .na-status-dot { forced-color-adjust: none; }
}

@media print {
  body::after,
  .site-nav,
  .na-home-hero__seal,
  .na-product-hero__visual { display: none !important; }
  body, .section, .site-footer { color: #111 !important; background: #fff !important; }
}