/* ==========================================================================
   SIN Cycling - stylesheet
   Ported from the client reference build, reformatted for readability.
   ========================================================================== */

/* ==========================================================================
   Self-hosted fonts
   ========================================================================== */

/* Clash Display - display (--disp) */
@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/clash-display-400.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/clash-display-500.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/clash-display-600.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/clash-display-700.woff2") format("woff2");
}

/* JetBrains Mono - mono (--mono) */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
}

/* General Sans - body (--body) */
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/general-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/general-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/general-sans-600.woff2") format("woff2");
}

/* ==========================================================================
   Root variables
   ========================================================================== */

:root {
  --ink: #0A0D12;
  --ink-1: #0C1017;
  --panel: #11161F;
  --panel-2: #161D29;
  --line: #222E42;
  --line-soft: rgba(126, 158, 200, .10);
  --grid: rgba(110, 140, 185, .055);
  --navy: #1F3247;
  --paper: #E9EEF5;
  --muted: #97A4BB;
  --faint: #6E7C95;
  --glow: #BFE6FF;
  --holo: linear-gradient(100deg, #ff6a7d 0%, #ffce7a 22%, #7dffd6 46%, #74d6ff 64%, #b79bff 82%, #ff8af0 100%);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --disp: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --body: "General Sans", "Inter", system-ui, sans-serif;
  --maxw: 1180px;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient aerospace atmosphere - a slow, cool depth field behind everything.
   Fixed to the viewport so it reads as consistent light through transparent
   sections (hero, tech, faq, contact, footer) without any scroll cost.
   Kept strictly in the cool blue / cyan / teal band so the dark never reads
   as a flat slab below the hero. */
body::after {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 36% at 14% 16%, rgba(58, 118, 176, .32), transparent 68%),
    radial-gradient(36% 34% at 88% 30%, rgba(72, 150, 196, .26), transparent 70%),
    radial-gradient(38% 38% at 80% 84%, rgba(38, 104, 132, .24), transparent 72%),
    radial-gradient(50% 46% at 28% 96%, rgba(30, 74, 122, .32), transparent 74%),
    radial-gradient(28% 24% at 52% 2%, rgba(150, 205, 255, .14), transparent 72%),
    radial-gradient(122% 120% at 50% 40%, transparent 44%, rgba(3, 5, 9, .62) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  body::after {
    animation: aurora-drift 44s ease-in-out infinite alternate;
    will-change: transform;
  }
}

@keyframes aurora-drift {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(-1deg);
  }
  to {
    transform: translate3d(4%, 3%, 0) scale(1.16) rotate(1.5deg);
  }
}

/* Technical texture layer: fine blueprint grid + a coarser drafting grid for
   hierarchy + a whisper-faint carbon-fibre twill (this is a carbon brand, so
   the weave belongs here). All near-invisible on close inspection only - a
   second-read detail, never clutter over content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(rgba(126, 158, 200, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 158, 200, .05) 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(150, 190, 235, .020) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(150, 190, 235, .020) 0 1px, transparent 1px 7px);
  background-size: 46px 46px, 46px 46px, 230px 230px, 230px 230px, auto, auto;
  mask-image: radial-gradient(circle at 50% 26%, #000 0%, #000 62%, transparent 104%);
}

@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: grid-crawl 90s linear infinite;
    will-change: background-position;
  }
}

@keyframes grid-crawl {
  to {
    background-position:
      46px 46px, 46px 46px, 230px 230px, 230px 230px, 46px 46px, -46px 46px;
  }
}

.holo-rule {
  height: 2px;
  background: var(--holo);
  opacity: .9;
}

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

img {
  display: block;
  max-width: 100%;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--glow);
  opacity: .6;
}

h2.sect {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 18ch;
}

.lead {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 17px);
  max-width: 60ch;
  margin-top: 20px;
}

section {
  position: relative;
  padding: clamp(72px, 11vw, 140px) 0;
}

/* ==========================================================================
   Nav
   ========================================================================== */

header.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s;
}

header.nav.scrolled {
  background: rgba(8, 11, 16, .78);
  backdrop-filter: blur(11px);
  border-bottom: 1px solid var(--line);
}

.nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav .brand img {
  height: 34px;
  width: auto;
}

.nav .brand small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.nav nav {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  transition: color .2s;
}

.nav nav a:hover {
  color: var(--paper);
}

/* Series dropdown */
.nav .has-drop {
  position: relative;
  display: flex;
  align-items: center;
}

.nav .has-drop .drop-label::after {
  content: "\25BE";
  margin-left: 6px;
  font-size: .85em;
  opacity: .7;
}

.nav .has-drop::after {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 100%;
  height: 16px;
}

.nav .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  background: rgba(8, 11, 16, .97);
  backdrop-filter: blur(11px);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  z-index: 60;
}

.nav .has-drop:hover .dropdown {
  opacity: 1;
  visibility: visible;
}

.nav .dropdown a {
  display: block;
  padding: 11px 20px;
  white-space: nowrap;
}

.nav .dropdown a:hover {
  color: var(--paper);
  background: rgba(191, 230, 255, .06);
}

.navcta {
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 2px;
  color: var(--paper) !important;
  transition: border-color .2s, background .2s;
}

.navcta:hover {
  border-color: var(--glow);
  background: rgba(191, 230, 255, .06);
}

.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 2px;
  cursor: pointer;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 104px 0 110px;
  overflow: hidden;
}

.hero .glowfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 55% at 50% 38%, rgba(40, 72, 110, .40), transparent 70%);
}

/* faint engineering sketches behind the hero */
.hero-sketches {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-sketches .sk {
  position: absolute;
  opacity: .40;
  filter: grayscale(1) brightness(1.6);
}

.hero-sketches .sk-wheel {
  left: 8%;
  top: 50%;
  width: min(40vw, 460px);
  transform: translateY(-50%);
}

.hero-sketches .sk-joint {
  right: 7%;
  top: 48%;
  width: min(30vw, 360px);
  transform: translateY(-50%);
}

.wheelwrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(86vw, 820px);
  transform: translate(-50%, -52%);
  z-index: 0;
  opacity: .5;
}

.wheelwrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 60s linear infinite;
}

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

.wf-rim {
  fill: none;
  stroke: #7fa9d6;
  stroke-width: 1.1;
  opacity: .55;
}

.wf-rim2 {
  fill: none;
  stroke: #5f86b4;
  stroke-width: .8;
  opacity: .4;
}

.wf-fine {
  stroke: #6f9fd0;
  stroke-width: .45;
  opacity: .30;
}

.wf-spoke {
  stroke: #88b2dd;
  stroke-width: .5;
  opacity: .32;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}

.hero-logo {
  width: min(80vw, 580px);
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 26px rgba(150, 205, 255, .45)) drop-shadow(0 0 60px rgba(70, 130, 200, .30));
}

.hero h1 {
  font-family: var(--disp);
  font-weight: 500;
  font-size: clamp(20px, 3.3vw, 34px);
  letter-spacing: -.01em;
  line-height: 1.18;
  max-width: 21ch;
  margin: 0 auto;
}

.hero .subtag {
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--glow);
  opacity: .85;
  margin-bottom: 18px;
}

.hero .meta {
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--faint);
}

.hero .meta b {
  color: var(--paper);
  font-weight: 500;
}

.hero .meta span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.herobtns {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .2s, background .2s, border-color .2s;
  display: inline-block;
}

.btn-pri {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
}

.btn-pri:hover {
  background: var(--glow);
  border-color: var(--glow);
  transform: translateY(-2px);
}

.btn-sec {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
}

.btn-sec:hover {
  border-color: var(--glow);
  transform: translateY(-2px);
}

.scrollcue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--faint);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.scrollcue .bar {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--glow), transparent);
  animation: drop 1.8s ease-in-out infinite;
}

@keyframes drop {
  0%, 100% {
    opacity: .3;
    transform: scaleY(.6);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ==========================================================================
   Story
   ========================================================================== */

.story {
  background:
    radial-gradient(58% 46% at 88% 4%, rgba(66, 120, 166, .12), transparent 62%),
    radial-gradient(40% 44% at 4% 96%, rgba(40, 78, 118, .10), transparent 66%),
    var(--ink-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.story .grid2 {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}

.story-hero {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 56px;
  align-items: center;
}

.story-hero .product-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   Origin: interactive Feather One explorer (self-contained "we-" component)
   Namespaced so it never collides with the bespoke chip picker.
   ========================================================================== */
.story-hero .wheel-explore {
  margin: 0;
}

.we-stage {
  position: relative;
  display: block;
  line-height: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  /* studio spotlight so the dark carbon lifts off the dark panel */
  background:
    radial-gradient(44% 42% at 47% 42%, rgba(191, 230, 255, .14), transparent 72%),
    radial-gradient(74% 72% at 47% 44%, #26344d 0%, #19212f 52%, #10151e 100%),
    var(--panel);
}

.we-stage > img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .55));
}

/* dimming scrim that fades in while a hotspot is engaged */
.we-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 16, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 1;
}

.we-stage.has-active .we-scrim {
  opacity: 1;
}

.we-hs {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}

.we-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(8, 11, 16, .5), 0 0 12px rgba(191, 230, 255, .55);
  transition: transform .25s ease, box-shadow .25s ease;
}

.we-dot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(191, 230, 255, .6);
  animation: we-pulse 2.4s ease-out infinite;
}

@keyframes we-pulse {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

.we-hs:hover .we-dot,
.we-hs:focus-visible .we-dot,
.we-hs.is-active .we-dot {
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 0 0 1px rgba(8, 11, 16, .5), 0 0 18px rgba(191, 230, 255, .9);
}

.we-hs:focus-visible {
  outline: none;
}

.we-hs:focus-visible .we-dot {
  box-shadow: 0 0 0 2px var(--glow), 0 0 18px rgba(191, 230, 255, .9);
}

.we-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(12, 16, 23, .94);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  text-align: left;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  pointer-events: none;
  z-index: 3;
}

.we-hs:hover .we-card,
.we-hs:focus-visible .we-card,
.we-hs.is-active .we-card {
  opacity: 1;
  visibility: visible;
}

.we-title {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 18px;
  color: var(--paper);
  letter-spacing: .01em;
}

.we-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--glow);
}

.we-desc {
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* card placement so it opens toward the wheel centre and never clips */
.we-hs--t .we-card { transform: translate(-50%, 22%) scale(.96); }
.we-hs--t:hover .we-card,
.we-hs--t:focus-visible .we-card,
.we-hs--t.is-active .we-card { transform: translate(-50%, 22%) scale(1); }

.we-hs--l .we-card { transform: translate(14%, -50%) scale(.96); }
.we-hs--l:hover .we-card,
.we-hs--l:focus-visible .we-card,
.we-hs--l.is-active .we-card { transform: translate(14%, -50%) scale(1); }

.we-hs--r .we-card { transform: translate(-114%, -50%) scale(.96); }
.we-hs--r:hover .we-card,
.we-hs--r:focus-visible .we-card,
.we-hs--r.is-active .we-card { transform: translate(-114%, -50%) scale(1); }

.we-hs--bl .we-card { transform: translate(-8%, -118%) scale(.96); }
.we-hs--bl:hover .we-card,
.we-hs--bl:focus-visible .we-card,
.we-hs--bl.is-active .we-card { transform: translate(-8%, -118%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .we-dot::before {
    animation: none;
  }
}

.story-hero .wheel-explore figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 14px;
  text-align: center;
}

.story p.body {
  color: var(--muted);
  margin-top: 18px;
}

.story p.body strong {
  color: var(--paper);
  font-weight: 500;
}

/* ==========================================================================
   Pillars
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.pillar {
  display: flex;
  flex-direction: column;
}

.pillar-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  margin-top: auto;
  padding-top: 20px;
  opacity: .92;
}

.pillar:nth-child(3) .pillar-img {
  object-position: 75% center;
}

.pillar {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 3px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}

.pillar:hover {
  border-color: #36506f;
  transform: translateY(-3px);
}

.pillar .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--glow);
  opacity: .7;
  text-transform: uppercase;
}

.pillar h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 19px;
  margin: 10px 0 8px;
}

.pillar p {
  color: var(--muted);
  font-size: 14.5px;
}

/* ==========================================================================
   Tech
   ========================================================================== */

.tech {
  background: radial-gradient(44% 40% at 10% 6%, rgba(64, 118, 164, .10), transparent 64%);
}

.tech .grid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.statcard {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  padding: 38px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 34px;
}

.statcard::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--holo);
  opacity: .55;
}

.statcard .stat-text {
  flex: 1;
  min-width: 0;
}

.statcard .stat-imgs {
  flex: none;
  width: min(42%, 300px);
  display: flex;
  align-items: center;
  gap: 20px;
}

.statcard .stat-imgs img {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: auto;
  display: block;
  opacity: .95;
}

.statcard .big {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(64px, 11vw, 118px);
  line-height: .9;
  letter-spacing: -.04em;
}

.statcard .big small {
  font-size: .4em;
  vertical-align: super;
  color: var(--glow);
}

.statcard .cap {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
  margin-top: 14px;
  max-width: 30ch;
}

.grades {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}

.grade {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 14px;
  color: var(--paper);
}

.grade b {
  color: var(--glow);
}

.feat {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.feat .row {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
}

.feat .row .k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--glow);
  opacity: .8;
  padding-top: 3px;
}

.feat .row h4 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 6px;
}

.feat .row p {
  color: var(--muted);
  font-size: 14.5px;
}

/* ==========================================================================
   Interactive fibre property map
   ========================================================================== */

.fibre-panel {
  margin: 40px 0 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(116, 214, 255, .06), transparent 60%),
    linear-gradient(160deg, var(--panel-2), var(--panel));
  padding: 34px 34px 26px;
  position: relative;
  overflow: hidden;
}

.fibre-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--holo);
  opacity: .55;
}

.fibre-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.fibre-intro {
  max-width: 56ch;
}

.fibre-intro .eyebrow {
  margin-bottom: 14px;
}

.fibre-intro h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: -.02em;
  line-height: 1.12;
}

.fibre-intro p {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 12px;
}

.fibre-intro b {
  color: var(--glow);
  font-weight: 600;
}

/* Legend -------------------------------------------------------------- */

.fibre-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  background: rgba(10, 13, 18, .4);
  cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
  user-select: none;
}

.lg-chip:hover {
  color: var(--paper);
  border-color: var(--faint);
}

.lg-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, var(--glow));
  box-shadow: 0 0 8px var(--c, var(--glow));
  flex: none;
}

.lg-chip.sin {
  border-color: rgba(191, 230, 255, .4);
  color: var(--paper);
}

.lg-chip.sin .dot {
  background: var(--glow);
  box-shadow: 0 0 10px var(--glow);
}

.lg-chip.off {
  opacity: .4;
}

.lg-chip.off .dot {
  box-shadow: none;
}

/* Stage / svg --------------------------------------------------------- */

.fibre-stage {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

.fibre-fallback {
  width: 100%;
  height: auto;
  border-radius: 3px;
  opacity: .95;
}

.fibre-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  font-family: var(--mono);
}

.fibre-svg .axis-line {
  stroke: var(--line);
  stroke-width: 1;
}

.fibre-svg .grid-line {
  stroke: rgba(110, 140, 185, .12);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.fibre-svg .tick-label {
  fill: var(--faint);
  font-size: 11px;
}

.fibre-svg .axis-title {
  fill: var(--muted);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fibre-svg .zone-fill {
  fill: rgba(116, 214, 255, .05);
  stroke: rgba(191, 230, 255, .28);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.fibre-svg .zone-label {
  fill: var(--glow);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .8;
}

.fibre-svg .frontier-arrow {
  stroke: var(--faint);
  stroke-width: 1;
  fill: none;
  marker-end: url(#fibreArrow);
}

.fibre-svg .frontier-text {
  fill: var(--faint);
  font-size: 10.5px;
  letter-spacing: .1em;
}

/* Data points --------------------------------------------------------- */

.fibre-svg .pt {
  cursor: pointer;
  outline: none;
}

.fibre-svg .pt .halo {
  fill: var(--pt-color);
  opacity: 0;
  transition: opacity .2s;
}

.fibre-svg .pt .core {
  fill: var(--pt-color);
  stroke: var(--ink);
  stroke-width: 1.25;
  transition: r .18s ease, filter .2s;
}

.fibre-svg .pt:hover .halo,
.fibre-svg .pt.active .halo,
.fibre-svg .pt:focus-visible .halo {
  opacity: .22;
}

.fibre-svg .pt.sin .core {
  stroke: var(--glow);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px var(--pt-color));
}

.fibre-svg .pt .ring {
  fill: none;
  stroke: var(--glow);
  stroke-width: 1.4;
  opacity: .55;
}

.fibre-svg .pt .pin {
  fill: var(--glow);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
}

.fibre-svg .pt .pin-bg {
  fill: rgba(10, 13, 18, .82);
  stroke: rgba(191, 230, 255, .35);
  stroke-width: 1;
}

/* Dim siblings while one point is engaged */
.fibre-stage.dim .fibre-svg .pt:not(.active):not(.sin) {
  opacity: .28;
}

.fibre-stage.dim .fibre-svg .pt:not(.active).sin {
  opacity: .55;
}

/* Category filtered off */
.fibre-svg .pt.hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* Tooltip ------------------------------------------------------------- */

.fibre-tip {
  position: absolute;
  z-index: 4;
  min-width: 150px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(8, 11, 16, .94);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .16s ease;
}

.fibre-tip.show {
  opacity: 1;
}

.fibre-tip .tip-name {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fibre-tip .tip-name .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.fibre-tip .tip-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 4px 0 9px;
}

.fibre-tip .tip-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--mono);
  font-size: 12px;
  padding: 3px 0;
}

.fibre-tip .tip-row span {
  color: var(--muted);
}

.fibre-tip .tip-row b {
  color: var(--paper);
  font-weight: 500;
}

.fibre-tip .tip-sin {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--glow);
  border-radius: 2px;
  padding: 4px 8px;
  text-align: center;
}

.fibre-foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: .03em;
  margin-top: 16px;
  text-align: center;
}

/* Entrance animation state (added by JS, cleared on reveal) */
.fibre-svg.enter .pt {
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box;
  transform-origin: center;
}

.fibre-svg.run .pt {
  opacity: 1;
  transform: scale(1);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .9, .3, 1.2);
  transition-delay: var(--delay, 0ms);
}

.fibre-svg.enter .axis-line {
  stroke-dashoffset: var(--len, 600);
  stroke-dasharray: var(--len, 600);
}

.fibre-svg.run .axis-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .7s ease;
}

.fibre-svg.enter .zone-fill,
.fibre-svg.enter .zone-label,
.fibre-svg.enter .frontier-arrow,
.fibre-svg.enter .frontier-text,
.fibre-svg.enter .pin-bg,
.fibre-svg.enter .pin,
.fibre-svg.enter .ring {
  opacity: 0;
}

.fibre-svg.run .zone-fill {
  opacity: 1;
  transition: opacity .6s ease .45s;
}

.fibre-svg.run .zone-label,
.fibre-svg.run .frontier-text {
  opacity: .8;
  transition: opacity .6s ease .5s;
}

.fibre-svg.run .frontier-arrow {
  opacity: 1;
  transition: opacity .6s ease .5s;
}

.fibre-svg.run .pin,
.fibre-svg.run .pin-bg {
  opacity: 1;
  transition: opacity .5s ease .75s;
}

.fibre-svg.run .ring {
  opacity: .55;
  transition: opacity .5s ease .75s;
}

@keyframes fibrePulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }
  70% {
    transform: scale(2.4);
    opacity: 0;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.fibre-svg.run .pt.sin .ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: fibrePulse 2.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fibre-svg .pt,
  .fibre-svg.run .pt {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .fibre-svg.run .pt.sin .ring {
    animation: none;
  }
  .fibre-svg.run .axis-line {
    transition: none;
  }
}

@media (max-width: 700px) {
  .fibre-panel {
    padding: 24px 18px 20px;
  }
  .fibre-head {
    margin-bottom: 16px;
  }
  .fibre-legend {
    width: 100%;
  }
  .fibre-svg .pt .pin,
  .fibre-svg .pt .pin-bg {
    display: none;
  }
  .fibre-svg .axis-title {
    font-size: 10px;
    letter-spacing: .08em;
  }
}

/* ==========================================================================
   Validation
   ========================================================================== */

.valid {
  background: var(--ink-1);
  border-top: 1px solid var(--line);
}

.readouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 54px;
}

.ro {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  padding: 26px 22px;
  position: relative;
}

.ro::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 9px var(--glow);
  opacity: .7;
}

.ro .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

.ro .val {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1;
  margin-top: 16px;
}

.ro .val u {
  font-size: .42em;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--mono);
  margin-left: 5px;
}

.valid .note {
  margin-top: 40px;
  border-left: 2px solid;
  border-image: var(--holo) 1;
  padding: 6px 0 6px 22px;
  max-width: 64ch;
  color: var(--muted);
}

.valid .note strong {
  color: var(--paper);
  font-weight: 500;
  font-family: var(--disp);
}

/* ==========================================================================
   Wheels
   ========================================================================== */

.wheels h2.sect {
  max-width: 24ch;
}

.series {
  margin-top: 60px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

.series-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 30px 26px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), transparent);
}

.series-head .who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.series-head .who .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--glow);
  opacity: .75;
}

.series-head .who h3 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.series-logo {
  height: 1.6em;
  width: auto;
  opacity: .92;
  flex: none;
}

.series-head .who p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 46ch;
}

.series-head .icon {
  flex: none;
  width: 240px;
  color: var(--paper);
  opacity: .85;
}

.product-shot {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

.product-shot img {
  width: 100%;
  height: auto;
  display: block;
}

/* glow backdrop behind the wavy / feather / origin product shot */
.wavy-hero .product-shot,
.feather-hero .product-shot,
.story-hero .product-shot {
  background: radial-gradient(72% 72% at 50% 44%, rgba(40, 72, 110, .55), #0b1019 76%);
  padding: 22px;
}

/* split hero: intro left, photo right (wavy + feather + materials) */
.wavy-hero,
.feather-hero,
.tech-hero {
  display: grid;
  gap: 48px;
  align-items: center;
}

.wavy-hero,
.feather-hero {
  grid-template-columns: 1fr .82fr;
}

.tech-hero {
  grid-template-columns: 1fr minmax(0, 260px);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
}

thead th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  padding: 16px 30px;
  border-bottom: 1px solid var(--line);
}

tbody td {
  padding: 15px 30px;
  font-size: 14px;
  border-bottom: 1px solid rgba(34, 46, 66, .55);
  color: var(--muted);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: background .18s;
}

tbody tr:hover {
  background: rgba(126, 158, 200, .05);
}

tbody td.model {
  color: var(--paper);
  font-weight: 500;
}

tbody td.weight b {
  color: var(--glow);
  font-weight: 500;
}

td .badge {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--faint);
}

/* spec sheet */
.specsheet {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 44px;
  border-top: 1px solid var(--line);
}

.specsheet .spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(34, 46, 66, .55);
  font-family: var(--mono);
}

.specsheet .sk {
  color: var(--faint);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 11px;
  white-space: nowrap;
}

.specsheet .sv {
  color: var(--paper);
  font-size: 13.5px;
  text-align: right;
}

.specsheet .sv.hl {
  color: var(--glow);
  font-weight: 500;
}

/* ==========================================================================
   Bespoke
   ========================================================================== */

.bespoke {
  /* Cool radial accents matching story/maker, over a lightly translucent
     ink base so the global aurora + carbon-fibre texture bleed through this
     full-page section instead of a flat slab. */
  background:
    radial-gradient(48% 30% at 84% 2%, rgba(66, 120, 166, .16), transparent 60%),
    radial-gradient(42% 30% at 6% 40%, rgba(40, 98, 134, .12), transparent 62%),
    radial-gradient(46% 28% at 90% 82%, rgba(36, 78, 116, .12), transparent 64%),
    linear-gradient(rgba(12, 16, 23, .86), rgba(12, 16, 23, .86));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.holo-text {
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bespoke .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 18px;
}

.patterns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.pat {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 22px;
  background: var(--panel);
  position: relative;
  overflow: hidden;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pat .weave {
  position: absolute;
  inset: 0;
  opacity: .5;
}

.pat h4 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 22px;
  position: relative;
}

.pat span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  position: relative;
}

.opts {
  display: grid;
  gap: 20px;
}

.opt {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
}

.opt .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--glow);
  opacity: .7;
  padding-top: 4px;
}

.opt h4 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 5px;
}

.opt p {
  color: var(--muted);
  font-size: 14.5px;
}

.bespoke .disclaimer {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  letter-spacing: .05em;
  margin-top: 34px;
}

/* bespoke product imagery */
.bespoke-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 54px;
}

.bespoke-gallery figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  /* visible so on-image option buttons near the edge are never clipped */
  overflow: visible;
  background: var(--panel);
}

.bespoke-gallery img {
  width: 100%;
  height: auto;
  display: block;
  /* round the top corners directly now that the figure no longer clips */
  border-radius: 4px 4px 0 0;
}

/* ---------------------------------------------------------------------------
   Interactive weave / finish picker.

   The ring imagery already ships baked-in leader lines, endpoint markers and
   labels, so overlaying our own dots read as part of the diagram rather than a
   control. Instead the image is the reference and a labelled chip row below it
   is the obvious control: pick a chip, the readout updates and a soft spotlight
   settles on the matching label so the link stays legible.
   --------------------------------------------------------------------------- */
.bespoke-media {
  position: relative;
  display: block;
  line-height: 0;
}

/* spotlight that focuses the active option's baked-in label; --sx / --sy are
   set per-option from the chip in JS. */
.bespoke-spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 50%),
    rgba(191, 230, 255, .22) 0%,
    rgba(191, 230, 255, .05) 8%,
    rgba(191, 230, 255, 0) 14%,
    rgba(8, 11, 16, .16) 22%,
    rgba(8, 11, 16, .64) 52%
  );
  opacity: 0;
  transition: opacity .4s ease, background .4s ease;
}

.bespoke-media.is-focusing .bespoke-spot {
  opacity: 1;
}

/* on-image option markers - obvious clickable buttons layered on the ring at
   each option's spot. Generated in JS from the chip row so both controls share
   one source of truth and stay in sync. Pointer affordance only; the chip row
   below remains the canonical keyboard / screen-reader control. */
.wspot {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(10, 14, 20, .62);
  border: 1px solid rgba(191, 230, 255, .5);
  box-shadow:
    0 0 0 4px rgba(10, 14, 20, .28),
    0 0 14px rgba(191, 230, 255, .3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: color .2s, background .2s, border-color .2s,
    box-shadow .2s, transform .2s;
}

/* leading dot so it reads as a pin-button even at rest */
.wspot::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px rgba(191, 230, 255, .8);
}

.wspot:hover {
  border-color: var(--glow);
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow:
    0 0 0 4px rgba(10, 14, 20, .34),
    0 0 20px rgba(191, 230, 255, .55);
}

.wspot.is-active {
  color: var(--ink);
  background: var(--glow);
  border-color: #fff;
  box-shadow:
    0 0 0 4px rgba(10, 14, 20, .34),
    0 0 22px rgba(191, 230, 255, .85);
}

.wspot.is-active::before {
  background: var(--ink);
  box-shadow: none;
}

/* holographic finish carries the brand gradient when active */
.wspot--holo.is-active {
  color: var(--ink);
  background: var(--holo);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(183, 155, 255, .6),
    0 0 22px rgba(191, 230, 255, .7);
}

/* chip control row */
.bespoke-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 18px 6px;
}

.wchip {
  position: relative;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

/* underline accent - absolutely placed so toggling active never shifts layout */
.wchip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--glow);
  transform: scaleX(0);
  transition: transform .22s ease;
}

.wchip:hover {
  color: var(--paper);
  border-color: var(--faint);
  transform: translateY(-1px);
}

.wchip:focus-visible {
  outline: none;
  border-color: var(--glow);
  box-shadow: 0 0 0 2px rgba(191, 230, 255, .35);
}

.wchip:active {
  transform: translateY(0);
}

.wchip.is-active {
  color: var(--paper);
  border-color: var(--glow);
  background: rgba(191, 230, 255, .08);
}

.wchip.is-active::after {
  transform: scaleX(1);
}

/* holographic option carries the brand gradient on its accent */
.wchip--holo.is-active {
  border-color: transparent;
  background: rgba(191, 230, 255, .06);
  box-shadow: 0 0 0 1px rgba(183, 155, 255, .5);
}

.wchip--holo::after {
  background: var(--holo);
}

/* readout - panels are stacked in one grid cell so the block never jumps */
.bespoke-readout {
  display: grid;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}

.ro-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.ro-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ro-title {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 20px;
  color: var(--paper);
  letter-spacing: .01em;
}

.ro-title--holo {
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ro-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--glow);
}

.ro-desc {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .bespoke-spot,
  .ro-panel,
  .wchip,
  .wchip::after,
  .wspot {
    transition-duration: .01ms;
  }
  .ro-panel {
    transform: none;
  }
}

.bespoke .opts {
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 48px;
}

/* ==========================================================================
   Maker / about
   ========================================================================== */

.maker {
  background:
    radial-gradient(52% 60% at 6% 24%, rgba(58, 108, 154, .13), transparent 64%),
    radial-gradient(46% 50% at 96% 88%, rgba(36, 72, 110, .10), transparent 66%),
    var(--ink-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.maker-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 56px;
  align-items: center;
}

.maker-figure {
  margin: 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}

.maker-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 72% center;
  opacity: .95;
}

.maker-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(8, 11, 16, .88));
}

.maker-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.maker-edge {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 30px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  position: relative;
  overflow: hidden;
}

.maker-edge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--holo);
  opacity: .55;
}

.edge-mark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  padding-right: 28px;
  border-right: 1px solid var(--line);
}

.edge-deg {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(46px, 6vw, 66px);
  letter-spacing: -.03em;
  /* Icy accent sheen, not the rainbow holo - a credential should read as authority, not novelty. */
  background: linear-gradient(160deg, var(--paper) 0%, var(--glow) 62%, #8FC6EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.edge-field {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--glow);
  margin-top: 10px;
}

.edge-note {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 46ch;
}

.maker-creds {
  margin-top: 24px;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faqlist {
  border-top: 1px solid var(--line);
  max-width: 880px;
}

.faqlist details {
  border-bottom: 1px solid var(--line);
}

.faqlist summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 2px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: color .2s;
}

.faqlist summary::-webkit-details-marker {
  display: none;
}

.faqlist summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--glow);
  font-size: 20px;
  line-height: 1;
}

.faqlist details[open] summary::after {
  content: "\2212";
}

.faqlist summary:hover {
  color: var(--glow);
}

.faqlist details p {
  color: var(--muted);
  font-size: 14.5px;
  padding: 0 2px 22px;
  max-width: 72ch;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  text-align: center;
  background: radial-gradient(58% 78% at 50% 52%, rgba(74, 132, 180, .11), transparent 70%);
}

.contact h2.sect {
  margin: 0 auto;
  max-width: none;
}

.contact .lead {
  margin: 20px auto 0;
}

.contact .channels {
  margin-top: 46px;
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
}

.contact .channels a:hover {
  color: var(--glow);
}

.contact .channels span {
  color: var(--faint);
}

/* Contact form */
.cform {
  max-width: 720px;
  margin: 46px auto 0;
  text-align: left;
}

.cform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cform .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cform .field-full {
  grid-column: 1 / -1;
}

.cform label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.cform input,
.cform textarea {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 13px 14px;
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}

.cform textarea {
  resize: vertical;
  min-height: 108px;
}

.cform input::placeholder,
.cform textarea::placeholder {
  color: var(--faint);
}

.cform input:focus,
.cform textarea:focus {
  outline: none;
  border-color: var(--glow);
  box-shadow: 0 0 0 3px rgba(191, 230, 255, .12);
}

.cform input:user-invalid,
.cform textarea:user-invalid {
  border-color: #C46A6A;
}

.cform-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.cform-foot .btn[disabled] {
  opacity: .55;
  pointer-events: none;
}

.cform-status {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0;
}

.cform-status.is-ok {
  color: var(--glow);
}

.cform-status.is-err {
  color: #E39494;
}

@media (max-width: 640px) {
  .cform-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  border-top: 1px solid var(--line);
  padding: 46px 0 40px;
  background: var(--ink);
}

footer img {
  height: 22px;
  width: auto;
  opacity: .85;
  margin-bottom: 4px;
}

footer .tagline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--faint);
  text-transform: uppercase;
}

footer .copy {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

footer .frow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

footer .fbrand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

footer .flinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

footer .flinks a {
  color: var(--muted);
  transition: color .2s;
}

footer .flinks a:hover {
  color: var(--glow);
}

footer .fbottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

footer .fsocial {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}

footer .fsocial a {
  color: var(--faint);
}

footer .fsocial a:hover {
  color: var(--glow);
}

/* ==========================================================================
   Reveal
   ========================================================================== */

/* Only hide reveal elements when JS is active (html.js is set synchronously in
   each page head). Without JS, every section stays visible.
   The motion now carries a gentle blur-in for a softer, more cinematic entry. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1),
    filter .8s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ==========================================================================
   Added animations
   ========================================================================== */

/* hero entrance (CSS only) */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * {
    opacity: 0;
    animation: hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero-content > *:nth-child(1) {
    animation-delay: 0.05s;
  }
  .hero-content > *:nth-child(2) {
    animation-delay: 0.15s;
  }
  .hero-content > *:nth-child(3) {
    animation-delay: 0.25s;
  }
  .hero-content > *:nth-child(4) {
    animation-delay: 0.40s;
  }
  .hero-content > *:nth-child(5) {
    animation-delay: 0.52s;
  }
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* holo rule shimmer */
.holo-rule {
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .holo-rule {
    animation: holo-shift 9s linear infinite;
  }
}

@keyframes holo-shift {
  to {
    background-position: 200% 0;
  }
}

/* pillar image hover zoom */
.pillar-img {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar:hover .pillar-img {
  transform: scale(1.04);
}

/* ==========================================================================
   Motion layer v2 - choreography upgrade
   ========================================================================== */

/* --- Scroll progress: a hairline holo bar tracking page depth --------------
   Pure CSS via scroll-timeline where supported; main.js drives a passive
   fallback otherwise. */
.scroll-prog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--holo);
  opacity: .85;
  z-index: 60;
  pointer-events: none;
  will-change: transform;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-prog {
      animation: scroll-prog-grow linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes scroll-prog-grow {
  to {
    transform: scaleX(1);
  }
}

/* --- Staggered child entrances --------------------------------------------
   A .stagger container reveals its direct children one after another. The
   container itself stays statically placed; the cascade lives on the items. */
.js .reveal.stagger {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.js .stagger > .stag-item {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1),
    transform .7s cubic-bezier(.16, 1, .3, 1),
    filter .7s ease;
  transition-delay: calc(var(--i, 0) * 65ms);
}

.js .stagger.in > .stag-item {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* --- Button-in-button: nested trailing icon chip --------------------------
   main.js injects a .btn-ico circle into every .btn. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn:has(.btn-ico) {
  padding-right: 14px;
}

.btn-label {
  display: inline-block;
}

.btn-ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .55s cubic-bezier(.32, .72, 0, 1), background .3s ease;
}

.btn-pri .btn-ico {
  background: rgba(10, 13, 18, .12);
  color: var(--ink);
}

.btn-sec .btn-ico {
  background: rgba(191, 230, 255, .10);
  color: var(--paper);
}

.btn-ico svg {
  width: 12px;
  height: 12px;
  display: block;
}

.btn:hover .btn-ico {
  transform: translate(3px, -2px) scale(1.06);
}

.btn-pri:hover .btn-ico {
  background: rgba(10, 13, 18, .2);
}

.btn-sec:hover .btn-ico {
  background: rgba(191, 230, 255, .18);
}

/* --- Cursor spotlight on hardware cards ------------------------------------
   main.js feeds --mx / --my; a soft glow tracks the pointer. */
.pillar::before,
.statcard::before,
.pat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(191, 230, 255, .10),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 0;
}

.pillar:hover::before,
.statcard:hover::before,
.pat:hover::before {
  opacity: 1;
}

.pillar > *,
.statcard .stat-text,
.statcard .stat-imgs {
  position: relative;
  z-index: 1;
}

/* --- Animated holo underline on nav + footer links -------------------------
   Drop-label keeps its caret ::after, so it is intentionally left out here. */
.nav nav > a:not(.navcta),
footer .flinks a {
  position: relative;
}

.nav nav > a:not(.navcta)::after,
footer .flinks a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--glow);
  opacity: .8;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s cubic-bezier(.32, .72, 0, 1);
}

.nav nav > a:not(.navcta):hover::after,
footer .flinks a:hover::after {
  transform: scaleX(1);
}

/* --- FAQ: smoother open ----------------------------------------------------- */
.faqlist summary::after {
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), color .2s;
}

.faqlist details[open] > p {
  animation: faq-reveal .5s cubic-bezier(.16, 1, .3, 1);
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* --- Hero blueprint rings + scroll cue -------------------------------------- */
.hero-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hero-rings .ring {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(126, 158, 200, .10);
  will-change: transform;
}

.hero-rings .ring-outer {
  width: min(62vw, 700px);
  border-color: rgba(126, 158, 200, .06);
}

.hero-rings .ring-dash {
  width: min(44vw, 480px);
  border-style: dashed;
  border-color: rgba(126, 158, 200, .14);
}

.hero-rings .ring-sweep {
  width: min(34vw, 380px);
  border: none;
  background: conic-gradient(
    from 0deg,
    transparent 0 66%,
    rgba(191, 230, 255, .15) 85%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-rings .ring-outer {
    animation: ring-spin 120s linear infinite reverse;
  }
  .hero-rings .ring-dash {
    animation: ring-spin 90s linear infinite;
  }
  .hero-rings .ring-sweep {
    animation: ring-spin 18s linear infinite;
  }
}

@keyframes ring-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero .scrollcue {
  text-decoration: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 880px) {
  .nav .brand small {
    display: none;
  }
  .nav nav {
    display: none;
  }
  .nav nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(8, 11, 16, .97);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .nav nav.open a {
    padding: 14px 28px;
  }
  .menu-btn {
    display: inline-block;
  }
  /* dropdown shows inline in the mobile menu */
  .nav .has-drop {
    display: block;
  }
  .nav .has-drop::after {
    display: none;
  }
  .nav .has-drop .drop-label::after {
    content: "";
  }
  .nav nav.open .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    margin: 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    min-width: 0;
  }
  .nav nav.open .dropdown a {
    padding-left: 48px;
  }
  .story .grid2,
  .tech .grid2,
  .bespoke .grid2 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .story-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .pillars {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .readouts {
    grid-template-columns: repeat(2, 1fr);
  }
  .feat .row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .series-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .series-head .icon {
    width: 160px;
  }
  .specsheet {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .wavy-hero,
  .feather-hero,
  .tech-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  thead th,
  tbody td {
    padding-left: 20px;
    padding-right: 20px;
  }
  .bespoke-gallery {
    grid-template-columns: 1fr;
  }
  .wspot {
    font-size: 10px;
    padding: 5px 9px;
    gap: 5px;
  }
  .bespoke .opts {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .statcard {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .statcard .stat-imgs {
    width: 100%;
  }
  .maker-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .maker-figure img {
    aspect-ratio: 16 / 10;
    object-position: 72% 42%;
  }
}

@media (max-width: 520px) {
  .maker-edge {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .edge-mark {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding-right: 0;
    border-right: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .edge-field {
    margin-top: 0;
  }
  .patterns {
    grid-template-columns: 1fr 1fr;
  }
  .hero .meta {
    gap: 18px;
  }
  thead th:nth-child(3),
  tbody td:nth-child(3) {
    display: none;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .spin {
    animation: none;
  }
  .scrollcue .bar {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .js .stagger > .stag-item {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .hero-rings {
    display: none;
  }
  .btn:hover .btn-ico {
    transform: none;
  }
  .pillar::before,
  .statcard::before,
  .pat::before {
    display: none;
  }
}